|
8 | 8 |
|
9 | 9 | /* eslint-disable react/display-name */ |
10 | 10 |
|
11 | | -import React, { useContext } from 'react'; |
| 11 | +import React, { useContext, useEffect } from 'react'; |
12 | 12 | import { useSelector } from 'react-redux'; |
13 | 13 | import { useEffectOnce } from 'react-use'; |
14 | 14 | import { EuiLoadingSpinner } from '@elastic/eui'; |
@@ -68,11 +68,25 @@ export const ResolverMap = React.memo(function ({ |
68 | 68 | const hasError = useSelector(selectors.hasError); |
69 | 69 | const activeDescendantId = useSelector(selectors.ariaActiveDescendant); |
70 | 70 | const { colorMap } = useResolverTheme(); |
71 | | - const { cleanUpQueryParams } = useResolverQueryParams(); |
| 71 | + const { |
| 72 | + cleanUpQueryParams, |
| 73 | + queryParams: { crumbId }, |
| 74 | + pushToQueryParams, |
| 75 | + } = useResolverQueryParams(); |
| 76 | + |
72 | 77 | useEffectOnce(() => { |
73 | 78 | return () => cleanUpQueryParams(); |
74 | 79 | }); |
75 | 80 |
|
| 81 | + useEffect(() => { |
| 82 | + // When you refresh the page after selecting a process in the table view (not the timeline view) |
| 83 | + // The old crumbId still exists in the query string even though a resolver is no longer visible |
| 84 | + // This just makes sure the activeDescendant and crumbId are in sync on load for that view as well as the timeline |
| 85 | + if (activeDescendantId && crumbId !== activeDescendantId) { |
| 86 | + pushToQueryParams({ crumbId: activeDescendantId, crumbEvent: '' }); |
| 87 | + } |
| 88 | + }, [crumbId, activeDescendantId, pushToQueryParams]); |
| 89 | + |
76 | 90 | return ( |
77 | 91 | <StyledMapContainer className={className} backgroundColor={colorMap.resolverBackground}> |
78 | 92 | {isLoading ? ( |
|
0 commit comments