@parca/profile 0.16.350 → 0.16.352

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.352 (2024-02-29)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.351](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.350...@parca/profile@0.16.351) (2024-02-28)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.350 (2024-02-28)
 
 # 0.21.0 (2024-02-27)

package/dist/ProfileExplorer/index.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
 import { DateTimeRange, KeyDownProvider, useParcaContext } from '@parca/components';
-import { store } from '@parca/store';
+import { createStore } from '@parca/store';
 import { capitalizeOnlyFirstLetter } from '@parca/utilities';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { useProfileTypes } from '../ProfileSelector';
@@ -258,7 +258,8 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
     return (_jsx(ProfileExplorerCompare, { queryClient: queryClient, queryA: queryA, queryB: queryB, profileA: profileA, profileB: profileB, selectQueryA: selectQueryA, selectQueryB: selectQueryB, selectProfileA: selectProfileA, selectProfileB: selectProfileB, closeProfile: closeProfile, navigateTo: navigateTo }));
 };
 const ProfileExplorer = ({ queryClient, queryParams, navigateTo, }) => {
-    const { store: reduxStore } = store();
+    const { additionalFlamegraphColorProfiles } = useParcaContext();
+    const { store: reduxStore } = createStore(additionalFlamegraphColorProfiles);
     return (_jsx(Provider, { store: reduxStore, children: _jsx(KeyDownProvider, { children: _jsx(ProfileExplorerApp, { queryClient: queryClient, queryParams: queryParams, navigateTo: navigateTo }) }) }));
 };
 export default ProfileExplorer;

package/dist/ProfileIcicleGraph/IcicleGraph/useNodeColor.js

@@ -11,11 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useMemo } from 'react';
-import { EVERYTHING_ELSE, selectDarkMode, selectStackColors, useAppSelector } from '@parca/store';
-import { COLOR_PROFILES, diffColor } from '@parca/utilities';
+import { EVERYTHING_ELSE, selectColorProfiles, selectDarkMode, selectStackColors, useAppSelector, } from '@parca/store';
+import { diffColor } from '@parca/utilities';
 const useNodeColor = ({ data, compareMode }) => {
     const colors = useAppSelector(selectStackColors);
     const isDarkMode = useAppSelector(selectDarkMode);
+    const colorProfiles = useAppSelector(selectColorProfiles);
     const color = useMemo(() => {
         if (compareMode) {
             const diff = data.diff;
@@ -23,9 +24,9 @@ const useNodeColor = ({ data, compareMode }) => {
             return diffColor(diff, cumulative, isDarkMode);
         }
         const color = colors[data.feature ?? EVERYTHING_ELSE] ??
-            (!isDarkMode ? COLOR_PROFILES.default.colors[0][0] : COLOR_PROFILES.default.colors[0][1]);
+            (!isDarkMode ? colorProfiles.default.colors[0][0] : colorProfiles.default.colors[0][1]);
         return color;
-    }, [data, colors, isDarkMode, compareMode]);
+    }, [data, colors, isDarkMode, compareMode, colorProfiles]);
     return color;
 };
 export default useNodeColor;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -14,9 +14,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { useContextMenu } from 'react-contexify';
-import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { getColorForFeature, getColorForSimilarNodes, selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector, } from '@parca/store';
-import { getLastItem, scaleLinear, selectQueryParam, } from '@parca/utilities';
+import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
+import { getColorForFeature, selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector, } from '@parca/store';
+import { getLastItem, scaleLinear, selectQueryParam } from '@parca/utilities';
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
@@ -42,7 +42,6 @@ export const FIELD_DIFF = 'diff';
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, sampleUnit, navigateTo, sortBy, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const dispatch = useAppDispatch();
-    const [colorProfile] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
     const [dockedMetainfo] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
     const isDarkMode = useAppSelector(selectDarkMode);
@@ -58,7 +57,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     const currentSearchString = selectQueryParam('search_string') ?? '';
     const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
