Fix PCA metrics layer in h5ad mode

The principal-components metric was falling back to loading local demo
projections.json (2D localmap coordinates) instead of actual PCA data.
Now h5ad-loader extracts full-dimension embeddings (>2D) separately,
and App uses them directly for PCA metrics. Prefers pca_masked_unscaled
when available.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: patcon

src/components/convo-explorer/App.h5ad.stories.tsx

@@ -34,6 +34,7 @@ function H5adFileLoader() {
         statements: parsed.statements,
         votesRows: parsed.votesRows,
         pipelineData: parsed.allEmbeddings,
+        fullDimensionEmbeddings: parsed.fullDimensionEmbeddings,
       });
     } catch (err) {
       console.error('Failed to load h5ad file:', err);

src/components/convo-explorer/App.tsx

@@ -36,6 +36,8 @@ export type PreloadedData = {
   statements: { statement_id: string; txt: string; moderated: number }[];
   votesRows: { participant_id: string; comment_id: string; vote: number }[];
   pipelineData?: Record<string, [string, [number, number]][]>;
+  /** Full-dimension embeddings (>2D, e.g. PCA) for metrics layer */
+  fullDimensionEmbeddings?: Record<string, [string, number[]][]>;
 };
 
 type AppProps = {
@@ -405,33 +407,69 @@ export const App: React.FC<AppProps> = ({ testAnimation = false, kedroBaseUrl, i
 
             setPointMetrics(newPointMetrics);
           } else if (metricConfig.type === "principal-components") {
-            // Load principal component metrics (new logic)
+            // Load principal component metrics
             const componentIndex = metricConfig.component - 1; // Convert 1-based to 0-based index
 
-            // Extract the imputer from the current pipeline ID and construct the PCA pipeline ID
-            // e.g., "mean_localmap_bestkmeans" -> "mean_pca_bestkmeans"
-            // e.g., "median_umap_bestkmeans" -> "median_pca_bestkmeans"
-            const pipelineParts = currentPipelineId.split('_');
-            let pcaPipelineId = 'mean_pca_bestkmeans'; // fallback default
+            if (preloadedData?.fullDimensionEmbeddings) {
+              // Preloaded mode: extract components from full-dimension embeddings
+              const embKeys = Object.keys(preloadedData.fullDimensionEmbeddings);
+              // Prefer pca_masked_unscaled, then any key containing 'pca', then first available
+              const pcaKey = embKeys.find(k => k === 'pca_masked_unscaled')
+                || embKeys.find(k => k.includes('pca'))
+                || embKeys[0];
+
+              if (pcaKey) {
+                const fullData = preloadedData.fullDimensionEmbeddings[pcaKey];
+                console.log(`Using preloaded PCA embedding "${pcaKey}" (${fullData[0]?.[1]?.length || 0} dimensions)`);
+
+                // Build a map and normalize
+                const rawValues = new Map<string, number>();
+                let minValue = Infinity;
+                let maxValue = -Infinity;
+
+                for (const [pid, coords] of fullData) {
+                  if (coords.length > componentIndex) {
+                    const value = coords[componentIndex];
+                    rawValues.set(pid, value);
+                    minValue = Math.min(minValue, value);
+                    maxValue = Math.max(maxValue, value);
+                  }
+                }
+
+                const range = maxValue - minValue;
+                const newPointMetrics = dataset.map(([participantId]) => {
+                  const raw = rawValues.get(participantId);
+                  if (raw === undefined) return null;
+                  return range > 0 ? (raw - minValue) / range : 0.5;
+                });
+
+                console.log(`Calculated principal component ${metricConfig.component} for ${rawValues.size} participants (range: ${minValue.toFixed(3)} - ${maxValue.toFixed(3)})`);
+                setPointMetrics(newPointMetrics);
+              }
+            } else {
+              // Kedro/static mode: derive PCA pipeline ID from current pipeline
+              const pipelineParts = currentPipelineId.split('_');
+              let pcaPipelineId = 'mean_pca_bestkmeans'; // fallback default
+
+              if (pipelineParts.length >= 3) {
+                const imputer = pipelineParts[0]; // e.g., "mean", "median"
+                const clustering = "bestkmeans";
+                pcaPipelineId = `${imputer}_pca_${clustering}`;
+              }
 
-            if (pipelineParts.length >= 3) {
-              const imputer = pipelineParts[0]; // e.g., "mean", "median"
-              const clustering = "bestkmeans"; // alwasy assume "bestkmeans"
-              pcaPipelineId = `${imputer}_pca_${clustering}`;
-            }
+              console.log(`Using PCA pipeline "${pcaPipelineId}" derived from current pipeline "${currentPipelineId}"`);
 
-            console.log(`Using PCA pipeline "${pcaPipelineId}" derived from current pipeline "${currentPipelineId}"`);
+              const componentValues = await getPrincipalComponentValues(componentIndex, {
+                kedroBaseUrl,
+                pipelineId: pcaPipelineId
+              });
 
-            const componentValues = await getPrincipalComponentValues(componentIndex, {
-              kedroBaseUrl,
-              pipelineId: pcaPipelineId
-            });
+              const newPointMetrics = dataset.map(([participantId]) => {
+                return componentValues.get(participantId) ?? null;
+              });
 
-            const newPointMetrics = dataset.map(([participantId]) => {
-              return componentValues.get(participantId) ?? null;
-            });
-
-            setPointMetrics(newPointMetrics);
+              setPointMetrics(newPointMetrics);
+            }
           }
         } catch (err) {
           console.error('Error loading metrics:', err);

src/lib/h5ad-loader.ts

@@ -8,6 +8,8 @@ export type H5adData = {
   availableEmbeddings: string[];
   /** All 2D embeddings keyed by pipeline-style ID (X_ prefix stripped) */
   allEmbeddings: Record<string, [string, [number, number]][]>;
+  /** Full-dimension embeddings (>2D, e.g. PCA) keyed by pipeline-style ID */
+  fullDimensionEmbeddings: Record<string, [string, number[]][]>;
 };
 
 /**
@@ -155,6 +157,7 @@ export async function loadH5adFile(
     if (!obsmGroup) throw new Error('Missing /obsm group');
 
     const allEmbeddings: Record<string, [string, [number, number]][]> = {};
+    const fullDimensionEmbeddings: Record<string, [string, number[]][]> = {};
     for (const embKey of availableEmbeddings) {
       const ds = obsmGroup.get(embKey) as Dataset | null;
       if (!ds) continue;
@@ -174,16 +177,27 @@ export async function loadH5adFile(
         continue;
       }
 
+      // Strip X_ prefix for pipeline-style IDs
+      const pipelineId = embKey.replace(/^X_/, '');
+
+      // Always store 2D projection (first 2 columns)
       const embDataset: [string, [number, number]][] = [];
       for (let i = 0; i < nObs; i++) {
         const x = flatCoords[i * nDims];
         const y = flatCoords[i * nDims + 1];
         embDataset.push([obsNames[i], [x, y]]);
       }
-
-      // Strip X_ prefix for pipeline-style IDs
-      const pipelineId = embKey.replace(/^X_/, '');
       allEmbeddings[pipelineId] = embDataset;
+
+      // For high-dimensional embeddings (>2D), also store all dimensions
+      if (nDims > 2) {
+        const fullDataset: [string, number[]][] = [];
+        for (let i = 0; i < nObs; i++) {
+          const coords = flatCoords.slice(i * nDims, (i + 1) * nDims);
+          fullDataset.push([obsNames[i], coords]);
+        }
+        fullDimensionEmbeddings[pipelineId] = fullDataset;
+      }
     }
 
     // Use the selected embedding as the default dataset
@@ -238,7 +252,7 @@ export async function loadH5adFile(
     // --- Read votes from uns/votes ---
     const votesRows = readVotes(file);
 
-    return { dataset, statements, votesRows, availableEmbeddings, allEmbeddings };
+    return { dataset, statements, votesRows, availableEmbeddings, allEmbeddings, fullDimensionEmbeddings };
   } finally {
     if (file) {
       file.close();