@finos/legend-application-query 5.0.0

package/src/components/QueryBuilderGraphFetchTreePanel.tsx

@@ -0,0 +1,270 @@
+/**
+ * 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 { useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { type DropTargetMonitor, useDrop } from 'react-dnd';
+import {
+  type TreeNodeContainerProps,
+  clsx,
+  TreeView,
+  BlankPanelPlaceholder,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  TimesIcon,
+  CheckSquareIcon,
+  SquareIcon,
+} from '@finos/legend-art';
+import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
+import { isNonNullable } from '@finos/legend-shared';
+import {
+  type QueryBuilderGraphFetchTreeData,
+  type QueryBuilderGraphFetchTreeNodeData,
+  removeNodeRecursively,
+  isGraphFetchTreeDataEmpty,
+} from '../stores/QueryBuilderGraphFetchTreeUtil.js';
+import {
+  type QueryBuilderExplorerTreeDragSource,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
+} from '../stores/QueryBuilderExplorerState.js';
+import type { QueryBuilderGraphFetchTreeState } from '../stores/QueryBuilderGraphFetchTreeState.js';
+import { getClassPropertyIcon } from './shared/ElementIconUtils.js';
+
+const QueryBuilderGraphFetchTreeNodeContainer: React.FC<
+  TreeNodeContainerProps<
+    QueryBuilderGraphFetchTreeNodeData,
+    {
+      isReadOnly: boolean;
+      removeNode: (node: QueryBuilderGraphFetchTreeNodeData) => void;
+    }
+  >
+> = (props) => {
+  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+  const { removeNode } = innerProps;
+  const property = node.tree.property.value;
+  const type = property.genericType.value.rawType;
+  const subType = node.tree.subType?.value;
+  const isExpandable = Boolean(node.childrenIds.length);
+  const nodeExpandIcon = isExpandable ? (
+    node.isOpen ? (
+      <ChevronDownIcon />
+    ) : (
+      <ChevronRightIcon />
+    )
+  ) : (
+    <div />
+  );
+  const nodeTypeIcon = getClassPropertyIcon(type);
+  const toggleExpandNode = (): void => onNodeSelect?.(node);
+  const deleteNode = (): void => removeNode(node);
+
+  return (
+    <div
+      className="tree-view__node__container query-builder-graph-fetch-tree__node__container"
+      style={{
+        paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 2)}rem`,
+        display: 'flex',
+      }}
+    >
+      <div className="query-builder-graph-fetch-tree__node__content">
+        <div className="tree-view__node__icon query-builder-graph-fetch-tree__node__icon">
+          <div
+            className="query-builder-graph-fetch-tree__expand-icon"
+            onClick={toggleExpandNode}
+          >
+            {nodeExpandIcon}
+          </div>
+          <div
+            className="query-builder-graph-fetch-tree__type-icon"
+            onClick={toggleExpandNode}
+          >
+            {nodeTypeIcon}
+          </div>
+        </div>
+        <div
+          className="tree-view__node__label query-builder-graph-fetch-tree__node__label"
+          onClick={toggleExpandNode}
+        >
+          {node.label}
+          {/* TODO: support alias */}
+          {/* TODO: qualified properties */}
+          {/* TODO: think of a better layout to represent subtype */}
+          {subType && (
+            <div className="query-builder-graph-fetch-tree__node__sub-type">
+              <div className="query-builder-graph-fetch-tree__node__sub-type__label">
+                {subType.name}
+              </div>
+            </div>
+          )}
+          {
+            <div className="query-builder-graph-fetch-tree__node__type">
+              <div className="query-builder-graph-fetch-tree__node__type__label">
+                {type.name}
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+      <div className="query-builder-graph-fetch-tree__node__actions">
+        <button
+          className="query-builder-graph-fetch-tree__node__action"
+          title="Remove"
+          tabIndex={-1}
+          onClick={deleteNode}
+        >
+          <TimesIcon />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const QueryBuilderGraphFetchTreeExplorer = observer(
+  (props: {
+    graphFetchState: QueryBuilderGraphFetchTreeState;
+    treeData: QueryBuilderGraphFetchTreeData;
+    updateTreeData: (data: QueryBuilderGraphFetchTreeData) => void;
+    isReadOnly: boolean;
+  }) => {
+    const { graphFetchState, treeData, updateTreeData, isReadOnly } = props;
+
+    const onNodeSelect = (node: QueryBuilderGraphFetchTreeNodeData): void => {
+      if (node.childrenIds.length) {
+        node.isOpen = !node.isOpen;
+      }
+      updateTreeData({ ...treeData });
+    };
+
+    const getChildNodes = (
+      node: QueryBuilderGraphFetchTreeNodeData,
+    ): QueryBuilderGraphFetchTreeNodeData[] =>
+      node.childrenIds
+        .map((id) => treeData.nodes.get(id))
+        .filter(isNonNullable);
+
+    const removeNode = (node: QueryBuilderGraphFetchTreeNodeData): void => {
+      removeNodeRecursively(treeData, node);
+      updateTreeData({ ...treeData });
+    };
+
+    const toggleChecked = (): void =>
+      graphFetchState.setChecked(!graphFetchState.isChecked);
+
+    return (
+      <div className="query-builder-graph-fetch-tree">
+        <div className="query-builder-graph-fetch-tree__settings">
+          <div
+            className={clsx('panel__content__form__section__toggler')}
+            onClick={toggleChecked}
+          >
+            <button
+              className={clsx('panel__content__form__section__toggler__btn', {
+                'panel__content__form__section__toggler__btn--toggled':
+                  graphFetchState.isChecked,
+              })}
+            >
+              {graphFetchState.isChecked ? <CheckSquareIcon /> : <SquareIcon />}
+            </button>
+            <div className="panel__content__form__section__toggler__prompt">
+              Check graph fetch
+            </div>
+          </div>
+        </div>
+        <div className="query-builder-graph-fetch-tree__container">
+          <TreeView
+            components={{
+              TreeNodeContainer: QueryBuilderGraphFetchTreeNodeContainer,
+            }}
+            treeData={treeData}
+            onNodeSelect={onNodeSelect}
+            getChildNodes={getChildNodes}
+            innerProps={{
+              isReadOnly,
+              removeNode,
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+export const QueryBuilderGraphFetchTreePanel = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const fetchStructureState = queryBuilderState.fetchStructureState;
+    const graphFetchState = fetchStructureState.graphFetchTreeState;
+    const treeData = graphFetchState.treeData;
+
+    // Deep/Graph Fetch Tree
+    const updateTreeData = (data: QueryBuilderGraphFetchTreeData): void => {
+      graphFetchState.setGraphFetchTree(data);
+    };
+
+    // Drag and Drop
+    const handleDrop = useCallback(
+      (item: QueryBuilderExplorerTreeDragSource): void => {
+        graphFetchState.addProperty(item.node);
+      },
+      [graphFetchState],
+    );
+    const [{ isPropertyDragOver }, dropConnector] = useDrop(
+      () => ({
+        accept: [
+          QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
+          QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+        ],
+        drop: (
+          item: QueryBuilderExplorerTreeDragSource,
+          monitor: DropTargetMonitor,
+        ): void => {
+          if (!monitor.didDrop()) {
+            handleDrop(item);
+          } // prevent drop event propagation to accomondate for nested DnD
+        },
+        collect: (monitor): { isPropertyDragOver: boolean } => ({
+          isPropertyDragOver: monitor.isOver({ shallow: true }),
+        }),
+      }),
+      [handleDrop],
+    );
+
+    return (
+      <div
+        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_GRAPH_FETCH}
+        className="panel__content dnd__overlay__container"
+        ref={dropConnector}
+      >
+        <div className={clsx({ dnd__overlay: isPropertyDragOver })} />
+        {(!treeData || isGraphFetchTreeDataEmpty(treeData)) && (
+          <BlankPanelPlaceholder
+            placeholderText="Add a graph fetch property"
+            tooltipText="Drag and drop properties here"
+          />
+        )}
+        {treeData && !isGraphFetchTreeDataEmpty(treeData) && (
+          <QueryBuilderGraphFetchTreeExplorer
+            graphFetchState={graphFetchState}
+            treeData={treeData}
+            isReadOnly={false}
+            updateTreeData={updateTreeData}
+          />
+        )}
+      </div>
+    );
+  },
+);

package/src/components/QueryBuilderLambdaEditor.tsx

@@ -0,0 +1,117 @@
+/**
+ * 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 { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { type IKeyboardEvent, KeyCode } from 'monaco-editor';
+import { useCallback, useMemo } from 'react';
+import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import type { Type } from '@finos/legend-graph';
+import {
+  useApplicationStore,
+  LambdaEditor,
+  type LambdaEditorState,
+  type LambdaEditorOnKeyDownEventHandler,
+} from '@finos/legend-application';
+
+export const QueryBuilderLambdaEditor = observer(
+  (props: {
+    queryBuilderState: QueryBuilderState;
+    className?: string;
+    disabled: boolean;
+    lambdaEditorState: LambdaEditorState;
+    /**
+     * TODO: when we pass in these expected type we should match a type as expected type if it's covariance, i.e. it is a subtype of
+     * the expected type. Note that we also have to handle that relationship for Primitive type
+     * See https://dzone.com/articles/covariance-and-contravariance
+     */
+    expectedType?: Type;
+    matchedExpectedType?: () => boolean;
+    onExpectedTypeLabelSelect?: () => void;
+    forceBackdrop: boolean;
+    disableExpansion?: boolean | undefined;
+    forceExpansion?: boolean | undefined;
+    disablePopUp?: boolean | undefined;
+    useBaseTextEditorSettings?: boolean | undefined;
+    hideErrorBar?: boolean | undefined;
+  }) => {
+    const {
+      queryBuilderState,
+      className,
+      lambdaEditorState,
+      disabled,
+      forceBackdrop,
+      expectedType,
+      onExpectedTypeLabelSelect,
+      matchedExpectedType,
+      disableExpansion,
+      forceExpansion,
+      disablePopUp,
+      useBaseTextEditorSettings,
+      hideErrorBar,
+    } = props;
+    const applicationStore = useApplicationStore();
+    const backdropSetter = useCallback(
+      (val: boolean) => queryBuilderState.setBackdrop(val),
+      [queryBuilderState],
+    );
+    const onKeyDownEventHandlers: LambdaEditorOnKeyDownEventHandler[] = useMemo(
+      () => [
+        {
+          matcher: (event: IKeyboardEvent): boolean =>
+            event.keyCode === KeyCode.F9,
+          action: (event: IKeyboardEvent): void => {
+            const handler = async (): Promise<void> => {
+              lambdaEditorState.clearErrors();
+              if (!disabled) {
+                await flowResult(
+                  lambdaEditorState.convertLambdaGrammarStringToObject(),
+                );
+                // abort action if parser error occurred
+                if (lambdaEditorState.parserError) {
+                  return;
+                }
+              }
+              await flowResult(queryBuilderState.compileQuery());
+            };
+            handler().catch(applicationStore.alertUnhandledError);
+          },
+        },
+      ],
+      [disabled, lambdaEditorState, applicationStore, queryBuilderState],
+    );
+
+    return (
+      <LambdaEditor
+        key={lambdaEditorState.uuid}
+        className={className}
+        disabled={disabled}
+        lambdaEditorState={lambdaEditorState}
+        expectedType={expectedType}
+        matchedExpectedType={matchedExpectedType}
+        onExpectedTypeLabelSelect={onExpectedTypeLabelSelect}
+        forceBackdrop={forceBackdrop}
+        backdropSetter={backdropSetter}
+        disableExpansion={disableExpansion}
+        forceExpansion={forceExpansion}
+        disablePopUp={disablePopUp}
+        useBaseTextEditorSettings={useBaseTextEditorSettings}
+        hideErrorBar={hideErrorBar}
+        onKeyDownEventHandlers={onKeyDownEventHandlers}
+      />
+    );
+  },
+);

