From f6113cfb4dd5b33f7213f94ca5569ed5f0a5f60f Mon Sep 17 00:00:00 2001 From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com> Date: Tue, 2 Jul 2024 11:13:42 +0200 Subject: [PATCH 1/8] Add search docs --- .../docs/how-to/search_sequences_website.mdx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 website/src/pages/docs/how-to/search_sequences_website.mdx diff --git a/website/src/pages/docs/how-to/search_sequences_website.mdx b/website/src/pages/docs/how-to/search_sequences_website.mdx new file mode 100644 index 000000000..fa6019d11 --- /dev/null +++ b/website/src/pages/docs/how-to/search_sequences_website.mdx @@ -0,0 +1,31 @@ +# How to Search + +Currently all searches that require a string do exact matching, we are working on adding an autocomplete option but currently searches for accessions or authors require exact matches. + +## Mutations + +### Nucleotide Mutations and Insertions + +A nucleotide mutation has the format `` or ``. A `` can be one of the four nucleotides `A`, `T`, `C`, and `G`. It can also be `-` for deletion and `N` for unknown. For example if the reference sequence is `A` at position 23 both: `23T` and `A23T` will yield the same results. + +If your organism is multi-segmented you must append the name of the segment to the start of the mutation, e.g. `S:23T` and `S:A23T` for a mutation in segment `S`. + +Insertions can be searched for in the same manner, they just need to have `ins_` appended to the start of the mutation. Example `ins_10462:A` or if the organism is multi-segmented `ins_S:10462:A`. + +### Amino Acid Mutations and Insertions + +An amino acid mutation has the format `:` of `:`. A can be one of the 20 amino acid codes. It can also be `-` for deletion and `X` for unknown. Example: `E:57Q`. + +Insertions can be searched for in the same manner, they just need to have `ins_` appended to the start of the mutation. Example `ins_NS4B:31:N`. + +### Multiple Mutations and Insertions + +Multiple mutation filters can be provided in a single request. They can either be added one after another or all at once in a comma separated list. Example: `123T,E:57Q` + +### Any Mutation + +To filter for any mutation at a given position you can omit the ``. + +### No Mutation + +You can write a `.` for the `` to filter for sequences for which it is confirmed that no mutation occurred, i.e. has the same base as the reference genome at the specified position. From 78e84deadd284397574271c0f6864a29af17a50d Mon Sep 17 00:00:00 2001 From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com> Date: Tue, 2 Jul 2024 15:25:01 +0200 Subject: [PATCH 2/8] Add the contents of the search info to a pop up. --- .../SearchPage/DisplaySearchDocs.tsx | 88 +++++++++++++++++++ .../SearchPage/fields/MutationField.tsx | 4 +- .../docs/how-to/search_sequences_website.mdx | 2 +- 3 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 website/src/components/SearchPage/DisplaySearchDocs.tsx diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx new file mode 100644 index 000000000..a6f635379 --- /dev/null +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -0,0 +1,88 @@ +import { type FC, useRef, useState } from 'react'; + +const DisplaySearchDocs: FC = () => { + const dialogRef = useRef(null); + + const openDialog = () => { + if (dialogRef.current) { + dialogRef.current.showModal(); + } + }; + + const closeDialog = () => { + if (dialogRef.current) { + dialogRef.current.close(); + } + }; + + return ( + <> + + +
+
+ +
+

Mutation Search

+
+

Nucleotide Mutations and Insertions

+

+ A nucleotide mutation has the format <position><base> or + <base_ref><position><base>. A <base> can be one of the four + nucleotides A, T, C, and G. It can also be - for deletion + and N for unknown. For example if the reference sequence is A at position{' '} + 23 both: 23T and A23T will yield the same results. +

+

+ If your organism is multi-segmented you must append the name of the segment to the start of + the mutation, e.g. S:23T and S:A23T for a mutation in segment S. +

+

+ Insertions can be searched for in the same manner, they just need to have ins_{' '} + appended to the start of the mutation. Example ins_10462:A or if the organism is + multi-segmented ins_S:10462:A. +

+
+ +
+

Amino Acid Mutations and Insertions

+

+ An amino acid mutation has the format <gene>:<position><base> or + <gene>:<base_ref><position><base>. A <base> can + be one of the 20 amino acid codes. It can also be - for deletion and X for + unknown. Example: E:57Q. +

+

+ Insertions can be searched for in the same manner, they just need to have ins_ + appended to the start of the mutation. Example ins_NS4B:31:N. +

+ +

