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

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

@@ -0,0 +1,98 @@
+import clsx from "clsx";
+import { SampleSummary } from "../../api/types";
+import { MarkdownDiv } from "../../components/MarkdownDiv";
+import { arrayToString, inputString } from "../../utils/format";
+import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
+import { SampleErrorView } from "../error/SampleErrorView";
+import styles from "./SampleRow.module.css";
+
+interface SampleRowProps {
+  id: string;
+  index: number;
+  sample: SampleSummary;
+  sampleDescriptor: SamplesDescriptor;
+  gridColumnsTemplate: string;
+  height: number;
+  selected: boolean;
+  showSample: (index: number) => void;
+}
+
+export const SampleRow: React.FC<SampleRowProps> = ({
+  id,
+  index,
+  sample,
+  sampleDescriptor,
+  gridColumnsTemplate,
+  height,
+  selected,
+  showSample,
+}) => {
+  return (
+    <div
+      id={`sample-${id}`}
+      onClick={() => {
+        showSample(index);
+      }}
+      className={clsx(
+        styles.grid,
+        "text-size-base",
+        selected ? styles.selected : undefined,
+      )}
+      style={{
+        height: `${height}px`,
+        gridTemplateRows: `${height - 28}px`,
+        gridTemplateColumns: gridColumnsTemplate,
+      }}
+    >
+      <div className={clsx("sample-id", "three-line-clamp", styles.cell)}>
+        {sample.id}
+      </div>
+      <div
+        className={clsx(
+          "sample-input",
+          "three-line-clamp",
+          styles.cell,
+          styles.wrapAnywhere,
+        )}
+      >
+        {inputString(sample.input).join(" ")}
+      </div>
+      <div className={clsx("sample-target", "three-line-clamp", styles.cell)}>
+        <MarkdownDiv
+          markdown={arrayToString(sample?.target)}
+          className={clsx("no-last-para-padding", styles.noLeft)}
+        />
+      </div>
+      <div className={clsx("sample-answer", "three-line-clamp", styles.cell)}>
+        {sample ? (
+          <MarkdownDiv
+            markdown={sampleDescriptor
+              ?.selectedScorerDescriptor(sample)
+              .answer()}
+            className={clsx("no-last-para-padding", styles.noLeft)}
+          />
+        ) : (
+          ""
+        )}
+      </div>
+      <div
+        className={clsx(
+          "sample-limit",
+          "text-size-small",
+          "three-line-clamp",
+          styles.cell,
+        )}
+      >
+        {sample.limit}
+      </div>
+
+      <div className={clsx("text-size-small", styles.cell, styles.score)}>
+        {sample.error ? (
+          <SampleErrorView message={sample.error} />
+        ) : (
+          sampleDescriptor?.selectedScore(sample)?.render()
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,6 @@
+.row {
+  padding: 0.25em 1em 0.25em 1em;
+  text-transform: uppercase;
+  font-weight: 600;
+  border-bottom: solid 1px var(--bs-border-color);
+}

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

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import styles from "./SampleSeparator.module.css";
+
+interface SampleSeparatorProps {
+  id: string;
+  title: string;
+  height: number;
+}
+
+export const SampleSeparator: React.FC<SampleSeparatorProps> = ({
+  id,
+  title,
+  height,
+}) => {
+  return (
+    <div
+      id={id}
+      className={clsx("text-style-secondary", "text-size-smaller", styles.row)}
+      style={{ height: `${height}px` }}
+    >
+      <div>{title}</div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/samples/sample-tools/EpochFilter.module.css

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+}
+
+.label {
+  align-self: center;
+  margin-right: 0.3em;
+  margin-left: 0.2em;
+}

inspect_ai/_view/www/src/samples/sample-tools/EpochFilter.tsx

@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import { ChangeEvent } from "react";
+import styles from "./EpochFilter.module.css";
+
+interface EpochFilterProps {
+  epochs: number;
+  epoch: string;
+  setEpoch: (n: string) => void;
+}
+
+export const EpochFilter: React.FC<EpochFilterProps> = ({
+  epochs,
+  epoch,
+  setEpoch,
+}) => {
+  const options = ["all"];
+  for (let i = 1; i <= epochs; i++) {
+    options.push(i + "");
+  }
+
+  const handleEpochChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const sel = e.target as HTMLSelectElement;
+    setEpoch(sel.value);
+  };
+
+  return (
+    <div className={styles.container}>
+      <span
+        className={clsx(
+          "epoch-filter-label",
+          "text-size-smaller",
+          "text-style-label",
+          "text-style-secondary",
+          styles.label,
+        )}
+      >
+        Epochs:
+      </span>
+      <select
+        className={clsx("form-select", "form-select-sm", "text-size-smaller")}
+        aria-label=".epoch-filter-label"
+        value={epoch}
+        onChange={handleEpochChange}
+      >
+        {options.map((option) => {
+          return <option value={option}>{option}</option>;
+        })}
+      </select>
+    </div>
+  );
+};

inspect_ai/_view/www/src/samples/sample-tools/SelectScorer.module.css

@@ -0,0 +1,16 @@
+.flex {
+  display: flex;
+}
+
+.label {
+  align-self: center;
+}
+
+.secondSel {
+  margin-left: 1em;
+}
+
+.secondLabel {
+  margin-right: 0.3em;
+  margin-left: 0.2em;
+}

inspect_ai/_view/www/src/samples/sample-tools/SelectScorer.tsx

@@ -0,0 +1,175 @@
+import clsx from "clsx";
+import { ScoreLabel } from "../../types";
+
+import styles from "./SelectScorer.module.css";
+
+interface SelectScorerProps {
+  scores: ScoreLabel[];
+  score?: ScoreLabel;
+  setScore: (score: ScoreLabel) => void;
+}
+
+export const SelectScorer: React.FC<SelectScorerProps> = ({
+  scores,
+  score,
+  setScore,
+}) => {
+  const scorers = scores.reduce((accum, scorer) => {
+    if (
+      !accum.find((sc) => {
+        return scorer.scorer === sc.scorer;
+      })
+    ) {
+      accum.push(scorer);
+    }
+    return accum;
+  }, [] as ScoreLabel[]);
+
+  if (scorers.length === 1) {
+    // There is only a single scorer in play, just show the list of available scores
+    return (
+      <div className={styles.flex}>
+        <span
+          className={clsx(
+            "select-scorer-label",
+            "text-size-smaller",
+            "text-style-label",
+            "text-style-secondary",
+            styles.label,
+          )}
+        >
+          Score:
+        </span>
+        <ScoreSelector
+          scores={scores}
+          selectedIndex={scoreIndex(scores, score)}
+          setSelectedIndex={(index: number) => {
+            setScore(scores[index]);
+          }}
+        />
+      </div>
+    );
+  } else {
+    // selected scorer
+
+    const scorerScores = scores.filter((sc) => {
+      return score && sc.scorer === score.scorer;
+    });
+
+    // There are multiple scorers, so show a scorer selector and a r
+    return (
+      <div className={styles.flex}>
+        <span
+          className={clsx(
+            "select-scorer-label",
+            "text-size-smaller",
+            "text-style-label",
+            "text-style-secondary",
+            styles.label,
+            styles.secondLabel,
+          )}
+        >
+          Scorer:
+        </span>
+        <ScorerSelector
+          scorers={scorers}
+          selectedIndex={scorerIndex(scorers, score)}
+          setSelectedIndex={(index: number) => {
+            setScore(scorers[index]);
+          }}
+        />
+        {scorerScores.length > 1 ? (
+          <ScoreSelector
+            className={clsx(styles.secondSel)}
+            scores={scorerScores}
+            selectedIndex={scoreIndex(scorerScores, score)}
+            setSelectedIndex={(index: number) => {
+              setScore(scorerScores[index]);
+            }}
+          />
+        ) : undefined}
+      </div>
+    );
+  }
+};
+
+interface ScoreSelectorProps {
+  scores: ScoreLabel[];
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  className?: string | string[];
+}
+
+const ScoreSelector: React.FC<ScoreSelectorProps> = ({
+  scores,
+  selectedIndex,
+  setSelectedIndex,
+  className,
+}) => {
+  return (
+    <select
+      className={clsx(
+        "form-select",
+        "form-select-sm",
+        "text-size-smaller",
+        className,
+      )}
+      aria-label=".select-scorer-label"
+      value={scores[selectedIndex].name}
+      onChange={(e) => {
+        const sel = e.target as HTMLSelectElement;
+        setSelectedIndex(sel.selectedIndex);
+      }}
+    >
+      {scores.map((score) => {
+        return (
+          <option key={score.name} value={score.name}>
+            {score.name}
+          </option>
+        );
+      })}
+    </select>
+  );
+};
+
+interface ScorerSelectorProps {
+  scorers: ScoreLabel[];
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+}
+
+const ScorerSelector: React.FC<ScorerSelectorProps> = ({
+  scorers,
+  selectedIndex,
+  setSelectedIndex,
+}) => {
+  return (
+    <select
+      className={clsx("form-select", "form-select-sm", "text-size-smaller")}
+      aria-label=".epoch-filter-label"
+      value={scorers[selectedIndex].scorer}
+      onChange={(e) => {
+        const sel = e.target as HTMLSelectElement;
+        setSelectedIndex(sel.selectedIndex);
+      }}
+    >
+      {scorers.map((scorer) => {
+        return (
+          <option key={scorer.scorer} value={scorer.scorer}>
+            {scorer.scorer}
+          </option>
+        );
+      })}
+    </select>
+  );
+};
+
+const scoreIndex = (scores: ScoreLabel[], score?: ScoreLabel) =>
+  scores.findIndex((sc) => {
+    return score && sc.name === score.name && sc.scorer === score.scorer;
+  });
+
+const scorerIndex = (scores: ScoreLabel[], score?: ScoreLabel) =>
+  scores.findIndex((sc) => {
+    return score && sc.scorer === score.scorer;
+  });

inspect_ai/_view/www/src/samples/sample-tools/SortFilter.module.css

@@ -0,0 +1,9 @@
+.flex {
+  display: flex;
+}
+
+.label {
+  align-self: center;
+  margin-right: 0.3em;
+  margin-left: 0.2em;
+}

inspect_ai/_view/www/src/samples/sample-tools/SortFilter.tsx

@@ -0,0 +1,186 @@
+import clsx from "clsx";
+import { SampleSummary } from "../../api/types";
+import {
+  kEpochAscVal,
+  kEpochDescVal,
+  kSampleAscVal,
+  kSampleDescVal,
+  kScoreAscVal,
+  kScoreDescVal,
+} from "../../constants";
+import { isNumeric } from "../../utils/type";
+import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
+import styles from "./SortFilter.module.css";
+
+interface SortFilterProps {
+  sort: string;
+  setSort: (sort: string) => void;
+  epochs: number;
+}
+
+export const SortFilter: React.FC<SortFilterProps> = ({
+  sort,
+  setSort,
+  epochs,
+}) => {
+  const options = [
+    { label: "sample asc", val: kSampleAscVal },
+    { label: "sample desc", val: kSampleDescVal },
+  ];
+  if (epochs > 1) {
+    options.push({
+      label: "epoch asc",
+      val: kEpochAscVal,
+    });
+    options.push({
+      label: "epoch desc",
+      val: kEpochDescVal,
+    });
+  }
+  options.push({
+    label: "score asc",
+    val: kScoreAscVal,
+  });
+  options.push({
+    label: "score desc",
+    val: kScoreDescVal,
+  });
+  return (
+    <div className={styles.flex}>
+      <span
+        className={clsx(
+          "sort-filter-label",
+          "text-size-smaller",
+          "text-style-label",
+          "text-style-secondary",
+          styles.label,
+        )}
+      >
+        Sort:
+      </span>
+      <select
+        className={clsx("form-select", "form-select-sm", "text-size-smaller")}
+        aria-label=".sort-filter-label"
+        value={sort}
+        onChange={(e) => {
+          const sel = e.target as HTMLSelectElement;
+          setSort(sel.value);
+        }}
+      >
+        {options.map((option) => {
+          return (
+            <option key={option.val} value={option.val}>
+              {option.label}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+};
+
+export const byEpoch = (sort: string) => {
+  return sort === kEpochAscVal || sort === kEpochDescVal;
+};
+
+export const bySample = (sort: string) => {
+  return sort === kSampleAscVal || sort === kSampleDescVal;
+};
+
+const sortId = (a: SampleSummary, b: SampleSummary) => {
+  if (isNumeric(a.id) && isNumeric(b.id)) {
+    return Number(a.id) - Number(b.id);
+  } else {
+    // Note that if there are mixed types of ids (e.g. a string
+    // and a number), we need to be sure we're working with strings
+    // to performan the comparison
+    return String(a.id).localeCompare(String(b.id));
+  }
+};
+
+/**
+ * Sorts a list of samples
+ */
+export const sortSamples = (
+  sort: string,
+  samples: SampleSummary[],
+  samplesDescriptor: SamplesDescriptor,
+): { sorted: SampleSummary[]; order: "asc" | "desc" } => {
+  const sortedSamples = samples.sort((a: SampleSummary, b: SampleSummary) => {
+    switch (sort) {
+      case kSampleAscVal: {
+        const result = sortId(a, b);
+        if (result !== 0) {
+          return result;
+        } else {
+          return a.epoch - b.epoch;
+        }
+      }
+      case kSampleDescVal: {
+        const result = sortId(b, a);
+        if (result !== 0) {
+          return result;
+        } else {
+          return a.epoch - b.epoch;
+        }
+      }
+      case kEpochAscVal: {
+        const result = a.epoch - b.epoch;
+        if (result !== 0) {
+          return result;
+        } else {
+          return sortId(a, b);
+        }
+      }
+      case kEpochDescVal: {
+        const result = b.epoch - a.epoch;
+        if (result !== 0) {
+          return result;
+        } else {
+          return sortId(a, b);
+        }
+      }
+
+      case kScoreAscVal: {
+        const aScore = samplesDescriptor.selectedScore(a);
+        const bScore = samplesDescriptor.selectedScore(b);
+        if (
+          aScore === undefined ||
+          bScore === undefined ||
+          samplesDescriptor.selectedScoreDescriptor == undefined
+        ) {
+          return 0;
+        }
+        return samplesDescriptor.selectedScoreDescriptor.compare(
+          aScore,
+          bScore,
+        );
+      }
+      case kScoreDescVal: {
+        const aScore = samplesDescriptor.selectedScore(a);
+        const bScore = samplesDescriptor.selectedScore(b);
+        if (
+          aScore === undefined ||
+          bScore === undefined ||
+          samplesDescriptor.selectedScoreDescriptor == undefined
+        ) {
+          return 0;
+        }
+
+        return samplesDescriptor.selectedScoreDescriptor.compare(
+          aScore,
+          bScore,
+        );
+      }
+      default:
+        return 0;
+    }
+  });
+  return {
+    sorted: sortedSamples,
+    order:
+      sort === kSampleAscVal || sort === kEpochAscVal || sort === kScoreAscVal
+        ? "asc"
+        : "desc",
+  };
+};