feat: Add annotations and tomograms tables empty states

frontend/packages/data-portal/app/components/NoResults.tsx → frontend/packages/data-portal/app/components/NoFilteredResults.tsx

@@ -19,7 +19,7 @@ function NoResultsImage() {
   )
 }
 
-export function NoResults({
+export function NoFilteredResults({
   actions,
   description,
   title,

frontend/packages/data-portal/app/components/NoTotalResults.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@czi-sds/components'
+
+import { SmallChevronRightIcon } from './icons'
+
+export interface NoTotalResultsProps {
+  title: string
+  description: string
+  buttons: Array<{ text: string; onClick: () => void }>
+}
+
+export function NoTotalResults({
+  title,
+  description,
+  buttons,
+}: NoTotalResultsProps) {
+  return (
+    <div className="flex justify-center items-center gap-sds-xxl border-t border-sds-color-primitive-gray-300">
+      <div className="flex flex-col justify-center items-baseline h-[425px] gap-[20px]">
+        <h1 className="text-sds-header-l font-semibold">{title}</h1>
+        <div className="text-sds-body-s">{description}</div>
+        {buttons.map((button) => (
+          <Button
+            sdsType="primary"
+            sdsStyle="minimal"
+            className="!normal-case !text-sds-body-s"
+            onClick={button.onClick}
+          >
+            {button.text}
+            <SmallChevronRightIcon className="w-[12px] h-[12px] fill-[#0b68f8] ml-sds-xxs" />
+          </Button>
+        ))}
+      </div>
+      <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
+        <path
+          id="Combined-Shape"
+          d="M49.6305 222.221C51.1476 222.221 52.6676 222.98 53.7093 223.994C54.7234 225.035 55.2293 226.583 55.2293 228.13C55.2293 229.65 54.7234 231.198 53.7093 232.24C52.6676 233.254 51.1476 233.759 49.6305 233.759C48.1105 233.759 46.591 233.254 45.5488 232.24C44.5347 231.198 44.0288 229.65 44.0288 228.13C44.0288 226.583 44.5347 225.035 45.5488 223.994C46.591 222.979 48.111 222.221 49.6305 222.221ZM49.6305 226.583C49.1222 226.583 48.8695 226.836 48.6164 227.089C48.3632 227.342 48.111 227.594 48.111 228.13C48.111 228.383 48.3637 228.889 48.6164 229.145C48.8695 229.398 49.1222 229.398 49.6305 229.398C49.8837 229.398 50.3895 229.398 50.6418 229.145C50.8664 228.918 50.8913 228.493 50.8941 228.223L50.8945 228.13C50.8945 227.594 50.8945 227.342 50.6418 227.089C50.3891 226.836 49.8832 226.583 49.6305 226.583ZM197.885 215.669C199.18 215.669 200.193 216.71 200.193 217.722C200.193 219.017 199.179 220.03 197.885 220.03H173.989C172.725 220.03 171.71 219.016 171.71 217.722C171.71 216.71 172.725 215.669 173.989 215.669H197.885ZM205.54 209.759C206.554 209.759 207.568 210.799 207.568 212.066C207.568 213.107 206.554 214.121 205.54 214.121H194.087C193.073 214.121 192.058 213.107 192.058 212.066C192.058 210.798 193.073 209.759 194.087 209.759H205.54ZM77.9457 56.1595C80.978 56.1595 83.8254 57.5916 85.6339 60.0104L85.8172 60.2641L91.6278 68.5871C93.3636 71.0735 96.1678 72.5884 99.1863 72.6867L99.4993 72.6918H177.712C183.014 72.6918 187.312 76.9898 187.312 82.2918C187.312 82.4833 187.306 82.6749 187.294 82.866L187.273 83.1525L186.123 95.9304L187.638 95.9309C192.85 95.9309 197.092 100.085 197.235 105.262L197.238 105.531C197.238 105.72 197.233 105.909 197.222 106.098L197.201 106.381L190.069 186.609C189.637 191.474 185.626 195.224 180.773 195.356L180.507 195.359H48.9331C44.0494 195.359 39.9595 191.697 39.3979 186.874L39.3708 186.609L32.2394 106.381C31.77 101.1 35.6706 96.4381 40.9517 95.9686C41.1401 95.9519 41.329 95.9407 41.518 95.9351L41.8017 95.9309L43.4408 95.9304L41.0088 66.5514C40.5788 61.3571 44.3683 56.787 49.5167 56.2181L49.7841 56.1922C49.9597 56.1777 50.1357 56.168 50.3118 56.1631L50.5761 56.1595H77.9457ZM187.638 100.131H41.8017C41.6421 100.131 41.4826 100.138 41.3236 100.152C38.4237 100.41 36.2638 102.915 36.4082 105.797L36.4229 106.009L43.5543 186.238C43.7955 188.95 46.0147 191.047 48.7133 191.155L48.9331 191.16H180.507C183.23 191.16 185.515 189.135 185.862 186.456L185.886 186.238L193.017 106.009C193.031 105.85 193.038 105.691 193.038 105.531C193.038 102.549 190.621 100.131 187.638 100.131ZM17.0803 109.383L18.3742 113.492L14.293 114.789L13.0286 110.678L17.0803 109.383ZM11.9869 106.823L13.0286 110.678L8.94688 111.944L7.68005 108.118L11.9869 106.823ZM225.317 95.0025C227.342 95.0025 229.143 95.7611 230.41 97.0555L230.663 97.3082C231.93 98.6054 232.691 100.406 232.691 102.459C232.691 104.515 231.93 106.316 230.41 107.582V107.836C229.143 109.13 227.342 109.891 225.317 109.891C223.288 109.891 221.515 109.129 219.968 107.582C218.701 106.316 217.942 104.515 217.942 102.459C217.942 100.406 218.701 98.6059 219.968 97.0555H220.248C221.515 95.7611 223.288 95.0025 225.317 95.0025ZM20.1474 104.262L21.1615 108.371L17.0803 109.383L16.0681 105.529L20.1474 104.262ZM14.8017 101.673L16.0681 105.529L11.9869 106.823L10.7196 102.967L14.8017 101.673ZM225.317 99.3644C224.555 99.3644 223.797 99.6171 223.035 100.123C222.529 100.912 222.276 101.673 222.276 102.459C222.276 103.22 222.529 103.979 223.035 104.515C223.797 105.273 224.555 105.529 225.317 105.529C226.076 105.529 226.837 105.273 227.342 104.515C228.131 103.979 228.384 103.22 228.384 102.459C228.384 101.673 228.131 100.912 227.342 100.123C226.837 99.6171 226.076 99.3644 225.317 99.3644ZM77.9457 60.3595H50.5761C50.4274 60.3595 50.2788 60.3656 50.1306 60.3779C47.2292 60.6181 45.0541 63.1099 45.1811 65.9933L45.1945 66.205L47.6257 95.5843H181.936L183.09 82.7759L183.106 82.5341L183.112 82.2918C183.112 79.3804 180.808 77.0072 177.924 76.8958L177.712 76.8918H99.4993C95.1057 76.8918 90.9821 74.8002 88.3858 71.2728L88.184 70.9914L82.3734 62.6684C81.3634 61.2216 79.7102 60.3595 77.9457 60.3595ZM162.859 23.5388L170.739 27.9306C171.753 28.6892 172.006 29.9836 171.501 30.9982C171.248 31.2509 170.992 31.5036 170.739 31.7867L162.859 36.4018C161.844 36.9072 160.58 36.6544 160.072 35.6432C159.286 34.6015 159.792 33.3071 160.833 32.5457L165.394 29.984L160.833 27.1421C159.792 26.6367 159.286 25.3419 160.072 24.3277C160.58 23.2861 161.844 22.7802 162.859 23.5388ZM69.4722 18.4183L70.4839 22.2738C70.7395 23.2856 70.2312 24.58 68.9639 24.8331C67.9522 25.0887 66.6853 24.58 66.4322 23.2856L65.4181 19.7126C65.1373 18.4178 65.6707 17.1234 66.938 16.8707C67.9522 16.6147 69.2195 17.3761 69.4722 18.4183ZM65.1378 15.8286C65.4185 16.8702 64.6295 18.1651 63.6178 18.4178L59.8164 19.4291C58.5519 19.7122 57.2576 19.1764 57.0025 17.8815C56.7493 16.8702 57.5107 15.5754 58.5524 15.3194L62.6037 14.3081C63.6178 14.0559 64.8846 14.5613 65.1378 15.8286ZM75.8329 12.761C76.0856 14.0559 75.5797 15.3198 74.3124 15.5754L70.4839 16.6142C69.4726 16.8702 68.2058 16.1088 67.9522 15.0671C67.4439 13.7723 68.2054 12.761 69.4722 12.2523L73.2983 11.2106C74.3124 10.9579 75.5797 11.7193 75.8329 12.761ZM66.6853 7.35456L67.4444 11.2111C67.9527 12.2528 67.1912 13.5201 65.9244 13.7728C64.8851 14.0559 63.6183 13.2674 63.3651 12.2528L62.351 8.64941C62.0983 7.35455 62.8564 6.34376 63.871 5.80748C65.1378 5.55431 66.1795 6.34328 66.6853 7.35456Z"
+          fill="#CCCCCC"
+        />
+      </svg>
+    </div>
+  )
+}

frontend/packages/data-portal/app/components/TablePageLayout.tsx

@@ -35,9 +35,11 @@ export interface TableLayoutTab {
   filterPanel?: ReactNode
 
   table: ReactNode
-  noResults?: ReactNode
   pageQueryParamKey?: string
 
+  noFilteredResults?: ReactNode
+  noTotalResults?: ReactNode
+
   filteredCount: number
   totalCount: number
   countLabel: string // e.g. "objects" in "1 of 3 objects".
@@ -110,7 +112,8 @@ function TablePageTabContent({
   filterPanel,
   filteredCount,
   table,
-  noResults,
+  noFilteredResults,
+  noTotalResults,
   pageQueryParamKey = QueryParams.Page,
   totalCount,
   countLabel,
@@ -146,6 +149,10 @@ function TablePageTabContent({
     [filterPanel],
   )
 
+  if (noTotalResults !== undefined && totalCount === 0) {
+    return noTotalResults
+  }
+
   return (
     <LayoutContext.Provider value={contextValue}>
       <div className="flex flex-auto">
@@ -214,7 +221,7 @@ function TablePageTabContent({
             </ErrorBoundary>
 
             <div className="px-sds-xl">
-              {filteredCount === 0 && noResults}
+              {filteredCount === 0 && noFilteredResults}
 
               {filteredCount > MAX_PER_PAGE && (
                 <div

frontend/packages/data-portal/app/routes/browse-data.datasets.tsx

@@ -5,7 +5,7 @@ import { Order_By } from 'app/__generated__/graphql'
 import { apolloClient } from 'app/apollo.server'
 import { DatasetTable } from 'app/components/BrowseData'
 import { DatasetFilter } from 'app/components/DatasetFilter'
-import { NoResults } from 'app/components/NoResults'
+import { NoFilteredResults } from 'app/components/NoFilteredResults'
 import { TablePageLayout } from 'app/components/TablePageLayout'
 import { DATASET_FILTERS } from 'app/constants/filterQueryParams'
 import { QueryParams } from 'app/constants/query'
@@ -72,8 +72,8 @@ export default function BrowseDatasetsPage() {
             'https://chanzuckerberg.github.io/cryoet-data-portal/cryoet_data_portal_docsite_data.html#datasets',
           filterPanel: <DatasetFilter />,
           table: <DatasetTable />,
-          noResults: (
-            <NoResults
+          noFilteredResults: (
+            <NoFilteredResults
               title={t('filterNoResultsFound')}
               description={t('filterTooRestrictive')}
               actions={<Button onClick={reset}>{t('clearFilters')}</Button>}

frontend/packages/data-portal/app/routes/browse-data.depositions.tsx

@@ -4,7 +4,7 @@ import { json, LoaderFunctionArgs, redirect } from '@remix-run/node'
 import { Order_By } from 'app/__generated__/graphql'
 import { apolloClient } from 'app/apollo.server'
 import { DepositionTable } from 'app/components/BrowseData/DepositionTable'
-import { NoResults } from 'app/components/NoResults'
+import { NoFilteredResults } from 'app/components/NoFilteredResults'
 import { TablePageLayout } from 'app/components/TablePageLayout'
 import { QueryParams } from 'app/constants/query'
 import { getBrowseDepositions } from 'app/graphql/getBrowseDepositions.server'
@@ -64,8 +64,8 @@ export default function BrowseDepositionsPage() {
           learnMoreLink:
             'https://chanzuckerberg.github.io/cryoet-data-portal/cryoet_data_portal_docsite_data.html#depositions',
           table: <DepositionTable />,
-          noResults: (
-            <NoResults
+          noFilteredResults: (
+            <NoFilteredResults
               title={t('filterNoResultsFound')}
               description={t('filterTooRestrictive')}
               actions={<Button onClick={reset}>{t('clearFilters')}</Button>}

frontend/packages/data-portal/app/routes/runs.$id.tsx

@@ -2,14 +2,15 @@
 
 import { ShouldRevalidateFunctionArgs } from '@remix-run/react'
 import { json, LoaderFunctionArgs } from '@remix-run/server-runtime'
-import { toNumber } from 'lodash-es'
+import { startCase, toNumber } from 'lodash-es'
 import { useMemo } from 'react'
 import { match } from 'ts-pattern'
 
 import { apolloClient, apolloClientV2 } from 'app/apollo.server'
 import { AnnotationFilter } from 'app/components/AnnotationFilter/AnnotationFilter'
 import { DepositionFilterBanner } from 'app/components/DepositionFilterBanner'
 import { DownloadModal } from 'app/components/Download'
+import { NoTotalResults } from 'app/components/NoTotalResults'
 import { RunHeader } from 'app/components/Run'
 import { AnnotationDrawer } from 'app/components/Run/AnnotationDrawer'
 import { AnnotationTable } from 'app/components/Run/AnnotationTable'
@@ -109,6 +110,7 @@ export default function RunByIdPage() {
 
   const {
     downloadConfig,
+    openRunDownloadModal,
     tomogramProcessing,
     tomogramSampling,
     annotationId,
@@ -182,6 +184,33 @@ export default function RunByIdPage() {
           filteredCount: annotationFilesAggregates.filteredCount,
           totalCount: annotationFilesAggregates.totalCount,
           countLabel: t('annotations'),
+          noTotalResults: (
+            <NoTotalResults
+              title={t('noAnnotationsAvailable')}
+              description={t('downloadTheRunDataToCreateYourOwnAnnotations')}
+              buttons={[
+                {
+                  text: t('downloadRunData'),
+                  onClick: () => {
+                    openRunDownloadModal({
+                      runId: run.id,
+                      datasetId: run.dataset.id,
+                    })
+                  },
+                },
+                {
+                  text: t('contributeYourAnnotations'),
+                  onClick: () => {
+                    window
+                      .open(
+                        'https://airtable.com/apppmytRJXoXYTO9w/shr5UxgeQcUTSGyiY?prefill_Event=RunEmptyState&hide_Event=true',
+                      )
+                      ?.focus()
+                  },
+                },
+              ]}
+            />
+          ),
         },
         ...(multipleTomogramsEnabled
           ? [
@@ -192,6 +221,25 @@ export default function RunByIdPage() {
                 filteredCount: tomogramsCount,
                 totalCount: tomogramsCount,
                 countLabel: t('tomograms'),
+                noTotalResults: (
+                  <NoTotalResults
+                    title={startCase(t('noTomogramsAvailable'))}
+                    description={t(
+                      'downloadAllRunDataViaApiToCreateYourOwnReconstructions',
+                    )}
+                    buttons={[
+                      {
+                        text: t('downloadThisRun'),
+                        onClick: () => {
+                          openRunDownloadModal({
+                            runId: run.id,
+                            datasetId: run.dataset.id,
+                          })
+                        },
+                      },
+                    ]}
+                  />
+                ),
               },
             ]
           : []),

frontend/packages/data-portal/public/locales/en/translation.json

@@ -84,6 +84,7 @@
   "configureDownload": "Configure Download",
   "contact": "Contact",
   "contributeCta": "We encourage you to share datasets and/or annotations to existing data. Click below to fill out the inquiry form.",
+  "contributeYourAnnotations": "Contribute Your Annotations",
   "contributeYourData": "Contribute your Data",
   "cookiePolicy": "Cookie Policy",
   "copy": " Copy",
@@ -132,10 +133,14 @@
   "download": "Download",
   "downloadAllAnnotations": "Download All Annotations",
   "downloadAllRunData": "<semibold>Download all run data via our API.</semibold> <url to='$t(apiDocLink)'>Visit API documentation.</url>",
+  "downloadAllRunDataViaApiToCreateYourOwnReconstructions": "Download all Run data via API to create your own reconstructions.",
   "downloadAvailableAnnotationsInSupported": "Download available annotations in supported file formats.",
   "downloadDataset": "Download Dataset...",
   "downloadNow": "Download Now",
   "downloadOptions": "Download Options",
+  "downloadRunData": "Download Run Data",
+  "downloadTheRunDataToCreateYourOwnAnnotations": "Download the Run data to create your own annotations.",
+  "downloadThisRun": "Download This Run",
   "downloadTomogram": "Download Tomogram",
   "downloadWillSaveToCurrentDirectory": "Download will save to your current directory. To change save destination, change the current directory in your terminal before continuing.",
   "downloadWithAdditionalOptions": "Download...",
@@ -236,6 +241,7 @@
   "ndJsonLink": "https://zarr.readthedocs.io/en/stable/",
   "next": "Next",
   "no": "No",
+  "noAnnotationsAvailable": "No Annotations Available",
   "normalText": "Normal text",
   "notApplicable": "Not Applicable",
   "noTomogramAvailable": "No tomogram available",