feat(LogsVolumePanel): support filtering logs from the selected level

src/Components/ServiceScene/LogsVolumePanel.tsx

@@ -1,16 +1,26 @@
 import React from 'react';
 
-import { PanelBuilders, SceneComponentProps, SceneObjectBase, SceneObjectState, VizPanel } from '@grafana/scenes';
-import { DrawStyle, LegendDisplayMode, StackingMode } from '@grafana/ui';
+import {
+  AdHocFiltersVariable,
+  PanelBuilders,
+  SceneComponentProps,
+  SceneObjectBase,
+  SceneObjectState,
+  VizPanel,
+  sceneGraph,
+} from '@grafana/scenes';
+import { DrawStyle, LegendDisplayMode, PanelContext, SeriesVisibilityChangeMode, StackingMode } from '@grafana/ui';
 import { getQueryRunner, setLeverColorOverrides } from 'services/panel';
 import { buildLokiQuery } from 'services/query';
-import { LEVEL_VARIABLE_VALUE, LOG_STREAM_SELECTOR_EXPR } from 'services/variables';
+import { LEVEL_VARIABLE_VALUE, LOG_STREAM_SELECTOR_EXPR, VAR_FIELDS } from 'services/variables';
+import { addToFilters } from './Breakdowns/AddToFiltersButton';
 
 export interface LogsVolumePanelState extends SceneObjectState {
   panel?: VizPanel;
 }
 
 export class LogsVolumePanel extends SceneObjectBase<LogsVolumePanelState> {
+  private focusedLevel = '';
   constructor(state: LogsVolumePanelState) {
     super(state);
 
@@ -26,7 +36,7 @@ export class LogsVolumePanel extends SceneObjectBase<LogsVolumePanelState> {
   }
 
   private getVizPanel() {
-    return PanelBuilders.timeseries()
+    const panel = PanelBuilders.timeseries()
       .setTitle('Log volume')
       .setOption('legend', { showLegend: true, calcs: ['sum'], displayMode: LegendDisplayMode.List })
       .setUnit('short')
@@ -45,8 +55,35 @@ export class LogsVolumePanel extends SceneObjectBase<LogsVolumePanelState> {
       .setCustomFieldConfig('drawStyle', DrawStyle.Bars)
       .setOverrides(setLeverColorOverrides)
       .build();
+
+    panel.setState({
+      extendPanelContext: (_, context) => this.extendTimeSeriesLegendBus(context),
+    });
+
+    return panel;
   }
 
+  private extendTimeSeriesLegendBus = (context: PanelContext) => {
+    const originalOnToggleSeriesVisibility = context.onToggleSeriesVisibility;
+
+    const fieldFilters = sceneGraph.lookupVariable(VAR_FIELDS, this);
+    if (fieldFilters instanceof AdHocFiltersVariable) {
+      fieldFilters?.subscribeToState((newState, prevState) => {
+        const hadLevel = prevState.filters.find((filter) => filter.key === LEVEL_VARIABLE_VALUE);
+        const removedLevel = newState.filters.findIndex((filter) => filter.key === LEVEL_VARIABLE_VALUE) < 0;
+        if (hadLevel && removedLevel) {
+          originalOnToggleSeriesVisibility?.(hadLevel.value, SeriesVisibilityChangeMode.ToggleSelection);
+        }
+      });
+    }
+
+    context.onToggleSeriesVisibility = (level: string, mode: SeriesVisibilityChangeMode) => {
+      originalOnToggleSeriesVisibility?.(level, mode);
+      addToFilters(LEVEL_VARIABLE_VALUE, level, 'toggle', this);
+      this.focusedLevel = this.focusedLevel === level ? '' : level;
+    };
+  };
+
   public static Component = ({ model }: SceneComponentProps<LogsVolumePanel>) => {
     const { panel } = model.useState();
     if (!panel) {