From 4a22d63d655d2c3dda3e46ff841bebb300daf5a4 Mon Sep 17 00:00:00 2001
From: Kira Evans <contact@kne42.me>
Date: Wed, 29 Nov 2023 11:28:14 -0800
Subject: [PATCH] temp

---
 .../components/BrowseData/DatasetTable.tsx    |  2 +-
 .../app/components/DatabaseEntry.tsx          |  2 +-
 .../components/Dataset/DatasetDescription.tsx |  2 +-
 .../Dataset/DatasetMetadataTable.tsx          |  2 +-
 .../app/components/Index/IndexCTA.tsx         | 19 ++++++++------
 .../app/components/Index/IndexContent.tsx     | 16 +++++-------
 .../components/Index/IndexContributors.tsx    |  4 ++-
 .../app/components/Index/IndexHeader.tsx      | 18 +++++++------
 .../{external-links.ts => external-dbs.ts}    |  3 ---
 .../data-portal/app/routes/_index.tsx         |  4 +--
 .../public/locales/en/translation.json        | 25 ++++++++++++++-----
 11 files changed, 55 insertions(+), 42 deletions(-)
 rename frontend/packages/data-portal/app/constants/{external-links.ts => external-dbs.ts} (88%)

diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
index 7d3ae9e2e..2ba029736 100644
--- a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
+++ b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -10,7 +10,7 @@ import { useMemo } from 'react'
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
 import { Table, TableCell } from 'app/components/Table'
-import { EMPIAR_ID } from 'app/constants/external-links'
+import { EMPIAR_ID } from 'app/constants/external-dbs'
 import { ANNOTATED_OBJECTS_MAX, MAX_PER_PAGE } from 'app/constants/pagination'
 import { Dataset, useDatasets } from 'app/hooks/useDatasets'
 import { useIsLoading } from 'app/hooks/useIsLoading'
diff --git a/frontend/packages/data-portal/app/components/DatabaseEntry.tsx b/frontend/packages/data-portal/app/components/DatabaseEntry.tsx
index a88c05328..97aedc51a 100644
--- a/frontend/packages/data-portal/app/components/DatabaseEntry.tsx
+++ b/frontend/packages/data-portal/app/components/DatabaseEntry.tsx
@@ -4,7 +4,7 @@ import {
   LABEL_MAP,
   REGEX_MAP,
   URL_MAP,
-} from 'app/constants/external-links'
+} from 'app/constants/external-dbs'
 import { TableDataValue } from 'app/types/table'
 import { cns } from 'app/utils/cns'
 
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx
index d0543366f..d1d129371 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx
@@ -2,7 +2,7 @@ import { Button } from '@czi-sds/components'
 import { useState } from 'react'
 
 import { DatabaseEntry } from 'app/components/DatabaseEntry'
-import { DOI_ID } from 'app/constants/external-links'
+import { DOI_ID } from 'app/constants/external-dbs'
 import { useDatasetById } from 'app/hooks/useDatasetById'
 import { i18n } from 'app/i18n'
 import { cns, cnsNoMerge } from 'app/utils/cns'
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
index 8fcbad36b..43afdee8f 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
@@ -4,7 +4,7 @@ import { Dataset_Funding } from 'app/__generated__/graphql'
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { DatabaseEntry } from 'app/components/DatabaseEntry'
 import { Link } from 'app/components/Link'
-import { DOI_ID } from 'app/constants/external-links'
+import { DOI_ID } from 'app/constants/external-dbs'
 import { i18n } from 'app/i18n'
 import { getTableData } from 'app/utils/table'
 
diff --git a/frontend/packages/data-portal/app/components/Index/IndexCTA.tsx b/frontend/packages/data-portal/app/components/Index/IndexCTA.tsx
index 1c8b1bcfc..8d5df0e8e 100644
--- a/frontend/packages/data-portal/app/components/Index/IndexCTA.tsx
+++ b/frontend/packages/data-portal/app/components/Index/IndexCTA.tsx
@@ -1,7 +1,8 @@
 import { Button } from '@czi-sds/components'
 
