Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Improve Search Result Side Panel to fix various bugs (#1587)

Browse source 
1. Ensures that multiple scrollbars are not shown for nested panels (click row -> surrounding context -> repeat a few times)
<img width="1402" height="876" alt="scrollbars" src="https://github.com/user-attachments/assets/f41c99e5-5fcb-47fa-9c40-243dbd926291" />


2. In the same state as above, closing the panel (clicking outside) then clicking another row caused the subpanel to re-open, this isn't ideal (should open to root drawer)
3. fix issue with drawers where you can scroll, then open a nested drawer, the nested drawer would appear incorrectly
<img width="910" height="878" alt="Screenshot 2026-01-09 at 5 10 29 PM" src="https://github.com/user-attachments/assets/fd1fbc0c-4453-46fb-b310-2323ec2792e2" />




Fixes HDX-3171
This commit is contained in:
Brandon Pereira 2026-01-12 11:09:42 -07:00 committed by GitHub
parent 5b252211a5
commit ddc7dd04ed
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fast-jokes-lay.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
various improvements to search result drawers and nesting logic

2
packages/app/src/components/ContextSidePanel.tsx
View file

@ -44,7 +44,7 @@ interface ContextSubpanelProps {
}
// Custom hook to manage nested panel state
function useNestedPanelState(isNested: boolean) {
export function useNestedPanelState(isNested?: boolean) {
// Query state (URL-based) for root level
const queryState = {
contextRowId: useQueryState('contextRowId', parseAsString),

2
packages/app/src/components/DBRowSidePanel.tsx
View file

@ -559,7 +559,7 @@ export default function DBRowSidePanelErrorBoundary({
<Drawer
opened={rowId != null}
withCloseButton={false}
withinPortal={!isNestedPanel}
withOverlay={!isNestedPanel}
onClose={() => {
if (!subDrawerOpen) {
_onClose();

16
packages/app/src/components/DBSqlRowTableWithSidebar.tsx
View file

@ -11,6 +11,7 @@ import { useSource } from '@/source';
import TabBar from '@/TabBar';
import { useLocalStorage } from '@/utils';
import { useNestedPanelState } from './ContextSidePanel';
import { RowDataPanel } from './DBRowDataPanel';
import { RowOverviewPanel } from './DBRowOverviewPanel';
import DBRowSidePanel, {
@ -60,6 +61,7 @@ export default function DBSqlRowTableWithSideBar({
const { data: sourceData } = useSource({ id: sourceId });
const [rowId, setRowId] = useQueryState('rowWhere');
const [rowSource, setRowSource] = useQueryState('rowSource');
const { setContextRowId, setContextRowSource } = useNestedPanelState();
const onOpenSidebar = useCallback(
(rowWhere: string) => {
@ -73,7 +75,19 @@ export default function DBSqlRowTableWithSideBar({
const onCloseSidebar = useCallback(() => {
setRowId(null);
setRowSource(null);
}, [setRowId, setRowSource]);
// When closing the main drawer, clear the nested panel state
// this ensures that re-opening the main drawer will not open the nested panel
if (!isNestedPanel) {
setContextRowId(null);
setContextRowSource(null);
}
}, [
setRowId,
setRowSource,
isNestedPanel,
setContextRowId,
setContextRowSource,
]);
const renderRowDetails = useCallback(
(r: { [key: string]: unknown }) => {
if (!sourceData) {