inspect-ai 0.3.89__py3-none-any.whl → 0.3.91__py3-none-any.whl

inspect_ai/_view/www/src/app/log-view/tabs/JsonTab.tsx

@@ -0,0 +1,136 @@
+import { filename } from "../../../utils/path";
+
+import clsx from "clsx";
+import { FC, MouseEvent, useMemo } from "react";
+import {
+  EvalError,
+  EvalPlan,
+  EvalResults,
+  EvalSpec,
+  EvalStats,
+  Status,
+} from "../../../@types/log";
+import { DownloadPanel } from "../../../components/DownloadPanel";
+import { JSONPanel } from "../../../components/JsonPanel";
+import { ToolButton } from "../../../components/ToolButton";
+import { kLogViewJsonTabId } from "../../../constants";
+import { useStore } from "../../../state/store";
+import { ApplicationIcons } from "../../appearance/icons";
+import styles from "./JsonTab.module.css";
+
+const kJsonMaxSize = 10000000;
+
+// Individual hook for JSON tab
+export const useJsonTabConfig = (
+  evalVersion: number | undefined,
+  evalStatus: Status | undefined,
+  evalSpec: EvalSpec | undefined,
+  evalPlan: EvalPlan | undefined,
+  evalError: EvalError | undefined | null,
+  evalResults: EvalResults | undefined | null,
+  evalStats: EvalStats | undefined,
+) => {
+  const selectedLogFile = useStore((state) =>
+    state.logsActions.getSelectedLogFile(),
+  );
+  const selectedTab = useStore((state) => state.app.tabs.workspace);
+
+  return useMemo(() => {
+    const evalHeader = {
+      version: evalVersion,
+      status: evalStatus,
+      eval: evalSpec,
+      plan: evalPlan,
+      error: evalError,
+      results: evalResults,
+      stats: evalStats,
+    };
+
+    return {
+      id: kLogViewJsonTabId,
+      label: "JSON",
+      scrollable: true,
+      component: JsonTab,
+      componentProps: {
+        logFile: selectedLogFile,
+        json: JSON.stringify(evalHeader, null, 2),
+        selected: selectedTab === kLogViewJsonTabId,
+      },
+      tools: () => [
+        <ToolButton
+          key="copy-json"
+          label="Copy JSON"
+          icon={ApplicationIcons.copy}
+          className={clsx("task-btn-json-copy", "clipboard-button")}
+          data-clipboard-target="#task-json-contents"
+          onClick={copyFeedback}
+        />,
+      ],
+    };
+  }, [
+    selectedLogFile,
+    evalVersion,
+    evalStatus,
+    evalSpec,
+    evalPlan,
+    evalError,
+    evalResults,
+    evalStats,
+    selectedTab,
+  ]);
+};
+
+// Helper function for copy feedback
+const copyFeedback = (e: MouseEvent<HTMLElement>) => {
+  const textEl = e.currentTarget.querySelector(".task-btn-copy-content");
+  const iconEl = e.currentTarget.querySelector("i.bi");
+  if (textEl) {
+    const htmlEl = textEl as HTMLElement;
+    const htmlIconEl = iconEl as HTMLElement;
+    const oldText = htmlEl.innerText;
+    const oldIconClz = htmlIconEl.className;
+    htmlEl.innerText = "Copied!";
+    htmlIconEl.className = `${ApplicationIcons.confirm}`;
+    setTimeout(() => {
+      window.getSelection()?.removeAllRanges();
+    }, 50);
+    setTimeout(() => {
+      htmlEl.innerText = oldText;
+      htmlIconEl.className = oldIconClz;
+    }, 1250);
+  }
+};
+
+interface JsonTabProps {
+  logFile?: string;
+  selected: boolean;
+  json: string;
+}
+
+/**
+ * Renders JSON tab
+ */
+export const JsonTab: FC<JsonTabProps> = ({ logFile, json }) => {
+  const downloadFiles = useStore((state) => state.capabilities.downloadFiles);
+  if (logFile && json.length > kJsonMaxSize && 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>
+    );
+  }
+};

inspect_ai/_view/www/src/{workspace → app/log-view}/tabs/SamplesTab.tsx

