UI fixes drag drop

vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts

@@ -54,6 +54,8 @@ import { buildDataToClientMap, toClientRow } from "./array-data-utils";
 import { collapseGroup, expandGroup, GroupMap, groupRows } from "./group-utils";
 import { sortRows } from "./sort-utils";
 
+const { debug, info } = logger("ArrayDataSource");
+
 const { KEY } = metadataKeys;
 
 export interface ArrayDataSourceConstructorProps
@@ -64,7 +66,6 @@ export interface ArrayDataSourceConstructorProps
   keyColumn?: string;
   rangeChangeRowset?: "delta" | "full";
 }
-const { debug } = logger("ArrayDataSource");
 
 const toDataSourceRow =
   (key: number) =>
@@ -232,33 +233,44 @@ export class ArrayDataSource
       if (range) {
         // set range and trigger dispatch of initial rows
         this.range = range;
+        this.sendRowsToClient();
       } else if (this.#range !== NULL_RANGE) {
         this.sendRowsToClient();
       }
     }
   }
 
   unsubscribe() {
-    console.log("unsubscribe noop");
+    console.log(`unsubscribe noop`);
   }
 
   suspend() {
-    // console.log("noop");
+    console.log(`suspend #${this.viewport}, current status ${this.#status}`);
+    info?.(`suspend #${this.viewport}, current status ${this.#status}`);
+    this.#status = "suspended";
+
     return this;
   }
 
   resume() {
-    // console.log("resume noop");
+    console.log(`resume #${this.viewport}, current status ${this.#status}`);
+    // const isDisabled = this.#status.startsWith("disabl");
+    const isSuspended = this.#status === "suspended";
+    info?.(`resume #${this.viewport}, current status ${this.#status}`);
+    console.log(`resume noop`);
+    if (isSuspended) {
+      this.#status = "subscribed";
+    }
     return this;
   }
 
   disable() {
-    // console.log("disable noop");
+    console.log(`disable noop`);
     return this;
   }
 
   enable() {
-    // console.log("enable noop");
+    console.log(`enable noop`);
     return this;
   }
 

vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts

