@finos/legend-query-builder 0.3.1 → 0.4.0

package/src/components/explorer/QueryBuilderMilestoningEditor.tsx

@@ -34,7 +34,15 @@ import {
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useDrop } from 'react-dnd';
 import { VariableExpressionViewer } from '../QueryBuilderParametersPanel.js';
-import { Dialog, PanelEntryDropZonePlaceholder } from '@finos/legend-art';
+import {
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  PanelEntryDropZonePlaceholder,
+  PanelFormSection,
+} from '@finos/legend-art';
 import { generateDefaultValueForPrimitiveType } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
 import { instanceValue_setValues } from '../../stores/shared/ValueSpecificationModifierHelper.js';
@@ -152,7 +160,7 @@ const BiTemporalMilestoningEditor = observer(
     const { queryBuilderState } = props;
     return (
       <>
-        <div className="panel__content__form__section">
+        <PanelFormSection>
           <div className="panel__content__form__section__header__label">
             Processing Date
           </div>
@@ -160,8 +168,8 @@ const BiTemporalMilestoningEditor = observer(
             queryBuilderState={queryBuilderState}
             stereotype={MILESTONING_STEREOTYPE.PROCESSING_TEMPORAL}
           />
-        </div>
-        <div className="panel__content__form__section">
+        </PanelFormSection>
+        <PanelFormSection>
           <div className="panel__content__form__section__header__label">
             Business Date
           </div>
@@ -169,7 +177,7 @@ const BiTemporalMilestoningEditor = observer(
             queryBuilderState={queryBuilderState}
             stereotype={MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL}
           />
-        </div>
+        </PanelFormSection>
       </>
     );
   },
@@ -179,7 +187,7 @@ const BusinessTemporalMilestoningEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     return (
-      <div className="panel__content__form__section">
+      <PanelFormSection>
         <div className="panel__content__form__section__header__label">
           Business Date
         </div>
@@ -188,7 +196,7 @@ const BusinessTemporalMilestoningEditor = observer(
           queryBuilderState={queryBuilderState}
           stereotype={MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL}
         />
-      </div>
+      </PanelFormSection>
     );
   },
 );
@@ -197,7 +205,7 @@ const ProcessingTemporalMilestoningEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     return (
-      <div className="panel__content__form__section">
+      <PanelFormSection>
         <div className="panel__content__form__section__header__label">
           Processing Date
         </div>
@@ -206,7 +214,7 @@ const ProcessingTemporalMilestoningEditor = observer(
           queryBuilderState={queryBuilderState}
           stereotype={MILESTONING_STEREOTYPE.PROCESSING_TEMPORAL}
         />
-      </div>
+      </PanelFormSection>
     );
   },
 );
@@ -256,11 +264,12 @@ export const MilestoningParametersEditor = observer(
           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">
+        <Modal
+          darkMode={true}
+          className="editor-modal query-builder__parameters__modal"
+        >
+          <ModalHeader title="Milestoning Parameters" />
+          <ModalBody className="query-builder__parameters__modal__body">
             <TemporalMilestoningEditor queryBuilderState={queryBuilderState} />
             <div className="panel__content__form__section__header__label">
               List of compatible milestoning parameters
@@ -288,13 +297,13 @@ export const MilestoningParametersEditor = observer(
                   />
                 ))}
             </div>
-          </div>
-          <div className="modal__footer">
+          </ModalBody>
+          <ModalFooter>
             <button className="btn modal__footer__close-btn" onClick={close}>
               Close
             </button>
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },

package/src/components/fetch-structure/QueryBuilderOlapGroupByPanel.tsx

@@ -38,6 +38,10 @@ import {
   WindowIcon,
   BasePopover,
   EditIcon,
+  ModalHeader,
+  Modal,
+  ModalFooter,
+  PanelFormSection,
 } from '@finos/legend-art';
 import { assertErrorThrown, guaranteeNonNullable } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -260,16 +264,16 @@ const QueryBuilderOlapColumnModalEditor = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div className="modal modal--dark query-builder__olap__modal">
-          <div className="modal__header">
-            <div className="modal__title">
-              {createNewOlap
+        <Modal darkMode={true} className="query-builder__olap__modal">
+          <ModalHeader
+            title={
+              createNewOlap
                 ? 'Create OLAP GroupBy Column'
-                : 'Update OLAP GroupByColumn'}
-            </div>
-          </div>
+                : 'Update OLAP GroupByColumn'
+            }
+          />
           <div className="query-builder__olap__modal__body">
