TimelineExplorer: Enable changing selected type (#1268)

The code is mostly ported from the legacy app. However, we no longer
assume that we are showing every type for every plugin. Instead, the
types are manually selected. For now, we permit the GitHub user type,
and the GitHub repo type, as these are the two types that are included
in filtered timeline cred.

Test plan: Manual inspection is necessary, since this frontend is mostly
untested. I've done that inspection. Also, `yarn test` passes.

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## [Unreleased]
 
 <!-- Please add new entries to the _top_ of this section. -->
+- Enable viewing cred over time for GitHub repos (#1268)
 - Remove unused CLI commands (`pagerank` and `analyze`) (#1254)
 - Track cred on the project level, not the repo level (#1233)
 - Fix a bug with GitHub reference detection with multiple repos (#1233)

src/explorer/TimelineApp.js

@@ -4,7 +4,11 @@ import React from "react";
 import type {Assets} from "../webutil/assets";
 import {TimelineExplorer} from "./TimelineExplorer";
 import {TimelineCred} from "../analysis/timeline/timelineCred";
-import {declaration as githubDeclaration} from "../plugins/github/declaration";
+import {
+  declaration as githubDeclaration,
+  userNodeType,
+  repoNodeType,
+} from "../plugins/github/declaration";
 import {DEFAULT_CRED_CONFIG} from "../plugins/defaultCredConfig";
 import {encodeProjectId, type ProjectId} from "../core/project";
 
@@ -70,6 +74,8 @@ export class TimelineApp extends React.Component<Props, State> {
             initialTimelineCred={timelineCred}
             projectId={this.props.projectId}
             declarations={[githubDeclaration]}
+            defaultNodeType={userNodeType}
+            filterableNodeTypes={[userNodeType, repoNodeType]}
           />
         );
       }

src/explorer/TimelineExplorer.js

@@ -4,6 +4,7 @@ import React from "react";
 import deepEqual from "lodash.isequal";
 import {type PluginDeclaration} from "../analysis/pluginDeclaration";
 import {type Weights, copy as weightsCopy} from "../analysis/weights";
+import {type NodeAddressT} from "../core/graph";
 import {
   TimelineCred,
   type TimelineCredParameters,
@@ -11,12 +12,15 @@ import {
 import {TimelineCredView} from "./TimelineCredView";
 import {WeightConfig} from "./weights/WeightConfig";
 import {WeightsFileManager} from "./weights/WeightsFileManager";
+import {type NodeType} from "../analysis/types";
 
 export type Props = {
   projectId: string,
   initialTimelineCred: TimelineCred,
   // TODO: Get this info from the TimelineCred
   declarations: $ReadOnlyArray<PluginDeclaration>,
+  +defaultNodeType: NodeType,
+  +filterableNodeTypes: $ReadOnlyArray<NodeType>,
 };
 
 export type State = {
@@ -26,6 +30,7 @@ export type State = {
   intervalDecay: number,
   loading: boolean,
   showWeightConfig: boolean,
+  selectedNodeTypePrefix: NodeAddressT,
 };
 
 /**
@@ -40,9 +45,10 @@ export class TimelineExplorer extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     const timelineCred = props.initialTimelineCred;
+    const {defaultNodeType} = props;
     const {alpha, intervalDecay, weights} = timelineCred.params();
+    const selectedNodeTypePrefix = defaultNodeType.prefix;
     this.state = {
-      selectedNodeTypePrefix: timelineCred.config().scoreNodePrefix,
       timelineCred,
       alpha,
       intervalDecay,
@@ -52,6 +58,7 @@ export class TimelineExplorer extends React.Component<Props, State> {
       weights: weightsCopy(weights),
       loading: false,
       showWeightConfig: false,
+      selectedNodeTypePrefix,
     };
   }
 
@@ -117,6 +124,8 @@ export class TimelineExplorer extends React.Component<Props, State> {
             <a href={`/prototype/${this.props.projectId}/`}>(legacy)</a>
           </span>
           <span style={{flexGrow: 1}} />
+          {this.renderFilterSelect()}
+          <span style={{flexGrow: 1}} />
           <button
             onClick={() => {
               this.setState(({showWeightConfig}) => ({
@@ -141,11 +150,31 @@ export class TimelineExplorer extends React.Component<Props, State> {
     );
   }
 
+  renderFilterSelect() {
+    return (
+      <label>
+        <span style={{marginLeft: "5px"}}>Showing: </span>
+        <select
+          value={this.state.selectedNodeTypePrefix}
+          onChange={(e) =>
+            this.setState({selectedNodeTypePrefix: e.target.value})
+          }
+        >
+          {this.props.filterableNodeTypes.map(({prefix, pluralName}) => (
+            <option key={prefix} value={prefix}>
+              {pluralName}
+            </option>
+          ))}
+        </select>
+      </label>
+    );
+  }
+
   render() {
     const timelineCredView = (
       <TimelineCredView
         timelineCred={this.state.timelineCred}
-        selectedNodeFilter={this.state.timelineCred.config().scoreNodePrefix}
+        selectedNodeFilter={this.state.selectedNodeTypePrefix}
       />
     );
     return (