@finos/legend-application-studio 28.19.8 → 28.19.9

package/src/components/editor/editor-group/mapping-editor/RelationFunctionPropertyMappingEditor.tsx

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2025-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, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { InlineLambdaEditor } from '@finos/legend-query-builder';
+import type {
+  RelationFunctionInstanceSetImplementationState,
+  RelationFunctionPropertyMappingState,
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/RelationFunctionInstanceSetImplementationState.js';
+import { type ConnectDropTarget, useDrop } from 'react-dnd';
+import {
+  getClassPropertyType,
+  CLASS_PROPERTY_TYPE,
+} from '../../../../stores/editor/utils/ModelClassifierUtils.js';
+import { RelationTypeDragSource } from './RelationTypeTree.js';
+import { CORE_DND_TYPE } from '../../../../stores/editor/utils/DnDUtils.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+
+const SimplePropertyMappingEditor = observer(
+  (props: {
+    propertyMappingState: RelationFunctionPropertyMappingState;
+    dropConnector?: ConnectDropTarget;
+    transformProps: {
+      disableTransform: boolean;
+      forceBackdrop: boolean;
+    };
+    isReadOnly: boolean;
+  }) => {
+    const { propertyMappingState, dropConnector, transformProps } = props;
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
+    return (
+      <div className="property-mapping-editor__entry__container">
+        <div ref={ref} className="property-mapping-editor__entry">
+          <InlineLambdaEditor
+            disabled={transformProps.disableTransform}
+            lambdaEditorState={propertyMappingState}
+            forceBackdrop={transformProps.forceBackdrop}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+export const RelationFunctionPropertyMappingEditor = observer(
+  (props: {
+    relationPropertyMappingState: RelationFunctionPropertyMappingState;
+    relationInstanceSetImplementationState: RelationFunctionInstanceSetImplementationState;
+    setImplementationHasParserError: boolean;
+    isReadOnly: boolean;
+  }) => {
+    const {
+      relationPropertyMappingState: relationPropertyMappingState,
+      relationInstanceSetImplementationState:
+        relationInstanceSetImplementationState,
+      setImplementationHasParserError,
+      isReadOnly,
+    } = props;
+    const disableEditingTransform =
+      relationInstanceSetImplementationState.isConvertingTransformLambdaObjects ||
+      isReadOnly;
+    // Drag and Drop
+    const handleDrop = useCallback(
+      (droppedItem: RelationTypeDragSource): void => {
+        if (!disableEditingTransform) {
+          if (droppedItem instanceof RelationTypeDragSource) {
+            const toAppend = guaranteeNonNullable(droppedItem.data).id;
+            if (toAppend) {
+              relationPropertyMappingState.setLambdaString(
+                relationPropertyMappingState.lambdaString + toAppend,
+              );
+            }
+          }
+        }
+      },
+      [disableEditingTransform, relationPropertyMappingState],
+    );
+    const [, dropConnector] = useDrop<RelationTypeDragSource>(
+      () => ({
+        accept: [CORE_DND_TYPE.PROJECT_EXPLORER_FUNCTION],
+        drop: (item) => handleDrop(item),
+      }),
+      [handleDrop],
+    );
+    const transformProps = {
+      disableTransform:
+        relationInstanceSetImplementationState.isConvertingTransformLambdaObjects,
+      forceBackdrop: setImplementationHasParserError,
+    };
+
+    switch (
+      getClassPropertyType(
+        relationPropertyMappingState.propertyMapping.property.value.genericType
+          .value.rawType,
+      )
+    ) {
+      case CLASS_PROPERTY_TYPE.UNIT:
+      case CLASS_PROPERTY_TYPE.MEASURE:
+      case CLASS_PROPERTY_TYPE.PRIMITIVE:
+        return (
+          <SimplePropertyMappingEditor
+            propertyMappingState={relationPropertyMappingState}
+            dropConnector={dropConnector}
+            transformProps={transformProps}
+            isReadOnly={isReadOnly}
+          />
+        );
+      default:
+        return null;
+    }
+  },
+);

package/src/components/editor/editor-group/mapping-editor/RelationTypeTree.tsx

@@ -0,0 +1,257 @@
+/**
+ * Copyright (c) 2025-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 { useState, useEffect, useRef } from 'react';
+import { useDrag } from 'react-dnd';
+import {
+  type TreeNodeContainerProps,
+  type TreeData,
+  type TreeNodeData,
+  TreeView,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from '@finos/legend-art';
+import {
+  addUniqueEntry,
+  assertErrorThrown,
+  isNonNullable,
+} from '@finos/legend-shared';
+import {
+  type Type,
+  RawLambda,
+  type ConcreteFunctionDefinition,
+} from '@finos/legend-graph';
+import { renderColumnTypeIconFromType } from '../connection-editor/DatabaseEditorHelper.js';
+import { CORE_DND_TYPE } from '../../../../stores/editor/utils/DnDUtils.js';
+import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
+
+export class RelationColumnTypeTreeNodeData implements TreeNodeData {
+  id: string;
+  label: string;
+  isSelected?: boolean;
+  isOpen?: boolean;
+  childrenIds?: string[];
+  columnName: string;
+  columnType: string;
+
+  constructor(
+    id: string,
+    label: string,
+    columnName: string,
+    columnType: string,
+  ) {
+    this.id = id;
+    this.label = label;
+    this.columnName = columnName;
+    this.columnType = columnType;
+  }
+}
+
+const getColumnTreeNodeData = (
+  columnName: string,
+  columnType: string,
+): RelationColumnTypeTreeNodeData => {
+  const columnNode = new RelationColumnTypeTreeNodeData(
+    columnName,
+    columnName,
+    columnName,
+    columnType,
+  );
+  return columnNode;
+};
+
+const getRelationTypeTreeData = async (
+  relation: ConcreteFunctionDefinition,
+  editorStore: EditorStore,
+) => {
+  const rootIds: string[] = [];
+  const nodes = new Map<string, RelationColumnTypeTreeNodeData>();
+  // columns
+  // throw an error if more than one in concrete function definition
+  const lambda = new RawLambda(
+    relation.parameters.map((parameter) =>
+      editorStore.graphManagerState.graphManager.serializeRawValueSpecification(
+        parameter,
+      ),
+    ),
+    relation.expressionSequence,
+  );
+  try {
+    const relationType =
+      await editorStore.graphManagerState.graphManager.getLambdaRelationType(
+        lambda,
+        editorStore.graphManagerState.graph,
+      );
+    relationType.columns.forEach((column) => {
+      const columnNode = getColumnTreeNodeData(column.name, column.type);
+      addUniqueEntry(rootIds, columnNode.id);
+      nodes.set(columnNode.id, columnNode);
+    });
+  } catch (error) {
+    assertErrorThrown(error);
+    editorStore.applicationStore.alertUnhandledError(error);
+  }
+
+  return { rootIds, nodes };
+};
+
+export class RelationTypeDragSource {
+  data: RelationColumnTypeTreeNodeData | undefined;
+
+  constructor(data: RelationColumnTypeTreeNodeData) {
+    this.data = data;
+  }
+}
+
+const RelationTypeTreeNodeContainer: React.FC<
+  TreeNodeContainerProps<
+    RelationColumnTypeTreeNodeData,
+    { selectedType?: Type | undefined }
+  >
+> = (props) => {
+  const { node, level, stepPaddingInRem, onNodeSelect } = props;
+  const [, dragConnector] = useDrag(
+    () => ({
+      type: CORE_DND_TYPE.PROJECT_EXPLORER_FUNCTION,
+      item: new RelationTypeDragSource(node),
+    }),
+    [node],
+  );
+  const ref = useRef<HTMLDivElement>(null);
+  dragConnector(ref);
+
+  const isExpandable = Boolean(node.childrenIds?.length);
+  const selectNode = (): void => onNodeSelect?.(node);
+  const nodeTypeIcon = renderColumnTypeIconFromType(node.columnType);
+  const nodeExpandIcon = isExpandable ? (
+    node.isOpen ? (
+      <ChevronDownIcon />
+    ) : (
+      <ChevronRightIcon />
+    )
+  ) : (
+    <div />
+  );
+
+  return (
+    <div
+      className="tree-view__node__container"
+      onClick={selectNode}
+      ref={ref}
+      style={{
+        paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
+        display: 'flex',
+      }}
+    >
+      <div className="tree-view__node__icon">
+        <div className="tree-view__node__expand-icon">{nodeExpandIcon}</div>
+        <div className="type-tree__type-icon">{nodeTypeIcon}</div>
+      </div>
+      <div className="tree-view__node__label type-tree__node__label">
+        <button tabIndex={-1} title={`${node.id}`}>
+          {node.label}
+        </button>
+        {node instanceof RelationColumnTypeTreeNodeData && (
+          <div className="type-tree__node__type">
+            <button
+              className="type-tree__node__type__label"
+              // TODO: match type
+              // className={clsx('type-tree__node__type__label', {
+              //   'type-tree__node__type__label--highlighted':
+              //     primitiveType && primitiveType === selectedType,
+              // })}
+              tabIndex={-1}
+              title="Column Type"
+            >
+              {node.columnType.split('::').pop()}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const RelationTypeTree: React.FC<{
+  relation: ConcreteFunctionDefinition;
+  editorStore: EditorStore;
+  selectedType?: Type | undefined;
+}> = (props) => {
+  const { relation, selectedType, editorStore } = props;
+  // NOTE: We only need to compute this once so we use lazy initial state syntax
+  // See https://reactjs.org/docs/hooks-reference.html#lazy-initial-
+  const [treeData, setTreeData] = useState(
+    {} as TreeData<RelationColumnTypeTreeNodeData>,
+  );
+  const [loading, setLoading] = useState(false);
+
+  const onNodeSelect = (node: RelationColumnTypeTreeNodeData): void => {
+    //TODO: check for child nodes in this case
+    setTreeData({ ...treeData });
+  };
+
+  const getChildNodes = (
+    node: RelationColumnTypeTreeNodeData,
+  ): RelationColumnTypeTreeNodeData[] => {
+    if (!node.childrenIds) {
+      return [];
+    }
+    const childrenNodes = node.childrenIds
+      .map((id) => treeData.nodes.get(id))
+      .filter(isNonNullable)
+      // sort so that column nodes come before join nodes
+      .sort((a, b) => a.label.localeCompare(b.label))
+      .sort(
+        (a, b) =>
+          (b instanceof RelationColumnTypeTreeNodeData ? 1 : 0) -
+          (a instanceof RelationColumnTypeTreeNodeData ? 1 : 0),
+      );
+    return childrenNodes;
+  };
+
+  useEffect(() => {
+    const fetchTypeTreeData = async () => {
+      try {
+        const response = await getRelationTypeTreeData(relation, editorStore);
+        setTreeData(response);
+        setLoading(true);
+      } catch (error) {
+        assertErrorThrown(error);
+        setLoading(false);
+      }
+    };
+    fetchTypeTreeData()
+      .then()
+      .catch((error) => assertErrorThrown(error));
+  }, [relation, editorStore]);
+
+  if (loading) {
+    return (
+      <TreeView
+        components={{
+          TreeNodeContainer: RelationTypeTreeNodeContainer,
+        }}
+        treeData={treeData}
+        getChildNodes={getChildNodes}
+        onNodeSelect={onNodeSelect}
+        innerProps={{
+          selectedType,
+        }}
+      />
+    );
+  }
+  return <div></div>;
+};

package/src/stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.ts

@@ -103,6 +103,7 @@ import {
   ModelStore,
   INTERNAL__UnknownSetImplementation,
   RelationFunctionInstanceSetImplementation,
+  ConcreteFunctionDefinition,
 } from '@finos/legend-graph';
 import type {
   DSL_Mapping_LegendStudioApplicationPlugin_Extension,
@@ -127,6 +128,8 @@ import { LambdaEditorState } from '@finos/legend-query-builder';
 import type { MappingEditorTabState } from './MappingTabManagerState.js';
 import { MappingTestableState } from './testable/MappingTestableState.js';
 import { MappingTestMigrationState } from './legacy/MappingTestMigrationState.js';
+import { relationFunction_setRelationFunction } from '../../../../graph-modifier/STO_RelationFunction_GraphModifierHelper.js';
+import { RelationFunctionInstanceSetImplementationState } from './RelationFunctionInstanceSetImplementationState.js';
 
 export interface MappingExplorerTreeNodeData extends TreeNodeData {
   mappingElement: MappingElement;
@@ -312,12 +315,10 @@ export const getMappingElementSource = (
       mappingElement.mainSetImplementation,
       plugins,
     );
-  }
-  // TODO: We could probably return the relation function used for the mapping here once we implement the form mode support for it
-  else if (
+  } else if (
     mappingElement instanceof RelationFunctionInstanceSetImplementation
   ) {
-    return undefined;
+    return mappingElement.relationFunction;
   }
   const extraMappingElementSourceExtractors = plugins.flatMap(
     (plugin) =>
@@ -907,12 +908,7 @@ export class MappingEditorState extends ElementEditorState {
       );
       return;
     }
-    if (mappingElement instanceof RelationFunctionInstanceSetImplementation) {
-      this.editorStore.applicationStore.notificationService.notifyUnsupportedFeature(
-        'Relation Function mapping editor',
-      );
-      return;
-    }
+
     // Open mapping element from included mapping in another mapping editor tab
     if (mappingElement._PARENT !== this.element) {
       this.editorStore.graphEditorMode.openElement(mappingElement._PARENT);
@@ -1005,6 +1001,20 @@ export class MappingEditorState extends ElementEditorState {
           rootRelationalSetImp_setMainTableAlias(setImplementation, newSource);
           sourceUpdated = true;
         }
+      } else if (
+        setImplementation instanceof RelationFunctionInstanceSetImplementation
+      ) {
+        if (
+          newSource instanceof ConcreteFunctionDefinition &&
+          !getEmbeddedSetImplementations(setImplementation).length
+        ) {
+          relationFunction_setRelationFunction(
+            setImplementation,
+            newSource,
+            this.editorStore.changeDetectionState.observerContext,
+          );
+          sourceUpdated = true;
+        }
       } else {
         const extraInstanceSetImplementationSourceUpdaters =
           this.editorStore.pluginManager
@@ -1056,6 +1066,16 @@ export class MappingEditorState extends ElementEditorState {
             );
           newRootRelationalInstanceSetImplementation.mainTableAlias = newSource;
           newSetImp = newRootRelationalInstanceSetImplementation;
+        } else if (newSource instanceof ConcreteFunctionDefinition) {
+          const relationFunctionSetImpl =
+            new RelationFunctionInstanceSetImplementation(
+              setImplementation.id,
+              this.mapping,
+              setImplementation.class,
+              setImplementation.root,
+            );
+          relationFunctionSetImpl.relationFunction = newSource;
+          newSetImp = relationFunctionSetImpl;
         } else {
           throw new UnsupportedOperationError(
             `Can't use the specified class mapping source`,
@@ -1221,6 +1241,13 @@ export class MappingEditorState extends ElementEditorState {
         this.editorStore,
         mappingElement,
       );
+    } else if (
+      mappingElement instanceof RelationFunctionInstanceSetImplementation
+    ) {
+      return new RelationFunctionInstanceSetImplementationState(
+        this.editorStore,
+        mappingElement,
+      );
     }
     const extraMappingElementStateCreators = this.editorStore.pluginManager
       .getApplicationPlugins()

package/src/stores/editor/editor-state/element-editor-state/mapping/MappingElementDecorator.ts

@@ -37,6 +37,7 @@ import {
   type InstanceSetImplementation,
   type INTERNAL__UnresolvedSetImplementation,
   type Mapping,
+  type RelationColumn,
   getAllClassMappings,
   PurePropertyMapping,
   EmbeddedFlatDataPropertyMapping,
@@ -66,6 +67,7 @@ import {
   SetImplementationExplicitReference,
   type INTERNAL__UnknownSetImplementation,
   type RelationFunctionInstanceSetImplementation,
+  RelationFunctionPropertyMapping,
 } from '@finos/legend-graph';
 import type { EditorStore } from '../../../EditorStore.js';
 import {
@@ -79,6 +81,7 @@ import {
 } from '../../../../graph-modifier/DSL_Mapping_GraphModifierHelper.js';
 import { rootRelationalSetImp_setPropertyMappings } from '../../../../graph-modifier/STO_Relational_GraphModifierHelper.js';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
+import { isStubbed_RelationColumn } from '../../../../graph-modifier/STO_RelationFunction_GraphModifierHelper.js';
 
 /**
  * Iterate through all properties (including supertypes' properties) of the set implementation
@@ -662,7 +665,65 @@ export class MappingElementDecorator implements SetImplementationVisitor<void> {
   visit_RelationFunctionInstanceSetImplementation(
     setImplementation: RelationFunctionInstanceSetImplementation,
   ): void {
-    return;
+    const decoratePropertyMapping = (
+      propertyMappings: RelationFunctionPropertyMapping[] | undefined,
+      property: Property,
+    ): RelationFunctionPropertyMapping[] => {
+      const existingPropertyMappings = (propertyMappings ?? []).filter((pm) => {
+        if (pm instanceof RelationFunctionPropertyMapping) {
+          return !isStubbed_RelationColumn(pm.column);
+        }
+        return false;
+      });
+      const propertyType = property.genericType.value.rawType;
+      if (
+        propertyType instanceof PrimitiveType ||
+        propertyType instanceof Unit ||
+        propertyType instanceof Measure
+      ) {
+        if (existingPropertyMappings.length) {
+          // TODO?: do we want to check the type of the property mapping here?
+          return existingPropertyMappings;
+        }
+        const newPropertyMapping = new RelationFunctionPropertyMapping(
+          setImplementation,
+          PropertyExplicitReference.create(property),
+          SetImplementationExplicitReference.create(setImplementation),
+          undefined,
+          {} as RelationColumn,
+        );
+        return [newPropertyMapping];
+      } else if (propertyType instanceof Enumeration) {
+        // TODO: add changes
+      } else if (propertyType instanceof Class) {
+        // TODO: add change
+      }
+      return [];
+    };
+    const propertyMappingsBeforeDecoration =
+      setImplementation.propertyMappings as RelationFunctionPropertyMapping[];
+    const decoratedPropertyMappings =
+      getDecoratedSetImplementationPropertyMappings<RelationFunctionPropertyMapping>(
+        setImplementation,
+        decoratePropertyMapping,
+      );
+    instanceSetImplementation_setPropertyMappings(
+      setImplementation,
+      decoratedPropertyMappings.concat(
+        // NOTE: here, we remove some low-quality property mappings
+        // i.e. stubbed property mappings from before adding new decorated property mappings
+        propertyMappingsBeforeDecoration
+          .filter(
+            (propertyMapping) =>
+              !isStubbed_RelationColumn(propertyMapping.column),
+          )
+          .filter(
+            (propertyMapping) =>
+              !decoratedPropertyMappings.includes(propertyMapping),
+          ),
+      ),
+      this.editorStore.changeDetectionState.observerContext,
+    );
   }
 }
 
@@ -814,6 +875,13 @@ export class MappingElementDecorationCleaner
   visit_RelationFunctionInstanceSetImplementation(
     setImplementation: RelationFunctionInstanceSetImplementation,
   ): void {
-    return;
+    instanceSetImplementation_setPropertyMappings(
+      setImplementation,
+      setImplementation.propertyMappings.filter(
+        (propertyMapping) =>
+          propertyMapping instanceof RelationFunctionPropertyMapping,
+      ),
+      this.editorStore.changeDetectionState.observerContext,
+    );
   }
 }