fix types in datatable, datagrid-extras

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

@@ -3,47 +3,45 @@ let _connectionId = 0;
 export const connectionId = {
   get nextValue() {
     return _connectionId++;
-  }
+  },
 };
 
 export const msgType = {
-  connect: 'connect',
-  connectionStatus: 'connection-status',
-  getFilterData: 'GetFilterData',
-  rowData: 'rowData',
-  rowSet: 'rowset',
-  select: 'select',
-  selectAll: 'selectAll',
-  selectNone: 'selectNone',
-  selected: 'selected',
-  snapshot: 'snapshot',
-  update: 'update',
-  createLink: 'createLink',
-  disable: 'disable',
-  enable: 'enable',
-  suspend: 'suspend',
-  resume: 'resume',
+  connect: "connect",
+  connectionStatus: "connection-status",
+  getFilterData: "GetFilterData",
+  rowData: "rowData",
+  rowSet: "rowset",
+  select: "select",
+  selectAll: "selectAll",
+  selectNone: "selectNone",
+  selected: "selected",
+  snapshot: "snapshot",
+  update: "update",
+  createLink: "createLink",
+  disable: "disable",
+  enable: "enable",
+  suspend: "suspend",
+  resume: "resume",
 
-  addSubscription: 'AddSubscription',
-  closeTreeNode: 'closeTreeNode',
-  columnList: 'ColumnList',
-  data: 'data',
-  openTreeNode: 'openTreeNode',
-  aggregate: 'aggregate',
-  filter: 'filter',
-  filterQuery: 'filterQuery',
-  filterData: 'filterData',
-  getSearchData: 'GetSearchData',
-  groupBy: 'groupBy',
-  modifySubscription: 'ModifySubscription',
-  searchData: 'searchData',
-  setColumns: 'setColumns',
-  setGroupState: 'setGroupState',
-  setViewRange: 'setViewRange',
-  size: 'size',
-  sort: 'sort',
-  subscribed: 'Subscribed',
-  tableList: 'TableList',
-  unsubscribe: 'TerminateSubscription',
-  viewRangeChanged: 'ViewRangeChanged'
+  addSubscription: "AddSubscription",
+  closeTreeNode: "closeTreeNode",
+  columnList: "ColumnList",
+  data: "data",
+  openTreeNode: "openTreeNode",
+  aggregate: "aggregate",
+  filter: "filter",
+  filterQuery: "filterQuery",
+  filterData: "filterData",
+  getSearchData: "GetSearchData",
+  groupBy: "groupBy",
+  modifySubscription: "ModifySubscription",
+  searchData: "searchData",
+  setGroupState: "setGroupState",
+  size: "size",
+  sort: "sort",
+  subscribed: "Subscribed",
+  tableList: "TableList",
+  unsubscribe: "TerminateSubscription",
+  viewRangeChanged: "ViewRangeChanged",
 };

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

@@ -65,6 +65,10 @@ export interface DataSourceEnabledMessage extends MessageWithClientViewportId {
   type: "enabled";
 }
 
