From cc35ccdafd19758a0fd8b5d9806de1aceefdbe75 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/3] 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 67bd56e3f76db6312a2989a89248f3d31e3adef5 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/3] 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}

From 5af52e19cd4989352f4378ac0577b9403afccb20 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Tue, 19 May 2026 13:06:05 +0200
Subject: [PATCH 3/3] feat(website): set tooltip-top on AdvancedQueryFilter in
 VariantEditor

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 website/src/components/collections/form/VariantEditor.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/components/collections/form/VariantEditor.tsx b/website/src/components/collections/form/VariantEditor.tsx
index 95e84f393..6403e29e5 100644
--- a/website/src/components/collections/form/VariantEditor.tsx
+++ b/website/src/components/collections/form/VariantEditor.tsx
@@ -84,6 +84,7 @@ export const VariantEditor = memo(function VariantEditor({
                         value={variant.countQuery}
                         allowedFields={lineageFields.length > 0 ? lineageFields : undefined}
                         onInput={(newValue) => onChange(index, { ...variant, countQuery: newValue ?? '' })}
+                        errorTooltipClass='tooltip-top'
                     />
                 ) : (
                     <MutationListVariantFields