@cdc/core 4.24.2 → 4.24.4

package/components/_stories/NestedDropdown.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import NestedDropdown from '../NestedDropdown'
+
+const meta: Meta<typeof NestedDropdown> = {
+  title: 'Components/Molecules/NestedDropdown',
+  component: NestedDropdown
+}
+
+type Story = StoryObj<typeof NestedDropdown>
+
+export const Primary: Story = {
+  args: {
+    data: [
+      {
+        country: 'USA',
+        region: 'Region1'
+      },
+      {
+        country: 'USA',
+        region: 'Florida'
+      },
+      {
+        country: 'USA',
+        region: 'Iowa'
+      },
+      {
+        country: 'Country2',
+        region: 'Region1'
+      },
+      {
+        country: 'Country2',
+        region: 'Region2'
+      },
+      {
+        country: 'Country2',
+        region: 'Region3'
+      },
+      {
+        country: 'Italy',
+        region: 'Region1'
+      },
+      {
+        country: 'Italy',
+        region: 'Naples'
+      },
+      {
+        country: 'Italy',
+        region: 'Region3'
+      }
+    ],
+    tiers: ['country', 'region'],
+    listLabel: 'Countries of the World',
+    handleSelectedItems: console.log
+  }
+}
+
+export default meta

package/components/_stories/styles.scss

@@ -1,3 +1,4 @@
+@import '../../styles/base.scss';
 @import '../../styles/_variables';
 @import '../../styles/_mixins';
 @import '../../styles/_data-table';

package/components/createBarElement.jsx

@@ -0,0 +1,120 @@
+export default function createBarElement(props) {
+  const { config, index, id, className, background, borderColor, borderWidth, width, height, x, y, onMouseOver, onMouseLeave, onClick, tooltipHtml, tooltipId, styleOverrides, seriesHighlight } = props
+
+  const adjustedWidth = Math.max(0, width);
+  const adjustedHeight = Math.max(0, height);
+
+  const isHorizontal = config.orientation === 'horizontal'
+  const isRounded = config.barStyle === 'rounded'
+  const isStacked = config.visualizationSubType === 'stacked'
+  const tipRounding = config.tipRounding
+  const comboBarSeriesCount = config.visualizationType === 'Combo' && config.runtime?.barSeriesKeys?.length
+  const barSeriesCount = config.runtime.seriesKeys.length
+  const isolateSeriesCount = config.visualizationType === 'Bar' && config.legend.axisAlign && seriesHighlight?.length ? seriesHighlight?.length : 0
+  const stackCount = comboBarSeriesCount ? comboBarSeriesCount : isolateSeriesCount ? isolateSeriesCount : barSeriesCount
+
+  let radius = config.roundingStyle === 'standard' ? 8 : config.roundingStyle === 'shallow' ? 5 : config.roundingStyle === 'finger' ? 15 : 0
+  if (radius > adjustedWidth / 2 || radius > adjustedHeight / 2) {
+    radius = Math.min(adjustedWidth / 2, adjustedHeight / 2)
+  }
+
+  const roundTop = () => {
+    return `M${x},${y + adjustedHeight}
+      L${x},${y + radius}
+      Q${x},${y} ${x + radius},${y}
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}`
+  }
+
+  const roundRight = () => {
+    return `M${x},${y + adjustedHeight}
+      L${x},${y}
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}`
+  }
+
+  const roundBottom = () => {
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
+      L${x},${y}
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
+  }
+
+  const roundLeft = () => {
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
+      L${x},${y + radius}
+      Q${x},${y} ${x + radius},${y}
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
+  }
+
+  const roundFull = () => {
+    return `M${x + radius},${y + adjustedHeight}
+      Q${x},${y + adjustedHeight} ${x},${y + adjustedHeight - radius}
+      L${x},${y + radius}
+      Q${x},${y} ${x + radius},${y}
+      L${x + adjustedWidth - radius},${y}
+      Q${x + adjustedWidth},${y} ${x + adjustedWidth},${y + radius}
+      L${x + adjustedWidth},${y + adjustedHeight - radius}
+      Q${x + adjustedWidth},${y + adjustedHeight} ${x + adjustedWidth - radius},${y + adjustedHeight}
+      L${x + radius},${y + adjustedHeight}`
+  }
+
+  const nonRounded = () => {
+    return `M${x},${y}
+      L${x + adjustedWidth},${y}
+      L${x + adjustedWidth},${y + adjustedHeight}
+      L${x},${y + adjustedHeight}
+      L${x},${y}`
+  }
+
+  let path
+  if (index === undefined || index === null || !isRounded) {
+    path = nonRounded()
+  } else {
+    path = nonRounded()
+
+    if ((isStacked && index + 1 === stackCount) || !isStacked) {
+      path = isHorizontal ? roundRight() : roundTop()
+    }
+    if (!isStacked && index === -1) {
+      path = isHorizontal ? roundLeft() : roundBottom()
+    }
+    if (tipRounding === 'full' && isStacked && index === 0 && stackCount > 1) {
+      path = isHorizontal ? roundLeft() : roundBottom()
+    }
+    if (tipRounding === 'full' && ((isStacked && index === 0 && stackCount === 1) || !isStacked)) {
+      path = roundFull()
+    }
+  }
+
+  return (
+    <path
+      id={id}
+      className={className}
+      d={path}
+      fill={background}
+      stroke={borderColor}
+      strokeWidth={borderWidth}
+      onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
+      onClick={onClick}
+      data-tooltip-html={tooltipHtml}
+      data-tooltip-id={tooltipId}
+      style={{
+        transition: 'all 0.2s linear',
+        ...styleOverrides
+      }}
+    ></path>
+  )
+}

