From 24b0924b2e426021277fdb592f423b617c3f2eab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= Date: Wed, 8 Apr 2026 09:15:20 -0400 Subject: [PATCH 1/2] ref(utils): simplify useDimensions runtime and types --- static/app/components/charts/chartLegend.tsx | 2 +- .../components/checkInTimeline/checkInTimeline.stories.tsx | 2 +- static/app/components/contentSliderDiff/index.tsx | 2 +- .../components/feedback/feedbackItem/feedbackItemHeader.tsx | 2 +- .../app/components/replays/breadcrumbs/replayTimeline.tsx | 2 +- .../app/components/replays/player/replayPlayerMeasurer.tsx | 2 +- static/app/components/searchQueryBuilder/context.tsx | 2 +- static/app/components/searchQueryBuilder/index.tsx | 2 +- static/app/utils/useDimensions.tsx | 6 +----- static/app/views/alerts/rules/uptime/detailsTimeline.tsx | 2 +- .../widgetBuilder/components/newWidgetBuilder.tsx | 2 +- .../views/detectors/components/detectorListTable/index.tsx | 2 +- .../views/detectors/hooks/useMonitorsScheduleSamples.tsx | 4 +--- static/app/views/detectors/list/cron.tsx | 2 +- static/app/views/detectors/list/uptime.tsx | 2 +- static/app/views/explore/logs/tables/logsInfiniteTable.tsx | 2 +- .../explore/metrics/metricPanel/sideBySideOrientation.tsx | 2 +- static/app/views/explore/savedQueries/exploreParams.tsx | 2 +- .../app/views/insights/crons/components/detailsTimeline.tsx | 2 +- .../insights/crons/components/mockTimelineVisualization.tsx | 2 +- .../insights/crons/components/overviewTimeline/index.tsx | 2 +- .../insights/uptime/components/overviewTimeline/index.tsx | 2 +- .../issueDetails/streamline/issueCronCheckTimeline.tsx | 2 +- .../issueDetails/streamline/issueUptimeCheckTimeline.tsx | 2 +- .../app/views/issueDetails/traceTimeline/traceTimeline.tsx | 2 +- static/app/views/replays/detail/layout/replayLayout.tsx | 2 +- static/app/views/replays/list/replayIndexTable.tsx | 2 +- 27 files changed, 27 insertions(+), 33 deletions(-) diff --git a/static/app/components/charts/chartLegend.tsx b/static/app/components/charts/chartLegend.tsx index 231fc976248966..94ae963d878f46 100644 --- a/static/app/components/charts/chartLegend.tsx +++ b/static/app/components/charts/chartLegend.tsx @@ -72,7 +72,7 @@ export function ChartLegend({items, selected, onSelectionChange}: ChartLegendPro // ResizeObserver (via useDimensions) updates wrapperWidth on resize, // which triggers the useLayoutEffect below to recompute overflow. - const {width: wrapperWidth} = useDimensions({elementRef: wrapperRef}); + const {width: wrapperWidth} = useDimensions(wrapperRef); const [firstOverflowIndex, setFirstOverflowIndex] = useState(null); useLayoutEffect(() => { diff --git a/static/app/components/checkInTimeline/checkInTimeline.stories.tsx b/static/app/components/checkInTimeline/checkInTimeline.stories.tsx index 4a09721df1f4f0..0c6cc248af8be8 100644 --- a/static/app/components/checkInTimeline/checkInTimeline.stories.tsx +++ b/static/app/components/checkInTimeline/checkInTimeline.stories.tsx @@ -82,7 +82,7 @@ function generateMockTickData( export default Storybook.story('CheckInTimeline', story => { story('Simple', () => { const elementRef = useRef(null); - const {width: timelineWidth} = useDimensions({elementRef}); + const {width: timelineWidth} = useDimensions(elementRef); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); const [secondsGap, setSecondsGap] = useState(60); diff --git a/static/app/components/contentSliderDiff/index.tsx b/static/app/components/contentSliderDiff/index.tsx index ad936d819e3adb..dc2e6e594f5911 100644 --- a/static/app/components/contentSliderDiff/index.tsx +++ b/static/app/components/contentSliderDiff/index.tsx @@ -31,7 +31,7 @@ interface Props { */ function Body({onDragHandleMouseDown, after, before, minHeight = '0px'}: Props) { const positionedRef = useRef(null); - const viewDimensions = useDimensions({elementRef: positionedRef}); + const viewDimensions = useDimensions(positionedRef); return ( diff --git a/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx b/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx index ab87b8a395250c..89cff048838b41 100644 --- a/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx +++ b/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx @@ -35,7 +35,7 @@ function dimensionsToSize({width}: Dimensions) { export function FeedbackItemHeader({eventData, feedbackItem, onBackToList}: Props) { const wrapperRef = useRef(null); - const dimensions = useDimensions({elementRef: wrapperRef}); + const dimensions = useDimensions(wrapperRef); return ( diff --git a/static/app/components/replays/breadcrumbs/replayTimeline.tsx b/static/app/components/replays/breadcrumbs/replayTimeline.tsx index 66723e7fdf5153..17a8e819bc3a50 100644 --- a/static/app/components/replays/breadcrumbs/replayTimeline.tsx +++ b/static/app/components/replays/breadcrumbs/replayTimeline.tsx @@ -23,7 +23,7 @@ export function ReplayTimeline() { const [timelineScale] = useTimelineScale(); const stackedRef = useRef(null); - const {width} = useDimensions({elementRef: stackedRef}); + const {width} = useDimensions(stackedRef); if (!replay) { return ; diff --git a/static/app/components/replays/player/replayPlayerMeasurer.tsx b/static/app/components/replays/player/replayPlayerMeasurer.tsx index 99132d67e55478..830e41627f8506 100644 --- a/static/app/components/replays/player/replayPlayerMeasurer.tsx +++ b/static/app/components/replays/player/replayPlayerMeasurer.tsx @@ -48,7 +48,7 @@ const MAX_ZOOM = 1.5; export function ReplayPlayerMeasurer({children, measure = 'both'}: Props) { const elementRef = useRef(null); - const measuredDimensions = useDimensions({elementRef}); + const measuredDimensions = useDimensions(elementRef); const playerState = useReplayPlayerState(); const [, setViewSize] = useReplayPlayerSize(); diff --git a/static/app/components/searchQueryBuilder/context.tsx b/static/app/components/searchQueryBuilder/context.tsx index f207b658287aca..005e121a8ffc9c 100644 --- a/static/app/components/searchQueryBuilder/context.tsx +++ b/static/app/components/searchQueryBuilder/context.tsx @@ -241,7 +241,7 @@ export function SearchQueryBuilderProvider({ searchSource, onSearch, }); - const {width: searchBarWidth} = useDimensions({elementRef: wrapperRef}); + const {width: searchBarWidth} = useDimensions(wrapperRef); const size = searchBarWidth && searchBarWidth < 600 ? ('small' as const) : ('normal' as const); diff --git a/static/app/components/searchQueryBuilder/index.tsx b/static/app/components/searchQueryBuilder/index.tsx index 7304466b52965c..0d67967eb17f26 100644 --- a/static/app/components/searchQueryBuilder/index.tsx +++ b/static/app/components/searchQueryBuilder/index.tsx @@ -280,7 +280,7 @@ function SearchQueryBuilderUI({ dispatch({type: 'UPDATE_QUERY', query: initialQuery}); }, [dispatch, initialQuery]); - const {width: actionBarWidth} = useDimensions({elementRef: actionBarRef}); + const {width: actionBarWidth} = useDimensions(actionBarRef); return ( { - elementRef: RefObject; -} - /** * Returns a ref to be added to an element and returns the dimensions of that element */ -export function useDimensions({elementRef}: Props) { +export function useDimensions(elementRef: RefObject) { const [dimensions, setDimensions] = useState({height: 0, width: 0}); const element = elementRef.current; diff --git a/static/app/views/alerts/rules/uptime/detailsTimeline.tsx b/static/app/views/alerts/rules/uptime/detailsTimeline.tsx index c43bd75c8e82db..1221061368221e 100644 --- a/static/app/views/alerts/rules/uptime/detailsTimeline.tsx +++ b/static/app/views/alerts/rules/uptime/detailsTimeline.tsx @@ -26,7 +26,7 @@ interface Props { export function DetailsTimeline({uptimeDetector, onStatsLoaded}: Props) { const {id} = uptimeDetector; const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 500); const timeWindowConfig = useTimeWindowConfig({ diff --git a/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx b/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx index 00e100897c8b9b..4fb96b32897df6 100644 --- a/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx +++ b/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx @@ -128,7 +128,7 @@ export function WidgetBuilderV2({ }; }, []); - const dimensions = useDimensions({elementRef: navigationElementRef}); + const dimensions = useDimensions(navigationElementRef); const handleDragEnd = ({over}: any) => { setTranslate(snapPreviewToCorners(over)); diff --git a/static/app/views/detectors/components/detectorListTable/index.tsx b/static/app/views/detectors/components/detectorListTable/index.tsx index 8e484d5fbaefd7..e7eed14c4a0b1a 100644 --- a/static/app/views/detectors/components/detectorListTable/index.tsx +++ b/static/app/views/detectors/components/detectorListTable/index.tsx @@ -139,7 +139,7 @@ export function DetectorListTable({ ); const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 1000); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); diff --git a/static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx b/static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx index f27b10941092a7..f582937095a81c 100644 --- a/static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx +++ b/static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx @@ -29,9 +29,7 @@ export function useMonitorsScheduleSamples({ ...detectorFields }: UseMonitorsScheduleSamplesOptions) { const timeLineWidthTrackerRef = useRef(null); - const {width: timelineWidth} = useDimensions({ - elementRef: timeLineWidthTrackerRef, - }); + const {width: timelineWidth} = useDimensions(timeLineWidthTrackerRef); const { data: sampleWindowData, diff --git a/static/app/views/detectors/list/cron.tsx b/static/app/views/detectors/list/cron.tsx index ac861c9fa7b39e..7d3f0af5109bd3 100644 --- a/static/app/views/detectors/list/cron.tsx +++ b/static/app/views/detectors/list/cron.tsx @@ -56,7 +56,7 @@ function VisualizationCell({detector}: {detector: CronDetector}) { const cronEnvironments = detector.dataSources[0].queryObj.environments; const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 1000); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); const {data: monitorStats, isPending} = useMonitorStats({ diff --git a/static/app/views/detectors/list/uptime.tsx b/static/app/views/detectors/list/uptime.tsx index fa385dbfc4222b..f13be9805fa26a 100644 --- a/static/app/views/detectors/list/uptime.tsx +++ b/static/app/views/detectors/list/uptime.tsx @@ -33,7 +33,7 @@ function VisualizationCell({detector}: {detector: UptimeDetector}) { const uptimeDetectorId = detector.id; const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 1000); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); diff --git a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx index 7448c6ed836f9a..467ca5c990aa49 100644 --- a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx +++ b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx @@ -221,7 +221,7 @@ export function LogsInfiniteTable({ const tableRef = useRef(null); const tableBodyRef = useRef(null); - const {width: tableWidth} = useDimensions({elementRef: tableRef}); + const {width: tableWidth} = useDimensions(tableRef); const [expandedLogRows, setExpandedLogRows] = useState>( new Set(embeddedOptions?.openWithExpandedIds ?? []) ); diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx index e571940b0c13bd..7113f30a081ce9 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({ const organization = useOrganization(); const hasMetricsUIRefresh = canUseMetricsUIRefresh(organization); const measureRef = useRef(null); - const {width} = useDimensions({elementRef: measureRef}); + const {width} = useDimensions(measureRef); const hasSize = width > 0; // Default split is 65% of the available width but not less than MIN_LEFT_WIDTH diff --git a/static/app/views/explore/savedQueries/exploreParams.tsx b/static/app/views/explore/savedQueries/exploreParams.tsx index d2d5057da15f19..7fd4b0ed0dc4c4 100644 --- a/static/app/views/explore/savedQueries/exploreParams.tsx +++ b/static/app/views/explore/savedQueries/exploreParams.tsx @@ -31,7 +31,7 @@ export function ExploreParams({ const yAxes = visualizes.flatMap(visualize => visualize.yAxes); const containerRef = useRef(null); - const {width} = useDimensions({elementRef: containerRef}); + const {width} = useDimensions(containerRef); const [childWidths, setChildWidths] = useState([]); const [containerWidth, setContainerWidth] = useState(0); diff --git a/static/app/views/insights/crons/components/detailsTimeline.tsx b/static/app/views/insights/crons/components/detailsTimeline.tsx index 3bb2d0cf5f67e0..8b334ad6cfd148 100644 --- a/static/app/views/insights/crons/components/detailsTimeline.tsx +++ b/static/app/views/insights/crons/components/detailsTimeline.tsx @@ -47,7 +47,7 @@ export function DetailsTimeline({monitor, onStatsLoaded, onEnvironmentUpdated}: const queryClient = useQueryClient(); const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 500); // Use the nextCheckIn timestamp from the earliest scheduled environment as a diff --git a/static/app/views/insights/crons/components/mockTimelineVisualization.tsx b/static/app/views/insights/crons/components/mockTimelineVisualization.tsx index 943876eeac3b8a..25f1c05067de9d 100644 --- a/static/app/views/insights/crons/components/mockTimelineVisualization.tsx +++ b/static/app/views/insights/crons/components/mockTimelineVisualization.tsx @@ -63,7 +63,7 @@ export function MockTimelineVisualization({schedule}: Props) { }; const elementRef = useRef(null); - const {width: timelineWidth} = useDimensions({elementRef}); + const {width: timelineWidth} = useDimensions(elementRef); const sampleDataQueryKey = [ getApiUrl('/organizations/$organizationIdOrSlug/monitors-schedule-data/', { diff --git a/static/app/views/insights/crons/components/overviewTimeline/index.tsx b/static/app/views/insights/crons/components/overviewTimeline/index.tsx index df442cb979bb4d..4fbb2bc33b1b4b 100644 --- a/static/app/views/insights/crons/components/overviewTimeline/index.tsx +++ b/static/app/views/insights/crons/components/overviewTimeline/index.tsx @@ -41,7 +41,7 @@ export function OverviewTimeline({monitorList}: Props) { const location = useLocation(); const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 1000); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); diff --git a/static/app/views/insights/uptime/components/overviewTimeline/index.tsx b/static/app/views/insights/uptime/components/overviewTimeline/index.tsx index 28b37672016cef..91f48e4e7ad75f 100644 --- a/static/app/views/insights/uptime/components/overviewTimeline/index.tsx +++ b/static/app/views/insights/uptime/components/overviewTimeline/index.tsx @@ -25,7 +25,7 @@ interface Props { export function OverviewTimeline({uptimeDetectors}: Props) { const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 500); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); diff --git a/static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx b/static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx index 6eb65af7441316..b91e484603d6f0 100644 --- a/static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx +++ b/static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx @@ -103,7 +103,7 @@ function useCronLegendStatuses({ export function IssueCronCheckTimeline({group}: {group: Group}) { const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 500); const timeWindowConfig = useIssueTimeWindowConfig({timelineWidth, group}); diff --git a/static/app/views/issueDetails/streamline/issueUptimeCheckTimeline.tsx b/static/app/views/issueDetails/streamline/issueUptimeCheckTimeline.tsx index 45bfd2d23e2cd6..42689a39f7a899 100644 --- a/static/app/views/issueDetails/streamline/issueUptimeCheckTimeline.tsx +++ b/static/app/views/issueDetails/streamline/issueUptimeCheckTimeline.tsx @@ -71,7 +71,7 @@ export function useUptimeIssueDetectorId({ export function IssueUptimeCheckTimeline({group}: {group: Group}) { const detectorId = useUptimeIssueDetectorId({groupId: group.id}); const elementRef = useRef(null); - const {width: containerWidth} = useDimensions({elementRef}); + const {width: containerWidth} = useDimensions(elementRef); const timelineWidth = useDebouncedValue(containerWidth, 500); const timeWindowConfig = useIssueTimeWindowConfig({timelineWidth, group}); diff --git a/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx b/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx index 2cc8606a2f6493..e1352d47ee790a 100644 --- a/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx +++ b/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx @@ -17,7 +17,7 @@ interface TraceTimelineProps { export function TraceTimeline({event}: TraceTimelineProps) { const timelineRef = useRef(null); - const {width} = useDimensions({elementRef: timelineRef}); + const {width} = useDimensions(timelineRef); const {isError, isLoading, traceEvents, oneOtherIssueEvent} = useTraceTimelineEvents({ event, }); diff --git a/static/app/views/replays/detail/layout/replayLayout.tsx b/static/app/views/replays/detail/layout/replayLayout.tsx index 47ebb9051eb1ec..3bffddad5f2cc0 100644 --- a/static/app/views/replays/detail/layout/replayLayout.tsx +++ b/static/app/views/replays/detail/layout/replayLayout.tsx @@ -48,7 +48,7 @@ export function ReplayLayout({ }); const measureRef = useRef(null); - const {width, height} = useDimensions({elementRef: measureRef}); + const {width, height} = useDimensions(measureRef); const video = ( diff --git a/static/app/views/replays/list/replayIndexTable.tsx b/static/app/views/replays/list/replayIndexTable.tsx index 877e025d4d32dd..dd317932517b62 100644 --- a/static/app/views/replays/list/replayIndexTable.tsx +++ b/static/app/views/replays/list/replayIndexTable.tsx @@ -57,7 +57,7 @@ export function ReplayIndexTable({ } = usePageFilters(); const tableRef = useRef(null); - const tableDimensions = useDimensions({elementRef: tableRef}); + const tableDimensions = useDimensions(tableRef); const rageClicksSdkVersion = useProjectSdkNeedsUpdate({ minVersion: MIN_DEAD_RAGE_CLICK_SDK.minVersion, From b34d1b0f5aea1aca60f0c10e7d3e4d2268ad7830 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= Date: Wed, 8 Apr 2026 15:31:03 -0400 Subject: [PATCH 2/2] ref: put back the options object --- static/app/components/charts/chartLegend.tsx | 2 +- .../components/checkInTimeline/checkInTimeline.stories.tsx | 2 +- static/app/components/contentSliderDiff/index.tsx | 2 +- .../components/feedback/feedbackItem/feedbackItemHeader.tsx | 2 +- .../app/components/replays/breadcrumbs/replayTimeline.tsx | 2 +- .../app/components/replays/player/replayPlayerMeasurer.tsx | 2 +- static/app/components/searchQueryBuilder/context.tsx | 2 +- static/app/components/searchQueryBuilder/index.tsx | 2 +- static/app/utils/useDimensions.tsx | 6 +++++- static/app/views/alerts/rules/uptime/detailsTimeline.tsx | 2 +- .../widgetBuilder/components/newWidgetBuilder.tsx | 2 +- .../views/detectors/components/detectorListTable/index.tsx | 2 +- .../views/detectors/hooks/useMonitorsScheduleSamples.tsx | 4 +++- static/app/views/detectors/list/cron.tsx | 2 +- static/app/views/detectors/list/uptime.tsx | 2 +- static/app/views/explore/logs/tables/logsInfiniteTable.tsx | 2 +- .../explore/metrics/metricPanel/sideBySideOrientation.tsx | 2 +- static/app/views/explore/savedQueries/exploreParams.tsx | 2 +- .../app/views/insights/crons/components/detailsTimeline.tsx | 2 +- .../insights/crons/components/mockTimelineVisualization.tsx | 2 +- .../insights/crons/components/overviewTimeline/index.tsx | 2 +- .../insights/uptime/components/overviewTimeline/index.tsx | 2 +- .../issueDetails/streamline/issueCronCheckTimeline.tsx | 2 +- .../issueDetails/streamline/issueUptimeCheckTimeline.tsx | 2 +- .../app/views/issueDetails/traceTimeline/traceTimeline.tsx | 2 +- static/app/views/replays/detail/layout/replayLayout.tsx | 2 +- static/app/views/replays/list/replayIndexTable.tsx | 2 +- 27 files changed, 33 insertions(+), 27 deletions(-) diff --git a/static/app/components/charts/chartLegend.tsx b/static/app/components/charts/chartLegend.tsx index 94ae963d878f46..231fc976248966 100644 --- a/static/app/components/charts/chartLegend.tsx +++ b/static/app/components/charts/chartLegend.tsx @@ -72,7 +72,7 @@ export function ChartLegend({items, selected, onSelectionChange}: ChartLegendPro // ResizeObserver (via useDimensions) updates wrapperWidth on resize, // which triggers the useLayoutEffect below to recompute overflow. - const {width: wrapperWidth} = useDimensions(wrapperRef); + const {width: wrapperWidth} = useDimensions({elementRef: wrapperRef}); const [firstOverflowIndex, setFirstOverflowIndex] = useState(null); useLayoutEffect(() => { diff --git a/static/app/components/checkInTimeline/checkInTimeline.stories.tsx b/static/app/components/checkInTimeline/checkInTimeline.stories.tsx index 0c6cc248af8be8..37012c4ab783fc 100644 --- a/static/app/components/checkInTimeline/checkInTimeline.stories.tsx +++ b/static/app/components/checkInTimeline/checkInTimeline.stories.tsx @@ -82,7 +82,7 @@ function generateMockTickData( export default Storybook.story('CheckInTimeline', story => { story('Simple', () => { const elementRef = useRef(null); - const {width: timelineWidth} = useDimensions(elementRef); + const {width: timelineWidth} = useDimensions({elementRef}); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); const [secondsGap, setSecondsGap] = useState(60); diff --git a/static/app/components/contentSliderDiff/index.tsx b/static/app/components/contentSliderDiff/index.tsx index dc2e6e594f5911..ad936d819e3adb 100644 --- a/static/app/components/contentSliderDiff/index.tsx +++ b/static/app/components/contentSliderDiff/index.tsx @@ -31,7 +31,7 @@ interface Props { */ function Body({onDragHandleMouseDown, after, before, minHeight = '0px'}: Props) { const positionedRef = useRef(null); - const viewDimensions = useDimensions(positionedRef); + const viewDimensions = useDimensions({elementRef: positionedRef}); return ( diff --git a/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx b/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx index 89cff048838b41..ab87b8a395250c 100644 --- a/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx +++ b/static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx @@ -35,7 +35,7 @@ function dimensionsToSize({width}: Dimensions) { export function FeedbackItemHeader({eventData, feedbackItem, onBackToList}: Props) { const wrapperRef = useRef(null); - const dimensions = useDimensions(wrapperRef); + const dimensions = useDimensions({elementRef: wrapperRef}); return ( diff --git a/static/app/components/replays/breadcrumbs/replayTimeline.tsx b/static/app/components/replays/breadcrumbs/replayTimeline.tsx index 17a8e819bc3a50..22e9f32f6a1ecf 100644 --- a/static/app/components/replays/breadcrumbs/replayTimeline.tsx +++ b/static/app/components/replays/breadcrumbs/replayTimeline.tsx @@ -23,7 +23,7 @@ export function ReplayTimeline() { const [timelineScale] = useTimelineScale(); const stackedRef = useRef(null); - const {width} = useDimensions(stackedRef); + const {width} = useDimensions({elementRef: stackedRef}); if (!replay) { return ; diff --git a/static/app/components/replays/player/replayPlayerMeasurer.tsx b/static/app/components/replays/player/replayPlayerMeasurer.tsx index 830e41627f8506..99132d67e55478 100644 --- a/static/app/components/replays/player/replayPlayerMeasurer.tsx +++ b/static/app/components/replays/player/replayPlayerMeasurer.tsx @@ -48,7 +48,7 @@ const MAX_ZOOM = 1.5; export function ReplayPlayerMeasurer({children, measure = 'both'}: Props) { const elementRef = useRef(null); - const measuredDimensions = useDimensions(elementRef); + const measuredDimensions = useDimensions({elementRef}); const playerState = useReplayPlayerState(); const [, setViewSize] = useReplayPlayerSize(); diff --git a/static/app/components/searchQueryBuilder/context.tsx b/static/app/components/searchQueryBuilder/context.tsx index 005e121a8ffc9c..f207b658287aca 100644 --- a/static/app/components/searchQueryBuilder/context.tsx +++ b/static/app/components/searchQueryBuilder/context.tsx @@ -241,7 +241,7 @@ export function SearchQueryBuilderProvider({ searchSource, onSearch, }); - const {width: searchBarWidth} = useDimensions(wrapperRef); + const {width: searchBarWidth} = useDimensions({elementRef: wrapperRef}); const size = searchBarWidth && searchBarWidth < 600 ? ('small' as const) : ('normal' as const); diff --git a/static/app/components/searchQueryBuilder/index.tsx b/static/app/components/searchQueryBuilder/index.tsx index 0d67967eb17f26..7304466b52965c 100644 --- a/static/app/components/searchQueryBuilder/index.tsx +++ b/static/app/components/searchQueryBuilder/index.tsx @@ -280,7 +280,7 @@ function SearchQueryBuilderUI({ dispatch({type: 'UPDATE_QUERY', query: initialQuery}); }, [dispatch, initialQuery]); - const {width: actionBarWidth} = useDimensions(actionBarRef); + const {width: actionBarWidth} = useDimensions({elementRef: actionBarRef}); return ( ; +} + /** * Returns a ref to be added to an element and returns the dimensions of that element */ -export function useDimensions(elementRef: RefObject) { +export function useDimensions({elementRef}: Props) { const [dimensions, setDimensions] = useState({height: 0, width: 0}); const element = elementRef.current; diff --git a/static/app/views/alerts/rules/uptime/detailsTimeline.tsx b/static/app/views/alerts/rules/uptime/detailsTimeline.tsx index 1221061368221e..c39497bfcaaa0e 100644 --- a/static/app/views/alerts/rules/uptime/detailsTimeline.tsx +++ b/static/app/views/alerts/rules/uptime/detailsTimeline.tsx @@ -26,7 +26,7 @@ interface Props { export function DetailsTimeline({uptimeDetector, onStatsLoaded}: Props) { const {id} = uptimeDetector; const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 500); const timeWindowConfig = useTimeWindowConfig({ diff --git a/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx b/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx index 4fb96b32897df6..00e100897c8b9b 100644 --- a/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx +++ b/static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx @@ -128,7 +128,7 @@ export function WidgetBuilderV2({ }; }, []); - const dimensions = useDimensions(navigationElementRef); + const dimensions = useDimensions({elementRef: navigationElementRef}); const handleDragEnd = ({over}: any) => { setTranslate(snapPreviewToCorners(over)); diff --git a/static/app/views/detectors/components/detectorListTable/index.tsx b/static/app/views/detectors/components/detectorListTable/index.tsx index e7eed14c4a0b1a..6318fe8709b514 100644 --- a/static/app/views/detectors/components/detectorListTable/index.tsx +++ b/static/app/views/detectors/components/detectorListTable/index.tsx @@ -139,7 +139,7 @@ export function DetectorListTable({ ); const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 1000); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); diff --git a/static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx b/static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx index f582937095a81c..3cd597309a0545 100644 --- a/static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx +++ b/static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx @@ -29,7 +29,9 @@ export function useMonitorsScheduleSamples({ ...detectorFields }: UseMonitorsScheduleSamplesOptions) { const timeLineWidthTrackerRef = useRef(null); - const {width: timelineWidth} = useDimensions(timeLineWidthTrackerRef); + const {width: timelineWidth} = useDimensions({ + elementRef: timeLineWidthTrackerRef, + }); const { data: sampleWindowData, diff --git a/static/app/views/detectors/list/cron.tsx b/static/app/views/detectors/list/cron.tsx index 7d3f0af5109bd3..2577c1a731d274 100644 --- a/static/app/views/detectors/list/cron.tsx +++ b/static/app/views/detectors/list/cron.tsx @@ -56,7 +56,7 @@ function VisualizationCell({detector}: {detector: CronDetector}) { const cronEnvironments = detector.dataSources[0].queryObj.environments; const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 1000); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); const {data: monitorStats, isPending} = useMonitorStats({ diff --git a/static/app/views/detectors/list/uptime.tsx b/static/app/views/detectors/list/uptime.tsx index f13be9805fa26a..f657419ad61072 100644 --- a/static/app/views/detectors/list/uptime.tsx +++ b/static/app/views/detectors/list/uptime.tsx @@ -33,7 +33,7 @@ function VisualizationCell({detector}: {detector: UptimeDetector}) { const uptimeDetectorId = detector.id; const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 1000); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); diff --git a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx index 467ca5c990aa49..7448c6ed836f9a 100644 --- a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx +++ b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx @@ -221,7 +221,7 @@ export function LogsInfiniteTable({ const tableRef = useRef(null); const tableBodyRef = useRef(null); - const {width: tableWidth} = useDimensions(tableRef); + const {width: tableWidth} = useDimensions({elementRef: tableRef}); const [expandedLogRows, setExpandedLogRows] = useState>( new Set(embeddedOptions?.openWithExpandedIds ?? []) ); diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx index 7113f30a081ce9..e571940b0c13bd 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({ const organization = useOrganization(); const hasMetricsUIRefresh = canUseMetricsUIRefresh(organization); const measureRef = useRef(null); - const {width} = useDimensions(measureRef); + const {width} = useDimensions({elementRef: measureRef}); const hasSize = width > 0; // Default split is 65% of the available width but not less than MIN_LEFT_WIDTH diff --git a/static/app/views/explore/savedQueries/exploreParams.tsx b/static/app/views/explore/savedQueries/exploreParams.tsx index 7fd4b0ed0dc4c4..d2d5057da15f19 100644 --- a/static/app/views/explore/savedQueries/exploreParams.tsx +++ b/static/app/views/explore/savedQueries/exploreParams.tsx @@ -31,7 +31,7 @@ export function ExploreParams({ const yAxes = visualizes.flatMap(visualize => visualize.yAxes); const containerRef = useRef(null); - const {width} = useDimensions(containerRef); + const {width} = useDimensions({elementRef: containerRef}); const [childWidths, setChildWidths] = useState([]); const [containerWidth, setContainerWidth] = useState(0); diff --git a/static/app/views/insights/crons/components/detailsTimeline.tsx b/static/app/views/insights/crons/components/detailsTimeline.tsx index 8b334ad6cfd148..d1bfff58a1b255 100644 --- a/static/app/views/insights/crons/components/detailsTimeline.tsx +++ b/static/app/views/insights/crons/components/detailsTimeline.tsx @@ -47,7 +47,7 @@ export function DetailsTimeline({monitor, onStatsLoaded, onEnvironmentUpdated}: const queryClient = useQueryClient(); const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 500); // Use the nextCheckIn timestamp from the earliest scheduled environment as a diff --git a/static/app/views/insights/crons/components/mockTimelineVisualization.tsx b/static/app/views/insights/crons/components/mockTimelineVisualization.tsx index 25f1c05067de9d..3166fe2cb5b02d 100644 --- a/static/app/views/insights/crons/components/mockTimelineVisualization.tsx +++ b/static/app/views/insights/crons/components/mockTimelineVisualization.tsx @@ -63,7 +63,7 @@ export function MockTimelineVisualization({schedule}: Props) { }; const elementRef = useRef(null); - const {width: timelineWidth} = useDimensions(elementRef); + const {width: timelineWidth} = useDimensions({elementRef}); const sampleDataQueryKey = [ getApiUrl('/organizations/$organizationIdOrSlug/monitors-schedule-data/', { diff --git a/static/app/views/insights/crons/components/overviewTimeline/index.tsx b/static/app/views/insights/crons/components/overviewTimeline/index.tsx index 4fbb2bc33b1b4b..80ca5087aa75b5 100644 --- a/static/app/views/insights/crons/components/overviewTimeline/index.tsx +++ b/static/app/views/insights/crons/components/overviewTimeline/index.tsx @@ -41,7 +41,7 @@ export function OverviewTimeline({monitorList}: Props) { const location = useLocation(); const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 1000); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); diff --git a/static/app/views/insights/uptime/components/overviewTimeline/index.tsx b/static/app/views/insights/uptime/components/overviewTimeline/index.tsx index 91f48e4e7ad75f..99eb947227d0b2 100644 --- a/static/app/views/insights/uptime/components/overviewTimeline/index.tsx +++ b/static/app/views/insights/uptime/components/overviewTimeline/index.tsx @@ -25,7 +25,7 @@ interface Props { export function OverviewTimeline({uptimeDetectors}: Props) { const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 500); const timeWindowConfig = useTimeWindowConfig({timelineWidth}); diff --git a/static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx b/static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx index b91e484603d6f0..5e202bd19b06a8 100644 --- a/static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx +++ b/static/app/views/issueDetails/streamline/issueCronCheckTimeline.tsx @@ -103,7 +103,7 @@ function useCronLegendStatuses({ export function IssueCronCheckTimeline({group}: {group: Group}) { const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 500); const timeWindowConfig = useIssueTimeWindowConfig({timelineWidth, group}); diff --git a/static/app/views/issueDetails/streamline/issueUptimeCheckTimeline.tsx b/static/app/views/issueDetails/streamline/issueUptimeCheckTimeline.tsx index 42689a39f7a899..dbc9627e8c9790 100644 --- a/static/app/views/issueDetails/streamline/issueUptimeCheckTimeline.tsx +++ b/static/app/views/issueDetails/streamline/issueUptimeCheckTimeline.tsx @@ -71,7 +71,7 @@ export function useUptimeIssueDetectorId({ export function IssueUptimeCheckTimeline({group}: {group: Group}) { const detectorId = useUptimeIssueDetectorId({groupId: group.id}); const elementRef = useRef(null); - const {width: containerWidth} = useDimensions(elementRef); + const {width: containerWidth} = useDimensions({elementRef}); const timelineWidth = useDebouncedValue(containerWidth, 500); const timeWindowConfig = useIssueTimeWindowConfig({timelineWidth, group}); diff --git a/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx b/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx index e1352d47ee790a..2cc8606a2f6493 100644 --- a/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx +++ b/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx @@ -17,7 +17,7 @@ interface TraceTimelineProps { export function TraceTimeline({event}: TraceTimelineProps) { const timelineRef = useRef(null); - const {width} = useDimensions(timelineRef); + const {width} = useDimensions({elementRef: timelineRef}); const {isError, isLoading, traceEvents, oneOtherIssueEvent} = useTraceTimelineEvents({ event, }); diff --git a/static/app/views/replays/detail/layout/replayLayout.tsx b/static/app/views/replays/detail/layout/replayLayout.tsx index 3bffddad5f2cc0..47ebb9051eb1ec 100644 --- a/static/app/views/replays/detail/layout/replayLayout.tsx +++ b/static/app/views/replays/detail/layout/replayLayout.tsx @@ -48,7 +48,7 @@ export function ReplayLayout({ }); const measureRef = useRef(null); - const {width, height} = useDimensions(measureRef); + const {width, height} = useDimensions({elementRef: measureRef}); const video = ( diff --git a/static/app/views/replays/list/replayIndexTable.tsx b/static/app/views/replays/list/replayIndexTable.tsx index dd317932517b62..877e025d4d32dd 100644 --- a/static/app/views/replays/list/replayIndexTable.tsx +++ b/static/app/views/replays/list/replayIndexTable.tsx @@ -57,7 +57,7 @@ export function ReplayIndexTable({ } = usePageFilters(); const tableRef = useRef(null); - const tableDimensions = useDimensions(tableRef); + const tableDimensions = useDimensions({elementRef: tableRef}); const rageClicksSdkVersion = useProjectSdkNeedsUpdate({ minVersion: MIN_DEAD_RAGE_CLICK_SDK.minVersion,