Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 1 | import './coarse.component.scss'; |
| 2 | import * as d3 from 'd3'; |
| 3 | import * as $ from 'jquery'; |
Matteo Scandolo | 968e7f2 | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 4 | import {IXosServiceGraphStore} from '../../services/graph.store'; |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 5 | import {IXosServiceGraph, IXosServiceGraphNode, IXosServiceGraphLink} from '../../interfaces'; |
| 6 | import {XosServiceGraphConfig as config} from '../../graph.config'; |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 7 | import {IXosDebouncer} from '../../../core/services/helpers/debounce.helper'; |
| 8 | import {Subscription} from 'rxjs'; |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 9 | import {IXosGraphHelpers} from '../../services/d3-helpers/graph.helpers'; |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 10 | |
Matteo Scandolo | 968e7f2 | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 11 | class XosCoarseTenancyGraphCtrl { |
| 12 | |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 13 | static $inject = [ |
| 14 | '$log', |
| 15 | 'XosServiceGraphStore', |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 16 | 'XosDebouncer', |
| 17 | 'XosGraphHelpers' |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 18 | ]; |
Matteo Scandolo | 968e7f2 | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 19 | |
| 20 | public graph: IXosServiceGraph; |
| 21 | |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 22 | private CoarseGraphSubscription: Subscription; |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 23 | private svg; |
| 24 | private forceLayout; |
| 25 | private linkGroup; |
| 26 | private nodeGroup; |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame^] | 27 | private textSize = 20; |
| 28 | private textOffset = this.textSize / 4; |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 29 | |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 30 | // debounced functions |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 31 | private renderGraph; |
| 32 | |
Matteo Scandolo | 968e7f2 | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 33 | constructor ( |
| 34 | private $log: ng.ILogService, |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 35 | private XosServiceGraphStore: IXosServiceGraphStore, |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 36 | private XosDebouncer: IXosDebouncer, |
| 37 | private XosGraphHelpers: IXosGraphHelpers |
Matteo Scandolo | 968e7f2 | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 38 | ) { |
| 39 | |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 40 | } |
| 41 | |
| 42 | $onInit() { |
| 43 | this.renderGraph = this.XosDebouncer.debounce(this._renderGraph, 500, this); |
| 44 | |
| 45 | this.CoarseGraphSubscription = this.XosServiceGraphStore.getCoarse() |
| 46 | .subscribe( |
| 47 | (res: IXosServiceGraph) => { |
Matteo Scandolo | 98b5f5d | 2017-03-17 17:09:05 -0700 | [diff] [blame] | 48 | this.$log.debug(`[XosCoarseTenancyGraph] Coarse Event and render`, res); |
Matteo Scandolo | 7517178 | 2017-03-08 14:17:01 -0800 | [diff] [blame] | 49 | |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 50 | // id there are no data, do nothing |
Matteo Scandolo | 265c204 | 2017-03-20 10:15:40 -0700 | [diff] [blame] | 51 | if (!res) { |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 52 | return; |
| 53 | } |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 54 | this.graph = res; |
| 55 | this.renderGraph(); |
| 56 | }, |
| 57 | err => { |
| 58 | this.$log.error(`[XosCoarseTenancyGraph] Coarse Event error`, err); |
| 59 | }); |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 60 | |
| 61 | this.handleSvg(); |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 62 | this.setupForceLayout(); |
| 63 | |
| 64 | $(window).on('resize', () => { |
| 65 | this.setupForceLayout(); |
| 66 | this.renderGraph(); |
| 67 | }); |
| 68 | } |
| 69 | |
| 70 | $onDestroy() { |
| 71 | this.CoarseGraphSubscription.unsubscribe(); |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 72 | } |
| 73 | |
| 74 | private _renderGraph() { |
| 75 | this.addNodeLinksToForceLayout(this.graph); |
| 76 | this.renderNodes(this.graph.nodes); |
| 77 | this.renderLinks(this.graph.links); |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 78 | } |
| 79 | |
| 80 | private getSvgDimensions(): {width: number, heigth: number} { |
| 81 | return { |
| 82 | width: $('xos-coarse-tenancy-graph svg').width(), |
| 83 | heigth: $('xos-coarse-tenancy-graph svg').height() |
| 84 | }; |
| 85 | } |
| 86 | |
| 87 | private handleSvg() { |
| 88 | this.svg = d3.select('svg'); |
| 89 | |
| 90 | this.svg.append('svg:defs') |
| 91 | .selectAll('marker') |
| 92 | .data(config.markers) |
| 93 | .enter() |
| 94 | .append('svg:marker') |
| 95 | .attr('id', d => d.id) |
| 96 | .attr('viewBox', d => d.viewBox) |
| 97 | .attr('refX', d => d.refX) |
| 98 | .attr('refY', d => d.refY) |
| 99 | .attr('markerWidth', d => d.width) |
| 100 | .attr('markerHeight', d => d.height) |
| 101 | .attr('orient', 'auto') |
| 102 | .attr('class', d => `${d.id}-marker`) |
| 103 | .append('svg:path') |
| 104 | .attr('d', d => d.path); |
| 105 | |
| 106 | this.linkGroup = this.svg.append('g') |
| 107 | .attr({ |
| 108 | class: 'link-group' |
| 109 | }); |
| 110 | |
| 111 | this.nodeGroup = this.svg.append('g') |
| 112 | .attr({ |
| 113 | class: 'node-group' |
| 114 | }); |
| 115 | } |
| 116 | |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 117 | private setupForceLayout() { |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 118 | |
| 119 | const tick = () => { |
| 120 | this.nodeGroup.selectAll('g.node') |
| 121 | .attr({ |
| 122 | transform: d => `translate(${d.x}, ${d.y})` |
| 123 | }); |
| 124 | |
| 125 | this.linkGroup.selectAll('line') |
| 126 | .attr({ |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 127 | x1: l => l.source.x || 0, |
| 128 | y1: l => l.source.y || 0, |
| 129 | x2: l => l.target.x || 0, |
| 130 | y2: l => l.target.y || 0, |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 131 | }); |
| 132 | }; |
| 133 | const svgDim = this.getSvgDimensions(); |
| 134 | this.forceLayout = d3.layout.force() |
| 135 | .size([svgDim.width, svgDim.heigth]) |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 136 | .linkDistance(config.force.linkDistance) |
| 137 | .charge(config.force.charge) |
| 138 | .gravity(config.force.gravity) |
| 139 | .on('tick', tick); |
| 140 | } |
| 141 | |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 142 | private addNodeLinksToForceLayout(data: IXosServiceGraph) { |
| 143 | this.forceLayout |
| 144 | .nodes(data.nodes) |
| 145 | .links(data.links) |
| 146 | .start(); |
| 147 | } |
| 148 | |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 149 | private renderNodes(nodes: IXosServiceGraphNode[]) { |
| 150 | const self = this; |
| 151 | const node = this.nodeGroup |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 152 | .selectAll('g.node') |
| 153 | .data(nodes, n => n.id); |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 154 | |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 155 | const svgDim = this.getSvgDimensions(); |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 156 | const entering = node.enter() |
| 157 | .append('g') |
| 158 | .attr({ |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 159 | class: n => `node ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`, |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 160 | transform: `translate(${svgDim.width / 2}, ${svgDim.heigth / 2})` |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 161 | }) |
| 162 | .call(this.forceLayout.drag) |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 163 | .on('mousedown', () => { |
| 164 | d3.event.stopPropagation(); |
| 165 | }) |
| 166 | .on('mouseup', (d) => { |
| 167 | d.fixed = true; |
| 168 | }); |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 169 | |
| 170 | entering.append('rect') |
| 171 | .attr({ |
| 172 | rx: config.node.radius, |
| 173 | ry: config.node.radius |
| 174 | }); |
| 175 | |
| 176 | entering.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 | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 180 | }) |
| 181 | .text(n => n.label); |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 182 | // .text(n => `${n.id} - ${n.label}`); |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 183 | |
| 184 | const existing = node.selectAll('rect'); |
| 185 | |
| 186 | |
| 187 | // resize node > rect as contained text |
| 188 | existing.each(function() { |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 189 | const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this); |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 190 | const rect = d3.select(this); |
| 191 | rect.attr({ |
| 192 | width: textBBox.width + config.node.padding, |
| 193 | height: textBBox.height + config.node.padding, |
| 194 | x: textBBox.x - (config.node.padding / 2), |
Matteo Scandolo | 6a7435f | 2017-03-24 18:07:17 -0700 | [diff] [blame^] | 195 | y: (textBBox.y + self.textOffset) - (config.node.padding / 2) |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 196 | }); |
| 197 | }); |
| 198 | } |
| 199 | |
| 200 | private renderLinks(links: IXosServiceGraphLink[]) { |
| 201 | const link = this.linkGroup |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 202 | .selectAll('line') |
| 203 | .data(links, l => l.id); |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 204 | |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 205 | const entering = link.enter(); |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 206 | |
| 207 | // TODO read classes from graph links |
Matteo Scandolo | 0c61c9b | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 208 | |
| 209 | entering.append('line') |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 210 | .attr({ |
Matteo Scandolo | 7629cc4 | 2017-03-13 14:12:15 -0700 | [diff] [blame] | 211 | class: l => `link ${this.XosGraphHelpers.parseElemClasses(l.d3Class)}`, |
Matteo Scandolo | a160eef | 2017-03-06 17:21:26 -0800 | [diff] [blame] | 212 | 'marker-start': 'url(#arrow)' |
| 213 | }); |
Matteo Scandolo | 968e7f2 | 2017-03-03 11:49:18 -0800 | [diff] [blame] | 214 | } |
| 215 | } |
| 216 | |
| 217 | export const XosCoarseTenancyGraph: angular.IComponentOptions = { |
| 218 | template: require('./coarse.component.html'), |
| 219 | controllerAs: 'vm', |
| 220 | controller: XosCoarseTenancyGraphCtrl, |
| 221 | }; |