How should I build graph with JSON file?

[quyphuc2111]

[AlexeyMz]

Hi @quyphuc2111
Thanks for showing interest for the project!

To display a JSON data, I suggest to modify this example.

Suppose the JSON data is structured like this:

{
  "nodes": [
    {"id": "node1", "label": "First Node"},
    {"id": "node2", "label": "Second Node"},
    // ...
  ],
  "edges": [
    {"sourceId": "node1", "targetId": "node2"},
    // ...
  ]
}

Then its possible to make RdfDataProvider with it like this:

import {
    Rdf, ElementIri, ...
} from '@reactodia/workspace';
...

    async function loadGraphData(signal: AbortSignal) {
        const {model, view, performLayout} = workspaceRef.current!.getContext();

        const jsonData = {
            "nodes": [
                {"id": "node1", "label": "First Node"},
                {"id": "node2", "label": "Second Node"},
                // ...
            ],
            "edges": [
                {"sourceId": "node1", "targetId": "node2"},
                // ...
            ]
        };

        const dataProvider = new RdfDataProvider({});
        const factory = dataProvider.factory;

        // Constants for recognized by standard predicates
        const RDF_TYPE = factory.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type');
        const RDFS_LABEL = factory.namedNode('http://www.w3.org/2000/01/rdf-schema#label');
        // Custom node and edge types
        const NODE = factory.namedNode('urn:Node');
        const EDGE = factory.namedNode('urn:connected');

        const nodeIds: ElementIri[] = [];
        const graphData: Rdf.Quad[] = [];
        // Add nodes to the underlying graph data
        for (const node of jsonData.nodes) {
            const nodeId = factory.namedNode(node.id as ElementIri);
            nodeIds.push(nodeId.value);
            graphData.push(
                factory.quad(nodeId, RDF_TYPE, NODE),
                factory.quad(nodeId, RDFS_LABEL, factory.literal(node.label)),
            );
        }
        // Add edges to the underlying graph data
        for (const edge of jsonData.edges) {
            const sourceId = factory.namedNode(edge.sourceId);
            const targetId = factory.namedNode(edge.targetId);
            graphData.push(
                factory.quad(sourceId, EDGE, targetId)
            );
        }
        
        dataProvider.addGraph(graphData);

        // Create empty diagram and put all nodes on it
        await model.createNewDiagram({dataProvider, signal});
        for (const nodeId of nodeIds) {
            model.createElement(nodeId);
        }
        await model.requestElementData(nodeIds);
        await model.requestLinksOfType();

        // Layout elements on canvas
        const canvas = view.findAnyCanvas()!;
        await performLayout({canvas, layoutFunction: layoutForcePadded, signal});
    }

Result: