From e22ea93d0aff06b710b286c1a837c803785aa29f Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Tue, 2 Jul 2024 15:03:40 -0500 Subject: [PATCH 1/5] suggestions --- .../SearchPage/DisplaySearchDocs.tsx | 190 +++++++++++------- .../src/components/SearchPage/SearchForm.tsx | 22 +- .../SearchPage/fields/MutationField.tsx | 28 ++- 3 files changed, 142 insertions(+), 98 deletions(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index 4ad95c0e1..e2871683b 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -1,92 +1,126 @@ -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

-

- 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. -

+
+
+ + + + 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. +

+
-

- 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. -

-
+
+

+ 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. +

-
-

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 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. +

+
+
+ + +
-
-
+
+ ); }; 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/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 f8cd758a76230ff2703f252d4643647818b48d18 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Tue, 2 Jul 2024 15:07:00 -0500 Subject: [PATCH 2/5] fade icon --- website/src/components/SearchPage/DisplaySearchDocs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index e2871683b..b283372fc 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -12,7 +12,7 @@ const DisplaySearchDocs: React.FC = () => { return ( <> - From 615390389d0a43c0e93b344cd9d3459109b158c4 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Thu, 4 Jul 2024 07:52:00 +0200 Subject: [PATCH 3/5] merge in text changes --- .../SearchPage/DisplaySearchDocs.tsx | 132 +++++++++--------- 1 file changed, 68 insertions(+), 64 deletions(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index ff578409a..37d9193a9 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -47,73 +47,77 @@ const DisplaySearchDocs: React.FC = () => { -
-
-

- 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. -

-
+

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. +

+
-
-

- 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. -

+
+

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 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. -

-
+
+

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. -

-
+
+

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. +

From 2648cac4ba1edc605c38f1c07a5a6b33f7bb0f8e Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Thu, 4 Jul 2024 07:53:25 +0200 Subject: [PATCH 4/5] update test --- website/src/components/SearchPage/SearchFullUI.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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(); From b78e663503e9e6ff54095e69ff1a157c13507018 Mon Sep 17 00:00:00 2001 From: Loculus bot Date: Thu, 4 Jul 2024 05:55:17 +0000 Subject: [PATCH 5/5] Automated code formatting --- .../SearchPage/DisplaySearchDocs.tsx | 145 ++++++++++-------- 1 file changed, 78 insertions(+), 67 deletions(-) diff --git a/website/src/components/SearchPage/DisplaySearchDocs.tsx b/website/src/components/SearchPage/DisplaySearchDocs.tsx index 37d9193a9..0ed5a9fa7 100644 --- a/website/src/components/SearchPage/DisplaySearchDocs.tsx +++ b/website/src/components/SearchPage/DisplaySearchDocs.tsx @@ -48,81 +48,92 @@ const DisplaySearchDocs: React.FC = () => {

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. -

-
+
+

+ 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. -

-
+
+

+ 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. +

+
-
-

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. -

-
+
+

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. -

-
+
+

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. -

+
+

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. +

-