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

inspect_ai/_view/www/src/app/samples/transcript/TranscriptVirtualList.tsx

@@ -2,7 +2,6 @@ import { FC, memo, RefObject, useEffect, useMemo } from "react";
 import {
   ApprovalEvent,
   ErrorEvent,
-  Events,
   InfoEvent,
   InputEvent,
   LoggerEvent,
@@ -32,20 +31,22 @@ import { StateEventView } from "./state/StateEventView";
 import { StepEventView } from "./StepEventView";
 import { SubtaskEventView } from "./SubtaskEventView";
 import { ToolEventView } from "./ToolEventView";
-import { EventNode } from "./types";
+import { EventNode, kTranscriptCollapseScope } from "./types";
 
 import { useStore } from "../../../state/store";
 import { SpanEventView } from "./SpanEventView";
 import { TranscriptVirtualListComponent } from "./TranscriptVirtualListComponent";
-import { fixupEventStream, kSandboxSignalName } from "./transform/fixups";
-import { flatTree, treeifyEvents } from "./transform/treeify";
+import { flatTree } from "./transform/treeify";
 
 interface TranscriptVirtualListProps {
   id: string;
-  events: Events;
+  eventNodes: EventNode[];
+  defaultCollapsedIds: Record<string, boolean>;
   initialEventId: string | null;
+  offsetTop?: number;
   scrollRef: RefObject<HTMLDivElement | null>;
   running?: boolean;
+  className?: string | string[];
 }
 
 /**
@@ -53,7 +54,16 @@ interface TranscriptVirtualListProps {
  */
 export const TranscriptVirtualList: FC<TranscriptVirtualListProps> = memo(
   (props) => {
-    let { id, scrollRef, events, running, initialEventId } = props;
+    let {
+      id,
+      scrollRef,
+      eventNodes,
+      defaultCollapsedIds,
+      running,
+      initialEventId,
+      offsetTop,
+      className,
+    } = props;
 
     // The list of events that have been collapsed
     const collapsedEvents = useStore((state) => state.sample.collapsedEvents);
@@ -61,93 +71,39 @@ export const TranscriptVirtualList: FC<TranscriptVirtualListProps> = memo(
       (state) => state.sampleActions.setCollapsedEvents,
     );
 
-    // Normalize Events in a flattened filtered list
-    const { eventNodes, defaultCollapsedIds } = useMemo(() => {
-      // Apply fixups to the event string
-      const resolvedEvents = fixupEventStream(events, !running);
-
-      // Build the event tree
-      const eventTree = treeifyEvents(resolvedEvents, 0);
-
-      // Apply collapse filters to the event tree
-      const defaultCollapsedIds: Record<string, true> = {};
-      const findCollapsibleEvents = (nodes: EventNode[]) => {
-        for (const node of nodes) {
-          if (
-            (node.event.event === "step" ||
-              node.event.event === "span_begin" ||
-              node.event.event === "tool" ||
-              node.event.event === "subtask") &&
-            collapseFilters.some((filter) =>
-              filter(
-                node.event as
-                  | StepEvent
-                  | SpanBeginEvent
-                  | ToolEvent
-                  | SubtaskEvent,
-              ),
-            )
-          ) {
-            defaultCollapsedIds[node.id] = true;
-          }
-
-          // Recursively check children
-          findCollapsibleEvents(node.children);
-        }
-      };
-      findCollapsibleEvents(eventTree);
-
+    const flattenedNodes = useMemo(() => {
       // flattten the event tree
-      const eventNodes = flatTree(
-        eventTree,
-        collapsedEvents || defaultCollapsedIds,
+      return flatTree(
+        eventNodes,
+        (collapsedEvents
+          ? collapsedEvents[kTranscriptCollapseScope]
+          : undefined) || defaultCollapsedIds,
       );
-
-      return { eventNodes, defaultCollapsedIds };
-    }, [events, running, collapsedEvents]);
+    }, [eventNodes, collapsedEvents, defaultCollapsedIds]);
 
     // Update the collapsed events when the default collapsed IDs change
     // This effect only depends on defaultCollapsedIds, not eventNodes
     useEffect(() => {
       // Only initialize collapsedEvents if it's empty
       if (!collapsedEvents && Object.keys(defaultCollapsedIds).length > 0) {
-        setCollapsedEvents(defaultCollapsedIds);
+        setCollapsedEvents(kTranscriptCollapseScope, defaultCollapsedIds);
       }
     }, [defaultCollapsedIds, collapsedEvents, setCollapsedEvents]);
 
     return (
       <TranscriptVirtualListComponent
         id={id}
-        eventNodes={eventNodes}
+        eventNodes={flattenedNodes}
         initialEventId={initialEventId}
+        offsetTop={offsetTop}
         scrollRef={scrollRef}
         running={running}
+        className={className}
       />
     );
   },
 );
 
-const collapseFilters: Array<
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) => boolean
-> = [
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
-    event.type === "solver" && event.name === "system_message",
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) => {
-    if (event.event === "step" || event.event === "span_begin") {
-      return (
-        event.name === kSandboxSignalName ||
-        event.name === "init" ||
-        event.name === "sample_init"
-      );
-    }
-    return false;
-  },
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
-    event.event === "tool" && !event.agent && !event.failed,
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
-    event.event === "subtask",
-];
-
 interface RenderedEventNodeProps {
   node: EventNode;
   className?: string | string[];

inspect_ai/_view/www/src/app/samples/transcript/TranscriptVirtualListComponent.module.css

@@ -1,9 +1,19 @@
 .node {
-  padding-top: 0.7rem;
-  padding-bottom: 1px;
+  padding-top: 0.8rem;
 }
 
 .attached {
   padding-top: 0rem;
-  margin-top: -8px;
+}
+
+.attachedParent {
+  padding-bottom: 0px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: none;
+}
+
+.attachedChild {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }

inspect_ai/_view/www/src/app/samples/transcript/TranscriptVirtualListComponent.tsx

@@ -10,8 +10,10 @@ interface TranscriptVirtualListComponentProps {
   id: string;
   eventNodes: EventNode[];
   initialEventId?: string | null;
+  offsetTop?: number;
   scrollRef?: RefObject<HTMLDivElement | null>;
   running?: boolean;
+  className?: string | string[];
 }
 
 /**
@@ -19,7 +21,15 @@ interface TranscriptVirtualListComponentProps {
  */
 export const TranscriptVirtualListComponent: FC<
   TranscriptVirtualListComponentProps
-> = ({ id, eventNodes, scrollRef, running, initialEventId }) => {
+> = ({
+  id,
+  eventNodes,
+  scrollRef,
+  running,
+  initialEventId,
+  offsetTop,
+  className,
+}) => {
   const initialEventIndex = useMemo(() => {
     if (initialEventId === null || initialEventId === undefined) {
       return undefined;
@@ -35,14 +45,24 @@ export const TranscriptVirtualListComponent: FC<
       const paddingClass = index === 0 ? styles.first : undefined;
 
       const previousIndex = index - 1;
+      const nextIndex = index + 1;
       const previous =
         previousIndex > 0 && previousIndex <= eventNodes.length
           ? eventNodes[previousIndex]
           : undefined;
+      const next =
+        nextIndex < eventNodes.length ? eventNodes[nextIndex] : undefined;
       const attached =
         item.event.event === "tool" &&
         (previous?.event.event === "tool" || previous?.event.event === "model");
+
+      const attachedParent =
+        item.event.event === "model" && next?.event.event === "tool";
       const attachedClass = attached ? styles.attached : undefined;
+      const attachedChildClass = attached ? styles.attachedChild : undefined;
+      const attachedParentClass = attachedParent
+        ? styles.attachedParent
+        : undefined;
 
       return (
         <div
@@ -54,7 +74,10 @@ export const TranscriptVirtualListComponent: FC<
             paddingRight: `${item.depth === 0 ? undefined : ".7em"} `,
           }}
         >
-          <RenderedEventNode node={item} />
+          <RenderedEventNode
+            node={item}
+            className={clsx(attachedParentClass, attachedChildClass)}
+          />
         </div>
       );
     },
@@ -63,10 +86,12 @@ export const TranscriptVirtualListComponent: FC<
 
   return (
     <LiveVirtualList<EventNode>
+      className={className}
       id={id}
       scrollRef={scrollRef}
       data={eventNodes}
       initialTopMostItemIndex={initialEventIndex}
+      offsetTop={offsetTop}
       renderRow={renderRow}
       live={running}
     />

inspect_ai/_view/www/src/app/samples/transcript/event/EventPanel.module.css

@@ -32,6 +32,7 @@
 
 .copyLink {
   font-size: 1.2em;
+  height: 1em;
   opacity: 0;
   padding-left: 0.2em;
   padding-right: 2em;

inspect_ai/_view/www/src/app/samples/transcript/event/EventPanel.tsx

@@ -10,18 +10,18 @@ import {
 import { ApplicationIcons } from "../../../appearance/icons";
 import { EventNavs } from "./EventNavs";
 
-import { useParams } from "react-router-dom";
 import { CopyButton } from "../../../../components/CopyButton";
 import { useCollapseSampleEvent, useProperty } from "../../../../state/hooks";
 import {
-  sampleEventUrl,
   supportsLinking,
   toFullUrl,
+  useSampleEventUrl,
 } from "../../../routing/url";
+import { kTranscriptCollapseScope } from "../types";
 import styles from "./EventPanel.module.css";
 
 interface EventPanelProps {
-  id: string;
+  eventNodeId: string;
   depth: number;
   className?: string | string[];
   title?: string;
@@ -42,7 +42,7 @@ interface ChildProps {
  * Renders the StateEventView component.
  */
 export const EventPanel: FC<EventPanelProps> = ({
-  id,
+  eventNodeId,
   depth,
   className,
   title,
@@ -54,26 +54,21 @@ export const EventPanel: FC<EventPanelProps> = ({
   collapsibleContent,
   collapseControl = "top",
 }) => {
-  const [collapsed, setCollapsed] = useCollapseSampleEvent(id);
+  const [collapsed, setCollapsed] = useCollapseSampleEvent(
+    kTranscriptCollapseScope,
+    eventNodeId,
+  );
   const isCollapsible = (childIds || []).length > 0 || collapsibleContent;
   const useBottomDongle = isCollapsible && collapseControl === "bottom";
 
-  // Get all URL parameters at component level
-  const { logPath, sampleId, epoch } = useParams<{
-    logPath?: string;
-    tabId?: string;
-    sampleId?: string;
-    epoch?: string;
-  }>();
-
+  const sampleEventUrl = useSampleEventUrl(eventNodeId);
   const url =
-    logPath && supportsLinking()
-      ? toFullUrl(sampleEventUrl(id, logPath, sampleId, epoch))
-      : undefined;
+    supportsLinking() && sampleEventUrl ? toFullUrl(sampleEventUrl) : undefined;
 
   const pillId = (index: number) => {
-    return `${id}-nav-pill-${index}`;
+    return `${eventNodeId}-nav-pill-${index}`;
   };
+
   const filteredArrChildren = (
     Array.isArray(children) ? children : [children]
   ).filter((child) => !!child);
@@ -83,9 +78,13 @@ export const EventPanel: FC<EventPanelProps> = ({
   });
   const defaultPillId = defaultPill !== -1 ? pillId(defaultPill) : pillId(0);
 
-  const [selectedNav, setSelectedNav] = useProperty(id, "selectedNav", {
-    defaultValue: defaultPillId,
-  });
+  const [selectedNav, setSelectedNav] = useProperty(
+    eventNodeId,
+    "selectedNav",
+    {
+      defaultValue: defaultPillId,
+    },
+  );
 
   const gridColumns = [];
 
@@ -186,7 +185,7 @@ export const EventPanel: FC<EventPanelProps> = ({
                     ? (child.props as ChildProps)["data-name"] || defaultTitle
                     : defaultTitle;
                 return {
-                  id: `eventpanel-${id}-${index}`,
+                  id: `eventpanel-${eventNodeId}-${index}`,
                   title: title,
                   target: pillId(index),
                 };
@@ -205,7 +204,7 @@ export const EventPanel: FC<EventPanelProps> = ({
 
   const card = (
     <div
-      id={id}
+      id={`event-panel-${eventNodeId}`}
       className={clsx(
         className,
         styles.card,

inspect_ai/_view/www/src/app/samples/transcript/outline/OutlineRow.module.css

@@ -0,0 +1,45 @@
+.eventRow {
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  column-gap: 3px;
+  cursor: pointer;
+}
+
+.eventRow.selected {
+  font-weight: 800;
+}
+
+.eventRow .toggle {
+  font-size: 0.7em;
+  margin-top: 4px;
+}
+
+.eventLink {
+  color: var(--bs-body);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.eventLink:hover {
+  text-decoration: underline;
+  color: var(--bs-link-hover-color);
+}
+
+.label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon {
+  margin-right: 3px;
+}
+
+.progress {
+  margin-left: 0.3em !important;
+}
+
+.popover {
+  min-width: 300px;
+  max-width: 80%;
+}

inspect_ai/_view/www/src/app/samples/transcript/outline/OutlineRow.tsx

@@ -0,0 +1,223 @@
+import clsx from "clsx";
+import { FC, ReactNode, useRef } from "react";
+import { Link } from "react-router-dom";
+import { PopOver } from "../../../../components/PopOver";
+import { PulsingDots } from "../../../../components/PulsingDots";
+import {
+  useCollapseSampleEvent,
+  useSamplePopover,
+} from "../../../../state/hooks";
+import { formatDateTime, formatTime } from "../../../../utils/format";
+import { parsePackageName } from "../../../../utils/python";
+import { ApplicationIcons } from "../../../appearance/icons";
+import { MetaDataGrid } from "../../../content/MetaDataGrid";
+import { useSampleEventUrl } from "../../../routing/url";
+import { kSandboxSignalName } from "../transform/fixups";
+import { EventNode } from "../types";
+import styles from "./OutlineRow.module.css";
+
+export interface OutlineRowProps {
+  node: EventNode;
+  collapseScope: string;
+  running?: boolean;
+  selected?: boolean;
+}
+
+export const OutlineRow: FC<OutlineRowProps> = ({
+  node,
+  collapseScope,
+  running,
+  selected,
+}) => {
+  const [collapsed, setCollapsed] = useCollapseSampleEvent(
+    collapseScope,
+    node.id,
+  );
+  const icon = iconForNode(node);
+  const toggle = toggleIcon(node, collapsed);
+
+  const popoverId = `${node.id}-popover`;
+  const { isShowing } = useSamplePopover(popoverId);
+
+  const ref = useRef(null);
+
+  // Get all URL parameters at component level
+  const sampleEventUrl = useSampleEventUrl(node.id);
+
+  return (
+    <>
+      <div
+        className={clsx(
+          styles.eventRow,
+          "text-size-smallest",
+          selected ? styles.selected : "",
+        )}
+        style={{ paddingLeft: `${node.depth * 0.4}em` }}
+      >
+        <div
+          className={clsx(styles.toggle)}
+          onClick={() => {
+            setCollapsed(!collapsed);
+          }}
+        >
+          {toggle ? <i className={clsx(toggle)} /> : undefined}
+        </div>
+        <div className={clsx(styles.label)} data-depth={node.depth}>
+          {icon ? <i className={clsx(icon, styles.icon)} /> : undefined}
+          {sampleEventUrl ? (
+            <Link
+              to={sampleEventUrl}
+              className={clsx(styles.eventLink)}
+              ref={ref}
+            >
+              {parsePackageName(labelForNode(node)).module}
+            </Link>
+          ) : (
+            <span ref={ref}>{parsePackageName(labelForNode(node)).module}</span>
+          )}
+          {running ? (
+            <PulsingDots
+              size="small"
+              className={clsx(styles.progress)}
+              subtle={false}
+            />
+          ) : undefined}
+        </div>
+      </div>
+      <PopOver
+        id={`${node.id}-popover`}
+        positionEl={ref.current}
+        isOpen={isShowing}
+        className={clsx(styles.popper)}
+        placement="auto-end"
+      >
+        {summarizeNode(node)}
+      </PopOver>
+    </>
+  );
+};
+
+const toggleIcon = (
+  node: EventNode,
+  collapsed: boolean,
+): string | undefined => {
+  if (node.children.length > 0) {
+    return collapsed
+      ? ApplicationIcons.chevron.right
+      : ApplicationIcons.chevron.down;
+  }
+};
+
+const iconForNode = (node: EventNode): string | undefined => {
+  switch (node.event.event) {
+    case "sample_limit":
+      return ApplicationIcons.limits.custom;
+
+    case "score":
+      return ApplicationIcons.scorer;
+
+    case "error":
+      return ApplicationIcons.error;
+  }
+};
+
+const labelForNode = (node: EventNode): string => {
+  if (node.event.event === "span_begin") {
+    switch (node.event.type) {
+      case "solver":
+        return node.event.name;
+      case "tool":
+        return node.event.name;
+      default: {
+        if (node.event.name === kSandboxSignalName) {
+          return "sandbox events";
+        }
+        return node.event.name;
+      }
+    }
+  } else {
+    switch (node.event.event) {
+      case "subtask":
+        return node.event.name;
+      case "approval":
+        switch (node.event.decision) {
+          case "approve":
+            return "approved";
+          case "reject":
+            return "rejected";
+          case "escalate":
+            return "escalated";
+          case "modify":
+            return "modified";
+          case "terminate":
+            return "terminated";
+          default:
+            return node.event.decision;
+        }
+      case "model":
+        return `model${node.event.role ? ` (${node.event.role})` : ""}`;
+      case "score":
+        return "scoring";
+      case "step":
+        if (node.event.name === kSandboxSignalName) {
+          return "sandbox events";
+        }
+        return node.event.name;
+
+      default:
+        return node.event.event;
+    }
+  }
+};
+
+export const summarizeNode = (node: EventNode): ReactNode => {
+  let entries: Record<string, unknown> = {};
+  switch (node.event.event) {
+    case "sample_init":
+      entries = {
+        sample_id: node.event.sample.id,
+        sandbox: node.event.sample.sandbox?.type,
+        started: formatDateTime(new Date(node.event.timestamp)),
+        working_start: formatTime(node.event.working_start),
+      };
+      break;
+
+    case "sample_limit":
+      entries = {
+        type: node.event.type,
+        message: node.event.message,
+        limit: node.event.limit,
+        started: formatDateTime(new Date(node.event.timestamp)),
+        working_start: formatTime(node.event.working_start),
+      };
+      break;
+    case "score":
+      entries = {
+        answer: node.event.score.answer,
+        score: node.event.score.value,
+        started: formatDateTime(new Date(node.event.timestamp)),
+        working_start: formatTime(node.event.working_start),
+      };
+      break;
+    case "span_begin":
+      entries = {
+        name: node.event.name,
+        started: formatDateTime(new Date(node.event.timestamp)),
+        working_start: formatTime(node.event.working_start),
+      };
+      break;
+    default:
+      entries = {
+        started: formatDateTime(new Date(node.event.timestamp)),
+        working_start: formatTime(node.event.working_start),
+      };
+  }
+
+  return (
+    <MetaDataGrid
+      entries={entries}
+      size="mini"
+      className={clsx(styles.popover, "text-size-smallest")}
+    />
+  );
+};

inspect_ai/_view/www/src/app/samples/transcript/outline/TranscriptOutline.module.css

@@ -0,0 +1,10 @@
+.node {
+  display: grid;
+  column-gap: 0.3em;
+  grid-template-columns: max-content 1fr;
+}
+
+.panel {
+  margin-top: 0.65rem;
+  overflow: visible;
+}