feat: Changes in preparation for being able to change comparisons

lib/comparisonView.js

@@ -7,6 +7,7 @@ import { DisplayElement } from './displayElement'
 import { DisplayAsMarkdown } from './displayAsMarkdown'
 import { CreateTable, buildRows } from './findPaths'
 import { DataSetChanger } from "./datasetChanger"
+import { ComparisonsChanger } from "./comparisonsChanger"
 import { pushToMongo } from "./pushToMongo.js"
 import { increasingList, maxMergeSortSteps, expectedNumMergeSortSteps } from "./utils.js"
 
@@ -51,6 +52,7 @@ export default function ComparisonView({ listOfElementsForView }) {
   let initialOrderedList = []
   let initialShowAdvancedOptions = false
   let initialShowComparisons = false
+  let initialShowLoadComparisons = false
   let initialShowChangeDataSet = false
   let initialNumSteps = 0;
   let initialMaxSteps = maxMergeSortSteps(listOfElementsForView.length)
@@ -73,6 +75,7 @@ export default function ComparisonView({ listOfElementsForView }) {
 
   let [showAdvancedOptions, changeShowAdvanceOptions] = useState(initialShowAdvancedOptions);
   let [showComparisons, changeShowComparisons] = useState(initialShowComparisons);
+  let [showLoadComparisons, changeShowLoadComparisons] = useState(initialShowLoadComparisons);
   let [showChangeDataSet, changeshowChangeDataSet] = useState(initialShowChangeDataSet);
   let [numSteps, changeNumSteps] = useState(initialNumSteps);
   let [maxSteps, changeMaxSteps] = useState(initialMaxSteps)
@@ -80,11 +83,11 @@ export default function ComparisonView({ listOfElementsForView }) {
   let [tableRows, setTableRows] = useState(initialTableRows)
 
   /* Convenience utils: restart + changeDataSet */
-  let restart = (posList) => {
+  let restart = (posList) => {//({posList, initialBinaryComparisons2, initialQuantitativeComparisons2}) => {
     setToComparePair([posList[posList.length - 2], posList[posList.length - 1]])
     setSliderValue(initialSliderValue)
-    setBinaryComparisons(initialBinaryComparisons)
-    setQuantitativeComparisons(initialQuantitativeComparisons)
+    setBinaryComparisons(initialBinaryComparisons2 || initialBinaryComparisons)
+    setQuantitativeComparisons(initialQuantitativeComparisons2 || initialQuantitativeComparisons)
     setIsListOrdered(initialIsListOdered)
     setOrderedList(initialOrderedList)
     changeNumSteps(initialNumSteps)
@@ -107,6 +110,28 @@ export default function ComparisonView({ listOfElementsForView }) {
     changeMaxSteps(maxMergeSortSteps(newListLength))
 
     restart(newPosList)
+    // restart({posList: newPosList})
+  }
+
+  let changeComparisons = (links, listOfElements) => {
+    let quantitativeComparisons2 = []
+    let binaryComparisons2 = []
+    for(let link of links){
+      let {source, target, distance, reasoning} = link
+      let searchByName = (name, candidate) => candidate.name == name
+      let testForSource = (candidate) => searchByName(source, candidate)
+      let testForTarget = (candidate) => searchByName(target, candidate)
+      let element1 = listOfElements.findIndex(testForSource)
+      let element2 = listOfElements.findIndex(testForTarget)
+      if(element1 == -1 || element2 == -1){
+        throw new Error("Comparisons include unknown elements, please retry")
+      }
+      quantitativeComparisons2.push([element1, element2, distance, reasoning])
+      binaryComparisons2.push([element1,element2])
+    }
+    // return ({quantitativeComparisons: quantitativeComparisons2, binaryComparisons: binaryComparisons2})
+    //restart({posList, initialBinaryComparisons2=initialBinaryComparisons, initialQuantitativeComparisons2=initialQuantitativeComparisons})
+    restart(posList)
   }
 
   // Manipulations
@@ -377,23 +402,32 @@ export default function ComparisonView({ listOfElementsForView }) {
 
         <div className={showAdvancedOptions ? "flex flex-wrap -mx-4 overflow-hidden" : "hidden"}>
           {/* Button: Restart */}
-          <div className="my-4 px-4 w-1/3 overflow-hidden">
+          <div className="my-4 px-4 w-1/4 overflow-hidden">
             <button
               className="bg-transparent 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"
               onClick={() => restart(posList)}>
+              {/* onClick={() => restart({posList})}> */}
               Restart
             </button>
           </div>
           {/* Button: Show comparisons */}
-          <div className="my-4 px-4 w-1/3 overflow-hidden">
+          <div className="my-4 px-4 w-1/4 overflow-hidden">
             <button
               className="bg-transparent 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"
               onClick={() => changeShowComparisons(!showComparisons)}>
               Show comparisons
             </button>
           </div>
+          {/* Button: Load comparisons */}
+          <div className="my-4 px-4 w-1/4 overflow-hidden">
+            <button
+              className="bg-transparent 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"
+              onClick={() => changeShowLoadComparisons(!showLoadComparisons)}>
+              Load comparisons
+            </button>
+          </div>
           {/* Button: Change dataset */}
-          <div className="my-4 px-4 w-1/3 overflow-hidden">
+          <div className="my-4 px-4 w-1/4 overflow-hidden">
             <button
               className="bg-transparent 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"
               onClick={() => changeshowChangeDataSet(!showChangeDataSet)}>
@@ -416,6 +450,11 @@ export default function ComparisonView({ listOfElementsForView }) {
             </DisplayAsMarkdown>
           </div>
         </div>
+        {/* Load comparisons section */}
+        <div className={showLoadComparisons ? "inline mt-5" : "hidden"}>
+          <ComparisonsChanger handleSubmit={changeComparisons} />
+          {/*<ComparisonsChanger handleSubmit={changeComparisons} />*/}
+        </div>
       </main>
 
     </div>

lib/comparisonsChanger.js

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+
+export function ComparisonsChanger({handleSubmit}){
+  let [value, setValue] = useState(`[
+    Blah, blah`)
+  const [displayingDoneMessage, setDisplayingDoneMessage] = useState(false)
+  const [displayingDoneMessageTimer, setDisplayingDoneMessageTimer] = useState(null)
+
+  let handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  let handleSubmitInner = (event) => {
+    clearTimeout(displayingDoneMessageTimer)
+    event.preventDefault();
+    //console.log(event)
+    console.log("value@handleSubmitInner@ComparisonsChanger")
+    //console.log(typeof(value));
+    console.log(value);
+    try{
+      let newData = JSON.parse(value)
+      //console.log(typeof(newData))
+      //console.log(newData)
+      handleSubmit(newData)
+      if(!newData.length || newData.length < 2){
+        throw Error("Not enough objects")
+      }
+      setDisplayingDoneMessage(true)
+      let timer = setTimeout(() => setDisplayingDoneMessage(false), 3000);
+      setDisplayingDoneMessageTimer(timer)
+    }catch(error){
+      setDisplayingDoneMessage(false)
+      //alert(error)
+      //console.log(error)
+      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 (
+    <form onSubmit={handleSubmitInner} className="inline">
+      <br/>
+      <br/>
+      <textarea 
+        value={value} 
+        onChange={handleChange} 
+        rows="10" cols="50"
+        className=""
+      />
+      <br/>
+      <button 
+        className="bg-transparent 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 p-10"
+        onClick={handleSubmitInner}>
+        Change dataset
+      </button>
+      &nbsp;
+      <button
+        className={displayingDoneMessage ? "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5 p-10" : "hidden"}
+      >
+        Done!
+      </button>
+    </form>
+  );
+}