feat(DiffView): Add CTAs and comparison presets

e2e/tests/diff-flame-graph-view/diff-flame-graph.spec.ts

@@ -41,11 +41,6 @@ test.describe('Diff flame graph view', () => {
     await exploreProfilesPage.assertSelectedService('pyroscope');
     await exploreProfilesPage.mouse.move(0, 0); // prevents the time picker tooltip to appear on the screenshot
 
-    const diffFlameGraphPanel = exploreProfilesPage.getByTestId('diff-flame-graph-panel');
-    await expect(diffFlameGraphPanel).toContainText(
-      'Select both the baseline and the comparison flame graph time ranges to view the diff flame graph'
-    );
-
     await expect(exploreProfilesPage.getSceneBody()).toHaveScreenshot({
       stylePath: './e2e/fixtures/css/hide-all-controls.css',
     });

src/pages/ProfilesExplorerView/components/GiveFeedbackButton.tsx

@@ -3,7 +3,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Badge, Icon, useStyles2 } from '@grafana/ui';
 import React from 'react';
 
-const FEEDBACK_FORM_URL = 'https://grafana.qualtrics.com/jfe/form/SV_6Gav4IUU6jcYfd4';
+export const FEEDBACK_FORM_URL = 'https://grafana.qualtrics.com/jfe/form/SV_6Gav4IUU6jcYfd4';
 
 // borrowed from https://github.com/grafana/explore-logs/blob/main/src/Components/IndexScene/GiveFeedbackButton.tsx
 export const GiveFeedbackButton = () => {

src/pages/ProfilesExplorerView/components/SceneExploreDiffFlameGraph/SceneExploreDiffFlameGraph.tsx

@@ -10,12 +10,16 @@ import { ServiceNameVariable } from '../../domain/variables/ServiceNameVariable/
 import { CompareTarget } from '../SceneExploreServiceLabels/components/SceneGroupByLabels/components/SceneLabelValuesGrid/domain/types';
 import { SceneComparePanel } from './components/SceneComparePanel/SceneComparePanel';
 import { SceneDiffFlameGraph } from './components/SceneDiffFlameGraph/SceneDiffFlameGraph';
+import { ScenePresetsPicker } from './components/ScenePresetsPicker/ScenePresetsPicker';
 import { syncYAxis } from './domain/behaviours/syncYAxis';
+import { EventDiffAutoSelect } from './domain/events/EventDiffAutoSelect';
+import { EventDiffChoosePreset } from './domain/events/EventDiffChoosePreset';
 
 interface SceneExploreDiffFlameGraphState extends SceneObjectState {
   baselinePanel: SceneComparePanel;
   comparisonPanel: SceneComparePanel;
   body: SceneDiffFlameGraph;
+  presetsPicker: ScenePresetsPicker;
 }
 
 export class SceneExploreDiffFlameGraph extends SceneObjectBase<SceneExploreDiffFlameGraphState> {
@@ -38,6 +42,7 @@ export class SceneExploreDiffFlameGraph extends SceneObjectBase<SceneExploreDiff
         syncYAxis(),
       ],
       body: new SceneDiffFlameGraph(),
+      presetsPicker: new ScenePresetsPicker(),
     });
 
     this.addActivationHandler(this.onActivate.bind(this));
@@ -54,18 +59,42 @@ export class SceneExploreDiffFlameGraph extends SceneObjectBase<SceneExploreDiff
     profileMetricVariable.setState({ query: ProfileMetricVariable.QUERY_SERVICE_NAME_DEPENDENT });
     profileMetricVariable.update(true);
 
+    this.subscribeToEvents();
+
     return () => {
       profileMetricVariable.setState({ query: ProfileMetricVariable.QUERY_DEFAULT });
       profileMetricVariable.update(true);
     };
   }
 
