@parca/profile 0.16.247 → 0.16.249

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.249](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.248...@parca/profile@0.16.249) (2023-09-06)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.248](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.247...@parca/profile@0.16.248) (2023-09-05)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.247 (2023-09-05)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.js

@@ -34,8 +34,8 @@ const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, le
         return _jsx(_Fragment, {});
     }
     const locationAddress = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
-    const cumulative = table.getChild(FIELD_CUMULATIVE)?.get(row) ?? 0n;
-    const diff = table.getChild(FIELD_DIFF)?.get(row) ?? 0n;
+    const cumulative = BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row)) ?? 0n;
+    const diff = BigInt(table.getChild(FIELD_DIFF)?.get(row)) ?? 0n;
     const onCopy = () => {
         setIsCopied(true);
         if (timeoutHandle !== null) {

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -32,8 +32,8 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ tab
     let childrenCumulative = BigInt(0);
     const childrenElements = [];
     childRows.forEach((child, i) => {
-        const xStart = Math.floor(xScale(childrenCumulative));
-        const c = cumulatives?.get(child);
+        const xStart = Math.floor(xScale(BigInt(childrenCumulative)));
+        const c = BigInt(cumulatives?.get(child));
         childrenCumulative += c;
         childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode }, `node-${level}-${i}`));
     });
@@ -58,8 +58,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
     // get the actual values from the columns
     const mappingFile = arrowToString(mappingColumn?.get(row));
     const functionName = arrowToString(functionNameColumn?.get(row));
