@parca/profile 0.19.133 → 0.19.135

package/src/ProfileFlameChart/SamplesStrips/index.tsx

@@ -20,11 +20,12 @@ import isEqual from 'fast-deep-equal';
 import {useIntersectionObserver} from 'usehooks-ts';
 
 import {LabelSet} from '@parca/client';
-import {Button} from '@parca/components';
+import {Button, useParcaContext} from '@parca/components';
 
 import {TimelineGuide} from '../../TimelineGuide';
 import {NumberDuo} from '../../utils';
 import {DataPoint, SamplesGraph} from './SamplesGraph';
+import {createLabelSetComparator, labelSetToString} from './labelSetUtils';
 
 export type {DataPoint} from './SamplesGraph';
 
@@ -35,6 +36,7 @@ interface DragState {
 }
 
 interface Props {
+  loading?: boolean;
   cpus: LabelSet[];
   data: DataPoint[][];
   selectedTimeframe?: {
@@ -47,33 +49,45 @@ interface Props {
   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;
+const STRIP_HEIGHT = 24;
+const LABEL_ROW_HEIGHT = 16; // text-xs label row above each strip
+const GAP = 4; // gap-1 between flex children
+const MAX_VISIBLE_STRIPS = 20;
+const LOADING_STRIP_COUNT = 8;
+
+const generateMockStripData = (
+  bounds: NumberDuo
+): {cpus: LabelSet[]; data: DataPoint[][]; stepMs: number} => {
+  const stepMs = Math.max(Math.floor((bounds[1] - bounds[0]) / 240), 100);
+  const cpus: LabelSet[] = Array.from({length: LOADING_STRIP_COUNT}, (_, i) => ({
+    labels: [{name: 'cpu', value: String(i)}],
+  }));
+
+  let seed = 42;
+  const data = cpus.map(() => {
+    const points: DataPoint[] = [];
+    for (let ts = bounds[0]; ts < bounds[1]; ts += stepMs) {
+      seed = (seed * 16807 + 11) % 2147483647;
+      const value = (seed % 80) + 10;
+      seed = (seed * 16807 + 11) % 2147483647;
+      const sampleCount = (seed % 50) + 1;
+      points.push({timestamp: ts, value, sampleCount});
     }
-    str += `${label.name}: ${label.value}`;
-  }
-
-  str += '}';
+    return points;
+  });
 
-  return str;
+  return {cpus, data, stepMs};
 };
 
-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 expandedCount = cpusCount - collapsedCount;
+  // Each expanded strip: label row + graph height
+  // Each collapsed strip: min-h-5 (20px)
+  // Gaps between strips (gap-1 = 4px)
+  const expandedTotal = expandedCount * (LABEL_ROW_HEIGHT + STRIP_HEIGHT);
+  const collapsedTotal = collapsedCount * 20; // min-h-5
+  const gaps = cpusCount * GAP + 20; // timeline header
+  return expandedTotal + collapsedTotal + gaps;
 };
 
 const stickyPx = 0;
@@ -81,7 +95,7 @@ const stickyPx = 0;
 const SamplesGraphContainer = ({
   isSelected,
   isCollapsed,
-  cpu,
+  label: labelStr,
   width,
   onToggleCollapse,
   data,
@@ -94,10 +108,11 @@ const SamplesGraphContainer = ({
   stripIndex,
   isAnyDragActive,
   timeBounds,
+  loading,
 }: {
   isSelected: boolean;
   isCollapsed: boolean;
-  cpu: LabelSet;
+  label: string;
   width: number | undefined;
   onToggleCollapse: () => void;
   data: DataPoint[];
@@ -110,9 +125,8 @@ const SamplesGraphContainer = ({
   stripIndex: number;
   isAnyDragActive: boolean;
   timeBounds: NumberDuo;
+  loading?: boolean;
 }): JSX.Element => {
-  const labelStr = labelSetToString(cpu);
-
   const {isIntersecting, ref} = useIntersectionObserver({
     rootMargin: `${stickyPx}px 0px 0px 0px`,
   });
@@ -133,14 +147,17 @@ const SamplesGraphContainer = ({
       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}
+        className="text-xs flex gap-[2px] items-center px-1 cursor-pointer text-gray-600 dark:text-gray-400"
+        onClick={loading === true ? undefined : onToggleCollapse}
       >
-        <Icon icon={isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow'} />
-        {labelStr}
+        {loading === true ? (
+          <div className="h-3 w-24 rounded bg-gray-200 dark:bg-gray-700 mb-1" />
+        ) : (
+          <>
+            <Icon icon={isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow'} className="shrink-0" />
+            {labelStr}
+          </>
+        )}
       </div>
       {!isCollapsed ? (
         <SamplesGraph
@@ -162,6 +179,7 @@ const SamplesGraphContainer = ({
 };
 
 export const SamplesStrip = ({
+  loading,
   cpus,
   data,
   selectedTimeframe,
@@ -170,6 +188,18 @@ export const SamplesStrip = ({
   bounds,
   stepMs,
 }: Props): JSX.Element => {
+  const {isDarkMode} = useParcaContext();
+  const effectiveLoading = loading === true;
+
+  // When loading, use mock data to render a pixel-perfect skeleton
+  const mockData = useMemo(
+    () => (effectiveLoading && bounds[0] !== bounds[1] ? generateMockStripData(bounds) : null),
+    [effectiveLoading, bounds]
+  );
+  const effectiveCpus = mockData?.cpus ?? cpus;
+  const effectiveData = mockData?.data ?? data;
+  const effectiveStepMs = mockData?.stepMs ?? stepMs;
+
   const [collapsedLabels, setCollapsedLabels] = useState<Set<string>>(new Set());
   const [showAll, setShowAll] = useState(false);
   const [dragState, setDragState] = useState<DragState | undefined>(undefined);
@@ -177,15 +207,19 @@ export const SamplesStrip = ({
 
   const isDragging = dragState !== undefined;
 
-  // Sort cpus and data by label string for consistent ordering across reloads
+  const {compare, keyOrder} = useMemo(
+    () => createLabelSetComparator(effectiveCpus),
+    [effectiveCpus]
+  );
+
   const sortedItems = useMemo(() => {
-    const items = cpus.map((cpu, i) => ({
+    const items = effectiveCpus.map((cpu, i) => ({
       cpu,
-      data: data[i],
-      label: labelSetToString(cpu),
+      data: effectiveData[i],
+      label: labelSetToString(cpu, keyOrder),
     }));
-    return items.sort((a, b) => a.label.localeCompare(b.label));
-  }, [cpus, data]);
+    return items.sort((a, b) => compare(a.cpu, b.cpu));
+  }, [effectiveCpus, effectiveData, compare, keyOrder]);
 
   const hasMore = useMemo(() => sortedItems.length > MAX_VISIBLE_STRIPS, [sortedItems]);
   const visibleItems = useMemo(
@@ -194,8 +228,11 @@ export const SamplesStrip = ({
   );
 
   // Deterministic color: hash the label string so the same label always gets the same color
-  // regardless of render order.
+  // regardless of render order. When loading, use muted gray.
   const color = useMemo(() => {
+    if (effectiveLoading) {
+      return (_label: string): string => (isDarkMode ? '#374151' : '#d1d5db');
+    }
     const palette = d3.schemeObservable10;
     const hashStr = (s: string): number => {
       let h = 0;
@@ -205,7 +242,7 @@ export const SamplesStrip = ({
       return Math.abs(h);
     };
     return (label: string): string => palette[hashStr(label) % palette.length];
-  }, []);
+  }, [effectiveLoading, isDarkMode]);
 
   const handleDragStart = (stripIndex: number, startX: number): void => {
     setDragState({stripIndex, startX, currentX: startX});
@@ -246,7 +283,7 @@ export const SamplesStrip = ({
     setDragState(undefined);
   };
 
-  if (data.length === 0) {
+  if (!effectiveLoading && effectiveData.length === 0) {
     return (
       <span className="flex justify-center my-10">
         There is no data matching your filter criteria, please try changing the filter.
@@ -257,11 +294,14 @@ export const SamplesStrip = ({
   return (
     <div
       ref={containerRef}
-      className={cx('flex flex-col gap-1 relative my-0', {'cursor-ew-resize': isDragging})}
+      className={cx('flex flex-col gap-1 relative my-0', {
+        'cursor-ew-resize': isDragging,
+        'animate-pulse pointer-events-none': effectiveLoading,
+      })}
       style={{width: width ?? '100%'}}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseLeave}
+      onMouseMove={effectiveLoading ? undefined : handleMouseMove}
+      onMouseUp={effectiveLoading ? undefined : handleMouseUp}
+      onMouseLeave={effectiveLoading ? undefined : handleMouseLeave}
     >
       <TimelineGuide
         bounds={[BigInt(0), BigInt(bounds[1] - bounds[0])]}
@@ -280,7 +320,7 @@ export const SamplesStrip = ({
           <SamplesGraphContainer
             isSelected={isSelected}
             isCollapsed={isCollapsed}
-            cpu={item.cpu}
+            label={item.label}
             width={width}
             data={item.data}
             onToggleCollapse={() => {
@@ -297,12 +337,13 @@ export const SamplesStrip = ({
               onSelectedTimeframe(item.cpu, newBounds);
             }}
             color={color}
-            stepMs={stepMs}
+            stepMs={effectiveStepMs}
             onDragStart={handleDragStart}
             dragState={dragState}
             stripIndex={i}
             isAnyDragActive={isDragging}
             timeBounds={bounds}
+            loading={effectiveLoading}
             key={item.label}
           />
         );

package/src/ProfileFlameChart/SamplesStrips/labelSetUtils.test.ts

@@ -0,0 +1,73 @@
+// 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 {describe, expect, it} from 'vitest';
+
+import {LabelSet} from '@parca/client';
+
+import {createLabelSetComparator, labelSetToString} from './labelSetUtils';
+
+const ls = (labels: Record<string, string>): LabelSet => ({
+  labels: Object.entries(labels).map(([name, value]) => ({name, value})),
+});
+
+describe('createLabelSetComparator', () => {
+  it('sorts numeric cpu values numerically', () => {
+    const sets = [ls({cpu: '10'}), ls({cpu: '2'}), ls({cpu: '1'})];
+    const {compare} = createLabelSetComparator(sets);
+    const sorted = [...sets].sort(compare);
+    expect(sorted.map(s => s.labels[0].value)).toEqual(['1', '2', '10']);
+  });
+
+  it('sorts text labels lexicographically', () => {
+    const sets = [ls({node: 'charlie'}), ls({node: 'alpha'}), ls({node: 'bravo'})];
+    const {compare} = createLabelSetComparator(sets);
+    const sorted = [...sets].sort(compare);
+    expect(sorted.map(s => s.labels[0].value)).toEqual(['alpha', 'bravo', 'charlie']);
+  });
+
+  it('sorts text labels before numeric labels', () => {
+    const sets = [ls({node: 'b', cpu: '1'}), ls({node: 'a', cpu: '2'}), ls({node: 'a', cpu: '1'})];
+    const {compare} = createLabelSetComparator(sets);
+    const sorted = [...sets].sort(compare);
+    expect(sorted.map(s => [s.labels[0].value, s.labels[1].value])).toEqual([
+      ['a', '1'],
+      ['a', '2'],
+      ['b', '1'],
+    ]);
+  });
+
+  it('treats key as text if any value is non-numeric', () => {
+    const sets = [ls({cpu: '10'}), ls({cpu: '2'}), ls({cpu: 'all'})];
+    const {compare} = createLabelSetComparator(sets);
+    const sorted = [...sets].sort(compare);
+    // Lexicographic: '10' < '2' < 'all'
+    expect(sorted.map(s => s.labels[0].value)).toEqual(['10', '2', 'all']);
+  });
+});
+
+describe('labelSetToString', () => {
+  it('formats labels in key order: text first, numeric last', () => {
+    const sets = [ls({cpu: '0', node: 'alpha'}), ls({cpu: '1', node: 'beta'})];
+    const {keyOrder} = createLabelSetComparator(sets);
+    expect(labelSetToString(sets[0], keyOrder)).toBe('{node: alpha, cpu: 0}');
+  });
+
+  it('formats without keyOrder using original label order', () => {
+    expect(labelSetToString(ls({cpu: '0', node: 'alpha'}))).toBe('{cpu: 0, node: alpha}');
+  });
+
+  it('returns {} for undefined', () => {
+    expect(labelSetToString(undefined)).toBe('{}');
+  });
+});

package/src/ProfileFlameChart/SamplesStrips/labelSetUtils.ts

@@ -0,0 +1,86 @@
+// 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 {LabelSet} from '@parca/client';
+
+// Determine which label keys have all-numeric values across every label set.
+const getNumericKeys = (labelSets: LabelSet[]): Set<string> => {
+  const numericKeys = new Set<string>();
+  if (labelSets.length === 0) return numericKeys;
+
+  const keyCandidates = new Set(labelSets[0].labels.map(l => l.name));
+  for (const key of keyCandidates) {
+    const allNumeric = labelSets.every(ls => {
+      const label = ls.labels.find(l => l.name === key);
+      return label != null && label.value !== '' && !isNaN(Number(label.value));
+    });
+    if (allNumeric) numericKeys.add(key);
+  }
+  return numericKeys;
+};
+
+// Get key order: text keys first (sorted), then numeric keys (sorted).
+const getSortedKeys = (labelSets: LabelSet[], numericKeys: Set<string>): string[] => {
+  const allKeys = new Set<string>();
+  for (const ls of labelSets) {
+    for (const l of ls.labels) allKeys.add(l.name);
+  }
+  return [...allKeys]
+    .filter(k => !numericKeys.has(k))
+    .sort()
+    .concat([...numericKeys].sort());
+};
+
+// Format a LabelSet as a string with keys ordered: text first, then numeric.
+export const labelSetToString = (labelSet: LabelSet | undefined, keyOrder?: string[]): string => {
+  if (labelSet === undefined) return '{}';
+
+  const labels =
+    keyOrder != null
+      ? keyOrder
+          .map(key => labelSet.labels.find(l => l.name === key))
+          .filter((l): l is {name: string; value: string} => l != null)
+      : labelSet.labels;
+
+  if (labels.length === 0) return '{}';
+
+  return '{' + labels.map(l => `${l.name}: ${l.value}`).join(', ') + '}';
+};
+
+// Build a comparator for LabelSets: text keys first (for grouping), then numeric keys.
+// Also returns the key order so labelSetToString can use the same ordering.
+export const createLabelSetComparator = (
+  labelSets: LabelSet[]
+): {compare: (a: LabelSet, b: LabelSet) => number; keyOrder: string[]} => {
+  const numericKeys = getNumericKeys(labelSets);
+  const keyOrder = getSortedKeys(labelSets, numericKeys);
+
+  const compare = (a: LabelSet, b: LabelSet): number => {
+    const aMap = new Map(a.labels.map(l => [l.name, l.value]));
+    const bMap = new Map(b.labels.map(l => [l.name, l.value]));
+    for (const key of keyOrder) {
+      const aVal = aMap.get(key) ?? '';
+      const bVal = bMap.get(key) ?? '';
+      if (numericKeys.has(key)) {
+        const diff = Number(aVal) - Number(bVal);
+        if (diff !== 0) return diff;
+      } else {
+        const cmp = aVal.localeCompare(bVal);
+        if (cmp !== 0) return cmp;
+      }
+    }
+    return 0;
+  };
+
+  return {compare, keyOrder};
+};

package/src/ProfileFlameChart/index.tsx

@@ -14,19 +14,13 @@
 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 {useURLState, useURLStateCustom, type OptionsCustom} from '@parca/components';
 import {Matcher, MatcherTypes, ProfileType, Query} from '@parca/parser';
-import {TimeUnits, formatDateTimeDownToMS, formatDuration} from '@parca/utilities';
+import {TimeUnits, formatDate, formatDuration} from '@parca/utilities';
 
 import ProfileFlameGraph, {validateFlameChartQuery} from '../ProfileFlameGraph';
 import {boundsFromProfileSource} from '../ProfileFlameGraph/FlameGraphArrow/utils';
-import {MergedProfileSource, ProfileSource} from '../ProfileSource';
+import {MergedProfileSource, ProfileSource, timeFormat} from '../ProfileSource';
 import type {SamplesData} from '../ProfileView/types/visualization';
 import {useQuery} from '../useQuery';
 import {NumberDuo} from '../utils';
@@ -82,7 +76,6 @@ interface ProfileFlameChartProps {
   isHalfScreen: boolean;
   metadataMappingFiles?: string[];
   metadataLoading?: boolean;
-  onSwitchToOneMinute?: () => void;
 }
 
 // Helper to create a filtered profile source with narrowed time bounds
@@ -125,9 +118,7 @@ export const ProfileFlameChart = ({
   isHalfScreen,
   metadataMappingFiles,
   metadataLoading,
-  onSwitchToOneMinute,
 }: ProfileFlameChartProps): JSX.Element => {
-  const {loader} = useParcaContext();
   const zoomControlsRef = useRef<HTMLDivElement>(null);
 
   const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom<
@@ -211,27 +202,9 @@ export const ProfileFlameChart = ({
     return {cpus, data, stepMs};
   }, [samplesData?.series, samplesData?.stepMs]);
 
-  const {isValid, isNonDelta, isDurationTooLong} = validateFlameChartQuery(
-    profileSource as MergedProfileSource
-  );
+  const {isValid, isNonDelta} = 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.';
@@ -242,12 +215,10 @@ export const ProfileFlameChart = ({
 
   const hasDimension = (flamechartDimension ?? []).length > 0;
 
-  // Show loader while metadata labels are loading (needed for dimension auto-selection)
-  if (metadataLoading === true) {
-    return <>{loader}</>;
-  }
+  const isStripsLoading =
+    metadataLoading === true || !hasDimension || samplesData?.loading === true;
 
-  if (!hasDimension) {
+  if (!hasDimension && metadataLoading !== true) {
     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
@@ -256,16 +227,12 @@ export const ProfileFlameChart = ({
     );
   }
 
-  if (samplesData?.loading === true) {
-    return <>{loader}</>;
-  }
-
   return (
     <div>
-      {/* Samples Strips - rendered above flamechart */}
-      {stripsData.cpus.length > 0 && stripsData.data.length > 0 && (
+      {(isStripsLoading || (stripsData.cpus.length > 0 && stripsData.data.length > 0)) && (
         <div className="mb-2">
           <SamplesStrip
+            loading={isStripsLoading}
             cpus={stripsData.cpus}
             data={stripsData.data}
             selectedTimeframe={selectedTimeframe}
@@ -284,13 +251,17 @@ export const ProfileFlameChart = ({
             .map(l => `${l.name} = ${l.value}`)
             .join(', ');
           const durationMs = selectedTimeframe.bounds[1] - selectedTimeframe.bounds[0];
-          const duration = formatDuration({[TimeUnits.Milliseconds]: durationMs});
+          const duration =
+            durationMs < 5000
+              ? `${(durationMs / 1000).toFixed(1)}s`
+              : formatDuration({[TimeUnits.Milliseconds]: durationMs});
+          const fmt = durationMs < 5000 ? "yyyy-MM-dd HH:mm:ss.SSS '(UTC)'" : timeFormat();
           return (
             <div className="flex items-center justify-between px-2 py-1">
               <div className="text-xs font-medium text-gray-500 dark:text-gray-400">
                 Samples matching {labels} over {duration} from{' '}
-                {formatDateTimeDownToMS(selectedTimeframe.bounds[0])} to{' '}
-                {formatDateTimeDownToMS(selectedTimeframe.bounds[1])}
+                {formatDate(new Date(selectedTimeframe.bounds[0]), fmt)} to{' '}
+                {formatDate(new Date(selectedTimeframe.bounds[1]), fmt)}
               </div>
               <div ref={zoomControlsRef} />
             </div>