diff --git a/packages/components/src/components/SquiggleItem.tsx b/packages/components/src/components/SquiggleItem.tsx index 0e775f33..a64df99e 100644 --- a/packages/components/src/components/SquiggleItem.tsx +++ b/packages/components/src/components/SquiggleItem.tsx @@ -243,8 +243,20 @@ export const SquiggleItem: React.FC = ({ ); } + case "module": { + return ( + + Internal Module + + ); + } default: { - return <>Should be unreachable; + return ( +
+ No display for type: {" "} + {expression.tag} +
+ ); } } }; diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 64b56358..08486d07 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -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 = ({ 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 = ({ 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 = ({
+ = ({
); + const InFirstTab: React.FC<{ children: React.ReactNode }> = ({ + children, + }) => ( + + {children} + {samplingSettings} + {viewSettings} + {inputVariableSettings} + + ); + + let withEditor = ( +
+
+ +
+ +
+
+
+ +
+ +
+
+ ); + + let withoutEditor = ( +
+ + + +
+ ); + return (
- - + + -
-
-
- - -
- -
-
- {samplingSettings} - {viewSettings} - {inputVariableSettings} -
-
- -
-
- -
-
+ {vars.showEditor ? withEditor : withoutEditor}