@cdc/core 4.26.1 → 4.26.3

package/components/EditorPanel/EditorPanel.styles.css

@@ -3,9 +3,9 @@
 
 /* Color palette in editor panel context */
 .editor-panel .header .color-palette li {
-  width: 1.5em;
-  height: 1.5em;
   display: inline-block;
+  height: 1.5em;
+  width: 1.5em;
 }
 
 .editor-panel .color-palette {
@@ -13,12 +13,12 @@
 }
 
 .editor-panel .color-palette li {
-  width: 1.5em;
-  height: 1.5em;
+  border: rgba(0, 0, 0, 0.3) 3px solid;
+  cursor: pointer;
   display: inline-block;
+  height: 1.5em;
   margin-right: 0.5em;
-  cursor: pointer;
-  border: rgba(0, 0, 0, 0.3) 3px solid;
+  width: 1.5em;
 }
 
 .editor-panel .color-palette li.active {
@@ -26,24 +26,24 @@
 }
 
 .editor-panel .color-palette a {
-  display: inline-block;
   border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+  display: inline-block;
 }
 
 .editor-panel .color-palette.series-list {
+  border: none;
   flex-direction: column;
   padding: 0;
-  border: none;
 }
 
 .editor-panel .color-palette.series-list li {
-  padding: 0.3em 0.5em;
-  display: flex;
   align-items: center;
+  border: 0;
+  display: flex;
+  height: auto;
   justify-content: space-between;
+  padding: 0.3em 0.5em;
   width: auto;
-  height: auto;
-  border: 0;
 }
 
 .editor-panel .color-palette.series-list li:not(:last-child) {
@@ -61,10 +61,10 @@
 }
 
 .editor-panel .guidance-link svg {
-  width: 60px;
   color: var(--blue);
-  margin-right: 1rem;
   height: 60px;
+  margin-right: 1rem;
+  width: 60px;
 }
 
 .editor-panel .guidance-link svg path {
@@ -72,18 +72,18 @@
 }
 
 .editor-panel .warning {
-  color: #d8000c;
   background-color: #ffd2d2;
-  padding: 0.75em 1em;
-  margin: 1em 0;
-  font-size: 0.8em;
   border: #d8000c 1px solid;
   border-radius: 0.4em;
+  color: #d8000c;
+  font-size: 0.8em;
+  margin: 1em 0;
+  padding: 0.75em 1em;
 }
 
 .editor-panel .warning strong {
-  font-weight: 600;
   display: block;
+  font-weight: 600;
 }
 
 .editor-panel .advanced {
@@ -96,18 +96,18 @@
 }
 
 .editor-panel .advanced .advanced-toggle-link {
-  padding-top: 1em;
+  cursor: pointer;
   display: block;
+  padding-top: 1em;
   text-align: left;
-  cursor: pointer;
   text-decoration: underline;
 }
 
 .editor-panel .advanced .advanced-toggle-link span {
-  text-decoration: none;
   display: inline-block;
   font-family: monospace;
   padding-right: 5px;
+  text-decoration: none;
 }
 
 .editor-panel .advanced .advanced-toggle-link:hover {
@@ -115,29 +115,29 @@
 }
 
 .editor-panel .advanced textarea {
-  height: 400px;
-  width: 100%;
+  box-sizing: border-box;
+  font-family: monospace;
   font-size: 0.9em;
+  height: 400px;
   padding: 0.5em;
-  font-family: monospace;
-  box-sizing: border-box;
+  width: 100%;
 }
 
 .editor-panel .heading-2 {
   background: #565656;
+  border-bottom: #565656 3px solid;
   color: #fff;
   font-size: 1.1em;
   padding: 0.6em 1em;
   position: relative;
-  border-bottom: #565656 3px solid;
   z-index: 3;
 }
 
 .editor-panel label {
-  text-transform: uppercase;
   display: block;
   font-size: 0.8em;
   font-weight: 600;
+  text-transform: uppercase;
 }
 
 .editor-panel label:not(:first-child) {
@@ -145,8 +145,8 @@
 }
 
 .editor-panel label span.edit-label {
-  margin-bottom: 0.3em;
   display: block;
+  margin-bottom: 0.3em;
 }
 
 .editor-panel label span.column-heading {
@@ -158,25 +158,25 @@
 }
 
 .editor-panel label.checkbox span {
-  text-transform: none;
   font-size: 1em;
   font-weight: 400;
+  text-transform: none;
 }
 
 .editor-panel label.checkbox input {
-  margin-top: 0;
   margin-right: 0.5em;
+  margin-top: 0;
 }
 
 .editor-panel input[type='checkbox'],
 .editor-panel input[type='radio'] {
+  cursor: pointer;
   display: inline-block;
-  width: auto !important;
   height: auto !important;
-  padding: 0;
   margin-right: 0.5em;
-  cursor: pointer;
+  padding: 0;
   user-select: none;
+  width: auto !important;
 }
 
 .editor-panel input[type='text'],
