Expose alpha in TimelineExplorer (#1390)

This commit modifies the TimelineExplorer so that the user can both see
the chosen alpha value, and change it. Alpha has a pretty profound
impact on the final scores, and I want to tweak it for CredSperiment
week two, so this is an important addition.

Test plan: Modify the alpha, re-run cred calculation, and observe that
the scores change. `yarn test` passes.

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## [Unreleased]
 
 <!-- Please add new entries just beneath this line. -->
+- Enable viewing and changing alpha in the explorer (#1390)
 - Enable combining different user identities together (#1385)
 - Add `sourcecred discourse` for loading Discourse servers (#1374)
 - Breaking: Change output format for the scores command (#1372)

src/explorer/TimelineExplorer.js

@@ -12,6 +12,7 @@ import {WeightConfig} from "./weights/WeightConfig";
 import {WeightsFileManager} from "./weights/WeightsFileManager";
 import {type PluginDeclaration} from "../analysis/pluginDeclaration";
 import * as NullUtil from "../util/null";
+import {format} from "d3-format";
 
 export type Props = {
   projectId: string,
@@ -97,6 +98,19 @@ export class TimelineExplorer extends React.Component<Props, State> {
         }}
       />
     );
+
+    const alphaSlider = (
+      <input
+        type="range"
+        min={0.05}
+        max={0.95}
+        step={0.05}
+        value={this.state.alpha}
+        onChange={(e) => {
+          this.setState({alpha: e.target.valueAsNumber});
+        }}
+      />
+    );
     const paramsUpToDate = deepEqual(
       this.params(),
       this.state.timelineCred.params()
@@ -136,6 +150,9 @@ export class TimelineExplorer extends React.Component<Props, State> {
           <div style={{marginTop: 10}}>
             <span>Upload/Download weights:</span>
             {weightFileManager}
+            <span>α</span>
+            {alphaSlider}
+            <span>{format(".2f")(this.state.alpha)}</span>
             {weightConfig}
           </div>
         )}