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

inspect_ai/_view/www/src/app/routing/navigationHooks.ts

@@ -0,0 +1,182 @@
+import { useCallback } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useFilteredSamples } from "../../state/hooks";
+import { useStore } from "../../state/store";
+import { directoryRelativeUrl } from "../../utils/uri";
+import { logUrl, logUrlRaw, sampleUrl } from "./url";
+
+export const useLogNavigation = () => {
+  const navigate = useNavigate();
+  const { logPath } = useParams<{ logPath: string }>();
+  const logs = useStore((state) => state.logs.logs);
+  const loadedLog = useStore((state) => state.log.loadedLog);
+
+  const selectTab = useCallback(
+    (tabId: string) => {
+      // Only update URL if we have a loaded log
+      if (loadedLog && logPath) {
+        // We already have the logPath from params, just navigate to the tab
+        const url = logUrlRaw(logPath, tabId);
+        navigate(url);
+      } else if (loadedLog) {
+        // Fallback to constructing the path if needed
+        const url = logUrl(loadedLog, logs.log_dir, tabId);
+        navigate(url);
+      }
+    },
+    [loadedLog, logPath, logs.log_dir, navigate],
+  );
+
+  return {
+    selectTab,
+  };
+};
+
+/**
+ * Hook that provides sample navigation utilities with proper URL handling
+ * for use across the application
+ */
+export const useSampleNavigation = () => {
+  const navigate = useNavigate();
+
+  // The log directory
+  const logDirectory = useStore((state) => state.logs.logs.log_dir);
+
+  // The log
+  const { logPath, tabId, sampleTabId } = useParams<{
+    logPath?: string;
+    tabId?: string;
+    sampleTabId?: string;
+  }>();
+
+  // Get the store access values directly in the hook
+  const getSelectedLogFile = useStore(
+    (state) => state.logsActions.getSelectedLogFile,
+  );
+
+  // Helper function to resolve the log path for URLs
+  const resolveLogPath = useCallback(() => {
+    // If we have a logPath from URL params, use that
+    if (logPath) {
+      return logPath;
+    }
+
+    // Otherwise use the selected log file
+    const selectedLogFile = getSelectedLogFile();
+
+    if (selectedLogFile) {
+      return directoryRelativeUrl(selectedLogFile, logDirectory);
+    }
+
+    return undefined;
+  }, [logPath, getSelectedLogFile, logDirectory]);
+
+  // The samples
+  const sampleSummaries = useFilteredSamples();
+
+  // Sample hooks
+  const selectedSampleIndex = useStore(
+    (state) => state.log.selectedSampleIndex,
+  );
+  const selectSample = useStore((state) => state.logActions.selectSample);
+  const setShowingSampleDialog = useStore(
+    (state) => state.appActions.setShowingSampleDialog,
+  );
+
+  // Navigate to a specific sample with index
+  const showSample = useCallback(
+    (index: number, specifiedSampleTabId?: string) => {
+      if (sampleSummaries && index >= 0 && index < sampleSummaries.length) {
+        const sample = sampleSummaries[index];
+        const resolvedPath = resolveLogPath();
+
+        if (resolvedPath) {
+          // Update internal state
+          selectSample(index);
+          setShowingSampleDialog(true);
+
+          // Use specified sampleTabId if provided, otherwise use current sampleTabId from URL params
+          const currentSampleTabId = specifiedSampleTabId || sampleTabId;
+
+          const url = sampleUrl(
+            resolvedPath,
+            sample.id,
+            sample.epoch,
+            currentSampleTabId,
+          );
+
+          // Navigate to the sample URL
+          navigate(url);
+        }
+      }
+    },
+    [
+      sampleSummaries,
+      resolveLogPath,
+      selectSample,
+      setShowingSampleDialog,
+      navigate,
+      tabId,
+      sampleTabId,
+    ],
+  );
+
+  // Navigate to the next sample
+  const nextSample = useCallback(() => {
+    const itemsCount = sampleSummaries.length;
+    const next = Math.min(selectedSampleIndex + 1, itemsCount - 1);
+    if (next > -1) {
+      showSample(next, sampleTabId);
+    }
+  }, [selectedSampleIndex, showSample, sampleTabId]);
+
+  // Navigate to the previous sample
+  const previousSample = useCallback(() => {
+    const prev = selectedSampleIndex - 1;
+    if (prev > -1) {
+      showSample(prev, sampleTabId);
+    }
+  }, [selectedSampleIndex, showSample, sampleTabId]);
+
+  // Get a sample URL for a specific sample
+  const getSampleUrl = useCallback(
+    (
+      sampleId: string | number,
+      epoch: number,
+      specificSampleTabId?: string,
+    ) => {
+      const resolvedPath = resolveLogPath();
+      if (resolvedPath) {
+        const currentSampleTabId = specificSampleTabId || sampleTabId;
+        const url = sampleUrl(
+          resolvedPath,
+          sampleId,
+          epoch,
+          currentSampleTabId,
+        );
+        return url;
+      }
+      return undefined;
+    },
+    [resolveLogPath, tabId, sampleTabId],
+  );
+
+  // Navigate back from sample dialog
+  const clearSampleUrl = useCallback(() => {
+    const resolvedPath = resolveLogPath();
+    if (resolvedPath) {
+      const url = logUrlRaw(resolvedPath, tabId);
+      navigate(url);
+    }
+  }, [resolveLogPath, navigate, tabId]);
+
+  return {
+    showSample,
+    nextEnabled: selectedSampleIndex < sampleSummaries.length - 1,
+    nextSample,
+    previousEnabled: selectedSampleIndex > 0,
+    previousSample,
+    getSampleUrl,
+    clearSampleUrl,
+  };
+};