-    const colorForSimilarNodes = getColorForSimilarNodes(colorProfile);
+    const currentColorProfile = useCurrentColorProfile();
+    const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
     const mappings = useMemo(() => {
         // Read the mappings from the dictionary that contains all mapping strings.
         // This is great, as might only have a dozen or so mappings,
@@ -110,10 +110,10 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     const mappingColors = useMemo(() => {
         const colors = {};
         Object.entries(mappingFeatures).forEach(([_, feature]) => {
-            colors[feature.name] = getColorForFeature(feature.name, isDarkMode, colorProfile);
+            colors[feature.name] = getColorForFeature(feature.name, isDarkMode, currentColorProfile.colors);
         });
         return colors;
-    }, [colorProfile, isDarkMode, mappingFeatures]);
+    }, [isDarkMode, mappingFeatures, currentColorProfile]);
     useEffect(() => {
         if (ref.current != null) {
             setHeight(ref?.current.getBoundingClientRect().height);

package/dist/SourceView/Highlighter.js

@@ -18,6 +18,7 @@ import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
 import { atomOneDark, atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { Tooltip } from 'react-tooltip';
 import { useParcaContext } from '@parca/components';
+import { valueFormatter } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { LineNo } from './LineNo';
 import { langaugeFromFile } from './lang-detector';
@@ -49,9 +50,8 @@ const LineProfileMetadata = ({ value, total, filtered, }) => {
     }
     const unfilteredPercent = (Number(value) / Number(total + filtered)) * 100;
     const filteredPercent = (Number(value) / Number(total)) * 100;
-    const valueString = value.toString();
-    const valueWithUnit = `${valueString}${sampleUnit}`;
-    return (_jsxs(_Fragment, { children: [_jsx("p", { className: cx('w- flex justify-end overflow-hidden text-ellipsis whitespace-nowrap', commonClasses), style: { backgroundColor: `rgba(236, 151, 6, ${intensityScale(unfilteredPercent)})` }, "data-tooltip-id": id, "data-tooltip-content": `${valueWithUnit} (${unfilteredPercent.toFixed(2)}%${filtered > 0n ? ` / ${filteredPercent.toFixed(2)}%` : ''})`, children: valueString }), _jsx(Tooltip, { id: id })] }));
+    const valueWithUnit = valueFormatter(value, sampleUnit, 1, true);
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: cx('w- flex justify-end overflow-hidden text-ellipsis whitespace-nowrap', commonClasses), style: { backgroundColor: `rgba(236, 151, 6, ${intensityScale(unfilteredPercent)})` }, "data-tooltip-id": id, "data-tooltip-content": `${valueWithUnit} (${unfilteredPercent.toFixed(2)}%${filtered > 0n ? ` / ${filteredPercent.toFixed(2)}%` : ''})`, children: valueWithUnit }), _jsx(Tooltip, { id: id })] }));
 };
 const charsToWidth = (chars) => {
     return charsToWidthMap[chars];

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.350",
+  "version": "0.16.352",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.106",
-    "@parca/components": "^0.16.258",
+    "@parca/components": "^0.16.260",
     "@parca/dynamicsize": "^0.16.61",
-    "@parca/hooks": "^0.0.44",
+    "@parca/hooks": "^0.0.45",
     "@parca/parser": "^0.16.69",
-    "@parca/store": "^0.16.132",
-    "@parca/utilities": "^0.0.60",
+    "@parca/store": "^0.16.134",
+    "@parca/utilities": "^0.0.62",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.8",
     "apache-arrow": "^12.0.0",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "4ca1395ad920b41cf74465ab5679796f98a6f930"
+  "gitHead": "21d9b84fb528ea62b8d3c931671264371aca90c2"
 }

package/src/ProfileExplorer/index.tsx

@@ -17,7 +17,7 @@ import {Provider} from 'react-redux';
 
 import {QueryServiceClient} from '@parca/client';
 import {DateTimeRange, KeyDownProvider, useParcaContext} from '@parca/components';
