@parca/profile 0.16.443 → 0.16.445

package/src/MetricsGraphStrips/AreaGraph/index.tsx

@@ -0,0 +1,321 @@
+// 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';
+
+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;
+}
+
+const DraggingWindow = ({
+  dragStart,
+  currentX,
+}: {
+  dragStart: number | undefined;
+  currentX: number | undefined;
+}): JSX.Element | null => {
+  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 (
+    <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'
+      )}
+    ></div>
+  );
+};
+
+const ZoomWindow = ({
+  zoomWindow,
+  width,
+  onZoomWindowChange,
+  setIsHoveringDragHandle,
+}: {
+  zoomWindow?: NumberDuo;
+  width: number;
+  onZoomWindowChange: (newWindow: NumberDuo) => void;
+  setIsHoveringDragHandle: (arg: boolean) => void;
+}): JSX.Element | null => {
+  const windowStartHandleRef = useRef<HTMLDivElement>(null);
+  const windowEndHandleRef = useRef<HTMLDivElement>(null);
+  const [zoomWindowState, setZoomWindowState] = useState<NumberDuo | undefined>(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 (
+    <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);
+      }}
+    >
+      <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'
+        )}
+      >
+        <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);
+          }}
+        >
+          <Icon icon="si:drag-handle-line" className="rotate-90" fontSize={16} />
+        </div>
+      </div>
+
+      <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'
+        )}
+      >
+        <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);
+          }}
+        >
+          <Icon icon="si:drag-handle-line" className="rotate-90" fontSize={16} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const AreaGraph = ({
+  data,
+  height,
+  width,
+  marginLeft = 0,
+  marginRight = 0,
+  marginBottom = 0,
+  marginTop = 0,
+  fill = 'gray',
+  selectionBounds,
+  setSelectionBounds,
+}: Props): JSX.Element => {
+  const [mousePosition, setMousePosition] = useState<NumberDuo | undefined>(undefined);
+  const [dragStart, setDragStart] = useState<number | undefined>(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) as NumberDuo, [
+    marginLeft,
+    width - marginRight,
+  ]);
+
+  // Declare the y (vertical position) scale.
+  const y = d3.scaleLinear(
+    [0, d3.max(data, d => d.value) as number],
+    [height - marginBottom, marginTop]
+  );
+  const area = d3
+    .area<DataPoint>()
+    .curve(d3.curveMonotoneX)
+    .x(d => x(d.timestamp))
+    .y0(y(0))
+    .y1(d => y(d.value));
+
+  const zoomWindow: NumberDuo | undefined = 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]: NumberDuo): void => {
+    setSelectionBounds([x.invert(startPx).getTime(), x.invert(endPx).getTime()]);
+  };
+
+  return (
+    <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"
+    >
+      {/* onHover guide, only visible when hovering and not dragging and not having an active zoom window */}
+      <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,
+        })}
+      ></div>
+
+      {/* drag guide, only visible when dragging */}
+      <DraggingWindow dragStart={dragStart} currentX={mousePosition?.[0]} />
+
+      {/* zoom window */}
+      <ZoomWindow
+        zoomWindow={zoomWindow}
+        width={width}
+        onZoomWindowChange={setSelectionBoundsWithScaling}
+        setIsHoveringDragHandle={setIsHoveringDragHandle}
+      />
+
+      {/* Inactive indicator */}
+      <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,
+        })}
+      ></div>
+
+      <svg style={{width: '100%', height: '100%'}}>
+        <path fill={fill} d={area(data) as string} className="opacity-80" />
+      </svg>
+    </div>
+  );
+};

package/src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx

@@ -0,0 +1,57 @@
+// 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';
+// eslint-disable-next-line import/named
+import {Meta} from '@storybook/react';
+
+import {DataPoint, NumberDuo} from './AreaGraph';
+import {MetricsGraphStrips} from './index';
+
+const mockData: DataPoint[][] = [[], [], []];
+
+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: 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: number, bounds: NumberDuo): void => {
+      console.log('onSelectedTimeline', index, bounds);
+    },
+  },
+  render: function Component(args: any): JSX.Element {
+    const [, setArgs] = useArgs();
+
+    const onSelectedTimeline = (index: number, bounds: NumberDuo): void => {
+      args.onSelectedTimeline(index, bounds);
+      setArgs({...args, selectedTimeline: {index, bounds}});
+    };
+
+    return <MetricsGraphStrips {...args} onSelectedTimeline={onSelectedTimeline} />;
+  },
+};

package/src/MetricsGraphStrips/TimelineGuide/index.tsx

