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

inspect_ai/_view/www/src/app/log-list/LogsPanel.tsx

@@ -0,0 +1,178 @@
+import clsx from "clsx";
+import { FC, useEffect, useMemo, useRef } from "react";
+
+import { ProgressBar } from "../../components/ProgressBar";
+import { useClientEvents } from "../../state/clientEvents";
+import { useLogs } from "../../state/hooks";
+import { useUnloadLog } from "../../state/log";
+import { useStore } from "../../state/store";
+import { dirname, isInDirectory } from "../../utils/path";
+import { directoryRelativeUrl, join } from "../../utils/uri";
+import { Navbar } from "../navbar/Navbar";
+import { logUrl, useLogRouteParams } from "../routing/url";
+import { LogListGrid } from "./grid/LogListGrid";
+import { FileLogItem, FolderLogItem } from "./LogItem";
+import { LogListFooter } from "./LogListFooter";
+import { LogsFilterInput } from "./LogsFilterInput";
+import styles from "./LogsPanel.module.css";
+
+const rootName = (relativePath: string) => {
+  const parts = relativePath.split("/");
+  if (parts.length === 0) {
+    return "";
+  }
+  return parts[0];
+};
+
+export const kLogsPaginationId = "logs-list-pagination";
+export const kDefaultPageSize = 30;
+
+interface LogsPanelProps {}
+
+export const LogsPanel: FC<LogsPanelProps> = () => {
+  // Get the logs from the store
+  const loading = useStore((state) => state.app.status.loading);
+
+  const { loadLogs } = useLogs();
+  const logs = useStore((state) => state.logs.logs);
+  const logHeaders = useStore((state) => state.logs.logHeaders);
+  const headersLoading = useStore((state) => state.logs.headersLoading);
+  const watchedLogs = useStore((state) => state.logs.listing.watchedLogs);
+
+  // Unload the load when this is mounted. This prevents the old log
+  // data from being displayed when navigating back to the logs panel
+  // and also ensures that we reload logs when freshly navigating to them.
+  const { unloadLog } = useUnloadLog();
+  useEffect(() => {
+    unloadLog();
+  }, []);
+
+  const { logPath } = useLogRouteParams();
+
+  const currentDir = join(logPath || "", logs.log_dir);
+
+  // Polling for client events
+  const { startPolling, stopPolling } = useClientEvents();
+
+  const previousWatchedLogs = useRef<typeof watchedLogs>(undefined);
+
+  useEffect(() => {
+    // Only restart polling if the watched logs have actually changed
+    const current =
+      watchedLogs
+        ?.map((log) => log.name)
+        .sort()
+        .join(",") || "";
+    const previous =
+      previousWatchedLogs.current === undefined
+        ? undefined
+        : previousWatchedLogs.current
+            ?.map((log) => log.name)
+            .sort()
+            .join(",") || "";
+
+    if (current !== previous) {
+      // Always stop current polling first when logs change
+      stopPolling();
+
+      if (watchedLogs !== undefined) {
+        startPolling(watchedLogs);
+      }
+      previousWatchedLogs.current = watchedLogs;
+    }
+  }, [watchedLogs]);
+
+  // All the items visible in the current directory (might span
+  // multiple pages)
+  const logItems: Array<FileLogItem | FolderLogItem> = useMemo(() => {
+    // Build the list of files / folders that for the current directory
+    const logItems: Array<FileLogItem | FolderLogItem> = [];
+
+    // Track process folders to avoid duplicates
+    const processedFolders = new Set<string>();
+
+    for (const logFile of logs.files) {
+      // The file name
+      const name = logFile.name;
+
+      // Process paths in the current directory
+      const cleanDir = currentDir.endsWith("/")
+        ? currentDir.slice(0, -1)
+        : currentDir;
+
+      if (isInDirectory(logFile.name, cleanDir)) {
+        // This is a file within the current directory
+        const dirName = directoryRelativeUrl(currentDir, logs.log_dir);
+        const relativePath = directoryRelativeUrl(name, currentDir);
+
+        const fileOrFolderName = decodeURIComponent(rootName(relativePath));
+        const path = join(
+          decodeURIComponent(relativePath),
+          decodeURIComponent(dirName),
+        );
+
+        logItems.push({
+          id: fileOrFolderName,
+          name: fileOrFolderName,
+          type: "file",
+          url: logUrl(path, logs.log_dir),
+          logFile: logFile,
+          header: logHeaders[logFile.name],
+        });
+      } else if (name.startsWith(currentDir)) {
+        // This is file that is next level (or deeper) child
+        // of the current directory, extract the top level folder name
+
+        const relativePath = directoryRelativeUrl(name, currentDir);
+
+        const dirName = decodeURIComponent(rootName(relativePath));
+        const currentDirRelative = directoryRelativeUrl(
+          currentDir,
+          logs.log_dir,
+        );
+        const url = join(dirName, decodeURIComponent(currentDirRelative));
+        if (!processedFolders.has(dirName)) {
+          logItems.push({
+            id: dirName,
+            name: dirName,
+            type: "folder",
+            url: logUrl(url, logs.log_dir),
+            itemCount: logs.files.filter((file) =>
+              file.name.startsWith(dirname(name)),
+            ).length,
+          });
+          processedFolders.add(dirName);
+        }
+      }
+    }
+
+    return logItems;
+  }, [logPath, logs.files, logHeaders]);
+
+  useEffect(() => {
+    const exec = async () => {
+      await loadLogs();
+    };
+    exec();
+  }, [loadLogs]);
+
+  return (
+    <div className={clsx(styles.panel)}>
+      <Navbar>
+        <LogsFilterInput />
+      </Navbar>
+
+      <ProgressBar animating={loading || headersLoading} />
+      <div className={clsx(styles.list, "text-size-smaller")}>
+        <LogListGrid items={logItems} />
+      </div>
+      <LogListFooter
+        logDir={currentDir}
+        itemCount={logItems.length}
+        progressText={
+          loading ? "Loading logs" : headersLoading ? "Loading data" : undefined
+        }
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,115 @@
+.gridContainer {
+  height: 100%;
+  overflow: auto;
+  padding: 0;
+}
+
+.grid {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100%;
+  min-height: 0;
+}
+
+/* Header Styles */
+.headerRow {
+  display: grid;
+  background: var(--bs-light);
+  border-bottom: 1px solid var(--bs-border-color);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  width: fit-content;
+  min-width: 100%;
+}
+
+.headerCell {
+  padding: 0.1em 0.1em 0.1em 0.6em;
+  font-weight: 600;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-right: 1px solid var(--bs-border-color-translucent);
+  position: relative;
+  box-sizing: border-box;
+}
+
+.headerCell:last-child {
+  border-right: none;
+}
+
+.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.sortable:hover {
+  background-color: var(--bs-secondary-bg-subtle);
+}
+
+.sortIndicator {
+  margin-left: 0.25em;
+  font-size: 0.75rem;
+  color: var(--bs-link-color);
+}
+
+/* Resizer Styles */
+.resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  background-color: var(--bs-secondary-bg-subtle);
+
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.resizer:hover,
+.isResizing {
+  opacity: 1;
+}
+
+.headerCell:hover .resizer {
+  opacity: 0.3;
+}
+
+/* Body Styles */
+.bodyContainer {
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+  min-width: 100%;
+  width: fit-content;
+}
+
+.bodyRow {
+  display: grid;
+  transition: background-color 0.15s ease-in-out;
+  width: fit-content;
+  min-width: 100%;
+}
+
+/* Cell Styles */
+.bodyCell {
+  padding: 0.1em 0.1em 0.1em 0.6em;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.bodyCell:last-child {
+  border-right: none;
+}
+
+.emptyMessage {
+  width: 100%;
+  text-align: center;
+  padding-top: 4em;
+}

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

@@ -0,0 +1,304 @@
+import {
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  Updater,
+  useReactTable,
+} from "@tanstack/react-table";
+import clsx from "clsx";
+import { FC, useCallback, useEffect, useMemo, useRef } from "react";
+
+import { useLogs, useLogsListing, usePagination } from "../../../state/hooks";
+import { useStore } from "../../../state/store";
+import { FileLogItem, FolderLogItem } from "../LogItem";
+import { kDefaultPageSize, kLogsPaginationId } from "../LogsPanel";
+import styles from "./LogListGrid.module.css";
+import { getColumns } from "./columns/columns";
+
+interface LogListGridProps {
+  items: Array<FileLogItem | FolderLogItem>;
+}
+
+export const LogListGrid: FC<LogListGridProps> = ({ items }) => {
+  const {
+    sorting,
+    setSorting,
+    filtering,
+    setFiltering,
+    globalFilter,
+    setGlobalFilter,
+    columnResizeMode,
+    setFilteredCount,
+    columnSizes,
+    setColumnSize,
+  } = useLogsListing();
+
+  const { loadHeaders } = useLogs();
+
+  const { page, itemsPerPage, setPage } = usePagination(
+    kLogsPaginationId,
+    kDefaultPageSize,
+  );
+  const headersLoading = useStore((state) => state.logs.headersLoading);
+  const loading = useStore((state) => state.app.status.loading);
+  const setWatchedLogs = useStore((state) => state.logsActions.setWatchedLogs);
+
+  const logHeaders = useStore((state) => state.logs.logHeaders);
+  const sortingRef = useRef(sorting);
+
+  // Load all headers when needed (store handles deduplication)
+  const loadAllHeadersForItems = useCallback(async () => {
+    const logFiles = items
+      .filter((item) => item.type === "file")
+      .map((item) => item.logFile)
+      .filter((file) => file !== undefined);
+
+    await loadHeaders(logFiles);
+    setWatchedLogs(logFiles);
+  }, [loadHeaders, items, setWatchedLogs]);
+
+  // Keep ref updated
+  useEffect(() => {
+    sortingRef.current = sorting;
+  }, [sorting]);
+
+  // Initial sort
+  useEffect(() => {
+    setSorting([{ id: "icon", desc: true }]);
+  }, []);
+
+  // Force re-sort when logHeaders change (affects task column sorting)
+  useEffect(() => {
+    // Only re-sort if we're currently sorting by a column that depends on logHeaders
+    const currentSort = sortingRef.current?.find(
+      (sort) =>
+        sort.id === "task" || sort.id === "model" || sort.id === "score",
+    );
+    if (currentSort) {
+      // Trigger a re-sort by updating the sorting state
+      setSorting([...(sortingRef.current || [])]);
+    }
+  }, [logHeaders]);
+
+  const columns = useMemo(() => {
+    return getColumns();
+  }, []);
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    columnResizeMode: columnResizeMode || "onChange",
+    state: {
+      sorting,
+      columnFilters: filtering,
+      globalFilter,
+      pagination: {
+        pageIndex: page,
+        pageSize: itemsPerPage,
+      },
+      columnSizing: columnSizes || {},
+    },
+    rowCount: items.length,
+    onSortingChange: async (updater: Updater<SortingState>) => {
+      await loadAllHeadersForItems();
+      setSorting(
+        typeof updater === "function" ? updater(sorting || []) : updater,
+      );
+    },
+    onColumnFiltersChange: async (updater: Updater<ColumnFiltersState>) => {
+      await loadAllHeadersForItems();
+      setFiltering(
+        typeof updater === "function" ? updater(filtering || []) : updater,
+      );
+    },
+    onGlobalFilterChange: (updater: Updater<string>) => {
+      setGlobalFilter(
+        typeof updater === "function" ? updater(globalFilter || "") : updater,
+      );
+    },
+    onPaginationChange: (updater: Updater<PaginationState>) => {
+      const newPagination =
+        typeof updater === "function"
+          ? updater({ pageIndex: page, pageSize: itemsPerPage })
+          : updater;
+      setPage(newPagination.pageIndex);
+    },
+    onColumnSizingChange: (updater: Updater<Record<string, number>>) => {
+      const newSizes =
+        typeof updater === "function"
+          ? updater(table.getState().columnSizing || {})
+          : updater;
+      for (const [columnId, size] of Object.entries(newSizes)) {
+        setColumnSize(columnId, size);
+      }
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    enableColumnResizing: true,
+    autoResetPageIndex: false,
+  });
+
+  // Update filtered count in store when table filtering changes
+  useEffect(() => {
+    const filteredRowCount = table.getFilteredRowModel().rows.length;
+    setFilteredCount(filteredRowCount);
+  }, [table.getFilteredRowModel().rows.length, setFilteredCount]);
+
+  // Load all headers when globalFilter changes
+  useEffect(() => {
+    if (globalFilter && globalFilter.trim()) {
+      loadAllHeadersForItems();
+    }
+  }, [globalFilter, loadAllHeadersForItems]);
+
+  // Load headers for current page (demand loading)
+  useEffect(() => {
+    const exec = async () => {
+      const startIndex = page * itemsPerPage;
+      const endIndex = startIndex + itemsPerPage;
+      const currentPageItems = items.slice(startIndex, endIndex);
+
+      const fileItems = currentPageItems.filter((item) => item.type === "file");
+      const logFiles = fileItems
+        .map((item) => item.logFile)
+        .filter((file) => file !== undefined);
+
+      // Only load headers for files that don't already have headers loaded
+      const filesToLoad = logFiles.filter((file) => !logHeaders[file.name]);
+
+      if (filesToLoad.length > 0) {
+        await loadHeaders(filesToLoad);
+      }
+
+      setWatchedLogs(logFiles);
+    };
+    exec();
+  }, [page, itemsPerPage, items, loadHeaders, setWatchedLogs, logHeaders]);
+
+  const placeholderText = useMemo(() => {
+    if (headersLoading || loading) {
+      if (globalFilter) {
+        return "searching...";
+      } else {
+        return "loading...";
+      }
+    } else {
+      if (globalFilter) {
+        return "no matching logs";
+      } else {
+        return "no logs";
+      }
+    }
+  }, [headersLoading, loading, globalFilter]);
+
+  return (
+    <div className={styles.gridContainer}>
+      <div className={styles.grid}>
+        {/* Header */}
+        <div
+          className={styles.headerRow}
+          style={{
+            gridTemplateColumns:
+              table
+                .getHeaderGroups()[0]
+                ?.headers.map((header) => `${header.getSize()}px`)
+                .join(" ") || "40px 0.5fr 0.25fr 0.25fr 0.1fr",
+          }}
+        >
+          {table.getHeaderGroups().map((headerGroup) =>
+            headerGroup.headers.map((header) => (
+              <div
+                key={header.id}
+                className={clsx(styles.headerCell, {
+                  [styles.sortable]: header.column.getCanSort(),
+                  [styles.resizing]: header.column.getIsResizing(),
+                })}
+                onClick={(event) => {
+                  header.column.getToggleSortingHandler()?.(event);
+                }}
+                style={{
+                  width: header.getSize(),
+                  position: "relative",
+                }}
+              >
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                {header.column.getCanSort() && (
+                  <span className={styles.sortIndicator}>
+                    {{
+                      asc: " ↑",
+                      desc: " ↓",
+                    }[header.column.getIsSorted() as string] ?? ""}
+                  </span>
+                )}
+                {header.column.getCanResize() && (
+                  <div
+                    onMouseDown={(e) => {
+                      e.stopPropagation();
+                      header.getResizeHandler()(e);
+                    }}
+                    onTouchStart={(e) => {
+                      e.stopPropagation();
+                      header.getResizeHandler()(e);
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                    className={clsx(styles.resizer, {
+                      [styles.isResizing]: header.column.getIsResizing(),
+                    })}
+                  />
+                )}
+              </div>
+            )),
+          )}
+        </div>
+
+        {/* Body */}
+        <div className={styles.bodyContainer}>
+          {table.getRowModel().rows.length === 0 && (
+            <div className={styles.emptyMessage}>{placeholderText}</div>
+          )}
+          {table.getRowModel().rows.map((row) => (
+            <div
+              key={row.id}
+              className={styles.bodyRow}
+              style={{
+                gridTemplateColumns: row
+                  .getVisibleCells()
+                  .map((cell) => `${cell.column.getSize()}px`)
+                  .join(" "),
+              }}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <div
+                  key={cell.id}
+                  className={clsx(
+                    styles.bodyCell,
+                    styles[`${cell.column.id}Cell`],
+                  )}
+                  style={{
+                    width: cell.column.getSize(),
+                  }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,64 @@
+import { FileLogItem, FolderLogItem } from "../../LogItem";
+import { columnHelper } from "./columns";
+
+import styles from "./CompletedDate.module.css";
+import { EmptyCell } from "./EmptyCell";
+
+export const completedDateColumn = () => {
+  return columnHelper.accessor(
+    (row) => {
+      const completed = itemCompletedAt(row);
+      if (!completed) return "";
+      const time = new Date(completed);
+      return `${time.toDateString()} ${time.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      })}`;
+    },
+    {
+      id: "completed",
+      header: "Completed",
+      cell: (info) => {
+        const item = info.row.original;
+        const completed = itemCompletedAt(item);
+        const time = completed ? new Date(completed) : undefined;
+        const timeStr = time
+          ? `${time.toDateString()}
+        ${time.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}`
+          : "";
+
+        if (!timeStr) {
+          return <EmptyCell />;
+        }
+
+        return <div className={styles.dateCell}>{timeStr}</div>;
+      },
+      sortingFn: (rowA, rowB) => {
+        const itemA = rowA.original as FileLogItem | FolderLogItem;
+        const itemB = rowB.original as FileLogItem | FolderLogItem;
+
+        const completedA = itemCompletedAt(itemA);
+        const completedB = itemCompletedAt(itemB);
+
+        const timeA = new Date(completedA || 0);
+        const timeB = new Date(completedB || 0);
+        return timeA.getTime() - timeB.getTime();
+      },
+
+      enableSorting: true,
+      enableGlobalFilter: true,
+      size: 200,
+      minSize: 120,
+      maxSize: 300,
+      enableResizing: true,
+    },
+  );
+};
+
+const itemCompletedAt = (item: FileLogItem | FolderLogItem) => {
+  if (item.type !== "file") return undefined;
+  return item.header?.stats?.completed_at;
+};

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

@@ -0,0 +1,3 @@
+.emptyCell {
+  display: block;
+}

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

@@ -0,0 +1,7 @@
+import { FC } from "react";
+
+import styles from "./EmptyCell.module.css";
+
+export const EmptyCell: FC = () => {
+  return <div className={styles.emptyCell}>-</div>;
+};

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

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