@parca/profile 0.16.443 → 0.16.445

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.445](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.444...@parca/profile@0.16.445) (2024-11-18)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.444](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.443...@parca/profile@0.16.444) (2024-11-14)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.443](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.442...@parca/profile@0.16.443) (2024-11-12)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraphStrips/AreaGraph/index.d.ts

@@ -0,0 +1,20 @@
+export interface DataPoint {
+    timestamp: number;
+    value: number;
+}
+export type NumberDuo = [number, 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;
+}
+export declare const AreaGraph: ({ data, height, width, marginLeft, marginRight, marginBottom, marginTop, fill, selectionBounds, setSelectionBounds, }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/MetricsGraphStrips/AreaGraph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/index.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEzC,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;CAChE;AA8JD,eAAO,MAAM,SAAS,0HAWnB,KAAK,KAAG,GAAG,CAAC,OAkHd,CAAC"}

package/dist/MetricsGraphStrips/AreaGraph/index.js

@@ -0,0 +1,166 @@
+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 { useEffect, useMemo, useRef, useState } from 'react';
+import { Icon } from '@iconify/react';
+import cx from 'classnames';
+import * as d3 from 'd3';
+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]);
+    if (dragStart === undefined || currentX === undefined) {
+        return null;
+    }
+    return (_jsx("div", { style: { height: '100%', width, left: start }, className: cx('bg-gray-500 absolute top-0 opacity-50 border-x-2 border-gray-900 dark:border-gray-100') }));
+};
+const ZoomWindow = ({ zoomWindow, width, onZoomWindowChange, setIsHoveringDragHandle, }) => {
+    const windowStartHandleRef = useRef(null);
+    const windowEndHandleRef = useRef(null);
+    const [zoomWindowState, setZoomWindowState] = useState(zoomWindow);
+    const [dragginStart, setDraggingStart] = useState(false);
+    const [draggingEnd, setDraggingEnd] = useState(false);
+    useEffect(() => {
+        if (zoomWindow === undefined ||
+            zoomWindowState === undefined ||
+            zoomWindow[0] !== zoomWindowState[0] ||
+            zoomWindow[1] !== zoomWindowState[1]) {
+            setZoomWindowState(zoomWindow);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [zoomWindow]);
+    if (zoomWindowState === undefined) {
+        return null;
+    }
+    const beforeStart = 0;
+    const beforeWidth = zoomWindowState[0];
+    const afterStart = zoomWindowState[1];
+    const afterWidth = width - zoomWindowState[1];
+    return (_jsxs("div", { className: "absolute w-full h-full", onMouseMove: e => {
+            if (dragginStart) {
+                const [x] = d3.pointer(e);
+                if (x >= afterStart - 10) {
+                    return;
+                }
+                const newStart = Math.min(x, afterStart);
+                const newEnd = Math.max(x, afterStart);
+                setZoomWindowState([newStart, newEnd]);
+            }
+            if (draggingEnd) {
+                const [x] = d3.pointer(e);
+                if (x <= beforeWidth + 10) {
+                    return;
+                }
+                const newStart = Math.min(x, beforeWidth);
+                const newEnd = Math.max(x, beforeWidth);
+                setZoomWindowState([newStart, newEnd]);
+            }
+        }, onMouseLeave: () => {
+            setDraggingStart(false);
+            setDraggingEnd(false);
+        }, onMouseUp: () => {
+            if (dragginStart) {
+                setDraggingStart(false);
+            }
+            if (draggingEnd) {
+                setDraggingEnd(false);
+            }
+            if (zoomWindowState[0] === zoomWindow?.[0] && zoomWindowState[1] === zoomWindow?.[1]) {
+                return;
+            }
+            onZoomWindowChange(zoomWindowState);
+            setZoomWindowState(undefined);
+        }, children: [_jsx("div", { style: { height: '100%', width: beforeWidth, left: beforeStart }, className: cx('bg-gray-500/50 absolute top-0 border-r-2 border-gray-900 dark:border-gray-100 z-20'), children: _jsx("div", { className: "w-3 h-4 absolute top-0 right-[-7px] rounded-b bg-gray-200  cursor-ew-resize flex justify-center", onMouseDown: e => {
+                        setDraggingStart(true);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, ref: windowStartHandleRef, onMouseEnter: () => {
+                        setIsHoveringDragHandle(true);
+                    }, onMouseLeave: () => {
+                        setIsHoveringDragHandle(false);
+                    }, children: _jsx(Icon, { icon: "si:drag-handle-line", className: "rotate-90", fontSize: 16 }) }) }), _jsx("div", { style: { height: '100%', width: afterWidth, left: afterStart }, className: cx('bg-gray-500/50 absolute top-0 border-l-2 border-gray-900 dark:border-gray-100'), children: _jsx("div", { className: "w-3 h-4 absolute top-0 rounded-b bg-gray-200 cursor-ew-resize flex justify-center left-[-7px]", onMouseDown: e => {
+                        setDraggingEnd(true);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, ref: windowEndHandleRef, onMouseEnter: () => {
+                        setIsHoveringDragHandle(true);
+                    }, onMouseLeave: () => {
+                        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, }) => {
+    const [mousePosition, setMousePosition] = useState(undefined);
+    const [dragStart, setDragStart] = useState(undefined);
+    const [isHoveringDragHandle, setIsHoveringDragHandle] = 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([0, d3.max(data, d => d.value)], [height - marginBottom, marginTop]);
+    const area = d3
+        .area()
+        .curve(d3.curveMonotoneX)
+        .x(d => x(d.timestamp))
+        .y0(y(0))
+        .y1(d => y(d.value));
+    const zoomWindow = useMemo(() => {
+        if (selectionBounds === undefined) {
+            return undefined;
+        }
+        return [x(selectionBounds[0]), x(selectionBounds[1])];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectionBounds]);
+    const setSelectionBoundsWithScaling = ([startPx, endPx]) => {
+        setSelectionBounds([x.invert(startPx).getTime(), x.invert(endPx).getTime()]);
+    };
+    return (_jsxs("div", { style: { height, width }, onMouseMove: e => {
+            const [x, y] = d3.pointer(e);
+            setMousePosition([x, y]);
+        }, onMouseLeave: () => {
+            setMousePosition(undefined);
+            setDragStart(undefined);
+        }, onMouseDown: e => {
+            // only left mouse button
+            if (e.button !== 0) {
+                return;
+            }
+            // X/Y coordinate array relative to svg
+            const rel = d3.pointer(e);
+            const xCoordinate = rel[0];
+            const xCoordinateWithoutMargin = xCoordinate - marginLeft;
+            if (xCoordinateWithoutMargin >= 0) {
+                setDragStart(xCoordinateWithoutMargin);
+            }
+            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 }), _jsx("div", { className: cx('absolute top-0 left-0 w-full h-full bg-gray-900/50 dark:bg-gray-200/50', {
+                    hidden: isDragging || selectionBounds !== undefined,
+                }) }), _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsx("path", { fill: fill, d: area(data), className: "opacity-80" }) })] }));
+};

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/react';
+import { DataPoint, NumberDuo } from './AreaGraph';
+declare const meta: Meta;
+export default meta;
+export declare const ThreeCPUStrips: {
+    args: {
+        cpus: string[];
+        data: DataPoint[][];
+        selectedTimeline: {
+            index: number;
+            bounds: number[];
+        };
+        onSelectedTimeline: (index: number, bounds: NumberDuo) => void;
+    };
+    render: (args: any) => JSX.Element;
+};
+//# sourceMappingURL=MetricsGraphStrips.stories.d.ts.map

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts.map

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

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } 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.
+// eslint-disable-next-line import/named
+import { useArgs } from '@storybook/preview-api';
+import { MetricsGraphStrips } from './index';
+const mockData = [[], [], []];
+for (let i = 0; i < 200; i++) {
+    for (let j = 0; j < mockData.length; j++) {
+        mockData[j].push({
+            timestamp: 1731326092000 + i * 100,
+            value: Math.floor(Math.random() * 100),
+        });
+    }
+}
+const meta = {
+    title: 'components/MetricsGraphStrips',
+    component: MetricsGraphStrips,
+};
+export default meta;
+export const ThreeCPUStrips = {
+    args: {
+        cpus: Array.from(mockData, (_, i) => `CPU ${i + 1}`),
+        data: mockData,
+        selectedTimeline: { index: 1, bounds: [mockData[0][25].timestamp, mockData[0][100].timestamp] },
+        onSelectedTimeline: (index, bounds) => {
+            console.log('onSelectedTimeline', index, bounds);
+        },
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onSelectedTimeline = (index, bounds) => {
+            args.onSelectedTimeline(index, bounds);
+            setArgs({ ...args, selectedTimeline: { index, bounds } });
+        };
+        return _jsx(MetricsGraphStrips, { ...args, onSelectedTimeline: onSelectedTimeline });
+    },
+};

package/dist/MetricsGraphStrips/TimelineGuide/index.d.ts

@@ -0,0 +1,10 @@
+import { DataPoint } from '../AreaGraph';
+interface Props {
+    width: number;
+    height: number;
+    margin: number;
+    data: DataPoint[][];
+}
+export declare const TimelineGuide: ({ data, width, height, margin }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/MetricsGraphStrips/TimelineGuide/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/TimelineGuide/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,EAAY,MAAM,cAAc,CAAC;AAElD,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;CACrB;AAaD,eAAO,MAAM,aAAa,oCAAmC,KAAK,KAAG,GAAG,CAAC,OAyExE,CAAC"}

package/dist/MetricsGraphStrips/TimelineGuide/index.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx } 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 { Fragment, useMemo } from 'react';
+import * as d3 from 'd3';
+const alignBeforeAxisCorrection = (val) => {
+    if (val < 10000) {
+        return -24;
+    }
+    if (val < 100000) {
+        return -28;
+    }
+    return 0;
+};
+export const TimelineGuide = ({ data, width, height, margin }) => {
+    const bounds = useMemo(() => {
+        const bounds = [Infinity, -Infinity];
+        data.forEach(cpuData => {
+            cpuData.forEach(dataPoint => {
+                bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
+                bounds[1] = Math.max(bounds[1], dataPoint.timestamp);
+            });
+        });
+        return [0, bounds[1] - bounds[0]];
+    }, [data]);
+    const xScale = d3.scaleLinear().domain(bounds).range([0, width]);
+    return (_jsx("div", { className: "relative h-4", children: _jsx("div", { className: "absolute", style: { width, height }, children: _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks().map((d, i) => (_jsxs(Fragment, { children: [_jsx("g", { className: "tick", 
+                                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                                    transform: `translate(${xScale(d) + alignBeforeAxisCorrection(d)}, ${-height})`, children: _jsxs("text", { fill: "currentColor", dy: ".71em", y: 9, children: [d, " ms"] }) }, `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: 0, x2: width, y1: -height + 1, y2: -height + 1 }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: width, y1: -height + 20, y2: -height + 20 })] }) }) }) }));
+};

package/dist/MetricsGraphStrips/index.d.ts

@@ -0,0 +1,13 @@
+import { DataPoint, NumberDuo } from './AreaGraph';
+interface Props {
+    cpus: string[];
+    data: DataPoint[][];
+    selectedTimeline?: {
+        index: number;
+        bounds: NumberDuo;
+    };
+    onSelectedTimeline: (index: number, bounds: NumberDuo | undefined) => void;
+}
+export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeline, onSelectedTimeline, }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAY,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAG5D,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5E;AAMD,eAAO,MAAM,kBAAkB,0DAK5B,KAAK,KAAG,GAAG,CAAC,OAoDd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -0,0 +1,41 @@
+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 { useState } from 'react';
+import { Icon } from '@iconify/react';
+import * as d3 from 'd3';
+import { AreaGraph } from './AreaGraph';
+import { TimelineGuide } from './TimelineGuide';
+const getTimelineGuideHeight = (cpus, collapsedIndices) => {
+    return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
+};
+export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTimeline, }) => {
+    const [collapsedIndices, setCollapsedIndices] = useState([]);
+    // @ts-expect-error
+    const color = d3.scaleOrdinal(d3.schemeObservable10);
+    return (_jsxs("div", { className: "flex flex-col gap-1 relative", children: [_jsx(TimelineGuide, { data: data, width: 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
+                const isCollapsed = collapsedIndices.includes(i);
+                return (_jsxs("div", { className: "relative min-h-5", children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer z-30", onClick: () => {
+                                const newCollapsedIndices = [...collapsedIndices];
+                                if (collapsedIndices.includes(i)) {
+                                    newCollapsedIndices.splice(newCollapsedIndices.indexOf(i), 1);
+                                }
+                                else {
+                                    newCollapsedIndices.push(i);
+                                }
+                                setCollapsedIndices(newCollapsedIndices);
+                            }, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), cpu] }), !isCollapsed ? (_jsx(AreaGraph, { data: data[i], height: 56, width: 1468, fill: color(i.toString()), selectionBounds: selectedTimeline?.index === i ? selectedTimeline.bounds : undefined, setSelectionBounds: bounds => {
+                                onSelectedTimeline(i, bounds);
+                            } })) : null] }, cpu));
+            })] }));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAK1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAY1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAMD,QAAA,MAAM,kBAAkB,uIAarB,uBAAuB,KAAG,GAAG,CAAC,OA6LhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAMD,QAAA,MAAM,kBAAkB,uIAarB,uBAAuB,KAAG,GAAG,CAAC,OA+KhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -12,16 +12,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
-import { tableFromIPC } from 'apache-arrow';
 import { AnimatePresence, motion } from 'framer-motion';
 import { IcicleGraphSkeleton, useParcaContext, useURLState } from '@parca/components';
-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 { FIELD_FUNCTION_NAME, IcicleGraphArrow } from './IcicleGraphArrow';
-import ColorStackLegend from './IcicleGraphArrow/ColorStackLegend';
-import useMappingList, { useFilenamesList } from './IcicleGraphArrow/useMappingList';
+import useMappingList from './IcicleGraphArrow/useMappingList';
 const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
@@ -30,12 +28,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
-    const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
-    const table = useMemo(() => {
-        return arrow !== undefined ? tableFromIPC(arrow.record) : null;
-    }, [arrow]);
     const mappingsList = useMappingList(metadataMappingFiles);
-    const filenamesList = useFilenamesList(table);
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState('sort_by');
     const [colorBy, setColorBy] = useURLState('color_by');
     // By default, we want delta profiles (CPU) to be relatively compared.
@@ -43,7 +36,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
     const [compareAbsolute = compareAbsoluteDefault] = useURLState('compare_absolute');
     const isCompareAbsolute = compareAbsolute === 'true';
-    const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
     const mappingsListCount = useMemo(() => mappingsList.filter(m => m !== '').length, [mappingsList]);
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
         if (graph === undefined && arrow === undefined) {
@@ -118,6 +110,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorByValue === 'binary' ? mappingsList : filenamesList, loading: isLoading })), _jsx("div", { className: "min-h-48", id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsx("div", { className: "min-h-48", id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileView/ColorStackLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../src/ProfileView/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAYrC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,uCAA8C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OAmGrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileView}/ColorStackLegend.js

@@ -17,8 +17,8 @@ import cx from 'classnames';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
 import { EVERYTHING_ELSE, selectDarkMode, useAppSelector } from '@parca/store';
-import { getMappingColors } from '.';
-import useMappingList from './useMappingList';
+import { getMappingColors } from '../ProfileIcicleGraph/IcicleGraphArrow/';
+import useMappingList from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
     const isDarkMode = useAppSelector(selectDarkMode);
     const currentColorProfile = useCurrentColorProfile();

package/dist/ProfileView/VisualizationPanel.d.ts

@@ -9,8 +9,11 @@ interface Props {
     getDashboardItemByType: (props: {
         type: string;
         isHalfScreen: boolean;
-        setActionButtons: (actionButtons: JSX.Element) => void;
     }) => JSX.Element;
+    actionButtons: {
+        icicle: JSX.Element;
+        table: JSX.Element;
+    };
 }
 export declare const VisualizationPanel: React.NamedExoticComponent<Props>;
 export {};

package/dist/ProfileView/VisualizationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualizationPanel.d.ts","sourceRoot":"","sources":["../../src/ProfileView/VisualizationPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAC,gCAAgC,EAAC,MAAM,qBAAqB,CAAC;AAK1E,UAAU,KAAK;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,gCAAgC,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAC9B,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,OAAO,CAAC;QACtB,gBAAgB,EAAE,CAAC,aAAa,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;KACxD,KAAK,GAAG,CAAC,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,mCAsD7B,CAAC"}
+{"version":3,"file":"VisualizationPanel.d.ts","sourceRoot":"","sources":["../../src/ProfileView/VisualizationPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAC,gCAAgC,EAAC,MAAM,qBAAqB,CAAC;AAK1E,UAAU,KAAK;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,gCAAgC,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACtF,aAAa,EAAE;QACb,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;QACpB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,kBAAkB,mCAyD7B,CAAC"}

package/dist/ProfileView/VisualizationPanel.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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.
@@ -11,17 +11,15 @@ import { Fragment as _Fragment, jsx as _jsx, 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 React, { useState } from 'react';
+import React from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { IconButton, useParcaContext } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
-export const VisualizationPanel = React.memo(function VisualizationPanel({ dashboardItem, isMultiPanelView, handleClosePanel, dragHandleProps, getDashboardItemByType, }) {
-    const [actionButtons, setActionButtons] = useState(_jsx(_Fragment, {}));
+export const VisualizationPanel = React.memo(function VisualizationPanel({ dashboardItem, isMultiPanelView, handleClosePanel, dragHandleProps, getDashboardItemByType, actionButtons, }) {
     const { flamegraphHint } = useParcaContext();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), _jsx("div", { className: "flex gap-2", children: actionButtons })] }), _jsx("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'), children: dashboardItem === 'icicle' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), isMultiPanelView ? (_jsx("div", { className: "flex gap-2", children: actionButtons[dashboardItem] })) : null] }), _jsx("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'), children: dashboardItem === 'icicle' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
                 type: dashboardItem,
                 isHalfScreen: isMultiPanelView,
-                setActionButtons,
             })] }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACV,GAAG,EACJ,MAAM,eAAe,CAAC;AAUvB,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAO/C,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,WAAW,0JAYrB,gBAAgB,KAAG,GAAG,CAAC,OA6UzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA2BA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACV,GAAG,EACJ,MAAM,eAAe,CAAC;AAavB,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAW/C,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,WAAW,0JAYrB,gBAAgB,KAAG,GAAG,CAAC,OAuXzB,CAAC"}