@parca/profile 0.16.327 → 0.16.329

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.329](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.328...@parca/profile@0.16.329) (2024-01-03)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.328](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.327...@parca/profile@0.16.328) (2024-01-02)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.327 (2023-12-14)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MatchersInput/index.js

@@ -147,7 +147,7 @@ const MatchersInput = ({ queryClient, setMatchersString, runQuery, currentQuery,
         setFocusedInput(false);
     };
     const profileSelected = currentQuery.profileName() === '';
-    return (_jsxs("div", { className: "w-full min-w-[300px] flex-1 font-mono", children: [_jsx(TextareaAutosize, { ref: inputRef, className: cx('block h-[38px] w-full flex-1 rounded-md border bg-white px-2 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900', profileSelected && 'cursor-not-allowed'), placeholder: profileSelected
+    return (_jsxs("div", { className: "w-full min-w-[300px] flex-1 font-mono relative", children: [_jsx(TextareaAutosize, { ref: inputRef, className: cx('block h-[38px] w-full flex-1 rounded-md border bg-white px-2 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900', profileSelected && 'cursor-not-allowed'), placeholder: profileSelected
                     ? 'Select a profile first to enter a filter...'
                     : 'filter profiles... eg. node="test"', onChange: onChange, value: value, onBlur: unfocus, onFocus: focus, disabled: profileSelected, title: profileSelected
                     ? 'Select a profile first to enter a filter...'

package/dist/MetricsGraph/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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, useCallback, useRef, useState } from 'react';
+import { Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
@@ -92,11 +92,12 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
         .nice();
     const color = d3.scaleOrdinal(d3.schemeCategory10);
     const l = d3.line(d => xScale(d[0]), d => yScale(d[1]));
-    const getClosest = () => {
+    const highlighted = useMemo(() => {
+        // Return the closest point as the highlighted point
         const closestPointPerSeries = series.map(function (s) {
             const distances = s.values.map(d => {
-                const x = xScale(d[0]);
-                const y = yScale(d[1]);
+                const x = xScale(d[0]) + margin / 2;
+                const y = yScale(d[1]) - margin / 3;
                 return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
             });
             const pointIndex = d3.minIndex(distances);
@@ -119,8 +120,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
             x: xScale(point[0]),
             y: yScale(point[1]),
         };
-    };
-    const highlighted = getClosest();
+    }, [pos, series, xScale, yScale, margin]);
     const onMouseDown = (e) => {
         // only left mouse button
         if (e.button !== 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.327",
+  "version": "0.16.329",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.100",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "39726283538379788de22955a17768ebe2da2fec"
+  "gitHead": "609093d9e68e941b4daf85dc99ae622c320b0e46"
 }

package/src/MatchersInput/index.tsx

@@ -205,7 +205,7 @@ const MatchersInput = ({
   const profileSelected = currentQuery.profileName() === '';
 
   return (
-    <div className="w-full min-w-[300px] flex-1 font-mono">
+    <div className="w-full min-w-[300px] flex-1 font-mono relative">
       <TextareaAutosize
         ref={inputRef}
         className={cx(

package/src/MetricsGraph/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {Fragment, useCallback, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useMemo, useRef, useState} from 'react';
 
 import * as d3 from 'd3';
 import {pointer} from 'd3-selection';
@@ -201,11 +201,13 @@ export const RawMetricsGraph = ({
     d => yScale(d[1])
   );
 
-  const getClosest = (): HighlightedSeries | null => {
+  const highlighted = useMemo(() => {
+    // Return the closest point as the highlighted point
+
     const closestPointPerSeries = series.map(function (s) {
       const distances = s.values.map(d => {
-        const x = xScale(d[0]);
-        const y = yScale(d[1]);
+        const x = xScale(d[0]) + margin / 2;
+        const y = yScale(d[1]) - margin / 3;
 
         return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
       });
@@ -221,7 +223,6 @@ export const RawMetricsGraph = ({
     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,
@@ -232,9 +233,7 @@ export const RawMetricsGraph = ({
       x: xScale(point[0]),
       y: yScale(point[1]),
     };
-  };
-
-  const highlighted = getClosest();
+  }, [pos, series, xScale, yScale, margin]);
 
   const onMouseDown = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
     // only left mouse button