@cdc/core 4.24.7 → 4.24.9

package/components/Layout/components/Responsive.tsx

@@ -13,7 +13,8 @@ const breakpoints = [
   '1280' // xl
 ]
 
-const os = navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
+const os =
+  navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
 
 const Responsive = ({ children, isEditor }) => {
   const [displayPanel, setDisplayPanel] = useState(false)
@@ -35,6 +36,7 @@ const Responsive = ({ children, isEditor }) => {
   )
 
   const onKeypress = key => {
+    if (!isEditor) return key
     if (key.code === 'KeyL' && key.ctrlKey) setDisplayPanel(display => !display)
     const viewportCommandKey = os === 'MacOS' ? key.metaKey : key.altKey
     if (viewportCommandKey) {
@@ -113,7 +115,10 @@ const Responsive = ({ children, isEditor }) => {
 
   return (
     <div className='cove-editor__content' data-grid={displayGrid || null}>
-      <div className='cove-editor__content-wrap--x' style={viewportPreview ? { maxWidth: viewportPreview + 'px', minWidth: 'unset' } : null}>
+      <div
+        className='cove-editor__content-wrap--x'
+        style={viewportPreview ? { maxWidth: viewportPreview + 'px', minWidth: 'unset' } : null}
+      >
         <div className='cove-editor__content-wrap--y'>
           <div className='cove-editor-utils__breakpoints--px'>
             {displayGrid && displayPanel && (
@@ -143,7 +148,8 @@ const Responsive = ({ children, isEditor }) => {
           <p className={displayGrid ? 'hotkey--active' : null}>G</p>
           <p className={rotateAnimation ? 'hotkey--active' : null}>R</p>
           <p className={viewportPreview ? 'hotkey--active' : null}>
-            {os === 'MacOS' ? <Icon style={{ marginRight: '0.25rem' }} display='command' size={12} /> : 'Alt'} + {viewportPreview ? breakpoints.indexOf(viewportPreview) + 1 : `[1 - ${breakpoints.length}]`}
+            {os === 'MacOS' ? <Icon style={{ marginRight: '0.25rem' }} display='command' size={12} /> : 'Alt'} +{' '}
+            {viewportPreview ? breakpoints.indexOf(viewportPreview) + 1 : `[1 - ${breakpoints.length}]`}
           </p>
         </div>
       </div>
@@ -161,7 +167,11 @@ const Responsive = ({ children, isEditor }) => {
             </div>
           </button>
           {breakpoints.map((breakpoint, index) => (
-            <button className={`cove-editor-utils__breakpoints-item${viewportPreview === breakpoint ? ' active' : ''}`} onClick={() => viewportPreviewController(breakpoint)} key={index}>
+            <button
+              className={`cove-editor-utils__breakpoints-item${viewportPreview === breakpoint ? ' active' : ''}`}
+              onClick={() => viewportPreviewController(breakpoint)}
+              key={index}
+            >
               {breakpoint}px
             </button>
           ))}

package/components/Layout/components/Sidebar/components/Sidebar.tsx

@@ -21,21 +21,30 @@ const Sidebar: React.FC<SidebarProps> = props => {
     const sectionClasses = ['editor-panel', 'cove', 'sidebar']
     if (!displayPanel) sectionClasses.push('hidden')
     if (isDashboard) sectionClasses.push('dashboard')
-    return sectionClasses
+    return sectionClasses.join(' ')
   }
 
   const getButtonClasses = () => {
     const buttonClasses = []
     if (displayPanel) buttonClasses.push('editor-panel__toggle')
     if (!displayPanel) buttonClasses.push('collapsed', 'editor-panel__toggle')
-    return buttonClasses
+    return buttonClasses.join(' ')
+  }
+
+  const getTitleClasses = () => {
+    const titleClasses = ['editor-panel__title']
+    if (!displayPanel) titleClasses.push('collapsed')
+    return titleClasses.join(' ')
   }
 
   return (
     <>
-      <button className={getButtonClasses().join(' ')} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
-      <section className={getSectionClasses().join(' ')}>
-        <h2 className='editor-panel__title'>{title}</h2>
+      {/* mimic the editor panel title to keep the button visible. */}
+      <section className='editor-panel__toggle-wrapper p-absolute' style={{ height: '49.75px', width: '350px' }}>
+        <button className={getButtonClasses()} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
+      </section>
+      <section className={getSectionClasses()}>
+        <h2 className={getTitleClasses()}>{title}</h2>
         <section className='form-container' data-html2canvas-ignore>
           {children}
         </section>

package/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -11,7 +11,6 @@
 
 .cdc-editor .configure .cdc-open-viz-module:not(.type-dashboard) .editor-panel__toggle {
   position: absolute;
-  top: 10px;
 }
 
 .cdc-editor .configure .cdc-open-viz-module:not(.type-dashboard) .sidebar {
@@ -25,24 +24,14 @@
   }
 
   .sidebar {
-    position: fixed;
-    height: 100vh;
+    position: static;
+    height: 100%; // take up the whole container
     top: 0;
     max-width: 350px;
     width: 350px;
     background-color: var(--white);
     grid-area: panel;
 
-    .editor-toggle {
-      position: fixed !important;
-      top: 10px !important;
-    }
-
-    .editor-panel {
-      position: fixed !important;
-      top: 0 !important;
-    }
-
     &.editor-panel--hidden &.hidden {
       display: none;
     }
@@ -858,6 +847,10 @@
     border-bottom: #565656 3px solid;
     z-index: 3;
     margin: 0;
+
+    &.collapsed {
+      display: none;
+    }
   }
 
   &.type-dashboard {
@@ -866,20 +859,26 @@
     }
   }
 
+  .editor-panel__toggle-wrapper {
+    position: absolute;
+    top: 0;
+  }
+
   .editor-panel__toggle {
     background: #f2f2f2;
     border-radius: 60px;
     color: #000;
     font-size: 1em;
     border: 0;
-    position: fixed;
+    position: absolute;
     z-index: 100;
     transition: 0.1s background;
     cursor: pointer;
     width: 25px;
     height: 25px;
-    left: 307px;
-    top: 10px;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
     box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
 
     &:before {

package/components/Layout/components/Visualization/index.tsx

@@ -17,10 +17,15 @@ type VisualizationWrapper = {
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
-  const { config = {}, isEditor = false, currentViewport = 'lg', imageId = '', showEditorPanel = true } = props
+  const { config = {}, isEditor = false, currentViewport = 'lg', imageId = '', showEditorPanel = true, className } = props
 
   const getWrappingClasses = () => {
     let classes = ['cdc-open-viz-module', `${currentViewport}`, `font-${config?.fontSize}`, `${config?.theme}`]
+
+    if (className) {
+      classes.push(className)
+    }
+
     isEditor && classes.push('spacing-wrapper')
     isEditor && classes.push('isEditor')
 
@@ -47,6 +52,7 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
     }
     if (config.type === 'map') {
       classes.push(`type-map`)
+      if (config?.runtime?.editorErrorMessage.length !== 0) classes.push('type-map--has-error')
     }
 
     if (config.type === 'data-bite') {

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,33 +1,39 @@
-.cdc-open-viz-module.isEditor {
-  overflow: auto;
-  display: grid;
-  transition: grid-template-columns 400ms ease-in-out;
-
-  .editor-panel__toggle {
-    transition: left 400ms ease-in-out;
+.cdc-open-viz-module {
+  .cdc-chart-inner-container .cove-component__content {
+    padding: 25px 15px !important;
   }
+  &.isEditor {
+    overflow: auto;
+    display: grid;
+    transition: grid-template-columns 400ms ease-in-out;
+    min-height: 100vh;
 
-  .sidebar {
-    transition: left 400ms ease-in-out;
-  }
+    .editor-panel__toggle {
+      transition: left 400ms ease-in-out;
+    }
 
-  &.editor-panel--visible {
-    grid-template-areas: 'panel content';
-    grid-template-columns: 350px calc(100% - 350px);
-  }
+    .sidebar {
+      transition: left 400ms ease-in-out;
+    }
 
-  &.editor-panel--hidden {
-    grid-template-areas: 'panel content';
-    grid-template-columns: 0px 100%;
-  }
+    &.editor-panel--visible {
+      grid-template-areas: 'panel content';
+      grid-template-columns: 350px calc(100% - 350px);
+      overflow: hidden;
+    }
+
+    &.editor-panel--hidden {
+      grid-template-areas: 'panel content';
+      grid-template-columns: 0px 100%;
+    }
 
-  .cove-editor__content,
-  .cove-component__content {
-    grid-area: content;
-    position: relative;
-    left: 0;
-    width: 100% !important;
-    padding-left: 0px !important;
-    grid-area: content;
+    .cove-editor__content,
+    .cove-component__content {
+      grid-area: content;
+      position: relative;
+      left: 0;
+      width: 100% !important;
+      grid-area: content;
+    }
   }
 }

package/components/Layout/styles/editor.scss

@@ -4,14 +4,6 @@ $mediumGray: #e6e6e6;
 
 @import 'editor-grid-view.scss';
 
-.cdc-open-viz-module.isEditor {
-  background: $mediumGray !important;
-}
-
-// .cdc-open-viz-module .form-container {
-//   height: 100%;
-// }
-
 .cove-editor {
   display: grid;
   grid-template-areas: 'panel content';

package/components/Legend/Legend.Gradient.tsx

@@ -0,0 +1,133 @@
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import { type ViewportSize, type MapConfig } from '@cdc/map/src/types/MapConfig'
+import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { getGradientLegendWidth } from '@cdc/core/helpers/getGradientLegendWidth'
+import { DimensionsType } from '../../types/Dimensions'
+
+type CombinedConfig = MapConfig | ChartConfig
+
+interface GradientProps {
+  labels: string[]
+  colors: string[]
+  config: CombinedConfig
+  dimensions: DimensionsType
+  currentViewport: ViewportSize
+  getTextWidth: (text: string, font: string) => string
+}
+
+const LegendGradient = ({
+  labels,
+  colors,
+  config,
+  dimensions,
+  currentViewport,
+  getTextWidth
+}: GradientProps): JSX.Element => {
+  let [width] = dimensions
+
+  const legendWidth = getGradientLegendWidth(width, currentViewport)
+  const uniqueID = `${config.uid}-${Date.now()}`
+
+  const numTicks = colors?.length
+
+  const longestLabel = labels && labels.length > 0 ? labels.reduce((a, b) => (a.length > b.length ? a : b)) : ''
+  const boxHeight = 20
+  let height = 50
+  const margin = 1
+
+  // configure tick witch and angle
+  const textWidth = getTextWidth(longestLabel, `normal 14px sans-serif`)
+  const rotationAngle = Number(config.legend.tickRotation) || 0
+  // Convert the angle from degrees to radians
+  const angleInRadians = rotationAngle * (Math.PI / 180)
+  const newHeight = height + Number(textWidth) * Math.sin(angleInRadians)
+
+  // configre gradient colors
+  const stops = colors.map((color, index) => {
+    const offset = (index / (colors.length - 1)) * 100
+    return <stop key={index} offset={`${offset}%`} style={{ stopColor: color, stopOpacity: 1 }} />
+  })
+
+  // render ticks and labels
+  const ticks = labels.map((key, index) => {
+    const segmentWidth = legendWidth / numTicks
+    const xPositionX = index * segmentWidth + segmentWidth
+    const textAnchor = rotationAngle ? 'end' : 'middle'
+    const verticalAnchor = rotationAngle ? 'middle' : 'start'
+
+    return (
+      <Group top={margin}>
+        <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />
+        <Text
+          angle={-config.legend.tickRotation}
+          x={xPositionX}
+          y={boxHeight}
+          dy={10}
+          dx={-segmentWidth / 2}
+          fontSize='14'
+          textAnchor={textAnchor}
+          verticalAnchor={verticalAnchor}
+        >
+          {key}
+        </Text>
+      </Group>
+    )
+  })
+  if ((config.type === 'map' && config.legend.position === 'side') || !config.legend.position) {
+    return
+  }
+  if (
+    config.type === 'chart' &&
+    (config.legend.position === 'left' || config.legend.position === 'right' || !config.legend.position)
+  ) {
+    return
+  }
+
+  if (config.legend.style === 'gradient') {
+    return (
+      <svg style={{ overflow: 'visible', width: '100%', marginTop: 10 }} height={newHeight}>
+        {/* background border*/}
+        <rect
+          x={0}
+          y={0}
+          width={legendWidth + margin * 2}
+          height={boxHeight + margin * 2}
+          fill='#d3d3d3'
+          strokeWidth='0.5'
+        />
+        {/* Define the gradient */}
+        <linearGradient id={`gradient-smooth-${uniqueID}`} x1='0%' y1='0%' x2='100%' y2='0%'>
+          {stops}
+        </linearGradient>
+
+        {config.legend.subStyle === 'smooth' && (
+          <rect x={1} y={1} width={legendWidth} height={boxHeight} fill={`url(#gradient-smooth-${uniqueID})`} />
+        )}
+
+        {config.legend.subStyle === 'linear blocks' &&
+          colors.map((color, index) => {
+            const segmentWidth = legendWidth / numTicks
+            const xPosition = index * segmentWidth
+            return (
+              <Group>
+                <rect
+                  key={index}
+                  x={xPosition}
+                  y={0}
+                  width={segmentWidth}
+                  height={boxHeight}
+                  fill={color}
+                  stroke='white'
+                  strokeWidth='0'
+                />
+              </Group>
+            )
+          })}
+        {/* Ticks and labels */}
+        <g>{ticks}</g>
+      </svg>
+    )
+  }
+}
+export default LegendGradient

package/components/LegendShape.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+interface LegendShapeProps {
+  fill: string
+  borderColor?: string
+  display?: 'inline-block' | 'block' | 'inline'
+  shape?: 'circle' | 'square'
+}
+
+const LegendShape: React.FC<LegendShapeProps> = props => {
+  const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
+  const dimensions = { width: '1em', height: '1em' }
+  const marginRight = ['circle', 'square'].includes(shape) ? '5px' : '0'
+  const styles = {
+    marginRight: marginRight,
+    borderRadius: shape === 'circle' ? '50%' : '0px',
+    verticalAlign: 'middle',
+    display: display,
+    height: dimensions.height,
+    width: dimensions.width,
+    border: borderColor ? `${borderColor} 1px solid` : 'rgba(0,0,0,.3) 1px solid',
+    backgroundColor: fill
+  }
+
+  return <span className='legend-item' style={styles} />
+}
+
+export default LegendShape

package/components/MultiSelect/MultiSelect.tsx

@@ -6,7 +6,7 @@ import './multiselect.styles.css'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 
 interface Option {
-  value: string
+  value: string | number
   label: string
 }
 
@@ -17,11 +17,12 @@ interface MultiSelectProps {
   options: Option[]
   updateField: UpdateFieldFunc<string[]>
   label?: string
-  selected?: string[]
+  selected?: (string | number)[]
   limit?: number
+  tooltip?: React.ReactNode
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected = [], limit }) => {
+const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected = [], limit, tooltip }) => {
   const preselectedItems = options.filter(opt => selected.includes(opt.value)).slice(0, limit)
   const [selectedItems, setSelectedItems] = useState<Option[]>(preselectedItems)
   const [expanded, setExpanded] = useState(false)
@@ -73,6 +74,8 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
         </span>
       )}
 
+      {tooltip && tooltip}
+
       <div className='wrapper'>
         <div className='selected'>
           {selectedItems.map(item => (

package/components/NestedDropdown/NestedDropdown.tsx

@@ -1,16 +1,16 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import './nesteddropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
+import { VizFilter } from '../../types/VizFilter'
 
 const Options: React.FC<{
   currentOptions: (string | number)[]
   label: string
-  handleSecondTierSelect: Function
-  userSelectedTierTwoLabel: string
+  handleSubGroupSelect: Function
+  userSelectedLabel: string
   userSearchTerm: string
-}> = ({ currentOptions, label, handleSecondTierSelect, userSelectedTierTwoLabel, userSearchTerm }) => {
+}> = ({ currentOptions = [], label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
   const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
-
   const checkMark = <>&#10004;</>
 
   useEffect(() => {
@@ -29,23 +29,24 @@ const Options: React.FC<{
       if (currentItem.className === 'selectable-item') currentItem.parentNode.parentNode.focus()
       setIsTierOneExpanded(false)
     } else if (e.key === 'Enter') {
-      currentItem.className === 'selectable-item' ? handleSecondTierSelect(currentItem.dataset.value) : setIsTierOneExpanded(!isTierOneExpanded)
+      currentItem.className === 'selectable-item' ? handleSubGroupSelect(currentItem.dataset.value) : setIsTierOneExpanded(!isTierOneExpanded)
     }
   }
 
   return (
     <>
       <li role='treeitem' key={label} tabIndex={0} aria-label={label} onClick={handleGroupClick} onKeyUp={handleKeyUp} className='nested-dropdown-group'>
-        <span id={label}>{label} </span>
+        <span className={'font-weight-bold'}>{label} </span>
         {
           <span className='list-arrow' aria-hidden='true'>
             {isTierOneExpanded ? <Icon display='caretFilledUp' /> : <Icon display='caretFilledDown' />}
           </span>
         }
         <ul aria-expanded={isTierOneExpanded} role='group' tabIndex={-1} aria-labelledby={label} className={isTierOneExpanded ? '' : 'hide'}>
-          {currentOptions.map(tierTwo => {
+          {currentOptions.map((tierTwo, tierTwoIndex) => {
             const regionID = label + tierTwo
-            let isSelected = regionID === userSelectedTierTwoLabel
+            const isSelected = regionID === userSelectedLabel
+
             return (
               <li
                 key={regionID}
@@ -56,10 +57,16 @@ const Options: React.FC<{
                 aria-selected={isSelected}
                 data-value={tierTwo}
                 onClick={e => {
-                  handleSecondTierSelect(tierTwo)
+                  handleSubGroupSelect(tierTwo)
                 }}
               >
-                {isSelected ? <span aria-hidden='true'>{checkMark}</span> : ''}
+                {isSelected ? (
+                  <span className='check-mark' aria-hidden='true'>
+                    {checkMark}
+                  </span>
+                ) : (
+                  ''
+                )}
 
                 {tierTwo}
               </li>
@@ -72,42 +79,43 @@ const Options: React.FC<{
 }
 
 interface NestedDropdownProps {
-  data: Record<string, string | number>[]
-  tiers: [string, string] // index 0  is the parent index 1 is the child
+  isEditor?: boolean
+  currentFilter: VizFilter
   listLabel: string
   handleSelectedItems: Function
 }
 
-const NestedDropdown: React.FC<NestedDropdownProps> = ({ data, tiers: [firstTierLabel, secondTierLabel], listLabel, handleSelectedItems }) => {
-  const optsMemo: Record<string, (string | number)[]> = {}
-
-  data.forEach(value => {
-    const tierOne = value[firstTierLabel]
-    const tierTwo = value[secondTierLabel]
-    if (optsMemo[tierOne]) {
-      optsMemo[tierOne].push(tierTwo)
-    } else {
-      optsMemo[tierOne] = [tierTwo]
-    }
-  })
+type OptionsMemo = [string, (string | number)[]][]
+
+const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabel, handleSelectedItems }) => {
+  const optsMemo: OptionsMemo = useMemo(() => {
+    // keep custom ordered value order
+    const values = currentFilter.orderedValues?.filter(value => currentFilter.values.includes(value)) || currentFilter.values
+    return values.map(value => {
+      if (!currentFilter.subGrouping) return [value, []]
+      const { orderedValues, values } = currentFilter.subGrouping.valuesLookup[value]
+      const subFilterValues = orderedValues?.filter(value => values.includes(value)) || values
+      return [value, subFilterValues]
+    })
+  }, [currentFilter, currentFilter.subGrouping])
+  const groupFilterActive = currentFilter.active
+  const subGroupFilterActive = currentFilter.subGrouping?.active ?? ''
 
-  const [userSelectedTierTwoLabel, setUserSelectedTierTwoLabel] = useState(null)
   const [userSearchTerm, setUserSearchTerm] = useState('')
-  const [inputValue, setInputValue] = useState('')
+  const [inputValue, setInputValue] = useState(subGroupFilterActive !== '' ? `${groupFilterActive} - ${subGroupFilterActive}` : 'Select an Option')
   const [inputHasFocus, setInputHasFocus] = useState(false)
   const [isListOpened, setIsListOpened] = useState(false)
 
   const searchInput = useRef(null)
   const searchDropdown = useRef(null)
 
-  const chooseSelectedSecondTier = (tierOne: string, tierTwo: string) => {
+  const chooseSelectedSubGroup = (tierOne: string, tierTwo: string) => {
     searchInput.current.focus()
-    const selectedItemValue = tierTwo
-    setUserSelectedTierTwoLabel(tierOne + tierTwo)
+    const selectedItemValue = `${tierOne} - ${tierTwo}`
     setUserSearchTerm('')
     setIsListOpened(false)
     setInputValue(selectedItemValue)
-    handleSelectedItems(tierOne, tierTwo)
+    handleSelectedItems([tierOne, tierTwo])
   }
 
   const handleKeyUp = e => {
@@ -182,25 +190,12 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ data, tiers: [firstTier
     }
   }
 
-  const filterOptions: Record<string, (string | number)[]> = useMemo(() => {
+  const filterOptions: OptionsMemo = useMemo(() => {
     if (!userSearchTerm) return optsMemo
-    const newOptions: Record<string, (string | number)[]> = {}
     const newRegex = new RegExp(`^${userSearchTerm}`, 'i')
-    for (const tierOne in optsMemo) {
-      if (tierOne.match(newRegex)) {
-        newOptions[tierOne] = [...optsMemo[tierOne]]
-      } else {
-        const newSecondTierOptions = optsMemo[tierOne].filter(tierTwo => String(tierTwo).match(newRegex))
-        if (newSecondTierOptions.length > 0) {
-          newOptions[tierOne] = newSecondTierOptions
-        }
-      }
-    }
-    return newOptions
+    return optsMemo.filter(([tierOne, tierTwo]) => tierOne.match(newRegex) || tierTwo.some(value => String(value).match(newRegex)))
   }, [userSearchTerm])
 
-  const filterOptionsKeys = Object.keys(filterOptions)
-
   const handleSearchTermChange = e => {
     const newSearchTerm = e.target.value
     setIsListOpened(true)
@@ -233,16 +228,16 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ data, tiers: [firstTier
           </span>
         </div>
         <ul role='tree' key={listLabel} tabIndex={-1} aria-labelledby='main-nested-dropdown' aria-expanded={isListOpened} ref={searchDropdown} className={`main-nested-dropdown-container ${isListOpened ? '' : 'hide'}`}>
-          {filterOptions && filterOptionsKeys.length > 0
-            ? filterOptionsKeys.map((tierOne: string) => {
+          {filterOptions?.length
+            ? filterOptions.map(([groupName, options]) => {
                 return (
                   <Options
-                    currentOptions={filterOptions[tierOne]}
-                    label={tierOne}
-                    handleSecondTierSelect={(tierTwo: string) => {
-                      chooseSelectedSecondTier(tierOne, tierTwo)
+                    currentOptions={options}
+                    label={groupName}
+                    handleSubGroupSelect={(subGroupValue: string) => {
+                      chooseSelectedSubGroup(groupName, subGroupValue)
                     }}
-                    userSelectedTierTwoLabel={userSelectedTierTwoLabel}
+                    userSelectedLabel={groupFilterActive + subGroupFilterActive}
                     userSearchTerm={userSearchTerm}
                   />
                 )