@cdc/dashboard 4.25.8 → 4.25.11

package/src/components/DataDesignerModal.tsx

@@ -1,210 +1,227 @@
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-import DataDesigner from '@cdc/core/components/managers/DataDesigner'
-import { useContext, useMemo, useState } from 'react'
-import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
-import Modal from '@cdc/core/components/ui/Modal'
-import Loader from '@cdc/core/components/Loader'
-import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
-import Tooltip from '@cdc/core/components/ui/Tooltip'
-import _ from 'lodash'
-import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-import DataTransform from '@cdc/core/helpers/DataTransform'
-import { ConfigureData } from '@cdc/core/types/ConfigureData'
-import Icon from '@cdc/core/components/ui/Icon'
-import InputSelect from '@cdc/core/components/inputs/InputSelect'
-
-type DataDesignerModalProps = {
-  rowIndex: number
-  vizKey?: string
-}
-
-export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, rowIndex }) => {
-  const { config } = useContext(DashboardContext)
-  const { overlay } = useGlobalContext()
-  const transform = new DataTransform()
-  const dispatch = useContext(DashboardDispatchContext)
-  const [canContinue, setCanContinue] = useState(false)
-  const [useRow, setUseRow] = useState(!vizKey)
-  const [multiViz, setMultiViz] = useState(!!config.rows[rowIndex].multiVizColumn)
-  const [errorMessage, setErrorMessage] = useState('')
-  const [loadingAPIData, setLoadingAPIData] = useState(false)
-
-  const isUpdatingVisualization = useMemo(() => {
-    return !!vizKey && !useRow
-  }, [vizKey, useRow])
-
-  const configureData = useMemo(() => {
-    if (isUpdatingVisualization) {
-      return config.visualizations[vizKey]
-    }
-    return config.rows[rowIndex]
-  }, [config.visualizations, config.rows, rowIndex, isUpdatingVisualization])
-
-  const fetchData = async datasetKey => {
-    const { data, dataUrl } = config.datasets[datasetKey]
-    if (!dataUrl) return data
-    let newData = data
-    const noCachedData = dataUrl && !data
-    const dataSetChanged = datasetKey !== configureData.dataKey
-    setErrorMessage('')
-    if (dataSetChanged || noCachedData) {
-      setLoadingAPIData(true)
-      try {
-        newData = await fetchRemoteData(dataUrl)
-        newData = transform.autoStandardize(newData)
-      } catch (e) {
-        setErrorMessage('There was an issue loading the data source. Please check the datasource URL and try again.')
-      }
-
-      setLoadingAPIData(false)
-    }
-    return newData
-  }
-
-  const updateConfigureData = (newConfigureData: Partial<ConfigureData>) => {
-    if (isUpdatingVisualization) {
-      dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey, configureData: newConfigureData } })
-    } else {
-      dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: newConfigureData } })
-    }
-  }
-
-  const removeDatasetsFromVisualizations = () => {
-    const columnVisualizations = config.rows[rowIndex].columns.map(column => column.widget).filter(Boolean)
-    columnVisualizations.forEach(currentVisualizationKey => {
-      dispatch({ type: 'RESET_VISUALIZATION', payload: { vizKey: currentVisualizationKey } })
-    })
-  }
-
-  const changeDataset = async ({ target: { value } }) => {
-    if (!isUpdatingVisualization) removeDatasetsFromVisualizations()
-    const newData = value === '' ? {} : await fetchData(value)
-    const newConfigureData = {
-      dataDescription: {
-        horizontal: false
-      },
-      formattedData: undefined,
-      dataKey: value,
-      data: newData
-    } as ConfigureData
-    updateConfigureData(newConfigureData)
-  }
-
-  const updateDescriptionProp = async (key, value) => {
-    const datasetKey = configureData.dataKey
-    const newData = configureData.data || (await fetchData(datasetKey))
-
-    const dataDescription = { ...configureData.dataDescription, [key]: value }
-
-    const newConfigureData = {
-      data: newData,
-      dataDescription,
-      formattedData: transform.developerStandardize(newData, dataDescription)
-    }
-
-    updateConfigureData(newConfigureData)
-    setCanContinue(true)
-  }
-
-  const setMultiVizColumn = (column: string) => {
-    if (column !== '') {
-      dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: { multiVizColumn: column } } })
-      setCanContinue(true)
-    }
-  }
-
-  const setExpandCollapseAllButtons = (selection: boolean) => {
-    dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: { expandCollapseAllButtons: selection } } })
-    setCanContinue(true)
-  }
-
-  return (
-    <Modal>
-      <Modal.Content>
-        {loadingAPIData && <Loader fullScreen />}
-        <div className='dataset-selector-container'>
-          Select a dataset:&nbsp;
-          <select className='dataset-selector' value={configureData.dataKey || ''} onChange={changeDataset}>
-            <option value=''>Select a dataset</option>
-            {config.datasets &&
-              Object.keys(config.datasets).map(datasetKey => <option key={datasetKey}>{datasetKey}</option>)}
-          </select>
-          {vizKey && (
-            // only shows for visualizations
-            <CheckBox
-              label='Apply To Row'
-              value={useRow}
-              updateField={(section, subsection, fieldName, value) => {
-                setUseRow(value)
-                changeDataset({ target: { value: configureData.dataKey } })
-              }}
-            />
-          )}
-        </div>
-        {errorMessage && <p className='text-danger'>{errorMessage}</p>}
-        {configureData.dataKey && (
-          <DataDesigner
-            {...{
-              configureData,
-              visualizationKey: vizKey,
-              updateDescriptionProp
-            }}
-          />
-        )}
-        {useRow && !!configureData.dataKey ? (
-          !multiViz ? (
-            <CheckBox
-              label='Configure Multiple Visualizations'
-              value={multiViz}
-              tooltip={
-                <Tooltip style={{ textTransform: 'none' }}>
-                  <Tooltip.Target>
-                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                  </Tooltip.Target>
-                  <Tooltip.Content>
-                    <p>
-                      You can select a column where for each unique value in the column the configuration for the row
-                      will be repeated in to the data preview.
-                    </p>
-                  </Tooltip.Content>
-                </Tooltip>
-              }
-              updateField={(section, subsection, fieldName, value) => {
-                if (canContinue && value === true) setCanContinue(false)
-                setMultiViz(value)
-              }}
-            />
-          ) : (
-            <>
-              <InputSelect
-                options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})}
-                value={config.rows[rowIndex].multiVizColumn}
-                label='Multi-Visualization Column'
-                initial='--Select--'
-                updateField={(section, subsection, fieldName, value) => setMultiVizColumn(value)}
-                required
-              />
-              <CheckBox
-                value={config.rows[rowIndex].expandCollapseAllButtons}
-                label=' Add Expand/Collapse All buttons'
-                fieldName=''
-                updateField={(section, subsection, fieldName, value) => setExpandCollapseAllButtons(value)}
-              />
-            </>
-          )
-        ) : (
-          <></>
-        )}
-        {canContinue && (
-          <button
-            style={{ margin: '1em', display: 'block' }}
-            className='cove-button'
-            onClick={() => overlay?.actions.toggleOverlay()}
-          >
-            Continue
-          </button>
-        )}
-      </Modal.Content>
-    </Modal>
-  )
-}
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import DataDesigner from '@cdc/core/components/managers/DataDesigner'
+import { useContext, useMemo, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import Loader from '@cdc/core/components/Loader'
+import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import _ from 'lodash'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import { ConfigureData } from '@cdc/core/types/ConfigureData'
+import Icon from '@cdc/core/components/ui/Icon'
+
+type DataDesignerModalProps = {
+  rowIndex: number
+  vizKey?: string
+}
+
+export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, rowIndex }) => {
+  const { config } = useContext(DashboardContext)
+  const { overlay } = useGlobalContext()
+  const transform = new DataTransform()
+  const dispatch = useContext(DashboardDispatchContext)
+  const [canContinue, setCanContinue] = useState(false)
+  const [useRow, setUseRow] = useState(!vizKey)
+  const [multiViz, setMultiViz] = useState(!!config.rows[rowIndex].multiVizColumn)
+  const [errorMessage, setErrorMessage] = useState('')
+  const [loadingAPIData, setLoadingAPIData] = useState(false)
+
+  const isUpdatingVisualization = useMemo(() => {
+    return !!vizKey && !useRow
+  }, [vizKey, useRow])
+
+  const configureData = useMemo(() => {
+    let baseConfig
+    if (isUpdatingVisualization) {
+      baseConfig = config.visualizations[vizKey]
+    } else {
+      baseConfig = config.rows[rowIndex]
+    }
+
+    // Directly attach data from datasets
+    const data = baseConfig?.dataKey ? config.datasets[baseConfig.dataKey]?.data : undefined
+
+    return {
+      ...baseConfig,
+      data
+    }
+  }, [config.visualizations, config.datasets, config.rows, rowIndex, isUpdatingVisualization])
+
+  const fetchData = async datasetKey => {
+    const { data, dataUrl } = config.datasets[datasetKey]
+    if (!dataUrl) return data
+    let newData = data
+    const noCachedData = dataUrl && !data
+    const dataSetChanged = datasetKey !== configureData.dataKey
+    setErrorMessage('')
+    if (dataSetChanged || noCachedData) {
+      setLoadingAPIData(true)
+      try {
+        newData = await fetchRemoteData(dataUrl)
+        newData = transform.autoStandardize(newData)
+      } catch (e) {
+        setErrorMessage('There was an issue loading the data source. Please check the datasource URL and try again.')
+      }
+
+      setLoadingAPIData(false)
+    }
+    return newData
+  }
+
+  const updateConfigureData = (newConfigureData: Partial<ConfigureData>) => {
+    if (isUpdatingVisualization) {
+      dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey, configureData: newConfigureData } })
+    } else {
+      dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: newConfigureData } })
+    }
+  }
+
+  const removeDatasetsFromVisualizations = () => {
+    const columnVisualizations = config.rows[rowIndex].columns.map(column => column.widget).filter(Boolean)
+    columnVisualizations.forEach(currentVisualizationKey => {
+      dispatch({ type: 'RESET_VISUALIZATION', payload: { vizKey: currentVisualizationKey } })
+    })
+  }
+
+  const changeDataset = async ({ target: { value } }) => {
+    if (!isUpdatingVisualization) removeDatasetsFromVisualizations()
+    const newData = value === '' ? {} : await fetchData(value)
+    const newConfigureData = {
+      dataDescription: {
+        horizontal: false
+      },
+      formattedData: undefined,
+      dataKey: value,
+      data: newData
+    } as ConfigureData
+    updateConfigureData(newConfigureData)
+  }
+
+  const updateDescriptionProp = async (key, value) => {
+    const datasetKey = configureData.dataKey
+    const newData = configureData.data || (await fetchData(datasetKey))
+
+    const dataDescription = { ...configureData.dataDescription, [key]: value }
+
+    const newConfigureData = {
+      data: newData,
+      dataDescription,
+      formattedData: transform.developerStandardize(newData, dataDescription)
+    }
+
+    updateConfigureData(newConfigureData)
+    setCanContinue(true)
+  }
+
+  const setMultiVizColumn = (column: string) => {
+    if (column !== '') {
+      dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: { multiVizColumn: column } } })
+      setCanContinue(true)
+    }
+  }
+
+  const setExpandCollapseAllButtons = (selection: boolean) => {
+    dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: { expandCollapseAllButtons: selection } } })
+    setCanContinue(true)
+  }
+
+  return (
+    <Modal>
+      <Modal.Content>
+        {loadingAPIData && <Loader fullScreen />}
+        <div className='dataset-selector-container'>
+          Select a dataset:&nbsp;
+          <select
+            className='dataset-selector cove-form-select'
+            value={configureData.dataKey || ''}
+            onChange={changeDataset}
+          >
+            <option value=''>Select a dataset</option>
+            {config.datasets &&
+              Object.keys(config.datasets).map(datasetKey => (
+                <option key={datasetKey} value={datasetKey}>
+                  {datasetKey}
+                </option>
+              ))}
+          </select>
+          {vizKey && (
+            // only shows for visualizations
+            <CheckBox
+              label='Apply To Row'
+              value={useRow}
+              updateField={(section, subsection, fieldName, value) => {
+                setUseRow(value)
+                changeDataset({ target: { value: configureData.dataKey } })
+              }}
+            />
+          )}
+        </div>
+        {errorMessage && <p className='text-danger'>{errorMessage}</p>}
+        {configureData.dataKey && (
+          <DataDesigner
+            {...{
+              configureData,
+              visualizationKey: vizKey,
+              updateDescriptionProp
+            }}
+          />
+        )}
+        {useRow && !!configureData.dataKey ? (
+          !multiViz ? (
+            <CheckBox
+              label='Configure Multiple Visualizations'
+              value={multiViz}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      You can select a column where for each unique value in the column the configuration for the row
+                      will be repeated in to the data preview.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              updateField={(section, subsection, fieldName, value) => {
+                if (canContinue && value === true) setCanContinue(false)
+                setMultiViz(value)
+              }}
+            />
+          ) : (
+            <>
+              <Select
+                options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})}
+                value={config.rows[rowIndex].multiVizColumn}
+                label='Multi-Visualization Column'
+                initial='--Select--'
+                updateField={(section, subsection, fieldName, value) => setMultiVizColumn(value)}
+                required
+              />
+              <CheckBox
+                value={config.rows[rowIndex].expandCollapseAllButtons}
+                label=' Add Expand/Collapse All buttons'
+                fieldName=''
+                updateField={(section, subsection, fieldName, value) => setExpandCollapseAllButtons(value)}
+              />
+            </>
+          )
+        ) : (
+          <></>
+        )}
+        {canContinue && (
+          <button
+            style={{ margin: '1em', display: 'block' }}
+            className='cove-button'
+            onClick={() => overlay?.actions.toggleOverlay()}
+          >
+            Continue
+          </button>
+        )}
+      </Modal.Content>
+    </Modal>
+  )
+}

