[3429] Add diagram filter view in diagram panel

Bug: #3429
Signed-off-by: Gwendal Daniel <[email protected]>

CHANGELOG.adoc

@@ -69,6 +69,10 @@ More existing APIs will be migrated to this new common pattern.
 - https://github.com/eclipse-sirius/sirius-web/issues/3553[#3553] [core] Add RepresentationFactory extension point
 - https://github.com/eclipse-sirius/sirius-web/issues/3587[#3587] [sirius-web] Add an extension point to contribute new project cards
 - https://github.com/eclipse-sirius/sirius-web/issues/3614[#3614] [core] Add the ability to contribute additional payloads to representation subscriptions
+- https://github.com/eclipse-sirius/sirius-web/issues/3429[#3429] [diagram] Add a diagram filter dialog in the diagram panel.
+This dialog presents diagram elements in a tree and allows to select them and update their visibility and status (e.g. hide, show, collapse).
++
+image:doc/screenshots/diagramFilterView.png[Diagram Filter View, 70%]
 
 === Improvements
 

packages/diagrams/backend/sirius-components-collaborative-diagrams/src/main/java/org/eclipse/sirius/components/collaborative/diagrams/api/DiagramImageConstants.java

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -31,6 +31,14 @@ public final class DiagramImageConstants {
 
     public static final String GRAPHICAL_DELETE_SVG = IMAGES_ROOT_FOLDER + "/graphicalDelete.svg";
 
+    public static final String PIN_SVG = IMAGES_ROOT_FOLDER + "/pin.svg";
+
+    public static final String UNPIN_SVG = IMAGES_ROOT_FOLDER + "/unpin.svg";
+
+    public static final String FADE_SVG = IMAGES_ROOT_FOLDER + "/fade.svg";
+
+    public static final String REVEAL_FADED_ELEMENTS_SVG = IMAGES_ROOT_FOLDER + "/reveal-faded-elements.svg";
+
     private DiagramImageConstants() {
         // Prevent instantiation
     }

packages/diagrams/backend/sirius-components-diagrams-tests/src/main/java/org/eclipse/sirius/components/diagrams/tests/graphql/FadeDiagramElementMutationRunner.java

@@ -0,0 +1,48 @@
+/*******************************************************************************
+ * Copyright (c) 2024, 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+package org.eclipse.sirius.components.diagrams.tests.graphql;
+
+import java.util.Objects;
+
+import org.eclipse.sirius.components.collaborative.diagrams.dto.FadeDiagramElementInput;
+import org.eclipse.sirius.components.graphql.tests.api.IGraphQLRequestor;
+import org.eclipse.sirius.components.graphql.tests.api.IMutationRunner;
+import org.springframework.stereotype.Service;
+
+/**
+ * Used to fade or reveal faded elements with the GraphQL API.
+ *
+ * @author sbegaudeau
+ */
+@Service
+public class FadeDiagramElementMutationRunner implements IMutationRunner<FadeDiagramElementInput> {
+
+    private static final String FADE_DIAGRAM_ELEMENT_MUTATION = """
+            mutation fadeDiagramElement($input: FadeDiagramElementInput!) {
+              fadeDiagramElement(input: $input) {
+                __typename
+              }
+            }
+            """;
+
+    private final IGraphQLRequestor graphQLRequestor;
+
+    public FadeDiagramElementMutationRunner(IGraphQLRequestor graphQLRequestor) {
+        this.graphQLRequestor = Objects.requireNonNull(graphQLRequestor);
+    }
+
+    @Override
+    public String run(FadeDiagramElementInput input) {
+        return this.graphQLRequestor.execute(FADE_DIAGRAM_ELEMENT_MUTATION, input);
+    }
+}

packages/diagrams/backend/sirius-components-diagrams-tests/src/main/java/org/eclipse/sirius/components/diagrams/tests/graphql/HideDiagramElementMutationRunner.java

@@ -0,0 +1,48 @@
+/*******************************************************************************
+ * Copyright (c) 2024, 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+package org.eclipse.sirius.components.diagrams.tests.graphql;
+
+import java.util.Objects;
+
+import org.eclipse.sirius.components.collaborative.diagrams.dto.HideDiagramElementInput;
+import org.eclipse.sirius.components.graphql.tests.api.IGraphQLRequestor;
+import org.eclipse.sirius.components.graphql.tests.api.IMutationRunner;
+import org.springframework.stereotype.Service;
+
+/**
+ * Used to hide or show faded elements with the GraphQL API.
+ *
+ * @author sbegaudeau
+ */
+@Service
+public class HideDiagramElementMutationRunner implements IMutationRunner<HideDiagramElementInput> {
+
+    private static final String HIDE_DIAGRAM_ELEMENT_MUTATION = """
+            mutation hideDiagramElement($input: HideDiagramElementInput!) {
+              hideDiagramElement(input: $input) {
+                __typename
+              }
+            }
+            """;
+
+    private final IGraphQLRequestor graphQLRequestor;
+
+    public HideDiagramElementMutationRunner(IGraphQLRequestor graphQLRequestor) {
+        this.graphQLRequestor = Objects.requireNonNull(graphQLRequestor);
+    }
+
+    @Override
+    public String run(HideDiagramElementInput input) {
+        return this.graphQLRequestor.execute(HIDE_DIAGRAM_ELEMENT_MUTATION, input);
+    }
+}

packages/diagrams/backend/sirius-components-diagrams-tests/src/main/java/org/eclipse/sirius/components/diagrams/tests/graphql/PinDiagramElementMutationRunner.java

@@ -0,0 +1,46 @@
+/*******************************************************************************
+ * Copyright (c) 2024, 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+package org.eclipse.sirius.components.diagrams.tests.graphql;
+
+import org.eclipse.sirius.components.collaborative.diagrams.dto.PinDiagramElementInput;
+import org.eclipse.sirius.components.graphql.tests.api.IGraphQLRequestor;
+import org.eclipse.sirius.components.graphql.tests.api.IMutationRunner;
+import org.springframework.stereotype.Service;
+
+/**
+ * Used to pin or unpin elements with the GraphQL API.
+ *
+ * @author sbegaudeau
+ */
+@Service
+public class PinDiagramElementMutationRunner implements IMutationRunner<PinDiagramElementInput> {
+
+    private static final String PIN_DIAGRAM_ELEMENT_MUTATION = """
+            mutation pinDiagramElement($input: PinDiagramElementInput!) {
+              pinDiagramElement(input: $input) {
+                __typename
+              }
+            }
+            """;
+
+    private final IGraphQLRequestor graphQLRequestor;
+
+    public PinDiagramElementMutationRunner(IGraphQLRequestor graphQLRequestor) {
+        this.graphQLRequestor = graphQLRequestor;
+    }
+
+    @Override
+    public String run(PinDiagramElementInput input) {
+        return this.graphQLRequestor.execute(PIN_DIAGRAM_ELEMENT_MUTATION, input);
+    }
+}

packages/diagrams/backend/sirius-components-diagrams-tests/src/main/java/org/eclipse/sirius/components/diagrams/tests/navigation/DiagramNavigator.java

@@ -41,6 +41,14 @@ public NodeNavigator nodeWithLabel(String label) {
         return new NodeNavigator(nodes.get(0), this.cache);
     }
 
+    public NodeNavigator nodeWithId(String id) {
+        Node node = this.cache.getIdToNode().get(id);
+        if (node == null) {
+            throw new IllegalArgumentException(MessageFormat.format("No node found with id \"{0}\"", id));
+        }
+        return new NodeNavigator(node, this.cache);
+    }
+
     public NodeNavigator nodeWithTargetObjectLabel(String targetObjectLabel) {
         List<Node> nodes = this.cache.getTargetObjectLabelToNodes().get(targetObjectLabel);
         if (nodes == null || nodes.isEmpty()) {

packages/diagrams/frontend/sirius-components-diagrams/src/index.ts

@@ -52,5 +52,7 @@ export type { DiagramPaletteToolContextValue } from './renderer/palette/DiagramP
 export { DiagramPaletteToolContext } from './renderer/palette/DiagramPaletteToolContext';
 export { DiagramPaletteToolContribution } from './renderer/palette/DiagramPaletteToolContribution';
 export type { DiagramPaletteToolContributionComponentProps } from './renderer/palette/DiagramPaletteToolContribution.types';
+export type { DiagramPanelActionProps } from './renderer/panel/DiagramPanel.types';
+export { diagramPanelActionExtensionPoint } from './renderer/panel/DiagramPanelExtensionPoints';
 export { DiagramRepresentation } from './representation/DiagramRepresentation';
 export type { GQLDiagramDescription } from './representation/DiagramRepresentation.types';

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanel.tsx

@@ -11,9 +11,9 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { ShareRepresentationModal } from '@eclipse-sirius/sirius-components-core';
-import IconButton from '@material-ui/core/IconButton';
+import { ComponentExtension, ShareRepresentationModal, useComponents } from '@eclipse-sirius/sirius-components-core';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
 import Tooltip from '@material-ui/core/Tooltip';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
@@ -41,7 +41,8 @@ import { useFullscreen } from '../fullscreen/useFullscreen';
 import { useHideDiagramElements } from '../hide/useHideDiagramElements';
 import { useArrangeAll } from '../layout/useArrangeAll';
 import { usePinDiagramElements } from '../pin/usePinDiagramElements';
-import { DiagramPanelProps, DiagramPanelState } from './DiagramPanel.types';
+import { DiagramPanelActionProps, DiagramPanelProps, DiagramPanelState } from './DiagramPanel.types';
+import { diagramPanelActionExtensionPoint } from './DiagramPanelExtensionPoints';
 import { useExportToImage } from './useExportToImage';
 
 export const DiagramPanel = memo(
@@ -53,6 +54,9 @@ export const DiagramPanel = memo(
     });
 
     const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
+    const diagramPanelActionComponents: ComponentExtension<DiagramPanelActionProps>[] = useComponents(
+      diagramPanelActionExtensionPoint
+    );
 
     const { getNodes, getEdges, zoomIn, zoomOut, fitView } = useReactFlow<NodeData, EdgeData>();
 
@@ -226,6 +230,9 @@ export const DiagramPanel = memo(
                 <UnpinIcon />
               </IconButton>
             </Tooltip>
+            {diagramPanelActionComponents.map(({ Component: DiagramPanelActionComponent }, index) => (
+              <DiagramPanelActionComponent editingContextId={editingContextId} diagramId={diagramId} key={index} />
+            ))}
           </Paper>
         </Panel>
         {state.dialogOpen === 'Share' ? (

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanel.types.ts

@@ -26,3 +26,8 @@ export interface DiagramPanelState {
 }
 
 export type DiagramPanelDialog = 'Share';
+
+export interface DiagramPanelActionProps {
+  editingContextId: string;
+  diagramId: string;
+}

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanelExtensionPoints.ts

@@ -0,0 +1,20 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { ComponentExtensionPoint } from '@eclipse-sirius/sirius-components-core';
+import { DiagramPanelActionProps } from './DiagramPanel.types';
+
+export const diagramPanelActionExtensionPoint: ComponentExtensionPoint<DiagramPanelActionProps> = {
+  identifier: 'diagramPanel#action',
+  FallbackComponent: () => null,
+};

packages/forms/backend/sirius-components-forms-tests/src/main/java/org/eclipse/sirius/components/forms/tests/graphql/EditTreeCheckboxMutationRunner.java

@@ -0,0 +1,61 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+package org.eclipse.sirius.components.forms.tests.graphql;
+
+import java.util.Objects;
+
+import org.eclipse.sirius.components.collaborative.forms.dto.EditTreeCheckboxInput;
+import org.eclipse.sirius.components.graphql.tests.api.IGraphQLRequestor;
+import org.eclipse.sirius.components.graphql.tests.api.IMutationRunner;
+import org.springframework.stereotype.Service;
+
+/**
+ * Used to edit a tree checkbox with the GraphQL API.
+ *
+ * @author gdaniel
+ */
+@Service
+public class EditTreeCheckboxMutationRunner implements IMutationRunner<EditTreeCheckboxInput> {
+
+    private static final String EDIT_TREE_CHECKBOX_MUTATION = """
+            mutation editTreeCheckbox($input: EditTreeCheckboxInput!) {
+                editTreeCheckbox(input: $input) {
+                  __typename
+                  ... on ErrorPayload {
+                    messages {
+                      body
+                      level
+                    }
+                  }
+                  ... on SuccessPayload {
+                    messages {
+                      body
+                      level
+                    }
+                  }
+                }
+              }
+            """;
+
+    private final IGraphQLRequestor graphQLRequestor;
+
+    public EditTreeCheckboxMutationRunner(IGraphQLRequestor graphQLRequestor) {
+        this.graphQLRequestor = Objects.requireNonNull(graphQLRequestor);
+    }
+
+    @Override
+    public String run(EditTreeCheckboxInput input) {
+        return this.graphQLRequestor.execute(EDIT_TREE_CHECKBOX_MUTATION, input);
+    }
+
+}