visjs / vis-network-react Goto Github PK

First, thank you for the project!

Could you please add an explicit LICENSE file to the repo so that it's clear under what terms the content is provided, and under what terms user contributions are licensed?..

I want to use this code in my project invana-studio, but this code is still using vis-network==8.x.x as requirements and i want to be able to update and use this code in my project.

I'm getting this error and I'm not sure why

error:
Uncaught TypeError: Cannot read properties of null (reading 'hasChildNodes')
at t.value (Canvas.js:227:1)
at new XC (Network.js:138:1)
at spawnNodes (Graph.js:44:1)
at Graph (Graph.js:60:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

my code:
import React, { useEffect } from 'react';
import {useDispatch, useSelector} from 'react-redux'
import { Network } from "vis-network";
import {DataSet} from "vis-data";
// import data from "../../data/vis.json";

`function Graph () {
const dispatch = useDispatch();

const visData = useSelector((state) => {
    return state.visData
})

const spawnNodes = () => {   
    if(visData){
        // console.log(data)
        let nodes = []

        nodes = new DataSet(visData["nodes"])

        let edges = new DataSet(visData["edges"])

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
            nodes: nodes,
            edges: edges,
        };
        var options = {
            nodes: {
                shape: "dot",
                size: 30,
                font: {
                size: 32,
                color: "#ffffff",
                },
                borderWidth: 2,
            },
            edges: {
                width: 2,
                arrows: "to",
            },
            physics: false
        };
        var network = new Network(container, data, options); <-- highlighted error
        dispatch({type: "INIT_NETWORK", payload: network})
        dispatch({type: "NODES_DATASET", payload: nodes})
        dispatch({type: "INIT_NODE_OPTIONS", payload: network.body.nodes})

        network.on("click", (prop) => {
            let ids = prop.nodes;
            let clickedNodes = nodes.get(ids)
            // console.log('clicked nodes:', clickedNodes[0]);
            dispatch({type: "SELECT_NODE", payload: clickedNodes[0]})
        })
    }
    
}

// useEffect(() => {
//     spawnNodes(data)
// })

return (
    <div id="mynetwork"> <-- highlighted error
        {spawnNodes()}
    </div>
);

}
export default Graph;
`

When I hover over Network, it says (alias) new Network(container: HTMLElement, data: Data, options?: Options | undefined): Network
import Network

The function getConnectedNodes with idEdge not return nodes referenced to the edge.
Use getConnectedNodes with callback to the "getNetwork" in instance VisNetworkReactComponent.

When a node was selected, I want to set different color for the 'from' and 'to' edges of the selected node, so I added a 'chosen' property to all the edges, and I don't know how to get the selected node in this function:
chosen: {
edge: function (values, id, selected, hovering) {
// how to get the selected node?
}
}

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency lodash to v4.17.21
• Update dependency eslint to v7.32.0
• Update dependency moment to v2.30.1
• Update dependency prop-types to v15.8.1
• Update testing-library monorepo (@testing-library/jest-dom, @testing-library/user-event)
• Update dependency eslint to v9
• Update dependency eslint-config-airbnb to v19
• Update dependency react-scripts to v5
• Update dependency uuid to v10
• Update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react, @testing-library/user-event)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency eslint-config-airbnb to v18.2.1
• Update dependency react-scripts to v3.4.4
• Update dependency uuid to v8.3.2

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update babel monorepo (@babel/cli, @babel/core, @babel/preset-env, @babel/preset-react)
• Update dependency eslint-plugin-import to v2.29.1
• Update dependency eslint-plugin-jsx-a11y to v6.9.0
• Update dependency eslint-plugin-react to v7.35.0
• Update dependency vis-data to v7.1.9
• Update dependency vis-network to v8.5.6
• Update react monorepo (eslint-plugin-react-hooks, react, react-dom)
• Update dependency vis-network to v9
• Update dependency vis-util to v5
• Update react monorepo to v18 (major) (react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

How to draw on the canvas using normal HTML5 canvas functions
https://visjs.github.io/vis-network/examples/network/events/renderEvents.html
beforeDrawing & afterDrawing