inspect_ai/_view/www/src/app/routing/url.ts

@@ -0,0 +1,43 @@
+import { directoryRelativeUrl } from "../../utils/uri";
+
+export const kLogRouteUrlPattern = "/logs/:logPath/:tabId?/:sampleTabId?";
+export const kSampleRouteUrlPattern =
+  "/logs/:logPath/samples/sample/:sampleId/:epoch?/:sampleTabId?";
+
+export const baseUrl = (
+  logPath: string,
+  sampleId?: string | number,
+  sampleEpoch?: string | number,
+) => {
+  if (sampleId !== undefined && sampleEpoch !== undefined) {
+    return sampleUrl(logPath, sampleId, sampleEpoch);
+  } else {
+    return logUrl(logPath);
+  }
+};
+
+export const sampleUrl = (
+  logPath: string,
+  sampleId?: string | number,
+  sampleEpoch?: string | number,
+  sampleTabId?: string,
+) => {
+  if (sampleId !== undefined && sampleEpoch !== undefined) {
+    return `/logs/${encodeURIComponent(logPath)}/samples/sample/${encodeURIComponent(sampleId)}/${sampleEpoch}/${sampleTabId || ""}`;
+  } else {
+    return `/logs/${encodeURIComponent(logPath)}/samples/${sampleTabId || ""}`;
+  }
+};
+
+export const logUrl = (log_file: string, log_dir?: string, tabId?: string) => {
+  const pathSegment = directoryRelativeUrl(log_file, log_dir);
+  return logUrlRaw(pathSegment, tabId);
+};
+
+export const logUrlRaw = (log_segment: string, tabId?: string) => {
+  if (tabId) {
+    return `/logs/${encodeURIComponent(log_segment)}/${tabId}`;
+  } else {
+    return `/logs/${encodeURIComponent(log_segment)}`;
+  }
+};

inspect_ai/_view/www/src/{samples → app/samples}/InlineSampleDisplay.tsx

@@ -1,27 +1,17 @@
 import { FC, useEffect, useRef } from "react";
-import { ErrorPanel } from "../components/ErrorPanel";
+import { ErrorPanel } from "../../components/ErrorPanel";
 import { SampleDisplay } from "./SampleDisplay";
 
 import clsx from "clsx";
-import { ProgressBar } from "../components/ProgressBar";
-import { useLogSelection, usePrevious, useSampleData } from "../state/hooks";
-import { useStore } from "../state/store";
+import { ProgressBar } from "../../components/ProgressBar";
+import { useLogSelection, usePrevious, useSampleData } from "../../state/hooks";
+import { useStore } from "../../state/store";
 import styles from "./InlineSampleDisplay.module.css";
 
