inspect-ai 0.3.62__py3-none-any.whl → 0.3.64__py3-none-any.whl

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

@@ -0,0 +1,83 @@
+import clsx from "clsx";
+import { Fragment } from "react";
+import styles from "./MetadataGrid.module.css";
+import { RenderedContent } from "./RenderedContent";
+
+interface MetadataGridProps {
+  id?: string;
+  className?: string | string[];
+  style?: React.CSSProperties;
+  entries: Record<string, unknown>;
+  plain?: boolean;
+}
+
+/**
+ * Renders the MetaDataView component.
+ */
+export const MetaDataGrid: React.FC<MetadataGridProps> = ({
+  id,
+  entries,
+  className,
+  style,
+  plain,
+}) => {
+  const baseId = "metadata-grid";
+
+  const entryEls = entryRecords(entries).map((entry, index) => {
+    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>
+        <div
+          className={clsx(
+            `${baseId}-key`,
+            styles.cell,
+            "text-style-label",
+            "text-style-secondary",
+            "text-size-small",
+          )}
+        >
+          {entry.name}
+        </div>
+        <div
+          className={clsx(styles.value, `${baseId}-value`, "text-size-small")}
+        >
+          <RenderedContent id={id} entry={entry} />
+        </div>
+      </Fragment>
+    );
+  });
+
+  return (
+    <div id={id} className={clsx(className, styles.grid)} style={style}>
+      {entryEls}
+    </div>
+  );
+};
+
+// entries can be either a Record<string, stringable>
+// or an array of record with name/value on way in
+// but coerce to array of records for order
+/**
+ * Ensure the proper type for entries
+ */
+const entryRecords = (
+  entries: { name: string; value: unknown }[] | Record<string, unknown>,
+): { name: string; value: unknown }[] => {
+  if (!entries) {
+    return [];
+  }
+
+  if (!Array.isArray(entries)) {
+    return Object.entries(entries || {}).map(([key, value]) => {
+      return { name: key, value };
+    });
+  } else {
+    return entries;
+  }
+};

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

@@ -0,0 +1,35 @@
+.table {
+  padding-left: 0;
+  margin-left: 0;
+  margin-bottom: 0.2rem;
+}
+
+.th {
+  padding: 0;
+}
+
+.cell {
+  padding: 0.3em 0.3em 0.3em 0em;
+}
+
+.compact .cell {
+  padding: 0;
+}
+
+.cellKey {
+  font-weight: 400;
+  padding-right: 1em;
+  white-space: nowrap;
+}
+
+.compact .cellKey {
+  font-weight: 400;
+  padding-right: 0.2em;
+  white-space: nowrap;
+}
+
+.cellValue {
+  font-weight: 300;
+  white-space: pre-wrap;
+  word-wrap: anywhere;
+}

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

@@ -0,0 +1,95 @@
+import clsx from "clsx";
+import styles from "./MetaDataView.module.css";
+import { RenderedContent } from "./RenderedContent";
+
+interface MetadataViewProps {
+  id?: string;
+  style?: React.CSSProperties;
+  entries: Record<string, unknown>;
+  tableOptions?: string;
+  compact?: boolean;
+  className?: string | string[];
+}
+
+/**
+ * Renders the MetaDataView component.
+ */
+export const MetaDataView: React.FC<MetadataViewProps> = ({
+  id,
+  style,
+  entries,
+  tableOptions,
+  compact,
+  className,
+}) => {
+  const baseId = "metadataview";
+
+  // Configure options for
+  tableOptions = tableOptions || "sm";
+  const tblClz = (tableOptions || "").split(",").map((option) => {
+    return `table-${option}`;
+  });
+
+  const coercedEntries = toNameValues(entries);
+
+  const entryEls = (coercedEntries || []).map((entry, index) => {
+    const id = `${baseId}-value-${index}`;
+    return (
+      <tr key={id}>
+        <td
+          className={clsx(
+            styles.cell,
+            styles.cellKey,
+            "text-size-small",
+            "text-style-label",
+          )}
+        >
+          {entry.name}
+        </td>
+        <td className={clsx(styles.cell, styles.cellValue, "text-size-small")}>
+          <RenderedContent id={id} entry={entry} />
+        </td>
+      </tr>
+    );
+  });
+
+  return (
+    <table
+      id={id}
+      className={clsx(
+        "table",
+        tblClz,
+        styles.table,
+        compact ? styles.compact : undefined,
+        className,
+      )}
+      style={style}
+    >
+      <thead>
+        <tr>
+          <th colSpan={2} className={"th"}></th>
+        </tr>
+      </thead>
+      <tbody>{entryEls}</tbody>
+    </table>
+  );
+};
+
+// entries can be either a Record<string, stringable>
+// or an array of record with name/value on way in
+// but coerce to array of records for order
+const toNameValues = (
+  entries?: Array<{ name: string; value: unknown }> | Record<string, unknown>,
+): Array<{ name: string; value: unknown }> | undefined => {
+  if (entries) {
+    if (Array.isArray(entries)) {
+      return entries;
+    } else {
+      return Object.entries(entries || {}).map(([key, value]) => {
+        return { name: key, value };
+      });
+    }
+  } else {
+    return entries;
+  }
+};

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

