@cdc/map 4.24.10 → 4.24.12-2

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'
@@ -25,6 +26,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Icon from '@cdc/core/components/ui/Icon'
 import InputToggle from '@cdc/core/components/inputs/InputToggle'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
+import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
 
 // Assets
 import UsaGraphic from '@cdc/core/assets/icon-map-usa.svg'
@@ -36,35 +38,31 @@ import usaDefaultConfig from '../../../../examples/default-usa.json'
 import countyDefaultConfig from '../../../../examples/default-county.json'
 import useMapLayers from '../../../hooks/useMapLayers.tsx'
 
-import { useFilters } from '@cdc/core/components/Filters'
-
 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'
+import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 
 // Todo: move to useReducer, seperate files out.
 const EditorPanel = ({ columnsRequiredChecker }) => {
   // prettier-ignore
   const {
-    changeFilterActive,
     columnsInData = [],
     isDashboard,
     isDebug,
-    isEditor,
     loadConfig,
     runtimeFilters,
     runtimeLegend,
     setParentConfig,
-    setRuntimeFilters,
     setState,
     state,
     tooltipId,
     runtimeData,
     setRuntimeData,
     generateRuntimeData,
-    position,
-    topoData,
+
 
   } = useContext<MapContext>(ConfigContext)
 
@@ -78,13 +76,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0])
 
-  const { handleFilterOrder, filterOrderOptions, filterStyleOptions } = useFilters({
-    config: state,
-    setConfig: setState,
-    filteredData: runtimeFilters,
-    setFilteredData: setRuntimeFilters
-  })
-
   const headerColors = [
     'theme-blue',
     'theme-purple',
@@ -109,12 +100,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 +368,8 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           ...state,
           legend: {
             ...state.legend,
-            position: value
+            position: value,
+            hideBorder: _.includes(['top', 'bottom'], value)
           }
         })
         break
@@ -1065,33 +1063,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     })
   }
 
-  const MapFilters = () => {
-    return (
-      <>
-        <label>
-          Filter Behavior
-          <select
-            value={state.filterBehavior}
-            onChange={e => {
-              setState({
-                ...state,
-                filterBehavior: e.target.value
-              })
-            }}
-          >
-            <option key='Apply Button' value='Apply Button'>
-              Apply Button
-            </option>
-            <option key='Filter Change' value='Filter Change'>
-              Filter Change
-            </option>
-          </select>
-        </label>
-        {filtersJSX}
-      </>
-    )
-  }
-
   const removeAdditionalColumn = columnName => {
     const newColumns = state.columns
 
@@ -1219,40 +1190,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 -
@@ -1288,30 +1225,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     return true
   })
 
