Merge pull request #706 from quantified-uncertainty/playground-improvements-6-17-2022
Adds Editor toggle
This commit is contained in:
commit
5648865113
|
@ -243,8 +243,20 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
|
|||
</VariableBox>
|
||||
);
|
||||
}
|
||||
case "module": {
|
||||
return (
|
||||
<VariableBox heading="Module" showTypes={showTypes}>
|
||||
<span className="text-slate-600 font-semibold">Internal Module</span>
|
||||
</VariableBox>
|
||||
);
|
||||
}
|
||||
default: {
|
||||
return <>Should be unreachable</>;
|
||||
return (
|
||||
<div>
|
||||
<span>No display for type: </span>{" "}
|
||||
<span className="font-semibold text-slate-600">{expression.tag}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -9,6 +9,7 @@ import {
|
|||
CodeIcon,
|
||||
CogIcon,
|
||||
CurrencyDollarIcon,
|
||||
EyeIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
@ -31,6 +32,7 @@ interface PlaygroundProps {
|
|||
showControls?: boolean;
|
||||
/** Whether to show the summary table in the playground */
|
||||
showSummary?: boolean;
|
||||
showEditor?: boolean;
|
||||
}
|
||||
|
||||
const schema = yup
|
||||
|
@ -64,6 +66,7 @@ const schema = yup
|
|||
showTypes: yup.boolean(),
|
||||
showControls: yup.boolean(),
|
||||
showSummary: yup.boolean(),
|
||||
showEditor: yup.boolean(),
|
||||
showSettingsPage: yup.boolean().default(false),
|
||||
diagramStart: yup
|
||||
.number()
|
||||
|
@ -196,6 +199,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
showTypes = false,
|
||||
showControls = false,
|
||||
showSummary = false,
|
||||
showEditor = true,
|
||||
}) => {
|
||||
const [squiggleString, setSquiggleString] = useState(initialSquiggleString);
|
||||
const [importString, setImportString] = useState("{}");
|
||||
|
@ -207,9 +211,10 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
sampleCount: 1000,
|
||||
xyPointLength: 1000,
|
||||
chartHeight: 150,
|
||||
showTypes,
|
||||
showControls,
|
||||
showSummary,
|
||||
showTypes: showTypes,
|
||||
showControls: showControls,
|
||||
showSummary: showSummary,
|
||||
showEditor: showEditor,
|
||||
leftSizePercent: 50,
|
||||
showSettingsPage: false,
|
||||
diagramStart: 0,
|
||||
|
@ -276,6 +281,11 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
<div className="space-y-6 p-3 divide-y divide-gray-200 max-w-xl">
|
||||
<HeadedSection title="General Display Settings">
|
||||
<div className="space-y-4">
|
||||
<Checkbox
|
||||
name="showEditor"
|
||||
register={register}
|
||||
label="Show code editor on left"
|
||||
/>
|
||||
<InputItem
|
||||
name="chartHeight"
|
||||
type="number"
|
||||
|
@ -374,52 +384,81 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const InFirstTab: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => (
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>{children}</Tab.Panel>
|
||||
<Tab.Panel>{samplingSettings}</Tab.Panel>
|
||||
<Tab.Panel>{viewSettings}</Tab.Panel>
|
||||
<Tab.Panel>{inputVariableSettings}</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
);
|
||||
|
||||
let withEditor = (
|
||||
<div className="flex mt-1" style={{ height }}>
|
||||
<div className="w-1/2">
|
||||
<InFirstTab>
|
||||
<div className="border border-slate-200">
|
||||
<CodeEditor
|
||||
value={squiggleString}
|
||||
onChange={setSquiggleString}
|
||||
oneLine={false}
|
||||
showGutter={true}
|
||||
height={height - 1}
|
||||
/>
|
||||
</div>
|
||||
</InFirstTab>
|
||||
</div>
|
||||
|
||||
<div className="w-1/2 p-2 pl-4">
|
||||
<SquiggleChart
|
||||
squiggleString={squiggleString}
|
||||
environment={env}
|
||||
chartSettings={chartSettings}
|
||||
height={vars.chartHeight}
|
||||
showTypes={vars.showTypes}
|
||||
showControls={vars.showControls}
|
||||
showSummary={vars.showSummary}
|
||||
bindings={defaultBindings}
|
||||
jsImports={imports}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
let withoutEditor = (
|
||||
<div className="mt-3">
|
||||
<InFirstTab>
|
||||
<SquiggleChart
|
||||
squiggleString={squiggleString}
|
||||
environment={env}
|
||||
chartSettings={chartSettings}
|
||||
height={vars.chartHeight}
|
||||
showTypes={vars.showTypes}
|
||||
showControls={vars.showControls}
|
||||
bindings={defaultBindings}
|
||||
jsImports={imports}
|
||||
showSummary={vars.showSummary}
|
||||
/>
|
||||
</InFirstTab>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<SquiggleContainer>
|
||||
<Tab.Group>
|
||||
<div className="pb-4">
|
||||
<Tab.List className="flex w-fit p-0.5 rounded-md bg-slate-100 hover:bg-slate-200">
|
||||
<StyledTab name="Code" icon={CodeIcon} />
|
||||
<Tab.List className="flex w-fit p-0.5 mt-2 rounded-md bg-slate-100 hover:bg-slate-200">
|
||||
<StyledTab
|
||||
name={vars.showEditor ? "Code" : "Display"}
|
||||
icon={vars.showEditor ? CodeIcon : EyeIcon}
|
||||
/>
|
||||
<StyledTab name="Sampling Settings" icon={CogIcon} />
|
||||
<StyledTab name="View Settings" icon={ChartSquareBarIcon} />
|
||||
<StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
|
||||
</Tab.List>
|
||||
</div>
|
||||
<div className="flex" style={{ height }}>
|
||||
<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>{samplingSettings}</Tab.Panel>
|
||||
<Tab.Panel>{viewSettings}</Tab.Panel>
|
||||
<Tab.Panel>{inputVariableSettings}</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</div>
|
||||
|
||||
<div className="w-1/2 p-2 pl-4">
|
||||
<div style={{ maxHeight: height }}>
|
||||
<SquiggleChart
|
||||
squiggleString={squiggleString}
|
||||
environment={env}
|
||||
chartSettings={chartSettings}
|
||||
height={vars.chartHeight}
|
||||
showTypes={vars.showTypes}
|
||||
showControls={vars.showControls}
|
||||
showSummary={vars.showSummary}
|
||||
bindings={defaultBindings}
|
||||
jsImports={imports}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{vars.showEditor ? withEditor : withoutEditor}
|
||||
</div>
|
||||
</Tab.Group>
|
||||
</SquiggleContainer>
|
||||
|
|
Loading…
Reference in New Issue
Block a user