package/components/elements/ScreenReaderText.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren, ReactNode } from 'react'
+
+const ScreenReaderText = (props: PropsWithChildren<{ as: keyof JSX.IntrinsicElements; children?: ReactNode }>) => {
+  const Component = props.as
+  return <Component className='cdcdataviz-sr-only'>{props.children}</Component>
+}
+
+export default ScreenReaderText

package/components/elements/SkipTo.tsx

@@ -0,0 +1,46 @@
+import { useId } from 'react'
+
+type SkipToProps = {
+  // id to skip to
+  skipId: string
+  // focusable text output, screen reader message
+  skipMessage: string
+}
+
+const SkipTo: React.FC<SkipToProps> = ({ skipId, skipMessage }) => {
+  const accessibleId = useId()
+  const handleOnClick = () => {
+    // Navigate to the specific part of the page
+    const targetElement = document.getElementById(skipId)
+    if (targetElement) {
+      targetElement.scrollIntoView()
+      targetElement.setAttribute('tabIndex', '-1')
+      targetElement.focus()
+      // Setup to remove tabIndex on blur to maintain document flow
+      const blurListener = () => {
+        targetElement.removeAttribute('tabIndex')
+        targetElement.removeEventListener('blur', blurListener)
+      }
+      targetElement.addEventListener('blur', blurListener)
+    }
+  }
+  return (
+    <div
+      tabIndex={0}
+      id={`skip-nav--${accessibleId}`}
+      className='cdcdataviz-sr-only-focusable'
+      onClick={handleOnClick}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          handleOnClick()
+        }
+      }}
+      role='link'
+      aria-label={skipMessage}
+    >
+      {skipMessage}
+    </div>
+  )
+}
+
+export default SkipTo

package/components/managers/DataDesigner.tsx

@@ -5,18 +5,18 @@ import Card from '../elements/Card'
 
 import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA_TABLE_MULTI_ROW } from '../../templates/dataDesignerTables'
 import '../../styles/v2/components/data-designer.scss'
