inspect-ai 0.3.58__py3-none-any.whl → 0.3.60__py3-none-any.whl

inspect_ai/_view/www/src/samples/tools/SampleFilter.mjs

@@ -1,112 +1,716 @@
+import { autocompletion, startCompletion } from "@codemirror/autocomplete";
+import {
+  HighlightStyle,
+  StreamLanguage,
+  StringStream,
+  bracketMatching,
+  syntaxHighlighting,
+} from "@codemirror/language";
+import { linter } from "@codemirror/lint";
+import { Compartment, EditorState } from "@codemirror/state";
+import { tags } from "@lezer/highlight";
+import { EditorView, minimalSetup } from "codemirror";
 import { html } from "htm/preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { FontSize, TextStyle } from "../../appearance/Fonts.mjs";
-
+import { filterSamples, scoreFilterItems } from "./filters.mjs";
 import {
+  kScoreTypeBoolean,
   kScoreTypeCategorical,
   kScoreTypeNumeric,
-  kScoreTypeObject,
+  kScoreTypeOther,
   kScoreTypePassFail,
 } from "../../constants.mjs";
 
 /**
- * Renders the Sample Filter Control
- *
- * @param {Object} props - The parameters for the component.
- * @param {import("../SamplesDescriptor.mjs").SamplesDescriptor} props.descriptor - The sample descriptor
- * @param {(filter: import("../../Types.mjs").ScoreFilter) => void} props.filterChanged - Filter changed function
- * @param {import("../../Types.mjs").ScoreFilter} props.filter - Capabilities of the application host
- * @returns {import("preact").JSX.Element | string} The TranscriptView component.
+ * @typedef {Object} Token
+ * @property {string} type
+ * @property {string} text
+ * @property {number} from
+ * @property {number} to
  */
