@finos/legend-application-studio 28.21.32 → 28.21.34

package/src/components/editor/editor-group/dataProduct/DataProductEditor.tsx

@@ -86,7 +86,6 @@ import {
   type ChangeEventHandler,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -114,15 +113,12 @@ import { DataProductTestableEditor } from './testable/DataProductTestableEditor.
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
 import {
-  type DataProductElement,
-  type DataProductElementScope,
   type Expertise,
   type GraphManagerState,
   type LakehouseAccessPoint,
   type Mapping,
   type PackageableElement,
   type DataProduct,
-  type DataProductDiagram,
   DataProductEmbeddedImageIcon,
   DataProductLibraryIcon,
   Email,
@@ -174,8 +170,6 @@ import {
   dataProduct_setOperationalMetadataIfAbsent,
   operationalMetadata_deleteCoverageRegion,
   operationalMetadata_addCoverageRegion,
-  dataProductDiagram_setTitle,
-  dataProductDiagram_setDescription,
   operationalMetadata_setUpdateFrequency,
   dataProduct_setOwner,
   appDirOwner_setProduction,
@@ -1383,277 +1377,6 @@ const AccessPointGroupPublicToggle = observer(
   },
 );
 
-export const CompatibleDiagramsEditor = observer(
-  (props: { groupState: ModelAccessPointGroupState }) => {
-    const { groupState } = props;
-    const group = groupState.value;
-
-    const handleDiagramTitleChange = (
-      diagram: DataProductDiagram,
-      value: string | undefined,
-    ): void => {
-      dataProductDiagram_setTitle(diagram, value ?? '');
-    };
-
-    const handleDiagramDescriptionChange = (
-      diagram: DataProductDiagram,
-      value: string | undefined,
-    ): void => {
-      dataProductDiagram_setDescription(diagram, value);
-    };
-
-    const handleAddDiagram = (option: {
-      label: string;
-      value: PackageableElement;
-    }): void => {
-      groupState.addDiagram(option);
-    };
-
-    const handleRemoveDiagram = (diagram: DataProductDiagram): void => {
-      groupState.handleRemoveDiagram(diagram);
-    };
-
-    // ListEditor component renderers
-    const DiagramComponent = observer(
-      (diagramComponentProps: {
-        item: DataProductDiagram;
-      }): React.ReactElement => {
-        const { item } = diagramComponentProps;
-
-        return (
-          <>
-            <div className="panel__content__form__section__list__item__content">
-              <div className="panel__content__form__section__header__label">
-                Diagram
-              </div>
-              <div className="panel__content__form__section__list__item__content__title">
-                {item.diagram.name}
-              </div>
-            </div>
-            <div className="panel__content__form__section__list__item__form">
-              <PanelFormTextField
-                name="Title"
-                value={item.title}
-                update={(value) => handleDiagramTitleChange(item, value)}
-                placeholder="Enter title"
-                className="dataSpace-editor__general__diagrams__title"
-              />
-              <PanelFormTextField
-                name="Description"
-                value={item.description ?? ''}
-                update={(value) => handleDiagramDescriptionChange(item, value)}
-                placeholder="Enter description"
-                className="dataSpace-editor__general__diagrams__description"
-              />
-            </div>
-          </>
-        );
-      },
-    );
-
-    const hasMappingSet = group.mapping.value.path !== '';
-    const noDiagramsInProject =
-      groupState.getCompatibleDiagramOptions().length === 0 &&
-      group.diagrams.length === 0;
-    const [isGenerating, setIsGenerating] = useState(false);
-    const [isAddingDiagram, setIsAddingDiagram] = useState(false);
-
-    const handleGenerateFromMapping = (): void => {
-      setIsGenerating(true);
-      flowResult(groupState.generateDiagramFromMapping())
-        .catch(
-          groupState.state.editorStore.applicationStore.alertUnhandledError,
-        )
-        .finally(() => setIsGenerating(false));
-    };
-
-    const NewDiagramComponent = observer(
-      (newDiagramProps: {
-        onFinishEditing: () => void;
-      }): React.ReactElement => {
-        const { onFinishEditing } = newDiagramProps;
-
-        useLayoutEffect(() => {
-          setIsAddingDiagram(true);
-          return () => setIsAddingDiagram(false);
-        }, []);
-
-        return (
-          <>
-            <div className="panel__content__form__section__list__new-item__input">
-              <CustomSelectorInput
-                options={groupState.getCompatibleDiagramOptions()}
-                onChange={(event: {
-                  label: string;
-                  value: PackageableElement;
-                }) => {
-                  onFinishEditing();
-                  handleAddDiagram(event);
-                }}
-                placeholder="Select a diagram to add..."
-                darkMode={
-                  !groupState.state.editorStore.applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-              />
-            </div>
-            {noDiagramsInProject &&
-              hasMappingSet &&
-              !groupState.state.isReadOnly && (
-                <button
-                  className="panel__content__form__section__list__new-item__cancel-btn btn btn--dark"
-                  disabled={isGenerating}
-                  onClick={() => {
-                    onFinishEditing();
-                    handleGenerateFromMapping();
-                  }}
-                  title="Auto-generate a diagram from the mapping"
-                  tabIndex={-1}
-                >
-                  {isGenerating ? 'Generating...' : 'Generate from Mapping'}
-                </button>
-              )}
-          </>
-        );
-      },
-    );
-
-    return (
-      <div className="data-product-editor__diagrams-section">
-        <ListEditor
-          title="Diagrams"
-          prompt="Add diagrams to include in this Data Product. Diagrams are required to showcase and explain your curated data models"
-          items={group.diagrams}
-          keySelector={(element: DataProductDiagram) => element.diagram.name}
-          ItemComponent={DiagramComponent}
-          NewItemComponent={NewDiagramComponent}
-          handleRemoveItem={handleRemoveDiagram}
-          isReadOnly={groupState.state.isReadOnly}
-          emptyMessage="⚠ No Diagrams specified. Add at least one diagram to this Data Product."
-          emptyClassName="data-product-editor__empty-diagram"
-        />
-        {noDiagramsInProject &&
-          !isAddingDiagram &&
-          hasMappingSet &&
-          !groupState.state.isReadOnly && (
-            <div className="data-product-editor__generate-diagram-btn">
-              <button
-                className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                disabled={isGenerating}
-                onClick={handleGenerateFromMapping}
-                title="Generate a Diagram from the Mapping"
-                tabIndex={-1}
-              >
-                {isGenerating ? 'Generating...' : 'Generate from Mapping'}
-              </button>
-            </div>
-          )}
-      </div>
-    );
-  },
-);
-
-export const FeaturedElementsEditor = observer(
-  (props: { groupState: ModelAccessPointGroupState; isReadOnly: boolean }) => {
-    const { groupState, isReadOnly } = props;
-    const group = groupState.value;
-
-    // Event handlers
-    const handleAddElement = (option: {
-      label: string;
-      value: DataProductElement;
-    }): void => {
-      if (typeof option.value === 'object') {
-        groupState.addFeaturedElement(option.value);
-      }
-    };
-
-    const handleRemoveElement = (element: DataProductElementScope): void => {
-      groupState.removeFeaturedElement(element);
-    };
-
-    const handleElementExcludeChange = (
-      element: DataProductElementScope,
-      event: React.ChangeEvent<HTMLInputElement>,
-    ): void => {
-      groupState.excludeFeaturedElement(element, event.target.checked);
-    };
-
-    // ListEditor component renderers
-    const ElementComponent = observer(
-      (elementComponentProps: {
-        item: DataProductElementScope;
-      }): React.ReactElement => {
-        const { item } = elementComponentProps;
-
-        return (
-          <div className="data-product-editor__element-item">
-            <div className="panel__content__form__section__list__item__content__label">
-              {item.element.value.path}
-            </div>
-            <div className="panel__content__form__section__list__item__content__actions">
-              <div className="panel__content__form__section__list__item__content__actions-exclude">
-                <Checkbox
-                  disabled={isReadOnly}
-                  checked={item.exclude ?? false}
-                  onChange={(event) => handleElementExcludeChange(item, event)}
-                  size="small"
-                  className="panel__content__form__section__list__item__content__actions-exclude__btn"
-                />
-                <span className="panel__content__form__section__list__item__content__actions__label">
-                  Exclude
-                </span>
-              </div>
-            </div>
-          </div>
-        );
-      },
-    );
-
-    const NewElementComponent = observer(
-      (newElementProps: { onFinishEditing: () => void }) => {
-        const { onFinishEditing } = newElementProps;
-
-        return (
-          <div className="panel__content__form__section__list__new-item__input">
-            <CustomSelectorInput
-              options={groupState.getFeaturedElementOptions()}
-              onChange={(event: {
-                label: string;
-                value: DataProductElement;
-              }) => {
-                onFinishEditing();
-                handleAddElement(event);
-              }}
-              placeholder="Select an element to add..."
-              darkMode={
-                !groupState.state.editorStore.applicationStore.layoutService
-                  .TEMPORARY__isLightColorThemeEnabled
-              }
-            />
-          </div>
-        );
-      },
-    );
-
-    return (
-      <ListEditor
-        title="Featured Elements"
-        prompt="Add classes and associations to display under Models Documentation. Use the exclude checkbox to exclude certain elements from this Data Product entirely."
-        items={group.featuredElements}
-        keySelector={(element: DataProductElementScope) =>
-          element.element.value.path
-        }
-        ItemComponent={ElementComponent}
-        NewItemComponent={NewElementComponent}
-        handleRemoveItem={handleRemoveElement}
-        isReadOnly={isReadOnly}
-        emptyMessage="No elements specified"
-      />
-    );
-  },
-);
-
 const ModelAccessPointGroupEditor = observer(
   (props: { groupState: ModelAccessPointGroupState; isReadOnly: boolean }) => {
     const { groupState, isReadOnly } = props;
@@ -1718,11 +1441,6 @@ const ModelAccessPointGroupEditor = observer(
             <LongArrowRightIcon />
           </button>
         </div>
-        <FeaturedElementsEditor
-          groupState={groupState}
-          isReadOnly={isReadOnly}
-        />
-        <CompatibleDiagramsEditor groupState={groupState} />
       </div>
     );
   },

package/src/stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.ts

@@ -18,7 +18,6 @@ import {
   type AppDirNode,
   type ArtifactGenerationExtensionResult,
   type BatchLambdasRelationTypeResult,
-  type DataProductElement,
   type IngestDefinition,
   type Mapping,
   type PackageableElement,
@@ -33,15 +32,10 @@ import {
   AccessPoint,
   AccessPointGroup,
   AppDirOwner,
-  Association,
-  Class,
   CodeCompletionResult,
   DataElement,
   DataElementReference,
   DataProduct,
-  DataProductDiagram,
-  DataProductElementScope,
-  Enumeration,
   Expertise,
   getStereotype,
   GRAPH_MANAGER_EVENT,
@@ -50,11 +44,8 @@ import {
   LakehouseTargetEnv,
   LAMBDA_PIPE,
   ModelAccessPointGroup,
-  observe_DataProductDiagram,
-  observe_DataProductElementScope,
   observe_RelationElement,
   observe_RelationElementsData,
-  Package,
   PackageableElementExplicitReference,
   ParserError,
   RelationElement,
@@ -97,11 +88,6 @@ import {
   dataProduct_deleteAccessPointGroup,
   dataProduct_setSupportInfoIfAbsent,
   dataProduct_swapAccessPointGroups,
-  modelAccessPointGroup_addDiagram,
-  modelAccessPointGroup_addElement,
-  modelAccessPointGroup_removeDiagram,
-  modelAccessPointGroup_removeElement,
-  modelAccessPointGroup_setElementExclude,
   modelAccessPointGroup_setMapping,
   supportInfo_addExpertise,
 } from '../../../../graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
@@ -116,9 +102,7 @@ import type {
   AdhocDataProductDeployResponse,
   LakehouseIngestionManager,
 } from '@finos/legend-server-lakehouse';
-import { Diagram } from '@finos/legend-extension-dsl-diagram';
 import { LegendStudioTelemetryHelper } from '../../../../../__lib__/LegendStudioTelemetryHelper.js';
-import { onGeneratingDiagramFromMapping } from '../mapping/MappingEditorState.js';
 
 export enum DATA_PRODUCT_TAB {
   HOME = 'Home',
@@ -764,16 +748,11 @@ export class AccessPointGroupState {
 export class ModelAccessPointGroupState extends AccessPointGroupState {
   declare value: ModelAccessPointGroup;
   readonly editorState: DataProductEditorState;
-  showNewModal = false;
 
   constructor(val: ModelAccessPointGroup, editorState: DataProductEditorState) {
     super(val, editorState);
     this.value = val;
     this.editorState = editorState;
-
-    makeObservable(this, {
-      generateDiagramFromMapping: flow,
-    });
   }
 
   override hasErrors(): boolean {
@@ -781,8 +760,7 @@ export class ModelAccessPointGroupState extends AccessPointGroupState {
       this.value.id === '' ||
       !this.value.description ||
       !this.value.title ||
-      this.value.mapping.value.path === '' ||
-      this.value.diagrams.length === 0
+      this.value.mapping.value.path === ''
     );
   }
 
@@ -792,145 +770,6 @@ export class ModelAccessPointGroupState extends AccessPointGroupState {
       PackageableElementExplicitReference.create(mapping),
     );
   }
-
-  getCompatibleDiagramOptions(): {
-    label: string;
-    value: PackageableElement;
-  }[] {
-    const currentDiagrams = this.value.diagrams.map(
-      (diagram) => diagram.diagram,
-    );
-
-    return this.state.editorStore.graphManagerState.graph.allOwnElements
-      .filter((element): element is Diagram => element instanceof Diagram)
-      .filter((diagram) => !currentDiagrams.includes(diagram))
-      .map((diagram) => ({
-        label: diagram.path,
-        value: diagram,
-      }));
-  }
-
-  collectFeaturedClasses = (
-    element: PackageableElement,
-    excludedPaths: string[],
-    elements: Set<Class>,
-  ): void => {
-    if (excludedPaths.includes(element.path)) {
-      return;
-    }
-    if (element instanceof Class) {
-      elements.add(element);
-    } else if (element instanceof Package) {
-      this.collectClassesFromPackage(element, excludedPaths, elements);
-    }
-  };
-
-  collectClassesFromPackage = (
-    element: Package,
-    excludedPaths: string[],
-    elements: Set<Class>,
-  ): void => {
-    element.children.forEach((child) => {
-      if (excludedPaths.includes(child.path)) {
-        return;
-      }
-      if (child instanceof Class) {
-        elements.add(child);
-      } else if (child instanceof Package) {
-        this.collectClassesFromPackage(child, excludedPaths, elements);
-      }
-    });
-  };
-
-  addDiagram = (option: { label: string; value: PackageableElement }): void => {
-    const diagramValue = option.value;
-    const newDiagram = observe_DataProductDiagram(new DataProductDiagram());
-    newDiagram.title = diagramValue.name;
-    newDiagram.diagram = diagramValue;
-    modelAccessPointGroup_addDiagram(this.value, newDiagram);
-  };
-
-  handleRemoveDiagram = (diagram: DataProductDiagram): void => {
-    modelAccessPointGroup_removeDiagram(this.value, diagram);
-  };
-
-  *generateDiagramFromMapping(): GeneratorFn<void> {
-    const mapping = this.value.mapping.value;
-    if (mapping.path === '') {
-      return;
-    }
-    let featuredClasses: Class[] | undefined = undefined;
-    if (this.value.featuredElements.length > 0) {
-      const includes = this.value.featuredElements
-        .filter((el) => el.exclude === undefined || el.exclude === false)
-        .map((el) => el.element.value);
-      const excludedPaths = this.value.featuredElements
-        .filter((el) => el.exclude !== undefined && el.exclude === true)
-        .map((el) => el.element.value.path);
-      const elements = new Set<Class>();
-      includes.forEach((element) => {
-        this.collectFeaturedClasses(element, excludedPaths, elements);
-      });
-      featuredClasses = Array.from(elements);
-    }
-    const diagram = (yield flowResult(
-      onGeneratingDiagramFromMapping(
-        mapping,
-        this.state.editorStore,
-        featuredClasses,
-      ),
-    )) as Diagram | undefined;
-    if (diagram) {
-      const newDiagram = observe_DataProductDiagram(new DataProductDiagram());
-      newDiagram.title = diagram.name;
-      newDiagram.diagram = diagram;
-      modelAccessPointGroup_addDiagram(this.value, newDiagram);
-    }
-  }
-
-  addFeaturedElement(element: DataProductElement): void {
-    const elementPointer = observe_DataProductElementScope(
-      new DataProductElementScope(),
-    );
-    elementPointer.element =
-      PackageableElementExplicitReference.create(element);
-    modelAccessPointGroup_addElement(this.value, elementPointer);
-  }
-
-  removeFeaturedElement(element: DataProductElementScope): void {
-    modelAccessPointGroup_removeElement(this.value, element);
-  }
-
-  excludeFeaturedElement(
-    element: DataProductElementScope,
-    value: boolean,
-  ): void {
-    modelAccessPointGroup_setElementExclude(element, value);
-  }
-
-  isValidDataProductElement(
-    element: PackageableElement,
-  ): element is DataProductElement {
-    return (
-      element instanceof Package ||
-      element instanceof Class ||
-      element instanceof Enumeration ||
-      element instanceof Association
-    );
-  }
-
-  getFeaturedElementOptions(): { label: string; value: DataProductElement }[] {
-    const currentElements = this.value.featuredElements.map(
-      (elementPointer) => elementPointer.element.value,
-    );
-    return this.state.editorStore.graphManagerState.graph.allOwnElements
-      .filter((element) => this.isValidDataProductElement(element))
-      .filter((element) => !currentElements.includes(element))
-      .map((element) => ({
-        label: element.path,
-        value: element,
-      }));
-  }
 }
 
 const createEditorInitialConfiguration = (): EditorInitialConfiguration => {

package/src/stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.ts

@@ -32,8 +32,6 @@ import {
   type PackageableElementReference,
   type Mapping,
   type ModelAccessPointGroup,
-  type DataProductDiagram,
-  type DataProductElementScope,
   observe_APG,
   type DataProductType,
   type ExternalDataProductType,
@@ -113,48 +111,6 @@ export const modelAccessPointGroup_setMapping = action(
   },
 );
 
-export const modelAccessPointGroup_addElement = action(
-  (group: ModelAccessPointGroup, element: DataProductElementScope): void => {
-    addUniqueEntry(group.featuredElements, element);
-  },
-);
-
-export const modelAccessPointGroup_removeElement = action(
-  (group: ModelAccessPointGroup, element: DataProductElementScope): void => {
-    deleteEntry(group.featuredElements, element);
-  },
-);
-
-export const modelAccessPointGroup_setElementExclude = action(
-  (element: DataProductElementScope, exclude: boolean): void => {
-    element.exclude = exclude;
-  },
-);
-
-export const modelAccessPointGroup_addDiagram = action(
-  (group: ModelAccessPointGroup, diagram: DataProductDiagram): void => {
-    addUniqueEntry(group.diagrams, diagram);
-  },
-);
-
-export const modelAccessPointGroup_removeDiagram = action(
-  (group: ModelAccessPointGroup, diagram: DataProductDiagram): void => {
-    deleteEntry(group.diagrams, diagram);
-  },
-);
-
-export const dataProductDiagram_setTitle = action(
-  (diagram: DataProductDiagram, title: string): void => {
-    diagram.title = title;
-  },
-);
-
-export const dataProductDiagram_setDescription = action(
-  (diagram: DataProductDiagram, desc: string | undefined): void => {
-    diagram.description = desc;
-  },
-);
-
 export const runtimeInfo_setId = action(
   (runtimeInfo: DataProductRuntimeInfo, id: string): void => {
     runtimeInfo.id = id;