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

How to show a - 1M nodes #668

Open
gaianraja opened this issue Feb 20, 2024 · 3 comments
Open

How to show a - 1M nodes #668

gaianraja opened this issue Feb 20, 2024 · 3 comments

Comments

@gaianraja
Copy link

gaianraja commented Feb 20, 2024

Describe the bug
Hi,

We have a large visualisation. we are trying to show 1M nodes at a time. It is showing good. But when people drag the mouse or continuous actions multiple times then it become freezes. Can you please suggest me how do I show the loading icon so that the user aware of to wait for next action.

Is it possible to divide the data into multiple groups and visualise as a pagination?
I saw we can control the Camera position based on number of nodes. Are you manipulating the node while performing actions like mouse drag down and up?

How do I show loading when .graphData(gData) loaded into the browser?

Is the react-fiber-3D can be an alternate?

Can you please help us with the below URL?

https://stackblitz.com/edit/stackblitz-starters-jt7nyz?file=src%2Fapp%2Fgraph%2Fgraph.component.ts

I have attached a demo where the CPU is 99% for 1000 nodes.

image

To Reproduce
Set the demo, Number of nodes = 10,00,000

Raja K

@gaianraja gaianraja changed the title How to show a loading bar - 1M nodes How to show a - 1M nodes Feb 20, 2024
@jaygray0919
Copy link

We have a similar problem and plan to use a category selector as used by LesMis examples and others.
Here is our LesMiz version (originally from @vasturiano): https://afdsi.com/___tmp-4/les-mis-avec-selector/
Here is an example similar to yours: https://jsfiddle.net/EPurpl3/qoz5dj31/1/
IMHO the categories must be pre-defined; we can't walk the tree to feature all connections/paths based on a single node (too big a problem)
LesMis illustrates the nearest neighbor query.
I believe the EPurpl3 example was developed by Raúl Ibáñez (https://codepen.io/raulprop) @RaulPROP
We'd be interested in developing a generalized solution.
There is a model we might follow: https://www.gituml.com/viewz/1871
GitUML visualizes GitHub dependencies based on selecting a specific JavaScript library.
/jay

@gaianraja
Copy link
Author

Hi,

I am unable to launch jsfiddle. it is getting crashed.

Thanks,
Raja K

@jaygray0919
Copy link

Yup, it's big. We run it locally but I don't have a public link to share.
However, it has provided clues (for us) about how to select a Class and all members of a Class.
The GitUML approach is interesting. You identify a text structure (in this case a GitHub repo) and select an item from the class tree.
GitUML then generates the nodes and relationships for the selection (i.e. identifying all dependencies in a workflow).
In other words, provide a tree structure as a menu (where one could select multiple tree terms) and then generate only that part of the graph.
Bottom line: don't try to initially display large models (because they require more resources than are available - e.g. the fiddle)
Instead, provide a navigator with the root on top ("All") and selectors in a descending tree (where "All" cannot be selected).
In the LesMis case, a selection features the "nearest neighbor".
An updated version would identify all dependents/relationships for a selection.

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