Dataflow Grid System

[Alex Garcia]

Currently, Observable notebooks in Dataflow are rendered top->bottom. Any custom side-by-side cells have to be done in the same cell (kinda like the table-of-content sidebar in the Dataflow docs, but it's tedious and requires re-writing cells.

Option 1: in-line comments

/* @df-grid start myGrid
  template: 
    - sidebar title
    - sidebar content 
    - sidebar content
*/

// @df-grid area sidebar
viewof num = html`<input type=range >`

// @df-grid area sidebar
viewof color = html`<input type=color >`

// @df-grid area sidebar
viewof text = Inputs.text("Chicago")

// @df-grid area title
md`## ${title}`

// @df-grid area content
map = svg`<svg> ${/* ... */}`

// @df-grid end myGrid

• pros
  • comments can easily be ignored, and is picked up by parser
  • easy opt-in/opt-out, especially with unnamed cells
• cons
  • a lot of logic will be needed to parse comments
  • what if the df-grid end comment is missing at the end?
  • dataflow compiler will also need to parse these comments

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

Option 2: Top-level Configuration Comment

/*
FileAttachments:
  example: ./example.txt
grids:
  grid1:
    template-area:
      - head head
      - nav  main 
      - nav  foot
    cells:
      head: [a, b, c]
      main: [chart]
      sidebar: [viewof color]
*/

• Pros:
  • easier to implement
  • template-area at the top makes it clear, multiple grids is possible
• Cons:
  • logic when editing (e.g. rm'ing 'chart' from 'main') might be tricky to do on the fly
  • not possible with unnamed cells (maybe not too big of a deal)

Overall issues

width

width is the width of the browser (or the container of the notebook), and not the width of a sidebar/"main" section. So would need to offer a reactive variable for width/height for a given grid area. Maybe something like:

sidebarWidth = dataflow.grids.observeWidth("myGrid", "sidebar")