Explore metrics: set options directly because of scenes error when options not set (#94284)

* scenes error when options not set

* add all of the options that are updated in onOptionsChange

* add options to all the other places we are building timeseries panels

* Update public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts

Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>

* remove activation handlers and unused code

* Update public/app/features/trails/AutomaticMetricQueries/graph-builders/simple.ts

Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>

* Update public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

---------

Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>
Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

public/app/features/trails/AutomaticMetricQueries/graph-builders/percentiles.ts

@@ -1,10 +1,14 @@
 import { PanelBuilders } from '@grafana/scenes';
+import { SortOrder } from '@grafana/schema';
+import { TooltipDisplayMode } from '@grafana/ui';
 
 import { CommonVizParams } from './types';
 
 export function percentilesGraphBuilder({ title, unit }: CommonVizParams) {
-  return PanelBuilders.timeseries() //
+  return PanelBuilders.timeseries()
     .setTitle(title)
     .setUnit(unit)
-    .setCustomFieldConfig('fillOpacity', 9);
+    .setCustomFieldConfig('fillOpacity', 9)
+    .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending })
+    .setOption('legend', { showLegend: false });
 }

public/app/features/trails/AutomaticMetricQueries/graph-builders/simple.ts

@@ -1,4 +1,6 @@
 import { PanelBuilders } from '@grafana/scenes';
+import { SortOrder } from '@grafana/schema';
+import { TooltipDisplayMode } from '@grafana/ui';
 
 import { CommonVizParams } from './types';
 
@@ -7,5 +9,6 @@ export function simpleGraphBuilder({ title, unit }: CommonVizParams) {
     .setTitle(title)
     .setUnit(unit)
     .setOption('legend', { showLegend: false })
+    .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending })
     .setCustomFieldConfig('fillOpacity', 9);
 }

public/app/features/trails/Breakdown/LabelBreakdownScene.tsx

@@ -21,7 +21,7 @@ import {
   VariableDependencyConfig,
   VizPanel,
 } from '@grafana/scenes';
-import { DataQuery } from '@grafana/schema';
+import { DataQuery, SortOrder, TooltipDisplayMode } from '@grafana/schema';
 import { Button, Field, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 
@@ -39,7 +39,6 @@ import { AddToFiltersGraphAction } from './AddToFiltersGraphAction';
 import { BreakdownSearchReset, BreakdownSearchScene } from './BreakdownSearchScene';
 import { ByFrameRepeater } from './ByFrameRepeater';
 import { LayoutSwitcher } from './LayoutSwitcher';
-import { breakdownPanelOptions } from './panelConfigs';
 import { BreakdownLayoutChangeCallback, BreakdownLayoutType } from './types';
 import { getLabelOptions } from './utils';
 import { BreakdownAxisChangeEvent, yAxisSyncBehavior } from './yAxisSyncBehavior';
@@ -300,6 +299,8 @@ export function buildAllLayout(
     const unit = queryDef.unit;
 
     const vizPanel = PanelBuilders.timeseries()
+      .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending })
+      .setOption('legend', { showLegend: false })
       .setTitle(option.label!)
       .setData(
         new SceneQueryRunner({
@@ -319,10 +320,6 @@ export function buildAllLayout(
       .setBehaviors([fixLegendForUnspecifiedLabelValueBehavior])
       .build();
 
-    vizPanel.addActivationHandler(() => {
-      vizPanel.onOptionsChange(breakdownPanelOptions);
-    });
-
     children.push(
       new SceneCSSGridItem({
         $behaviors: [yAxisSyncBehavior],
@@ -382,10 +379,6 @@ function buildNormalLayout(
       isHidden,
     });
 
-    vizPanel.addActivationHandler(() => {
-      vizPanel.onOptionsChange(breakdownPanelOptions);
-    });
-
     return item;
   }
 
@@ -409,7 +402,11 @@ function buildNormalLayout(
         children: [
           new SceneFlexItem({
             minHeight: 300,
-            body: PanelBuilders.timeseries().setTitle('$metric').build(),
+            body: PanelBuilders.timeseries()
+              .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending })
+              .setOption('legend', { showLegend: false })
+              .setTitle('$metric')
+              .build(),
           }),
         ],
       }),

public/app/features/trails/Breakdown/panelConfigs.ts

@@ -1,8 +0,0 @@
-import { PanelOptionsBuilders } from '@grafana/scenes';
-import { SortOrder } from '@grafana/schema/dist/esm/index';
-import { TooltipDisplayMode } from '@grafana/ui';
-
-export const breakdownPanelOptions = PanelOptionsBuilders.timeseries()
-  .setOption('tooltip', { mode: TooltipDisplayMode.Multi, sort: SortOrder.Descending })
-  .setOption('legend', { showLegend: false })
-  .build();