@cdc/core 4.24.7 → 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

@@ -4,12 +4,14 @@ import Icon from '../../ui/Icon'
 import { Visualization } from '../../../types/Visualization'
 import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
 import _ from 'lodash'
-import { MultiSelectFilter, VizFilter } from '../../../types/VizFilter'
-import { filterStyleOptions, handleSorting } from '../../Filters'
+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
@@ -31,19 +33,22 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     updateField(null, null, 'filters', filters)
   }
 
-  const updateFilterProp = (prop, index, value) => {
-    updateField('filters', index, prop, value)
+  const updateFilterProp = (prop, filterIndex, value) => {
+    updateField('filters', filterIndex, prop, value)
   }
 
-  const updateFilterStyle = (index, value) => {
+  const updateFilterStyle = (index, style: VizFilterStyle) => {
     const filters = _.cloneDeep(config.filters)
-    const currentFilter = filters[index]
-    currentFilter.filterStyle = value
-    if (value === 'multi-select') {
+    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)
   }
@@ -62,14 +67,16 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
 
   const addNewFilter = () => {
     const filters = config.filters ? [...config.filters] : []
-    const newVizFilter: VizFilter = { values: [], filterStyle: 'dropdown' } as VizFilter
+    const newVizFilter: VizFilter = { values: [], filterStyle: 'dropdown', id: Date.now() } as VizFilter
     filters.push(newVizFilter)
     updateField(null, null, 'filters', filters)
   }
 
-  const handleFilterOrder = (idx1, idx2, filterIndex, filter) => {
+  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.values]
+    const updatedValues = [...(filter.orderedValues || filter.values)]
+
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
@@ -80,14 +87,20 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     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 && (
@@ -104,7 +117,10 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                   <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>
+                  <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>
             }
@@ -113,46 +129,24 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
           <ul className='filters-list'>
             {/* Whether filters should apply onChange or Apply Button */}
 
-            {config.filters.map((filter, index) => {
+            {config.filters.map((filter, filterIndex) => {
               if (filter.type === 'url') return <></>
-
               return (
-                <FieldSetWrapper fieldName={filter.columnName} fieldKey={index} fieldType='Filter' controls={openControls} deleteField={() => removeFilter(index)}>
-                  <label>
-                    <span className='edit-label column-heading'>Filter</span>
-                    <select
-                      value={filter.columnName}
-                      onChange={e => {
-                        handleNameChange(index, e.target.value)
-                      }}
-                    >
-                      <option value=''>- Select Option -</option>
-                      {dataColumns.map((dataKey, index) => (
-                        <option value={dataKey} key={index}>
-                          {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', index, e.target.checked)
-                      }}
-                    />
-                  </label>
-
+                <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(index, e.target.value)
+                        updateFilterStyle(filterIndex, e.target.value)
                       }}
                     >
                       {filterStyleOptions.map((item, index) => {
@@ -165,51 +159,136 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                     </select>
                   </label>
 
-                  <label>
-                    <span className='edit-label column-heading'>Label</span>
-                    <input
-                      type='text'
-                      value={filter.label}
-                      onChange={e => {
-                        updateFilterProp('label', index, e.target.value)
-                      }}
-                    />
-                  </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>
+                          }
+                        />
+                      )}
 
-                  {filter.filterStyle === 'multi-select' && (
-                    <TextField
-                      label='Select Limit'
-                      value={(filter as MultiSelectFilter).selectLimit}
+                      <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}
-                      section='filters'
-                      subsection={index}
-                      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>
-                      }
+                      updateFilterStyle={updateFilterStyle}
                     />
                   )}
-
                   <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', index, e.target.value)
+                    <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>
-
-                  <FilterOrder filterIndex={index} filter={filter} updateFilterProp={updateFilterProp} handleFilterOrder={handleFilterOrder} />
                 </FieldSetWrapper>
               )
             })}