@finos/legend-data-cube 0.0.37 → 0.0.38

package/src/__lib__/DataCubeSetting.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 DataCubeSettingKey {
+  DEBUGGER__ENABLE_DEBUG_MODE = 'dataCube.debugger.enableDebugMode',
+  DEBUGGER__ACTION__RELOAD = 'dataCube.debugger.action.reload',
+  GRID_CLIENT__ROW_BUFFER = 'dataCube.grid.rowBuffer',
+  GRID_CLIENT__PURGE_CLOSED_ROW_NODES = 'dataCube.grid.purgeClosedRowNodes',
+  GRID_CLIENT__SUPPRESS_LARGE_DATASET_WARNING = 'dataCube.grid.suppressLargeDatasetWarning',
+  GRID_CLIENT__ACTION__RETRY_FAILED_DATA_FETCHES = 'dataCube.grid.action.retryFailedDataFetches',
+}

package/src/components/DataCube.tsx

@@ -15,105 +15,58 @@
  */
 
 import { observer, useLocalObservable } from 'mobx-react-lite';
-import {
-  DataCubeIcon,
-  DropdownMenu,
-  DropdownMenuItem,
-  useDropdownMenu,
-} from '@finos/legend-art';
-import { DataCubeLayoutManager } from './core/DataCubeLayoutManager.js';
+import { DataCubeLayout } from './core/DataCubeLayout.js';
 import { INTERNAL__MonacoEditorWidgetsRoot } from './core/DataCubePureCodeEditorUtils.js';
-import { DataCubeBlockingActionAlert } from './core/DataCubeAlert.js';
 import { DataCubeView } from './DataCubeView.js';
 import { useEffect } from 'react';
 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();
