feat(website): History menu in modal (#1972)

* refactor sequence entry history modal to its own react component * use react component in modal where there are multiple options * fix types
loculus-project · May 21, 2024 · 75251b0 · 75251b0
1 parent 9781881
commit 75251b0
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 35 deletions.
diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -82,6 +82,7 @@ export const SearchFullUI = ({
                 myGroups={myGroups}
                 isHalfScreen={previewHalfScreen}
                 setIsHalfScreen={setPreviewHalfScreen}
+                setPreviewedSeqId={setPreviewedSeqId}
             />
             <div className='md:w-72'>
                 <SearchForm

diff --git a/website/src/components/SearchPage/SeqPreviewModal.tsx b/website/src/components/SearchPage/SeqPreviewModal.tsx
@@ -5,6 +5,7 @@ import { routes } from '../../routes/routes';
 import { type Group } from '../../types/backend';
 import { type ReferenceGenomesSequenceNames } from '../../types/referencesGenomes';
 import { SequenceDataUI } from '../SequenceDetailsPage/SequenceDataUI';
+import { SequenceEntryHistoryMenu } from '../SequenceDetailsPage/SequenceEntryHistoryMenu';
 import IcBaselineDownload from '~icons/ic/baseline-download';
 import MaterialSymbolsClose from '~icons/material-symbols/close';
 import MaterialSymbolsLightWidthFull from '~icons/material-symbols-light/width-full';
@@ -23,6 +24,7 @@ interface SeqPreviewModalProps {
     myGroups: Group[];
     isHalfScreen?: boolean;
     setIsHalfScreen: (isHalfScreen: boolean) => void;
+    setPreviewedSeqId?: (seqId: string | null) => void;
 }
 
 export const SeqPreviewModal: React.FC<SeqPreviewModalProps> = ({
@@ -34,6 +36,7 @@ export const SeqPreviewModal: React.FC<SeqPreviewModalProps> = ({
     myGroups,
     isHalfScreen = false,
     setIsHalfScreen,
+    setPreviewedSeqId,
 }) => {
     const [isLoading, setIsLoading] = useState(true);
     const [data, setData] = useState<any | null>(null);
@@ -73,6 +76,13 @@ export const SeqPreviewModal: React.FC<SeqPreviewModalProps> = ({
         <div className='flex justify-between items-center'>
             <div className='text-xl font-medium leading-6 text-primary-700 pl-6'>{seqId}</div>
             <div>
+                {data !== null && data?.sequenceEntryHistory !== undefined && data?.sequenceEntryHistory.length > 1 && (
+                    <SequenceEntryHistoryMenu
+                        sequenceEntryHistory={data?.sequenceEntryHistory}
+                        accessionVersion={seqId}
+                        setPreviewedSeqId={setPreviewedSeqId}
+                    />
+                )}
                 <button
                     type='button'
                     className={BUTTONCLASS}

diff --git a/website/src/components/SequenceDetailsPage/SequenceEntryHistoryMenu.tsx b/website/src/components/SequenceDetailsPage/SequenceEntryHistoryMenu.tsx
@@ -0,0 +1,61 @@
+import { sentenceCase } from 'change-case';
+import React from 'react';
+
+import { routes } from '../../routes/routes';
+import { type SequenceEntryHistory } from '../../types/lapis';
+import { getVersionStatusColor } from '../../utils/getVersionStatusColor';
+import IcBaselineHistory from '~icons/ic/baseline-history';
+import Arrow from '~icons/ic/sharp-keyboard-arrow-down';
+
+interface Props {
+    sequenceEntryHistory: SequenceEntryHistory;
+    accessionVersion: string;
+    setPreviewedSeqId?: (seqId: string | null) => void;
+}
+
+export const SequenceEntryHistoryMenu: React.FC<Props> = ({
+    sequenceEntryHistory,
+    accessionVersion,
+    setPreviewedSeqId,
+}) => {
+    return (
+        <>
+            <div className='dropdown dropdown-hover hidden sm:inline-block'>
+                <label tabIndex={0} className='btn btn-sm btn-outline py-1'>
+                    <a href={routes.versionPage(accessionVersion)} className='text-sm'>
+                        All versions
+                    </a>
+                    <Arrow />
+                </label>
+                <ul
+                    tabIndex={0}
+                    className='dropdown-content z-[1] menu p-1 shadow bg-base-100 rounded-box absolute top-full left-0 text-sm'
+                >
+                    {sequenceEntryHistory.map((version) => (
+                        <li key={version.accessionVersion}>
+                            <a
+                                href={routes.sequencesDetailsPage(version.accessionVersion)}
+                                onClick={(e) => {
+                                    if (setPreviewedSeqId) {
+                                        setPreviewedSeqId(version.accessionVersion);
+                                        e.preventDefault();
+                                    }
+                                }}
+                            >
+                                {version.accessionVersion}
+                                <p className={`font-bold ${getVersionStatusColor(version.versionStatus)}`}>
+                                    ({sentenceCase(version.versionStatus)})
+                                </p>
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className='sm:hidden inline-block'>
+                <a href={routes.versionPage(accessionVersion)} className='text-xl'>
+                    <IcBaselineHistory />
+                </a>
+            </div>
+        </>
+    );
+};
diff --git a/website/src/components/SequenceDetailsPage/SequencesDataTableTitle.astro b/website/src/components/SequenceDetailsPage/SequencesDataTableTitle.astro
@@ -1,12 +1,8 @@
 ---
-import { sentenceCase } from 'change-case';
-
+import { SequenceEntryHistoryMenu } from './SequenceEntryHistoryMenu';
 import { routes } from '../../routes/routes';
 import { type SequenceEntryHistory } from '../../types/lapis';
-import { getVersionStatusColor } from '../../utils/getVersionStatusColor';
 import IcBaselineDownload from '~icons/ic/baseline-download';
-import IcBaselineHistory from '~icons/ic/baseline-history';
-import Arrow from '~icons/ic/sharp-keyboard-arrow-down';
 
 interface Props {
     sequenceEntryHistory?: SequenceEntryHistory;
@@ -26,36 +22,10 @@ const { sequenceEntryHistory, accessionVersion, showFastaDownload } = Astro.prop
     <div class='pt-2'>
         {
             sequenceEntryHistory !== undefined && sequenceEntryHistory.length > 1 && (
-                <>
-                    <div class='dropdown dropdown-hover hidden sm:inline-block'>
-                        <label tabindex='0' class='btn btn-sm btn-outline py-1'>
-                            <a href={routes.versionPage(accessionVersion)} class='text-sm'>
-                                All versions
-                            </a>
-                            <Arrow />
-                        </label>
-                        <ul
-                            tabindex='0'
-                            class='dropdown-content z-[1] menu p-1 shadow bg-base-100 rounded-box absolute top-full left-0 text-sm'
-                        >
-                            {sequenceEntryHistory.map((version) => (
-                                <li>
-                                    <a href={routes.sequencesDetailsPage(version.accessionVersion)}>
-                                        {version.accessionVersion}
-                                        <p class={`font-bold ${getVersionStatusColor(version.versionStatus)}`}>
-                                            ({sentenceCase(version.versionStatus)})
-                                        </p>
-                                    </a>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                    <div class='sm:hidden inline-block'>
-                        <a href={routes.versionPage(accessionVersion)} class='text-xl'>
-                            <IcBaselineHistory />
-                        </a>
-                    </div>
-                </>
+                <SequenceEntryHistoryMenu
+                    sequenceEntryHistory={sequenceEntryHistory}
+                    accessionVersion={accessionVersion}
+                />
             )
         }
         {

diff --git a/website/src/pages/seq/[accessionVersion]/details.json.ts b/website/src/pages/seq/[accessionVersion]/details.json.ts
@@ -36,6 +36,8 @@ export const GET: APIRoute = async (req) => {
         schema,
         runtimeConfig,
         clientConfig,
+        sequenceEntryHistory:
+            result.type === SequenceDetailsTableResultType.TABLE_DATA ? result.sequenceEntryHistory : undefined,
     };
 
     return new Response(JSON.stringify(detailsDataUIProps), {