@@ -1,17 +1,16 @@
-import {
-  FC,
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { FC, Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
-import { NoContentsPanel } from "../../components/NoContentsPanel.tsx";
-import { InlineSampleDisplay } from "../../samples/InlineSampleDisplay.tsx";
-import { SampleDialog } from "../../samples/SampleDialog.tsx";
-import { SampleList } from "../../samples/list/SampleList.tsx";
+import { Status } from "../../../@types/log";
+import { InlineSampleDisplay } from "../../../app/samples/InlineSampleDisplay.tsx";
+import { SampleDialog } from "../../../app/samples/SampleDialog.tsx";
+import {
+  SampleTools,
+  ScoreFilterTools,
+} from "../../../app/samples/SamplesTools.tsx";
+import { SampleList } from "../../../app/samples/list/SampleList.tsx";
+import { NoContentsPanel } from "../../../components/NoContentsPanel.tsx";
+import { ToolButton } from "../../../components/ToolButton.tsx";
+import { kLogViewSamplesTabId } from "../../../constants.ts";
 import {
   useFilteredSamples,
   useGroupBy,
@@ -19,19 +18,67 @@ import {
   useSampleDescriptor,
   useScore,
   useTotalSampleCount,
-} from "../../state/hooks.ts";
-import { useStore } from "../../state/store.ts";
+} from "../../../state/hooks.ts";
+import { useStore } from "../../../state/store.ts";
+import { ApplicationIcons } from "../../appearance/icons.ts";
 import { RunningNoSamples } from "./RunningNoSamples.tsx";
 import { getSampleProcessor } from "./grouping.ts";
 import { ListItem } from "./types.ts";
 
+// Individual hook for Samples tab
+export const useSamplesTabConfig = (
+  evalStatus: Status | undefined,
+  refreshLog: () => void,
+) => {
+  const totalSampleCount = useTotalSampleCount();
+  const samplesDescriptor = useSampleDescriptor();
+  const sampleSummaries = useFilteredSamples();
+  const streamSamples = useStore((state) => state.capabilities.streamSamples);
+
+  return useMemo(() => {
+    return {
+      id: kLogViewSamplesTabId,
+      scrollable: false,
+      label: totalSampleCount > 1 ? "Samples" : "Sample",
+      component: SamplesTab,
+      componentProps: {
+        running: evalStatus === "started",
+      },
+      tools: () =>
+        !samplesDescriptor
+          ? undefined
+          : totalSampleCount === 1
+            ? [<ScoreFilterTools />]
+            : [
+                <SampleTools
+                  samples={sampleSummaries || []}
+                  key="sample-tools"
+                />,
+                evalStatus === "started" && !streamSamples && (
+                  <ToolButton
+                    key="refresh"
+                    label="Refresh"
+                    icon={ApplicationIcons.refresh}
+                    onClick={refreshLog}
+                  />
+                ),
+              ],
+    };
+  }, [
+    evalStatus,
+    refreshLog,
+    sampleSummaries,
+    samplesDescriptor,
+    totalSampleCount,
+  ]);
+};
+
 interface SamplesTabProps {
   // Required props
   running: boolean;
 }
 
 export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
-  const selectSample = useStore((state) => state.logActions.selectSample);
   const selectedSampleIndex = useStore(
     (state) => state.log.selectedSampleIndex,
   );
@@ -68,25 +115,6 @@ export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
   const [sampleItems, setSampleItems] = useState<ListItem[]>([]);
 
   const sampleListHandle = useRef<VirtuosoHandle | null>(null);
-  const sampleDialogRef = useRef<HTMLDivElement>(null);
-
-  const selectedSampleTab = useStore((state) => state.app.tabs.sample);
-  const setSelectedSampleTab = useStore(
-    (state) => state.appActions.setSampleTab,
-  );
-  const showingSampleDialog = useStore((state) => state.app.dialogs.sample);
-  const setShowingSampleDialog = useStore(
-    (state) => state.appActions.setShowingSampleDialog,
-  );
-
-  // Shows the sample dialog
-  const showSample = useCallback(
-    (index: number) => {
-      selectSample(index);
-      setShowingSampleDialog(true);
-    },
-    [selectSample, setShowingSampleDialog],
-  );
 
   // Keep the selected item scrolled into view
   useEffect(() => {
@@ -97,13 +125,25 @@ export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
     }, 0);
   }, [selectedSampleIndex]);
 
