@cdc/map 4.25.5-1 → 4.25.6-1

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -11,7 +11,6 @@ import {
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
 import { useDebounce } from 'use-debounce'
 import _ from 'lodash'
-// import ReactTags from 'react-tag-autocomplete'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import Panels from './Panels'
 import Layout from '@cdc/core/components/Layout'
@@ -47,8 +46,14 @@ import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/In
 import useColumnsRequiredChecker from '../../../hooks/useColumnsRequiredChecker'
 import { addUIDs, HEADER_COLORS } from '../../../helpers'
 import './editorPanel.styles.css'
+import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
+import { Datasets } from '@cdc/core/types/DataSet'
 
-const EditorPanel = () => {
+type MapEditorPanelProps = {
+  datasets?: Datasets
+}
+
+const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
   const {
     setParentConfig,
     isDashboard,
@@ -1099,9 +1104,8 @@ const EditorPanel = () => {
                 </span>
                 <ul className='geo-buttons d-grid' style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px' }}>
                   <button
-                    className={`${
-                      config.general.geoType === 'us' || config.general.geoType === 'us-county' ? 'active' : ''
-                    } full-width`}
+                    className={`${config.general.geoType === 'us' || config.general.geoType === 'us-county' ? 'active' : ''
+                      } full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us')
@@ -2236,7 +2240,7 @@ const EditorPanel = () => {
                       checked={legend.singleColumn}
                       onChange={event => {
                         const _newConfig = _.cloneDeep(config)
-                        _newConfig.legend.singleColumn = !event.target.checked
+                        _newConfig.legend.singleColumn = event.target.checked
                         _newConfig.legend.singleRow = false
                         _newConfig.legend.verticalSorted = false
 
@@ -2253,7 +2257,7 @@ const EditorPanel = () => {
                       checked={legend.singleRow}
                       onChange={event => {
                         const _newConfig = _.cloneDeep(config)
-                        _newConfig.legend.singleRow = !event.target.checked
+                        _newConfig.legend.singleRow = event.target.checked
                         _newConfig.legend.singleColumn = false
                         _newConfig.legend.verticalSorted = false
 
@@ -2454,20 +2458,17 @@ const EditorPanel = () => {
                       <DynamicDesc value={legend.descriptions[String(activeFilterValueForDescription)]} />
                     </label>
                     <label>
-                      <select
+                      <Select
+                        label='Filter Value'
                         value={String(activeFilterValueForDescription)}
+                        options={filterValueOptionList.map(arr => ({
+                          value: arr,
+                          label: displayFilterLegendValue(arr)
+                        }))}
                         onChange={event => {
                           handleEditorChanges('changeActiveFilterValue', event.target.value)
                         }}
-                      >
-                        {filterValueOptionList.map((arr, i) => {
-                          return (
-                            <option value={arr} key={i}>
-                              {displayFilterLegendValue(arr)}
-                            </option>
-                          )
-                        })}
-                      </select>
+                      />
                     </label>
                   </React.Fragment>
                 )}
@@ -2529,16 +2530,30 @@ const EditorPanel = () => {
             </AccordionItem>
           )}
           {'navigation' !== config.general.type && (
-            <AccordionItem>
-              {' '}
-              {/* Filters */}
-              <AccordionItemHeading>
-                <AccordionItemButton>Filters</AccordionItemButton>
-              </AccordionItemHeading>
-              <AccordionItemPanel>
-                <VizFilterEditor config={config} updateField={updateField} rawData={config.data} />
-              </AccordionItemPanel>
-            </AccordionItem>
+            <>
+              <AccordionItem>
+                {/* Filters */}
+                <AccordionItemHeading>
+                  <AccordionItemButton>Filters</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <VizFilterEditor
+                    config={config}
+                    updateField={updateField}
+                    rawData={config.data}
+                    hasFootnotes={isDashboard}
+                  />
+                </AccordionItemPanel>
+              </AccordionItem>
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Footnotes</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <FootnotesEditor config={config} updateField={updateField} datasets={datasets} />
+                </AccordionItemPanel>
+              </AccordionItem>
+            </>
           )}
           {'navigation' !== config.general.type && (
             <AccordionItem>
@@ -2609,6 +2624,35 @@ const EditorPanel = () => {
                     </Tooltip>
                   </span>
                 </label>
+                <label className='checkbox'>
+                  <input
+                    type='checkbox'
+                    checked={config.table.showNonGeoData}
+                    onChange={event => {
+                      setConfig({
+                        ...config,
+                        table: {
+                          ...config.table,
+                          showNonGeoData: event.target.checked
+                        }
+                      })
+                    }}
+                  />
+                  <span className='edit-label column-heading'>
+                    Show Non Geographic Data
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon
+                          display='question'
+                          style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                        />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>Show any data not associated with a geographic location</p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  </span>
+                </label>
                 <TextField
                   value={table.indexLabel || ''}
                   updateField={updateField}
@@ -3066,19 +3110,19 @@ const EditorPanel = () => {
               )}
               {(config.general.geoType === 'world' ||
                 (config.general.geoType === 'us' && config.general.type === 'bubble')) && (
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.visual.showBubbleZeros}
-                    onChange={event => {
-                      const _newConfig = _.cloneDeep(config)
-                      _newConfig.visual.showBubbleZeros = event.target.checked
-                      setConfig(_newConfig)
-                    }}
-                  />
-                  <span className='edit-label'>Show Data with Zero's on Bubble Map</span>
-                </label>
-              )}
+                  <label className='checkbox'>
+                    <input
+                      type='checkbox'
+                      checked={config.visual.showBubbleZeros}
+                      onChange={event => {
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.visual.showBubbleZeros = event.target.checked
+                        setConfig(_newConfig)
+                      }}
+                    />
+                    <span className='edit-label'>Show Data with Zero's on Bubble Map</span>
+                  </label>
+                )}
               {(config.general.geoType === 'world' || config.general.geoType === 'single-state') && (
                 <label className='checkbox'>
                   <input
@@ -3112,42 +3156,42 @@ const EditorPanel = () => {
               {(config.general.geoType === 'us' ||
                 config.general.geoType === 'us-county' ||
                 config.general.geoType === 'world') && (
-                <>
-                  <label>
-                    <span className='edit-label'>Default City Style</span>
-                    <select
-                      value={config.visual.cityStyle || false}
-                      onChange={event => {
-                        handleEditorChanges('handleCityStyle', event.target.value)
-                      }}
-                    >
-                      <option value='circle'>Circle</option>
-                      <option value='pin'>Pin</option>
-                      <option value='square'>Square</option>
-                      <option value='triangle'>Triangle</option>
-                      <option value='diamond'>Diamond</option>
-                      <option value='star'>Star</option>
-                    </select>
-                  </label>
-                  <TextField
-                    value={config.visual.cityStyleLabel}
-                    section='visual'
-                    fieldName='cityStyleLabel'
-                    label='Label (Optional) '
-                    updateField={updateField}
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>When a label is provided, the default city style will appear in the legend.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
-                </>
-              )}
+                  <>
+                    <label>
+                      <span className='edit-label'>Default City Style</span>
+                      <select
+                        value={config.visual.cityStyle || false}
+                        onChange={event => {
+                          handleEditorChanges('handleCityStyle', event.target.value)
+                        }}
+                      >
+                        <option value='circle'>Circle</option>
+                        <option value='pin'>Pin</option>
+                        <option value='square'>Square</option>
+                        <option value='triangle'>Triangle</option>
+                        <option value='diamond'>Diamond</option>
+                        <option value='star'>Star</option>
+                      </select>
+                    </label>
+                    <TextField
+                      value={config.visual.cityStyleLabel}
+                      section='visual'
+                      fieldName='cityStyleLabel'
+                      label='Label (Optional) '
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>When a label is provided, the default city style will appear in the legend.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  </>
+                )}
               {/* <AdditionalCityStyles /> */}
               <>
                 {config.visual.additionalCityStyles.length > 0 &&

package/src/components/Legend/components/index.scss

@@ -4,6 +4,7 @@
   .map-container.world aside.side {
     border-top: 0;
   }
+
   @include breakpointClass(md) {
     .map-container.world aside.side {
       border-top: var(--cool-gray-10) 1px solid;
@@ -19,10 +20,12 @@
     border-radius: 6px;
 
     @include breakpointClass(md) {
+
       &.bottom,
       &.top {
         border: var(--cool-gray-10) 1px solid;
       }
+
       &.side {
         z-index: 1;
         box-sizing: content-box;
@@ -40,7 +43,8 @@
           display: block;
           column-count: 2;
           column-fill: balance;
-          & > li {
+
+          &>li {
             white-space: nowrap;
           }
         }
@@ -53,6 +57,7 @@
           flex-wrap: wrap;
         }
       }
+
       &.no-border {
         border: none;
       }
@@ -84,12 +89,15 @@
         padding-bottom: 0;
         display: inline-block;
       }
+
       .legend-container__description {
         font-size: var(--legend-description-font-size);
       }
+
       .legend-container__reset-button {
         margin-top: 1em;
       }
+
       p {
         line-height: 1.4em;
       }
@@ -99,7 +107,9 @@
         row-gap: var(--space-between-legend-item-rows);
         column-gap: var(--space-between-legend-item-columns);
       }
-      .legend-container__ul:not(.single-row) {
+
+
+      .legend-container__ul:not(.single-row, .legend-container__ul--single-column) {
         list-style: none;
         display: grid !important;
         grid-template-columns: 1fr;
@@ -114,12 +124,28 @@
         }
 
         &.vertical-sorted {
-          flex-direction: column;
+          // Remove the grid overrides - let the existing column rules handle this
+          display: block !important; // Switch from grid to block to enable columns
+
+          @include breakpoint(md) {
+            column-count: 2;
+            column-fill: balance;
+          }
+
+          // Add spacing between legend items in vertical sorted mode
+          .legend-container__li {
+            margin-bottom: var(--space-between-legend-item-rows);
+
+            &:last-child {
+              margin-bottom: 0; // Remove margin from last item
+            }
+          }
         }
 
         &:not(.vertical-sorted, .legend-container__ul--single-column, .single-row) {
           width: 100%;
         }
+
         .legend-container__li {
           display: flex;
           align-items: center;
@@ -142,6 +168,7 @@
           &:last-child {
             margin-bottom: 0;
           }
+
           @include breakpoint(md) {
             white-space: nowrap;
           }
@@ -149,6 +176,7 @@
           &.legend-container__li--disabled {
             opacity: 0.4;
           }
+
           &.legend-container__li--not-disabled {
             outline: 1px solid #005ea2;
             outline-offset: 5px;
@@ -156,6 +184,7 @@
           }
         }
       }
+
       .legend-container__ul.single-row {
         width: 100%;
         cursor: pointer;
@@ -166,12 +195,13 @@
         justify-content: flex-start;
         flex-wrap: wrap;
 
-        & > li {
+        &>li {
           white-space: wrap;
           display: flex;
           justify-content: center;
           align-items: center;
           vertical-align: middle;
+
           @include breakpoint(md) {
             white-space: nowrap;
           }
@@ -181,6 +211,7 @@
           }
         }
       }
+
       .legend-container__ul.patterns-only {
         margin-top: 10px;
       }
@@ -203,19 +234,24 @@
       @include breakpointClass(md) {
         width: 25%;
         min-width: 200px;
+
         .legend-section ul {
           flex-direction: column;
+
           li {
             width: 100%;
+
             &:nth-last-of-type(-n + 2) {
               padding-bottom: 1em;
             }
+
             &:last-child {
               padding-bottom: 0;
             }
           }
         }
       }
+
       li {
         width: 100%;
       }
@@ -225,6 +261,7 @@
       .legend-container ul:not(.single-row) {
         align-items: flex-start;
         justify-content: space-between;
+
         li {
           flex-grow: 1;
           padding-right: 0.5em;
@@ -234,24 +271,29 @@
 
     .filters-section {
       padding: 0 1em 1em;
+
       .heading-3 {
         font-weight: bold;
         margin-bottom: 0.5em;
       }
+
       form {
         margin-top: 0.5em;
         line-height: 2em;
         display: flex;
         align-items: flex-end;
-        section + section {
+
+        section+section {
           margin-left: 0.75em;
         }
+
         select {
           display: block;
           font-size: 1em;
         }
       }
     }
+
     & .shape-container {
       &.single-row {
         display: flex;
@@ -260,26 +302,29 @@
         justify-content: flex-start;
         flex-wrap: wrap;
 
-        & > div {
+        &>div {
           margin-right: 2em;
         }
-        & > div:last-child {
+
+        &>div:last-child {
           margin-right: 0;
         }
       }
 
-      & > div {
+      &>div {
         display: flex;
         flex-direction: row;
       }
-      & div > svg {
+
+      & div>svg {
         width: 25px;
         height: 32px;
       }
-      & div > p {
+
+      & div>p {
         white-space: nowrap;
         margin-top: 1px;
       }
     }
   }
-}
+}

package/src/components/UsaMap/components/UsaMap.SingleState.tsx

@@ -23,25 +23,28 @@ import { titleCase, handleMapAriaLabels, getGeoStrokeColor, MAX_ZOOM_LEVEL } fro
 import { getTopoData, getCurrentTopoYear, isTopoReady } from '../helpers/map'
 import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { SVG_WIDTH, SVG_HEIGHT, SVG_PADDING, SVG_VIEWBOX } from '../../../helpers'
+import _ from 'lodash'
+import { getStatePicked } from '../../../helpers/getStatePicked'
 
-const SingleStateMap = () => {
+const SingleStateMap: React.FC = () => {
   const {
     config,
     setSharedFilterValue,
     isFilterValueSupported,
     runtimeFilters,
+    runtimeData,
     tooltipId,
     position,
-    stateToShow,
     topoData,
     scale,
-    translate,
-    legendMemo,
-    legendSpecialClassLastMemo
+    translate
   } = useContext<MapContext>(ConfigContext)
 
   const dispatch = useContext(MapDispatchContext)
-  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleReset, projection, statePicked } = useStateZoom(topoData)
+  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleReset, projection } = useStateZoom(topoData)
+  const statePicked = getStatePicked(config, runtimeData)
+  const stateToShow = topoData?.states?.find(s => s.properties.name === statePicked.stateName)
+
   const { geoClickHandler } = useGeoClickHandler()
 
   const cityListProjection = geoAlbersUsaTerritories()
@@ -50,11 +53,6 @@ const SingleStateMap = () => {
   const geoStrokeColor = getGeoStrokeColor(config)
   const path = geoPath().projection(projection)
 
-  useEffect(() => {
-    const stateToShow = topoData?.states?.find(s => s.properties.name === config.general.statePicked.stateName)
-    dispatch({ type: 'SET_STATE_TO_SHOW', payload: stateToShow })
-  }, [statePicked])
-
   useEffect(() => {
     let currentYear = getCurrentTopoYear(config, runtimeFilters)
 
@@ -75,7 +73,7 @@ const SingleStateMap = () => {
 
   const checkForNoData = () => {
     // If no statePicked, return true
-    if (!config.general.statePicked.fipsCode) return true
+    if (!statePicked.fipsCode) return true
   }
 
   // Constructs and displays markup for all geos on the map (except territories right now)
@@ -123,7 +121,7 @@ const SingleStateMap = () => {
   }
   return (
     <ErrorBoundary component='SingleStateMap'>
-      {statePicked && config.general.allowMapZoom && config.general.statePicked.fipsCode && (
+      {statePicked && config.general.allowMapZoom && statePicked.fipsCode && (
         <svg
           viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
@@ -152,7 +150,7 @@ const SingleStateMap = () => {
               data={[
                 {
                   states: topoData?.states,
-                  counties: topoData.counties.filter(c => c.id.substring(0, 2) === config.general.statePicked.fipsCode)
+                  counties: topoData.counties.filter(c => c.id.substring(0, 2) === statePicked.fipsCode)
                 }
               ]}
               projection={geoAlbersUsaTerritories}
@@ -184,7 +182,7 @@ const SingleStateMap = () => {
           </ZoomableGroup>
         </svg>
       )}
-      {statePicked && !config.general.allowMapZoom && config.general.statePicked.fipsCode && (
+      {statePicked && !config.general.allowMapZoom && statePicked.fipsCode && (
         <svg
           viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
@@ -203,7 +201,7 @@ const SingleStateMap = () => {
             data={[
               {
                 states: topoData?.states,
-                counties: topoData.counties.filter(c => c.id.substring(0, 2) === config.general.statePicked.fipsCode)
+                counties: topoData.counties.filter(c => c.id.substring(0, 2) === statePicked.fipsCode)
               }
             ]}
             projection={geoAlbersUsaTerritories}
@@ -215,7 +213,7 @@ const SingleStateMap = () => {
               stateToShow
             ]}
           >
-            {({ features, projection }) => {
+            {({ features }) => {
               return (
                 <g
                   id='mapGroup'
@@ -226,7 +224,7 @@ const SingleStateMap = () => {
                   data-scale=''
                   key='countyMapGroup'
                 >
-                  {constructGeoJsx(features, projection)}
+                  {constructGeoJsx(features)}
                 </g>
               )
             }}

package/src/helpers/addUIDs.ts

@@ -9,7 +9,6 @@ import {
 
 import { SUPPORTED_DC_NAMES, GEO_TYPES, GEOCODE_TYPES } from './constants'
 import { DataRow, MapConfig } from '../types/MapConfig'
-import { memoize } from 'lodash'
 
 // Data props
 const stateKeys = Object.keys(supportedStates)
@@ -65,8 +64,8 @@ const handleUSLocation = (row: DataRow, geoColumn: string, displayAsHex: boolean
     uid = memoizedFindUID(geoName, 'territory')
   }
 
-  if (!uid) uid = findCityUID(geoName)
   if (!uid) uid = handleDCDisplay(geoName, displayAsHex)
+  if (!uid) uid = findCityUID(geoName)
 
   return uid
 }

package/src/helpers/formatLegendLocation.ts

@@ -1,6 +1,8 @@
 import { stateFipsToTwoDigit, supportedCounties } from '../data/supported-geos'
 import { titleCase } from './titleCase'
 
+const countyKeySet = new Set(Object.keys(supportedCounties))
+
 export const formatLegendLocation = (key, runtimeLookup) => {
   let formattedName = ''
 
@@ -9,8 +11,7 @@ export const formatLegendLocation = (key, runtimeLookup) => {
     formattedName += stateName
   }
 
-  const countyKeys = Object.keys(supportedCounties)
-  if (countyKeys.includes(key)) {
+  if (countyKeySet.has(key)) {
     formattedName += ', ' + titleCase(supportedCounties[key])
   }
 

package/src/helpers/generateRuntimeData.ts

@@ -8,7 +8,8 @@ const generateRuntimeData = (
   configObj: MapConfig,
   filters: VizFilter[],
   hash: number,
-  isCategoryLegend: boolean
+  isCategoryLegend: boolean,
+  keepNoUidRows = false
 ): {
   [uid: string]: DataRow
 } => {
@@ -23,7 +24,10 @@ const generateRuntimeData = (
     addUIDs(configObj, configObj.columns.geo.name)
 
     configObj.data.forEach((row: DataRow) => {
-      if (undefined === row.uid) return false // No UID for this row, we can't use for mapping
+      if (!row.uid) {
+        if (!keepNoUidRows) return false // No UID for this row, we can't use for mapping
+        row.uid = row[configObj.columns.geo.name]
+      }
       const configPrimaryName = configObj.columns.primary.name
       const value = row[configPrimaryName]
       const categoryLegend = typeof value === 'string' && isCategoryLegend