@tradejs/app 1.0.9 → 1.0.10

package/src/app/components/Backtest/ResultsPageClient.tsx

@@ -0,0 +1,376 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box, ClientOnly, Flex } from '@chakra-ui/react';
+import { deleteBacktest } from '#actions/backtest';
+import { useBacktestMutations, useTestList } from '#store';
+import { Select, toaster } from '#ui';
+import { CompareList } from '#components/Backtest/CompareList';
+import { TestList } from '#components/Backtest/TestList';
+import {
+  BulkDeleteToolbar,
+  useBulkSelection,
+} from '#components/Shared/BulkSelection';
+import { parseTestName } from '@tradejs/core/backtest';
+import { CARD_PAGE_CONTENT_MAX_WIDTH } from '#app/lib/cardPageLayout';
+
+const ALL_STRATEGIES = '__all__';
+const ALL_SUITES = '__all__';
+const ALL_CONFIGS = '__all__';
+
+interface BacktestResultsPageClientProps {
+  toolbarPrefix?: React.ReactNode;
+}
+
+interface PendingBacktestDelete {
+  value: string;
+  strategyName?: string;
+}
+
+export const BacktestResultsPageClient = ({
+  toolbarPrefix,
+}: BacktestResultsPageClientProps) => {
+  const { tests, loadding, fulFilled } = useTestList();
+  const { removeBacktestTest } = useBacktestMutations();
+  const [isDeleteSelectedOpen, setIsDeleteSelectedOpen] = useState(false);
+  const [isDeletingSelected, setIsDeletingSelected] = useState(false);
+  const [pendingDeleteTests, setPendingDeleteTests] = useState<
+    PendingBacktestDelete[]
+  >([]);
+  const strategyItems = useMemo(() => {
+    const names = new Set<string>();
+    for (const test of tests) {
+      const strategyName = test.data?.strategyName;
+      if (typeof strategyName === 'string' && strategyName) {
+        names.add(strategyName);
+      }
+    }
+
+    return [
+      { label: 'All strategies', value: ALL_STRATEGIES },
+      ...Array.from(names)
+        .sort()
+        .map((strategyName) => ({
+          label: strategyName,
+          value: strategyName,
+        })),
+    ];
+  }, [tests]);
+  const [selectedStrategy, setSelectedStrategy] = useState(ALL_STRATEGIES);
+  const suiteItems = useMemo(() => {
+    const names = new Set<string>();
+    for (const test of tests) {
+      if (
+        selectedStrategy !== ALL_STRATEGIES &&
+        test.data?.strategyName !== selectedStrategy
+      ) {
+        continue;
+      }
+
+      const { testSuiteId } = parseTestName(test.value);
+      if (testSuiteId) {
+        names.add(testSuiteId);
+      }
+    }
+
+    return [
+      { label: 'All suites', value: ALL_SUITES },
+      ...Array.from(names)
+        .sort()
+        .map((testSuiteId) => ({
+          label: testSuiteId,
+          value: testSuiteId,
+        })),
+    ];
+  }, [tests, selectedStrategy]);
+  const [selectedSuite, setSelectedSuite] = useState(ALL_SUITES);
+  const configItems = useMemo(() => {
+    const names = new Set<string>();
+    for (const test of tests) {
+      if (
+        selectedStrategy !== ALL_STRATEGIES &&
+        test.data?.strategyName !== selectedStrategy
+      ) {
+        continue;
+      }
+
+      if (selectedSuite !== ALL_SUITES) {
+        const { testSuiteId } = parseTestName(test.value);
+        if (testSuiteId !== selectedSuite) {
+          continue;
+        }
+      }
+
+      const configId =
+        typeof test.data?.configId === 'string' ? test.data.configId : '';
+      if (configId) {
+        names.add(configId);
+      }
+    }
+
+    return [
+      { label: 'All configs', value: ALL_CONFIGS },
+      ...Array.from(names)
+        .sort()
+        .map((configId) => ({
+          label: configId,
+          value: configId,
+        })),
+    ];
+  }, [tests, selectedStrategy, selectedSuite]);
+  const [selectedConfigId, setSelectedConfigId] = useState(ALL_CONFIGS);
+
+  useEffect(() => {
+    if (!strategyItems.some((item) => item.value === selectedStrategy)) {
+      setSelectedStrategy(strategyItems[0]?.value || ALL_STRATEGIES);
+    }
+  }, [strategyItems, selectedStrategy]);
+
+  useEffect(() => {
+    if (!suiteItems.some((item) => item.value === selectedSuite)) {
+      setSelectedSuite(suiteItems[0]?.value || ALL_SUITES);
+    }
+  }, [suiteItems, selectedSuite]);
+
+  useEffect(() => {
+    if (!configItems.some((item) => item.value === selectedConfigId)) {
+      setSelectedConfigId(configItems[0]?.value || ALL_CONFIGS);
+    }
+  }, [configItems, selectedConfigId]);
+
+  const filteredTests = useMemo(() => {
+    return tests.filter((test) => {
+      if (
+        selectedStrategy !== ALL_STRATEGIES &&
+        test.data?.strategyName !== selectedStrategy
+      ) {
+        return false;
+      }
+
+      if (selectedSuite !== ALL_SUITES) {
+        const { testSuiteId } = parseTestName(test.value);
+        if (testSuiteId !== selectedSuite) {
+          return false;
+        }
+      }
+
+      if (selectedConfigId !== ALL_CONFIGS) {
+        return test.data?.configId === selectedConfigId;
+      }
+
+      return true;
+    });
+  }, [tests, selectedStrategy, selectedSuite, selectedConfigId]);
+
+  const filteredTestNames = useMemo(
+    () => filteredTests.map((test) => test.value),
+    [filteredTests],
+  );
+  const allTestNames = useMemo(() => tests.map((test) => test.value), [tests]);
+  const {
+    selectedIds: selectedTestNames,
+    selectedScopedCount: selectedFilteredCount,
+    hasScopedSelection: hasSelectedInFilter,
+    checkboxState: selectionCheckboxState,
+    toggleSelection: handleToggleSelection,
+    setScopeSelected: handleSelectAllFiltered,
+    removeSelection: removeDeletedSelection,
+  } = useBulkSelection({
+    scopeIds: filteredTestNames,
+    validIds: allTestNames,
+  });
+
+  const noData = fulFilled && !loadding && filteredTests.length === 0;
+
+  const handleOpenDeleteSelected = () => {
+    const selectedSet = new Set(selectedTestNames);
+    const targets = filteredTests.filter((test) => selectedSet.has(test.value));
+
+    if (targets.length === 0) {
+      setIsDeleteSelectedOpen(false);
+      setPendingDeleteTests([]);
+      return;
+    }
+
+    setPendingDeleteTests(
+      targets.map((test) => ({
+        value: test.value,
+        strategyName:
+          typeof test.data?.strategyName === 'string'
+            ? test.data.strategyName
+            : undefined,
+      })),
+    );
+    setIsDeleteSelectedOpen(true);
+  };
+
+  const handleDeleteSelected = async () => {
+    const targets = pendingDeleteTests;
+
+    if (targets.length === 0 || isDeletingSelected) {
+      setIsDeleteSelectedOpen(false);
+      setPendingDeleteTests([]);
+      return;
+    }
+
+    setIsDeletingSelected(true);
+
+    try {
+      const results = await Promise.allSettled(
+        targets.map(async (test) => {
+          const strategyName = test.strategyName;
+          if (!strategyName) {
+            throw new Error(`Missing strategy for ${test.value}`);
+          }
+
+          const deleted = await deleteBacktest(test.value, strategyName);
+          if (!deleted) {
+            throw new Error(`Delete failed for ${test.value}`);
+          }
+
+          await removeBacktestTest(test.value);
+          return test.value;
+        }),
+      );
+
+      const successCount = results.filter(
+        (item) => item.status === 'fulfilled',
+      ).length;
+      const failedCount = results.length - successCount;
+
+      if (successCount > 0) {
+        const deletedIds = results
+          .filter((item) => item.status === 'fulfilled')
+          .map((item) => item.value);
+        removeDeletedSelection(deletedIds);
+      }
+
+      if (failedCount === 0) {
+        toaster.success({
+          title: 'Tests deleted',
+          description: `Deleted: ${successCount}`,
+        });
+      } else {
+        toaster.error({
+          title: 'Bulk delete finished with errors',
+          description: `Deleted: ${successCount} of ${targets.length}`,
+        });
+      }
+    } catch {
+      toaster.error({
+        title: 'Delete failed',
+        description: 'Failed to delete selected tests.',
+      });
+    } finally {
+      setIsDeletingSelected(false);
+      setIsDeleteSelectedOpen(false);
+      setPendingDeleteTests([]);
+    }
+  };
+
+  const handleBulkDeleteDialogOpenChange = (open: boolean) => {
+    setIsDeleteSelectedOpen(open);
+
+    if (!open && !isDeletingSelected) {
+      setPendingDeleteTests([]);
+    }
+  };
+
+  const deleteSelectedTestCount = isDeleteSelectedOpen
+    ? pendingDeleteTests.length
+    : selectedFilteredCount;
+
+  return (
+    <ClientOnly>
+      <Box minH="100vh" bg="gray.900">
+        <Box
+          as="main"
+          minH="100vh"
+          minW="1200px"
+          pl={2}
+          bg="gray.900"
+          display="flex"
+          flexDirection="column"
+          alignItems="flex-start"
+        >
+          <Box
+            minH="100vh"
+            w="full"
+            maxW={CARD_PAGE_CONTENT_MAX_WIDTH}
+            display="flex"
+            flex="1"
+            flexDirection="column"
+            alignItems="flex-start"
+          >
+            <Flex
+              mb={2}
+              mt={2}
+              gap={8}
+              flexDirection="row"
+              alignItems="center"
+              w="full"
+            >
+              <Flex gap={3} alignItems="center">
+                {toolbarPrefix}
+                <Select
+                  placeholder="Strategy"
+                  value={[selectedStrategy]}
+                  defaultValue={[selectedStrategy]}
+                  onChange={(value) =>
+                    setSelectedStrategy(value[0] || ALL_STRATEGIES)
+                  }
+                  items={strategyItems}
+                  width="220px"
+                />
+                <Select
+                  placeholder="TestSuite"
+                  value={[selectedSuite]}
+                  defaultValue={[selectedSuite]}
+                  onChange={(value) => setSelectedSuite(value[0] || ALL_SUITES)}
+                  items={suiteItems}
+                  width="180px"
+                />
+                <Select
+                  placeholder="ConfigId"
+                  value={[selectedConfigId]}
+                  defaultValue={[selectedConfigId]}
+                  onChange={(value) =>
+                    setSelectedConfigId(value[0] || ALL_CONFIGS)
+                  }
+                  items={configItems}
+                  width="180px"
+                />
+              </Flex>
+              <CompareList />
+            </Flex>
+            <BulkDeleteToolbar
+              selectedCount={selectedFilteredCount}
+              checkboxState={selectionCheckboxState}
+              hasSelection={hasSelectedInFilter}
+              isDeleting={isDeletingSelected}
+              dialogOpen={isDeleteSelectedOpen}
+              deleteTitle="Delete selected tests"
+              deleteDescription={`Delete selected tests (${deleteSelectedTestCount})?`}
+              onDialogOpenChange={handleBulkDeleteDialogOpenChange}
+              onToggleAll={handleSelectAllFiltered}
+              onRequestDelete={handleOpenDeleteSelected}
+              onConfirmDelete={handleDeleteSelected}
+            />
+            <Box flex="1" h="full" w="full">
+              <TestList
+                tests={filteredTests}
+                loadding={loadding}
+                fulFilled={fulFilled}
+                noData={noData}
+                selectedTestNames={selectedTestNames}
+                onToggleSelection={handleToggleSelection}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </ClientOnly>
+  );
+};
+
+export default BacktestResultsPageClient;

