From 4bea0133db97d0180f79746557f7c0095fd155ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dandelion=20Man=C3=A9?= <dl@dandelion.io>
Date: Thu, 10 May 2018 15:43:49 -0700
Subject: [PATCH] =?UTF-8?q?Set=20expanded=20state,=20update=20via=20+/?=
 =?UTF-8?q?=E2=88=92=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Test plan: Try clicking on the buttons and see that they toggle between
plus and minus. They don't do anything else.

Paired with @wchargin
---
 src/app/credExplorer/pagerankTable.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/app/credExplorer/pagerankTable.js b/src/app/credExplorer/pagerankTable.js
index 76f1cbc..fb60f2e 100644
--- a/src/app/credExplorer/pagerankTable.js
+++ b/src/app/credExplorer/pagerankTable.js
@@ -149,7 +149,7 @@ export class PagerankTable extends React.Component<Props, State> {
   }
 }
 
-type RTState = {};
+type RTState = {expanded: boolean};
 type RTProps = {|
   +address: Address,
   +graph: Graph<any, any>,
@@ -157,12 +157,30 @@ type RTProps = {|
 |};
 
 class RecursiveTable extends React.Component<RTProps, RTState> {
+  constructor() {
+    super();
+    this.state = {expanded: false};
+  }
+
   render() {
     const {address, graph, pagerankResult} = this.props;
+    const {expanded} = this.state;
     const score = pagerankResult.get(address).probability;
     return (
       <tr key={JSON.stringify(address)}>
-        <td>{nodeDescription(graph, address)}</td>
+        <td>
+          <button
+            style={{marginRight: 5}}
+            onClick={() => {
+              this.setState(({expanded}) => ({
+                expanded: !expanded,
+              }));
+            }}
+          >
+            {expanded ? "\u2212" : "+"}
+          </button>
+          {nodeDescription(graph, address)}
+        </td>
         <td>{(score * 100).toPrecision(3)}</td>
         <td>{Math.log(score).toPrecision(3)}</td>
       </tr>