diff --git a/packages/webpage-refactor/components/advancedOptions.js b/packages/webpage-refactor/components/advancedOptions.js new file mode 100644 index 0000000..9bb66be --- /dev/null +++ b/packages/webpage-refactor/components/advancedOptions.js @@ -0,0 +1,81 @@ +import React, { useState } from "react"; +import { ShowComparisons } from "./advancedOptions/showComparisons.js"; +import { ComparisonsChanger } from "./advancedOptions/comparisonsChanger.js"; +import { DataSetChanger } from "./advancedOptions/datasetChanger.js"; + +const effectButtonStyle = + "bg-transparent m-2 hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5"; + +export function AdvancedOptions({ + links, + setLinks, + listOfElements, + moveToNextStep, + onChangeOfDataset, +}) { + const [showAdvancedOptions, changeShowAdvanceOptions] = useState(false); + + const [showComparisons, setShowComparisons] = useState(false); + const toggleShowComparisons = () => setShowComparisons(!showComparisons); + + const [showLoadComparisons, setShowLoadComparisons] = useState(false); + const toggleShowLoadComparisons = () => + setShowLoadComparisons(!showLoadComparisons); + + const [showChangeDataset, setShowChangeDataset] = useState(false); + const toggleShowChangeDataset = () => + setShowChangeDataset(!showChangeDataset); + + const buttonNames = [ + "Show Comparisons", + "Load comparisons", + "Use your own data", + ]; + const buttonToggles = [ + toggleShowComparisons, + toggleShowLoadComparisons, + toggleShowChangeDataset, + ]; + + return ( +
+
+ {/* Show advanced options*/} + +
+ {/* Toggle buttons */} +
+ {buttonNames.map((buttonName, i) => { + return ( + + ); + })} + + {/* Element: Show comparisons */} + + + {/* Element: Change comparisons */} + + +
{" "} +
+ ); +} diff --git a/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js b/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js new file mode 100644 index 0000000..3559ea4 --- /dev/null +++ b/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js @@ -0,0 +1,122 @@ +import React, { useState } from "react"; + +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, +}) { + let [value, setValue] = useState(``); + 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); + // setLinks + // newData + 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); + let substituteText = `Error: ${error.message} + +Try something like: +[ + { + "source": "x", + "target": "y", + "distance": 99999.99999999999, + "reasoning": "blah blah" + }, + { + "source": "y", + "target": "z", + "distance": 1, + "reasoning": "blah blah" + }, + { + "source": "x", + "target": "z", + "distance": 10, + "reasoning": "blah blah" + } +] + +Your old input was: ${value}`; + setValue(substituteText); + } + }; + return ( +
+

Load comparisons

+

These will override your current comparisons.

+
+