@cdc/dashboard 4.25.8 → 4.25.11

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -7,6 +7,7 @@ import { DashboardContext, DashboardDispatchContext } from '../../DashboardConte
 import { mapDataToConfig } from '../../helpers/mapDataToConfig'
 import './visualizations-panel-styles.css'
 import { MultiDashboardConfig } from '../../types/MultiDashboard'
+import { stripConfig } from '../../helpers/formatConfigBeforeSave'
 
 const addVisualization = (type, subType) => {
   const modalWillOpen = type !== 'markup-include'
@@ -123,6 +124,7 @@ const VisualizationsPanel = () => {
         loadConfig={loadConfig}
         config={config}
         convertStateToConfig={() => undefined}
+        stripConfig={stripConfig}
         onExpandCollapse={() => {
           setAdvancedEditing(!advancedEditing)
         }}

package/src/components/Widget/Widget.tsx

@@ -15,6 +15,7 @@ import './widget.styles.css'
 type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number }
 type WidgetProps = {
   title: string
+  columnData?: any
   widgetConfig?: WidgetConfig
   addVisualization?: Function
   type: string
@@ -32,7 +33,7 @@ const Widget = ({
   toggleRow = false
 }: WidgetProps) => {
   const { overlay } = useGlobalContext()
-  const { config, data } = useContext(DashboardContext)
+  const { config, data, isEditor } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
 
   const [isEditing, setIsEditing] = useState(false)
@@ -79,25 +80,42 @@ const Widget = ({
   }
 
   const changeDataLimit = (dataUrl, limit) => {
-    const url = new URL(dataUrl)
-    url.searchParams.set('$limit', limit)
-    // Replace encoded $ with actual $ for the URL
-    return url.href.replace(/%24/g, '$')
+    if (!dataUrl || typeof dataUrl !== 'string') {
+      console.error('Invalid dataUrl provided to changeDataLimit:', dataUrl)
+      return null
+    }
+
+    try {
+      // Handle relative URLs by resolving them against the current base URL
+      const url = new URL(dataUrl, window.location.origin)
+      url.searchParams.set('$limit', limit)
+      // Replace encoded $ with actual $ for the URL
+      return url.href.replace(/%24/g, '$')
+    } catch (error) {
+      console.error('Failed to construct URL from dataUrl:', dataUrl, error)
+      return null
+    }
   }
 
   const loadSampleData = () => {
     const dataKey = config.rows[widgetConfig.rowIdx]?.dataKey || widgetConfig?.dataKey
     const dataset = config.datasets[dataKey]
     const _data = data[dataKey]
-    if (dataKey && !_data?.length) {
+    if (dataKey && !_data?.length && dataset?.dataUrl) {
       const url = changeDataLimit(dataset.dataUrl, 100)
-      fetchRemoteData(url).then(responseData => {
-        // this sample data is temporary.
-        // the HEADER component removes the data when you toggle to the main viz panel.
-        // data will be cached only when it's loaded via dashboard preview.
-        responseData.sample = true
-        dispatch({ type: 'SET_DATA', payload: { ...data, [dataKey]: responseData } })
-      })
+      if (url) {
+        fetchRemoteData(url)
+          .then(responseData => {
+            // this sample data is temporary.
+            // the HEADER component removes the data when you toggle to the main viz panel.
+            // data will be cached only when it's loaded via dashboard preview.
+            responseData.sample = true
+            dispatch({ type: 'SET_DATA', payload: { ...data, [dataKey]: responseData } })
+          })
+          .catch(error => {
+            console.error('Failed to fetch sample data:', error)
+          })
+      }
     }
   }
 
@@ -117,11 +135,22 @@ const Widget = ({
   } else {
     if (widgetConfig?.formattedData) {
       isConfigurationReady = true
-    } else if (widgetConfig?.dataKey && widgetConfig?.dataDescription && config.datasets[widgetConfig.dataKey]) {
-      const formattedDataAttempt = transform.autoStandardize(config.datasets[widgetConfig.dataKey].data)
-      const canFormatData = !!transform.developerStandardize(formattedDataAttempt, widgetConfig.dataDescription)
-      if (canFormatData) {
-        isConfigurationReady = true
+    } else if (widgetConfig?.dataKey && widgetConfig?.dataDescription) {
+      // In editor mode, having a dataKey and dataDescription is sufficient
+      // In non-editor mode, also check if data is actually loaded
+      if (isEditor || config.datasets[widgetConfig.dataKey]?.data) {
+        const dataToCheck = config.datasets[widgetConfig.dataKey]?.data
+        if (dataToCheck) {
+          const formattedDataAttempt = transform.autoStandardize(dataToCheck)
+          const canFormatData = !!transform.developerStandardize(formattedDataAttempt, widgetConfig.dataDescription)
+          if (canFormatData) {
+            isConfigurationReady = true
+          }
+        } else {
+          // In editor mode, if dataKey and dataDescription are configured but data isn't loaded yet,
+          // still mark as ready so the tools icon shows
+          isConfigurationReady = true
+        }
       }
     }
   }

package/src/helpers/addValuesToDashboardFilters.ts

@@ -1,60 +1,111 @@
-import _ from 'lodash'
-import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
-import { SharedFilter } from '../types/SharedFilter'
-import { handleSorting } from '@cdc/core/components/Filters'
-
-// Gets filter values from dataset
-const generateValuesForFilter = (columnName: string, data: Record<string, any[]>) => {
-  const valuesSet = new Set<string>()
-
-  // Iterate over all data sets
-  const datasets = Object.values(data) || []
-  datasets.forEach((rows: any[]) => {
-    // Iterate over each row in the dataset
-    rows?.forEach(row => {
-      const value = row[columnName]
-      if (value !== undefined) {
-        // Normalize the value by trimming
-        const normalizedValue = String(value).trim()
-        valuesSet.add(normalizedValue)
-      }
-    })
-  })
-
-  // Convert Set back to array to return
-  return Array.from(valuesSet)
-}
-
-const getSelector = (filter: SharedFilter) => {
-  return filter.type === 'urlfilter' ? filter.apiFilter?.valueSelector : filter.columnName
-}
-
-export const addValuesToDashboardFilters = (
-  filters: SharedFilter[],
-  data: Record<string, any[]>,
-  filtersToSkip: number[] = []
-): Array<SharedFilter> => {
-  return filters?.map((filter, index) => {
-    if (filtersToSkip.includes(index)) return filter
-    if (filter.type === 'urlfilter') return filter
-    const filterCopy = _.cloneDeep(filter)
-    const filterValues = generateValuesForFilter(getSelector(filter), data)
-    filterCopy.values = filterValues
-
-    if (filterValues.length > 0) {
-      const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
-      if (queryStringFilterValue) {
-        filterCopy.active = queryStringFilterValue
-      } else if (filter.multiSelect) {
-        const defaultValues = filterCopy.values
-        const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
-        filterCopy.active = active.filter(val => defaultValues.includes(val))
-      } else {
-        const hasResetLabel = filters.find(filter => filter.resetLabel)
-        const defaultValue = hasResetLabel ? hasResetLabel.resetLabel : filterCopy.active || filterCopy.values[0]
-        filterCopy.active = filterCopy.defaultValue || defaultValue
-      }
-    }
-    return handleSorting(filterCopy)
-  })
-}
+import _ from 'lodash'
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+import { SharedFilter } from '../types/SharedFilter'
+import { handleSorting } from '@cdc/core/components/Filters'
+import { mergeCustomOrderValues } from '@cdc/core/helpers/mergeCustomOrderValues'
+
+// Gets filter values from dataset
+const generateValuesForFilter = (columnName: string, data: Record<string, any[]>) => {
+  const valuesSet = new Set<string>()
+
+  // Iterate over all data sets
+  const datasets = Object.values(data) || []
+  datasets.forEach((rows: any[]) => {
+    // Iterate over each row in the dataset
+    rows?.forEach(row => {
+      const value = row[columnName]
+      if (value !== undefined) {
+        // Normalize the value by trimming
+        const normalizedValue = String(value).trim()
+        valuesSet.add(normalizedValue)
+      }
+    })
+  })
+
+  // Convert Set back to array to return
+  return Array.from(valuesSet)
+}
+
+const getSelector = (filter: SharedFilter) => {
+  return filter.type === 'urlfilter' ? filter.apiFilter?.valueSelector : filter.columnName
+}
+
+export const addValuesToDashboardFilters = (
+  filters: SharedFilter[],
+  data: Record<string, any[]>,
+  filtersToSkip: number[] = []
+): Array<SharedFilter> => {
+  const result = filters?.map((filter, index) => {
+    if (filtersToSkip.includes(index)) return filter
+    if (filter.type === 'urlfilter') return filter
+    const filterCopy = _.cloneDeep(filter)
+    const filterValues = generateValuesForFilter(getSelector(filter), data)
+    filterCopy.values = filterValues
+
+    // Merge new values with existing custom order (fixes DEV-11740 & DEV-11376)
+    filterCopy.orderedValues = mergeCustomOrderValues(filterValues, filterCopy.orderedValues, filterCopy.order)
+
+    if (filterValues.length > 0) {
+      const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
+      if (queryStringFilterValue) {
+        filterCopy.active = queryStringFilterValue
+      } else if (filter.multiSelect) {
+        const defaultValues = filterCopy.values
+        const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
+        filterCopy.active = active.filter(val => defaultValues.includes(val))
+      } else {
+        // Preserve existing active value if it's valid in the new filter values
+        const currentActive = filterCopy.active as string
+        const isResetLabelValue = currentActive && currentActive === filterCopy.resetLabel
+        const isCurrentActiveValid = currentActive && (filterValues.includes(currentActive) || isResetLabelValue)
+
+        // Check if this is an intentional clear (empty string, but not undefined during initial load)
+        const isIntentionalClear = currentActive === ''
+
+        // Priority: defaultValue > valid current active > reset label > first value
+        if (filterCopy.defaultValue) {
+          // If defaultValue is explicitly set, always use it
+          filterCopy.active = filterCopy.defaultValue
+        } else if (isCurrentActiveValid) {
+          // Keep the current active value if valid
+          filterCopy.active = currentActive
+        } else if (isIntentionalClear) {
+          // Don't override intentional clears
+          filterCopy.active = currentActive
+        } else {
+          // Set to reset label or first value
+          const defaultValue = filterCopy.resetLabel || filterCopy.values[0]
+          filterCopy.active = defaultValue
+        }
+      }
+    }
+
+    // Handle nested dropdown subGrouping.active property
+    if (filterCopy.subGrouping && filterCopy.subGrouping.valuesLookup) {
+      const groupName = filterCopy.active as string
+      const subGroupingFilter = {
+        ...filterCopy.subGrouping,
+        values: filterCopy.subGrouping.valuesLookup[groupName]?.values || []
+      }
+      const queryStringFilterValue = getQueryStringFilterValue(subGroupingFilter)
+      const groupActive = groupName || filterCopy.values[0]
+      const defaultSubValue = filterCopy.subGrouping.valuesLookup[groupActive as string]?.values[0]
+
+      // Priority order: query string > existing active > configured default > first available value
+      let activeValue = queryStringFilterValue || filterCopy.subGrouping.active
+
+      // If we have a configured default value and it exists in the current group's options, use it
+      if (!activeValue && filterCopy.subGrouping.defaultValue) {
+        const currentGroupValues = filterCopy.subGrouping.valuesLookup[groupActive as string]?.values || []
+        if (currentGroupValues.includes(filterCopy.subGrouping.defaultValue)) {
+          activeValue = filterCopy.subGrouping.defaultValue
+        }
+      }
+
+      filterCopy.subGrouping.active = activeValue || defaultSubValue
+    }
+
+    return handleSorting(filterCopy)
+  })
+  return result
+}