diff --git a/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js b/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js index ef8f780..46958e5 100644 --- a/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js +++ b/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js @@ -65,6 +65,7 @@ export function ComparisonsChanger({ useEffect(async () => { setValue(JSON.stringify(links, null, 4)); + return () => console.log("cleanup"); }, [links]); return ( diff --git a/packages/webpage-refactor/components/graph/graph.js b/packages/webpage-refactor/components/graph/graph.js index fcf3889..345d480 100644 --- a/packages/webpage-refactor/components/graph/graph.js +++ b/packages/webpage-refactor/components/graph/graph.js @@ -67,6 +67,7 @@ export function Graph({ }) { const containerRef = useRef("hello-world"); const [visibility, setVisibility] = useState(""); /// useState("invisible"); + const [cs, setCs] = useState(null); /// useState("invisible"); const callEffect = async ({ listOfElements, @@ -184,7 +185,8 @@ export function Graph({ userZoomingEnabled: false, userPanningEnabled: false, }; - cytoscape(config); + let newCs = cytoscape(config); + setCs(newCs); // setTimeout(() => setVisibility(""), 700); // necessary for themes like spread, which have // a confusing animation at the beginning @@ -196,8 +198,15 @@ export function Graph({ isListOrdered, listAfterMergeSort, }); + return () => console.log("cleanup"); }, [listOfElements, links, isListOrdered, listAfterMergeSort]); + useEffect(async () => { + cs.edges().on("click", (event) => { + let edge = event.target; + alert(JSON.stringify(edge.json())); + }); + }); return (