tweaks
This commit is contained in:
parent
026411072b
commit
bfe6dcd00e
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
47
packages/webpage-refactor/data/listOfObjects.json
Normal 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
16
packages/webpage-refactor/lib/pushToMongo.js
Normal 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()
|
|
@ -7,6 +7,8 @@ let topOutAt100AndValidate = (x) => {
|
|||
}
|
||||
};
|
||||
|
||||
export const toLocale = (x) => Number(x).toLocaleString();
|
||||
|
||||
export const truncateValueForDisplay = (value) => {
|
||||
let result;
|
||||
if (value > 10) {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user