package/src/app/components/Backtest/TestCard/ActionsMenu/index.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+import { Button, Menu, Portal } from '@chakra-ui/react';
+import { useFavoriteTests, useTestsCompare } from '#store';
+import { buildDashboardPath } from '#app/lib/marketRoutes';
+import { TestCardConfigDrawerPanel } from '../ConfigDrawer';
+import { TestCardDeleteDialog } from '../DeleteButton';
+import { TestCardOrdersDrawerPanel } from '../OrdersDrawer';
+import { TestCardStatDrawerPanel } from '../StatDrawer';
+import { useTestContext } from '../context';
+
+const connectorNameToProvider: Record<
+  string,
+  'bybit' | 'binance' | 'coinbase'
+> = {
+  bybit: 'bybit',
+  binance: 'binance',
+  coinbase: 'coinbase',
+};
+
+export const TestCardActionsMenu = () => {
+  const [configOpen, setConfigOpen] = useState(false);
+  const [ordersOpen, setOrdersOpen] = useState(false);
+  const [statOpen, setStatOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const { testResult } = useTestContext();
+  const { checkIsCompared, onChangeCompare } = useTestsCompare();
+  const { checkIsFavorite, toggleFavorite } = useFavoriteTests();
+  const isCompared = checkIsCompared(testResult.test.name);
+  const isFavorite = checkIsFavorite(testResult.test.name);
+
+  const openDashboard = () => {
+    const provider =
+      connectorNameToProvider[testResult.test.connectorName.toLowerCase()] ||
+      'bybit';
+    const params = new URLSearchParams();
+
+    params.set('backtestId', testResult.test.name);
+    params.set('backtestStrategy', testResult.test.strategyName);
+
+    window.open(
+      buildDashboardPath(
+        {
+          provider,
+          universe: testResult.test.universe ?? 'crypto',
+          symbol: testResult.test.symbol,
+          interval: testResult.test.interval ?? '15',
+        },
+        params,
+      ),
+      '_blank',
+      'noopener,noreferrer',
+    );
+  };
+
+  return (
+    <>
+      <Menu.Root positioning={{ placement: 'bottom-end' }}>
+        <Menu.Trigger asChild>
+          <Button size="sm" variant="outline">
+            Actions
+          </Button>
+        </Menu.Trigger>
+        <Portal>
+          <Menu.Positioner>
+            <Menu.Content minW="180px">
+              <Menu.Item
+                value="compare"
+                onClick={() => onChangeCompare(testResult.test.name)}
+              >
+                {isCompared ? 'Remove compare' : 'Compare'}
+              </Menu.Item>
+              <Menu.Item
+                value="favorite"
+                onClick={() =>
+                  toggleFavorite(
+                    testResult.test.name,
+                    testResult.stat.netProfit,
+                  )
+                }
+              >
+                {isFavorite ? 'Unfavorite' : 'Favorite'}
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item value="config" onClick={() => setConfigOpen(true)}>
+                Config
+              </Menu.Item>
+              <Menu.Item value="orders" onClick={() => setOrdersOpen(true)}>
+                Orders
+              </Menu.Item>
+              <Menu.Item value="stat" onClick={() => setStatOpen(true)}>
+                Stat
+              </Menu.Item>
+              <Menu.Item value="dashboard" onClick={openDashboard}>
+                Dashboard
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item
+                value="delete"
+                color="fg.error"
+                onClick={() => setDeleteOpen(true)}
+              >
+                Delete
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Positioner>
+        </Portal>
+      </Menu.Root>
+
+      <TestCardConfigDrawerPanel
+        open={configOpen}
+        onOpenChange={setConfigOpen}
+      />
+      <TestCardOrdersDrawerPanel
+        open={ordersOpen}
+        onOpenChange={setOrdersOpen}
+      />
+      <TestCardStatDrawerPanel open={statOpen} onOpenChange={setStatOpen} />
+      <TestCardDeleteDialog open={deleteOpen} onOpenChange={setDeleteOpen} />
+    </>
+  );
+};

package/src/app/components/Backtest/TestCard/Chart/index.tsx

@@ -13,7 +13,7 @@ import {
   ReferenceLine,
   ResponsiveContainer,
 } from 'recharts';
-import { useTestsCompare } from '@store';
+import { useTestsCompare } from '#store';
 import { useTestContext } from '../context';
 import { TestCompareList } from '@tradejs/types';
 import { mapOrderLogToChartData, getChartData } from './utils';

package/src/app/components/Backtest/TestCard/CompareButton/index.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from '@chakra-ui/react';
 import { TbArrowsLeftRight } from 'react-icons/tb';
-import { useTestsCompare } from '@store';
+import { useTestsCompare } from '#store';
 import { useTestContext } from '../context';
 
 export const TestCardCompareButton = () => {

package/src/app/components/Backtest/TestCard/ConfigDrawer/index.tsx

@@ -17,8 +17,15 @@ const JsonCodeBlock = dynamic(() => import('./JsonCodeBlock'), { ssr: false });
 
 type TabType = 'test' | 'bot';
 
-export const TestCardConfigDrawer = () => {
-  const [open, setOpen] = useState(false);
+interface TestCardConfigDrawerPanelProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const TestCardConfigDrawerPanel = ({
+  open,
+  onOpenChange,
+}: TestCardConfigDrawerPanelProps) => {
   const [tab, setTab] = useState<TabType>('test');
   const { testResult } = useTestContext();
 
@@ -43,18 +50,9 @@ export const TestCardConfigDrawer = () => {
     >
       <Drawer.Root
         open={open}
-        onOpenChange={(e) => setOpen(e.open)}
+        onOpenChange={(e) => onOpenChange(e.open)}
         size={'lg'}
       >
-        <Drawer.Trigger asChild>
-          <IconButton
-            colorPalette="teal"
-            size="xs"
-            variant={open ? 'surface' : 'outline'}
-          >
-            <FiSettings />
-          </IconButton>
-        </Drawer.Trigger>
         <Portal>
           <Drawer.Backdrop />
           <Drawer.Positioner>
@@ -92,3 +90,21 @@ export const TestCardConfigDrawer = () => {
     </Tabs.Root>
   );
 };
+
+export const TestCardConfigDrawer = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <IconButton
+        colorPalette="teal"
+        size="xs"
+        variant={open ? 'surface' : 'outline'}
+        onClick={() => setOpen(true)}
+      >
+        <FiSettings />
+      </IconButton>
+      <TestCardConfigDrawerPanel open={open} onOpenChange={setOpen} />
+    </>
+  );
+};

package/src/app/components/Backtest/TestCard/DeleteButton/index.tsx

@@ -10,13 +10,20 @@ import {
   Text,
 } from '@chakra-ui/react';
 import { FiTrash2 } from 'react-icons/fi';
-import { deleteBacktest } from '@actions/backtest';
-import { useBacktestMutations } from '@store';
-import { toaster } from '@UI';
+import { deleteBacktest } from '#actions/backtest';
+import { useBacktestMutations } from '#store';
+import { toaster } from '#ui';
 import { useTestContext } from '../context';
 
-export const TestCardDeleteButton = () => {
-  const [open, setOpen] = useState(false);
+interface TestCardDeleteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const TestCardDeleteDialog = ({
+  open,
+  onOpenChange,
+}: TestCardDeleteDialogProps) => {
   const [isDeleting, setIsDeleting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { removeBacktestTest } = useBacktestMutations();
@@ -46,7 +53,7 @@ export const TestCardDeleteButton = () => {
       }
 
       await removeBacktestTest(testResult.test.name);
-      setOpen(false);
+      onOpenChange(false);
       toaster.success({
         title: 'Backtest deleted',
         description: testResult.test.name,
@@ -66,22 +73,12 @@ export const TestCardDeleteButton = () => {
     <Dialog.Root
       open={open}
       onOpenChange={(e) => {
-        setOpen(e.open);
+        onOpenChange(e.open);
         if (!e.open) {
           setError(null);
         }
       }}
     >
-      <Dialog.Trigger asChild>
-        <IconButton
-          size="xs"
-          colorPalette="red"
-          variant="outline"
-          aria-label="Delete backtest"
-        >
-          <FiTrash2 />
-        </IconButton>
-      </Dialog.Trigger>
       <Portal>
         <Dialog.Backdrop />
         <Dialog.Positioner>
@@ -126,3 +123,22 @@ export const TestCardDeleteButton = () => {
     </Dialog.Root>
   );
 };
+
+export const TestCardDeleteButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <IconButton
+        size="xs"
+        colorPalette="red"
+        variant="outline"
+        aria-label="Delete backtest"
+        onClick={() => setOpen(true)}
+      >
+        <FiTrash2 />
+      </IconButton>
+      <TestCardDeleteDialog open={open} onOpenChange={setOpen} />
+    </>
+  );
+};

package/src/app/components/Backtest/TestCard/FavoriteIndicator/index.tsx

@@ -1,5 +1,5 @@
-import { FavoriteButton } from '@shared/FavoriteButton';
-import { useFavoriteTests } from '@store';
+import { FavoriteButton } from '#shared/FavoriteButton';
+import { useFavoriteTests } from '#store';
 import { useTestContext } from '../context';
 
 export const TestCardFavoriteIndicator = () => {

package/src/app/components/Backtest/TestCard/OpenDashboardButton/index.tsx

@@ -1,5 +1,6 @@
 import { IconButton } from '@chakra-ui/react';
 import { FiBarChart2 } from 'react-icons/fi';
+import { buildDashboardPath } from '#app/lib/marketRoutes';
 import { useTestContext } from '../context';
 
 const connectorNameToProvider: Record<
@@ -28,7 +29,15 @@ export const TestCardOpenDashboardButton = () => {
       variant="outline"
       onClick={() =>
         window.open(
-          `/routes/dashboard/${provider}/${testResult.test.symbol}/15?${params.toString()}`,
+          buildDashboardPath(
+            {
+              provider,
+              universe: testResult.test.universe ?? 'crypto',
+              symbol: testResult.test.symbol,
+              interval: testResult.test.interval ?? '15',
+            },
+            params,
+          ),
           '_blank',
           'noopener,noreferrer',
         )