Fixed some bugs, added advanced options

lib/displayAsMarkdown.js

@@ -16,12 +16,12 @@ if (!String.prototype.replaceAll) {
 	};
 }
 
-export function DisplayAsMarkdown({markdowntext}){
+export function DisplayAsMarkdown({markdowntext, className}){
     //console.log(markdowntext)
     markdowntext = markdowntext.replaceAll("\n", "\n\n")
    return( <ReactMarkdown
         plugins={[gfm]}
         children={markdowntext}
-        className="ml-30"
+        className={className}
     />)
 }

lib/findPaths.js

@@ -43,6 +43,8 @@ function findPaths({sourceElementId, targetElementId, links, nodes}){
 
 function findDistance({sourceElementId, targetElementId, nodes, links}){
     let paths = findPaths({sourceElementId, targetElementId, nodes, links})
+    console.log(targetElementId)
+    console.log(paths)
     let weights = []
     for(let path of paths){
         let currentSource = sourceElementId
@@ -70,20 +72,22 @@ function findDistancesForAllElements({nodes, links}){
     let referenceElements = nodes.filter(x => x.isReferenceValue)
     let midpoint = Math.round(nodes.length/2)
     let referenceElement = referenceElements.length > 0 ? referenceElements[0] : nodes[midpoint]
-    
+    // console.log(nodes)
-    let distances = nodes.map(element =>
+    let distances = nodes.map(node =>
-        element.isReferenceValue ? [1] : findDistance({sourceElementId: referenceElement.id, targetElementId: element.id, nodes, links})
+        node.isReferenceValue || (node.id == referenceElement.id) ? [1] : findDistance({sourceElementId: referenceElement.id, targetElementId: node.id, nodes, links})
     )
     return distances
 }
 
-export function CreateTableWithDistances({isListOrdered, nodes, links}){
+export function CreateTableWithDistances({isListOrdered, orderedList, listOfElements, links}){
-    if(!isListOrdered){ 
+    if(!isListOrdered || orderedList.length < listOfElements.length){ 
         return (<div>{""}</div>)
     } else {
+        let nodes = orderedList.map(i => listOfElements[i])
         let distances = findDistancesForAllElements({nodes, links})
         let rows = nodes.map((element, i) => ({id: element.id, name: element.name, distances: distances[i]}))
-
+        console.log("rows@CreateTableWithDistances")
+        console.log(rows)
         return(
             <div>
                 <table className="">

lib/labeledgraph.js

@@ -1,17 +1,41 @@
 import React, { useState, useEffect } from "react";
 import * as d3 from 'd3';
 
-function getlength(number) {
+let getlength = (number) => number.toString().length;
-    return number.toString().length;
+export function removeOldSvg(){
+    d3.select("#graph").select("svg").remove();
 }
 
 function drawGraphInner({nodes, links}){
     
-    // Build the d3 graph
+    // List of node ids for convenience
+    var nodeids = nodes.map(node => node.id)
+    var positionById = {}
+    nodeids.forEach((nodeid, i) => positionById[nodeid]=i)
+    console.log("NodeIds/positionById")
+    console.log(nodeids)
+    console.log(positionById)
+    
+    // Calculate the dimensions
     let margin = {top: 0, right: 30, bottom: 20, left: 30};
     let width = 900 - margin.left - margin.right;
-    let height = 400 - margin.top - margin.bottom;
+    var x = d3.scalePoint()
+        .range([0, width])
+        .domain(nodeids)
 
+    let heights = links.map(link => {
+        let start = x(positionById[link.source])   
+        let end = x(positionById[link.target])
+        return Math.abs(start-end)/2+70 // Magic constant.
+    })
+    console.log(heights)
+    let maxheight = Math.max(...heights)
+    let height = maxheight - margin.top - margin.bottom;
+    console.log(`height: ${height}`)
+
+    // Build the d3 graph
+
+    removeOldSvg()
     var svg = d3.select("#graph")
         .append("svg")
         .attr("width", width + margin.left + margin.right)
@@ -19,15 +43,8 @@ function drawGraphInner({nodes, links}){
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     
-    // List of node ids
-    var nodeids = nodes.map(function(d){return d.id})
-    var positionById = {}
-    nodeids.forEach((nodeid, i) => positionById[nodeid]=i)
-    
     // A linear scale to position the nodes on the X axis
-    var x = d3.scalePoint()
+
-        .range([0, width])
-        .domain(nodeids)
     
     // Add the circle for the nodes
     svg
@@ -58,9 +75,9 @@ function drawGraphInner({nodes, links}){
         .enter()
         .append('path')
         .attr('d', function (d) {
-            let start = x(positionById[d.source])    
+            let start = x(d.source)    
                 // X position of start node on the X axis
-            let end = x(positionById[d.target])      
+            let end = x(d.target)      
                 // X position of end node
             return ['M', 
                 start, 
@@ -85,9 +102,9 @@ function drawGraphInner({nodes, links}){
         .enter()
         .append("text")
         .attr("x", function(d){ 
-            let start = x(positionById[d.source])    
+            let start = x(d.source)    
                 // X position of start node on the X axis
-            let end = x(positionById[d.target])      
+            let end = x(d.target)      
                 // X position of end node
             return start + (end-start)/2 -4*getlength(d.distance)
         })
@@ -100,18 +117,13 @@ function drawGraphInner({nodes, links}){
         })
         .text(function(d){ return(`${d.distance}`)})
         .style("text-anchor", "top")
-
-    
-
-
 }
 
-export function DrawGraph({isListOrdered, nodes, links}) {
+export function DrawGraph({isListOrdered, orderedList, listOfElements, links}) {
-    
     if(isListOrdered){
+        let nodes = orderedList.map(i => listOfElements[i])
         drawGraphInner({ nodes, links});
     }
-    
     return (
         <div>
             <div id="graph">

lib/slider.js

@@ -123,3 +123,22 @@ export function SliderElement({ onChange, value, displayFunction }) {
     </Slider>
   )
 }
+
+export function SubmitSliderButton({posList, binaryComparisons, sliderValue, toComparePair, nextStepSlider}){
+  // This element didn't necessarily have to exist, but it made it easier for debugging purposes
+  let onClick = (event) => {
+    //event.preventDefault();
+    let obj = {posList, binaryComparisons, sliderValue, element1: toComparePair[1], element2: toComparePair[0]}
+    //
+    console.log("input@SubmitSliderButton")
+    console.log(obj)
+    nextStepSlider(obj)
+  }
+
+  return( <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={onClick}>
+      Submit
+  </button>)
+
+}

lib/textAreaForJson.js

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+
+export function TextAreaForJson({handleSubmit}){
+  let [value, setValue] = useState(`[
+    {
+      "name": "Some element. The name field is necessary",
+      "url": "http://www.example.com",
+      "somethirdfield": "a"
+    },
+    {
+      "name": "Another element",
+      "url": "http://www.example1.com",
+      "somethirdfield": "b"
+    },
+    {
+      "name": "A third element",
+      "url": "http://www.example2.com",
+      "isReferenceValue": true,
+      "somethirdfield": "c"
+    }
+  ]`)
+  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@TextAreaForJson")
+    //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:
+[
+  {
+    "name": "Some element. The name field is necessary",
+    "url": "http://www.example.com",
+    "somethirdfield": "a"
+  },
+  {
+    "name": "Another element",
+    "url": "http://www.example1.com",
+    "somethirdfield": "b"
+  },
+  {
+    "name": "Another element",
+    "url": "http://www.example2.com",
+    "isReferenceValue": true,
+    "somethirdfield": "c"
+  }
+]
+
+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 ? "hidden" : ""} bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5 p-10`}
+      >
+        Done!
+      </button>
+    </form>
+  );
+}

pages/index.js

@@ -2,11 +2,12 @@ import Head from 'next/head'
 import React, { useState } from "react";
 import fs from 'fs';
 import path from 'path';
-import {DrawGraph} from '../lib/labeledgraph';
+import {DrawGraph, removeOldSvg} from '../lib/labeledgraph';
-import { SliderElement } from "../lib/slider";
+import { SliderElement, SubmitSliderButton } from "../lib/slider";
 import {DisplayElement} from '../lib/displayElement'
 import {DisplayAsMarkdown} from '../lib/displayAsMarkdown'
 import {CreateTableWithDistances} from '../lib/findPaths'
+import {TextAreaForJson} from "../lib/textAreaForJson"
 
 // Utilities
 
@@ -45,7 +46,7 @@ let displayFunctionSlider = (value) => {
 
 };
 
-let nicelyFormatLinks = (quantitativeComparisons , list) => quantitativeComparisons.map(([element1, element2, distance]) => ({source: list.indexOf(element1), target: list.indexOf(element2), distance: distance}))
+let nicelyFormatLinks = (quantitativeComparisons , listOfElements) => quantitativeComparisons.map(([element1, element2, distance]) => ({source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance}))
 
 /* React components */
 // fs can only be used here. 
@@ -58,25 +59,66 @@ export async function getStaticProps() {
   //console.log("metaforecasts", metaforecasts)
   return {
     props: {
-      listOfPosts,
+      listOfElementsDefault: listOfPosts,
     },
   };
 }
 
 // Main react component
-export default function Home({listOfPosts}) {
+export default function Home({listOfElementsDefault}) {
   // State
-  let list = increasingList(listOfPosts.length) // [0,1,2,3,4]
+  let initialListOfElements = listOfElementsDefault.map((element, i) => ({...element, id: i}))
-  listOfPosts = listOfPosts.map((element, i) => ({...element, id: i}))
+  let initialPosList = increasingList(listOfElementsDefault.length) // [0,1,2,3,4]
+  //let listOfElements = listOfElementsDefault.map((element, i) => ({...element, id: i}))
+  //let list = increasingList(listOfElementsDefault.length) // [0,1,2,3,4]
 
-  const [toComparePair, setToComparePair] = useState([list[list.length-2], list[list.length-1]])
+  //let initialComparePair = [list[list.length-2], list[list.length-1]]
-  const [sliderValue, setSliderValue] = useState(0)
+  let initialComparePair = [initialPosList[initialPosList.length-2], initialPosList[initialPosList  .length-1]]
+  let initialSliderValue = 0
+  let initialBinaryComparisons = []
+  let initialQuantitativeComparisons = []
+  let initialIsListOdered = false
+  let initialOrderedList = []
+  let initialShowAdvancedOptions = false
+  let initialShowComparisons = false
+  let initialShowChangeDataSet = false
 
-  const [binaryComparisons, setBinaryComparisons] = useState([])
+  const [listOfElements, setListOfElements] = useState(initialListOfElements)
-  const [quantitativeComparisons, setQuantitativeComparisons] = useState([]) // More expressive, but more laborious to search through. For the ordering step, I only manipulate the binaryComparisons.
+  const [posList, setPosList] = useState(initialPosList)
+  //const posList = initialPosList
+  // let listOfElements = initialListOfElements
 
-  const [isListOrdered, setIsListOrdered]  = useState(false)
+  const [toComparePair, setToComparePair] = useState(initialComparePair)
-  const [orderedList, setOrderedList] = useState([])
+  const [sliderValue, setSliderValue] = useState(initialSliderValue)
+  const [binaryComparisons, setBinaryComparisons] = useState(initialBinaryComparisons)
+  const [quantitativeComparisons, setQuantitativeComparisons] = useState(initialQuantitativeComparisons) // More expressive, but more laborious to search through. For the ordering step, I only manipulate the binaryComparisons.
+
+  const [isListOrdered, setIsListOrdered]  = useState(initialIsListOdered)
+  const [orderedList, setOrderedList] = useState(initialOrderedList)
+
+  let [showAdvancedOptions, changeShowAdvanceOptions] = useState(initialShowAdvancedOptions);
+  let [showComparisons, changeShowComparisons] = useState(initialShowComparisons);
+  let [showChangeDataSet, changeshowChangeDataSet] = useState(initialShowChangeDataSet);
+
+  let restart = (posList) => {
+    setToComparePair([posList[posList.length-2], posList[posList.length-1]])
+    setSliderValue(initialSliderValue)
+    setBinaryComparisons(initialBinaryComparisons)
+    setQuantitativeComparisons(initialQuantitativeComparisons)
+    setIsListOrdered(initialIsListOdered)
+    setOrderedList(initialOrderedList)
+    removeOldSvg()
+  }
+  
+  let changeDataSet = (listOfElementsNew) => {
+    listOfElementsNew = 
+    listOfElementsNew.map((element, i) => ({...element, id: i}))
+    let newPosList = increasingList(listOfElementsNew.length)
+    setListOfElements(listOfElementsNew)
+    setPosList(increasingList(listOfElementsNew.length))
+    setToComparePair([newPosList[newPosList.length-2], newPosList[newPosList.length-1]])
+    restart(newPosList)
+  }
 
   // Manipulations
   let compareTwoElements = (newBinaryComparisons, element1, element2) => {
@@ -113,23 +155,23 @@ export default function Home({listOfPosts}) {
     return [...sortedArr, ...left, ...right]; // if they don't have the same size, the remaining ones will be greater than the ones before
   }
   
-  function mergeSort(arr, newBinaryComparisons) {
+  function mergeSort({array, comparisons}) {
-    if(arr ==  "No comparison found; unable to proceed"){
+    if(array ==  "No comparison found; unable to proceed"){
       return  "No comparison found; unable to proceed"
     }
-    const half = arr.length / 2;
+    const half = array.length / 2;
   
     // the base case is array length <=1
-    if (arr.length <= 1) {
+    if (array.length <= 1) {
-      return arr;
+      return array;
     }
   
-    const left = arr.splice(0, half); // the first half of the array
+    const left = array.slice(0, half); // the first half of the array
-    const right = arr;
+    const right = array.slice(half, array.length) // Note that splice is destructive. 
-    let orderedFirstHalf = mergeSort(left, newBinaryComparisons)
+    let orderedFirstHalf = mergeSort({array:left, comparisons})
-    let orderedSecondHalf = mergeSort(right, newBinaryComparisons)
+    let orderedSecondHalf = mergeSort({array:right, comparisons})
     if(orderedFirstHalf != "No comparison found; unable to proceed" && orderedSecondHalf != "No comparison found; unable to proceed"){
-      let result = merge(newBinaryComparisons, orderedFirstHalf, orderedSecondHalf);
+      let result = merge(comparisons, orderedFirstHalf, orderedSecondHalf);
       return result
     }else{
       return  "No comparison found; unable to proceed"
@@ -137,7 +179,7 @@ export default function Home({listOfPosts}) {
 
   }
 
-  let nextStepSimple = (binaryComparisons, element1, element2) => {
+  let nextStepSimple = (posList, binaryComparisons, element1, element2) => {
     //console.log("Binary comparisons: ")
     //console.log(JSON.stringify(binaryComparisons, null, 4));
 
@@ -147,22 +189,28 @@ export default function Home({listOfPosts}) {
     //console.log(JSON.stringify(newBinaryComparisons, null, 4));
     setBinaryComparisons(newBinaryComparisons)  
     
-    let result = mergeSort(list, newBinaryComparisons)
+    let result = mergeSort({array: posList, comparisons: newBinaryComparisons})
     //console.log(result)
     if(result !=  "No comparison found; unable to proceed" && checkIfListIsOrdered(result, newBinaryComparisons)){
-      //console.log(result)
+      // console.log(`isListOrdered: ${isListOrdered}`)
+      console.log("poslist@nextStepSimple")
+      console.log(posList)
+      console.log("result@nextStepSimple")
+      console.log(result)
+
       setIsListOrdered(true)
       setOrderedList(result)
     }
   }
 
-  let nextStepSlider = (binaryComparisons, sliderValue, element1, element2) => {
+  let nextStepSlider = ({posList, binaryComparisons, sliderValue, element1, element2}) => {
     if(sliderValue < 0){
       sliderValue = -sliderValue;
       [element1,element2] = [element2,element1]
     }
-
+    console.log(`posList@nextStepSlider:`)
-    nextStepSimple(binaryComparisons, element1, element2)
+    console.log(posList)
+    nextStepSimple(posList, binaryComparisons, element1, element2)
 
     let newQuantitativeComparison = [element1, element2, simplifySliderValue(sliderValue)]
     let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
@@ -173,25 +221,27 @@ export default function Home({listOfPosts}) {
 
   // Html
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen py-2 mt-10">
+    <div className="flex flex-col items-center justify-center min-h-screen py-2">
+      <div className="mt-20">
         <Head >
           <title>Utility Function Extractor</title>
           <link rel="icon" href="/favicon.ico" />
         </Head>
+      </div>
 
-      <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
+      <main className="flex flex-col items-center w-full flex-1 px-20 text-center">
         <h1 className="text-6xl font-bold">
          Utility Function Extractor
         </h1>
 
         <div className = {`${isListOrdered ? "hidden" : ""}`}>
-          <div className="flex flex-wrap items-center max-w-4xl mt-6 sm:w-full mt-20">
+          <div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10">
               <div 
-                className="flex m-auto border-gray-300 border-4 h-72 w-72"
+                className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"
                 //onClick={() => nextStep(binaryComparisons, toComparePair[0], toComparePair[1])}
               >
                 <div className="block m-auto text-center">  
-                  <DisplayElement element={listOfPosts[toComparePair[0]]}>
+                  <DisplayElement element={listOfElements[toComparePair[0]]}>
                   </DisplayElement>
                 </div>
               </div>
@@ -200,7 +250,7 @@ export default function Home({listOfPosts}) {
                 //onClick={() => nextStep(binaryComparisons, toComparePair[1], toComparePair[0])}
               >
                 <div className="block m-auto text-center">  
-                  <DisplayElement element={listOfPosts[toComparePair[1]]}>
+                  <DisplayElement element={listOfElements[toComparePair[1]]}>
                   </DisplayElement>
                 </div>
               </div>
@@ -213,38 +263,88 @@ export default function Home({listOfPosts}) {
                   displayFunction={displayFunctionSlider}
                 />
           </div>
-          <button 
+          <SubmitSliderButton
-            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"
+            posList={posList}
-            onClick={() => nextStepSlider(binaryComparisons, sliderValue, toComparePair[1], toComparePair[0])}>
+            binaryComparisons={binaryComparisons}
-              Submit
+            sliderValue={sliderValue}
-          </button>
+            toComparePair={toComparePair}
+            nextStepSlider={nextStepSlider}
+          />
+          
         </div>
         
         <DrawGraph 
           isListOrdered={isListOrdered}
-          nodes={orderedList.map(i => listOfPosts[i])}
+          orderedList={orderedList}
+          listOfElements={listOfElements}
           links={buildLinks(quantitativeComparisons)}>
         </DrawGraph>
         <div className={`inline items-center text-center mt-10 ${isListOrdered? "": "hidden" }`}>
             <CreateTableWithDistances
               isListOrdered={isListOrdered}
-              nodes={orderedList.map(i => listOfPosts[i])}
+              orderedList={orderedList}
+              listOfElements={listOfElements}
               links={buildLinks(quantitativeComparisons)}
             >
             </CreateTableWithDistances>
         </div>
+        <div className="w-2/12 flex justify-center mt-10">
+          <button
+            className="text-gray-500 text-sm"
+            onClick={() => changeShowAdvanceOptions(!showAdvancedOptions)}
+          >
+            Advanced options ▼
+          </button>
+        </div>
 
-      </main>
+        <div className={`flex flex-wrap -mx-4 overflow-hidden ${showAdvancedOptions? "": "hidden"}`}>
+          <div className="my-4 px-4 w-1/3 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)}>
+                Restart
+            </button>
+          </div>
+          <div className="my-4 px-4 w-1/3 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>
+          <div className="my-4 px-4 w-1/3 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)}>
+                Use your own data
+            </button>
+          </div>
+        </div>
+        
+        <div className={`inline mt-5 ${showChangeDataSet ? "": "hidden" }`}>
+          <TextAreaForJson handleSubmit={changeDataSet}/>
+        </div>
+
+        <div className={`inline mt-5 ${showComparisons? "": "hidden" }`}>
+          {/*
+            <DisplayAsMarkdown markdowntext={"## Ordered list\n\n" + JSON.stringify(orderedList.map(i => listOfElements[i]), null, 4)}></DisplayAsMarkdown>
+          */}
+          <h2>Comparisons</h2>
+          <div className="text-left">
+            <DisplayAsMarkdown 
+              markdowntext={JSON.stringify(nicelyFormatLinks(quantitativeComparisons, listOfElements), null, 4)}
+              className={""}>
+            </DisplayAsMarkdown>
+          </div>
 
-      <div className={`inline text-left w-full flex-1 px-20 ${isListOrdered? "": "hidden" }`}>
-          <DisplayAsMarkdown markdowntext={"## Ordered list\n\n" + JSON.stringify(orderedList.map(i => listOfPosts[i]), null, 4)}></DisplayAsMarkdown>
-          <DisplayAsMarkdown markdowntext={"## Distances\n\n" + JSON.stringify(nicelyFormatLinks(quantitativeComparisons, list), null, 4)}></DisplayAsMarkdown>
           {/*
                     <p>{`Binary comparisons: ${JSON.stringify(binaryComparisons, null, 4)}`}</p> 
           <p>{`Quantitative comparisons: ${JSON.stringify(quantitativeComparisons, null, 4)}`}</p> 
 
           */}
         </div>
+      </main>
+
     </div>
   )
 }