replace Tree with TreeTable, remove Tree (#1535)

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

@@ -191,6 +191,8 @@ export class ArrayDataSource
       columns,
       aggregations,
       range,
+      selectedIndexValues,
+      selectedKeyValues,
       sort,
       groupBy,
       filterSpec,
@@ -200,6 +202,11 @@ export class ArrayDataSource
     this.clientCallback = callback;
     this.viewport = viewport;
     this.#status = "subscribed";
+    this.selectedRows =
+      selectedIndexValues ??
+      this.convertKeysToIndexValues(selectedKeyValues) ??
+      [];
+    this.#selectedRowsCount = selectionCount(this.selectedRows);
     this.lastRangeServed = { from: 0, to: 0 };
 
     let config = this._config;
@@ -566,7 +573,7 @@ export class ArrayDataSource
     // TODO take sorting, filtering. grouping into account
     const colIndex = this.#columnMap[columnName];
     const dataColIndex = this.dataMap?.[columnName];
-    const dataIndex = this.#data.findIndex((row) => row[KEY] === keyValue);
+    const dataIndex = this.indexOfRowWithKey(keyValue);
     if (dataIndex !== -1 && dataColIndex !== undefined) {
       const dataSourceRow = this.#data[dataIndex];
       dataSourceRow[colIndex] = value;
@@ -578,6 +585,9 @@ export class ArrayDataSource
     }
   };
 
+  private indexOfRowWithKey = (key: string) =>
+    this.#data.findIndex((row) => row[KEY] === key);
+
   protected update = (row: VuuRowDataItemType[], columnName: string) => {
     // TODO take sorting, filtering. grouping into account
     const keyValue = row[this.key] as string;
@@ -779,15 +789,6 @@ export class ArrayDataSource
     console.log("remove link");
   }
 
-  private findRow(rowKey: number) {
-    const row = this.#data[rowKey];
-    if (row) {
-      return row;
-    } else {
-      throw `no row found for key ${rowKey}`;
-    }
-  }
-
   applyEdit(
     rowKey: string,
     columnName: string,
@@ -829,4 +830,17 @@ export class ArrayDataSource
       }
     });
   }
+
+  private convertKeysToIndexValues(keys?: string[]) {
+    if (Array.isArray(keys)) {
+      const indexValues: number[] = [];
+      keys.forEach((key) => {
+        const rowIdx = this.indexOfRowWithKey(key);
+        if (rowIdx !== -1) {
+          indexValues.push(rowIdx);
+        }
+      });
+      return indexValues;
+    }
+  }
 }

vuu-ui/packages/vuu-data-local/src/tree-data-source/TreeDataSource.ts

