chore: Refactor to refer to an input box rather than to a slider which no longer exists

lib/comparisonView.js

@@ -2,7 +2,7 @@
 import Head from "next/head";
 import React, { useState } from "react";
 import { DrawGraph, removeOldSvg } from "./labeledGraph";
-import { SubmitSliderButton } from "./slider";
+import { InputBox } from "./inputBox";
 import { DisplayElement } from "./displayElement";
 import { DisplayAsMarkdown } from "./displayAsMarkdown";
 import { CreateTable, buildRows } from "./findPaths";
@@ -68,7 +68,7 @@ export default function ComparisonView({ listOfElementsForView }) {
     initialPosList[initialPosList.length - 2],
     initialPosList[initialPosList.length - 1],
   ];
-  let initialSliderValue = 1;
+  let initialInputValue = 1;
   let initialReasoning = "";
   let initialBinaryComparisons = [];
   let initialQuantitativeComparisons = [];
@@ -90,7 +90,7 @@ export default function ComparisonView({ listOfElementsForView }) {
   const [listOfElements, setListOfElements] = useState(initialListOfElements);
   const [posList, setPosList] = useState(initialPosList);
   const [toComparePair, setToComparePair] = useState(initialComparePair);
-  const [sliderValue, setSliderValue] = useState(initialSliderValue);
+  const [inputValue, setInputValue] = useState(initialInputValue);
   const [reasoning, setReasoning] = useState(initialReasoning);
   const [binaryComparisons, setBinaryComparisons] = useState(
     initialBinaryComparisons
@@ -132,7 +132,7 @@ export default function ComparisonView({ listOfElementsForView }) {
       posList[posList.length - 2],
       posList[posList.length - 1],
     ]);
-    setSliderValue(initialSliderValue);
+    setInputValue(initialInputValue);
     setBinaryComparisons(initialBinaryComparisons2 || initialBinaryComparisons);
     setQuantitativeComparisons(
       initialQuantitativeComparisons2 || initialQuantitativeComparisons
@@ -296,20 +296,20 @@ export default function ComparisonView({ listOfElementsForView }) {
     }
   };
 
-  let nextStepSlider = async ({
+  let nextStepInput = async ({
     posList,
     binaryComparisons,
-    sliderValue,
+    inputValue,
     reasoning,
     element1,
     element2,
   }) => {
     if (!dontPushSubmitButtonAnyMore) {
-      if (sliderValue < 1 && sliderValue > 0) {
+      if (inputValue < 1 && inputValue > 0) {
-        sliderValue = 1 / sliderValue;
+        inputValue = 1 / inputValue;
         [element1, element2] = [element2, element1];
       }
-      console.log(`posList@nextStepSlider:`);
+      console.log(`posList@nextStepInput:`);
       console.log(posList);
       let [successStatus, result] = nextStepSimple(
         posList,
@@ -321,7 +321,7 @@ export default function ComparisonView({ listOfElementsForView }) {
       let newQuantitativeComparison = [
         element1,
         element2,
-        sliderValue,
+        inputValue,
         reasoning,
       ];
       let newQuantitativeComparisons = [
@@ -330,7 +330,7 @@ export default function ComparisonView({ listOfElementsForView }) {
       ];
       setQuantitativeComparisons(newQuantitativeComparisons);
 
-      setSliderValue(DEFAULT_COMPARE());
+      setInputValue(DEFAULT_COMPARE());
       setReasoning("");
       changeNumSteps(numSteps + 1);
       if (successStatus) {
@@ -396,7 +396,7 @@ export default function ComparisonView({ listOfElementsForView }) {
               </div>
             </div>
 
-            {/* Comparison actuator (text, previously slider) */}
+            {/* Comparison actuator (text, previously input) */}
             <div className="flex m-auto w-72">
               <div className="block m-auto text-center">
                 <br />
@@ -406,11 +406,11 @@ export default function ComparisonView({ listOfElementsForView }) {
                   <input
                     type="number"
                     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={sliderValue}
+                    value={inputValue}
                     onChange={(event) => {
                       //console.log(event)
                       //console.log(event.target.value)
-                      setSliderValue(event.target.value);
+                      setInputValue(event.target.value);
                     }}
                   />
                   <br />
@@ -418,13 +418,13 @@ export default function ComparisonView({ listOfElementsForView }) {
                 </label>
                 <br />
 
-                <SubmitSliderButton
+                <InputBox
                   posList={posList}
                   binaryComparisons={binaryComparisons}
-                  sliderValue={sliderValue}
+                  inputValue={inputValue}
                   reasoning={reasoning}
                   toComparePair={toComparePair}
-                  nextStepSlider={nextStepSlider}
+                  nextStepInput={nextStepInput}
                   dontPushSubmitButtonAnyMore={dontPushSubmitButtonAnyMore}
                 />
               </div>
@@ -450,19 +450,6 @@ export default function ComparisonView({ listOfElementsForView }) {
             />
           </label>
           <br />
-          <div></div>
-          {/* Old slider element (previous actuator)
-
-          <div className={`flex row-start-3 row-end-3  col-start-1 col-end-4 md:col-start-3 md:col-end-3 md:row-start-1 md:row-end-1 lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-1 items-center justify-center mb-4 mt-10 ${isListOrdered ? "hidden" : ""}`}>
-            <SliderElement
-              className="flex items-center justify-center"
-              onChange={(event) => (setSliderValue(event[0]))}
-              value={sliderValue}
-              displayFunction={displayFunctionSlider}
-              domain={domain}
-            />
-          </div>
-          */}
         </div>
 
         {/* Results section */}

lib/inputBox.js

@@ -0,0 +1,50 @@
+/* Imports */
+import React, { useState } from "react";
+
+export function InputBox({
+  posList,
+  binaryComparisons,
+  inputValue,
+  reasoning,
+  toComparePair,
+  nextStepInput,
+  dontPushSubmitButtonAnyMore,
+}) {
+  // This element didn't necessarily have to exist, but it made it easier for debugging purposes
+  let onClick = (event) => {
+    if (!dontPushSubmitButtonAnyMore) {
+      //event.preventDefault();
+      let obj = {
+        posList,
+        binaryComparisons,
+        inputValue,
+        reasoning,
+        element1: toComparePair[1],
+        element2: toComparePair[0],
+      };
+      //
+      console.log("input@SubmitInputButton");
+      console.log(obj);
+      if (!!Number(inputValue) && inputValue >= 0) {
+        nextStepInput(obj);
+      } else if (!!Number(inputValue) && inputValue < 0) {
+        alert("Negative numbers not yet allowed");
+      } else {
+        alert("Your input is not a number");
+      }
+    }
+  };
+
+  return (
+    <button
+      className={
+        !dontPushSubmitButtonAnyMore
+          ? "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"
+          : "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5"
+      }
+      onClick={onClick}
+    >
+      Submit
+    </button>
+  );
+}

lib/slider.js

@@ -1,179 +0,0 @@
-/* Imports */
-import { Slider, Rail, Handles, Tracks, Ticks } from "react-compound-slider";
-import React, { useState } from "react";
-// https://sghall.github.io/react-compound-slider/#/getting-started/tutorial
-
-/* Definitions */
-
-const sliderStyle = {
-  // Give the slider some width
-  position: "relative",
-  width: "40em",
-  height: 40,
-  border: "5em",
-};
-
-const railStyle = {
-  position: "absolute",
-  width: "100%",
-  height: 15,
-  marginTop: 32.5,
-  borderRadius: 5,
-  backgroundColor: "lightgrey",
-};
-
-/* Support functions */
-function Handle({
-  handle: { id, value, percent },
-  getHandleProps,
-  displayFunction,
-  handleWidth,
-}) {
-  return (
-    <>
-      <div className="justify-center text-center text-gray-600 text-xs">
-        {displayFunction(value)}
-      </div>
-      <div
-        style={{
-          left: `${percent}%`,
-          position: "absolute",
-          marginLeft: -10,
-          marginTop: 2.5,
-          zIndex: 2,
-          width: 30,
-          height: 30,
-          cursor: "pointer",
-          borderRadius: "0%",
-          backgroundColor: "#374151",
-          color: "#374151",
-        }}
-        {...getHandleProps(id)}
-      ></div>
-    </>
-  );
-}
-
-function Track({ source, target, getTrackProps }) {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        height: 17.5,
-        zIndex: 1,
-        marginTop: 8.25,
-        backgroundColor: " #3B82F6",
-        borderRadius: 5,
-        cursor: "pointer",
-        left: `${source.percent}%`,
-        width: `${target.percent - source.percent}%`,
-      }}
-      {
-        ...getTrackProps() /* this will set up events if you want it to be clickeable (optional) */
-      }
-    />
-  );
-}
-
-/* Body */
-// Two functions, essentially identical.
-export function SliderElement({ onChange, value, displayFunction, domain }) {
-  let toLogDomain = (arr) => [
-    Math.log(arr[0]) / Math.log(10),
-    Math.log(arr[1]) / Math.log(10),
-  ];
-  return (
-    <Slider
-      rootStyle={
-        sliderStyle /* inline styles for the outer div. Can also use className prop. */
-      }
-      domain={toLogDomain([1 / domain, domain])}
-      values={[value]}
-      step={0.0001}
-      onChange={onChange}
-      reversed={true}
-    >
-      <Rail>
-        {({ getRailProps }) => <div style={railStyle} {...getRailProps()} />}
-      </Rail>
-      <Handles>
-        {({ handles, getHandleProps }) => (
-          <div className="slider-handles">
-            {handles.map((handle) => (
-              <Handle
-                key={handle.id}
-                handle={handle}
-                getHandleProps={getHandleProps}
-                displayFunction={displayFunction}
-                handleWidth={"15em"}
-              />
-            ))}
-          </div>
-        )}
-      </Handles>
-      <Tracks right={false}>
-        {({ tracks, getTrackProps }) => (
-          <div className="slider-tracks">
-            {tracks.map(({ id, source, target }) => (
-              <Track
-                key={id}
-                source={source}
-                target={target}
-                getTrackProps={getTrackProps}
-              />
-            ))}
-          </div>
-        )}
-      </Tracks>
-    </Slider>
-  );
-}
-
-export function SubmitSliderButton({
-  posList,
-  binaryComparisons,
-  sliderValue,
-  reasoning,
-  toComparePair,
-  nextStepSlider,
-  dontPushSubmitButtonAnyMore,
-}) {
-  // This element didn't necessarily have to exist, but it made it easier for debugging purposes
-  let onClick = (event) => {
-    if (!dontPushSubmitButtonAnyMore) {
-      //event.preventDefault();
-      let obj = {
-        posList,
-        binaryComparisons,
-        sliderValue,
-        reasoning,
-        element1: toComparePair[1],
-        element2: toComparePair[0],
-      };
-      //
-      console.log("input@SubmitSliderButton");
-      console.log(obj);
-      if (!!Number(sliderValue) && sliderValue >= 0) {
-        nextStepSlider(obj);
-      } else if (!!Number(sliderValue) && sliderValue < 0) {
-        alert("Negative numbers not yet allowed");
-      } else {
-        alert("Your input is not a number");
-      }
-    }
-  };
-
-  return (
-    <button
-      className={
-        !dontPushSubmitButtonAnyMore
-          ? "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"
-          : "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5"
-      }
-      onClick={onClick}
-    >
-      Submit
-    </button>
-  );
-}
-