@finos/legend-application-data-cube 0.3.14 → 0.3.16

package/src/components/builder/LegendDataCubeSourceViewer.tsx

@@ -16,7 +16,10 @@
 
 import { observer } from 'mobx-react-lite';
 import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
-import { LegendQueryDataCubeSource } from '../../stores/model/LegendQueryDataCubeSource.js';
+import {
+  LegendQueryDataCubeSource,
+  RawLegendQueryDataCubeSource,
+} from '../../stores/model/LegendQueryDataCubeSource.js';
 import { useLegendDataCubeApplicationStore } from '../LegendDataCubeFrameworkProvider.js';
 import {
   EXTERNAL_APPLICATION_NAVIGATION__generateQueryViewUrl,
@@ -24,20 +27,437 @@ import {
   EXTERNAL_APPLICATION_NAVIGATION__generateStudioViewUrl,
 } from '../../__lib__/LegendDataCubeNavigation.js';
 import { DataCubeIcon } from '@finos/legend-art';
-import { UserDefinedFunctionDataCubeSource } from '@finos/legend-data-cube';
-import { useCallback, useEffect, useState } from 'react';
+import {
+  _defaultPrimitiveTypeValue,
+  _elementPtr,
+  _primitiveValue,
+  _property,
+  AlertType,
+  FormAlert,
+  FormButton,
+  isPrimitiveType,
+  UserDefinedFunctionDataCubeSource,
+} from '@finos/legend-data-cube';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   type DepotServerClient,
   DepotScope,
   StoreProjectData,
 } from '@finos/legend-server-depot';
-import { returnUndefOnError } from '@finos/legend-shared';
 import {
+  deepClone,
+  guaranteeIsString,
+  guaranteeNonNullable,
+  guaranteeType,
+  isNonNullable,
+  returnUndefOnError,
+} from '@finos/legend-shared';
+import {
+  type LightQuery,
+  type PureProtocolProcessorPlugin,
+  type V1_Enumeration,
+  type V1_PureModelContext,
+  type V1_PureModelContextData,
+  type V1_Variable,
+  PRIMITIVE_TYPE,
+  V1_CORE_SYSTEM_MODELS,
   V1_deserializePureModelContext,
+  V1_deserializePureModelContextData,
   V1_LegendSDLC,
+  V1_observe_ValueSpecification,
+  V1_PackageableType,
   V1_PureModelContextPointer,
-  type V1_PureModelContext,
+  V1_serializeValueSpecification,
+  V1_ValueSpecification,
 } from '@finos/legend-graph';
