@cdc/dashboard 4.25.3 → 4.25.6-1

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -1,198 +1,198 @@
-import { useContext, useState } from 'react'
-import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
-import Filters from './DashboardFilters'
-import { changeFilterActive } from '../../helpers/changeFilterActive'
-import _ from 'lodash'
-import { FilterBehavior } from '../../helpers/FilterBehavior'
-import { getFilteredData } from '../../helpers/getFilteredData'
-import { DashboardFilters } from '../../types/DashboardFilters'
-import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
-import Layout from '@cdc/core/components/Layout'
-import DashboardFiltersEditor from './DashboardFiltersEditor'
-import { ViewPort } from '@cdc/core/types/ViewPort'
-import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
-import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
-import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
-import './dashboardfilter.styles.css'
-import { updateChildFilters } from '../../helpers/updateChildFilters'
-
-type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
-
-export type DropdownOptions = (Record<'value' | 'text', string> & SubOptions)[]
-
-/** the cached dropdown options for each filter */
-export type APIFilterDropdowns = {
-  // null means still loading
-  [dropdownsKey: string]: null | DropdownOptions
-}
-
-type DashboardFiltersProps = {
-  apiFilterDropdowns: APIFilterDropdowns
-  visualizationConfig: DashboardFilters
-  isEditor?: boolean
-  setConfig: (config: DashboardFilters) => void
-  currentViewport?: ViewPort
-}
-
-const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
-  apiFilterDropdowns,
-  visualizationConfig,
-  setConfig: updateConfig,
-  currentViewport,
-  isEditor = false
-}) => {
-  const state = useContext(DashboardContext)
-  const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns, setAPILoading } = state
-  const dispatch = useContext(DashboardDispatchContext)
-
-  const applyFilters = e => {
-    e.preventDefault() // prevent form submission
-    const dashboardConfig = _.cloneDeep(state.config.dashboard)
-    const nonAutoLoadFilterIndexes = Object.values(state.config.visualizations)
-      .filter(v => v.type === 'dashboardFilters')
-      .reduce((acc, viz: DashboardFilters) => (!viz.autoLoad ? [...acc, viz.sharedFilterIndexes] : acc), [])
-    const allRequiredFiltersSelected = !dashboardConfig.sharedFilters.some((filter, filterIndex) => {
-      if (nonAutoLoadFilterIndexes.includes(filterIndex)) {
-        return !filter.active && !filter.queuedActive
-      } else {
-        // autoload filters don't need to be selected to apply filters
-        return false
-      }
-    })
-    if (allRequiredFiltersSelected) {
-      if (hasDashboardApplyBehavior(state.config.visualizations)) {
-        const queryParams = getQueryParams()
-        let needsQueryUpdate = false
-        dashboardConfig.sharedFilters.forEach(sharedFilter => {
-          if (sharedFilter.queuedActive) applyQueuedActive(sharedFilter)
-          if (
-            sharedFilter.setByQueryParameter &&
-            queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active
-          ) {
-            queryParams[sharedFilter.setByQueryParameter] = Array.isArray(sharedFilter.active)
-              ? sharedFilter.active.join(',')
-              : sharedFilter.active
-            needsQueryUpdate = true
-          }
-        })
-
-        if (needsQueryUpdate) {
-          updateQueryString(queryParams)
-        }
-      }
-      setAPILoading(true)
-      dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
-      dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(_.cloneDeep(state)) })
-      loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns)
-        .then(newFilters => {
-          reloadURLData(newFilters)
-        })
-        .catch(e => {
-          console.error(e)
-        })
-    } else {
-      // TODO noftify of required fields
-    }
-  }
-
-  const handleOnChange = (index: number, value: string | string[]) => {
-    const newConfig = _.cloneDeep(dashboardConfig)
-    let [newSharedFilters, changedFilterIndexes] = changeFilterActive(
-      index,
-      value,
-      newConfig.dashboard.sharedFilters,
-      visualizationConfig
-    )
-
-    // sets the active filter option that the user just selected.
-    dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
-
-    if (hasDashboardApplyBehavior(dashboardConfig.visualizations)) {
-      const isAutoSelectFilter = visualizationConfig.autoLoad
-      const missingFilterSelections = newConfig.dashboard.sharedFilters.some(f => !f.active)
-      const apiEndpoints = newSharedFilters.filter(f => f.apiFilter).map(f => f.apiFilter.apiEndpoint)
-      const loadingFilterMemo = apiFilterHelpers.getLoadingFilterMemo(
-        apiEndpoints,
-        apiFilterDropdowns,
-        changedFilterIndexes
-      )
-      if (isAutoSelectFilter && !missingFilterSelections) {
-        // a dropdown has been selected that doesn't
-        // require the Go Button
-        setAPIFilterDropdowns(loadingFilterMemo)
-        loadAPIFilters(newSharedFilters, loadingFilterMemo).then(filters => {
-          reloadURLData(filters)
-        })
-      } else {
-        newSharedFilters[index].queuedActive = value
-        // setData to empty object because we no longer have a data state.
-        dispatch({ type: 'SET_DATA', payload: {} })
-        dispatch({ type: 'SET_FILTERED_DATA', payload: {} })
-        setAPIFilterDropdowns(loadingFilterMemo)
-        loadAPIFilters(newSharedFilters, loadingFilterMemo)
-      }
-    } else {
-      if (newSharedFilters[index].type === 'urlfilter' && newSharedFilters[index].apiFilter) {
-        reloadURLData(newSharedFilters)
-      } else {
-        const clonedState = _.cloneDeep(state)
-        clonedState.config.dashboard.sharedFilters = newSharedFilters
-        const newFilteredData = getFilteredData(clonedState)
-        dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-        dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
-      }
-    }
-  }
-  const [displayPanel, setDisplayPanel] = useState(true)
-  const onBackClick = () => {
-    setDisplayPanel(!displayPanel)
-    updateConfig({
-      ...visualizationConfig,
-      showEditorPanel: !displayPanel
-    })
-  }
-
-  // if all of the filters are hidden filters don't display the VisualizationWrapper
-  const filters = visualizationConfig?.sharedFilterIndexes
-    ?.map(Number)
-    .map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
-
-  const displayNone = filters.length ? filters.every(filter => filter.showDropdown === false) : false
-  if (displayNone && !isEditor) return <></>
-  return (
-    <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
-      {isEditor && (
-        <Layout.Sidebar
-          displayPanel={displayPanel}
-          isDashboard={true}
-          title={'Configure Dashboard Filters'}
-          onBackClick={onBackClick}
-        >
-          <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={visualizationConfig} />
-        </Layout.Sidebar>
-      )}
-
-      {!displayNone && (
-        <Layout.Responsive isEditor={isEditor}>
-          <div
-            className={`${
-              isEditor ? ' is-editor' : ''
-            } cove-component__content col-12 cove-dashboard-filters-container`}
-          >
-            <Filters
-              show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
-              filters={updateChildFilters(dashboardConfig.dashboard.sharedFilters, state.data) || []}
-              apiFilterDropdowns={apiFilterDropdowns}
-              handleOnChange={handleOnChange}
-              showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
-              applyFilters={applyFilters}
-              applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
-            />
-          </div>
-        </Layout.Responsive>
-      )}
-    </Layout.VisualizationWrapper>
-  )
-}
-
-export default DashboardFiltersWrapper
+import { useContext, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import Filters from './DashboardFilters'
+import { changeFilterActive } from '../../helpers/changeFilterActive'
+import _ from 'lodash'
+import { FilterBehavior } from '../../helpers/FilterBehavior'
+import { getFilteredData } from '../../helpers/getFilteredData'
+import { DashboardFilters } from '../../types/DashboardFilters'
+import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+import Layout from '@cdc/core/components/Layout'
+import DashboardFiltersEditor from './DashboardFiltersEditor'
+import { ViewPort } from '@cdc/core/types/ViewPort'
+import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
+import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
+import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
+import './dashboardfilter.styles.css'
+import { updateChildFilters } from '../../helpers/updateChildFilters'
+
+type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
+
+export type DropdownOptions = (Record<'value' | 'text', string> & SubOptions)[]
+
+/** the cached dropdown options for each filter */
+export type APIFilterDropdowns = {
+  // null means still loading
+  [dropdownsKey: string]: null | DropdownOptions
+}
+
+type DashboardFiltersProps = {
+  apiFilterDropdowns: APIFilterDropdowns
+  visualizationConfig: DashboardFilters
+  isEditor?: boolean
+  setConfig: (config: DashboardFilters) => void
+  currentViewport?: ViewPort
+}
+
+const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
+  apiFilterDropdowns,
+  visualizationConfig,
+  setConfig: updateConfig,
+  currentViewport,
+  isEditor = false
+}) => {
+  const state = useContext(DashboardContext)
+  const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns, setAPILoading } = state
+  const dispatch = useContext(DashboardDispatchContext)
+
+  const applyFilters = e => {
+    e.preventDefault() // prevent form submission
+    const dashboardConfig = _.cloneDeep(state.config.dashboard)
+    const nonAutoLoadFilterIndexes = Object.values(state.config.visualizations)
+      .filter(v => v.type === 'dashboardFilters')
+      .reduce((acc, viz: DashboardFilters) => (!viz.autoLoad ? [...acc, viz.sharedFilterIndexes] : acc), [])
+    const allRequiredFiltersSelected = !dashboardConfig.sharedFilters.some((filter, filterIndex) => {
+      if (nonAutoLoadFilterIndexes.includes(filterIndex)) {
+        return !filter.active && !filter.queuedActive
+      } else {
+        // autoload filters don't need to be selected to apply filters
+        return false
+      }
+    })
+    if (allRequiredFiltersSelected) {
+      if (hasDashboardApplyBehavior(state.config.visualizations)) {
+        const queryParams = getQueryParams()
+        let needsQueryUpdate = false
+        dashboardConfig.sharedFilters.forEach(sharedFilter => {
+          if (sharedFilter.queuedActive) applyQueuedActive(sharedFilter)
+          if (
+            sharedFilter.setByQueryParameter &&
+            queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active
+          ) {
+            queryParams[sharedFilter.setByQueryParameter] = Array.isArray(sharedFilter.active)
+              ? sharedFilter.active.join(',')
+              : sharedFilter.active
+            needsQueryUpdate = true
+          }
+        })
+
+        if (needsQueryUpdate) {
+          updateQueryString(queryParams)
+        }
+      }
+      setAPILoading(true)
+      dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
+      dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(_.cloneDeep(state)) })
+      loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns)
+        .then(newFilters => {
+          reloadURLData(newFilters)
+        })
+        .catch(e => {
+          console.error(e)
+        })
+    } else {
+      // TODO noftify of required fields
+    }
+  }
+
+  const handleOnChange = (index: number, value: string | string[]) => {
+    const newConfig = _.cloneDeep(dashboardConfig)
+    let [newSharedFilters, changedFilterIndexes] = changeFilterActive(
+      index,
+      value,
+      newConfig.dashboard.sharedFilters,
+      visualizationConfig
+    )
+
+    // sets the active filter option that the user just selected.
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+
+    if (hasDashboardApplyBehavior(dashboardConfig.visualizations)) {
+      const isAutoSelectFilter = visualizationConfig.autoLoad
+      const missingFilterSelections = newConfig.dashboard.sharedFilters.some(f => !f.active)
+      const apiEndpoints = newSharedFilters.filter(f => f.apiFilter).map(f => f.apiFilter.apiEndpoint)
+      const loadingFilterMemo = apiFilterHelpers.getLoadingFilterMemo(
+        apiEndpoints,
+        apiFilterDropdowns,
+        changedFilterIndexes
+      )
+      if (isAutoSelectFilter && !missingFilterSelections) {
+        // a dropdown has been selected that doesn't
+        // require the Go Button
+        setAPIFilterDropdowns(loadingFilterMemo)
+        loadAPIFilters(newSharedFilters, loadingFilterMemo).then(filters => {
+          reloadURLData(filters)
+        })
+      } else {
+        newSharedFilters[index].queuedActive = value
+        // setData to empty object because we no longer have a data state.
+        dispatch({ type: 'SET_DATA', payload: {} })
+        dispatch({ type: 'SET_FILTERED_DATA', payload: {} })
+        setAPIFilterDropdowns(loadingFilterMemo)
+        loadAPIFilters(newSharedFilters, loadingFilterMemo)
+      }
+    } else {
+      if (newSharedFilters[index].type === 'urlfilter' && newSharedFilters[index].apiFilter) {
+        reloadURLData(newSharedFilters)
+      } else {
+        const clonedState = _.cloneDeep(state)
+        clonedState.config.dashboard.sharedFilters = newSharedFilters
+        const newFilteredData = getFilteredData(clonedState)
+        dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+      }
+    }
+  }
+  const [displayPanel, setDisplayPanel] = useState(true)
+  const onBackClick = () => {
+    setDisplayPanel(!displayPanel)
+    updateConfig({
+      ...visualizationConfig,
+      showEditorPanel: !displayPanel
+    })
+  }
+
+  // if all of the filters are hidden filters don't display the VisualizationWrapper
+  const filters = visualizationConfig?.sharedFilterIndexes
+    ?.map(Number)
+    .map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
+
+  const displayNone = filters.length ? filters.every(filter => filter.showDropdown === false) : false
+  if (displayNone && !isEditor) return <></>
+  return (
+    <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
+      {isEditor && (
+        <Layout.Sidebar
+          displayPanel={displayPanel}
+          isDashboard={true}
+          title={'Configure Dashboard Filters'}
+          onBackClick={onBackClick}
+        >
+          <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={visualizationConfig} />
+        </Layout.Sidebar>
+      )}
+
+      {!displayNone && (
+        <Layout.Responsive isEditor={isEditor}>
+          <div
+            className={`${
+              isEditor ? ' is-editor' : ''
+            } cove-component__content col-12 cove-dashboard-filters-container`}
+          >
+            <Filters
+              show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
+              filters={updateChildFilters(dashboardConfig.dashboard.sharedFilters, state.data) || []}
+              apiFilterDropdowns={apiFilterDropdowns}
+              handleOnChange={handleOnChange}
+              showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
+              applyFilters={applyFilters}
+              applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
+            />
+          </div>
+        </Layout.Responsive>
+      )}
+    </Layout.VisualizationWrapper>
+  )
+}
+
+export default DashboardFiltersWrapper

