2c:null 2d:["$","title",null,{"children":"How to Dataflow merge on Observable | Tom Larkworthy | Observable"}] 32:T40e,# How to [Dataflow](https://observablehq.com/@observablehq/reactive-dataflow) merge on [Observable](https://observablehq.com) *In this series, I will explore programming techniques for the notebook platform [Observable](https://observablehq.com). Today I am looking at how to *merge* multiple reactive Dataflow streams into a single stream. This article assumes you are familiar with [Observable's non-linear reactive program flow](https://observablehq.com/@observablehq/reactive-dataflow) already.* A common situation is this: you have a notebook that performs some useful task, and you want to offer a few different ways to start that task. For example, starting something based on configuration obtained from either URL parameters, local storage, or a manual UI. It's a little trickier than you would hope because, if each of these methods is in their own cell [1], then we have multiple distinct data flow pathways converging into a single flow. [1] *and they probably should be because of separation-of-concerns* 33:[{"id":"179fb6fdbc37ab4d1f8dbb73afd702956a35939d7d9965e21cb5285d993b117b746684e7c64c3be1ea8d8fcd6afa9ae96b13c810047ffdf3e09b69aa9d7f952e","href":"https://static.observableusercontent.com/files/179fb6fdbc37ab4d1f8dbb73afd702956a35939d7d9965e21cb5285d993b117b746684e7c64c3be1ea8d8fcd6afa9ae96b13c810047ffdf3e09b69aa9d7f952e","name":"image.png","type":"image/png","lastModified":1636063723467.286,"size":486744},{"id":"7ed8bcec1d34eda7fcd491dd5cfb4a2fc1e121cdf0ad865bf1a54b116270c0d0ae66003bbe20ef12cb622f2fba1029ef43e97f68ff7df054af615f81b3fbb388","href":"https://static.observableusercontent.com/files/7ed8bcec1d34eda7fcd491dd5cfb4a2fc1e121cdf0ad865bf1a54b116270c0d0ae66003bbe20ef12cb622f2fba1029ef43e97f68ff7df054af615f81b3fbb388","name":"image@1.png","type":"image/png","lastModified":1636063745754.997,"size":455352},{"id":"c716a11c651d424c4600eb696cf67410bf4b9485905f7a85a9fae9a97572e2cb1521d0580b7e6d73910ae5d18328a7aba2d7e0821fa4fca41381d1202ea06250","href":"https://static.observableusercontent.com/files/c716a11c651d424c4600eb696cf67410bf4b9485905f7a85a9fae9a97572e2cb1521d0580b7e6d73910ae5d18328a7aba2d7e0821fa4fca41381d1202ea06250","name":"OR_fan.png","type":"image/png","lastModified":1636058366836.175,"size":61894}] 30:{"id":"532cb8d948df07d3","slug":"merge-dataflow","title":"How to Dataflow merge on Observable","thumbnail":"cff589d2c1493a5a7a0f68c27048ddc282b163b328f8818e1a84bca30907d83e","access_level":"public","create_time":"$D2021-11-04T19:49:08.169Z","update_time":"$D2024-03-23T19:03:23.272Z","view_time":null,"first_public_time":"$D2021-11-05T18:46:54.736Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","bio":"Tech Lead at Taktile.\nFormerly Firebase, Google"},"version":472,"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,"bio":"Tech Lead at Taktile. ex Firebase, Google.\n🦋 larkworthy.bsky.social"}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[{"id":"9b6fe6321040d7f6","reply_to_id":null,"content":"Should this be named var2?","create_time":"$D2021-11-07T22:38:40.065Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"b31e222c78b643d7","login":"dkirkby","name":"David Kirkby","avatar_url":"https://avatars-next.observableusercontent.com/5b2c32ac920111620eb8369d40c1cd0353430f60391a4e246bc9822ab20f6f2f","tier":null}},{"id":"8e06e1e626e4581b","reply_to_id":"9b6fe6321040d7f6","content":"ok","create_time":"$D2021-11-07T23:05:52.746Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"de6effaee7717612","slug":"patterns","title":"patterns","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"titling":"auto","title":"How to Dataflow merge on Observable","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"| |\n| --- |\n\n|

|\n| --- |\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"The core difficulty is if there is no data in a source, its dataflow won't tick, so if the business logic depends on all the input sources, the business logic will not tick either. So this pattern described here will joins the business logic to the sources a different way so that if any of them tick, the business logic will tick too.\n\nIn [ReactiveX](http://reactivex.io/) terms, [Observable](https://observablehq.com)'s dataflow is a *[combineLatest](https://rxjs.dev/api/index/function/combineLatest)* \nacross cell streams, but we want a *[merge](https://rxjs.dev/api/index/function/merge)*.\n\n\n| |\n| --- |\n\n|

|\n|---|---|\n\nSo here is how you can do it with *views* and *Inputs.bind*.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"## Step 1. Create an unresolved view for the business logic to depend on\n\nWe can quickly create an unresolved view with [`Inputs.input()`](https://github.com/observablehq/inputs/blob/main/README.md#inputsinputvalue). We will fan-in sources to this view.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof config = Inputs.input()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"If the business logic extracts parameters from the *config* variable, then it will not run until it is set to a non-*undefined* value (note grey bar on the left of the cell after notebook startup).\n\nOur example business logic will flash the notebook in a color set by the config.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"businessLogic = {\n yield htl.svg``;\n await new Promise((resolve) => setTimeout(resolve, 100));\n yield undefined;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"## 2. Setup all the sources to be views\n\nNext, we need the sources to be emitting their config to a view's value. \n\nOften, a source is already a view:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof source1 = Inputs.button(\"source1: red\", {\n required: true,\n reduce: () => ({\n color: \"#f002\"\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"source1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"But even if it isn't, it is trivial to create a view from a dataflow variable by writing into an [`Inputs.input()`](https://github.com/observablehq/inputs/blob/main/README.md#inputsinputvalue)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof source2 = Inputs.input()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof var2 = Inputs.button(\"var2: yellow\", {\n required: true,\n reduce: () => ({\n color: \"#ff04\"\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"copyVar2IntoSource2 = {\n viewof source2.value = var2;\n viewof source2.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"source2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"## 3. Bind the source views to the fan-in view backwards\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"connectSources = {\n // Note these appear to be wired backwards!\n // Source is in the target argument slot!\n // Bind is not symmetrical!\n Inputs.bind(viewof source1, viewof config, invalidation);\n Inputs.bind(viewof source2, viewof config, invalidation);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"Now, if either of the sources fire, the business logic is run. Give it a try on the live notebook at [@tomlarkworthy/merge-dataflow](https://observablehq.com/@tomlarkworthy/merge-dataflow)\n\nI 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"footer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"