From ca7f3f94cf226dde155aca972818954302942c40 Mon Sep 17 00:00:00 2001 From: Bryan Chu Date: Wed, 18 Sep 2024 14:32:43 -0700 Subject: [PATCH 1/4] --- .../{NoResults.tsx => NoFilteredResults.tsx} | 2 +- .../app/components/NoTotalResults.tsx | 48 +++++++++++++++++++ .../app/components/TablePageLayout.tsx | 13 +++-- .../app/routes/browse-data.datasets.tsx | 6 +-- .../app/routes/browse-data.depositions.tsx | 6 +-- .../data-portal/app/routes/runs.$id.tsx | 29 +++++++++++ .../public/locales/en/translation.json | 4 ++ 7 files changed, 98 insertions(+), 10 deletions(-) rename frontend/packages/data-portal/app/components/{NoResults.tsx => NoFilteredResults.tsx} (99%) create mode 100644 frontend/packages/data-portal/app/components/NoTotalResults.tsx diff --git a/frontend/packages/data-portal/app/components/NoResults.tsx b/frontend/packages/data-portal/app/components/NoFilteredResults.tsx similarity index 99% rename from frontend/packages/data-portal/app/components/NoResults.tsx rename to frontend/packages/data-portal/app/components/NoFilteredResults.tsx index 4f92c9724..1c7edb04b 100644 --- a/frontend/packages/data-portal/app/components/NoResults.tsx +++ b/frontend/packages/data-portal/app/components/NoFilteredResults.tsx @@ -19,7 +19,7 @@ function NoResultsImage() { ) } -export function NoResults({ +export function NoFilteredResults({ actions, description, title, diff --git a/frontend/packages/data-portal/app/components/NoTotalResults.tsx b/frontend/packages/data-portal/app/components/NoTotalResults.tsx new file mode 100644 index 000000000..da39cb031 --- /dev/null +++ b/frontend/packages/data-portal/app/components/NoTotalResults.tsx @@ -0,0 +1,48 @@ +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 ( +
+
+

{title}

+ {description} + {buttons.map((button) => ( + + ))} +
+ + + +
+ ) +} diff --git a/frontend/packages/data-portal/app/components/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout.tsx index 1a9b68bc2..f4dcd4f49 100644 --- a/frontend/packages/data-portal/app/components/TablePageLayout.tsx +++ b/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 (
@@ -214,7 +221,7 @@ function TablePageTabContent({
- {filteredCount === 0 && noResults} + {filteredCount === 0 && noFilteredResults} {filteredCount > MAX_PER_PAGE && (
, table: , - noResults: ( - {t('clearFilters')}} diff --git a/frontend/packages/data-portal/app/routes/browse-data.depositions.tsx b/frontend/packages/data-portal/app/routes/browse-data.depositions.tsx index a050e7fea..5d434bd52 100644 --- a/frontend/packages/data-portal/app/routes/browse-data.depositions.tsx +++ b/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: , - noResults: ( - {t('clearFilters')}} diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx index 19e9824ec..803c715f1 100644 --- a/frontend/packages/data-portal/app/routes/runs.$id.tsx +++ b/frontend/packages/data-portal/app/routes/runs.$id.tsx @@ -30,6 +30,7 @@ import { BaseAnnotation } from 'app/state/annotation' import { DownloadConfig } from 'app/types/download' import { useFeatureFlag } from 'app/utils/featureFlags' import { shouldRevalidatePage } from 'app/utils/revalidate' +import { NoTotalResults } from 'app/components/NoTotalResults' export async function loader({ request, params }: LoaderFunctionArgs) { const id = params.id ? +params.id : NaN @@ -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: ( + { + 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 ? [ diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json index 1d20caa19..18a69102c 100644 --- a/frontend/packages/data-portal/public/locales/en/translation.json +++ b/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", @@ -136,6 +137,7 @@ "downloadDataset": "Download Dataset...", "downloadNow": "Download Now", "downloadOptions": "Download Options", + "downloadRunData": "Download Run Data", "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 +238,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", @@ -411,6 +414,7 @@ "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. How to Install AWS CLI.", "youMustHaveCurlInstalled": "You must have cURL installed. How to Install cURL", "zarrLink": "https://zarr.readthedocs.io/en/stable/" From 8fb858c94ce6f5dc8f541bde7fb6feb18dd05c07 Mon Sep 17 00:00:00 2001 From: Bryan Chu Date: Thu, 19 Sep 2024 14:34:46 -0700 Subject: [PATCH 2/4] 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 ( -
+
-

{title}

- {description} +

{title}

+
{description}
{buttons.map((button) => ( ))}
- + { + 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": "Download all run data via our API. Visit API documentation.", + "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. How to Install AWS CLI.", "youMustHaveCurlInstalled": "You must have cURL installed. How to Install cURL", "zarrLink": "https://zarr.readthedocs.io/en/stable/" From bd3c82e4797fd8d2c43751dd39f5b27f9dbe82c8 Mon Sep 17 00:00:00 2001 From: Bryan Chu Date: Thu, 19 Sep 2024 14:44:54 -0700 Subject: [PATCH 3/4] fix svg attrs --- .../packages/data-portal/app/components/NoTotalResults.tsx | 3 +-- frontend/packages/data-portal/app/routes/runs.$id.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/packages/data-portal/app/components/NoTotalResults.tsx b/frontend/packages/data-portal/app/components/NoTotalResults.tsx index fc5fc2d87..5663d1cca 100644 --- a/frontend/packages/data-portal/app/components/NoTotalResults.tsx +++ b/frontend/packages/data-portal/app/components/NoTotalResults.tsx @@ -1,4 +1,5 @@ import { Button } from '@czi-sds/components' + import { SmallChevronRightIcon } from './icons' export interface NoTotalResultsProps { @@ -32,8 +33,6 @@ export function NoTotalResults({ diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx index 716d3d3c1..6cdfa30a4 100644 --- a/frontend/packages/data-portal/app/routes/runs.$id.tsx +++ b/frontend/packages/data-portal/app/routes/runs.$id.tsx @@ -10,6 +10,7 @@ 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' @@ -30,7 +31,6 @@ import { BaseAnnotation } from 'app/state/annotation' import { DownloadConfig } from 'app/types/download' import { useFeatureFlag } from 'app/utils/featureFlags' import { shouldRevalidatePage } from 'app/utils/revalidate' -import { NoTotalResults } from 'app/components/NoTotalResults' export async function loader({ request, params }: LoaderFunctionArgs) { const id = params.id ? +params.id : NaN From dd54ebbc3f1cdb193feec3f2e135ac998c8d198c Mon Sep 17 00:00:00 2001 From: Bryan Chu Date: Fri, 20 Sep 2024 10:24:48 -0700 Subject: [PATCH 4/4] add gap --- frontend/packages/data-portal/app/components/NoTotalResults.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/data-portal/app/components/NoTotalResults.tsx b/frontend/packages/data-portal/app/components/NoTotalResults.tsx index 5663d1cca..9e8b00c85 100644 --- a/frontend/packages/data-portal/app/components/NoTotalResults.tsx +++ b/frontend/packages/data-portal/app/components/NoTotalResults.tsx @@ -14,7 +14,7 @@ export function NoTotalResults({ buttons, }: NoTotalResultsProps) { return ( -
+

{title}

{description}