diff options
Diffstat (limited to 'react-frontend/src/components/Visualization.js')
-rw-r--r-- | react-frontend/src/components/Visualization.js | 16 |
1 files changed, 10 insertions, 6 deletions
diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js index d374738..96b2027 100644 --- a/react-frontend/src/components/Visualization.js +++ b/react-frontend/src/components/Visualization.js @@ -1,6 +1,5 @@ // JS module imports -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import uuid from 'react-uuid'; +import { useMemo, useState } from "react"; import Graph from 'vis-react'; // CSS imports @@ -13,6 +12,8 @@ import '../css/Canvas.css'; * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured. */ function Visualization(props) { + const [key, setKey] = useState(0); + const [graphState, setGraphState] = useState({ nodes: [], edges: [] @@ -27,8 +28,7 @@ function Visualization(props) { const events = { selectNode: event => { - console.log(event); - //props.setSelectedId(event.nodes[0]); + props.setSelectedId(event.nodes[0]) } } @@ -95,12 +95,16 @@ function Visualization(props) { } // Hooks to update graph state when data changes - useMemo(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [props.data]); + useMemo(() => { + setKey(key => key + 1); + setGraphState({nodes: getNodes(), edges: getEdges()}) + }, [JSON.stringify(props.data)]); + return ( <div className="Map-canvas"> <Graph - key={uuid()} + key={key} graph={graphState} options={options} events={events}> |