@finos/legend-data-cube 0.0.37 → 0.0.39

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,31 +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';
+import { cn, DataCubeIcon } from '@finos/legend-art';
 import { FormButton } from './DataCubeFormUtils.js';
-
-export enum AlertType {
-  ERROR = 'ERROR',
-  INFO = 'INFO',
-  SUCCESS = 'SUCCESS',
-  WARNING = 'WARNING',
-}
-
-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 {
+  AlertType,
+  type ActionAlertAction,
+} from '../../stores/services/DataCubeAlertService.js';
 
 export function Alert(props: {
   message: string;
@@ -99,78 +80,3 @@ export function Alert(props: {
     </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

@@ -573,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);
       }
     }
   };
@@ -592,7 +593,9 @@ export const FormDocumentation: React.FC<{
   if (
     !documentationEntry ||
     (!documentationEntry.url &&
-      !engine.shouldDisplayDocumentationEntry(documentationEntry))
+      !_documentationService.shouldDisplayDocumentationEntry(
+        documentationEntry,
+      ))
   ) {
     return null;
   }

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"
@@ -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}
+        />
+      ))}
+    </>
+  );
+});

package/src/components/core/DataCubePureCodeEditorUtils.tsx

@@ -19,9 +19,12 @@ import {
   languages as monacoLanguagesAPI,
   type IPosition,
 } from 'monaco-editor';
-import type { CompletionItem } from '../../stores/core/DataCubeEngine.js';
+import type {
+  CompletionItem,
+  DataCubeEngine,
+} from '../../stores/core/DataCubeEngine.js';
 import type { V1_Lambda } from '@finos/legend-graph';
-import type { DataCubeViewState } from '../../stores/view/DataCubeViewState.js';
+import type { DataCubeSource } from '../../stores/core/model/DataCubeSource.js';
 
 // Since we render the editor in a window which has been CSS transformed, and monaco-editor renders
 // the widgets with position=fixed, the position of the widgets will be off, we need to move the root
