@finos/legend-data-cube 0.0.36 → 0.0.38

package/src/components/DataCubeView.tsx

@@ -14,57 +14,33 @@
  * limitations under the License.
  */
 
-import { DataCubeIcon, ProgressBar } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { DataCubeViewState } from '../stores/view/DataCubeViewState.js';
 import { DataCubeGrid } from './view/grid/DataCubeGrid.js';
-
-const DataCubeStatusBar = observer((props: { view: DataCubeViewState }) => {
-  const { view } = props;
-
-  return (
-    <div className="flex h-5 w-full justify-between bg-neutral-100">
-      <div className="flex">
-        <button
-          className="flex items-center px-2 text-sky-600 hover:text-sky-700"
-          onClick={() => view.editor.display.open()}
-        >
-          <DataCubeIcon.Settings className="text-xl" />
-          <div className="pl-0.5 underline">Properties</div>
-        </button>
-        <div className="flex">
-          <button
-            className="flex items-center text-sky-600 hover:text-sky-700"
-            onClick={() => {
-              view.filter.display.open();
-            }}
-          >
-            <DataCubeIcon.TableFilter className="text-lg" />
-            <div className="pl-0.5 underline">Filter</div>
-          </button>
-        </div>
-      </div>
-      <div className="flex items-center px-2">
-        <div className="flex h-3.5 w-48 border-[0.5px] border-neutral-300">
-          {view.runningTasks.size > 0 && (
-            <ProgressBar
-              classes={{
-                root: 'h-3.5 w-full bg-transparent',
-                bar1Indeterminate: 'bg-green-500',
-                bar2Indeterminate: 'bg-green-500',
-              }}
-              variant="indeterminate"
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-});
+import { DataCubeStatusBar } from './DataCubeStatusBar.js';
+import {
+  DataCubePlaceholderErrorDisplay,
+  DataCubeViewPlaceholder,
+} from './DataCubePlaceholder.js';
+import { useEffect } from 'react';
 
 export const DataCubeView = observer((props: { view: DataCubeViewState }) => {
   const { view } = props;
 
+  useEffect(() => {
+    return () => view.dispose();
+  }, [view]);
+
+  if (view.initializeState.hasFailed) {
+    return (
+      <DataCubeViewPlaceholder>
+        <DataCubePlaceholderErrorDisplay
+          message="Initialization Failure"
+          prompt="Resolve the issue and reload."
+        />
+      </DataCubeViewPlaceholder>
+    );
+  }
   return (
     <>
       <DataCubeGrid view={view} />

package/src/components/core/DataCubeAlert.tsx

@@ -14,29 +14,12 @@
  * limitations under the License.
  */
 
-import { cn, DataCubeIcon, Dialog } from '@finos/legend-art';
-import { noop } from '@finos/legend-shared';
-import { observer } from 'mobx-react-lite';
-import { useRef } from 'react';
-import { useDataCube } from '../DataCubeProvider.js';
-
-export enum AlertType {
-  INFO = 'INFO',
-  WARNING = 'WARNING',
-  ERROR = 'ERROR',
-}
-
-export type ActionAlertAction = { label: string; handler: () => void };
-
-export type ActionAlert = {
-  title?: string | undefined;
-  message: string;
-  prompt?: string | undefined;
-  type: AlertType;
-  text?: string | undefined;
-  actions?: ActionAlertAction[] | undefined;
-  onClose?: () => void;
-};
+import { cn, DataCubeIcon } from '@finos/legend-art';
+import { FormButton } from './DataCubeFormUtils.js';
+import {
+  AlertType,
+  type ActionAlertAction,
+} from '../../stores/services/DataCubeAlertService.js';
 
 export function Alert(props: {
   message: string;
@@ -56,15 +39,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 +62,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,85 +73,10 @@ 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>
       )}
     </div>
   );
 }
-
-const BlockingActionAlertContent = observer((props: { alert: ActionAlert }) => {
-  const { alert } = props;
-  const { title, message, prompt, type, onClose, actions } = alert;
-  const ref = useRef<HTMLDivElement>(null);
-  const dataCube = useDataCube();
-
-  // set the width and height of the dialog to make sure content overflow works properly
-  const handleEnter = () => {
-    if (ref.current?.parentElement) {
-      const { width, height } =
-        ref.current.parentElement.getBoundingClientRect();
-      ref.current.style.width = `${width}px`;
-      ref.current.style.height = `${height}px`;
-    }
-  };
-
-  return (
-    <Dialog
-      open={true}
-      onClose={noop} // disallow closing dialog by using Esc key or clicking on the backdrop
-      TransitionProps={{
-        onEnter: handleEnter,
-      }}
-      PaperProps={{
-        elevation: 0,
-      }}
-      slotProps={{
-        backdrop: {
-          classes: {
-            root: 'bg-black !opacity-25',
-          },
-        },
-      }}
-      classes={{
-        root: 'h-full w-full flex items-center justify-center',
-        paper: 'min-h-10 min-w-40 rounded-none shadow-md',
-      }}
-    >
-      <div
-        className="border border-neutral-400 bg-neutral-200 shadow-xl"
-        ref={ref}
-      >
-        <div className="flex h-6 w-full select-none items-center justify-between border-b border-b-neutral-300 bg-white">
-          <div className="px-2">{title ?? ''}</div>
-        </div>
-        <div className="h-[calc(100%_-_24px)] w-full">
-          <Alert
-            type={type}
-            message={message}
-            text={prompt}
-            actions={(actions ?? []).map((action) => ({
-              label: action.label,
-              handler: () => {
-                action.handler();
-                onClose?.();
-                dataCube.alertAction(undefined);
-              },
-            }))}
-          />
-        </div>
-      </div>
-    </Dialog>
-  );
-});
-
-export const DataCubeBlockingActionAlert = observer(() => {
-  const dataCube = useDataCube();
-  const actionAlert = dataCube.currentActionAlert;
-
-  if (!actionAlert) {
-    return null;
-  }
-  return <BlockingActionAlertContent alert={actionAlert} />;
-});

package/src/components/core/DataCubeDocumentationPanel.tsx

@@ -21,7 +21,7 @@ import { useDataCube } from '../DataCubeProvider.js';
 
 export const DocumentationPanel = observer(() => {
   const dataCube = useDataCube();
-  const entry = dataCube.currentDocumentationEntry;
+  const entry = dataCube.documentationService.currentEntry;
 
   if (!entry) {
     return null;

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>
@@ -542,18 +573,19 @@ export const FormDocumentation: React.FC<{
   className?: string | undefined;
 }> = ({ documentationKey, title, className }) => {
   const dataCube = useDataCube();
-  const engine = dataCube.engine;
-  const documentationEntry = engine.getDocumentationEntry(documentationKey);
+  const _documentationService = dataCube.documentationService;
+  const documentationEntry =
+    dataCube.documentationService.getEntry(documentationKey);
   const openDocLink: React.MouseEventHandler<HTMLDivElement> = (event) => {
     event.preventDefault();
     event.stopPropagation();
-    const entry = engine.getDocumentationEntry(documentationKey);
+    const entry = _documentationService.getEntry(documentationKey);
     if (entry) {
-      if (engine.shouldDisplayDocumentationEntry(entry)) {
-        dataCube.openDocumentationEntry(entry);
-        dataCube.documentationDisplay.open();
+      if (_documentationService.shouldDisplayDocumentationEntry(entry)) {
+        dataCube.documentationService.setCurrentEntry(entry);
+        dataCube.documentationService.display.open();
       } else if (entry.url) {
-        engine.openLink(entry.url);
+        dataCube.navigationService.openLink(entry.url);
       }
     }
   };
@@ -561,7 +593,9 @@ export const FormDocumentation: React.FC<{
   if (
     !documentationEntry ||
     (!documentationEntry.url &&
-      !engine.shouldDisplayDocumentationEntry(documentationEntry))
+      !_documentationService.shouldDisplayDocumentationEntry(
+        documentationEntry,
+      ))
   ) {
     return null;
   }
@@ -575,3 +609,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 → DataCubeLayout.tsx}

@@ -22,19 +22,24 @@ import {
   WINDOW_DEFAULT_MIN_WIDTH,
   WINDOW_DEFAULT_OFFSET,
   WINDOW_DEFAULT_WIDTH,
-  type LayoutManagerState,
+  type WindowSpecification,
   type WindowState,
-} from '../../stores/core/DataCubeLayoutManagerState.js';
+  type LayoutManager,
+} from '../../stores/services/DataCubeLayoutService.js';
 import { observer } from 'mobx-react-lite';
 
 export const Window = (props: {
   parent?: React.RefObject<HTMLElement> | undefined;
-  layout: LayoutManagerState;
+  layout: LayoutManager;
   windowState: WindowState;
 }) => {
   const { parent, layout, windowState } = props;
   const configuration = windowState.configuration.window;
-  const [windowSpec, setWindowSpec] = useState(() => {
+  const [windowSpec, _setWindowSpec] = useState(() => {
+    if (windowState.specification) {
+      return windowState.specification;
+    }
+
     const x = configuration.x ?? WINDOW_DEFAULT_OFFSET;
     const y = configuration.y ?? WINDOW_DEFAULT_OFFSET;
     const width = configuration.width ?? WINDOW_DEFAULT_WIDTH;
@@ -71,14 +76,22 @@ export const Window = (props: {
         ? containerHeight - Math.abs(y) - WINDOW_DEFAULT_OFFSET
         : height;
 
-    return {
+    const spec = {
       x: x < 0 ? containerWidth - Math.abs(x) - finalWidth : x,
       y: y < 0 ? containerHeight - Math.abs(y) - finalHeight : y,
       width: finalWidth,
       height: finalHeight,
     };
+    windowState.setSpecification(spec);
+
+    return spec;
   });
 
+  const setWindowSpec = (val: WindowSpecification) => {
+    _setWindowSpec(val);
+    windowState.setSpecification(val);
+  };
+
   return (
     <ResizableAndDraggableBox
       className="absolute z-10"
@@ -163,7 +176,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>
@@ -171,20 +184,18 @@ export const Window = (props: {
   );
 };
 
-export const DataCubeLayoutManager = observer(
-  (props: { layout: LayoutManagerState }) => {
-    const { layout } = props;
+export const DataCubeLayout = observer((props: { layout: LayoutManager }) => {
+  const { layout } = props;
 
-    return (
-      <>
-        {layout.windows.map((windowState) => (
-          <Window
-            key={windowState.uuid}
-            layout={layout}
-            windowState={windowState}
-          />
-        ))}
-      </>
-    );
-  },
-);
+  return (
+    <>
+      {layout.windows.map((windowState) => (
+        <Window
+          key={windowState.uuid}
+          layout={layout}
+          windowState={windowState}
+        />
+      ))}
+    </>
+  );
+});