@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileViewWithData.js

@@ -1,4 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,248 +20,343 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+
 import { useEffect, useMemo, useState } from 'react';
-import { useQueryState } from 'nuqs';
 import { QueryRequest_ReportType } from '@parca/client';
-import { useGrpcMetadata, useParcaContext } from '@parca/components';
+import { NumberParser, NumberSerializer, useGrpcMetadata, useParcaContext, useURLState, useURLStateCustom } from '@parca/components';
 import { saveAsBlob } from '@parca/utilities';
 import { validateFlameChartQuery } from './ProfileFlameGraph';
 import { FIELD_FUNCTION_NAME } from './ProfileFlameGraph/FlameGraphArrow';
 import { boundsFromProfileSource } from './ProfileFlameGraph/FlameGraphArrow/utils';
-import { getStepCountFromScreenWidth, useQueryRange, } from './ProfileMetricsGraph/hooks/useQueryRange';
+import { getStepCountFromScreenWidth, useQueryRange } from './ProfileMetricsGraph/hooks/useQueryRange';
 import { ProfileView } from './ProfileView';
 import { useProfileFilters } from './ProfileView/components/ProfileFilters/useProfileFilters';
-import { flamechartDimensionParser, groupByParser, intParam, invertCallStackParser, stringParam, } from './hooks/urlParsers';
-import { useDashboardItems } from './hooks/useDashboardItems';
 import { useQuery } from './useQuery';
 import { downloadPprof } from './utils';
