@cdc/core 4.26.2 → 4.26.3

package/components/EditorPanel/EditorPanel.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useRef, ReactNode } from 'react'
 import { cloneConfig } from '../../helpers/cloneConfig'
 import ErrorBoundary from '../ErrorBoundary'
-import Layout from '../Layout'
+import { Sidebar } from '../Layout'
 import './EditorPanel.styles.css'
 
 export interface BaseEditorPanelProps<TConfig = any> {
@@ -101,7 +101,6 @@ export function EditorPanel<TConfig = any>({
 
   /**
    * Toggle the editor panel visibility and update config to reflect the change.
-   * In dashboard context, also sets editing to false to return to dashboard editor.
    */
   const onBackClick = () => {
     const newDisplayPanel = !displayPanel
@@ -110,10 +109,6 @@ export function EditorPanel<TConfig = any>({
       ...config,
       showEditorPanel: newDisplayPanel
     }
-    // If in dashboard mode, set editing to false to return to dashboard editor
-    if (isDashboard) {
-      (newConfig as any).editing = false
-    }
 
     // Update local config - the useEffect will handle syncing to parent
     updateConfig(newConfig)
@@ -124,7 +119,7 @@ export function EditorPanel<TConfig = any>({
 
   return (
     <ErrorBoundary component='EditorPanel'>
-      <Layout.Sidebar
+      <Sidebar
         displayPanel={displayPanel}
         isDashboard={isDashboard || false}
         title={title}
@@ -136,7 +131,7 @@ export function EditorPanel<TConfig = any>({
           displayPanel,
           convertStateToConfig
         })}
-      </Layout.Sidebar>
+      </Sidebar>
     </ErrorBoundary>
   )
 }

package/components/EditorPanel/EditorPanelDispatch.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import ErrorBoundary from '../ErrorBoundary'
-import Layout from '../Layout'
+import { Sidebar } from '../Layout'
 
 export interface EditorPanelDispatchProps<TState = any, TAction = any> {
   state: TState
@@ -22,7 +22,7 @@ export interface EditorPanelDispatchChildProps<TState = any, TAction = any> {
  *
  * Provides common wrapper functionality including:
  * - ErrorBoundary for error handling
- * - Layout.Sidebar for consistent panel display
+ * - Sidebar for consistent panel display
  * - State management for panel visibility
  *
  * @example
@@ -62,14 +62,14 @@ export function EditorPanelDispatch<TState = any, TAction = any>({
 
   return (
     <ErrorBoundary component='EditorPanel'>
-      <Layout.Sidebar
+      <Sidebar
         title={title}
         onBackClick={onBackClick}
         displayPanel={showEditorPanel}
         isDashboard={isDashboard}
       >
         {children({ state, dispatch })}
-      </Layout.Sidebar>
+      </Sidebar>
     </ErrorBoundary>
   )
 }

package/components/EditorPanel/FootnotesEditor.tsx

@@ -32,8 +32,8 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
     if (dataSetChanged || noCachedData) {
       setLoadingAPIData(true)
       try {
-        newData = await fetchRemoteData(dataUrl)
-        newData = transform.autoStandardize(newData)
+        const result = await fetchRemoteData(dataUrl)
+        newData = transform.autoStandardize(result.data)
       } catch (e) {
         setErrorMessage('There was an issue loading the data source. Please check the datasource URL and try again.')
       }

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import uniq from 'lodash/uniq'
 import { SubGrouping, VizFilter, OrderBy } from '../../../types/VizFilter'
 import { handleSorting } from '../../Filters/helpers/handleSorting'
 import { filterOrderOptions } from '../../../helpers/filterOrderOptions'
@@ -45,12 +46,12 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
 
   const handleGroupingOrderBy = (order: OrderBy) => {
     const groupSortObject = {
-      values: _.cloneDeep(filter.values),
+      values: cloneDeep(filter.values),
       order
     }
     const newOrderedValues = handleSorting(groupSortObject).values
 
-    const newAllFilters = _.cloneDeep(config.filters)
+    const newAllFilters = cloneDeep(config.filters)
     newAllFilters[filterIndex] = { ...filter, values: newOrderedValues, order }
     if (order === 'cust') {
       newAllFilters[filterIndex].orderedValues = newOrderedValues
@@ -68,7 +69,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
     const filterGroups = filter.orderedValues?.length ? filter.orderedValues : filter.values
 
     const valuesLookup = filterGroups.reduce((acc, groupName) => {
-      const values: string[] = _.uniq(
+      const values: string[] = uniq(
         rawData
           .map(d => {
             return d[filter.columnName] === groupName ? d[value] : ''
@@ -115,10 +116,10 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
     subGroupingFitlerOrder: string[],
     groupName: string
   ) => {
-    const updatedGroupOrderedValues = _.cloneDeep(subGroupingFitlerOrder)
+    const updatedGroupOrderedValues = cloneDeep(subGroupingFitlerOrder)
     const [movedItem] = updatedGroupOrderedValues.splice(currentIndex, 1)
     updatedGroupOrderedValues.splice(newIndex, 0, movedItem)
-    const newSubGrouping = _.cloneDeep(subGrouping)
+    const newSubGrouping = cloneDeep(subGrouping)
     newSubGrouping.valuesLookup[groupName].values = updatedGroupOrderedValues
     newSubGrouping.valuesLookup[groupName].orderedValues = updatedGroupOrderedValues
     updateSubGroupingFilterProperty({ ...newSubGrouping, order: 'cust' })

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -3,7 +3,9 @@ import Tooltip from '../../ui/Tooltip'
 import Icon from '../../ui/Icon'
 import { Visualization } from '../../../types/Visualization'
 import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import flatten from 'lodash/flatten'
+import uniq from 'lodash/uniq'
 import { MultiSelectFilter, VizFilter, VizFilterStyle } from '../../../types/VizFilter'
 import { handleSorting } from '../../Filters/helpers/handleSorting'
 import { filterOrderOptions } from '../../../helpers/filterOrderOptions'
@@ -27,7 +29,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
   const openControls = useState({})
   const [isNestedDragHovered, setIsNestedDragHovered] = useState(false)
   const dataColumns = useMemo(() => {
-    return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
+    return uniq(flatten(rawData?.map(row => Object.keys(row))))
   }, [rawData])
 
   // Helper function to get filter values from various sources
@@ -35,13 +37,13 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     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 uniq(rawData.map(row => row[filter.columnName]))
     }
     return []
   }
 
   const removeFilter = index => {
-    let filters = _.cloneDeep(config.filters)
+    let filters = cloneDeep(config.filters)
 
     filters.splice(index, 1)
 
@@ -53,7 +55,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
   }
 
   const updateFilterDefaultValue = (index, value) => {
-    const filters = _.cloneDeep(config.filters)
+    const filters = cloneDeep(config.filters)
     const currentFilter = { ...filters[index], orderedValues: filters[index].values }
     currentFilter.defaultValue = value
     currentFilter.active = value
@@ -62,7 +64,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
   }
 
   const updateFilterStyle = (index, style: VizFilterStyle) => {
-    const filters = _.cloneDeep(config.filters)
+    const filters = cloneDeep(config.filters)
     const currentFilter = { ...filters[index], orderedValues: filters[index].values }
     currentFilter.filterStyle = style
     if (style === 'multi-select') {
@@ -78,8 +80,8 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
   }
 
   const handleNameChange = (filterIndex, columnName) => {
-    const values = _.uniq(rawData.map(row => row[columnName]))
-    const copiedFilter = { ..._.cloneDeep(config.filters[filterIndex]), columnName, values }
+    const values = uniq(rawData.map(row => row[columnName]))
+    const copiedFilter = { ...cloneDeep(config.filters[filterIndex]), columnName, values }
     handleSorting(copiedFilter) // sorts dropdown values in place
     copiedFilter.active = copiedFilter.values[0]
     const newFilters = config.filters.map((filter, index) => {
@@ -109,7 +111,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
-    const filtersCopy = _.cloneDeep(config.filters)
+    const filtersCopy = cloneDeep(config.filters)
     const filterItem = { ...filtersCopy[filterIndex] }
 
     // Overwrite filterItem.values since thats what we map through in the editor panel
@@ -132,7 +134,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
 
   const handleFilterReorder = (idx1: number, idx2: number) => {
     if (idx1 === undefined || idx2 === undefined || idx1 === idx2) return
-    const filters = _.cloneDeep(config.filters)
+    const filters = cloneDeep(config.filters)
     const [movedFilter] = filters.splice(idx1, 1)
     filters.splice(idx2, 0, movedFilter)
     updateField(null, null, 'filters', filters)

package/components/EditorPanel/components/MarkupVariablesEditor.tsx

@@ -22,6 +22,8 @@ type MarkupVariablesEditorProps = {
   enableMarkupVariables?: boolean
   /** Callback when enable/disable toggle changes */
   onToggleEnable?: (enabled: boolean) => void
+  /** File-level metadata extracted from the data source */
+  dataMetadata?: Record<string, string>
 }
 
 export type { MarkupVariablesEditorProps }
@@ -37,7 +39,8 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
   config,
   onChange,
   enableMarkupVariables = false,
-  onToggleEnable
+  onToggleEnable,
+  dataMetadata = {}
 }) => {
   const [editingIndex, setEditingIndex] = useState<number | null>(null)
   const [validationErrors, setValidationErrors] = useState<Record<number, string[]>>({})
@@ -63,6 +66,9 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
     return []
   }, [data, datasets, config?.dataKey])
 
+  const metadataKeys = useMemo(() => Object.keys(dataMetadata || {}), [dataMetadata])
+  const hasMetadataKeys = metadataKeys.length > 0
+
   // Get columns from the available data (memoized for performance)
   const getAvailableColumns = useMemo((): string[] => {
     const targetData = getTargetData()
@@ -92,18 +98,20 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
     if (!variable.tag || variable.tag.trim() === '') {
       errors.push('Variable tag is required')
     }
-    if (!variable.columnName || variable.columnName.trim() === '') {
+    if (!variable.metadataKey && (!variable.columnName || variable.columnName.trim() === '')) {
       errors.push('Data column is required')
     }
-    // Validate conditions
-    variable.conditions?.forEach((condition, index) => {
-      if (!condition.columnName) {
-        errors.push(`Condition ${index + 1}: Column is required`)
-      }
-      if (!condition.value) {
-        errors.push(`Condition ${index + 1}: Value is required`)
-      }
-    })
+    // Validate conditions (not applicable to metadata-sourced variables)
+    if (!variable.metadataKey) {
+      variable.conditions?.forEach((condition, index) => {
+        if (!condition.columnName) {
+          errors.push(`Condition ${index + 1}: Column is required`)
+        }
+        if (!condition.value) {
+          errors.push(`Condition ${index + 1}: Value is required`)
+        }
+      })
+    }
     return errors
   }, [])
 
@@ -240,9 +248,15 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                         {variable.tag}
                       </div>
                       <div style={{ fontSize: '13px', color: '#6c757d' }}>
-                        Column: <strong>{variable.columnName || 'Not selected'}</strong>
-                        {variable.conditions && variable.conditions.length > 0 && (
-                          <span> • {variable.conditions.length} condition{variable.conditions.length !== 1 ? 's' : ''}</span>
+                        {variable.metadataKey ? (
+                          <>Metadata: <strong>{variable.metadataKey}</strong></>
+                        ) : (
+                          <>
+                            Column: <strong>{variable.columnName || 'Not selected'}</strong>
+                            {variable.conditions && variable.conditions.length > 0 && (
+                              <span> • {variable.conditions.length} condition{variable.conditions.length !== 1 ? 's' : ''}</span>
+                            )}
+                          </>
                         )}
                       </div>
                       {validationErrors[index] && validationErrors[index].length > 0 && (
@@ -270,6 +284,60 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                     <div className='mt-3 pt-3 border-t'>
                       <Accordion>
                         <Accordion.Section title='Basic Settings'>
+                          {hasMetadataKeys && (
+                            <div className='mb-3'>
+                              <Select
+                                value={variable.metadataKey ? 'metadata' : 'column'}
+                                fieldName='variableSource'
+                                label='Source'
+                                options={[
+                                  { value: 'column', label: 'Data Column' },
+                                  { value: 'metadata', label: 'Data File Metadata' }
+                                ]}
+                                updateField={(_section, _subsection, _fieldName, value) => {
+                                  if (value === 'metadata') {
+                                    updateVariable(index, { metadataKey: metadataKeys[0] || '', columnName: '', conditions: [] })
+                                  } else {
+                                    updateVariable(index, { metadataKey: undefined, columnName: '' })
+                                  }
+                                }}
+                              />
+                            </div>
+                          )}
+
+                          {variable.metadataKey !== undefined && variable.metadataKey !== null && hasMetadataKeys ? (
+                            <div className='mb-3'>
+                              <Select
+                                value={variable.metadataKey}
+                                fieldName='metadataKey'
+                                label='Metadata Field'
+                                options={metadataKeys.map(key => ({ value: key, label: `${key}: ${dataMetadata[key]}` }))}
+                                updateField={(_section, _subsection, _fieldName, value) => {
+                                  updateVariable(index, {
+                                    metadataKey: value,
+                                    name: variable.name || value,
+                                    tag: variable.tag || generateTag(value)
+                                  })
+                                }}
+                              />
+                            </div>
+                          ) : (
+                            <div className='mb-3'>
+                              <Select
+                                value={variable.columnName}
+                                fieldName='columnName'
+                                label='Data Column'
+                                options={[
+                                  { value: '', label: 'Select Column...' },
+                                  ...getAvailableColumns.map(col => ({ value: col, label: col }))
+                                ]}
+                                updateField={(_section, _subsection, _fieldName, value) => {
+                                  updateVariable(index, { columnName: value })
+                                }}
+                              />
+                            </div>
+                          )}
+
                           <div className='mb-3'>
                             <TextField
                               value={variable.name}
@@ -296,102 +364,88 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                               />
                             </label>
                           </div>
-
-                          <div className='mb-3'>
-                            <Select
-                              value={variable.columnName}
-                              fieldName='columnName'
-                              label='Data Column'
-                              options={[
-                                { value: '', label: 'Select Column...' },
-                                ...getAvailableColumns.map(col => ({ value: col, label: col }))
-                              ]}
-                              updateField={(_section, _subsection, _fieldName, value) => {
-                                updateVariable(index, { columnName: value })
-                              }}
-                            />
-                          </div>
                         </Accordion.Section>
 
-                        <Accordion.Section title='Conditions'>
-                          <div className='text-sm text-gray-500 mb-2'>
-                            Add conditions to filter when this variable should display data
-                          </div>
-
-                          {variable.conditions && variable.conditions.length > 0 && (
-                            <div className='conditions-list mb-2'>
-                              {variable.conditions.map((condition, conditionIndex) => (
-                                <div key={`condition-${index}-${conditionIndex}`} className='condition-item p-2 border rounded mb-2' style={{ backgroundColor: '#f8f9fa' }}>
-                                  <div className='mb-2'>
-                                    <Select
-                                      value={condition.columnName || ''}
-                                      fieldName={`condition-column-${index}-${conditionIndex}`}
-                                      label='Column'
-                                      options={[
-                                        { value: '', label: 'Select Column...' },
-                                        ...getAvailableColumns.map(col => ({ value: col, label: col }))
-                                      ]}
-                                      updateField={(_section, _subsection, _fieldName, newColumnName) => {
-                                        // Reset value when column changes
-                                        updateCondition(index, conditionIndex, {
-                                          columnName: newColumnName,
-                                          value: ''
-                                        })
-                                      }}
-                                    />
-                                  </div>
-                                  <div className='mb-2'>
-                                    <Select
-                                      value={condition.isOrIsNotEqualTo || 'is'}
-                                      fieldName={`condition-operator-${index}-${conditionIndex}`}
-                                      label='Operator'
-                                      options={[
-                                        { value: 'is', label: 'is' },
-                                        { value: 'is not', label: 'is not' }
-                                      ]}
-                                      updateField={(_section, _subsection, _fieldName, value) => {
-                                        updateCondition(index, conditionIndex, { isOrIsNotEqualTo: value as 'is' | 'is not' })
-                                      }}
-                                    />
-                                  </div>
-                                  <div className='mb-2'>
-                                    <Select
-                                      value={condition.value || ''}
-                                      fieldName={`condition-value-${index}-${conditionIndex}`}
-                                      label='Value'
-                                      options={[
-                                        { value: '', label: 'Select Value...' },
-                                        ...(condition.columnName
-                                          ? getColumnValues(condition.columnName).map(val => ({
-                                            value: String(val),
-                                            label: String(val)
-                                          }))
-                                          : [])
-                                      ]}
-                                      updateField={(_section, _subsection, _fieldName, value) => {
-                                        updateCondition(index, conditionIndex, { value })
-                                      }}
-                                    />
-                                  </div>
-                                  <Button
-                                    className='btn-sm btn-danger'
-                                    onClick={() => removeCondition(index, conditionIndex)}
-                                  >
-                                    Remove Condition
-                                  </Button>
-                                </div>
-                              ))}
+                        {!variable.metadataKey && (
+                          <Accordion.Section title='Conditions'>
+                            <div className='text-sm text-gray-500 mb-2'>
+                              Add conditions to filter when this variable should display data
                             </div>
-                          )}
 
-                          <Button
-                            className='btn-sm'
-                            onClick={() => addCondition(index)}
-                          >
-                            <Icon display='plus' size={14} className='mr-1' />
-                            Add Condition
-                          </Button>
-                        </Accordion.Section>
+                            {variable.conditions && variable.conditions.length > 0 && (
+                              <div className='conditions-list mb-2'>
+                                {variable.conditions.map((condition, conditionIndex) => (
+                                  <div key={`condition-${index}-${conditionIndex}`} className='condition-item p-2 border rounded mb-2' style={{ backgroundColor: '#f8f9fa' }}>
+                                    <div className='mb-2'>
+                                      <Select
+                                        value={condition.columnName || ''}
+                                        fieldName={`condition-column-${index}-${conditionIndex}`}
+                                        label='Column'
+                                        options={[
+                                          { value: '', label: 'Select Column...' },
+                                          ...getAvailableColumns.map(col => ({ value: col, label: col }))
+                                        ]}
+                                        updateField={(_section, _subsection, _fieldName, newColumnName) => {
+                                          updateCondition(index, conditionIndex, {
+                                            columnName: newColumnName,
+                                            value: ''
+                                          })
+                                        }}
+                                      />
+                                    </div>
+                                    <div className='mb-2'>
+                                      <Select
+                                        value={condition.isOrIsNotEqualTo || 'is'}
+                                        fieldName={`condition-operator-${index}-${conditionIndex}`}
+                                        label='Operator'
+                                        options={[
+                                          { value: 'is', label: 'is' },
+                                          { value: 'is not', label: 'is not' }
+                                        ]}
+                                        updateField={(_section, _subsection, _fieldName, value) => {
+                                          updateCondition(index, conditionIndex, { isOrIsNotEqualTo: value as 'is' | 'is not' })
+                                        }}
+                                      />
+                                    </div>
+                                    <div className='mb-2'>
+                                      <Select
+                                        value={condition.value || ''}
+                                        fieldName={`condition-value-${index}-${conditionIndex}`}
+                                        label='Value'
+                                        options={[
+                                          { value: '', label: 'Select Value...' },
+                                          ...(condition.columnName
+                                            ? getColumnValues(condition.columnName).map(val => ({
+                                              value: String(val),
+                                              label: String(val)
+                                            }))
+                                            : [])
+                                        ]}
+                                        updateField={(_section, _subsection, _fieldName, value) => {
+                                          updateCondition(index, conditionIndex, { value })
+                                        }}
+                                      />
+                                    </div>
+                                    <Button
+                                      className='btn-sm btn-danger'
+                                      onClick={() => removeCondition(index, conditionIndex)}
+                                    >
+                                      Remove Condition
+                                    </Button>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+
+                            <Button
+                              className='btn-sm'
+                              onClick={() => addCondition(index)}
+                            >
+                              <Icon display='plus' size={14} className='mr-1' />
+                              Add Condition
+                            </Button>
+                          </Accordion.Section>
+                        )}
 
                         <Accordion.Section title='Formatting Options'>
                           <div className='mb-3'>

package/components/EditorPanel/components/PanelMarkup.tsx

@@ -18,6 +18,8 @@ type PanelMarkupProps = {
   onToggleEnable: (enabled: boolean) => void
   /** Optional: wrap in accordion. Default true */
   withAccordion?: boolean
+  /** File-level metadata extracted from the data source */
+  dataMetadata?: Record<string, string>
 }
 
 /**
@@ -31,7 +33,8 @@ const PanelMarkup: React.FC<PanelMarkupProps> = ({
   enableMarkupVariables,
   onMarkupVariablesChange,
   onToggleEnable,
-  withAccordion = true
+  withAccordion = true,
+  dataMetadata
 }) => {
   const content = (
     <MarkupVariablesEditor
@@ -40,6 +43,7 @@ const PanelMarkup: React.FC<PanelMarkupProps> = ({
       onChange={onMarkupVariablesChange}
       enableMarkupVariables={enableMarkupVariables || false}
       onToggleEnable={onToggleEnable}
+      dataMetadata={dataMetadata}
     />
   )