@cdc/core 4.25.8 → 4.25.11

package/components/EditorPanel/FootnotesEditor.tsx

@@ -3,8 +3,7 @@ import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import _ from 'lodash'
 import Footnotes, { Footnote } from '../../types/Footnotes'
 import { footnotesSymbols } from '../../helpers/footnoteSymbols'
-import InputSelect from '../inputs/InputSelect'
-import { TextField } from './Inputs'
+import { TextField, Select } from './Inputs'
 import { Datasets } from '@cdc/core/types/DataSet'
 import DataTransform from '../../helpers/DataTransform'
 import fetchRemoteData from '../../helpers/fetchRemoteData'
@@ -61,14 +60,14 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
     updateField('footnotes', null, 'staticFootnotes', footnoteCopy)
   }
 
-  const getOptions = (opts: string[]) => {
-    return [['', '--Select--']].concat(opts.map(key => [key, key]))
+  const getSelectOptions = (opts: string[]) => {
+    return [{ value: '', label: '--Select--' }].concat(opts.map(key => ({ value: key, label: key })))
   }
 
   const dataColumns = footnotesConfig.dataKey
-    ? getOptions(Object.keys(datasetsCache[footnotesConfig.dataKey]?.data?.[0] || {}))
+    ? getSelectOptions(Object.keys(datasetsCache[footnotesConfig.dataKey]?.data?.[0] || {}))
     : []
-  const dataSetOptions = getOptions(Object.keys(datasetsCache))
+  const dataSetOptions = getSelectOptions(Object.keys(datasetsCache))
 
   const changeFootnoteDataKey = async value => {
     if (value) {
@@ -87,7 +86,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
       {loadingAPIData && <Loader fullScreen />}
       <em>Dynamic Footnotes</em>
       <div className='row border p-2'>
-        <InputSelect
+        <Select
           label='Select a Footnote Dataset'
           value={footnotesConfig.dataKey}
           options={dataSetOptions}
@@ -100,7 +99,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
 
         {footnotesConfig.dataKey && (
           <div className='p-3'>
-            <InputSelect
+            <Select
               label='Footnote Symbol Column'
               value={footnotesConfig.dynamicFootnotes?.symbolColumn}
               options={dataColumns}
@@ -109,7 +108,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
               fieldName='symbolColumn'
               updateField={updateField}
             />
-            <InputSelect
+            <Select
               label='Footnote Text Column'
               value={footnotesConfig.dynamicFootnotes?.textColumn}
               options={dataColumns}
@@ -118,7 +117,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
               fieldName='textColumn'
               updateField={updateField}
             />
-            <InputSelect
+            <Select
               label='Footnote Order Column'
               value={footnotesConfig.dynamicFootnotes?.orderColumn}
               options={dataColumns}
@@ -135,34 +134,42 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
 
       <em>Static Footnotes</em>
 
-      {footnotesConfig.staticFootnotes?.map((note, index) => (
-        <div key={index} className='row border p-2'>
-          <div className='col-8'>
-            <InputSelect
-              label='Symbol'
-              value={note.symbol}
-              options={[['', '--Select--'], ...footnotesSymbols]}
-              fieldName='symbol'
-              updateField={(section, subsection, fieldName, value) =>
-                updateStaticFootnote(index, { ...note, symbol: value })
-              }
-            />{' '}
-            <TextField
-              label='Text'
-              value={note.text}
-              fieldName='text'
-              updateField={(section, subsection, fieldName, value) =>
-                updateStaticFootnote(index, { ...note, text: value })
-              }
-            />
-          </div>
-          <div className='col-2 ms-4'>
-            <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
-              Delete
-            </button>
+      {footnotesConfig.staticFootnotes?.map((note, index) => {
+        // Convert tuple format to {value, label} format for Select component
+        const symbolOptions = [
+          { value: '', label: '--Select--' },
+          ...footnotesSymbols.map(([value, label]) => ({ value, label }))
+        ]
+
+        return (
+          <div key={index} className='row border p-2'>
+            <div className='col-8'>
+              <Select
+                label='Symbol'
+                value={note.symbol}
+                options={symbolOptions}
+                fieldName='symbol'
+                updateField={(section, subsection, fieldName, value) =>
+                  updateStaticFootnote(index, { ...note, symbol: value })
+                }
+              />{' '}
+              <TextField
+                label='Text'
+                value={note.text}
+                fieldName='text'
+                updateField={(section, subsection, fieldName, value) =>
+                  updateStaticFootnote(index, { ...note, text: value })
+                }
+              />
+            </div>
+            <div className='col-2 ms-4'>
+              <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
+                Delete
+              </button>
+            </div>
           </div>
-        </div>
-      ))}
+        )
+      })}
       <button className='btn btn-primary' onClick={addStaticFootnote}>
         Add Static Footnote
       </button>

package/components/EditorPanel/Inputs.tsx

@@ -149,6 +149,7 @@ export type SelectProps = {
   options?: string[] | { label: string; value: string }[]
   required?: boolean
   initial?: string
+  disabled?: boolean
 
   // all other props
   [x: string]: any
@@ -167,6 +168,8 @@ const Select = memo((props: SelectProps) => {
     tooltip,
     updateField,
     initial: initialValue,
+    disabled = false,
+    onChange: onChangeProp,
     ...attributes
   } = props
   const optionsJsx = options?.map((option, index) => {
@@ -197,7 +200,7 @@ const Select = memo((props: SelectProps) => {
   }
 
   return (
-    <label>
+    <label style={disabled ? { opacity: 0.6, pointerEvents: 'none' } : {}}>
       <span className='edit-label'>
         {label}
         {tooltip}
@@ -206,9 +209,16 @@ const Select = memo((props: SelectProps) => {
         className={`cove-form-select ${required && !value ? 'warning' : ''} ${DROPDOWN_STYLES}`}
         name={fieldName}
         value={value}
+        disabled={disabled}
         onChange={event => {
-          updateField(section, subsection, fieldName, event.target.value)
+          if (updateField) {
+            updateField(section, subsection, fieldName, event.target.value)
+          }
+          if (onChangeProp) {
+            onChangeProp(event)
+          }
         }}
+        style={disabled ? { cursor: 'not-allowed', backgroundColor: '#e9ecef' } : {}}
         {...attributes}
       >
         {optionsJsx}

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

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

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -28,6 +28,16 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
   }, [rawData])
 
+  // Helper function to get filter values from various sources
+  const getFilterValues = (filter: VizFilter) => {
+    if (filter.values && filter.values.length > 0) return filter.values
+    if (filter.orderedValues && filter.orderedValues.length > 0) return filter.orderedValues
+    if (filter.columnName && rawData && rawData.length > 0) {
+      return _.uniq(rawData.map(row => row[filter.columnName]))
+    }
+    return []
+  }
+
   const removeFilter = index => {
     let filters = _.cloneDeep(config.filters)
 
@@ -188,8 +198,8 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                           value={filter.defaultValue}
                           options={
                             filter.resetLabel
-                              ? [filter.resetLabel, ...config.filters?.[filterIndex].values]
-                              : config.filters?.[filterIndex].values
+                              ? [filter.resetLabel, ...getFilterValues(filter)]
+                              : getFilterValues(filter)
                           }
                           updateField={(_section, _subSection, _key, value) => {
                             updateFilterDefaultValue(filterIndex, value)

package/components/EditorPanel/components/MarkupHighlightedTextField.tsx

@@ -0,0 +1,227 @@
+import React, { memo, useEffect, useState, useRef, useMemo } from 'react'
+import { useDebounce } from 'use-debounce'
+import { MarkupVariable } from '../../../types/MarkupVariable'
+
+type MarkupHighlightedTextFieldProps = {
+  className?: string
+  value: string | number
+  type?: 'text' | 'textarea'
+  label: string
+  placeholder?: string
+  fieldName?: string
+  section?: any
+  subsection?: any
+  updateField?: (section: any, subsection: any, fieldName: string, value: string) => void
+  markupVariables?: MarkupVariable[]
+  isEditor?: boolean
+}
+
+const MarkupHighlightedTextField: React.FC<MarkupHighlightedTextFieldProps> = memo((props) => {
+  const {
+    value: stateValue,
+    type = 'text',
+    label,
+    placeholder = '',
+    fieldName = '',
+    section = null,
+    subsection = null,
+    updateField,
+    markupVariables = [],
+    isEditor = false,
+    className = '',
+    ...attributes
+  } = props
+
+  const [value, setValue] = useState(String(stateValue))
+  const [debouncedValue] = useDebounce(value, 300) // Reduced debounce for faster response
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+  const highlightRef = useRef<HTMLDivElement>(null)
+
+  // Update field when debounced value changes
+  useEffect(() => {
+    if (stateValue !== debouncedValue && updateField) {
+      updateField(section, subsection, fieldName, debouncedValue)
+    }
+  }, [debouncedValue, section, subsection, fieldName, updateField, stateValue])
+
+  // Update local state when props change
+  useEffect(() => {
+    setValue(String(stateValue))
+  }, [stateValue])
+
+  // Get valid markup variable tags for highlighting (memoized)
+  const validTags = useMemo(() =>
+    markupVariables.map(variable => variable.tag).filter(Boolean),
+    [markupVariables]
+  )
+
+  // Memoized highlighting function to reduce recalculations
+  const highlightedContent = useMemo(() => {
+    if (!isEditor || validTags.length === 0) {
+      return value
+    }
+
+    // Escape HTML
+    const escapedText = value.replace(/[&<>"']/g, (match) => {
+      const escapeMap: { [key: string]: string } = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;'
+      }
+      return escapeMap[match]
+    })
+
+    // Highlight valid markup variables
+    return escapedText.replace(/\{\{([^}]+)\}\}/g, (match) => {
+      const isValid = validTags.includes(match)
+      const cssClass = isValid ? 'markup-variable-valid' : 'markup-variable-invalid'
+      return `<span class="${cssClass}">${match}</span>`
+    })
+  }, [value, validTags, isEditor])
+
+  // Optimized scroll sync
+  const handleScroll = useMemo(() => {
+    let rafId: number | null = null
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId)
+      rafId = requestAnimationFrame(() => {
+        if (inputRef.current && highlightRef.current) {
+          highlightRef.current.scrollTop = inputRef.current.scrollTop
+          highlightRef.current.scrollLeft = inputRef.current.scrollLeft
+        }
+      })
+    }
+  }, [])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setValue(e.target.value)
+  }
+
+  const inputId = `${fieldName}-${section}-${subsection}`
+  const shouldShowHighlighting = isEditor && validTags.length > 0
+
+  // Optimized styles
+  const containerStyle = useMemo(() => ({
+    position: 'relative' as const,
+    display: 'block',
+    width: '100%',
+  }), [])
+
+  const inputStyle = useMemo(() => ({
+    width: '100%',
+    padding: '8px 12px',
+    border: '1px solid #ddd',
+    borderRadius: '4px',
+    fontFamily: 'inherit',
+    fontSize: '14px',
+    lineHeight: '1.4',
+    background: shouldShowHighlighting ? 'transparent' : '#fff',
+    color: shouldShowHighlighting ? 'transparent' : 'inherit',
+    caretColor: shouldShowHighlighting ? '#333' : 'inherit',
+    position: 'relative' as const,
+    zIndex: 2,
+    resize: type === 'textarea' ? 'vertical' as const : 'none' as const,
+  }), [shouldShowHighlighting, type])
+
+  const highlightStyle = useMemo(() => ({
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: '8px 12px',
+    margin: 0,
+    border: '1px solid transparent',
+    background: '#fff',
+    borderRadius: '4px',
+    color: '#333',
+    whiteSpace: type === 'textarea' ? 'pre-wrap' as const : 'pre' as const,
+    overflow: 'hidden',
+    pointerEvents: 'none' as const,
+    fontFamily: 'inherit',
+    fontSize: '14px',
+    lineHeight: '1.4',
+    zIndex: 1,
+    wordWrap: 'break-word' as const,
+  }), [type])
+
+  const focusStyle = useMemo(() => ({
+    outline: 'none',
+    borderColor: '#0066cc',
+    boxShadow: '0 0 0 2px rgba(0, 102, 204, 0.2)',
+  }), [])
+
+  return (
+    <div className={`form-group ${className}`}>
+      <label htmlFor={inputId}>
+        <span className='edit-label'>{label}</span>
+        <div style={containerStyle}>
+          {/* Highlighting overlay */}
+          {shouldShowHighlighting && (
+            <div
+              ref={highlightRef}
+              style={highlightStyle}
+              dangerouslySetInnerHTML={{ __html: highlightedContent }}
+              className="markup-highlight-overlay"
+            />
+          )}
+
+          {/* Input field */}
+          {type === 'textarea' ? (
+            <textarea
+              ref={inputRef as React.RefObject<HTMLTextAreaElement>}
+              id={inputId}
+              value={value}
+              onChange={handleChange}
+              onScroll={handleScroll}
+              placeholder={placeholder}
+              style={inputStyle}
+              onFocus={(e) => Object.assign(e.target.style, focusStyle)}
+              onBlur={(e) => Object.assign(e.target.style, inputStyle)}
+              {...attributes}
+            />
+          ) : (
+            <input
+              ref={inputRef as React.RefObject<HTMLInputElement>}
+              type="text"
+              id={inputId}
+              value={value}
+              onChange={handleChange}
+              onScroll={handleScroll}
+              placeholder={placeholder}
+              style={inputStyle}
+              onFocus={(e) => Object.assign(e.target.style, focusStyle)}
+              onBlur={(e) => Object.assign(e.target.style, inputStyle)}
+              {...attributes}
+            />
+          )}
+        </div>
+      </label>
+
+      <style jsx>{`
+        .markup-highlight-overlay .markup-variable-valid {
+          background-color: #e6f3ff;
+          color: #0066cc;
+          border-radius: 3px;
+          padding: 0px 2px;
+          font-weight: 500;
+        }
+
+        .markup-highlight-overlay .markup-variable-invalid {
+          background-color: #ffe6e6;
+          color: #cc0000;
+          border-radius: 3px;
+          padding: 0px 2px;
+          font-weight: 500;
+          text-decoration: underline wavy #cc0000;
+        }
+      `}</style>
+    </div>
+  )
+})
+
+MarkupHighlightedTextField.displayName = 'MarkupHighlightedTextField'
+
+export default MarkupHighlightedTextField