src/components/AST/Viz.js
// This is the component for the sub-tree of an array.
This is the component for the sub-tree of an array.
This is the component for the sub - tree of an array .
function CompositeArr({ k, arr, cursor, setPos }) {
  const { hideEmpty } = useContext(SettingsContext);
  const components = useMemo(() => {
    return arr.map((value, index) => {
      return (
        <Fragment key={index}>
          {typeof value === "object" && value !== null ? (
            <Composite
              k={k}
              ast={value}
              cursor={cursor}
              setPos={setPos}
              toggled={arr.length === 1 ? 0 : null}
            />
          ) : (
            <Primitive k={k} ast={value} />
          )}
        </Fragment>
      );
    });
  }, [k, arr, cursor, setPos]);
  const [active, setActive] = useState(true);
  const highlight = useMemo(() => {
    return !active && arr.some(x => x && isBound(cursor, x.loc));
  }, [active, arr, cursor]);
  const panels = [
    {
      key: 0,
      title: (
        <StyledAccordionTitle
          content={`${k} : ${active ? "" : `[ ${arr.length} element ]`}`}
        />
      ),
      content: components,
    },
  ];
  const props = {
    highlight: highlight ? 1 : 0,
    onTitleClick: () => {
      setActive(active => !active);
    },
    panels,
    defaultActiveIndex: 0,
  };
  return arr.length ? (
    <Accordion.Accordion {...props} />
  ) : hideEmpty ? null : (
    <Primitive k={k} val="[ ]" />
  );
}
function CompositeArr ( { k , arr , cursor , setPos } ) { const { hideEmpty } = useContext ( SettingsContext ) ; const components = useMemo ( ( ) => { return arr . map ( ( value , index ) => { return ( < Fragment key = { index } > { typeof value === "object" && value !== null ? ( < Composite k = { k } ast = { value } cursor = { cursor } setPos = { setPos } toggled = { arr . length === 1 ? 0 : null } / > ) : ( < Primitive k = { k } ast = { value } / > ) } < / Fragment > ) ; } ) ; } , [ k , arr , cursor , setPos ] ) ; const [ active , setActive ] = useState ( true ) ; const highlight = useMemo ( ( ) => { return ! active && arr . some ( x => x && isBound ( cursor , x . loc ) ) ; } , [ active , arr , cursor ] ) ; const panels = [ { key : 0 , title : ( < StyledAccordionTitle content = { ` ${ k } ${ active ? "" : ` ${ arr . length } ` } ` } / > ) , content : components , } , ] ; const props = { highlight : highlight ? 1 : 0 , onTitleClick : ( ) => { setActive ( active => ! active ) ; } , panels , defaultActiveIndex : 0 , } ; return arr . length ? ( < Accordion . Accordion { ... props } / > ) : hideEmpty ? null : ( < Primitive k = { k } val = "[ ]" / > ) ; }
This is the component for the sub-tree of an array.
This is the component for the sub - tree of an array .
// setPos is memoized so dependency is just to placate warnings. // Memoization should be helpful when parts of the tree are the same. // Arrays are toggled by default as well as single elements within.