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

inspect_ai/_view/www/src/workspace/navbar/SecondaryBar.module.css

@@ -0,0 +1,28 @@
+.staticCol {
+  flex-shrink: 0;
+}
+
+.justifyLeft {
+  justify-self: left;
+}
+
+.justifyCenter {
+  justify-self: center;
+}
+
+.justifyRight {
+  justify-self: right;
+}
+
+.valueGrid {
+  margin: 0;
+  padding: 0.2em 1em 0.2em 1em;
+  display: grid;
+  grid-column-gap: 1em;
+  border-top: 1px solid var(--bs-border-color);
+}
+
+.container {
+  margin: 0;
+  width: 100%;
+}

inspect_ai/_view/www/src/workspace/navbar/SecondaryBar.tsx

@@ -0,0 +1,222 @@
+import clsx from "clsx";
+import { SampleSummary } from "../../api/types";
+import { ExpandablePanel } from "../../components/ExpandablePanel";
+import { LabeledValue } from "../../components/LabeledValue";
+import { EvalDescriptor } from "../../samples/descriptor/types";
+import { scoreFilterItems } from "../../samples/sample-tools/filters";
+import {
+  EvalDataset,
+  EvalPlan,
+  EvalResults,
+  EvalSpec,
+  EvalStats,
+} from "../../types/log";
+import { formatDataset, formatDuration } from "../../utils/format";
+import styles from "./SecondaryBar.module.css";
+
+interface SecondaryBarProps {
+  evalSpec?: EvalSpec;
+  evalPlan?: EvalPlan;
+  evalResults?: EvalResults;
+  evalStats?: EvalStats;
+  evalDescriptor?: EvalDescriptor;
+  samples?: SampleSummary[];
+  status?: string;
+}
+
+/**
+ * Renders the SecondaryBar
+ */
+export const SecondaryBar: React.FC<SecondaryBarProps> = ({
+  evalSpec,
+  evalPlan,
+  evalResults,
+  evalStats,
+  samples,
+  evalDescriptor,
+  status,
+}) => {
+  if (!evalSpec || status !== "success") {
+    return null;
+  }
+
+  const epochs = evalSpec.config.epochs || 1;
+  const hyperparameters: Record<string, unknown> = {
+    ...(evalPlan?.config || {}),
+    ...(evalSpec.task_args || {}),
+  };
+
+  const hasConfig = Object.keys(hyperparameters).length > 0;
+
+  const values = [];
+  values.push({
+    size: "minmax(12%, auto)",
+    value: (
+      <LabeledValue
+        label="Dataset"
+        className={(styles.staticCol, "text-size-small")}
+      >
+        <DatasetSummary
+          dataset={evalSpec.dataset}
+          samples={samples}
+          epochs={epochs}
+        />
+      </LabeledValue>
+    ),
+  });
+
+  const label =
+    evalResults?.scores && evalResults.scores.length > 1 ? "Scorers" : "Scorer";
+  values.push({
+    size: "minmax(12%, auto)",
+    value: (
+      <LabeledValue
+        label={label}
+        className={clsx(
+          styles.staticCol,
+          hasConfig ? styles.justifyLeft : styles.justifyCenter,
+          "text-size-small",
+        )}
+      >
+        <ScorerSummary evalDescriptor={evalDescriptor} />
+      </LabeledValue>
+    ),
+  });
+
+  if (hasConfig) {
+    values.push({
+      size: "minmax(12%, auto)",
+      value: (
+        <LabeledValue
+          label="Config"
+          className={clsx(styles.justifyRight, "text-size-small")}
+        >
+          <ParamSummary params={hyperparameters} />
+        </LabeledValue>
+      ),
+    });
+  }
+
+  if (evalStats) {
+    const totalDuration = formatDuration(
+      new Date(evalStats?.started_at),
+      new Date(evalStats?.completed_at),
+    );
+    values.push({
+      size: "minmax(12%, auto)",
+      value: (
+        <LabeledValue
+          label="Duration"
+          className={clsx(styles.justifyRight, "text-size-small")}
+        >
+          {totalDuration}
+        </LabeledValue>
+      ),
+    });
+  }
+
+  return (
+    <ExpandablePanel
+      className={clsx(styles.container, "text-size-small")}
+      collapse={true}
+      lines={4}
+    >
+      <div
+        className={styles.valueGrid}
+        style={{
+          gridTemplateColumns: `${values
+            .map((val) => {
+              return val.size;
+            })
+            .join(" ")}`,
+        }}
+      >
+        {values.map((val) => {
+          return val.value;
+        })}
+      </div>
+    </ExpandablePanel>
+  );
+};
+
+interface DatasetSummaryProps {
+  dataset?: EvalDataset;
+  samples?: SampleSummary[];
+  epochs: number;
+}
+
+/**
+ * A component that displays the dataset
+ */
+const DatasetSummary: React.FC<DatasetSummaryProps> = ({
+  dataset,
+  samples,
+  epochs,
+}) => {
+  if (!dataset) {
+    return null;
+  }
+
+  return (
+    <div>
+      {samples?.length
+        ? formatDataset(samples.length, epochs, dataset.name)
+        : ""}
+    </div>
+  );
+};
+
+interface ScoreSummaryProps {
+  evalDescriptor?: EvalDescriptor;
+}
+
+/**
+ * A component that displays a list of scrorers
+ */
+const ScorerSummary: React.FC<ScoreSummaryProps> = ({ evalDescriptor }) => {
+  if (!evalDescriptor) {
+    return null;
+  }
+
+  const items = scoreFilterItems(evalDescriptor);
+  return (
+    <span style={{ position: "relative" }}>
+      {Array.from(items).map((item, index, array) => (
+        <span key={index}>
+          <span title={item.tooltip}>{item.canonicalName}</span>
+          {index < array.length - 1 ? ", " : ""}
+        </span>
+      ))}
+    </span>
+  );
+};
+
+interface ParamSummaryProps {
+  params: Record<string, unknown>;
+}
+
+/**
+ * A component that displays a summary of parameters.
+ */
+const ParamSummary: React.FC<ParamSummaryProps> = ({ params }) => {
+  if (!params) {
+    return null;
+  }
+  const paraValues = Object.keys(params).map((key) => {
+    const val = params[key];
+    if (Array.isArray(val) || typeof val === "object") {
+      return `${key}: ${JSON.stringify(val)}`;
+    } else {
+      return `${key}: ${val}`;
+    }
+  });
+  if (paraValues.length > 0) {
+    return (
+      <code style={{ padding: 0, color: "var(--bs-body-color)" }}>
+        {paraValues.join(", ")}
+      </code>
+    );
+  } else {
+    return null;
+  }
+};

