31:T90c,const headerStyle = "border:1px solid #ddd;padding:4px;text-align:center;vertical-align:middle;"; const dataCellStyle = "border:1px solid #ddd;padding:2px;"; function th(label, {colspan = 1, rowspan = 1, style = headerStyle} = {}) { return html`${label}`; } function td(content, {colspan = 1, rowspan = 1, style = ""} = {}) { return html`${content}`; } const N = boolValues.length; const K = outputKinds.length; const totalDataCols = N * N; // pinned x focused const headerRowCount = 4; // Pinned? / Yes-No / Focused? / Yes-No — always 4 rows, independent of N or K const bodyRowCount = N * K; // hidden x outputKind // Header rows, built from boolValues rather than hardcoded markup. const headerRow1 = html`${td("", {colspan: 4, rowspan: headerRowCount})}${th("Pinned?", {colspan: totalDataCols})}`; const headerRow2 = html`${boolValues.map((pinned) => th(boolLabel(pinned), {colspan: N}))}`; const headerRow3 = html`${boolValues.map(() => th("Focused?", {colspan: N}))}`; const headerRow4 = html`${boolValues.flatMap(() => boolValues.map((focused) => th(boolLabel(focused))))}`; // Body rows, one per (hidden, outputKind) combination, each with one data cell per (pinned, focused) combo. const bodyRows = boolValues.flatMap((hidden, hIdx) => outputKinds.map((outputKind, kIdx) => { const cells = []; if (hIdx === 0 && kIdx === 0) cells.push(th("Hidden?", {rowspan: bodyRowCount})); if (kIdx === 0) { cells.push(th(boolLabel(hidden), {rowspan: K})); cells.push(th("Output?", {rowspan: K})); } cells.push(th(outputLabel(outputKind))); cells.push( ...pinnedFocusedCombos.map(({pinned, focused}) => { const state = {pinned, hidden, outputKind, focused}; const color = matchesNaive(state) ? matchColor : mismatchColor; return td(stateSquare({...state, color}), {style: dataCellStyle}); }) ); return html`${cells}`; }) ); const stateTable = html`${[headerRow1, headerRow2, headerRow3, headerRow4, ...bodyRows]}

`; display(stateTable);32:Taa1,display(html`

<Here’s an example of some code I’d hide>`); const boolValues = [true, false]; const boolLabel = (v) => (v ? "Yes" : "No"); // Output can be: none (no output at all), implicit (inspector shows the // cell's top-level value automatically), or explicit (code calls display()). // "Implicit vs explicit" only makes sense when there *is* output, so this is // modeled as one three-way dimension rather than a separate boolean bit. const outputKinds = ["none", "implicit", "explicit"]; const outputLabel = (k) => k === "none" ? "None" : k === "implicit" ? "Implicit" : "Explicit"; function computeState({pinned, hidden, outputKind, focused}) { if (outputKind === "none") return {editorShown: true, workerShown: false}; if (outputKind === "explicit") { // "hidden" only suppresses the cell's *normal* (implicit) output; an // explicit display() call is shown regardless of hidden. if (pinned) return {editorShown: true, workerShown: true}; return {editorShown: focused, workerShown: true}; } // implicit output if (hidden) return {editorShown: true, workerShown: false}; if (pinned) return {editorShown: true, workerShown: true}; return {editorShown: focused, workerShown: true}; } // The naive mental model: "pinned shows editor, hidden hides output." // It ignores outputKind and focused entirely. function naiveState({pinned, hidden}) { return {editorShown: pinned, workerShown: !hidden}; } function matchesNaive(state) { const actual = computeState(state); const naive = naiveState(state); return ( actual.editorShown === naive.editorShown && actual.workerShown === naive.workerShown ); } function stateSquare({pinned, hidden, outputKind, focused, color = "#222"}) { const {editorShown, workerShown} = computeState({ pinned, hidden, outputKind, focused }); return html`

