@parca/profile 0.19.113 → 0.19.115

package/src/ProfileView/hooks/useAutoSelectDimension.ts

@@ -0,0 +1,90 @@
+// 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, useRef} from 'react';
+
+import {ProfileType} from '@parca/parser';
+
+import {wellKnownProfiles} from '../../ProfileTypeSelector';
+
+const CPU_PREFERRED_DIMENSIONS = ['cpu', 'cpuid', 'thread', 'thread_id'];
+
+const GPU_DIMENSIONS = ['node', 'gpu', 'stream'];
+
+const getWellKnownProfileName = (profileType?: ProfileType): string | undefined => {
+  if (profileType == null) return undefined;
+  const key = profileType.toString();
+  return wellKnownProfiles[key]?.name;
+};
+
+const isOnGpuProfile = (profileType?: ProfileType): boolean => {
+  const wellKnownName = getWellKnownProfileName(profileType);
+  return wellKnownName === 'On-GPU';
+};
+
+const isOnCpuProfile = (profileType?: ProfileType): boolean => {
+  const wellKnownName = getWellKnownProfileName(profileType);
+  return wellKnownName === 'On-CPU';
+};
+
+/**
+ * Auto-selects the best flamechart "group by" dimension on first load.
+ *
+ * For On-GPU profiles:
+ *   - Selects all available from: ['node', 'gpu', 'stream']
+ *
+ * For On-CPU profiles:
+ *   - Priority: cpu > cpuid > thread > thread_id
+ *   - Adds 'node' alongside the primary dimension if available
+ *
+ * For all other profile types:
+ *   - No auto-selection
+ */
+export const useAutoSelectDimension = (
+  metadataLabels: string[] | undefined,
+  flamechartDimension: string[] | undefined,
+  setFlamechartDimension: (v: string[]) => void,
+  profileType?: ProfileType
+): void => {
+  const hasAutoSelected = useRef(false);
+
+  useEffect(() => {
+    if (hasAutoSelected.current) return;
+    if (metadataLabels == null || metadataLabels.length === 0) return;
+    if ((flamechartDimension ?? []).length > 0) {
+      hasAutoSelected.current = true;
+      return;
+    }
+
+    if (isOnGpuProfile(profileType)) {
+      const availableGpuDims = GPU_DIMENSIONS.filter(d => metadataLabels.includes(d));
+      if (availableGpuDims.length > 0) {
+        setFlamechartDimension(availableGpuDims.map(d => `labels.${d}`));
+        hasAutoSelected.current = true;
+        return;
+      }
+    }
+
+    if (isOnCpuProfile(profileType)) {
+      const hasNode = metadataLabels.includes('node');
+      for (const name of CPU_PREFERRED_DIMENSIONS) {
+        if (metadataLabels.includes(name)) {
+          const dims = hasNode ? ['node', name] : [name];
+          setFlamechartDimension(dims.map(d => `labels.${d}`));
+          hasAutoSelected.current = true;
+          return;
+        }
+      }
+    }
+  }, [metadataLabels, flamechartDimension, setFlamechartDimension, profileType]);
+};

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -42,6 +42,8 @@ export const useVisualizationState = (): {
   setGroupBy: (keys: string[]) => void;
   toggleGroupBy: (key: string) => void;
   setGroupByLabels: (labels: string[]) => void;
+  flamechartDimension: string[];
+  setFlamechartDimension: (labels: string[]) => void;
   sandwichFunctionName: string | undefined;
   setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
   resetSandwichFunctionName: () => void;
@@ -74,6 +76,12 @@ export const useVisualizationState = (): {
   const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
     'sandwich_function_name'
   );
+  const [flamechartDimension, setStoreFlamechartDimension] = useURLState<string[]>(
+    'flamechart_dimension',
+    {
+      alwaysReturnArray: true,
+    }
+  );
   const resetFlameGraphState = useResetFlameGraphState();
   const batchUpdates = useURLStateBatch();
 
@@ -123,6 +131,13 @@ export const useVisualizationState = (): {
     [groupBy, setGroupBy, resetFlameGraphState, batchUpdates]
   );
 
+  const setFlamechartDimension = useCallback(
+    (labels: string[]): void => {
+      setStoreFlamechartDimension(labels.filter(l => l.startsWith(`${FIELD_LABELS}.`)));
+    },
+    [setStoreFlamechartDimension]
+  );
+
   const resetSandwichFunctionName = useCallback((): void => {
     setSandwichFunctionName(undefined);
   }, [setSandwichFunctionName]);
@@ -153,6 +168,8 @@ export const useVisualizationState = (): {
     setGroupBy,
     toggleGroupBy,
     setGroupByLabels,
+    flamechartDimension,
+    setFlamechartDimension,
     sandwichFunctionName,
     setSandwichFunctionName,
     resetSandwichFunctionName,

package/src/ProfileView/index.tsx

@@ -27,6 +27,7 @@ import {
 } from './components/Toolbars';
 import {DashboardProvider} from './context/DashboardContext';
 import {ProfileViewContextProvider} from './context/ProfileViewContext';
+import {useAutoSelectDimension} from './hooks/useAutoSelectDimension';
 import {useProfileMetadata} from './hooks/useProfileMetadata';
 import {useVisualizationState} from './hooks/useVisualizationState';
 import type {ProfileViewProps, VisualizationType} from './types/visualization';
@@ -35,7 +36,7 @@ export const ProfileView = ({
   total,
   filtered,
   flamegraphData,
-  flamechartData,
+  samplesData,
   topTableData,
   sourceData,
   profileSource,
@@ -45,6 +46,7 @@ export const ProfileView = ({
   compare,
   showVisualizationSelector,
   sandwichData,
+  onSwitchToOneMinute,
 }: ProfileViewProps): JSX.Element => {
   const {
     timezone,
@@ -64,12 +66,21 @@ export const ProfileView = ({
     groupBy,
     toggleGroupBy,
     setGroupByLabels,
+    flamechartDimension,
+    setFlamechartDimension,
     sandwichFunctionName,
     resetSandwichFunctionName,
     alignFunctionName,
     setAlignFunctionName,
   } = useVisualizationState();
 
+  useAutoSelectDimension(
+    flamegraphData.metadataLabels,
+    flamechartDimension,
+    setFlamechartDimension,
+    profileSource?.ProfileType()
+  );
+
   const {colorMappings} = useProfileMetadata({
     flamegraphArrow: flamegraphData.arrow,
     metadataMappingFiles: flamegraphData.metadataMappingFiles,
@@ -95,7 +106,7 @@ export const ProfileView = ({
       isHalfScreen,
       dimensions,
       flamegraphData,
-      flamechartData,
+      samplesData,
       topTableData,
       sourceData,
       profileSource,
@@ -105,6 +116,7 @@ export const ProfileView = ({
       setNewCurPathArrow: setCurPathArrow,
       perf,
       queryClient,
+      onSwitchToOneMinute,
     });
   };
 
@@ -153,6 +165,8 @@ export const ProfileView = ({
             preferencesModal={preferencesModal}
             profileViewExternalSubActions={profileViewExternalSubActions}
             setGroupByLabels={setGroupByLabels}
+            flamechartDimension={flamechartDimension}
+            setFlamechartDimension={setFlamechartDimension}
             showVisualizationSelector={showVisualizationSelector}
             sandwichFunctionName={sandwichFunctionName}
             alignFunctionName={alignFunctionName}

package/src/ProfileView/types/visualization.ts

@@ -13,8 +13,9 @@
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 
-import {FlamegraphArrow, QueryServiceClient, Source, TableArrow} from '@parca/client';
+import {FlamegraphArrow, LabelSet, QueryServiceClient, Source, TableArrow} from '@parca/client';
 
+import {DataPoint} from '../../ProfileFlameChart/SamplesStrips/SamplesGraph';
 import {ProfileSource} from '../../ProfileSource';
 
 export interface FlamegraphData {
@@ -49,6 +50,18 @@ export interface SandwichData {
   callers: FlamegraphData;
 }
 
+export interface SamplesSeries {
+  labelset: LabelSet;
+  data: DataPoint[];
+}
+
+export interface SamplesData {
+  loading: boolean;
+  series?: SamplesSeries[];
+  error: RpcError | null;
+  stepMs?: number;
+}
+
 export type VisualizationType =
   | 'flamegraph'
   | 'callgraph'
@@ -61,14 +74,15 @@ export interface ProfileViewProps {
   total: bigint;
   filtered: bigint;
   flamegraphData: FlamegraphData;
-  flamechartData: FlamegraphData;
+  samplesData?: SamplesData;
   sandwichData: SandwichData;
   topTableData?: TopTableData;
   sourceData?: SourceData;
   profileSource: ProfileSource;
-  queryClient?: QueryServiceClient;
+  queryClient: QueryServiceClient;
   compare?: boolean;
   onDownloadPProf: () => void;
   pprofDownloading?: boolean;
   showVisualizationSelector?: boolean;
+  onSwitchToOneMinute?: () => void;
 }

package/src/ProfileViewWithData.tsx

@@ -14,14 +14,27 @@
 import {useEffect, useMemo, useState} from 'react';
 
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
-import {useGrpcMetadata, useParcaContext, useURLState} from '@parca/components';
+import {
+  NumberParser,
+  NumberSerializer,
+  useGrpcMetadata,
+  useParcaContext,
+  useURLState,
+  useURLStateCustom,
+} from '@parca/components';
 import {saveAsBlob} from '@parca/utilities';
 
 import {validateFlameChartQuery} from './ProfileFlameGraph';
-import {FIELD_FUNCTION_NAME} from './ProfileFlameGraph/FlameGraphArrow';
+import {FIELD_FUNCTION_NAME, FIELD_LABELS} from './ProfileFlameGraph/FlameGraphArrow';
+import {boundsFromProfileSource} from './ProfileFlameGraph/FlameGraphArrow/utils';
+import {
+  getStepCountFromScreenWidth,
+  useQueryRange,
+} from './ProfileMetricsGraph/hooks/useQueryRange';
 import {MergedProfileSource, ProfileSource} from './ProfileSource';
 import {ProfileView} from './ProfileView';
 import {useProfileFilters} from './ProfileView/components/ProfileFilters/useProfileFilters';
+import type {SamplesSeries} from './ProfileView/types/visualization';
 import {useQuery} from './useQuery';
 import {downloadPprof} from './utils';
 
@@ -30,12 +43,14 @@ interface ProfileViewWithDataProps {
   profileSource: ProfileSource;
   compare?: boolean;
   showVisualizationSelector?: boolean;
+  onSwitchToOneMinute?: () => void;
 }
 
 export const ProfileViewWithData = ({
   queryClient,
   profileSource,
   showVisualizationSelector,
+  onSwitchToOneMinute,
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
   const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
@@ -48,6 +63,9 @@ export const ProfileViewWithData = ({
     alwaysReturnArray: true,
   });
   const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
+  const [flamechartDimension] = useURLState<string[]>('flamechart_dimension', {
+    alwaysReturnArray: true,
+  });
 
   const [invertStack] = useURLState('invert_call_stack');
   const invertCallStack = invertStack === 'true';
@@ -96,21 +114,66 @@ export const ProfileViewWithData = ({
     protoFilters,
   });
 
-  const {
-    isLoading: flamechartLoading,
-    response: flamechartResponse,
-    error: flamechartError,
-  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMECHART, {
-    skip: !(
-      dashboardItems.includes('flamechart') &&
-      validateFlameChartQuery(profileSource as MergedProfileSource).isValid
-    ),
-    nodeTrimThreshold,
-    groupBy,
-    invertCallStack,
-    protoFilters,
+  const samplesEnabled = !!(
+    dashboardItems.includes('flamechart') &&
+    validateFlameChartQuery(profileSource as MergedProfileSource).isValid &&
+    (flamechartDimension ?? []).length > 0
+  );
+
+  const [samplesFromMs, samplesToMs] = useMemo(() => {
+    const bounds = boundsFromProfileSource(profileSource);
+    return [Number(bounds[0] / 1_000_000n), Number(bounds[1] / 1_000_000n)];
+  }, [profileSource]);
+
+  const samplesSumBy = useMemo(
+    () =>
+      (flamechartDimension ?? []).map(f =>
+        f.startsWith('labels.') ? f.slice('labels.'.length) : f
+      ),
+    [flamechartDimension]
+  );
+
+  // Samples step count: 2px per data point for finer granularity in strips
+  const [samplesStepCount] = useURLStateCustom<number>('samples_step_count', {
+    defaultValue: String(getStepCountFromScreenWidth(2)),
+    parse: NumberParser,
+    stringify: NumberSerializer,
   });
 
+  const {
+    isLoading: samplesLoading,
+    response: samplesRangeResponse,
+    error: samplesError,
+    stepDurationMs: samplesStepMs,
+  } = useQueryRange(
+    queryClient,
+    samplesEnabled ? (profileSource as MergedProfileSource).query.toString() : '',
+    samplesFromMs,
+    samplesToMs,
+    samplesSumBy,
+    samplesStepCount,
+    !samplesEnabled
+  );
+
+  // Map QueryRange response to SamplesData
+  // TODO (manoj): Check if we can skip this mapping and adapt the CPUSampleStrips to work directly with the QueryRange response format.
+  const samplesData = useMemo(() => {
+    if (samplesLoading) return {loading: true, error: null};
+    if (samplesError != null) return {loading: false, error: samplesError};
+    if (samplesRangeResponse?.series?.length == null) return {loading: false, error: null};
+
+    const series: SamplesSeries[] = samplesRangeResponse.series.map(ms => ({
+      labelset: ms.labelset ?? {labels: []},
+      data: ms.samples.map(s => ({
+        timestamp: Number(s.timestamp!.seconds) * 1000 + Math.floor(s.timestamp!.nanos / 1_000_000),
+        value: Number(s.value),
+        sampleCount: Number(s.count),
+      })),
+    }));
+
+    return {loading: false, series, error: null, stepMs: samplesStepMs};
+  }, [samplesLoading, samplesRangeResponse, samplesError, samplesStepMs]);
+
   const {
     isLoading: profileMetadataLoading,
     response: profileMetadataResponse,
@@ -227,9 +290,6 @@ export const ProfileViewWithData = ({
   } else if (sourceResponse !== null) {
     total = BigInt(sourceResponse.total);
     filtered = BigInt(sourceResponse.filtered);
-  } else if (flamechartResponse !== null) {
-    total = BigInt(flamechartResponse.total);
-    filtered = BigInt(flamechartResponse.filtered);
   } else if (callersFlamegraphResponse !== null) {
     total = BigInt(callersFlamegraphResponse.total);
     filtered = BigInt(callersFlamegraphResponse.filtered);
@@ -262,25 +322,6 @@ export const ProfileViewWithData = ({
         metadataLoading: profileMetadataLoading,
         metadataRefetch,
       }}
-      flamechartData={{
-        loading: flamechartLoading && profileMetadataLoading,
-        arrow:
-          flamechartResponse?.report.oneofKind === 'flamegraphArrow'
-            ? flamechartResponse?.report?.flamegraphArrow
-            : undefined,
-        total: BigInt(flamechartResponse?.total ?? '0'),
-        filtered: BigInt(flamechartResponse?.filtered ?? '0'),
-        error: flamechartError,
-        metadataMappingFiles:
-          profileMetadataResponse?.report.oneofKind === 'profileMetadata'
-            ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
-            : undefined,
-        metadataLabels:
-          profileMetadataResponse?.report.oneofKind === 'profileMetadata'
-            ? profileMetadataResponse?.report?.profileMetadata?.labels
-            : undefined,
-        metadataLoading: profileMetadataLoading,
-      }}
       topTableData={{
         loading: tableLoading,
         arrow:
@@ -333,11 +374,13 @@ export const ProfileViewWithData = ({
           metadataLoading: profileMetadataLoading,
         },
       }}
+      samplesData={samplesData}
       profileSource={profileSource}
       queryClient={queryClient}
       onDownloadPProf={() => void downloadPProfClick()}
       pprofDownloading={pprofDownloading}
       showVisualizationSelector={showVisualizationSelector}
+      onSwitchToOneMinute={onSwitchToOneMinute}
     />
   );
 };

package/src/index.tsx

@@ -29,6 +29,7 @@ import {useQueryState} from './hooks/useQueryState';
 
 export {useMetricsGraphDimensions} from './MetricsGraph/useMetricsGraphDimensions';
 
+export * from './ProfileFlameChart';
 export * from './ProfileFlameGraph';
 export * from './ProfileSource';
 export {
@@ -57,6 +58,9 @@ export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences = {
   group_by: {
     splitOnCommas: true,
   },
+  flamechart_dimension: {
+    splitOnCommas: true,
+  },
 };
 
 export {useProfileTypes} from './ProfileSelector';

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

@@ -1,10 +0,0 @@
-interface TooltipProps {
-    x: number;
-    y: number;
-    timestamp: Date | number;
-    value: number;
-    containerWidth: number;
-}
-export declare function Tooltip({ x, y, timestamp, value, containerWidth }: TooltipProps): JSX.Element;
-export {};
-//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/Tooltip.tsx"],"names":[],"mappings":"AAkBA,UAAU,YAAY;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAwD3F"}

package/dist/MetricsGraphStrips/AreaGraph/Tooltip.js

@@ -1,44 +0,0 @@
-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, useRef, useState } from 'react';
-import { useParcaContext } from '@parca/components';
-import { formatDateTimeDownToMS, valueFormatter } from '@parca/utilities';
-export function Tooltip({ x, y, timestamp, value, containerWidth }) {
-    const { timezone } = useParcaContext();
-    const tooltipRef = useRef(null);
-    const [tooltipPosition, setTooltipPosition] = useState({ x, y });
-    const baseOffset = {
-        x: 16,
-        y: -8,
-    };
-    useEffect(() => {
-        if (tooltipRef.current != null) {
-            const tooltipWidth = tooltipRef.current.offsetWidth;
-            let newX = x + baseOffset.x;
-            let newY = y + baseOffset.y;
-            if (newX + tooltipWidth > containerWidth) {
-                newX = x - tooltipWidth - baseOffset.x;
-            }
-            if (newY < 0) {
-                newY = y + Math.abs(baseOffset.y);
-            }
-            setTooltipPosition({ x: newX, y: newY });
-        }
-    }, [x, y, containerWidth, baseOffset.x, baseOffset.y]);
-    return (_jsx("div", { ref: tooltipRef, className: "absolute bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 p-2 text-sm z-50", style: {
-            left: `${tooltipPosition.x}px`,
-            top: `${tooltipPosition.y}px`,
-            pointerEvents: 'none',
-        }, children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex gap-1 items-center", children: [_jsx("div", { children: "Timestamp:" }), _jsx("div", { className: "text-gray-600 dark:text-gray-300", children: formatDateTimeDownToMS(timestamp, timezone) })] }), _jsxs("div", { className: "flex gap-1 items-center", children: [_jsx("div", { children: "Value:" }), _jsx("div", { className: "text-gray-600 dark:text-gray-300", children: valueFormatter(value, 'nanoseconds', 2) })] })] }) }));
-}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAGtC,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,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;IAC/D,WAAW,EAAE,SAAS,CAAC;CACxB;AAwJD,eAAO,MAAM,SAAS,GAAI,oIAYvB,KAAK,KAAG,GAAG,CAAC,OAoJd,CAAC"}

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

@@ -1 +0,0 @@
-{"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,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAqBtC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;;;;;;qCAKM,MAAM,UAAU,SAAS,KAAG,IAAI;;;mBAK9B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW,QAAQ,KAAG,MAmBtD,CAAC;AAaF,eAAO,MAAM,kBAAkB,GAAI,wEAOhC,KAAK,KAAG,GAAG,CAAC,OAgEd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -1,70 +0,0 @@
-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 cx from 'classnames';
-import * as d3 from 'd3';
-import isEqual from 'fast-deep-equal';
-import { TimelineGuide } from '../TimelineGuide';
-import { AreaGraph } from './AreaGraph';
-export const labelSetToString = (labelSet) => {
-    if (labelSet === undefined) {
-        return '{}';
-    }
-    let str = '{';
-    let isFirst = true;
-    for (const label of labelSet.labels) {
-        if (!isFirst) {
-            str += ', ';
-            isFirst = false;
-        }
-        str += `${label.name}: ${label.value}`;
-    }
-    str += '}';
-    return str;
-};
-const STRIP_HEIGHT = 24;
-const getTimelineGuideHeight = (cpus, collapsedIndices) => {
-    return ((STRIP_HEIGHT + 4) * (cpus.length - collapsedIndices.length) +
-        20 * collapsedIndices.length +
-        24 -
-        6);
-};
-export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, }) => {
-    const [collapsedIndices, setCollapsedIndices] = useState([]);
-    const color = d3.scaleOrdinal(d3.schemeObservable10);
-    const valueBounds = d3.extent(data.flatMap(d => d.map(p => p.value)));
-    return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
-                const isCollapsed = collapsedIndices.includes(i);
-                const isSelected = isEqual(cpu, selectedTimeframe?.labels);
-                const labelStr = labelSetToString(cpu);
-                return (_jsxs("div", { className: cx('min-h-5', {
-                        relative: !isSelected,
-                        'sticky z-30 bg-white dark:bg-black bg-opacity-75': isSelected,
-                    }), style: { width: width ?? 1468, top: isSelected ? 302 : undefined }, children: [_jsxs("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: () => {
-                                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' }), labelStr] }), !isCollapsed ? (_jsx(AreaGraph, { data: data[i], height: STRIP_HEIGHT, width: width ?? 1468, fill: color(labelStr), selectionBounds: isSelected ? selectedTimeframe?.bounds : undefined, setSelectionBounds: bounds => {
-                                onSelectedTimeframe(cpu, bounds);
-                            }, valueBounds: valueBounds })) : null] }, labelStr));
-            })] }));
-};