@parca/profile 0.16.302 → 0.16.304

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.304](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.303...@parca/profile@0.16.304) (2023-11-09)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.303 (2023-11-09)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.302](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.301...@parca/profile@0.16.302) (2023-11-07)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/index.js

@@ -17,7 +17,7 @@ import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
 import { useContextMenu } from 'react-contexify';
 import { DateTimeRange } from '@parca/components';
-import { formatDate, formatForTimespan, sanitizeHighlightedValues, valueFormatter, } from '@parca/utilities';
+import { formatDate, formatForTimespan, getPrecision, sanitizeHighlightedValues, valueFormatter, } from '@parca/utilities';
 import MetricsCircle from '../MetricsCircle';
 import MetricsSeries from '../MetricsSeries';
 import MetricsContextMenu from './MetricsContextMenu';
@@ -248,9 +248,17 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
     }
     return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, contextElement: graph.current, sampleUnit: sampleUnit, delta: isDeltaType })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
                     setHovering(true);
-                }, onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
-                                                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                    transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(d, sampleUnit, 1) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: yAxisLabel }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
+                }, onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(5).map((d, i, allTicks) => {
+                                            let decimals = 2;
+                                            const intervalBetweenTicks = allTicks[1] - allTicks[0];
+                                            if (intervalBetweenTicks < 1) {
+                                                const precision = getPrecision(intervalBetweenTicks);
+                                                decimals = precision;
+                                            }
+                                            return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
+                                                        /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                                                        transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(d, sampleUnit, decimals) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
+                                        }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: yAxisLabel }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
                                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
                                                     transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to)) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "lines fill-transparent", children: series.map((s, i) => (_jsx("g", { className: "line", children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
                                                 ? lineStrokeHover

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -15,6 +15,7 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { setHoveringNode, useAppDispatch } from '@parca/store';
 import { scaleLinear, selectQueryParam } from '@parca/utilities';
 import GraphTooltip from '../../GraphTooltip';
+import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';
@@ -25,7 +26,7 @@ export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, w
     const ref = useRef(null);
     const coloredGraph = useColoredGraph(graph);
     const currentSearchString = selectQueryParam('search_string') ?? '';
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     useEffect(() => {
         if (ref.current != null) {

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -20,6 +20,7 @@ import { getLastItem, scaleLinear, selectQueryParam, } from '@parca/utilities';
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
+import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
@@ -53,7 +54,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     const svg = useRef(null);
     const ref = useRef(null);
     const currentSearchString = selectQueryParam('search_string') ?? '';
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     const mappings = useMemo(() => {
         // Read the mappings from the dictionary that contains all mapping strings.

package/dist/ProfileIcicleGraph/index.js

@@ -16,7 +16,8 @@ import { Menu, Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { Button, Select, useParcaContext, useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { capitalizeOnlyFirstLetter, divide, selectQueryParam, } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
+import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './IcicleGraphArrow';
@@ -29,7 +30,7 @@ const ShowHideLegendButton = ({ navigateTo }) => {
         param: 'color_stack_legend',
         navigateTo,
     });
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = colorStackLegend === 'true';
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
     const setColorStackLegend = useCallback((value) => {
@@ -42,7 +43,7 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
         param: 'sort_by',
         navigateTo,
     });
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const [storeGroupBy = [FIELD_FUNCTION_NAME], setStoreGroupBy] = useURLState({
         param: 'group_by',
         navigateTo,
@@ -86,7 +87,7 @@ const RuntimeFilterDropdown = ({ showRuntimeRuby, toggleShowRuntimeRuby, showRun
 };
 const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }) {
     const { loader, onError, authenticationErrorMessage } = useParcaContext();
-    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const { compareMode } = useProfileViewContext();
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
         navigateTo,
@@ -132,7 +133,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsxs("div", { className: "relative", children: [compareMode && _jsx(DiffLegend, {}), _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
+    return (_jsxs("div", { className: "relative", children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
 };
 const groupByOptions = [
     {

package/dist/ProfileView/ProfileViewContext.d.ts

@@ -3,6 +3,7 @@ import { ProfileSource } from '../ProfileSource';
 interface Props {
     profileSource?: ProfileSource;
     sampleUnit: string;
+    compareMode: boolean;
 }
 export declare const defaultValue: Props;
 declare const ProfileViewContext: import("react").Context<Props>;

package/dist/ProfileView/ProfileViewContext.js

@@ -15,6 +15,7 @@ import { createContext, useContext } from 'react';
 export const defaultValue = {
     profileSource: undefined,
     sampleUnit: 'bytes',
+    compareMode: false,
 };
 const ProfileViewContext = createContext(defaultValue);
 export const ProfileViewContextProvider = ({ children, value, }) => {

package/dist/ProfileView/index.d.ts

@@ -47,5 +47,5 @@ export interface ProfileViewProps {
     onDownloadPProf: () => void;
     pprofDownloading?: boolean;
 }
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }: ProfileViewProps) => JSX.Element;
 export {};

package/dist/ProfileView/index.js

@@ -21,7 +21,7 @@ import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
 import { Button, ConditionalWrapper, KeyDownProvider, UserPreferences, useParcaContext, useURLState, } from '@parca/components';
 import { useContainerDimensions } from '@parca/hooks';
 import { selectDarkMode, useAppSelector } from '@parca/store';
-import { getNewSpanColor } from '@parca/utilities';
+import { getNewSpanColor, selectQueryParam } from '@parca/utilities';
 import { Callgraph } from '../';
 import { jsonToDot } from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
@@ -39,7 +39,7 @@ function arrayEquals(a, b) {
         a.length === b.length &&
         a.every((val, index) => val === b[index]));
 }
-export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }) => {
     const { ref, dimensions } = useContainerDimensions();
     const [curPath, setCurPath] = useState([]);
     const [rawDashboardItems = ['icicle'], setDashboardItems] = useURLState({
@@ -171,9 +171,11 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
     const profileSourceString = profileSource?.toString();
     const hasProfileSource = profileSource !== undefined && profileSourceString !== '';
     const headerParts = profileSourceString?.split('"') ?? [];
-    return (_jsx(KeyDownProvider, { children: _jsxs(ProfileViewContextProvider, { value: { profileSource, sampleUnit }, children: [_jsxs("div", { className: cx('mb-4 flex w-full items-center', hasProfileSource ? 'justify-between' : 'justify-end'), children: [hasProfileSource && (_jsxs("div", { className: "max-w-[300px]", children: [_jsx("div", { className: "text-sm font-medium capitalize", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs", children: headerParts.length > 1
+    const compareMode = compare === true ||
+        (selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true');
+    return (_jsx(KeyDownProvider, { children: _jsxs(ProfileViewContextProvider, { value: { profileSource, sampleUnit, compareMode }, children: [_jsxs("div", { className: cx('mb-4 flex w-full items-center', hasProfileSource ? 'justify-between' : 'justify-end'), children: [hasProfileSource && (_jsxs("div", { className: "max-w-[300px]", children: [_jsx("div", { className: "text-sm font-medium capitalize", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs", children: headerParts.length > 1
                                         ? headerParts[headerParts.length - 1].replace(/"/g, '')
-                                        : '' })] })), _jsxs("div", { className: "flex items-center md:justify-end gap-2 flex-wrap", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
+                                        : '' })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-2 md:justify-end", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
                                         e.preventDefault();
                                         onDownloadPProf();
                                     }, disabled: pprofDownloading, children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 })] })] }), _jsx("div", { className: "w-full", ref: ref, children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {

package/dist/Table/index.js

@@ -17,6 +17,7 @@ import { Icon } from '@iconify/react';
 import { tableFromIPC } from 'apache-arrow';
 import { Button, Table as TableComponent, useURLState } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
+import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { hexifyAddress } from '../utils';
 const FIELD_MAPPING_FILE = 'mapping_file';
 const FIELD_LOCATION_ADDRESS = 'location_address';
@@ -30,9 +31,8 @@ const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
 export const Table = React.memo(function Table({ data, total, filtered, sampleUnit: unit, navigateTo, loading, currentSearchString, setActionButtons, }) {
     const router = parseParams(window?.location.search);
     const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
-    const [rawcompareMode] = useURLState({ param: 'compare_a' });
     const [filterByFunctionInput] = useURLState({ param: 'filter_by_function' });
-    const compareMode = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+    const { compareMode } = useProfileViewContext();
     const dashboardItems = useMemo(() => {
         if (rawDashboardItems !== undefined) {
             return rawDashboardItems;

package/dist/TopTable/index.js

@@ -15,6 +15,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { createColumnHelper } from '@tanstack/react-table';
 import { Button, Table, useURLState } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
+import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { hexifyAddress } from '../utils';
 export const RowLabel = (meta) => {
     if (meta === undefined)
@@ -38,8 +39,7 @@ const addPlusSign = (num) => {
 export const TopTable = React.memo(function TopTable({ data: top, sampleUnit: unit, navigateTo, loading, currentSearchString, setActionButtons, }) {
     const router = parseParams(window?.location.search);
     const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
-    const [rawcompareMode] = useURLState({ param: 'compare_a' });
-    const compareMode = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+    const { compareMode } = useProfileViewContext();
     const dashboardItems = useMemo(() => {
         if (rawDashboardItems !== undefined) {
             return rawDashboardItems;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.302",
+  "version": "0.16.304",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.98",
-    "@parca/components": "^0.16.225",
+    "@parca/components": "^0.16.226",
     "@parca/dynamicsize": "^0.16.60",
     "@parca/hooks": "^0.0.35",
     "@parca/parser": "^0.16.66",
-    "@parca/store": "^0.16.115",
-    "@parca/utilities": "^0.0.43",
+    "@parca/store": "^0.16.116",
+    "@parca/utilities": "^0.0.44",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "c21b3a846496d053c2a2dd8f0eda1930f4d8d26f"
+  "gitHead": "a342b32b3ed89bee6659d1f4fd073c6bcd52cb16"
 }

package/src/MetricsGraph/index.tsx

@@ -23,6 +23,7 @@ import {DateTimeRange} from '@parca/components';
 import {
   formatDate,
   formatForTimespan,
+  getPrecision,
   sanitizeHighlightedValues,
   valueFormatter,
 } from '@parca/utilities';
@@ -450,30 +451,40 @@ export const RawMetricsGraph = ({
           </g>
           <g transform={`translate(${margin * 1.5}, ${margin / 1.5})`}>
             <g className="y axis" textAnchor="end" fontSize="10" fill="none">
-              {yScale.ticks(5).map((d, i) => (
-                <Fragment key={`${i.toString()}-${d.toString()}`}>
-                  <g
-                    key={`tick-${i}`}
-                    className="tick"
-                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                    transform={`translate(0, ${yScale(d)})`}
-                  >
-                    <line className="stroke-gray-300 dark:stroke-gray-500" x2={-6} />
-                    <text fill="currentColor" x={-9} dy={'0.32em'}>
-                      {valueFormatter(d, sampleUnit, 1)}
-                    </text>
-                  </g>
-                  <g key={`grid-${i}`}>
-                    <line
-                      className="stroke-gray-300 dark:stroke-gray-500"
-                      x1={xScale(from)}
-                      x2={xScale(to)}
-                      y1={yScale(d)}
-                      y2={yScale(d)}
-                    />
-                  </g>
-                </Fragment>
-              ))}
+              {yScale.ticks(5).map((d, i, allTicks) => {
+                let decimals = 2;
+                const intervalBetweenTicks = allTicks[1] - allTicks[0];
+
+                if (intervalBetweenTicks < 1) {
+                  const precision = getPrecision(intervalBetweenTicks);
+                  decimals = precision;
+                }
+
+                return (
+                  <Fragment key={`${i.toString()}-${d.toString()}`}>
+                    <g
+                      key={`tick-${i}`}
+                      className="tick"
+                      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                      transform={`translate(0, ${yScale(d)})`}
+                    >
+                      <line className="stroke-gray-300 dark:stroke-gray-500" x2={-6} />
+                      <text fill="currentColor" x={-9} dy={'0.32em'}>
+                        {valueFormatter(d, sampleUnit, decimals)}
+                      </text>
+                    </g>
+                    <g key={`grid-${i}`}>
+                      <line
+                        className="stroke-gray-300 dark:stroke-gray-500"
+                        x1={xScale(from)}
+                        x2={xScale(to)}
+                        y1={yScale(d)}
+                        y2={yScale(d)}
+                      />
+                    </g>
+                  </Fragment>
+                );
+              })}
               <line
                 className="stroke-gray-300 dark:stroke-gray-500"
                 x1={0}

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -18,6 +18,7 @@ import {setHoveringNode, useAppDispatch} from '@parca/store';
 import {scaleLinear, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import GraphTooltip from '../../GraphTooltip';
+import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import {IcicleNode, RowHeight} from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';
@@ -50,8 +51,7 @@ export const IcicleGraph = memo(function IcicleGraph({
 
   const coloredGraph = useColoredGraph(graph);
   const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
 
   useEffect(() => {

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -36,6 +36,7 @@ import {
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import {DockedGraphTooltip} from '../../GraphTooltipArrow/DockedGraphTooltip';
+import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import ContextMenu from './ContextMenu';
 import {IcicleNode, RowHeight, mappingColors} from './IcicleGraphNodes';
@@ -98,8 +99,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   const ref = useRef<SVGGElement>(null);
 
   const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
 
   const mappings = useMemo(() => {

package/src/ProfileIcicleGraph/index.tsx

@@ -19,13 +19,9 @@ import {Icon} from '@iconify/react';
 import {Flamegraph, FlamegraphArrow} from '@parca/client';
 import {Button, Select, useParcaContext, useURLState} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
-import {
-  capitalizeOnlyFirstLetter,
-  divide,
-  selectQueryParam,
-  type NavigateFunction,
-} from '@parca/utilities';
+import {capitalizeOnlyFirstLetter, divide, type NavigateFunction} from '@parca/utilities';
 
+import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, {
@@ -67,8 +63,7 @@ const ShowHideLegendButton = ({navigateTo}: {navigateTo?: NavigateFunction}): JS
     navigateTo,
   });
 
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const isColorStackLegendEnabled = colorStackLegend === 'true';
 
@@ -104,8 +99,7 @@ const GroupAndSortActionButtons = ({navigateTo}: {navigateTo?: NavigateFunction}
     param: 'sort_by',
     navigateTo,
   });
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const [storeGroupBy = [FIELD_FUNCTION_NAME], setStoreGroupBy] = useURLState({
     param: 'group_by',
@@ -298,8 +292,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   width,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {loader, onError, authenticationErrorMessage} = useParcaContext();
-  const compareMode: boolean =
-    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
     param: 'sort_by',
@@ -383,7 +376,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
 
   return (
     <div className="relative">
-      {compareMode && <DiffLegend />}
+      {compareMode ? <DiffLegend /> : null}
       <div className="min-h-48">
         {graph !== undefined && (
           <IcicleGraph

package/src/ProfileView/ProfileViewContext.tsx

@@ -18,11 +18,13 @@ import {ProfileSource} from '../ProfileSource';
 interface Props {
   profileSource?: ProfileSource;
   sampleUnit: string;
+  compareMode: boolean;
 }
 
 export const defaultValue: Props = {
   profileSource: undefined,
   sampleUnit: 'bytes',
+  compareMode: false,
 };
 
 const ProfileViewContext = createContext<Props>(defaultValue);

package/src/ProfileView/index.tsx

@@ -44,7 +44,7 @@ import {
 } from '@parca/components';
 import {useContainerDimensions} from '@parca/hooks';
 import {selectDarkMode, useAppSelector} from '@parca/store';
-import {getNewSpanColor} from '@parca/utilities';
+import {getNewSpanColor, selectQueryParam} from '@parca/utilities';
 
 import {Callgraph} from '../';
 import {jsonToDot} from '../Callgraph/utils';
@@ -131,6 +131,7 @@ export const ProfileView = ({
   navigateTo,
   onDownloadPProf,
   pprofDownloading,
+  compare,
 }: ProfileViewProps): JSX.Element => {
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
@@ -352,9 +353,13 @@ export const ProfileView = ({
   const hasProfileSource = profileSource !== undefined && profileSourceString !== '';
   const headerParts = profileSourceString?.split('"') ?? [];
 
+  const compareMode =
+    compare === true ||
+    (selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true');
+
   return (
     <KeyDownProvider>
-      <ProfileViewContextProvider value={{profileSource, sampleUnit}}>
+      <ProfileViewContextProvider value={{profileSource, sampleUnit, compareMode}}>
         <div
           className={cx(
             'mb-4 flex w-full items-center',
@@ -374,7 +379,7 @@ export const ProfileView = ({
             </div>
           )}
 
-          <div className="flex items-center md:justify-end gap-2 flex-wrap">
+          <div className="flex flex-wrap items-center gap-2 md:justify-end">
             <FilterByFunctionButton navigateTo={navigateTo} />
             <UserPreferences
               customButton={

package/src/Table/index.tsx

@@ -27,6 +27,7 @@ import {
   type NavigateFunction,
 } from '@parca/utilities';
 
+import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {hexifyAddress} from '../utils';
 
 const FIELD_MAPPING_FILE = 'mapping_file';
@@ -84,10 +85,9 @@ export const Table = React.memo(function Table({
 }: TableProps): React.JSX.Element {
   const router = parseParams(window?.location.search);
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
-  const [rawcompareMode] = useURLState({param: 'compare_a'});
   const [filterByFunctionInput] = useURLState({param: 'filter_by_function'});
 
-  const compareMode: boolean = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const dashboardItems = useMemo(() => {
     if (rawDashboardItems !== undefined) {

package/src/TopTable/index.tsx

@@ -25,6 +25,7 @@ import {
   type NavigateFunction,
 } from '@parca/utilities';
 
+import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {hexifyAddress} from '../utils';
 
 interface TopTableProps {
@@ -72,9 +73,8 @@ export const TopTable = React.memo(function TopTable({
 }: TopTableProps): JSX.Element {
   const router = parseParams(window?.location.search);
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
-  const [rawcompareMode] = useURLState({param: 'compare_a'});
 
-  const compareMode: boolean = rawcompareMode === undefined ? false : rawcompareMode === 'true';
+  const {compareMode} = useProfileViewContext();
 
   const dashboardItems = useMemo(() => {
     if (rawDashboardItems !== undefined) {