feat: Display squiggle chart on hover.

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

@@ -40,7 +40,6 @@ export function AdvancedOptions({
 
   return (
     <div className="">
-      <br />
       {/* Show advanced options*/}
       <button
         key={"advancedOptionsButton-top"}
@@ -49,7 +48,6 @@ export function AdvancedOptions({
       >
         Advanced options ▼
       </button>
-      <br />
       {/* Toggle  buttons */}
       <div className={showAdvancedOptions ? "" : "hidden"}>
         {buttonNames.map((buttonName, i) => {

packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js

@@ -80,7 +80,7 @@ export function ComparisonsChanger({
         value={value}
         onChange={handleTextChange}
         rows={4 + JSON.stringify(links, null, 4).split("\n").length}
-        cols={90}
+        cols={70}
         className="text-left text-gray-600 bg-white rounded text-normal p-10 border-0 shadow outline-none focus:outline-none focus:ring "
       />
       <br />

packages/webpage-refactor/components/advancedOptions/datasetChanger.js

@@ -60,7 +60,7 @@ export function DataSetChanger({ onChangeOfDataset, show, listOfElements }) {
           rows={
             1.2 * JSON.stringify(listOfElements, null, 4).split("\n").length
           }
-          cols={90}
+          cols={70}
           className="text-left text-gray-600 bg-white rounded text-normal p-10 border-0 shadow outline-none focus:outline-none focus:ring "
         />
         <br />

packages/webpage-refactor/components/dynamicSquiggleChart.js

@@ -0,0 +1,80 @@
+import React from "react";
+// import { SquiggleChart } from "@quri/squiggle-components";
+
+import dynamic from "next/dynamic";
+
+const SquiggleChart = dynamic(
+  () => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
+  {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  }
+);
+/*
+const SquiggleChart = dynamic(
+  () => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
+  {
+    suspense: true,
+    ssr: false,
+  }
+);
+*/
+
+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";
+
+export function DynamicSquiggleChart({ link, stopShowing }) {
+  let usefulLink = {
+    source: link.source,
+    target: link.target,
+    squiggleString: link.squiggleString,
+  };
+  return link == null ? (
+    ""
+  ) : (
+    /*{
+          <div className="grid grid-cols-1 grid-rows-1 place-items-center">
+
+     
+          </div>
+
+      }*/
+    <div className="">
+      <textarea
+        value={JSON.stringify(usefulLink, null, 4)}
+        //onChange={handleChange}
+        disabled={true}
+        rows={JSON.stringify(usefulLink, null, 4).split("\n").length}
+        cols={37}
+        className="text-left text-gray-600 bg-white rounded text-normal p-6  border-0 shadow outline-none focus:outline-none focus:ring mb-4"
+      />
+      <SquiggleChart
+        squiggleString={link.squiggleString}
+        width={445}
+        height={200}
+        showSummary={true}
+        showTypes={true}
+      />
+      <button className={effectButtonStyle} onClick={() => stopShowing()}>
+        Hide chart
+      </button>
+    </div>
+  );
+  {
+    /*
+    SquiggleChart props:
+    squiggleString?: string;
+    sampleCount?: number;
+    environment?: environment;
+    chartSettings?: FunctionChartSettings;
+    onChange?(expr: squiggleExpression): void;
+    width?: number;
+    height?: number;
+    bindings?: bindings;
+    jsImports?: jsImports;
+    showSummary?: boolean;
+    showTypes?: boolean;
+    showControls?: boolean;
+    */
+  }
+}

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

@@ -2,10 +2,11 @@ import React, { useEffect, useState, useRef } from "react";
 import colormap from "colormap";
 import cytoscape from "cytoscape";
 
+import { DynamicSquiggleChart } from "../dynamicSquiggleChart.js";
 import {
   resolveToNumIfPossible,
   getSquiggleSparkline,
-} from "../../lib/squiggle.js";
+} from "../../lib/squiggleCalculations.js";
 import { truncateValueForDisplay } from "../../lib/truncateNums.js";
 import { cutOffLongNames } from "../../lib/stringManipulations.js";
 
@@ -68,6 +69,8 @@ export function Graph({
   const containerRef = useRef("hello-world");
   const [visibility, setVisibility] = useState(""); /// useState("invisible");
   const [cs, setCs] = useState(null); /// useState("invisible");
+  const [selectedLink, setSelectedLink] = useState(null);
+  const [selectedLinkTimeout, setSelectedLinkTimeout] = useState(null);
 
   const callEffect = async ({
     listOfElements,
@@ -109,6 +112,7 @@ export function Graph({
             source: cutOffLongNames(link.source),
             target: cutOffLongNames(link.target),
             label: await getEdgeLabel(link.squiggleString),
+            squiggleString: link.squiggleString,
           },
         };
       })
@@ -198,25 +202,44 @@ export function Graph({
       isListOrdered,
       listAfterMergeSort,
     });
-  }, [listOfElements, links, isListOrdered, listAfterMergeSort]);
+  }, [listOfElements, links, isListOrdered, listAfterMergeSort, selectedLink]);
 
   useEffect(() => {
     if (cs != null) {
-      cs.edges().on("click", (event) => {
-        let edge = event.target;
-        alert(JSON.stringify(edge.json()));
-      });
+      clearTimeout(selectedLinkTimeout);
+      let newTimeout = setTimeout(() => {
+        cs.edges().on("mouseover", (event) => {
+          // on("click",
+          let edge = event.target;
+          // alert(JSON.stringify(edge.json()));
+          console.log(JSON.stringify(edge.json()));
+          setSelectedLink(JSON.parse(JSON.stringify(edge.json())).data);
+        });
+      }, 100);
+      setSelectedLinkTimeout(newTimeout);
     }
   }, [cs]);
   return (
-    <div className="">
-      <div className={visibility + "grid grid-cols-1 place-items-center "}>
+    <div className="grid place-items-center">
+      <div
+        className={
+          visibility +
+          `grid grid-cols-${
+            selectedLink == null ? "1 " : "2"
+          } place-items-center place-self-center space-x-0 w-10/12 `
+        }
+      >
         <div
           ref={containerRef}
           style={{
             height: "900px", // isListOrdered ? "900px" : "500px",
             width: "900px", // isListOrdered ? "900px" : "500px",
           }}
+          className=""
+        />
+        <DynamicSquiggleChart
+          link={selectedLink}
+          stopShowing={() => setSelectedLink(null)}
         />
       </div>
       <button

packages/webpage-refactor/components/homepage.js

@@ -11,7 +11,7 @@ import { ResultsTable } from "./resultsTable.js";
 import { AdvancedOptions } from "./advancedOptions/advancedOptions.js";
 import { Graph } from "./graph/graph.js";
 import { pushToMongo } from "../lib/pushToMongo.js";
-import { resolveToNumIfPossible } from "../lib/squiggle.js";
+import { resolveToNumIfPossible } from "../lib/squiggleCalculations.js";
 
 export function Homepage({ listOfElementsInit }) {
   const SLICE = false;
@@ -120,8 +120,10 @@ export function Homepage({ listOfElementsInit }) {
       />
 
       {/* Comparisons section */}
-      <div className={"" /*isListOrdered ? "hidden" : ""*/}>
-        <div className="flex justify-evenly mt-10">
+      <div
+        className={"grid place-items-center" /*isListOrdered ? "hidden" : ""*/}
+      >
+        <div className="grid grid-rows-1 grid-cols-3 place-items-center w-6/11 mt-10">
           <DisplayElementForComparison
             element={pairCurrentlyBeingCompared[0]}
           ></DisplayElementForComparison>

packages/webpage-refactor/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@nextui-org/react": "^1.0.0-beta.9",
+    "@quri/squiggle-components": "^0.2.22",
     "@quri/squiggle-lang": "^0.2.11",
     "axios": "^0.21.4",
     "colormap": "^2.3.2",