feat: Display squiggle chart on hover.

This commit is contained in:
NunoSempere 2022-06-20 01:35:48 -04:00
parent a1fb0dd2ca
commit a1c255b2d3
9 changed files with 1181 additions and 26 deletions

View File

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

View File

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

View File

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

View File

@ -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;
*/
}
}

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff