Frontend: Fixes screenshot issues (#3700)

cspell.config.json

@@ -100,6 +100,7 @@
 		"Belton",
 		"Berhanu",
 		"Bex",
+		"bgcolor",
 		"biomejs",
 		"bipoc",
 		"BIPOC",
@@ -184,6 +185,7 @@
 		"doi2",
 		"doi3",
 		"domcontentloaded",
+		"domtoimage",
 		"Donrie",
 		"dont",
 		"DOTENV",

frontend/package.json

@@ -25,8 +25,8 @@
 		"biome": "^0.2.2",
 		"d3": "^7.8.5",
 		"data-forge": "^1.10.2",
+		"dom-to-image-more": "^3.4.5",
 		"env-cmd": "^10.1.0",
-		"html2canvas": "^1.4.1",
 		"jotai": "^2.10.0",
 		"jotai-location": "^0.5.5",
 		"just-debounce-it": "^3.2.0",
@@ -45,7 +45,6 @@
 		"react-table": "^7.8.0",
 		"react-vega": "^7.6.0",
 		"seamless-scroll-polyfill": "^2.3.4",
-		"use-react-screenshot": "^4.0.0",
 		"vega": "^5.30.0",
 		"vega-lite": "^5.21.0",
 		"vite": "^5.4.8",
@@ -58,6 +57,7 @@
 		"@testing-library/jest-dom": "^5.17.0",
 		"@testing-library/react": "^16.0.1",
 		"@types/d3": "^7.4.0",
+		"@types/dom-to-image": "^2.6.7",
 		"@types/node": "^22.7.4",
 		"@types/react": "^18.3.10",
 		"@types/react-dom": "^18.3.0",

frontend/src/cards/CardWrapper.tsx

@@ -7,11 +7,8 @@ import { WithMetadataAndMetrics } from '../data/react/WithLoadingOrErrorUI'
 import { Sources } from './ui/Sources'
 import type { MapOfDatasetMetadata } from '../data/utils/DatasetTypes'
 import type { ScrollableHashId } from '../utils/hooks/useStepObserver'
-import {
-  type ElementHashIdHiddenOnScreenshot,
-  useDownloadCardImage,
-} from '../utils/hooks/useDownloadCardImage'
 import CardOptionsMenu from './ui/CardOptionsMenu'
+import { saveCardImage } from './ui/DownloadCardImageHelpers'
 
 function CardWrapper(props: {
   // prevent layout shift as component loads
@@ -30,19 +27,11 @@ function CardWrapper(props: {
   isCensusNotAcs?: boolean
   scrollToHash: ScrollableHashId
   reportTitle: string
-  elementsToHide?: ElementHashIdHiddenOnScreenshot[]
   expanded?: boolean
   isCompareCard?: boolean
   className?: string
   hasIntersectionalAllCompareBar?: boolean
 }) {
-  const [screenshotTargetRef, downloadTargetScreenshot] = useDownloadCardImage(
-    props.downloadTitle,
-    props.elementsToHide,
-    props.scrollToHash,
-    props.expanded,
-  )
-
   const loadingComponent = (
     <div
       className={`rounded relative m-2 p-3 shadow-raised bg-white flex justify-center ${props.className}`}
@@ -63,11 +52,12 @@ function CardWrapper(props: {
         return (
           <article
             className={`rounded-sm relative m-2 p-3 shadow-raised bg-white ${props.className}`}
-            ref={screenshotTargetRef}
             tabIndex={-1}
           >
             <CardOptionsMenu
-              downloadTargetScreenshot={downloadTargetScreenshot}
+              downloadTargetScreenshot={() =>
+                saveCardImage(props.scrollToHash, props.downloadTitle)
+              }
               reportTitle={props.reportTitle}
               scrollToHash={props.scrollToHash}
             />

frontend/src/cards/DisparityBarChartCard.tsx

@@ -29,7 +29,6 @@ import type { ScrollableHashId } from '../utils/hooks/useStepObserver'
 import CAWPOverlappingRacesAlert from './ui/CAWPOverlappingRacesAlert'
 import ChartTitle from './ChartTitle'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
-import type { ElementHashIdHiddenOnScreenshot } from '../utils/hooks/useDownloadCardImage'
 import HetNotice from '../styles/HetComponents/HetNotice'
 import { ALL_AHR_METRICS } from '../data/providers/AhrProvider'
 import { getMetricIdToConfigMap } from '../data/config/MetricConfigUtils'
@@ -96,18 +95,13 @@ function DisparityBarChartCardWithKey(props: DisparityBarChartCardProps) {
 
   const HASH_ID: ScrollableHashId = 'population-vs-distribution'
 
-  const elementsToHide: ElementHashIdHiddenOnScreenshot[] = [
-    '#card-options-menu',
-  ]
-
   return (
     <CardWrapper
       downloadTitle={chartTitle}
       queries={[query]}
       scrollToHash={HASH_ID}
       minHeight={preloadHeight}
       reportTitle={props.reportTitle}
-      elementsToHide={elementsToHide}
       className={props.className}
     >
       {([queryResponse]) => {

frontend/src/cards/MapCard.tsx

@@ -65,7 +65,6 @@ import ChartTitle from './ChartTitle'
 import { useParamState } from '../utils/hooks/useParamState'
 import { POPULATION, SVI } from '../data/providers/GeoContextProvider'
 import { type CountColsMap, RATE_MAP_SCALE } from '../charts/mapGlobals'
-import type { ElementHashIdHiddenOnScreenshot } from '../utils/hooks/useDownloadCardImage'
 import { PHRMA_METRICS } from '../data/providers/PhrmaProvider'
 import type { MadLibId } from '../utils/MadLibs'
 import { useIsBreakpointAndUp } from '../utils/hooks/useIsBreakpointAndUp'
@@ -79,11 +78,6 @@ import { getSortArgs } from '../data/sorting/sortingUtils'
 
 const SIZE_OF_HIGHEST_LOWEST_GEOS_RATES_LIST = 5
 const HASH_ID: ScrollableHashId = 'rate-map'
-const elementsToHide: ElementHashIdHiddenOnScreenshot[] = [
-  '#map-group-dropdown',
-  '#download-card-image-button',
-  '#card-options-menu',
-]
 
 interface MapCardProps {
   className?: string
@@ -277,7 +271,6 @@ function MapCardWithKey(props: MapCardProps) {
       minHeight={preloadHeight}
       scrollToHash={HASH_ID}
       reportTitle={props.reportTitle}
-      elementsToHide={elementsToHide}
       expanded={extremesMode}
       isCompareCard={props.isCompareCard}
       className={props.className}
@@ -488,7 +481,7 @@ function MapCardWithKey(props: MapCardProps) {
             />
 
             {!mapQueryResponse.dataIsMissing() && !hideGroupDropdown && (
-              <div id='map-group-dropdown' className='pb-1 pt-0 text-left'>
+              <div className='pb-1 pt-0 text-left hide-on-screenshot remove-height-on-screenshot'>
                 <DemographicGroupMenu
                   idSuffix={`-${props.fips.code}-${props.dataTypeConfig.dataTypeId}`}
                   demographicType={demographicType}

frontend/src/cards/RateTrendsChartCard.tsx

@@ -33,7 +33,6 @@ import { hasNonZeroUnknowns } from '../charts/trendsChart/helpers'
 import { HIV_METRICS } from '../data/providers/HivProvider'
 import Hiv2020Alert from './ui/Hiv2020Alert'
 import ChartTitle from './ChartTitle'
-import type { ElementHashIdHiddenOnScreenshot } from '../utils/hooks/useDownloadCardImage'
 import UnknownPctRateGradient from './UnknownPctRateGradient'
 import { generateSubtitle } from '../charts/utils'
 import type { AxisConfig } from '../charts/trendsChart/types'
@@ -126,18 +125,13 @@ export default function RateTrendsChartCard(props: RateTrendsChartCardProps) {
   const HASH_ID: ScrollableHashId = 'rates-over-time'
   const cardHeaderTitle = reportProviderSteps[HASH_ID].label
 
-  const elementsToHide: ElementHashIdHiddenOnScreenshot[] = [
-    '#card-options-menu',
-  ]
-
   return (
     <CardWrapper
       downloadTitle={getTitleText()}
       queries={queries}
       minHeight={PRELOAD_HEIGHT}
       scrollToHash={HASH_ID}
       reportTitle={props.reportTitle}
-      elementsToHide={elementsToHide}
       expanded={a11yTableExpanded}
       className={props.className}
     >

frontend/src/cards/ShareTrendsChartCard.tsx

@@ -35,7 +35,6 @@ import { generateChartTitle, generateSubtitle } from '../charts/utils'
 import { HIV_METRICS } from '../data/providers/HivProvider'
 import Hiv2020Alert from './ui/Hiv2020Alert'
 import ChartTitle from './ChartTitle'
-import type { ElementHashIdHiddenOnScreenshot } from '../utils/hooks/useDownloadCardImage'
 import HetNotice from '../styles/HetComponents/HetNotice'
 
 /* minimize layout shift */
@@ -112,10 +111,6 @@ export default function ShareTrendsChartCard(props: ShareTrendsChartCardProps) {
 
   if (!inequityQuery || !metricConfigInequitable?.metricId) return <></>
 
-  const elementsToHide: ElementHashIdHiddenOnScreenshot[] = [
-    '#card-options-menu',
-  ]
-
   const queries = [inequityQuery]
   pctShareQuery && queries.push(pctShareQuery)
 
@@ -126,7 +121,6 @@ export default function ShareTrendsChartCard(props: ShareTrendsChartCardProps) {
       minHeight={PRELOAD_HEIGHT}
       scrollToHash={HASH_ID}
       reportTitle={props.reportTitle}
-      elementsToHide={elementsToHide}
       expanded={a11yTableExpanded}
       className={props.className}
     >

frontend/src/cards/SimpleBarChartCard.tsx

@@ -27,7 +27,6 @@ import {
   DATATYPES_NEEDING_13PLUS,
   GENDER_METRICS,
 } from '../data/providers/HivProvider'
-import type { ElementHashIdHiddenOnScreenshot } from '../utils/hooks/useDownloadCardImage'
 import { GUN_VIOLENCE_DATATYPES } from '../data/providers/GunViolenceProvider'
 import LawEnforcementAlert from './ui/LawEnforcementAlert'
 import { isPctType } from '../data/config/MetricConfigUtils'
@@ -113,10 +112,6 @@ function SimpleBarChartCardWithKey(props: SimpleBarChartCardProps) {
 
   const HASH_ID: ScrollableHashId = 'rate-chart'
 
-  const elementsToHide: ElementHashIdHiddenOnScreenshot[] = [
-    '#card-options-menu',
-  ]
-
   const rateComparisonConfig = rateConfig?.rateComparisonMetricForAlls
 
   if (rateComparisonConfig) {
@@ -143,7 +138,6 @@ function SimpleBarChartCardWithKey(props: SimpleBarChartCardProps) {
       minHeight={PRELOAD_HEIGHT}
       scrollToHash={HASH_ID}
       reportTitle={props.reportTitle}
-      elementsToHide={elementsToHide}
       className={props.className}
       hasIntersectionalAllCompareBar={rateComparisonConfig !== undefined}
     >

frontend/src/cards/TableCard.tsx

@@ -25,7 +25,6 @@ import {
   GENDER_METRICS,
 } from '../data/providers/HivProvider'
 import GenderDataShortAlert from './ui/GenderDataShortAlert'
-import type { ElementHashIdHiddenOnScreenshot } from '../utils/hooks/useDownloadCardImage'
 import type { CountColsMap } from '../charts/mapGlobals'
 import HetNotice from '../styles/HetComponents/HetNotice'
 import { generateSubtitle } from '../charts/utils'
@@ -105,10 +104,6 @@ export default function TableCard(props: TableCardProps) {
 
   const HASH_ID: ScrollableHashId = 'data-table'
 
-  const elementsToHide: ElementHashIdHiddenOnScreenshot[] = [
-    '#card-options-menu',
-  ]
-
   const subtitle = generateSubtitle(
     ALL,
     props.demographicType,
@@ -124,7 +119,6 @@ export default function TableCard(props: TableCardProps) {
       queries={[query]}
       scrollToHash={HASH_ID}
       reportTitle={props.reportTitle}
-      elementsToHide={elementsToHide}
       className={props.className}
     >
       {([queryResponse]) => {

frontend/src/cards/UnknownsMapCard.tsx

@@ -24,7 +24,6 @@ import type { ScrollableHashId } from '../utils/hooks/useStepObserver'
 import TerritoryCircles from './ui/TerritoryCircles'
 import ChartTitle from './ChartTitle'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
-import type { ElementHashIdHiddenOnScreenshot } from '../utils/hooks/useDownloadCardImage'
 import { unknownMapConfig } from '../charts/mapGlobals'
 import { useIsBreakpointAndUp } from '../utils/hooks/useIsBreakpointAndUp'
 import HetNotice from '../styles/HetComponents/HetNotice'
@@ -113,10 +112,6 @@ function UnknownsMapCardWithKey(props: UnknownsMapCardProps) {
 
   const HASH_ID: ScrollableHashId = 'unknown-demographic-map'
 
-  const elementsToHide: ElementHashIdHiddenOnScreenshot[] = [
-    '#card-options-menu',
-  ]
-
   return (
     <CardWrapper
       downloadTitle={chartTitle}
@@ -125,7 +120,6 @@ function UnknownsMapCardWithKey(props: UnknownsMapCardProps) {
       minHeight={preloadHeight}
       scrollToHash={HASH_ID}
       reportTitle={props.reportTitle}
-      elementsToHide={elementsToHide}
     >
       {([mapQueryResponse, alertQueryResponse], metadata, geoData) => {
         // MOST of the items rendered in the card refer to the unknowns at the CHILD geo level,

frontend/src/cards/ui/AltTableView.tsx

@@ -65,17 +65,21 @@ export default function AltTableView(props: AltTableViewProps) {
   const earliestTimePeriod: string =
     accessibleData[accessibleData.length - 1][TIME_PERIOD_LABEL]
 
+  const safeLabel = props.tableCaption.replaceAll(' ', '-')
+
+  const uniqueId = `${safeLabel}-${
+    props.isCompareCard
+      ? ALT_TABLE_VIEW_2_PARAM_KEY
+      : ALT_TABLE_VIEW_1_PARAM_KEY
+  }`
+
   return (
     <AnimateHeight
       duration={500}
       height={props.expanded ? 'auto' : 47}
       onAnimationEnd={() => window.dispatchEvent(new Event('resize'))}
-      className='mt-4 mx-2 rounded-md bg-listboxColor text-left'
-      id={
-        props.isCompareCard
-          ? ALT_TABLE_VIEW_2_PARAM_KEY
-          : ALT_TABLE_VIEW_1_PARAM_KEY
-      }
+      className='mt-4 mx-2 rounded-md bg-listboxColor text-left hide-on-screenshot'
+      id={uniqueId}
     >
       <HetExpandableBoxButton
         expanded={props.expanded}

frontend/src/cards/ui/CardOptionsMenu.tsx

@@ -35,11 +35,11 @@ export default function CardOptionsMenu(props: CardOptionsMenuProps) {
   }
 
   return (
-    <div
-      className='mb-0 mr-0 flex flex-row-reverse pr-0 sm:mt-1 sm:pr-5 md:mr-1'
-      id={'card-options-menu'}
-    >
-      <Tooltip title='Card export options'>
+    <div className='mb-0 mr-0 flex flex-row-reverse pr-0 sm:mt-1 sm:pr-5 md:mr-1'>
+      <Tooltip
+        title='Card export options'
+        className='hide-on-screenshot remove-height-on-screenshot'
+      >
         <IconButton onClick={shareMenu.open}>
           <MoreHorizIcon />
         </IconButton>

frontend/src/cards/ui/DownloadCardImageButton.tsx

@@ -23,11 +23,7 @@ export function DownloadCardImageButton(props: DownloadCardImageButtonProps) {
   return (
     <>
       <SimpleBackdrop open={isThinking} setOpen={setIsThinking} />
-      <MenuItem
-        className='pl-3'
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        onClick={handleClick}
-      >
+      <MenuItem className='pl-3' onClick={handleClick}>
         <ListItemIcon className='flex items-center px-2 py-1'>
           <SaveAlt className='mx-1 w-8' />
           {!props.isMulti && (