Node Collapse #83

svipatov · 2018-06-29T21:37:37Z

@danielcaldas

When possible give it a look please.

Added a _toggleNodeConnection for toggling a node connection in this.state.links.
Added a _getLeafNodeConnections for finding leaf node connections based on a starting node id.
The toggles happen from 0 to 1 or 1 to 0 in the links matrix.
isHidden is added to the this.state.d3links.

Possible improvements:

Should we toggle also connections from the parent node -> leaf node?
isHidden being added as a default.
Separate file for node connections/links manipulations like the one mentioned above.

After a review I'll get started on testing and validating.

danielcaldas

Should we toggle also connections from the parent node -> leaf node? I think we could leave this to a next iteration, still, I'm curious whether we could make this work with your current approach since you are preserving the matrix maybe we could apply something like the command pattern to undo/redo collapse interactions.

Nice job @svipatov! Thanks for putting your effort on this!

danielcaldas · 2018-07-01T21:18:46Z

sandbox/data/default.js

@@ -90,7 +90,19 @@ module.exports = {
        },
        {
            source: 'VUX',
-            target: 'Intruder'
+            target: 'Intruder 1'


It might be useful to have a specific data set (for instance collapsible) for this feature, this can be done by doing the following:

Create a folder under sandbox/data/collapsible

Add a config and a data file where you can tweak the data and configs in a more convenient way (collapsible.config.js and collapsible.data.js)

Load the dataset in the sandbox by adding a query parameter to the url: ?data=collapsible

Sounds like an excelent idea! I can create another PR with this feature included without a doubt.

Maybe this could be useful for this PR in order for us to do some functional tests on top of the dataset.

You are correct, haven't thought about the functional tests in this context.

danielcaldas · 2018-07-01T21:19:51Z

src/components/graph/Graph.jsx

@@ -358,11 +358,74 @@ export default class Graph extends React.Component {
        this.pauseSimulation();
    }

+    _toggleNodeConnection(targetNodeId, allConnections) {


_toggleNodeConnection and _getLeafNodeConnections could be moved into graph.helper.js

Agree completely, at the time of the submission I decided to wait for your input where would be the best place for these functions :)

These have been moved! :)

danielcaldas · 2018-07-01T21:25:52Z

src/components/graph/Graph.jsx

