From f4a1d1d2be71bb197bf782aa55974a40ab3ba579 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Tue, 5 May 2026 11:09:03 +0200
Subject: [PATCH 1/2] feat(website): replace plain textarea in VariantEditor
 with validated AdvancedQueryFilter

The advanced query mode in the collection variant editor now uses the
same validated query input as the baseline filter, restricting users to
lineage fields only.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../collections/form/CollectionForm.tsx       |  1 +
 .../form/VariantEditor.browser.spec.tsx       |  8 +++++
 .../collections/form/VariantEditor.tsx        | 31 ++++++-------------
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/website/src/components/collections/form/CollectionForm.tsx b/website/src/components/collections/form/CollectionForm.tsx
index 84d305908..46bc19175 100644
--- a/website/src/components/collections/form/CollectionForm.tsx
+++ b/website/src/components/collections/form/CollectionForm.tsx
@@ -115,6 +115,7 @@ export function CollectionForm({
                                 onRemove={removeVariant}
                                 canRemove={variants.length > 1}
                                 lineageFields={lineageFields}
+                                lapisUrl={lapisUrl}
                             />
                         ))}
                         <button type='button' className='btn btn-sm w-full' onClick={addVariant}>
diff --git a/website/src/components/collections/form/VariantEditor.browser.spec.tsx b/website/src/components/collections/form/VariantEditor.browser.spec.tsx
index d575ecfc4..74213a99c 100644
--- a/website/src/components/collections/form/VariantEditor.browser.spec.tsx
+++ b/website/src/components/collections/form/VariantEditor.browser.spec.tsx
@@ -2,6 +2,7 @@ import { describe, expect, it as itVitest, vi } from 'vitest';
 import { render } from 'vitest-browser-react';
 
 import { VariantEditor } from './VariantEditor.tsx';
+import { DUMMY_LAPIS_URL } from '../../../../routeMocker.ts';
 import { it } from '../../../../test-extend.ts';
 import type { VariantUpdate } from '../../../types/Collection.ts';
 
