npm - @cdc/dashboard - Versions diffs - 4.25.3 → 4.25.6-1 - Mend

@cdc/dashboard 4.25.3 → 4.25.6-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/Dynamic_Data.md +79 -0
package/Override_Data.md +39 -0
package/dist/cdcdashboard.js +76052 -77984
package/examples/legend-issue-data.json +1874 -0
package/examples/legend-issue.json +749 -0
package/examples/map.json +628 -0
package/examples/special-classes.json +54340 -0
package/index.html +1 -26
package/package.json +10 -15
package/src/CdcDashboardComponent.tsx +65 -216
package/src/_stories/Dashboard.stories.tsx +2 -0
package/src/_stories/_mock/api-filter-map.json +43 -1
package/src/components/CollapsibleVisualizationRow.tsx +4 -6
package/src/components/DashboardEditors.tsx +143 -0
package/src/components/DashboardFilters/DashboardFilters.tsx +205 -205
package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx +286 -287
package/src/components/DashboardFilters/DashboardFiltersEditor/components/APIModal.tsx +129 -0
package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx +680 -652
package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx +198 -198
package/src/components/DataDesignerModal.tsx +33 -14
package/src/components/Header/Header.tsx +7 -9
package/src/components/MultiConfigTabs/multiconfigtabs.styles.css +3 -0
package/src/components/Row.tsx +2 -24
package/src/components/VisualizationRow.tsx +191 -214
package/src/helpers/getVizConfig.ts +93 -80
package/src/helpers/getVizRowColumnLocator.ts +0 -1
package/src/helpers/reloadURLHelpers.ts +11 -6
package/src/helpers/shouldLoadAllFilters.ts +30 -30
package/src/index.tsx +2 -1
package/src/scss/main.scss +0 -5
package/src/store/dashboard.actions.ts +61 -62
package/src/store/dashboard.reducer.ts +15 -11
package/src/types/ConfigRow.ts +0 -1
package/src/types/Dashboard.ts +1 -1
package/src/types/DashboardConfig.ts +1 -1
package/src/types/SharedFilter.ts +2 -0
package/examples/private/DEV-10120.json +0 -1294
package/examples/private/DEV-10527.json +0 -845
package/examples/private/DEV-10586.json +0 -54319
package/examples/private/DEV-10856.json +0 -54319
package/examples/private/DEV-9199.json +0 -606
package/examples/private/DEV-9644.json +0 -20092
package/examples/private/DEV-9684.json +0 -2135
package/examples/private/DEV-9932.json +0 -95
package/examples/private/DEV-9989.json +0 -229
package/examples/private/art-dashboard.json +0 -18174
package/examples/private/art-scratch.json +0 -2406
package/examples/private/bird-flu-2.json +0 -440
package/examples/private/bird-flu.json +0 -413
package/examples/private/dashboard-config-ehdi.json +0 -29915
package/examples/private/dashboard-map-filter.json +0 -815
package/examples/private/dashboard-margins.js +0 -15
package/examples/private/dataset.json +0 -1452
package/examples/private/dev-10856-2.json +0 -1348
package/examples/private/ehdi-data.json +0 -29502
package/examples/private/exposure-source-h5-data.csv +0 -26
package/examples/private/fatal-data.csv +0 -3159
package/examples/private/feelings.json +0 -1
package/examples/private/gaza-issue.json +0 -1214
package/examples/private/markup.json +0 -115
package/examples/private/nhis.json +0 -1792
package/examples/private/workforce.json +0 -2041
package/src/types/DataSet.ts +0 -11

package/index.html CHANGED Viewed

@@ -21,33 +21,8 @@
   </head>
   <body>
-    <div class="react-container" data-config="/examples/private/nhis.json"></div>
-    <!-- <div class="react-container" data-config="/examples/private/bird-flu.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/bump-chart.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/full-dashboard.json"></div> -->
-    <div class="react-container" data-config="/examples/dashboard-gallery.json"></div>
-    <!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/default-multi-dataset.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/dashboard-gallery.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/filtered-dash.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/private/art-dashboard.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/sankey.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/DEV-6574.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/default-multi-dataset-2.json"></div> -->
-    <div class="react-container" data-config="/examples/default-multi-dataset.json"></div>
-    <!-- <div class="react-container" data-config="/examples/default-filter-control.json"></div> -->
-    <!-- Respiratory custom example -->
-    <div
-      class="react-container wcms-viz-container"
-      data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"
-      data-config="/examples/ed-visits-county-file.json"
-    ></div>
+    <div class="react-container" data-config="/examples/map.json"></div>
     <script src="https://www.cdc.gov/TemplatePackage/contrib/libs/jquery/latest/jquery.min.js?_=91329"></script>
