fix: update query selector for bar elements and improve data handling in DataTableEditor

Author: adamdoe

packages/chart/src/_stories/ChartBar.Editor.stories.tsx

@@ -2809,7 +2809,7 @@ export const BarVisualTests: Story = {
 
       // Find bar elements in the chart
       const barElements =
-        chartSvg?.querySelectorAll('rect[class*="bar"], path[class*="bar"], g[class*="bar"] rect') || []
+        chartSvg?.querySelectorAll('rect[class*="bar"], path[class*="bar"], g[class*="bar"] path') || []
 
       // Check for border-related styles and attributes
       const barsWithStroke = Array.from(barElements).filter(bar => {

packages/core/components/EditorPanel/DataTableEditor.tsx

@@ -27,7 +27,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
   }, [config.columns])
 
   const groupPivotColumns = useMemo(() => {
-    const columns: string[] = config.data.flatMap(Object.keys)
+    const columns: string[] = (config.data ?? []).flatMap(Object.keys)
     const cols = _.uniq(columns).filter(key => {
       return true
     })

packages/dashboard/src/_stories/Dashboard.stories.tsx

@@ -223,13 +223,13 @@ export const Footnotes: Story = {
   }
 }
 
-const EqualHeightMixedVizConfig = _.cloneDeep(Dashboard_Filter) as Config
+const EqualHeightMixedVizConfig = cloneDeep(Dashboard_Filter) as Config
 const equalHeightDataBiteKey = 'equal-height-data-bite-story'
 const equalHeightDataBiteTemplate = Object.values(ExampleConfig_1.visualizations).find(v => v?.type === 'data-bite')
 
 if (equalHeightDataBiteTemplate) {
   EqualHeightMixedVizConfig.visualizations[equalHeightDataBiteKey] = {
-    ..._.cloneDeep(equalHeightDataBiteTemplate),
+    ...cloneDeep(equalHeightDataBiteTemplate),
     uid: equalHeightDataBiteKey,
     theme: 'theme-blue',
     bitePosition: 'Top',

packages/markup-include/src/CdcMarkupInclude.tsx

@@ -275,10 +275,9 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
           titleStyle={contentEditor.titleStyle}
           config={config}
           classes={[`${theme}`, 'mb-0']}
-          noContent={!markup}
+          noContent={!sanitizedHTML}
         />
         <div className={`markup-include-component ${contentClasses.join(' ')}`}>
-          {/* Filters */}
           {config.filters && config.filters.length > 0 && (
             <Filters
               config={config}
@@ -298,7 +297,12 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
                 <p>{`${noDataMessageText}`}</p>
               </div>
             )}
-            {!markupError && !_showNoDataMessage && <Markup allowElements={!!urlMarkup} content={markup} />}
+            {!markupError && !_showNoDataMessage && (
+              <div id={scopeId}>
+                {scopedCSS && <style>{scopedCSS}</style>}
+                <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+              </div>
+            )}
             {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
           </div>
         </div>

packages/markup-include/src/_stories/MarkupInclude.Editor.stories.tsx

@@ -306,21 +306,16 @@ export const VisualSectionTests: Story = {
     // Expectation: Theme class changes on component
     // ============================================================================
     const getThemeState = () => {
-      // Use the contentContainer like other tests, and check its parent for theme classes
       const content = contentContainer()
       if (!content) return { theme: '', classes: '', element: 'content not found' }
 
-      // Check content itself and its parent for theme classes
+      // Theme is applied to the outer cove-visualization wrapper — traverse up to find it
+      const themeWrapper = content.closest('[class*="theme-"]') as HTMLElement
+      const theme = themeWrapper ? Array.from(themeWrapper.classList).find(cls => cls.startsWith('theme-')) || '' : ''
+
       const contentClasses = Array.from(content.classList).join(' ')
       const parentClasses = content.parentElement ? Array.from(content.parentElement.classList).join(' ') : ''
 
-      const contentTheme = Array.from(content.classList).find(cls => cls.startsWith('theme-')) || ''
-      const parentTheme = content.parentElement
-        ? Array.from(content.parentElement.classList).find(cls => cls.startsWith('theme-')) || ''
-        : ''
-
-      const theme = contentTheme || parentTheme || ''
-
       return {
         theme,
         classes: contentClasses + ' | parent: ' + parentClasses,

packages/waffle-chart/src/_stories/WaffleChart.Editor.stories.tsx

@@ -671,7 +671,8 @@ export const VisualSectionTests: Story = {
       async () => {
         await userEvent.click(borderColorThemeCheckbox)
       },
-      (before, after) => before !== after && (after.includes('borderColorTheme') || before.includes('borderColorTheme'))
+      (before, after) =>
+        before !== after && (after.includes('border-color-theme') || before.includes('border-color-theme'))
     )
 
     // ============================================================================