[frontend] Relationship creation graph

OpenCTI-Platform · Jan 10, 2024 · 0266121 · 0266121
1 parent 76ccb83
commit 0266121
Show file tree

Hide file tree

Showing 14 changed files with 346 additions and 1 deletion.
diff --git a/...atform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledgeGraph.jsx b/...atform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledgeGraph.jsx
@@ -42,6 +42,7 @@ import { hexToRGB } from '../../../../utils/Colors';
 import { UserContext } from '../../../../utils/hooks/useAuth';
 import investigationAddFromContainer from '../../../../utils/InvestigationUtils';
 import { isNotEmptyField } from '../../../../utils/utils';
+import RelationSelection from '../../../../utils/graph/RelationSelection';
 
 const ignoredStixCoreObjectsTypes = ['Note', 'Opinion'];
 
@@ -516,6 +517,7 @@ class GroupingKnowledgeGraphComponent extends Component {
       zoomed: false,
       keyword: '',
       navOpen: localStorage.getItem('navOpen') === 'true',
+      openCreatedRelation: false,
     };
   }
 
@@ -1414,6 +1416,8 @@ class GroupingKnowledgeGraphComponent extends Component {
                 handleSearch={this.handleSearch.bind(this)}
                 navOpen={navOpen}
                 resetAllFilters={this.resetAllFilters.bind(this)}
+                openCreatedRelation={this.state.openCreatedRelation}
+                handleCloseRelationCreation={() => this.setState({ openCreatedRelation: false })}
               />
               {selectedEntities.length > 0 && (
                 <EntitiesDetailsRightsBar
@@ -1529,6 +1533,18 @@ class GroupingKnowledgeGraphComponent extends Component {
                       this.setState({ numberOfSelectedNodes: nodes.size });
                     }}
                   />
+                  <RelationSelection
+                    activated={!(selectModeFree && selectModeFreeReady) && !selectRectangleModeFree}
+                    width={graphWidth}
+                    height={graphHeight}
+                    graphDataNodes={graphData.nodes}
+                    graph={this.graph}
+                    setSelectedNodes={(nodes) => {
+                      this.selectedNodes.clear();
+                      Array.from(nodes).forEach((n) => this.selectedNodes.add(n));
+                      this.setState({ numberOfSelectedNodes: this.selectedNodes.size, openCreatedRelation: true });
+                    }}
+                  />
                   <RectangleSelection
                     onSelect={(e, coords) => {
                       this.handleRectSelectMove(e, coords);

diff --git a/...orm/opencti-front/src/private/components/analyses/groupings/GroupingKnowledgeGraphBar.jsx b/...orm/opencti-front/src/private/components/analyses/groupings/GroupingKnowledgeGraphBar.jsx
@@ -102,6 +102,12 @@ class GroupingKnowledgeGraphBar extends Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.openCreatedRelation === false && this.props.openCreatedRelation) {
+      this.setState({ openCreatedRelation: true });
+    }
+  }
+
   handleOpenRemove() {
     this.setState({ displayRemove: true });
   }
@@ -166,6 +172,7 @@ class GroupingKnowledgeGraphBar extends Component {
 
   handleCloseCreateRelationship() {
     this.setState({ openCreatedRelation: false });
+    this.props.handleCloseRelationCreation();
   }
 
   handleReverseRelation() {

diff --git a/...i-platform/opencti-front/src/private/components/analyses/reports/ReportKnowledgeGraph.jsx b/...i-platform/opencti-front/src/private/components/analyses/reports/ReportKnowledgeGraph.jsx
@@ -43,6 +43,7 @@ import ReportPopover from './ReportPopover';
 import { UserContext } from '../../../../utils/hooks/useAuth';
 import investigationAddFromContainer from '../../../../utils/InvestigationUtils';
 import { isNotEmptyField } from '../../../../utils/utils';
+import RelationSelection from '../../../../utils/graph/RelationSelection';
 
 const ignoredStixCoreObjectsTypes = ['Note', 'Opinion'];
 
@@ -539,6 +540,7 @@ class ReportKnowledgeGraphComponent extends Component {
       zoomed: false,
       keyword: '',
       navOpen: localStorage.getItem('navOpen') === 'true',
+      openCreatedRelation: false,
     };
     this.canvas = null;
   }
@@ -1463,6 +1465,8 @@ class ReportKnowledgeGraphComponent extends Component {
                 handleSearch={this.handleSearch.bind(this)}
                 navOpen={navOpen}
                 resetAllFilters={this.resetAllFilters.bind(this)}
+                openCreatedRelation={this.state.openCreatedRelation}
+                handleCloseRelationCreation={() => this.setState({ openCreatedRelation: false })}
               />
               {selectedEntities.length > 0 && (
                 <EntitiesDetailsRightsBar
@@ -1582,6 +1586,18 @@ class ReportKnowledgeGraphComponent extends Component {
                       this.setState({ numberOfSelectedNodes: nodes.size });
                     }}
                   />
+                  <RelationSelection
+                    activated={!(selectModeFree && selectModeFreeReady) && !selectRectangleModeFree}
+                    width={graphWidth}
+                    height={graphHeight}
+                    graphDataNodes={graphData.nodes}
+                    graph={this.graph}
+                    setSelectedNodes={(nodes) => {
+                      this.selectedNodes.clear();
+                      Array.from(nodes).forEach((n) => this.selectedNodes.add(n));
+                      this.setState({ numberOfSelectedNodes: this.selectedNodes.size, openCreatedRelation: true });
+                    }}
+                  />
                   <RectangleSelection
                     onSelect={(e, coords) => {
                       this.handleRectSelectMove(e, coords);

diff --git a/...latform/opencti-front/src/private/components/analyses/reports/ReportKnowledgeGraphBar.jsx b/...latform/opencti-front/src/private/components/analyses/reports/ReportKnowledgeGraphBar.jsx
@@ -107,6 +107,12 @@ class ReportKnowledgeGraphBar extends Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.openCreatedRelation === false && this.props.openCreatedRelation) {
+      this.setState({ openCreatedRelation: true });
+    }
+  }
+
   handleOpenRemove() {
     this.setState({ displayRemove: true });
   }
@@ -175,6 +181,7 @@ class ReportKnowledgeGraphBar extends Component {
 
   handleCloseCreateRelationship() {
     this.setState({ openCreatedRelation: false });
+    this.props.handleCloseRelationCreation();
   }
 
   handleReverseRelation() {

diff --git a/...form/opencti-front/src/private/components/cases/case_incidents/IncidentKnowledgeGraph.jsx b/...form/opencti-front/src/private/components/cases/case_incidents/IncidentKnowledgeGraph.jsx
@@ -43,6 +43,7 @@ import {
 import { UserContext } from '../../../../utils/hooks/useAuth';
 import investigationAddFromContainer from '../../../../utils/InvestigationUtils';
 import { isNotEmptyField } from '../../../../utils/utils';
+import RelationSelection from '../../../../utils/graph/RelationSelection';
 
 const ignoredStixCoreObjectsTypes = ['Note', 'Opinion'];
 
@@ -556,6 +557,7 @@ class IncidentKnowledgeGraphComponent extends Component {
       zoomed: false,
       keyword: '',
       navOpen: localStorage.getItem('navOpen') === 'true',
+      openCreatedRelation: false,
     };
     this.canvas = null;
   }
@@ -1481,6 +1483,8 @@ class IncidentKnowledgeGraphComponent extends Component {
                 handleSearch={this.handleSearch.bind(this)}
                 navOpen={navOpen}
                 resetAllFilters={this.resetAllFilters.bind(this)}
+                openCreatedRelation={this.state.openCreatedRelation}
+                handleCloseRelationCreation={() => this.setState({ openCreatedRelation: false })}
               />
               {selectedEntities.length > 0 && (
                 <EntitiesDetailsRightsBar
@@ -1600,6 +1604,18 @@ class IncidentKnowledgeGraphComponent extends Component {
                       this.setState({ numberOfSelectedNodes: nodes.size });
                     }}
                   />
+                  <RelationSelection
+                    activated={!(selectModeFree && selectModeFreeReady) && !selectRectangleModeFree}
+                    width={graphWidth}
+                    height={graphHeight}
+                    graphDataNodes={graphData.nodes}
+                    graph={this.graph}
+                    setSelectedNodes={(nodes) => {
+                      this.selectedNodes.clear();
+                      Array.from(nodes).forEach((n) => this.selectedNodes.add(n));
+                      this.setState({ numberOfSelectedNodes: this.selectedNodes.size, openCreatedRelation: true });
+                    }}
+                  />
                   <RectangleSelection
                     onSelect={(e, coords) => {
                       this.handleRectSelectMove(e, coords);

diff --git a/...m/opencti-front/src/private/components/cases/case_incidents/IncidentKnowledgeGraphBar.jsx b/...m/opencti-front/src/private/components/cases/case_incidents/IncidentKnowledgeGraphBar.jsx
@@ -107,6 +107,12 @@ class IncidentKnowledgeGraphBar extends Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.openCreatedRelation === false && this.props.openCreatedRelation) {
+      this.setState({ openCreatedRelation: true });
+    }
+  }
+
   handleOpenRemove() {
     this.setState({ displayRemove: true });
   }
@@ -175,6 +181,7 @@ class IncidentKnowledgeGraphBar extends Component {
 
   handleCloseCreateRelationship() {
     this.setState({ openCreatedRelation: false });
+    this.props.handleCloseRelationCreation();
   }
 
   handleReverseRelation() {

diff --git a/...i-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfiKnowledgeGraph.jsx b/...i-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfiKnowledgeGraph.jsx
@@ -43,6 +43,7 @@ import CaseRfiPopover from './CaseRfiPopover';
 import { UserContext } from '../../../../utils/hooks/useAuth';
 import investigationAddFromContainer from '../../../../utils/InvestigationUtils';
 import { isNotEmptyField } from '../../../../utils/utils';
+import RelationSelection from '../../../../utils/graph/RelationSelection';
 
 const ignoredStixCoreObjectsTypes = ['Note', 'Opinion'];
 
@@ -555,6 +556,7 @@ class CaseRfiKnowledgeGraphComponent extends Component {
       zoomed: false,
       keyword: '',
       navOpen: localStorage.getItem('navOpen') === 'true',
+      openCreatedRelation: false,
     };
     this.canvas = null;
   }
@@ -1480,6 +1482,8 @@ class CaseRfiKnowledgeGraphComponent extends Component {
                 handleSearch={this.handleSearch.bind(this)}
                 navOpen={navOpen}
                 resetAllFilters={this.resetAllFilters.bind(this)}
+                openCreatedRelation={this.state.openCreatedRelation}
+                handleCloseRelationCreation={() => this.setState({ openCreatedRelation: false })}
               />
               {selectedEntities.length > 0 && (
                 <EntitiesDetailsRightsBar
@@ -1599,6 +1603,18 @@ class CaseRfiKnowledgeGraphComponent extends Component {
                       this.setState({ numberOfSelectedNodes: nodes.size });
                     }}
                   />
+                  <RelationSelection
+                    activated={!(selectModeFree && selectModeFreeReady) && !selectRectangleModeFree}
+                    width={graphWidth}
+                    height={graphHeight}
+                    graphDataNodes={graphData.nodes}
+                    graph={this.graph}
+                    setSelectedNodes={(nodes) => {
+                      this.selectedNodes.clear();
+                      Array.from(nodes).forEach((n) => this.selectedNodes.add(n));
+                      this.setState({ numberOfSelectedNodes: this.selectedNodes.size, openCreatedRelation: true });
+                    }}
+                  />
                   <RectangleSelection
                     onSelect={(e, coords) => {
                       this.handleRectSelectMove(e, coords);

diff --git a/...latform/opencti-front/src/private/components/cases/case_rfis/CaseRfiKnowledgeGraphBar.jsx b/...latform/opencti-front/src/private/components/cases/case_rfis/CaseRfiKnowledgeGraphBar.jsx
@@ -106,6 +106,12 @@ class CaseRfiKnowledgeGraphBar extends Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.openCreatedRelation === false && this.props.openCreatedRelation) {
+      this.setState({ openCreatedRelation: true });
+    }
+  }
+
   handleOpenRemove() {
     this.setState({ displayRemove: true });
   }
@@ -174,6 +180,7 @@ class CaseRfiKnowledgeGraphBar extends Component {
 
   handleCloseCreateRelationship() {
     this.setState({ openCreatedRelation: false });
+    this.props.handleCloseRelationCreation();
   }
 
   handleReverseRelation() {

diff --git a/...i-platform/opencti-front/src/private/components/cases/case_rfts/CaseRftKnowledgeGraph.jsx b/...i-platform/opencti-front/src/private/components/cases/case_rfts/CaseRftKnowledgeGraph.jsx
@@ -43,6 +43,7 @@ import CaseRftPopover from './CaseRftPopover';
 import { UserContext } from '../../../../utils/hooks/useAuth';
 import investigationAddFromContainer from '../../../../utils/InvestigationUtils';
 import { isNotEmptyField } from '../../../../utils/utils';
+import RelationSelection from '../../../../utils/graph/RelationSelection';
 
 const ignoredStixCoreObjectsTypes = ['Note', 'Opinion'];
 
@@ -555,6 +556,7 @@ class CaseRftKnowledgeGraphComponent extends Component {
       zoomed: false,
       keyword: '',
       navOpen: localStorage.getItem('navOpen') === 'true',
+      openCreatedRelation: false,
     };
     this.canvas = null;
   }
@@ -1480,6 +1482,8 @@ class CaseRftKnowledgeGraphComponent extends Component {
                 handleSearch={this.handleSearch.bind(this)}
                 navOpen={navOpen}
                 resetAllFilters={this.resetAllFilters.bind(this)}
+                openCreatedRelation={this.state.openCreatedRelation}
+                handleCloseRelationCreation={() => this.setState({ openCreatedRelation: false })}
               />
               {selectedEntities.length > 0 && (
                 <EntitiesDetailsRightsBar
@@ -1599,6 +1603,18 @@ class CaseRftKnowledgeGraphComponent extends Component {
                       this.setState({ numberOfSelectedNodes: nodes.size });
                     }}
                   />
+                  <RelationSelection
+                    activated={!(selectModeFree && selectModeFreeReady) && !selectRectangleModeFree}
+                    width={graphWidth}
+                    height={graphHeight}
+                    graphDataNodes={graphData.nodes}
+                    graph={this.graph}
+                    setSelectedNodes={(nodes) => {
+                      this.selectedNodes.clear();
+                      Array.from(nodes).forEach((n) => this.selectedNodes.add(n));
+                      this.setState({ numberOfSelectedNodes: this.selectedNodes.size, openCreatedRelation: true });
+                    }}
+                  />
                   <RectangleSelection
                     onSelect={(e, coords) => {
                       this.handleRectSelectMove(e, coords);

diff --git a/...latform/opencti-front/src/private/components/cases/case_rfts/CaseRftKnowledgeGraphBar.jsx b/...latform/opencti-front/src/private/components/cases/case_rfts/CaseRftKnowledgeGraphBar.jsx
@@ -106,6 +106,12 @@ class CaseRftKnowledgeGraphBar extends Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.openCreatedRelation === false && this.props.openCreatedRelation) {
+      this.setState({ openCreatedRelation: true });
+    }
+  }
+
   handleOpenRemove() {
     this.setState({ displayRemove: true });
   }
@@ -174,6 +180,7 @@ class CaseRftKnowledgeGraphBar extends Component {
 
   handleCloseCreateRelationship() {
     this.setState({ openCreatedRelation: false });
+    this.props.handleCloseRelationCreation();
   }
 
   handleReverseRelation() {

diff --git a/...orm/opencti-front/src/private/components/workspaces/investigations/InvestigationGraph.jsx b/...orm/opencti-front/src/private/components/workspaces/investigations/InvestigationGraph.jsx
@@ -38,6 +38,7 @@ import InvestigationGraphBar from './InvestigationGraphBar';
 import { UserContext } from '../../../../utils/hooks/useAuth';
 import { investigationAddStixCoreObjectsLinesRelationsDeleteMutation } from './InvestigationAddStixCoreObjectsLines';
 import { isNotEmptyField } from '../../../../utils/utils';
+import RelationSelection from '../../../../utils/graph/RelationSelection';
 
 const PARAMETERS$ = new Subject().pipe(debounce(() => timer(2000)));
 const POSITIONS$ = new Subject().pipe(debounce(() => timer(2000)));
@@ -999,6 +1000,7 @@ class InvestigationGraphComponent extends Component {
       keyword: '',
       prevClick: null,
       navOpen: localStorage.getItem('navOpen') === 'true',
+      openCreatedRelation: false,
     };
     this.canvas = null;
   }
@@ -2113,6 +2115,8 @@ class InvestigationGraphComponent extends Component {
                 handleSearch={this.handleSearch.bind(this)}
                 navOpen={navOpen}
                 resetAllFilters={this.resetAllFilters.bind(this, false)}
+                openCreatedRelation={this.state.openCreatedRelation}
+                handleCloseRelationCreation={() => this.setState({ openCreatedRelation: false })}
               />
               {selectedEntities.length > 0 && (
                 <EntitiesDetailsRightsBar selectedEntities={selectedEntities} />
@@ -2223,6 +2227,18 @@ class InvestigationGraphComponent extends Component {
                       this.setState({ numberOfSelectedNodes: nodes.size });
                     }}
                   />
+                  <RelationSelection
+                    activated={!(selectModeFree && selectModeFreeReady) && !selectRectangleModeFree}
+                    width={graphWidth}
+                    height={graphHeight}
+                    graphDataNodes={graphData.nodes}
+                    graph={this.graph}
+                    setSelectedNodes={(nodes) => {
+                      this.selectedNodes.clear();
+                      Array.from(nodes).forEach((n) => this.selectedNodes.add(n));
+                      this.setState({ numberOfSelectedNodes: this.selectedNodes.size, openCreatedRelation: true });
+                    }}
+                  />
                   <RectangleSelection
                     onSelect={(e, coords) => {
                       this.handleRectSelectMove(e, coords);