Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui: Metrics graph highlighted point bug fix #4246

Merged
merged 1 commit into from
Jan 3, 2024
Merged

ui: Metrics graph highlighted point bug fix #4246

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions ui/packages/shared/profile/src/MetricsGraph/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Comment on lines +209 to +210
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just curious here, why did adding a margin and dividing by 2/3 fix the bug?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

curious about this as well, does it maybe have to do with the 2.5 factor in the xScale setup?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, these are because of the additional padding that got introduced from the axis labels.

But still don't have a concrete explanation on why these fractions work. We need to figure that out as part of #4241.


return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
});
Expand All @@ -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,
Expand All @@ -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
Expand Down
Loading