@cdc/dashboard 4.25.11 → 4.26.1

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -21,6 +21,7 @@ import { addValuesToDashboardFilters } from '../../../helpers/addValuesToDashboa
 import { FILTER_STYLE } from '../../../types/FilterStyles'
 import { handleSorting } from '@cdc/core/components/Filters'
 import { removeDashboardFilter } from '../../../helpers/removeDashboardFilter'
+import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -71,6 +72,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     newSharedFilters[index][prop] = value
     if (prop === 'columnName') {
       if (newSharedFilters[index].subGrouping) delete newSharedFilters[index].subGrouping
+      newSharedFilters[index].defaultValue = ''
       // changing a data column and want to load the data into the preview options
       const sharedFiltersWithValues = addValuesToDashboardFilters(newSharedFilters, data)
       dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFiltersWithValues })
@@ -122,6 +124,29 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     dispatch({ type: 'SET_CONFIG', payload: { dashboard, visualizations: newVisualizations } })
   }
 
+  const handleFilterReorder = (result: DropResult) => {
+    const { source, destination } = result
+    if (!destination || source.index === destination.index) return
+
+    const newIndexes = [...vizConfig.sharedFilterIndexes]
+    const [movedIndex] = newIndexes.splice(source.index, 1)
+    newIndexes.splice(destination.index, 0, movedIndex)
+
+    updateConfig({
+      ...vizConfig,
+      sharedFilterIndexes: newIndexes
+    })
+  }
+
+  const getItemStyle = (isDragging, draggableStyle) => ({
+    ...draggableStyle,
+    ...(isDragging && sortableItemStyles)
+  })
+
+  const sortableItemStyles = {
+    background: 'rgba(0, 0, 0, 0.1)'
+  }
+
   const addNewFilter = () => {
     const _sharedFilters = _.cloneDeep(sharedFilters) || []
     const columnName = 'New Dashboard Filter ' + (_sharedFilters.length + 1)
@@ -219,44 +244,70 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
           <AccordionItemButton>Filters</AccordionItemButton>
         </AccordionItemHeading>
         <AccordionItemPanel>
-          {vizConfig.sharedFilterIndexes.map(index => {
-            const filter = sharedFilters[index]
-            return (
-              <FieldSetWrapper
-                key={filter.key + index}
-                fieldName={filter.key}
-                fieldKey={index}
-                fieldType='Dashboard Filter'
-                controls={openControls}
-                deleteField={() => {
-                  overlay?.actions.openOverlay(
-                    <DeleteFilterModal
-                      removeFilterCompletely={removeFilter}
-                      removeFilterFromViz={index => {
-                        updateConfig({
-                          ...vizConfig,
-                          sharedFilterIndexes: vizConfig.sharedFilterIndexes.filter(i => i !== index)
-                        })
-                      }}
-                      filterIndex={index}
-                    />
-                  )
-                }}
-              >
-                <FilterEditor
-                  filter={filter}
-                  filterIndex={index}
-                  updateFilterProp={(name, value) => {
-                    updateFilterProp(name, index, value)
-                  }}
-                  toggleNestedQueryParameters={checked => {
-                    toggleNestedQueryParameters(index, checked)
-                  }}
-                  config={config}
-                />
-              </FieldSetWrapper>
-            )
-          })}
+          <DragDropContext onDragEnd={handleFilterReorder}>
+            <Droppable droppableId='dashboard_filters_list'>
+              {provided => (
+                <ul {...provided.droppableProps} ref={provided.innerRef} className='draggable-field-list'>
+                  {vizConfig.sharedFilterIndexes.map((index, filterIndex) => {
+                    const filter = sharedFilters[index]
+                    return (
+                      <Draggable
+                        key={filter.key + index}
+                        draggableId={`filter-${filter.key}-${index}`}
+                        index={filterIndex}
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+                            className={snapshot.isDragging ? 'currently-dragging' : ''}
+                          >
+                            <FieldSetWrapper
+                              key={filter.key + index}
+                              fieldName={filter.key}
+                              fieldKey={index}
+                              fieldType='Dashboard Filter'
+                              controls={openControls}
+                              draggable={true}
+                              deleteField={() => {
+                                overlay?.actions.openOverlay(
+                                  <DeleteFilterModal
+                                    removeFilterCompletely={removeFilter}
+                                    removeFilterFromViz={index => {
+                                      updateConfig({
+                                        ...vizConfig,
+                                        sharedFilterIndexes: vizConfig.sharedFilterIndexes.filter(i => i !== index)
+                                      })
+                                    }}
+                                    filterIndex={index}
+                                  />
+                                )
+                              }}
+                            >
+                              <FilterEditor
+                                filter={filter}
+                                filterIndex={index}
+                                updateFilterProp={(name, value) => {
+                                  updateFilterProp(name, index, value)
+                                }}
+                                toggleNestedQueryParameters={checked => {
+                                  toggleNestedQueryParameters(index, checked)
+                                }}
+                                config={config}
+                              />
+                            </FieldSetWrapper>
+                          </div>
+                        )}
+                      </Draggable>
+                    )
+                  })}
+                  {provided.placeholder}
+                </ul>
+              )}
+            </Droppable>
+          </DragDropContext>
           <button onClick={addNewFilter} className='btn btn-primary full-width'>
             Add Filter
           </button>

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -43,7 +43,11 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   const filterStyles = Object.values(FILTER_STYLE)
 
   const parentFilters: string[] = (config.dashboard.sharedFilters || [])
