datatrails: lazy load the breakdown queries, reduce panels, reduce number of points (#84965)

fix: lazy load the breakdown queries, reduce panels

public/app/features/trails/ActionTabs/BreakdownScene.tsx

@@ -35,6 +35,8 @@ import { ByFrameRepeater } from './ByFrameRepeater';
 import { LayoutSwitcher } from './LayoutSwitcher';
 import { getLabelOptions } from './utils';
 
+const MAX_PANELS_IN_ALL_LABELS_BREAKDOWN = 60;
+
 export interface BreakdownSceneState extends SceneObjectState {
   body?: SceneObject;
   labels: Array<SelectableValue<string>>;
@@ -198,6 +200,10 @@ export function buildAllLayout(options: Array<SelectableValue<string>>, queryDef
       continue;
     }
 
+    if (children.length === MAX_PANELS_IN_ALL_LABELS_BREAKDOWN) {
+      break;
+    }
+
     const expr = queryDef.queries[0].expr.replaceAll(VAR_GROUP_BY_EXP, String(option.value));
     const unit = queryDef.unit;
 
@@ -207,7 +213,7 @@ export function buildAllLayout(options: Array<SelectableValue<string>>, queryDef
           .setTitle(option.label!)
           .setData(
             new SceneQueryRunner({
-              maxDataPoints: 300,
+              maxDataPoints: 250,
               datasource: trailDS,
               queries: [
                 {
@@ -236,12 +242,14 @@ export function buildAllLayout(options: Array<SelectableValue<string>>, queryDef
         templateColumns: GRID_TEMPLATE_COLUMNS,
         autoRows: '200px',
         children: children,
+        isLazy: true,
       }),
       new SceneCSSGridLayout({
         templateColumns: '1fr',
         autoRows: '200px',
         // Clone children since a scene object can only have one parent at a time
         children: children.map((c) => c.clone()),
+        isLazy: true,
       }),
     ],
   });