+export interface DataSourceColumnsMessage extends MessageWithClientViewportId {
+  type: "columns";
+  columns: VuuColumns;
+}
 export interface DataSourceFilterMessage extends MessageWithClientViewportId {
   type: "filter";
   filter: Filter;
@@ -120,6 +124,7 @@ export interface DataSourceVisualLinksMessage
 
 export type DataSourceCallbackMessage =
   | DataSourceAggregateMessage
+  | DataSourceColumnsMessage
   | DataSourceDataMessage
   | DataSourceDisabledMessage
   | DataSourceEnabledMessage
@@ -135,6 +140,7 @@ export type DataSourceCallbackMessage =
 const datasourceMessages = [
   "aggregate",
   "viewport-update",
+  "columns",
   "disabled",
   "enabled",
   "filter",
@@ -220,6 +226,7 @@ export interface DataSource extends IEventEmitter {
   rowCount: number | undefined;
   select: (selected: number[]) => void;
   setRange: (from: number, to: number) => void;
+  setSubscribedColumns: (columns: string[]) => void;
   /** Set the title associated with this viewport in UI. This can be used as a link target */
   setTitle?: (title: string) => void;
   sort: (sort: VuuSort) => void;

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

@@ -28,7 +28,7 @@ import { MenuRpcResponse } from "./vuuUIMessageTypes";
 // };
 
 /*-----------------------------------------------------------------
- A RemoteDataView manages a single subscription via the ServerProxy
+ A RemoteDataSource manages a single subscription via the ServerProxy
   ----------------------------------------------------------------*/
 export class RemoteDataSource extends EventEmitter implements DataSource {
   private bufferSize: number;
@@ -236,18 +236,18 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     return this;
   }
 
-  setColumns(columns: string[]) {
-    this.columns = columns;
-    return this;
-  }
-
   setSubscribedColumns(columns: string[]) {
-    if (
-      columns.length !== this.columns.length ||
-      !columns.every((columnName) => this.columns.includes(columnName))
-    ) {
+    if (this.viewport) {
       this.columns = columns;
-      // ???
+
+      const message = {
+        viewport: this.viewport,
+        type: "setColumns",
+        columns,
+      } as const;
+      if (this.server) {
+        this.server.send(message);
+      }
     }
   }
 

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

@@ -30,6 +30,7 @@ import {
   VuuUIMessageOutSubscribe,
   VuuUIMessageOutUnsubscribe,
   VuuUIMessageOutViewRange,
+  VuuUIMessageOutColumns,
 } from "../vuuUIMessageTypes";
 import { DataSourceCallbackMessage } from "../data-source";
 import {
@@ -239,6 +240,13 @@ export class ServerProxy {
     this.sendIfReady(request, requestId, viewport.status === "subscribed");
   }
 
+  private setColumns(viewport: Viewport, message: VuuUIMessageOutColumns) {
+    const requestId = nextRequestId();
+    const { columns } = message;
+    const request = viewport.columnRequest(requestId, columns);
+    this.sendIfReady(request, requestId, viewport.status === "subscribed");
+  }
+
   private select(viewport: Viewport, message: VuuUIMessageOutSelect) {
     const requestId = nextRequestId();
     const { selected } = message;
@@ -390,6 +398,8 @@ export class ServerProxy {
             return this.createLink(viewport, message);
           case "removeLink":
             return this.removeLink(viewport);
+          case "setColumns":
+            return this.setColumns(viewport, message);
           default:
         }
       }

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

@@ -54,6 +54,10 @@ interface Aggregate {
   data: VuuAggregation[];
   type: "aggregate";
 }
+interface Columns {
+  data: string[];
+  type: "columns";
+}
 interface Selection {
   data: number[];
   type: "selection";
@@ -76,6 +80,7 @@ type RemoveVisualLink = ClientToServerRemoveLink;
 type AsyncOperation =
   | Aggregate
   | ChangeViewportRange
+  | Columns
   | CreateVisualLink
   | RemoveVisualLink
   | Disable
@@ -265,6 +270,10 @@ export class Viewport {
         type: "groupBy",
         groupBy: null,
       };
+    } else if (type === "columns") {
+      console.log("columns changed");
+      this.columns = data;
+      return { clientViewportId, type, ...data };
     } else if (type === "filter") {
       this.filterSpec = { filter: data.filterQuery };
       this.filter = data.filter;
@@ -475,6 +484,14 @@ export class Viewport {
     } as ClientToServerDisable;
   }
 
+  columnRequest(requestId: string, columns: string[]) {
+    this.awaitOperation(requestId, {
+      type: "columns",
+      data: columns,
+    });
+    return this.createRequest({ columns });
+  }
+
   filterRequest(
     requestId: string,
     filter: Filter | undefined,

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

@@ -131,6 +131,10 @@ export interface RequestMessage {
   requestId: string;
 }
 
+export interface VuuUIMessageOutColumns extends ViewportMessageOut {
+  type: "setColumns";
+  columns: string[];
+}
 export interface VuuUIMessageOutViewRange extends ViewportMessageOut {
   type: "setViewRange";
   range: {
@@ -202,6 +206,7 @@ export interface VuuUIMessageOutGroupby extends ViewportMessageOut {
 export type VuuUIMessageOutViewport =
   | VuuUIMessageOutAggregate
   | VuuUIMessageOutCloseTreeNode
+  | VuuUIMessageOutColumns
   | VuuUIMessageOutCreateLink
   | VuuUIMessageOutFilterQuery
   | VuuUIMessageOutDisable

vuu-ui/packages/vuu-datagrid-extras/src/column-expression-input/ColumnExpressionInput.tsx

@@ -7,6 +7,7 @@ import {
 import { Button } from "@salt-ds/core";
 
 import "./ColumnExpressionInput.css";
+import { Expression } from "./column-language-parser";
 
 const classBase = "vuuColumnExpressionInput";
 
@@ -15,20 +16,17 @@ export interface ColumnExpressionInputProps
     HTMLAttributes<HTMLDivElement> {
   existingFilter?: Filter;
   onSubmitExpression?: (
-    filter: Filter | undefined,
-    filterQuery: string,
-    filterName?: string
+    expression: Expression | undefined,
+    source: string
   ) => void;
 }
 
 export const ColumnExpressionInput = ({
-  existingFilter,
-  onSubmitExpression: onSubmitFilter,
+  onSubmitExpression,
   suggestionProvider,
 }: ColumnExpressionInputProps) => {
   const { editorRef, clearInput } = useColumnExpressionEditor({
-    existingFilter,
-    onSubmitExpression: onSubmitFilter,
+    onSubmitExpression,
     suggestionProvider,
   });
 

vuu-ui/packages/vuu-datagrid-extras/src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx

@@ -2,7 +2,7 @@ import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
 import { List } from "@heswell/salt-lab";
 import { Button, Text, useIdMemo as useId } from "@salt-ds/core";
 import { Dispatch, HTMLAttributes, useCallback, useState } from "react";
-import { ColumnAction } from "../settings-panel/useColumns";
+import { ColumnAction } from "../settings-panel/useGridSettings";
 
 import "./ColumnPicker.css";
 

vuu-ui/packages/vuu-datagrid-extras/src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx

@@ -2,7 +2,7 @@ import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
 import { Dropdown, Panel, PanelProps } from "@heswell/salt-lab";
 import cx from "classnames";
 import { Dispatch, useMemo } from "react";
-import { ColumnAction } from "../settings-panel/useColumns";
+import { ColumnAction } from "../settings-panel/useGridSettings";
 import { NumericColumnPanel } from "./NumericColumnPanel";
 import { StringColumnPanel } from "./StringColumnPanel";
 

vuu-ui/packages/vuu-datagrid-extras/src/datagrid-configuration-ui/settings-panel/ColumnSettingsPanel.tsx

@@ -20,7 +20,7 @@ import {
 import { ColumnTypePanel } from "../column-type-panel";
 
 import "./ColumnSettingsPanel.css";
-import { ColumnAction } from "./useColumns";
+import { ColumnAction } from "./useGridSettings";
 
 const classBase = "vuuColumnSettingsPanel";
 

vuu-ui/packages/vuu-datagrid-extras/src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx

@@ -10,8 +10,9 @@ import {
   useState,
 } from "react";
 import { ColumnPicker } from "../column-picker";
+import { GridSettingsPanel } from "./GridSettingsPanel";
 import { ColumnSettingsPanel } from "./ColumnSettingsPanel";
-import { useColumns } from "./useColumns";
+import { useGridSettings } from "./useGridSettings";
 
 import "./DatagridSettingsPanel.css";
 import { Stack, StackProps } from "@finos/vuu-layout";
@@ -48,12 +49,9 @@ export const DatagridSettingsPanel = ({
 }: DatagridSettingsPanelProps) => {
   console.log(`DatagridSettingsPanel render`);
 
-  const [config, setConfig] = useState<GridConfig>(gridConfig);
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 
-  const { columns: chosenColumns, dispatchColumnAction } = useColumns(
-    gridConfig.columns
-  );
+  const { gridSettings, dispatchColumnAction } = useGridSettings(gridConfig);
 
   const [selectedColumnName, setSelectedColumnName] = useState<string | null>(
     null
@@ -67,15 +65,9 @@ export const DatagridSettingsPanel = ({
 
   const handleApply = useCallback(
     (evt: MouseEvent, closePanel = false) => {
-      onConfigChange?.(
-        {
-          ...config,
-          columns: chosenColumns,
-        },
-        closePanel
-      );
+      onConfigChange?.(gridSettings, closePanel);
     },
-    [chosenColumns, config, onConfigChange]
+    [gridSettings, onConfigChange]
   );
 
   const handleTabSelectionChanged = useCallback((selectedTabIndex: number) => {
@@ -90,7 +82,8 @@ export const DatagridSettingsPanel = ({
   const selectedColumn =
     selectedColumnName === null
       ? null
-      : chosenColumns.find((col) => col.name === selectedColumnName) ?? null;
+      : gridSettings.columns.find((col) => col.name === selectedColumnName) ??
+        null;
 
   const tabstripProps: StackProps["TabstripProps"] = {
     activeTabIndex: selectedTabIndex,
@@ -111,9 +104,11 @@ export const DatagridSettingsPanel = ({
         onTabSelectionChanged={handleTabSelectionChanged}
         showTabs
       >
-        <Panel className={`${classBase}-gridSettings`} title="Grid Settings">
-          <Text styleAs="h4">Grid Settings</Text>
-        </Panel>
+        <GridSettingsPanel
+          config={gridSettings}
+          dispatchColumnAction={dispatchColumnAction}
+          title="Grid Settings"
+        />
 
         <div
           className={`${classBase}-columnPanels`}
@@ -122,7 +117,7 @@ export const DatagridSettingsPanel = ({
         >
           <ColumnPicker
             availableColumns={availableColumns}
-            chosenColumns={chosenColumns}
+            chosenColumns={gridSettings.columns}
             dispatchColumnAction={dispatchColumnAction}
             onSelectionChange={handleColumnSelected}
             selectedColumn={selectedColumn}

vuu-ui/packages/vuu-datagrid-extras/src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.css

@@ -0,0 +1,3 @@
+.vuuGridSettingsPanel {
+    --saltFormField-label-width: 150px;
+}