feat: Add multi-run support with per-run data grouping and run selector (#126)

When a tedana output folder contains files from multiple BIDS runs
(e.g. run-01, run-02), Rica now groups all per-run data into indexed
arrays and shows a run selector bar above the tabs.

- Add `parseRunLabel` / `deriveRunLabels` helpers to pathUtils.js
- Refactor both loaders in IntroPopUp.js to detect BIDS run entities
  and accumulate per-run data (metrics, mixing matrix, NIfTIs, report,
  decision tree, etc.) into run-indexed arrays instead of scalars
- Add `runs` / `selectedRunIndex` state to App (index.js); reset to 0
  on every new dataset load
- Split the `info` state into separate `reportText[]` and `dirPath[]`
  per-run arrays
- Render a sticky run selector bar (only when runs.length > 1) that
  lets users switch between runs; all tabs reflect the selected run
- Update Info.js to accept explicit `info` + `dirPath` string props
- Add a useEffect in Plots.js to reset `selectedIndex` to 0 on run
  change, preventing out-of-range component selection
- Carpets and QC Histograms/Time Series are unchanged — they already
  display all runs' SVGs via their accumulated flat arrays

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

Author: eurunuela

src/Info/Info.js

@@ -3,9 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { getFolderName } from "../utils/pathUtils";
 
-function Info({ info, isDark }) {
+function Info({ info, dirPath, isDark }) {
   const [showTooltip, setShowTooltip] = useState(false);
-  if (!info?.length) {
+  if (!info && !dirPath) {
     return (
       <div style={{
         display: 'flex',
@@ -59,7 +59,7 @@ function Info({ info, isDark }) {
             onMouseEnter={() => setShowTooltip(true)}
             onMouseLeave={() => setShowTooltip(false)}
           >
-            {getFolderName(info[1])}
+            {getFolderName(dirPath)}
             {showTooltip && (
               <span
                 style={{
@@ -78,7 +78,7 @@ function Info({ info, isDark }) {
                   zIndex: 1000,
                 }}
               >
-                {info[1]}
+                {dirPath}
               </span>
             )}
           </span>
@@ -100,7 +100,7 @@ function Info({ info, isDark }) {
           textAlign: 'left',
           margin: 0,
         }}>
-          {info[0]}
+          {info}
         </p>
       </div>
     </div>

src/Plots/Plots.js

@@ -174,6 +174,11 @@ function Plots({ componentData, componentFigures, originalData, mixingMatrix, ni
     initializeData();
   }, [initializeData]);
 
+  // Reset to first component when the run changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [componentData]);
+
   // Find and display component image
   const findComponentImage = useCallback(
     (index, data) => {