inspect-ai 0.3.108__py3-none-any.whl → 0.3.109__py3-none-any.whl

inspect_ai/_view/www/src/app/log-list/grid/columns/FileName.tsx

@@ -0,0 +1,52 @@
+import { Link } from "react-router-dom";
+import { FileLogItem, FolderLogItem } from "../../LogItem";
+import { columnHelper } from "./columns";
+
+import { basename } from "../../../../utils/path";
+import { EmptyCell } from "./EmptyCell";
+import styles from "./FileName.module.css";
+
+export const fileNameColumn = () => {
+  return columnHelper.accessor("name", {
+    id: "file_name",
+    header: "File Name",
+    cell: (info) => {
+      const item = info.row.original as FileLogItem | FolderLogItem;
+      if (item.type === "folder") {
+        return <EmptyCell />;
+      }
+      let value = basename(item.name);
+      return (
+        <div className={styles.nameCell}>
+          {item.url ? (
+            <Link to={item.url} className={styles.fileLink}>
+              {value}
+            </Link>
+          ) : (
+            value
+          )}
+        </div>
+      );
+    },
+    enableSorting: true,
+    enableGlobalFilter: true,
+    size: 600,
+    minSize: 150,
+    enableResizing: true,
+    sortingFn: (rowA, rowB) => {
+      const itemA = rowA.original as FileLogItem | FolderLogItem;
+      const itemB = rowB.original as FileLogItem | FolderLogItem;
+
+      // Sort folders first, then files
+      if (itemA.type !== itemB.type) {
+        return itemA.type === "folder" ? -1 : 1;
+      }
+
+      // Within same type, sort by basename
+      const valueA = basename(itemA.name);
+      const valueB = basename(itemB.name);
+
+      return valueA.localeCompare(valueB);
+    },
+  });
+};

inspect_ai/_view/www/src/app/log-list/grid/columns/Icon.module.css

@@ -0,0 +1,11 @@
+.iconCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  color: var(--bs-gray-600);
+}
+
+:global(.ii:before) {
+  background-color: var(--bs-gray-600);
+}

inspect_ai/_view/www/src/app/log-list/grid/columns/Icon.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import { ApplicationIcons } from "../../../appearance/icons";
+import { columnHelper } from "./columns";
+
+import styles from "./Icon.module.css";
+
+export const iconColumn = () => {
+  return columnHelper.accessor("type", {
+    id: "icon",
+    header: "",
+    cell: (info) => (
+      <div className={styles.iconCell}>
+        <i
+          className={clsx(
+            info.getValue() === "file"
+              ? ApplicationIcons.inspectFile
+              : ApplicationIcons.folder,
+          )}
+        />
+      </div>
+    ),
+    enableSorting: true,
+    enableGlobalFilter: false,
+    size: 30,
+    minSize: 30,
+    maxSize: 60,
+    enableResizing: false,
+    sortingFn: (rowA, rowB) => {
+      const typeA = rowA.original.type;
+      const typeB = rowB.original.type;
+
+      return typeA.localeCompare(typeB);
+    },
+  });
+};

inspect_ai/_view/www/src/app/log-list/grid/columns/Model.module.css

@@ -0,0 +1,6 @@
+.modelCell {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+}

inspect_ai/_view/www/src/app/log-list/grid/columns/Model.tsx

@@ -0,0 +1,34 @@
+import { columnHelper } from "./columns";
+import { EmptyCell } from "./EmptyCell";
+
+import styles from "./Model.module.css";
+
+export const modelColumn = () => {
+  return columnHelper.accessor(
+    (row) => {
+      if (row.type !== "file") return "";
+      return row.header?.eval?.model || "";
+    },
+    {
+      id: "model",
+      header: "Model",
+      cell: (info) => {
+        const item = info.row.original;
+        if (item.type !== "file" || item.header?.eval.model === undefined) {
+          return <EmptyCell />;
+        }
+        return (
+          <div className={styles.modelCell}>
+            {item.header?.eval.model || ""}
+          </div>
+        );
+      },
+      enableSorting: true,
+      enableGlobalFilter: true,
+      size: 300,
+      minSize: 100,
+      maxSize: 400,
+      enableResizing: true,
+    },
+  );
+};

inspect_ai/_view/www/src/app/log-list/grid/columns/Score.module.css

@@ -0,0 +1,6 @@
+.scoreCell {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: var(--bs-gray-600);
+}

