datacube: streamline the interface

.changeset/rich-radios-grin.md

@@ -0,0 +1,11 @@
+---
+'@finos/legend-application-data-cube-bootstrap': patch
+'@finos/legend-application-data-cube': patch
+'@finos/legend-application-pure-ide': patch
+'@finos/legend-application-studio': patch
+'@finos/legend-application-query': patch
+'@finos/legend-application-repl': patch
+'@finos/legend-query-builder': patch
+'@finos/legend-application': patch
+'@finos/legend-data-cube': patch
+---

packages/legend-application-data-cube/src/components/DataCubeEditor.tsx

@@ -135,7 +135,7 @@ export const DataCubeEditor = observer(() => {
             </div>
           </div>
         </div>
-        {dataCubeStore.cubeViewer ? (
+        {/* {dataCubeStore.cubeViewer ? (
           <>
             <div className="h-[calc(100%_-_30px)]">
               <div className="h-12 w-full bg-gray-200">
@@ -174,7 +174,7 @@ export const DataCubeEditor = observer(() => {
               </div>
             </div>
           </>
-        )}
+        )} */}
       </div>
       {sourceSelector.open && (
         <DataCubeSourceEditor sourceBuilder={sourceSelector} />

packages/legend-application-data-cube/src/components/source/ExistingDataCubeQuery.tsx

@@ -64,7 +64,7 @@ export const ExistingDataCubeQuery = observer(() => {
             </div>
           </div>
         </div>
-        {dataCubeStore.cubeViewer ? (
+        {/* {dataCubeStore.cubeViewer ? (
           <>
             <div className="h-[calc(100%_-_30px)]">
               <div className="h-[calc(100%_-_30px)]">
@@ -94,7 +94,7 @@ export const ExistingDataCubeQuery = observer(() => {
               </div>
             </div>
           </>
-        )}
+        )} */}
       </div>
     </>
   );

packages/legend-application-query/src/components/data-cube/ExistingQueryDataCubeViewer.tsx

@@ -38,10 +38,10 @@ export const DataCubeWrapper = observer(() => {
     flowResult(store.initialize()).catch(applicationStore.alertUnhandledError);
   }, [applicationStore, store]);
 
-  if (!store.engine) {
+  if (!store.engine || !store.query) {
     return null;
   }
-  return <DataCube engine={store.engine} />;
+  return <DataCube query={store.query} engine={store.engine} />;
 });
 
 export const ExistingQueryDataCubeViewer = observer(() => {

packages/legend-application-query/src/stores/data-cube/ExistingQueryDataCubeViewer.ts

@@ -29,23 +29,29 @@ import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
 import { assertErrorThrown, type GeneratorFn } from '@finos/legend-shared';
 import { QueryBuilderDataCubeEngine } from '@finos/legend-query-builder';
 import { flow, makeObservable, observable } from 'mobx';
+import { type DataCubeQuery } from '@finos/legend-data-cube';
 
 export class ExistingQueryDataCubeEditorStore {
   readonly applicationStore: LegendQueryApplicationStore;
   readonly depotServerClient: DepotServerClient;
   readonly graphManagerState: GraphManagerState;
   readonly queryId: string;
-  engine: QueryBuilderDataCubeEngine | undefined;
+
+  query?: DataCubeQuery | undefined;
+  engine?: QueryBuilderDataCubeEngine | undefined;
 
   constructor(
     applicationStore: LegendQueryApplicationStore,
     depotServerClient: DepotServerClient,
     queryId: string,
   ) {
     makeObservable(this, {
-      initialize: flow,
+      query: observable,
       engine: observable,
+
+      initialize: flow,
     });
+
     this.applicationStore = applicationStore;
     this.depotServerClient = depotServerClient;
     this.graphManagerState = new GraphManagerState(
@@ -97,6 +103,7 @@ export class ExistingQueryDataCubeEditorStore {
           resolveVersion(queryInfo.versionId),
         ),
       );
+
       // TODO: we should be able to call engine and convert lambda to relation if not one.
       const engine = new QueryBuilderDataCubeEngine(
         lambda,
@@ -106,6 +113,7 @@ export class ExistingQueryDataCubeEditorStore {
         this.graphManagerState,
       );
       this.engine = engine;
+      this.query = (yield engine.generateDataCubeQuery()) as DataCubeQuery;
     } catch (error) {
       assertErrorThrown(error);
       this.applicationStore.notificationService.notifyError(

packages/legend-application-repl/src/components/LegendREPLApplication.tsx

@@ -23,7 +23,11 @@ import { observer } from 'mobx-react-lite';
 import { useEffect, useMemo } from 'react';
 import { formatDate, LogEvent } from '@finos/legend-shared';
 import { LegendREPLDataCubeEngine } from '../stores/LegendREPLDataCubeEngine.js';
-import { DataCube, DataCubeSettingKey } from '@finos/legend-data-cube';
+import {
+  DataCube,
+  DataCubeSettingKey,
+  type DataCubeQuery,
+} from '@finos/legend-data-cube';
 import { APPLICATION_EVENT } from '@finos/legend-application';
 import { LegendREPLDataCubeSource } from '../stores/LegendREPLDataCubeSource.js';
 import { LegendREPLDataCubeHeader } from './LegendREPLDataCubeHeader.js';
@@ -32,7 +36,8 @@ import {
   useLegendREPLBaseStore,
 } from './LegendREPLFramworkProvider.js';
 
-const LegendREPLDataCube = observer(() => {
+const LegendREPLDataCube = observer((props: { query: DataCubeQuery }) => {
+  const { query } = props;
   const store = useLegendREPLBaseStore();
   const engine = useMemo(() => new LegendREPLDataCubeEngine(store), [store]);
   const application = store.application;
@@ -57,6 +62,7 @@ const LegendREPLDataCube = observer(() => {
 
   return (
     <DataCube
+      query={query}
       engine={engine}
       options={{
         onNameChanged(name, source) {
@@ -109,11 +115,11 @@ export const LegendREPLRouter = observer(() => {
 
   return (
     <div className="h-full">
-      {store.initState.hasSucceeded && (
+      {store.initState.hasSucceeded && store.query && (
         <Routes>
           <Route
             path={LEGEND_REPL_GRID_CLIENT_ROUTE_PATTERN.DATA_CUBE}
-            element={<LegendREPLDataCube />}
+            element={<LegendREPLDataCube query={store.query} />}
           />
         </Routes>
       )}

packages/legend-application-repl/src/stores/LegendREPLBaseStore.tsx

@@ -27,6 +27,7 @@ import { LegendREPLServerClient } from './LegendREPLServerClient.js';
 import {
   DataCubeConfiguration,
   DataCubeQuery,
+  generateBaseSelectQuery,
   LayoutConfiguration,
   RawAdhocQueryDataCubeSource,
   WindowState,
@@ -36,6 +37,7 @@ import { LegendREPLDataCubeSource } from './LegendREPLDataCubeSource.js';
 import { PersistentDataCubeQuery } from '@finos/legend-graph';
 import { LegendREPLPublishDataCubeAlert } from '../components/LegendREPLPublishDataCubeAlert.js';
 import { APPLICATION_EVENT } from '@finos/legend-application';
+import { action, makeObservable, observable } from 'mobx';
 
 export class LegendREPLBaseStore {
   readonly application: LegendREPLApplicationStore;
@@ -48,8 +50,14 @@ export class LegendREPLBaseStore {
   gridClientLicense?: string | undefined;
   queryServerBaseUrl?: string | undefined;
   hostedApplicationBaseUrl?: string | undefined;
+  query?: DataCubeQuery | undefined;
 
   constructor(application: LegendREPLApplicationStore) {
+    makeObservable(this, {
+      query: observable.ref,
+
+      initialize: action,
+    });
     this.application = application;
     this.client = new LegendREPLServerClient(
       new NetworkClient({
@@ -72,6 +80,9 @@ export class LegendREPLBaseStore {
       this.queryServerBaseUrl = info.queryServerBaseUrl;
       this.hostedApplicationBaseUrl = info.hostedApplicationBaseUrl;
       this.gridClientLicense = info.gridClientLicense;
+      this.query = DataCubeQuery.serialization.fromJson(
+        await this.client.getBaseQuery(),
+      );
       this.initState.pass();
     } catch (error) {
       assertErrorThrown(error);
@@ -104,9 +115,7 @@ export class LegendREPLBaseStore {
     try {
       const query = new DataCubeQuery();
       query.query = await dataCube.engine.getValueSpecificationCode(
-        dataCube.engine.generateInitialQuery(
-          dataCube.view.snapshotManager.currentSnapshot,
-        ),
+        generateBaseSelectQuery(dataCube.view.snapshotManager.currentSnapshot),
       );
       const source = new RawAdhocQueryDataCubeSource();
       source.query = this.sourceQuery;

packages/legend-application-repl/src/stores/LegendREPLDataCubeEngine.ts

@@ -23,7 +23,6 @@ import {
   DataCubeFunction,
   type DataCubeSource,
   type DataCubeAPI,
-  DataCubeQuery,
 } from '@finos/legend-data-cube';
 import {
   TDSExecutionResult,
@@ -97,12 +96,6 @@ export class LegendREPLDataCubeEngine extends DataCubeEngine {
 
   // ---------------------------------- IMPLEMENTATION ----------------------------------
 
-  async getBaseQuery() {
-    return DataCubeQuery.serialization.fromJson(
-      await this.client.getBaseQuery(),
-    );
-  }
-
   async processQuerySource(value: PlainObject) {
     if (value._type !== REPL_DATA_CUBE_SOURCE_TYPE) {
       throw new Error(

packages/legend-application-studio/package.json

@@ -48,6 +48,7 @@
     "@finos/legend-application": "workspace:*",
     "@finos/legend-art": "workspace:*",
     "@finos/legend-code-editor": "workspace:*",
+    "@finos/legend-data-cube": "workspace:*",
     "@finos/legend-graph": "workspace:*",
     "@finos/legend-lego": "workspace:*",
     "@finos/legend-query-builder": "workspace:*",

packages/legend-application-studio/src/components/editor/Editor.tsx

@@ -294,10 +294,12 @@ export const Editor = withEditorStore(
             <WorkspaceSyncConflictResolver />
           )}
           <EmbeddedQueryBuilder />
-          {editorStore.embeddedDataCubeViewerEngine && (
+          {editorStore.embeddedDataCubeViewerState && (
             <QueryDataCubeViewer
-              engine={editorStore.embeddedDataCubeViewerEngine}
-              close={() => editorStore.setDataCubeViewState(undefined)}
+              state={editorStore.embeddedDataCubeViewerState}
+              close={() =>
+                editorStore.setEmbeddedDataCubeViewerState(undefined)
+              }
               options={{
                 fullScreen: true,
               }}

packages/legend-application-studio/src/components/editor/editor-group/function-activator/FunctionEditor.tsx

@@ -153,7 +153,7 @@ import type { FunctionActivatorState } from '../../../../stores/editor/editor-st
 import { FunctionTestableEditor } from './testable/FunctionTestableEditor.js';
 import { DocumentationLink } from '@finos/legend-lego/application';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudioDocumentation.js';
-import { openDataCube } from '../../../../stores/editor/data-cube/DataCubeViewerState.js';
+import { openDataCube } from '../../../../stores/editor/data-cube/LegendStudioDataCubeHelper.js';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',

packages/legend-application-studio/src/components/editor/editor-group/service-editor/ServiceExecutionQueryEditor.tsx

@@ -69,7 +69,7 @@ import { EXTERNAL_APPLICATION_NAVIGATION__generateServiceQueryCreatorUrl } from
 import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
 import { pureExecution_setFunction } from '../../../../stores/graph-modifier/DSL_Service_GraphModifierHelper.js';
 import { ServiceEditorState } from '../../../../stores/editor/editor-state/element-editor-state/service/ServiceEditorState.js';
-import { openDataCube } from '../../../../stores/editor/data-cube/DataCubeViewerState.js';
+import { openDataCube } from '../../../../stores/editor/data-cube/LegendStudioDataCubeHelper.js';
 
 const ServiceExecutionResultViewer = observer(
   (props: { executionState: ServicePureExecutionState }) => {

packages/legend-application-studio/src/components/editor/side-bar/Explorer.tsx

@@ -147,7 +147,7 @@ import { QueryDatabaseState } from '../../../stores/editor/editor-state/element-
 import {
   isElementSupportedByDataCube,
   openDataCube,
-} from '../../../stores/editor/data-cube/DataCubeViewerState.js';
+} from '../../../stores/editor/data-cube/LegendStudioDataCubeHelper.js';
 
 const ElementRenamer = observer(() => {
   const editorStore = useEditorStore();

packages/legend-application-studio/src/components/showcase/ShowcaseViewer.tsx

@@ -410,10 +410,12 @@ export const ShowcaseViewer = withEditorStore(
             )}
             <ShowcaseViewerStatusBar />
             <EmbeddedQueryBuilder />
-            {editorStore.embeddedDataCubeViewerEngine && (
+            {editorStore.embeddedDataCubeViewerState && (
               <QueryDataCubeViewer
-                engine={editorStore.embeddedDataCubeViewerEngine}
-                close={() => editorStore.setDataCubeViewState(undefined)}
+                state={editorStore.embeddedDataCubeViewerState}
+                close={() =>
+                  editorStore.setEmbeddedDataCubeViewerState(undefined)
+                }
                 options={{
                   fullScreen: true,
                 }}

packages/legend-application-studio/src/stores/editor/EditorStore.ts

@@ -117,7 +117,7 @@ import {
   GraphEditLazyGrammarModeState,
   LazyTextEditorStore,
 } from '../lazy-text-editor/LazyTextEditorStore.js';
-import type { QueryBuilderDataCubeEngine } from '@finos/legend-query-builder';
+import type { QueryBuilderDataCubeViewerState } from '@finos/legend-query-builder';
 
 export abstract class EditorExtensionState {
   /**
@@ -179,7 +179,7 @@ export class EditorStore implements CommandRegistrar {
   modelImporterState: ModelImporterState;
   projectConfigurationEditorState: ProjectConfigurationEditorState;
   embeddedQueryBuilderState: EmbeddedQueryBuilderState;
-  embeddedDataCubeViewerEngine: QueryBuilderDataCubeEngine | undefined;
+  embeddedDataCubeViewerState: QueryBuilderDataCubeViewerState | undefined;
   newElementState: NewElementState;
   /**
    * Since we want to share element generation state across all element in the editor, we will create 1 element generate state
@@ -225,7 +225,6 @@ export class EditorStore implements CommandRegistrar {
       showSearchElementCommand: observable,
       quickInputState: observable,
       lazyTextEditorStore: observable,
-      embeddedDataCubeViewerEngine: observable,
 
       isInViewerMode: computed,
       disableGraphEditing: computed,
@@ -250,6 +249,9 @@ export class EditorStore implements CommandRegistrar {
       buildGraph: flow,
       toggleTextMode: flow,
       switchModes: flow,
+
+      embeddedDataCubeViewerState: observable,
+      setEmbeddedDataCubeViewerState: action,
     });
 
     this.applicationStore = applicationStore;
@@ -377,8 +379,10 @@ export class EditorStore implements CommandRegistrar {
     this.showSearchElementCommand = val;
   }
 
-  setDataCubeViewState(val: QueryBuilderDataCubeEngine | undefined): void {
-    this.embeddedDataCubeViewerEngine = val;
+  setEmbeddedDataCubeViewerState(
+    val: QueryBuilderDataCubeViewerState | undefined,
+  ): void {
+    this.embeddedDataCubeViewerState = val;
   }
 
   setQuickInputState<T>(val: QuickInputState<T> | undefined): void {