+import {
+  isValidV1_ValueSpecification,
+  V1_BasicValueSpecificationEditor,
+} from '@finos/legend-query-builder';
+import { LegendDataCubeBuilderState } from '../../stores/builder/LegendDataCubeBuilderStore.js';
+import {
+  fetchV1Enumeration,
+  isVariableEnumerationType,
+} from '../../stores/builder/source/LegendQueryDataCubeSourceBuilderStateHelper.js';
+
+const handleFetchEnumerations = async (
+  enumerationVariables: V1_Variable[],
+  query: LightQuery,
+  systemModel: V1_PureModelContextData,
+  depotServerClient: DepotServerClient,
+  plugins: PureProtocolProcessorPlugin[],
+  updateCallback: (val: { [name: string]: V1_Enumeration }) => void,
+) => {
+  await Promise.all(
+    enumerationVariables.map(async (variable) => {
+      const packageableType = guaranteeType(
+        variable.genericType?.rawType,
+        V1_PackageableType,
+        'Can only edit parameters with packageable type',
+      );
+      const enumeration = await fetchV1Enumeration(
+        packageableType.fullPath,
+        query,
+        systemModel,
+        depotServerClient,
+        plugins,
+      );
+      return { variable, enumeration };
+    }),
+  ).then((response) => {
+    const result = response.reduce(
+      (acc, { variable, enumeration }) => {
+        acc[variable.name] = enumeration;
+        return acc;
+      },
+      {} as { [name: string]: V1_Enumeration },
+    );
+    updateCallback(result);
+  });
+};
+
+const LegendQuerySourceViewer = observer(
+  (props: { source: LegendQueryDataCubeSource }) => {
+    const { source } = props;
+    const store = useLegendDataCubeBuilderStore();
+    const application = useLegendDataCubeApplicationStore();
+
+    const systemModel = useMemo(
+      () => V1_deserializePureModelContextData(V1_CORE_SYSTEM_MODELS),
+      [],
+    );
+    const [params, setParams] = useState<
+      { variable: V1_Variable; valueSpec: V1_ValueSpecification }[]
+    >(source.parameterValues.map(deepClone));
+    const [enumerations, setEnumerations] = useState<{
+      [name: string]: V1_Enumeration;
+    }>({});
+    const [isUpdatingParameters, setIsUpdatingParameters] = useState(false);
+
+    // If caching is enabled on the grid, we disable editing the query parameters.
+    // User will need to disable caching to be able to edit parameters.
+    const isCachingEnabled =
+      store.builder?.dataCube?.isCachingEnabled() ?? false;
+
+    const _handleFetchEnumerations = useCallback(async () => {
+      const enumerationVariables = source.parameterValues
+        .map((parameter) =>
+          source.lambda.parameters.find(
+            (_param) => parameter.variable.name === _param.name,
+          ),
+        )
+        .filter(isNonNullable)
+        .filter(isVariableEnumerationType);
+      await handleFetchEnumerations(
+        enumerationVariables,
+        source.info,
+        systemModel,
+        store.depotServerClient,
+        application.pluginManager.getPureProtocolProcessorPlugins(),
+        setEnumerations,
+      );
+    }, [
+      application.pluginManager,
+      source,
+      store.depotServerClient,
+      systemModel,
+    ]);
+
+    useEffect(() => {
+      // eslint-disable-next-line no-void
+      void void _handleFetchEnumerations();
+    }, [_handleFetchEnumerations]);
+
+    const updateParameterValue = (
+      name: string,
+      valueSpec: V1_ValueSpecification,
+    ): void => {
+      setParams(
+        params.map((param) => {
+          if (param.variable.name === name) {
+            param.valueSpec = valueSpec;
+          }
+          return param;
+        }),
+      );
+    };
+
+    const updateBuilderWithNewSpecification = async () => {
+      // Verify that all params are valid
+      if (
+        params.some(
+          (param) =>
+            !isValidV1_ValueSpecification(
+              param.valueSpec,
+              param.variable.multiplicity,
+            ),
+        )
+      ) {
+        return;
+      }
+
+      setIsUpdatingParameters(true);
+
+      try {
+        // Create the new raw source with new parameter values
+        const newRawSource = new RawLegendQueryDataCubeSource();
+        newRawSource.queryId = source.info.id;
+        newRawSource.parameterValues = params.map((param) => {
+          const parameterVariable = source.lambda.parameters.find(
+            (_param) => _param.name === param.variable.name,
+          );
+          return [
+            JSON.stringify(
+              V1_serializeValueSpecification(
+                guaranteeNonNullable(parameterVariable),
+                application.pluginManager.getPureProtocolProcessorPlugins(),
+              ),
+            ),
+            JSON.stringify(
+              V1_serializeValueSpecification(
+                guaranteeType(param.valueSpec, V1_ValueSpecification),
+                application.pluginManager.getPureProtocolProcessorPlugins(),
+              ),
+            ),
+          ];
+        });
+        const newRawSourceData =
+          RawLegendQueryDataCubeSource.serialization.toJson(newRawSource);
+
+        // Process the new raw source and create the new specification
+        const newSource = await store.engine.processSource(newRawSourceData);
+        const newSpecification = await store.engine.generateBaseSpecification(
+          RawLegendQueryDataCubeSource.serialization.toJson(newRawSource),
+          newSource,
+        );
+        newSpecification.configuration =
+          store.builder?.initialSpecification.configuration;
+
+        // Update the builder with a new state containing the new specification
+        // We pass in the existing persistent data cube so we don't lose the
+        // saved state of the data cube, if it exists.
+        store.setBuilder(
+          new LegendDataCubeBuilderState(
+            store,
+            newSpecification,
+            store.builder?.persistentDataCube,
+          ),
+        );
+
+        store.sourceViewerDisplay.close();
+      } finally {
+        setIsUpdatingParameters(false);
+      }
+    };
+
+    const link = application.config.queryApplicationUrl
+      ? EXTERNAL_APPLICATION_NAVIGATION__generateQueryViewUrl(
+          application.config.queryApplicationUrl,
+          source.info.id,
+        )
+      : undefined;
+
+    const queryHasParameters = params.length > 0;
+
+    return (
+      <div className="h-full w-full px-2 pt-2">
+        <div
+          className={`h-[calc(100%_-_${queryHasParameters ? 40 : 8}px)] w-full border border-neutral-300 bg-white`}
+        >
+          <div className="h-full w-full select-none overflow-auto p-2">
+            <div className="flex h-6">
+              <div className="flex h-6 items-center text-xl font-medium">
+                <DataCubeIcon.Table />
+              </div>
+              <div className="ml-1 flex h-6 items-center text-xl font-medium">
+                Legend Query
+              </div>
+            </div>
+            {link && (
+              <div className="mt-2 flex h-6 w-full">
+                <div className="flex h-full w-[calc(100%_-_20px)] items-center border border-r-0 border-neutral-400 px-1.5 font-bold text-sky-500 underline">
+                  <a
+                    href={link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="overflow-hidden overflow-ellipsis whitespace-nowrap"
+                  >
+                    {link}
+                  </a>
+                </div>
+                <button
+                  className="flex aspect-square h-full w-6 items-center justify-center border border-neutral-400 bg-neutral-300 hover:brightness-95"
+                  onClick={() => {
+                    store.application.clipboardService
+                      .copyTextToClipboard(link)
+                      .catch((error) =>
+                        store.alertService.alertUnhandledError(error),
+                      );
+                  }}
+                  title="Copy Link"
+                >
+                  <DataCubeIcon.Clipboard />
+                </button>
+              </div>
+            )}
+            {!link && (
+              <div className="mt-2 flex h-6 w-full">
+                <div className="flex h-full w-[calc(100%_-_20px)] items-center border border-r-0 border-neutral-400 bg-neutral-200 px-1.5">
+                  <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+                    {source.info.id}
+                  </div>
+                </div>
+                <button
+                  className="flex aspect-square h-full w-6 items-center justify-center border border-neutral-400 bg-neutral-300 hover:brightness-95"
+                  onClick={() => {
+                    application.clipboardService
+                      .copyTextToClipboard(source.info.id)
+                      .catch((error) =>
+                        store.alertService.alertUnhandledError(error),
+                      );
+                  }}
+                  title="Copy ID"
+                >
+                  <DataCubeIcon.Clipboard />
+                </button>
+              </div>
+            )}
+            {queryHasParameters && (
+              <div className="h-50 mt-2 w-full overflow-auto">
+                <div>Parameters:</div>
+                {params.map(
+                  (parameter: {
+                    variable: V1_Variable;
+                    valueSpec: V1_ValueSpecification;
+                  }) => {
+                    const parameterVariable = guaranteeNonNullable(
+                      source.lambda.parameters.find(
+                        (param) => param.name === parameter.variable.name,
+                      ),
+                      `Unable to find parameter with name ${parameter.variable.name} in source lambda`,
+                    );
+                    const packageableType = guaranteeType(
+                      parameterVariable.genericType?.rawType,
+                      V1_PackageableType,
+                      'Can only edit parameters with packageable type',
+                    );
+
+                    const resetValue = (): void => {
+                      if (isPrimitiveType(packageableType.fullPath)) {
+                        updateParameterValue(
+                          parameter.variable.name,
+                          V1_observe_ValueSpecification(
+                            _primitiveValue(
+                              packageableType.fullPath,
+                              _defaultPrimitiveTypeValue(
+                                packageableType.fullPath,
+                              ),
+                            ),
+                          ),
+                        );
+                      } else {
+                        // If not a primitive, assume it is an enum
+                        const typeParam = _elementPtr(
+                          guaranteeIsString(packageableType.fullPath),
+                        );
+                        const valueSpec = _property('', [typeParam]);
+                        updateParameterValue(
+                          parameter.variable.name,
+                          V1_observe_ValueSpecification(valueSpec),
+                        );
+                      }
+                    };
+
+                    return (
+                      <div
+                        key={parameter.variable.name}
+                        className="mt-1 flex h-fit min-h-5 w-full"
+                      >
+                        <div className="my-auto">
+                          {parameter.variable.name}
+                          {': '}
+                        </div>
+                        <V1_BasicValueSpecificationEditor
+                          valueSpecification={guaranteeType(
+                            parameter.valueSpec,
+                            V1_ValueSpecification,
+                          )}
+                          multiplicity={parameterVariable.multiplicity}
+                          typeCheckOption={{
+                            expectedType: packageableType,
+                            match:
+                              packageableType.fullPath ===
+                              PRIMITIVE_TYPE.DATETIME,
+                          }}
+                          setValueSpecification={(
+                            val: V1_ValueSpecification,
+                          ) => {
+                            updateParameterValue(
+                              parameter.variable.name,
+                              V1_observe_ValueSpecification(val),
+                            );
+                          }}
+                          resetValue={resetValue}
+                          className="ml-2 flex flex-auto"
+                          enumeration={enumerations[parameter.variable.name]}
+                          selectorConfig={{
+                            optionCustomization: { rowHeight: 20 },
+                          }}
+                          lightMode={true}
+                          readOnly={isCachingEnabled}
+                        />
+                      </div>
+                    );
+                  },
+                )}
+                {isCachingEnabled && (
+                  <FormAlert
+                    message="Parameter editing disabled"
+                    type={AlertType.WARNING}
+                    text="Parameter editing is disabled while caching is enabled. To update query parameter values, disable caching first."
+                    className="mt-3"
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+        {queryHasParameters && (
+          <div className="flex h-10 items-center justify-end px-2">
+            <FormButton
+              disabled={isUpdatingParameters}
+              onClick={() => store.sourceViewerDisplay.close()}
+            >
+              Cancel
+            </FormButton>
+            <FormButton
+              className="ml-2"
+              disabled={
+                params.some(
+                  (param) =>
+                    !isValidV1_ValueSpecification(
+                      param.valueSpec,
+                      param.variable.multiplicity,
+                    ),
+                ) ||
+                isCachingEnabled ||
+                isUpdatingParameters
+              }
+              onClick={() => {
+                // eslint-disable-next-line no-void
+                void (async () => {
+                  await updateBuilderWithNewSpecification();
+                })();
+              }}
+            >
+              Update Query Parameters
+            </FormButton>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
 
 const handleFetchProject = (
   depotServerClient: DepotServerClient,
@@ -191,84 +611,12 @@ const UserDefinedFunctionSourceViewer = observer(
 export const LegendDataCubeSourceViewer = observer(() => {
   const store = useLegendDataCubeBuilderStore();
   const source = store.builder?.source;
-  const application = useLegendDataCubeApplicationStore();
 
   if (!source) {
     return null;
   }
   if (source instanceof LegendQueryDataCubeSource) {
-    const link = application.config.queryApplicationUrl
-      ? EXTERNAL_APPLICATION_NAVIGATION__generateQueryViewUrl(
-          application.config.queryApplicationUrl,
-          source.info.id,
-        )
-      : undefined;
-
-    return (
-      <div className="h-full w-full px-2 pt-2">
-        <div className="h-[calc(100%_-_8px)] w-full border border-neutral-300 bg-white">
-          <div className="h-full w-full select-none p-2">
-            <div className="flex h-6">
-              <div className="flex h-6 items-center text-xl font-medium">
-                <DataCubeIcon.Table />
-              </div>
-              <div className="ml-1 flex h-6 items-center text-xl font-medium">
-                Legend Query
-              </div>
-            </div>
-            {link && (
-              <div className="mt-2 flex h-6 w-full">
-                <div className="flex h-full w-[calc(100%_-_20px)] items-center border border-r-0 border-neutral-400 px-1.5 font-bold text-sky-500 underline">
-                  <a
-                    href={link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="overflow-hidden overflow-ellipsis whitespace-nowrap"
-                  >
-                    {link}
-                  </a>
-                </div>
-                <button
-                  className="flex aspect-square h-full w-6 items-center justify-center border border-neutral-400 bg-neutral-300 hover:brightness-95"
-                  onClick={() => {
-                    store.application.clipboardService
-                      .copyTextToClipboard(link)
-                      .catch((error) =>
-                        store.alertService.alertUnhandledError(error),
-                      );
-                  }}
-                  title="Copy Link"
-                >
-                  <DataCubeIcon.Clipboard />
-                </button>
-              </div>
-            )}
-            {!link && (
-              <div className="mt-2 flex h-6 w-full">
-                <div className="flex h-full w-[calc(100%_-_20px)] items-center border border-r-0 border-neutral-400 bg-neutral-200 px-1.5">
-                  <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
-                    {source.info.id}
-                  </div>
-                </div>
-                <button
-                  className="flex aspect-square h-full w-6 items-center justify-center border border-neutral-400 bg-neutral-300 hover:brightness-95"
-                  onClick={() => {
-                    application.clipboardService
-                      .copyTextToClipboard(source.info.id)
-                      .catch((error) =>
-                        store.alertService.alertUnhandledError(error),
-                      );
-                  }}
-                  title="Copy ID"
-                >
-                  <DataCubeIcon.Clipboard />
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
+    return <LegendQuerySourceViewer source={source} />;
   } else if (source instanceof UserDefinedFunctionDataCubeSource) {
     return <UserDefinedFunctionSourceViewer source={source} />;
   }

package/src/components/builder/source/{AdhocQueryDataCubeSourceBuilder.tsx → FreeformTDSExpressionDataCubeSourceBuilder.tsx}

@@ -33,7 +33,7 @@ import {
   V1_deserializePackageableElement,
 } from '@finos/legend-graph';
 import type { Entity } from '@finos/legend-storage';
-import type { AdhocQueryDataCubeSourceBuilderState } from '../../../stores/builder/source/AdhocQueryDataCubeSourceBuilderState.js';
+import type { FreeformTDSExpressionDataCubeSourceBuilderState } from '../../../stores/builder/source/FreeformTDSExpressionDataCubeSourceBuilderState.js';
 import {
   buildProjectOption,
   buildRuntimeOption,
@@ -53,9 +53,9 @@ export const buildMappingOption = (mapping: V1_Mapping): MappingOption => ({
   value: mapping,
 });
 
-export const AdhocQueryDataCubeSourceBuilder = observer(
+export const FreeformTDSExpressionDataCubeSourceBuilder = observer(
   (props: {
-    sourceBuilder: AdhocQueryDataCubeSourceBuilderState;
+    sourceBuilder: FreeformTDSExpressionDataCubeSourceBuilderState;
     store: LegendDataCubeBuilderStore;
   }) => {
     const { sourceBuilder, store } = props;

package/src/components/builder/source/LegendQueryDataCubeSourceBuilder.tsx

@@ -16,9 +16,10 @@
 
 import { observer } from 'mobx-react-lite';
 import {
+  type QueryLoaderState,
   QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT,
   SORT_BY_OPTIONS,
-  type QueryLoaderState,
+  V1_BasicValueSpecificationEditor,
 } from '@finos/legend-query-builder';
 import type { LegendQueryDataCubeSourceBuilderState } from '../../../stores/builder/source/LegendQueryDataCubeSourceBuilderState.js';
 import { generateGAVCoordinates } from '@finos/legend-storage';
@@ -26,11 +27,17 @@ import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
 import {
   debounce,
   formatDistanceToNow,
+  guaranteeIsString,
+  guaranteeType,
   quantifyList,
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { useRef, useState, useMemo, useEffect } from 'react';
 import {
+  _defaultPrimitiveTypeValue,
+  _elementPtr,
+  _primitiveValue,
+  _property,
   FormButton,
   FormCheckbox,
   FormCodeEditor,
@@ -38,10 +45,17 @@ import {
   FormDropdownMenuItem,
   FormDropdownMenuTrigger,
   FormTextInput,
+  isPrimitiveType,
 } from '@finos/legend-data-cube';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { useLegendDataCubeBuilderStore } from '../LegendDataCubeBuilderStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
+import {
+  type V1_ValueSpecification,
+  PRIMITIVE_TYPE,
+  V1_observe_ValueSpecification,
+  V1_PackageableType,
+} from '@finos/legend-graph';
 
 const LegendQuerySearcher = observer((props: { state: QueryLoaderState }) => {
   const { state } = props;
@@ -319,6 +333,83 @@ export const LegendQueryDataCubeSourceBuilder = observer(
             />
           </div>
         )}
+        {sourceBuilder.queryParameters &&
+          sourceBuilder.queryParameters.length > 0 && (
+            <div className="h-50 mt-2 w-full overflow-auto">
+              {sourceBuilder.queryParameterValues &&
+                Object.entries(sourceBuilder.queryParameterValues).map(
+                  ([name, { variable, valueSpec }]) => {
+                    const packageableType = guaranteeType(
+                      variable.genericType?.rawType,
+                      V1_PackageableType,
+                      'Can only edit parameters with packageable type',
+                    );
+                    const enumeration = sourceBuilder.queryEnumerations?.[name];
+                    const resetValue = (): void => {
+                      if (isPrimitiveType(packageableType.fullPath)) {
+                        sourceBuilder.setQueryParameterValue(
+                          name,
+                          V1_observe_ValueSpecification(
+                            _primitiveValue(
+                              packageableType.fullPath,
+                              _defaultPrimitiveTypeValue(
+                                packageableType.fullPath,
+                              ),
+                            ),
+                          ),
+                        );
+                      } else {
+                        // If not a primitive, assume it is an enum
+                        const typeParam = _elementPtr(
+                          guaranteeIsString(packageableType.fullPath),
+                        );
+                        const enumValueSpec = _property('', [typeParam]);
+                        sourceBuilder.setQueryParameterValue(
+                          name,
+                          V1_observe_ValueSpecification(enumValueSpec),
+                        );
+                      }
+                    };
+                    return (
+                      <div
+                        key={name}
+                        className="mt-1 flex h-fit min-h-5 w-full"
+                      >
+                        <div className="my-auto">
+                          {name}
+                          {': '}
+                        </div>
+                        <V1_BasicValueSpecificationEditor
+                          valueSpecification={valueSpec}
+                          multiplicity={variable.multiplicity}
+                          typeCheckOption={{
+                            expectedType: packageableType,
+                            match:
+                              packageableType.fullPath ===
+                              PRIMITIVE_TYPE.DATETIME,
+                          }}
+                          setValueSpecification={(
+                            val: V1_ValueSpecification,
+                          ) => {
+                            sourceBuilder.setQueryParameterValue(
+                              name,
+                              V1_observe_ValueSpecification(val),
+                            );
+                          }}
+                          resetValue={resetValue}
+                          className="ml-2 flex flex-auto"
+                          enumeration={enumeration}
+                          selectorConfig={{
+                            optionCustomization: { rowHeight: 20 },
+                          }}
+                          lightMode={true}
+                        />
+                      </div>
+                    );
+                  },
+                )}
+            </div>
+          )}
         <FormButton
           className="mt-2 flex items-center pl-1"
           onClick={() => sourceBuilder.unsetQuery()}