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

inspect_ai/_view/www/src/components/Card.css

@@ -5,6 +5,7 @@
   padding: 0.5em 0.5em 0.5em 0.5em;
   font-size: var(--inspect-font-size-small);
   font-weight: 600;
+  border-bottom: solid 1px var(--bs-light-border-subtle);
 }
 
 .card-header-icon {
@@ -13,9 +14,7 @@
 
 .card-body {
   background-color: var(--bs-body-bg);
-  border: solid 1px var(--bs-light-border-subtle);
-  border-radius: var(--bs-border-radius);
-  margin: 0 8px 8px 8px;
+
   padding: 0.5em;
 }
 
@@ -57,3 +56,7 @@
   padding: 0 0.5em 0.1em 0.5em;
   font-size: var(--inspect-font-size-smaller);
 }
+
+.card-body.card-no-padding {
+  padding: 0;
+}

inspect_ai/_view/www/src/components/Card.tsx

@@ -15,6 +15,7 @@ interface CardBodyProps {
   id?: string;
   children?: ReactNode;
   className?: string | string[];
+  padded?: boolean;
 }
 
 interface CardProps {
@@ -53,9 +54,21 @@ export const CardHeader: FC<CardHeaderProps> = ({
   );
 };
 
-export const CardBody: FC<CardBodyProps> = ({ id, children, className }) => {
+export const CardBody: FC<CardBodyProps> = ({
+  id,
+  children,
+  className,
+  padded = true,
+}) => {
   return (
-    <div className={clsx("card-body", className)} id={id || ""}>
+    <div
+      className={clsx(
+        "card-body",
+        className,
+        !padded ? "card-no-padding" : undefined,
+      )}
+      id={id || ""}
+    >
       {children}
     </div>
   );

inspect_ai/_view/www/src/components/CopyButton.tsx

@@ -4,6 +4,7 @@ import { ApplicationIcons } from "../app/appearance/icons";
 import styles from "./CopyButton.module.css";
 
 interface CopyButtonProps {
+  icon?: string;
   value: string;
   onCopySuccess?: () => void;
   onCopyError?: (error: Error) => void;
@@ -12,6 +13,7 @@ interface CopyButtonProps {
 }
 
 export const CopyButton = ({
+  icon = ApplicationIcons.copy,
   value,
   onCopySuccess,
   onCopyError,
@@ -40,17 +42,13 @@ export const CopyButton = ({
   return (
     <button
       type="button"
-      className={clsx(styles.copyButton, className)}
+      className={clsx("copy-button", styles.copyButton, className)}
       onClick={handleClick}
       aria-label={ariaLabel}
       disabled={isCopied}
     >
       <i
-        className={
-          isCopied
-            ? `${ApplicationIcons.confirm} primary`
-            : ApplicationIcons.copy
-        }
+        className={isCopied ? `${ApplicationIcons.confirm} primary` : icon}
         aria-hidden="true"
       />
     </button>

inspect_ai/_view/www/src/components/ExpandablePanel.module.css

@@ -1,5 +1,10 @@
+.expandablePanel {
+  position: relative;
+}
+
 .expandableBordered {
   border: solid var(--bs-light-border-subtle) 1px;
+  padding: 0.5em;
 }
 
 .expandableTogglable {
@@ -17,27 +22,28 @@
 .moreToggle {
   display: flex;
   margin-top: 0;
-  position: relative;
-  height: 18px;
+  position: absolute;
+  bottom: 0.25em;
+  right: 0.25em;
+  height: 20px;
+  background-color: var(--bs-body-bg);
+  border-radius: 5px;
+  border: solid var(--bs-light-border-subtle) 1px;
+  color: var(--bs-link-color);
 }
 
 .moreToggle.bordered {
   border-top: solid var(--bs-light-border-subtle) 1px;
 }
 
-.moreToggleContainer {
-  position: absolute;
-  top: -1px;
-  right: 0;
-  display: inline-block;
-  border: solid var(--bs-light-border-subtle) 1px;
-  border-top: none;
-  margin-left: auto;
-  margin-right: 0;
-}
-
 .moreToggleButton {
   font-size: var(--inspect-font-size-smaller);
   border: none;
-  padding: 0.1rem 0.5rem;
+  padding: 0rem 0.5rem;
+}
+
+.separator {
+  height: 1px;
+  background-color: var(--bs-light-border-subtle);
+  margin-top: -1px;
 }

inspect_ai/_view/www/src/components/ExpandablePanel.tsx

@@ -8,7 +8,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { ApplicationIcons } from "../app/appearance/icons";
 import { useCollapsedState } from "../state/hooks";
 import { useResizeObserver } from "../utils/dom";
 import styles from "./ExpandablePanel.module.css";
@@ -64,18 +63,21 @@ export const ExpandablePanel: FC<ExpandablePanelProps> = memo(
             styles.expandablePanel,
             collapsed ? styles.expandableCollapsed : undefined,
             border ? styles.expandableBordered : undefined,
+            showToggle ? styles.padBottom : undefined,
           )}
         >
           {children}
+          {showToggle && (
+            <>
+              <MoreToggle
+                collapsed={collapsed}
+                setCollapsed={setCollapsed}
+                border={!border}
+              />
+            </>
+          )}
         </div>
-
-        {showToggle && (
-          <MoreToggle
-            collapsed={collapsed}
-            setCollapsed={setCollapsed}
-            border={!border}
-          />
-        )}
+        {showToggle && <div className={clsx(styles.separator)}></div>}
       </div>
     );
   },
@@ -95,10 +97,6 @@ const MoreToggle: FC<MoreToggleProps> = ({
   style,
 }) => {
   const text = collapsed ? "more" : "less";
-  const icon = collapsed
-    ? ApplicationIcons["expand-down"]
-    : ApplicationIcons.collapse.up;
-
   const handleClick = useCallback(() => {
     setCollapsed(!collapsed);
   }, [setCollapsed, collapsed]);
@@ -108,15 +106,12 @@ const MoreToggle: FC<MoreToggleProps> = ({
       className={clsx(styles.moreToggle, border ? styles.bordered : undefined)}
       style={style}
     >
-      <div className={clsx(styles.moreToggleContainer)}>
-        <button
-          className={clsx("btn", styles.moreToggleButton, "text-size-smallest")}
-          onClick={handleClick}
-        >
-          <i className={clsx(icon, styles.icon)} />
-          {text}
-        </button>
-      </div>
+      <button
+        className={clsx("btn", styles.moreToggleButton, "text-size-smallest")}
+        onClick={handleClick}
+      >
+        {text}...
+      </button>
     </div>
   );
 };

inspect_ai/_view/www/src/components/LargeModal.tsx

@@ -28,6 +28,9 @@ interface LargeModalProps {
   onHide: () => void;
   scrollRef: RefObject<HTMLDivElement | null>;
   children: ReactNode;
+  classNames?: {
+    body?: string | string[];
+  };
 }
 
 export const LargeModal: FC<LargeModalProps> = ({
@@ -42,6 +45,7 @@ export const LargeModal: FC<LargeModalProps> = ({
   onHide,
   showProgress,
   scrollRef,
+  classNames,
 }) => {
   // The footer
   const modalFooter = footer ? (
@@ -127,7 +131,7 @@ export const LargeModal: FC<LargeModalProps> = ({
             </button>
           </div>
           <ProgressBar animating={showProgress} />
-          <div className={"modal-body"} ref={scrollRef}>
+          <div className={clsx("modal-body", classNames?.body)} ref={scrollRef}>
             {children}
           </div>
           {modalFooter}

inspect_ai/_view/www/src/components/LiveVirtualList.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+import { Components, Virtuoso, VirtuosoHandle } from "react-virtuoso";
 import { usePrevious, useProperty } from "../state/hooks";
 import { useRafThrottle, useVirtuosoState } from "../state/scrolling";
 import { PulsingDots } from "./PulsingDots";
@@ -32,6 +32,11 @@ interface LiveVirtualListProps<T> {
   // The progress message to show (if any)
   // no message show if progress isn't provided
   showProgress?: boolean;
+
+  // The initial index to scroll to when loading
+  initialTopMostItemIndex?: number;
+
+  components?: Components<T>;
 }
 
 /**
@@ -45,6 +50,8 @@ export const LiveVirtualList = <T,>({
   scrollRef,
   live,
   showProgress,
+  initialTopMostItemIndex,
+  components,
 }: LiveVirtualListProps<T>) => {
   // The list handle and list state management
   const listHandle = useRef<VirtuosoHandle>(null);
@@ -155,6 +162,22 @@ export const LiveVirtualList = <T,>({
     }
   }, [scrollRef, handleScroll]);
 
+  // Scroll to index when component mounts or targetIndex changes
+  useEffect(() => {
+    if (initialTopMostItemIndex !== undefined && listHandle.current) {
+      // If there is an initial index, scroll to it after a short delay
+      const timer = setTimeout(() => {
+        listHandle.current?.scrollToIndex({
+          index: initialTopMostItemIndex,
+          align: "start",
+          behavior: "auto",
+        });
+      }, 50);
+
+      return () => clearTimeout(timer);
+    }
+  }, [initialTopMostItemIndex]);
+
   return (
     <Virtuoso
       ref={listHandle}
@@ -171,6 +194,7 @@ export const LiveVirtualList = <T,>({
       totalListHeightChanged={heightChanged}
       components={{
         Footer,
+        ...components,
       }}
     />
   );

inspect_ai/_view/www/src/components/MarkdownDiv.css

@@ -1,3 +1,7 @@
 .markdown-ordered-list-item {
   margin-bottom: 0.2em;
 }
+
+.markdown-content p:last-child {
+  margin-bottom: 0;
+}

inspect_ai/_view/www/src/components/MarkdownDiv.tsx

@@ -59,13 +59,13 @@ export const MarkdownDiv = forwardRef<HTMLDivElement, MarkdownDivProps>(
         ref={ref}
         dangerouslySetInnerHTML={markup}
         style={style}
-        className={clsx(className, "markdown-content")}
+        className={clsx(className, "markdown-content", "text-size-base")}
       />
     );
   },
 );
 
-const kLetterListPattern = /^([a-zA-Z][).]\s.*?)$/gm;
+const kLetterListPattern = /^([a-zA-Z0-9][).]\s.*?)$/gm;
 const kCommonmarkReferenceLinkPattern = /\[([^\]]*)\]: (?!http)(.*)/g;
 
 const protectBackslashesInLatex = (content: string): string => {

inspect_ai/_view/www/src/components/TabSet.module.css

@@ -1,5 +1,5 @@
 .tabs {
-  align-items: space-between;
+  align-items: center;
 }
 
 .tabContents {
@@ -38,3 +38,8 @@
   flex-wrap: wrap;
   row-gap: 0.3rem;
 }
+
+.tabStyle {
+  padding-left: 0.7em;
+  padding-right: 0.7em;
+}

inspect_ai/_view/www/src/components/TabSet.tsx

@@ -56,7 +56,13 @@ export const TabSet: FC<TabSetProps> = ({
     <Fragment>
       <ul
         id={id}
-        className={clsx("nav", `nav-${type}`, className, moduleStyles.tabs)}
+        className={clsx(
+          "nav",
+          `nav-${type}`,
+          type === "tabs" ? moduleStyles.tabStyle : undefined,
+          className,
+          moduleStyles.tabs,
+        )}
         role="tablist"
         aria-orientation="horizontal"
       >
@@ -157,7 +163,7 @@ export const TabPanel: FC<TabPanelProps> = ({
       )}
       style={style}
     >
-      {children}
+      {selected ? children : null}
     </div>
   );
 };

inspect_ai/_view/www/src/state/hooks.ts

@@ -226,25 +226,38 @@ export const useSelectedSampleSummary = (): SampleSummary | undefined => {
 export const useSampleData = () => {
   const sampleStatus = useStore((state) => state.sample.sampleStatus);
   const sampleError = useStore((state) => state.sample.sampleError);
-  const selectedSample = useStore((state) => state.sample.selectedSample);
+  const getSelectedSample = useStore(
+    (state) => state.sampleActions.getSelectedSample,
+  );
+  const selectedSampleIdentifier = useStore(
+    (state) => state.sample.sample_identifier,
+  );
+  const sampleNeedsReload = useStore((state) => state.sample.sampleNeedsReload);
   const runningEvents = useStore(
     (state) => state.sample.runningEvents,
   ) as Events;
   return useMemo(() => {
     return {
+      selectedSampleIdentifier,
       status: sampleStatus,
+      sampleNeedsReload,
       error: sampleError,
-      sample: selectedSample,
+      getSelectedSample,
       running: runningEvents,
     };
-  }, [sampleStatus, sampleError, selectedSample, runningEvents]);
+  }, [
+    sampleStatus,
+    sampleError,
+    getSelectedSample,
+    selectedSampleIdentifier,
+    sampleNeedsReload,
+    runningEvents,
+  ]);
 };
 
 export const useLogSelection = () => {
   const selectedSampleSummary = useSelectedSampleSummary();
-  const selectedLogFile = useStore((state) =>
-    state.logsActions.getSelectedLogFile(),
-  );
+  const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
   const loadedLog = useStore((state) => state.log.loadedLog);
 
   return useMemo(() => {
@@ -256,18 +269,68 @@ export const useLogSelection = () => {
   }, [selectedLogFile, selectedSampleSummary]);
 };
 
+export const useCollapseSampleEvent = (
+  id: string,
+): [boolean, (collapsed: boolean) => void] => {
+  const collapsed = useStore((state) => state.sample.collapsedEvents);
+  const collapseEvent = useStore((state) => state.sampleActions.collapseEvent);
+
+  return useMemo(() => {
+    const isCollapsed = collapsed !== null && collapsed[id] === true;
+    const set = (value: boolean) => {
+      log.debug("Set collapsed", id, value);
+      collapseEvent(id, value);
+    };
+    return [isCollapsed, set];
+  }, [collapsed, collapseEvent, id]);
+};
+
+export const useCollapsibleIds = (
+  key: string,
+): [
+  Record<string, boolean>,
+  (id: string, value: boolean) => void,
+  () => void,
+] => {
+  const collapsedIds = useStore(
+    (state) => state.sample.collapsedIdBuckets[key],
+  );
+
+  const setCollapsed = useStore((state) => state.sampleActions.collapseId);
+  const collapseId = useCallback(
+    (id: string, value: boolean) => {
+      setCollapsed(key, id, value);
+    },
+    [setCollapsed],
+  );
+
+  const clearCollapsedIds = useStore(
+    (state) => state.sampleActions.clearCollapsedIds,
+  );
+  const clearIds = useCallback(() => {
+    clearCollapsedIds(key);
+  }, [clearCollapsedIds, key]);
+
+  return useMemo(() => {
+    return [collapsedIds, collapseId, clearIds];
+  }, [collapsedIds, collapseId, clearIds]);
+};
+
 export const useCollapsedState = (
   id: string,
   defaultValue?: boolean,
+  scope?: string,
 ): [boolean, (value: boolean) => void] => {
+  const stateId = scope ? `${scope}-${id}` : id;
+
   const collapsed = useStore((state) =>
-    state.appActions.getCollapsed(id, defaultValue),
+    state.appActions.getCollapsed(stateId, defaultValue),
   );
   const setCollapsed = useStore((state) => state.appActions.setCollapsed);
   return useMemo(() => {
     const set = (value: boolean) => {
-      log.debug("Set collapsed", id, value);
-      setCollapsed(id, value);
+      log.debug("Set collapsed", id, scope, value);
+      setCollapsed(stateId, value);
     };
     return [collapsed, set];
   }, [collapsed, setCollapsed]);
@@ -289,9 +352,7 @@ export const useMessageVisibility = (
   const isFirstRender = useRef(true);
 
   // Reset state if the eval changes, but not during initialization
-  const selectedLogFile = useStore((state) =>
-    state.logsActions.getSelectedLogFile(),
-  );
+  const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
   useEffect(() => {
     // Skip the first effect run
     if (isFirstRender.current) {
@@ -426,13 +487,22 @@ export const useSetSelectedLogIndex = () => {
   const clearSelectedLogSummary = useStore(
     (state) => state.logActions.clearSelectedLogSummary,
   );
+  const clearCollapsedEvents = useStore(
+    (state) => state.sampleActions.clearCollapsedEvents,
+  );
 
   return useCallback(
     (index: number) => {
+      clearCollapsedEvents();
       clearSelectedSample();
       clearSelectedLogSummary();
       setSelectedLogIndex(index);
     },
-    [setSelectedLogIndex, clearSelectedLogSummary, clearSelectedSample],
+    [
+      setSelectedLogIndex,
+      clearSelectedLogSummary,
+      clearSelectedSample,
+      clearCollapsedEvents,
+    ],
   );
 };

inspect_ai/_view/www/src/state/logPolling.ts

@@ -26,7 +26,7 @@ export function createLogPolling(
 
     const state = get();
     const api = state.api;
-    const selectedLogFile = state.logsActions.getSelectedLogFile();
+    const selectedLogFile = state.logs.selectedLogFile;
 
     if (!api || !selectedLogFile) {
       return false;
@@ -195,6 +195,6 @@ export function createLogPolling(
     cleanup,
     // Expose the refresh function so components can use it directly
     refreshLog: (clearPending = false) =>
-      refreshLog(get().logsActions.getSelectedLogFile() || "", clearPending),
+      refreshLog(get().logs.selectedLogFile || "", clearPending),
   };
 }

inspect_ai/_view/www/src/state/logSlice.ts

@@ -169,7 +169,6 @@ export const createLogSlice = (
         try {
           const logContents = await api.get_log_summary(logFileName);
           state.logActions.setSelectedLogSummary(logContents);
-          state.logActions.setEpoch;
 
           // Push the updated header information up
           const header = {
@@ -207,7 +206,7 @@ export const createLogSlice = (
       refreshLog: async () => {
         const state = get();
         const api = state.api;
-        const selectedLogFile = state.logsActions.getSelectedLogFile();
+        const selectedLogFile = state.logs.selectedLogFile;
 
         if (!api || !selectedLogFile) {
           return;

inspect_ai/_view/www/src/state/logsSlice.ts

@@ -26,9 +26,6 @@ export interface LogsSlice {
     refreshLogs: () => Promise<void>;
     selectLogFile: (logUrl: string) => Promise<void>;
     loadLogs: () => Promise<LogFiles>;
-
-    // Computed values
-    getSelectedLogFile: () => string | undefined;
   };
 }
 
@@ -37,6 +34,7 @@ const initialState: LogsState = {
   logHeaders: {},
   headersLoading: false,
   selectedLogIndex: -1,
+  selectedLogFile: undefined as string | undefined,
 };
 
 export const createLogsSlice = (
@@ -55,6 +53,10 @@ export const createLogsSlice = (
       setLogs: (logs: LogFiles) => {
         set((state) => {
           state.logs.logs = logs;
+          state.logs.selectedLogFile =
+            state.logs.selectedLogIndex > -1
+              ? logs.files[state.logs.selectedLogIndex]?.name
+              : undefined;
         });
 
         // If we have files in the logs, load the headers
@@ -79,6 +81,8 @@ export const createLogsSlice = (
       setSelectedLogIndex: (selectedLogIndex: number) => {
         set((state) => {
           state.logs.selectedLogIndex = selectedLogIndex;
+          const file = state.logs.logs.files[selectedLogIndex];
+          state.logs.selectedLogFile = file ? file.name : undefined;
         });
       },
       updateLogHeaders: (headers: Record<string, EvalLogHeader>) =>
@@ -94,6 +98,8 @@ export const createLogsSlice = (
 
         if (index > -1) {
           state.logsActions.setSelectedLogIndex(index);
+          state.logs.selectedLogFile =
+            state.logs.logs.files[index]?.name ?? undefined;
         }
       },
 
@@ -161,12 +167,6 @@ export const createLogsSlice = (
           );
         }
       },
-
-      getSelectedLogFile: () => {
-        const state = get();
-        const file = state.logs.logs.files[state.logs.selectedLogIndex];
-        return file !== undefined ? file.name : undefined;
-      },
     },
   } as const;
 

inspect_ai/_view/www/src/state/samplePolling.ts

@@ -140,7 +140,7 @@ export function createSamplePolling(
 
               // Update the store with the completed sample
               set((state) => {
-                state.sample.selectedSample = migratedSample;
+                state.sampleActions.setSelectedSample(migratedSample);
                 state.sampleActions.setSampleStatus("ok");
                 state.sample.runningEvents = [];
               });