From 8fb858c94ce6f5dc8f541bde7fb6feb18dd05c07 Mon Sep 17 00:00:00 2001
From: Bryan Chu <bchu@chanzuckerberg.com>
Date: Thu, 19 Sep 2024 14:34:46 -0700
Subject: [PATCH] finish

---
 .../app/components/NoTotalResults.tsx         | 17 +++++---------
 .../data-portal/app/routes/runs.$id.tsx       | 23 +++++++++++++++++--
 .../public/locales/en/translation.json        |  4 +++-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/NoTotalResults.tsx b/frontend/packages/data-portal/app/components/NoTotalResults.tsx
index da39cb031..fc5fc2d87 100644
--- a/frontend/packages/data-portal/app/components/NoTotalResults.tsx
+++ b/frontend/packages/data-portal/app/components/NoTotalResults.tsx
@@ -13,28 +13,23 @@ export function NoTotalResults({
   buttons,
 }: NoTotalResultsProps) {
   return (
-    <div className="flex justify-center items-center">
+    <div className="flex justify-center items-center 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-xl font-semibold">{title}</h1>
-        {description}
+        <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"
-            isAllCaps={false}
+            className="!normal-case !text-sds-body-s"
             onClick={button.onClick}
           >
             {button.text}
-            <SmallChevronRightIcon />
+            <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"
-        fill="none"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
         <path
           id="Combined-Shape"
           fill-rule="evenodd"
diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx
index 803c715f1..716d3d3c1 100644
--- a/frontend/packages/data-portal/app/routes/runs.$id.tsx
+++ b/frontend/packages/data-portal/app/routes/runs.$id.tsx
@@ -2,7 +2,7 @@
 
 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'
 
@@ -187,7 +187,7 @@ export default function RunByIdPage() {
           noTotalResults: (
             <NoTotalResults
               title={t('noAnnotationsAvailable')}
-              description={t('youCanStillDownloadTheRun')}
+              description={t('downloadTheRunDataToCreateYourOwnAnnotations')}
               buttons={[
                 {
                   text: t('downloadRunData'),
@@ -221,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,
+                          })
+                        },
+                      },
+                    ]}
+                  />
+                ),
               },
             ]
           : []),
diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
index 18a69102c..2c0b98fb3 100644
--- a/frontend/packages/data-portal/public/locales/en/translation.json
+++ b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -133,11 +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...",
@@ -414,7 +417,6 @@
   "website": "Website",
   "withDepositionData": "With deposition data",
   "yes": "Yes",
-  "youCanStillDownloadTheRun": "You can still download the Run data to create your own annotations.",
   "youMustHaveCliInstalled": "You must have AWS CLI installed. <url to='$t(awsCliLink)'>How to Install AWS CLI.</url>",
   "youMustHaveCurlInstalled": "You must have cURL installed. <url to='$t(curlSetupLink)'>How to Install cURL</url>",
   "zarrLink": "https://zarr.readthedocs.io/en/stable/"