Find the appropriate PCA pipeline to fetch components for.

Author: patcon

src/components/convo-explorer/App.tsx

@@ -361,10 +361,21 @@ export const App: React.FC<AppProps> = ({ testAnimation = false, kedroBaseUrl, i
           } else if (metricConfig.type === "principal-components") {
             // Load principal component metrics (new logic)
             const componentIndex = metricConfig.component - 1; // Convert 1-based to 0-based index
-            
-            // For principal components, we need to use the PCA pipeline, not the current pipeline
-            const pcaPipelineId = kedroBaseUrl ? 'mean_pca_bestkmeans' : currentPipelineId;
-            
+
+            // 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 (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}"`);
+
             const componentValues = await getPrincipalComponentValues(componentIndex, {
               kedroBaseUrl,
               pipelineId: pcaPipelineId

src/lib/kedro-api.ts

@@ -573,11 +573,11 @@ export async function loadFullProjections(kedroBaseUrl?: string, pipelineId?: st
       const { resolveAssetPath } = await import('./paths');
       const projectionsUrl = resolveAssetPath('/projections.json');
       const response = await fetch(projectionsUrl);
-      
+
       if (!response.ok) {
         throw new Error(`Failed to fetch local projections: ${response.status} ${response.statusText}`);
       }
-      
+
       projectionsArray = await response.json();
       console.log('✅ Successfully loaded projections from local file');
     }
@@ -615,7 +615,7 @@ export async function getPrincipalComponentValues(
   try {
     // Load full projections data
     const fullProjections = await loadFullProjections(kedroBaseUrl, pipelineId);
-    
+
     const componentValues = new Map<string, number>();
     let minValue = Infinity;
     let maxValue = -Infinity;
@@ -633,7 +633,7 @@ export async function getPrincipalComponentValues(
     // Second pass: normalize values to 0-1 range
     const normalizedValues = new Map<string, number>();
     const range = maxValue - minValue;
-    
+
     if (range > 0) {
       componentValues.forEach((value, participantId) => {
         normalizedValues.set(participantId, (value - minValue) / range);