inspect-ai 0.3.81__py3-none-any.whl → 0.3.83__py3-none-any.whl

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

@@ -2,17 +2,19 @@ import clsx from "clsx";
 import {
   CSSProperties,
   FC,
+  memo,
   ReactNode,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from "react";
 import { ApplicationIcons } from "../appearance/icons";
+import { useCollapsedState } from "../state/hooks";
 import { useResizeObserver } from "../utils/dom";
 import "./ExpandablePanel.css";
 
 interface ExpandablePanelProps {
+  id: string;
   collapse: boolean;
   border?: boolean;
   lines?: number;
@@ -20,72 +22,64 @@ interface ExpandablePanelProps {
   className?: string | string[];
 }
 
-export const ExpandablePanel: FC<ExpandablePanelProps> = ({
-  collapse,
-  border,
-  lines = 15,
-  children,
-  className,
-}) => {
-  const [isCollapsed, setIsCollapsed] = useState(collapse);
-  const [showToggle, setShowToggle] = useState(false);
-  const lineHeightRef = useRef<number>(0);
+export const ExpandablePanel: FC<ExpandablePanelProps> = memo(
+  ({ id, collapse, border, lines = 15, children, className }) => {
+    const [collapsed, setCollapsed] = useCollapsedState(id, collapse);
 
-  useEffect(() => {
-    setIsCollapsed(collapse);
-  }, [collapse]);
+    const [showToggle, setShowToggle] = useState(false);
+    const lineHeightRef = useRef<number>(0);
 
-  const checkOverflow = useCallback(
-    (entry: ResizeObserverEntry) => {
-      const element = entry.target as HTMLDivElement;
+    const checkOverflow = useCallback(
+      (entry: ResizeObserverEntry) => {
+        const element = entry.target as HTMLDivElement;
 
-      // Calculate line height if we haven't yet
-      if (!lineHeightRef.current) {
-        const computedStyle = window.getComputedStyle(element);
-        lineHeightRef.current = parseInt(computedStyle.lineHeight) || 16; // fallback to 16px if can't get line height
-      }
+        // Calculate line height if we haven't yet
+        if (!lineHeightRef.current) {
+          const computedStyle = window.getComputedStyle(element);
+          lineHeightRef.current = parseInt(computedStyle.lineHeight) || 16; // fallback to 16px if can't get line height
+        }
 
-      const maxCollapsedHeight = lines * lineHeightRef.current;
-      const contentHeight = element.scrollHeight;
+        const maxCollapsedHeight = lines * lineHeightRef.current;
+        const contentHeight = element.scrollHeight;
 
-      setShowToggle(contentHeight > maxCollapsedHeight);
-    },
-    [lines],
-  );
+        setShowToggle(contentHeight > maxCollapsedHeight);
+      },
+      [lines],
+    );
+    const contentRef = useResizeObserver(checkOverflow);
 
-  const contentRef = useResizeObserver(checkOverflow);
+    const baseStyles = {
+      overflow: "hidden",
+      ...(collapsed && {
+        maxHeight: `${lines}em`,
+      }),
+    };
 
-  const baseStyles = {
-    overflow: "hidden",
-    ...(isCollapsed && {
-      maxHeight: `${lines}em`,
-    }),
-  };
+    return (
+      <div className={clsx(className)}>
+        <div
+          style={baseStyles}
+          ref={contentRef}
+          className={clsx(
+            "expandable-panel",
+            collapsed ? "expandable-collapsed" : undefined,
+            border ? "expandable-bordered" : undefined,
+          )}
+        >
+          {children}
+        </div>
 
-  return (
-    <div className={clsx(className)}>
-      <div
-        style={baseStyles}
-        ref={contentRef}
-        className={clsx(
-          "expandable-panel",
-          isCollapsed ? "expandable-collapsed" : undefined,
-          border ? "expandable-bordered" : undefined,
+        {showToggle && (
+          <MoreToggle
+            collapsed={collapsed}
+            setCollapsed={setCollapsed}
+            border={!border}
+          />
         )}
-      >
-        {children}
       </div>
-
-      {showToggle && (
-        <MoreToggle
-          collapsed={isCollapsed}
-          setCollapsed={setIsCollapsed}
-          border={!border}
-        />
-      )}
-    </div>
-  );
-};
+    );
+  },
+);
 
 interface MoreToggleProps {
   collapsed: boolean;
@@ -105,13 +99,14 @@ const MoreToggle: FC<MoreToggleProps> = ({
     ? ApplicationIcons["expand-down"]
     : ApplicationIcons.collapse.up;
 
+  const handleClick = useCallback(() => {
+    setCollapsed(!collapsed);
+  }, [setCollapsed, collapsed]);
+
   return (
     <div className={`more-toggle ${border ? "bordered" : ""}`} style={style}>
       <div className="more-toggle-container">
-        <button
-          className="btn more-toggle-button"
-          onClick={() => setCollapsed(!collapsed)}
-        >
+        <button className="btn more-toggle-button" onClick={handleClick}>
           <i className={icon} />
           {text}
         </button>

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

@@ -1,13 +1,13 @@
 import { FC, KeyboardEvent, useCallback, useEffect, useRef } from "react";
 import { ApplicationIcons } from "../appearance/icons";
+import { useStore } from "../state/store";
 import "./FindBand.css";
 
-interface FindBandProps {
-  hideBand: () => void;
-}
+interface FindBandProps {}
 
-export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
+export const FindBand: FC<FindBandProps> = () => {
   const searchBoxRef = useRef<HTMLInputElement>(null);
+  const storeHideFind = useStore((state) => state.appActions.hideFind);
 
   useEffect(() => {
     setTimeout(() => {
@@ -84,14 +84,22 @@ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Escape") {
-        hideBand();
+        storeHideFind();
       } else if (e.key === "Enter") {
         handleSearch(false);
       }
     },
-    [hideBand, handleSearch],
+    [storeHideFind, handleSearch],
   );
 
+  const showSearch = useCallback(() => {
+    handleSearch(true);
+  }, [handleSearch]);
+
+  const hideSearch = useCallback(() => {
+    handleSearch(false);
+  }, [handleSearch]);
+
   return (
     <div className="findBand">
       <input
@@ -105,7 +113,7 @@ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
         type="button"
         title="Previous match"
         className="btn next"
-        onClick={() => handleSearch(true)}
+        onClick={showSearch}
       >
         <i className={ApplicationIcons.arrows.up} />
       </button>
@@ -113,7 +121,7 @@ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
         type="button"
         title="Next match"
         className="btn prev"
-        onClick={() => handleSearch(false)}
+        onClick={hideSearch}
       >
         <i className={ApplicationIcons.arrows.down} />
       </button>
@@ -121,7 +129,7 @@ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
         type="button"
         title="Close"
         className="btn close"
-        onClick={hideBand}
+        onClick={storeHideFind}
       >
         <i className={ApplicationIcons.close} />
       </button>

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

@@ -133,7 +133,7 @@ export const HumanBaselineView: FC<HumanBaselineViewProps> = ({
           />
         </div>
         <div className={"asciinema-body"}>
-          <LightboxCarousel slides={player_fns} />
+          <LightboxCarousel id="ascii-cinema" slides={player_fns} />
         </div>
       </div>
     </div>

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

@@ -1,20 +1,18 @@
 import clsx from "clsx";
-import { highlightElement } from "prismjs";
-import React, { useEffect, useMemo, useRef } from "react";
+import { CSSProperties, FC, useMemo } from "react";
+import { usePrismHighlight } from "../state/hooks";
 import "./JsonPanel.css";
 
-const kPrismRenderMaxSize = 250000;
-
 interface JSONPanelProps {
   id?: string;
   data?: unknown;
   json?: string;
   simple?: boolean;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   className?: string | string[];
 }
 
-export const JSONPanel: React.FC<JSONPanelProps> = ({
+export const JSONPanel: FC<JSONPanelProps> = ({
   id,
   json,
   data,
@@ -22,30 +20,22 @@ export const JSONPanel: React.FC<JSONPanelProps> = ({
   style,
   className,
 }) => {
-  const codeRef = useRef<HTMLElement>(null);
   const sourceCode = useMemo(() => {
     return json || JSON.stringify(resolveBase64(data), undefined, 2);
   }, [json, data]);
-
-  useEffect(() => {
-    if (sourceCode.length < kPrismRenderMaxSize && codeRef.current) {
-      highlightElement(codeRef.current);
-    }
-  }, [sourceCode]);
+  const prismParentRef = usePrismHighlight(sourceCode);
 
   return (
-    <pre
-      className={clsx("json-panel", simple ? "simple" : "", className)}
-      style={style}
-    >
-      <code
-        id={id}
-        ref={codeRef}
-        className={clsx("source-code", "language-javascript")}
+    <div ref={prismParentRef}>
+      <pre
+        className={clsx("json-panel", simple ? "simple" : "", className)}
+        style={style}
       >
-        {sourceCode}
-      </code>
-    </pre>
+        <code id={id} className={clsx("source-code", "language-javascript")}>
+          {sourceCode}
+        </code>
+      </pre>
+    </div>
   );
 };
 

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

@@ -1,15 +1,7 @@
 import clsx from "clsx";
 import { ProgressBar } from "./ProgressBar";
 
-import {
-  FC,
-  ReactNode,
-  RefObject,
-  UIEvent,
-  useCallback,
-  useEffect,
-  useRef,
-} from "react";
+import { FC, ReactNode, RefObject, useRef } from "react";
 import styles from "./LargeModal.module.css";
 
 export interface ModalTool {
@@ -35,8 +27,6 @@ interface LargeModalProps {
   onkeyup: (e: any) => void;
   onHide: () => void;
   scrollRef: RefObject<HTMLDivElement | null>;
-  initialScrollPositionRef: RefObject<number>;
-  setInitialScrollPosition: (position: number) => void;
   children: ReactNode;
 }
 
@@ -51,8 +41,6 @@ export const LargeModal: FC<LargeModalProps> = ({
   visible,
   onHide,
   showProgress,
-  initialScrollPositionRef,
-  setInitialScrollPosition,
   scrollRef,
 }) => {
   // The footer
@@ -67,27 +55,6 @@ export const LargeModal: FC<LargeModalProps> = ({
   const modalRef = useRef(null);
   scrollRef = scrollRef || modalRef;
 
-  useEffect(() => {
-    if (scrollRef.current) {
-      setTimeout(() => {
-        if (
-          scrollRef.current &&
-          initialScrollPositionRef.current &&
-          scrollRef.current.scrollTop !== initialScrollPositionRef?.current
-        ) {
-          scrollRef.current.scrollTop = initialScrollPositionRef.current;
-        }
-      }, 0);
-    }
-  }, []);
-
-  const onScroll = useCallback(
-    (e: UIEvent<HTMLDivElement>) => {
-      setInitialScrollPosition(e.currentTarget.scrollTop);
-    },
-    [setInitialScrollPosition],
-  );
-
   return (
     <div
       id={id}
@@ -149,7 +116,7 @@ export const LargeModal: FC<LargeModalProps> = ({
             </button>
           </div>
           <ProgressBar animating={showProgress} />
-          <div className={"modal-body"} ref={scrollRef} onScroll={onScroll}>
+          <div className={"modal-body"} ref={scrollRef}>
             {children}
           </div>
           {modalFooter}

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

@@ -1,6 +1,7 @@
 import clsx from "clsx";
-import { FC, ReactNode, useCallback, useEffect, useState } from "react";
+import { FC, MouseEvent, ReactNode, useCallback, useEffect } from "react";
 import { ApplicationIcons } from "../appearance/icons";
+import { useProperty } from "../state/hooks";
 import styles from "./LightboxCarousel.module.css";
 
 interface Slide {
@@ -9,16 +10,25 @@ interface Slide {
 }
 
 interface LightboxCarouselProps {
+  id: string;
   slides: Slide[];
 }
 
 /**
  * LightboxCarousel component provides a carousel with lightbox functionality.
  */
-export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
+export const LightboxCarousel: FC<LightboxCarouselProps> = ({ id, slides }) => {
+  const [isOpen, setIsOpen] = useProperty(id, "isOpen", {
+    defaultValue: false,
+  });
+
+  const [currentIndex, setCurrentIndex] = useProperty(id, "currentIndex", {
+    defaultValue: 0,
+  });
+
+  const [showOverlay, setShowOverlay] = useProperty(id, "showOverlay", {
+    defaultValue: false,
+  });
 
   const openLightbox = useCallback(
     (index: number) => {
@@ -28,7 +38,7 @@ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
       // Slight delay before setting isOpen so the fade-in starts from opacity: 0
       setTimeout(() => setIsOpen(true), 10);
     },
-    [setCurrentIndex, setShowOverlay],
+    [setIsOpen],
   );
 
   const closeLightbox = useCallback(() => {
@@ -46,13 +56,11 @@ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
   }, [isOpen, showOverlay, setShowOverlay]);
 
   const showNext = useCallback(() => {
-    setCurrentIndex((prev) => {
-      return (prev + 1) % slides.length;
-    });
+    setCurrentIndex(currentIndex + 1);
   }, [slides, setCurrentIndex]);
 
   const showPrev = useCallback(() => {
-    setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
+    setCurrentIndex((currentIndex - 1 + slides.length) % slides.length);
   }, [slides, setCurrentIndex]);
 
   // Keyboard Navigation
@@ -73,6 +81,13 @@ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
     return () => window.removeEventListener("keyup", handleKeyUp);
   }, [isOpen, showNext, showPrev]);
 
+  const handleThumbClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      const index = Number((e.currentTarget as HTMLDivElement).dataset.index);
+      openLightbox(index);
+    },
+    [openLightbox],
+  );
   return (
     <div className={clsx("lightbox-carousel-container")}>
       <div className={clsx(styles.carouselThumbs)}>
@@ -80,8 +95,9 @@ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
           return (
             <div
               key={index}
+              data-index={index}
               className={clsx(styles.carouselThumb)}
-              onClick={() => openLightbox(index)}
+              onClick={handleThumbClick}
             >
               <div>{slide.label}</div>
               <div>

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

@@ -0,0 +1,16 @@
+.button {
+  display: flex;
+  border: none;
+  flex-direction: row;
+  background-color: unset;
+  color: var(--bs-link-color);
+}
+
+.button:hover {
+  color: var(--bs-link-hover-color);
+  cursor: pointer;
+}
+
+.label {
+  margin-left: 0.4em;
+}

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

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import { FC } from "react";
+import styles from "./LinkButton.module.css";
+
+interface LinkButtonProps {
+  id?: string;
+  text?: string;
+  icon?: string;
+  onClick: () => void;
+  className?: string | string[];
+}
+
+/**
+ * LightboxCarousel component provides a carousel with lightbox functionality.
+ */
+export const LinkButton: FC<LinkButtonProps> = ({
+  id,
+  text,
+  icon,
+  className,
+  onClick,
+}) => {
+  return (
+    <button
+      id={id}
+      onClick={onClick}
+      className={clsx(className, styles.button, "text-size-smaller")}
+    >
+      {icon ? <i className={clsx(icon)}></i> : undefined}
+      {text ? <div className={clsx(styles.label)}>{text}</div> : undefined}
+    </button>
+  );
+};

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

@@ -0,0 +1,11 @@
+.progressContainer {
+  width: 100%;
+  display: flex;
+  align-content: flex-start;
+  justify-content: flex-start;
+  margin-left: 2.5em;
+}
+
+.progressText {
+  margin-left: 0.4em;
+}