@@ -0,0 +1,111 @@
+// 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';
+
+import {DataPoint, NumberDuo} from '../AreaGraph';
+
+interface Props {
+  width: number;
+  height: number;
+  margin: number;
+  data: DataPoint[][];
+}
+
+const alignBeforeAxisCorrection = (val: number): number => {
+  if (val < 10000) {
+    return -24;
+  }
+  if (val < 100000) {
+    return -28;
+  }
+
+  return 0;
+};
+
+export const TimelineGuide = ({data, width, height, margin}: Props): JSX.Element => {
+  const bounds = useMemo(() => {
+    const bounds: NumberDuo = [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 (
+    <div className="relative h-4">
+      <div className="absolute" style={{width, height}}>
+        <svg style={{width: '100%', height: '100%'}}>
+          <g
+            className="x axis"
+            fill="none"
+            fontSize="10"
+            textAnchor="middle"
+            transform={`translate(0,${height - margin})`}
+          >
+            {xScale.ticks().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(${xScale(d) + alignBeforeAxisCorrection(d)}, ${-height})`}
+                >
+                  {/* <line y2={6} className="stroke-gray-300 dark:stroke-gray-500" /> */}
+                  <text fill="currentColor" dy=".71em" y={9}>
+                    {d} ms
+                  </text>
+                </g>
+                <g key={`grid-${i}`}>
+                  <line
+                    className="stroke-gray-300 dark:stroke-gray-500"
+                    x1={xScale(d)}
+                    x2={xScale(d)}
+                    y1={0}
+                    y2={-height + margin}
+                  />
+                </g>
+              </Fragment>
+            ))}
+            <line
+              className="stroke-gray-300 dark:stroke-gray-500"
+              x1={0}
+              x2={width}
+              y1={-height + 1}
+              y2={-height + 1}
+            />
+            <line
+              className="stroke-gray-300 dark:stroke-gray-500"
+              x1={0}
+              x2={width}
+              y1={-height + 20}
+              y2={-height + 20}
+            />
+            {/* <g transform={`translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`}>
+                <text fill="currentColor" dy=".71em" y={5} className="text-sm">
+                    Time
+                </text>
+            </g> */}
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+};

package/src/MetricsGraphStrips/index.tsx

@@ -0,0 +1,93 @@
+// 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, DataPoint, NumberDuo} from './AreaGraph';
+import {TimelineGuide} from './TimelineGuide';
+
+interface Props {
+  cpus: string[];
+  data: DataPoint[][];
+  selectedTimeline?: {
+    index: number;
+    bounds: NumberDuo;
+  };
+  onSelectedTimeline: (index: number, bounds: NumberDuo | undefined) => void;
+}
+
+const getTimelineGuideHeight = (cpus: string[], collapsedIndices: number[]): number => {
+  return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
+};
+
+export const MetricsGraphStrips = ({
+  cpus,
+  data,
+  selectedTimeline,
+  onSelectedTimeline,
+}: Props): JSX.Element => {
+  const [collapsedIndices, setCollapsedIndices] = useState<number[]>([]);
+
+  // @ts-expect-error
+  const color = d3.scaleOrdinal(d3.schemeObservable10);
+
+  return (
+    <div className="flex flex-col gap-1 relative">
+      <TimelineGuide
+        data={data}
+        width={1468}
+        height={getTimelineGuideHeight(cpus, collapsedIndices)}
+        margin={1}
+      />
+      {cpus.map((cpu, i) => {
+        const isCollapsed = collapsedIndices.includes(i);
+        return (
+          <div className="relative min-h-5" key={cpu}>
+            <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);
+              }}
+            >
+              <Icon icon={isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow'} />
+              {cpu}
+            </div>
+            {!isCollapsed ? (
+              <AreaGraph
+                data={data[i]}
+                height={56}
+                width={1468}
+                fill={color(i.toString()) as string}
+                selectionBounds={
+                  selectedTimeline?.index === i ? selectedTimeline.bounds : undefined
+                }
+                setSelectionBounds={bounds => {
+                  onSelectedTimeline(i, bounds);
+                }}
+              />
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/ProfileIcicleGraph/index.tsx

@@ -13,20 +13,18 @@
 
 import React, {useEffect, useMemo, useState} from 'react';
 
-import {Table, tableFromIPC} from 'apache-arrow';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import {Flamegraph, FlamegraphArrow} from '@parca/client';
 import {IcicleGraphSkeleton, useParcaContext, useURLState} from '@parca/components';
 import {ProfileType} from '@parca/parser';
-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');
 
@@ -70,14 +68,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   const {onError, authenticationErrorMessage, isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
-
-  const table: Table<any> | null = 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');
@@ -89,7 +81,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   const [compareAbsolute = compareAbsoluteDefault] = useURLState('compare_absolute');
   const isCompareAbsolute = compareAbsolute === 'true';
 
-  const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : (colorBy as string);
   const mappingsListCount = useMemo(
     () => mappingsList.filter(m => m !== '').length,
     [mappingsList]
@@ -231,13 +222,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
         transition={{duration: 0.5}}
       >
         {compareMode ? <DiffLegend /> : null}
-        {isColorStackLegendEnabled && (
-          <ColorStackLegend
-            compareMode={compareMode}
-            mappings={colorByValue === 'binary' ? mappingsList : filenamesList}
-            loading={isLoading}
-          />
-        )}
         <div className="min-h-48" id="h-icicle-graph">
           <>{icicleGraph}</>
         </div>

package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileView}/ColorStackLegend.tsx

@@ -20,8 +20,8 @@ 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';
 
 interface Props {
   mappings?: string[];