@cdc/map 4.25.6-1 → 4.25.7-2

package/index.html

@@ -34,6 +34,15 @@
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script type="module" src="./src/index.jsx"></script>
+  <!-- add cove_loaded listener -->
+  <!-- <script>
+    document.addEventListener('cove_loaded', function () {
+      // This is a temporary fix to ensure the map loads after Cove has loaded
+      // and the cdc-map-outer-container is available.
+      debugger
+      console.log('Cove has loaded, initializing map...');
+    });
+  </script> -->
 </body>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.25.6-1",
+  "version": "4.25.7-2",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -25,7 +25,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.25.6-1",
+    "@cdc/core": "^4.25.7",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-google-maps/api": "^2.20.6",
@@ -45,5 +45,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ac45ee0f1d6a4045648c4e083992fc091795e084"
+  "gitHead": "432a2d1acab22915fafe793cb9da1f10318ff793"
 }

package/src/CdcMap.tsx

@@ -6,6 +6,7 @@ import initialState from './data/initial-state'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import { addUIDs, validateFipsCodeLength } from './helpers'
 import EditorContext from '@cdc/editor/src/ConfigContext'
+import { extractCoveData, updateVegaData } from '@cdc/core/helpers/vegaConfig'
 import { MapConfig } from './types/MapConfig'
 import _, { set } from 'lodash'
 
@@ -53,6 +54,10 @@ const CdcMap: React.FC<CdcMapProps> = ({
     if (newState.dataUrl) {
       let newData = await fetchRemoteData(newState.dataUrl, 'map')
 
+      if (newState.vegaConfig) {
+        newData = extractCoveData(updateVegaData(newState.vegaConfig, newData))
+      }
+
       if (newData && newState.dataDescription) {
         newData = transform.autoStandardize(newData)
         newData = transform.developerStandardize(newData, newState.dataDescription)

package/src/CdcMapComponent.tsx

@@ -242,12 +242,39 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     }
   }
 
-  useEffect(() => {
-    if (config && !runtimeData.init && !coveLoadedHasRan && container) {
-      publish('cove_loaded', { config: config })
+  /**
+   * Publishes 'cove_loaded' only after the map SVG is rendered in the DOM.
+   * Checks immediately, then uses a MutationObserver as a fallback for async rendering.
+   * Update the mapSvg ref if the map container changes.
+   */
+  const observeMapSvgLoaded = (mapSvgRef, config, coveLoadedHasRan, publish, dispatch) => {
+    // Immediate check in case SVG is already present
+    const svgEl = mapSvgRef.current?.querySelector('svg')
+    if (svgEl && svgEl.childNodes.length > 0) {
+      publish('cove_loaded', { config })
       dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
+      return () => {}
     }
-  }, [config, container, runtimeData.init])
+
+    // Fallback to observer for async SVG rendering
+    const observer = new MutationObserver(() => {
+      const svgEl = mapSvgRef.current?.querySelector('svg')
+      if (svgEl && svgEl.childNodes.length > 0) {
+        publish('cove_loaded', { config })
+        dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
+        observer.disconnect()
+      }
+    })
+
+    observer.observe(mapSvgRef.current, { childList: true, subtree: true })
+
+    return () => observer.disconnect()
+  }
+
+  useEffect(() => {
+    if (!mapSvg.current || coveLoadedHasRan) return
+    return observeMapSvgLoaded(mapSvg, config, coveLoadedHasRan, publish, dispatch)
+  }, [config, loading, runtimeData, coveLoadedHasRan])
 
   useEffect(() => {
     // UID

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

@@ -1104,8 +1104,9 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                 </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')
@@ -3110,19 +3111,19 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               )}
               {(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
@@ -3156,42 +3157,42 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               {(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/Legend.tsx

@@ -135,6 +135,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
             }
           }}
           tabIndex={0}
+          role='button'
         >
           <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
           <span>{item.label}</span>
@@ -313,41 +314,41 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
             {((config.visual.additionalCityStyles && config.visual.additionalCityStyles.some(c => c.label)) ||
               config.visual.cityStyleLabel) && (
-              <>
-                <hr />
-                <div className={legendClasses.div.join(' ') || ''}>
-                  {config.visual.cityStyleLabel && (
-                    <div>
-                      <svg>
-                        <Group
-                          top={
-                            config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
-                          }
-                          left={10}
-                        >
-                          {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
-                        </Group>
-                      </svg>
-                      <p>{config.visual.cityStyleLabel}</p>
-                    </div>
-                  )}
-
-                  {config.visual.additionalCityStyles.map(
-                    ({ shape, label }) =>
-                      label && (
-                        <div>
-                          <svg>
-                            <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
-                              {cityStyleShapes[shape.toLowerCase()]}
-                            </Group>
-                          </svg>
-                          <p>{label}</p>
-                        </div>
-                      )
-                  )}
-                </div>
-              </>
-            )}
+                <>
+                  <hr />
+                  <div className={legendClasses.div.join(' ') || ''}>
+                    {config.visual.cityStyleLabel && (
+                      <div>
+                        <svg>
+                          <Group
+                            top={
+                              config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
+                            }
+                            left={10}
+                          >
+                            {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
+                          </Group>
+                        </svg>
+                        <p>{config.visual.cityStyleLabel}</p>
+                      </div>
+                    )}
+
+                    {config.visual.additionalCityStyles.map(
+                      ({ shape, label }) =>
+                        label && (
+                          <div>
+                            <svg>
+                              <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
+                                {cityStyleShapes[shape.toLowerCase()]}
+                              </Group>
+                            </svg>
+                            <p>{label}</p>
+                          </div>
+                        )
+                    )}
+                  </div>
+                </>
+              )}
             {runtimeLegend.disabledAmt > 0 && (
               <Button className={legendClasses.showAllButton.join(' ')} onClick={handleReset}>
                 Show All

package/src/helpers/generateRuntimeLegend.ts

@@ -462,7 +462,7 @@ export const generateRuntimeLegend = (
             if (!assigned) {
               console.warn('Value not assigned to any range:', number, 'assigning to closest range')
               let closestIndex = 0
-              let minDistance = Math.abs(number - ((result.items[0].min + result.items[0].max) / 2))
+              let minDistance = Math.abs(number - (result.items[0].min + result.items[0].max) / 2)
 
               for (let i = 1; i < result.items.length; i++) {
                 const midpoint = (result.items[i].min + result.items[i].max) / 2

package/src/scss/main.scss

@@ -1,8 +1,8 @@
 @import 'mixins';
 @import 'editor-panel';
+@import '@cdc/core/styles/accessibility';
 
 .type-map--has-error {
-
   .waiting {
     display: flex;
     overflow: hidden !important;