Oda/managing-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pagination

Browse Source
This commit is contained in:
cryptooda
2025-07-16 21:37:05 +07:00
parent f51fd5a5f7
commit b547c01787
13 changed files with 750 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/Managing.WebApp/src/components/organism/Backtest/backtestTable.tsx
View File

@@ -1,25 +1,145 @@
import {ChevronDownIcon, ChevronRightIcon, CogIcon, PlayIcon, TrashIcon} from '@heroicons/react/solid'
import {ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CogIcon, PlayIcon, TrashIcon} from '@heroicons/react/solid'
import React, {useEffect, useState} from 'react'
import {useExpanded, useFilters, usePagination, useSortBy, useTable,} from 'react-table'
import useApiUrlStore from '../../../app/store/apiStore'
import useBacktestStore from '../../../app/store/backtestStore'
import type {Backtest} from '../../../generated/ManagingApi'
import {BacktestClient} from '../../../generated/ManagingApi'
import {ConfigDisplayModal, IndicatorsDisplay, SelectColumnFilter, Table} from '../../mollecules'
import {ConfigDisplayModal, IndicatorsDisplay, SelectColumnFilter} from '../../mollecules'
import {UnifiedTradingModal} from '../index'
import Toast from '../../mollecules/Toast/Toast'
import BacktestRowDetails from './backtestRowDetails'
// Custom Table component for server-side sorting
const ServerSortableTable = ({
columns,
data,
renderRowSubCompontent,
onSortChange,
currentSort
}: any) => {
const defaultColumn = React.useMemo<any>(
() => ({
Filter: SelectColumnFilter,
}),
[]
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
visibleColumns,
rows,
} = useTable(
{
columns,
data,
defaultColumn,
},
useFilters,
useSortBy,
useExpanded,
usePagination
)
const handleSortClick = (column: any) => {
if (!onSortChange || !column.canSort) return;
const isCurrentlySorted = currentSort?.sortBy === column.id;
const newSortOrder = isCurrentlySorted && currentSort?.sortOrder === 'desc' ? 'asc' : 'desc';
onSortChange(column.id, newSortOrder);
};
return (
<div className="w-full mt-3 mb-3 overflow-x-auto">
<table {...getTableProps()} className="table-compact table">
<thead>
{headerGroups.map((headerGroup: any) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: any) => (
<th
{...column.getHeaderProps()}
onClick={() => handleSortClick(column)}
className={column.canSort ? 'cursor-pointer hover:bg-base-200' : ''}
>
<p className="mb-2 text-center">
{column.render('Header')}
</p>
<span className="relative">
{(() => {
// Map backend field names to column IDs for comparison
const backendToColumnMapping: { [key: string]: string } = {
'score': 'score',
'finalpnl': 'finalPnl',
'winrate': 'winRate',
'growthpercentage': 'growthPercentage',
'hodlpercentage': 'hodlPercentage',
};
const columnId = backendToColumnMapping[currentSort?.sortBy || ''] || currentSort?.sortBy;
return currentSort?.sortBy && columnId === column.id ? (
currentSort.sortOrder === 'desc' ? (
<ChevronDownIcon className="text-primary absolute right-0 w-4" />
) : (
<ChevronUpIcon className="text-secondary absolute right-0 w-4" />
)
) : (
''
);
})()}
</span>
<div>
{column.canFilter ? column.render('Filter') : null}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row: any) => {
prepareRow(row)
return (
<>
<tr {...row.getRowProps()}>
{row.cells.map((cell: any) => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
{row.isExpanded ? (
<tr>
<td colSpan={visibleColumns.length}>
{renderRowSubCompontent({ row })}
</td>
</tr>
) : null}
</>
)
})}
</tbody>
</table>
</div>
)
}
interface BacktestTableProps {
list: Backtest[] | undefined
isFetching?: boolean
displaySummary?: boolean
onSortChange?: (sortBy: string, sortOrder: 'asc' | 'desc') => void
currentSort?: { sortBy: string; sortOrder: 'asc' | 'desc' }
}
const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displaySummary = true}) => {
const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displaySummary = true, onSortChange, currentSort}) => {
const [rows, setRows] = useState<Backtest[]>([])
const {apiUrl} = useApiUrlStore()
const {removeBacktest} = useBacktestStore()
@@ -52,6 +172,23 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displayS
const [showConfigDisplayModal, setShowConfigDisplayModal] = useState(false)
const [selectedBacktestForConfigView, setSelectedBacktestForConfigView] = useState<Backtest | null>(null)
// Handle sort change
const handleSortChange = (columnId: string, sortOrder: 'asc' | 'desc') => {
if (!onSortChange) return;
// Map column IDs to backend field names
const sortByMapping: { [key: string]: string } = {
'score': 'score',
'finalPnl': 'finalpnl',
'winRate': 'winrate',
'growthPercentage': 'growthpercentage',
'hodlPercentage': 'hodlpercentage',
};
const backendSortBy = sortByMapping[columnId] || 'score';
onSortChange(backendSortBy, sortOrder);
};
const handleOpenBotConfigModal = (backtest: Backtest) => {
setSelectedBacktest(backtest)
setShowBotConfigModal(true)
@@ -157,6 +294,8 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displayS
</span>
),
disableFilters: true,
disableSortBy: false,
sortType: 'basic',
},
{
Filter: SelectColumnFilter,
@@ -197,6 +336,7 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displayS
Header: 'Pnl $',
accessor: 'finalPnl',
disableFilters: true,
disableSortBy: false,
sortType: 'basic',
},
{
@@ -204,6 +344,8 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displayS
Header: 'Winrate',
accessor: 'winRate',
disableFilters: true,
disableSortBy: false,
sortType: 'basic',
},
{
Cell: ({cell}: any) => (
@@ -212,6 +354,7 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displayS
Header: 'Hodl %',
accessor: 'hodlPercentage',
disableFilters: true,
disableSortBy: false,
sortType: 'basic',
},
{
@@ -221,6 +364,7 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displayS
Header: 'Pnl %',
accessor: 'growthPercentage',
disableFilters: true,
disableSortBy: false,
sortType: 'basic',
},
{
@@ -525,7 +669,7 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displayS
)}
</div>
)}
<Table
<ServerSortableTable
columns={columns}
data={rows}
renderRowSubCompontent={({row}: any) => (
@@ -533,6 +677,8 @@ const BacktestTable: React.FC<BacktestTableProps> = ({list, isFetching, displayS
backtest={row.original}
/>
)}
onSortChange={handleSortChange}
currentSort={currentSort}
/>
{/* Bot Configuration Modal */}

53
src/Managing.WebApp/src/generated/ManagingApi.ts
View File

@@ -580,7 +580,7 @@ export class BacktestClient extends AuthorizedApiBase {
return Promise.resolve<Backtest[]>(null as any);
}
backtest_GetBacktestsByRequestIdPaginated(requestId: string, page: number | undefined, pageSize: number | undefined): Promise<PaginatedBacktestsResponse> {
backtest_GetBacktestsByRequestIdPaginated(requestId: string, page: number | undefined, pageSize: number | undefined, sortBy: string | null | undefined, sortOrder: string | null | undefined): Promise<PaginatedBacktestsResponse> {
let url_ = this.baseUrl + "/Backtest/ByRequestId/{requestId}/Paginated?";
if (requestId === undefined || requestId === null)
throw new Error("The parameter 'requestId' must be defined.");
@@ -593,6 +593,10 @@ export class BacktestClient extends AuthorizedApiBase {
throw new Error("The parameter 'pageSize' cannot be null.");
else if (pageSize !== undefined)
url_ += "pageSize=" + encodeURIComponent("" + pageSize) + "&";
if (sortBy !== undefined && sortBy !== null)
url_ += "sortBy=" + encodeURIComponent("" + sortBy) + "&";
if (sortOrder !== undefined && sortOrder !== null)
url_ += "sortOrder=" + encodeURIComponent("" + sortOrder) + "&";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
@@ -626,6 +630,53 @@ export class BacktestClient extends AuthorizedApiBase {
return Promise.resolve<PaginatedBacktestsResponse>(null as any);
}
backtest_GetBacktestsPaginated(page: number | undefined, pageSize: number | undefined, sortBy: string | null | undefined, sortOrder: string | null | undefined): Promise<PaginatedBacktestsResponse> {
let url_ = this.baseUrl + "/Backtest/Paginated?";
if (page === null)
throw new Error("The parameter 'page' cannot be null.");
else if (page !== undefined)
url_ += "page=" + encodeURIComponent("" + page) + "&";
if (pageSize === null)
throw new Error("The parameter 'pageSize' cannot be null.");
else if (pageSize !== undefined)
url_ += "pageSize=" + encodeURIComponent("" + pageSize) + "&";
if (sortBy !== undefined && sortBy !== null)
url_ += "sortBy=" + encodeURIComponent("" + sortBy) + "&";
if (sortOrder !== undefined && sortOrder !== null)
url_ += "sortOrder=" + encodeURIComponent("" + sortOrder) + "&";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
method: "GET",
headers: {
"Accept": "application/json"
}
};
return this.transformOptions(options_).then(transformedOptions_ => {
return this.http.fetch(url_, transformedOptions_);
}).then((_response: Response) => {
return this.processBacktest_GetBacktestsPaginated(_response);
});
}
protected processBacktest_GetBacktestsPaginated(response: Response): Promise<PaginatedBacktestsResponse> {
const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200) {
return response.text().then((_responseText) => {
let result200: any = null;
result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as PaginatedBacktestsResponse;
return result200;
});
} else if (status !== 200 && status !== 204) {
return response.text().then((_responseText) => {
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
});
}
return Promise.resolve<PaginatedBacktestsResponse>(null as any);
}
backtest_Run(request: RunBacktestRequest): Promise<Backtest> {
let url_ = this.baseUrl + "/Backtest/Run";
url_ = url_.replace(/[?&]$/, "");

148
src/Managing.WebApp/src/pages/backtestPage/backtestGeneticBundle.tsx
View File

@@ -46,20 +46,20 @@ const ALL_INDICATORS = [
// Form Interface
interface GeneticBundleFormData {
ticker: Ticker
timeframe: Timeframe
startDate: string
endDate: string
balance: number
populationSize: number
generations: number
mutationRate: number
selectionMethod: GeneticSelectionMethod
crossoverMethod: GeneticCrossoverMethod
mutationMethod: GeneticMutationMethod
elitismPercentage: number
maxTakeProfit: number
eligibleIndicators: IndicatorType[]
ticker: Ticker
timeframe: Timeframe
startDate: string
endDate: string
balance: number
populationSize: number
generations: number
mutationRate: number
selectionMethod: GeneticSelectionMethod
crossoverMethod: GeneticCrossoverMethod
mutationMethod: GeneticMutationMethod
elitismPercentage: number
maxTakeProfit: number
eligibleIndicators: IndicatorType[]
}
const BacktestGeneticBundle: React.FC = () => {
@@ -76,13 +76,19 @@ const BacktestGeneticBundle: React.FC = () => {
const [backtests, setBacktests] = useState<Backtest[]>([])
const [isLoadingBacktests, setIsLoadingBacktests] = useState(false)
const [isFormCollapsed, setIsFormCollapsed] = useState(false)
// Pagination state
const [currentPage, setCurrentPage] = useState(1)
const [pageSize, setPageSize] = useState(50)
const [totalBacktests, setTotalBacktests] = useState(0)
const [totalPages, setTotalPages] = useState(0)
// Sorting state
const [currentSort, setCurrentSort] = useState<{ sortBy: string; sortOrder: 'asc' | 'desc' }>({
sortBy: 'score',
sortOrder: 'desc'
})
// Form setup
const {register, handleSubmit, watch, setValue, formState: {errors}} = useForm<GeneticBundleFormData>({
defaultValues: {
@@ -225,17 +231,20 @@ const BacktestGeneticBundle: React.FC = () => {
setSelectedRequest(request)
setIsViewModalOpen(true)
setIsLoadingBacktests(true)
// Reset pagination state
// Reset pagination and sorting state
setCurrentPage(1)
setTotalBacktests(0)
setTotalPages(0)
setCurrentSort({sortBy: 'score', sortOrder: 'desc'})
try {
const response: PaginatedBacktestsResponse = await backtestClient.backtest_GetBacktestsByRequestIdPaginated(
request.requestId,
1,
pageSize
request.requestId,
1,
pageSize,
currentSort.sortBy,
currentSort.sortOrder
)
setBacktests(response.backtests || [])
setTotalBacktests(response.totalCount || 0)
@@ -261,15 +270,17 @@ const BacktestGeneticBundle: React.FC = () => {
// Handle page change
const handlePageChange = async (newPage: number) => {
if (!selectedRequest || newPage < 1 || newPage > totalPages) return
setIsLoadingBacktests(true)
setCurrentPage(newPage)
try {
const response: PaginatedBacktestsResponse = await backtestClient.backtest_GetBacktestsByRequestIdPaginated(
selectedRequest.requestId,
newPage,
pageSize
selectedRequest.requestId,
newPage,
pageSize,
currentSort.sortBy,
currentSort.sortOrder
)
setBacktests(response.backtests || [])
} catch (error) {
@@ -280,6 +291,33 @@ const BacktestGeneticBundle: React.FC = () => {
}
}
// Handle sort change
const handleSortChange = async (sortBy: string, sortOrder: 'asc' | 'desc') => {
if (!selectedRequest) return
setIsLoadingBacktests(true)
setCurrentSort({sortBy, sortOrder})
setCurrentPage(1) // Reset to first page when sorting
try {
const response: PaginatedBacktestsResponse = await backtestClient.backtest_GetBacktestsByRequestIdPaginated(
selectedRequest.requestId,
1,
pageSize,
sortBy,
sortOrder
)
setBacktests(response.backtests || [])
setTotalBacktests(response.totalCount || 0)
setTotalPages(response.totalPages || 0)
} catch (error) {
console.error('Error fetching backtests:', error)
new Toast('Failed to load backtest details', false)
} finally {
setIsLoadingBacktests(false)
}
}
// Table columns for genetic requests
const geneticRequestsColumns = useMemo(() => [
{
@@ -298,7 +336,7 @@ const BacktestGeneticBundle: React.FC = () => {
const currentGen = value || 0
const percentage = generations > 0 ? Math.round((currentGen / generations) * 100) : 0
const status = row.original.status
// Calculate color based on percentage (red to green)
const getProgressColor = (percent: number) => {
if (percent <= 25) return 'progress-error'
@@ -317,9 +355,9 @@ const BacktestGeneticBundle: React.FC = () => {
{currentGen} / {generations}
</div>
</div>
<progress
className={`progress w-56 ${getProgressColor(percentage)}`}
value={percentage}
<progress
className={`progress w-56 ${getProgressColor(percentage)}`}
value={percentage}
max="100"
/>
</div>
@@ -534,13 +572,15 @@ const BacktestGeneticBundle: React.FC = () => {
<label className="label">
<span className="label-text">Selection Method</span>
</label>
<select
className="select select-bordered w-full"
<select
className="select select-bordered w-full"
{...register('selectionMethod')}
>
<option value={GeneticSelectionMethod.Elite}>Elite Selection</option>
<option value={GeneticSelectionMethod.Roulette}>Roulette Wheel</option>
<option value={GeneticSelectionMethod.StochasticUniversalSampling}>Stochastic Universal Sampling</option>
<option value={GeneticSelectionMethod.StochasticUniversalSampling}>Stochastic
Universal Sampling
</option>
<option value={GeneticSelectionMethod.Tournament}>Tournament Selection</option>
<option value={GeneticSelectionMethod.Truncation}>Truncation Selection</option>
</select>
@@ -550,22 +590,27 @@ const BacktestGeneticBundle: React.FC = () => {
<label className="label">
<span className="label-text">Crossover Method</span>
</label>
<select
className="select select-bordered w-full"
<select
className="select select-bordered w-full"
{...register('crossoverMethod')}
>
<option value={GeneticCrossoverMethod.AlternatingPosition}>Alternating Position (AP)</option>
<option value={GeneticCrossoverMethod.AlternatingPosition}>Alternating Position
(AP)
</option>
<option value={GeneticCrossoverMethod.CutAndSplice}>Cut and Splice</option>
<option value={GeneticCrossoverMethod.Cycle}>Cycle (CX)</option>
<option value={GeneticCrossoverMethod.OnePoint}>One-Point (C1)</option>
<option value={GeneticCrossoverMethod.OrderBased}>Order-based (OX2)</option>
<option value={GeneticCrossoverMethod.Ordered}>Ordered (OX1)</option>
<option value={GeneticCrossoverMethod.PartiallyMapped}>Partially Mapped (PMX)</option>
<option value={GeneticCrossoverMethod.PartiallyMapped}>Partially Mapped (PMX)
</option>
<option value={GeneticCrossoverMethod.PositionBased}>Position-based (POS)</option>
<option value={GeneticCrossoverMethod.ThreeParent}>Three Parent</option>
<option value={GeneticCrossoverMethod.TwoPoint}>Two-Point (C2)</option>
<option value={GeneticCrossoverMethod.Uniform}>Uniform</option>
<option value={GeneticCrossoverMethod.VotingRecombination}>Voting Recombination (VR)</option>
<option value={GeneticCrossoverMethod.VotingRecombination}>Voting Recombination
(VR)
</option>
</select>
</div>
@@ -573,15 +618,16 @@ const BacktestGeneticBundle: React.FC = () => {
<label className="label">
<span className="label-text">Mutation Method</span>
</label>
<select
className="select select-bordered w-full"
<select
className="select select-bordered w-full"
{...register('mutationMethod')}
>
<option value={GeneticMutationMethod.Displacement}>Displacement</option>
<option value={GeneticMutationMethod.FlipBit}>Flip Bit</option>
<option value={GeneticMutationMethod.Insertion}>Insertion</option>
<option value={GeneticMutationMethod.PartialShuffle}>Partial Shuffle (PSM)</option>
<option value={GeneticMutationMethod.ReverseSequence}>Reverse Sequence (RSM)</option>
<option value={GeneticMutationMethod.ReverseSequence}>Reverse Sequence (RSM)
</option>
<option value={GeneticMutationMethod.Twors}>Twors</option>
<option value={GeneticMutationMethod.Uniform}>Uniform</option>
</select>
@@ -725,9 +771,9 @@ const BacktestGeneticBundle: React.FC = () => {
<strong>Progress:</strong> {selectedRequest.currentGeneration || 0} / {selectedRequest.generations}
{selectedRequest.currentGeneration && selectedRequest.generations > 0 && (
<div className="mt-1">
<progress
className="progress progress-primary w-full h-2"
value={Math.round(((selectedRequest.currentGeneration || 0) / selectedRequest.generations) * 100)}
<progress
className="progress progress-primary w-full h-2"
value={Math.round(((selectedRequest.currentGeneration || 0) / selectedRequest.generations) * 100)}
max="100"
/>
</div>
@@ -778,38 +824,40 @@ const BacktestGeneticBundle: React.FC = () => {
<div className="card bg-base-100 shadow-xl">
<div className="card-body">
<h3 className="card-title">Score vs Generation</h3>
<ScoreVsGeneration backtests={backtests} theme={theme} />
<ScoreVsGeneration backtests={backtests} theme={theme}/>
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
{/* Fitness vs Score vs Win Rate */}
<div className="card bg-base-100 shadow-xl">
<div className="card-body">
<h3 className="card-title">Fitness vs Score vs Win Rate</h3>
<Fitness3DPlot backtests={backtests} theme={theme} />
<Fitness3DPlot backtests={backtests} theme={theme}/>
</div>
</div>
{/* TP% vs SL% vs PnL */}
<div className="card bg-base-100 shadow-xl">
<div className="card-body">
<h3 className="card-title">Take Profit vs Stop Loss vs PnL</h3>
<TPvsSLvsPnL3DPlot backtests={backtests} theme={theme} />
<TPvsSLvsPnL3DPlot backtests={backtests} theme={theme}/>
</div>
</div>
</div>
{/* Strategy Comparison Radar Chart */}
<div className="mb-6">
<IndicatorsComparison backtests={backtests} />
<IndicatorsComparison backtests={backtests}/>
</div>
<BacktestTable
list={backtests}
isFetching={false}
displaySummary={false}
onSortChange={handleSortChange}
currentSort={currentSort}
/>
</>
) : (

97
src/Managing.WebApp/src/pages/backtestPage/backtestScanner.tsx
View File

@@ -1,5 +1,4 @@
import {ColorSwatchIcon, TrashIcon} from '@heroicons/react/solid'
import {useQuery} from '@tanstack/react-query'
import React, {useEffect, useState} from 'react'
import 'react-toastify/dist/ReactToastify.css'
@@ -8,8 +7,11 @@ import useBacktestStore from '../../app/store/backtestStore'
import {Loader, Slider} from '../../components/atoms'
import {Modal, Toast} from '../../components/mollecules'
import {BacktestTable, UnifiedTradingModal} from '../../components/organism'
import type {Backtest} from '../../generated/ManagingApi'
import {BacktestClient} from '../../generated/ManagingApi'
const PAGE_SIZE = 50
const BacktestScanner: React.FC = () => {
const [showModal, setShowModal] = useState(false)
const [showModalRemoveBacktest, setShowModalRemoveBacktest] = useState(false)
@@ -18,30 +20,50 @@ const BacktestScanner: React.FC = () => {
winRate: 50,
score: 50
})
const { apiUrl } = useApiUrlStore()
const { backtests: backtestingResult, setBacktests, setLoading } = useBacktestStore()
const client = new BacktestClient({}, apiUrl)
const { isLoading, refetch, data: backtests } = useQuery({
queryFn: () => client.backtest_Backtests(),
queryKey: ['backtests'],
const [currentPage, setCurrentPage] = useState(1)
const [totalBacktests, setTotalBacktests] = useState(0)
const [totalPages, setTotalPages] = useState(0)
const [currentSort, setCurrentSort] = useState<{ sortBy: string; sortOrder: 'asc' | 'desc' }>({
sortBy: 'score',
sortOrder: 'desc'
})
const [backtests, setBacktests] = useState<Backtest[]>([])
const [isLoading, setIsLoading] = useState(false)
useEffect(() => {
if (backtests) {
setBacktests(backtests)
const { apiUrl } = useApiUrlStore()
const { setBacktests: setBacktestsFromStore, setLoading } = useBacktestStore()
const backtestClient = new BacktestClient({}, apiUrl)
// Fetch paginated/sorted backtests
const fetchBacktests = async (page = 1, sort = currentSort) => {
setIsLoading(true)
try {
const response = await backtestClient.backtest_GetBacktestsPaginated(page, PAGE_SIZE, sort.sortBy, sort.sortOrder)
setBacktests((response.backtests as Backtest[]) || [])
setTotalBacktests(response.totalCount || 0)
setTotalPages(response.totalPages || 0)
} catch (err) {
new Toast('Failed to load backtests', false)
} finally {
setIsLoading(false)
}
}, [backtests, setBacktests])
}
useEffect(() => {
fetchBacktests(currentPage, currentSort)
// eslint-disable-next-line
}, [currentPage, currentSort])
useEffect(() => {
setBacktestsFromStore(backtests)
setLoading(isLoading)
}, [isLoading, setLoading])
}, [backtests, setBacktestsFromStore, setLoading, isLoading])
useEffect(() => {
if (backtestingResult && showModalRemoveBacktest) {
if (backtests && showModalRemoveBacktest) {
calculateFilteredCount()
}
}, [backtestingResult, showModalRemoveBacktest])
}, [backtests, showModalRemoveBacktest])
const openModalRemoveBacktests = () => {
setShowModalRemoveBacktest(true)
@@ -50,14 +72,14 @@ const BacktestScanner: React.FC = () => {
}
const calculateFilteredCount = (formData?: any) => {
if (!backtestingResult) {
if (!backtests) {
setFilteredCount(0)
return
}
const filters = formData || filterValues
const filteredBacktests = backtestingResult.filter((backtest: any) => {
const filteredBacktests = backtests.filter((backtest: any) => {
// Ensure values are numbers and handle potential null/undefined values
const backtestWinRate = Number(backtest.winRate) || 0
const backtestScore = Number(backtest.score) || 0
@@ -78,7 +100,7 @@ const BacktestScanner: React.FC = () => {
)
})
console.log('Filtered count:', filteredBacktests.length, 'Total:', backtestingResult.length)
console.log('Filtered count:', filteredBacktests.length, 'Total:', backtests.length)
setFilteredCount(filteredBacktests.length)
}
@@ -103,11 +125,11 @@ const BacktestScanner: React.FC = () => {
const notify = new Toast(`Deleting Backtests...`)
closeModalRemoveBacktest()
if (!backtestingResult) {
if (!backtests) {
return
}
const backTestToDelete = backtestingResult.filter((backtest: any) => {
const backTestToDelete = backtests.filter((backtest: any) => {
// Ensure values are numbers and handle potential null/undefined values
const backtestWinRate = Number(backtest.winRate) || 0
const backtestScore = Number(backtest.score) || 0
@@ -125,11 +147,11 @@ const BacktestScanner: React.FC = () => {
try {
const backtestIds = backTestToDelete.map((backtest: any) => backtest.id)
await client.backtest_DeleteBacktests({ backtestIds })
await backtestClient.backtest_DeleteBacktests({ backtestIds })
notify.update('success', `${backTestToDelete.length} backtests deleted successfully`)
// Refetch backtests to update the list
refetch()
fetchBacktests(currentPage, currentSort)
} catch (err: any) {
notify.update('error', err?.message || 'An error occurred while deleting backtests')
}
@@ -143,6 +165,18 @@ const BacktestScanner: React.FC = () => {
setShowModal(false)
}
// Sorting handler
const handleSortChange = (sortBy: string, sortOrder: 'asc' | 'desc') => {
setCurrentSort({ sortBy, sortOrder })
setCurrentPage(1)
}
// Pagination handler
const handlePageChange = (newPage: number) => {
if (newPage < 1 || (totalPages && newPage > totalPages)) return
setCurrentPage(newPage)
}
if (isLoading) {
return <Loader />
}
@@ -163,7 +197,24 @@ const BacktestScanner: React.FC = () => {
</button>
</div>
<BacktestTable list={backtestingResult} isFetching={isLoading} />
<BacktestTable
list={backtests}
isFetching={isLoading}
onSortChange={handleSortChange}
currentSort={currentSort}
/>
{/* Pagination controls */}
{totalPages > 1 && (
<div className="flex items-center gap-2 my-4">
<button className="btn btn-sm" onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage <= 1}>
«
</button>
<span className="text-sm">Page {currentPage} of {totalPages}</span>
<button className="btn btn-sm" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage >= totalPages}>
»
</button>
</div>
)}
<UnifiedTradingModal
mode="backtest"