@cdc/map 4.24.10 → 4.24.12

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, memo, useContext } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 
 // Third Party
 import {
@@ -10,6 +10,7 @@ import {
 } from 'react-accessible-accordion'
 import { DragDropContext, Droppable, Draggable } 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'
@@ -42,6 +43,7 @@ import HexSetting from './HexShapeSettings.jsx'
 import ConfigContext from '../../../context.ts'
 import { MapContext } from '../../../types/MapContext.js'
 import { TextField } from './Inputs'
+import Alert from '@cdc/core/components/Alert'
 
 // Todo: move to useReducer, seperate files out.
 const EditorPanel = ({ columnsRequiredChecker }) => {
@@ -63,8 +65,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     runtimeData,
     setRuntimeData,
     generateRuntimeData,
-    position,
-    topoData,
+
 
   } = useContext<MapContext>(ConfigContext)
 
@@ -109,12 +110,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   } = useMapLayers(state, setState, false, tooltipId)
 
   const categoryMove = (idx1, idx2) => {
-    let categoryValuesOrder = [...state.legend.categoryValuesOrder]
+    let categoryValuesOrder = getCategoryValuesOrder()
 
     let [movedItem] = categoryValuesOrder.splice(idx1, 1)
 
     categoryValuesOrder.splice(idx2, 0, movedItem)
 
+    state.legend.categoryValuesOrder?.forEach(value => {
+      if (categoryValuesOrder.indexOf(value) === -1) {
+        categoryValuesOrder.push(value)
+      }
+    })
+
     setState({
       ...state,
       legend: {
@@ -371,7 +378,8 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           ...state,
           legend: {
             ...state.legend,
-            position: value
+            position: value,
+            hideBorder: _.includes(['top', 'bottom'], value)
           }
         })
         break
@@ -1087,6 +1095,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </option>
           </select>
         </label>
+        <label>
+          <TextField
+            type='textarea'
+            value={state.filterIntro}
+            fieldName='filterIntro'
+            label='Filter Intro text'
+            updateField={updateField}
+          />
+        </label>
         {filtersJSX}
       </>
     )
@@ -1219,40 +1236,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     columnsRequiredChecker()
   }, [state]) // eslint-disable-line
 
-  useEffect(() => {
-    //If a categorical map is used and the order is either not defined or incorrect, fix it
-    if ('category' === state.legend.type && runtimeLegend && runtimeLegend.runtimeDataHash) {
-      let valid = true
-      if (state.legend.categoryValuesOrder) {
-        runtimeLegend.forEach(item => {
-          if (!item.special && state.legend.categoryValuesOrder.indexOf(item.value) === -1) {
-            valid = false
-          }
-        })
-        let runtimeLegendKeys = runtimeLegend.map(item => item.value)
-        state.legend.categoryValuesOrder.forEach(category => {
-          if (runtimeLegendKeys.indexOf(category) === -1) {
-            valid = false
-          }
-        })
-      } else {
-        valid = false
-      }
-
-      if (!valid) {
-        let arr = runtimeLegend.filter(item => !item.special).map(({ value }) => value)
-
-        setState({
-          ...state,
-          legend: {
-            ...state.legend,
-            categoryValuesOrder: arr
-          }
-        })
-      }
-    }
-  }, [runtimeLegend]) // eslint-disable-line
-
   const columnsOptions = [
     <option value='' key={'Select Option'}>
       - Select Option -
@@ -1289,6 +1272,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   })
 
   const updateField = (section, subsection, fieldName, newValue) => {
+    if (!section) {
+      setState({
+        ...state,
+        [fieldName]: newValue
+      })
+      return
+    }
+
     const isArray = Array.isArray(state[section])
 
     let sectionValue = isArray ? [...state[section], newValue] : { ...state[section], [fieldName]: newValue }
@@ -1435,7 +1426,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           {filter.order === 'cust' && (
             <DragDropContext
               onDragEnd={({ source, destination }) =>
-                handleFilterOrder(source.index, destination.index, index, state.filters[index])
+                handleFilterOrder(source.index, destination?.index, index, state.filters?.[index])
               }
             >
               <Droppable droppableId='filter_order'>
@@ -1530,9 +1521,29 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     ...draggableStyle
   })
 
+  const getCategoryValuesOrder = () => {
+    let values = runtimeLegend
+      ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value)
+      : []
+
+    if (state.legend.cateogryValuesOrder) {
+      return values.sort((a, b) => {
+        let aVal = state.legend.cateogryValuesOrder.indexOf(a)
+        let bVal = state.legend.cateogryValuesOrder.indexOf(b)
+        if (aVal === bVal) return 0
+        if (aVal === -1) return 1
+        if (bVal === -1) return -1
+        return aVal - bVal
+      })
+    } else {
+      return values
+    }
+  }
+
   const CategoryList = () => {
-    return state.legend.categoryValuesOrder ? (
-      state.legend.categoryValuesOrder.map((value, index) => (
+    return getCategoryValuesOrder()
+      .filter(item => !item?.special)
+      .map((value, index) => (
         <Draggable key={value} draggableId={`item-${value}`} index={index}>
           {(provided, snapshot) => (
             <li style={{ position: 'relative' }}>
@@ -1549,9 +1560,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           )}
         </Draggable>
       ))
-    ) : (
-      <></>
-    )
   }
 
   const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
@@ -2205,6 +2213,13 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </Tooltip>
                     </span>
                   </label>
+                  {state.legend.specialClasses.length === 2 && (
+                    <Alert
+                      type='info'
+                      message='If a third special class is needed you can apply a pattern to set it apart.'
+                      showCloseButton={false}
+                    />
+                  )}
                   {specialClasses.map((specialClass, i) => (
                     <div className='edit-block' key={`special-class-${i}`}>
                       <button
@@ -2265,15 +2280,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </label>
                     </div>
                   ))}
-                  <button
-                    className='btn full-width'
-                    onClick={e => {
-                      e.preventDefault()
-                      editColumn('primary', 'specialClassAdd', {})
-                    }}
-                  >
-                    Add Special Class
-                  </button>
+                  {state.legend.specialClasses.length < 2 && (
+                    <button
+                      className='btn btn-primary full-width'
+                      onClick={e => {
+                        e.preventDefault()
+                        editColumn('primary', 'specialClassAdd', {})
+                      }}
+                    >
+                      Add Special Class
+                    </button>
+                  )}
                 </fieldset>
               )}
 
