Remove Pixi flamegraph (#75)

src/plugins/profiling/INTERNALS.md

@@ -22,7 +22,6 @@ served by the server and called by the UI:
 * /api/prodfiler/v1/topn/threads
 * /api/prodfiler/v1/topn/traces
 * /api/prodfiler/v1/flamechart/elastic
-* /api/prodfiler/v1/flamechart/pixi
 
 If the server uses an Elasticsearch cluster as a data source, then the following
 API is served by the server and called by the UI:
@@ -33,7 +32,6 @@ API is served by the server and called by the UI:
 * /api/prodfiler/v2/topn/threads
 * /api/prodfiler/v2/topn/traces
 * /api/prodfiler/v2/flamechart/elastic
-* /api/prodfiler/v2/flamechart/pixi
 
 By default, the plugin is configured to use the second API set. See README.md to
 configure the plugin to use the first API set (aka local fixtures as a data
@@ -97,9 +95,3 @@ Here is a basic description of the response format:
 * `value` represents the number of samples for that node
 * `depth` represents the depth of the node in the flamegraph, starting from zero
 * `pathFromRoot` represents the full path from the flamegraph root to the given node
-
-### /api/prodfiler/*/flamechart/pixi
-
-The response returned from this API is used by the Pixi flamegraph.
-
-The expected JSON response is the same format returned from `/api/v1/restricted/flamechart/$projectID/$timeStart/$timeStop`.

src/plugins/profiling/common/flamegraph.ts

@@ -31,11 +31,6 @@ interface ElasticFlameGraph {
   Color: number[];
 }
 
-interface PixiFlameGraph extends CallerCalleeNode {
-  TotalTraces: number;
-  TotalSeconds: number;
-}
-
 /*
  * Helper to calculate the color of a given block to be drawn. The desirable outcomes of this are:
  * Each of the following frame types should get a different set of color hues:
@@ -251,18 +246,4 @@ export class FlameGraph {
     );
     return this.createElasticFlameGraph(this.createColumnarCallerCallee(root));
   }
-
-  toPixi(): PixiFlameGraph {
-    const root = createCallerCalleeDiagram(
-      this.events,
-      this.stacktraces,
-      this.stackframes,
-      this.executables
-    );
-    return {
-      ...root,
-      TotalTraces: this.totalCount,
-      TotalSeconds: 0,
-    } as PixiFlameGraph;
-  }
 }

src/plugins/profiling/common/index.ts

@@ -20,7 +20,6 @@ export function getRoutePaths() {
     TopNThreads: `${BASE_ROUTE_PATH}/topn/threads`,
     TopNTraces: `${BASE_ROUTE_PATH}/topn/traces`,
     FlamechartElastic: `${BASE_ROUTE_PATH}/flamechart/elastic`,
-    FlamechartPixi: `${BASE_ROUTE_PATH}/flamechart/pixi`,
   };
 }
 

src/plugins/profiling/public/app.tsx

@@ -32,7 +32,6 @@ import { ChartGrid } from './components/chart-grid';
 import { FlameGraphContext } from './components/contexts/flamegraph';
 import { FlameGraphNavigation } from './components/flamegraph-nav';
 import { FlameGraph } from './components/flamegraph';
-import { PixiFlamechart } from './components/PixiFlamechart';
 
 import { Services } from './services';
 
@@ -94,7 +93,7 @@ function buildTimeRange(start: string, end: string): TimeRange {
 
 type Props = Services;
 
-function App({ fetchTopN, fetchElasticFlamechart, fetchPixiFlamechart }: Props) {
+function App({ fetchTopN, fetchElasticFlamechart }: Props) {
   const defaultTimeRange = buildTimeRange(commonlyUsedRanges[0].start, commonlyUsedRanges[0].end);
   const [timeRange, setTimeRange] = useState(defaultTimeRange);
 
@@ -108,7 +107,6 @@ function App({ fetchTopN, fetchElasticFlamechart, fetchPixiFlamechart }: Props)
   });
 
   const [elasticFlamegraph, setElasticFlamegraph] = useState({});
-  const [pixiFlamegraph, setPixiFlamegraph] = useState({});
 
   const handleTimeChange = (selectedTime: { start: string; end: string; isInvalid: boolean }) => {
     if (selectedTime.isInvalid) {
@@ -126,7 +124,7 @@ function App({ fetchTopN, fetchElasticFlamechart, fetchPixiFlamechart }: Props)
   const tabs = [
     {
       id: 'stacktrace-elastic',
-      name: 'Stack Traces (Elastic)',
+      name: 'Stack Traces',
       content: (
         <>
           <EuiSpacer />
@@ -147,7 +145,7 @@ function App({ fetchTopN, fetchElasticFlamechart, fetchPixiFlamechart }: Props)
     },
     {
       id: 'flamegraph-elastic',
-      name: 'FlameGraph (Elastic)',
+      name: 'FlameGraph',
       content: (
         <>
           <EuiSpacer />
@@ -165,26 +163,6 @@ function App({ fetchTopN, fetchElasticFlamechart, fetchPixiFlamechart }: Props)
         </>
       ),
     },
-    {
-      id: 'flamegraph-pixi',
-      name: 'FlameGraph (Pixi)',
-      content: (
-        <>
-          <EuiSpacer />
-          <FlameGraphContext.Provider value={pixiFlamegraph}>
-            <FlameGraphNavigation
-              index={index}
-              projectID={projectID}
-              n={n}
-              timeRange={timeRange}
-              getter={fetchPixiFlamechart}
-              setter={setPixiFlamegraph}
-            />
-            <PixiFlamechart projectID={projectID.toString()} />
-          </FlameGraphContext.Provider>
-        </>
-      ),
-    },
   ];
 
   return (