From 6e2af1070fce6300110bbdcd7e19e626dc5b4f71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dandelion=20Man=C3=A9?= <decentralion@dandelion.io>
Date: Mon, 30 Sep 2019 10:33:15 -0600
Subject: [PATCH] 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                     |  1 +
 src/explorer/TimelineExplorer.js | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8af7eb0..d4dea30 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/src/explorer/TimelineExplorer.js b/src/explorer/TimelineExplorer.js
index cd8ed0e..75de9c3 100644
--- a/src/explorer/TimelineExplorer.js
+++ b/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>
         )}