feat: working graph

2022-06-17 23:20:44 -04:00 · 2022-06-17 23:20:44 -04:00 · 334dd73633
commit 334dd73633
parent e8cdf2ac7c
11 changed files with 492 additions and 23 deletions
--- a/packages/webpage-refactor/components/graph/graph.js
+++ b/packages/webpage-refactor/components/graph/graph.js
@ -1,19 +1,135 @@
-import React, { useEffect } from "react";
-/*
-import ReactDOM from "react-dom";
-import * as d3 from "d3";
-import { graphviz } from "d3-graphviz";
-*/
+import React, { useEffect, useState, useRef } from "react";
+import cytoscape from "cytoscape";
+import spread from "cytoscape-spread";
+import {
+  resolveToNumIfPossible,
+  getSquiggleSparkline,
+} from "../../lib/squiggle.js";
+import { truncateValueForDisplay } from "../../lib/truncateNums.js";

-export function Graph() {
-  return "Hello";
-  /*
-    let digraph = `digraph {
-    a -> b
-  }`;
-  useEffect(() => {
-    d3.select("#graph").graphviz().renderDot(digraph);
-  }, []);
-  return <div id="graph" />;
-*/
+// import dagre from "cytoscape-dagre";
+// import cola from "cytoscape-cola";
+// import fcose from "cytoscape-fcose";
+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";
+
+const getEdgeLabel = async (squiggleString) => {
+  let sparkline = await getSquiggleSparkline(squiggleString);
+  let num = await resolveToNumIfPossible(squiggleString);
+
+  let sparklineConcat = "";
+  if (false && sparkline.success) {
+    console.log(sparkline);
+
+    sparklineConcat =
+      sparklineConcat +
+      " →" +
+      sparkline.sparkline.replace("▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁", "");
+    //alert("▁▁▁▁▁▁▁▁▁▁▁");
+  }
+  if (num.asNum) {
+    sparklineConcat =
+      sparklineConcat + " ⇾ " + truncateValueForDisplay(num.num);
+    //alert("▁▁▁▁▁▁▁▁▁▁▁");
+  }
+
+  return squiggleString + sparklineConcat; //sparkline;
+};
+
+export function Graph({ listOfElements, links }) {
+  const containerRef = useRef();
+
+  const callEffect = async (listOfElements, links) => {
+    cytoscape.use(spread); // spread
+
+    let nodeElements = listOfElements.map((element) => {
+      return { data: { id: element.name } };
+    });
+    let linkElements = await Promise.all(
+      links.map(async (link, i) => {
+        return {
+          data: {
+            id: `link-${i}`,
+            source: link.source,
+            target: link.target,
+            label: await getEdgeLabel(link.squiggleString),
+          },
+        };
+      })
+    );
+    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: 10,
+        },
+        {
+          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,
+          },
+        },
+      ],
+      elements: [
+        /* Dummy data:
+        { data: { id: "n1" } },
+        { data: { id: "n2" } },
+        { data: { id: "e1", source: "n1", target: "n2" } },
+        
+        Real data:*/
+        ...nodeElements,
+        ...linkElements,
+      ],
+      layout: {
+        name: "spread", // circle, grid, dagre
+        minDist: 10,
+        //prelayout: false,
+        //animate: "end", // whether to transition the node positions
+        animationDuration: 0, // duration of animation in ms if enabled
+      },
+      userZoomingEnabled: false,
+      userPanningEnabled: false,
+    };
+    cytoscape(config);
+  };
+  useEffect(async () => {
+    await callEffect(listOfElements, links);
+    // console.log(JSON.stringify(config, null, 10));
+  }, [listOfElements, links]);
+
+  return (
+    <div>
+      <div ref={containerRef} style={{ height: "700px", width: "1000px" }} />
+      <button
+        className={effectButtonStyle}
+        onClick={() => callEffect(listOfElements, links)}
+      >
+        {"Redraw graph"}
+      </button>
+    </div>
+  );
 }
