`Dict View` for tree-structured data

[rolyp]

We currently support loading (via JSON), but not rendering, of tree-structured data. A MultiView is essentially just a dictionary of views where (by convention) the dictionary keys are hidden. We should be able to adapt this to allow for nested hierarchical views where the keys are rendered (perhaps with the option to disable key rendering to subsume the existing MultiView behaviour).

• setSelection not general enough to support key selection? (Expects "leaf" selection to be on a Val)
• Emulate layout of tabular view where appropriate, and fix vertical layout of keys/leaves in columnar mode

Done/dropped:

• Factor existing MultiView instance through new Dict View' instance, verify current behaviour preserved
• Check default layout: children of div layed out vertically if block elements, or horizontally if inline; svg are inline
• Dict View should be Dict (View × View), with first view being view of key?
• New div element to show keys as well (and force vertical layout)
  • Check impact on MultiView examples
• Indent children relative to parent div (when showing key?)
• Format (k, v) pair, e.g. k: v
• CSS grid to render each set of k: v pairs with uniform k column
• MultiView as just vertically composed views, rather than based on Dict View
  • New impl that doesn't go through Dict View

[rolyp]

Goal is to support flexible layout like this, with tabular layout when the values in a dict (e.g. X below) are "leaves":

First attempt:

.tree-node {
   display: grid;
   grid-template-columns: auto 1fr; /* label on left, children on right */
   gap: 8px;
   align-items: start;
}

.tree-children {
   display: grid;
   grid-auto-rows: min-content;
   gap: 4px;
   border-left: 2px solid #ccc;
   padding-left: 8px;
}

.tree-label {
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 2px 6px;
  border-radius: 4px;
}

.node {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: start;
}

.tree-children.columnar {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 4px;
}

.tree-children.columnar > .tree-node {
  display: contents; /* flatten to share grid rows */
}

.tree-children.columnar .tree-children {
  border-left: none;
  padding-left: 0;
}

[rolyp]

Basic version working, so remove example for now. Keep here for posterity:

      <div class="tree-children">
        <div class="tree-node">
          <div class="tree-label">root1</div>
          <div class="tree-children">
            <!-- Normal recursive branch -->
              <div class="tree-node">
                <div class="tree-label">longer name 1</div>
                <div class="tree-children">
                  <div class="tree-node"><div class="tree-label">longer grandchild 1</div></div>
                  <div class="tree-node"><div class="tree-label">grandchild 2</div></div>
                </div>
              </div>
              <div class="tree-node"><div class="tree-label">child 2</div></div>

            <!-- Degenerate “columnar” branch -->
            <div class="tree-node">
              <div class="tree-label">X</div>
              <div class="tree-children columnar">
                <div class="tree-node">
                  <div class="tree-label">try</div>
                  <div class="tree-children">
                    <div class="tree-node"><div class="tree-label">and</div></div>
                  </div>
                </div>
                <div class="tree-node">
                  <div class="tree-label">different lengths</div>
                  <div class="tree-children">
                    <div class="tree-node"><div class="tree-label">for children</div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tree-node"><div class="tree-label">root2</div></div>
      </div>