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

inspect_ai/_view/www/src/navbar/Navbar.mjs

@@ -1,418 +0,0 @@
-import { html } from "htm/preact";
-
-import { ApplicationIcons } from "./../appearance/Icons.mjs";
-import { ApplicationStyles } from "./../appearance/Styles.mjs";
-import { FontSize, TextStyle } from "../appearance/Fonts.mjs";
-import { filename } from "./../utils/Path.mjs";
-import { formatPrettyDecimal } from "../utils/Format.mjs";
-
-import { CopyButton } from "./../components/CopyButton.mjs";
-import { SecondaryBar } from "./SecondaryBar.mjs";
-
-/**
- * Renders the Navbar
- *
- * @param {Object} props - The parameters for the component.
- * @param {string} [props.file] - The file name
- * @param {import("../types/log").EvalSpec} [props.evalSpec] - The EvalSpec
- * @param {import("../types/log").EvalResults} [props.evalResults] - The EvalResults
- * @param {import("../types/log").EvalPlan} [props.evalPlan] - The EvalSpec
- * @param {import("../types/log").EvalStats} [props.evalStats] - The EvalStats
- * @param {import("../samples/SamplesDescriptor.mjs").EvalDescriptor} [props.evalDescriptor] - The EvalDescriptor
- * @param {import("../api/Types.ts").SampleSummary[]} [props.samples] - the samples
- * @param {string} [props.status] - the status
- * @param {boolean} props.offcanvas - Are we in offcanvas mode?
- * @param {boolean} props.showToggle - Should we show the toggle?
- *
- * @returns {import("preact").JSX.Element} The TranscriptView component.
- */
-export const Navbar = ({
-  file,
-  evalSpec,
-  evalPlan,
-  evalResults,
-  evalStats,
-  samples,
-  evalDescriptor,
-  showToggle,
-  offcanvas,
-  status,
-}) => {
-  const toggleOffCanClass = offcanvas ? "" : " d-md-none";
-  const logFileName = file ? filename(file) : "";
-
-  const task = evalSpec?.task;
-  const model = evalSpec?.model;
-  const results = evalResults;
-  const created = evalSpec?.created;
-
-  let statusPanel;
-  if (status === "success") {
-    statusPanel = html`<${ResultsPanel} results="${results}" />`;
-  } else if (status === "cancelled") {
-    statusPanel = html`<${CancelledPanel}
-      sampleCount=${samples?.length || 0}
-    />`;
-  } else if (status === "started") {
-    statusPanel = html`<${RunningPanel} sampleCount=${samples?.length || 0} />`;
-  } else if (status === "error") {
-    statusPanel = html`<${ErroredPanel} sampleCount=${samples?.length || 0} />`;
-  }
-
-  // If no logfile is loaded, just show an empty navbar
-  const navbarContents = logFileName
-    ? html` <div
-          class="navbar-brand navbar-text mb-0"
-          style=${{
-            display: "flex",
-            paddingTop: 0,
-            marginLeft: "0.5rem",
-            minWidth: "250px",
-          }}
-        >
-          ${showToggle
-            ? html`<button
-                id="sidebarToggle"
-                class="btn${toggleOffCanClass}"
-                type="button"
-                data-bs-toggle="offcanvas"
-                data-bs-target="#sidebarOffCanvas"
-                aria-controls="sidebarOffCanvas"
-                style=${{
-                  padding: "0rem 0.1rem 0.1rem 0rem",
-                  display: "flex",
-                }}
-              >
-                <i class=${ApplicationIcons.menu}></i>
-              </button> `
-            : ""}
-          <div
-            style=${{
-              display: "flex",
-              flexDirection: "column",
-              marginLeft: "0.2rem",
-            }}
-          >
-            <div
-              style=${{
-                marginTop: "0.1rem",
-                display: "grid",
-                gridTemplateColumns:
-                  "minmax(30px,max-content) minmax(100px, max-content)",
-              }}
-            >
-              <div
-                id="task-title"
-                style=${{
-                  fontWeight: 600,
-                  marginRight: "0.3rem",
-                  ...ApplicationStyles.wrapText(),
-                }}
-                class="task-title"
-                title=${task}
-              >
-                ${task}
-              </div>
-              <div
-                id="task-model"
-                style=${{
-                  fontSize: FontSize.base,
-                  paddingTop: "0.4rem",
-                  ...ApplicationStyles.wrapText(),
-                }}
-                class="task-model"
-                title=${model}
-              >
-                ${model}
-              </div>
-            </div>
-            <div
-              style=${{
-                opacity: "0.7",
-                marginTop: "0.1rem",
-                paddingBottom: 0,
-                fontSize: FontSize.small,
-                display: "grid",
-                gridTemplateColumns: "minmax(0,max-content) max-content",
-              }}
-            >
-              <div
-                class="navbar-secondary-text"
-                style=${{
-                  ...ApplicationStyles.wrapText(),
-                }}
-              >
-                ${logFileName}
-              </div>
-              <${CopyButton} value=${file} />
-            </div>
-          </div>
-        </div>
-
-        <div id="task-created" style=${{ display: "none" }}>${created}</div>
-
-        <div
-          class="navbar-text"
-          style=${{
-            justifyContent: "end",
-            marginRight: "1em",
-            marginBottom: "0",
-          }}
-        >
-          ${statusPanel}
-        </div>`
-    : "";
-
-  return html`
-    <nav
-      class="navbar sticky-top"
-      style=${{
-        flexWrap: "nowrap",
-      }}
-    >
-      <div
-        style=${{
-          display: "grid",
-          gridTemplateColumns: "1fr auto",
-          width: "100%",
-        }}
-      >
-        ${navbarContents}
-        <${SecondaryBar}
-          evalSpec=${evalSpec}
-          evalPlan=${evalPlan}
-          evalResults=${evalResults}
-          evalStats=${evalStats}
-          samples=${samples}
-          evalDescriptor=${evalDescriptor}
-          status=${status}
-          style=${{ gridColumn: "1/-1" }}
-        />
-      </div>
-    </nav>
-  `;
-};
-
-const StatusPanel = ({ icon, status, sampleCount }) => {
-  return html`<div
-    style=${{
-      padding: "1em",
-      marginTop: "0.5em",
-      textTransform: "uppercase",
-      fontSize: FontSize.smaller,
-      display: "grid",
-      gridTemplateColumns: "auto auto",
-    }}
-  >
-    <i
-      class="${icon}"
-      style=${{
-        fontSize: FontSize.large,
-        marginRight: "0.3em",
-        marginTop: "-0.1em",
-      }}
-    />
-    <div>
-      <div>${status}</div>
-      <div>(${sampleCount} ${sampleCount === 1 ? "sample" : "samples"})</div>
-    </div>
-  </div>`;
-};
-
-const CancelledPanel = ({ sampleCount }) => {
-  return html`<${StatusPanel}
-    icon=${ApplicationIcons.logging.info}
-    status="Cancelled"
-    sampleCount=${sampleCount}
-  />`;
-};
-
-const ErroredPanel = ({ sampleCount }) => {
-  return html`<${StatusPanel}
-    icon=${ApplicationIcons.logging.error}
-    status="Task Failed"
-    sampleCount=${sampleCount}
-  />`;
-};
-
-const RunningPanel = ({ sampleCount }) => {
-  return html`<${StatusPanel}
-    icon=${ApplicationIcons.running}
-    status="Running"
-    sampleCount=${sampleCount}
-  />`;
-};
-
-const ResultsPanel = ({ results }) => {
-  // Map the scores into a list of key/values
-  if (results?.scores?.length === 1) {
-    const scorers = {};
-    results.scores.map((score) => {
-      scorers[score.name] = Object.keys(score.metrics).map((key) => {
-        return {
-          name: key,
-          value: score.metrics[key].value,
-          reducer: score.reducer,
-        };
-      });
-    });
-
-    const metrics = Object.values(scorers)[0];
-    return html`<div
-      style=${{
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        justifyContent: "end",
-        height: "100%",
-        alignItems: "center",
-        maxHeight: "15em",
-        overflow: "scroll",
-      }}
-    >
-      ${metrics.map((metric, i) => {
-        return html`<${VerticalMetric} metric=${metric} isFirst=${i === 0} />`;
-      })}
-    </div>`;
-  } else {
-    return html`<div
-      style=${{
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        justifyContent: "end",
-        height: "100%",
-        alignItems: "center",
-        marginTop: "0.2rem",
-        paddingBottom: "0.4rem",
-        rowGap: "1em",
-        maxHeight: "15em",
-        overflow: "scroll",
-      }}
-    >
-      ${results?.scores?.map((score, index) => {
-        return html`<${MultiScorerMetric}
-          scorer=${score}
-          isFirst=${index === 0}
-        />`;
-      })}
-    </div>`;
-  }
-};
-
-/** Renders a Vertial Metric
- *
- * @param {Object} props - The parameters for the component.
- * @param {import("../types/log").EvalMetric} props.metric - The metric
- * @param {boolean} props.isFirst - Whether this is the first metric
- *
- * @returns {import("preact").JSX.Element} The TranscriptView component.
- */
-const VerticalMetric = ({ metric, isFirst }) => {
-  // @ts-expect-error
-  const reducer_component = metric.reducer
-    ? html` <div
-        style=${{
-          fontSize: FontSize.smaller,
-          textAlign: "center",
-          paddingTop: "0.3rem",
-          marginBottom: "-0.3rem",
-          ...TextStyle.label,
-          ...TextStyle.secondary,
-        }}
-      >
-        ${
-          // @ts-expect-error
-          metric.reducer
-        }
-      </div>`
-    : "";
-
-  return html`<div style=${{ paddingLeft: isFirst ? "0" : "1em" }}>
-    <div
-      class="vertical-metric-label"
-      style=${{
-        fontSize: FontSize.smaller,
-        ...TextStyle.secondary,
-        textAlign: "center",
-        paddingTop: "0.3rem",
-        marginBottom: "-0.2rem",
-        ...TextStyle.label,
-        ...TextStyle.secondary,
-        borderBottom: "solid var(--bs-border-color) 1px",
-      }}
-    >
-      ${metric.name}
-    </div>
-    ${reducer_component}
-    <div
-      class="vertical-metric-value"
-      style=${{
-        fontSize: FontSize.larger,
-        fontWeight: "500",
-        textAlign: "center",
-      }}
-    >
-      ${formatPrettyDecimal(metric.value)}
-    </div>
-  </div>`;
-};
-
-const MultiScorerMetric = ({ scorer, isFirst }) => {
-  const titleFontSize =
-    Object.keys(scorer.metrics).length === 1 ? FontSize.larger : FontSize.base;
-  const reducerFontSize =
-    Object.keys(scorer.metrics).length === 1
-      ? FontSize.small
-      : FontSize.smaller;
-  const valueFontSize =
-    Object.keys(scorer.metrics).length === 1 ? FontSize.base : FontSize.base;
-
-  const reducer_component = scorer.reducer
-    ? html`<div
-        style=${{
-          fontSize: reducerFontSize,
-          textAlign: "center",
-          marginBottom: "-0.3rem",
-          ...TextStyle.label,
-          ...TextStyle.secondary,
-        }}
-      >
-        ${scorer.reducer}
-      </div>`
-    : "";
-
-  return html`<div style=${{ paddingLeft: isFirst ? "0" : "1.5em" }}>
-    <div
-      style=${{
-        fontSize: titleFontSize,
-        textAlign: "center",
-        borderBottom: "solid var(--bs-border-color) 1px",
-        marginBottom: "-0.1rem",
-        ...TextStyle.label,
-        ...TextStyle.secondary,
-      }}
-      class="multi-score-label"
-    >
-      ${scorer.name}
-    </div>
-    ${reducer_component}
-    <div
-      style=${{
-        display: "grid",
-        gridTemplateColumns: "auto auto",
-        gridColumnGap: "0.3rem",
-        gridRowGap: "0",
-        fontSize: valueFontSize,
-      }}
-    >
-      ${Object.keys(scorer.metrics).map((key) => {
-        const metric = scorer.metrics[key];
-        return html` <div>${metric.name}</div>
-          <div style=${{ fontWeight: "600" }}>
-            ${formatPrettyDecimal(metric.value)}
-          </div>`;
-      })}
-    </div>
-  </div>`;
-};

