FlameGraph: Refactor and simplify styles (#66433)

* FrameGraphTopTable: Use standard Table component

* Simplify

* Fix test

* Update tests

* Fixing test

* FlameGraph: Refactor and simplify styles

* updated

public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx

@@ -5,5 +5,5 @@ import { CoreApp, PanelProps } from '@grafana/data';
 import FlameGraphContainer from './components/FlameGraphContainer';
 
 export const FlameGraphPanel = (props: PanelProps) => {
-  return <FlameGraphContainer data={props.data.series[0]} app={CoreApp.Unknown} flameGraphHeight={props.height} />;
+  return <FlameGraphContainer data={props.data.series[0]} app={CoreApp.Unknown} />;
 };

public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx

@@ -22,6 +22,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useMeasure } from 'react-use';
 
 import { CoreApp } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
 
 import { PIXELS_PER_LEVEL } from '../../constants';
 import { SelectedView, ContextMenuData } from '../types';
@@ -35,7 +36,6 @@ import { getBarX, getRectDimensionsForLevel, renderRect } from './rendering';
 type Props = {
   data: FlameGraphDataContainer;
   app: CoreApp;
-  flameGraphHeight?: number;
   levels: LevelItem[][];
   topLevelIndex: number;
   selectedBarIndex: number;
@@ -53,7 +53,6 @@ type Props = {
 const FlameGraph = ({
   data,
   app,
-  flameGraphHeight,
   levels,
   topLevelIndex,
   selectedBarIndex,
@@ -66,7 +65,7 @@ const FlameGraph = ({
   setRangeMax,
   selectedView,
 }: Props) => {
-  const styles = getStyles(selectedView, app, flameGraphHeight);
+  const styles = useStyles2(getStyles);
   const totalTicks = data.getValue(0);
 
   const [sizeRef, { width: wrapperWidth }] = useMeasure<HTMLDivElement>();
@@ -233,14 +232,12 @@ const FlameGraph = ({
   );
 };
 
-const getStyles = (selectedView: SelectedView, app: CoreApp, flameGraphHeight: number | undefined) => ({
+const getStyles = () => ({
   graph: css`
-    float: left;
     overflow: scroll;
-    width: ${selectedView === SelectedView.FlameGraph ? '100%' : '50%'};
-    ${app !== CoreApp.Explore
-      ? `height: calc(${flameGraphHeight}px - 50px)`
-      : ''}; // 50px to adjust for header pushing content down
+    height: 100%;
+    flex-grow: 1;
+    flex-basis: 50%;
   `,
   canvasContainer: css`
     cursor: pointer;

public/app/plugins/panel/flamegraph/components/FlameGraphContainer.tsx

@@ -2,10 +2,10 @@ import { css } from '@emotion/css';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useMeasure } from 'react-use';
 
-import { DataFrame, CoreApp } from '@grafana/data';
+import { DataFrame, CoreApp, GrafanaTheme2 } from '@grafana/data';
 import { useStyles2, useTheme2 } from '@grafana/ui';
 
-import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH, PIXELS_PER_LEVEL } from '../constants';
+import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from '../constants';
 
 import FlameGraph from './FlameGraph/FlameGraph';
 import { FlameGraphDataContainer, LevelItem, nestedSetToLevels } from './FlameGraph/dataTransform';
@@ -16,10 +16,6 @@ import { SelectedView } from './types';
 type Props = {
   data?: DataFrame;
   app: CoreApp;
-  // Height for flame graph when not used in explore.
-  // This needs to be different to explore flame graph height as we
-  // use panels with user adjustable heights in dashboards etc.
-  flameGraphHeight?: number;
 };
 
 const FlameGraphContainer = (props: Props) => {
@@ -44,7 +40,7 @@ const FlameGraphContainer = (props: Props) => {
     return [container, nestedSetToLevels(container)];
   }, [props.data, theme]);
 
-  const styles = useStyles2(() => getStyles(props.app, PIXELS_PER_LEVEL * (levels?.length ?? 0)));
+  const styles = useStyles2(getStyles);
 
   // If user resizes window with both as the selected view
   useEffect(() => {
@@ -81,49 +77,62 @@ const FlameGraphContainer = (props: Props) => {
             containerWidth={containerWidth}
           />
 
-          {selectedView !== SelectedView.FlameGraph && (
-            <FlameGraphTopTableContainer
-              data={dataContainer}
-              app={props.app}
-              totalLevels={levels.length}
-              selectedView={selectedView}
-              search={search}
-              setSearch={setSearch}
-              setTopLevelIndex={setTopLevelIndex}
-              setSelectedBarIndex={setSelectedBarIndex}
-              setRangeMin={setRangeMin}
-              setRangeMax={setRangeMax}
-            />
-          )}
+          <div className={styles.body}>
+            {selectedView !== SelectedView.FlameGraph && (
+              <FlameGraphTopTableContainer
+                data={dataContainer}
+                app={props.app}
+                totalLevels={levels.length}
+                selectedView={selectedView}
+                search={search}
+                setSearch={setSearch}
+                setTopLevelIndex={setTopLevelIndex}
+                setSelectedBarIndex={setSelectedBarIndex}
+                setRangeMin={setRangeMin}
+                setRangeMax={setRangeMax}
+              />
+            )}
 
-          {selectedView !== SelectedView.TopTable && (
-            <FlameGraph
-              data={dataContainer}
-              app={props.app}
-              flameGraphHeight={props.flameGraphHeight}
-              levels={levels}
-              topLevelIndex={topLevelIndex}
-              selectedBarIndex={selectedBarIndex}
-              rangeMin={rangeMin}
-              rangeMax={rangeMax}
-              search={search}
-              setTopLevelIndex={setTopLevelIndex}
-              setSelectedBarIndex={setSelectedBarIndex}
-              setRangeMin={setRangeMin}
-              setRangeMax={setRangeMax}
-              selectedView={selectedView}
-            />
-          )}
+            {selectedView !== SelectedView.TopTable && (
+              <FlameGraph
+                data={dataContainer}
+                app={props.app}
+                levels={levels}
+                topLevelIndex={topLevelIndex}
+                selectedBarIndex={selectedBarIndex}
+                rangeMin={rangeMin}
+                rangeMax={rangeMax}
+                search={search}
+                setTopLevelIndex={setTopLevelIndex}
+                setSelectedBarIndex={setSelectedBarIndex}
+                setRangeMin={setRangeMin}
+                setRangeMax={setRangeMax}
+                selectedView={selectedView}
+              />
+            )}
+          </div>
         </div>
       )}
     </>
   );
 };
 
-const getStyles = (app: CoreApp, height: number) => ({
-  container: css`
-    height: ${app === CoreApp.Explore ? height + 'px' : '100%'};
-  `,
-});
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    container: css({
+      height: '100%',
+      display: 'flex',
+      flex: '1 1 0',
+      flexDirection: 'column',
+      minHeight: 0,
+      gap: theme.spacing(2),
+    }),
+    body: css({
+      display: 'flex',
+      flexGrow: 1,
+      minHeight: 0,
+    }),
+  };
+}
 
 export default FlameGraphContainer;

public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTableContainer.tsx

@@ -43,7 +43,7 @@ const FlameGraphTopTableContainer = ({
   setRangeMin,
   setRangeMax,
 }: Props) => {
-  const styles = useStyles2(() => getStyles(selectedView, app));
+  const styles = useStyles2(getStyles);
 
   const onSymbolClick = (symbol: string) => {
     if (search === symbol) {
@@ -148,18 +148,12 @@ function buildTableDataFrame(
   return dataFrames[0];
 }
 
-const getStyles = (selectedView: SelectedView, app: CoreApp) => {
-  const marginRight = '20px';
-
+const getStyles = () => {
   return {
     topTableContainer: css`
-      cursor: pointer;
-      float: left;
-      margin-right: ${marginRight};
-      width: ${selectedView === SelectedView.TopTable ? '100%' : `calc(50% - ${marginRight})`};
-      ${app !== CoreApp.Explore
-        ? 'height: calc(100% - 50px)'
-        : 'height: calc(100% + 50px)'}; // 50px to adjust for header pushing content down
+      flex-grow: 1;
+      flex-basis: 50%;
+      overflow: hidden;
     `,
   };
 };