[CORD-1043] Registering reducers on the graph
Change-Id: I5804025f25733b5b5da1fd95725db3467a65abef
diff --git a/src/app/service-graph/components/coarse/coarse.component.ts b/src/app/service-graph/components/coarse/coarse.component.ts
index d610aa6..4e681d7 100644
--- a/src/app/service-graph/components/coarse/coarse.component.ts
+++ b/src/app/service-graph/components/coarse/coarse.component.ts
@@ -6,13 +6,15 @@
import {XosServiceGraphConfig as config} from '../../graph.config';
import {IXosDebouncer} from '../../../core/services/helpers/debounce.helper';
import {Subscription} from 'rxjs';
+import {IXosGraphHelpers} from '../../services/d3-helpers/graph.helpers';
class XosCoarseTenancyGraphCtrl {
static $inject = [
'$log',
'XosServiceGraphStore',
- 'XosDebouncer'
+ 'XosDebouncer',
+ 'XosGraphHelpers'
];
public graph: IXosServiceGraph;
@@ -29,7 +31,8 @@
constructor (
private $log: ng.ILogService,
private XosServiceGraphStore: IXosServiceGraphStore,
- private XosDebouncer: IXosDebouncer
+ private XosDebouncer: IXosDebouncer,
+ private XosGraphHelpers: IXosGraphHelpers
) {
}
@@ -141,10 +144,6 @@
.start();
}
- private getSiblingTextBBox(contex: any /* D3 this */) {
- return d3.select(contex.parentNode).select('text').node().getBBox();
- }
-
private renderNodes(nodes: IXosServiceGraphNode[]) {
const self = this;
const node = this.nodeGroup
@@ -155,7 +154,7 @@
const entering = node.enter()
.append('g')
.attr({
- class: 'node',
+ class: n => `node ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`,
transform: `translate(${svgDim.width / 2}, ${svgDim.heigth / 2})`
})
.call(this.forceLayout.drag)
@@ -184,7 +183,7 @@
// resize node > rect as contained text
existing.each(function() {
- const textBBox = self.getSiblingTextBBox(this);
+ const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this);
const rect = d3.select(this);
rect.attr({
width: textBBox.width + config.node.padding,
@@ -201,15 +200,12 @@
.data(links, l => l.id);
const entering = link.enter();
- // NOTE do we need to have groups?
- // .append('g')
- // .attr({
- // class: 'link',
- // });
+
+ // TODO read classes from graph links
entering.append('line')
.attr({
- class: 'link',
+ class: l => `link ${this.XosGraphHelpers.parseElemClasses(l.d3Class)}`,
'marker-start': 'url(#arrow)'
});
}
diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.ts b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
index 522e06f..c7efd1c 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.ts
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
@@ -8,6 +8,7 @@
import {IXosServiceGraph, IXosServiceGraphLink, IXosServiceGraphNode} from '../../interfaces';
import {IXosModelDiscovererService} from '../../../datasources/helpers/model-discoverer.service';
import {IXosSidePanelService} from '../../../core/side-panel/side-panel.service';
+import {IXosGraphHelpers} from '../../services/d3-helpers/graph.helpers';
class XosFineGrainedTenancyGraphCtrl {
static $inject = [
@@ -15,7 +16,8 @@
'XosServiceGraphStore',
'XosDebouncer',
'XosModelDiscoverer',
- 'XosSidePanel'
+ 'XosSidePanel',
+ 'XosGraphHelpers'
];
public graph: IXosServiceGraph;
@@ -35,7 +37,8 @@
private XosServiceGraphStore: IXosServiceGraphStore,
private XosDebouncer: IXosDebouncer,
private XosModelDiscoverer: IXosModelDiscovererService,
- private XosSidePanel: IXosSidePanelService
+ private XosSidePanel: IXosSidePanelService,
+ private XosGraphHelpers: IXosGraphHelpers
) {
this.handleSvg();
this.loadDefs();
@@ -158,10 +161,6 @@
.start();
}
- private getSiblingTextBBox(contex: any /* D3 this */) {
- return d3.select(contex.parentNode).select('text').node().getBBox();
- }
-
private renderServiceNodes(nodes: any) {
const self = this;
@@ -182,7 +181,7 @@
// resize node > rect as contained text
existing.each(function() {
- const textBBox = self.getSiblingTextBBox(this);
+ const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this);
const rect = d3.select(this);
rect.attr({
width: textBBox.width + config.node.padding,
@@ -237,7 +236,7 @@
// resize node > rect as contained text
existing.each(function() {
- const textBBox = self.getSiblingTextBBox(this);
+ const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this);
const useElem = d3.select(this);
const w = textBBox.width + config.node.padding * 2;
const h = w;
@@ -266,7 +265,7 @@
// resize node > rect as contained text
existing.each(function() {
- const textBBox = self.getSiblingTextBBox(this);
+ const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this);
const rect = d3.select(this);
rect.attr({
width: textBBox.width + config.node.padding,
@@ -289,7 +288,7 @@
const entering = node.enter()
.append('g')
.attr({
- class: n => `node ${n.type}`,
+ class: n => `node ${n.type} ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`,
transform: (n, i) => `translate(${hStep * i}, ${vStep * i})`
})
.call(this.forceLayout.drag)
@@ -335,7 +334,7 @@
entering.append('line')
.attr({
- class: 'link',
+ class: n => `link ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`,
'marker-start': 'url(#arrow)'
});
}