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

inspect_ai/_view/www/src/workspace/WorkSpaceView.tsx

@@ -0,0 +1,160 @@
+import clsx from "clsx";
+import { Fragment, MouseEvent, RefObject, useCallback, useMemo } from "react";
+import { SampleSummary } from "../api/types";
+import { EmptyPanel } from "../components/EmptyPanel";
+import { TabPanel, TabSet } from "../components/TabSet";
+import { EvalDescriptor } from "../samples/descriptor/types";
+import {
+  EvalPlan,
+  EvalResults,
+  EvalSpec,
+  EvalStats,
+  Status,
+} from "../types/log";
+import { debounce } from "../utils/sync";
+import { Navbar } from "./navbar/Navbar";
+import { TabDescriptor } from "./types";
+
+import styles from "./WorkSpaceView.module.css";
+
+interface WorkSpaceViewProps {
+  logFileName?: string;
+  evalSpec: EvalSpec;
+  evalPlan?: EvalPlan;
+  evalResults?: EvalResults;
+  evalStats?: EvalStats;
+  samples?: SampleSummary[];
+  evalDescriptor?: EvalDescriptor;
+  status?: Status;
+  showToggle: boolean;
+  tabs: Record<string, TabDescriptor>;
+  selectedTab: string;
+  setSelectedTab: (tab: string) => void;
+  divRef: RefObject<HTMLDivElement | null>;
+  offcanvas: boolean;
+  setOffcanvas: (offcanvas: boolean) => void;
+  workspaceTabScrollPositionRef: RefObject<Record<string, number>>;
+  setWorkspaceTabScrollPosition: (tab: string, pos: number) => void;
+}
+
+export const WorkSpaceView: React.FC<WorkSpaceViewProps> = ({
+  logFileName,
+  evalSpec,
+  evalPlan,
+  evalResults,
+  evalStats,
+  samples,
+  evalDescriptor,
+  status,
+  showToggle,
+  selectedTab,
+  tabs,
+  setSelectedTab,
+  divRef,
+  offcanvas,
+  setOffcanvas,
+  workspaceTabScrollPositionRef,
+  setWorkspaceTabScrollPosition,
+}) => {
+  const debouncedScroll = useMemo(() => {
+    return debounce((id, position) => {
+      setWorkspaceTabScrollPosition(id, position);
+    }, 100);
+  }, [setWorkspaceTabScrollPosition]);
+
+  const onScroll = useCallback(
+    (id: string, position: number) => {
+      debouncedScroll(id, position);
+    },
+    [debouncedScroll],
+  );
+
+  const onSelected = useCallback(
+    (e: MouseEvent<HTMLElement>) => {
+      const id = e.currentTarget?.id;
+      if (id) {
+        setSelectedTab(id);
+      }
+    },
+    [setSelectedTab],
+  );
+
+  // Compute tab panels anytime the tabs change
+  const tabPanels = useMemo(() => {
+    return Object.keys(tabs).map((key) => {
+      const tab = tabs[key];
+      return (
+        <TabPanel
+          id={tab.id}
+          title={tab.label}
+          onSelected={onSelected}
+          selected={selectedTab === tab.id}
+          scrollable={!!tab.scrollable}
+          scrollRef={tab.scrollRef}
+          scrollPosition={workspaceTabScrollPositionRef.current?.[tab.id]}
+          setScrollPosition={useCallback(
+            (position: number) => {
+              onScroll(tab.id, position);
+            },
+            [onScroll],
+          )}
+        >
+          {tab.content()}
+        </TabPanel>
+      );
+    });
+  }, [tabs, selectedTab]);
+
+  if (evalSpec === undefined) {
+    return <EmptyPanel />;
+  } else {
+    const tabTools = Object.keys(tabs)
+      .map((key) => {
+        const tab = tabs[key];
+        return tab;
+      })
+      .filter((tab) => {
+        return tab.id === selectedTab;
+      })
+      .map((tab) => {
+        if (tab.tools) {
+          const tools = tab.tools();
+          return tools;
+        } else {
+          return null;
+        }
+      });
+
+    return (
+      <Fragment>
+        <Navbar
+          evalSpec={evalSpec}
+          evalPlan={evalPlan}
+          evalResults={evalResults}
+          evalStats={evalStats}
+          samples={samples}
+          evalDescriptor={evalDescriptor}
+          status={status}
+          file={logFileName}
+          showToggle={showToggle}
+          offcanvas={offcanvas}
+          setOffcanvas={setOffcanvas}
+        />
+        <div ref={divRef} className={clsx("workspace", styles.workspace)}>
+          <div className={clsx("log-detail", styles.tabContainer)}>
+            <TabSet
+              id="log-details"
+              tools={tabTools}
+              type="pills"
+              className={clsx(styles.tabSet, "text-size-smaller")}
+              tabControlsClassName={clsx(styles.tabs, "text-size-smaller")}
+              tabPanelsClassName={clsx(styles.tabPanels)}
+            >
+              {tabPanels}
+            </TabSet>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+};

inspect_ai/_view/www/src/workspace/error/TaskErrorPanel.module.css

@@ -0,0 +1,3 @@
+.task-error-display {
+  font-size: clamp(0.2rem, calc(0.2em + 0.93vw), 0.9rem);
+}

inspect_ai/_view/www/src/workspace/error/TaskErrorPanel.tsx

@@ -0,0 +1,28 @@
+import { ApplicationIcons } from "../../appearance/icons";
+
+import { ANSIDisplay } from "../../components/AnsiDisplay";
+import { Card, CardBody, CardHeader } from "../../components/Card";
+import { EvalError } from "../../types/log";
+
+import styles from "./TaskErrorPanel.module.css";
+
+interface TaskErrorProps {
+  error: EvalError;
+}
+
+export const TaskErrorCard: React.FC<TaskErrorProps> = ({ error }) => {
+  return (
+    <Card>
+      <CardHeader
+        icon={ApplicationIcons.error}
+        label="Task Failed: ${error.message}"
+      ></CardHeader>
+      <CardBody>
+        <ANSIDisplay
+          output={error.traceback_ansi}
+          className={styles["task-error-display"]}
+        />
+      </CardBody>
+    </Card>
+  );
+};

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

@@ -0,0 +1,54 @@
+.navbarContainer {
+  display: flex;
+  padding-top: 0;
+  margin-left: 0.5rem;
+  min-width: 250px;
+}
+
+.navbarToggle {
+  padding: 0rem 0.1rem 0.1rem 0rem;
+  display: flex;
+}
+
+.navbarBody {
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.2rem;
+}
+
+.navbarBodyContainer {
+  margin-top: 0.1rem;
+  display: grid;
+  grid-template-columns: minmax(30px, max-content) minmax(100px, max-content);
+}
+
+.navbarTaskTitle {
+  font-weight: 600;
+  margin-right: 0.3rem;
+}
+
+.navbarTaskModel {
+  padding-top: 0.4rem;
+}
+
+.navbarSecondaryContainer {
+  opacity: 0.7;
+  margin-top: 0.1rem;
+  padding-bottom: 0;
+  display: grid;
+  grid-template-columns: minmax(0, max-content) max-content;
+}
+
+.navbarStatus {
+  justify-content: end;
+  margin-right: 1em;
+  margin-bottom: 0;
+}
+
+.navbarWrapper {
+  width: 100%;
+}
+.navbarInnerWrapper {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}

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

@@ -0,0 +1,68 @@
+import clsx from "clsx";
+import { SampleSummary } from "../../api/types";
+import { EvalDescriptor } from "../../samples/descriptor/types";
+import {
+  EvalPlan,
+  EvalResults,
+  EvalSpec,
+  EvalStats,
+  Status,
+} from "../../types/log";
+import styles from "./Navbar.module.css";
+import { PrimaryBar } from "./PrimaryBar";
+import { SecondaryBar } from "./SecondaryBar";
+
+interface NavBarProps {
+  file?: string;
+  evalSpec?: EvalSpec;
+  evalResults?: EvalResults;
+  evalPlan?: EvalPlan;
+  evalStats?: EvalStats;
+  evalDescriptor?: EvalDescriptor;
+  samples?: SampleSummary[];
+  status?: Status;
+  offcanvas: boolean;
+  setOffcanvas: (offcanvas: boolean) => void;
+  showToggle: boolean;
+}
+
+/**
+ * Renders the Navbar
+ */
+export const Navbar: React.FC<NavBarProps> = ({
+  file,
+  evalSpec,
+  evalPlan,
+  evalResults,
+  evalStats,
+  samples,
+  evalDescriptor,
+  showToggle,
+  offcanvas,
+  setOffcanvas,
+  status,
+}) => {
+  return (
+    <nav className={clsx("navbar", "sticky-top", styles.navbarWrapper)}>
+      <PrimaryBar
+        file={file}
+        evalSpec={evalSpec}
+        evalResults={evalResults}
+        samples={samples}
+        showToggle={showToggle}
+        offcanvas={offcanvas}
+        setOffcanvas={setOffcanvas}
+        status={status}
+      />
+      <SecondaryBar
+        evalSpec={evalSpec}
+        evalPlan={evalPlan}
+        evalResults={evalResults}
+        evalStats={evalStats}
+        samples={samples}
+        evalDescriptor={evalDescriptor}
+        status={status}
+      />
+    </nav>
+  );
+};

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

@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  padding-top: 0;
+  margin-left: 0.5rem;
+  min-width: 250px;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: minmax(auto, 1fr) 1fr;
+  width: 100%;
+}
+
+.toggle {
+  padding: 0rem 0.1rem 0.1rem 0rem;
+  display: flex;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.2rem;
+}
+
+.bodyContainer {
+  margin-top: 0.1rem;
+  display: grid;
+  grid-template-columns: minmax(30px, max-content) minmax(100px, max-content);
+}
+
+.taskTitle {
+  font-weight: 600;
+  margin-right: 0.3rem;
+}
+
+.taskModel {
+  padding-top: 0.4rem;
+}
+
+.taskStatus {
+  justify-content: end;
+  margin-right: 1em;
+  margin-bottom: 0;
+}
+
+.secondaryContainer {
+  opacity: 0.7;
+  margin-top: 0.1rem;
+  padding-bottom: 0;
+  display: grid;
+  grid-template-columns: minmax(0, max-content) max-content;
+}

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

@@ -0,0 +1,113 @@
+import clsx from "clsx";
+import { useCallback } from "react";
+import { SampleSummary } from "../../api/types";
+import { ApplicationIcons } from "../../appearance/icons";
+import { CopyButton } from "../../components/CopyButton";
+import { EvalResults, EvalSpec, Status } from "../../types/log";
+import { filename } from "../../utils/path";
+import styles from "./PrimaryBar.module.css";
+import { ResultsPanel } from "./ResultsPanel";
+import { CancelledPanel, ErroredPanel, RunningPanel } from "./StatusPanel";
+
+interface PrimaryBarProps {
+  showToggle: boolean;
+  offcanvas: boolean;
+  setOffcanvas: (offcanvas: boolean) => void;
+  status?: Status;
+  evalResults?: EvalResults;
+  samples?: SampleSummary[];
+  file?: string;
+  evalSpec?: EvalSpec;
+}
+
+export const PrimaryBar: React.FC<PrimaryBarProps> = ({
+  showToggle,
+  offcanvas,
+  status,
+  evalResults,
+  samples,
+  file,
+  evalSpec,
+  setOffcanvas,
+}) => {
+  let statusPanel;
+  if (status === "success") {
+    statusPanel = <ResultsPanel results={evalResults} />;
+  } else if (status === "cancelled") {
+    statusPanel = <CancelledPanel sampleCount={samples?.length || 0} />;
+  } else if (status === "started") {
+    statusPanel = <RunningPanel sampleCount={samples?.length || 0} />;
+  } else if (status === "error") {
+    statusPanel = <ErroredPanel sampleCount={samples?.length || 0} />;
+  }
+  const logFileName = file ? filename(file) : "";
+
+  const handleToggle = useCallback(() => {
+    setOffcanvas(!offcanvas);
+  }, [offcanvas]);
+
+  return (
+    <div className={clsx(styles.wrapper)}>
+      <div
+        className={clsx(
+          "navbar-brand",
+          "navbar-text",
+          "mb-0",
+          styles.container,
+        )}
+      >
+        {showToggle ? (
+          <button
+            id="sidebarToggle"
+            onClick={handleToggle}
+            className={clsx(
+              "btn",
+              offcanvas ? "d-md-none" : undefined,
+              styles.toggle,
+            )}
+            type="button"
+          >
+            <i className={ApplicationIcons.menu}></i>
+          </button>
+        ) : (
+          ""
+        )}
+        <div className={styles.body}>
+          <div className={styles.bodyContainer}>
+            <div
+              id="task-title"
+              className={clsx("task-title", "text-truncate", styles.taskTitle)}
+              title={evalSpec?.task}
+            >
+              {evalSpec?.task}
+            </div>
+            <div
+              id="task-model"
+              className={clsx(
+                "task-model",
+                "text-truncate",
+                styles.taskModel,
+                "text-size-base",
+              )}
+              title={evalSpec?.model}
+            >
+              {evalSpec?.model}
+            </div>
+          </div>
+          <div className={clsx("text-size-small", styles.secondaryContainer)}>
+            <div className={clsx("navbar-secondary-text", "text-truncate")}>
+              {logFileName}
+            </div>
+            {file ? <CopyButton value={file} /> : ""}
+          </div>
+        </div>
+      </div>
+      <div className={clsx(styles.taskStatus, "navbar-text")}>
+        {statusPanel}
+      </div>
+      <div id="task-created" style={{ display: "none" }}>
+        {evalSpec?.created}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+.simpleMetricsRows {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: end;
+  height: 100%;
+  align-items: center;
+  max-height: 15em;
+  overflow: scroll;
+}
+
+.multiMetricsRows {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: end;
+  height: 100%;
+  align-items: center;
+  margin-top: 0.2rem;
+  padding-bottom: 0.4rem;
+  row-gap: 1em;
+  max-height: 15em;
+  overflow: scroll;
+}
+
+.verticalMetricReducer {
+  font-size: var(--inspect-font-size-smaller);
+  text-align: center;
+  padding-top: 0.3rem;
+  margin-bottom: -0.3rem;
+}
+
+.verticalMetricName {
+  font-size: var(--inspect-font-size-smaller);
+  text-align: center;
+  padding-top: 0.3rem;
+  margin-bottom: -0.2rem;
+  border-bottom: solid var(--bs-border-color) 1px;
+}
+
+.verticalMetricValue {
+  font-size: var(--inspect-font-size-larger);
+  font-weight: 500;
+  text-align: center;
+}
+
+.multiScorerReducer {
+  text-align: center;
+  margin-bottom: -0.3rem;
+}
+
+.multiScorerLabel {
+  text-align: center;
+  border-bottom: solid var(--bs-border-color) 1px;
+  margin-bottom: -0.1rem;
+}
+
+.multiScorerValue {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-column-gap: 0.3rem;
+  grid-row-gap: 0;
+}
+
+.multiScorerValueContent {
+  font-weight: 600;
+}

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

@@ -0,0 +1,156 @@
+import clsx from "clsx";
+import { EvalMetric, EvalResults, EvalScore, Reducer } from "../../types/log";
+import { formatPrettyDecimal } from "../../utils/format";
+import styles from "./ResultsPanel.module.css";
+
+interface ResultsPanelProps {
+  results?: EvalResults;
+}
+
+interface MetricSummary {
+  reducer: Reducer;
+  metric: EvalMetric;
+}
+
+export const ResultsPanel: React.FC<ResultsPanelProps> = ({ results }) => {
+  // Map the scores into a list of key/values
+  if (results?.scores?.length === 1) {
+    const scorers: Record<string, MetricSummary[]> = {};
+    results.scores.map((score) => {
+      scorers[score.name] = Object.keys(score.metrics).map((key) => {
+        return {
+          reducer: score.reducer,
+          metric: {
+            name: key,
+            value: score.metrics[key].value,
+            options: {},
+            metadata: {},
+          },
+        };
+      });
+    });
+
+    const metrics = Object.values(scorers)[0];
+    return (
+      <div className={styles.simpleMetricsRows}>
+        {metrics.map((metric, i) => {
+          return <VerticalMetric metricSummary={metric} isFirst={i === 0} />;
+        })}
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.multiMetricsRows}>
+        {results?.scores?.map((score, index) => {
+          return <MultiScorerMetric scorer={score} isFirst={index === 0} />;
+        })}
+      </div>
+    );
+  }
+};
+
+interface VerticalMetricProps {
+  metricSummary: MetricSummary;
+  isFirst: boolean;
+}
+
+/** Renders a Vertical Metric
+ */
+const VerticalMetric: React.FC<VerticalMetricProps> = ({
+  metricSummary,
+  isFirst,
+}) => {
+  const reducer_component = metricSummary.reducer ? (
+    <div
+      className={clsx(
+        "text-style-label",
+        "text-style-secondary",
+        styles.verticalMetricReducer,
+      )}
+    >
+      {metricSummary.reducer}
+    </div>
+  ) : (
+    ""
+  );
+
+  return (
+    <div style={{ paddingLeft: isFirst ? "0" : "1em" }}>
+      <div
+        className={clsx(
+          "vertical-metric-label",
+          "text-style-label",
+          "text-style-secondary",
+          styles.verticalMetricName,
+        )}
+      >
+        {metricSummary.metric.name}
+      </div>
+      {reducer_component}
+      <div
+        className={clsx("vertical-metric-value", styles.verticalMetricValue)}
+      >
+        {formatPrettyDecimal(metricSummary.metric.value)}
+      </div>
+    </div>
+  );
+};
+
+interface MultiScorerMetricProps {
+  scorer: EvalScore;
+  isFirst: boolean;
+}
+
+const MultiScorerMetric: React.FC<MultiScorerMetricProps> = ({
+  scorer,
+  isFirst,
+}) => {
+  const titleFontClz = "text-size-base";
+  const reducerFontClz = "text-size-smaller";
+  const valueFontClz = "text-size-base";
+
+  const reducer_component = scorer.reducer ? (
+    <div
+      className={clsx(
+        reducerFontClz,
+        "text-style-label",
+        "text-style-secondary",
+        styles.multiScorerReducer,
+      )}
+    >
+      {scorer.reducer}
+    </div>
+  ) : (
+    ""
+  );
+
+  return (
+    <div style={{ paddingLeft: isFirst ? "0" : "1.5em" }}>
+      <div
+        className={clsx(
+          titleFontClz,
+          "text-style-label",
+          "text-style-secondary",
+          "multi-score-label",
+          styles.multiScorerLabel,
+        )}
+      >
+        {scorer.name}
+      </div>
+      {reducer_component}
+      <div className={clsx(valueFontClz, styles.multiScorerValue)}>
+        {Object.keys(scorer.metrics).map((key) => {
+          const metric = scorer.metrics[key];
+          return (
+            <div>
+              <div>{metric.name}</div>
+              <div className={styles.multiScorerValueContent}>
+                {formatPrettyDecimal(metric.value)}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};