@cdc/map 4.25.3 → 4.25.6

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

@@ -1,9 +1,16 @@
-const Error = ({ state }) => {
+import { useContext } from 'react'
+import ConfigContext from '../../../context'
+
+const Error = () => {
+
+  const { config } = useContext(ConfigContext)
+  const errorMessage = config.runtime.editorErrorMessage
+
   return (
     <section className='waiting'>
       <section className='waiting-container'>
         <h3>Error With Configuration</h3>
-        <p>{state.runtime.editorErrorMessage}</p>
+        <p>{errorMessage}</p>
       </section>
     </section>
   )

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

@@ -1,8 +1,13 @@
-import React from 'react'
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
-import parse from 'html-react-parser'
-import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
-import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
+import React, { useContext } from 'react'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
+import ConfigContext from '../../../context'
+import _ from 'lodash'
 
 const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'Arrow Left', 'None']
 
@@ -13,52 +18,14 @@ export const DATA_OPERATOR_LESSEQUAL = '<='
 export const DATA_OPERATOR_GREATEREQUAL = '>='
 export const DATA_OPERATOR_EQUAL = '='
 export const DATA_OPERATOR_NOTEQUAL = '≠'
-
-export const DATA_OPERATORS = [DATA_OPERATOR_LESS, DATA_OPERATOR_GREATER, DATA_OPERATOR_LESSEQUAL, DATA_OPERATOR_GREATEREQUAL, DATA_OPERATOR_EQUAL, DATA_OPERATOR_NOTEQUAL]
-
-const HexSettingDisplayShapesOnHex = props => {
-  const { state, setState } = props
-  if (!state.general.displayAsHex) return <></>
-  return (
-    <label className='checkbox mt-4'>
-      <input
-        type='checkbox'
-        checked={state.hexMap.type === 'shapes'}
-        onChange={event => {
-          setState({
-            ...state,
-            hexMap: {
-              ...state.hexMap,
-              type: event.target.checked ? 'shapes' : 'standard'
-            }
-          })
-        }}
-      />
-      <span className='edit-label'>Display Shapes on Hex Map</span>
-    </label>
-  )
-}
-
-const HexSettingDisplayAsHexMap = props => {
-  const { state, handleEditorChanges } = props
-
-  return (
-    state.general.geoType === 'us' &&
-    state.general.type !== ' navigation' &&
-    state.general.type !== 'bubble' && (
-      <label className='checkbox mt-4'>
-        <input
-          type='checkbox'
-          checked={state.general.displayAsHex}
-          onChange={event => {
-            handleEditorChanges('displayAsHex', event.target.checked)
-          }}
-        />
-        <span className='edit-label'>Display As Hex Map</span>
-      </label>
-    )
-  )
-}
+export const DATA_OPERATORS = [
+  DATA_OPERATOR_LESS,
+  DATA_OPERATOR_GREATER,
+  DATA_OPERATOR_LESSEQUAL,
+  DATA_OPERATOR_GREATEREQUAL,
+  DATA_OPERATOR_EQUAL,
+  DATA_OPERATOR_NOTEQUAL
+]
 
 /**
  * Notice: each shape Col has a legend title and description should the title/desc need to be different for different shapes.
@@ -66,14 +33,15 @@ const HexSettingDisplayAsHexMap = props => {
  * @returns
  */
 const HexSettingShapeColumns = props => {
-  const { state, setState, columnsOptions } = props
+  const { columnsOptions } = props
+  const { config, setConfig } = useContext(ConfigContext)
 
   const handleItemUpdate = (key, value, shapeGroupIndex, itemIndex) => {
-    setState({
-      ...state,
+    setConfig({
+      ...config,
       hexMap: {
-        ...state.hexMap,
-        shapeGroups: state.hexMap.shapeGroups.map((group, groupIndex) => {
+        ...config.hexMap,
+        shapeGroups: config.hexMap.shapeGroups.map((group, groupIndex) => {
           if (groupIndex === shapeGroupIndex) {
             return {
               ...group,
@@ -97,11 +65,11 @@ const HexSettingShapeColumns = props => {
   }
 
   const handleRemoveShapeCondition = (shapeGroupIndex, itemIndex) => {
-    setState({
-      ...state,
+    setConfig({
+      ...config,
       hexMap: {
-        ...state.hexMap,
-        shapeGroups: state.hexMap.shapeGroups.map((group, groupIndex) => {
+        ...config.hexMap,
+        shapeGroups: config.hexMap.shapeGroups.map((group, groupIndex) => {
           if (groupIndex === shapeGroupIndex) {
             return {
               ...group,
@@ -116,15 +84,15 @@ const HexSettingShapeColumns = props => {
   }
 
   return (
-    state.general.displayAsHex &&
-    state.hexMap.type === 'shapes' && (
+    config.general.displayAsHex &&
+    config.hexMap.type === 'shapes' && (
       <>
         <fieldset className='edit-block'>
-          {state.hexMap.shapeGroups && (
+          {config.hexMap.shapeGroups && (
             <>
               <Accordion allowZeroExpanded>
                 <ul style={{ listStyle: 'none' }}>
-                  {state.hexMap.shapeGroups?.map((shapeGroup, shapeGroupIndex) => {
+                  {config.hexMap.shapeGroups?.map((shapeGroup, shapeGroupIndex) => {
                     return (
                       <AccordionItem>
                         <AccordionItemHeading>
@@ -136,24 +104,11 @@ const HexSettingShapeColumns = props => {
                             <input
                               type='text'
                               value={shapeGroup.legendTitle || ''}
-                              onChange={e =>
-                                setState(prevState => ({
-                                  ...prevState,
-                                  hexMap: {
-                                    ...prevState.hexMap,
-                                    shapeGroups: prevState.hexMap.shapeGroups.map((group, groupIndex) => {
-                                      if (groupIndex === shapeGroupIndex) {
-                                        return {
-                                          ...group,
-                                          legendTitle: e.target.value
-                                        }
-                                      } else {
-                                        return group
-                                      }
-                                    })
-                                  }
-                                }))
-                              }
+                              onChange={e => {
+                                const newConfig = _.cloneDeep(config)
+                                newConfig.hexMap.shapeGroups[shapeGroupIndex].legendTitle = e.target.value
+                                setConfig(newConfig)
+                              }}
                             />
                           </label>
 
@@ -162,24 +117,11 @@ const HexSettingShapeColumns = props => {
                             <input
                               type='text'
                               value={shapeGroup.legendDescription || ''}
-                              onChange={e =>
-                                setState(prevState => ({
-                                  ...prevState,
-                                  hexMap: {
-                                    ...prevState.hexMap,
-                                    shapeGroups: prevState.hexMap.shapeGroups.map((group, groupIndex) => {
-                                      if (groupIndex === shapeGroupIndex) {
-                                        return {
-                                          ...group,
-                                          legendDescription: e.target.value
-                                        }
-                                      } else {
-                                        return group
-                                      }
-                                    })
-                                  }
-                                }))
-                              }
+                              onChange={e => {
+                                const newConfig = _.clone(config)
+                                newConfig.hexMap.shapeGroups[shapeGroupIndex].legendDescription = e.target.value
+                                setConfig(newConfig)
+                              }}
                             />
                           </label>
 
@@ -195,7 +137,11 @@ const HexSettingShapeColumns = props => {
                                       <label>
                                         <span className='edit-label column-heading'>Shape Column</span>
                                         <select
-                                          value={state.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape ? state.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape : 'select'}
+                                          value={
+                                            config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape
+                                              ? config.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].shape
+                                              : 'select'
+                                          }
                                           onChange={e => {
                                             handleItemUpdate('shape', e.target.value, shapeGroupIndex, itemIndex)
                                           }}
@@ -212,12 +158,32 @@ const HexSettingShapeColumns = props => {
                                         </label>
                                         <div className='cove-accordion__panel-row cove-accordion__small-inputs'>
                                           <div className='cove-accordion__panel-col cove-input'>
-                                            <select value={state.hexMap.shapeGroups[shapeGroupIndex].key === '' ? 'Select' : state.hexMap.shapeGroups[shapeGroupIndex].key} className='cove-input' onChange={e => handleItemUpdate('key', e.target.value, shapeGroupIndex, itemIndex)}>
+                                            <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={state.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].operator || '-SELECT-'} initial='Select' className='cove-input' onChange={e => handleItemUpdate('operator', e.target.value, shapeGroupIndex, itemIndex)}>
+                                            <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>
                                               })}
@@ -239,11 +205,30 @@ const HexSettingShapeColumns = props => {
                                             </select>
                                           </div>
                                           <div className='cove-accordion__panel-col cove-input'>
-                                            <input type='text' value={state.hexMap.shapeGroups[shapeGroupIndex].items[itemIndex].value || ''} className='cove-input' style={{ height: '100%' }} onChange={e => handleItemUpdate('value', e.target.value, shapeGroupIndex, itemIndex)} />
+                                            <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={{ background: 'none', border: '1px solid red', color: 'red', marginTop: '15px' }} onClick={e => handleRemoveShapeCondition(shapeGroupIndex, itemIndex)}>
+                                      <button
+                                        className='cove-button cove-button--warn'
+                                        style={{
+                                          background: 'none',
+                                          border: '1px solid red',
+                                          color: 'red',
+                                          marginTop: '15px'
+                                        }}
+                                        onClick={e => handleRemoveShapeCondition(shapeGroupIndex, itemIndex)}
+                                      >
                                         Remove Shape Conditional
                                       </button>
                                     </>
@@ -257,33 +242,33 @@ const HexSettingShapeColumns = props => {
                             <button
                               className='cove-button'
                               style={{ marginTop: '15px' }}
-                              onClick={() =>
-                                setState({
-                                  ...state,
-                                  hexMap: {
-                                    ...state.hexMap,
-                                    shapeGroups: state.hexMap.shapeGroups.map((group, index) => {
-                                      if (index === shapeGroupIndex) {
-                                        return {
-                                          ...group,
-                                          items: [
-                                            ...group.items,
-                                            {
-                                              key: '',
-                                              shape: 'Arrow Up',
-                                              column: '',
-                                              operator: '=',
-                                              value: ''
-                                            }
-                                          ]
-                                        }
-                                      } else {
-                                        return group
+                              onClick={() => {
+                                const newConfig = _.cloneDeep(config)
+                                _.set(
+                                  newConfig,
+                                  'hexMap.shapeGroups',
+                                  _.map(newConfig.hexMap.shapeGroups, (group, index) => {
+                                    if (index === shapeGroupIndex) {
+                                      return {
+                                        ...group,
+                                        items: [
+                                          ...group.items,
+                                          {
+                                            key: '',
+                                            shape: 'Arrow Up',
+                                            column: '',
+                                            operator: '=',
+                                            value: ''
+                                          }
+                                        ]
                                       }
-                                    })
-                                  }
-                                })
-                              }
+                                    }
+                                    return group
+                                  })
+                                )
+
+                                setConfig(newConfig)
+                              }}
                             >
                               Add Shape Condition
                             </button>
@@ -292,12 +277,15 @@ const HexSettingShapeColumns = props => {
                               className='cove-button cove-button--warn'
                               style={{ background: 'none', border: '1px solid red', color: 'red', marginTop: '15px' }}
                               onClick={(e, itemIndex) => {
-                                let newGroups = [...state.hexMap.shapeGroups.slice(0, shapeGroupIndex), ...state.hexMap.shapeGroups.slice(shapeGroupIndex + 1)]
+                                let newGroups = [
+                                  ...config.hexMap.shapeGroups.slice(0, shapeGroupIndex),
+                                  ...config.hexMap.shapeGroups.slice(shapeGroupIndex + 1)
+                                ]
 
-                                setState({
-                                  ...state,
+                                setConfig({
+                                  ...config,
                                   hexMap: {
-                                    ...state.hexMap,
+                                    ...config.hexMap,
                                     shapeGroups: newGroups
                                   }
                                 })
@@ -320,7 +308,7 @@ const HexSettingShapeColumns = props => {
             className='cove-button'
             style={{ marginTop: '15px' }}
             onClick={index => {
-              let copy = state.hexMap.shapeGroups
+              let copy = config.hexMap.shapeGroups
               copy.push({
                 legendTitle: '',
                 legendDescription: '',
@@ -328,10 +316,10 @@ const HexSettingShapeColumns = props => {
               })
               copy.legendTitle = ''
               copy.legendDescription = ''
-              setState({
-                ...state,
+              setConfig({
+                ...config,
                 hexMap: {
-                  ...state.hexMap,
+                  ...config.hexMap,
                   shapeGroups: copy
                 }
               })
@@ -347,8 +335,6 @@ const HexSettingShapeColumns = props => {
 
 const HexSetting = () => props.children
 
-HexSetting.DisplayShapesOnHex = HexSettingDisplayShapesOnHex
-HexSetting.DisplayAsHexMap = HexSettingDisplayAsHexMap
 HexSetting.ShapeColumns = HexSettingShapeColumns
 
 export default HexSetting

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

@@ -6,17 +6,13 @@ import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
 import { MapContext } from '../../../../types/MapContext'
 import ConfigContext from '../../../../context'
-
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
+import { setConfig } from 'dompurify'
 // types
 // styles
 
 const PanelAnnotate: React.FC = props => {
-  const {
-    state: config,
-    setState: updateConfig,
-    dimensions,
-    isDraggingAnnotation
-  } = useContext<MapContext>(ConfigContext)
+  const { config, setConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
   const getColumns = (filter = true) => {
     const columns = {}
     config.data.forEach(row => {
@@ -42,7 +38,7 @@ const PanelAnnotate: React.FC = props => {
     annotations[index][property] = value
     annotations[index].savedDimensions = [dimensions[0] * 0.73, dimensions[1]]
 
-    updateConfig({
+    setConfig({
       ...config,
       annotations
     })
@@ -94,7 +90,7 @@ const PanelAnnotate: React.FC = props => {
 
     const annotations = Array.isArray(config.annotations) ? config.annotations : []
 
-    updateConfig({
+    setConfig({
       ...config,
       annotations: [...annotations, newAnnotation]
     })
@@ -102,7 +98,7 @@ const PanelAnnotate: React.FC = props => {
 
   const handleRemoveAnnotation = (annotationIndex: number) => {
     const updated = config.annotations.filter((_, index) => index !== annotationIndex)
-    updateConfig({
+    setConfig({
       ...config,
       annotations: updated
     })
@@ -117,7 +113,7 @@ const PanelAnnotate: React.FC = props => {
             type='checkbox'
             checked={config?.general?.showAnnotationDropdown}
             onClick={e => {
-              updateConfig({
+              setConfig({
                 ...config,
                 general: {
                   ...config.general,
@@ -135,7 +131,7 @@ const PanelAnnotate: React.FC = props => {
             style={{ marginBottom: '10px' }}
             value={config?.general?.annotationDropdownText}
             onChange={e => {
-              updateConfig({
+              setConfig({
                 ...config,
                 general: {
                   ...config.general,
@@ -200,7 +196,7 @@ const PanelAnnotate: React.FC = props => {
                       onChange={e => {
                         const updatedAnnotations = [...config?.annotations]
                         updatedAnnotations[index].opacity = e.target.value
-                        updateConfig({
+                        setConfig({
                           ...config,
                           annotations: updatedAnnotations
                         })
@@ -217,7 +213,7 @@ const PanelAnnotate: React.FC = props => {
                       onClick={e => {
                         const updatedAnnotations = [...config?.annotations]
                         updatedAnnotations[index].edit.subject = e.target.checked
-                        updateConfig({
+                        setConfig({
                           ...config,
                           annotations: updatedAnnotations
                         })
@@ -232,7 +228,7 @@ const PanelAnnotate: React.FC = props => {
                       onClick={e => {
                         const updatedAnnotations = [...config?.annotations]
                         updatedAnnotations[index].edit.label = e.target.checked
-                        updateConfig({
+                        setConfig({
                           ...config,
                           annotations: updatedAnnotations
                         })
@@ -240,85 +236,58 @@ const PanelAnnotate: React.FC = props => {
                     />
                   </label>
 
-                  <label>
-                    Connection Type:
-                    <select
-                      onChange={e => {
-                        const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].connectionType = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    >
-                      {['curve', 'line', 'elbow', 'none'].map((side, index) => (
-                        <option key={side} value={side}>
-                          {side}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
+                  <Select
+                    label='Connection Type'
+                    value={config?.annotations[index]?.connectionType || ''}
+                    options={['curve', 'line', 'elbow', 'none'].map(side => ({
+                      value: side,
+                      label: side
+                    }))}
+                    onChange={event => {
+                      const updatedAnnotations = [...config?.annotations]
+                      updatedAnnotations[index].connectionType = event.target.value
+                      setConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
                   {annotation.connectionType === 'curve' && (
-                    <label>
-                      Line Type:
-                      <select
-                        onChange={e => {
-                          const updatedAnnotations = [...config?.annotations]
-                          updatedAnnotations[index].lineType = e.target.value
-                          updateConfig({
-                            ...config,
-                            annotations: updatedAnnotations
-                          })
-                        }}
-                      >
-                        {Object.entries(approvedCurveTypes).map(([value, key]) => (
-                          <option key={key} value={key}>
-                            {value}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                  )}
-
-                  {/* <label>
-                    Connection Location:
-                    <select
-                      onChange={e => {
+                    <Select
+                      label='Line Type'
+                      value={config?.annotations[index]?.lineType || ''}
+                      options={Object.entries(approvedCurveTypes).map(([value, key]) => ({
+                        value: key,
+                        label: value
+                      }))}
+                      onChange={event => {
                         const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].connectionLocation = e.target.value
-                        updateConfig({
+                        updatedAnnotations[index].lineType = event.target.value
+                        setConfig({
                           ...config,
                           annotations: updatedAnnotations
                         })
                       }}
-                    >
-                      {['auto', 'left', 'top', 'bottom', 'right'].map((side, index) => (
-                        <option key={side} value={side}>
-                          {side}
-                        </option>
-                      ))}
-                    </select>
-                  </label> */}
+                    />
+                  )}
 
-                  <label>
-                    Marker
-                    <select
-                      onChange={e => {
-                        const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].marker = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    >
-                      {['circle', 'arrow'].map((column, columnIndex) => {
-                        return <option>{column}</option>
-                      })}
-                    </select>
-                  </label>
+                  <Select
+                    label='Marker'
+                    value={config?.annotations[index]?.marker || ''}
+                    options={['circle', 'arrow'].map(option => ({
+                      value: option,
+                      label: option
+                    }))}
+                    onChange={event => {
+                      const updatedAnnotations = [...config?.annotations]
+                      updatedAnnotations[index].marker = event.target.value
+                      setConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
                   <Button className='btn btn-danger' onClick={() => handleRemoveAnnotation(index)}>
                     Delete Annotation