41:null 42:["$","title",null,{"children":"Full Screen Dashboard Template | a-k | Observable"}] 48: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 `50:[] 46:{"id":"bf36cc819d8572ff","slug":"full-screen-dashboard-template","title":"Full Screen Dashboard Template","thumbnail":"a346462ff3294b81dc9f774fc916026aaf7d8e1cfea39d36bc7e46d8871fe50a","access_level":"public","create_time":"$D2026-08-17T14:51:46.372Z","update_time":"$D2026-08-17T14:52:01.854Z","view_time":null,"first_public_time":"$D2026-08-17T14:51:53.058Z","has_unpublished_edits":null,"fork":{"id":"3c8b082818efd7c9","slug":null,"title":"Full Screen Dashboard Template","owner":{"id":"cf45be0120eccaad","login":"laotzunami","name":"Lao"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0d89ff0d43911832","login":"a-kyselova","name":"a-k","avatar_url":"https://avatars-next.observableusercontent.com/c17731a6346b5dfce53e427b1b871e127393f84a1789e18931f02dc51f940fcc","tier":"starter_2024","bio":"","following":false},"version":371,"publish_version":371,"role":null,"authored":false,"authors":[{"type":"individual","id":"4abdd3c5ac6f602a","login":"akyselova","name":"Anastasiia","avatar_url":"https://avatars-next.observableusercontent.com/f400c814810bb16bc0121a8537885d2f84ff777dc43a704664ad27987b43d9df","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"0d89ff0d43911832","login":"a-kyselova","name":"a-k","avatar_url":"https://avatars-next.observableusercontent.com/c17731a6346b5dfce53e427b1b871e127393f84a1789e18931f02dc51f940fcc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"**Chart:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"**Tabs:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 47:"$46:body"