@cdc/map 4.24.12 → 4.25.2-25

package/src/_stories/_mock/wastewater-map.json

@@ -1,208 +1,212 @@
 {
-	"annotations": [],
-	"general": {
-		"geoBorderColor": "darkGray",
-		"headerColor": "theme-blue",
-		"title": "",
-		"showTitle": true,
-		"showSidebar": true,
-		"showDownloadButton": true,
-		"showDownloadMediaButton": false,
-		"displayAsHex": false,
-		"displayStateLabels": false,
-		"territoriesLabel": "Territories",
-		"territoriesAlwaysShow": false,
-		"language": "en",
-		"geoType": "us",
-		"geoLabelOverride": "State/Territory",
-		"hasRegions": false,
-		"fullBorder": false,
-		"type": "map",
-		"convertFipsCodes": true,
-		"palette": { "isReversed": false },
-		"allowMapZoom": true,
-		"hideGeoColumnInTooltip": false,
-		"hidePrimaryColumnInTooltip": false,
-		"statePicked": { "fipsCode": "01", "stateName": "Alabama" },
-		"expandDataTable": false,
-		"annotationDropdownText": "Annotations",
-		"noStateFoundMessage": "Map Unavailable",
-		"subtext": "<div class=\"text-left\">Data last updated on <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_as_of\"></span> and presented through <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_Presented_Through\"></span>. "
-	},
-	"type": "map",
-	"color": "greenbluereverse",
-	"columns": {
-		"geo": {
-			"name": "State",
-			"label": "Location",
-			"tooltip": false,
-			"dataTable": true
-		},
-		"primary": {
-			"dataTable": true,
-			"tooltip": true,
-			"prefix": "",
-			"suffix": "",
-			"name": "activity_level_label",
-			"label": "Viral Activity Level",
-			"roundToPlace": 0
-		},
-		"navigate": { "name": "" },
-		"latitude": { "name": "" },
-		"longitude": { "name": "" },
-		"additionalColumn1": {
-			"label": "Sites Currently Reporting",
-			"dataTable": true,
-			"tooltips": false,
-			"prefix": "",
-			"suffix": "",
-			"name": "num_sites",
-			"tooltip": true
-		},
-		"additionalColumn2": {
-			"label": "Limited Coverage",
-			"dataTable": true,
-			"tooltips": false,
-			"prefix": "",
-			"suffix": "",
-			"tooltip": false,
-			"name": "hatch"
-		},
-		"additionalColumn3": {
-			"label": "",
-			"dataTable": false,
-			"tooltips": false,
-			"prefix": "",
-			"suffix": "",
-			"tooltip": true,
-			"useCommas": true,
-			"name": "hatch"
-		}
-	},
-	"legend": {
-		"descriptions": {},
-		"specialClasses": [],
-		"unified": false,
-		"singleColumn": false,
-		"singleRow": true,
-		"verticalSorted": false,
-		"showSpecialClassesLast": true,
-		"dynamicDescription": false,
-		"type": "category",
-		"numberOfItems": 8,
-		"position": "bottom",
-		"title": "Wastewater Viral Activity Level",
-		"categoryValuesOrder": [
-			"Very High",
-			"High",
-			"Moderate",
-			"Low",
-			"Minimal",
-			"No Data"
-		],
-		"additionalCategories": [
-			"No Data",
-			"Minimal",
-			"Low",
-			"Moderate",
-			"High",
-			"Very High"
-		],
-		"description": "",
-		"style": "gradient",
-		"subStyle": "linear blocks",
-		"tickRotation": "",
-		"singleColumnLegend": false,
-		"hideBorder": false
-	},
-	"filters": [
-		{
-			"order": "asc",
-			"label": "Select a virus from the dropdown:",
-			"columnName": "pathogen",
-			"values": ["COVID-19", "Influenza A", "RSV"],
-			"active": "COVID-19",
-			"filterStyle": "dropdown"
-		}
-	],
-	"table": {
-		"label": "Data Table",
-		"expanded": false,
-		"limitHeight": true,
-		"height": "500",
-		"caption": "",
-		"showDownloadUrl": true,
-		"showDataTableLink": true,
-		"showFullGeoNameInCSV": false,
-		"forceDisplay": true,
-		"download": true,
-		"indexLabel": "State/Territory",
-		"wrapColumns": false
-	},
-	"tooltips": {
-		"appearanceType": "hover",
-		"linkLabel": "Learn More",
-		"capitalizeLabels": true,
-		"opacity": 90
-	},
-	"visual": {
-		"minBubbleSize": 1,
-		"maxBubbleSize": 20,
-		"extraBubbleBorder": false,
-		"cityStyle": "circle",
-		"geoCodeCircleSize": 2,
-		"showBubbleZeros": false,
-		"cityStyleLabel": "",
-		"additionalCityStyles": []
-	},
-	"mapPosition": { "coordinates": [0, 30], "zoom": 1 },
-	"map": {
-		"layers": [],
-		"patterns": [
-			{
-				"dataKey": "hatch",
-				"pattern": "lines",
-				"dataValue": "Limited Coverage",
-				"label": "Limited Coverage*",
-				"size": "medium"
-			}
-		]
-	},
-	"hexMap": {
-		"type": "",
-		"shapeGroups": [
-			{
-				"legendTitle": "",
-				"legendDescription": "",
-				"items": [
-					{
-						"key": "",
-						"shape": "Arrow Up",
-						"column": "",
-						"operator": "=",
-						"value": ""
-					}
-				]
-			}
-		]
-	},
-	"filterBehavior": "Filter Change",
-	"customColors": [
-		"#34547B",
-		"#4B7F9B",
-		"#4B7F9B",
-		"#6BB0BD",
-		"#9FDAD0",
-		"#C8EFDA",
-		"#B4B4B4",
-		"#B4B4B4",
-		"#B4B4B4",
-		"#B4B4B4"
-	],
-	"datasets": {},
-	"dataFileName": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json",
-	"dataFileSourceType": "url",
-	"dataDescription": { "horizontal": false, "series": false },
-	"version": "4.24.9",
-	"dataUrl": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json"
+  "annotations": [],
+  "general": {
+    "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "title": "",
+    "showTitle": true,
+    "showSidebar": true,
+    "showDownloadButton": true,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesLabel": "Territories",
+    "territoriesAlwaysShow": false,
+    "language": "en",
+    "geoType": "us",
+    "geoLabelOverride": "State/Territory",
+    "hasRegions": false,
+    "fullBorder": false,
+    "type": "map",
+    "convertFipsCodes": true,
+    "palette": {
+      "isReversed": true
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "statePicked": {
+      "fipsCode": "01",
+      "stateName": "Alabama"
+    },
+    "expandDataTable": false,
+    "annotationDropdownText": "Annotations",
+    "noStateFoundMessage": "Map Unavailable",
+    "subtext": "<div class=\"text-left\">Data last updated on <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_as_of\"></span> and presented through <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_Presented_Through\"></span>. "
+  },
+  "type": "map",
+  "color": "greenbluereverse",
+  "columns": {
+    "geo": {
+      "name": "State",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "activity_level_label",
+      "label": "Viral Activity Level",
+      "roundToPlace": 0
+    },
+    "navigate": {
+      "name": ""
+    },
+    "latitude": {
+      "name": ""
+    },
+    "longitude": {
+      "name": ""
+    },
+    "additionalColumn1": {
+      "label": "Sites Currently Reporting",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "num_sites",
+      "tooltip": true
+    },
+    "additionalColumn2": {
+      "label": "Limited Coverage",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "tooltip": false,
+      "name": "hatch"
+    },
+    "additionalColumn3": {
+      "label": "",
+      "dataTable": false,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "tooltip": true,
+      "useCommas": true,
+      "name": "hatch"
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": true,
+    "verticalSorted": false,
+    "showSpecialClassesLast": true,
+    "dynamicDescription": false,
+    "type": "category",
+    "numberOfItems": 8,
+    "position": "top",
+    "title": "Wastewater Viral Activity Level",
+    "categoryValuesOrder": ["Minimal", "Low", "Moderate", "High", "Very High", "No Data"],
+    "additionalCategories": ["No Data", "Minimal", "Low", "Moderate", "High", "Very High"],
+    "description": "",
+    "style": "gradient",
+    "subStyle": "linear blocks",
+    "tickRotation": "",
+    "singleColumnLegend": false,
+    "hideBorder": true
+  },
+  "filters": [
+    {
+      "order": "asc",
+      "label": "Select a virus from the tabs:",
+      "columnName": "pathogen",
+      "values": ["COVID-19", "Influenza A", "RSV"],
+      "active": "COVID-19",
+      "filterStyle": "tab-simple"
+    }
+  ],
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": true,
+    "height": "500",
+    "caption": "",
+    "showDownloadUrl": true,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": "State/Territory",
+    "wrapColumns": false,
+    "showDownloadLinkBelow": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "visual": {
+    "minBubbleSize": 1,
+    "maxBubbleSize": 20,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "geoCodeCircleSize": 2,
+    "showBubbleZeros": false,
+    "cityStyleLabel": "",
+    "additionalCityStyles": []
+  },
+  "mapPosition": {
+    "coordinates": [0, 30],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": [
+      {
+        "dataKey": "hatch",
+        "pattern": "lines",
+        "dataValue": "Limited Coverage",
+        "label": "Limited Coverage*",
+        "size": "medium"
+      }
+    ]
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": [
+      {
+        "legendTitle": "",
+        "legendDescription": "",
+        "items": [
+          {
+            "key": "",
+            "shape": "Arrow Up",
+            "column": "",
+            "operator": "=",
+            "value": ""
+          }
+        ]
+      }
+    ]
+  },
+  "filterBehavior": "Filter Change",
+  "customColors": [
+    "#C8EFDA",
+    "#9FDAD0",
+    "#9FDAD0",
+    "#6BB0BD",
+    "#4B7F9B",
+    "#34547B",
+    "#B4B4B4",
+    "#B4B4B4",
+    "#B4B4B4",
+    "#B4B4B4"
+  ],
+  "datasets": {},
+  "dataFileName": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json",
+  "dataFileSourceType": "url",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.24.10",
+  "dataUrl": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json"
 }

