@finos/legend-application-studio 18.0.1 → 18.1.0

package/src/components/editor/edit-panel/mapping-editor/ClassMappingEditor.tsx

@@ -29,10 +29,10 @@ import { MappingEditorState } from '../../../../stores/editor-state/element-edit
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   type SetImplementation,
-  type PureInstanceSetImplementation,
-  type FlatDataInstanceSetImplementation,
-  type EmbeddedFlatDataPropertyMapping,
-  type RootRelationalInstanceSetImplementation,
+  PureInstanceSetImplementation,
+  FlatDataInstanceSetImplementation,
+  EmbeddedFlatDataPropertyMapping,
+  RootRelationalInstanceSetImplementation,
   fromElementPathToMappingElementId,
   OperationSetImplementation,
   OperationType,
@@ -41,9 +41,8 @@ import {
   setImpl_nominateRoot,
   operationMapping_setOperation,
   operationMapping_setParameters,
-  setImpl_setRoot,
-} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
-import { SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelClassifierUtils.js';
+  setImplementation_setRoot,
+} from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 
 export const OperatorSelector = observer(
@@ -75,7 +74,7 @@ export const OperatorSelector = observer(
         options={operationsOptions}
         onChange={changeSourceType}
         value={selectedSourceType}
-        placeholder={`Select operation ID`}
+        placeholder="Select operation ID"
       />
     );
   },
