Refactored SquigglePlayground a bit
This commit is contained in:
parent
43643124e0
commit
70eecde587
|
@ -46,8 +46,10 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
|
||||||
let spec = buildVegaSpec(isLogX, isExpY);
|
let spec = buildVegaSpec(isLogX, isExpY);
|
||||||
let widthProp = width ? width : size.width;
|
let widthProp = width ? width : size.width;
|
||||||
if (widthProp < 20) {
|
if (widthProp < 20) {
|
||||||
console.warn(`Width of Distribution is set to ${widthProp}, which is too small`)
|
console.warn(
|
||||||
widthProp = 20
|
`Width of Distribution is set to ${widthProp}, which is too small`
|
||||||
|
);
|
||||||
|
widthProp = 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check whether we should disable the checkbox
|
// Check whether we should disable the checkbox
|
||||||
|
@ -170,9 +172,15 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
|
||||||
|
|
||||||
let TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
|
let TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
|
||||||
children,
|
children,
|
||||||
}) => <th className="border border-slate-400 bg-slate-50 p-4">{children}</th>;
|
}) => (
|
||||||
|
<th className="border border-slate-200 bg-slate-50 pt-1 pb-1 pl-2 pr-2 text-slate-500 font-semibold">
|
||||||
|
{children}
|
||||||
|
</th>
|
||||||
|
);
|
||||||
let Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
let Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||||
<td className="border border-slate-400 p-4">{children}</td>
|
<td className="border border-slate-200 pt-1 pb-1 pl-2 pr-2 text-slate-900 ">
|
||||||
|
{children}
|
||||||
|
</td>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -104,6 +104,50 @@ function classNames(...classes: string[]) {
|
||||||
return classes.filter(Boolean).join(" ");
|
return classes.filter(Boolean).join(" ");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let tab = (key: string, iconName: string) => {
|
||||||
|
let iconStyle = (isSelected: boolean) =>
|
||||||
|
classNames(
|
||||||
|
"-ml-0.5 mr-2 h-4 w-4 ",
|
||||||
|
isSelected ? "text-slate-500" : "text-gray-400 group-hover:text-gray-900"
|
||||||
|
);
|
||||||
|
|
||||||
|
let icon = (selected: boolean) =>
|
||||||
|
({
|
||||||
|
code: <CodeIcon className={iconStyle(selected)} />,
|
||||||
|
cog: <CogIcon className={iconStyle(selected)} />,
|
||||||
|
squareBar: <ChartSquareBarIcon className={iconStyle(selected)} />,
|
||||||
|
dollar: <CurrencyDollarIcon className={iconStyle(selected)} />,
|
||||||
|
}[iconName]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tab key={key} as={Fragment}>
|
||||||
|
{({ selected }) => (
|
||||||
|
<button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
|
||||||
|
<span
|
||||||
|
className={classNames(
|
||||||
|
"p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
|
||||||
|
selected
|
||||||
|
? "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
|
||||||
|
: ""
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{icon(selected)}
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
selected
|
||||||
|
? "text-gray-900"
|
||||||
|
: "text-gray-600 group-hover:text-gray-900"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{key}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</Tab>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
let SquigglePlayground: FC<PlaygroundProps> = ({
|
let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
initialSquiggleString = "",
|
initialSquiggleString = "",
|
||||||
height = 500,
|
height = 500,
|
||||||
|
@ -153,79 +197,7 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let tab = (key: string, iconName: string) => {
|
let samplingSettings = (
|
||||||
let iconStyle = (isSelected: boolean) =>
|
|
||||||
classNames(
|
|
||||||
"-ml-0.5 mr-2 h-4 w-4 ",
|
|
||||||
isSelected
|
|
||||||
? "text-slate-500"
|
|
||||||
: "text-gray-400 group-hover:text-gray-900"
|
|
||||||
);
|
|
||||||
|
|
||||||
let icon = (selected: boolean) =>
|
|
||||||
({
|
|
||||||
code: <CodeIcon className={iconStyle(selected)} />,
|
|
||||||
cog: <CogIcon className={iconStyle(selected)} />,
|
|
||||||
squareBar: <ChartSquareBarIcon className={iconStyle(selected)} />,
|
|
||||||
dollar: <CurrencyDollarIcon className={iconStyle(selected)} />,
|
|
||||||
}[iconName]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tab key={key} as={Fragment}>
|
|
||||||
{({ selected }) => (
|
|
||||||
<button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
|
|
||||||
<span
|
|
||||||
className={classNames(
|
|
||||||
"p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
|
|
||||||
selected
|
|
||||||
? "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
|
|
||||||
: ""
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{icon(selected)}
|
|
||||||
<span
|
|
||||||
className={
|
|
||||||
selected
|
|
||||||
? "text-gray-900"
|
|
||||||
: "text-gray-600 group-hover:text-gray-900"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{key}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</Tab>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tab.Group>
|
|
||||||
<div className=" flex-col flex">
|
|
||||||
<div className="pb-4">
|
|
||||||
<Tab.List className="p-0.5 rounded-md bg-slate-100 hover:bg-slate-200 inline-flex">
|
|
||||||
{tab("Code", "code")}
|
|
||||||
{tab("Sampling Settings", "cog")}
|
|
||||||
{tab("View Settings", "squareBar")}
|
|
||||||
{tab("Input Variables", "dollar")}
|
|
||||||
</Tab.List>
|
|
||||||
</div>
|
|
||||||
<div className="flex" style={{ height: height + "px" }}>
|
|
||||||
<div className="w-1/2">
|
|
||||||
<Tab.Panels>
|
|
||||||
<Tab.Panel>
|
|
||||||
<div className="border border-slate-200">
|
|
||||||
<CodeEditor
|
|
||||||
value={squiggleString}
|
|
||||||
onChange={setSquiggleString}
|
|
||||||
oneLine={false}
|
|
||||||
showGutter={true}
|
|
||||||
height={height - 1}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Tab.Panel>
|
|
||||||
|
|
||||||
<Tab.Panel>
|
|
||||||
<div className="space-y-6 p-3">
|
<div className="space-y-6 p-3">
|
||||||
<InputItem label="Sample Count">
|
<InputItem label="Sample Count">
|
||||||
<>
|
<>
|
||||||
|
@ -235,9 +207,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
className={numberStyle}
|
className={numberStyle}
|
||||||
/>
|
/>
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
How many samples to use for Monte Carlo simulations.
|
How many samples to use for Monte Carlo simulations. This can
|
||||||
This can occasionally be overridden by specific Squiggle
|
occasionally be overridden by specific Squiggle programs.
|
||||||
programs.
|
|
||||||
</p>
|
</p>
|
||||||
</>
|
</>
|
||||||
</InputItem>
|
</InputItem>
|
||||||
|
@ -249,15 +220,15 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
className={numberStyle}
|
className={numberStyle}
|
||||||
/>
|
/>
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
When distributions are converted into PointSet shapes,
|
When distributions are converted into PointSet shapes, we need to
|
||||||
we need to know how many coordinates to use.
|
know how many coordinates to use.
|
||||||
</p>
|
</p>
|
||||||
</>
|
</>
|
||||||
</InputItem>
|
</InputItem>
|
||||||
</div>
|
</div>
|
||||||
</Tab.Panel>
|
);
|
||||||
|
|
||||||
<Tab.Panel>
|
let viewSettings = (
|
||||||
<div className="space-y-6 divide-y divide-gray-200">
|
<div className="space-y-6 divide-y divide-gray-200">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
||||||
|
@ -327,11 +298,10 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
When displaying functions of single variables that return
|
When displaying functions of single variables that return numbers or
|
||||||
numbers or distributions, we need to use defaults for the
|
distributions, we need to use defaults for the x-axis. We need to
|
||||||
x-axis. We need to select a minimum and maximum value of x
|
select a minimum and maximum value of x to sample, and a number n of
|
||||||
to sample, and a number n of the number of points to
|
the number of points to sample.
|
||||||
sample.
|
|
||||||
</p>
|
</p>
|
||||||
<div className="pt-4 grid grid-cols-1 gap-y-4 gap-x-4">
|
<div className="pt-4 grid grid-cols-1 gap-y-4 gap-x-4">
|
||||||
<InputItem label="Min X Value">
|
<InputItem label="Min X Value">
|
||||||
|
@ -358,19 +328,18 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Tab.Panel>
|
);
|
||||||
|
|
||||||
<Tab.Panel>
|
let inputVariableSettings = (
|
||||||
|
<>
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||||
Import Variables from JSON
|
Import Variables from JSON
|
||||||
</h3>
|
</h3>
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
You can import variables from JSON into your Squiggle code.
|
You can import variables from JSON into your Squiggle code. Variables
|
||||||
Variables are accessed with dollar signs. For example,
|
are accessed with dollar signs. For example, "timeNow" would be accessed
|
||||||
"timeNow" would be accessed as "$timeNow".
|
as "$timeNow".
|
||||||
</p>
|
</p>
|
||||||
<>
|
|
||||||
|
|
||||||
<div className="border border-slate-200 mt-6 mb-2">
|
<div className="border border-slate-200 mt-6 mb-2">
|
||||||
<JsonEditor
|
<JsonEditor
|
||||||
value={importString}
|
value={importString}
|
||||||
|
@ -392,7 +361,36 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tab.Group>
|
||||||
|
<div className=" flex-col flex">
|
||||||
|
<div className="pb-4">
|
||||||
|
<Tab.List className="p-0.5 rounded-md bg-slate-100 hover:bg-slate-200 inline-flex">
|
||||||
|
{tab("Code", "code")}
|
||||||
|
{tab("Sampling Settings", "cog")}
|
||||||
|
{tab("View Settings", "squareBar")}
|
||||||
|
{tab("Input Variables", "dollar")}
|
||||||
|
</Tab.List>
|
||||||
|
</div>
|
||||||
|
<div className="flex" style={{ height: height + "px" }}>
|
||||||
|
<div className="w-1/2">
|
||||||
|
<Tab.Panels>
|
||||||
|
<Tab.Panel>
|
||||||
|
<div className="border border-slate-200">
|
||||||
|
<CodeEditor
|
||||||
|
value={squiggleString}
|
||||||
|
onChange={setSquiggleString}
|
||||||
|
oneLine={false}
|
||||||
|
showGutter={true}
|
||||||
|
height={height - 1}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</Tab.Panel>
|
</Tab.Panel>
|
||||||
|
<Tab.Panel>{samplingSettings}</Tab.Panel>
|
||||||
|
<Tab.Panel>{viewSettings}</Tab.Panel>
|
||||||
|
<Tab.Panel>{inputVariableSettings}</Tab.Panel>
|
||||||
</Tab.Panels>
|
</Tab.Panels>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user