From 30db7dec3102ce5c77f20ddba0b3db1dde3bb807 Mon Sep 17 00:00:00 2001 From: Nar Saynorath Date: Fri, 14 Nov 2025 01:12:28 +0900 Subject: [PATCH 1/5] fix(tracemetrics): Use 60% as default split to show all connected telemetry --- .../views/explore/metrics/metricPanel/sideBySideOrientation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx index e00c0928b1c980..bf52897630594b 100644 --- a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx +++ b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx @@ -45,7 +45,7 @@ export function SideBySideOrientation({ // 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) const defaultSplit = Math.min( - Math.max(width * 0.65, MIN_LEFT_WIDTH), + Math.max(width * 0.6, MIN_LEFT_WIDTH), width - MIN_RIGHT_WIDTH ); From 18503498c66e58cf6705b3a46310aaf9bc946f02 Mon Sep 17 00:00:00 2001 From: Nar Saynorath Date: Fri, 14 Nov 2025 01:23:28 +0900 Subject: [PATCH 2/5] fix(tracemetrics): Update split panel ratio relative to nav collapse state --- .../metrics/metricPanel/sideBySideOrientation.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx index bf52897630594b..bd16c2d09b1801 100644 --- a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx +++ b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx @@ -12,6 +12,7 @@ import {SAMPLES_PANEL_MIN_WIDTH} from 'sentry/views/explore/metrics/metricInfoTa 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'; +import {useNavContext} from 'sentry/views/nav/context'; const MIN_LEFT_WIDTH = 400; @@ -42,10 +43,14 @@ 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) + const {isCollapsed: isNavCollapsed} = useNavContext(); + // Default split is 62.5% of the available width for collapsed nav, 55% for expanded nav, + // but not less than MIN_LEFT_WIDTH while also accommodating the minimum right panel width. + // We change the ratio depending on whether the nav is collapsed because if it is collapsed, + // there is more space available to show the connected telemetry by default + const splitRatio = isNavCollapsed ? 0.625 : 0.55; const defaultSplit = Math.min( - Math.max(width * 0.6, MIN_LEFT_WIDTH), + Math.max(width * splitRatio, MIN_LEFT_WIDTH), width - MIN_RIGHT_WIDTH ); From 59f38f51ed3d42b5529ef4a4ac525d5c8a5731ff Mon Sep 17 00:00:00 2001 From: Nar Saynorath Date: Fri, 14 Nov 2025 01:46:34 +0900 Subject: [PATCH 3/5] Use simple constraints instead of relying on hook ratio --- .../metricInfoTabs/metricsSamplesTable.tsx | 2 ++ .../metricPanel/sideBySideOrientation.tsx | 20 +++++++++---------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx b/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx index 439214f8ec3c4e..899b18e86eef2c 100644 --- a/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx +++ b/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx @@ -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; diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx index bd16c2d09b1801..79663785eb6beb 100644 --- a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx +++ b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx @@ -8,16 +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'; -import {useNavContext} from 'sentry/views/nav/context'; 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({ @@ -43,15 +46,12 @@ export function SideBySideOrientation({ const {width} = useDimensions({elementRef: measureRef}); const hasSize = width > 0; - const {isCollapsed: isNavCollapsed} = useNavContext(); // Default split is 62.5% of the available width for collapsed nav, 55% for expanded nav, - // but not less than MIN_LEFT_WIDTH while also accommodating the minimum right panel width. - // We change the ratio depending on whether the nav is collapsed because if it is collapsed, - // there is more space available to show the connected telemetry by default - const splitRatio = isNavCollapsed ? 0.625 : 0.55; + // but not less than MIN_LEFT_WIDTH while also accommodating the desired right panel width + // that allows us to show all of the telemetry icons. const defaultSplit = Math.min( - Math.max(width * splitRatio, MIN_LEFT_WIDTH), - width - MIN_RIGHT_WIDTH + Math.max(width * 0.625, MIN_LEFT_WIDTH), + width - (WIDTH_WITH_TELEMETRY_ICONS_VISIBLE + PADDING_SIZE + DIVIDER_WIDTH) ); const additionalActions = ( From 7cdcc3cb85fb3485159d3e7cc4b64ed4ed9ca5d2 Mon Sep 17 00:00:00 2001 From: Nar Saynorath Date: Fri, 14 Nov 2025 01:47:42 +0900 Subject: [PATCH 4/5] fix comment --- .../explore/metrics/metricPanel/sideBySideOrientation.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx index 79663785eb6beb..d9fee95e45710e 100644 --- a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx +++ b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx @@ -46,9 +46,8 @@ export function SideBySideOrientation({ const {width} = useDimensions({elementRef: measureRef}); const hasSize = width > 0; - // Default split is 62.5% of the available width for collapsed nav, 55% for expanded nav, - // but not less than MIN_LEFT_WIDTH while also accommodating the desired right panel width - // that allows us to show all of the telemetry icons. + // Default split is 62.5% 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.625, MIN_LEFT_WIDTH), width - (WIDTH_WITH_TELEMETRY_ICONS_VISIBLE + PADDING_SIZE + DIVIDER_WIDTH) From 3cc93295deb83ef3b87d2dc05c64edb564909dee Mon Sep 17 00:00:00 2001 From: Nar Saynorath Date: Fri, 14 Nov 2025 01:48:43 +0900 Subject: [PATCH 5/5] Restore 65% ratio, wasn't broken from before --- .../explore/metrics/metricPanel/sideBySideOrientation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx index d9fee95e45710e..e244497822df26 100644 --- a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx +++ b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx @@ -46,10 +46,10 @@ export function SideBySideOrientation({ const {width} = useDimensions({elementRef: measureRef}); const hasSize = width > 0; - // Default split is 62.5% of the available width but not less than MIN_LEFT_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.625, MIN_LEFT_WIDTH), + Math.max(width * 0.65, MIN_LEFT_WIDTH), width - (WIDTH_WITH_TELEMETRY_ICONS_VISIBLE + PADDING_SIZE + DIVIDER_WIDTH) );