28:null 29:["$","title",null,{"children":"Phage Pham Presence/Absence Heatmap | WabushOnce | Observable"}] 2e:T229e,viewof selectedPhages = { phageNames; const listHeight = 390; const available = html` `; const selectedList = html`

`; const availableCount = html`0`; const selectedCount = html`0`; let selectedPhageValues = []; let draggedIndex = null; for (const phage of phageNames) { available.appendChild(new Option(phage, phage)); } const add = html``; const remove = html``; const removeAll = html``; const addAnnotated = html``; const addDraft = html``; const removeAnnotated = html``; const removeDraft = html``; const moveUp = html``; const moveDown = html``; const moveTop = html``; const moveBottom = html``; function sortSelect(select) { Array.from(select.options) .sort((a, b) => d3.ascending(a.value, b.value)) .forEach((o) => select.appendChild(o)); } function updateCounts() { availableCount.textContent = available.options.length; selectedCount.textContent = selectedPhageValues.length; } function updateValue() { container.value = selectedPhageValues.slice(); updateCounts(); container.dispatchEvent(new CustomEvent("input")); } function renderSelectedList() { selectedList.innerHTML = ""; selectedPhageValues.forEach((phage, index) => { const row = html`

${phage}

`; row.onclick = (event) => { if (!event.ctrlKey && !event.metaKey && !event.shiftKey) { Array.from(selectedList.children).forEach((el) => { el.dataset.selected = "false"; el.style.background = "white"; }); } row.dataset.selected = row.dataset.selected === "true" ? "false" : "true"; row.style.background = row.dataset.selected === "true" ? "#cfe8ff" : "white"; }; row.ondragstart = (event) => { draggedIndex = index; row.style.opacity = "0.5"; event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("text/plain", phage); }; row.ondragend = () => { draggedIndex = null; row.style.opacity = "1"; }; row.ondragover = (event) => { event.preventDefault(); row.style.borderTop = "2px solid #1f77b4"; }; row.ondragleave = () => { row.style.borderTop = "none"; }; row.ondrop = (event) => { event.preventDefault(); row.style.borderTop = "none"; const dropIndex = index; if (draggedIndex === null || draggedIndex === dropIndex) return; const [moved] = selectedPhageValues.splice(draggedIndex, 1); selectedPhageValues.splice(dropIndex, 0, moved); renderSelectedList(); updateValue(); }; selectedList.appendChild(row); }); } function getSelectedRows() { return Array.from(selectedList.children) .filter((row) => row.dataset.selected === "true") .map((row) => row.textContent); } function moveSelectedToAvailable() { const selectedRows = new Set(getSelectedRows()); if (!selectedRows.size) return; selectedPhageValues = selectedPhageValues.filter((phage) => { if (selectedRows.has(phage)) { available.appendChild(new Option(phage, phage)); return false; } return true; }); sortSelect(available); renderSelectedList(); updateValue(); } function addPhages(phages) { for (const phage of phages) { if (selectedPhageValues.includes(phage)) continue; selectedPhageValues.push(phage); const option = Array.from(available.options).find( (o) => o.value === phage ); if (option) option.remove(); } renderSelectedList(); updateValue(); } function moveSelected(fromFilter = null) { const phages = Array.from(available.options) .filter((o) => o.selected && (!fromFilter || fromFilter(o.value))) .map((o) => o.value); addPhages(phages); } function moveAllMatching(filterFn) { const phages = Array.from(available.options) .filter((o) => filterFn(o.value)) .map((o) => o.value); addPhages(phages); } function removeAllMatching(filterFn) { selectedPhageValues = selectedPhageValues.filter((phage) => { if (filterFn(phage)) { available.appendChild(new Option(phage, phage)); return false; } return true; }); sortSelect(available); renderSelectedList(); updateValue(); } function reorderSelected(direction) { const selectedSet = new Set(getSelectedRows()); if (!selectedSet.size) return; if (direction === "up") { for (let i = 1; i < selectedPhageValues.length; i++) { if ( selectedSet.has(selectedPhageValues[i]) && !selectedSet.has(selectedPhageValues[i - 1]) ) { [selectedPhageValues[i - 1], selectedPhageValues[i]] = [ selectedPhageValues[i], selectedPhageValues[i - 1] ]; } } } if (direction === "down") { for (let i = selectedPhageValues.length - 2; i >= 0; i--) { if ( selectedSet.has(selectedPhageValues[i]) && !selectedSet.has(selectedPhageValues[i + 1]) ) { [selectedPhageValues[i + 1], selectedPhageValues[i]] = [ selectedPhageValues[i], selectedPhageValues[i + 1] ]; } } } if (direction === "top") { selectedPhageValues = [ ...selectedPhageValues.filter((p) => selectedSet.has(p)), ...selectedPhageValues.filter((p) => !selectedSet.has(p)) ]; } if (direction === "bottom") { selectedPhageValues = [ ...selectedPhageValues.filter((p) => !selectedSet.has(p)), ...selectedPhageValues.filter((p) => selectedSet.has(p)) ]; } renderSelectedList(); updateValue(); } const isDraft = (phage) => phage.endsWith("_Draft"); const isAnnotated = (phage) => !phage.endsWith("_Draft"); add.onclick = () => moveSelected(); addAnnotated.onclick = () => moveAllMatching(isAnnotated); addDraft.onclick = () => moveAllMatching(isDraft); remove.onclick = () => moveSelectedToAvailable(); removeAll.onclick = () => removeAllMatching(() => true); removeAnnotated.onclick = () => removeAllMatching(isAnnotated); removeDraft.onclick = () => removeAllMatching(isDraft); moveUp.onclick = () => reorderSelected("up"); moveDown.onclick = () => reorderSelected("down"); moveTop.onclick = () => reorderSelected("top"); moveBottom.onclick = () => reorderSelected("bottom"); available.ondblclick = () => moveSelected(); const container = html`

Available phages (${availableCount})
${available}

${addAnnotated} ${removeAnnotated}

${addDraft} ${removeDraft}

${add} ${remove} ${removeAll}

Order selected phages ${moveTop} ${moveUp} ${moveDown} ${moveBottom}

Selected phages (${selectedCount})
${selectedList}

Drag phages up or down to reorder them. Ctrl-click to select multiple. This order is used in the heatmap when Cluster phage columns is unchecked.

`; container.value = []; renderSelectedList(); updateCounts(); return container; }2f:T587b,viewof heatmapControls = { const defaultFunctionalGroupColors = { unknown: "#D9EAF7", "structure/packaging": "#FFE3B3", "tail/host recognition": "#F7C6BF", "integration/recombination": "#D8E6D1", "DNA replication": "#DDD5F2", lysis: "#F9D4D4", regulation: "#FFE7C7", tRNA: "#E6E2B3", other: "#E6E6E6" }; const functionalGroupColorInputs = Object.fromEntries( Object.entries(defaultFunctionalGroupColors).map(([group, color]) => [ group, html`` ]) ); const functionalGroupColorPanel = html` `; const clusterPhageColumnsInput = html` Cluster phage columns`; const swapAxesInput = html` Swap axes`; const groupOrphamsInput = html` Group phams present in ≤ as Orphams `; const groupUnknownBroadGroupOrphamsOnlyInput = html` Only group Orphams in the unknown broad group `; const orphamGroupingControls = html` ${groupOrphamsInput} ${groupUnknownBroadGroupOrphamsOnlyInput} `; const columnLabelPositionInput = html` Top labels Bottom labels `; const hideDraftSuffixInput = html` Hide "_Draft" in heatmap labels `; const showPhamInput = html` Pham`; const showPercentInput = html` Percent`; const showFunctionInput = html` Function`; const showCoreAccessoryInput = html` Core / accessory / rare`; const coreAccessoryThresholdsInput = html` Core/accessory thresholds: Core ≥ % Rare ≤ % Values between these thresholds are Accessory; phams in one selected phage are Orphams. `; const broadGroupSeparatorsInput = html` Separate broad groups Line color Width px `; const broadGroupDisplayInput = html` Broad group display `; const showTotalPhamGenesInput = html` Total pham genes`; const showClusterGenePercentInput = html` Cluster genes / total (%)`; const showSelectedGenePercentInput = html` Selected genes / total (%)`; const showAdjustedSelectedGenePercentInput = html` Selected genes / adjusted total (%)`; const showGeneNumbersInput = html` Gene numbers`; const frameMultipleGenesInput = html` Frame cells containing multiple pham genes `; const percentageFormatInput = html` Percentage format `; const boldPhageNamesInput = html` Bold phage names`; const boldColumnHeadersInput = html` Bold column headings`; const boldPhamLabelsInput = html` Bold pham labels`; const metricColorCodingInput = html` Color metric cells: Below % Above % `; const sortAdjustedTiesInput = html` Break equal pham-presence ties by Selected genes / adjusted total (%) `; const groupBroadGroupLabelsInput = html` Group broad group labels Show group label: `; const cellDisplayModeInput = html` Boxes Lines `; const absenceColorInput = html` Absence color `; const showPhamUrlsInput = html` Pham URLs ${dataset === "Actino_Draft" ? "" : "(Actino_Draft only)"} `; const presentColorPicker = html``; const geneNumberColorInput = html` `; let selectedGeneColor = "#000000"; geneNumberColorInput.querySelectorAll("button").forEach((btn) => { btn.onclick = () => { selectedGeneColor = btn.dataset.color; geneNumberColorInput .querySelectorAll("button") .forEach((b) => (b.style.outline = "none")); btn.style.outline = "2px solid blue"; updateValue(); }; }); geneNumberColorInput.querySelector( 'button[data-color="#000000"]' ).style.outline = "2px solid blue"; const colorModeInput = html` Presence / absence only ${presentColorPicker} By functional group ${functionalGroupColorPanel} `; const phamSortModeInput = html` Broad group + percent Percent only `; const fontFamilyInput = html` Arial Times Symbol `; const fontSizeInput = html` Font size 10 pt `; const geneNumberControls = html` ${showGeneNumbersInput} ${geneNumberColorInput} `; const slider = fontSizeInput.querySelector("input"); const valueDisplay = fontSizeInput.querySelector(".value"); slider.oninput = () => { valueDisplay.textContent = slider.value; updateValue(); }; presentColorPicker.oninput = () => updateValue(); absenceColorInput.querySelector("input").oninput = () => updateValue(); Object.values(functionalGroupColorInputs).forEach((input) => { input.oninput = () => updateValue(); }); function currentValue() { const sortMode = phamSortModeInput.querySelector("input:checked").value; const groupLabelsAllowed = sortMode === "group-percent"; const groupOrphamsChecked = groupOrphamsInput.querySelector("input").checked; const groupUnknownOnly = groupOrphamsChecked && groupUnknownBroadGroupOrphamsOnlyInput.querySelector("input").checked; return { clusterPhageColumns: clusterPhageColumnsInput.querySelector("input").checked, swapAxes: swapAxesInput.querySelector("input").checked, groupOrphams: groupOrphamsChecked, orphamGroupMaxPresence: groupOrphamsChecked ? +groupOrphamsInput.querySelector("select").value : 1, groupUnknownBroadGroupOrphamsOnly: groupUnknownOnly, groupUnknownFunctionOrphamsOnly: groupUnknownOnly, phageLabelPosition: columnLabelPositionInput.querySelector("input:checked").value, hideDraftSuffixInHeatmapLabels: hideDraftSuffixInput.querySelector("input").checked, cellDisplayMode: cellDisplayModeInput.querySelector("input:checked").value, groupBroadGroupLabels: groupLabelsAllowed ? groupBroadGroupLabelsInput .querySelector(".groupLabelsCheckbox") .checked : false, groupLabelPosition: groupBroadGroupLabelsInput .querySelector(".groupLabelPosition") .value, showPhamColumn: showPhamInput.querySelector("input").checked, showPercentColumn: showPercentInput.querySelector("input").checked, showFunctionColumn: showFunctionInput.querySelector("input").checked, showCoreAccessoryColumn: showCoreAccessoryInput.querySelector("input").checked, coreThreshold: +coreAccessoryThresholdsInput.querySelector(".coreThreshold").value, rareThreshold: +coreAccessoryThresholdsInput.querySelector(".rareThreshold").value, showBroadGroupSeparators: broadGroupSeparatorsInput.querySelector(".enabled").checked, broadGroupSeparatorColor: broadGroupSeparatorsInput.querySelector(".color").value, broadGroupSeparatorWidth: +broadGroupSeparatorsInput.querySelector(".width").value, broadGroupDisplay: broadGroupDisplayInput.querySelector("select").value, showFunctionalGroupColumn: broadGroupDisplayInput.querySelector("select").value !== "none", showTotalPhamGenesColumn: showTotalPhamGenesInput.querySelector("input").checked, showClusterGenePercentColumn: showClusterGenePercentInput.querySelector("input").checked, showSelectedGenePercentColumn: showSelectedGenePercentInput.querySelector("input").checked, showAdjustedSelectedGenePercentColumn: showAdjustedSelectedGenePercentInput.querySelector("input").checked, showGeneNumbers: showGeneNumbersInput.querySelector("input").checked, frameMultipleGenes: frameMultipleGenesInput.querySelector("input").checked, percentageFormat: percentageFormatInput.querySelector("select").value, boldPhageNames: boldPhageNamesInput.querySelector("input").checked, boldColumnHeaders: boldColumnHeadersInput.querySelector("input").checked, boldPhamLabels: boldPhamLabelsInput.querySelector("input").checked, colorMetricCellsBelow: metricColorCodingInput.querySelector(".lowEnabled").checked, metricLowThreshold: +metricColorCodingInput.querySelector(".lowThreshold").value, metricLowColor: metricColorCodingInput.querySelector(".lowColor").value, colorMetricCellsAbove: metricColorCodingInput.querySelector(".highEnabled").checked, metricHighThreshold: +metricColorCodingInput.querySelector(".highThreshold").value, metricHighColor: metricColorCodingInput.querySelector(".highColor").value, sortAdjustedPercentTies: sortAdjustedTiesInput.querySelector("input").checked, absentColor: absenceColorInput.querySelector("input").value, showPhamUrls: dataset === "Actino_Draft" ? showPhamUrlsInput.querySelector("input").checked : false, phamSortMode: sortMode, geneNumberColor: selectedGeneColor, colorPhamRowsByGroup: colorModeInput.querySelector("input:checked").value === "group", functionalGroupColors: Object.fromEntries( Object.entries(functionalGroupColorInputs).map(([group, input]) => [ group, input.value ]) ), presentColor: presentColorPicker.value, fontFamily: fontFamilyInput.querySelector("input:checked").value, fontSize: +slider.value }; } function updateValue() { const colorMode = colorModeInput.querySelector("input:checked").value; presentColorPicker.style.display = colorMode === "binary" ? "inline-block" : "none"; functionalGroupColorPanel.style.display = colorMode === "group" ? "block" : "none"; geneNumberColorInput.style.display = showGeneNumbersInput.querySelector( "input" ).checked ? "inline-flex" : "none"; const sortMode = phamSortModeInput.querySelector("input:checked").value; const broadGroupDisplay = broadGroupDisplayInput.querySelector("select").value; const labelsMode = broadGroupDisplay === "labels"; const groupLabelsAllowed = labelsMode && sortMode === "group-percent"; const groupLabelsCheckbox = groupBroadGroupLabelsInput.querySelector(".groupLabelsCheckbox"); const groupLabelPositionSelect = groupBroadGroupLabelsInput.querySelector(".groupLabelPosition"); groupLabelsCheckbox.disabled = !groupLabelsAllowed; groupBroadGroupLabelsInput.querySelector(".note").textContent = !labelsMode ? "(Labels display only)" : groupLabelsAllowed ? "" : "(Broad group + percent only)"; const groupLabelPositionEnabled = groupLabelsAllowed && groupLabelsCheckbox.checked; groupLabelPositionSelect.disabled = !groupLabelPositionEnabled; groupBroadGroupLabelsInput.querySelector( ".groupLabelPositionControl" ).style.opacity = groupLabelPositionEnabled ? "1" : "0.45"; const groupOrphamsChecked = groupOrphamsInput.querySelector("input").checked; groupUnknownBroadGroupOrphamsOnlyInput.querySelector("input").disabled = !groupOrphamsChecked; groupUnknownBroadGroupOrphamsOnlyInput.style.opacity = groupOrphamsChecked ? "1" : "0.45"; groupOrphamsInput.querySelector("select").disabled = !groupOrphamsChecked; const lowMetricColorEnabled = metricColorCodingInput.querySelector(".lowEnabled").checked; metricColorCodingInput.querySelector(".lowThreshold").disabled = !lowMetricColorEnabled; metricColorCodingInput.querySelector(".lowColor").disabled = !lowMetricColorEnabled; metricColorCodingInput.querySelector(".lowRule").style.opacity = lowMetricColorEnabled ? "1" : "0.55"; metricColorCodingInput.querySelector(".lowEnabled").style.opacity = "1"; const highMetricColorEnabled = metricColorCodingInput.querySelector(".highEnabled").checked; metricColorCodingInput.querySelector(".highThreshold").disabled = !highMetricColorEnabled; metricColorCodingInput.querySelector(".highColor").disabled = !highMetricColorEnabled; metricColorCodingInput.querySelector(".highRule").style.opacity = highMetricColorEnabled ? "1" : "0.55"; metricColorCodingInput.querySelector(".highEnabled").style.opacity = "1"; container.value = currentValue(); container.dispatchEvent(new CustomEvent("input")); } [ clusterPhageColumnsInput, swapAxesInput, groupOrphamsInput, groupUnknownBroadGroupOrphamsOnlyInput, columnLabelPositionInput, hideDraftSuffixInput, cellDisplayModeInput, groupBroadGroupLabelsInput, showPhamInput, showPercentInput, showFunctionInput, showCoreAccessoryInput, coreAccessoryThresholdsInput, broadGroupSeparatorsInput, broadGroupDisplayInput, showTotalPhamGenesInput, showClusterGenePercentInput, showSelectedGenePercentInput, showAdjustedSelectedGenePercentInput, showGeneNumbersInput, frameMultipleGenesInput, percentageFormatInput, boldPhageNamesInput, boldColumnHeadersInput, boldPhamLabelsInput, metricColorCodingInput, sortAdjustedTiesInput, showPhamUrlsInput, colorModeInput, phamSortModeInput, fontFamilyInput ].forEach((input) => input.addEventListener("input", updateValue)); const container = html`

Heatmap Controls

Layout

${clusterPhageColumnsInput} ${swapAxesInput} ${orphamGroupingControls}

Labels

${columnLabelPositionInput} ${hideDraftSuffixInput}

Group by

${phamSortModeInput} ${groupBroadGroupLabelsInput} ${sortAdjustedTiesInput}

Classification ${coreAccessoryThresholdsInput} Colors ${colorModeInput} Display

Heatmap cells: ${cellDisplayModeInput} ${broadGroupSeparatorsInput}

Columns

${showPhamInput} ${showPercentInput} ${showFunctionInput} ${showCoreAccessoryInput} ${broadGroupDisplayInput} ${showTotalPhamGenesInput} ${showClusterGenePercentInput} ${showSelectedGenePercentInput} ${showAdjustedSelectedGenePercentInput}

Cells

${geneNumberControls} ${frameMultipleGenesInput} ${absenceColorInput} ${metricColorCodingInput}

Links

${showPhamUrlsInput}

Pham URLs link to PhagesDB and are only available for the dataset Actino_Draft. Gene numbers link to PhagesDB genes when Gene numbers is enabled.

Text

${fontFamilyInput} ${fontSizeInput} ${percentageFormatInput} ${boldPhageNamesInput} ${boldColumnHeadersInput} ${boldPhamLabelsInput}

`; updateValue(); return container; }30:T9b46,presenceAbsenceHeatmap = { if (!loadedPhages || !loadedPhages.length || !presenceAbsenceMatrix.length) { return html`

Select phages and click Load Selected Phage Data to generate the heatmap.

`; } const phageOrder = clusterPhageColumns ? phageSimilarityOrder : loadedPhages; const defaultFunctionalGroupColors = { unknown: "#eeeeee", "structure/packaging": "#9ecae1", "tail/host recognition": "#fdae6b", "integration/recombination": "#a1d99b", "DNA replication": "#bcbddc", lysis: "#fb6a4a", regulation: "#fdd0a2", tRNA: "#c7e9c0", other: "#d9d9d9" }; const groupColors = new Map( Object.entries(functionalGroupColors ?? defaultFunctionalGroupColors) ); const rowByPham = new Map( presenceAbsenceMatrix.map((row) => [row.pham, row]) ); const annotationByPham = new Map(annotationData.map((d) => [d.pham, d])); const presentByPhamPhage = new Map( presenceAbsenceLongOrdered.map((d) => [`${d.pham}||${d.phage}`, +d.present]) ); const geneNumbersByPhamPhage = new Map(); for (const d of phamAssignmentTable) { const key = `${d.pham}||${d.phage}`; const geneNumber = d.geneNumber ?? ""; if (!geneNumbersByPhamPhage.has(key)) { geneNumbersByPhamPhage.set(key, []); } if (geneNumber !== "") { geneNumbersByPhamPhage.get(key).push(geneNumber); } } for (const [key, values] of geneNumbersByPhamPhage) { geneNumbersByPhamPhage.set(key, Array.from(new Set(values)).join(",")); } const importedGeneNumberOverrides = heatmapLabelOverrides?.cellGeneNumbers ?? {}; function displayedGeneNumbers(pham, phage) { const key = `${pham}||${phage}`; if ( Object.prototype.hasOwnProperty.call(importedGeneNumberOverrides, key) ) { return String(importedGeneNumberOverrides[key] ?? ""); } return geneNumbersByPhamPhage.get(key) ?? ""; } function displayHeaderLabel(key, fallback) { const override = heatmapLabelOverrides?.headers?.[String(key)]; return override !== undefined && override !== "" ? String(override) : fallback; } const selectedGeneCountByPham = new Map(); for (const d of phamAssignmentTable) { const pham = d.pham; if (!selectedGeneCountByPham.has(pham)) { selectedGeneCountByPham.set(pham, 0); } selectedGeneCountByPham.set(pham, selectedGeneCountByPham.get(pham) + 1); } // Count actual gene records for every pham–phage combination. // This detects cases where one phage contributes two or more genes to a pham. const geneCopyCountByPhamPhage = d3.rollup( phamAssignmentTable, (rows) => rows.length, (d) => `${d.pham}||${d.phage}` ); function geneCopyCount(pham, phage) { const key = `${pham}||${phage}`; return geneCopyCountByPhamPhage.get(key) ?? 0; } function hasImportedCellText(pham, phage) { return Object.prototype.hasOwnProperty.call( importedGeneNumberOverrides, `${pham}||${phage}` ); } function visibleOrdinaryCellText(pham, phage) { // Gene-number or imported cell text is shown only when the // Gene numbers checkbox is enabled. if (showGeneNumbers) { if (hasImportedCellText(pham, phage)) { return String(importedGeneNumberOverrides[`${pham}||${phage}`] ?? ""); } const values = String( geneNumbersByPhamPhage.get(`${pham}||${phage}`) ?? "" ) .split(",") .map((d) => d.trim()) .filter(Boolean); return values.length > 1 ? values.join(", ") : values.join(""); } // When Gene numbers is disabled, show only the copy count for // cells containing more than one gene from the same phage. const copies = geneCopyCount(pham, phage); return copies > 1 ? String(copies) : ""; } function phageNameForGeneUrl(phage) { return String(phage).replace(/_Draft$/, ""); } function geneUrl(phage, geneNumber) { return `https://phagesdb.org/genes/${encodeURIComponent( `${phageNameForGeneUrl(phage)}_CDS_${geneNumber}` )}`; } function addGeneNumberText({ svg, x, y, phage, geneNumbers, isOrpham, fontSize, fill, linkValues = true }) { if ( geneNumbers === undefined || geneNumbers === null || String(geneNumbers) === "" ) return; const displayedText = String(geneNumbers); if (!linkValues) { svg .append("text") .attr("x", x) .attr("y", y) .attr("text-anchor", "middle") .attr("font-size", `${Math.max(7, fontSize - 2)}px`) .attr("fill", fill) .text(displayedText); return; } // Grouped rare-pham rows contain an aggregate count rather than CDS identifiers. if (isOrpham) { svg .append("text") .attr("x", x) .attr("y", y) .attr("text-anchor", "middle") .attr("font-size", `${Math.max(7, fontSize - 2)}px`) .attr("fill", fill) .text(displayedText); return; } const numbers = displayedText .split(",") .map((d) => d.trim()) .filter(Boolean); // Preserve arbitrary imported cell text exactly. Comma-separated values are // displayed with a comma and a space, e.g. "17, 18". const normalizedText = numbers.length > 1 ? numbers.join(", ") : displayedText; const textSize = Math.max(7, fontSize - 2); const estimatedCharacterWidth = textSize * 0.56; const estimatedTotalWidth = normalizedText.length * estimatedCharacterWidth; let cursorX = x - estimatedTotalWidth / 2; numbers.forEach((geneNumber, i) => { const tokenWidth = geneNumber.length * estimatedCharacterWidth; const link = svg .append("a") .attr("href", geneUrl(phage, geneNumber)) .attr("target", "_blank") .attr("rel", "noopener noreferrer"); link .append("text") .attr("x", cursorX) .attr("y", y) .attr("text-anchor", "start") .attr("font-size", `${textSize}px`) .attr("fill", fill) .style("text-decoration", "underline") .style("cursor", "pointer") .text(geneNumber); cursorX += tokenWidth; if (i < numbers.length - 1) { const separator = ", "; svg .append("text") .attr("x", cursorX) .attr("y", y) .attr("text-anchor", "start") .attr("font-size", `${textSize}px`) .attr("fill", fill) .text(separator); cursorX += separator.length * estimatedCharacterWidth; } }); } const isOrphamRow = (pham) => /^(Orphams|Two Genes|Three Genes) $\d+$__BG__/.test(String(pham)); function rarePhamGroupName(nPresent) { return nPresent === 1 ? "Orphams" : nPresent === 2 ? "Two Genes" : "Three Genes"; } function orphamBroadGroupFromLabel(label) { const match = String(label).match( /^(?:Orphams|Two Genes|Three Genes) $\d+$__BG__(.+?)(?:__NP__\d+)?$/ ); return match ? match[1] : null; } function rarePhamPresenceFromLabel(label) { const match = String(label).match(/__NP__(\d+)$/); return match ? +match[1] : 1; } function nPhagesContainingPham(pham) { const row = rowByPham.get(pham); return row ? loadedPhages.reduce((sum, phage) => sum + (+row[phage] || 0), 0) : 0; } function normalizedBroadGroupForPham(pham) { const annotation = annotationByPham.get(pham); return String(annotation?.broadGroup ?? "unknown") .trim() .toLowerCase(); } function isUnknownBroadGroup(pham) { return normalizedBroadGroupForPham(pham) === "unknown"; } const maxRarePresence = heatmapControls.orphamGroupMaxPresence ?? 1; const onlyGroupUnknownBroadGroup = heatmapControls?.groupUnknownBroadGroupOrphamsOnly ?? heatmapControls?.groupUnknownFunctionOrphamsOnly ?? false; function shouldGroupAsRarePham(pham) { const nPresent = nPhagesContainingPham(pham); return ( nPresent >= 1 && nPresent <= maxRarePresence && (!onlyGroupUnknownBroadGroup || isUnknownBroadGroup(pham)) ); } const allRarePhams = annotationData .map((d) => ({ pham: d.pham, broadGroup: d.broadGroup ?? "unknown", nPresent: nPhagesContainingPham(d.pham) })) .filter((d) => d.nPresent >= 1 && d.nPresent <= maxRarePresence); const groupedRarePhams = allRarePhams.filter((d) => shouldGroupAsRarePham(d.pham) ); function displayPhageLabel(phage) { const base = hideDraftSuffixInHeatmapLabels ? String(phage).replace(/_Draft$/, "") : String(phage); return heatmapPhageLabelOverrides.get(String(phage)) || base; } function displayPhamLabel(pham) { const base = String(pham) .replace(/__BG__.+$/, "") .replace(/__NP__.+$/, ""); return heatmapPhamLabelOverrides.get(String(pham))?.pham || base; } function displayBroadGroup(pham, annotation) { const override = heatmapPhamLabelOverrides.get(String(pham))?.broadGroup; if (override) return override; if (isOrphamRow(pham)) { return orphamBroadGroupFromLabel(pham) ?? ""; } return annotation?.broadGroup ?? "unknown"; } function displayFunctionText(pham, annotation) { return ( heatmapPhamLabelOverrides.get(String(pham))?.functionText ?? (isOrphamRow(pham) ? "" : annotation?.functionText ?? "unknown") ); } function percentNumber(pham, annotation) { const override = heatmapPhamLabelOverrides.get(String(pham))?.percent; const raw = override !== undefined && override !== "" ? String(override) : String(annotation?.pctLabel ?? "").replace("%", ""); const numeric = Number(raw); return Number.isFinite(numeric) ? formatPercentage(numeric) : raw; } function broadGroupForPham(pham) { const annotation = annotationByPham.get(pham); return displayBroadGroup(pham, annotation); } const heatmapPhamsForDisplay = orderedPhamsForDisplay; function rarePhamsForLabel(label) { const broadGroup = orphamBroadGroupFromLabel(label); const nPresent = rarePhamPresenceFromLabel(label); return groupedRarePhams .filter((d) => d.broadGroup === broadGroup && d.nPresent === nPresent) .map((d) => d.pham); } function totalGenesForPham(pham) { if (isOrphamRow(pham)) { return d3.sum(rarePhamsForLabel(pham), (p) => +totalGenesForPham(p) || 0); } return databaseWidePhamGeneCounts.get(String(pham)) ?? 0; } function clusterGenesForPham(pham) { if (isOrphamRow(pham)) { return d3.sum( rarePhamsForLabel(pham), (p) => +clusterGenesForPham(p) || 0 ); } return clusterPhamGeneMetrics.clusterGeneCountByPham.get(String(pham)) ?? 0; } function selectedGenesForPham(pham) { if (isOrphamRow(pham)) { return d3.sum( rarePhamsForLabel(pham), (p) => +selectedGenesForPham(p) || 0 ); } return selectedGeneCountByPham.get(String(pham)) ?? 0; } function formatPercentage(percent) { if (!Number.isFinite(percent)) return ""; const mode = heatmapControls?.percentageFormat ?? "one-decimal-trim"; if (mode === "three-significant-trim") { return Number(percent.toPrecision(3)).toString(); } return Number(percent.toFixed(1)).toString(); } function percentValue(numerator, denominator) { const n = +numerator || 0; const d = +denominator || 0; return d > 0 ? (n / d) * 100 : NaN; } function formatCountPercent(numerator, denominator) { const n = +numerator || 0; const d = +denominator || 0; const pct = percentValue(n, d); return d > 0 ? `${n} / ${d} (${formatPercentage(pct)}%)` : ""; } function clusterGenePercentValueForPham(pham) { return percentValue(clusterGenesForPham(pham), totalGenesForPham(pham)); } function selectedGenePercentValueForPham(pham) { return percentValue(selectedGenesForPham(pham), totalGenesForPham(pham)); } function adjustedDenominatorForPham(pham) { const totalGenes = +totalGenesForPham(pham) || 0; const clusterGenes = +clusterGenesForPham(pham) || 0; const selectedGenes = +selectedGenesForPham(pham) || 0; return totalGenes - (clusterGenes - selectedGenes); } function adjustedSelectedGenePercentValueForPham(pham) { return percentValue( selectedGenesForPham(pham), adjustedDenominatorForPham(pham) ); } function clusterGenePercentForPham(pham) { return formatCountPercent( clusterGenesForPham(pham), totalGenesForPham(pham) ); } function selectedGenePercentForPham(pham) { return formatCountPercent( selectedGenesForPham(pham), totalGenesForPham(pham) ); } function adjustedSelectedGeneCountForPham(pham) { const selected = +selectedGenesForPham(pham) || 0; const adjusted = +adjustedDenominatorForPham(pham) || 0; return adjusted > 0 ? `${selected} / ${adjusted}` : ""; } function adjustedSelectedGenePercentForPham(pham) { const percent = adjustedSelectedGenePercentValueForPham(pham); return Number.isFinite(percent) ? `${formatPercentage(percent)}%` : ""; } function coreAccessoryClassForPham(pham) { if (isOrphamRow(pham)) return "Rare grouped"; const nPresent = nPhagesContainingPham(pham); const totalSelected = loadedPhages.length; const pctPresent = totalSelected > 0 ? (nPresent / totalSelected) * 100 : 0; const coreThreshold = Number.isFinite(+heatmapControls?.coreThreshold) ? +heatmapControls.coreThreshold : 100; const rareThreshold = Number.isFinite(+heatmapControls?.rareThreshold) ? +heatmapControls.rareThreshold : 10; if (nPresent === 1) return "Orpham"; if (pctPresent >= coreThreshold) return "Core"; if (pctPresent <= rareThreshold) return "Rare"; return "Accessory"; } function metricCellFill(percent) { if (!Number.isFinite(percent)) return "#ffffff"; const low = +heatmapControls.metricLowThreshold; const high = +heatmapControls.metricHighThreshold; if ( heatmapControls?.colorMetricCellsAbove && Number.isFinite(high) && percent > high ) { return heatmapControls.metricHighColor ?? "#D8E6D1"; } if ( heatmapControls?.colorMetricCellsBelow && Number.isFinite(low) && percent < low ) { return heatmapControls.metricLowColor ?? "#F7C6BF"; } return "#ffffff"; } const orphamCountsByLabelPhage = new Map(); const orphamListsByLabelPhage = new Map(); for (const label of heatmapPhamsForDisplay.filter(isOrphamRow)) { const labelPhams = rarePhamsForLabel(label); for (const phage of loadedPhages) { const phamsInPhage = labelPhams.filter((pham) => { const row = rowByPham.get(pham); return row && +row[phage] === 1; }); const key = `${label}||${phage}`; orphamCountsByLabelPhage.set(key, phamsInPhage.length); orphamListsByLabelPhage.set(key, phamsInPhage); } } function groupSpans(phams) { const spans = []; let start = 0; while (start < phams.length) { const group = broadGroupForPham(phams[start]); let end = start + 1; while (end < phams.length && broadGroupForPham(phams[end]) === group) { end++; } spans.push({ group, start, end, count: end - start, color: groupColors.get(group) ?? "#eeeeee" }); start = end; } return spans; } const rowHeight = Math.max(12, fontSize + 4); const maxDisplayedGeneTextLength = showGeneNumbers ? d3.max(heatmapPhamsForDisplay, (pham) => { if (isOrphamRow(pham)) return 0; return ( d3.max(phageOrder, (phage) => { const text = visibleOrdinaryCellText(pham, phage); return text === undefined || text === null ? 0 : String(text).length; }) ?? 0 ); }) ?? 0 : 0; const cellWidth = showGeneNumbers ? Math.min( 140, Math.max( 24, maxDisplayedGeneTextLength * Math.max(7, fontSize - 2) * 0.62 + 10 ) ) : 18; const phageCellWidth = cellWidth; const phamCellWidth = cellWidth; const cellMarkHeight = cellDisplayMode === "lines" ? Math.max(2, Math.round(rowHeight * 0.25)) : rowHeight; const cellMarkWidthSwapped = cellDisplayMode === "lines" ? Math.max(2, Math.round(phamCellWidth * 0.25)) : phamCellWidth; const cellMarkYOffset = cellDisplayMode === "lines" ? (rowHeight - cellMarkHeight) / 2 : 0; const cellMarkXOffsetSwapped = cellDisplayMode === "lines" ? (phamCellWidth - cellMarkWidthSwapped) / 2 : 0; const phamLabelWidth = showPhamColumn ? Math.max(80, fontSize * 8) : 0; const phageLabelWidth = Math.max( 120, d3.max(phageOrder, (d) => d.length) * fontSize * 0.65 ); const broadGroupDisplay = heatmapControls?.broadGroupDisplay ?? (showFunctionalGroupColumn ? "labels" : "none"); const showBroadGroupLabels = broadGroupDisplay === "labels"; const showBroadGroupBars = broadGroupDisplay === "bars"; const groupColumnWidth = showBroadGroupLabels ? Math.max(125, fontSize * 12) : 0; const broadGroupBarWidth = showBroadGroupBars ? 12 : 0; const maxFunctionTextLength = showFunctionColumn ? d3.max(heatmapPhamsForDisplay, (pham) => { const annotation = annotationByPham.get(pham); return String(displayFunctionText(pham, annotation) ?? "").length; }) ?? 0 : 0; const estimatedFunctionTextWidth = maxFunctionTextLength * fontSize * 0.5 + 24; const functionColumnWidth = showFunctionColumn ? Math.min(Math.max(300, fontSize * 25, estimatedFunctionTextWidth), 380) : 0; const percentColumnWidth = showPercentColumn ? Math.max(65, fontSize * 5) : 0; const coreAccessoryColumnWidth = heatmapControls?.showCoreAccessoryColumn ? Math.max(92, fontSize * 8.5) : 0; const totalPhamGenesColumnWidth = heatmapControls.showTotalPhamGenesColumn ? Math.max(80, fontSize * 7) : 0; const clusterGenePercentColumnWidth = heatmapControls.showClusterGenePercentColumn ? Math.max(120, fontSize * 11) : 0; const selectedGenePercentColumnWidth = heatmapControls.showSelectedGenePercentColumn ? Math.max(125, fontSize * 11.5) : 0; const adjustedSelectedGeneCountColumnWidth = heatmapControls.showAdjustedSelectedGenePercentColumn ? Math.max(95, fontSize * 8.5) : 0; const adjustedSelectedGenePercentColumnWidth = heatmapControls.showAdjustedSelectedGenePercentColumn ? Math.max(70, fontSize * 6) : 0; const topLabelMargin = phageLabelPosition === "top" ? Math.max(220, fontSize * 22) : 30; const bottomLabelMargin = phageLabelPosition === "bottom" ? Math.max(160, fontSize * 16) : 30; const xLabelTextAnchor = phageLabelPosition === "top" ? "start" : "end"; const groupLabelPosition = heatmapControls?.groupLabelPosition ?? "center"; const phageNameFontWeight = heatmapControls?.boldPhageNames ? "bold" : null; const columnHeaderFontWeight = heatmapControls?.boldColumnHeaders ? "bold" : null; const phamLabelFontWeight = heatmapControls?.boldPhamLabels ? "bold" : null; const useGroupedBroadGroupLabels = !swapAxes && showBroadGroupLabels && groupBroadGroupLabels && phamSortMode === "group-percent"; const useGroupedBroadGroupLabelsSwapped = swapAxes && showBroadGroupLabels && groupBroadGroupLabels && phamSortMode === "group-percent"; if (!swapAxes) { const leftMargin = phamLabelWidth; const rightMargin = 30; const topMargin = topLabelMargin; const bottomMargin = bottomLabelMargin; const heatmapTopY = topMargin; const broadGroupBarX = leftMargin + groupColumnWidth + functionColumnWidth + percentColumnWidth + coreAccessoryColumnWidth; const heatmapX = broadGroupBarX + broadGroupBarWidth; const metricsX = heatmapX + phageOrder.length * phageCellWidth; const width = metricsX + totalPhamGenesColumnWidth + clusterGenePercentColumnWidth + selectedGenePercentColumnWidth + adjustedSelectedGeneCountColumnWidth + adjustedSelectedGenePercentColumnWidth + rightMargin; const height = topMargin + heatmapPhamsForDisplay.length * rowHeight + bottomMargin; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", fontFamily) .style("font-size", `${fontSize}px`); const xLabelY = phageLabelPosition === "top" ? heatmapTopY - 10 : topMargin + heatmapPhamsForDisplay.length * rowHeight + 6; let x = leftMargin; if (showPhamColumn) { const phamHeaderOffset = 28; const cx = leftMargin - phamLabelWidth / 2 + phamHeaderOffset; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text(displayHeaderLabel("pham", "Pham")); } if (showBroadGroupLabels) { const cx = x + groupColumnWidth / 2; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text(displayHeaderLabel("broadGroup", "Broad Group")); x += groupColumnWidth; } if (showFunctionColumn) { const cx = x + functionColumnWidth / 2; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text(displayHeaderLabel("functionText", "Function")); x += functionColumnWidth; } if (showPercentColumn) { const cx = x + percentColumnWidth / 2; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text(displayHeaderLabel("percent", "Percent (%)")); x += percentColumnWidth; } if (heatmapControls?.showCoreAccessoryColumn) { const cx = x + coreAccessoryColumnWidth / 2; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text( displayHeaderLabel("coreAccessoryRare", "Core / accessory / rare") ); x += coreAccessoryColumnWidth; } if (showBroadGroupBars) { const cx = broadGroupBarX + broadGroupBarWidth / 2; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text(displayHeaderLabel("broadGroup", "Broad Group")); } phageOrder.forEach((phage, i) => { const tx = heatmapX + i * phageCellWidth + phageCellWidth / 2; svg .append("text") .attr("x", tx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${tx}, ${xLabelY})`) .attr("font-weight", phageNameFontWeight) .text(displayPhageLabel(phage)); }); // Metric columns are displayed to the right of the phage heatmap columns. x = metricsX; if (heatmapControls.showTotalPhamGenesColumn) { const cx = x + totalPhamGenesColumnWidth / 2; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text(displayHeaderLabel("totalPhamGenes", "Total pham genes")); x += totalPhamGenesColumnWidth; } if (heatmapControls.showClusterGenePercentColumn) { const cx = x + clusterGenePercentColumnWidth / 2; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text( displayHeaderLabel("clusterGenePercent", "Cluster genes / total (%)") ); x += clusterGenePercentColumnWidth; } if (heatmapControls.showSelectedGenePercentColumn) { const cx = x + selectedGenePercentColumnWidth / 2; svg .append("text") .attr("x", cx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${cx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text( displayHeaderLabel( "selectedGenePercent", "Selected genes / total (%)" ) ); x += selectedGenePercentColumnWidth; } if (heatmapControls.showAdjustedSelectedGenePercentColumn) { const countCx = x + adjustedSelectedGeneCountColumnWidth / 2; svg .append("text") .attr("x", countCx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${countCx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text( displayHeaderLabel( "adjustedSelectedGeneCount", "Selected genes / total" ) ); x += adjustedSelectedGeneCountColumnWidth; const percentCx = x + adjustedSelectedGenePercentColumnWidth / 2; svg .append("text") .attr("x", percentCx) .attr("y", xLabelY) .attr("text-anchor", xLabelTextAnchor) .attr("transform", `rotate(-90, ${percentCx}, ${xLabelY})`) .attr("font-weight", columnHeaderFontWeight) .text(displayHeaderLabel("adjustedSelectedGenePercent", "Percent (%)")); x += adjustedSelectedGenePercentColumnWidth; } if (useGroupedBroadGroupLabels) { for (const span of groupSpans(heatmapPhamsForDisplay)) { if (!span.group) continue; const y = topMargin + span.start * rowHeight; const h = span.count * rowHeight; svg .append("rect") .attr("x", leftMargin) .attr("y", y) .attr("width", groupColumnWidth) .attr("height", h) .attr("fill", span.color) .attr("stroke", "#fff"); const labelY = groupLabelPosition === "top" ? y + (span.count > 1 ? rowHeight * 1.5 : rowHeight / 2) : y + h / 2; svg .append("text") .attr("x", leftMargin + 4) .attr("y", labelY) .attr("dominant-baseline", "middle") .text(span.group); } } if (showBroadGroupBars) { for (const span of groupSpans(heatmapPhamsForDisplay)) { if (!span.group) continue; const y = topMargin + span.start * rowHeight; const h = span.count * rowHeight; svg .append("rect") .attr("x", broadGroupBarX + 1) .attr("y", y) .attr("width", Math.max(1, broadGroupBarWidth - 2)) .attr("height", h) .attr("fill", span.color) .attr("stroke", "#444") .attr("stroke-width", 0.5) .append("title") .text(span.group); } } heatmapPhamsForDisplay.forEach((pham, rowIndex) => { const y = topMargin + rowIndex * rowHeight; const orphamRow = isOrphamRow(pham); const annotation = annotationByPham.get(pham); const group = displayBroadGroup(pham, annotation); const groupColor = groupColors.get(group) ?? "#eeeeee"; if (showPhamColumn) { if (!orphamRow && dataset === "Actino_Draft" && showPhamUrls) { const link = svg .append("a") .attr("href", `https://phagesdb.org/phams/${pham}`) .attr("target", "_blank") .attr("rel", "noopener noreferrer"); link .append("text") .attr("x", leftMargin - 6) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "end") .attr("font-weight", phamLabelFontWeight) .attr("fill", "#1f77b4") .style("text-decoration", "underline") .style("cursor", "pointer") .text(displayPhamLabel(pham)); } else { svg .append("text") .attr("x", leftMargin - 6) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "end") .attr( "font-weight", orphamRow || phamLabelFontWeight ? "bold" : null ) .text(displayPhamLabel(pham)); } } let colX = leftMargin; if (showBroadGroupLabels) { if (!useGroupedBroadGroupLabels) { svg .append("rect") .attr("x", colX) .attr("y", y) .attr("width", groupColumnWidth) .attr("height", rowHeight) .attr("fill", groupColor) .attr("stroke", "#fff"); svg .append("text") .attr("x", colX + 2) .attr("y", y + rowHeight * 0.75) .text(group); } colX += groupColumnWidth; } if (showFunctionColumn) { svg .append("rect") .attr("x", colX) .attr("y", y) .attr("width", functionColumnWidth) .attr("height", rowHeight) .attr("fill", "#fff") .attr("stroke", "#ddd"); svg .append("text") .attr("x", colX + 4) .attr("y", y + rowHeight * 0.75) .text(displayFunctionText(pham, annotation)); colX += functionColumnWidth; } if (showPercentColumn) { svg .append("rect") .attr("x", colX) .attr("y", y) .attr("width", percentColumnWidth) .attr("height", rowHeight) .attr("fill", "#fff") .attr("stroke", "#ddd"); svg .append("text") .attr("x", colX + percentColumnWidth / 2) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "middle") .text(orphamRow ? "" : percentNumber(pham, annotation)); colX += percentColumnWidth; } if (heatmapControls?.showCoreAccessoryColumn) { svg .append("rect") .attr("x", colX) .attr("y", y) .attr("width", coreAccessoryColumnWidth) .attr("height", rowHeight) .attr("fill", "#ffffff") .attr("stroke", "#ddd"); svg .append("text") .attr("x", colX + coreAccessoryColumnWidth / 2) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "middle") .text(coreAccessoryClassForPham(pham)); colX += coreAccessoryColumnWidth; } if (showBroadGroupBars) { colX += broadGroupBarWidth; } phageOrder.forEach((phage, colIndex) => { const key = `${pham}||${phage}`; const orphamKey = `${pham}||${phage}`; const present = orphamRow ? (orphamCountsByLabelPhage.get(orphamKey) ?? 0) > 0 : presentByPhamPhage.get(key) === 1; const importedCellText = !orphamRow && hasImportedCellText(pham, phage); const cellText = orphamRow ? String(orphamCountsByLabelPhage.get(orphamKey) || "") : visibleOrdinaryCellText(pham, phage); const sourceGeneNumbers = orphamRow ? cellText : displayedGeneNumbers(pham, phage); const cellX = heatmapX + colIndex * phageCellWidth; const cellFill = present ? colorPhamRowsByGroup && !orphamRow ? groupColor : presentColor : absentColor; const copyCount = orphamRow ? 0 : geneCopyCount(pham, phage); const multipleGenes = !orphamRow && copyCount > 1; svg .append("rect") .attr("x", cellX) .attr("y", y + cellMarkYOffset) .attr("width", phageCellWidth) .attr("height", cellMarkHeight) .attr("fill", cellFill) .attr("stroke", cellDisplayMode === "boxes" ? "#fff" : cellFill) .append("title") .text( orphamRow ? `${displayPhageLabel(phage)}\n${displayPhamLabel(pham)}: ${ present ? "present" : "absent" }\nGrouped phams represented in this phage: ${ orphamCountsByLabelPhage.get(orphamKey) ?? 0 }\nFirst 10 grouped phams: ${( orphamListsByLabelPhage.get(orphamKey) ?? [] ) .slice(0, 10) .join(", ")}` : `${displayPhageLabel(phage)}\nPham ${displayPhamLabel( pham )}\nStatus: ${ present ? "present" : "absent" }\nGenes from this phage in the pham: ${copyCount}${ sourceGeneNumbers ? `\nGene number(s): ${sourceGeneNumbers}` : "" }\nFunction: ${displayFunctionText( pham, annotation )}\nBroad group: ${group}` ); // Draw a full-cell frame around ordinary pham cells containing // more than one gene from the same phage. if (heatmapControls.frameMultipleGenes && multipleGenes) { svg .append("rect") .attr("x", cellX + 0.75) .attr("y", y + 0.75) .attr("width", Math.max(0, phageCellWidth - 1.5)) .attr("height", Math.max(0, rowHeight - 1.5)) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1.5) .attr("pointer-events", "none"); } if (present && cellText !== "") { addGeneNumberText({ svg, x: cellX + phageCellWidth / 2, y: y + rowHeight * 0.72, phage, geneNumbers: cellText, isOrpham: orphamRow, fontSize, fill: geneNumberColor, // Imported spreadsheet content is displayed literally. Original // gene numbers remain clickable when Gene numbers is enabled. linkValues: showGeneNumbers && !importedCellText && !orphamRow }); } }); // Draw metric columns after all phage cells. let metricColX = metricsX; if (heatmapControls.showTotalPhamGenesColumn) { svg .append("rect") .attr("x", metricColX) .attr("y", y) .attr("width", totalPhamGenesColumnWidth) .attr("height", rowHeight) .attr("fill", "#fff") .attr("stroke", "#ddd"); svg .append("text") .attr("x", metricColX + totalPhamGenesColumnWidth / 2) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "middle") .text(totalGenesForPham(pham)); metricColX += totalPhamGenesColumnWidth; } if (heatmapControls.showClusterGenePercentColumn) { svg .append("rect") .attr("x", metricColX) .attr("y", y) .attr("width", clusterGenePercentColumnWidth) .attr("height", rowHeight) .attr("fill", metricCellFill(clusterGenePercentValueForPham(pham))) .attr("stroke", "#ddd"); svg .append("text") .attr("x", metricColX + clusterGenePercentColumnWidth / 2) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "middle") .text(clusterGenePercentForPham(pham)); metricColX += clusterGenePercentColumnWidth; } if (heatmapControls.showSelectedGenePercentColumn) { svg .append("rect") .attr("x", metricColX) .attr("y", y) .attr("width", selectedGenePercentColumnWidth) .attr("height", rowHeight) .attr("fill", metricCellFill(selectedGenePercentValueForPham(pham))) .attr("stroke", "#ddd"); svg .append("text") .attr("x", metricColX + selectedGenePercentColumnWidth / 2) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "middle") .text(selectedGenePercentForPham(pham)); metricColX += selectedGenePercentColumnWidth; } if (heatmapControls.showAdjustedSelectedGenePercentColumn) { svg .append("rect") .attr("x", metricColX) .attr("y", y) .attr("width", adjustedSelectedGeneCountColumnWidth) .attr("height", rowHeight) .attr("fill", "#ffffff") .attr("stroke", "#ddd"); svg .append("text") .attr("x", metricColX + adjustedSelectedGeneCountColumnWidth / 2) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "middle") .text(adjustedSelectedGeneCountForPham(pham)); metricColX += adjustedSelectedGeneCountColumnWidth; svg .append("rect") .attr("x", metricColX) .attr("y", y) .attr("width", adjustedSelectedGenePercentColumnWidth) .attr("height", rowHeight) .attr( "fill", metricCellFill(adjustedSelectedGenePercentValueForPham(pham)) ) .attr("stroke", "#ddd"); svg .append("text") .attr("x", metricColX + adjustedSelectedGenePercentColumnWidth / 2) .attr("y", y + rowHeight * 0.75) .attr("text-anchor", "middle") .text(adjustedSelectedGenePercentForPham(pham)); metricColX += adjustedSelectedGenePercentColumnWidth; } }); if (heatmapControls?.showBroadGroupSeparators) { const spans = groupSpans(heatmapPhamsForDisplay); for (let i = 1; i < spans.length; i++) { const y = topMargin + spans[i].start * rowHeight; svg .append("line") .attr("x1", 0) .attr("x2", width - rightMargin) .attr("y1", y) .attr("y2", y) .attr("stroke", heatmapControls.broadGroupSeparatorColor ?? "#666666") .attr("stroke-width", heatmapControls.broadGroupSeparatorWidth ?? 1.5) .attr("shape-rendering", "crispEdges"); } } return html`

${svg.node()}

`; } return html`

The new total-gene columns are currently implemented for the normal heatmap orientation. Uncheck Swap axes to display them.

`; }31:T3e59,heatmapLabelExcelPanel = { const exportButton = html``; const importInput = html``; const importButton = html``; const status = html``; function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob); const a = html``; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 1000); } function isRarePhamGroupRow(pham) { return /^(Orphams|Two Genes|Three Genes) $\d+$__BG__/.test(String(pham)); } function displayPham(pham) { return String(pham) .replace(/__BG__.+$/, "") .replace(/__NP__.+$/, "") .replace(/__MAX__.+$/, ""); } function displayPhage(phage) { const override = heatmapLabelOverrides?.phage?.[String(phage)]; if (override !== undefined && override !== "") return String(override); return hideDraftSuffixInHeatmapLabels ? String(phage).replace(/_Draft$/, "") : String(phage); } function broadGroupFromRareLabel(label) { const match = String(label).match( /^(?:Orphams|Two Genes|Three Genes) $\d+$__BG__(.+?)(?:__NP__\d+|__MAX__\d+)?$/ ); return match ? match[1] : null; } function headerLabel(key, fallback) { const override = heatmapLabelOverrides?.headers?.[String(key)]; return override !== undefined && override !== "" ? String(override) : fallback; } function formatPercentage(value) { const number = +value; if (!Number.isFinite(number)) return ""; return heatmapControls?.percentageFormat === "three-significant-trim" ? Number(number.toPrecision(3)).toString() : Number(number.toFixed(1)).toString(); } async function exportHeatmapXLSX() { if (!loadedPhages?.length || !orderedPhamsForDisplay?.length) { status.textContent = " Load selected phage data before exporting."; return; } status.textContent = " Preparing editable heatmap..."; const workbook = new ExcelJS.Workbook(); const sheet = workbook.addWorksheet("Heatmap editor", { views: [{ state: "frozen", xSplit: 1, ySplit: 2 }] }); const phageOrder = clusterPhageColumns ? phageSimilarityOrder : loadedPhages; const rowByPham = new Map(presenceAbsenceMatrix.map((row) => [String(row.pham), row])); const annotationByPham = new Map(annotationData.map((d) => [String(d.pham), d])); const originalGeneNumbers = new Map(); const originalCopyCounts = new Map(); for (const d of phamAssignmentTable) { const key = `${d.pham}||${d.phage}`; if (!originalGeneNumbers.has(key)) originalGeneNumbers.set(key, []); const value = d.geneNumber; if (value !== undefined && value !== null && String(value).trim() !== "") { originalGeneNumbers.get(key).push(String(value).trim()); } originalCopyCounts.set(key, (originalCopyCounts.get(key) ?? 0) + 1); } for (const [key, values] of originalGeneNumbers) { originalGeneNumbers.set(key, Array.from(new Set(values))); } const importedCellText = heatmapLabelOverrides?.cellGeneNumbers ?? {}; function hasImportedCellText(pham, phage) { return Object.prototype.hasOwnProperty.call(importedCellText, `${pham}||${phage}`); } function visibleCellText(pham, phage) { const key = `${pham}||${phage}`; // Imported values are always exported exactly as currently displayed. if (hasImportedCellText(pham, phage)) { return String(importedCellText[key] ?? ""); } // Export gene numbers only when the Gene numbers checkbox is enabled. if (showGeneNumbers) { const values = originalGeneNumbers.get(key) ?? []; return values.join(", "); } // When gene numbers are hidden, the heatmap only shows copy counts >1. const copyCount = originalCopyCounts.get(key) ?? 0; return copyCount > 1 ? String(copyCount) : ""; } function nPhagesContainingPham(pham) { const row = rowByPham.get(String(pham)); return row ? loadedPhages.reduce((sum, phage) => sum + (+row[phage] || 0), 0) : 0; } function totalGenes(pham) { return isRarePhamGroupRow(pham) ? "" : databaseWidePhamGeneCounts?.get?.(String(pham)) ?? ""; } function clusterGenes(pham) { if (isRarePhamGroupRow(pham)) return ""; const metric = clusterPhamGeneMetrics?.clusterGeneCountByPham?.get?.(String(pham)); return metric ?? ""; } function selectedGenes(pham) { if (isRarePhamGroupRow(pham)) return ""; return phamAssignmentTable.filter((d) => String(d.pham) === String(pham)).length; } function ratioText(numerator, denominator) { const n = +numerator; const d = +denominator; if (!Number.isFinite(n) || !Number.isFinite(d) || d <= 0) return ""; return `${n} / ${d} (${formatPercentage((n / d) * 100)}%)`; } function classification(pham) { if (isRarePhamGroupRow(pham)) return "Rare grouped"; const nPresent = nPhagesContainingPham(pham); if (nPresent === 1) return "Orpham"; const percent = loadedPhages.length ? (nPresent / loadedPhages.length) * 100 : 0; const core = +heatmapControls?.coreThreshold || 100; const rare = +heatmapControls?.rareThreshold || 10; if (percent >= core) return "Core"; if (percent <= rare) return "Rare"; return "Accessory"; } const columns = [{ key: "__row_key__", header: "key_do_not_edit", kind: "row-key" }]; if (showPhamColumn) { columns.push({ key: "pham", header: headerLabel("pham", "Pham"), kind: "pham" }); } if ( showFunctionalGroupColumn && (heatmapControls?.broadGroupDisplay ?? "labels") === "labels" ) { columns.push({ key: "broadGroup", header: headerLabel("broadGroup", "Broad Group"), kind: "broad-group" }); } if (showFunctionColumn) { columns.push({ key: "functionText", header: headerLabel("functionText", "Function"), kind: "function" }); } if (showPercentColumn) { columns.push({ key: "percent", header: headerLabel("percent", "Percent (%)"), kind: "percent" }); } if (heatmapControls?.showCoreAccessoryColumn) { columns.push({ key: "coreAccessoryRare", header: headerLabel("coreAccessoryRare", "Core / accessory / rare"), kind: "classification" }); } for (const phage of phageOrder) { columns.push({ key: `phage::${phage}`, header: displayPhage(phage), kind: "phage", phage }); } if (heatmapControls?.showTotalPhamGenesColumn) { columns.push({ key: "totalPhamGenes", header: headerLabel("totalPhamGenes", "Total pham genes"), kind: "metric" }); } if (heatmapControls?.showClusterGenePercentColumn) { columns.push({ key: "clusterGenePercent", header: headerLabel("clusterGenePercent", "Cluster genes / total (%)"), kind: "metric" }); } if (heatmapControls?.showSelectedGenePercentColumn) { columns.push({ key: "selectedGenePercent", header: headerLabel("selectedGenePercent", "Selected genes / total (%)"), kind: "metric" }); } if (heatmapControls?.showAdjustedSelectedGenePercentColumn) { columns.push({ key: "adjustedSelectedGeneCount", header: headerLabel("adjustedSelectedGeneCount", "Selected genes / total"), kind: "metric" }); columns.push({ key: "adjustedSelectedGenePercent", header: headerLabel("adjustedSelectedGenePercent", "Percent (%)"), kind: "metric" }); } sheet.addRow(columns.map((d) => d.header)); sheet.addRow(columns.map((d) => d.key)); sheet.getRow(2).hidden = true; sheet.getColumn(1).hidden = true; for (const pham of orderedPhamsForDisplay) { const annotation = annotationByPham.get(String(pham)); const rareRow = isRarePhamGroupRow(pham); const override = heatmapLabelOverrides?.pham?.[String(pham)] ?? {}; const total = totalGenes(pham); const cluster = clusterGenes(pham); const selected = selectedGenes(pham); const adjusted = Number.isFinite(+total) && Number.isFinite(+cluster) && Number.isFinite(+selected) ? +total - (+cluster - +selected) : ""; const values = columns.map((column) => { if (column.kind === "row-key") return String(pham); if (column.kind === "pham") return override.pham ?? displayPham(pham); if (column.kind === "broad-group") { return override.broadGroup ?? (rareRow ? broadGroupFromRareLabel(pham) ?? "" : annotation?.broadGroup ?? ""); } if (column.kind === "function") { return override.functionText ?? (rareRow ? "" : annotation?.functionText ?? ""); } if (column.kind === "percent") { return override.percent ?? (rareRow ? "" : String(annotation?.pctLabel ?? "").replace("%", "")); } if (column.kind === "classification") return classification(pham); if (column.kind === "phage") { if (rareRow) return ""; const presenceRow = rowByPham.get(String(pham)); const present = presenceRow ? +presenceRow[column.phage] === 1 : false; return present ? visibleCellText(pham, column.phage) : ""; } if (column.key === "totalPhamGenes") return total; if (column.key === "clusterGenePercent") return ratioText(cluster, total); if (column.key === "selectedGenePercent") return ratioText(selected, total); if (column.key === "adjustedSelectedGeneCount") { return Number.isFinite(+selected) && Number.isFinite(+adjusted) ? `${selected} / ${adjusted}` : ""; } if (column.key === "adjustedSelectedGenePercent") { return Number.isFinite(+selected) && Number.isFinite(+adjusted) && +adjusted > 0 ? `${formatPercentage((+selected / +adjusted) * 100)}%` : ""; } return ""; }); sheet.addRow(values); } sheet.getRow(1).font = { bold: true, name: heatmapControls?.fontFamily ?? "Arial", size: heatmapControls?.fontSize ?? 10 }; sheet.getRow(1).alignment = { vertical: "middle", horizontal: "center", wrapText: true }; sheet.getRow(1).height = 42; sheet.eachRow({ includeEmpty: true }, (row, rowNumber) => { if (rowNumber === 2) return; row.eachCell({ includeEmpty: true }, (cell) => { cell.font = { name: heatmapControls?.fontFamily ?? "Arial", size: heatmapControls?.fontSize ?? 10 }; cell.alignment = { vertical: "middle", horizontal: "center", wrapText: true }; cell.border = { top: { style: "thin", color: { argb: "FFD9D9D9" } }, left: { style: "thin", color: { argb: "FFD9D9D9" } }, bottom: { style: "thin", color: { argb: "FFD9D9D9" } }, right: { style: "thin", color: { argb: "FFD9D9D9" } } }; }); }); columns.forEach((column, i) => { const excelColumn = sheet.getColumn(i + 1); if (column.kind === "row-key") excelColumn.hidden = true; else if (column.kind === "function") excelColumn.width = 42; else if (column.kind === "phage") excelColumn.width = showGeneNumbers ? 16 : 11; else excelColumn.width = 22; }); const buffer = await workbook.xlsx.writeBuffer(); downloadBlob( new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), "heatmap_editor.xlsx" ); status.textContent = " Editable heatmap Excel file exported."; } exportButton.onclick = exportHeatmapXLSX; importButton.onclick = () => importInput.click(); importInput.onchange = async () => { const file = importInput.files?.[0]; if (!file) return; try { status.textContent = " Importing edited heatmap..."; const workbook = new ExcelJS.Workbook(); await workbook.xlsx.load(await file.arrayBuffer()); const sheet = workbook.getWorksheet("Heatmap editor"); if (!sheet) throw new Error('The workbook does not contain a sheet named "Heatmap editor".'); const columnKeys = new Map(); for (let c = 1; c <= sheet.columnCount; c++) { const key = String(sheet.getCell(2, c).value ?? "").trim(); if (key) columnKeys.set(c, key); } const existing = heatmapLabelOverrides ?? {}; const phamOverrides = { ...(existing.pham ?? {}) }; const phageOverrides = { ...(existing.phage ?? {}) }; const headerOverrides = { ...(existing.headers ?? {}) }; const cellGeneNumbers = { ...(existing.cellGeneNumbers ?? {}) }; for (let c = 2; c <= sheet.columnCount; c++) { const key = columnKeys.get(c); if (!key) continue; const heading = String(sheet.getCell(1, c).value ?? ""); if (key.startsWith("phage::")) { phageOverrides[key.slice("phage::".length)] = heading; } else { headerOverrides[key] = heading; } } for (let r = 3; r <= sheet.rowCount; r++) { const phamKey = String(sheet.getCell(r, 1).value ?? "").trim(); if (!phamKey) continue; const phamOverride = { ...(phamOverrides[phamKey] ?? {}) }; for (let c = 2; c <= sheet.columnCount; c++) { const key = columnKeys.get(c); if (!key) continue; const raw = sheet.getCell(r, c).value; const value = raw === undefined || raw === null ? "" : String(raw); if (key === "pham") phamOverride.pham = value; else if (key === "broadGroup") phamOverride.broadGroup = value; else if (key === "functionText") phamOverride.functionText = value; else if (key === "percent") phamOverride.percent = value; else if (key.startsWith("phage::") && !isRarePhamGroupRow(phamKey)) { // Import the cell literally. "a" remains "a", "2" remains "2", // and "17, 18" remains "17, 18". const phage = key.slice("phage::".length); cellGeneNumbers[`${phamKey}||${phage}`] = value; } } phamOverrides[phamKey] = phamOverride; } viewof heatmapLabelOverrideStore.value = { pham: phamOverrides, phage: phageOverrides, headers: headerOverrides, cellGeneNumbers }; viewof heatmapLabelOverrideStore.dispatchEvent(new CustomEvent("input")); status.textContent = " Imported heatmap headings, labels, and cell text."; importInput.value = ""; } catch (error) { console.error(error); status.textContent = ` Import failed: ${error?.message ?? error}`; } }; return html`

Edit the visible heatmap in Excel

${exportButton} ${importButton} ${importInput} ${status}

Only text currently visible in the heatmap is exported. When Gene numbers is checked, comma-separated gene numbers are exported. When it is unchecked, only visible copy counts greater than one are exported. Imported phage-cell contents are displayed literally, so values such as a, 2, or 17, 18 are preserved exactly.

`; } 32:T23d6,heatmapExportPanel = { const formatInput = html` `; const dpiInput = html` `; const colorInput = html` `; const downloadButton = html``; function getHeatmapSVG() { const node = presenceAbsenceHeatmap; if (node instanceof SVGSVGElement) return node; const svg = node.querySelector("svg"); if (!svg) throw new Error("Could not find SVG inside presenceAbsenceHeatmap."); return svg; } function getSerializedSVG() { const svg = getHeatmapSVG(); const clone = svg.cloneNode(true); clone.setAttribute("xmlns", "http://www.w3.org/2000/svg"); const width = Number(svg.getAttribute("width") || svg.width.baseVal.value); const height = Number( svg.getAttribute("height") || svg.height.baseVal.value ); clone.setAttribute("width", width); clone.setAttribute("height", height); clone.setAttribute("viewBox", `0 0 ${width} ${height}`); clone.querySelectorAll("text").forEach((t) => { t.style.fontFamily = fontFamily; }); return new XMLSerializer().serializeToString(clone); } function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob); const a = html``; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } async function svgToCanvas(dpi, colorMode) { const svg = getHeatmapSVG(); const source = getSerializedSVG(); const width = Number(svg.getAttribute("width") || svg.width.baseVal.value); const height = Number( svg.getAttribute("height") || svg.height.baseVal.value ); const scale = dpi / 96; const svgBlob = new Blob([source], { type: "image/svg+xml;charset=utf-8" }); const url = URL.createObjectURL(svgBlob); const img = new Image(); await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; img.src = url; }); const canvas = document.createElement("canvas"); canvas.width = Math.round(width * scale); canvas.height = Math.round(height * scale); const ctx = canvas.getContext("2d"); ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); URL.revokeObjectURL(url); if (colorMode === "grayscale") { const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const gray = Math.round( 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2] ); data[i] = gray; data[i + 1] = gray; data[i + 2] = gray; } ctx.putImageData(imageData, 0, 0); } return canvas; } function writeAscii(str, view, offset) { for (let i = 0; i < str.length; i++) { view.setUint8(offset + i, str.charCodeAt(i)); } } function makeTiff(canvas, dpi, colorMode) { const ctx = canvas.getContext("2d"); const { width, height } = canvas; const rgba = ctx.getImageData(0, 0, width, height).data; const grayscale = colorMode === "grayscale"; const samplesPerPixel = grayscale ? 1 : 3; const bytesPerPixel = samplesPerPixel; const imageBytes = width * height * bytesPerPixel; const ifdEntries = grayscale ? 13 : 14; const headerBytes = 8; const ifdBytes = 2 + ifdEntries * 12 + 4; const bitsOffset = headerBytes + ifdBytes; const bitsBytes = grayscale ? 2 : 6; const xResOffset = bitsOffset + bitsBytes; const yResOffset = xResOffset + 8; const imageOffset = yResOffset + 8; const buffer = new ArrayBuffer(imageOffset + imageBytes); const view = new DataView(buffer); writeAscii("II", view, 0); view.setUint16(2, 42, true); view.setUint32(4, 8, true); view.setUint16(8, ifdEntries, true); let entryOffset = 10; function tag(tagId, type, count, value) { view.setUint16(entryOffset, tagId, true); view.setUint16(entryOffset + 2, type, true); view.setUint32(entryOffset + 4, count, true); if (type === 3 && count === 1) { view.setUint16(entryOffset + 8, value, true); view.setUint16(entryOffset + 10, 0, true); } else { view.setUint32(entryOffset + 8, value, true); } entryOffset += 12; } tag(256, 4, 1, width); tag(257, 4, 1, height); tag(258, 3, samplesPerPixel, grayscale ? 8 : bitsOffset); tag(259, 3, 1, 1); tag(262, 3, 1, grayscale ? 1 : 2); tag(273, 4, 1, imageOffset); tag(277, 3, 1, samplesPerPixel); tag(278, 4, 1, height); tag(279, 4, 1, imageBytes); tag(282, 5, 1, xResOffset); tag(283, 5, 1, yResOffset); tag(296, 3, 1, 2); tag(305, 2, 12, 0); if (!grayscale) { tag(284, 3, 1, 1); } view.setUint32(entryOffset, 0, true); if (!grayscale) { view.setUint16(bitsOffset, 8, true); view.setUint16(bitsOffset + 2, 8, true); view.setUint16(bitsOffset + 4, 8, true); } else { view.setUint16(bitsOffset, 8, true); } view.setUint32(xResOffset, dpi, true); view.setUint32(xResOffset + 4, 1, true); view.setUint32(yResOffset, dpi, true); view.setUint32(yResOffset + 4, 1, true); let p = imageOffset; for (let i = 0; i < rgba.length; i += 4) { if (grayscale) { view.setUint8(p++, rgba[i]); } else { view.setUint8(p++, rgba[i]); view.setUint8(p++, rgba[i + 1]); view.setUint8(p++, rgba[i + 2]); } } return new Blob([buffer], { type: "image/tiff" }); } function makeEPS(canvas, dpi, colorMode) { const ctx = canvas.getContext("2d"); const { width, height } = canvas; const rgba = ctx.getImageData(0, 0, width, height).data; const grayscale = colorMode === "grayscale"; const widthPt = (width / dpi) * 72; const heightPt = (height / dpi) * 72; let hex = ""; for (let i = 0; i < rgba.length; i += 4) { if (grayscale) { const v = rgba[i].toString(16).padStart(2, "0"); hex += v; } else { hex += rgba[i].toString(16).padStart(2, "0"); hex += rgba[i + 1].toString(16).padStart(2, "0"); hex += rgba[i + 2].toString(16).padStart(2, "0"); } if (hex.length > 72) hex += "\n"; } const eps = `%!PS-Adobe-3.0 EPSF-3.0 %%BoundingBox: 0 0 ${Math.ceil(widthPt)} ${Math.ceil(heightPt)} %%Creator: Observable heatmap export %%LanguageLevel: 2 %%Pages: 1 %%EndComments gsave ${widthPt} ${heightPt} scale ${width} ${height} ${grayscale ? "8" : "8"} [${width} 0 0 -${height} 0 ${height}] {currentfile /ASCIIHexDecode filter} ${grayscale ? "image" : "false 3 colorimage"} ${hex} > grestore showpage %%EOF`; return new Blob([eps], { type: "application/postscript" }); } async function downloadFigure() { const format = formatInput.value; const dpi = +dpiInput.value; const colorMode = colorInput.value; if (format === "svg") { downloadBlob( new Blob([getSerializedSVG()], { type: "image/svg+xml;charset=utf-8" }), "phamerator_presence_absence_heatmap.svg" ); return; } const canvas = await svgToCanvas(dpi, colorMode); if (format === "png") { canvas.toBlob((blob) => { downloadBlob(blob, "phamerator_presence_absence_heatmap.png"); }, "image/png"); return; } if (format === "tiff") { downloadBlob( makeTiff(canvas, dpi, colorMode), "phamerator_presence_absence_heatmap.tif" ); return; } if (format === "eps") { downloadBlob( makeEPS(canvas, dpi, colorMode), "phamerator_presence_absence_heatmap.eps" ); } } downloadButton.onclick = downloadFigure; return html`

Export heatmap

Format${formatInput} Resolution${dpiInput} Color mode${colorInput} ${downloadButton}

TIFF and EPS are exported at 300–600 dpi with RGB 8-bit/channel or grayscale. EPS export is raster EPS, not editable-vector EPS.

`; } 33:T1c9d,heatmapExportExcel = { const downloadXLSXButton = html``; function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob); const a = html``; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } function excelColor(hex) { const clean = String(hex || "#ffffff") .replace("#", "") .toUpperCase(); return "FF" + clean; } function displayPhage(phage) { return hideDraftSuffixInHeatmapLabels ? String(phage).replace(/_Draft$/, "") : String(phage); } function displayPham(pham) { return String(pham).replace(/__BG__.+$/, ""); } async function downloadXLSX() { const workbook = new ExcelJS.Workbook(); const sheet = workbook.addWorksheet("Heatmap"); const phageOrder = clusterPhageColumns ? phageSimilarityOrder : loadedPhages; const rowByPham = new Map( presenceAbsenceMatrix.map((row) => [row.pham, row]) ); const annotationByPham = new Map(annotationData.map((d) => [d.pham, d])); const geneNumbersByPhamPhage = new Map(); for (const d of phamAssignmentTable) { const key = `${d.pham}||${d.phage}`; if (!geneNumbersByPhamPhage.has(key)) { geneNumbersByPhamPhage.set(key, []); } if (d.geneNumber !== "" && d.geneNumber != null) { geneNumbersByPhamPhage.get(key).push(d.geneNumber); } } for (const [key, values] of geneNumbersByPhamPhage) { geneNumbersByPhamPhage.set(key, Array.from(new Set(values)).join(",")); } function isOrphamRow(pham) { return /^Orphams $\d+$__BG__/.test(String(pham)); } function displayPham(pham) { return String(pham).replace(/__BG__.+$/, ""); } function orphamBroadGroupFromLabel(label) { const match = String(label).match(/^Orphams $\d+$__BG__(.+)$/); return match ? match[1] : null; } const allOrphamPhams = annotationData .filter((d) => { const row = rowByPham.get(d.pham); const nPresent = row ? loadedPhages.reduce((sum, phage) => sum + (+row[phage] || 0), 0) : 0; return nPresent === 1; }) .map((d) => ({ pham: d.pham, broadGroup: d.broadGroup ?? "unknown" })); function orphamPhamsForLabel(label) { const broadGroup = orphamBroadGroupFromLabel(label); return allOrphamPhams .filter((d) => d.broadGroup === broadGroup) .map((d) => d.pham); } function orphamCountForPhage(label, phage) { const phams = orphamPhamsForLabel(label); return phams.filter((pham) => { const row = rowByPham.get(pham); return row && +row[phage] === 1; }).length; } const header = [ "Pham", ...(showFunctionalGroupColumn ? ["Broad group"] : []), ...(showFunctionColumn ? ["Function"] : []), ...(showPercentColumn ? ["Percent (%)"] : []), ...phageOrder.map(displayPhage) ]; sheet.addRow(header); for (const pham of orderedPhamsForDisplay) { const orphamRow = isOrphamRow(pham); const cleanPham = displayPham(pham); const annotation = annotationByPham.get(pham); const broadGroup = orphamRow ? orphamBroadGroupFromLabel(pham) ?? "" : annotation?.broadGroup ?? ""; const functionText = orphamRow ? "" : annotation?.functionText ?? ""; const percentText = orphamRow ? "" : annotation?.pctLabel ? String(annotation.pctLabel).replace("%", "") : ""; const values = [ cleanPham, ...(showFunctionalGroupColumn ? [broadGroup] : []), ...(showFunctionColumn ? [functionText] : []), ...(showPercentColumn ? [percentText] : []) ]; for (const phage of phageOrder) { const row = rowByPham.get(pham); const present = orphamRow ? orphamCountForPhage(pham, phage) > 0 : row ? +row[phage] === 1 : false; const genes = geneNumbersByPhamPhage.get(`${pham}||${phage}`) ?? ""; if (showGeneNumbers && present && genes && !orphamRow) { values.push(genes); } else { values.push(""); } } sheet.addRow(values); } sheet.getRow(1).font = { bold: true, name: fontFamily, size: fontSize }; sheet.getRow(1).alignment = { textRotation: 45, vertical: "bottom", horizontal: "center", wrapText: true }; sheet.eachRow((row) => { row.eachCell((cell) => { cell.font = { name: fontFamily, size: fontSize }; cell.alignment = { vertical: "middle", horizontal: "center", wrapText: true }; cell.border = { top: { style: "thin", color: { argb: "FFD9D9D9" } }, left: { style: "thin", color: { argb: "FFD9D9D9" } }, bottom: { style: "thin", color: { argb: "FFD9D9D9" } }, right: { style: "thin", color: { argb: "FFD9D9D9" } } }; }); }); const phageStartCol = 1 + 1 + (showFunctionalGroupColumn ? 1 : 0) + (showFunctionColumn ? 1 : 0) + (showPercentColumn ? 1 : 0); for (let r = 2; r <= sheet.rowCount; r++) { const pham = orderedPhamsForDisplay[r - 2]; const orphamRow = isOrphamRow(pham); const annotation = annotationByPham.get(pham); const group = orphamRow ? orphamBroadGroupFromLabel(pham) ?? "unknown" : annotation?.broadGroup ?? "unknown"; for (let c = phageStartCol; c <= sheet.columnCount; c++) { const phage = phageOrder[c - phageStartCol]; const row = rowByPham.get(pham); const present = orphamRow ? orphamCountForPhage(pham, phage) > 0 : row ? +row[phage] === 1 : false; const fillColor = present ? colorPhamRowsByGroup ? functionalGroupColors[group] ?? presentColor : presentColor : absentColor; const cell = sheet.getCell(r, c); cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: excelColor(fillColor) } }; cell.font = { name: fontFamily, size: fontSize, color: { argb: excelColor(geneNumberColor) } }; } } sheet.columns.forEach((col, i) => { col.width = i < phageStartCol - 1 ? 24 : 10; }); const buffer = await workbook.xlsx.writeBuffer(); const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); downloadBlob(blob, "phamerator_presence_absence_heatmap.xlsx"); } downloadXLSXButton.onclick = downloadXLSX; return html`

Export to Excel

${downloadXLSXButton}

`; }34:T2e3f,heatmapFigureLegend = { heatmapControls; orderedPhamsForDisplay; annotationData; const includeBroadGroupsInput = html` Broad Groups `; const includeBelowInput = html` Below metric threshold `; const includeAboveInput = html` Above metric threshold `; const backgroundInput = html` Background: `; const downloadSVGButton = html` `; const downloadPNGButton = html` `; const status = html` `; const preview = html`

`; const annotationByPham = new Map( annotationData.map((d) => [String(d.pham), d]) ); function formatPercentage(value) { const number = +value; if (!Number.isFinite(number)) return ""; if (heatmapControls.percentageFormat === "three-significant-trim") { return Number(number.toPrecision(3)).toString(); } return Number(number.toFixed(1)).toString(); } function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob); const link = html` `; document.body.appendChild(link); link.click(); document.body.removeChild(link); setTimeout(() => URL.revokeObjectURL(url), 1000); } function isRarePhamGroupRow(pham) { return /^(Orphams|Two Genes|Three Genes) $\d+$__BG__/.test(String(pham)); } function broadGroupFromRareLabel(label) { const match = String(label).match( /^(?:Orphams|Two Genes|Three Genes) $\d+$__BG__(.+?)(?:__NP__\d+|__MAX__\d+)?$/ ); return match ? match[1] : null; } function broadGroupForDisplayedPham(pham) { if (isRarePhamGroupRow(pham)) { return broadGroupFromRareLabel(pham) ?? "unknown"; } return annotationByPham.get(String(pham))?.broadGroup ?? "unknown"; } function broadGroupsInHeatmapOrder() { const orderedGroups = []; const seen = new Set(); for (const pham of orderedPhamsForDisplay ?? []) { const group = String( broadGroupForDisplayedPham(pham) ?? "unknown" ).trim(); if (!group || seen.has(group)) continue; seen.add(group); orderedGroups.push(group); } return orderedGroups; } function currentLegendItems() { const items = []; const includeBroadGroups = includeBroadGroupsInput.querySelector("input").checked; const includeBelow = includeBelowInput.querySelector("input").checked; const includeAbove = includeAboveInput.querySelector("input").checked; if (includeBroadGroups) { const colors = heatmapControls.functionalGroupColors ?? {}; const orderedGroups = broadGroupsInHeatmapOrder(); for (const label of orderedGroups) { items.push({ section: "Broad Groups", label, color: colors[label] ?? "#eeeeee", type: "broad-group" }); } } if (includeBelow && heatmapControls.colorMetricCellsBelow) { items.push({ section: "Percent (%) column colors", label: `Highlight cells below ${formatPercentage( heatmapControls.metricLowThreshold )}%`, color: heatmapControls.metricLowColor ?? "#ffffff", type: "metric" }); } if (includeAbove && heatmapControls.colorMetricCellsAbove) { items.push({ section: "Percent (%) column colors", label: `Highlight cells above ${formatPercentage( heatmapControls.metricHighThreshold )}%`, color: heatmapControls.metricHighColor ?? "#ffffff", type: "metric" }); } return items; } function buildLegendSVG() { const items = currentLegendItems(); const broadGroupItems = items.filter((d) => d.section === "Broad Groups"); const metricItems = items.filter( (d) => d.section === "Percent (%) column colors" ); const fontFamily = heatmapControls.fontFamily ?? "Arial"; const fontSize = Math.max(9, +(heatmapControls.fontSize ?? 10)); const columns = broadGroupItems.length > 6 ? 3 : 2; const columnWidth = 205; const outerPadding = 16; const swatchSize = 20; const rowHeight = 30; const sectionTitleHeight = 30; const sectionGap = 16; const width = outerPadding * 2 + columnWidth * columns; const broadGroupRows = broadGroupItems.length ? Math.ceil(broadGroupItems.length / columns) : 0; const broadGroupHeight = broadGroupItems.length ? sectionTitleHeight + broadGroupRows * rowHeight : 0; const metricRows = metricItems.length; const metricHeight = metricItems.length ? sectionTitleHeight + metricRows * rowHeight : 0; const contentSections = [broadGroupHeight > 0, metricHeight > 0].filter( Boolean ).length; const height = outerPadding * 2 + broadGroupHeight + metricHeight + Math.max(0, contentSections - 1) * sectionGap; const svg = d3 .create("svg") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("width", width) .attr("height", Math.max(height, 60)) .attr("viewBox", `0 0 ${width} ${Math.max(height, 60)}`) .style("font-family", fontFamily) .style("font-size", `${fontSize}px`); if (backgroundInput.querySelector("select").value === "white") { svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", Math.max(height, 60)) .attr("fill", "#ffffff"); } if (!items.length) { svg .append("text") .attr("x", outerPadding) .attr("y", outerPadding + 20) .attr("fill", "#666666") .text("No legend items are currently enabled."); return svg.node(); } let currentY = outerPadding; function drawSectionTitle(title, y) { svg .append("text") .attr("x", outerPadding) .attr("y", y + 18) .attr("font-weight", "bold") .attr("font-size", `${fontSize + 1}px`) .attr("fill", "#000000") .text(title); } function drawLegendItem(item, x, y) { svg .append("rect") .attr("x", x) .attr("y", y + 4) .attr("width", swatchSize) .attr("height", swatchSize) .attr("fill", item.color) .attr("stroke", "#555555") .attr("stroke-width", 1); svg .append("text") .attr("x", x + swatchSize + 8) .attr("y", y + rowHeight / 2 + 4) .attr("dominant-baseline", "middle") .attr("fill", "#000000") .text(item.label); } if (broadGroupItems.length) { drawSectionTitle("Broad Groups", currentY); const itemStartY = currentY + sectionTitleHeight; /* Items fill downward first, then move into the next column. This preserves the same top-to-bottom broad-group order as the heatmap. */ broadGroupItems.forEach((item, index) => { const columnIndex = Math.floor(index / broadGroupRows); const rowIndex = index % broadGroupRows; const x = outerPadding + columnIndex * columnWidth; const y = itemStartY + rowIndex * rowHeight; drawLegendItem(item, x, y); }); currentY += broadGroupHeight; if (metricItems.length) { currentY += sectionGap; } } if (metricItems.length) { drawSectionTitle("Percent (%) column colors", currentY); const itemStartY = currentY + sectionTitleHeight; metricItems.forEach((item, index) => { const y = itemStartY + index * rowHeight; drawLegendItem(item, outerPadding, y); }); } return svg.node(); } function render() { preview.innerHTML = ""; preview.appendChild(buildLegendSVG()); const belowAvailable = heatmapControls.colorMetricCellsBelow; const aboveAvailable = heatmapControls.colorMetricCellsAbove; includeBelowInput.querySelector("input").disabled = !belowAvailable; includeAboveInput.querySelector("input").disabled = !aboveAvailable; includeBelowInput.style.opacity = belowAvailable ? "1" : "0.45"; includeAboveInput.style.opacity = aboveAvailable ? "1" : "0.45"; } function serializedSVG() { const svg = buildLegendSVG(); return new XMLSerializer().serializeToString(svg); } downloadSVGButton.onclick = () => { const source = serializedSVG(); downloadBlob( new Blob([source], { type: "image/svg+xml;charset=utf-8" }), "heatmap_figure_legend.svg" ); status.textContent = " SVG legend downloaded."; }; downloadPNGButton.onclick = async () => { const svg = buildLegendSVG(); const source = new XMLSerializer().serializeToString(svg); const width = +svg.getAttribute("width"); const height = +svg.getAttribute("height"); const blob = new Blob([source], { type: "image/svg+xml;charset=utf-8" }); const url = URL.createObjectURL(blob); const image = new Image(); await new Promise((resolve, reject) => { image.onload = resolve; image.onerror = reject; image.src = url; }); const scale = 3; const canvas = document.createElement("canvas"); canvas.width = Math.round(width * scale); canvas.height = Math.round(height * scale); const context = canvas.getContext("2d"); if (backgroundInput.querySelector("select").value === "white") { context.fillStyle = "#ffffff"; context.fillRect(0, 0, canvas.width, canvas.height); } context.drawImage(image, 0, 0, canvas.width, canvas.height); URL.revokeObjectURL(url); canvas.toBlob((pngBlob) => { downloadBlob(pngBlob, "heatmap_figure_legend.png"); status.textContent = " PNG legend downloaded."; }, "image/png"); }; [ includeBroadGroupsInput, includeBelowInput, includeAboveInput, backgroundInput ].forEach((control) => { control.addEventListener("input", render); }); const container = html`

Heatmap Figure Legend

${includeBroadGroupsInput} ${includeBelowInput} ${includeAboveInput} ${backgroundInput}

${preview}

${downloadSVGButton} ${downloadPNGButton} ${status}

Broad-group colours are listed in the same top-to-bottom order as the heatmap. The legend also uses the current metric thresholds, threshold colours, font, and percentage-format settings from the heatmap controls.

`; render(); return container; }35:T10d1,viewof heatmapLegend = { const includeTreeInput = html` Include phylogeny description `; const textarea = html` `; const copyButton = html` `; function updateLegend() { const c = heatmapControls; const sentences = []; let opening = `Presence/absence matrix showing the distribution of ${phams.length} phams among ${loadedPhages.length} bacteriophages`; if (selectedCluster) { opening += ` belonging to cluster ${selectedCluster}`; } opening += "."; sentences.push(opening); if (c.swapAxes) { sentences.push( "Each row represents a phage genome and each column represents a pham." ); } else { sentences.push( "Each row represents a pham and each column represents a phage genome." ); } sentences.push( `Colored cells indicate the presence of one or more genes belonging to a given pham, whereas ${ c.absentColor.toLowerCase() === "#ffffff" ? "white" : "lightly shaded" } cells indicate the absence of that pham.` ); if (c.colorPhamRowsByGroup) { sentences.push( "Cell colours correspond to the predicted functional category of each pham." ); } if (c.showGeneNumbers) { sentences.push( "Gene numbers shown within cells correspond to the annotated CDS numbers of each genome." ); } if (c.frameMultipleGenes) { sentences.push( "A frame around a heatmap cell indicates that the phage contains more than one gene assigned to that pham." ); } if (c.groupOrphams) { if (c.groupUnknownBroadGroupOrphamsOnly) { sentences.push( "Rare phams meeting the selected grouping threshold and assigned to the unknown broad group were combined into grouped rows, whereas qualifying phams in other broad groups are displayed individually." ); } else { sentences.push( "Rare phams meeting the selected grouping threshold were grouped according to their broad functional group." ); } } if (c.clusterPhageColumns) { sentences.push( "Phage genomes were ordered by hierarchical clustering based on similarity in pham content." ); } if (c.cellDisplayMode === "lines") { sentences.push( "Gene presence is represented using vertical line markers rather than filled boxes." ); } if (c.showAdjustedSelectedGenePercentColumn) { sentences.push( "For the adjusted selected-gene metric, genes contributed by unselected phages from the selected cluster were subtracted from the database-wide total number of genes in each pham. The number of genes contributed by the selected phages was then divided by this adjusted total." ); } if (includeTreeInput.querySelector("input").checked) { sentences.push( "A phylogenetic tree illustrating the evolutionary relationships among the selected phage genomes is shown above the phage names. Whole-genome nucleotide sequences were retrieved from PhagesDB, aligned using MAFFT through the EMBL-EBI web server, and the resulting ClustalW tree output was used to generate the phylogeny." ); } textarea.value = sentences.join(" "); } includeTreeInput.oninput = updateLegend; copyButton.onclick = async () => { await navigator.clipboard.writeText(textarea.value); copyButton.textContent = "✅ Copied!"; setTimeout(() => { copyButton.textContent = "📋 Copy figure legend"; }, 1500); }; updateLegend(); return html`

Figure Caption

${includeTreeInput}

${textarea}

${copyButton}

`; }36:T170f,heatmapBlurb = { if (!loadedPhages?.length || !presenceAbsenceMatrix?.length) { return html`

Load phage data to generate the heatmap summary.

`; } const totalPhages = loadedPhages.length; const totalPhams = phams?.length ?? presenceAbsenceMatrix.length; const phamStats = presenceAbsenceMatrix.map((row) => { const nPresent = loadedPhages.reduce( (sum, phage) => sum + (+row[phage] || 0), 0 ); const pctPresent = totalPhages ? (nPresent / totalPhages) * 100 : 0; const annotation = annotationData.find((d) => d.pham === row.pham); return { pham: row.pham, nPresent, pctPresent, broadGroup: annotation?.broadGroup ?? "unknown", functionText: annotation?.functionText ?? "unknown" }; }); const corePhams = phamStats.filter((d) => d.nPresent === totalPhages); const allMinusOnePhams = phamStats.filter( (d) => d.nPresent === totalPhages - 1 ); const allMinusTwoPhams = phamStats.filter( (d) => d.nPresent === totalPhages - 2 ); const majorityPhams = phamStats.filter((d) => d.pctPresent >= 50); const highSharedPhams = phamStats.filter((d) => d.pctPresent >= 75); const rareOnePhage = phamStats.filter((d) => d.nPresent === 1); const rareTwoPhages = phamStats.filter((d) => d.nPresent === 2); const rareThreePhages = phamStats.filter((d) => d.nPresent === 3); const rareGroupedThreshold = heatmapControls?.orphamGroupMaxPresence ?? 1; const rareGroupedPhams = phamStats.filter( (d) => d.nPresent >= 1 && d.nPresent <= rareGroupedThreshold ); const orphamsByGroup = d3 .rollups( rareOnePhage, (v) => v.length, (d) => d.broadGroup ) .sort((a, b) => d3.descending(a[1], b[1])); const groupStats = d3 .rollups( phamStats, (v) => { const avgPct = d3.mean(v, (d) => d.pctPresent) ?? 0; const coreCount = v.filter((d) => d.nPresent === totalPhages).length; const allMinusOneCount = v.filter( (d) => d.nPresent === totalPhages - 1 ).length; const allMinusTwoCount = v.filter( (d) => d.nPresent === totalPhages - 2 ).length; const orphamCount = v.filter((d) => d.nPresent === 1).length; const rareGroupedCount = v.filter( (d) => d.nPresent >= 1 && d.nPresent <= rareGroupedThreshold ).length; return { total: v.length, avgPct, coreCount, allMinusOneCount, allMinusTwoCount, orphamCount, rareGroupedCount }; }, (d) => d.broadGroup ) .sort((a, b) => d3.descending(a[1].total, b[1].total)); const mostCommonGroups = groupStats .slice(0, 3) .map(([group, stats]) => `${group} (${stats.total} phams)`) .join(", "); const mostOrphamGroup = orphamsByGroup[0]; const pct = (x) => `${x.toFixed(1)}%`; const text = `The heatmap compares ${totalPhams} phams across ${totalPhages} selected phage genomes. ${ corePhams.length } phams (${pct( (corePhams.length / totalPhams) * 100 )}) are present in all selected phages, ${ allMinusOnePhams.length } phams (${pct( (allMinusOnePhams.length / totalPhams) * 100 )}) are present in all but one phage, and ${ allMinusTwoPhams.length } phams (${pct( (allMinusTwoPhams.length / totalPhams) * 100 )}) are present in all but two phages. ${highSharedPhams.length} phams (${pct( (highSharedPhams.length / totalPhams) * 100 )}) are present in at least 75% of the phages, while ${ majorityPhams.length } phams (${pct( (majorityPhams.length / totalPhams) * 100 )}) are present in at least half of the phages. In contrast, ${ rareOnePhage.length } phams (${pct( (rareOnePhage.length / totalPhams) * 100 )}) are singleton phams, or orphams, found in only one selected phage genome; ${ rareTwoPhages.length } phams are found in two phages; and ${ rareThreePhages.length } phams are found in three phages. ${ heatmapControls?.groupOrphams ? `With the current grouping setting, ${rareGroupedPhams.length} phams are grouped as rare-pham rows. ` : "" }${ mostOrphamGroup ? `Most singleton phams are assigned to the ${mostOrphamGroup[0]} broad group (${mostOrphamGroup[1]} orphams). ` : "" }The largest broad functional groups represented in the heatmap are ${mostCommonGroups}. Shared phams likely represent conserved genomic features among the selected phages, whereas singleton and low-frequency phams highlight gene-content diversity and may reflect strain-specific genes, recent gene acquisition, annotation differences, or divergent genes not broadly conserved across the selected genomes.`; return html`

Heatmap Summary

${text}

Broad group summary

${group}: ${stats.total} phams; average presence ${pct(stats.avgPct)}; ${stats.coreCount} present in all phages; ${stats.allMinusOneCount} present in all but one phage; ${stats.allMinusTwoCount} present in all but two phages; ${stats.orphamCount} singleton phams; ${ stats.rareGroupedCount } rare phams within current grouping threshold

`; }37:T646,duplicatePhamGeneSummary = { if (!loadedPhages?.length || !phamAssignmentTable?.length) { return html`

Load selected phage data to calculate duplicated pham members.

`; } const copyCountByPhamPhage = d3.rollup( phamAssignmentTable, (rows) => rows.length, (d) => String(d.pham), (d) => String(d.phage) ); const duplicatedCells = []; for (const [pham, phageCounts] of copyCountByPhamPhage) { for (const [phage, copyCount] of phageCounts) { if (copyCount > 1) { duplicatedCells.push({ pham, phage, copyCount }); } } } const duplicatedPhams = new Set(duplicatedCells.map((d) => d.pham)); const phagesWithDuplications = new Set(duplicatedCells.map((d) => d.phage)); const maximumCopyCount = d3.max(duplicatedCells, (d) => d.copyCount) ?? 1; return html`

Duplicated pham members
Phams with multiple genes in at least one selected phage: ${duplicatedPhams.size}
Selected phages containing multiple genes from the same pham: ${phagesWithDuplications.size}
Phage–pham cells containing multiple genes: ${duplicatedCells.length}
Maximum genes in one phage–pham cell: ${maximumCopyCount}

`; }38: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; }39:T561,phageSimilarityOrder = { genes; loadedPhages; if (!loadedPhages || !loadedPhages.length) return []; if (!genes || !genes.length) return loadedPhages ?? []; function genePhageName(g) { return g.phageID ?? g.phage ?? g.phagename ?? g.phageName ?? ""; } function genePhamName(g) { return g.phamName ?? g.pham ?? g.phamID ?? g.pham_id ?? ""; } const phamsByPhage = new Map(loadedPhages.map((phage) => [phage, new Set()])); for (const g of genes) { const phage = genePhageName(g); const pham = genePhamName(g); if (!phage || !pham || !phamsByPhage.has(phage)) continue; phamsByPhage.get(phage).add(pham); } function jaccardDistance(a, b) { const A = phamsByPhage.get(a) ?? new Set(); const B = phamsByPhage.get(b) ?? new Set(); const intersection = new Set([...A].filter((x) => B.has(x))).size; const union = new Set([...A, ...B]).size; return union === 0 ? 1 : 1 - intersection / union; } const remaining = new Set(loadedPhages); const order = []; let current = loadedPhages[0]; order.push(current); remaining.delete(current); while (remaining.size) { const next = Array.from(remaining).sort((a, b) => d3.ascending(jaccardDistance(current, a), jaccardDistance(current, b)) )[0]; order.push(next); remaining.delete(next); current = next; } return order; }3a:T167e,orderedPhamsForDisplay = { if (!loadedPhages || !loadedPhages.length || !presenceAbsenceMatrix.length) { return []; } const rowByPham = new Map( presenceAbsenceMatrix.map((row) => [String(row.pham), row]) ); const selectedGeneCountByPham = d3.rollup( phamAssignmentTable, (rows) => rows.length, (d) => String(d.pham) ); const maxPresence = heatmapControls.orphamGroupMaxPresence ?? 1; const useAdjustedTieBreak = heatmapControls.sortAdjustedPercentTies ?? true; function rarePhamGroupName(nPresent) { return nPresent === 1 ? "Orphams" : nPresent === 2 ? "Two Genes" : "Three Genes"; } function rarePhamGroupLabel(count, group, nPresent) { return `${rarePhamGroupName(nPresent)} (${count})__BG__${group}__NP__${nPresent}`; } function nSelectedPhagesContainingPham(pham) { const row = rowByPham.get(String(pham)); return row ? loadedPhages.reduce( (sum, phage) => sum + (+row[phage] || 0), 0 ) : 0; } function selectedGenesForPham(pham) { return selectedGeneCountByPham.get(String(pham)) ?? 0; } function clusterGenesForPham(pham) { return ( clusterPhamGeneMetrics?.clusterGeneCountByPham?.get(String(pham)) ?? 0 ); } function totalGenesForPham(pham) { return databaseWidePhamGeneCounts?.get(String(pham)) ?? 0; } function adjustedSelectedPercent(pham) { const totalGenes = +totalGenesForPham(pham) || 0; const clusterGenes = +clusterGenesForPham(pham) || 0; const selectedGenes = +selectedGenesForPham(pham) || 0; const adjustedDenominator = totalGenes - (clusterGenes - selectedGenes); return adjustedDenominator > 0 ? (selectedGenes / adjustedDenominator) * 100 : -Infinity; } const annotationDataForSorting = orderedPhamSummary.map((d) => { const pham = String(d.pham); const nPresent = nSelectedPhagesContainingPham(pham); return { ...d, pham, nPresent, pctPhages: loadedPhages.length ? nPresent / loadedPhages.length : 0, adjustedSelectedPercent: adjustedSelectedPercent(pham), broadGroup: d.broadGroup ?? "unknown" }; }); function compareAdjustedPercent(a, b) { return useAdjustedTieBreak ? d3.descending( a.adjustedSelectedPercent, b.adjustedSelectedPercent ) : 0; } function comparePhamId(a, b) { const aNumber = Number(a.pham); const bNumber = Number(b.pham); if (Number.isFinite(aNumber) && Number.isFinite(bNumber)) { return d3.ascending(aNumber, bNumber); } return d3.ascending(String(a.pham), String(b.pham)); } function sortRows(rows) { return rows.slice().sort((a, b) => { if (phamSortMode === "group-percent") { return ( d3.ascending(a.broadGroup, b.broadGroup) || d3.descending(a.nPresent, b.nPresent) || compareAdjustedPercent(a, b) || comparePhamId(a, b) ); } return ( d3.descending(a.nPresent, b.nPresent) || compareAdjustedPercent(a, b) || d3.ascending(a.broadGroup, b.broadGroup) || comparePhamId(a, b) ); }); } const shouldGroupAsRarePham = (d) => heatmapControls.groupOrphams && d.nPresent >= 1 && d.nPresent <= maxPresence && ( !heatmapControls.groupUnknownBroadGroupOrphamsOnly || String(d.broadGroup).trim().toLowerCase() === "unknown" ); const groupedRareData = annotationDataForSorting.filter( shouldGroupAsRarePham ); const visibleRegularData = annotationDataForSorting.filter( (d) => !shouldGroupAsRarePham(d) ); const sortedRows = sortRows(visibleRegularData); if (!heatmapControls.groupOrphams || !groupedRareData.length) { return sortedRows.map((d) => d.pham); } const rareCountByGroupAndPresence = d3.rollups( groupedRareData, (rows) => rows.length, (d) => d.broadGroup ?? "unknown", (d) => d.nPresent ); const rareCountMap = new Map(); for (const [group, presenceCounts] of rareCountByGroupAndPresence) { for (const [nPresent, count] of presenceCounts) { rareCountMap.set(`${group}||${nPresent}`, count); } } if (phamSortMode === "group-percent") { const output = []; const groups = Array.from( new Set(sortedRows.map((d) => d.broadGroup ?? "unknown")) ); const rareOnlyGroups = Array.from( new Set(groupedRareData.map((d) => d.broadGroup ?? "unknown")) ) .filter((group) => !groups.includes(group)) .sort(d3.ascending); for (const group of [...groups, ...rareOnlyGroups]) { const rowsInGroup = sortedRows.filter( (d) => d.broadGroup === group ); for (const row of rowsInGroup) { output.push(row.pham); } for (const nPresent of [1, 2, 3]) { if (nPresent > maxPresence) continue; const count = rareCountMap.get(`${group}||${nPresent}`) ?? 0; if (count > 0) { output.push( rarePhamGroupLabel(count, group, nPresent) ); } } } return output; } const rareLabels = Array.from(rareCountMap.entries()) .map(([key, count]) => { const separatorIndex = key.lastIndexOf("||"); const group = key.slice(0, separatorIndex); const nPresent = +key.slice(separatorIndex + 2); return { group, nPresent, label: rarePhamGroupLabel(count, group, nPresent) }; }) .sort( (a, b) => d3.ascending(a.group, b.group) || d3.ascending(a.nPresent, b.nPresent) ) .map((d) => d.label); return [ ...sortedRows.map((d) => d.pham), ...rareLabels ]; } 3b:T501,clusterPhamPresenceAnalysisData = { const clusterGenes = clusterPhamGeneMetrics?.clusterGenes ?? []; function phageName(d) { return String( d.phageName ?? d.phage ?? d.genomeName ?? d.genome_name ?? d.PhageName ?? d.name ?? "" ); } function phamName(d) { return String( d.phamName ?? d.pham ?? d.pham_id ?? d.PhamID ?? d.phamID ?? "" ); } const clusterPhageNames = Array.from( new Set(clusterGenes.map(phageName).filter(Boolean)) ).sort(d3.ascending); const phamsByPhage = new Map( clusterPhageNames.map((phage) => [phage, new Set()]) ); const geneCountByPhamPhage = new Map(); for (const gene of clusterGenes) { const phage = phageName(gene); const pham = phamName(gene); if (!phage || !pham) continue; if (!phamsByPhage.has(phage)) phamsByPhage.set(phage, new Set()); phamsByPhage.get(phage).add(pham); const key = `${pham}||${phage}`; geneCountByPhamPhage.set(key, (geneCountByPhamPhage.get(key) ?? 0) + 1); } const allClusterPhams = Array.from( new Set(clusterGenes.map(phamName).filter(Boolean)) ).sort(d3.ascending); return { clusterPhageNames, allClusterPhams, phamsByPhage, geneCountByPhamPhage }; }3c:T21c3,presenceAssociationPanel = { const selectedSet = new Set((loadedPhages ?? []).map(String)); const allClusterPhages = clusterPhamPresenceAnalysisData.clusterPhageNames ?? []; const unselectedPhages = allClusterPhages.filter( (phage) => !selectedSet.has(phage) ); const pThresholdInput = html`Show q ≤ `; const minPresenceInput = html`Minimum cluster presence phages`; const directionInput = html` Association `; const downloadButton = html``; const output = html`

`; function logFactorial(n) { let sum = 0; for (let i = 2; i <= n; i++) sum += Math.log(i); return sum; } function logChoose(n, k) { if (k < 0 || k > n) return -Infinity; return logFactorial(n) - logFactorial(k) - logFactorial(n - k); } function hypergeometricProbability(a, row1, col1, n) { return Math.exp( logChoose(col1, a) + logChoose(n - col1, row1 - a) - logChoose(n, row1) ); } function fisherTwoSided(a, b, c, d) { const row1 = a + b; const col1 = a + c; const n = a + b + c + d; const minA = Math.max(0, row1 - (n - col1)); const maxA = Math.min(row1, col1); const observed = hypergeometricProbability(a, row1, col1, n); let p = 0; for (let x = minA; x <= maxA; x++) { const probability = hypergeometricProbability(x, row1, col1, n); if (probability <= observed + 1e-12) p += probability; } return Math.min(1, p); } function benjaminiHochberg(rows) { const sorted = rows.slice().sort((a, b) => a.pValue - b.pValue); let previous = 1; for (let i = sorted.length - 1; i >= 0; i--) { const rank = i + 1; const adjusted = Math.min( previous, (sorted[i].pValue * sorted.length) / rank ); sorted[i].qValue = adjusted; previous = adjusted; } return rows; } function calculateResults() { const phamsByPhage = clusterPhamPresenceAnalysisData.phamsByPhage; const allPhams = clusterPhamPresenceAnalysisData.allClusterPhams ?? []; const selectedPhages = allClusterPhages.filter((phage) => selectedSet.has(phage) ); const rows = allPhams.map((pham) => { const selectedPresent = selectedPhages.filter((phage) => phamsByPhage.get(phage)?.has(pham) ).length; const unselectedPresent = unselectedPhages.filter((phage) => phamsByPhage.get(phage)?.has(pham) ).length; const selectedAbsent = selectedPhages.length - selectedPresent; const unselectedAbsent = unselectedPhages.length - unselectedPresent; const pValue = fisherTwoSided( selectedPresent, selectedAbsent, unselectedPresent, unselectedAbsent ); const oddsRatio = ((selectedPresent + 0.5) * (unselectedAbsent + 0.5)) / ((selectedAbsent + 0.5) * (unselectedPresent + 0.5)); return { pham, selectedPresent, selectedTotal: selectedPhages.length, unselectedPresent, unselectedTotal: unselectedPhages.length, totalPresent: selectedPresent + unselectedPresent, oddsRatio, pValue, qValue: 1, direction: oddsRatio >= 1 ? "selected" : "unselected" }; }); return benjaminiHochberg(rows); } let currentRows = []; function render() { output.innerHTML = ""; if (!loadedPhages?.length) { output.appendChild( html`

Select and load phages first.

` ); return; } if (!unselectedPhages.length) { output.appendChild( html`

Presence association testing requires at least one unselected phage in the selected cluster. Select a subset of the cluster rather than every phage.

` ); return; } const qThreshold = +pThresholdInput.querySelector("input").value; const minPresence = +minPresenceInput.querySelector("input").value; const direction = directionInput.querySelector("select").value; currentRows = calculateResults() .filter((d) => d.totalPresent >= minPresence) .filter((d) => d.qValue <= qThreshold) .filter((d) => direction === "all" || d.direction === direction) .sort((a, b) => a.qValue - b.qValue || b.oddsRatio - a.oddsRatio); const shown = currentRows.slice(0, 100); output.appendChild(html`

Fisher's exact test compares presence in the ${ loadedPhages.length } selected phages with the ${ unselectedPhages.length } unselected phages from cluster ${selectedCluster}. Benjamini–Hochberg correction is applied across all tested phams.

${[ "Pham", "Selected present", "Unselected present", "Odds ratio", "p", "q", "Enriched in" ].map( (h) => html`` )} ${shown.map( (d) => html`` )}

${h}
${d.pham}	${ d.selectedPresent }/${d.selectedTotal}	${ d.unselectedPresent }/${d.unselectedTotal}	${d.oddsRatio.toPrecision( 3 )}	${d.pValue.toExponential( 2 )}	${d.qValue.toExponential( 2 )}	${ d.direction === "selected" ? "Selected phages" : "Unselected cluster phages" }

Showing ${shown.length} of ${ currentRows.length } significant phams.

`); } downloadButton.onclick = () => { const columns = [ "pham", "selected_present", "selected_total", "unselected_present", "unselected_total", "odds_ratio", "p_value", "q_value", "enriched_in" ]; const lines = [ columns.join("\t"), ...currentRows.map((d) => [ d.pham, d.selectedPresent, d.selectedTotal, d.unselectedPresent, d.unselectedTotal, d.oddsRatio, d.pValue, d.qValue, d.direction ].join("\t") ) ]; const blob = new Blob([lines.join("\n")], { type: "text/tab-separated-values;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = html``; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }; [pThresholdInput, minPresenceInput, directionInput].forEach((x) => x.addEventListener("input", render) ); const container = html`

Presence association testing

${pThresholdInput}${minPresenceInput}${directionInput}${downloadButton}

${output}

`; render(); return container; }3d:T1a46,cooccurrenceAnalysisPanel = { const scopeInput = html` Phages analysed `; const minTogetherInput = html`Minimum co-occurrence phages`; const minJaccardInput = html`Minimum Jaccard `; const topNInput = html`Show top pairs`; const downloadButton = html``; const output = html`

`; function calculateRows(phages) { const phamsByPhage = clusterPhamPresenceAnalysisData.phamsByPhage; const phageSets = phages.map( (phage) => phamsByPhage.get(phage) ?? new Set() ); const support = new Map(); const together = new Map(); for (const set of phageSets) { const phams = Array.from(set).sort(d3.ascending); for (const pham of phams) support.set(pham, (support.get(pham) ?? 0) + 1); for (let i = 0; i < phams.length; i++) { for (let j = i + 1; j < phams.length; j++) { const key = `${phams[i]}||${phams[j]}`; together.set(key, (together.get(key) ?? 0) + 1); } } } const n = phages.length; const rows = []; for (const [key, n11] of together) { const [phamA, phamB] = key.split("||"); const countA = support.get(phamA) ?? 0; const countB = support.get(phamB) ?? 0; const union = countA + countB - n11; const n10 = countA - n11; const n01 = countB - n11; const n00 = n - n11 - n10 - n01; const jaccard = union > 0 ? n11 / union : 0; const denominator = Math.sqrt( (n11 + n10) * (n01 + n00) * (n11 + n01) * (n10 + n00) ); const phi = denominator > 0 ? (n11 * n00 - n10 * n01) / denominator : 0; rows.push({ phamA, phamB, n11, countA, countB, n, jaccard, phi }); } return rows; } let currentRows = []; function render() { output.innerHTML = ""; const scope = scopeInput.querySelector("select").value; const selectedSet = new Set((loadedPhages ?? []).map(String)); const phages = scope === "selected" ? clusterPhamPresenceAnalysisData.clusterPhageNames.filter((p) => selectedSet.has(p) ) : clusterPhamPresenceAnalysisData.clusterPhageNames; if (phages.length < 2) { output.appendChild( html`

At least two phages are required.

` ); return; } const minTogether = +minTogetherInput.querySelector("input").value; const minJaccard = +minJaccardInput.querySelector("input").value; const topN = +topNInput.querySelector("input").value; currentRows = calculateRows(phages) .filter((d) => d.n11 >= minTogether && d.jaccard >= minJaccard) .sort((a, b) => b.jaccard - a.jaccard || b.phi - a.phi || b.n11 - a.n11); const shown = currentRows.slice(0, topN); output.appendChild(html`

Co-occurrence is calculated from pham presence across ${ phages.length } phages. Jaccard similarity measures shared presence; φ also accounts for joint absence. Association does not by itself prove physical interaction or shared function.

${[ "Pham A", "Pham B", "Together", "A present", "B present", "Jaccard", "Phi" ].map( (h) => html`` )} ${shown.map( (d) => html`` )}

${h}
${d.phamA}	${d.phamB}	${ d.n11 }/${d.n}	${ d.countA }/${d.n}	${ d.countB }/${d.n}	${d.jaccard.toFixed( 3 )}	${d.phi.toFixed( 3 )}

Showing ${shown.length} of ${ currentRows.length } qualifying pham pairs.

`); } downloadButton.onclick = () => { const lines = [ [ "pham_a", "pham_b", "cooccurring_phages", "pham_a_phages", "pham_b_phages", "total_phages", "jaccard", "phi" ].join("\t"), ...currentRows.map((d) => [ d.phamA, d.phamB, d.n11, d.countA, d.countB, d.n, d.jaccard, d.phi ].join("\t") ) ]; const blob = new Blob([lines.join("\n")], { type: "text/tab-separated-values;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = html``; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }; [scopeInput, minTogetherInput, minJaccardInput, topNInput].forEach((x) => x.addEventListener("input", render) ); const container = html`

Pham co-occurrence analysis

${scopeInput}${minTogetherInput}${minJaccardInput}${topNInput}${downloadButton}

${output}

`; render(); return container; }3e:[] 2c:{"id":"28f207bbd5985be7","slug":"pham-heatmap","title":"Phage Pham Presence/Absence Heatmap","thumbnail":"e7acfe76c6caf699e2c20e99633b5e3414d4b88ca7a12b2e01d3e37f4dccf2b6","access_level":"public","create_time":"$D2026-04-29T19:44:35.557Z","update_time":"$D2026-07-14T21:07:22.621Z","view_time":null,"first_public_time":"$D2026-04-30T04:12:00.636Z","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":954,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Phage Pham Presence/Absence Heatmap","cells":[{"id":0,"value":"# Phage Pham Presence/Absence Heatmap\n\n- Heatmap of phams that are present / absent in selected phages.\n- Export Heatmap as images or a spreadsheet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"## Instructions for Getting a Phamerator Data API Key","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":552,"value":"terms","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof apiKey = {\n const savedKey = localStorage.getItem(\"phamerator_api_key\") || \"\";\n const input = Inputs.password({\n label: \"Enter your Phamerator API Key\",\n value: savedKey,\n placeholder: \"Key is saved locally...\"\n });\n\n // Listen for changes and save to local storage\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":410,"value":"---\n### Select Database and Cluster","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"viewof dataset = Inputs.select(user.datasets.sort(), {\n label: \"Dataset\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof selectedCluster = {\n dataset; // force recompute when dataset changes\n\n return Inputs.select(clusters.map((d) => d.name).sort(), {\n label: `Clusters`\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"### Select Phages for the Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"### Load Selected Phages to the Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"viewof loadSelectedPhages = Inputs.button(\"Load Selected Phage Data\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"---\n## Results","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"### Pham Presence/Absence Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"orphamSummary = {\n const rowByPham = new Map(\n presenceAbsenceMatrix.map((row) => [row.pham, row])\n );\n\n const singletonPhams = annotationData.filter((d) => {\n const row = rowByPham.get(d.pham);\n\n const nPresent = row\n ? loadedPhages.reduce((sum, phage) => sum + (+row[phage] || 0), 0)\n : 0;\n\n return nPresent === 1;\n });\n\n const grouped = d3\n .rollups(\n singletonPhams,\n (v) => v.length,\n (d) => d.broadGroup ?? \"unknown\"\n )\n .sort((a, b) => d3.ascending(a[0], b[0]));\n\n return html`\n

\n Total phams: ${phams.length}
\n Total displayed phams: ${orderedPhamsForDisplay.length}
\n Orphams by broad group:\n

${group}: ${count}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"### Edit text in the Heapmap: export to Excel, revise, then import back.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":734,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"### Save Heatmap image to TIFF, SVG, EPS, PNG or export data to Excel\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"---\n### Figure Legend and Summary ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":921,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"---\n## Phamerator LogIn Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":560,"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":34,"value":"user = getUser(apiKey)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"getUser = async (apiKey) => {\n let user = await d3.json(`https://classic.phamerator.org/api/profile`, {\n headers: new Headers({\n Authorization: `Bearer ${apiKey}`\n })\n });\n delete user.apiKeys;\n user.password = apiKey;\n return user;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"base64 = ({\n encode: (input) => btoa(input),\n decode: (input) => atob(input)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"formData = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"import { formValue } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"## Get Phamerator Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"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":6,"value":"clusters = dataset ? await getPhameratorData(dataset, \"/clusters\", apiKey) : []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"clusterPhages = {\n if (!dataset || !selectedCluster || !apiKey) return [];\n\n return await getPhameratorData(\n dataset,\n `/phagesbycluster/${selectedCluster}`,\n apiKey\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"phageNames = clusterPhages\n .map((d) => d.phagename)\n .filter(Boolean)\n .sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"selectedGenes = {\n loadedPhages;\n\n if (!loadedPhages.length) return [];\n\n const results = await Promise.all(\n loadedPhages.map(async (phage) => {\n if (geneCache.has(phage)) return geneCache.get(phage);\n\n const genes = await getPhameratorData(dataset, `/genes/${phage}`, apiKey);\n geneCache.set(phage, genes);\n return genes;\n })\n );\n\n return results.flat();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"genes = {\n loadedPhages;\n\n if (!loadedPhages || !loadedPhages.length) return [];\n\n function candidateNames(phage) {\n return phage.endsWith(\"_Draft\")\n ? [phage, phage.replace(/_Draft$/, \"\")]\n : [phage];\n }\n\n async function getGenesForPhage(phage) {\n for (const candidate of candidateNames(phage)) {\n try {\n const result = await getPhameratorData(\n dataset,\n `/genes/${candidate}`,\n apiKey\n );\n\n if (Array.isArray(result)) {\n return result.map((g) => ({\n ...g,\n displayPhageName: phage,\n apiPhageName: candidate\n }));\n }\n } catch (error) {\n console.warn(`Could not load genes for ${candidate}`, error);\n }\n }\n\n console.warn(`Could not load genes for ${phage} using any candidate name.`);\n return [];\n }\n\n const geneLists = await Promise.all(\n loadedPhages.map((phage) => getGenesForPhage(phage))\n );\n\n return geneLists.flat();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"phages = Array.from(new Set(phamAssignmentTable.map(d => d.phage))).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"phams = Array.from(new Set(phamAssignmentTable.map((d) => d.pham))).sort(\n (a, b) => d3.ascending(+a, +b)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"loadedPhages = {\n loadSelectedPhages;\n\n return Array.from(viewof selectedPhages.value ?? []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"## Parse Phamerator Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"phamAssignmentTable = {\n genes;\n\n if (!genes || !genes.length) return [];\n\n return genes\n .map((g) => ({\n phage:\n g.displayPhageName ??\n g.phageID ??\n g.phage ??\n g.phagename ??\n g.phageName ??\n \"\",\n apiPhage: g.apiPhageName ?? g.phageID ?? g.phage ?? \"\",\n pham: g.phamName ?? g.pham ?? g.phamID ?? g.pham_id ?? \"\",\n geneNumber: g.name ?? g.geneNumber ?? g.gene_number ?? g.gene ?? \"\",\n geneID: g.geneID ?? \"\",\n start: g.start,\n end: g.stop,\n strand: g.direction === \"forward\" ? \"+\" : \"-\",\n function: g.genefunction ?? g.function ?? \"\",\n phamColor: g.phamColor ?? \"\",\n protein: g.translation ?? \"\"\n }))\n .filter((d) => d.phage && d.pham);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"presenceAbsenceMatrix = {\n phamAssignmentTable;\n loadedPhages;\n\n if (!loadedPhages || !loadedPhages.length) return [];\n if (!phamAssignmentTable || !phamAssignmentTable.length) return [];\n\n const phams = Array.from(\n new Set(phamAssignmentTable.map((d) => d.pham).filter(Boolean))\n ).sort((a, b) => d3.ascending(+a, +b));\n\n return phams.map((pham) => {\n const row = { pham };\n\n for (const phage of loadedPhages) {\n row[phage] = phamAssignmentTable.some(\n (d) => d.pham == pham && d.phage === phage\n )\n ? 1\n : 0;\n }\n\n return row;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"## Function Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"functionGroup = function(f) {\n const s = (f ?? \"\").toLowerCase();\n\n if (!s || s === \"unknown\" || s === \"hypothetical protein\") return \"unknown\";\n if (s.match(/terminase|portal|capsid|head|coat|prohead|scaffold/)) return \"structure/packaging\";\n if (s.match(/tail|fiber|baseplate|tape measure|minor tail|major tail/)) return \"tail/host recognition\";\n if (s.match(/integrase|recombinase|excisionase|partition/)) return \"integration/recombination\";\n if (s.match(/polymerase|helicase|primase|nuclease|ligase|replication|dna binding/)) return \"DNA replication\";\n if (s.match(/lysis|lysin|holin|endolysin|spanin|amidase/)) return \"lysis\";\n if (s.match(/transcription|regulator|repressor|activator|sigma/)) return \"regulation\";\n if (s.match(/trna|transfer rna/)) return \"tRNA\";\n return \"other\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"phamSummary = {\n const totalPhages = loadedPhages.length;\n\n const byPham = d3.group(phamAssignmentTable, (d) => d.pham);\n\n const summaries = Array.from(byPham, ([pham, rows]) => {\n const phagesWithPham = new Set(rows.map((d) => d.phage));\n\n const functions = Array.from(\n new Set(\n rows\n .map((d) => (d.function ?? \"\").trim())\n .filter((d) => d && d.toLowerCase() !== \"hypothetical protein\")\n )\n ).sort();\n\n const functionText = functions.length ? functions.join(\"; \") : \"unknown\";\n\n const groups = Array.from(new Set(functions.map(functionGroup)));\n const broadGroup = groups.length ? groups.join(\"; \") : \"unknown\";\n\n return {\n pham,\n nPhages: phagesWithPham.size,\n pctPhages: totalPhages ? phagesWithPham.size / totalPhages : 0,\n isUnique: phagesWithPham.size === 1,\n functions,\n functionText,\n broadGroup\n };\n });\n\n return summaries;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"coreFunctionsRepresentedByMultiplePhams = {\n const totalPhages = loadedPhages.length;\n\n const rows = phamAssignmentTable\n .map(d => ({\n phage: d.phage,\n pham: d.pham,\n function: (d.function ?? \"\").trim()\n }))\n .filter(d =>\n d.function &&\n d.function.toLowerCase() !== \"hypothetical protein\"\n );\n\n const byFunction = d3.group(rows, d => d.function);\n\n return new Set(\n Array.from(byFunction, ([fn, records]) => {\n const phages = new Set(records.map(d => d.phage));\n const phams = new Set(records.map(d => d.pham));\n\n return {\n function: fn,\n nPhages: phages.size,\n nPhams: phams.size,\n isCoreMultiPham: phages.size === totalPhages && phams.size > 1\n };\n })\n .filter(d => d.isCoreMultiPham)\n .map(d => d.function)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"orderedPhamSummary = phamSummary\n .slice()\n .sort((a, b) =>\n d3.ascending(a.isUnique, b.isUnique) ||\n d3.descending(a.pctPhages, b.pctPhages) ||\n d3.ascending(+a.pham, +b.pham)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"orderedPhams = orderedPhamSummary.map(d => d.pham)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"presenceAbsenceLongOrdered = {\n const byPham = new Map(presenceAbsenceMatrix.map(d => [d.pham, d]));\n\n return orderedPhams.flatMap(pham => {\n const row = byPham.get(pham);\n\n return loadedPhages.map(phage => ({\n pham,\n phage,\n present: row?.[phage] ?? 0\n }));\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"phamAnnotations = orderedPhamSummary.map(d => ({\n pham: d.pham,\n functionText: d.functionText,\n broadGroup: d.broadGroup,\n pctLabel: `${Math.round(d.pctPhages * 100)}%`,\n isUnique: d.isUnique,\n hasCoreMultiPhamFunction: d.functions.some(fn =>\n coreFunctionsRepresentedByMultiplePhams.has(fn)\n )\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"## Absence/Presence Matrix Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"presenceAbsenceLong = presenceAbsenceMatrix.flatMap(row =>\n loadedPhages.map(phage => ({\n pham: row.pham,\n phage,\n present: row[phage]\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"Plot = require(\"https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17/dist/plot.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"fontSize = heatmapControls.fontSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"## Phage Simlarity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"phageOrder = clusterPhageColumns ? phageSimilarityOrder : loadedPhages;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"absentColor = heatmapControls.absentColor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"cellDisplayMode = heatmapControls.cellDisplayMode","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"clusterPhageColumns = heatmapControls.clusterPhageColumns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"colorPhamRowsByGroup = heatmapControls.colorPhamRowsByGroup","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"functionalGroupColors = heatmapControls.functionalGroupColors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"geneCache = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"geneNumberColor = heatmapControls.geneNumberColor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"groupBroadGroupLabels = heatmapControls.groupBroadGroupLabels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"groupOrphams = heatmapControls.groupOrphams","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"hideDraftSuffixInHeatmapLabels = heatmapControls.hideDraftSuffixInHeatmapLabels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"phageLabelPosition = heatmapControls.phageLabelPosition","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"phamSortMode = heatmapControls.phamSortMode","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"presentColor = heatmapControls.presentColor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"showAbsentAsWhite = heatmapControls.showAbsentAsWhite","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"showFunctionColumn = heatmapControls.showFunctionColumn","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"showFunctionalGroupColumn = heatmapControls.showFunctionalGroupColumn","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"showGeneNumbers = heatmapControls.showGeneNumbers","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"showPercentColumn = heatmapControls.showPercentColumn","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"showPhamColumn = heatmapControls.showPhamColumn","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"showPhamUrls = heatmapControls.showPhamUrls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"swapAxes = heatmapControls.swapAxes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"annotationData = {\n if (!loadedPhages || !loadedPhages.length || !presenceAbsenceMatrix.length) {\n return [];\n }\n\n const rowByPham = new Map(\n presenceAbsenceMatrix.map((row) => [row.pham, row])\n );\n\n return orderedPhamSummary.map((d) => {\n const row = rowByPham.get(d.pham);\n\n const nPresent = row\n ? loadedPhages.reduce((sum, phage) => sum + (+row[phage] || 0), 0)\n : 0;\n\n const pct = loadedPhages.length ? nPresent / loadedPhages.length : 0;\n\n return {\n ...d,\n pctPhages: pct,\n pctLabel: `${Math.round(pct * 100)}%`,\n functionText: d.functionText ?? \"unknown\",\n broadGroup: d.broadGroup ?? \"unknown\"\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"petroff10Palette = ({\n unknown: \"#3F90DA\",\n \"structure/packaging\": \"#FFA90E\",\n \"tail/host recognition\": \"#BD1F01\",\n \"integration/recombination\": \"#94A4A2\",\n \"DNA replication\": \"#832DB6\",\n lysis: \"#A96B59\",\n regulation: \"#E76300\",\n tRNA: \"#B9AC70\",\n other: \"#717581\",\n extra: \"#92DADD\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"fontFamily = heatmapControls.fontFamily","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"orphamGroupMaxPresence = heatmapControls.orphamGroupMaxPresenc","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"## Code to Download Excel file of the HeatMap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"XLSX = {\n try {\n return await require(\"xlsx-js-style@1.2.0/dist/xlsx.bundle.js\");\n } catch (e1) {\n console.warn(\"Observable package path failed, trying jsDelivr URL...\", e1);\n return await require(\"https://cdn.jsdelivr.net/npm/xlsx-js-style@1.2.0/dist/xlsx.bundle.js\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"ExcelJS = {\n try {\n return await require(\"exceljs@4.4.0/dist/exceljs.min.js\");\n } catch (e1) {\n console.warn(\"Observable package path failed, trying jsDelivr URL...\", e1);\n return await require(\"https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"viewof heatmapLabelOverrideStore = {\n const container = html``;\n\n container.value = {\n pham: {},\n phage: {},\n headers: {},\n cellGeneNumbers: {}\n };\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"heatmapLabelOverrides = Generators.input(viewof heatmapLabelOverrideStore)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"heatmapPhamLabelOverrides = new Map(\n Object.entries(heatmapLabelOverrides.pham ?? {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"heatmapPhageLabelOverrides = new Map(\n Object.entries(heatmapLabelOverrides.phage ?? {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"### Total Pham Count","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":875,"value":"databaseWidePhamGeneCounts = {\n const phamilies = await getPhameratorData(dataset, \"/phamilies\", apiKey);\n\n return new Map(\n phamilies.map((d) => [\n String(d.PhamID ?? d.phamID ?? d.phamName ?? d.pham ?? \"\"),\n +(d.size ?? d.count ?? d.geneCount ?? 0)\n ])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"clusterPhamGeneMetrics = {\n if (!selectedCluster || !apiKey) {\n return {\n clusterGenes: [],\n clusterGeneCountByPham: new Map()\n };\n }\n\n const clusterGenes = await getPhameratorData(\n dataset,\n `/genesbycluster/${encodeURIComponent(selectedCluster)}`,\n apiKey\n );\n\n const clusterGeneCountByPham = d3.rollup(\n clusterGenes,\n (rows) => rows.length,\n (d) => String(d.phamName ?? d.pham ?? d.pham_id ?? d.PhamID ?? \"\")\n );\n\n return {\n clusterGenes,\n clusterGeneCountByPham\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"