quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

collapsible tree

Browse Source
This commit is contained in:
Vyacheslav Matyukhin 2022-07-07 20:54:40 +04:00
parent 8a2269b7d0
commit afbc1e1455
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
1 changed files with 74 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
packages/components/src/components/SquiggleItem.tsx
View File

@ -43,7 +43,7 @@ interface VariableBoxProps {
showTypes: boolean; showTypes: boolean;
} }
export const VariableBox: React.FC<VariableBoxProps> = ({ const VariableBox: React.FC<VariableBoxProps> = ({
name, name,
heading = "Error", heading = "Error",
children, children,
@ -51,13 +51,11 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
}) => { }) => {
const [isCollapsed, setIsCollapsed] = useState(false); const [isCollapsed, setIsCollapsed] = useState(false);
return ( return (
<motion.div <motion.div layout transition={{ type: "tween" }}>
layout="position"
transition={{ type: "spring", bounce: 0, duration: 0.2 }}
>
{name || showTypes ? ( {name || showTypes ? (
<motion.header <motion.header
layout="position" layout="position"
transition={{ type: "tween" }}
className="inline-flex space-x-1 text-slate-500 font-mono text-sm cursor-pointer" className="inline-flex space-x-1 text-slate-500 font-mono text-sm cursor-pointer"
onClick={() => setIsCollapsed(!isCollapsed)} onClick={() => setIsCollapsed(!isCollapsed)}
> >
@ -69,12 +67,35 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
</motion.header> </motion.header>
) : null} ) : null}
{isCollapsed ? null : ( {isCollapsed ? null : (
<motion.div layout="position">{children}</motion.div> <motion.div layout="position" transition={{ type: "tween" }}>
{children}
</motion.div>
)} )}
</motion.div> </motion.div>
); );
}; };
const VariableList: React.FC<{
name?: string;
heading: string;
showTypes: boolean;
children: React.ReactNode;
}> = ({ name, heading, showTypes, children }) => (
<VariableBox name={name} heading={heading} showTypes={showTypes}>
<motion.div
layout="position"
transition={{ type: "tween" }}
className={clsx(
"space-y-3",
name ? "border-l pl-4" : null,
name || showTypes ? "pt-1 mt-1" : null
)}
>
<LayoutGroup>{children}</LayoutGroup>
</motion.div>
</VariableBox>
);
export interface SquiggleItemProps { export interface SquiggleItemProps {
/** The output of squiggle's run */ /** The output of squiggle's run */
expression: squiggleExpression; expression: squiggleExpression;
@ -217,90 +238,60 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
} }
case "module": { case "module": {
return ( return (
<VariableBox name={name} heading="Module" showTypes={showTypes}> <VariableList name={name} heading="Module" showTypes={showTypes}>
<div {Object.entries(expression.value)
className={clsx( .filter(([key, r]) => key !== "Math")
"space-y-3", .map(([key, r]) => (
name ? "border-l pl-4" : null, <SquiggleItem
name || showTypes ? "pt-1 mt-1" : null key={key}
)} name={key}
> expression={r}
<LayoutGroup> width={width !== undefined ? width - 20 : width}
{Object.entries(expression.value) height={height / 3}
.filter(([key, r]) => key !== "Math") showTypes={showTypes}
.map(([key, r]) => ( distributionPlotSettings={distributionPlotSettings}
<SquiggleItem chartSettings={chartSettings}
key={key} environment={environment}
name={key} />
expression={r} ))}
width={width !== undefined ? width - 20 : width} </VariableList>
height={height / 3}
showTypes={showTypes}
distributionPlotSettings={distributionPlotSettings}
chartSettings={chartSettings}
environment={environment}
/>
))}
</LayoutGroup>
</div>
</VariableBox>
); );
} }
case "record": case "record":
return ( return (
<VariableBox name={name} heading="Record" showTypes={showTypes}> <VariableList name={name} heading="Record" showTypes={showTypes}>
<div {Object.entries(expression.value).map(([key, r]) => (
className={clsx( <SquiggleItem
"space-y-3", key={key}
name ? "border-l pl-4" : null, name={key}
name || showTypes ? "pt-1 mt-1" : null expression={r}
)} width={width !== undefined ? width - 20 : width}
> height={height / 3}
<LayoutGroup> showTypes={showTypes}
{Object.entries(expression.value).map(([key, r]) => ( distributionPlotSettings={distributionPlotSettings}
<SquiggleItem chartSettings={chartSettings}
key={key} environment={environment}
name={key} />
expression={r} ))}
width={width !== undefined ? width - 20 : width} </VariableList>
height={height / 3}
showTypes={showTypes}
distributionPlotSettings={distributionPlotSettings}
chartSettings={chartSettings}
environment={environment}
/>
))}
</LayoutGroup>
</div>
</VariableBox>
); );
case "array": case "array":
return ( return (
<VariableBox name={name} heading="Array" showTypes={showTypes}> <VariableList name={name} heading="Array" showTypes={showTypes}>
<div {expression.value.map((r, i) => (
className={clsx( <SquiggleItem
"space-y-3", key={i}
name ? "border-l pl-4" : null, name={String(i)}
name || showTypes ? "pt-1 mt-1" : null expression={r}
)} width={width !== undefined ? width - 20 : width}
> height={50}
<LayoutGroup> distributionPlotSettings={distributionPlotSettings}
{expression.value.map((r, i) => ( showTypes={showTypes}
<SquiggleItem chartSettings={chartSettings}
key={i} environment={environment}
name={String(i)} />
expression={r} ))}
width={width !== undefined ? width - 20 : width} </VariableList>
height={50}
distributionPlotSettings={distributionPlotSettings}
showTypes={showTypes}
chartSettings={chartSettings}
environment={environment}
/>
))}
</LayoutGroup>
</div>
</VariableBox>
); );
default: { default: {
return ( return (