@parca/profile 0.16.328 → 0.16.330

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.330](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.329...@parca/profile@0.16.330) (2024-01-03)
+
+**Note:** Version bump only for package @parca/profile
+
+## [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

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/dist/ProfileSource.d.ts

@@ -16,8 +16,7 @@ export interface ProfileSelection {
     ProfileSource: () => ProfileSource;
     Type: () => string;
 }
-export declare const timeFormat = "MMM d, 'at' h:mm:s a '(UTC)'";
-export declare const timeFormatShort = "MMM d, h:mma";
+export declare const timeFormat = "MMM d, 'at' HH:mm:ss '(UTC)'";
 export declare function ParamsString(params: {
     [key: string]: string;
 }): string;

package/dist/ProfileSource.js

@@ -14,8 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { ProfileDiffSelection_Mode, QueryRequest_Mode, QueryRequest_ReportType, Timestamp, } from '@parca/client';
 import { ProfileType, Query } from '@parca/parser';
 import { formatDate } from '@parca/utilities';
-export const timeFormat = "MMM d, 'at' h:mm:s a '(UTC)'";
-export const timeFormatShort = 'MMM d, h:mma';
+export const timeFormat = "MMM d, 'at' HH:mm:ss '(UTC)'";
 export function ParamsString(params) {
     return Object.keys(params)
         .map(function (key) {

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.328",
+  "version": "0.16.330",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.100",
-    "@parca/components": "^0.16.240",
+    "@parca/components": "^0.16.241",
     "@parca/dynamicsize": "^0.16.60",
     "@parca/hooks": "^0.0.38",
     "@parca/parser": "^0.16.68",
-    "@parca/store": "^0.16.121",
-    "@parca/utilities": "^0.0.49",
+    "@parca/store": "^0.16.122",
+    "@parca/utilities": "^0.0.50",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d529dd87e642c1c67054ad2c68912d090e013321"
+  "gitHead": "4f536249850d27a79b365d3d796ca8ff692896d5"
 }

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

package/src/ProfileSource.tsx

@@ -38,8 +38,7 @@ export interface ProfileSelection {
   Type: () => string;
 }
 
-export const timeFormat = "MMM d, 'at' h:mm:s a '(UTC)'";
-export const timeFormatShort = 'MMM d, h:mma';
+export const timeFormat = "MMM d, 'at' HH:mm:ss '(UTC)'";
 
 export function ParamsString(params: {[key: string]: string}): string {
   return Object.keys(params)