@@ -24,6 +25,7 @@ describe('VariantEditor', () => {
                 onRemove={vi.fn()}
                 canRemove={false}
                 lineageFields={[]}
+                lapisUrl={DUMMY_LAPIS_URL}
             />,
         );
 
@@ -42,6 +44,7 @@ describe('VariantEditor', () => {
                 onRemove={vi.fn()}
                 canRemove={false}
                 lineageFields={[]}
+                lapisUrl={DUMMY_LAPIS_URL}
             />,
         );
 
@@ -57,6 +60,7 @@ describe('VariantEditor', () => {
                 onRemove={vi.fn()}
                 canRemove={false}
                 lineageFields={[]}
+                lapisUrl={DUMMY_LAPIS_URL}
             />,
         );
 
@@ -76,6 +80,7 @@ describe('VariantEditor', () => {
                 onRemove={vi.fn()}
                 canRemove={false}
                 lineageFields={[]}
+                lapisUrl={DUMMY_LAPIS_URL}
             />,
         );
 
@@ -95,6 +100,7 @@ describe('VariantEditor', () => {
                 onRemove={vi.fn()}
                 canRemove={true}
                 lineageFields={[]}
+                lapisUrl={DUMMY_LAPIS_URL}
             />,
         );
 
@@ -114,6 +120,7 @@ describe('VariantEditor', () => {
                 onRemove={onRemove}
                 canRemove={true}
                 lineageFields={[]}
+                lapisUrl={DUMMY_LAPIS_URL}
             />,
         );
 
@@ -133,6 +140,7 @@ describe('VariantEditor', () => {
                 onRemove={vi.fn()}
                 canRemove={false}
                 lineageFields={[]}
+                lapisUrl={DUMMY_LAPIS_URL}
             />,
         );
 
diff --git a/website/src/components/collections/form/VariantEditor.tsx b/website/src/components/collections/form/VariantEditor.tsx
index ecb00cb7e..95e84f393 100644
--- a/website/src/components/collections/form/VariantEditor.tsx
+++ b/website/src/components/collections/form/VariantEditor.tsx
@@ -1,6 +1,7 @@
 import { memo, useCallback, useRef } from 'react';
 
 import type { FilterObject, VariantUpdate } from '../../../types/Collection.ts';
+import { AdvancedQueryFilter } from '../../genspectrum/AdvancedQueryFilter.tsx';
 import { GsLineageFilter } from '../../genspectrum/GsLineageFilter.tsx';
 import { GsMutationFilter } from '../../genspectrum/GsMutationFilter.tsx';
 
@@ -11,6 +12,7 @@ type Props = {
     onRemove: (index: number) => void;
     canRemove?: boolean;
     lineageFields: string[];
+    lapisUrl: string;
 };
 
 // Memoized to prevent re-rendering all variant cards when only one changes in the parent list.
@@ -21,6 +23,7 @@ export const VariantEditor = memo(function VariantEditor({
     onRemove,
     canRemove = true,
     lineageFields,
+    lapisUrl,
 }: Props) {
     const variantRef = useRef(variant);
     variantRef.current = variant;
@@ -75,7 +78,13 @@ export const VariantEditor = memo(function VariantEditor({
 
             <div className='col-span-2 flex flex-col gap-4'>
                 {variant.type === 'query' ? (
-                    <QueryVariantFields variant={variant} onChange={(v) => onChange(index, v)} />
+                    <AdvancedQueryFilter
+                        enabled
+                        lapisUrl={lapisUrl}
+                        value={variant.countQuery}
+                        allowedFields={lineageFields.length > 0 ? lineageFields : undefined}
+                        onInput={(newValue) => onChange(index, { ...variant, countQuery: newValue ?? '' })}
+                    />
                 ) : (
                     <MutationListVariantFields
                         filterObject={variant.filterObject}
@@ -109,26 +118,6 @@ export const VariantEditor = memo(function VariantEditor({
     );
 });
 
-function QueryVariantFields({
-    variant,
-    onChange,
-}: {
-    variant: Extract<VariantUpdate, { type: 'query' }>;
-    onChange: (v: VariantUpdate) => void;
-}) {
-    return (
-        <div className='flex flex-col'>
-            <label className='label'>Query</label>
-            <textarea
-                className='textarea textarea-bordered w-full max-w-xl font-mono text-sm'
-                placeholder='LAPIS filter expression for counting sequences matching this variant.'
-                value={variant.countQuery}
-                onChange={(e) => onChange({ ...variant, countQuery: e.currentTarget.value })}
-            />
-        </div>
-    );
-}
-
 // Memoized because GsMutationFilter is expensive to re-render. Relies on handleFilterObjectChange
 // being stable (via useCallback) in the parent — otherwise memo would have no effect.
 const MutationListVariantFields = memo(function MutationListVariantFields({

From 9f07364486a65edef16845f6566a117e16cbca31 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Tue, 5 May 2026 11:17:20 +0200
Subject: [PATCH 2/2] fix(website): wrap VariantEditor with QueryClientProvider
 in browser spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../form/VariantEditor.browser.spec.tsx         | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/website/src/components/collections/form/VariantEditor.browser.spec.tsx b/website/src/components/collections/form/VariantEditor.browser.spec.tsx
index 74213a99c..471ef8ec3 100644
--- a/website/src/components/collections/form/VariantEditor.browser.spec.tsx
+++ b/website/src/components/collections/form/VariantEditor.browser.spec.tsx
@@ -4,8 +4,11 @@ import { render } from 'vitest-browser-react';
 import { VariantEditor } from './VariantEditor.tsx';
 import { DUMMY_LAPIS_URL } from '../../../../routeMocker.ts';
 import { it } from '../../../../test-extend.ts';
+import { withQueryProvider } from '../../../backendApi/withQueryProvider.tsx';
 import type { VariantUpdate } from '../../../types/Collection.ts';
 
+const VariantEditorWithProvider = withQueryProvider(VariantEditor);
+
 const FILTER_VARIANT: VariantUpdate = { type: 'filterObject', name: 'JN.1*', filterObject: {} };
 const QUERY_VARIANT: VariantUpdate = {
     type: 'query',
@@ -18,7 +21,7 @@ describe('VariantEditor', () => {
         lapis.mockLapisDown();
 
         const { getByText } = render(
-            <VariantEditor
+            <VariantEditorWithProvider
                 index={0}
                 variant={FILTER_VARIANT}
                 onChange={vi.fn()}
@@ -37,7 +40,7 @@ describe('VariantEditor', () => {
         lapis.mockLapisDown();
 
         const { getByRole } = render(
-            <VariantEditor
+            <VariantEditorWithProvider
                 index={0}
                 variant={FILTER_VARIANT}
                 onChange={vi.fn()}
@@ -53,7 +56,7 @@ describe('VariantEditor', () => {
 
     itVitest('"Use advanced query" checkbox is checked for query variant', async () => {
         const { getByRole } = render(
-            <VariantEditor
+            <VariantEditorWithProvider
                 index={0}
                 variant={QUERY_VARIANT}
                 onChange={vi.fn()}
@@ -73,7 +76,7 @@ describe('VariantEditor', () => {
         const onChange = vi.fn();
 
         const { getByRole } = render(
-            <VariantEditor
+            <VariantEditorWithProvider
                 index={0}
                 variant={FILTER_VARIANT}
                 onChange={onChange}
@@ -93,7 +96,7 @@ describe('VariantEditor', () => {
         lapis.mockLapisDown();
 
         const { getByRole } = render(
-            <VariantEditor
+            <VariantEditorWithProvider
                 index={0}
                 variant={FILTER_VARIANT}
                 onChange={vi.fn()}
@@ -113,7 +116,7 @@ describe('VariantEditor', () => {
         const onRemove = vi.fn();
 
         const { getByRole } = render(
-            <VariantEditor
+            <VariantEditorWithProvider
                 index={2}
                 variant={FILTER_VARIANT}
                 onChange={vi.fn()}
@@ -133,7 +136,7 @@ describe('VariantEditor', () => {
         const onChange = vi.fn();
 
         const { getByPlaceholder } = render(
-            <VariantEditor
+            <VariantEditorWithProvider
                 index={0}
                 variant={QUERY_VARIANT}
                 onChange={onChange}