diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx
new file mode 100644
index 000000000..f5e130c8c
--- /dev/null
+++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx
@@ -0,0 +1,143 @@
+import { Dialog, Transition, DialogPanel, DialogTitle } from '@headlessui/react';
+import React, { Fragment } from 'react';
+
+import X from '~icons/material-symbols/close';
+import MaterialSymbolsHelpOutline from '~icons/material-symbols/help-outline';
+
+const DisplaySearchDocs: React.FC = () => {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ const openDialog = () => setIsOpen(true);
+ const closeDialog = () => setIsOpen(false);
+
+ return (
+ <>
+
+
+
+
+ >
+ );
+};
+
+export default DisplaySearchDocs;
diff --git a/website/src/components/SearchPage/SearchForm.tsx b/website/src/components/SearchPage/SearchForm.tsx
index 2ffdcb1a4..4e1f18b85 100644
--- a/website/src/components/SearchPage/SearchForm.tsx
+++ b/website/src/components/SearchPage/SearchForm.tsx
@@ -13,6 +13,10 @@ import type { GroupedMetadataFilter, MetadataFilter, FieldValues, SetAFieldValue
import { type ReferenceGenomesSequenceNames } from '../../types/referencesGenomes.ts';
import type { ClientConfig } from '../../types/runtimeConfig.ts';
import { OffCanvasOverlay } from '../OffCanvasOverlay.tsx';
+import MaterialSymbolsHelpOutline from '~icons/material-symbols/help-outline';
+import MaterialSymbolsResetFocus from '~icons/material-symbols/reset-focus';
+import StreamlineWrench from '~icons/streamline/wrench';
+
const queryClient = new QueryClient();
interface SearchFormProps {
@@ -61,19 +65,22 @@ export const SearchForm = ({
Search query
-
-
-
diff --git a/website/src/components/SearchPage/SearchFullUI.spec.tsx b/website/src/components/SearchPage/SearchFullUI.spec.tsx
index f7bdbf2b2..5a8fe4fb2 100644
--- a/website/src/components/SearchPage/SearchFullUI.spec.tsx
+++ b/website/src/components/SearchPage/SearchFullUI.spec.tsx
@@ -218,7 +218,7 @@ describe('SearchFullUI', () => {
it('toggle field visibility', async () => {
renderSearchFullUI({});
expect(await screen.findByLabelText('Field 1')).toBeVisible();
- const customizeButton = await screen.findByRole('button', { name: 'Customize fields' });
+ const customizeButton = await screen.findByRole('button', { name: 'Select fields' });
await userEvent.click(customizeButton);
const field1Checkbox = await screen.findByRole('checkbox', { name: 'Field 1' });
expect(field1Checkbox).toBeChecked();
diff --git a/website/src/components/SearchPage/fields/MutationField.tsx b/website/src/components/SearchPage/fields/MutationField.tsx
index bccffc3a3..11318d990 100644
--- a/website/src/components/SearchPage/fields/MutationField.tsx
+++ b/website/src/components/SearchPage/fields/MutationField.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
import type { ReferenceGenomesSequenceNames } from '../../../types/referencesGenomes.ts';
import type { BaseType } from '../../../utils/sequenceTypeHelpers.ts';
+import DisplaySearchDocs from '../DisplaySearchDocs';
interface MutationFieldProps {
referenceGenomesSequenceNames: ReferenceGenomesSequenceNames;
@@ -188,9 +189,9 @@ export const MutationField: FC
= ({ referenceGenomesSequence
};
return (
-
+
-
+
= ({ referenceGenomesSequence
>
Mutations
-
setHasFocus(true)}
- onBlur={() => setHasFocus(false)}
- placeholder={hasFocus ? '' : selectedOptions.length === 0 ? 'Mutations' : 'Enter mutation'}
- onChange={handleInputChange}
- displayValue={(option: MutationQuery) => option.text}
- value={inputValue}
- id='mutField'
- className={`
+
+
setHasFocus(true)}
+ onBlur={() => setHasFocus(false)}
+ placeholder={
+ hasFocus ? '' : selectedOptions.length === 0 ? 'Mutations' : 'Enter mutation'
+ }
+ onChange={handleInputChange}
+ displayValue={(option: MutationQuery) => option.text}
+ value={inputValue}
+ id='mutField'
+ className={`
block w-full text-sm text-gray-900 bg-transparent focus:outline-none focus:ring-0
${selectedOptions.length === 0 ? 'border-0 focus:border-0 py-3' : 'border border-gray-300 border-solid m-2 text-sm ml-0'}
`}
- />
+ />
+
+
+
+