@finos/legend-query-builder 0.0.2 → 0.1.1

package/src/components/QueryBuilderDiffPanel.tsx

@@ -0,0 +1,222 @@
+/**
+ * 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 {
+  EDITOR_LANGUAGE,
+  EDITOR_THEME,
+  TAB_SIZE,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { useResizeDetector } from 'react-resize-detector';
+import {
+  baseTextEditorSettings,
+  clsx,
+  Dialog,
+  disableEditorHotKeys,
+  disposeDiffEditor,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { editor as monacoEditorAPI } from 'monaco-editor';
+import { useEffect, useRef, useState } from 'react';
+import {
+  type QueryBuilderDiffViewState,
+  QueryBuilderDiffViewMode,
+} from '../stores/QueryBuilderChangeDetectionState.js';
+import { prettyCONSTName } from '@finos/legend-shared';
+import { pruneSourceInformation } from '@finos/legend-graph';
+
+const TextDiffView = observer(
+  (props: {
+    language: EDITOR_LANGUAGE;
+    from?: string | undefined;
+    to?: string | undefined;
+  }) => {
+    const { from, to, language } = props;
+    const applicationStore = useApplicationStore();
+    const [editor, setEditor] =
+      useState<monacoEditorAPI.IStandaloneDiffEditor>();
+    const editorRef = useRef<HTMLDivElement>(null);
+    const originalText = from ?? '';
+    const modifiedText = to ?? '';
+
+    const { ref, width, height } = useResizeDetector<HTMLDivElement>();
+
+    useEffect(() => {
+      if (width !== undefined && height !== undefined) {
+        editor?.layout({ width, height });
+      }
+    }, [editor, width, height]);
+
+    useEffect(() => {
+      if (!editor && editorRef.current) {
+        const element = editorRef.current;
+        const _editor = monacoEditorAPI.createDiffEditor(element, {
+          ...baseTextEditorSettings,
+          theme: applicationStore.TEMPORARY__isLightThemeEnabled
+            ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
+            : EDITOR_THEME.LEGEND,
+          readOnly: true,
+          wordWrap: 'on',
+        });
+        disableEditorHotKeys(_editor);
+        setEditor(_editor);
+      }
+    }, [applicationStore, editor]);
+
+    if (editor) {
+      const originalModel = monacoEditorAPI.createModel(originalText, language);
+      const modifiedModel = monacoEditorAPI.createModel(modifiedText, language);
+      editor.setModel({
+        original: originalModel,
+        modified: modifiedModel,
+      });
+    }
+
+    useEffect(
+      () => (): void => {
+        if (editor) {
+          disposeDiffEditor(editor);
+        }
+      },
+      [editor],
+    ); // dispose editor
+
+    return (
+      <div ref={ref} className="text-editor__container">
+        <div className="text-editor__body" ref={editorRef} />
+      </div>
+    );
+  },
+);
+
+export const QueryBuilderDiffViewPanel = observer(
+  (props: { diffViewState: QueryBuilderDiffViewState }) => {
+    const { diffViewState } = props;
+    const fromGrammarText = diffViewState.initialQueryGrammarText;
+    const toGrammarText = diffViewState.currentQueryGrammarText;
+
+    // actions
+    const onChangeMode =
+      (mode: QueryBuilderDiffViewMode): (() => void) =>
+      (): void => {
+        diffViewState.setMode(mode);
+      };
+    const close = (): void =>
+      diffViewState.changeDetectionState.hideDiffViewPanel();
+
+    useEffect(() => {
+      diffViewState.generateGrammarDiff();
+    }, [diffViewState]);
+
+    return (
+      <Dialog
+        open={Boolean(diffViewState)}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <div
+          className={clsx(
+            'modal modal--dark editor-modal query-builder-text-mode__modal',
+          )}
+        >
+          <div className="query-builder__diff-panel">
+            <div className="query-builder__diff-panel__header">
+              {Object.values(QueryBuilderDiffViewMode).map((mode) => (
+                <button
+                  onClick={onChangeMode(mode)}
+                  className={clsx('query-builder__diff-panel__mode', {
+                    'query-builder__diff-panel__mode--selected':
+                      mode === diffViewState.mode,
+                  })}
+                  key={mode}
+                >
+                  {prettyCONSTName(mode)}
+                </button>
+              ))}
+            </div>
+            <div className="query-builder__diff-panel__content">
+              {diffViewState.mode === QueryBuilderDiffViewMode.GRAMMAR && (
+                <TextDiffView
+                  language={EDITOR_LANGUAGE.PURE}
+                  from={fromGrammarText}
+                  to={toGrammarText}
+                />
+              )}
+              {diffViewState.mode === QueryBuilderDiffViewMode.JSON && (
+                <TextDiffView
+                  language={EDITOR_LANGUAGE.JSON}
+                  from={JSON.stringify(
+                    {
+                      parameters: diffViewState.initialQuery.parameters
+                        ? pruneSourceInformation(
+                            diffViewState.initialQuery.parameters as Record<
+                              PropertyKey,
+                              unknown
+                            >,
+                          )
+                        : undefined,
+                      body: diffViewState.initialQuery.body
+                        ? pruneSourceInformation(
+                            diffViewState.initialQuery.body as Record<
+                              PropertyKey,
+                              unknown
+                            >,
+                          )
+                        : undefined,
+                    },
+                    null,
+                    TAB_SIZE,
+                  )}
+                  to={JSON.stringify(
+                    {
+                      parameters: diffViewState.currentQuery.parameters
+                        ? pruneSourceInformation(
+                            diffViewState.currentQuery.parameters as Record<
+                              PropertyKey,
+                              unknown
+                            >,
+                          )
+                        : undefined,
+                      body: diffViewState.currentQuery.body
+                        ? pruneSourceInformation(
+                            diffViewState.currentQuery.body as Record<
+                              PropertyKey,
+                              unknown
+                            >,
+                          )
+                        : undefined,
+                    },
+                    null,
+                    TAB_SIZE,
+                  )}
+                />
+              )}
+            </div>
+            <div className="query-builder__diff-panel__actions">
+              <button className="btn btn--dark" onClick={close}>
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/components/QueryBuilderParametersPanel.tsx

@@ -131,13 +131,13 @@ const VariableExpressionEditor = observer(
       if (
         value === MULTIPLICITY_INFINITE ||
         value === '' ||
-        !isNaN(parseInt(value))
+        !isNaN(parseInt(value, 10))
       ) {
         lambdaParameterState.changeMultiplicity(
           multiplity.lowerBound,
           value === MULTIPLICITY_INFINITE || value === ''
             ? undefined
-            : parseInt(value),
+            : parseInt(value, 10),
         );
         setUppBound(value);
       }

package/src/components/QueryBuilderResultPanel.tsx

@@ -26,6 +26,8 @@ import {
   ContextMenu,
   clsx,
   PauseCircleIcon,
+  ExclamationTriangleIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
@@ -325,7 +327,9 @@ const QueryBuilderGridResult = observer(
           ) : null
         }
         disabled={
-          !(fetchStructureImplementation instanceof QueryBuilderProjectionState)
+          !(
+            fetchStructureImplementation instanceof QueryBuilderProjectionState
+          ) || !queryBuilderState.isQuerySupported
         }
         menuProps={{ elevation: 7 }}
         key={executionResult._UUID}
@@ -374,20 +378,18 @@ const QueryBuilderResultValues = observer(
           isReadOnly={true}
         />
       );
-    } else {
-      const executionResultString = JSON.stringify(
-        extractExecutionResultValues(executionResult),
-        null,
-        TAB_SIZE,
-      );
-      return (
-        <TextInputEditor
-          language={EDITOR_LANGUAGE.JSON}
-          inputValue={executionResultString}
-          isReadOnly={true}
-        />
-      );
     }
+    return (
+      <TextInputEditor
+        language={EDITOR_LANGUAGE.JSON}
+        inputValue={JSON.stringify(
+          extractExecutionResultValues(executionResult),
+          null,
+          TAB_SIZE,
+        )}
+        isReadOnly={true}
+      />
+    );
   },
 );
 
@@ -475,10 +477,12 @@ export const QueryBuilderResultPanel = observer(
     };
     const allowSettingPreviewLimit = queryBuilderState.isQuerySupported;
     const resultSetSize = (result: ExecutionResult | undefined): string =>
-      result && result instanceof TdsExecutionResult
-        ? `${
-            result.result.rows.length
-          } row(s) in ${resultState.executionDuration?.toString()} ms`
+      result
+        ? result instanceof TdsExecutionResult
+          ? `${
+              result.result.rows.length
+            } row(s) in ${resultState.executionDuration?.toString()} ms`
+          : `run in ${resultState.executionDuration?.toString()} ms`
         : '';
 
     return (
@@ -489,6 +493,16 @@ export const QueryBuilderResultPanel = observer(
             <div className="query-builder__result__analytics">
               {resultSetSize(executionResult)}
             </div>
+            {executionResult && resultState.checkForStaleResults && (
+              <div className="query-builder__result__stale-status">
+                <div className="query-builder__result__stale-status__icon">
+                  <ExclamationTriangleIcon />
+                </div>
+                <div className="query-builder__result__stale-status__label">
+                  Preview data might be stale
+                </div>
+              </div>
+            )}
           </div>
           <div className="panel__header__actions query-builder__result__header__actions">
             {allowSettingPreviewLimit && (
@@ -609,7 +623,7 @@ export const QueryBuilderResultPanel = observer(
             </DropdownMenu>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelLoadingIndicator
             isLoading={
               resultState.isRunningQuery ||
@@ -630,7 +644,7 @@ export const QueryBuilderResultPanel = observer(
               />
             </div>
           )}
-        </div>
+        </PanelContent>
         <ExecutionPlanViewer
           executionPlanState={resultState.executionPlanState}
         />

package/src/components/QueryBuilderSideBar.tsx

@@ -49,7 +49,7 @@ import {
   buildElementOption,
   useApplicationStore,
 } from '@finos/legend-application';
-import { MilestoningParametersEditor } from './explorer/QueryBuilderMilestoneEditor.js';
+import { MilestoningParametersEditor } from './explorer/QueryBuilderMilestoningEditor.js';
 
 const getParameterValue = (
   parameter: ValueSpecification | undefined,

package/src/components/QueryBuilderUnsupportedQueryEditor.tsx

@@ -22,6 +22,9 @@ import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizablePanelSplitter,
+  Panel,
+  PanelContent,
+  PanelHeader,
 } from '@finos/legend-art';
 import { QueryBuilderSidebar } from './QueryBuilderSideBar.js';
 import { QueryBuilderParametersPanel } from './QueryBuilderParametersPanel.js';
@@ -39,13 +42,9 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
         QueryBuilderTextEditorMode.TEXT,
       );
     return (
-      <div className="panel">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">content</div>
-          </div>
-        </div>
-        <div className="panel__content">
+      <Panel>
+        <PanelHeader title="content" />
+        <PanelContent>
           <BlankPanelContent>
             <div className="query-builder__unsupported-view__main">
               <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode${errorMessage}`}</div>
@@ -57,8 +56,8 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
               </button>
             </div>
           </BlankPanelContent>
-        </div>
-      </div>
+        </PanelContent>
+      </Panel>
     );
   },
 );

package/src/components/QuerySetupUtils.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { LightQuery } from '@finos/legend-graph';
+
+export type QueryOption = { label: string; value: LightQuery };
+export const buildQueryOption = (query: LightQuery): QueryOption => ({
+  label: query.name,
+  value: query,
+});

package/src/components/ServiceQuerySetupUtils.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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 { generateGAVCoordinates } from '@finos/legend-storage';
+import type { ServiceInfo } from '../stores/ServiceInfo.js';
+
+export type ServiceOption = { label: string; value: ServiceInfo };
+export const buildServiceOption = (value: ServiceInfo): ServiceOption => ({
+  label: value.name,
+  value,
+});
+
+export const formatServiceOptionLabel = (
+  option: ServiceOption,
+): React.ReactNode => (
+  <div
+    className="query-setup__service-option"
+    title={`${option.label} - ${option.value.urlPattern ?? ''} - ${
+      option.value.path
+    } - ${generateGAVCoordinates(
+      option.value.groupId,
+      option.value.artifactId,
+      option.value.versionId,
+    )}`}
+  >
+    <div className="query-setup__service-option__label">{option.label}</div>
+    <div className="query-setup__service-option__path">{option.value.path}</div>
+    <div className="query-setup__service-option__pattern">
+      {option.value.urlPattern ?? 'no pattern'}
+    </div>
+    <div className="query-setup__service-option__gav">
+      {option.value.groupId && option.value.artifactId
+        ? generateGAVCoordinates(
+            option.value.groupId,
+            option.value.artifactId,
+            option.value.versionId,
+          )
+        : null}
+    </div>
+  </div>
+);

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -264,9 +264,6 @@ const QueryBuilderExplorerContextMenu = observer(
     }
   >(function QueryBuilderExplorerContextMenu(props, ref) {
     const { queryBuilderState, openNode, node } = props;
-    const applicationStore = useApplicationStore();
-    const viewType = (): void =>
-      applicationStore.notifyUnsupportedFeature('View Type');
     const addNodeToFetchStructure = (): void =>
       queryBuilderState.fetchStructureState.fetchProperty(node);
     const addNodeChildrenToFetchStructure = (): void => {
@@ -305,7 +302,6 @@ const QueryBuilderExplorerContextMenu = observer(
             Add Properties to Fetch Structure
           </MenuContentItem>
         )}
-        <MenuContentItem onClick={viewType}>View Type</MenuContentItem>
       </MenuContent>
     );
   }),
@@ -411,10 +407,6 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
       }
     };
     // context menu
-    const showContextMenu =
-      node instanceof QueryBuilderExplorerTreeRootNodeData ||
-      (node instanceof QueryBuilderExplorerTreePropertyNodeData &&
-        !(node.type instanceof PrimitiveType));
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
     const previewData = (): void => {
@@ -442,7 +434,10 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
             node={node}
           />
         }
-        disabled={!showContextMenu || queryBuilderState.backdrop}
+        disabled={
+          !(node instanceof QueryBuilderExplorerTreePropertyNodeData) ||
+          queryBuilderState.backdrop
+        }
         menuProps={{ elevation: 7 }}
         onOpen={onContextMenuOpen}
         onClose={onContextMenuClose}
@@ -789,9 +784,7 @@ export const QueryBuilderExplorerPanel = observer(
       if (explorerState.treeData) {
         if (!propertySearchPanelState.isSearchPanelOpen) {
           propertySearchPanelState.setIsSearchPanelOpen(true);
-          if (!propertySearchPanelState.allMappedPropertyNodes.length) {
-            propertySearchPanelState.fetchAllPropertyNodes();
-          }
+          propertySearchPanelState.initialize();
         } else {
           propertySearchPanelState.setIsSearchPanelOpen(false);
         }

package/src/components/explorer/QueryBuilderFunctionsExplorerPanel.tsx

@@ -56,6 +56,8 @@ import {
   Package,
   ROOT_PACKAGE_NAME,
   getMultiplicityDescription,
+  CORE_PURE_PATH,
+  PURE_DOC_TAG,
 } from '@finos/legend-graph';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 
@@ -71,6 +73,15 @@ const QueryBuilderFunctionInfoTooltip: React.FC<{
   placement?: TooltipPlacement | undefined;
 }> = (props) => {
   const { element, children, placement } = props;
+  const documentation = element.taggedValues
+    .filter(
+      (taggedValue) =>
+        taggedValue.tag.ownerReference.value.path ===
+          CORE_PURE_PATH.PROFILE_DOC &&
+        taggedValue.tag.value.value === PURE_DOC_TAG,
+    )
+    .map((taggedValue) => taggedValue.value);
+
   return (
     <Tooltip
       arrow={true}
@@ -100,25 +111,24 @@ const QueryBuilderFunctionInfoTooltip: React.FC<{
             <div className="query-builder__tooltip__item__value">
               {element.parameters
                 .map(
-                  (t) =>
-                    `${t.name}: ${
-                      t.type.value.name
-                    }${getMultiplicityDescription(t.multiplicity)}`,
+                  (param) =>
+                    `${param.name}: ${
+                      param.type.value.name
+                    }${getMultiplicityDescription(param.multiplicity)}`,
                 )
                 .join('; ')}
             </div>
           </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">
-              Documentation
-            </div>
-            <div className="query-builder__tooltip__item__value">
-              {element.taggedValues
-                .filter((t) => t.tag.value._OWNER.name === 'doc')
-                .map((t) => t.value)
-                .join('; ')}
+          {Boolean(documentation.length) && (
+            <div className="query-builder__tooltip__item">
+              <div className="query-builder__tooltip__item__label">
+                Documentation
+              </div>
+              <div className="query-builder__tooltip__item__value">
+                {documentation.join('\n\n')}
+              </div>
             </div>
-          </div>
+          )}
           <div className="query-builder__tooltip__item">
             <div className="query-builder__tooltip__item__label">
               Return Type

package/src/components/explorer/{QueryBuilderMilestoneEditor.tsx → QueryBuilderMilestoningEditor.tsx}

@@ -145,7 +145,7 @@ const MilestoningParameterEditor = observer(
   },
 );
 
-const BiTemporalMilestoneEditor = observer(
+const BiTemporalMilestoningEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     return (
@@ -173,7 +173,7 @@ const BiTemporalMilestoneEditor = observer(
   },
 );
 
-const BusinessTemporalMilestoneEditor = observer(
+const BusinessTemporalMilestoningEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     return (
@@ -191,7 +191,7 @@ const BusinessTemporalMilestoneEditor = observer(
   },
 );
 
-const ProcessingTemporalMilestoneEditor = observer(
+const ProcessingTemporalMilestoningEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     return (
@@ -209,7 +209,7 @@ const ProcessingTemporalMilestoneEditor = observer(
   },
 );
 
-const TemporalMilestoneEditor: React.FC<{
+const TemporalMilestoningEditor: React.FC<{
   queryBuilderState: QueryBuilderState;
 }> = (props) => {
   const { queryBuilderState } = props;
@@ -218,14 +218,18 @@ const TemporalMilestoneEditor: React.FC<{
     queryBuilderState.milestoningState.processingDate &&
     queryBuilderState.milestoningState.businessDate
   ) {
-    return <BiTemporalMilestoneEditor queryBuilderState={queryBuilderState} />;
+    return (
+      <BiTemporalMilestoningEditor queryBuilderState={queryBuilderState} />
+    );
   } else if (queryBuilderState.milestoningState.businessDate) {
     return (
-      <BusinessTemporalMilestoneEditor queryBuilderState={queryBuilderState} />
+      <BusinessTemporalMilestoningEditor
+        queryBuilderState={queryBuilderState}
+      />
     );
   } else if (queryBuilderState.milestoningState.processingDate) {
     return (
-      <ProcessingTemporalMilestoneEditor
+      <ProcessingTemporalMilestoningEditor
         queryBuilderState={queryBuilderState}
       />
     );
@@ -256,7 +260,7 @@ export const MilestoningParametersEditor = observer(
             <div className="modal__title">Milestoning Parameters</div>
           </div>
           <div className="modal__body query-builder__parameters__modal__body">
-            <TemporalMilestoneEditor queryBuilderState={queryBuilderState} />
+            <TemporalMilestoningEditor queryBuilderState={queryBuilderState} />
             <div className="panel__content__form__section__header__label">
               List of compatible milestoning parameters
             </div>