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

View File

@ -31,10 +31,10 @@ https://github.com/netlify/netlify-plugin-nextjs/#readme
- [x] Extract merge, findPath and aggregatePath functionality into different repos - [x] Extract merge, findPath and aggregatePath functionality into different repos
- [ ] Add functionality like names, etc. - [ ] Add functionality like names, etc.
- [ ] Send to mongo upon completion - [x] Send to mongo upon completion
- [ ] Add paths table - [ ] Add paths table
- [ ] warn that the paths table is approximate. - [ ] warn that the paths table is approximate.
- [ ] Push to github - [ ] Push to github
- [ ] Push to netlify - [ ] 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 - [ ] Look back at Amazon thing which has been running

View File

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

View File

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

View File

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

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"
}
]

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()

View File

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

View File

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

View File

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

View File

@ -984,6 +984,13 @@ colorette@^2.0.16:
resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798" resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ== 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: comma-separated-tokens@^1.0.0:
version "1.0.8" version "1.0.8"
resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea" 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" resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-2.0.1.tgz#d0337913586c90f9c2c075292069f5c2da5dd285"
integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg== 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: lilconfig@^2.0.5:
version "2.0.5" version "2.0.5"
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25" resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"