-export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizationSelector, onSwitchToFifteenMinutes, }) => {
-    const metadata = useGrpcMetadata();
-    const { dashboardItems, setDashboardItems } = useDashboardItems();
-    const [sourceBuildID] = useQueryState('source_buildid', stringParam);
-    const [sourceFilename] = useQueryState('source_filename', stringParam);
-    const [groupBy] = useQueryState('group_by', groupByParser.withDefault([FIELD_FUNCTION_NAME]));
-    const [sandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
-    const [flamechartDimension] = useQueryState('flamechart_dimension', flamechartDimensionParser);
-    const [invertCallStack] = useQueryState('invert_call_stack', invertCallStackParser);
-    const [pprofDownloading, setPprofDownloading] = useState(false);
-    const { protoFilters } = useProfileFilters();
-    useEffect(() => {
-        // If profile type is not delta, remove flamechart from the dashboard items
-        // and set it to flame graph if no other items are selected.
-        if (profileSource == null) {
-            return;
-        }
-        const profileType = profileSource.ProfileType();
-        let newDashboardItems = dashboardItems;
-        if (dashboardItems.includes('flamechart') && !profileType.delta) {
-            newDashboardItems = dashboardItems.filter(item => item !== 'flamechart');
-        }
-        else {
-            return;
-        }
-        if (newDashboardItems.length === 0) {
-            newDashboardItems = ['flamegraph'];
-        }
-        setDashboardItems(newDashboardItems);
-    }, [profileSource, dashboardItems, setDashboardItems]);
-    const nodeTrimThreshold = useMemo(() => {
-        let width = 
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-        // subtract the padding
-        width = width - 12 - 16 - 12;
-        return (1 / width) * 100;
-    }, []);
-    const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
-        skip: !dashboardItems.includes('flamegraph'),
-        nodeTrimThreshold,
-        groupBy,
-        invertCallStack: invertCallStack ?? false,
-        protoFilters,
-    });
-    const samplesEnabled = !!(dashboardItems.includes('flamechart') &&
-        validateFlameChartQuery(profileSource).isValid &&
-        (flamechartDimension ?? []).length > 0);
-    const [samplesFromMs, samplesToMs] = useMemo(() => {
-        const bounds = boundsFromProfileSource(profileSource);
-        return [Number(bounds[0] / 1000000n), Number(bounds[1] / 1000000n)];
-    }, [profileSource]);
-    const samplesSumBy = useMemo(() => (flamechartDimension ?? []).map(f => f.startsWith('labels.') ? f.slice('labels.'.length) : f), [flamechartDimension]);
-    // Samples step count: 2px per data point for finer granularity in strips
-    const [samplesStepCount] = useQueryState('samples_step_count', intParam.withDefault(getStepCountFromScreenWidth(2)));
-    const { isLoading: samplesLoading, response: samplesRangeResponse, error: samplesError, stepDurationMs: samplesStepMs, } = useQueryRange(queryClient, samplesEnabled ? profileSource.query.toString() : '', samplesFromMs, samplesToMs, samplesSumBy, samplesStepCount, !samplesEnabled);
-    // Map QueryRange response to SamplesData
-    // TODO (manoj): Check if we can skip this mapping and adapt the CPUSampleStrips to work directly with the QueryRange response format.
-    const samplesData = useMemo(() => {
-        if (samplesLoading)
-            return { loading: true, error: null };
-        if (samplesError != null)
-            return { loading: false, error: samplesError };
-        if (samplesRangeResponse?.series?.length == null)
-            return { loading: false, error: null };
-        const series = samplesRangeResponse.series.map(ms => ({
-            labelset: ms.labelset ?? { labels: [] },
-            data: ms.samples.map(s => ({
-                timestamp: Number(s.timestamp.seconds) * 1000 + Math.floor(s.timestamp.nanos / 1000000),
-                value: Number(s.value),
-                sampleCount: Number(s.count),
-            })),
-        }));
-        return { loading: false, series, error: null, stepMs: samplesStepMs };
-    }, [samplesLoading, samplesRangeResponse, samplesError, samplesStepMs]);
-    const { isLoading: profileMetadataLoading, response: profileMetadataResponse, error: profileMetadataError, refetch: metadataRefetch, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.PROFILE_METADATA, {
-        nodeTrimThreshold,
-        groupBy,
-        protoFilters,
-        staleTime: 0,
-    });
-    const { perf } = useParcaContext();
-    const { isLoading: tableLoading, response: tableResponse, error: tableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
-        skip: !dashboardItems.includes('table') && !dashboardItems.includes('sandwich'),
-        protoFilters,
-    });
-    const { isLoading: sourceLoading, response: sourceResponse, error: sourceError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.SOURCE, {
-        skip: !dashboardItems.includes('source'),
-        sourceBuildID: sourceBuildID ?? undefined,
-        sourceFilename: sourceFilename ?? undefined,
-        protoFilters,
-    });
-    const { isLoading: callersFlamegraphLoading, response: callersFlamegraphResponse, error: callersFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
-        nodeTrimThreshold,
-        groupBy: [FIELD_FUNCTION_NAME],
-        invertCallStack: true,
-        sandwichByFunction: sandwichFunctionName ?? undefined,
-        skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
-        protoFilters,
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ProfileViewWithData = function ProfileViewWithData(_ref) {
+  var _flamegraphResponse$r, _flamegraphResponse$t, _flamegraphResponse$f, _profileMetadataRespo, _profileMetadataRespo2, _sourceResponse$repor, _calleesFlamegraphRes, _calleesFlamegraphRes2, _calleesFlamegraphRes3, _profileMetadataRespo3, _callersFlamegraphRes, _callersFlamegraphRes2, _callersFlamegraphRes3, _profileMetadataRespo4;
+  var queryClient = _ref.queryClient,
+    profileSource = _ref.profileSource,
+    showVisualizationSelector = _ref.showVisualizationSelector,
+    onSwitchToFifteenMinutes = _ref.onSwitchToFifteenMinutes;
+  var metadata = useGrpcMetadata();
+  var _useURLState = useURLState('dashboard_items', {
+      alwaysReturnArray: true
+    }),
+    _useURLState2 = _slicedToArray(_useURLState, 2),
+    dashboardItems = _useURLState2[0],
+    setDashboardItems = _useURLState2[1];
+  var _useURLState3 = useURLState('source_buildid'),
+    _useURLState4 = _slicedToArray(_useURLState3, 1),
+    sourceBuildID = _useURLState4[0];
+  var _useURLState5 = useURLState('source_filename'),
+    _useURLState6 = _slicedToArray(_useURLState5, 1),
+    sourceFilename = _useURLState6[0];
+  var _useURLState7 = useURLState('group_by', {
+      defaultValue: [FIELD_FUNCTION_NAME],
+      alwaysReturnArray: true
+    }),
+    _useURLState8 = _slicedToArray(_useURLState7, 1),
+    groupBy = _useURLState8[0];
+  var _useURLState9 = useURLState('sandwich_function_name'),
+    _useURLState0 = _slicedToArray(_useURLState9, 1),
+    sandwichFunctionName = _useURLState0[0];
+  var _useURLState1 = useURLState('flamechart_dimension', {
+      alwaysReturnArray: true
+    }),
+    _useURLState10 = _slicedToArray(_useURLState1, 1),
+    flamechartDimension = _useURLState10[0];
+  var _useURLState11 = useURLState('invert_call_stack'),
+    _useURLState12 = _slicedToArray(_useURLState11, 1),
+    invertStack = _useURLState12[0];
+  var invertCallStack = invertStack === 'true';
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    pprofDownloading = _useState2[0],
+    setPprofDownloading = _useState2[1];
+  var _useProfileFilters = useProfileFilters(),
+    protoFilters = _useProfileFilters.protoFilters;
+  useEffect(function () {
+    // If profile type is not delta, remove flamechart from the dashboard items
+    // and set it to flame graph if no other items are selected.
+    if (profileSource == null) {
+      return;
+    }
+    var profileType = profileSource.ProfileType();
+    var newDashboardItems = dashboardItems;
+    if (dashboardItems.includes('flamechart') && !profileType.delta) {
+      newDashboardItems = dashboardItems.filter(function (item) {
+        return item !== 'flamechart';
+      });
+    } else {
+      return;
+    }
+    if (newDashboardItems.length === 0) {
+      newDashboardItems = ['flamegraph'];
+    }
+    setDashboardItems(newDashboardItems);
+  }, [profileSource, dashboardItems, setDashboardItems]);
+  var nodeTrimThreshold = useMemo(function () {
+    var width =
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    // subtract the padding
+    width = width - 12 - 16 - 12;
+    return 1 / width * 100;
+  }, []);
+  var _useQuery = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+      skip: !dashboardItems.includes('flamegraph'),
+      nodeTrimThreshold: nodeTrimThreshold,
+      groupBy: groupBy,
+      invertCallStack: invertCallStack,
+      protoFilters: protoFilters
+    }),
+    flamegraphLoading = _useQuery.isLoading,
+    flamegraphResponse = _useQuery.response,
+    flamegraphError = _useQuery.error;
+  var samplesEnabled = !!(dashboardItems.includes('flamechart') && validateFlameChartQuery(profileSource).isValid && (flamechartDimension !== null && flamechartDimension !== void 0 ? flamechartDimension : []).length > 0);
+  var _useMemo = useMemo(function () {
+      var bounds = boundsFromProfileSource(profileSource);
+      return [Number(bounds[0] / 1000000n), Number(bounds[1] / 1000000n)];
+    }, [profileSource]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    samplesFromMs = _useMemo2[0],
+    samplesToMs = _useMemo2[1];
+  var samplesSumBy = useMemo(function () {
+    return (flamechartDimension !== null && flamechartDimension !== void 0 ? flamechartDimension : []).map(function (f) {
+      return f.startsWith('labels.') ? f.slice('labels.'.length) : f;
     });
-    const { isLoading: calleesFlamegraphLoading, response: calleesFlamegraphResponse, error: calleesFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
-        nodeTrimThreshold,
-        groupBy: [FIELD_FUNCTION_NAME],
-        invertCallStack: false,
-        sandwichByFunction: sandwichFunctionName ?? undefined,
-        skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
-        protoFilters,
+  }, [flamechartDimension]);
+
+  // Samples step count: 2px per data point for finer granularity in strips
+  var _useURLStateCustom = useURLStateCustom('samples_step_count', {
+      defaultValue: String(getStepCountFromScreenWidth(2)),
+      parse: NumberParser,
+      stringify: NumberSerializer
+    }),
+    _useURLStateCustom2 = _slicedToArray(_useURLStateCustom, 1),
+    samplesStepCount = _useURLStateCustom2[0];
+  var _useQueryRange = useQueryRange(queryClient, samplesEnabled ? profileSource.query.toString() : '', samplesFromMs, samplesToMs, samplesSumBy, samplesStepCount, !samplesEnabled),
+    samplesLoading = _useQueryRange.isLoading,
+    samplesRangeResponse = _useQueryRange.response,
+    samplesError = _useQueryRange.error,
+    samplesStepMs = _useQueryRange.stepDurationMs;
+
+  // Map QueryRange response to SamplesData
+  // TODO (manoj): Check if we can skip this mapping and adapt the CPUSampleStrips to work directly with the QueryRange response format.
+  var samplesData = useMemo(function () {
+    var _samplesRangeResponse;
+    if (samplesLoading) return {
+      loading: true,
+      error: null
+    };
+    if (samplesError != null) return {
+      loading: false,
+      error: samplesError
+    };
+    if ((samplesRangeResponse === null || samplesRangeResponse === void 0 || (_samplesRangeResponse = samplesRangeResponse.series) === null || _samplesRangeResponse === void 0 ? void 0 : _samplesRangeResponse.length) == null) return {
+      loading: false,
+      error: null
+    };
+    var series = samplesRangeResponse.series.map(function (ms) {
+      var _ms$labelset;
+      return {
+        labelset: (_ms$labelset = ms.labelset) !== null && _ms$labelset !== void 0 ? _ms$labelset : {
+          labels: []
+        },
+        data: ms.samples.map(function (s) {
+          return {
+            timestamp: Number(s.timestamp.seconds) * 1000 + Math.floor(s.timestamp.nanos / 1000000),
+            value: Number(s.value),
+            sampleCount: Number(s.count)
+          };
+        })
+      };
     });
-    useEffect(() => {
-        if ((!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') ||
-            flamegraphResponse?.report.oneofKind === 'flamegraphArrow') {
-            perf?.markInteraction('Flamegraph render', flamegraphResponse.total);
-        }
-        if (!tableLoading && tableResponse?.report.oneofKind === 'tableArrow') {
-            perf?.markInteraction('table render', tableResponse.total);
-        }
-        if (!sourceLoading && sourceResponse?.report.oneofKind === 'source') {
-            perf?.markInteraction('Source render', sourceResponse.total);
-        }
-    }, [
-        flamegraphLoading,
-        flamegraphResponse,
-        tableLoading,
-        tableResponse,
-        sourceLoading,
-        sourceResponse,
-        perf,
-    ]);
-    const downloadPProfClick = async () => {
-        if (profileSource == null || queryClient == null) {
-            return;
-        }
-        try {
+    return {
+      loading: false,
+      series: series,
+      error: null,
+      stepMs: samplesStepMs
+    };
+  }, [samplesLoading, samplesRangeResponse, samplesError, samplesStepMs]);
+  var _useQuery2 = useQuery(queryClient, profileSource, QueryRequest_ReportType.PROFILE_METADATA, {
+      nodeTrimThreshold: nodeTrimThreshold,
+      groupBy: groupBy,
+      protoFilters: protoFilters,
+      staleTime: 0
+    }),
+    profileMetadataLoading = _useQuery2.isLoading,
+    profileMetadataResponse = _useQuery2.response,
+    profileMetadataError = _useQuery2.error,
+    metadataRefetch = _useQuery2.refetch;
+  var _useParcaContext = useParcaContext(),
+    perf = _useParcaContext.perf;
+  var _useQuery3 = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
+      skip: !dashboardItems.includes('table') && !dashboardItems.includes('sandwich'),
+      protoFilters: protoFilters
+    }),
+    tableLoading = _useQuery3.isLoading,
+    tableResponse = _useQuery3.response,
+    tableError = _useQuery3.error;
+  var _useQuery4 = useQuery(queryClient, profileSource, QueryRequest_ReportType.SOURCE, {
+      skip: !dashboardItems.includes('source'),
+      sourceBuildID: sourceBuildID,
+      sourceFilename: sourceFilename,
+      protoFilters: protoFilters
+    }),
+    sourceLoading = _useQuery4.isLoading,
+    sourceResponse = _useQuery4.response,
+    sourceError = _useQuery4.error;
+  var _useQuery5 = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+      nodeTrimThreshold: nodeTrimThreshold,
+      groupBy: [FIELD_FUNCTION_NAME],
+      invertCallStack: true,
+      sandwichByFunction: sandwichFunctionName,
+      skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+      protoFilters: protoFilters
+    }),
+    callersFlamegraphLoading = _useQuery5.isLoading,
+    callersFlamegraphResponse = _useQuery5.response,
+    callersFlamegraphError = _useQuery5.error;
+  var _useQuery6 = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+      nodeTrimThreshold: nodeTrimThreshold,
+      groupBy: [FIELD_FUNCTION_NAME],
+      invertCallStack: false,
+      sandwichByFunction: sandwichFunctionName,
+      skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+      protoFilters: protoFilters
+    }),
+    calleesFlamegraphLoading = _useQuery6.isLoading,
+    calleesFlamegraphResponse = _useQuery6.response,
+    calleesFlamegraphError = _useQuery6.error;
+  useEffect(function () {
+    if (!flamegraphLoading && (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraph' || (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraphArrow') {
+      perf === null || perf === void 0 || perf.markInteraction('Flamegraph render', flamegraphResponse.total);
+    }
+    if (!tableLoading && (tableResponse === null || tableResponse === void 0 ? void 0 : tableResponse.report.oneofKind) === 'tableArrow') {
+      perf === null || perf === void 0 || perf.markInteraction('table render', tableResponse.total);
+    }
+    if (!sourceLoading && (sourceResponse === null || sourceResponse === void 0 ? void 0 : sourceResponse.report.oneofKind) === 'source') {
+      perf === null || perf === void 0 || perf.markInteraction('Source render', sourceResponse.total);
+    }
+  }, [flamegraphLoading, flamegraphResponse, tableLoading, tableResponse, sourceLoading, sourceResponse, perf]);
+  var downloadPProfClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var req, blob, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            if (!(profileSource == null || queryClient == null)) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
+          case 1:
+            _context.p = 1;
             setPprofDownloading(true);
-            const req = profileSource.QueryRequest();
-            req.groupBy = { fields: groupBy };
-            const blob = await downloadPprof(req, queryClient, metadata);
-            saveAsBlob(blob, `profile.pb.gz`);
+            req = profileSource.QueryRequest();
+            req.groupBy = {
+              fields: groupBy
+            };
+            _context.n = 2;
+            return downloadPprof(req, queryClient, metadata);
+          case 2:
+            blob = _context.v;
+            saveAsBlob(blob, "profile.pb.gz");
             setPprofDownloading(false);
-        }
-        catch (error) {
+            _context.n = 4;
+            break;
+          case 3:
+            _context.p = 3;
+            _t = _context.v;
             setPprofDownloading(false);
-            console.error('Error while querying', error);
+            console.error('Error while querying', _t);
+          case 4:
+            return _context.a(2);
         }