+import { ConfigureData } from '../../types/ConfigureData'
 
 type DataDesignerProps = {
-  configureData?: any // todo: add description here when understood better
-  updateDescriptionProp?: (vizKey: string, dataKey: string, propName: string, value: any) => void // used to update data description fields
-  visualizationKey?: any // todo: add description here when understood better
-  dataKey?: string // appears to be the data file name, ie valid-data.csv
+  configureData?: ConfigureData
+  updateDescriptionProp: (propName: string, value: any) => void // used to update data description fields
+  visualizationKey: string
   config?: any // can be one of many different types of chart configs that aren't fully established yet
   setConfig?: (newConfig: any) => void
 }
 
 const DataDesigner = (props: DataDesignerProps) => {
-  const { configureData, updateDescriptionProp, visualizationKey, dataKey, config, setConfig } = props
+  const { configureData, updateDescriptionProp, config, setConfig } = props
   const hasDataOrientation = config?.visualizationType !== 'Forest Plot'
   const hasMultipleSeries = config?.visualizationType !== 'Forest Plot'
   const hasRowSelection = config?.visualizationType !== 'Forest Plot'
@@ -47,7 +47,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 <button
                   className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
+                    updateDescriptionProp('horizontal', false)
                   }}
                 >
                   <Card>
@@ -63,7 +63,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 <button
                   className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
+                    updateDescriptionProp('horizontal', true)
                   }}
                 >
                   <Card>
@@ -90,7 +90,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   hoverStyle={{ backgroundColor: '#015daa' }}
                   className='mr-1'
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'series', true)
+                    updateDescriptionProp('series', true)
                   }}
                   active={configureData.dataDescription.series === true}
                 >
@@ -100,7 +100,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   style={{ backgroundColor: '#00345d' }}
                   hoverStyle={{ backgroundColor: '#015daa' }}
                   onClick={() => {
-                    updateDescriptionProp(visualizationKey, dataKey, 'series', false)
+                    updateDescriptionProp('series', false)
                   }}
                   active={configureData.dataDescription.series === false}
                 >
@@ -114,7 +114,7 @@ const DataDesigner = (props: DataDesignerProps) => {
               <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
               <select
                 onChange={e => {
-                  updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                  updateDescriptionProp('seriesKey', e.target.value)
                 }}
                 defaultValue={configureData.dataDescription.seriesKey}
               >
@@ -136,7 +136,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <button
                       className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === true ? ' active' : '')}
                       onClick={() => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'singleRow', true)
+                        updateDescriptionProp('singleRow', true)
                       }}
                     >
                       <Card>
@@ -150,7 +150,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <button
                       className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === false ? ' active' : '')}
                       onClick={() => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'singleRow', false)
+                        updateDescriptionProp('singleRow', false)
                       }}
                     >
                       <Card>
@@ -168,7 +168,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
                     <select
                       onChange={e => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                        updateDescriptionProp('seriesKey', e.target.value)
                       }}
                       defaultValue={configureData.dataDescription.seriesKey}
                     >
@@ -184,7 +184,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <div className='mb-1'>Which property in the dataset represents the values for the category/date axis or map geography?</div>
                     <select
                       onChange={e => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'xKey', e.target.value)
+                        updateDescriptionProp('xKey', e.target.value)
                       }}
                       defaultValue={configureData.dataDescription.xKey}
                     >
@@ -207,7 +207,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                               onClick={() => {
                                 let newValueKeys = configureData.dataDescription.valueKeysTallSupport
                                 newValueKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', newValueKeys)
+                                updateDescriptionProp('valueKeysTallSupport', newValueKeys)
                               }}
                             >
                               X
@@ -219,7 +219,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <select
                       onChange={e => {
                         if (e.target.value && (!configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(e.target.value) === -1)) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
+                          updateDescriptionProp('valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
                         }
                       }}
                     >
@@ -244,7 +244,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                               onClick={() => {
                                 let newIgnoredKeys = configureData.dataDescription.ignoredKeys
                                 newIgnoredKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', newIgnoredKeys)
+                                updateDescriptionProp('ignoredKeys', newIgnoredKeys)
                               }}
                             >
                               X
@@ -256,7 +256,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                     <select
                       onChange={e => {
                         if (e.target.value) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
+                          updateDescriptionProp('ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
                         }
                         e.target.value = ''
                       }}

