collapsible tree
This commit is contained in:
parent
8a2269b7d0
commit
afbc1e1455
|
@ -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 (
|
||||||
|
|
Loading…
Reference in New Issue
Block a user