fix: first exchange click doesn't highlight selected row
All checks were successful
CI / build (push) Successful in 1m47s
CI / cleanup-branch (push) Has been skipped
CI / docker (push) Successful in 1m45s
CI / deploy-feature (push) Has been skipped
CI / deploy (push) Successful in 53s

On first click, Dashboard was in non-split mode. The click set
selectedId locally then triggered split view, which remounted
Dashboard — losing the selectedId state.

Added activeExchangeId prop passed from ExchangesPage so the
selection survives the remount. Also syncs via useEffect when
parent changes selection (e.g. correlated exchange navigation).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-03 11:28:26 +02:00
parent 901dfd1eb8
commit 2708bcec17
2 changed files with 11 additions and 5 deletions

View File

@@ -1,4 +1,4 @@
import { useState, useMemo, useCallback } from 'react'
import { useState, useMemo, useCallback, useEffect } from 'react'
import { useParams, useNavigate, useSearchParams } from 'react-router'
import { AlertTriangle, X, Search, Footprints, RotateCcw } from 'lucide-react'
import {
@@ -169,17 +169,23 @@ export interface SelectedExchange {
interface DashboardProps {
onExchangeSelect?: (exchange: SelectedExchange) => void;
activeExchangeId?: string;
}
export default function Dashboard({ onExchangeSelect }: DashboardProps = {}) {
export default function Dashboard({ onExchangeSelect, activeExchangeId }: DashboardProps = {}) {
const { appId, routeId } = useParams<{ appId: string; routeId: string }>()
const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams()
const textFilter = searchParams.get('text') || undefined
const [selectedId, setSelectedId] = useState<string | undefined>()
const [selectedId, setSelectedId] = useState<string | undefined>(activeExchangeId)
const [sortField, setSortField] = useState<string>('startTime')
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
// Sync selection from parent (survives remount when split view toggles)
useEffect(() => {
if (activeExchangeId !== undefined) setSelectedId(activeExchangeId);
}, [activeExchangeId]);
const { timeRange, statusFilters } = useGlobalFilters()
const timeFrom = timeRange.start.toISOString()
const timeTo = timeRange.end.toISOString()

View File

@@ -102,7 +102,7 @@ export default function ExchangesPage() {
const showSplit = !!selected || !!scopedRouteId;
if (!showSplit) {
return <Dashboard onExchangeSelect={handleExchangeSelect} />;
return <Dashboard onExchangeSelect={handleExchangeSelect} activeExchangeId={selected?.executionId} />;
}
// Determine what the right panel shows
@@ -113,7 +113,7 @@ export default function ExchangesPage() {
return (
<div ref={containerRef} className={styles.splitView}>
<div className={styles.leftPanel} style={{ width: `${splitPercent}%` }}>
<Dashboard onExchangeSelect={handleExchangeSelect} />
<Dashboard onExchangeSelect={handleExchangeSelect} activeExchangeId={selected?.executionId} />
</div>
<div className={styles.splitter} onPointerDown={handleSplitterDown} />
<div className={styles.rightPanel} style={{ width: `${100 - splitPercent}%` }}>