Merged with develop

This commit is contained in:
Ozzie Gooen 2022-06-17 16:01:30 -07:00
commit 60213d8321
2 changed files with 90 additions and 48 deletions

View File

@ -243,8 +243,20 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
</VariableBox> </VariableBox>
); );
} }
case "module": {
return (
<VariableBox heading="Module" showTypes={showTypes}>
<span className="text-slate-600 font-semibold">Internal Module</span>
</VariableBox>
);
}
default: { default: {
return <>Should be unreachable</>; return (
<div>
<span>No display for type: </span>{" "}
<span className="font-semibold text-slate-600">{expression.tag}</span>
</div>
);
} }
} }
}; };

View File

@ -9,6 +9,7 @@ import {
CodeIcon, CodeIcon,
CogIcon, CogIcon,
CurrencyDollarIcon, CurrencyDollarIcon,
EyeIcon,
} from "@heroicons/react/solid"; } from "@heroicons/react/solid";
import clsx from "clsx"; import clsx from "clsx";
@ -34,6 +35,8 @@ interface PlaygroundProps {
/** If code is set, component becomes controlled */ /** If code is set, component becomes controlled */
code?: string; code?: string;
onCodeChange?(expr: string): void; onCodeChange?(expr: string): void;
/** Should we show the editor? */
showEditor?: boolean;
} }
const schema = yup const schema = yup
@ -67,6 +70,7 @@ const schema = yup
showTypes: yup.boolean(), showTypes: yup.boolean(),
showControls: yup.boolean(), showControls: yup.boolean(),
showSummary: yup.boolean(), showSummary: yup.boolean(),
showEditor: yup.boolean(),
showSettingsPage: yup.boolean().default(false), showSettingsPage: yup.boolean().default(false),
diagramStart: yup diagramStart: yup
.number() .number()
@ -201,6 +205,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
showSummary = false, showSummary = false,
code: controlledCode, code: controlledCode,
onCodeChange, onCodeChange,
showEditor = true,
}) => { }) => {
const [uncontrolledCode, setUncontrolledCode] = useState( const [uncontrolledCode, setUncontrolledCode] = useState(
initialSquiggleString initialSquiggleString
@ -214,9 +219,10 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
sampleCount: 1000, sampleCount: 1000,
xyPointLength: 1000, xyPointLength: 1000,
chartHeight: 150, chartHeight: 150,
showTypes, showTypes: showTypes,
showControls, showControls: showControls,
showSummary, showSummary: showSummary,
showEditor: showEditor,
leftSizePercent: 50, leftSizePercent: 50,
showSettingsPage: false, showSettingsPage: false,
diagramStart: 0, diagramStart: 0,
@ -285,6 +291,11 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
<div className="space-y-6 p-3 divide-y divide-gray-200 max-w-xl"> <div className="space-y-6 p-3 divide-y divide-gray-200 max-w-xl">
<HeadedSection title="General Display Settings"> <HeadedSection title="General Display Settings">
<div className="space-y-4"> <div className="space-y-4">
<Checkbox
name="showEditor"
register={register}
label="Show code editor on left"
/>
<InputItem <InputItem
name="chartHeight" name="chartHeight"
type="number" type="number"
@ -383,58 +394,77 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
</div> </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 squiggleChart = (
<SquiggleChart
squiggleString={code}
environment={env}
chartSettings={chartSettings}
height={vars.chartHeight}
showTypes={vars.showTypes}
showControls={vars.showControls}
showSummary={vars.showSummary}
bindings={defaultBindings}
jsImports={imports}
/>
);
let withEditor = (
<div className="flex mt-1" style={{ height }}>
<div className="w-1/2">
<InFirstTab>
<div className="border border-slate-200">
<CodeEditor
value={code}
onChange={(newCode) => {
if (controlledCode === undefined) {
// uncontrolled mode
setUncontrolledCode(newCode);
}
onCodeChange?.(newCode);
}}
oneLine={false}
showGutter={true}
height={height - 1}
/>
</div>
</InFirstTab>
</div>
<div className="w-1/2 p-2 pl-4">{squiggleChart}</div>
</div>
);
let withoutEditor = (
<div className="mt-3">
<InFirstTab>{squiggleChart}</InFirstTab>
</div>
);
return ( return (
<SquiggleContainer> <SquiggleContainer>
<Tab.Group> <Tab.Group>
<div className="pb-4"> <div className="pb-4">
<Tab.List className="flex w-fit p-0.5 rounded-md bg-slate-100 hover:bg-slate-200"> <Tab.List className="flex w-fit p-0.5 mt-2 rounded-md bg-slate-100 hover:bg-slate-200">
<StyledTab name="Code" icon={CodeIcon} /> <StyledTab
name={vars.showEditor ? "Code" : "Display"}
icon={vars.showEditor ? CodeIcon : EyeIcon}
/>
<StyledTab name="Sampling Settings" icon={CogIcon} /> <StyledTab name="Sampling Settings" icon={CogIcon} />
<StyledTab name="View Settings" icon={ChartSquareBarIcon} /> <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
<StyledTab name="Input Variables" icon={CurrencyDollarIcon} /> <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
</Tab.List> </Tab.List>
</div> {vars.showEditor ? withEditor : withoutEditor}
<div className="flex" style={{ height }}>
<div className="w-1/2">
<Tab.Panels>
<Tab.Panel>
<div className="border border-slate-200">
<CodeEditor
value={code}
onChange={(newCode) => {
if (controlledCode === undefined) {
// uncontrolled mode
setUncontrolledCode(newCode);
}
onCodeChange?.(newCode);
}}
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={code}
environment={env}
chartSettings={chartSettings}
height={vars.chartHeight}
showTypes={vars.showTypes}
showControls={vars.showControls}
showSummary={vars.showSummary}
bindings={defaultBindings}
jsImports={imports}
/>
</div>
</div>
</div> </div>
</Tab.Group> </Tab.Group>
</SquiggleContainer> </SquiggleContainer>