@parca/profile 0.19.112 → 0.19.114

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.19.114](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.113...@parca/profile@0.19.114) (2026-02-06)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.113](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.112...@parca/profile@0.19.113) (2026-01-29)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.112](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.111...@parca/profile@0.19.112) (2026-01-15)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Table } from 'apache-arrow';
+import { Table } from '@uwdata/flechette';
 import { ProfileType } from '@parca/parser';
 interface GraphTooltipArrowContentProps {
-    table: Table<any>;
+    table: Table;
     profileType?: ProfileType;
     unit?: string;
     total: bigint;

package/dist/GraphTooltipArrow/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/GraphTooltipArrow/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAGnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,6BAA6B;IACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD,QAAA,MAAM,wBAAwB,GAAI,sFAS/B,6BAA6B,KAAG,KAAK,CAAC,GAAG,CAAC,OA+E5C,CAAC;AAqFF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/GraphTooltipArrow/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,6BAA6B;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD,QAAA,MAAM,wBAAwB,GAAI,sFAS/B,6BAA6B,KAAG,KAAK,CAAC,GAAG,CAAC,OA+E5C,CAAC;AAqFF,eAAe,wBAAwB,CAAC"}

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

@@ -1,7 +1,7 @@
-import { Table } from 'apache-arrow';
+import { Table } from '@uwdata/flechette';
 import { ProfileType } from '@parca/parser';
 interface Props {
-    table: Table<any>;
+    table: Table;
     total: bigint;
     totalUnfiltered: bigint;
     row: number | null;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/DockedGraphTooltip/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAKnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAuBD,eAAO,MAAM,kBAAkB,GAAI,6EAQhC,KAAK,KAAG,GAAG,CAAC,OAuGd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/DockedGraphTooltip/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAKxC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAuBD,eAAO,MAAM,kBAAkB,GAAI,6EAQhC,KAAK,KAAG,GAAG,CAAC,OAuGd,CAAC"}

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

@@ -1,7 +1,7 @@
-import { Table } from 'apache-arrow';
+import { Table } from '@uwdata/flechette';
 import { ProfileType } from '@parca/parser';
 interface Props {
-    table: Table<any>;
+    table: Table;
     profileType?: ProfileType;
     unit?: string;
     total: bigint;

package/dist/GraphTooltipArrow/useGraphTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltip/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,GAAI,6EAQ7B,KAAK,KAAG,gBAAgB,GAAG,IA4C7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltip/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,GAAI,6EAQ7B,KAAK,KAAG,gBAAgB,GAAG,IA4C7B,CAAC"}

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

@@ -1,6 +1,6 @@
-import { Table } from 'apache-arrow';
+import { Table } from '@uwdata/flechette';
 interface Props {
-    table: Table<any>;
+    table: Table;
     row: number;
 }
 interface GraphTooltipMetaInfoData {

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAqBnC,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB,GAAI,gBAAc,KAAK,KAAG,wBA8F7D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAqBxC,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB,GAAI,gBAAc,KAAK,KAAG,wBA8F7D,CAAC"}

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileExplorerSingle.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerSingle.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAMvD,UAAU,0BAA0B;IAClC,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,GAAI,8BAG5B,0BAA0B,KAAG,GAAG,CAAC,OAwBnC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ProfileExplorerSingle.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerSingle.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAMvD,UAAU,0BAA0B;IAClC,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,GAAI,8BAG5B,0BAA0B,KAAG,GAAG,CAAC,OAmCnC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/ProfileExplorer/ProfileExplorerSingle.js

@@ -11,13 +11,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // 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 { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
 import { useQueryState } from '../hooks/useQueryState';
 const ProfileExplorerSingle = ({ queryClient, navigateTo, }) => {
     const [showMetricsGraph, setShowMetricsGraph] = useState(true);
-    const { profileSource } = useQueryState({ suffix: '_a' });
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative", children: _jsx(ProfileSelector, { queryClient: queryClient, closeProfile: () => { }, comparing: false, enforcedProfileName: '', navigateTo: navigateTo, suffix: "_a", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) }), profileSource != null && (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profileSource }))] }));
+    const { profileSource, setDraftTimeRange, commitDraft } = useQueryState({ suffix: '_a' });
+    const handleSwitchToOneMinute = useCallback(() => {
+        const now = Date.now();
+        const from = now - 60000; // 1 minute ago
+        setDraftTimeRange(from, now, 'relative:minute|1');
+        commitDraft({ from, to: now, timeSelection: 'relative:minute|1' });
+    }, [setDraftTimeRange, commitDraft]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative", children: _jsx(ProfileSelector, { queryClient: queryClient, closeProfile: () => { }, comparing: false, enforcedProfileName: '', navigateTo: navigateTo, suffix: "_a", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) }), profileSource != null && (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profileSource, onSwitchToOneMinute: handleSwitchToOneMinute }))] }));
 };
 export default ProfileExplorerSingle;

package/dist/ProfileFlameChart/SamplesStrips/SamplesGraph/index.d.ts

@@ -0,0 +1,31 @@
+import { NumberDuo } from '../../../utils';
+export interface DataPoint {
+    timestamp: number;
+    value: number;
+    sampleCount?: number;
+}
+interface DragState {
+    stripIndex: number;
+    startX: number;
+    currentX: number;
+}
+interface Props {
+    width: number;
+    height: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    fill?: string;
+    data: DataPoint[];
+    selectionBounds?: NumberDuo | undefined;
+    setSelectionBounds: (newBounds: NumberDuo | undefined) => void;
+    stepMs: number;
+    onDragStart?: (startX: number) => void;
+    dragState?: DragState;
+    isAnyDragActive?: boolean;
+    timeBounds?: NumberDuo;
+}
+export declare const SamplesGraph: ({ data, height, width, marginLeft, marginRight, marginBottom, marginTop, fill, selectionBounds, setSelectionBounds, stepMs, onDragStart, dragState, isAnyDragActive, timeBounds, }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileFlameChart/SamplesStrips/SamplesGraph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileFlameChart/SamplesStrips/SamplesGraph/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,SAAS;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACxC,kBAAkB,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAwJD,eAAO,MAAM,YAAY,GAAI,oLAgB1B,KAAK,KAAG,GAAG,CAAC,OAkId,CAAC"}

package/dist/{MetricsGraphStrips/AreaGraph → ProfileFlameChart/SamplesStrips/SamplesGraph}/index.js

@@ -15,7 +15,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import * as d3 from 'd3';
-import { Tooltip } from './Tooltip';
 const DraggingWindow = ({ dragStart, currentX, }) => {
     const start = useMemo(() => Math.min(dragStart ?? 0, currentX ?? 0), [dragStart, currentX]);
     const width = useMemo(() => Math.abs((dragStart ?? 0) - (currentX ?? 0)), [dragStart, currentX]);
@@ -100,26 +99,22 @@ const ZoomWindow = ({ zoomWindow, onZoomWindowChange, setIsHoveringDragHandle, }
                         setIsHoveringDragHandle(false);
                     }, children: _jsx(Icon, { icon: "si:drag-handle-line", className: "rotate-90", fontSize: 16 }) })] }) }));
 };
