From a0a51218d07a907070816b59eb6d16250307c162 Mon Sep 17 00:00:00 2001
From: Gwendoline-FAVRE-FELIX <gwendoline.favre-felix@filigran.io>
Date: Wed, 20 Nov 2024 11:24:32 +0100
Subject: [PATCH] [frontend] In Investigation, fix the display of a
 relationship after it has been created (#9022)

---
 .../investigations/InvestigationGraph.jsx     | 86 ++++++++-----------
 1 file changed, 37 insertions(+), 49 deletions(-)

diff --git a/opencti-platform/opencti-front/src/private/components/workspaces/investigations/InvestigationGraph.jsx b/opencti-platform/opencti-front/src/private/components/workspaces/investigations/InvestigationGraph.jsx
index 53a897c08ad8..aca3712834b2 100644
--- a/opencti-platform/opencti-front/src/private/components/workspaces/investigations/InvestigationGraph.jsx
+++ b/opencti-platform/opencti-front/src/private/components/workspaces/investigations/InvestigationGraph.jsx
@@ -1476,57 +1476,45 @@ class InvestigationGraphComponent extends Component {
 
   async handleAddRelation(stixCoreRelationship, skipReload = false) {
     if (R.map((n) => n.id, this.graphObjects).includes(stixCoreRelationship.id)) return;
-    this.graphObjects = [...this.graphObjects, stixCoreRelationship];
-    if (!skipReload) {
-      this.graphData = buildGraphData(
-        this.graphObjects,
-        decodeGraphData(this.props.workspace.graph_data),
-        this.props.t,
-      );
-      await this.resetAllFilters();
-      const selectedTimeRangeInterval = computeTimeRangeInterval(
-        this.graphObjects,
-      );
-      this.setState(
-        {
-          selectedTimeRangeInterval,
-          graphData: applyFilters(
-            this.graphData,
-            this.state.stixCoreObjectsTypes,
-            this.state.markedBy,
-            this.state.createdBy,
-            [],
-            selectedTimeRangeInterval,
-          ),
+    commitMutation({
+      mutation: investigationGraphRelationsAddMutation,
+      variables: {
+        id: this.props.workspace.id,
+        input: {
+          key: 'investigated_entities_ids',
+          operation: 'add',
+          value: [stixCoreRelationship.id],
         },
-        () => {
-          commitMutation({
-            mutation: investigationGraphRelationsAddMutation,
-            variables: {
-              id: this.props.workspace.id,
-              input: {
-                key: 'investigated_entities_ids',
-                operation: 'add',
-                value: [stixCoreRelationship.id],
-              },
+      },
+      onCompleted: async () => {
+        this.graphObjects = [...this.graphObjects, stixCoreRelationship];
+        if (!skipReload) {
+          this.graphData = buildGraphData(
+            this.graphObjects,
+            decodeGraphData(this.props.workspace.graph_data),
+            this.props.t,
+          );
+          await this.resetAllFilters();
+          const selectedTimeRangeInterval = computeTimeRangeInterval(this.graphObjects);
+          this.setState(
+            {
+              selectedTimeRangeInterval,
+              graphData: applyFilters(
+                this.graphData,
+                this.state.stixCoreObjectsTypes,
+                this.state.markedBy,
+                this.state.createdBy,
+                [],
+                selectedTimeRangeInterval,
+              ),
             },
-          });
-          setTimeout(() => this.handleZoomToFit(), 1500);
-        },
-      );
-    } else {
-      commitMutation({
-        mutation: investigationGraphRelationsAddMutation,
-        variables: {
-          id: this.props.workspace.id,
-          input: {
-            key: 'investigated_entities_ids',
-            operation: 'add',
-            value: [stixCoreRelationship.id],
-          },
-        },
-      });
-    }
+            () => {
+              setTimeout(() => this.handleZoomToFit(), 1500);
+            },
+          );
+        }
+      },
+    });
   }
 
   handleDelete(stixCoreObject) {