From 7f18e389ea668fec03c55db4f46ff0c1018edb16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dandelion=20Man=C3=A9?= Date: Mon, 13 Aug 2018 18:07:13 -0700 Subject: [PATCH] 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. --- .../credExplorer/pagerankTable/Connection.js | 1 + src/app/credExplorer/pagerankTable/Node.js | 1 + .../credExplorer/pagerankTable/TableRow.js | 6 +- .../pagerankTable/TableRow.test.js | 47 ++++++++++----- .../__snapshots__/TableRow.test.js.snap | 57 +++++++++++++------ 5 files changed, 78 insertions(+), 34 deletions(-) diff --git a/src/app/credExplorer/pagerankTable/Connection.js b/src/app/credExplorer/pagerankTable/Connection.js index 6831bda..eb2de89 100644 --- a/src/app/credExplorer/pagerankTable/Connection.js +++ b/src/app/credExplorer/pagerankTable/Connection.js @@ -66,6 +66,7 @@ export class ConnectionRow extends React.PureComponent { ); return ( { return ( { this.setState(({expanded}) => ({ diff --git a/src/app/credExplorer/pagerankTable/TableRow.test.js b/src/app/credExplorer/pagerankTable/TableRow.test.js index 986b1a8..7488451 100644 --- a/src/app/credExplorer/pagerankTable/TableRow.test.js +++ b/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( } 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( + } + connectionProportion={0.5} + score={133.7} + children={
} + /> + ); + 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( + } + connectionProportion={0.5} + score={133.7} + children={
} + /> + ); + 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", () => { diff --git a/src/app/credExplorer/pagerankTable/__snapshots__/TableRow.test.js.snap b/src/app/credExplorer/pagerankTable/__snapshots__/TableRow.test.js.snap index 0bd0dab..2dec6a8 100644 --- a/src/app/credExplorer/pagerankTable/__snapshots__/TableRow.test.js.snap +++ b/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)", + }, } `;