@cdc/map 4.24.12 → 4.25.1

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

@@ -26,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'
@@ -37,28 +38,24 @@ 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'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 
 // 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,
@@ -70,6 +67,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   } = useContext<MapContext>(ConfigContext)
 
   const { general, columns, legend, table, tooltips } = state
+  const columnsInData = state?.data?.[0] ? Object.keys(state.data[0]) : []
 
   const [configTextboxValue, setConfigTextbox] = useState({}) // eslint-disable-line
 
@@ -79,13 +77,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',
@@ -241,6 +232,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const handleEditorChanges = async (property, value) => {
     switch (property) {
+      case 'navigationTarget':
+        setState({
+          ...state,
+          general: {
+            ...state.general,
+            navigationTarget: value
+          }
+        })
+        break
       // change these to be more generic.
       // updateVisualPropertyValue
       // updateGeneralPropertyValue, etc.
@@ -725,6 +725,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               }
             })
             break
+          case 'google-map':
+            setState({
+              ...state,
+              general: {
+                ...state.general,
+                geoType: 'google-map'
+              }
+            })
           default:
             break
         }
@@ -1073,42 +1081,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>
-        <label>
-          <TextField
-            type='textarea'
-            value={state.filterIntro}
-            fieldName='filterIntro'
-            label='Filter Intro text'
-            updateField={updateField}
-          />
-        </label>
-        {filtersJSX}
-      </>
-    )
-  }
-
   const removeAdditionalColumn = columnName => {
     const newColumns = state.columns
 
@@ -1271,38 +1243,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     return true
   })
 
-  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 }
-
-    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)
@@ -1314,163 +1255,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)
 
@@ -1603,13 +1387,29 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </AccordionItemHeading>
             <AccordionItemPanel>
               {/* Geography */}
+              {/*<Select*/}
+              {/*  options={[*/}
+              {/*    { value: 'us', label: 'United States' },*/}
+              {/*    { value: 'us-region', label: 'U.S. Region' },*/}
+              {/*    { value: 'world', label: 'World' },*/}
+              {/*    { value: 'single-state', label: 'U.S. State' },*/}
+              {/*    { value: 'google-map', label: 'Google Map API' }*/}
+              {/*  ]}*/}
+              {/*  section={'general'}*/}
+              {/*  fieldName={'geoType'}*/}
+              {/*  label='Geography'*/}
+              {/*  updateField={updateField}*/}
+              {/*/>*/}
+
               <label>
                 <span className='edit-label column-heading'>
                   <span>Geography</span>
                 </span>
-                <ul className='geo-buttons'>
+                <ul className='geo-buttons d-grid' style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px' }}>
                   <button
-                    className={state.general.geoType === 'us' || state.general.geoType === 'us-county' ? 'active' : ''}
+                    className={`${
+                      state.general.geoType === 'us' || state.general.geoType === 'us-county' ? 'active' : ''
+                    } full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us')
@@ -1619,7 +1419,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>United States</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'us-region' ? 'active' : ''}
+                    className={`${state.general.geoType === 'us-region' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us-region')
@@ -1629,7 +1429,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>U.S. Region</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'world' ? 'active' : ''}
+                    className={`${state.general.geoType === 'world' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'world')
@@ -1639,7 +1439,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>World</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'single-state' ? 'active' : ''}
+                    className={`${state.general.geoType === 'single-state' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'single-state')
@@ -1648,6 +1448,16 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <AlabamaGraphic />
                     <span>U.S. State</span>
                   </button>
+                  {/* <button
+                    className={`${state.general.geoType === 'google-map' ? 'active' : ''} full-width`}
+                    onClick={e => {
+                      e.preventDefault()
+                      handleEditorChanges('geoType', 'google-map')
+                    }}
+                  >
+                    <UsaGraphic />
+                    <span>Google Map Api</span>
+                  </button> */}
                 </ul>
               </label>
               {/* Select > State or County Map */}
@@ -1760,6 +1570,23 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   )}
                 </select>
               </label>
+
+              {/* Navigation Behavior */}
+              {(state.general.type === 'navigation' || state.general.type === 'data') && (
+                <label>
+                  <span className='edit-label column-heading'>Navigation Behavior</span>
+                  <select
+                    value={state.general.navigationTarget}
+                    onChange={event => {
+                      event.preventDefault()
+                      handleEditorChanges('navigationTarget', event.target.value)
+                    }}
+                  >
+                    <option value='_self'>Same Window</option>
+                    <option value='_blank'>New Window</option>
+                  </select>
+                </label>
+              )}
               <label>
                 <span className='edit-label'>Data Classification Type</span>
                 <div>
