import React, { useState, useEffect } from "react"; // import JSONInput from "react-json-editor-ajrm/index"; // import locale from "react-json-editor-ajrm/locale/en"; const checkLinksAreOk = (links, listOfElements) => { let linkSourceNames = links.map((link) => link.source.name); let linkTargetNames = links.map((link) => link.target.name); let allLinkNames = [...linkSourceNames, ...linkTargetNames]; let uniqueNames = [...new Set(allLinkNames)]; let listOfElementNames = listOfElements.map((element) => element.name); let anyInvalidNames = uniqueNames.indexOf( (name) => !listOfElementNames.includes(name) ); let anyElementsWithoutDistances = links.indexOf( (link) => !link.distance && link.distance != 0 ); if (anyInvalidNames == -1 && anyElementsWithoutDistances == -1) { return true; } else { return false; } }; export function ComparisonsChanger({ setLinks, listOfElements, show, moveToNextStep, links, }) { let [value, setValue] = useState(JSON.stringify(links, null, 4)); const [displayingDoneMessage, setDisplayingDoneMessage] = useState(false); const [displayingDoneMessageTimer, setDisplayingDoneMessageTimer] = useState(null); let handleTextChange = (event) => { setValue(event.target.value); }; let handleSubmitInner = (event) => { clearTimeout(displayingDoneMessageTimer); event.preventDefault(); try { let newData = JSON.parse(value); if (checkLinksAreOk(newData, listOfElements)) { setLinks(newData); moveToNextStep({ listOfElements, whileChangingStuff: true, newLinksFromChangingStuff: newData, }); setDisplayingDoneMessage(true); let timer = setTimeout(() => setDisplayingDoneMessage(false), 3000); setDisplayingDoneMessageTimer(timer); } else { throw Error("Links are not ok"); } } catch (error) { setDisplayingDoneMessage(false); alert(error); } }; useEffect(async () => { setValue(JSON.stringify(links, null, 4)); // console.log(JSON.stringify(config, null, 10)); }, [links]); return (

Load comparisons

These can be edited, which will override your current comparisons.