2b:null 2c:["$","title",null,{"children":"Full Screen Dashboard Template | Lao | Observable"}] 31:T3339,viewof dashboard = { // Inject style cell into once if (!document.querySelector("style[data-dash-style]")) { const styleClone = style.cloneNode(true); styleClone.setAttribute("data-dash-style", ""); document.head.appendChild(styleClone); } if (!compile) { const placeholder = html`

Attach cells to see in dashboard

`; placeholder.value = null; return placeholder; } // Pull main + tabs from the compile cell. Tabs get an auto id so we don't // need the caller to provide one. const main = compile.main; const tabs = compile.tabs.map((t, i) => ({ id: `tab${i + 1}`, label: t.label, el: t.el })); const rootStyle = getComputedStyle(document.documentElement); const readPx = (n) => parseFloat(rootStyle.getPropertyValue(n)); const mainAspectRatio = parseFloat(rootStyle.getPropertyValue("--dash-main-aspect-ratio")); const sideMinWidth = readPx("--dash-side-min-width"); const sideMinHeight = readPx("--dash-side-min-height"); const tabRadius = readPx("--dash-tab-radius"); const container = html`

`; const leftPanel = container.querySelector(".dash__chart-panel"); const rightPanel = container.querySelector(".dash__info-panel"); const btn = container.querySelector(".dash__fullscreen-btn"); const btnText = container.querySelector(".dash__fullscreen-text"); const btnIcon = container.querySelector(".dash__fullscreen-icon"); const tabContent = container.querySelector(".dash__tab-content"); // Mount the cell elements directly (same trick as the sunClock example). // appendChild MOVES the node — the notebook display container becomes empty. leftPanel.insertBefore(main, leftPanel.firstChild); tabs.forEach(t => { t.el.classList.add("dash__tab-pane"); tabContent.appendChild(t.el); }); // Measure fullscreen text const measureTextWidth = (text) => { const c = btnText.cloneNode(false); c.textContent = text; c.style.maxWidth = "none"; c.style.position = "absolute"; c.style.visibility = "hidden"; c.style.left = "-9999px"; document.body.appendChild(c); const w = c.scrollWidth; c.remove(); return w; }; const textWidthMax = Math.max(measureTextWidth("Fullscreen"), measureTextWidth("Exit")); container.style.setProperty("--dash-fullscreen-text-measured-width", textWidthMax + "px"); // Hover/click for fullscreen button label let clickHoldUntil = 0, collapseTimer = null; const expand = () => { if (collapseTimer) { clearTimeout(collapseTimer); collapseTimer = null; } btnText.classList.add("dash__fullscreen-text--expanded"); }; const collapse = () => btnText.classList.remove("dash__fullscreen-text--expanded"); const collapseRespectingHold = () => { const remaining = clickHoldUntil - Date.now(); if (remaining > 0) { if (collapseTimer) clearTimeout(collapseTimer); collapseTimer = setTimeout(() => { collapseTimer = null; if (!btn.matches(":hover")) collapse(); }, remaining); } else collapse(); }; btn.addEventListener("mouseenter", expand); btn.addEventListener("mouseleave", collapseRespectingHold); // Persist activeTabId on the long-lived `39:[] 2f:{"id":"3c8b082818efd7c9","slug":null,"title":"Full Screen Dashboard Template","thumbnail":"a346462ff3294b81dc9f774fc916026aaf7d8e1cfea39d36bc7e46d8871fe50a","access_level":"public","create_time":"$D2026-04-27T16:47:17.288Z","update_time":"$D2026-07-07T04:23:01.197Z","view_time":null,"first_public_time":"$D2026-04-28T19:31:16.561Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":370,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Full Screen Dashboard Template","cells":[{"id":0,"value":"# Full Screen Dashboard Template\n## Detach cells into a full screen layout with a main visual and a sidebar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"compile = attachCell ? {\n main:chart,\n tabs: [\n { el: tab1, label: \"Chart\" },\n { el: tab2, label: \"Item\" },\n { el: tab3, label: \"Export\" }\n ]\n} : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof attachCell = {\n // When true: content cells' elements are routed to the dashboard\n // (their notebook displays end up empty as a side effect)\n // When false: content cells render normally in the notebook;\n // the dashboard renders nothing\n const form = html``;\n const update = () => {\n form.value = form.elements.attach.value === \"true\";\n form.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n };\n form.addEventListener(\"change\", update);\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"**Chart:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"**Tabs:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"## Machinery\nDon't modify these cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 30:"$2f:body"