Table drag drop (#1067)

* fix application of table settings

* tidy up table examples in showcase

* befin to re-introduce col headings

* move table headers into separate component

* move header functions into separate hook

* rename datagrid-typed to tbale-types

* remove datagrid

* fix type issues

vuu-ui/packages/vuu-codemirror/src/suggestion-utils.ts

@@ -1,5 +1,5 @@
 import { AnnotationType, Completion, EditorView } from "@finos/vuu-codemirror";
-import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { ColumnDescriptor } from "@finos/vuu-table-types";
 import { isNumericColumn } from "@finos/vuu-utils";
 
 export interface VuuCompletion extends Completion {

vuu-ui/packages/vuu-data-ag-grid/package.json

@@ -12,7 +12,7 @@
     "@finos/vuu-data": "0.0.26",
     "@finos/vuu-data-react": "0.0.26",
     "@finos/vuu-data-types": "0.0.26",
-    "@finos/vuu-datagrid-types": "0.0.26",
+    "@finos/vuu-table-types": "0.0.26",
     "@finos/vuu-filter-types": "0.0.26",
     "@finos/vuu-protocol-types": "0.0.26",
     "@finos/vuu-utils": "0.0.26"

vuu-ui/packages/vuu-data-ag-grid/src/AgGridColumnUtils.ts

@@ -1,4 +1,4 @@
-import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { ColumnDescriptor } from "@finos/vuu-table-types";
 import { VuuGroupBy } from "@finos/vuu-protocol-types";
 import { FilterDataProvider } from "./FilterDataProvider";
 

vuu-ui/packages/vuu-data-ag-grid/src/useViewportRowModel.ts

@@ -4,6 +4,7 @@ import {
   isVisualLinksAction,
   MenuRpcResponse,
   RemoteDataSource,
+  RpcResponseHandler,
   VuuFeatureMessage,
   VuuUIMessageInRPCEditReject,
   VuuUIMessageInRPCEditResponse,
@@ -18,7 +19,7 @@ import {
   VuuServerMenuOptions,
 } from "@finos/vuu-data-react";
 
-import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { ColumnDescriptor } from "@finos/vuu-table-types";
 import { VuuGroupBy, VuuMenu, VuuTable } from "@finos/vuu-protocol-types";
 import { buildColumnMap, itemsOrOrderChanged } from "@finos/vuu-utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -92,12 +93,7 @@ export interface ViewportRowModelHookProps {
   columns?: ColumnDescriptor[];
   dataSource: RemoteDataSource;
   onFeatureEnabled?: (message: VuuFeatureMessage) => void;
-  onRpcResponse?: (
-    response:
-      | MenuRpcResponse
-      | VuuUIMessageInRPCEditReject
-      | VuuUIMessageInRPCEditResponse
-  ) => void;
+  onRpcResponse?: RpcResponseHandler;
   vuuMenuActionHandler?: VuuMenuActionHandler;
 }
 
@@ -144,15 +140,8 @@ export const useViewportRowModel = ({
     }),
     []
   );
-  const handleRpcResponse = useCallback(
-    (
-      response:
-        | MenuRpcResponse
-        | VuuUIMessageInRPCEditReject
-        | VuuUIMessageInRPCEditResponse
-    ) => {
-      onRpcResponse?.(response);
-    },
+  const handleRpcResponse = useCallback<RpcResponseHandler>(
+    (response) => onRpcResponse?.(response) ?? false,
     [onRpcResponse]
   );
 

vuu-ui/packages/vuu-data-react/package.json

@@ -10,7 +10,7 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@finos/vuu-datagrid-types": "0.0.26",
+    "@finos/vuu-table-types": "0.0.26",
     "@finos/vuu-filter-types": "0.0.26",
     "@finos/vuu-popups": "0.0.26",
     "@finos/vuu-protocol-types": "0.0.26"

vuu-ui/packages/vuu-data-react/src/hooks/useLookupValues.ts

@@ -2,7 +2,7 @@ import {
   ColumnDescriptor,
   ListOption,
   LookupTableDetails,
-} from "@finos/vuu-datagrid-types";
+} from "@finos/vuu-table-types";
 import { RemoteDataSource } from "@finos/vuu-data";
 import { useShellContext } from "@finos/vuu-shell";
 import {

vuu-ui/packages/vuu-data-react/src/hooks/useVuuMenuActions.ts

@@ -2,6 +2,7 @@ import {
   DataSource,
   DataSourceVisualLinkCreatedMessage,
   MenuRpcResponse,
+  ViewportRpcResponse,
   VuuUIMessageInRPCEditReject,
   VuuUIMessageInRPCEditResponse,
 } from "@finos/vuu-data";
@@ -152,6 +153,7 @@ export type RpcResponseHandler = (
     | MenuRpcResponse
     | VuuUIMessageInRPCEditReject
     | VuuUIMessageInRPCEditResponse
+    | ViewportRpcResponse
 ) => void;
 
 export interface VuuMenuActionHookProps {

vuu-ui/packages/vuu-data-test/package.json

@@ -10,6 +10,6 @@
   },
   "devDependencies": {
     "@finos/vuu-data": "0.0.26",
-    "@finos/vuu-datagrid-types": "0.0.26"
+    "@finos/vuu-table-types": "0.0.26"
   }
 }

vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts

@@ -17,6 +17,7 @@ import {
   VuuRange,
   VuuRowDataItemType,
 } from "@finos/vuu-protocol-types";
+import { SelectionItem } from "@finos/vuu-table-types";
 import { metadataKeys } from "@finos/vuu-utils";
 import { Table } from "./Table";
 
@@ -82,22 +83,25 @@ export class TickingArrayDataSource extends ArrayDataSource {
   }
 
   private getSelectedRows() {
-    return this.selectedRows.reduce<DataSourceRow[]>((rows, selected) => {
-      if (Array.isArray(selected)) {
-        selected.forEach((sel) => {
-          const row = this.data[sel];
+    return this.selectedRows.reduce<DataSourceRow[]>(
+      (rows: DataSourceRow[], selected: SelectionItem) => {
+        if (Array.isArray(selected)) {
+          selected.forEach((sel) => {
+            const row = this.data[sel];
+            if (row) {
+              rows.push(row);
+            }
+          });
+        } else {
+          const row = this.data[selected];
           if (row) {
             rows.push(row);
           }
-        });
-      } else {
-        const row = this.data[selected];
-        if (row) {
-          rows.push(row);
         }
-      }
-      return rows;
-    }, []);
+        return rows;
+      },
+      []
+    );
   }
 
   applyEdit(
@@ -113,7 +117,7 @@ export class TickingArrayDataSource extends ArrayDataSource {
 
   async rpcCall<T extends RpcResponse = RpcResponse>(
     rpcRequest: Omit<ClientToServerViewportRpcCall, "vpId">
-  ) {
+  ): Promise<T | undefined> {
     const rpcService = this.#rpcServices?.find(
       (service) =>
         service.rpcName ===

vuu-ui/packages/vuu-data-test/src/basket/basket-module.ts

@@ -3,7 +3,7 @@ import {
   VuuMenu,
   VuuRowDataItemType,
 } from "@finos/vuu-protocol-types";
-import { ColumnMap, metadataKeys } from "@finos/vuu-utils";
+import { ColumnMap } from "@finos/vuu-utils";
 import pricesTable from "./reference-data/prices";
 import { joinTables, Table } from "../Table";
 import { TickingArrayDataSource } from "../TickingArrayDataSource";
@@ -33,8 +33,6 @@ const tableMaps: Record<BasketsTableName, ColumnMap> = {
   priceStrategyType: buildDataColumnMap("priceStrategyType"),
 };
 
-const { KEY } = metadataKeys;
-
 /**
  * BasketConstituent
  */
@@ -266,8 +264,11 @@ const createDataSource = (tableName: BasketsTableName) => {
   });
 };
 
+const nullTypeaheadHook = async () => [];
+
 const basketModule: VuuModule<BasketsTableName> = {
   createDataSource,
+  typeaheadHook: () => nullTypeaheadHook,
 };
 
 export default basketModule;

vuu-ui/packages/vuu-data-test/src/basket/reference-data/prices.ts

@@ -60,7 +60,7 @@ for (const [,,,lastTrade,ric] of basketConstituentData) {
     last,
     open,
     phase,
-    ric,
+    ric as string,
     scenario,
   ]);
 

vuu-ui/packages/vuu-data-test/src/generatorTemplate.ts

@@ -1,4 +1,4 @@
-import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { ColumnDescriptor } from "@finos/vuu-table-types";
 import { ColumnMap } from "@finos/vuu-utils";
 import { VuuDataRow } from "@finos/vuu-protocol-types";
 import { ColumnGeneratorFn, RowGeneratorFactory } from "./vuu-row-generator";

vuu-ui/packages/vuu-data-test/src/index.ts

@@ -1,4 +1,3 @@
-export * from "./createArrayDataSource";
 export * from "./schemas";
 export * from "./TickingArrayDataSource";
 export * from "./vuu-row-generator";

vuu-ui/showcase/src/examples/utils/makeSuggestions.ts → vuu-ui/packages/vuu-data-test/src/makeSuggestions.ts

@@ -1,21 +1,16 @@
-import { ArrayDataSource } from "@finos/vuu-data";
-import { buildColumnMap, DataItem } from "@finos/vuu-utils";
+import { DataItem } from "@finos/vuu-utils";
+import { Table } from "./Table";
 
-const cachedValues = new Map<ArrayDataSource, Map<string, DataItem[]>>();
+const cachedValues = new Map<Table, Map<string, DataItem[]>>();
 
-const getUniqueValues = (
-  dataSource: ArrayDataSource,
-  column: string,
-  pattern = ""
-) => {
+const getUniqueValues = (table: Table, column: string, pattern = "") => {
   let uniqueValues;
-  const cachedEntry = cachedValues.get(dataSource);
+  const cachedEntry = cachedValues.get(table);
   if (cachedEntry && cachedEntry.has(column)) {
     uniqueValues = cachedEntry.get(column) as DataItem[];
   } else {
-    const { columns, data } = dataSource;
-    const columnMap = buildColumnMap(columns);
-    const key = columnMap[column];
+    const { data, map } = table;
+    const key = map[column];
     uniqueValues = [];
     const set = new Set();
     for (const row of data) {
@@ -28,7 +23,7 @@ const getUniqueValues = (
     if (cachedEntry) {
       cachedEntry.set(column, uniqueValues);
     } else {
-      cachedValues.set(dataSource, new Map([[column, uniqueValues]]));
+      cachedValues.set(table, new Map([[column, uniqueValues]]));
     }
   }
   return pattern
@@ -37,11 +32,11 @@ const getUniqueValues = (
 };
 
 export const makeSuggestions = (
-  dataSource: ArrayDataSource,
+  table: Table,
   column: string,
   pattern?: string
 ) => {
-  const uniqueValues = getUniqueValues(dataSource, column, pattern);
+  const uniqueValues = getUniqueValues(table, column, pattern);
   if (uniqueValues.length > 20) {
     return uniqueValues?.slice(0, 20).map((v) => v.toString());
   } else {