inspect-ai 0.3.81__py3-none-any.whl → 0.3.83__py3-none-any.whl

inspect_ai/_view/www/src/samples/chat/tools/ToolInput.tsx

@@ -1,46 +1,19 @@
 import clsx from "clsx";
-import { highlightElement } from "prismjs";
-import { FC, memo, useEffect, useRef } from "react";
+import { FC } from "react";
 import { MarkdownDiv } from "../../../components/MarkdownDiv";
 
+import { usePrismHighlight } from "../../../state/hooks";
 import styles from "./ToolInput.module.css";
 
-export const useCodeHighlight = (language?: string) => {
-  const codeRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    if (codeRef.current && language) {
-      highlightElement(codeRef.current);
-    }
-  }, [language]);
-
-  return codeRef;
-};
-
 interface ToolInputProps {
   highlightLanguage?: string;
   contents?: string | object;
   toolCallView?: { content: string };
 }
-export const ToolInput: FC<ToolInputProps> = memo((props) => {
+export const ToolInput: FC<ToolInputProps> = (props) => {
   const { highlightLanguage, contents, toolCallView } = props;
 
-  const codeRef = useCodeHighlight(highlightLanguage);
-  const toolViewRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (toolCallView?.content && toolViewRef.current) {
-      requestAnimationFrame(() => {
-        const codeBlocks = toolViewRef.current!.querySelectorAll("pre code");
-        codeBlocks.forEach((block) => {
-          if (block.className.includes("language-")) {
-            block.classList.add("sourceCode");
-            highlightElement(block as HTMLElement);
-          }
-        });
-      });
-    }
-  }, [toolCallView?.content]);
+  const prismParentRef = usePrismHighlight(toolCallView?.content);
 
   if (!contents && !toolCallView?.content) return null;
 
@@ -48,8 +21,8 @@ export const ToolInput: FC<ToolInputProps> = memo((props) => {
     return (
       <MarkdownDiv
         markdown={toolCallView.content}
-        ref={toolViewRef}
-        className={clsx("text-size-small", "tool-output")}
+        ref={prismParentRef}
+        className={clsx(styles.bottomPadding, "text-size-small", "tool-output")}
       />
     );
   }
@@ -58,18 +31,21 @@ export const ToolInput: FC<ToolInputProps> = memo((props) => {
     typeof contents === "object" ? JSON.stringify(contents) : contents;
 
   return (
-    <pre className={clsx("tool-output", styles.outputPre, styles.bottomMargin)}>
-      <code
-        ref={codeRef}
-        className={clsx(
-          "source-code",
-          "sourceCode",
-          highlightLanguage ? `language-${highlightLanguage}` : undefined,
-          styles.outputCode,
-        )}
+    <div ref={prismParentRef}>
+      <pre
+        className={clsx("tool-output", styles.outputPre, styles.bottomMargin)}
       >
-        {formattedContent}
-      </code>
-    </pre>
+        <code
+          className={clsx(
+            "source-code",
+            "sourceCode",
+            highlightLanguage ? `language-${highlightLanguage}` : undefined,
+            styles.outputCode,
+          )}
+        >
+          {formattedContent}
+        </code>
+      </pre>
+    </div>
   );
-});
+};

inspect_ai/_view/www/src/samples/descriptor/samplesDescriptor.tsx

@@ -15,14 +15,14 @@ import {
 export interface SamplesDescriptor {
   evalDescriptor: EvalDescriptor;
   messageShape: MessageShape;
-  selectedScoreDescriptor?: ScoreDescriptor;
   selectedScore: (sample: BasicSampleData) => SelectedScore | undefined;
-  selectedScorerDescriptor: (sample: BasicSampleData) => ScorerDescriptor;
+  selectedScorerDescriptor: (
+    sample: BasicSampleData,
+  ) => ScorerDescriptor | undefined;
 }
 
 export const createEvalDescriptor = (
   scores: ScoreLabel[],
-  epochs: number,
   samples?: SampleSummary[],
 ): EvalDescriptor | undefined => {
   if (!samples) {
@@ -47,7 +47,13 @@ export const createEvalDescriptor = (
       sample.scores[scoreLabel.scorer] &&
       sample.scores[scoreLabel.scorer].value
     ) {
-      return sample.scores[scoreLabel.scorer].value;
+      if (typeof sample.scores[scoreLabel.scorer].value === "object") {
+        return (
+          sample.scores[scoreLabel.scorer].value as Record<string, Value2>
+        )[scoreLabel.name];
+      } else {
+        return sample.scores[scoreLabel.scorer].value;
+      }
     } else if (sample.scores[scoreLabel.name]) {
       return sample.scores[scoreLabel.name].value;
     } else {
@@ -57,10 +63,10 @@ export const createEvalDescriptor = (
 
   const scoreAnswer = (
     sample: BasicSampleData,
-    scorer: string,
+    scorer: ScoreLabel,
   ): string | undefined => {
     if (sample && sample.scores) {
-      const sampleScore = sample.scores[scorer];
+      const sampleScore = sample.scores[scorer.name];
       if (sampleScore && sampleScore.answer) {
         return sampleScore.answer;
       }
@@ -162,7 +168,7 @@ export const createEvalDescriptor = (
       return "null";
     } else if (score === undefined) {
       return "";
-    } else if (score && descriptor && descriptor.render) {
+    } else if (descriptor && descriptor.render) {
       return descriptor.render(score);
     } else {
       return <span>{String(score)}</span>;
@@ -181,7 +187,7 @@ export const createEvalDescriptor = (
         return scoreExplanation(sample, scoreLabel.scorer) || "";
       },
       answer: () => {
-        return scoreAnswer(sample, scoreLabel.scorer) || "";
+        return scoreAnswer(sample, scoreLabel) || "";
       },
       scores: () => {
         if (!sample || !sample.scores) {
@@ -252,8 +258,11 @@ export const createEvalDescriptor = (
 
   const score = (
     sample: BasicSampleData,
-    scoreLabel: ScoreLabel,
-  ): SelectedScore => {
+    scoreLabel?: ScoreLabel,
+  ): SelectedScore | undefined => {
+    if (!scoreLabel) {
+      return undefined;
+    }
     return {
       value: scoreValue(sample, scoreLabel),
       render: () => {
@@ -263,8 +272,6 @@ export const createEvalDescriptor = (
   };
 
   return {
-    epochs,
-    samples,
     scores,
     scorerDescriptor,
     scoreDescriptor,
@@ -274,14 +281,17 @@ export const createEvalDescriptor = (
 };
 
 export const createSamplesDescriptor = (
+  samples: SampleSummary[],
   evalDescriptor: EvalDescriptor,
-  selectedScore: ScoreLabel,
+  selectedScore?: ScoreLabel,
 ): SamplesDescriptor | undefined => {
   // Find the total length of the value so we can compute an average
-  const sizes = evalDescriptor.samples.reduce(
+  const sizes = samples.reduce(
     (previous, current) => {
       const text = inputString(current.input).join(" ");
-      const score = evalDescriptor.score(current, selectedScore);
+      const score = selectedScore
+        ? evalDescriptor.score(current, selectedScore)
+        : undefined;
       const scoreValue = score?.value;
       const scoreText = scoreValue
         ? String(scoreValue)
@@ -296,7 +306,9 @@ export const createSamplesDescriptor = (
       previous[2] = Math.min(
         Math.max(
           previous[2],
-          evalDescriptor.scoreAnswer(current, selectedScore?.name)?.length || 0,
+          selectedScore
+            ? evalDescriptor.scoreAnswer(current, selectedScore)?.length || 0
+            : 0,
         ),
         300,
       );
@@ -322,7 +334,7 @@ export const createSamplesDescriptor = (
     answer: Math.min(sizes[2], 300),
     limit: Math.min(sizes[3], 50),
     id: Math.min(sizes[4], 10),
-    score: Math.min(sizes[4], 30),
+    score: Math.min(sizes[5], 30),
   };
   const base =
     maxSizes.input +
@@ -353,10 +365,12 @@ export const createSamplesDescriptor = (
   return {
     evalDescriptor,
     messageShape,
-    selectedScoreDescriptor: evalDescriptor.scoreDescriptor(selectedScore),
-    selectedScore: (sample) => evalDescriptor.score(sample, selectedScore),
+    selectedScore: (sample) =>
+      selectedScore ? evalDescriptor.score(sample, selectedScore) : undefined,
     selectedScorerDescriptor: (sample) =>
-      evalDescriptor.scorerDescriptor(sample, selectedScore),
+      selectedScore
+        ? evalDescriptor.scorerDescriptor(sample, selectedScore)
+        : undefined,
   };
 };
 

inspect_ai/_view/www/src/samples/descriptor/score/BooleanScoreDescriptor.module.css

@@ -1,11 +1,11 @@
 .circle {
   font-family: "Consola Regular";
-  width: 20px;
-  height: 20px;
+  width: 40px;
+  height: 30px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
+  border-radius: 15px;
   padding-top: 1px;
 }
 

inspect_ai/_view/www/src/samples/descriptor/score/BooleanScoreDescriptor.tsx

@@ -15,7 +15,7 @@ export const booleanScoreDescriptor = (): ScoreDescriptor => {
           className={clsx(
             styles.circle,
             "text-size-small",
-            score ? "green" : "red",
+            score ? styles.green : styles.red,
           )}
         >
           {String(score)}

inspect_ai/_view/www/src/samples/descriptor/score/ObjectScoreDescriptor.module.css

@@ -1,8 +1,8 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-left: 0.5rem;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-auto-rows: auto;
+  column-gap: 1rem;
 }
 
 .padded {

inspect_ai/_view/www/src/samples/descriptor/score/ObjectScoreDescriptor.tsx

@@ -35,7 +35,7 @@ export const objectScoreDescriptor = (values: Value2[]): ScoreDescriptor => {
 
       const scores: JSX.Element[] = [];
       const keys = Object.keys(score);
-      keys.forEach((key, index) => {
+      keys.forEach((key) => {
         if (typeof score !== "object" || Array.isArray(score)) {
           throw new Error(
             "Unexpected us of object score descriptor for non-score object",
@@ -50,22 +50,22 @@ export const objectScoreDescriptor = (values: Value2[]): ScoreDescriptor => {
                   : parseFloat(value === true ? "1" : value),
               )
             : String(value);
+
         scores.push(
-          <div
-            className={clsx(
-              styles.container,
-              index + 1 < keys.length ? styles.padded : undefined,
-            )}
-          >
+          <>
             <div className={clsx(styles.key, "text-size-smaller")}>{key}</div>
-            <div className={clsx(styles.value, "text-size-title")}>
+            <div className={clsx(styles.value, "text-size-base")}>
               {formattedValue}
             </div>
-          </div>,
+          </>,
         );
       });
 
-      return scores;
+      return (
+        <div key={`score-value`} className={clsx(styles.container)}>
+          {scores}
+        </div>
+      );
     },
   };
 };

inspect_ai/_view/www/src/samples/descriptor/types.ts

@@ -1,11 +1,9 @@
 import { ReactNode } from "react";
-import { BasicSampleData, SampleSummary } from "../../api/types";
+import { BasicSampleData } from "../../api/types";
 import { ScoreLabel } from "../../types";
 import { Value2 } from "../../types/log";
 
 export interface EvalDescriptor {
-  epochs: number;
-  samples: SampleSummary[];
   scores: ScoreLabel[];
   scoreDescriptor: (scoreLabel: ScoreLabel) => ScoreDescriptor;
   scorerDescriptor: (
@@ -14,9 +12,12 @@ export interface EvalDescriptor {
   ) => ScorerDescriptor;
   score: (
     sample: BasicSampleData,
-    scoreLabel: ScoreLabel,
+    scoreLabel?: ScoreLabel,
   ) => SelectedScore | undefined;
-  scoreAnswer: (sample: BasicSampleData, scorer: string) => string | undefined;
+  scoreAnswer: (
+    sample: BasicSampleData,
+    scorer: ScoreLabel,
+  ) => string | undefined;
 }
 
 export interface ScorerDescriptor {

inspect_ai/_view/www/src/samples/list/SampleFooter.module.css

@@ -2,8 +2,27 @@
   border-top: solid var(--bs-light-border-subtle) 1px;
   background: var(--bs-light-bg-subtle);
   display: grid;
-  grid-template-columns: max-content;
-  justify-content: end;
-  align-content: end;
+  grid-template-columns: max-content max-content;
+  justify-content: space-between;
+
   padding: 0.2em 1em;
 }
+
+.spinnerContainer {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 0.3em;
+  padding-top: 0.2em;
+}
+
+.spinner {
+  height: 11px;
+  width: 11px;
+  color: var(--bs-secondary);
+  border-width: 1px;
+}
+
+.label {
+  margin-left: 0.1em;
+  margin-top: -3px;
+}

inspect_ai/_view/www/src/samples/list/SampleFooter.tsx

@@ -1,15 +1,40 @@
 interface SampleFooterProps {
   sampleCount: number;
+  totalSampleCount: number;
+  running: boolean;
 }
 
 import clsx from "clsx";
 import { FC } from "react";
 import styles from "./SampleFooter.module.css";
 
-export const SampleFooter: FC<SampleFooterProps> = ({ sampleCount }) => {
+export const SampleFooter: FC<SampleFooterProps> = ({
+  sampleCount,
+  totalSampleCount,
+  running,
+}) => {
   return (
     <div className={clsx("text-size-smaller", styles.footer)}>
-      <div>{sampleCount} Samples</div>
+      <div>
+        {running ? (
+          <div className={clsx(styles.spinnerContainer)}>
+            <div
+              className={clsx("spinner-border", styles.spinner)}
+              role="status"
+            >
+              <span className={clsx("visually-hidden")}>Running...</span>
+            </div>
+            <div className={clsx("text-style-secondary", styles.label)}>
+              running...
+            </div>
+          </div>
+        ) : undefined}
+      </div>
+      <div>
+        {sampleCount < totalSampleCount
+          ? `${sampleCount} / ${totalSampleCount} Samples`
+          : `${sampleCount} Samples`}
+      </div>
     </div>
   );
 };