-  const engine = dataCube.engine;
-  const view = dataCube.view;
-  const [openMenuDropdown, closeMenuDropdown, menuDropdownProps] =
-    useDropdownMenu();
-
-  return (
-    <div className="flex h-7 justify-between bg-neutral-100">
-      <div className="flex select-none items-center pl-1 pr-2 text-lg font-medium">
-        <DataCubeIcon.Cube className="mr-1 h-4 w-4" />
-        <div>{view.info.name}</div>
-      </div>
-      <div className="flex">
-        {dataCube.innerHeaderComponent?.(dataCube) ?? null}
-        <button
-          className="flex aspect-square h-full flex-shrink-0 items-center justify-center text-lg"
-          onClick={openMenuDropdown}
-        >
-          <DataCubeIcon.Menu />
-        </button>
-        <DropdownMenu
-          {...menuDropdownProps}
-          menuProps={{
-            anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-            transformOrigin: { vertical: 'top', horizontal: 'left' },
-            classes: {
-              paper: 'rounded-none mt-[1px]',
-              list: 'w-40 p-0 rounded-none border border-neutral-400 bg-white max-h-40 overflow-y-auto py-0.5',
-            },
-          }}
-        >
-          <DropdownMenuItem
-            className="flex h-[22px] w-full items-center px-2.5 text-base hover:bg-neutral-100 focus:bg-neutral-100"
-            onClick={() => {
-              const url = engine.getDocumentationURL();
-              if (url) {
-                engine.openLink(url);
-              }
-              closeMenuDropdown();
-            }}
-            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.settings.display.open();
-              closeMenuDropdown();
-            }}
-          >
-            Settings...
-          </DropdownMenuItem>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-});
+import type { DataCubeQuery } from '../stores/core/model/DataCubeQuery.js';
+import { DataCubeTitleBar } from './DataCubeTitleBar.js';
+import { DEFAULT_REPORT_NAME } from '../stores/core/DataCubeQueryEngine.js';
+import {
+  DataCubePlaceholderErrorDisplay,
+  DataCubePlaceholder,
+} from './DataCubePlaceholder.js';
 
 const DataCubeRoot = observer(() => {
   const dataCube = useDataCube();
-  const engine = dataCube.engine;
   const view = dataCube.view;
 
   useEffect(() => {
     dataCube.view
       .initialize(dataCube.query)
-      .catch((error) => dataCube.engine.logUnhandledError(error));
+      .catch((error) => dataCube.logService.logUnhandledError(error));
   }, [dataCube]);
 
   return (
     <div className="data-cube relative flex h-full w-full flex-col bg-white">
-      <DataCubeTitleBar />
+      <DataCubeTitleBar
+        title={view.info.name}
+        menuItems={[
+          {
+            label: 'See Documentation',
+            action: () => {
+              const url = dataCube.options?.documentationUrl;
+              if (url) {
+                dataCube.navigationService.openLink(url);
+              }
+            },
+          },
+          {
+            label: 'Settings...',
+            action: () => dataCube.settingService.display.open(),
+          },
+        ]}
+      >
+        {dataCube.options?.innerHeaderRenderer?.({ api: dataCube.api }) ?? null}
+      </DataCubeTitleBar>
 
       <DataCubeView view={view} />
 
-      <DataCubeLayoutManager layout={engine.layout} />
-      <DataCubeBlockingActionAlert />
+      <DataCubeLayout layout={dataCube.layoutService.manager} />
       <INTERNAL__MonacoEditorWidgetsRoot />
     </div>
   );
@@ -126,22 +79,39 @@ export const DataCube = observer(
     options?: DataCubeOptions | undefined;
   }) => {
     const { query, engine, options } = props;
-    const state = useLocalObservable(
+    const dataCube = useLocalObservable(
       () => new DataCubeState(query, engine, options),
     );
 
     useEffect(() => {
-      state
+      dataCube
         .initialize()
-        .catch((error) => state.engine.logUnhandledError(error));
-    }, [state]);
+        .catch((error) => dataCube.logService.logUnhandledError(error));
+      return () => dataCube.dispose();
+    }, [dataCube]);
 
-    if (!state.initializeState.hasSucceeded) {
-      return <></>;
+    if (!dataCube.initializeState.hasSucceeded) {
+      return (
+        <DataCubePlaceholder
+          title={DEFAULT_REPORT_NAME}
+          headerContent={
+            dataCube.options?.innerHeaderRenderer?.({ api: dataCube.api }) ??
+            null
+          }
+          layoutManager={dataCube.layoutService.manager}
+        >
+          {dataCube.initializeState.hasFailed && (
+            <DataCubePlaceholderErrorDisplay
+              message="Initialization Failure"
+              prompt="Resolve the issue and reload."
+            />
+          )}
+        </DataCubePlaceholder>
+      );
     }
     return (
-      <DataCubeContextProvider value={state}>
-        <DataCubeRoot key={state.uuid} />
+      <DataCubeContextProvider value={dataCube}>
+        <DataCubeRoot key={dataCube.uuid} />
       </DataCubeContextProvider>
     );
   },

package/src/components/DataCubePlaceholder.tsx

@@ -0,0 +1,97 @@
+/**
+ * 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.
+ */
+
+import { observer } from 'mobx-react-lite';
+import type { DataCubeMenuItem } from '../stores/DataCubeOptions.js';
+import { DataCubeTitleBar } from './DataCubeTitleBar.js';
+import { DataCubeStatusBar } from './DataCubeStatusBar.js';
+import type React from 'react';
+import type { LayoutManager } from '../stores/services/DataCubeLayoutService.js';
+import { DataCubeLayout } from './core/DataCubeLayout.js';
+import { DataCubeIcon } from '@finos/legend-art';
+import type { TaskManager } from '../stores/services/DataCubeTaskService.js';
+
+export const DataCubePlaceholderErrorDisplay = (props: {
+  message: string;
+  prompt?: string | undefined;
+}) => {
+  const { message, prompt } = props;
+
+  return (
+    <div className="flex h-full w-full overflow-auto p-5">
+      <div className="mr-3">
+        <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>
+        <div className="mt-1 whitespace-break-spaces text-neutral-500">
+          {prompt}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const DataCubeViewPlaceholder = observer(
+  (props: {
+    children?: React.ReactNode | undefined;
+    taskManager?: TaskManager | undefined;
+  }) => {
+    const { children, taskManager } = props;
+
+    return (
+      <>
+        <div className="h-[calc(100%_-_48px)] w-full border border-x-0 border-neutral-200 bg-neutral-50">
+          {children ?? null}
+        </div>
+        <DataCubeStatusBar taskManager={taskManager} />
+      </>
+    );
+  },
+);
+
+export const DataCubePlaceholder = observer(
+  (props: {
+    children?: React.ReactNode | undefined;
+    title: string;
+    headerContent?: React.ReactNode | undefined;
+    menuItems?: DataCubeMenuItem[] | undefined;
+    layoutManager?: LayoutManager | undefined;
+    taskManager?: TaskManager | undefined;
+  }) => {
+    const {
+      children,
+      title,
+      menuItems,
+      headerContent,
+      layoutManager,
+      taskManager,
+    } = props;
+
+    return (
+      <div className="data-cube relative flex h-full w-full flex-col bg-white">
+        <DataCubeTitleBar title={title} menuItems={menuItems}>
+          {headerContent ?? null}
+        </DataCubeTitleBar>
+
+        <DataCubeViewPlaceholder taskManager={taskManager}>
+          {children}
+        </DataCubeViewPlaceholder>
+        {layoutManager ? <DataCubeLayout layout={layoutManager} /> : null}
+      </div>
+    );
+  },
+);

package/src/components/DataCubeStatusBar.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+import { DataCubeIcon, ProgressBar } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type { DataCubeViewState } from '../stores/view/DataCubeViewState.js';
+import type { TaskManager } from '../stores/services/DataCubeTaskService.js';
+
+export const DataCubeStatusBar = observer(
+  (props: {
+    view?: DataCubeViewState | undefined;
+    taskManager?: TaskManager | undefined;
+  }) => {
+    const { view, taskManager: _taskManager } = props;
+    const tasks = view?.taskService.tasks ?? _taskManager?.tasks;
+
+    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 disabled:text-neutral-400"
+            onClick={() => view?.editor.display.open()}
+            disabled={!view}
+          >
+            <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 disabled:text-neutral-400"
+              onClick={() => {
+                view?.filter.display.open();
+              }}
+              disabled={!view}
+            >
+              <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">
+            {tasks !== undefined && tasks.length > 0 && (
+              <ProgressBar
+                classes={{
+                  root: 'h-3.5 w-full bg-transparent',
+                  bar1Indeterminate: 'bg-green-500',
+                  bar2Indeterminate: 'bg-green-500',
+                }}
+                variant="indeterminate"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataCubeTitleBar.tsx

@@ -0,0 +1,81 @@
+/**
+ * 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.
+ */
+
+import {
+  useDropdownMenu,
+  DataCubeIcon,
+  DropdownMenu,
+  DropdownMenuItem,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type { DataCubeMenuItem } from '../stores/DataCubeOptions.js';
+
+export const DataCubeTitleBar = observer(
+  (props: {
+    children: React.ReactNode;
+    title: string;
+    menuItems?: DataCubeMenuItem[] | undefined;
+  }) => {
+    const { children, title, menuItems } = props;
+    const [openMenuDropdown, closeMenuDropdown, menuDropdownProps] =
+      useDropdownMenu();
+
+    return (
+      <div className="flex h-7 justify-between bg-neutral-100">
+        <div className="flex select-none items-center pl-1 pr-2 text-lg font-medium">
+          <DataCubeIcon.Cube className="mr-1 h-4 w-4" />
+          <div>{title}</div>
+        </div>
+        <div className="flex">
+          {children}
+          <button
+            className="flex aspect-square h-full flex-shrink-0 items-center justify-center text-lg disabled:text-neutral-400"
+            onClick={openMenuDropdown}
+            disabled={!menuItems?.length}
+          >
+            <DataCubeIcon.Menu />
+          </button>
+          <DropdownMenu
+            {...menuDropdownProps}
+            menuProps={{
+              anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+              transformOrigin: { vertical: 'top', horizontal: 'left' },
+              classes: {
+                paper: 'rounded-none mt-[1px]',
+                list: 'w-40 p-0 rounded-none border border-neutral-400 bg-white max-h-40 overflow-y-auto py-0.5',
+              },
+            }}
+          >
+            {menuItems?.map((item, idx) => (
+              <DropdownMenuItem
+                // eslint-disable-next-line react/no-array-index-key
+                key={idx}
+                className="flex h-[22px] w-full items-center px-2.5 text-base hover:bg-neutral-100 focus:bg-neutral-100"
+                onClick={() => {
+                  item.action();
+                  closeMenuDropdown();
+                }}
+                disabled={Boolean(item.disabled)}
+              >
+                {item.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+);

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;