Refactored SquigglePlayground a bit
This commit is contained in:
Ozzie Gooen
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,51 +197,171 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let tab = (key: string, iconName: string) => {
|
let samplingSettings = (
|
||||||
let iconStyle = (isSelected: boolean) =>
|
<div className="space-y-6 p-3">
|
||||||
classNames(
|
<InputItem label="Sample Count">
|
||||||
"-ml-0.5 mr-2 h-4 w-4 ",
|
<>
|
||||||
isSelected
|
<input
|
||||||
? "text-slate-500"
|
type="number"
|
||||||
: "text-gray-400 group-hover:text-gray-900"
|
{...register("sampleCount")}
|
||||||
);
|
className={numberStyle}
|
||||||
|
/>
|
||||||
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
|
How many samples to use for Monte Carlo simulations. This can
|
||||||
|
occasionally be overridden by specific Squiggle programs.
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
</InputItem>
|
||||||
|
<InputItem label="Coordinate Count (For PointSet Shapes)">
|
||||||
|
<>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
{...register("xyPointLength")}
|
||||||
|
className={numberStyle}
|
||||||
|
/>
|
||||||
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
|
When distributions are converted into PointSet shapes, we need to
|
||||||
|
know how many coordinates to use.
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
</InputItem>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
let icon = (selected: boolean) =>
|
let viewSettings = (
|
||||||
({
|
<div className="space-y-6 divide-y divide-gray-200">
|
||||||
code: <CodeIcon className={iconStyle(selected)} />,
|
<div className="space-y-2">
|
||||||
cog: <CogIcon className={iconStyle(selected)} />,
|
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
||||||
squareBar: <ChartSquareBarIcon className={iconStyle(selected)} />,
|
General Display Settings
|
||||||
dollar: <CurrencyDollarIcon className={iconStyle(selected)} />,
|
</h3>
|
||||||
}[iconName]);
|
<InputItem label="Chart Height (in pixels)">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
{...register("chartHeight")}
|
||||||
|
className={numberStyle}
|
||||||
|
/>
|
||||||
|
</InputItem>
|
||||||
|
<div className="relative flex items-start pt-3">
|
||||||
|
<div className="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
{...register("showTypes")}
|
||||||
|
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="ml-3 text-sm">
|
||||||
|
<label className="font-medium text-gray-700">
|
||||||
|
Show information about displayed types.
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
return (
|
<div className="space-y-2 pt-8">
|
||||||
<Tab key={key} as={Fragment}>
|
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
||||||
{({ selected }) => (
|
Distribution Display Settings
|
||||||
<button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
|
</h3>
|
||||||
<span
|
|
||||||
className={classNames(
|
<div className="relative flex items-start">
|
||||||
"p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
|
<div className="flex items-center h-5">
|
||||||
selected
|
<input
|
||||||
? "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
|
type="checkbox"
|
||||||
: ""
|
{...register("showControls")}
|
||||||
)}
|
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||||
>
|
/>
|
||||||
{icon(selected)}
|
</div>
|
||||||
<span
|
<div className="ml-3 text-sm">
|
||||||
className={
|
<label className="font-medium text-gray-700">
|
||||||
selected
|
Show toggles to adjust scale of x and y axes
|
||||||
? "text-gray-900"
|
</label>
|
||||||
: "text-gray-600 group-hover:text-gray-900"
|
</div>
|
||||||
}
|
</div>
|
||||||
>
|
<div className="relative flex items-start">
|
||||||
{key}
|
<div className="flex items-center h-5">
|
||||||
</span>
|
<input
|
||||||
</span>
|
type="checkbox"
|
||||||
</button>
|
{...register("showSummary")}
|
||||||
|
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="ml-3 text-sm">
|
||||||
|
<label className="font-medium text-gray-700">
|
||||||
|
Show summary statistics
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2 pt-8">
|
||||||
|
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
||||||
|
Function Display Settings
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
|
When displaying functions of single variables that return numbers or
|
||||||
|
distributions, we need to use defaults for the x-axis. We need to
|
||||||
|
select a minimum and maximum value of x to sample, and a number n of
|
||||||
|
the number of points to sample.
|
||||||
|
</p>
|
||||||
|
<div className="pt-4 grid grid-cols-1 gap-y-4 gap-x-4">
|
||||||
|
<InputItem label="Min X Value">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
{...register("diagramStart")}
|
||||||
|
className={numberStyle}
|
||||||
|
/>
|
||||||
|
</InputItem>
|
||||||
|
<InputItem label="Max X Value">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
{...register("diagramStop")}
|
||||||
|
className={numberStyle}
|
||||||
|
/>
|
||||||
|
</InputItem>
|
||||||
|
<InputItem label="Points between X min and X max to sample">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
{...register("diagramCount")}
|
||||||
|
className={numberStyle}
|
||||||
|
/>
|
||||||
|
</InputItem>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
let inputVariableSettings = (
|
||||||
|
<>
|
||||||
|
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
Import Variables from JSON
|
||||||
|
</h3>
|
||||||
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
|
You can import variables from JSON into your Squiggle code. Variables
|
||||||
|
are accessed with dollar signs. For example, "timeNow" would be accessed
|
||||||
|
as "$timeNow".
|
||||||
|
</p>
|
||||||
|
<div className="border border-slate-200 mt-6 mb-2">
|
||||||
|
<JsonEditor
|
||||||
|
value={importString}
|
||||||
|
onChange={getChangeJson}
|
||||||
|
oneLine={false}
|
||||||
|
showGutter={true}
|
||||||
|
height={150}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-1 pt-2">
|
||||||
|
{importsAreValid ? (
|
||||||
|
<SuccessAlert heading="Valid Json">
|
||||||
|
<></>
|
||||||
|
</SuccessAlert>
|
||||||
|
) : (
|
||||||
|
<ErrorAlert heading="Invalid JSON">
|
||||||
|
You must use valid json in this editor.
|
||||||
|
</ErrorAlert>
|
||||||
)}
|
)}
|
||||||
</Tab>
|
</div>
|
||||||
);
|
</>
|
||||||
};
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tab.Group>
|
<Tab.Group>
|
||||||
|
|
@ -224,175 +388,9 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Tab.Panel>
|
</Tab.Panel>
|
||||||
|
<Tab.Panel>{samplingSettings}</Tab.Panel>
|
||||||
<Tab.Panel>
|
<Tab.Panel>{viewSettings}</Tab.Panel>
|
||||||
<div className="space-y-6 p-3">
|
<Tab.Panel>{inputVariableSettings}</Tab.Panel>
|
||||||
<InputItem label="Sample Count">
|
|
||||||
<>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
{...register("sampleCount")}
|
|
||||||
className={numberStyle}
|
|
||||||
/>
|
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
|
||||||
How many samples to use for Monte Carlo simulations.
|
|
||||||
This can occasionally be overridden by specific Squiggle
|
|
||||||
programs.
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
</InputItem>
|
|
||||||
<InputItem label="Coordinate Count (For PointSet Shapes)">
|
|
||||||
<>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
{...register("xyPointLength")}
|
|
||||||
className={numberStyle}
|
|
||||||
/>
|
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
|
||||||
When distributions are converted into PointSet shapes,
|
|
||||||
we need to know how many coordinates to use.
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
</InputItem>
|
|
||||||
</div>
|
|
||||||
</Tab.Panel>
|
|
||||||
|
|
||||||
<Tab.Panel>
|
|
||||||
<div className="space-y-6 divide-y divide-gray-200">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
|
||||||
General Display Settings
|
|
||||||
</h3>
|
|
||||||
<InputItem label="Chart Height (in pixels)">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
{...register("chartHeight")}
|
|
||||||
className={numberStyle}
|
|
||||||
/>
|
|
||||||
</InputItem>
|
|
||||||
<div className="relative flex items-start pt-3">
|
|
||||||
<div className="flex items-center h-5">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
{...register("showTypes")}
|
|
||||||
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="ml-3 text-sm">
|
|
||||||
<label className="font-medium text-gray-700">
|
|
||||||
Show information about displayed types.
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2 pt-8">
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
|
||||||
Distribution Display Settings
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="flex items-center h-5">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
{...register("showControls")}
|
|
||||||
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="ml-3 text-sm">
|
|
||||||
<label className="font-medium text-gray-700">
|
|
||||||
Show toggles to adjust scale of x and y axes
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="flex items-center h-5">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
{...register("showSummary")}
|
|
||||||
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="ml-3 text-sm">
|
|
||||||
<label className="font-medium text-gray-700">
|
|
||||||
Show summary statistics
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2 pt-8">
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
|
|
||||||
Function Display Settings
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
|
||||||
When displaying functions of single variables that return
|
|
||||||
numbers or distributions, we need to use defaults for the
|
|
||||||
x-axis. We need to select a minimum and maximum value of x
|
|
||||||
to sample, and a number n of the number of points to
|
|
||||||
sample.
|
|
||||||
</p>
|
|
||||||
<div className="pt-4 grid grid-cols-1 gap-y-4 gap-x-4">
|
|
||||||
<InputItem label="Min X Value">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
{...register("diagramStart")}
|
|
||||||
className={numberStyle}
|
|
||||||
/>
|
|
||||||
</InputItem>
|
|
||||||
<InputItem label="Max X Value">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
{...register("diagramStop")}
|
|
||||||
className={numberStyle}
|
|
||||||
/>
|
|
||||||
</InputItem>
|
|
||||||
<InputItem label="Points between X min and X max to sample">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
{...register("diagramCount")}
|
|
||||||
className={numberStyle}
|
|
||||||
/>
|
|
||||||
</InputItem>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Tab.Panel>
|
|
||||||
|
|
||||||
<Tab.Panel>
|
|
||||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
|
||||||
Import Variables from JSON
|
|
||||||
</h3>
|
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
|
||||||
You can import variables from JSON into your Squiggle code.
|
|
||||||
Variables are accessed with dollar signs. For example,
|
|
||||||
"timeNow" would be accessed as "$timeNow".
|
|
||||||
</p>
|
|
||||||
<>
|
|
||||||
|
|
||||||
<div className="border border-slate-200 mt-6 mb-2">
|
|
||||||
<JsonEditor
|
|
||||||
value={importString}
|
|
||||||
onChange={getChangeJson}
|
|
||||||
oneLine={false}
|
|
||||||
showGutter={true}
|
|
||||||
height={150}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="p-1 pt-2">
|
|
||||||
{importsAreValid ? (
|
|
||||||
<SuccessAlert heading="Valid Json">
|
|
||||||
<></>
|
|
||||||
</SuccessAlert>
|
|
||||||
) : (
|
|
||||||
<ErrorAlert heading="Invalid JSON">
|
|
||||||
You must use valid json in this editor.
|
|
||||||
</ErrorAlert>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
</Tab.Panel>
|
|
||||||
</Tab.Panels>
|
</Tab.Panels>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user