28:null 29:["$","title",null,{"children":"SeaGenes | WabushOnce | Observable"}] 2e:T120a,viewof phageTransferUI = { // Create the container for the listboxes and buttons let container = html`

Selected Phages (0)

Removed Phages (0)

`; // Update the counts in the labels function updateCounts(prefix) { container.querySelector(`#clusterCount${prefix}`).textContent = container.querySelector(`#clusterPhages${prefix}`).options.length; container.querySelector(`#selectedCount${prefix}`).textContent = container.querySelector(`#selectedPhages${prefix}`).options.length; } // Wire up all the move/add/remove buttons function addFunctionality(prefix) { const clusterPhages = container.querySelector(`#clusterPhages${prefix}`); const selectedPhages = container.querySelector(`#selectedPhages${prefix}`); const addAllButton = container.querySelector(`#addAll${prefix}`); const removeAllButton = container.querySelector(`#removeAll${prefix}`); const addSelectedButton = container.querySelector(`#addSelected${prefix}`); const removeSelectedButton = container.querySelector( `#removeSelected${prefix}` ); // Double‑click moves clusterPhages.ondblclick = () => { Array.from(clusterPhages.selectedOptions).forEach((opt) => { selectedPhages.add(new Option(opt.text, opt.value)); opt.remove(); }); updateCounts(prefix); }; selectedPhages.ondblclick = () => { Array.from(selectedPhages.selectedOptions).forEach((opt) => { clusterPhages.add(new Option(opt.text, opt.value)); opt.remove(); }); sortOptions(clusterPhages); updateCounts(prefix); }; // Buttons removeAllButton.onclick = () => { // << Add all (moves everything back) Array.from(selectedPhages.options).forEach((opt) => clusterPhages.add(new Option(opt.text, opt.value)) ); selectedPhages.innerHTML = ""; sortOptions(clusterPhages); updateCounts(prefix); }; addAllButton.onclick = () => { // Remove All >> (moves everything forward) Array.from(clusterPhages.options).forEach((opt) => selectedPhages.add(new Option(opt.text, opt.value)) ); clusterPhages.innerHTML = ""; updateCounts(prefix); }; removeSelectedButton.onclick = () => { // < Add (move selected back) Array.from(selectedPhages.selectedOptions).forEach((opt) => { clusterPhages.add(new Option(opt.text, opt.value)); opt.remove(); }); sortOptions(clusterPhages); updateCounts(prefix); }; addSelectedButton.onclick = () => { // Remove > (move selected forward) Array.from(clusterPhages.selectedOptions).forEach((opt) => { selectedPhages.add(new Option(opt.text, opt.value)); opt.remove(); }); updateCounts(prefix); }; } // Helper to sort options alphabetically function sortOptions(selectEl) { const opts = Array.from(selectEl.options).sort((a, b) => a.value.localeCompare(b.value) ); selectEl.innerHTML = ""; opts.forEach((o) => selectEl.appendChild(o)); } // Initialize addFunctionality("1"); updateCounts("1"); return container; }2f:T1c5b,chart = { const data = cytotoxicity_phage_genes_filtered; const mode = displayMode; // "Percent" or "Number" // ── HSL → HEX helper ──────────────────────────────────────────────────────── function hslToHex(h, s, l) { l /= 100; const a = (s * Math.min(l, 1 - l)) / 100; const f = (n) => { const k = (n + h / 30) % 12; const c = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return Math.round(255 * c) .toString(16) .padStart(2, "0"); }; return `#${f(0)}${f(8)}${f(4)}`; } // ── DEFAULT COLORS & LEGEND MAP ───────────────────────────────────────────── const defaultColors = scores.map((_, i) => hslToHex(190 + (240 * i) / (scores.length - 1), 70, 60) ); const legendMap = {}; scores.forEach((s, i) => { legendMap[s] = defaultColors[i]; }); // ── PHAGES & SEGMENTS ───────────────────────────────────────────────────── const phages = Array.from(new Set(data.map((d) => d.phageID))).sort(); const segments = []; phages.forEach((phageID) => { const recs = data.filter((d) => d.phageID === phageID); const total = recs.length; // raw counts per score: const counts = scores.map( (s) => recs.filter((r) => String(r.Score) === s).length ); // percentages per score: let pcts = counts.map((c) => (total ? (c / total) * 100 : 0)); // adjust rounding error into last bucket const diff = total ? 100 - d3.sum(pcts) : 0; if (pcts.length) pcts[pcts.length - 1] += diff; // choose which values to plot const values = mode === "Percent" ? pcts : counts; // build segment objects, including the raw count let x0 = 0; values.forEach((v, i) => { segments.push({ phageID, score: scores[i], value: v, count: counts[i], // raw count for tooltip x0 }); x0 += v; }); }); // ── SCALES & SVG SETUP ────────────────────────────────────────────────────── const margin = { top: 50, right: 30, bottom: 80, left: 120 }, barHeight = 60, barPadding = 0.4, totalWidth = 800, width = totalWidth - margin.left - margin.right, height = phages.length * barHeight, outerHeight = height + margin.top + margin.bottom; const xMax = mode === "Percent" ? 100 : d3.max(phages, (id) => d3.sum( segments.filter((d) => d.phageID === id), (d) => d.value ) ); const x = d3.scaleLinear().domain([0, xMax]).range([0, width]); const y = d3 .scaleBand() .domain(phages) .range([0, height]) .padding(barPadding); const svg = d3 .create("svg") .attr("viewBox", `0 0 ${totalWidth} ${outerHeight}`) .attr("width", "100%") .style("max-width", `${totalWidth}px`); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // ── TITLE ───────────────────────────────────────────────────────────────── svg .append("text") .attr("x", totalWidth / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", `${titleFontSize}px`) .style("font-weight", "bold") .text( mode === "Percent" ? "Percent of genes per phage by cytotoxicity score" : "Count of genes per phage by cytotoxicity score" ); // ── DRAW BARS ─────────────────────────────────────────────────────────────── const barGroups = g .selectAll("g.bar") .data(segments) .join("g") .attr("transform", (d) => `translate(${x(d.x0)},${y(d.phageID)})`); barGroups .append("rect") .attr("width", (d) => x(d.value)) .attr("height", y.bandwidth()) .attr("fill", (d) => legendMap[d.score]) .attr("stroke", "#000") // Add SVG tooltip .append("title") .text((d) => mode === "Percent" ? `${d.count} genes (${d.value.toFixed(1)}%) with score ${d.score}` : `${d.count} genes with score ${d.score}` ); // ── AXES ─────────────────────────────────────────────────────────────────── g.append("g") .call(d3.axisLeft(y).tickSize(0)) .selectAll("text") .style("font-weight", "bold") .style("font-size", `${axisFontSize}px`); g.append("g") .attr("transform", `translate(0,${height})`) .call( mode === "Percent" ? d3 .axisBottom(x) .ticks(5) .tickFormat((d) => d + "%") : d3.axisBottom(x).ticks(5).tickFormat(d3.format("d")) ) .selectAll("text") .style("font-size", `${axisFontSize}px`); // ── LEGEND WITH color_swatch PICKERS ──────────────────────────────────────── const legend = html`

Cytotoxicity score:

`; scores.forEach((score, i) => { const pickerForm = color_swatch({ value: defaultColors[i] }); const input = pickerForm.querySelector("input[name=input]"); input.addEventListener("input", () => { legendMap[score] = input.value; g.selectAll("rect") .filter((d) => d.score === score) .attr("fill", input.value); }); const item = html`

${pickerForm} ${score}

`; legend.append(item); }); const wrapper = html`

`; wrapper.append(svg.node(), legend); // ── FIGURE LEGEND ────────────────────────────────────────────────────────── const captionText = mode === "Percent" ? `Figure 1: Percentage of genes per phage by cytotoxicity score for the phages: ${phages.join( ", " )}.` : `Figure 1: Count of genes per phage by cytotoxicity score for the phages: ${phages.join( ", " )}.`; const caption = html`

${captionText}

`; wrapper.append(caption); return wrapper; }30:T2b0c,table2 = { // ── 0) Prepare the download buttons ─────────────────────────────────────── const downloadPNG = html``; const downloadXLSX = html``; downloadPNG.style.marginRight = "1em"; downloadPNG.onclick = async () => { const container = document.querySelector(".pham-table-container"); const table = container.querySelector("table.pham-table"); const wrapper = document.createElement("div"); Object.assign(wrapper.style, { position: "absolute", top: "-9999px", left: "-9999px" }); wrapper.appendChild(table.cloneNode(true)); document.body.appendChild(wrapper); const canvas = await html2canvas(wrapper, { backgroundColor: "#fff" }); document.body.removeChild(wrapper); canvas.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "phams_table_full.png"; a.click(); URL.revokeObjectURL(url); }); }; downloadXLSX.onclick = () => { const table = document.querySelector("table.pham-table"); const headers = Array.from(table.querySelectorAll("thead th")).map((th) => th.textContent.trim() ); const rows = Array.from(table.querySelectorAll("tbody tr")).map((tr) => Array.from(tr.querySelectorAll("td")).map((td) => td.textContent.trim()) ); const data = [headers, ...rows]; const ws = xlsx.utils.aoa_to_sheet(data); const wb = xlsx.utils.book_new(); xlsx.utils.book_append_sheet(wb, ws, "Phams"); const wbout = xlsx.write(wb, { bookType: "xlsx", type: "array" }); const blob = new Blob([wbout], { type: "application/octet-stream" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "phams_table.xlsx"; a.click(); URL.revokeObjectURL(url); }; // ── Helpers for diff‑highlighting function names ────────────────────────── function diffHighlight(a, b) { let i = 0; while (i < a.length && i < b.length && a[i] === b[i]) i++; let j = 0; while ( j < a.length - i && j < b.length - i && a[a.length - 1 - j] === b[b.length - 1 - j] ) j++; const prefix = a.slice(0, i); const diffA = a.slice(i, a.length - j) || ""; const diffB = b.slice(i, b.length - j) || ""; const suffix = a.slice(a.length - j); return [ `${prefix}${diffA}${suffix}`, `${prefix}${diffB}${suffix}` ]; } // ── 1) Gather phage IDs and prepare color map ───────────────────────────── const phageIDs = Array.from( new Set(phamGrouped.flatMap((d) => d.entries.map((e) => e.phageID))) ).sort(); const colorScale = { 0: "#ffffff", 1: "#d6e9ff", 2: "#007bff", 3: "#031d44", 4: "#999999" }; // ── 2) Inject CSS ───────────────────────────────────────────────────────── const style = html` `; // ── 3) Sort phamGrouped and prepare groupedRecords ──────────────────────── const sortedPham = phamGrouped .slice() .sort((a, b) => +a.phamName - +b.phamName); // keep records for translation download const groupedRecords = sortedPham.map((d) => ({ phamName: d.phamName, entries: d.entries })); // ── 4) Build table HTML ─────────────────────────────────────────────────── const tbl = html` ${phageIDs.map((id) => html``)} ${sortedPham.map(({ phamName, entries }, idx) => { const uniquePhages = new Set(entries.map((e) => e.phageID)).size; const scoreCounts = entries.reduce((acc, e) => { acc[e.Score] = (acc[e.Score] || 0) + 1; return acc; }, {}); const maxScoreMatches = Math.max(...Object.values(scoreCounts)); // distinct functions const rawFns = Array.from( new Set(entries.map((e) => e.genefunction).filter(Boolean)) ); // build highlighted fnHTML with phage lists let fnHTML; if (rawFns.length <= 1) { fnHTML = rawFns[0] || "–"; } else if (rawFns.length === 2) { const [hA, hB] = diffHighlight(rawFns[0], rawFns[1]); const phsA = Array.from( new Set( entries .filter((e) => e.genefunction === rawFns[0]) .map((e) => e.phageID) ) ).join(", "); const phsB = Array.from( new Set( entries .filter((e) => e.genefunction === rawFns[1]) .map((e) => e.phageID) ) ).join(", "); fnHTML = `${hA} (${phsA})
${hB} (${phsB})`; } else { fnHTML = rawFns .map((fn) => { const phs = Array.from( new Set( entries .filter((e) => e.genefunction === fn) .map((e) => e.phageID) ) ).join(", "); return `${fn} (${phs})`; }) .join("
"); } return html` ${phageIDs.map((id) => { const phEntries = entries.filter((e) => e.phageID === id); if (!phEntries.length) { return html``; } const names = phEntries.map((e) => e.name).join(", "); const score = phEntries[0].Score; const bg = colorScale[score]; const textColor = score >= 2 ? "#fff" : "#000"; return html` `; })} `; })}

Shared Pham	Function	Translations	# Scores	Score Matches	${id}
${phamName}	${html([fnHTML])}		${uniquePhages}	${maxScoreMatches}		${names}

`; // ── 5) Build legend ──────────────────────────────────────────────────────── const legend = html`

Cytotoxicity score ${Object.entries(colorScale).map( ([score, color]) => html` ${score} ` )}

`; // ── 6) Wrap UI ──────────────────────────────────────────────────────────── const container = html`

${style}

${downloadPNG}${downloadXLSX}

${tbl}

${legend}

`; // ── 7) Attach translation download handlers ─────────────────────────────── groupedRecords.forEach((g, idx) => { const btn = container.querySelector(`button[data-idx="${idx}"]`); btn.onclick = () => { const fasta = g.entries .map((e) => `>${e.phageID}_${e.name}\n${e.translation}`) .join("\n"); const blob = new Blob([fasta], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${g.phamName}_translations.fasta`; a.click(); URL.revokeObjectURL(url); }; }); // ── 8) Click‑to‑sort with special Function‑column rule ──────────────────── const tableEl = container.querySelector("table.pham-table"); const headers = Array.from(tableEl.querySelectorAll("th")); headers.forEach((th, colIndex) => { th._asc = true; th.addEventListener("click", () => { const isFunctionCol = colIndex === 1; const tbody = tableEl.querySelector("tbody"); const rows = Array.from(tbody.querySelectorAll("tr")); rows.sort((a, b) => { let aText = a.children[colIndex].textContent.trim(); let bText = b.children[colIndex].textContent.trim(); if (isFunctionCol) { if (aText === "–" && bText !== "–") return 1; if (aText !== "–" && bText === "–") return -1; } const emptyA = aText === ""; const emptyB = bText === ""; if (emptyA && !emptyB) return 1; if (!emptyA && emptyB) return -1; const numA = parseFloat(aText), numB = parseFloat(bText); let cmp; if (!isNaN(numA) && !isNaN(numB)) cmp = numA - numB; else cmp = aText.localeCompare(bText); return th._asc ? cmp : -cmp; }); rows.forEach((r) => tbody.appendChild(r)); th._asc = !th._asc; }); }); return container; }31:T1877,tableFunctionByPham = { const data = groupedByFunction; const maxPhams = Math.max(...data.map((d) => d.Phams.length)); const scoreColors = { 0: "#ffffff", 1: "#d6e9ff", 2: "#007bff", 3: "#031d44", 4: "#999999" }; const container = html`

${Array.from( { length: maxPhams }, (_, i) => html` ` )} ${data.map((row, idx) => { const records = row.Phams.flatMap((ph) => ph.items); const totalCount = records.length; const counts = {}; records.forEach((item) => { counts[item.Score] = (counts[item.Score] || 0) + 1; }); let maxCount = 0, maxScore = ""; for (const [sc, cnt] of Object.entries(counts)) { if (cnt > maxCount) { maxCount = cnt; maxScore = sc; } } return html` ${Array.from({ length: maxPhams }, (_, i) => { const ph = row.Phams[i]; return html` `; })} `; })}

Function	Translation	Total Scores	Max Score Count	Pham ${i + 1}
${row.Function}		${totalCount}	${maxCount} (${maxScore})	${ ph ? html` ${ph.Pham} ${ph.items.map( (item) => html` ${item.phageID}_${item.name} ${item.Score} ` )} ` : "" }

Cytotoxicity score: ${Object.entries(scoreColors).map( ([s, c]) => html` ${s} ` )}

`; // attach download handlers data.forEach((row, idx) => { const btn = container.querySelector(`#download-${idx}`); if (btn) btn.onclick = () => { const records = row.Phams.flatMap((ph) => ph.items); let fasta = ""; for (const item of records) { fasta += ">" + item.phageID + "_" + item.name + "\n" + item.translation + "\n"; } const blob = new Blob([fasta], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = row.Function.replace(/\s+/g, "_") + ".fasta"; a.click(); URL.revokeObjectURL(url); }; }); // add click-to-sort const tableEl = container.querySelector("table.func-pham-table"); Array.from(tableEl.querySelectorAll("th")).forEach((th, ci) => { th._asc = true; th.addEventListener("click", () => { const tbody = tableEl.tBodies[0]; const rows = Array.from(tbody.rows); rows.sort((a, b) => { const A = a.cells[ci].textContent.trim(); const B = b.cells[ci].textContent.trim(); const emptyA = A === "" || A === "–"; const emptyB = B === "" || B === "–"; if (emptyA && !emptyB) return 1; if (!emptyA && emptyB) return -1; const nA = parseFloat(A), nB = parseFloat(B); let cmp = !isNaN(nA) && !isNaN(nB) ? nA - nB : A.localeCompare(B); return th._asc ? cmp : -cmp; }); rows.forEach((r) => tbody.appendChild(r)); th._asc = !th._asc; }); }); return container; }32:T99d,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach((key) => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); // Only append an for non‐color inputs if (type !== "color") { form.append( html`` ); } if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; // Only update if it exists (i.e. non‐color) if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.firstChild) form.output.removeChild(form.output.firstChild); form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = (e) => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } while (form.firstChild) { wrapper.appendChild(form.firstChild); } form.append(wrapper); return form; }33:T431,formWithSubmit = (form) => { const container = html`

${form}`; form.addEventListener("submit", async (event) => { event.preventDefault(); container.value = formValue(form); container.dispatchEvent(new CustomEvent("input")); // document.getElementById("login-form").style.display = "none"; let user; try { user = await d3.json(`https://classic.phamerator.org/api/profile`, { headers: new Headers({ Authorization: `Basic ${base64.encode( `${formValue(form).email}:${formValue(form).password}` )}` }) }); } catch (error) { console.log(error); return; } const formSelection = d3.select("#login-form"); formSelection.transition().duration(1250).style("opacity", 0); formSelection.transition().delay(1250).style("display", "none"); }); form.addEventListener("input", (event) => { event.preventDefault(); // Need this, because otherwise the viewof Generator catches bubbling input events event.stopPropagation(); }); return container; }34:[] 2c:{"id":"3d2f0d76993cd3b5","slug":"cytotoxic_seagenes","title":"SeaGenes","thumbnail":"4efb0e9de3adbc3d19df0796e895f4005dc1e92d1119ebad0b8ccad1ce78bf69","access_level":"public","create_time":"$D2025-05-08T11:33:42.302Z","update_time":"$D2026-06-01T14:27:57.172Z","view_time":null,"first_public_time":"$D2025-05-11T02:51:12.491Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d1dfc5f860fb8699","login":"phage","name":"WabushOnce","avatar_url":"https://avatars-next.observableusercontent.com/9303f26b98fd8f7e04b66a6ac3218bfd2ca7e146f15ba24ca32ffac15f802763","tier":"starter_2024"},"version":2252,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3035ce62f81ebcd9","login":"phage","name":"WabushOnce","avatar_url":"https://avatars-next.observableusercontent.com/9303f26b98fd8f7e04b66a6ac3218bfd2ca7e146f15ba24ca32ffac15f802763","tier":null}],"members":[{"type":"individual","id":"3035ce62f81ebcd9","login":"phage","name":"WabushOnce","avatar_url":"https://avatars-next.observableusercontent.com/9303f26b98fd8f7e04b66a6ac3218bfd2ca7e146f15ba24ca32ffac15f802763","tier":null,"role":"editor"},{"type":"team","id":"d1dfc5f860fb8699","login":"phage","name":"WabushOnce","avatar_url":"https://avatars-next.observableusercontent.com/9303f26b98fd8f7e04b66a6ac3218bfd2ca7e146f15ba24ca32ffac15f802763","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SeaGenes","cells":[{"id":0,"value":"# SeaGenes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2167,"value":"terms","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"\n### Questions, Comments, or Feedback?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2137,"value":"viewof email = {\n const container = html``;\n\n const user = \"kfurl048\";\n const site = \"uottawa\";\n const tld = \"ca\";\n const address = `${user}@${site}.${tld}`;\n\n const message = document.createTextNode(\n \"For questions about this Notebook please email: \"\n );\n const link = document.createElement(\"a\");\n link.href = `mailto:${address}`;\n link.textContent = address;\n\n container.appendChild(message);\n container.appendChild(link);\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2230,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2164,"value":"viewof apiKey = {\n const savedKey = localStorage.getItem(\"phamerator_api_key\") || \"\";\n\n const input = Inputs.password({\n label: \"Enter your Phamerator API Key\",\n value: savedKey,\n placeholder: \"Key is saved locally...\"\n });\n\n input.addEventListener(\"input\", () => {\n localStorage.setItem(\"phamerator_api_key\", input.value);\n });\n\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2233,"value":"user_status = user?._error\n ? html`

${user._error}

`\n : user\n ? html`

Connected to Phamerator as ${user.email}

`\n : html`

Enter your Phamerator API key to continue.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"## 1. Select the Phamerator Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"viewof dataset = {\n if (!user) {\n return html`

\n Enter your Phamerator API key to load available datasets.\n

`;\n }\n\n if (user._error) {\n return html`

\n ${user._error}\n

`;\n }\n\n if (!Array.isArray(user.datasets)) {\n return html`

\n Could not load your Phamerator datasets. Please check your API key and try again.\n

`;\n }\n\n return Inputs.select(user.datasets.slice().sort(), {\n label: \"Select a data set\",\n value: user.datasets.includes(\"Actino_Draft\")\n ? \"Actino_Draft\"\n : user.datasets[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"## 2. Open the Cytotoxicity Spreadsheet\nThe spreadsheet should have three columns : Phage, Gene, and Score","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"// 3️⃣ Render a file‑upload button and expose the chosen File\nviewof cytotoxicityFile = Inputs.file({\n accept: \".xlsx,.xls\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"## 3. Select Phages to be included in the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":855,"value":"//This is error checking. It will show phages which are in the cytoxicity spreadsheet but which are found in Phamerator. This may be due to a spelling error in the phage name.\nmissingPhageMessage = missingPhage.length > 0\n ? md`\nNote: The phage${missingPhage.length > 1 ? \"s\" : \"\"} ${missingPhage\n .map((p) => `**${p}**`)\n .join(\n \", \"\n )} are listed in the cytotoxicity spreadsheet but are not found in Phamerator. Please verify the phage names in the spreadsheet.\n`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"viewof refreshButton = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2110,"value":"html`${\n cytotoxicityFile == null\n ? `

\n Cytotoxicity Spreadsheet not loaded.\n

`\n : duplicatesReport == null\n ? `

\n Cytotoxicity Spreadsheet not loaded.\n

`\n : !Array.isArray(duplicatesReport)\n ? `

\n Could not check for duplicate Gene entries.
\n The duplicate report is not in the expected format.\n

`\n : duplicatesReport.length > 0\n ? `

\n ⚠️ Duplicate Gene entries found:

\n ${duplicatesReport.join(\"

\")}\n

`\n : \"\"\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"---\n## Figure Data\n
\nTable 1. The table dataset contains each phage's gene data from Phamerator and adds a Score field from the Cytotoxicity Spreadsheet to each Phamerator gene.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"cytotoxicity_phage_genes_filtered","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":670,"value":"## Figure 1. Cytotoxicity score of phage genes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":756,"value":"// Add this in its own cell\nviewof displayMode = Inputs.radio([\"Percent\", \"Number\"], {\n label: \"Display options\",\n value: \"Percent\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":"To remove the labels, set the fonts sizes to 0","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1301,"value":"// 1) Two controls for font sizes\nviewof titleFontSize = Inputs.number({\n label: \"Title font size (px)\",\n min: 0,\n max: 36,\n step: 2,\n value: 18\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"viewof axisFontSize = Inputs.number({\n label: \"Axis font size (px)\",\n min: 0,\n max: 24,\n step: 1,\n value: 14\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"viewof legendFontSize = Inputs.number({\n label: \"Legend font size (px)\",\n min: 0,\n max: 24,\n step: 1,\n value: 14\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"viewof captionFontSize = Inputs.number({\n label: \"Figure‑legend font size (px)\",\n min: 0,\n max: 24,\n step: 1,\n value: 16\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"---\n## Figure 2. Phage gene cytotoxicity scores grouped by Pham","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1542,"value":"---\n## Figure 3. Phages Gene Cytotoxicity Scores Grouped by Function ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1702,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2099,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"---\n# Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1450,"value":"## Phage Data Selection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":662,"value":"### Button to Select the Spreadsheet Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"// 1️⃣ Import the XLSX parsing library\nxlsx = require(\"xlsx@0.18.5\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"workbook = (async () => {\n if (!cytotoxicityFile) return null;\n const buffer = await cytotoxicityFile.arrayBuffer();\n return xlsx.read(buffer, { type: \"array\" });\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"### Phage Selection Listbox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1389,"value":"(viewof refreshButton.onclick = () => {\n mutable cytotoxicity_Spreadsheet_Data_Formatted_Headers = updatePhageGenes();\n console.log(\n \"Now showing:\",\n Object.keys(cytotoxicity_Spreadsheet_Data_Formatted_Headers)\n );\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"function updatePhageGenes() {\n const selectedList = Array.from(\n document.querySelectorAll(\"#clusterPhages1 option\")\n ).map((o) =>\n o.value.endsWith(\"_Draft\") ? o.value.replace(\"_Draft\", \"\") : o.value\n );\n\n const allHeaders = cytotoxicity_Spreadsheet_Data\n .map(({ A, B, C, ...rest }) => ({\n Phage: A,\n Gene: B,\n Score: C,\n ...rest\n }))\n .reduce((acc, row) => {\n const { Phage, Gene, Score, ...extras } = row;\n acc[Phage] = acc[Phage] || [];\n acc[Phage].push({ Gene, Score, ...extras });\n return acc;\n }, {});\n\n return selectedList\n .filter((p) => p in allHeaders)\n .reduce((out, p) => ((out[p] = allHeaders[p]), out), {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"## Get Cytotoxicity Data from the Spreadsheet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":624,"value":"// 5️⃣ Convert the first sheet into JSON row objects\ncytotoxicity_Spreadsheet_Data = workbook\n ? xlsx.utils.sheet_to_json(\n workbook.Sheets[workbook.SheetNames[0]],\n { defval: null } // keep empty cells as null\n )\n : []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1635,"value":"//Get the SpreadSheet's Column Names but remove any EMPTY columns that were added\ncytotoxicity_Spreadsheet_Column_Names = [\n ...new Set(cytotoxicity_Spreadsheet_Data.flatMap((row) => Object.keys(row)))\n].filter((col) => col && !col.startsWith(\"__EMPTY\") && col.trim() !== \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"cytotoxicity_Spreadsheet_Phages = Array.from(\n new Set(cytotoxicity_Spreadsheet_Data.map((d) => d.Phage))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"cleanedData = cytotoxicity_Spreadsheet_Data.map((row) => {\n const trimmed = {};\n Object.entries(row).forEach(([key, value]) => {\n const trimmedKey = key.trim();\n if (trimmedKey && !trimmedKey.startsWith(\"__EMPTY\")) {\n trimmed[trimmedKey] = value;\n }\n });\n return trimmed;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2116,"value":"firstRow = cleanedData[0];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2118,"value":"//In case the user makes a spelling mistake in the spreadsheet's column header names then default them to Phage, Gene, and Score\norderedKeys = Object.keys(firstRow)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2120,"value":"formattedRows = cleanedData.map((row) => {\n const newRow = {\n Phage: row[orderedKeys[0]],\n Gene: row[orderedKeys[1]], // Force second column to be called \"Gene\"\n Score: row[orderedKeys[2]]\n };\n\n // Add any remaining columns (excluding the first three)\n for (let i = 3; i < orderedKeys.length; i++) {\n const key = orderedKeys[i];\n newRow[key] = row[key];\n }\n\n return newRow;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"mutable cytotoxicity_Spreadsheet_Data_Formatted_Headers = formattedRows.reduce(\n (acc, row) => {\n const { Phage, Gene, Score, ...extras } = row;\n if (!acc[Phage]) acc[Phage] = [];\n acc[Phage].push({ Gene, Score, ...extras });\n return acc;\n },\n {}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2123,"value":"duplicatesReport = {\n if (!cytotoxicityFile) return null;\n\n if (\n cytotoxicity_Spreadsheet_Data_Formatted_Headers == null ||\n typeof cytotoxicity_Spreadsheet_Data_Formatted_Headers !== \"object\"\n ) {\n return null;\n }\n\n const duplicates = [];\n\n for (const [phage, records] of Object.entries(\n cytotoxicity_Spreadsheet_Data_Formatted_Headers\n )) {\n if (!Array.isArray(records)) continue;\n\n const seen = new Set();\n const repeated = new Set();\n\n for (const record of records) {\n const gene = record?.Gene;\n\n if (gene == null || gene === \"\") continue;\n\n const geneKey = String(gene);\n\n if (seen.has(geneKey)) {\n repeated.add(geneKey);\n } else {\n seen.add(geneKey);\n }\n }\n\n if (repeated.size > 0) {\n duplicates.push(\n `${phage}: duplicate Gene ${[...repeated].join(\", \")}`\n );\n }\n }\n\n return duplicates;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"## Get Phamerator Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2198,"value":"getPhameratorData = (dataset, endpoint, apiKey) => {\n return d3.json(`https://classic.phamerator.org/api/${dataset}${endpoint}`, {\n headers: new Headers({\n Authorization: `Bearer ${apiKey}`\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"cytotoxicity_phage_phamerator_genes = await (async () => {\n if (!apiKey) return {};\n\n const result = {};\n\n for (const phage of cytotoxicity_Spreadsheet_Phages) {\n try {\n const res = await getPhameratorData(\n dataset,\n `/genes/${encodeURIComponent(phage)}`,\n apiKey\n );\n\n if (res && typeof res === \"object\" && res.message) {\n throw new Error(res.message);\n }\n\n result[phage] = res;\n } catch (err) {\n console.error(`Error fetching ${phage}:`, err);\n result[phage] = { _error: err.message };\n }\n }\n\n return result;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"// Once cytotoxicity_phage_phamerator_genes is ready, compute missingPhage\nmissingPhage = Object.entries(cytotoxicity_phage_phamerator_genes)\n .filter(([phage, data]) => data && data._error)\n .map(([phage]) => phage)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"## Figure Data\nCombine Phamerator Data and the Cytotoxicity Scores ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"cytotoxicity_phage_genes_filtered = Object.entries(\n cytotoxicity_Spreadsheet_Data_Formatted_Headers\n).flatMap(([phage, toxRecords]) => {\n // 1. Build a Map from gene‑ID → Score\n const scoreMap = new Map(toxRecords.map((r) => [String(r.Gene), r.Score]));\n\n // 2. Grab raw gene data\n const raw = cytotoxicity_phage_phamerator_genes[phage] || [];\n\n // 3. Normalize into a real JS array\n const allGenes = Array.isArray(raw)\n ? raw\n : Array.isArray(raw.genes)\n ? raw.genes\n : Array.isArray(raw.features)\n ? raw.features\n : [];\n\n // 4. Filter to only genes in your toxRecords, then attach Score\n return allGenes\n .filter((g) => scoreMap.has(String(g.name)))\n .map((g) => ({\n ...g,\n Score: scoreMap.get(String(g.name))\n }));\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"## Figure 1. Bar Chart Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"//Get the unique cytotoxicity score values\nscores = Array.from(\n new Set(cytotoxicity_phage_genes_filtered.map((d) => String(d.Score)))\n).sort((a, b) => {\n const na = +a,\n nb = +b;\n return !isNaN(na) && !isNaN(nb) ? na - nb : a.localeCompare(b);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"### Color Swatch Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1222,"value":"function color_swatch(config = {}) {\n const {\n value = \"#DCE1E4\",\n title,\n description,\n disabled,\n submit,\n display\n } = typeof config === \"string\" ? { value: config } : config;\n const form = input({\n type: \"color\",\n title,\n description,\n submit,\n display,\n attributes: { disabled, value }\n });\n // The following two lines are a bugfix for Safari, which hopefully can be removed in the future.\n form.input.value = \"\";\n form.input.value = value;\n if (title || description) form.input.style.margin = \"5px 0\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"## Figure 2. Cytotoxicity Score Chart Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":492,"value":"map = cytotoxicity_phage_genes_filtered.reduce(\n (acc, { phamName, phageID, Score, genefunction, name, translation }) => {\n if (!acc.has(phamName)) acc.set(phamName, []);\n acc.get(phamName).push({ phageID, Score, genefunction, name, translation });\n return acc;\n },\n new Map()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"phamGrouped = Array.from(map, ([phamName, entries]) => ({\n phamName,\n entries\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"html2canvas = require(\"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1522,"value":"## Figure 3. Group Scores by Gene Function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1508,"value":"// 1) Filter out entries with no genefunction\nwithFunction = cytotoxicity_phage_genes_filtered.filter(\n (d) => d.genefunction && d.genefunction.trim() !== \"\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"groupedByFunction = (() => {\n // 1) Build a nested map: { [function]: { [pham]: [records] } }\n const temp = withFunction.reduce((acc, d) => {\n const fn = d.genefunction;\n const pham = d.phamName;\n\n if (!acc[fn]) acc[fn] = {};\n if (!acc[fn][pham]) acc[fn][pham] = [];\n\n acc[fn][pham].push(d);\n return acc;\n }, {});\n\n // 2) Convert to an array, sort both levels, and rename keys\n return Object.keys(temp)\n .sort((a, b) => a.localeCompare(b))\n .map((fn) => ({\n Function: fn, // top‐level field name\n Phams: Object.keys(temp[fn]) // subarray under “Phams”\n .sort((a, b) => a.localeCompare(b))\n .map((pham) => ({\n Pham: pham, // renamed subarray field\n items: temp[fn][pham] // the original records\n }))\n }));\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"---\n# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":569,"value":"import { Plot } from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"import { button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"import { color } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"// 1️⃣ Import D3 v7\nd3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"inputs = require(\"@observablehq/inputs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2162,"value":"# Login Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2203,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2169,"value":"import { terms, styles } from \"@cresawn-labs/phamerator-api-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2173,"value":"user = getUser(apiKey)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2175,"value":"getUser = async (apiKey) => {\n if (!apiKey) return null;\n\n try {\n const user = await d3.json(`https://classic.phamerator.org/api/profile`, {\n headers: new Headers({\n Authorization: `Bearer ${apiKey}`\n })\n });\n\n delete user.apiKeys;\n user.password = apiKey;\n\n return user;\n } catch (error) {\n return {\n _error:\n error.status === 401 || String(error).includes(\"401\")\n ? \"Invalid Phamerator API key. Please check your key and try again.\"\n : `Could not connect to Phamerator: ${error.message || error}`\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2177,"value":"base64 = require(\"base-64\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2179,"value":"formData = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2181,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2193,"value":"import { formValue } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"