src/components/AST/Viz.js
// This is the component for a sub-tree of an object in the AST.
This is the component for a sub-tree of an object in the AST.
This is the component for a sub - tree of an object in the AST .
function CompositeObj({ k, obj, cursor, setPos, ...other }) {
  const { hideEmpty, hideTypes, hideLocation, sortTree } = useContext(
    SettingsContext
  );
  const content = useMemo(() => {
    let subTree = Object.entries(obj).map(([i, v], index) => {
      if ((hideTypes && i === "type") || (hideLocation && i === "loc")) {
        return [v, null];
      }
      return [
        v,
        <Fragment key={index}>
          {typeof v === "object" && v !== null ? (
            <Composite k={i} ast={v} cursor={cursor} setPos={setPos} />
          ) : (
            <Primitive k={i} val={v} />
          )}
        </Fragment>,
      ];
    });
    subTree = sortTree
      ? subTree.sort((former, latter) => {
          return sortByCompositeness(former[0], latter[0]);
        })
      : subTree;
    return subTree.map(v => v[1]);
  }, [obj, cursor, setPos, hideTypes, hideLocation, sortTree]);
  const { type, loc, value, name } = obj;
  const label = type ? type : k;
  const keys = Object.keys(obj);
  const { toggled } = other;
  const defaultActiveIndex = toggled ?? (label === "Program" ? 0 : null);
  const [active, setActive] = useState(!!defaultActiveIndex);
  const highlight = useMemo(() => {
    return (
      (value !== undefined || name !== undefined || !active) &&
      isBound(cursor, loc)
    );
  }, [active, cursor, loc, value, name]);
  const popup = lookUpNodeType(type);
  const title = `${label} : ${active ? "" : `{ ${keys.join(", ")} }`}`;
  const panels = [
    {
      key: 0,
      title: (
        <StyledAccordionTitle
          highlight={highlight ? 1 : 0}
          content={
            popup.length ? (
              <Popup
                content={<UglyPopup def={popup} />}
                on="hover"
                trigger={<span>{title}</span>}
              />
            ) : (
              title
            )
          }
        />
      ),
      content,
    },
  ];
  const props = {
    onTitleClick: () => {
      loc && setPos(fixLoc(loc));
      setActive(active => !active);
    },
    panels,
    defaultActiveIndex,
  };
  return keys.length ? (
    <Accordion.Accordion {...props} />
  ) : hideEmpty ? null : (
    <Primitive k={label} val="{ }" />
  );
}
function CompositeObj ( { k , obj , cursor , setPos , ... other } ) { const { hideEmpty , hideTypes , hideLocation , sortTree } = useContext ( SettingsContext ) ; const content = useMemo ( ( ) => { let subTree = Object . entries ( obj ) . map ( ( [ i , v ] , index ) => { if ( ( hideTypes && i === "type" ) || ( hideLocation && i === "loc" ) ) { return [ v , null ] ; } return [ v , < Fragment key = { index } > { typeof v === "object" && v !== null ? ( < Composite k = { i } ast = { v } cursor = { cursor } setPos = { setPos } / > ) : ( < Primitive k = { i } val = { v } / > ) } < / Fragment > , ] ; } ) ; subTree = sortTree ? subTree . sort ( ( former , latter ) => { return sortByCompositeness ( former [ 0 ] , latter [ 0 ] ) ; } ) : subTree ; return subTree . map ( v => v [ 1 ] ) ; } , [ obj , cursor , setPos , hideTypes , hideLocation , sortTree ] ) ; const { type , loc , value , name } = obj ; const label = type ? type : k ; const keys = Object . keys ( obj ) ; const { toggled } = other ; const defaultActiveIndex = toggled ?? ( label === "Program" ? 0 : null ) ; const [ active , setActive ] = useState ( ! ! defaultActiveIndex ) ; const highlight = useMemo ( ( ) => { return ( ( value !== undefined || name !== undefined || ! active ) && isBound ( cursor , loc ) ) ; } , [ active , cursor , loc , value , name ] ) ; const popup = lookUpNodeType ( type ) ; const title = ` ${ label } ${ active ? "" : ` ${ keys . join ( ", " ) } ` } ` ; const panels = [ { key : 0 , title : ( < StyledAccordionTitle highlight = { highlight ? 1 : 0 } content = { popup . length ? ( < Popup content = { < UglyPopup def = { popup } / > } on = "hover" trigger = { < span > { title } < / span > } / > ) : ( title ) } / > ) , content , } , ] ; const props = { onTitleClick : ( ) => { loc && setPos ( fixLoc ( loc ) ) ; setActive ( active => ! active ) ; } , panels , defaultActiveIndex , } ; return keys . length ? ( < Accordion . Accordion { ... props } / > ) : hideEmpty ? null : ( < Primitive k = { label } val = "{ }" / > ) ; }
This is the component for a sub-tree of an object in the AST.
This is the component for a sub - tree of an object in the AST .
// setPos is memoized so dependency is just to placate warnings. // Memoization should be helpful when parts of the tree are the same. // i, v are key and value.