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

75
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,15 +238,7 @@ 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
className={clsx(
"space-y-3",
name ? "border-l pl-4" : null,
name || showTypes ? "pt-1 mt-1" : null
)}
>
<LayoutGroup>
{Object.entries(expression.value) {Object.entries(expression.value)
.filter(([key, r]) => key !== "Math") .filter(([key, r]) => key !== "Math")
.map(([key, r]) => ( .map(([key, r]) => (
@ -241,22 +254,12 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
environment={environment} environment={environment}
/> />
))} ))}
</LayoutGroup> </VariableList>
</div>
</VariableBox>
); );
} }
case "record": case "record":
return ( return (
<VariableBox name={name} heading="Record" showTypes={showTypes}> <VariableList name={name} heading="Record" showTypes={showTypes}>
<div
className={clsx(
"space-y-3",
name ? "border-l pl-4" : null,
name || showTypes ? "pt-1 mt-1" : null
)}
>
<LayoutGroup>
{Object.entries(expression.value).map(([key, r]) => ( {Object.entries(expression.value).map(([key, r]) => (
<SquiggleItem <SquiggleItem
key={key} key={key}
@ -270,21 +273,11 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
environment={environment} environment={environment}
/> />
))} ))}
</LayoutGroup> </VariableList>
</div>
</VariableBox>
); );
case "array": case "array":
return ( return (
<VariableBox name={name} heading="Array" showTypes={showTypes}> <VariableList name={name} heading="Array" showTypes={showTypes}>
<div
className={clsx(
"space-y-3",
name ? "border-l pl-4" : null,
name || showTypes ? "pt-1 mt-1" : null
)}
>
<LayoutGroup>
{expression.value.map((r, i) => ( {expression.value.map((r, i) => (
<SquiggleItem <SquiggleItem
key={i} key={i}
@ -298,9 +291,7 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
environment={environment} environment={environment}
/> />
))} ))}
</LayoutGroup> </VariableList>
</div>
</VariableBox>
); );
default: { default: {
return ( return (