Calculated column (finos#882)

* calculated column in settings, instrument search

* additional mock data sources

* instrument tiles

* calculated column editing

* measured-container

* Row used columnMap rathe than column key

* full keyboard nav for table

* fix drag drop in column group headerr

* use MeasuredContainer for Table List

* table cell editing updates datasource

* table editing

* fix type issues

* fix old background renderer

* remove outdated import in showcase story

* exclude PatternValidator from semgrep

.semgrepignore

@@ -5,6 +5,7 @@ vuu/src/main/scala/org/finos/vuu/provider/simulation/SimulatedBigInstrumentsProv
 vuu-ui/packages/vuu-data/src/array-data-source/group-utils.ts
 vuu-ui/packages/vuu-datagrid-extras/src/column-expression-input/column-language-parser/walkExpressionTree.ts
 vuu-ui/packages/vuu-popups/src/menu/useContextMenu.tsx
+vuu-ui/packages/vuu-table-extras/src/cell-edit-validators/PatternValidator.ts
 vuu-ui/packages/vuu-ui-controls/src/list/Highlighter.tsx
 vuu-ui/packages/vuu-ui-controls/src/list/common-hooks/utils/filter-utils.ts
 vuu-ui/showcase/src/index.tsx

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

@@ -6,6 +6,7 @@ import {
   ClientToServerMenuRPC,
   LinkDescriptorWithLabel,
   VuuAggregation,
+  VuuColumnDataType,
   VuuGroupBy,
   VuuRange,
   VuuRowDataItemType,
@@ -429,11 +430,14 @@ export class ArrayDataSource
   }
 
   get columns() {
-    return this.#columns;
+    return this.#config.columns;
   }
 
   set columns(columns: string[]) {
-    this.#columns = columns;
+    this.config = {
+      ...this.#config,
+      columns,
+    };
   }
 
   get aggregations() {
@@ -546,6 +550,11 @@ export class ArrayDataSource
     console.log({ row, colName, value });
   }
 
+  applyEdit(rowIndex: number, columnName: string, value: VuuColumnDataType) {
+    console.log(`ArrayDataSource applyEdit ${rowIndex} ${columnName} ${value}`);
+    return true;
+  }
+
   async menuRpcCall(
     rpcRequest: Omit<ClientToServerMenuRPC, "vpId"> | ClientToServerEditRpc
   ): Promise<

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

@@ -8,6 +8,7 @@ import {
   ClientToServerMenuRPC,
   LinkDescriptorWithLabel,
   VuuAggregation,
+  VuuColumnDataType,
   VuuColumns,
   VuuFilter,
   VuuGroupBy,
@@ -473,8 +474,15 @@ export type DataSourceEvents = {
   resize: (size: number) => void;
 };
 
+export type DataSourceEditHandler = (
+  rowIndex: number,
+  columnName: string,
+  value: VuuColumnDataType
+) => boolean;
+
 export interface DataSource extends EventEmitter<DataSourceEvents> {
   aggregations: VuuAggregation[];
+  applyEdit: DataSourceEditHandler;
   closeTreeNode: (key: string, cascade?: boolean) => void;
   columns: string[];
   config: DataSourceConfig | undefined;

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

@@ -7,6 +7,7 @@ import {
   VuuSort,
   ClientToServerMenuRPC,
   ClientToServerEditRpc,
+  VuuColumnDataType,
 } from "@finos/vuu-protocol-types";
 import { DataSourceFilter, DataSourceRow } from "@finos/vuu-data-types";
 import {
@@ -374,6 +375,11 @@ export class JsonDataSource
     return undefined;
   }
 
+  applyEdit(rowIndex: number, columnName: string, value: VuuColumnDataType) {
+    console.log(`ArrayDataSource applyEdit ${rowIndex} ${columnName} ${value}`);
+    return true;
+  }
+
   getChildRows(rowKey: string) {
     const parentRow = this.#data.find((row) => row[KEY] === rowKey);
     if (parentRow) {

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

@@ -5,6 +5,7 @@ import {
   ClientToServerMenuRPC,
   LinkDescriptorWithLabel,
   VuuAggregation,
+  VuuColumnDataType,
   VuuGroupBy,
   VuuRange,
   VuuSort,
@@ -596,4 +597,9 @@ export class RemoteDataSource
       } as ClientToServerMenuRPC);
     }
   }
+
+  applyEdit(rowIndex: number, columnName: string, value: VuuColumnDataType) {
+    console.log(`ArrayDataSource applyEdit ${rowIndex} ${columnName} ${value}`);
+    return true;
+  }
 }

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

@@ -1,11 +1,12 @@
-import { ValueFormatter } from "@finos/vuu-table";
-import { Filter } from "@finos/vuu-filter-types";
-import {
+import type { ValueFormatter } from "@finos/vuu-table";
+import type { Filter } from "@finos/vuu-filter-types";
+import type {
   VuuAggType,
   VuuColumnDataType,
   VuuSortType,
 } from "@finos/vuu-protocol-types";
-import { FunctionComponent, HTMLAttributes, MouseEvent } from "react";
+import type { FunctionComponent, MouseEvent } from "react";
+import type { ClientSideValidationChecker } from "@finos/vuu-ui-controls";
 
 export type TableSelectionModel = "none" | "single" | "checkbox" | "extended";
 
@@ -17,14 +18,26 @@ export type SelectionChangeHandler = (selection: Selection) => void;
 export type TableHeading = { label: string; width: number };
 export type TableHeadings = TableHeading[][];
 
-export interface TableCellProps
-  extends Omit<HTMLAttributes<HTMLTableCellElement>, "onClick"> {
+export type DataCellEditHandler = (
+  rowIndex: number,
+  columnName: string,
+  value: VuuColumnDataType
+) => boolean;
+
+export interface TableCellProps {
+  className?: string;
   column: KeyedColumnDescriptor;
   columnMap: ColumnMap;
   onClick?: (event: MouseEvent, column: KeyedColumnDescriptor) => void;
+  onDataEdited?: DataCellEditHandler;
   row: DataSourceRow;
 }
 
+export interface TableCellRendererProps
+  extends Omit<TableCellProps, "onDataEdited"> {
+  onCommit?: (value: VuuColumnDataType) => boolean;
+}
+
 export interface TableAttributes {
   columnDefaultWidth?: number;
   columnFormatHeader?: "capitalize" | "uppercase";
@@ -56,10 +69,20 @@ export declare type TypeFormatting = {
 
 export type ColumnTypeValueMap = { [key: string]: string };
 
+export interface EditValidationRule {
+  name: string;
+  message?: string;
+  value?: string;
+}
+
 export interface ColumnTypeRenderer {
   associatedField?: string;
+  // specific to Background renderer
   flashStyle?: "bg-only" | "arrow-bg" | "arrow";
   name: string;
+  rules?: EditValidationRule[];
+  // These are for the dropdown-input - how do we type parameters for custom renderers ?
+  values?: ReadonlyArray<string>;
 }
 export interface MappedValueTypeRenderer {
   map: ColumnTypeValueMap;
@@ -80,6 +103,15 @@ export declare type ColumnTypeDescriptor = {
   renderer?: ColumnTypeRenderer | MappedValueTypeRenderer;
 };
 
+export interface ColumnTypeRendererWithValidationRules
+  extends ColumnTypeRenderer {
+  rules: EditValidationRule[];
+}
+
+export interface ColumnTypeWithValidationRules extends ColumnTypeDescriptor {
+  renderer: ColumnTypeRendererWithValidationRules;
+}
+
 export declare type ColumnType = ColumnTypeSimple | ColumnTypeDescriptor;
 
 export type ColumnSort = VuuSortType | number;
@@ -117,12 +149,14 @@ export interface ColumnDescriptor {
   type?: ColumnType;
   width?: number;
 }
+
 /** This is an internal description of a Column that extends the public
  * definitin with internal state values. */
 export interface KeyedColumnDescriptor extends ColumnDescriptor {
   align?: "left" | "right";
-  CellRenderer?: FunctionComponent<TableCellProps>;
+  CellRenderer?: FunctionComponent<TableCellRendererProps>;
   className?: string;
+  clientSideEditValidationCheck?: ClientSideValidationChecker;
   endPin?: true | undefined;
   filter?: Filter;
   flex?: number;