quantified.uncertainty/hierarchical-estimates-visualizer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Get working prototype

Browse Source 
Only required figuring out the bindings!
This commit is contained in:
NunoSempere 2022-07-19 17:53:33 -04:00
parent 6f91849e4e
commit 4fddea47bf
3 changed files with 15 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/dynamicSquiggleChart.js
View File

@ -30,23 +30,26 @@ export function DynamicSquiggleChart({ element, stopShowing }) {
let usefulElement = {
name: element.id,
squiggleString: element.fn,
formula: element.formula
binding: element.binding || null
};
console.log(element.binding)
// alert(usefulElement.squiggleString)
return (
<div className="">
<h3 className="text-2xl font-bold mb-5">{usefulElement.name}</h3>
<textarea
value={JSON.stringify(usefulElement, null, 4)}
value={usefulElement.squiggleString}
//onChange={handleChange}
disabled={true}
rows={JSON.stringify(usefulElement, null, 4).split("\n").length}
cols={37}
className="text-left text-gray-600 bg-white rounded text-normal p-6 border-0 shadow outline-none focus:outline-none focus:ring mb-4"
rows={5} // could compute from usefulElement.squiggleString
cols={30}
className="text-left text-gray-600 bg-white rounded text-normal p-8 m-8 border-0 shadow outline-none focus:outline-none focus:ring"
/>
<SquiggleChart
squiggleString={element.squiggleString}
squiggleString={usefulElement.squiggleString}
width={500}
height={200}
bindings={usefulElement.binding}
showSummary={true}
showTypes={true}
/>

75
components/dynamicSquiggleChartPartial.js
View File

@ -1,75 +0,0 @@
import React from "react";
// import { SquiggleChart } from "@quri/squiggle-components";
import dynamic from "next/dynamic";
const SquiggleChart = dynamic(
() => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
{
loading: () => <p>Loading...</p>,
ssr: false,
}
);
/*
const SquiggleChart = dynamic(
() => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
{
suspense: true,
ssr: false,
}
);
*/
const effectButtonStyle =
"bg-transparent m-2 hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5";
export function DynamicSquiggleChart({ element, stopShowing }) {
if (element == null) {
return "";
} else {
let usefulElement = {
name: element.id,
squiggleString: element.fn,
formula: element.formula
};
return (
<div className="">
<h3 className="text-2xl font-bold mb-5">{usefulElement.name}</h3>
<textarea
value={JSON.stringify(usefulElement, null, 4)}
//onChange={handleChange}
disabled={true}
rows={JSON.stringify(usefulElement, null, 4).split("\n").length}
cols={37}
className="text-left text-gray-600 bg-white rounded text-normal p-6 border-0 shadow outline-none focus:outline-none focus:ring mb-4"
/>
<SquiggleChart
squiggleString={element.squiggleString}
width={500}
height={200}
showSummary={true}
showTypes={true}
/>
{/*
SquiggleChart props:
squiggleString?: string;
sampleCount?: number;
environment?: environment;
chartSettings?: FunctionChartSettings;
onChange?(expr: squiggleExpression): void;
width?: number;
height?: number;
bindings?: bindings;
jsImports?: jsImports;
showSummary?: boolean;
showTypes?: boolean;
showControls?: boolean;
*/}
<button className={effectButtonStyle} onClick={() => stopShowing()}>
Hide chart
</button>
</div>
);
}
}

107
components/graph/createGraph.js
View File

@ -101,7 +101,8 @@ ${parentName}`;
tag: 'Ok',
id: parentName,
value: parentValue.value,
fn: fn
fn: fn,
binding: parentBinding
})
nodes.push(resultNode)
@ -125,13 +126,10 @@ export function createGraph() {
hours: `4 to 12`,
efficiency: `0.1 to 10`,
},
fn: `
hours * efficiency
`,
fn: `hours * efficiency`,
},
},
fn: `
x = 1 to 10
fn: `x = 1 to 10
r = productivity * (1 to 10) * x
mean(r)`,
};
@ -158,100 +156,3 @@ export function createGraph() {
// Then the rest should be doable without all that much work.
// Some duplication of efforts, but I don't really care:
}
export function createGraph0() {
let nodeElements = [
{
data: {
id: "Total utility",
squiggleString: "1 to 1000",
formula: "now + soon + later"
}
},
{
data: {
id: "now",
squiggleString: "1 to 2",
formula: "subjective estimation"
},
},
{
data: {
id: "soon",
squiggleString: "10 to 200",
formula: "subjective estimation"
},
},
{
data: {
id: "later",
squiggleString: "1 to 500",
formula: "subjective estimation"
},
},
{
data: {
id: "discount rate",
squiggleString: "0.001 to 0.03",
formula: "subjective estimation"
},
},
{
data: {
id: "return rate",
squiggleString: "1 to 2"
}
},
]
let edgeElements = [
{
data: {
id: "link-1",
source: "now",
target: "Total utility",
},
},
{
data: {
id: "link-2",
source: "soon",
target: "Total utility",
},
},
{
data: {
id: "link-3",
source: "later",
target: "Total utility",
},
},
{
data: {
id: "link-4",
source: "discount rate",
target: "later",
},
},
{
data: {
id: "link-5",
source: "return rate",
target: "later",
}
},
]
//
let squiggleInJs = ({
displayName: "Total utility",
varName: "utility",
inputs: {
},
fn: ``
})
//
return { nodeElements, edgeElements }
}