inspect_ai/_view/www/src/app/log-list/grid/columns/Score.tsx

@@ -0,0 +1,61 @@
+import { firstMetric } from "../../../../scoring/metrics";
+import { formatPrettyDecimal } from "../../../../utils/format";
+import { FileLogItem, FolderLogItem } from "../../LogItem";
+import { columnHelper } from "./columns";
+import { EmptyCell } from "./EmptyCell";
+
+import styles from "./Score.module.css";
+
+export const scoreColumn = () => {
+  return columnHelper.accessor(
+    (row) => {
+      const metric = itemMetric(row);
+      return metric?.value !== undefined
+        ? formatPrettyDecimal(metric.value)
+        : "";
+    },
+    {
+      id: "score",
+      header: "Score",
+      cell: (info) => {
+        const metric = itemMetric(info.row.original);
+        if (metric === undefined) {
+          return <EmptyCell />;
+        }
+        return (
+          <div className={styles.scoreCell}>
+            {formatPrettyDecimal(metric.value)}
+          </div>
+        );
+      },
+      sortingFn: (rowA, rowB) => {
+        const itemA = rowA.original;
+        const itemB = rowB.original;
+
+        const metricA = itemMetric(itemA);
+        const metricB = itemMetric(itemB);
+
+        if (!metricA && !metricB) return 0;
+        if (!metricA) return -1;
+        if (!metricB) return 1;
+
+        return (metricA.value || 0) - (metricB.value || 0);
+      },
+      enableSorting: true,
+      enableGlobalFilter: true,
+      size: 80,
+      minSize: 60,
+      maxSize: 120,
+      enableResizing: true,
+    },
+  );
+};
+
+const itemMetric = (item: FileLogItem | FolderLogItem) => {
+  if (item.type !== "file") {
+    return undefined;
+  }
+
+  const header = item.header;
+  return header?.results ? firstMetric(header.results) : undefined;
+};

inspect_ai/_view/www/src/app/log-list/grid/columns/Status.module.css

@@ -0,0 +1,15 @@
+.error {
+  color: var(--bs-danger);
+}
+
+.started {
+  color: var(--bs-secondary);
+}
+
+.success {
+  color: var(--bs-success);
+}
+
+.cancelled {
+  color: var(--bs-secondary);
+}

inspect_ai/_view/www/src/app/log-list/grid/columns/Status.tsx

@@ -0,0 +1,95 @@
+import clsx from "clsx";
+import { FileLogItem, FolderLogItem } from "../../LogItem";
+import { columnHelper } from "./columns";
+import { EmptyCell } from "./EmptyCell";
+
+import { ApplicationIcons } from "../../../appearance/icons";
+import styles from "./Status.module.css";
+
+export const statusColumn = () => {
+  return columnHelper.accessor((row) => itemStatusLabel(row), {
+    id: "status",
+    header: "Status",
+    cell: (info) => {
+      const item = info.row.original;
+      const status = itemStatus(item);
+
+      if (!status) {
+        return <EmptyCell />;
+      }
+
+      const icon =
+        status === "error"
+          ? ApplicationIcons.error
+          : status === "started"
+            ? ApplicationIcons.running
+            : status === "cancelled"
+              ? ApplicationIcons.cancelled
+              : ApplicationIcons.success;
+
+      const clz =
+        status === "error"
+          ? styles.error
+          : status === "started"
+            ? styles.started
+            : status === "cancelled"
+              ? styles.cancelled
+              : styles.success;
+
+      return (
+        <div className={styles.statusCell}>
+          <i className={clsx(icon, clz)} />
+        </div>
+      );
+    },
+    sortingFn: (rowA, rowB) => {
+      const itemA = rowA.original as FileLogItem | FolderLogItem;
+      const itemB = rowB.original as FileLogItem | FolderLogItem;
+
+      const statusA = itemStatus(itemA) || "";
+      const statusB = itemStatus(itemB) || "";
+
+      // If A is empty, goes to bottom
+      if (!statusA && statusB) {
+        return 1;
+      }
+      // If B is empty, goes to bottom
+      if (statusA && !statusB) {
+        return -1;
+      }
+
+      return statusA.localeCompare(statusB);
+    },
+    enableSorting: true,
+    enableGlobalFilter: true,
+    size: 80,
+    minSize: 60,
+    maxSize: 120,
+    enableResizing: true,
+  });
+};
+
+const itemStatus = (item: FileLogItem | FolderLogItem) => {
+  if (item.type !== "file") {
+    return undefined;
+  }
+  const header = item.header;
+  return header?.status;
+};
+
+const itemStatusLabel = (item: FileLogItem | FolderLogItem) => {
+  const status = itemStatus(item);
+  if (!status) return "";
+
+  // Return multiple searchable terms for filtering
+  switch (status) {
+    case "error":
+      return "error failed failure";
+    case "started":
+      return "running started in-progress active";
+    case "cancelled":
+      return "cancelled canceled stopped aborted";
+    default:
+      return "success done complete finished completed";
+  }
+};

