From a1c255b2d3a782e47b5da414f4e881fe9a9e19d6 Mon Sep 17 00:00:00 2001 From: NunoSempere Date: Mon, 20 Jun 2022 01:35:48 -0400 Subject: [PATCH] feat: Display squiggle chart on hover. --- .../advancedOptions/advancedOptions.js | 2 - .../advancedOptions/comparisonsChanger.js | 2 +- .../advancedOptions/datasetChanger.js | 2 +- .../components/dynamicSquiggleChart.js | 80 ++ .../components/graph/graph.js | 39 +- .../webpage-refactor/components/homepage.js | 8 +- .../{squiggle.js => squiggleCalculations.js} | 0 packages/webpage-refactor/package.json | 1 + packages/webpage-refactor/yarn.lock | 1073 ++++++++++++++++- 9 files changed, 1181 insertions(+), 26 deletions(-) create mode 100644 packages/webpage-refactor/components/dynamicSquiggleChart.js rename packages/webpage-refactor/lib/{squiggle.js => squiggleCalculations.js} (100%) diff --git a/packages/webpage-refactor/components/advancedOptions/advancedOptions.js b/packages/webpage-refactor/components/advancedOptions/advancedOptions.js index ed816c3..f52f164 100644 --- a/packages/webpage-refactor/components/advancedOptions/advancedOptions.js +++ b/packages/webpage-refactor/components/advancedOptions/advancedOptions.js @@ -40,7 +40,6 @@ export function AdvancedOptions({ return (
-
{/* Show advanced options*/} -
{/* Toggle buttons */}
{buttonNames.map((buttonName, i) => { diff --git a/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js b/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js index f511001..74b42bc 100644 --- a/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js +++ b/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 " />
diff --git a/packages/webpage-refactor/components/advancedOptions/datasetChanger.js b/packages/webpage-refactor/components/advancedOptions/datasetChanger.js index d80c3c8..cb765fa 100644 --- a/packages/webpage-refactor/components/advancedOptions/datasetChanger.js +++ b/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 " />
diff --git a/packages/webpage-refactor/components/dynamicSquiggleChart.js b/packages/webpage-refactor/components/dynamicSquiggleChart.js new file mode 100644 index 0000000..b865518 --- /dev/null +++ b/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: () =>

Loading...

, + 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 ? ( + "" + ) : ( + /*{ +
+ + +
+ + }*/ +
+