-export const AreaGraph = ({ data, height, width, marginLeft = 0, marginRight = 0, marginBottom = 0, marginTop = 0, fill = 'gray', selectionBounds, setSelectionBounds, valueBounds, }) => {
+export const SamplesGraph = ({ data, height, width, marginLeft = 0, marginRight = 0, marginBottom = 0, marginTop = 0, fill = 'gray', selectionBounds, setSelectionBounds, stepMs, onDragStart, dragState, isAnyDragActive = false, timeBounds, }) => {
     const [mousePosition, setMousePosition] = useState(undefined);
-    const [dragStart, setDragStart] = useState(undefined);
     const [isHoveringDragHandle, setIsHoveringDragHandle] = useState(false);
-    const [hoverData, setHoverData] = useState(null);
-    const [isMouseOverGraph, setIsMouseOverGraph] = useState(false);
-    const isDragging = dragStart !== undefined;
-    // Declare the x (horizontal position) scale.
-    const x = d3.scaleUtc(d3.extent(data, d => d.timestamp), [
-        marginLeft,
-        width - marginRight,
-    ]);
-    // Declare the y (vertical position) scale.
-    const y = d3.scaleLinear([valueBounds[0], valueBounds[1]], [height - marginBottom, marginTop]);
-    const area = d3
-        .area()
-        .curve(d3.curveMonotoneX)
-        .x(d => x(d.timestamp))
-        .y0(y(0))
-        .y1(d => y(d.value));
+    // use the bounds from props if provided, else compute from data
+    const xDomain = timeBounds ?? d3.extent(data, d => d.timestamp);
+    const x = d3.scaleUtc(xDomain, [marginLeft, width - marginRight]);
+    // Calculate sample count range for opacity scaling
+    const sampleCounts = data.map(d => Number(d.sampleCount ?? 1));
+    const maxSampleCount = Math.max(...sampleCounts);
+    const minSampleCount = Math.min(...sampleCounts);
+    // Create opacity scale: more samples = higher opacity
+    const opacityScale = d3
+        .scaleLinear()
+        .domain([minSampleCount, maxSampleCount])
+        .range([0.5, 1.0])
+        .clamp(true);
     const zoomWindow = useMemo(() => {
         if (selectionBounds === undefined) {
             return undefined;
@@ -130,67 +125,44 @@ export const AreaGraph = ({ data, height, width, marginLeft = 0, marginRight = 0
     const setSelectionBoundsWithScaling = ([startPx, endPx]) => {
         setSelectionBounds([x.invert(startPx).getTime(), x.invert(endPx).getTime()]);
     };
-    return (_jsxs("div", { style: { height, width }, onMouseMove: e => {
+    return (_jsxs("div", { style: { height, width }, className: "relative", onMouseMove: e => {
+            // Only track hover position when no drag is active anywhere
+            if (isAnyDragActive)
+                return;
             const [xPos, yPos] = d3.pointer(e);
             if (xPos >= marginLeft &&
                 xPos <= width - marginRight &&
                 yPos >= marginTop &&
                 yPos <= height - marginBottom) {
                 setMousePosition([xPos, yPos]);
-                // Find the closest data point
-                if (!isHoveringDragHandle && !isDragging) {
-                    const xDate = x.invert(xPos);
-                    const bisect = d3.bisector((d) => d.timestamp).left;
-                    const index = bisect(data, xDate.getTime());
-                    const dataPoint = data[index];
-                    if (dataPoint !== undefined) {
-                        setHoverData(dataPoint);
-                    }
-                }
             }
             else {
                 setMousePosition(undefined);
-                setHoverData(null);
             }
-        }, onMouseEnter: () => {
-            setIsMouseOverGraph(true);
         }, onMouseLeave: () => {
-            setIsMouseOverGraph(false);
+            // Only clear hover position, drag is managed by parent
             setMousePosition(undefined);
-            setDragStart(undefined);
-            setHoverData(null);
         }, onMouseDown: e => {
             // only left mouse button
             if (e.button !== 0) {
                 return;
             }
-            // X/Y coordinate array relative to svg
+            // X/Y coordinate array relative to element
             const rel = d3.pointer(e);
             const xCoordinate = rel[0];
-            const xCoordinateWithoutMargin = xCoordinate - marginLeft;
-            if (xCoordinateWithoutMargin >= 0) {
-                setDragStart(xCoordinateWithoutMargin);
+            if (xCoordinate >= 0 && onDragStart !== undefined) {
+                onDragStart(xCoordinate);
             }
             e.stopPropagation();
             e.preventDefault();
-        }, onMouseUp: e => {
-            if (dragStart === undefined) {
-                return;
-            }
-            const rel = d3.pointer(e);
-            const xCoordinate = rel[0];
-            const xCoordinateWithoutMargin = xCoordinate - marginLeft;
-            if (xCoordinateWithoutMargin >= 0 && dragStart !== xCoordinateWithoutMargin) {
-                const start = Math.min(dragStart, xCoordinateWithoutMargin);
-                const end = Math.max(dragStart, xCoordinateWithoutMargin);
-                setSelectionBoundsWithScaling([start, end]);
-            }
-            setDragStart(undefined);
-        }, className: "relative", children: [_jsx("div", { style: { height, width: 2, left: mousePosition?.[0] ?? -1 }, className: cx('bg-gray-700/75 dark:bg-gray-200/75 absolute top-0', {
-                    hidden: mousePosition === undefined || isDragging || isHoveringDragHandle,
-                }) }), _jsx(DraggingWindow, { dragStart: dragStart, currentX: mousePosition?.[0] }), _jsx(ZoomWindow, { zoomWindow: zoomWindow, width: width, onZoomWindowChange: setSelectionBoundsWithScaling, setIsHoveringDragHandle: setIsHoveringDragHandle }), mousePosition !== undefined &&
-                hoverData !== null &&
-                !isDragging &&
-                !isHoveringDragHandle &&
-                isMouseOverGraph && (_jsx(Tooltip, { x: mousePosition[0], y: mousePosition[1], timestamp: hoverData.timestamp, value: hoverData.value, containerWidth: width })), _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsx("path", { fill: fill, d: area(data), className: "opacity-80" }) })] }));
+        }, children: [_jsx("div", { style: { height, width: 2, left: mousePosition?.[0] ?? -1 }, className: cx('bg-gray-700/75 dark:bg-gray-200/75 absolute top-0', {
+                    hidden: mousePosition === undefined || isAnyDragActive || isHoveringDragHandle,
+                }) }), _jsx(DraggingWindow, { dragStart: dragState?.startX, currentX: dragState?.currentX }), _jsx(ZoomWindow, { zoomWindow: zoomWindow, width: width, onZoomWindowChange: setSelectionBoundsWithScaling, setIsHoveringDragHandle: setIsHoveringDragHandle }), _jsxs("svg", { style: { width: '100%', height: '100%' }, children: [_jsx("rect", { x: marginLeft, y: 0, width: width - marginLeft - marginRight, height: height, fill: fill, fillOpacity: 0.1 }), _jsx("g", { children: data.map((d, i) => {
+                            const xPosition = x(d.timestamp);
+                            // Use stepMs for bucket width
+                            const rectWidth = x(d.timestamp + stepMs) - xPosition;
+                            // Calculate opacity based on sample count
+                            const opacity = opacityScale(Number(d.sampleCount ?? 1));
+                            return (_jsx("rect", { x: xPosition, y: 0, width: rectWidth, height: height, fill: fill, fillOpacity: opacity }, i));
+                        }) })] })] }));
 };

package/dist/{MetricsGraphStrips/MetricsGraphStrips.stories.d.ts → ProfileFlameChart/SamplesStrips/SamplesStrips.stories.d.ts}

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react';
-import { NumberDuo } from '../utils';
-import { DataPoint } from './AreaGraph';
+import { NumberDuo } from '../../utils';
+import { DataPoint } from './SamplesGraph';
 declare const meta: Meta;
 export default meta;
 export declare const ThreeCPUStrips: {
@@ -18,7 +18,8 @@ export declare const ThreeCPUStrips: {
         };
         onSelectedTimeframe: (index: number, bounds: NumberDuo) => void;
         bounds: number[];
+        stepMs: number;
     };
     render: (args: any) => JSX.Element;
 };
-//# sourceMappingURL=MetricsGraphStrips.stories.d.ts.map
+//# sourceMappingURL=SamplesStrips.stories.d.ts.map

package/dist/ProfileFlameChart/SamplesStrips/SamplesStrips.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SamplesStrips.stories.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/SamplesStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAqBzC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;;;;;;qCAKM,MAAM,UAAU,SAAS,KAAG,IAAI;;;;mBAM9B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}

package/dist/{MetricsGraphStrips/MetricsGraphStrips.stories.js → ProfileFlameChart/SamplesStrips/SamplesStrips.stories.js}

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 // eslint-disable-next-line import/named
 import { useArgs } from '@storybook/preview-api';
-import { MetricsGraphStrips } from './index';
+import { SamplesStrip } from './index';
 function seededRandom(seed) {
     return () => {
         seed = (seed * 16807) % 2147483647;
@@ -31,8 +31,8 @@ for (let i = 0; i < 200; i++) {
     }
 }
 const meta = {
-    title: 'components/MetricsGraphStrips',
-    component: MetricsGraphStrips,
+    title: 'components/SamplesStrip',
+    component: SamplesStrip,
 };
 export default meta;
 export const ThreeCPUStrips = {
@@ -44,6 +44,7 @@ export const ThreeCPUStrips = {
             console.log('onSelectedTimeframe', index, bounds);
         },
         bounds: [mockData[0][0].timestamp, mockData[0][mockData[0].length - 1].timestamp],
+        stepMs: 100,
     },
     render: function Component(args) {
         const [, setArgs] = useArgs();
@@ -51,6 +52,6 @@ export const ThreeCPUStrips = {
             args.onSelectedTimeframe(index, bounds);
             setArgs({ ...args, selectedTimeframe: { index, bounds } });
         };
-        return _jsx(MetricsGraphStrips, { ...args, onSelectedTimeframe: onSelectedTimeframe });
+        return _jsx(SamplesStrip, { ...args, onSelectedTimeframe: onSelectedTimeframe });
     },
 };

package/dist/{MetricsGraphStrips → ProfileFlameChart/SamplesStrips}/index.d.ts

@@ -1,6 +1,7 @@
 import { LabelSet } from '@parca/client';
-import { NumberDuo } from '../utils';
-import { DataPoint } from './AreaGraph';
+import { NumberDuo } from '../../utils';
+import { DataPoint } from './SamplesGraph';
+export type { DataPoint } from './SamplesGraph';
 interface Props {
     cpus: LabelSet[];
     data: DataPoint[][];
@@ -11,8 +12,8 @@ interface Props {
     onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
     width?: number;
     bounds: NumberDuo;
+    stepMs: number;
 }
 export declare const labelSetToString: (labelSet?: LabelSet) => string;
-export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, }: Props) => JSX.Element;
-export {};
+export declare const SamplesStrip: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, stepMs, }: Props) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileFlameChart/SamplesStrips/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAEvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW,QAAQ,KAAG,MAoBtD,CAAC;AA6FF,eAAO,MAAM,YAAY,GAAI,gFAQ1B,KAAK,KAAG,GAAG,CAAC,OAmId,CAAC"}