--- a/packages/webpage-refactor/components/graph/graph1.js
+++ b/packages/webpage-refactor/components/graph/graph1.js
@ -0,0 +1,89 @@
+import { SimpleReactCytoscape } from "simple-react-cytoscape";
+import { Core } from "cytoscape";
+import { useCallback, useState } from "react";
+
+/*
+const elements = [
+  // list of graph elements to start with
+  {
+    // node a
+    data: { id: "a" },
+  },
+  {
+    // node b
+    data: { id: "b" },
+  },
+  {
+    // node c
+    data: { id: "c" },
+  },
+  {
+    // edge ab
+    data: { id: "ab", source: "a", target: "b" },
+  },
+  {
+    // edge ab
+    data: { id: "ac", source: "a", target: "c" },
+  },
+];
+*/
+
+const style = [
+  // the stylesheet for the graph
+  {
+    selector: "node",
+    style: {
+      "background-color": "#666",
+      label: "data(id)",
+    },
+  },
+
+  {
+    selector: "edge",
+    style: {
+      width: 3,
+      "line-color": "#ccc",
+      "target-arrow-color": "#ccc",
+      "target-arrow-shape": "triangle",
+      "curve-style": "bezier",
+    },
+  },
+];
+
+export function Graph({ listOfElements, links }) {
+  const [myCy, setMyCy] = useState();
+
+  const cyCallback = useCallback(
+    (cy) => {
+      setMyCy(cy);
+    },
+    [listOfElements, links]
+  );
+
+  let nodeElements = listOfElements.map((element) => {
+    return { data: { id: element.name } };
+  });
+  let linkElements = links.map((link, i) => {
+    return {
+      data: {
+        id: `link-i`,
+        source: link.source,
+        target: link.target,
+        label: link.distance,
+      },
+    };
+  });
+  let elements = [...nodeElements, ...linkElements];
+  let options = {
+    elements,
+    style,
+  };
+  return (
+    <div className="App">
+      <p>"a"</p>
+      <SimpleReactCytoscape options={options} cyCallback={cyCallback} />
+      <h3>JSON representation</h3>
+      {/*<p>{myCy && JSON.stringify(myCy.json())}</p>*/}
+    </div>
+  );
+}
--- a/packages/webpage-refactor/components/graph/graph3.js
+++ b/packages/webpage-refactor/components/graph/graph3.js
@ -0,0 +1,30 @@
+import React, { useEffect, useMemo, useState } from "react";
+import cytoscape from "cytoscape";
+
+export function Graph({ listOfElements, links, options, getCy }) {
+  const [cy, setCy] = useState();
+  const id = useRef("cytoscape-id");
+
+  useEffect(() => {
+    if (!cy) {
+      let container = null;
+      try {
+        container = document.getElementById(id) || undefined;
+      } catch (e) {
+        // Might be running Headless (the unit test are headless)
+        container = undefined;
+      }
+      const newCy = cytoscape({
+        ...options,
+        container,
+      });
+      setCy(newCy);
+      // If a callback was supplied we can now return the value
+      if (getCy) {
+        getCy(newCy);
+      }
+    }
+  }, [cy, getCy, id, options]);
+
+  return <div id={id} className="simple-react-cytoscape" />;
+}
--- a/packages/webpage-refactor/components/graph/style.css
+++ b/packages/webpage-refactor/components/graph/style.css
@ -0,0 +1,5 @@
+.simple-react-cytoscape {
+  width: 1500px;
+  height: 500px;
+  border-style: dashed;
+}
--- a/packages/webpage-refactor/components/homepage.js
+++ b/packages/webpage-refactor/components/homepage.js
@ -13,7 +13,7 @@ export function Homepage({ listOfElementsInit }) {

  // list of elements
  const [listOfElements, setListOfElements] = useState(
-    listOfElementsInit.slice(0, 3)
+    listOfElementsInit.slice(0, 5)
  );

  // number of steps
@ -110,7 +110,7 @@ export function Homepage({ listOfElementsInit }) {
        numElements={listOfElements.length}
      />
      {/* Comparisons section */}
-      <div className={isListOrdered ? "hidden" : ""}>
+      <div className={"" /*isListOrdered ? "hidden" : ""*/}>
        <div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10">
          <DisplayElementForComparison
            element={pairCurrentlyBeingCompared[0]}
@ -127,6 +127,10 @@ export function Homepage({ listOfElementsInit }) {
          ></DisplayElementForComparison>
        </div>
      </div>
+      {/* <Graph /> 
+      
+      */}
+
      {/* Advanced options section */}
      <div>
        <AdvancedOptions
@ -137,9 +141,8 @@ export function Homepage({ listOfElementsInit }) {
          onChangeOfDataset={onChangeOfDataset}
        />
      </div>
-      {/* <Graph /> 
-      <Graph />
-      */}
+
+      <Graph listOfElements={listOfElements} links={links} />
    </div>
  );
 }
--- a/packages/webpage-refactor/lib/squiggle.js
+++ b/packages/webpage-refactor/lib/squiggle.js
@ -27,3 +27,31 @@ export async function resolveToNumIfPossible(comparisonString) {
    return response;
  }
 }
+
+export async function getSquiggleSparkline(comparisonString) {
+  if (!isNaN(comparisonString) && comparisonString != "") {
+    let response = {
+      success: true,
+      sparkline: comparisonString,
+    };
+    return response;
+  }
+  let squiggleSparklineCommand = `sparkline(${comparisonString}, 20)`;
+  let squiggleResponse = await run(squiggleSparklineCommand);
+  console.log(squiggleResponse);
+  if (squiggleResponse.tag == "Ok") {
+    let responseAsNumber = squiggleResponse.value.value;
+    let response = {
+      success: true,
+      sparkline: responseAsNumber,
+    };
+    return response;
+  } else {
+    let errorMsg = squiggleResponse.value;
+    let response = {
+      success: false,
+      errorMsg: errorMsg,
+    };
+    return response;
+  }
+}
--- a/packages/webpage-refactor/lib/truncateNums.js
+++ b/packages/webpage-refactor/lib/truncateNums.js
@ -0,0 +1,25 @@
+export const truncateValueForDisplay = (value) => {
+  if (value > 10) {
+    return Number(Math.round(value).toPrecision(2));
+  } else if (value > 1) {
+    return Math.round(value * 10) / 10;
+  } else if (num > 0) {
+    let candidateNumSignificantDigits =
+      -Math.floor(Math.log(num) / Math.log(10)) + 1;
+    let numSignificantDigits = topOutAt100AndValidate(
+      candidateNumSignificantDigits
+    );
+    result = num.toFixed(numSignificantDigits);
+  } else if (-1 < num) {
+    let candidateNumSignificantDigits =
+      -Math.floor(Math.log(Math.abs(num)) / Math.log(10)) + 1;
+    let numSignificantDigits = topOutAt100AndValidate(
+      candidateNumSignificantDigits
+    );
+    result = num.toFixed(numSignificantDigits);
+  } else if (num <= -1) {
+    result = "-" + toLocale(truncateValueForDisplay(-num));
+  } else {
+    result = toLocale(num); //return "~0"
+  }
+};
--- a/packages/webpage-refactor/package.json
+++ b/packages/webpage-refactor/package.json
@ -10,6 +10,12 @@
  "dependencies": {
    "@quri/squiggle-lang": "^0.2.11",
    "axios": "^0.21.4",
+    "cytoscape": "^3.21.1",
+    "cytoscape-avsdf": "^1.0.0",
+    "cytoscape-cola": "^2.5.1",
+    "cytoscape-dagre": "^2.4.0",
+    "cytoscape-fcose": "^2.1.0",
+    "cytoscape-spread": "^3.0.0",
    "next": "latest",
    "path": "^0.12.7",
    "react": "^17.0.1",
@ -18,6 +24,7 @@
    "react-dom": "17.0.1",
    "react-markdown": "^6.0.2",
    "remark-gfm": "^1.0.0",
+    "simple-react-cytoscape": "^1.0.4",
    "utility-tools": "^0.2.2"
  },
  "devDependencies": {
--- a/packages/webpage-refactor/pages/_app.js
+++ b/packages/webpage-refactor/pages/_app.js
@ -1,6 +1,7 @@
 // import 'tailwindcss/tailwind.css'
 import "tailwindcss/tailwind.css";
 import "../styles/globals.css";
+import "../styles/cytoscape.css";
 import Head from "next/head";
 import { Title } from "../components/title.js";

--- a/packages/webpage-refactor/styles/cytoscape.css
+++ b/packages/webpage-refactor/styles/cytoscape.css
@ -0,0 +1,5 @@
+.simple-react-cytoscape {
+  width: 600px;
+  height: 600px;
+  border-style: dashed;
+}
--- a/packages/webpage-refactor/yarn.lock
+++ b/packages/webpage-refactor/yarn.lock
@ -741,6 +741,13 @@ autoprefixer@^10.4.0:
    picocolors "^1.0.0"
    postcss-value-parser "^4.2.0"

+avsdf-base@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/avsdf-base/-/avsdf-base-1.0.0.tgz#80c437d7d15d2bd201d9c31804e7b7a15a84781a"
+  integrity sha512-APhZNUFJwIwrLsSfE95QjobEntdUhFQgfNtC/BrYmjUpwHh5Y2fbRv8lxAlMr1hdf/CuQYsqJxK3dRzcCL77qw==
+  dependencies:
+    layout-base "^1.0.0"
+
 axios@^0.21.4:
  version "0.21.4"
  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
@ -1012,6 +1019,13 @@ core-util-is@~1.0.0:
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==

+cose-base@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-2.1.0.tgz#89b2d4a59d7bd0cde3138a4689825f3e8a5abd6a"
+  integrity sha512-HTMm07dhxq1dIPGWwpiVrIk9n+DH7KYmqWA786mLe8jDS+1ZjGtJGIIsJVKoseZXS6/FxiUWCJ2B7XzqUCuhPw==
+  dependencies:
+    layout-base "^2.0.0"
+
 cosmiconfig@^7.0.1:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
@ -1066,6 +1080,52 @@ cssfilter@0.0.10:
  resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
  integrity sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==

+cytoscape-avsdf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-avsdf/-/cytoscape-avsdf-1.0.0.tgz#6f079948021433e32fc30b1b0bcbf595f4b65ab0"
+  integrity sha512-Wzd2wmJgr4dK5avHy4nKHp3D8TBZ8H/+5Hq5o24bRdVTvXlhSDzQhAMtzOuhRPYwHcWB+cBhEAXboAK8n7zPTQ==
+  dependencies:
+    avsdf-base "^1.0.0"
+
+cytoscape-cola@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/cytoscape-cola/-/cytoscape-cola-2.5.1.tgz#1ec25dfd92533485f29943adf740ecd4feb2ea16"
+  integrity sha512-4/2S9bW1LvdsEPmxXN1OEAPFPbk7DvCx2c9d+TblkQAAvptGaSgtPWCByTEGgT8UxCxcVqes2aFPO5pzwo7R2w==
+  dependencies:
+    webcola "^3.4.0"
+
+cytoscape-dagre@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-dagre/-/cytoscape-dagre-2.4.0.tgz#abf145b1c675afe3b7d531166e6727dc39dc350d"
+  integrity sha512-jfOtKzKduCnruBs3YMHS9kqWjZKqvp6loSJwlotPO5pcU4wLUhkx7ZBIyW3VWZXa8wfkGxv/zhWoBxWtYrUxKQ==
+  dependencies:
+    dagre "^0.8.5"
+
+cytoscape-fcose@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-fcose/-/cytoscape-fcose-2.1.0.tgz#04c3093776ea6b71787009de641607db7d4edf55"
+  integrity sha512-Q3apPl66jf8/2sMsrCjNP247nbDkyIPjA9g5iPMMWNLZgP3/mn9aryF7EFY/oRPEpv7bKJ4jYmCoU5r5/qAc1Q==
+  dependencies:
+    cose-base "^2.0.0"
+
+cytoscape-spread@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-spread/-/cytoscape-spread-3.0.0.tgz#9d2cf43eee9a3b92dd518a4a2db8567584a1dd2e"
+  integrity sha512-ekuo4ByFRTZ4TOJylE2bPOMcVVyi8rD+qjvEjMWS2BHcyan40pmhlA4ramz/nTxZR+EtlxEa1asnmfiN8R5HyQ==
+  dependencies:
+    weaverjs "^1.2.0"
+
+cytoscape@^3.21.1:
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.21.1.tgz#2d3a8b8ade8661c9efab2e9bf7a354b374d6cf0e"
+  integrity sha512-mxdxCzuGHOMSWHUFO+/ZQPeMNtJAm81LGzdwP02LhT592ZRfHWCvHUY++HpnSjg/SgrKg1CMqegY/HvYLUS1qg==
+  dependencies:
+    heap "^0.2.6"
+    lodash.debounce "^4.0.8"
+    lodash.get "^4.4.2"
+    lodash.set "^4.3.2"
+    lodash.topath "^4.5.2"
+
 d3-array@^2.8.0:
  version "2.12.1"
  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
@ -1073,6 +1133,49 @@ d3-array@^2.8.0:
  dependencies:
    internmap "^1.0.0"

+d3-dispatch@1, d3-dispatch@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58"
+  integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
+
+d3-drag@^1.0.4:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.5.tgz#2537f451acd39d31406677b7dc77c82f7d988f70"
+  integrity sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==
+  dependencies:
+    d3-dispatch "1"
+    d3-selection "1"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-selection@1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c"
+  integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==
+
+d3-shape@^1.3.5:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+d3-timer@^1.0.5:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5"
+  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
+
+dagre@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.5.tgz#ba30b0055dac12b6c1fcc247817442777d06afee"
+  integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
+  dependencies:
+    graphlib "^2.1.8"
+    lodash "^4.17.15"
+
 debug@^2.6.9:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -1402,6 +1505,13 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0:
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==

+graphlib@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.8.tgz#5761d414737870084c92ec7b5dbcb0592c9d35da"
+  integrity sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==
+  dependencies:
+    lodash "^4.17.15"
+
 h3@^0.2.10:
  version "0.2.12"
  resolved "https://registry.yarnpkg.com/h3/-/h3-0.2.12.tgz#019db8f0c6910e0dc79266857560e22b5ef2a5e3"
@ -1439,6 +1549,11 @@ hastscript@^5.0.0:
    property-information "^5.0.0"
    space-separated-tokens "^1.0.0"

+heap@^0.2.6:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
+  integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
+
 hex-color-regex@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
@ -1750,6 +1865,16 @@ jstat@^1.9.5:
  resolved "https://registry.yarnpkg.com/jstat/-/jstat-1.9.5.tgz#9941741566f683624ddeb56f5ba60ed8c29b374e"
  integrity sha512-cWnp4vObF5GmB2XsIEzxI/1ZTcYlcfNqxQ/9Fp5KFUa0Jf/4tO0ZkGVnqoEHDisJvYgvn5n3eWZbd2xTVJJPUQ==

+layout-base@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-1.0.2.tgz#1291e296883c322a9dd4c5dd82063721b53e26e2"
+  integrity sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==
+
+layout-base@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-2.0.1.tgz#d0337913586c90f9c2c075292069f5c2da5dd285"
+  integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==
+
 lilconfig@^2.0.5:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"
@ -1773,6 +1898,11 @@ listhen@^0.2.4, listhen@^0.2.6:
    selfsigned "^2.0.1"
    ufo "^0.8.4"

+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.defaults@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@ -1783,17 +1913,27 @@ lodash.flatten@^4.4.0:
  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
  integrity sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==

+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==
+
 lodash.isarguments@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
  integrity sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==

+lodash.set@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
+  integrity sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg==
+
 lodash.topath@^4.5.2:
  version "4.5.2"
  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
  integrity sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==

-lodash@^4.17.11, lodash@^4.17.21:
+lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -2812,6 +2952,11 @@ simple-get@^4.0.0, simple-get@^4.0.1:
    once "^1.3.1"
    simple-concat "^1.0.0"

+simple-react-cytoscape@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/simple-react-cytoscape/-/simple-react-cytoscape-1.0.4.tgz#6a2b40711d1942de497e1e8623b568b45f0baad9"
+  integrity sha512-gb0Biod8KyjdZS+PXhZcxKwd06VdsEyh22Wm1RyvKfeV5L1Tb5EZvnimrvuBYurn1mhAnh0PUyFPPIHiN9N9AQ==
+
 simple-swizzle@^0.2.2:
  version "0.2.2"
  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@ -3164,6 +3309,21 @@ warning@^4.0.3:
  dependencies:
    loose-envify "^1.0.0"

+weaverjs@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/weaverjs/-/weaverjs-1.2.0.tgz#654c15cc735b660a1dae4c7c263cd7c746512fa0"
+  integrity sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw==
+
+webcola@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/webcola/-/webcola-3.4.0.tgz#490d26ae98e5b5109478b94a846a62ff6831a99d"
+  integrity sha512-4BiLXjXw3SJHo3Xd+rF+7fyClT6n7I+AR6TkBqyQ4kTsePSAMDLRCXY1f3B/kXJeP9tYn4G1TblxTO+jAt0gaw==
+  dependencies:
+    d3-dispatch "^1.0.3"
+    d3-drag "^1.0.4"
+    d3-shape "^1.3.5"
+    d3-timer "^1.0.5"
+
 webidl-conversions@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"