Refactored SquigglePlayground a bit

This commit is contained in:
Ozzie Gooen 2022-06-01 19:42:03 -07:00
parent 43643124e0
commit 70eecde587
2 changed files with 221 additions and 215 deletions

View File

@ -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 (

View File

@ -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>