-import {store} from '@parca/store';
+import {createStore} from '@parca/store';
 import {capitalizeOnlyFirstLetter, type NavigateFunction} from '@parca/utilities';
 
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
@@ -406,7 +406,8 @@ const ProfileExplorer = ({
   queryParams,
   navigateTo,
 }: ProfileExplorerProps): JSX.Element => {
-  const {store: reduxStore} = store();
+  const {additionalFlamegraphColorProfiles} = useParcaContext();
+  const {store: reduxStore} = createStore(additionalFlamegraphColorProfiles);
 
   return (
     <Provider store={reduxStore}>

package/src/ProfileIcicleGraph/IcicleGraph/useNodeColor.ts

@@ -13,8 +13,14 @@
 
 import {useMemo} from 'react';
 
-import {EVERYTHING_ELSE, selectDarkMode, selectStackColors, useAppSelector} from '@parca/store';
-import {COLOR_PROFILES, diffColor} from '@parca/utilities';
+import {
+  EVERYTHING_ELSE,
+  selectColorProfiles,
+  selectDarkMode,
+  selectStackColors,
+  useAppSelector,
+} from '@parca/store';
+import {diffColor} from '@parca/utilities';
 
 import type {ColoredFlamegraphNode} from './useColoredGraph';
 
@@ -26,6 +32,7 @@ interface Props {
 const useNodeColor = ({data, compareMode}: Props): string => {
   const colors = useAppSelector(selectStackColors);
   const isDarkMode = useAppSelector(selectDarkMode);
+  const colorProfiles = useAppSelector(selectColorProfiles);
 
   const color: string = useMemo(() => {
     if (compareMode) {
@@ -36,10 +43,10 @@ const useNodeColor = ({data, compareMode}: Props): string => {
 
     const color =
       colors[data.feature ?? EVERYTHING_ELSE] ??
-      (!isDarkMode ? COLOR_PROFILES.default.colors[0][0] : COLOR_PROFILES.default.colors[0][1]);
+      (!isDarkMode ? colorProfiles.default.colors[0][0] : colorProfiles.default.colors[0][1]);
 
     return color;
-  }, [data, colors, isDarkMode, compareMode]);
+  }, [data, colors, isDarkMode, compareMode, colorProfiles]);
 
   return color;
 };

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -17,22 +17,15 @@ import {Dictionary, Table, Vector, tableFromIPC} from 'apache-arrow';
 import {useContextMenu} from 'react-contexify';
 
 import {FlamegraphArrow} from '@parca/client';
-import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {
   getColorForFeature,
-  getColorForSimilarNodes,
   selectDarkMode,
   setHoveringNode,
   useAppDispatch,
   useAppSelector,
 } from '@parca/store';
-import {
-  getLastItem,
-  scaleLinear,
-  selectQueryParam,
-  type ColorProfileName,
-  type NavigateFunction,
-} from '@parca/utilities';
+import {getLastItem, scaleLinear, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
@@ -83,9 +76,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
 }: IcicleGraphArrowProps): React.JSX.Element {
   const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
   const dispatch = useAppDispatch();
-  const [colorProfile] = useUserPreference<ColorProfileName>(
-    USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
-  );
   const [highlightSimilarStacksPreference] = useUserPreference<boolean>(
     USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key
   );
@@ -106,7 +96,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
   const {compareMode} = useProfileViewContext();
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
-  const colorForSimilarNodes = getColorForSimilarNodes(colorProfile);
+  const currentColorProfile = useCurrentColorProfile();
+  const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
 
   const mappings = useMemo(() => {
     // Read the mappings from the dictionary that contains all mapping strings.
@@ -165,10 +156,14 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   const mappingColors = useMemo(() => {
     const colors: mappingColors = {};
     Object.entries(mappingFeatures).forEach(([_, feature]) => {
-      colors[feature.name] = getColorForFeature(feature.name, isDarkMode, colorProfile);
+      colors[feature.name] = getColorForFeature(
+        feature.name,
+        isDarkMode,
+        currentColorProfile.colors
+      );
     });
     return colors;
-  }, [colorProfile, isDarkMode, mappingFeatures]);
+  }, [isDarkMode, mappingFeatures, currentColorProfile]);
 
   useEffect(() => {
     if (ref.current != null) {

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-10M.benchmark.tsx

@@ -14,11 +14,11 @@
 import React from 'react';
 import ProfileIcicleGraph from '..';
 import {Provider} from 'react-redux';
-import {store} from '@parca/store';
+import {createStore} from '@parca/store';
 import parca10mGraphData from './benchdata/parca-10m.json';
 import {Flamegraph} from '@parca/client';
 
-const {store: reduxStore} = store();
+const {store: reduxStore} = createStore();
 
 const parca10mGraph = parca10mGraphData as Flamegraph;
 

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-1M.benchmark.tsx

@@ -14,11 +14,11 @@
 import React from 'react';
 import ProfileIcicleGraph from '../';
 import {Provider} from 'react-redux';
-import {store} from '@parca/store';
+import {createStore} from '@parca/store';
 import {Flamegraph} from '@parca/client';
 import parca1mGraphData from './benchdata/parca-1m.json';
 
-const {store: reduxStore} = store();
+const {store: reduxStore} = createStore();
 
 const parca1mGraph = parca1mGraphData as Flamegraph;
 

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-20M.benchmark.tsx

@@ -14,11 +14,11 @@
 import React from 'react';
 import ProfileIcicleGraph from '..';
 import {Provider} from 'react-redux';
-import {store} from '@parca/store';
+import {createStore} from '@parca/store';
 import parca20mGraphData from './benchdata/parca-20m.json';
 import {Flamegraph} from '@parca/client';
 
-const {store: reduxStore} = store();
+const {store: reduxStore} = createStore();
 
 const parca20mGraph = parca20mGraphData as Flamegraph;
 

package/src/SourceView/Highlighter.tsx

@@ -21,6 +21,7 @@ import {atomOneDark, atomOneLight} from 'react-syntax-highlighter/dist/esm/style
 import {Tooltip} from 'react-tooltip';
 
 import {useParcaContext} from '@parca/components';
+import {valueFormatter} from '@parca/utilities';
 
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {LineNo} from './LineNo';
@@ -80,8 +81,7 @@ const LineProfileMetadata = ({
   const unfilteredPercent = (Number(value) / Number(total + filtered)) * 100;
   const filteredPercent = (Number(value) / Number(total)) * 100;
 
-  const valueString = value.toString();
-  const valueWithUnit = `${valueString}${sampleUnit}`;
+  const valueWithUnit = valueFormatter(value, sampleUnit, 1, true);
 
   return (
     <>
@@ -96,7 +96,7 @@ const LineProfileMetadata = ({
           filtered > 0n ? ` / ${filteredPercent.toFixed(2)}%` : ''
         })`}
       >
-        {valueString}
+        {valueWithUnit}
       </p>
       <Tooltip id={id} />
     </>

package/src/TopTable/benchmarks/TopTable-10M.benchmark.tsx

@@ -14,11 +14,11 @@
 import React from 'react';
 import TopTable from '..';
 import {Provider} from 'react-redux';
-import {store} from '@parca/store';
+import {createStore} from '@parca/store';
 import parca10mGraphData from './benchdata/parca-toptable-10m.json';
 import {Top} from '@parca/client';
 
-const {store: reduxStore} = store();
+const {store: reduxStore} = createStore();
 
 const parca10mGraph = parca10mGraphData as Top;
 

package/src/TopTable/benchmarks/TopTable-1M.benchmark.tsx

@@ -14,11 +14,11 @@
 import React from 'react';
 import TopTable from '..';
 import {Provider} from 'react-redux';
-import {store} from '@parca/store';
+import {createStore} from '@parca/store';
 import {Top} from '@parca/client';
 import parca1mGraphData from './benchdata/parca-toptable-1m.json';
 
-const {store: reduxStore} = store();
+const {store: reduxStore} = createStore();
 
 const parca1mGraph = parca1mGraphData as Top;
 

package/src/TopTable/benchmarks/TopTable-20M.benchmark.tsx

@@ -14,11 +14,11 @@
 import React from 'react';
 import TopTable from '..';
 import {Provider} from 'react-redux';
-import {store} from '@parca/store';
+import {createStore} from '@parca/store';
 import parca20mGraphData from './benchdata/parca-toptable-20m.json';
 import {Top} from '@parca/client';
 
-const {store: reduxStore} = store();
+const {store: reduxStore} = createStore();
 
 const parca20mGraph = parca20mGraphData as Top;