@savantly/ngx-gremlin
Version:
Gremlin client [Tinkerpop] for an Angular app
1,456 lines (1,444 loc) • 79.7 kB
JavaScript
import { Injectable, Component, Inject, Input, ViewEncapsulation, NgModule } from '@angular/core';
import { GremlinService } from '@savantly/gremlin-js';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { scaleOrdinal, schemeCategory20, zoom, event, forceSimulation, forceManyBody, forceLink, forceCenter, forceY, forceX, select, selectAll, selection, mouse, drag, range } from 'd3';
import { Observable } from 'rxjs/Observable';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatSidenavModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatListModule, MatSelectModule, MatCheckboxModule, MatToolbarModule, MatSliderModule, MatDialogModule } from '@angular/material';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/** @enum {number} */
const GraphsonFormat = {
GraphSON1: 1,
GraphSON2: 2,
GraphSON3: 3,
};
GraphsonFormat[GraphsonFormat.GraphSON1] = "GraphSON1";
GraphsonFormat[GraphsonFormat.GraphSON2] = "GraphSON2";
GraphsonFormat[GraphsonFormat.GraphSON3] = "GraphSON3";
class GraphexpService {
/**
* @param {?} options
*/
constructor(options) {
this.COMMUNICATION_METHOD = GraphsonFormat.GraphSON3;
this.graphInfoData = new BehaviorSubject({});
this.nodeNames = new BehaviorSubject([]);
this.nodeProperties = new BehaviorSubject([]);
this.edgeProperties = new BehaviorSubject([]);
this.node_limit_per_request = 50;
this.gremlinService = new GremlinService(options);
}
/**
* @return {?}
*/
queryGraphInfo() {
const /** @type {?} */ gremlin_query_nodes = 'nodes = g.V().groupCount().by(label);';
const /** @type {?} */ gremlin_query_edges = 'edges = g.E().groupCount().by(label);';
const /** @type {?} */ gremlin_query_nodes_prop = 'nodesprop = g.V().valueMap().select(keys).groupCount();';
const /** @type {?} */ gremlin_query_edges_prop = 'edgesprop = g.E().valueMap().select(keys).groupCount();';
const /** @type {?} */ gremlinQuery = gremlin_query_nodes + gremlin_query_nodes_prop
+ gremlin_query_edges + gremlin_query_edges_prop
+ '[nodes.toList(),nodesprop.toList(),edges.toList(),edgesprop.toList()]';
this.executeQuery(gremlinQuery).then((response) => {
this.handleGraphInfo(response.data);
});
}
/**
* @param {?} field
* @param {?} value
* @return {?}
*/
queryNodes(field, value) {
const /** @type {?} */ input_string = value;
const /** @type {?} */ input_field = field;
let /** @type {?} */ filtered_string = input_string; // You may add .replace(/\W+/g, ''); to refuse any character not in the alphabet
if (filtered_string.length > 50) {
filtered_string = filtered_string.substring(0, 50); // limit string length
}
// Translate to Gremlin query
let /** @type {?} */ gremlin_query_nodes = null;
let /** @type {?} */ gremlin_query_edges = null;
let /** @type {?} */ gremlin_query = null;
if (input_string === '') {
gremlin_query_nodes = `nodes = g.V().limit(${this.node_limit_per_request})`;
gremlin_query_edges =
`edges = g.V().limit(${this.node_limit_per_request}).aggregate('node').outE().as('edge').inV().where(within('node')).select('edge')`;
gremlin_query = gremlin_query_nodes + '\n' + gremlin_query_edges + '\n' + '[nodes.toList(),edges.toList()]';
}
else {
let /** @type {?} */ has_str = `has('${input_field}', '${filtered_string}')`;
if (this.isInt(input_string)) {
has_str = `has('${input_field}', ${filtered_string})`;
}
gremlin_query = 'g.V().' + has_str;
gremlin_query_nodes = 'nodes = g.V().' + has_str;
gremlin_query_edges = 'edges = g.V().' + has_str
+ `.aggregate('node').outE().as('edge').inV().where(within('node')).select('edge')`;
gremlin_query = gremlin_query_nodes + '\n' + gremlin_query_edges + '\n' + '[nodes.toList(),edges.toList()]';
}
console.log(gremlin_query);
return new Promise((resolve, reject) => {
this.executeQuery(gremlin_query).then(response => {
resolve(this.arrangeData(response.data));
}, error => { reject(error); });
});
}
/**
* @param {?} d
* @return {?}
*/
getRelatedNodes(d) {
let /** @type {?} */ id = d.id;
if (isNaN(id)) {
id = `'${id}'`;
}
const /** @type {?} */ gremlin_query_nodes = `nodes = g.V(${id}).as('node').both().as('node').select(all,'node').inject(g.V(${id})).unfold()`;
const /** @type {?} */ gremlin_query_edges = `edges = g.V(${id}).bothE()`;
const /** @type {?} */ gremlin_query = `${gremlin_query_nodes}\n ${gremlin_query_edges}\n[nodes.toList(),edges.toList()]`;
return new Promise((resolve, reject) => {
this.executeQuery(gremlin_query).then(response => {
resolve(this.arrangeData(response.data));
}, error => { reject(error); });
});
}
/**
* @param {?} label
* @param {?} properties
* @return {?}
*/
createNode(label, properties) {
const /** @type {?} */ promise = new Promise((resolve, reject) => {
let /** @type {?} */ propString = '';
properties.forEach((kv) => {
propString += `, '${kv.key}', '${kv.value}'`;
});
const /** @type {?} */ gremlin = `vertex = graph.addVertex(label, '${label}'${propString})`;
console.log(`executing query: ${gremlin}`);
this.executeQuery(gremlin).then(response => {
resolve(response.data);
}, error => {
console.error(error);
reject(error);
});
});
return promise;
}
/**
* @param {?} item
* @return {?}
*/
createLink(item) {
const /** @type {?} */ properties = item.properties;
const /** @type {?} */ promise = new Promise((resolve, reject) => {
const /** @type {?} */ gremlin = `edge = g.V(${item.source}).next().addEdge('${item.label}',g.V(${item.target}).next());`;
console.log(`executing query: ${gremlin}`);
this.executeQuery(gremlin).then(response => {
resolve(response.data);
}, error => {
console.error(error);
reject(error);
});
});
return promise;
}
/**
* @param {?} gremlin
* @param {?=} bindings
* @return {?}
*/
executeQuery(gremlin, bindings) {
const /** @type {?} */ promise = new Promise((resolve, reject) => {
const /** @type {?} */ query = this.gremlinService.createQuery(gremlin, bindings);
query.onComplete = (response) => {
resolve(response);
};
this.gremlinService.sendMessage(query);
});
return promise;
}
/**
* @param {?} data
* @return {?}
*/
handleGraphInfo(data) {
if (this.COMMUNICATION_METHOD === GraphsonFormat.GraphSON3) {
data = this.graphson3to1(data);
}
const /** @type {?} */ nodeNames = [];
data[0].map((nameGroup) => {
for (const /** @type {?} */ nameItem of Object.keys(nameGroup)) {
nodeNames.push({ key: nameItem, value: nameGroup[nameItem] });
}
});
this.nodeNames.next(nodeNames);
this.graphInfoData.next(data);
this.nodeProperties.next(this.make_properties_list(data[1][0]));
this.edgeProperties.next(this.make_properties_list(data[3][0]));
}
/**
* @param {?} data
* @return {?}
*/
graphson3to1(data) {
// Convert data from graphSON v2 format to graphSON v1
if (!(Array.isArray(data) || ((typeof data === 'object') && (data !== null)))) {
return data;
}
if ('@type' in data) {
if (data['@type'] === 'g:List') {
data = data['@value'];
return this.graphson3to1(data);
}
else if (data['@type'] === 'g:Set') {
data = data['@value'];
return data;
}
else if (data['@type'] === 'g:Map') {
const /** @type {?} */ data_tmp = {};
for (let /** @type {?} */ i = 0; i < data['@value'].length; i += 2) {
let /** @type {?} */ data_key = data['@value'][i];
if ((typeof data_key === 'object') && (data_key !== null)) {
data_key = this.graphson3to1(data_key);
}
if (Array.isArray(data_key)) {
data_key = JSON.stringify(data_key).replace(/\'/g, ' ');
}
data_tmp[data_key] = this.graphson3to1(data['@value'][i + 1]);
}
data = data_tmp;
return data;
}
else {
data = data['@value'];
if ((typeof data === 'object') && (data !== null)) {
data = this.graphson3to1(data);
}
return data;
}
}
else if (Array.isArray(data) || ((typeof data === 'object') && (data !== null))) {
for (const /** @type {?} */ key of Object.keys(data)) {
data[key] = this.graphson3to1(data[key]);
}
return data;
}
return data;
}
/**
* @param {?} data
* @return {?}
*/
arrangeData(data) {
if (this.COMMUNICATION_METHOD === GraphsonFormat.GraphSON3) {
data = this.graphson3to1(data);
return this.arrange_datav3(data);
}
else {
return this.arrange_datav2(data);
}
}
/**
* @param {?} data
* @return {?}
*/
arrange_datav3(data) {
// Extract node and edges from the data returned for 'search' and 'click' request
// Create the graph object
const /** @type {?} */ nodes = [], /** @type {?} */ links = [];
for (const /** @type {?} */ key of Object.keys(data)) {
data[key].forEach((item) => {
if (!('inV' in item) && this.idIndex(nodes, item.id) == null) {
// if vertex and not already in the list
item.type = 'vertex';
nodes.push(this.extract_infov3(item));
}
if (('inV' in item) && this.idIndex(links, item.id) == null) {
item.type = 'edge';
links.push(this.extract_infov3(item));
}
});
}
return { nodes: nodes, links: links };
}
/**
* @param {?} data
* @return {?}
*/
arrange_datav2(data) {
// Extract node and edges from the data returned for 'search' and 'click' request
// Create the graph object
const /** @type {?} */ nodes = [], /** @type {?} */ links = [];
for (const /** @type {?} */ key of Object.keys(data)) {
data[key].forEach(function (item) {
if (item.type === 'vertex' && this.idIndex(nodes, item.id) === null) {
// if vertex and not already in the list
nodes.push(this.extract_infov2(item));
}
if (item.type === 'edge' && this.idIndex(links, item.id) == null) {
links.push(this.extract_infov2(item));
}
});
}
return { nodes: nodes, links: links };
}
/**
* @param {?} data
* @return {?}
*/
extract_infov2(data) {
const /** @type {?} */ data_dic = { id: data.id, label: data.label, type: data.type, properties: {}, source: null, target: null };
const /** @type {?} */ prop_dic = data.properties;
for (const /** @type {?} */ key in prop_dic) {
if (prop_dic.hasOwnProperty(key)) {
data_dic.properties[key] = prop_dic[key];
}
}
if (data.type === 'edge') {
data_dic.source = data.outV;
data_dic.target = data.inV;
}
return data_dic;
}
/**
* @param {?} data
* @return {?}
*/
extract_infov3(data) {
const /** @type {?} */ data_dic = { id: data.id, label: data.label, type: data.type, properties: {}, source: null, target: null };
const /** @type {?} */ prop_dic = data.properties;
for (const /** @type {?} */ key in prop_dic) {
if (prop_dic.hasOwnProperty(key)) {
let /** @type {?} */ property = null;
if (data.type === 'vertex') {
// Extracting the Vertexproperties (properties of properties for vertices)
property = prop_dic[key];
property['summary'] = this.get_vertex_prop_in_list(prop_dic[key]).toString();
}
else {
property = prop_dic[key]['value'];
}
data_dic.properties[key] = property;
}
}
if (data.type === 'edge') {
data_dic.source = data.outV;
data_dic.target = data.inV;
}
return data_dic;
}
/**
* @param {?} vertexProperty
* @return {?}
*/
get_vertex_prop_in_list(vertexProperty) {
const /** @type {?} */ prop_value_list = [];
for (const /** @type {?} */ key of Object.keys(vertexProperty)) {
prop_value_list.push(vertexProperty[key]['value']);
}
return prop_value_list;
}
/**
* @param {?} list
* @param {?} elem
* @return {?}
*/
idIndex(list, elem) {
// find the element in list with id equal to elem
// return its index or null if there is no
for (let /** @type {?} */ i = 0; i < list.length; i++) {
if (list[i].id === elem) {
return i;
}
}
return null;
}
/**
* @param {?} data
* @return {?}
*/
make_properties_list(data) {
const /** @type {?} */ prop_dic = {};
for (let /** @type {?} */ prop_str of Object.keys(data)) {
prop_str = prop_str.replace(/[\[\ \"\'\]]/g, ''); // get rid of symbols [,",',] and spaces
const /** @type {?} */ prop_list = prop_str.split(',');
for (let /** @type {?} */ prop_idx = 0; prop_idx < prop_list.length; prop_idx++) {
prop_dic[prop_list[prop_idx]] = 0;
}
}
const /** @type {?} */ properties_list = [];
for (const /** @type {?} */ key of Object.getOwnPropertyNames(prop_dic)) {
properties_list.push(key);
}
return properties_list;
}
/**
* @param {?} value
* @return {?}
*/
isInt(value) {
return !isNaN(value) &&
!isNaN(parseInt(value, 10));
}
/**
* @param {?} edge
* @return {?}
*/
updateSelection(edge) {
console.log('graphexpService#updateSelection: edge selected: ' + edge.id);
}
}
GraphexpService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
GraphexpService.ctorParameters = () => [
null,
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class GraphConfig {
constructor() {
this.enableEdit = true;
this.nodeLabels = [];
this.linkLabels = [];
this.numberOfLayers = 3;
this.format = GraphsonFormat.GraphSON3;
// Physics
this.force_strength = -600;
this.link_strength = 0.2;
this.force_x_strength = 0.1;
this.force_y_strength = 0.1;
// Nodes
this.default_node_size = 15;
this.default_stroke_width = 2;
this.default_node_color = '#80E810';
this.active_node_margin = 6;
this.active_node_margin_opacity = 0.3;
// Edges
this.default_edge_stroke_width = 3;
this.default_edge_color = '#CCC';
this.edge_label_color = '#111';
this.colorPalette = scaleOrdinal(schemeCategory20);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class D3Node {
/**
* @param {?=} options
*/
constructor(options) {
this.properties = {};
Object.assign(this, options);
}
/**
* @param {?} key
* @param {?} value
* @return {?}
*/
addProperty(key, value) {
this.properties[key] = value;
}
/**
* @param {?} key
* @return {?}
*/
removeProperty(key) {
delete this.properties[key];
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class GraphLayers {
/**
* @param {?} graphViz
*/
constructor(graphViz) {
this.graphViz = graphViz;
// Submodule that handles layers of visualization
this.old_Nodes = [];
this.old_Links = [];
this._Nodes = [];
this._Links = [];
}
/**
* @return {?}
*/
depth() {
return this.config.numberOfLayers;
}
/**
* @return {?}
*/
get config() {
return this.graphViz.config;
}
/**
* @return {?}
*/
get nodes() {
return this._Nodes;
}
/**
* @return {?}
*/
get links() {
return this._Links;
}
/**
* @return {?}
*/
get _svg() {
return this.graphViz.graphRoot;
}
/**
* @return {?}
*/
push_layers() {
// old links and nodes become older
// and are moved to the next deeper layer
for (let /** @type {?} */ k = this.config.numberOfLayers; k > 0; k--) {
const /** @type {?} */ kp = k - 1;
this._svg.selectAll('.old_edge' + kp).classed('old_edge' + k, true);
this._svg.selectAll('.old_node' + kp).classed('old_node' + k, true);
this._svg.selectAll('.old_edgepath' + kp).classed('old_edgepath' + k, true);
this._svg.selectAll('.old_edgelabel' + kp).classed('old_edgelabel' + k, true);
}
}
/**
* @return {?}
*/
clear_old() {
this.old_Nodes = [];
this.old_Links = [];
}
/**
* @param {?} d
* @return {?}
*/
update_data(d) {
// Save the data
const /** @type {?} */ previous_nodes = this._svg.selectAll('g').filter('.active_node');
const /** @type {?} */ previous_nodes_data = previous_nodes.data();
this.old_Nodes = this.updateAdd(this.old_Nodes, previous_nodes_data);
const /** @type {?} */ previous_links = this._svg.selectAll('.active_edge');
const /** @type {?} */ previous_links_data = previous_links.data();
this.old_Links = this.updateAdd(this.old_Links, previous_links_data);
// handle the pinned nodes
const /** @type {?} */ pinned_Nodes = this._svg.selectAll('g').filter('.pinned');
const /** @type {?} */ pinned_nodes_data = pinned_Nodes.data();
// get the node data and merge it with the pinned nodes
this._Nodes = d.nodes;
this._Nodes = this.updateAdd(this._Nodes, pinned_nodes_data);
// add coordinates to the new active nodes that already existed in the previous step
this._Nodes = this.transfer_coordinates(this._Nodes, this.old_Nodes);
// retrieve the links between nodes and pinned nodes
this._Links = d.links.concat(previous_links_data); // first gather the links
this._Links = this.find_active_links(this._Links, this._Nodes); // then find the ones that are between active nodes
}
/**
* @param {?} array1
* @param {?} array2
* @return {?}
*/
updateAdd(array1, array2) {
// Update lines of array1 with the ones of array2 when the elements' id match
// and add elements of array2 to array1 when they do not exist in array1
const /** @type {?} */ arraytmp = array2.slice(0);
const /** @type {?} */ removeValFromIndex = [];
array1.forEach((d, index, thearray) => {
for (let /** @type {?} */ i = 0; i < arraytmp.length; i++) {
if (d.id === arraytmp[i].id) {
thearray[index] = arraytmp[i];
removeValFromIndex.push(i);
}
}
});
// remove the already updated values (in reverse order, not to mess up the indices)
removeValFromIndex.sort();
for (let /** @type {?} */ i = removeValFromIndex.length - 1; i >= 0; i--) {
arraytmp.splice(removeValFromIndex[i], 1);
}
return array1.concat(arraytmp);
}
/**
* @param {?} list_of_links
* @param {?} active_nodes
* @return {?}
*/
find_active_links(list_of_links, active_nodes) {
// find the links in the list_of_links that are between the active nodes and discard the others
let /** @type {?} */ active_links = [];
list_of_links.forEach((row) => {
for (let /** @type {?} */ i = 0; i < active_nodes.length; i++) {
for (let /** @type {?} */ j = 0; j < active_nodes.length; j++) {
if (active_nodes[i].id === row.source.id && active_nodes[j].id === row.target.id) {
const /** @type {?} */ L_data = new D3Node(row);
L_data.source = row.source.id;
L_data.target = row.target.id;
active_links = active_links.concat(L_data);
}
else if (active_nodes[i].id === row.source && active_nodes[j].id === row.target) {
const /** @type {?} */ L_data = row;
active_links = active_links.concat(L_data);
}
}
}
});
// the active links are in active_links but there can be some duplicates
// remove duplicates links
const /** @type {?} */ dic = {};
for (let /** @type {?} */ i = 0; i < active_links.length; i++) {
dic[active_links[i].id] = active_links[i]; // this will remove the duplicate links (with same id)
}
const /** @type {?} */ list_of_active_links = [];
for (const /** @type {?} */ key of Object.keys(dic)) {
list_of_active_links.push(dic[key]);
}
return list_of_active_links;
}
/**
* @param {?} Nodes
* @param {?} old_Nodes
* @return {?}
*/
transfer_coordinates(Nodes, old_Nodes) {
// Transfer coordinates from old_nodes to the new nodes with the same id
for (let /** @type {?} */ i = 0; i < old_Nodes.length; i++) {
for (let /** @type {?} */ j = 0; j < Nodes.length; j++) {
if (Nodes[j].id === old_Nodes[i].id) {
Nodes[j].x = old_Nodes[i].x;
Nodes[j].y = old_Nodes[i].y;
Nodes[j].fx = old_Nodes[i].x;
Nodes[j].fy = old_Nodes[i].y;
Nodes[j].vx = old_Nodes[i].vx;
Nodes[j].vy = old_Nodes[i].vy;
}
}
}
return Nodes;
}
/**
* @param {?} elem_class
* @param {?} elem_class_old
* @return {?}
*/
remove_duplicates(elem_class, elem_class_old) {
// Remove all the duplicate nodes and edges among the old_nodes and old_edges.
// A node or an edge can not be on several layers at the same time.
selectAll(elem_class).each((d) => {
const /** @type {?} */ ID = d.id;
for (let /** @type {?} */ n = 0; n < this.config.numberOfLayers; n++) {
const /** @type {?} */ list_old_elements = selectAll(elem_class_old + n);
// list_old_nodes_data = list_old_nodes.data();
list_old_elements.each((od) => {
if (od.id === ID) {
select(this).remove();
// console.log('Removed!!')
}
});
}
});
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class GraphShapes {
/**
* @param {?} graphSONFormat
* @param {?} graph_viz
* @param {?} graphexpService
*/
constructor(graphSONFormat, graph_viz, graphexpService) {
this.graphSONFormat = graphSONFormat;
this.graph_viz = graph_viz;
this.graphexpService = graphexpService;
// https://github.com/wbkd/d3-extended
selection.prototype.moveToFront = function () {
// move the selection to the front
return this.each(function () {
this.parentNode.appendChild(this);
});
};
selection.prototype.moveToBack = function () {
// move the selection to the back
return this.each(function () {
const /** @type {?} */ firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
}
/**
* @param {?} nb_layers
* @return {?}
*/
decorate_old_elements(nb_layers) {
// Decrease the opacity of nodes and edges when they get old
for (let /** @type {?} */ k = 0; k < nb_layers; k++) {
selectAll('.old_edge' + k)
.style('opacity', function () {
return 0.8 * (1 - k / nb_layers);
});
selectAll('.old_node' + k)
.style('opacity', function () {
return 0.8 * (1 - k / nb_layers);
});
selectAll('.old_edgelabel' + k)
.style('opacity', function () {
return 0.8 * (1 - k / nb_layers);
});
}
}
/**
* @param {?} value
* @return {?}
*/
show_names(value) {
const /** @type {?} */ text_to_show = selectAll('.text_details');
if (value) {
text_to_show.style('visibility', 'visible');
}
else {
text_to_show.style('visibility', 'hidden');
}
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class GraphLinks {
/**
* @param {?} graphViz
*/
constructor(graphViz) {
this.graphViz = graphViz;
}
/**
* @return {?}
*/
get config() {
return this.graphViz.config;
}
/**
* @return {?}
*/
get graphRoot() {
return this.graphViz.graphRoot;
}
/**
* @return {?}
*/
get linkModels() {
return this.graphViz.linkModels;
}
/**
* @return {?}
*/
get nodeModels() {
return this.graphViz.nodeModels;
}
/**
* @return {?}
*/
get selectLinks() {
return this.graphViz.selectLinks;
}
/**
* @return {?}
*/
get selectEdgePaths() {
return this.graphViz.selectEdgePaths;
}
/**
* @return {?}
*/
get selectEdgeLabels() {
return this.graphViz.selectEdgeLabels;
}
/**
* @return {?}
*/
get selectGraphNodes() {
return this.graphViz.selectGraphNodes;
}
/**
* @param {?} arrangedData
* @return {?}
*/
update(arrangedData) {
// links not active anymore are classified old_links
this.selectLinks.exit().classed('old_edge0', true).classed('active_edge', false);
this.selectEdgePaths.exit().classed('old_edgepath0', true).classed('active_edgepath', false);
this.selectEdgeLabels.exit().classed('old_edgelabel0', true).classed('active_edgelabel', false);
// handling active links associated to the data
const /** @type {?} */ edgepaths_e = this.selectEdgePaths.enter(), /** @type {?} */
edgelabels_e = this.selectEdgeLabels.enter(), /** @type {?} */
link_e = this.selectLinks.enter();
const /** @type {?} */ decor_out = this.decorate(link_e, edgepaths_e, edgelabels_e);
const /** @type {?} */ links = decor_out[0], /** @type {?} */ edgepaths = decor_out[1], /** @type {?} */
edgelabels = decor_out[2];
// previous links plus new links are merged
links.merge(this.selectLinks);
edgepaths.merge(this.selectEdgePaths);
edgelabels.merge(this.selectEdgeLabels);
}
/**
* @return {?}
*/
tick() {
this.selectLinks
.attr('x1', function (d) {
return d.source.x;
})
.attr('y1', function (d) {
return d.source.y;
})
.attr('x2', function (d) {
return d.target.x;
})
.attr('y2', function (d) {
return d.target.y;
});
this.selectEdgePaths.attr('d', function (d) {
return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
});
this.selectEdgeLabels.attr('transform', function (d) {
if (d.target.x < d.source.x) {
const /** @type {?} */ bbox = this.getBBox();
const /** @type {?} */ rx = bbox.x + bbox.width / 2;
const /** @type {?} */ ry = bbox.y + bbox.height / 2;
return 'rotate(180 ' + rx + ' ' + ry + ')';
}
else {
return 'rotate(0)';
}
});
}
/**
* @param {?} d
* @return {?}
*/
getStrokeWidth(d) {
if ('stroke_width' in d) {
return d.stroke_width;
}
else {
return this.config.default_edge_stroke_width;
}
}
/**
* @param {?} d
* @return {?}
*/
getEdgeText(d) {
if ('text' in d) {
return d.text;
}
else {
return d.properties.weight;
}
}
/**
* @param {?} d
* @return {?}
*/
getEdgeColor(d) {
if ('color' in d) {
return d.color;
}
else {
return this.config.default_edge_color;
}
}
/**
* @param {?} edges
* @param {?} edgepaths
* @param {?} edgelabels
* @return {?}
*/
decorate(edges, edgepaths, edgelabels) {
const /** @type {?} */ edges_deco = edges.append('line').attr('class', 'edge').classed('active_edge', true)
.attr('source_ID', function (d) {
return d.source;
})
.attr('target_ID', function (d) {
return d.target;
})
.attr('ID', function (d) {
return d.id;
});
this.createMarkers(edges_deco);
// Attach the arrows
edges_deco.attr('marker-end', function (d) {
return 'url(#marker_' + d.id + ')';
})
.attr('stroke-width', (d) => this.getStrokeWidth(d))
.append('title').text(function (d) {
return d.properties.weight;
});
// Attach the edge labels
const /** @type {?} */ e_label = this.createEdgeLabels(edgepaths, edgelabels);
const /** @type {?} */ edgepaths_deco = e_label[0];
const /** @type {?} */ edgelabels_deco = e_label[1];
edgelabels_deco.append('textPath')
.attr('class', 'edge_text')
.attr('href', function (d, i) {
return '#edgepath' + d.id;
})
.style('text-anchor', 'middle')
.style('pointer-events', 'none')
.attr('startOffset', '50%')
.text(function (d) {
return d.label;
});
// Attach the edge actions
this.attachEdgeEvents(edges_deco);
// Add property info if checkbox checked
this.addEnabledProperties('edges', edgelabels_deco);
return [edges_deco, edgepaths_deco, edgelabels_deco];
}
/**
* @param {?} id
* @return {?}
*/
nodeModelById(id) {
// return data associated to the node with id 'id'
for (const /** @type {?} */ node in this.nodeModels) {
// console.log(_Nodes[node])
if (this.nodeModels[node].id === id) {
return this.nodeModels[node];
}
}
}
/**
* @param {?} edge_in
* @return {?}
*/
createMarkers(edge_in) {
const /** @type {?} */ edge_data = edge_in.data();
const /** @type {?} */ arrow_data = this.graphRoot.selectAll('.arrow').data();
const /** @type {?} */ data = arrow_data.concat(edge_data);
this.graphRoot.selectAll('.arrow')
.data(data)
.enter()
.append('marker')
.attr('class', 'arrow')
.attr('id', (d) => { return 'marker_' + d.id; })
.attr('markerHeight', 5)
.attr('markerWidth', 5)
.attr('markerUnits', 'strokeWidth')
.attr('orient', 'auto')
.attr('refX', (d) => {
const /** @type {?} */ node = this.nodeModelById(d.target);
return this.graphViz.graphNodes.getNodeSize(node) + this.graphViz.graphNodes.getNodeStrokeWidth(node);
})
.attr('refY', 0)
.attr('viewBox', '0 -5 10 10')
.append('svg:path')
.attr('d', 'M0,-5L10,0L0,5')
.style('fill', (d) => { return this.getEdgeColor(d); });
}
/**
* @param {?} item
* @param {?} selected_items
* @return {?}
*/
addEnabledProperties(item, selected_items) {
// Add text from a property if the checkbox is checked on the sidebar
const /** @type {?} */ item_properties = [];
for (let /** @type {?} */ prop_idx = 0; prop_idx < item_properties.length; prop_idx++) {
const /** @type {?} */ prop_name = item_properties[prop_idx];
const /** @type {?} */ prop_id_nb = prop_idx;
this.graphViz.attachEnabledProperties(selected_items, prop_name, prop_id_nb, item);
}
}
/**
* @param {?} edgepaths
* @param {?} edgelabels
* @return {?}
*/
createEdgeLabels(edgepaths, edgelabels) {
const /** @type {?} */ edgepaths_deco = edgepaths.append('path')
.attr('class', 'edgepath').classed('active_edgepath', true)
.attr('fill-opacity', 0)
.attr('stroke-opacity', 0)
.attr('id', function (d, i) {
return 'edgepath' + d.id;
})
.attr('ID', function (d) {
return d.id;
})
.style('pointer-events', 'none');
const /** @type {?} */ edgelabels_deco = edgelabels.append('text')
.attr('dy', -3)
.style('pointer-events', 'none')
.attr('class', 'edgelabel').classed('active_edgelabel', true)
.attr('id', function (d, i) {
return 'edgelabel' + d.id;
})
.attr('ID', function (d) {
return d.id;
})
.attr('font-size', 10)
.attr('fill', this.config.edge_label_color);
return [edgepaths_deco, edgelabels_deco];
}
/**
* @param {?} edge
* @return {?}
*/
attachEdgeEvents(edge) {
edge.on('mouseover', (theEdge, index, elements) => {
console.log('mouse over!!');
const /** @type {?} */ line = elements[index];
select(line).selectAll('.text_details').style('visibility', 'visible');
})
.on('mouseout', (theEdge, index, elements) => {
const /** @type {?} */ line = elements[index];
select(line).selectAll('.text_details').style('visibility', 'hidden');
})
.on('click', (theEdge, index, elements) => {
console.log('edge clicked!');
});
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class GraphNodes {
/**
* @param {?} graphViz
*/
constructor(graphViz) {
this.graphViz = graphViz;
this.connectionCreated = new BehaviorSubject(null);
}
/**
* @return {?}
*/
get config() {
return this.graphViz.config;
}
/**
* @return {?}
*/
get graphRoot() {
return this.graphViz.graphRoot;
}
/**
* @return {?}
*/
get nodeModels() {
return this.graphViz.nodeModels;
}
/**
* @return {?}
*/
get simulation() {
return this.graphViz.simulation;
}
/**
* @return {?}
*/
get isShifted() {
return window.event['shiftKey'] === true;
}
/**
* get all active nodes in the graph
* @return {?}
*/
get graphNodes() {
return this.graphViz.selectGraphNodes;
}
/**
* @param {?} relativeNode
* @return {?}
*/
mouseXY(relativeNode) {
const /** @type {?} */ xy = mouse(relativeNode);
return {
x: xy[0],
y: xy[1]
};
}
/**
* for each tick
* @return {?}
*/
tick() {
this.graphNodes
.attr('transform', function (d) {
return `translate(${d.x}, ${d.y})`;
});
}
/**
* update the node data in the graph
* @param {?} arrangedData
* @return {?}
*/
update(arrangedData) {
console.log('GraphNodes#update');
// old nodes not active any more are tagged
this.graphNodes.exit().classed('old_node0', true).classed('active_node', false);
// nodes associated to the data are constructed
let /** @type {?} */ nodes = this.graphNodes.enter();
// add node decoration
const /** @type {?} */ node_deco = this.decorateNodes(nodes);
nodes = node_deco.merge(nodes);
}
/**
* @param {?} node
* @return {?}
*/
decorateNodes(node) {
const /** @type {?} */ _self = this;
const /** @type {?} */ node_deco = node.append('g')
.attr('class', 'active_node').attr('ID', function (d) {
return d.id;
})
.classed('node', true);
// Attach the event listener
this.attachNodeEvents(node_deco);
node_deco.moveToFront();
// Create the circle shape
const /** @type {?} */ node_base_circle = node_deco.append('circle').classed('base_circle', true)
.attr('r', (d) => this.getNodeSize(d))
.style('stroke-width', (d) => this.getNodeStrokeWidth(d))
.style('stroke', 'black')
.attr('fill', (d) => this.getNodeColor(d));
node_base_circle.append('title').text(d => this.getNodeText(d));
// Add the text to the nodes
node_deco.append('text').classed('text_details', true)
.attr('x', (d) => {
return this.config.default_node_size + 2;
})
.text(d => this.getNodeText(d))
.style('visibility', 'hidden');
node_deco.append('text').classed('text_details', true)
.attr('x', (d) => {
return this.config.default_node_size + 4;
})
.attr('y', this.config.default_node_size)
.text(d => this.getNodeSubText(d))
.style('visibility', 'hidden');
// Add the node pin
const /** @type {?} */ node_pin = node_deco.append('circle').classed('Pin', true)
.attr('r', (d) => {
return this.config.default_node_size / 2;
})
.attr('transform', (d) => {
return 'translate(' + (this.config.default_node_size * 3 / 4) + ',' + (-this.config.default_node_size * 3 / 4) + ')';
})
.attr('fill', this.config.default_node_color)
.moveToBack()
.style('visibility', 'hidden');
node_pin.on('click', function (d) {
_self.pinIt(this, d);
});
// spot the active node and draw additional circle around it
/* TODO: make active node different
if (with_active_node) {
d3.selectAll('.active_node').each((d) => {
if (d.id === with_active_node) {
const n_radius = Number(d3.select(this).select('.base_circle').attr('r')) + this.active_node_margin;
d3.select(this)
.append('circle').classed('focus_node', true)
.attr('r', n_radius)
.attr('fill', this.node_color)
.attr('opacity', this.active_node_margin_opacity)
.moveToBack();
}
});
}
*/
return node_deco;
}
/**
* @param {?} node
* @return {?}
*/
attachNodeEvents(node) {
const /** @type {?} */ _self = this;
node.call(drag()
.on('start', function (d) {
if (_self.isShifted) {
_self.dragConnectionStarted(d);
}
else {
_self.dragNodeStarted(d);
}
})
.on('drag', function (d) {
if (_self.isShifted) {
_self.draggingConnection(d);
}
else {
_self.draggingNode(d);
}
})
.on('end', (ev) => {
if (this.isShifted) {
this.dragConnectionEnded(ev);
}
else {
this.dragNodeEnded(ev);
}
}));
node.on('click', (ev) => { this.clicked(ev); })
.on('mouseover', function () {
select(this).select('.Pin').style('visibility', 'visible');
select(this).selectAll('.text_details').style('visibility', 'visible');
})
.on('mouseout', function () {
const /** @type {?} */ chosen_node = select(this);
if (!chosen_node.classed('pinned')) {
select(this).select('.Pin').style('visibility', 'hidden');
}
if (!this.show_name) {
select(this).selectAll('.text_details').style('visibility', 'hidden');
}
});
}
/**
* @param {?} node_id
* @return {?}
*/
getConnectedEdgesByNodeId(node_id) {
// Return the in and out edges of node with id 'node_id'
const /** @type {?} */ connected_edges = selectAll('.edge').filter(function (item) {
if (item.source === node_id || item.source.id === node_id) {
return item;
}
else if (item.target === node_id || item.target.id === node_id) {
return item;
}
});
return connected_edges;
}
/**
* @param {?} d
* @return {?}
*/
dragConnectionStarted(d) {
this.mouseDownNode = d;
}
/**
* @param {?} d
* @return {?}
*/
dragNodeStarted(d) {
if (!event.active) {
this.simulation.alphaTarget(0.3).restart();
}
d.fx = d.x;
d.fy = d.y;
}
/**
* @param {?} d
* @return {?}
*/
draggingConnection(d) {
// reposition dragged directed edge
if (!this.mouseDownNode) {
return;
}
const /** @type {?} */ dragLine = this.graphViz.dragLine.classed('hidden', false);
const /** @type {?} */ transform = this.graphRoot.attr('transform');
this.graphViz.dragLine
.attr('d', `M ${d.x},${d.y} L ${event.x}, ${event.y}`)
.attr('transform', transform);
console.log('dragging new connection');
}
/**
* @param {?} d
* @return {?}
*/
draggingNode(d) {
const /** @type {?} */ connected_edges = this.getConnectedEdgesByNodeId(d.id);
const /** @type {?} */ f_connected_edges = connected_edges.filter('*:not(.active_edge)');
if (f_connected_edges._groups[0].length === 0) {
d.fx = event.x;
d.fy = event.y;
}
else {
f_connected_edges
.style('stroke-width', function () {
return parseInt(select(this).attr('stroke-width'), 10) + 2;
})
.style('stroke-opacity', 1)
.classed('blocking', true);
}
}
/**
* @param {?} d
* @return {?}
*/
dragConnectionEnded(d) {
const /** @type {?} */ target = event.sourceEvent.toElement;
this.graphViz.dragLine.classed('hidden', true);
console.log(`connecting to: ${target}`);
this.connectionCreated.next({
source: this.mouseDownNode,
target: select(target).data()[0]
});
}
/**
* @param {?} d
* @return {?}
*/
dragNodeEnded(d) {
if (!event.active) {
this.simulation.alphaTarget(0);
}
selectAll('.blocking')
.style('stroke-width', function () {
return select(this).attr('stroke-width');
})
.style('stroke-opacity', function () {
return select(this).attr('stroke-opacity');
})
.classed('blocking', false);
// d.fx = null;
// d.fy = null;
}
/**
* @param {?} d
* @return {?}
*/
clicked(d) {
select('.focus_node').remove();
// TODO: wire up 'freeze' button
// const input = document.getElementById('freeze-in');
// const isChecked = input.checked;
// if (isChecked) {
// infobox.display_info(d);
// } else {
this.simulation.stop();
// remove the oldest links and nodes
const /** @type {?} */ stop_layer = this.graphViz.graphLayers.depth() - 1;
this.graphRoot.selectAll('.old_node' + stop_layer).remove();
this.graphRoot.selectAll('.old_edge' + stop_layer).remove();
this.graphRoot.selectAll('.old_edgepath' + stop_layer).remove();
this.graphRoot.selectAll('.old_edgelabel' + stop_layer).remove();
this.graphViz.displayInfo(d);
this.graphViz.loadRelatedNodes(d);
console.log('node clicked');
}
/**
* @param {?} elem
* @param {?} data
* @return {?}
*/
pinIt(elem, data) {
event.stopPropagation();
const /** @type {?} */ node_pin = select(elem);
const /** @type {?} */ pinned_node = select(elem.parentNode);
if (!pinned_node.empty() && pinned_node.classed('active_node')) {
if (!pinned_node.classed('pinned')) {
pinned_node.classed('pinned', true);
console.log('Pinned!');
node_pin.attr('fill', '#000');
pinned_node.moveToFront();
}
else {
pinned_node.classed('pinned', false);
console.log('Unpinned!');
node_pin.attr('fill', () => this.getNodeColor(data));
}
}
}
/**
* @param {?} prop_name
* @return {?}
*/
colorize(prop_name) {
// Color the nodes according the value of the property 'prop_name'
let /** @type {?} */ node_code_color = null;
const /** @type {?} */ value_list = selectAll('.node').data();
if (prop_name === 'none') {
selectAll('.base_circle').style('fill', (d) => {
return this.getNodeColor(d);
});
selectAll('.Pin').style('fill', (d) => {
return this.getNodeColor(d);
});
}
else if (prop_name === 'label') {
const /** @type {?} */ value_set = new Set(value_list.map((d) => {
return d.label;
}));
node_code_color = scaleOrdinal().domain(value_set).range(range(0, value_set.size));
selectAll('.base_circle').style('fill', (d) => {
return this.config.colorPalette(node_code_color(d.label));
});
selectAll('.Pin').style('fill', (d) => {
return this.config.colorPalette(node_code_color(d.label));
});
}
else {
const /** @type {?} */ value_set = new Set(value_list.map((d) => {
if (typeof d.properties[prop_name] !== 'undefined') {
return d.properties[prop_name][0].value;
}
}));
node_code_color = scaleOrdinal().domain(value_set).range(range(0, value_set.size));
selectAll('.base_circle').style('fill', (d) => {
if (typeof d.properties[prop_name] !== 'undefined') {
return this.config.colorPalette(node_code_color(d.properties[prop_name][0].value));
}
return this.getNodeColor(d);
});
selectAll('.Pin').style('fill', (d) => {
if (typeof d.properties[prop_name] !== 'undefined') {
return this.config.colorPalette(node_code_color(d.properties[prop_name][0].value));
}
return this.getNodeColor(d);
});
}
}
/**
* @param {?} d
* @return {?}
*/
getNodeSize(d) {
if ('size' in d) {
return d.size;
}
else {
return this.config.default_node_size;
}
}
/**
* @param {?} d
* @return {?}
*/
getNodeStrokeWidth(d) {
if ('stroke_width' in d) {
return d.stroke_width;
}
else {
return this.config.default_stroke_width;
}
}
/**
* @param {?} d
* @return {?}
*/
getNodeColor(d) {