inspect-ai 0.3.99__py3-none-any.whl → 0.3.101__py3-none-any.whl

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

@@ -0,0 +1,183 @@
+import {
+  CSSProperties,
+  FC,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+interface StickyScrollProps {
+  children: ReactNode;
+  scrollRef: RefObject<HTMLElement | null>;
+  offsetTop?: number;
+  zIndex?: number;
+  className?: string;
+  stickyClassName?: string;
+  onStickyChange?: (isSticky: boolean) => void;
+}
+
+export const StickyScroll: FC<StickyScrollProps> = ({
+  children,
+  scrollRef,
+  offsetTop = 0,
+  zIndex = 100,
+  className = "",
+  stickyClassName = "is-sticky",
+  onStickyChange,
+}) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isSticky, setIsSticky] = useState(false);
+  const [dimensions, setDimensions] = useState({
+    width: 0,
+    height: 0,
+    left: 0,
+    stickyTop: 0, // Store the position where the element should stick
+  });
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const content = contentRef.current;
+    const scrollContainer = scrollRef.current;
+
+    if (!wrapper || !content || !scrollContainer) {
+      return;
+    }
+
+    // Create a sentinel element that will be positioned at the desired sticky point
+    const sentinel = document.createElement("div");
+    sentinel.style.position = "absolute";
+    sentinel.style.top = "0px"; // Position at the top of the wrapper
+    sentinel.style.left = "0";
+    sentinel.style.width = "1px";
+    sentinel.style.height = "1px";
+    sentinel.style.pointerEvents = "none";
+    wrapper.prepend(sentinel);
+
+    // Create a width tracker element that always has the same width as the wrapper
+    // This helps us know what width to apply to the fixed element
+    const widthTracker = document.createElement("div");
+    widthTracker.style.position = "absolute";
+    widthTracker.style.top = "0";
+    widthTracker.style.left = "0";
+    widthTracker.style.width = "100%";
+    widthTracker.style.height = "0";
+    widthTracker.style.pointerEvents = "none";
+    widthTracker.style.visibility = "hidden";
+    wrapper.prepend(widthTracker);
+
+    // Measure element dimensions and calculate sticky position
+    const updateDimensions = () => {
+      if (wrapper && scrollContainer) {
+        const contentRect = content.getBoundingClientRect();
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const trackerRect = widthTracker.getBoundingClientRect();
+
+        // Calculate where the top of the content should be when sticky
+        // This is the distance from the top of the scroll container
+        // plus any additional offsetTop
+        const stickyTop = containerRect.top + offsetTop;
+
+        setDimensions({
+          // Use the width tracker to get the right width that respects
+          // the parent container's current width, rather than the content's width
+          width: trackerRect.width,
+          height: contentRect.height,
+          left: trackerRect.left,
+          stickyTop,
+        });
+      }
+    };
+
+    // Initial measurement
+    updateDimensions();
+
+    // Monitor size changes
+    const resizeObserver = new ResizeObserver(() => {
+      // Use animationFrame to ensure dimensions are updated after DOM has settled
+      requestAnimationFrame(() => {
+        updateDimensions();
+        // If sticky, force a re-measurement of position to update layout
+        if (isSticky) {
+          handleScroll();
+        }
+      });
+    });
+
+    resizeObserver.observe(wrapper);
+    resizeObserver.observe(scrollContainer);
+    resizeObserver.observe(content);
+
+    // Add scroll event listener for more precise control
+    const handleScroll = () => {
+      const sentinelRect = sentinel.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+
+      // Check if sentinel is above the top of the viewport + offset
+      const shouldBeSticky = sentinelRect.top < containerRect.top + offsetTop;
+
+      if (shouldBeSticky !== isSticky) {
+        updateDimensions();
+        setIsSticky(shouldBeSticky);
+
+        if (onStickyChange) {
+          onStickyChange(shouldBeSticky);
+        }
+      }
+    };
+
+    scrollContainer.addEventListener("scroll", handleScroll);
+
+    // Trigger initial check
+    handleScroll();
+
+    // Clean up
+    return () => {
+      resizeObserver.disconnect();
+      scrollContainer.removeEventListener("scroll", handleScroll);
+      if (sentinel.parentNode) {
+        sentinel.parentNode.removeChild(sentinel);
+      }
+      if (widthTracker.parentNode) {
+        widthTracker.parentNode.removeChild(widthTracker);
+      }
+    };
+  }, [scrollRef, offsetTop, onStickyChange, isSticky]);
+
+  // Wrapper styles - this div serves as the placeholder
+  // When sticky, we need to ensure the wrapper has the right dimensions
+  // to prevent content jumping when the element is detached from normal flow
+  const wrapperStyle: CSSProperties = {
+    position: "relative",
+    height: isSticky ? `${dimensions.height}px` : "auto",
+    // Don't constrain width - let it flow naturally with the content
+  };
+
+  // Content styles - position at the calculated stickyTop when sticky
+  // For sticky mode, use fixed positioning but maintain the original width
+  const contentStyle: CSSProperties = isSticky
+    ? {
+        position: "fixed",
+        top: `${dimensions.stickyTop}px`,
+        left: `${dimensions.left}px`,
+        width: `${dimensions.width}px`, // Keep explicit width to prevent expanding to 100%
+        maxHeight: `calc(100vh - ${dimensions.stickyTop}px)`,
+        zIndex,
+      }
+    : {};
+
+  const contentClassName =
+    isSticky && stickyClassName
+      ? `${className} ${stickyClassName}`.trim()
+      : className;
+
+  return (
+    <div ref={wrapperRef} style={wrapperStyle}>
+      <div ref={contentRef} className={contentClassName} style={contentStyle}>
+        {children}
+      </div>
+    </div>
+  );
+};

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

