feat: Allow for squiggle/guesstimate type inputs
This commit is contained in:
parent
87722e5ae1
commit
404c720b35
BIN
lib/.submitButton.js.swp
Normal file
BIN
lib/.submitButton.js.swp
Normal file
Binary file not shown.
Binary file not shown.
|
@ -2,7 +2,7 @@
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { DrawGraph, removeOldSvg } from "./labeledGraph";
|
import { DrawGraph, removeOldSvg } from "./labeledGraph";
|
||||||
import { InputBox } from "./inputBox";
|
import { SubmitButton } from "./submitButton";
|
||||||
import { DisplayElement } from "./displayElement";
|
import { DisplayElement } from "./displayElement";
|
||||||
import { DisplayAsMarkdown } from "./displayAsMarkdown";
|
import { DisplayAsMarkdown } from "./displayAsMarkdown";
|
||||||
import { CreateTable, buildRows } from "./findPaths";
|
import { CreateTable, buildRows } from "./findPaths";
|
||||||
|
@ -48,12 +48,15 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
let nicelyFormatLinks = (quantitativeComparisons, listOfElements) =>
|
let nicelyFormatLinks = (quantitativeComparisons, listOfElements) =>
|
||||||
quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({
|
quantitativeComparisons.map(
|
||||||
source: listOfElements[element1].name,
|
([element1, element2, distance, reasoning, squiggleString]) => ({
|
||||||
target: listOfElements[element2].name,
|
source: listOfElements[element1].name,
|
||||||
distance: distance,
|
target: listOfElements[element2].name,
|
||||||
reasoning: reasoning,
|
distance: distance,
|
||||||
}));
|
reasoning: reasoning,
|
||||||
|
squiggleString: squiggleString,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
// Main react component
|
// Main react component
|
||||||
export default function ComparisonView({ listOfElementsForView }) {
|
export default function ComparisonView({ listOfElementsForView }) {
|
||||||
|
@ -303,6 +306,7 @@ export default function ComparisonView({ listOfElementsForView }) {
|
||||||
reasoning,
|
reasoning,
|
||||||
element1,
|
element1,
|
||||||
element2,
|
element2,
|
||||||
|
squiggleString,
|
||||||
}) => {
|
}) => {
|
||||||
if (!dontPushSubmitButtonAnyMore) {
|
if (!dontPushSubmitButtonAnyMore) {
|
||||||
if (inputValue < 1 && inputValue > 0) {
|
if (inputValue < 1 && inputValue > 0) {
|
||||||
|
@ -323,6 +327,7 @@ export default function ComparisonView({ listOfElementsForView }) {
|
||||||
element2,
|
element2,
|
||||||
inputValue,
|
inputValue,
|
||||||
reasoning,
|
reasoning,
|
||||||
|
squiggleString || inputValue,
|
||||||
];
|
];
|
||||||
let newQuantitativeComparisons = [
|
let newQuantitativeComparisons = [
|
||||||
...quantitativeComparisons,
|
...quantitativeComparisons,
|
||||||
|
@ -396,7 +401,7 @@ export default function ComparisonView({ listOfElementsForView }) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Comparison actuator (text, previously input) */}
|
{/* Comparison actuator (text, previously number) */}
|
||||||
<div className="flex m-auto w-72">
|
<div className="flex m-auto w-72">
|
||||||
<div className="block m-auto text-center">
|
<div className="block m-auto text-center">
|
||||||
<br />
|
<br />
|
||||||
|
@ -404,7 +409,7 @@ export default function ComparisonView({ listOfElementsForView }) {
|
||||||
{`... is `}
|
{`... is `}
|
||||||
<br />
|
<br />
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="text"
|
||||||
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"
|
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={inputValue}
|
value={inputValue}
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
|
@ -418,7 +423,7 @@ export default function ComparisonView({ listOfElementsForView }) {
|
||||||
</label>
|
</label>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<InputBox
|
<SubmitButton
|
||||||
posList={posList}
|
posList={posList}
|
||||||
binaryComparisons={binaryComparisons}
|
binaryComparisons={binaryComparisons}
|
||||||
inputValue={inputValue}
|
inputValue={inputValue}
|
||||||
|
|
23
lib/squiggleWrapper.js
Normal file
23
lib/squiggleWrapper.js
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export async function squiggleWrapper(input) {
|
||||||
|
let response = await axios.post("https://server.loki.red/squiggle", {
|
||||||
|
model: `mean(${input})`,
|
||||||
|
});
|
||||||
|
if (response.status == 200) {
|
||||||
|
try {
|
||||||
|
console.log(response.data);
|
||||||
|
if (!!response.data && !!response.data.value) {
|
||||||
|
// console.log(response.data.value);
|
||||||
|
let result = response.data.value.hd.VAL;
|
||||||
|
console.log(result);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
// squiggle("1 to 4");
|
|
@ -1,7 +1,8 @@
|
||||||
/* Imports */
|
/* Imports */
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
import { squiggleWrapper } from "./squiggleWrapper";
|
||||||
|
|
||||||
export function InputBox({
|
export function SubmitButton({
|
||||||
posList,
|
posList,
|
||||||
binaryComparisons,
|
binaryComparisons,
|
||||||
inputValue,
|
inputValue,
|
||||||
|
@ -11,13 +12,14 @@ export function InputBox({
|
||||||
dontPushSubmitButtonAnyMore,
|
dontPushSubmitButtonAnyMore,
|
||||||
}) {
|
}) {
|
||||||
// This element didn't necessarily have to exist, but it made it easier for debugging purposes
|
// This element didn't necessarily have to exist, but it made it easier for debugging purposes
|
||||||
let onClick = (event) => {
|
let onClick = async (event) => {
|
||||||
if (!dontPushSubmitButtonAnyMore) {
|
if (!dontPushSubmitButtonAnyMore) {
|
||||||
//event.preventDefault();
|
//event.preventDefault();
|
||||||
let obj = {
|
let obj = {
|
||||||
posList,
|
posList,
|
||||||
binaryComparisons,
|
binaryComparisons,
|
||||||
inputValue,
|
inputValue,
|
||||||
|
squiggleString: inputValue,
|
||||||
reasoning,
|
reasoning,
|
||||||
element1: toComparePair[1],
|
element1: toComparePair[1],
|
||||||
element2: toComparePair[0],
|
element2: toComparePair[0],
|
||||||
|
@ -30,7 +32,16 @@ export function InputBox({
|
||||||
} else if (!!Number(inputValue) && inputValue < 0) {
|
} else if (!!Number(inputValue) && inputValue < 0) {
|
||||||
alert("Negative numbers not yet allowed");
|
alert("Negative numbers not yet allowed");
|
||||||
} else {
|
} else {
|
||||||
alert("Your input is not a number");
|
let potentialSquiggleOutput = await squiggleWrapper(inputValue);
|
||||||
|
if (!!Number(potentialSquiggleOutput)) {
|
||||||
|
nextStepInput({
|
||||||
|
...obj,
|
||||||
|
inputValue: potentialSquiggleOutput,
|
||||||
|
squiggleString: inputValue,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
alert("Your input is not a number");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
Loading…
Reference in New Issue
Block a user