-    const cumulative = cumulativeColumn?.get(row);
-    const diff = diffColumn?.get(row);
+    const cumulative = BigInt(cumulativeColumn?.get(row));
+    const diff = BigInt(diffColumn?.get(row));
     const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
     // TODO: Maybe it's better to pass down the sorter function as prop instead of figuring this out here.
     switch (sortBy) {
@@ -125,11 +125,11 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
     const nextLevel = level + 1;
     const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
     const newXScale = nextCurPath.length === 0 && curPath.length === 1
-        ? scaleLinear([0n, cumulative], [0, totalWidth])
+        ? scaleLinear([0n, BigInt(cumulative)], [0, totalWidth])
         : xScale;
     const width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
         ? totalWidth
-        : xScale(cumulative);
+        : xScale(BigInt(cumulative));
     const { isHighlightEnabled = false, isHighlighted = false } = useMemo(() => {
         if (searchString === undefined || searchString === '') {
             return { isHighlightEnabled: false };

package/dist/ProfileViewWithData.js

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
-import { USER_PREFERENCES, useUIFeatureFlag, useUserPreference } from '@parca/hooks';
 import { saveAsBlob } from '@parca/utilities';
 import { FIELD_FUNCTION_NAME } from './ProfileIcicleGraph/IcicleGraphArrow';
 import { ProfileView } from './ProfileView';
@@ -26,26 +25,18 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
     const [sourceBuildID] = useURLState({ param: 'source_buildid', navigateTo });
     const [sourceFilename] = useURLState({ param: 'source_filename', navigateTo });
     const [groupBy = [FIELD_FUNCTION_NAME]] = useURLState({ param: 'group_by', navigateTo });
-    const [enableTrimming] = useUserPreference(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
-    const [arrowFlamegraphEnabled] = useUIFeatureFlag('flamegraph-arrow');
     const [pprofDownloading, setPprofDownloading] = useState(false);
     const nodeTrimThreshold = useMemo(() => {
-        if (!enableTrimming) {
-            return 0;
-        }
         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;
-    }, [enableTrimming]);
-    const reportType = arrowFlamegraphEnabled
-        ? QueryRequest_ReportType.FLAMEGRAPH_ARROW
-        : QueryRequest_ReportType.FLAMEGRAPH_TABLE;
+    }, []);
     // make sure we get a string[]
     const groupByParam = typeof groupBy === 'string' ? [groupBy] : groupBy;
-    const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, reportType, {
+    const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
         skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold,
         groupBy: groupByParam,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.247",
+  "version": "0.16.249",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.86",
-    "@parca/components": "^0.16.188",
+    "@parca/components": "^0.16.189",
     "@parca/dynamicsize": "^0.16.54",
     "@parca/hooks": "^0.0.21",
     "@parca/parser": "^0.16.55",
@@ -49,5 +49,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "2f5852cd7556864b911a69c2d5341cc4f0bb02be"
+  "gitHead": "05cf63fe3be4153289f20f8c92b1a82add88339c"
 }

package/src/GraphTooltipArrow/Content.tsx

@@ -74,8 +74,8 @@ const GraphTooltipArrowContent = ({
   }
 
   const locationAddress: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
-  const cumulative: bigint = table.getChild(FIELD_CUMULATIVE)?.get(row) ?? 0n;
-  const diff: bigint = table.getChild(FIELD_DIFF)?.get(row) ?? 0n;
+  const cumulative: bigint = BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row)) ?? 0n;
+  const diff: bigint = BigInt(table.getChild(FIELD_DIFF)?.get(row)) ?? 0n;
 
   const onCopy = (): void => {
     setIsCopied(true);

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -88,8 +88,8 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
   let childrenCumulative = BigInt(0);
   const childrenElements: ReactNode[] = [];
   childRows.forEach((child, i) => {
-    const xStart = Math.floor(xScale(childrenCumulative));
-    const c: bigint = cumulatives?.get(child);
+    const xStart = Math.floor(xScale(BigInt(childrenCumulative)));
+    const c = BigInt(cumulatives?.get(child));
     childrenCumulative += c;
 
     childrenElements.push(
@@ -190,8 +190,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   // get the actual values from the columns
   const mappingFile: string | null = arrowToString(mappingColumn?.get(row));
   const functionName: string | null = arrowToString(functionNameColumn?.get(row));
-  const cumulative: bigint = cumulativeColumn?.get(row);
-  const diff: bigint | null = diffColumn?.get(row);
+  const cumulative = BigInt(cumulativeColumn?.get(row));
+  const diff: bigint | null = BigInt(diffColumn?.get(row));
   const childRows: number[] = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
 
   // TODO: Maybe it's better to pass down the sorter function as prop instead of figuring this out here.
@@ -260,13 +260,13 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
   const newXScale =
     nextCurPath.length === 0 && curPath.length === 1
-      ? scaleLinear([0n, cumulative], [0, totalWidth])
+      ? scaleLinear([0n, BigInt(cumulative)], [0, totalWidth])
       : xScale;
 
   const width: number =
     nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
       ? totalWidth
-      : xScale(cumulative);
+      : xScale(BigInt(cumulative));
 
   const {isHighlightEnabled = false, isHighlighted = false} = useMemo(() => {
     if (searchString === undefined || searchString === '') {

package/src/ProfileViewWithData.tsx

@@ -15,7 +15,6 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata, useParcaContext, useURLState} from '@parca/components';
-import {USER_PREFERENCES, useUIFeatureFlag, useUserPreference} from '@parca/hooks';
 import {saveAsBlob, type NavigateFunction} from '@parca/utilities';
 
 import {FIELD_FUNCTION_NAME} from './ProfileIcicleGraph/IcicleGraphArrow';
@@ -44,26 +43,16 @@ export const ProfileViewWithData = ({
   ];
   const [groupBy = [FIELD_FUNCTION_NAME]] = useURLState({param: 'group_by', navigateTo});
 
-  const [enableTrimming] = useUserPreference<boolean>(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
-  const [arrowFlamegraphEnabled] = useUIFeatureFlag('flamegraph-arrow');
   const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
   const nodeTrimThreshold = useMemo(() => {
-    if (!enableTrimming) {
-      return 0;
-    }
-
     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;
-  }, [enableTrimming]);
-
-  const reportType = arrowFlamegraphEnabled
-    ? QueryRequest_ReportType.FLAMEGRAPH_ARROW
-    : QueryRequest_ReportType.FLAMEGRAPH_TABLE;
+  }, []);
 
   // make sure we get a string[]
   const groupByParam: string[] = typeof groupBy === 'string' ? [groupBy] : groupBy;
@@ -72,7 +61,7 @@ export const ProfileViewWithData = ({
     isLoading: flamegraphLoading,
     response: flamegraphResponse,
     error: flamegraphError,
-  } = useQuery(queryClient, profileSource, reportType, {
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
     skip: !dashboardItems.includes('icicle'),
     nodeTrimThreshold,
     groupBy: groupByParam,