@@ -2417,7 +2434,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </fieldset>
                   ))}
                   <button
-                    className={'btn full-width'}
+                    className={'btn btn-primary full-width'}
                     onClick={event => {
                       event.preventDefault()
                       addAdditionalColumn(additionalColumns.length + 1)
@@ -2473,7 +2490,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </fieldset>
                     ))}
                   <button
-                    className={'btn full-width'}
+                    className={'btn btn-primary full-width'}
                     onClick={event => {
                       event.preventDefault()
                       const updatedAdditionaCategories = [...(state.legend.additionalCategories || [])]
@@ -2784,7 +2801,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                         )}
                       </Droppable>
                     </DragDropContext>
-                    {state.legend.categoryValuesOrder && state.legend.categoryValuesOrder.length >= 10 && (
+                    {runtimeLegend && runtimeLegend.length >= 10 && (
                       <section className='error-box my-2'>
                         <div>
                           <strong className='pt-1'>Warning</strong>
@@ -2911,7 +2928,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   <p style={{ textAlign: 'center' }}>There are currently no filters.</p>
                 )}
                 <button
-                  className={'btn full-width'}
+                  className={'btn btn-primary full-width'}
                   onClick={event => {
                     event.preventDefault()
                     changeFilter(null, 'addNew')
@@ -3243,7 +3260,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <label>
                 <span className='edit-label'>Map Color Palette</span>
               </label>
-              {/* <InputCheckbox  section="general" subsection="palette"  fieldName='isReversed'  size='small' label='Use selected palette in reverse order'   updateField={updateField}  value={isPaletteReversed} /> */}
               <InputToggle
                 type='3d'
                 section='general'
@@ -3527,7 +3543,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     )
                   })}
 
-                <button type='button' onClick={() => editCityStyles('add', 0, '', '')} className='btn full-width'>
+                <button
+                  type='button'
+                  onClick={() => editCityStyles('add', 0, '', '')}
+                  className='btn btn-primary full-width'
+                >
                   Add city style
                 </button>
               </>
@@ -3629,7 +3649,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </>
                 )
               })}
-              <button className={'btn full-width'} onClick={handleAddLayer}>
+              <button className={'btn btn-primary full-width'} onClick={handleAddLayer}>
                 Add Map Layer
               </button>
               <p className='layer-purpose-details'>

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

