tweaks

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

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 `}
           <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}

packages/webpage-refactor/components/graph/graph.js

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

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}
           />
 
           <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>
   );
 }

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

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

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

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",

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

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"