feat: basic navigation #92

KarlHeitmann · 2022-08-19T01:28:35Z

Hi!

Here is an idea I've built some weeks ago. I wanted to add navigation through the nodes of the JSON. Once upon the user clicks on a node of the graph, the id of the node is sent through props.id to the handleClick function, and the handle click will search that id on the original graph structure of the JSON. When it finds the match, the function that is applied to the original JSON main tree is applied on the subtree whose root is theid that matches props.id

The navigation feature is toggled by a new button on the sidebar. If the button is pressed by second time (thus, disabling navigation) it will reset the graph and display again the main tree.

The navigation button was originally meant to be a patch, because I wanted to add a parent node to the subtree, when this parent node is clicked, it will search for the id of the parent node of the subtree on the main tree, and then display that broader subtree on the display window.

Adding this parent node to the subtree was not a task as easy as displaying the subtree, that's the reason why I decided to add more tests to the project. You can see them on this branch on my fork

I was working on it, but when I visited the changes on the upstream repo (yours) a couple days ago, I found out that you changed the structure of Graph/index.tsx component, and you now use React.memo. I've tried doing a rebase on the upstream but I was not able to add navigation to subtrees using the new Graph/index.tsx component that uses the React.memo function. That's the reason why I am submitting this PR. Can you help me doing the merge, so I can continue working on this feature? My attempt to do the rebase is here if you want to take a look at it.

I will be on the lookout for any comment, suggestion and/or feedback over this feature.

Best regards

KarlHeitmann · 2022-08-19T01:33:38Z

src/utils/json-editor-parser.ts

@@ -89,11 +89,16 @@ const relationships = (xs: { id: string; children: never[] }[]) => {
  ]);
 };

