feat(tree chart): add initial tree depth to tree chart (#35425)

superset-frontend/plugins/plugin-chart-echarts/src/Tree/constants.ts

@@ -42,4 +42,5 @@ export const DEFAULT_FORM_DATA: Partial<EchartsTreeFormData> = {
   nodeLabelPosition: 'left',
   childLabelPosition: 'bottom',
   emphasis: 'descendant',
+  initialTreeDepth: 2,
 };

superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx

@@ -279,6 +279,23 @@ const controlPanel: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'initialTreeDepth',
+            config: {
+              type: 'NumberControl',
+              label: t('Initial tree depth'),
+              min: -1,
+              step: 1,
+              max: 10,
+              default: DEFAULT_FORM_DATA.initialTreeDepth,
+              renderTrigger: true,
+              description: t(
+                'The initial level (depth) of the tree. If set as -1 all nodes are expanded.',
+              ),
+            },
+          },
+        ],
       ],
     },
   ],

superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts

@@ -74,6 +74,7 @@ export default function transformProps(
     nodeLabelPosition,
     childLabelPosition,
     emphasis,
+    initialTreeDepth,
   }: EchartsTreeFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const metricLabel = getMetricLabel(metric);
 
@@ -203,6 +204,7 @@ export default function transformProps(
       },
       select: DEFAULT_TREE_SERIES_OPTION.select,
       leaves: { label: { position: childLabelPosition } },
+      initialTreeDepth,
     },
   ];
 

superset-frontend/plugins/plugin-chart-echarts/src/Tree/types.ts

@@ -36,6 +36,7 @@ export type EchartsTreeFormData = QueryFormData & {
   nodeLabelPosition: 'top' | 'bottom' | 'left' | 'right';
   childLabelPosition: 'top' | 'bottom' | 'left' | 'right';
   emphasis: 'none' | 'ancestor' | 'descendant';
+  initialTreeDepth: number;
 };
 
 export interface TreeChartDataResponseResult extends ChartDataResponseResult {