@cdc/map 4.25.10 → 4.26.1

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

@@ -6,27 +6,20 @@ import {
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 import ConfigContext from '../../../context'
 import _ from 'lodash'
 import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
-
-const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'Arrow Left', 'None']
-
-// todo: Move duplicated operators to CORE
-export const DATA_OPERATOR_LESS = '<'
-export const DATA_OPERATOR_GREATER = '>'
-export const DATA_OPERATOR_LESSEQUAL = '<='
-export const DATA_OPERATOR_GREATEREQUAL = '>='
-export const DATA_OPERATOR_EQUAL = '='
-export const DATA_OPERATOR_NOTEQUAL = '≠'
-export const DATA_OPERATORS = [
+import {
   DATA_OPERATOR_LESS,
   DATA_OPERATOR_GREATER,
   DATA_OPERATOR_LESSEQUAL,
   DATA_OPERATOR_GREATEREQUAL,
   DATA_OPERATOR_EQUAL,
   DATA_OPERATOR_NOTEQUAL
-]
+} from '@cdc/core/helpers/constants'
+
+const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'Arrow Left', 'None']
 
 /**
  * Notice: each shape Col has a legend title and description should the title/desc need to be different for different shapes.
@@ -135,91 +128,60 @@ const HexSettingShapeColumns = props => {
                                   </AccordionItemHeading>
                                   <AccordionItemPanel>
                                     <>
+                                      <Select
+                                        label='Shape Column'
+                                        value={
+                                          config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape ||
+                                          'Arrow Up'
+                                        }
+                                        options={shapeOptions}
+                                        fieldName={`shape-${shapeGroupIndex}-${itemIndex}`}
+                                        updateField={(section, subsection, fieldName, value) => {
+                                          handleItemUpdate('shape', value, shapeGroupIndex, itemIndex)
+                                        }}
+                                      />
+
+                                      <Select
+                                        label='Column'
+                                        value={config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].key || ''}
+                                        options={columnsOptions.map(c => c.key)}
+                                        fieldName={`key-${shapeGroupIndex}-${itemIndex}`}
+                                        updateField={(section, subsection, fieldName, value) =>
+                                          handleItemUpdate('key', value, shapeGroupIndex, itemIndex)
+                                        }
+                                      />
+
+                                      <Select
+                                        label='Operator'
+                                        value={
+                                          config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].operator || '='
+                                        }
+                                        options={[
+                                          DATA_OPERATOR_EQUAL,
+                                          DATA_OPERATOR_NOTEQUAL,
+                                          DATA_OPERATOR_LESS,
+                                          DATA_OPERATOR_GREATER,
+                                          DATA_OPERATOR_LESSEQUAL,
+                                          DATA_OPERATOR_GREATEREQUAL
+                                        ]}
+                                        fieldName={`operator-${shapeGroupIndex}-${itemIndex}`}
+                                        updateField={(section, subsection, fieldName, value) =>
+                                          handleItemUpdate('operator', value, shapeGroupIndex, itemIndex)
+                                        }
+                                      />
+
                                       <label>
-                                        <span className='edit-label column-heading'>Shape Column</span>
-                                        <select
+                                        <span className='edit-label column-heading'>Value</span>
+                                        <input
+                                          type='text'
                                           value={
-                                            config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape
-                                              ? config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape
-                                              : 'select'
+                                            config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].value || ''
+                                          }
+                                          onChange={e =>
+                                            handleItemUpdate('value', e.target.value, shapeGroupIndex, itemIndex)
                                           }
-                                          onChange={e => {
-                                            handleItemUpdate('shape', e.target.value, shapeGroupIndex, itemIndex)
-                                          }}
-                                        >
-                                          {shapeOptions.map(shape => (
-                                            <option value={shape}>{shape}</option>
-                                          ))}
-                                        </select>
+                                        />
                                       </label>
-
-                                      <div className='cove-input-group'>
-                                        <label className=''>
-                                          <span className='edit-label cove-input__label'>Column Conditional</span>
-                                        </label>
-                                        <div className='cove-accordion__panel-row cove-accordion__small-inputs'>
-                                          <div className='cove-accordion__panel-col cove-input'>
-                                            <select
-                                              value={
-                                                config.hexMap.shapeGroups[shapeGroupIndex].key === ''
-                                                  ? 'Select'
-                                                  : config.hexMap.shapeGroups[shapeGroupIndex].key
-                                              }
-                                              className='cove-input'
-                                              onChange={e =>
-                                                handleItemUpdate('key', e.target.value, shapeGroupIndex, itemIndex)
-                                              }
-                                            >
-                                              {columnsOptions}
-                                            </select>
-                                          </div>
-                                          <div className='cove-accordion__panel-col cove-input'>
-                                            <select
-                                              value={
-                                                config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].operator ||
-                                                '-SELECT-'
-                                              }
-                                              initial='Select'
-                                              className='cove-input'
-                                              onChange={e =>
-                                                handleItemUpdate('operator', e.target.value, shapeGroupIndex, itemIndex)
-                                              }
-                                            >
-                                              {[DATA_OPERATOR_EQUAL].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_NOTEQUAL].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_LESS].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_GREATER].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_LESSEQUAL].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                              {[DATA_OPERATOR_GREATEREQUAL].map(option => {
-                                                return <option value={option}>{option}</option>
-                                              })}
-                                            </select>
-                                          </div>
-                                          <div className='cove-accordion__panel-col cove-input'>
-                                            <input
-                                              type='text'
-                                              value={
-                                                config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].value || ''
-                                              }
-                                              className='cove-input'
-                                              style={{ height: '100%' }}
-                                              onChange={e =>
-                                                handleItemUpdate('value', e.target.value, shapeGroupIndex, itemIndex)
-                                              }
-                                            />
-                                          </div>
-                                        </div>
-                                      </div>
                                       <button
                                         className='cove-button cove-button--warn'
                                         style={{

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -13,25 +13,6 @@ import { setConfig } from 'dompurify'
 
 const PanelAnnotate: React.FC = props => {
   const { config, setConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
-  const getColumns = (filter = true) => {
-    const columns = {}
-    config.data.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
-    })
-
-    if (filter) {
-      Object.keys(columns).forEach(key => {
-        if (
-          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
-          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
-        ) {
-          delete columns[key]
-        }
-      })
-    }
-
-    return Object.keys(columns)
-  }
 
   const handleAnnotationUpdate = (value, property, index) => {
     const annotations = [...config?.annotations]

package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx

@@ -12,6 +12,7 @@ import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 import './Panel.PatternSettings-style.css'
 import Alert from '@cdc/core/components/Alert'
 import _ from 'lodash'
@@ -196,21 +197,16 @@ const PatternSettings = ({ name }: PanelProps) => {
                           message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>'
                         />
                       )}{' '}
-                      <label htmlFor={`pattern-dataKey--${patternIndex}`}>Data Key:</label>
-                      <select
-                        id={`pattern-dataKey--${patternIndex}`}
-                        value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'}
-                        onChange={e => handlePatternFieldUpdate('dataKey', e.target.value, patternIndex)}
-                      >
-                        {/* TODO: sort these? */}
-                        {dataKeyOptions.map((d, index) => {
-                          return (
-                            <option value={d} key={index}>
-                              {d}
-                            </option>
-                          )
-                        })}
-                      </select>
+                      <Select
+                        label='Data Key:'
+                        value={pattern.dataKey}
+                        options={dataKeyOptions.filter(d => d !== 'Select')}
+                        initial='Select'
+                        fieldName={`pattern-dataKey--${patternIndex}`}
+                        updateField={(section, subsection, fieldName, value) =>
+                          handlePatternFieldUpdate('dataKey', value, patternIndex)
+                        }
+                      />
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
                         <input