+      }, _callee, null, [[1, 3]]);
+    }));
+    return function downloadPProfClick() {
+      return _ref2.apply(this, arguments);
     };
-    // TODO: Refactor how we get responses such that we have a single response,
-    //  regardless of the report type.
-    let total = BigInt(0);
-    let filtered = BigInt(0);
-    if (flamegraphResponse !== null) {
-        total = BigInt(flamegraphResponse.total);
-        filtered = BigInt(flamegraphResponse.filtered);
-    }
-    else if (tableResponse !== null) {
-        total = BigInt(tableResponse.total);
-        filtered = BigInt(tableResponse.filtered);
-    }
-    else if (sourceResponse !== null) {
-        total = BigInt(sourceResponse.total);
-        filtered = BigInt(sourceResponse.filtered);
-    }
-    else if (callersFlamegraphResponse !== null) {
-        total = BigInt(callersFlamegraphResponse.total);
-        filtered = BigInt(callersFlamegraphResponse.filtered);
-    }
-    else if (calleesFlamegraphResponse !== null) {
-        total = BigInt(calleesFlamegraphResponse.total);
-        filtered = BigInt(calleesFlamegraphResponse.filtered);
-    }
-    return (_jsx(ProfileView, { total: total, filtered: filtered, flamegraphData: {
-            loading: flamegraphLoading && profileMetadataLoading,
-            arrow: flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                ? flamegraphResponse?.report?.flamegraphArrow
-                : undefined,
-            total: BigInt(flamegraphResponse?.total ?? '0'),
-            filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
-            error: flamegraphError ?? profileMetadataError,
-            metadataMappingFiles: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
-                ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
-                : undefined,
-            metadataLabels: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
-                ? profileMetadataResponse?.report?.profileMetadata?.labels
-                : undefined,
-            metadataLoading: profileMetadataLoading,
-            metadataRefetch,
-        }, topTableData: {
-            loading: tableLoading,
-            arrow: tableResponse?.report.oneofKind === 'tableArrow'
-                ? tableResponse.report.tableArrow
-                : undefined,
-            error: tableError,
-            unit: tableResponse?.report.oneofKind === 'tableArrow'
-                ? tableResponse.report.tableArrow.unit
-                : '',
-        }, sourceData: {
-            loading: sourceLoading,
-            data: sourceResponse?.report.oneofKind === 'source'
-                ? sourceResponse?.report?.source
-                : undefined,
-            error: sourceError,
-        }, sandwichData: {
-            callees: {
-                arrow: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                    ? calleesFlamegraphResponse?.report?.flamegraphArrow
-                    : undefined,
-                loading: calleesFlamegraphLoading,
-                error: calleesFlamegraphError,
-                total: BigInt(calleesFlamegraphResponse?.total ?? '0'),
-                filtered: BigInt(calleesFlamegraphResponse?.filtered ?? '0'),
-                metadataMappingFiles: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
-                    ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
-                    : undefined,
-                metadataLoading: profileMetadataLoading,
-            },
-            callers: {
-                arrow: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                    ? callersFlamegraphResponse?.report?.flamegraphArrow
-                    : undefined,
-                loading: callersFlamegraphLoading,
-                error: callersFlamegraphError,
-                total: BigInt(callersFlamegraphResponse?.total ?? '0'),
-                filtered: BigInt(callersFlamegraphResponse?.filtered ?? '0'),
-                metadataMappingFiles: profileMetadataResponse?.report.oneofKind === 'profileMetadata'
-                    ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
-                    : undefined,
-                metadataLoading: profileMetadataLoading,
-            },
-        }, samplesData: samplesData, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading, showVisualizationSelector: showVisualizationSelector, onSwitchToFifteenMinutes: onSwitchToFifteenMinutes }));
+  }();
+
+  // TODO: Refactor how we get responses such that we have a single response,
+  //  regardless of the report type.
+  var total = BigInt(0);
+  var filtered = BigInt(0);
+  if (flamegraphResponse !== null) {
+    total = BigInt(flamegraphResponse.total);
+    filtered = BigInt(flamegraphResponse.filtered);
+  } else if (tableResponse !== null) {
+    total = BigInt(tableResponse.total);
+    filtered = BigInt(tableResponse.filtered);
+  } else if (sourceResponse !== null) {
+    total = BigInt(sourceResponse.total);
+    filtered = BigInt(sourceResponse.filtered);
+  } else if (callersFlamegraphResponse !== null) {
+    total = BigInt(callersFlamegraphResponse.total);
+    filtered = BigInt(callersFlamegraphResponse.filtered);
+  } else if (calleesFlamegraphResponse !== null) {
+    total = BigInt(calleesFlamegraphResponse.total);
+    filtered = BigInt(calleesFlamegraphResponse.filtered);
+  }
+  return /*#__PURE__*/_jsx(ProfileView, {
+    total: total,
+    filtered: filtered,
+    flamegraphData: {
+      loading: flamegraphLoading && profileMetadataLoading,
+      arrow: (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraphArrow' ? flamegraphResponse === null || flamegraphResponse === void 0 || (_flamegraphResponse$r = flamegraphResponse.report) === null || _flamegraphResponse$r === void 0 ? void 0 : _flamegraphResponse$r.flamegraphArrow : undefined,
+      total: BigInt((_flamegraphResponse$t = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.total) !== null && _flamegraphResponse$t !== void 0 ? _flamegraphResponse$t : '0'),
+      filtered: BigInt((_flamegraphResponse$f = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.filtered) !== null && _flamegraphResponse$f !== void 0 ? _flamegraphResponse$f : '0'),
+      error: flamegraphError !== null && flamegraphError !== void 0 ? flamegraphError : profileMetadataError,
+      metadataMappingFiles: (profileMetadataResponse === null || profileMetadataResponse === void 0 ? void 0 : profileMetadataResponse.report.oneofKind) === 'profileMetadata' ? profileMetadataResponse === null || profileMetadataResponse === void 0 || (_profileMetadataRespo = profileMetadataResponse.report) === null || _profileMetadataRespo === void 0 || (_profileMetadataRespo = _profileMetadataRespo.profileMetadata) === null || _profileMetadataRespo === void 0 ? void 0 : _profileMetadataRespo.mappingFiles : undefined,
+      metadataLabels: (profileMetadataResponse === null || profileMetadataResponse === void 0 ? void 0 : profileMetadataResponse.report.oneofKind) === 'profileMetadata' ? profileMetadataResponse === null || profileMetadataResponse === void 0 || (_profileMetadataRespo2 = profileMetadataResponse.report) === null || _profileMetadataRespo2 === void 0 || (_profileMetadataRespo2 = _profileMetadataRespo2.profileMetadata) === null || _profileMetadataRespo2 === void 0 ? void 0 : _profileMetadataRespo2.labels : undefined,
+      metadataLoading: profileMetadataLoading,
+      metadataRefetch: metadataRefetch
+    },
+    topTableData: {
+      loading: tableLoading,
+      arrow: (tableResponse === null || tableResponse === void 0 ? void 0 : tableResponse.report.oneofKind) === 'tableArrow' ? tableResponse.report.tableArrow : undefined,
+      error: tableError,
+      unit: (tableResponse === null || tableResponse === void 0 ? void 0 : tableResponse.report.oneofKind) === 'tableArrow' ? tableResponse.report.tableArrow.unit : ''
+    },
+    sourceData: {
+      loading: sourceLoading,
+      data: (sourceResponse === null || sourceResponse === void 0 ? void 0 : sourceResponse.report.oneofKind) === 'source' ? sourceResponse === null || sourceResponse === void 0 || (_sourceResponse$repor = sourceResponse.report) === null || _sourceResponse$repor === void 0 ? void 0 : _sourceResponse$repor.source : undefined,
+      error: sourceError
+    },
+    sandwichData: {
+      callees: {
+        arrow: (calleesFlamegraphResponse === null || calleesFlamegraphResponse === void 0 ? void 0 : calleesFlamegraphResponse.report.oneofKind) === 'flamegraphArrow' ? calleesFlamegraphResponse === null || calleesFlamegraphResponse === void 0 || (_calleesFlamegraphRes = calleesFlamegraphResponse.report) === null || _calleesFlamegraphRes === void 0 ? void 0 : _calleesFlamegraphRes.flamegraphArrow : undefined,
+        loading: calleesFlamegraphLoading,
+        error: calleesFlamegraphError,
+        total: BigInt((_calleesFlamegraphRes2 = calleesFlamegraphResponse === null || calleesFlamegraphResponse === void 0 ? void 0 : calleesFlamegraphResponse.total) !== null && _calleesFlamegraphRes2 !== void 0 ? _calleesFlamegraphRes2 : '0'),
+        filtered: BigInt((_calleesFlamegraphRes3 = calleesFlamegraphResponse === null || calleesFlamegraphResponse === void 0 ? void 0 : calleesFlamegraphResponse.filtered) !== null && _calleesFlamegraphRes3 !== void 0 ? _calleesFlamegraphRes3 : '0'),
+        metadataMappingFiles: (profileMetadataResponse === null || profileMetadataResponse === void 0 ? void 0 : profileMetadataResponse.report.oneofKind) === 'profileMetadata' ? profileMetadataResponse === null || profileMetadataResponse === void 0 || (_profileMetadataRespo3 = profileMetadataResponse.report) === null || _profileMetadataRespo3 === void 0 || (_profileMetadataRespo3 = _profileMetadataRespo3.profileMetadata) === null || _profileMetadataRespo3 === void 0 ? void 0 : _profileMetadataRespo3.mappingFiles : undefined,
+        metadataLoading: profileMetadataLoading
+      },
+      callers: {
+        arrow: (callersFlamegraphResponse === null || callersFlamegraphResponse === void 0 ? void 0 : callersFlamegraphResponse.report.oneofKind) === 'flamegraphArrow' ? callersFlamegraphResponse === null || callersFlamegraphResponse === void 0 || (_callersFlamegraphRes = callersFlamegraphResponse.report) === null || _callersFlamegraphRes === void 0 ? void 0 : _callersFlamegraphRes.flamegraphArrow : undefined,
+        loading: callersFlamegraphLoading,
+        error: callersFlamegraphError,
+        total: BigInt((_callersFlamegraphRes2 = callersFlamegraphResponse === null || callersFlamegraphResponse === void 0 ? void 0 : callersFlamegraphResponse.total) !== null && _callersFlamegraphRes2 !== void 0 ? _callersFlamegraphRes2 : '0'),
+        filtered: BigInt((_callersFlamegraphRes3 = callersFlamegraphResponse === null || callersFlamegraphResponse === void 0 ? void 0 : callersFlamegraphResponse.filtered) !== null && _callersFlamegraphRes3 !== void 0 ? _callersFlamegraphRes3 : '0'),
+        metadataMappingFiles: (profileMetadataResponse === null || profileMetadataResponse === void 0 ? void 0 : profileMetadataResponse.report.oneofKind) === 'profileMetadata' ? profileMetadataResponse === null || profileMetadataResponse === void 0 || (_profileMetadataRespo4 = profileMetadataResponse.report) === null || _profileMetadataRespo4 === void 0 || (_profileMetadataRespo4 = _profileMetadataRespo4.profileMetadata) === null || _profileMetadataRespo4 === void 0 ? void 0 : _profileMetadataRespo4.mappingFiles : undefined,
+        metadataLoading: profileMetadataLoading
+      }
+    },
+    samplesData: samplesData,
+    profileSource: profileSource,
+    queryClient: queryClient,
+    onDownloadPProf: function onDownloadPProf() {
+      return void downloadPProfClick();
+    },
+    pprofDownloading: pprofDownloading,
+    showVisualizationSelector: showVisualizationSelector,
+    onSwitchToFifteenMinutes: onSwitchToFifteenMinutes
+  });
 };
-export default ProfileViewWithData;
+export default ProfileViewWithData;