@cdc/map 4.23.2 → 4.23.4

package/src/CdcMap.jsx

@@ -37,7 +37,7 @@ import numberFromString from '@cdc/core/helpers/numberFromString'
 
 // Child Components
 import ConfigContext from './context'
-import Filters from './components/Filters'
+import Filters, { useFilters } from '@cdc/core/components/Filters'
 import Modal from './components/Modal'
 import Sidebar from './components/Sidebar'
 
@@ -82,13 +82,13 @@ const hashObj = row => {
 
     return hash
   } catch (e) {
-    console.error(e)
+    console.error('COVE: ', e) // eslint-disable-line
   }
 }
 
 const indexOfIgnoreType = (arr, item) => {
   for (let i = 0; i < arr.length; i++) {
-    if (item == arr[i]) {
+    if (item === arr[i]) {
       return i
     }
   }
@@ -112,7 +112,7 @@ const getUniqueValues = (data, columnName) => {
   return Object.keys(result)
 }
 
-const CdcMap = ({ className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, configUrl, logo = null, setConfig, setSharedFilter, setSharedFilterValue, hostname = 'localhost:8080', link }) => {
+const CdcMap = ({ className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, isDebug = false, configUrl, logo = null, setConfig, setSharedFilter, setSharedFilterValue, hostname = 'localhost:8080', link }) => {
   const transform = new DataTransform()
   const [state, setState] = useState({ ...initialState })
   const [loading, setLoading] = useState(true)
@@ -127,7 +127,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
   const [container, setContainer] = useState()
   const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`) // eslint-disable-line
+  const [dimensions, setDimensions] = useState()
 
+  const { changeFilterActive, handleSorting } = useFilters({ config: state, setConfig: setState })
   let legendMemo = useRef(new Map())
   let innerContainerRef = useRef()
 
@@ -145,9 +147,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         })
       }
     } catch (e) {
-      console.error('Failed to set world map zoom.')
+      console.error('COVE: Failed to set world map zoom.') // eslint-disable-line
     }
-  }, [filteredCountryCode])
+  }, [filteredCountryCode]) // eslint-disable-line
 
   useEffect(() => {
     setTimeout(() => {
@@ -159,7 +161,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         setRuntimeData(tmpData)
       }
     }, 100)
-  }, [filteredCountryCode])
+  }, [filteredCountryCode]) // eslint-disable-line
 
   useEffect(() => {
     if (state.mapPosition) {
@@ -167,16 +169,47 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }, [state.mapPosition, setPosition])
 
+  const generateRuntimeLegendHash = () => {
+    return hashObj({
+      unified: state.legend.unified ?? false,
+      equalNumberOptIn: state.general.equalNumberOptIn ?? false,
+      specialClassesLast: state.legend.showSpecialClassesLast ?? false,
+      color: state.color,
+      customColors: state.customColors,
+      numberOfItems: state.legend.numberOfItems,
+      type: state.legend.type,
+      separateZero: state.legend.separateZero ?? false,
+      primary: state.columns.primary.name,
+      categoryValuesOrder: state.legend.categoryValuesOrder,
+      specialClasses: state.legend.specialClasses,
+      geoType: state.general.geoType,
+      data: state.data,
+      ...runtimeFilters,
+      filters: {
+        ...state.filters
+      }
+    })
+  }
+
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
+      let { width, height } = entry.contentRect
       let newViewport = getViewport(entry.contentRect.width)
+      let svgMarginWidth = 32
+      let editorWidth = 350
 
       setCurrentViewport(newViewport)
+
+      if (isEditor) {
+        width = width - editorWidth
+      }
+      setDimensions([width, height])
     }
   })
 
   // Tag each row with a UID. Helps with filtering/placing geos. Not enumerable so doesn't show up in loops/console logs except when directly addressed ex row.uid
   // We are mutating state in place here (depending on where called) - but it's okay, this isn't used for rerender
+  // eslint-disable-next-line
   const addUIDs = useCallback((obj, fromColumn) => {
     obj.data.forEach(row => {
       let uid = null
@@ -225,6 +258,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         const geoName = row[obj.columns.geo.name]
 
         uid = countryKeys.find(key => supportedCountries[key].includes(geoName))
+
+        // Cities
+        if (!uid && 'world-geocode' === state.general.type) {
+          uid = cityKeys.find(key => key === geoName?.toUpperCase())
+        }
       }
 
       // County Check
@@ -248,9 +286,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     obj.data.fromColumn = fromColumn
   })
 
+  // eslint-disable-next-line
   const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
     const newLegendMemo = new Map() // Reset memoization
-    const primaryCol = obj.columns.primary.name,
+    let primaryCol = obj.columns.primary.name,
       isBubble = obj.general.type === 'bubble',
       categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
       type = obj.legend.type,
@@ -262,6 +301,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       result.fromHash = hash
     }
 
+    result.runtimeDataHash = runtimeData.fromHash
+
     // Unified will based the legend off ALL of the data maps received. Otherwise, it will use
     let dataSet = obj.legend.unified ? obj.data : Object.values(runtimeData)
 
@@ -457,6 +498,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       }
 
       legendMemo.current = newLegendMemo
+
+      result.forEach((row, i) => {
+        row.bin = i // set bin number to index
+      })
+
       return result
     }
 
@@ -536,6 +582,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
           let min = removedRows[0][primaryCol],
             max = removedRows[removedRows.length - 1][primaryCol]
 
+          // eslint-disable-next-line
           removedRows.forEach(row => {
             newLegendMemo.set(hashObj(row), result.length)
           })
@@ -574,6 +621,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
           breaks.unshift(0)
         }
 
+        // eslint-disable-next-line array-callback-return
         breaks.map((item, index) => {
           const setMin = index => {
             let min = breaks[index]
@@ -646,7 +694,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
 
     // Equal Interval
-
     if (type === 'equalinterval' && dataSet?.length !== 0) {
       if (!dataSet || dataSet.length === 0) {
         setState({
@@ -695,11 +742,29 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     })
 
     legendMemo.current = newLegendMemo
+
+    //----------
+    // DEV-784
+    // before returning the legend result
+    // add property for bin number and set to index location
+    result.forEach((row, i) => {
+      row.bin = i // set bin number to index
+    })
+
+    // Move all special legend items from "Special Classes"  to the end of the legend
+    if (state.legend.showSpecialClassesLast) {
+      let specialRows = result.filter(d => d.special === true)
+      let otherRows = result.filter(d => !d.special)
+      result = [...otherRows, ...specialRows]
+    }
+    //-----------
+
     return result
   })
 
+  // eslint-disable-next-line
   const generateRuntimeFilters = useCallback((obj, hash, runtimeFilters) => {
-    if (undefined === obj.filters || obj.filters.length === 0) return []
+    if (typeof obj === 'undefined' || undefined === obj.filters || obj.filters.length === 0) return []
 
     let filters = []
 
@@ -738,10 +803,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         newFilter = {}
       }
 
+      newFilter.order = obj.filters[idx].order ? obj.filters[idx].order : 'asc'
       newFilter.label = label ?? ''
       newFilter.columnName = columnName
       newFilter.values = values
-      newFilter.active = active || values[0] // Default to first found value
+      handleSorting(newFilter)
+      newFilter.active = active ?? values[0] // Default to first found value
+      newFilter.filterStyle = obj.filters[idx].filterStyle ? obj.filters[idx].filterStyle : 'dropdown'
 
       filters.push(newFilter)
     })
@@ -750,21 +818,21 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   })
 
   // Calculates what's going to be displayed on the map and data table at render.
+  // eslint-disable-next-line
   const generateRuntimeData = useCallback((obj, filters, hash, test) => {
     try {
       const result = {}
 
-      if (hash) {
-        // Adding property this way prevents it from being enumerated
-        Object.defineProperty(result, 'fromHash', {
-          value: hash
-        })
-      }
+      // Adding property this way prevents it from being enumerated
+      Object.defineProperty(result, 'fromHash', {
+        value: hash
+      })
 
+      addUIDs(obj, obj.columns.geo.name)
       obj.data.forEach(row => {
         if (test) {
-          console.log('object', obj)
-          console.log('row', row)
+          console.log('object', obj) // eslint-disable-line
+          console.log('row', row) // eslint-disable-line
         }
 
         if (undefined === row.uid) return false // No UID for this row, we can't use for mapping
@@ -807,7 +875,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
       return result
     } catch (e) {
-      console.error(e)
+      console.error('COVE: ', e) // eslint-disable-line
     }
   })
 
@@ -816,7 +884,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       resizeObserver.observe(node)
     }
     setContainer(node)
-  }, [])
+  }, []) // eslint-disable-line
 
   const mapSvg = useRef(null)
 
@@ -826,33 +894,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
 
-  const changeFilterActive = async (idx, activeValue) => {
-    // Reset active legend toggles
-    resetLegendToggles()
-
-    try {
-      const isEmpty = obj => {
-        return Object.keys(obj).length === 0
-      }
-
-      let filters = [...runtimeFilters]
-
-      filters[idx] = { ...filters[idx] }
-      filters[idx].active = activeValue
-
-      const newData = generateRuntimeData(state, filters)
-
-      // throw an error if newData is empty
-      if (isEmpty(newData)) throw new Error('Cove Filter Error: No runtime data to set for this filter')
-
-      // set the runtime filters and data
-      setRuntimeData(newData)
-      setRuntimeFilters(filters)
-    } catch (e) {
-      console.error(e.message)
-    }
-  }
-
   const displayDataAsText = (value, columnName) => {
     if (value === null || value === '' || value === undefined) {
       return ''
@@ -897,6 +938,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     return formattedValue
   }
 
+  // this is passed DOWN into the various components
+  // then they do a lookup based on the bin number as index into here (TT)
   const applyLegendToRow = rowObj => {
     try {
       if (!rowObj) throw new Error('COVE: No rowObj in applyLegendToRow')
@@ -911,13 +954,17 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       if (legendMemo.current.has(hash)) {
         let idx = legendMemo.current.get(hash)
         if (runtimeLegend[idx]?.disabled) return false
-        return generateColorsArray(runtimeLegend[idx]?.color, runtimeLegend[idx]?.special)
+
+        // DEV-784 changed to use bin prop to get color instead of idx
+        // bc we re-order legend when showSpecialClassesLast is checked
+        let legendBinColor = runtimeLegend.find(o => o.bin === idx)?.color
+        return generateColorsArray(legendBinColor, runtimeLegend[idx]?.special)
       }
 
       // Fail state
       return generateColorsArray()
     } catch (e) {
-      console.error(e)
+      console.error('COVE: ', e) // eslint-disable-line
     }
   }
 
@@ -927,6 +974,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     // Adds geo label, ie State: Georgia
     let stateOrCounty = state.general.geoType === 'us' ? 'State: ' : state.general.geoType === 'us-county' || state.general.geoType === 'single-state' ? 'County: ' : ''
+
     // check the override
     stateOrCounty = state.general.geoLabelOverride !== '' ? state.general.geoLabelOverride + ': ' : stateOrCounty
 
@@ -939,7 +987,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>` : `<strong>${displayGeoName(geoName)}</strong>`
 
-    if (('data' === state.general.type || state.general.type === 'bubble' || state.general.type === 'us-geocode') && undefined !== row) {
+    if (('data' === state.general.type || state.general.type === 'bubble' || state.general.type === 'us-geocode' || state.general.type === 'world-geocode') && undefined !== row) {
       toolTipText += `<dl>`
 
       Object.keys(state.columns).forEach(columnKey => {
@@ -951,10 +999,15 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
           let value
 
           if (state.legend.specialClasses && state.legend.specialClasses.length && typeof state.legend.specialClasses[0] === 'object') {
+            // THIS CODE SHOULD NOT ACT ON THE ENTIRE ROW OF KEYS BUT ONLY THE ONE KEY IN THE SPECIAL CLASS
             for (let i = 0; i < state.legend.specialClasses.length; i++) {
-              if (String(row[state.legend.specialClasses[i].key]) === state.legend.specialClasses[i].value) {
-                value = displayDataAsText(state.legend.specialClasses[i].label, columnKey)
-                break
+              // DEV-3303 - Special Classes label in HOVERS should only apply to selected special class key
+              // - you have to ALSO check that the key matches - putting here otherwise the if stmt too long
+              if (columnKey === state.legend.specialClasses[i].key) {
+                if (String(row[state.legend.specialClasses[i].key]) === state.legend.specialClasses[i].value) {
+                  value = displayDataAsText(state.legend.specialClasses[i].label, columnKey)
+                  break
+                }
               }
             }
           }
@@ -1024,6 +1077,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       delete legendItem.disabled
     })
 
+    newLegend.runtimeDataHash = runtimeLegend.runtimeDataHash
+
     setRuntimeLegend(newLegend)
   }
 
@@ -1100,6 +1155,17 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       setSharedFilter(state.uid, value)
     }
 
+    // If world-geocode map zoom to geo point
+    if ('world-geocode' === state.general.type) {
+      let lat = value[state.columns.latitude.name]
+      let long = value[state.columns.longitude.name]
+
+      setState({
+        ...state,
+        mapPosition: { coordinates: [long, lat], zoom: 3 }
+      })
+    }
+
     // If modals are set or we are on a mobile viewport, display modal
     if (window.matchMedia('(any-hover: none)').matches || 'click' === state.tooltips.appearanceType) {
       setModal({
@@ -1131,7 +1197,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
 
   const handleMapAriaLabels = (state = '', testing = false) => {
-    if (testing) console.log(`handleMapAriaLabels Testing On: ${state}`)
+    if (testing) console.log(`handleMapAriaLabels Testing On: ${state}`) // eslint-disable-line
     try {
       if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
       let ariaLabel = ''
@@ -1162,7 +1228,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
       return ariaLabel
     } catch (e) {
-      console.error(e.message)
+      console.error('COVE: ', e.message) // eslint-disable-line
     }
   }
 
@@ -1247,28 +1313,28 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   // Initial load
   useEffect(() => {
     init()
-  }, [])
+  }, []) // eslint-disable-line
 
   useEffect(() => {
     if (state && !coveLoadedHasRan && container) {
       publish('cove_loaded', { config: state })
       setCoveLoadedHasRan(true)
     }
-  }, [state, container])
+  }, [state, container]) // eslint-disable-line
 
   useEffect(() => {
     if (state.data) {
       let newData = generateRuntimeData(state)
       setRuntimeData(newData)
     }
-  }, [state.general.statePicked])
+  }, [state.general.statePicked]) // eslint-disable-line
 
   useEffect(() => {
     // When geotype changes - add UID
     if (state.data && state.columns.geo.name) {
       addUIDs(state, state.columns.geo.name)
     }
-  }, [state])
+  }, [state]) // eslint-disable-line
 
   // DEV-769 make "Data Table" both a required field and default value
   useEffect(() => {
@@ -1281,13 +1347,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         }
       })
     }
