Change slider to text field

lib/findPaths.js

@@ -7,10 +7,13 @@ let avg = arr => arr.reduce((a,b) => (a+b)) / arr.length
 let formatLargeOrSmall = num => {
     if(num > 1){
         return toLocale(truncateValueForDisplay(num))
-    }else if(num != 0){
+    }else if(num > 0){
         return num.toFixed(-Math.floor(Math.log(num)/Math.log(10)));
+    }else if(num > -1){
+        return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10)));
     }else{
-        return num//return "~0"
+        return toLocale(num)//return "~0"
+
     }
 }
 

lib/labeledgraph.js

@@ -118,6 +118,7 @@ function drawGraphInner({nodes, links}){
             return height-32-(Math.abs(start-end)/2)//height-30
         })
         .text(function(d){ 
+            return Number(d.distance)
             return(truncateValueForDisplay(Number(d.distance)))
             //return(Number(d.distance).toPrecision(2).toString())
         })

lib/slider.js

@@ -133,7 +133,11 @@ export function SubmitSliderButton({posList, binaryComparisons, sliderValue, toC
     //
     console.log("input@SubmitSliderButton")
     console.log(obj)
-    nextStepSlider(obj)
+    if(sliderValue >= 0 ){
+      nextStepSlider(obj)
+    }else if(sliderValue < 0){
+      alert("Negative numbers not yet allowed")
+    }
   }
 
   return( <button 

lib/utils.js

@@ -1,8 +1,11 @@
 import crypto from "crypto"
 
 export const hashString = (string) => crypto.createHash('md5').update(string).digest('hex');
+const id = x => x
+export const transformSliderValueToActualValue = id
+export const transformSliderValueToPracticalValue = id
 
-export const transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
+export const _transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
 export const toLocale = x => Number(x).toLocaleString()
 export const truncateValueForDisplay = value => {
     if(value > 10){
@@ -13,4 +16,16 @@ export const truncateValueForDisplay = value => {
         
     }
 }
-export const transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
+export const _transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
+
+export function numToAlphabeticalString(num){
+    // https://stackoverflow.com/questions/45787459/convert-number-to-alphabet-string-javascript/45787487
+    var s = '', t;
+
+    while (num > 0) {
+        t = (num - 1) % 26;
+        s = String.fromCharCode(65 + t) + s;
+        num = (num - t)/26 | 0;
+    }
+    return s || undefined;
+}

package-lock.json

@@ -1078,6 +1078,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -2171,6 +2179,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.14.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
+      "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@@ -5947,6 +5974,14 @@
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz",
       "integrity": "sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA=="
     },
+    "axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "requires": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -6872,6 +6907,11 @@
         "path-exists": "^4.0.0"
       }
     },
+    "follow-redirects": {
+      "version": "1.14.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
+      "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
+    },
     "foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",

pages/index.js

@@ -14,7 +14,7 @@ import { DisplayAsMarkdown } from '../lib/displayAsMarkdown'
 import { CreateTableWithDistances } from '../lib/findPaths'
 import { TextAreaForJson } from "../lib/textAreaForJson"
 import { pushToMongo } from "../lib/pushToMongo.js"
-import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToActualValue } from "../lib/utils.js"
+import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToActualValue, numToAlphabeticalString } from "../lib/utils.js"
 
 /* Helpers */
 let increasingList = (n) => Array.from(Array(n).keys())
@@ -37,18 +37,23 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
   return isOrdered
 }
 
-let displayFunctionSlider = (value) => {
+let displayFunctionSliderInner = (value) => {
   let result
   if (value >= 0) {
     result = toLocale(transformSliderValueToPracticalValue(value))
   } else {
     let inverseresult = toLocale(transformSliderValueToPracticalValue(-value))
-    if(inverseresult == 1){
+    if (inverseresult == 1) {
       result = '1'
-    }else{
+    } else {
       result = `1/${inverseresult}`
     }
   }
+  return result
+}
+
+let displayFunctionSlider = (value) => {
+  let result = displayFunctionSliderInner(value)
   result = `The first option is ${result}x as valuable as the second one`
   return result
 
@@ -82,7 +87,7 @@ export default function Home({ listOfElementsDefault }) {
 
   //let initialComparePair = [list[list.length-2], list[list.length-1]]
   let initialComparePair = [initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1]]
-  let initialSliderValue = 0
+  let initialSliderValue = 1
   let initialBinaryComparisons = []
   let initialQuantitativeComparisons = []
   let initialIsListOdered = false
@@ -216,8 +221,8 @@ export default function Home({ listOfElementsDefault }) {
   }
 
   let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => {
-    if (sliderValue < 0) {
+    if (sliderValue < 1) {
-      sliderValue = -sliderValue;
+      // sliderValue = -sliderValue;
       [element1, element2] = [element2, element1]
     }
     console.log(`posList@nextStepSlider:`)
@@ -228,7 +233,7 @@ export default function Home({ listOfElementsDefault }) {
     let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
     setQuantitativeComparisons(newQuantitativeComparisons)
 
-    setSliderValue(0)
+    setSliderValue(1)
     if (successStatus) {
       let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements)
       pushToMongo(jsObject)
@@ -262,8 +267,42 @@ export default function Home({ listOfElementsDefault }) {
                 </DisplayElement>
               </div>
             </div>
+
+            <div className="flex m-auto w-72">
+              <div className="block m-auto text-center">
+                {/*`is ${displayFunctionSliderInner(sliderValue)}x times as valuable as`*/}
+                <br />
+
+                <label>
+                  {`... is `}
+                  <br />
+                  <input
+                    type="number"
+                    value={sliderValue}
+                    onChange={(event) =>{
+                      //console.log(event)
+                      //console.log(event.target.value)
+                      setSliderValue(event.target.value)
+                    }}
+                    className="text-center"
+                  />
+                  <br />
+                  {`times as valuable as ...`}
+                </label>
+                <br />
+
+
+                <SubmitSliderButton
+                  posList={posList}
+                  binaryComparisons={binaryComparisons}
+                  sliderValue={sliderValue}
+                  toComparePair={toComparePair}
+                  nextStepSlider={nextStepSlider}
+                />
+              </div>
+            </div>
             <div
-              className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"
+              className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5 "
             //onClick={() => nextStep(binaryComparisons, toComparePair[1], toComparePair[0])}
             >
               <div className="block m-auto text-center">
@@ -272,6 +311,10 @@ export default function Home({ listOfElementsDefault }) {
               </div>
             </div>
           </div>
+          <div>
+          </div>
+          {/*
+
           <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"
@@ -281,13 +324,8 @@ export default function Home({ listOfElementsDefault }) {
               domain={domain}
             />
           </div>
-          <SubmitSliderButton
+           */}
-            posList={posList}
+
-            binaryComparisons={binaryComparisons}
-            sliderValue={sliderValue}
-            toComparePair={toComparePair}
-            nextStepSlider={nextStepSlider}
-          />
 
         </div>