[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/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);
+    }
+
+}

packages/forms/backend/sirius-components-forms-tests/src/main/java/org/eclipse/sirius/components/forms/tests/graphql/PushButtonMutationRunner.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.PushButtonInput;
+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 push a button with the GraphQL API.
+ *
+ * @author gdaniel
+ */
+@Service
+public class PushButtonMutationRunner implements IMutationRunner<PushButtonInput> {
+
+    private static final String PUSH_BUTTON_MUTATION = """
+            mutation pushButton($input: PushButtonInput!) {
+                pushButton(input: $input) {
+                  __typename
+                  ... on ErrorPayload {
+                    messages {
+                      body
+                      level
+                    }
+                  }
+                  ... on SuccessPayload {
+                    messages {
+                      body
+                      level
+                    }
+                  }
+                }
+              }
+            """;
+
+    private final IGraphQLRequestor graphQLRequestor;
+
+    public PushButtonMutationRunner(IGraphQLRequestor graphQLRequestor) {
+        this.graphQLRequestor = Objects.requireNonNull(graphQLRequestor);
+    }
+
+    @Override
+    public String run(PushButtonInput input) {
+        return this.graphQLRequestor.execute(PUSH_BUTTON_MUTATION, input);
+    }
+
+}

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

@@ -15,6 +15,8 @@ export * from './form/FormContext';
 export * from './form/FormContext.types';
 export * from './form/FormEventFragments';
 export * from './form/FormEventFragments.types';
+export * from './groups/Group';
+export * from './groups/Group.types';
 export type { ButtonStyleProps } from './propertysections/ButtonPropertySection.types';
 export type { CheckboxStyleProps } from './propertysections/CheckboxPropertySection.types';
 export type { DateTimeStyleProps } from './propertysections/DateTimeWidgetPropertySection.types';
@@ -33,6 +35,8 @@ export * from './representations/FormRepresentation';
 export * from './views/DetailsView';
 export * from './views/DetailsViewConfiguration';
 export * from './views/DetailsViewConfiguration.types';
+export * from './views/FormBasedView';
+export * from './views/FormBasedView.types';
 export * from './views/FormConverter.types';
 export * from './views/RelatedElementsView';
 export * from './views/RepresentationsView';

packages/sirius-web/backend/sirius-web-application/src/main/java/org/eclipse/sirius/web/application/diagram/controllers/SubscriptionDiagramFilterEventDataFetcher.java

@@ -0,0 +1,73 @@
+/*******************************************************************************
+ * 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.web.application.diagram.controllers;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import java.util.HashMap;
+import java.util.Map;
+import java.util.Objects;
+
+import org.eclipse.sirius.components.annotations.spring.graphql.SubscriptionDataFetcher;
+import org.eclipse.sirius.components.collaborative.forms.dto.PropertiesEventInput;
+import org.eclipse.sirius.components.core.api.IPayload;
+import org.eclipse.sirius.components.graphql.api.IDataFetcherWithFieldCoordinates;
+import org.eclipse.sirius.components.graphql.api.IEventProcessorSubscriptionProvider;
+import org.eclipse.sirius.components.graphql.api.IExceptionWrapper;
+import org.eclipse.sirius.components.graphql.api.LocalContextConstants;
+import org.eclipse.sirius.web.application.diagram.services.filter.api.DiagramFilterConfiguration;
+import org.reactivestreams.Publisher;
+
+import graphql.execution.DataFetcherResult;
+import graphql.schema.DataFetchingEnvironment;
+
+/**
+ * The data fetcher used to send the refreshed diagram filters to a subscription.
+ *
+ * @author gdaniel
+ */
+@SubscriptionDataFetcher(type = "Subscription", field = "diagramFilterEvent")
+public class SubscriptionDiagramFilterEventDataFetcher implements IDataFetcherWithFieldCoordinates<Publisher<DataFetcherResult<IPayload>>> {
+
+    private static final String INPUT_ARGUMENT = "input";
+
+    private final ObjectMapper objectMapper;
+
+    private final IExceptionWrapper exceptionWrapper;
+
+    private final IEventProcessorSubscriptionProvider eventProcessorSubscriptionProvider;
+
+    public SubscriptionDiagramFilterEventDataFetcher(ObjectMapper objectMapper, IExceptionWrapper exceptionWrapper, IEventProcessorSubscriptionProvider eventProcessorSubscriptionProvider) {
+        this.objectMapper = Objects.requireNonNull(objectMapper);
+        this.exceptionWrapper = Objects.requireNonNull(exceptionWrapper);
+        this.eventProcessorSubscriptionProvider = Objects.requireNonNull(eventProcessorSubscriptionProvider);
+    }
+
+    @Override
+    public Publisher<DataFetcherResult<IPayload>> get(DataFetchingEnvironment environment) throws Exception {
+        Object argument = environment.getArgument(INPUT_ARGUMENT);
+        var input = this.objectMapper.convertValue(argument, PropertiesEventInput.class);
+        var diagramFilterConfiguration = new DiagramFilterConfiguration(input.id().toString(), input.objectIds());
+
+        Map<String, Object> localContext = new HashMap<>();
+        localContext.put(LocalContextConstants.EDITING_CONTEXT_ID, input.editingContextId());
+        localContext.put(LocalContextConstants.REPRESENTATION_ID, diagramFilterConfiguration.getId());
+
+        return this.exceptionWrapper.wrapFlux(() -> this.eventProcessorSubscriptionProvider.getSubscription(input.editingContextId(), diagramFilterConfiguration, input), input)
+                .map(payload ->  DataFetcherResult.<IPayload>newResult()
+                        .data(payload)
+                        .localContext(localContext)
+                        .build());
+    }
+
+}