package/src/components/Annotation/Annotation.Draggable.tsx

@@ -1,15 +1,9 @@
-import { useContext, useState, useEffect, useRef } from 'react'
-
-// helpers
-import { applyBandScaleOffset, handleConnectionHorizontalType, handleConnectionVerticalType, createPoints } from '@cdc/chart/src/components/Annotations/components/helpers'
+import { useContext, useState, useRef } from 'react'
 
 // visx
-import { HtmlLabel, CircleSubject, LineSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
+import { HtmlLabel, CircleSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
 import { Drag, raise } from '@visx/drag'
 import { MarkerArrow } from '@visx/marker'
-import { LinePath } from '@visx/shape'
-import * as allCurves from '@visx/curve'
-import { Annotation } from '@cdc/core/types/Annotation'
 
 // styles
 import './Annotation.Draggable.styles.css'
@@ -18,41 +12,18 @@ import { MapContext } from '../../types/MapContext'
 
 const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
   const [draggingItems, setDraggingItems] = useState([])
-  const { state: config, dimensions, setState: updateConfig, isEditor, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const {
+    state: config,
+    setState: updateConfig,
+    isDraggingAnnotation,
+    isEditor,
+    dimensions
+  } = useContext<MapContext>(ConfigContext)
   const [width, height] = dimensions
   const { annotations } = config
-  // const { colorScale } = useColorScale()
   const prevDimensions = useRef(dimensions)
   const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
 
-  const handleMobileXPosition = annotation => {
-    if (annotation.snapToNearestPoint) {
-      return Number(annotation.dx) + xScale(annotation.xKey) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size)
-    }
-    return Number(annotation.x) + Number(annotation.dx)
-  }
-
-  const handleMobileYPosition = annotation => {
-    if (annotation.snapToNearestPoint) {
-      return yScale(annotation.yKey) + Number(annotation.dy)
-    }
-    return Number(annotation.dy) + Number(annotation.y)
-  }
-
-  const handleTextX = annotation => {
-    if (annotation.snapToNearestPoint) {
-      return Number(annotation.dx) + Number(xScale(annotation.xKey)) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size) - 16 / 3
-    }
-    return Number(annotation.dx) + Number(annotation.x) - 16 / 3
-  }
-
-  const handleTextY = annotation => {
-    if (annotation.snapToNearestPoint) {
-      return yScale(annotation.yKey) + Number(annotation.dy) + 5
-    }
-    return Number(annotation.y) + Number(annotation.dy) + 16 / 3
-  }
-
   return (
     annotations &&
     annotations.map((annotation, index) => {
@@ -118,7 +89,9 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                         style={{
                           padding: '10px',
                           borderRadius: 5, // Optional: set border radius
-                          backgroundColor: `rgba(255, 255, 255, ${annotation?.opacity ? Number(annotation?.opacity) / 100 : 1})`
+                          backgroundColor: `rgba(255, 255, 255, ${
+                            annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
+                          })`
                         }}
                         role='presentation'
                         // ! IMPORTANT: Workaround for 508
@@ -131,13 +104,31 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                       />
                     </HtmlLabel>
 
-                    {annotation.connectionType === 'line' && <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />}
+                    {annotation.connectionType === 'line' && (
+                      <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />
+                    )}
 
-                    {annotation.connectionType === 'elbow' && <Connector type='elbow' pathProps={{ markerStart: 'url(#marker-start)' }} />}
+                    {annotation.connectionType === 'elbow' && (
+                      <Connector type='elbow' pathProps={{ markerStart: 'url(#marker-start)' }} />
+                    )}
 
                     {/* MARKERS */}
-                    {annotation.marker === 'circle' && <CircleSubject className='circle-subject' stroke={'black'} radius={8} />}
-                    {annotation.marker === 'arrow' && <MarkerArrow fill='black' id='marker-start' x={annotation.x} y={annotation.dy} stroke='#333' markerWidth={10} size={10} strokeWidth={1} orient='auto-start-reverse' />}
+                    {annotation.marker === 'circle' && (
+                      <CircleSubject className='circle-subject' stroke={'black'} radius={8} />
+                    )}
+                    {annotation.marker === 'arrow' && (
+                      <MarkerArrow
+                        fill='black'
+                        id='marker-start'
+                        x={annotation.x}
+                        y={annotation.dy}
+                        stroke='#333'
+                        markerWidth={10}
+                        size={10}
+                        strokeWidth={1}
+                        orient='auto-start-reverse'
+                      />
+                    )}
                   </AnnotationComponent>
                 </>
               )

package/src/components/Annotation/AnnotationDropdown.tsx

@@ -2,14 +2,14 @@ import React, { useContext, useState } from 'react'
 import ConfigContext from '../../context'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
-import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 import AnnotationList from './AnnotationList'
 
 const AnnotationDropdown = () => {
-  const { currentViewport: viewport, state: config } = useContext(ConfigContext)
+  const { state: config, isEditor, currentViewport: viewport } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(false)
 
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${appFontSize}px`
 
   const annotations = config?.annotations || []
 
@@ -19,7 +19,7 @@ const AnnotationDropdown = () => {
   }
 
   const handleAccordionClassName = () => {
-    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3']
     if (!expanded) {
       classNames.push('collapsed')
     }

package/src/components/CityList.tsx

@@ -5,6 +5,7 @@ import { supportedCities } from '../data/supported-geos'
 import { scaleLinear } from 'd3-scale'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
+import { titleCase } from '../helpers/titleCase'
 
 import ConfigContext from '../context'
 import { getGeoStrokeColor } from '../helpers/colors'
@@ -15,14 +16,13 @@ const CityList = ({
   applyTooltipsToGeo,
   displayGeoName,
   applyLegendToRow,
-  titleCase,
   setSharedFilterValue,
   isFilterValueSupported,
   tooltipId,
   projection
 }) => {
   const [citiesData, setCitiesData] = useState({})
-  const { scale, state, topoData, runtimeData, position } = useContext(ConfigContext)
+  const { state, topoData, runtimeData, position } = useContext(ConfigContext)
   if (!projection) return
 
   useEffect(() => {
@@ -149,13 +149,7 @@ const CityList = ({
 
     const styles = {
       fill: legendColors[0],
-      opacity:
-        setSharedFilterValue &&
-        isFilterValueSupported &&
-        data[city] &&
-        data[city][state.columns.geo.name] !== setSharedFilterValue
-          ? 0.5
-          : 1,
+      opacity: !isFilterValueSupported || (isFilterValueSupported && city === setSharedFilterValue) ? 1 : 0.5,
       stroke:
         setSharedFilterValue &&
         isFilterValueSupported &&