inspect_ai/_view/www/src/navbar/SecondaryBar.mjs

@@ -1,175 +0,0 @@
-import { html } from "htm/preact";
-
-import { LabeledValue } from "../components/LabeledValue.mjs";
-import { formatDataset, formatDuration } from "../utils/Format.mjs";
-import { ExpandablePanel } from "../components/ExpandablePanel.mjs";
-import { scoreFilterItems } from "../samples/tools/filters.mjs";
-
-/**
- * Renders the Navbar
- *
- * @param {Object} props - The parameters for the component.
- * @param {import("../types/log").EvalSpec} [props.evalSpec] - The EvalSpec
- * @param {import("../types/log").EvalPlan} [props.evalPlan] - The EvalSpec
- * @param {import("../types/log").EvalResults} [props.evalResults] - The EvalResults
- * @param {import("../types/log").EvalStats} [props.evalStats] - The EvalStats
- * @param {import("../samples/SamplesDescriptor.mjs").EvalDescriptor} [props.evalDescriptor] - The EvalDescriptor
- * @param {import("../api/Types.ts").SampleSummary[]} [props.samples] - the samples
- * @param {string} [props.status] - the status
- * @param {Map<string, string>} [props.style] - is this off canvas
- *
- * @returns {import("preact").JSX.Element | string} The TranscriptView component.
- */
-export const SecondaryBar = ({
-  evalSpec,
-  evalPlan,
-  evalResults,
-  evalStats,
-  samples,
-  evalDescriptor,
-  status,
-  style,
-}) => {
-  if (!evalSpec || status !== "success") {
-    return "";
-  }
-
-  const staticColStyle = {
-    flexShrink: "0",
-  };
-
-  const epochs = evalSpec.config.epochs || 1;
-  const hyperparameters = {
-    ...evalPlan?.config,
-    ...evalSpec.task_args,
-  };
-
-  const hasConfig = Object.keys(hyperparameters).length > 0;
-
-  const values = [];
-
-  values.push({
-    size: "minmax(12%, auto)",
-    value: html`<${LabeledValue} label="Dataset" style=${staticColStyle}>
-    <${DatasetSummary}
-      dataset=${evalSpec.dataset}
-      samples=${samples}
-      epochs=${epochs} />
-  </${LabeledValue}>
-`,
-  });
-
-  const label = evalResults?.scores.length > 1 ? "Scorers" : "Scorer";
-  values.push({
-    size: "minmax(12%, auto)",
-    value: html`<${LabeledValue} label="${label}" style=${staticColStyle} style=${{ justifySelf: hasConfig ? "left" : "center" }}>
-    <${ScorerSummary}
-      evalDescriptor=${evalDescriptor} />
-  </${LabeledValue}>`,
-  });
-
-  if (hasConfig) {
-    values.push({
-      size: "minmax(12%, auto)",
-      value: html`<${LabeledValue} label="Config" style=${{ justifySelf: "right" }}>
-      <${ParamSummary} params=${hyperparameters}/>
-    </${LabeledValue}>`,
-    });
-  }
-
-  const totalDuration = formatDuration(
-    new Date(evalStats.started_at),
-    new Date(evalStats.completed_at),
-  );
-  values.push({
-    size: "minmax(12%, auto)",
-    value: html`
-      <${LabeledValue} label="Duration" style=${{ justifySelf: "right" }}>
-        ${totalDuration}
-      </${LabeledValue}>`,
-  });
-
-  return html`
-    <${ExpandablePanel} style=${{ margin: "0", ...style }} collapse=${true} lines=${4}>
-    <div
-      style=${{
-        margin: "0",
-        padding: "0.2em 1em 0.2em 1em",
-        display: "grid",
-        gridColumnGap: "1em",
-        borderTop: "1px solid var(--bs-border-color)",
-        gridTemplateColumns: `${values
-          .map((val) => {
-            return val.size;
-          })
-          .join(" ")}`,
-      }}
-    >
-      ${values.map((val) => {
-        return val.value;
-      })}
-    </div>
-    </${ExpandablePanel}>
-  `;
-};
-
-const DatasetSummary = ({ dataset, samples, epochs, style }) => {
-  if (!dataset) {
-    return "";
-  }
-
-  return html`
-    <div style=${style}>
-      ${dataset.name}${samples?.length
-        ? html`${formatDataset(dataset.name, samples.length, epochs)}`
-        : ""}
-    </div>
-  `;
-};
-
-const ScorerSummary = ({ evalDescriptor }) => {
-  if (!evalDescriptor) {
-    return "";
-  }
-
-  const items = scoreFilterItems(evalDescriptor);
-
-  return html`
-    <span style=${{ position: "relative" }}>
-      ${Array.from(items).map(
-        (item, index) => html`
-          ${index > 0 ? ", " : ""}
-          <span title=${item.tooltip}>${item.canonicalName}</span>
-        `,
-      )}
-    </span>
-  `;
-};
-
-/**
- * A component that displays a summary of parameters.
- *
- * @param {Object} props - The component props.
- * @param {Record<string, any>} props.params - An object containing key-value pairs representing parameters.
- * @returns {import("preact").JSX.Element | string} The component.
- */
-const ParamSummary = ({ params }) => {
-  if (!params) {
-    return "";
-  }
-  const paraValues = Object.keys(params).map((key) => {
-    const val = params[key];
-    if (Array.isArray(val) || typeof val === "object") {
-      return `${key}: ${JSON.stringify(val)}`;
-    } else {
-      return `${key}: ${val}`;
-    }
-  });
-  if (paraValues.length > 0) {
-    return html`<code style=${{ padding: 0, color: "var(--bs-body-color)" }}
-      >${paraValues.join(", ")}</code
-    >`;
-  } else {
-    return "";
-  }
-};