@parca/profile 0.16.0 → 0.16.43

package/src/MetricsCircle/index.tsx

@@ -0,0 +1,28 @@
+// 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.
+
+interface MetricsCircleProps {
+  cx: number;
+  cy: number;
+  radius?: number;
+}
+
+const defaultRadius = 3;
+
+const MetricsCircle = ({cx, cy, radius}: MetricsCircleProps): JSX.Element => (
+  <g className="circle">
+    <circle cx={cx} cy={cy} r={radius !== undefined ? radius : defaultRadius}></circle>
+  </g>
+);
+
+export default MetricsCircle;

package/src/MetricsGraph/index.tsx

@@ -0,0 +1,589 @@
+// 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 React, {useEffect, useRef, useState} from 'react';
+import * as d3 from 'd3';
+import {pointer} from 'd3-selection';
+import {formatForTimespan} from '@parca/functions/time';
+import {SingleProfileSelection, timeFormat} from '..';
+import {cutToMaxStringLength} from '@parca/functions/string';
+import throttle from 'lodash.throttle';
+import {MetricsSeries as MetricsSeriesPb, MetricsSample, Label} from '@parca/client';
+import {usePopper} from 'react-popper';
+import type {VirtualElement} from '@popperjs/core';
+import {valueFormatter, formatDate} from '@parca/functions';
+import {DateTimeRange} from '@parca/components';
+import {useContainerDimensions} from '@parca/dynamicsize';
+import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
+
+import MetricsSeries from '../MetricsSeries';
+import MetricsCircle from '../MetricsCircle';
+
+interface RawMetricsGraphProps {
+  data: MetricsSeriesPb[];
+  from: number;
+  to: number;
+  profile: SingleProfileSelection | null;
+  onSampleClick: (timestamp: number, value: number, labels: Label[]) => void;
+  onLabelClick: (labelName: string, labelValue: string) => void;
+  setTimeRange: (range: DateTimeRange) => void;
+  sampleUnit: string;
+  width?: number;
+}
+
+interface HighlightedSeries {
+  seriesIndex: number;
+  labels: Label[];
+  timestamp: number;
+  value: number;
+  x: number;
+  y: number;
+}
+
+interface Series {
+  metric: Label[];
+  values: number[][];
+}
+
+const MetricsGraph = ({
+  data,
+  from,
+  to,
+  profile,
+  onSampleClick,
+  onLabelClick,
+  setTimeRange,
+  sampleUnit,
+}: RawMetricsGraphProps): JSX.Element => {
+  const {ref, dimensions} = useContainerDimensions();
+
+  return (
+    <div ref={ref}>
+      <RawMetricsGraph
+        data={data}
+        from={from}
+        to={to}
+        profile={profile}
+        onSampleClick={onSampleClick}
+        onLabelClick={onLabelClick}
+        setTimeRange={setTimeRange}
+        sampleUnit={sampleUnit}
+        width={dimensions?.width}
+      />
+    </div>
+  );
+};
+
+export default MetricsGraph;
+
+export const parseValue = (value: string): number | null => {
+  const val = parseFloat(value);
+  // "+Inf", "-Inf", "+Inf" will be parsed into NaN by parseFloat(). They
+  // can't be graphed, so show them as gaps (null).
+  return isNaN(val) ? null : val;
+};
+
+const lineStroke = '1px';
+const lineStrokeHover = '2px';
+
+interface MetricsTooltipProps {
+  x: number;
+  y: number;
+  highlighted: HighlightedSeries;
+  onLabelClick: (labelName: string, labelValue: string) => void;
+  contextElement: Element | null;
+  sampleUnit: string;
+}
+
+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 virtualElement: VirtualElement = {
+  getBoundingClientRect: () => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return {
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    } as DOMRect;
+  },
+};
+
+export const MetricsTooltip = ({
+  x,
+  y,
+  highlighted,
+  onLabelClick,
+  contextElement,
+  sampleUnit,
+}: MetricsTooltipProps): JSX.Element => {
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const {styles, attributes, ...popperProps} = usePopper(virtualElement, popperElement, {
+    placement: 'auto-start',
+    strategy: 'absolute',
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          tether: false,
+          altAxis: true,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [30, 30],
+        },
+      },
+    ],
+  });
+
+  const update = popperProps.update;
+
+  useEffect(() => {
+    if (contextElement != null) {
+      virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, x, y);
+      void update?.();
+    }
+  }, [x, y, contextElement, update]);
+
+  const nameLabel: Label | undefined = highlighted?.labels.find(e => e.name === '__name__');
+  const highlightedNameLabel: Label = nameLabel !== undefined ? nameLabel : {name: '', value: ''};
+
+  return (
+    <div ref={setPopperElement} style={styles.popper} {...attributes.popper} className="z-10">
+      <div className="flex max-w-md">
+        <div className="m-auto">
+          <div
+            className="border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90"
+            style={{borderWidth: 1}}
+          >
+            <div className="flex flex-row">
+              <div className="ml-2 mr-6">
+                <span className="font-semibold">{highlightedNameLabel.value}</span>
+                <span className="block text-gray-700 dark:text-gray-300 my-2">
+                  <table className="table-auto">
+                    <tbody>
+                      <tr>
+                        <td className="w-1/4">Value</td>
+                        <td className="w-3/4">
+                          {valueFormatter(highlighted.value, sampleUnit, 1)}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className="w-1/4">At</td>
+                        <td className="w-3/4">{formatDate(highlighted.timestamp, timeFormat)}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </span>
+                <span className="block text-gray-500 my-2">
+                  {highlighted.labels
+                    .filter((label: Label) => label.name !== '__name__')
+                    .map(function (label: Label) {
+                      return (
+                        <button
+                          key={label.name}
+                          type="button"
+                          className="inline-block rounded-lg text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400 px-2 py-1 text-xs font-bold mr-3"
+                          onClick={() => onLabelClick(label.name, label.value)}
+                        >
+                          {cutToMaxStringLength(`${label.name}="${label.value}"`, 37)}
+                        </button>
+                      );
+                    })}
+                </span>
+                <span className="block text-gray-500 text-xs">
+                  Hold shift and click label to add to query.
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const RawMetricsGraph = ({
+  data,
+  from,
+  to,
+  profile,
+  onSampleClick,
+  onLabelClick,
+  setTimeRange,
+  width,
+  sampleUnit,
+}: RawMetricsGraphProps): JSX.Element => {
+  const graph = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [hovering, setHovering] = useState(false);
+  const [relPos, setRelPos] = useState(-1);
+  const [pos, setPos] = useState([0, 0]);
+  const metricPointRef = useRef(null);
+  const isShiftDown = useIsShiftDown();
+
+  const time: number = parseFloat(profile?.HistoryParams().time);
+
+  if (width === undefined || width == null) {
+    width = 0;
+  }
+
+  const height = Math.min(width / 2.5, 400);
+  const margin = 50;
+  const marginRight = 20;
+
+  const series: Series[] = data.reduce<Series[]>(function (agg: Series[], s: MetricsSeriesPb) {
+    if (s.labelset !== undefined) {
+      agg.push({
+        metric: s.labelset.labels,
+        values: s.samples.reduce<number[][]>(function (agg: number[][], d: MetricsSample) {
+          if (d.timestamp !== undefined && d.value !== undefined) {
+            const t = (+d.timestamp.seconds * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
+            agg.push([t, parseFloat(d.value)]);
+          }
+          return agg;
+        }, []),
+      });
+    }
+    return agg;
+  }, []);
+
+  const extentsY = series.map(function (s) {
+    return d3.extent(s.values, function (d) {
+      return d[1];
+    });
+  });
+
+  const minY = d3.min(extentsY, function (d) {
+    return d[0];
+  });
+  const maxY = d3.max(extentsY, function (d) {
+    return d[1];
+  });
+
+  /* Scale */
+  const xScale = d3
+    .scaleUtc()
+    .domain([from, to])
+    .range([0, width - margin - marginRight]);
+
+  const yScale = d3
+    .scaleLinear()
+    // tslint:disable-next-line
+    .domain([minY, maxY] as Iterable<d3.NumberValue>)
+    .range([height - margin, 0]);
+
+  const color = d3.scaleOrdinal(d3.schemeCategory10);
+
+  const l = d3.line(
+    d => xScale(d[0]),
+    d => yScale(d[1])
+  );
+
+  const getClosest = (): HighlightedSeries | null => {
+    const closestPointPerSeries = series.map(function (s) {
+      const distances = s.values.map(d => {
+        const x = xScale(d[0]);
+        const y = yScale(d[1]);
+
+        return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
+      });
+
+      const pointIndex = d3.minIndex(distances);
+      const minDistance = distances[pointIndex];
+      return {
+        pointIndex,
+        distance: minDistance,
+      };
+    });
+
+    const closestSeriesIndex = d3.minIndex(closestPointPerSeries, s => s.distance);
+    const pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
+    const point = series[closestSeriesIndex].values[pointIndex];
+
+    return {
+      seriesIndex: closestSeriesIndex,
+      labels: series[closestSeriesIndex].metric,
+      timestamp: point[0],
+      value: point[1],
+      x: xScale(point[0]),
+      y: yScale(point[1]),
+    };
+  };
+
+  const highlighted = getClosest();
+
+  const onMouseDown = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
+    // only left mouse button
+    if (e.button !== 0) {
+      return;
+    }
+
+    // X/Y coordinate array relative to svg
+    const rel = pointer(e);
+
+    const xCoordinate = rel[0];
+    const xCoordinateWithoutMargin = xCoordinate - margin;
+    if (xCoordinateWithoutMargin >= 0) {
+      setRelPos(xCoordinateWithoutMargin);
+      setDragging(true);
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const openClosestProfile = (): void => {
+    if (highlighted != null) {
+      onSampleClick(Math.round(highlighted.timestamp), highlighted.value, highlighted.labels);
+    }
+  };
+
+  const onMouseUp = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
+    setDragging(false);
+
+    if (relPos === -1) {
+      // MouseDown happened outside of this element.
+      return;
+    }
+
+    // This is a normal click. We tolerate tiny movements to still be a
+    // click as they can occur when clicking based on user feedback.
+    if (Math.abs(relPos - pos[0]) <= 1) {
+      openClosestProfile();
+      setRelPos(-1);
+      return;
+    }
+
+    const firstTime = xScale.invert(relPos).valueOf();
+    const secondTime = xScale.invert(pos[0]).valueOf();
+
+    if (firstTime > secondTime) {
+      setTimeRange(DateTimeRange.fromAbsoluteDates(secondTime, firstTime));
+    } else {
+      setTimeRange(DateTimeRange.fromAbsoluteDates(firstTime, secondTime));
+    }
+    setRelPos(-1);
+
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const throttledSetPos = throttle(setPos, 20);
+
+  const onMouseMove = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
+    // X/Y coordinate array relative to svg
+    const rel = pointer(e);
+
+    const xCoordinate = rel[0];
+    const xCoordinateWithoutMargin = xCoordinate - margin;
+    const yCoordinate = rel[1];
+    const yCoordinateWithoutMargin = yCoordinate - margin;
+
+    if (!isShiftDown) {
+      throttledSetPos([xCoordinateWithoutMargin, yCoordinateWithoutMargin]);
+    }
+  };
+
+  const findSelectedProfile = (): HighlightedSeries | null => {
+    if (profile == null) {
+      return null;
+    }
+
+    let s: Series | null = null;
+    let seriesIndex: number = -1;
+
+    outer: for (let i = 0; i < series.length; i++) {
+      const keys = profile.labels.map(e => e.name);
+      for (let j = 0; j < keys.length; j++) {
+        const labelName = keys[j];
+        const label = series[i].metric.find(e => e.name === labelName);
+        if (label === undefined) {
+          continue outer; // label doesn't exist to begin with
+        }
+        if (profile.labels[j].value !== label.value) {
+          continue outer; // label values don't match
+        }
+      }
+      seriesIndex = i;
+      s = series[i];
+    }
+
+    if (s == null) {
+      return null;
+    }
+    // Find the sample that matches the timestamp
+    const sample = s.values.find(v => {
+      return Math.round(v[0]) === time;
+    });
+    if (sample === undefined) {
+      return null;
+    }
+
+    return {
+      labels: [],
+      seriesIndex,
+      timestamp: sample[0],
+      value: sample[1],
+      x: xScale(sample[0]),
+      y: yScale(sample[1]),
+    };
+  };
+
+  const selected = findSelectedProfile();
+
+  return (
+    <>
+      {highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (
+        <div
+          onMouseMove={onMouseMove}
+          onMouseEnter={() => setHovering(true)}
+          onMouseLeave={() => setHovering(false)}
+        >
+          <MetricsTooltip
+            x={pos[0] + margin}
+            y={pos[1] + margin}
+            highlighted={highlighted}
+            onLabelClick={onLabelClick}
+            contextElement={graph.current}
+            sampleUnit={sampleUnit}
+          />
+        </div>
+      )}
+      <div
+        ref={graph}
+        onMouseEnter={function () {
+          setHovering(true);
+        }}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <svg
+          width={`${width}px`}
+          height={`${height + margin}px`}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp}
+          onMouseMove={onMouseMove}
+        >
+          <g transform={`translate(${margin}, 0)`}>
+            {dragging && (
+              <g className="zoom-time-rect">
+                <rect
+                  className="bar"
+                  x={pos[0] - relPos < 0 ? pos[0] : relPos}
+                  y={0}
+                  height={height}
+                  width={Math.abs(pos[0] - relPos)}
+                  fill={'rgba(0, 0, 0, 0.125)'}
+                />
+              </g>
+            )}
+          </g>
+          <g transform={`translate(${margin}, ${margin})`}>
+            <g className="lines fill-transparent">
+              {series.map((s, i) => (
+                <g key={i} className="line">
+                  <MetricsSeries
+                    data={s}
+                    line={l}
+                    color={color(i.toString())}
+                    strokeWidth={
+                      hovering && highlighted != null && i === highlighted.seriesIndex
+                        ? lineStrokeHover
+                        : lineStroke
+                    }
+                    xScale={xScale}
+                    yScale={yScale}
+                  />
+                </g>
+              ))}
+            </g>
+            {hovering && highlighted != null && (
+              <g
+                className="circle-group"
+                ref={metricPointRef}
+                style={{fill: color(highlighted.seriesIndex.toString())}}
+              >
+                <MetricsCircle cx={highlighted.x} cy={highlighted.y} />
+              </g>
+            )}
+            {selected != null && (
+              <g
+                className="circle-group"
+                style={
+                  selected?.seriesIndex != null
+                    ? {fill: color(selected.seriesIndex.toString())}
+                    : {}
+                }
+              >
+                <MetricsCircle cx={selected.x} cy={selected.y} radius={5} />
+              </g>
+            )}
+            <g
+              className="x axis"
+              fill="none"
+              fontSize="10"
+              textAnchor="middle"
+              transform={`translate(0,${height - margin})`}
+            >
+              {xScale.ticks(5).map((d, i) => (
+                <g
+                  key={i}
+                  className="tick"
+                  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                  transform={`translate(${xScale(d)}, 0)`}
+                >
+                  <line y2={6} stroke="currentColor" />
+                  <text fill="currentColor" dy=".71em" y={9}>
+                    {formatDate(d, formatForTimespan(from, to))}
+                  </text>
+                </g>
+              ))}
+            </g>
+            <g className="y axis" textAnchor="end" fontSize="10" fill="none">
+              {yScale.ticks(3).map((d, i) => (
+                <g
+                  key={i}
+                  className="tick"
+                  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                  transform={`translate(0, ${yScale(d)})`}
+                >
+                  <line stroke="currentColor" x2={-6} />
+                  <text fill="currentColor" x={-9} dy={'0.32em'}>
+                    {valueFormatter(d, sampleUnit, 1)}
+                  </text>
+                </g>
+              ))}
+            </g>
+          </g>
+        </svg>
+      </div>
+    </>
+  );
+};

package/src/MetricsSeries/index.tsx

@@ -0,0 +1,38 @@
+// 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 * as d3 from 'd3';
+
+interface MetricsSeriesProps {
+  data: any;
+  line: d3.Line<[number, number]>;
+  color: string;
+  strokeWidth: string;
+  xScale: (input: number) => number;
+  yScale: (input: number) => number;
+}
+
+const MetricsSeries = ({data, line, color, strokeWidth}: MetricsSeriesProps): JSX.Element => (
+  <g className="line-group">
+    <path
+      className="line"
+      d={line(data.values) ?? undefined}
+      style={{
+        stroke: color,
+        strokeWidth,
+      }}
+    />
+  </g>
+);
+
+export default MetricsSeries;