package/components/ui/Icon.tsx

@@ -31,6 +31,10 @@ import iconText from '../../assets/icon-filtered-text.svg'
 import iconDropdowns from '../../assets/icon-filter-dropdowns.svg'
 import iconPlus from '../../assets/icon-plus.svg'
 import iconMinus from '../../assets/icon-minus.svg'
+import iconTable from '../../assets/icon-table.svg'
+import iconSankey from '../../assets/icon-sankey.svg'
+import iconRotateLeft from '../../assets/icon-rotate-left.svg'
+import iconCommand from '../../assets/icon-command.svg'
 
 import '../../styles/v2/components/icon.scss'
 
@@ -64,7 +68,11 @@ const iconHash = {
   plus: iconPlus,
   minus: iconMinus,
   'filtered-text': iconText,
-  'filter-dropdowns': iconDropdowns
+  'filter-dropdowns': iconDropdowns,
+  table: iconTable,
+  sankey: iconSankey,
+  rotateLeft: iconRotateLeft,
+  command: iconCommand
 }
 
 export const ICON_TYPES = Object.keys(iconHash)

package/components/ui/Title/Title.scss

@@ -2,9 +2,15 @@
   position: relative;
   padding: 0.6em 0.8em;
   margin: 0;
-  color: #fff;
+  color: var(--white);
   font-size: 1.1em;
 
+  h2 {
+    font-size: 1.1rem;
+    color: var(--white);
+    margin: 0;
+  }
+
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
 

package/components/ui/Title/index.tsx