@@ -1801,7 +1628,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                         handleEditorChanges('displayStateLabels', event.target.checked)
                       }}
                     />
-                    <span className='edit-label'>Show state labels</span>
+                    <span className='edit-label'>
+                      Show state labels
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Recommended set to display for Section 508 compliance.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </span>
                   </label>
                 )}
             </AccordionItemPanel>
@@ -1919,16 +1756,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </Tooltip>
                 }
               />
-              {'us' === state.general.geoType && (
-                <TextField
-                  value={general.territoriesLabel}
-                  updateField={updateField}
-                  section='general'
-                  fieldName='territoriesLabel'
-                  label='Territories Label'
-                  placeholder='Territories'
-                />
-              )}
               {'us' === state.general.geoType && (
                 <label className='checkbox'>
                   <input
@@ -2857,7 +2684,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </label>
                   </React.Fragment>
                 )}
-                {filtersJSX.length > 0 && (
+                {state.filters.length > 0 && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2885,7 +2712,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'
@@ -2922,20 +2749,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 btn-primary full-width'}
-                  onClick={event => {
-                    event.preventDefault()
-                    changeFilter(null, 'addNew')
-                  }}
-                >
-                  Add Filter
-                </button>
+                <VizFilterEditor config={state} updateField={updateField} rawData={state.data} />
               </AccordionItemPanel>
             </AccordionItem>
           )}
@@ -3563,6 +3377,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   updateField={updateField}
                 />
               </label>
+              {/* Leaflet Map Type */}
+              {state.general.geoType === 'leaflet' && (
+                <>
+                  <Select
+                    label='Leaflet Theme'
+                    options={layerOptions}
+                    section={'leaflet'}
+                    fieldName='theme'
+                    updateField={updateField}
+                  />
+                </>
+              )}
             </AccordionItemPanel>
           </AccordionItem>
           <AccordionItem>

package/src/components/GoogleMap/components/GoogleMap.tsx

@@ -0,0 +1,67 @@
+import React, { useContext, useEffect, useRef } from 'react'
+import { Loader } from '@googlemaps/js-api-loader'
+import { MarkerClusterer } from '@googlemaps/markerclusterer'
+import ConfigContext from '../../../context'
+
+// center on USA
+const center = {
+  lat: 37.09024,
+  lng: -95.712891
+}
+
+type GoogleMapComponentProps = {
+  apiKey?: string
+}
+
+const GoogleMapComponent: React.FC<GoogleMapComponentProps> = ({ apiKey = '' }) => {
+  const mapRef = useRef(null)
+  const { state } = useContext(ConfigContext)
+
+  useEffect(() => {
+    const loader = new Loader({
+      apiKey: apiKey,
+      version: 'weekly'
+    })
+
+    loader
+      .load()
+      .then(() => {
+        if (mapRef.current) {
+          const map = new window.google.maps.Map(mapRef.current, {
+            center: center,
+            zoom: 4
+          })
+
+          const markers = state.data.map(d => {
+            const markerContent = document.createElement('div')
+            markerContent.style.backgroundColor = 'orange' // Set the background color
+            markerContent.style.width = '25px'
+            markerContent.style.height = '25px'
+            markerContent.style.borderRadius = '50%'
+            markerContent.style.display = 'flex'
+            markerContent.style.alignItems = 'center'
+            markerContent.style.justifyContent = 'center'
+            markerContent.style.color = 'white'
+            markerContent.innerText = d[state.columns.geo.name]
+
+            const marker = new google.maps.Marker({
+              position: { lat: Number(d[state.columns.latitude.name]), lng: Number(d[state.columns.longitude.name]) },
+              title: d[state.columns.geo.name],
+              map: map
+            })
+
+            return marker
+          })
+
+          new MarkerClusterer({ markers, map })
+        }
+      })
+      .catch(e => {
+        console.error('Error loading Google Maps API:', e)
+      })
+  }, [apiKey, state])
+
+  return <div ref={mapRef} style={{ height: '500px', width: '100%' }} />
+}
+
+export default GoogleMapComponent

package/src/components/GoogleMap/index.tsx

@@ -0,0 +1,3 @@
+import GoogleMap from './components/GoogleMap'
+
+export default GoogleMap