Add interactive component metrics table

- Create ComponentTable.js with full metrics data from TSV file
- Display columns: Component, Kappa, Rho, Variance, Ranks, Dice, S/N, Classification, Tags
- Sync table selection with scatter plots and pie chart
- Auto-scroll table to selected row when selecting from charts
- Highlight selected row with classification color (green/red)
- Add rounded corners on row highlights and classification badges
- Fixed-width classification badges for consistent appearance
- Fix ToggleSwitch text color for better readability on colored backgrounds

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: eurunuela

claude-progress.txt

@@ -537,6 +537,44 @@ const blue2white = {
 
 ---
 
+## Session 3.3 - Component Table (2025-12-14)
+
+### Goals
+- Add interactive component metrics table below the charts
+- Synchronize table selection with chart selection
+- Display original metrics data from TSV file
+
+### Changes Made
+
+#### New Component: ComponentTable.js
+- Displays full metrics data from the original TSV file
+- Columns: Component, Kappa, Rho, Variance %, κ Rank, ρ Rank, Dice FT2, Dice FS0, S/N t, Classification, Tags
+- Interactive row selection synced with charts
+- Auto-scrolls to selected row when component is selected from charts
+- Selected row highlighted with classification color (green/red)
+- Rounded corners on row highlight and classification badges
+- Fixed-width classification badges for consistent appearance
+- Sticky header row with scrollable body (max 350px height)
+
+#### ToggleSwitch.js Fix
+- Changed selected text color from white to dark gray (#1f2937) for readability
+
+### Features
+- Click table row to select component (updates all charts)
+- Click chart point/slice to select component (table scrolls to row)
+- Classification updates reflect in table in real-time
+- Hover effects on rows
+- Responsive scrolling for large datasets
+
+### Files Created
+- `src/Plots/ComponentTable.js`
+
+### Files Modified
+- `src/Plots/Plots.js` - Import and render ComponentTable
+- `src/Plots/ToggleSwitch.js` - Fix text color contrast
+
+---
+
 ## Template for Future Sessions
 
 ```

features.json

@@ -347,6 +347,45 @@
         "Verify component selection still updates displayed PNG"
       ],
       "passes": true
+    },
+    {
+      "id": "display_component_table",
+      "category": "visualization",
+      "description": "Display interactive component metrics table with full data from metrics TSV file",
+      "steps": [
+        "Load a tedana folder",
+        "Navigate to the 'ICA' tab",
+        "Verify component metrics table appears below the charts",
+        "Verify table shows columns: Component, Kappa, Rho, Variance, Ranks, Dice scores, S/N, Classification, Tags",
+        "Verify table is scrollable for large datasets"
+      ],
+      "passes": true
+    },
+    {
+      "id": "table_chart_sync",
+      "category": "interactivity",
+      "description": "Synchronize selection between component table and charts",
+      "steps": [
+        "Load a tedana folder",
+        "Click on a row in the component table",
+        "Verify all charts update to highlight the selected component",
+        "Click on a point in a scatter plot or pie chart",
+        "Verify the table auto-scrolls to and highlights the selected row"
+      ],
+      "passes": true
+    },
+    {
+      "id": "table_classification_update",
+      "category": "interactivity",
+      "description": "Update table classification when reclassifying components",
+      "steps": [
+        "Load a tedana folder",
+        "Select a component from the table or charts",
+        "Use A/R keys or toggle switch to change classification",
+        "Verify the table row highlight color changes (green for accepted, red for rejected)",
+        "Verify the classification badge in the table updates"
+      ],
+      "passes": true
     }
   ]
 }

src/Plots/ComponentTable.js

@@ -0,0 +1,239 @@
+import React, { useRef, useEffect, useMemo } from "react";
+
+const COLORS = {
+  accepted: "#86EFAC",
+  acceptedHover: "#22C55E",
+  rejected: "#FCA5A5",
+  rejectedHover: "#EF4444",
+};
+
+// Format cell value based on type
+function formatValue(value, key) {
+  if (value === null || value === undefined || value === "") return "—";
+  if (typeof value === "number") {
+    // Very small numbers in scientific notation
+    if (Math.abs(value) < 0.0001 && value !== 0) {
+      return value.toExponential(2);
+    }
+    // Regular numbers with 2-4 decimal places
+    return value.toFixed(2);
+  }
+  return String(value);
+}
+
+// Get a human-readable column name
+function getColumnLabel(key) {
+  const labels = {
+    "Component": "Component",
+    "kappa": "Kappa",
+    "rho": "Rho",
+    "variance explained": "Variance %",
+    "normalized variance explained": "Norm. Var.",
+    "countsigFT2": "Sig. FT2",
+    "countsigFS0": "Sig. FS0",
+    "dice_FT2": "Dice FT2",
+    "dice_FS0": "Dice FS0",
+    "signal-noise_t": "S/N t",
+    "signal-noise_p": "S/N p",
+    "optimal sign": "Sign",
+    "classification": "Classification",
+    "classification_tags": "Tags",
+    "kappa rank": "κ Rank",
+    "rho rank": "ρ Rank",
+    "rationale": "Rationale",
+  };
+  return labels[key] || key;
+}
+
+// Columns to display (in order)
+const DISPLAY_COLUMNS = [
+  "Component",
+  "kappa",
+  "rho",
+  "variance explained",
+  "kappa rank",
+  "rho rank",
+  "dice_FT2",
+  "dice_FS0",
+  "signal-noise_t",
+  "classification",
+  "classification_tags",
+];
+
+function ComponentTable({ data, selectedIndex, onRowClick, classifications }) {
+  const selectedRowRef = useRef(null);
+  const tableContainerRef = useRef(null);
+
+  // Scroll selected row into view when selection changes
+  useEffect(() => {
+    if (selectedRowRef.current && tableContainerRef.current) {
+      const container = tableContainerRef.current;
+      const row = selectedRowRef.current;
+
+      // Calculate if row is visible in the container
+      const containerRect = container.getBoundingClientRect();
+      const rowRect = row.getBoundingClientRect();
+
+      // Check if row is outside visible area
+      if (rowRect.top < containerRect.top || rowRect.bottom > containerRect.bottom) {
+        row.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      }
+    }
+  }, [selectedIndex]);
+
+  // Determine which columns exist in the data
+  const columns = useMemo(() => {
+    if (!data?.length) return [];
+    const availableKeys = Object.keys(data[0]);
+    return DISPLAY_COLUMNS.filter((col) => availableKeys.includes(col));
+  }, [data]);
+
+  if (!data?.length) {
+    return null;
+  }
+
+  const getClassification = (index) => {
+    // Use classifications array if provided (for live updates), otherwise fall back to data
+    if (classifications && classifications[index]) {
+      return classifications[index];
+    }
+    return data[index]?.classification || "rejected";
+  };
+
+  const getRowStyle = (index) => {
+    return {
+      cursor: "pointer",
+    };
+  };
+
+  const getCellStyle = (index, colIndex, totalCols) => {
+    const isSelected = index === selectedIndex;
+    const classification = getClassification(index);
+    const baseColor = classification === "accepted" ? COLORS.accepted : COLORS.rejected;
+
+    const isFirst = colIndex === 0;
+    const isLast = colIndex === totalCols - 1;
+
+    return {
+      backgroundColor: isSelected ? baseColor : "transparent",
+      transition: "background-color 0.15s ease",
+      borderTopLeftRadius: isSelected && isFirst ? "8px" : "0",
+      borderBottomLeftRadius: isSelected && isFirst ? "8px" : "0",
+      borderTopRightRadius: isSelected && isLast ? "8px" : "0",
+      borderBottomRightRadius: isSelected && isLast ? "8px" : "0",
+    };
+  };
+
+  return (
+    <div style={{ width: "100%", padding: "16px 24px 24px 24px" }}>
+      <h3 className="text-center text-lg font-semibold text-gray-700 mb-3">
+        Component Metrics
+      </h3>
+      <div
+        ref={tableContainerRef}
+        className="rounded-lg border border-gray-200 shadow-sm"
+        style={{
+          maxHeight: "350px",
+          overflowY: "auto",
+          overflowX: "auto",
+          margin: "0 8px",
+        }}
+      >
+        <table className="w-full text-sm" style={{ borderCollapse: "separate", borderSpacing: "0" }}>
+          <thead className="sticky top-0 bg-gray-100 text-gray-700 z-10">
+            <tr>
+              {columns.map((col) => (
+                <th
+                  key={col}
+                  className={`px-3 py-2 font-semibold whitespace-nowrap ${
+                    col === "Component" || col === "classification" || col === "classification_tags"
+                      ? "text-left"
+                      : "text-right"
+                  }`}
+                >
+                  {getColumnLabel(col)}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, index) => {
+              const classification = getClassification(index);
+              return (
+                <tr
+                  key={row.Component || index}
+                  ref={index === selectedIndex ? selectedRowRef : null}
+                  onClick={() => onRowClick(index)}
+                  style={getRowStyle(index)}
+                  className="border-t border-gray-100 group"
+                  onMouseEnter={(e) => {
+                    if (index !== selectedIndex) {
+                      const cells = e.currentTarget.querySelectorAll("td");
+                      cells.forEach((cell) => {
+                        cell.style.backgroundColor = "#f3f4f6";
+                      });
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (index !== selectedIndex) {
+                      const cells = e.currentTarget.querySelectorAll("td");
+                      cells.forEach((cell) => {
+                        cell.style.backgroundColor = "transparent";
+                      });
+                    }
+                  }}
+                >
+                  {columns.map((col, colIndex) => {
+                    const cellStyle = getCellStyle(index, colIndex, columns.length);
+                    if (col === "classification") {
+                      return (
+                        <td key={col} className="px-3 py-2" style={cellStyle}>
+                          <span
+                            className="text-xs font-medium"
+                            style={{
+                              backgroundColor:
+                                classification === "accepted"
+                                  ? COLORS.accepted
+                                  : COLORS.rejected,
+                              color: "#1f2937",
+                              borderRadius: "6px",
+                              display: "inline-block",
+                              padding: "4px 0",
+                              width: "75px",
+                              textAlign: "center",
+                              boxSizing: "border-box",
+                            }}
+                          >
+                            {classification}
+                          </span>
+                        </td>
+                      );
+                    }
+                    return (
+                      <td
+                        key={col}
+                        style={cellStyle}
+                        className={`px-3 py-2 ${
+                          col === "Component" || col === "classification_tags"
+                            ? "font-medium text-gray-900"
+                            : "text-right text-gray-600"
+                        }`}
+                      >
+                        {formatValue(row[col], col)}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default ComponentTable;

src/Plots/Plots.js

@@ -7,6 +7,7 @@ import PieChart from "./PieChart";
 import TimeSeries from "./TimeSeries";
 import FFTSpectrum from "./FFTSpectrum";
 import BrainViewer from "./BrainViewer";
+import ComponentTable from "./ComponentTable";
 import { assignColor } from "./PlotUtils";
 
 // Chart dimensions - sized to fit 2x2 in half screen width
@@ -412,6 +413,14 @@ function Plots({ componentData, componentFigures, originalData, mixingMatrix, ni
           )}
         </div>
       </div>
+
+      {/* Component table - full width below charts */}
+      <ComponentTable
+        data={componentData?.[0] || []}
+        selectedIndex={selectedIndex}
+        onRowClick={handlePointClick}
+        classifications={processedData.map((d) => d.classification)}
+      />
     </div>
   );
 }

src/Plots/ToggleSwitch.js

@@ -29,7 +29,7 @@ function ToggleSwitch({ values, selected, colors, handleNewSelection }) {
           <label
             onClick={() => handleNewSelection(val)}
             className="relative z-10 h-8 flex items-center justify-center transition-colors duration-200"
-            style={{ width: 90, color: selected === val ? "#fff" : "rgba(0,0,0,0.6)", cursor: "pointer" }}
+            style={{ width: 90, color: selected === val ? "#1f2937" : "rgba(0,0,0,0.6)", cursor: "pointer" }}
           >
             {titleCase(val)}
           </label>