@cdc/core 4.25.11 → 4.26.1

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
@@ -128,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 && (
@@ -160,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, ...getFilterValues(filter)]
-                              : getFilterValues(filter)
-                          }
-                          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>}

package/components/EditorPanel/sections/VisualSection.tsx

@@ -0,0 +1,169 @@
+import { ReactNode } from 'react'
+import { CheckBox } from '../Inputs'
+import { HeaderThemeSelector } from '../../HeaderThemeSelector'
+import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
+
+export interface VisualSectionConfig {
+  visual?: {
+    border?: boolean
+    borderColorTheme?: boolean
+    accent?: boolean
+    background?: boolean
+    hideBackgroundColor?: boolean
+  }
+  theme?: string
+}
+
+export interface VisualSectionProps<TConfig extends VisualSectionConfig = VisualSectionConfig> {
+  /** The visualization config object */
+  config: TConfig
+
+  /** Update function for individual fields */
+  updateField: UpdateFieldFunc<TConfig>
+
+  /** Update function for the entire config (used by HeaderThemeSelector) */
+  updateConfig: (config: TConfig) => void
+
+  /** Optional content to render before the standard checkboxes */
+  beforeCheckboxes?: ReactNode
+
+  /** Optional content to render after the standard checkboxes */
+  afterCheckboxes?: ReactNode
+
+  /** Position of HeaderThemeSelector. Defaults to 'before' */
+  themeSelectorPosition?: 'before' | 'after' | 'none'
+
+  /** Whether to show the border checkbox. Defaults to true */
+  showBorder?: boolean
+
+  /** Whether to show the borderColorTheme checkbox. Defaults to true */
+  showBorderColorTheme?: boolean
+
+  /** Whether to show the accent checkbox. Defaults to true */
+  showAccent?: boolean
+
+  /** Whether to show the background checkbox. Defaults to true */
+  showBackground?: boolean
+
+  /** Whether to show the hideBackgroundColor checkbox. Defaults to true */
+  showHideBackgroundColor?: boolean
+}
+
+/**
+ * Reusable Visual section component for EditorPanels
+ *
+ * Provides common visual configuration options including:
+ * - Theme selection
+ * - Border controls
+ * - Background and accent styling
+ *
+ * Note: Must be wrapped in an Accordion.Section when used
+ *
+ * @example
+ * ```tsx
+ * <Accordion.Section title='Visual'>
+ *   <VisualSection
+ *     config={config}
+ *     updateField={updateField}
+ *     updateConfig={updateConfig}
+ *     beforeCheckboxes={
+ *       <Select
+ *         value={config.fontSize}
+ *         fieldName='fontSize'
+ *         label='Font Size'
+ *         updateField={updateField}
+ *         options={['small', 'medium', 'large']}
+ *       />
+ *     }
+ *   />
+ * </Accordion.Section>
+ * ```
+ */
+export const VisualSection = <TConfig extends VisualSectionConfig = VisualSectionConfig>({
+  config,
+  updateField,
+  updateConfig,
+  beforeCheckboxes,
+  afterCheckboxes,
+  themeSelectorPosition = 'before',
+  showBorder = true,
+  showBorderColorTheme = true,
+  showAccent = true,
+  showBackground = true,
+  showHideBackgroundColor = true
+}: VisualSectionProps<TConfig>) => {
+  const visual = config.visual || {}
+  const theme = config.theme
+
+  const renderThemeSelector = () => {
+    if (themeSelectorPosition === 'none') return null
+
+    return (
+      <HeaderThemeSelector
+        selectedTheme={theme}
+        onThemeSelect={theme => updateConfig({ ...config, theme } as TConfig)}
+        label='Theme'
+      />
+    )
+  }
+
+  const renderCheckboxes = () => (
+    <div className='checkbox-group'>
+      {showBorder && (
+        <CheckBox
+          value={visual.border}
+          section='visual'
+          fieldName='border'
+          label='Display Border'
+          updateField={updateField}
+        />
+      )}
+      {showBorderColorTheme && (
+        <CheckBox
+          value={visual.borderColorTheme}
+          section='visual'
+          fieldName='borderColorTheme'
+          label='Use Border Color Theme'
+          updateField={updateField}
+        />
+      )}
+      {showAccent && (
+        <CheckBox
+          value={visual.accent}
+          section='visual'
+          fieldName='accent'
+          label='Use Accent Style'
+          updateField={updateField}
+        />
+      )}
+      {showBackground && (
+        <CheckBox
+          value={visual.background}
+          section='visual'
+          fieldName='background'
+          label='Use Theme Background Color'
+          updateField={updateField}
+        />
+      )}
+      {showHideBackgroundColor && (
+        <CheckBox
+          value={visual.hideBackgroundColor}
+          section='visual'
+          fieldName='hideBackgroundColor'
+          label='Hide Background Color'
+          updateField={updateField}
+        />
+      )}
+    </div>
+  )
+
+  return (
+    <>
+      {beforeCheckboxes}
+      {themeSelectorPosition === 'before' && renderThemeSelector()}
+      {renderCheckboxes()}
+      {themeSelectorPosition === 'after' && renderThemeSelector()}
+      {afterCheckboxes}
+    </>
+  )
+}