-    <!-- <script src="examples/custom/js/respiratory.js"></script> -->
     <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.25.3",
+  "version": "4.25.6-1",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -27,27 +27,22 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.25.3",
-    "@cdc/core": "^4.25.3",
-    "@cdc/data-bite": "^4.25.3",
-    "@cdc/filtered-text": "^4.25.3",
-    "@cdc/map": "^4.25.3",
-    "@cdc/markup-include": "^4.25.3",
-    "@cdc/waffle-chart": "^4.25.3",
-    "html-react-parser": "^3.0.8",
+    "@cdc/chart": "^4.25.6-1",
+    "@cdc/core": "^4.25.6-1",
+    "@cdc/data-bite": "^4.25.6-1",
+    "@cdc/filtered-text": "^4.25.6-1",
+    "@cdc/map": "^4.25.6-1",
+    "@cdc/markup-include": "^4.25.6-1",
+    "@cdc/waffle-chart": "^4.25.6-1",
     "js-base64": "^2.5.2",
-    "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-table": "^7.5.0",
-    "react-tooltip": "5.8.2-beta.3",
-    "use-debounce": "^6.0.1",
-    "whatwg-fetch": "^3.6.2"
+    "use-debounce": "^6.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "b09566f5a7d57c8d0109e5f407257729d6b36846"
+  "gitHead": "ac45ee0f1d6a4045648c4e083992fc091795e084"
 }

package/src/CdcDashboardComponent.tsx CHANGED Viewed

@@ -19,13 +19,6 @@ import Loading from '@cdc/core/components/Loading'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import getViewport from '@cdc/core/helpers/getViewport'
-import CdcChart from '@cdc/chart/src/CdcChartComponent'
-import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
-import CdcMap from '@cdc/map/src/CdcMap'
-import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
-import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
-import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
 import Grid from './components/Grid'
 import Header from './components/Header/Header'
 import DataTable from '@cdc/core/components/DataTable'
@@ -56,16 +49,16 @@ import { getVizConfig } from './helpers/getVizConfig'
 import { getFilteredData } from './helpers/getFilteredData'
 import { getVizRowColumnLocator } from './helpers/getVizRowColumnLocator'
 import Layout from '@cdc/core/components/Layout'
-import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
 import * as reloadURLHelpers from './helpers/reloadURLHelpers'
 import { addValuesToDashboardFilters } from './helpers/addValuesToDashboardFilters'
 import { DashboardFilters } from './types/DashboardFilters'
 import DashboardSharedFilters from './components/DashboardFilters'
-import ExpandCollapseButtons from './components/ExpandCollapseButtons'
 import { loadAPIFiltersFactory } from './helpers/loadAPIFilters'
 import Loader from '@cdc/core/components/Loader'
 import Alert from '@cdc/core/components/Alert'
 import { shouldLoadAllFilters } from './helpers/shouldLoadAllFilters'
