inspect-ai 0.3.69__py3-none-any.whl → 0.3.71__py3-none-any.whl

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

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { ReactElement, useState } from "react";
+import { FC, ReactElement, ReactNode, useState } from "react";
 import styles from "./NavPills.module.css";
 
 interface NavPillChildProps {
@@ -11,13 +11,14 @@ interface NavPillsProps {
   children?: ReactElement<NavPillChildProps>[];
 }
 
-export const NavPills: React.FC<NavPillsProps> = ({ children }) => {
-  if (!children?.length) {
-    return null;
+export const NavPills: FC<NavPillsProps> = ({ children }) => {
+  const [activeItem, setActiveItem] = useState(
+    children ? children[0].props["title"] : null,
+  );
+  if (!activeItem || !children) {
+    return undefined;
   }
 
-  const [activeItem, setActiveItem] = useState(children[0].props["title"]);
-
   // Create Nav Pills for each child
   const navPills = children.map((nav, idx) => {
     const title =
@@ -66,10 +67,10 @@ interface NavPillProps {
   title: string;
   activeItem: string;
   setActiveItem: (item: string) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
-const NavPill: React.FC<NavPillProps> = ({
+const NavPill: FC<NavPillProps> = ({
   title,
   activeItem,
   setActiveItem,

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

@@ -1,10 +1,11 @@
+import { FC } from "react";
 import styles from "./ProgressBar.module.css";
 
 interface ProgressBarProps {
   animating: boolean;
 }
 
-export const ProgressBar: React.FC<ProgressBarProps> = ({ animating }) => {
+export const ProgressBar: FC<ProgressBarProps> = ({ animating }) => {
   return (
     <div className={styles.wrapper}>
       <div

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

@@ -1,10 +1,15 @@
 import clsx from "clsx";
 import {
   Children,
+  CSSProperties,
+  FC,
   Fragment,
   isValidElement,
   MouseEvent,
   ReactElement,
+  ReactNode,
+  RefObject,
+  UIEvent,
   useCallback,
   useEffect,
   useRef,
@@ -17,7 +22,7 @@ interface TabSetProps {
   className?: string | string[];
   tabPanelsClassName?: string | string[];
   tabControlsClassName?: string | string;
-  tools?: React.ReactNode;
+  tools?: ReactNode;
   children:
     | ReactElement<TabPanelProps>
     | (ReactElement<TabPanelProps> | null | undefined)[];
@@ -27,19 +32,19 @@ interface TabPanelProps {
   id: string;
   index?: number;
   selected?: boolean;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   scrollable?: boolean;
-  scrollRef?: React.RefObject<HTMLDivElement | null>;
+  scrollRef?: RefObject<HTMLDivElement | null>;
   className?: string | string[];
   scrollPosition?: number;
   setScrollPosition?: (position: number) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
   title: string;
   icon?: string;
   onSelected: (e: MouseEvent<HTMLElement>) => void;
 }
 
-export const TabSet: React.FC<TabSetProps> = ({
+export const TabSet: FC<TabSetProps> = ({
   id,
   type = "tabs",
   className,
@@ -76,9 +81,9 @@ export const TabSet: React.FC<TabSetProps> = ({
 };
 
 // Individual Tab Component
-const Tab: React.FC<{
+const Tab: FC<{
   type?: "tabs" | "pills";
-  tab: React.ReactElement<TabPanelProps>;
+  tab: ReactElement<TabPanelProps>;
   index: number;
   className?: string | string[];
 }> = ({ type = "tabs", tab, index, className }) => {
@@ -114,9 +119,9 @@ const Tab: React.FC<{
 };
 
 // Tab Panels Container
-const TabPanels: React.FC<{
+const TabPanels: FC<{
   id: string;
-  tabs: React.ReactElement<TabPanelProps>[];
+  tabs: ReactElement<TabPanelProps>[];
   className?: string | string[];
 }> = ({ id, tabs, className }) => (
   <div className={clsx("tab-content", className)} id={`${id}-content`}>
@@ -127,7 +132,7 @@ const TabPanels: React.FC<{
 );
 
 // Individual Tab Panel
-export const TabPanel: React.FC<TabPanelProps> = ({
+export const TabPanel: FC<TabPanelProps> = ({
   id,
   selected,
   style,
@@ -139,7 +144,8 @@ export const TabPanel: React.FC<TabPanelProps> = ({
   children,
 }) => {
   const tabContentsId = computeTabContentsId(id);
-  const tabContentsRef = scrollRef || useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const tabContentsRef = scrollRef || panelRef;
 
   useEffect(() => {
     if (!selected || scrollPosition === undefined || !tabContentsRef.current)
@@ -162,7 +168,7 @@ export const TabPanel: React.FC<TabPanelProps> = ({
 
   // Handle scrolling
   const onScroll = useCallback(
-    (e: React.UIEvent<HTMLDivElement>) => {
+    (e: UIEvent<HTMLDivElement>) => {
       if (setScrollPosition) {
         setScrollPosition(e.currentTarget.scrollTop);
       }
@@ -190,7 +196,7 @@ export const TabPanel: React.FC<TabPanelProps> = ({
 };
 
 // Tab Tools Component
-const TabTools: React.FC<{ tools?: React.ReactNode }> = ({ tools }) => (
+const TabTools: FC<{ tools?: ReactNode }> = ({ tools }) => (
   <div className={clsx("tab-tools", moduleStyles.tabTools)}>{tools}</div>
 );
 
@@ -199,11 +205,11 @@ const computeTabId = (id: string, index: number) => `${id}-${index}`;
 const computeTabContentsId = (id: string) => `${id}-contents`;
 
 const flattenChildren = (
-  children: React.ReactNode,
+  children: ReactNode,
 ): ReactElement<TabPanelProps>[] => {
   return Children.toArray(children).flatMap((child) => {
     if (isValidElement(child)) {
-      const element = child as React.ReactElement<any>;
+      const element = child as ReactElement<any>;
 
       if (element.type === Fragment) {
         return flattenChildren(element.props.children);

inspect_ai/_view/www/src/index.tsx

@@ -74,7 +74,7 @@ function filterLargeSample(state: ApplicationState) {
 
   const estimatedTotalSize = estimateSize(state.selectedSample.messages);
   if (estimatedTotalSize > 400000) {
-    const { selectedSample, ...filteredState } = state; // eslint-disable-line
+    const { selectedSample, ...filteredState } = state;
     return filteredState;
   } else {
     return state;
@@ -91,7 +91,7 @@ function filterLargeSelectedLog(state: ApplicationState) {
     state.selectedLog.contents.sampleSummaries,
   );
   if (estimatedSize > 400000) {
-    const { selectedLog, ...filteredState } = state; // eslint-disable-line
+    const { selectedLog, ...filteredState } = state;
     return filteredState;
   } else {
     return state;

inspect_ai/_view/www/src/metadata/MetaDataGrid.tsx

@@ -1,12 +1,12 @@
 import clsx from "clsx";
-import { Fragment } from "react";
+import { CSSProperties, FC, Fragment } from "react";
 import styles from "./MetadataGrid.module.css";
 import { RenderedContent } from "./RenderedContent";
 
 interface MetadataGridProps {
   id?: string;
   className?: string | string[];
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   entries: Record<string, unknown>;
   plain?: boolean;
 }
@@ -14,7 +14,7 @@ interface MetadataGridProps {
 /**
  * Renders the MetaDataView component.
  */
-export const MetaDataGrid: React.FC<MetadataGridProps> = ({
+export const MetaDataGrid: FC<MetadataGridProps> = ({
   id,
   entries,
   className,
@@ -27,12 +27,14 @@ export const MetaDataGrid: React.FC<MetadataGridProps> = ({
     const id = `${baseId}-value-${index}`;
     return (
       <Fragment key={`${baseId}-record-${index}`}>
-        <div
-          style={{
-            gridColumn: "1 / -1",
-            borderBottom: `${!plain ? "solid 1px var(--bs-light-border-subtle" : ""}`,
-          }}
-        ></div>
+        {index !== 0 ? (
+          <div
+            style={{
+              gridColumn: "1 / -1",
+              borderBottom: `${!plain ? "solid 1px var(--bs-light-border-subtle" : ""}`,
+            }}
+          ></div>
+        ) : undefined}
         <div
           className={clsx(
             `${baseId}-key`,

inspect_ai/_view/www/src/metadata/MetaDataView.tsx

@@ -1,10 +1,11 @@
 import clsx from "clsx";
+import { CSSProperties, FC } from "react";
 import styles from "./MetaDataView.module.css";
 import { RenderedContent } from "./RenderedContent";
 
 interface MetadataViewProps {
   id?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   entries: Record<string, unknown>;
   tableOptions?: string;
   compact?: boolean;
@@ -14,7 +15,7 @@ interface MetadataViewProps {
 /**
  * Renders the MetaDataView component.
  */
-export const MetaDataView: React.FC<MetadataViewProps> = ({
+export const MetaDataView: FC<MetadataViewProps> = ({
   id,
   style,
   entries,

inspect_ai/_view/www/src/metadata/MetadataGrid.module.css

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: max-content auto;
   column-gap: 1em;
+  row-gap: 0.2em;
 }
 
 .cell {

inspect_ai/_view/www/src/metadata/RenderedContent.tsx

@@ -7,6 +7,8 @@ import { MetaDataView } from "./MetaDataView";
 
 import clsx from "clsx";
 import React, { Fragment, JSX } from "react";
+import JSONPanel from "../components/JsonPanel";
+import { isJson } from "../utils/json";
 import styles from "./RenderedContent.module.css";
 import { Buckets, ContentRenderer } from "./types";
 
@@ -79,6 +81,20 @@ const contentRenderers: Record<string, ContentRenderer> = {
       };
     },
   },
+  JsonString: {
+    bucket: Buckets.first,
+    canRender: (entry) => {
+      if (typeof entry.value === "string") {
+        const trimmed = entry.value.trim();
+        return isJson(trimmed);
+      }
+      return false;
+    },
+    render: (_id, entry) => {
+      const obj = JSON.parse(entry.value);
+      return { rendered: <JSONPanel data={obj as Record<string, unknown>} /> };
+    },
+  },
   Model: {
     bucket: Buckets.intermediate,
     canRender: (entry) => {
@@ -237,7 +253,6 @@ const contentRenderers: Record<string, ContentRenderer> = {
     },
     render: (id, entry) => {
       // Generate a json preview
-      console.log({ entry });
       return {
         rendered: (
           <MetaDataView

inspect_ai/_view/www/src/plan/DatasetDetailView.tsx

@@ -2,14 +2,15 @@ import clsx from "clsx";
 import { MetaDataView } from "../metadata/MetaDataView";
 import { EvalDataset } from "../types/log";
 
+import { CSSProperties, FC } from "react";
 import styles from "./DatasetDetailView.module.css";
 
 interface DatasetDetailViewProps {
   dataset: EvalDataset;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
-export const DatasetDetailView: React.FC<DatasetDetailViewProps> = ({
+export const DatasetDetailView: FC<DatasetDetailViewProps> = ({
   dataset,
   style,
 }) => {

inspect_ai/_view/www/src/plan/DetailStep.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import { MetaDataView } from "../metadata/MetaDataView";
 import styles from "./DatasetDetailView.module.css";
 
@@ -9,7 +10,7 @@ interface DetailStepProps {
   className?: string | string[];
 }
 
-export const DetailStep: React.FC<DetailStepProps> = ({
+export const DetailStep: FC<DetailStepProps> = ({
   icon,
   name,
   params,

inspect_ai/_view/www/src/plan/PlanCard.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../appearance/icons";
 import { Card, CardBody, CardHeader } from "../components/Card";
 import { EvalPlan, EvalScore, EvalSpec } from "../types/log";
@@ -12,11 +13,7 @@ interface PlanCardProps {
 /**
  * Renders the plan card
  */
-export const PlanCard: React.FC<PlanCardProps> = ({
-  evalSpec,
-  evalPlan,
-  scores,
-}) => {
+export const PlanCard: FC<PlanCardProps> = ({ evalSpec, evalPlan, scores }) => {
   return (
     <Card>
       <CardHeader icon={ApplicationIcons.config} label="Config" />

inspect_ai/_view/www/src/plan/PlanDetailView.tsx

@@ -7,6 +7,7 @@ import { ScorerDetailView } from "./ScorerDetailView";
 import { SolversDetailView } from "./SolverDetailView";
 
 import clsx from "clsx";
+import { FC, ReactNode } from "react";
 import styles from "./PlanDetailView.module.css";
 
 interface PlanDetailViewProps {
@@ -15,7 +16,7 @@ interface PlanDetailViewProps {
   scores?: EvalScore[];
 }
 
-export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
+export const PlanDetailView: FC<PlanDetailViewProps> = ({
   evaluation,
   plan,
   scores,
@@ -88,7 +89,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
   const taskColumns: {
     title: string;
     className: string | string[];
-    contents: React.ReactNode;
+    contents: ReactNode;
   }[] = [];
   taskColumns.push({
     title: "Dataset",
@@ -145,7 +146,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
   const metadataColumns: {
     title: string;
     className: string;
-    contents: React.ReactNode;
+    contents: ReactNode;
   }[] = [];
   const cols = colCount(
     metadataColumns,
@@ -297,14 +298,10 @@ const colCount = (...other: unknown[]) => {
 interface PlanColumnProps {
   title: string;
   className: string | string[];
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-const PlanColumn: React.FC<PlanColumnProps> = ({
-  title,
-  className,
-  children,
-}) => {
+const PlanColumn: FC<PlanColumnProps> = ({ title, className, children }) => {
   return (
     <div className={clsx(className)}>
       <div

inspect_ai/_view/www/src/plan/ScorerDetailView.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import { ApplicationIcons } from "../appearance/icons";
 import styles from "./DatasetDetailView.module.css";
 import { DetailStep } from "./DetailStep";
@@ -9,7 +10,7 @@ interface ScorerDetailViewProps {
   params: Record<string, unknown>;
 }
 
-export const ScorerDetailView: React.FC<ScorerDetailViewProps> = ({
+export const ScorerDetailView: FC<ScorerDetailViewProps> = ({
   name,
   scores,
   params,

inspect_ai/_view/www/src/plan/SolverDetailView.tsx

@@ -1,15 +1,15 @@
 import clsx from "clsx";
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import { ApplicationIcons } from "../appearance/icons";
 import { Steps } from "../types/log";
 import { DetailStep } from "./DetailStep";
 import styles from "./SolverDetailView.module.css";
 
-interface SolversDetailView {
+interface SolversDetailViewProps {
   steps: Steps;
 }
 
-export const SolversDetailView: React.FC<SolversDetailView> = ({ steps }) => {
+export const SolversDetailView: FC<SolversDetailViewProps> = ({ steps }) => {
   const separator = (
     <div className={clsx(styles.items, "text-size-small", styles.separator)}>
       <i className={ApplicationIcons.arrows.right} />

inspect_ai/_view/www/src/samples/InlineSampleDisplay.tsx

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { FC, RefObject } from "react";
 import { ErrorPanel } from "../components/ErrorPanel";
 import { ProgressBar } from "../components/ProgressBar";
 import { EvalSample } from "../types/log";
@@ -21,7 +21,7 @@ interface InlineSampleDisplayProps {
 /**
  * Inline Sample Display
  */
-export const InlineSampleDisplay: React.FC<InlineSampleDisplayProps> = ({
+export const InlineSampleDisplay: FC<InlineSampleDisplayProps> = ({
   id,
   sample,
   sampleStatus,

inspect_ai/_view/www/src/samples/SampleDialog.tsx

@@ -1,7 +1,7 @@
 import { ApplicationIcons } from "../appearance/icons";
 import { LargeModal, ModalTool, ModalTools } from "../components/LargeModal";
 
-import { Ref, RefObject, useCallback, useMemo, useRef } from "react";
+import { FC, Ref, RefObject, useCallback, useMemo, useRef } from "react";
 import { ErrorPanel } from "../components/ErrorPanel";
 import { EvalSample } from "../types/log";
 import { SampleDisplay } from "./SampleDisplay";
@@ -27,7 +27,7 @@ interface SampleDialogProps {
 /**
  * Inline Sample Display
  */
-export const SampleDialog: React.FC<SampleDialogProps> = ({
+export const SampleDialog: FC<SampleDialogProps> = ({
   id,
   title,
   sample,
@@ -84,7 +84,7 @@ export const SampleDialog: React.FC<SampleDialogProps> = ({
           break;
       }
     },
-    [prevSample, nextSample],
+    [prevSample, nextSample, setShowingSampleDialog],
   );
 
   const onHide = useCallback(() => {

inspect_ai/_view/www/src/samples/SampleDisplay.module.css

@@ -9,7 +9,7 @@
 .metadataPanel {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
+  align-items: stretch;
   gap: 1em;
   padding-left: 0;
   margin-top: 0.5em;
@@ -27,3 +27,11 @@
 .noTop {
   margin-top: 0;
 }
+
+.timePanel {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  grid-template-rows: auto;
+  column-gap: 0.5em;
+  min-width: 200px;
+}

inspect_ai/_view/www/src/samples/SampleDisplay.tsx

@@ -10,7 +10,7 @@ import { ToolButton } from "../components/ToolButton";
 import { SampleScoreView } from "./scores/SampleScoreView";
 
 import clsx from "clsx";
-import { Fragment, MouseEvent, RefObject } from "react";
+import { FC, Fragment, MouseEvent, RefObject } from "react";
 import { Card, CardBody, CardHeader } from "../components/Card";
 import { EmptyPanel } from "../components/EmptyPanel";
 import { JSONPanel } from "../components/JsonPanel";
@@ -24,6 +24,7 @@ import {
 } from "../constants";
 import { EvalSample } from "../types/log";
 import { ModelTokenTable } from "../usage/ModelTokenTable";
+import { formatTime } from "../utils/format";
 import { printHeadingHtml, printHtml } from "../utils/print";
 import { ChatViewVirtualList } from "./chat/ChatViewVirtualList";
 import { SamplesDescriptor } from "./descriptor/samplesDescriptor";
@@ -43,7 +44,7 @@ interface SampleDisplayProps {
 /**
  * Component to display a sample with relevant context and visibility control.
  */
-export const SampleDisplay: React.FC<SampleDisplayProps> = ({
+export const SampleDisplay: FC<SampleDisplayProps> = ({
   id,
   sample,
   sampleDescriptor,
@@ -180,7 +181,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
         {sampleMetadatas.length > 0 ? (
           <TabPanel
             id={kSampleMetdataTabId}
-            className="sample-tab"
+            className={clsx("sample-tab")}
             title="Metadata"
             onSelected={onSelectedTab}
             selected={selectedTab === kSampleMetdataTabId}
@@ -228,6 +229,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
 
 const metadataViewsForSample = (id: string, sample: EvalSample) => {
   const sampleMetadatas = [];
+
   if (sample.model_usage && Object.keys(sample.model_usage).length > 0) {
     sampleMetadatas.push(
       <Card key={`sample-usage-${id}`}>
@@ -242,6 +244,31 @@ const metadataViewsForSample = (id: string, sample: EvalSample) => {
     );
   }
 
+  if (
+    sample.total_time !== undefined &&
+    sample.total_time !== null &&
+    sample.working_time !== undefined &&
+    sample.working_time !== null
+  ) {
+    sampleMetadatas.push(
+      <Card key={`sample-time-${id}`}>
+        <CardHeader label="Time" />
+        <CardBody>
+          <div className={clsx(styles.timePanel, "text-size-smaller")}>
+            <div className={clsx("text-style-label", "text-style-secondary")}>
+              Working
+            </div>
+            <div>{formatTime(sample.working_time)}</div>
+            <div className={clsx("text-style-label", "text-style-secondary")}>
+              Total
+            </div>
+            <div>{formatTime(sample.total_time)}</div>
+          </div>
+        </CardBody>
+      </Card>,
+    );
+  }
+
   if (Object.keys(sample?.metadata).length > 0) {
     sampleMetadatas.push(
       <Card key={`sample-metadata-${id}`}>

inspect_ai/_view/www/src/samples/SampleSummaryView.module.css

@@ -22,3 +22,7 @@
 .wrap {
   word-wrap: anywhere;
 }
+
+.titled:hover {
+  cursor: pointer;
+}

inspect_ai/_view/www/src/samples/SampleSummaryView.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
 import { MarkdownDiv } from "../components/MarkdownDiv";
-import { EvalSample } from "../types/log";
-import { arrayToString, inputString } from "../utils/format";
+import { EvalSample, WorkingTime } from "../types/log";
+import { arrayToString, formatTime, inputString } from "../utils/format";
 import { SamplesDescriptor } from "./descriptor/samplesDescriptor";
 import { FlatSampleError } from "./error/FlatSampleErrorView";
 
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import styles from "./SampleSummaryView.module.css";
 
 interface SampleSummaryViewProps {
@@ -20,12 +20,13 @@ interface SummaryColumn {
   size: string;
   center?: boolean;
   clamp?: boolean;
+  title?: string;
 }
 
 /**
  * Component to display a sample with relevant context and visibility control.
  */
-export const SampleSummaryView: React.FC<SampleSummaryViewProps> = ({
+export const SampleSummaryView: FC<SampleSummaryViewProps> = ({
   parent_id,
   sample,
   sampleDescriptor,
@@ -46,6 +47,7 @@ export const SampleSummaryView: React.FC<SampleSummaryViewProps> = ({
     sampleDescriptor?.messageShape.normalized.limit > 0
       ? Math.max(0.15, sampleDescriptor.messageShape.normalized.limit)
       : 0;
+  const timeSize = sample.working_time || sample.total_time ? 0.15 : 0;
   const idSize = Math.max(
     2,
     Math.min(10, sampleDescriptor?.messageShape.raw.id),
@@ -110,6 +112,23 @@ export const SampleSummaryView: React.FC<SampleSummaryViewProps> = ({
     });
   }
 
+  const toolTip = (working_time?: WorkingTime) => {
+    if (working_time === undefined || working_time === null) {
+      return undefined;
+    }
+    return `Working time: ${formatTime(working_time)}`;
+  };
+
+  if (sample.total_time) {
+    columns.push({
+      label: "Time",
+      value: formatTime(sample.total_time),
+      size: `${timeSize}fr`,
+      center: true,
+      title: toolTip(sample.working_time),
+    });
+  }
+
   if (sample?.limit && limitSize > 0) {
     columns.push({
       label: "Limit",
@@ -151,8 +170,10 @@ export const SampleSummaryView: React.FC<SampleSummaryViewProps> = ({
               "text-style-label",
               "text-style-secondary",
               "text-size-base",
+              col.title ? styles.titled : undefined,
               col.center ? styles.centerLabel : undefined,
             )}
+            title={col.title}
           >
             {col.label}
           </div>