@cdc/core 4.24.5 → 4.24.9

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -0,0 +1,268 @@
+import _ from 'lodash'
+import { SubGrouping, VizFilter, OrderBy } from '../../../types/VizFilter'
+import { filterOrderOptions, handleSorting } from '../../Filters'
+import FilterOrder from './components/FilterOrder'
+import { Visualization } from '../../../types/Visualization'
+
+type NestedDropdownEditorProps = {
+  config: Visualization
+  dataColumns: string[]
+  filterIndex: number
+  handleNameChange: Function
+  rawData: Object[]
+  updateField: Function
+  updateFilterStyle: Function
+  handleGroupingCustomOrder: (index1: number, index2: number) => void
+}
+
+const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
+  config,
+  dataColumns,
+  handleGroupingCustomOrder,
+  handleNameChange: handleGroupColumnNameChange,
+  filterIndex,
+  rawData,
+  updateField
+}) => {
+  const filter = config.filters[filterIndex]
+  const subGrouping = filter?.subGrouping
+  const listOfUsedColumnNames: string[] = []
+
+  config.filters.forEach((filter: VizFilter, index) => {
+    if (filterIndex === index) return
+    listOfUsedColumnNames.push(filter.columnName)
+    if (subGrouping?.columnName) listOfUsedColumnNames.push(subGrouping.columnName)
+  })
+
+  const updateGroupingFilterProp = (prop, value) => {
+    updateField('filters', filterIndex, prop, value)
+  }
+
+  const handleGroupingOrderBy = (order: OrderBy) => {
+    const groupSortObject = {
+      values: _.cloneDeep(filter.values),
+      order
+    }
+    const newOrderedValues = handleSorting(groupSortObject).values
+
+    const newAllFilters = _.cloneDeep(config.filters)
+    newAllFilters[filterIndex] = { ...filter, values: newOrderedValues, order }
+    if (order === 'cust') {
+      newAllFilters[filterIndex].orderedValues = newOrderedValues
+    } else {
+      delete newAllFilters[filterIndex].orderedValues
+    }
+    updateField(null, null, 'filters', newAllFilters)
+  }
+
+  const updateSubGroupingFilterProperty = (newSubGrouping: SubGrouping) => {
+    updateField('filters', filterIndex, 'subGrouping', newSubGrouping)
+  }
+
+  const handleSubGroupColumnNameChange = value => {
+    const filterGroups = filter.orderedValues?.length ? filter.orderedValues : filter.values
+
+    const valuesLookup = filterGroups.reduce((acc, groupName) => {
+      const values: string[] = _.uniq(
+        rawData
+          .map(d => {
+            return d[filter.columnName] === groupName ? d[value] : ''
+          })
+          .filter(value => value !== '')
+      ).sort()
+
+      acc[groupName] = {
+        values // add temp values when column changes
+      }
+      return acc
+    }, {})
+    const newSubGrouping: SubGrouping = {
+      ...subGrouping,
+      columnName: value,
+      valuesLookup
+    }
+
+    updateSubGroupingFilterProperty(newSubGrouping)
+  }
+
+  const handleSubGroupingOrderBy = (order: OrderBy) => {
+    const newValuesLookup = Object.keys(subGrouping.valuesLookup).reduce((acc, groupName) => {
+      const subGroup = subGrouping.valuesLookup[groupName]
+
+      const { values } = handleSorting({ values: subGroup.values, order })
+      acc[groupName] = {
+        values
+      }
+      if (order === 'cust') {
+        acc[groupName].orderedValues = values
+      } else {
+        delete acc[groupName].orderedValues
+      }
+      return acc
+    }, {})
+    const newSortedSubGrouping = { ...subGrouping, order, valuesLookup: newValuesLookup }
+    updateSubGroupingFilterProperty(newSortedSubGrouping)
+  }
+
+  const handleSubGroupingCustomOrder = (
+    currentIndex,
+    newIndex,
+    subGroupingFitlerOrder: string[],
+    groupName: string
+  ) => {
+    const updatedGroupOrderedValues = _.cloneDeep(subGroupingFitlerOrder)
+    const [movedItem] = updatedGroupOrderedValues.splice(currentIndex, 1)
+    updatedGroupOrderedValues.splice(newIndex, 0, movedItem)
+    const newSubGrouping = _.cloneDeep(subGrouping)
+    newSubGrouping.valuesLookup[groupName].values = updatedGroupOrderedValues
+    newSubGrouping.valuesLookup[groupName].orderedValues = updatedGroupOrderedValues
+    updateSubGroupingFilterProperty({ ...newSubGrouping, order: 'cust' })
+  }
+
+  const columnNameOptions = dataColumns.filter(columnName => !listOfUsedColumnNames.includes(columnName))
+
+  return (
+    <div className='nesteddropdown-editor'>
+      <label>
+        <span className='edit-label column-heading mt-2'>Label</span>
+        <input
+          type='text'
+          value={filter.label}
+          onChange={e => {
+            updateGroupingFilterProp('label', e.target.value)
+          }}
+        />
+      </label>
+
+      <label>
+        <div className='edit-label column-heading mt-2'>
+          Filter Grouping
+          <span></span>
+        </div>
+        <select value={filter.columnName} onChange={e => handleGroupColumnNameChange(e.target.value)}>
+          <option value=''>- Select Option -</option>
+          {columnNameOptions.map((option, index) => (
+            <option value={option} key={index}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        <div className='edit-label column-heading mt-2'>
+          Filter SubGrouping
+          <span></span>
+        </div>
+        <select
+          value={subGrouping?.columnName ?? ''}
+          onChange={e => {
+            handleSubGroupColumnNameChange(e.target.value)
+          }}
+        >
+          <option value=''>- Select Option -</option>
+          {columnNameOptions.map((option, index) => {
+            if (option !== filter.columnName) {
+              return (
+                <option value={option} key={index}>
+                  {option}
+                </option>
+              )
+            }
+          })}
+        </select>
+      </label>
+
+      <label>
+        <input
+          type='checkbox'
+          checked={!!filter.setByQueryParameter}
+          aria-label='Create query parameters'
+          onChange={e => {
+            updateGroupingFilterProp('setByQueryParameter', filter.columnName)
+            updateSubGroupingFilterProperty({ ...subGrouping, setByQueryParameter: subGrouping.columnName })
+          }}
+        />
+        <span> Create query parameters</span>
+        {!!filter.setByQueryParameter && (
+          <>
+            <span className='edit-label column-heading mt-2'>
+              Grouping: Default Value Set By Query String Parameter
+            </span>
+            <input
+              type='text'
+              value={filter.setByQueryParameter}
+              onChange={e => {
+                updateGroupingFilterProp('setByQueryParameter', e.target.value)
+              }}
+            />
+            <span className='edit-label column-heading mt-2'>
+              SubGrouping: Default Value Set By Query String Parameter
+            </span>
+            <input
+              type='text'
+              value={subGrouping.setByQueryParameter}
+              onChange={e => {
+                const setByQueryParameter = e.target.value
+                updateSubGroupingFilterProperty({ ...subGrouping, setByQueryParameter })
+              }}
+            />
+          </>
+        )}
+      </label>
+
+      <label className='mt-2'>
+        <div className='edit-label column-heading float-right'>{filter.columnName} </div>
+        <span className={'edit-filterOrder column-heading '}>Group Order</span>
+        <select value={filter.order} onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}>
+          {filterOrderOptions.map((option, index) => {
+            return (
+              <option value={option.value} key={`filter-${option.label}-${index}`}>
+                {option.label}
+              </option>
+            )
+          })}
+        </select>
+        {filter.order === 'cust' && (
+          <FilterOrder orderedValues={filter.orderedValues} handleFilterOrder={handleGroupingCustomOrder} />
+        )}
+      </label>
+
+      {subGrouping?.columnName && (
+        <label className='mt-2'>
+          <span className={'edit-filterOrder column-heading'}>SubGrouping Order</span>
+          <div className='edit-label column-heading float-right'>{subGrouping.columnName} </div>
+          <select
+            value={subGrouping.order ? subGrouping.order : 'asc'}
+            onChange={e => handleSubGroupingOrderBy(e.target.value as OrderBy)}
+          >
+            {filterOrderOptions.map((option, index) => {
+              return (
+                <option value={option.value} key={`filter-${index}`}>
+                  {option.label}
+                </option>
+              )
+            })}
+          </select>
+          {subGrouping?.order === 'cust' &&
+            filter.values.map((groupName, i) => {
+              const orderedSubGroupValues = subGrouping.valuesLookup[groupName].orderedValues
+              return (
+                <div key={`group-subgroup-values-${groupName}-${i}`}>
+                  <span className='font-weight-bold'>{groupName}</span>
+                  <FilterOrder
+                    key={`subgroup-values-${groupName}-${i}`}
+                    orderedValues={orderedSubGroupValues}
+                    handleFilterOrder={(sourceIndex, destinationIndex) => {
+                      handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
+                    }}
+                  />
+                </div>
+              )
+            })}
+        </label>
+      )}
+    </div>
+  )
+}
+
+export default NestedDropdownEditor

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -0,0 +1,306 @@
+import { Select, TextField } from '../Inputs'
+import Tooltip from '../../ui/Tooltip'
+import Icon from '../../ui/Icon'
+import { Visualization } from '../../../types/Visualization'
+import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
+import _ from 'lodash'
+import { MultiSelectFilter, VizFilter, VizFilterStyle } from '../../../types/VizFilter'
+import { filterStyleOptions, handleSorting, filterOrderOptions } from '../../Filters'
+import FieldSetWrapper from '../FieldSetWrapper'
+
+import FilterOrder from './components/FilterOrder'
+import { useMemo, useState } from 'react'
+import MultiSelect from '../../MultiSelect'
+import NestedDropdownEditor from './NestedDropdownEditor'
+
+type VizFilterProps = {
+  config: Visualization
+  updateField: UpdateFieldFunc<string | VizFilter[] | VizFilter>
+  rawData: Object[]
+}
+
+const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData }) => {
+  const openControls = useState({})
+  const dataColumns = useMemo(() => {
+    return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
+  }, [rawData])
+
+  const removeFilter = index => {
+    let filters = _.cloneDeep(config.filters)
+
+    filters.splice(index, 1)
+
+    updateField(null, null, 'filters', filters)
+  }
+
+  const updateFilterProp = (prop, filterIndex, value) => {
+    updateField('filters', filterIndex, prop, value)
+  }
+
+  const updateFilterStyle = (index, style: VizFilterStyle) => {
+    const filters = _.cloneDeep(config.filters)
+    const currentFilter = { ...filters[index], orderedValues: filters[index].values }
+    currentFilter.filterStyle = style
+    if (style === 'multi-select') {
+      currentFilter.active = Array.isArray(currentFilter.active) ? currentFilter.active : [currentFilter.active]
+    } else if (Array.isArray(currentFilter.active)) {
+      currentFilter.active = currentFilter.active[0]
+    }
+    if (style === 'nested-dropdown') {
+      currentFilter.showDropdown = true
+    }
+    filters[index] = currentFilter
+    updateField(null, null, 'filters', filters)
+  }
+
+  const handleNameChange = (filterIndex, columnName) => {
+    const values = _.uniq(rawData.map(row => row[columnName]))
+    const copiedFilter = { ..._.cloneDeep(config.filters[filterIndex]), columnName, values }
+    handleSorting(copiedFilter) // sorts dropdown values in place
+    copiedFilter.active = copiedFilter.values[0]
+    const newFilters = config.filters.map((filter, index) => {
+      if (index === filterIndex) return copiedFilter
+      return filter
+    })
+    updateField(null, null, 'filters', newFilters)
+  }
+
+  const addNewFilter = () => {
+    const filters = config.filters ? [...config.filters] : []
+    const newVizFilter: VizFilter = { values: [], filterStyle: 'dropdown', id: Date.now() } as VizFilter
+    filters.push(newVizFilter)
+    updateField(null, null, 'filters', filters)
+  }
+
+  const handleFilterOrder = (idx1, idx2, filterIndex) => {
+    const filter = config.filters[filterIndex]
+    // Create a shallow copy of the filter values array & update position of the values
+    const updatedValues = [...(filter.orderedValues || filter.values)]
+
+    const [movedItem] = updatedValues.splice(idx1, 1)
+    updatedValues.splice(idx2, 0, movedItem)
+
+    const filtersCopy = _.cloneDeep(config.filters)
+    const filterItem = { ...filtersCopy[filterIndex] }
+
+    // Overwrite filterItem.values since thats what we map through in the editor panel
+    filterItem.values = updatedValues
+    filterItem.orderedValues = updatedValues
+    filterItem.active = updatedValues[0]
+
+    filterItem.order = 'cust'
+
+    // Update the filters
+    filtersCopy[filterIndex] = filterItem
+    updateField(null, null, 'filters', filtersCopy)
+  }
+
+  const getParentFilterOptions = (index: number): { label: string; value: number }[] => {
+    return config.filters
+      .filter((f, i) => i !== index)
+      .map(({ label, columnName, id }) => ({ label: label || columnName, value: id }))
+  }
+
+  return (
+    <>
+      {config.filters && (
+        <>
+          <Select
+            value={config.filterBehavior}
+            fieldName='filterBehavior'
+            label='Filter Behavior'
+            updateField={updateField}
+            options={['Apply Button', 'Filter Change']}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>
+                    The Apply Button option changes the visualization when the user clicks "apply". The Filter Change
+                    option immediately changes the visualization when the selection is changed.
+                  </p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+          <br />
+          <ul className='filters-list'>
+            {/* Whether filters should apply onChange or Apply Button */}
+
+            {config.filters.map((filter, filterIndex) => {
+              if (filter.type === 'url') return <></>
+              return (
+                <FieldSetWrapper
+                  key={filter.columnName}
+                  fieldName={filter.columnName}
+                  fieldKey={filterIndex}
+                  fieldType='Filter'
+                  controls={openControls}
+                  deleteField={() => removeFilter(filterIndex)}
+                >
+                  <label>
+                    <span className='edit-label column-heading'>Filter Style</span>
+
+                    <select
+                      value={filter.filterStyle}
+                      onChange={e => {
+                        updateFilterStyle(filterIndex, e.target.value)
+                      }}
+                    >
+                      {filterStyleOptions.map((item, index) => {
+                        return (
+                          <option key={`filter-style-${index}`} value={item}>
+                            {item}
+                          </option>
+                        )
+                      })}
+                    </select>
+                  </label>
+
+                  {filter.filterStyle !== 'nested-dropdown' ? (
+                    <>
+                      <label>
+                        <span className='edit-label column-heading'>Filter</span>
+                        <select
+                          value={filter.columnName}
+                          onChange={e => {
+                            handleNameChange(filterIndex, e.target.value)
+                          }}
+                        >
+                          <option value=''>- Select Option -</option>
+                          {dataColumns.map((dataKey, filterIndex) => (
+                            <option value={dataKey} key={filterIndex}>
+                              {dataKey}
+                            </option>
+                          ))}
+                        </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 => {
+                            updateFilterProp('showDropdown', filterIndex, e.target.checked)
+                          }}
+                        />
+                      </label>
+
+                      <label>
+                        <span className='edit-label column-heading'>Label</span>
+                        <input
+                          type='text'
+                          value={filter.label}
+                          onChange={e => {
+                            updateFilterProp('label', filterIndex, e.target.value)
+                          }}
+                        />
+                      </label>
+
+                      {filter.filterStyle === 'multi-select' && (
+                        <TextField
+                          label='Select Limit'
+                          value={(filter as MultiSelectFilter).selectLimit}
+                          updateField={updateField}
+                          section='filters'
+                          subsection={filterIndex}
+                          fieldName='selectLimit'
+                          type='number'
+                          tooltip={
+                            <Tooltip style={{ textTransform: 'none' }}>
+                              <Tooltip.Target>
+                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                              </Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>The maximum number of items that can be selected.</p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          }
+                        />
+                      )}
+
+                      <label>
+                        <span className='edit-label column-heading'>Default Value Set By Query String Parameter</span>
+                        <input
+                          type='text'
+                          value={filter.setByQueryParameter}
+                          onChange={e => {
+                            updateFilterProp('setByQueryParameter', filterIndex, e.target.value)
+                          }}
+                        />
+                      </label>
+
+                      <label>
+                        <span className='edit-filterOrder column-heading'>Filter Order</span>
+                        <select
+                          value={filter.order ? filter.order : 'asc'}
+                          onChange={e => updateFilterProp('order', filterIndex, e.target.value)}
+                        >
+                          {filterOrderOptions.map((option, index) => {
+                            return (
+                              <option value={option.value} key={`filter-${index}`}>
+                                {option.label}
+                              </option>
+                            )
+                          })}
+                        </select>
+                        {filter.order === 'cust' && (
+                          <FilterOrder
+                            orderedValues={filter.orderedValues || filter.values}
+                            handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
+                          />
+                        )}
+                      </label>
+                    </>
+                  ) : (
+                    <NestedDropdownEditor
+                      config={config}
+                      dataColumns={dataColumns}
+                      filterIndex={filterIndex}
+                      rawData={rawData}
+                      handleGroupingCustomOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
+                      handleNameChange={value => handleNameChange(filterIndex, value)}
+                      updateField={updateField}
+                      updateFilterStyle={updateFilterStyle}
+                    />
+                  )}
+                  <label>
+                    <span className='edit-label column-heading'>
+                      Filter Parents{' '}
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            A selected parent's value will be used to filter the available options of this child filter.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </span>
+                    <MultiSelect
+                      fieldName='parents'
+                      updateField={(_section, _subsection, _fieldname, value) => {
+                        updateFilterProp('parents', filterIndex, value)
+                      }}
+                      options={getParentFilterOptions(filterIndex)}
+                    />
+                  </label>
+                </FieldSetWrapper>
+              )
+            })}
+          </ul>
+        </>
+      )}
+      {!config.filters && <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
+      <button type='button' onClick={addNewFilter} className='btn btn-primary full-width'>
+        Add Filter
+      </button>
+    </>
+  )
+}
+
+export default VizFilterEditor

