@parca/profile 0.19.113 → 0.19.115

package/src/{MetricsGraphStrips/AreaGraph → ProfileFlameChart/SamplesStrips/SamplesGraph}/index.tsx

@@ -17,12 +17,18 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 import * as d3 from 'd3';
 
-import {NumberDuo} from '../../utils';
-import {Tooltip} from './Tooltip';
+import {NumberDuo} from '../../../utils';
 
 export interface DataPoint {
   timestamp: number;
   value: number;
+  sampleCount?: number;
+}
+
+interface DragState {
+  stripIndex: number;
+  startX: number;
+  currentX: number;
 }
 
 interface Props {
@@ -36,7 +42,11 @@ interface Props {
   data: DataPoint[];
   selectionBounds?: NumberDuo | undefined;
   setSelectionBounds: (newBounds: NumberDuo | undefined) => void;
-  valueBounds: NumberDuo;
+  stepMs: number;
+  onDragStart?: (startX: number) => void;
+  dragState?: DragState;
+  isAnyDragActive?: boolean;
+  timeBounds?: NumberDuo;
 }
 
 const DraggingWindow = ({
@@ -189,7 +199,7 @@ const ZoomWindow = ({
   );
 };
 
-export const AreaGraph = ({
+export const SamplesGraph = ({
   data,
   height,
   width,
@@ -200,29 +210,30 @@ export const AreaGraph = ({
   fill = 'gray',
   selectionBounds,
   setSelectionBounds,
-  valueBounds,
+  stepMs,
+  onDragStart,
+  dragState,
+  isAnyDragActive = false,
+  timeBounds,
 }: Props): JSX.Element => {
   const [mousePosition, setMousePosition] = useState<NumberDuo | undefined>(undefined);
-  const [dragStart, setDragStart] = useState<number | undefined>(undefined);
   const [isHoveringDragHandle, setIsHoveringDragHandle] = useState(false);
-  const [hoverData, setHoverData] = useState<{timestamp: number; value: number} | null>(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) as NumberDuo, [
-    marginLeft,
-    width - marginRight,
-  ]);
-
-  // Declare the y (vertical position) scale.
-  const y = d3.scaleLinear([valueBounds[0], valueBounds[1]], [height - marginBottom, marginTop]);
-  const area = d3
-    .area<DataPoint>()
-    .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) as NumberDuo);
+  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: NumberDuo | undefined = useMemo(() => {
     if (selectionBounds === undefined) {
@@ -240,7 +251,11 @@ export const AreaGraph = ({
   return (
     <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 (
@@ -250,30 +265,13 @@ export const AreaGraph = ({
           yPos <= height - marginBottom
         ) {
           setMousePosition([xPos, yPos]);
-
-          // Find the closest data point
-          if (!isHoveringDragHandle && !isDragging) {
-            const xDate = x.invert(xPos);
-            const bisect = d3.bisector((d: DataPoint) => 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
@@ -281,45 +279,28 @@ export const AreaGraph = ({
           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"
     >
       {/* 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,
+          hidden: mousePosition === undefined || isAnyDragActive || isHoveringDragHandle,
         })}
       ></div>
 
       {/* drag guide, only visible when dragging */}
-      <DraggingWindow dragStart={dragStart} currentX={mousePosition?.[0]} />
+      <DraggingWindow dragStart={dragState?.startX} currentX={dragState?.currentX} />
 
       {/* zoom window */}
       <ZoomWindow
@@ -329,23 +310,38 @@ export const AreaGraph = ({
         setIsHoveringDragHandle={setIsHoveringDragHandle}
       />
 
-      {/* Update Tooltip conditional render */}
-      {mousePosition !== undefined &&
-        hoverData !== null &&
-        !isDragging &&
-        !isHoveringDragHandle &&
-        isMouseOverGraph && (
-          <Tooltip
-            x={mousePosition[0]}
-            y={mousePosition[1]}
-            timestamp={hoverData.timestamp}
-            value={hoverData.value}
-            containerWidth={width}
-          />
-        )}
-
       <svg style={{width: '100%', height: '100%'}}>
-        <path fill={fill} d={area(data) as string} className="opacity-80" />
+        {/* Background for the full strip area */}
+        <rect
+          x={marginLeft}
+          y={0}
+          width={width - marginLeft - marginRight}
+          height={height}
+          fill={fill}
+          fillOpacity={0.1}
+        />
+        <g>
+          {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 (
+              <rect
+                key={i}
+                x={xPosition}
+                y={0}
+                width={rectWidth}
+                height={height}
+                fill={fill}
+                fillOpacity={opacity}
+              />
+            );
+          })}
+        </g>
       </svg>
     </div>
   );

package/src/{MetricsGraphStrips/MetricsGraphStrips.stories.tsx → ProfileFlameChart/SamplesStrips/SamplesStrips.stories.tsx}

@@ -16,9 +16,9 @@ import {useArgs} from '@storybook/preview-api';
 // eslint-disable-next-line import/named
 import {Meta} from '@storybook/react';
 
-import {NumberDuo} from '../utils';
-import {DataPoint} from './AreaGraph';
-import {MetricsGraphStrips} from './index';
+import {NumberDuo} from '../../utils';
+import {DataPoint} from './SamplesGraph';
+import {SamplesStrip} from './index';
 
 function seededRandom(seed: number): () => number {
   return () => {
@@ -39,8 +39,8 @@ for (let i = 0; i < 200; i++) {
   }
 }
 const meta: Meta = {
-  title: 'components/MetricsGraphStrips',
-  component: MetricsGraphStrips,
+  title: 'components/SamplesStrip',
+  component: SamplesStrip,
 };
 export default meta;
 
@@ -53,6 +53,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: any): JSX.Element {
     const [, setArgs] = useArgs();
@@ -62,6 +63,6 @@ export const ThreeCPUStrips = {
       setArgs({...args, selectedTimeframe: {index, bounds}});
     };
 
-    return <MetricsGraphStrips {...args} onSelectedTimeframe={onSelectedTimeframe} />;
+    return <SamplesStrip {...args} onSelectedTimeframe={onSelectedTimeframe} />;
   },
 };

package/src/ProfileFlameChart/SamplesStrips/index.tsx

@@ -0,0 +1,317 @@
+// 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 {LabelSet} from '@parca/client';
+import {Button} from '@parca/components';
+
+import {TimelineGuide} from '../../TimelineGuide';
+import {NumberDuo} from '../../utils';
+import {DataPoint, SamplesGraph} from './SamplesGraph';
+
+export type {DataPoint} from './SamplesGraph';
+
+interface DragState {
+  stripIndex: number;
+  startX: number;
+  currentX: number;
+}
+
+interface Props {
+  cpus: LabelSet[];
+  data: DataPoint[][];
+  selectedTimeframe?: {
+    labels: LabelSet;
+    bounds: NumberDuo;
+  };
+  onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
+  width?: number;
+  bounds: NumberDuo;
+  stepMs: number;
+}
+
+export const labelSetToString = (labelSet?: LabelSet): string => {
+  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 MAX_VISIBLE_STRIPS = 20;
+
+const getTimelineGuideHeight = (cpusCount: number, collapsedCount: number): number => {
+  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,
+}: {
+  isSelected: boolean;
+  isCollapsed: boolean;
+  cpu: LabelSet;
+  width: number | undefined;
+  onToggleCollapse: () => void;
+  data: DataPoint[];
+  selectionBounds: NumberDuo | undefined;
+  setSelectionBounds: (bounds: NumberDuo | undefined) => void;
+  color: (label: string) => string;
+  stepMs: number;
+  onDragStart: (stripIndex: number, startX: number) => void;
+  dragState: DragState | undefined;
+  stripIndex: number;
+  isAnyDragActive: boolean;
+  timeBounds: NumberDuo;
+}): JSX.Element => {
+  const labelStr = labelSetToString(cpu);
+
+  const {isIntersecting, ref} = useIntersectionObserver({
+    rootMargin: `${stickyPx}px 0px 0px 0px`,
+  });
+
+  const isSticky = useMemo(() => {
+    return isSelected && isIntersecting;
+  }, [isSelected, isIntersecting]);
+
+  return (
+    <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}}
+      key={labelStr}
+      ref={ref}
+    >
+      <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}
+      >
+        <Icon icon={isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow'} />
+        {labelStr}
+      </div>
+      {!isCollapsed ? (
+        <SamplesGraph
+          data={data}
+          height={STRIP_HEIGHT}
+          width={width ?? 1468}
+          fill={color(labelStr)}
+          selectionBounds={selectionBounds}
+          setSelectionBounds={setSelectionBounds}
+          stepMs={stepMs}
+          onDragStart={(startX: number) => onDragStart(stripIndex, startX)}
+          dragState={dragState?.stripIndex === stripIndex ? dragState : undefined}
+          isAnyDragActive={isAnyDragActive}
+          timeBounds={timeBounds}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export const SamplesStrip = ({
+  cpus,
+  data,
+  selectedTimeframe,
+  onSelectedTimeframe,
+  width,
+  bounds,
+  stepMs,
+}: Props): JSX.Element => {
+  const [collapsedLabels, setCollapsedLabels] = useState<Set<string>>(new Set());
+  const [showAll, setShowAll] = useState(false);
+  const [dragState, setDragState] = useState<DragState | undefined>(undefined);
+  const containerRef = useRef<HTMLDivElement>(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]);
+
+  const hasMore = useMemo(() => sortedItems.length > MAX_VISIBLE_STRIPS, [sortedItems]);
+  const visibleItems = useMemo(
+    () => (showAll || !hasMore ? sortedItems : sortedItems.slice(0, MAX_VISIBLE_STRIPS)),
+    [sortedItems, showAll, hasMore]
+  );
+
+  // 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: string): number => {
+      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: string): string => palette[hashStr(label) % palette.length];
+  }, []);
+
+  const handleDragStart = (stripIndex: number, startX: number): void => {
+    setDragState({stripIndex, startX, currentX: startX});
+  };
+
+  const handleMouseMove = (e: React.MouseEvent): void => {
+    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: React.MouseEvent): void => {
+    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]);
+      onSelectedTimeframe(visibleItems[stripIndex].cpu, [startTs, endTs]);
+    }
+
+    setDragState(undefined);
+  };
+
+  const handleMouseLeave = (): void => {
+    setDragState(undefined);
+  };
+
+  if (data.length === 0) {
+    return (
+      <span className="flex justify-center my-10">
+        There is no data matching your filter criteria, please try changing the filter.
+      </span>
+    );
+  }
+
+  return (
+    <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}
+    >
+      <TimelineGuide
+        bounds={[BigInt(0), BigInt(bounds[1] - bounds[0])]}
+        width={width ?? 1468}
+        height={getTimelineGuideHeight(
+          visibleItems.length,
+          [...collapsedLabels].filter(l => visibleItems.some(item => item.label === l)).length
+        )}
+        margin={1}
+      />
+      {visibleItems.map((item, i) => {
+        const isCollapsed = collapsedLabels.has(item.label);
+        const isSelected = isEqual(item.cpu, selectedTimeframe?.labels);
+
+        return (
+          <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}
+            key={item.label}
+          />
+        );
+      })}
+      {hasMore && !showAll && (
+        <Button variant="secondary" onClick={() => setShowAll(true)} className="w-fit mx-auto mt-2">
+          Show all {sortedItems.length} rows
+        </Button>
+      )}
+    </div>
+  );
+};