From b47e13f9850e02dc410fbead698bdb375cba0089 Mon Sep 17 00:00:00 2001
From: Chaoran Chen <mail@chaoran-chen.de>
Date: Mon, 6 May 2024 23:21:42 +0200
Subject: [PATCH] feat(website): move FASTA download button and improve
 sequence viewer (#1771)

---
 .../DownloadDialog/DownloadDialog.tsx         | 10 +--
 .../src/components/SearchPage/SearchForm.tsx  | 14 +---
 .../SequencesDataTableTitle.astro             | 81 ++++++++++++-------
 .../SequencesDetailsPage.astro                |  8 --
 website/src/components/common/BoxWithTabs.tsx |  6 +-
 .../pages/seq/[accessionVersion]/index.astro  |  6 +-
 website/src/styles/base.scss                  |  7 ++
 7 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/website/src/components/SearchPage/DownloadDialog/DownloadDialog.tsx b/website/src/components/SearchPage/DownloadDialog/DownloadDialog.tsx
index 5ccc9654b..010eae04a 100644
--- a/website/src/components/SearchPage/DownloadDialog/DownloadDialog.tsx
+++ b/website/src/components/SearchPage/DownloadDialog/DownloadDialog.tsx
@@ -45,15 +45,7 @@ export const DownloadDialog: FC<DownloadDialogProps> = ({
 
     return (
         <>
-            <button
-                className='normal-case 
-                py-2 rounded-md font-semibold px-4 text-sm
-                border-primary-600 border
-                text-primary-600 bg-white
-                w-full
-                hover:bg-primary-600 hover:text-white'
-                onClick={openDialog}
-            >
+            <button className='outlineButton' onClick={openDialog}>
                 Download
             </button>
 
diff --git a/website/src/components/SearchPage/SearchForm.tsx b/website/src/components/SearchPage/SearchForm.tsx
index a05a59a72..ac5f84ac2 100644
--- a/website/src/components/SearchPage/SearchForm.tsx
+++ b/website/src/components/SearchPage/SearchForm.tsx
@@ -275,19 +275,7 @@ const SearchField: FC<AutoCompleteFieldProps> = (props) => {
 };
 
 const SearchButton: FC<{ isLoading: boolean }> = ({ isLoading }) => (
-    <button
-        className='normal-case 
-     py-2 rounded-md font-semibold px-4 text-sm
-     border-primary-600 border
-     text-primary-600 bg-white
-     w-full
-     hover:bg-primary-600 hover:text-white
-
-    
-    '
-        type='submit'
-        disabled={isLoading}
-    >
+    <button className='outlineButton w-full' type='submit' disabled={isLoading}>
         {isLoading ? <CircularProgress size={20} color='inherit' /> : 'Search sequences'}
     </button>
 );
diff --git a/website/src/components/SequenceDetailsPage/SequencesDataTableTitle.astro b/website/src/components/SequenceDetailsPage/SequencesDataTableTitle.astro
index 4e3e2630f..43d60ffed 100644
--- a/website/src/components/SequenceDetailsPage/SequencesDataTableTitle.astro
+++ b/website/src/components/SequenceDetailsPage/SequencesDataTableTitle.astro
@@ -3,17 +3,19 @@ import { sentenceCase } from 'change-case';
 
 import { routes } from '../../routes/routes';
 import { type SequenceEntryHistory } from '../../types/lapis';
-import { getAccessionVersionString } from '../../utils/extractAccessionVersion';
 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;
     organism: string;
     accessionVersion: string;
+    showFastaDownload: boolean;
 }
 
-const { sequenceEntryHistory, accessionVersion } = Astro.props;
+const { sequenceEntryHistory, accessionVersion, showFastaDownload } = Astro.props;
 ---
 
 <div class='flex justify-between flex-wrap'>
@@ -21,32 +23,53 @@ const { sequenceEntryHistory, accessionVersion } = Astro.props;
         <h1 class='title'>{accessionVersion}</h1>
     </div>
 
-    {
-        sequenceEntryHistory !== undefined && sequenceEntryHistory.length > 1 && (
-            <div class='dropdown dropdown-hover'>
-                <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(getAccessionVersionString({ ...version }))}>
-                                {getAccessionVersionString({ ...version })}
-
-                                <p class={`font-bold ${getVersionStatusColor(version.versionStatus)}`}>
-                                    ({sentenceCase(version.versionStatus)})
-                                </p>
+    <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>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-        )
-    }
+                            <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>
+                </>
+            )
+        }
+        {
+            showFastaDownload && (
+                <a
+                    class='sm:outlineButton inline-block'
+                    href={routes.sequencesFastaPage(accessionVersion) + '?download'}
+                >
+                    <span class='hidden sm:inline'>Download FASTA</span>
+                    <span class='sm:hidden inline text-xl'>
+                        <IcBaselineDownload />
+                    </span>
+                </a>
+            )
+        }
+    </div>
 </div>
