@cdc/core 4.26.1 → 4.26.3

package/components/EditorPanel/VizFilterEditor/components/FilterOrder.tsx

@@ -3,37 +3,41 @@ import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 type FilterOrderProps = {
   orderedValues: string[]
   handleFilterOrder?: (index1: number, index2: number) => void
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
-const FilterOrder: React.FC<FilterOrderProps> = ({ orderedValues, handleFilterOrder }) => {
+
+const FilterOrder: React.FC<FilterOrderProps> = ({ orderedValues, handleFilterOrder, onNestedDragAreaHover }) => {
   return (
-    <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source?.index, destination?.index)}>
-      <Droppable droppableId='filter_order'>
-        {provided => (
-          <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
-            {orderedValues?.map((value, index) => {
-              return (
-                <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
-                  {(provided, snapshot) => (
-                    <li>
-                      <div
-                        className={snapshot.isDragging ? 'currently-dragging' : ''}
-                        style={provided.draggableProps.style}
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        {value}
-                      </div>
-                    </li>
-                  )}
-                </Draggable>
-              )
-            })}
-            {provided.placeholder}
-          </ul>
-        )}
-      </Droppable>
-    </DragDropContext>
+    <div onMouseEnter={() => onNestedDragAreaHover?.(true)} onMouseLeave={() => onNestedDragAreaHover?.(false)}>
+      <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source?.index, destination?.index)}>
+        <Droppable droppableId='filter_order'>
+          {provided => (
+            <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+              {orderedValues?.map((value, index) => {
+                return (
+                  <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                    {(provided, snapshot) => (
+                      <li>
+                        <div
+                          className={snapshot.isDragging ? 'currently-dragging' : ''}
+                          style={provided.draggableProps.style}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                        >
+                          {value}
+                        </div>
+                      </li>
+                    )}
+                  </Draggable>
+                )
+              })}
+              {provided.placeholder}
+            </ul>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
   )
 }
 

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}
     />
   )
 

package/{styles/v2/components → components/EditorPanel}/editor.scss

@@ -1,7 +1,6 @@
-@import '../utils/variables';
-@import '../themes/index';
-@import '../../../components/HeaderThemeSelector/HeaderThemeSelector.css';
-@import '../../_common-components';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
+@import '../HeaderThemeSelector/HeaderThemeSelector.css';
 
 .cove-editor {
   display: grid;
@@ -9,11 +8,11 @@
   grid-template-areas: 'panel content';
   height: 100vh;
 
-  @import './../base/reset';
+  @import '../../styles/base/reset';
 
   .cove-editor__panel {
     grid-area: panel;
-    width: $editorWidth;
+    width: var(--editorWidth);
     transition: width 500ms ease;
     font-size: 15px;
     background: #fff;
@@ -30,8 +29,8 @@
   }
 
   .cove-editor__panel-container {
-    width: $editorWidth;
-    min-width: $editorWidth;
+    width: var(--editorWidth);
+    min-width: var(--editorWidth);
   }
 
   .cove-editor__content {
@@ -93,7 +92,7 @@
     margin-top: 1em;
     justify-content: space-between;
 
-    >label {
+    > label {
       width: 48%;
       margin-top: 0 !important;
     }
@@ -107,7 +106,7 @@
 
   .series-list {
     list-style: none;
-    border: $lightGray 1px solid;
+    border: var(--lightGray) 1px solid;
 
     &:empty {
       border: none !important;
@@ -121,7 +120,7 @@
       font-size: 0.9em;
 
       &:hover {
-        background-color: $lightestGray;
+        background-color: var(--lightestGray);
       }
 
       span {
@@ -130,14 +129,14 @@
         cursor: pointer;
       }
 
-      +li {
-        border-top: $lightGray 1px solid;
+      + li {
+        border-top: var(--lightGray) 1px solid;
       }
     }
   }
 
   .form-container {
-    border-right: $lightGray 1px solid;
+    border-right: var(--lightGray) 1px solid;
     flex-grow: 1;
   }
 
@@ -147,7 +146,7 @@
 
     svg {
       width: 60px;
-      color: $blue;
+      color: var(--blue);
       margin-right: 1rem;
       height: 60px; // IE11
 
@@ -189,7 +188,7 @@
       display: flex;
       justify-content: space-between;
 
-      >label {
+      > label {
         margin-top: 0;
         width: 30%;
         display: inline-block;
@@ -237,7 +236,7 @@
       margin-top: 0;
     }
 
-    label+label {
+    label + label {
       margin-top: 1em;
     }
 
@@ -256,13 +255,13 @@
 
   .sort-list {
     list-style: none;
+    padding: 0;
 
-    >li {
-      margin-right: 0.3em;
+    > li {
       margin-bottom: 0.3em;
     }
 
-    li>div {
+    li > div {
       display: block;
       box-sizing: border-box;
       border: 1px solid #d1d1d1;
@@ -270,8 +269,8 @@
       background: #f1f1f1;
       padding: 0.4em 0.6em;
       font-size: 0.8em;
-      margin-bottom: 0.3em;
       cursor: move;
+      width: 100%;
     }
   }
 
@@ -491,4 +490,59 @@ ul.color-palette {
 // CheckBox component styling for EditorPanel/Inputs
 .edit-checkbox {
   margin-right: 8px;
-}
+}
+
+// Warning icon used in accordion panel headers
+.accordion__button svg.warning-icon,
+.cove-accordion__button svg.warning-icon {
+  left: auto;
+  position: absolute;
+  right: 35px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.warning-icon {
+  color: #d72f00;
+  height: 15px;
+  width: 15px;
+}
+
+.warning-icon path {
+  fill: #d8000c;
+}
+
+// Checkbox group used in editor panel visual sections
+.checkbox-group {
+  border: 1px solid #c4c4c4;
+  border-radius: 8px;
+  margin-bottom: 24px;
+  margin-top: 8px;
+  padding: 16px;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox,
+.panel-visual .checkbox-group label.checkbox,
+.panel-visual .reverse-labels label.checkbox {
+  align-items: center !important;
+  display: flex !important;
+  margin-bottom: 8px !important;
+  width: 100% !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox input[type='checkbox'],
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox input[type='checkbox'],
+.panel-visual .checkbox-group label.checkbox input[type='checkbox'],
+.panel-visual .reverse-labels label.checkbox input[type='checkbox'] {
+  flex-shrink: 0 !important;
+  margin-right: 8px !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox span,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox span,
+.panel-visual .checkbox-group label.checkbox span,
+.panel-visual .reverse-labels label.checkbox span {
+  display: inline-block !important;
+  flex: 1 !important;
+}