From 529fd25b139af7ea0adb4a34ae424e35fb975a10 Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@protonmail.com>
Date: Mon, 20 Jun 2022 00:12:02 -0400
Subject: [PATCH] tweak: add experimental cytoscape onClick

---
 .../components/advancedOptions/comparisonsChanger.js  |  1 +
 packages/webpage-refactor/components/graph/graph.js   | 11 ++++++++++-
 packages/webpage-refactor/components/resultsTable.js  |  1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

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 (
     <div className="">
       <div className={visibility + "grid grid-cols-1 place-items-center "}>
diff --git a/packages/webpage-refactor/components/resultsTable.js b/packages/webpage-refactor/components/resultsTable.js
index b7bafec..6779a76 100644
--- a/packages/webpage-refactor/components/resultsTable.js
+++ b/packages/webpage-refactor/components/resultsTable.js
@@ -79,6 +79,7 @@ export function ResultsTable({ isListOrdered, listAfterMergeSort, links }) {
       setTableContents(tableContentsResult);
       setIsTableComputed(true);
     }
+    return () => console.log("cleanup");
   }, [isListOrdered, listAfterMergeSort, links]);
 
   return !(isListOrdered && isTableComputed) ? (