@@ -263,7 +263,6 @@ export class VuuDataSource
 
   resume() {
     console.log(`resume #${this.viewport}, current status ${this.#status}`);
-
     const isDisabled = this.#status.startsWith("disabl");
     const isSuspended = this.#status === "suspended";
     info?.(`resume #${this.viewport}, current status ${this.#status}`);

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

@@ -1,21 +1,24 @@
 import {
   ArrayDataSource,
-  ArrayDataSourceConstructorProps
+  ArrayDataSourceConstructorProps,
 } from "@finos/vuu-data-local";
 import {
-  DataSourceRow, MenuRpcResponse, RpcResponse,
+  DataSourceRow,
+  MenuRpcResponse,
+  RpcResponse,
   SelectionItem,
   SubscribeCallback,
-  SubscribeProps, VuuUIMessageInRPCEditReject,
-  VuuUIMessageInRPCEditResponse
+  SubscribeProps,
+  VuuUIMessageInRPCEditReject,
+  VuuUIMessageInRPCEditResponse,
 } from "@finos/vuu-data-types";
 import {
   ClientToServerEditRpc,
   ClientToServerMenuRPC,
   ClientToServerViewportRpcCall,
   VuuMenu,
   VuuRange,
-  VuuRowDataItemType
+  VuuRowDataItemType,
 } from "@finos/vuu-protocol-types";
 import { metadataKeys } from "@finos/vuu-utils";
 import { makeSuggestions } from "./makeSuggestions";

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

@@ -91,6 +91,8 @@ function createTradingBasket(basketId: string, basketName: string) {
     (c) => c[key] === basketId
   );
 
+  const { instanceId } = tableMaps.basketTrading;
+
   constituents.forEach(([, , description, , ric, , , quantity, weighting]) => {
     const algo = "";
     const algoParams = "";
@@ -103,7 +105,6 @@ function createTradingBasket(basketId: string, basketName: string) {
     const side = "BUY";
     const venue = "venue";
 
-    const { instanceId } = tableMaps.basketTrading;
     const basketInstanceId = basketTradingRow[instanceId];
     const basketTradingConstituentRow: VuuRowDataItemType[] = [
       algo,
@@ -126,6 +127,9 @@ function createTradingBasket(basketId: string, basketName: string) {
     ];
     basketTradingConstituent.insert(basketTradingConstituentRow);
   });
+
+  // return the key
+  return basketTradingRow[instanceId] as string;
 }
 
 async function addConstituent(rpcRequest: ClientToServerViewportRpcCall) {
@@ -144,7 +148,13 @@ async function createNewBasket(rpcRequest: ClientToServerViewportRpcCall) {
   const {
     params: [basketId, basketName],
   } = rpcRequest;
-  createTradingBasket(basketId, basketName);
+  const key = createTradingBasket(basketId, basketName);
+  return {
+    action: {
+      type: "VP_CREATE_SUCCESS",
+      key,
+    },
+  };
 }
 
 //-------------------

vuu-ui/packages/vuu-layout/src/overflow-container/useOverflowContainer.ts

@@ -1,5 +1,5 @@
 import { MenuActionHandler, MenuBuilder } from "@finos/vuu-data-types";
-import { useDragDropNext as useDragDrop } from "@finos/vuu-ui-controls";
+import { useDragDrop as useDragDrop } from "@finos/vuu-ui-controls";
 import {
   isValidNumber,
   MEASURES,

vuu-ui/packages/vuu-table/src/Row.tsx

@@ -92,7 +92,6 @@ export const Row = memo(
     return (
       <div
         {...htmlAttributes}
-        aria-rowindex={row[0] + 1}
         key={`row-${row[0]}`}
         role="row"
         className={className}

vuu-ui/packages/vuu-table/src/Table.tsx

@@ -260,6 +260,7 @@ const TableCore = ({
           <div className={`${classBase}-body`}>
             {data.map((data) => (
               <Row
+                aria-rowindex={data[0] + 1}
                 columnMap={columnMap}
                 columns={columns}
                 highlighted={highlightedIndex === data[IDX]}

vuu-ui/packages/vuu-table/src/table-header/useTableHeader.ts

@@ -1,5 +1,5 @@
 import { ColumnDescriptor } from "@finos/vuu-table-types";
-import { useDragDropNext as useDragDrop } from "@finos/vuu-ui-controls";
+import { useDragDrop as useDragDrop } from "@finos/vuu-ui-controls";
 import { moveColumnTo, visibleColumnAtIndex } from "@finos/vuu-utils";
 import { MouseEventHandler, useCallback, useRef } from "react";
 import { TableHeaderProps } from "./TableHeader";

vuu-ui/packages/vuu-table/src/useTable.ts

@@ -17,7 +17,7 @@ import { MeasuredProps, MeasuredSize } from "@finos/vuu-layout";
 import { VuuRange, VuuSortType } from "@finos/vuu-protocol-types";
 import {
   DragStartHandler,
-  useDragDropNext as useDragDrop,
+  useDragDrop as useDragDrop,
 } from "@finos/vuu-ui-controls";
 import {
   applySort,
@@ -200,13 +200,6 @@ export const useTable = ({
     return [stateColumns ?? runtimeColumns, setSize];
   }, [runtimeColumns, stateColumns]);
 
-  // console.log({
-  //   config,
-  //   tableConfig,
-  //   runtimeColumns,
-  //   columns,
-  // });
-
   const columnMap = useMemo(
     () => buildColumnMap(dataSource.columns),
     [dataSource.columns]
@@ -260,7 +253,6 @@ export const useTable = ({
 
   const handleConfigEditedInSettingsPanel = useCallback(
     (tableConfig: TableConfig) => {
-      console.log(`settings changed`);
       dispatchColumnAction({
         type: "init",
         tableConfig,
@@ -661,11 +653,6 @@ export const useTable = ({
       itemQuery: ".vuuTableRow",
     });
 
-  // console.log({
-  //   tableAttributes,
-  //   config: tableConfig,
-  // });
-
   return {
     ...containerProps,
     "aria-rowcount": dataSource.size,

vuu-ui/packages/vuu-ui-controls/src/drag-drop/DragDropState.ts

@@ -1,4 +1,4 @@
-import { MouseOffset } from "./dragDropTypesNext";
+import { MouseOffset, MousePosition } from "./dragDropTypes";
 
 export class DragDropState {
   /** Distance between start (top | left) of dragged element and point where user pressed to drag */
@@ -10,9 +10,9 @@ export class DragDropState {
 
   payload: unknown = null;
 
-  constructor(evt: MouseEvent, dragElement: HTMLElement) {
+  constructor(mousePosition: MousePosition, dragElement: HTMLElement) {
     this.initialDragElement = dragElement;
-    this.mouseOffset = this.getMouseOffset(evt, dragElement);
+    this.mouseOffset = this.getMouseOffset(mousePosition, dragElement);
   }
 
   /** Used to capture a ref to the Draggable JSX.Element */
@@ -24,8 +24,11 @@ export class DragDropState {
     this.payload = payload;
   }
 
-  private getMouseOffset(evt: MouseEvent, dragElement: HTMLElement) {
-    const { clientX, clientY } = evt;
+  private getMouseOffset(
+    mousePosition: MousePosition,
+    dragElement: HTMLElement
+  ) {
+    const { clientX, clientY } = mousePosition;
     const draggableRect = dragElement.getBoundingClientRect();
 
     return {

vuu-ui/packages/vuu-ui-controls/src/drag-drop/DropIndicator.tsx

@@ -1,6 +1,6 @@
 import { Portal } from "@finos/vuu-popups";
 import { forwardRef } from "react";
-import { Rect } from "./dragDropTypesNext";
+import { Rect } from "./dragDropTypes";
 
 import "./DropIndicator.css";
 

vuu-ui/packages/vuu-ui-controls/src/drag-drop/dragDropTypesNext.ts → vuu-ui/packages/vuu-ui-controls/src/drag-drop/dragDropTypes.ts

@@ -37,6 +37,11 @@ export type Direction = "fwd" | "bwd";
 export const FWD: Direction = "fwd";
 export const BWD: Direction = "bwd";
 
+export interface MousePosition {
+  clientX: number;
+  clientY: number;
+}
+
 export interface MouseOffset {
   x: number;
   y: number;

vuu-ui/packages/vuu-ui-controls/src/drag-drop/drop-target-utils.ts

@@ -1,6 +1,6 @@
 import { orientationType } from "@finos/vuu-utils";
-import { ViewportRange } from "./dragDropTypesNext";
-import { Direction, Rect } from "./dragDropTypesNext";
+import { ViewportRange } from "./dragDropTypes";
+import { Direction, Rect } from "./dragDropTypes";
 
 const LEFT_RIGHT = ["left", "right"];
 const TOP_BOTTOM = ["top", "bottom"];

vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts

@@ -1,6 +1,6 @@
-export * from "./dragDropTypesNext";
+export * from "./dragDropTypes";
 export * from "./DragDropProvider";
 export * from "./DragDropState";
-export * from "./useDragDropNext";
+export * from "./useDragDrop";
 export * from "./drop-target-utils";
 export * from "./useGlobalDragDrop";

vuu-ui/packages/vuu-ui-controls/src/drag-drop/useDragDisplacers.ts

@@ -1,6 +1,6 @@
 import type { orientationType } from "@finos/vuu-utils";
 import { useCallback, useMemo, useRef } from "react";
-import { Direction } from "./dragDropTypesNext";
+import { Direction } from "./dragDropTypes";
 import { createDragSpacer as createDragDisplacer } from "./Draggable";
 import {
   MeasuredDropTarget,