@@ -193,8 +193,8 @@
 
 .editor-panel .primary-fieldset {
   border-top: rgba(0, 0, 0, 0.3) 2px solid;
-  padding-top: 2em;
   margin-top: 2em;
+  padding-top: 2em;
 }
 
 .editor-panel ul.column-edit {
@@ -223,28 +223,28 @@
 
 .editor-panel .edit-block {
   border: 1px solid rgba(0, 0, 0, 0.3);
-  padding: 1em;
   margin-top: 1em;
+  padding: 1em;
   position: relative;
 }
 
 .editor-panel .edit-block .remove-column {
-  position: absolute;
-  top: 0;
-  right: 0;
-  border: 0;
   background: rgba(0, 0, 0, 0.1);
+  border: 0;
   color: #000;
+  cursor: pointer;
   font-size: 0.8em;
   padding: 0.3em;
-  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 .editor-panel span.subtext {
-  text-transform: none;
   display: block;
   font-size: 0.8em;
   font-weight: 400;
+  text-transform: none;
 }
 
 .editor-panel .sort-list {
@@ -252,12 +252,12 @@
 }
 
 .editor-panel .sort-list li {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 0.3em;
-  display: flex;
   align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.2);
   cursor: move;
+  display: flex;
   margin-bottom: 0.3em;
+  padding: 0.3em;
 }
 
 .editor-panel .sort-list li svg {
@@ -265,8 +265,8 @@
 }
 
 .editor-panel .info {
-  margin-top: 1em;
   font-size: 0.9em;
+  margin-top: 1em;
 }
 
 /* React Tags Component styles (third-party library) */
@@ -275,8 +275,8 @@
 }
 
 .editor-panel .react-tags {
-  position: relative;
   cursor: text;
+  position: relative;
 }
 
 .editor-panel .react-tags input.react-tags__search-input {
@@ -296,20 +296,20 @@
 }
 
 .editor-panel .react-tags__selected-tag {
-  display: inline-block;
-  box-sizing: border-box;
+  background: #f1f1f1;
   border: 1px solid #d1d1d1;
   border-radius: 2px;
-  background: #f1f1f1;
-  padding: 0.4em 0.6em;
+  box-sizing: border-box;
+  display: inline-block;
   font-size: 0.8em;
-  margin-right: 0.3em;
   margin-bottom: 0.3em;
+  margin-right: 0.3em;
+  padding: 0.4em 0.6em;
 }
 
 .editor-panel .react-tags__selected-tag:after {
-  content: '\2715';
   color: #aaa;
+  content: '\2715';
   margin-left: 8px;
 }
 
@@ -330,12 +330,12 @@
 }
 
 .editor-panel .react-tags__search input {
-  max-width: 100%;
+  font-size: inherit;
+  line-height: inherit;
   margin: 0;
+  max-width: 100%;
   outline: none;
   padding: 0.5em 0.3em;
-  font-size: inherit;
-  line-height: inherit;
 }
 
 .editor-panel .react-tags__search input::-ms-clear {
@@ -343,9 +343,9 @@
 }
 
 .editor-panel .react-tags__suggestions {
+  left: 0;
   position: absolute;
   top: 100%;
-  left: 0;
   width: 100%;
 }
 