@@ -93,10 +93,12 @@ export class TreeDataSource extends BaseDataSource {
 
   async subscribe(
     {
-      viewport = this.viewport ?? uuid(),
-      columns,
       aggregations,
+      columns,
       range,
+      revealSelected,
+      selectedKeyValues,
+      viewport = this.viewport ?? uuid(),
     }: SubscribeProps,
     callback: SubscribeCallback,
   ) {
@@ -120,6 +122,16 @@ export class TreeDataSource extends BaseDataSource {
     this.viewport = viewport;
 
     this.#status = "subscribed";
+    this.#selectedRowsCount = selectedKeyValues?.length ?? 0;
+
+    if (selectedKeyValues) {
+      this.applySelectedKeyValues(selectedKeyValues, revealSelected);
+    }
+
+    [this.visibleRows, this.visibleRowIndex] = getVisibleRows(
+      this.#data,
+      this.expandedRows,
+    );
 
     this.clientCallback?.({
       aggregations: this.#aggregations,
@@ -172,22 +184,40 @@ export class TreeDataSource extends BaseDataSource {
   }
   set data(data: TreeSourceNode[]) {
     [this.columnDescriptors, this.#data] = treeToDataSourceRows(data);
-    // console.table(this.#data.slice(0, 20));
-    [this.visibleRows, this.visibleRowIndex] = getVisibleRows(
-      this.#data,
-      this.expandedRows,
-    );
-
-    // console.table(this.#data);
-    console.table(this.visibleRows);
-
-    console.log({ visibleRows: this.visibleRows });
 
     requestAnimationFrame(() => {
       this.sendRowsToClient();
     });
   }
 
+  /**
+   * used to apply an initial selection. These may not necessarily be
+   * visible. If revealOnSelect is in force, expand nodes as necessary
+   * to ensure selected nodes are visible
+   */
+  private applySelectedKeyValues(keys: string[], revealSelected = false) {
+    keys.forEach((key) => {
+      const rowIdx = this.indexOfRowWithKey(key);
+      const row = this.#data[rowIdx];
+      row[SELECTED] = 1;
+
+      if (revealSelected && row[DEPTH] !== 1) {
+        console.log(`we've got a deep one here`);
+        const keys = key.slice(6).split("|").slice(0, -1);
+        console.log(JSON.stringify(keys));
+
+        let path = "$root";
+        do {
+          path = `${path}|${keys.shift()}`;
+          this.expandedRows.add(path);
+        } while (keys.length);
+      }
+    });
+  }
+
+  private indexOfRowWithKey = (key: string) =>
+    this.#data.findIndex((row) => row[KEY] === key);
+
   // Incoming Selection references visibleRow indices
   select(selected: Selection) {
     // todo get a diff

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

@@ -52,9 +52,9 @@ type RangeRequest = (range: VuuRange) => void;
 
 const { info } = logger("VuuDataSource");
 
-/*-----------------------------------------------------------------
- A RemoteDataSource manages a single subscription via the ServerProxy
-  ----------------------------------------------------------------*/
+/*---------------------------------------------------------------------
+ A VuuDataSource manages a single subscription via the ServerProxy
+  ---------------------------------------------------------------------*/
 export class VuuDataSource extends BaseDataSource implements DataSource {
   private bufferSize: number;
   private server: ServerAPI | null = null;
@@ -90,8 +90,10 @@ export class VuuDataSource extends BaseDataSource implements DataSource {
   async subscribe(subscribeProps: SubscribeProps, callback: SubscribeCallback) {
     super.subscribe(subscribeProps, callback);
 
-    const { viewport = this.viewport || (this.viewport = uuid()) } =
-      subscribeProps;
+    const {
+      selectedIndexValues,
+      viewport = this.viewport || (this.viewport = uuid()),
+    } = subscribeProps;
 
     if (this.#status === "disabled" || this.#status === "disabling") {
       this.enable(callback);
@@ -109,22 +111,25 @@ export class VuuDataSource extends BaseDataSource implements DataSource {
     }
 
     this.#status = "subscribing";
+    this.#selectedRowsCount = selectionCount(selectedIndexValues);
 
     this.server = await ConnectionManager.serverAPI;
 
     const { bufferSize } = this;
 
-    // TODO make this async and await response here
+    // TODO and await response here
 
     const dataSourceConfig = combineFilters(this.config);
+
     this.server?.subscribe(
       {
         ...dataSourceConfig,
         bufferSize,
-        viewport,
-        table: this.table,
         range: this._range,
+        selectedIndexValues: selectedIndexValues,
+        table: this.table,
         title: this._title,
+        viewport,
       },
       this.handleMessageFromServer,
     );
@@ -267,8 +272,6 @@ export class VuuDataSource extends BaseDataSource implements DataSource {
   }
 
   select(selected: Selection) {
-    //TODO this isn't always going to be correct - need to count
-    // selection block items
     this.#selectedRowsCount = selectionCount(selected);
     if (this.viewport) {
       this.server?.send({

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

@@ -240,10 +240,12 @@ export class ServerProxy {
         viewport.subscribe(),
         message.viewport,
       );
-      const awaitPendingReponses = Promise.all([
-        pendingSubscription,
-        pendingTableSchema,
-      ]) as Promise<[VuuViewportCreateResponse, TableSchema]>;
+
+      const pendingResponses = [pendingSubscription, pendingTableSchema];
+      const awaitPendingReponses = Promise.all(pendingResponses) as Promise<
+        [VuuViewportCreateResponse, TableSchema]
+      >;
+
       awaitPendingReponses.then(([subscribeResponse, tableSchema]) => {
         const { viewPortId: serverViewportId } = subscribeResponse;
         const { status: previousViewportStatus } = viewport;
@@ -269,6 +271,13 @@ export class ServerProxy {
           }
         }
 
+        if (message.selectedIndexValues) {
+          console.log(
+            `selected = ${JSON.stringify(message.selectedIndexValues)}`,
+          );
+          this.select(viewport, { selected: message.selectedIndexValues });
+        }
+
         // In the case of a reconnect, we may have resubscribed a disabled viewport,
         // reset the disabled state on server
         if (viewport.disabled) {
@@ -466,7 +475,10 @@ export class ServerProxy {
     }
   }
 
-  private select(viewport: Viewport, message: VuuUIMessageOutSelect) {
+  private select(
+    viewport: Viewport,
+    message: Pick<VuuUIMessageOutSelect, "selected">,
+  ) {
     const requestId = nextRequestId();
     const { selected } = message;
     const request = viewport.selectRequest(requestId, selected);

vuu-ui/packages/vuu-data-types/index.d.ts

@@ -455,6 +455,9 @@ export interface SubscribeProps
   extends Partial<WithBaseFilter<WithFullConfig>> {
   viewport?: string;
   range?: VuuRange;
+  revealSelected?: boolean;
+  selectedIndexValues?: Selection;
+  selectedKeyValues?: string[];
   title?: string;
 }
 
@@ -709,6 +712,7 @@ export interface ConnectionQualityMetrics {
 export interface ServerProxySubscribeMessage extends WithFullConfig {
   bufferSize?: number;
   range: VuuRange;
+  selectedIndexValues?: Selection;
   table: VuuTable;
   title?: string;
   viewport: string;

vuu-ui/packages/vuu-datatable/src/tree-table/TreeTable.tsx

@@ -49,6 +49,7 @@ export const TreeTable = ({
   return (
     <Table
       {...tableProps}
+      className="vuuTreeTable"
       config={tableConfig}
       dataSource={dataSourceRef.current}
       groupToggleTarget="toggle-icon"

vuu-ui/packages/vuu-layout/package.json

@@ -19,6 +19,7 @@
     "@salt-ds/core": "1.37.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
+    "@finos/vuu-datatable": "0.0.26",
     "@finos/vuu-filters": "0.0.26",
     "@finos/vuu-popups": "0.0.26",
     "@finos/vuu-table": "0.0.26",

vuu-ui/packages/vuu-layout/src/tools/devtools-tree/layout-tree-viewer.jsx

@@ -5,7 +5,7 @@ import { useWindow } from "@salt-ds/window";
 import { typeOf } from "../../utils";
 
 import layoutTreeViewer from "./layout-tree-viewer.css";
-import { Tree } from "@finos/vuu-ui-controls";
+import { TreeTable } from "@finos/vuu-datatable";
 
 const classBaseTree = "hwLayoutTreeViewer";
 
@@ -14,12 +14,12 @@ const toTreeJson = (component, path = "0") => {
     label: typeOf(component),
     path,
     childNodes: React.Children.map(component.props.children, (child, i) =>
-      toTreeJson(child, path ? `${path}.${i}` : `${i}`)
+      toTreeJson(child, path ? `${path}.${i}` : `${i}`),
     ),
   };
 };
 
-export const LayoutTreeViewer = ({ layout, onSelect, style }) => {
+export const LayoutTreeViewer = ({ layout, onSelect: _, style }) => {
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "vuu-layout-tree-viewer",
@@ -29,16 +29,17 @@ export const LayoutTreeViewer = ({ layout, onSelect, style }) => {
 
   const treeJson = [toTreeJson(layout)];
 
-  const handleSelection = (evt, [{ path }]) => {
-    onSelect(path);
+  const handleSelection = (row) => {
+    console.log({ row });
+    // onSelect(path);
   };
 
   return (
     <div className={cx(classBaseTree)} style={style}>
-      <Tree
+      <TreeTable
         source={treeJson}
-        groupSelection="single"
-        onSelectionChange={handleSelection}
+        selectionModel="single"
+        onSelect={handleSelection}
       />
     </div>
   );