@cdc/dashboard 4.26.1 → 4.26.2

package/src/_stories/_mock/tp5-test.json

@@ -0,0 +1,267 @@
+{
+  "type": "dashboard",
+  "title": "TP5 Alignment Test Dashboard",
+  "description": "Testing alignment of TP5 Waffles, Data Bites, and Gauges",
+  "data": [
+    {
+      "Category": "Adults",
+      "Vaccination Rate": "68.5",
+      "Insured Rate": "87.2",
+      "Screening Rate": "72.8"
+    },
+    {
+      "Category": "Seniors",
+      "Vaccination Rate": "82.3",
+      "Insured Rate": "95.1",
+      "Screening Rate": "84.6"
+    },
+    {
+      "Category": "Youth",
+      "Vaccination Rate": "54.2",
+      "Insured Rate": "92.4",
+      "Screening Rate": "65.3"
+    }
+  ],
+  "dashboard": {
+    "filters": []
+  },
+  "rows": [
+    [
+      { "width": 4, "widget": "waffle1" },
+      { "width": 4, "widget": "waffle2" },
+      { "width": 4, "widget": "waffle3" }
+    ],
+    [
+      { "width": 4, "widget": "bite1" },
+      { "width": 4, "widget": "bite2" },
+      { "width": 4, "widget": "bite3" }
+    ],
+    [
+      { "width": 4, "widget": "gauge1" },
+      { "width": 4, "widget": "gauge2" },
+      { "width": 4, "widget": "gauge3" }
+    ]
+  ],
+  "visualizations": {
+    "waffle1": {
+      "uid": "waffle1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "shape": "square",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "waffle2": {
+      "uid": "waffle2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "shape": "person",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "waffle3": {
+      "uid": "waffle3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "shape": "circle",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge1": {
+      "uid": "gauge1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge2": {
+      "uid": "gauge2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge3": {
+      "uid": "gauge3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "bite1": {
+      "uid": "bite1",
+      "type": "data-bite",
+      "title": "Vaccination Coverage",
+      "biteStyle": "tp5",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-blue",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    },
+    "bite2": {
+      "uid": "bite2",
+      "type": "data-bite",
+      "title": "Health Insurance Coverage Rate",
+      "biteStyle": "tp5",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-teal",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    },
+    "bite3": {
+      "uid": "bite3",
+      "type": "data-bite",
+      "title": "Cancer Screening Completion",
+      "biteStyle": "tp5",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-purple",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    }
+  }
+}
+

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -52,6 +52,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
 
   const openControls = useState({})
   const [canAddExisting, setCanAddExisting] = useState(false)
+  const [isNestedDragHovered, setIsNestedDragHovered] = useState(false)
 
   const updateFilterProp = (prop: string, index: number, value) => {
     const newSharedFilters = _.cloneDeep(sharedFilters)
@@ -255,6 +256,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                         key={filter.key + index}
                         draggableId={`filter-${filter.key}-${index}`}
                         index={filterIndex}
+                        isDragDisabled={isNestedDragHovered}
                       >
                         {(provided, snapshot) => (
                           <div
@@ -296,6 +298,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                                   toggleNestedQueryParameters(index, checked)
                                 }}
                                 config={config}
+                                onNestedDragAreaHover={setIsNestedDragHovered}
                               />
                             </FieldSetWrapper>
                           </div>

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -27,6 +27,7 @@ type FilterEditorProps = {
   filterIndex: number
   updateFilterProp: (name: keyof SharedFilter, value: any) => void
   toggleNestedQueryParameters: (checked: boolean) => void
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const FilterEditor: React.FC<FilterEditorProps> = ({
@@ -34,7 +35,8 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   filterIndex,
   config,
   updateFilterProp,
-  toggleNestedQueryParameters
+  toggleNestedQueryParameters,
+  onNestedDragAreaHover
 }) => {
   const [columns, setColumns] = useState<string[]>([])
   const [dataFiltersLoading, setDataFiltersLoading] = useState(false)
@@ -546,6 +548,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                         values.splice(index2, 0, removed)
                         updateFilterProp('orderedValues', values)
                       }}
+                      onNestedDragAreaHover={onNestedDragAreaHover}
                     />
                   )}
 
@@ -569,6 +572,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                     }}
                     isDashboard={true}
                     config={config}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
                   />
                   <label>
                     <input

package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx

@@ -12,13 +12,15 @@ type NestedDropDownEditorDashboardProps = {
   filter: SharedFilter
   isDashboard: boolean
   updateFilterProp: Function
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   filter,
   config,
   isDashboard = false,
-  updateFilterProp
+  updateFilterProp,
+  onNestedDragAreaHover
 }) => {
   const subGrouping = filter?.subGrouping
 
@@ -270,6 +272,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
             <FilterOrder
               orderedValues={filter.orderedValues || filter.values}
               handleFilterOrder={handleGroupingCustomOrder}
+              onNestedDragAreaHover={onNestedDragAreaHover}
             />
           )}
         </div>
@@ -298,6 +301,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
                     handleFilterOrder={(sourceIndex, destinationIndex) => {
                       handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
                     }}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
                   />
                 </div>
               )

