feat(app): legend + colors follow the highest-weighted category

Until now the colored borders and the legend were hardcoded to the
top-7 plot_types. With the weight sliders now letting the user dial
up any category, the same buckets stayed colored even when "styling"
became the dominant similarity signal — useful colors but mismatched
to the actual clustering driver.

Compute an `activeCategory` from the current weights (max wins;
ties go to plot_type because it's first in TAG_CATEGORIES and we
use strictly-greater compare). The legend now shows the active
category name as a caption + the top-7 values from THAT category
with their counts, and node border colors track the same buckets.
Falls back to plot_type when all weights are zero.

Refactored the helpers to be category-generic:
- primaryCategoryValue(spec, category) — replaces primaryPlotType,
  with primaryPlotType kept as a thin wrapper for compatibility.
- categoryValueCounts(specs, category) — replaces plotTypeCounts.
- topCategoryValues(specs, category, n) — replaces topPlotTypes.
- SPEC_LEVEL_CATEGORIES const distinguishes spec-level (plot_type,
  features, data_type, domain) from impl-level (the rest) so the
  helper looks up the right tag dict on the spec.

Refs #5646

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

app/src/pages/MapPage.helpers.ts

@@ -282,42 +282,77 @@ export function pickBestLoadedTier(
   return null;
 }
 
+/** Tag categories that come from specification.yaml (vs. impl-level metadata). */
+export const SPEC_LEVEL_CATEGORIES: readonly TagCategory[] = [
+  'plot_type',
+  'features',
+  'data_type',
+  'domain',
+] as const;
+
 /**
- * Pick a spec's primary plot type. We use the first entry of the spec-level
- * `plot_type` tag list — that's the canonical type the spec is filed under.
- * Specs without any plot_type fall into a synthetic "other" cluster.
+ * Pick a spec's primary value for a given tag category — the first entry of
+ * the relevant list (spec.tags[category] for spec-level categories,
+ * spec.impl_tags[category] for impl-level). Falls back to "other" when the
+ * spec has no tag in that category at all.
  */
+export function primaryCategoryValue(spec: SpecMapItem, category: TagCategory): string {
+  const dict = (SPEC_LEVEL_CATEGORIES as readonly string[]).includes(category)
+    ? spec.tags
+    : spec.impl_tags;
+  return dict?.[category]?.[0] ?? 'other';
+}
+
+/** Convenience wrapper: a spec's primary plot_type. */
 export function primaryPlotType(spec: SpecMapItem): string {
-  return spec.tags?.plot_type?.[0] ?? 'other';
+  return primaryCategoryValue(spec, 'plot_type');
 }
 
 /**
- * Count specs by their primary plot_type (excluding the synthetic `other`
- * bucket). Used by the legend to display per-cluster member counts.
+ * Count specs by their primary value for a given tag category (excluding
+ * the synthetic `other` bucket). Used by the legend to display per-cluster
+ * member counts.
  */
