inspect-ai 0.3.80__py3-none-any.whl → 0.3.82__py3-none-any.whl

inspect_ai/_view/www/src/workspace/navbar/SecondaryBar.tsx

@@ -1,10 +1,10 @@
 import clsx from "clsx";
 import { FC } from "react";
-import { SampleSummary } from "../../api/types";
 import { ExpandablePanel } from "../../components/ExpandablePanel";
 import { LabeledValue } from "../../components/LabeledValue";
 import { EvalDescriptor } from "../../samples/descriptor/types";
 import { scoreFilterItems } from "../../samples/sample-tools/filters";
+import { useEvalDescriptor } from "../../state/hooks";
 import {
   EvalDataset,
   EvalPlan,
@@ -20,9 +20,8 @@ interface SecondaryBarProps {
   evalPlan?: EvalPlan;
   evalResults?: EvalResults;
   evalStats?: EvalStats;
-  evalDescriptor?: EvalDescriptor;
-  samples?: SampleSummary[];
   status?: string;
+  sampleCount?: number;
 }
 
 /**
@@ -33,10 +32,10 @@ export const SecondaryBar: FC<SecondaryBarProps> = ({
   evalPlan,
   evalResults,
   evalStats,
-  samples,
-  evalDescriptor,
   status,
+  sampleCount,
 }) => {
+  const evalDescriptor = useEvalDescriptor();
   if (!evalSpec || status !== "success") {
     return null;
   }
@@ -56,11 +55,11 @@ export const SecondaryBar: FC<SecondaryBarProps> = ({
       <LabeledValue
         key="sb-dataset"
         label="Dataset"
-        className={(styles.staticCol, "text-size-small")}
+        className={clsx(styles.staticCol, "text-size-small")}
       >
         <DatasetSummary
           dataset={evalSpec.dataset}
-          samples={samples}
+          sampleCount={sampleCount}
           epochs={epochs}
         />
       </LabeledValue>
@@ -122,6 +121,7 @@ export const SecondaryBar: FC<SecondaryBarProps> = ({
 
   return (
     <ExpandablePanel
+      id={"secondary-nav-bar"}
       className={clsx(styles.container, "text-size-small")}
       collapse={true}
       lines={4}
@@ -146,16 +146,16 @@ export const SecondaryBar: FC<SecondaryBarProps> = ({
 
 interface DatasetSummaryProps {
   dataset?: EvalDataset;
-  samples?: SampleSummary[];
   epochs: number;
+  sampleCount?: number;
 }
 
 /**
  * A component that displays the dataset
  */
 const DatasetSummary: FC<DatasetSummaryProps> = ({
+  sampleCount,
   dataset,
-  samples,
   epochs,
 }) => {
   if (!dataset) {
@@ -164,15 +164,13 @@ const DatasetSummary: FC<DatasetSummaryProps> = ({
 
   return (
     <div>
-      {samples?.length
-        ? formatDataset(samples.length, epochs, dataset.name)
-        : ""}
+      {sampleCount ? formatDataset(sampleCount, epochs, dataset.name) : ""}
     </div>
   );
 };
 
 interface ScoreSummaryProps {
-  evalDescriptor?: EvalDescriptor;
+  evalDescriptor?: EvalDescriptor | null;
 }
 
 /**

inspect_ai/_view/www/src/workspace/navbar/StatusPanel.tsx

@@ -37,13 +37,17 @@ export const RunningPanel: FC<StatusProps> = ({ sampleCount }) => {
   );
 };
 
-interface StatusPanelProps {
+export interface StatusPanelProps {
   icon: string;
   status: string;
   sampleCount: number;
 }
 
-const StatusPanel: FC<StatusPanelProps> = ({ icon, status, sampleCount }) => {
+export const StatusPanel: FC<StatusPanelProps> = ({
+  icon,
+  status,
+  sampleCount,
+}) => {
   return (
     <div className={styles.statusPanel}>
       <i className={clsx(icon, styles.statusIcon)} style={{}} />

inspect_ai/_view/www/src/workspace/sidebar/LogDirectoryTitleView.tsx

@@ -1,16 +1,16 @@
 import clsx from "clsx";
 import { FC } from "react";
+import { useStore } from "../../state/store";
 import styles from "./LogDirectoryTitleView.module.css";
 
 interface LogDirectoryTitleViewProps {
   log_dir?: string;
-  offcanvas: boolean;
 }
 
 export const LogDirectoryTitleView: FC<LogDirectoryTitleViewProps> = ({
   log_dir,
-  offcanvas,
 }) => {
+  const offCanvas = useStore((state) => state.app.offcanvas);
   if (log_dir) {
     const displayDir = prettyDir(log_dir);
     return (
@@ -28,14 +28,14 @@ export const LogDirectoryTitleView: FC<LogDirectoryTitleViewProps> = ({
           title={displayDir}
           className={clsx("text-size-base", styles.dirname)}
         >
-          {offcanvas ? displayDir : ""}
+          {offCanvas ? displayDir : ""}
         </span>
       </div>
     );
   } else {
     return (
       <span className={clsx("text-size-title")}>
-        {offcanvas ? "Log History" : ""}
+        {offCanvas ? "Log History" : ""}
       </span>
     );
   }

inspect_ai/_view/www/src/workspace/sidebar/Sidebar.tsx

@@ -1,9 +1,11 @@
 import clsx from "clsx";
-import { FC } from "react";
+import { FC, MouseEvent, useCallback, useRef } from "react";
 import { Fragment } from "react/jsx-runtime";
 import { EvalLogHeader, LogFiles } from "../../api/types";
 import { ApplicationIcons } from "../../appearance/icons";
 import { ProgressBar } from "../../components/ProgressBar";
+import { useStatefulScrollPosition } from "../../state/scrolling";
+import { useStore } from "../../state/store";
 import { LogDirectoryTitleView } from "./LogDirectoryTitleView";
 import styles from "./Sidebar.module.css";
 import { SidebarLogEntry } from "./SidebarLogEntry";
@@ -11,8 +13,6 @@ import { SidebarLogEntry } from "./SidebarLogEntry";
 interface SidebarProps {
   logs: LogFiles;
   logHeaders: Record<string, EvalLogHeader>;
-  offcanvas: boolean;
-  setOffcanvas: (offcanvas: boolean) => void;
   loading: boolean;
   selectedIndex: number;
   onSelectedIndexChanged: (index: number) => void;
@@ -21,29 +21,40 @@ interface SidebarProps {
 export const Sidebar: FC<SidebarProps> = ({
   logs,
   logHeaders,
-  offcanvas,
-  setOffcanvas,
   loading,
   selectedIndex,
   onSelectedIndexChanged,
 }) => {
-  const handleToggle = () => {
-    setOffcanvas(!offcanvas);
-  };
+  const setOffCanvas = useStore((state) => state.appActions.setOffcanvas);
+  const offCanvas = useStore((state) => state.app.offcanvas);
+  const handleToggle = useCallback(() => {
+    setOffCanvas(!offCanvas);
+  }, [offCanvas, setOffCanvas]);
+
+  const sidebarContentsRef = useRef(null);
+  useStatefulScrollPosition(sidebarContentsRef, "sidebar-contents", 1000);
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLLIElement>) => {
+      const index = Number((e.currentTarget as HTMLLIElement).dataset.index);
+      onSelectedIndexChanged(index);
+    },
+    [onSelectedIndexChanged],
+  );
 
   return (
     <Fragment>
       {/* Optional backdrop for small screens, appears only when offcanvas is open */}
-      {offcanvas && <div className={styles.backdrop} onClick={handleToggle} />}
+      {offCanvas && <div className={styles.backdrop} onClick={handleToggle} />}
 
       <div
         className={clsx(
           styles.sidebar,
-          offcanvas ? styles.sidebarOpen : styles.sidebarClosed,
+          offCanvas ? styles.sidebarOpen : styles.sidebarClosed,
         )}
       >
         <div className={styles.header}>
-          <LogDirectoryTitleView log_dir={logs.log_dir} offcanvas={offcanvas} />
+          <LogDirectoryTitleView log_dir={logs.log_dir} />
           <button
             onClick={handleToggle}
             className={clsx("btn", styles.toggle)}
@@ -58,7 +69,10 @@ export const Sidebar: FC<SidebarProps> = ({
           <ProgressBar animating={loading} />
         </div>
 
-        <ul className={clsx("list-group", styles.list)}>
+        <ul
+          ref={sidebarContentsRef}
+          className={clsx("list-group", styles.list)}
+        >
           {logs.files.map((file, index) => {
             const logHeader = logHeaders[file.name];
             return (
@@ -70,7 +84,8 @@ export const Sidebar: FC<SidebarProps> = ({
                   styles.item,
                   selectedIndex === index ? styles.active : undefined,
                 )}
-                onClick={() => onSelectedIndexChanged(index)}
+                data-index={index}
+                onClick={handleClick}
               >
                 <SidebarLogEntry
                   logHeader={logHeader}

inspect_ai/_view/www/src/workspace/tabs/InfoTab.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC } from "react";
 import { SampleSummary } from "../../api/types";
 import { MessageBand } from "../../components/MessageBand";
 import { PlanCard } from "../../plan/PlanCard";
@@ -20,6 +20,7 @@ interface PlanTabProps {
   samples?: SampleSummary[];
   evalStatus?: "started" | "error" | "cancelled" | "success";
   evalError?: EvalError;
+  sampleCount?: number;
 }
 
 export const InfoTab: FC<PlanTabProps> = ({
@@ -27,17 +28,12 @@ export const InfoTab: FC<PlanTabProps> = ({
   evalPlan,
   evalResults,
   evalStats,
-  samples,
   evalStatus,
   evalError,
+  sampleCount,
 }) => {
-  const [hidden, setHidden] = useState(false);
-  useEffect(() => {
-    setHidden(false);
-  }, [evalSpec, evalPlan, evalResults, evalStats, samples]);
-
   const showWarning =
-    (!samples || samples.length === 0) &&
+    sampleCount === 0 &&
     evalStatus === "success" &&
     evalSpec?.dataset.samples &&
     evalSpec.dataset.samples > 0;
@@ -46,9 +42,8 @@ export const InfoTab: FC<PlanTabProps> = ({
     <div style={{ width: "100%" }}>
       {showWarning ? (
         <MessageBand
+          id="sample-too-large"
           message="Unable to display samples (this evaluation log may be too large)."
-          hidden={hidden}
-          setHidden={setHidden}
           type="warning"
         />
       ) : (

inspect_ai/_view/www/src/workspace/tabs/JsonTab.tsx

@@ -1,16 +1,15 @@
 import { filename } from "../../utils/path";
 
 import { FC } from "react";
-import { Capabilities } from "../../api/types";
 import { DownloadPanel } from "../../components/DownloadPanel";
 import { JSONPanel } from "../../components/JsonPanel";
+import { useStore } from "../../state/store";
 import styles from "./JsonTab.module.css";
 
 const kJsonMaxSize = 10000000;
 
 interface JsonTabProps {
   logFile?: string;
-  capabilities: Capabilities;
   selected: boolean;
   json: string;
 }
@@ -18,8 +17,9 @@ interface JsonTabProps {
 /**
  * Renders JSON tab
  */
-export const JsonTab: FC<JsonTabProps> = ({ logFile, capabilities, json }) => {
-  if (logFile && json.length > kJsonMaxSize && capabilities.downloadFiles) {
+export const JsonTab: FC<JsonTabProps> = ({ logFile, json }) => {
+  const downloadFiles = useStore((state) => state.capabilities.downloadFiles);
+  if (logFile && json.length > kJsonMaxSize && downloadFiles) {
     // This JSON file is so large we can't really productively render it
     // we should instead just provide a DL link
     const file = `${filename(logFile)}.json`;

inspect_ai/_view/www/src/workspace/tabs/RunningNoSamples.module.css

@@ -0,0 +1,22 @@
+.panel {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  margin-top: 3em;
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 0.3em;
+}
+
+.spinner {
+  border-width: 1px;
+  height: 15px;
+  width: 15px;
+}
+
+.text {
+  margin-top: -2px;
+}

inspect_ai/_view/www/src/workspace/tabs/RunningNoSamples.tsx

@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import { FC } from "react";
+
+import styles from "./RunningNoSamples.module.css";
+
+interface RunningNoSamplesProps {}
+
+export const RunningNoSamples: FC<RunningNoSamplesProps> = () => {
+  return (
+    <div className={clsx(styles.panel)}>
+      <div className={clsx(styles.container, "text-size-smaller")}>
+        <div className={clsx(styles.spinner, "spinner-border")} role="status">
+          <span className={clsx("visually-hidden")}>starting...</span>
+        </div>
+        <div className={clsx(styles.text)}>starting....</div>
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/workspace/tabs/SamplesTab.tsx

@@ -1,135 +1,136 @@
 import {
   FC,
   Fragment,
-  RefObject,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
-import { SampleSummary } from "../../api/types.ts";
-import { EmptyPanel } from "../../components/EmptyPanel.tsx";
-import { InlineSampleDisplay } from "../../samples/InlineSampleDisplay";
-import { SampleDialog } from "../../samples/SampleDialog";
-import { SamplesDescriptor } from "../../samples/descriptor/samplesDescriptor.tsx";
-import { SampleList } from "../../samples/list/SampleList";
-import { SampleMode, ScoreFilter } from "../../types.ts";
-import { EvalSample } from "../../types/log";
+import { NoContentsPanel } from "../../components/NoContentsPanel.tsx";
+import { InlineSampleDisplay } from "../../samples/InlineSampleDisplay.tsx";
+import { SampleDialog } from "../../samples/SampleDialog.tsx";
+import { SampleList } from "../../samples/list/SampleList.tsx";
+import {
+  useFilteredSamples,
+  useGroupBy,
+  useGroupByOrder,
+  useSampleDescriptor,
+  useScore,
+  useTotalSampleCount,
+} from "../../state/hooks.ts";
+import { useStore } from "../../state/store.ts";
+import { RunningNoSamples } from "./RunningNoSamples.tsx";
 import { getSampleProcessor } from "./grouping.ts";
 import { ListItem } from "./types.ts";
 
 interface SamplesTabProps {
-  // Optional props
-  sample?: EvalSample;
-  samples?: SampleSummary[];
-  sampleDescriptor?: SamplesDescriptor;
-  sampleError?: Error;
-
   // Required props
-  sampleMode: SampleMode;
-  groupBy: "epoch" | "sample" | "none";
-  groupByOrder: "asc" | "desc";
-  sampleStatus: string;
-  selectedSampleIndex: number;
-  setSelectedSampleIndex: (index: number) => void;
-  showingSampleDialog: boolean;
-  setShowingSampleDialog: (showing: boolean) => void;
-  selectedSampleTab?: string;
-  setSelectedSampleTab: (tab: string) => void;
-  epoch: string;
-  filter: ScoreFilter;
-  sampleScrollPositionRef: RefObject<number>;
-  setSampleScrollPosition: (position: number) => void;
-  sampleTabScrollRef: RefObject<HTMLDivElement | null>;
+  running: boolean;
 }
 
-export const SamplesTab: FC<SamplesTabProps> = ({
-  sample,
-  samples,
-  sampleMode,
-  groupBy,
-  groupByOrder,
-  sampleDescriptor,
-  sampleStatus,
-  sampleError,
-  selectedSampleIndex,
-  setSelectedSampleIndex,
-  showingSampleDialog,
-  setShowingSampleDialog,
-  selectedSampleTab,
-  setSelectedSampleTab,
-  sampleScrollPositionRef,
-  setSampleScrollPosition,
-  sampleTabScrollRef,
-}) => {
+export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
+  const selectSample = useStore((state) => state.logActions.selectSample);
+  const selectedSampleIndex = useStore(
+    (state) => state.log.selectedSampleIndex,
+  );
+
+  const sampleSummaries = useFilteredSamples();
+  const selectedLogSummary = useStore((state) => state.log.selectedLogSummary);
+  const totalSampleCount = useTotalSampleCount();
+
+  const samplesDescriptor = useSampleDescriptor();
+  const groupBy = useGroupBy();
+  const groupByOrder = useGroupByOrder();
+  const currentScore = useScore();
+
+  const selectedSample = useStore((state) => state.sample.selectedSample);
+
   const [items, setItems] = useState<ListItem[]>([]);
   const [sampleItems, setSampleItems] = useState<ListItem[]>([]);
 
   const sampleListHandle = useRef<VirtuosoHandle | null>(null);
   const sampleDialogRef = useRef<HTMLDivElement>(null);
 
+  const selectedSampleTab = useStore((state) => state.app.tabs.sample);
+  const setSelectedSampleTab = useStore(
+    (state) => state.appActions.setSampleTab,
+  );
+  const showingSampleDialog = useStore((state) => state.app.dialogs.sample);
+  const setShowingSampleDialog = useStore(
+    (state) => state.appActions.setShowingSampleDialog,
+  );
+
   // Shows the sample dialog
   const showSample = useCallback(
     (index: number) => {
-      setSelectedSampleIndex(index);
+      selectSample(index);
       setShowingSampleDialog(true);
     },
-    [setSelectedSampleIndex, setShowingSampleDialog],
+    [selectSample, setShowingSampleDialog],
   );
 
+  // Keep the selected item scrolled into view
+  useEffect(() => {
+    setTimeout(() => {
+      if (sampleListHandle.current) {
+        sampleListHandle.current.scrollIntoView({ index: selectedSampleIndex });
+      }
+    }, 0);
+  }, [selectedSampleIndex]);
+
+  // Focus the dialog when it is shown
   useEffect(() => {
     if (showingSampleDialog) {
       setTimeout(() => {
         sampleDialogRef.current?.focus();
       }, 0);
-    } else {
-      setTimeout(() => {
-        if (sampleListHandle.current) {
-          sampleListHandle.current.scrollToIndex(0);
-        }
-      }, 0);
     }
   }, [showingSampleDialog]);
 
+  const sampleProcessor = useMemo(() => {
+    if (!samplesDescriptor) return undefined;
+
+    return getSampleProcessor(
+      sampleSummaries || [],
+      selectedLogSummary?.eval?.config?.epochs || 1,
+      groupBy,
+      groupByOrder,
+      samplesDescriptor,
+      currentScore,
+    );
+  }, [
+    samplesDescriptor,
+    sampleSummaries,
+    selectedLogSummary?.eval?.config?.epochs,
+    groupBy,
+    groupByOrder,
+    currentScore,
+  ]);
+
   useEffect(() => {
-    const sampleProcessor = sampleDescriptor
-      ? getSampleProcessor(
-          samples || [],
-          groupBy,
-          groupByOrder,
-          sampleDescriptor,
-        )
-      : undefined;
-
-    // Process the samples into the proper data structure
-    const items = samples?.flatMap((sample, index) => {
+    const resolvedSamples = sampleSummaries?.flatMap((sample, index) => {
       const results: ListItem[] = [];
-      const previousSample = index !== 0 ? samples[index - 1] : undefined;
+      const previousSample =
+        index !== 0 ? sampleSummaries[index - 1] : undefined;
       const items = sampleProcessor
         ? sampleProcessor(sample, index, previousSample)
         : [];
+
       results.push(...items);
       return results;
     });
 
-    setItems(items || []);
+    setItems(resolvedSamples || []);
     setSampleItems(
-      items
-        ? items.filter((item) => {
+      resolvedSamples
+        ? resolvedSamples.filter((item) => {
             return item.type === "sample";
           })
         : [],
     );
-  }, [samples, groupBy, groupByOrder, sampleDescriptor]);
-
-  const nextSampleIndex = useCallback(() => {
-    if (selectedSampleIndex < sampleItems.length - 1) {
-      return selectedSampleIndex + 1;
-    } else {
-      return -1;
-    }
-  }, [selectedSampleIndex, sampleItems.length]);
+  }, [sampleSummaries, sampleProcessor]);
 
   const previousSampleIndex = useCallback(() => {
     return selectedSampleIndex > 0 ? selectedSampleIndex - 1 : -1;
@@ -137,68 +138,62 @@ export const SamplesTab: FC<SamplesTabProps> = ({
 
   // Manage the next / previous state the selected sample
   const nextSample = useCallback(() => {
-    const next = nextSampleIndex();
-    if (sampleStatus !== "loading" && next > -1) {
-      setSelectedSampleIndex(next);
+    const next = Math.min(selectedSampleIndex + 1, sampleItems.length - 1);
+    if (next > -1) {
+      selectSample(next);
     }
-  }, [nextSampleIndex, sampleStatus, setSelectedSampleIndex]);
+  }, [selectedSampleIndex, sampleItems, selectSample]);
 
   const previousSample = useCallback(() => {
     const prev = previousSampleIndex();
-    if (sampleStatus !== "loading" && prev > -1) {
-      setSelectedSampleIndex(prev);
+    if (prev > -1) {
+      selectSample(prev);
     }
-  }, [previousSampleIndex, sampleStatus, setSelectedSampleIndex]);
+  }, [previousSampleIndex, selectSample]);
 
   const title =
     selectedSampleIndex > -1 && sampleItems.length > selectedSampleIndex
       ? sampleItems[selectedSampleIndex].label
       : "";
 
-  if (!sampleDescriptor) {
-    return <EmptyPanel />;
+  if (totalSampleCount === 0) {
+    if (running) {
+      return <RunningNoSamples />;
+    } else {
+      return <NoContentsPanel text="No samples" />;
+    }
   } else {
     return (
       <Fragment>
-        {sampleDescriptor && sampleMode === "single" ? (
+        {samplesDescriptor && totalSampleCount === 1 ? (
           <InlineSampleDisplay
             id="sample-display"
-            sample={sample}
-            sampleStatus={sampleStatus}
-            sampleError={sampleError}
-            sampleDescriptor={sampleDescriptor}
             selectedTab={selectedSampleTab}
             setSelectedTab={setSelectedSampleTab}
-            scrollRef={sampleTabScrollRef}
           />
         ) : undefined}
-        {sampleDescriptor && sampleMode === "many" ? (
+        {samplesDescriptor && totalSampleCount > 1 ? (
           <SampleList
             listHandle={sampleListHandle}
             items={items}
-            sampleDescriptor={sampleDescriptor}
-            selectedIndex={selectedSampleIndex}
+            running={running}
             nextSample={nextSample}
             prevSample={previousSample}
             showSample={showSample}
           />
         ) : undefined}
-        <SampleDialog
-          id={String(sample?.id || "")}
-          title={title}
-          sample={sample}
-          sampleStatus={sampleStatus}
-          sampleError={sampleError}
-          sampleDescriptor={sampleDescriptor}
-          showingSampleDialog={showingSampleDialog}
-          setShowingSampleDialog={setShowingSampleDialog}
-          selectedTab={selectedSampleTab}
-          setSelectedTab={setSelectedSampleTab}
-          nextSample={nextSample}
-          prevSample={previousSample}
-          sampleScrollPositionRef={sampleScrollPositionRef}
-          setSampleScrollPosition={setSampleScrollPosition}
-        />
+        {showingSampleDialog ? (
+          <SampleDialog
+            id={String(selectedSample?.id || "")}
+            title={title}
+            showingSampleDialog={showingSampleDialog}
+            setShowingSampleDialog={setShowingSampleDialog}
+            selectedTab={selectedSampleTab}
+            setSelectedTab={setSelectedSampleTab}
+            nextSample={nextSample}
+            prevSample={previousSample}
+          />
+        ) : undefined}
       </Fragment>
     );
   }