Skip to content

fix(tracemetrics): Update split panel to use different ratio for nav open state #103297

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

Merged
merged 5 commits into from
Nov 13, 2025
+11 −5
Merged

fix(tracemetrics): Update split panel to use different ratio for nav open state #103297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
30db7de
fix(tracemetrics): Use 60% as default split to show all connected tel…
narsaynorath Nov 13, 2025
1850349
fix(tracemetrics): Update split panel ratio relative to nav collapse …
narsaynorath Nov 13, 2025
59f38f5
Use simple constraints instead of relying on hook ratio
narsaynorath Nov 13, 2025
7cdcc3c
fix comment
narsaynorath Nov 13, 2025
3cc9329
Restore 65% ratio, wasn't broken from before
narsaynorath Nov 13, 2025
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
2 changes: 2 additions & 0 deletions static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ const TWO_MINUTE_DELAY = 120;
const MAX_TELEMETRY_WIDTH = 40;

export const SAMPLES_PANEL_MIN_WIDTH = 350;
export const WIDTH_WITH_TELEMETRY_ICONS_VISIBLE =
SAMPLES_PANEL_MIN_WIDTH + MAX_TELEMETRY_WIDTH * 3;

interface MetricsSamplesTableProps {
embedded?: boolean;
Expand Down
14 changes: 9 additions & 5 deletions static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,19 @@ import type {useMetricTimeseries} from 'sentry/views/explore/metrics/hooks/useMe
import type {TableOrientation} from 'sentry/views/explore/metrics/hooks/useOrientationControl';
import {MetricsGraph} from 'sentry/views/explore/metrics/metricGraph';
import MetricInfoTabs from 'sentry/views/explore/metrics/metricInfoTabs';
import {SAMPLES_PANEL_MIN_WIDTH} from 'sentry/views/explore/metrics/metricInfoTabs/metricsSamplesTable';
import {
SAMPLES_PANEL_MIN_WIDTH,
WIDTH_WITH_TELEMETRY_ICONS_VISIBLE,
} from 'sentry/views/explore/metrics/metricInfoTabs/metricsSamplesTable';
import {HideContentButton} from 'sentry/views/explore/metrics/metricPanel/hideContentButton';
import {PanelPositionSelector} from 'sentry/views/explore/metrics/metricPanel/panelPositionSelector';
import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery';

const MIN_LEFT_WIDTH = 400;

// Defined by the size of the expected samples tab component
const PADDING_SIZE = 16;
const PADDING_SIZE = 20;
const DIVIDER_WIDTH = 16;
const MIN_RIGHT_WIDTH = SAMPLES_PANEL_MIN_WIDTH + PADDING_SIZE;

export function SideBySideOrientation({
Expand All @@ -42,11 +46,11 @@ export function SideBySideOrientation({
const {width} = useDimensions({elementRef: measureRef});

const hasSize = width > 0;
// Default split is 65% of the available width, but not less than MIN_LEFT_WIDTH
// and at most the maximum size allowed for the left panel (i.e. width - MIN_RIGHT_WIDTH)
// Default split is 65% of the available width but not less than MIN_LEFT_WIDTH
// while also accommodating the desired right panel width to show all of the telemetry icons.
const defaultSplit = Math.min(
Math.max(width * 0.65, MIN_LEFT_WIDTH),
width - MIN_RIGHT_WIDTH
width - (WIDTH_WITH_TELEMETRY_ICONS_VISIBLE + PADDING_SIZE + DIVIDER_WIDTH)
);

const additionalActions = (
Expand Down
Loading