package/dist/ProfileFlameChart/SamplesStrips/index.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useMemo, useRef, useState } from 'react';
+import { Icon } from '@iconify/react';
+import cx from 'classnames';
+import * as d3 from 'd3';
+import isEqual from 'fast-deep-equal';
+import { useIntersectionObserver } from 'usehooks-ts';
+import { TimelineGuide } from '../../TimelineGuide';
+import { SamplesGraph } from './SamplesGraph';
+export const labelSetToString = (labelSet) => {
+    if (labelSet === undefined) {
+        return '{}';
+    }
+    let str = '{';
+    let isFirst = true;
+    for (const label of labelSet.labels) {
+        if (!isFirst) {
+            str += ', ';
+        }
+        else {
+            isFirst = false;
+        }
+        str += `${label.name}: ${label.value}`;
+    }
+    str += '}';
+    return str;
+};
+const STRIP_HEIGHT = 24;
+const getTimelineGuideHeight = (cpusCount, collapsedCount) => {
+    return (STRIP_HEIGHT + 4) * (cpusCount - collapsedCount) + 20 * collapsedCount + 24 - 6;
+};
+const stickyPx = 0;
+const SamplesGraphContainer = ({ isSelected, isCollapsed, cpu, width, onToggleCollapse, data, selectionBounds, setSelectionBounds, color, stepMs, onDragStart, dragState, stripIndex, isAnyDragActive, timeBounds, }) => {
+    const labelStr = labelSetToString(cpu);
+    const { isIntersecting, ref } = useIntersectionObserver({
+        rootMargin: `${stickyPx}px 0px 0px 0px`,
+    });
+    const isSticky = useMemo(() => {
+        return isSelected && isIntersecting;
+    }, [isSelected, isIntersecting]);
+    return (_jsxs("div", { className: cx('min-h-5', {
+            relative: !isSelected,
+            'sticky z-30 bg-white dark:bg-black bg-opacity-75': isSelected,
+            '!bg-opacity-100': isSticky,
+        }), style: { width: width ?? 1468, top: isSelected ? stickyPx : undefined }, ref: ref, children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 dark:bg-black/50 px-1 rounded-sm cursor-pointer", style: {
+                    zIndex: 15,
+                }, onClick: onToggleCollapse, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), labelStr] }), !isCollapsed ? (_jsx(SamplesGraph, { data: data, height: STRIP_HEIGHT, width: width ?? 1468, fill: color(labelStr), selectionBounds: selectionBounds, setSelectionBounds: setSelectionBounds, stepMs: stepMs, onDragStart: (startX) => onDragStart(stripIndex, startX), dragState: dragState?.stripIndex === stripIndex ? dragState : undefined, isAnyDragActive: isAnyDragActive, timeBounds: timeBounds })) : null] }, labelStr));
+};
+export const SamplesStrip = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, stepMs, }) => {
+    const [collapsedLabels, setCollapsedLabels] = useState(new Set());
+    const [dragState, setDragState] = useState(undefined);
+    const containerRef = useRef(null);
+    const isDragging = dragState !== undefined;
+    // Sort cpus and data by label string for consistent ordering across reloads
+    const sortedItems = useMemo(() => {
+        const items = cpus.map((cpu, i) => ({
+            cpu,
+            data: data[i],
+            label: labelSetToString(cpu),
+        }));
+        return items.sort((a, b) => a.label.localeCompare(b.label));
+    }, [cpus, data]);
+    // Deterministic color: hash the label string so the same label always gets the same color
+    // regardless of render order.
+    const color = useMemo(() => {
+        const palette = d3.schemeObservable10;
+        const hashStr = (s) => {
+            let h = 0;
+            for (let i = 0; i < s.length; i++) {
+                h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
+            }
+            return Math.abs(h);
+        };
+        return (label) => palette[hashStr(label) % palette.length];
+    }, []);
+    const handleDragStart = (stripIndex, startX) => {
+        setDragState({ stripIndex, startX, currentX: startX });
+    };
+    const handleMouseMove = (e) => {
+        if (dragState === undefined || containerRef.current === null)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        // Clamp to container bounds
+        const clampedX = Math.max(0, Math.min(x, width ?? rect.width));
+        setDragState({ ...dragState, currentX: clampedX });
+    };
+    const handleMouseUp = (e) => {
+        if (dragState === undefined || containerRef.current === null)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const clampedX = Math.max(0, Math.min(x, width ?? rect.width));
+        const { stripIndex, startX } = dragState;
+        if (startX !== clampedX) {
+            const start = Math.min(startX, clampedX);
+            const end = Math.max(startX, clampedX);
+            // Convert pixel positions to timestamps
+            const innerWidth = width ?? rect.width;
+            const startTs = bounds[0] + (start / innerWidth) * (bounds[1] - bounds[0]);
+            const endTs = bounds[0] + (end / innerWidth) * (bounds[1] - bounds[0]);
+            // Use sortedItems to get the correct cpu for the strip index
+            onSelectedTimeframe(sortedItems[stripIndex].cpu, [startTs, endTs]);
+        }
+        setDragState(undefined);
+    };
+    const handleMouseLeave = () => {
+        setDragState(undefined);
+    };
+    if (data.length === 0) {
+        return (_jsx("span", { className: "flex justify-center my-10", children: "There is no data matching your filter criteria, please try changing the filter." }));
+    }
+    return (_jsxs("div", { ref: containerRef, className: cx('flex flex-col gap-1 relative my-0', { 'cursor-ew-resize': isDragging }), style: { width: width ?? '100%' }, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(sortedItems.length, collapsedLabels.size), margin: 1 }), sortedItems.map((item, i) => {
+                const isCollapsed = collapsedLabels.has(item.label);
+                const isSelected = isEqual(item.cpu, selectedTimeframe?.labels);
+                return (_jsx(SamplesGraphContainer, { isSelected: isSelected, isCollapsed: isCollapsed, cpu: item.cpu, width: width, data: item.data, onToggleCollapse: () => {
+                        const newCollapsedLabels = new Set(collapsedLabels);
+                        if (collapsedLabels.has(item.label)) {
+                            newCollapsedLabels.delete(item.label);
+                        }
+                        else {
+                            newCollapsedLabels.add(item.label);
+                        }
+                        setCollapsedLabels(newCollapsedLabels);
+                    }, selectionBounds: isSelected ? selectedTimeframe?.bounds : undefined, setSelectionBounds: newBounds => {
+                        onSelectedTimeframe(item.cpu, newBounds);
+                    }, color: color, stepMs: stepMs, onDragStart: handleDragStart, dragState: dragState, stripIndex: i, isAnyDragActive: isDragging, timeBounds: bounds }, item.label));
+            })] }));
+};

