Allow expanding/hiding the WeightConfig (#511)

The WeightConfig is a power user feature. Now that we're building a
public-facing demo out of the Cred Explorer, it will be better to hide
the weight configuration by default.

This commit adds a button for showing/hiding the weight configuration.
The weights are still propagated correctly regardless of whether the
weight config is shown.

Test plan:
- Ensure that the site loads with weights hidden by default.
- Ensure that clicking the button causes the weight config to display.
- Ensure that PageRank loads and displays correctly with the weights
hidden.
- Ensure that changes to the weight config still propagate to PageRank
(with weights hidden or not hidden).

src/app/credExplorer/WeightConfig.js

@@ -25,7 +25,6 @@ type Props = {
   onChange: (EdgeEvaluator) => void,
 };
 
-// The key should be an EdgeAddressT, but a Flow bug prevents this.
 type EdgeWeights = Map<EdgeAddressT, UserEdgeWeight>;
 type UserEdgeWeight = {|+logWeight: number, +directionality: number|};
 const EDGE_WEIGHTS_KEY = "edgeWeights";
@@ -60,6 +59,7 @@ const defaultNodeWeights = (): NodeWeights =>
 type State = {
   edgeWeights: EdgeWeights,
   nodeWeights: NodeWeights,
+  expanded: boolean,
 };
 
 export class WeightConfig extends React.Component<Props, State> {
@@ -68,6 +68,7 @@ export class WeightConfig extends React.Component<Props, State> {
     this.state = {
       edgeWeights: defaultEdgeWeights(),
       nodeWeights: defaultNodeWeights(),
+      expanded: false,
     };
   }
 
@@ -90,23 +91,39 @@ export class WeightConfig extends React.Component<Props, State> {
   }
 
   render() {
+    const {expanded} = this.state;
     return (
-      <div
+      <React.Fragment>
-        style={{
+        <button
-          display: "flex",
+          onClick={() => {
-          flexWrap: "wrap",
+            this.setState(({expanded}) => ({expanded: !expanded}));
-          justifyContent: "space-between",
+          }}
-        }}
+        >
-      >
+          {expanded ? "Hide weight configuration" : "Show weight configuration"}
-        <EdgeConfig
+        </button>
-          edgeWeights={this.state.edgeWeights}
+        {expanded && (
-          onChange={(ew) => this.setState({edgeWeights: ew}, () => this.fire())}
+          <div
-        />
+            style={{
-        <NodeConfig
+              display: "flex",
-          nodeWeights={this.state.nodeWeights}
+              flexWrap: "wrap",
-          onChange={(nw) => this.setState({nodeWeights: nw}, () => this.fire())}
+              justifyContent: "space-between",
-        />
+            }}
-      </div>
+          >
+            <EdgeConfig
+              edgeWeights={this.state.edgeWeights}
+              onChange={(ew) =>
+                this.setState({edgeWeights: ew}, () => this.fire())
+              }
+            />
+            <NodeConfig
+              nodeWeights={this.state.nodeWeights}
+              onChange={(nw) =>
+                this.setState({nodeWeights: nw}, () => this.fire())
+              }
+            />
+          </div>
+        )}
+      </React.Fragment>
     );
   }