@@ -21,11 +21,11 @@ const Title = (props: HeaderProps) => {
   return (
     title &&
     showTitle && (
-      <header className={updatedClasses.join(' ')} aria-hidden='true' style={props.style} aria-level={ariaLevel}>
+      <header className={updatedClasses.join(' ')} style={props.style}>
         {superTitle && <sup>{parse(superTitle)}</sup>}
-        <div>
+        <h2>
           {parse(title)} {isDashboard}
-        </div>
+        </h2>
       </header>
     )
   )

package/components/ui/Tooltip.jsx

@@ -26,7 +26,7 @@ const Tooltip = ({ place = 'top', trigger = 'hover', float = false, shadow = tru
 
   return (
     <span className='cove-tooltip' style={style} {...attributes}>
-      <a id={uid} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
+      <a id={uid} role='dialog' tabIndex={0} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
       </a>
       {/* prettier-ignore */}

package/data/colorPalettes.js

@@ -11,17 +11,12 @@ const colorPalettesMap = {
   greenblue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267BA6', '#0868ac', '#084081'],
   yellowpurple: ['#FFF0B0', '#F5CC76', '#EDAE4B', '#E3683C', '#BF2A48', '#6D2059', '#8F0C4B', '#310958', '#0E0943'],
   qualitative1: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#6a3d9a', '#cab2d6', '#E31A90', '#15017A', '#C2C0FC'],
-
   qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
-
   qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
-
   qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
-
+  // qualitative9 doesn't appear to be used anywhere...
   qualitative9: ['#497d0c', '#84BC49', '#88c3ea', '#fcad90', '#f26b4f', '#c31b1f', '#c31b1f'],
-
   'sequential-blue-2(MPX)': ['#F5FEFF', '#E1FBFF', '#C0F2FD', '#94E2ED', '#5EBAD4', '#3695BE', '#2273A0', '#0E5181', '#093460'],
-
   'sequential-orange(MPX)': ['#FFFDF0', '#FFF7DC', '#FFE9C2', '#FFD097', '#F7A866', '#EB7723', '#B95117', '#853209', '#661F00']
 }
 

package/helpers/cove/accessibility.ts

@@ -0,0 +1,23 @@
+import chroma from 'chroma-js'
+
+/**
+ * WCAG 2.0 Standard requires 4.5:1 contrast ratio
+ * https://www.w3.org/TR/WCAG20-TECHS/G18.html
+ *
+ * !important - DO NOT CHANGE.
+ */
+export const WCAG_CONTRAST_RATIO = 4.5
+
+export const getContrastColor = (textColor: string, bgColor: string) => {
+  if (chroma.contrast(textColor, bgColor) < WCAG_CONTRAST_RATIO) {
+    switch (textColor) {
+      case '#FFF':
+        return '#000'
+      case '#000':
+        return '#FFF'
+      default:
+        return textColor
+    }
+  }
+  return textColor
+}

package/helpers/cove/date.ts

@@ -0,0 +1,19 @@
+import { timeFormat, timeParse } from 'd3-time-format'
+import { type Axis } from '@cdc/core/types/Axis'
+
+export function formatDate(format = undefined, date) {
+  return timeFormat(format)(date)
+}
+
+export function parseDate(format = undefined, dateString) {
+  return timeParse(format)(dateString) || new Date()
+}
+
+export const isDateScale = (axis: Axis) => {
+  try {
+    if (!axis) throw new Error('COVE: No axis passed to isDateScale')
+    return ['date', 'date-time'].includes(axis.type)
+  } catch ({ message }) {
+    console.warn(message) // eslint-disable-line
+  }
+}

package/helpers/{coveUpdateWorker.js → coveUpdateWorker.ts}

@@ -1,15 +1,19 @@
 // If config key names or position in the config have been changed with a version change,
 // process those config entries and format old values into new
-import update_4_23 from './ver/4.23'
+import update_4_24_3 from './ver/4.24.3'
 
 // 4.23.6 ------------------------------------------------------
-const coveUpdateWorker = async config => {
+export const coveUpdateWorker = config => {
   let genConfig = config
 
-  // v4.23
-  genConfig = await update_4_23(genConfig)
+  // v4.24.3
+  genConfig = update_4_24_3(genConfig)
 
   return genConfig
 }
 
-export default coveUpdateWorker
+const asyncWorker = async config => {
+  return await coveUpdateWorker(config)
+}
+
+export default asyncWorker

package/helpers/isDomainExternal.js

@@ -0,0 +1,14 @@
+export default function isDomainExternal(domain) {
+  const internalDomains = ['cdc.gov', 'localhost', 'facebook.com', 'twitter.com', 'linkedin.com', 'pinterest.com', 'youtube.com', 'youtube-nocookie.com', 'plus.google.com', 'instagram.com', 'flickr.com', 'tumblr.com', 'cdc.sharepoint.com', 'vaccines.gov', 'vacunas.gov']
+
+  const hostname = new URL(domain, window.location.origin).hostname
+  let external = true
+
+  internalDomains.forEach(internalDomain => {
+    if (hostname.indexOf(internalDomain) !== -1 && hostname.indexOf(internalDomain) === hostname.length - internalDomain.length) {
+      external = false
+    }
+  })
+
+  return external
+}

package/helpers/queryStringUtils.js

@@ -0,0 +1,26 @@
+export function getQueryStringFilterValue(filter) {
+  const urlParams = new URLSearchParams(window.location.search)
+  if(filter.setByQueryParameter){ // Only check the query string if the filter is supposed to be set by QS param
+    const filterValue = urlParams.get(filter.setByQueryParameter)
+    if(filterValue && filter.values){
+      for(let i = 0; i < filter.values.length; i++){
+        if(filter.values[i] && filter.values[i].toLowerCase() === filterValue.toLowerCase()){
+          return filter.values[i]
+        }
+      }
+    }
+  }
+}
+
+export function getQueryParams(filter) {
+  const queryParams = {};
+  for (const [key, value] of (new URLSearchParams(window.location.search)).entries()) {
+    queryParams[key] = value
+  }
+  return queryParams;
+}
+
+export function updateQueryString(queryParams) {
+  const updateUrl = `${window.location.origin}${window.location.pathname}?${Object.keys(queryParams).map(queryParam => `${queryParam}=${encodeURIComponent(queryParams[queryParam])}`).join('&')}`;
+  window.history.pushState({path: updateUrl}, '', updateUrl);
+}