diff --git a/packages/webpage-refactor/README.md b/packages/webpage-refactor/README.md index 7edb5e5..f5ed7f5 100644 --- a/packages/webpage-refactor/README.md +++ b/packages/webpage-refactor/README.md @@ -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 diff --git a/packages/webpage-refactor/components/comparisonActuator.js b/packages/webpage-refactor/components/comparisonActuator.js index 1e898c7..915c342 100644 --- a/packages/webpage-refactor/components/comparisonActuator.js +++ b/packages/webpage-refactor/components/comparisonActuator.js @@ -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) => - await setComparisonString(event.target.value); + const onChangeComparisonString = async (event) => { + if (!isListOrdered) { + await setComparisonString(event.target.value); + } + }; const onClickSubmitEvent = (event) => { // console.log(event.target.value); - moveToNextStep({ - listOfElements, - pairCurrentlyBeingCompared, - comparisonString, - }); - setComparisonString(initialComparisonString); + if (!isListOrdered) { + moveToNextStep({ + listOfElements, + pairCurrentlyBeingCompared, + comparisonString, + }); + setComparisonString(initialComparisonString); + } }; return ( @@ -29,6 +35,7 @@ export function ComparisonActuator({ {`... is `}
{ 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 cytoscapeStylesheet = [ + { + selector: "node", + style: { + padding: "25px", + shape: "round-rectangle", + content: "data(id)", + "background-color": "data(color)", + "text-wrap": "wrap", + //"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, + }, + }, + { + selector: "edge", + style: { + "curve-style": "unbundled-bezier", + "target-arrow-shape": "vee", + width: 1.5, + "target-arrow-color": "green", + "arrow-scale": 3, + "target-arrow-fill": "filled", + "text-rotation": "autorotate", + "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: [ - { - selector: "node", - style: { - content: "data(id)", - "background-color": "darkgreen", - "text-wrap": "wrap", - "text-max-width": 200, - "source-text-offset": 20, - //"text-valign": "bottom", - "text-justification": "auto", - }, - padding: 2, - }, - { - selector: "edge", - style: { - label: "data(label)", // maps to data.label - labelColor: "blue", - "curve-style": "unbundled-bezier", - "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, - }, - }, - ], + 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 (
-
+
diff --git a/packages/webpage-refactor/components/homepage.js b/packages/webpage-refactor/components/homepage.js index a1053ae..4afd939 100644 --- a/packages/webpage-refactor/components/homepage.js +++ b/packages/webpage-refactor/components/homepage.js @@ -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} />
- +
); } diff --git a/packages/webpage-refactor/data/listOfObjects.json b/packages/webpage-refactor/data/listOfObjects.json new file mode 100644 index 0000000..fc1913d --- /dev/null +++ b/packages/webpage-refactor/data/listOfObjects.json @@ -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" + } +] diff --git a/packages/webpage-refactor/lib/pushToMongo.js b/packages/webpage-refactor/lib/pushToMongo.js new file mode 100644 index 0000000..d64f577 --- /dev/null +++ b/packages/webpage-refactor/lib/pushToMongo.js @@ -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() diff --git a/packages/webpage-refactor/lib/truncateNums.js b/packages/webpage-refactor/lib/truncateNums.js index 63a2dc7..81df188 100644 --- a/packages/webpage-refactor/lib/truncateNums.js +++ b/packages/webpage-refactor/lib/truncateNums.js @@ -7,6 +7,8 @@ let topOutAt100AndValidate = (x) => { } }; +export const toLocale = (x) => Number(x).toLocaleString(); + export const truncateValueForDisplay = (value) => { let result; if (value > 10) { diff --git a/packages/webpage-refactor/package.json b/packages/webpage-refactor/package.json index 37cba5c..288a000 100644 --- a/packages/webpage-refactor/package.json +++ b/packages/webpage-refactor/package.json @@ -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", diff --git a/packages/webpage-refactor/pages/index.js b/packages/webpage-refactor/pages/index.js index 22c229f..e9fa96c 100644 --- a/packages/webpage-refactor/pages/index.js +++ b/packages/webpage-refactor/pages/index.js @@ -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() { diff --git a/packages/webpage-refactor/yarn.lock b/packages/webpage-refactor/yarn.lock index 5a35727..039d695 100644 --- a/packages/webpage-refactor/yarn.lock +++ b/packages/webpage-refactor/yarn.lock @@ -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"