feat(website): Misc SeqSet UI updates

loculus-project · Mar 26, 2024 · 72c3be2 · 72c3be2
1 parent b0523ad
commit 72c3be2
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 38 deletions.
diff --git a/website/src/components/SeqSetCitations/ExportSeqSet.tsx b/website/src/components/SeqSetCitations/ExportSeqSet.tsx
@@ -103,7 +103,7 @@ export const ExportSeqSet: FC<ExportSeqSetProps> = ({ seqSet, seqSetRecords }) =
                 autoHideDuration={2000}
                 message='Copied to clipboard'
             />
-            <div className='flex flex-col justify-around max-w-md w-2/4'>
+            <div className='flex flex-col justify-around max-w-lg w-2/4'>
                 <div>
                     <div className='flex'>
                         <div className='flex items-center me-4'>
@@ -204,6 +204,7 @@ export const ExportSeqSet: FC<ExportSeqSetProps> = ({ seqSet, seqSetRecords }) =
                         rows={5}
                         cols={40}
                         value={getSelectedCitationText()}
+                        readOnly
                     />
                 </div>
                 <div className='pb-8'>

diff --git a/website/src/components/SeqSetCitations/SeqSetForm.tsx b/website/src/components/SeqSetCitations/SeqSetForm.tsx
@@ -126,15 +126,15 @@ export const SeqSetForm: FC<SeqSetFormProps> = ({ clientConfig, accessToken, edi
         <div className='flex flex-col items-center  overflow-auto-y w-full'>
             <ManagedErrorFeedback message={serverErrorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
             <div className='flex justify-start items-center py-5'>
-                <h1 className='text-xl font-semibold py-4'>{`${editSeqSet ? 'Edit' : 'Create'} SeqSet`}</h1>
+                <h1 className='text-xl font-semibold py-4'>{`${editSeqSet ? 'Edit' : 'Create a'} SeqSet`}</h1>
             </div>
-            <div className='space-y-6 max-w-md w-full'>
-                <div className='mb-6'>
+            <div className='max-w-lg w-full'>
+                <div>
                     <label
                         htmlFor='seqSet-name'
                         className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'
                     >
-                        SeqSet name *
+                        * SeqSet name
                     </label>
                     <input
                         type='text'
@@ -171,15 +171,13 @@ export const SeqSetForm: FC<SeqSetFormProps> = ({ clientConfig, accessToken, edi
                         maxLength={255}
                     />
                 </div>
-                <h2 className='text-lg font-bold'>Accessions</h2>
-
                 {Object.keys(accessionsInput).map((type) => (
                     <div className='mb-6' key={`${type}-input-field`}>
                         <label
                             htmlFor='seqSet-description'
                             className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'
                         >
-                            {`List of ${type} accessions delimited by comma, newline, or space *`}
+                            {`* List of ${type} accessions seperated by comma, newline, or space`}
                         </label>
                         <textarea
                             id={`${type}-accession-input`}

diff --git a/website/src/components/SeqSetCitations/SeqSetItem.tsx b/website/src/components/SeqSetCitations/SeqSetItem.tsx
@@ -1,5 +1,6 @@
+import MUIPagination from '@mui/material/Pagination';
 import { AxiosError } from 'axios';
-import { type FC } from 'react';
+import { type FC, useState } from 'react';
 
 import { CitationPlot } from './CitationPlot';
 import { getClientLogger } from '../../clientLogger';
@@ -37,7 +38,7 @@ const SeqSetRecordsTable: FC<SeqSetRecordsTableProps> = ({ seqSetRecords }) => {
             <tbody>
                 {seqSetRecords.map((seqSetRecord, index) => {
                     return (
-                        <tr key={`accessionData-${index}`}>
+                        <tr key={`accessionData-${index}`} className='hover:bg-primary-100 border-gray-100'>
                             <td className='text-left'>
                                 <a href={accessionOutlink[seqSetRecord.type](seqSetRecord.accession)} target='_blank'>
                                     {seqSetRecord.accession}
@@ -70,6 +71,8 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
     isAdminView = false,
 }) => {
     const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
+    const [page, setPage] = useState(1);
+    const sequencesPerPage = 10;
 
     const { mutate: createSeqSetDOI } = useCreateSeqSetDOIAction(
         clientConfig,
@@ -92,7 +95,7 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
             return 'N/A';
         }
         const dateObj = new Date(date);
-        return dateObj.toLocaleDateString('en-US');
+        return dateObj.toISOString().split('T')[0];
     };
 
     const renderDOI = () => {
@@ -106,7 +109,7 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
 
         return (
             <a
-                className='mr-4 cursor-pointer font-medium text-blue-600 dark:text-blue-500 hover:underline'
+                className='mr-4 cursor-pointer font-medium text-blue-600 hover:text-blue-800'
                 onClick={() =>
                     displayConfirmationDialog({
                         dialogText: `Are you sure you want to create a DOI for this version of your seqSet?`,
@@ -119,6 +122,14 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
         );
     };
 
+    const getMaxPages = () => {
+        return Math.ceil(seqSetRecords.length / sequencesPerPage);
+    };
+
+    const getPaginatedSeqSetRecords = () => {
+        return seqSetRecords.slice((page - 1) * sequencesPerPage, page * sequencesPerPage);
+    };
+
     return (
         <div className='flex flex-col items-left'>
             <ManagedErrorFeedback message={errorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
@@ -138,6 +149,10 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
                     <p className='mr-8 w-[120px] text-gray-500 text-right'>Created date</p>
                     <p className='text'>{formatDate(seqSet.createdAt)}</p>
                 </div>
+                <div className='flex flex-row py-1.5'>
+                    <p className='mr-8 w-[120px] text-gray-500 text-right'>Size</p>
+                    <p className='text'>{`${seqSetRecords.length} sequence${seqSetRecords.length === 1 ? '' : 's'}`}</p>
+                </div>
                 <div className='flex flex-row py-1.5'>
                     <p className='mr-8 w-[120px] text-gray-500 text-right'>DOI</p>
                     {renderDOI()}
@@ -148,7 +163,7 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
                         <p className='text'>Cited By 0</p>
                     ) : (
                         <a
-                            className='mr-4 cursor-pointer font-medium text-blue-600 dark:text-blue-500 hover:underline'
+                            className='mr-4 cursor-pointer font-medium text-blue-600 hover:text-blue-800'
                             href={getCrossRefUrl()}
                             target='_blank'
                         >
@@ -166,9 +181,22 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
                     </div>
                 </div>
             </div>
-            <div className='flex flex-col my-4'>
-                <p className='text-xl py-4 font-semibold'>Sequences</p>
-                <SeqSetRecordsTable seqSetRecords={seqSetRecords} />
+            <div className='flex flex-col my-4 max-w-xl'>
+                <p className='text-xl my-4 font-semibold'>Sequences</p>
+                <SeqSetRecordsTable seqSetRecords={getPaginatedSeqSetRecords()} />
+                {getMaxPages() > 1 ? (
+                    <MUIPagination
+                        className='my-4 w-full flex justify-center'
+                        page={page}
+                        count={getMaxPages()}
+                        color='primary'
+                        variant='outlined'
+                        shape='rounded'
+                        onChange={(_, newPage) => {
+                            setPage(newPage);
+                        }}
+                    />
+                ) : null}
             </div>
         </div>
     );

diff --git a/website/src/components/SeqSetCitations/SeqSetList.tsx b/website/src/components/SeqSetCitations/SeqSetList.tsx
@@ -160,7 +160,7 @@ export const SeqSetList: FC<SeqSetListProps> = ({ seqSets, username }) => {
 
     const formatDate = (date: string) => {
         const dateObj = new Date(date);
-        return dateObj.toLocaleDateString('en-US');
+        return dateObj.toISOString().split('T')[0];
     };
 
     return (

diff --git a/website/src/pages/seqsets/[seqSetId].astro b/website/src/pages/seqsets/[seqSetId].astro
@@ -42,7 +42,7 @@ const getSeqSetByVersion = (seqSetVersions: SeqSet[], version: string) => {
 
 const seqSet = seqSetResponse.value !== undefined ? getSeqSetByVersion(seqSetResponse.value, version) : undefined;
 
-const authorResponse = seqSet !== undefined ? await seqSetClient.getAuthor(seqSet.createdBy) : undefined;
+const authorResponse = seqSet !== undefined ? ((await seqSetClient.getAuthor(seqSet.createdBy)) as any) : undefined;
 ---
 
 <BaseLayout title='SeqSets' data-testid='seqSets-item-container'>
@@ -51,30 +51,33 @@ const authorResponse = seqSet !== undefined ? await seqSetClient.getAuthor(seqSe
             seqSet !== undefined ? (
                 <div class='flex flex-row items-left'>
                     <div class='w-1/5 flex flex-col justify-start items-center'>
-                        {authorResponse !== undefined
-                            ? authorResponse.match(
-                                  (authorProfile) => (
-                                      <AuthorDetails
-                                          displayFullDetails={false}
-                                          firstName={authorProfile.firstName}
-                                          lastName={authorProfile.lastName}
-                                      />
-                                  ),
-                                  (error) => (
-                                      <ErrorFeedback
-                                          message={'Error while fetching author profile: ' + JSON.stringify(error)}
-                                          client:load
-                                      />
-                                  ),
-                              )
-                            : null}
+                        {authorResponse.value !== undefined ? (
+                            <AuthorDetails
+                                displayFullDetails={false}
+                                firstName={authorResponse.value.firstName}
+                                lastName={authorResponse.value.lastName}
+                            />
+                        ) : (
+                            <ErrorFeedback
+                                message={'Error while fetching author profile: ' + JSON.stringify(authorResponse.error)}
+                                client:load
+                            />
+                        )}
                     </div>
                     <div class='w-4/5 pl-6'>
                         {seqSetRecordsResponse.value !== undefined ? (
                             <SeqSetItemActions
                                 clientConfig={clientConfig}
                                 accessToken={accessToken}
-                                seqSet={seqSet}
+                                seqSet={{
+                                    ...seqSet,
+                                    createdBy:
+                                        authorResponse?.value !== undefined
+                                            ? [authorResponse.value?.firstName, authorResponse.value?.lastName]
+                                                  .filter((name) => name !== null)
+                                                  .join(' ')
+                                            : seqSet.createdBy,
+                                }}
                                 seqSetRecords={seqSetRecordsResponse.value}
                                 isAdminView={seqSet.createdBy === username}
                                 client:only='react'

diff --git a/website/tests/pages/seqsets/[seqSetId].spec.ts b/website/tests/pages/seqsets/[seqSetId].spec.ts
@@ -33,7 +33,7 @@ test.describe('The seqSet item page', () => {
         await expect(seqSetPage.page.getByRole('heading', { name: testSeqSetName })).toBeVisible();
         await expect(seqSetPage.page.getByText('Created date')).toBeVisible();
         await expect(seqSetPage.page.getByText('Version', { exact: true })).toBeVisible();
-        await expect(seqSetPage.page.getByText('Sequences')).toBeVisible();
+        await expect(seqSetPage.page.getByText('Accession')).toBeVisible();
     });
 
     test('export functionality allows downloading JSON file', async ({ seqSetPage }) => {

diff --git a/website/tests/pages/seqsets/index.spec.ts b/website/tests/pages/seqsets/index.spec.ts
@@ -32,7 +32,7 @@ test.describe('The seqSets list page', () => {
         await expect(async () => {
             await seqSetPage.page.getByTestId('AddIcon').click();
             await seqSetPage.waitForLoad();
-            await expect(seqSetPage.page.getByText('Create SeqSet')).toBeVisible();
+            await expect(seqSetPage.page.getByText('Create a SeqSet')).toBeVisible();
         }).toPass();
     });