Added metadata field test

Author: 7PintsOfCherryGarcia

src/libunicorn/graphengine/graphengine_backend.js

@@ -69,6 +69,7 @@
     metadataSummaryMeta: document.getElementById("metadataSummaryMeta"),
     metadataSummaryFields: document.getElementById("metadataSummaryFields"),
     metadataFieldSelect: document.getElementById("metadataFieldSelect"),
+    metadataColorFieldSelect: document.getElementById("metadataColorFieldSelect"),
     metadataFieldColorMeta: document.getElementById("metadataFieldColorMeta"),
     metadataFieldColorList: document.getElementById("metadataFieldColorList"),
     metadataSelectedMeta: document.getElementById("metadataSelectedMeta"),

src/libunicorn/graphengine/graphengine_dom.js

@@ -88,7 +88,11 @@
   function ensureMetadataVisualizationState(metadata = state.remote.metadata) {
     const availableFields = getAvailableMetadataFields(metadata);
     const storedMode = readStoredMetadataVisualizationMode();
-    state.remote.metadataVisualizationMode = normalizeMetadataVisualizationMode(storedMode, availableFields);
+    let normalizedMode = normalizeMetadataVisualizationMode(storedMode, availableFields);
+    if (normalizedMode === NONE_VISUALIZATION_MODE && availableFields.length) {
+      normalizedMode = `${FIELD_MODE_PREFIX}${availableFields[0]}`;
+    }
+    state.remote.metadataVisualizationMode = normalizedMode;
     writeStoredMetadataVisualizationMode(state.remote.metadataVisualizationMode);
 
     const storedColors = readStoredMetadataValueColors();
@@ -162,6 +166,25 @@
     return normalizeColor(mapping[normalizedValue], MISSING_METADATA_COLOR);
   }
 
