feat: Display squiggle chart on hover.
This commit is contained in:
parent
a1fb0dd2ca
commit
a1c255b2d3
|
@ -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) => {
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
80
packages/webpage-refactor/components/dynamicSquiggleChart.js
Normal file
80
packages/webpage-refactor/components/dynamicSquiggleChart.js
Normal 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;
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
Loading…
Reference in New Issue
Block a user