-  }, [state.dataTable])
+  }, [state.dataTable]) // eslint-disable-line
 
   // When geo label override changes
   // - redo the tooltips
   useEffect(() => {
     applyTooltipsToGeo()
-  }, [state.general.geoLabelOverride])
+  }, [state.general.geoLabelOverride]) // eslint-disable-line
 
   useEffect(() => {
     // UID
@@ -1307,76 +1373,57 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       }
     }
 
-    const hashLegend = hashObj({
-      color: state.color,
-      customColors: state.customColors,
-      numberOfItems: state.legend.numberOfItems,
-      type: state.legend.type,
-      separateZero: state.legend.separateZero ?? false,
-      categoryValuesOrder: state.legend.categoryValuesOrder,
-      specialClasses: state.legend.specialClasses,
-      geoType: state.general.geoType,
-      data: state.data,
-      ...runtimeLegend,
-      ...runtimeFilters
-    })
+    const hashLegend = generateRuntimeLegendHash()
 
     const hashData = hashObj({
+      data: state.data,
       columns: state.columns,
       geoType: state.general.geoType,
       type: state.general.type,
       geo: state.columns.geo.name,
       primary: state.columns.primary.name,
-      data: state.data,
-      ...runtimeFilters,
       mapPosition: state.mapPosition,
       ...runtimeFilters
     })
 
     // Data