-export function plotTypeCounts(specs: SpecMapItem[]): Map<string, number> {
+export function categoryValueCounts(
+  specs: SpecMapItem[],
+  category: TagCategory
+): Map<string, number> {
   const counts = new Map<string, number>();
   for (const s of specs) {
-    const pt = primaryPlotType(s);
-    if (pt === 'other') continue;
-    counts.set(pt, (counts.get(pt) ?? 0) + 1);
+    const v = primaryCategoryValue(s, category);
+    if (v === 'other') continue;
+    counts.set(v, (counts.get(v) ?? 0) + 1);
   }
   return counts;
 }
 
+/** Convenience wrapper: per-plot_type spec counts. */
+export function plotTypeCounts(specs: SpecMapItem[]): Map<string, number> {
+  return categoryValueCounts(specs, 'plot_type');
+}
+
 /**
- * Return the top-N most frequent primary plot types in the corpus, sorted by
- * count descending (alphabetic name as tiebreaker for determinism). Used to
- * decide which buckets earn a distinct color border in the map.
+ * Return the top-N most frequent primary values in the given category, sorted
+ * by count descending (alphabetic name as tiebreaker for determinism). Used
+ * to decide which buckets earn a distinct color border in the map.
  *
- * Excludes the synthetic `other` bucket (which only appears when a spec has
- * no plot_type tag at all) so it never wastes a color slot.
+ * Excludes the synthetic `other` bucket (specs missing the category entirely)
+ * so it never wastes a color slot.
  */
-export function topPlotTypes(specs: SpecMapItem[], n: number): string[] {
-  return Array.from(plotTypeCounts(specs).entries())
+export function topCategoryValues(
+  specs: SpecMapItem[],
+  category: TagCategory,
+  n: number
+): string[] {
+  return Array.from(categoryValueCounts(specs, category).entries())
     .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
     .slice(0, n)
-    .map(([t]) => t);
+    .map(([v]) => v);
+}
+
+/** Convenience wrapper: top-N plot_types by spec count. */
+export function topPlotTypes(specs: SpecMapItem[], n: number): string[] {
+  return topCategoryValues(specs, 'plot_type', n);
 }
 
 /**

app/src/pages/MapPage.tsx

@@ -15,6 +15,7 @@ import { specPath } from '../utils/paths';
 import { colors, fontSize, typography } from '../theme';
 import {
   buildKNNLinks,
+  categoryValueCounts,
   computeIDF,
   DEFAULT_CATEGORY_WEIGHT,
   ensureNodeTier,
@@ -23,12 +24,11 @@ import {
   nodeAspectRatio,
   pickBestLoadedTier,
   pickTier,
-  plotTypeCounts,
   preloadImages,
-  primaryPlotType,
+  primaryCategoryValue,
   selectMapThumbUrl,
   TAG_CATEGORIES,
-  topPlotTypes,
+  topCategoryValues,
   type MapLink,
   type MapNode,
   type ResolutionTier,
@@ -160,6 +160,22 @@ export function MapPage() {
     return () => obs.disconnect();
   }, []);
 
+  // The category that drives the legend + node border colors: whichever
+  // currently has the highest weight (plot_type wins on ties because it's
+  // the first entry of TAG_CATEGORIES and we use strictly-greater compare).
+  // Falls back to plot_type when all weights are 0.
+  const activeCategory: TagCategory = useMemo(() => {
+    let maxWeight = -Infinity;
+    let active: TagCategory = 'plot_type';
+    for (const c of TAG_CATEGORIES) {
+      if (weights[c] > maxWeight) {
+        maxWeight = weights[c];
+        active = c;
+      }
+    }
+    return maxWeight > 0 ? active : 'plot_type';
+  }, [weights]);
+
   // 3. derive graph data from specs/theme (pure — no setState in effect)
   const graphData = useMemo<{
     nodes: MapNode[];
@@ -169,23 +185,23 @@ export function MapPage() {
   }>(() => {
     if (!specs) return { nodes: [], links: [], topTypes: [], typeCounts: new Map() };
     const idf = computeIDF(specs);
-    const topTypes = topPlotTypes(specs, CLUSTER_COLORS.length);
-    const typeCounts = plotTypeCounts(specs);
+    const topTypes = topCategoryValues(specs, activeCategory, CLUSTER_COLORS.length);
+    const typeCounts = categoryValueCounts(specs, activeCategory);
     const nodes: MapNode[] = specs.map(s => {
-      const pt = primaryPlotType(s);
+      const v = primaryCategoryValue(s, activeCategory);
       return {
         id: s.id,
         title: s.title,
         tags: flattenTags(s),
-        colorBucket: topTypes.includes(pt) ? pt : null,
+        colorBucket: topTypes.includes(v) ? v : null,
         thumbUrl: selectMapThumbUrl(s, isDark),
         imgs: new Map(),
         pendingTiers: new Set(),
       };
     });
     const links = buildKNNLinks(specs, idf, KNN_K, KNN_MIN_SIM, weights);
     return { nodes, links, topTypes, typeCounts };
-  }, [specs, isDark, weights]);
+  }, [specs, isDark, weights, activeCategory]);
 
   // Eager-load the 400-tier thumbnails so something paints fast. Higher tiers
   // are fetched lazily from nodeCanvasObject when the user zooms in.
@@ -275,10 +291,12 @@ export function MapPage() {
           )}
         </Box>
 
-        {/* Legend: one row per top-N plot type with its cluster color and
-            spec count. Hovering a row highlights that cluster on the canvas
-            (matching nodes stay opaque, others dim) so the spatial shape of
-            the cluster pops out even when nodes are scattered. */}
+        {/* Legend: one row per top-N value of the highest-weighted tag
+            category. Caption shows which category is active so it's obvious
+            why the buckets just changed when a slider moves. Hovering a row
+            highlights that cluster on the canvas (matching nodes stay opaque,
+            others dim) so the spatial shape of the cluster pops out even
+            when nodes are scattered. */}
         {graphData.topTypes.length > 0 && (
           <Box
             sx={{
@@ -294,6 +312,7 @@ export function MapPage() {
               color: 'var(--ink-soft)',
             }}
           >
+            <Box sx={{ opacity: 0.6, mb: 0.25 }}>{activeCategory}</Box>
             {graphData.topTypes.map((t, i) => {
               const color = CLUSTER_COLORS[i % CLUSTER_COLORS.length];
               const count = graphData.typeCounts.get(t) ?? 0;