@parca/profile 0.19.44 → 0.19.46

package/src/MetricsGraph/MetricsContextMenu/index.tsx

@@ -14,92 +14,104 @@
 import {Icon} from '@iconify/react';
 import {Item, Menu, Submenu} from 'react-contexify';
 
-import {Label} from '@parca/client';
 import {useParcaContext} from '@parca/components';
 
-import {HighlightedSeries} from '../';
+import {Series, SeriesPoint} from '../';
+
+export interface ContextMenuItem {
+  id: string;
+  label: React.ReactNode;
+  icon?: string;
+  onClick: (closestPoint: SeriesPoint | null, series: Series[]) => void;
+  disabled?: (closestPoint: SeriesPoint | null, series: Series[]) => boolean;
+}
+
+export interface ContextMenuSubmenu {
+  id: string;
+  label: React.ReactNode;
+  icon?: string;
+  items?: ContextMenuItem[];
+  createDynamicItems?: (closestPoint: SeriesPoint | null, series: Series[]) => ContextMenuItem[];
+}
+
+export type ContextMenuItemOrSubmenu = ContextMenuItem | ContextMenuSubmenu;
 
 interface MetricsContextMenuProps {
   menuId: string;
-  onAddLabelMatcher: (
-    labels: {key: string; value: string} | Array<{key: string; value: string}>
-  ) => void;
-  highlighted: HighlightedSeries | null;
+  closestPoint: SeriesPoint | null;
+  series: Series[];
   trackVisibility: (isVisible: boolean) => void;
-  utilizationMetrics?: boolean;
+  menuItems: ContextMenuItemOrSubmenu[];
 }
 
