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

tweaks

Browse Source
This commit is contained in:
NunoSempere 2022-06-18 14:18:15 -04:00
parent 026411072b
commit bfe6dcd00e
10 changed files with 237 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webpage-refactor/README.md
View File

@ -31,10 +31,10 @@ https://github.com/netlify/netlify-plugin-nextjs/#readme
- [x] Extract merge, findPath and aggregatePath functionality into different repos
- [ ] Add functionality like names, etc.
- [ ] Send to mongo upon completion
- [x] Send to mongo upon completion
- [ ] Add paths table
- [ ] warn that the paths table is approximate.
- [ ] Push to github
- [ ] Push to netlify
- [ ] Don't allow further comparisons after completion
- [x] Don't allow further comparisons after completion
- [ ] Look back at Amazon thing which has been running

9
packages/webpage-refactor/components/comparisonActuator.js
View File

@ -5,20 +5,26 @@ export function ComparisonActuator({
listOfElements,
pairCurrentlyBeingCompared,
moveToNextStep,
isListOrdered,
}) {
const initialComparisonString = "x to y";
const [comparisonString, setComparisonString] = useState("x to y");
const onChangeComparisonString = async (event) =>
const onChangeComparisonString = async (event) => {
if (!isListOrdered) {
await setComparisonString(event.target.value);
}
};
const onClickSubmitEvent = (event) => {
// console.log(event.target.value);
if (!isListOrdered) {
moveToNextStep({
listOfElements,
pairCurrentlyBeingCompared,
comparisonString,
});
setComparisonString(initialComparisonString);
}
};
return (
@ -29,6 +35,7 @@ export function ComparisonActuator({
{`... is `}
<br />
<input
disabled={isListOrdered ? true : false}
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"
value={comparisonString}

148
packages/webpage-refactor/components/graph/graph.js
View File

@ -1,4 +1,5 @@
import React, { useEffect, useState, useRef } from "react";
import colormap from "colormap";
import cytoscape from "cytoscape";
import spread from "cytoscape-spread";
import {
@ -10,7 +11,7 @@ import { truncateValueForDisplay } from "../../lib/truncateNums.js";
// import dagre from "cytoscape-dagre";
// import cola from "cytoscape-cola";
// import fcose from "cytoscape-fcose";
import avsdf from "cytoscape-avsdf";
// import avsdf from "cytoscape-avsdf";
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";
@ -24,9 +25,7 @@ const getEdgeLabel = async (squiggleString) => {
console.log(sparkline);
sparklineConcat =
sparklineConcat +
" →" +
sparkline.sparkline.replace("▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁", "");
sparklineConcat + " →" + sparkline.sparkline.replace("▁▁▁▁▁▁▁▁▁▁▁▁▁", "");
//alert("▁▁▁▁▁▁▁▁▁▁▁");
}
if (num.asNum) {
@ -38,64 +37,139 @@ const getEdgeLabel = async (squiggleString) => {
return squiggleString + sparklineConcat; //sparkline;
};
export function Graph({ listOfElements, links }) {
const getColors = (n) => {
let colors = colormap({
colormap: "viridis",
nshades: n,
format: "hex",
alpha: 1,
});
return colors;
};
const cutOffLongNames = (string) => {
let maxLength = 40;
let result;
if (string.length < maxLength) {
result = string;
} else {
result = string.slice(0, maxLength - 4);
result = result + "...";
}
return result;
};
export function Graph({
listOfElements,
links,
isListOrdered,
mergeSortOrder,
}) {
const containerRef = useRef();
const [visibility, setVisibility] = useState("invisible");
const [visibility, setVisibility] = useState(""); /// useState("invisible");
const callEffect = async (listOfElements, links) => {
setVisibility("invisible");
cytoscape.use(spread); // spread
const callEffect = async ({
listOfElements,
links,
isListOrdered,
mergeSortOrder,
}) => {
//setVisibility("invisible");
let layoutName = "circle"; //
let nodeElements = listOfElements.map((element) => {
return { data: { id: element.name } };
// cytoscape.use(circle); // spread, circle,
let listOfElementsForGraph = isListOrdered
? mergeSortOrder
: listOfElements;
let colors = new Array(listOfElements.length);
if (isListOrdered) {
colors = getColors(listOfElements.length);
}
let nodeElements = listOfElements.map((element, i) => {
return {
data: {
id: cutOffLongNames(element.name),
color: colors[i] || "darkgreen",
},
};
});
let linkElements = await Promise.all(
links.map(async (link, i) => {
return {
data: {
id: `link-${i}`,
source: link.source,
target: link.target,
source: cutOffLongNames(link.source),
target: cutOffLongNames(link.target),
label: await getEdgeLabel(link.squiggleString),
},
};
})
);
const config = {
container: containerRef.current,
style: [
const cytoscapeStylesheet = [
{
selector: "node",
style: {
padding: "25px",
shape: "round-rectangle",
content: "data(id)",
"background-color": "darkgreen",
"background-color": "data(color)",
"text-wrap": "wrap",
"text-max-width": 200,
"source-text-offset": 20,
//"text-valign": "bottom",
"text-justification": "auto",
//"text-overflow-wrap": "anywhere",
"text-max-width": 70,
"z-index": 1,
},
},
{
selector: "node[id]",
style: {
label: "data(id)",
"font-size": "11",
color: "white",
"text-halign": "center",
"text-valign": "center",
"z-index": 1,
},
padding: 2,
},
{
selector: "edge",
style: {
label: "data(label)", // maps to data.label
labelColor: "blue",
"curve-style": "unbundled-bezier",
"target-arrow-shape": "vee",
width: 1.5,
"target-arrow-color": "green",
"arrow-scale": 3,
"target-arrow-fill": "filled",
"font-size": 15,
"line-color": "green",
"target-arrow-shape": "vee",
"text-rotation": "autorotate",
"text-margin-x": +25,
"text-margin-y": +25,
padding: 5,
"z-index": 0,
},
},
],
{
selector: "edge[label]",
style: {
label: "data(label)",
"font-size": "12",
"text-background-color": "#f9f9f9",
"text-background-opacity": 1,
"text-background-padding": "4px",
"text-border-color": "black",
"text-border-style": "solid",
"text-border-width": 0.5,
"text-border-opacity": 1,
"z-index": 3,
// "text-rotation": "autorotate"
},
},
];
const config = {
container: containerRef.current,
style: cytoscapeStylesheet,
elements: [
/* Dummy data:
{ data: { id: "n1" } },
@ -107,7 +181,7 @@ export function Graph({ listOfElements, links }) {
...linkElements,
],
layout: {
name: "spread", // circle, grid, dagre
name: layoutName, // circle, grid, dagre
minDist: 10,
//prelayout: false,
// animate: false, // whether to transition the node positions
@ -117,21 +191,23 @@ export function Graph({ listOfElements, links }) {
userPanningEnabled: false,
};
cytoscape(config);
setTimeout(() => setVisibility(""), 700);
// setTimeout(() => setVisibility(""), 700);
};
useEffect(async () => {
await callEffect(listOfElements, links);
await callEffect({ listOfElements, links, isListOrdered, mergeSortOrder });
// console.log(JSON.stringify(config, null, 10));
}, [listOfElements, links]);
return (
<div>
<div className={visibility}>
<div ref={containerRef} style={{ height: "700px", width: "1000px" }} />
<div ref={containerRef} style={{ height: "900px", width: "1000px" }} />
</div>
<button
className={effectButtonStyle}
onClick={() => callEffect(listOfElements, links)}
onClick={() =>
callEffect({ listOfElements, links, isListOrdered, mergeSortOrder })
}
>
{"Redraw graph"}
</button>

17
packages/webpage-refactor/components/homepage.js
View File

@ -6,14 +6,16 @@ import { DisplayElementForComparison } from "./displayElementForComparison.js";
import { ComparisonActuator } from "./comparisonActuator.js";
import { AdvancedOptions } from "./advancedOptions.js";
import { Graph } from "./graph/graph.js";
import { pushToMongo } from "../lib/pushToMongo.js";
import { resolveToNumIfPossible } from "../lib/squiggle.js";
export function Homepage({ listOfElementsInit }) {
const SLICE = true;
/* Statefull elements */
// list of elements
const [listOfElements, setListOfElements] = useState(
listOfElementsInit //.slice(0, 5)
SLICE ? listOfElementsInit.slice(0, 4) : listOfElementsInit
);
// number of steps
@ -22,6 +24,7 @@ export function Homepage({ listOfElementsInit }) {
// is list ordered?
const [isListOrdered, setIsListOrdered] = useState(false);
const [mergeSortOrder, setMergeSortOrder] = useState([]);
// list of comparisons
const [links, setLinks] = useState([]);
@ -58,7 +61,9 @@ export function Homepage({ listOfElementsInit }) {
setPairCurrentlyBeingCompared(newPairToCompare);
} else {
setIsListOrdered(true);
alert(JSON.stringify(mergeSortOutput, null, 4));
setMergeSortOrder(mergeSortOutput.orderedList);
pushToMongo({ mergeSortOutput, links });
// alert(JSON.stringify(mergeSortOutput, null, 4));
// chooseNextPairToCompareRandomly({ listOfElements });
// return 1;
}
@ -120,6 +125,7 @@ export function Homepage({ listOfElementsInit }) {
listOfElements={listOfElements}
pairCurrentlyBeingCompared={pairCurrentlyBeingCompared}
moveToNextStep={moveToNextStep}
isListOrdered={isListOrdered}
/>
<DisplayElementForComparison
@ -142,7 +148,12 @@ export function Homepage({ listOfElementsInit }) {
/>
</div>
<Graph listOfElements={listOfElements} links={links} />
<Graph
listOfElements={listOfElements}
links={links}
isListOrdered={isListOrdered}
mergeSortOrder={mergeSortOrder}
/>
</div>
);
}

47
packages/webpage-refactor/data/listOfObjects.json Normal file
View File

@ -0,0 +1,47 @@
[
{
"name": "Michael Cohen and Dmitrii Krasheninnikov — Scholarship Support (2018)",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.jnlrsr63yliq",
"amount": "$159k"
},
{
"name": "AI Impacts — General Support (2018)",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.6m6tebpouzt1",
"amount": "$100k"
},
{
"name": "Oxford University — Research on the Global Politics of AI",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.c6r2m7i749ay",
"amount": "$429k"
},
{
"name": "Ought — General Support (2018)",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.xnzaj48k3fdb",
"amount": "$525k"
},
{
"name": "Machine Intelligence Research Institute — AI Safety Retraining Program",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.h922w7eh5rq6",
"amount": "$150k"
},
{
"name": "UC Berkeley — AI Safety Research (2018)",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.rrsbecbboed8",
"amount": "$1.145M"
},
{
"name": "Open Phil AI Fellowship — 2018 Class",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.p8xd58asz6a2",
"amount": "$1.135M"
},
{
"name": "Wilson Center — AI Policy Seminar Series",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.qiurhycylgi3",
"amount": "$400k"
},
{
"name": "Stanford University — Machine Learning Security Research Led by Dan Boneh and Florian Tramer",
"url": "https://docs.google.com/document/d/1VlN6I4Jauarx-0Fp7AC1ggeQ02AITsN7S56ffAO9NTU/edit#heading=h.ox8adhpgba86",
"amount": "$100k"
}
]

16
packages/webpage-refactor/lib/pushToMongo.js Normal file
View File

@ -0,0 +1,16 @@
import axios from "axios";
const CONNECTION_IS_ACTIVE = true;
export async function pushToMongo(data) {
if (CONNECTION_IS_ACTIVE) {
let response = await axios.post(
"https://server.loki.red/utility-function-extractor",
{
data: data,
}
);
console.log(response);
}
}
// pushToMongo()

2
packages/webpage-refactor/lib/truncateNums.js
View File

@ -7,6 +7,8 @@ let topOutAt100AndValidate = (x) => {
}
};
export const toLocale = (x) => Number(x).toLocaleString();
export const truncateValueForDisplay = (value) => {
let result;
if (value > 10) {

1
packages/webpage-refactor/package.json
View File

@ -10,6 +10,7 @@
"dependencies": {
"@quri/squiggle-lang": "^0.2.11",
"axios": "^0.21.4",
"colormap": "^2.3.2",
"cytoscape": "^3.21.1",
"cytoscape-avsdf": "^1.0.0",
"cytoscape-cola": "^2.5.1",

2
packages/webpage-refactor/pages/index.js
View File

@ -10,7 +10,7 @@ import path from "path";
import { Homepage } from "../components/homepage.js";
/* Definitions */
const elementsDocument = "../data/listOfMoralGoods.json";
const elementsDocument = "../data/listOfObjects.json";
/* React components */
export async function getStaticProps() {

12
packages/webpage-refactor/yarn.lock
View File

@ -984,6 +984,13 @@ colorette@^2.0.16:
resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
colormap@^2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/colormap/-/colormap-2.3.2.tgz#4422c1178ce563806e265b96782737be85815abf"
integrity sha512-jDOjaoEEmA9AgA11B/jCSAvYE95r3wRoAyTf3LEHGiUVlNHJaL1mRkf5AyLSpQBVGfTEPwGEqCIzL+kgr2WgNA==
dependencies:
lerp "^1.0.3"
comma-separated-tokens@^1.0.0:
version "1.0.8"
resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
@ -1875,6 +1882,11 @@ layout-base@^2.0.0:
resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-2.0.1.tgz#d0337913586c90f9c2c075292069f5c2da5dd285"
integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==
lerp@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/lerp/-/lerp-1.0.3.tgz#a18c8968f917896de15ccfcc28d55a6b731e776e"
integrity sha512-70Rh4rCkJDvwWiTsyZ1HmJGvnyfFah4m6iTux29XmasRiZPDBpT9Cfa4ai73+uLZxnlKruUS62jj2lb11wURiA==
lilconfig@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"