inspect_ai/_view/www/src/app/log-list/grid/columns/Task.module.css

@@ -0,0 +1,20 @@
+.nameCell {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+}
+
+.logLink {
+  color: var(--bs-link-color);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.logLink:hover {
+  color: var(--bs-link-hover-color);
+  text-decoration: underline;
+}

inspect_ai/_view/www/src/app/log-list/grid/columns/Task.tsx

@@ -0,0 +1,50 @@
+import { Link } from "react-router-dom";
+import { FileLogItem, FolderLogItem } from "../../LogItem";
+import { columnHelper } from "./columns";
+
+import { parseLogFileName } from "../../../../utils/evallog";
+import styles from "./Task.module.css";
+
+export const taskColumn = () => {
+  return columnHelper.accessor((row) => itemName(row), {
+    id: "task",
+    header: "Task",
+    cell: (info) => {
+      const item = info.row.original as FileLogItem | FolderLogItem;
+      let value = itemName(item);
+      return (
+        <div className={styles.nameCell}>
+          {item.url ? (
+            <Link to={item.url} className={styles.logLink}>
+              {value}
+            </Link>
+          ) : (
+            value
+          )}
+        </div>
+      );
+    },
+    enableSorting: true,
+    enableGlobalFilter: true,
+    size: 250,
+    minSize: 150,
+    enableResizing: true,
+    sortingFn: (rowA, rowB) => {
+      const itemA = rowA.original as FileLogItem | FolderLogItem;
+      const itemB = rowB.original as FileLogItem | FolderLogItem;
+
+      const valueA = itemName(itemA);
+      const valueB = itemName(itemB);
+
+      return valueA.localeCompare(valueB);
+    },
+  });
+};
+
+const itemName = (item: FileLogItem | FolderLogItem) => {
+  let value = item.name;
+  if (item.type === "file") {
+    return item.header?.eval?.task || parseLogFileName(item.name).name;
+  }
+  return value;
+};

inspect_ai/_view/www/src/app/log-list/grid/columns/columns.ts

@@ -0,0 +1,27 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { FileLogItem, FolderLogItem } from "../../LogItem";
+import { completedDateColumn } from "./CompletedDate";
+import { fileNameColumn } from "./FileName";
+import { iconColumn } from "./Icon";
+import { modelColumn } from "./Model";
+import { scoreColumn } from "./Score";
+import { statusColumn } from "./Status";
+import { taskColumn } from "./Task";
+
+export const columnHelper = createColumnHelper<FileLogItem | FolderLogItem>();
+
+export const getColumns = (columnIds?: string[]) => {
+  const allColumns = [
+    iconColumn(),
+    taskColumn(),
+    fileNameColumn(),
+    completedDateColumn(),
+    modelColumn(),
+    scoreColumn(),
+    statusColumn(),
+  ];
+  if (columnIds) {
+    return allColumns.filter((col) => columnIds.includes(col.id || ""));
+  }
+  return allColumns;
+};

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

@@ -9,7 +9,6 @@ import {
 } from "react";
 import { EmptyPanel } from "../../components/EmptyPanel";
 import { TabPanel, TabSet } from "../../components/TabSet";
-import { Navbar } from "./navbar/Navbar";
 
 import { useEvalSpec, useRefreshLog } from "../../state/hooks";
 import { useStore } from "../../state/store";
@@ -20,6 +19,7 @@ import { useJsonTabConfig } from "./tabs/JsonTab";
 import { useModelsTab } from "./tabs/ModelsTab";
 import { useSamplesTabConfig } from "./tabs/SamplesTab";
 import { useTaskTabConfig } from "./tabs/TaskTab";
+import { TitleView } from "./title-view/TitleView";
 import { TabDescriptor } from "./types";
 
 export const LogView: FC = () => {
@@ -33,8 +33,6 @@ export const LogView: FC = () => {
   const runningMetrics = useStore(
     (state) => state.log.pendingSampleSummaries?.metrics,
   );
-  const logs = useStore((state) => state.logs.logs);
-  const showToggle = logs.files.length > 1 || !!logs.log_dir || false;
 
   // Use individual tab config hooks
   const samplesTabConfig = useSamplesTabConfig(
@@ -111,14 +109,13 @@ export const LogView: FC = () => {
 
     return (
       <Fragment>
-        <Navbar
+        <TitleView
           evalSpec={evalSpec}
           evalPlan={selectedLogSummary?.plan}
           evalResults={selectedLogSummary?.results}
           runningMetrics={runningMetrics}
           evalStats={selectedLogSummary?.stats}
           status={selectedLogSummary?.status}
-          showToggle={showToggle}
         />
         <div ref={divRef} className={clsx("workspace", styles.workspace)}>
           <div className={clsx("log-detail", styles.tabContainer)}>

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

@@ -1,5 +1,5 @@
 import { FC, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { kLogViewSamplesTabId } from "../../constants";
 import {
   useFilteredSamples,
@@ -7,20 +7,14 @@ import {
   useTotalSampleCount,
 } from "../../state/hooks";
 import { useStore } from "../../state/store";
-import { baseUrl } from "../routing/url";
+import { baseUrl, useLogRouteParams } from "../routing/url";
 import { LogViewLayout } from "./LogViewLayout";
 
 /**
  * LogContainer component that handles routing to specific logs, tabs, and samples
  */
 export const LogViewContainer: FC = () => {
-  const { logPath, tabId, sampleId, epoch, sampleTabId } = useParams<{
-    logPath?: string;
-    tabId?: string;
-    sampleId?: string;
-    epoch?: string;
-    sampleTabId?: string;
-  }>();
+  const { logPath, tabId, sampleId, epoch, sampleTabId } = useLogRouteParams();
 
   const initialState = useStore((state) => state.app.initialState);
   const clearInitialState = useStore(
@@ -69,7 +63,7 @@ export const LogViewContainer: FC = () => {
   useEffect(() => {
     const loadLogFromPath = async () => {
       if (logPath) {
-        await selectLogFile(decodeURIComponent(logPath));
+        await selectLogFile(logPath);
 
         // Set the tab if specified in the URL
         if (tabId) {
@@ -86,26 +80,6 @@ export const LogViewContainer: FC = () => {
 
           clearSelectedLogSummary();
         }
-      } else {
-        setStatus({
-          loading: true,
-          error: undefined,
-        });
-
-        // Reset the log/task tab
-        setSelectedLogIndex(-1);
-        setWorkspaceTab(kLogViewSamplesTabId);
-
-        // Refresh the list of logs
-        await refreshLogs();
-
-        // Select the first log in the list
-        setSelectedLogIndex(0);
-
-        setStatus({
-          loading: false,
-          error: undefined,
-        });
       }
     };
 

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

@@ -4,7 +4,7 @@ import { ErrorPanel } from "../../components/ErrorPanel";
 import { FindBand } from "../../components/FindBand";
 import { ProgressBar } from "../../components/ProgressBar";
 import { useStore } from "../../state/store";
-import { Sidebar } from "../sidebar/Sidebar";
+import { Navbar } from "../navbar/Navbar";
 import { LogView } from "./LogView";
 
 /**
@@ -13,28 +13,16 @@ import { LogView } from "./LogView";
 export const LogViewLayout: FC = () => {
   // App layout and state
   const appStatus = useStore((state) => state.app.status);
-  const offCanvas = useStore((state) => state.app.offcanvas);
-  const setOffCanvas = useStore((state) => state.appActions.setOffcanvas);
-  const clearWorkspaceTab = useStore(
-    (state) => state.appActions.clearWorkspaceTab,
-  );
-  const clearSampleTab = useStore((state) => state.appActions.clearSampleTab);
 
   // Find
   const nativeFind = useStore((state) => state.capabilities.nativeFind);
   const showFind = useStore((state) => state.app.showFind);
   const setShowFind = useStore((state) => state.appActions.setShowFind);
   const hideFind = useStore((state) => state.appActions.hideFind);
+  const singleFileMode = useStore((state) => state.app.singleFileMode);
 
   // Logs Data
   const logs = useStore((state) => state.logs.logs);
-  const selectedLogIndex = useStore((state) => state.logs.selectedLogIndex);
-  const logHeaders = useStore((state) => state.logs.logHeaders);
-  const headersLoading = useStore((state) => state.logs.headersLoading);
-
-  // Log Data
-  const selectedLogSummary = useStore((state) => state.log.selectedLogSummary);
-  const resetFiltering = useStore((state) => state.logActions.resetFiltering);
 
   // The main application reference
   const mainAppRef = useRef<HTMLDivElement>(null);
@@ -43,13 +31,6 @@ export const LogViewLayout: FC = () => {
   // if there are no log files, then don't show sidebar
   const fullScreen = logs.files.length === 1 && !logs.log_dir;
 
-  const handleSelectedIndexChanged = useCallback(() => {
-    setOffCanvas(false);
-    resetFiltering();
-    clearSampleTab();
-    clearWorkspaceTab();
-  }, [setOffCanvas, resetFiltering, clearSampleTab, clearWorkspaceTab]);
-
   const handleKeyboard = useCallback(
     (e: KeyboardEvent) => {
       // Add keyboard shortcuts for find, if needed
@@ -68,25 +49,19 @@ export const LogViewLayout: FC = () => {
 
   return (
     <>
-      {!fullScreen && selectedLogSummary ? (
-        <Sidebar
-          logHeaders={logHeaders}
-          loading={headersLoading}
-          selectedIndex={selectedLogIndex}
-          onSelectedIndexChanged={handleSelectedIndexChanged}
-        />
-      ) : undefined}
       <div
         ref={mainAppRef}
         className={clsx(
           "app-main-grid",
           fullScreen ? "full-screen" : undefined,
-          offCanvas ? "off-canvas" : undefined,
+          singleFileMode ? "single-file-mode" : undefined,
+          "log-view",
         )}
         tabIndex={0}
         onKeyDown={handleKeyboard}
       >
         {!nativeFind && showFind ? <FindBand /> : ""}
+        {!singleFileMode ? <Navbar /> : ""}
         <ProgressBar animating={appStatus.loading} />
         {appStatus.error ? (
           <ErrorPanel

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

@@ -5,8 +5,8 @@ import { Card, CardBody, CardHeader } from "../../../components/Card";
 import { kLogViewTaskTabId } from "../../../constants";
 import { formatDuration, toTitleCase } from "../../../utils/format";
 import { ghCommitUrl } from "../../../utils/git";
-import { MetaDataView } from "../../content/MetaDataView";
 
+import { MetaDataGrid } from "../../content/MetaDataGrid";
 import styles from "./TaskTab.module.css";
 
 // Individual hook for Info tab
@@ -101,14 +101,13 @@ export const TaskTab: FC<TaskTabProps> = ({ evalSpec, evalStats }) => {
           <CardHeader label="Task Info" />
           <CardBody id={"task-card-config"}>
             <div className={clsx(styles.grid)}>
-              <MetaDataView
+              <MetaDataGrid
                 key={`plan-md-task`}
                 className={"text-size-small"}
                 entries={taskInformation}
-                tableOptions="sm"
               />
 
-              <MetaDataView
+              <MetaDataGrid
                 entries={{
                   ["Start"]: new Date(
                     evalStats?.started_at || 0,
@@ -118,7 +117,6 @@ export const TaskTab: FC<TaskTabProps> = ({ evalSpec, evalStats }) => {
                   ).toLocaleString(),
                   ["Duration"]: totalDuration,
                 }}
-                tableOptions="sm"
               />
             </div>
           </CardBody>
@@ -128,11 +126,10 @@ export const TaskTab: FC<TaskTabProps> = ({ evalSpec, evalStats }) => {
           <Card>
             <CardHeader label="Task Args" />
             <CardBody id={"task-card-config"}>
-              <MetaDataView
+              <MetaDataGrid
                 key={`plan-md-task-args`}
                 className={"text-size-small"}
                 entries={task_args as Record<string, unknown>}
-                tableOptions="sm"
               />
             </CardBody>
           </Card>

inspect_ai/_view/www/src/app/log-view/{navbar → title-view}/PrimaryBar.module.css

@@ -12,6 +12,8 @@
 }
 
 .toggle {
+  margin-top: 0.3em;
+  font-size: 1em;
   padding: 0rem 0.1rem 0.1rem 0rem;
   display: flex;
 }