Separate TableRow `depth` from `indent` (#655)

Currently, as we expand nodes or connections in the PagerankTable, the
rows both get more indented and attain a deeper color. Both of these
behaviors are controlled by the `depth` parameter.

We're going to switch the UI to a cyclic structure, where as you drill
down, once you get back to a particular node, the indentation resets to
base, but the color - which now indicates nested depth - continues to
change. This commit sets that change up, by splitting the behvaior into
two parameters: `depth`, which controls the color, and `indent`, which
controls the indentation level.

As a small additional tweak, the indentation formula is changed so that
buttons are always indented by 5 pixels. This results in a cleaner
display for nodes that have `depth>0` but `indent==0` (as the button
doesn't look squahsed against the color boundary).

Test plan:
The change is very simple; inspecting the updated snapshots should be
persuasive.

src/app/credExplorer/pagerankTable/Connection.js

@@ -66,6 +66,7 @@ export class ConnectionRow extends React.PureComponent<ConnectionRowProps> {
     );
     return (
       <TableRow
+        indent={depth}
         depth={depth}
         description={connectionView}
         connectionProportion={connectionProportion}

src/app/credExplorer/pagerankTable/Node.js

@@ -46,6 +46,7 @@ export class NodeRow extends React.PureComponent<NodeRowProps> {
     return (
       <TableRow
         depth={0}
+        indent={0}
         description={description}
         connectionProportion={null}
         score={score}

src/app/credExplorer/pagerankTable/TableRow.js

@@ -3,7 +3,10 @@
 import React, {type Node as ReactNode} from "react";
 
 type TableRowProps = {|
+  // How many layers of nested scope we're in (changes the color)
   +depth: number,
+  // How many steps to indent the row (shifts button right)
+  +indent: number,
   // The node that goes in the Description column
   +description: ReactNode,
   // What proportion should be formatted in the connection column
@@ -32,6 +35,7 @@ export class TableRow extends React.PureComponent<
   render() {
     const {
       depth,
+      indent,
       description,
       connectionProportion,
       score,
@@ -52,7 +56,7 @@ export class TableRow extends React.PureComponent<
             <button
               style={{
                 marginRight: 5,
-                marginLeft: 15 * depth,
+                marginLeft: 15 * indent + 5,
               }}
               onClick={() => {
                 this.setState(({expanded}) => ({

src/app/credExplorer/pagerankTable/TableRow.test.js

@@ -8,10 +8,11 @@ import {COLUMNS} from "./sharedTestUtils";
 require("../../testUtil").configureEnzyme();
 
 describe("app/credExplorer/pagerankTable/TableRow", () => {
-  function example(depth: number = 3) {
+  function example() {
     return shallow(
       <TableRow
-        depth={depth}
+        depth={1}
+        indent={1}
         description={<span data-test-description={true} />}
         connectionProportion={0.5}
         score={133.7}
@@ -19,22 +20,38 @@ describe("app/credExplorer/pagerankTable/TableRow", () => {
       />
     );
   }
-  it("has depth-based color", () => {
+  it("depth parameter changes the color, but not the indentation", () => {
     for (const depth of [0, 1, 2]) {
-      const el = example(depth);
-      const style = el.find("tr").props().style;
-      expect({depth, style}).toMatchSnapshot();
+      const el = shallow(
+        <TableRow
+          depth={depth}
+          indent={1}
+          description={<span data-test-description={true} />}
+          connectionProportion={0.5}
+          score={133.7}
+          children={<div data-test-children={true} />}
+        />
+      );
+      const trStyle = el.find("tr").props().style;
+      const buttonStyle = el.find("button").props().style;
+      expect({depth, trStyle, buttonStyle}).toMatchSnapshot();
     }
   });
-  it("has depth-based indentation", () => {
-    for (const depth of [0, 1, 2]) {
-      const el = example(depth);
-      const style = el
-        .find("td")
-        .at(0)
-        .find("button")
-        .props().style;
-      expect({depth, style}).toMatchSnapshot();
+  it("indent parameter changes the button indentation", () => {
+    for (const indent of [0, 1, 2]) {
+      const el = shallow(
+        <TableRow
+          depth={3}
+          indent={indent}
+          description={<span data-test-description={true} />}
+          connectionProportion={0.5}
+          score={133.7}
+          children={<div data-test-children={true} />}
+        />
+      );
+      const trStyle = el.find("tr").props().style;
+      const buttonStyle = el.find("button").props().style;
+      expect({indent, trStyle, buttonStyle}).toMatchSnapshot();
     }
   });
   it("expand button toggles symbol based on expansion state", () => {

src/app/credExplorer/pagerankTable/__snapshots__/TableRow.test.js.snap

@@ -1,58 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`app/credExplorer/pagerankTable/TableRow has depth-based color 1`] = `
+exports[`app/credExplorer/pagerankTable/TableRow depth parameter changes the color, but not the indentation 1`] = `
 Object {
+  "buttonStyle": Object {
+    "marginLeft": 20,
+    "marginRight": 5,
+  },
   "depth": 0,
-  "style": Object {
+  "trStyle": Object {
     "backgroundColor": "rgba(0,143.4375,0,0)",
   },
 }
 `;
 
-exports[`app/credExplorer/pagerankTable/TableRow has depth-based color 2`] = `
+exports[`app/credExplorer/pagerankTable/TableRow depth parameter changes the color, but not the indentation 2`] = `
 Object {
+  "buttonStyle": Object {
+    "marginLeft": 20,
+    "marginRight": 5,
+  },
   "depth": 1,
-  "style": Object {
+  "trStyle": Object {
     "backgroundColor": "rgba(0,143.4375,0,0.09999999999999998)",
   },
 }
 `;
 
-exports[`app/credExplorer/pagerankTable/TableRow has depth-based color 3`] = `
+exports[`app/credExplorer/pagerankTable/TableRow depth parameter changes the color, but not the indentation 3`] = `
 Object {
+  "buttonStyle": Object {
+    "marginLeft": 20,
+    "marginRight": 5,
+  },
   "depth": 2,
-  "style": Object {
+  "trStyle": Object {
     "backgroundColor": "rgba(0,143.4375,0,0.18999999999999995)",
   },
 }
 `;
 
-exports[`app/credExplorer/pagerankTable/TableRow has depth-based indentation 1`] = `
+exports[`app/credExplorer/pagerankTable/TableRow indent parameter changes the button indentation 1`] = `
 Object {
-  "depth": 0,
-  "style": Object {
-    "marginLeft": 0,
+  "buttonStyle": Object {
+    "marginLeft": 5,
     "marginRight": 5,
   },
+  "indent": 0,
+  "trStyle": Object {
+    "backgroundColor": "rgba(0,143.4375,0,0.2709999999999999)",
+  },
 }
 `;
 
-exports[`app/credExplorer/pagerankTable/TableRow has depth-based indentation 2`] = `
+exports[`app/credExplorer/pagerankTable/TableRow indent parameter changes the button indentation 2`] = `
 Object {
-  "depth": 1,
-  "style": Object {
-    "marginLeft": 15,
+  "buttonStyle": Object {
+    "marginLeft": 20,
     "marginRight": 5,
   },
+  "indent": 1,
+  "trStyle": Object {
+    "backgroundColor": "rgba(0,143.4375,0,0.2709999999999999)",
+  },
 }
 `;
 
-exports[`app/credExplorer/pagerankTable/TableRow has depth-based indentation 3`] = `
+exports[`app/credExplorer/pagerankTable/TableRow indent parameter changes the button indentation 3`] = `
 Object {
-  "depth": 2,
-  "style": Object {
-    "marginLeft": 30,
+  "buttonStyle": Object {
+    "marginLeft": 35,
     "marginRight": 5,
   },
+  "indent": 2,
+  "trStyle": Object {
+    "backgroundColor": "rgba(0,143.4375,0,0.2709999999999999)",
+  },
 }
 `;