fix: Aesthetics
This commit is contained in:
parent
a154b34100
commit
b9a4a371fc
|
@ -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)}
|
||||
/>
|
||||
|
|
|
@ -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'));
|
||||
|
|
Loading…
Reference in New Issue
Block a user