-    let newRuntimeData
     if (hashData !== runtimeData.fromHash && state.data?.fromColumn) {
       const newRuntimeData = generateRuntimeData(state, filters || runtimeFilters, hashData)
       setRuntimeData(newRuntimeData)
+    } else {
+      if (hashLegend !== runtimeLegend.fromHash && undefined === runtimeData.init) {
+        const legend = generateRuntimeLegend(state, runtimeData, hashLegend)
+        setRuntimeLegend(legend)
+      }
     }
-
-    // Legend
-    if (hashLegend !== runtimeLegend.fromHash && (undefined === runtimeData.init || newRuntimeData)) {
-      const legend = generateRuntimeLegend(state, newRuntimeData || runtimeData, hashLegend)
-      setRuntimeLegend(legend)
-    }
-  }, [state])
+  }, [state]) // eslint-disable-line
 
   useEffect(() => {
-    const hashLegend = hashObj({
-      color: state.color,
-      customColors: state.customColors,
-      numberOfItems: state.legend.numberOfItems,
-      type: state.legend.type,
-      separateZero: state.legend.separateZero ?? false,
-      categoryValuesOrder: state.legend.categoryValuesOrder,
-      specialClasses: state.legend.specialClasses,
-      geoType: state.general.geoType,
-      data: state.data
-    })
+    const hashLegend = generateRuntimeLegendHash()
 
     // Legend - Update when runtimeData does
     if (hashLegend !== runtimeLegend.fromHash && undefined === runtimeData.init) {
-      const legend = generateRuntimeLegend(state, runtimeData)
+      const legend = generateRuntimeLegend(state, runtimeData, hashLegend)
       setRuntimeLegend(legend)
     }
-  }, [runtimeData])
+  }, [runtimeData, state.legend.unified, state.legend.showSpecialClassesLast, state.legend.separateZero, state.general.equalNumberOptIn, state.legend.numberOfItems, state.legend.specialClasses]) // eslint-disable-line
 
   if (config) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       loadConfig(config)