diff --git a/website/src/components/SequenceDetailsPage/SequencesDetailsPage.astro b/website/src/components/SequenceDetailsPage/SequencesDetailsPage.astro
index 82909cb28..5ec1c7998 100644
--- a/website/src/components/SequenceDetailsPage/SequencesDetailsPage.astro
+++ b/website/src/components/SequenceDetailsPage/SequencesDetailsPage.astro
@@ -62,14 +62,6 @@ const loadSequencesAutomatically = getSchema(organism).loadSequencesAutomaticall
     )
 }
 <DataTable tableData={tableData} dataUseTermsHistory={dataUseTermsHistory} />
-<div>
-    <a
-        class='mt-4 inline-block text-primary-700 hover:text-blue-800'
-        href={routes.sequencesFastaPage(accessionVersion) + '?download'}
-    >
-        Download FASTA
-    </a>
-</div>
 <div class='mt-10'>
     <SequencesContainer
         client:load
diff --git a/website/src/components/common/BoxWithTabs.tsx b/website/src/components/common/BoxWithTabs.tsx
index f8540f6c6..63c86c0e4 100644
--- a/website/src/components/common/BoxWithTabs.tsx
+++ b/website/src/components/common/BoxWithTabs.tsx
@@ -15,7 +15,7 @@ type BoxWithTabsTabProps = {
 };
 
 export const BoxWithTabsTab: FC<BoxWithTabsTabProps> = ({ isActive, label, onClick }) => (
-    <button className={`tab ${isActive ? 'tab-active' : ''}`} onClick={onClick}>
+    <button className={`tab ${isActive ? 'tab-active font-semibold' : ''}`} onClick={onClick}>
         {label}
     </button>
 );
@@ -24,6 +24,4 @@ type BoxWithTabsBoxProps = {
     children: ReactNode;
 };
 
-export const BoxWithTabsBox: FC<BoxWithTabsBoxProps> = ({ children }) => (
-    <div className='border p-4 max-w-[1000px]'>{children}</div>
-);
+export const BoxWithTabsBox: FC<BoxWithTabsBoxProps> = ({ children }) => <div className='border p-4'>{children}</div>;
diff --git a/website/src/pages/seq/[accessionVersion]/index.astro b/website/src/pages/seq/[accessionVersion]/index.astro
index 381ad8113..93e10e556 100644
--- a/website/src/pages/seq/[accessionVersion]/index.astro
+++ b/website/src/pages/seq/[accessionVersion]/index.astro
@@ -44,10 +44,14 @@ if (
                         accessionVersion={accessionVersion}
                         organism={organism}
                         sequenceEntryHistory={
-                            sequenceDetailsTableData.isOk() && result.type === SequenceDetailsTableResultType.TABLE_DATA
+                            result.type === SequenceDetailsTableResultType.TABLE_DATA
                                 ? result.sequenceEntryHistory
                                 : undefined
                         }
+                        showFastaDownload={
+                            result.type === SequenceDetailsTableResultType.TABLE_DATA &&
+                            !isRevocationEntry(result.tableData)
+                        }
                     />
                     {result.type === SequenceDetailsTableResultType.TABLE_DATA &&
                         (isRevocationEntry(result.tableData) ? (
diff --git a/website/src/styles/base.scss b/website/src/styles/base.scss
index 70dd06e8b..9b5081cc5 100644
--- a/website/src/styles/base.scss
+++ b/website/src/styles/base.scss
@@ -41,6 +41,13 @@ a {
   font-weight: 400;
 }
 
+@layer utilities {
+  .outlineButton {
+    @apply normal-case py-2 rounded-md font-semibold px-4 text-sm border-primary-600 border text-primary-600 bg-white
+    hover:bg-primary-600 hover:text-white;
+  }
+}
+
 .loculusColor{
   background: theme('colors.main');
   &:hover {