Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 1 | import {IXosServiceGraphStore} from '../../services/graph.store'; |
| 2 | import './fine-grained.component.scss'; |
| 3 | import * as d3 from 'd3'; |
| 4 | import * as $ from 'jquery'; |
| 5 | import {Subscription} from 'rxjs'; |
| 6 | import {XosServiceGraphConfig as config} from '../../graph.config'; |
| 7 | import {IXosDebouncer} from '../../../core/services/helpers/debounce.helper'; |
| 8 | import {IXosServiceGraph, IXosServiceGraphLink, IXosServiceGraphNode} from '../../interfaces'; |
Matteo Scandolo | 520a8a1 | 2017-03-10 17:31:37 -0800 | [diff] [blame] | 9 | import {IXosModelDiscovererService} from '../../../datasources/helpers/model-discoverer.service'; |
| 10 | import {IXosSidePanelService} from '../../../core/side-panel/side-panel.service'; |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 11 | import {IXosGraphHelpers} from '../../services/d3-helpers/graph.helpers'; |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 12 | |
| 13 | class XosFineGrainedTenancyGraphCtrl { |
| 14 | static $inject = [ |
| 15 | '$log', |
| 16 | 'XosServiceGraphStore', |
Matteo Scandolo | 520a8a1 | 2017-03-10 17:31:37 -0800 | [diff] [blame] | 17 | 'XosDebouncer', |
| 18 | 'XosModelDiscoverer', |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 19 | 'XosSidePanel', |
| 20 | 'XosGraphHelpers' |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 21 | ]; |
| 22 | |
| 23 | public graph: IXosServiceGraph; |
| 24 | |
| 25 | private GraphSubscription: Subscription; |
| 26 | private svg; |
| 27 | private forceLayout; |
| 28 | private linkGroup; |
| 29 | private nodeGroup; |
Simon Hunt | c8f2314 | 2017-03-14 14:11:13 -0700 | [diff] [blame] | 30 | private defs; |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 31 | private textSize = 20; |
| 32 | private textOffset = this.textSize / 4; |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 33 | |
| 34 | // debounced functions |
| 35 | private renderGraph; |
| 36 | |
| 37 | constructor( |
| 38 | private $log: ng.ILogService, |
| 39 | private XosServiceGraphStore: IXosServiceGraphStore, |
Matteo Scandolo | 520a8a1 | 2017-03-10 17:31:37 -0800 | [diff] [blame] | 40 | private XosDebouncer: IXosDebouncer, |
| 41 | private XosModelDiscoverer: IXosModelDiscovererService, |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 42 | private XosSidePanel: IXosSidePanelService, |
| 43 | private XosGraphHelpers: IXosGraphHelpers |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 44 | ) { |
| 45 | this.handleSvg(); |
Simon Hunt | c8f2314 | 2017-03-14 14:11:13 -0700 | [diff] [blame] | 46 | this.loadDefs(); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 47 | this.setupForceLayout(); |
| 48 | this.renderGraph = this.XosDebouncer.debounce(this._renderGraph, 500, this); |
| 49 | |
| 50 | $(window).on('resize', () => { |
| 51 | this.setupForceLayout(); |
| 52 | this.renderGraph(); |
| 53 | }); |
| 54 | |
| 55 | this.GraphSubscription = this.XosServiceGraphStore.get() |
| 56 | .subscribe( |
| 57 | (graph) => { |
Matteo Scandolo | 98b5f5d | 2017-03-17 17:09:05 -0700 | [diff] [blame] | 58 | this.$log.debug(`[XosFineGrainedTenancyGraphCtrl] Fine-Grained Event and render`, graph); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 59 | |
Matteo Scandolo | 265c204 | 2017-03-20 10:15:40 -0700 | [diff] [blame] | 60 | if (!graph || !graph.nodes || !graph.links) { |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 61 | return; |
| 62 | } |
| 63 | |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 64 | this.graph = graph; |
| 65 | this.renderGraph(); |
| 66 | }, |
| 67 | (err) => { |
| 68 | this.$log.error(`[XosFineGrainedTenancyGraphCtrl] Error: `, err); |
| 69 | } |
| 70 | ); |
| 71 | } |
| 72 | |
| 73 | $onDestroy() { |
| 74 | this.GraphSubscription.unsubscribe(); |
| 75 | } |
| 76 | |
| 77 | private _renderGraph() { |
| 78 | this.addNodeLinksToForceLayout(this.graph); |
| 79 | this.renderNodes(this.graph.nodes); |
| 80 | this.renderLinks(this.graph.links); |
| 81 | } |
| 82 | |
| 83 | private getSvgDimensions(): {width: number, heigth: number} { |
| 84 | return { |
| 85 | width: $('xos-fine-grained-tenancy-graph svg').width(), |
| 86 | heigth: $('xos-fine-grained-tenancy-graph svg').height() |
| 87 | }; |
| 88 | } |
| 89 | |
| 90 | private handleSvg() { |
| 91 | this.svg = d3.select('svg'); |
| 92 | |
Simon Hunt | c8f2314 | 2017-03-14 14:11:13 -0700 | [diff] [blame] | 93 | this.defs = this.svg.append('defs'); |
| 94 | |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 95 | this.linkGroup = this.svg.append('g') |
| 96 | .attr({ |
| 97 | class: 'link-group' |
| 98 | }); |
| 99 | |
| 100 | this.nodeGroup = this.svg.append('g') |
| 101 | .attr({ |
| 102 | class: 'node-group' |
| 103 | }); |
| 104 | } |
| 105 | |
Simon Hunt | c8f2314 | 2017-03-14 14:11:13 -0700 | [diff] [blame] | 106 | private loadDefs() { |
| 107 | const cloud = { |
| 108 | vbox: '0 0 303.8 185.8', |
| 109 | path: `M88.6,44.3c31.7-45.5,102.1-66.7,135-3 |
| 110 | M37.8,142.9c-22.5,3.5-60.3-32.4-16.3-64.2 |
| 111 | M101.8,154.2c-15.6,59.7-121.4,18.8-77.3-13 |
| 112 | M194.6,150c-35.4,51.8-85.7,34.3-98.8-9.5 |
| 113 | M274.4,116.4c29.4,73.2-81.9,80.3-87.7,44.3 |
| 114 | M28.5,89.2C3.7,77.4,55.5,4.8,95.3,36.1 |
| 115 | M216.1,28.9C270.9-13,340.8,91,278.4,131.1`, |
| 116 | bgpath: `M22,78.3C21.5,55.1,62.3,10.2,95.2,36 |
| 117 | h0c31.9-33.4,88.1-50.5,120.6-7.2l0.3,0.2 |
| 118 | C270.9-13,340.8,91,278.4,131.1v-0.5 |
| 119 | c10.5,59.8-86.4,63.7-91.8,30.1h-0.4 |
| 120 | c-30.2,33.6-67.6,24-84.6-6v-0.4 |
| 121 | c-15.6,59.7-121.4,18.8-77.3-13 |
| 122 | l-0.2-.2c-20.2-7.9-38.6-36.5-2.8-62.3Z` |
| 123 | }; |
| 124 | |
| 125 | this.defs.append('symbol') |
| 126 | .attr({ id: 'cloud', viewBox: cloud.vbox }) |
| 127 | .append('path').attr('d', cloud.path); |
| 128 | |
| 129 | this.defs.append('symbol') |
| 130 | .attr({ id: 'cloud_bg', viewBox: cloud.vbox }) |
| 131 | .append('path').attr('d', cloud.bgpath); |
| 132 | } |
| 133 | |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 134 | private setupForceLayout() { |
| 135 | |
| 136 | const tick = () => { |
| 137 | this.nodeGroup.selectAll('g.node') |
| 138 | .attr({ |
| 139 | transform: d => `translate(${d.x}, ${d.y})` |
| 140 | }); |
| 141 | |
| 142 | this.linkGroup.selectAll('line') |
| 143 | .attr({ |
| 144 | x1: l => l.source.x || 0, |
| 145 | y1: l => l.source.y || 0, |
| 146 | x2: l => l.target.x || 0, |
| 147 | y2: l => l.target.y || 0, |
| 148 | }); |
| 149 | }; |
| 150 | const svgDim = this.getSvgDimensions(); |
| 151 | this.forceLayout = d3.layout.force() |
| 152 | .size([svgDim.width, svgDim.heigth]) |
| 153 | .linkDistance(config.force.linkDistance) |
| 154 | .charge(config.force.charge) |
| 155 | .gravity(config.force.gravity) |
| 156 | .on('tick', tick); |
| 157 | } |
| 158 | |
| 159 | private addNodeLinksToForceLayout(data: IXosServiceGraph) { |
| 160 | this.forceLayout |
| 161 | .nodes(data.nodes) |
| 162 | .links(data.links) |
| 163 | .start(); |
| 164 | } |
| 165 | |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 166 | private renderServiceNodes(nodes: any) { |
| 167 | |
| 168 | const self = this; |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 169 | |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 170 | nodes.append('rect') |
| 171 | .attr({ |
| 172 | rx: config.node.radius, |
| 173 | ry: config.node.radius |
| 174 | }); |
| 175 | |
| 176 | nodes.append('text') |
| 177 | .attr({ |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 178 | 'text-anchor': 'middle', |
| 179 | 'transform': `translate(0,${this.textOffset})` |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 180 | }) |
| 181 | .text(n => n.label); |
| 182 | // .text(n => `${n.id} - ${n.label}`); |
| 183 | |
| 184 | const existing = nodes.selectAll('rect'); |
| 185 | |
| 186 | // resize node > rect as contained text |
| 187 | existing.each(function() { |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 188 | const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 189 | const rect = d3.select(this); |
| 190 | rect.attr({ |
| 191 | width: textBBox.width + config.node.padding, |
| 192 | height: textBBox.height + config.node.padding, |
| 193 | x: textBBox.x - (config.node.padding / 2), |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 194 | y: (textBBox.y + self.textOffset) - (config.node.padding / 2) |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 195 | }); |
| 196 | }); |
| 197 | } |
| 198 | |
| 199 | private renderTenantNodes(nodes: any) { |
| 200 | nodes.append('rect') |
| 201 | .attr({ |
| 202 | width: 40, |
| 203 | height: 40, |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 204 | x: -20, |
| 205 | y: -20, |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 206 | transform: `rotate(45)` |
| 207 | }); |
| 208 | |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 209 | nodes.append('circle') |
| 210 | .attr({ |
| 211 | r: '4px' |
| 212 | }); |
| 213 | |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 214 | nodes.append('text') |
| 215 | .attr({ |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 216 | 'text-anchor': 'middle', |
| 217 | 'transform': `translate(0,${this.textOffset})` |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 218 | }) |
| 219 | .text(n => n.label); |
| 220 | } |
| 221 | |
| 222 | private renderNetworkNodes(nodes: any) { |
| 223 | const self = this; |
Simon Hunt | c8f2314 | 2017-03-14 14:11:13 -0700 | [diff] [blame] | 224 | |
| 225 | nodes.append('use') |
| 226 | .attr({ |
| 227 | class: 'symbol-bg', |
| 228 | 'xlink:href': '#cloud_bg' |
| 229 | }); |
| 230 | |
| 231 | nodes.append('use') |
| 232 | .attr({ |
| 233 | class: 'symbol', |
| 234 | 'xlink:href': '#cloud' |
| 235 | }); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 236 | |
| 237 | nodes.append('text') |
| 238 | .attr({ |
Simon Hunt | c8f2314 | 2017-03-14 14:11:13 -0700 | [diff] [blame] | 239 | 'text-anchor': 'middle', |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 240 | 'transform': `translate(0,${this.textOffset})` |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 241 | }) |
| 242 | .text(n => n.label); |
| 243 | |
Simon Hunt | c8f2314 | 2017-03-14 14:11:13 -0700 | [diff] [blame] | 244 | const existing = nodes.selectAll('use'); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 245 | |
| 246 | // resize node > rect as contained text |
| 247 | existing.each(function() { |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 248 | const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this); |
Simon Hunt | c8f2314 | 2017-03-14 14:11:13 -0700 | [diff] [blame] | 249 | const useElem = d3.select(this); |
| 250 | const w = textBBox.width + config.node.padding * 2; |
| 251 | const h = w; |
| 252 | const xoff = -(w / 2); |
| 253 | const yoff = -(h / 2); |
| 254 | |
| 255 | useElem.attr({ |
| 256 | width: w, |
| 257 | height: h, |
| 258 | transform: 'translate(' + xoff + ',' + yoff + ')' |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 259 | }); |
| 260 | }); |
| 261 | } |
| 262 | |
| 263 | private renderSubscriberNodes(nodes: any) { |
| 264 | const self = this; |
| 265 | nodes.append('rect'); |
| 266 | |
| 267 | nodes.append('text') |
| 268 | .attr({ |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 269 | 'text-anchor': 'middle', |
| 270 | 'transform': `translate(0,${this.textOffset})` |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 271 | }) |
| 272 | .text(n => n.label); |
| 273 | |
| 274 | const existing = nodes.selectAll('rect'); |
| 275 | |
| 276 | // resize node > rect as contained text |
| 277 | existing.each(function() { |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 278 | const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 279 | const rect = d3.select(this); |
| 280 | rect.attr({ |
| 281 | width: textBBox.width + config.node.padding, |
| 282 | height: textBBox.height + config.node.padding, |
| 283 | x: textBBox.x - (config.node.padding / 2), |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame] | 284 | y: (textBBox.y + self.textOffset) - (config.node.padding / 2) |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 285 | }); |
| 286 | }); |
| 287 | } |
| 288 | |
| 289 | private renderNodes(nodes: IXosServiceGraphNode[]) { |
| 290 | const node = this.nodeGroup |
| 291 | .selectAll('g.node') |
| 292 | .data(nodes, n => n.id); |
| 293 | |
Matteo Scandolo | 520a8a1 | 2017-03-10 17:31:37 -0800 | [diff] [blame] | 294 | let mouseEventsTimer, selectedModel; |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 295 | const svgDim = this.getSvgDimensions(); |
| 296 | const hStep = svgDim.width / (nodes.length - 1); |
| 297 | const vStep = svgDim.heigth / (nodes.length - 1); |
| 298 | const entering = node.enter() |
| 299 | .append('g') |
| 300 | .attr({ |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 301 | class: n => `node ${n.type} ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`, |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 302 | transform: (n, i) => `translate(${hStep * i}, ${vStep * i})` |
| 303 | }) |
| 304 | .call(this.forceLayout.drag) |
| 305 | .on('mousedown', () => { |
Matteo Scandolo | 520a8a1 | 2017-03-10 17:31:37 -0800 | [diff] [blame] | 306 | mouseEventsTimer = new Date().getTime(); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 307 | d3.event.stopPropagation(); |
| 308 | }) |
Matteo Scandolo | 520a8a1 | 2017-03-10 17:31:37 -0800 | [diff] [blame] | 309 | .on('mouseup', (n) => { |
| 310 | mouseEventsTimer = new Date().getTime() - mouseEventsTimer; |
| 311 | n.fixed = true; |
| 312 | }) |
| 313 | .on('click', (n: IXosServiceGraphNode) => { |
| 314 | if (mouseEventsTimer > 100) { |
| 315 | // it is a drag |
| 316 | return; |
| 317 | } |
| 318 | if (selectedModel === n.id) { |
| 319 | // this model is already selected, so close the panel |
| 320 | this.XosSidePanel.removeInjectedComponents(); |
| 321 | selectedModel = null; |
| 322 | return; |
| 323 | } |
| 324 | selectedModel = n.id; |
| 325 | const modelName = n.model['class_names'].split(',')[0]; |
| 326 | const formConfig = this.XosModelDiscoverer.get(modelName).formCfg; |
| 327 | const model = angular.copy(n.model); |
| 328 | delete model.d3Id; |
| 329 | this.XosSidePanel.injectComponent('xosForm', {config: formConfig, ngModel: model}); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 330 | }); |
| 331 | |
| 332 | this.renderServiceNodes(entering.filter('.service')); |
| 333 | this.renderTenantNodes(entering.filter('.tenant')); |
| 334 | this.renderNetworkNodes(entering.filter('.network')); |
| 335 | this.renderSubscriberNodes(entering.filter('.subscriber')); |
| 336 | } |
| 337 | |
| 338 | private renderLinks(links: IXosServiceGraphLink[]) { |
| 339 | const link = this.linkGroup |
| 340 | .selectAll('line') |
| 341 | .data(links, l => l.id); |
| 342 | |
| 343 | const entering = link.enter(); |
| 344 | |
| 345 | entering.append('line') |
| 346 | .attr({ |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 347 | class: n => `link ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`, |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 348 | 'marker-start': 'url(#arrow)' |
| 349 | }); |
| 350 | } |
| 351 | } |
| 352 | |
| 353 | export const XosFineGrainedTenancyGraph: angular.IComponentOptions = { |
| 354 | template: require('./fine-grained.component.html'), |
| 355 | controllerAs: 'vm', |
| 356 | controller: XosFineGrainedTenancyGraphCtrl, |
| 357 | }; |