inspect-ai 0.3.96__py3-none-any.whl → 0.3.97__py3-none-any.whl

inspect_ai/_view/www/src/app/content/record_processors/store.ts

@@ -0,0 +1,101 @@
+import { RecordProcessor } from "./types";
+
+const kStoreInstanceKey = /^(.+)?:([a-zA-Z0-9]{22}):instance$/;
+const kStoreKey = /^(.+)?:([a-zA-Z0-9]{22}):(.+)$/;
+
+// Expands store keys in the record. When an instance key is found, this will create a new node, and subsequent store
+// keys will be added as children to that node. Since instance keys always appear first, we can do this in a single pass.
+export const resolveStoreKeys: RecordProcessor = (
+  record: Record<string, unknown>,
+): Record<string, unknown> => {
+  const result: Record<string, unknown> = {};
+  const storeInstances: Record<string, Record<string, unknown>> = {};
+  const instanceKeys: Set<string> = new Set();
+
+  const entries = Object.entries(record);
+  for (let i = 0; i < entries.length; i++) {
+    const [key, value] = entries[i];
+
+    // First check if it's an instance key
+    const instanceInfo = parseStoreInstanceKey(key, value);
+    if (instanceInfo) {
+      const { storeName, instanceId } = instanceInfo;
+      const instanceKey = storeKey(storeName, instanceId);
+
+      // Create a container for this instance if it doesn't exist
+      if (!storeInstances[instanceKey]) {
+        storeInstances[instanceKey] = {};
+      }
+
+      instanceKeys.add(key);
+      continue;
+    } else {
+      // Then check if it's a store key that belongs to an instance
+      const storeKeyInfo = parseStoreKey(key);
+      if (storeKeyInfo) {
+        const { storeName, instanceId, keyName } = storeKeyInfo;
+        const instanceKey = storeKey(storeName, instanceId);
+
+        // If we have a container for this instance, add this key as a child
+        if (storeInstances[instanceKey]) {
+          storeInstances[instanceKey][keyName] = value;
+          continue;
+        }
+      } else {
+        // If it's not a store key or instance key, add it directly to the result
+        result[key] = value;
+      }
+    }
+  }
+
+  // Add all store instances to the result
+  for (const [instanceKey, children] of Object.entries(storeInstances)) {
+    // Recursively process the children to handle nested store keys
+    result[instanceKey] = resolveStoreKeys(children);
+  }
+
+  // Process any nested objects recursively
+  for (const [key, value] of Object.entries(result)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      result[key] = resolveStoreKeys(value as Record<string, unknown>);
+    }
+  }
+
+  return result;
+};
+
+// Parses the store instance key
+const parseStoreInstanceKey = (key: string, value: unknown) => {
+  const match = key.match(kStoreInstanceKey);
+  if (match) {
+    const [, storeName, instanceId] = match;
+    if (typeof value === "string" && instanceId === value) {
+      return {
+        storeName,
+        instanceId,
+      };
+    }
+  }
+  return null;
+};
+
+// Parses a store key
+const parseStoreKey = (key: string) => {
+  const match = key.match(kStoreKey);
+  if (match) {
+    const [, storeName, instanceId, keyName] = match;
+    if (keyName !== "instance") {
+      return {
+        storeName,
+        instanceId,
+        keyName,
+      };
+    }
+  }
+  return null;
+};
+
+// Create a unique key for the store instance
+const storeKey = (storeName: string, instanceId: string) => {
+  return `${storeName || ""} (${instanceId})`;
+};

inspect_ai/_view/www/src/app/content/record_processors/types.ts

@@ -0,0 +1,3 @@
+export type RecordProcessor = (
+  record: Record<string, unknown>,
+) => Record<string, unknown>;

inspect_ai/_view/www/src/app/content/types.ts

@@ -6,12 +6,17 @@ export const Buckets = {
   final: 1000,
 };
 
