Update check on viewport and context menu (finos#913)

* remove reprecated Portal, fixes in COntextMenu

* use woff2 font, fix portal

* make sure ContextMenu always has theme attributes

* type fixes

vuu-ui/packages/vuu-data/src/connection-manager.ts

@@ -164,6 +164,7 @@ function handleMessageFromWorker({
   } else if (isConnectionStatusMessage(message)) {
     ConnectionManager.emit("connection-status", message);
   } else if (isConnectionQualityMetrics(message)) {
+    console.log({ message });
     ConnectionManager.emit("connection-metrics", message);
   } else {
     const requestId = (message as VuuUIMessageInRPC).requestId;

vuu-ui/packages/vuu-data/src/server-proxy/array-backed-moving-window.ts

@@ -7,6 +7,23 @@ type RangeTuple = [boolean, readonly VuuRow[] /*, readonly VuuRow[]*/];
 
 const log = logger("array-backed-moving-window");
 
+function dataIsUnchanged(newRow: VuuRow, existingRow?: VuuRow) {
+  if (!existingRow) {
+    return false;
+  }
+
+  if (existingRow.sel !== newRow.sel) {
+    return false;
+  }
+
+  for (let i = 0; i < existingRow.data.length; i++) {
+    if (existingRow.data[i] !== newRow.data[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export class ArrayBackedMovingWindow {
   #range: WindowRange;
 
@@ -79,9 +96,13 @@ export class ArrayBackedMovingWindow {
 
   setAtIndex(row: VuuRow) {
     const { rowIndex: index } = row;
+    const internalIndex = index - this.#range.from;
+    //TODO measure the performance impact of this check
+    if (dataIsUnchanged(row, this.internalData[internalIndex])) {
+      return false;
+    }
     const isWithinClientRange = this.isWithinClientRange(index);
     if (isWithinClientRange || this.isWithinRange(index)) {
-      const internalIndex = index - this.#range.from;
       if (!this.internalData[internalIndex] && isWithinClientRange) {
         this.rowsWithinRange += 1;
       }

vuu-ui/packages/vuu-data/src/server-proxy/viewport.ts

@@ -258,7 +258,6 @@ export class Viewport {
 
     if (lastMode === mode) {
       const ts = Date.now();
-      console.log(`read data now ${ts}`);
       this.lastUpdateStatus.count += 1;
       this.lastUpdateStatus.ts = ts;
       elapsedTime = lastTS === 0 ? 0 : ts - lastTS;
@@ -930,7 +929,7 @@ export class Viewport {
 
   private throttleMessage = (mode: DataUpdateMode) => {
     if (this.shouldThrottleMessage(mode)) {
-      console.log("throttling updates setTimeout to 2000");
+      info?.("throttling updates setTimeout to 2000");
       if (this.updateThrottleTimer === undefined) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore

vuu-ui/packages/vuu-data/src/worker.ts

@@ -36,9 +36,10 @@ async function connectToServer(
     // never be called until subscriptions have been made, so this is safe.
     //TODO do we need to listen in to the connection messages here so we can lock back in, in the event of a reconnenct ?
     (msg) => {
-      if (isConnectionQualityMetrics(msg))
+      if (isConnectionQualityMetrics(msg)) {
+        console.log("post connection metrics");
         postMessage({ type: "connection-metrics", messages: msg });
-      else if (isConnectionStatusMessage(msg)) {
+      } else if (isConnectionStatusMessage(msg)) {
         onConnectionStatusChange(msg);
         if (msg.status === "reconnected") {
           server.reconnect();

vuu-ui/packages/vuu-data/test/server-proxy.test.ts

@@ -2574,9 +2574,9 @@ describe("ServerProxy", () => {
         body: {
           ...COMMON_TABLE_ROW_ATTRS,
           rows: [
-            ...createTableRows("server-vp-1", 0, 1, 100, 1, 1),
+            ...createTableRows("server-vp-1", 0, 1, 100, 1, 1, 2000),
             sizeRow("server-vp-2", 20),
-            ...createTableRows("server-vp-2", 0, 10),
+            ...createTableRows("server-vp-2", 0, 10, 100, 2, 0, 2000),
           ],
         },
       });
@@ -2587,7 +2587,7 @@ describe("ServerProxy", () => {
           {
             mode: "update",
             rows: [
-              [0,0,true,false,0,0,'key-00', 0,'key-00', 'name 00',1000,true],
+              [0,0,true,false,0,0,'key-00', 0,'key-00', 'name 00',2000,true],
           ],
             type: 'viewport-update',
             clientViewportId: 'client-vp-1'
@@ -2598,16 +2598,16 @@ describe("ServerProxy", () => {
           {
             mode: "batch",
             rows: [
-              [0,0,true,false,0,0,'key-00', 0,'key-00', 'name 00',1000,true],
-              [1,1,true,false,0,0,"key-01",0,"key-01","name 01",1001,true],
-              [2,2,true,false,0,0,"key-02",0,"key-02","name 02",1002,true],
-              [3,3,true,false,0,0,"key-03",0,"key-03","name 03",1003,true],
-              [4,4,true,false,0,0,"key-04",0,"key-04","name 04",1004,true],
-              [5,5,true,false,0,0,"key-05",0,"key-05","name 05",1005,true],
-              [6,6,true,false,0,0,"key-06",0,"key-06","name 06",1006,true],
-              [7,7,true,false,0,0,"key-07",0,"key-07","name 07",1007,true],
-              [8,8,true,false,0,0,"key-08",0,"key-08","name 08",1008,true],
-              [9,9,true,false,0,0,"key-09",0,"key-09","name 09",1009,true]
+              [0,0,true,false,0,0,'key-00', 0,'key-00', 'name 00',2000,true],
+              [1,1,true,false,0,0,"key-01",0,"key-01","name 01",2001,true],
+              [2,2,true,false,0,0,"key-02",0,"key-02","name 02",2002,true],
+              [3,3,true,false,0,0,"key-03",0,"key-03","name 03",2003,true],
+              [4,4,true,false,0,0,"key-04",0,"key-04","name 04",2004,true],
+              [5,5,true,false,0,0,"key-05",0,"key-05","name 05",2005,true],
+              [6,6,true,false,0,0,"key-06",0,"key-06","name 06",2006,true],
+              [7,7,true,false,0,0,"key-07",0,"key-07","name 07",2007,true],
+              [8,8,true,false,0,0,"key-08",0,"key-08","name 08",2008,true],
+              [9,9,true,false,0,0,"key-09",0,"key-09","name 09",2009,true]
           ],
             size: 100,
             type: 'viewport-update',

vuu-ui/packages/vuu-data/test/test-utils.ts

@@ -46,14 +46,15 @@ export const createTableRows = (
   to,
   vpSize = 100,
   ts = 1,
-  sel: 0 | 1 = 0
+  sel: 0 | 1 = 0,
+  numericValue = 1000
 ): VuuRow[] => {
   const results: VuuRow[] = [];
   for (let rowIndex = from; rowIndex < to; rowIndex++) {
     const key = ("0" + rowIndex).slice(-2);
     const rowKey = `key-${key}`;
     results.push({
-      data: [rowKey, `name ${key}`, 1000 + rowIndex, true],
+      data: [rowKey, `name ${key}`, numericValue + rowIndex, true],
       rowIndex,
       rowKey,
       updateType: "U",

vuu-ui/packages/vuu-datagrid/src/context-menu/useContextMenu.ts

@@ -2,8 +2,8 @@
 import { DataSource } from "@finos/vuu-data";
 import { DataSourceFilter, MenuActionHandler } from "@finos/vuu-data-types";
 import { KeyedColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { MenuActionClosePopup } from "@finos/vuu-popups";
 import { removeColumnFromFilter, setAggregations } from "@finos/vuu-utils";
-import { MenuActionClosePopup } from "packages/vuu-popups/src";
 import { AggregationType } from "../constants";
 import { GridModelDispatch } from "../grid-context";
 import { GridModelType } from "../grid-model/gridModelTypes";

vuu-ui/packages/vuu-filters/src/filter-builder-menu/FilterBuilderMenu.tsx

@@ -1,6 +1,6 @@
 import { ContextMenuProps } from "@finos/vuu-popups";
 import { MenuActionHandler } from "packages/vuu-data-types";
-import { ReactElement, useCallback, useEffect, useRef } from "react";
+import { ReactElement, useCallback, useRef } from "react";
 import { PopupComponent as Popup, Portal } from "@finos/vuu-popups";
 import { List, ListItem } from "@finos/vuu-ui-controls";
 

vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClauseEditor.ts

@@ -35,15 +35,12 @@ const getFocusedField = () =>
 
 const focusNextFocusableElement = (direction: "fwd" | "bwd" = "fwd") => {
   const activeField = getFocusedField();
-  console.log(`activeField = ${activeField?.className}`);
   const filterClause = activeField?.closest(".vuuFilterClause");
   if (filterClause?.lastChild === activeField) {
     requestAnimationFrame(() => {
-      console.log("enmd o the line, baby, wait, then try again");
       focusNextFocusableElement();
     });
   } else {
-    console.log("go ahead and focus next field");
     const nextField =
       direction === "fwd"
         ? (activeField.nextElementSibling as HTMLElement)
@@ -107,7 +104,6 @@ const navigateToNextInputIfAtBoundary = (
         const nextField = field.nextSibling as HTMLElement;
         const nextInput = nextField?.querySelector("input");
         evt.preventDefault();
-        console.log("%cfocus nextInput", "color:green;font-weight:bold");
         nextInput?.focus();
         requestAnimationFrame(() => {
           nextInput?.select();
@@ -163,7 +159,6 @@ export const useFilterClauseEditor = ({
   );
 
   const setOperator = useCallback((op) => {
-    console.log(`setOperator ${op}`);
     _setOperator(op);
   }, []);
 
@@ -173,13 +168,15 @@ export const useFilterClauseEditor = ({
 
   const handleSelectionChangeColumn = useCallback<
     SingleSelectionHandler<ColumnDescriptor>
-  >((evt, column) => {
-    console.log(`handleSelectionChangeColumn ${column.name}`);
-    setSelectedColumn(column ?? undefined);
-    setOperator(undefined);
-    setValue(undefined);
-    focusNextElement();
-  }, []);
+  >(
+    (evt, column) => {
+      setSelectedColumn(column ?? undefined);
+      setOperator(undefined);
+      setValue(undefined);
+      focusNextElement();
+    },
+    [setOperator]
+  );
 
   const handleSelectionChangeOperator = useCallback<SingleSelectionHandler>(
     (evt, selected) => {
@@ -193,7 +190,7 @@ export const useFilterClauseEditor = ({
         );
       }
     },
-    []
+    [setOperator]
   );
 
   const handleChangeValue = useCallback(

vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts

@@ -2,7 +2,7 @@ import { rect } from "@finos/vuu-utils";
 import { ReactElement } from "react";
 import { LayoutModel } from "../layout-reducer";
 import { findTarget, followPath, getProps } from "../utils";
-import { BoxModel, Measurements, Position } from "./BoxModel";
+import { BoxModel, Measurements } from "./BoxModel";
 import { DragDropRect } from "./dragDropTypes";
 import { DragState, IntrinsicSizes } from "./DragState";
 import { DropTarget, identifyDropTarget } from "./DropTarget";

vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx

@@ -1,7 +1,7 @@
 import { Scrim } from "@salt-ds/lab";
 import cx from "classnames";
-import { HTMLAttributes, useCallback, useRef, useState } from "react";
-import { PortalDeprecated } from "../portal-deprecated";
+import { HTMLAttributes, useCallback, useRef } from "react";
+import { Portal } from "../portal";
 import { DialogHeader } from "../dialog-header";
 
 import "./Dialog.css";
@@ -24,30 +24,17 @@ export const Dialog = ({
   ...props
 }: DialogProps) => {
   const root = useRef<HTMLDivElement>(null);
-  const [posX] = useState(0);
-  const [posY] = useState(0);
 
   const close = useCallback(() => {
     onClose?.();
   }, [onClose]);
 
-  const handleRender = useCallback(() => {
-    //   if (center && isOpen && root.current) {
-    //     const { width, height } = root.current.getBoundingClientRect();
-    //     const { innerWidth, innerHeight } = window;
-    //     const x = innerWidth / 2 - width / 2;
-    //     const y = innerHeight / 2 - height / 2;
-    //     setPosX(x);
-    //     setPosY(y);
-    // }
-  }, []);
-
   if (!isOpen) {
     return null;
   }
 
   return (
-    <PortalDeprecated onRender={handleRender} x={posX} y={posY}>
+    <Portal>
       <Scrim className={`${classBase}-scrim`} open={isOpen} autoFocusRef={root}>
         <div {...props} className={cx(classBase, className)} ref={root}>
           <DialogHeader
@@ -58,6 +45,6 @@ export const Dialog = ({
           {children}
         </div>
       </Scrim>
-    </PortalDeprecated>
+    </Portal>
   );
 };