+import { subscribe, unsubscribe } from '@cdc/core/helpers/events'
+import DashboardEditors from './components/DashboardEditors'
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -120,12 +113,16 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     for (let i = 0; i < datasetKeys.length; i++) {
       const datasetKey = datasetKeys[i]
       const dataset = config.datasets[datasetKey]
-      if (dataset.dataUrl && filters) {
+      const windowQueryParams = Object.fromEntries(new URLSearchParams(window.location.search))
+      const loadQueryParam = windowQueryParams[dataset.loadQueryParam || '']
+      if (dataset.dataUrl && (filters || loadQueryParam)) {
         const dataUrl = new URL(dataset.runtimeDataUrl || dataset.dataUrl, window.location.origin)
         const currentQSParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
         const updatedQSParams = {}
-        filters.forEach(filter => {
+        if (loadQueryParam) {
+          updatedQSParams[dataset.loadQueryParam] = loadQueryParam
+        }
+        filters?.forEach(filter => {
           if (
             filter.type === 'urlfilter' &&
             reloadURLHelpers.filterUsedByDataUrl(filter, datasetKey, config.visualizations, config.rows)
@@ -143,7 +140,6 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             }
             if (!!filter.setByQueryParameter) {
-              const windowQueryParams = Object.fromEntries(new URLSearchParams(window.location.search))
               const filterValue = windowQueryParams[filter.setByQueryParameter]
               const queryParam = filter.apiFilter?.valueSelector || filter.setByQueryParameter
               if (filterValue) {
@@ -271,6 +267,30 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     dispatch({ type: 'SET_SHARED_FILTERS', payload: newConfig.dashboard.sharedFilters })
   }
+  const setEventData = ({ detail }) => {
+    try {
+      const newDatasets = Object.keys(detail).reduce((acc, key) => {
+        if (state.data[key] !== undefined) {
+          acc[key] = detail[key]
+        }
+        return acc
+      }, {})
+      const newConfig = { ...state, data: { ...state.data, ...newDatasets } }
+      const newFilteredData = getFilteredData(newConfig, _.cloneDeep(state.filteredData))
+      dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+      dispatch({ type: 'SET_DATA', payload: { ...state.data, ...newDatasets } })
+    } catch (e) {
+      console.error('Error setting event data: ', e)
+    }
+  }
+  useEffect(() => {
+    subscribe('cove_set_data', setEventData)
+    return () => {
+      unsubscribe('cove_set_data', setEventData)
+    }
+  }, [])
   useEffect(() => {
     const { config } = state
     const loadAllFilters = shouldLoadAllFilters(config, isEditor && !isPreview)
@@ -342,7 +362,6 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         state.filteredData
       )
       visualizationConfig.uid = visualizationKey
-      if (visualizationConfig.type === 'footnotes') visualizationConfig.formattedData = undefined
       const setsSharedFilter =
         state.config.dashboard.sharedFilters &&
         state.config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === visualizationKey).length > 0
@@ -360,151 +379,21 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           updateChildConfig(visualizationKey, dataCorrectedConfig)
         }
-        switch (visualizationConfig.type) {
-          case 'chart':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Chart' />
-                <CdcChart
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  isDebug={isDebug}
-                  setConfig={_updateConfig}
-                  setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
-                  setSharedFilterValue={setSharedFilterValue}
-                  dashboardConfig={state.config}
-                  isDashboard={true}
-                  configUrl={undefined}
-                  setEditing={undefined}
-                  hostname={undefined}
-                  link={undefined}
-                />
-              </>
-            )
-            break
-          case 'map':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Map' />
-                <CdcMap
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  isDebug={isDebug}
-                  setConfig={_updateConfig}
-                  setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
-                  setSharedFilterValue={setSharedFilterValue}
-                  isDashboard={true}
-                  showLoader={false}
-                  dashboardConfig={state.config}
-                />
-              </>
-            )
-            break
-          case 'data-bite':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Data Bite' />
-                <CdcDataBite
-                  key={visualizationKey}
-                  config={{ ...visualizationConfig, newViz: true }}
-                  isEditor={true}
-                  setConfig={_updateConfig}
-                  isDashboard={true}
-                />
-              </>
-            )
-            break
-          case 'waffle-chart':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Waffle Chart' />
-                <CdcWaffleChart
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  setConfig={_updateConfig}
-                  isDashboard={true}
-                  configUrl={undefined}
-                />
-              </>
-            )
-            break
-          case 'markup-include':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Markup Include' />
-                <CdcMarkupInclude
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  setConfig={_updateConfig}
-                  isDashboard={true}
-                  configUrl={undefined}
-                />
-              </>
-            )
-            break
-          case 'filtered-text':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Filtered Text' />
-                <CdcFilteredText
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  setConfig={_updateConfig}
-                  isDashboard={true}
-                  configUrl={undefined}
-                />
-              </>
-            )
-            break
-          case 'dashboardFilters':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Filter Dropdowns' />
-                <DashboardSharedFilters
-                  isEditor={true}
-                  visualizationConfig={visualizationConfig}
-                  apiFilterDropdowns={apiFilterDropdowns}
-                  setConfig={_updateConfig}
-                />
-              </>
-            )
-            break
-          case 'table':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Table' />
-                <DataTableStandAlone
-                  visualizationKey={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  updateConfig={_updateConfig}
-                />
-              </>
-            )
-            break
-          case 'footnotes':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Footnotes' />
-                {/* Datasets are passed in just for reference and need to be removed */}
-                <FootnotesStandAlone
-                  visualizationKey={visualizationKey}
-                  config={{ ...visualizationConfig, datasets: state.config.datasets }}
-                  isEditor={true}
-                  updateConfig={conf => _updateConfig(_.omit(conf, 'datasets'))}
-                />
-              </>
-            )
-            break
-          default:
-            body = <></>
-            break
-        }
+        body = (
+          <>
+            <Header visualizationKey={visualizationKey} subEditor={true} />
+            <DashboardEditors
+              key={visualizationKey}
+              visualizationKey={visualizationKey}
+              visualizationConfig={visualizationConfig}
+              _updateConfig={_updateConfig}
+              isDebug={isDebug}
+              setSharedFilter={setSharedFilter}
+              apiFilterDropdowns={apiFilterDropdowns}
+              state={state}
+            />
+          </>
+        )
       }
     })
