2a:null 2b:["$","title",null,{"children":"Cell Outputs | Jo Wood | Observable"}] 30:[] 2e:{"id":"81ceec3ab0c1de9e","slug":"cell-output-discussion","title":"Cell Outputs","thumbnail":"dd652d57a77cb873920deec5bb42773ed04832dd9aaa2adfcda3b0e3f714f7fe","access_level":"unlisted","create_time":"$D2026-09-08T14:36:47.452Z","update_time":"$D2026-09-08T17:02:29.177Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":247,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Cell Outputs","cells":[{"id":1,"value":"# Cell Outputs\n\nFor unpinned cells, what would be the ideal Observable cell labels in 2.0 where there may be 0, 1 or many items that could be shown in a single cell?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"## 1. A cell contains some output\n\nThis is the easiest case. Any cell that generates DOM output, including those with an explicit `display()` or `view()` just show that output. Such output takes precedence over any other output. This is existing 2.0 behaviour.\n\nFor example, Plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"Plot.plot({\n width: 300,\n marks: [Plot.dot([{x: 0}, {x: 1}], {x: \"x\", r: 8, fill: \"firebrick\"})]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"Or display,","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\n const a = 1; // Some javascript that will remain hidden because of the display() in this block\n display(md`**Programmatically controlled output**`)\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Or a `view` of an Input component,","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const button = view(Inputs.button(\"Press me\"))","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"---\n\n## 2. A cell contains a single expression\n\nAgain, an easy case and the existing behaviour of Observable 2.0 makes sense here — just show the evaluation of the expression:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Math.PI ** 2","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"`I have ${100-1} green bottles.`","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"((a, b) => a + b)(3, 4) // An IIFE is an expression so its evaluated output treated like any other expression","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"---\n\n## 3. A TS/JS cell is a single function\n\nIn Observable 1.0, where a cell could contain a maximum of one top-level function, it was natural to show some one-line representation of the function name and signature with an invitation to expand it via the left gutter.\n\nCurrently, the cell displays a place-holding ``, which is much better than always exposing the full text of the declaration, but is also misleading. The cell isn't empty, but rather its list of displayable output is empty.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"function myLovelyFunction(a, b) {\n return a + b;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"Technically, reproducing the 1.0 behaviour may be harder to do in Observable 2.0 (although I note that anonymous function expressions are shown in a similar way), but ideally if a cell contains only a single function declaration, we'd have something similar:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function anotherFunction(a, b) {\n return a - b;\n}\n\n// Desired appearance:\ndisplay(md`\\`anotherFunction = ƒ(a, b)\\``);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"---\n\n## 4. A TS/JS cell has more than one declaration or statement\n\nThis is when things are more complicated. Currently 2.0 behaviour is to use the same `` label as for single functions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"{\n const a = 1;\n const b = 2;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"For similar reasons to point 3, while an improvement over showing all content, this is also misleading (it's not empty). My preference would be to have a generic descriptor of content. This sacrifices the specificity of naming a function, but the programmer can always separate into individual cells if this is important.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"{\n const a = 1;\n const b = 2;\n const myFunction = (z) => Math.sqrt(Math.abs(z));\n display(md`\\`

\\``); // Desired output, except should not appear when cell is expanded / pinned.\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"---\n\n## 5. An HTML or markdown cell has a single element with no output\n\nFor example, a `","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"This is styled by the invisible note style above. Edit: These now appear with the empty label.
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"The problem here is the entire cell is invisible and once unpinned, is hard to retrieve.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"\n\nIf the same cell contains some output it can be manipulated even if unpinned
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"Ideally markdown or html cells that contain no output would have some kind of marker as in Observable 1.0","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"\n`\n\n\n<code> ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"---\n\nI've no idea how easy or difficult any of the above would be to implement, nor if there are other edge cases that would make these suggestions unworkable, but I offer them from the point of view of someone who teaches people to learn to use Observable for coding and construction of notebooks and see some of the common problems learners face.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"2"}}
2f:"$2e:body"