Fix votes column name matching and embedding switching

- Support hyphenated column names from valency-anndata (voter-id, comment-id)
  in addition to underscored variants
- Store file buffer in a ref so embedding switching works after the file
  picker is unmounted from the DOM

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

Author: patcon

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

@@ -14,6 +14,9 @@ function H5adFileLoader() {
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [selectedEmbedding, setSelectedEmbedding] = React.useState<string | null>(null);
+  // Store the file buffer so we can re-parse with a different embedding
+  // without needing the file input element (which is removed from DOM after loading)
+  const bufferRef = React.useRef<ArrayBuffer | null>(null);
 
   const handleFileChange = React.useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -24,6 +27,7 @@ function H5adFileLoader() {
 
     try {
       const buffer = await file.arrayBuffer();
+      bufferRef.current = buffer;
       const parsed = await loadH5adFile(buffer);
       setData(parsed);
       // Set the initially-selected embedding (first in preferred order)
@@ -40,33 +44,21 @@ function H5adFileLoader() {
   }, []);
 
   const handleEmbeddingChange = React.useCallback(async (newEmbedding: string) => {
-    if (!data) return;
+    if (!bufferRef.current) return;
     setSelectedEmbedding(newEmbedding);
     setLoading(true);
     setError(null);
 
     try {
-      // Re-read the file from the emscripten FS isn't possible after close,
-      // so we need the user to re-upload. Instead, store the buffer.
-      // For simplicity, we ask user to re-select. But actually we can
-      // use the fileInputRef to get the file again.
-      const fileInput = document.querySelector<HTMLInputElement>('#h5ad-file-input');
-      const file = fileInput?.files?.[0];
-      if (!file) {
-        setError('Please re-select the file to change embeddings');
-        setLoading(false);
-        return;
-      }
-      const buffer = await file.arrayBuffer();
-      const parsed = await loadH5adFile(buffer, newEmbedding);
+      const parsed = await loadH5adFile(bufferRef.current, newEmbedding);
       setData(parsed);
     } catch (err) {
       console.error('Failed to reload with new embedding:', err);
       setError(err instanceof Error ? err.message : 'Failed to reload embedding');
     } finally {
       setLoading(false);
     }
-  }, [data]);
+  }, []);
 
   // File picker screen
   if (!data) {
@@ -90,7 +82,6 @@ function H5adFileLoader() {
           >
             {loading ? 'Loading...' : 'Choose .h5ad file'}
             <input
-              id="h5ad-file-input"
               type="file"
               accept=".h5ad,.h5,.hdf5"
               onChange={handleFileChange}
@@ -155,7 +146,7 @@ statements, and votes directly in the browser using h5wasm.
 - \`obs\` — participant index (IDs)
 - \`obsm/X_*\` — 2D embeddings (e.g. \`X_localmap\`, \`X_umap\`)
 - \`var\` — statement index + \`content\` and \`moderation_state\` columns
-- \`uns/votes\` — DataFrame with \`voter_id\`, \`comment_id\`, \`vote\` columns
+- \`uns/votes\` — DataFrame with \`voter-id\`, \`comment-id\`, \`vote\` columns
         `,
       },
     },

src/lib/h5ad-loader.ts

@@ -238,9 +238,17 @@ export async function loadH5adFile(
   }
 }
 
+/**
+ * Find the first matching key from a list of candidates.
+ */
+function findKey(available: string[], candidates: string[]): string | undefined {
+  return candidates.find(k => available.includes(k));
+}
+
 /**
  * Read votes DataFrame from uns/votes.
- * Expected columns: voter_id (or participant_id), comment_id, vote
+ * Handles both hyphenated (valency-anndata: voter-id, comment-id) and
+ * underscored (voter_id, comment_id, participant_id) column naming conventions.
  */
 function readVotes(file: H5File): H5adData['votesRows'] {
   const unsGroup = file.get('uns') as Group | null;
@@ -251,30 +259,29 @@ function readVotes(file: H5File): H5adData['votesRows'] {
 
   const votesKeys = votesGroup.keys();
 
-  // Read participant IDs - try voter_id first, then participant_id
-  let participantIds: (string | number)[];
-  if (votesKeys.includes('voter_id')) {
-    participantIds = readColumn(votesGroup, 'voter_id');
-  } else if (votesKeys.includes('participant_id')) {
-    participantIds = readColumn(votesGroup, 'participant_id');
-  } else {
-    console.warn('No voter_id or participant_id column found in uns/votes');
+  // Read participant IDs - try multiple naming conventions
+  const participantKey = findKey(votesKeys, ['voter-id', 'voter_id', 'participant_id', 'participant-id']);
+  if (!participantKey) {
+    console.warn('No voter/participant ID column found in uns/votes. Available keys:', votesKeys);
     return [];
   }
+  const participantIds = readColumn(votesGroup, participantKey);
 
-  // Read comment_id
-  if (!votesKeys.includes('comment_id')) {
-    console.warn('No comment_id column found in uns/votes');
+  // Read comment/statement IDs
+  const commentKey = findKey(votesKeys, ['comment-id', 'comment_id', 'statement_id', 'statement-id']);
+  if (!commentKey) {
+    console.warn('No comment/statement ID column found in uns/votes. Available keys:', votesKeys);
     return [];
   }
-  const commentIds = readColumn(votesGroup, 'comment_id');
+  const commentIds = readColumn(votesGroup, commentKey);
 
   // Read vote values
-  if (!votesKeys.includes('vote')) {
-    console.warn('No vote column found in uns/votes');
+  const voteKey = findKey(votesKeys, ['vote', 'votes']);
+  if (!voteKey) {
+    console.warn('No vote column found in uns/votes. Available keys:', votesKeys);
     return [];
   }
-  const votes = readColumn(votesGroup, 'vote');
+  const votes = readColumn(votesGroup, voteKey);
 
   const rows: H5adData['votesRows'] = [];
   for (let i = 0; i < participantIds.length; i++) {