`; } const matchColor = "#c8f0c8"; const mismatchColor = "#f7c6c6"; // All (pinned, focused) combinations, in the same order used by the table's column headers. const pinnedFocusedCombos = boolValues.flatMap((pinned) => boolValues.map((focused) => ({pinned, focused})) ); 33:[{"id":"6c6408d00d0185a67f0e5011641a62c0e9af9097eeba87c8aa330f78b6fa39f8518032f75f228ac9f48d1ef71b878f90d41276ff2c4ae903762d713776fccb13","href":"https://static.observableusercontent.com/files/6c6408d00d0185a67f0e5011641a62c0e9af9097eeba87c8aa330f78b6fa39f8518032f75f228ac9f48d1ef71b878f90d41276ff2c4ae903762d713776fccb13","name":"image.png","type":"image/png","lastModified":1788480643986,"size":54944}] 2f:{"title":"Thoughts on pinned and hidden","cells":[{"id":1,"value":"# Thoughts on pinned and hidden\n\nThe cell menu lets you toggle two options: _pinned_, and _hidden_.\n\n${await FileAttachment(\"image.png\").image({width: 180})}","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"_Pinned_ means “this cell always shows its editor, even when not being edited.” It’s code you want to look at.\n\n_Hidden_ means “suppress this cell’s normal output.” Like maybe it was an early test of some graphic and you want to keep it handy. Or maybe it’s defining some things, but their values aren’t important, so you hide them.\n\nThe combined possibilities can get confusing.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"## When a cell has no input\nThis can’t happen without bugs. If there’s no input, there can be no output. And empty cells get implicitly deleted, so I can’t even give you an example here.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"## When a cell has input and output\nThis is the most common case. There are four possibilities:","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"`This cell is pinned but not hidden.\nIt always shows both editor (code input) and worker (inspector output).`","pinned":true,"hidden":false,"mode":"ts"},{"id":3,"value":"`This cell is not pinned nor hidden.\nIt always shows worker (inspector output); it only shows editor (code input) if focused.`","pinned":false,"hidden":false,"mode":"ts"},{"id":4,"value":"`This cell is pinned and hidden.\nIt always shows editor (code input); it never shows worker (inspector output).`","pinned":true,"hidden":true,"mode":"ts"},{"id":5,"value":"`This cell is not pinned and is hidden.\nIt always shows editor (code input); it never shows worker (inspector output). Wait… what gives?!`","pinned":false,"hidden":true,"mode":"ts"},{"id":20,"value":"Notice that the second case depends on cell focus: if you focus the cell, the editor appears. (This is the only time that happens.)\n\nAnd notice that only three states are distinct. The last two cases behave the same. If the cell is hidden, we ignore pinned, because you need a place to see some evidence that a cell exists.","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"## When a cell has input and explicit output","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"display(`This cell is pinned but not hidden.\nIt always shows both editor (code input) and worker (inspector output).`)","pinned":true,"hidden":false,"mode":"ts"},{"id":38,"value":"display(`This cell is not pinned nor hidden.\nIt always shows worker (inspector output); it only shows editor (code input) if focused.`)","pinned":false,"hidden":false,"mode":"ts"},{"id":39,"value":"display(`This cell is pinned and hidden.\nIt always shows editor (code input); it still shows worker (inspector output) because I explicitly called display.`)","pinned":true,"hidden":true,"mode":"ts"},{"id":40,"value":"display(`This cell is not pinned and is hidden.\nIt only shows editor (code input) if focused; it always shows worker (inspector output). Wait… what gives?!`)","pinned":false,"hidden":true,"mode":"ts"},{"id":15,"value":"## When a cell has no output\nThis is increasingly common with Vanilla JavaScript in Notebooks 2.0, where statements don’t display anything unless you explicitly call `display`.","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"const a = \"This cell is pinned but not hidden.\"","pinned":true,"hidden":false,"mode":"ts"},{"id":16,"value":"const b = \"This cell is not pinned nor hidden.\"","pinned":false,"hidden":false,"mode":"ts"},{"id":17,"value":"const c = \"This cell is pinned and hidden.\"","pinned":true,"hidden":true,"mode":"ts"},{"id":18,"value":"const d = \"This cell is not pinned and is hidden.\"","pinned":false,"hidden":true,"mode":"ts"},{"id":21,"value":"Here, all four states are indistinguishable. Without any output, we need some “handle” for the cell, and it can only be the editor.","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"## Summary of the status quo\n\nWe have two bits (pinned and hidden) to represent three states (show editor, show worker, show both). Moreover, the signs are flipped: a checkmark in the menu means the opposite thing for editor and worker. And there are exceptions due to needing to show _something_ that mean we often violate the naïve expectation of “if it’s pinned, it shows the code; if it’s hidden, it hide the output.”","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"$31","pinned":false,"hidden":false,"mode":"js"},{"id":31,"value":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

${stateSquare({pinned:false, hidden:false, outputKind:\"implicit\", focused:false})}	shows worker
${stateSquare({pinned:false, hidden:true, outputKind:\"implicit\", focused:false})}	shows editor
${stateSquare({pinned:true, hidden:false, outputKind:\"implicit\", focused:false})}	shows both
	matches naïve expectation
	does not match naïve expectation

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":29,"value":"To be fair, I am treating “pinned” and “hidden” as peers, when they’re not supposed to mean precisely analogous things; “not pinned” doesn’t mean “don’t show the editor”, it means “show when clicked”; there’s no analogous dynamic meaning to “hidden”.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"## Proposal\n\nI think right now my proposal would be something like:\n\n- Bring back implicit inspection of top-level variables, so even definition cells have something to show. It should be able to be collapsed to one line.\n- Collapse the distinction of implicit and explicit outputs.\n- If we want to maintain ternary states — in, out, or both — then they should be presented as a single ternary control toggle, maybe like the illustration above, or like the DevTools docking preferences.\n- If we want to enable quaternary states — in, out, both, or neither — then, when the cell cannot satisfy the author’s configuration of the view, it should show a distinct “tombstone” icon in the notebook, only visible in edit mode. Clicking it would open the editor.","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"As ever, I don’t know if I have the solution, but I hope this has helped describe the problem.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"$32","pinned":false,"hidden":false,"mode":"js"}],"files":"$W33","stdlib":"2","titling":"auto"}