Timeseries panels: Map field display names to color

src/Components/Panels/PanelMenu.tsx

@@ -3,6 +3,7 @@ import {
   PanelBuilders,
   SceneComponentProps,
   SceneCSSGridItem,
+  SceneFlexItem,
   sceneGraph,
   SceneObject,
   SceneObjectBase,
@@ -24,6 +25,7 @@ import { ExtensionPoints } from '../../services/extensions/links';
 import { setLevelColorOverrides } from '../../services/panel';
 import { setPanelOption } from '../../services/store';
 import { FieldsAggregatedBreakdownScene } from '../ServiceScene/Breakdowns/FieldsAggregatedBreakdownScene';
+import { setValueSummaryHeight } from '../ServiceScene/Breakdowns/Panels/ValueSummary';
 
 const ADD_TO_INVESTIGATION_MENU_TEXT = 'Add to investigation';
 const ADD_TO_INVESTIGATION_MENU_DIVIDER_TEXT = 'Investigations';
@@ -33,67 +35,19 @@ export enum AvgFieldPanelType {
   'histogram' = 'histogram',
 }
 
+export enum CollapsablePanelType {
+  collapse = 'Collapse',
+  expand = 'Expand',
+}
+
 interface PanelMenuState extends SceneObjectState {
   body?: VizPanelMenu;
   frame?: DataFrame;
   labelName?: string;
   fieldName?: string;
   addToExplorations?: AddToExplorationButton;
   panelType?: AvgFieldPanelType;
-}
-
-function addHistogramItem(items: PanelMenuItem[], sceneRef: PanelMenu) {
-  items.push({
-    text: '',
-    type: 'divider',
-  });
-  items.push({
-    text: 'Visualization',
-    type: 'group',
-  });
-  items.push({
-    text: sceneRef.state.panelType !== AvgFieldPanelType.histogram ? 'Histogram' : 'Time series',
-    iconClassName: sceneRef.state.panelType !== AvgFieldPanelType.histogram ? 'graph-bar' : 'chart-line',
-
-    onClick: () => {
-      const gridItem = sceneGraph.getAncestor(sceneRef, SceneCSSGridItem);
-      const viz = sceneGraph.getAncestor(sceneRef, VizPanel).clone();
-      const $data = sceneGraph.getData(sceneRef).clone();
-      const menu = sceneRef.clone();
-      const headerActions = Array.isArray(viz.state.headerActions)
-        ? viz.state.headerActions.map((o) => o.clone())
-        : viz.state.headerActions;
-      let body;
-
-      if (sceneRef.state.panelType !== AvgFieldPanelType.histogram) {
-        body = PanelBuilders.timeseries().setOverrides(setLevelColorOverrides);
-      } else {
-        body = PanelBuilders.histogram();
-      }
-
-      gridItem.setState({
-        body: body.setMenu(menu).setTitle(viz.state.title).setHeaderActions(headerActions).setData($data).build(),
-      });
-
-      // @todo extend findObject and use templates to avoid type assertions
-      const newPanelType =
-        sceneRef.state.panelType !== AvgFieldPanelType.timeseries
-          ? AvgFieldPanelType.timeseries
-          : AvgFieldPanelType.histogram;
-      setPanelOption('panelType', newPanelType);
-      menu.setState({ panelType: newPanelType });
-
-      const fieldsAggregatedBreakdownScene = sceneGraph.findObject(
-        gridItem,
-        (o) => o instanceof FieldsAggregatedBreakdownScene
-      ) as FieldsAggregatedBreakdownScene | null;
-      if (fieldsAggregatedBreakdownScene) {
-        fieldsAggregatedBreakdownScene.rebuildAvgFields();
-      }
-
-      onSwitchVizTypeTracking(newPanelType);
-    },
-  });
+  collapsable?: CollapsablePanelType;
 }
 
 /**
@@ -115,6 +69,7 @@ export class PanelMenu extends SceneObjectBase<PanelMenuState> implements VizPan
       // Manually activate scene
       this.state.addToExplorations?.activate();
 
+      // Navigation options (all panels)
       const items: PanelMenuItem[] = [
         {
           text: 'Navigation',
@@ -128,6 +83,15 @@ export class PanelMenu extends SceneObjectBase<PanelMenuState> implements VizPan
         },
       ];
 
+      // Visualization options
+      if (this.state.panelType || this.state.collapsable) {
+        addVisualizationHeader(items, this);
+      }
+
+      if (this.state.collapsable) {
+        addCollapsableItem(items, this);
+      }
+
       if (this.state.panelType) {
         addHistogramItem(items, this);
       }
@@ -166,10 +130,90 @@ export class PanelMenu extends SceneObjectBase<PanelMenuState> implements VizPan
   };
 }
 
+function addVisualizationHeader(items: PanelMenuItem[], sceneRef: PanelMenu) {
+  items.push({
+    text: '',
+    type: 'divider',
+  });
+  items.push({
+    text: 'Visualization',
+    type: 'group',
+  });
+}
+
+function addCollapsableItem(items: PanelMenuItem[], menu: PanelMenu) {
+  items.push({
+    text: menu.state.collapsable ?? CollapsablePanelType.expand,
+    iconClassName: menu.state.collapsable === CollapsablePanelType.collapse ? 'table-collapse-all' : 'table-expand-all',
+    onClick: () => {
+      const newCollapsableState =
+        menu.state.collapsable === CollapsablePanelType.expand
+          ? CollapsablePanelType.collapse
+          : CollapsablePanelType.expand;
+
+      console.log('newCollapsableState', { newCollapsableState, currentState: menu.state.collapsable });
+
+      // Update the viz
+      const vizPanelFlexItem = sceneGraph.getAncestor(menu, SceneFlexItem);
+      setValueSummaryHeight(vizPanelFlexItem, newCollapsableState);
+
+      // Set state and update local storage
+      menu.setState({ collapsable: newCollapsableState });
+      setPanelOption('collapsable', newCollapsableState);
+    },
+  });
+}
+
+function addHistogramItem(items: PanelMenuItem[], sceneRef: PanelMenu) {
+  items.push({
+    text: sceneRef.state.panelType !== AvgFieldPanelType.histogram ? 'Histogram' : 'Time series',
+    iconClassName: sceneRef.state.panelType !== AvgFieldPanelType.histogram ? 'graph-bar' : 'chart-line',
+
+    onClick: () => {
+      const gridItem = sceneGraph.getAncestor(sceneRef, SceneCSSGridItem);
+      const viz = sceneGraph.getAncestor(sceneRef, VizPanel).clone();
+      const $data = sceneGraph.getData(sceneRef).clone();
+      const menu = sceneRef.clone();
+      const headerActions = Array.isArray(viz.state.headerActions)
+        ? viz.state.headerActions.map((o) => o.clone())
+        : viz.state.headerActions;
+      let body;
+
+      if (sceneRef.state.panelType !== AvgFieldPanelType.histogram) {
+        body = PanelBuilders.timeseries().setOverrides(setLevelColorOverrides);
+      } else {
+        body = PanelBuilders.histogram();
+      }
+
+      gridItem.setState({
+        body: body.setMenu(menu).setTitle(viz.state.title).setHeaderActions(headerActions).setData($data).build(),
+      });
+
+      // @todo extend findObject and use templates to avoid type assertions
+      const newPanelType =
+        sceneRef.state.panelType !== AvgFieldPanelType.timeseries
+          ? AvgFieldPanelType.timeseries
+          : AvgFieldPanelType.histogram;
+      setPanelOption('panelType', newPanelType);
+      menu.setState({ panelType: newPanelType });
+
+      const fieldsAggregatedBreakdownScene = sceneGraph.findObject(
+        gridItem,
+        (o) => o instanceof FieldsAggregatedBreakdownScene
+      ) as FieldsAggregatedBreakdownScene | null;
+      if (fieldsAggregatedBreakdownScene) {
+        fieldsAggregatedBreakdownScene.rebuildAvgFields();
+      }
+
+      onSwitchVizTypeTracking(newPanelType);
+    },
+  });
+}
+
 const getExploreLink = (sceneRef: SceneObject) => {
   const indexScene = sceneGraph.getAncestor(sceneRef, IndexScene);
   const $data = sceneGraph.getData(sceneRef);
-  let queryRunner = getQueryRunnerFromChildren($data)[0];
+  let queryRunner = $data instanceof SceneQueryRunner ? $data : getQueryRunnerFromChildren($data)[0];
 
   // If we don't have a query runner, then our panel is within a SceneCSSGridItem, we need to get the query runner from there
   if (!queryRunner) {

src/Components/ServiceScene/Breakdowns/BreakdownSearchScene.tsx

@@ -1,4 +1,4 @@
-import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
+import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 import React, { ChangeEvent } from 'react';
 import { ByFrameRepeater } from './ByFrameRepeater';
 import { SearchInput } from './SearchInput';
@@ -60,8 +60,10 @@ export class BreakdownSearchScene extends SceneObjectBase<BreakdownSearchSceneSt
       recentFilters[this.cacheKey] = filter;
       const body = this.parent.state.body;
       if (body instanceof LabelValuesBreakdownScene || body instanceof FieldValuesBreakdownScene) {
-        body.state.body?.forEachChild((child) => {
-          if (child instanceof ByFrameRepeater && child.state.body.isActive) {
+        const byFrameRepeater = sceneGraph.findDescendents(body, ByFrameRepeater);
+
+        byFrameRepeater?.forEach((child) => {
+          if (child.state.body.isActive) {
             child.filterByString(filter);
           }
         });

src/Components/ServiceScene/Breakdowns/ByFrameRepeater.tsx

@@ -4,20 +4,25 @@ import { DataFrame, LoadingState, PanelData } from '@grafana/data';
 import {
   SceneByFrameRepeater,
   SceneComponentProps,
+  SceneDataTransformer,
   SceneFlexItem,
   SceneFlexLayout,
   sceneGraph,
   SceneLayout,
   SceneObjectBase,
   SceneObjectState,
   SceneReactObject,
+  VizPanel,
 } from '@grafana/scenes';
 import { sortSeries } from 'services/sorting';
 import { fuzzySearch } from '../../../services/search';
 import { getLabelValue } from './SortByScene';
 import { Alert, Button } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { BreakdownSearchReset } from './BreakdownSearchScene';
+import { map, Observable } from 'rxjs';
+import { LayoutSwitcher } from './LayoutSwitcher';
+import { VALUE_SUMMARY_PANEL_KEY } from './Panels/ValueSummary';
 
 interface ByFrameRepeaterState extends SceneObjectState {
   body: SceneLayout;
@@ -123,9 +128,37 @@ export class ByFrameRepeater extends SceneObjectBase<ByFrameRepeaterState> {
         // reset search
         this.filterFrames(() => true);
       }
+
+      this.filterSummaryChart(data);
     });
   };
 
+  /**
+   * Filters the summary panel rendered above the breakdown panels by adding a transformation to the panel
+   * @param data
+   * @private
+   */
+  private filterSummaryChart(data: string[][]) {
+    const layoutSwitcher = sceneGraph.getAncestor(this, LayoutSwitcher);
+
+    if (layoutSwitcher) {
+      const singleGraphParent = sceneGraph.findAllObjects(
+        layoutSwitcher,
+        (obj) => obj.isActive && obj.state.key === VALUE_SUMMARY_PANEL_KEY
+      );
+      if (singleGraphParent[0] instanceof SceneFlexItem) {
+        const panel = singleGraphParent[0].state.body;
+        if (panel instanceof VizPanel) {
+          panel.setState({
+            $data: new SceneDataTransformer({
+              transformations: [() => limitFramesByName(data[0])],
+            }),
+          });
+        }
+      }
+    }
+  }
+
   public filterFrames = (filterFn: FrameFilterCallback) => {
     const newChildren: SceneFlexItem[] = [];
     this.iterateFrames((frames, seriesIndex) => {
@@ -135,7 +168,8 @@ export class ByFrameRepeater extends SceneObjectBase<ByFrameRepeaterState> {
     });
 
     if (newChildren.length === 0) {
-      this.state.body.setState({ children: [buildNoResultsScene(this.getFilter(), this.clearFilter)] });
+      const filter = this.getFilter();
+      this.state.body.setState({ children: [buildNoResultsScene(filter, this.clearFilter)] });
     } else {
       this.state.body.setState({ children: newChildren });
     }
@@ -188,3 +222,23 @@ const styles = {
     marginLeft: '1.5rem',
   }),
 };
+
+export function limitFramesByName(matches: string[]) {
+  return (source: Observable<DataFrame[]>) => {
+    return source.pipe(
+      map((frames) => {
+        if (!matches || !matches.length) {
+          return frames;
+        }
+        let newFrames: DataFrame[] = [];
+        frames.forEach((f) => {
+          const label = getLabelValue(f);
+          if (matches.includes(label)) {
+            newFrames.push(f);
+          }
+        });
+        return newFrames;
+      })
+    );
+  };
+}

src/Components/ServiceScene/Breakdowns/ClearFiltersLayoutScene.tsx

@@ -0,0 +1,24 @@
+import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
+import { GrotError } from '../../GrotError';
+import { Alert, Button } from '@grafana/ui';
+import React from 'react';
+import { emptyStateStyles } from './FieldsBreakdownScene';
+
+export interface ClearFiltersLayoutSceneState extends SceneObjectState {
+  clearCallback: () => void;
+}
+export class ClearFiltersLayoutScene extends SceneObjectBase<ClearFiltersLayoutSceneState> {
+  public static Component = ({ model }: SceneComponentProps<ClearFiltersLayoutScene>) => {
+    const { clearCallback } = model.useState();
+    return (
+      <GrotError>
+        <Alert title="" severity="info">
+          No labels match these filters.{' '}
+          <Button className={emptyStateStyles.button} onClick={() => clearCallback()}>
+            Clear filters
+          </Button>{' '}
+        </Alert>
+      </GrotError>
+    );
+  };
+}