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

Fix race condition loading breakdown modals #4950

Merged
merged 1 commit into from
Jan 8, 2025
+7 −7
Merged

Fix race condition loading breakdown modals #4950

Show file tree
Hide file tree
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
2 changes: 1 addition & 1 deletion assets/js/dashboard/stats/modals/breakdown-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default function BreakdownModal<TListItem extends { name: string }>({
}) {
const site = useSiteContext()
const { query } = useQueryContext()
const [meta, setMeta] = useState<BreakdownResultMeta | undefined>(undefined)
const [meta, setMeta] = useState<BreakdownResultMeta | null>(null)

const [search, setSearch] = useState('')
const defaultOrderBy = getStoredOrderBy({
Expand Down
6 changes: 3 additions & 3 deletions assets/js/dashboard/stats/reports/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,15 +148,15 @@ export default function ListReport({
fetchData
}) {
const { query } = useQueryContext()
const [state, setState] = useState({ loading: true, list: null })
const [state, setState] = useState({ loading: true, list: null, meta: null })
const [visible, setVisible] = useState(false)

const isRealtime = isRealTimeDashboard(query)
const goalFilterApplied = hasGoalFilter(query)

const getData = useCallback(() => {
if (!isRealtime) {
setState({ loading: true, list: null })
setState({ loading: true, list: null, meta: null })
}
fetchData().then((response) => {
if (afterFetchData) {
Expand All @@ -177,7 +177,7 @@ export default function ListReport({
// When a goal filter is applied or removed, we always want the component to go into a
// loading state, even in realtime mode, because the metrics list will change. We can
// only read the new metrics once the new list is loaded.
setState({ loading: true, list: null })
setState({ loading: true, list: null, meta: null })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [goalFilterApplied])
Expand Down
6 changes: 3 additions & 3 deletions assets/js/dashboard/stats/reports/metric-value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function MetricValue(props: {
metric: Metric
renderLabel: (query: DashboardQuery) => string
formatter?: (value: ValueType) => string
meta: BreakdownResultMeta
meta: BreakdownResultMeta | null
}) {
const { query } = useQueryContext()

Expand Down Expand Up @@ -92,7 +92,7 @@ function ComparisonTooltipContent({
metric: Metric
metricLabel: string
formatter?: (value: ValueType) => string
meta: BreakdownResultMeta
meta: BreakdownResultMeta | null
}) {
const longFormatter = formatter ?? MetricFormatterLong[metric]

Expand All @@ -104,7 +104,7 @@ function ComparisonTooltipContent({
return ` ${metricLabel.toLowerCase()}`
}, [metricLabel])

if (comparison) {
if (comparison && meta) {
return (
<div className="text-left whitespace-nowrap py-1 space-y-2">
<div>
Expand Down
Loading