package/src/components/QueryBuilderMilestoneEditor.tsx

@@ -0,0 +1,291 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import {
+  type QueryBuilderParameterDragSource,
+  QUERY_BUILDER_PARAMETER_TREE_DND_TYPE,
+} from '../stores/QueryParametersState.js';
+import { useCallback } from 'react';
+import {
+  type ValueSpecification,
+  GenericType,
+  GenericTypeExplicitReference,
+  MILESTONING_STEREOTYPE,
+  observe_PrimitiveInstanceValue,
+  PrimitiveInstanceValue,
+  PRIMITIVE_TYPE,
+  TYPICAL_MULTIPLICITY_TYPE,
+} from '@finos/legend-graph';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { type DropTargetMonitor, useDrop } from 'react-dnd';
+import { VariableExpressionViewer } from './QueryBuilderParameterPanel.js';
+import { Dialog } from '@finos/legend-art';
+import { generateDefaultValueForPrimitiveType } from '../stores/QueryBuilderValueSpecificationBuilderHelper.js';
+import { BasicValueSpecificationEditor } from '@finos/legend-application';
+
+const MilestoningParameterEditor = observer(
+  (props: {
+    queryBuilderState: QueryBuilderState;
+    stereotype: MILESTONING_STEREOTYPE;
+  }) => {
+    const { queryBuilderState, stereotype } = props;
+    const handleDrop = useCallback(
+      (item: QueryBuilderParameterDragSource): void => {
+        if (stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL) {
+          queryBuilderState.querySetupState.setBusinessDate(
+            item.variable.parameter,
+          );
+        } else {
+          queryBuilderState.querySetupState.setProcessingDate(
+            item.variable.parameter,
+          );
+        }
+      },
+      [queryBuilderState, stereotype],
+    );
+    const [{ isMilestoningParameterValueDragOver }, dropConnector] = useDrop(
+      () => ({
+        accept: [QUERY_BUILDER_PARAMETER_TREE_DND_TYPE.VARIABLE],
+        drop: (
+          item: QueryBuilderParameterDragSource,
+          monitor: DropTargetMonitor,
+        ): void => {
+          if (!monitor.didDrop()) {
+            handleDrop(item);
+          }
+        },
+        collect: (
+          monitor,
+        ): { isMilestoningParameterValueDragOver: boolean } => ({
+          isMilestoningParameterValueDragOver: monitor.isOver({
+            shallow: true,
+          }),
+        }),
+      }),
+      [handleDrop],
+    );
+    let milestoningParameter;
+    if (stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL) {
+      milestoningParameter = guaranteeNonNullable(
+        queryBuilderState.querySetupState.businessDate,
+      );
+    } else {
+      milestoningParameter = guaranteeNonNullable(
+        queryBuilderState.querySetupState.processingDate,
+      );
+    }
+    const resetMilestoningParameter = (): void => {
+      const parameter = observe_PrimitiveInstanceValue(
+        new PrimitiveInstanceValue(
+          GenericTypeExplicitReference.create(
+            new GenericType(
+              queryBuilderState.graphManagerState.graph.getPrimitiveType(
+                PRIMITIVE_TYPE.STRICTDATE,
+              ),
+            ),
+          ),
+          queryBuilderState.graphManagerState.graph.getTypicalMultiplicity(
+            TYPICAL_MULTIPLICITY_TYPE.ONE,
+          ),
+        ),
+        queryBuilderState.observableContext,
+      );
+      parameter.values = [
+        generateDefaultValueForPrimitiveType(PRIMITIVE_TYPE.STRICTDATE),
+      ];
+      if (stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL) {
+        queryBuilderState.querySetupState.setBusinessDate(parameter);
+      } else {
+        queryBuilderState.querySetupState.setProcessingDate(parameter);
+      }
+    };
+    return (
+      <div
+        ref={dropConnector}
+        className="query-builder__parameter-editor dnd__overlay__container"
+      >
+        {isMilestoningParameterValueDragOver && (
+          <div className="query-builder__parameter-editor__node__dnd__overlay">
+            Change Milestoning Parameter Value
+          </div>
+        )}
+        <BasicValueSpecificationEditor
+          valueSpecification={milestoningParameter}
+          graph={queryBuilderState.graphManagerState.graph}
+          setValueSpecification={(val: ValueSpecification): void =>
+            stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL
+              ? queryBuilderState.querySetupState.setBusinessDate(val)
+              : queryBuilderState.querySetupState.setProcessingDate(val)
+          }
+          typeCheckOption={{
+            expectedType:
+              queryBuilderState.graphManagerState.graph.getPrimitiveType(
+                PRIMITIVE_TYPE.DATE,
+              ),
+          }}
+          resetValue={resetMilestoningParameter}
+        />
+      </div>
+    );
+  },
+);
+
+const BiTemporalMilestoneEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    return (
+      <>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Processing Date
+          </div>
+          <MilestoningParameterEditor
+            queryBuilderState={queryBuilderState}
+            stereotype={MILESTONING_STEREOTYPE.PROCESSING_TEMPORAL}
+          />
+        </div>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Business Date
+          </div>
+          <MilestoningParameterEditor
+            queryBuilderState={queryBuilderState}
+            stereotype={MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL}
+          />
+        </div>
+      </>
+    );
+  },
+);
+
+const BusinessTemporalMilestoneEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    return (
+      <div className="panel__content__form__section">
+        <div className="panel__content__form__section__header__label">
+          Business Date
+        </div>
+        <MilestoningParameterEditor
+          key="BusinessDate"
+          queryBuilderState={queryBuilderState}
+          stereotype={MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL}
+        />
+      </div>
+    );
+  },
+);
+
+const ProcessingTemporalMilestoneEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    return (
+      <div className="panel__content__form__section">
+        <div className="panel__content__form__section__header__label">
+          Processing Date
+        </div>
+        <MilestoningParameterEditor
+          key="BusinessDate"
+          queryBuilderState={queryBuilderState}
+          stereotype={MILESTONING_STEREOTYPE.PROCESSING_TEMPORAL}
+        />
+      </div>
+    );
+  },
+);
+
+const TemporalMilestoneEditor: React.FC<{
+  queryBuilderState: QueryBuilderState;
+}> = (props) => {
+  const { queryBuilderState } = props;
+
+  if (
+    queryBuilderState.querySetupState.processingDate &&
+    queryBuilderState.querySetupState.businessDate
+  ) {
+    return <BiTemporalMilestoneEditor queryBuilderState={queryBuilderState} />;
+  } else if (queryBuilderState.querySetupState.businessDate) {
+    return (
+      <BusinessTemporalMilestoneEditor queryBuilderState={queryBuilderState} />
+    );
+  } else if (queryBuilderState.querySetupState.processingDate) {
+    return (
+      <ProcessingTemporalMilestoneEditor
+        queryBuilderState={queryBuilderState}
+      />
+    );
+  } else {
+    return null;
+  }
+};
+
+export const MilestoningParametersEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState; close: () => void }) => {
+    const { queryBuilderState, close } = props;
+
+    return (
+      <Dialog
+        open={true}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <div className="modal modal--dark editor-modal query-builder__parameters__modal">
+          <div className="modal__header">
+            <div className="modal__title">Milestoning Parameters</div>
+          </div>
+          <div className="modal__body query-builder__parameters__modal__body">
+            <TemporalMilestoneEditor queryBuilderState={queryBuilderState} />
+            <div className="panel__content__form__section__header__label">
+              List of compatible milestoning parameters
+            </div>
+            <div className="panel__content__form__section__list__items">
+              {queryBuilderState.queryParametersState.parameterStates
+                .filter(
+                  (parameter) =>
+                    parameter.parameter.genericType?.value.rawType.name ===
+                      PRIMITIVE_TYPE.STRICTDATE ||
+                    parameter.parameter.genericType?.value.rawType.name ===
+                      PRIMITIVE_TYPE.LATESTDATE ||
+                    parameter.parameter.genericType?.value.rawType.name ===
+                      PRIMITIVE_TYPE.DATE ||
+                    parameter.parameter.genericType?.value.rawType.name ===
+                      PRIMITIVE_TYPE.DATETIME,
+                )
+                .map((parameter) => (
+                  <VariableExpressionViewer
+                    key={parameter.uuid}
+                    queryBuilderState={queryBuilderState}
+                    variableExpressionState={parameter}
+                  />
+                ))}
+            </div>
+          </div>
+          <div className="modal__footer">
+            <button className="btn modal__footer__close-btn" onClick={close}>
+              Close
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);