@cdc/map 4.25.10 → 4.25.11

package/src/scss/editor-panel.scss

@@ -1,3 +1,6 @@
+// Map-specific Editor Panel Styles
+// Common editor panel styles are imported from @cdc/core/styles/editor-panel-base via cove-main.scss
+
 .post-type-cdc_visualization {
   .cove {
     // Temp Radio button fix
@@ -14,8 +17,8 @@
     // End Temp Radio button fix
   }
 }
-.cdc-open-viz-module {
 
+.cdc-open-viz-module {
   .editor-panel {
     .cove-input-group,
     .cove-accordion__small-inputs {
@@ -92,287 +95,9 @@
       margin-left: 0.3rem;
     }
 
-
-    .form-container {
-      border-right: var(--lightGray) 1px solid;
-      flex-grow: 1;
-    }
-
-    .guidance-link {
-      margin: 2em 1em 0;
-      padding: 0.75em 1em;
-      align-items: center;
-      .heading-3 {
-        font-weight: 600;
-        font-size: 1.2em;
-      }
-      svg {
-        width: 60px;
-        color: var(--blue);
-        margin-right: 1rem;
-        height: 60px; // IE11
-        path {
-          fill: currentColor;
-        }
-      }
-    }
-    .warning {
-      color: #d8000c;
-      background-color: #ffd2d2;
-      padding: 0.75em 1em;
-      margin: 1em 0;
-      font-size: 0.8em;
-      border: #d8000c 1px solid;
-      border-radius: 0.4em;
-      strong {
-        font-weight: 600;
-        display: block;
-      }
-    }
-    .accordion__button {
-      cursor: pointer;
-      font-size: 1em;
-      padding: 0.3em 1em;
-      width: 100%;
-      text-align: left;
-      position: relative;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    .accordion__button:before {
-      display: inline-block;
-      content: '';
-      height: 7px;
-      width: 7px;
-      margin-right: 1em;
-      border-bottom: 2px solid currentColor;
-      border-right: 2px solid currentColor;
-      right: 0;
-      position: absolute;
-      top: 50%;
-      transform: rotate(-45deg) translateY(-50%);
-      transition: 0.1s all;
-    }
-
-    .accordion__button[aria-expanded='true']::before,
-    .accordion__button[aria-selected='true']::before {
-      top: 45%;
-      transform: rotate(45deg) translateY(-50%);
-      margin-right: 1.3em;
-      transition: 0.1s all;
-    }
-
-    .accordion__panel {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-      padding: 1em 1.25em 2em;
-      animation: fadein 0.2s ease-in;
-      span.h5 {
-        font-size: 0.8em;
-      }
-      & p.layer-purpose-details {
-        margin-top: 1em;
-      }
-    }
-
-    .advanced {
-      padding: 0 1em 1em;
-      text-align: left;
-      p {
-        font-size: 0.8rem;
-      }
-      .advanced-toggle-link {
-        padding-top: 1em;
-        display: block;
-        text-align: left;
-        cursor: pointer;
-        text-decoration: underline;
-        span {
-          text-decoration: none;
-          display: inline-block;
-          font-family: monospace;
-          padding-right: 5px;
-        }
-        &:hover {
-          color: rgba(0, 0, 0, 0.7);
-        }
-      }
-      textarea {
-        height: 400px;
-        width: 100%;
-        font-size: 0.9em;
-        padding: 0.5em;
-        font-family: monospace;
-        box-sizing: border-box;
-      }
-    }
-
-    @keyframes fadein {
-      0% {
-        opacity: 0;
-      }
-
-      100% {
-        opacity: 1;
-      }
-    }
-
-    .base-label {
-      background: #565656;
-      color: #fff;
-      font-size: 1.1em;
-      padding: 0.6em 1em;
-      position: relative;
-      border-bottom: #565656 3px solid;
-      z-index: 3;
-    }
-
-    label {
-      text-transform: uppercase;
-      display: block;
-      font-size: 0.8em;
-      font-weight: 600;
-      &:not(:first-child) {
-        margin-top: 1em;
-      }
-      span.edit-label {
-        margin-bottom: 0.3em;
-        display: flex;
-      }
-      span.column-heading {
-        font-size: 1em;
-      }
-      &.checkbox {
-        margin-top: 0.5rem;
-        display: flex;
-
-        input {
-          margin-left: 0;
-          width: inherit;
-          display: inline;
-        }
-      }
-    }
-    input[type='text'],
-    input[role='combobox'],
-    input[type='number'],
-    textarea {
-      min-width: 100%;
-      max-width: 100%; // Doing this prevents width of textarea from being changed
-    }
     textarea {
       min-height: 140px;
     }
-    .header .color-palette li {
-      width: 21px;
-      height: 21px;
-      border-radius: 40px;
-      margin-right: 2.8px;
-    }
-    .color-palette {
-      display: flex;
-      max-width: 100%;
-      padding: 0;
-      margin: 0.5em 0 0 0;
-      list-style: none;
-      flex-wrap: wrap;
-      li {
-        width: 45px;
-        height: 23px;
-        margin-right: 4px;
-        margin-bottom: 10px;
-        display: flex;
-        border-radius: 5px;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-        .click-target {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-        &.selected {
-          border: rgba(0, 0, 0, 0.8) 2px solid;
-        }
-        span {
-          width: 33.3%;
-        }
-      }
-    }
-
-    fieldset {
-      display: block;
-    }
-
-    .primary-fieldset {
-      padding: 0;
-      margin: 0;
-      border: 0;
-    }
-
-    ul.column-edit {
-      list-style: none;
-      li {
-        margin-top: 1em;
-      }
-      .three-col {
-        display: flex;
-        justify-content: space-between;
-        > label {
-          margin-top: 0;
-          width: 30%;
-          display: inline-block;
-          input[type='text'],
-          input[type='number'] {
-            width: 50px;
-          }
-        }
-      }
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    .emove-column {
-      float: right;
-      text-transform: uppercase;
-      color: #c32b2b;
-      font-size: 0.7em;
-      line-height: 1.6em;
-      border-radius: 5px;
-      margin: 0 auto;
-      transition: 0.1s all;
-      border: 0;
-      text-decoration: underline;
-      outline: 0;
-      cursor: pointer;
-      font-weight: bold;
-    }
-
-    .edit-block {
-      padding-left: 1em;
-      border-left: rgba(0, 0, 0, 0.2) 4px solid;
-      transition: 0.2s all;
-      &:not(:first-child) {
-        margin-top: 2em;
-      }
-      input[type='text'],
-      input[type='number'] {
-        font-size: 1em;
-      }
-      label {
-        margin-top: 0;
-      }
-      label + label {
-        margin-top: 1em;
-      }
-      &:hover {
-        border-left: rgba(0, 0, 0, 0.7) 4px solid;
-        transition: 0.2s all;
-      }
-    }
 
     .data-toggle {
       list-style: none;
@@ -443,167 +168,6 @@
         }
       }
     }
-
-    span.subtext {
-      display: block;
-      color: rgba(0, 0, 0, 0.5);
-      text-transform: none;
-      font-weight: normal;
-    }
-
-    .sort-list {
-      list-style: none;
-      > li {
-        margin-right: 0.3em;
-        margin-bottom: 0.3em;
-      }
-    }
-    .sort-list li > div {
-      display: block;
-      box-sizing: border-box;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      background: #f1f1f1;
-      padding: 0.4em 0.6em;
-      font-size: 0.8em;
-      margin-bottom: 0.3em;
-      cursor: move;
-      z-index: 999;
-    }
-
-    .info {
-      font-size: 0.8em;
-      line-height: 1.4em;
-      font-style: italic;
-      padding-top: 10px;
-    }
-
-    .react-tags__search {
-      width: 100%;
-    }
-
-    .react-tags {
-      position: relative;
-      input.react-tags__search-input {
-        font-size: 0.8rem;
-      }
-      /* clicking anywhere will focus the input */
-      cursor: text;
-      span {
-        display: inline;
-      }
-    }
-
-    .react-tags.is-focused {
-      border-color: rgba(0, 0, 0, 0.7);
-    }
-
-    .react-tags__selected {
-      display: inline;
-    }
-
-    .react-tags__selected-tag {
-      display: inline-block;
-      box-sizing: border-box;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      background: #f1f1f1;
-      padding: 0.4em 0.6em;
-      font-size: 0.8em;
-      margin-right: 0.3em;
-      margin-bottom: 0.3em;
-    }
-
-    .react-tags__selected-tag:after {
-      content: '\2715';
-      color: #aaa;
-      margin-left: 8px;
-    }
-
-    .react-tags__selected-tag:hover,
-    .react-tags__selected-tag:focus {
-      border-color: #b1b1b1;
-    }
-
-    .react-tags__search {
-      display: inline-block;
-
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-    }
-
-    @media screen and (min-width: 30em) {
-      .react-tags__search {
-        /* this will become the offsetParent for suggestions */
-        position: relative;
-      }
-    }
-
-    .react-tags__search input {
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-
-      /* emove styles and layout from this element */
-      margin: 0;
-      outline: none;
-      padding: 0.5em 0.3em;
-
-      /* match the font styles */
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    .react-tags__search input::-ms-clear {
-      display: none;
-    }
-
-    .react-tags__suggestions {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-    }
-
-    @media screen and (min-width: 30em) {
-      .react-tags__suggestions {
-        width: 240px;
-      }
-    }
-
-    .react-tags__suggestions ul {
-      margin: 4px -1px;
-      padding: 0;
-      list-style: none;
-      background: white;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    }
-
-    .react-tags__suggestions li {
-      border-bottom: 1px solid #ddd;
-      padding: 6px 8px;
-    }
-
-    .react-tags__suggestions li mark {
-      text-decoration: underline;
-      background: none;
-      font-weight: 600;
-    }
-
-    .react-tags__suggestions li:hover {
-      cursor: pointer;
-      background: #eee;
-    }
-
-    .react-tags__suggestions li.is-active {
-      background: #b7cfe0;
-    }
-
-    .react-tags__suggestions li.is-disabled {
-      opacity: 0.5;
-      cursor: auto;
-    }
   }
 
   @include breakpointClass(md) {

package/src/scss/main.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@import '@cdc/core/styles/v2/utils/breakpoints';
 @import 'editor-panel';
 @import '@cdc/core/styles/accessibility';
 

package/src/scss/map.scss

@@ -33,25 +33,28 @@ $medium: 768px;
   &:focus {
     outline: 0;
   }
+
+  // Multi-country map states - use higher specificity
+  &.hidden {
+    display: none !important;
+  }
+
+  &.grayed-out {
+    opacity: 0.3;
+    fill: #d3d3d3 !important;
+  }
 }
 
 .territories-label {
-  font-size: 0.8rem;
   font-weight: 700;
 }
 
-@include breakpointClass(sm) {
-  .territories-label {
-    font-size: 1rem;
-  }
-}
-
 // Cities and Territories
 .territories {
   gap: 0.5em;
   svg {
-    max-width: 30px;
-    min-width: 30px;
+    max-width: var(--territory-svg-max-width, 30px);
+    min-width: var(--territory-svg-min-width, 30px);
     transition: 0.3s all;
 
     text {
@@ -73,11 +76,6 @@ $medium: 768px;
       width: 2.5em;
     }
   }
-  .territories {
-    svg {
-      max-width: 45px;
-    }
-  }
 }
 
 .state {
@@ -98,7 +96,6 @@ $medium: 768px;
   display: none;
 }
 
-
 .county-borders {
   fill: none;
   stroke-width: 1px;

package/src/store/map.actions.ts

@@ -1,9 +1,9 @@
-import { MapConfig, Coordinate } from '../types/MapConfig'
-import { GeneratedLegend } from '../hooks/useGenerateRuntimeLegend'
-import { VizFilter } from '@cdc/core/types/VizFilter'
+import { type MapConfig, type Coordinate } from '../types/MapConfig'
+import { type RuntimeLegend } from '../types/runtimeLegend'
+import { type VizFilter } from '@cdc/core/types/VizFilter'
 import { type Action } from '@cdc/core/types/Action'
-import { RuntimeData } from '../types/RuntimeData'
-import { Modal } from '../types/Modal'
+import { type RuntimeData } from '../types/RuntimeData'
+import { type Modal } from '../types/Modal'
 
 // Action Types
 type SET_ACCESSIBLE_STATUS = Action<'SET_ACCESSIBLE_STATUS', string>
@@ -18,13 +18,13 @@ type SET_POSITION = Action<'SET_POSITION', { coordinates: Coordinate; zoom: numb
 type SET_REQUIRED_COLUMNS = Action<'SET_REQUIRED_COLUMNS', string[]>
 type SET_RUNTIME_DATA = Action<'SET_RUNTIME_DATA', RuntimeData>
 type SET_RUNTIME_FILTERS = Action<'SET_RUNTIME_FILTERS', VizFilter[]>
-type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', GeneratedLegend | []>
+type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', RuntimeLegend | []>
 type SET_SCALE = Action<'SET_SCALE', number>
 type SET_STATES_TO_SHOW = Action<'SET_STATES_TO_SHOW', string[]>
 type SET_TOPO_DATA = Action<'SET_TOPO_DATA', any>
 type SET_TRANSLATE = Action<'SET_TRANSLATE', [number, number]>
 
-export type MapActions =
+type MapActions =
   | SET_ACCESSIBLE_STATUS
   | SET_CONFIG
   | SET_COVE_LOADED_HAS_RAN

package/src/types/MapConfig.ts

@@ -3,12 +3,13 @@ import { type Visualization } from '@cdc/core/types/Visualization'
 import { type EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
 import { type Version } from '@cdc/core/types/Version'
 import { type VizFilter } from '@cdc/core/types/VizFilter'
+import { type Annotation } from '@cdc/core/types/Annotation'
 import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 
 // Runtime data types
 export type RuntimeFilters = VizFilter[] & { fromHash?: number }
 
-export type MapVisualSettings = {
+type MapVisualSettings = {
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
   minBubbleSize: number
   /** maxBubbleSize - Maximum Circle Size when the map has a type of bubble */
@@ -43,20 +44,20 @@ export type PatternSelection = {
 }
 
 // Base column properties with name required, all others optional
-export type BaseColumnProperties = Pick<EditorColumnProperties, 'name'> &
+type BaseColumnProperties = Pick<EditorColumnProperties, 'name'> &
   Partial<Pick<EditorColumnProperties, 'label' | 'tooltip' | 'dataTable' | 'prefix' | 'suffix'>>
 
 // Simple column type for name-only columns
-export type SimpleColumnProperties = Pick<EditorColumnProperties, 'name'>
+type SimpleColumnProperties = Pick<EditorColumnProperties, 'name'>
 
 // Specific column types for better semantics
-export type GeoColumnProperties = BaseColumnProperties
-export type LatitudeColumnProperties = SimpleColumnProperties
-export type LongitudeColumnProperties = SimpleColumnProperties
-export type NavigateColumnProperties = SimpleColumnProperties
-export type PrimaryColumnProperties = BaseColumnProperties
+type GeoColumnProperties = BaseColumnProperties
+type LatitudeColumnProperties = SimpleColumnProperties
+type LongitudeColumnProperties = SimpleColumnProperties
+type NavigateColumnProperties = SimpleColumnProperties
+type PrimaryColumnProperties = BaseColumnProperties
 
-export type LegendShapeItem = {
+type LegendShapeItem = {
   column: string
   key: string
   operator: '=' | '≠' | '<' | '>' | '<=' | '>='
@@ -64,13 +65,13 @@ export type LegendShapeItem = {
   value: string
 }
 
-export type LegendGrouping = {
+type LegendGrouping = {
   legendTitle: string
   legendDescription: string
   items: LegendShapeItem[]
 }
 
-export type HexMapSettings = {
+type HexMapSettings = {
   type: 'shapes' | 'standard'
   shapeGroups: LegendGrouping[]
 }
@@ -82,6 +83,17 @@ export type DataRow = {
   [key: string]: string | number | boolean | null | undefined // allowing primitive data types for dynamic columns
 }
 
+export type SmallMultiples = {
+  mode?: 'by-column'
+  tileColumn?: string
+  tilesPerRowDesktop?: number
+  tilesPerRowMobile?: number
+  tileOrderType?: 'asc' | 'desc' | 'custom'
+  tileOrder?: string[]
+  tileTitles?: { [key: string]: string }
+  synchronizedTooltips?: boolean
+}
+
 export type MapConfig = Visualization & {
   annotations: Annotation[]
   // map color palette
@@ -132,6 +144,7 @@ export type MapConfig = Visualization & {
       name: string
       version: string
       customColors?: string[]
+      customColorsOrdered?: string[]
     }
     showDownloadMediaButton: boolean
     showDownloadImgButton: boolean
@@ -142,6 +155,11 @@ export type MapConfig = Visualization & {
       fipsCode: string
       stateName: string
     }[]
+    countriesPicked?: {
+      iso: string
+      name: string
+    }[]
+    hideUnselectedCountries?: boolean // When true, hide unselected countries; when false (default), gray them out
     territoriesAlwaysShow: boolean
     territoriesLabel: string
     title: string
@@ -201,6 +219,7 @@ export type MapConfig = Visualization & {
   filterBehavior: string
   filterIntro: string
   visual: MapVisualSettings
+  smallMultiples?: SmallMultiples
   // visualization type
   type: 'map'
   // version of the map

package/src/types/MapContext.ts

@@ -2,9 +2,12 @@ import { DataRow, type MapConfig } from './MapConfig'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { VizFilter } from '@cdc/core/types/VizFilter'
+import { MapRefInterface } from '../hooks/useProgrammaticMapTooltip'
+import { MutableRefObject } from 'react'
 
 export type MapContext = {
   currentViewport: ViewPort
+  vizViewport?: ViewPort
   content: { geoName: string; keyedData: Record<string, any> }
   dimensions: DimensionsType
   displayDataAsText: string | number
@@ -23,6 +26,7 @@ export type MapContext = {
   isDashboard: boolean
   isEditor: boolean
   isFilterValueSupported: boolean
+  useDynamicViewbox?: boolean
   loadConfig: (configObj: MapConfig) => void
   logo: string
   mapId: string
@@ -43,4 +47,6 @@ export type MapContext = {
   runtimeData: Object[]
   tooltipId: string
   interactionLabel?: string
+  handleSmallMultipleHover?: (geoId: string | null, yCoordinate?: number) => void
+  mapRefForSync?: MutableRefObject<MapRefInterface | null>
 }

package/src/types/runtimeLegend.ts

@@ -1,4 +1,4 @@
-export type RuntimeLegendItem = {
+type RuntimeLegendItem = {
   disabled?: boolean
   bin?: number
   color?: string