+export const flattenTree = tree => {


I've needed to break in two the function parser on line 97.

extractTree will take as input the JSON data, and outputs the node tree that contains the id and children keys. This is the main data structure to work on.

flattenTree is the function that will take as an input the extracted tree produced by extractTree, and will flatten it to an array. That array can be later on used to split the nodes and edges. I am missing some tests here, because on the test files you can take a look at the input/output data structures and have a better idea of what each function does, without need to read the source code of them. Take a look at this branch's folder to see the tests

AykutSarac · 2022-08-19T12:42:56Z

Thank you for creating such feature, I have merged the PR branch with upstream so you can continue. Good luck!

…dren

…e json feat: added parent_id data each node of the tree representation of the json

…gets drawn on canvas

KarlHeitmann · 2022-08-21T06:22:11Z

Thanks for the update on the branch @AykutSarac . It was very helpful, and I could make some updates to the branch.

I've modified the generateChildren function and added a new .map stage. It takes the array of two elements and adds a third element to the array that is a call to nextId(). I've had to add the current id on that stage to memoize it there because if I stored the current_id inside a variable in the original flatMap function, the nextId() arrow function had a strange behaviour. Maybe the two .map calls can be merged into one, I didn't exhaust all the posibilities though.
The modification to the extractTree were made in tandem with the modifications to generateChildren, because these two functions calls each other recursively. These modifications will add the parent_id information to each node of the tree.
I've modified the flattenTree function to add the parent node and the edge that goes from the root node of the subtree to the parent node . With this two more elements inside the array of flatten nodes and edges, getEdgeNodes will do the work of separating the edges and nodes so they can be sent to the canvas and draw everything. I think the modification here surely can be refactorized to look better.

Pending work:

I'd like to draw the parent node in a different color and at the left side of the root node of the subtree while navigating. To easily distinguish it from the real nodes of the JSON. But I don't know how to do it yet, I'd have to study the other parts of the source code (specially files src/components/CustomNode/ObjectNode.tsx and src/components/CustomNode/styles.tsx) and the reaflow library.
There are some linting errors.
I don't know if the toggle navigation button is needed anymore. If you want to erase it, we should think on a way to decide whether display the details modal or navigate to the subgraph when clicking a node on the graph.

If you need me to improve something more on this PR just say it here. I did enjoy working on your project. I have some ideas that may be interesting to build, for example:

Add a panel to the right called "filter". On this panel, one can add another JSON which will contain a set of rules that can be merged with the data json. There rules can be used to filter out some keys on each node of the original JSON, in order to hide a set of keys in each node.

If you need something else just ping me.

AykutSarac · 2022-08-22T19:31:07Z

I'd like to draw the parent node in a different color and at the left side of the root node of the subtree while navigating. To easily distinguish it from the real nodes of the JSON. But I don't know how to do it yet, I'd have to study the other parts of the source code (specially files src/components/CustomNode/ObjectNode.tsx and src/components/CustomNode/styles.tsx) and the reaflow library.

For this part, I think it would be better to just leave the parent node as is for now. The less customization the better it is.

I don't know if the toggle navigation button is needed anymore. If you want to erase it, we should think on a way to decide whether display the details modal or navigate to the subgraph when clicking a node on the graph.

I think we could put a navigation mode once this PR comes to a final, user can choose between navigation modes at sidebar. I have good UI & UX plans for this one.

If you need something else just ping me.

@KarlHeitmann Thank you so much for the contribution, it is especially so awesome when people adding new feature to the project.
The top prioritized issue with the project is #51 & #27. Perhaps you could take a look at them if you are looking for something additional :)

KarlHeitmann · 2022-08-23T04:09:26Z

Thanks! I'm going to take a look at #51 and #27 I was looking for something additional to do.

For this part, I think it would be better to just leave the parent node as is for now. The less customization the better it is.

Ok! I like keeping things simple. However, yesterday I've had an idea that needs only two lines of code to be changed. Take a look at this branch I leaved on my fork https://github.com/KarlHeitmann/jsonvisio.com/tree/aesthetic_suggestion_to_nav

With these changes the graph looks something like this

KarlHeitmann · 2022-09-13T02:30:22Z

src/components/Graph/index.tsx

+        const subTree = searchSubTree(mainTree, props.id);
+
+        if (subTree.length) {
+          const flatTree = flattenTree(subTree);


flattenTree from json-editor-parser.ts is applied to the sub tree whose node is clicked by the user. Here you apply the same function applied on line 64 of this file into a subtree. FRACTAL.

KarlHeitmann · 2022-09-13T02:31:40Z

src/containers/Editor/LiveEditor/helpers.ts

@@ -46,6 +44,24 @@ export function getEdgeNodes(
  };
 }

+
+export function searchSubTree (trees: any[], id: string) {


Extremely simple function to search a match id, and take a subtree from the JSON data.

KarlHeitmann · 2022-09-13T02:58:50Z

src/components/__tests__/utils/json-editor-parser/extractTree.test.js

@@ -0,0 +1,190 @@
+import { extractTree } from "src/utils/json-editor-parser"


feat: basic navigation

6baa808

KarlHeitmann commented Aug 19, 2022

View reviewed changes

AykutSarac added 2 commits August 19, 2022 15:40

Merge branch 'main' into add_nav

367db62

conventional improvements

b26d950

AykutSarac linked an issue Aug 19, 2022 that may be closed by this pull request

Feature request: navigation helpers for interacting with really large JSON #69

Closed

KarlHeitmann added 5 commits August 20, 2022 19:36

feat: added basic tests for extractTree, flattenTree and generateChil…

ab0e7dc

…dren

feat: added parent_id data each node of the tree representation of th…

76c73b8

…e json feat: added parent_id data each node of the tree representation of the json

feat: flattenTree function adds a parent node if needed, parent node …

0d0977c

…gets drawn on canvas

chore: tests updated

dee65ea

refactor: function generateChildren uses .flatMap again

c66651c

Merge branch 'main' into add_nav

c81d54f

AykutSarac removed a link to an issue Aug 27, 2022

Feature request: navigation helpers for interacting with really large JSON #69

Closed

KarlHeitmann commented Sep 13, 2022

View reviewed changes

AykutSarac closed this Dec 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: basic navigation #92

feat: basic navigation #92

KarlHeitmann commented Aug 19, 2022

KarlHeitmann Aug 19, 2022

AykutSarac commented Aug 19, 2022

KarlHeitmann commented Aug 21, 2022

AykutSarac commented Aug 22, 2022

KarlHeitmann commented Aug 23, 2022

KarlHeitmann Sep 13, 2022

KarlHeitmann Sep 13, 2022

KarlHeitmann Sep 13, 2022

		@@ -0,0 +1,190 @@
		import { extractTree } from "src/utils/json-editor-parser"

feat: basic navigation #92

feat: basic navigation #92

Conversation

KarlHeitmann commented Aug 19, 2022

KarlHeitmann Aug 19, 2022

Choose a reason for hiding this comment

AykutSarac commented Aug 19, 2022

KarlHeitmann commented Aug 21, 2022

Pending work:

AykutSarac commented Aug 22, 2022

KarlHeitmann commented Aug 23, 2022

KarlHeitmann Sep 13, 2022

Choose a reason for hiding this comment

KarlHeitmann Sep 13, 2022

Choose a reason for hiding this comment

KarlHeitmann Sep 13, 2022

Choose a reason for hiding this comment