package/src/components/Header/Header.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useContext } from 'react'
-
+import { useContext, useRef } from 'react'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
 import './index.scss'
@@ -20,7 +20,7 @@ const Header = (props: HeaderProps) => {
   const dispatch = useContext(DashboardDispatchContext)
   const back = () => {
     if (!visualizationKey) return
-    const newConfig = _.cloneDeep(config)
+    const newConfig = cloneConfig(config)
     newConfig.visualizations[visualizationKey].editing = false
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
 
@@ -49,28 +49,29 @@ const Header = (props: HeaderProps) => {
   }
 
   const convertStateToConfig = () => {
-    const strippedState = _.cloneDeep(config)
+    const strippedState = cloneConfig(config)
     delete strippedState.newViz
     delete strippedState.runtime
 
     return strippedState
   }
 
-  useEffect(() => {
-    const parsedData = convertStateToConfig()
+  const configStringRef = useRef<string>()
 
-    // Emit the data in a regular JS event so it can be consumed by anything.
-    const event = new CustomEvent('updateVizConfig', { detail: JSON.stringify(parsedData) })
+  // Only update parent when config content actually changes (not just reference)
+  const configString = JSON.stringify(convertStateToConfig())
+  if (configStringRef.current !== configString) {
+    configStringRef.current = configString
 
+    // Emit the data in a regular JS event so it can be consumed by anything.
+    const event = new CustomEvent('updateVizConfig', { detail: configString })
     window.dispatchEvent(event)
 
     // Pass up to Editor if needed
     if (setParentConfig) {
-      setParentConfig(parsedData)
+      setParentConfig(JSON.parse(configString))
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config])
+  }
 
   const handleCheck = e => {
     const { checked } = e.currentTarget

package/src/components/Toggle/Toggle.tsx

@@ -1,47 +1,48 @@
-import { ConfigRow } from '../../types/ConfigRow'
-import { AnyVisualization } from '@cdc/core/types/Visualization'
-import { getIcon } from '../../helpers/iconHash'
-import { labelHash } from '@cdc/core/helpers/labelHash'
-import './toggle-style.css'
-import _ from 'lodash'
-
-type ToggleProps = {
-  active: number
-  row: ConfigRow
-  visualizations: Record<string, AnyVisualization>
-  setToggled: (colIndex: number) => void
-}
-const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled, text }) => {
-  const selectItem = (colIndex, e = null) => {
-    if (e?.key && e.key !== 'Enter') return
-    setToggled(colIndex)
-  }
-
-  return (
-    <div className='toggle-component'>
-      {row.columns.map((col, colIndex) => {
-        if (!col.widget) return null
-        const type = visualizations[col.widget].type
-        // Get the column toggele Text or default to the type
-        const text = col.toggleName ? col.toggleName : labelHash[type]
-        const selected = colIndex === active
-        return (
-          <div
-            role='radio'
-            className={selected ? 'selected' : ''}
-            key={colIndex}
-            onClick={() => selectItem(colIndex)}
-            onKeyUp={e => selectItem(colIndex, e)}
-            aria-checked={selected}
-            tabIndex={0}
-            aria-label={`Toggle ${type}`}
-          >
-            {getIcon(visualizations[col.widget])} <span>{text}</span>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-export default Toggle
+import { ConfigRow } from '../../types/ConfigRow'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { getIcon } from '../../helpers/iconHash'
+import { labelHash } from '@cdc/core/helpers/labelHash'
+import './toggle-style.css'
+import _ from 'lodash'
+
+type ToggleProps = {
+  active: number
+  row: ConfigRow
+  visualizations: Record<string, AnyVisualization>
+  setToggled: (colIndex: number) => void
+}
+const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled, text }) => {
+  const selectItem = (colIndex, e = null) => {
+    if (e?.key && e.key !== 'Enter' && e.key !== ' ') return
+    if (e?.key === ' ') e.preventDefault() // Prevent page scroll
+    setToggled(colIndex)
+  }
+
+  return (
+    <div className='toggle-component' role='radiogroup' aria-label='Visualization options'>
+      {row.columns.map((col, colIndex) => {
+        if (!col.widget) return null
+        const type = visualizations[col.widget].type
+        // Get the column toggele Text or default to the type
+        const text = col.toggleName ? col.toggleName : labelHash[type]
+        const selected = colIndex === active
+        return (
+          <div
+            role='radio'
+            className={selected ? 'selected' : ''}
+            key={colIndex}
+            onClick={() => selectItem(colIndex)}
+            onKeyUp={e => selectItem(colIndex, e)}
+            aria-checked={selected}
+            tabIndex={0}
+            aria-label={`Toggle ${text}`}
+          >
+            <span aria-hidden='true'>{getIcon(visualizations[col.widget])}</span> <span>{text}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Toggle

package/src/components/VisualizationRow.tsx

@@ -20,6 +20,7 @@ import CdcChart from '@cdc/chart/src/CdcChartComponent'
 import ExpandCollapseButtons from './ExpandCollapseButtons'
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type VisualizationWrapperProps = {
   allExpanded: boolean
@@ -196,12 +197,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               href={`#data-table-${dataKey}`}
               className='margin-left-href'
               onClick={() => {
-                publishAnalyticsEvent(
-                  `link_to_data_table_click`,
-                  'click',
-                  `${interactionLabel}|#data-table-${dataKey}`,
-                  visualizationConfig.type
-                )
+                publishAnalyticsEvent({
+                  vizType: visualizationConfig.type,
+                  vizSubType: getVizSubType(visualizationConfig),
+                  eventType: `link_to_data_table_click`,
+                  eventAction: 'click',
+                  eventLabel: `${interactionLabel}`,
+                  vizTitle: getVizTitle(visualizationConfig),
+                  specifics: `table: #data-table-${dataKey}`
+                })
               }}
             >
               {dataKey} (Go to Table)
@@ -277,6 +281,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                     updateChildConfig(col.widget, newConfig)
                   }}
                   isDashboard={true}
+                  interactionLabel={interactionLabel}
                 />
               )}
               {type === 'waffle-chart' && (
@@ -294,10 +299,12 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                 <CdcMarkupInclude
                   key={col.widget}
                   config={visualizationConfig}
+                  datasets={config.datasets}
                   isDashboard={true}
                   setConfig={newConfig => {
                     updateChildConfig(col.widget, newConfig)
                   }}
+                  interactionLabel={interactionLabel}
                 />
               )}
               {type === 'filtered-text' && (