@finos/legend-data-cube 0.0.37 → 0.0.39

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

@@ -20,21 +20,18 @@ import { DataCubeEditorColumnSelector } from './DataCubeEditorColumnSelector.js'
 import { useEffect } from 'react';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 import { FormCheckbox } from '../../core/DataCubeFormUtils.js';
-import type {
-  DataCubeEditorColumnSelectorColumnState,
-  DataCubeEditorColumnSelectorState,
-} from '../../../stores/view/editor/DataCubeEditorColumnSelectorState.js';
+import type { DataCubeEditorColumnSelectorColumnState } from '../../../stores/view/editor/DataCubeEditorColumnSelectorState.js';
+import type { DataCubeEditorState } from '../../../stores/view/editor/DataCubeEditorState.js';
 
 const ColumnSelectorLabel = observer(
   (props: {
-    selector: DataCubeEditorColumnSelectorState<DataCubeEditorColumnSelectorColumnState>;
     column: DataCubeEditorColumnSelectorColumnState;
+    editor: DataCubeEditorState;
   }) => {
-    const { selector, column } = props;
-    const showHiddenIndicator =
-      selector.editor.columnProperties.getColumnConfiguration(
-        column.name,
-      ).hideFromView;
+    const { column, editor } = props;
+    const showHiddenIndicator = editor.columnProperties.getColumnConfiguration(
+      column.name,
+    ).hideFromView;
 
     return (
       <>
@@ -49,18 +46,14 @@ const ColumnSelectorLabel = observer(
           {column.name}
         </div>
         {Boolean(
-          selector.editor.leafExtendColumns.find(
-            (col) => col.name === column.name,
-          ),
+          editor.leafExtendColumns.find((col) => col.name === column.name),
         ) && (
           <div className="ml-1.5 mr-0.5 flex h-3.5 flex-shrink-0 items-center rounded-sm border border-neutral-300 bg-neutral-100 px-1 text-xs font-medium uppercase text-neutral-600">
             {`Extended (Leaf Level)`}
           </div>
         )}
         {Boolean(
-          selector.editor.groupExtendColumns.find(
-            (col) => col.name === column.name,
-          ),
+          editor.groupExtendColumns.find((col) => col.name === column.name),
         ) && (
           <div className="ml-1.5 mr-0.5 flex h-3.5 flex-shrink-0 items-center rounded-sm border border-neutral-300 bg-neutral-100 px-1 text-xs font-medium uppercase text-neutral-600">
             {`Extended (Group Level)`}
@@ -74,7 +67,8 @@ const ColumnSelectorLabel = observer(
 export const DataCubeEditorColumnsPanel = observer(
   (props: { view: DataCubeViewState }) => {
     const { view } = props;
-    const panel = view.editor.columns;
+    const editor = view.editor;
+    const panel = editor.columns;
 
     useEffect(() => () => panel.propagateChanges(), [panel]);
 
@@ -112,7 +106,9 @@ export const DataCubeEditorColumnsPanel = observer(
                 No columns selected
               </div>
             )}
-            columnLabelRenderer={(p) => <ColumnSelectorLabel {...p} />}
+            columnLabelRenderer={(p) => (
+              <ColumnSelectorLabel {...p} editor={editor} />
+            )}
           />
         </div>
       </div>

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

@@ -45,7 +45,7 @@ import {
   FormButton,
 } from '../../core/DataCubeFormUtils.js';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
-import { DocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
+import { DataCubeDocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
 
 export const DataCubeEditorGeneralPropertiesPanel = observer(
   (props: { view: DataCubeViewState }) => {
@@ -204,7 +204,7 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
                 <FormDocumentation
                   className="ml-1"
                   documentationKey={
-                    DocumentationKey.DATA_CUBE_GRID_CONFIGURATION_ROW_LIMIT
+                    DataCubeDocumentationKey.GRID_CONFIGURATION_ROW_LIMIT
                   }
                 />
               </div>

package/src/components/view/extend/DataCubeColumnEditor.tsx

@@ -49,7 +49,8 @@ import {
   DataCubeColumnDataType,
   DataCubeColumnKind,
 } from '../../../stores/core/DataCubeQueryEngine.js';
-import { DocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
+import { DataCubeDocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
+import { useDataCube } from '../../DataCubeProvider.js';
 
 enum DataCubeExtendedColumnKind {
   LEAF_LEVEL_MEASURE = 'Leaf Level Measure',
@@ -60,8 +61,9 @@ enum DataCubeExtendedColumnKind {
 export const DataCubeColumnCreator = observer(
   (props: { state: DataCubeColumnBaseEditorState }) => {
     const { state } = props;
+    const dataCube = useDataCube();
     const view = state.view;
-    const engine = view.engine;
+    const manager = view.extend;
 
     const nameInputRef = useRef<HTMLInputElement>(null);
     const currentColumnKind = state.isGroupLevel
@@ -92,9 +94,9 @@ export const DataCubeColumnCreator = observer(
         debounce((): void => {
           state
             .getReturnType()
-            .catch((error) => engine.alertUnhandledError(error));
+            .catch((error) => dataCube.alertService.alertUnhandledError(error));
         }, 500),
-      [state, engine],
+      [state, dataCube],
     );
 
     useEffect(() => {
@@ -137,7 +139,8 @@ export const DataCubeColumnCreator = observer(
                       position,
                       model,
                       state.codePrefix,
-                      view,
+                      view.engine,
+                      view.source,
                       () => state.buildExtendBaseQuery(),
                     ),
                   );
@@ -206,7 +209,7 @@ export const DataCubeColumnCreator = observer(
                     disabled={state.finalizationState.isInProgress}
                     value={state.name}
                     onChange={(event) => {
-                      state.setName(event.target.value.trim());
+                      state.setName(event.target.value);
                     }}
                   />
                   <div className="ml-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center text-lg">
@@ -223,7 +226,7 @@ export const DataCubeColumnCreator = observer(
                     <FormDocumentation
                       className="ml-1"
                       documentationKey={
-                        DocumentationKey.DATA_CUBE_EXTENDED_COLUMN_LEVELS
+                        DataCubeDocumentationKey.EXTENDED_COLUMN_LEVELS
                       }
                     />
                   </div>
@@ -347,9 +350,11 @@ export const DataCubeColumnCreator = observer(
               <FormButton
                 className="ml-2"
                 onClick={() => {
-                  state.manager
+                  manager
                     .deleteColumn(state.initialData.name)
-                    .catch((error) => engine.alertUnhandledError(error));
+                    .catch((error) =>
+                      dataCube.alertService.alertUnhandledError(error),
+                    );
                 }}
               >
                 Delete
@@ -359,7 +364,9 @@ export const DataCubeColumnCreator = observer(
                 onClick={() => {
                   state
                     .reset()
-                    .catch((error) => engine.alertUnhandledError(error));
+                    .catch((error) =>
+                      dataCube.alertService.alertUnhandledError(error),
+                    );
                 }}
               >
                 Reset
@@ -377,7 +384,9 @@ export const DataCubeColumnCreator = observer(
             onClick={() => {
               state
                 .applyChanges()
-                .catch((error) => engine.alertUnhandledError(error));
+                .catch((error) =>
+                  dataCube.alertService.alertUnhandledError(error),
+                );
             }}
           >
             OK

package/src/components/view/filter/DataCubeFilterEditor.tsx

@@ -52,6 +52,7 @@ import {
   parseISO,
 } from '@finos/legend-shared';
 import { evaluate } from 'mathjs';
+import { useDataCube } from '../../DataCubeProvider.js';
 
 const FILTER_TREE_OFFSET = 10;
 const FILTER_TREE_INDENTATION_SPACE = 36;
@@ -473,6 +474,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
     view: DataCubeViewState;
   }) => {
     const { node, level, view } = props;
+    const dataCube = useDataCube();
     const editor = view.filter;
     const parentNode = node.parent;
     const nodeIdx = parentNode ? parentNode.children.indexOf(node) : undefined;
@@ -570,7 +572,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
                   const newOp = node.operation.isCompatibleWithColumn(column)
                     ? node.operation
                     : getNullableFirstEntry(
-                        editor.view.engine.filterOperations.filter((op) =>
+                        dataCube.engine.filterOperations.filter((op) =>
                           op.isCompatibleWithColumn(column),
                         ),
                       );
@@ -600,7 +602,7 @@ const DataCubeEditorFilterConditionNodeDisplay = observer(
           {...operationDropdownProps}
           onClosed={focusOnValueEditor}
         >
-          {editor.view.engine.filterOperations
+          {dataCube.engine.filterOperations
             .filter((op) => op.isCompatibleWithColumn(node.column))
             .map((op) => (
               <FormDropdownMenuItem

package/src/components/view/grid/DataCubeGrid.tsx

@@ -41,7 +41,7 @@ import { isNonNullable } from '@finos/legend-shared';
 import type {
   DataCubeConfiguration,
   DataCubeConfigurationColorKey,
-} from '../../../stores/core/models/DataCubeConfiguration.js';
+} from '../../../stores/core/model/DataCubeConfiguration.js';
 import { generateBaseGridOptions } from '../../../stores/view/grid/DataCubeGridConfigurationBuilder.js';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 

package/src/index.tsx

@@ -14,15 +14,14 @@
  * limitations under the License.
  */
 
-export * from './stores/core/models/DataCubeQuery.js';
-export * from './stores/core/models/DataCubeSource.js';
-export { type DataCubeColumn } from './stores/core/models/DataCubeColumn.js';
-export * from './stores/core/models/DataCubeConfiguration.js';
-export * from './stores/core/models/AdhocQueryDataCubeSource.js';
+export * from './stores/core/model/DataCubeQuery.js';
+export * from './stores/core/model/DataCubeSource.js';
+export { type DataCubeColumn } from './stores/core/model/DataCubeColumn.js';
+export * from './stores/core/model/DataCubeConfiguration.js';
+export * from './stores/core/model/AdhocQueryDataCubeSource.js';
 
 export * from './stores/core/DataCubeEngine.js';
 export * from './stores/core/DataCubeQueryEngine.js';
-export * from './stores/core/DataCubeLayoutManagerState.js';
 export * from './stores/core/DataCubeQueryBuilderUtils.js';
 
 export {
@@ -30,13 +29,25 @@ export {
   DataCubeSettingGroup,
   DataCubeSettingType,
   type DataCubeSettingValues,
-} from './stores/core/DataCubeSetting.js';
-export { DataCubeState } from './stores/DataCubeState.js';
+} from './stores/services/DataCubeSettingService.js';
+export {
+  DataCubeLayoutService,
+  WindowState,
+  DisplayState,
+  LayoutConfiguration,
+  DEFAULT_TOOL_PANEL_WINDOW_CONFIG,
+  DEFAULT_ALERT_WINDOW_CONFIG,
+} from './stores/services/DataCubeLayoutService.js';
+export * from './stores/services/DataCubeTaskService.js';
+export * from './stores/services/DataCubeLogService.js';
+export * from './stores/services/DataCubeAlertService.js';
+export * from './components/core/DataCubeAlert.js';
+export * from './components/core/DataCubeLayout.js';
+
 export { useDataCube } from './components/DataCubeProvider.js';
-export * from './stores/DataCubeAPI.js';
+export { type DataCubeAPI } from './stores/DataCubeAPI.js';
 export * from './stores/DataCubeOptions.js';
-
 export * from './components/DataCube.js';
-export * from './components/core/DataCubeAlert.js';
+
 export * from './components/core/DataCubeFormUtils.js';
-export * from './components/core/DataCubeLayoutManager.js';
+export * from './components/DataCubePlaceholder.js';

package/src/stores/DataCubeAPI.ts

@@ -14,9 +14,64 @@
  * limitations under the License.
  */
 
-import type { DataCubeSettings } from './DataCubeSettings.js';
+import type { DataCubeQuery } from './core/model/DataCubeQuery.js';
+import type { DataCubeState } from './DataCubeState.js';
+import type { DataCubeViewState } from './view/DataCubeViewState.js';
 
+/**
+ * This is the API exposed externally by DataCube to restrict access to certain
+ * internal components and functionalities.
+ */
 export interface DataCubeAPI {
-  getSettings(): DataCubeSettings;
-  refreshFailedDataFetches(): void;
+  /**
+   * Generates the data cube query (including the query, configuration, and source)
+   * from the latest state of the DataCube.
+   */
+  generateDataCubeQuery(): Promise<DataCubeQuery>;
+  /**
+   * Retries all failed data fetches and rerender the grid.
+   */
+  retryFailedDataFetches(): void;
+  /**
+   * (Force) reload/rerender the DataCube component.
+   *
+   * This is often used when updating settings that requires a restart.
+   */
+  reload(): void;
+}
+
+/**
+ * This implementation wraps around DataCube state to expose a cleaner API to clients.
+ * It also provides a typing-hack for core components to access advanced functionalities,
+ * e.g. access to the internals of DataCube view state, grid client, etc., which should
+ * not be exposed externally via the public interface.
+ */
+export class INTERNAL__DataCubeAPI implements DataCubeAPI {
+  private readonly _dataCube: DataCubeState;
+
+  constructor(dataCube: DataCubeState) {
+    this._dataCube = dataCube;
+  }
+
+  _runTaskForEachView(runner: (view: DataCubeViewState) => void) {
+    // TODO: When we support multi-view (i.e. multiple instances of DataCubes) we would need
+    // to traverse through and update the configurations of all of their grid clients
+    runner(this._dataCube.view);
+  }
+
+  // ----------------------------- API -----------------------------
+
+  generateDataCubeQuery() {
+    return this._dataCube.view.generateDataCubeQuery();
+  }
+
+  retryFailedDataFetches() {
+    this._runTaskForEachView((view) => {
+      view.grid.client.retryServerSideLoads();
+    });
+  }
+
+  reload() {
+    this._dataCube.reload();
+  }
 }

package/src/stores/DataCubeOptions.ts

@@ -17,24 +17,113 @@
 import type {
   DataCubeSetting,
   DataCubeSettingValues,
-} from './core/DataCubeSetting.js';
-import type { DataCubeSource } from './core/models/DataCubeSource.js';
-import type { DataCubeState } from './DataCubeState.js';
+} from './services/DataCubeSettingService.js';
+import type { DataCubeSource } from './core/model/DataCubeSource.js';
+import type { DataCubeAPI } from './DataCubeAPI.js';
+import type { LayoutManager } from './services/DataCubeLayoutService.js';
+import type { TaskManager } from './services/DataCubeTaskService.js';
+
+type DataCubeOptionsBaseEvent = {
+  api: DataCubeAPI;
+};
+export type DataCubeInitializedEvent = DataCubeOptionsBaseEvent;
+export type DataCubeViewInitializedEvent = DataCubeOptionsBaseEvent & {
+  source: DataCubeSource;
+};
+export type DataCubeNameChangedEvent = DataCubeOptionsBaseEvent & {
+  name: string;
+  source: DataCubeSource;
+};
+export type DataCubeSettingsChangedEvent = DataCubeOptionsBaseEvent & {
+  values: DataCubeSettingValues;
+};
+
+type DataCubeSettingsData = {
+  configurations?: DataCubeSetting[] | undefined;
+  values?: DataCubeSettingValues | undefined;
+};
+
+export type DataCubeMenuItem = {
+  label: string;
+  disabled?: boolean | undefined;
+  action: () => void;
+};
+
+type DataCubeOptionsBaseParams = {
+  api: DataCubeAPI;
+};
+export type DataCubeInnerHeaderComponentParams = DataCubeOptionsBaseParams;
 
 export type DataCubeOptions = {
-  gridClientLicense?: string | undefined;
+  // -------------------------- INFRASTRUCTURE ------------------------------
 
-  onInitialized?: ((dataCube: DataCubeState) => void) | undefined;
+  /**
+   * Provides a task manager that can be used by DataCube task service.
+   *
+   * This is useful when creating a seamless integration between DataCube and
+   * the application.
+   */
+  taskManager?: TaskManager | undefined;
+  /**
+   * DataCube has initialized and is ready for most API calls, but may not be fully rendered yet.
+   */
+  onInitialized?: ((event: DataCubeInitializedEvent) => void) | undefined;
+  /**
+   * DataCube main view has initialized, and is ready for most API calls, but may not be fully rendered yet.
+   * The query source has been fully resolved and analyzed, grid view is to be rendered right after.
+   */
+  onViewInitialized?:
+    | ((event: DataCubeViewInitializedEvent) => void)
+    | undefined;
 
-  onNameChanged?: ((name: string, source: DataCubeSource) => void) | undefined;
+  // ------------------------------ GRID ------------------------------
+
+  /**
+   * License key for the grid client (i.e. ag-grid) as DataCube makes use of
+   * fair number of advanced/enterprise features.
+   */
+  gridClientLicense?: string | undefined;
 
-  innerHeaderComponent?:
-    | ((dataCube: DataCubeState) => React.ReactNode)
+  // ------------------------------ LAYOUT ------------------------------
+
+  /**
+   * Provides a layout manager that can be used by DataCube layout service.
+   *
+   * This is useful when creating a seamless integration between DataCube and
+   * the application.
+   */
+  layoutManager?: LayoutManager | undefined;
+  /**
+   * The name of the DataCube main view is updated.
+   */
+  onNameChanged?: ((event: DataCubeNameChangedEvent) => void) | undefined;
+  /**
+   * Custom renderer for the inner header area, next to the title.
+   */
+  innerHeaderRenderer?:
+    | ((params: DataCubeInnerHeaderComponentParams) => React.ReactNode)
     | undefined;
 
-  getSettingItems?: (() => DataCubeSetting[]) | undefined;
-  getSettingValues?: (() => DataCubeSettingValues | undefined) | undefined;
-  onSettingValuesChanged?:
-    | ((values: DataCubeSettingValues) => void)
+  // ------------------------------ SETTINGS ------------------------------
+
+  /**
+   * DataCube settings values (retrieved externally), which would be set as initial values,
+   * and extra setting configurations that would be rendered in the settings panel.
+   */
+  settingsData?: DataCubeSettingsData | undefined;
+  /**
+   * Settings are changed and saved.
+   *
+   * This is useful when the application needs to persist the new settings values.
+   */
+  onSettingsChanged?:
+    | ((event: DataCubeSettingsChangedEvent) => void)
     | undefined;
+
+  // ------------------------------ DOCUMENTATION ------------------------------
+
+  /**
+   * URL to the documentation website.
+   */
+  documentationUrl?: string | undefined;
 };