blob: 5f84384a5cc5656dd18e71f0a6bf12e9a2a2a980 [file] [log] [blame]
/*
* Copyright 2017-present Open Networking Foundation
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import './graph.component.scss';
import * as d3 from 'd3';
import * as $ from 'jquery';
import {IXosGraphStore} from '../../services/graph.store';
import {Subscription} from 'rxjs/Subscription';
import {XosServiceGraphConfig as config} from '../../graph.config';
import {IXosGraphHelpers} from '../../services/d3-helpers/graph-elements.helpers';
import {IXosServiceGraphIcons} from '../../services/d3-helpers/graph-icons.service';
import {IXosNodePositioner} from '../../services/node-positioner.service';
import {IXosNodeRenderer} from '../../services/renderer/node.renderer';
import {IXosSgNode} from '../../interfaces';
import {IXosGraphConfig} from '../../services/graph.config';
class XosServiceGraphCtrl {
static $inject = [
'$log',
'$scope',
'XosGraphStore',
'XosGraphHelpers',
'XosServiceGraphIcons',
'XosNodePositioner',
'XosNodeRenderer',
'XosGraphConfig'
];
public loader: boolean = true;
private GraphSubscription: Subscription;
private graph: any; // this is the Graph instance
// graph element
private svg;
private linkGroup;
private nodeGroup;
private forceLayout;
constructor (
private $log: ng.ILogService,
private $scope: ng.IScope,
private XosGraphStore: IXosGraphStore,
private XosGraphHelpers: IXosGraphHelpers,
private XosServiceGraphIcons: IXosServiceGraphIcons,
private XosNodePositioner: IXosNodePositioner,
private XosNodeRenderer: IXosNodeRenderer,
private XosGraphConfig: IXosGraphConfig
) {
this.$log.info('[XosServiceGraph] Component setup');
this.XosGraphConfig.setupKeyboardShortcuts();
this.setupSvg();
this.setupForceLayout();
this.GraphSubscription = this.XosGraphStore.get()
.subscribe(
graph => {
this.graph = graph;
if (this.graph.nodes().length > 0) {
this.loader = false;
this.renderGraph(this.graph);
}
},
error => {
this.$log.error('[XosServiceGraph] XosGraphStore observable error: ', error);
}
);
this.$scope.$on('xos.sg.update', () => {
this.$log.info(`[XosServiceGraph] Received event: xos.sg.update`);
this.renderGraph(this.graph);
});
$(window).resize(() => {
this.renderGraph(this.graph);
});
}
$onDestroy() {
this.GraphSubscription.unsubscribe();
}
public closeFullscreen() {
this.XosGraphConfig.toggleFullscreen();
}
private setupSvg() {
this.svg = d3.select('xos-service-graph svg');
this.linkGroup = this.svg.append('g')
.attr({
class: 'link-group'
});
this.nodeGroup = this.svg.append('g')
.attr({
class: 'node-group'
});
}
private setupForceLayout() {
this.$log.debug(`[XosServiceGraph] Setup Force Layout`);
const tick = () => {
this.nodeGroup.selectAll('g.node')
.attr({
transform: d => `translate(${d.x}, ${d.y})`
});
this.linkGroup.selectAll('line')
.attr({
x1: l => l.source.x || 0,
y1: l => l.source.y || 0,
x2: l => l.target.x || 0,
y2: l => l.target.y || 0,
});
};
const svgDim = this.getSvgDimensions();
this.forceLayout =
d3.layout.force()
.size([svgDim.width, svgDim.height])
.on('tick', tick);
}
private getSvgDimensions(): {width: number, height: number} {
return {
width: $('xos-service-graph svg').width(),
height: $('xos-service-graph svg').height()
};
}
private renderGraph(graph: any) {
let nodes: IXosSgNode[] = this.XosGraphStore.nodesFromGraph(graph);
let links = this.XosGraphStore.linksFromGraph(graph);
const svgDim = this.getSvgDimensions();
this.XosNodePositioner.positionNodes(svgDim, nodes)
.then((nodes: IXosSgNode[]) => {
this.forceLayout
.nodes(nodes)
.links(links)
.size([svgDim.width, svgDim.height])
.linkDistance(config.force.linkDistance)
.charge(config.force.charge)
.gravity(config.force.gravity)
.start();
// render nodes
this.XosNodeRenderer.renderNodes(this.forceLayout, this.nodeGroup, nodes);
this.renderLinks(links);
});
}
private renderLinks(links: any[]) {
const link = this.linkGroup
.selectAll('line')
.data(links, l => l.id);
const entering = link.enter();
entering.append('line')
.attr({
id: n => n.id,
class: n => n.type
});
link.exit().remove();
}
}
export const XosServiceGraph: angular.IComponentOptions = {
template: require('./graph.component.html'),
controllerAs: 'vm',
controller: XosServiceGraphCtrl,
};