Merge remote-tracking branch 'upstream/main' into sync-mains-pull

# Conflicts: # vuu-ui/packages/vuu-data-test/src/basket/basket-schemas.ts # vuu-ui/packages/vuu-data-test/src/basket/reference-data/basketTrading.ts # vuu-ui/packages/vuu-data/src/remote-data-source.ts # vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts # vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts # vuu-ui/packages/vuu-layout/src/layout-persistence/index.ts # vuu-ui/packages/vuu-layout/src/layout-persistence/useLayoutContextMenuItems.tsx # vuu-ui/packages/vuu-layout/test/layout-persistence/LocalLayoutPersistenceManager.test.ts # vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.tsx # vuu-ui/packages/vuu-shell/src/layout-management/layoutTypes.ts # vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx # vuu-ui/packages/vuu-shell/src/shell.tsx # vuu-ui/packages/vuu-theme/css/components/button.css # vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts # vuu-ui/sample-apps/app-vuu-basket-trader/src/App.tsx # vuu-ui/sample-apps/feature-basket-trading/src/VuuBasketTradingFeature.tsx # vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.tsx # vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts # vuu-ui/showcase/src/examples/UiControls/InstrumentPicker.examples.tsx # vuu-ui/showcase/src/examples/VuuFeatures/BasketSelector.examples.tsx
ScottLogic · Nov 1, 2023 · 47958bb · 47958bb
2 parents 88baa47 + fbeb82a
commit 47958bb
Show file tree

Hide file tree

Showing 27 changed files with 465 additions and 249 deletions.
diff --git a/vuu-ui/packages/vuu-data-test/src/basket/basket-schemas.ts b/vuu-ui/packages/vuu-data-test/src/basket/basket-schemas.ts
@@ -6,6 +6,7 @@ export type BasketsTableName =
   | "basketConstituent"
   | "basketTrading"
   | "basketTradingConstituent"
+  | "basketTrdConsPrices"
   | "priceStrategyType";
 
 export const schemas: Readonly<
@@ -67,12 +68,41 @@ export const schemas: Readonly<
       { name: "description", serverDataType: "string" },
       { name: "instanceId", serverDataType: "string" },
       { name: "instanceIdRic", serverDataType: "string" },
