1
|
var compatibilityTooltip = "";
|
2
|
|
3
|
/**
|
4
|
* Configuration of detail vertex tooltip (setting style).
|
5
|
*
|
6
|
* @param selectorString selector as string
|
7
|
*/
|
8
|
function configurationVertexDetailTooltip(selectorString) {
|
9
|
$(selectorString).each(function() {
|
10
|
$(this).qtip({
|
11
|
show : {
|
12
|
solo : true,
|
13
|
delay : 1000 // display after a 1sec hover
|
14
|
},
|
15
|
hide : {
|
16
|
event : 'click'
|
17
|
},
|
18
|
content : {
|
19
|
text : getTooltipVertex(stringToInt($(this).attr("data-vertexId"))),
|
20
|
title : {
|
21
|
text : getSymbolicName(stringToInt($(this).attr("data-vertexId"))),
|
22
|
button : 'Close'
|
23
|
}
|
24
|
},
|
25
|
position : {
|
26
|
my : "top right",
|
27
|
at : "bottom right",
|
28
|
adjust : {
|
29
|
y : 2
|
30
|
}
|
31
|
// ,viewport: $("#viewport")
|
32
|
},
|
33
|
style : {
|
34
|
tip : {
|
35
|
corner : 'top right'
|
36
|
},
|
37
|
classes : "qtip-green qtip-rounded qtip-shadow"
|
38
|
}
|
39
|
});
|
40
|
});
|
41
|
}
|
42
|
|
43
|
/**
|
44
|
* Configuration of vertex tooltip (setting style).
|
45
|
*
|
46
|
* @param selectorString selector as String
|
47
|
*/
|
48
|
function configurationVertexTooltip(selectorString) {
|
49
|
$(selectorString).each(function() {
|
50
|
$(this).qtip({
|
51
|
show: {
|
52
|
solo : true,
|
53
|
delay : 0,
|
54
|
event : 'click'
|
55
|
},
|
56
|
hide: {
|
57
|
when: 'mouseout',
|
58
|
fixed: true
|
59
|
},
|
60
|
content: {
|
61
|
text : getTooltipVertex(stringToInt($(this).attr("data-vertexId"))),
|
62
|
title : {
|
63
|
text : getSymbolicName(stringToInt($(this).attr("data-vertexId"))),
|
64
|
button : 'Close'
|
65
|
}
|
66
|
},
|
67
|
position : {
|
68
|
my : "top center",
|
69
|
at : "bottom center",
|
70
|
adjust : {
|
71
|
x : 2
|
72
|
}
|
73
|
},
|
74
|
style : {
|
75
|
tip : {
|
76
|
corner : 'top center'
|
77
|
},
|
78
|
classes : "qtip-green qtip-rounded qtip-shadow"
|
79
|
}
|
80
|
});
|
81
|
});
|
82
|
}
|
83
|
|
84
|
/**
|
85
|
* Configuration of edge tooltip (setting style).
|
86
|
*
|
87
|
* @param selectorString selector as String
|
88
|
*/
|
89
|
function configurationEdgeTooltip(selectorString) {
|
90
|
$(selectorString).each(function() {
|
91
|
$(this).qtip({
|
92
|
show: {
|
93
|
solo: true,
|
94
|
delay: 0,
|
95
|
event: 'click'
|
96
|
},
|
97
|
hide: {
|
98
|
when: 'mouseout',
|
99
|
fixed: true
|
100
|
},
|
101
|
content: {
|
102
|
text: getTooltipEdge(stringToInt($(this).attr("data-edgeId"))),
|
103
|
title: {
|
104
|
text: getEdgeTipTitle(),
|
105
|
button: 'Close',
|
106
|
}
|
107
|
},
|
108
|
position: {
|
109
|
//target: 'mouse',//[$(selectorString).offset().left, $(selectorString).offset().top],
|
110
|
my: 'top left', // forces clicked thing to top left relatively to the top left corner of the tip-box
|
111
|
at: 'top left',
|
112
|
container: $("#content"),
|
113
|
adjust: {
|
114
|
x: 15,
|
115
|
y: 140,
|
116
|
mouse: false
|
117
|
}
|
118
|
//,viewport : $("#viewport") // source of a horrible BUGFEST... - loudilj
|
119
|
},
|
120
|
style: {
|
121
|
classes: getTooltipEdgeClasses()
|
122
|
},
|
123
|
events: {
|
124
|
visible: function (event, api) {
|
125
|
if (GraphManager.isEfpGraph || GraphManager.isCompatibilityGraph) {
|
126
|
// set up the jsTree instead of plain list for EFP graphs
|
127
|
setUpTooltipList($(this).find('ul').parent());
|
128
|
}
|
129
|
}
|
130
|
}
|
131
|
});
|
132
|
});
|
133
|
}
|
134
|
|
135
|
/**
|
136
|
* Return tooltip fo vertex wiht given id.
|
137
|
*
|
138
|
* @param id id of vertex
|
139
|
* @returns {string} tooltip text
|
140
|
*/
|
141
|
function getTooltipVertex(id) {
|
142
|
var tooltip = "<div><ul class='tooltip_vertex_left'>",
|
143
|
exportedPackages = getExportedPackages(id),
|
144
|
importedPackages = getImportedPackages(id);
|
145
|
|
146
|
if (!GraphManager.isEfpGraph) {
|
147
|
tooltip += "<li class='tooltip_import_package'>" + "Import packages:" + "</li>";
|
148
|
} else {
|
149
|
tooltip += "<li class='tooltip_import_package'>" + "Import features:" + "</li>";
|
150
|
}
|
151
|
|
152
|
for (var i = 0; i < importedPackages.length; i++) {
|
153
|
tooltip += "<li>" + importedPackages[i] + "</li>";
|
154
|
}
|
155
|
|
156
|
tooltip += "</ul><ul class='tooltip_vertex_right'>";
|
157
|
|
158
|
if (!GraphManager.isEfpGraph) {
|
159
|
tooltip += "<li class='tooltip_export_package'>" + "Export packages:" + "</li>";
|
160
|
} else {
|
161
|
tooltip += "<li class='tooltip_export_package'>" + "Export features:" + "</li>";
|
162
|
}
|
163
|
|
164
|
for (var j = 0; j < exportedPackages.length; j++) {
|
165
|
tooltip += "<li>" + exportedPackages[j] + "</li>";
|
166
|
}
|
167
|
tooltip += "</ul><br class='clean'/></div>";
|
168
|
|
169
|
return tooltip;
|
170
|
}
|
171
|
|
172
|
/**
|
173
|
* Set tooltip to edge.
|
174
|
*
|
175
|
* @param id id of edge
|
176
|
* @returns {string} tooltip of edge with given id.
|
177
|
*/
|
178
|
function getTooltipEdge(id) {
|
179
|
var tooltip = "<div id='edgeTooltipListDiv" + (id - 1) + "'><ul id='edgeTooltipList" + (id - 1) + "'>",
|
180
|
i;
|
181
|
|
182
|
if (GraphManager.isCompatibilityGraph) {
|
183
|
var edge = GraphManager.graph.edges[(id - 1)];
|
184
|
if (edge.hasOwnProperty('compInfoJSON')) {
|
185
|
tooltip += getCompatibilityInfo(JSON.parse(edge.compInfoJSON));
|
186
|
}
|
187
|
} else if (!GraphManager.isEfpGraph) { // EFP graph or not
|
188
|
var connectionList = getConnections(id);
|
189
|
|
190
|
if (connectionList.length === 0) {
|
191
|
tooltip += "<li>No packages</li>";
|
192
|
}
|
193
|
for (i = 0; i < connectionList.length; i++) {
|
194
|
tooltip += "<li>" + connectionList[i] + "</li>";
|
195
|
}
|
196
|
} else {
|
197
|
var features = GraphManager.graph.edges[(id - 1)].features;
|
198
|
|
199
|
// sort features by name
|
200
|
features.sort(function (a, b) {
|
201
|
var nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();
|
202
|
|
203
|
if (nameA < nameB) { //sort string ascending
|
204
|
return -1;
|
205
|
}
|
206
|
|
207
|
if (nameA > nameB) {
|
208
|
return 1;
|
209
|
}
|
210
|
|
211
|
//default return value (no sorting)
|
212
|
return 0;
|
213
|
});
|
214
|
|
215
|
for (i = 0; i < features.length; i++) {
|
216
|
var featureIcon, efpIcon;
|
217
|
|
218
|
if (features[i].featureStatus == "OK") {
|
219
|
featureIcon = "OK.png";
|
220
|
} else {
|
221
|
featureIcon = "ERROR.png";
|
222
|
}
|
223
|
|
224
|
tooltip += "<li><a href='#' class='featureListItem'>";
|
225
|
|
226
|
// add icon if there are any EFPs
|
227
|
if (features[i].efps.length !== 0) {
|
228
|
tooltip += "</img src='images/efp_qtip/" + featureIcon + "' alt='" + features[i].featureStatus + "'>";
|
229
|
}
|
230
|
|
231
|
tooltip += features[i].name + "</a>";
|
232
|
|
233
|
// no EFPs on this feature
|
234
|
if (features[i].efps.length === 0) {
|
235
|
tooltip += "</li>";
|
236
|
continue;
|
237
|
}
|
238
|
|
239
|
tooltip += "<ul>";
|
240
|
|
241
|
// sort efps by name
|
242
|
features[i].efps.sort(function(a, b) {
|
243
|
var nameA = a.efpName.toLowerCase(),
|
244
|
nameB = b.efpName.toLowerCase();
|
245
|
|
246
|
if (nameA < nameB) { //sort string ascending
|
247
|
return -1;
|
248
|
}
|
249
|
|
250
|
if (nameA > nameB) {
|
251
|
return 1;
|
252
|
}
|
253
|
|
254
|
//default return value (no sorting)
|
255
|
return 0;
|
256
|
});
|
257
|
|
258
|
// all efps
|
259
|
for (var j = 0; j < features[i].efps.length; j++) {
|
260
|
if (features[i].efps[j].comparisonStatus == "OK") {
|
261
|
efpIcon = "OK.png";
|
262
|
} else {
|
263
|
efpIcon = "ERROR.png";
|
264
|
}
|
265
|
|
266
|
tooltip += "<li><a href='#'></img src='images/efp_qtip/" + efpIcon + "' alt='" + features[i].efps[j].comparisonStatus + "'>" + features[i].efps[j].efpName + "</a>";
|
267
|
|
268
|
var leftEfpValue = features[i].efps[j].leftEfpValue;
|
269
|
if (!leftEfpValue) {
|
270
|
leftEfpValue = 'No value';
|
271
|
}
|
272
|
|
273
|
var rightEfpValue = features[i].efps[j].rightEfpValue;
|
274
|
if (!rightEfpValue) {
|
275
|
rightEfpValue = 'No value';
|
276
|
}
|
277
|
|
278
|
tooltip += "<ul><li><a href='#'><span class='efpListLabel'></span> " + getTypeClassName(features[i].efps[j].typeName) + ", <span class='efpListLabel'></span> </img src='images/efp_qtip/required.png' alt='required'>" + leftEfpValue + ", </img src='images/efp_qtip/provided.png' alt='provided'>" + rightEfpValue + "</a></li></ul></li>";
|
279
|
}
|
280
|
tooltip += "</ul></li>";
|
281
|
}
|
282
|
}
|
283
|
tooltip += "</ul></div>";
|
284
|
|
285
|
return tooltip;
|
286
|
}
|
287
|
|
288
|
/**
|
289
|
* Return the class name from full type name - cut the pkg path out.
|
290
|
*
|
291
|
* @param typeFullName full type name
|
292
|
* @returns {string} type name without .pkg
|
293
|
*/
|
294
|
function getTypeClassName(typeFullName) {
|
295
|
return typeFullName.substring(typeFullName.lastIndexOf(".") + 1);
|
296
|
}
|
297
|
|
298
|
/**
|
299
|
* Return symbolic name of vertex with given id.
|
300
|
*
|
301
|
* @param idVertex id of vertex
|
302
|
* @returns {*} symbolic name of vertex
|
303
|
*/
|
304
|
function getSymbolicName(idVertex) {
|
305
|
return GraphManager.graph.vertices[idVertex - 1].symbolicName;
|
306
|
}
|
307
|
|
308
|
/**
|
309
|
* Get title for edge tooltip
|
310
|
*
|
311
|
* @returns {*} title for edge tooltip.
|
312
|
*/
|
313
|
function getEdgeTipTitle() {
|
314
|
var title = 'Involved ';
|
315
|
|
316
|
if (!GraphManager.isEfpGraph) {
|
317
|
title += 'packages';
|
318
|
} else {
|
319
|
title += 'features';
|
320
|
}
|
321
|
|
322
|
if (GraphManager.isCompatibilityGraph) {
|
323
|
return 'Incompatibility Details';
|
324
|
}
|
325
|
|
326
|
return title;
|
327
|
}
|
328
|
|
329
|
/**
|
330
|
* Adds special class for EFP graphs in order to display lists properly.
|
331
|
*
|
332
|
* @returns {string} edge tooltip classes
|
333
|
*/
|
334
|
function getTooltipEdgeClasses() {
|
335
|
var classes = "qtip-green qtip-rounded qtip-shadow";
|
336
|
|
337
|
if (GraphManager.isEfpGraph) {
|
338
|
classes += " ui-tooltip-with-efp";
|
339
|
}
|
340
|
|
341
|
if (GraphManager.isCompatibilityGraph) {
|
342
|
classes += " qtip_width_setting";
|
343
|
}
|
344
|
|
345
|
return classes;
|
346
|
}
|
347
|
|
348
|
/**
|
349
|
*
|
350
|
* Sets jsTree to tooltip's content.
|
351
|
*
|
352
|
* @param list list of the desired qtip.
|
353
|
*/
|
354
|
function setUpTooltipList(list) {
|
355
|
list.jstree({
|
356
|
core : {
|
357
|
"animation" : 25
|
358
|
},
|
359
|
themes : {
|
360
|
"theme" : "classic",
|
361
|
"dots" : true,
|
362
|
"icons" : false
|
363
|
},
|
364
|
plugins : [ "themes", "html_data" ]
|
365
|
});
|
366
|
}
|
367
|
|
368
|
/**
|
369
|
* Return exported packages one vertex.
|
370
|
*
|
371
|
* @param idVertex id of vertex for which wil be returned exported packages
|
372
|
* @returns {*}exported package
|
373
|
*/
|
374
|
function getExportedPackages(idVertex) {
|
375
|
return GraphManager.graph.vertices[(idVertex - 1)].exportedPackages;
|
376
|
}
|
377
|
|
378
|
/**
|
379
|
* Return imported packages one vertex.
|
380
|
*
|
381
|
* @param idVertex id of vertex for which wil be return imported packages
|
382
|
* @returns {*}imported packages
|
383
|
*/
|
384
|
function getImportedPackages(idVertex) {
|
385
|
return GraphManager.graph.vertices[(idVertex - 1)].importedPackages;
|
386
|
}
|
387
|
|
388
|
/**
|
389
|
* Return package that are connected two vertices.
|
390
|
*
|
391
|
* @param idEdge edge ID
|
392
|
* @returns {*} package connecting two vertices
|
393
|
*/
|
394
|
function getConnections(idEdge) {
|
395
|
return GraphManager.graph.edges[(idEdge - 1)].packageConnections;
|
396
|
}
|
397
|
|
398
|
/**
|
399
|
* Return HTML for incompatibility tooltip
|
400
|
*
|
401
|
* @param compatibilityInfo tooltip data
|
402
|
* @returns {string} HTML with incompability tooltip
|
403
|
*/
|
404
|
function getCompatibilityInfo(compatibilityInfo) {
|
405
|
compatibilityTooltip = "";
|
406
|
for (var i = 0; i < compatibilityInfo.length; i++) {
|
407
|
var cause = compatibilityInfo[i];
|
408
|
|
409
|
compatibilityTooltip += "<li><strong>" + cause.causedBy + "</strong><ul>";
|
410
|
for (var j = 0; j < cause.incomps.length; j++) {
|
411
|
if (cause.incomps[j] && cause.incomps[j].subtree.length) {
|
412
|
parseCompatibilityInfo(cause.incomps[j]);
|
413
|
}
|
414
|
}
|
415
|
compatibilityTooltip += "</ul></li>";
|
416
|
}
|
417
|
compatibilityTooltip += "";
|
418
|
|
419
|
return compatibilityTooltip;
|
420
|
}
|
421
|
|
422
|
/**
|
423
|
* Traverses incompatibility JSON object and creates HTML nested list
|
424
|
*
|
425
|
* @param data data to be parsed
|
426
|
*/
|
427
|
function parseCompatibilityInfo(data) {
|
428
|
if (data.desc.isIncompCause) {
|
429
|
compatibilityTooltip += "<li><strong class=\"incomp\">" + data.desc.incompName + "</strong>";
|
430
|
compatibilityTooltip += "<ul class=\"compatibility-list\">";
|
431
|
|
432
|
if (data.desc.difference != "DEL") {
|
433
|
compatibilityTooltip += "<li><span><img src=\"images/efp_qtip/provided.png\"> <span class=\"second\">" + data.desc.objectNameSecond + "</span></span></li>";
|
434
|
compatibilityTooltip += "<li><span><img src=\"images/efp_qtip/required.png\"> <span class=\"first\">" + data.desc.objectNameFirst + "</span></span></li>";
|
435
|
}
|
436
|
compatibilityTooltip += "</ul>";
|
437
|
} else {
|
438
|
if (data.desc.level > 0) {
|
439
|
compatibilityTooltip += "<li><strong>" + data.desc.name + "</strong>";
|
440
|
}
|
441
|
}
|
442
|
|
443
|
if (data.subtree.length) {
|
444
|
if (data.desc.level > 0) {
|
445
|
compatibilityTooltip += "<ul class=\"compatibility-list\">";
|
446
|
}
|
447
|
for (var i = 0; i < data.subtree.length; i++) {
|
448
|
if (data.subtree[i].subtree.length || data.subtree[i].desc.isIncompCause) {
|
449
|
parseCompatibilityInfo(data.subtree[i]);
|
450
|
}
|
451
|
}
|
452
|
if (data.desc.level > 0) {
|
453
|
compatibilityTooltip += "</ul>";
|
454
|
}
|
455
|
}
|
456
|
if (data.desc.level > 0) {
|
457
|
compatibilityTooltip += "</li>";
|
458
|
}
|
459
|
}
|