inspect_ai/_view/www/src/workspace/navbar/StatusPanel.module.css

@@ -0,0 +1,14 @@
+.statusPanel {
+  padding: 1em;
+  margin-top: 0.5em;
+  text-transform: uppercase;
+  font-size: var(--inspect-font-size-smaller);
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.statusIcon {
+  font-size: var(--inspect-font-size-large);
+  margin-right: 0.3em;
+  margin-top: -0.1em;
+}

inspect_ai/_view/www/src/workspace/navbar/StatusPanel.tsx

@@ -0,0 +1,61 @@
+import clsx from "clsx";
+import { ApplicationIcons } from "../../appearance/icons";
+import styles from "./StatusPanel.module.css";
+
+interface StatusProps {
+  sampleCount: number;
+}
+
+export const CancelledPanel: React.FC<StatusProps> = ({ sampleCount }) => {
+  return (
+    <StatusPanel
+      icon={ApplicationIcons.logging["info"]}
+      status="Cancelled"
+      sampleCount={sampleCount}
+    />
+  );
+};
+
+export const ErroredPanel: React.FC<StatusProps> = ({ sampleCount }) => {
+  return (
+    <StatusPanel
+      icon={ApplicationIcons.logging["error"]}
+      status="Task Failed"
+      sampleCount={sampleCount}
+    />
+  );
+};
+
+export const RunningPanel: React.FC<StatusProps> = ({ sampleCount }) => {
+  return (
+    <StatusPanel
+      icon={ApplicationIcons.running}
+      status="Running"
+      sampleCount={sampleCount}
+    />
+  );
+};
+
+interface StatusPanelProps {
+  icon: string;
+  status: string;
+  sampleCount: number;
+}
+
+const StatusPanel: React.FC<StatusPanelProps> = ({
+  icon,
+  status,
+  sampleCount,
+}) => {
+  return (
+    <div className={styles.statusPanel}>
+      <i className={clsx(icon, styles.statusIcon)} style={{}} />
+      <div>
+        <div>${status}</div>
+        <div>
+          (${sampleCount} ${sampleCount === 1 ? "sample" : "samples"})
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+.error {
+  color: var(--bs-danger);
+  margin-top: 0.2em;
+}
+
+.running {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 0.5em;
+  margin-top: 0.3em;
+}
+
+.cancelled {
+  margin-top: 0.2em;
+}

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

@@ -0,0 +1,71 @@
+import clsx from "clsx";
+import { EvalLogHeader } from "../../api/types";
+import styles from "./EvalStatus.module.css";
+import { SidebarScoreView } from "./SidebarScoreView";
+import { SidebarScoresView } from "./SidebarScoresView";
+
+interface EvalStatusProps {
+  logHeader?: EvalLogHeader;
+}
+
+export const EvalStatus: React.FC<EvalStatusProps> = ({ logHeader }) => {
+  switch (logHeader?.status) {
+    case "error":
+      return <StatusError message="Error" />;
+
+    case "cancelled":
+      return <StatusCancelled message="Cancelled" />;
+
+    case "started":
+      return <StatusRunning message="Running" />;
+
+    default:
+      if (logHeader?.results?.scores && logHeader.results?.scores.length > 0) {
+        if (logHeader.results.scores.length === 1) {
+          return <SidebarScoreView scorer={logHeader.results.scores[0]} />;
+        } else {
+          return <SidebarScoresView scores={logHeader.results.scores} />;
+        }
+      } else {
+        return null;
+      }
+  }
+};
+
+interface StatusProps {
+  message: string;
+}
+
+const StatusCancelled: React.FC<StatusProps> = ({ message }) => {
+  return (
+    <div
+      className={clsx(
+        "text-style-secondary",
+        "text-style-label",
+        "text-size-small",
+        styles.cancelled,
+      )}
+    >
+      {message}
+    </div>
+  );
+};
+
+const StatusRunning: React.FC<StatusProps> = ({ message }) => {
+  return (
+    <div
+      className={clsx(
+        "text-style-secondary",
+        "text-style-label",
+        "text-size-small",
+        styles.running,
+      )}
+    >
+      <div>{message}</div>
+    </div>
+  );
+};
+
+const StatusError: React.FC<StatusProps> = ({ message }) => {
+  return <div className={clsx(styles.error, "text-size-small")}>{message}</div>;
+};

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

@@ -0,0 +1,5 @@
+.dirname {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,56 @@
+import clsx from "clsx";
+import styles from "./LogDirectoryTitleView.module.css";
+
+interface LogDirectoryTitleViewProps {
+  log_dir?: string;
+  offcanvas: boolean;
+}
+
+export const LogDirectoryTitleView: React.FC<LogDirectoryTitleViewProps> = ({
+  log_dir,
+  offcanvas,
+}) => {
+  if (log_dir) {
+    const displayDir = prettyDir(log_dir);
+    return (
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <span
+          className={clsx(
+            "text-style-secondary",
+            "text-style-label",
+            "text-size-small",
+          )}
+        >
+          Log Directory
+        </span>
+        <span
+          title={displayDir}
+          className={clsx("text-size-base", styles.dirname)}
+        >
+          {offcanvas ? displayDir : ""}
+        </span>
+      </div>
+    );
+  } else {
+    return (
+      <span className={clsx("text-size-title")}>
+        {offcanvas ? "Log History" : ""}
+      </span>
+    );
+  }
+};
+
+const prettyDir = (path: string): string => {
+  try {
+    // Try to create a new URL object
+    let url = new URL(path);
+
+    if (url.protocol === "file:") {
+      return url.pathname;
+    } else {
+      return path;
+    }
+  } catch {
+    return path;
+  }
+};

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;
+}