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

inspect_ai/_view/www/src/workspace/sidebar/Sidebar.module.css

@@ -0,0 +1,68 @@
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: var(--sidebar-width);
+  height: 100%;
+  background-color: #fff;
+  border-right: 1px solid var(--bs-light-border-subtle);
+  display: flex;
+  flex-direction: column;
+  z-index: 9999; /* Sit above main content */
+  transition: transform 0.3s ease-in-out;
+}
+
+.sidebarClosed {
+  transform: translateX(-100%);
+}
+
+.sidebarOpen {
+  transform: translateX(0);
+}
+
+.header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 0.2rem;
+  align-items: center;
+  opacity: 0.7;
+  position: sticky;
+  top: 0;
+  width: var(--sidebar-width);
+  border-bottom: 1px solid var(--bs-light-border-subtle);
+  padding: 0.5rem 0 0.5rem 1rem;
+  height: 3.6em;
+  background-color: #fff;
+  z-index: 10;
+}
+
+.toggle {
+  padding: 0.1rem;
+  align-self: end;
+  width: 40px;
+  flex: 0 0 auto;
+}
+
+.progress {
+  z-index: 3;
+}
+
+.list {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0; /* top: 0; left: 0; right: 0; bottom: 0; */
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9998;
+}
+
+.active {
+  background-color: var(--bs-secondary-bg-subtle);
+}
+
+.item {
+  cursor: pointer;
+}

inspect_ai/_view/www/src/workspace/sidebar/Sidebar.tsx