@@ -16,6 +16,7 @@ import moduleStyles from "./TabSet.module.css";
 
 interface TabSetProps {
   id: string;
+  tabsRef?: RefObject<HTMLUListElement | null>;
   type?: "tabs" | "pills";
   className?: string | string[];
   tabPanelsClassName?: string | string[];
@@ -33,6 +34,7 @@ interface TabPanelProps {
   style?: CSSProperties;
   scrollable?: boolean;
   scrollRef?: RefObject<HTMLDivElement | null>;
+
   className?: string | string[];
   children?: ReactNode;
   title: string;
@@ -47,6 +49,7 @@ export const TabSet: FC<TabSetProps> = ({
   tabPanelsClassName,
   tabControlsClassName,
   tools,
+  tabsRef,
   children,
 }) => {
   const validTabs = flattenChildren(children);
@@ -55,6 +58,7 @@ export const TabSet: FC<TabSetProps> = ({
   return (
     <Fragment>
       <ul
+        ref={tabsRef}
         id={id}
         className={clsx(
           "nav",

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

@@ -270,16 +270,17 @@ export const useLogSelection = () => {
 };
 
 export const useCollapseSampleEvent = (
+  scope: string,
   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 isCollapsed = collapsed !== null && collapsed[scope]?.[id] === true;
     const set = (value: boolean) => {
       log.debug("Set collapsed", id, value);
-      collapseEvent(id, value);
+      collapseEvent(scope, id, value);
     };
     return [isCollapsed, set];
   }, [collapsed, collapseEvent, id]);
@@ -506,3 +507,52 @@ export const useSetSelectedLogIndex = () => {
     ],
   );
 };
+
+export const useSamplePopover = (id: string) => {
+  const setVisiblePopover = useStore(
+    (store) => store.sampleActions.setVisiblePopover,
+  );
+  const clearVisiblePopover = useStore(
+    (store) => store.sampleActions.clearVisiblePopover,
+  );
+  const visiblePopover = useStore((store) => store.sample.visiblePopover);
+  const timerRef = useRef<number | null>(null);
+
+  const show = useCallback(() => {
+    if (timerRef.current) {
+      return; // Timer already running
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setVisiblePopover(id);
+      timerRef.current = null;
+    }, 250);
+  }, [id, setVisiblePopover]);
+
+  const hide = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    clearVisiblePopover();
+  }, [clearVisiblePopover]);
+
+  // Clear the timeout when component unmounts
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const isShowing = useMemo(() => {
+    return visiblePopover === id;
+  }, [id, visiblePopover]);
+
+  return {
+    show,
+    hide,
+    isShowing,
+  };
+};

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

@@ -187,9 +187,10 @@ export const createLogSlice = (
           state.logsActions.updateLogHeaders(header);
           set((state) => {
             state.log.loadedLog = logFileName;
-          }),
-            // Start polling for pending samples
-            logPolling.startPolling(logFileName);
+          });
+
+          // Start polling for pending samples
+          logPolling.startPolling(logFileName);
         } catch (error) {
           log.error("Error loading log:", error);
           throw error;

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

@@ -283,6 +283,14 @@ function processEvents(sampleData: SampleData, pollingState: PollingState) {
     const resolvedEvent = resolveAttachments<Event>(
       eventData.event,
       pollingState.attachments,
+      (attachmentId: string) => {
+        const snapshot = {
+          eventId: eventData.event_id,
+          attachmentId,
+          available_attachments: Object.keys(pollingState.attachments),
+        };
+        console.warn(`Unable to resolve attachment ${attachmentId}`, snapshot);
+      },
     );
 
     if (existingIndex) {

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

@@ -22,17 +22,27 @@ export interface SampleSlice {
     setSelectedSample: (sample: EvalSample) => void;
     getSelectedSample: () => EvalSample | undefined;
     clearSelectedSample: () => void;
+
     setSampleStatus: (status: SampleStatus) => void;
     setSampleError: (error: Error | undefined) => void;
 
-    setCollapsedEvents: (collapsed: Record<string, true>) => void;
-    collapseEvent: (id: string, collapsed: boolean) => void;
+    setCollapsedEvents: (
+      scope: string,
+      collapsed: Record<string, boolean>,
+    ) => void;
+    collapseEvent: (scope: string, id: string, collapsed: boolean) => void;
     clearCollapsedEvents: () => void;
 
     setCollapsedIds: (key: string, collapsed: Record<string, true>) => void;
     collapseId: (key: string, id: string, collapsed: boolean) => void;
     clearCollapsedIds: (key: string) => void;
 
+    setVisiblePopover: (id: string) => void;
+    clearVisiblePopover: () => void;
+
+    setSelectedOutlineId: (id: string) => void;
+    clearSelectedOutlineId: () => void;
+
     // Loading
     loadSample: (
       logFile: string,
@@ -56,6 +66,8 @@ const initialState: SampleState = {
   sampleStatus: "ok",
   sampleError: undefined,
 
+  visiblePopover: undefined,
+
   // signals that the sample needs to be reloaded
   sampleNeedsReload: 0,
 
@@ -64,6 +76,7 @@ const initialState: SampleState = {
   collapsedEvents: null,
 
   collapsedIdBuckets: {},
+  selectedOutlineId: undefined,
 };
 
 export const createSampleSlice = (
@@ -130,25 +143,37 @@ export const createSampleSlice = (
         set((state) => {
           state.sample.sampleError = error;
         }),
-      setCollapsedEvents: (collapsed: Record<string, true>) => {
+      setCollapsedEvents: (
+        scope: string,
+        collapsed: Record<string, boolean>,
+      ) => {
         set((state) => {
-          state.sample.collapsedEvents = collapsed;
+          if (state.sample.collapsedEvents === null) {
+            state.sample.collapsedEvents = {};
+          }
+          state.sample.collapsedEvents[scope] = collapsed;
         });
       },
       clearCollapsedEvents: () => {
         set((state) => {
-          state.sample.collapsedEvents = null;
+          if (state.sample.collapsedEvents !== null) {
+            state.sample.collapsedEvents = null;
+          }
         });
       },
-      collapseEvent: (id: string, collapsed: boolean) => {
+      collapseEvent: (scope: string, id: string, collapsed: boolean) => {
         set((state) => {
           if (state.sample.collapsedEvents === null) {
             state.sample.collapsedEvents = {};
           }
+          if (!state.sample.collapsedEvents[scope]) {
+            state.sample.collapsedEvents[scope] = {};
+          }
+
           if (collapsed) {
-            state.sample.collapsedEvents[id] = true;
+            state.sample.collapsedEvents[scope][id] = true;
           } else {
-            delete state.sample.collapsedEvents[id];
+            delete state.sample.collapsedEvents[scope][id];
           }
         });
       },
@@ -174,7 +199,26 @@ export const createSampleSlice = (
           delete state.sample.collapsedIdBuckets[key];
         });
       },
-
+      setVisiblePopover: (id: string) => {
+        set((state) => {
+          state.sample.visiblePopover = id;
+        });
+      },
+      clearVisiblePopover: () => {
+        set((state) => {
+          state.sample.visiblePopover = undefined;
+        });
+      },
+      setSelectedOutlineId: (id: string) => {
+        set((state) => {
+          state.sample.selectedOutlineId = id;
+        });
+      },
+      clearSelectedOutlineId: () => {
+        set((state) => {
+          state.sample.selectedOutlineId = undefined;
+        });
+      },
       pollSample: async (logFile: string, sampleSummary: SampleSummary) => {
         // Poll running sample
         const state = get();

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

@@ -237,3 +237,155 @@ export function useRafThrottle<T extends (...args: any[]) => any>(
 
   return throttledCallback;
 }
+
+export function useScrollTrack(
+  elementIds: string[],
+  onElementVisible: (id: string) => void,
+  scrollRef?: RefObject<HTMLElement | null>,
+  options?: { topOffset?: number; checkInterval?: number },
+) {
+  const currentVisibleRef = useRef<string | null>(null);
+  const lastCheckRef = useRef<number>(0);
+  const rafRef = useRef<number | null>(null);
+
+  const findTopmostVisibleElement = useCallback(() => {
+    const container = scrollRef?.current;
+    const containerRect = container?.getBoundingClientRect();
+    const topOffset = options?.topOffset ?? 50;
+
+    // Define viewport bounds
+    const viewportTop = containerRect
+      ? containerRect.top + topOffset
+      : topOffset;
+    const viewportBottom = containerRect
+      ? containerRect.bottom
+      : window.innerHeight;
+    const viewportHeight = viewportBottom - viewportTop;
+
+    // Calculate dynamic threshold based on scroll position
+    let detectionPoint = viewportTop;
+
+    if (container) {
+      // This will track the scroll position and select which element is 'showing'
+      // This is generally the item at the the top of the viewport (threshold).
+      // As we get to the bottom of the scroll area, though, we will actually start
+      // sliding the detection point down to the bottom of the viewport so that every
+      // item can be selected.
+      const scrollHeight = container.scrollHeight;
+      const scrollTop = container.scrollTop;
+      const clientHeight = container.clientHeight;
+      const maxScroll = scrollHeight - clientHeight;
+
+      // Calculate how close we are to the bottom (0 = at top, 1 = at bottom)
+      const scrollProgress = maxScroll > 0 ? scrollTop / maxScroll : 0;
+
+      // Start sliding only in the last 20% of scroll
+      const slideThreshold = 0.8;
+      if (scrollProgress > slideThreshold) {
+        // Calculate how far through the slide zone we are (0 to 1)
+        const slideProgress =
+          (scrollProgress - slideThreshold) / (1 - slideThreshold);
+        // Use a steeper curve (power of 3) for faster transition
+        const easedProgress = Math.pow(slideProgress, 3);
+        // Slide all the way from top to bottom of viewport
+        detectionPoint = viewportTop + viewportHeight * 0.9 * easedProgress;
+      }
+
+      // When fully scrolled to bottom, use bottom of viewport
+      if (scrollProgress >= 0.99) {
+        detectionPoint = viewportBottom - 50; // Slight offset from absolute bottom
+      }
+    }
+
+    let closestId: string | null = null;
+    let closestDistance = Infinity;
+
+    // Create a Set for O(1) lookup
+    const elementIdSet = new Set(elementIds);
+
+    // Find all elements that are actually in the DOM and check if they're our tracked elements
+    const elements = container
+      ? container.querySelectorAll("[id]")
+      : document.querySelectorAll("[id]");
+
+    for (const element of elements) {
+      const id = element.id;
+
+      // Check if this element is one we're tracking
+      if (elementIdSet.has(id)) {
+        const rect = element.getBoundingClientRect();
+
+        // Check if element is in viewport
+        if (rect.bottom >= viewportTop && rect.top <= viewportBottom) {
+          // Calculate distance from detection point to element's vertical center
+          const elementCenter = rect.top + rect.height / 2;
+          const distance = Math.abs(elementCenter - detectionPoint);
+
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestId = id;
+          }
+        }
+      }
+    }
+
+    return closestId;
+  }, [elementIds, scrollRef, options?.topOffset]);
+
+  const checkVisibility = useCallback(() => {
+    const now = Date.now();
+    const checkInterval = options?.checkInterval ?? 100;
+
+    // Throttle checks
+    if (now - lastCheckRef.current < checkInterval) {
+      return;
+    }
+
+    lastCheckRef.current = now;
+    const topmostId = findTopmostVisibleElement();
+
+    if (topmostId !== currentVisibleRef.current) {
+      currentVisibleRef.current = topmostId;
+      if (topmostId) {
+        onElementVisible(topmostId);
+      }
+    }
+  }, [findTopmostVisibleElement, onElementVisible, options?.checkInterval]);
+
+  const handleScroll = useCallback(() => {
+    // Cancel any pending animation frame
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+    }
+
+    // Schedule visibility check on next animation frame
+    rafRef.current = requestAnimationFrame(() => {
+      checkVisibility();
+      rafRef.current = null;
+    });
+  }, [checkVisibility]);
+
+  useEffect(() => {
+    if (elementIds.length === 0) return;
+
+    const scrollElement = scrollRef?.current || window;
+
+    // Initial check
+    checkVisibility();
+
+    // Add scroll listener
+    scrollElement.addEventListener("scroll", handleScroll, { passive: true });
+
+    // Also check periodically for virtual elements that may have appeared
+    const intervalId = setInterval(checkVisibility, 1000);
+
+    // Cleanup
+    return () => {
+      scrollElement.removeEventListener("scroll", handleScroll);
+      clearInterval(intervalId);
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [elementIds, scrollRef, handleScroll, checkVisibility]);
+}

inspect_ai/_view/www/src/utils/attachments.ts

@@ -1,6 +1,7 @@
 export const resolveAttachments = <T>(
   value: T,
   attachments: Record<string, string>,
+  onFailedResolve?: (attachmentId: string) => void,
 ): T => {
   const CONTENT_PROTOCOL = "tc://";
   const ATTACHMENT_PROTOCOL = "attachment://";
@@ -56,6 +57,9 @@ export const resolveAttachments = <T>(
         const attachment = attachments[attachmentId];
 
         // Return the attachment content if it exists, otherwise return the original string
+        if (attachment === undefined && onFailedResolve) {
+          onFailedResolve(attachmentId);
+        }
         return (attachment !== undefined ? attachment : value) as unknown as T;
       }
 
@@ -66,6 +70,9 @@ export const resolveAttachments = <T>(
     if (value.startsWith(ATTACHMENT_PROTOCOL)) {
       const attachmentId = value.slice(ATTACHMENT_PROTOCOL.length);
       const attachment = attachments[attachmentId];
+      if (attachment === undefined && onFailedResolve) {
+        onFailedResolve(attachmentId);
+      }
 
       // Return the attachment content if it exists, otherwise return the original string
       return (attachment !== undefined ? attachment : value) as unknown as T;

inspect_ai/_view/www/src/utils/python.ts

@@ -0,0 +1,18 @@
+/**
+ * Extracts the package and module names from a fully qualified Python module path
+ *
+ * @param name - A Python import path that may include a package name
+ * @returns An object containing the package and module names
+ */
+export const parsePackageName = (name: string): PythonName => {
+  if (name.includes("/")) {
+    const [packageName, moduleName] = name.split("/", 2);
+    return { package: packageName, module: moduleName };
+  }
+  return { package: "", module: name };
+};
+
+export interface PythonName {
+  package: string;
+  module: string;
+}