style: update author name styling in tables (#580)

#524, #572 - removes "show more" for author lists in tables - collapses non-primary, non-corresponding authors with an ellipsis - top aligns dataset thumbnail when overflowing in table view please note that there may be some odd-appearing author lists, but this is due to data that needs to be fixed, since every dataset is supposed to have at least one primary and one corresponding author
chanzuckerberg · Apr 27, 2024 · 3d4a434 · 3d4a434
1 parent fb63462
commit 3d4a434
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 100 deletions.
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -8,6 +8,7 @@ import { range } from 'lodash-es'
 import { useMemo } from 'react'
 
 import { AnnotatedObjectsList } from 'app/components/AnnotatedObjectsList'
+import { DatasetAuthors } from 'app/components/Dataset/DatasetAuthors'
 import { I18n } from 'app/components/I18n'
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
@@ -22,11 +23,6 @@ import { LogLevel } from 'app/types/logging'
 import { sendLogs } from 'app/utils/logging'
 import { getErrorMessage } from 'app/utils/string'
 
-/**
- * Max number of authors to show for dataset.
- */
-const AUTHOR_MAX = 7
-
 const LOADING_DATASETS = range(0, MAX_PER_PAGE).map(
   (value) =>
     ({
@@ -70,7 +66,7 @@ export function DatasetTable() {
                 renderLoadingSkeleton={false}
                 width={DatasetTableWidths.photo}
               >
-                <Link to={datasetUrl} className="max-w-[134px]">
+                <Link to={datasetUrl} className="max-w-[134px] self-start">
                   <KeyPhoto
                     className="max-w-[134px]"
                     title={dataset.title}
@@ -150,30 +146,11 @@ export function DatasetTable() {
                         />
                       </>
                     ) : (
-                      <>
-                        {dataset.authors
-                          .slice(
-                            0,
-                            dataset.authors.length > AUTHOR_MAX
-                              ? AUTHOR_MAX - 1
-                              : Infinity,
-                          )
-                          .map((author, idx) => (
-                            <span key={author.name}>
-                              {author.name}
-                              {idx < dataset.authors.length - 1 && '; '}
-                            </span>
-                          ))}
-
-                        {dataset.authors.length > AUTHOR_MAX && (
-                          <Link
-                            className="text-sds-primary-500 inline"
-                            to={datasetUrl}
-                          >
-                            + {dataset.authors.length + 1 - AUTHOR_MAX} more
-                          </Link>
-                        )}
-                      </>
+                      <DatasetAuthors
+                        authors={dataset.authors}
+                        separator=","
+                        compact
+                      />
                     )}
                   </p>
                 </div>

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetAuthors.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetAuthors.tsx
@@ -1,8 +1,9 @@
-import { Fragment } from 'react'
+import { Fragment, useMemo } from 'react'
 
 import { Dataset_Authors } from 'app/__generated__/graphql'
 import { EnvelopeIcon } from 'app/components/icons'
 import { Link } from 'app/components/Link'
+import { cns } from 'app/utils/cns'
 
 export type AuthorInfo = Pick<
   Dataset_Authors,
@@ -16,10 +17,14 @@ function getAuthorKey(author: AuthorInfo) {
 export function DatasetAuthors({
   authors,
   className,
-  subtle,
+  separator = ';',
+  compact = false,
+  subtle = false,
 }: {
   authors: AuthorInfo[]
   className?: string
+  separator?: string
+  compact?: boolean
   subtle?: boolean
 }) {
   // TODO: make the below grouping more efficient and/or use GraphQL ordering
@@ -38,37 +43,52 @@ export function DatasetAuthors({
     <EnvelopeIcon className="text-sds-gray-400 mx-sds-xxxs align-top inline-block h-sds-icon-xs w-sds-icon-xs" />
   )
 
+  const otherCollapsed = useMemo<string | null>(() => {
+    const ellipsis = '...'
+
+    if (compact && authorsOther.length > 0) {
+      if (authorsCorresponding.length === 0) {
+        return ellipsis
+      }
+      return `${ellipsis} ${separator} `
+    }
+    return null
+  }, [authorsOther, authorsCorresponding, compact, separator])
+
   // TODO: let's find a better way of doing this
   return (
     <p className={className}>
-      <span className="font-semibold">
+      <span className={cns(!compact && 'font-semibold')}>
         {authorsPrimary.map((author, i, arr) => (
           <Fragment key={getAuthorKey(author)}>
             {author.name}
             {!(
               authorsOther.length + authorsCorresponding.length === 0 &&
               arr.length - 1 === i
-            ) && '; '}
+            ) && `${separator} `}
           </Fragment>
         ))}
       </span>
-      <span className={subtle ? 'text-sds-gray-600' : ''}>
-        {authorsOther.map((author, i, arr) => (
-          <Fragment key={getAuthorKey(author)}>
-            {author.name}
-            {!(authorsCorresponding.length === 0 && arr.length - 1 === i) &&
-              '; '}
-          </Fragment>
-        ))}
+      <span className={cns(subtle && !compact && 'text-sds-gray-600')}>
+        {compact
+          ? otherCollapsed
+          : authorsOther.map((author, i, arr) => (
+              <Fragment key={getAuthorKey(author)}>
+                {author.name}
+                {!(authorsCorresponding.length === 0 && arr.length - 1 === i) &&
+                  `${separator} `}
+              </Fragment>
+            ))}
         {authorsCorresponding.map((author, i, arr) => (
           <Fragment key={getAuthorKey(author)}>
             {author.name}
-            {author.email ? (
-              <Link to={`mailto:${author.email}`}>{envelopeIcon}</Link>
-            ) : (
-              envelopeIcon
-            )}
-            {!(arr.length - 1 === i) && '; '}
+            {!compact &&
+              (author.email ? (
+                <Link to={`mailto:${author.email}`}>{envelopeIcon}</Link>
+              ) : (
+                envelopeIcon
+              ))}
+            {!(arr.length - 1 === i) && `${separator} `}
           </Fragment>
         ))}
       </span>

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
@@ -94,7 +94,12 @@ export function DatasetMetadataTable({
           : t('authors'),
       labelExtra: <AuthorLegend inline />,
       renderValue: () => {
-        return <DatasetAuthors authors={dataset.authors as AuthorInfo[]} />
+        return (
+          <DatasetAuthors
+            authors={dataset.authors as AuthorInfo[]}
+            separator=","
+          />
+        )
       },
       values: [],
       className: 'leading-sds-body-xs',

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
@@ -1,11 +1,6 @@
-import { useMemo } from 'react'
-
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { AuthorLegend } from 'app/components/AuthorLegend'
-import {
-  AuthorInfo,
-  DatasetAuthors,
-} from 'app/components/Dataset/DatasetAuthors'
+import { DatasetAuthors } from 'app/components/Dataset/DatasetAuthors'
 import { useI18n } from 'app/hooks/useI18n'
 import { useAnnotation } from 'app/state/annotation'
 import { useFeatureFlag } from 'app/utils/featureFlags'
@@ -15,18 +10,6 @@ export function AnnotationOverviewTable() {
   const { t } = useI18n()
   const showMethodType = useFeatureFlag('methodType')
 
-  const authors = useMemo<AuthorInfo[]>(
-    () =>
-      annotation
-        ? annotation.authors.map((author) => ({
-            name: author.name,
-            primary_author_status: author.primary_annotator_status,
-            corresponding_author_status: author.corresponding_author_status,
-          }))
-        : [],
-    [annotation],
-  )
-
   if (!annotation) {
     return null
   }
@@ -47,7 +30,7 @@ export function AnnotationOverviewTable() {
               : t('annotationAuthors'),
           labelExtra: <AuthorLegend inline />,
           renderValue: () => {
-            return <DatasetAuthors authors={authors} />
+            return <DatasetAuthors authors={annotation.authors} separator="," />
           },
           values: [''],
           className: 'leading-sds-body-xs',

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
@@ -5,6 +5,7 @@ import { ColumnDef, createColumnHelper } from '@tanstack/react-table'
 import { range } from 'lodash-es'
 import { ComponentProps, useCallback, useMemo } from 'react'
 
+import { DatasetAuthors } from 'app/components/Dataset/DatasetAuthors'
 import { I18n } from 'app/components/I18n'
 import { CellHeader, PageTable, TableCell } from 'app/components/Table'
 import { Tooltip } from 'app/components/Tooltip'
@@ -52,8 +53,6 @@ function ConfidenceValue({ value }: { value: number }) {
   )
 }
 
-const MAX_AUTHORS = 2
-
 type MethodTypeLabels = {
   automated: I18nKeys
   hybrid: I18nKeys
@@ -181,34 +180,13 @@ export function AnnotationTable() {
               )}
             </div>
 
-            <ul className="list-none flex gap-1 text-sds-gray-600 text-sds-body-xxs leading-sds-header-xxs">
-              {annotation.authors?.slice(0, MAX_AUTHORS).map((author, idx) => {
-                const totalAuthorCount = annotation.authors.length
-
-                return (
-                  <li className="flex items-center" key={author.name}>
-                    <span>{author.name}</span>
-                    <span>
-                      {annotation.authors.length > 1 &&
-                        idx < MAX_AUTHORS - 1 &&
-                        ', '}
-                    </span>
-
-                    {idx === MAX_AUTHORS - 1 && idx < totalAuthorCount - 1 && (
-                      <Button
-                        sdsType="primary"
-                        sdsStyle="minimal"
-                        onClick={() => openAnnotationDrawer(annotation)}
-                      >
-                        {t('plusMore', {
-                          count: totalAuthorCount - MAX_AUTHORS,
-                        })}
-                      </Button>
-                    )}
-                  </li>
-                )
-              })}
-            </ul>
+            <div className=" text-sds-gray-600 text-sds-body-xxs leading-sds-header-xxs">
+              <DatasetAuthors
+                authors={annotation.authors}
+                separator=","
+                compact
+              />
+            </div>
           </TableCell>
         ),
       }),

diff --git a/frontend/packages/data-portal/app/graphql/getBrowseDatasets.server.ts b/frontend/packages/data-portal/app/graphql/getBrowseDatasets.server.ts
@@ -34,6 +34,7 @@ const GET_DATASETS_DATA_QUERY = gql(`
       ) {
         name
         primary_author_status
+        corresponding_author_status
       }
 
       runs_aggregate {

diff --git a/frontend/packages/data-portal/app/graphql/getRunById.server.ts b/frontend/packages/data-portal/app/graphql/getRunById.server.ts
@@ -151,9 +151,9 @@ const GET_RUN_BY_ID_QUERY = gql(`
 
           authors(order_by: { author_list_order: asc }) {
             name
-            primary_annotator_status
-            corresponding_author_status
             email
+            primary_author_status: primary_annotator_status
+            corresponding_author_status
           }
 
           author_affiliations: authors(distinct_on: affiliation_name) {