package/components/EditorPanel/VizFilterEditor/components/FilterOrder.tsx

@@ -0,0 +1,40 @@
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+
+type FilterOrderProps = {
+  orderedValues: string[]
+  handleFilterOrder?: (index1: number, index2: number) => void
+}
+const FilterOrder: React.FC<FilterOrderProps> = ({ orderedValues, handleFilterOrder }) => {
+  return (
+    <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source?.index, destination?.index)}>
+      <Droppable droppableId='filter_order'>
+        {provided => (
+          <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+            {orderedValues?.map((value, index) => {
+              return (
+                <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                  {(provided, snapshot) => (
+                    <li>
+                      <div
+                        className={snapshot.isDragging ? 'currently-dragging' : ''}
+                        style={provided.draggableProps.style}
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        {value}
+                      </div>
+                    </li>
+                  )}
+                </Draggable>
+              )
+            })}
+            {provided.placeholder}
+          </ul>
+        )}
+      </Droppable>
+    </DragDropContext>
+  )
+}
+
+export default FilterOrder

package/components/EditorPanel/VizFilterEditor/index.ts

@@ -0,0 +1 @@
+export { default } from './VizFilterEditor'

package/components/EditorWrapper/EditorWrapper.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { Visualization } from '../../types/Visualization'
 import { ViewPort } from '../../types/ViewPort'
 import './editor-wrapper.style.css'
-import { Accordion } from 'react-accessible-accordion'
 
 type StandAloneComponentProps = {
   visualizationKey: string
@@ -12,6 +11,8 @@ type StandAloneComponentProps = {
   setEditing: Function
   hostname: string
   viewport?: ViewPort
+
+  [key: string]: any
 }
 
 type EditorProps = {
@@ -33,9 +34,7 @@ const EditorWrapper: React.FC<React.PropsWithChildren<EditorProps>> = ({ childre
           <div aria-level={2} role='heading' className='heading-2'>
             Configure {type}
           </div>
-          <section>
-            <Accordion allowZeroExpanded={true}>{children}</Accordion>
-          </section>
+          <section>{children}</section>
         </section>
         <div className='preview-wrapper'>
           <Component visualizationKey={visualizationKey} config={visualizationConfig} updateConfig={updateConfig} configUrl={undefined} setEditing={undefined} hostname={undefined} viewport={viewport} />

package/components/EditorWrapper/index.ts

@@ -0,0 +1 @@
+export { default } from './EditorWrapper'