@finos/legend-application-studio 28.19.41 → 28.19.43

package/src/components/editor/editor-group/dataProduct/DataProductEditor.tsx

@@ -77,6 +77,8 @@ import {
   WarningIcon,
   LongArrowRightIcon,
   PURE_MappingIcon,
+  GitBranchIcon,
+  ListIcon,
 } from '@finos/legend-art';
 import {
   type ChangeEventHandler,
@@ -86,7 +88,7 @@ import {
   useState,
 } from 'react';
 import { filterByType } from '@finos/legend-shared';
-import { InlineLambdaEditor } from '@finos/legend-query-builder';
+import { InlineLambdaEditor, LineageViewer } from '@finos/legend-query-builder';
 import { action, flowResult } from 'mobx';
 import { useAuth } from 'react-oidc-context';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
@@ -569,7 +571,9 @@ export const LakehouseDataProductAccessPointEditor = observer(
     dragConnector(ref);
     dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
-
+    const generateLineage = editorStore.applicationStore.guardUnhandledError(
+      () => flowResult(accessPointState.generateLineage()),
+    );
     return (
       <PanelDnDEntry
         ref={ref}
@@ -671,6 +675,74 @@ export const LakehouseDataProductAccessPointEditor = observer(
                     <CaretDownIcon />
                   </ControlledDropdownMenu>
                 </div>
+                <ControlledDropdownMenu
+                  className="access-point-editor__dropdown"
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="btn__dropdown-combo__option"
+                        onClick={() => {
+                          debugPlanGeneration().catch(
+                            editorStore.applicationStore.alertUnhandledError,
+                          );
+                        }}
+                      >
+                        <div
+                          style={{
+                            display: 'flex',
+                            gap: '0.5rem',
+                            alignItems: 'center',
+                          }}
+                        >
+                          <BugIcon /> <span>AP Plan Generation</span>
+                        </div>
+                      </MenuContentItem>
+                      <MenuContentItem
+                        className="btn__dropdown-combo__option"
+                        onClick={generateLineage}
+                      >
+                        <div
+                          style={{
+                            display: 'flex',
+                            gap: '0.5rem',
+                            alignItems: 'center',
+                          }}
+                        >
+                          <span
+                            style={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              transform: 'rotate(90deg)',
+                            }}
+                          >
+                            <GitBranchIcon />
+                          </span>
+                          <span>Lineage Viewer</span>
+                        </div>
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                  }}
+                >
+                  <div
+                    className="access-point-editor__generic-entry__remove-btn__debug"
+                    tabIndex={-1}
+                    title="Access Point Tools"
+                    style={{
+                      background: 'var(--color-blue-200)',
+                      borderRadius: '4px',
+                      marginRight: '0.5rem',
+                      padding: '0.25rem 0.5rem',
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <ListIcon />
+                  </div>
+                </ControlledDropdownMenu>
               </div>
             </div>
             {editingDescription ? (
@@ -729,20 +801,9 @@ export const LakehouseDataProductAccessPointEditor = observer(
                     />
                   </div>
                 </div>
-                <button
-                  className="access-point-editor__generic-entry__remove-btn__debug"
-                  onClick={() => {
-                    debugPlanGeneration().catch(
-                      editorStore.applicationStore.alertUnhandledError,
-                    );
-                  }}
-                  tabIndex={-1}
-                  title="AP Plan Generation"
-                >
-                  <BugIcon />
-                </button>
               </div>
             </div>
+            {<LineageViewer lineageState={accessPointState.lineageState} />}
           </div>
           <button
             className="access-point-editor__generic-entry__remove-btn"

package/src/components/editor/editor-group/service-editor/ServiceExecutionQueryEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { ServicePureExecutionState } from '../../../../stores/editor/editor-state/element-editor-state/service/ServiceExecutionState.js';
 import {
@@ -55,6 +55,7 @@ import {
   ExecutionPlanViewer,
   QueryBuilderAdvancedWorkflowState,
   QueryBuilderActionConfig,
+  LineageViewer,
 } from '@finos/legend-query-builder';
 import { ProjectViewerEditorMode } from '../../../../stores/project-view/ProjectViewerEditorMode.js';
 import { useLegendStudioApplicationStore } from '../../../LegendStudioFrameworkProvider.js';
@@ -231,6 +232,9 @@ export const ServiceExecutionQueryEditor = observer(
       flowResult(executionState.generatePlan(false)),
     );
 
+    const generateLineage = applicationStore.guardUnhandledError(() =>
+      flowResult(executionState.generateLineage()),
+    );
     const debugPlanGeneration = applicationStore.guardUnhandledError(() =>
       flowResult(executionState.generatePlan(true)),
     );
@@ -379,6 +383,12 @@ export const ServiceExecutionQueryEditor = observer(
                         >
                           Generate Plan
                         </MenuContentItem>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={generateLineage}
+                        >
+                          View Lineage
+                        </MenuContentItem>
                         <MenuContentItem
                           className="btn__dropdown-combo__option"
                           onClick={debugPlanGeneration}
@@ -468,6 +478,7 @@ export const ServiceExecutionQueryEditor = observer(
           <ExecutionPlanViewer
             executionPlanState={executionState.executionPlanState}
           />
+          <LineageViewer lineageState={executionState.lineageState} />
           <ServiceExecutionResultViewer executionState={executionState} />
           {executionState.parametersState.parameterValuesEditorState
             .showModal && (

package/src/stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.ts

@@ -46,6 +46,7 @@ import {
   observe_DataProductElementScope,
   DataProductElementScope,
   validate_PureExecutionMapping,
+  type V1_RawLineageModel,
 } from '@finos/legend-graph';
 import type { EditorStore } from '../../../EditorStore.js';
 import { ElementEditorState } from '../ElementEditorState.js';
@@ -88,7 +89,7 @@ import {
   modelAccessPointGroup_setElementExclude,
   modelAccessPointGroup_setMapping,
 } from '../../../../graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
-import { LambdaEditorState } from '@finos/legend-query-builder';
+import { LambdaEditorState, LineageState } from '@finos/legend-query-builder';
 import {
   DataProductElementEditorInitialConfiguration,
   EditorInitialConfiguration,
@@ -238,20 +239,67 @@ export class LakehouseAccessPointState extends AccessPointState {
 
   showDebug = false;
 
+  // Add lineage state and isGeneratingLineage
+  lineageState: LineageState;
+  isGeneratingLineage = false;
+
   constructor(val: LakehouseAccessPoint, editorState: AccessPointGroupState) {
     super(val, editorState);
     makeObservable(this, {
       lambdaState: observable,
       showDebug: observable,
       setShowDebug: action,
+      // Add observables for lineage
+      lineageState: observable,
+      isGeneratingLineage: observable,
+      generateLineage: flow,
     });
     this.accessPoint = val;
     this.lambdaState = new AccessPointLambdaEditorState(this);
+    this.lineageState = new LineageState(
+      this.state.state.editorStore.applicationStore,
+    );
   }
 
   setShowDebug(value: boolean): void {
     this.showDebug = value;
   }
+
+  *generateLineage(): GeneratorFn<void> {
+    if (this.isGeneratingLineage) {
+      return;
+    }
+    try {
+      this.isGeneratingLineage = true;
+      const lambda = this.accessPoint.func;
+      const lineageRawData =
+        (yield this.state.state.editorStore.graphManagerState.graphManager.generateLineage(
+          lambda,
+          undefined,
+          undefined,
+          this.state.state.editorStore.graphManagerState.graph,
+          undefined,
+        )) as V1_RawLineageModel;
+
+      const lineageData =
+        this.state.state.editorStore.graphManagerState.graphManager.buildLineage(
+          lineageRawData,
+        );
+
+      this.lineageState.setLineageData(lineageData);
+    } catch (error) {
+      assertErrorThrown(error);
+      this.state.state.editorStore.applicationStore.logService.error(
+        LogEvent.create(GRAPH_MANAGER_EVENT.LINEAGE_GENERATION_FAILURE),
+        error,
+      );
+      this.state.state.editorStore.applicationStore.notificationService.notifyError(
+        error,
+      );
+    } finally {
+      this.isGeneratingLineage = false;
+    }
+  }
 }
 
 export class AccessPointGroupState {

package/src/stores/editor/editor-state/element-editor-state/service/ServiceExecutionState.ts

@@ -59,6 +59,7 @@ import {
   stub_Mapping,
   reportGraphAnalytics,
   QuerySearchSpecification,
+  type V1_RawLineageModel,
 } from '@finos/legend-graph';
 import { parseGACoordinates } from '@finos/legend-storage';
 import { runtime_addMapping } from '../../../../graph-modifier/DSL_Mapping_GraphModifierHelper.js';
@@ -86,6 +87,7 @@ import {
   ExecutionPlanState,
   QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT,
   getRawLambdaForLetFuncs,
+  LineageState,
 } from '@finos/legend-query-builder';
 import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
 import { openDataCube } from '../../../data-cube/LegendStudioDataCubeHelper.js';
@@ -457,10 +459,12 @@ export abstract class ServicePureExecutionState extends ServiceExecutionState {
   showChangeExecModal = false;
   isRunningQuery = false;
   isGeneratingPlan = false;
+  isGeneratingLineage = false;
   executionResultText?: string | undefined; // NOTE: stored as lossless JSON string
   executionPlanState: ExecutionPlanState;
   readonly parametersState: ServiceExecutionParametersState;
   queryRunPromise: Promise<ExecutionResultWithMetadata> | undefined = undefined;
+  lineageState: LineageState;
 
   constructor(
     editorStore: EditorStore,
@@ -470,6 +474,8 @@ export abstract class ServicePureExecutionState extends ServiceExecutionState {
     super(editorStore, serviceEditorState, execution);
     makeObservable(this, {
       cancelQuery: flow,
+      generateLineage: flow,
+      isGeneratingLineage: observable,
     });
 
     this.execution = execution;
@@ -482,6 +488,7 @@ export abstract class ServicePureExecutionState extends ServiceExecutionState {
       this.editorStore.graphManagerState,
     );
     this.parametersState = new ServiceExecutionParametersState(this);
+    this.lineageState = new LineageState(this.editorStore.applicationStore);
   }
 
   abstract changeExecution(): void;
@@ -737,6 +744,40 @@ export abstract class ServicePureExecutionState extends ServiceExecutionState {
     }
   }
 
+  *generateLineage(): GeneratorFn<void> {
+    if (this.isGeneratingLineage) {
+      return;
+    }
+    try {
+      this.isGeneratingLineage = true;
+      const query = this.queryState.query;
+      const mapping =
+        this.selectedExecutionContextState?.executionContext.mapping.value;
+      const lineageRawData =
+        (yield this.editorStore.graphManagerState.graphManager.generateLineage(
+          query,
+          mapping,
+          undefined,
+          this.editorStore.graphManagerState.graph,
+          undefined,
+        )) as V1_RawLineageModel;
+      const lineageData =
+        this.editorStore.graphManagerState.graphManager.buildLineage(
+          lineageRawData,
+        );
+      this.lineageState.setLineageData(lineageData);
+    } catch (error) {
+      assertErrorThrown(error);
+      this.editorStore.applicationStore.logService.error(
+        LogEvent.create(GRAPH_MANAGER_EVENT.LINEAGE_GENERATION_FAILURE),
+        error,
+      );
+      this.editorStore.applicationStore.notificationService.notifyError(error);
+    } finally {
+      this.isGeneratingLineage = false;
+    }
+  }
+
   get serviceExecutionParameters():
     | { query: RawLambda; mapping: Mapping; runtime: Runtime }
     | undefined {