Szymon Kaliski

DAG and Tree Representations of Code

• representing layout as a tree:

  • React JSX:

    <button onClick={onClick}>
      {text}
    </button>
    

  • hiccup:

    ["button", { onClick }, text]
    

• representing CAD as a tree

  • modeler:

    <Union>
      <Path closed={true}>
        <Point x={0}  y={0} />
        <Point x={10} y={20} />
        <Point x={10} y={30} />
        <Point x={9}  y={42} />
      </Path>
      <Circle r={10} x={0} y={0}/>
    </Union>
    

    notice that parents impact children: Union calculates over Path and Circle, in "normal" code representation that would be:

    union(
      path({ closed: true, points }),
      circle({ r: 10, x: 0, y: 0 })
    )
    

  • hiccup-sdf:

    ["intersection", [
      ["box", { s: [0.1, 0.1, 0.1] }],
      translatedSphere([0.15, 0, 0], 0.2),
    ]]
    

• representing code as a "tree" gives us a way to create UIs close to visual tools:

  • layers by having multiple top-level items
  • show/hide components by toggling on/off from the tree, or just setting alpha={0}
  • visual pickers for properties (and calculated properties using lambdas)
  • references:
    • composing functionality and vpls

• representing as a DAG (nodes and edges):

  • this is a DAG:

    +->B->E-+
    |       |
    A       +->F->G
    |       |
    +->C->D-+
    

    represented as a tree:

    A
    + B
    | + E
    |   + F
    |     + G
    + C
      + D
        + F
          + G
    

  • DAGs can make describing relations simpler: F depends on E and D - this is used in Makefiles for example
  • node-and-edge languages (VPLs) are DAGs describing computations - they are best modeled with streams, event emitters, etc.