From b9a4a371fc5209f845ab73044808f141e27f04d9 Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@gmail.com>
Date: Thu, 25 Nov 2021 15:49:58 +0000
Subject: [PATCH] fix: Aesthetics

---
 lib/comparisonView.js | 55 +++++++++++++------------------------------
 pages/research.js     |  1 -
 2 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/lib/comparisonView.js b/lib/comparisonView.js
index c656a9d..eff62bb 100644
--- a/lib/comparisonView.js
+++ b/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)
 
@@ -261,16 +237,17 @@ export default function ComparisonView({ listOfElementsForView }) {
                 <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 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"
-                  />
+                    <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)
+                      }}
+
+                    />
                   <br />
                   {`times as valuable as ...`}
                 </label>
@@ -299,9 +276,11 @@ export default function ComparisonView({ listOfElementsForView }) {
           </div>
           <br />
           <label className="">
-            Reasoning (optional):
+            <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)} 
             />
diff --git a/pages/research.js b/pages/research.js
index 545f18b..1857347 100644
--- a/pages/research.js
+++ b/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'));