feat(gui): Disconnect with host without refresh (#297)

* fix(gui): some styles * feat(gui): Disconnect with host without refresh * feat(gui): add Connect Hosts in HomePage
No-Trade-No-Life · Dec 1, 2023 · ae71a8a · ae71a8a
1 parent b70bae7
commit ae71a8a
Show file tree

Hide file tree

Showing 22 changed files with 188 additions and 140 deletions.
diff --git a/ui/web/src/modules/AccountInfo/model.ts b/ui/web/src/modules/AccountInfo/model.ts
@@ -1,19 +1,19 @@
 import { IAccountPerformance } from '@yuants/kernel';
 import { IAccountInfo } from '@yuants/protocol';
-import { BehaviorSubject, Observable, defer, shareReplay, switchMap } from 'rxjs';
+import { BehaviorSubject, EMPTY, Observable, defer, of, shareReplay, switchMap } from 'rxjs';
 import { terminal$ } from '../Terminals';
 
 export const useAccountInfo = (() => {
   const hub: Record<string, Observable<IAccountInfo>> = {};
   return (account_id: string) =>
     (hub[account_id] ??= defer(() => terminal$).pipe(
-      switchMap((terminal) => terminal.useAccountInfo(account_id)),
+      switchMap((terminal) => terminal?.useAccountInfo(account_id) ?? EMPTY),
       shareReplay(1),
     ));
 })();
 
 export const accountIds$ = defer(() => terminal$).pipe(
-  switchMap((terminal) => terminal.accountIds$),
+  switchMap((terminal) => terminal?.accountIds$ ?? of([])),
   shareReplay(1),
 );
 

diff --git a/ui/web/src/modules/Agent/AgentConfForm.tsx b/ui/web/src/modules/Agent/AgentConfForm.tsx
@@ -134,7 +134,9 @@ runAgentAction$.subscribe(async () => {
       console.error(validator.errors);
       throw msg;
     }
-    if (currentHostConfig$.value === null) {
+    const terminal = await firstValueFrom(terminal$);
+
+    if (terminal === null) {
       const agentCode = await bundleCode(agentConf.entry!);
       const scene = await LocalAgentScene({ ...agentConf, bundled_code: agentCode });
       const accountFrameUnit = new AccountFrameUnit(
@@ -153,7 +155,6 @@ runAgentAction$.subscribe(async () => {
       );
       accountFrameSeries$.next(accountFrameUnit.data);
     } else {
-      const terminal = await firstValueFrom(terminal$);
       const agentCode = await bundleCode(agentConf.entry!);
       const scene = await AgentScene(terminal, { ...agentConf, bundled_code: agentCode });
       const accountFrameUnit = new AccountFrameUnit(

diff --git a/ui/web/src/modules/Agent/utils.ts b/ui/web/src/modules/Agent/utils.ts
@@ -322,8 +322,9 @@ export interface IBatchAgentResultItem {
 
 export const runBatchBackTestWorkItem = async (agentConf: IAgentConf): Promise<IBatchAgentResultItem[]> => {
   if (!agentConf.bundled_code) throw new Error('No bundled_code');
-  const scene = currentHostConfig$.value
-    ? await AgentScene(await firstValueFrom(terminal$), {
+  const terminal = await firstValueFrom(terminal$);
+  const scene = terminal
+    ? await AgentScene(terminal, {
         ...agentConf,
         disable_log: true,
       })

diff --git a/ui/web/src/modules/Fund/RealtimeAsset.tsx b/ui/web/src/modules/Fund/RealtimeAsset.tsx
@@ -324,6 +324,7 @@ registerPage('RealtimeAsset', () => {
             onClick={() => {
               terminal$
                 .pipe(
+                  filter((x): x is Exclude<typeof x, null> => !!x),
                   first(),
                   mergeMap((terminal) =>
                     from(fundInfo.config.investors).pipe(
@@ -343,6 +344,7 @@ registerPage('RealtimeAsset', () => {
                   onClick={() => {
                     terminal$
                       .pipe(
+                        filter((x): x is Exclude<typeof x, null> => !!x),
                         first(),
                         mergeMap((terminal) => sendReportToInvestor(terminal, fundInfo, investor)),
                       )

diff --git a/ui/web/src/modules/GeneralSpecificRelations/GeneralSpecificRelationList.tsx b/ui/web/src/modules/GeneralSpecificRelations/GeneralSpecificRelationList.tsx
@@ -3,7 +3,7 @@ import { Button, Modal, Popconfirm, Space, Table, Toast } from '@douyinfe/semi-u
 import { IDataRecord } from '@yuants/protocol';
 import { useObservable, useObservableState } from 'observable-hooks';
 import { useState } from 'react';
-import { combineLatest, filter, first, mergeMap, tap, toArray } from 'rxjs';
+import { EMPTY, combineLatest, filter, first, mergeMap, tap, toArray } from 'rxjs';
 import Form from '../Form';
 import { registerPage } from '../Pages';
 import { terminal$ } from '../Terminals';
@@ -63,28 +63,28 @@ registerPage('GeneralSpecificRelationList', () => {
       combineLatest([terminal$, input$]).pipe(
         //
         mergeMap(([terminal, [searchFormData]]) =>
-          terminal
-            .queryDataRecords<IGeneralSpecificRelation>({
+          (
+            terminal?.queryDataRecords<IGeneralSpecificRelation>({
               type: 'general_specific_relation',
               tags: {},
               options: {},
-            })
-            .pipe(
-              //
-              filter(
-                (record) =>
-                  (searchFormData.general_product_id
-                    ? record.origin.general_product_id === searchFormData.general_product_id
-                    : true) &&
-                  (searchFormData.specific_datasource_id
-                    ? record.origin.specific_datasource_id === searchFormData.specific_datasource_id
-                    : true) &&
-                  (searchFormData.specific_product_id
-                    ? record.origin.specific_product_id === searchFormData.specific_product_id
-                    : true),
-              ),
-              toArray(),
+            }) ?? EMPTY
+          ).pipe(
+            //
+            filter(
+              (record) =>
+                (searchFormData.general_product_id
+                  ? record.origin.general_product_id === searchFormData.general_product_id
+                  : true) &&
+                (searchFormData.specific_datasource_id
+                  ? record.origin.specific_datasource_id === searchFormData.specific_datasource_id
+                  : true) &&
+                (searchFormData.specific_product_id
+                  ? record.origin.specific_product_id === searchFormData.specific_product_id
+                  : true),
             ),
+            toArray(),
+          ),
         ),
       ),
     [searchFormData, refreshId],
@@ -154,6 +154,7 @@ registerPage('GeneralSpecificRelationList', () => {
                       terminal$
                         .pipe(
                           //
+                          filter((x): x is Exclude<typeof x, null> => !!x),
                           first(),
                           mergeMap((terminal) =>
                             terminal.removeDataRecords({
@@ -188,6 +189,7 @@ registerPage('GeneralSpecificRelationList', () => {
           const record = mapGeneralSpecificRelationToDataRecord(formData);
           terminal$
             .pipe(
+              filter((x): x is Exclude<typeof x, null> => !!x),
               first(),
               mergeMap((terminal) => terminal.updateDataRecords([record])),
               tap({

diff --git a/ui/web/src/modules/Market/Market.tsx b/ui/web/src/modules/Market/Market.tsx
@@ -13,7 +13,17 @@ import {
 import { t } from 'i18next';
 import { useObservable, useObservableState } from 'observable-hooks';
 import { useEffect, useMemo, useState } from 'react';
-import { BehaviorSubject, distinctUntilChanged, first, interval, map, mergeMap, tap, throwError } from 'rxjs';
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  filter,
+  first,
+  interval,
+  map,
+  mergeMap,
+  tap,
+  throwError,
+} from 'rxjs';
 import { CandlestickSeries, Chart, ChartGroup } from '../Chart/components/Charts';
 import { executeCommand, registerCommand } from '../CommandCenter';
 import { showForm } from '../Form';
@@ -167,6 +177,7 @@ registerCommand('fetchOHLCV', async (params) => {
 
   terminal$
     .pipe(
+      filter((x): x is Exclude<typeof x, null> => !!x),
       first(),
       tap(() => Toast.info(`开始拉取 ${datasource_id} / ${product_id} / ${period_in_sec} 历史数据...`)),
       mergeMap((terminal) =>

diff --git a/ui/web/src/modules/Market/SearchButton.tsx b/ui/web/src/modules/Market/SearchButton.tsx
@@ -2,7 +2,7 @@ import { Button, Descriptions, Modal, Space, Typography } from '@douyinfe/semi-u
 import { JSONSchema7 } from 'json-schema';
 import { useObservable, useObservableState } from 'observable-hooks';
 import React, { useMemo, useState } from 'react';
-import { defer, first, mergeMap, of, shareReplay, switchMap } from 'rxjs';
+import { defer, filter, first, mergeMap, of, shareReplay, switchMap } from 'rxjs';
 import { executeCommand } from '../CommandCenter';
 import { Form } from '../Form';
 import { terminal$ } from '../Terminals';
@@ -20,7 +20,7 @@ const PERIOD_IN_SEC_TO_LABEL: Record<number, string> = {
 };
 
 export const datasourceIds$ = defer(() => terminal$).pipe(
-  switchMap((terminal) => terminal.datasourceIds$),
+  switchMap((terminal) => terminal?.datasourceIds$ ?? of([])),
   shareReplay(1),
 );
 
@@ -44,6 +44,7 @@ export const SearchButton = React.memo(() => {
       datasource_id
         ? terminal$.pipe(
             //
+            filter((x): x is Exclude<typeof x, null> => !!x),
             first(),
             mergeMap((terminal) => terminal.queryProducts({ datasource_id })),
           )

diff --git a/ui/web/src/modules/Order/ManualTradePanel.tsx b/ui/web/src/modules/Order/ManualTradePanel.tsx
@@ -2,7 +2,7 @@ import { Button, Space, Toast } from '@douyinfe/semi-ui';
 import { IOrder, OrderDirection, OrderType } from '@yuants/protocol';
 import { useObservable, useObservableState } from 'observable-hooks';
 import { useState } from 'react';
-import { first, mergeMap, of } from 'rxjs';
+import { filter, first, mergeMap, of } from 'rxjs';
 import { accountIds$ } from '../AccountInfo/model';
 import { Form } from '../Form';
 import { registerPage } from '../Pages';
@@ -24,6 +24,7 @@ registerPage('ManualTradePanel', () => {
     mergeMap(([account_id]) =>
       account_id
         ? terminal$.pipe(
+            filter((x): x is Exclude<typeof x, null> => !!x),
             first(),
             mergeMap((terminal) => terminal.queryProducts({ datasource_id: account_id })),
           )
@@ -93,6 +94,7 @@ registerPage('ManualTradePanel', () => {
           order &&
             terminal$
               .pipe(
+                filter((x): x is Exclude<typeof x, null> => !!x),
                 first(),
                 mergeMap((terminal) => terminal.submitOrder(order)),
               )
@@ -128,6 +130,7 @@ registerPage('ManualTradePanel', () => {
           cancelFormData &&
             terminal$
               .pipe(
+                filter((x): x is Exclude<typeof x, null> => !!x),
                 first(),
                 mergeMap((terminal) => terminal.cancelOrder(cancelFormData as IOrder)),
               )

diff --git a/ui/web/src/modules/Products/ProductList.tsx b/ui/web/src/modules/Products/ProductList.tsx
@@ -5,7 +5,7 @@ import { IProduct } from '@yuants/protocol';
 import { useObservable, useObservableState } from 'observable-hooks';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { combineLatest, first, mergeMap, tap, toArray } from 'rxjs';
+import { EMPTY, combineLatest, filter, first, mergeMap, tap, toArray } from 'rxjs';
 import { executeCommand } from '../CommandCenter';
 import Form, { showForm } from '../Form';
 import { SearchButton } from '../Market/SearchButton';
@@ -25,8 +25,8 @@ registerPage('ProductList', () => {
       combineLatest([terminal$, input$]).pipe(
         //
         mergeMap(([terminal, [searchFormData]]) =>
-          terminal
-            .queryDataRecords<IProduct>({
+          (
+            terminal?.queryDataRecords<IProduct>({
               type: 'product',
               tags: {
                 datasource_id: searchFormData.datasource_id || undefined,
@@ -40,11 +40,11 @@ registerPage('ProductList', () => {
                   ['tags.product_id', 1],
                 ],
               },
-            })
-            .pipe(
-              //
-              toArray(),
-            ),
+            }) ?? EMPTY
+          ).pipe(
+            //
+            toArray(),
+          ),
         ),
       ),
     [searchFormData, refreshId],
@@ -163,6 +163,7 @@ registerPage('ProductList', () => {
         onOk={() => {
           terminal$
             .pipe(
+              filter((x): x is Exclude<typeof x, null> => !!x),
               first(),
               mergeMap((terminal) => terminal.updateProducts([formData])),
               tap({

diff --git a/ui/web/src/modules/Products/model.ts b/ui/web/src/modules/Products/model.ts
@@ -1,12 +1,12 @@
 import { IProduct } from '@yuants/protocol';
-import { Observable, defer, shareReplay, switchMap } from 'rxjs';
+import { Observable, defer, of, shareReplay, switchMap } from 'rxjs';
 import { terminal$ } from '../Terminals';
 
 export const useProducts = (() => {
   const hub: Record<string, Observable<IProduct[]>> = {};
   return (datasource_id: string) =>
     (hub[datasource_id] ??= defer(() => terminal$).pipe(
-      switchMap((terminal) => terminal.useProducts(datasource_id)),
+      switchMap((terminal) => terminal?.useProducts(datasource_id) ?? of([])),
       shareReplay(1),
     ));
 })();
diff --git a/ui/web/src/modules/PullSourceRelations/PullSourceRelationList.tsx b/ui/web/src/modules/PullSourceRelations/PullSourceRelationList.tsx
@@ -5,7 +5,7 @@ import { IDataRecord } from '@yuants/protocol';
 import { JSONSchema7 } from 'json-schema';
 import { useObservable, useObservableState } from 'observable-hooks';
 import { useState } from 'react';
-import { combineLatest, filter, first, mergeMap, tap, toArray } from 'rxjs';
+import { EMPTY, combineLatest, filter, first, mergeMap, tap, toArray } from 'rxjs';
 import { executeCommand } from '../CommandCenter';
 import { showForm } from '../Form';
 import { registerPage } from '../Pages';
@@ -84,8 +84,8 @@ registerPage('PullSourceRelationList', () => {
       combineLatest([terminal$, input$]).pipe(
         //
         mergeMap(([terminal, [searchFormData]]) =>
-          terminal
-            .queryDataRecords<IPullSourceRelation>({
+          (
+            terminal?.queryDataRecords<IPullSourceRelation>({
               type: 'pull_source_relation',
               tags: {},
               options: {
@@ -95,25 +95,23 @@ registerPage('PullSourceRelationList', () => {
                   ['origin.period_in_sec', 1],
                 ],
               },
-            })
-            .pipe(
-              filter(
-                (record) =>
-                  !searchFormData.datasource_id ||
-                  record.origin.datasource_id === searchFormData.datasource_id,
-              ),
-              filter(
-                (record) =>
-                  !searchFormData.product_id || record.origin.product_id === searchFormData.product_id,
-              ),
-              filter(
-                (record) =>
-                  !searchFormData.period_in_sec ||
-                  record.origin.period_in_sec === searchFormData.period_in_sec,
-              ),
-              //
-              toArray(),
+            }) ?? EMPTY
+          ).pipe(
+            filter(
+              (record) =>
+                !searchFormData.datasource_id || record.origin.datasource_id === searchFormData.datasource_id,
             ),
+            filter(
+              (record) =>
+                !searchFormData.product_id || record.origin.product_id === searchFormData.product_id,
+            ),
+            filter(
+              (record) =>
+                !searchFormData.period_in_sec || record.origin.period_in_sec === searchFormData.period_in_sec,
+            ),
+            //
+            toArray(),
+          ),
         ),
       ),
     [searchFormData, refreshId],
@@ -124,6 +122,7 @@ registerPage('PullSourceRelationList', () => {
     const record = mapPullSourceRelationToDataRecord(formData);
     terminal$
       .pipe(
+        filter((x): x is Exclude<typeof x, null> => !!x),
         first(),
         mergeMap((terminal) => terminal.updateDataRecords([record])),
         tap({
@@ -186,6 +185,7 @@ registerPage('PullSourceRelationList', () => {
                   const next = mapPullSourceRelationToDataRecord({ ...record.origin, disabled: v });
                   terminal$
                     .pipe(
+                      filter((x): x is Exclude<typeof x, null> => !!x),
                       first(),
                       mergeMap((terminal) => terminal.updateDataRecords([next])),
                       tap({
@@ -231,6 +231,7 @@ registerPage('PullSourceRelationList', () => {
                     terminal$
                       .pipe(
                         //
+                        filter((x): x is Exclude<typeof x, null> => !!x),
                         first(),
                         mergeMap((terminal) =>
                           terminal.removeDataRecords({