@@ -356,13 +356,13 @@
 }
 
 .editor-panel .react-tags__suggestions ul {
-  margin: 4px -1px;
-  padding: 0;
-  list-style: none;
   background: white;
   border: 1px solid #d1d1d1;
   border-radius: 2px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  list-style: none;
+  margin: 4px -1px;
+  padding: 0;
 }
 
 .editor-panel .react-tags__suggestions li {
@@ -371,14 +371,14 @@
 }
 
 .editor-panel .react-tags__suggestions li mark {
-  text-decoration: underline;
   background: none;
   font-weight: 600;
+  text-decoration: underline;
 }
 
 .editor-panel .react-tags__suggestions li:hover {
-  cursor: pointer;
   background: #eee;
+  cursor: pointer;
 }
 
 .editor-panel .react-tags__suggestions li.is-active {
@@ -386,23 +386,23 @@
 }
 
 .editor-panel .react-tags__suggestions li.is-disabled {
-  opacity: 0.5;
   cursor: auto;
+  opacity: 0.5;
 }
 
 .editor-toggle {
-  position: fixed;
-  top: 1em;
-  right: 1em;
   background: var(--blue);
-  color: white;
   border: 0;
   border-radius: 0.5em;
-  padding: 0.5em 1em;
-  font-size: 1em;
+  color: white;
   cursor: pointer;
-  z-index: 9999999999;
   display: none;
+  font-size: 1em;
+  padding: 0.5em 1em;
+  position: fixed;
+  right: 1em;
+  top: 1em;
+  z-index: 9999999999;
 }
 
 .editor-toggle.active {
@@ -429,8 +429,8 @@
 }
 
 :is(span).edit-label {
-  margin-bottom: 0.3em;
   display: block;
+  margin-bottom: 0.3em;
 }
 
 .react-tooltip {

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'
@@ -16,6 +17,7 @@ type NestedDropdownEditorProps = {
   updateField: Function
   updateFilterStyle: Function
   handleGroupingCustomOrder: (index1: number, index2: number) => void
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
@@ -25,7 +27,8 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
   handleNameChange: handleGroupColumnNameChange,
   filterIndex,
   rawData,
-  updateField
+  updateField,
+  onNestedDragAreaHover
 }) => {
   const filter = config.filters[filterIndex]
   const subGrouping = filter?.subGrouping
@@ -43,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
@@ -66,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] : ''
@@ -113,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' })
@@ -159,7 +162,10 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
       <Select
         label='Filter Grouping'
         value={filter.columnName}
-        options={[{ value: '', label: '- Select Option -' }, ...columnNameOptions.map(opt => ({ value: opt, label: opt }))]}
+        options={[
+          { value: '', label: '- Select Option -' },
+          ...columnNameOptions.map(opt => ({ value: opt, label: opt }))
+        ]}
         onChange={e => handleGroupColumnNameChange(e.target.value)}
       />
 
@@ -168,9 +174,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
         value={subGrouping?.columnName ?? ''}
         options={[
           { value: '', label: '- Select Option -' },
-          ...columnNameOptions
-            .filter(option => option !== filter.columnName)
-            .map(opt => ({ value: opt, label: opt }))
+          ...columnNameOptions.filter(option => option !== filter.columnName).map(opt => ({ value: opt, label: opt }))
         ]}
         onChange={e => {
           handleSubGroupColumnNameChange(e.target.value)
@@ -222,7 +226,11 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
           onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}
         />
         {filter.order === 'cust' && (
-          <FilterOrder orderedValues={filter.orderedValues} handleFilterOrder={handleGroupingCustomOrder} />
+          <FilterOrder
+            orderedValues={filter.orderedValues}
+            handleFilterOrder={handleGroupingCustomOrder}
+            onNestedDragAreaHover={onNestedDragAreaHover}
+          />
         )}
       </div>
 
@@ -247,6 +255,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
                     handleFilterOrder={(sourceIndex, destinationIndex) => {
                       handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
                     }}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
                   />
                 </div>
               )

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'
@@ -25,8 +27,9 @@ type VizFilterProps = {
 
 const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData, hasFootnotes }) => {
   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
@@ -34,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)
 
@@ -52,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
@@ -61,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') {
@@ -77,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) => {
@@ -108,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
@@ -131,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)
@@ -196,6 +199,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         key={filter.id || `filter-${filterIndex}`}
                         draggableId={`filter-${filter.id || filterIndex}`}
                         index={filterIndex}
+                        isDragDisabled={isNestedDragHovered}
                       >
                         {(provided, snapshot) => (
                           <div
@@ -305,6 +309,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                                       handleFilterOrder={(index1, index2) =>
                                         handleFilterOrder(index1, index2, filterIndex)
                                       }
+                                      onNestedDragAreaHover={setIsNestedDragHovered}
                                     />
                                   )}
                                   {filter.order === 'column' && (
@@ -354,6 +359,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                                   handleNameChange={value => handleNameChange(filterIndex, value)}
                                   updateField={updateField}
                                   updateFilterStyle={updateFilterStyle}
+                                  onNestedDragAreaHover={setIsNestedDragHovered}
                                 />
                               )}
                               {hasFootnotes && (