-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(website): Add a Mutations Search Info popup (#2232)
* Add link to general search docs * Add mutation search specific info in a pop up next to the mutation search field. --------- Co-authored-by: Theo Sanderson <[email protected]> Co-authored-by: Loculus bot <[email protected]>
- Loading branch information
3 people
authored
Jul 4, 2024
1 parent
98a471c
commit d8fc8d0
Showing
5 changed files
with
180 additions
and
19 deletions.
There are no files selected for viewing
143 changes: 143 additions & 0 deletions
143
website/src/components/SearchPage/DisplaySearchDocs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <> | ||
| <button onClick={openDialog} className='text-gray-400 hover:text-primary-600 '> | ||
| <MaterialSymbolsHelpOutline className='inline-block h-6 w-5' /> | ||
| </button> | ||
| <Transition appear show={isOpen} as={Fragment}> | ||
| <Dialog as='div' className='relative z-10' onClose={closeDialog}> | ||
| <Transition.Child | ||
| as={Fragment} | ||
| enter='ease-out duration-300' | ||
| enterFrom='opacity-0' | ||
| enterTo='opacity-100' | ||
| leave='ease-in duration-200' | ||
| leaveFrom='opacity-100' | ||
| leaveTo='opacity-0' | ||
| > | ||
| <div className='fixed inset-0 bg-black bg-opacity-25' /> | ||
| </Transition.Child> | ||
|
|
||
| <div className='fixed inset-0 overflow-y-auto'> | ||
| <div className='flex min-h-full items-center justify-center p-4 text-center'> | ||
| <Transition.Child | ||
| as={Fragment} | ||
| enter='ease-out duration-300' | ||
| enterFrom='opacity-0 scale-95' | ||
| enterTo='opacity-100 scale-100' | ||
| leave='ease-in duration-200' | ||
| leaveFrom='opacity-100 scale-100' | ||
| leaveTo='opacity-0 scale-95' | ||
| > | ||
| <DialogPanel className='w-full max-w-5xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'> | ||
| <DialogTitle as='h3' className='font-bold text-2xl mb-4 text-primary-700'> | ||
| Mutation Search | ||
| </DialogTitle> | ||
| <button className='absolute right-2 top-2 p-1' onClick={closeDialog}> | ||
| <X className='h-6 w-6' /> | ||
| </button> | ||
| <div className='mb-4'> | ||
| <h4 className='font-bold text-l mb-4 text-primary-700'> | ||
| Nucleotide Mutations and Insertions | ||
| </h4> | ||
| <p className='mb-2'> | ||
| For a single-segmented organism, nucleotide mutations have the format{' '} | ||
| <b><position><base></b> or{' '} | ||
| <b><base_ref><position><base></b>. A <b><base></b>{' '} | ||
| can be one of the four nucleotides <b>A</b>, <b>T</b>, <b>C</b>, and{' '} | ||
| <b>G</b>. It can also be <b>-</b> for deletion and <b>N</b> for unknown. For | ||
| example if the reference sequence is <b>A</b> at position <b>23</b> both:{' '} | ||
| <b>23T</b> and <b>A23T</b> will yield the same results. | ||
| </p> | ||
| <p className='mb-2'> | ||
| If your organism is multi-segmented you must append the name of the segment | ||
| to the start of the mutation, e.g. <b>S:23T</b> and <b>S:A23T</b> for a | ||
| mutation in segment <b>S</b>. | ||
| </p> | ||
| <p className='mb-2'> | ||
| Insertions can be searched for in the same manner, they just need to have{' '} | ||
| <b>ins_</b> appended to the start of the mutation. Example{' '} | ||
| <b>ins_10462:A</b> or if the organism is multi-segmented{' '} | ||
| <b>ins_S:10462:A</b>. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className='mb-4'> | ||
| <h4 className='font-bold text-l mb-4 text-primary-700'> | ||
| Amino Acid Mutations and Insertions | ||
| </h4> | ||
| <p className='mb-2'> | ||
| An amino acid mutation has the format{' '} | ||
| <b><gene>:<position><base></b> or{' '} | ||
| <b><gene>:<base_ref><position><base></b>. A{' '} | ||
| <b><base></b> can be one of the 20 amino acid codes. It can also be{' '} | ||
| <b>-</b> for deletion and <b>X</b> for unknown. Example: <b>E:57Q</b>. | ||
| </p> | ||
| <p className='mb-2'> | ||
| Insertions can be searched for in the same manner, they just need to have{' '} | ||
| <b>ins_ </b> | ||
| appended to the start of the mutation. Example <b>ins_NS4B:31:N</b>. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className='mb-4'> | ||
| <h4 className='font-bold text-l mb-4 text-primary-700'>Insertion Wildcards</h4> | ||
| <p className='mb-2'> | ||
| Loculus supports insertion queries that contain wildcards <b>?</b>. For | ||
| example <b>ins_S:214:?EP?</b> will match all cases where segment <b>S</b>{' '} | ||
| has an insertion of <b>EP</b> between the positions 214 and 215 but also an | ||
| insertion of other AAs which include the <b>EP</b>, e.g. the insertion{' '} | ||
| <b>EPE</b> will be matched. | ||
| </p> | ||
| <p className='mb-2'> | ||
| You can also use wildcards to match any insertion at a given position. For | ||
| example <b>ins_S:214:?:</b> will match any (but at least one) insertion | ||
| between the positions 214 and 215. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className='mb-4'> | ||
| <h4 className='font-bold text-l mb-4 text-primary-700'>Multiple Mutations</h4> | ||
| <p className='mb-2'> | ||
| Multiple mutation filters can be provided by adding one mutation after the | ||
| other. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className='mb-4'> | ||
| <h4 className='font-bold text-l mb-4 text-primary-700'>Any Mutation</h4> | ||
| <p className='mb-2'> | ||
| To filter for any mutation at a given position you can omit the{' '} | ||
| <b><base></b>. | ||
| </p> | ||
| </div> | ||
| <div className='mb-4'> | ||
| <h4 className='font-bold text-l mb-4 text-primary-700'>No Mutation</h4> | ||
| <p className='mb-2'> | ||
| You can write a <b>.</b> for the <b><base></b> 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. | ||
| </p> | ||
| </div> | ||
| </DialogPanel> | ||
| </Transition.Child> | ||
| </div> | ||
| </div> | ||
| </Dialog> | ||
| </Transition> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DisplaySearchDocs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # How to Search | ||
|
|
||
| Fill this in with tips for your loculus instance. |