@cdc/core 4.25.10 → 4.26.1

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -5,6 +5,7 @@ import { filterOrderOptions } from '../../../helpers/filterOrderOptions'
 import FilterOrder from './components/FilterOrder'
 import { Visualization } from '../../../types/Visualization'
 import { useMemo } from 'react'
+import { Select } from '../Inputs'
 
 type NestedDropdownEditorProps = {
   config: Visualization
@@ -155,43 +156,26 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
         />
       </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>
+      <Select
+        label='Filter Grouping'
+        value={filter.columnName}
+        options={[{ value: '', label: '- Select Option -' }, ...columnNameOptions.map(opt => ({ value: opt, label: opt }))]}
+        onChange={e => handleGroupColumnNameChange(e.target.value)}
+      />
+
+      <Select
+        label='Filter SubGrouping'
+        value={subGrouping?.columnName ?? ''}
+        options={[
+          { value: '', label: '- Select Option -' },
+          ...columnNameOptions
+            .filter(option => option !== filter.columnName)
+            .map(opt => ({ value: opt, label: opt }))
+        ]}
+        onChange={e => {
+          handleSubGroupColumnNameChange(e.target.value)
+        }}
+      />
 
       <label>
         <input
@@ -229,39 +213,28 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
         )}
       </label>
 
-      <label className='mt-2'>
+      <div 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>
+        <Select
+          label='Group Order'
+          value={filter.order}
+          options={filterOrderOptions}
+          onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}
+        />
         {filter.order === 'cust' && (
           <FilterOrder orderedValues={filter.orderedValues} handleFilterOrder={handleGroupingCustomOrder} />
         )}
-      </label>
+      </div>
 
       {subGrouping?.columnName && (
-        <label className='mt-2'>
-          <span className={'edit-filterOrder column-heading'}>SubGrouping Order</span>
+        <div className='mt-2'>
           <div className='edit-label column-heading float-right'>{subGrouping.columnName} </div>
-          <select
+          <Select
+            label='SubGrouping Order'
             value={subGrouping.order ? subGrouping.order : 'asc'}
+            options={filterOrderOptions}
             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
@@ -278,7 +251,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
                 </div>
               )
             })}
-        </label>
+        </div>
       )}
     </div>
   )

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -14,6 +14,7 @@ import FilterOrder from './components/FilterOrder'
 import { useMemo, useState } from 'react'
 import MultiSelect from '../../MultiSelect'
 import NestedDropdownEditor from './NestedDropdownEditor'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 
 type VizFilterProps = {
   config: Visualization
@@ -28,6 +29,16 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
   }, [rawData])
 
+  // Helper function to get filter values from various sources
+  const getFilterValues = (filter: VizFilter) => {
+    if (filter.values && filter.values.length > 0) return filter.values
+    if (filter.orderedValues && filter.orderedValues.length > 0) return filter.orderedValues
+    if (filter.columnName && rawData && rawData.length > 0) {
+      return _.uniq(rawData.map(row => row[filter.columnName]))
+    }
+    return []
+  }
+
   const removeFilter = index => {
     let filters = _.cloneDeep(config.filters)
 
@@ -118,6 +129,26 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
       .map(({ label, columnName, id }) => ({ label: label || columnName, value: id }))
   }
 
