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

inspect_ai/_view/www/src/workspace/navbar/RunningStatusPanel.module.css

@@ -0,0 +1,32 @@
+.statusContainer {
+  display: inline-block;
+  margin-top: 0.3em;
+}
+
+.status {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.statusText {
+  margin-top: 0.2em;
+}
+
+.metricsRows {
+  margin-top: 0.3em;
+  margin-left: 1.25em;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto;
+  column-gap: 0.5em;
+}
+
+.icon {
+  font-size: var(--inspect-font-size-large);
+  margin-right: 0.3em;
+  margin-top: -0.1em;
+}
+
+.value {
+  font-weight: 600;
+}

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

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { RunningMetric } from "../../api/types";
+import { ApplicationIcons } from "../../appearance/icons";
+
+import { FC } from "react";
+import styles from "./RunningStatusPanel.module.css";
+
+export interface RunningPanelProps {
+  sampleCount: number;
+  displayMetrics?: RunningMetric[];
+}
+
+export const RunningStatusPanel: FC<RunningPanelProps> = ({ sampleCount }) => {
+  return (
+    <div>
+      <div className={clsx(styles.statusContainer)}>
+        <div className={clsx(styles.status)}>
+          <i className={clsx(ApplicationIcons.running, styles.icon)} />
+          <div
+            className={clsx(
+              styles.statusText,
+              "text-style-label",
+              "text-size-smaller",
+            )}
+          >
+            Running ({sampleCount} samples)
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/workspace/navbar/ScoreGrid.module.css

@@ -0,0 +1,35 @@
+.table {
+  margin-bottom: 0;
+}
+
+.scorer,
+.value {
+  padding-top: 0.2em !important;
+  padding-bottom: 0.2em !important;
+}
+
+.label,
+.value {
+  text-align: center;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.label {
+  font-weight: 400;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.scorer {
+  font-weight: 400;
+}
+
+.groupSeparator {
+  padding-top: 2em;
+  border-bottom: hidden;
+}
+
+.tableBody {
+  border-top-color: var(--bs-light-border-subtle);
+}

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

@@ -0,0 +1,117 @@
+import clsx from "clsx";
+import { FC, ReactNode } from "react";
+import { formatPrettyDecimal } from "../../utils/format";
+import { ResultsScorer } from "./ResultsPanel";
+
+import styles from "./ScoreGrid.module.css";
+
+interface ScoreGridProps {
+  scoreGroups: ResultsScorer[][];
+  showReducer?: boolean;
+  className?: string | string[];
+  striped?: boolean;
+}
+
+export const ScoreGrid: FC<ScoreGridProps> = ({
+  scoreGroups,
+  showReducer,
+  className,
+  striped,
+}) => {
+  const columnCount = scoreGroups.reduce((prev, group) => {
+    return Math.max(prev, group[0].metrics.length);
+  }, 0);
+
+  const subTables: ReactNode[] = [];
+
+  let index = 0;
+  for (const scoreGroup of scoreGroups) {
+    const metrics = scoreGroup[0].metrics;
+
+    // Add header row
+
+    const cells: ReactNode[] = [];
+    for (let i = 0; i < columnCount; i++) {
+      if (metrics.length > i) {
+        cells.push(
+          <th
+            className={clsx(
+              "text-style-label",
+              "text-style-secondary",
+              "text-size-small",
+              styles.label,
+            )}
+          >
+            {metrics[i].name}
+          </th>,
+        );
+      } else {
+        cells.push(<td></td>);
+      }
+    }
+
+    const headerRow = (
+      <tr className={clsx(styles.headerRow)}>
+        <td></td>
+        {cells}
+      </tr>
+    );
+    const rows: ReactNode[] = [];
+    scoreGroup.forEach((g) => {
+      const cells: ReactNode[] = [];
+      for (let i = 0; i < columnCount; i++) {
+        if (metrics.length > i) {
+          cells.push(
+            <td className={clsx(styles.value, "text-size-small")}>
+              {formatPrettyDecimal(g.metrics[i].value)}
+            </td>,
+          );
+        } else {
+          cells.push(<td className={clsx(styles.value)}></td>);
+        }
+      }
+
+      rows.push(
+        <tr>
+          <th className={clsx(styles.scorer, "text-size-small")}>
+            {g.scorer} {showReducer && g.reducer ? `(${g.reducer})` : undefined}
+          </th>
+          {cells}
+        </tr>,
+      );
+    });
+
+    subTables.push(
+      <>
+        {index > 0 ? (
+          <tr>
+            <td
+              colSpan={columnCount + 1}
+              className={clsx(styles.groupSeparator)}
+            ></td>
+          </tr>
+        ) : undefined}
+        {headerRow}
+        <tbody className={clsx("table-group-divider", styles.tableBody)}>
+          {rows}
+        </tbody>
+      </>,
+    );
+
+    index++;
+  }
+
+  return (
+    <table
+      className={clsx(
+        className,
+        "table",
+        striped ? "table-striped" : undefined,
+        styles.table,
+        "table-bordered",
+      )}
+    >
+      {subTables}
+    </table>
+  );
+};

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,9 +121,10 @@ export const SecondaryBar: FC<SecondaryBarProps> = ({
 
   return (
     <ExpandablePanel
+      id={"secondary-nav-bar"}
       className={clsx(styles.container, "text-size-small")}
       collapse={true}
-      lines={4}
+      lines={5}
     >
       <div
         className={styles.valueGrid}
@@ -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.module.css

@@ -54,8 +54,9 @@
 
 .backdrop {
   position: fixed;
-  inset: 0; /* top: 0; left: 0; right: 0; bottom: 0; */
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: var(--inspect-glass-color);
+  opacity: var(--inspect-glass-opacity);
   z-index: 9998;
 }
 

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