fix: first exchange click doesn't highlight selected row
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:
@@ -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()
|
||||
|
||||
@@ -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}%` }}>
|
||||
|
||||
Reference in New Issue
Block a user