switch-dataflow

31:T1fc2,32:[] 2f:{"title":"How to 1-of-n switch Dataflow streams on Observable","cells":[{"id":0,"value":"# How to 1-of-n switch [Dataflow](https://observablehq.com/@observablehq/reactive-dataflow) streams on [Observable](https://observablehq.com)\n\n*In this series, I will explore programming techniques for the notebook platform [Observable](https://observablehq.com). Today I am looking at how to direct a reactive Dataflow stream to one-of-n downstream cells. This article assumes you are familiar with [Observable's non-linear reactive program flow](https://observablehq.com/@observablehq/reactive-dataflow) already.*","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":67,"value":"Sometimes we want control the dataflow with logic. If we have a cell called *data* streaming values, we might like to direct those updates to either *cell_1* or *cell_2*.\n","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"data = {\n while (true) {\n yield Promises.delay(300, Math.random());\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"You can programatically trigger dataflow by calling *dispatchEvent* on its enclosing view. ","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"switch_ = {\n if (choice === \"cell_1\") {\n viewof cell_1.value = data;\n viewof cell_1.dispatchEvent(new Event(\"input\", { bubbles: true }));\n } else if (choice === \"cell_2\") {\n viewof cell_2.value = data;\n viewof cell_2.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"You can create a lightweight view with `Inputs.input`\n","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"viewof cell_1 = Inputs.input(undefined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"cell_1","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof cell_2 = Inputs.input(undefined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"cell_2","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"Now dataflow is guided by the value of the *choice* variable.\n","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"viewof choice = Inputs.select([\"cell_1\", \"cell_2\"], {\n label: \"Choose where to dataflow\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"I hope you find that useful and that you find other useful ways to manipulate dataflow!\n","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"### Addendum\n\n*Switch* reevaluates when *choice* changes, so you get an extra dataflow event for the act of choosing. This might not be what you want, so an alternative is to reference the *value* through its owning *view* to avoid dataflow being triggered.\n\n~~~js\nswitch = {\n if (viewof choice.value === \"cell_1\") {\n ...\n }\n ...\n}\n~~~\n","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}