-  // Focus the dialog when it is shown
+  const showingSampleDialog = useStore((state) => state.app.dialogs.sample);
+
+  // Focus the sample list when sample dialog is hidden, but only when it's being dismissed
+  const previousShowingDialogRef = useRef(showingSampleDialog);
   useEffect(() => {
-    if (showingSampleDialog) {
+    // Only focus when transitioning from showing dialog to not showing dialog
+    if (
+      previousShowingDialogRef.current &&
+      !showingSampleDialog &&
+      sampleListHandle.current
+    ) {
       setTimeout(() => {
-        sampleDialogRef.current?.focus();
-      }, 0);
+        const element = document.querySelector(".samples-list");
+        if (element instanceof HTMLElement) {
+          element.focus();
+        }
+      }, 10);
     }
+    previousShowingDialogRef.current = showingSampleDialog;
   }, [showingSampleDialog]);
 
   const sampleProcessor = useMemo(() => {
@@ -149,25 +189,6 @@ export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
     );
   }, [sampleSummaries, sampleProcessor]);
 
-  const previousSampleIndex = useCallback(() => {
-    return selectedSampleIndex > 0 ? selectedSampleIndex - 1 : -1;
-  }, [selectedSampleIndex]);
-
-  // Manage the next / previous state the selected sample
-  const nextSample = useCallback(() => {
-    const next = Math.min(selectedSampleIndex + 1, sampleItems.length - 1);
-    if (next > -1) {
-      selectSample(next);
-    }
-  }, [selectedSampleIndex, sampleItems, selectSample]);
-
-  const previousSample = useCallback(() => {
-    const prev = previousSampleIndex();
-    if (prev > -1) {
-      selectSample(prev);
-    }
-  }, [previousSampleIndex, selectSample]);
-
   const title =
     selectedSampleIndex > -1 && sampleItems.length > selectedSampleIndex
       ? sampleItems[selectedSampleIndex].label
@@ -183,11 +204,7 @@ export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
     return (
       <Fragment>
         {samplesDescriptor && totalSampleCount === 1 ? (
-          <InlineSampleDisplay
-            id="sample-display"
-            selectedTab={selectedSampleTab}
-            setSelectedTab={setSelectedSampleTab}
-          />
+          <InlineSampleDisplay />
         ) : undefined}
         {samplesDescriptor && totalSampleCount > 1 ? (
           <SampleList
@@ -195,23 +212,15 @@ export const SamplesTab: FC<SamplesTabProps> = ({ running }) => {
             items={items}
             totalItemCount={evalSampleCount}
             running={running}
-            nextSample={nextSample}
-            prevSample={previousSample}
-            showSample={showSample}
           />
         ) : undefined}
-        {showingSampleDialog ? (
+        {showingSampleDialog && (
           <SampleDialog
             id={String(selectedSample?.id || "")}
             title={title}
             showingSampleDialog={showingSampleDialog}
-            setShowingSampleDialog={setShowingSampleDialog}
-            selectedTab={selectedSampleTab}
-            setSelectedTab={setSelectedSampleTab}
-            nextSample={nextSample}
-            prevSample={previousSample}
           />
-        ) : undefined}
+        )}
       </Fragment>
     );
   }

inspect_ai/_view/www/src/{workspace → app/log-view}/tabs/grouping.ts

@@ -1,7 +1,7 @@
-import { SampleSummary } from "../../api/types";
+import { Epochs } from "../../../@types/log";
+import { ScoreLabel } from "../../../app/types";
+import { SampleSummary } from "../../../client/api/types";
 import { SamplesDescriptor } from "../../samples/descriptor/samplesDescriptor";