-interface InlineSampleDisplayProps {
-  id: string;
-  selectedTab?: string;
-  setSelectedTab: (tab: string) => void;
-}
-
 /**
  * Inline Sample Display
  */
-export const InlineSampleDisplay: FC<InlineSampleDisplayProps> = ({
-  id,
-  selectedTab,
-  setSelectedTab,
-}) => {
+export const InlineSampleDisplay: FC = () => {
   // Sample hooks
   const sampleData = useSampleData();
   const loadSample = useStore((state) => state.sampleActions.loadSample);
@@ -40,7 +30,7 @@ export const InlineSampleDisplay: FC<InlineSampleDisplayProps> = ({
       ? logSelection.sample.completed
       : true,
   );
-  const prevLogFile = usePrevious<string | undefined>(logSelection.logFile);
+  const prevLogFile = usePrevious<string | undefined>(logSelection.loadedLog);
   useEffect(() => {
     if (logSelection.logFile && logSelection.sample) {
       const currentSampleCompleted =
@@ -49,16 +39,17 @@ export const InlineSampleDisplay: FC<InlineSampleDisplayProps> = ({
           : true;
 
       if (
-        prevLogFile !== logSelection.logFile ||
+        (prevLogFile !== undefined && prevLogFile !== logSelection.loadedLog) ||
         sampleData.sample?.id !== logSelection.sample.id ||
         sampleData.sample?.epoch !== logSelection.sample.epoch ||
-        currentSampleCompleted !== prevCompleted
+        (prevCompleted !== undefined &&
+          currentSampleCompleted !== prevCompleted)
       ) {
         loadSample(logSelection.logFile, logSelection.sample);
       }
     }
   }, [
-    logSelection.logFile,
+    logSelection.loadedLog,
     logSelection.sample?.id,
     logSelection.sample?.epoch,
     logSelection.sample?.completed,
@@ -83,14 +74,7 @@ export const InlineSampleDisplay: FC<InlineSampleDisplayProps> = ({
               error={sampleData.error}
             />
           ) : (
-            <SampleDisplay
-              id={id}
-              sample={sampleData.sample}
-              runningEvents={sampleData.running}
-              selectedTab={selectedTab}
-              setSelectedTab={setSelectedTab}
-              scrollRef={scrollRef}
-            />
+            <SampleDisplay id={"inline-sample-display"} scrollRef={scrollRef} />
           )}
         </div>
       </div>

inspect_ai/_view/www/src/{samples → app/samples}/SampleDialog.tsx

@@ -1,22 +1,18 @@
+import { LargeModal, ModalTool, ModalTools } from "../../components/LargeModal";
 import { ApplicationIcons } from "../appearance/icons";
-import { LargeModal, ModalTool, ModalTools } from "../components/LargeModal";
 
 import { FC, Ref, useCallback, useEffect, useMemo, useRef } from "react";
-import { ErrorPanel } from "../components/ErrorPanel";
-import { useLogSelection, usePrevious, useSampleData } from "../state/hooks";
-import { useStatefulScrollPosition } from "../state/scrolling";
-import { useStore } from "../state/store";
+import { ErrorPanel } from "../../components/ErrorPanel";
+import { useLogSelection, usePrevious, useSampleData } from "../../state/hooks";
+import { useStatefulScrollPosition } from "../../state/scrolling";
+import { useStore } from "../../state/store";
+import { useSampleNavigation } from "../routing/navigationHooks";
 import { SampleDisplay } from "./SampleDisplay";
 
 interface SampleDialogProps {
   id: string;
   title: string;
-  selectedTab?: string;
-  setSelectedTab: (tab: string) => void;
   showingSampleDialog: boolean;
-  setShowingSampleDialog: (showing: boolean) => void;
-  nextSample: () => void;
-  prevSample: () => void;
 }
 
 /**
@@ -25,12 +21,7 @@ interface SampleDialogProps {
 export const SampleDialog: FC<SampleDialogProps> = ({
   id,
   title,
-  nextSample,
-  prevSample,
   showingSampleDialog,
-  setShowingSampleDialog,
-  selectedTab,
-  setSelectedTab,
 }) => {
   // Scroll referernce (attach stateful trackign)
   const scrollRef: Ref<HTMLDivElement> = useRef(null);
@@ -55,6 +46,7 @@ export const SampleDialog: FC<SampleDialogProps> = ({
       : true,
   );
   const prevLogFile = usePrevious<string | undefined>(logSelection.logFile);
+
   useEffect(() => {
     if (logSelection.logFile && logSelection.sample) {
       const currentSampleCompleted =
@@ -63,10 +55,11 @@ export const SampleDialog: FC<SampleDialogProps> = ({
           : true;
 
       if (
-        prevLogFile !== logSelection.logFile ||
+        (prevLogFile !== undefined && prevLogFile !== logSelection.logFile) ||
         sampleData.sample?.id !== logSelection.sample.id ||
         sampleData.sample?.epoch !== logSelection.sample.epoch ||
-        currentSampleCompleted !== prevCompleted
+        (prevCompleted !== undefined &&
+          currentSampleCompleted !== prevCompleted)
       ) {
         loadSample(logSelection.logFile, logSelection.sample);
       }
@@ -80,52 +73,62 @@ export const SampleDialog: FC<SampleDialogProps> = ({
     sampleData.sample?.epoch,
   ]);
 
+  // Get sample navigation utilities
+  const sampleNavigation = useSampleNavigation();
+
   // Tools
   const tools = useMemo<ModalTools>(() => {
     const nextTool: ModalTool = {
       label: "Next Sample",
       icon: ApplicationIcons.next,
-      onClick: nextSample,
-      enabled: !!nextSample,
+      onClick: sampleNavigation.nextSample,
+      enabled: sampleNavigation.nextEnabled,
     };
 
     const prevTool: ModalTool = {
       label: "Previous Sample",
       icon: ApplicationIcons.previous,
-      onClick: prevSample,
-      enabled: !!prevSample,
+      onClick: sampleNavigation.previousSample,
+      enabled: sampleNavigation.previousEnabled,
     };
 
     return {
       left: [prevTool],
       right: [nextTool],
     };
-  }, [prevSample, nextSample]);
+  }, [
+    sampleNavigation.nextSample,
+    sampleNavigation.previousSample,
+    sampleNavigation.nextEnabled,
+    sampleNavigation.previousEnabled,
+  ]);
 
   const handleKeyUp = useCallback(
     (e: KeyboardEvent) => {
       switch (e.key) {
         case "ArrowRight":
-          if (nextSample) {
-            nextSample();
-          }
+          sampleNavigation.nextSample();
           break;
         case "ArrowLeft":
-          if (prevSample) {
-            prevSample();
-          }
+          sampleNavigation.previousSample();
           break;
         case "Escape":
-          setShowingSampleDialog(false);
+          // Use the navigation hook to close the dialog
+          sampleNavigation.clearSampleUrl();
           break;
       }
     },
-    [prevSample, nextSample, setShowingSampleDialog],
+    [
+      sampleNavigation.nextSample,
+      sampleNavigation.previousSample,
+      sampleNavigation.clearSampleUrl,
+    ],
   );
 
   const onHide = useCallback(() => {
-    setShowingSampleDialog(false);
-  }, [setShowingSampleDialog]);
+    // Use the navigation hook to close the dialog
+    sampleNavigation.clearSampleUrl();
+  }, [sampleNavigation]);
 
   // Provide the dialog
   return (
@@ -144,14 +147,7 @@ export const SampleDialog: FC<SampleDialogProps> = ({
       {sampleData.error ? (
         <ErrorPanel title="Sample Error" error={sampleData.error} />
       ) : (
-        <SampleDisplay
-          id={id}
-          sample={sampleData.sample}
-          runningEvents={sampleData.running}
-          selectedTab={selectedTab}
-          setSelectedTab={setSelectedTab}
-          scrollRef={scrollRef}
-        />
+        <SampleDisplay id={id} scrollRef={scrollRef} />
       )}
     </LargeModal>
   );

inspect_ai/_view/www/src/{samples → app/samples}/SampleDisplay.module.css

@@ -20,6 +20,10 @@
   margin-top: 0.4em;
 }
 
+.error {
+  padding-top: 0.5em;
+}
+
 .ansi {
   margin: 1em 0;
 }