@@ -11,7 +11,12 @@ import ConfigContext from '../../../../context'
 // styles
 
 const PanelAnnotate: React.FC = props => {
-  const { state: config, setState: updateConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const {
+    state: config,
+    setState: updateConfig,
+    dimensions,
+    isDraggingAnnotation
+  } = useContext<MapContext>(ConfigContext)
   const getColumns = (filter = true) => {
     const columns = {}
     config.data.forEach(row => {
@@ -20,7 +25,10 @@ const PanelAnnotate: React.FC = props => {
 
     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))) {
+        if (
+          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
+          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
+        ) {
           delete columns[key]
         }
       })
@@ -41,7 +49,9 @@ const PanelAnnotate: React.FC = props => {
   }
 
   const handleAddAnnotation = () => {
-    const svgContainer = document.querySelector('.map-container > section > svg, .map-container > section > canvas')?.getBoundingClientRect()
+    const svgContainer = document
+      .querySelector('.map-container > section > svg, .map-container > section > canvas')
+      ?.getBoundingClientRect()
     const newSvgDims = [svgContainer.width, svgContainer.height]
 
     const newAnnotation = {
@@ -139,11 +149,17 @@ const PanelAnnotate: React.FC = props => {
         {config?.annotations &&
           config?.annotations.map((annotation, index) => (
             <Accordion>
-              <Accordion.Section title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}>
+              <Accordion.Section
+                title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}
+              >
                 <div className='annotation-group'>
                   <label>
                     Annotation Text:
-                    <textarea rows={5} value={annotation.text} onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)} />
+                    <textarea
+                      rows={5}
+                      value={annotation.text}
+                      onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)}
+                    />
                   </label>
                   {/* <label>
                       Vertical Anchor
@@ -304,30 +320,18 @@ const PanelAnnotate: React.FC = props => {
                     </select>
                   </label>
 
-                  {/* <label>
-                    Snap to Nearest Point
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.snapToNearestPoint}
-                      onClick={e => {
-                        const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].snapToNearestPoint = e.target.checked
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label> */}
-
-                  <Button className='warn btn-warn btn btn-remove delete' onClick={() => handleRemoveAnnotation(index)}>
+                  <Button className='btn btn-danger' onClick={() => handleRemoveAnnotation(index)}>
                     Delete Annotation
                   </Button>
                 </div>
               </Accordion.Section>
             </Accordion>
           ))}
-        {config?.annotations?.length < 3 && <Button onClick={handleAddAnnotation}>Add Annotation</Button>}
+        {config?.annotations?.length < 3 && (
+          <button className='btn btn-primary full-width' onClick={handleAddAnnotation}>
+            Add Annotation
+          </button>
+        )}
       </Accordion.Section>
     </Accordion>
   )

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

@@ -1,5 +1,11 @@
 import { useContext } from 'react'
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import ConfigContext from '../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
@@ -41,7 +47,11 @@ const PatternSettings = ({ name }: PanelProps) => {
   }
 
   /** Updates the map pattern at a given index */
