What is the best way with many data?

[Suniron]

What is the best way to load many nodes (more than 15 000) and edge (more than 20 000) in the graph? :/

[johnfercher]

I'm also having problems to load many data. I'm getting this error:

Maximum recursive updates exceeded in component <VNetworkGraph>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
handleError@webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58
createOverlay/<@webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:322:18

When using the 3D forces, this error appeared sooner with less data. I removed the 3D forces and worked, now I when I scaled up the number of nodes and edges it reapeared.

[dash14]

Hi @Suniron, Apologies for the delay in replying. This library is aware that there are performance issues when dealing with large networks. I think that displays of this scale will be experientially heavy. It will take time, but I will work on improving it.

Hi @johnfercher, Thank you for reporting the issue! I had not seen this error before. If possible, it would be helpful in the analysis if you could provide the Vue version, the number of nodes, edges and paths you are displaying and the code of the configs you are passing during initialisation, for reference.

[johnfercher]

Version: @vue/cli 5.0.8 This example fails to me.

{
    "nodes": {
        "aracaju": {
            "id": "aracaju",
            "name": "Aracaju",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 55,
            "height": 40,
            "x": 960.8859999999997,
            "y": -149.97750000000008
        },
        "aruana": {
            "id": "aruana",
            "name": "Aruanã",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 55,
            "height": 40,
            "x": 190.75950000000012,
            "y": 70.8365
        },
        "belem": {
            "id": "belem",
            "name": "Belém",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 50,
            "height": 40,
            "x": 332.36799999999994,
            "y": -669.9739
        },
        "belo_horizonte": {
            "id": "belo_horizonte",
            "name": "Belo Horizonte",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 90,
            "height": 40,
            "x": 583.248685,
            "y": 345.2148900000002
        },
        "boa_vista": {
            "id": "boa_vista",
            "name": "Boa Vista",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": -336.92700000000013,
            "y": -905.0747
        },
        "brasilia": {
            "id": "brasilia",
            "name": "Brasília",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": 363.8939999999998,
            "y": 117.90549999999996
        },
        "caico": {
            "id": "caico",
            "name": "Caicó",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 50,
            "height": 40,
            "x": 959.5550000000003,
            "y": -394.71045
        },
        "campo_grande": {
            "id": "campo_grande",
            "name": "Campo Grande",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 80,
            "height": 40,
            "x": -5.628999999999905,
            "y": 374.3924999999999
        },
        "campos_dos_goytacazes": {
            "id": "campos_dos_goytacazes",
            "name": "Campos dos Goytacazes",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 125,
            "height": 40,
            "x": 727.1580000000004,
            "y": 446.49749999999995
        },
        "cascavel": {
            "id": "cascavel",
            "name": "Cascavel",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 59.96399999999994,
            "y": 622.5525
        },
        "chapeco": {
            "id": "chapeco",
            "name": "Chapecó",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 105.97699999999986,
            "y": 740.3240000000001
        },
        "coari": {
            "id": "coari",
            "name": "Coari",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 45,
            "height": 40,
            "x": -472.7935000000002,
            "y": -525.3316
        },
        "confresa": {
            "id": "confresa",
            "name": "Confresa",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 163.76549999999997,
            "y": -164.5525
        },
        "cruzeiro_do_sul": {
            "id": "cruzeiro_do_sul",
            "name": "Cruzeiro do Sul",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 95,
            "height": 40,
            "x": -995.7720000000004,
            "y": -328.4305
        },
        "cuiaba": {
            "id": "cuiaba",
            "name": "Cuiabá",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 55,
            "height": 40,
            "x": -85.21950000000015,
            "y": 107.93950000000007
        },
        "curitiba": {
            "id": "curitiba",
            "name": "Curitiba",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 289.96849999999995,
            "y": 648.5619999999999
        },
        "dourados": {
            "id": "dourados",
            "name": "Dourados",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": -14.690172999999959,
            "y": 472.2958550000001
        },
        "florianopolis": {
            "id": "florianopolis",
            "name": "Florianópolis",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 90,
            "height": 40,
            "x": 329.2802999999999,
            "y": 767.6424999999999
        },
        "fortaleza": {
            "id": "fortaleza",
            "name": "Fortaleza",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": 880.1130000000003,
            "y": -545.48855
        },
        "goiania": {
            "id": "goiania",
            "name": "Goiânia",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 290.9749999999999,
            "y": 167.3945
        },
        "guiana": {
            "id": "guiana",
            "name": "Guiana",
            "color": "#D8002F",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 50,
            "height": 40,
            "x": -198.558,
            "y": -1124.2607
        },
        "guiana_francesa": {
            "id": "guiana_francesa",
            "name": "Guiana Francesa",
            "color": "#D8002F",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 95,
            "height": 40,
            "x": 121.66849999999977,
            "y": -1021.3331499999999
        },
        "ibotirama": {
            "id": "ibotirama",
            "name": "Ibotirama",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": 623.2739999999999,
            "y": -80.00099999999998
        },
        "imperatriz": {
            "id": "imperatriz",
            "name": "Imperatriz",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 70,
            "height": 40,
            "x": 388.7650000000003,
            "y": -446.09749999999997
        },
        "itaituba": {
            "id": "itaituba",
            "name": "Itaituba",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": -79.4335000000001,
            "y": -515.19785
        },
        "itamaraju": {
            "id": "itamaraju",
            "name": "Itamaraju",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": 824.904,
            "y": 188.08550000000002
        },
        "ji_parana": {
            "id": "ji_parana",
            "name": "Ji-Paraná",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 70,
            "height": 40,
            "x": -407.3418499999998,
            "y": -151.30960000000005
        },
        "joao_pessoa": {
            "id": "joao_pessoa",
            "name": "João Pessoa",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 80,
            "height": 40,
            "x": 1082.6450000000002,
            "y": -358.6574
        },
        "juazeiro_do_norte": {
            "id": "juazeiro_do_norte",
            "name": "Juazeiro do Norte",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 105,
            "height": 40,
            "x": 837.279,
            "y": -351.95509999999996
        },
        "londrina": {
            "id": "londrina",
            "name": "Londrina",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 185.4739999999997,
            "y": 531.0985000000001
        },
        "macapa": {
            "id": "macapa",
            "name": "Macapá",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 55,
            "height": 40,
            "x": 191.337,
            "y": -751.895113
        },
        "maceio": {
            "id": "maceio",
            "name": "Maceió",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 55,
            "height": 40,
            "x": 1034.5694999999998,
            "y": -218.35625000000005
        },
        "manaus": {
            "id": "manaus",
            "name": "Manaus",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 50,
            "height": 40,
            "x": -301.43550000000005,
            "y": -579.10455
        },
        "montes_claros": {
            "id": "montes_claros",
            "name": "Montes Claros",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 85,
            "height": 40,
            "x": 587.4414999999999,
            "y": 170.53499999999985
        },
        "mossoro": {
            "id": "mossoro",
            "name": "Mossoró",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 946.0745000000002,
            "y": -464.6578
        },
        "natal": {
            "id": "natal",
            "name": "Natal",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 45,
            "height": 40,
            "x": 1063.395,
            "y": -431.3036
        },
        "oiapoque": {
            "id": "oiapoque",
            "name": "Oiapoque",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 149.05299999999988,
            "y": -960.73195
        },
        "pacaraima": {
            "id": "pacaraima",
            "name": "Pacaraima",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": -362.74400000000014,
            "y": -992.93555
        },
        "palmas": {
            "id": "palmas",
            "name": "Palmas",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 50,
            "height": 40,
            "x": 341.75649999999996,
            "y": -190.7104999999999
        },
        "parauapebas": {
            "id": "parauapebas",
            "name": "Parauapebas",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 75,
            "height": 40,
            "x": 255.26350000000002,
            "y": -416.1093
        },
        "parnaiba": {
            "id": "parnaiba",
            "name": "Parnaíba",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": 702.3035,
            "y": -590.28385
        },
        "petrolina": {
            "id": "petrolina",
            "name": "Petrolina",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": 771.9720000000002,
            "y": -233.3212000000001
        },
        "porto_velho": {
            "id": "porto_velho",
            "name": "Porto Velho",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 75,
            "height": 40,
            "x": -514.6100000000001,
            "y": -268.09935
        },
        "recife": {
            "id": "recife",
            "name": "Recife",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 50,
            "height": 40,
            "x": 1081.5285,
            "y": -307.0146
        },
        "rio_branco": {
            "id": "rio_branco",
            "name": "Rio Branco",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 70,
            "height": 40,
            "x": -729.4179999999997,
            "y": -201.42999999999995
        },
        "rio_verde": {
            "id": "rio_verde",
            "name": "Rio Verde",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": 200.5,
            "y": 228.846
        },
        "rorainopolis": {
            "id": "rorainopolis",
            "name": "Rorainópolis",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 85,
            "height": 40,
            "x": -323.0119999999997,
            "y": -802.00987
        },
        "salvador": {
            "id": "salvador",
            "name": "Salvador",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 881.8180000000002,
            "y": -36.62800000000004
        },
        "santarem": {
            "id": "santarem",
            "name": "Santarém",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": -8.428499999999985,
            "y": -615.8308
        },
        "sao_luis": {
            "id": "sao_luis",
            "name": "São Luís",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 70,
            "height": 40,
            "x": 563.1259999999997,
            "y": -610.80985
        },
        "sao_paulo": {
            "id": "sao_paulo",
            "name": "São Paulo",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 70,
            "height": 40,
            "x": 434.866,
            "y": 545.1895
        },
        "sinop": {
            "id": "sinop",
            "name": "Sinop",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 45,
            "height": 40,
            "x": -52.40099999999984,
            "y": -96.98500000000001
        },
        "sobral": {
            "id": "sobral",
            "name": "Sobral",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 50,
            "height": 40,
            "x": 780.6840000000002,
            "y": -547.4493
        },
        "tabatinga": {
            "id": "tabatinga",
            "name": "Tabatinga",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": -846.6175000000003,
            "y": -516.06575
        },
        "tarauaca": {
            "id": "tarauaca",
            "name": "Tarauacá",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 65,
            "height": 40,
            "x": -892.0749999999998,
            "y": -302.5409
        },
        "tefe": {
            "id": "tefe",
            "name": "Tefé",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 45,
            "height": 40,
            "x": -559.7980000000002,
            "y": -567.35985
        },
        "teresina": {
            "id": "teresina",
            "name": "Teresina",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 645.9119999999998,
            "y": -470.09345
        },
        "uberlandia": {
            "id": "uberlandia",
            "name": "Uberlândia",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 75,
            "height": 40,
            "x": 345.3391999999999,
            "y": 290.25152
        },
        "vilhena": {
            "id": "vilhena",
            "name": "Vilhena",
            "color": "#008E30",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 55,
            "height": 40,
            "x": -307.953,
            "y": -49.62450000000001
        },
        "vitoria": {
            "id": "vitoria",
            "name": "Vitória",
            "color": "#2345AB",
            "radius": 0,
            "border_radius": 10,
            "type": "rect",
            "width": 60,
            "height": 40,
            "x": 781.4045000000001,
            "y": 367.721
        }
    },
    "edges": {
        "edge0": {
            "source": "rio_verde",
            "target": "uberlandia",
            "label": "336 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge1": {
            "source": "curitiba",
            "target": "florianopolis",
            "label": "307 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge10": {
            "source": "macapa",
            "target": "belem",
            "label": "537 Km",
            "color": "#3355BB",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge100": {
            "source": "ji_parana",
            "target": "vilhena",
            "label": "334 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge101": {
            "source": "maceio",
            "target": "aracaju",
            "label": "500 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge102": {
            "source": "ibotirama",
            "target": "palmas",
            "label": "820 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge103": {
            "source": "brasilia",
            "target": "goiania",
            "label": "208 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge104": {
            "source": "imperatriz",
            "target": "belem",
            "label": "580 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge105": {
            "source": "campo_grande",
            "target": "sao_paulo",
            "label": "891 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge106": {
            "source": "curitiba",
            "target": "londrina",
            "label": "388 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge11": {
            "source": "goiania",
            "target": "rio_verde",
            "label": "232 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge12": {
            "source": "rio_verde",
            "target": "campo_grande",
            "label": "611 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge13": {
            "source": "campo_grande",
            "target": "dourados",
            "label": "225 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge14": {
            "source": "belem",
            "target": "santarem",
            "label": "1167 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge15": {
            "source": "natal",
            "target": "caico",
            "label": "272 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge16": {
            "source": "macapa",
            "target": "belem",
            "label": "207 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge17": {
            "source": "brasilia",
            "target": "palmas",
            "label": "845 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge18": {
            "source": "sao_luis",
            "target": "parnaiba",
            "label": "658 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge19": {
            "source": "sinop",
            "target": "itaituba",
            "label": "998 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge2": {
            "source": "londrina",
            "target": "sao_paulo",
            "label": "537 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge20": {
            "source": "santarem",
            "target": "parauapebas",
            "label": "1073 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge21": {
            "source": "joao_pessoa",
            "target": "recife",
            "label": "116 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge22": {
            "source": "ibotirama",
            "target": "brasilia",
            "label": "803 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge23": {
            "source": "goiania",
            "target": "uberlandia",
            "label": "340 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge24": {
            "source": "londrina",
            "target": "cascavel",
            "label": "380 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge25": {
            "source": "natal",
            "target": "mossoro",
            "label": "279 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge26": {
            "source": "porto_velho",
            "target": "ji_parana",
            "label": "372 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge27": {
            "source": "vitoria",
            "target": "campos_dos_goytacazes",
            "label": "241 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge28": {
            "source": "cuiaba",
            "target": "sinop",
            "label": "480 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge29": {
            "source": "campo_grande",
            "target": "uberlandia",
            "label": "760 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge3": {
            "source": "rio_branco",
            "target": "tarauaca",
            "label": "409 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge30": {
            "source": "brasilia",
            "target": "cuiaba",
            "label": "877 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge31": {
            "source": "aruana",
            "target": "cuiaba",
            "label": "780 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge32": {
            "source": "aruana",
            "target": "palmas",
            "label": "764 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge33": {
            "source": "boa_vista",
            "target": "rorainopolis",
            "label": "260 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge34": {
            "source": "itamaraju",
            "target": "vitoria",
            "label": "436 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge35": {
            "source": "itaituba",
            "target": "porto_velho",
            "label": "1252 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge36": {
            "source": "joao_pessoa",
            "target": "natal",
            "label": "181 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge37": {
            "source": "curitiba",
            "target": "cascavel",
            "label": "504 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge38": {
            "source": "boa_vista",
            "target": "guiana",
            "label": "679 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge39": {
            "source": "macapa",
            "target": "oiapoque",
            "label": "578 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge4": {
            "source": "confresa",
            "target": "parauapebas",
            "label": "731 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge40": {
            "source": "goiania",
            "target": "aruana",
            "label": "314 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge41": {
            "source": "teresina",
            "target": "caico",
            "label": "827 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge42": {
            "source": "salvador",
            "target": "aracaju",
            "label": "325 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge43": {
            "source": "sinop",
            "target": "confresa",
            "label": "636 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge44": {
            "source": "fortaleza",
            "target": "sao_luis",
            "label": "652 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge45": {
            "source": "fortaleza",
            "target": "recife",
            "label": "626 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge46": {
            "source": "brasilia",
            "target": "montes_claros",
            "label": "700 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge47": {
            "source": "salvador",
            "target": "recife",
            "label": "670 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge48": {
            "source": "juazeiro_do_norte",
            "target": "teresina",
            "label": "1128 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge49": {
            "source": "sobral",
            "target": "parnaiba",
            "label": "244 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge5": {
            "source": "manaus",
            "target": "porto_velho",
            "label": "768 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge50": {
            "source": "uberlandia",
            "target": "londrina",
            "label": "746 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge51": {
            "source": "teresina",
            "target": "mossoro",
            "label": "826 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge52": {
            "source": "manaus",
            "target": "coari",
            "label": "401 Km",
            "color": "#3355BB",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge53": {
            "source": "tefe",
            "target": "coari",
            "label": "211 Km",
            "color": "#3355BB",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge54": {
            "source": "fortaleza",
            "target": "mossoro",
            "label": "241 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge55": {
            "source": "juazeiro_do_norte",
            "target": "caico",
            "label": "323 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge56": {
            "source": "ibotirama",
            "target": "petrolina",
            "label": "709 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge57": {
            "source": "brasilia",
            "target": "porto_velho",
            "label": "1904 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge58": {
            "source": "campo_grande",
            "target": "londrina",
            "label": "589 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge59": {
            "source": "teresina",
            "target": "parnaiba",
            "label": "338 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge6": {
            "source": "sao_luis",
            "target": "teresina",
            "label": "436 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge60": {
            "source": "tefe",
            "target": "tabatinga",
            "label": "901 Km",
            "color": "#3355BB",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge61": {
            "source": "aruana",
            "target": "sinop",
            "label": "998 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge62": {
            "source": "belem",
            "target": "parauapebas",
            "label": "653 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge63": {
            "source": "cascavel",
            "target": "chapeco",
            "label": "337 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge64": {
            "source": "boa_vista",
            "target": "pacaraima",
            "label": "214 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge65": {
            "source": "rio_branco",
            "target": "brasilia",
            "label": "2249 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge66": {
            "source": "manaus",
            "target": "brasilia",
            "label": "1942 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge67": {
            "source": "cuiaba",
            "target": "campo_grande",
            "label": "707 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge68": {
            "source": "rio_branco",
            "target": "porto_velho",
            "label": "510 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge69": {
            "source": "sao_luis",
            "target": "imperatriz",
            "label": "632 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge7": {
            "source": "fortaleza",
            "target": "brasilia",
            "label": "1686 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge70": {
            "source": "sao_luis",
            "target": "belem",
            "label": "582 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge71": {
            "source": "cuiaba",
            "target": "vilhena",
            "label": "754 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge72": {
            "source": "joao_pessoa",
            "target": "caico",
            "label": "321 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge73": {
            "source": "manaus",
            "target": "rorainopolis",
            "label": "488 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge74": {
            "source": "brasilia",
            "target": "belo_horizonte",
            "label": "733 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge75": {
            "source": "sao_luis",
            "target": "belem",
            "label": "481 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge76": {
            "source": "confresa",
            "target": "palmas",
            "label": "583 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge77": {
            "source": "brasilia",
            "target": "belem",
            "label": "1606 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge78": {
            "source": "vitoria",
            "target": "belo_horizonte",
            "label": "514 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge79": {
            "source": "rio_verde",
            "target": "cuiaba",
            "label": "701 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge8": {
            "source": "juazeiro_do_norte",
            "target": "petrolina",
            "label": "348 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge80": {
            "source": "santarem",
            "target": "itaituba",
            "label": "368 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge81": {
            "source": "cruzeiro_do_sul",
            "target": "tarauaca",
            "label": "228 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge82": {
            "source": "imperatriz",
            "target": "parauapebas",
            "label": "387 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge83": {
            "source": "sinop",
            "target": "ji_parana",
            "label": "996 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge84": {
            "source": "petrolina",
            "target": "aracaju",
            "label": "478 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge85": {
            "source": "salvador",
            "target": "brasilia",
            "label": "1084 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge86": {
            "source": "fortaleza",
            "target": "teresina",
            "label": "604 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge87": {
            "source": "brasilia",
            "target": "sao_paulo",
            "label": "875 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge88": {
            "source": "manaus",
            "target": "belem",
            "label": "1289 Km",
            "color": "#F7B900",
            "type": "curve",
            "dashed": false,
            "width": 4
        },
        "edge89": {
            "source": "manaus",
            "target": "porto_velho",
            "label": "889 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge9": {
            "source": "imperatriz",
            "target": "palmas",
            "label": "628 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge90": {
            "source": "parauapebas",
            "target": "palmas",
            "label": "704 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge91": {
            "source": "mossoro",
            "target": "caico",
            "label": "189 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge92": {
            "source": "dourados",
            "target": "cascavel",
            "label": "411 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge93": {
            "source": "petrolina",
            "target": "teresina",
            "label": "641 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge94": {
            "source": "maceio",
            "target": "juazeiro_do_norte",
            "label": "606 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge95": {
            "source": "oiapoque",
            "target": "guiana_francesa",
            "label": "194 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge96": {
            "source": "imperatriz",
            "target": "teresina",
            "label": "614 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge97": {
            "source": "maceio",
            "target": "recife",
            "label": "257 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge98": {
            "source": "parauapebas",
            "target": "itaituba",
            "label": "1156 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        },
        "edge99": {
            "source": "curitiba",
            "target": "sao_paulo",
            "label": "402 Km",
            "color": "#666",
            "type": "curve",
            "dashed": false,
            "width": 3
        }
    },
    "paths": null
}

[johnfercher]

This is my code:

<style scoped>
.graph {
  border: solid red 1px;
  height: 1080px;
}
</style>

<template>
  <div v-if="graph !== null">
    <v-network-graph
        class="graph"
        :zoom-level="0.5"
        :nodes="graph.nodes"
        :layouts="graph.layouts"
        :edges="graph.edges"
        :configs="configs"
    >
      <template #edge-label="{ edge, ...slotProps }">
        <v-edge-label
            :text="edge.label"
            align="center"
            vertical-align="above"
            v-bind="slotProps" />
      </template>
    </v-network-graph>
  </div>
  <div v-if="graph === null">
    Loading...
  </div>
</template>

<script>
import axios from "axios";
import VNetworkGraph from "v-network-graph"
import * as vNG from "v-network-graph"
import {reactive} from "vue";

export default {
  name: 'HelloWorld',
  props: {
    VNetworkGraph,
  },
  data() {
    return {
      graph: {
        nodes: [],
        edges: [],
        layouts: {
          nodes: [],
        }
      },
      configs: reactive(
          vNG.defineConfigs({
            node: {
              normal: {
                radius: n => n.radius,
                color: n => n.color,
                borderRadius: n => n.border_radius,
                type: n => n.type,
                width: n => n.width,
                height: n => n.height,
                x: n => n.x,
                y: n => n.y,
              },
              label: {
                visible: true,
                color: "#ffffff",
                direction: "center",
                fontSize: 10,
                scale: 100,
              },
            },
            edge: {
              selectable: true,
              normal: {
                width: 3,
                color: e => e.color,
                dasharray: "0",
                linecap: "butt",
                animate: false,
                animationSpeed: 50,
              },
              zOrder: {
                enabled: true,
                zIndex: 1,
                bringToFrontOnHover: true,
                bringToFrontOnSelected: true,
              },
              gap: 30,
              type: e => e.type,
              margin: 10,
              marker: {
                source: {
                  type: "none",
                  width: 4,
                  height: 4,
                  margin: -1,
                  offset: 0,
                  units: "strokeWidth",
                  color: null,
                },
                target: {
                  type: "none",
                  width: 4,
                  height: 4,
                  margin: -1,
                  offset: 0,
                  units: "strokeWidth",
                  color: null,
                },
              },
            },
          })
      )
    }
  },
  async mounted() {
    await this.getGraph()
  },
  methods: {
    async getGraph() {
      var search = {
        "source_label": "City",
        "target_label": "City",
        "source_city_type": "",
        "target_city_type": "",
        "edge_type": "",
        "states": ["ES", "DF", "MS", "PR", "GO", "MT", "AM", "RR", "AC", "RO", "PA", "AP", "TO", "PI", "MA", "SE", "PE", "AL", "PB", "RN"],
        //"states": ["AP", "PA", "INTL", "RR", "AM", "RO", "AC",  "MS", "SP", "RJ", "MG", "GO", "DF", "CE", "BA", "RS"],
      }
      const graph = await axios.post("http://localhost:8083/graph/search", search).then(response => {
        return response.data
      }).catch(err => {
        return err
      })

      this.graph.nodes = graph.nodes
      this.graph.edges = graph.edges
      this.graph.layouts.nodes = graph.nodes
    }
  }
}
</script>

[dash14]

@johnfercher Thank you for providing your code. I tried it, but unfortunately I could not reproduce the error on my end. I am trying the configuration shown in the URL below. If there is any information that is missing in reproducing the error, I would appreciate it if you could provide me with the information. https://codesandbox.io/p/devbox/laughing-feather-x3zkd5

[johnfercher]

Which version of Vue are you using? This is my entire project (https://github.com/johnfercher/medium-logistic/tree/ep18-shortest-path/frontend). I'm not a pro frontend developer, maybe I am doing something dumb...

I'm running it as npm run dev, maybe there is a limitation using the frontend in this way.

[johnfercher]

It worksed using npm run preview. If you want an example of your library working in video here it is: https://www.youtube.com/watch?v=XkW-Gh_kHUE

[dash14]

@johnfercher I could not see the video with an error, but I was able to reproduce it here by changing the version of vue to the one you are using and getting it to work!

Your project's package.json specifies the following:

    "vue": "^3.4.38"

I checked with the npm ls vue command and found that 3.5.0 was actually used.

$ npm ls vue
frontend@0.1.0 /Users/dash14/work/medium-logistic/frontend
├─┬ @vitejs/plugin-vue@5.1.3
│ └── vue@3.5.0 deduped
├─┬ v-network-graph@0.9.16
│ └── vue@3.5.0 deduped
├─┬ vue-router@4.4.5
│ └── vue@3.5.0 deduped
└─┬ vue@3.5.0
  └─┬ @vue/server-renderer@3.5.0
    └── vue@3.5.0 deduped

The problem seems to occur with a specific version of Vue; it did not occur with Vue 3.4.x, but with Vue 3.5.0 and 3.5.1. This has been fixed in 3.5.2, so please try 3.5.2 or later versions. https://github.com/vuejs/core/blob/main/CHANGELOG.md#352-2024-09-05

[johnfercher]

Thank you! I re-uploaded the video here: https://www.youtube.com/watch?v=XkW-Gh_kHUE

[dash14]

Thank you for sharing the video! Looks so great! I'm glad this library is helpful to you in your project :)