81 lines
2.0 KiB
JavaScript
81 lines
2.0 KiB
JavaScript
|
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;
|
||
|
|
*/
|
||
|
|
}
|
||
|
|
}
|