+  const handleFilterReorder = (idx1: number, idx2: number) => {
+    if (idx1 === undefined || idx2 === undefined || idx1 === idx2) return
+    const filters = _.cloneDeep(config.filters)
+    const [movedFilter] = filters.splice(idx1, 1)
+    filters.splice(idx2, 0, movedFilter)
+    updateField(null, null, 'filters', filters)
+  }
+
+  const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
+    ...draggableStyle
+  })
+
+  const sortableItemStyles = {
+    animate: false,
+    animateReplay: true,
+    display: 'block',
+    boxSizing: 'border-box' as const,
+    border: '1px solid #D1D1D1'
+  }
+
   return (
     <>
       {config.filters && (
@@ -150,188 +181,228 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
             fieldName='filterIntro'
           />
           <br />
-          <ul className='filters-list'>
-            {/* Whether filters should apply onChange or Apply Button */}
+          <DragDropContext
+            onDragEnd={({ source, destination }) => handleFilterReorder(source.index, destination?.index)}
+          >
+            <Droppable droppableId='filters_list'>
+              {provided => (
+                <ul {...provided.droppableProps} ref={provided.innerRef} className='draggable-field-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)}
-                >
-                  <Select
-                    value={filter.filterStyle}
-                    fieldName='filterStyle'
-                    label='Filter Style'
-                    updateField={(_section, _subsection, _field, value) => updateFilterStyle(filterIndex, value)}
-                    options={filterStyleOptions}
-                  />
+                  {config.filters.map((filter, filterIndex) => {
+                    if (filter.type === 'url') return <></>
+                    return (
+                      <Draggable
+                        key={filter.id || `filter-${filterIndex}`}
+                        draggableId={`filter-${filter.id || filterIndex}`}
+                        index={filterIndex}
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            className={snapshot.isDragging ? 'currently-dragging' : ''}
+                            style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+                          >
+                            <FieldSetWrapper
+                              key={filter.columnName}
+                              fieldName={filter.columnName}
+                              fieldKey={filterIndex}
+                              fieldType='Filter'
+                              controls={openControls}
+                              deleteField={() => removeFilter(filterIndex)}
+                              draggable={true}
+                            >
+                              <Select
+                                value={filter.filterStyle}
+                                fieldName='filterStyle'
+                                label='Filter Style'
+                                updateField={(_section, _subsection, _field, value) =>
+                                  updateFilterStyle(filterIndex, value)
+                                }
+                                options={filterStyleOptions}
+                              />
 
-                  {filter.filterStyle !== 'nested-dropdown' ? (
-                    <>
-                      <Select
-                        value={filter.columnName}
-                        fieldName='columnName'
-                        label='Filter'
-                        updateField={(_section, _subsection, _field, value) => handleNameChange(filterIndex, value)}
-                        options={dataColumns}
-                        initial='- Select Option -'
-                      />
+                              {filter.filterStyle !== 'nested-dropdown' ? (
+                                <>
+                                  <Select
+                                    value={filter.columnName}
+                                    fieldName='columnName'
+                                    label='Filter'
+                                    updateField={(_section, _subsection, _field, value) =>
+                                      handleNameChange(filterIndex, value)
+                                    }
+                                    options={dataColumns}
+                                    initial='- Select Option -'
+                                  />
 
-                      {filter.columnName && (
-                        <Select
-                          value={filter.defaultValue}
-                          options={
-                            filter.resetLabel
-                              ? [filter.resetLabel, ...config.filters?.[filterIndex].values]
-                              : config.filters?.[filterIndex].values
-                          }
-                          updateField={(_section, _subSection, _key, value) => {
-                            updateFilterDefaultValue(filterIndex, value)
-                          }}
-                          label='Filter Default Value'
-                          initial='Select'
-                        />
-                      )}
+                                  {filter.columnName && (
+                                    <Select
+                                      value={filter.defaultValue}
+                                      options={
+                                        filter.resetLabel
+                                          ? [filter.resetLabel, ...getFilterValues(filter)]
+                                          : getFilterValues(filter)
+                                      }
+                                      updateField={(_section, _subSection, _key, value) => {
+                                        updateFilterDefaultValue(filterIndex, value)
+                                      }}
+                                      label={`Filter Default Value${
+                                        filter.columnName ? ` (${filter.columnName})` : ''
+                                      }`}
+                                      initial='Select'
+                                    />
+                                  )}
 
-                      <label>
-                        <span className='edit-label column-heading'>Label</span>
-                        <input
-                          type='text'
-                          value={filter.label}
-                          onChange={e => {
-                            updateFilterProp('label', filterIndex, e.target.value)
-                          }}
-                        />
-                      </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}
+                                      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>
+                                      }
+                                    />
+                                  )}
 
-                      <Select
-                        value={filter.order || 'asc'}
-                        fieldName='order'
-                        label='Filter Order'
-                        updateField={(_section, _subSection, _field, value) => {
-                          updateFilterProp('order', filterIndex, value)
-                          if (filter.orderColumn && value !== 'column') updateFilterProp('orderColumn', filterIndex, '')
-                        }}
-                        options={filterOrderOptions}
-                      />
-                      {filter.order === 'cust' && (
-                        <FilterOrder
-                          orderedValues={filter.orderedValues || filter.values}
-                          handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
-                        />
-                      )}
-                      {filter.order === 'column' && (
-                        <Select
-                          value={filter.orderColumn}
-                          fieldName='orderColumn'
-                          label='Order Column'
-                          updateField={(_section, _subSection, _field, value) =>
-                            updateFilterProp('orderColumn', filterIndex, value)
-                          }
-                          options={dataColumns}
-                        />
-                      )}
-                      <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>
+                                  <Select
+                                    value={filter.order || 'asc'}
+                                    fieldName='order'
+                                    label='Filter Order'
+                                    updateField={(_section, _subSection, _field, value) => {
+                                      updateFilterProp('order', filterIndex, value)
+                                      if (filter.orderColumn && value !== 'column')
+                                        updateFilterProp('orderColumn', filterIndex, '')
+                                    }}
+                                    options={filterOrderOptions}
+                                  />
+                                  {filter.order === 'cust' && (
+                                    <FilterOrder
+                                      orderedValues={filter.orderedValues || filter.values}
+                                      handleFilterOrder={(index1, index2) =>
+                                        handleFilterOrder(index1, index2, filterIndex)
+                                      }
+                                    />
+                                  )}
+                                  {filter.order === 'column' && (
+                                    <Select
+                                      value={filter.orderColumn}
+                                      fieldName='orderColumn'
+                                      label='Order Column'
+                                      updateField={(_section, _subSection, _field, value) =>
+                                        updateFilterProp('orderColumn', filterIndex, value)
+                                      }
+                                      options={dataColumns}
+                                    />
+                                  )}
+                                  <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>
-                        <input
-                          type='checkbox'
-                          checked={filter.showDropdown === undefined ? true : filter.showDropdown}
-                          onChange={e => {
-                            updateFilterProp('showDropdown', filterIndex, e.target.checked)
-                          }}
-                        />
-                        <span className='edit-showDropdown column-heading'>Show Filter</span>
-                      </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}
-                    />
-                  )}
-                  {hasFootnotes && (
-                    <label>
-                      <input
-                        type='checkbox'
-                        checked={!!filter.filterFootnotes}
-                        onChange={e => {
-                          updateFilterProp('filterFootnotes', filterIndex, e.target.checked)
-                        }}
-                      />
-                      <span className='edit-showDropdown column-heading'>Filter Footnotes</span>
-                    </label>
-                  )}
-                  <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)}
-                      selected={config.filters[filterIndex].parents}
-                    />
-                  </label>
-                </FieldSetWrapper>
-              )
-            })}
-          </ul>
+                                  <label>
+                                    <input
+                                      type='checkbox'
+                                      checked={filter.showDropdown === undefined ? true : filter.showDropdown}
+                                      onChange={e => {
+                                        updateFilterProp('showDropdown', filterIndex, e.target.checked)
+                                      }}
+                                    />
+                                    <span className='edit-showDropdown column-heading'>Show Filter</span>
+                                  </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}
+                                />
+                              )}
+                              {hasFootnotes && (
+                                <label>
+                                  <input
+                                    type='checkbox'
+                                    checked={!!filter.filterFootnotes}
+                                    onChange={e => {
+                                      updateFilterProp('filterFootnotes', filterIndex, e.target.checked)
+                                    }}
+                                  />
+                                  <span className='edit-showDropdown column-heading'>Filter Footnotes</span>
+                                </label>
+                              )}
+                              <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)}
+                                  selected={config.filters[filterIndex].parents}
+                                />
+                              </label>
+                            </FieldSetWrapper>
+                          </div>
+                        )}
+                      </Draggable>
+                    )
+                  })}
+                  {provided.placeholder}
+                </ul>
+              )}
+            </Droppable>
+          </DragDropContext>
         </>
       )}
       {!config.filters && <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}