+      { name: "limitPrice", serverDataType: "double" },
+      { name: "notionalLocal", serverDataType: "double" },
+      { name: "notionalUsd", serverDataType: "double" },
+      { name: "pctFilled", serverDataType: "double" },
+      { name: "priceSpread", serverDataType: "int" },
+      { name: "priceStrategyId", serverDataType: "int" },
+      { name: "quantity", serverDataType: "long" },
+      { name: "ric", serverDataType: "string" },
+      { name: "side", serverDataType: "string" },
+      { name: "venue", serverDataType: "string" },
+      { name: "weighting", serverDataType: "double" },
+    ],
+    key: "instanceIdRic",
+    table: { module: "BASKET", table: "basketTradingConstituent" },
+  },
+  basketTrdConsPrices: {
+    columns: [
+      { name: "algo", serverDataType: "string" },
+      { name: "algoParams", serverDataType: "string" },
+      { name: "ask", serverDataType: "double" },
+      { name: "askSize", serverDataType: "double" },
+      { name: "basketId", serverDataType: "string" },
+      { name: "bid", serverDataType: "double" },
+      { name: "bidSize", serverDataType: "double" },
+      { name: "close", serverDataType: "double" },
+      { name: "description", serverDataType: "string" },
+      { name: "instanceId", serverDataType: "string" },
+      { name: "instanceIdRic", serverDataType: "string" },
       { name: "last", serverDataType: "double" },
       { name: "limitPrice", serverDataType: "double" },
       { name: "notionalLocal", serverDataType: "double" },
       { name: "notionalUsd", serverDataType: "double" },
-      { name: "offer", serverDataType: "double" },
+      { name: "open", serverDataType: "double" },
       { name: "pctFilled", serverDataType: "double" },
+      { name: "phase", serverDataType: "string" },
       { name: "priceSpread", serverDataType: "int" },
       { name: "priceStrategyId", serverDataType: "int" },
       { name: "quantity", serverDataType: "long" },

diff --git a/vuu-ui/packages/vuu-data-test/src/basket/reference-data/basketTrading.ts b/vuu-ui/packages/vuu-data-test/src/basket/reference-data/basketTrading.ts
@@ -2,6 +2,9 @@ import { VuuDataRow } from "@finos/vuu-protocol-types";
 import { ColumnMap } from "@finos/vuu-utils";
 import { getSchema } from "../../schemas";
 
+import baskets, { BasketColumnMap } from "./basket";
+import basketConstituents from "./basketConstituent";
+
 const schema = getSchema("basketTrading");
 
 export const BasketTradingColumnMap = Object.values(
@@ -11,6 +14,32 @@ export const BasketTradingColumnMap = Object.values(
   return map;
 }, {});
 
+let instance = 1;
+
 const data: VuuDataRow[] = [];
 
+const createBasket = (basketId: string, basketName: string) => {
+  const key = BasketColumnMap.basketId;
+  const basketRow = baskets.find((basket) => basket[key] === basketId);
+  const basketTradingRow = [
+    basketId,
+    basketName,
+    0,
+    0,
+    `steve-${instance++}`,
+    "OFF-MARKET",
+    0,
+    0,
+    0,
+  ];
+  data.push(basketTradingRow);
+};
+
+createBasket(".FTSE", "Steve FTSE 1");
+createBasket(".FTSE", "Steve FTSE 2");
+createBasket(".FTSE", "Steve FTSE 3");
+createBasket(".FTSE", "Steve FTSE 4");
+createBasket(".FTSE", "Steve FTSE 5");
+createBasket(".FTSE", "Steve FTSE 6");
+
 export default data;
diff --git a/vuu-ui/packages/vuu-data/src/array-data-source/array-data-source.ts b/vuu-ui/packages/vuu-data/src/array-data-source/array-data-source.ts
@@ -201,34 +201,41 @@ export class ArrayDataSource
     this.status = "subscribed";
     this.lastRangeServed = { from: 0, to: 0 };
 
-    if (aggregations || columns || filter || groupBy || sort) {
+    let config = this.#config;
+
+    const hasConfigProps = aggregations || columns || filter || groupBy || sort;
+    if (hasConfigProps) {
       if (range) {
         this.#range = range;
       }
-      this.config = {
-        ...this.#config,
+      config = {
+        ...config,
         aggregations: aggregations || this.#config.aggregations,
         columns: columns || this.#config.columns,
         filter: filter || this.#config.filter,
         groupBy: groupBy || this.#config.groupBy,
         sort: sort || this.#config.sort,
       };
-    } else {
-      this.clientCallback?.({
-        ...this.#config,
-        type: "subscribed",
-        clientViewportId: this.viewport,
-        range: this.#range,
-        tableSchema: this.tableSchema,
-      });
+    }
 
+    this.clientCallback?.({
+      ...config,
+      type: "subscribed",
+      clientViewportId: this.viewport,
+      range: this.#range,
+      tableSchema: this.tableSchema,
+    });
+
+    if (hasConfigProps) {
+      // invoke setter to action config
+      this.config = config;
+    } else {
       this.clientCallback({
         clientViewportId: this.viewport,
         mode: "size-only",
         type: "viewport-update",
         size: this.#data.length,
       });
-
       if (range) {
         // set range and trigger dispatch of initial rows
         this.range = range;
@@ -570,8 +577,8 @@ export class ArrayDataSource
     console.log({ row, colName, value });
   }
 
-  applyEdit(rowIndex: number, columnName: string, value: VuuColumnDataType) {
-    console.log(`ArrayDataSource applyEdit ${rowIndex} ${columnName} ${value}`);
+  applyEdit(row: DataSourceRow, columnName: string, value: VuuColumnDataType) {
+    console.log(`ArrayDataSource applyEdit ${row[0]} ${columnName} ${value}`);
     return true;
   }
 

diff --git a/vuu-ui/packages/vuu-data/src/remote-data-source.ts b/vuu-ui/packages/vuu-data/src/remote-data-source.ts
@@ -129,7 +129,6 @@ export class RemoteDataSource
     }: SubscribeProps,
     callback: SubscribeCallback
   ) {
-    console.log(`%csubscribe`, "color:red;font-weight:bold;");
     this.clientCallback = callback;
 
     if (aggregations || columns || filter || groupBy || sort) {
@@ -213,16 +212,16 @@ export class RemoteDataSource
   };
 
   unsubscribe() {
-    console.log("%cunsubscribe", "color:red;font-weight:bold;");
-
     info?.(`unsubscribe #${this.viewport}`);
     if (this.viewport) {
       this.server?.unsubscribe(this.viewport);
     }
     this.server?.destroy(this.viewport);
+    this.server = null;
     this.removeAllListeners();
     this.status = "unsubscribed";
     this.viewport = undefined;
+    this.range = { from: 0, to: 0 };
   }
 
   suspend() {
@@ -618,10 +617,6 @@ export class RemoteDataSource
   }
 
   applyEdit(row: DataSourceRow, columnName: string, value: VuuColumnDataType) {
-    console.log(
-      `ArrayDataSource applyEdit ${row.join(",")} ${columnName} ${value}`
-    );
-
     this.menuRpcCall({
       rowKey: row[KEY],
       field: columnName,

diff --git a/vuu-ui/packages/vuu-data/src/server-proxy/server-proxy.ts b/vuu-ui/packages/vuu-data/src/server-proxy/server-proxy.ts
@@ -506,8 +506,6 @@ export class ServerProxy {
       | WithRequestId<VuuRpcRequest>
       | WithRequestId<ClientToServerMenuRPC>
   ) {
-    debug?.(`handleMessageFromClient: ${message.type}`);
-
     if (isViewportMessage(message)) {
       if (message.type === "disable") {
         // Viewport may already have been unsubscribed

diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts
@@ -116,10 +116,8 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
     return new Promise((resolve) => {
       const applicationLayout = getLocalEntity<LayoutJSON>(this.#urlKey);
       if (applicationLayout) {
-        console.log(applicationLayout);
         resolve(applicationLayout);
       } else {
-        console.log(defaultLayout);
         resolve(defaultLayout);
       }
     });

diff --git a/vuu-ui/packages/vuu-popups/src/popup/Popup.tsx b/vuu-ui/packages/vuu-popups/src/popup/Popup.tsx
@@ -1,5 +1,4 @@
 import cx from "classnames";
-import { useThemeAttributes } from "@finos/vuu-shell";
 import { HTMLAttributes, RefObject } from "react";
 import { Position, useAnchoredPosition } from "./useAnchoredPosition";
 

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
@@ -28,9 +28,9 @@ export const LayoutManagementContext = React.createContext<{
   loadLayoutById: (id: string) => void;
 }>({
   layoutMetadata: [],
-  saveLayout: () => null,
+  saveLayout: () => undefined,
   applicationLayout: defaultLayout,
-  saveApplicationLayout: () => null,
+  saveApplicationLayout: () => undefined,
   loadLayoutById: () => defaultLayout,
 });
 

diff --git a/vuu-ui/packages/vuu-shell/src/shell.tsx b/vuu-ui/packages/vuu-shell/src/shell.tsx
@@ -6,7 +6,6 @@ import {
   ReactNode,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
 } from "react";
 import {

diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.tsx
@@ -70,8 +70,6 @@ export const BackgroundCell = ({ column, row }: TableCellProps) => {
   );
 };
 
-console.log("register BackgroundCellNext");
-
 registerComponent("background-next", BackgroundCell, "cell-renderer", {
   description: "Change background color of cell when value changes",
   label: "Background Flash",

diff --git a/vuu-ui/packages/vuu-table/src/table/cell-renderers/json-cell/JsonCell.tsx b/vuu-ui/packages/vuu-table/src/table/cell-renderers/json-cell/JsonCell.tsx
@@ -51,7 +51,6 @@ const JsonCell = ({ column, row }: TableCellProps) => {
   }
 };
 
-console.log("register JsonCell");
 registerComponent("json", JsonCell, "cell-renderer", {
   description: "JSON formatter",
   label: "JSON formatter",

diff --git a/vuu-ui/packages/vuu-theme/css/components/button.css b/vuu-ui/packages/vuu-theme/css/components/button.css
@@ -14,6 +14,10 @@
     --saltButton-borderColor: var(--salt-actionable-primary-background-hover)
 }
 
+.saltButton-secondary {
+    --saltButton-borderStyle: none;
+}
+
 .saltButton:focus-visible {
     outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
     outline-style: dashed;

diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/SearchCell.tsx b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/SearchCell.tsx
@@ -24,8 +24,6 @@ export const SearchCell = ({
   );
 };
 
-console.log("register SearchCell");
-
 registerComponent("search-cell", SearchCell, "cell-renderer", {
   serverDataType: "private",
 });
diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts
@@ -32,7 +32,7 @@ export const useInstrumentPicker = ({
   defaultIsOpen,
   isOpen: isOpenProp,
   itemToString = defaultItemToString(columns, columnMap),
-  onOpenChange: onOpenChangeProp,
+  onOpenChange,
   onSelect,
   searchColumns,
 }: InstrumentPickerHookProps) => {
@@ -52,9 +52,12 @@ export const useInstrumentPicker = ({
   const handleOpenChange = useCallback<OpenChangeHandler>(
     (open, closeReason) => {
       setIsOpen(open);
-      onOpenChangeProp?.(open, closeReason);
+      onOpenChange?.(open, closeReason);
+      if (open === false) {
+        dataSource.unsubscribe();
+      }
     },
-    [onOpenChangeProp, setIsOpen]
+    [dataSource, onOpenChange, setIsOpen]
   );
 
   const handleInputChange = useCallback(
@@ -82,11 +85,10 @@ export const useInstrumentPicker = ({
     (row) => {
       const value = itemToString(row);
       setValue(value);
-      setIsOpen(false);
       onSelect(row);
-      onOpenChangeProp?.(false, "select");
+      handleOpenChange?.(false, "select");
     },
-    [itemToString, onOpenChangeProp, onSelect, setIsOpen]
+    [handleOpenChange, itemToString, onSelect]
   );
 
   const inputProps = {

diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.tsx b/vuu-ui/packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.tsx
@@ -4,7 +4,13 @@ import { registerComponent } from "@finos/vuu-layout";
 import { TableNext, TableProps } from "@finos/vuu-table";
 import { FormField, FormFieldLabel, Input } from "@salt-ds/core";
 import cx from "classnames";
-import { FormEvent, HTMLAttributes, useCallback, useState } from "react";
+import {
+  FormEvent,
+  HTMLAttributes,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import "./SearchCell";
 
 import "./InstrumentSearch.css";
@@ -31,7 +37,8 @@ const defaultTableConfig: TableConfig = {
 export interface InstrumentSearchProps extends HTMLAttributes<HTMLDivElement> {
   TableProps?: Partial<TableProps>;
   dataSource: DataSource;
-  searchColumn?: string;
+  placeHolder?: string;
+  searchColumns?: string[];
 }
 
 const searchIcon = <span data-icon="search" />;
@@ -40,9 +47,16 @@ export const InstrumentSearch = ({
   TableProps,
   className,
   dataSource,
-  searchColumn = "description",
+  placeHolder,
+  searchColumns = ["description"],
   ...htmlAttributes
 }: InstrumentSearchProps) => {
+  const baseFilterPattern = useMemo(
+    // TODO make this contains once server supports it
+    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    [searchColumns]
+  );
+
   const [searchState, setSearchState] = useState<{
     searchText: string;
     filter: string;
@@ -51,21 +65,16 @@ export const InstrumentSearch = ({
   const handleChange = useCallback(
     (evt: FormEvent<HTMLInputElement>) => {
       const { value } = evt.target as HTMLInputElement;
-      const filter = `name starts "${value}"`;
+      const filter = baseFilterPattern.replaceAll("__VALUE__", value);
       setSearchState({
         searchText: value,
         filter,
       });
       dataSource.filter = {
         filter,
-        filterStruct: {
-          op: "starts",
-          column: searchColumn,
-          value,
-        },
       };
     },
-    [dataSource, searchColumn]
+    [baseFilterPattern, dataSource]
   );
 
   return (
@@ -74,12 +83,14 @@ export const InstrumentSearch = ({
         <FormFieldLabel></FormFieldLabel>
         <Input
           endAdornment={searchIcon}
+          placeholder={placeHolder}
           value={searchState.searchText}
           onChange={handleChange}
         />
       </FormField>
 
       <TableNext
+        id="instrument-search"
         rowHeight={25}
         config={defaultTableConfig}
         renderBufferSize={100}