From ef4514f5abde7aa4489d287234b01d16a2d3d628 Mon Sep 17 00:00:00 2001
From: Deva <59408087+ya-nsh@users.noreply.github.com>
Date: Thu, 28 May 2026 01:05:06 +0530
Subject: [PATCH] fix(treemap): remove gaps between chart nodes (#40181)

---
 .../src/Treemap/constants.ts                  |  4 +-
 .../src/Treemap/transformProps.ts             |  3 +-
 .../test/Treemap/transformProps.test.ts       | 41 +++++++++++++++++++
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/constants.ts
index 72dc714c78d..a851c5e813b 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/constants.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/constants.ts
@@ -21,8 +21,8 @@ import { TreePathInfo } from '../types';
 
 export const COLOR_SATURATION = [0.7, 0.4];
 export const LABEL_FONTSIZE = 11;
-export const BORDER_WIDTH = 2;
-export const GAP_WIDTH = 2;
+export const BORDER_WIDTH = 0;
+export const GAP_WIDTH = 0;
 
 export const extractTreePathInfo = (
   treePathInfo: TreePathInfo[] | undefined,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
index 05d7b1b6a9c..5a37a9e74b4 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
@@ -214,7 +214,8 @@ export default function transformProps(
               colorAlpha: OpacityEnum.SemiTransparent,
               color: theme.colorText,
               borderColor: theme.colorBgBase,
-              borderWidth: 2,
+              borderWidth: BORDER_WIDTH,
+              gapWidth: GAP_WIDTH,
             },
             label: {
               ...labelProps,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts
index 387c9199ef1..391261ed633 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts
@@ -18,6 +18,7 @@
  */
 import { ChartProps } from '@superset-ui/core';
 import { supersetTheme } from '@apache-superset/core/theme';
+import { OpacityEnum } from '../../src/constants';
 import { EchartsTreemapChartProps } from '../../src/Treemap/types';
 import transformProps from '../../src/Treemap/transformProps';
 
@@ -74,4 +75,44 @@ describe('Treemap transformProps', () => {
       }),
     );
   });
+
+  test('should not render gaps between treemap nodes when filtered', () => {
+    const filteredChartProps = new ChartProps({
+      ...chartProps,
+      filterState: { selectedValues: ['Sylvester,bar1'] },
+    });
+
+    expect(
+      transformProps(filteredChartProps as EchartsTreemapChartProps),
+    ).toEqual(
+      expect.objectContaining({
+        echartOptions: expect.objectContaining({
+          series: [
+            expect.objectContaining({
+              data: expect.arrayContaining([
+                expect.objectContaining({
+                  children: expect.arrayContaining([
+                    expect.objectContaining({
+                      name: 'Arnold',
+                      children: expect.arrayContaining([
+                        expect.objectContaining({
+                          name: 'bar2',
+                          itemStyle: expect.objectContaining({
+                            borderWidth: 0,
+                            gapWidth: 0,
+                            colorAlpha: OpacityEnum.SemiTransparent,
+                          }),
+                          label: expect.objectContaining({}),
+                        }),
+                      ]),
+                    }),
+                  ]),
+                }),
+              ]),
+            }),
+          ],
+        }),
+      }),
+    );
+  });
 });