Add load-file button to PipelineSelector for h5ad mode

Thread onLoadFile callback from story through App and D3Map to
PipelineSelector, showing an upload button that lets users load a new
h5ad file without refreshing the page.

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

Author: patcon

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

@@ -13,6 +13,11 @@ function H5adFileLoader() {
   const [preloadedData, setPreloadedData] = React.useState<PreloadedData | null>(null);
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleLoadFile = React.useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
 
   const handleFileChange = React.useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -35,6 +40,8 @@ function H5adFileLoader() {
       setError(err instanceof Error ? err.message : 'Failed to parse h5ad file');
     } finally {
       setLoading(false);
+      // Reset so re-selecting the same file triggers onChange again
+      if (fileInputRef.current) fileInputRef.current.value = '';
     }
   }, []);
 
@@ -53,25 +60,39 @@ function H5adFileLoader() {
           {error && (
             <p className="text-sm text-destructive">{error}</p>
           )}
-          <label
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".h5ad,.h5,.hdf5"
+            onChange={handleFileChange}
+            className="sr-only"
+          />
+          <button
             className={`inline-flex items-center gap-2 px-4 py-2 rounded-md border cursor-pointer
               hover:bg-accent hover:text-accent-foreground transition-colors
               ${loading ? 'opacity-50 pointer-events-none' : ''}`}
+            onClick={handleLoadFile}
+            disabled={loading}
           >
             {loading ? 'Loading...' : 'Choose .h5ad file'}
-            <input
-              type="file"
-              accept=".h5ad,.h5,.hdf5"
-              onChange={handleFileChange}
-              className="sr-only"
-            />
-          </label>
+          </button>
         </div>
       </div>
     );
   }
 
-  return <App preloadedData={preloadedData} />;
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".h5ad,.h5,.hdf5"
+        onChange={handleFileChange}
+        className="sr-only"
+      />
+      <App preloadedData={preloadedData} onLoadFile={handleLoadFile} />
+    </>
+  );
 }
 
 const meta: Meta = {

src/components/convo-explorer/App.tsx

@@ -44,9 +44,10 @@ type AppProps = {
   initialPipelineId?: string;
   pipelineFilter?: string;
   preloadedData?: PreloadedData;
+  onLoadFile?: () => void;
 };
 
-export const App: React.FC<AppProps> = ({ testAnimation = false, kedroBaseUrl, initialPipelineId, pipelineFilter, preloadedData }) => {
+export const App: React.FC<AppProps> = ({ testAnimation = false, kedroBaseUrl, initialPipelineId, pipelineFilter, preloadedData, onLoadFile }) => {
   const [dataset, setDataset] = React.useState<[string, [number, number]][]>([]);
   const [statements, setStatements] = React.useState<any[]>([]);
   const [loading, setLoading] = React.useState(true);
@@ -698,6 +699,7 @@ export const App: React.FC<AppProps> = ({ testAnimation = false, kedroBaseUrl, i
             availablePipelines={kedroBaseUrl ? [] : undefined} // Will be populated by D3Map's usePipelineOptions
             onPipelineChange={handlePipelineChange}
             preloadedPipelineData={preloadedData?.pipelineData}
+            onLoadFile={onLoadFile}
           />
         </div>
       </div>

src/components/convo-explorer/D3Map.tsx

@@ -44,6 +44,8 @@ type D3MapProps = {
   onPipelineChange?: (pipelineId: string) => void;
   /** Preloaded pipeline data (e.g. from h5ad file) — bypasses fetch-based loading */
   preloadedPipelineData?: Record<string, [string, [number, number]][] | null>;
+  /** Callback to trigger loading a new file (shown as button in PipelineSelector) */
+  onLoadFile?: () => void;
 };
 
 const PREFERRED_KEDRO_PIPELINE = 'mean_localmap_bestkmeans';
@@ -67,6 +69,7 @@ export const D3Map: React.FC<D3MapProps> = ({
   availablePipelines = [],
   onPipelineChange,
   preloadedPipelineData,
+  onLoadFile,
 }) => {
   const svgRef = React.useRef<SVGSVGElement>(null);
   const containerRef = React.useRef<d3.Selection<SVGGElement, unknown, null, undefined> | null>(null);
@@ -775,6 +778,7 @@ export const D3Map: React.FC<D3MapProps> = ({
           pipelineLoadingStates={Object.fromEntries(
             currentPipelineOptions.map(p => [p.id, !pipelineData[p.id]])
           )}
+          onLoadFile={onLoadFile}
           top="1rem"
           left="1rem"
         />

src/components/convo-explorer/PipelineSelector.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Combobox, type ComboboxOption } from "../ui/combobox";
 import { Button } from "../ui/button";
-import { Repeat1, Repeat } from "lucide-react";
+import { Repeat1, Repeat, Upload } from "lucide-react";
 
 interface PipelineOption {
   id: string;
@@ -37,6 +37,8 @@ interface PipelineSelectorProps {
   right?: number | string;
   /** Custom positioning - bottom coordinate */
   bottom?: number | string;
+  /** Callback to trigger loading a new file */
+  onLoadFile?: () => void;
 }
 
 export const PipelineSelector: React.FC<PipelineSelectorProps> = ({
@@ -54,6 +56,7 @@ export const PipelineSelector: React.FC<PipelineSelectorProps> = ({
   left = "1rem",
   right,
   bottom,
+  onLoadFile,
 }) => {
   // Measure the longest pipeline label to set a stable combobox width
   const longestLabel = React.useMemo(() => {
@@ -115,6 +118,17 @@ export const PipelineSelector: React.FC<PipelineSelectorProps> = ({
           >
             <Repeat className="h-4 w-4" />
           </Button>
+          {onLoadFile && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onLoadFile}
+              disabled={isAnimating}
+              title="Load a new file"
+            >
+              <Upload className="h-4 w-4" />
+            </Button>
+          )}
         </div>
       </div>
     </div>