package/src/components/DataDesignerModal.tsx

@@ -29,20 +29,16 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
   const [errorMessage, setErrorMessage] = useState('')
   const [loadingAPIData, setLoadingAPIData] = useState(false)
 
+  const isUpdatingVisualization = useMemo(() => {
+    return !!vizKey && !useRow
+  }, [vizKey, useRow])
+
   const configureData = useMemo(() => {
-    if (vizKey && !useRow) {
+    if (isUpdatingVisualization) {
       return config.visualizations[vizKey]
     }
     return config.rows[rowIndex]
-  }, [config.visualizations, config.rows, vizKey, rowIndex, useRow])
-
-  const updateConfigureData = (newConfigureData: Partial<ConfigureData>) => {
-    if (vizKey && !useRow) {
-      dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey, configureData: newConfigureData } })
-    } else {
-      dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: newConfigureData } })
-    }
-  }
+  }, [config.visualizations, config.rows, rowIndex, isUpdatingVisualization])
 
   const fetchData = async datasetKey => {
     const { data, dataUrl } = config.datasets[datasetKey]
@@ -65,10 +61,32 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
     return newData
   }
 
-  const changeDataset = async ({ target: { value } }) => {
-    const newData = await fetchData(value)
-    const newConfigureData = { dataDescription: {}, formattedData: undefined, dataKey: value, data: 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)
   }
 