@@ -0,0 +1,15 @@
+.grid {
+  display: grid;
+  grid-template-columns: max-content auto;
+  column-gap: 1em;
+}
+
+.cell {
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.value {
+  white-space: pre-wrap;
+  word-wrap: anywhere;
+}

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

@@ -0,0 +1,12 @@
+.query {
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.summary {
+  margin-bottom: 0.5rem;
+}
+
+.preWrap {
+  white-space: pre-wrap;
+}

inspect_ai/_view/www/src/{components/RenderedContent/RenderedContent.mjs → metadata/RenderedContent.tsx}

@@ -1,25 +1,30 @@
-import { html } from "htm/preact";
+import { ApplicationIcons } from "../appearance/icons";
 
-import { ApplicationIcons } from "../../appearance/Icons.mjs";
-import { FontSize } from "../../appearance/Fonts.mjs";
+import { ANSIDisplay } from "../components/AnsiDisplay";
+import { ChatMessageRenderer } from "../samples/chat/ChatMessageRenderer";
+import { formatNumber } from "../utils/format";
+import { MetaDataView } from "./MetaDataView";
 
-import { ANSIDisplay } from "../AnsiDisplay.mjs";
-import { MetaDataView } from "../MetaDataView.mjs";
-import { ChatMessageRenderer } from "./ChatMessageRenderer.mjs";
-import { formatNumber } from "../../utils/Format.mjs";
-import { Buckets } from "./Types.mjs";
+import clsx from "clsx";
+import React, { Fragment, JSX } from "react";
+import styles from "./RenderedContent.module.css";
+import { Buckets, ContentRenderer } from "./types";
+
+interface RenderedContentProps {
+  id: string;
+  entry: { name: string; value: unknown };
+}
 
 /**
  * Renders content based on its type using registered content renderers.
- *
- * @param {Object} props - Properties passed to the component.
- * @param {string} props.id - Unique identifier for the rendered content.
- * @param {Object} props.entry - Entry object containing `value` to be rendered.
- * @returns {import("preact").JSX.Element | string} Rendered content.
  */
-export const RenderedContent = ({ id, entry }) => {
+export const RenderedContent: React.FC<RenderedContentProps> = ({
+  id,
+  entry,
+}): JSX.Element => {
+  // Explicitly specify return type
   if (entry.value === null) {
-    return "[null]";
+    return <span>[null]</span>;
   }
 
   const renderer = Object.keys(contentRenderers)
@@ -33,23 +38,34 @@ export const RenderedContent = ({ id, entry }) => {
       return renderer.canRender(entry);
     });
 
-  let value = entry.value;
   if (renderer) {
     const { rendered } = renderer.render(id, entry);
-    if (rendered !== undefined) {
-      value = rendered;
+    // Check if rendered is already a valid ReactNode (JSX.Element)
+    if (rendered !== undefined && React.isValidElement(rendered)) {
+      return rendered;
     }
   }
-  return html`${value}`;
+
+  // Safely convert any value to a string representation
+  const displayValue = (() => {
+    try {
+      if (typeof entry.value === "object") {
+        return JSON.stringify(entry.value);
+      }
+      return String(entry.value);
+    } catch (e) {
+      return "[Unable to display value]";
+    }
+  })();
+
+  return <span>{displayValue}</span>;
 };
 
 /**
  * Object containing different content renderers.
  * Each renderer is responsible for rendering a specific type of content.
- *
- * @type {Record<string, import("./Types.mjs").ContentRenderer>}
  */
-const contentRenderers = {
+const contentRenderers: Record<string, ContentRenderer> = {
   AnsiString: {
     bucket: Buckets.first,
     canRender: (entry) => {
@@ -57,9 +73,9 @@ const contentRenderers = {
         typeof entry.value === "string" && entry.value.indexOf("\u001b") > -1
       );
     },
-    render: (id, entry) => {
+    render: (_id, entry) => {
       return {
-        rendered: html`<${ANSIDisplay} output=${entry.value} />`,
+        rendered: <ANSIDisplay output={entry.value} />,
       };
     },
   },
@@ -70,8 +86,11 @@ const contentRenderers = {
     },
     render: (_id, entry) => {
       return {
-        rendered: html`<i class="${ApplicationIcons.model}"></i> ${entry.value
-            ._model}`,
+        rendered: (
+          <Fragment>
+            <i className={ApplicationIcons.model} /> {entry.value._model}
+          </Fragment>
+        ),
       };
     },
   },
@@ -100,10 +119,8 @@ const contentRenderers = {
     canRender: (entry) => {
       return typeof entry.value === "string";
     },
-    render: (_id, entry, defaultRendering) => {
-      const rendered = defaultRendering
-        ? defaultRendering(entry.value.trim())
-        : entry.value.trim();
+    render: (_id, entry) => {
+      const rendered = entry.value.trim();
       return {
         rendered,
       };
@@ -115,8 +132,8 @@ const contentRenderers = {
       const isArray = Array.isArray(entry.value);
       if (isArray) {
         const types = new Set(
-          entry.value.map((entry) => {
-            return typeof entry;
+          entry.value.map((e: unknown) => {
+            return typeof e;
           }),
         );
         return types.size === 1;
@@ -125,18 +142,20 @@ const contentRenderers = {
       }
     },
     render: (id, entry) => {
-      const arrayMap = {};
-      entry.value.forEach((entry, index) => {
-        arrayMap[`[${index}]`] = entry;
+      const arrayMap: Record<string, unknown> = {};
+      entry.value.forEach((e: unknown, index: number) => {
+        arrayMap[`[${index}]`] = e;
       });
 
-      const arrayRendered = html`<${MetaDataView}
-        id=${id}
-        style=${{ fontSize: FontSize.small }}
-        entries="${arrayMap}"
-        tableOptions="borderless,sm"
-        compact
-      />`;
+      const arrayRendered = (
+        <MetaDataView
+          id={id}
+          className={"font-size-small"}
+          entries={arrayMap}
+          tableOptions="borderless,sm"
+          compact={true}
+        />
+      );
       return { rendered: arrayRendered };
     },
   },
@@ -147,26 +166,26 @@ const contentRenderers = {
       return typeof entry.value === "object" && entry.name === "web_search";
     },
     render: (_id, entry) => {
-      const results = [];
+      const results: React.ReactNode[] = [];
       results.push(
-        html`<div style=${{ marginBottom: "0.5rem", fontWeight: "500" }}>
-          <i class=${ApplicationIcons.search}></i> ${entry.value.query}
-        </div>`,
+        <div className={styles.query}>
+          <i className={ApplicationIcons.search}></i> {entry.value.query}
+        </div>,
+      );
+      entry.value.results.forEach(
+        (result: { url: string; summary: string }) => {
+          results.push(
+            <div>
+              <a href={result.url}>{result.url}</a>
+            </div>,
+          );
+          results.push(
+            <div className={clsx("text-size-smaller", styles.summary)}>
+              {result.summary}
+            </div>,
+          );
+        },
       );
-      entry.value.results.forEach((result) => {
-        results.push(
-          html`<div>
-            <a href="${result.url}">${result.url}</a>
-          </div>`,
-        );
-        results.push(
-          html`<div
-            style=${{ fontSize: FontSize.smaller, marginBottom: "0.5rem" }}
-          >
-            ${result.summary}
-          </div>`,
-        );
-      });
       return {
         rendered: results,
       };
@@ -181,9 +200,7 @@ const contentRenderers = {
     },
     render: (_id, entry) => {
       return {
-        rendered: html`<pre style=${{ whiteSpace: "pre-wrap" }}>
-${entry.value}</pre
-        >`,
+        rendered: <pre className={styles.preWrap}>{entry.value}</pre>,
       };
     },
   },
@@ -192,7 +209,7 @@ ${entry.value}</pre
     canRender: (entry) => {
       return typeof entry.value === "object" && entry.value._html;
     },
-    render: (id, entry) => {
+    render: (_id, entry) => {
       return {
         rendered: entry.value._html,
       };
@@ -205,9 +222,9 @@ ${entry.value}</pre
         typeof entry.value === "string" && entry.value.startsWith("data:image/")
       );
     },
-    render: (id, entry) => {
+    render: (_id, entry) => {
       return {
-        rendered: html`<img src=${entry.value} />`,
+        rendered: <img src={entry.value} />,
       };
     },
   },
@@ -229,13 +246,15 @@ ${entry.value}</pre
       }
 
       return {
-        rendered: html`<${MetaDataView}
-          id=${id}
-          style=${{ fontSize: FontSize.smaller }}
-          entries="${entry.value}"
-          tableOptions="borderless,sm"
-          compact
-        />`,
+        rendered: (
+          <MetaDataView
+            id={id}
+            className={"text-size-smaller"}
+            entries={entry.value}
+            tableOptions="borderless,sm"
+            compact
+          />
+        ),
       };
     },
   },

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+export const Buckets = {
+  first: 0,
+  intermediate: 10,
+  final: 1000,
+};
+
+export interface ContentRenderer {
+  bucket: number;
+  canRender: (content: any) => boolean;
+  render: (
+    id: string,
+    content: any,
+  ) => {
+    rendered: string | number | bigint | boolean | object | ReactNode | null;
+  };
+}

inspect_ai/_view/www/src/plan/DatasetDetailView.module.css

@@ -0,0 +1,3 @@
+.item {
+  margin-bottom: 0em;
+}

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

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import { MetaDataView } from "../metadata/MetaDataView";
+import { EvalDataset } from "../types/log";
+
+import styles from "./DatasetDetailView.module.css";
+
+interface DatasetDetailViewProps {
+  dataset: EvalDataset;
+  style?: React.CSSProperties;
+}
+
+export const DatasetDetailView: React.FC<DatasetDetailViewProps> = ({
+  dataset,
+  style,
+}) => {
+  // Filter out sample_ids
+  const filtered = Object.fromEntries(
+    Object.entries(dataset).filter(([key]) => key !== "sample_ids"),
+  );
+
+  if (!dataset || Object.keys(filtered).length === 0) {
+    return (
+      <span className={clsx("text-size-base", styles.item)} style={style}>
+        No dataset information available
+      </span>
+    );
+  }
+
+  return (
+    <MetaDataView
+      className={clsx("text-size-base", styles.item)}
+      entries={filtered}
+      tableOptions="borderless,sm"
+      style={style}
+    />
+  );
+};

inspect_ai/_view/www/src/plan/DetailStep.module.css

@@ -0,0 +1,9 @@
+.icon {
+  margin-right: 0.3rem;
+}
+
+.container {
+  margin-left: 1.3rem;
+  margin-top: 0.2rem;
+  margin-bottom: 0.3rem;
+}

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

@@ -0,0 +1,31 @@
+import clsx from "clsx";
+import { MetaDataView } from "../metadata/MetaDataView";
+import styles from "./DatasetDetailView.module.css";
+
+interface DetailStepProps {
+  icon?: string;
+  name: string;
+  params?: Record<string, unknown>;
+  className?: string | string[];
+}
+
+export const DetailStep: React.FC<DetailStepProps> = ({
+  icon,
+  name,
+  params,
+  className,
+}) => {
+  const iconHtml = icon ? <i className={clsx(icon, styles.icon)} /> : "";
+  return (
+    <div className={clsx(className)}>
+      {iconHtml} {name}
+      <div className={styles.container}>
+        {params ? (
+          <MetaDataView entries={params} className={"text-size-small"} />
+        ) : (
+          ""
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { ApplicationIcons } from "../appearance/icons";
+import { Card, CardBody, CardHeader } from "../components/Card";
+import { EvalPlan, EvalScore, EvalSpec } from "../types/log";
+import { PlanDetailView } from "./PlanDetailView";
+
+interface PlanCardProps {
+  evalSpec?: EvalSpec;
+  evalPlan?: EvalPlan;
+  scores?: EvalScore[];
+}
+
+/**
+ * Renders the plan card
+ */
+export const PlanCard: React.FC<PlanCardProps> = ({
+  evalSpec,
+  evalPlan,
+  scores,
+}) => {
+  return (
+    <Card>
+      <CardHeader icon={ApplicationIcons.config} label="Config" />
+      <CardBody id={"task-plan-card-body"}>
+        <PlanDetailView evaluation={evalSpec} plan={evalPlan} scores={scores} />
+      </CardBody>
+    </Card>
+  );
+};

inspect_ai/_view/www/src/plan/PlanDetailView.module.css

@@ -0,0 +1,48 @@
+.floatingCol {
+  flex: 0 1 1;
+  width: unset;
+  text-align: left;
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+}
+
+.wideCol {
+  flex: 1 1 1;
+  width: unset;
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+}
+
+.oneCol {
+  flex: 0 0 100%;
+}
+
+.twoCol {
+  flex: 0 0 50%;
+}
+
+.planCol {
+  margin-top: em;
+}
+
+.container {
+  padding-top: 0;
+  padding-bottom: 1em;
+  margin-left: 0;
+}
+
+.grid {
+  display: grid;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding-bottom: 1em;
+  margin-bottom: 0.5em;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  margin-left: 0.5em;
+  gap: 1em;
+}