-    .filter(({ key, type }) => key !== filter.key && type !== 'datafilter')
+    .filter(({ key }) => key !== filter.key)
+    .map(({ key }) => key)
+
+  const dataFilterParents: string[] = (config.dashboard.sharedFilters || [])
+    .filter(({ key }) => key !== filter.key)
     .map(({ key }) => key)
 
   const vizRowColumnLocator = getVizRowColumnLocator(config.rows)
@@ -246,21 +250,6 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
             <>
               {!hasDashboardApplyBehavior(config.visualizations) && (
                 <>
-                  <Select
-                    label='URL to Filter'
-                    value={filter.datasetKey || ''}
-                    options={[
-                      { value: '', label: '- Select Option -' },
-                      ...Object.keys(config.datasets)
-                        .filter(datasetKey => config.datasets[datasetKey].dataUrl)
-                        .map(datasetKey => ({
-                          value: datasetKey,
-                          label: config.datasets[datasetKey].dataUrl
-                        }))
-                    ]}
-                    onChange={e => updateFilterProp('datasetKey', e.target.value)}
-                  />
-
                   <Select
                     label='Filter By'
                     value={filter.filterBy || ''}
@@ -271,6 +260,40 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                     ]}
                     onChange={e => updateFilterProp('filterBy', e.target.value)}
                   />
