31:T481,function showLoadingBar(progress, description = "", bgUrl = "") { const pct = Math.max(0, Math.min(100, progress)); const container = DOM.element("div"); container.className = "loading-bar-container"; // Progress bar SVG const barSvg = svg` `; container.appendChild(barSvg); // Background image element const img = DOM.element("img"); img.src = bgUrl; img.className = "loading-bar-bg-image"; container.appendChild(img); return container; }32:T197b,function podcastFilterUI(data, onSelect) { // Count occurrences const podcastCounts = data.reduce((acc, d) => { acc[d.podcast] = (acc[d.podcast] || 0) + 1; return acc; }, {}); const tagCounts = data.reduce((acc, d) => { d.tags.forEach((tag) => { acc[tag] = (acc[tag] || 0) + 1; }); return acc; }, {}); // Sort by descending count let podcasts = Object.entries(podcastCounts) .sort((a, b) => b[1] - a[1]) .map(([p]) => p); let tags = Object.entries(tagCounts) .sort((a, b) => b[1] - a[1]) .map(([t]) => t); // Apply hiddenTags filtering const topTagLimit = 15; let showAllTags = false; const visibleTags = () => { if (!showAllTags) { // show top 15 excluding hiddenTags return tags.filter((t) => !hiddenTags.includes(t)).slice(0, topTagLimit); } else { // show all tags, including previously hidden and less common ones return tags; } }; const visiblePodcasts = () => podcasts.slice(0, topTagLimit); const dates = data.map((d) => new Date(d.release_date)); const minDate = new Date(Math.min(...dates)); const maxDate = new Date(Math.max(...dates)); const selection = Selection(minDate, maxDate); function updateSelection() { onSelect(selection); } // Helper to create a label with badge function createLabelWithBadge(text, count, onChange) { const label = DOM.element("label"); label.style.marginRight = "8px"; label.style.display = "inline-flex"; label.style.alignItems = "center"; label.style.gap = "4px"; const input = DOM.element("input"); input.type = "checkbox"; input.addEventListener("change", onChange); const span = DOM.element("span"); span.textContent = text; const badge = DOM.element("span"); badge.textContent = count; badge.style.backgroundColor = "#eee"; badge.style.borderRadius = "12px"; badge.style.padding = "0 6px"; badge.style.fontSize = "0.8em"; badge.className = "filter-badge"; label.appendChild(input); label.appendChild(span); label.appendChild(badge); label.className = "filter-label"; return { label, input }; } function createChip(text, count, onChange) { const container = DOM.element("div"); container.style.display = "inline-block"; // Hidden checkbox const input = DOM.element("input"); input.type = "checkbox"; input.className = "chip-input"; input.addEventListener("change", onChange); // Chip label const label = DOM.element("label"); label.className = "chip"; const span = DOM.element("span"); span.textContent = text; const badge = DOM.element("span"); badge.textContent = count; badge.className = "chip-badge"; label.appendChild(span); label.appendChild(badge); // Associate label with input label.htmlFor = text + Math.random().toString(36).substring(2, 7); input.id = label.htmlFor; container.appendChild(input); container.appendChild(label); return { container, input }; } // Containers for dynamic elements const podcastContainer = DOM.element("div"); podcastContainer.className = "filter-section"; const tagContainer = DOM.element("div"); tagContainer.className = "filter-section"; function renderPodcasts() { podcastContainer.innerHTML = ""; visiblePodcasts().forEach((p) => { const podcastDisplayName = podcastNameMap[p] ?? p; const { container, input } = createChip( podcastDisplayName, podcastCounts[p], () => { if (input.checked) selection.podcasts.add(p); else selection.podcasts.delete(p); updateSelection(); } ); // Preserve checked state from selection input.checked = selection.podcasts.has(p); podcastContainer.appendChild(container); }); } function renderTags() { tagContainer.innerHTML = ""; // Determine which tags to show const tagsToShow = showAllTags ? tags : tags.filter((t) => !hiddenTags.includes(t)).slice(0, topTagLimit); tagsToShow.forEach((t) => { const { container, input } = createChip(t, tagCounts[t], () => { if (input.checked) selection.tags.add(t); else selection.tags.delete(t); updateSelection(); }); // Preserve checked state from selection input.checked = selection.tags.has(t); tagContainer.appendChild(container); }); // Show toggle button if there are hidden tags or topTagLimit is applied if (tags.length > topTagLimit || hiddenTags.length > 0) { const toggleButton = DOM.element("button"); toggleButton.style.marginLeft = "8px"; toggleButton.textContent = showAllTags ? "Hide extra tags" : "Show hidden tags"; toggleButton.addEventListener("click", () => { showAllTags = !showAllTags; renderTags(); }); toggleButton.className = "filter-toggle-button"; tagContainer.appendChild(toggleButton); } } // Initial render renderPodcasts(); renderTags(); // Date inputs const fromDateInput = DOM.element("input"); fromDateInput.type = "date"; fromDateInput.value = selection.dateRange[0]; fromDateInput.min = minDate.toISOString().slice(0, 10); fromDateInput.max = maxDate.toISOString().slice(0, 10); fromDateInput.addEventListener("change", () => { selection.dateRange[0] = fromDateInput.value; console.log("changed1", selection.dateRange); updateSelection(); }); const toDateInput = DOM.element("input"); toDateInput.type = "date"; toDateInput.value = selection.dateRange[1]; toDateInput.min = minDate.toISOString().slice(0, 10); toDateInput.max = maxDate.toISOString().slice(0, 10); toDateInput.addEventListener("change", () => { selection.dateRange[1] = toDateInput.value; console.log("changed2", selection.dateRange); updateSelection(); }); const dateContainer = html`

Release Date From: ${fromDateInput}

Release Date To: ${toDateInput}

`; const container = html` `; updateSelection(); // initial call return container; }33:T1156,function resultsUI(searchResults, userHasInputted = false) { const container = DOM.element("div"); container.className = "results-ui-container"; let currentPageIdx = 0; function render() { container.innerHTML = ""; // clear previous // Empty state if (!searchResults || searchResults.length === 0) { const msgNoInput = "Try typing a search term or choose a topic to get started."; const msgNoResults = "Try changing your search parameters"; const emptyView = html`

No items

${userHasInputted ? msgNoResults : msgNoInput}

`; container.appendChild(emptyView); return; } // Episodes for current page const startIdx = currentPageIdx * PAGE_LENGTH; const stopIdx = Math.min( (currentPageIdx + 1) * PAGE_LENGTH, searchResults.length ); const resultsOnPage = searchResults.slice(startIdx, stopIdx); resultsOnPage.forEach((result) => { const ep = result.item; const card = DOM.element("div"); card.className = "episode-card"; const truncatedDescription = ep.description ? ep.description.slice(0, 100) + (ep.description.length > 100 ? "…" : "") : ""; const podcastName = podcastNameMap[ep.podcast] ?? ep.podcast; card.innerHTML = `

${ep.title}

${podcastName}, ${ep.release_date}

Description:

${truncatedDescription}

Tags:

${ep.tags .map((tag) => `${tag}`) .join("")}

`; container.appendChild(card); }); // Pagination const totalPages = Math.ceil(searchResults.length / PAGE_LENGTH); if (totalPages > 1) { const pagination = DOM.element("div"); pagination.className = "pagination-controls"; const createButton = (label, page) => { const btn = DOM.element("button"); btn.textContent = label; btn.disabled = page === null || page === currentPageIdx; btn.className = "page-button"; if (page === currentPageIdx) btn.classList.add("active-page"); btn.addEventListener("click", () => { currentPageIdx = page; render(); }); return btn; }; if (currentPageIdx > 0) pagination.appendChild(createButton("⬅", currentPageIdx - 1)); let startPage = Math.max(0, currentPageIdx - 2); let endPage = Math.min(totalPages - 1, startPage + 4); startPage = Math.max(0, endPage - 4); for (let i = startPage; i <= endPage; i++) { pagination.appendChild(createButton((i + 1).toString(), i)); } if (currentPageIdx < totalPages - 1) pagination.appendChild(createButton("⮕", currentPageIdx + 1)); container.appendChild(pagination); } } render(); return container; }34:T5c5,function showUI(data) { const fuse = new Fuse(data, fuseConfig); let searchText = ""; let searchFilters = Selection(); let firstRenderCompleted = false; function onInputSearch(text) { searchText = text; if (!firstRenderCompleted) return; const results = searchAndFilter(fuse, data, searchText, searchFilters); reRenderResults(results); } function onSelectFilter(filters) { searchFilters = filters; if (!firstRenderCompleted) return; const results = searchAndFilter(fuse, data, searchText, searchFilters); reRenderResults(results); } const searchBar = searchBarUI(onInputSearch); const filterMenu = podcastFilterUI(data, onSelectFilter); const resultsList = resultsUI(data.map((d) => ({ item: d }))); const resultsContainer = html`

${resultsList}

`; function reRenderResults(results) { const hasUserInput = searchText.length !== 0 || searchFilters.podcasts.size !== 0 || searchFilters.tags.size !== 0; const resultsList = resultsUI( results, hasUserInput, (p) => podcastNameMap[p] ?? p ); resultsContainer.innerHTML = ""; resultsContainer.appendChild(resultsList); } const container = html`

${filterMenu}

${searchBar} ${resultsContainer}

`; firstRenderCompleted = true; return container; }35:T1bcb,style = html``36:T454,async function* downloadWithProgress(url) { let chunks = []; let loaded = 0; let total; try { const response = await fetch(url); if (!response.ok) throw new Error("Network error"); const contentLength = response.headers.get("Content-Length"); if (!contentLength) throw new Error("Content-Length header missing"); total = parseInt(contentLength, 10); const reader = response.body.getReader(); while (true) { const { done, value } = await reader.read(); if (done) break; chunks.push(value); loaded += value.length; const progress_percentage = _.round((loaded / total) * 100); yield { progress: progress_percentage, error: null, data: null }; } // Combine chunks into a single Uint8Array const compressed = new Uint8Array(loaded); let offset = 0; for (const chunk of chunks) { compressed.set(chunk, offset); offset += chunk.length; } // Return final data yield { progress: 100, error: null, data: compressed }; } catch (err) { yield { progress: null, error: err, data: null }; } }37:T6ab,/** * Async generator to decompress gzipped data with progress updates. * Yields objects: * - { progress: number, error: null, data: null } during decompression * - { progress: 100, error: null, data: decompressedString } when done * - { progress: null, error: Error, data: null } on error */ async function* decompressGzipWithProgress( compressedData, chunkSize = 64 * 1024 ) { try { const inflator = new pako.Inflate({ to: "string" }); const decompressedChunks = []; // Track how many compressed bytes we've fed let fedBytes = 0; inflator.onData = (chunk) => { decompressedChunks.push(chunk); // approximate progress const progress = Math.min((fedBytes / compressedData.length) * 100, 100); // yield progress asynchronously // we can't yield directly inside the callback, so we'll yield after each push below }; // feed the compressed data in chunks while (fedBytes < compressedData.length) { const end = Math.min(fedBytes + chunkSize, compressedData.length); const chunk = compressedData.subarray(fedBytes, end); inflator.push(chunk, false); // not finished yet fedBytes = end; // yield progress after each chunk yield { progress: Math.min((fedBytes / compressedData.length) * 100, 100), error: null, data: null }; } // finalize inflator.push(new Uint8Array(), true); if (inflator.err) { yield { progress: null, error: new Error(inflator.msg), data: null }; } else { yield { progress: 100, error: null, data: decompressedChunks.join("") }; } } catch (err) { yield { progress: null, error: err, data: null }; } }38:[{"id":"876b689d534625864fe927fae5456b195724fcac517bf1f63d39df1c8fb10437c6d9086dd5d1f913a722b451b1417e3521883ed1d9e50624c174ff2478493bd3","href":"https://static.observableusercontent.com/files/876b689d534625864fe927fae5456b195724fcac517bf1f63d39df1c8fb10437c6d9086dd5d1f913a722b451b1417e3521883ed1d9e50624c174ff2478493bd3","name":"data.csv.gz","type":"application/gzip","lastModified":1775428645720.18,"size":190849},{"id":"def71c8979a7c6235c468e0b3cb318792ca8b3378f44615af8eb71d9d5b438a1648e54fbc87e17ee8867cdd147fb8de11c0c59b26bea67860728d0a6afa9837c","href":"https://static.observableusercontent.com/files/def71c8979a7c6235c468e0b3cb318792ca8b3378f44615af8eb71d9d5b438a1648e54fbc87e17ee8867cdd147fb8de11c0c59b26bea67860728d0a6afa9837c","name":"small-hero.png","type":"image/png","lastModified":1775649063401.747,"size":432941},{"id":"4277ec8a46ba567ea74182eec32c9b76c30e024ca8e30fda7c7243451a81f7f6e85408df2de2412933ce2de300b52d75c11e0f6e136025e431e1c3a9789f64c4","href":"https://static.observableusercontent.com/files/4277ec8a46ba567ea74182eec32c9b76c30e024ca8e30fda7c7243451a81f7f6e85408df2de2412933ce2de300b52d75c11e0f6e136025e431e1c3a9789f64c4","name":"hero.png","type":"image/png","lastModified":1775649101964.278,"size":6241547}] 2f:{"title":"Rad Onc Podcast Search","cells":[{"id":0,"value":"# Rad Onc Podcast Search\n","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"header = {\n const imageEl = await FileAttachment(\n \"hero.png\"\n ).image();\n imageEl.className = \"header-image\";\n const imageContainer = DOM.element(\"div\");\n imageEl.style.maxHeight = \"300px\";\n imageEl.style.width = \"100%\";\n imageEl.style.objectFit = \"cover\";\n imageEl.style.objectPosition = \"50% 65%\";\n imageContainer.appendChild(imageEl);\n return imageContainer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"lastUpdated = md`Last updated: April 5th, 2026`","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"app = App()","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":859,"value":"### File Attachments","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"dataUrl = FileAttachment(\"data.csv.gz\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"imageUrl = FileAttachment(\"small-hero.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"### UI Renderers","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"function showError(error, bgUrl = \"\") {\n let errorMessage = \"\";\n if (error instanceof Error) {\n errorMessage = error.message;\n } else {\n errorMessage = String(error);\n }\n\n const container = DOM.element(\"div\");\n container.className = \"loading-error-container\";\n\n // Background image element\n const img = DOM.element(\"img\");\n img.src = bgUrl;\n img.className = \"loading-error-bg-image\";\n container.appendChild(img);\n\n // Error content\n const content = DOM.element(\"div\");\n content.className = \"loading-error-content\";\n content.appendChild(html`\n ⚠\n Error: ${errorMessage}\n `);\n container.appendChild(content);\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"function showProgressOrThrow(progress, description) {\n if (progress.error) throw progress.error\n if (typeof progress.progress == \"number\" && progress.progress <= 100)\n return showLoadingBar(progress.progress, description, imageUrl);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"function searchBarUI(onSearch) {\n // html tagged template literal for Observable\n const input = html``;\n\n input.addEventListener(\"input\", (e) => {\n const value = e.target.value.trim().toLowerCase();\n onSearch(value);\n });\n\n return html`\n

\n Search for podcasts\n ${input}\n