feat: Add a citation button to pages (#1856)

* feat: Add citation button to single pages

* chore: Update wording

* feat: Add cite button to single dataset and single deposition pages

* chore: Lint

* chore: Updated [rdev] values.yaml image tags to sha-d2c0b69

* feat: Add plausible tracking and fix key press behaviour

* chore: Updated [rdev] values.yaml image tags to sha-f2fcc15

* fix: Plausible tracking

* chore: Updated [rdev] values.yaml image tags to sha-e768c4c

* fix: Fix citation button in dataset, deposition, and run headers

* chore: Updated [rdev] values.yaml image tags to sha-cedf449

* fix: Lint

* chore: Updated [rdev] values.yaml image tags to sha-999061d

* chore: Change gap between buttons to sds element

* chore: Updated [rdev] values.yaml image tags to sha-01d81cb

---------

Co-authored-by: czi-github-helper[bot] <+czi-github-helper[bot]@users.noreply.github.com>

Author: melissawm

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     frontend:
       image:
-        tag: sha-9b33749
+        tag: sha-01d81cb
       replicaCount: 1
       env:
         - name: API_URL_V2

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

@@ -0,0 +1,70 @@
+import { Button, ButtonProps, TooltipProps } from '@czi-sds/components'
+
+import { useI18n } from 'app/hooks/useI18n'
+import { EventPayloads, Events, usePlausible } from 'app/hooks/usePlausible'
+
+import { Link } from './Link'
+import { Tooltip } from './Tooltip'
+
+export interface CitationButtonProps {
+  buttonProps: Partial<ButtonProps>
+  event: EventPayloads[Events.CitePortal]
+  tooltipPlacement: TooltipProps['placement']
+  setIsHoveringOver?: (isHoveringOver: boolean) => void
+}
+
+export function CitationButton({
+  buttonProps,
+  event,
+  tooltipPlacement,
+  setIsHoveringOver,
+}: CitationButtonProps) {
+  const plausible = usePlausible()
+  const { t } = useI18n()
+
+  function trackCitation() {
+    plausible(Events.CitePortal, event)
+  }
+
+  return (
+    <Tooltip
+      tooltip={
+        <>
+          <h4 className="font-semibold">{t('citePortalText')}</h4>
+        </>
+      }
+      sdsStyle="dark"
+      center
+      placement={tooltipPlacement}
+      size="m"
+    >
+      {/* We need to disable this rule because we need the div to capture bubbled click events from
+       the link button below. This is because Plausible automatically adds event listeners to every
+       link on the page to track outbound links, so we can't attach a click listener to the link
+       directly because Plausible will overwrite it. */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        onClick={(e) => {
+          e.stopPropagation()
+          trackCitation()
+        }}
+        onKeyDown={({ key }) => {
+          if (key === 'Enter') {
+            trackCitation()
+          }
+        }}
+        onMouseEnter={() => setIsHoveringOver?.(false)} // could be changed back to true if we needed this fine-grained control
+        onMouseLeave={() => setIsHoveringOver?.(false)}
+      >
+        <Button
+          href={t('citePortalLink')}
+          disabled={false}
+          LinkComponent={Link}
+          {...(buttonProps as ButtonProps)}
+        >
+          <span>{t('citePortal')}</span>
+        </Button>
+      </div>
+    </Tooltip>
+  )
+}

frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx

@@ -1,6 +1,7 @@
 import { Button, Icon } from '@czi-sds/components'
 
 import { Breadcrumbs } from 'app/components/Breadcrumbs'
+import { CitationButton } from 'app/components/CitationButton'
 import { DatasetOverview } from 'app/components/Dataset/DatasetOverview'
 import { PageHeader } from 'app/components/PageHeader'
 import { DATA_TYPES } from 'app/constants/dataTypes'
@@ -25,7 +26,7 @@ export function DatasetHeader() {
   return (
     <PageHeader
       actions={
-        <div>
+        <div className="flex items-center gap-sds-s">
           <Button
             startIcon={<Icon sdsIcon="Download" sdsSize="l" />}
             sdsType="primary"
@@ -34,6 +35,18 @@ export function DatasetHeader() {
           >
             {t('downloadDataset')}
           </Button>
+
+          <CitationButton
+            buttonProps={{
+              sdsStyle: 'rounded',
+              sdsType: 'secondary',
+              startIcon: <Icon sdsIcon="Book" sdsSize="s" />,
+            }}
+            tooltipPlacement="bottom"
+            event={{
+              cite: true,
+            }}
+          />
         </div>
       }
       breadcrumbs={<Breadcrumbs variant="dataset" data={dataset} />}

frontend/packages/data-portal/app/components/Deposition/DepositionHeader.tsx

@@ -1,4 +1,7 @@
+import { Icon } from '@czi-sds/components'
+
 import { Breadcrumbs } from 'app/components/Breadcrumbs'
+import { CitationButton } from 'app/components/CitationButton'
 import { HeaderKeyPhoto } from 'app/components/HeaderKeyPhoto'
 import { PageHeader } from 'app/components/PageHeader'
 import { DATA_TYPES } from 'app/constants/dataTypes'
@@ -20,6 +23,21 @@ export function DepositionHeader() {
 
   return (
     <PageHeader
+      actions={
+        <div>
+          <CitationButton
+            buttonProps={{
+              sdsStyle: 'rounded',
+              sdsType: 'secondary',
+              startIcon: <Icon sdsIcon="Book" sdsSize="s" />,
+            }}
+            tooltipPlacement="bottom"
+            event={{
+              cite: true,
+            }}
+          />
+        </div>
+      }
       breadcrumbs={<Breadcrumbs variant="deposition" data={deposition} />}
       lastModifiedDate={deposition.lastModifiedDate.split('T')[0]}
       metadata={[

frontend/packages/data-portal/app/components/Run/RunHeader.tsx

@@ -1,6 +1,7 @@
 import { Button, Icon } from '@czi-sds/components'
 
 import { Breadcrumbs } from 'app/components/Breadcrumbs'
+import { CitationButton } from 'app/components/CitationButton'
 import { CollapsibleList } from 'app/components/CollapsibleList'
 import { HeaderKeyPhoto } from 'app/components/HeaderKeyPhoto'
 import { I18n } from 'app/components/I18n'
@@ -61,7 +62,7 @@ export function RunHeader() {
   return (
     <PageHeader
       actions={
-        <div className="flex items-center gap-2.5">
+        <div className="flex items-center gap-sds-s">
           <ViewTomogramButton
             tomogramId={tomogramId}
             neuroglancerConfig={neuroglancerConfig}
@@ -93,6 +94,18 @@ export function RunHeader() {
           >
             {t('downloadWithAdditionalOptions')}
           </Button>
+
+          <CitationButton
+            buttonProps={{
+              sdsStyle: 'rounded',
+              sdsType: 'secondary',
+              startIcon: <Icon sdsIcon="Book" sdsSize="s" />,
+            }}
+            tooltipPlacement="bottom"
+            event={{
+              cite: true,
+            }}
+          />
         </div>
       }
       releaseDate={run.dataset?.releaseDate.split('T')[0]}

frontend/packages/data-portal/app/hooks/usePlausible.ts

@@ -16,6 +16,7 @@ export const PLAUSIBLE_ENV_URL_MAP: Record<NodeJS.ProcessEnv['ENV'], string> = {
 }
 
 export enum Events {
+  CitePortal = 'Cite Portal',
   ClickBackToConfigureDownload = 'Click back to configure download',
   ClickBreadcrumb = 'Click breadcrumb',
   ClickBrowseDataTab = 'Click browse data tab',
@@ -52,6 +53,9 @@ export type PlausibleDownloadModalPayload<T = object> = T & {
 export type DownloadModalPropKeys = keyof PlausibleDownloadModalPayload
 
 export type EventPayloads = {
+  [Events.CitePortal]: {
+    cite: boolean
+  }
   [Events.ClickBackToConfigureDownload]: PlausibleDownloadModalPayload
   [Events.ClickDownloadTab]: PlausibleDownloadModalPayload
   [Events.ClickDownloadTomogram]: PlausibleDownloadModalPayload<{

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

@@ -81,6 +81,9 @@
   "cellLineOrStrainName": "Cell Line or Strain Name",
   "cellName": "Cell Name",
   "cellularComponent": "Cellular Component",
+  "citePortal": "Cite",
+  "citePortalLink": "https://chanzuckerberg.github.io/cryoet-data-portal/stable/#citing-the-cryoet-data-portal",
+  "citePortalText": "Learn how to cite this data and the Portal",
   "clickToDownloadViaBrowser": "Click to download via your browser",
   "close": "Close",
   "comingFall2024": "Coming in Fall 2024",