@parca/profile 0.19.113 → 0.19.114

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,301 @@
+// 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 {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 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 [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]);
+
+  // 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]);
+      // Use sortedItems to get the correct cpu for the strip index
+      onSelectedTimeframe(sortedItems[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(sortedItems.length, collapsedLabels.size)}
+        margin={1}
+      />
+      {sortedItems.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}
+          />
+        );
+      })}
+    </div>
+  );
+};

package/src/ProfileFlameChart/index.tsx

@@ -0,0 +1,305 @@
+// 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} from 'react';
+
+import {LabelSet, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
+import {
+  Button,
+  useParcaContext,
+  useURLState,
+  useURLStateCustom,
+  type OptionsCustom,
+} from '@parca/components';
+import {Matcher, MatcherTypes, ProfileType, Query} from '@parca/parser';
+
+import ProfileFlameGraph, {validateFlameChartQuery} from '../ProfileFlameGraph';
+import {boundsFromProfileSource} from '../ProfileFlameGraph/FlameGraphArrow/utils';
+import {MergedProfileSource, ProfileSource} from '../ProfileSource';
+import type {SamplesData} from '../ProfileView/types/visualization';
+import {useQuery} from '../useQuery';
+import {NumberDuo} from '../utils';
+import {SamplesStrip} from './SamplesStrips';
+
+interface SelectedTimeframe {
+  labels: LabelSet;
+  bounds: NumberDuo;
+}
+
+const TimeframeStateSerializer: OptionsCustom<SelectedTimeframe | undefined> = {
+  parse: (value: string | string[] | undefined) => {
+    if (value == null || value === '' || value === 'undefined' || Array.isArray(value)) {
+      return undefined;
+    }
+    try {
+      const [labelPart, boundsPart] = value.split('|');
+      if (labelPart != null && boundsPart != null) {
+        const labels = labelPart.split(',').map(labelStr => {
+          const [name, ...rest] = labelStr.split(':');
+          return {name, value: rest.join(':')};
+        });
+        const [startMs, endMs] = boundsPart.split(',').map(Number);
+        if (labels.length > 0 && !isNaN(startMs) && !isNaN(endMs)) {
+          return {
+            labels: {labels},
+            bounds: [startMs, endMs] as NumberDuo,
+          };
+        }
+      }
+    } catch {
+      // Ignore parsing errors
+    }
+    return undefined;
+  },
+  stringify: (value: SelectedTimeframe | undefined) => {
+    if (value == null) {
+      return '';
+    }
+    const labelsStr = value.labels.labels.map(l => `${l.name}:${l.value}`).join(',');
+    return `${labelsStr}|${value.bounds[0]},${value.bounds[1]}`;
+  },
+};
+
+interface ProfileFlameChartProps {
+  samplesData?: SamplesData;
+  queryClient: QueryServiceClient;
+  profileSource: ProfileSource;
+  width: number;
+  total: bigint;
+  filtered: bigint;
+  profileType?: ProfileType;
+  isHalfScreen: boolean;
+  metadataMappingFiles?: string[];
+  metadataLoading?: boolean;
+  onSwitchToOneMinute?: () => void;
+}
+
+// Helper to create a filtered profile source with narrowed time bounds
+// and dimension label matchers from the selected strip.
+const createFilteredProfileSource = (
+  profileSource: ProfileSource,
+  selectedTimeframe: {labels: LabelSet; bounds: NumberDuo}
+): ProfileSource | null => {
+  if (!(profileSource instanceof MergedProfileSource)) {
+    return null;
+  }
+
+  // The bounds are in milliseconds, convert to nanoseconds for the profile source
+  // Round to integers since BigInt requires integer values
+  const mergeFrom = BigInt(Math.round(selectedTimeframe.bounds[0])) * 1_000_000n;
+  const mergeTo = BigInt(Math.round(selectedTimeframe.bounds[1])) * 1_000_000n;
+
+  // Add dimension labels as additional matchers to the query
+  const dimensionMatchers = selectedTimeframe.labels.labels.map(
+    l => new Matcher(l.name, MatcherTypes.MatchEqual, l.value)
+  );
+
+  const query = new Query(
+    profileSource.query.profType,
+    [...profileSource.query.matchers, ...dimensionMatchers],
+    ''
+  );
+
+  return new MergedProfileSource(mergeFrom, mergeTo, query);
+};
+
+export const ProfileFlameChart = ({
+  samplesData,
+  queryClient,
+  profileSource,
+  width,
+  total,
+  filtered,
+  profileType,
+  isHalfScreen,
+  metadataMappingFiles,
+  metadataLoading,
+  onSwitchToOneMinute,
+}: ProfileFlameChartProps): JSX.Element => {
+  const {loader} = useParcaContext();
+
+  const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom<
+    SelectedTimeframe | undefined
+  >('flamechart_timeframe', TimeframeStateSerializer);
+
+  // Read flamechart dimension from URL state to detect changes
+  const [flamechartDimension] = useURLState<string[]>('flamechart_dimension', {
+    alwaysReturnArray: true,
+  });
+
+  // Reset selection when the parent time range (profileSource) changes
+  const timeBoundsKey = boundsFromProfileSource(profileSource).join(',');
+  const prevTimeBoundsKey = useRef(timeBoundsKey);
+  useEffect(() => {
+    if (prevTimeBoundsKey.current !== timeBoundsKey) {
+      prevTimeBoundsKey.current = timeBoundsKey;
+      setSelectedTimeframe(undefined);
+    }
+  }, [timeBoundsKey, setSelectedTimeframe]);
+
+  // Reset selection when the dimension changes
+  const dimensionKey = (flamechartDimension ?? []).join(',');
+  const prevDimensionKey = useRef(dimensionKey);
+  useEffect(() => {
+    if (prevDimensionKey.current !== dimensionKey) {
+      prevDimensionKey.current = dimensionKey;
+      setSelectedTimeframe(undefined);
+    }
+  }, [dimensionKey, setSelectedTimeframe]);
+
+  // Handle timeframe selection from strips
+  const handleSelectedTimeframe = (labels: LabelSet, bounds: NumberDuo | undefined): void => {
+    if (bounds === undefined) {
+      setSelectedTimeframe(undefined);
+    } else {
+      setSelectedTimeframe({labels, bounds});
+    }
+  };
+
+  // Create filtered profile source when selection exists
+  const filteredProfileSource = useMemo(() => {
+    if (selectedTimeframe == null) return null;
+    return createFilteredProfileSource(profileSource, selectedTimeframe);
+  }, [profileSource, selectedTimeframe]);
+
+  // Query flamechart data only when a strip selection exists
+  const {
+    isLoading: flamechartLoading,
+    response: flamechartResponse,
+    error: flamechartError,
+  } = useQuery(
+    queryClient,
+    filteredProfileSource ?? profileSource,
+    QueryRequest_ReportType.FLAMECHART,
+    {
+      skip: selectedTimeframe == null || filteredProfileSource == null,
+    }
+  );
+
+  const flamechartArrow =
+    flamechartResponse?.report.oneofKind === 'flamegraphArrow'
+      ? flamechartResponse.report.flamegraphArrow
+      : undefined;
+  const flamechartTotal = flamechartResponse != null ? BigInt(flamechartResponse.total) : total;
+  const flamechartFiltered =
+    flamechartResponse != null ? BigInt(flamechartResponse.filtered) : filtered;
+
+  // Get time bounds from profile source for the strips
+  const timeBounds = boundsFromProfileSource(profileSource);
+
+  // Transform samples data for SamplesStrip component
+  const stripsData = useMemo(() => {
+    if (samplesData?.series == null) return {cpus: [], data: [], stepMs: 0};
+
+    const cpus = samplesData.series.map(s => s.labelset);
+    const data = samplesData.series.map(s => s.data);
+
+    const stepMs = samplesData.stepMs ?? 0;
+
+    return {cpus, data, stepMs};
+  }, [samplesData?.series, samplesData?.stepMs]);
+
+  const {isValid, isNonDelta, isDurationTooLong} = validateFlameChartQuery(
+    profileSource as MergedProfileSource
+  );
+
+  if (!isValid) {
+    if (isDurationTooLong) {
+      return (
+        <div className="flex flex-col justify-center items-center p-10 text-center gap-4 text-sm">
+          <span>
+            Flame chart is unavailable for queries longer than one minute. Try reducing the time
+            range to one minute or selecting a point in the metrics graph.
+          </span>
+          {onSwitchToOneMinute != null && (
+            <Button variant="primary" onClick={onSwitchToOneMinute}>
+              Switch to last 1 minute
+            </Button>
+          )}
+        </div>
+      );
+    }
+
+    const message = isNonDelta
+      ? 'To use the Flame chart, please switch to a Delta profile.'
+      : 'Flame chart is unavailable for this query.';
+    return (
+      <div className="flex flex-col justify-center p-10 text-center gap-6 text-sm">{message}</div>
+    );
+  }
+
+  const hasDimension = (flamechartDimension ?? []).length > 0;
+
+  // Show loader while metadata labels are loading (needed for dimension auto-selection)
+  if (metadataLoading === true) {
+    return <>{loader}</>;
+  }
+
+  if (!hasDimension) {
+    return (
+      <div className="flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm">
+        Select a label in the &quot;Samples group by&quot; dropdown above to view the samples
+        strips.
+      </div>
+    );
+  }
+
+  if (samplesData?.loading === true) {
+    return <>{loader}</>;
+  }
+
+  return (
+    <div>
+      {/* Samples Strips - rendered above flamechart */}
+      {stripsData.cpus.length > 0 && stripsData.data.length > 0 && (
+        <div className="mb-2">
+          <SamplesStrip
+            cpus={stripsData.cpus}
+            data={stripsData.data}
+            selectedTimeframe={selectedTimeframe}
+            onSelectedTimeframe={handleSelectedTimeframe}
+            width={width}
+            bounds={[Number(timeBounds[0] / 1_000_000n), Number(timeBounds[1] / 1_000_000n)]}
+            stepMs={stripsData.stepMs}
+          />
+        </div>
+      )}
+
+      {/* Flamegraph visualization - only shown when a time range is selected in the strips */}
+      {selectedTimeframe != null && filteredProfileSource != null ? (
+        <ProfileFlameGraph
+          arrow={flamechartArrow}
+          loading={flamechartLoading}
+          error={flamechartError}
+          profileSource={filteredProfileSource}
+          width={width}
+          total={flamechartTotal}
+          filtered={flamechartFiltered}
+          profileType={profileType}
+          isHalfScreen={isHalfScreen}
+          metadataMappingFiles={metadataMappingFiles}
+          metadataLoading={metadataLoading}
+          isFlameChart={true}
+          curPathArrow={[]}
+          setNewCurPathArrow={() => {}}
+        />
+      ) : (
+        <div className="flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm">
+          Select a time range in the samples strips above to view the flamechart.
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProfileFlameChart;

package/src/ProfileFlameGraph/index.tsx

@@ -77,7 +77,6 @@ export const validateFlameChartQuery = (
 ): {isValid: boolean; isNonDelta: boolean; isDurationTooLong: boolean} => {
   const isNonDelta = !profileSource.ProfileType().delta;
   const duration = profileSource.mergeTo - profileSource.mergeFrom;
-  console.log('duration of flame chart query: ', duration, 'ns');
   const isDurationTooLong = duration > 60_000_000_000n; // 60 seconds in nanoseconds
   return {isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong};
 };