@finos/legend-query-builder 4.13.9 → 4.13.11

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -17,12 +17,99 @@
 import { type TooltipPlacement, Tooltip } from '@finos/legend-art';
 import {
   type AbstractProperty,
+  type Type,
+  type TaggedValue,
   DerivedProperty,
   getMultiplicityDescription,
   CORE_PURE_PATH,
   PURE_DOC_TAG,
-  type Type,
 } from '@finos/legend-graph';
+import { useState } from 'react';
+
+export const QueryBuilderTaggedValueInfoTooltip: React.FC<{
+  taggedValues: TaggedValue[];
+}> = (props) => {
+  const { taggedValues } = props;
+  const [showMore, setShowMore] = useState(false);
+  const toggleShowMoreButton: React.MouseEventHandler = (event) => {
+    event.stopPropagation();
+    setShowMore(!showMore);
+  };
+  const isDocTaggedValue = (val: TaggedValue): boolean =>
+    val.tag.ownerReference.value.path === CORE_PURE_PATH.PROFILE_DOC &&
+    val.tag.value.value === PURE_DOC_TAG;
+  const documentation = taggedValues
+    .filter((taggedValue) => isDocTaggedValue(taggedValue))
+    .map((taggedValue) => taggedValue.value);
+  const tagValuesExceptDoc = taggedValues.filter(
+    (taggedValue) => !isDocTaggedValue(taggedValue),
+  );
+
+  const taggedValueCellRender = (taggedValue: TaggedValue): React.ReactNode => (
+    <div
+      className="query-builder__tooltip__item"
+      key={`${taggedValue.tag.ownerReference.value.name}.${taggedValue.value}`}
+    >
+      <div className="query-builder__tooltip__item__label">
+        {`${taggedValue.tag.ownerReference.value.name}.${taggedValue.tag.value.value}`}
+      </div>
+      <div className="query-builder__tooltip__item__value">
+        {taggedValue.value}
+      </div>
+    </div>
+  );
+
+  return (
+    <div>
+      {tagValuesExceptDoc.length > 0 ? (
+        <div className="query-builder__tooltip__item">
+          <div className="query-builder__tooltip__item__label">
+            Tagged Values
+          </div>
+          <div className="query-builder__tooltip__taggedValues">
+            {taggedValues.slice(0, 1).map((taggedValue) => (
+              <div
+                className="query-builder__tooltip__combo"
+                key={`${taggedValue.tag.ownerReference.value.name}.${taggedValue.value}`}
+              >
+                {taggedValueCellRender(taggedValue)}
+                {taggedValues.length > 3 && (
+                  <button
+                    className="btn btn--dark query-builder__tooltip__taggedValues__show-btn"
+                    onClick={toggleShowMoreButton}
+                    title="Toggle button to show more/less"
+                  >
+                    {showMore ? 'Show Less' : 'Show More'}
+                  </button>
+                )}
+              </div>
+            ))}
+            {taggedValues
+              .slice(1, 3)
+              .map((taggedValue) => taggedValueCellRender(taggedValue))}
+            {showMore &&
+              taggedValues
+                .slice(3)
+                .map((taggedValue) => taggedValueCellRender(taggedValue))}
+          </div>
+        </div>
+      ) : (
+        <>
+          {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>
+  );
+};
 
 export const QueryBuilderPropertyInfoTooltip: React.FC<{
   property: AbstractProperty;
@@ -33,14 +120,6 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
   type?: Type | undefined;
 }> = (props) => {
   const { property, path, isMapped, children, placement, type } = props;
-  const documentation = property.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
@@ -91,17 +170,9 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
               {isMapped ? 'Yes' : 'No'}
             </div>
           </div>
-
-          {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>
-          )}
+          <QueryBuilderTaggedValueInfoTooltip
+            taggedValues={property.taggedValues}
+          />
         </div>
       }
     >

package/src/components/shared/QueryBuilderRootClassInfoTooltip.tsx

@@ -15,7 +15,8 @@
  */
 
 import { type TooltipPlacement, Tooltip } from '@finos/legend-art';
-import { CORE_PURE_PATH, PURE_DOC_TAG, type Class } from '@finos/legend-graph';
+import { type Class } from '@finos/legend-graph';
+import { QueryBuilderTaggedValueInfoTooltip } from './QueryBuilderPropertyInfoTooltip.js';
 
 export const QueryBuilderRootClassInfoTooltip: React.FC<{
   _class: Class;
@@ -23,14 +24,6 @@ export const QueryBuilderRootClassInfoTooltip: React.FC<{
   placement?: TooltipPlacement | undefined;
 }> = (props) => {
   const { _class, children, placement } = props;
-  const documentation = _class.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
@@ -59,17 +52,9 @@ export const QueryBuilderRootClassInfoTooltip: React.FC<{
               {_class.path}
             </div>
           </div>
-
-          {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>
-          )}
+          <QueryBuilderTaggedValueInfoTooltip
+            taggedValues={_class.taggedValues}
+          />
         </div>
       }
     >

package/src/graph/QueryBuilderMetaModelConst.ts

@@ -83,9 +83,11 @@ export enum QUERY_BUILDER_SUPPORTED_FUNCTIONS {
   TODAY = 'meta::pure::functions::date::today',
   NOW = 'meta::pure::functions::date::now',
   FIRST_DAY_OF_WEEK = 'meta::pure::functions::date::firstDayOfThisWeek',
-  FIRST_DAY_OF_MONTH = 'meta::pure::functions::date::firstDayOfThisMonth',
+  FIRST_DAY_OF_THIS_MONTH = 'meta::pure::functions::date::firstDayOfThisMonth',
+  FIRST_DAY_OF_MONTH = 'meta::pure::functions::date::firstDayOfMonth',
   FIRST_DAY_OF_QUARTER = 'meta::pure::functions::date::firstDayOfThisQuarter',
-  FIRST_DAY_OF_YEAR = 'meta::pure::functions::date::firstDayOfThisYear',
+  FIRST_DAY_OF_THIS_YEAR = 'meta::pure::functions::date::firstDayOfThisYear',
+  FIRST_DAY_OF_YEAR = 'meta::pure::functions::date::firstDayOfYear',
   PREVIOUS_DAY_OF_WEEK = 'meta::pure::functions::date::previousDayOfWeek',
   IS_ON_DAY = 'meta::pure::functions::date::isOnDay',
   IS_ON_OR_AFTER_DAY = 'meta::pure::functions::date::isOnOrAfterDay',

package/src/graph-manager/protocol/pure/QueryBuilder_PureProtocolProcessorPlugin.ts

@@ -217,7 +217,9 @@ export class QueryBuilder_PureProtocolProcessorPlugin extends PureProtocolProces
           return expression;
         } else if (
           matchFunctionName(functionName, [
+            QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_YEAR,
             QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_YEAR,
+            QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_MONTH,
             QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_MONTH,
             QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_WEEK,
             QUERY_BUILDER_SUPPORTED_FUNCTIONS.PREVIOUS_DAY_OF_WEEK,

package/src/stores/QueryBuilderStateBuilder.ts

@@ -26,25 +26,25 @@ import {
 } from '@finos/legend-shared';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 import {
+  type AbstractPropertyExpression,
   type EnumValueInstanceValue,
   type FunctionExpression,
   type GraphFetchTreeInstanceValue,
   type ValueSpecificationVisitor,
-  InstanceValue,
-  INTERNAL__UnknownValueSpecification,
   type LambdaFunction,
   type KeyExpressionInstanceValue,
-  matchFunctionName,
-  Class,
+  type INTERNAL__PropagatedValue,
+  type ValueSpecification,
   type CollectionInstanceValue,
   type LambdaFunctionInstanceValue,
+  InstanceValue,
+  INTERNAL__UnknownValueSpecification,
+  matchFunctionName,
+  Class,
   PrimitiveInstanceValue,
   SimpleFunctionExpression,
   VariableExpression,
-  type AbstractPropertyExpression,
   getMilestoneTemporalStereotype,
-  type INTERNAL__PropagatedValue,
-  type ValueSpecification,
   SUPPORTED_FUNCTIONS,
   isSuperType,
   PackageableElementReference,
@@ -206,6 +206,33 @@ const processGetAllVersionsInRangeExpression = (
   );
 };
 
+// a recursive function to check if there are some date functions
+// unsupported in the custom date picker dropdown.
+// For now, it's just QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_YEAR and QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_MONTH.
+export const isUsedDateFunctionSupportedInFormMode = (
+  valueSpec: ValueSpecification,
+): boolean => {
+  if (valueSpec instanceof SimpleFunctionExpression) {
+    if (
+      matchFunctionName(
+        valueSpec.functionName,
+        QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_YEAR,
+      ) ||
+      matchFunctionName(
+        valueSpec.functionName,
+        QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_MONTH,
+      )
+    ) {
+      return false;
+    }
+    return !valueSpec.parametersValues
+      .map((value) => isUsedDateFunctionSupportedInFormMode(value))
+      .includes(false);
+  } else {
+    return true;
+  }
+};
+
 const processLetExpression = (
   expression: SimpleFunctionExpression,
   queryBuilderState: QueryBuilderState,
@@ -239,11 +266,26 @@ const processLetExpression = (
       rightSide.content,
     );
   } else {
-    constantExpression = new QueryBuilderSimpleConstantExpressionState(
-      queryBuilderState,
-      varExp,
-      rightSide,
-    );
+    // Even if a valueSpecification is successfully built, it might contain some date functions
+    // unsupported in the custom date picker dropdown, e.g., QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_YEAR
+    // or QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_MONTH.
+    // If it doesn't contain any unsupported date functions, a QueryBuilderSimpleConstantExpressionState should be created.
+    // Otherwise, a QueryBuilderCalculatedConstantExpressionState should be created.
+    if (isUsedDateFunctionSupportedInFormMode(rightSide)) {
+      constantExpression = new QueryBuilderSimpleConstantExpressionState(
+        queryBuilderState,
+        varExp,
+        rightSide,
+      );
+    } else {
+      constantExpression = new QueryBuilderCalculatedConstantExpressionState(
+        queryBuilderState,
+        varExp,
+        queryBuilderState.graphManagerState.graphManager.serializeValueSpecification(
+          rightSide,
+        ),
+      );
+    }
   }
   queryBuilderState.constantState.setShowConstantPanel(true);
   queryBuilderState.constantState.addConstant(constantExpression);