@parca/profile 0.16.351 → 0.16.353

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.353 (2024-03-06)
+
+**Note:** Version bump only for package @parca/profile
+
+## 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

package/dist/Callgraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     data: CallgraphType;

package/dist/GraphTooltip/ExpandOnHoverValue.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string | number | undefined;
     displayValue?: string | number | undefined;

package/dist/GraphTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CallgraphNode, CallgraphNodeMeta, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Table } from 'apache-arrow';
 interface Props {
     table: Table<any>;

package/dist/GraphTooltipArrow/ExpandOnHoverValue.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string | number | undefined;
     displayValue?: string | number | undefined;

package/dist/MatchersInput/SuggestionItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     isHighlighted: boolean;
     onHighlight: () => void;

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare class Suggestion {
     type: string;
     typeahead: string;

package/dist/MatchersInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 import { Query } from '@parca/parser';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/MetricsContextMenu/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HighlightedSeries } from '../';
 interface MetricsContextMenuProps {
     menuId: string;

package/dist/MetricsGraph/MetricsInfoPanel/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MetricsInfoPanelProps {
     isInfoPanelOpen: boolean;
     onInfoIconClick: () => void;

package/dist/MetricsGraph/MetricsTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HighlightedSeries } from '../';
 interface Props {
     x: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Label, MetricsSeries as MetricsSeriesPb } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
 import { MergedProfileSelection } from '..';

package/dist/MetricsSeries/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/utilities';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/utilities';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
 interface ProfileExplorerProps {

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/ActionButtons/GroupByDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const GroupByDropdown: ({ groupBy, toggleGroupBy, }: {
     groupBy: string[];
     toggleGroupBy: (key: string) => void;

package/dist/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const RuntimeFilterDropdown: ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }: {
     showRuntimeRuby: boolean;
     toggleShowRuntimeRuby: () => void;

package/dist/ProfileIcicleGraph/ActionButtons/SortBySelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const SortBySelect: ({ sortBy, setSortBy, compareMode, }: {
     sortBy: string;
     setSortBy: (key: string) => void;

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     navigateTo?: NavigateFunction;

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/ContextMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Table } from 'apache-arrow';
 import { type NavigateFunction } from '@parca/utilities';
 interface ContextMenuProps {

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/ProfileMetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { Label, QueryRangeResponse, QueryServiceClient } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileTypesResponse, QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Label, ProfileDiffSelection, QueryRequest } from '@parca/client';
 import { ProfileType, Query } from '@parca/parser';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 import { type SelectElement } from '@parca/components';

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/utilities';
 declare const FilterByFunctionButton: ({ navigateTo, }: {
     navigateTo: NavigateFunction | undefined;

package/dist/ProfileView/ViewSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     position: number;

package/dist/ProfileView/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType, Flamegraph, FlamegraphArrow, QueryServiceClient, Source, TableArrow, Top } from '@parca/client';
 import { ProfileSource } from '../ProfileSource';
 type NavigateFunction = (path: string, queryParams: any, options?: {

package/dist/ProfileViewWithData.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
 import { ProfileSource } from './ProfileSource';

package/dist/SourceView/Highlighter.js

@@ -14,8 +14,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useId, useMemo } from 'react';
 import cx from 'classnames';
 import { scaleLinear } from 'd3-scale';
-import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
-import { atomOneDark, atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import createElement from 'react-syntax-highlighter/dist/cjs/create-element';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/default-highlight';
+import { atomOneDark, atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { Tooltip } from 'react-tooltip';
 import { useParcaContext } from '@parca/components';
 import { valueFormatter } from '@parca/utilities';

package/dist/SourceView/LineNo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: number;
     isCurrent?: boolean;

package/dist/SourceView/lang-detector/index.js

@@ -10,7 +10,7 @@
 // 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 * as hljsLangs from 'react-syntax-highlighter/dist/esm/languages/hljs';
+import * as hljsLangs from 'react-syntax-highlighter/dist/cjs/languages/hljs';
 import _extLangMap from './ext-to-lang.json';
 const extLangMap = _extLangMap;
 export const langaugeFromFile = (file) => {

package/dist/Table/ColumnsVisibility.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type VisibilityState } from '@tanstack/react-table';
 import { ColumnDef } from '.';
 declare const ColumnsVisibility: ({ columns, visibility, setVisibility, }: {

package/dist/components/DiffLegend.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.351",
+  "version": "0.16.353",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.106",
-    "@parca/components": "^0.16.259",
+    "@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.133",
-    "@parca/utilities": "^0.0.61",
+    "@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": "f92df4afcaf89ccbf154cb3df4f9272b12b98622"
+  "gitHead": "b5d2f03ac76f9059da8ec256475545d0db0e11a8"
 }

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

@@ -16,8 +16,10 @@ import {MouseEventHandler, useId, useMemo} from 'react';
 import {Vector} from 'apache-arrow';
 import cx from 'classnames';
 import {scaleLinear} from 'd3-scale';
-import SyntaxHighlighter, {createElement, type createElementProps} from 'react-syntax-highlighter';
-import {atomOneDark, atomOneLight} from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import {type createElementProps} from 'react-syntax-highlighter';
+import createElement from 'react-syntax-highlighter/dist/cjs/create-element';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/default-highlight';
+import {atomOneDark, atomOneLight} from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import {Tooltip} from 'react-tooltip';
 
 import {useParcaContext} from '@parca/components';

package/src/SourceView/lang-detector/index.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as hljsLangs from 'react-syntax-highlighter/dist/esm/languages/hljs';
+import * as hljsLangs from 'react-syntax-highlighter/dist/cjs/languages/hljs';
 
 import _extLangMap from './ext-to-lang.json';
 

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;
 

package/typings.d.ts

@@ -13,4 +13,4 @@
 
 declare module '*.svg';
 declare module 'react-map-interaction';
-declare module 'react-syntax-highlighter/dist/esm/languages/hljs';
+declare module 'react-syntax-highlighter/dist/cjs/languages/hljs';