tweak: add experimental cytoscape onClick

This commit is contained in:
NunoSempere 2022-06-20 00:12:02 -04:00
parent 079b32f4e7
commit 529fd25b13
3 changed files with 12 additions and 1 deletions

View File

@ -65,6 +65,7 @@ export function ComparisonsChanger({
useEffect(async () => {
setValue(JSON.stringify(links, null, 4));
return () => console.log("cleanup");
}, [links]);
return (

View File

@ -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 "}>

View File

@ -79,6 +79,7 @@ export function ResultsTable({ isListOrdered, listAfterMergeSort, links }) {
setTableContents(tableContentsResult);
setIsTableComputed(true);
}
return () => console.log("cleanup");
}, [isListOrdered, listAfterMergeSort, links]);
return !(isListOrdered && isTableComputed) ? (