@finos/legend-query-builder 2.1.1 → 2.1.3

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -66,10 +66,10 @@ import {
   uniq,
   parseCSVString,
   guaranteeIsNumber,
+  csvStringify,
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import CSVParser from 'papaparse';
 import { useEffect, useRef, useState } from 'react';
 import {
   instanceValue_setValue,
@@ -534,7 +534,7 @@ const stringifyValue = (values: ValueSpecification[]): string => {
   if (values.length === 0) {
     return '';
   }
-  return CSVParser.unparse([
+  return csvStringify([
     values
       .map((val) => {
         if (val instanceof PrimitiveInstanceValue) {

package/src/components/shared/LambdaEditor.tsx

@@ -19,23 +19,25 @@ import { editor as monacoEditorAPI, type IDisposable } from 'monaco-editor';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
-  disposeEditor,
-  getBaseTextEditorOptions,
-  getEditorValue,
-  normalizeLineEnding,
   FilledWindowMaximizeIcon,
   LongArrowAltDownIcon,
   LongArrowAltUpIcon,
   Dialog,
   useResizeDetector,
-  clearMarkers,
-  setErrorMarkers,
   Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
   ModalTitle,
 } from '@finos/legend-art';
+import {
+  disposeCodeEditor,
+  getBaseCodeEditorOptions,
+  getCodeEditorValue,
+  normalizeLineEnding,
+  clearMarkers,
+  setErrorMarkers,
+} from '@finos/legend-lego/code-editor';
 import type { LambdaEditorState } from '../../stores/shared/LambdaEditorState.js';
 import {
   debounce,
@@ -46,8 +48,8 @@ import {
 import { flowResult } from 'mobx';
 import { ParserError, type EngineError, type Type } from '@finos/legend-graph';
 import {
-  EDITOR_LANGUAGE,
-  EDITOR_THEME,
+  CODE_EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
   TAB_SIZE,
   useApplicationStore,
 } from '@finos/legend-application';
@@ -181,12 +183,12 @@ const LambdaEditorInline = observer(
                 scrollbar: { vertical: 'hidden' },
               };
         const _editor = monacoEditorAPI.create(element, {
-          ...getBaseTextEditorOptions(),
-          language: EDITOR_LANGUAGE.PURE,
+          ...getBaseCodeEditorOptions(),
+          language: CODE_EDITOR_LANGUAGE.PURE,
           theme: applicationStore.layoutService
             .TEMPORARY__isLightColorThemeEnabled
-            ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
-            : EDITOR_THEME.LEGEND,
+            ? CODE_EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
+            : CODE_EDITOR_THEME.LEGEND,
           ...lambdaEditorOptions,
         });
         setEditor(_editor);
@@ -211,7 +213,7 @@ const LambdaEditorInline = observer(
                 },
           );
           // set the value here so we don't lose the error when toggling between expand/collape modes
-          const currentValue = getEditorValue(editor);
+          const currentValue = getCodeEditorValue(editor);
           editor.setValue(currentValue);
         }
       }
@@ -244,7 +246,7 @@ const LambdaEditorInline = observer(
       onDidChangeModelContentEventDisposer.current?.dispose();
       onDidChangeModelContentEventDisposer.current =
         editor.onDidChangeModelContent(() => {
-          const currentVal = getEditorValue(editor);
+          const currentVal = getCodeEditorValue(editor);
           /**
            * Avoid unecessary setting of lambda string. Also, this prevents clearing the non-parser error on first render.
            * Since this method is guaranteed to be called one time during the first rendering when we first set the
@@ -287,7 +289,7 @@ const LambdaEditorInline = observer(
       );
 
       // Set the text value
-      const currentValue = getEditorValue(editor);
+      const currentValue = getCodeEditorValue(editor);
       const editorModel = editor.getModel();
       const currentConfig = editor.getRawOptions();
       if (currentValue !== value) {
@@ -322,7 +324,7 @@ const LambdaEditorInline = observer(
     useEffect(
       () => (): void => {
         if (editor) {
-          disposeEditor(editor);
+          disposeCodeEditor(editor);
         }
         onDidChangeModelContentEventDisposer.current?.dispose();
         onDidFocusEditorWidgetDisposer.current?.dispose();
@@ -342,7 +344,7 @@ const LambdaEditorInline = observer(
             data-testid={QUERY_BUILDER_TEST_ID.LAMBDA_EDITOR__EDITOR_INPUT}
             className="lambda-editor__editor__input"
           >
-            <div className="text-editor__body" ref={textInputRef} />
+            <div className="code-editor__body" ref={textInputRef} />
           </div>
           {Boolean(expectedType) && (
             <div className="lambda-editor__editor__info">
@@ -459,12 +461,12 @@ const LambdaEditorPopUp = observer(
       if (!editor && textInputRef.current) {
         const element = textInputRef.current;
         const _editor = monacoEditorAPI.create(element, {
-          ...getBaseTextEditorOptions(),
-          language: EDITOR_LANGUAGE.PURE,
+          ...getBaseCodeEditorOptions(),
+          language: CODE_EDITOR_LANGUAGE.PURE,
           theme: applicationStore.layoutService
             .TEMPORARY__isLightColorThemeEnabled
-            ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
-            : EDITOR_THEME.LEGEND,
+            ? CODE_EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
+            : CODE_EDITOR_THEME.LEGEND,
         });
         setEditor(_editor);
       }
@@ -485,7 +487,7 @@ const LambdaEditorPopUp = observer(
       onDidChangeModelContentEventDisposer.current?.dispose();
       onDidChangeModelContentEventDisposer.current =
         editor.onDidChangeModelContent(() => {
-          const currentVal = getEditorValue(editor);
+          const currentVal = getCodeEditorValue(editor);
           /**
            * Avoid unecessary setting of lambda string. Also, this prevents clearing the non-parser error on first render.
            * Since this method is guaranteed to be called one time during the first rendering when we first set the
@@ -521,7 +523,7 @@ const LambdaEditorPopUp = observer(
         });
 
       // Set the text value
-      const currentValue = getEditorValue(editor);
+      const currentValue = getCodeEditorValue(editor);
       const editorModel = editor.getModel();
       const currentConfig = editor.getRawOptions();
       if (currentValue !== value) {
@@ -562,7 +564,7 @@ const LambdaEditorPopUp = observer(
     useEffect(
       () => (): void => {
         if (editor) {
-          disposeEditor(editor);
+          disposeCodeEditor(editor);
         }
         onDidChangeModelContentEventDisposer.current?.dispose();
       },
@@ -613,7 +615,7 @@ const LambdaEditorPopUp = observer(
                 data-testid={QUERY_BUILDER_TEST_ID.LAMBDA_EDITOR__EDITOR_INPUT}
                 className="lambda-editor__editor__input"
               >
-                <div className="text-editor__body" ref={textInputRef} />
+                <div className="code-editor__body" ref={textInputRef} />
               </div>
             </div>
           </ModalBody>

package/src/index.ts

@@ -18,7 +18,6 @@
 export * from './application/QueryBuilderTelemetryHelper.js';
 export * from './application/QueryBuilderEvent.js';
 
-export * from './stores/QueryBuilderBootstraper.js';
 export { QueryBuilder_GraphManagerPreset } from './graphManager/QueryBuilder_GraphManagerPreset.js';
 
 export { QUERY_BUILDER_TEST_ID } from './application/QueryBuilderTesting.js';
@@ -53,15 +52,17 @@ export * from './components/QuerySetupUtils.js';
 export * from './components/QueryBuilderTextEditor.js';
 
 export { TEST__setUpQueryBuilder } from './components/QueryBuilderComponentTestUtils.js';
+export { QueryBuilderTextEditorMode } from './stores/QueryBuilderTextEditorState.js';
 
 // ------------------------------------------- Shared components -------------------------------------------
 
 export * from './components/shared/LambdaEditor.js';
 export * from './components/shared/BasicValueSpecificationEditor.js';
 export * from './components/shared/LambdaParameterValuesEditor.js';
+export * from './components/execution-plan/ExecutionPlanViewer.js';
 
 export { LambdaEditorState } from './stores/shared/LambdaEditorState.js';
 export * from './stores/shared/LambdaParameterState.js';
 export * from './stores/shared/ValueSpecificationModifierHelper.js';
 export * from './stores/shared/ValueSpecificationEditorHelper.js';
-export { QueryBuilderTextEditorMode } from './stores/QueryBuilderTextEditorState.js';
+export * from './stores/execution-plan/ExecutionPlanState.js';

package/src/stores/QueryBuilderResultState.ts

@@ -39,7 +39,7 @@ import {
   extractExecutionResultValues,
 } from '@finos/legend-graph';
 import { buildLambdaFunction } from './QueryBuilderValueSpecificationBuilder.js';
-import { ExecutionPlanState, TAB_SIZE } from '@finos/legend-application';
+import { TAB_SIZE } from '@finos/legend-application';
 import {
   buildExecutionParameterValues,
   getExecutionQueryFromRawLambda,
@@ -47,6 +47,7 @@ import {
 import type { LambdaFunctionBuilderOption } from './QueryBuilderValueSpecificationBuilderHelper.js';
 import { QueryBuilderTelemetryHelper } from '../application/QueryBuilderTelemetryHelper.js';
 import { QUERY_BUILDER_EVENT } from '../application/QueryBuilderEvent.js';
+import { ExecutionPlanState } from './execution-plan/ExecutionPlanState.js';
 
 const DEFAULT_LIMIT = 1000;
 

package/src/stores/execution-plan/ExecutionPlanState.ts

@@ -0,0 +1,153 @@
+/**
+ * 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 { observable, action, makeObservable } from 'mobx';
+import {
+  type RawExecutionPlan,
+  type GraphManagerState,
+  ExecutionPlan,
+  ExecutionNode,
+} from '@finos/legend-graph';
+import type { TreeNodeData } from '@finos/legend-art';
+import type { GenericLegendApplicationStore } from '@finos/legend-application';
+
+export class ExecutionPlanViewTreeNodeData implements TreeNodeData {
+  id: string;
+  label: string;
+  isSelected?: boolean;
+  isOpen?: boolean;
+  childrenIds?: string[];
+  executionPlan!: ExecutionPlan;
+
+  constructor(id: string, label: string, executionPlan: ExecutionPlan) {
+    this.id = id;
+    this.label = label;
+    this.executionPlan = executionPlan;
+  }
+}
+
+export class ExecutionNodeTreeNodeData implements TreeNodeData {
+  id: string;
+  label: string;
+  isSelected?: boolean;
+  isOpen?: boolean;
+  childrenIds?: string[];
+  executionNode: ExecutionNode;
+
+  constructor(id: string, label: string, executionNode: ExecutionNode) {
+    this.id = id;
+    this.label = label;
+    this.executionNode = executionNode;
+  }
+}
+
+export enum EXECUTION_PLAN_VIEW_MODE {
+  FORM = 'Form',
+  JSON = 'JSON',
+}
+
+export class ExecutionPlanState {
+  applicationStore: GenericLegendApplicationStore;
+  graphManagerState: GraphManagerState;
+  displayDataJson: object = {};
+  displayData = '';
+  selectedNode:
+    | ExecutionNodeTreeNodeData
+    | ExecutionPlanViewTreeNodeData
+    | undefined = undefined;
+  viewMode: EXECUTION_PLAN_VIEW_MODE = EXECUTION_PLAN_VIEW_MODE.FORM;
+  rawPlan?: RawExecutionPlan | undefined;
+  plan?: ExecutionPlan | undefined;
+  debugText?: string | undefined;
+
+  constructor(
+    applicationStore: GenericLegendApplicationStore,
+    graphManagerState: GraphManagerState,
+  ) {
+    makeObservable(this, {
+      displayData: observable,
+      displayDataJson: observable,
+      viewMode: observable,
+      rawPlan: observable,
+      plan: observable,
+      debugText: observable,
+      setExecutionPlanDisplayData: action,
+      setExecutionPlanDisplayDataJson: action,
+      transformMetadataToProtocolJson: action,
+      setSelectedNode: action,
+      setRawPlan: action,
+      setPlan: action,
+      setViewMode: action,
+      setDebugText: action,
+    });
+    this.applicationStore = applicationStore;
+    this.graphManagerState = graphManagerState;
+  }
+
+  setViewMode(val: EXECUTION_PLAN_VIEW_MODE): void {
+    this.viewMode = val;
+  }
+
+  setRawPlan = (val: RawExecutionPlan | undefined): void => {
+    this.rawPlan = val;
+  };
+
+  setPlan = (val: ExecutionPlan | undefined): void => {
+    this.plan = val;
+  };
+
+  setDebugText(val: string | undefined): void {
+    this.debugText = val;
+  }
+
+  setSelectedNode(
+    node: ExecutionNodeTreeNodeData | ExecutionPlanViewTreeNodeData | undefined,
+  ): void {
+    if (this.selectedNode) {
+      this.selectedNode.isSelected = false;
+    }
+    if (node) {
+      node.isSelected = true;
+    }
+    this.selectedNode = node;
+  }
+
+  setExecutionPlanDisplayData(val: string): void {
+    this.displayData = val;
+  }
+
+  setExecutionPlanDisplayDataJson(val: object): void {
+    this.displayDataJson = val;
+
+    this.setExecutionPlanDisplayData(
+      JSON.stringify(this.displayDataJson, undefined, 2),
+    );
+  }
+
+  transformMetadataToProtocolJson(
+    metaModel: ExecutionPlan | ExecutionNode,
+  ): void {
+    if (metaModel instanceof ExecutionPlan) {
+      const protocolJson =
+        this.graphManagerState.graphManager.serializeExecutionPlan(metaModel);
+      this.setExecutionPlanDisplayDataJson(protocolJson);
+    } else if (metaModel instanceof ExecutionNode) {
+      const protocolJson =
+        this.graphManagerState.graphManager.serializeExecutionNode(metaModel);
+      this.setExecutionPlanDisplayDataJson(protocolJson);
+    }
+  }
+}

package/src/stores/explorer/QueryBuilderPropertySearchState.ts

@@ -26,6 +26,7 @@ import {
 } from '@finos/legend-graph';
 import {
   ActionState,
+  FuzzySearchEngine,
   addUniqueEntry,
   deleteEntry,
   guaranteeNonNullable,
@@ -51,8 +52,7 @@ import {
   QueryBuilderExplorerTreeSubTypeNodeData,
 } from './QueryBuilderExplorerState.js';
 import type { QueryBuilderState } from '../QueryBuilderState.js';
-import { FuzzySearchEngine } from '@finos/legend-art';
-import { TextSearchAdvancedConfigState } from '@finos/legend-application';
+import { FuzzySearchAdvancedConfigState } from '@finos/legend-application/components';
 
 export class QueryBuilderPropertySearchState {
   queryBuilderState: QueryBuilderState;
@@ -72,7 +72,7 @@ export class QueryBuilderPropertySearchState {
 
   // search
   searchEngine: FuzzySearchEngine<QueryBuilderExplorerTreeNodeData>;
-  searchConfigurationState: TextSearchAdvancedConfigState;
+  searchConfigurationState: FuzzySearchAdvancedConfigState;
   searchState = ActionState.create();
   searchText = '';
   searchResults: QueryBuilderExplorerTreeNodeData[] = [];
@@ -112,7 +112,7 @@ export class QueryBuilderPropertySearchState {
     });
 
     this.queryBuilderState = queryBuilderState;
-    this.searchConfigurationState = new TextSearchAdvancedConfigState(
+    this.searchConfigurationState = new FuzzySearchAdvancedConfigState(
       (): void => this.search(),
     );
     this.searchEngine = new FuzzySearchEngine(this.indexedExplorerTreeNodes);

package/src/stores/filter/QueryBuilderFilterState.ts

@@ -245,9 +245,11 @@ export abstract class QueryBuilderFilterTreeNodeData
   }
 
   abstract get dragPreviewLabel(): string;
+
   setIsOpen(val: boolean): void {
     this.isOpen = val;
   }
+
   setParentId(val: string | undefined): void {
     this.parentId = val;
   }

package/tsconfig.json

@@ -33,6 +33,7 @@
   ],
   "files": [
     "./src/index.ts",
+    "./src/application/QueryBuilderDocumentation.ts",
     "./src/application/QueryBuilderEvent.ts",
     "./src/application/QueryBuilderSetting.ts",
     "./src/application/QueryBuilderTelemetryHelper.ts",
@@ -51,7 +52,6 @@
     "./src/graphManager/protocol/pure/QueryBuilder_PureProtocolProcessorPlugin.ts",
     "./src/graphManager/protocol/pure/v1/V1_QueryBuilder_PureGraphManagerExtension.ts",
     "./src/graphManager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.ts",
-    "./src/stores/QueryBuilderBootstraper.ts",
     "./src/stores/QueryBuilderChangeDetectionState.ts",
     "./src/stores/QueryBuilderCommand.ts",
     "./src/stores/QueryBuilderConfig.ts",
@@ -72,6 +72,7 @@
     "./src/stores/QueryBuilderValueSpecificationHelper.ts",
     "./src/stores/ServiceInfo.ts",
     "./src/stores/entitlements/QueryBuilderCheckEntitlementsState.ts",
+    "./src/stores/execution-plan/ExecutionPlanState.ts",
     "./src/stores/explorer/QueryBuilderExplorerState.ts",
     "./src/stores/explorer/QueryBuilderPropertySearchState.ts",
     "./src/stores/explorer/QueryFunctionsExplorerState.ts",
@@ -178,6 +179,8 @@
     "./src/components/QueryBuilderTextEditor.tsx",
     "./src/components/QueryBuilderUnsupportedQueryEditor.tsx",
     "./src/components/ServiceQuerySetupUtils.tsx",
+    "./src/components/execution-plan/ExecutionPlanViewer.tsx",
+    "./src/components/execution-plan/SQLExecutionNodeViewer.tsx",
     "./src/components/explorer/QueryBuilderExplorerPanel.tsx",
     "./src/components/explorer/QueryBuilderFunctionsExplorerPanel.tsx",
     "./src/components/explorer/QueryBuilderMilestoningEditor.tsx",

package/lib/stores/QueryBuilderBootstraper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QueryBuilderBootstraper.d.ts","sourceRoot":"","sources":["../../src/stores/QueryBuilderBootstraper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAKH,eAAO,MAAM,0BAA0B,QAAa,QAAQ,IAAI,CAG/D,CAAC"}

package/lib/stores/QueryBuilderBootstraper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"QueryBuilderBootstraper.js","sourceRoot":"","sources":["../../src/stores/QueryBuilderBootstraper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,cAAc,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAEpF,MAAM,CAAC,MAAM,0BAA0B,GAAG,KAAK,IAAmB,EAAE;IAClE,2CAA2C;IAC3C,qBAAqB,CAAC,eAAe,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC;AACpE,CAAC,CAAC"}