@finos/legend-application-repl 0.0.48 → 0.0.49

package/src/components/repl/Form.tsx

@@ -29,14 +29,14 @@ import {
   HexColorInput,
   parseColor,
   TailwindCSSPalette,
+  useForkRef,
   type CheckboxProps,
   type DropdownMenuItemProps,
   type DropdownMenuProps,
   type TailwindCSSColorScale,
   type TailwindCSSColorScaleKey,
 } from '@finos/legend-art';
-import { toNumber } from '@finos/legend-shared';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useREPLStore } from '../REPLStoreProvider.js';
 
 export function FormBadge_WIP() {
@@ -61,110 +61,149 @@ export function FormBadge_Advanced() {
   );
 }
 
-export const FormNumberInput = forwardRef(
-  function DataCubeEditorBaseNumberInput(
-    props: React.InputHTMLAttributes<HTMLInputElement> & {
-      min?: number | undefined;
-      max?: number | undefined;
-      step?: number | undefined;
-      isValid?: (value: number | undefined) => boolean;
-      isDecimal?: boolean | undefined;
-      defaultValue?: number | undefined;
-      value: number | undefined;
-      setValue: (value?: number | undefined) => void;
-      className?: string | undefined;
-    },
-    ref: React.Ref<HTMLInputElement>,
-  ) {
-    const {
-      min,
-      max,
-      step,
-      value,
-      setValue,
-      isValid,
-      isDecimal,
-      defaultValue,
-      disabled,
-      className,
-    } = props;
-    const [inputValue, setInputValue] = useState<string | number>(value ?? '');
+export const FormNumberInput = forwardRef(function FormNumberInput(
+  props: React.InputHTMLAttributes<HTMLInputElement> & {
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    isValid?: (value: number | undefined) => boolean;
+    isDecimal?: boolean | undefined;
+    defaultValue?: number | undefined;
+    value: number | undefined;
+    setValue: (value?: number | undefined) => void;
+    className?: string | undefined;
+  },
+  ref: React.Ref<HTMLInputElement>,
+) {
+  const {
+    min,
+    max,
+    step,
+    value,
+    setValue,
+    isValid,
+    isDecimal,
+    defaultValue,
+    disabled,
+    className,
+  } = props;
+  const [inputValue, setInputValue] = useState<string | number>(value ?? '');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const handleRef = useForkRef(inputRef, ref);
 
-    useEffect(() => {
-      setInputValue(value ?? '');
-    }, [value]);
+  useEffect(() => {
+    setInputValue(value ?? '');
+  }, [value]);
 
-    return (
-      <input
-        className={cn(
-          'h-5 flex-shrink-0 border border-neutral-400 px-1.5 text-sm disabled:border-neutral-300 disabled:bg-neutral-50 disabled:text-neutral-300',
-          className,
-        )}
-        ref={ref}
-        inputMode="numeric"
-        type="number"
-        min={min}
-        max={max}
-        step={step}
-        value={inputValue}
-        disabled={Boolean(disabled)}
-        onChange={(event) => {
-          const newInputValue = event.target.value;
-          setInputValue(newInputValue);
-          const numericValue = isDecimal
-            ? toNumber(newInputValue)
-            : parseInt(newInputValue, 10);
-          if (
-            isNaN(numericValue) ||
-            // NOTE: `toNumber` parses empty string as `0`, which is not what we want, so we want to do the explicit check here
-            !newInputValue ||
-            (isValid !== undefined
-              ? !isValid(numericValue)
-              : (min !== undefined && numericValue < min) ||
-                (max !== undefined && numericValue > max))
-          ) {
-            return;
+  return (
+    <input
+      className={cn(
+        'h-5 flex-shrink-0 border border-neutral-400 px-1.5 text-sm disabled:border-neutral-300 disabled:bg-neutral-50 disabled:text-neutral-300',
+        className,
+      )}
+      ref={handleRef}
+      inputMode="numeric"
+      type="number"
+      min={min}
+      max={max}
+      step={step}
+      value={inputValue}
+      disabled={Boolean(disabled)}
+      onKeyDown={(event) => {
+        if (event.code === 'Escape') {
+          inputRef.current?.select();
+        } else if (event.code === 'ArrowUp') {
+          event.preventDefault();
+          if (value !== undefined && step !== undefined) {
+            const newValue = value + step;
+            if (
+              (min !== undefined && newValue < min) ||
+              (max !== undefined && newValue > max)
+            ) {
+              return;
+            }
+            setInputValue(newValue.toString());
+            setValue(newValue);
           }
-          setValue(numericValue);
-        }}
-        onBlur={() => {
-          const numericValue = isDecimal
-            ? toNumber(inputValue)
-            : parseInt(inputValue.toString(), 10);
-          if (
-            isNaN(numericValue) ||
-            // NOTE: `toNumber` parses empty string as `0`, which is not what we want, so we want to do the explicit check here
-            !inputValue ||
-            (isValid !== undefined
-              ? !isValid(numericValue)
-              : (min !== undefined && numericValue < min) ||
-                (max !== undefined && numericValue > max))
-          ) {
-            setValue(defaultValue);
-            setInputValue(defaultValue ?? '');
-          } else {
-            setInputValue(value ?? '');
+        } else if (event.code === 'ArrowDown') {
+          event.preventDefault();
+          if (value !== undefined && step !== undefined) {
+            const newValue = value - step;
+            if (
+              (min !== undefined && newValue < min) ||
+              (max !== undefined && newValue > max)
+            ) {
+              return;
+            }
+            setInputValue(newValue.toString());
+            setValue(newValue);
           }
-        }}
-      />
-    );
-  },
-);
+        }
+      }}
+      onChange={(event) => {
+        const newInputValue = event.target.value;
+        setInputValue(newInputValue);
+        const numericValue = isDecimal
+          ? Number(newInputValue)
+          : parseInt(newInputValue, 10);
+        if (
+          isNaN(numericValue) ||
+          !newInputValue || // Explicitly check this case since `Number()` parses empty string as `0`
+          (isValid !== undefined
+            ? !isValid(numericValue)
+            : (min !== undefined && numericValue < min) ||
+              (max !== undefined && numericValue > max))
+        ) {
+          return;
+        }
+        setValue(numericValue);
+      }}
+      onBlur={() => {
+        const numericValue = isDecimal
+          ? Number(inputValue)
+          : parseInt(inputValue.toString(), 10);
+        if (
+          isNaN(numericValue) ||
+          !inputValue || // Explicitly check this case since `Number()` parses empty string as `0`
+          (isValid !== undefined
+            ? !isValid(numericValue)
+            : (min !== undefined && numericValue < min) ||
+              (max !== undefined && numericValue > max))
+        ) {
+          setValue(defaultValue);
+          setInputValue(defaultValue ?? '');
+        } else {
+          setInputValue(value ?? '');
+        }
+      }}
+    />
+  );
+});
 
-export function FormTextInput(
-  props: React.InputHTMLAttributes<HTMLInputElement>,
-) {
+export const FormTextInput = forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(function FormTextInput(props, ref) {
   const { className, ...otherProps } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const handleRef = useForkRef(inputRef, ref);
+
   return (
     <input
+      ref={handleRef}
       className={cn(
         'h-5 flex-shrink-0 border border-neutral-400 px-1.5 text-sm disabled:border-neutral-300 disabled:bg-neutral-50 disabled:text-neutral-300',
         className,
       )}
+      onKeyDown={(event) => {
+        if (event.code === 'Escape') {
+          inputRef.current?.select();
+        }
+      }}
       {...otherProps}
     />
   );
-}
+});
 
 export function FormCheckbox(
   props: CheckboxProps & {
@@ -207,14 +246,22 @@ export function FormCheckbox(
   );
 }
 
-export function FormDropdownMenuTrigger(
-  props: React.ButtonHTMLAttributes<HTMLButtonElement>,
-) {
-  const { children, className, ...otherProps } = props;
+export const FormDropdownMenuTrigger = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    open?: boolean | undefined;
+  }
+>(function FormDropdownMenuTrigger(props, ref) {
+  const { children, className, open, ...otherProps } = props;
   return (
     <button
+      ref={ref}
       className={cn(
-        'group flex h-5 flex-shrink-0 items-center justify-between border border-neutral-400 pl-1.5 text-sm disabled:select-none disabled:border-neutral-300 disabled:bg-neutral-50 disabled:text-neutral-300',
+        'group flex h-5 flex-shrink-0 items-center justify-between border border-neutral-400 bg-white pl-1.5 text-sm disabled:select-none disabled:border-neutral-300 disabled:bg-neutral-50 disabled:text-neutral-300',
+        {
+          'border-sky-600': Boolean(open),
+          'bg-sky-100': Boolean(open),
+        },
         className,
       )}
       {...otherProps}
@@ -227,7 +274,7 @@ export function FormDropdownMenuTrigger(
       </div>
     </button>
   );
-}
+});
 
 export function FormDropdownMenu(props: DropdownMenuProps) {
   const { className, ...otherProps } = props;
@@ -252,7 +299,7 @@ export function FormDropdownMenuItem(props: DropdownMenuItemProps) {
   return (
     <DropdownMenuItem
       className={cn(
-        'flex h-5 w-full items-center px-1.5 text-sm hover:bg-neutral-100 focus-visible:bg-neutral-100',
+        'flex h-5 w-full items-center px-1.5 text-sm hover:bg-neutral-100 focus:bg-sky-600 focus:text-white',
         className,
       )}
       {...otherProps}

package/src/stores/dataCube/DataCubeEngine.ts

@@ -29,10 +29,38 @@ import {
   type DataCubeInfrastructureInfo,
   type CompletionItem,
 } from '../../server/REPLEngine.js';
-import { guaranteeType } from '@finos/legend-shared';
+import { guaranteeNonNullable, guaranteeType } from '@finos/legend-shared';
 import type { LegendREPLApplicationStore } from '../LegendREPLBaseStore.js';
 import type { REPLStore } from '../REPLStore.js';
 import { action, makeObservable, observable } from 'mobx';
+import { DataCubeQueryFilterOperation__Equal } from './core/filter/DataCubeQueryFilterOperation__Equal.js';
+import { DataCubeQueryFilterOperation__LessThanOrEqual } from './core/filter/DataCubeQueryFilterOperation__LessThanOrEqual.js';
+import { DataCubeQueryFilterOperation__LessThan } from './core/filter/DataCubeQueryFilterOperation__LessThan.js';
+import { DataCubeQueryFilterOperation__GreaterThanOrEqual } from './core/filter/DataCubeQueryFilterOperation__GreaterThanOrEqual.js';
+import { DataCubeQueryFilterOperation__GreaterThan } from './core/filter/DataCubeQueryFilterOperation__GreaterThan.js';
+import { DataCubeQueryFilterOperation__NotEqual } from './core/filter/DataCubeQueryFilterOperation__NotEqual.js';
+import { DataCubeQueryFilterOperation__EqualColumn } from './core/filter/DataCubeQueryFilterOperation__EqualColumn.js';
+import { DataCubeQueryFilterOperation__EqualCaseInsensitive } from './core/filter/DataCubeQueryFilterOperation__EqualCaseInsensitive.js';
+import { DataCubeQueryFilterOperation__NotEqualCaseInsensitive } from './core/filter/DataCubeQueryFilterOperation__NotEqualCaseInsensitive.js';
+import { DataCubeQueryFilterOperation__EqualCaseInsensitiveColumn } from './core/filter/DataCubeQueryFilterOperation__EqualCaseInsensitiveColumn.js';
+import { DataCubeQueryFilterOperation__NotEqualCaseInsensitiveColumn } from './core/filter/DataCubeQueryFilterOperation__NotEqualCaseInsensitiveColumn.js';
+import { DataCubeQueryFilterOperation__NotEqualColumn } from './core/filter/DataCubeQueryFilterOperation__NotEqualColumn.js';
+import { DataCubeQueryFilterOperation__LessThanColumn } from './core/filter/DataCubeQueryFilterOperation__LessThanColumn.js';
+import { DataCubeQueryFilterOperation__LessThanOrEqualColumn } from './core/filter/DataCubeQueryFilterOperation__LessThanOrEqualColumn.js';
+import { DataCubeQueryFilterOperation__GreaterThanColumn } from './core/filter/DataCubeQueryFilterOperation__GreaterThanColumn.js';
+import { DataCubeQueryFilterOperation__GreaterThanOrEqualColumn } from './core/filter/DataCubeQueryFilterOperation__GreaterThanOrEqualColumn.js';
+import { DataCubeQueryFilterOperation__Contain } from './core/filter/DataCubeQueryFilterOperation__Contain.js';
+import { DataCubeQueryFilterOperation__ContainCaseInsensitive } from './core/filter/DataCubeQueryFilterOperation__ContainCaseInsensitive.js';
+import { DataCubeQueryFilterOperation__NotContain } from './core/filter/DataCubeQueryFilterOperation__NotContain.js';
+import { DataCubeQueryFilterOperation__StartWith } from './core/filter/DataCubeQueryFilterOperation__StartWith.js';
+import { DataCubeQueryFilterOperation__StartWithCaseInsensitive } from './core/filter/DataCubeQueryFilterOperation__StartWithCaseInsensitive.js';
+import { DataCubeQueryFilterOperation__NotStartWith } from './core/filter/DataCubeQueryFilterOperation__NotStartWith.js';
+import { DataCubeQueryFilterOperation__EndWith } from './core/filter/DataCubeQueryFilterOperation__EndWith.js';
+import { DataCubeQueryFilterOperation__EndWithCaseInsensitive } from './core/filter/DataCubeQueryFilterOperation__EndWithCaseInsensitive.js';
+import { DataCubeQueryFilterOperation__NotEndWith } from './core/filter/DataCubeQueryFilterOperation__NotEndWith.js';
+import { DataCubeQueryFilterOperation__IsNull } from './core/filter/DataCubeQueryFilterOperation__IsNull.js';
+import { DataCubeQueryFilterOperation__IsNotNull } from './core/filter/DataCubeQueryFilterOperation__IsNotNull.js';
+import type { DataCubeQueryFilterOperation } from './core/filter/DataCubeQueryFilterOperation.js';
 
 export const DEFAULT_ENABLE_DEBUG_MODE = false;
 export const DEFAULT_GRID_CLIENT_ROW_BUFFER = 50;
@@ -44,6 +72,39 @@ export class DataCubeEngine {
   readonly application: LegendREPLApplicationStore;
   private readonly client: REPLServerClient;
 
+  readonly filterOperations = [
+    new DataCubeQueryFilterOperation__LessThan(),
+    new DataCubeQueryFilterOperation__LessThanOrEqual(),
+    new DataCubeQueryFilterOperation__Equal(),
+    new DataCubeQueryFilterOperation__NotEqual(),
+    new DataCubeQueryFilterOperation__GreaterThanOrEqual(),
+    new DataCubeQueryFilterOperation__GreaterThan(),
+
+    new DataCubeQueryFilterOperation__IsNull(),
+    new DataCubeQueryFilterOperation__IsNotNull(),
+
+    new DataCubeQueryFilterOperation__EqualCaseInsensitive(),
+    new DataCubeQueryFilterOperation__NotEqualCaseInsensitive(),
+    new DataCubeQueryFilterOperation__Contain(),
+    new DataCubeQueryFilterOperation__ContainCaseInsensitive(),
+    new DataCubeQueryFilterOperation__NotContain(),
+    new DataCubeQueryFilterOperation__StartWith(),
+    new DataCubeQueryFilterOperation__StartWithCaseInsensitive(),
+    new DataCubeQueryFilterOperation__NotStartWith(),
+    new DataCubeQueryFilterOperation__EndWith(),
+    new DataCubeQueryFilterOperation__EndWithCaseInsensitive(),
+    new DataCubeQueryFilterOperation__NotEndWith(),
+
+    new DataCubeQueryFilterOperation__LessThanColumn(),
+    new DataCubeQueryFilterOperation__LessThanOrEqualColumn(),
+    new DataCubeQueryFilterOperation__EqualColumn(),
+    new DataCubeQueryFilterOperation__NotEqualColumn(),
+    new DataCubeQueryFilterOperation__EqualCaseInsensitiveColumn(),
+    new DataCubeQueryFilterOperation__NotEqualCaseInsensitiveColumn(),
+    new DataCubeQueryFilterOperation__GreaterThanColumn(),
+    new DataCubeQueryFilterOperation__GreaterThanOrEqualColumn(),
+  ];
+
   enableDebugMode = DEFAULT_ENABLE_DEBUG_MODE;
   gridClientRowBuffer = DEFAULT_GRID_CLIENT_ROW_BUFFER;
   gridClientPurgeClosedRowNodes = DEFAULT_GRID_CLIENT_PURGE_CLOSED_ROW_NODES;
@@ -69,6 +130,13 @@ export class DataCubeEngine {
     this.client = repl.client;
   }
 
+  getFilterOperation(operator: string): DataCubeQueryFilterOperation {
+    return guaranteeNonNullable(
+      this.filterOperations.find((op) => op.operator === operator),
+      `Can't find filter operation '${operator}'`,
+    );
+  }
+
   setEnableDebugMode(enableDebugMode: boolean) {
     this.enableDebugMode = enableDebugMode;
   }

package/src/stores/dataCube/DataCubeState.ts

@@ -20,7 +20,7 @@ import { DataCubeEditorState } from './editor/DataCubeEditorState.js';
 import { assertErrorThrown, uuid } from '@finos/legend-shared';
 import { DataCubeQuerySnapshotManager } from './core/DataCubeQuerySnapshotManager.js';
 import type { LegendREPLApplicationStore } from '../LegendREPLBaseStore.js';
-import { DataCubeCoreState } from './core/DataCubeCoreState.js';
+import { DataCubeStaticContentDisplayState } from './core/DataCubeStaticContentDisplayState.js';
 import { validateAndBuildQuerySnapshot } from './core/DataCubeQuerySnapshotBuilder.js';
 import { action, makeObservable, observable } from 'mobx';
 import type { DataCubeEngine } from './DataCubeEngine.js';
@@ -47,7 +47,7 @@ export class DataCubeState {
   readonly engine: DataCubeEngine;
   readonly snapshotManager: DataCubeQuerySnapshotManager;
 
-  readonly core: DataCubeCoreState;
+  readonly staticContent: DataCubeStaticContentDisplayState;
   readonly grid: DataCubeGridState;
   readonly editor: DataCubeEditorState;
 
@@ -66,7 +66,7 @@ export class DataCubeState {
 
     // NOTE: snapshot manager must be instantiated before subscribers
     this.snapshotManager = new DataCubeQuerySnapshotManager(this);
-    this.core = new DataCubeCoreState(this);
+    this.staticContent = new DataCubeStaticContentDisplayState(this);
     this.editor = new DataCubeEditorState(this);
     this.grid = new DataCubeGridState(this);
   }
@@ -87,12 +87,16 @@ export class DataCubeState {
     const task = this.newTask('Initializing');
     try {
       await Promise.all(
-        [this.core, this.editor, this.grid, this.grid.controller].map(
-          async (state) => {
-            this.snapshotManager.registerSubscriber(state);
-            await state.initialize();
-          },
-        ),
+        [
+          this.staticContent,
+          this.editor,
+          this.grid,
+          this.grid.controller,
+          // TODO this.editor.filter,
+          // TODO this.editor.extendedColumns,
+        ].map(async (state) => {
+          this.snapshotManager.registerSubscriber(state);
+        }),
       );
       const result = await this.engine.getBaseQuery();
       const initialSnapshot = validateAndBuildQuerySnapshot(

package/src/stores/dataCube/core/DataCubeConfiguration.ts

@@ -61,8 +61,6 @@ export class DataCubeColumnConfiguration {
   numberScale?: DataCubeNumberScale | undefined;
   missingValueDisplayText?: string | undefined;
 
-  hPivotSortFunction?: string | undefined;
-
   fontFamily?: DataCubeFont | undefined;
   fontSize?: number | undefined;
   fontBold?: boolean | undefined;
@@ -87,6 +85,7 @@ export class DataCubeColumnConfiguration {
   minWidth?: number | undefined;
   maxWidth?: number | undefined;
   pinned?: DataCubeColumnPinPlacement | undefined;
+
   displayAsLink = false;
   linkLabelParameter?: string | undefined;
 
@@ -113,7 +112,6 @@ export class DataCubeColumnConfiguration {
       fontStrikethrough: optional(primitive()),
       fontUnderline: optional(primitive()),
       hideFromView: primitive(),
-      hPivotSortFunction: optional(primitive()),
       kind: primitive(),
       linkLabelParameter: optional(primitive()),
       maxWidth: optional(primitive()),