Auto ForceAtlas2 layout with predefined settings on graph load

[zerodwide]

Hi Guys
I am using this for graph viewer in my project.

I load gephi-lite inside an iframe and feed it via my api which generate .gexf file as ?file= querystring.
it can load my graph, but i need this functions for better experience for user:

1. Auto ForceAtlas2 layout with predefined settings when a graph is loaded
2. enable image for nodes with field of 'image'
3. increase sigma labelRenderedSizeThreshold to value 30 by default

i'm not familiar with react! its about 3 days i trying to do it by my self even with help of AI, but no luck!.

Can you please guide me how to do it?
I will Appreciate you.

[zerodwide]

this is best setting for most graphs to look reasonable, and i want so set it for my project

   const settings = forceAtlas2.inferSettings(graph);
      settings.adjustSizes = true;
      settings.barnesHutOptimize = false;
      settings.barnesHutTheta = 0.5;
      settings.edgeWeightInfluence = 1;
      settings.gravity = 4;
      settings.linLogMode = false;
      settings.outboundAttractionDistribution = false;
      settings.scalingRatio = 1;
      settings.slowDown = 2;
      settings.strongGravityMode = false;

[zerodwide]

with help of AI i end up with something like this code. and i have tried in many places
from src/core/initialize.tsx to others, but it wont change anything in screen.

import forceAtlas2 from "graphology-layout-forceatlas2";
import FA2LayoutSupervisor from 'graphology-layout-forceatlas2/worker';

console.log("auto layout...");
const dataset = graphDatasetAtom.get();
if (dataset && dataset.fullGraph) {
    console.log("auto layout... started 10");
    const graph = dataset.fullGraph;

    // Randomize positions to see clear movement
    graph.forEachNode((node) => {
        graph.setNodeAttribute(node, 'x', Math.random() * 100 - 50);
        graph.setNodeAttribute(node, 'y', Math.random() * 100 - 50);
    });


    const settings = forceAtlas2.inferSettings(graph);
    settings.adjustSizes = true;
    settings.barnesHutOptimize = false;
    settings.barnesHutTheta = 0.5;
    settings.edgeWeightInfluence = 1;
    settings.gravity = 4;
    settings.linLogMode = false;
    settings.outboundAttractionDistribution = false;
    settings.scalingRatio = 1;
    settings.slowDown = 2;
    settings.strongGravityMode = false;
    // Customize settings here (e.g., settings.gravity = 0.5; settings.scalingRatio = 5; etc.)

    const layout = new FA2LayoutSupervisor(graph, {settings});
    layout.start();

    setTimeout(() => {
        layout.stop();
        //resetCamera({ forceRefresh: true });
        console.log("auto layout... stopped");
    }, 3000);
}

[sim51]

Hi,

From what I understand, your goal is to control gephi-lite from your application.

We created the GephiLiteDriver, which allows you to open and control a gephi-lite instance. Not all gephi-lite features are exposed, but it works well, and we’re already using it in production.

We’re still missing some examples for this specific use case, but we do have documentation available here:
https://docs.gephi.org/lite/integration/typescript-driver