@@ -229,30 +225,24 @@ const PatternSettings = ({ name }: PanelProps) => {
                           value={pattern.label === '' ? '' : pattern.label}
                         />
                       </label>
-                      <label htmlFor={`pattern-type--${patternIndex}`}>Pattern Type:</label>
-                      <select
-                        id={`pattern-type--${patternIndex}`}
+                      <Select
+                        label='Pattern Type:'
                         value={pattern?.pattern}
-                        onChange={e => handlePatternFieldUpdate('pattern', e.target.value, patternIndex)}
-                      >
-                        {patternTypes.map((patternName, index) => (
-                          <option value={patternName} key={index}>
-                            {patternName}
-                          </option>
-                        ))}
-                      </select>
-                      <label htmlFor={`pattern-size--${patternIndex}`}>Pattern Size:</label>
-                      <select
-                        id={`pattern-size--${patternIndex}`}
+                        options={patternTypes}
+                        fieldName={`pattern-type--${patternIndex}`}
+                        updateField={(section, subsection, fieldName, value) =>
+                          handlePatternFieldUpdate('pattern', value, patternIndex)
+                        }
+                      />
+                      <Select
+                        label='Pattern Size:'
                         value={pattern?.size}
-                        onChange={e => handlePatternFieldUpdate('size', e.target.value, patternIndex)}
-                      >
-                        {['small', 'medium', 'large'].map((size, index) => (
-                          <option value={size} key={index}>
-                            {size}
-                          </option>
-                        ))}
-                      </select>
+                        options={['small', 'medium', 'large']}
+                        fieldName={`pattern-size--${patternIndex}`}
+                        updateField={(section, subsection, fieldName, value) =>
+                          handlePatternFieldUpdate('size', value, patternIndex)
+                        }
+                      />
                       <div className='pattern-input__color'>
                         <label htmlFor='patternColor'>
                           Pattern Color

package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx

@@ -0,0 +1,351 @@
+import { useContext, FC } from 'react'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
+
+// core
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
+
+// contexts
+import ConfigContext from '../../../../context'
+import { MapContext } from '../../../../types/MapContext'
+import { getTileKeys } from '../../../../helpers/smallMultiplesHelpers'
+
+interface PanelSmallMultiplesProps {
+  name?: string
+}
+
+const PanelSmallMultiples: FC<PanelSmallMultiplesProps> = props => {
+  const { config, setConfig } = useContext<MapContext>(ConfigContext)
+  const { general } = config
+
+  // Extract column names from data with memoization (replaces getColumns)
+  // Filter out geo and primary columns
+  const columns = useDataColumns(config.data, {
+    excludeColumns: [config.columns?.geo?.name, config.columns?.primary?.name].filter(Boolean)
+  })
+
+  const updateField = (section, subsection, fieldName, value) => {
+    const newConfig = { ...config }
+
+    if (subsection) {
+      newConfig[section] = {
+        ...newConfig[section],
+        [subsection]: {
+          ...newConfig[section]?.[subsection],
+          [fieldName]: value
+        }
+      }
+    } else {
+      newConfig[section] = {
+        ...newConfig[section],
+        [fieldName]: value
+      }
+    }
+
+    setConfig(newConfig)
+  }
+
+  const handleColumnChange = (section, subsection, fieldName, value) => {
+    const newConfig = { ...config }
+
+    // Set the column value
+    newConfig.smallMultiples = {
+      ...newConfig.smallMultiples,
+      tileColumn: value
+    }
+
+    // Automatically set mode based on whether a column is selected
+    if (value) {
+      newConfig.smallMultiples.mode = 'by-column'
+    } else {
+      newConfig.smallMultiples.mode = undefined
+    }
+
+    setConfig(newConfig)
+  }
+
+  // Small multiples only supported for us, single-state, and us-region map types
+  if (!['us', 'single-state', 'us-region'].includes(general.geoType)) {
+    return null
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>Small Multiples</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <Select
+          value={config.smallMultiples?.tileColumn || ''}
+          fieldName='tileColumn'
+          section='smallMultiples'
+          label='Tile By Column'
+          initial='Select Column'
+          updateField={handleColumnChange}
+          options={columns}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  Select the column whose unique values will create separate map tiles. Choosing a column will enable
+                  small multiples mode.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {config.smallMultiples?.tileColumn && (
+          <>
+            <TextField
+              type='number'
+              value={config.smallMultiples?.tilesPerRowDesktop}
+              section='smallMultiples'
+              fieldName='tilesPerRowDesktop'
+              label='Tiles Per Row (Desktop)'
+              updateField={updateField}
+              min={1}
+              max={3}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Number of map tiles to display per row on desktop screens. Mobile will always show 1 tile per row.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+
+            {/* Tile Ordering */}
+            {(() => {
+              const availableTiles = getTileKeys(config, config.data).map(String)
+              if (availableTiles.length === 0) return null
+
+              const tileOrderOptions = [
+                {
+                  label: 'Ascending By Title',
+                  value: 'asc'
+                },
+                {
+                  label: 'Descending By Title',
+                  value: 'desc'
+                },
+                {
+                  label: 'Custom',
+                  value: 'custom'
+                }
+              ]
+
+              const currentOrderType = config.smallMultiples?.tileOrderType || 'asc'
+
+              const handleOrderTypeChange = orderType => {
+                const newConfig = {
+                  ...config,
+                  smallMultiples: {
+                    ...config.smallMultiples,
+                    tileOrderType: orderType
+                  }
+                }
+
+                // If switching to custom, initialize with current tile order
+                if (orderType === 'custom' && !config.smallMultiples?.tileOrder?.length) {
+                  newConfig.smallMultiples.tileOrder = [...availableTiles]
+                }
+
+                setConfig(newConfig)
+              }
+
+              const handleCustomTileOrderChange = (sourceIndex, destinationIndex) => {
+                if (destinationIndex === null) return
+
+                const currentOrder = config.smallMultiples?.tileOrder || [...availableTiles]
+                const newOrder = [...currentOrder]
+                const [removed] = newOrder.splice(sourceIndex, 1)
+                newOrder.splice(destinationIndex, 0, removed)
+
+                setConfig({
+                  ...config,
+                  smallMultiples: {
+                    ...config.smallMultiples,
+                    tileOrder: newOrder,
+                    tileOrderType: 'custom'
+                  }
+                })
+              }
+
+              return (
+                <>
+                  <Select
+                    value={currentOrderType}
+                    options={tileOrderOptions}
+                    label='Tile Order'
+                    fieldName='tileOrderType'
+                    section='smallMultiples'
+                    updateField={(_section, _subsection, _fieldName, value) => {
+                      handleOrderTypeChange(value)
+                    }}
+                  />
+
+                  {currentOrderType === 'custom' && (
+                    <DragDropContext
+                      onDragEnd={({ source, destination }) =>
+                        handleCustomTileOrderChange(source.index, destination?.index)
+                      }
+                    >
+                      <Droppable droppableId='tile_order'>
+                        {provided => (
+                          <ul
+                            {...provided.droppableProps}
+                            className='sort-list'
+                            ref={provided.innerRef}
+                            style={{ marginTop: '1em' }}
+                          >
+                            {(config.smallMultiples?.tileOrder || availableTiles).map((tileKey, index) => (
+                              <Draggable key={tileKey} draggableId={`tile-${tileKey}`} index={index}>
+                                {(provided, snapshot) => (
+                                  <li>
+                                    <div
+                                      className={snapshot.isDragging ? 'currently-dragging' : ''}
+                                      style={provided.draggableProps.style}
+                                      ref={provided.innerRef}
+                                      {...provided.draggableProps}
+                                      {...provided.dragHandleProps}
+                                    >
+                                      {tileKey}
+                                    </div>
+                                  </li>
+                                )}
+                              </Draggable>
+                            ))}
+                            {provided.placeholder}
+                          </ul>
+                        )}
+                      </Droppable>
+                    </DragDropContext>
+                  )}
+                </>
+              )
+            })()}
+
+            {/* Custom Tile Titles */}
+            <div>
+              <label style={{ marginTop: '1.5rem', marginBottom: '0.5rem' }}>Custom Tile Titles</label>
+
+              {(() => {
+                const availableTiles = getTileKeys(config, config.data).map(String)
+                if (availableTiles.length === 0) return null
+
+                const handleTitleChange = (tileKey, customTitle) => {
+                  const newTitles = { ...config.smallMultiples?.tileTitles }
+                  if (customTitle.trim() === '' || customTitle === tileKey) {
+                    delete newTitles[tileKey] // Remove entry if empty or same as key
+                  } else {
+                    newTitles[tileKey] = customTitle
+                  }
+
+                  setConfig({
+                    ...config,
+                    smallMultiples: {
+                      ...config.smallMultiples,
+                      tileTitles: newTitles
+                    }
+                  })
+                }
+
+                return (
+                  <div className='tile-titles-editor' style={{ maxWidth: '100%', overflow: 'hidden' }}>
+                    {availableTiles.map(tileKey => {
+                      const customTitle = config.smallMultiples?.tileTitles?.[tileKey] || ''
+                      return (
+                        <div
+                          key={tileKey}
+                          className='tile-title-row'
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginBottom: '0.75rem',
+                            maxWidth: '100%'
+                          }}
+                        >
+                          <label
+                            style={{
+                              minWidth: '80px',
+                              maxWidth: '120px',
+                              marginRight: '0.75rem',
+                              fontWeight: 'normal',
+                              fontSize: '13px',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                              flexShrink: 0
+                            }}
+                          >
+                            {tileKey}:
+                          </label>
+                          <input
+                            type='text'
+                            value={customTitle}
+                            placeholder={tileKey}
+                            onChange={event => handleTitleChange(tileKey, event.target.value)}
+                            style={{
+                              flex: 1,
+                              minWidth: 0,
+                              maxWidth: '200px',
+                              fontSize: '13px',
+                              padding: '4px 8px',
+                              height: '30px',
+                              border: '1px solid #ccc',
+                              borderRadius: '3px'
+                            }}
+                          />
+                        </div>
+                      )
+                    })}
+                  </div>
+                )
+              })()}
+            </div>
+
+            <CheckBox
+              value={config.smallMultiples?.synchronizedTooltips}
+              fieldName='synchronizedTooltips'
+              section='smallMultiples'
+              label='Synchronized Tooltips'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      When checked, hovering over a geography in one map will show synchronized tooltips for that same
+                      geography on all other maps at the same position.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </>
+        )}
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelSmallMultiples

package/src/components/EditorPanel/components/Panels/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import Annotate from './Panel.Annotate'
 import PatternSettings from './Panel.PatternSettings'
+import SmallMultiples from './Panel.SmallMultiples'
 
 const Panels = {
   Annotate,
-  PatternSettings
+  PatternSettings,
+  SmallMultiples
 }
 
 export default Panels