-import { ScoreLabel } from "../../types";
-import { Epochs } from "../../types/log";
 import { ListItem, SampleListItem, SeparatorListItem } from "./types";
 
 export const getSampleProcessor = (

inspect_ai/_view/www/src/{workspace → app/log-view}/tabs/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { SampleSummary } from "../../api/types";
+import { SampleSummary } from "../../../client/api/types";
 
 export interface SampleListItem {
   label: string;

inspect_ai/_view/www/src/{plan → app/plan}/DatasetDetailView.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import { MetaDataView } from "../metadata/MetaDataView";
-import { EvalDataset } from "../types/log";
+import { EvalDataset } from "../../@types/log";
+import { MetaDataView } from "../content/MetaDataView";
 
 import { CSSProperties, FC } from "react";
 import styles from "./DatasetDetailView.module.css";

inspect_ai/_view/www/src/{plan → app/plan}/DetailStep.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { FC } from "react";
-import { MetaDataGrid } from "../metadata/MetaDataGrid";
+import { MetaDataGrid } from "../content/MetaDataGrid";
 import styles from "./DetailStep.module.css";
 
 interface DetailStepProps {

inspect_ai/_view/www/src/{plan → app/plan}/ModelCard.tsx

@@ -1,10 +1,10 @@
 import { FC } from "react";
-import { ApplicationIcons } from "../appearance/icons";
-import { Card, CardBody, CardHeader } from "../components/Card";
-import { EvalModelConfig, EvalSpec } from "../types/log";
 
 import clsx from "clsx";
-import { MetaDataGrid } from "../metadata/MetaDataGrid";
+import { EvalModelConfig, EvalSpec } from "../../@types/log";
+import { Card, CardBody, CardHeader } from "../../components/Card";
+import { ApplicationIcons } from "../appearance/icons";
+import { MetaDataGrid } from "../content/MetaDataGrid";
 import styles from "./ModelCard.module.css";
 
 interface ModelCardProps {

inspect_ai/_view/www/src/{plan → app/plan}/PlanCard.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
+import { EvalPlan, EvalScore, EvalSpec } from "../../@types/log";
+import { Card, CardBody, CardHeader } from "../../components/Card";
 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 {

inspect_ai/_view/www/src/{plan → app/plan}/PlanDetailView.tsx

@@ -1,14 +1,14 @@
-import { MetaDataView } from "../metadata/MetaDataView";
-import { EvalPlan, EvalScore, EvalSpec, Params2 } from "../types/log";
-import { toTitleCase } from "../utils/format";
-import { ghCommitUrl } from "../utils/git";
+import { EvalPlan, EvalScore, EvalSpec, Params2 } from "../../@types/log";
+import { toTitleCase } from "../../utils/format";
+import { ghCommitUrl } from "../../utils/git";
+import { MetaDataView } from "../content/MetaDataView";
 import { DatasetDetailView } from "./DatasetDetailView";
 import { ScorerDetailView } from "./ScorerDetailView";
 import { SolversDetailView } from "./SolverDetailView";
 
 import clsx from "clsx";
 import { FC, ReactNode } from "react";
-import { kModelNone } from "../constants";
+import { kModelNone } from "../../constants";
 import styles from "./PlanDetailView.module.css";
 
 interface PlanDetailViewProps {

inspect_ai/_view/www/src/{plan → app/plan}/SolverDetailView.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FC, Fragment } from "react";
+import { Steps } from "../../@types/log";
 import { ApplicationIcons } from "../appearance/icons";
-import { Steps } from "../types/log";
 import { DetailStep } from "./DetailStep";
 import styles from "./SolverDetailView.module.css";
 

inspect_ai/_view/www/src/app/routing/AppRouter.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from "react";
+import {
+  createHashRouter,
+  Navigate,
+  Outlet,
+  useLocation,
+} from "react-router-dom";
+import { storeImplementation } from "../../state/store";
+import { AppErrorBoundary } from "../AppErrorBoundary";
+import { LogViewContainer } from "../log-view/LogViewContainer";
+import { kLogRouteUrlPattern, kSampleRouteUrlPattern } from "./url";
+
+// Create a layout component that includes the RouteTracker
+const AppLayout = () => {
+  const location = useLocation();
+
+  // Track changes to routes
+  useEffect(() => {
+    if (storeImplementation) {
+      storeImplementation.getState().appActions.setUrlHash(location.pathname);
+    }
+  }, [location]);
+
+  return (
+    <AppErrorBoundary>
+      <Outlet />
+    </AppErrorBoundary>
+  );
+};
+
+// Create router with our routes (using hash router for static deployments)
+export const AppRouter = createHashRouter(
+  [
+    {
+      path: "/",
+      element: <AppLayout />,
+      children: [
+        {
+          index: true, // This will match exactly the "/" path
+          element: <LogViewContainer />,
+        },
+        {
+          path: kLogRouteUrlPattern,
+          element: <LogViewContainer />,
+        },
+        {
+          path: kSampleRouteUrlPattern,
+          element: <LogViewContainer />,
+        },
+      ],
+    },
+    {
+      path: "*",
+      element: <Navigate to="/" replace />,
+    },
+  ],
+  { basename: "" },
+);