package/src/components/VisualizationRow.tsx

@@ -103,50 +103,55 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     }
   }, [toggledRow, row.toggle])
 
-  // Equalize TP5 data bite title heights in the same row
-  useEffect(() => {
-    const rowElement = document.querySelector(`[data-row-index="${index}"]`)
-    if (!rowElement) return
+  const setupTP5MinHeightEqualizer = (rowElement: Element, itemSelector: string) => {
+    const items = Array.from(rowElement.querySelectorAll(itemSelector)) as HTMLElement[]
+    if (items.length <= 1) return undefined
 
-    const tp5Titles = Array.from(rowElement.querySelectorAll('.bite__style--tp5 .cdc-callout__heading'))
-    if (tp5Titles.length <= 1) return // No need to equalize if there's only one or none
-
-    const equalizeTP5Titles = () => {
-      // Reset heights first
-      tp5Titles.forEach((title: HTMLElement) => {
-        title.style.minHeight = ''
+    const equalizeHeights = () => {
+      items.forEach(item => {
+        item.style.minHeight = ''
       })
 
-      // Calculate max height after reset
       let maxHeight = 0
-      tp5Titles.forEach((title: HTMLElement) => {
-        const height = title.offsetHeight
+      items.forEach(item => {
+        const height = item.offsetHeight
         if (height > maxHeight) maxHeight = height
       })
 
-      // Apply max height to all titles
       if (maxHeight > 0) {
-        tp5Titles.forEach((title: HTMLElement) => {
-          title.style.minHeight = `${maxHeight}px`
+        items.forEach(item => {
+          item.style.minHeight = `${maxHeight}px`
         })
       }
     }
 
-    // Initial equalization
-    equalizeTP5Titles()
+    equalizeHeights()
 
-    // Use ResizeObserver to watch for size changes in any of the titles
     const resizeObserver = new ResizeObserver(() => {
-      equalizeTP5Titles()
+      equalizeHeights()
     })
 
-    // Observe all titles
-    tp5Titles.forEach(title => {
-      resizeObserver.observe(title as Element)
+    items.forEach(item => {
+      resizeObserver.observe(item)
     })
 
+    return () => resizeObserver.disconnect()
+  }
+
+  // Equalize TP5 callout title heights and TP5 gauge message blocks for like visualizations in the same row
+  useEffect(() => {
+    const rowElement = document.querySelector(`[data-row-index="${index}"]`)
+    if (!rowElement) return
+
+    const cleanups = [
+      setupTP5MinHeightEqualizer(rowElement, '.bite__style--tp5 .cdc-callout__heading'),
+      setupTP5MinHeightEqualizer(rowElement, '.waffle__style--tp5 .cdc-callout__heading'),
+      setupTP5MinHeightEqualizer(rowElement, '.gauge__style--tp5 .cdc-callout__heading'),
+      setupTP5MinHeightEqualizer(rowElement, '.gauge__style--tp5 .cove-gauge-chart__content')
+    ].filter(Boolean) as Array<() => void>
+
     return () => {
-      resizeObserver.disconnect()
+      cleanups.forEach(cleanup => cleanup())
     }
   }, [index, row, config, filteredDataOverride])
 

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -46,24 +46,7 @@ const addVisualization = (type, subType) => {
       newVisualizationConfig.visualizationType = type
       break
     case 'markup-include':
-      newVisualizationConfig.contentEditor = {
-        inlineHTML: '<h2>Inline HTML</h2>',
-        markupVariables: [],
-        showHeader: true,
-        srcUrl: '#example',
-        useInlineHTML: true
-      }
-      newVisualizationConfig.theme = 'theme-blue'
-      newVisualizationConfig.visual = {
-        border: false,
-        accent: false,
-        background: false,
-        hideBackgroundColor: false,
-        borderColorTheme: false
-      }
-      newVisualizationConfig.showEditorPanel = true
       newVisualizationConfig.visualizationType = type
-
       break
     case 'dashboardFilters': {
       newVisualizationConfig.sharedFilterIndexes = []

package/src/helpers/addValuesToDashboardFilters.ts

@@ -58,8 +58,7 @@ export const addValuesToDashboardFilters = (
         const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
         filterCopy.active = active.filter(val => defaultValues.includes(val))
       } else {
-        // Initialize active from defaultValue if not already set
-        // OR if defaultValue exists, always use it (overrides stale active from saved config)
+        // Use defaultValue if set, otherwise keep existing active or use first value
         if (filterCopy.defaultValue) {
           filterCopy.active = filterCopy.defaultValue
         } else if (!filterCopy.active) {
@@ -82,17 +81,24 @@ export const addValuesToDashboardFilters = (
       }
       const queryStringFilterValue = getQueryStringFilterValue(subGroupingFilter)
       const groupActive = groupName || filterCopy.values[0]
-      const defaultSubValue = filterCopy.subGrouping.valuesLookup[groupActive as string]?.values[0]
+      const currentGroupValues = filterCopy.subGrouping.valuesLookup[groupActive as string]?.values || []
+      const defaultSubValue = currentGroupValues[0]
 
-      // Priority order: query string > existing active > configured default > first available value
-      let activeValue = queryStringFilterValue || filterCopy.subGrouping.active
+      // Priority order: query string > configured default > existing active > first available value
+      let activeValue: string | undefined
 
-      // 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
-        }
+      if (queryStringFilterValue && currentGroupValues.includes(queryStringFilterValue)) {
+        // 1. Query string parameter takes highest priority (only if valid for the current group)
+        activeValue = queryStringFilterValue
+      } else if (
+        filterCopy.subGrouping.defaultValue &&
+        currentGroupValues.includes(filterCopy.subGrouping.defaultValue)
+      ) {
+        // 2. Use configured defaultValue if it exists and is valid for the current group
+        activeValue = filterCopy.subGrouping.defaultValue
+      } else if (filterCopy.subGrouping.active && currentGroupValues.includes(filterCopy.subGrouping.active)) {
+        // 3. Keep existing active value if it's valid for the current group
+        activeValue = filterCopy.subGrouping.active
       }
 
       filterCopy.subGrouping.active = activeValue || defaultSubValue

package/src/helpers/apiFilterHelpers.ts

@@ -119,35 +119,31 @@ export const getToFetch = (
 }
 
 export const setActiveNestedDropdown = (dropdownOptions, sharedFilter) => {
-  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
-  const defaultValue = dropdownOptions[0]?.value
-  const subDefaultValue = dropdownOptions[0]?.subOptions[0].value
-  const subDefaultQueryParamValue = getQueryParam(sharedFilter?.subGrouping.setByQueryParameter)
-  if (!sharedFilter.active) {
-    sharedFilter.active = defaultQueryParamValue || defaultValue
-    sharedFilter.subGrouping.active = subDefaultQueryParamValue || subDefaultValue
-  } else {
-    const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
-    sharedFilter.active = currentOption ? currentOption.value : defaultValue
-    if (currentOption) {
-      const currentSubOption = currentOption.subOptions.find(option => option.value === sharedFilter.subGrouping.active)
-      sharedFilter.subGrouping.active = currentSubOption?.value || subDefaultValue
-    } else {
-      sharedFilter.subGrouping.active = subDefaultValue
-    }
-  }
+  const queryValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const subQueryValue = getQueryParam(sharedFilter?.subGrouping?.setByQueryParameter)
+
+  // Priority: query string > configured defaultValue > existing active (if valid) > first option
+  // Note: use loose equality here to match values across possible string/number differences
+  const validActive = dropdownOptions.find(option => option.value == sharedFilter.active)
+  sharedFilter.active =
+    queryValue || sharedFilter.defaultValue || (validActive ? sharedFilter.active : dropdownOptions[0]?.value)
+
+  const options = dropdownOptions.find(option => option.value == sharedFilter.active)?.subOptions || []
+  const validSubActive = options.find(o => o.value == sharedFilter.subGrouping?.active)
+  sharedFilter.subGrouping.active =
+    subQueryValue ||
+    sharedFilter.subGrouping?.defaultValue ||
+    (validSubActive ? sharedFilter.subGrouping.active : options[0]?.value)
 }
 
 export const setActiveMultiDropdown = (dropdownOptions, sharedFilter) => {
-  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
-  const multiDefaultQueryParamValue = Array.isArray(defaultQueryParamValue)
-    ? defaultQueryParamValue
-    : defaultQueryParamValue?.split(',')
-  const multiDefaultValue = defaultQueryParamValue ? multiDefaultQueryParamValue : [dropdownOptions[0]?.value]
+  const queryValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const queryValues = Array.isArray(queryValue) ? queryValue : queryValue?.split(',')
+  const defaultValues = queryValue ? queryValues : [dropdownOptions[0]?.value]
   const currentOption = (Array.isArray(sharedFilter.active) ? sharedFilter.active : []).filter(activeVal =>
     dropdownOptions.find(option => option.value === activeVal)
   )
-  sharedFilter.active = currentOption.length ? currentOption : multiDefaultValue
+  sharedFilter.active = currentOption.length ? currentOption : defaultValues
 }
 
 export const setAutoLoadDefaultValue = (
@@ -158,20 +154,20 @@ export const setAutoLoadDefaultValue = (
 ): SharedFilter => {
   const sharedFiltersCopy = _.cloneDeep(sharedFilters)
   const sharedFilter = _.cloneDeep(sharedFiltersCopy[sharedFilterIndex])
-  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
-  const hasQueryParameter = sharedFilter.setByQueryParameter ? defaultQueryParamValue !== undefined : false
+  const queryValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const hasQuery = sharedFilter.setByQueryParameter ? queryValue !== undefined : false
   if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) {
-    if (hasQueryParameter && sharedFilter.apiFilter) {
+    if (hasQuery && sharedFilter.apiFilter) {
       const subQueryValue = getQueryParam(sharedFilter.subGrouping?.setByQueryParameter)
-      const isNestedDropdown = subQueryValue !== undefined
-      sharedFilter.queuedActive = isNestedDropdown ? [defaultQueryParamValue, subQueryValue] : defaultQueryParamValue
+      const isNested = subQueryValue !== undefined
+      sharedFilter.queuedActive = isNested ? [queryValue, subQueryValue] : queryValue
     }
     return sharedFilter // no autoLoading happening
   }
-  if (autoLoadFilterIndexes.includes(sharedFilterIndex) || hasQueryParameter) {
+  if (autoLoadFilterIndexes.includes(sharedFilterIndex) || hasQuery) {
     const filterParents = sharedFiltersCopy.filter(f => sharedFilter.parents?.includes(f.key))
-    const notAllParentFiltersSelected = filterParents.some(p => !(p.active || p.queuedActive))
-    if (filterParents && notAllParentFiltersSelected) return sharedFilter
+    const missingParents = filterParents.some(p => !(p.active || p.queuedActive))
+    if (missingParents) return sharedFilter
     if (sharedFilter.filterStyle === FILTER_STYLE.multiSelect) {
       setActiveMultiDropdown(dropdownOptions, sharedFilter)
     } else if (sharedFilter.filterStyle === FILTER_STYLE.nestedDropdown) {
@@ -179,7 +175,7 @@ export const setAutoLoadDefaultValue = (
     } else {
       const defaultValue = dropdownOptions[0]?.value
       if (!sharedFilter.active) {
-        sharedFilter.active = defaultQueryParamValue || defaultValue
+        sharedFilter.active = queryValue ?? defaultValue
       } else {
         const currentOption = dropdownOptions.find(option => option.value == sharedFilter.active) // loose equality required: 2017 should equal '2017'
         sharedFilter.active = currentOption ? currentOption.value : defaultValue