@@ -0,0 +1,85 @@
+import clsx from "clsx";
+import { Fragment } from "react/jsx-runtime";
+import { EvalLogHeader, LogFiles } from "../../api/types";
+import { ApplicationIcons } from "../../appearance/icons";
+import { ProgressBar } from "../../components/ProgressBar";
+import { LogDirectoryTitleView } from "./LogDirectoryTitleView";
+import styles from "./Sidebar.module.css";
+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;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  logs,
+  logHeaders,
+  offcanvas,
+  setOffcanvas,
+  loading,
+  selectedIndex,
+  onSelectedIndexChanged,
+}) => {
+  const handleToggle = () => {
+    setOffcanvas(!offcanvas);
+  };
+
+  return (
+    <Fragment>
+      {/* Optional backdrop for small screens, appears only when offcanvas is open */}
+      {offcanvas && <div className={styles.backdrop} onClick={handleToggle} />}
+
+      <div
+        className={clsx(
+          styles.sidebar,
+          offcanvas ? styles.sidebarOpen : styles.sidebarClosed,
+        )}
+      >
+        <div className={styles.header}>
+          <LogDirectoryTitleView log_dir={logs.log_dir} offcanvas={offcanvas} />
+          <button
+            onClick={handleToggle}
+            className={clsx("btn", styles.toggle)}
+            type="button"
+            aria-label="Close sidebar"
+          >
+            <i className={ApplicationIcons.close}></i>
+          </button>
+        </div>
+
+        <div className={styles.progress}>
+          <ProgressBar animating={loading} />
+        </div>
+
+        <ul className={clsx("list-group", styles.list)}>
+          {logs.files.map((file, index) => {
+            const logHeader = logHeaders[file.name];
+            return (
+              <li
+                key={file.name}
+                className={clsx(
+                  "list-group-item",
+                  "list-group-item-action",
+                  styles.item,
+                  selectedIndex === index ? styles.active : undefined,
+                )}
+                onClick={() => onSelectedIndexChanged(index)}
+              >
+                <SidebarLogEntry
+                  logHeader={logHeader}
+                  task={file.task || "unknown task"}
+                />
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </Fragment>
+  );
+};

inspect_ai/_view/www/src/workspace/sidebar/SidebarLogEntry.module.css

@@ -0,0 +1,29 @@
+.entry {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.title {
+  overflow: hidden;
+  min-width: 33%;
+}
+
+.task {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.params {
+  margin-top: 1em;
+}
+
+.scores {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(auto, 1fr) minmax(1fr, 1fr);
+  column-gap: 1rem;
+  justify-content: space-between;
+  margin-top: 0em;
+}

inspect_ai/_view/www/src/workspace/sidebar/SidebarLogEntry.tsx

@@ -0,0 +1,95 @@
+import clsx from "clsx";
+import { Fragment } from "react";
+import { EvalLogHeader } from "../../api/types";
+import { EvalStatus } from "./EvalStatus";
+import styles from "./SidebarLogEntry.module.css";
+
+interface SidebarLogEntryProps {
+  logHeader?: EvalLogHeader;
+  task: string;
+}
+
+export const SidebarLogEntry: React.FC<SidebarLogEntryProps> = ({
+  logHeader,
+  task,
+}) => {
+  const hyperparameters: Record<string, unknown> = {
+    ...(logHeader?.plan?.config || {}),
+    ...(logHeader?.eval?.task_args || {}),
+  };
+
+  const model = logHeader?.eval?.model;
+  const datasetName = logHeader?.eval?.dataset.name;
+
+  const uniqScorers = new Set();
+  logHeader?.results?.scores?.forEach((scorer) => {
+    uniqScorers.add(scorer.name);
+  });
+  const scorerNames = Array.from(uniqScorers).join(",");
+
+  const scorerLabel =
+    Object.keys(logHeader?.results?.scores || {}).length === 1
+      ? "scorer"
+      : "scorers";
+
+  const completed = logHeader?.stats?.completed_at;
+  const time = completed ? new Date(completed) : undefined;
+  const timeStr = time
+    ? `${time.toDateString()}
+    ${time.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    })}`
+    : "";
+
+  return (
+    <Fragment>
+      <div className={styles.entry}>
+        <div className={styles.title}>
+          <div className={clsx(styles.task, "text-size-title-secondary")}>
+            {logHeader?.eval?.task || task}
+          </div>
+          <small className={clsx("mb-1", "text-size-small")}>{timeStr}</small>
+
+          {model ? (
+            <div>
+              <small className={clsx("mb-1", "text-size-small")}>{model}</small>
+            </div>
+          ) : (
+            ""
+          )}
+        </div>
+        <EvalStatus logHeader={logHeader} />
+      </div>
+      <div className={clsx(styles.params, "three-line-clamp")}>
+        <small className={"mb-1"}>
+          {hyperparameters
+            ? Object.keys(hyperparameters)
+                .map((key) => {
+                  const val = hyperparameters[key];
+                  if (Array.isArray(val) || typeof val === "object") {
+                    return `${key}: ${JSON.stringify(val)}`;
+                  } else {
+                    return `${key}: ${val}`;
+                  }
+                })
+                .join(", ")
+            : ""}
+        </small>
+      </div>
+      {(logHeader?.eval?.dataset || logHeader?.results?.scores) &&
+      logHeader?.status === "success" ? (
+        <div
+          className={clsx("text-truncate", "text-size-small", styles.scores)}
+        >
+          <div>dataset: {datasetName || "(samples)"}</div>
+          <div className={clsx("text-truncate", styles.scoreInfo)}>
+            {scorerLabel}: {scorerNames || "(none)"}
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </Fragment>
+  );
+};

inspect_ai/_view/www/src/workspace/sidebar/SidebarScoreView.module.css

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.metric {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-left: 1em;
+  margin-bottom: 0.4em;
+  margin-top: 0.5rem;
+}
+
+.metricName {
+  margin-bottom: -0.3em;
+}
+
+.metricReducer {
+  margin-bottom: -0.2rem;
+}

inspect_ai/_view/www/src/workspace/sidebar/SidebarScoreView.tsx

@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import { EvalScore } from "../../types/log";
+import { formatPrettyDecimal } from "../../utils/format";
+
+import { metricDisplayName } from "../utils";
+import styles from "./SidebarScoreView.module.css";
+interface SidebarScoreProps {
+  scorer: EvalScore;
+}
+
+export const SidebarScoreView: React.FC<SidebarScoreProps> = ({ scorer }) => {
+  const showReducer = !!scorer.reducer;
+  return (
+    <div className={styles.container}>
+      {Object.keys(scorer.metrics).map((metric) => {
+        return (
+          <div className={styles.metric} key={metric}>
+            <div
+              className={clsx(
+                "text-style-secondary",
+                "text-style-label",
+                "text-size-small",
+                styles.metricName,
+              )}
+            >
+              {metricDisplayName(scorer.metrics[metric])}
+            </div>
+            {showReducer ? (
+              <div className={clsx("text-size-small", styles.metricReducer)}>
+                {scorer.reducer || "default"}
+              </div>
+            ) : (
+              ""
+            )}
+            <div className={"text-size-title-secondary"}>
+              {formatPrettyDecimal(scorer.metrics[metric].value)}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

inspect_ai/_view/www/src/workspace/sidebar/SidebarScoresView.module.css

@@ -0,0 +1,35 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  row-gap: 1em;
+}
+
+.scoreWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 1em;
+}
+
+.metricName {
+  width: 100%;
+  font-weight: 300;
+  border-bottom: solid var(--bs-border-color) 1px;
+}
+
+.metricReducer {
+  width: 100%;
+  font-weight: 300;
+}
+
+.metricValues {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  grid-gap: 0 0.3rem;
+}
+
+.metricValue {
+  font-weight: 600;
+}

inspect_ai/_view/www/src/workspace/sidebar/SidebarScoresView.tsx

@@ -0,0 +1,63 @@
+import clsx from "clsx";
+import { Fragment } from "react";
+import { Scores } from "../../types/log";
+import { formatPrettyDecimal } from "../../utils/format";
+import { metricDisplayName } from "../utils";
+import styles from "./SidebarScoresView.module.css";
+
+interface SidebarScoresProps {
+  scores: Scores;
+}
+
+export const SidebarScoresView: React.FC<SidebarScoresProps> = ({ scores }) => {
+  const showReducer = scores.findIndex((score) => !!score.reducer) !== -1;
+  return (
+    <div className={styles.container}>
+      {scores.map((score, idx) => {
+        const name = score.name;
+        const reducer = score.reducer;
+        return (
+          <div className={styles.scoreWrapper} key={`scorer-${name}-${idx}`}>
+            <div
+              className={clsx(
+                "text-style-secondary",
+                "text-style-label",
+                "text-size-small",
+                styles.metricName,
+              )}
+            >
+              {name}
+            </div>
+            {showReducer ? (
+              <div
+                className={clsx(
+                  "text-size-small",
+                  "text-style-label",
+                  "text-style-secondary",
+                  styles.metricReducer,
+                )}
+              >
+                {reducer || "default"}
+              </div>
+            ) : (
+              ""
+            )}
+            <div className={clsx("text-size-small", styles.metricValues)}>
+              {Object.keys(score.metrics).map((key) => {
+                const metric = score.metrics[key];
+                return (
+                  <Fragment key={key}>
+                    <div className={clsx()}>{metricDisplayName(metric)}</div>
+                    <div className={styles.metricValue}>
+                      {formatPrettyDecimal(metric.value)}
+                    </div>
+                  </Fragment>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

inspect_ai/_view/www/src/workspace/tabs/InfoTab.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { SampleSummary } from "../../api/types";
+import { MessageBand } from "../../components/MessageBand";
+import { PlanCard } from "../../plan/PlanCard";
+import {
+  EvalError,
+  EvalPlan,
+  EvalResults,
+  EvalSpec,
+  EvalStats,
+} from "../../types/log";
+import { UsageCard } from "../../usage/UsageCard";
+import { TaskErrorCard } from "../error/TaskErrorPanel";
+
+interface PlanTabProps {
+  evalSpec?: EvalSpec;
+  evalPlan?: EvalPlan;
+  evalStats?: EvalStats;
+  evalResults?: EvalResults;
+  samples?: SampleSummary[];
+  evalStatus?: "started" | "error" | "cancelled" | "success";
+  evalError?: EvalError;
+}
+
+export const InfoTab: React.FC<PlanTabProps> = ({
+  evalSpec,
+  evalPlan,
+  evalResults,
+  evalStats,
+  samples,
+  evalStatus,
+  evalError,
+}) => {
+  const [hidden, setHidden] = useState(false);
+  useEffect(() => {
+    setHidden(false);
+  }, [evalSpec, evalPlan, evalResults, evalStats, samples]);
+
+  const showWarning =
+    (!samples || samples.length === 0) &&
+    evalStatus === "success" &&
+    evalSpec?.dataset.samples &&
+    evalSpec.dataset.samples > 0;
+
+  return (
+    <div style={{ width: "100%" }}>
+      {showWarning ? (
+        <MessageBand
+          message="Unable to display samples (this evaluation log may be too large)."
+          hidden={hidden}
+          setHidden={setHidden}
+          type="warning"
+        />
+      ) : (
+        ""
+      )}
+      <div style={{ padding: "0.5em 1em 0 1em", width: "100%" }}>
+        <PlanCard
+          evalSpec={evalSpec}
+          evalPlan={evalPlan}
+          scores={evalResults?.scores}
+        />
+        {evalStatus !== "started" ? <UsageCard stats={evalStats} /> : undefined}
+        {evalStatus === "error" && evalError ? (
+          <TaskErrorCard error={evalError} />
+        ) : undefined}
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/workspace/tabs/JsonTab.module.css

@@ -0,0 +1,5 @@
+.jsonTab {
+  padding: 0.5rem;
+  font-size: var(--inspect-font-size-small);
+  width: 100%;
+}

inspect_ai/_view/www/src/workspace/tabs/JsonTab.tsx

@@ -0,0 +1,46 @@
+import { filename } from "../../utils/path";
+
+import { Capabilities } from "../../api/types";
+import { DownloadPanel } from "../../components/DownloadPanel";
+import { JSONPanel } from "../../components/JsonPanel";
+import styles from "./JsonTab.module.css";
+
+const kJsonMaxSize = 10000000;
+
+interface JsonTabProps {
+  logFile?: string;
+  capabilities: Capabilities;
+  selected: boolean;
+  json: string;
+}
+
+/**
+ * Renders JSON tab
+ */
+export const JsonTab: React.FC<JsonTabProps> = ({
+  logFile,
+  capabilities,
+  json,
+}) => {
+  if (logFile && json.length > kJsonMaxSize && capabilities.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`;
+    return (
+      <div className={styles.jsonTab}>
+        <DownloadPanel
+          message="The JSON for this log file is too large to render."
+          buttonLabel="Download JSON File"
+          fileName={file}
+          fileContents={json}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.jsonTab}>
+        <JSONPanel id="task-json-contents" json={json} simple={true} />
+      </div>
+    );
+  }
+};