+    }
+
+    onClickNode = clickedNodeId => {
+        const currentConnections = this.state.links;


We could move all logic from line 387 to 411 in a separate function (maybe collapseNodes) the ouputs would be toggledLeafNodes and a new d3Links structure

We could, and we should.

I also attempted this separation, so in the future this could be done to any node.
But it may need a few tweaks to be a bit more resilient for other nodes (not just leaves).

I've moved this function for now into graph.helper.js. The discussion above could be a future concern :)

danielcaldas · 2018-07-01T21:45:08Z

src/components/graph/graph.renderer.jsx

+    return Object.keys(nodes)
+        .filter(
+            nodeId =>
+                !!Object.values(linksMatrix[nodeId]).reduce(


Maybe move this to a function countActiveNeighbours?

Sounds good!

I've created a getNodeCardinality in graph.helper.js.

Tell me what you think about the name. I felt that this way the name doesn't bind it directly to the concept of being active, but rather knowing how many nodes it has attached.

But aren't we hiding the purpose of the function by detaching the name from knowing how many nodes it has attached?

We discussed this and the conclusion was that the name does make sense as being getNodeCardinality :)

Mostly so that it can be used in other contexts, and still making its responsibility transparent

danielcaldas · 2018-07-02T21:15:57Z

A config should be added, to graph.config.js, below the steps to do it and documentation to add:

In file graph.config.js https://github.com/danielcaldas/react-d3-graph/blob/master/src/components/graph/graph.config.js#L132 the config collapsible should be added, this has a default boolean value of false (note that all properties follow alphabetical order).
Add the following piece of documentation to it:

@param {boolean} [collapsible=false] - 🚅🚅🚅 Allow leaf neighbours nodes to be collapsed (folded), this will allow users to clear the way out and focus on the parts of the graph that really matter. To see an example of this behaviour you can access this sandbox link that has a specific set up to experiment this feature.

Apply collapse node logic conditionally in onClickNode by accessing this.state.config.collapsible

…links to the graph.helper.js

svipatov · 2018-07-19T10:06:13Z

Thanks for approving! I have not been able to add some functional tests yet. I'll try to find some time soon to do those!

…e of numeric ID's usage.

…eact-d3-graph into feature/node-collapse

svipatov · 2018-07-20T08:51:19Z

@danielcaldas I've added a small functional test to verify the functionality :)

However I've had to change data.small.js, since the ID's were numerical, and since it is possible for us to use Object.keys, it would transform them into strings, mismatching ID's.

Solutions:

Change data.small.js (Which was what I did).
Try to parseInt ID's, if possible fine, if not, remain as a string.
Use a Map to avoid this.
Use == comparator so it coerces.

Tell me which one you think best?

(The culprit is in https://github.com/danielcaldas/react-d3-graph/pull/83/files#diff-f1693f8128c0a5fd1fd1ac84b9fd38cbR427)

danielcaldas · 2018-07-20T09:02:07Z

The ids from data.small.js are numeric for that reason, to test a graph in an e2e scenario against numerical ids. From within rd3g we always parse those ids into strings (use something like leafNodeId => leafNodeId === '${source.id}' || leafNodeId === '${target.id}'), so I'd say you to choose option 2.. It's not ideal, but a possibility in the future is to drop the support for numerical ids and require clients to always use strings.

This has affected the component in the past, for instance here #73.

Nice job with the testing tough!!

svipatov · 2018-07-20T09:30:02Z

I assumed it had a purpose correctly then. I'll implement your suggestion! Thank you :)

svipatov · 2018-07-20T10:00:01Z

@danielcaldas I've corrected it! :) https://media.giphy.com/media/xT5LMQK2y8LCyb5mP6/giphy.gif

svipatov and others added 2 commits June 29, 2018 19:37

First iteration of the node collapser

3a88c08

Cleaned up the code a bit

e22a0e5

danielcaldas requested changes Jul 1, 2018

View reviewed changes

Sergey Ipatov added 2 commits July 1, 2018 23:29

Put helpers where they belong (which is graph.helpers.js)

93ba502

Added a helper for getting the cardinality of a node.

2b97e8e

svipatov added 13 commits July 3, 2018 14:37

Added config parameter for collapsible feature

5b6bb8f

Separated the functional that returns a partial state of d3Links and …

6cafef1

…links to the graph.helper.js

Added JSDoc's and removed default config of leaf nodes.

78a1717

Checking for the existence of defined onClickNode callback

108cb57

Added collapsible config

7ce030e

Cleaned up the code a bit

9aab33d

Put helpers where they belong (which is graph.helpers.js)

bd6046e

Added a helper for getting the cardinality of a node.

038edea

Added config parameter for collapsible feature

b2d8618

Separated the functional that returns a partial state of d3Links and …

2ef8cc2

…links to the graph.helper.js

Added JSDoc's and removed default config of leaf nodes.

9aa917e

Checking for the existence of defined onClickNode callback

a1b7eff

Added collapsible config

93238fc

svipatov force-pushed the feature/node-collapse branch from 7ce030e to 93238fc Compare July 3, 2018 22:17

danielcaldas approved these changes Jul 18, 2018

View reviewed changes

svipatov added 2 commits July 20, 2018 09:42

Added a functional test for the graph, corrected small.data.js becaus…

07ded39

…e of numeric ID's usage.

Merge branch 'feature/node-collapse' of https://github.com/svipatov/r…

d0f7485

…eact-d3-graph into feature/node-collapse

Reverted small.data.js changes and corrected id matching

7dde3b0

danielcaldas merged commit df2e20f into danielcaldas:master Jul 23, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Node Collapse #83

Node Collapse #83

svipatov commented Jun 29, 2018

danielcaldas left a comment

danielcaldas Jul 1, 2018

svipatov Jul 1, 2018

danielcaldas Jul 2, 2018

svipatov Jul 3, 2018

danielcaldas Jul 1, 2018

svipatov Jul 1, 2018 •

edited

Loading

svipatov Jul 1, 2018

danielcaldas Jul 1, 2018

svipatov Jul 1, 2018 •

edited

Loading

svipatov Jul 3, 2018

danielcaldas Jul 1, 2018

svipatov Jul 1, 2018

svipatov Jul 1, 2018

danielcaldas Jul 2, 2018

svipatov Jul 3, 2018 •

edited

Loading

danielcaldas commented Jul 2, 2018

svipatov commented Jul 19, 2018 •

edited

Loading

svipatov commented Jul 20, 2018 •

edited

Loading

danielcaldas commented Jul 20, 2018

svipatov commented Jul 20, 2018

svipatov commented Jul 20, 2018 •

edited

Loading

Node Collapse #83

Node Collapse #83

Conversation

svipatov commented Jun 29, 2018

danielcaldas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svipatov Jul 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svipatov Jul 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svipatov Jul 3, 2018 • edited Loading

Choose a reason for hiding this comment

danielcaldas commented Jul 2, 2018

svipatov commented Jul 19, 2018 • edited Loading

svipatov commented Jul 20, 2018 • edited Loading

danielcaldas commented Jul 20, 2018

svipatov commented Jul 20, 2018

svipatov commented Jul 20, 2018 • edited Loading

svipatov Jul 1, 2018 •

edited

Loading

svipatov Jul 1, 2018 •

edited

Loading

svipatov Jul 3, 2018 •

edited

Loading

svipatov commented Jul 19, 2018 •

edited

Loading

svipatov commented Jul 20, 2018 •

edited

Loading

svipatov commented Jul 20, 2018 •

edited

Loading