finos#1073 add ability to switch inferred column type for long columns

- users can now declare the type of long columns as plain number or
  date/time.
- removed isSimpleColumnType as its no longer needed.
- added a timestamps (long) column in showcase's instruments-extended
  table.

vuu-ui/packages/vuu-data-test/src/simul/reference-data/instruments-extended.ts

@@ -7,7 +7,7 @@ import { instrumentsData } from "./instruments";
 const instrumentsExtendedData = instrumentsData.map((row) =>
   (row as VuuRowDataItemType[])
     .slice(0, -1)
-    .concat([random(0, 1) === 1, random(0, 1) === 1])
+    .concat([random(0, 1) === 1, random(0, 1) === 1, new Date().getTime()])
 );
 
 const instrumentsExtendedTable = new Table(

vuu-ui/packages/vuu-data-test/src/simul/simul-schemas.ts

@@ -38,6 +38,7 @@ export const schemas: Readonly<Record<SimulTableName, Readonly<TableSchema>>> =
         { name: "ric", serverDataType: "string" },
         { name: "supported", serverDataType: "boolean" },
         { name: "wishlist", serverDataType: "boolean" },
+        { name: "lastUpdated", serverDataType: "long" },
       ],
       key: "ric",
       table: { module: "SIMUL", table: "instruments" },

vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/NumericFormattingSettings.tsx → vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/BaseNumericFormattingSettings.tsx

@@ -1,5 +1,5 @@
 import { FormField, FormFieldLabel, Input, Switch } from "@salt-ds/core";
