inspect-ai 0.3.98__py3-none-any.whl → 0.3.100__py3-none-any.whl

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

@@ -0,0 +1,422 @@
+import { Placement } from "@popperjs/core";
+import clsx from "clsx";
+import React, {
+  CSSProperties,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+
+interface PopOverProps {
+  id: string;
+  isOpen: boolean;
+  positionEl: HTMLElement | null;
+  placement?: Placement;
+  showArrow?: boolean;
+  offset?: [number, number];
+  usePortal?: boolean;
+  hoverDelay?: number;
+
+  className?: string | string[];
+  arrowClassName?: string | string[];
+
+  children: ReactNode;
+}
+
+/**
+ * A controlled Popper component for displaying content relative to a reference element
+ */
+export const PopOver: React.FC<PopOverProps> = ({
+  id,
+  isOpen,
+  positionEl,
+  children,
+  placement = "bottom",
+  showArrow = true,
+  offset = [0, 8],
+  className = "",
+  arrowClassName = "",
+  usePortal = true,
+  hoverDelay = 250,
+}) => {
+  const popperRef = useRef<HTMLDivElement | null>(null);
+  const arrowRef = useRef<HTMLDivElement | null>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+    null,
+  );
+
+  // For delayed hover functionality
+  const [shouldShowPopover, setShouldShowPopover] = useState(false);
+  const hoverTimerRef = useRef<number | null>(null);
+  const isMouseMovingRef = useRef(false);
+
+  // Setup hover timer and mouse movement detection
+  useEffect(() => {
+    if (!isOpen || hoverDelay <= 0) {
+      setShouldShowPopover(isOpen);
+      return;
+    }
+
+    const handleMouseMove = () => {
+      isMouseMovingRef.current = true;
+
+      // Clear any existing timer when mouse moves
+      if (hoverTimerRef.current !== null) {
+        window.clearTimeout(hoverTimerRef.current);
+      }
+
+      // Start a new timer to check if mouse has stopped moving
+      hoverTimerRef.current = window.setTimeout(() => {
+        if (isOpen) {
+          isMouseMovingRef.current = false;
+          setShouldShowPopover(true);
+        }
+      }, hoverDelay);
+    };
+
+    const handleMouseLeave = () => {
+      if (hoverTimerRef.current !== null) {
+        window.clearTimeout(hoverTimerRef.current);
+      }
+      isMouseMovingRef.current = false;
+      setShouldShowPopover(false);
+    };
+
+    const handleMouseDown = () => {
+      // Cancel popover on any mouse down
+      if (hoverTimerRef.current !== null) {
+        window.clearTimeout(hoverTimerRef.current);
+      }
+      setShouldShowPopover(false);
+    };
+
+    // Add event listeners to the positionEl (the trigger element)
+    if (positionEl && isOpen) {
+      positionEl.addEventListener("mousemove", handleMouseMove);
+      positionEl.addEventListener("mouseleave", handleMouseLeave);
+
+      // Add document-wide mousedown listener to dismiss on interaction
+      document.addEventListener("mousedown", handleMouseDown);
+      document.addEventListener("click", handleMouseDown);
+
+      // Initial mouse move to start the timer
+      handleMouseMove();
+    } else {
+      setShouldShowPopover(false);
+    }
+
+    return () => {
+      if (positionEl) {
+        positionEl.removeEventListener("mousemove", handleMouseMove);
+        positionEl.removeEventListener("mouseleave", handleMouseLeave);
+      }
+
+      // Clean up the document mousedown listener
+      document.removeEventListener("mousedown", handleMouseDown);
+
+      document.removeEventListener("click", handleMouseDown);
+
+      if (hoverTimerRef.current !== null) {
+        window.clearTimeout(hoverTimerRef.current);
+      }
+    };
+  }, [isOpen, positionEl, hoverDelay]);
+
+  // Effect to create portal container when needed
+  useEffect(() => {
+    // Only create portal when the popover is open
+    if (usePortal && isOpen && shouldShowPopover) {
+      let container = document.getElementById(id);
+
+      if (!container) {
+        container = document.createElement("div");
+        container.id = id;
+        container.style.position = "absolute";
+        container.style.top = "0";
+        container.style.left = "0";
+        container.style.zIndex = "9999";
+        container.style.width = "0";
+        container.style.height = "0";
+        container.style.overflow = "visible";
+
+        document.body.appendChild(container);
+      }
+
+      setPortalContainer(container);
+
+      return () => {
+        // Clean up only when unmounting or when the popover closes
+        if (document.body.contains(container)) {
+          document.body.removeChild(container);
+          setPortalContainer(null);
+        }
+      };
+    }
+
+    return undefined;
+  }, [usePortal, isOpen, shouldShowPopover, id]);
+
+  // Configure modifiers for popper
+  const modifiers = [
+    { name: "offset", options: { offset } },
+    { name: "preventOverflow", options: { padding: 8 } },
+    {
+      name: "arrow",
+      enabled: showArrow,
+      options: {
+        element: arrowRef.current,
+        padding: 5, // This keeps the arrow from getting too close to the corner
+      },
+    },
+    {
+      name: "computeStyles",
+      options: {
+        gpuAcceleration: false,
+        adaptive: true,
+      },
+    },
+    // Ensure popper is positioned correctly with respect to its reference element
+    {
+      name: "flip",
+      options: {
+        fallbackPlacements: ["top", "right", "bottom", "left"],
+      },
+    },
+  ];
+
+  // Use popper hook with modifiers
+  const { styles, attributes, state, update } = usePopper(
+    positionEl,
+    popperRef.current,
+    {
+      placement,
+      strategy: "fixed",
+      modifiers,
+    },
+  );
+
+  // Force update when needed refs change
+  useEffect(() => {
+    if (update && isOpen && shouldShowPopover) {
+      // Need to delay the update slightly to ensure refs are properly set
+      const timer = setTimeout(() => {
+        update();
+      }, 10);
+      return () => clearTimeout(timer);
+    }
+  }, [update, isOpen, shouldShowPopover, showArrow, arrowRef.current]);
+
+  // Define arrow data-* attribute based on placement
+  const getArrowDataPlacement = () => {
+    if (!state || !state.placement) return placement;
+    return state.placement;
+  };
+
+  // Get the actual placement from Popper state
+  const actualPlacement = state?.placement || placement;
+
+  // For a CSS triangle, we use the border trick
+  // A CSS triangle doesn't need separate border styling like a rotated square would
+
+  // Popper container styles
+  const defaultPopperStyles: CSSProperties = {
+    backgroundColor: "var(--bs-body-bg)",
+    padding: "12px",
+    borderRadius: "4px",
+    boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+    border: "1px solid #eee",
+    zIndex: 1200,
+    position: "relative",
+    // Apply opacity transition to smooth the appearance
+    opacity: state?.placement ? 1 : 0,
+    transition: "opacity 0.1s",
+  };
+
+  // Early return if not open or should not show due to hover delay
+  if (!isOpen || (hoverDelay > 0 && !shouldShowPopover)) {
+    return null;
+  }
+
+  // For position-aware rendering
+  const positionedStyle =
+    state && state.styles && state.styles.popper
+      ? {
+          ...styles.popper,
+          opacity: 1,
+        }
+      : {
+          ...styles.popper,
+          opacity: 0,
+          // Position offscreen initially to prevent flicker
+          position: "fixed" as const,
+          top: "-9999px",
+          left: "-9999px",
+        };
+
+  // Create the popper content with position-aware styles
+  const popperContent = (
+    <div
+      ref={popperRef}
+      style={{ ...defaultPopperStyles, ...positionedStyle }}
+      className={clsx(className)}
+      {...attributes.popper}
+    >
+      {children}
+
+      {showArrow && (
+        <>
+          {/* Invisible div for Popper.js to use as reference */}
+          <div
+            ref={arrowRef}
+            style={{ position: "absolute", visibility: "hidden" }}
+            data-placement={getArrowDataPlacement()}
+          />
+
+          {/* Arrow container - positioned by Popper */}
+          <div
+            className={clsx("popper-arrow-container", arrowClassName)}
+            style={{
+              ...styles.arrow,
+              position: "absolute",
+              zIndex: 1,
+              // Size and positioning based on placement - smaller arrow
+              ...(actualPlacement.startsWith("top") && {
+                bottom: "-8px",
+                width: "16px",
+                height: "8px",
+              }),
+              ...(actualPlacement.startsWith("bottom") && {
+                top: "-8px",
+                width: "16px",
+                height: "8px",
+              }),
+              ...(actualPlacement.startsWith("left") && {
+                right: "-8px",
+                width: "8px",
+                height: "16px",
+              }),
+              ...(actualPlacement.startsWith("right") && {
+                left: "-8px",
+                width: "8px",
+                height: "16px",
+              }),
+              // Content positioning
+              overflow: "hidden",
+            }}
+          >
+            {/* Border element (rendered behind) */}
+            {actualPlacement.startsWith("top") && (
+              <div
+                style={{
+                  position: "absolute",
+                  width: 0,
+                  height: 0,
+                  borderStyle: "solid",
+                  borderWidth: "8px 8px 0 8px",
+                  borderColor: "#eee transparent transparent transparent",
+                  top: "0px",
+                  left: "0px",
+                }}
+              />
+            )}
+            {actualPlacement.startsWith("bottom") && (
+              <div
+                style={{
+                  position: "absolute",
+                  width: 0,
+                  height: 0,
+                  borderStyle: "solid",
+                  borderWidth: "0 8px 8px 8px",
+                  borderColor: "transparent transparent #eee transparent",
+                  top: "0px",
+                  left: "0px",
+                }}
+              />
+            )}
+            {actualPlacement.startsWith("left") && (
+              <div
+                style={{
+                  position: "absolute",
+                  width: 0,
+                  height: 0,
+                  borderStyle: "solid",
+                  borderWidth: "8px 0 8px 8px",
+                  borderColor: "transparent transparent transparent #eee",
+                  top: "0px",
+                  left: "0px",
+                }}
+              />
+            )}
+            {actualPlacement.startsWith("right") && (
+              <div
+                style={{
+                  position: "absolute",
+                  width: 0,
+                  height: 0,
+                  borderStyle: "solid",
+                  borderWidth: "8px 8px 8px 0",
+                  borderColor: "transparent #eee transparent transparent",
+                  top: "0px",
+                  left: "0px",
+                }}
+              />
+            )}
+
+            {/* Actual triangle created with CSS borders, slightly smaller and offset to create border effect */}
+            <div
+              style={{
+                position: "absolute",
+                width: 0,
+                height: 0,
+                borderStyle: "solid",
+                backgroundColor: "transparent",
+                // Position relative to border triangle
+                left: "0px",
+                zIndex: 1,
+
+                // Top placement - pointing down
+                ...(actualPlacement.startsWith("top") && {
+                  borderWidth: "7px 7px 0 7px",
+                  borderColor: "white transparent transparent transparent",
+                  top: "0px",
+                }),
+
+                // Bottom placement - pointing up
+                ...(actualPlacement.startsWith("bottom") && {
+                  borderWidth: "0 7px 7px 7px",
+                  borderColor: "transparent transparent white transparent",
+                  top: "1px",
+                }),
+
+                // Left placement - pointing right
+                ...(actualPlacement.startsWith("left") && {
+                  borderWidth: "7px 0 7px 7px",
+                  borderColor: "transparent transparent transparent white",
+                  left: "0px",
+                }),
+
+                // Right placement - pointing left
+                ...(actualPlacement.startsWith("right") && {
+                  borderWidth: "7px 7px 7px 0",
+                  borderColor: "transparent white transparent transparent",
+                  left: "1px",
+                }),
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  // If using portal and the container exists, render through the portal
+  if (usePortal && portalContainer) {
+    return createPortal(popperContent, portalContainer);
+  }
+
+  // Otherwise render normally
+  return popperContent;
+};

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

@@ -13,7 +13,7 @@
 }
 
 .small .dotsContainer {
-  column-gap: 3px;
+  column-gap: 2px;
 }
 
 .medium .dotsContainer {
@@ -34,16 +34,16 @@
 }
 
 .subtle {
-  background-color: var(--bs-primary-bg-subtle);
+  background-color: var(--bs-secondary-bg-subtle);
 }
 
 .primary {
-  background-color: var(--bs-primary);
+  background-color: var(--bs-secondary);
 }
 
 .small .dot {
-  width: 4px;
-  height: 4px;
+  width: 3px;
+  height: 3px;
 }
 
 .medium .dot {
@@ -71,11 +71,11 @@
 @keyframes pulse {
   0%,
   100% {
-    transform: scale(1);
-    opacity: 0.3;
+    transform: scale(0.7);
+    opacity: 0.4;
   }
   50% {
-    transform: scale(1.2);
-    opacity: 1;
+    transform: scale(1);
+    opacity: 0.8;
   }
 }

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

@@ -7,6 +7,7 @@ interface PulsingDotsProps {
   dotsCount?: number;
   subtle?: boolean;
   size?: "small" | "medium" | "large";
+  className?: string | string[];
 }
 
 export const PulsingDots: FC<PulsingDotsProps> = ({
@@ -14,6 +15,7 @@ export const PulsingDots: FC<PulsingDotsProps> = ({
   dotsCount = 3,
   subtle = true,
   size = "small",
+  className,
 }) => {
   return (
     <div
@@ -24,6 +26,7 @@ export const PulsingDots: FC<PulsingDotsProps> = ({
           : size === "medium"
             ? styles.medium
             : styles.large,
+        className,
       )}
       role="status"
     >
@@ -35,7 +38,7 @@ export const PulsingDots: FC<PulsingDotsProps> = ({
               styles.dot,
               subtle ? styles.subtle : styles.primary,
             )}
-            style={{ animationDelay: `${index * 0.15}s` }}
+            style={{ animationDelay: `${index * 0.2}s` }}
           />
         ))}
       </div>

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>
+  );
+};