feat(website): Add a Mutations Search Info popup

website/src/components/SearchPage/DisplaySearchDocs.tsx

@@ -0,0 +1,94 @@
+import { type FC, useRef } from 'react';
+
+const DisplaySearchDocs: FC = () => {
+    const dialogRef = useRef<HTMLDialogElement>(null);
+
+    const openDialog = () => {
+        if (dialogRef.current) {
+            dialogRef.current.showModal();
+        }
+    };
+
+    const closeDialog = () => {
+        if (dialogRef.current) {
+            dialogRef.current.close();
+        }
+    };
+
+    return (
+        <>
+            <button className='outlineButton' onClick={openDialog}>
+                ?
+            </button>
+            <dialog ref={dialogRef} className='modal'>
+                <button
+                    className='btn btn-sm btn-circle btn-ghost text-gray-900 absolute right-2 top-2'
+                    onClick={closeDialog}
+                >
+                    ✕
+                </button>
+                <div className='modal-box max-w-5xl'>
+                    <form method='dialog'>
+                        <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>✕</button>
+                    </form>
+                    <h3 className='font-bold text-2xl mb-4 text-primary-700'>Mutation Search</h3>
+                    <div className='mb-4'>
+                        <h4 className='font-bold text-l mb-4'>Nucleotide Mutations and Insertions</h4>
+                        <p>
+                            A nucleotide mutation has the format <b>&lt;position&gt;&lt;base&gt;</b> or
+                            <b>&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;. A &lt;base&gt;</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>
+                            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>
+                            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'>Amino Acid Mutations and Insertions</h4>
+                        <p>
+                            An amino acid mutation has the format <b>&lt;gene&gt;:&lt;position&gt;&lt;base&gt;</b> or
+                            <b>&lt;gene&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. A <b>&lt;base&gt;</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>
+                            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>
+
+                        <p>
+                            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: <b>123T,E:57Q</b>.
+                        </p>
+                    </div>
+
+                    <div className='mb-4'>
+                        <h4 className='font-bold text-l mb-4'>Any Mutation</h4>
+                        <p>
+                            To filter for any mutation at a given position you can omit the <b>&lt;base&gt;</b>.
+                        </p>
+                    </div>
+                    <div className='mb-4'>
+                        <h4 className='font-bold text-l mb-4'>No Mutation</h4>
+                        <p>
+                            You can write a <b>.</b> for the <b>&lt;base&gt;</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>
+                </div>
+            </dialog>
+        </>
+    );
+};
+
+export default DisplaySearchDocs;

website/src/components/SearchPage/SearchForm.tsx

@@ -60,6 +60,9 @@ export const SearchForm = ({
             >
                 <div className='shadow-xl rounded-r-lg px-4 pt-4'>
                     <h2 className='text-lg font-semibold flex-1 md:hidden mb-2'>Search query</h2>
+                    <a href='/docs/how-to/search_sequences_website' className='text-primary-700 underline mb-2'>
+                        How to Search
+                    </a>
                     <div className='flex'>
                         <div className='flex items-center justify-between w-full mb-2 text-primary-700'>
                             <div className='flex items-center justify-between w-full mb-2 text-primary-700'>

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<MutationFieldProps> = ({ referenceGenomesSequence
     };
 
     return (
-        <div className='relative mt-1 mb-2'>
+        <div className='flex relative mt-1 mb-2 flex-row w-full'>
             <Combobox value={selectedOptions} onChange={handleOptionClick}>
-                <div className='relative mt-1'>
+                <div className='w-full relative mt-1'>
                     <div
                         className={`w-full flex flex-wrap items-center border border-gray-300 bg-white rounded-md shadow-sm text-left cursor-default focus-within:ring-1 focus-within:ring-blue-500 focus-within:border-blue-500 sm:text-sm
             ${selectedOptions.length === 0 ? '' : 'pt-2 pl-2'}
@@ -266,6 +267,7 @@ export const MutationField: FC<MutationFieldProps> = ({ referenceGenomesSequence
                     </Transition>
                 </div>
             </Combobox>
+            <DisplaySearchDocs></DisplaySearchDocs>
         </div>
     );
 };

website/src/pages/docs/how-to/search_sequences_website.mdx

@@ -0,0 +1,3 @@
+# How to Search
+
+Fill this in with tips for your loculus instance.