-import { ColumnDescriptor, ColumnTypeFormatting } from "@finos/vuu-table-types";
+import { ColumnTypeFormatting } from "@finos/vuu-table-types";
 import { getTypeFormattingFromColumn } from "@finos/vuu-utils";
 import {
   ChangeEvent,
@@ -12,7 +12,10 @@ import { FormattingSettingsProps } from "./types";
 
 const classBase = "vuuFormattingSettings";
 
-export const NumericFormattingSettings = ({column, onChange}: FormattingSettingsProps) => {
+export const BaseNumericFormattingSettings = ({
+  column,
+  onChangeFormatting: onChange,
+}: FormattingSettingsProps) => {
   const [formattingSettings, setFormattingSettings] =
     useState<ColumnTypeFormatting>(getTypeFormattingFromColumn(column));
 

vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx

@@ -1,7 +1,6 @@
 import {
   ColumnDescriptor,
   ColumnDescriptorCustomRenderer,
-  ColumnTypeFormatting,
   ColumnTypeRendering,
 } from "@finos/vuu-table-types";
 import { Dropdown, SingleSelectionHandler } from "@finos/vuu-ui-controls";
@@ -11,23 +10,22 @@ import {
   getCellRendererOptions,
   getConfigurationEditor,
   isColumnTypeRenderer,
-  isDateTimeColumn,
   isTypeDescriptor,
 } from "@finos/vuu-utils";
 import { FormField, FormFieldLabel } from "@salt-ds/core";
 import cx from "clsx";
 import { HTMLAttributes, useCallback, useMemo } from "react";
-import { NumericFormattingSettings } from "./NumericFormattingSettings";
-import { DateTimeFormattingSettings } from "./DateTimeFormattingSettings";
+import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings";
+import { LongTypeFormattingSettings } from "./LongTypeFormattingSettings";
 import { FormattingSettingsProps } from "./types";
 
 const classBase = "vuuColumnFormattingPanel";
 
 export interface ColumnFormattingPanelProps
-  extends HTMLAttributes<HTMLDivElement> {
+  extends HTMLAttributes<HTMLDivElement>,
+    FormattingSettingsProps {
   availableRenderers: CellRendererDescriptor[];
   column: ColumnDescriptor;
-  onChangeFormatting: (formatting: ColumnTypeFormatting) => void;
   onChangeRendering: (renderProps: ColumnTypeRendering) => void;
 }
 
@@ -38,12 +36,14 @@ export const ColumnFormattingPanel = ({
   className,
   column,
   onChangeFormatting,
+  onChangeType,
   onChangeRendering,
   ...htmlAttributes
 }: ColumnFormattingPanelProps) => {
   const formattingSettingsForType = useMemo(
-    () => formattingSettingsByColType({ column, onChange: onChangeFormatting }),
-    [column, onChangeFormatting]
+    () =>
+      formattingSettingsByColType({ column, onChangeFormatting, onChangeType }),
+    [column, onChangeFormatting, onChangeType]
   );
 
   const ConfigEditor = useMemo<
@@ -119,15 +119,12 @@ export const ColumnFormattingPanel = ({
 function formattingSettingsByColType(props: FormattingSettingsProps) {
   const { column } = props;
 
-  if (isDateTimeColumn(column)) {
-    return <DateTimeFormattingSettings {...props} column={column} />;
-  }
-
   switch (column.serverDataType) {
     case "double":
     case "int":
+      return <BaseNumericFormattingSettings {...props} />;
     case "long":
-      return <NumericFormattingSettings {...props} />;
+      return <LongTypeFormattingSettings {...props} />;
     default:
       return null;
   }

vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/DateTimeFormattingSettings.tsx

@@ -17,14 +17,10 @@ import {
 import { DateTimeColumnDescriptor } from "@finos/vuu-table-types";
 import { FormattingSettingsProps } from "./types";
 
-import "./DateTimeFormattingSettings.css";
-
-const classBase = "vuuDateTimeFormattingSettings";
-
 export const DateTimeFormattingSettings: React.FC<
   FormattingSettingsProps<DateTimeColumnDescriptor>
 > = (props) => {
-  const { column, onChange } = props;
+  const { column, onChangeFormatting: onChange } = props;
   const formatting = getTypeFormattingFromColumn(column);
   const { pattern = fallbackDateTimePattern } = formatting;
   const toggleValue = useMemo(() => getToggleValue(pattern), [pattern]);
@@ -80,9 +76,9 @@ export const DateTimeFormattingSettings: React.FC<
   );
 
   return (
-    <div className={classBase}>
-      <FormField>
-        <FormFieldLabel>{"Date/Time pattern"}</FormFieldLabel>
+    <>
+      <FormField labelPlacement="left">
+        <FormFieldLabel>{"Display"}</FormFieldLabel>
         <ToggleButtonGroup
           className="vuuToggleButtonGroup"
           onChange={onToggleChange}
@@ -100,7 +96,7 @@ export const DateTimeFormattingSettings: React.FC<
         .filter((v) => !!pattern[v])
         .map((v) => (
           <FormField labelPlacement="left" key={v}>
-            <FormFieldLabel>{`${labelByType[v]}`}</FormFieldLabel>
+            <FormFieldLabel>{`${labelByType[v]} pattern`}</FormFieldLabel>
             <Dropdown<Required<DateTimePattern>[typeof v]>
               onSelectionChange={onDropdownChange(v)}
               selected={pattern[v]}
@@ -109,7 +105,7 @@ export const DateTimeFormattingSettings: React.FC<
             />
           </FormField>
         ))}
-    </div>
+    </>
   );
 };
 

vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/DateTimeFormattingSettings.css → vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/LongTypeFormattingSettings.css

@@ -1,4 +1,4 @@
-.vuuDateTimeFormattingSettings {
+.vuuLongColumnFormattingSettings {
   display: flex;
   flex-direction: column;
   gap: 4px;

vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/LongTypeFormattingSettings.tsx

@@ -0,0 +1,58 @@
+import React, { useCallback } from "react";
+import {
+  FormField,
+  FormFieldLabel,
+  ToggleButton,
+  ToggleButtonGroup,
+} from "@salt-ds/core";
+import { isDateTimeColumn, isTypeDescriptor } from "@finos/vuu-utils";
+import { DateTimeFormattingSettings } from "./DateTimeFormattingSettings";
+import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings";
+import { FormattingSettingsProps } from "./types";
+
+import "./LongTypeFormattingSettings.css";
+
+const classBase = "vuuLongColumnFormattingSettings";
+
+export const LongTypeFormattingSettings: React.FC<FormattingSettingsProps> = (
+  props
+) => {
+  const { column, onChangeType } = props;
+  const type = isTypeDescriptor(column.type) ? column.type.name : column.type;
+
+  const handleToggleChange = useCallback(
+    (event: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+      const value = event.currentTarget.value as ToggleValue;
+      onChangeType(value);
+    },
+    [onChangeType]
+  );
+
+  return (
+    <div className={classBase}>
+      <FormField>
+        <FormFieldLabel>{"Type inferred as"}</FormFieldLabel>
+        <ToggleButtonGroup
+          className="vuuToggleButtonGroup"
+          onChange={handleToggleChange}
+          value={type ?? "number"}
+        >
+          {toggleValues.map((v) => (
+            <ToggleButton key={v} value={v}>
+              {v.toUpperCase()}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+      </FormField>
+
+      {isDateTimeColumn(column) ? (
+        <DateTimeFormattingSettings {...props} column={column} />
+      ) : (
+        <BaseNumericFormattingSettings {...props} />
+      )}
+    </div>
+  );
+};
+
+const toggleValues = ["number", "date/time"] as const;
+type ToggleValue = (typeof toggleValues)[number];

vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/index.ts

@@ -1,3 +1,3 @@
 export * from "./ColumnFormattingPanel";
-export * from "./NumericFormattingSettings";
+export * from "./BaseNumericFormattingSettings";
 export * from "./DateTimeFormattingSettings";

vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/types.ts

@@ -1,6 +1,13 @@
-import { ColumnDescriptor, ColumnTypeFormatting } from "@finos/vuu-table-types";
+import {
+  ColumnDescriptor,
+  ColumnTypeFormatting,
+  ColumnTypeSimple,
+} from "@finos/vuu-table-types";
 
-export interface FormattingSettingsProps<T extends ColumnDescriptor = ColumnDescriptor> {
+export interface FormattingSettingsProps<
+  T extends ColumnDescriptor = ColumnDescriptor
+> {
   column: T;
-  onChange: (formatting: ColumnTypeFormatting) => void;
+  onChangeFormatting: (formatting: ColumnTypeFormatting) => void;
+  onChangeType: (type: ColumnTypeSimple) => void;
 }

vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnSettingsPanel.tsx

@@ -51,6 +51,7 @@ export const ColumnSettingsPanel = ({
     onChangeCalculatedColumnName,
     onChangeFormatting,
     onChangeRendering,
+    onChangeType,
     onEditCalculatedColumn,
     onInputCommit,
     onSave,
@@ -161,6 +162,7 @@ export const ColumnSettingsPanel = ({
         column={column}
         onChangeFormatting={onChangeFormatting}
         onChangeRendering={onChangeRendering}
+        onChangeType={onChangeType}
       />
 
       {editCalculatedColumn ? (

vuu-ui/packages/vuu-table-extras/src/column-settings/useColumnSettings.ts

@@ -3,6 +3,7 @@ import {
   TableConfig,
   ColumnTypeFormatting,
   ColumnSettingsProps,
+  ColumnTypeSimple,
 } from "@finos/vuu-table-types";
 
 import {
@@ -13,6 +14,7 @@ import {
   isValidPinLocation,
   setCalculatedColumnName,
   updateColumnRenderProps,
+  updateColumnFormatting,
   updateColumnType,
 } from "@finos/vuu-utils";
 import {
@@ -180,13 +182,22 @@ export const useColumnSettings = ({
 
   const handleChangeFormatting = useCallback(
     (formatting: ColumnTypeFormatting) => {
-      const newColumn: ColumnDescriptor = updateColumnType(column, formatting);
+      const newColumn = updateColumnFormatting(column, formatting);
       setColumn(newColumn);
       onConfigChange(replaceColumn(tableConfig, newColumn));
     },
     [column, onConfigChange, tableConfig]
   );
 
+  const handleChangeType = useCallback(
+    (type: ColumnTypeSimple) => {
+      const updatedColumn = updateColumnType(column, type);
+      setColumn(updatedColumn);
+      onConfigChange(replaceColumn(tableConfig, updatedColumn));
+    },
+    [column, onConfigChange, tableConfig]
+  );
+
   const handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(
     (renderProps) => {
       if (renderProps) {
@@ -247,6 +258,7 @@ export const useColumnSettings = ({
     onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
     onChangeFormatting: handleChangeFormatting,
     onChangeRendering: handleChangeRendering,
+    onChangeType: handleChangeType,
     onEditCalculatedColumn: handleEditCalculatedcolumn,
     onInputCommit: handleInputCommit,
     onSave: handleSaveCalculatedColumn,