-    }, [config.data])
+    }, [config.data]) // eslint-disable-line
   }
 
   // Destructuring for more readable JSX
   const { general, tooltips, dataTable } = state
-  const { title = '', subtext = '' } = general
+  let { title, subtext = '' } = general
+
+  // if no title AND in editor then set a default
+  if (isEditor) {
+    if (!title || title === '') title = 'Map Title'
+  }
+  if (!dataTable.title || dataTable.title === '') dataTable.title = 'Data Table'
 
   // Outer container classes
   let outerContainerClasses = ['cdc-open-viz-module', 'cdc-map-outer-container', currentViewport]
@@ -1421,7 +1468,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     handleMapAriaLabels,
     runtimeFilters,
     setRuntimeFilters,
-    innerContainerRef
+    innerContainerRef,
+    currentViewport,
+    isDebug
   }
 
   if (!mapProps.data || !state.data) return <Loading />
@@ -1452,16 +1501,35 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   const tabId = handleMapTabbing()
 
+  // this only shows in Dashboard config mode and only if Show Table is also set
+  const tableLink = (
+    <a href={`#data-table-${state.general.dataKey}`} className='margin-left-href'>
+      {state.general.dataKey} (Go to Table)
+    </a>
+  )
+
   return (
     <ConfigContext.Provider value={mapProps}>
       <div className={outerContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
-        {isEditor && <EditorPanel isDashboard={isDashboard} state={state} setState={setState} loadConfig={loadConfig} setParentConfig={setConfig} setRuntimeFilters={setRuntimeFilters} runtimeFilters={runtimeFilters} runtimeLegend={runtimeLegend} columnsInData={Object.keys(state.data[0])} />}
+        {isEditor && (
+          <EditorPanel
+            isDashboard={isDashboard}
+            isDebug={isDebug}
+            state={state}
+            setState={setState}
+            loadConfig={loadConfig}
+            setParentConfig={setConfig}
+            setRuntimeFilters={setRuntimeFilters}
+            runtimeFilters={runtimeFilters}
+            runtimeLegend={runtimeLegend}
+            columnsInData={Object.keys(state.data[0])}
+            changeFilterActive={changeFilterActive}
+          />
+        )}
         {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
           <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
-            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType &&
-              <ReactTooltip id="tooltip" variant="light" float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} />
-            }
-            {state.general.title && (
+            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && <ReactTooltip id='tooltip' variant='light' float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} />}
+            {title && (
               <header className={general.showTitle === true ? 'visible' : 'hidden'} {...(!general.showTitle || !state.general.title ? { 'aria-hidden': true } : { 'aria-hidden': false })}>
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
                 <div role='heading' className={'map-title ' + general.headerColor} tabIndex='0' aria-level='2'>
@@ -1470,11 +1538,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                 </div>
               </header>
             )}
-            {general.introText &&
-              <section className='introText'>{parse(general.introText)}</section>
-            }
+            {general.introText && <section className='introText'>{parse(general.introText)}</section>}
 
-            <Filters />
+            {/* prettier-ignore */}
+            {state?.filters?.length > 0 && <Filters config={state} setConfig={setState} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
 
             <div
               role='button'
@@ -1528,7 +1595,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
             {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
 
-            {link && link}
+            {/* Link */}
+            {isDashboard && config.dataTable.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
 
             {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}