inspect-ai 0.3.58__py3-none-any.whl → 0.3.60__py3-none-any.whl

inspect_ai/_view/www/src/index.js

@@ -2,15 +2,15 @@ import { render } from "preact";
 import { html } from "htm/preact";
 
 import { App } from "./App.mjs";
-import api from "./api/index.mjs";
-import { getVscodeApi } from "./utils/vscode.mjs";
+import api from "./api/index";
+import { getVscodeApi } from "./utils/vscode";
 import { throttle } from "./utils/sync.mjs";
 
 // Read any state from the page itself
 const vscode = getVscodeApi();
 let initialState = undefined;
 if (vscode) {
-  initialState = vscode.getState();
+  initialState = filterState(vscode.getState());
 }
 
 render(
@@ -20,9 +20,82 @@ render(
     saveInitialState=${throttle((state) => {
       const vscode = getVscodeApi();
       if (vscode) {
-        vscode.setState(state);
+        vscode.setState(filterState(state));
       }
     }, 1000)}
   />`,
   document.getElementById("app"),
 );
+
+function filterState(state) {
+  if (!state) {
+    return state;
+  }
+
+  // When saving state, we can't store vast amounts of data (like a large sample)
+  const filters = [filterLargeSample, filterLargeSelectedLog];
+  return filters.reduce(
+    (filteredState, filter) => filter(filteredState),
+    state,
+  );
+}
+
+// Filters the selected Sample if it is large
+function filterLargeSample(state) {
+  if (!state || !state.selectedSample) {
+    return state;
+  }
+
+  const estimatedTotalSize = estimateSize(state.selectedSample.messages);
+  if (estimatedTotalSize > 400000) {
+    const { selectedSample, ...filteredState } = state; // eslint-disable-line
+    return filteredState;
+  } else {
+    return state;
+  }
+}
+
+// Filters the selectedlog if it is too large
+function filterLargeSelectedLog(state) {
+  if (!state || !state.selectedLog?.contents) {
+    return state;
+  }
+
+  const estimatedSize = estimateSize(
+    state.selectedLog.contents.sampleSummaries,
+  );
+  if (estimatedSize > 400000) {
+    const { selectedLog, ...filteredState } = state; // eslint-disable-line
+    return filteredState;
+  } else {
+    return state;
+  }
+}
+
+function estimateSize(list, frequency = 0.2) {
+  if (!list || list.len === 0) {
+    return 0;
+  }
+
+  // Total number of samples
+  const sampleSize = Math.ceil(list.length * frequency);
+
+  // Get a proper random sample without duplicates
+  const messageIndices = new Set();
+  while (
+    messageIndices.size < sampleSize &&
+    messageIndices.size < list.length
+  ) {
+    const randomIndex = Math.floor(Math.random() * list.length);
+    messageIndices.add(randomIndex);
+  }
+
+  // Calculate size from sampled messages
+  const totalSize = Array.from(messageIndices).reduce((size, index) => {
+    return size + JSON.stringify(list[index]).length;
+  }, 0);
+
+  // Estimate total size based on sample
+  const estimatedTotalSize = (totalSize / sampleSize) * list.length;
+  return estimatedTotalSize;
+}

inspect_ai/_view/www/src/log/{remoteLogFile.mjs → remoteLogFile.ts}

@@ -1,5 +1,12 @@
 //@ts-check
-import { asyncJsonParse } from "../utils/Json.mjs";
+import {
+  EvalHeader,
+  EvalSummary,
+  LogViewAPI,
+  SampleSummary,
+} from "../api/Types";
+import { EvalLog, EvalPlan, EvalSample, EvalSpec } from "../types/log";
+import { asyncJsonParse } from "../utils/json-worker";
 import { AsyncQueue } from "../utils/queue.mjs";
 import {
   FileSizeLimitError,
@@ -9,42 +16,46 @@ import {
 // don't try to load samples greater than 50mb
 const MAX_BYTES = 50 * 1024 * 1024;
 
-/**
- * @typedef {Object} SampleEntry
- * @property {string} sampleId
- * @property {number} epoch
- */
+interface SampleEntry {
+  sampleId: string;
+  epoch: number;
+}
 
-/**
- * @typedef {Object} RemoteLogFile
- * @property {() => Promise<Object>} readHeader - Reads the header of the log file.
- * @property {() => Promise<Object>} readLogSummary - Reads the log summary including header and sample summaries.
- * @property {(sampleId: string, epoch: number) => Promise<Object>} readSample - Reads a specific sample file.
- * @property {() => Promise<import("../types/log").EvalLog>} readCompleteLog - Reads the complete log file including all samples.
- */
+export interface RemoteLogFile {
+  readHeader: () => Promise<EvalHeader>;
+  readLogSummary: () => Promise<EvalSummary>;
+  readSample: (sampleId: string, epoch: number) => Promise<EvalSample>;
+  readCompleteLog: () => Promise<EvalLog>;
+}
+
+interface LogStart {
+  version: number;
+  eval: EvalSpec;
+  plan: EvalPlan;
+}
 
 /**
  * Opens a remote log file and provides methods to read its contents.
- * @param {import("../api/Types.mjs").LogViewAPI} api - The api
- * @param {string} url - The URL of the remote zip file.
- * @param {number} concurrency - The number of concurrent operations allowed.
- * @returns {Promise<RemoteLogFile>} An object with methods to read the log file.
  */
-export const openRemoteLogFile = async (api, url, concurrency) => {
+export const openRemoteLogFile = async (
+  api: LogViewAPI,
+  url: string,
+  concurrency: number,
+): Promise<RemoteLogFile> => {
   const queue = new AsyncQueue(concurrency);
   const remoteZipFile = await openRemoteZipFile(
-    `${encodeURIComponent(url)}`,
+    url,
     api.eval_log_size,
     api.eval_log_bytes,
   );
 
   /**
    * Reads and parses a JSON file from the zip.
-   * @param {string} file - The name of the file to read.
-   * @param {number} [maxBytes] - the max bytes
-   * @returns {Promise<Object>} The parsed JSON content.
    */
-  const readJSONFile = async (file, maxBytes) => {
+  const readJSONFile = async (
+    file: string,
+    maxBytes?: number,
+  ): Promise<Object> => {
     try {
       const data = await remoteZipFile.readFile(file, maxBytes);
       const textDecoder = new TextDecoder("utf-8");
@@ -53,19 +64,22 @@ export const openRemoteLogFile = async (api, url, concurrency) => {
     } catch (error) {
       if (error instanceof FileSizeLimitError) {
         throw error;
-      } else {
+      } else if (error instanceof Error) {
         throw new Error(
           `Failed to read or parse file ${file}: ${error.message}`,
         );
+      } else {
+        throw new Error(
+          `Failed to read or parse file ${file} - an unknown error occurred`,
+        );
       }
     }
   };
 
   /**
    * Lists all samples in the zip file.
-   * @returns {Promise<SampleEntry[]>} An array of sample objects.
    */
-  const listSamples = async () => {
+  const listSamples = async (): Promise<SampleEntry[]> => {
     return Array.from(remoteZipFile.centralDirectory.keys())
       .filter(
         (filename) =>
@@ -82,14 +96,14 @@ export const openRemoteLogFile = async (api, url, concurrency) => {
 
   /**
    * Reads a specific sample file.
-   * @param {string} sampleId - The ID of the sample.
-   * @param {number} epoch - The epoch of the sample.
-   * @returns {Promise<Object>} The content of the sample file.
    */
-  const readSample = async (sampleId, epoch) => {
+  const readSample = async (
+    sampleId: string,
+    epoch: number,
+  ): Promise<EvalSample> => {
     const sampleFile = `samples/${sampleId}_epoch_${epoch}.json`;
     if (remoteZipFile.centralDirectory.has(sampleFile)) {
-      return readJSONFile(sampleFile, MAX_BYTES);
+      return (await readJSONFile(sampleFile, MAX_BYTES)) as EvalSample;
     } else {
       console.log({ dir: remoteZipFile.centralDirectory });
       throw new Error(
@@ -100,13 +114,12 @@ export const openRemoteLogFile = async (api, url, concurrency) => {
 
   /**
    * Reads the results.json file.
-   * @returns {Promise<Object>} The content of results.json.
    */
-  const readHeader = async () => {
+  const readHeader = async (): Promise<EvalHeader> => {
     if (remoteZipFile.centralDirectory.has("header.json")) {
-      return readJSONFile("header.json");
+      return (await readJSONFile("header.json")) as EvalHeader;
     } else {
-      const evalSpec = await readJSONFile("_journal/start.json");
+      const evalSpec = (await readJSONFile("_journal/start.json")) as LogStart;
       return {
         status: "started",
         eval: evalSpec.eval,
@@ -117,9 +130,8 @@ export const openRemoteLogFile = async (api, url, concurrency) => {
 
   /**
    * Reads individual summary files when summaries.json is not available.
-   * @returns {Promise<Object>} Combined summaries from individual files.
    */
-  const readFallbackSummaries = async () => {
+  const readFallbackSummaries = async (): Promise<SampleSummary[]> => {
     const summaryFiles = Array.from(
       remoteZipFile.centralDirectory.keys(),
     ).filter(
@@ -128,14 +140,16 @@ export const openRemoteLogFile = async (api, url, concurrency) => {
         filename.endsWith(".json"),
     );
 
-    const summaries = [];
-    const errors = [];
+    const summaries: SampleSummary[] = [];
+    const errors: unknown[] = [];
 
     await Promise.all(
       summaryFiles.map((filename) =>
         queue.enqueue(async () => {
           try {
-            const partialSummary = await readJSONFile(filename);
+            const partialSummary = (await readJSONFile(
+              filename,
+            )) as SampleSummary[];
             summaries.push(...partialSummary);
           } catch (error) {
             errors.push(error);
@@ -156,11 +170,10 @@ export const openRemoteLogFile = async (api, url, concurrency) => {
 
   /**
    * Reads all summaries, falling back to individual files if necessary.
-   * @returns {Promise<Object>} All summaries.
    */
-  const readSampleSummaries = async () => {
+  const readSampleSummaries = async (): Promise<SampleSummary[]> => {
     if (remoteZipFile.centralDirectory.has("summaries.json")) {
-      return await readJSONFile("summaries.json");
+      return (await readJSONFile("summaries.json")) as SampleSummary[];
     } else {
       return readFallbackSummaries();
     }
@@ -187,14 +200,17 @@ export const openRemoteLogFile = async (api, url, concurrency) => {
     readSample,
     /**
      * Reads the complete log file.
-     * @returns {Promise<import("../types/log").EvalLog>} The complete log data.
      */
-    readCompleteLog: async () => {
+    readCompleteLog: async (): Promise<EvalLog> => {
       const [evalLog, samples] = await Promise.all([
         readHeader(),
         listSamples().then((sampleIds) =>
           Promise.all(
-            sampleIds.map(({ sampleId, epoch }) => readSample(sampleId, epoch)),
+            sampleIds.map(({ sampleId, epoch }) =>
+              readSample(sampleId, epoch).then(
+                (sample) => sample as EvalSample,
+              ),
+            ),
           ),
         ),
       ]);

inspect_ai/_view/www/src/navbar/Navbar.mjs

@@ -18,7 +18,8 @@ import { SecondaryBar } from "./SecondaryBar.mjs";
  * @param {import("../types/log").EvalResults} [props.evalResults] - The EvalResults
  * @param {import("../types/log").EvalPlan} [props.evalPlan] - The EvalSpec
  * @param {import("../types/log").EvalStats} [props.evalStats] - The EvalStats
- * @param {import("../api/Types.mjs").SampleSummary[]} [props.samples] - the samples
+ * @param {import("../samples/SamplesDescriptor.mjs").EvalDescriptor} [props.evalDescriptor] - The EvalDescriptor
+ * @param {import("../api/Types.ts").SampleSummary[]} [props.samples] - the samples
  * @param {string} [props.status] - the status
  * @param {boolean} props.offcanvas - Are we in offcanvas mode?
  * @param {boolean} props.showToggle - Should we show the toggle?
@@ -32,6 +33,7 @@ export const Navbar = ({
   evalResults,
   evalStats,
   samples,
+  evalDescriptor,
   showToggle,
   offcanvas,
   status,
@@ -182,6 +184,7 @@ export const Navbar = ({
           evalResults=${evalResults}
           evalStats=${evalStats}
           samples=${samples}
+          evalDescriptor=${evalDescriptor}
           status=${status}
           style=${{ gridColumn: "1/-1" }}
         />

inspect_ai/_view/www/src/navbar/SecondaryBar.mjs

@@ -3,6 +3,7 @@ import { html } from "htm/preact";
 import { LabeledValue } from "../components/LabeledValue.mjs";
 import { formatDataset, formatDuration } from "../utils/Format.mjs";
 import { ExpandablePanel } from "../components/ExpandablePanel.mjs";
+import { scoreFilterItems } from "../samples/tools/filters.mjs";
 
 /**
  * Renders the Navbar
@@ -12,7 +13,8 @@ import { ExpandablePanel } from "../components/ExpandablePanel.mjs";
  * @param {import("../types/log").EvalPlan} [props.evalPlan] - The EvalSpec
  * @param {import("../types/log").EvalResults} [props.evalResults] - The EvalResults
  * @param {import("../types/log").EvalStats} [props.evalStats] - The EvalStats
- * @param {import("../api/Types.mjs").SampleSummary[]} [props.samples] - the samples
+ * @param {import("../samples/SamplesDescriptor.mjs").EvalDescriptor} [props.evalDescriptor] - The EvalDescriptor
+ * @param {import("../api/Types.ts").SampleSummary[]} [props.samples] - the samples
  * @param {string} [props.status] - the status
  * @param {Map<string, string>} [props.style] - is this off canvas
  *
@@ -24,6 +26,7 @@ export const SecondaryBar = ({
   evalResults,
   evalStats,
   samples,
+  evalDescriptor,
   status,
   style,
 }) => {
@@ -60,8 +63,8 @@ export const SecondaryBar = ({
   values.push({
     size: "minmax(12%, auto)",
     value: html`<${LabeledValue} label="${label}" style=${staticColStyle} style=${{ justifySelf: hasConfig ? "left" : "center" }}>
-    <${ScorerSummary} 
-      scorers=${evalResults?.scores} />
+    <${ScorerSummary}
+      evalDescriptor=${evalDescriptor} />
   </${LabeledValue}>`,
   });
 
@@ -124,17 +127,23 @@ const DatasetSummary = ({ dataset, samples, epochs, style }) => {
   `;
 };
 
-const ScorerSummary = ({ scorers }) => {
-  if (!scorers) {
+const ScorerSummary = ({ evalDescriptor }) => {
+  if (!evalDescriptor) {
     return "";
   }
 
-  const uniqScorers = new Set();
-  scorers.forEach((scorer) => {
-    uniqScorers.add(scorer.name);
-  });
+  const items = scoreFilterItems(evalDescriptor);
 
-  return Array.from(uniqScorers).join(", ");
+  return html`
+    <span style=${{ position: "relative" }}>
+      ${Array.from(items).map(
+        (item, index) => html`
+          ${index > 0 ? ", " : ""}
+          <span title=${item.tooltip}>${item.canonicalName}</span>
+        `,
+      )}
+    </span>
+  `;
 };
 
 /**

inspect_ai/_view/www/src/samples/SampleDialog.mjs

@@ -1,5 +1,5 @@
 import { html } from "htm/preact";
-import { useCallback, useMemo } from "preact/hooks";
+import { useCallback, useMemo, useRef } from "preact/hooks";
 
 import { ApplicationIcons } from "../appearance/Icons.mjs";
 import { LargeModal } from "../components/LargeModal.mjs";
@@ -43,6 +43,8 @@ export const SampleDialog = ({
   sampleScrollPositionRef,
   setSampleScrollPosition,
 }) => {
+  const scrollRef = useRef(/** @type {HTMLElement|null} */ (null));
+
   const tools = useMemo(() => {
     const nextTool = {
       label: "Next Sample",
@@ -94,6 +96,7 @@ export const SampleDialog = ({
           sampleDescriptor=${sampleDescriptor}
           selectedTab=${selectedTab}
           setSelectedTab=${setSelectedTab}
+          scrollRef=${scrollRef}
         />`;
   }, [id, sample, sampleDescriptor, selectedTab, setSelectedTab, sampleError]);
 
@@ -113,6 +116,7 @@ export const SampleDialog = ({
       showProgress=${sampleStatus === "loading"}
       initialScrollPositionRef=${sampleScrollPositionRef}
       setInitialScrollPosition=${setSampleScrollPosition}
+      scrollRef=${scrollRef}
     >
         ${children}
     </${LargeModal}>`;

inspect_ai/_view/www/src/samples/SampleDisplay.mjs

@@ -1,6 +1,6 @@
 import { html } from "htm/preact";
 
-import { ChatView } from "../components/ChatView.mjs";
+import { ChatViewVirtualList } from "../components/ChatView.mjs";
 import { MetaDataView } from "../components/MetaDataView.mjs";
 import { TabSet, TabPanel } from "../components/TabSet.mjs";
 
@@ -47,6 +47,7 @@ import {
  * @param {import("../samples/SamplesDescriptor.mjs").SamplesDescriptor} props.sampleDescriptor - the sample descriptor
  * @param {string} props.selectedTab - The selected tab
  * @param {(tab: string) => void} props.setSelectedTab - function to set the selected tab
+ * @param {import("htm/preact").MutableRef<HTMLElement>} props.scrollRef - The scrollable element whic contains this display
  * @returns {import("preact").JSX.Element} The TranscriptView component.
  */
 export const InlineSampleDisplay = ({
@@ -57,6 +58,7 @@ export const InlineSampleDisplay = ({
   sampleDescriptor,
   selectedTab,
   setSelectedTab,
+  scrollRef,
 }) => {
   return html`<div style=${{ flexDirection: "row", width: "100%" }}>
     <${ProgressBar}
@@ -77,6 +79,7 @@ export const InlineSampleDisplay = ({
             sampleDescriptor=${sampleDescriptor}
             selectedTab=${selectedTab}
             setSelectedTab=${setSelectedTab}
+            scrollRef=${scrollRef}
           />`}
     </div>
   </div>`;
@@ -91,6 +94,7 @@ export const InlineSampleDisplay = ({
  * @param {import("../samples/SamplesDescriptor.mjs").SamplesDescriptor} props.sampleDescriptor - the sample descriptor
  * @param {string} props.selectedTab - The selected tab
  * @param {(tab: string) => void} props.setSelectedTab - function to set the selected tab
+ * @param {import("htm/preact").MutableRef<HTMLElement>} props.scrollRef - The scrollable parent element
  * @returns {import("preact").JSX.Element} The TranscriptView component.
  */
 export const SampleDisplay = ({
@@ -99,6 +103,7 @@ export const SampleDisplay = ({
   sampleDescriptor,
   selectedTab,
   setSelectedTab,
+  scrollRef,
 }) => {
   // Tab ids
   const baseId = `sample-dialog`;
@@ -120,13 +125,14 @@ export const SampleDisplay = ({
     html`
     <${TabPanel} id=${kSampleMessagesTabId} classes="sample-tab" title="Messages" onSelected=${onSelectedTab} selected=${
       selectedTab === kSampleMessagesTabId
-    }>
-      <${ChatView} 
+    } scrollable=${false} style=${{ width: "100%" }}>
+      <${ChatViewVirtualList} 
         key=${`${baseId}-chat-${id}`} 
         id=${`${baseId}-chat-${id}`} 
         messages=${sample.messages} 
-        style=${{ paddingLeft: ".8em", paddingTop: "1em" }}
+        style=${{ marginLeft: ".8em", marginTop: "1em" }}
         indented=${true}
+        scrollRef=${scrollRef}
       />
     </${TabPanel}>`,
   ];
@@ -136,7 +142,7 @@ export const SampleDisplay = ({
       <${TabPanel} id=${kSampleTranscriptTabId} classes="sample-tab" title="Transcript" onSelected=${onSelectedTab} selected=${
         selectedTab === kSampleTranscriptTabId || selectedTab === undefined
       } scrollable=${false}>
-        <${SampleTranscript} key=${`${baseId}-transcript-display-${id}`} id=${`${baseId}-transcript-display-${id}`} evalEvents=${sample.events}/>
+        <${SampleTranscript} key=${`${baseId}-transcript-display-${id}`} id=${`${baseId}-transcript-display-${id}`} evalEvents=${sample.events} scrollRef=${scrollRef}/>
       </${TabPanel}>`);
   }
 
@@ -201,16 +207,18 @@ export const SampleDisplay = ({
     );
   }
 
-  tabs.push(html`<${TabPanel} 
-          id=${kSampleJsonTabId} 
-          classes="sample-tab"
-          title="JSON" 
-          onSelected=${onSelectedTab} 
-          selected=${selectedTab === kSampleJsonTabId}>
-         <div style=${{ paddingLeft: "0.8em", marginTop: "0.4em" }}> 
-          <${JSONPanel} data=${sample} simple=${true}/>
-        </div>
-      </${TabPanel}>`);
+  if (sample.messages.length < 100) {
+    tabs.push(html`<${TabPanel} 
+        id=${kSampleJsonTabId} 
+        classes="sample-tab"
+        title="JSON" 
+        onSelected=${onSelectedTab} 
+        selected=${selectedTab === kSampleJsonTabId}>
+      <div style=${{ paddingLeft: "0.8em", marginTop: "0.4em" }}> 
+        <${JSONPanel} data=${sample} simple=${true}/>
+      </div>
+    </${TabPanel}>`);
+  }
 
   const tabsetId = `task-sample-details-tab-${id}`;
   const targetId = `${tabsetId}-content`;

inspect_ai/_view/www/src/samples/SampleList.mjs

@@ -1,6 +1,6 @@
 import { html } from "htm/preact";
-import { useCallback, useState } from "preact/hooks";
-import { useEffect, useMemo } from "preact/hooks";
+import { useCallback, useMemo, useState } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 
 import { ApplicationStyles } from "../appearance/Styles.mjs";
 import { FontSize } from "../appearance/Fonts.mjs";
@@ -56,57 +56,28 @@ export const SampleList = (props) => {
     setHidden(false);
   }, [items]);
 
-  const heightForType = (type) => {
-    return type === "sample" ? kSampleHeight : kSeparatorHeight;
-  };
-
-  // Compute the row arrangement
-  const rowMap = useMemo(() => {
-    return items.reduce((values, current, index) => {
-      const height = heightForType(current.type);
-      const previous =
-        values.length > 0 ? values[values.length - 1] : undefined;
-      const start =
-        previous === undefined ? 0 : previous.start + previous.height;
-      values.push({
-        index,
-        height,
-        start,
-      });
-      return values;
-    }, []);
+  // Keep a mapping of the indexes to items (skipping separators)
+  const itemRowMapping = useMemo(() => {
+    const rowIndexes = [];
+    items.forEach((item, index) => {
+      if (item.type === "sample") {
+        rowIndexes.push(index);
+      }
+    });
+    return rowIndexes;
   }, [items]);
 
+  const prevSelectedIndexRef = useRef(null);
   useEffect(() => {
     const listEl = listRef.current;
     if (listEl) {
-      // Decide if we need to scroll the element into position
-      const selected = rowMap[selectedIndex];
-      if (selected) {
-        const itemTop = selected.start;
-        const itemBottom = selected.start + selected.height;
-
-        const scrollTop = listEl.base.scrollTop;
-        const scrollBottom = scrollTop + listEl.base.offsetHeight;
-
-        // It is visible
-        if (itemTop >= scrollTop && itemBottom <= scrollBottom) {
-          return;
-        }
-
-        if (itemTop < scrollTop) {
-          // Top is scrolled off
-          listEl.base.scrollTo({ top: itemTop });
-          return;
-        }
-
-        if (itemBottom > scrollBottom) {
-          listEl.base.scrollTo({ top: itemBottom - listEl.base.offsetHeight });
-          return;
-        }
-      }
+      const actualRowIndex = itemRowMapping[selectedIndex];
+      const direction =
+        actualRowIndex > prevSelectedIndexRef.current ? "down" : "up";
+      listRef.current?.scrollToIndex(actualRowIndex, direction);
+      prevSelectedIndexRef.current = actualRowIndex;
     }
-  }, [selectedIndex, rowMap, listRef]);
+  }, [selectedIndex, listRef, itemRowMapping]);
 
   /** @param {import("./SamplesTab.mjs").ListItem} item */
   const renderRow = (item) => {
@@ -254,7 +225,6 @@ export const SampleList = (props) => {
       tabIndex="0"
       renderRow=${renderRow}
       onkeydown=${onkeydown}
-      rowMap=${rowMap}
       style=${listStyle}
     />
     ${footerRow}
@@ -282,7 +252,7 @@ const SeparatorRow = ({ id, title, height }) => {
  * @param {Object} props - The parameters for the component.
  * @param {string} props.id - The unique identifier for the sample.
  * @param {number} props.index - The index of the sample.
- * @param {import("../api/Types.mjs").SampleSummary} props.sample - The sample.
+ * @param {import("../api/Types.ts").SampleSummary} props.sample - The sample.
  * @param {import("../samples/SamplesDescriptor.mjs").SamplesDescriptor} props.sampleDescriptor - The sample descriptor.
  * @param {number} props.height - The height of the sample row.
  * @param {boolean} props.selected - Whether the sample is selected.

inspect_ai/_view/www/src/samples/SampleScores.mjs

@@ -2,7 +2,7 @@ import { html } from "htm/preact";
 
 /**
  * @param {Object} props
- * @param {import("../api/Types.mjs").SampleSummary} props.sample
+ * @param {import("../api/Types.ts").SampleSummary} props.sample
  * @param {import("../samples/SamplesDescriptor.mjs").SamplesDescriptor} props.sampleDescriptor
  * @param {string} props.scorer
  * @returns {import("preact").JSX.Element}

inspect_ai/_view/www/src/samples/SampleTranscript.mjs

@@ -1,6 +1,6 @@
 // @ts-check
 import { html } from "htm/preact";
-import { TranscriptView } from "./transcript/TranscriptView.mjs";
+import { TranscriptVirtualList } from "./transcript/TranscriptView.mjs";
 
 /**
  * Renders the SampleTranscript component.
@@ -8,8 +8,13 @@ import { TranscriptView } from "./transcript/TranscriptView.mjs";
  * @param {Object} props - The parameters for the component.
  * @param {string} props.id - The id of this component
  * @param {import("../types/log").Events} props.evalEvents - The transcript to display.
+ * @param {import("htm/preact").MutableRef<HTMLElement>} props.scrollRef - The scrollable parent element
  * @returns {import("preact").JSX.Element} The SampleTranscript component.
  */
-export const SampleTranscript = ({ id, evalEvents }) => {
-  return html`<${TranscriptView} id=${id} events=${evalEvents} />`;
+export const SampleTranscript = ({ id, evalEvents, scrollRef }) => {
+  return html`<${TranscriptVirtualList}
+    id=${id}
+    events=${evalEvents}
+    scrollRef=${scrollRef}
+  />`;
 };