package/dist/ProfileFlameChart/index.d.ts

@@ -0,0 +1,20 @@
+import { QueryServiceClient } from '@parca/client';
+import { ProfileType } from '@parca/parser';
+import { ProfileSource } from '../ProfileSource';
+import type { SamplesData } from '../ProfileView/types/visualization';
+interface ProfileFlameChartProps {
+    samplesData?: SamplesData;
+    queryClient: QueryServiceClient;
+    profileSource: ProfileSource;
+    width: number;
+    total: bigint;
+    filtered: bigint;
+    profileType?: ProfileType;
+    isHalfScreen: boolean;
+    metadataMappingFiles?: string[];
+    metadataLoading?: boolean;
+    onSwitchToOneMinute?: () => void;
+}
+export declare const ProfileFlameChart: ({ samplesData, queryClient, profileSource, width, total, filtered, profileType, isHalfScreen, metadataMappingFiles, metadataLoading, onSwitchToOneMinute, }: ProfileFlameChartProps) => JSX.Element;
+export default ProfileFlameChart;
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileFlameChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAQpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAIxE,OAAO,EAAsB,aAAa,EAAC,MAAM,kBAAkB,CAAC;AACpE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AA4CpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AA+BD,eAAO,MAAM,iBAAiB,GAAI,6JAY/B,sBAAsB,KAAG,GAAG,CAAC,OA+K/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}