@parca/profile 0.16.442 → 0.16.444

package/src/MetricsGraphStrips/AreaGraph/index.tsx

@@ -0,0 +1,321 @@
+// 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, useState} from 'react';
+
+import {Icon} from '@iconify/react';
+import cx from 'classnames';
+import * as d3 from 'd3';
+
+export interface DataPoint {
+  timestamp: number;
+  value: number;
+}
+
+export type NumberDuo = [number, 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;
+}
+
+const DraggingWindow = ({
+  dragStart,
+  currentX,
+}: {
+  dragStart: number | undefined;
+  currentX: number | undefined;
+}): JSX.Element | null => {
+  const start = useMemo(() => Math.min(dragStart ?? 0, currentX ?? 0), [dragStart, currentX]);
+  const width = useMemo(() => Math.abs((dragStart ?? 0) - (currentX ?? 0)), [dragStart, currentX]);
+
+  if (dragStart === undefined || currentX === undefined) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{height: '100%', width, left: start}}
+      className={cx(
+        'bg-gray-500 absolute top-0 opacity-50 border-x-2 border-gray-900 dark:border-gray-100'
+      )}
+    ></div>
+  );
+};
+
+const ZoomWindow = ({
+  zoomWindow,
+  width,
+  onZoomWindowChange,
+  setIsHoveringDragHandle,
+}: {
+  zoomWindow?: NumberDuo;
+  width: number;
+  onZoomWindowChange: (newWindow: NumberDuo) => void;
+  setIsHoveringDragHandle: (arg: boolean) => void;
+}): JSX.Element | null => {
+  const windowStartHandleRef = useRef<HTMLDivElement>(null);
+  const windowEndHandleRef = useRef<HTMLDivElement>(null);
+  const [zoomWindowState, setZoomWindowState] = useState<NumberDuo | undefined>(zoomWindow);
+  const [dragginStart, setDraggingStart] = useState(false);
+  const [draggingEnd, setDraggingEnd] = useState(false);
+
+  useEffect(() => {
+    if (
+      zoomWindow === undefined ||
+      zoomWindowState === undefined ||
+      zoomWindow[0] !== zoomWindowState[0] ||
+      zoomWindow[1] !== zoomWindowState[1]
+    ) {
+      setZoomWindowState(zoomWindow);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zoomWindow]);
+
+  if (zoomWindowState === undefined) {
+    return null;
+  }
+  const beforeStart = 0;
+  const beforeWidth = zoomWindowState[0];
+  const afterStart = zoomWindowState[1];
+  const afterWidth = width - zoomWindowState[1];
+
+  return (
+    <div
+      className="absolute w-full h-full"
+      onMouseMove={e => {
+        if (dragginStart) {
+          const [x] = d3.pointer(e);
+          if (x >= afterStart - 10) {
+            return;
+          }
+          const newStart = Math.min(x, afterStart);
+          const newEnd = Math.max(x, afterStart);
+          setZoomWindowState([newStart, newEnd]);
+        }
+        if (draggingEnd) {
+          const [x] = d3.pointer(e);
+          if (x <= beforeWidth + 10) {
+            return;
+          }
+          const newStart = Math.min(x, beforeWidth);
+          const newEnd = Math.max(x, beforeWidth);
+          setZoomWindowState([newStart, newEnd]);
+        }
+      }}
+      onMouseLeave={() => {
+        setDraggingStart(false);
+        setDraggingEnd(false);
+      }}
+      onMouseUp={() => {
+        if (dragginStart) {
+          setDraggingStart(false);
+        }
+        if (draggingEnd) {
+          setDraggingEnd(false);
+        }
+        if (zoomWindowState[0] === zoomWindow?.[0] && zoomWindowState[1] === zoomWindow?.[1]) {
+          return;
+        }
+        onZoomWindowChange(zoomWindowState);
+        setZoomWindowState(undefined);
+      }}
+    >
+      <div
+        style={{height: '100%', width: beforeWidth, left: beforeStart}}
+        className={cx(
+          'bg-gray-500/50 absolute top-0 border-r-2 border-gray-900 dark:border-gray-100 z-20'
+        )}
+      >
+        <div
+          className="w-3 h-4 absolute top-0 right-[-7px] rounded-b bg-gray-200  cursor-ew-resize flex justify-center"
+          onMouseDown={e => {
+            setDraggingStart(true);
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          ref={windowStartHandleRef}
+          onMouseEnter={() => {
+            setIsHoveringDragHandle(true);
+          }}
+          onMouseLeave={() => {
+            setIsHoveringDragHandle(false);
+          }}
+        >
+          <Icon icon="si:drag-handle-line" className="rotate-90" fontSize={16} />
+        </div>
+      </div>
+
+      <div
+        style={{height: '100%', width: afterWidth, left: afterStart}}
+        className={cx(
+          'bg-gray-500/50 absolute top-0 border-l-2 border-gray-900 dark:border-gray-100'
+        )}
+      >
+        <div
+          className="w-3 h-4 absolute top-0 rounded-b bg-gray-200 cursor-ew-resize flex justify-center left-[-7px]"
+          onMouseDown={e => {
+            setDraggingEnd(true);
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          ref={windowEndHandleRef}
+          onMouseEnter={() => {
+            setIsHoveringDragHandle(true);
+          }}
+          onMouseLeave={() => {
+            setIsHoveringDragHandle(false);
+          }}
+        >
+          <Icon icon="si:drag-handle-line" className="rotate-90" fontSize={16} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const AreaGraph = ({
+  data,
+  height,
+  width,
+  marginLeft = 0,
+  marginRight = 0,
+  marginBottom = 0,
+  marginTop = 0,
+  fill = 'gray',
+  selectionBounds,
+  setSelectionBounds,
+}: Props): JSX.Element => {
+  const [mousePosition, setMousePosition] = useState<NumberDuo | undefined>(undefined);
+  const [dragStart, setDragStart] = useState<number | undefined>(undefined);
+  const [isHoveringDragHandle, setIsHoveringDragHandle] = 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(
+    [0, d3.max(data, d => d.value) as number],
+    [height - marginBottom, marginTop]
+  );
+  const area = d3
+    .area<DataPoint>()
+    .curve(d3.curveMonotoneX)
+    .x(d => x(d.timestamp))
+    .y0(y(0))
+    .y1(d => y(d.value));
+
+  const zoomWindow: NumberDuo | undefined = useMemo(() => {
+    if (selectionBounds === undefined) {
+      return undefined;
+    }
+    return [x(selectionBounds[0]), x(selectionBounds[1])];
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectionBounds]);
+
+  const setSelectionBoundsWithScaling = ([startPx, endPx]: NumberDuo): void => {
+    setSelectionBounds([x.invert(startPx).getTime(), x.invert(endPx).getTime()]);
+  };
+
+  return (
+    <div
+      style={{height, width}}
+      onMouseMove={e => {
+        const [x, y] = d3.pointer(e);
+        setMousePosition([x, y]);
+      }}
+      onMouseLeave={() => {
+        setMousePosition(undefined);
+        setDragStart(undefined);
+      }}
+      onMouseDown={e => {
+        // only left mouse button
+        if (e.button !== 0) {
+          return;
+        }
+
+        // X/Y coordinate array relative to svg
+        const rel = d3.pointer(e);
+
+        const xCoordinate = rel[0];
+        const xCoordinateWithoutMargin = xCoordinate - marginLeft;
+        if (xCoordinateWithoutMargin >= 0) {
+          setDragStart(xCoordinateWithoutMargin);
+        }
+
+        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,
+        })}
+      ></div>
+
+      {/* drag guide, only visible when dragging */}
+      <DraggingWindow dragStart={dragStart} currentX={mousePosition?.[0]} />
+
+      {/* zoom window */}
+      <ZoomWindow
+        zoomWindow={zoomWindow}
+        width={width}
+        onZoomWindowChange={setSelectionBoundsWithScaling}
+        setIsHoveringDragHandle={setIsHoveringDragHandle}
+      />
+
+      {/* Inactive indicator */}
+      <div
+        className={cx('absolute top-0 left-0 w-full h-full bg-gray-900/50 dark:bg-gray-200/50', {
+          hidden: isDragging || selectionBounds !== undefined,
+        })}
+      ></div>
+
+      <svg style={{width: '100%', height: '100%'}}>
+        <path fill={fill} d={area(data) as string} className="opacity-80" />
+      </svg>
+    </div>
+  );
+};

package/src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx

@@ -0,0 +1,57 @@
+// 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.
+
+// eslint-disable-next-line import/named
+import {useArgs} from '@storybook/preview-api';
+// eslint-disable-next-line import/named
+import {Meta} from '@storybook/react';
+
+import {DataPoint, NumberDuo} from './AreaGraph';
+import {MetricsGraphStrips} from './index';
+
+const mockData: DataPoint[][] = [[], [], []];
+
+for (let i = 0; i < 200; i++) {
+  for (let j = 0; j < mockData.length; j++) {
+    mockData[j].push({
+      timestamp: 1731326092000 + i * 100,
+      value: Math.floor(Math.random() * 100),
+    });
+  }
+}
+const meta: Meta = {
+  title: 'components/MetricsGraphStrips',
+  component: MetricsGraphStrips,
+};
+export default meta;
+
+export const ThreeCPUStrips = {
+  args: {
+    cpus: Array.from(mockData, (_, i) => `CPU ${i + 1}`),
+    data: mockData,
+    selectedTimeline: {index: 1, bounds: [mockData[0][25].timestamp, mockData[0][100].timestamp]},
+    onSelectedTimeline: (index: number, bounds: NumberDuo): void => {
+      console.log('onSelectedTimeline', index, bounds);
+    },
+  },
+  render: function Component(args: any): JSX.Element {
+    const [, setArgs] = useArgs();
+
+    const onSelectedTimeline = (index: number, bounds: NumberDuo): void => {
+      args.onSelectedTimeline(index, bounds);
+      setArgs({...args, selectedTimeline: {index, bounds}});
+    };
+
+    return <MetricsGraphStrips {...args} onSelectedTimeline={onSelectedTimeline} />;
+  },
+};

package/src/MetricsGraphStrips/TimelineGuide/index.tsx

@@ -0,0 +1,111 @@
+// 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 {Fragment, useMemo} from 'react';
+
+import * as d3 from 'd3';
+
+import {DataPoint, NumberDuo} from '../AreaGraph';
+
+interface Props {
+  width: number;
+  height: number;
+  margin: number;
+  data: DataPoint[][];
+}
+
+const alignBeforeAxisCorrection = (val: number): number => {
+  if (val < 10000) {
+    return -24;
+  }
+  if (val < 100000) {
+    return -28;
+  }
+
+  return 0;
+};
+
+export const TimelineGuide = ({data, width, height, margin}: Props): JSX.Element => {
+  const bounds = useMemo(() => {
+    const bounds: NumberDuo = [Infinity, -Infinity];
+    data.forEach(cpuData => {
+      cpuData.forEach(dataPoint => {
+        bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
+        bounds[1] = Math.max(bounds[1], dataPoint.timestamp);
+      });
+    });
+    return [0, bounds[1] - bounds[0]];
+  }, [data]);
+
+  const xScale = d3.scaleLinear().domain(bounds).range([0, width]);
+
+  return (
+    <div className="relative h-4">
+      <div className="absolute" style={{width, height}}>
+        <svg style={{width: '100%', height: '100%'}}>
+          <g
+            className="x axis"
+            fill="none"
+            fontSize="10"
+            textAnchor="middle"
+            transform={`translate(0,${height - margin})`}
+          >
+            {xScale.ticks().map((d, i) => (
+              <Fragment key={`${i.toString()}-${d.toString()}`}>
+                <g
+                  key={`tick-${i}`}
+                  className="tick"
+                  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                  transform={`translate(${xScale(d) + alignBeforeAxisCorrection(d)}, ${-height})`}
+                >
+                  {/* <line y2={6} className="stroke-gray-300 dark:stroke-gray-500" /> */}
+                  <text fill="currentColor" dy=".71em" y={9}>
+                    {d} ms
+                  </text>
+                </g>
+                <g key={`grid-${i}`}>
+                  <line
+                    className="stroke-gray-300 dark:stroke-gray-500"
+                    x1={xScale(d)}
+                    x2={xScale(d)}
+                    y1={0}
+                    y2={-height + margin}
+                  />
+                </g>
+              </Fragment>
+            ))}
+            <line
+              className="stroke-gray-300 dark:stroke-gray-500"
+              x1={0}
+              x2={width}
+              y1={-height + 1}
+              y2={-height + 1}
+            />
+            <line
+              className="stroke-gray-300 dark:stroke-gray-500"
+              x1={0}
+              x2={width}
+              y1={-height + 20}
+              y2={-height + 20}
+            />
+            {/* <g transform={`translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`}>
+                <text fill="currentColor" dy=".71em" y={5} className="text-sm">
+                    Time
+                </text>
+            </g> */}
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+};

package/src/MetricsGraphStrips/index.tsx

@@ -0,0 +1,93 @@
+// 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 * as d3 from 'd3';
+
+import {AreaGraph, DataPoint, NumberDuo} from './AreaGraph';
+import {TimelineGuide} from './TimelineGuide';
+
+interface Props {
+  cpus: string[];
+  data: DataPoint[][];
+  selectedTimeline?: {
+    index: number;
+    bounds: NumberDuo;
+  };
+  onSelectedTimeline: (index: number, bounds: NumberDuo | undefined) => void;
+}
+
+const getTimelineGuideHeight = (cpus: string[], collapsedIndices: number[]): number => {
+  return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
+};
+
+export const MetricsGraphStrips = ({
+  cpus,
+  data,
+  selectedTimeline,
+  onSelectedTimeline,
+}: Props): JSX.Element => {
+  const [collapsedIndices, setCollapsedIndices] = useState<number[]>([]);
+
+  // @ts-expect-error
+  const color = d3.scaleOrdinal(d3.schemeObservable10);
+
+  return (
+    <div className="flex flex-col gap-1 relative">
+      <TimelineGuide
+        data={data}
+        width={1468}
+        height={getTimelineGuideHeight(cpus, collapsedIndices)}
+        margin={1}
+      />
+      {cpus.map((cpu, i) => {
+        const isCollapsed = collapsedIndices.includes(i);
+        return (
+          <div className="relative min-h-5" key={cpu}>
+            <div
+              className="text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer z-30"
+              onClick={() => {
+                const newCollapsedIndices = [...collapsedIndices];
+                if (collapsedIndices.includes(i)) {
+                  newCollapsedIndices.splice(newCollapsedIndices.indexOf(i), 1);
+                } else {
+                  newCollapsedIndices.push(i);
+                }
+                setCollapsedIndices(newCollapsedIndices);
+              }}
+            >
+              <Icon icon={isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow'} />
+              {cpu}
+            </div>
+            {!isCollapsed ? (
+              <AreaGraph
+                data={data[i]}
+                height={56}
+                width={1468}
+                fill={color(i.toString()) as string}
+                selectionBounds={
+                  selectedTimeline?.index === i ? selectedTimeline.bounds : undefined
+                }
+                setSelectionBounds={bounds => {
+                  onSelectedTimeline(i, bounds);
+                }}
+              />
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/SimpleMatchers/Select.tsx

@@ -131,7 +131,11 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
         setIsOpen(true);
       } else if (focusedIndex !== -1) {
         onSelection(filteredItems[focusedIndex].key);
-        setIsOpen(false);
+        if (editable) {
+          setSearchTerm(filteredItems[focusedIndex].key);
+        } else {
+          setIsOpen(false);
+        }
       }
     } else if (e.key === 'Escape') {
       setIsOpen(false);
@@ -169,6 +173,16 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
     }
   };
 
+  const handleSelection = (value: string): void => {
+    onSelection(value);
+    if (editable) {
+      setSearchTerm(value);
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+  };
+
   return (
     <div ref={containerRef} className="relative" onKeyDown={handleKeyDown} onClick={onButtonClick}>
       <div
@@ -209,38 +223,41 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
         >
           {searchable && (
             <div className="sticky z-10 top-[-5px] w-auto max-w-full">
-              <div className={cx('relative', editable ? 'h-full min-h-[50px]' : 'h-[45px]')}>
+              <div className="flex flex-col">
                 {editable ? (
-                  <textarea
-                    ref={searchInputRef as React.LegacyRef<HTMLTextAreaElement>}
-                    className="w-full px-4 py-2 h-full text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white"
-                    placeholder={editable ? 'Type a RegEx to add' : 'Search...'}
-                    value={searchTerm}
-                    onChange={e => setSearchTerm(e.target.value)}
-                  />
+                  <>
+                    <textarea
+                      ref={searchInputRef as React.LegacyRef<HTMLTextAreaElement>}
+                      className="w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]"
+                      placeholder="Type a RegEx to add"
+                      value={searchTerm}
+                      onChange={e => setSearchTerm(e.target.value)}
+                    />
+                    {editable && searchTerm.length > 0 && (
+                      <div className="p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+                        <Button
+                          variant="primary"
+                          className="w-full h-[30px]"
+                          onClick={() => {
+                            onSelection(searchTerm);
+                            setIsOpen(false);
+                          }}
+                        >
+                          Add
+                        </Button>
+                      </div>
+                    )}
+                  </>
                 ) : (
                   <input
                     ref={searchInputRef as React.LegacyRef<HTMLInputElement>}
                     type="text"
-                    className="w-full px-4 h-full text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white"
-                    placeholder={editable ? 'Type a RegEx to add' : 'Search...'}
+                    className="w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white"
+                    placeholder="Search..."
                     value={searchTerm}
                     onChange={e => setSearchTerm(e.target.value)}
                   />
                 )}
-
-                {editable && searchTerm.length > 0 && (
-                  <Button
-                    variant="neutral"
-                    className="absolute bottom-[10px] right-[10px] h-[30px]"
-                    onClick={() => {
-                      onSelection(searchTerm);
-                      setIsOpen(false);
-                    }}
-                  >
-                    Add{' '}
-                  </Button>
-                )}
               </div>
             </div>
           )}
@@ -269,8 +286,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
                 tabIndex={-1}
                 onClick={() => {
                   if (!(item.disabled ?? false)) {
-                    onSelection(item.key);
-                    setIsOpen(false);
+                    handleSelection(item.key);
                   }
                 }}
               >