Search Bar to search through different nodes

[chaitali-pathak]

Hey, it would be really helpful if a Search bar can be added to search through all different nodes. Any ideas on how to do in here? @vasturiano @micahstubbs @muralimulagalapati

[ItFlyingStart]

I'm looking for this feature as well. I'm thinking to adapt the next example https://github.com/vasturiano/react-force-graph/blob/master/example/click-to-focus/index.html

Is it possible to retrieve all graph nodes by using ref={graphRef} ?

Find the node by Id, Name, Description etc. And set the focus.

Will this work?

[micahstubbs]

this sounds like a nice feature for sure.

It would be fun to make a demo app that does this. I have a feeling that search probably ought to live in the webapp rather than the react-force-graph library, since you have to make decisions about state management and UI presentation.

hhhhmmmm. Would be interesting to hear what @vasturiano thinks about this.

[JonThom]

@micahstubbs @ItFlyingStart @chaitali-pathak I have implemented such a feature in my app. Something like this should work:

set a reference on the graph:

const fgRef = useRef(null);

..

<ForceGraph2D
    ref={fgRef}

...

now access the nodes through fgRef.current.graphData.nodes. this allows you to populate e.g. a dropdown menu. Now you can, for example, adapt the click-to-focus example (referenced above) so selecting a node zooms to it.

[ItFlyingStart]

@JonThom: Thanks for your hint. I will try it out.

[ItFlyingStart]

@JonThom: can you show how to access graphData.nodes? Because I don't see the property graphData. Not sure whether this property is also accessible for ForceGraph3D?

<ForceGraph3D ref={fgRef} graphData={gData} ... nodeThreeObject={formatNodeLayout} />

[vasturiano]

@ItFlyingStart in principle you shouldn't need to go through the ref to access the graphData object. That's essentially the gData structure that you're already passing via the graphData prop. So you can simply look in gData.nodes for this, just make sure to maintain a reference to that.

As for the search feature, it is certainly doable by scanning through the nodes structure and eventually tie it into zoom or highlight interactions to bring the selected node to focus. But, I agree with @micahstubbs that that's probably an application level feature and a bit too specific to have it as a feature in this module. It just provides you with all the building blocks to implement it. :)

[ItFlyingStart]

@vasturiano : thanks for your reply. I didn't know that the x y z coordinates will be populated in gData.nodes after assigning it to the graphData property. Great 👍. Just what I need.

[vasturiano]

@ItFlyingStart yes, the component doesn't make a defensive copy of the data structure and simply extends it with the position and velocity attributes.

More info about that in the d3-force-3d docs. 👍