@@ -43,7 +46,8 @@ export async function getCodeSuggestions(
   position: IPosition,
   model: monacoEditorAPI.ITextModel,
   prefix: string | undefined,
-  view: DataCubeViewState,
+  engine: DataCubeEngine,
+  source: DataCubeSource,
   baseQueryBuilder: () => V1_Lambda,
 ) {
   const textUntilPosition = model.getValueInRange({
@@ -57,10 +61,10 @@ export async function getCodeSuggestions(
   let suggestions: CompletionItem[] = [];
 
   try {
-    suggestions = await view.engine.getQueryTypeahead(
+    suggestions = await engine.getQueryTypeahead(
       (prefix ?? '') + textUntilPosition,
       baseQueryBuilder(),
-      view.source,
+      source,
     );
   } catch {
     // do nothing: provide no suggestions when error ocurred

package/src/components/core/DataCubeSettingsPanel.tsx

@@ -27,7 +27,7 @@ import {
   DataCubeSettingGroup,
   DataCubeSettingType,
   type DataCubeSetting,
-} from '../../stores/core/DataCubeSetting.js';
+} from '../../stores/services/DataCubeSettingService.js';
 import {
   guaranteeIsBoolean,
   guaranteeIsNumber,
@@ -39,7 +39,7 @@ const DataCubeSettingEntryDisplay = observer(
   (props: { configuration: DataCubeSetting }) => {
     const { configuration } = props;
     const dataCube = useDataCube();
-    const panel = dataCube.settings;
+    const panel = dataCube.settingService;
 
     switch (configuration.type) {
       case DataCubeSettingType.BOOLEAN: {
@@ -110,7 +110,7 @@ const DataCubeSettingEntryDisplay = observer(
                 runInAction(() => {
                   panel.currentValues.set(
                     configuration.key,
-                    event.target.value.trim(),
+                    event.target.value,
                   );
                 });
               }}
@@ -128,7 +128,7 @@ const DataCubeSettingEntryDisplay = observer(
             <div className="flex pr-2">
               <FormButton
                 compact={true}
-                onClick={() => configuration.action?.(undefined)}
+                onClick={() => configuration.action?.(dataCube.api, undefined)}
               >
                 Run Action
               </FormButton>
@@ -144,7 +144,7 @@ const DataCubeSettingEntryDisplay = observer(
 
 export const DataCubeSettingsPanel = observer(() => {
   const dataCube = useDataCube();
-  const panel = dataCube.settings;
+  const panel = dataCube.settingService;
   const configurations = Array.from(panel.configurations.values()).toSorted(
     (a, b) => a.title.localeCompare(b.title),
   );
@@ -196,8 +196,8 @@ export const DataCubeSettingsPanel = observer(() => {
       </div>
       <div className="flex h-10 items-center justify-end px-2">
         <FormButton
-          onClick={() => panel.resetDefaultValues()}
-          disabled={panel.currentValuesHashCode === panel.defaultValuesHashCode}
+          onClick={() => panel.restoreDefaultValues()}
+          disabled={!panel.allowRestoreDefaultValues}
         >
           Restore Default Settings
         </FormButton>
@@ -209,13 +209,13 @@ export const DataCubeSettingsPanel = observer(() => {
         >
           Cancel
         </FormButton>
-        <FormButton className="ml-2" onClick={() => panel.save()}>
+        <FormButton className="ml-2" onClick={() => panel.save(dataCube.api)}>
           Apply
         </FormButton>
         <FormButton
           className="ml-2"
           onClick={() => {
-            panel.save();
+            panel.save(dataCube.api);
             panel.display.close();
           }}
         >

package/src/components/view/editor/DataCubeEditor.tsx

@@ -25,11 +25,14 @@ import { DataCubeEditorColumnPropertiesPanel } from './DataCubeEditorColumnPrope
 import { cn } from '@finos/legend-art';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 import { FormButton } from '../../core/DataCubeFormUtils.js';
+import { useDataCube } from '../../DataCubeProvider.js';
 
 export const DataCubeEditor = observer((props: { view: DataCubeViewState }) => {
+  const dataCube = useDataCube();
+  const alertService = dataCube.alertService;
+
   const { view } = props;
   const editor = view.editor;
-  const engine = view.engine;
   const selectedTab = editor.currentTab;
   const tabs = [
     DataCubeEditorTab.COLUMNS,
@@ -88,7 +91,7 @@ export const DataCubeEditor = observer((props: { view: DataCubeViewState }) => {
           onClick={() => {
             editor
               .applyChanges()
-              .catch((error) => engine.alertUnhandledError(error));
+              .catch((error) => alertService.alertUnhandledError(error));
           }}
         >
           Apply
@@ -99,7 +102,7 @@ export const DataCubeEditor = observer((props: { view: DataCubeViewState }) => {
           onClick={() => {
             editor
               .applyChanges({ closeAfterApply: true })
-              .catch((error) => engine.alertUnhandledError(error));
+              .catch((error) => alertService.alertUnhandledError(error));
           }}
         >
           OK

package/src/components/view/editor/DataCubeEditorColumnPropertiesPanel.tsx

@@ -45,14 +45,15 @@ import {
   DEFAULT_URL_LABEL_QUERY_PARAM,
   EMPTY_VALUE_PLACEHOLDER,
 } from '../../../stores/core/DataCubeQueryEngine.js';
-import { DocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
+import { DataCubeDocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
-import { _sortByColName } from '../../../stores/core/models/DataCubeColumn.js';
+import { _sortByColName } from '../../../stores/core/model/DataCubeColumn.js';
 
 export const DataCubeEditorColumnPropertiesPanel = observer(
   (props: { view: DataCubeViewState }) => {
     const { view } = props;
-    const panel = view.editor.columnProperties;
+    const editor = view.editor;
+    const panel = editor.columnProperties;
     const gridConfiguration = view.editor.generalProperties.configuration;
     const selectedColumn = panel.selectedColumn;
     const [
@@ -149,7 +150,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         {selectedColumn.dataType}
                       </div>
                       {Boolean(
-                        panel.editor.leafExtendColumns.find(
+                        editor.leafExtendColumns.find(
                           (col) => col.name === selectedColumn.name,
                         ),
                       ) && (
@@ -158,7 +159,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         </div>
                       )}
                       {Boolean(
-                        panel.editor.groupExtendColumns.find(
+                        editor.groupExtendColumns.find(
                           (col) => col.name === selectedColumn.name,
                         ),
                       ) && (
@@ -187,7 +188,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       {column.dataType}
                     </div>
                     {Boolean(
-                      panel.editor.leafExtendColumns.find(
+                      editor.leafExtendColumns.find(
                         (col) => col.name === column.name,
                       ),
                     ) && (
@@ -196,7 +197,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       </div>
                     )}
                     {Boolean(
-                      panel.editor.groupExtendColumns.find(
+                      editor.groupExtendColumns.find(
                         (col) => col.name === column.name,
                       ),
                     ) && (
@@ -216,7 +217,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       <FormDocumentation
                         className="ml-1"
                         documentationKey={
-                          DocumentationKey.DATA_CUBE_COLUMN_CONFIGURATION_KIND
+                          DataCubeDocumentationKey.COLUMN_CONFIGURATION_KIND
                         }
                       />
                     </div>
@@ -226,10 +227,10 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       open={kindDropdownPropsOpen}
                       // disallow changing the column kind if the column is being used as pivot column
                       disabled={Boolean(
-                        panel.editor.verticalPivots.selector.selectedColumns.find(
+                        editor.verticalPivots.selector.selectedColumns.find(
                           (col) => col.name === selectedColumn.name,
                         ) ??
-                          panel.editor.horizontalPivots.selector.selectedColumns.find(
+                          editor.horizontalPivots.selector.selectedColumns.find(
                             (col) => col.name === selectedColumn.name,
                           ),
                       )}
@@ -281,7 +282,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                     className="w-80"
                     value={selectedColumn.displayName ?? ''}
                     onChange={(event) => {
-                      const value = event.target.value.trim();
+                      const value = event.target.value;
                       selectedColumn.setDisplayName(
                         value !== '' ? value : undefined,
                       );
@@ -307,7 +308,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                     className="w-32"
                     {...aggregationOperationDropdownProps}
                   >
-                    {panel.view.engine.aggregateOperations
+                    {view.engine.aggregateOperations
                       .filter((op) => op.isCompatibleWithColumn(selectedColumn))
                       .map((op) => (
                         <FormDropdownMenuItem
@@ -424,7 +425,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         <FormDocumentation
                           className="ml-1"
                           documentationKey={
-                            DocumentationKey.DATA_CUBE_COLUMN_CONFIGURATION_UNIT
+                            DataCubeDocumentationKey.COLUMN_CONFIGURATION_UNIT
                           }
                         />
                       </div>
@@ -434,7 +435,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         onChange={(event) => {
                           const value = event.target.value.trim();
                           selectedColumn.setUnit(
-                            value.trim() !== '' ? value.trim() : undefined,
+                            value.trim() !== '' ? value : undefined,
                           );
                         }}
                         placeholder={EMPTY_VALUE_PLACEHOLDER}
@@ -451,7 +452,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         <FormDocumentation
                           className="ml-1"
                           documentationKey={
-                            DocumentationKey.DATA_CUBE_COLUMN_CONFIGURATION_DISPLAY_AS_LINK
+                            DataCubeDocumentationKey.COLUMN_CONFIGURATION_DISPLAY_AS_LINK
                           }
                         />
                       </div>
@@ -488,7 +489,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                     <FormDocumentation
                       className="ml-1"
                       documentationKey={
-                        DocumentationKey.DATA_CUBE_COLUMN_CONFIGURATION_MISSING_VALUE_FORMAT
+                        DataCubeDocumentationKey.COLUMN_CONFIGURATION_MISSING_VALUE_FORMAT
                       }
                     />
                   </div>
@@ -496,7 +497,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                     className="w-16"
                     value={selectedColumn.missingValueDisplayText ?? ''}
                     onChange={(event) => {
-                      const value = event.target.value.trim();
+                      const value = event.target.value;
                       selectedColumn.setMissingValueDisplayText(
                         value !== '' ? value : undefined,
                       );