-            <div className="panel__content__form__section">
+            <PanelFormSection>
               <div className="panel__content__form__section__header__label">
                 OLAP Column Name
               </div>
@@ -285,8 +289,8 @@ const QueryBuilderOlapColumnModalEditor = observer(
                   isDuplicatedColumnName ? 'Duplicated column' : undefined
                 }
               />
-            </div>
-            <div className="panel__content__form__section">
+            </PanelFormSection>
+            <PanelFormSection>
               <div className="panel__content__form__section__header__label">
                 OLAP Operator
               </div>
@@ -371,8 +375,8 @@ const QueryBuilderOlapColumnModalEditor = observer(
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="panel__content__form__section">
+            </PanelFormSection>
+            <PanelFormSection>
               <div className="panel__content__form__section__header__label">
                 Window Columns
               </div>
@@ -407,8 +411,8 @@ const QueryBuilderOlapColumnModalEditor = observer(
                   </button>
                 </div>
               </div>
-            </div>
-            <div className="panel__content__form__section">
+            </PanelFormSection>
+            <PanelFormSection>
               <div className="panel__content__form__section__header__label">
                 Sort By
               </div>
@@ -497,9 +501,9 @@ const QueryBuilderOlapColumnModalEditor = observer(
                   </DropdownMenu>
                 </div>
               </div>
-            </div>
+            </PanelFormSection>
           </div>
-          <div className="modal__footer">
+          <ModalFooter>
             {createNewOlap ? (
               <button className="btn modal__footer__close-btn" onClick={create}>
                 Create
@@ -509,8 +513,8 @@ const QueryBuilderOlapColumnModalEditor = observer(
                 Close
               </button>
             )}
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },

package/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx

@@ -24,6 +24,10 @@ import {
   SortDownAltIcon,
   SquareIcon,
   TimesIcon,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
 } from '@finos/legend-art';
 import {
   COLUMN_SORT_TYPE,
@@ -192,11 +196,9 @@ export const QueryResultModifierModal = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div className="modal modal--dark editor-modal">
-          <div className="modal__header">
-            <div className="modal__title">Result Set Modifier</div>
-          </div>
-          <div className="modal__body query-builder__projection__modal__body">
+        <Modal darkMode={true} className="editor-modal">
+          <ModalHeader title="Result Set Modifier" />
+          <ModalBody className="query-builder__projection__modal__body">
             <div className="query-builder__projection__options">
               <ColumnsSortEditor tdsState={tdsState} />
               <div className="panel__content__form__section">
@@ -241,13 +243,13 @@ export const QueryResultModifierModal = observer(
                 />
               </div>
             </div>
-          </div>
-          <div className="modal__footer">
+          </ModalBody>
+          <ModalFooter>
             <button className="btn modal__footer__close-btn" onClick={close}>
               Close
             </button>
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },

package/src/components/shared/LambdaEditor.tsx

@@ -30,6 +30,11 @@ import {
   useResizeDetector,
   clearMarkers,
   setErrorMarkers,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
 } from '@finos/legend-art';
 import type { LambdaEditorState } from '../../stores/shared/LambdaEditorState.js';
 import {
@@ -589,25 +594,23 @@ const LambdaEditorPopUp = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div
-          className={clsx(
-            'modal modal--dark editor-modal lambda-editor__popup__modal',
-            {
-              'lambda-editor__popup__modal--has-error': Boolean(
-                lambdaEditorState.parserError,
-              ),
-            },
-          )}
+        <Modal
+          darkMode={true}
+          className={clsx('editor-modal lambda-editor__popup__modal', {
+            'lambda-editor__popup__modal--has-error': Boolean(
+              lambdaEditorState.parserError,
+            ),
+          })}
         >
-          <div className="modal__header">
-            <div className="modal__title">Edit Lambda</div>
+          <ModalHeader>
+            <ModalTitle title="Edit Lambda" />
             {lambdaEditorState.parserError && (
               <div className="modal__title__error-badge">
                 Failed to parse lambda
               </div>
             )}
-          </div>
-          <div className="modal__body">
+          </ModalHeader>
+          <ModalBody>
             <div className={clsx('lambda-editor__popup__content', className)}>
               <div
                 ref={ref}
@@ -617,8 +620,8 @@ const LambdaEditorPopUp = observer(
                 <div className="text-editor__body" ref={textInputRef} />
               </div>
             </div>
-          </div>
-          <div className="modal__footer">
+          </ModalBody>
+          <ModalFooter>
             <button
               className="btn btn--dark btn--caution"
               onClick={discardChanges}
@@ -632,8 +635,8 @@ const LambdaEditorPopUp = observer(
             >
               Close
             </button>
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },

package/src/components/shared/LambdaParameterValuesEditor.tsx

@@ -15,7 +15,13 @@
  */
 
 import { useApplicationStore } from '@finos/legend-application';
-import { Dialog } from '@finos/legend-art';
+import {
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from '@finos/legend-art';
 import {
   type PureModel,
   type ValueSpecification,
@@ -55,11 +61,12 @@ export const LambdaParameterValuesEditor = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <div className="modal modal--dark editor-modal lambda-parameter-values__modal">
-          <div className="modal__header">
-            <div className="modal__title">Set Parameter Values</div>
-          </div>
-          <div className="modal__body lambda-parameter-values__modal__body">
+        <Modal
+          darkMode={true}
+          className="editor-modal lambda-parameter-values__modal"
+        >
+          <ModalHeader title="Set Parameter Values" />
+          <ModalBody className="lambda-parameter-values__modal__body">
             {lambdaParametersState.parameterStates.map((paramState) => {
               const stringType = graph.getPrimitiveType(PRIMITIVE_TYPE.STRING);
               const variableType = paramState.variableType ?? stringType;
@@ -99,8 +106,8 @@ export const LambdaParameterValuesEditor = observer(
                 </div>
               );
             })}
-          </div>
-          <div className="modal__footer">
+          </ModalBody>
+          <ModalFooter>
             {submitAction && (
               <button
                 className="btn modal__footer__close-btn"
@@ -113,8 +120,8 @@ export const LambdaParameterValuesEditor = observer(
             <button className="btn modal__footer__close-btn" onClick={close}>
               Close
             </button>
-          </div>
-        </div>
+          </ModalFooter>
+        </Modal>
       </Dialog>
     );
   },

package/src/components/watermark/QueryBuilderWatermark.tsx

@@ -0,0 +1,185 @@
+/**
+ * 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 {
+  Dialog,
+  PanelDropZone,
+  PanelFormBooleanField,
+  PanelForm,
+  PanelDivider,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  PanelFormListItems,
+  PanelFormSection,
+} from '@finos/legend-art';
+import { PRIMITIVE_TYPE, type ValueSpecification } from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import { useCallback } from 'react';
+import { useDrop } from 'react-dnd';
+import {
+  type QueryBuilderParameterDragSource,
+  QUERY_BUILDER_PARAMETER_DND_TYPE,
+} from '../../stores/QueryBuilderParametersState.js';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
+import type { QueryBuilderWatermarkState } from '../../stores/watermark/QueryBuilderWatermarkState.js';
+import { VariableExpressionViewer } from '../QueryBuilderParametersPanel.js';
+import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
+
+const WatermarkValueEditor = observer(
+  (props: {
+    watermarkValue: ValueSpecification;
+    watermarkState: QueryBuilderWatermarkState;
+  }) => {
+    const { watermarkValue, watermarkState } = props;
+
+    const graph = watermarkState.queryBuilderState.graphManagerState.graph;
+
+    const handleDrop = useCallback(
+      (item: QueryBuilderParameterDragSource): void => {
+        watermarkState.setValue(item.variable.parameter);
+      },
+      [watermarkState],
+    );
+
+    const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
+      QueryBuilderParameterDragSource,
+      void,
+      { isParameterValueDragOver: boolean }
+    >(
+      () => ({
+        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        drop: (item, monitor): void => {
+          if (
+            !monitor.didDrop() &&
+            // Only allows parameters with muliplicity 1 and type string
+            watermarkState.isParamaterCompatibleWithWaterMark(
+              item.variable.parameter,
+            )
+          ) {
+            handleDrop(item);
+          } // prevent drop event propagation to accomondate for nested DnD
+        },
+        collect: (monitor) => ({
+          isParameterValueDragOver: monitor.isOver({
+            shallow: true,
+          }),
+        }),
+      }),
+      [handleDrop],
+    );
+
+    return (
+      <PanelFormSection>
+        <div className="query-builder__parameter-editor">
+          <PanelDropZone
+            isDragOver={isParameterValueDragOver}
+            dropTargetConnector={dropTargetConnector}
+          >
+            <BasicValueSpecificationEditor
+              valueSpecification={watermarkValue}
+              setValueSpecification={(val: ValueSpecification): void => {
+                watermarkState.setValue(val);
+              }}
+              graph={graph}
+              obseverContext={
+                watermarkState.queryBuilderState.observableContext
+              }
+              typeCheckOption={{
+                expectedType: graph.getPrimitiveType(PRIMITIVE_TYPE.STRING),
+              }}
+              resetValue={(): void => {
+                watermarkState.resetValue();
+              }}
+            />
+          </PanelDropZone>
+        </div>
+      </PanelFormSection>
+    );
+  },
+);
+
+export const QueryBuilderWatermarkEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const watermarkState = queryBuilderState.watermarkState;
+    const handleClose = (): void => {
+      watermarkState.setIsEditingWatermark(false);
+    };
+    const compatibleParameters =
+      queryBuilderState.parametersState.parameterStates.filter((p) =>
+        watermarkState.isParamaterCompatibleWithWaterMark(p.parameter),
+      );
+
+    return (
+      <Dialog
+        open={Boolean(watermarkState.isEditingWatermark)}
+        onClose={handleClose}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal darkMode={true} className="editor-modal">
+          <ModalHeader title="Watermark" />
+          <ModalBody>
+            <PanelForm>
+              <PanelFormBooleanField
+                isReadOnly={false}
+                value={watermarkState.value !== undefined}
+                prompt="Enable watermark"
+                update={(): void => watermarkState.enableWatermark()}
+              />
+              {watermarkState.value && (
+                <>
+                  <WatermarkValueEditor
+                    watermarkState={watermarkState}
+                    watermarkValue={watermarkState.value}
+                  />
+                  <PanelDivider />
+                  <PanelFormListItems title="List of available parameters">
+                    {compatibleParameters.length === 0 && (
+                      <> No available parameters </>
+                    )}
+                    {compatibleParameters.map((parameter) => (
+                      <VariableExpressionViewer
+                        key={parameter.uuid}
+                        queryBuilderState={queryBuilderState}
+                        variableExpressionState={parameter}
+                        isReadOnly={true}
+                        hideActions={true}
+                      />
+                    ))}
+                  </PanelFormListItems>
+                </>
+              )}
+            </PanelForm>
+          </ModalBody>
+          <ModalFooter>
+            <button
+              className="btn modal__footer__close-btn"
+              onClick={handleClose}
+            >
+              Done
+            </button>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/graphManager/QueryBuilderHashUtils.ts

@@ -61,6 +61,9 @@ export enum QUERY_BUILDER_HASH_STRUCTURE {
   POST_FILTER_OPERATOR_NOT_START_WITH = 'POST_FILTER_OPERATOR_NOT_START_WITH',
   POST_FILTER_STATE = 'POST_FILTER_STATE',
 
+  // watermark state
+  WATERMARK_STATE = 'WATERMARK_STATE',
+
   // OLAPGroup state
   OLAP_GROUPBY_STATE = 'OLAP_GROUPBY_STATE',
   OLAP_GROUPBY_OPERATION_STATE = 'OLAP_GROUPBY_OPERATION_STATE',

package/src/graphManager/QueryBuilderSupportedFunctions.ts

@@ -65,6 +65,8 @@ export enum QUERY_BUILDER_SUPPORTED_FUNCTIONS {
   STD_DEV_SAMPLE = 'meta::pure::functions::math::stdDevSample',
   SUM = 'meta::pure::functions::math::sum',
   UNIQUE_VALUE_ONLY = 'meta::pure::functions::collection::uniqueValueOnly',
+  // watermark
+  WATERMARK = 'meta::datalake::functions::forWatermark',
   // OLAP
   OLAP_GROUPBY = 'meta::pure::tds::olapGroupBy',
   OLAP_RANK = 'meta::pure::functions::math::olap::rank',

package/src/graphManager/protocol/pure/QueryBuilder_PureProtocolProcessorPlugin.ts

@@ -23,6 +23,7 @@ import {
   V1_buildOlapGroupByFunctionExpression,
   V1_buildProjectFunctionExpression,
   V1_buildSubTypePropertyExpressionTypeInference,
+  V1_buildWatermarkFunctionExpression,
 } from './v1/V1_QueryValueSpecificationBuilderHelper.js';
 import {
   type V1_GraphBuilderContext,
@@ -96,6 +97,19 @@ export class QueryBuilder_PureProtocolProcessorPlugin extends PureProtocolProces
             compileContext,
             processingContext,
           );
+        } else if (
+          matchFunctionName(
+            functionName,
+            QUERY_BUILDER_SUPPORTED_FUNCTIONS.WATERMARK,
+          )
+        ) {
+          return V1_buildWatermarkFunctionExpression(
+            functionName,
+            parameters,
+            openVariables,
+            compileContext,
+            processingContext,
+          );
         } else if (
           matchFunctionName(
             functionName,