-  const handleUpdateGeoPattern = (value: string, index: number, keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color') => {
+  const handleUpdateGeoPattern = (
+    value: string,
+    index: number,
+    keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color'
+  ) => {
     const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
     const updatedPatterns = [...state.map.patterns]
 
@@ -68,7 +78,9 @@ const PatternSettings = ({ name }: PanelProps) => {
 
         // Log a warning if the contrast check fails
         if (!contrastCheck) {
-          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${patternData.dataKey} with:
+          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${
+            patternData.dataKey
+          } with:
             pattern color: ${patternColor}
             contrast: ${getColorContrast(currentFill, patternColor)}
           `)
@@ -78,7 +90,9 @@ const PatternSettings = ({ name }: PanelProps) => {
       })
     })
 
-    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false) ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.' : ''
+    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false)
+      ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.'
+      : ''
 
     // Update the state with the new patterns and error message
     setState(prevState => ({
@@ -116,7 +130,12 @@ const PatternSettings = ({ name }: PanelProps) => {
         <AccordionItemButton>{name}</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        {patterns.length > 0 && <Alert type={checkPatternContrasts() ? 'success' : 'danger'} message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.' />}
+        {patterns.length > 0 && (
+          <Alert
+            type={checkPatternContrasts() ? 'success' : 'danger'}
+            message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.'
+          />
+        )}
         <br />
 
         {patterns &&
@@ -133,13 +152,26 @@ const PatternSettings = ({ name }: PanelProps) => {
               <Accordion allowZeroExpanded key={`accordion-pattern--${patternIndex}`}>
                 <AccordionItem>
                   <AccordionItemHeading>
-                    <AccordionItemButton>{pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}</AccordionItemButton>
+                    <AccordionItemButton>
+                      {pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}
+                    </AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
                     <>
-                      {pattern.contrastCheck ?? true ? <Alert type='success' message='This pattern passes contrast checks' /> : <Alert type='danger' message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>' />}{' '}
+                      {pattern.contrastCheck ?? true ? (
+                        <Alert type='success' message='This pattern passes contrast checks' />
+                      ) : (
+                        <Alert
+                          type='danger'
+                          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 => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}>
+                      <select
+                        id={`pattern-dataKey--${patternIndex}`}
+                        value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}
+                      >
                         {/* TODO: sort these? */}
                         {dataKeyOptions.map((d, index) => {
                           return (
@@ -151,14 +183,28 @@ const PatternSettings = ({ name }: PanelProps) => {
                       </select>
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
-                        <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')} id={`pattern-dataValue--${patternIndex}`} value={pattern.dataValue === '' ? '' : pattern.dataValue} />
+                        <input
+                          type='text'
+                          onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')}
+                          id={`pattern-dataValue--${patternIndex}`}
+                          value={pattern.dataValue === '' ? '' : pattern.dataValue}
+                        />
                       </label>
                       <label htmlFor={`pattern-label--${patternIndex}`}>
                         Label (optional):
-                        <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')} id={`pattern-dataValue--${patternIndex}`} value={pattern.label === '' ? '' : pattern.label} />
+                        <input
+                          type='text'
+                          onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')}
+                          id={`pattern-dataValue--${patternIndex}`}
+                          value={pattern.label === '' ? '' : pattern.label}
+                        />
                       </label>
                       <label htmlFor={`pattern-type--${patternIndex}`}>Pattern Type:</label>
-                      <select id={`pattern-type--${patternIndex}`} value={pattern?.pattern} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}>
+                      <select
+                        id={`pattern-type--${patternIndex}`}
+                        value={pattern?.pattern}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}
+                      >
                         {patternTypes.map((patternName, index) => (
                           <option value={patternName} key={index}>
                             {patternName}
@@ -166,7 +212,11 @@ const PatternSettings = ({ name }: PanelProps) => {
                         ))}
                       </select>
                       <label htmlFor={`pattern-size--${patternIndex}`}>Pattern Size:</label>
-                      <select id={`pattern-size--${patternIndex}`} value={pattern?.size} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}>
+                      <select
+                        id={`pattern-size--${patternIndex}`}
+                        value={pattern?.size}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}
+                      >
                         {['small', 'medium', 'large'].map((size, index) => (
                           <option value={size} key={index}>
                             {size}
@@ -178,16 +228,25 @@ const PatternSettings = ({ name }: PanelProps) => {
                           Pattern Color
                           <Tooltip style={{ textTransform: 'none' }}>
                             <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                              <Icon
+                                display='question'
+                                style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                              />
                             </Tooltip.Target>
                             <Tooltip.Content>
                               <p>{`If this setting is used, it is the reponsibility of the visualization author to verify the visualization colors meet WCAG 3:1 contrast ratios.`}</p>
                             </Tooltip.Content>
                           </Tooltip>
-                          <input type='text' value={pattern.color || ''} id='patternColor' name='patternColor' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')} />
+                          <input
+                            type='text'
+                            value={pattern.color || ''}
+                            id='patternColor'
+                            name='patternColor'
+                            onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')}
+                          />
                         </label>
                       </div>
-                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn--remove warn'>
+                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn-danger'>
                         Remove Pattern
                       </Button>
                     </>
@@ -196,7 +255,7 @@ const PatternSettings = ({ name }: PanelProps) => {
               </Accordion>
             )
           })}
-        <button className='btn full-width' onClick={handleAddGeoPattern}>
+        <button className='btn btn-primary full-width mt-2' onClick={handleAddGeoPattern}>
           Add Geo Pattern
         </button>
       </AccordionItemPanel>