switch-dataflow

2e:null 2f:["$","title",null,{"children":"How to 1-of-n switch Dataflow streams on Observable | Tom Larkworthy | Observable"}] 34:T1fc2,35:[] 32:{"id":"50610aed8b986e07","slug":"switch-dataflow","title":"How to 1-of-n switch Dataflow streams on Observable","thumbnail":"b9192e8bcf3a7ce58e7f1080045f122731dbfba4e58b571f8270114a6cb5a40b","access_level":"public","create_time":"$D2021-11-24T10:11:59.405Z","update_time":"$D2024-03-23T19:06:57.657Z","view_time":null,"first_public_time":"$D2021-11-24T10:46:09.495Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":169,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"de6effaee7717612","slug":"patterns","title":"patterns","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"data = {\n while (true) {\n yield Promises.delay(300, Math.random());\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"You can programatically trigger dataflow by calling *dispatchEvent* on its enclosing view. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"You can create a lightweight view with `Inputs.input`\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof cell_1 = Inputs.input(undefined)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"cell_1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof cell_2 = Inputs.input(undefined)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"cell_2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"Now dataflow is guided by the value of the *choice* variable.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof choice = Inputs.select([\"cell_1\", \"cell_2\"], {\n label: \"Choose where to dataflow\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"