This is an automated email from the ASF dual-hosted git repository. zqr10159 pushed a commit to branch 2.0.0 in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit 69b98c9375dade8091d66d0e2e24588a784c8742 Author: Logic <[email protected]> AuthorDate: Sun May 31 09:22:00 2026 +0800 fix(web-next): keep topology selection out of render window --- web-next/app/topology/page.test.tsx | 20 +++++++++++--------- web-next/app/topology/topology-page.tsx | 19 +++++++------------ 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/web-next/app/topology/page.test.tsx b/web-next/app/topology/page.test.tsx index 9d41367f09..172759c94d 100644 --- a/web-next/app/topology/page.test.tsx +++ b/web-next/app/topology/page.test.tsx @@ -303,7 +303,8 @@ describe('topology page', () => { expect(source).toContain('overlayMode="non-occluding"'); expect(source).toContain('const topologyLiveHoverEdge = topologyHoveredDetailEdge;'); expect(source).toContain('topologyHoveredDetailEdge ?? topologyDetailEdge'); - expect(source).toContain('searchQuery={topologyEffectiveSearchQuery}'); + expect(source).toContain("const topologyG6SearchQuery = topologySearchQuery ?? '';"); + expect(source).toContain('searchQuery={topologyG6SearchQuery}'); expect(source).toContain('topologyNodeIds'); expect(source).not.toContain('const topologyNodeHrefById'); expect(source).toContain('topologyNodeFocusHrefById'); @@ -463,7 +464,7 @@ describe('topology page', () => { expect(source).toContain('searchValue={topologyEffectiveSearchQuery}'); expect(source).toContain("layout={topologyLayout}"); expect(source).toContain("layout={topologyG6Layout}"); - expect(source).toContain('searchQuery={topologyEffectiveSearchQuery}'); + expect(source).toContain('searchQuery={topologyG6SearchQuery}'); expect(source).not.toContain('setLoadedApiGraph(undefined);'); }); @@ -844,6 +845,7 @@ describe('topology page', () => { expect(html).toContain( 'data-hz-topology-g6-render-window-priority-behavior="search-only-no-selection-reorder"' ); + expect(html).toContain('data-hz-topology-g6-render-window-priority-node-ids="none"'); expect(html).toContain('data-hz-topology-g6-minimap="viewport-overview"'); expect(html).toContain('data-hz-topology-g6-minimap-owner="hertzbeat-ui-g6-minimap"'); expect(html).toContain('data-hz-topology-g6-minimap-visibility="assistive"'); @@ -854,14 +856,14 @@ describe('topology page', () => { expect(html).toContain('data-hz-topology-g6-node-selection="drawer-sync"'); expect(html).toContain('data-hz-topology-g6-edge-selection="drawer-sync"'); expect(html).toContain('data-hz-topology-g6-hover-owner="hertzbeat-ui-g6-hover"'); - expect(html).toContain('data-hz-topology-g6-hover-source="none"'); + expect(html).toContain('data-hz-topology-g6-hover-source="selection"'); expect(html).toContain('data-hz-topology-g6-hovered-node="none"'); expect(html).toContain('data-hz-topology-g6-hovered-edge="none"'); - expect(html).toContain('data-hz-topology-g6-active-focus-source="search-node"'); + expect(html).toContain('data-hz-topology-g6-active-focus-source="selection"'); expect(html).toContain('data-hz-topology-g6-search-owner="hertzbeat-ui-g6-search"'); - expect(html).toContain('data-hz-topology-g6-search-query="checkout-api"'); - expect(html).toContain('data-hz-topology-g6-search-match-count="1"'); - expect(html).toContain('data-hz-topology-g6-search-first-match="svc-checkout"'); + expect(html).toContain('data-hz-topology-g6-search-query="none"'); + expect(html).toContain('data-hz-topology-g6-search-match-count="0"'); + expect(html).toContain('data-hz-topology-g6-search-first-match="none"'); expect(html).toContain('data-hz-topology-g6-selected-focus-owner="hertzbeat-ui-g6-selected-focus"'); expect(html).toContain('data-hz-topology-g6-selected-focus-target="svc-checkout"'); expect(html).toContain('data-hz-topology-g6-selected-focus-status="ready"'); @@ -878,7 +880,7 @@ describe('topology page', () => { expect(html).toContain('data-hz-topology-g6-filter-owner="hertzbeat-ui-g6-filter"'); expect(html).toContain('data-hz-topology-g6-filter-environment="prod"'); expect(html).toContain('data-hz-topology-g6-filter-source-kind="all"'); - expect(html).toContain('data-hz-topology-g6-filter-search-query="checkout-api"'); + expect(html).toContain('data-hz-topology-g6-filter-search-query="none"'); expect(html).toContain('data-hz-topology-g6-filter-group-by="none"'); expect(html).toContain('data-hz-topology-g6-filter-visible-node-count="7"'); expect(html).toContain('data-hz-topology-g6-filter-visible-edge-count="7"'); @@ -1509,7 +1511,7 @@ describe('topology page', () => { expect(html).toContain('data-hz-topology-metric-table-render-window-owner="hertzbeat-ui-metric-table-render-window"'); expect(html).toContain('data-hz-topology-metric-table-render-window-mode="direct"'); expect(html).toContain('data-hz-topology-metric-table-hidden-node-companion="inactive"'); - expect(html).toContain('data-hz-topology-metric-table-priority-node-ids="entity-501 entity-502"'); + expect(html).toContain('data-hz-topology-metric-table-priority-node-ids="none"'); expect(html).toContain('data-hz-topology-metric-table-visible-row-count="1"'); expect(html).toContain('data-hz-topology-metric-table-partial-row-count="0"'); expect(html).toContain('data-hz-topology-metric-table-hidden-row-count="0"'); diff --git a/web-next/app/topology/topology-page.tsx b/web-next/app/topology/topology-page.tsx index 81f7f9e5dd..334aea845e 100644 --- a/web-next/app/topology/topology-page.tsx +++ b/web-next/app/topology/topology-page.tsx @@ -684,6 +684,7 @@ export default function TopologyPage({ [apiOwnedEmptyGraph, loadedApiGraph, routeContext, t] ); const topologyEffectiveSearchQuery = topologySearchQuery ?? map.filterContext.search; + const topologyG6SearchQuery = topologySearchQuery ?? ''; const topologyIsPending = loadedApiGraph === undefined; const topologyTraceCallScope = map.filterContext.sourceKind === 'otlp-trace-call' || map.filterContext.viewMode === 'service-call'; const topologyTraceCallMissingEdges = @@ -1003,19 +1004,13 @@ export default function TopologyPage({ ? undefined : map.selectedEdgeId ?? topologyDetailEdge?.id ?? topologyMetricRows[0]?.id; const topologySearchPriorityNodeId = React.useMemo(() => { - const query = map.filterContext.search.trim().toLowerCase(); + const query = (topologySearchQuery ?? '').trim().toLowerCase(); if (!query) return undefined; return topologyG6Graph.nodes.find(node => node.label.toLowerCase().includes(query) || node.id.toLowerCase().includes(query))?.id; - }, [map.filterContext.search, topologyG6Graph.nodes]); + }, [topologyG6Graph.nodes, topologySearchQuery]); const topologyRenderWindowPriorityNodeIds = React.useMemo( - () => - [ - topologySearchPriorityNodeId, - topologyTraceCallMissingEdges ? undefined : primaryNode?.id, - topologyDetailEdge?.from, - topologyDetailEdge?.to - ].filter((nodeId): nodeId is string => Boolean(nodeId)), - [primaryNode?.id, topologyDetailEdge?.from, topologyDetailEdge?.to, topologySearchPriorityNodeId, topologyTraceCallMissingEdges] + () => [topologySearchPriorityNodeId].filter((nodeId): nodeId is string => Boolean(nodeId)), + [topologySearchPriorityNodeId] ); const topologyRenderWindowCompanion = React.useMemo(() => { const strategy = buildHzTopologyG6LargeGraphStrategy(topologyG6Graph); @@ -1497,12 +1492,12 @@ export default function TopologyPage({ selectedEdgeId={topologyCanvasSelectedEdgeId} hoveredNodeId={topologyG6HoveredNodeId} hoveredEdgeId={topologyG6HoveredEdgeId} - searchQuery={topologyEffectiveSearchQuery} + searchQuery={topologyG6SearchQuery} filterScope={{ environment: map.filterContext.environment, sourceKind: map.filterContext.sourceKind ?? 'all', groupBy: map.filterContext.groupBy, - searchQuery: topologyEffectiveSearchQuery + searchQuery: topologyG6SearchQuery }} filterControls={[ { --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
