@finos/legend-data-cube 0.0.36 → 0.0.37

package/lib/stores/view/grid/DataCubeGridState.js

@@ -21,6 +21,7 @@ import { generateGridOptionsFromSnapshot } from './DataCubeGridConfigurationBuil
 import { DataCubeConfiguration } from '../../core/models/DataCubeConfiguration.js';
 import { DataCubeGridControllerState } from './DataCubeGridControllerState.js';
 import { DataCubeGridClientExportEngine } from './DataCubeGridClientExportEngine.js';
+import { DataCubeSettingKey } from '../../core/DataCubeSetting.js';
 /**
  * This query editor state is responsible for syncing the internal state of ag-grid
  * server-side row model data source with the data cube query state. When new snapshot
@@ -52,7 +53,7 @@ export class DataCubeGridState extends DataCubeQuerySnapshotController {
         super(view);
         makeObservable(this, {
             clientDataSource: observable,
-            queryConfiguration: observable.ref,
+            queryConfiguration: observable,
             rowLimit: observable,
             isPaginationEnabled: observable,
             setPaginationEnabled: action,
@@ -83,6 +84,9 @@ export class DataCubeGridState extends DataCubeQuerySnapshotController {
     setScrollHintText(val) {
         this.scrollHintText = val;
     }
+    get isClientConfigured() {
+        return Boolean(this._client);
+    }
     get client() {
         return guaranteeNonNullable(this._client, 'Grid client is not configured');
     }
@@ -98,7 +102,7 @@ export class DataCubeGridState extends DataCubeQuerySnapshotController {
         this.queryConfiguration = configuration;
         this.rowLimit = snapshot.data.limit;
         const gridOptions = generateGridOptionsFromSnapshot(snapshot, configuration, this.view);
-        if (this.view.dataCube.settings.enableDebugMode) {
+        if (this.view.dataCube.settings.getBooleanValue(DataCubeSettingKey.DEBUGGER__ENABLE_DEBUG_MODE)) {
             this.view.engine.debugProcess(`New Grid Options`, [
                 'Grid Options',
                 gridOptions,
@@ -106,7 +110,8 @@ export class DataCubeGridState extends DataCubeQuerySnapshotController {
         }
         this.client.updateGridOptions({
             ...gridOptions,
-            rowBuffer: this.view.dataCube.settings.gridClientRowBuffer,
+            rowBuffer: this.view.dataCube.settings.getNumericValue(DataCubeSettingKey.GRID_CLIENT__ROW_BUFFER),
+            purgeClosedRowNodes: this.view.dataCube.settings.getBooleanValue(DataCubeSettingKey.GRID_CLIENT__PURGE_CLOSED_ROW_NODES),
             // NOTE: ag-grid uses the cache block size as page size, so it's important to set this
             // in corresponding to the pagination setting, else it would cause unexpected scrolling behavior
             cacheBlockSize: this.isPaginationEnabled

package/lib/stores/view/grid/DataCubeGridState.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCubeGridState.js","sourceRoot":"","sources":["../../../../src/stores/view/grid/DataCubeGridState.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataCubeGridState.js","sourceRoot":"","sources":["../../../../src/stores/view/grid/DataCubeGridState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finos/legend-data-cube",
-  "version": "0.0.36",
-  "description": "Legend Data Cube",
+  "version": "0.0.37",
+  "description": "Legend DataCube",
   "keywords": [
     "legend",
     "legend-data-cube",
@@ -42,10 +42,10 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-art": "7.1.72",
-    "@finos/legend-code-editor": "2.0.31",
-    "@finos/legend-graph": "31.10.65",
-    "@finos/legend-shared": "10.0.64",
+    "@finos/legend-art": "7.1.73",
+    "@finos/legend-code-editor": "2.0.32",
+    "@finos/legend-graph": "32.0.0",
+    "@finos/legend-shared": "10.0.65",
     "@types/react": "19.0.2",
     "ag-grid-community": "33.0.3",
     "ag-grid-enterprise": "33.0.3",

package/src/__lib__/DataCubeEvent.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum DataCubeEvent {
+  SETTINGS__FAILURE__FOUND_UNREGISTERED_SETTING = 'data-cube.settings.failure.found-unregistered-setting',
+  SETTINGS__FAILURE__ASSIGN_INCOMPATIBLE_VALUE = 'data-cube.settings.failure.assign-incompatible-value',
+  SETTINGS__FAILURE__RETRIEVE_INCOMPATIBLE_VALUE = 'data-cube.settings.failure.retrieve-incompatible-value',
+}

package/src/components/DataCube.tsx

@@ -30,6 +30,8 @@ import type { DataCubeEngine } from '../stores/core/DataCubeEngine.js';
 import { DataCubeState } from '../stores/DataCubeState.js';
 import { type DataCubeOptions } from '../stores/DataCubeOptions.js';
 import { DataCubeContextProvider, useDataCube } from './DataCubeProvider.js';
+import type { DataCubeQuery } from '../stores/core/models/DataCubeQuery.js';
+import { FormBadge_WIP } from './core/DataCubeFormUtils.js';
 
 const DataCubeTitleBar = observer(() => {
   const dataCube = useDataCube();
@@ -59,7 +61,7 @@ const DataCubeTitleBar = observer(() => {
             transformOrigin: { vertical: 'top', horizontal: 'left' },
             classes: {
               paper: 'rounded-none mt-[1px]',
-              list: 'w-36 p-0 rounded-none border border-neutral-400 bg-white max-h-40 overflow-y-auto py-0.5',
+              list: 'w-40 p-0 rounded-none border border-neutral-400 bg-white max-h-40 overflow-y-auto py-0.5',
             },
           }}
         >
@@ -75,12 +77,13 @@ const DataCubeTitleBar = observer(() => {
             disabled={true} // TODO: enable when we set up the documentation website
           >
             See Documentation
+            <FormBadge_WIP />
           </DropdownMenuItem>
           <div className="my-0.5 h-[1px] w-full bg-neutral-200" />
           <DropdownMenuItem
             className="flex h-[22px] w-full items-center px-2.5 text-base hover:bg-neutral-100 focus:bg-neutral-100"
             onClick={() => {
-              view.dataCube.settingsDisplay.open();
+              view.dataCube.settings.display.open();
               closeMenuDropdown();
             }}
           >
@@ -99,7 +102,7 @@ const DataCubeRoot = observer(() => {
 
   useEffect(() => {
     dataCube.view
-      .initialize()
+      .initialize(dataCube.query)
       .catch((error) => dataCube.engine.logUnhandledError(error));
   }, [dataCube]);
 
@@ -118,11 +121,14 @@ const DataCubeRoot = observer(() => {
 
 export const DataCube = observer(
   (props: {
+    query: DataCubeQuery;
     engine: DataCubeEngine;
     options?: DataCubeOptions | undefined;
-  }): React.ReactElement => {
-    const { engine, options } = props;
-    const state = useLocalObservable(() => new DataCubeState(engine, options));
+  }) => {
+    const { query, engine, options } = props;
+    const state = useLocalObservable(
+      () => new DataCubeState(query, engine, options),
+    );
 
     useEffect(() => {
       state
@@ -130,12 +136,12 @@ export const DataCube = observer(
         .catch((error) => state.engine.logUnhandledError(error));
     }, [state]);
 
-    if (!state.initState.hasSucceeded) {
+    if (!state.initializeState.hasSucceeded) {
       return <></>;
     }
     return (
       <DataCubeContextProvider value={state}>
-        <DataCubeRoot />
+        <DataCubeRoot key={state.uuid} />
       </DataCubeContextProvider>
     );
   },

package/src/components/DataCubeProvider.tsx

@@ -26,5 +26,5 @@ export const DataCubeContextProvider = DataCubeStateContext.Provider;
 export const useDataCube = () =>
   guaranteeNonNullable(
     useContext(DataCubeStateContext),
-    `Can't find Data Cube in context`,
+    `Can't find DataCube state in context`,
   );

package/src/components/core/DataCubeAlert.tsx

@@ -19,11 +19,13 @@ import { noop } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import { useRef } from 'react';
 import { useDataCube } from '../DataCubeProvider.js';
+import { FormButton } from './DataCubeFormUtils.js';
 
 export enum AlertType {
+  ERROR = 'ERROR',
   INFO = 'INFO',
+  SUCCESS = 'SUCCESS',
   WARNING = 'WARNING',
-  ERROR = 'ERROR',
 }
 
 export type ActionAlertAction = { label: string; handler: () => void };
@@ -56,15 +58,18 @@ export function Alert(props: {
         })}
       >
         <div className="mr-3">
+          {type === AlertType.ERROR && (
+            <DataCubeIcon.AlertError className="flex-shrink-0 stroke-[0.5px] text-[40px] text-red-500" />
+          )}
           {type === AlertType.INFO && (
             <DataCubeIcon.AlertInfo className="flex-shrink-0 stroke-[0.5px] text-[40px] text-sky-500" />
           )}
+          {type === AlertType.SUCCESS && (
+            <DataCubeIcon.AlertSuccess className="flex-shrink-0 stroke-[0.5px] text-[40px] text-green-500" />
+          )}
           {type === AlertType.WARNING && (
             <DataCubeIcon.AlertWarning className="flex-shrink-0 stroke-[0.3px] text-[40px] text-amber-500" />
           )}
-          {type === AlertType.ERROR && (
-            <DataCubeIcon.AlertError className="flex-shrink-0 stroke-[0.5px] text-[40px] text-red-500" />
-          )}
         </div>
         <div>
           <div className="whitespace-break-spaces text-lg">{message}</div>
@@ -76,8 +81,8 @@ export function Alert(props: {
       {actions.length !== 0 && (
         <div className="flex h-10 items-center justify-center border border-t-neutral-300 px-2">
           {actions.map((action, idx) => (
-            <button
-              className="ml-2 h-6 border border-neutral-400 bg-neutral-300 px-2 first-of-type:ml-0 hover:brightness-95"
+            <FormButton
+              className="ml-2 first-of-type:ml-0"
               // eslint-disable-next-line react/no-array-index-key
               key={idx}
               onClick={() => {
@@ -87,7 +92,7 @@ export function Alert(props: {
               autoFocus={idx === 0} // UX-wise, the first action should always be the default, i.e. auto-focus on the first button
             >
               {action.label}
-            </button>
+            </FormButton>
           ))}
         </div>
       )}

package/src/components/core/DataCubeFormUtils.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { type IDisposable, editor as monacoEditorAPI } from 'monaco-editor';
 import {
   BasePopover,
   Checkbox,
@@ -35,6 +36,15 @@ import {
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { isString } from '@finos/legend-shared';
 import { useDataCube } from '../DataCubeProvider.js';
+import {
+  clearMarkers,
+  CODE_EDITOR_THEME,
+  getBaseCodeEditorOptions,
+  getCodeEditorValue,
+  normalizeLineEnding,
+  resetLineNumberGutterWidth,
+  setErrorMarkers,
+} from '@finos/legend-code-editor';
 
 export function FormBadge_WIP() {
   return (
@@ -58,6 +68,26 @@ export function FormBadge_Advanced() {
   );
 }
 
+export const FormButton = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    compact?: boolean | undefined;
+  }
+>(function FormButton(props, ref) {
+  const { className, compact, ...otherProps } = props;
+  return (
+    <button
+      ref={ref}
+      {...otherProps}
+      className={cn(
+        'flex h-6 min-w-20 items-center justify-center border border-neutral-400 bg-neutral-300 px-2.5 hover:brightness-95 disabled:cursor-not-allowed disabled:border-neutral-300 disabled:text-neutral-400 disabled:hover:brightness-100',
+        { 'h-5 text-sm': Boolean(compact) },
+        className,
+      )}
+    />
+  );
+});
+
 export const FormNumberInput = forwardRef(function FormNumberInput(
   props: React.InputHTMLAttributes<HTMLInputElement> & {
     min?: number | undefined;
@@ -451,32 +481,33 @@ function FormColorPicker(props: {
           />
         </div>
         <div className="flex">
-          {defaultColor !== undefined && (
-            <button
-              className="ml-1 h-4 w-9 border border-neutral-400 bg-neutral-300 px-1 text-xs hover:brightness-95"
-              onClick={() => {
-                setColor(defaultColor);
-              }}
-            >
-              Reset
-            </button>
-          )}
-          <button
-            className="ml-1 h-4 w-9 border border-neutral-400 bg-neutral-300 px-1 text-xs hover:brightness-95"
+          <FormButton
+            className="h-4 w-9"
             onClick={() => {
               onClose();
             }}
           >
             Cancel
-          </button>
-          <button
-            className="ml-1 h-4 w-9 border border-neutral-400 bg-neutral-300 px-1 text-xs hover:brightness-95"
+          </FormButton>
+          <FormButton
+            className="ml-1 h-4 w-9 text-xs"
+            disabled={defaultColor === undefined}
+            onClick={() => {
+              if (defaultColor !== undefined) {
+                setColor(defaultColor);
+              }
+            }}
+          >
+            Reset
+          </FormButton>
+          <FormButton
+            className="ml-1 h-4 w-9"
             onClick={() => {
               submit();
             }}
           >
             OK
-          </button>
+          </FormButton>
         </div>
       </div>
     </div>
@@ -575,3 +606,201 @@ export const FormDocumentation: React.FC<{
     </div>
   );
 };
+
+export const FormCodeEditor: React.FC<{
+  value: string;
+  updateValue?: ((val: string) => void) | undefined;
+  language: string;
+  title?: string | undefined;
+  isReadOnly?: boolean | undefined;
+  hideMinimap?: boolean | undefined;
+  hideGutter?: boolean | undefined;
+  hidePadding?: boolean | undefined;
+  hideActionBar?: boolean | undefined;
+  lineToScroll?: number | undefined;
+  extraEditorOptions?:
+    | (monacoEditorAPI.IEditorOptions & monacoEditorAPI.IGlobalEditorOptions)
+    | undefined;
+  error?:
+    | {
+        message: string;
+        sourceInformation: {
+          startLine: number;
+          startColumn: number;
+          endLine: number;
+          endColumn: number;
+        };
+      }
+    | undefined;
+}> = (props) => {
+  const {
+    value: inputValue,
+    updateValue,
+    language,
+    title,
+    isReadOnly,
+    hideMinimap,
+    hideGutter,
+    hidePadding,
+    hideActionBar,
+    lineToScroll,
+    extraEditorOptions,
+    error,
+  } = props;
+  const [editor, setEditor] = useState<
+    monacoEditorAPI.IStandaloneCodeEditor | undefined
+  >();
+  const [isWordWrap, setIsWordWrap] = useState(false);
+  const onDidChangeModelContentEventDisposer = useRef<IDisposable | undefined>(
+    undefined,
+  );
+
+  /**
+   * NOTE: we want to normalize line ending here since if the original
+   * input value includes CR '\r' character, it will get normalized, calling
+   * the updateValue method and cause a rerender. With the way we setup
+   * `onChange` method, React will warn about `setState` being called in
+   * `render` method.
+   * See https://github.com/finos/legend-studio/issues/608
+   */
+  const value = normalizeLineEnding(inputValue);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const toggleWordWrap = (): void => {
+    const updatedWordWrap = !isWordWrap;
+    setIsWordWrap(updatedWordWrap);
+    editor?.updateOptions({
+      wordWrap: updatedWordWrap ? 'on' : 'off',
+    });
+  };
+
+  useEffect(() => {
+    if (!editor && ref.current) {
+      const element = ref.current;
+      const _editor = monacoEditorAPI.create(element, {
+        ...getBaseCodeEditorOptions(),
+        fontSize: 12,
+        theme: CODE_EDITOR_THEME.GITHUB_LIGHT,
+        // layout
+        glyphMargin: !hidePadding,
+        padding: !hidePadding ? { top: 20, bottom: 20 } : { top: 0, bottom: 0 },
+
+        formatOnType: true,
+        formatOnPaste: true,
+      });
+      setEditor(_editor);
+    }
+  }, [hidePadding, editor]);
+
+  useEffect(() => {
+    if (editor) {
+      resetLineNumberGutterWidth(editor);
+      const model = editor.getModel();
+      if (model) {
+        monacoEditorAPI.setModelLanguage(model, language);
+      }
+    }
+  }, [editor, language]);
+
+  useEffect(() => {
+    if (editor && lineToScroll !== undefined) {
+      editor.revealLineInCenter(lineToScroll);
+    }
+  }, [editor, lineToScroll]);
+
+  if (editor) {
+    // dispose the old editor content setter in case the `updateValue` handler changes
+    // for a more extensive note on this, see `LambdaEditor`
+    onDidChangeModelContentEventDisposer.current?.dispose();
+    onDidChangeModelContentEventDisposer.current =
+      editor.onDidChangeModelContent(() => {
+        const currentVal = getCodeEditorValue(editor);
+        if (currentVal !== value) {
+          updateValue?.(currentVal);
+        }
+      });
+
+    // Set the text value and editor options
+    const currentValue = getCodeEditorValue(editor);
+    if (currentValue !== value) {
+      editor.setValue(value);
+    }
+    editor.updateOptions({
+      readOnly: Boolean(isReadOnly),
+      minimap: { enabled: !hideMinimap },
+      // Hide the line number gutter
+      // See https://github.com/microsoft/vscode/issues/30795
+      ...(hideGutter
+        ? {
+            glyphMargin: !hidePadding,
+            folding: false,
+            lineNumbers: 'off',
+            lineDecorationsWidth: 0,
+          }
+        : {}),
+      ...(extraEditorOptions ?? {}),
+    });
+    const model = editor.getModel();
+    if (model) {
+      if (error?.sourceInformation) {
+        setErrorMarkers(model, [
+          {
+            message: error.message,
+            startLineNumber: error.sourceInformation.startLine,
+            startColumn: error.sourceInformation.startColumn,
+            endLineNumber: error.sourceInformation.endLine,
+            endColumn: error.sourceInformation.endColumn,
+          },
+        ]);
+      } else {
+        clearMarkers();
+      }
+    }
+  }
+
+  // dispose editor
+  useEffect(
+    () => () => {
+      if (editor) {
+        editor.dispose();
+
+        onDidChangeModelContentEventDisposer.current?.dispose();
+      }
+    },
+    [editor],
+  );
+
+  return (
+    <div className="h-full w-full border border-neutral-200">
+      {!hideActionBar && (
+        <div className="flex h-5 w-full items-center justify-between border-b border-neutral-200">
+          <div className="pl-1 text-sm text-neutral-500">{title ?? ''}</div>
+          <button
+            tabIndex={-1}
+            className={cn(
+              'flex aspect-square h-5 items-center justify-center text-neutral-300 hover:text-neutral-600',
+              {
+                'text-neutral-600': isWordWrap,
+              },
+            )}
+            onClick={toggleWordWrap}
+            title={`[${isWordWrap ? 'on' : 'off'}] Toggle word wrap`}
+          >
+            <DataCubeIcon.WordWrap />
+          </button>
+        </div>
+      )}
+      <div
+        className={cn('relative h-full w-full', {
+          'code-editor__content--padding': !hidePadding,
+          'h-[calc(100%_-_20px)]': !hideActionBar,
+        })}
+      >
+        <div
+          className="absolute left-0 top-0 h-full w-full overflow-hidden"
+          ref={ref}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/core/DataCubeLayoutManager.tsx

@@ -163,7 +163,7 @@ export const Window = (props: {
             <DataCubeIcon.X />
           </button>
         </div>
-        <div className="h-[calc(100%_-_24px)] w-full">
+        <div className="h-[calc(100%_-_24px)] w-full overflow-auto">
           {windowState.configuration.contentRenderer(windowState.configuration)}
         </div>
       </div>