@@ -94,8 +93,6 @@ export const ClassMappingEditor = observer(
     const editorStore = useEditorStore();
     const mappingEditorState =
       editorStore.getCurrentEditorState(MappingEditorState);
-    const setImplementationType =
-      editorStore.graphState.getSetImplementationType(setImplementation);
     const _class = setImplementation.class;
     // ID
     const isDefaultId =
@@ -113,62 +110,47 @@ export const ClassMappingEditor = observer(
     let sourceType = '';
     let sourceName: string | undefined;
 
-    switch (setImplementationType) {
-      case SET_IMPLEMENTATION_TYPE.PUREINSTANCE: {
-        sourceType = CLASS_MAPPING_SOURCE_TYPE.CLASS;
-        sourceName = (setImplementation as PureInstanceSetImplementation)
-          .srcClass?.value.name;
-        break;
-      }
-      case SET_IMPLEMENTATION_TYPE.FLAT_DATA: {
-        sourceType = CLASS_MAPPING_SOURCE_TYPE.FLAT_DATA;
-        sourceName = (setImplementation as FlatDataInstanceSetImplementation)
-          .sourceRootRecordType.value._OWNER.name;
-        break;
-      }
-      case SET_IMPLEMENTATION_TYPE.EMBEDDED_FLAT_DATA: {
-        sourceType = CLASS_MAPPING_SOURCE_TYPE.FLAT_DATA;
-        const flatDataInstanceSetImpl =
-          setImplementation as EmbeddedFlatDataPropertyMapping;
-        sourceName = (
-          flatDataInstanceSetImpl.rootInstanceSetImplementation as FlatDataInstanceSetImplementation
-        ).sourceRootRecordType.value._OWNER.name;
-        break;
-      }
-      case SET_IMPLEMENTATION_TYPE.RELATIONAL: {
-        sourceType = CLASS_MAPPING_SOURCE_TYPE.RELATIONAL;
-        sourceName = (
-          setImplementation as RootRelationalInstanceSetImplementation
-        ).mainTableAlias?.relation.value.name;
-        break;
-      }
-      case SET_IMPLEMENTATION_TYPE.OPERATION:
-        sourceType = CLASS_MAPPING_SOURCE_TYPE.OPERATION;
-        break;
-      default: {
-        const extraMappingSourceTypeInfoGetters = editorStore.pluginManager
-          .getApplicationPlugins()
-          .flatMap(
-            (plugin) =>
-              (
-                plugin as DSL_Mapping_LegendStudioApplicationPlugin_Extension
-              ).getExtraMappingSourceTypeInfoGetters?.() ?? [],
-          );
-        for (const sourceTypeInfoGetter of extraMappingSourceTypeInfoGetters) {
-          const mappingSourceTypeInfo = sourceTypeInfoGetter(setImplementation);
-          if (mappingSourceTypeInfo) {
-            sourceType = mappingSourceTypeInfo.sourceType;
-            sourceName = mappingSourceTypeInfo.sourceName;
-          }
+    if (setImplementation instanceof PureInstanceSetImplementation) {
+      sourceType = CLASS_MAPPING_SOURCE_TYPE.CLASS;
+      sourceName = setImplementation.srcClass?.value.name;
+    } else if (setImplementation instanceof FlatDataInstanceSetImplementation) {
+      sourceType = CLASS_MAPPING_SOURCE_TYPE.FLAT_DATA;
+      sourceName = setImplementation.sourceRootRecordType.value._OWNER.name;
+    } else if (setImplementation instanceof EmbeddedFlatDataPropertyMapping) {
+      sourceType = CLASS_MAPPING_SOURCE_TYPE.FLAT_DATA;
+      sourceName = (
+        setImplementation.rootInstanceSetImplementation as FlatDataInstanceSetImplementation
+      ).sourceRootRecordType.value._OWNER.name;
+    } else if (
+      setImplementation instanceof RootRelationalInstanceSetImplementation
+    ) {
+      sourceType = CLASS_MAPPING_SOURCE_TYPE.RELATIONAL;
+      sourceName = setImplementation.mainTableAlias?.relation.value.name;
+    } else if (setImplementation instanceof OperationSetImplementation) {
+      sourceType = CLASS_MAPPING_SOURCE_TYPE.OPERATION;
+    } else {
+      const extraMappingSourceTypeInfoGetters = editorStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            (
+              plugin as DSL_Mapping_LegendStudioApplicationPlugin_Extension
+            ).getExtraMappingSourceTypeInfoGetters?.() ?? [],
+        );
+      for (const sourceTypeInfoGetter of extraMappingSourceTypeInfoGetters) {
+        const mappingSourceTypeInfo = sourceTypeInfoGetter(setImplementation);
+        if (mappingSourceTypeInfo) {
+          sourceType = mappingSourceTypeInfo.sourceType;
+          sourceName = mappingSourceTypeInfo.sourceName;
+          break;
         }
-        break;
       }
     }
 
     const toggleRoot = (): void => {
       if (!isReadOnly) {
         const isRoot = setImplementation.root.value;
-        setImpl_setRoot(setImplementation, !isRoot);
+        setImplementation_setRoot(setImplementation, !isRoot);
         if (setImplementation.root.value) {
           setImpl_nominateRoot(setImplementation);
         }
@@ -201,31 +183,12 @@ export const ClassMappingEditor = observer(
                 </div>
               </div>
             </div>
-            {/* Driver */}
-            <div
-              className={clsx(
-                'mapping-element-editor__metadata__chunk',
-                'mapping-element-editor__metadata__driver-chunk',
-                `mapping-element-editor__metadata__driver--${setImplementationType.toLowerCase()}`,
-                {
-                  'mapping-element-editor__metadata__source--none': !sourceName,
-                },
-              )}
-            >
-              <div className="mapping-element-editor__metadata__sub-chunk">
-                using
-              </div>
-              <div className="mapping-element-editor__metadata__sub-chunk mapping-element-editor__metadata__driver__type">
-                {setImplementationType.toUpperCase()}
-              </div>
-            </div>
             {/* Instance Set Implementation Source */}
-            {setImplementationType !== SET_IMPLEMENTATION_TYPE.OPERATION && (
+            {!(setImplementation instanceof OperationSetImplementation) && (
               <div
                 className={clsx(
                   'mapping-element-editor__metadata__chunk',
                   'mapping-element-editor__metadata__source-chunk',
-                  `background--${setImplementationType.toLowerCase()}`,
                   {
                     'mapping-element-editor__metadata__source-chunk--none':
                       !sourceName,
@@ -251,12 +214,10 @@ export const ClassMappingEditor = observer(
               </div>
             )}
             {/* Operation Set Implementation Operator */}
-            {setImplementationType === SET_IMPLEMENTATION_TYPE.OPERATION && (
+            {setImplementation instanceof OperationSetImplementation && (
               <div className="mapping-element-editor__metadata__operator-selector">
                 <OperatorSelector
-                  setImplementation={
-                    setImplementation as OperationSetImplementation
-                  }
+                  setImplementation={setImplementation}
                   isReadOnly={isReadOnly}
                 />
               </div>
@@ -275,7 +236,7 @@ export const ClassMappingEditor = observer(
                 onClick={toggleRoot}
                 disabled={isReadOnly}
                 tabIndex={-1}
-                title={'Set/Unset root class mapping'}
+                title="Toggle set class mapping as root"
               >
                 {setImplementation.root.value ? (
                   <CheckSquareIcon />

package/src/components/editor/edit-panel/mapping-editor/EnumerationMappingEditor.tsx

@@ -64,11 +64,11 @@ import {
   PackageableElementExplicitReference,
 } from '@finos/legend-graph';
 import {
-  enumMapping_updateSourceType,
+  enumerationMapping_updateSourceType,
   enumValueMapping_addSourceValue,
   enumValueMapping_deleteSourceValue,
   enumValueMapping_updateSourceValue,
-} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   buildElementOption,
   getPackageableElementOptionFormatter,
@@ -115,7 +115,7 @@ const EnumerationMappingSourceSelectorModal = observer(
     ): void => {
       const value = val?.value;
       if (!value || value instanceof Type) {
-        enumMapping_updateSourceType(
+        enumerationMapping_updateSourceType(
           enumerationMapping,
           value ? PackageableElementExplicitReference.create(value) : undefined,
         );
@@ -149,7 +149,7 @@ const EnumerationMappingSourceSelectorModal = observer(
             options={options}
             onChange={changeSourceType}
             value={selectedSourceType}
-            placeholder={'Choose a data type or an enumeration...'}
+            placeholder="Choose a type..."
             isClearable={true}
             filterOption={filterOption}
             formatOptionLabel={getPackageableElementOptionFormatter({})}
@@ -245,7 +245,7 @@ export const SourceValueInput = observer(
           value={value}
           onChange={onChange}
           onBlur={onBlur}
-          placeholder={`Source value`}
+          placeholder="Source value"
           type={inputType}
         />
         <div className="enumeration-mapping-editor__enum-value__source-value__info">
@@ -259,7 +259,7 @@ export const SourceValueInput = observer(
             disabled={isReadOnly}
             onClick={deleteSourceValue}
             tabIndex={-1}
-            title={'Remove'}
+            title="Remove"
           >
             <TimesIcon />
           </button>
@@ -297,7 +297,7 @@ const EnumValueMappingEditor = observer(
               disabled={isReadOnly}
               onClick={addSourceValue}
               tabIndex={-1}
-              title={'Add enum value'}
+              title="Add enum value"
             >
               <PlusIcon />
             </button>
@@ -368,7 +368,7 @@ export const EnumerationMappingEditor = observer(
     const handleDrop = useCallback(
       (item: MappingElementSourceDropTarget): void => {
         if (!isReadOnly && item.data.packageableElement instanceof Type) {
-          enumMapping_updateSourceType(
+          enumerationMapping_updateSourceType(
             enumerationMapping,
             PackageableElementExplicitReference.create(
               item.data.packageableElement,
@@ -513,7 +513,7 @@ export const EnumerationMappingEditor = observer(
                         onClick={showSourceSelectorModal}
                         disabled={isReadOnly}
                         tabIndex={-1}
-                        title={'Select Source...'}
+                        title="Select a source..."
                       >
                         <PencilIcon />
                       </button>

package/src/components/editor/edit-panel/mapping-editor/FlatDataPropertyMappingEditor.tsx

@@ -46,7 +46,7 @@ import {
   EnumerationMappingExplicitReference,
 } from '@finos/legend-graph';
 import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
-import { flatDataPropertyMapping_setTransformer } from '../../../../stores/graphModifier/STO_FlatData_GraphModifierHelper.js';
+import { flatDataPropertyMapping_setTransformer } from '../../../../stores/shared/modifier/STO_FlatData_GraphModifierHelper.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
@@ -194,13 +194,13 @@ const EnumerationPropertyMappingEditor = observer(
               options={options}
               onChange={handleSelectionChange}
               value={{ value: transformerLabel, label: transformerLabel }}
-              placeholder={`Select an existing enumeration mapping`}
+              placeholder="Select an existing enumeration mapping"
             />
             <button
               className="property-mapping-editor__entry__visit-btn"
               onClick={visit}
               tabIndex={-1}
-              title={'Visit enumeration mapping'}
+              title="Visit enumeration mapping"
             >
               <ArrowCircleRightIcon />
             </button>
@@ -312,7 +312,7 @@ export const FlatDataPropertyMappingEditor = observer(
         //       className="property-mapping-editor__entry--embedded__visit-btn"
         //       onClick={visitEmbeddedPropertyMapping}
         //       tabIndex={-1}
-        //       title={'Create mapping element'}
+        //       title="Create mapping element"
         //     ><ArrowCircleRightIcon /></button>
         //     {`to visit the embedded class mapping for property '${flatDataPropertyMappingState.propertyMapping.property.name}'.`}
         //   </div>

package/src/components/editor/edit-panel/mapping-editor/FlatDataRecordTypeTree.tsx

@@ -112,7 +112,7 @@ const RecordFieldTreeNodeContainer: React.FC<
                   primitiveType && primitiveType === selectedType,
               })}
               tabIndex={-1}
-              title={'Column Type'}
+              title="Column Type"
             >
               {primitiveType?.path ?? 'RecordType'}
             </button>

package/src/components/editor/edit-panel/mapping-editor/InstanceSetImplementationEditor.tsx

@@ -51,7 +51,7 @@ import {
 } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { TypeTree } from '../../../shared/TypeTree.js';
 import { FlatDataRecordTypeTree } from './FlatDataRecordTypeTree.js';
-import { PropertyMappingsEditor } from './PropertyMappingsEditor.js';
+import { PropertyMappingEditor } from './PropertyMappingsEditor.js';
 import { useDrop } from 'react-dnd';
 import { FlatDataInstanceSetImplementationState } from '../../../../stores/editor-state/element-editor-state/mapping/FlatDataInstanceSetImplementationState.js';
 import { MappingElementDecorationCleaner } from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementDecorator.js';
@@ -540,7 +540,7 @@ export const InstanceSetImplementationEditor = observer(
                     {!isReadOnly &&
                       !isUnsupported &&
                       sortedProperties.map((property) => (
-                        <PropertyMappingsEditor
+                        <PropertyMappingEditor
                           key={property.name}
                           property={property}
                           instanceSetImplementationState={
@@ -562,7 +562,7 @@ export const InstanceSetImplementationEditor = observer(
                             ).length,
                         )
                         .map((property) => (
-                          <PropertyMappingsEditor
+                          <PropertyMappingEditor
                             key={property.name}
                             property={property}
                             instanceSetImplementationState={

package/src/components/editor/edit-panel/mapping-editor/InstanceSetImplementationSourceSelectorModal.tsx

@@ -68,34 +68,6 @@ export interface MappingElementSourceSelectOption {
   value: unknown;
 }
 
-const getMappingSourcePackageableElementOptionFormatter = (props: {
-  darkMode?: boolean;
-}): ((option: MappingElementSourceSelectOption) => React.ReactNode) =>
-  function MappingSourceOptionLabel(
-    option: MappingElementSourceSelectOption,
-  ): React.ReactNode {
-    if (option.value instanceof PackageableElement) {
-      return getPackageableElementOptionFormatter(props)(
-        buildElementOption(option.value),
-      );
-    } else if (option.value instanceof TableAlias) {
-      const tableOwner = option.value.relation.ownerReference;
-      return getPackageableElementOptionFormatter(props)(
-        buildElementOption(tableOwner.value),
-      );
-    } else {
-      const className = props.darkMode
-        ? 'packageable-element-format-option-label--dark'
-        : 'packageable-element-format-option-label';
-      return (
-        <div className={className}>
-          <div className="packageable-element-format-option-label-type"></div>
-          <div className={`${className}__name`}>{option.label}</div>
-        </div>
-      );
-    }
-  };
-
 export const getSourceElementLabel = (
   srcElement: unknown | undefined,
 ): string => {
@@ -183,11 +155,21 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
           }),
       )
       .map(buildMappingElementSourceOption);
-    const filterOption = createFilter({
+    const sourceFilterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,
       stringify: getMappingElementSourceFilterText,
     });
+    const formatSourceOptionLabel = (
+      option: MappingElementSourceSelectOption,
+    ): React.ReactNode => {
+      if (option.value instanceof PackageableElement) {
+        return getPackageableElementOptionFormatter({})(
+          buildElementOption(option.value),
+        );
+      }
+      return <div className="mapping-source-option-label">{option.label}</div>;
+    };
     const sourceSelectorRef = useRef<SelectComponent>(null);
     const selectedSourceType = buildMappingElementSourceOption(
       sourceElementToSelect ??
@@ -234,10 +216,8 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
             value={selectedSourceType}
             placeholder={`Select a source...`}
             isClearable={true}
-            filterOption={filterOption}
-            formatOptionLabel={getMappingSourcePackageableElementOptionFormatter(
-              {},
-            )}
+            filterOption={sourceFilterOption}
+            formatOptionLabel={formatSourceOptionLabel}
           />
         </div>
       </Dialog>

package/src/components/editor/edit-panel/mapping-editor/MappingEditor.tsx

@@ -33,10 +33,10 @@ import {
   PURE_EnumerationIcon,
   PURE_AssociationIcon,
   Panel,
+  useResizeDetector,
 } from '@finos/legend-art';
 import { ClassMappingEditor } from './ClassMappingEditor.js';
 import { EnumerationMappingEditor } from './EnumerationMappingEditor.js';
-import { useResizeDetector } from 'react-resize-detector';
 import {
   type MappingEditorTabState,
   type MappingElement,
@@ -329,7 +329,7 @@ export const MappingEditor = observer(() => {
                         className="mapping-editor__header__tab__close-btn"
                         onClick={closeTab(tabState)}
                         tabIndex={-1}
-                        title={'Close'}
+                        title="Close"
                       >
                         <TimesIcon />
                       </button>

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionBuilder.tsx

@@ -80,12 +80,12 @@ import {
   isStubbed_RawLambda,
 } from '@finos/legend-graph';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import { objectInputData_setData } from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
-import { flatData_setData } from '../../../../stores/graphModifier/STO_FlatData_GraphModifierHelper.js';
+import { objectInputData_setData } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
+import { flatData_setData } from '../../../../stores/shared/modifier/STO_FlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
-} from '../../../../stores/graphModifier/STO_Relational_GraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/STO_Relational_GraphModifierHelper.js';
 import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 import type { QueryBuilderState } from '@finos/legend-query-builder';
 
@@ -153,7 +153,7 @@ export const ClassMappingSelectorModal = observer(
             options={classMappingOptions}
             onChange={changeClassMappingOption}
             value={null}
-            placeholder={'Choose a class mapping...'}
+            placeholder="Choose a class mapping..."
             filterOption={filterOption}
             isClearable={true}
           />
@@ -376,7 +376,7 @@ const MappingExecutionQueryEditor = observer(
               className="panel__header__action"
               tabIndex={-1}
               onClick={clearQuery}
-              title={'Clear query'}
+              title="Clear query"
             >
               <TimesIcon />
             </button>
@@ -681,7 +681,7 @@ export const MappingExecutionInputDataBuilder = observer(
               className="panel__header__action"
               tabIndex={-1}
               onClick={showClassMappingSelectorModal}
-              title={'Regenerate...'}
+              title="Regenerate..."
             >
               <RefreshIcon className="mapping-execution-builder__icon--refresh" />
             </button>
@@ -689,7 +689,7 @@ export const MappingExecutionInputDataBuilder = observer(
               className="panel__header__action"
               tabIndex={-1}
               onClick={clearInputData}
-              title={'Clear input data'}
+              title="Clear input data"
             >
               <TimesIcon />
             </button>

package/src/components/editor/edit-panel/mapping-editor/MappingExplorer.tsx

@@ -68,7 +68,7 @@ import {
   PureInstanceSetImplementationFilterState,
   PureInstanceSetImplementationState,
 } from '../../../../stores/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
-import { pureInstanceSetImpl_setMappingFilter } from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
+import { pureInstanceSetImpl_setMappingFilter } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 
 export const MappingExplorerContextMenu = observer(
   forwardRef<
@@ -524,7 +524,7 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
               onClick={openNewMapingModal}
               disabled={isReadOnly}
               tabIndex={-1}
-              title={'Create new mapping element'}
+              title="Create new mapping element"
             >
               <PlusIcon />
             </button>

package/src/components/editor/edit-panel/mapping-editor/MappingTestEditor.tsx

@@ -87,11 +87,11 @@ import {
   DEPRECATED__validate_MappingTestAssert,
 } from '@finos/legend-graph';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import { flatData_setData } from '../../../../stores/graphModifier/STO_FlatData_GraphModifierHelper.js';
+import { flatData_setData } from '../../../../stores/shared/modifier/STO_FlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
-} from '../../../../stores/graphModifier/STO_Relational_GraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/STO_Relational_GraphModifierHelper.js';
 import type { QueryBuilderState } from '@finos/legend-query-builder';
 import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 
@@ -267,7 +267,7 @@ const MappingTestQueryEditor = observer(
               tabIndex={-1}
               disabled={isReadOnly}
               onClick={clearQuery}
-              title={'Clear query'}
+              title="Clear query"
             >
               <TimesIcon />
             </button>
@@ -520,7 +520,7 @@ export const MappingTestInputDataBuilder = observer(
               tabIndex={-1}
               disabled={isReadOnly}
               onClick={showClassMappingSelectorModal}
-              title={'Regenerate...'}
+              title="Regenerate..."
             >
               <RefreshIcon className="mapping-test-editor__icon--refresh" />
             </button>
@@ -578,7 +578,7 @@ export const MappingTestExpectedOutputAssertionBuilder = observer(
               disabled={testState.isExecutingTest || isReadOnly}
               onClick={regenerateExpectedResult}
               tabIndex={-1}
-              title={'Regenerate Result'}
+              title="Regenerate Result"
             >
               <RefreshIcon className="mapping-test-editor__icon__regenerate-result" />
             </button>
@@ -587,7 +587,7 @@ export const MappingTestExpectedOutputAssertionBuilder = observer(
               disabled={isReadOnly}
               tabIndex={-1}
               onClick={formatExpectedResultJSONString}
-              title={'Format JSON'}
+              title="Format JSON"
             >
               <WrenchIcon />
             </button>

package/src/components/editor/edit-panel/mapping-editor/OperationSetImplementationEditor.tsx

@@ -57,7 +57,7 @@ import {
   operationMapping_addParameter,
   operationMapping_changeParameter,
   operationMapping_deleteParameter,
-} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 
 interface SetImplementationOption {
   value: SetImplementation;
@@ -211,7 +211,7 @@ export const OperationSetImplementationEditor = observer(
                 }
                 onClick={addParameter}
                 tabIndex={-1}
-                title={'Add parameter'}
+                title="Add parameter"
               >
                 <PlusIcon />
               </button>
@@ -237,14 +237,14 @@ export const OperationSetImplementationEditor = observer(
                         value: param,
                         label: param.setImplementation.value.id.value,
                       }}
-                      placeholder={`Select parameter ID`}
+                      placeholder="Select parameter ID"
                     />
                   </div>
                   <button
                     className="operation-mapping-editor__parameter__visit-btn"
                     onClick={visit(param)}
                     tabIndex={-1}
-                    title={'Visit mapping element'}
+                    title="Visit mapping element"
                   >
                     <ArrowCircleRightIcon />
                   </button>
@@ -254,7 +254,7 @@ export const OperationSetImplementationEditor = observer(
                       disabled={isReadOnly}
                       onClick={deleteParameter(param)}
                       tabIndex={-1}
-                      title={'Remove'}
+                      title="Remove"
                     >
                       <TimesIcon />
                     </button>