Tom Larkworthy

@tomlarkworthy how would you recommend adding inputs via an iterable? For example:

viewof composite = view`<div style="display: flex">
<table>
  ${['r1', 'r2'].map(r => {
    return `<tr>
      <td>${[r, Inputs.range([0, 10])]}</td>
    </tr>`
  })}
</table>
</div>
`

Adamo Carolli

Yeah, I am experimenting with limitations and arrays came up so I have some prototype support.

view foo = view`<div style="display: flex">
<table>
${["r", ['r1', 'r2'].map(r => {
return view`<tr>
<td>${Inputs.range([0, 10])}</td>
</tr>`
})]}
</table>
</div>
`

should give you foo.r. But I don't have support of that array dynamically expanding. 

Maybe join https://d3js.zulipchat.com/#narrow/stream/273880-ui/topic/Observable.20UI.20Design.20Guidlines.20and.20linter

I am playing with more advanced stuff here (including an array) https://observablehq.com/@tomlarkworthy/view-examples

I am waiting a little bit for everything to settle before documenting the next iteration.

real example https://observablehq.com/@tomlarkworthy/view-examples?collection=@tomlarkworthy/ui#arrayOfSlider

Thanks Tom that example worked perfectly! This is really cool and immediately useful!

Tom:

Consider the following two cells:

Cell 1:

viewof buttons = view`
<div>${["button1", Inputs.button("Button1")]}</div>
<div>${["button2", Inputs.button("Button2")]}</div>
`

Cell 2:

{ buttons.button1; 
  return new Date()
}

Clicking 'button2' will mutate buttons; resulting in Cell 2 to re-evaluate.

Is this the intended behavior?

Mario Delgado 

this is expected behaviour, if you want finer grained  notifications of just button 1, without involving dataflow from buttons, you can reference the subview as "viewof buttons.button1"

I don't know a way of triggering ***dataflow*** from that without an intermediate variable, but there are other methods for get change notifications like bind, or addEventListener

Inputs.bind(..., viewof buttons.button1)

Note often you only need bindOneWay which gives you the ability to transform the value enroute, which is what your code is doing so cell2 can be expressed equivalently as:

bindOneWay(
  Inputs.text({ disabled: true }),
  viewof buttons.button1, {
     transform: (_) => new Date()
   }
)

sorry my version of cell2 is a view not a simple cells so its not quite equivalent but nearly (i.e. the variable name plain 'cell2' will act the same as it did before)

viewof cell2 = bindOneWay(
  Inputs.text({ disabled: true }),
  viewof buttons.button1, {
     transform: (_) => new Date()
   }
)

Not quite sure that works for my use case.

See: https://observablehq.com/@ambassadors/hello-topogram

The goal is to have the  'Invert' check box independent of the 'Randomize Data' button.

For reference you can trigger fine grained dataflow with some rearrangement:

create an authoritative view like:-
viewof cell2 = Inputs.input({});

and then binding to it within the subview
view`...  ['subview', Inputs.bind(..., viewof cell2)]`

Now changes in the UI are transmitted to cell2 via view synchronization and you can selectively hear a specific control through dataflow off the upstream authority cell

Fabian Iwand

You can drop the else block after the `if(singleton)` check because `if(singleton) { return ... }`. That's one less indentation level and might make that Prettier formatting a tiny bit more digestable :)

Also, I noticed a few `var` (no block scope) which are used instead of `let`.

(done)

yes this is in desperate need of a refactor. I have noticed what I am conflating is Object/Array/Scalar variants of a view builder. They have different logic and state but I have them all in the same scope.

The nicest thing would be to split them up into seperate functions with unique scope. (singleton == scalar). I am trying to document the spec in the tests and build up enough test cases for a refactor down the line. I don't have many tests for the scala functionality though.

I dunno where your lazy loading comment went but I think I have wired it all into the RUN_TESTS decision logic.

For context (@mootari) suggested we lazy load the testing dependencies and made a PR for it

The comment was attached to the @tomlarkworthy/testing import. Unfortunately Observable drops comments if their parent cell no longer exists.

Added you to the change log and added your lazy-loading code block to the https://observablehq.com/@tomlarkworthy/testing library. Thanks! I wanted that for a while!

Job van der Zwan

Both Apply buttons update the complete value object. Only Reset is limited to the nested elements.

ah yes, there is no additional variable to hold the value so if it is reevaluated it always takes it from the subnode, which might have changed... good one.

typo: "It took use several months to get to this!"  => "It took us several months to get to this!"