-export const SampleFilter = ({ descriptor, filter, filterChanged }) => {
-  const updateCategoryValue = (e) => {
-    const val = e.currentTarget.value;
-    if (val === "all") {
-      filterChanged({});
+
+/**
+ * @typedef {Object} FilteringResult
+ * @property {number} numSamples - The number of samples that match the filter.
+ * @property {import("./filters.mjs").FilterError | undefined} error - The error in the filter expression, if any.
+ */
+
+const KEYWORDS = ["and", "or", "not", "in", "not in", "mod"];
+
+const MATH_FUNCTIONS = [
+  ["min", "Minimum of two or more values"],
+  ["max", "Maximum of two or more values"],
+  ["abs", "Absolute value"],
+  ["round", "Round to the nearest integer"],
+  ["floor", "Round down to the nearest integer"],
+  ["ceil", "Round up to the nearest integer"],
+  ["sqrt", "Square root"],
+  ["log", "Natural logarithm"],
+  ["log2", "Base 2 logarithm"],
+  ["log10", "Base 10 logarithm"],
+];
+
+const SAMPLE_FUNCTIONS = [
+  ["input_contains", "Checks if input contains a regular expression"],
+  ["target_contains", "Checks if target contains a regular expression"],
+];
+
+/**
+ * Makes sure that the filter expression is a single line.
+ * @param {import("@codemirror/state").Transaction} tr - The transaction to join lines in.
+ * @returns {import("@codemirror/state").TransactionSpec} The transaction with joined lines, if any.
+ */
+function ensureOneLine(tr) {
+  const newDoc = tr.newDoc.toString();
+  if (newDoc.includes("\n")) {
+    if (tr.isUserEvent("input.paste")) {
+      const newDocAdjusted = newDoc.replace(/\n/g, " ").trim();
+      return {
+        changes: {
+          from: 0,
+          to: tr.startState.doc.length,
+          insert: newDocAdjusted,
+        },
+      };
     } else {
-      filterChanged({
-        value: val,
-        type: kScoreTypeCategorical,
+      return {};
+    }
+  }
+  return tr;
+}
+
+const highlightStyle = HighlightStyle.define([
+  { tag: tags.string, class: "token string" },
+  { tag: tags.number, class: "token number" },
+  { tag: tags.keyword, class: "token keyword" },
+]);
+
+/** @param {string} word */
+function countSpaces(word) {
+  return word.split(" ").length - 1;
+}
+
+const nextToken = (() => {
+  const wordsRe = (words) => new RegExp(`^(${words.join("|")})\\b`);
+  const keywordsRe = wordsRe(
+    // Sort to make sure "not in" is matched before "not".
+    KEYWORDS.sort((a, b) => countSpaces(b) - countSpaces(a)),
+  );
+  const mathFunctionsRe = wordsRe(MATH_FUNCTIONS.map(([label]) => label));
+  const sampleFunctionsRe = wordsRe(SAMPLE_FUNCTIONS.map(([label]) => label));
+
+  /** @param {import("@codemirror/language").StringStream} stream */
+  return function (stream) {
+    if (stream.match(/"[^"]*"/)) return "string";
+    if (stream.match(/"[^"]*/)) return "unterminatedString";
+    if (stream.match(/^(-|\+)?\d+(\.\d+)?/)) return "number";
+    if (stream.match(keywordsRe)) return "keyword";
+    if (stream.match(mathFunctionsRe)) return "mathFunction";
+    if (stream.match(sampleFunctionsRe)) return "sampleFunction";
+    if (stream.match(/^[a-zA-Z_][a-zA-Z0-9_]*/)) return "variable";
+    if (stream.match(/^(==|!=|<=|>=|<|>|~=)/)) return "relation";
+    if (stream.match(/^(=|!|~)/)) return "miscOperator"; // recognize relations while typing; not valid syntax per se
+    if (stream.match(/^(\+|-|\*|\/|\^|\(|\)|,|\.)/)) return "miscOperator";
+    stream.next();
+    return null;
+  };
+})();
+
+const language = StreamLanguage.define({
+  token: nextToken,
+  tokenTable: {
+    string: tags.string,
+    unterminatedString: tags.string,
+    number: tags.number,
+    keyword: tags.keyword,
+    mathFunction: tags.function(tags.variableName),
+    sampleFunction: tags.function(tags.variableName),
+    variable: tags.variableName,
+    relation: tags.operator,
+    miscOperator: tags.operator,
+  },
+});
+
+/**
+ * @param {string} input
+ * @returns {Token[]}
+ */
+function tokenize(input) {
+  const tokens = [];
+  const stream = new StringStream(input, 0, 0);
+  while (stream.pos < input.length) {
+    const from = stream.pos;
+    const type = nextToken(stream);
+    if (type) {
+      tokens.push({
+        type,
+        text: input.slice(from, stream.pos),
+        from,
+        to: stream.pos,
       });
     }
+  }
+  return tokens;
+}
+
+/**
+ * @param {import("./filters.mjs").ScoreFilterItem[]} filterItems
+ * @param {string} scorer
+ * @returns {import("./filters.mjs").ScoreFilterItem[]}
+ */
+function getMemberScoreItems(filterItems, scorer) {
+  return filterItems.filter((item) =>
+    item?.qualifiedName?.startsWith(`${scorer}.`),
+  );
+}
+
+/**
+ * Generates completions for the filter expression. The main goal is to make the
+ * sample filter intuitive for beginners and to provide a smooth experience for
+ * simple cases. To this end, we proactively try to suggest the next step of the
+ * expression, in a wizard-style fashion. This logic is primarily intended to
+ * support unsophisticated expressions of the form
+ *   SUBEXPR and/or SUBEXPR or/not SUBEXPR ...
+ * where each SUBEXPR is
+ *   VARIABLE ==/!=/</>/in/... VALUE
+ * and VALUE is a literal (string, number, etc.)
+ * It does support some expressions more complex than that, but the completion
+ * algorithm is not intended to be comprehensive. This is why we usually add
+ * default completions to the list in case our guess was off.
+ *
+ * @param {import("@codemirror/autocomplete").CompletionContext} context
+ * @param {import("../../samples/tools/filters.mjs").ScoreFilterItem[]} filterItems
+ * @returns {import("@codemirror/autocomplete").CompletionResult}
+ */
+function getCompletions(context, filterItems) {
+  /** @param {Token} token */
+  const isLiteral = (token) =>
+    ["string", "unterminatedString", "number"].includes(token?.type);
+  /** @param {Token} token */
+  const isLogicalOp = (token) => ["and", "or", "not"].includes(token?.text);
+
+  /**
+   * With most tokens we complete only after a space, but for sometimes it makes
+   * sense to start autocompletion as soon as the token was typed.
+   * @param {Token} token
+   */
+  const autocompleteImmediatelyAfter = (token) =>
+    ["(", "."].includes(token?.text);
+
+  /**
+   * @param {import("codemirror").EditorView} view
+   * @param {import("@codemirror/autocomplete").Completion} completion
+   * @param {number} from
+   * @param {number} to
+   */
+  function applyWithCall(view, completion, from, to) {
+    view.dispatch({
+      changes: { from, to, insert: `${completion.label}()` },
+      selection: { anchor: from + completion.label.length + 1 },
+    });
+  }
+
+  /** @type {(k: string) => import("@codemirror/autocomplete").Completion} */
+  const makeKeywordCompletion = (k) => ({
+    label: k,
+    type: "keyword",
+    boost: -20,
+  });
+  /** @type {([label, info]: [string, string]) => import("@codemirror/autocomplete").Completion} */
+  const makeMathFunctionCompletion = ([label, info]) => ({
+    label,
+    type: "function",
+    info,
+    apply: applyWithCall,
+    boost: -10,
+  });
+  /** @type {([label, info]: [string, string]) => import("@codemirror/autocomplete").Completion} */
+  const makeSampleFunctionCompletion = ([label, info]) => ({
+    label,
+    type: "function",
+    info,
+    apply: applyWithCall,
+    boost: 0,
+  });
+  /** @type {(k: string) => import("@codemirror/autocomplete").Completion} */
+  const makeLiteralCompletion = (k) => ({
+    label: k,
+    type: "text",
+    boost: 10,
+  });
+  /**
+   * @param {import("./filters.mjs").ScoreFilterItem} item
+   * @param {Object} [props]
+   * @param {(item: import("./filters.mjs").ScoreFilterItem) => boolean} [props.autoSpaceIf] - Similar to `autoSpaceAfter`, but conditional.
+   * @returns {import("@codemirror/autocomplete").Completion}
+   */
+  const makeCanonicalNameCompletion = (
+    item,
+    { autoSpaceIf = () => false } = {},
+  ) => ({
+    label: item.canonicalName + (autoSpaceIf(item) ? " " : ""),
+    type: "variable",
+    info: item.tooltip,
+    boost: 20,
+  });
+  /** @type {(item: import("./filters.mjs").ScoreFilterItem) => import("@codemirror/autocomplete").Completion} */
+  const makeMemberAccessCompletion = (item) => ({
+    label: item.qualifiedName.split(".")[1],
+    type: "variable",
+    info: item.tooltip,
+    boost: 20,
+  });
+
+  const keywordCompletionItems = KEYWORDS.map(makeKeywordCompletion);
+  const mathFunctionCompletionItems = MATH_FUNCTIONS.map(
+    makeMathFunctionCompletion,
+  );
+  const sampleFunctionCompletionItems = SAMPLE_FUNCTIONS.map(
+    makeSampleFunctionCompletion,
+  );
+  const variableCompletionItems = filterItems.map((item) =>
+    makeCanonicalNameCompletion(item),
+  );
+
+  const defaultCompletionItems = [
+    ...keywordCompletionItems,
+    ...mathFunctionCompletionItems,
+    ...sampleFunctionCompletionItems,
+    ...variableCompletionItems,
+  ];
+
+  const doc = context.state.doc;
+  const input = doc.toString().slice(0, context.pos);
+  const tokens = tokenize(input);
+  const lastToken = tokens[tokens.length - 1];
+  const isCompletionInsideToken =
+    lastToken &&
+    context.pos == lastToken.to &&
+    !autocompleteImmediatelyAfter(lastToken);
+  const currentTokenIndex = isCompletionInsideToken
+    ? tokens.length - 1
+    : tokens.length; // `currentToken` is undefined when we are not inside a token
+
+  /**
+   * Returns nth token back away from the current token. Note that `prevToken(0)`
+   * is always reserved for the current token, whether it exists or not.
+   * @param {number} index
+   * @returns {Token | undefined}
+   */
+  const prevToken = (index) => tokens[currentTokenIndex - index];
+
+  const currentToken = prevToken(0);
+  const completionStart = currentToken ? currentToken.from : context.pos;
+  const completingAtEnd = context.pos == doc.length;
+
+  /**
+   * @param {number} endIndex
+   * @returns {import("../../samples/tools/filters.mjs").ScoreFilterItem | undefined}
+   */
+  const findFilterItem = (endIndex) => {
+    if (prevToken(endIndex)?.type == "variable") {
+      let name = prevToken(endIndex).text;
+      let i = endIndex;
+      while (prevToken(i + 1)?.text == ".") {
+        if (prevToken(i + 2)?.type == "variable") {
+          name = prevToken(i + 2).text + "." + name;
+          i += 2;
+        } else {
+          break;
+        }
+      }
+      return filterItems.find((item) => item.canonicalName == name);
+    }
+    return undefined;
   };
 
-  switch (descriptor?.selectedScoreDescriptor?.scoreType) {
-    case kScoreTypePassFail: {
-      const options = [{ text: "All", value: "all" }];
-      options.push(
-        ...descriptor.selectedScoreDescriptor.categories.map((cat) => {
-          return { text: cat.text, value: cat.val };
+  /**
+   * @param {import("@codemirror/autocomplete").Completion[]} priorityCompletions
+   * @param {Object} props
+   * @param {boolean} [props.autocompleteInTheMiddle] - If true, completion would be shown automatically even when editing in the middle of the expression.
+   * @param {boolean} [props.enforceOrder] - If true, the priorityCompletions are shown in the order they are provided.
+   * @param {boolean} [props.autoSpaceAfter] - If true, space is inserted after priorityCompletions. When a user accepts a completion with a space, another completion is suggested immediately (see `activateOnCompletion`). Use when fairly certain that the expression continues.
+   * @param {boolean} [props.includeDefault] - If true, the default completions are included after the priority completions.
+   * @returns {import("@codemirror/autocomplete").CompletionResult}
+   */
+  const makeCompletions = (
+    priorityCompletions,
+    {
+      autocompleteInTheMiddle = false,
+      enforceOrder = false,
+      autoSpaceAfter = false,
+      includeDefault = true,
+    } = {},
+  ) => {
+    if (!autocompleteInTheMiddle && !completingAtEnd && !context.explicit) {
+      return null;
+    }
+    const priorityCompletionsOrdered = enforceOrder
+      ? priorityCompletions.map((c, idx) => ({
+          ...c,
+          boost: -idx,
+        }))
+      : priorityCompletions;
+    const priorityCompletionsAdjusted = autoSpaceAfter
+      ? priorityCompletionsOrdered.map((c) =>
+          !c.apply && !c.label.endsWith(" ")
+            ? { ...c, label: c.label + " " }
+            : c,
+        )
+      : priorityCompletionsOrdered;
+    if (includeDefault) {
+      /** @type {import("@codemirror/autocomplete").CompletionSection} */
+      const miscSection = {
+        name: "misc",
+        header: () => {
+          const element = document.createElement("hr");
+          element.style.display = "list-item";
+          element.style.margin = "2px 0";
+          return element;
+        },
+      };
+      const priorityLabels = new Set(priorityCompletions.map((c) => c.label));
+      const defaultCompletionAdjusted = priorityCompletions
+        ? defaultCompletionItems
+            .filter((c) => !priorityLabels.has(c.label))
+            .map((c) => ({ ...c, section: miscSection }))
+        : defaultCompletionItems;
+      return {
+        from: completionStart,
+        options: [...priorityCompletionsAdjusted, ...defaultCompletionAdjusted],
+      };
+    } else {
+      return {
+        from: completionStart,
+        options: priorityCompletionsAdjusted,
+      };
+    }
+  };
+  const defaultCompletions = () => makeCompletions([]);
+  const noCompletions = () => (context.explicit ? defaultCompletions() : null);
+  const newExpressionCompletions = () =>
+    makeCompletions([
+      ...filterItems.map((item) =>
+        makeCanonicalNameCompletion(item, {
+          autoSpaceIf: (item) =>
+            completingAtEnd && item.scoreType != kScoreTypeBoolean,
         }),
-      );
-      return html`<${SelectFilter}
-        value=${filter.value || "all"}
-        options=${options}
-        onChange=${updateCategoryValue}
-      />`;
+      ),
+      ...sampleFunctionCompletionItems,
+    ]);
+  const variableCompletions = () => makeCompletions(variableCompletionItems);
+  /** @param {import("./filters.mjs").ScoreFilterItem[]} items */
+  const memberAccessCompletions = (items) =>
+    makeCompletions(items.map(makeMemberAccessCompletion), {
+      autocompleteInTheMiddle: true,
+      includeDefault: false,
+    });
+  const logicalOpCompletions = () =>
+    makeCompletions(["and", "or"].map(makeKeywordCompletion), {
+      enforceOrder: true,
+      autoSpaceAfter: completingAtEnd,
+    });
+  const descreteRelationCompletions = () =>
+    makeCompletions(["==", "!=", "in", "not in"].map(makeKeywordCompletion), {
+      enforceOrder: true,
+      autoSpaceAfter: completingAtEnd,
+    });
+  const continuousRelationCompletions = () =>
+    makeCompletions(
+      ["<", "<=", ">", ">=", "==", "!="].map(makeKeywordCompletion),
+      { enforceOrder: true, autoSpaceAfter: completingAtEnd },
+    );
+  const customRelationCompletions = () =>
+    makeCompletions(
+      ["<", "<=", ">", ">=", "==", "!=", "~="].map(makeKeywordCompletion),
+      { enforceOrder: true, autoSpaceAfter: completingAtEnd },
+    );
+  /** @param {string[]} options */
+  const rhsCompletions = (options) =>
+    makeCompletions(options.map(makeLiteralCompletion));
+
+  if (!prevToken(1)) return newExpressionCompletions();
+
+  // Member access
+  if (prevToken(1)?.text == ".") {
+    const scorer = prevToken(2)?.text;
+    if (scorer) {
+      return memberAccessCompletions(getMemberScoreItems(filterItems, scorer));
     }
+  }
 
-    case kScoreTypeCategorical: {
-      const options = [{ text: "All", value: "all" }];
-      options.push(
-        ...descriptor.selectedScoreDescriptor.categories.map((cat) => {
-          return { text: cat, value: cat };
-        }),
-      );
-      return html`<${SelectFilter}
-        value=${filter.value || "all"}
-        options=${options}
-        onChange=${updateCategoryValue}
-      />`;
+  // Start of a function call or of a bracketed expression
+  if (prevToken(1)?.text == "(") {
+    if (prevToken(2)?.type == "mathFunction") return variableCompletions();
+    if (prevToken(2)?.type == "sampleFunction") {
+      // All sample functions expect a literal (a string to search for).
+      return noCompletions();
     }
+    // A grouping parenthesis, not a function call.
+    return newExpressionCompletions();
+  }
+
+  // End of a function call or of a bracketed expression
+  if (prevToken(1)?.text == ")") {
+    // Don't try to guess: too unpredictable. Could continue with an arithmetic
+    // operator (if constructing a complex expression), with a comparison (if
+    // comparing function call result to something) or with a logical connector
+    // (if a new subexpression is starting). Very hard to figure out what is
+    // going on without an AST, which we don't have here.
+    return noCompletions();
+  }
+
+  // Suggest relation based on variable type
+  if (prevToken(1)?.type == "variable") {
+    const scoreType = findFilterItem(1)?.scoreType;
+    if ([kScoreTypePassFail, kScoreTypeCategorical].includes(scoreType))
+      return descreteRelationCompletions();
+    if (scoreType == kScoreTypeNumeric) return continuousRelationCompletions();
+    if (scoreType == kScoreTypeOther) return customRelationCompletions();
+    if (scoreType == kScoreTypeBoolean) return logicalOpCompletions();
+  }
 
-    case kScoreTypeNumeric: {
-      // TODO: Create a real numeric slider control of some kind
-      return html`
-        <input
-          type="text"
-          class="form-control"
-          value=${filter.value}
-          placeholder="Filter Samples (score)"
-          style=${{ width: "150px" }}
-          onInput=${(e) => {
-            filterChanged({
-              value: e.currentTarget.value,
-              type: kScoreTypeNumeric,
-            });
-          }}
-        />
-      `;
+  // Suggest comparison RHS based on the LHS
+  if (prevToken(1)?.type == "relation") {
+    const item = findFilterItem(2);
+    if (item) {
+      if (item?.categories?.length) {
+        return rhsCompletions(item.categories);
+      } else {
+        // Technically, it's possible to compare two scores, but comparison to a
+        // constant is much more likely.
+        return noCompletions();
+      }
+    } else {
+      // Most likely: comparison starting from a constant, perhaps beginning of
+      // a chain comparison.
+      return variableCompletions();
     }
+  }
+
+  // Suggest connector to the next subexpression after `VARIABLE OP VALUE` subexpression finished.
+  if (isLiteral(prevToken(1)) && prevToken(2)?.type == "relation") {
+    return logicalOpCompletions();
+  }
+
+  // New subexpression begins after a logical connector.
+  if (isLogicalOp(prevToken(1))) return newExpressionCompletions();
 
-    case kScoreTypeObject: {
-      if (!descriptor.selectedScoreDescriptor.categories) {
-        return "";
+  // Something unusual is going on. We don't have any good guesses, but the user
+  // can trigger completion manually with Ctrl+Space if they want.
+  return noCompletions();
+}
+
+/**
+ * @param {import("codemirror").EditorView} view
+ * @param {import("./filters.mjs").FilterError | undefined} filterError
+ * @returns {import("@codemirror/lint").Diagnostic[]}
+ */
+function getLints(view, filterError) {
+  if (!filterError) return [];
+  return [
+    {
+      from: filterError.from || 0,
+      to: filterError.to || view.state.doc.length,
+      severity: filterError.severity,
+      message: filterError.message,
+    },
+  ];
+}
+
+// Emulate `form-control` style to make it look like a text input.
+const editorTheme = EditorView.theme({
+  "&": {
+    fontSize: "inherit",
+    color: "var(--inspect-input-foreground)",
+    backgroundColor: "var(--inspect-input-background)",
+    border: "1px solid var(--inspect-input-border)",
+    borderRadius: "var(--bs-border-radius)",
+  },
+  ".cm-cursor.cm-cursor-primary": {
+    borderLeftColor: "var(--bs-body-color)",
+  },
+  ".cm-selectionBackground": {
+    backgroundColor: "var(--inspect-inactive-selection-background)",
+  },
+  "&.cm-focused > .cm-scroller > .cm-selectionLayer > .cm-selectionBackground":
+    {
+      backgroundColor: "var(--inspect-active-selection-background)",
+    },
+  "&.cm-focused": {
+    outline: "none",
+    borderColor: "var(--inspect-focus-border-color)",
+    boxShadow: "var(--inspect-focus-border-shadow)",
+  },
+  ".filter-pending > &.cm-focused": {
+    borderColor: "var(--inspect-focus-border-gray-color)",
+    boxShadow: "var(--inspect-focus-border-gray-shadow)",
+  },
+  ".cm-tooltip": {
+    backgroundColor: "var(--bs-light)",
+    border: "1px solid var(--bs-border-color)",
+    color: "var(--bs-body-color)",
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
+    color: "var(--bs-body-color)",
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
+    backgroundColor: "var(--inspect-active-selection-background)",
+    color: "var(--bs-body-color)",
+  },
+  ".cm-scroller": {
+    overflow: "hidden",
+  },
+});
+
+/**
+ * @param {import("../../samples/SamplesDescriptor.mjs").EvalDescriptor} evalDescriptor
+ * @param {string} filterValue
+ * @returns {FilteringResult}
+ */
+const getFilteringResult = (evalDescriptor, filterValue) => {
+  const { result, error } = filterSamples(
+    evalDescriptor,
+    evalDescriptor.samples,
+    filterValue,
+  );
+  return { numSamples: result.length, error };
+};
+
+/**
+ * Renders the Sample Filter Control
+ *
+ * @param {Object} props - The parameters for the component.
+ * @param {import("../../samples/SamplesDescriptor.mjs").EvalDescriptor} props.evalDescriptor
+ * @param {(filter: import("../../Types.mjs").ScoreFilter) => void} props.filterChanged - Filter changed function
+ * @param {import("../../Types.mjs").ScoreFilter} props.filter - Filter that is currently applied.
+ * @returns {import("preact").JSX.Element | string} The TranscriptView component.
+ */
+export const SampleFilter = ({ evalDescriptor, filter, filterChanged }) => {
+  const editorRef = useRef(/** @type {HTMLElement|null} */ (null));
+  const editorViewRef = useRef(
+    /** @type {import("codemirror").EditorView|null} */ (null),
+  );
+  const linterCompartment = useRef(new Compartment());
+  const autocompletionCompartment = useRef(new Compartment());
+  const updateListenerCompartment = useRef(new Compartment());
+  const filterItems = useMemo(
+    () => scoreFilterItems(evalDescriptor),
+    [evalDescriptor],
+  );
+  // Result of applying the filter expression in the editor, which might be
+  // different from the active filter.
+  const [filteringResultInstant, setFilteringResultInstant] = useState(
+    /** @type {FilteringResult | null} */ (null),
+  );
+
+  /**
+   * @param {FocusEvent} event
+   * @param {import("codemirror").EditorView} view
+   */
+  const handleFocus = (event, view) => {
+    if (event.isTrusted && view.state.doc.toString() === "") {
+      setTimeout(() => startCompletion(view), 0);
+    }
+  };
+
+  const makeAutocompletion = () =>
+    autocompletion({
+      override: [(context) => getCompletions(context, filterItems)],
+      activateOnCompletion: (c) => c.label.endsWith(" "), // see autoSpaceAfter
+    });
+  const makeLinter = () =>
+    // CodeMirror debounces the linter, so even instant error updates are not annoying
+    linter((view) => getLints(view, filteringResultInstant?.error));
+  const makeUpdateListener = () =>
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        const newValue = update.state.doc.toString();
+        const filteringResult = getFilteringResult(evalDescriptor, newValue);
+        if (!filteringResult.error) {
+          filterChanged({ value: newValue });
+        }
+        setFilteringResultInstant(filteringResult);
       }
-      const options = [{ text: "All", value: "all" }];
-      options.push(
-        ...descriptor.selectedScoreDescriptor.categories.map((cat) => {
-          return { text: cat.text, value: cat.value };
-        }),
+    });
+
+  // Initialize editor when component mounts
+  useEffect(() => {
+    editorViewRef.current?.destroy();
+    editorViewRef.current = new EditorView({
+      parent: editorRef.current,
+      state: EditorState.create({
+        doc: filter.value || "",
+        extensions: [
+          minimalSetup,
+          bracketMatching(),
+          editorTheme,
+          EditorState.transactionFilter.of(ensureOneLine),
+          updateListenerCompartment.current.of(makeUpdateListener()),
+          EditorView.domEventHandlers({
+            focus: handleFocus,
+          }),
+          language,
+          syntaxHighlighting(highlightStyle),
+          autocompletionCompartment.current.of(makeAutocompletion()),
+          linterCompartment.current.of(makeLinter()),
+        ],
+      }),
+    });
+    return () => {
+      editorViewRef.current?.destroy();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (
+      editorViewRef.current &&
+      filter.value !== editorViewRef.current.state.doc.toString()
+    ) {
+      setFilteringResultInstant(
+        getFilteringResult(evalDescriptor, filter.value),
       );
+      editorViewRef.current.dispatch({
+        changes: {
+          from: 0,
+          to: editorViewRef.current.state.doc.length,
+          insert: filter.value || "",
+        },
+      });
+    }
+  }, [evalDescriptor, filter.value]);
+
+  useEffect(() => {
+    if (editorViewRef.current) {
+      editorViewRef.current.dispatch({
+        effects:
+          updateListenerCompartment.current.reconfigure(makeUpdateListener()),
+      });
+    }
+  }, [evalDescriptor]);
 
-      return html`<${SelectFilter}
-        value=${filter.value || "all"}
-        options=${options}
-        onChange=${updateCategoryValue}
-      />`;
+  useEffect(() => {
+    if (editorViewRef.current) {
+      editorViewRef.current.dispatch({
+        effects:
+          autocompletionCompartment.current.reconfigure(makeAutocompletion()),
+      });
     }
+  }, [filterItems]);
 
-    default: {
-      return undefined;
+  useEffect(() => {
+    if (editorViewRef.current) {
+      editorViewRef.current.dispatch({
+        effects: linterCompartment.current.reconfigure(makeLinter()),
+      });
     }
-  }
-};
+  }, [filteringResultInstant?.error]);
 
-const SelectFilter = ({ value, options, onChange }) => {
   return html`
     <div style=${{ display: "flex" }}>
       <span
-        class="sample-label"
+        class="sample-filter-label"
         style=${{
           alignSelf: "center",
           fontSize: FontSize.smaller,
@@ -115,19 +719,38 @@ const SelectFilter = ({ value, options, onChange }) => {
           marginRight: "0.3em",
           marginLeft: "0.2em",
         }}
-        >Scores:</span
-      >
-      <select
-        class="form-select form-select-sm"
-        aria-label=".sample-label"
-        style=${{ fontSize: FontSize.smaller }}
-        value=${value}
-        onChange=${onChange}
+        >Filter:</span
       >
-        ${options.map((option) => {
-          return html`<option value="${option.value}">${option.text}</option>`;
-        })}
-      </select>
+      <div
+        ref=${editorRef}
+        style=${{ width: "300px" }}
+        class=${filteringResultInstant?.error ? ["filter-pending"] : []}
+      ></div>
+      <span
+        class="bi bi-question-circle"
+        style=${{
+          position: "relative",
+          marginLeft: "0.5em",
+          cursor: "help",
+          alignSelf: "center",
+        }}
+        data-tooltip=${filterTooltip}
+        data-tooltip-position="bottom-left"
+      ></span>
     </div>
   `;
 };
+
+const filterTooltip = `
+Filter samples by:
+  • Scores
+  • Input and target regex search: input_contains, target_contains
+
+Supported expressions:
+  • Arithmetic: +, -, *, /, mod, ^
+  • Comparison: <, <=, >, >=, ==, !=, including chain comparisons, e.g. “10 <= x < 20”
+  • Boolean: and, or, not
+  • Regex matching: ~= (case-sensitive)
+  • Set operations: in, not in; e.g. “x in (2, 3, 5)”
+  • Functions: min, max, abs, round, floor, ceil, sqrt, log, log2, log10
+`.trim();