+  subscribeToEvents() {
+    this._subs.add(
+      this.subscribeToEvent(EventDiffAutoSelect, (event) => {
+        this.autoSelectDiffRanges(event.payload.wholeRange);
+      })
+    );
+
+    this._subs.add(
+      this.subscribeToEvent(EventDiffChoosePreset, () => {
+        this.state.presetsPicker.openSelect();
+      })
+    );
+  }
+
+  autoSelectDiffRanges(selectWholeRange: boolean) {
+    const { baselinePanel, comparisonPanel } = this.state;
+
+    baselinePanel.autoSelectDiffRange(selectWholeRange);
+    comparisonPanel.autoSelectDiffRange(selectWholeRange);
+  }
+
   // see SceneProfilesExplorer
   getVariablesAndGridControls() {
     return {
       variables: [
         sceneGraph.findByKeyAndType(this, 'serviceName', ServiceNameVariable),
         sceneGraph.findByKeyAndType(this, 'profileMetricId', ProfileMetricVariable),
+        this.state.presetsPicker,
       ],
       gridControls: [],
     };

src/pages/ProfilesExplorerView/components/SceneExploreDiffFlameGraph/components/SceneComparePanel/SceneComparePanel.tsx

@@ -1,5 +1,12 @@
 import { css } from '@emotion/css';
-import { dateTimeFormat, FieldMatcherID, getValueFormat, GrafanaTheme2, systemDateFormats } from '@grafana/data';
+import {
+  dateTime,
+  dateTimeFormat,
+  FieldMatcherID,
+  getValueFormat,
+  GrafanaTheme2,
+  systemDateFormats,
+} from '@grafana/data';
 import {
   SceneComponentProps,
   SceneDataTransformer,
@@ -17,7 +24,7 @@ import { getProfileMetric, ProfileMetricId } from '@shared/infrastructure/profil
 import { omit } from 'lodash';
 import React from 'react';
 
-import { getDefaultTimeRange } from '../../../../domain/getDefaultTimeRange';
+import { buildTimeRange } from '../../../../domain/buildTimeRange';
 import { FiltersVariable } from '../../../../domain/variables/FiltersVariable/FiltersVariable';
 import { getSceneVariableValue } from '../../../../helpers/getSceneVariableValue';
 import { getSeriesStatsValue } from '../../../../infrastructure/helpers/getSeriesStatsValue';
@@ -26,6 +33,7 @@ import { PanelType } from '../../../SceneByVariableRepeaterGrid/components/Scene
 import { addRefId, addStats } from '../../../SceneByVariableRepeaterGrid/infrastructure/data-transformations';
 import { CompareTarget } from '../../../SceneExploreServiceLabels/components/SceneGroupByLabels/components/SceneLabelValuesGrid/domain/types';
 import { SceneLabelValuesTimeseries } from '../../../SceneLabelValuesTimeseries';
+import { Preset } from '../ScenePresetsPicker/ScenePresetsPicker';
 import {
   SceneTimeRangeWithAnnotations,
   TimeRangeWithAnnotationsMode,
@@ -76,7 +84,7 @@ export class SceneComparePanel extends SceneObjectBase<SceneComparePanelState> {
       filterKey,
       title,
       color,
-      $timeRange: new SceneTimeRange({ key: `${target}-panel-timerange`, ...getDefaultTimeRange() }),
+      $timeRange: new SceneTimeRange({ key: `${target}-panel-timerange`, ...buildTimeRange('now-1h', 'now') }),
       timePicker: new SceneTimePicker({ isOnCanvas: true }),
       refreshPicker: new SceneRefreshPicker({ isOnCanvas: true }),
       timeseriesPanel: SceneComparePanel.buildTimeSeriesPanel({ target, filterKey, title, color }),
@@ -120,18 +128,18 @@ export class SceneComparePanel extends SceneObjectBase<SceneComparePanelState> {
           const allValuesSum = getSeriesStatsValue(s, 'allValuesSum') || 0;
           const formattedValue = getValueFormat(metricField.config.unit)(allValuesSum);
           const total = `${formattedValue.text}${formattedValue.suffix}`;
-          const [diffFrom, diffTo, timeZone] = SceneComparePanel.getFlameGraphRange(timeseriesPanel);
+          const [diffFrom, diffTo, timeZone] = SceneComparePanel.getDiffRange(timeseriesPanel);
 
           const displayName =
             diffFrom && diffTo
-              ? `${title} total = ${total} / Flame graph range = ${dateTimeFormat(diffFrom, {
+              ? `Total = ${total} / Flame graph range = ${dateTimeFormat(diffFrom, {
                   format: systemDateFormats.fullDate,
                   timeZone,
                 })} → ${dateTimeFormat(diffTo, {
                   format: systemDateFormats.fullDate,
                   timeZone,
                 })}`
-              : `${title} total = ${total}`;
+              : `Total = ${total}`;
 
           return {
             matcher: { id: FieldMatcherID.byFrameRefID, options: s.refId },
@@ -163,7 +171,7 @@ export class SceneComparePanel extends SceneObjectBase<SceneComparePanelState> {
     return timeseriesPanel;
   }
 
-  static getFlameGraphRange(
+  static getDiffRange(
     timeseriesPanel: SceneLabelValuesTimeseries
   ): [number | undefined, number | undefined, string | undefined] {
     let diffFrom: number | undefined;
@@ -189,7 +197,7 @@ export class SceneComparePanel extends SceneObjectBase<SceneComparePanelState> {
   }
 
   subscribeToEvents() {
-    return this.subscribeToEvent(EventSwitchTimerangeSelectionMode, (event) => {
+    const switchSub = this.subscribeToEvent(EventSwitchTimerangeSelectionMode, (event) => {
       // this triggers a timeseries request to the API
       // TODO: caching?
       (this.state.timeseriesPanel.state.body.state.$timeRange as SceneTimeRangeWithAnnotations).setState({
@@ -199,6 +207,19 @@ export class SceneComparePanel extends SceneObjectBase<SceneComparePanelState> {
             : TimeRangeWithAnnotationsMode.DEFAULT,
       });
     });
+
+    const timeRangeSub = this.state.$timeRange.subscribeToState((newState, prevState) => {
+      if (newState.from !== prevState.from || newState.to !== prevState.to) {
+        this.updateTitle('');
+      }
+    });
+
+    return {
+      unsubscribe() {
+        timeRangeSub.unsubscribe();
+        switchSub.unsubscribe();
+      },
+    };
   }
 
   buildTimeseriesTitle() {
@@ -211,16 +232,76 @@ export class SceneComparePanel extends SceneObjectBase<SceneComparePanelState> {
     return (this.state.timeseriesPanel.state.body.state.$timeRange as SceneTimeRangeWithAnnotations).useState();
   }
 
+  applyPreset({ from, to, diffFrom, diffTo, label }: Preset) {
+    this.setDiffRange(diffFrom, diffTo);
+
+    this.state.$timeRange.setState(buildTimeRange(from, to));
+
+    this.updateTitle(label);
+  }
+
+  setDiffRange(diffFrom: string, diffTo: string) {
+    const $diffTimeRange = this.state.timeseriesPanel.state.body.state.$timeRange as SceneTimeRangeWithAnnotations;
+
+    $diffTimeRange.setAnnotationTimeRange($diffTimeRange.buildAnnotationTimeRange(diffFrom, diffTo), true);
+  }
+
+  /**
+   * This function is responsible for automatically selecting half of the time range (from the time picker) that will be used to build the diff flame graph
+   * For the baseline panel, the leftmost part, for the comparison one, the rightmost part.
+   * In the future, we might want to be smarter and provides a way to select (e.g.) the region with the lowest resource consumption on the baseline panel vs
+   * the region with the highest consumption on the comparison panel.
+   */
+  autoSelectDiffRange(selectWholeRange: boolean) {
+    const { $timeRange, target } = this.state;
+    const { from, to } = $timeRange.state.value;
+
+    if (selectWholeRange) {
+      this.setDiffRange(from.toISOString(), to.toISOString());
+      return;
+    }
+
+    const diff = to.diff(from);
+    const half = Math.round(diff / 2); // TODO: cap the max value?
+
+    // we have to create a new instance because add() mutates the original one
+    const middle = dateTime(from).add(half).toISOString();
+
+    if (target === CompareTarget.BASELINE) {
+      this.setDiffRange(from.toISOString(), middle);
+    } else {
+      this.setDiffRange(middle, to.toISOString());
+    }
+  }
+
+  updateTitle(label = '') {
+    const title = this.state.target === CompareTarget.BASELINE ? 'Baseline' : 'Comparison';
+    const newTitle = label ? `${title} (${label})` : title;
+
+    this.setState({ title: newTitle });
+  }
+
   public static Component = ({ model }: SceneComponentProps<SceneComparePanel>) => {
-    const styles = useStyles2(getStyles);
-    const { target, title, timeseriesPanel: timeseries, timePicker, refreshPicker, filterKey } = model.useState();
+    const {
+      target,
+      color,
+      title,
+      timeseriesPanel: timeseries,
+      timePicker,
+      refreshPicker,
+      filterKey,
+    } = model.useState();
+    const styles = useStyles2(getStyles, color);
 
     const filtersVariable = sceneGraph.findByKey(model, filterKey) as FiltersVariable;
 
     return (
       <div className={styles.panel} data-testid={`panel-${target}`}>
         <div className={styles.panelHeader}>
-          <h6>{title}</h6>
+          <h6>
+            <div className={styles.colorCircle} />
+            {title}
+          </h6>
 
           <div className={styles.timePicker}>
             <timePicker.Component model={timePicker} />
@@ -238,7 +319,7 @@ export class SceneComparePanel extends SceneObjectBase<SceneComparePanelState> {
   };
 }
 
-const getStyles = (theme: GrafanaTheme2) => ({
+const getStyles = (theme: GrafanaTheme2, color: string) => ({
   panel: css`
     background-color: ${theme.colors.background.primary};
     padding: ${theme.spacing(1)} ${theme.spacing(1)} 0 ${theme.spacing(1)};
@@ -252,11 +333,20 @@ const getStyles = (theme: GrafanaTheme2) => ({
     margin-bottom: ${theme.spacing(2)};
 
     & > h6 {
+      font-size: 15px;
       height: 32px;
       line-height: 32px;
       margin: 0 ${theme.spacing(1)} 0 0;
     }
   `,
+  colorCircle: css`
+    display: inline-block;
+    background-color: ${color};
+    border-radius: 50%;
+    width: 9px;
+    height: 9px;
+    margin-right: 6px;
+  `,
   timePicker: css`
     display: flex;
     justify-content: flex-end;
@@ -272,5 +362,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     & [data-viz-panel-key] > * {
       border: 0 none;
     }
+
+    & [data-viz-panel-key] [data-testid='uplot-main-div'] {
+      cursor: crosshair;
+    }
   `,
 });

src/pages/ProfilesExplorerView/components/SceneExploreDiffFlameGraph/components/SceneComparePanel/components/SceneTimeRangeWithAnnotations.ts

@@ -1,4 +1,4 @@
-import { dateTime, LoadingState, TimeRange } from '@grafana/data';
+import { DateTime, dateTime, LoadingState, TimeRange } from '@grafana/data';
 import {
   sceneGraph,
   SceneObjectBase,
@@ -140,7 +140,7 @@ export class SceneTimeRangeWithAnnotations
       timeEnd: annotationTimeRange.to.unix() * 1000,
     });
 
-    // tradeoff: this will trigger any $data subscribers even though the data itself hasn't changed
+    // tradeoff: this will notify all the $data subscribers even though the data itself hasn't changed
     $data?.setState({
       data: {
         ...data,
@@ -149,8 +149,16 @@ export class SceneTimeRangeWithAnnotations
     });
   }
 
+  setAnnotationTimeRange(annotationTimeRange: TimeRange, updateTimeseries = false) {
+    this.setState({ annotationTimeRange });
+
+    if (updateTimeseries) {
+      this.updateTimeseriesAnnotation();
+    }
+  }
+
   nullifyAnnotationTimeRange() {
-    this.setState({ annotationTimeRange: TIMERANGE_NIL });
+    this.setAnnotationTimeRange(TIMERANGE_NIL);
   }
 
   getUrlState() {
@@ -177,15 +185,22 @@ export class SceneTimeRangeWithAnnotations
 
     const { annotationTimeRange } = this.state;
 
-    this.setState({
-      annotationTimeRange: evaluateTimeRange(
+    this.setAnnotationTimeRange(
+      this.buildAnnotationTimeRange(
         parseUrlParam(diffFrom) ?? annotationTimeRange.from,
-        parseUrlParam(diffTo) ?? annotationTimeRange.to,
-        this.getTimeZone(),
-        this.state.fiscalYearStartMonth,
-        this.state.UNSAFE_nowDelay
-      ),
-    });
+        parseUrlParam(diffTo) ?? annotationTimeRange.to
+      )
+    );
+  }
+
+  buildAnnotationTimeRange(diffFrom: string | DateTime, diffTo: string | DateTime) {
+    return evaluateTimeRange(
+      diffFrom,
+      diffTo,
+      this.getTimeZone(),
+      this.state.fiscalYearStartMonth,
+      this.state.UNSAFE_nowDelay
+    );
   }
 
   onTimeRangeChange(timeRange: TimeRange): void {
@@ -198,9 +213,7 @@ export class SceneTimeRangeWithAnnotations
 
     // this triggers a timeseries request to the API
     // TODO: caching?
-    this.setState({ annotationTimeRange: timeRange });
-
-    this.updateTimeseriesAnnotation();
+    this.setAnnotationTimeRange(timeRange, true);
   }
 
   onTimeZoneChange(timeZone: string): void {