fix: Aesthetics

lib/comparisonView.js

@@ -4,15 +4,13 @@ const elementsDocument = null//
 /* Imports */
 import Head from 'next/head'
 import React, { useState } from "react";
-import path from 'path';
 import { DrawGraph, removeOldSvg } from './labeledgraph';
-import { SliderElement, SubmitSliderButton } from "./slider";
+import { SubmitSliderButton } from "./slider";
 import { DisplayElement } from './displayElement'
 import { DisplayAsMarkdown } from './displayAsMarkdown'
 import { CreateTableWithDistances } from './findPaths'
 import { TextAreaForJson } from "./textAreaForJson"
 import { pushToMongo } from "./pushToMongo.js"
-import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToActualValue, numToAlphabeticalString } from "./utils.js"
 
 /* Helpers */
 let increasingList = (n) => Array.from(Array(n).keys())
@@ -35,28 +33,6 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
   return isOrdered
 }
 
-let displayFunctionSliderInner = (value) => {
-  let result
-  if (value >= 0) {
-    result = toLocale(transformSliderValueToPracticalValue(value))
-  } else {
-    let inverseresult = toLocale(transformSliderValueToPracticalValue(-value))
-    if (inverseresult == 1) {
-      result = '1'
-    } 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
-
-};
-
 let nicelyFormatLinks = (quantitativeComparisons, listOfElements) => quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({ source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance, reasoning: reasoning }))
 
 // Main react component
@@ -213,7 +189,7 @@ export default function ComparisonView({ listOfElementsForView }) {
     console.log(posList)
     let successStatus = nextStepSimple(posList, binaryComparisons, element1, element2)
 
-    let newQuantitativeComparison = [element1, element2, transformSliderValueToActualValue(sliderValue), reasoning]
+    let newQuantitativeComparison = [element1, element2, sliderValue, reasoning]
     let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
     setQuantitativeComparisons(newQuantitativeComparisons)
 
@@ -263,13 +239,14 @@ export default function ComparisonView({ listOfElementsForView }) {
                   <br />
                     <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}
                       onChange={(event) => {
                         //console.log(event)
                         //console.log(event.target.value)
                         setSliderValue(event.target.value)
                       }}
-                    className="text-center px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-lg border-0 shadow outline-none focus:outline-none focus:ring w-8/12 m-2 h-10"
+
                     />
                   <br />
                   {`times as valuable as ...`}
@@ -299,9 +276,11 @@ export default function ComparisonView({ listOfElementsForView }) {
           </div>
           <br />
           <label className="">
+            <p className="mb-1">
               Reasoning (optional):
+            </p>
             <br />
-            <textarea className="mt-2 px-3 py-4 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-base border-0 shadow outline-none focus:outline-none focus:ring w-full"
+            <textarea className="px-3 py-4 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-base border-0 shadow outline-none focus:outline-none focus:ring w-full"
               value={reasoning} 
               onChange={(event) => setReasoning(event.target.value)} 
             />

pages/research.js

@@ -13,7 +13,6 @@ import ComparisonView from '../lib/comparisonView.js'
 const elementsDocument = '../data/listOfResearchOutputs.json'
 
 /* React components */
-// fs can only be used here. 
 export async function getStaticProps() {
   const directory = path.join(process.cwd(), "pages")
   let listOfElementsForView = JSON.parse(fs.readFileSync(path.join(directory, elementsDocument), 'utf8'));