From daf2f9a376a9eff265db9078d45c95505e3f3a4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dandelion=20Man=C3=A9?= <decentralion@dandelion.io>
Date: Fri, 6 Jul 2018 20:57:19 -0700
Subject: [PATCH] Add edge direction configuration to Cred Explorer (#494)

This commit adds another bank of sliders to the cred explorer, for
changing the directionality of edges. The sliders have the range [0,1]
with step size of 0.01.

The layout is pretty ugly and clearly should be refactored. But playing
with these sliders is interesting :)

Test plan: We don't have any unit tests on the WeightConfig, but I did
drive it by hand. An interesting experiment is to set the AUTHORS edge
directionality to 1, so that users get no credit for authoring posts. As
expected, this utterly tanks the users' scores; many users then have a
score of -Infinity.
---
 src/app/credExplorer/WeightConfig.js | 49 ++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/app/credExplorer/WeightConfig.js b/src/app/credExplorer/WeightConfig.js
index bcaaa81..22d7b5d 100644
--- a/src/app/credExplorer/WeightConfig.js
+++ b/src/app/credExplorer/WeightConfig.js
@@ -126,11 +126,10 @@ class EdgeConfig extends React.Component<{
   edgeWeights: EdgeWeights,
   onChange: (EdgeWeights) => void,
 }> {
-  render() {
-    const controls = [];
-    for (const key of Object.keys(this.props.edgeWeights)) {
+  weightControls() {
+    return Object.keys(this.props.edgeWeights).map((key) => {
       const {logWeight} = this.props.edgeWeights[key];
-      controls.push(
+      return (
         <label style={{display: "block"}} key={key}>
           <input
             type="range"
@@ -151,11 +150,42 @@ class EdgeConfig extends React.Component<{
           {JSON.stringify(EdgeAddress.toParts((key: any)))}
         </label>
       );
-    }
+    });
+  }
+
+  directionControls() {
+    return Object.keys(this.props.edgeWeights).map((key) => {
+      const {directionality} = this.props.edgeWeights[key];
+      return (
+        <label style={{display: "block"}} key={key}>
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.01}
+            value={directionality}
+            onChange={(e) => {
+              const value: number = e.target.valueAsNumber;
+              const edgeWeights = {
+                ...this.props.edgeWeights,
+                [key]: {...this.props.edgeWeights[key], directionality: value},
+              };
+              this.props.onChange(edgeWeights);
+            }}
+          />{" "}
+          {directionality.toFixed(2)}{" "}
+          {JSON.stringify(EdgeAddress.toParts((key: any)))}
+        </label>
+      );
+    });
+  }
+  render() {
     return (
       <div>
         <h2>Edge weights (in log space)</h2>
-        {controls}
+        {this.weightControls()}
+        <h2>Edge directionality</h2>
+        {this.directionControls()}
       </div>
     );
   }
@@ -166,10 +196,9 @@ class NodeConfig extends React.Component<{
   onChange: (NodeWeights) => void,
 }> {
   render() {
-    const controls = [];
-    for (const key of Object.keys(this.props.nodeWeights)) {
+    const controls = Object.keys(this.props.nodeWeights).map((key) => {
       const currentValue = this.props.nodeWeights[key];
-      controls.push(
+      return (
         <label style={{display: "block"}} key={key}>
           <input
             type="range"
@@ -187,7 +216,7 @@ class NodeConfig extends React.Component<{
           {JSON.stringify(NodeAddress.toParts((key: any)))}
         </label>
       );
-    }
+    });
     return (
       <div>
         <h2>Node weights (in log space)</h2>