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

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

@@ -0,0 +1,158 @@
+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],
+  );
+
+  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)}
+            >
+              {Object.keys(tabs).map((key) => {
+                const tab = tabs[key];
+                return (
+                  <TabPanel
+                    key={tab.id}
+                    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>
+                );
+              })}
+            </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,114 @@
+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,
+}) => {
+  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")}>
+        {status === "success" ? (
+          <ResultsPanel results={evalResults} />
+        ) : undefined}
+        {status === "cancelled" ? (
+          <CancelledPanel sampleCount={samples?.length || 0} />
+        ) : undefined}
+        {status === "started" ? (
+          <RunningPanel sampleCount={samples?.length || 0} />
+        ) : undefined}
+        {status === "error" ? (
+          <ErroredPanel sampleCount={samples?.length || 0} />
+        ) : undefined}
+      </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,90 @@
+.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;
+  align-items: center;
+  margin-top: 0.2rem;
+  padding-bottom: 0.4rem;
+  row-gap: 1em;
+  max-height: 15em;
+  overflow: scroll;
+  align-items: baseline;
+}
+
+.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-weight: 500;
+  text-align: center;
+}
+
+.multiScorer {
+  padding-left: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5em 1em;
+}
+
+.multiScorerIndent {
+  padding-left: 1.5em;
+}
+
+.multiScorerReducer {
+  text-align: center;
+  margin-bottom: -0.3rem;
+  margin-top: 0.2em;
+}
+
+.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-auto-rows: auto;
+  grid-column-gap: 0.3rem;
+  grid-row-gap: 0;
+  padding-top: 0.3em;
+}
+
+.multiScorerValueContent {
+  font-weight: 600;
+  text-align: center;
+}
+
+.multiScoreMetricGrid {
+  display: grid;
+  grid-template-rows: auto auto;
+  column-gap: 1em;
+  padding: 0 0.2em;
+  justify-content: center;
+}