Revert "fix(flamegraph) add reset filter overlay when flamegraph is e…

…mpty (#78927)"

This reverts commit 9bcfc90.

Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

static/app/components/profiling/flamegraph/aggregateFlamegraph.tsx

@@ -1,12 +1,11 @@
 import type {ReactElement} from 'react';
-import {Fragment, useEffect, useLayoutEffect, useMemo, useState} from 'react';
+import {useEffect, useLayoutEffect, useMemo, useState} from 'react';
 import * as Sentry from '@sentry/react';
 import type {mat3} from 'gl-matrix';
 import {vec2} from 'gl-matrix';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {ContinuousFlamegraphContextMenu} from 'sentry/components/profiling/flamegraph/flamegraphContextMenu';
-import {FlamegraphWarnings} from 'sentry/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings';
 import {FlamegraphZoomView} from 'sentry/components/profiling/flamegraph/flamegraphZoomView';
 import {defined} from 'sentry/utils';
 import type {
@@ -29,16 +28,12 @@ import {
 import {FlamegraphRenderer2D} from 'sentry/utils/profiling/renderers/flamegraphRenderer2D';
 import {FlamegraphRendererWebGL} from 'sentry/utils/profiling/renderers/flamegraphRendererWebGL';
 import {Rect} from 'sentry/utils/profiling/speedscope';
-import type {QueryStatus} from 'sentry/utils/queryClient';
 import {useFlamegraph} from 'sentry/views/profiling/flamegraphProvider';
 import {useProfileGroup} from 'sentry/views/profiling/profileGroupProvider';
 
 interface AggregateFlamegraphProps {
   canvasPoolManager: CanvasPoolManager;
-  filter: 'application' | 'system' | 'all';
-  onResetFilter: () => void;
   scheduler: CanvasScheduler;
-  status: QueryStatus;
 }
 
 export function AggregateFlamegraph(props: AggregateFlamegraphProps): ReactElement {
@@ -225,36 +220,22 @@ export function AggregateFlamegraph(props: AggregateFlamegraphProps): ReactEleme
   }, [profileGroup, profiles.threadId, dispatch]);
 
   return (
-    <Fragment>
-      <FlamegraphWarnings
-        flamegraph={flamegraph}
-        requestState={
-          props.status === 'pending'
-            ? {type: 'loading'}
-            : props.status === 'error'
-              ? {type: 'errored', error: 'error'}
-              : {type: 'resolved', data: null}
-        }
-        onResetFilter={props.onResetFilter}
-        filter={props.filter}
-      />
-      <FlamegraphZoomView
-        profileGroup={profileGroup}
-        disableGrid
-        disableCallOrderSort
-        disableColorCoding
-        canvasBounds={flamegraphCanvasBounds}
-        canvasPoolManager={props.canvasPoolManager}
-        flamegraph={flamegraph}
-        flamegraphRenderer={flamegraphRenderer}
-        flamegraphCanvas={flamegraphCanvas}
-        flamegraphCanvasRef={flamegraphCanvasRef}
-        flamegraphOverlayCanvasRef={flamegraphOverlayCanvasRef}
-        flamegraphView={flamegraphView}
-        setFlamegraphCanvasRef={setFlamegraphCanvasRef}
-        setFlamegraphOverlayCanvasRef={setFlamegraphOverlayCanvasRef}
-        contextMenu={ContinuousFlamegraphContextMenu}
-      />
-    </Fragment>
+    <FlamegraphZoomView
+      profileGroup={profileGroup}
+      disableGrid
+      disableCallOrderSort
+      disableColorCoding
+      canvasBounds={flamegraphCanvasBounds}
+      canvasPoolManager={props.canvasPoolManager}
+      flamegraph={flamegraph}
+      flamegraphRenderer={flamegraphRenderer}
+      flamegraphCanvas={flamegraphCanvas}
+      flamegraphCanvasRef={flamegraphCanvasRef}
+      flamegraphOverlayCanvasRef={flamegraphOverlayCanvasRef}
+      flamegraphView={flamegraphView}
+      setFlamegraphCanvasRef={setFlamegraphCanvasRef}
+      setFlamegraphOverlayCanvasRef={setFlamegraphOverlayCanvasRef}
+      contextMenu={ContinuousFlamegraphContextMenu}
+    />
   );
 }

static/app/components/profiling/flamegraph/continuousFlamegraph.tsx

@@ -1542,11 +1542,7 @@ export function ContinuousFlamegraph(): ReactElement {
         }
         flamegraph={
           <Fragment>
-            <FlamegraphWarnings
-              flamegraph={flamegraph}
-              requestState={profiles}
-              filter={null}
-            />
+            <FlamegraphWarnings flamegraph={flamegraph} requestState={profiles} />
             <FlamegraphZoomView
               profileGroup={profileGroup}
               canvasBounds={flamegraphCanvasBounds}

static/app/components/profiling/flamegraph/flamegraph.tsx

@@ -1540,11 +1540,7 @@ function Flamegraph(): ReactElement {
         }
         flamegraph={
           <ProfileDragDropImport onImport={onImport}>
-            <FlamegraphWarnings
-              flamegraph={flamegraph}
-              requestState={profiles}
-              filter={null}
-            />
+            <FlamegraphWarnings flamegraph={flamegraph} requestState={profiles} />
             <FlamegraphZoomView
               profileGroup={profileGroup}
               canvasBounds={flamegraphCanvasBounds}

static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx

@@ -1,38 +1,28 @@
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/button';
 import {ExportProfileButton} from 'sentry/components/profiling/exportProfileButton';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import type {RequestState} from 'sentry/types/core';
 import type {Flamegraph} from 'sentry/utils/profiling/flamegraph';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 
-interface FlamegraphWarningPropsWithoutFilter {
+interface FlamegraphWarningProps {
   flamegraph: Flamegraph;
   requestState: RequestState<any>;
 }
 
-interface FlamegraphWarningPropsWithFilter extends FlamegraphWarningPropsWithoutFilter {
-  filter: 'application' | 'system' | 'all' | null;
-  onResetFilter: () => void;
-}
-
-type FlamegraphWarningProps =
-  | FlamegraphWarningPropsWithoutFilter
-  | FlamegraphWarningPropsWithFilter;
-
 export function FlamegraphWarnings(props: FlamegraphWarningProps) {
-  const params = useParams();
   const orgSlug = useOrganization().slug;
+  const params = useParams();
 
   if (props.requestState.type === 'loading') {
     return null;
   }
 
   if (props.requestState.type === 'errored') {
     return (
-      <Overlay data-test-id="flamegraph-warning-overlay">
+      <Overlay>
         <p>{props.requestState.error || t('Failed to load profile')}</p>
       </Overlay>
     );
@@ -46,8 +36,12 @@ export function FlamegraphWarnings(props: FlamegraphWarningProps) {
 
   if (props.flamegraph.profile.samples.length === 0) {
     return (
-      <Overlay data-test-id="flamegraph-warning-overlay">
-        <p>{t('This flamegraph has no data.')}</p>
+      <Overlay>
+        <p>
+          {t(
+            'This profile either has no samples or the total duration of frames in the profile is 0.'
+          )}
+        </p>
         <div>
           <ExportProfileButton
             variant="default"
@@ -65,33 +59,6 @@ export function FlamegraphWarnings(props: FlamegraphWarningProps) {
     );
   }
 
-  if ('filter' in props && props.flamegraph.frames.length > 0) {
-    if (props.filter === 'all') {
-      return (
-        <Overlay data-test-id="flamegraph-warning-overlay">
-          <p>{t('This flamegraph has no data.')}</p>
-        </Overlay>
-      );
-    }
-
-    return (
-      <Overlay data-test-id="flamegraph-warning-overlay">
-        <p>
-          {tct(`No frames match the [filter] frame filter`, {
-            filter: props.filter,
-          })}
-        </p>
-        {props.onResetFilter ? (
-          <div>
-            <Button size="sm" onClick={props.onResetFilter}>
-              {t('Reset Filter')}
-            </Button>
-          </div>
-        ) : null}
-      </Overlay>
-    );
-  }
-
   return null;
 }
 

static/app/views/performance/transactionSummary/transactionProfiles/content.tsx

@@ -100,9 +100,9 @@ function isEmpty(resp: Profiling.Schema) {
   return false;
 }
 
-function ProfileVisualization(props: TransactionProfilesContentProps) {
-  const {data, status} = useAggregateFlamegraphQuery({
-    query: props.query,
+function ProfileVisualization({query}: TransactionProfilesContentProps) {
+  const {data, isPending, isError} = useAggregateFlamegraphQuery({
+    query,
   });
 
   const [frameFilter, setFrameFilter] = useLocalStorageState<
@@ -116,10 +116,6 @@ function ProfileVisualization(props: TransactionProfilesContentProps) {
     [setFrameFilter]
   );
 
-  const onResetFrameFilter = useCallback(() => {
-    setFrameFilter('all');
-  }, [setFrameFilter]);
-
   const flamegraphFrameFilter: ((frame: Frame) => boolean) | undefined = useMemo(() => {
     if (frameFilter === 'all') {
       return () => true;
@@ -168,9 +164,6 @@ function ProfileVisualization(props: TransactionProfilesContentProps) {
               <FlamegraphContainer>
                 {visualization === 'flamegraph' ? (
                   <AggregateFlamegraph
-                    status={status}
-                    filter={frameFilter}
-                    onResetFilter={onResetFrameFilter}
                     canvasPoolManager={canvasPoolManager}
                     scheduler={scheduler}
                   />
@@ -184,11 +177,11 @@ function ProfileVisualization(props: TransactionProfilesContentProps) {
                   />
                 )}
               </FlamegraphContainer>
-              {status === 'pending' ? (
+              {isPending ? (
                 <RequestStateMessageContainer>
                   <LoadingIndicator />
                 </RequestStateMessageContainer>
-              ) : status === 'error' ? (
+              ) : isError ? (
                 <RequestStateMessageContainer>
                   {t('There was an error loading the flamegraph.')}
                 </RequestStateMessageContainer>