Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finding ways to navigate the graphs #86

Open
Chico-Carneiro opened this issue Apr 12, 2024 · 1 comment
Open

Finding ways to navigate the graphs #86

Chico-Carneiro opened this issue Apr 12, 2024 · 1 comment

Comments

@Chico-Carneiro
Copy link

Chico-Carneiro commented Apr 12, 2024

Hi, thanks for working on this really cool tool!

I would like to suggest a few features to help navigation / UI / UX
I understand implementing features requires time and effort.

Essential (in my opinion):

  • (1) Highlight the root node by default [optional: highlight all the root nodes if they exist]
  • Have a dedicated shortcut a button that highlights the root

Really nice to have:

  • [Clickable] list with history of previously visited nodes

Nice to have:

  • Search by filename

Improvement:

  • A shortcut or a button to highlight all nodes' labels without having to select them
  • Different colors for input links vs. output links

Optional:

  • A way to highlight nodes which are leaves, aka they don't import from others (no output links)

I was trying to see if I could be useful and implement (1).
I don't have experience with three.js, but I was trying to understand how you populate the DATA variable in dep-tree/internal/entropy/index.html

I can see it has nodes, links and optional ['enableGui'].
If the user already "Choose the file that will act as the root of the dependency graph" then you can pass that info down somehow, and add the node to highlightNodes or as selectedNode.

Cheers!

@gabotechs
Copy link
Owner

Overall all of the suggestion look good,

I was trying to see if I could be useful and implement (1).
I don't have experience with three.js, but I was trying to understand how you populate the DATA variable in dep-tree/internal/entropy/index.html

That's done on Golang's code https://github.com/gabotechs/dep-tree/blob/main/internal/entropy/render.go#L38 that takes the Graph, serializes it, and performs a plain string replacement in the index.html file.

I can see it has nodes, links and optional ['enableGui'].
If the user already "Choose the file that will act as the root of the dependency graph" then you can pass that info down somehow, and add the node to highlightNodes or as selectedNode.

The necessary info is actually already passed down. This structure https://github.com/gabotechs/dep-tree/blob/main/internal/entropy/graph.go#L17 is what gets serialized as a node object and passed down to the index.html file. So the node object on the JS side already has a boolean attribute isEntrypoint determining whether the file is the main entrypoint or not.

About your other suggestions, I have gathered some feedback from other people using dep-tree and created a bunch of issues that seem somehow related to your suggestions:

I think this issue and the ones I shared set a good baseline for the direction dep-tree should take for improving usability on the frontend side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants