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 { useParams, useNavigate, useSearchParams } from 'react-router'
|
||||||
import { AlertTriangle, X, Search, Footprints, RotateCcw } from 'lucide-react'
|
import { AlertTriangle, X, Search, Footprints, RotateCcw } from 'lucide-react'
|
||||||
import {
|
import {
|
||||||
@@ -169,17 +169,23 @@ export interface SelectedExchange {
|
|||||||
|
|
||||||
interface DashboardProps {
|
interface DashboardProps {
|
||||||
onExchangeSelect?: (exchange: SelectedExchange) => void;
|
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 { appId, routeId } = useParams<{ appId: string; routeId: string }>()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [searchParams, setSearchParams] = useSearchParams()
|
const [searchParams, setSearchParams] = useSearchParams()
|
||||||
const textFilter = searchParams.get('text') || undefined
|
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 [sortField, setSortField] = useState<string>('startTime')
|
||||||
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
|
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 { timeRange, statusFilters } = useGlobalFilters()
|
||||||
const timeFrom = timeRange.start.toISOString()
|
const timeFrom = timeRange.start.toISOString()
|
||||||
const timeTo = timeRange.end.toISOString()
|
const timeTo = timeRange.end.toISOString()
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ export default function ExchangesPage() {
|
|||||||
const showSplit = !!selected || !!scopedRouteId;
|
const showSplit = !!selected || !!scopedRouteId;
|
||||||
|
|
||||||
if (!showSplit) {
|
if (!showSplit) {
|
||||||
return <Dashboard onExchangeSelect={handleExchangeSelect} />;
|
return <Dashboard onExchangeSelect={handleExchangeSelect} activeExchangeId={selected?.executionId} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Determine what the right panel shows
|
// Determine what the right panel shows
|
||||||
@@ -113,7 +113,7 @@ export default function ExchangesPage() {
|
|||||||
return (
|
return (
|
||||||
<div ref={containerRef} className={styles.splitView}>
|
<div ref={containerRef} className={styles.splitView}>
|
||||||
<div className={styles.leftPanel} style={{ width: `${splitPercent}%` }}>
|
<div className={styles.leftPanel} style={{ width: `${splitPercent}%` }}>
|
||||||
<Dashboard onExchangeSelect={handleExchangeSelect} />
|
<Dashboard onExchangeSelect={handleExchangeSelect} activeExchangeId={selected?.executionId} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.splitter} onPointerDown={handleSplitterDown} />
|
<div className={styles.splitter} onPointerDown={handleSplitterDown} />
|
||||||
<div className={styles.rightPanel} style={{ width: `${100 - splitPercent}%` }}>
|
<div className={styles.rightPanel} style={{ width: `${100 - splitPercent}%` }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user