Merged with develop
This commit is contained in:
commit
60213d8321
|
@ -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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user