inspect-ai 0.3.96__py3-none-any.whl → 0.3.97__py3-none-any.whl

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

@@ -5,23 +5,33 @@ import {
   ReactElement,
   ReactNode,
   useCallback,
+  useState,
 } from "react";
 import { ApplicationIcons } from "../../../appearance/icons";
 import { EventNavs } from "./EventNavs";
 
-import { useProperty } from "../../../../state/hooks";
+import { useParams } from "react-router-dom";
+import { CopyButton } from "../../../../components/CopyButton";
+import { useCollapseSampleEvent, useProperty } from "../../../../state/hooks";
+import {
+  sampleEventUrl,
+  supportsLinking,
+  toFullUrl,
+} from "../../../routing/url";
 import styles from "./EventPanel.module.css";
 
 interface EventPanelProps {
   id: string;
+  depth: number;
   className?: string | string[];
   title?: string;
   subTitle?: string;
   text?: string;
   icon?: string;
-  collapse?: boolean;
   children?: ReactNode | ReactNode[];
-  running?: boolean;
+  childIds?: string[];
+  collapsibleContent?: boolean;
+  collapseControl?: "top" | "bottom";
 }
 
 interface ChildProps {
@@ -33,19 +43,33 @@ interface ChildProps {
  */
 export const EventPanel: FC<EventPanelProps> = ({
   id,
+  depth,
   className,
   title,
   subTitle,
   text,
   icon,
-  collapse,
   children,
+  childIds,
+  collapsibleContent,
+  collapseControl = "top",
 }) => {
-  const [isCollapsed, setCollapsed] = useProperty(id, "collapsed", {
-    defaultValue: !!collapse,
-  });
+  const [collapsed, setCollapsed] = useCollapseSampleEvent(id);
+  const isCollapsible = (childIds || []).length > 0 || collapsibleContent;
+  const useBottomDongle = isCollapsible && collapseControl === "bottom";
 
-  const hasCollapse = collapse !== undefined;
+  // Get all URL parameters at component level
+  const { logPath, sampleId, epoch } = useParams<{
+    logPath?: string;
+    tabId?: string;
+    sampleId?: string;
+    epoch?: string;
+  }>();
+
+  const url =
+    logPath && supportsLinking()
+      ? toFullUrl(sampleEventUrl(id, logPath, sampleId, epoch))
+      : undefined;
 
   const pillId = (index: number) => {
     return `${id}-nav-pill-${index}`;
@@ -66,7 +90,7 @@ export const EventPanel: FC<EventPanelProps> = ({
   const gridColumns = [];
 
   // chevron
-  if (hasCollapse) {
+  if (isCollapsible && !useBottomDongle) {
     gridColumns.push("minmax(0, max-content)");
   }
 
@@ -77,31 +101,39 @@ export const EventPanel: FC<EventPanelProps> = ({
 
   // title
   gridColumns.push("minmax(0, max-content)");
+  // id
+  if (url) {
+    gridColumns.push("minmax(0, max-content)");
+  }
   gridColumns.push("auto");
   gridColumns.push("minmax(0, max-content)");
   gridColumns.push("minmax(0, max-content)");
 
   const toggleCollapse = useCallback(() => {
-    setCollapsed(!isCollapsed);
-  }, [setCollapsed, isCollapsed]);
+    setCollapsed(!collapsed);
+  }, [setCollapsed, collapsed, childIds]);
+
+  const [mouseOver, setMouseOver] = useState(false);
 
   const titleEl =
     title || icon || filteredArrChildren.length > 1 ? (
       <div
         title={subTitle}
-        className={clsx("text-size-small")}
+        className={clsx("text-size-small", mouseOver ? styles.hover : "")}
         style={{
           display: "grid",
           gridTemplateColumns: gridColumns.join(" "),
           columnGap: "0.3em",
-          cursor: hasCollapse ? "pointer" : undefined,
+          cursor: isCollapsible && !useBottomDongle ? "pointer" : undefined,
         }}
+        onMouseEnter={() => setMouseOver(true)}
+        onMouseLeave={() => setMouseOver(false)}
       >
-        {hasCollapse ? (
+        {isCollapsible && !useBottomDongle ? (
           <i
             onClick={toggleCollapse}
             className={
-              isCollapsed
+              collapsed
                 ? ApplicationIcons.chevron.right
                 : ApplicationIcons.chevron.down
             }
@@ -126,17 +158,26 @@ export const EventPanel: FC<EventPanelProps> = ({
         >
           {title}
         </div>
+        {url ? (
+          <CopyButton
+            value={url}
+            icon={ApplicationIcons.link}
+            className={clsx(styles.copyLink)}
+          />
+        ) : (
+          ""
+        )}
         <div onClick={toggleCollapse}></div>
         <div
           className={clsx("text-style-secondary", styles.label)}
           onClick={toggleCollapse}
         >
-          {isCollapsed ? text : ""}
+          {collapsed ? text : ""}
         </div>
         <div className={styles.navs}>
-          {(!hasCollapse || !isCollapsed) &&
-          filteredArrChildren &&
-          filteredArrChildren.length > 1 ? (
+          {isCollapsible && collapsibleContent && collapsed ? (
+            ""
+          ) : filteredArrChildren && filteredArrChildren.length > 1 ? (
             <EventNavs
               navs={filteredArrChildren.map((child, index) => {
                 const defaultTitle = `Tab ${index}`;
@@ -163,33 +204,58 @@ export const EventPanel: FC<EventPanelProps> = ({
     );
 
   const card = (
-    <>
-      <div id={id} className={clsx(className, styles.card)}>
-        {titleEl}
+    <div
+      id={id}
+      className={clsx(
+        className,
+        styles.card,
+        depth === 0 ? styles.root : undefined,
+      )}
+    >
+      {titleEl}
+      <div
+        className={clsx(
+          "tab-content",
+          styles.cardContent,
+          isCollapsible && collapsed && collapsibleContent
+            ? styles.hidden
+            : undefined,
+        )}
+      >
+        {filteredArrChildren?.map((child, index) => {
+          const id = pillId(index);
+          const isSelected = id === selectedNav;
+
+          return (
+            <div
+              key={`children-${id}-${index}`}
+              id={id}
+              className={clsx("tab-pane", "show", isSelected ? "active" : "")}
+            >
+              {child}
+            </div>
+          );
+        })}
+      </div>
+
+      {isCollapsible && useBottomDongle ? (
         <div
-          className={clsx(
-            "tab-content",
-            styles.cardContent,
-            hasCollapse && isCollapsed ? styles.hidden : undefined,
-          )}
+          className={clsx(styles.bottomDongle, "text-size-smallest")}
+          onClick={toggleCollapse}
         >
-          {filteredArrChildren?.map((child, index) => {
-            const id = pillId(index);
-            const isSelected = id === selectedNav;
-
-            return (
-              <div
-                key={`children-${id}-${index}`}
-                id={id}
-                className={clsx("tab-pane", "show", isSelected ? "active" : "")}
-              >
-                {child}
-              </div>
-            );
-          })}
+          <i
+            className={clsx(
+              collapsed
+                ? ApplicationIcons.chevron.right
+                : ApplicationIcons.chevron.down,
+              styles.dongleIcon,
+            )}
+          />
+          transcript ({childIds?.length}{" "}
+          {childIds?.length === 1 ? "event" : "events"})
         </div>
-      </div>
-    </>
+      ) : undefined}
+    </div>
   );
   return card;
 };

inspect_ai/_view/www/src/app/samples/transcript/state/StateEventView.tsx

@@ -16,12 +16,13 @@ import {
   StoreSpecificRenderableTypes,
 } from "./StateEventRenderers";
 
-import { FC, useMemo } from "react";
+import { FC, useEffect, useMemo } from "react";
+import { useStore } from "../../../../state/store";
+import { EventNode } from "../types";
 import styles from "./StateEventView.module.css";
 
 interface StateEventViewProps {
-  id: string;
-  event: StateEvent | StoreEvent;
+  eventNode: EventNode<StateEvent | StoreEvent>;
   isStore?: boolean;
   className?: string | string[];
 }
@@ -30,11 +31,12 @@ interface StateEventViewProps {
  * Renders the StateEventView component.
  */
 export const StateEventView: FC<StateEventViewProps> = ({
-  id,
-  event,
-  isStore = false,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
+  const id = eventNode.id;
+
   const summary = useMemo(() => {
     return summarizeChanges(event.changes);
   }, [event.changes]);
@@ -56,19 +58,28 @@ export const StateEventView: FC<StateEventViewProps> = ({
   // and as a result may be decorated with additional properties, etc..., resulting in DOM elements
   // appearing attached to state.
   const changePreview = useMemo(() => {
+    const isStore = eventNode.event.event === "store";
     return generatePreview(event.changes, structuredClone(after), isStore);
-  }, [event.changes, after, isStore]);
+  }, [event.changes, after]);
   // Compute the title
   const title = event.event === "state" ? "State Updated" : "Store Updated";
 
+  const collapseEvent = useStore((state) => state.sampleActions.collapseEvent);
+  useEffect(() => {
+    if (changePreview === undefined) {
+      collapseEvent(id, true);
+    }
+  }, [changePreview, collapseEvent]);
+
   return (
     <EventPanel
       id={id}
+      depth={eventNode.depth}
       title={title}
       className={className}
       subTitle={formatDateTime(new Date(event.timestamp))}
       text={!changePreview ? summary : undefined}
-      collapse={changePreview === undefined ? true : undefined}
+      collapsibleContent={true}
     >
       {changePreview ? (
         <div data-name="Summary" className={clsx(styles.summary)}>

inspect_ai/_view/www/src/app/samples/transcript/transform/treeify.ts

@@ -2,9 +2,18 @@ import { Events } from "../../../../@types/log";
 import { EventNode, EventType } from "../types";
 import {
   ACTION_BEGIN,
-  ET_SPAN_BEGIN,
-  ET_SPAN_END,
-  ET_STEP,
+  SPAN_BEGIN,
+  SPAN_END,
+  STATE,
+  STEP,
+  STORE,
+  SUBTASK,
+  TOOL,
+  TYPE_AGENT,
+  TYPE_HANDOFF,
+  TYPE_SOLVER,
+  TYPE_SUBTASK,
+  TYPE_TOOL,
   hasSpans,
 } from "./utils";
 
@@ -17,19 +26,33 @@ type TreeifyFunction = (
 
 export function treeifyEvents(events: Events, depth: number): EventNode[] {
   const useSpans = hasSpans(events);
-  const treeFn = useSpans ? treeifyFnSpan : treeifyFnStep;
+  const pathIndices: number[] = [];
 
   const rootNodes: EventNode[] = [];
   const stack: EventNode[] = [];
 
   const addNode = (event: EventType): EventNode => {
-    const node = new EventNode(event, stack.length + depth);
+    const currentDepth = stack.length;
+
+    // Track sibling count for the parent node
+    if (pathIndices.length <= currentDepth) {
+      pathIndices.push(0);
+    } else {
+      pathIndices[currentDepth]++;
+      // Reset deeper levels if coming back up the stack
+      pathIndices.length = currentDepth + 1;
+    }
+
+    // Create a new node
+    const idPath = pathIndices.slice(0, currentDepth + 1).join(".");
+    const node = new EventNode(idPath, event, currentDepth + depth);
     if (stack.length > 0) {
       const parentNode = stack[stack.length - 1];
       parentNode.children.push(node);
     } else {
       rootNodes.push(node);
     }
+
     return node;
   };
 
@@ -38,13 +61,12 @@ export function treeifyEvents(events: Events, depth: number): EventNode[] {
   };
 
   const popStack = (): void => {
-    if (stack.length > 0) {
-      stack.pop();
-    }
+    stack.pop();
+    pathIndices.pop();
   };
 
   events.forEach((event) => {
-    treeFn(event, addNode, pushStack, popStack);
+    treeifyFn(event, addNode, pushStack, popStack);
   });
 
   if (useSpans) {
@@ -54,14 +76,14 @@ export function treeifyEvents(events: Events, depth: number): EventNode[] {
   }
 }
 
-const treeifyFnStep: TreeifyFunction = (
+const treeifyFn: TreeifyFunction = (
   event: EventType,
   addNode: (event: EventType) => EventNode,
   pushStack: (node: EventNode) => void,
   popStack: () => void,
 ): void => {
   switch (event.event) {
-    case ET_STEP:
+    case STEP:
       if (event.action === ACTION_BEGIN) {
         // Starting a new step
         const node = addNode(event);
@@ -71,40 +93,55 @@ const treeifyFnStep: TreeifyFunction = (
         popStack();
       }
       break;
-    case ET_SPAN_BEGIN: {
-      // These shoudn't be here, but throw away
-      break;
-    }
-    case ET_SPAN_END: {
-      // These shoudn't be here, but throw away
-      break;
-    }
-    default:
-      // An event
-      addNode(event);
-      break;
-  }
-};
-
-const treeifyFnSpan: TreeifyFunction = (
-  event: EventType,
-  addNode: (event: EventType) => EventNode,
-  pushStack: (node: EventNode) => void,
-  popStack: () => void,
-): void => {
-  switch (event.event) {
-    case ET_STEP:
-      // strip steps
-      break;
-    case ET_SPAN_BEGIN: {
+    case SPAN_BEGIN: {
       const node = addNode(event);
       pushStack(node);
       break;
     }
-    case ET_SPAN_END: {
+    case SPAN_END: {
       popStack();
       break;
     }
+    case TOOL:
+      {
+        const node = addNode(event);
+
+        // In the span world, the first child will be a span of type tool
+        if (
+          event.events.length > 0 &&
+          (event.events[0].event !== SPAN_BEGIN ||
+            event.events[0].type !== TYPE_TOOL)
+        ) {
+          // Expand the children
+          pushStack(node);
+          for (const child of event.events) {
+            treeifyFn(child, addNode, pushStack, popStack);
+          }
+          popStack();
+        }
+      }
+
+      break;
+    case SUBTASK:
+      {
+        const node = addNode(event);
+
+        // In the span world, the first child will be a span of type tool
+        if (
+          event.events.length > 0 &&
+          (event.events[0].event !== SPAN_BEGIN ||
+            event.events[0].type !== TYPE_SUBTASK)
+        ) {
+          // Expand the children
+          pushStack(node);
+          for (const child of event.events) {
+            treeifyFn(child, addNode, pushStack, popStack);
+          }
+          popStack();
+        }
+      }
+
+      break;
     default:
       // An event
       addNode(event);
@@ -122,50 +159,50 @@ const treeNodeTransformers: TreeNodeTransformer[] = [
   {
     name: "unwrap_tools",
     matches: (node) =>
-      node.event.event === "span_begin" && node.event.type === "tool",
-    process: (node) => elevateChildNode(node, "tool") || node,
+      node.event.event === SPAN_BEGIN && node.event.type === TYPE_TOOL,
+    process: (node) => elevateChildNode(node, TYPE_TOOL) || node,
   },
   {
     name: "unwrap_subtasks",
     matches: (node) =>
-      node.event.event === "span_begin" && node.event.type === "subtask",
-    process: (node) => elevateChildNode(node, "subtask") || node,
+      node.event.event === SPAN_BEGIN && node.event.type === TYPE_SUBTASK,
+    process: (node) => elevateChildNode(node, TYPE_SUBTASK) || node,
   },
   {
     name: "unwrap_agent_solver",
     matches: (node) =>
-      node.event.event === "span_begin" &&
-      node.event["type"] === "solver" &&
+      node.event.event === SPAN_BEGIN &&
+      node.event["type"] === TYPE_SOLVER &&
       node.children.length === 2 &&
-      node.children[0].event.event === "span_begin" &&
-      node.children[0].event.type === "agent" &&
-      node.children[1].event.event === "state",
+      node.children[0].event.event === SPAN_BEGIN &&
+      node.children[0].event.type === TYPE_AGENT &&
+      node.children[1].event.event === STATE,
 
     process: (node) => skipFirstChildNode(node),
   },
   {
     name: "unwrap_agent_solver w/store",
     matches: (node) =>
-      node.event.event === "span_begin" &&
-      node.event["type"] === "solver" &&
+      node.event.event === SPAN_BEGIN &&
+      node.event["type"] === TYPE_SOLVER &&
       node.children.length === 3 &&
-      node.children[0].event.event === "span_begin" &&
-      node.children[0].event.type === "agent" &&
-      node.children[1].event.event === "state" &&
-      node.children[2].event.event === "store",
+      node.children[0].event.event === SPAN_BEGIN &&
+      node.children[0].event.type === TYPE_AGENT &&
+      node.children[1].event.event === STATE &&
+      node.children[2].event.event === STORE,
     process: (node) => skipFirstChildNode(node),
   },
   {
     name: "unwrap_handoff",
     matches: (node) =>
-      node.event.event === "span_begin" &&
-      node.event["type"] === "handoff" &&
+      node.event.event === SPAN_BEGIN &&
+      node.event["type"] === TYPE_HANDOFF &&
       node.children.length === 2 &&
-      node.children[0].event.event === "tool" &&
-      node.children[1].event.event === "store" &&
+      node.children[0].event.event === TOOL &&
+      node.children[1].event.event === STORE &&
       node.children[0].children.length === 2 &&
-      node.children[0].children[0].event.event === "span_begin" &&
-      node.children[0].children[0].event.type === "agent",
+      node.children[0].children[0].event.event === SPAN_BEGIN &&
+      node.children[0].children[0].event.type === TYPE_AGENT,
     process: (node) => skipThisNode(node),
   },
 ];
@@ -217,7 +254,7 @@ const elevateChildNode = (
 
   // Process the remaining children
   targetNode.depth = node.depth;
-  targetNode.children = reduceDepth(remainingChildren);
+  targetNode.children = setDepth(remainingChildren, node.depth + 1);
 
   // No need to update the event itself (events have been deprecated
   // and more importantly we drive children / transcripts using the tree structure itself
@@ -249,3 +286,34 @@ const reduceDepth = (nodes: EventNode[], depth: number = 1): EventNode[] => {
     return node;
   });
 };
+
+const setDepth = (nodes: EventNode[], depth: number): EventNode[] => {
+  return nodes.map((node) => {
+    if (node.children.length > 0) {
+      node.children = setDepth(node.children, depth + 1);
+    }
+    node.depth = depth;
+    return node;
+  });
+};
+
+/**
+ * Flatten the tree structure into a flat array of EventNode objects
+ * Each node in the result will have its children set properly
+ * @param events - The events to flatten
+ * @param depth - The current depth in the tree
+ * @returns An array of EventNode objects
+ */
+export const flatTree = (
+  eventNodes: EventNode[],
+  collapsed: Record<string, true> | null,
+): EventNode[] => {
+  const result: EventNode[] = [];
+  for (const node of eventNodes) {
+    result.push(node);
+    if (collapsed === null || collapsed[node.id] !== true) {
+      result.push(...flatTree(node.children, collapsed));
+    }
+  }
+  return result;
+};

inspect_ai/_view/www/src/app/samples/transcript/transform/utils.ts

@@ -1,11 +1,21 @@
 import { Events } from "../../../../@types/log";
 
-export const ET_STEP = "step";
+export const STEP = "step";
 export const ACTION_BEGIN = "begin";
 
-export const ET_SPAN_BEGIN = "span_begin";
-export const ET_SPAN_END = "span_end";
+export const SPAN_BEGIN = "span_begin";
+export const SPAN_END = "span_end";
+export const TOOL = "tool";
+export const SUBTASK = "subtask";
+export const STORE = "store";
+export const STATE = "state";
+
+export const TYPE_TOOL = "tool";
+export const TYPE_SUBTASK = "subtask";
+export const TYPE_SOLVER = "solver";
+export const TYPE_AGENT = "agent";
+export const TYPE_HANDOFF = "handoff";
 
 export const hasSpans = (events: Events): boolean => {
-  return events.some((event) => event.event === ET_SPAN_BEGIN);
+  return events.some((event) => event.event === SPAN_BEGIN);
 };

inspect_ai/_view/www/src/app/samples/transcript/types.ts

@@ -45,12 +45,14 @@ export type EventType =
   | SpanBeginEvent
   | SpanEndEvent;
 
-export class EventNode {
-  event: EventType;
-  children: EventNode[] = [];
+export class EventNode<T extends EventType = EventType> {
+  id: string;
+  event: T;
+  children: EventNode<EventType>[] = [];
   depth: number;
 
-  constructor(event: EventType, depth: number) {
+  constructor(id: string, event: T, depth: number) {
+    this.id = id;
     this.event = event;
     this.depth = depth;
   }

inspect_ai/_view/www/src/app/types.ts

@@ -58,6 +58,7 @@ export interface LogsState {
   logHeaders: Record<string, EvalLogHeader>;
   headersLoading: boolean;
   selectedLogIndex: number;
+  selectedLogFile?: string;
 }
 
 export interface LogState {
@@ -78,13 +79,23 @@ export interface LogState {
 
 export type SampleStatus = "ok" | "loading" | "streaming" | "error";
 
+export type SampleIdentifier = {
+  id: string | number;
+  epoch: number;
+};
+
 export interface SampleState {
-  selectedSample: EvalSample | undefined;
+  sample_identifier: SampleIdentifier | undefined;
+  sampleInState: boolean;
+  selectedSampleObject?: EvalSample;
   sampleStatus: SampleStatus;
   sampleError: Error | undefined;
+  sampleNeedsReload: number;
 
   // Events and attachments
   runningEvents: Event[];
+  collapsedEvents: Record<string, true> | null;
+  collapsedIdBuckets: Record<string, Record<string, boolean>>;
 }
 
 export type Event =