+  function setMetadataValueColor(field, value, color) {
+    if (!field || value == null) {
+      return MISSING_METADATA_COLOR;
+    }
+    const normalizedValue = String(value);
+    const fallback = normalizedValue === MISSING_METADATA_VALUE
+      ? MISSING_METADATA_COLOR
+      : core.SOURCE_COLORS[0];
+    const nextColor = normalizeColor(color, fallback);
+    const mapping = ensureFieldValueColorAssignments(field, [normalizedValue]);
+    mapping[normalizedValue] = nextColor;
+    state.remote.metadataValueColors = {
+      ...state.remote.metadataValueColors,
+      [field]: mapping,
+    };
+    writeStoredMetadataValueColors(state.remote.metadataValueColors);
+    return nextColor;
+  }
+
   function buildResolvedDatasetLabel(datasetSummary, field, value, missing) {
     const filename = String(datasetSummary?.filename || "");
     if (!field || value == null) {
@@ -218,7 +241,10 @@
       return null;
     }
     const field = resolved[0].metadata_field;
-    const values = Array.from(new Set(resolved.map((entry) => entry.metadata_value)))
+    const values = Array.from(new Set([
+      ...resolved.map((entry) => entry.metadata_value),
+      MISSING_METADATA_VALUE,
+    ]))
       .sort((left, right) => {
         if (left === MISSING_METADATA_VALUE) return 1;
         if (right === MISSING_METADATA_VALUE) return -1;
@@ -247,6 +273,7 @@
     ensureMetadataVisualizationState,
     getDatasetMetadataValue,
     getMetadataValueColor,
+    setMetadataValueColor,
     resolveDatasetMetadataDisplay,
     resolveDatasetMetadataDisplays,
     buildMetadataLegendPayload,

src/libunicorn/graphengine/graphengine_metadata.js

@@ -30,7 +30,6 @@
       backendNamesFile: "",
       metadata: null,
       metadataFieldSelection: [],
-      metadataFieldColors: {},
       metadataVisualizationMode: "none",
       metadataValueColors: {},
       expandedTaxids: new Set(),

src/libunicorn/graphengine/graphengine_state.js

@@ -5,9 +5,11 @@
   const state = namespace.state;
   const els = namespace.els;
   const core = namespace.core;
+  const backend = namespace.backend;
+  const metadataResolver = namespace.metadata;
 
-  if (!state || !els || !core) {
-    throw new Error("Unicorn graphengine UI expected state, DOM, and core modules to load first.");
+  if (!state || !els || !core || !metadataResolver) {
+    throw new Error("Unicorn graphengine UI expected state, DOM, core, and metadata modules to load first.");
   }
 
   function initRemotePanel() {
@@ -392,14 +394,56 @@
       els.sourceLegend.innerHTML = "";
       return;
     }
+    const resolvedDisplays = typeof backend?.getSelectedResolvedMetadataDisplays === "function"
+      ? backend.getSelectedResolvedMetadataDisplays()
+      : [];
+    const resolvedByFilename = new Map(
+      resolvedDisplays.map((entry) => [entry.filename, entry]),
+    );
+    const metadataLegend = typeof backend?.getSelectedMetadataLegendPayload === "function"
+      ? backend.getSelectedMetadataLegendPayload()
+      : null;
+    const metadataLegendHtml = metadataLegend && Array.isArray(metadataLegend.values) && metadataLegend.values.length
+      ? `
+        <div class="legend-section legend-section-meta">
+          <div class="legend-section-title">Coloring by ${core.escapeHtml(metadataLegend.field)}</div>
+          <div class="legend-meta-list">
+            ${metadataLegend.values.map((entry) => `
+              <div class="legend-meta-item">
+                <span class="legend-swatch" style="background:${entry.color}"></span>
+                <span class="legend-label">${core.escapeHtml(entry.value === metadataResolver.MISSING_METADATA_VALUE ? "(missing)" : String(entry.value))}</span>
+              </div>
+            `).join("")}
+          </div>
+        </div>
+      `
+      : "";
     els.sourceLegend.hidden = false;
-    els.sourceLegend.innerHTML = state.series.map((source, index) => `
-      <label class="legend-item${source.visible ? "" : " is-muted"}" data-series-index="${index}">
-        <input class="legend-toggle" type="checkbox" ${source.visible ? "checked" : ""} aria-label="Toggle ${core.escapeHtml(source.label)}">
-        <span class="legend-swatch" style="background:${source.color}"></span>
-        <span class="legend-label" title="${core.escapeHtml(source.label)}">${core.escapeHtml(source.label)}</span>
-      </label>
-    `).join("");
+    els.sourceLegend.innerHTML = `
+      ${metadataLegendHtml}
+      <div class="legend-section legend-section-datasets">
+        <div class="legend-section-title">Datasets</div>
+        ${state.series.map((source, index) => {
+          const resolved = resolvedByFilename.get(source.label);
+          const metadataValue = resolved?.metadata_value === metadataResolver.MISSING_METADATA_VALUE
+            ? "(missing)"
+            : resolved?.metadata_value;
+          const detail = resolved?.metadata_field
+            ? `<span class="legend-detail">${core.escapeHtml(String(metadataValue))}</span>`
+            : "";
+          return `
+            <label class="legend-item${source.visible ? "" : " is-muted"}" data-series-index="${index}">
+              <input class="legend-toggle" type="checkbox" ${source.visible ? "checked" : ""} aria-label="Toggle ${core.escapeHtml(source.label)}">
+              <span class="legend-swatch" style="background:${source.color}"></span>
+              <span class="legend-copy">
+                <span class="legend-label" title="${core.escapeHtml(source.label)}">${core.escapeHtml(source.label)}</span>
+                ${detail}
+              </span>
+            </label>
+          `;
+        }).join("")}
+      </div>
+    `;
 
     els.sourceLegend.querySelectorAll(".legend-item").forEach((item) => {
       item.addEventListener("change", (event) => {

src/libunicorn/graphengine/graphengine_ui.js

@@ -127,12 +127,17 @@ <h3>Backend Metadata</h3>
                   <select id="metadataFieldSelect" multiple size="5" aria-describedby="metadataFieldPickerHint"></select>
                 </label>
                 <div id="metadataFieldPickerHint" class="metadata-picker-hint">Select one or more metadata fields to display across the panel.</div>
-                <section class="metadata-color-panel" aria-label="Metadata field colors">
+                <section class="metadata-color-panel" aria-label="Metadata value colors">
                   <div class="metadata-summary-head">
-                    <h3>Field Display Colors</h3>
+                    <h3>Visualization Value Colors</h3>
                   </div>
-                  <div id="metadataFieldColorMeta" class="metadata-summary-meta">No metadata fields selected</div>
-                  <div id="metadataFieldColorList" class="metadata-field-color-list">Select one or more metadata fields to customize their display colors.</div>
+                  <label class="metadata-field-picker" for="metadataColorFieldSelect">
+                    <span>Active color field</span>
+                    <select id="metadataColorFieldSelect" aria-describedby="metadataColorFieldHint"></select>
+                  </label>
+                  <div id="metadataColorFieldHint" class="metadata-picker-hint">Colors are assigned per value in the active metadata field and reused by tree, barplot, and PCoA visual semantics.</div>
+                  <div id="metadataFieldColorMeta" class="metadata-summary-meta">No active metadata color field</div>
+                  <div id="metadataFieldColorList" class="metadata-field-color-list">Choose a metadata field to edit value colors.</div>
                 </section>
               </section>
               <section class="metadata-selected-panel" aria-label="Selected dataset metadata">

src/libunicorn/graphengine/index.html

@@ -819,6 +819,34 @@ code {
   padding-top: 6px;
 }
 
+.legend-section {
+  display: grid;
+  gap: 8px;
+}
+
+.legend-section-title {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.legend-meta-list {
+  display: grid;
+  gap: 8px;
+}
+
+.legend-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid #d7ccb7;
+  background: #fffdf7;
+}
+
 .client-log-head {
   display: flex;
   align-items: center;
@@ -974,6 +1002,21 @@ code {
   font-weight: 700;
 }
 
+.legend-copy {
+  display: grid;
+  min-width: 0;
+}
+
+.legend-detail {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+
 .legend-toggle {
   flex: 0 0 auto;
   width: 16px;

src/libunicorn/graphengine/styles.css

@@ -0,0 +1,53 @@
+from pathlib import Path
+
+from playwright.sync_api import Page, expect
+
+from .helpers import STEP_TIMEOUT_MS, log_step
+from .test_metadata_integration import (  # noqa: F401
+    metadata_free_connected_page,
+    metadata_free_page,
+    metadata_free_services,
+)
+
+
+def test_metadata_legend_switches_with_active_field(
+    metadata_free_connected_page: Page,
+    tmp_path: Path,
+) -> None:
+    metadata_file = tmp_path / "metadata.txt"
+    metadata_file.write_text(
+        "\n".join([
+            "dataset\tgroup\thost\tsite",
+            "Lib_sim1_collapsed.bdamage.txt\tlegend-group-alpha\tlegend-host-wheat\te2e-greenhouse-a",
+            "Lib_sim1_collapsed.alnfilt.bdamage.txt\tlegend-group-beta\tlegend-host-barley\te2e-greenhouse-b",
+        ]),
+        encoding="utf-8",
+    )
+
+    log_step("Uploading metadata for active-field legend switching")
+    metadata_free_connected_page.locator("#metadataFile").set_input_files(str(metadata_file))
+    metadata_free_connected_page.locator("#uploadBtn").click()
+    expect(metadata_free_connected_page.locator("#metadataSummaryMeta")).to_contain_text("2 matched", timeout=STEP_TIMEOUT_MS)
+
+    log_step("Rendering the backend tree so the main source legend becomes available")
+    metadata_free_connected_page.locator("#renderBtn").click()
+    metadata_free_connected_page.wait_for_function(
+        "() => document.querySelectorAll('#treeSvg .node').length > 1",
+        timeout=180000,
+    )
+
+    source_legend = metadata_free_connected_page.locator("#sourceLegend")
+
+    log_step("Confirming the legend defaults to the first metadata field")
+    expect(source_legend).to_contain_text("Coloring by group", timeout=STEP_TIMEOUT_MS)
+    expect(source_legend).to_contain_text("legend-group-alpha", timeout=STEP_TIMEOUT_MS)
+    expect(source_legend).to_contain_text("legend-group-beta", timeout=STEP_TIMEOUT_MS)
+
+    log_step("Switching the active metadata color field from group to host")
+    metadata_free_connected_page.locator("#metadataColorFieldSelect").select_option("host")
+
+    expect(source_legend).to_contain_text("Coloring by host", timeout=STEP_TIMEOUT_MS)
+    expect(source_legend).to_contain_text("legend-host-wheat", timeout=STEP_TIMEOUT_MS)
+    expect(source_legend).to_contain_text("legend-host-barley", timeout=STEP_TIMEOUT_MS)
+    expect(source_legend).not_to_contain_text("Coloring by group", timeout=STEP_TIMEOUT_MS)
+    expect(source_legend).not_to_contain_text("legend-group-alpha", timeout=STEP_TIMEOUT_MS)