@@ -112,12 +130,13 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
               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: '' } })
+                changeDataset({ target: { value: configureData.dataKey } })
               }}
             />
           )}

package/src/components/Header/Header.tsx

@@ -9,7 +9,7 @@ import _ from 'lodash'
 
 type HeaderProps = {
   back?: any
-  subEditor?: any
+  subEditor?: boolean
   visualizationKey?: string
 }
 
@@ -96,14 +96,12 @@ const Header = (props: HeaderProps) => {
             multidashboard
           </span>
           <br />
-          {
-            <input
-              type='text'
-              placeholder='Enter Dashboard Name Here'
-              defaultValue={config.dashboard?.title}
-              onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
-            />
-          }
+          <input
+            type='text'
+            placeholder='Enter Dashboard Name Here'
+            defaultValue={config.dashboard?.title}
+            onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
+          />
         </div>
       )}
       {!subEditor && (

package/src/components/MultiConfigTabs/multiconfigtabs.styles.css

@@ -4,6 +4,9 @@
     font-weight: 400;
     display: block;
     padding: 0.5rem 1rem;
+    @media (max-width: 480px) {
+      padding: 0.5rem 0.8rem;
+    }
     color: var(--primary);
     border-color: var(--lightGray);
     :is(button) {

package/src/components/Row.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useState } from 'react'
+import React, { useContext, useMemo } from 'react'
 
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
@@ -215,30 +215,11 @@ type RowProps = { row: ConfigRow; idx: number; uuid: number | string }
 
 const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
   const { overlay } = useGlobalContext()
-  const dispatch = useContext(DashboardDispatchContext)
-
-  const configureFootnotes = () => {
-    if (!row.footnotesId) {
-      const type = 'footnotes'
-      const uid = type + Date.now()
-      const newVisualizationConfig = {
-        uid,
-        type,
-        visualizationType: type,
-        editing: true
-      }
-      dispatch({
-        type: 'ADD_FOOTNOTE',
-        payload: { id: uid, rowIndex: rowIdx, config: newVisualizationConfig as Visualization }
-      })
-    } else {
-      dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: row.footnotesId, configureData: { editing: true } } })
-    }
-  }
   return (
     <>
       <div className='builder-row' data-row-id={rowIdx}>
         <RowMenu rowIdx={rowIdx} />
+        <span className='ms-2 mt-n3'>Row - {rowIdx + 1}</span>
         <button
           title='Configure Data'
           className='btn btn-configure-row'
@@ -261,9 +242,6 @@ const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
               />
             ))}
         </div>
-        <button className='btn btn-primary footnotes' onClick={configureFootnotes}>
-          {row.footnotesId ? 'Edit' : 'Add'} Footnotes
-        </button>
       </div>
     </>
   )