@@ -527,7 +416,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     const { config } = state
     const { title, description } = config.dashboard || {}
-    const filteredRows = config.rows && config.rows.filter(row => row.columns.filter(col => col.widget).length !== 0)
+    const filteredRows = config.rows?.filter(row => row.columns.filter(col => col.widget).length !== 0)
     body = (
       <>
@@ -553,62 +442,22 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             {/* Description */}
             {description && <div className='subtext mb-3'>{parse(description)}</div>}
             {/* Visualizations */}
-            {filteredRows &&
-              filteredRows.map((row, index) => {
-                if (row.multiVizColumn && (isPreview || !isEditor)) {
-                  const filteredData = getFilteredData(state, _.cloneDeep(state.data))
-                  const data = filteredData[index] ?? row.formattedData
-                  const dataGroups = {}
-                  data.forEach(d => {
-                    const groupKey = d[row.multiVizColumn]
-                    if (!dataGroups[groupKey]) dataGroups[groupKey] = []
-                    dataGroups[groupKey].push(d)
-                  })
-                  return (
-                    <React.Fragment key={`row__${index}`}>
-                      {/* Expand/Collapse All */}
-                      {!inNoDataState && row.expandCollapseAllButtons === true && (
-                        <ExpandCollapseButtons setAllExpanded={setAllExpanded} />
-                      )}
-                      {Object.keys(dataGroups).map(groupName => {
-                        const dataValue = dataGroups[groupName]
-                        return (
-                          <VisualizationRow
-                            key={`row__${index}__${groupName}`}
-                            allExpanded={allExpanded}
-                            filteredDataOverride={dataValue}
-                            groupName={groupName}
-                            row={row}
-                            rowIndex={index}
-                            setSharedFilter={setSharedFilter}
-                            updateChildConfig={updateChildConfig}
-                            apiFilterDropdowns={apiFilterDropdowns}
-                            currentViewport={currentViewport}
-                            inNoDataState={inNoDataState}
-                            isLastRow={index === filteredRows.length - 1}
-                          />
-                        )
-                      })}
-                    </React.Fragment>
-                  )
-                } else {
-                  return (
-                    <VisualizationRow
-                      key={`row__${index}`}
-                      allExpanded={false}
-                      groupName={''}
-                      row={row}
-                      rowIndex={index}
-                      setSharedFilter={setSharedFilter}
-                      updateChildConfig={updateChildConfig}
-                      apiFilterDropdowns={apiFilterDropdowns}
-                      currentViewport={currentViewport}
-                      inNoDataState={inNoDataState}
-                      isLastRow={index === filteredRows.length - 1}
-                    />
-                  )
-                }
-              })}
+            {filteredRows?.map((row, index) => (
+              <VisualizationRow
+                key={`row__${index}`}
+                allExpanded={allExpanded}
+                groupName={''}
+                row={row}
+                rowIndex={index}
+                setSharedFilter={setSharedFilter}
+                setAllExpanded={setAllExpanded}
+                updateChildConfig={updateChildConfig}
+                apiFilterDropdowns={apiFilterDropdowns}
+                currentViewport={currentViewport}
+                inNoDataState={inNoDataState}
+                isLastRow={index === filteredRows.length - 1}
+              />
+            ))}
             {inNoDataState ? <div className='mt-5'>Please complete your selection to continue.</div> : <></>}

package/src/_stories/Dashboard.stories.tsx CHANGED Viewed

@@ -341,6 +341,8 @@ export const RegressionAPIFiltersMap: Story = {
     await sleep(1000)
     const topicsFilter = canvas.getByLabelText('Category', { selector: 'select' })
     await user.selectOptions(topicsFilter, ['topicId'])
+    await sleep(1000)
     const indicatorsFilter = canvas.getByLabelText('Indicator', { selector: 'select' })
     await user.selectOptions(indicatorsFilter, ['indicatorID'])
     const yearsFilter = canvas.getByLabelText('Year', { selector: 'select' })

package/src/_stories/_mock/api-filter-map.json CHANGED Viewed

@@ -82,6 +82,7 @@
   ],
   "visualizations": {
     "map1": {
+      "table": {},
       "uid": "map1",
       "type": "map",
       "defaultData": false,
@@ -113,6 +114,45 @@
         "hideGeoColumnInTooltip": false,
         "hidePrimaryColumnInTooltip": false
       },
+      "tooltips": {
+        "appearanceType": "hover",
+        "linkLabel": "Learn More",
+        "capitalizeLabels": true,
+        "opacity": 90
+      },
+      "map": {
+        "layers": [],
+        "patterns": []
+      },
+      "visual": {
+        "minBubbleSize": 1,
+        "maxBubbleSize": 20,
+        "extraBubbleBorder": false,
+        "cityStyle": "circle",
+        "cityStyleLabel": "",
+        "showBubbleZeros": false,
+        "additionalCityStyles": [],
+        "geoCodeCircleSize": 8
+      },
+      "hexMap": {
+        "type": "",
+        "shapeGroups": [
+          {
+            "legendTitle": "",
+            "legendDescription": "",
+            "items": [
+              {
+                "key": "",
+                "shape": "Arrow Up",
+                "column": "",
+                "operator": "=",
+                "value": ""
+              }
+            ]
+          }
+        ]
+      },
+      "annotations": [],
       "color": "greenBlue",
       "columns": {
         "geo": {
@@ -170,7 +210,8 @@
         "position": "side",
         "title": "Crude Prevalence",
         "separateZero": true
-      }
+      },
+      "table": {}
     }
   },
   "type": "dashboard",
