Make a selected node the center of the page

[mabreyes]

How do I make a selected node the center of the graph? In my code below, the selectedNode holds the value of the node. How do I get its coordinates and refresh the graph with the selectedNode as the center?

orbRef.current.data.setup({ nodes, edges });
            const selectedNode = orbRef.current.data.getNodeById(searchTerm);
            if (selectedNode) {
                selectedNode.state = GraphObjectState.SELECTED;
            }

            orbRef.current.view.setSettings({
                zoomFitTransformMs: 1000,
                render: {
                    shadowIsEnabled: true,
                    shadowOnEventIsEnabled: false,
                    fps: 100,
                    minZoom: 2.5,
                },
                simulation: {
                    centering: {
                        x: 0,
                        y: 0,
                        strength: 1,
                    },
                }
            });

            orbRef.current.view.render(() => {
                orbRef.current.view.recenter();
            });

Thank you!

[matea16]

Hi @mabreyes, thank you for opening this issue. Someone from the team will pick this up and take a look at it

[josiahbryan]

Hey @mabreyes , thanks to hints from @tonilastre in #52, I've crafted this function which does just what you're talking about I think - you just have to call it with the selected node:

https://gist.github.com/josiahbryan/354a0357dd52e43b14b3df4022267b9f

I use it like this in my app:

const nodeIdForFocus = 'aidgno_ticss4ego8hzw5tx3ov9sdz9b';

const orbNode = orb.data
    .getNodes()
    .find((x) => x.id === nodeIdForFocus);

if (orbNode) {
    orbFocusOnNode(orb, orbNode);
}

[mabreyes]

Thanks @josiahbryan is this before the render or after the render?

[josiahbryan]

I do it after the render... Sorry I should have said that.

On Sat, May 25, 2024, 2:35 PM Marc Reyes @.***> wrote:

Thanks @josiahbryan https://github.com/josiahbryan is this before the render or after the render?

— Reply to this email directly, view it on GitHub https://github.com/memgraph/orb/issues/103#issuecomment-2131413828, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABEZELEMMZATT23CW4SQ6RLZEDRWZAVCNFSM6AAAAABIDKPH4KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZRGQYTGOBSHA . You are receiving this because you were mentioned.Message ID: @.***>

[mabreyes]

Got it to work and I was also able to make it change based on the search query. Thanks @josiahbryan

[tonilastre]

@josiahbryan thanks for jumping in with a great solution.

We are preparing a 1.0.0 version of the Orb that will have some changes to the API (e.g. render will be called automatically) along with several performance fixes. We added zoom handle functions there, but we are definitely missing the panning of the canvas, so once 1.0.0 is out, we will add this capability to the official API.

Our plan after 1.0.0 was to fix the default layout algo (d3-force) and also expose layout algorithms where you will be able to plug in any other layout (e.g. tree layout), but adding this feature before that makes more sense.

[josiahbryan]

Thanks @tonilastre - will the 1.0.0 "break" any of the APIs I used in this "hack"? Or will this still work on 1.0.0 (before you add it to the official API)?

[tonilastre]

The main part of the code (90% of it) will work as is, there will be some minor changes, e.g. orb.view doesn't exist anymore, it is now a separate class: OrbDefaultView or OrbMapView which contain a renderer. Canvas is not anymore in the main class, but in the renderer because orb 1.0.0 already has a fix where the renderer listens on Device Pixel Ratio (DPR) to render a graph with a better quality on retina displays (https://github.com/memgraph/orb/pull/45).

All in all, it is just a simple find+replace on some of the classes and functions. We will create a guided migration document for it to help out with the transition.

[josiahbryan]

Ahh nice!! Love to hear there will be a migration doc - thanks for the quick response and appreciate your detailed reply. Looking forward to trying out 1.0.0 - yeah I was noticing some less-than-optimal rendering on a few of my screens (quad-monitor setup) - so looking forward to the DPR enhancements too. Thanks!