-  const updateField = (section, subsection, fieldName, newValue) => {
-    const isArray = Array.isArray(state[section])
-
-    let sectionValue = isArray ? [...state[section], newValue] : { ...state[section], [fieldName]: newValue }
-
-    if (null !== subsection) {
-      if (isArray) {
-        sectionValue = [...state[section]]
-        sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
-      } else {
-        sectionValue = {
-          ...state[section],
-          [subsection]: { ...state[section][subsection], [fieldName]: newValue }
-        }
-      }
-    }
-
-    let updatedState = {
-      ...state,
-      [section]: sectionValue
-    }
-
-    setState(updatedState)
-  }
+  const updateField = updateFieldFactory(state, setState)
 
   const onBackClick = () => {
     setDisplayPanel(!displayPanel)
@@ -1323,163 +1237,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const usedFilterColumns = {}
 
-  const filtersJSX = state.filters.map((filter, index) => {
-    if (filter.type === 'url') return <></>
-
-    if (filter.columnName) {
-      usedFilterColumns[filter.columnName] = true
-    }
-
-    return (
-      <>
-        <fieldset className='edit-block' key={`filter-${index}`}>
-          <button
-            className='remove-column'
-            onClick={e => {
-              e.preventDefault()
-              changeFilter(index, 'remove')
-            }}
-          >
-            Remove
-          </button>
-          <TextField
-            value={state.filters[index].label}
-            section='filters'
-            subsection={index}
-            fieldName='label'
-            label='Label'
-            updateField={updateField}
-          />
-          <label>
-            <span className='edit-label column-heading'>
-              Filter Column
-              <Tooltip style={{ textTransform: 'none' }}>
-                <Tooltip.Target>
-                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                </Tooltip.Target>
-                <Tooltip.Content>
-                  <p>
-                    Selecting a column will add a dropdown menu below the map legend and allow users to filter based on
-                    the values in this column.
-                  </p>
-                </Tooltip.Content>
-              </Tooltip>
-            </span>
-            <select
-              value={filter.columnName}
-              onChange={event => {
-                changeFilter(index, 'columnName', event.target.value)
-              }}
-            >
-              {columnsOptions.filter(({ key }) => undefined === usedFilterColumns[key] || filter.columnName === key)}
-            </select>
-          </label>
-
-          <label>
-            <span className='edit-showDropdown column-heading'>Show Filter Input</span>
-            <input
-              type='checkbox'
-              checked={filter.showDropdown === undefined ? true : filter.showDropdown}
-              onChange={e => {
-                changeFilter(index, 'showDropdown', e.target.checked)
-              }}
-            />
-          </label>
-
-          <label>
-            <span className='edit-filterOrder column-heading'>Filter Style</span>
-            <select
-              value={filter.filterStyle}
-              onChange={e => {
-                changeFilter(index, 'filterStyle', e.target.value)
-              }}
-            >
-              {filterStyleOptions.map((option, index) => {
-                return (
-                  <option value={option} key={`filter-${option}--${index}`}>
-                    {option}
-                  </option>
-                )
-              })}
-            </select>
-          </label>
-
-          <label>
-            <span className='edit-filterOrder column-heading'>Filter Order</span>
-            <select
-              value={filter.order}
-              onChange={e => {
-                changeFilter(index, 'filterOrder', e.target.value)
-                changeFilterActive(index, filter.values[0])
-              }}
-            >
-              {filterOrderOptions.map((option, index) => {
-                return (
-                  <option value={option.value} key={`filter-${index}`}>
-                    {option.label}
-                  </option>
-                )
-              })}
-            </select>
-          </label>
-
-          <TextField
-            value={state.filters[index].setByQueryParameter}
-            section='filters'
-            subsection={index}
-            fieldName='setByQueryParameter'
-            label='Default Value Set By Query String Parameter'
-            updateField={updateField}
-          />
-
-          {filter.order === 'cust' && (
-            <DragDropContext
-              onDragEnd={({ source, destination }) =>
-                handleFilterOrder(source.index, destination.index, index, state.filters[index])
-              }
-            >
-              <Droppable droppableId='filter_order'>
-                {provided => (
-                  <ul
-                    {...provided.droppableProps}
-                    className='sort-list'
-                    ref={provided.innerRef}
-                    style={{ marginTop: '1em' }}
-                  >
-                    {state.filters[index]?.values.map((value, index) => {
-                      return (
-                        <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
-                          {(provided, snapshot) => (
-                            <li>
-                              <div
-                                className={snapshot.isDragging ? 'currently-dragging' : ''}
-                                style={getItemStyle(
-                                  snapshot.isDragging,
-                                  provided.draggableProps.style,
-                                  sortableItemStyles
-                                )}
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                              >
-                                {value}
-                              </div>
-                            </li>
-                          )}
-                        </Draggable>
-                      )
-                    })}
-                    {provided.placeholder}
-                  </ul>
-                )}
-              </Droppable>
-            </DragDropContext>
-          )}
-        </fieldset>
-      </>
-    )
-  })
-
   const StateOptionList = () => {
     const arrOfArrays = Object.entries(supportedStatesFipsCodes)
 
@@ -1530,9 +1287,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 +1326,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           )}
         </Draggable>
       ))
-    ) : (
-      <></>
-    )
   }
 
   const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
@@ -2205,6 +1979,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 +2046,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 +2200,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 +2256,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 +2567,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>
@@ -2840,7 +2623,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </label>
                   </React.Fragment>
                 )}
-                {filtersJSX.length > 0 && (
+                {state.filters.length > 0 && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2868,7 +2651,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </span>
                   </label>
                 )}
-                {(filtersJSX.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us') && (
+                {(state.filters.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us') && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2905,20 +2688,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <AccordionItemButton>Filters</AccordionItemButton>
               </AccordionItemHeading>
               <AccordionItemPanel>
-                {filtersJSX.length > 0 ? (
-                  <MapFilters />
-                ) : (
-                  <p style={{ textAlign: 'center' }}>There are currently no filters.</p>
-                )}
-                <button
-                  className={'btn full-width'}
-                  onClick={event => {
-                    event.preventDefault()
-                    changeFilter(null, 'addNew')
-                  }}
-                >
-                  Add Filter
-                </button>
+                <VizFilterEditor config={state} updateField={updateField} rawData={state.data} />
               </AccordionItemPanel>
             </AccordionItem>
           )}
@@ -3243,7 +3013,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 +3296,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 +3402,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>
   )