+ Multiple mutation filters can be provided in a single request. They can either be added one + after another or all at once in a comma separated list. Example: 123T,E:57Q. +

+
+ +
+

Any Mutation

+

+ To filter for any mutation at a given position you can omit the <base>. +

+
+
+

No Mutation

+

+ You can write a . for the <base> to filter for sequences for which it is + confirmed that no mutation occurred, i.e. has the same base as the reference genome at the + specified position. +

+
+
+ + + ); +}; + +export default DisplaySearchDocs; diff --git a/website/src/components/SearchPage/fields/MutationField.tsx b/website/src/components/SearchPage/fields/MutationField.tsx index bccffc3a3..e9ed2591b 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,7 +189,7 @@ export const MutationField: FC = ({ referenceGenomesSequence }; return ( -
+
= ({ referenceGenomesSequence
+
); }; diff --git a/website/src/pages/docs/how-to/search_sequences_website.mdx b/website/src/pages/docs/how-to/search_sequences_website.mdx index fa6019d11..fc3e31b9b 100644 --- a/website/src/pages/docs/how-to/search_sequences_website.mdx +++ b/website/src/pages/docs/how-to/search_sequences_website.mdx @@ -14,7 +14,7 @@ Insertions can be searched for in the same manner, they just need to have `ins_` ### Amino Acid Mutations and Insertions -An amino acid mutation has the format `:` of `:`. A can be one of the 20 amino acid codes. It can also be `-` for deletion and `X` for unknown. Example: `E:57Q`. +An amino acid mutation has the format `:` of `:`. A `` can be one of the 20 amino acid codes. It can also be `-` for deletion and `X` for unknown. Example: `E:57Q`. Insertions can be searched for in the same manner, they just need to have `ins_` appended to the start of the mutation. Example `ins_NS4B:31:N`. From e634d745af982770038d311a629f1029eeb949b8 Mon Sep 17 00:00:00 2001 From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com> Date: Tue, 2 Jul 2024 15:26:16 +0200 Subject: [PATCH 3/8] Fill the full mutations field --- website/src/components/SearchPage/fields/MutationField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/SearchPage/fields/MutationField.tsx b/website/src/components/SearchPage/fields/MutationField.tsx index e9ed2591b..9dedd7949 100644 --- a/website/src/components/SearchPage/fields/MutationField.tsx +++ b/website/src/components/SearchPage/fields/MutationField.tsx @@ -191,7 +191,7 @@ export const MutationField: FC = ({ referenceGenomesSequence return (
-
+
Date: Tue, 2 Jul 2024 15:46:07 +0200 Subject: [PATCH 4/8] Add link to general search docs and format. --- .../SearchPage/DisplaySearchDocs.tsx | 8 ++++- .../src/components/SearchPage/SearchForm.tsx | 3 ++ .../docs/how-to/search_sequences_website.mdx | 30 +------------------ 3 files changed, 11 insertions(+), 30 deletions(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index a6f635379..4ad95c0e1 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -1,4 +1,4 @@ -import { type FC, useRef, useState } from 'react'; +import { type FC, useRef } from 'react'; const DisplaySearchDocs: FC = () => { const dialogRef = useRef(null); @@ -21,6 +21,12 @@ const DisplaySearchDocs: FC = () => { ? +
diff --git a/website/src/components/SearchPage/SearchForm.tsx b/website/src/components/SearchPage/SearchForm.tsx index 2ffdcb1a4..a0bbdf963 100644 --- a/website/src/components/SearchPage/SearchForm.tsx +++ b/website/src/components/SearchPage/SearchForm.tsx @@ -60,6 +60,9 @@ export const SearchForm = ({ >

Search query

+ + How to Search +
diff --git a/website/src/pages/docs/how-to/search_sequences_website.mdx b/website/src/pages/docs/how-to/search_sequences_website.mdx index fc3e31b9b..ffa32c6e5 100644 --- a/website/src/pages/docs/how-to/search_sequences_website.mdx +++ b/website/src/pages/docs/how-to/search_sequences_website.mdx @@ -1,31 +1,3 @@ # How to Search -Currently all searches that require a string do exact matching, we are working on adding an autocomplete option but currently searches for accessions or authors require exact matches. - -## Mutations - -### Nucleotide Mutations and Insertions - -A nucleotide mutation has the format `` or ``. A `` can be one of the four nucleotides `A`, `T`, `C`, and `G`. It can also be `-` for deletion and `N` for unknown. For example if the reference sequence is `A` at position 23 both: `23T` and `A23T` will yield the same results. - -If your organism is multi-segmented you must append the name of the segment to the start of the mutation, e.g. `S:23T` and `S:A23T` for a mutation in segment `S`. - -Insertions can be searched for in the same manner, they just need to have `ins_` appended to the start of the mutation. Example `ins_10462:A` or if the organism is multi-segmented `ins_S:10462:A`. - -### Amino Acid Mutations and Insertions - -An amino acid mutation has the format `:` of `:`. A `` can be one of the 20 amino acid codes. It can also be `-` for deletion and `X` for unknown. Example: `E:57Q`. - -Insertions can be searched for in the same manner, they just need to have `ins_` appended to the start of the mutation. Example `ins_NS4B:31:N`. - -### Multiple Mutations and Insertions - -Multiple mutation filters can be provided in a single request. They can either be added one after another or all at once in a comma separated list. Example: `123T,E:57Q` - -### Any Mutation - -To filter for any mutation at a given position you can omit the ``. - -### No Mutation - -You can write a `.` for the `` to filter for sequences for which it is confirmed that no mutation occurred, i.e. has the same base as the reference genome at the specified position. +Fill this in with tips for your loculus instance. From 34fd71abbb6c963de2dea029c57d2afc2130d85d Mon Sep 17 00:00:00 2001 From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com> Date: Wed, 3 Jul 2024 14:44:58 +0200 Subject: [PATCH 5/8] Fix search docs. --- .../SearchPage/DisplaySearchDocs.tsx | 57 ++++++++++++------- 1 file changed, 38 insertions(+), 19 deletions(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index 4ad95c0e1..66f2e5059 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -33,19 +33,20 @@ const DisplaySearchDocs: FC = () => {

Mutation Search

-

Nucleotide Mutations and Insertions

-

- A nucleotide mutation has the format <position><base> or - <base_ref><position><base>. A <base> can be one of the four - nucleotides A, T, C, and G. It can also be - for deletion - and N for unknown. For example if the reference sequence is A at position{' '} - 23 both: 23T and A23T will yield the same results. +

Nucleotide Mutations and Insertions

+

+ For a single-segmented organism, nucleotide mutations have the format{' '} + <position><base> or + <base_ref><position><base>. A <base> can be one of the + four nucleotides A, T, C, and G. It can also be - for + deletion and N for unknown. For example if the reference sequence is A at + position 23 both: 23T and A23T will yield the same results.

-

+

If your organism is multi-segmented you must append the name of the segment to the start of the mutation, e.g. S:23T and S:A23T for a mutation in segment S.

-

+

Insertions can be searched for in the same manner, they just need to have ins_{' '} appended to the start of the mutation. Example ins_10462:A or if the organism is multi-segmented ins_S:10462:A. @@ -53,33 +54,51 @@ const DisplaySearchDocs: FC = () => {

-

Amino Acid Mutations and Insertions

-

+

Amino Acid Mutations and Insertions

+

An amino acid mutation has the format <gene>:<position><base> or <gene>:<base_ref><position><base>. A <base> can be one of the 20 amino acid codes. It can also be - for deletion and X for unknown. Example: E:57Q.

-

+

Insertions can be searched for in the same manner, they just need to have ins_ appended to the start of the mutation. Example ins_NS4B:31:N.

+
-

- Multiple mutation filters can be provided in a single request. They can either be added one - after another or all at once in a comma separated list. Example: 123T,E:57Q. +

+

Insertion Wildcards

+

+ Loculus supports insertion queries that contain wildcards ?. For example{' '} + ins_S:214:?EP? + will match all cases where segment S has an insertion of EP between the + positions 214 and 215 but also an insertion of other AAs which include the EP, e.g. + the insertion EPE will be matched. +

+

+ You can also use wildcards to match any insertion at a given position. For example{' '} + ins_S:214:?: will match any (but at least one) insertion between the positions 214 + and 215. +

+
+ +
+

Multiple Mutations

+

+ Multiple mutation filters can be provided by adding one mutation after the other.

-

Any Mutation

-

+

Any Mutation

+

To filter for any mutation at a given position you can omit the <base>.

-

No Mutation

-

+

No Mutation

+

You can write a . for the <base> to filter for sequences for which it is confirmed that no mutation occurred, i.e. has the same base as the reference genome at the specified position. From 1407d99f9fdcb5e12780454f9933ff6f2c8168f3 Mon Sep 17 00:00:00 2001 From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com> Date: Wed, 3 Jul 2024 14:49:16 +0200 Subject: [PATCH 6/8] Add back missing spaces --- .../SearchPage/DisplaySearchDocs.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index 66f2e5059..80b26337e 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -36,11 +36,11 @@ const DisplaySearchDocs: FC = () => {

Nucleotide Mutations and Insertions

For a single-segmented organism, nucleotide mutations have the format{' '} - <position><base> or - <base_ref><position><base>. A <base> can be one of the - four nucleotides A, T, C, and G. It can also be - for - deletion and N for unknown. For example if the reference sequence is A at - position 23 both: 23T and A23T will yield the same results. + <position><base> or <base_ref><position><base>. + A <base> can be one of the four nucleotides A, T, C, and{' '} + G. It can also be - for deletion and N for unknown. For example if the + reference sequence is A at position 23 both: 23T and A23T will + yield the same results.

If your organism is multi-segmented you must append the name of the segment to the start of @@ -56,7 +56,7 @@ const DisplaySearchDocs: FC = () => {

Amino Acid Mutations and Insertions

- An amino acid mutation has the format <gene>:<position><base> or + An amino acid mutation has the format <gene>:<position><base> or{' '} <gene>:<base_ref><position><base>. A <base> can be one of the 20 amino acid codes. It can also be - for deletion and X for unknown. Example: E:57Q. @@ -71,10 +71,9 @@ const DisplaySearchDocs: FC = () => {

Insertion Wildcards

Loculus supports insertion queries that contain wildcards ?. For example{' '} - ins_S:214:?EP? - will match all cases where segment S has an insertion of EP between the - positions 214 and 215 but also an insertion of other AAs which include the EP, e.g. - the insertion EPE will be matched. + ins_S:214:?EP? will match all cases where segment S has an insertion of{' '} + EP between the positions 214 and 215 but also an insertion of other AAs which include + the EP, e.g. the insertion EPE will be matched.

You can also use wildcards to match any insertion at a given position. For example{' '} From 5fc5758d918d178ab43557fc6e3a76e6fc608538 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Thu, 4 Jul 2024 07:55:57 +0200 Subject: [PATCH 7/8] Some suggestions for the Search help feature (#2234) * suggestions * fade icon * merge in text changes * update test * Automated code formatting --------- Co-authored-by: Loculus bot --- .../SearchPage/DisplaySearchDocs.tsx | 222 ++++++++++-------- .../src/components/SearchPage/SearchForm.tsx | 22 +- .../SearchPage/SearchFullUI.spec.tsx | 2 +- .../SearchPage/fields/MutationField.tsx | 28 ++- 4 files changed, 158 insertions(+), 116 deletions(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index 80b26337e..0ed5a9fa7 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -1,110 +1,142 @@ -import { type FC, useRef } from 'react'; +import { Dialog, Transition, DialogPanel, DialogTitle } from '@headlessui/react'; +import React, { Fragment } from 'react'; -const DisplaySearchDocs: FC = () => { - const dialogRef = useRef(null); +import X from '~icons/material-symbols/close'; +import MaterialSymbolsHelpOutline from '~icons/material-symbols/help-outline'; - const openDialog = () => { - if (dialogRef.current) { - dialogRef.current.showModal(); - } - }; +const DisplaySearchDocs: React.FC = () => { + const [isOpen, setIsOpen] = React.useState(false); - const closeDialog = () => { - if (dialogRef.current) { - dialogRef.current.close(); - } - }; + const openDialog = () => setIsOpen(true); + const closeDialog = () => setIsOpen(false); return ( <> - -

- -
-
- -
-

Mutation Search

-
-

Nucleotide Mutations and Insertions

-

- For a single-segmented organism, nucleotide mutations have the format{' '} - <position><base> or <base_ref><position><base>. - A <base> can be one of the four nucleotides A, T, C, and{' '} - G. It can also be - for deletion and N for unknown. For example if the - reference sequence is A at position 23 both: 23T and A23T will - yield the same results. -

-

- If your organism is multi-segmented you must append the name of the segment to the start of - the mutation, e.g. S:23T and S:A23T for a mutation in segment S. -

-

- Insertions can be searched for in the same manner, they just need to have ins_{' '} - appended to the start of the mutation. Example ins_10462:A or if the organism is - multi-segmented ins_S:10462:A. -

-
+ + + +
+ -
-

Amino Acid Mutations and Insertions

-

- An amino acid mutation has the format <gene>:<position><base> or{' '} - <gene>:<base_ref><position><base>. A <base> can - be one of the 20 amino acid codes. It can also be - for deletion and X for - unknown. Example: E:57Q. -

-

- Insertions can be searched for in the same manner, they just need to have ins_ - appended to the start of the mutation. Example ins_NS4B:31:N. -

-
+
+
+ + + + Mutation Search + + +

Mutation Search

+
+

+ Nucleotide Mutations and Insertions +

+

+ For a single-segmented organism, nucleotide mutations have the format{' '} + <position><base> or{' '} + <base_ref><position><base>. A <base>{' '} + can be one of the four nucleotides A, T, C, and{' '} + G. It can also be - for deletion and N for unknown. For + example if the reference sequence is A at position 23 both:{' '} + 23T and A23T will yield the same results. +

+

+ If your organism is multi-segmented you must append the name of the segment + to the start of the mutation, e.g. S:23T and S:A23T for a + mutation in segment S. +

+

+ Insertions can be searched for in the same manner, they just need to have{' '} + ins_ appended to the start of the mutation. Example{' '} + ins_10462:A or if the organism is multi-segmented{' '} + ins_S:10462:A. +

+
-
-

Insertion Wildcards

-

- Loculus supports insertion queries that contain wildcards ?. For example{' '} - ins_S:214:?EP? will match all cases where segment S has an insertion of{' '} - EP between the positions 214 and 215 but also an insertion of other AAs which include - the EP, e.g. the insertion EPE will be matched. -

-

- You can also use wildcards to match any insertion at a given position. For example{' '} - ins_S:214:?: will match any (but at least one) insertion between the positions 214 - and 215. -

-
+
+

+ Amino Acid Mutations and Insertions +

+

+ An amino acid mutation has the format{' '} + <gene>:<position><base> or{' '} + <gene>:<base_ref><position><base>. A{' '} + <base> can be one of the 20 amino acid codes. It can also be{' '} + - for deletion and X for unknown. Example: E:57Q. +

+

+ Insertions can be searched for in the same manner, they just need to have{' '} + ins_ + appended to the start of the mutation. Example ins_NS4B:31:N. +

+
-
-

Multiple Mutations

-

- Multiple mutation filters can be provided by adding one mutation after the other. -

-
+
+

Insertion Wildcards

+

+ Loculus supports insertion queries that contain wildcards ?. For + example ins_S:214:?EP? will match all cases where segment S{' '} + has an insertion of EP between the positions 214 and 215 but also an + insertion of other AAs which include the EP, e.g. the insertion{' '} + EPE will be matched. +

+

+ You can also use wildcards to match any insertion at a given position. For + example ins_S:214:?: will match any (but at least one) insertion + between the positions 214 and 215. +

+
-
-

Any Mutation

-

- To filter for any mutation at a given position you can omit the <base>. -

-
-
-

No Mutation

-

- You can write a . for the <base> to filter for sequences for which it is - confirmed that no mutation occurred, i.e. has the same base as the reference genome at the - specified position. -

+
+

Multiple Mutations

+

+ Multiple mutation filters can be provided by adding one mutation after the + other. +

+
+ +
+

Any Mutation

+

+ To filter for any mutation at a given position you can omit the{' '} + <base>. +

+
+
+

No Mutation

+

+ You can write a . for the <base> to filter for sequences + for which it is confirmed that no mutation occurred, i.e. has the same base + as the reference genome at the specified position. +

+
+ + +
-
-
+
+ ); }; diff --git a/website/src/components/SearchPage/SearchForm.tsx b/website/src/components/SearchPage/SearchForm.tsx index a0bbdf963..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 { @@ -60,23 +64,23 @@ export const SearchForm = ({ >

Search query

- - How to Search -
-
-
- + + Help +
{' '}
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 9dedd7949..11318d990 100644 --- a/website/src/components/SearchPage/fields/MutationField.tsx +++ b/website/src/components/SearchPage/fields/MutationField.tsx @@ -227,19 +227,26 @@ export const MutationField: FC = ({ 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'} `} - /> + /> +
+ +
+
= ({ referenceGenomesSequence
-
); }; From 3a18e2181f8d791acab4eacba01d70c00697d42f Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Thu, 4 Jul 2024 08:02:53 +0200 Subject: [PATCH 8/8] Remove duplicate title --- website/src/components/SearchPage/DisplaySearchDocs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index 0ed5a9fa7..f5e130c8c 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -47,7 +47,6 @@ const DisplaySearchDocs: React.FC = () => { -

Mutation Search

Nucleotide Mutations and Insertions