Feat/visualize language instruction (#7)

* add general support to print `task` as language instruction

* add support to print `language instructions` instead of `task` even if there are multiple entry like droid

src/app/[org]/[dataset]/[episode]/episode-viewer.tsx

@@ -46,6 +46,7 @@ function EpisodeViewerInner({ data, org, dataset }: { data: any; org?: string; d
     videosInfo,
     chartDataGroups,
     episodes,
+    task,
   } = data;
 
   const [videosReady, setVideosReady] = useState(!videosInfo.length);
@@ -227,6 +228,22 @@ function EpisodeViewerInner({ data, org, dataset }: { data: any; org?: string; d
           />
         )}
 
+        {/* Language Instruction */}
+        {task && (
+          <div className="mb-6 p-4 bg-slate-800 rounded-lg border border-slate-600">
+            <p className="text-slate-300">
+              <span className="font-semibold text-slate-100">Language Instruction:</span>
+            </p>
+            <div className="mt-2 text-slate-300">
+              {task.split('\n').map((instruction, index) => (
+                <p key={index} className="mb-1">
+                  {instruction}
+                </p>
+              ))}
+            </div>
+          </div>
+        )}
+
         {/* Graph */}
         <div className="mb-4">
           <DataRecharts

src/app/[org]/[dataset]/[episode]/fetch-data.ts

@@ -192,6 +192,78 @@ async function getEpisodeDataV2(
   );
 
   const arrayBuffer = await fetchParquetFile(parquetUrl);
+  
+  // Extract task - first check for language instructions (preferred), then fallback to task field or tasks.jsonl
+  let task: string | undefined;
+  let allData: any[] = [];
+  
+  // Load data first
+  try {
+    allData = await readParquetAsObjects(arrayBuffer, []);
+  } catch (error) {
+    // Could not read parquet data
+  }
+  
+  // First check for language_instruction fields in the data (preferred)
+  if (allData.length > 0) {
+    const firstRow = allData[0];
+    const languageInstructions: string[] = [];
+    
+    // Check for language_instruction field
+    if (firstRow.language_instruction) {
+      languageInstructions.push(firstRow.language_instruction);
+    }
+    
+    // Check for numbered language_instruction fields
+    let instructionNum = 2;
+    while (firstRow[`language_instruction_${instructionNum}`]) {
+      languageInstructions.push(firstRow[`language_instruction_${instructionNum}`]);
+      instructionNum++;
+    }
+    
+    // Join all instructions with line breaks
+    if (languageInstructions.length > 0) {
+      task = languageInstructions.join('\n');
+    }
+  }
+  
+  // If no language instructions found, try direct task field
+  if (!task && allData.length > 0 && allData[0].task) {
+    task = allData[0].task;
+  }
+  
+  // If still no task found, try loading from tasks.jsonl metadata file (v2.x format)
+  if (!task && allData.length > 0) {
+    try {
+      const tasksUrl = buildVersionedUrl(repoId, version, "meta/tasks.jsonl");
+      const tasksResponse = await fetch(tasksUrl);
+      
+      if (tasksResponse.ok) {
+        const tasksText = await tasksResponse.text();
+        // Parse JSONL format (one JSON object per line)
+        const tasksData = tasksText
+          .split('\n')
+          .filter(line => line.trim())
+          .map(line => JSON.parse(line));
+        
+        if (tasksData && tasksData.length > 0) {
+          const taskIndex = allData[0].task_index;
+          
+          // Convert BigInt to number for comparison
+          const taskIndexNum = typeof taskIndex === 'bigint' ? Number(taskIndex) : taskIndex;
+          
+          // Find task by task_index
+          const taskData = tasksData.find(t => t.task_index === taskIndexNum);
+          if (taskData) {
+            task = taskData.task;
+          }
+        }
+      }
+    } catch (error) {
+      // No tasks metadata file for this v2.x dataset
+    }
+  }
+  
   const data = await readParquetColumn(arrayBuffer, filteredColumnNames);
   // Flatten and map to array of objects for chartData
   const seriesNames = [
@@ -283,7 +355,7 @@ async function getEpisodeDataV2(
       // suffixGroupArr is array of suffix groups (each is array of keys)
       const merged = suffixGroupArr.flat();
       if (merged.length > 6) {
-        const subgroups = [];
+        const subgroups: string[][] = [];
         for (let i = 0; i < merged.length; i += 6) {
           subgroups.push(merged.slice(i, i + 6));
         }
@@ -337,6 +409,7 @@ async function getEpisodeDataV2(
     episodes,
     ignoredColumns,
     duration,
+    task,
   };
 }
 
@@ -365,7 +438,7 @@ async function getEpisodeDataV3(
   const videosInfo = extractVideoInfoV3WithSegmentation(repoId, version, info, episodeMetadata);
 
   // Load episode data for charts
-  const { chartDataGroups, ignoredColumns } = await loadEpisodeDataV3(repoId, version, info, episodeMetadata);
+  const { chartDataGroups, ignoredColumns, task } = await loadEpisodeDataV3(repoId, version, info, episodeMetadata);
 
   // Calculate duration from episode length and FPS if available
   const duration = episodeMetadata.length ? episodeMetadata.length / info.fps : 
@@ -379,6 +452,7 @@ async function getEpisodeDataV3(
     episodes,
     ignoredColumns,
     duration,
+    task,
   };
 }
 
@@ -388,7 +462,7 @@ async function loadEpisodeDataV3(
   version: string,
   info: DatasetMetadata,
   episodeMetadata: any,
-): Promise<{ chartDataGroups: any[]; ignoredColumns: string[] }> {
+): Promise<{ chartDataGroups: any[]; ignoredColumns: string[]; task?: string }> {
   // Build data file path using chunk and file indices
   const dataChunkIndex = episodeMetadata.data_chunk_index || 0;
   const dataFileIndex = episodeMetadata.data_file_index || 0;
@@ -397,7 +471,7 @@ async function loadEpisodeDataV3(
   try {
     const dataUrl = buildVersionedUrl(repoId, version, dataPath);
     const arrayBuffer = await fetchParquetFile(dataUrl);
-    const fullData = await readParquetColumn(arrayBuffer, []);
+    const fullData = await readParquetAsObjects(arrayBuffer, []);
     
     // Extract the episode-specific data slice
     // Convert BigInt to number if needed
@@ -406,15 +480,87 @@ async function loadEpisodeDataV3(
     const episodeData = fullData.slice(fromIndex, toIndex);
     
     if (episodeData.length === 0) {
-      return { chartDataGroups: [], ignoredColumns: [] };
+      return { chartDataGroups: [], ignoredColumns: [], task: undefined };
     }
     
     // Convert to the same format as v2.x for compatibility with existing chart code
     const { chartDataGroups, ignoredColumns } = processEpisodeDataForCharts(episodeData, info, episodeMetadata);
     
-    return { chartDataGroups, ignoredColumns };
+    // First check for language_instruction fields in the data (preferred)
+    let task: string | undefined;
+    if (episodeData.length > 0) {
+      const firstRow = episodeData[0];
+      const languageInstructions: string[] = [];
+      
+      // Check for language_instruction field
+      if (firstRow.language_instruction) {
+        languageInstructions.push(firstRow.language_instruction);
+      }
+      
+      // Check for numbered language_instruction fields
+      let instructionNum = 2;
+      while (firstRow[`language_instruction_${instructionNum}`]) {
+        languageInstructions.push(firstRow[`language_instruction_${instructionNum}`]);
+        instructionNum++;
+      }
+      
+      // If no instructions found in first row, check a few more rows
+      if (languageInstructions.length === 0 && episodeData.length > 1) {
+        const middleIndex = Math.floor(episodeData.length / 2);
+        const lastIndex = episodeData.length - 1;
+        
+        [middleIndex, lastIndex].forEach((idx) => {
+          const row = episodeData[idx];
+          
+          if (row.language_instruction && languageInstructions.length === 0) {
+            // Use this row's instructions
+            if (row.language_instruction) {
+              languageInstructions.push(row.language_instruction);
+            }
+            let num = 2;
+            while (row[`language_instruction_${num}`]) {
+              languageInstructions.push(row[`language_instruction_${num}`]);
+              num++;
+            }
+          }
+        });
+      }
+      
+      // Join all instructions with line breaks
+      if (languageInstructions.length > 0) {
+        task = languageInstructions.join('\n');
+      }
+    }
+    
+    // If no language instructions found, fall back to tasks metadata
+    if (!task) {
+      try {
+        // Load tasks metadata
+        const tasksUrl = buildVersionedUrl(repoId, version, "meta/tasks.parquet");
+        const tasksArrayBuffer = await fetchParquetFile(tasksUrl);
+        const tasksData = await readParquetAsObjects(tasksArrayBuffer, []);
+        
+        if (episodeData.length > 0 && tasksData && tasksData.length > 0) {
+          const taskIndex = episodeData[0].task_index;
+          
+          // Convert BigInt to number for comparison
+          const taskIndexNum = typeof taskIndex === 'bigint' ? Number(taskIndex) : taskIndex;
+          
+          // Look up task by index
+          if (taskIndexNum !== undefined && taskIndexNum < tasksData.length) {
+            const taskData = tasksData[taskIndexNum];
+            // Extract task from __index_level_0__ field
+            task = taskData.__index_level_0__ || taskData.task || taskData['task'] || taskData[0];
+          }
+        }
+      } catch (error) {
+        // Could not load tasks metadata - dataset might not have language tasks
+      }
+    }
+    
+    return { chartDataGroups, ignoredColumns, task };
   } catch {
-    return { chartDataGroups: [], ignoredColumns: [] };
+    return { chartDataGroups: [], ignoredColumns: [], task: undefined };
   }
 }
 
@@ -465,7 +611,7 @@ function processEpisodeDataForCharts(
     }
   });
   
-  // Columns to exclude from charts
+  // Columns to exclude from charts (note: 'task' is intentionally not excluded as we want to access it)
   const excludedColumns = ['index', 'task_index', 'episode_index', 'frame_index', 'next.done'];
 
   // Create columns structure similar to V2.1 for proper hierarchical naming
@@ -831,7 +977,7 @@ function parseEpisodeRowSimple(row: any): any {
         return parseInt(value) || 0;
       };
       
-      const episodeData = {
+      const episodeData: any = {
         episode_index: toBigIntSafe(row['episode_index']),
         data_chunk_index: toBigIntSafe(row['data/chunk_index']),
         data_file_index: toBigIntSafe(row['data/file_index']),