feat: Allow for squiggle/guesstimate type inputs

lib/comparisonView.js

@@ -2,7 +2,7 @@
 import Head from "next/head";
 import React, { useState } from "react";
 import { DrawGraph, removeOldSvg } from "./labeledGraph";
-import { InputBox } from "./inputBox";
+import { SubmitButton } from "./submitButton";
 import { DisplayElement } from "./displayElement";
 import { DisplayAsMarkdown } from "./displayAsMarkdown";
 import { CreateTable, buildRows } from "./findPaths";
@@ -48,12 +48,15 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
 };
 
 let nicelyFormatLinks = (quantitativeComparisons, listOfElements) =>
-  quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({
-    source: listOfElements[element1].name,
-    target: listOfElements[element2].name,
-    distance: distance,
-    reasoning: reasoning,
-  }));
+  quantitativeComparisons.map(
+    ([element1, element2, distance, reasoning, squiggleString]) => ({
+      source: listOfElements[element1].name,
+      target: listOfElements[element2].name,
+      distance: distance,
+      reasoning: reasoning,
+      squiggleString: squiggleString,
+    })
+  );
 
 // Main react component
 export default function ComparisonView({ listOfElementsForView }) {
@@ -303,6 +306,7 @@ export default function ComparisonView({ listOfElementsForView }) {
     reasoning,
     element1,
     element2,
+    squiggleString,
   }) => {
     if (!dontPushSubmitButtonAnyMore) {
       if (inputValue < 1 && inputValue > 0) {
@@ -323,6 +327,7 @@ export default function ComparisonView({ listOfElementsForView }) {
         element2,
         inputValue,
         reasoning,
+        squiggleString || inputValue,
       ];
       let newQuantitativeComparisons = [
         ...quantitativeComparisons,
@@ -396,7 +401,7 @@ export default function ComparisonView({ listOfElementsForView }) {
               </div>
             </div>
 
-            {/* Comparison actuator (text, previously input) */}
+            {/* Comparison actuator (text, previously number) */}
             <div className="flex m-auto w-72">
               <div className="block m-auto text-center">
                 <br />
@@ -404,7 +409,7 @@ export default function ComparisonView({ listOfElementsForView }) {
                   {`... is `}
                   <br />
                   <input
-                    type="number"
+                    type="text"
                     className="text-center text-blueGray-600 bg-white rounded text-lg border-0 shadow outline-none focus:outline-none focus:ring w-8/12 h-10 m-2"
                     value={inputValue}
                     onChange={(event) => {
@@ -418,7 +423,7 @@ export default function ComparisonView({ listOfElementsForView }) {
                 </label>
                 <br />
 
-                <InputBox
+                <SubmitButton
                   posList={posList}
                   binaryComparisons={binaryComparisons}
                   inputValue={inputValue}

lib/squiggleWrapper.js

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+export async function squiggleWrapper(input) {
+  let response = await axios.post("https://server.loki.red/squiggle", {
+    model: `mean(${input})`,
+  });
+  if (response.status == 200) {
+    try {
+      console.log(response.data);
+      if (!!response.data && !!response.data.value) {
+        // console.log(response.data.value);
+        let result = response.data.value.hd.VAL;
+        console.log(result);
+        return result;
+      }
+    } catch (error) {
+      console.log(error);
+      return null;
+    }
+  }
+  return null;
+}
+// squiggle("1 to 4");

lib/submitButton.js

@@ -1,7 +1,8 @@
 /* Imports */
 import React, { useState } from "react";
+import { squiggleWrapper } from "./squiggleWrapper";
 
-export function InputBox({
+export function SubmitButton({
   posList,
   binaryComparisons,
   inputValue,
@@ -11,13 +12,14 @@ export function InputBox({
   dontPushSubmitButtonAnyMore,
 }) {
   // This element didn't necessarily have to exist, but it made it easier for debugging purposes
-  let onClick = (event) => {
+  let onClick = async (event) => {
     if (!dontPushSubmitButtonAnyMore) {
       //event.preventDefault();
       let obj = {
         posList,
         binaryComparisons,
         inputValue,
+        squiggleString: inputValue,
         reasoning,
         element1: toComparePair[1],
         element2: toComparePair[0],
@@ -30,7 +32,16 @@ export function InputBox({
       } else if (!!Number(inputValue) && inputValue < 0) {
         alert("Negative numbers not yet allowed");
       } else {
-        alert("Your input is not a number");
+        let potentialSquiggleOutput = await squiggleWrapper(inputValue);
+        if (!!Number(potentialSquiggleOutput)) {
+          nextStepInput({
+            ...obj,
+            inputValue: potentialSquiggleOutput,
+            squiggleString: inputValue,
+          });
+        } else {
+          alert("Your input is not a number");
+        }
       }
     }
   };