@cdc/dashboard 4.26.4 → 4.26.5

package/src/components/Widget/Widget.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useState } from 'react'
 import { useDrag } from 'react-dnd'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import { DashboardCopyPasteContext } from '../../DashboardCopyPasteContext'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import Icon from '@cdc/core/components/ui/Icon'
@@ -10,13 +11,16 @@ import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { iconHash } from '../../helpers/iconHash'
 import _ from 'lodash'
 import { DataDesignerModal } from '../DataDesignerModal'
+import { DashboardConditionModal } from '../DashboardConditionModal'
+import { DashboardConditionSummary } from '../DashboardConditionSummary'
 import { labelHash } from '@cdc/core/helpers/labelHash'
+import { dashboardConditionsSupportedForRow } from '../../helpers/dashboardFilterTargets'
+import { getConditionalWidgets, hasConditionalWidgets } from '../../helpers/dashboardColumnWidgets'
 import './widget.styles.css'
 
-type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number }
+type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number; entryIdx?: number }
 type WidgetProps = {
   title: string
-  columnData?: any
   widgetConfig?: WidgetConfig
   addVisualization?: Function
   type: string
@@ -26,7 +30,6 @@ type WidgetProps = {
 
 const Widget = ({
   title,
-  columnData,
   widgetConfig,
   addVisualization,
   type,
@@ -35,11 +38,13 @@ const Widget = ({
 }: WidgetProps) => {
   const { overlay } = useGlobalContext()
   const { config, data, isEditor } = useContext(DashboardContext)
+  const { copiedWidget, copyWidget, clearCopiedWidget } = useContext(DashboardCopyPasteContext)
   const dispatch = useContext(DashboardDispatchContext)
+  const column = widgetConfig ? config.rows[widgetConfig.rowIdx]?.columns?.[widgetConfig.colIdx] : undefined
 
   const [isEditing, setIsEditing] = useState(false)
   const [toggleName, setToggleName] = useState(
-    columnData?.toggleName || labelHash[config?.visualizations[columnData?.widget]?.type] || ''
+    column?.toggleName || labelHash[config?.visualizations[widgetConfig?.uid as string]?.type || type] || ''
   )
 
   const transform = new DataTransform()
@@ -49,14 +54,16 @@ const Widget = ({
 
     if (!result) return null
 
-    const { rowIdx, colIdx } = result
+    const { rowIdx, colIdx, entryIdx } = result
 
     if (undefined !== widgetConfig?.rowIdx) {
-      dispatch({ type: 'MOVE_VISUALIZATION', payload: { rowIdx, colIdx, widget: widgetConfig } })
+      dispatch({ type: 'MOVE_VISUALIZATION', payload: { rowIdx, colIdx, entryIdx, widget: widgetConfig } })
+      clearCopiedWidget()
     } else if (!!addVisualization) {
       // Item does not exist, instantiate a new one
       const newViz = addVisualization()
-      dispatch({ type: 'ADD_VISUALIZATION', payload: { newViz, rowIdx, colIdx } })
+      dispatch({ type: 'ADD_VISUALIZATION', payload: { newViz, rowIdx, colIdx, entryIdx } })
+      clearCopiedWidget()
     }
   }
 
@@ -111,7 +118,7 @@ const Widget = ({
             // the HEADER component removes the data when you toggle to the main viz panel.
             // data will be cached only when it's loaded via dashboard preview.
             ;(responseData as any).sample = true
-            dispatch({ type: 'SET_DATA', payload: { ...data, [dataKey]: responseData } })
+            dispatch({ type: 'SET_DATA', payload: { data: { ...data, [dataKey]: responseData } } })
           })
           .catch(error => {
             console.error('Failed to fetch sample data:', error)
@@ -129,6 +136,20 @@ const Widget = ({
     loadSampleData()
   }
 
+  const copyCurrentWidget = () => {
+    if (!widgetConfig?.uid) return
+
+    if (copiedWidget?.sourceWidgetKey === widgetConfig.uid) {
+      clearCopiedWidget()
+      return
+    }
+
+    copyWidget({
+      sourceWidgetKey: widgetConfig.uid as string,
+      label: title || labelHash[type] || type
+    })
+  }
+
   let isConfigurationReady = false
   const dataConfiguredForRow = !!config.rows[widgetConfig?.rowIdx]?.dataKey
   if (dataConfiguredForRow || ['dashboardFilters', 'markup-include'].includes(type)) {
@@ -157,25 +178,55 @@ const Widget = ({
   }
 
   const needsDataConfiguration = !dataConfiguredForRow && widgetConfig?.type !== 'dashboardFilters'
+  const rowSupportsDashboardConditions = widgetConfig
+    ? dashboardConditionsSupportedForRow(config.rows[widgetConfig.rowIdx])
+    : false
+  const conditionalWidgets = hasConditionalWidgets(column) ? getConditionalWidgets(column) : []
+  const hasDashboardCondition =
+    widgetConfig && widgetConfig.entryIdx !== undefined
+      ? !!conditionalWidgets[widgetConfig.entryIdx]?.dashboardCondition
+      : false
+  const dashboardCondition =
+    widgetConfig && widgetConfig.entryIdx !== undefined
+      ? conditionalWidgets[widgetConfig.entryIdx]?.dashboardCondition
+      : undefined
+  const isCopiedWidget = !!widgetConfig?.uid && copiedWidget?.sourceWidgetKey === widgetConfig.uid
 
   const widgetContent = (
     <div
-      className={`widget ${toggleRow ? 'd-block widget--toggle' : ''} ${isDragging && 'dragging'}`}
+      className={`widget ${toggleRow ? 'd-block widget--toggle' : ''} ${widgetInRow ? 'widget--in-row' : ''} ${
+        isCopiedWidget ? 'widget--copied-source' : ''
+      } ${isDragging && 'dragging'}`}
       style={{ maxHeight: widgetInRow && toggleRow ? '180px' : '180px', minHeight: '100%' }}
     >
       <Icon display='move' className='drag-icon' />
-      <div className='widget__content'>
+      {isCopiedWidget && (
+        <button
+          type='button'
+          className='widget__copied-badge'
+          aria-label='Clear copied component'
+          onClick={clearCopiedWidget}
+        >
+          <span>Copied</span>
+          <Icon display='close' base />
+        </button>
+      )}
+      <div
+        className={`widget__content${widgetConfig?.rowIdx !== undefined ? ' widget__content--with-menu' : ''}${
+          dashboardCondition ? ' widget__content--has-condition' : ''
+        }`}
+      >
         {widgetConfig?.rowIdx !== undefined && (
           <div className='widget-menu'>
             {isConfigurationReady && (
-              <Button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
+              <Button title='Configure Visualization' className='btn-configure' onClick={editWidget}>
                 {iconHash['tools']}
               </Button>
             )}
             {needsDataConfiguration && (
               <Button
                 title='Configure Data'
-                className='btn btn-configure'
+                className='btn-configure'
                 onClick={() => {
                   overlay?.actions.openOverlay(
                     <DataDesignerModal rowIndex={widgetConfig.rowIdx} vizKey={widgetConfig.uid} />
@@ -185,14 +236,65 @@ const Widget = ({
                 {iconHash['gear']}
               </Button>
             )}
-            <div className='widget-menu-item' onClick={deleteWidget}>
+            <Button
+              title={
+                rowSupportsDashboardConditions
+                  ? 'Configure Dashboard Condition'
+                  : 'Dashboard conditions are not available for toggle or multi-visualization rows'
+              }
+              className={`btn-configure btn-configure--condition${hasDashboardCondition ? ' is-active' : ''}`}
+              disabled={!rowSupportsDashboardConditions}
+              onClick={() => {
+                overlay?.actions.openOverlay(
+                  <DashboardConditionModal
+                    rowIndex={widgetConfig.rowIdx}
+                    columnIndex={widgetConfig.colIdx}
+                    entryIndex={widgetConfig.entryIdx}
+                  />
+                )
+              }}
+            >
+              {iconHash['condition']}
+            </Button>
+            <Button
+              title='Copy Component'
+              className={`btn-configure btn-configure--copy${isCopiedWidget ? ' is-active' : ''}`}
+              aria-pressed={isCopiedWidget}
+              onClick={copyCurrentWidget}
+            >
+              <Icon display='copy' base />
+            </Button>
+            <Button className='btn-configure btn-configure--delete' title='Delete Component' onClick={deleteWidget}>
               <Icon display='close' base />
-            </div>
+            </Button>
           </div>
         )}
-        {iconHash[type]}
-        <span>{labelHash[type]}</span>
-        <span>{title}</span>
+        {widgetConfig?.rowIdx !== undefined && dashboardCondition && (
+          <DashboardConditionSummary
+            className='dashboard-condition-summary--widget'
+            dashboardCondition={dashboardCondition}
+            rowIndex={widgetConfig.rowIdx}
+            columnIndex={widgetConfig.colIdx}
+            entryIndex={widgetConfig.entryIdx}
+          />
+        )}
+        {widgetInRow ? (
+          <>
+            <div className='widget__summary'>
+              <span className='widget__type-icon'>{iconHash[type]}</span>
+              <span className='widget__summary-text'>
+                <span className='widget__type-label'>{labelHash[type]}</span>
+              </span>
+            </div>
+            <span className='widget__title'>{title}</span>
+          </>
+        ) : (
+          <>
+            {iconHash[type]}
+            <span>{labelHash[type]}</span>
+            <span>{title}</span>
+          </>
+        )}
         {widgetConfig?.newViz && type !== 'dashboardFilters' && (
           <span onClick={editWidget} className='config-needed'>
             Configuration needed

package/src/components/Widget/widget.styles.css

@@ -42,12 +42,13 @@
   align-items: center;
   background: transparent !important;
   border: 0;
-  border-radius: 0;
+  border-radius: 999px;
   box-shadow: none;
   color: var(--mediumGray);
   display: inline-flex;
   height: 28px;
   justify-content: center;
+  line-height: 1;
   margin: 0;
   min-height: 28px;
   padding: 4px;
@@ -57,32 +58,44 @@
 
 .widget-menu .cove-button.btn-configure:hover:not(:disabled),
 .widget-menu .cove-button.btn-configure:active:not(:disabled) {
-  background: transparent !important;
+  background: rgba(0, 94, 170, 0.08) !important;
   box-shadow: none;
   transform: none;
 }
 
-.widget-menu .cove-button.btn-configure svg {
-  margin-bottom: 0;
-  top: 0;
-  vertical-align: middle;
+.widget-menu .cove-button.btn-configure:focus {
+  outline: none !important;
 }
 
-.widget-menu-item {
-  align-items: center;
-  cursor: pointer;
-  display: inline-flex;
-  height: 28px;
-  justify-content: center;
-  line-height: 1;
-  padding: 4px;
-  user-select: none;
-  width: 28px;
+.widget-menu .cove-button.btn-configure:focus-visible {
+  background: rgba(0, 94, 170, 0.08) !important;
+  box-shadow: inset 0 0 0 2px currentColor;
+  outline: none !important;
+}
+
+.widget-menu .cove-button.btn-configure.btn-configure--condition.is-active {
+  background: var(--dashboard-condition-active-blue-bg, #f2f7fb) !important;
+  box-shadow: inset 0 0 0 1px var(--dashboard-condition-active-blue, var(--blue));
+  color: var(--dashboard-condition-active-blue, var(--blue));
 }
 
-.widget-menu-item svg {
-  fill: var(--mediumGray);
+.widget-menu .cove-button.btn-configure.btn-configure--condition.is-active:hover:not(:disabled),
+.widget-menu .cove-button.btn-configure.btn-configure--condition.is-active:active:not(:disabled) {
+  background: var(--dashboard-condition-active-blue-bg-hover, #e6eff7) !important;
+  box-shadow: inset 0 0 0 1px var(--dashboard-condition-active-blue, var(--blue));
+}
+
+.widget-menu .cove-button.btn-configure svg {
+  display: block;
+  height: 1.1em;
   margin-bottom: 0;
   top: 0;
+  transform: translateY(2px);
   vertical-align: middle;
+  width: 1.1em;
+}
+
+.widget-menu .cove-button.btn-configure.btn-configure--condition svg {
+  transform: translateY(2px) scale(1.15);
+  transform-origin: center;
 }

package/src/components/dashboard-condition-modal.css

@@ -0,0 +1,76 @@
+.cove-overlay:has(.dashboard-condition-modal) {
+  align-items: flex-start;
+}
+
+.cove-overlay__wrapper:has(.dashboard-condition-modal) {
+  align-items: flex-start;
+  padding: 2.5rem 0;
+}
+
+.cove-overlay__container:has(.dashboard-condition-modal) {
+  margin: 0 auto !important;
+}
+
+.dashboard-condition-modal__fields {
+  display: grid;
+  gap: 1rem;
+}
+
+.dashboard-condition-modal__select {
+  min-height: 41px;
+}
+
+.dashboard-condition-modal label {
+  align-items: flex-start;
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-condition-modal .edit-label {
+  align-items: center;
+  color: #333;
+  display: inline-flex;
+  font-size: 0.95rem;
+  font-weight: 600;
+  gap: 0.125rem;
+  margin-bottom: 0.5rem;
+  width: 100%;
+}
+
+.dashboard-condition-modal .cove-form-select {
+  border: 1px solid #c7c7c7;
+  border-radius: 0.333rem;
+  display: block;
+  height: 41px;
+  margin-top: 0;
+  min-height: 41px;
+  padding-left: 0.875rem;
+  padding-right: 2.5rem;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+  width: 100%;
+}
+
+.dashboard-condition-modal .cove-form-select:hover {
+  border-color: var(--blue);
+}
+
+.dashboard-condition-modal .cove-form-select:focus {
+  border-color: var(--blue);
+  box-shadow: none;
+  outline: 0;
+}
+
+.dashboard-condition-modal .cove-multiselect {
+  margin-top: 0.25rem;
+}
+
+.dashboard-condition-modal__multiselect-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-condition-modal__tooltip-text {
+  font-weight: 400;
+  margin: 0;
+}

package/src/components/dashboard-condition-summary.css

@@ -0,0 +1,87 @@
+.cove-visualization button.cove-button.dashboard-condition-summary {
+  align-items: center !important;
+  align-self: stretch;
+  background: var(--dashboard-condition-active-blue-bg, #f2f7fb) !important;
+  border: 1px solid var(--dashboard-condition-active-blue, var(--blue)) !important;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: var(--dashboard-condition-active-blue, var(--blue)) !important;
+  display: inline-flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  font-family: var(--app-font-main, sans-serif) !important;
+  font-size: 0.8rem !important;
+  font-weight: 400 !important;
+  gap: 0.35rem;
+  justify-content: flex-start;
+  line-height: 1.2;
+  margin: 0 0 0.5rem;
+  min-height: 24px !important;
+  overflow: visible;
+  padding: 0.2rem 0.45rem !important;
+  text-align: left;
+  transform: none;
+  white-space: normal;
+  width: 100%;
+}
+
+.cove-visualization button.cove-button.dashboard-condition-summary:hover,
+.cove-visualization button.cove-button.dashboard-condition-summary:active,
+.cove-visualization button.cove-button.dashboard-condition-summary:focus {
+  background: var(--dashboard-condition-active-blue-bg-hover, #e6eff7) !important;
+  box-shadow: none;
+  color: var(--dashboard-condition-active-blue, var(--blue)) !important;
+  transform: none;
+}
+
+.cove-visualization button.cove-button.dashboard-condition-summary .dashboard-condition-summary__icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  line-height: 1.2;
+  margin-top: 0.05rem;
+}
+
+.cove-visualization button.cove-button.dashboard-condition-summary .dashboard-condition-summary__icon svg {
+  display: block;
+  fill: currentColor;
+  height: 1em;
+  margin: 0 !important;
+  position: static;
+  top: auto;
+  transform: none;
+  width: 1em;
+}
+
+.cove-visualization button.cove-button.dashboard-condition-summary .dashboard-condition-summary__text {
+  display: block;
+  flex: 1 1 auto;
+  font-family: var(--app-font-main, sans-serif) !important;
+  font-size: 0.8rem !important;
+  font-weight: 400 !important;
+  line-height: 1.2;
+  min-width: 0;
+  overflow-wrap: break-word;
+  white-space: normal;
+  word-break: normal;
+}
+
+.cove-visualization button.cove-button.dashboard-condition-summary .dashboard-condition-summary__text strong {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 700;
+  line-height: inherit;
+}
+
+.cove-visualization button.cove-button.dashboard-condition-summary.dashboard-condition-summary--row {
+  margin-top: 0.5rem;
+}
+
+.cove-visualization button.cove-button.dashboard-condition-summary.dashboard-condition-summary--widget {
+  align-items: flex-start !important;
+  flex: 0 0 auto;
+  margin: 0.5rem 0 0.4rem;
+  max-width: 100%;
+  width: 100%;
+}

package/src/helpers/addValuesToDashboardFilters.ts

@@ -58,11 +58,9 @@ export const addValuesToDashboardFilters = (
         const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
         filterCopy.active = active.filter(val => defaultValues.includes(val))
       } else {
-        // Use defaultValue if set, otherwise keep existing active or use first value
-        if (filterCopy.defaultValue) {
-          filterCopy.active = filterCopy.defaultValue
-        } else if (!filterCopy.active) {
-          filterCopy.active = filterCopy.resetLabel || filterCopy.values[0]
+        // Only set active when it is not already set; prefer defaultValue, then resetLabel, then first value
+        if (!filterCopy.active) {
+          filterCopy.active = filterCopy.defaultValue || filterCopy.resetLabel || filterCopy.values[0]
         }
       }
     }

package/src/helpers/addVisualization.ts

@@ -1,14 +1,22 @@
 import type { AnyVisualization } from '@cdc/core/types/Visualization'
 import type { Table } from '@cdc/core/types/Table'
+import { createCoveId } from '@cdc/core/helpers/createCoveId'
+import type { CreateCoveIdOptions } from '@cdc/core/helpers/createCoveId'
+
+export const addVisualization = (type, subType, idOptions?: CreateCoveIdOptions) => {
+  if (type === 'filtered-text') {
+    throw new Error(
+      'Cannot create new filtered-text visualizations. filtered-text is deprecated; use markup-include instead.'
+    )
+  }
 
-export const addVisualization = (type, subType) => {
   const modalWillOpen = type !== 'markup-include'
   const newVisualizationConfig: Partial<AnyVisualization> = {
     filters: [],
     filterBehavior: 'Filter Change',
     newViz: type !== 'table',
     openModal: modalWillOpen,
-    uid: type + Date.now(),
+    uid: createCoveId(type, idOptions),
     type
   }
 
@@ -35,11 +43,11 @@ export const addVisualization = (type, subType) => {
       }
       break
     case 'data-bite':
-    case 'filtered-text':
+      newVisualizationConfig.biteStyle = 'tp5'
       newVisualizationConfig.visualizationType = type
       break
     case 'waffle-chart':
-      newVisualizationConfig.visualizationType = subType
+      newVisualizationConfig.visualizationType = subType === 'Waffle' ? 'TP5 Waffle' : subType
       break
     case 'table': {
       const tableConfig: Table = {
@@ -61,6 +69,9 @@ export const addVisualization = (type, subType) => {
       break
     case 'dashboardFilters': {
       newVisualizationConfig.sharedFilterIndexes = []
+      newVisualizationConfig.visual = {
+        grayBackground: false
+      }
       newVisualizationConfig.visualizationType = type
       break
     }

package/src/helpers/cloneDashboardWidget.ts

@@ -0,0 +1,127 @@
+import _ from 'lodash'
+import type { AnyVisualization } from '@cdc/core/types/Visualization'
+import { createCoveId } from '@cdc/core/helpers/createCoveId'
+import type { DashboardConfig } from '../types/DashboardConfig'
+import { ConfigRow, DashboardCondition } from '../types/ConfigRow'
+import { getDashboardConditionIds } from './dashboardConditions'
+import { getConditionalWidgets, hasConditionalWidgets, normalizeConditionalColumn } from './dashboardColumnWidgets'
+
+export type CloneDashboardWidgetTarget = {
+  rowIdx: number
+  colIdx: number
+  entryIdx?: number
+}
+
+const normalizeTarget = (target: string | number) => `${target}`
+
+const appendTarget = (targets: (string | number)[], target: string | number) => {
+  if (targets.some(existingTarget => normalizeTarget(existingTarget) === normalizeTarget(target))) return targets
+  return [...targets, target]
+}
+
+const createClonedWidgetKey = (sourceWidgetKey: string, visualizations: Record<string, AnyVisualization>) => {
+  const sourceVisualization = visualizations[sourceWidgetKey]
+  return createCoveId(sourceVisualization.type, { existingIds: Object.keys(visualizations) })
+}
+
+const getSourceDashboardCondition = (rows: ConfigRow[], sourceWidgetKey: string): DashboardCondition | undefined => {
+  for (const row of rows) {
+    for (const column of row.columns || []) {
+      if (!hasConditionalWidgets(column)) continue
+
+      const sourceEntry = getConditionalWidgets(column).find(entry => entry.widget === sourceWidgetKey)
+      if (sourceEntry?.dashboardCondition) return sourceEntry.dashboardCondition
+    }
+  }
+
+  return undefined
+}
+
+const getWidgetFilterTarget = (rows: ConfigRow[], widgetKey: string): string | number => {
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const row = rows[rowIndex]
+    const widgetInRow = row.columns?.some(
+      column => column.widget === widgetKey || getConditionalWidgets(column).some(entry => entry.widget === widgetKey)
+    )
+
+    if (widgetInRow) {
+      return row.dataKey ? rowIndex : widgetKey
+    }
+  }
+
+  return widgetKey
+}
+
+export const cloneDashboardWidget = (
+  config: DashboardConfig,
+  sourceWidgetKey: string,
+  target: CloneDashboardWidgetTarget
+): DashboardConfig => {
+  const sourceVisualization = config.visualizations?.[sourceWidgetKey]
+  const targetColumn = config.rows?.[target.rowIdx]?.columns?.[target.colIdx]
+
+  if (!sourceVisualization || !targetColumn) return config
+
+  if (target.entryIdx !== undefined) {
+    const existingEntry = getConditionalWidgets(targetColumn)[target.entryIdx]
+    if (existingEntry?.widget) return config
+  } else if (targetColumn.widget || hasConditionalWidgets(targetColumn)) {
+    return config
+  }
+
+  const clonedWidgetKey = createClonedWidgetKey(sourceWidgetKey, config.visualizations)
+  const clonedVisualization = { ..._.cloneDeep(sourceVisualization), uid: clonedWidgetKey }
+  const sourceDashboardCondition = getSourceDashboardCondition(config.rows, sourceWidgetKey)
+  const clonedDashboardCondition = sourceDashboardCondition
+    ? {
+        ..._.cloneDeep(sourceDashboardCondition),
+        id: createCoveId('condition', { existingIds: getDashboardConditionIds(config.rows) })
+      }
+    : undefined
+
+  const nextRows = _.cloneDeep(config.rows)
+  const nextTargetColumn = nextRows[target.rowIdx].columns[target.colIdx]
+
+  if (target.entryIdx !== undefined || hasConditionalWidgets(nextTargetColumn) || clonedDashboardCondition) {
+    const nextConditionalWidgets = [...(nextTargetColumn.conditionalWidgets || [])]
+    const targetEntryIndex = target.entryIdx ?? nextConditionalWidgets.length
+    nextConditionalWidgets[targetEntryIndex] = {
+      widget: clonedWidgetKey,
+      ...(clonedDashboardCondition ? { dashboardCondition: clonedDashboardCondition } : {})
+    }
+    nextRows[target.rowIdx].columns[target.colIdx] = normalizeConditionalColumn({
+      ...nextTargetColumn,
+      widget: undefined,
+      conditionalWidgets: nextConditionalWidgets.filter(entry => !!entry?.widget)
+    })
+  } else {
+    nextRows[target.rowIdx].columns[target.colIdx].widget = clonedWidgetKey
+  }
+
+  const sourceFilterTarget = getWidgetFilterTarget(config.rows, sourceWidgetKey)
+  const clonedFilterTarget = nextRows[target.rowIdx]?.dataKey ? target.rowIdx : clonedWidgetKey
+  const sharedFilters = config.dashboard.sharedFilters?.map(sharedFilter => {
+    if (!sharedFilter.usedBy?.length) return sharedFilter
+
+    let nextUsedBy = sharedFilter.usedBy
+
+    if (sharedFilter.usedBy.some(target => normalizeTarget(target) === normalizeTarget(sourceFilterTarget))) {
+      nextUsedBy = appendTarget(nextUsedBy, clonedFilterTarget)
+    }
+
+    return nextUsedBy === sharedFilter.usedBy ? sharedFilter : { ...sharedFilter, usedBy: nextUsedBy }
+  })
+
+  return {
+    ...config,
+    dashboard: {
+      ...config.dashboard,
+      ...(sharedFilters ? { sharedFilters } : {})
+    },
+    rows: nextRows,
+    visualizations: {
+      ...config.visualizations,
+      [clonedWidgetKey]: clonedVisualization
+    }
+  }
+}