+import { I18n } from 'app/components/I18n'
 import { Link } from 'app/components/Link'
-import { i18n } from 'app/i18n'
+import { useI18n } from 'app/hooks/useI18n'
 
 function CTA({
   title,
@@ -34,23 +35,25 @@ function CTA({
 }
 
 export function IndexCTA() {
+  const { t } = useI18n()
+
   return (
     <div className="py-sds-xxl flex flex-col gap-sds-xl relative after:h-full after:w-[200vw] after:bg-sds-primary-100 after:absolute after:top-0 after:-translate-x-1/2 after:-z-10">
       <h3 className="font-sds-semibold font-semibold text-sds-header-xl leading-sds-header-xl">
-        Help us achieve this vision
+        <I18n i18nKey="helpUsAchieveThisVision" />
       </h3>
       <div className="w-full grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto] grid-flow-col gap-y-sds-xl gap-x-sds-xxl">
         <CTA
-          title={i18n.viewAndDownloadDatasets}
-          text={i18n.viewDatasetsCta}
-          buttonText={i18n.browseData}
+          title={t('viewAndDownloadDatasets')}
+          text={t('viewDatasetsCta')}
+          buttonText={t('browseData')}
           url="/browse-data/datasets"
         />
         <div className="bg-sds-gray-200 w-sds-xxxs row-span-2" />
         <CTA
-          title={i18n.contributeYourData}
-          text={i18n.contributeCta}
-          buttonText={i18n.tellUsMore}
+          title={t('contributeYourData')}
+          text={t('contributeCta')}
+          buttonText={t('tellUsMore')}
           // TODO: fill this out when form page created
           url="/"
         />
diff --git a/frontend/packages/data-portal/app/components/Index/IndexContent.tsx b/frontend/packages/data-portal/app/components/Index/IndexContent.tsx
index 8ac955310..66dc34bc0 100644
--- a/frontend/packages/data-portal/app/components/Index/IndexContent.tsx
+++ b/frontend/packages/data-portal/app/components/Index/IndexContent.tsx
@@ -1,24 +1,20 @@
 import { Link } from 'app/components/Link'
-import { CZ_URL, CZII_URL, EMPIAR_URL } from 'app/constants/external-links'
+import { EMPIAR_URL } from 'app/constants/external-dbs'
+import { I18n } from 'app/components/I18n'
+import { useI18n } from 'app/hooks/useI18n'
 
 import { IndexContributors } from './IndexContributors'
 import { IndexCTA } from './IndexCTA'
 
 export function IndexContent() {
+  const { t } = useI18n()
+
   return (
     <div className="px-sds-xl w-[100vw] overflow-x-clip flex flex-col items-center">
       <div className="flex flex-col max-w-content-small py-sds-xxl gap-sds-xxl">
         <div className="flex flex-col gap-sds-xl">
           <h2 className="font-sds-semibold font-semibold text-sds-header-xl leading-sds-header-xl">
-            Welcome to the CryoET Data Portal, a project built by the{' '}
-            <Link to={CZII_URL} className="text-sds-info-400">
-              Chan Zuckerberg Imaging Institute
-            </Link>{' '}
-            and the{' '}
-            <Link to={CZ_URL} className="text-sds-info-400">
-              Chan Zuckerberg Initiative
-            </Link>
-            .
+            <I18n i18nKey="landingPageWelcomeBlurb" />
           </h2>
           <div className="font-sds-regular text-sds-body-s leading-sds-body-s flex flex-col gap-sds-l">
             <p>
diff --git a/frontend/packages/data-portal/app/components/Index/IndexContributors.tsx b/frontend/packages/data-portal/app/components/Index/IndexContributors.tsx
index b8491b08f..3428334aa 100644
--- a/frontend/packages/data-portal/app/components/Index/IndexContributors.tsx
+++ b/frontend/packages/data-portal/app/components/Index/IndexContributors.tsx
@@ -1,3 +1,5 @@
+import { I18n } from 'app/components/I18n'
+
 const CONTRIBUTORS = `
 David Agard
 Ben Barad
@@ -33,7 +35,7 @@ export function IndexContributors() {
   return (
     <div className="flex flex-col gap-sds-xl h-full">
       <h3 className="font-sds-semibold font-semibold text-sds-header-xl leading-sds-header-xl">
-        Thank You to our Data Contributors…
+        <I18n i18nKey="thankYouToOurDataContributors" />
       </h3>
       <ul className="grid grid-flow-col grid-rows-[repeat(7,_minmax(0,_1fr))] grid-cols-4 gap-y-sds-xxs gap-x-sds-xl">
         {contributors.map((name) => (
diff --git a/frontend/packages/data-portal/app/components/Index/IndexHeader.tsx b/frontend/packages/data-portal/app/components/Index/IndexHeader.tsx
index b13a643e9..3e614de3a 100644
--- a/frontend/packages/data-portal/app/components/Index/IndexHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Index/IndexHeader.tsx
@@ -3,8 +3,9 @@ import { styled } from '@mui/material/styles'
 import { useTypedLoaderData } from 'remix-typedjson'
 
 import { LandingPageDataQuery } from 'app/__generated__/graphql'
+import { I18n } from 'app/components/I18n'
 import { Link } from 'app/components/Link'
-import { i18n } from 'app/i18n'
+import { useI18n } from 'app/hooks/useI18n'
 import { theme } from 'app/theme'
 import { cns, cnsNoMerge } from 'app/utils/cns'
 
@@ -42,6 +43,7 @@ const DIVIDER = (
 )
 
 export function IndexHeader() {
+  const { t } = useI18n()
   const data = useTypedLoaderData<LandingPageDataQuery>()
 
   const datasets = data.datasets_aggregate.aggregate?.count
@@ -67,24 +69,24 @@ export function IndexHeader() {
       <div className="flex flex-col items-center gap-sds-m text-white">
         <div className="flex flex-col gap-sds-xl items-center">
           <h1 className="text-[32px] leading-[34px] font-sds-semibold font-semibold drop-shadow-landing-header">
-            {i18n.landingHeaderTitle}
+            <I18n i18nKey="landingHeaderTitle" />
           </h1>
           <div className="flex flex-row justify-center w-full">
-            <MetricField title={i18n.datasets} count={datasets ?? 0} />
+            <MetricField title={t('datasets')} count={datasets ?? 0} />
             {DIVIDER}
-            <MetricField title={i18n.species} count={species ?? 0} />
+            <MetricField title={t('species')} count={species ?? 0} />
             {DIVIDER}
-            <MetricField title={i18n.tomograms} count={tomograms ?? 0} />
+            <MetricField title={t('tomograms')} count={tomograms ?? 0} />
           </div>
           <Link to="/browse-data/datasets">
             <CTAButton sdsType="primary" sdsStyle="rounded">
-              {i18n.browseData}
+              <I18n i18nKey="browseData" />
             </CTAButton>
           </Link>
         </div>
-        <Link to="https://chanzuckerberg.github.io/cryoet-data-portal/">
+        <Link to={t('apiDocLink')}>
           <p className="underline underline-offset-1 decoration-1 text-sds-body-xxs leading-none drop-shadow-landing-header">
-            {i18n.orExploreViaApi}
+            <I18n i18nKey="orExploreViaApi" />
           </p>
         </Link>
       </div>
diff --git a/frontend/packages/data-portal/app/constants/external-links.ts b/frontend/packages/data-portal/app/constants/external-dbs.ts
similarity index 88%
rename from frontend/packages/data-portal/app/constants/external-links.ts
rename to frontend/packages/data-portal/app/constants/external-dbs.ts
index 2dee57087..d7efc893d 100644
--- a/frontend/packages/data-portal/app/constants/external-links.ts
+++ b/frontend/packages/data-portal/app/constants/external-dbs.ts
@@ -1,6 +1,3 @@
-export const CZII_URL = 'https://www.czimaginginstitute.org/'
-export const CZ_URL = 'https://chanzuckerberg.com/'
-
 export const EMPIAR_ID = /EMPIAR-([\d]+)/
 export const EMDB_ID = /EMD-([\d]+)/
 export const DOI_ID = /(10\..+\/.+)/
diff --git a/frontend/packages/data-portal/app/routes/_index.tsx b/frontend/packages/data-portal/app/routes/_index.tsx
index 229670274..3ef6c212a 100644
--- a/frontend/packages/data-portal/app/routes/_index.tsx
+++ b/frontend/packages/data-portal/app/routes/_index.tsx
@@ -1,5 +1,5 @@
 import type { MetaFunction } from '@remix-run/node'
-import { json } from '@remix-run/server-runtime'
+import { json, LoaderFunctionArgs } from '@remix-run/server-runtime'
 
 import { gql } from 'app/__generated__'
 import { apolloClient } from 'app/apollo.server'
@@ -25,7 +25,7 @@ const LANDING_PAGE_DATA_QUERY = gql(`
   }
 `)
 
-export async function loader() {
+export async function loader({ params, request }: LoaderFunctionArgs) {
   const { data } = await apolloClient.query({
     query: LANDING_PAGE_DATA_QUERY,
   })
diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
index a38dd6307..737523f5c 100644
--- a/frontend/packages/data-portal/public/locales/en/translation.json
+++ b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -15,8 +15,8 @@
   "annotationMethod": "Annotation Method",
   "annotationObject": "Annotation Object",
   "annotationOverview": "Annotation Overview",
-  "annotationSoftware": "Annotation Software",
   "annotations": "Annotations",
+  "annotationSoftware": "Annotation Software",
   "api": "API",
   "apiDocLink": "https://chanzuckerberg.github.io/cryoet-data-portal",
   "apply": "Apply",
@@ -45,6 +45,8 @@
   "close": "Close",
   "confidence": "confidence",
   "configureDownload": "Configure Download",
+  "contributeCta": "We encourage you to share datasets and/or annotations to existing data. Click below to fill out the inquiry form.",
+  "contributeYourData": "Contribute your Data",
   "cookiePolicy": "Cookie Policy",
   "copy": " Copy",
   "copyAndRunAwsS3Command": "Copy and run AWS S3 command in your terminal",
@@ -53,15 +55,16 @@
   "curatorRecommended": "Curator Recommended",
   "curlSetupLink": "https://everything.curl.dev/get",
   "currentDirectory": "Current Directory (default)",
+  "landingPageWelcomeBlurb": "Welcome to the CryoET Data Portal, a project built by the <url to='$t(urlCZII)'>Chan Zuckerberg Imaging Institute</url> and the <url to='$t(urlCZ)'>Chan Zuckerberg Initiative</url>. ",
   "dataAcquisitionSoftware": "Data Acquisition Software",
   "dataset": "Dataset",
   "datasetDetails": "Dataset Details",
   "datasetId": "Dataset ID",
   "datasetIds": "Dataset IDs",
   "datasetMetadata": "Dataset Metadata",
-  "datasetTitle": "Dataset Title",
   "datasets": "Datasets",
   "datasetsTab": "Datasets {{count}}",
+  "datasetTitle": "Dataset Title",
   "depositionDate": "Deposition Date",
   "description": "Description",
   "directDownload": "Direct Download",
@@ -95,8 +98,8 @@
   "fundingAgency": "Funding Agency",
   "github": "GitHub",
   "goId": "GO ID",
-  "goToDocs": "Go to Documentation",
   "good": "Good",
+  "goToDocs": "Go to Documentation",
   "grantID": "Grant ID",
   "gridPreparation": "Grid Preparation",
   "groundTruth": "Ground Truth",
@@ -105,11 +108,13 @@
   "groundTruthUsed": "Ground Truth Used",
   "hardware": "Hardware",
   "helpAndReport": "Help & Report",
+  "helpUsAchieveThisVision": "Help us achieve this vision",
   "howToCite": "How to cite",
   "ifYouEncounterIssuesWithDownloadTime": "If you  encounter issues with download time, we recommend downloading larger files via API.",
   "imageCorrector": "Image Corrector",
   "includedContents": "Included Contents",
   "keyPhoto": "key photo",
+  "landingHeaderTitle": "Open access to annotated cryoET tomograms",
   "lastModified": "Last Modified: {{date}}",
   "lastModifiedBlank": "Last Modified",
   "license": "License",
@@ -121,11 +126,11 @@
   "moderate": "Moderate",
   "moreInfo": "More Info",
   "mrcFormat": ".mrc format",
-  "nMoreObjects": "{{count}} More Objects",
   "na": "NA",
   "nameOrId": "Name/ID",
   "napariPlugin": "napari Plugin",
   "next": "Next",
+  "nMoreObjects": "{{count}} More Objects",
   "no": "No",
   "notApplicable": "Not Applicable",
   "notSubmitted": "Not Submitted",
@@ -136,6 +141,7 @@
   "objectShapeType": "Object Shape Type",
   "objectState": "Object State",
   "optional": "Optional",
+  "orExploreViaApi": "or explore via API",
   "organism": "Organism",
   "organismName": "Organism Name",
   "otherSetup": "Other Setup",
@@ -178,12 +184,16 @@
   "showLess": "Show Less",
   "size": "Size",
   "smallestAvailableVoxelSpacing": "Smallest Available Voxel Spacing",
+  "species": "Species",
   "sphericalAberrationConstant": "Spherical Aberration Constant",
   "stepCount": "Step {{count} of {max}}",
   "submitFeedback": "Submit Feedback",
+  "tellUsMore": "Tell us More",
   "terms": "Terms",
   "termsOfUse": "Terms of Use",
+  "thankYouToOurDataContributors": "Thank You to our Data Contributors…",
   "tiltAxis": "Tilt Axis",
+  "tiltingScheme": "Tilting Scheme",
   "tiltQuality": "Tilt Quality",
   "tiltRange": "Tilt Range",
   "tiltRangeFilterDescription": "Angle is in degrees (°). Tilt range is the difference between the max tilt angle and the min tilt angle.",
@@ -194,15 +204,14 @@
   "tiltSeriesMetadata": "Tilt-Series Metadata",
   "tiltSeriesQualityScore": "Tilt-Series Quality Score",
   "tiltStep": "Tilt Step",
-  "tiltingScheme": "Tilting Scheme",
   "tissueName": "Tissue Name",
   "title": "CryoET Data Portal",
   "tomogram": "Tomogram",
   "tomogramId": "Tomogram ID",
   "tomogramMetadata": "Tomogram Metadata",
   "tomogramProcessing": "Tomogram Processing",
-  "tomogramSampling": "Tomogram Sampling",
   "tomograms": "Tomograms",
+  "tomogramSampling": "Tomogram Sampling",
   "tools": "Tools",
   "totalFlux": "Total Flux",
   "true": "True",
@@ -210,11 +219,15 @@
   "unitDegree": "{{value}}°",
   "unitMillimeter": "{{value}} mm",
   "unitVolts": "{{value}} V",
+  "urlCZ": "https://chanzuckerberg.com/",
+  "urlCZII": "https://www.czimaginginstitute.org/",
   "valueToValue": "{{value1} to {value2}}",
   "veryPoor": "Very Poor",
   "viaApi": "via API",
   "viaAwsS3": "via AWS S3",
   "viaCurl": "via cURL",
+  "viewAndDownloadDatasets": "View and Download Datasets",
+  "viewDatasetsCta": "Find and visualize cryoET datasets in the portal and download to use for your own work.",
   "viewTomogram": "View Tomogram",
   "voxelSpacingId": "Voxel Spacing ID",
   "yes": "Yes",