@@ -179,6 +220,7 @@
       "dataUrl": "http://test.gov/api/POC/TableData?DataValueTypeId=CRDMEDN"
     }
   },
+  "table": {},
   "filterBehavior": "Apply Button",
   "runtime": {},
   "uuid": 1684783370106

package/src/components/CollapsibleVisualizationRow.tsx CHANGED Viewed

@@ -1,30 +1,28 @@
 import React, { useState, useEffect } from 'react'
 import Icon from '../../../core/components/ui/Icon'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 type CollapsableVizRow = {
   allExpanded: boolean
   children: React.ReactNode
-  fontSize: string
   groupName: string
   currentViewport: string
 }
 const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
   allExpanded,
-  fontSize,
   groupName,
   currentViewport,
   children
 }) => {
   const [isExpanded, setIsExpanded] = useState(allExpanded)
-  const titleFontSize = ['xs', 'xxs'].includes(currentViewport) ? '13px' : `${appFontSize}px`
+  const titleFontSize = ['xs', 'xxs'].includes(currentViewport) ? '13px' : `${APP_FONT_SIZE}px`
   useEffect(() => {
     setIsExpanded(allExpanded)
   }, [allExpanded])
   return (
-    <>
+    <div className='collapsable-multiviz-container'>
       <div
         style={{ fontSize: titleFontSize }}
         role='button'
@@ -43,7 +41,7 @@ const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
         {groupName}
       </div>
       {isExpanded && children}
-    </>
+    </div>
   )
 }