@finos/legend-application-studio 28.19.99 → 28.19.100

package/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -34,7 +34,7 @@ import {
   Dialog,
   compareLabelFn,
   CustomSelectorInput,
-  Checkbox,
+  PanelBooleanField,
 } from '@finos/legend-art';
 import type { EditorStore } from '../../../stores/editor/EditorStore.js';
 import {
@@ -494,8 +494,8 @@ const NewLakehouseDataProductEditor = observer(() => {
     event,
   ) => newProductDriver.setTitle(event.target.value);
 
-  const onTypeChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    newProductDriver.setModelled(event.target.checked);
+  const setIsModeled = (val: boolean): void => {
+    newProductDriver.setModeled(val);
   };
 
   return (
@@ -510,14 +510,15 @@ const NewLakehouseDataProductEditor = observer(() => {
           placeholder={`Choose a title for this Data Product to display in Marketplace`}
         />
       </div>
-      <div className="explorer__new-element-modal__driver">
-        <Checkbox
-          checked={newProductDriver.modelled}
-          onChange={onTypeChange}
-          size="small"
-          className="panel__content__form__section__list__item__content__actions-exclude__btn"
+
+      <div className="explorer__new-element-modal__driver--bottom-padding">
+        <PanelBooleanField
+          isReadOnly={false}
+          value={newProductDriver.modeled}
+          name="Modeled"
+          prompt="Expose data product access points through curated data models"
+          update={(value?: boolean): void => setIsModeled(Boolean(value))}
         />
-        <span>Modeled Data Product</span>
       </div>
     </>
   );

package/src/components/editor/side-bar/Explorer.tsx

@@ -115,6 +115,8 @@ import {
   isRelationalDatabaseConnection,
   LegendSDLC,
   DataProduct,
+  IngestDefinition,
+  isAccessorDataProductOrIngestDefinition,
 } from '@finos/legend-graph';
 import {
   ActionAlertActionType,
@@ -125,6 +127,7 @@ import {
   getPackageableElementOptionFormatter,
   type PackageableElementOption,
 } from '@finos/legend-lego/graph-editor';
+import { LegendSQLPlaygroundModal } from '../LegendSQLPlaygroundModal.js';
 import {
   PACKAGEABLE_ELEMENT_GROUP_BY_CATEGORY,
   PACKAGEABLE_ELEMENT_TYPE,
@@ -542,6 +545,16 @@ const ExplorerContextMenu = observer(
           await queryDataProduct(node.packageableElement, editorStore);
         }
       });
+    const openLegendSqlPlayground = (): void => {
+      if (
+        node?.packageableElement &&
+        isAccessorDataProductOrIngestDefinition(node.packageableElement)
+      ) {
+        editorStore.legendSQLStudioPlaygroundState.open(
+          node.packageableElement,
+        );
+      }
+    };
     const buildServiceQuery = editorStore.applicationStore.guardUnhandledError(
       async () => {
         if (node?.packageableElement instanceof Service) {
@@ -858,6 +871,9 @@ const ExplorerContextMenu = observer(
             <MenuContentItem onClick={buildDataProductQuery}>
               Query...
             </MenuContentItem>
+            <MenuContentItem onClick={openLegendSqlPlayground}>
+              Run SQL...
+            </MenuContentItem>
             <MenuContentDivider />
           </>
         )}
@@ -877,6 +893,14 @@ const ExplorerContextMenu = observer(
             </MenuContentItem>
           </>
         )}
+        {node.packageableElement instanceof IngestDefinition && (
+          <>
+            <MenuContentItem onClick={openLegendSqlPlayground}>
+              Run SQL...
+            </MenuContentItem>
+            <MenuContentDivider />
+          </>
+        )}
         {isElementSupportedByDataCube(node.packageableElement) && (
           <>
             <MenuContentItem onClick={openCubeViewer}>
@@ -1579,6 +1603,11 @@ export const Explorer = observer(() => {
           </div>
         </div>
       </div>
+      {editorStore.legendSQLStudioPlaygroundState.isOpen && (
+        <LegendSQLPlaygroundModal
+          playgroundState={editorStore.legendSQLStudioPlaygroundState}
+        />
+      )}
     </div>
   );
 });

package/src/stores/editor/EditorStore.ts

@@ -110,6 +110,7 @@ import type { GraphEditorMode } from './GraphEditorMode.js';
 import { GraphEditGrammarModeState } from './GraphEditGrammarModeState.js';
 import { GlobalBulkServiceRegistrationState } from './sidebar-state/BulkServiceRegistrationState.js';
 import { StudioSQLPlaygroundPanelState } from './panel-group/StudioSQLPlaygroundPanelState.js';
+import { LegendSQLStudioPlaygroundState } from './LegendSQLStudioPlaygroundState.js';
 import type { QuickInputState } from './QuickInputState.js';
 import { GlobalEndToEndWorkflowState } from './sidebar-state/end-to-end-workflow/GlobalEndToEndFlowState.js';
 import {
@@ -184,6 +185,7 @@ export class EditorStore implements CommandRegistrar {
   devToolState: DevToolPanelState;
   devMetadataState: DevMetadataState;
   studioSqlPlaygroundState: StudioSQLPlaygroundPanelState;
+  legendSQLStudioPlaygroundState: LegendSQLStudioPlaygroundState;
 
   modelImporterState: ModelImporterState;
   projectConfigurationEditorState: ProjectConfigurationEditorState;
@@ -281,6 +283,9 @@ export class EditorStore implements CommandRegistrar {
     this.devToolState = new DevToolPanelState(this);
     this.devMetadataState = new DevMetadataState(this);
     this.studioSqlPlaygroundState = new StudioSQLPlaygroundPanelState(this);
+    this.legendSQLStudioPlaygroundState = new LegendSQLStudioPlaygroundState(
+      this,
+    );
     this.embeddedQueryBuilderState = new EmbeddedQueryBuilderState(this);
     // side bar panels
     this.explorerTreeState = new ExplorerTreeState(this);

package/src/stores/editor/LegendSQLStudioPlaygroundState.ts

@@ -0,0 +1,228 @@
+/**
+ * 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 {
+  type GeneratorFn,
+  assertErrorThrown,
+  LogEvent,
+  csvStringify,
+} from '@finos/legend-shared';
+import { observable, makeObservable, flow, flowResult } from 'mobx';
+import {
+  type PackageableElement,
+  V1_DataProductArtifact,
+  DataProduct,
+  IngestDefinition,
+  type TEMPORARY_IngestContent,
+  type ArtifactGenerationExtensionResult,
+  TDSExecutionResult,
+  type RawLambda,
+  type ExecutionResultWithMetadata,
+  LakehouseRuntime,
+  GRAPH_MANAGER_EVENT,
+} from '@finos/legend-graph';
+import type { EditorStore } from './EditorStore.js';
+import {
+  LegendSQLPlaygroundState,
+  DEFAULT_SQL_TEXT,
+  buildDefaultDataProductQuery,
+  buildDefaultIngestQuery,
+} from '@finos/legend-query-builder';
+
+const DATA_PRODUCT_ARTIFACT_EXTENSION = 'dataProduct';
+
+export class LegendSQLStudioPlaygroundState extends LegendSQLPlaygroundState {
+  readonly editorStore: EditorStore;
+  targetElement?: PackageableElement | undefined;
+  isOpen = false;
+
+  constructor(editorStore: EditorStore) {
+    super();
+    makeObservable(this, {
+      targetElement: observable,
+      isOpen: observable,
+      executeRawSQL: flow,
+      initializeAccessorExplorer: flow,
+    });
+    this.editorStore = editorStore;
+  }
+
+  open(element: PackageableElement): void {
+    this.isOpen = true;
+    this.targetElement = element;
+    this.accessorExplorerState = undefined;
+    flowResult(this.initializeAccessorExplorer()).catch(
+      this.editorStore.applicationStore.alertUnhandledError,
+    );
+    if (element instanceof DataProduct) {
+      const firstAccessPointId =
+        element.accessPointGroups[0]?.accessPoints[0]?.id;
+      this.setSQLQuery(
+        `${DEFAULT_SQL_TEXT}${buildDefaultDataProductQuery(element.path, firstAccessPointId)}`,
+      );
+    } else if (element instanceof IngestDefinition) {
+      const content = element.content as unknown as
+        | TEMPORARY_IngestContent
+        | undefined;
+      const firstDatasetName = content?.datasets?.[0]?.name;
+      this.setSQLQuery(
+        `${DEFAULT_SQL_TEXT}${buildDefaultIngestQuery(element.path, firstDatasetName)}`,
+      );
+    } else {
+      this.setSQLQuery(DEFAULT_SQL_TEXT);
+    }
+  }
+
+  close(): void {
+    this.isOpen = false;
+    this.targetElement = undefined;
+    this.accessorExplorerState = undefined;
+    this.setSQLQuery(DEFAULT_SQL_TEXT);
+  }
+
+  *initializeAccessorExplorer(): GeneratorFn<void> {
+    if (this.accessorExplorerState || !this.targetElement) {
+      return;
+    }
+    try {
+      const entities = this.editorStore.graphManagerState.graph.allElements
+        .filter(
+          (element) =>
+            element instanceof DataProduct ||
+            element instanceof IngestDefinition,
+        )
+        .map((element) =>
+          this.editorStore.graphManagerState.graphManager.elementToEntity(
+            element,
+          ),
+        );
+
+      yield flowResult(
+        this.initializeExplorer(
+          entities,
+          this.editorStore.graphManagerState.graphManager.pluginManager.getPureProtocolProcessorPlugins(),
+          (path) => this.fetchDataProductArtifact(path),
+        ),
+      );
+    } catch (error) {
+      assertErrorThrown(error);
+      this.editorStore.applicationStore.logService.error(
+        LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
+        error,
+      );
+      this.editorStore.applicationStore.notificationService.notifyError(error);
+    }
+  }
+
+  private async fetchDataProductArtifact(
+    dataProductPath: string,
+  ): Promise<V1_DataProductArtifact | undefined> {
+    try {
+      const generatedArtifacts =
+        (await this.editorStore.graphManagerState.graphManager.generateArtifacts(
+          this.editorStore.graphManagerState.graph,
+          this.editorStore.graphEditorMode.getGraphTextInputOption(),
+          [dataProductPath],
+        )) as unknown as ArtifactGenerationExtensionResult;
+
+      const dataProductArtifactResults = generatedArtifacts.values.filter(
+        (artifact) => artifact.extension === DATA_PRODUCT_ARTIFACT_EXTENSION,
+      );
+
+      for (const artifactResult of dataProductArtifactResults) {
+        for (const artifactByElement of artifactResult.artifactsByExtensionElements) {
+          const dataProductContent = artifactByElement.files[0]?.content;
+          if (dataProductContent) {
+            return V1_DataProductArtifact.serialization.fromJson(
+              JSON.parse(dataProductContent),
+            );
+          }
+        }
+      }
+    } catch (error) {
+      assertErrorThrown(error);
+      this.editorStore.applicationStore.notificationService.notifyError(
+        `Error fetching artifact for ${dataProductPath}: ${error}`,
+      );
+    }
+    return undefined;
+  }
+
+  override *executeRawSQL(): GeneratorFn<void> {
+    if (this.executeRawSQLState.isInProgress || !this.targetElement) {
+      return;
+    }
+    try {
+      this.executeRawSQLState.inProgress();
+      const sql = this.getSelectedSQL();
+      const start = Date.now();
+      const sqlQuery = `#SQL{${sql}}#`;
+
+      const runtimes = this.editorStore.graphManagerState.graph.ownRuntimes;
+      const packageableRuntime = runtimes[0];
+      if (!packageableRuntime) {
+        this.editorStore.applicationStore.notificationService.notifyError(
+          new Error('No runtime found in the graph'),
+        );
+        return;
+      }
+      if (!(packageableRuntime.runtimeValue instanceof LakehouseRuntime)) {
+        this.editorStore.applicationStore.notificationService.notifyError(
+          new Error('Runtime must be a LakehouseRuntime'),
+        );
+        return;
+      }
+      const runtime = packageableRuntime.runtimeValue;
+      const queryToExecute = `${sqlQuery}->from(${packageableRuntime.path})`;
+
+      const lambda =
+        (yield this.editorStore.graphManagerState.graphManager.pureCodeToLambda(
+          queryToExecute,
+        )) as RawLambda;
+
+      const executionResult =
+        (yield this.editorStore.graphManagerState.graphManager.runQuery(
+          lambda,
+          undefined,
+          runtime,
+          this.editorStore.graphManagerState.graph,
+        )) as ExecutionResultWithMetadata;
+
+      const result = executionResult.executionResult;
+      if (result instanceof TDSExecutionResult) {
+        const data = result.result.rows.map((row) => row.values);
+        const csvData = csvStringify([result.result.columns, ...data]);
+        this.setSqlExecutionResult({
+          value: csvData,
+          sqlDuration: Date.now() - start,
+        });
+      } else {
+        this.editorStore.applicationStore.notificationService.notifyError(
+          'Expected TDS execution result, got unsupported result type',
+        );
+      }
+    } catch (error) {
+      assertErrorThrown(error);
+      this.editorStore.applicationStore.logService.error(
+        LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
+        error,
+      );
+      this.editorStore.applicationStore.notificationService.notifyError(error);
+    } finally {
+      this.executeRawSQLState.complete();
+    }
+  }
+}

package/src/stores/editor/NewElementState.ts

@@ -517,15 +517,15 @@ export class NewPackageableConnectionDriver extends NewElementDriver<Packageable
 
 export class NewLakehouseDataProductDriver extends NewElementDriver<DataProduct> {
   title: string;
-  modelled = false;
+  modeled = false;
 
   constructor(editorStore: EditorStore) {
     super(editorStore);
     this.title = '';
     makeObservable(this, {
       title: observable,
-      modelled: observable,
-      setModelled: action,
+      modeled: observable,
+      setModeled: action,
       setTitle: action,
       isValid: computed,
     });
@@ -534,18 +534,21 @@ export class NewLakehouseDataProductDriver extends NewElementDriver<DataProduct>
   override get isValid(): boolean {
     return Boolean(this.title);
   }
+
   setTitle(val: string) {
     this.title = val;
   }
-  setModelled(val: boolean) {
-    this.modelled = val;
+
+  setModeled(val: boolean) {
+    this.modeled = val;
   }
+
   override createElement(name: string): DataProduct {
     const dataProduct = new DataProduct(name);
     dataProduct_setTitle(dataProduct, this.title);
     dataProduct_setType(dataProduct, new InternalDataProductType());
 
-    if (!this.modelled) {
+    if (!this.modeled) {
       const defaultGroup = new AccessPointGroup();
       defaultGroup.id = 'default';
       dataProduct_addAccessPointGroup(dataProduct, defaultGroup);

package/src/stores/editor/panel-group/StudioSQLPlaygroundPanelState.ts

@@ -35,7 +35,7 @@ import type { CommandRegistrar } from '@finos/legend-application';
 import { STO_RELATIONAL_LEGEND_STUDIO_COMMAND_KEY } from '../../../__lib__/STO_Relational_LegendStudioCommand.js';
 import { PANEL_MODE } from '../EditorConfig.js';
 import { DatabaseSchemaExplorerState } from '../editor-state/element-editor-state/connection/DatabaseBuilderState.js';
-import { AbstractSQLPlaygroundState } from '@finos/legend-lego/sql-playground';
+import { AbstractSQLPlaygroundState } from '@finos/legend-query-builder';
 
 const DEFAULT_SQL_TEXT = `--Start building your SQL. Note that you can also drag-and-drop nodes from schema explorer\n`;
 

package/tsconfig.json

@@ -92,6 +92,7 @@
     "./src/stores/editor/GraphEditFormModeState.ts",
     "./src/stores/editor/GraphEditGrammarModeState.ts",
     "./src/stores/editor/GraphEditorMode.ts",
+    "./src/stores/editor/LegendSQLStudioPlaygroundState.ts",
     "./src/stores/editor/NewElementState.ts",
     "./src/stores/editor/QuickInputState.ts",
     "./src/stores/editor/StandardEditorMode.ts",
@@ -232,6 +233,7 @@
     "./src/components/editor/Editor.tsx",
     "./src/components/editor/EditorStoreProvider.tsx",
     "./src/components/editor/EmbeddedQueryBuilder.tsx",
+    "./src/components/editor/LegendSQLPlaygroundModal.tsx",
     "./src/components/editor/QuickInput.tsx",
     "./src/components/editor/ShowcaseSideBar.tsx",
     "./src/components/editor/StatusBar.tsx",