-const transformUtilizationLabels = (label: string, utilizationMetrics: boolean): string => {
-  if (utilizationMetrics) {
-    return label.replace('attributes.', '').replace('attributes_resource.', '');
-  }
-  return label;
-};
-
 const MetricsContextMenu = ({
   menuId,
-  onAddLabelMatcher,
-  highlighted,
+  closestPoint,
+  series,
   trackVisibility,
-  utilizationMetrics = false,
+  menuItems,
 }: MetricsContextMenuProps): JSX.Element => {
   const {isDarkMode} = useParcaContext();
-  const labels = highlighted?.labels.filter((label: Label) => label.name !== '__name__');
 
-  const handleFocusOnSingleSeries = (): void => {
-    const labelsToAdd = labels?.map((label: Label) => ({
-      key: label.name,
-      value: label.value,
-    }));
+  const renderMenuItem = (item: ContextMenuItemOrSubmenu): React.ReactNode => {
+    if ('items' in item || 'createDynamicItems' in item) {
+      // This is a submenu
+      const submenu = item;
+      const items =
+        submenu.createDynamicItems != null
+          ? submenu.createDynamicItems(closestPoint, series)
+          : submenu.items ?? [];
 
-    labelsToAdd !== undefined && onAddLabelMatcher(labelsToAdd);
-  };
-
-  return (
-    <Menu id={menuId} onVisibilityChange={trackVisibility} theme={isDarkMode ? 'dark' : ''}>
-      <Item id="focus-on-single-series" onClick={handleFocusOnSingleSeries}>
-        <div className="flex w-full items-center gap-2">
-          <Icon icon="ph:star" />
-          <div>Focus only on this series</div>
-        </div>
-      </Item>
-      <Submenu
-        label={
-          <div className="flex w-full items-center gap-2">
-            <Icon icon="material-symbols:add" />
-            <div>Add to query</div>
-          </div>
-        }
-      >
-        <div className="max-h-[300px] overflow-auto">
-          {labels == null || labels.length === 0 ? (
-            <Item disabled>
-              <div className="flex w-full items-center gap-2">
-                <Icon icon="ph:warning" />
-                <div>No labels available</div>
-              </div>
-            </Item>
-          ) : (
-            labels.map((label: Label) => (
+      return (
+        <Submenu
+          key={submenu.id}
+          label={
+            <div className="flex w-full items-center gap-2">
+              {submenu.icon != null && submenu.icon !== '' && <Icon icon={submenu.icon} />}
+              <div>{submenu.label}</div>
+            </div>
+          }
+        >
+          <div className="max-h-[300px] overflow-auto">
+            {items.map(subItem => (
               <Item
-                key={label.name}
-                id={label.name}
-                onClick={() => {
-                  onAddLabelMatcher({
-                    key: label.name,
-                    value: label.value,
-                  });
-                }}
+                key={subItem.id}
+                id={subItem.id}
+                onClick={() => subItem.onClick(closestPoint, series)}
+                disabled={subItem.disabled?.(closestPoint, series) ?? false}
                 className="max-w-[400px] overflow-hidden"
               >
-                <div className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
-                  {`${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"`}
+                <div className="flex w-full items-center gap-2">
+                  {subItem.icon != null && subItem.icon !== '' && <Icon icon={subItem.icon} />}
+                  <div>{subItem.label}</div>
                 </div>
               </Item>
-            ))
-          )}
-        </div>
-      </Submenu>
+            ))}
+          </div>
+        </Submenu>
+      );
+    } else {
+      // This is a regular menu item
+      const menuItem = item as ContextMenuItem;
+      return (
+        <Item
+          key={menuItem.id}
+          id={menuItem.id}
+          onClick={() => menuItem.onClick(closestPoint, series)}
+          disabled={menuItem.disabled?.(closestPoint, series) ?? false}
+        >
+          <div className="flex w-full items-center gap-2">
+            {menuItem.icon != null && menuItem.icon !== '' && <Icon icon={menuItem.icon} />}
+            <div>{menuItem.label}</div>
+          </div>
+        </Item>
+      );
+    }
+  };
+
+  return (
+    <Menu id={menuId} onVisibilityChange={trackVisibility} theme={isDarkMode ? 'dark' : ''}>
+      {menuItems.map(renderMenuItem)}
     </Menu>
   );
 };

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -13,262 +13,105 @@
 
 import {useEffect, useMemo, useState} from 'react';
 
-import {Icon} from '@iconify/react';
-import type {VirtualElement} from '@popperjs/core';
 import {usePopper} from 'react-popper';
 
-import {Label} from '@parca/client';
-import {TextWithTooltip, useParcaContext} from '@parca/components';
-import {formatDate, timePattern, valueFormatter} from '@parca/utilities';
-
-import {HighlightedSeries} from '../';
+interface VirtualElement {
+  getBoundingClientRect: () => DOMRect;
+}
 
 interface Props {
   x: number;
   y: number;
-  highlighted: HighlightedSeries;
   contextElement: Element | null;
-  sampleType: string;
-  sampleUnit: string;
-  delta: boolean;
-  utilizationMetrics?: boolean;
-  valuePrefix?: string;
+  content: React.ReactNode;
 }
 
 const virtualElement: VirtualElement = {
   getBoundingClientRect: () => {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return {
+    const emptyRect: DOMRect = {
       width: 0,
       height: 0,
       top: 0,
-      left: 0,
       right: 0,
       bottom: 0,
-    } as DOMRect;
+      left: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    };
+    return emptyRect;
   },
 };
 
-function generateGetBoundingClientRect(contextElement: Element, x = 0, y = 0): () => DOMRect {
-  const domRect = contextElement.getBoundingClientRect();
-  return () =>
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    ({
-      width: 0,
-      height: 0,
-      top: domRect.y + y,
-      left: domRect.x + x,
-      right: domRect.x + x,
-      bottom: domRect.y + y,
-    } as DOMRect);
-}
-
-const MetricsTooltip = ({
-  x,
-  y,
-  highlighted,
-  contextElement,
-  sampleType,
-  sampleUnit,
-  delta,
-  utilizationMetrics = false,
-  valuePrefix,
-}: Props): JSX.Element => {
-  const {timezone} = useParcaContext();
+const createDomRect = (x: number, y: number): DOMRect => {
+  const domRect: DOMRect = {
+    width: 0,
+    height: 0,
+    top: y,
+    right: x,
+    bottom: y,
+    left: x,
+    x,
+    y,
+    toJSON: () => ({}),
+  };
+  return domRect;
+};
 
+const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const {styles, attributes, ...popperProps} = usePopper(virtualElement, popperElement, {
+  const {styles, attributes, update} = usePopper(virtualElement, popperElement, {
     placement: 'auto-start',
     strategy: 'absolute',
     modifiers: [
       {
         name: 'preventOverflow',
         options: {
-          tether: false,
-          altAxis: true,
+          boundary: contextElement ?? undefined,
         },
       },
       {
         name: 'offset',
         options: {
-          offset: [30, 30],
+          offset: [15, 15],
         },
       },
     ],
   });
 
-  const update = popperProps.update;
-
-  const attributesMap = useMemo(() => {
-    return highlighted.labels
-      .filter(
-        label =>
-          label.name.startsWith('attributes.') && !label.name.startsWith('attributes_resource.')
-      )
-      .reduce<Record<string, string>>((acc, label) => {
-        const key = label.name.replace('attributes.', '');
-        acc[key] = label.value;
-        return acc;
-      }, {});
-  }, [highlighted.labels]);
-
-  const attributesResourceMap = useMemo(() => {
-    return highlighted.labels
-      .filter(label => label.name.startsWith('attributes_resource.'))
-      .reduce<Record<string, string>>((acc, label) => {
-        const key = label.name.replace('attributes_resource.', '');
-        acc[key] = label.value;
-        return acc;
-      }, {});
-  }, [highlighted.labels]);
+  useMemo(() => {
+    virtualElement.getBoundingClientRect = (): DOMRect => {
+      const domRect: DOMRect = (contextElement as Element)?.getBoundingClientRect() ?? {
+        width: 0,
+        height: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      };
+      return createDomRect(domRect.x + x, domRect.y + y);
+    };
+  }, [x, y, contextElement]);
 
   useEffect(() => {
-    if (contextElement != null) {
-      virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, x, y);
-      void update?.();
-    }
-  }, [x, y, contextElement, update]);
+    void update?.();
+  }, [x, y, update]);
 
-  const nameLabel: Label | undefined = highlighted?.labels.find(e => e.name === '__name__');
-  const highlightedNameLabel: Label = nameLabel !== undefined ? nameLabel : {name: '', value: ''};
+  // Don't render anything if content is null or undefined
+  if (content == null) {
+    return <></>;
+  }
 
   return (
     <div ref={setPopperElement} style={styles.popper} {...attributes.popper} className="z-50">
       <div className="flex max-w-lg">
         <div className="m-auto">
-          <div
-            className="rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900"
-            style={{borderWidth: 1}}
-          >
-            <div className="flex flex-row">
-              <div className="ml-2 mr-6">
-                <span className="font-semibold">{highlightedNameLabel.value}</span>
-                <span className="my-2 block text-gray-700 dark:text-gray-300">
-                  <table className="table-auto">
-                    <tbody>
-                      {delta ? (
-                        <>
-                          <tr>
-                            <td className="w-1/4 pr-3">Per&nbsp;Second</td>
-                            <td className="w-3/4">
-                              {valueFormatter(
-                                highlighted.valuePerSecond,
-                                sampleUnit === 'nanoseconds' && sampleType === 'cpu'
-                                  ? 'CPU Cores'
-                                  : sampleUnit,
-                                5
-                              )}
-                            </td>
-                          </tr>
-                          <tr>
-                            <td className="w-1/4">Total</td>
-                            <td className="w-3/4">
-                              {valueFormatter(highlighted.value, sampleUnit, 2)}
-                            </td>
-                          </tr>
-                        </>
-                      ) : (
-                        <tr>
-                          <td className="w-1/4">
-                            {valuePrefix ?? ''}
-                            Value
-                          </td>
-                          <td className="w-3/4">
-                            {valueFormatter(highlighted.valuePerSecond, sampleUnit, 5)}
-                          </td>
-                        </tr>
-                      )}
-                      {highlighted.duration > 0 && (
-                        <tr>
-                          <td className="w-1/4">Duration</td>
-                          <td className="w-3/4">
-                            {valueFormatter(highlighted.duration, 'nanoseconds', 2)}
-                          </td>
-                        </tr>
-                      )}
-                      <tr>
-                        <td className="w-1/4">At</td>
-                        <td className="w-3/4">
-                          {formatDate(
-                            highlighted.timestamp,
-                            timePattern(timezone as string),
-                            timezone
-                          )}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </span>
-                <span className="my-2 block text-gray-500">
-                  {utilizationMetrics ? (
-                    <>
-                      {Object.keys(attributesResourceMap).length > 0 && (
-                        <span className="text-sm font-bold text-gray-700 dark:text-white">
-                          Resource Attributes
-                        </span>
-                      )}
-                      <span className="my-2 block text-gray-500">
-                        {Object.keys(attributesResourceMap).map(name => (
-                          <div
-                            key={name}
-                            className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
-                          >
-                            <TextWithTooltip
-                              text={`${name.replace('attributes.', '')}="${
-                                attributesResourceMap[name]
-                              }"`}
-                              maxTextLength={48}
-                              id={`tooltip-${name}-${attributesResourceMap[name]}`}
-                            />
-                          </div>
-                        ))}
-                      </span>
-                      {Object.keys(attributesMap).length > 0 && (
-                        <span className="text-sm font-bold text-gray-700 dark:text-white">
-                          Attributes
-                        </span>
-                      )}
-                      <span className="my-2 block text-gray-500">
-                        {Object.keys(attributesMap).map(name => (
-                          <div
-                            key={name}
-                            className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
-                          >
-                            <TextWithTooltip
-                              text={`${name.replace('attributes.', '')}="${attributesMap[name]}"`}
-                              maxTextLength={48}
-                              id={`tooltip-${name}-${attributesMap[name]}`}
-                            />
-                          </div>
-                        ))}
-                      </span>
-                    </>
-                  ) : (
-                    <>
-                      {highlighted.labels
-                        .filter((label: Label) => label.name !== '__name__')
-                        .map((label: Label) => (
-                          <div
-                            key={label.name}
-                            className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
-                          >
-                            <TextWithTooltip
-                              text={`${label.name}="${label.value}"`}
-                              maxTextLength={37}
-                              id={`tooltip-${label.name}`}
-                            />
-                          </div>
-                        ))}
-                    </>
-                  )}
-                </span>
-                <div className="flex w-full items-center gap-1 text-xs text-gray-500">
-                  <Icon icon="iconoir:mouse-button-right" />
-                  <div>Right click to add labels to query.</div>
-                </div>
-              </div>
-            </div>
+          <div className="border border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-900 rounded-lg shadow-lg px-3 py-2">
+            {content}
           </div>
         </div>
       </div>