@finos/legend-data-cube 0.0.36 → 0.0.38

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

@@ -42,9 +42,10 @@ import {
   FormNumberInput,
   FormBadge_WIP,
   FormDocumentation,
+  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 }) => {
@@ -203,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>
@@ -773,13 +774,13 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
               <div className="flex h-6 w-32 flex-shrink-0 items-center text-sm" />
               <div className="w-80">
                 <div className="mb-2 h-[1px] w-full bg-neutral-200" />
-                <button
-                  className="flex h-5 items-center justify-center rounded-sm border border-neutral-400 bg-neutral-200 p-0 px-1 text-sm text-neutral-700 disabled:text-neutral-400"
+                <FormButton
+                  compact={true}
                   disabled={configuration.isUsingDefaultStyling}
                   onClick={() => configuration.useDefaultStyling()}
                 >
                   Use Default Styling
-                </button>
+                </FormButton>
               </div>
             </div>
           </div>

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

@@ -36,6 +36,7 @@ import {
   MONACO_EDITOR_OVERFLOW_WIDGETS_ROOT_ID,
 } from '../../core/DataCubePureCodeEditorUtils.js';
 import {
+  FormButton,
   FormDocumentation,
   FormDropdownMenu,
   FormDropdownMenuItem,
@@ -48,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',
@@ -59,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
@@ -91,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(() => {
@@ -136,7 +139,8 @@ export const DataCubeColumnCreator = observer(
                       position,
                       model,
                       state.codePrefix,
-                      view,
+                      view.engine,
+                      view.source,
                       () => state.buildExtendBaseQuery(),
                     ),
                   );
@@ -191,7 +195,7 @@ export const DataCubeColumnCreator = observer(
 
     return (
       <>
-        <div className="relative h-[calc(100%_-_40px)] w-full px-2 pt-2">
+        <div className="h-[calc(100%_-_40px)] w-full px-2 pt-2">
           <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
             <div className="h-full w-full select-none p-0">
               <div className="h-24 w-full p-2">
@@ -205,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">
@@ -222,7 +226,7 @@ export const DataCubeColumnCreator = observer(
                     <FormDocumentation
                       className="ml-1"
                       documentationKey={
-                        DocumentationKey.DATA_CUBE_EXTENDED_COLUMN_LEVELS
+                        DataCubeDocumentationKey.EXTENDED_COLUMN_LEVELS
                       }
                     />
                   </div>
@@ -340,52 +344,53 @@ export const DataCubeColumnCreator = observer(
           </div>
         </div>
         <div className="flex h-10 items-center justify-end px-2">
-          <button
-            className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95 disabled:cursor-not-allowed disabled:border-neutral-300 disabled:text-neutral-400 disabled:hover:brightness-100"
-            disabled={
-              !state.isNameValid ||
-              !state.isTypeValid ||
-              state.validationState.isInProgress ||
-              state.finalizationState.isInProgress
-            }
-            onClick={() => {
-              state
-                .applyChanges()
-                .catch((error) => engine.alertUnhandledError(error));
-            }}
-          >
-            OK
-          </button>
+          <FormButton onClick={() => state.close()}>Cancel</FormButton>
           {state instanceof DataCubeExistingColumnEditorState && (
             <>
-              <button
-                className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+              <FormButton
+                className="ml-2"
                 onClick={() => {
-                  state.manager
+                  manager
                     .deleteColumn(state.initialData.name)
-                    .catch((error) => engine.alertUnhandledError(error));
+                    .catch((error) =>
+                      dataCube.alertService.alertUnhandledError(error),
+                    );
                 }}
               >
                 Delete
-              </button>
-              <button
-                className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+              </FormButton>
+              <FormButton
+                className="ml-2"
                 onClick={() => {
                   state
                     .reset()
-                    .catch((error) => engine.alertUnhandledError(error));
+                    .catch((error) =>
+                      dataCube.alertService.alertUnhandledError(error),
+                    );
                 }}
               >
                 Reset
-              </button>
+              </FormButton>
             </>
           )}
-          <button
-            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={() => state.close()}
+          <FormButton
+            className="ml-2"
+            disabled={
+              !state.isNameValid ||
+              !state.isTypeValid ||
+              state.validationState.isInProgress ||
+              state.finalizationState.isInProgress
+            }
+            onClick={() => {
+              state
+                .applyChanges()
+                .catch((error) =>
+                  dataCube.alertService.alertUnhandledError(error),
+                );
+            }}
           >
-            Cancel
-          </button>
+            OK
+          </FormButton>
         </div>
       </>
     );

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

@@ -37,6 +37,7 @@ import {
   type DataCubeFilterEditorTreeNode,
 } from '../../../stores/core/filter/DataCubeQueryFilterEditorState.js';
 import {
+  FormButton,
   FormDropdownMenu,
   FormDropdownMenuItem,
   FormDropdownMenuTrigger,
@@ -51,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;
@@ -472,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;
@@ -569,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),
                         ),
                       );
@@ -599,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
@@ -844,14 +847,13 @@ export const DataCubeFilterEditor = observer(
                       <div>
                         No filter is specified. Click the button below to start.
                       </div>
-                      <button
-                        className="w-30 mt-2 h-6 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+                      <FormButton
                         onClick={() => {
                           editor.initializeTree();
                         }}
                       >
                         Create New Filter
-                      </button>
+                      </FormButton>
                     </div>
                   )}
                   {editor.tree.root && (
@@ -879,27 +881,19 @@ export const DataCubeFilterEditor = observer(
           </div>
         </div>
         <div className="flex h-10 items-center justify-end px-2">
-          <button
-            className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+          <FormButton onClick={() => editor.display.close()}>Cancel</FormButton>
+          <FormButton className="ml-2" onClick={() => editor.applyChanges()}>
+            Apply
+          </FormButton>
+          <FormButton
+            className="ml-2"
             onClick={() => {
               editor.applyChanges();
               editor.display.close();
             }}
           >
             OK
-          </button>
-          <button
-            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={() => editor.display.close()}
-          >
-            Cancel
-          </button>
-          <button
-            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={() => editor.applyChanges()}
-          >
-            Apply
-          </button>
+          </FormButton>
         </div>
       </>
     );

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';
 
@@ -50,13 +50,6 @@ import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.j
 // We MUST NEVER completely surpress this warning in production, else it's a violation of the ag-grid license!
 // See https://www.ag-grid.com/react-data-grid/licensing/
 const __INTERNAL__original_console_error = console.error; // eslint-disable-line no-console
-// eslint-disable-next-line no-process-env
-if (process.env.NODE_ENV === 'development') {
-  // eslint-disable-next-line no-console
-  console.error = (message?: unknown, ...agrs: unknown[]) => {
-    console.debug(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
-  };
-}
 
 function textColorStyle(
   key: DataCubeConfigurationColorKey,
@@ -332,6 +325,14 @@ const DataCubeGridClient = observer((props: { view: DataCubeViewState }) => {
   const { view } = props;
   const grid = view.grid;
 
+  // eslint-disable-next-line no-process-env
+  if (process.env.NODE_ENV === 'development' && !grid.isClientConfigured) {
+    // eslint-disable-next-line no-console
+    console.error = (message?: unknown, ...agrs: unknown[]) => {
+      console.debug(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
+    };
+  }
+
   return (
     <div className="relative h-[calc(100%_-_20px)] w-full">
       <AgGridReact

package/src/index.tsx

@@ -14,18 +14,40 @@
  * limitations under the License.
  */
 
-export * from './stores/core/models/DataCubeQuery.js';
-export * from './stores/core/models/DataCubeSource.js';
-export * from './stores/core/models/DataCubeConfiguration.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 { DataCubeState } from './stores/DataCubeState.js';
-export * from './stores/DataCubeAPI.js';
-export * from './stores/DataCubeOptions.js';
-export { DataCubeSettingKey } from './stores/DataCubeSettings.js';
 
+export {
+  type DataCubeSetting,
+  DataCubeSettingGroup,
+  DataCubeSettingType,
+  type DataCubeSettingValues,
+} 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 { type DataCubeAPI } from './stores/DataCubeAPI.js';
+export * from './stores/DataCubeOptions.js';
 export * from './components/DataCube.js';
+
+export * from './components/core/DataCubeFormUtils.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

@@ -14,23 +14,116 @@
  * limitations under the License.
  */
 
-import type { DataCubeSource } from './core/models/DataCubeSource.js';
-import type { DataCubeState } from './DataCubeState.js';
+import type {
+  DataCubeSetting,
+  DataCubeSettingValues,
+} 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 = {
-  enableDebugMode?: boolean | undefined;
-  gridClientRowBuffer?: number | undefined;
-  gridClientPurgeClosedRowNodes?: boolean | undefined;
-  gridClientSuppressLargeDatasetWarning?: boolean | undefined;
-
-  onNameChanged?: ((name: string, source: DataCubeSource) => void) | undefined;
-  onSettingChanged?:
-    | ((
-        key: string,
-        value: string | number | boolean | object | undefined,
-      ) => void)
+  // -------------------------- INFRASTRUCTURE ------------------------------
+
+  /**
+   * 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;
+
+  // ------------------------------ 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;
+
+  // ------------------------------ 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;
-  innerHeaderComponent?:
-    | ((dataCube: DataCubeState) => React.ReactNode)
+
+  // ------------------------------ 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;
 };