+export interface RenderOptions {
+  renderString: "pre" | "markdown";
+}
+
 export interface ContentRenderer {
   bucket: number;
   canRender: (content: any) => boolean;
   render: (
     id: string,
     content: any,
+    options: RenderOptions,
   ) => {
     rendered: string | number | bigint | boolean | object | ReactNode | null;
   };

inspect_ai/_view/www/src/app/log-view/LogView.tsx

@@ -141,6 +141,7 @@ export const LogView: FC = () => {
                     selected={selectedTab === tab.id}
                     scrollable={!!tab.scrollable}
                     scrollRef={tab.scrollRef}
+                    className={clsx(tab.className)}
                     style={{ height: tab.scrollable ? "100%" : undefined }}
                   >
                     {createElement(tab.component, tab.componentProps)}

inspect_ai/_view/www/src/app/log-view/LogViewContainer.tsx

@@ -1,7 +1,11 @@
 import { FC, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { kLogViewSamplesTabId } from "../../constants";
-import { useFilteredSamples, useTotalSampleCount } from "../../state/hooks";
+import {
+  useFilteredSamples,
+  usePrevious,
+  useTotalSampleCount,
+} from "../../state/hooks";
 import { useStore } from "../../state/store";
 import { baseUrl } from "../routing/url";
 import { LogViewLayout } from "./LogViewLayout";
@@ -17,26 +21,34 @@ export const LogViewContainer: FC = () => {
     epoch?: string;
     sampleTabId?: string;
   }>();
-  const selectLogFile = useStore((state) => state.logsActions.selectLogFile);
-  const refreshLogs = useStore((state) => state.logsActions.refreshLogs);
-  const setWorkspaceTab = useStore((state) => state.appActions.setWorkspaceTab);
+  const initialState = useStore((state) => state.app.initialState);
+  const clearInitialState = useStore(
+    (state) => state.appActions.clearInitialState,
+  );
+  const setSampleTab = useStore((state) => state.appActions.setSampleTab);
   const setShowingSampleDialog = useStore(
     (state) => state.appActions.setShowingSampleDialog,
   );
-  const selectSample = useStore((state) => state.logActions.selectSample);
-  const setSampleTab = useStore((state) => state.appActions.setSampleTab);
-  const filteredSamples = useFilteredSamples();
-  const totalSampleCount = useTotalSampleCount();
   const setStatus = useStore((state) => state.appActions.setStatus);
+  const setWorkspaceTab = useStore((state) => state.appActions.setWorkspaceTab);
+
+  const refreshLogs = useStore((state) => state.logsActions.refreshLogs);
+  const selectLogFile = useStore((state) => state.logsActions.selectLogFile);
+  const selectSample = useStore((state) => state.logActions.selectSample);
   const setSelectedLogIndex = useStore(
     (state) => state.logsActions.setSelectedLogIndex,
   );
 
-  const selectedLogIndex = useStore((state) => state.logs.selectedLogIndex);
-  const initialState = useStore((state) => state.app.initialState);
-  const clearInitialState = useStore(
-    (state) => state.appActions.clearInitialState,
+  const clearSelectedLogSummary = useStore(
+    (state) => state.logActions.clearSelectedLogSummary,
   );
+
+  const clearSelectedSample = useStore(
+    (state) => state.sampleActions.clearSelectedSample,
+  );
+
+  const filteredSamples = useFilteredSamples();
+  const totalSampleCount = useTotalSampleCount();
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -51,6 +63,8 @@ export const LogViewContainer: FC = () => {
     }
   }, [initialState]);
 
+  const prevLogPath = usePrevious<string | undefined>(logPath);
+
   useEffect(() => {
     const loadLogFromPath = async () => {
       if (logPath) {
@@ -64,6 +78,13 @@ export const LogViewContainer: FC = () => {
         } else {
           setWorkspaceTab(kLogViewSamplesTabId);
         }
+
+        // Reset the sample
+        if (logPath !== prevLogPath) {
+          clearSelectedSample();
+
+          clearSelectedLogSummary();
+        }
       } else {
         setStatus({
           loading: true,
@@ -80,10 +101,6 @@ export const LogViewContainer: FC = () => {
         // Select the first log in the list
         setSelectedLogIndex(0);
 
-        if (!sampleId) {
-          selectSample(0);
-        }
-
         setStatus({
           loading: false,
           error: undefined,
@@ -102,16 +119,6 @@ export const LogViewContainer: FC = () => {
     setStatus,
   ]);
 
-  const clearSample = useStore(
-    (state) => state.sampleActions.clearSelectedSample,
-  );
-
-  useEffect(() => {
-    if (selectedLogIndex > -1) {
-      selectSample(0);
-    }
-  }, [selectedLogIndex]);
-
   // Handle sample selection from URL params
   useEffect(() => {
     if (sampleId && filteredSamples) {
@@ -140,7 +147,7 @@ export const LogViewContainer: FC = () => {
       // This handles the case when user navigates back from a sample
       setShowingSampleDialog(false);
       if (totalSampleCount > 1) {
-        clearSample();
+        clearSelectedSample();
       }
     }
   }, [
@@ -152,7 +159,7 @@ export const LogViewContainer: FC = () => {
     selectSample,
     setSampleTab,
     setShowingSampleDialog,
-    clearSample,
+    clearSelectedSample,
   ]);
 
   return <LogViewLayout />;

inspect_ai/_view/www/src/app/log-view/LogViewLayout.tsx

@@ -35,7 +35,6 @@ export const LogViewLayout: FC = () => {
   // Log Data
   const selectedLogSummary = useStore((state) => state.log.selectedLogSummary);
   const resetFiltering = useStore((state) => state.logActions.resetFiltering);
-  const selectSample = useStore((state) => state.logActions.selectSample);
 
   // The main application reference
   const mainAppRef = useRef<HTMLDivElement>(null);
@@ -49,13 +48,7 @@ export const LogViewLayout: FC = () => {
     resetFiltering();
     clearSampleTab();
     clearWorkspaceTab();
-  }, [
-    setOffCanvas,
-    resetFiltering,
-    clearSampleTab,
-    clearWorkspaceTab,
-    selectSample,
-  ]);
+  }, [setOffCanvas, resetFiltering, clearSampleTab, clearWorkspaceTab]);
 
   const handleKeyboard = useCallback(
     (e: KeyboardEvent) => {

inspect_ai/_view/www/src/app/log-view/navbar/PrimaryBar.tsx

@@ -7,6 +7,7 @@ import { kModelNone } from "../../../constants";
 import { useStore } from "../../../state/store";
 import { filename } from "../../../utils/path";
 import { ApplicationIcons } from "../../appearance/icons";
+import { ModelRolesView } from "./ModelRolesView";
 import styles from "./PrimaryBar.module.css";
 import {
   displayScorersFromRunningMetrics,
@@ -15,7 +16,6 @@ import {
 } from "./ResultsPanel";
 import { RunningStatusPanel } from "./RunningStatusPanel";
 import { CancelledPanel, ErroredPanel } from "./StatusPanel";
-import { ModelRolesView } from "./ModelRolesView";
 
 interface PrimaryBarProps {
   showToggle: boolean;
@@ -37,9 +37,7 @@ export const PrimaryBar: FC<PrimaryBarProps> = ({
   const offCanvas = useStore((state) => state.app.offcanvas);
   const setOffCanvas = useStore((state) => state.appActions.setOffcanvas);
   const streamSamples = useStore((state) => state.capabilities.streamSamples);
-  const selectedLogFile = useStore((state) =>
-    state.logsActions.getSelectedLogFile(),
-  );
+  const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
 
   const logFileName = selectedLogFile ? filename(selectedLogFile) : "";
 

inspect_ai/_view/www/src/app/log-view/navbar/ResultsPanel.tsx

@@ -22,6 +22,8 @@ export interface ResultsScorer {
   metrics: ResultsMetric[];
 }
 
+const kMaxPrimaryScoreRows = 4;
+
 export const displayScorersFromRunningMetrics = (metrics?: RunningMetric[]) => {
   if (!metrics) {
     return [];
@@ -123,19 +125,27 @@ export const ResultsPanel: FC<ResultsPanelProps> = ({ scorers }) => {
 
     // Try to select metrics with a group size 5 or less, if possible
     let primaryResults = grouped[0];
-    if (primaryResults.length > 5) {
+    let showMore = grouped.length > 1;
+    if (primaryResults.length > kMaxPrimaryScoreRows) {
       const shorterResults = grouped.find((g) => {
-        return g.length <= 5;
+        return g.length <= kMaxPrimaryScoreRows;
       });
       if (shorterResults) {
         primaryResults = shorterResults;
       }
+
+      // If the primary metrics are still too long, truncate them and
+      // show the rest in the modal
+      if (primaryResults.length > kMaxPrimaryScoreRows) {
+        primaryResults = primaryResults.slice(0, kMaxPrimaryScoreRows);
+        showMore = true;
+      }
     }
 
     return (
       <div className={clsx(styles.metricsSummary)}>
         <ScoreGrid scoreGroups={[primaryResults]} showReducer={showReducer} />
-        {grouped.length > 1 ? (
+        {showMore ? (
           <>
             <Modal
               id="results-metrics"

inspect_ai/_view/www/src/app/log-view/navbar/ScoreGrid.module.css

@@ -33,3 +33,18 @@
 .tableBody {
   border-top-color: var(--bs-light-border-subtle);
 }
+
+thead,
+thead tr,
+thead td,
+thead th {
+  border: none !important;
+  padding: 0 !important;
+}
+
+.tableSeparator,
+.tableSeparator tr,
+.tableSeparator td,
+.tableSeparator th {
+  border: none !important;
+}

inspect_ai/_view/www/src/app/log-view/navbar/ScoreGrid.tsx

@@ -51,10 +51,12 @@ export const ScoreGrid: FC<ScoreGridProps> = ({
     }
 
     const headerRow = (
-      <tr className={clsx(styles.headerRow)}>
-        <td></td>
-        {cells}
-      </tr>
+      <thead>
+        <tr className={clsx(styles.headerRow)}>
+          <td></td>
+          {cells}
+        </tr>
+      </thead>
     );
     const rows: ReactNode[] = [];
     scoreGroup.forEach((g) => {
@@ -84,12 +86,14 @@ export const ScoreGrid: FC<ScoreGridProps> = ({
     subTables.push(
       <>
         {index > 0 ? (
-          <tr>
-            <td
-              colSpan={columnCount + 1}
-              className={clsx(styles.groupSeparator)}
-            ></td>
-          </tr>
+          <tbody className={clsx(styles.tableSeparator)}>
+            <tr>
+              <td
+                colSpan={columnCount + 1}
+                className={clsx(styles.groupSeparator)}
+              ></td>
+            </tr>
+          </tbody>
         ) : undefined}
         {headerRow}
         <tbody className={clsx("table-group-divider", styles.tableBody)}>

inspect_ai/_view/www/src/app/log-view/tabs/InfoTab.tsx

@@ -1,4 +1,4 @@
-import { FC, useMemo } from "react";
+import { FC, RefObject, useMemo, useRef } from "react";
 import {
   EvalError,
   EvalPlan,
@@ -20,6 +20,7 @@ export const useInfoTabConfig = (
   evalError: EvalError | undefined | null,
   evalResults: EvalResults | undefined | null,
 ) => {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
   const totalSampleCount = useTotalSampleCount();
   return useMemo(() => {
     return {
@@ -33,12 +34,14 @@ export const useInfoTabConfig = (
         evalError,
         evalResults,
         sampleCount: totalSampleCount,
+        scrollRef,
       },
+      scrollRef,
     };
   }, [evalSpec, evalPlan, evalError, evalResults, totalSampleCount]);
 };
 
-interface PlanTabProps {
+interface InfoTabProps {
   evalSpec?: EvalSpec;
   evalPlan?: EvalPlan;
   evalStats?: EvalStats;
@@ -47,15 +50,17 @@ interface PlanTabProps {
   evalStatus?: "started" | "error" | "cancelled" | "success";
   evalError?: EvalError;
   sampleCount?: number;
+  scrollRef: RefObject<HTMLDivElement | null>;
 }
 
-export const InfoTab: FC<PlanTabProps> = ({
+export const InfoTab: FC<InfoTabProps> = ({
   evalSpec,
   evalPlan,
   evalResults,
   evalStatus,
   evalError,
   sampleCount,
+  scrollRef,
 }) => {
   const showWarning =
     sampleCount === 0 &&
@@ -79,6 +84,7 @@ export const InfoTab: FC<PlanTabProps> = ({
           evalSpec={evalSpec}
           evalPlan={evalPlan}
           scores={evalResults?.scores}
+          scrollRef={scrollRef}
         />
         {evalStatus === "error" && evalError ? (
           <TaskErrorCard error={evalError} />

inspect_ai/_view/www/src/app/log-view/tabs/JsonTab.tsx

@@ -30,9 +30,7 @@ export const useJsonTabConfig = (
   evalResults: EvalResults | undefined | null,
   evalStats: EvalStats | undefined,
 ) => {
-  const selectedLogFile = useStore((state) =>
-    state.logsActions.getSelectedLogFile(),
-  );
+  const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
   const selectedTab = useStore((state) => state.app.tabs.workspace);
 
   return useMemo(() => {

inspect_ai/_view/www/src/app/log-view/tabs/SamplesTab.tsx

@@ -106,7 +106,9 @@ export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
   const groupByOrder = useGroupByOrder();
   const currentScore = useScore();
 
-  const selectedSample = useStore((state) => state.sample.selectedSample);
+  const selectedSampleIdentifier = useStore(
+    (state) => state.sample.sample_identifier,
+  );
 
   const [items, setItems] = useState<ListItem[]>([]);
   const [sampleItems, setSampleItems] = useState<ListItem[]>([]);
@@ -213,7 +215,11 @@ export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
         ) : undefined}
         {showingSampleDialog && (
           <SampleDialog
-            id={String(selectedSample?.id || "")}
+            id={
+              selectedSampleIdentifier
+                ? `${selectedSampleIdentifier.id}_${selectedSampleIdentifier.epoch}`
+                : ""
+            }
             title={title}
             showingSampleDialog={showingSampleDialog}
           />

inspect_ai/_view/www/src/app/log-view/types.ts

@@ -7,5 +7,6 @@ export interface TabDescriptor<P> {
   label: string;
   component: ComponentType<P>;
   componentProps: P;
+  className?: string | string[];
   tools?: () => ReactNode[] | undefined;
 }

inspect_ai/_view/www/src/app/plan/ModelCard.module.css

@@ -9,8 +9,15 @@
   display: grid;
   grid-template-columns: max-content auto;
   column-gap: 1em;
+  row-gap: 0.1em;
 }
 
 .role {
   grid-column: -1/1;
 }
+
+.sep {
+  grid-column: -1/1;
+  height: 1px;
+  background-color: var(--bs-light-border-subtle);
+}

inspect_ai/_view/www/src/app/plan/ModelCard.tsx

@@ -51,14 +51,15 @@ export const ModelCard: FC<ModelCardProps> = ({ evalSpec }) => {
                 >
                   {modelKey}
                 </div>
-
+                <div className={clsx(styles.sep)} />
                 <div className={clsx("text-style-label")}>Model</div>
                 <div>{modelInfo.model}</div>
-
+                <div className={clsx(styles.sep)} />
                 <div className={clsx("text-style-label")}>Base Url</div>
                 <div className="text-size-small">
                   {modelInfo.base_url || noneEl}
                 </div>
+                <div className={clsx(styles.sep)} />
                 <div className={clsx("text-style-label")}>Configuration</div>
                 <div className="text-size-small">
                   {modelInfo.config &&
@@ -72,6 +73,7 @@ export const ModelCard: FC<ModelCardProps> = ({ evalSpec }) => {
                     noneEl
                   )}
                 </div>
+                <div className={clsx(styles.sep)} />
                 <div className={clsx("text-style-label")}>Args</div>
                 <div className="text-size-small">
                   {Object.keys(modelInfo.args).length > 0 ? (
@@ -82,6 +84,7 @@ export const ModelCard: FC<ModelCardProps> = ({ evalSpec }) => {
                     noneEl
                   )}
                 </div>
+                <div className={clsx(styles.sep)} />
               </div>
             );
           })}

inspect_ai/_view/www/src/app/plan/PlanCard.tsx

@@ -1,19 +1,25 @@
-import { FC } from "react";
+import { FC, RefObject } from "react";
 import { EvalPlan, EvalScore, EvalSpec } from "../../@types/log";
 import { Card, CardBody, CardHeader } from "../../components/Card";
-import { MetaDataView } from "../content/MetaDataView";
+import { RecordTree } from "../content/RecordTree";
 import { PlanDetailView } from "./PlanDetailView";
 
 interface PlanCardProps {
   evalSpec?: EvalSpec;
   evalPlan?: EvalPlan;
   scores?: EvalScore[];
+  scrollRef: RefObject<HTMLDivElement | null>;
 }
 
 /**
  * Renders the plan card
  */
-export const PlanCard: FC<PlanCardProps> = ({ evalSpec, evalPlan, scores }) => {
+export const PlanCard: FC<PlanCardProps> = ({
+  evalSpec,
+  evalPlan,
+  scores,
+  scrollRef,
+}) => {
   const metadata = evalSpec?.metadata || {};
 
   return (
@@ -33,11 +39,10 @@ export const PlanCard: FC<PlanCardProps> = ({ evalSpec, evalPlan, scores }) => {
         <Card>
           <CardHeader label="Metadata" />
           <CardBody id={"task-metadata`"}>
-            <MetaDataView
-              key={`plan-md-metadata`}
-              className={"text-size-small"}
-              entries={metadata}
-              tableOptions="sm"
+            <RecordTree
+              id={"plan-md-metadata"}
+              record={metadata}
+              scrollRef={scrollRef}
             />
           </CardBody>
         </Card>