+
+                  {filter.filterBy === 'File Name' && (
+                    <Select
+                      label='URL to Filter'
+                      value={filter.datasetKey || ''}
+                      options={[
+                        { value: '', label: '- Select Option -' },
+                        ...Object.keys(config.datasets)
+                          .filter(datasetKey => config.datasets[datasetKey].dataUrl)
+                          .map(datasetKey => ({
+                            value: datasetKey,
+                            label: config.datasets[datasetKey].dataUrl
+                          }))
+                      ]}
+                      onChange={e => updateFilterProp('datasetKey', e.target.value)}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Select which dataset URL's filename should be modified by this filter.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
+
+                  {filter.filterBy === 'Query String' && filter.usedBy && filter.usedBy.length > 0 && (
+                    <div className='bg-info-subtle p-2 my-2' style={{ fontSize: '0.9em' }}>
+                      <Icon display='info' style={{ marginRight: '0.5rem' }} />
+                      Will apply to datasets used by selected widgets
+                    </div>
+                  )}
                   {filter.filterBy === 'File Name' && (
                     <>
                       <TextField
@@ -617,19 +640,18 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                 updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)}
               />
 
-              <Select
-                label='Parent Filter'
-                value={filter.parents || ''}
-                options={[
-                  { value: '', label: 'Select a filter' },
-                  ...(config.dashboard.sharedFilters || [])
-                    .filter(sharedFilter => sharedFilter.key !== filter.key)
-                    .map(sharedFilter => ({ value: sharedFilter.key, label: sharedFilter.key }))
-                ]}
-                onChange={e => {
-                  updateFilterProp('parents', e.target.value)
-                }}
-              />
+              <label>
+                <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
+                <MultiSelect
+                  label='Parent Filter(s): '
+                  options={dataFilterParents.map(key => ({ value: key, label: key }))}
+                  fieldName='parents'
+                  selected={filter.parents}
+                  updateField={(_section, _subsection, _fieldname, newItems) => {
+                    updateFilterProp('parents', newItems)
+                  }}
+                />
+              </label>
 
               {!isNestedDropdown && (
                 <TextField

package/src/components/DashboardFilters/DashboardFiltersEditor/components/NestedDropDownDashboard.tsx

@@ -1,8 +1,11 @@
 import { DashboardConfig } from '../../../../types/DashboardConfig'
 import { SharedFilter } from '../../../../types/SharedFilter'
 import _ from 'lodash'
-import { SubGrouping } from '@cdc/core/types/VizFilter'
+import { SubGrouping, OrderBy } from '@cdc/core/types/VizFilter'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
+import { handleSorting } from '@cdc/core/components/Filters/helpers/handleSorting'
+import { filterOrderOptions } from '@cdc/core/helpers/filterOrderOptions'
+import FilterOrder from '@cdc/core/components/EditorPanel/VizFilterEditor/components/FilterOrder'
 
 type NestedDropDownEditorDashboardProps = {
   config: DashboardConfig
@@ -50,12 +53,10 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   const handleFitlerGroupColumnNameChange = (value: string) => {
     if (!value) {
       updateFilterProp('columnName', '')
-      updateFilterProp('defaultValue', '')
       return
     }
     const [newColumnName, selectedOptionDatasetName] = value.split('|')
     updateFilterProp('columnName', newColumnName)
-    updateFilterProp('defaultValue', '') // Reset default value when column changes
     populateSubGroupingOptions(selectedOptionDatasetName, newColumnName)
   }
 
@@ -66,18 +67,23 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
     }
     const [newColumnName, selectedOptionDatasetName] = value.split('|')
 
+    const order = subGrouping?.order || 'asc'
+
     const valuesLookup = filter.values.reduce((acc, groupName) => {
-      const values: string[] = _.uniq(
+      const rawValues: string[] = _.uniq(
         config.datasets[selectedOptionDatasetName].data
           .map(d => {
             return d[filter.columnName] === groupName ? d[newColumnName] : ''
           })
           .filter(value => value !== '')
-      ).sort()
+      )
+
+      // Sort values according to the order setting
+      const { values: sortedValues } = handleSorting({ values: rawValues, order })
 
       acc[groupName] = {
-        values,
-        orderedValues: values
+        values: sortedValues,
+        orderedValues: sortedValues
       }
       return acc
     }, {})
@@ -86,12 +92,94 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
       ...subGrouping,
       columnName: newColumnName,
       valuesLookup,
+      order,
       defaultValue: '' // Reset default value when column changes
     }
 
     updateFilterProp('subGrouping', newSubGrouping)
   }
 
+  // Handle group order change (asc/desc/cust)
+  const handleGroupingOrderBy = (order: OrderBy) => {
+    const groupSortObject = {
+      values: _.cloneDeep(filter.values),
+      order
+    }
+    const { values: newOrderedValues } = handleSorting(groupSortObject)
+
+    const updates: Partial<SharedFilter> = {
+      values: newOrderedValues,
+      order
+    }
+
+    if (order === 'cust') {
+      updates.orderedValues = newOrderedValues
+    } else {
+      updates.orderedValues = undefined
+    }
+
+    // Update filter with new order and values
+    updateFilterProp('order', order)
+  }
+
+  // Handle drag-drop reorder for group values
+  const handleGroupingCustomOrder = (sourceIndex: number, destinationIndex: number) => {
+    if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
+
+    const orderedValues = _.cloneDeep(filter.orderedValues || filter.values)
+    const [movedItem] = orderedValues.splice(sourceIndex, 1)
+    orderedValues.splice(destinationIndex, 0, movedItem)
+
+    // Update both values and orderedValues, and ensure order is 'cust'
+    updateFilterProp('orderedValues', orderedValues)
+    if (filter.order !== 'cust') {
+      updateFilterProp('order', 'cust')
+    }
+  }
+
+  // Handle subgroup order change (asc/desc/cust)
+  const handleSubGroupingOrderBy = (order: OrderBy) => {
+    const newValuesLookup = Object.keys(subGrouping.valuesLookup).reduce((acc, groupName) => {
+      const subGroup = subGrouping.valuesLookup[groupName]
+      const { values: sortedValues } = handleSorting({ values: _.cloneDeep(subGroup.values), order })
+
+      acc[groupName] = {
+        values: sortedValues,
+        orderedValues: order === 'cust' ? sortedValues : undefined
+      }
+      return acc
+    }, {})
+
+    const newSubGrouping: SubGrouping = {
+      ...subGrouping,
+      order,
+      valuesLookup: newValuesLookup
+    }
+
+    updateFilterProp('subGrouping', newSubGrouping)
+  }
+
+  // Handle drag-drop reorder for subgroup values within a specific group
+  const handleSubGroupingCustomOrder = (
+    sourceIndex: number,
+    destinationIndex: number,
+    currentOrderedValues: string[],
+    groupName: string
+  ) => {
+    if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
+
+    const updatedGroupOrderedValues = _.cloneDeep(currentOrderedValues)
+    const [movedItem] = updatedGroupOrderedValues.splice(sourceIndex, 1)
+    updatedGroupOrderedValues.splice(destinationIndex, 0, movedItem)
+
+    const newSubGrouping = _.cloneDeep(subGrouping)
+    newSubGrouping.valuesLookup[groupName].values = updatedGroupOrderedValues
+    newSubGrouping.valuesLookup[groupName].orderedValues = updatedGroupOrderedValues
+    newSubGrouping.order = 'cust'
+
+    updateFilterProp('subGrouping', newSubGrouping)
+  }
+
   return (
     <div className='nesteddropdown-editor'>
       {!isDashboard && (
@@ -144,7 +232,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
       {filter.columnName && filter.values && filter.values.length > 0 && (
         <Select
           value={filter.defaultValue}
-          options={filter.values}
+          options={filter.orderedValues || filter.values}
           updateField={(_section, _subSection, _key, value) => updateFilterProp('defaultValue', value)}
           label={'Group Default Value'}
           initial={'Select'}
@@ -157,7 +245,8 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
           value={subGrouping.defaultValue}
           options={(() => {
             const groupKey = filter.defaultValue || (Array.isArray(filter.active) ? filter.active[0] : filter.active)
-            return subGrouping.valuesLookup[groupKey as string]?.values || []
+            const lookup = subGrouping.valuesLookup[groupKey as string]
+            return lookup?.orderedValues || lookup?.values || []
           })()}
           updateField={(_section, _subSection, _key, value) => {
             const newSubGrouping = { ...subGrouping, defaultValue: value }
@@ -167,6 +256,54 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
           initial={'Select'}
         />
       )}
+
+      {/* Group Order */}
+      {filter.columnName && filter.values && filter.values.length > 0 && (
+        <div className='mt-2'>
+          <Select
+            label='Group Order'
+            value={filter.order || 'asc'}
+            options={filterOrderOptions}
+            onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}
+          />
+          {filter.order === 'cust' && (
+            <FilterOrder
+              orderedValues={filter.orderedValues || filter.values}
+              handleFilterOrder={handleGroupingCustomOrder}
+            />
+          )}
+        </div>
+      )}
+
+      {/* SubGrouping Order */}
+      {subGrouping?.columnName && subGrouping.valuesLookup && Object.keys(subGrouping.valuesLookup).length > 0 && (
+        <div className='mt-2'>
+          <Select
+            label='SubGrouping Order'
+            value={subGrouping.order || 'asc'}
+            options={filterOrderOptions}
+            onChange={e => handleSubGroupingOrderBy(e.target.value as OrderBy)}
+          />
+          {subGrouping.order === 'cust' &&
+            (filter.orderedValues || filter.values)?.map((groupName, i) => {
+              const lookup = subGrouping.valuesLookup[groupName]
+              if (!lookup) return null
+              const orderedSubGroupValues = lookup.orderedValues || lookup.values
+              return (
+                <div key={`group-subgroup-values-${groupName}-${i}`}>
+                  <span className='font-weight-bold fw-bold'>{groupName}</span>
+                  <FilterOrder
+                    key={`subgroup-values-${groupName}-${i}`}
+                    orderedValues={orderedSubGroupValues}
+                    handleFilterOrder={(sourceIndex, destinationIndex) => {
+                      handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
+                    }}
+                  />
+                </div>
+              )
+            })}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -177,15 +177,18 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
     // Reset filtersApplied state to false when clearing filters
     dispatch({ type: 'SET_FILTERS_APPLIED', payload: false })
 
+    // Update child filter values before filtering data
+    const updatedFilters = updateChildFilters(dashboardConfig.sharedFilters, state.data)
+
     // Update filtered data immediately after resetting filters
-    // Use the updated dashboardConfig filters instead of state
+    // Use the updated filters instead of state
     const clonedState = {
       ...state,
       config: {
         ...state.config,
         dashboard: {
           ...state.config.dashboard,
-          sharedFilters: dashboardConfig.sharedFilters
+          sharedFilters: updatedFilters
         }
       }
     }
@@ -262,8 +265,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         loadAPIFilters(newSharedFilters, loadingFilterMemo, undefined, undefined, isStale)
       }
     } else {
+      const updatedFilters = updateChildFilters(newSharedFilters, state.data)
       if (newSharedFilters[index].type === 'urlfilter' && newSharedFilters[index].apiFilter) {
-        reloadURLData(newSharedFilters)
+        reloadURLData(updatedFilters)
       } else {
         const clonedState = {
           ...state,
@@ -271,13 +275,13 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
             ...state.config,
             dashboard: {
               ...state.config.dashboard,
-              sharedFilters: newSharedFilters
+              sharedFilters: updatedFilters
             }
           }
         }
         const newFilteredData = getFilteredData(clonedState)
         dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-        dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: updatedFilters })
       }
     }
   }
@@ -293,9 +297,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   // if all of the filters are hidden filters don't display the VisualizationWrapper
   const filters = visualizationConfig?.sharedFilterIndexes
     ?.map(Number)
-    .map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
+    ?.map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
 
-  const displayNone = filters.length ? filters.every(filter => filter.showDropdown === false) : false
+  const displayNone = filters?.length ? filters.every(filter => filter.showDropdown === false) : false
   if (displayNone && !isEditor) return <></>
   return (
     <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>

package/src/components/DataDesignerModal.tsx

@@ -194,7 +194,12 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
           ) : (
             <>
               <Select
-                options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})}
+                options={Object.keys(
+                  config.rows[rowIndex]?.data?.[0] ||
+                    configureData.data?.[0] ||
+                    config.datasets[configureData.dataKey]?.data?.[0] ||
+                    {}
+                )}
                 value={config.rows[rowIndex].multiVizColumn}
                 label='Multi-Visualization Column'
                 initial='--Select--'

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react'
+import { useContext, useRef, useEffect } from 'react'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
@@ -20,8 +20,22 @@ const Header = (props: HeaderProps) => {
   const dispatch = useContext(DashboardDispatchContext)
   const back = () => {
     if (!visualizationKey) return
+
     const newConfig = cloneConfig(config)
-    newConfig.visualizations[visualizationKey].editing = false
+
+    // Ensure visualizations object exists
+    if (!newConfig.visualizations || !newConfig.visualizations[visualizationKey]) {
+      console.error(`Visualization ${visualizationKey} not found in config`)
+      return
+    }
+
+    // Explicitly set editing to false
+    newConfig.visualizations[visualizationKey] = {
+      ...newConfig.visualizations[visualizationKey],
+      editing: false,
+      showEditorPanel: false
+    }
+
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
 
     // the Widget component will do a data fetch if no data is available for the visualization
@@ -59,19 +73,21 @@ const Header = (props: HeaderProps) => {
   const configStringRef = useRef<string>()
 
   // Only update parent when config content actually changes (not just reference)
-  const configString = JSON.stringify(convertStateToConfig())
-  if (configStringRef.current !== configString) {
-    configStringRef.current = configString
-
-    // Emit the data in a regular JS event so it can be consumed by anything.
-    const event = new CustomEvent('updateVizConfig', { detail: configString })
-    window.dispatchEvent(event)
-
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      setParentConfig(JSON.parse(configString))
+  useEffect(() => {
+    const configString = JSON.stringify(convertStateToConfig())
+    if (configStringRef.current !== configString) {
+      configStringRef.current = configString
+
+      // Emit the data in a regular JS event so it can be consumed by anything.
+      const event = new CustomEvent('updateVizConfig', { detail: configString })
+      window.dispatchEvent(event)
+
+      // Pass up to Editor if needed
+      if (setParentConfig) {
+        setParentConfig(JSON.parse(configString))
+      }
     }
-  }
+  }, [config, setParentConfig])
 
   const handleCheck = e => {
     const { checked } = e.currentTarget
@@ -97,12 +113,27 @@ const Header = (props: HeaderProps) => {
             multidashboard
           </span>
           <br />
-          <input
-            type='text'
-            placeholder='Enter Dashboard Name Here'
-            defaultValue={config.dashboard?.title}
-            onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
-          />
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '10px' }}>
+            <input
+              type='text'
+              placeholder='Enter Dashboard Name Here'
+              defaultValue={config.dashboard?.title}
+              onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
+              style={{ flex: 1 }}
+            />
+            <label style={{ display: 'flex', flexDirection: 'column', gap: '3px', fontSize: '0.85em' }}>
+              <span style={{ fontSize: '0.8em' }}>Title Style</span>
+              <select
+                value={config.dashboard.titleStyle}
+                onChange={e => changeConfigValue('dashboard', 'titleStyle', e.target.value)}
+                style={{ fontSize: '0.9em' }}
+              >
+                <option value='small'>Small</option>
+                <option value='large'>Large</option>
+                <option value='legacy'>Legacy</option>
+              </select>
+            </label>
+          </div>
         </div>
       )}
       {!subEditor && (