Mercurial > hg > NetworkVis
annotate popoto/src/js/popoto.js @ 30:cccbcc845d54
add arrowheads to commentary chains.
| author | casties |
|---|---|
| date | Fri, 11 Dec 2015 13:03:04 -0500 |
| parents | aea1b2097f4f |
| children |
| rev | line source |
|---|---|
| 0 | 1 /** |
| 2 * Popoto.js is a JavaScript library built with D3.js providing a graph based search interface generated in HTML and SVG usable on any modern browser. | |
| 3 * This library generates an interactive graph query builder into any website or web based application to create dynamic queries on Neo4j databases and display the results. | |
| 4 * | |
| 5 * Copyright (C) 2014-2015 Frederic Ciminera | |
| 6 * | |
| 7 * This program is free software: you can redistribute it and/or modify | |
| 8 * it under the terms of the GNU General Public License as published by | |
| 9 * the Free Software Foundation, either version 3 of the License, or | |
| 10 * (at your option) any later version. | |
| 11 * | |
| 12 * This program is distributed in the hope that it will be useful, | |
| 13 * but WITHOUT ANY WARRANTY; without even the implied warranty of | |
| 14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
| 15 * GNU General Public License for more details. | |
| 16 * | |
| 17 * You should have received a copy of the GNU General Public License | |
| 18 * along with this program. If not, see <http://www.gnu.org/licenses/>. | |
| 19 * | |
| 20 * contact@popotojs.com | |
| 21 */ | |
| 22 popoto = function () { | |
| 23 var popoto = { | |
| 24 version: "0.0-a6" | |
| 25 }; | |
| 26 | |
| 27 /** | |
| 28 * Main function to call to use Popoto.js. | |
| 29 * This function will create all the HTML content based on available IDs in the page. | |
| 30 * popoto.graph.containerId for the graph query builder. | |
| 31 * popoto.queryviewer.containerId for the query viewer. | |
| 32 * | |
| 33 * @param label Root label to use in the graph query builder. | |
| 34 */ | |
| 35 popoto.start = function (label) { | |
| 36 popoto.logger.info("Popoto " + popoto.version + " start."); | |
| 37 | |
| 38 if (typeof popoto.rest.CYPHER_URL == 'undefined') { | |
| 39 popoto.logger.error("popoto.rest.CYPHER_URL is not set but this property is required."); | |
| 40 } else { | |
| 41 // TODO introduce component generator mechanism instead for future plugin extensions | |
| 42 popoto.checkHtmlComponents(); | |
| 43 | |
| 44 if (popoto.taxonomy.isActive) { | |
| 45 popoto.taxonomy.createTaxonomyPanel(); | |
| 46 } | |
| 47 | |
| 48 if (popoto.graph.isActive) { | |
| 49 popoto.graph.createGraphArea(); | |
| 50 popoto.graph.createForceLayout(); | |
| 51 popoto.graph.addRootNode(label); | |
| 52 } | |
| 53 | |
| 54 if (popoto.queryviewer.isActive) { | |
| 55 popoto.queryviewer.createQueryArea(); | |
| 56 } | |
| 57 | |
| 58 popoto.update(); | |
| 59 } | |
| 60 }; | |
| 61 | |
| 62 /** | |
| 63 * Check in the HTML page the components to generate. | |
| 64 */ | |
| 65 popoto.checkHtmlComponents = function () { | |
| 66 var graphHTMLContainer = d3.select("#" + popoto.graph.containerId); | |
| 67 var taxonomyHTMLContainer = d3.select("#" + popoto.taxonomy.containerId); | |
| 68 var queryHTMLContainer = d3.select("#" + popoto.queryviewer.containerId); | |
| 69 var cypherHTMLContainer = d3.select("#" + popoto.cypherviewer.containerId); | |
| 70 var resultsHTMLContainer = d3.select("#" + popoto.result.containerId); | |
| 71 | |
| 72 if (graphHTMLContainer.empty()) { | |
| 73 popoto.logger.debug("The page doesn't contain a container with ID = \"" + popoto.graph.containerId + "\" no graph area will be generated. This ID is defined in popoto.graph.containerId property."); | |
| 74 popoto.graph.isActive = false; | |
| 75 } else { | |
| 76 popoto.graph.isActive = true; | |
| 77 } | |
| 78 | |
| 79 if (taxonomyHTMLContainer.empty()) { | |
| 80 popoto.logger.debug("The page doesn't contain a container with ID = \"" + popoto.taxonomy.containerId + "\" no taxonomy filter will be generated. This ID is defined in popoto.taxonomy.containerId property."); | |
| 81 popoto.taxonomy.isActive = false; | |
| 82 } else { | |
| 83 popoto.taxonomy.isActive = true; | |
| 84 } | |
| 85 | |
| 86 if (queryHTMLContainer.empty()) { | |
| 87 popoto.logger.debug("The page doesn't contain a container with ID = \"" + popoto.queryviewer.containerId + "\" no query viewer will be generated. This ID is defined in popoto.queryviewer.containerId property."); | |
| 88 popoto.queryviewer.isActive = false; | |
| 89 } else { | |
| 90 popoto.queryviewer.isActive = true; | |
| 91 } | |
| 92 | |
| 93 if (cypherHTMLContainer.empty()) { | |
| 94 popoto.logger.debug("The page doesn't contain a container with ID = \"" + popoto.cypherviewer.containerId + "\" no cypher query viewer will be generated. This ID is defined in popoto.cypherviewer.containerId property."); | |
| 95 popoto.cypherviewer.isActive = false; | |
| 96 } else { | |
| 97 popoto.cypherviewer.isActive = true; | |
| 98 } | |
| 99 | |
| 100 if (resultsHTMLContainer.empty()) { | |
| 101 popoto.logger.debug("The page doesn't contain a container with ID = \"" + popoto.result.containerId + "\" no result area will be generated. This ID is defined in popoto.result.containerId property."); | |
| 102 popoto.result.isActive = false; | |
| 103 } else { | |
| 104 popoto.result.isActive = true; | |
| 105 } | |
| 106 }; | |
| 107 | |
| 108 /** | |
| 109 * Function to call to update all the generated elements including svg graph, query viewer and generated results. | |
| 110 */ | |
| 111 popoto.update = function () { | |
| 112 popoto.updateGraph(); | |
| 113 | |
| 114 if (popoto.queryviewer.isActive) { | |
| 115 popoto.queryviewer.updateQuery(); | |
| 116 } | |
| 117 // Results are updated only if needed. | |
| 118 // If id found in html page or if result listeners have been added. | |
| 119 // In this case the query must be executed. | |
| 120 if (popoto.result.isActive || popoto.result.resultListeners.length > 0 || popoto.result.resultCountListeners.length > 0) { | |
| 121 popoto.result.updateResults(); | |
| 122 } | |
| 123 }; | |
| 124 | |
| 125 /** | |
| 126 * Function to call to update the graph only. | |
| 127 */ | |
| 128 popoto.updateGraph = function () { | |
| 129 if (popoto.graph.isActive) { | |
| 130 // Starts the D3.js force simulation. | |
| 131 // This method must be called when the layout is first created, after assigning the nodes and links. | |
| 132 // In addition, it should be called again whenever the nodes or links change. | |
| 133 popoto.graph.force.start(); | |
| 134 popoto.graph.link.updateLinks(); | |
| 135 popoto.graph.node.updateNodes(); | |
| 136 } | |
| 137 }; | |
| 138 | |
| 139 // REST ------------------------------------------------------------------------------------------------------------ | |
| 140 popoto.rest = {}; | |
| 141 | |
| 142 /** | |
| 143 * Default REST URL used to call Neo4j server with cypher queries to execute. | |
| 144 * This property should be updated to access to your own server. | |
| 145 * @type {string} | |
| 146 */ | |
| 147 popoto.rest.CYPHER_URL = "http://localhost:7474/db/data/transaction/commit"; | |
| 148 | |
| 149 /** | |
| 150 * Create JQuery ajax POST request to access Neo4j REST API. | |
| 151 * | |
| 152 * @param data data object containing Cypher query | |
| 153 * @returns {*} the JQuery ajax request object. | |
| 154 */ | |
| 155 popoto.rest.post = function (data) { | |
| 156 var strData = JSON.stringify(data); | |
| 157 popoto.logger.info("REST POST:" + strData); | |
| 158 | |
| 159 return $.ajax({ | |
| 160 type: "POST", | |
| 161 beforeSend: function (request) { | |
| 162 if (popoto.rest.AUTHORIZATION) { | |
| 163 request.setRequestHeader("Authorization", popoto.rest.AUTHORIZATION); | |
| 164 } | |
| 165 }, | |
| 166 url: popoto.rest.CYPHER_URL, | |
| 167 contentType: "application/json", | |
| 168 data: strData | |
| 169 }); | |
| 170 }; | |
| 171 | |
| 172 // LOGGER ----------------------------------------------------------------------------------------------------------- | |
| 173 popoto.logger = {}; | |
| 174 popoto.logger.LogLevels = Object.freeze({DEBUG: 0, INFO: 1, WARN: 2, ERROR: 3, NONE: 4}); | |
| 175 popoto.logger.LEVEL = popoto.logger.LogLevels.NONE; | |
| 176 popoto.logger.TRACE = false; | |
| 177 | |
| 178 /** | |
| 179 * Log a message on console depending on configured log levels. | |
| 180 * Level is define in popoto.logger.LEVEL property. | |
| 181 * If popoto.logger.TRACE is set to true, the stack trace is also added in log. | |
| 182 * @param logLevel Level of the message from popoto.logger.LogLevels. | |
| 183 * @param message Message to log. | |
| 184 */ | |
| 185 popoto.logger.log = function (logLevel, message) { | |
| 186 if (console && logLevel >= popoto.logger.LEVEL) { | |
| 187 if (popoto.logger.TRACE) { | |
| 188 message = message + "\n" + new Error().stack | |
| 189 } | |
| 190 switch (logLevel) { | |
| 191 case popoto.logger.LogLevels.DEBUG: | |
| 192 console.log(message); | |
| 193 break; | |
| 194 case popoto.logger.LogLevels.INFO: | |
| 195 console.log(message); | |
| 196 break; | |
| 197 case popoto.logger.LogLevels.WARN: | |
| 198 console.warn(message); | |
| 199 break; | |
| 200 case popoto.logger.LogLevels.ERROR: | |
| 201 console.error(message); | |
| 202 break; | |
| 203 } | |
| 204 } | |
| 205 }; | |
| 206 | |
| 207 /** | |
| 208 * Log a message in DEBUG level. | |
| 209 * @param message to log. | |
| 210 */ | |
| 211 popoto.logger.debug = function (message) { | |
| 212 popoto.logger.log(popoto.logger.LogLevels.DEBUG, message); | |
| 213 }; | |
| 214 | |
| 215 /** | |
| 216 * Log a message in INFO level. | |
| 217 * @param message to log. | |
| 218 */ | |
| 219 popoto.logger.info = function (message) { | |
| 220 popoto.logger.log(popoto.logger.LogLevels.INFO, message); | |
| 221 }; | |
| 222 | |
| 223 /** | |
| 224 * Log a message in WARN level. | |
| 225 * @param message to log. | |
| 226 */ | |
| 227 popoto.logger.warn = function (message) { | |
| 228 popoto.logger.log(popoto.logger.LogLevels.WARN, message); | |
| 229 }; | |
| 230 | |
| 231 /** | |
| 232 * Log a message in ERROR level. | |
| 233 * @param message to log. | |
| 234 */ | |
| 235 popoto.logger.error = function (message) { | |
| 236 popoto.logger.log(popoto.logger.LogLevels.ERROR, message); | |
| 237 }; | |
| 238 | |
| 239 // TAXONOMIES ----------------------------------------------------------------------------------------------------- | |
| 240 | |
| 241 popoto.taxonomy = {}; | |
| 242 popoto.taxonomy.containerId = "popoto-taxonomy"; | |
| 243 | |
| 244 /** | |
| 245 * Create the taxonomy panel HTML elements. | |
| 246 */ | |
| 247 popoto.taxonomy.createTaxonomyPanel = function () { | |
| 248 var htmlContainer = d3.select("#" + popoto.taxonomy.containerId); | |
| 249 | |
| 250 var taxoUL = htmlContainer.append("ul"); | |
| 251 | |
| 252 var data = popoto.taxonomy.generateTaxonomiesData(); | |
| 253 | |
| 254 var taxos = taxoUL.selectAll(".taxo").data(data); | |
| 255 | |
| 256 var taxoli = taxos.enter().append("li") | |
| 257 .attr("id", function (d) { | |
| 258 return d.id | |
| 259 }) | |
| 260 .attr("value", function (d) { | |
| 261 return d.label; | |
| 262 }); | |
| 263 | |
| 264 taxoli.append("img") | |
| 265 .attr("src", "css/image/category.png") | |
| 266 .attr("width", "24") | |
| 267 .attr("height", "24"); | |
| 268 | |
| 269 taxoli.append("span") | |
| 270 .attr("class", "ppt-label") | |
| 271 .text(function (d) { | |
| 272 return popoto.provider.getTaxonomyTextValue(d.label); | |
| 273 }); | |
| 274 | |
| 275 taxoli.append("span") | |
| 276 .attr("class", "ppt-count"); | |
| 277 | |
| 278 // Add an on click event on the taxonomy to clear the graph and set this label as root | |
| 279 taxoli.on("click", popoto.taxonomy.onClick); | |
| 280 | |
| 281 popoto.taxonomy.addTaxonomyChildren(taxoli); | |
| 282 | |
| 283 // The count is updated for each labels. | |
| 284 var flattenData = []; | |
| 285 data.forEach(function (d) { | |
| 286 flattenData.push(d); | |
| 287 if (d.children) { | |
| 288 popoto.taxonomy.flattenChildren(d, flattenData); | |
| 289 } | |
| 290 }); | |
| 291 | |
| 292 popoto.taxonomy.updateCount(flattenData); | |
| 293 }; | |
| 294 | |
| 295 /** | |
| 296 * Recursive function to flatten data content. | |
| 297 * | |
| 298 */ | |
| 299 popoto.taxonomy.flattenChildren = function (d, vals) { | |
| 300 d.children.forEach(function (c) { | |
| 301 vals.push(c); | |
| 302 if (c.children) { | |
| 303 vals.concat(popoto.taxonomy.flattenChildren(c, vals)); | |
| 304 } | |
| 305 }); | |
| 306 }; | |
| 307 | |
| 308 /** | |
| 309 * Updates the count number on a taxonomy. | |
| 310 * | |
| 311 * @param taxonomyData | |
| 312 */ | |
| 313 popoto.taxonomy.updateCount = function (taxonomyData) { | |
| 314 var statements = []; | |
| 315 | |
| 316 taxonomyData.forEach(function (taxo) { | |
| 317 statements.push( | |
| 318 { | |
| 319 "statement": popoto.query.generateTaxonomyCountQuery(taxo.label) | |
| 320 } | |
| 321 ); | |
| 322 }); | |
| 323 | |
| 324 (function (taxonomies) { | |
| 325 popoto.logger.info("Count taxonomies ==> "); | |
| 326 popoto.rest.post( | |
| 327 { | |
| 328 "statements": statements | |
| 329 }) | |
| 330 .done(function (returnedData) { | |
| 331 for (var i = 0; i < taxonomies.length; i++) { | |
| 332 var count = returnedData.results[i].data[0].row[0]; | |
| 333 d3.select("#" + taxonomies[i].id) | |
| 334 .select(".ppt-count") | |
| 335 .text(" (" + count + ")"); | |
| 336 } | |
| 337 }) | |
| 338 .fail(function (xhr, textStatus, errorThrown) { | |
| 339 popoto.logger.error(textStatus + ": error while accessing Neo4j server on URL:\"" + popoto.rest.CYPHER_URL + "\" defined in \"popoto.rest.CYPHER_URL\" property: " + errorThrown); | |
| 340 d3.select("#popoto-taxonomy") | |
| 341 .selectAll(".ppt-count") | |
| 342 .text(" (0)"); | |
| 343 }); | |
| 344 })(taxonomyData); | |
| 345 }; | |
| 346 | |
| 347 /** | |
| 348 * Recursively generate the taxonomy children elements. | |
| 349 * | |
| 350 * @param selection | |
| 351 */ | |
| 352 popoto.taxonomy.addTaxonomyChildren = function (selection) { | |
| 353 selection.each(function (d) { | |
| 354 var li = d3.select(this); | |
| 355 | |
| 356 var children = d.children; | |
| 357 if (d.children) { | |
| 358 var childLi = li.append("ul") | |
| 359 .selectAll("li") | |
| 360 .data(children) | |
| 361 .enter() | |
| 362 .append("li") | |
| 363 .attr("id", function (d) { | |
| 364 return d.id | |
| 365 }) | |
| 366 .attr("value", function (d) { | |
| 367 return d.label; | |
| 368 }); | |
| 369 | |
| 370 childLi.append("img") | |
| 371 .attr("src", "css/image/category.png") | |
| 372 .attr("width", "24") | |
| 373 .attr("height", "24"); | |
| 374 | |
| 375 childLi.append("span") | |
| 376 .attr("class", "ppt-label") | |
| 377 .text(function (d) { | |
| 378 return popoto.provider.getTaxonomyTextValue(d.label); | |
| 379 }); | |
| 380 | |
| 381 childLi.append("span") | |
| 382 .attr("class", "ppt-count"); | |
| 383 | |
| 384 childLi.on("click", popoto.taxonomy.onClick); | |
| 385 | |
| 386 popoto.taxonomy.addTaxonomyChildren(childLi); | |
| 387 } | |
| 388 | |
| 389 }); | |
| 390 }; | |
| 391 | |
| 392 popoto.taxonomy.onClick = function () { | |
| 393 d3.event.stopPropagation(); | |
| 394 | |
| 395 // Workaround to avoid click on taxonomies if root node has not yet been initialized | |
| 396 // If it contains a count it mean all the initialization has been done | |
| 397 var root = popoto.graph.getRootNode(); | |
| 398 if (root.count === undefined) { | |
| 399 return; | |
| 400 } | |
| 401 | |
| 402 var label = this.attributes.value.value; | |
| 403 | |
| 404 while (popoto.graph.force.nodes().length > 0) { | |
| 405 popoto.graph.force.nodes().pop(); | |
| 406 } | |
| 407 | |
| 408 while (popoto.graph.force.links().length > 0) { | |
| 409 popoto.graph.force.links().pop(); | |
| 410 } | |
| 411 | |
| 412 // Reinitialize internal label generator | |
| 413 popoto.graph.node.internalLabels = {}; | |
| 414 | |
| 415 popoto.update(); | |
| 416 popoto.graph.addRootNode(label); | |
| 417 popoto.graph.hasGraphChanged = true; | |
| 418 popoto.result.hasChanged = true; | |
| 419 popoto.update(); | |
| 420 popoto.tools.center(); | |
| 421 }; | |
| 422 | |
| 423 /** | |
| 424 * Parse the list of label providers and return a list of data object containing only searchable labels. | |
| 425 * @returns {Array} | |
| 426 */ | |
| 427 popoto.taxonomy.generateTaxonomiesData = function () { | |
| 428 var id = 0; | |
| 429 var data = []; | |
| 430 | |
| 431 // Retrieve root providers (searchable and without parent) | |
| 432 for (var label in popoto.provider.nodeProviders) { | |
| 433 if (popoto.provider.nodeProviders.hasOwnProperty(label)) { | |
| 434 if (popoto.provider.getProperty(label, "isSearchable") && !popoto.provider.nodeProviders[label].parent) { | |
| 435 data.push({ | |
| 436 "label": label, | |
| 437 "id": "popoto-lbl-" + id++ | |
| 438 }); | |
| 439 } | |
| 440 } | |
| 441 } | |
| 442 | |
| 443 // Add children data for each provider with children. | |
| 444 data.forEach(function (d) { | |
| 445 if (popoto.provider.getProvider(d.label).hasOwnProperty("children")) { | |
| 446 id = popoto.taxonomy.addChildrenData(d, id); | |
| 447 } | |
| 448 }); | |
| 449 | |
| 450 return data; | |
| 451 }; | |
| 452 | |
| 453 /** | |
| 454 * Add children providers data. | |
| 455 * @param parentData | |
| 456 * @param id | |
| 457 */ | |
| 458 popoto.taxonomy.addChildrenData = function (parentData, id) { | |
| 459 parentData.children = []; | |
| 460 | |
| 461 popoto.provider.getProvider(parentData.label).children.forEach(function (d) { | |
| 462 var childProvider = popoto.provider.getProvider(d); | |
| 463 var childData = { | |
| 464 "label": d, | |
| 465 "id": "popoto-lbl-" + id++ | |
| 466 }; | |
| 467 if (childProvider.hasOwnProperty("children")) { | |
| 468 id = popoto.taxonomy.addChildrenData(childData, id); | |
| 469 } | |
| 470 if (popoto.provider.getProperty(d, "isSearchable")) { | |
| 471 parentData.children.push(childData); | |
| 472 } | |
| 473 }); | |
| 474 | |
| 475 return id; | |
| 476 }; | |
| 477 | |
| 478 // TOOLS ----------------------------------------------------------------------------------------------------------- | |
| 479 | |
| 480 popoto.tools = {}; | |
| 481 // TODO introduce plugin mechanism to add tools | |
| 482 popoto.tools.CENTER_GRAPH = true; | |
| 483 popoto.tools.RESET_GRAPH = true; | |
| 484 popoto.tools.TOGGLE_TAXONOMY = true; | |
| 485 popoto.tools.TOGGLE_FULL_SCREEN = true; | |
| 486 | |
| 487 /** | |
| 488 * Reset all the graph to display the root node only. | |
| 489 */ | |
| 490 popoto.tools.reset = function () { | |
| 491 var label = popoto.graph.getRootNode().label; | |
| 492 | |
| 493 while (popoto.graph.force.nodes().length > 0) { | |
| 494 popoto.graph.force.nodes().pop(); | |
| 495 } | |
| 496 | |
| 497 while (popoto.graph.force.links().length > 0) { | |
| 498 popoto.graph.force.links().pop(); | |
| 499 } | |
| 500 | |
| 501 // Reinitialize internal label generator | |
| 502 popoto.graph.node.internalLabels = {}; | |
| 503 | |
| 504 popoto.update(); | |
| 505 popoto.graph.addRootNode(label); | |
| 506 popoto.graph.hasGraphChanged = true; | |
| 507 popoto.result.hasChanged = true; | |
| 508 popoto.update(); | |
| 509 popoto.tools.center(); | |
| 510 }; | |
| 511 | |
| 512 /** | |
| 513 * Reset zoom and center the view on svg center. | |
| 514 */ | |
| 515 popoto.tools.center = function () { | |
| 516 popoto.graph.zoom.translate([0, 0]).scale(1); | |
| 517 popoto.graph.svg.transition().attr("transform", "translate(" + popoto.graph.zoom.translate() + ")" + " scale(" + popoto.graph.zoom.scale() + ")"); | |
| 518 }; | |
| 519 | |
| 520 /** | |
| 521 * Show, hide taxonomy panel. | |
| 522 */ | |
| 523 popoto.tools.toggleTaxonomy = function () { | |
| 524 var taxo = d3.select("#" + popoto.taxonomy.containerId); | |
| 525 if (taxo.filter(".disabled").empty()) { | |
| 526 taxo.classed("disabled", true); | |
| 527 } else { | |
| 528 taxo.classed("disabled", false); | |
| 529 } | |
| 530 }; | |
| 531 | |
| 532 popoto.tools.toggleFullScreen = function () { | |
| 533 | |
| 534 var elem = document.getElementById(popoto.graph.containerId); | |
| 535 | |
| 536 if (!document.fullscreenElement && // alternative standard method | |
| 537 !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods | |
| 538 if (elem.requestFullscreen) { | |
| 539 elem.requestFullscreen(); | |
| 540 } else if (elem.msRequestFullscreen) { | |
| 541 elem.msRequestFullscreen(); | |
| 542 } else if (elem.mozRequestFullScreen) { | |
| 543 elem.mozRequestFullScreen(); | |
| 544 } else if (elem.webkitRequestFullscreen) { | |
| 545 elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); | |
| 546 } | |
| 547 } else { | |
| 548 if (document.exitFullscreen) { | |
| 549 document.exitFullscreen(); | |
| 550 } else if (document.msExitFullscreen) { | |
| 551 document.msExitFullscreen(); | |
| 552 } else if (document.mozCancelFullScreen) { | |
| 553 document.mozCancelFullScreen(); | |
| 554 } else if (document.webkitExitFullscreen) { | |
| 555 document.webkitExitFullscreen(); | |
| 556 } | |
| 557 } | |
| 558 }; | |
| 559 // GRAPH ----------------------------------------------------------------------------------------------------------- | |
| 560 | |
| 561 popoto.graph = {}; | |
| 562 | |
| 563 /** | |
| 564 * ID of the HTML component where the graph query builder elements will be generated in. | |
| 565 * @type {string} | |
| 566 */ | |
| 567 popoto.graph.containerId = "popoto-graph"; | |
| 568 popoto.graph.hasGraphChanged = true; | |
| 569 // Defines the min and max level of zoom available in graph query builder. | |
| 570 popoto.graph.zoom = d3.behavior.zoom().scaleExtent([0.1, 10]); | |
| 571 popoto.graph.WHEEL_ZOOM_ENABLED = true; | |
| 572 popoto.graph.TOOL_TAXONOMY = "Show/hide taxonomy panel"; | |
| 573 popoto.graph.TOOL_CENTER = "Center view"; | |
| 574 popoto.graph.TOOL_FULL_SCREEN = "Full screen"; | |
| 575 popoto.graph.TOOL_RESET = "Reset graph"; | |
| 576 | |
| 577 /** | |
| 578 * Define the list of listenable events on graph. | |
| 579 */ | |
| 580 popoto.graph.Events = Object.freeze({NODE_ROOT_ADD: "root.node.add", NODE_EXPAND_RELATIONSHIP: "node.expandRelationship"}); | |
| 581 | |
| 582 /** | |
| 583 * Generates all the HTML and SVG element needed to display the graph query builder. | |
| 584 * Everything will be generated in the container with id defined by popoto.graph.containerId. | |
| 585 */ | |
| 586 popoto.graph.createGraphArea = function () { | |
| 587 | |
| 588 var htmlContainer = d3.select("#" + popoto.graph.containerId); | |
| 589 | |
| 590 var toolbar = htmlContainer | |
| 591 .append("div") | |
| 592 .attr("class", "ppt-toolbar"); | |
| 593 | |
| 594 if (popoto.tools.RESET_GRAPH) { | |
| 595 toolbar.append("span") | |
| 596 .attr("id", "popoto-reset-menu") | |
| 597 .attr("class", "ppt-menu reset") | |
| 598 .attr("title", popoto.graph.TOOL_RESET) | |
| 599 .on("click", popoto.tools.reset); | |
| 600 } | |
| 601 | |
| 602 if (popoto.taxonomy.isActive && popoto.tools.TOGGLE_TAXONOMY) { | |
| 603 toolbar.append("span") | |
| 604 .attr("id", "popoto-taxonomy-menu") | |
| 605 .attr("class", "ppt-menu taxonomy") | |
| 606 .attr("title", popoto.graph.TOOL_TAXONOMY) | |
| 607 .on("click", popoto.tools.toggleTaxonomy); | |
| 608 } | |
| 609 | |
| 610 if (popoto.tools.CENTER_GRAPH) { | |
| 611 toolbar.append("span") | |
| 612 .attr("id", "popoto-center-menu") | |
| 613 .attr("class", "ppt-menu center") | |
| 614 .attr("title", popoto.graph.TOOL_CENTER) | |
| 615 .on("click", popoto.tools.center); | |
| 616 } | |
| 617 | |
| 618 if (popoto.tools.TOGGLE_FULL_SCREEN) { | |
| 619 toolbar.append("span") | |
| 620 .attr("id", "popoto-fullscreen-menu") | |
| 621 .attr("class", "ppt-menu fullscreen") | |
| 622 .attr("title", popoto.graph.TOOL_FULL_SCREEN) | |
| 623 .on("click", popoto.tools.toggleFullScreen); | |
| 624 } | |
| 625 | |
| 626 var svgTag = htmlContainer.append("svg").call(popoto.graph.zoom.on("zoom", popoto.graph.rescale)); | |
| 627 | |
| 628 svgTag.on("dblclick.zoom", null) | |
| 629 .attr("class", "ppt-svg-graph"); | |
| 630 | |
| 631 if (!popoto.graph.WHEEL_ZOOM_ENABLED) { | |
| 632 // Disable mouse wheel events. | |
| 633 svgTag.on("wheel.zoom", null) | |
| 634 .on("mousewheel.zoom", null); | |
| 635 } | |
| 636 | |
| 637 popoto.graph.svg = svgTag.append('svg:g'); | |
| 638 | |
| 639 // Create two separated area for links and nodes | |
| 640 // Links and nodes are separated in a dedicated "g" element | |
| 641 // and nodes are generated after links to ensure that nodes are always on foreground. | |
| 642 popoto.graph.svg.append("g").attr("id", popoto.graph.link.gID); | |
| 643 popoto.graph.svg.append("g").attr("id", popoto.graph.node.gID); | |
| 644 | |
| 645 // This listener is used to center the root node in graph during a window resize. | |
| 646 // TODO can the listener be limited on the parent container only? | |
| 647 window.addEventListener('resize', popoto.graph.centerRootNode); | |
| 648 }; | |
| 649 | |
| 650 popoto.graph.centerRootNode = function () { | |
| 651 popoto.graph.getRootNode().px = popoto.graph.getSVGWidth() / 2; | |
| 652 popoto.graph.getRootNode().py = popoto.graph.getSVGHeight() / 2; | |
| 653 popoto.update(); | |
| 654 }; | |
| 655 | |
| 656 /** | |
| 657 * Get the actual width of the SVG element containing the graph query builder. | |
| 658 * @returns {number} | |
| 659 */ | |
| 660 popoto.graph.getSVGWidth = function () { | |
| 661 if (typeof popoto.graph.svg == 'undefined' || popoto.graph.svg.empty()) { | |
| 662 popoto.logger.debug("popoto.graph.svg is undefined or empty."); | |
| 663 return 0; | |
| 664 } else { | |
| 665 return document.getElementById(popoto.graph.containerId).clientWidth; | |
| 666 } | |
| 667 }; | |
| 668 | |
| 669 /** | |
| 670 * Get the actual height of the SVG element containing the graph query builder. | |
| 671 * @returns {number} | |
| 672 */ | |
| 673 popoto.graph.getSVGHeight = function () { | |
| 674 if (typeof popoto.graph.svg == 'undefined' || popoto.graph.svg.empty()) { | |
| 675 popoto.logger.debug("popoto.graph.svg is undefined or empty."); | |
| 676 return 0; | |
| 677 } else { | |
| 678 return document.getElementById(popoto.graph.containerId).clientHeight; | |
| 679 } | |
| 680 }; | |
| 681 | |
| 682 /** | |
| 683 * Function to call on SVG zoom event to update the svg transform attribute. | |
| 684 */ | |
| 685 popoto.graph.rescale = function () { | |
| 686 var trans = d3.event.translate, | |
| 687 scale = d3.event.scale; | |
| 688 | |
| 689 popoto.graph.svg.attr("transform", | |
| 690 "translate(" + trans + ")" | |
| 691 + " scale(" + scale + ")"); | |
| 692 }; | |
| 693 | |
| 694 /****************************** | |
| 695 * Default parameters used to configure D3.js force layout. | |
| 696 * These parameter can be modified to change graph behavior. | |
| 697 ******************************/ | |
| 698 popoto.graph.LINK_DISTANCE = 150; | |
| 699 popoto.graph.LINK_STRENGTH = 1; | |
| 700 popoto.graph.FRICTION = 0.8; | |
| 701 popoto.graph.CHARGE = -1400; | |
| 702 popoto.graph.THETA = 0.8; | |
| 703 popoto.graph.GRAVITY = 0.0; | |
| 704 | |
| 705 /** | |
| 706 * Contains the list off root node add listeners. | |
| 707 */ | |
| 708 popoto.graph.rootNodeAddListeners = []; | |
| 709 popoto.graph.nodeExpandRelationsipListeners = []; | |
| 710 | |
| 711 /** | |
| 712 * Create the D3.js force layout for the graph query builder. | |
| 713 */ | |
| 714 popoto.graph.createForceLayout = function () { | |
| 715 | |
| 716 popoto.graph.force = d3.layout.force() | |
| 717 .size([popoto.graph.getSVGWidth(), popoto.graph.getSVGHeight()]) | |
| 718 .linkDistance(function (d) { | |
| 719 if (d.type === popoto.graph.link.LinkTypes.RELATION) { | |
| 720 return ((3 * popoto.graph.LINK_DISTANCE) / 2); | |
| 721 } else { | |
| 722 return popoto.graph.LINK_DISTANCE; | |
| 723 } | |
| 724 }) | |
| 725 .linkStrength(function (d) { | |
| 726 if (d.linkStrength) { | |
| 727 return d.linkStrength; | |
| 728 } else { | |
| 729 return popoto.graph.LINK_STRENGTH; | |
| 730 } | |
| 731 }) | |
| 732 .friction(popoto.graph.FRICTION) | |
| 733 .charge(function (d) { | |
| 734 if (d.charge) { | |
| 735 return d.charge; | |
| 736 } else { | |
| 737 return popoto.graph.CHARGE; | |
| 738 } | |
| 739 }) | |
| 740 .theta(popoto.graph.THETA) | |
| 741 .gravity(popoto.graph.GRAVITY) | |
| 742 .on("tick", popoto.graph.tick); // Function called on every position update done by D3.js | |
| 743 | |
| 744 // Disable event propagation on drag to avoid zoom and pan issues | |
| 745 popoto.graph.force.drag() | |
| 746 .on("dragstart", function (d) { | |
| 747 d3.event.sourceEvent.stopPropagation(); | |
| 748 }) | |
| 749 .on("dragend", function (d) { | |
| 750 d3.event.sourceEvent.stopPropagation(); | |
| 751 }); | |
| 752 }; | |
| 753 | |
| 754 /** | |
| 755 * Add a listener to the specified event. | |
| 756 * | |
| 757 * @param event name of the event to add the listener. | |
| 758 * @param listener the listener to add. | |
| 759 */ | |
| 760 popoto.graph.on = function (event, listener) { | |
| 761 if (event === popoto.graph.Events.NODE_ROOT_ADD) { | |
| 762 popoto.graph.rootNodeAddListeners.push(listener); | |
| 763 } | |
| 764 if (event === popoto.graph.Events.NODE_EXPAND_RELATIONSHIP) { | |
| 765 popoto.graph.nodeExpandRelationsipListeners.push(listener); | |
| 766 } | |
| 767 }; | |
| 768 | |
| 769 /** | |
| 770 * Adds graph root nodes using the label set as parameter. | |
| 771 * All the other nodes should have been removed first to avoid inconsistent data. | |
| 772 * | |
| 773 * @param label label of the node to add as root. | |
| 774 */ | |
| 775 popoto.graph.addRootNode = function (label) { | |
| 776 if (popoto.graph.force.nodes().length > 0) { | |
| 777 popoto.logger.debug("popoto.graph.addRootNode is called but the graph is not empty."); | |
| 778 } | |
| 779 | |
| 780 popoto.graph.force.nodes().push({ | |
| 781 "id": "0", | |
| 782 "type": popoto.graph.node.NodeTypes.ROOT, | |
| 783 // x and y coordinates are set to the center of the SVG area. | |
| 784 // These coordinate will never change at runtime except if the window is resized. | |
| 785 "x": popoto.graph.getSVGWidth() / 2, | |
| 786 "y": popoto.graph.getSVGHeight() / 2, | |
| 787 "label": label, | |
| 788 // The node is fixed to always remain in the center of the svg area. | |
| 789 // This property should not be changed at runtime to avoid issues with the zoom and pan. | |
| 790 "fixed": true, | |
| 791 // Label used internally to identify the node. | |
| 792 // This label is used for example as cypher query identifier. | |
| 793 "internalLabel": popoto.graph.node.generateInternalLabel(label) | |
| 794 }); | |
| 795 | |
| 796 // Notify listeners | |
| 797 popoto.graph.rootNodeAddListeners.forEach(function (listener) { | |
| 798 listener(popoto.graph.getRootNode()); | |
| 799 }); | |
| 800 }; | |
| 801 | |
| 802 /** | |
| 803 * Get the graph root node. | |
| 804 * @returns {*} | |
| 805 */ | |
| 806 popoto.graph.getRootNode = function () { | |
| 807 return popoto.graph.force.nodes()[0]; | |
| 808 }; | |
| 809 | |
| 810 /** | |
| 811 * Function to call on D3.js force layout tick event. | |
| 812 * This function will update the position of all links and nodes elements in the graph with the force layout computed coordinate. | |
| 813 */ | |
| 814 popoto.graph.tick = function () { | |
| 815 popoto.graph.svg.selectAll("#" + popoto.graph.link.gID + " > g") | |
| 816 .selectAll("path") | |
| 817 .attr("d", function (d) { | |
| 818 var parentAngle = popoto.graph.computeParentAngle(d.target); | |
| 819 var targetX = d.target.x + (popoto.graph.link.RADIUS * Math.cos(parentAngle)), | |
| 820 targetY = d.target.y - (popoto.graph.link.RADIUS * Math.sin(parentAngle)); | |
| 821 | |
| 822 var sourceX = d.source.x - (popoto.graph.link.RADIUS * Math.cos(parentAngle)), | |
| 823 sourceY = d.source.y + (popoto.graph.link.RADIUS * Math.sin(parentAngle)); | |
| 824 | |
| 825 if (d.source.x <= d.target.x) { | |
| 826 return "M" + sourceX + " " + sourceY + "L" + targetX + " " + targetY; | |
| 827 } else { | |
| 828 return "M" + targetX + " " + targetY + "L" + sourceX + " " + sourceY; | |
| 829 } | |
| 830 }); | |
| 831 | |
| 832 popoto.graph.svg.selectAll("#" + popoto.graph.node.gID + " > g") | |
| 833 .attr("transform", function (d) { | |
| 834 return "translate(" + (d.x) + "," + (d.y) + ")"; | |
| 835 }); | |
| 836 }; | |
| 837 | |
| 838 // LINKS ----------------------------------------------------------------------------------------------------------- | |
| 839 popoto.graph.link = {}; | |
| 840 | |
| 841 /** | |
| 842 * Defines the radius around the node to start link drawing. | |
| 843 * If set to 0 links will start from the middle of the node. | |
| 844 */ | |
| 845 popoto.graph.link.RADIUS = 25; | |
| 846 | |
| 847 // ID of the g element in SVG graph containing all the link elements. | |
| 848 popoto.graph.link.gID = "popoto-glinks"; | |
| 849 | |
| 850 /** | |
| 851 * Defines the different type of link. | |
| 852 * RELATION is a relation link between two nodes. | |
| 853 * VALUE is a link between a generic node and a value. | |
| 854 */ | |
| 855 popoto.graph.link.LinkTypes = Object.freeze({RELATION: 0, VALUE: 1}); | |
| 856 | |
| 857 /** | |
| 858 * Function to call to update the links after modification in the model. | |
| 859 * This function will update the graph with all removed, modified or added links using d3.js mechanisms. | |
| 860 */ | |
| 861 popoto.graph.link.updateLinks = function () { | |
| 862 popoto.graph.link.svgLinkElements = popoto.graph.svg.select("#" + popoto.graph.link.gID).selectAll("g"); | |
| 863 popoto.graph.link.updateData(); | |
| 864 popoto.graph.link.removeElements(); | |
| 865 popoto.graph.link.addNewElements(); | |
| 866 popoto.graph.link.updateElements(); | |
| 867 }; | |
| 868 | |
| 869 /** | |
| 870 * Update the links element with data coming from popoto.graph.force.links(). | |
| 871 */ | |
| 872 popoto.graph.link.updateData = function () { | |
| 873 popoto.graph.link.svgLinkElements = popoto.graph.link.svgLinkElements.data(popoto.graph.force.links(), function (d) { | |
| 874 return d.id; | |
| 875 }); | |
| 876 }; | |
| 877 | |
| 878 /** | |
| 879 * Clean links elements removed from the list. | |
| 880 */ | |
| 881 popoto.graph.link.removeElements = function () { | |
| 882 popoto.graph.link.svgLinkElements.exit().remove(); | |
| 883 }; | |
| 884 | |
| 885 /** | |
| 886 * Create new elements. | |
| 887 */ | |
| 888 popoto.graph.link.addNewElements = function () { | |
| 889 | |
| 890 var newLinkElements = popoto.graph.link.svgLinkElements.enter().append("g") | |
| 891 .attr("class", "ppt-glink") | |
| 892 .on("mouseover", popoto.graph.link.mouseOverLink) | |
| 893 .on("mouseout", popoto.graph.link.mouseOutLink); | |
| 894 | |
| 895 newLinkElements.append("path"); | |
| 896 | |
| 897 newLinkElements.append("text") | |
| 898 .attr("text-anchor", "middle") | |
| 899 .attr("dy", "-4") | |
| 900 .append("textPath") | |
| 901 .attr("class", "ppt-textPath") | |
| 902 .attr("startOffset", "50%"); | |
| 903 | |
| 904 }; | |
| 905 | |
| 906 /** | |
| 907 * Update all the elements (new + modified) | |
| 908 */ | |
| 909 popoto.graph.link.updateElements = function () { | |
| 910 popoto.graph.link.svgLinkElements | |
| 911 .attr("id", function (d) { | |
| 912 return "ppt-glink_" + d.id; | |
| 913 }); | |
| 914 | |
| 915 popoto.graph.link.svgLinkElements.selectAll("path") | |
| 916 .attr("id", function (d) { | |
| 917 return "ppt-path_" + d.id | |
| 918 }) | |
| 919 .attr("class", function (d) { | |
| 920 if (d.type === popoto.graph.link.LinkTypes.VALUE) { | |
| 921 return "ppt-link-value"; | |
| 922 } else { | |
| 923 if (d.target.count == 0) { | |
| 924 return "ppt-link-relation disabled"; | |
| 925 } else { | |
| 926 if (d.target.value !== undefined) { | |
| 927 return "ppt-link-relation value"; | |
| 928 } else { | |
| 929 return "ppt-link-relation"; | |
| 930 } | |
| 931 } | |
| 932 } | |
| 933 }); | |
| 934 | |
| 935 // Due to a bug on webkit browsers (as of 30/01/2014) textPath cannot be selected | |
| 936 // To workaround this issue the selection is done with its associated css class | |
| 937 popoto.graph.link.svgLinkElements.selectAll("text") | |
| 938 .attr("id", function (d) { | |
| 939 return "ppt-text_" + d.id | |
| 940 }) | |
| 941 .attr("class", function (d) { | |
| 942 if (d.type === popoto.graph.link.LinkTypes.VALUE) { | |
| 943 return "ppt-link-text-value"; | |
| 944 } else { | |
| 945 if (d.target.count == 0) { | |
| 946 return "ppt-link-text-relation disabled"; | |
| 947 } else { | |
| 948 if (d.target.value !== undefined) { | |
| 949 return "ppt-link-text-relation value"; | |
| 950 } else { | |
| 951 return "ppt-link-text-relation"; | |
| 952 } | |
| 953 } | |
| 954 } | |
| 955 }) | |
| 956 .selectAll(".ppt-textPath") | |
| 957 .attr("id", function (d) { | |
| 958 return "ppt-textpath_" + d.id | |
| 959 }) | |
| 960 .attr("xlink:href", function (d) { | |
| 961 return "#ppt-path_" + d.id | |
| 962 }) | |
| 963 .text(function (d) { | |
| 964 return popoto.provider.getLinkTextValue(d); | |
| 965 }); | |
| 966 }; | |
| 967 | |
| 968 /** | |
| 969 * Function called when mouse is over the link. | |
| 970 * This function is used to change the CSS class on hover of the link and query viewer element. | |
| 971 * | |
| 972 * TODO try to introduce event instead of directly access query spans here. This could be used in future extensions. | |
| 973 */ | |
| 974 popoto.graph.link.mouseOverLink = function () { | |
| 975 d3.select(this).select("path").classed("ppt-link-hover", true); | |
| 976 d3.select(this).select("text").classed("ppt-link-hover", true); | |
| 977 | |
| 978 if (popoto.queryviewer.isActive) { | |
| 979 var hoveredLink = d3.select(this).data()[0]; | |
| 980 | |
| 981 popoto.queryviewer.queryConstraintSpanElements.filter(function (d) { | |
| 982 return d.ref === hoveredLink; | |
| 983 }).classed("hover", true); | |
| 984 popoto.queryviewer.querySpanElements.filter(function (d) { | |
| 985 return d.ref === hoveredLink; | |
| 986 }).classed("hover", true); | |
| 987 } | |
| 988 }; | |
| 989 | |
| 990 /** | |
| 991 * Function called when mouse goes out of the link. | |
| 992 * This function is used to reinitialize the CSS class of the link and query viewer element. | |
| 993 */ | |
| 994 popoto.graph.link.mouseOutLink = function () { | |
| 995 d3.select(this).select("path").classed("ppt-link-hover", false); | |
| 996 d3.select(this).select("text").classed("ppt-link-hover", false); | |
| 997 | |
| 998 if (popoto.queryviewer.isActive) { | |
| 999 var hoveredLink = d3.select(this).data()[0]; | |
| 1000 | |
| 1001 popoto.queryviewer.queryConstraintSpanElements.filter(function (d) { | |
| 1002 return d.ref === hoveredLink; | |
| 1003 }).classed("hover", false); | |
| 1004 popoto.queryviewer.querySpanElements.filter(function (d) { | |
| 1005 return d.ref === hoveredLink; | |
| 1006 }).classed("hover", false); | |
| 1007 } | |
| 1008 }; | |
| 1009 | |
| 1010 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| 1011 // NODES ----------------------------------------------------------------------------------------------------------- | |
| 1012 | |
| 1013 popoto.graph.node = {}; | |
| 1014 | |
| 1015 // ID of the g element in SVG graph containing all the link elements. | |
| 1016 popoto.graph.node.gID = "popoto-gnodes"; | |
| 1017 | |
| 1018 // Node ellipse size used by default for text nodes. | |
| 1019 popoto.graph.node.ELLIPSE_RX = 50; | |
| 1020 popoto.graph.node.ELLIPSE_RY = 25; | |
| 1021 popoto.graph.node.TEXT_Y = 8; | |
| 1022 popoto.graph.node.BACK_CIRCLE_R = 70; | |
| 1023 // Define the max number of character displayed in ellipses. | |
| 1024 popoto.graph.node.NODE_MAX_CHARS = 11; | |
| 1025 | |
| 1026 // Number of nodes displayed per page during value selection. | |
| 1027 popoto.graph.node.PAGE_SIZE = 10; | |
| 1028 | |
| 1029 // Count box default size | |
| 1030 popoto.graph.node.CountBox = {x: 16, y: 33, w: 52, h: 19}; | |
| 1031 | |
| 1032 // Store choose node state to avoid multiple node expand at the same time | |
| 1033 popoto.graph.node.chooseWaiting = false; | |
| 1034 | |
| 1035 /** | |
| 1036 * Defines the list of possible nodes. | |
| 1037 * ROOT: Node used as graph root. It is the target of the query. Only one node of this type should be available in graph. | |
| 1038 * CHOOSE: Nodes defining a generic node label. From these node is is possible to select a value or explore relations. | |
| 1039 * VALUE: Unique node containing a value constraint. Usually replace CHOOSE nodes once a value as been selected. | |
| 1040 * GROUP: Empty node used to group relations. No value can be selected but relations can be explored. These nodes doesn't have count. | |
| 1041 */ | |
| 1042 popoto.graph.node.NodeTypes = Object.freeze({ROOT: 0, CHOOSE: 1, VALUE: 2, GROUP: 3}); | |
| 1043 | |
| 1044 // Variable used to generate unique id for each new nodes. | |
| 1045 popoto.graph.node.idgen = 0; | |
| 1046 | |
| 1047 // Used to generate unique internal labels used for example as identifier in Cypher query. | |
| 1048 popoto.graph.node.internalLabels = {}; | |
| 1049 | |
| 1050 /** | |
| 1051 * Create a normalized identifier from a node label. | |
| 1052 * Multiple calls with the same node label will generate different unique identifier. | |
| 1053 * | |
| 1054 * @param nodeLabel | |
| 1055 * @returns {string} | |
| 1056 */ | |
| 1057 popoto.graph.node.generateInternalLabel = function (nodeLabel) { | |
| 1058 var label = nodeLabel.toLowerCase().replace(/ /g, ''); | |
| 1059 | |
| 1060 if (label in popoto.graph.node.internalLabels) { | |
| 1061 popoto.graph.node.internalLabels[label] = popoto.graph.node.internalLabels[label] + 1; | |
| 1062 } else { | |
| 1063 popoto.graph.node.internalLabels[label] = 0; | |
| 1064 return label; | |
| 1065 } | |
| 1066 | |
| 1067 return label + popoto.graph.node.internalLabels[label]; | |
| 1068 }; | |
| 1069 | |
| 1070 /** | |
| 1071 * Update Nodes SVG elements using D3.js update mechanisms. | |
| 1072 */ | |
| 1073 popoto.graph.node.updateNodes = function () { | |
| 1074 if (!popoto.graph.node.svgNodeElements) { | |
| 1075 popoto.graph.node.svgNodeElements = popoto.graph.svg.select("#" + popoto.graph.node.gID).selectAll("g"); | |
| 1076 } | |
| 1077 popoto.graph.node.updateData(); | |
| 1078 popoto.graph.node.removeElements(); | |
| 1079 popoto.graph.node.addNewElements(); | |
| 1080 popoto.graph.node.updateElements(); | |
| 1081 }; | |
| 1082 | |
| 1083 /** | |
| 1084 * Update node data with changes done in popoto.graph.force.nodes() model. | |
| 1085 */ | |
| 1086 popoto.graph.node.updateData = function () { | |
| 1087 popoto.graph.node.svgNodeElements = popoto.graph.node.svgNodeElements.data(popoto.graph.force.nodes(), function (d) { | |
| 1088 return d.id; | |
| 1089 }); | |
| 1090 | |
| 1091 if (popoto.graph.hasGraphChanged) { | |
| 1092 popoto.graph.node.updateCount(); | |
| 1093 popoto.graph.hasGraphChanged = false; | |
| 1094 } | |
| 1095 }; | |
| 1096 | |
| 1097 /** | |
| 1098 * Update nodes count by executing a query for every nodes with the new graph structure. | |
| 1099 */ | |
| 1100 popoto.graph.node.updateCount = function () { | |
| 1101 | |
| 1102 var statements = []; | |
| 1103 | |
| 1104 var counterNodes = popoto.graph.force.nodes() | |
| 1105 .filter(function (d) { | |
| 1106 return d.type !== popoto.graph.node.NodeTypes.VALUE && d.type !== popoto.graph.node.NodeTypes.GROUP; | |
| 1107 }); | |
| 1108 | |
| 1109 counterNodes.forEach(function (node) { | |
| 1110 var query = popoto.query.generateNodeCountCypherQuery(node); | |
| 1111 statements.push( | |
| 1112 { | |
| 1113 "statement": query | |
| 1114 } | |
| 1115 ); | |
| 1116 }); | |
| 1117 | |
| 1118 popoto.logger.info("Count nodes ==> "); | |
| 1119 popoto.rest.post( | |
| 1120 { | |
| 1121 "statements": statements | |
| 1122 }) | |
| 1123 .done(function (returnedData) { | |
| 1124 | |
| 1125 if (returnedData.errors && returnedData.errors.length > 0) { | |
| 1126 popoto.logger.error("Cypher query error:" + JSON.stringify(returnedData.errors)); | |
| 1127 } | |
| 1128 | |
| 1129 if (returnedData.results && returnedData.results.length > 0) { | |
| 1130 for (var i = 0; i < counterNodes.length; i++) { | |
| 1131 counterNodes[i].count = returnedData.results[i].data[0].row[0]; | |
| 1132 } | |
| 1133 } else { | |
| 1134 counterNodes.forEach(function (node) { | |
| 1135 node.count = 0; | |
| 1136 }); | |
| 1137 } | |
| 1138 popoto.graph.node.updateElements(); | |
| 1139 popoto.graph.link.updateElements(); | |
| 1140 }) | |
| 1141 .fail(function (xhr, textStatus, errorThrown) { | |
| 1142 popoto.logger.error(textStatus + ": error while accessing Neo4j server on URL:\"" + popoto.rest.CYPHER_URL + "\" defined in \"popoto.rest.CYPHER_URL\" property: " + errorThrown); | |
| 1143 counterNodes.forEach(function (node) { | |
| 1144 node.count = 0; | |
| 1145 }); | |
| 1146 popoto.graph.node.updateElements(); | |
| 1147 popoto.graph.link.updateElements(); | |
| 1148 }); | |
| 1149 }; | |
| 1150 | |
| 1151 /** | |
| 1152 * Remove old elements. | |
| 1153 * Should be called after updateData. | |
| 1154 */ | |
| 1155 popoto.graph.node.removeElements = function () { | |
| 1156 var toRemove = popoto.graph.node.svgNodeElements.exit(); | |
| 1157 | |
| 1158 // Nodes without parent are simply removed. | |
| 1159 toRemove.filter(function (d) { | |
| 1160 return !d.parent; | |
| 1161 }).remove(); | |
| 1162 | |
| 1163 // Nodes with a parent are removed with an animation (nodes are collapsed to their parents before being removed) | |
| 1164 toRemove.filter(function (d) { | |
| 1165 return d.parent; | |
| 1166 }).transition().duration(300).attr("transform", function (d) { | |
| 1167 return "translate(" + d.parent.x + "," + d.parent.y + ")"; | |
| 1168 }).remove(); | |
| 1169 }; | |
| 1170 | |
| 1171 /** | |
| 1172 * Add all new elements. | |
| 1173 * Only the skeleton of new nodes are added custom data will be added during the element update phase. | |
| 1174 * Should be called after updateData and before updateElements. | |
| 1175 */ | |
| 1176 popoto.graph.node.addNewElements = function () { | |
| 1177 var gNewNodeElements = popoto.graph.node.svgNodeElements.enter() | |
| 1178 .append("g") | |
| 1179 .on("click", popoto.graph.node.nodeClick) | |
| 1180 .on("mouseover", popoto.graph.node.mouseOverNode) | |
| 1181 .on("mouseout", popoto.graph.node.mouseOutNode); | |
| 1182 | |
| 1183 // Add right click on all nodes except value | |
| 1184 gNewNodeElements.filter(function (d) { | |
| 1185 return d.type !== popoto.graph.node.NodeTypes.VALUE; | |
| 1186 }).on("contextmenu", popoto.graph.node.clearSelection); | |
| 1187 | |
| 1188 // Disable right click context menu on value nodes | |
| 1189 gNewNodeElements.filter(function (d) { | |
| 1190 return d.type === popoto.graph.node.NodeTypes.VALUE; | |
| 1191 }).on("contextmenu", function () { | |
| 1192 // Disable context menu on | |
| 1193 d3.event.preventDefault(); | |
| 1194 }); | |
| 1195 | |
| 1196 // Most browser will generate a tooltip if a title is specified for the SVG element | |
| 1197 // TODO Introduce an SVG tooltip instead? | |
| 1198 gNewNodeElements.append("title").attr("class", "ppt-svg-title"); | |
| 1199 | |
| 1200 // Nodes are composed of 3 layouts and skeleton are created here. | |
| 1201 popoto.graph.node.addBackgroundElements(gNewNodeElements); | |
| 1202 popoto.graph.node.addMiddlegroundElements(gNewNodeElements); | |
| 1203 popoto.graph.node.addForegroundElements(gNewNodeElements); | |
| 1204 }; | |
| 1205 | |
| 1206 /** | |
| 1207 * Create the background for a new node element. | |
| 1208 * The background of a node is defined by a circle not visible by default (fill-opacity set to 0) but can be used to highlight a node with animation on this attribute. | |
| 1209 * This circle also define the node zone that can receive events like mouse clicks. | |
| 1210 * | |
| 1211 * @param gNewNodeElements | |
| 1212 */ | |
| 1213 popoto.graph.node.addBackgroundElements = function (gNewNodeElements) { | |
| 1214 var background = gNewNodeElements | |
| 1215 .append("g") | |
| 1216 .attr("class", "ppt-g-node-background"); | |
| 1217 | |
| 1218 background.append("circle") | |
| 1219 .attr("class", function (d) { | |
| 1220 var cssClass = "ppt-node-background-circle"; | |
| 1221 if (d.value !== undefined) { | |
| 1222 cssClass = cssClass + " selected-value"; | |
| 1223 } else if (d.type === popoto.graph.node.NodeTypes.ROOT) { | |
| 1224 cssClass = cssClass + " root"; | |
| 1225 } else if (d.type === popoto.graph.node.NodeTypes.CHOOSE) { | |
| 1226 cssClass = cssClass + " choose"; | |
| 1227 } else if (d.type === popoto.graph.node.NodeTypes.VALUE) { | |
| 1228 cssClass = cssClass + " value"; | |
| 1229 } else if (d.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 1230 cssClass = cssClass + " group"; | |
| 1231 } | |
| 1232 | |
| 1233 return cssClass; | |
| 1234 }) | |
| 1235 .style("fill-opacity", 0) | |
| 1236 .attr("r", popoto.graph.node.BACK_CIRCLE_R); | |
| 1237 }; | |
| 1238 | |
| 1239 /** | |
| 1240 * Create the node main elements. | |
| 1241 * | |
| 1242 * @param gNewNodeElements | |
| 1243 */ | |
| 1244 popoto.graph.node.addMiddlegroundElements = function (gNewNodeElements) { | |
| 1245 var middle = gNewNodeElements | |
| 1246 .append("g") | |
| 1247 .attr("class", "ppt-g-node-middleground"); | |
| 1248 }; | |
| 1249 | |
| 1250 /** | |
| 1251 * Create the node foreground elements. | |
| 1252 * It contains node additional elements, count or tools like navigation arrows. | |
| 1253 * | |
| 1254 * @param gNewNodeElements | |
| 1255 */ | |
| 1256 popoto.graph.node.addForegroundElements = function (gNewNodeElements) { | |
| 1257 var foreground = gNewNodeElements | |
| 1258 .append("g") | |
| 1259 .attr("class", "ppt-g-node-foreground"); | |
| 1260 | |
| 1261 // plus sign | |
| 1262 var gRelationship = foreground.filter(function (d) { | |
| 1263 return d.type !== popoto.graph.node.NodeTypes.VALUE; | |
| 1264 }).append("g").attr("class", "ppt-rel-plus-icon"); | |
| 1265 | |
| 1266 gRelationship.append("title") | |
| 1267 .text("Add relationship"); | |
| 1268 | |
| 1269 gRelationship | |
| 1270 .append("circle") | |
| 1271 .attr("class", "ppt-rel-plus-background") | |
| 1272 .attr("cx", "32") | |
| 1273 .attr("cy", "-43") | |
| 1274 .attr("r", "16"); | |
| 1275 | |
| 1276 gRelationship | |
| 1277 .append("path") | |
| 1278 .attr("class", "ppt-rel-plus-path") | |
| 1279 .attr("d", "M 40,-45 35,-45 35,-50 30,-50 30,-45 25,-45 25,-40 30,-40 30,-35 35,-35 35,-40 40,-40 z"); | |
| 1280 | |
| 1281 gRelationship | |
| 1282 .on("mouseover", function () { | |
| 1283 d3.select(this).select(".ppt-rel-plus-background").transition().style("fill-opacity", 0.5); | |
| 1284 }) | |
| 1285 .on("mouseout", function () { | |
| 1286 d3.select(this).select(".ppt-rel-plus-background").transition().style("fill-opacity", 0); | |
| 1287 }) | |
| 1288 .on("click", function () { | |
| 1289 d3.event.stopPropagation(); // To avoid click event on svg element in background | |
| 1290 popoto.graph.node.expandRelationship.call(this); | |
| 1291 }); | |
| 1292 | |
| 1293 // Minus sign | |
| 1294 var gMinusRelationship = foreground.filter(function (d) { | |
| 1295 return d.type !== popoto.graph.node.NodeTypes.VALUE; | |
| 1296 }).append("g").attr("class", "ppt-rel-minus-icon"); | |
| 1297 | |
| 1298 gMinusRelationship.append("title") | |
| 1299 .text("Remove relationship"); | |
| 1300 | |
| 1301 gMinusRelationship | |
| 1302 .append("circle") | |
| 1303 .attr("class", "ppt-rel-minus-background") | |
| 1304 .attr("cx", "32") | |
| 1305 .attr("cy", "-43") | |
| 1306 .attr("r", "16"); | |
| 1307 | |
| 1308 gMinusRelationship | |
| 1309 .append("path") | |
| 1310 .attr("class", "ppt-rel-minus-path") | |
| 1311 .attr("d", "M 40,-45 25,-45 25,-40 40,-40 z"); | |
| 1312 | |
| 1313 gMinusRelationship | |
| 1314 .on("mouseover", function () { | |
| 1315 d3.select(this).select(".ppt-rel-minus-background").transition().style("fill-opacity", 0.5); | |
| 1316 }) | |
| 1317 .on("mouseout", function () { | |
| 1318 d3.select(this).select(".ppt-rel-minus-background").transition().style("fill-opacity", 0); | |
| 1319 }) | |
| 1320 .on("click", function () { | |
| 1321 d3.event.stopPropagation(); // To avoid click event on svg element in background | |
| 1322 popoto.graph.node.collapseRelationship.call(this); | |
| 1323 }); | |
| 1324 | |
| 1325 // Arrows icons added only for root and choose nodes | |
| 1326 var gArrow = foreground.filter(function (d) { | |
| 1327 return d.type === popoto.graph.node.NodeTypes.ROOT || d.type === popoto.graph.node.NodeTypes.CHOOSE; | |
| 1328 }) | |
| 1329 .append("g") | |
| 1330 .attr("class", "ppt-node-foreground-g-arrows"); | |
| 1331 | |
| 1332 var glArrow = gArrow.append("g"); | |
| 1333 //glArrow.append("polygon") | |
| 1334 //.attr("points", "-53,-23 -33,-33 -33,-13"); | |
| 1335 glArrow.append("circle") | |
| 1336 .attr("class", "ppt-larrow") | |
| 1337 .attr("cx", "-43") | |
| 1338 .attr("cy", "-23") | |
| 1339 .attr("r", "17"); | |
| 1340 | |
| 1341 glArrow.append("path") | |
| 1342 .attr("class", "ppt-arrow") | |
| 1343 .attr("d", "m -44.905361,-23 6.742,-6.742 c 0.81,-0.809 0.81,-2.135 0,-2.944 l -0.737,-0.737 c -0.81,-0.811 -2.135,-0.811 -2.945,0 l -8.835,8.835 c -0.435,0.434 -0.628,1.017 -0.597,1.589 -0.031,0.571 0.162,1.154 0.597,1.588 l 8.835,8.834 c 0.81,0.811 2.135,0.811 2.945,0 l 0.737,-0.737 c 0.81,-0.808 0.81,-2.134 0,-2.943 l -6.742,-6.743 z"); | |
| 1344 | |
| 1345 glArrow.on("click", function (clickedNode) { | |
| 1346 d3.event.stopPropagation(); // To avoid click event on svg element in background | |
| 1347 | |
| 1348 // On left arrow click page number is decreased and node expanded to display the new page | |
| 1349 if (clickedNode.page > 1) { | |
| 1350 clickedNode.page--; | |
| 1351 popoto.graph.node.collapseNode(clickedNode); | |
| 1352 popoto.graph.node.expandNode(clickedNode); | |
| 1353 } | |
| 1354 }); | |
| 1355 | |
| 1356 var grArrow = gArrow.append("g"); | |
| 1357 //grArrow.append("polygon") | |
| 1358 //.attr("points", "53,-23 33,-33 33,-13"); | |
| 1359 | |
| 1360 grArrow.append("circle") | |
| 1361 .attr("class", "ppt-rarrow") | |
| 1362 .attr("cx", "43") | |
| 1363 .attr("cy", "-23") | |
| 1364 .attr("r", "17"); | |
| 1365 | |
| 1366 grArrow.append("path") | |
| 1367 .attr("class", "ppt-arrow") | |
| 1368 .attr("d", "m 51.027875,-24.5875 -8.835,-8.835 c -0.811,-0.811 -2.137,-0.811 -2.945,0 l -0.738,0.737 c -0.81,0.81 -0.81,2.136 0,2.944 l 6.742,6.742 -6.742,6.742 c -0.81,0.81 -0.81,2.136 0,2.943 l 0.737,0.737 c 0.81,0.811 2.136,0.811 2.945,0 l 8.835,-8.836 c 0.435,-0.434 0.628,-1.017 0.597,-1.588 0.032,-0.569 -0.161,-1.152 -0.596,-1.586 z"); | |
| 1369 | |
| 1370 grArrow.on("click", function (clickedNode) { | |
| 1371 d3.event.stopPropagation(); // To avoid click event on svg element in background | |
| 1372 | |
| 1373 if (clickedNode.page * popoto.graph.node.PAGE_SIZE < clickedNode.count) { | |
| 1374 clickedNode.page++; | |
| 1375 popoto.graph.node.collapseNode(clickedNode); | |
| 1376 popoto.graph.node.expandNode(clickedNode); | |
| 1377 } | |
| 1378 }); | |
| 1379 | |
| 1380 // Count box | |
| 1381 var countForeground = foreground.filter(function (d) { | |
| 1382 return d.type !== popoto.graph.node.NodeTypes.GROUP; | |
| 1383 }); | |
| 1384 | |
| 1385 countForeground | |
| 1386 .append("rect") | |
| 1387 .attr("x", popoto.graph.node.CountBox.x) | |
| 1388 .attr("y", popoto.graph.node.CountBox.y) | |
| 1389 .attr("width", popoto.graph.node.CountBox.w) | |
| 1390 .attr("height", popoto.graph.node.CountBox.h) | |
| 1391 .attr("class", "ppt-count-box"); | |
| 1392 | |
| 1393 countForeground | |
| 1394 .append("text") | |
| 1395 .attr("x", 42) | |
| 1396 .attr("y", 48) | |
| 1397 .attr("text-anchor", "middle") | |
| 1398 .attr("class", "ppt-count-text"); | |
| 1399 }; | |
| 1400 | |
| 1401 /** | |
| 1402 * Updates all elements. | |
| 1403 */ | |
| 1404 popoto.graph.node.updateElements = function () { | |
| 1405 popoto.graph.node.svgNodeElements.attr("id", function (d) { | |
| 1406 return "popoto-gnode_" + d.id; | |
| 1407 }); | |
| 1408 | |
| 1409 popoto.graph.node.svgNodeElements | |
| 1410 .selectAll(".ppt-svg-title") | |
| 1411 .text(function (d) { | |
| 1412 return popoto.provider.getTextValue(d); | |
| 1413 }); | |
| 1414 | |
| 1415 popoto.graph.node.svgNodeElements.filter(function (n) { | |
| 1416 return n.type !== popoto.graph.node.NodeTypes.ROOT | |
| 1417 }).call(popoto.graph.force.drag); | |
| 1418 | |
| 1419 popoto.graph.node.updateBackgroundElements(); | |
| 1420 popoto.graph.node.updateMiddlegroundElements(); | |
| 1421 popoto.graph.node.updateForegroundElements(); | |
| 1422 }; | |
| 1423 | |
| 1424 popoto.graph.node.updateBackgroundElements = function () { | |
| 1425 popoto.graph.node.svgNodeElements.selectAll(".ppt-g-node-background") | |
| 1426 .selectAll(".ppt-node-background-circle") | |
| 1427 .attr("class", function (d) { | |
| 1428 var cssClass = "ppt-node-background-circle"; | |
| 1429 | |
| 1430 if (d.type === popoto.graph.node.NodeTypes.VALUE) { | |
| 1431 cssClass = cssClass + " value"; | |
| 1432 } else if (d.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 1433 cssClass = cssClass + " group"; | |
| 1434 } else { | |
| 1435 if (d.value !== undefined) { | |
| 1436 if (d.type === popoto.graph.node.NodeTypes.ROOT) { | |
| 1437 cssClass = cssClass + " selected-root-value"; | |
| 1438 } else if (d.type === popoto.graph.node.NodeTypes.CHOOSE) { | |
| 1439 cssClass = cssClass + " selected-value"; | |
| 1440 } | |
| 1441 } else { | |
| 1442 if (d.count == 0) { | |
| 1443 cssClass = cssClass + " disabled"; | |
| 1444 } else { | |
| 1445 if (d.type === popoto.graph.node.NodeTypes.ROOT) { | |
| 1446 cssClass = cssClass + " root"; | |
| 1447 } else if (d.type === popoto.graph.node.NodeTypes.CHOOSE) { | |
| 1448 cssClass = cssClass + " choose"; | |
| 1449 } | |
| 1450 } | |
| 1451 } | |
| 1452 } | |
| 1453 | |
| 1454 return cssClass; | |
| 1455 }) | |
| 1456 .attr("r", popoto.graph.node.BACK_CIRCLE_R); | |
| 1457 }; | |
| 1458 | |
| 1459 /** | |
| 1460 * Update the middle layer of nodes. | |
| 1461 * TODO refactor node generation to allow future extensions (for example add plugin with new node types...) | |
| 1462 */ | |
| 1463 popoto.graph.node.updateMiddlegroundElements = function () { | |
| 1464 | |
| 1465 var middleG = popoto.graph.node.svgNodeElements.selectAll(".ppt-g-node-middleground"); | |
| 1466 | |
| 1467 // Clear all content in case node type has changed | |
| 1468 middleG.selectAll("*").remove(); | |
| 1469 | |
| 1470 //------------------------------- | |
| 1471 // Update IMAGE nodes | |
| 1472 var imageMiddle = middleG.filter(function (d) { | |
| 1473 return popoto.provider.getNodeDisplayType(d) === popoto.provider.NodeDisplayTypes.IMAGE; | |
| 1474 }).append("image").attr("class", "ppt-node-image"); | |
| 1475 | |
| 1476 imageMiddle | |
| 1477 .attr("width", function (d) { | |
| 1478 return popoto.provider.getImageWidth(d); | |
| 1479 }) | |
| 1480 .attr("height", function (d) { | |
| 1481 return popoto.provider.getImageHeight(d); | |
| 1482 }) | |
| 1483 // Center the image on node | |
| 1484 .attr("transform", function (d) { | |
| 1485 return "translate(" + (-popoto.provider.getImageWidth(d) / 2) + "," + (-popoto.provider.getImageHeight(d) / 2) + ")"; | |
| 1486 }) | |
| 1487 .attr("xlink:href", function (d) { | |
| 1488 return popoto.provider.getImagePath(d); | |
| 1489 }); | |
| 1490 | |
| 1491 //------------------------- | |
| 1492 // Update TEXT nodes | |
| 1493 var ellipseMiddle = middleG.filter(function (d) { | |
| 1494 return popoto.provider.getNodeDisplayType(d) === popoto.provider.NodeDisplayTypes.TEXT; | |
| 1495 }).append("ellipse").attr("rx", popoto.graph.node.ELLIPSE_RX).attr("ry", popoto.graph.node.ELLIPSE_RY); | |
| 1496 | |
| 1497 // Set class according to node type | |
| 1498 ellipseMiddle | |
| 1499 .attr("rx", popoto.graph.node.ELLIPSE_RX) | |
| 1500 .attr("ry", popoto.graph.node.ELLIPSE_RY) | |
| 1501 .attr("class", function (d) { | |
| 1502 if (d.type === popoto.graph.node.NodeTypes.ROOT) { | |
| 1503 if (d.value) { | |
| 1504 return "ppt-node-ellipse selected-root-value" | |
| 1505 } else { | |
| 1506 if (d.count == 0) { | |
| 1507 return "ppt-node-ellipse root disabled"; | |
| 1508 } else { | |
| 1509 return "ppt-node-ellipse root"; | |
| 1510 } | |
| 1511 } | |
| 1512 } else if (d.type === popoto.graph.node.NodeTypes.CHOOSE) { | |
| 1513 if (d.value) { | |
| 1514 return "ppt-node-ellipse selected-value" | |
| 1515 } else { | |
| 1516 if (d.count == 0) { | |
| 1517 return "ppt-node-ellipse choose disabled"; | |
| 1518 } else { | |
| 1519 return "ppt-node-ellipse choose"; | |
| 1520 } | |
| 1521 } | |
| 1522 } else if (d.type === popoto.graph.node.NodeTypes.VALUE) { | |
| 1523 return "ppt-node-ellipse value"; | |
| 1524 } else if (d.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 1525 return "ppt-node-ellipse group"; | |
| 1526 } | |
| 1527 }); | |
| 1528 | |
| 1529 //------------------------- | |
| 1530 // Update SVG nodes | |
| 1531 var svgMiddle = middleG.filter(function (d) { | |
| 1532 return popoto.provider.getNodeDisplayType(d) === popoto.provider.NodeDisplayTypes.SVG; | |
| 1533 }).append("g") | |
| 1534 // Add D3.js nested data with all paths required to render the svg element. | |
| 1535 .selectAll("path").data(function (d) { | |
| 1536 return popoto.provider.getSVGPaths(d); | |
| 1537 }); | |
| 1538 | |
| 1539 // Update nested data elements | |
| 1540 svgMiddle.exit().remove(); | |
| 1541 | |
| 1542 svgMiddle.enter().append("path"); | |
| 1543 | |
| 1544 middleG | |
| 1545 .selectAll("path") | |
| 1546 .attr("d", function (d) { | |
| 1547 return d.d; | |
| 1548 }) | |
| 1549 .attr("class", function (d) { | |
| 1550 return d["class"]; | |
| 1551 }); | |
| 1552 | |
| 1553 // Update text | |
| 1554 var textMiddle = middleG.filter(function (d) { | |
| 1555 return popoto.provider.isTextDisplayed(d); | |
| 1556 }).append('text') | |
| 1557 .attr('x', 0) | |
| 1558 .attr('y', popoto.graph.node.TEXT_Y) | |
| 1559 .attr('text-anchor', 'middle'); | |
| 1560 textMiddle | |
| 1561 .attr('y', popoto.graph.node.TEXT_Y) | |
| 1562 .attr("class", function (d) { | |
| 1563 switch (d.type) { | |
| 1564 case popoto.graph.node.NodeTypes.CHOOSE: | |
| 1565 if (d.value === undefined) { | |
| 1566 if (d.count == 0) { | |
| 1567 return "ppt-node-text-choose disabled"; | |
| 1568 } else { | |
| 1569 return "ppt-node-text-choose"; | |
| 1570 } | |
| 1571 } else { | |
| 1572 return "ppt-node-text-choose selected-value"; | |
| 1573 } | |
| 1574 case popoto.graph.node.NodeTypes.GROUP: | |
| 1575 return "ppt-node-text-group"; | |
| 1576 case popoto.graph.node.NodeTypes.ROOT: | |
| 1577 if (d.value === undefined) { | |
| 1578 if (d.count == 0) { | |
| 1579 return "ppt-node-text-root disabled"; | |
| 1580 } else { | |
| 1581 return "ppt-node-text-root"; | |
| 1582 } | |
| 1583 } else { | |
| 1584 return "ppt-node-text-root selected-value"; | |
| 1585 } | |
| 1586 case popoto.graph.node.NodeTypes.VALUE: | |
| 1587 return "ppt-node-text-value"; | |
| 1588 } | |
| 1589 }) | |
| 1590 .text(function (d) { | |
| 1591 if (popoto.provider.isTextDisplayed(d)) { | |
| 1592 return popoto.provider.getTextValue(d); | |
| 1593 } else { | |
| 1594 return ""; | |
| 1595 } | |
| 1596 }); | |
| 1597 }; | |
| 1598 | |
| 1599 /** | |
| 1600 * Updates the foreground elements | |
| 1601 */ | |
| 1602 popoto.graph.node.updateForegroundElements = function () { | |
| 1603 | |
| 1604 // Updates browse arrows status | |
| 1605 var gArrows = popoto.graph.node.svgNodeElements.selectAll(".ppt-g-node-foreground") | |
| 1606 .selectAll(".ppt-node-foreground-g-arrows"); | |
| 1607 gArrows.classed("active", function (d) { | |
| 1608 return d.valueExpanded && d.data && d.data.length > popoto.graph.node.PAGE_SIZE; | |
| 1609 }); | |
| 1610 | |
| 1611 gArrows.selectAll(".ppt-larrow").classed("enabled", function (d) { | |
| 1612 return d.page > 1; | |
| 1613 }); | |
| 1614 | |
| 1615 gArrows.selectAll(".ppt-rarrow").classed("enabled", function (d) { | |
| 1616 if (d.data) { | |
| 1617 var count = d.data.length; | |
| 1618 return d.page * popoto.graph.node.PAGE_SIZE < count; | |
| 1619 } else { | |
| 1620 return false; | |
| 1621 } | |
| 1622 }); | |
| 1623 | |
| 1624 // Update count box class depending on node type | |
| 1625 var gForegrounds = popoto.graph.node.svgNodeElements.selectAll(".ppt-g-node-foreground"); | |
| 1626 | |
| 1627 gForegrounds.selectAll(".ppt-count-box").filter(function (d) { | |
| 1628 return d.type !== popoto.graph.node.NodeTypes.CHOOSE; | |
| 1629 }).classed("root", true); | |
| 1630 | |
| 1631 gForegrounds.selectAll(".ppt-count-box").filter(function (d) { | |
| 1632 return d.type === popoto.graph.node.NodeTypes.CHOOSE; | |
| 1633 }).classed("value", true); | |
| 1634 | |
| 1635 gForegrounds.selectAll(".ppt-count-box").classed("disabled", function (d) { | |
| 1636 return d.count == 0; | |
| 1637 }); | |
| 1638 | |
| 1639 gForegrounds.selectAll(".ppt-count-text") | |
| 1640 .text(function (d) { | |
| 1641 if (d.count != null) { | |
| 1642 return d.count; | |
| 1643 } else { | |
| 1644 return "..."; | |
| 1645 } | |
| 1646 }) | |
| 1647 .classed("disabled", function (d) { | |
| 1648 return d.count == 0; | |
| 1649 }); | |
| 1650 | |
| 1651 // Hide/Show plus icon (set disabled CSS class) if node already has been expanded. | |
| 1652 gForegrounds.selectAll(".ppt-rel-plus-icon") | |
| 1653 .classed("disabled", function (d) { | |
| 1654 return d.linkExpanded || d.count == 0 || d.linkCount == 0; | |
| 1655 }); | |
| 1656 | |
| 1657 gForegrounds.selectAll(".ppt-rel-minus-icon") | |
| 1658 .classed("disabled", function (d) { | |
| 1659 return (!d.linkExpanded) || d.count == 0 || d.linkCount == 0; | |
| 1660 }); | |
| 1661 | |
| 1662 }; | |
| 1663 | |
| 1664 /** | |
| 1665 * Handle the mouse over event on nodes. | |
| 1666 */ | |
| 1667 popoto.graph.node.mouseOverNode = function () { | |
| 1668 d3.event.preventDefault(); | |
| 1669 | |
| 1670 // TODO don't work on IE (nodes unstable) find another way to move node in foreground on mouse over? | |
| 1671 // d3.select(this).moveToFront(); | |
| 1672 | |
| 1673 d3.select(this).select(".ppt-g-node-background").selectAll("circle").transition().style("fill-opacity", 0.5); | |
| 1674 | |
| 1675 if (popoto.queryviewer.isActive) { | |
| 1676 // Get the hovered node data | |
| 1677 var hoveredNode = d3.select(this).data()[0]; | |
| 1678 | |
| 1679 // Hover the node in query | |
| 1680 popoto.queryviewer.queryConstraintSpanElements.filter(function (d) { | |
| 1681 return d.ref === hoveredNode; | |
| 1682 }).classed("hover", true); | |
| 1683 popoto.queryviewer.querySpanElements.filter(function (d) { | |
| 1684 return d.ref === hoveredNode; | |
| 1685 }).classed("hover", true); | |
| 1686 } | |
| 1687 }; | |
| 1688 | |
| 1689 /** | |
| 1690 * Handle mouse out event on nodes. | |
| 1691 */ | |
| 1692 popoto.graph.node.mouseOutNode = function () { | |
| 1693 d3.event.preventDefault(); | |
| 1694 | |
| 1695 d3.select(this).select(".ppt-g-node-background").selectAll("circle").transition().style("fill-opacity", 0); | |
| 1696 | |
| 1697 if (popoto.queryviewer.isActive) { | |
| 1698 // Get the hovered node data | |
| 1699 var hoveredNode = d3.select(this).data()[0]; | |
| 1700 | |
| 1701 // Remove hover class on node. | |
| 1702 popoto.queryviewer.queryConstraintSpanElements.filter(function (d) { | |
| 1703 return d.ref === hoveredNode; | |
| 1704 }).classed("hover", false); | |
| 1705 popoto.queryviewer.querySpanElements.filter(function (d) { | |
| 1706 return d.ref === hoveredNode; | |
| 1707 }).classed("hover", false); | |
| 1708 } | |
| 1709 }; | |
| 1710 | |
| 1711 /** | |
| 1712 * Handle the click event on nodes. | |
| 1713 */ | |
| 1714 popoto.graph.node.nodeClick = function () { | |
| 1715 var clickedNode = d3.select(this).data()[0]; // Clicked node data | |
| 1716 popoto.logger.debug("nodeClick (" + clickedNode.label + ")"); | |
| 1717 | |
| 1718 if (clickedNode.type === popoto.graph.node.NodeTypes.VALUE) { | |
| 1719 popoto.graph.node.valueNodeClick(clickedNode); | |
| 1720 } else if (clickedNode.type === popoto.graph.node.NodeTypes.CHOOSE || clickedNode.type === popoto.graph.node.NodeTypes.ROOT) { | |
| 1721 if (clickedNode.valueExpanded) { | |
| 1722 popoto.graph.node.collapseNode(clickedNode); | |
| 1723 } else { | |
| 1724 popoto.graph.node.chooseNodeClick(clickedNode); | |
| 1725 } | |
| 1726 } | |
| 1727 }; | |
| 1728 | |
| 1729 /** | |
| 1730 * Remove all the value node directly linked to clicked node. | |
| 1731 * | |
| 1732 * @param clickedNode | |
| 1733 */ | |
| 1734 popoto.graph.node.collapseNode = function (clickedNode) { | |
| 1735 if (clickedNode.valueExpanded) { // node is collapsed only if it has been expanded first | |
| 1736 popoto.logger.debug("collapseNode (" + clickedNode.label + ")"); | |
| 1737 | |
| 1738 var linksToRemove = popoto.graph.force.links().filter(function (l) { | |
| 1739 return l.source === clickedNode && l.type === popoto.graph.link.LinkTypes.VALUE; | |
| 1740 }); | |
| 1741 | |
| 1742 // Remove children nodes from model | |
| 1743 linksToRemove.forEach(function (l) { | |
| 1744 popoto.graph.force.nodes().splice(popoto.graph.force.nodes().indexOf(l.target), 1); | |
| 1745 }); | |
| 1746 | |
| 1747 // Remove links from model | |
| 1748 for (var i = popoto.graph.force.links().length - 1; i >= 0; i--) { | |
| 1749 if (linksToRemove.indexOf(popoto.graph.force.links()[i]) >= 0) { | |
| 1750 popoto.graph.force.links().splice(i, 1); | |
| 1751 } | |
| 1752 } | |
| 1753 | |
| 1754 // Node has been fixed when expanded so we unfix it back here. | |
| 1755 if (clickedNode.type !== popoto.graph.node.NodeTypes.ROOT) { | |
| 1756 clickedNode.fixed = false; | |
| 1757 } | |
| 1758 | |
| 1759 // Parent node too if not root | |
| 1760 if (clickedNode.parent && clickedNode.parent.type !== popoto.graph.node.NodeTypes.ROOT) { | |
| 1761 clickedNode.parent.fixed = false; | |
| 1762 } | |
| 1763 | |
| 1764 clickedNode.valueExpanded = false; | |
| 1765 popoto.update(); | |
| 1766 | |
| 1767 } else { | |
| 1768 popoto.logger.debug("collapseNode called on an unexpanded node"); | |
| 1769 } | |
| 1770 }; | |
| 1771 | |
| 1772 /** | |
| 1773 * Function called on a value node click. | |
| 1774 * In this case the value is added in the parent node and all the value nodes are collapsed. | |
| 1775 * | |
| 1776 * @param clickedNode | |
| 1777 */ | |
| 1778 popoto.graph.node.valueNodeClick = function (clickedNode) { | |
| 1779 popoto.logger.debug("valueNodeClick (" + clickedNode.label + ")"); | |
| 1780 clickedNode.parent.value = clickedNode; | |
| 1781 popoto.result.hasChanged = true; | |
| 1782 popoto.graph.hasGraphChanged = true; | |
| 1783 | |
| 1784 popoto.graph.node.collapseNode(clickedNode.parent); | |
| 1785 }; | |
| 1786 | |
| 1787 /** | |
| 1788 * Function called on choose node click. | |
| 1789 * In this case a query is executed to get all the possible value | |
| 1790 * @param clickedNode | |
| 1791 * TODO optimize with cached data? | |
| 1792 */ | |
| 1793 popoto.graph.node.chooseNodeClick = function (clickedNode) { | |
| 1794 popoto.logger.debug("chooseNodeClick (" + clickedNode.label + ") with waiting state set to " + popoto.graph.node.chooseWaiting); | |
| 1795 if (!popoto.graph.node.chooseWaiting && !clickedNode.immutable) { | |
| 1796 | |
| 1797 // Collapse all expanded nodes first | |
| 1798 popoto.graph.force.nodes().forEach(function (n) { | |
| 1799 if ((n.type == popoto.graph.node.NodeTypes.ROOT || n.type == popoto.graph.node.NodeTypes.CHOOSE) && n.valueExpanded) { | |
| 1800 popoto.graph.node.collapseNode(n); | |
| 1801 } | |
| 1802 }); | |
| 1803 | |
| 1804 // Set waiting state to true to avoid multiple call on slow query execution | |
| 1805 popoto.graph.node.chooseWaiting = true; | |
| 1806 | |
| 1807 popoto.logger.info("Values (" + clickedNode.label + ") ==> "); | |
| 1808 popoto.rest.post( | |
| 1809 { | |
| 1810 "statements": [ | |
| 1811 { | |
| 1812 "statement": popoto.query.generateValueQuery(clickedNode) | |
| 1813 }] | |
| 1814 }) | |
| 1815 .done(function (data) { | |
| 1816 clickedNode.id = (++popoto.graph.node.idgen); | |
| 1817 clickedNode.data = popoto.graph.node.parseResultData(data); | |
| 1818 clickedNode.page = 1; | |
| 1819 popoto.graph.node.expandNode(clickedNode); | |
| 1820 popoto.graph.node.chooseWaiting = false; | |
| 1821 }) | |
| 1822 .fail(function (xhr, textStatus, errorThrown) { | |
| 1823 popoto.graph.node.chooseWaiting = false; | |
| 1824 popoto.logger.error(textStatus + ": error while accessing Neo4j server on URL:\"" + popoto.rest.CYPHER_URL + "\" defined in \"popoto.rest.CYPHER_URL\" property: " + errorThrown); | |
| 1825 }); | |
| 1826 } | |
| 1827 }; | |
| 1828 | |
| 1829 /** | |
| 1830 * Parse query execution result and generate an array of object. | |
| 1831 * These objects contains of a list of properties made of result attributes with their value. | |
| 1832 * | |
| 1833 * @param data query execution raw data | |
| 1834 * @returns {Array} array of structured object with result attributes. | |
| 1835 */ | |
| 1836 popoto.graph.node.parseResultData = function (data) { | |
| 1837 var results = []; | |
| 1838 | |
| 1839 for (var x = 0; x < data.results[0].data.length; x++) { | |
| 1840 var obj = {}; | |
| 1841 | |
| 1842 for (var i = 0; i < data.results[0].columns.length; i++) { | |
| 1843 obj[data.results[0].columns[i]] = data.results[0].data[x].row[i]; | |
| 1844 } | |
| 1845 | |
| 1846 results.push(obj); | |
| 1847 } | |
| 1848 | |
| 1849 return results; | |
| 1850 }; | |
| 1851 | |
| 1852 /** | |
| 1853 * Compute the angle in radian between the node and its parent. | |
| 1854 * TODO: clean or add comments to explain the code... | |
| 1855 * | |
| 1856 * @param node node to compute angle. | |
| 1857 * @returns {number} angle in radian. | |
| 1858 */ | |
| 1859 popoto.graph.computeParentAngle = function (node) { | |
| 1860 var angleRadian = 0; | |
| 1861 var r = 100; | |
| 1862 if (node.parent) { | |
| 1863 var xp = node.parent.x; | |
| 1864 var yp = node.parent.y; | |
| 1865 var x0 = node.x; | |
| 1866 var y0 = node.y; | |
| 1867 var dist = Math.sqrt(Math.pow(xp - x0, 2) + Math.pow(yp - y0, 2)); | |
| 1868 | |
| 1869 var k = r / (dist - r); | |
| 1870 var xc = (x0 + (k * xp)) / (1 + k); | |
| 1871 | |
| 1872 var val = (xc - x0) / r; | |
| 1873 if (val < -1) { | |
| 1874 val = -1; | |
| 1875 } | |
| 1876 if (val > 1) { | |
| 1877 val = 1; | |
| 1878 } | |
| 1879 | |
| 1880 angleRadian = Math.acos(val); | |
| 1881 | |
| 1882 if (yp > y0) { | |
| 1883 angleRadian = 2 * Math.PI - angleRadian; | |
| 1884 } | |
| 1885 } | |
| 1886 return angleRadian; | |
| 1887 }; | |
| 1888 | |
| 1889 /** | |
| 1890 * Function called to expand a node containing values. | |
| 1891 * This function will create the value nodes with the clicked node internal data. | |
| 1892 * Only nodes corresponding to the current page index will be generated. | |
| 1893 * | |
| 1894 * @param clickedNode | |
| 1895 */ | |
| 1896 popoto.graph.node.expandNode = function (clickedNode) { | |
| 1897 | |
| 1898 // Get subset of node corresponding to the current node page and page size | |
| 1899 var lIndex = clickedNode.page * popoto.graph.node.PAGE_SIZE; | |
| 1900 var sIndex = lIndex - popoto.graph.node.PAGE_SIZE; | |
| 1901 | |
| 1902 var dataToAdd = clickedNode.data.slice(sIndex, lIndex); | |
| 1903 var parentAngle = popoto.graph.computeParentAngle(clickedNode); | |
| 1904 | |
| 1905 // Then each node are created and dispatched around the clicked node using computed coordinates. | |
| 1906 var i = 1; | |
| 1907 dataToAdd.forEach(function (d) { | |
| 1908 var angleDeg; | |
| 1909 if (clickedNode.parent) { | |
| 1910 angleDeg = (((360 / (dataToAdd.length + 1)) * i)); | |
| 1911 } else { | |
| 1912 angleDeg = (((360 / (dataToAdd.length)) * i)); | |
| 1913 } | |
| 1914 | |
| 1915 var nx = clickedNode.x + (100 * Math.cos((angleDeg * (Math.PI / 180)) - parentAngle)), | |
| 1916 ny = clickedNode.y + (100 * Math.sin((angleDeg * (Math.PI / 180)) - parentAngle)); | |
| 1917 | |
| 1918 var node = { | |
| 1919 "id": (++popoto.graph.node.idgen), | |
| 1920 "parent": clickedNode, | |
| 1921 "attributes": d, | |
| 1922 "type": popoto.graph.node.NodeTypes.VALUE, | |
| 1923 "label": clickedNode.label, | |
| 1924 "count": d.count, | |
| 1925 "x": nx, | |
| 1926 "y": ny, | |
| 1927 "internalID": d[popoto.query.NEO4J_INTERNAL_ID.queryInternalName] | |
| 1928 }; | |
| 1929 | |
| 1930 popoto.graph.force.nodes().push(node); | |
| 1931 | |
| 1932 popoto.graph.force.links().push( | |
| 1933 { | |
| 1934 id: "l" + (++popoto.graph.node.idgen), | |
| 1935 source: clickedNode, | |
| 1936 target: node, | |
| 1937 type: popoto.graph.link.LinkTypes.VALUE | |
| 1938 } | |
| 1939 ); | |
| 1940 | |
| 1941 i++; | |
| 1942 }); | |
| 1943 | |
| 1944 // Pin clicked node and its parent to avoid the graph to move for selection, only new value nodes will blossom around the clicked node. | |
| 1945 clickedNode.fixed = true; | |
| 1946 if (clickedNode.parent && clickedNode.parent.type !== popoto.graph.node.NodeTypes.ROOT) { | |
| 1947 clickedNode.parent.fixed = true; | |
| 1948 } | |
| 1949 // Change node state | |
| 1950 clickedNode.valueExpanded = true; | |
| 1951 popoto.update(); | |
| 1952 }; | |
| 1953 | |
| 1954 /** | |
| 1955 * Function called on a right click on a node. | |
| 1956 * | |
| 1957 * In this case all expanded nodes in the graph will first be closed then if no relation have been added yet a Cypher query is executed to get all the related nodes. | |
| 1958 * A first coordinate pre-computation is done to dispatch the new node correctly around the parent node and the nodes are added with a link in the model. | |
| 1959 * | |
| 1960 * If no relation are found or relation were already added the right click event is used to remove the node current selection. | |
| 1961 * | |
| 1962 */ | |
| 1963 popoto.graph.node.expandRelationship = function () { | |
| 1964 // Prevent default right click event opening menu. | |
| 1965 d3.event.preventDefault(); | |
| 1966 | |
| 1967 // Notify listeners | |
| 1968 popoto.graph.nodeExpandRelationsipListeners.forEach(function (listener) { | |
| 1969 listener(this); | |
| 1970 }); | |
| 1971 | |
| 1972 // Get clicked node. | |
| 1973 var clickedNode = d3.select(this).data()[0]; | |
| 1974 | |
| 1975 if (!clickedNode.linkExpanded && !popoto.graph.node.linkWaiting && !clickedNode.valueExpanded) { | |
| 1976 popoto.graph.node.linkWaiting = true; | |
| 1977 | |
| 1978 popoto.logger.info("Relations (" + clickedNode.label + ") ==> "); | |
| 1979 popoto.rest.post( | |
| 1980 { | |
| 1981 "statements": [ | |
| 1982 { | |
| 1983 "statement": popoto.query.generateLinkQuery(clickedNode) | |
| 1984 }] | |
| 1985 }) | |
| 1986 .done(function (data) { | |
| 1987 var parsedData = popoto.graph.node.parseResultData(data); | |
| 1988 | |
| 1989 parsedData = parsedData.filter(function (d) { | |
| 1990 return popoto.query.filterRelation(d); | |
| 1991 }); | |
| 1992 | |
| 1993 if (parsedData.length <= 0) { | |
| 1994 // Set linkExpanded to true to avoid a new query call on next right click | |
| 1995 clickedNode.linkExpanded = true; | |
| 1996 clickedNode.linkCount = 0; | |
| 1997 popoto.graph.hasGraphChanged = true; | |
| 1998 popoto.update(); | |
| 1999 } else { | |
| 2000 var parentAngle = popoto.graph.computeParentAngle(clickedNode); | |
| 2001 | |
| 2002 var i = 1; | |
| 2003 parsedData.forEach(function (d) { | |
| 2004 var angleDeg; | |
| 2005 if (parentAngle) { | |
| 2006 angleDeg = (((360 / (parsedData.length + 1)) * i)); | |
| 2007 } else { | |
| 2008 angleDeg = (((360 / (parsedData.length)) * i)); | |
| 2009 } | |
| 2010 | |
| 2011 var nx = clickedNode.x + (100 * Math.cos((angleDeg * (Math.PI / 180)) - parentAngle)), | |
| 2012 ny = clickedNode.y + (100 * Math.sin((angleDeg * (Math.PI / 180)) - parentAngle)); | |
| 2013 | |
| 2014 var isGroupNode = popoto.provider.getIsGroup(d); | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
2015 // filter multiple labels |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
2016 var nodeLabel = popoto.provider.getLabelFilter(d.label); |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
2017 |
| 0 | 2018 var node = { |
| 2019 "id": "" + (++popoto.graph.node.idgen), | |
| 2020 "parent": clickedNode, | |
| 2021 "type": (isGroupNode) ? popoto.graph.node.NodeTypes.GROUP : popoto.graph.node.NodeTypes.CHOOSE, | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
2022 "label": nodeLabel, |
| 0 | 2023 "fixed": false, |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
2024 "internalLabel": popoto.graph.node.generateInternalLabel(nodeLabel), |
| 0 | 2025 "x": nx, |
| 2026 "y": ny | |
| 2027 }; | |
| 2028 | |
| 2029 popoto.graph.force.nodes().push(node); | |
| 2030 | |
| 2031 popoto.graph.force.links().push( | |
| 2032 { | |
| 2033 id: "l" + (++popoto.graph.node.idgen), | |
| 2034 source: clickedNode, | |
| 2035 target: node, | |
| 2036 type: popoto.graph.link.LinkTypes.RELATION, | |
| 2037 label: d.relationship | |
| 2038 } | |
| 2039 ); | |
| 2040 | |
| 2041 i++; | |
| 2042 }); | |
| 2043 | |
| 2044 popoto.graph.hasGraphChanged = true; | |
| 2045 clickedNode.linkExpanded = true; | |
| 2046 clickedNode.linkCount = parsedData.length; | |
| 2047 popoto.update(); | |
| 2048 } | |
| 2049 popoto.graph.node.linkWaiting = false; | |
| 2050 }) | |
| 2051 .fail(function (xhr, textStatus, errorThrown) { | |
| 2052 popoto.logger.error(textStatus + ": error while accessing Neo4j server on URL:\"" + popoto.rest.CYPHER_URL + "\" defined in \"popoto.rest.CYPHER_URL\" property: " + errorThrown); | |
| 2053 popoto.graph.node.linkWaiting = false; | |
| 2054 }); | |
| 2055 } | |
| 2056 }; | |
| 2057 | |
| 2058 /** | |
| 2059 * Remove all relationships from context node (including children). | |
| 2060 */ | |
| 2061 popoto.graph.node.collapseRelationship = function () { | |
| 2062 d3.event.preventDefault(); | |
| 2063 | |
| 2064 // Get clicked node. | |
| 2065 var clickedNode = d3.select(this).data()[0]; | |
| 2066 | |
| 2067 if (clickedNode.linkExpanded && clickedNode.linkCount > 0 && !popoto.graph.node.linkWaiting && !clickedNode.valueExpanded) { | |
| 2068 | |
| 2069 // Collapse all expanded choose nodes first to avoid having invalid displayed value node if collapsed relation contains a value. | |
| 2070 popoto.graph.force.nodes().forEach(function (n) { | |
| 2071 if ((n.type === popoto.graph.node.NodeTypes.CHOOSE || n.type === popoto.graph.node.NodeTypes.ROOT) && n.valueExpanded) { | |
| 2072 popoto.graph.node.collapseNode(n); | |
| 2073 } | |
| 2074 }); | |
| 2075 | |
| 2076 var linksToRemove = popoto.graph.force.links().filter(function (l) { | |
| 2077 return l.source === clickedNode && l.type === popoto.graph.link.LinkTypes.RELATION; | |
| 2078 }); | |
| 2079 | |
| 2080 // Remove children nodes from model | |
| 2081 linksToRemove.forEach(function (l) { | |
| 2082 popoto.graph.node.removeNode(l.target); | |
| 2083 }); | |
| 2084 | |
| 2085 // Remove links from model | |
| 2086 for (var i = popoto.graph.force.links().length - 1; i >= 0; i--) { | |
| 2087 if (linksToRemove.indexOf(popoto.graph.force.links()[i]) >= 0) { | |
| 2088 popoto.graph.force.links().splice(i, 1); | |
| 2089 } | |
| 2090 } | |
| 2091 | |
| 2092 clickedNode.linkExpanded = false; | |
| 2093 popoto.result.hasChanged = true; | |
| 2094 popoto.graph.hasGraphChanged = true; | |
| 2095 popoto.update(); | |
| 2096 } | |
| 2097 }; | |
| 2098 | |
| 2099 /** | |
| 2100 * Remove a node and its relationships (recursively) from the graph. | |
| 2101 * | |
| 2102 * @param node the node to remove. | |
| 2103 */ | |
| 2104 popoto.graph.node.removeNode = function (node) { | |
| 2105 | |
| 2106 var linksToRemove = popoto.graph.force.links().filter(function (l) { | |
| 2107 return l.source === node; | |
| 2108 }); | |
| 2109 | |
| 2110 // Remove children nodes from model | |
| 2111 linksToRemove.forEach(function (l) { | |
| 2112 popoto.graph.node.removeNode(l.target); | |
| 2113 }); | |
| 2114 | |
| 2115 // Remove links from model | |
| 2116 for (var i = popoto.graph.force.links().length - 1; i >= 0; i--) { | |
| 2117 if (linksToRemove.indexOf(popoto.graph.force.links()[i]) >= 0) { | |
| 2118 popoto.graph.force.links().splice(i, 1); | |
| 2119 } | |
| 2120 } | |
| 2121 | |
| 2122 popoto.graph.force.nodes().splice(popoto.graph.force.nodes().indexOf(node), 1); | |
| 2123 | |
| 2124 }; | |
| 2125 | |
| 2126 /** | |
| 2127 * Function to add on node event to clear the selection. | |
| 2128 * Call to this function on a node will remove the selected value and triger a graph update. | |
| 2129 */ | |
| 2130 popoto.graph.node.clearSelection = function () { | |
| 2131 // Prevent default event like right click opening menu. | |
| 2132 d3.event.preventDefault(); | |
| 2133 | |
| 2134 // Get clicked node. | |
| 2135 var clickedNode = d3.select(this).data()[0]; | |
| 2136 | |
| 2137 // Collapse all expanded choose nodes first | |
| 2138 popoto.graph.force.nodes().forEach(function (n) { | |
| 2139 if ((n.type === popoto.graph.node.NodeTypes.CHOOSE || n.type === popoto.graph.node.NodeTypes.ROOT) && n.valueExpanded) { | |
| 2140 popoto.graph.node.collapseNode(n); | |
| 2141 } | |
| 2142 }); | |
| 2143 | |
| 2144 if (clickedNode.value != null && !clickedNode.immutable) { | |
| 2145 // Remove selected value of choose node | |
| 2146 delete clickedNode.value; | |
| 2147 | |
| 2148 popoto.result.hasChanged = true; | |
| 2149 popoto.graph.hasGraphChanged = true; | |
| 2150 popoto.update(); | |
| 2151 } | |
| 2152 }; | |
| 2153 | |
| 2154 // QUERY VIEWER ----------------------------------------------------------------------------------------------------- | |
| 2155 popoto.queryviewer = {}; | |
| 2156 popoto.queryviewer.containerId = "popoto-query"; | |
| 2157 popoto.queryviewer.QUERY_STARTER = "I'm looking for"; | |
| 2158 popoto.queryviewer.CHOOSE_LABEL = "choose"; | |
| 2159 | |
| 2160 /** | |
| 2161 * Create the query viewer area. | |
| 2162 * | |
| 2163 */ | |
| 2164 popoto.queryviewer.createQueryArea = function () { | |
| 2165 var id = "#" + popoto.queryviewer.containerId; | |
| 2166 | |
| 2167 popoto.queryviewer.queryConstraintSpanElements = d3.select(id).append("p").attr("class", "ppt-query-constraint-elements").selectAll(".queryConstraintSpan"); | |
| 2168 popoto.queryviewer.querySpanElements = d3.select(id).append("p").attr("class", "ppt-query-elements").selectAll(".querySpan"); | |
| 2169 }; | |
| 2170 | |
| 2171 /** | |
| 2172 * Update all the elements displayed on the query viewer based on current graph. | |
| 2173 */ | |
| 2174 popoto.queryviewer.updateQuery = function () { | |
| 2175 | |
| 2176 // Remove all query span elements | |
| 2177 popoto.queryviewer.queryConstraintSpanElements = popoto.queryviewer.queryConstraintSpanElements.data([]); | |
| 2178 popoto.queryviewer.querySpanElements = popoto.queryviewer.querySpanElements.data([]); | |
| 2179 | |
| 2180 popoto.queryviewer.queryConstraintSpanElements.exit().remove(); | |
| 2181 popoto.queryviewer.querySpanElements.exit().remove(); | |
| 2182 | |
| 2183 // Update data | |
| 2184 popoto.queryviewer.queryConstraintSpanElements = popoto.queryviewer.queryConstraintSpanElements.data(popoto.queryviewer.generateConstraintData(popoto.graph.force.links(), popoto.graph.force.nodes())); | |
| 2185 popoto.queryviewer.querySpanElements = popoto.queryviewer.querySpanElements.data(popoto.queryviewer.generateData(popoto.graph.force.links(), popoto.graph.force.nodes())); | |
| 2186 | |
| 2187 // Remove old span (not needed as all have been cleaned before) | |
| 2188 // popoto.queryviewer.querySpanElements.exit().remove(); | |
| 2189 | |
| 2190 // Add new span | |
| 2191 popoto.queryviewer.queryConstraintSpanElements.enter().append("span") | |
| 2192 .on("contextmenu", popoto.queryviewer.rightClickSpan) | |
| 2193 .on("click", popoto.queryviewer.clickSpan) | |
| 2194 .on("mouseover", popoto.queryviewer.mouseOverSpan) | |
| 2195 .on("mouseout", popoto.queryviewer.mouseOutSpan); | |
| 2196 | |
| 2197 popoto.queryviewer.querySpanElements.enter().append("span") | |
| 2198 .on("contextmenu", popoto.queryviewer.rightClickSpan) | |
| 2199 .on("click", popoto.queryviewer.clickSpan) | |
| 2200 .on("mouseover", popoto.queryviewer.mouseOverSpan) | |
| 2201 .on("mouseout", popoto.queryviewer.mouseOutSpan); | |
| 2202 | |
| 2203 // Update all span | |
| 2204 popoto.queryviewer.queryConstraintSpanElements | |
| 2205 .attr("id", function (d) { | |
| 2206 return d.id | |
| 2207 }) | |
| 2208 .attr("class", function (d) { | |
| 2209 if (d.isLink) { | |
| 2210 return "ppt-span-link"; | |
| 2211 } else { | |
| 2212 if (d.type === popoto.graph.node.NodeTypes.ROOT) { | |
| 2213 return "ppt-span-root"; | |
| 2214 } else if (d.type === popoto.graph.node.NodeTypes.CHOOSE) { | |
| 2215 if (d.ref.value) { | |
| 2216 return "ppt-span-value"; | |
| 2217 } else { | |
| 2218 return "ppt-span-choose"; | |
| 2219 } | |
| 2220 } else if (d.type === popoto.graph.node.NodeTypes.VALUE) { | |
| 2221 return "ppt-span-value"; | |
| 2222 } else if (d.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 2223 return "ppt-span-group"; | |
| 2224 } else { | |
| 2225 return "ppt-span"; | |
| 2226 } | |
| 2227 } | |
| 2228 }) | |
| 2229 .text(function (d) { | |
| 2230 return d.term + " "; | |
| 2231 }); | |
| 2232 | |
| 2233 popoto.queryviewer.querySpanElements | |
| 2234 .attr("id", function (d) { | |
| 2235 return d.id | |
| 2236 }) | |
| 2237 .attr("class", function (d) { | |
| 2238 if (d.isLink) { | |
| 2239 return "ppt-span-link"; | |
| 2240 } else { | |
| 2241 if (d.type === popoto.graph.node.NodeTypes.ROOT) { | |
| 2242 return "ppt-span-root"; | |
| 2243 } else if (d.type === popoto.graph.node.NodeTypes.CHOOSE) { | |
| 2244 if (d.ref.value) { | |
| 2245 return "ppt-span-value"; | |
| 2246 } else { | |
| 2247 return "ppt-span-choose"; | |
| 2248 } | |
| 2249 } else if (d.type === popoto.graph.node.NodeTypes.VALUE) { | |
| 2250 return "ppt-span-value"; | |
| 2251 } else if (d.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 2252 return "ppt-span-group"; | |
| 2253 } else { | |
| 2254 return "ppt-span"; | |
| 2255 } | |
| 2256 } | |
| 2257 }) | |
| 2258 .text(function (d) { | |
| 2259 return d.term + " "; | |
| 2260 }); | |
| 2261 }; | |
| 2262 | |
| 2263 popoto.queryviewer.generateConstraintData = function (links, nodes) { | |
| 2264 var elmts = [], id = 0; | |
| 2265 | |
| 2266 // Add | |
| 2267 elmts.push( | |
| 2268 {id: id++, term: popoto.queryviewer.QUERY_STARTER} | |
| 2269 ); | |
| 2270 | |
| 2271 // Add the root node as query term | |
| 2272 if (nodes.length > 0) { | |
| 2273 elmts.push( | |
| 2274 {id: id++, type: nodes[0].type, term: popoto.provider.getSemanticValue(nodes[0]), ref: nodes[0]} | |
| 2275 ); | |
| 2276 } | |
| 2277 | |
| 2278 // Add a span for each link and its target node | |
| 2279 links.forEach(function (l) { | |
| 2280 | |
| 2281 var sourceNode = l.source; | |
| 2282 var targetNode = l.target; | |
| 2283 if (l.type === popoto.graph.link.LinkTypes.RELATION && targetNode.type !== popoto.graph.node.NodeTypes.GROUP && targetNode.value) { | |
| 2284 if (sourceNode.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 2285 elmts.push( | |
| 2286 {id: id++, type: sourceNode.type, term: popoto.provider.getSemanticValue(sourceNode), ref: sourceNode} | |
| 2287 ); | |
| 2288 } | |
| 2289 | |
| 2290 elmts.push({id: id++, isLink: true, term: popoto.provider.getLinkSemanticValue(l), ref: l}); | |
| 2291 | |
| 2292 if (targetNode.type !== popoto.graph.node.NodeTypes.GROUP) { | |
| 2293 if (targetNode.value) { | |
| 2294 elmts.push( | |
| 2295 {id: id++, type: targetNode.type, term: popoto.provider.getSemanticValue(targetNode), ref: targetNode} | |
| 2296 ); | |
| 2297 } else { | |
| 2298 elmts.push( | |
| 2299 {id: id++, type: targetNode.type, term: "<" + popoto.queryviewer.CHOOSE_LABEL + " " + popoto.provider.getSemanticValue(targetNode) + ">", ref: targetNode} | |
| 2300 ); | |
| 2301 } | |
| 2302 } | |
| 2303 } | |
| 2304 }); | |
| 2305 | |
| 2306 return elmts; | |
| 2307 }; | |
| 2308 | |
| 2309 // TODO add option nodes in generated query when no value is available | |
| 2310 popoto.queryviewer.generateData = function (links, nodes) { | |
| 2311 var elmts = [], options = [], id = 0; | |
| 2312 | |
| 2313 // Add a span for each link and its target node | |
| 2314 links.forEach(function (l) { | |
| 2315 | |
| 2316 var sourceNode = l.source; | |
| 2317 var targetNode = l.target; | |
| 2318 | |
| 2319 if (targetNode.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 2320 options.push( | |
| 2321 {id: id++, type: targetNode.type, term: popoto.provider.getSemanticValue(targetNode), ref: targetNode} | |
| 2322 ); | |
| 2323 } | |
| 2324 | |
| 2325 if (l.type === popoto.graph.link.LinkTypes.RELATION && targetNode.type !== popoto.graph.node.NodeTypes.GROUP && !targetNode.value) { | |
| 2326 if (sourceNode.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 2327 elmts.push( | |
| 2328 {id: id++, type: sourceNode.type, term: popoto.provider.getSemanticValue(sourceNode), ref: sourceNode} | |
| 2329 ); | |
| 2330 } | |
| 2331 | |
| 2332 elmts.push({id: id++, isLink: true, term: popoto.provider.getLinkSemanticValue(l), ref: l}); | |
| 2333 | |
| 2334 if (targetNode.type !== popoto.graph.node.NodeTypes.GROUP) { | |
| 2335 if (targetNode.value) { | |
| 2336 elmts.push( | |
| 2337 {id: id++, type: targetNode.type, term: popoto.provider.getSemanticValue(targetNode), ref: targetNode} | |
| 2338 ); | |
| 2339 } else { | |
| 2340 elmts.push( | |
| 2341 {id: id++, type: targetNode.type, term: "<" + popoto.queryviewer.CHOOSE_LABEL + " " + popoto.provider.getSemanticValue(targetNode) + ">", ref: targetNode} | |
| 2342 ); | |
| 2343 } | |
| 2344 } | |
| 2345 } | |
| 2346 }); | |
| 2347 | |
| 2348 return elmts.concat(options); | |
| 2349 }; | |
| 2350 | |
| 2351 /** | |
| 2352 * | |
| 2353 */ | |
| 2354 popoto.queryviewer.mouseOverSpan = function () { | |
| 2355 d3.select(this).classed("hover", function (d) { | |
| 2356 return d.ref; | |
| 2357 }); | |
| 2358 | |
| 2359 var hoveredSpan = d3.select(this).data()[0]; | |
| 2360 | |
| 2361 if (hoveredSpan.ref) { | |
| 2362 var linkElmt = popoto.graph.svg.selectAll("#" + popoto.graph.link.gID + " > g").filter(function (d) { | |
| 2363 return d === hoveredSpan.ref; | |
| 2364 }); | |
| 2365 linkElmt.select("path").classed("ppt-link-hover", true); | |
| 2366 linkElmt.select("text").classed("ppt-link-hover", true); | |
| 2367 | |
| 2368 var nodeElmt = popoto.graph.svg.selectAll("#" + popoto.graph.node.gID + " > g").filter(function (d) { | |
| 2369 return d === hoveredSpan.ref; | |
| 2370 }); | |
| 2371 | |
| 2372 nodeElmt.select(".ppt-g-node-background").selectAll("circle").transition().style("fill-opacity", 0.5); | |
| 2373 } | |
| 2374 }; | |
| 2375 | |
| 2376 popoto.queryviewer.rightClickSpan = function () { | |
| 2377 var hoveredSpan = d3.select(this).data()[0]; | |
| 2378 | |
| 2379 if (!hoveredSpan.isLink && hoveredSpan.ref) { | |
| 2380 var nodeElmt = popoto.graph.svg.selectAll("#" + popoto.graph.node.gID + " > g").filter(function (d) { | |
| 2381 return d === hoveredSpan.ref; | |
| 2382 }); | |
| 2383 | |
| 2384 nodeElmt.on("contextmenu").call(nodeElmt.node(), hoveredSpan.ref); | |
| 2385 } | |
| 2386 }; | |
| 2387 | |
| 2388 popoto.queryviewer.clickSpan = function () { | |
| 2389 var hoveredSpan = d3.select(this).data()[0]; | |
| 2390 | |
| 2391 if (!hoveredSpan.isLink && hoveredSpan.ref) { | |
| 2392 var nodeElmt = popoto.graph.svg.selectAll("#" + popoto.graph.node.gID + " > g").filter(function (d) { | |
| 2393 return d === hoveredSpan.ref; | |
| 2394 }); | |
| 2395 | |
| 2396 nodeElmt.on("click").call(nodeElmt.node(), hoveredSpan.ref); | |
| 2397 } | |
| 2398 }; | |
| 2399 | |
| 2400 /** | |
| 2401 * | |
| 2402 */ | |
| 2403 popoto.queryviewer.mouseOutSpan = function () { | |
| 2404 d3.select(this).classed("hover", false); | |
| 2405 | |
| 2406 var hoveredSpan = d3.select(this).data()[0]; | |
| 2407 | |
| 2408 if (hoveredSpan.ref) { | |
| 2409 var linkElmt = popoto.graph.svg.selectAll("#" + popoto.graph.link.gID + " > g").filter(function (d) { | |
| 2410 return d === hoveredSpan.ref; | |
| 2411 }); | |
| 2412 linkElmt.select("path").classed("ppt-link-hover", false); | |
| 2413 linkElmt.select("text").classed("ppt-link-hover", false); | |
| 2414 | |
| 2415 var nodeElmt = popoto.graph.svg.selectAll("#" + popoto.graph.node.gID + " > g").filter(function (d) { | |
| 2416 return d === hoveredSpan.ref; | |
| 2417 }); | |
| 2418 nodeElmt.select(".ppt-g-node-background").selectAll("circle").transition().style("fill-opacity", 0); | |
| 2419 } | |
| 2420 }; | |
| 2421 | |
| 2422 // CYPHER VIEWER ----------------------------------------------------------------------------------------------------- | |
| 2423 | |
| 2424 // TODO not available yet | |
| 2425 popoto.cypherviewer = {}; | |
| 2426 popoto.cypherviewer.containerId = "popoto-cypher"; | |
| 2427 | |
| 2428 // QUERY ------------------------------------------------------------------------------------------------------------ | |
| 2429 popoto.query = {}; | |
| 2430 /** | |
| 2431 * Define the number of results displayed in result list. | |
| 2432 */ | |
| 2433 popoto.query.RESULTS_PAGE_SIZE = 100; | |
| 2434 popoto.query.VALUE_QUERY_LIMIT = 1000; | |
| 2435 popoto.query.USE_PARENT_RELATION = false; | |
| 2436 popoto.query.USE_RELATION_DIRECTION = true; | |
| 2437 | |
| 2438 /** | |
| 2439 * Immutable constant object to identify Neo4j internal ID | |
| 2440 */ | |
| 2441 popoto.query.NEO4J_INTERNAL_ID = Object.freeze({queryInternalName: "NEO4JID"}); | |
| 2442 | |
| 2443 /** | |
| 2444 * Function used to filter returned relations | |
| 2445 * return false if the result should be filtered out. | |
| 2446 * | |
| 2447 * @param d relation returned object | |
| 2448 * @returns {boolean} | |
| 2449 */ | |
| 2450 popoto.query.filterRelation = function (d) { | |
| 2451 return true; | |
| 2452 }; | |
| 2453 | |
| 2454 /** | |
| 2455 * Generate the query to count nodes of a label. | |
| 2456 * If the label is defined as distinct in configuration the query will count only distinct values on constraint attribute. | |
| 2457 */ | |
| 2458 popoto.query.generateTaxonomyCountQuery = function (label) { | |
| 2459 var constraintAttr = popoto.provider.getConstraintAttribute(label); | |
| 2460 | |
| 2461 var whereElements = []; | |
| 2462 | |
| 2463 var predefinedConstraints = popoto.provider.getPredefinedConstraints(label); | |
| 2464 predefinedConstraints.forEach(function (predefinedConstraint) { | |
| 2465 whereElements.push(predefinedConstraint.replace(new RegExp("\\$identifier", 'g'), "n")); | |
| 2466 }); | |
| 2467 | |
| 2468 if (constraintAttr === popoto.query.NEO4J_INTERNAL_ID) { | |
| 2469 return "MATCH (n:`" + label + "`)" + ((whereElements.length > 0) ? " WHERE " + whereElements.join(" AND ") : "") + " RETURN count(DISTINCT ID(n)) as count" | |
| 2470 } else { | |
| 2471 return "MATCH (n:`" + label + "`)" + ((whereElements.length > 0) ? " WHERE " + whereElements.join(" AND ") : "") + " RETURN count(DISTINCT n." + constraintAttr + ") as count" | |
| 2472 } | |
| 2473 }; | |
| 2474 | |
| 2475 /** | |
| 2476 * Generate Cypher query match and where elements from root node, selected node and a set of the graph links. | |
| 2477 * | |
| 2478 * @param rootNode root node in the graph. | |
| 2479 * @param selectedNode graph target node. | |
| 2480 * @param links list of links subset of the graph. | |
| 2481 * @returns {{matchElements: Array, whereElements: Array}} list of match and where elements. | |
| 2482 * @param isConstraintNeeded | |
| 2483 */ | |
| 2484 popoto.query.generateQueryElements = function (rootNode, selectedNode, links, isConstraintNeeded) { | |
| 2485 var matchElements = []; | |
| 2486 var whereElements = []; | |
| 2487 var rel = popoto.query.USE_RELATION_DIRECTION ? "->" : "-"; | |
| 2488 | |
| 2489 var rootPredefinedConstraints = popoto.provider.getPredefinedConstraints(rootNode.label); | |
| 2490 | |
| 2491 rootPredefinedConstraints.forEach(function (predefinedConstraint) { | |
| 2492 whereElements.push(predefinedConstraint.replace(new RegExp("\\$identifier", 'g'), rootNode.internalLabel)); | |
| 2493 }); | |
| 2494 | |
| 2495 // Generate root node match element | |
| 2496 if (rootNode.value && (isConstraintNeeded || rootNode.immutable)) { | |
| 2497 var rootConstraintAttr = popoto.provider.getConstraintAttribute(rootNode.label); | |
| 2498 if (rootConstraintAttr === popoto.query.NEO4J_INTERNAL_ID) { | |
| 2499 matchElements.push("(" + rootNode.internalLabel + ":`" + rootNode.label + "`)"); | |
| 2500 whereElements.push("ID(" + rootNode.internalLabel + ") = " + rootNode.value.internalID); | |
| 2501 } else { | |
| 2502 var constraintValue = rootNode.value.attributes[rootConstraintAttr]; | |
| 2503 | |
| 2504 if (typeof constraintValue === "boolean" || typeof constraintValue === "number") { | |
| 2505 matchElements.push("(" + rootNode.internalLabel + ":`" + rootNode.label + "`{`" + rootConstraintAttr + "`:" + constraintValue + "})"); | |
| 2506 } else { | |
| 2507 matchElements.push("(" + rootNode.internalLabel + ":`" + rootNode.label + "`{`" + rootConstraintAttr + "`:\"" + constraintValue + "\"})"); | |
| 2508 } | |
| 2509 } | |
| 2510 } else { | |
| 2511 matchElements.push("(" + rootNode.internalLabel + ":`" + rootNode.label + "`)"); | |
| 2512 } | |
| 2513 | |
| 2514 // Generate match elements for each links | |
| 2515 links.forEach(function (l) { | |
| 2516 var sourceNode = l.source; | |
| 2517 var targetNode = l.target; | |
| 2518 | |
| 2519 var predefinedConstraints = popoto.provider.getPredefinedConstraints(targetNode.label); | |
| 2520 | |
| 2521 predefinedConstraints.forEach(function (predefinedConstraint) { | |
| 2522 whereElements.push(predefinedConstraint.replace(new RegExp("\\$identifier", 'g'), targetNode.internalLabel)); | |
| 2523 }); | |
| 2524 | |
| 2525 if (targetNode.value && targetNode !== selectedNode && (isConstraintNeeded || rootNode.immutable)) { | |
| 2526 var constraintAttr = popoto.provider.getConstraintAttribute(targetNode.label); | |
| 2527 var constraintValue = targetNode.value.attributes[constraintAttr]; | |
| 2528 if (constraintAttr === popoto.query.NEO4J_INTERNAL_ID) { | |
| 2529 matchElements.push("(" + sourceNode.internalLabel + ":`" + sourceNode.label + "`)-[:`" + l.label + "`]" + rel + "(" + targetNode.internalLabel + ":`" + targetNode.label + "`)"); | |
| 2530 whereElements.push("ID(" + targetNode.internalLabel + ") = " + targetNode.value.internalID); | |
| 2531 } else { | |
| 2532 if (typeof constraintValue === "boolean" || typeof constraintValue === "number") { | |
| 2533 matchElements.push("(" + sourceNode.internalLabel + ":`" + sourceNode.label + "`)-[:`" + l.label + "`]" + rel + "(" + targetNode.internalLabel + ":`" + targetNode.label + "`{`" + constraintAttr + "`:" + constraintValue + "})"); | |
| 2534 } else { | |
| 2535 matchElements.push("(" + sourceNode.internalLabel + ":`" + sourceNode.label + "`)-[:`" + l.label + "`]" + rel + "(" + targetNode.internalLabel + ":`" + targetNode.label + "`{`" + constraintAttr + "`:\"" + constraintValue + "\"})"); | |
| 2536 } | |
| 2537 } | |
| 2538 } else { | |
| 2539 matchElements.push("(" + sourceNode.internalLabel + ":`" + sourceNode.label + "`)-[:`" + l.label + "`]" + rel + "(" + targetNode.internalLabel + ":`" + targetNode.label + "`)"); | |
| 2540 } | |
| 2541 }); | |
| 2542 | |
| 2543 return {"matchElements": matchElements, "whereElements": whereElements}; | |
| 2544 }; | |
| 2545 | |
| 2546 /** | |
| 2547 * Filter links to get only paths from root to leaf containing a value or being the selectedNode. | |
| 2548 * All other paths in the graph containing no value are ignored. | |
| 2549 * | |
| 2550 * @param rootNode root node of the graph. | |
| 2551 * @param targetNode node in the graph target of the query. | |
| 2552 * @param initialLinks list of links repreasenting the graph to filter. | |
| 2553 * @returns {Array} list of relevant links. | |
| 2554 */ | |
| 2555 popoto.query.getRelevantLinks = function (rootNode, targetNode, initialLinks) { | |
| 2556 | |
| 2557 var links = initialLinks.slice(); | |
| 2558 var filteredLinks = []; | |
| 2559 var finalLinks = []; | |
| 2560 | |
| 2561 // Filter all links to keep only those containing a value or being the selected node. | |
| 2562 links.forEach(function (l) { | |
| 2563 if (l.target.value || l.target === targetNode) { | |
| 2564 filteredLinks.push(l); | |
| 2565 } | |
| 2566 }); | |
| 2567 | |
| 2568 // All the filtered links are removed from initial links list. | |
| 2569 filteredLinks.forEach(function (l) { | |
| 2570 links.splice(links.indexOf(l), 1); | |
| 2571 }); | |
| 2572 | |
| 2573 // Then all the intermediate links up to the root node are added to get only the relevant links. | |
| 2574 filteredLinks.forEach(function (fl) { | |
| 2575 var sourceNode = fl.source; | |
| 2576 var search = true; | |
| 2577 | |
| 2578 while (search) { | |
| 2579 var intermediateLink = null; | |
| 2580 links.forEach(function (l) { | |
| 2581 if (l.target === sourceNode) { | |
| 2582 intermediateLink = l; | |
| 2583 } | |
| 2584 }); | |
| 2585 | |
| 2586 if (intermediateLink === null) { // no intermediate links needed | |
| 2587 search = false | |
| 2588 } else { | |
| 2589 if (intermediateLink.source === rootNode) { | |
| 2590 finalLinks.push(intermediateLink); | |
| 2591 links.splice(links.indexOf(intermediateLink), 1); | |
| 2592 search = false; | |
| 2593 } else { | |
| 2594 finalLinks.push(intermediateLink); | |
| 2595 links.splice(links.indexOf(intermediateLink), 1); | |
| 2596 sourceNode = intermediateLink.source; | |
| 2597 } | |
| 2598 } | |
| 2599 } | |
| 2600 }); | |
| 2601 | |
| 2602 return filteredLinks.concat(finalLinks); | |
| 2603 }; | |
| 2604 | |
| 2605 /** | |
| 2606 * Get the list of link defining the complete path from node to root. | |
| 2607 * All other links are ignored. | |
| 2608 * | |
| 2609 * @param node The node where to start in the graph. | |
| 2610 * @param links | |
| 2611 */ | |
| 2612 popoto.query.getLinksToRoot = function (node, links) { | |
| 2613 var pathLinks = []; | |
| 2614 var targetNode = node; | |
| 2615 | |
| 2616 while (targetNode !== popoto.graph.getRootNode()) { | |
| 2617 var nodeLink; | |
| 2618 | |
| 2619 for (var i = 0; i < links.length; i++) { | |
| 2620 var link = links[i]; | |
| 2621 if (link.target === targetNode) { | |
| 2622 nodeLink = link; | |
| 2623 break; | |
| 2624 } | |
| 2625 } | |
| 2626 | |
| 2627 if (nodeLink) { | |
| 2628 pathLinks.push(nodeLink); | |
| 2629 targetNode = nodeLink.source; | |
| 2630 } | |
| 2631 } | |
| 2632 | |
| 2633 return pathLinks; | |
| 2634 }; | |
| 2635 | |
| 2636 /** | |
| 2637 * Generate a Cypher query to retrieve all the relation available for a given node. | |
| 2638 * | |
| 2639 * @param targetNode | |
| 2640 * @returns {string} | |
| 2641 */ | |
| 2642 popoto.query.generateLinkQuery = function (targetNode) { | |
| 2643 | |
| 2644 var linksToRoot = popoto.query.getLinksToRoot(targetNode, popoto.graph.force.links()); | |
| 2645 var queryElements = popoto.query.generateQueryElements(popoto.graph.getRootNode(), targetNode, linksToRoot, false); | |
| 2646 var matchElements = queryElements.matchElements, | |
| 2647 returnElements = [], | |
| 2648 whereElements = queryElements.whereElements, | |
| 2649 endElements = []; | |
| 2650 var rel = popoto.query.USE_RELATION_DIRECTION ? "->" : "-"; | |
| 2651 | |
| 2652 matchElements.push("(" + targetNode.internalLabel + ":`" + targetNode.label + "`)-[r]" + rel + "(x)"); | |
| 2653 returnElements.push("type(r) AS relationship"); | |
| 2654 if (popoto.query.USE_PARENT_RELATION) { | |
| 2655 returnElements.push("head(labels(x)) AS label"); | |
| 2656 } else { | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
2657 //returnElements.push("last(labels(x)) AS label"); |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
2658 returnElements.push("labels(x) AS label"); |
| 0 | 2659 } |
| 2660 returnElements.push("count(r) AS count"); | |
| 2661 endElements.push("ORDER BY count(r) DESC"); | |
| 2662 | |
| 2663 return "MATCH " + matchElements.join(", ") + ((whereElements.length > 0) ? " WHERE " + whereElements.join(" AND ") : "") + " RETURN " + returnElements.join(", ") + " " + endElements.join(" "); | |
| 2664 }; | |
| 2665 | |
| 2666 /** | |
| 2667 * Generate a Cypher query | |
| 2668 * @returns {string} | |
| 2669 */ | |
| 2670 popoto.query.generateResultCypherQuery = function () { | |
| 2671 | |
| 2672 var rootNode = popoto.graph.getRootNode(); | |
| 2673 var queryElements = popoto.query.generateQueryElements(rootNode, rootNode, popoto.query.getRelevantLinks(rootNode, rootNode, popoto.graph.force.links()), true); | |
| 2674 var matchElements = queryElements.matchElements, | |
| 2675 returnElements = [], | |
| 2676 whereElements = queryElements.whereElements, | |
| 2677 endElements = []; | |
| 2678 | |
| 2679 // Sort results by specified attribute | |
| 2680 var resultOrderByAttribute = popoto.provider.getResultOrderByAttribute(rootNode.label); | |
| 2681 if (resultOrderByAttribute) { | |
| 2682 var order = popoto.provider.isResultOrderAscending(rootNode.label) ? "ASC" : "DESC"; | |
| 2683 endElements.push("ORDER BY " + resultOrderByAttribute + " " + order); | |
| 2684 } | |
| 2685 | |
| 2686 endElements.push("LIMIT " + popoto.query.RESULTS_PAGE_SIZE); | |
| 2687 | |
| 2688 var resultAttributes = popoto.provider.getReturnAttributes(rootNode.label); | |
| 2689 var constraintAttribute = popoto.provider.getConstraintAttribute(rootNode.label); | |
| 2690 | |
| 2691 for (var i = 0; i < resultAttributes.length; i++) { | |
| 2692 var attribute = resultAttributes[i]; | |
| 2693 if (attribute === popoto.query.NEO4J_INTERNAL_ID) { | |
| 2694 if (attribute == constraintAttribute) { | |
| 2695 returnElements.push("ID(" + rootNode.internalLabel + ") AS " + popoto.query.NEO4J_INTERNAL_ID.queryInternalName); | |
| 2696 } else { | |
| 2697 returnElements.push("COLLECT(DISTINCT ID(" + rootNode.internalLabel + ")) AS " + popoto.query.NEO4J_INTERNAL_ID.queryInternalName); | |
| 2698 } | |
| 2699 } else { | |
| 2700 if (attribute == constraintAttribute) { | |
| 2701 returnElements.push(rootNode.internalLabel + "." + attribute + " AS " + attribute); | |
| 2702 } else { | |
| 2703 returnElements.push("COLLECT(DISTINCT " + rootNode.internalLabel + "." + attribute + ") AS " + attribute); | |
| 2704 } | |
| 2705 } | |
| 2706 } | |
| 2707 | |
| 2708 return "MATCH " + matchElements.join(", ") + ((whereElements.length > 0) ? " WHERE " + whereElements.join(" AND ") : "") + " RETURN DISTINCT " + returnElements.join(", ") + " " + endElements.join(" "); | |
| 2709 }; | |
| 2710 | |
| 2711 popoto.query.generateResultCypherQueryCount = function () { | |
| 2712 | |
| 2713 var rootNode = popoto.graph.getRootNode(); | |
| 2714 var queryElements = popoto.query.generateQueryElements(rootNode, rootNode, popoto.query.getRelevantLinks(rootNode, rootNode, popoto.graph.force.links()), true); | |
| 2715 var constraintAttribute = popoto.provider.getConstraintAttribute(rootNode.label); | |
| 2716 var matchElements = queryElements.matchElements, | |
| 2717 returnElements = [], | |
| 2718 whereElements = queryElements.whereElements, | |
| 2719 endElements = []; | |
| 2720 | |
| 2721 if (constraintAttribute === popoto.query.NEO4J_INTERNAL_ID) { | |
| 2722 returnElements.push("count(DISTINCT ID(" + rootNode.internalLabel + ")) AS count"); | |
| 2723 } else { | |
| 2724 returnElements.push("count(DISTINCT " + rootNode.internalLabel + "." + constraintAttribute + ") AS count"); | |
| 2725 } | |
| 2726 | |
| 2727 return "MATCH " + matchElements.join(", ") + ((whereElements.length > 0) ? " WHERE " + whereElements.join(" AND ") : "") + " RETURN " + returnElements.join(", ") + (endElements.length > 0 ? " " + endElements.join(" ") : ""); | |
| 2728 }; | |
| 2729 | |
| 2730 /** | |
| 2731 * Generate the query to update node counts. | |
| 2732 * | |
| 2733 * @param countedNode the counted node | |
| 2734 * @returns {string} the node count cypher query; | |
| 2735 */ | |
| 2736 popoto.query.generateNodeCountCypherQuery = function (countedNode) { | |
| 2737 | |
| 2738 var queryElements = popoto.query.generateQueryElements(popoto.graph.getRootNode(), countedNode, popoto.query.getRelevantLinks(popoto.graph.getRootNode(), countedNode, popoto.graph.force.links()), true); | |
| 2739 var matchElements = queryElements.matchElements, | |
| 2740 whereElements = queryElements.whereElements, | |
| 2741 returnElements = []; | |
| 2742 | |
| 2743 var countAttr = popoto.provider.getConstraintAttribute(countedNode.label); | |
| 2744 | |
| 2745 if (countAttr === popoto.query.NEO4J_INTERNAL_ID) { | |
| 2746 returnElements.push("count(DISTINCT ID(" + countedNode.internalLabel + ")) as count"); | |
| 2747 } else { | |
| 2748 returnElements.push("count(DISTINCT " + countedNode.internalLabel + "." + countAttr + ") as count"); | |
| 2749 } | |
| 2750 | |
| 2751 return "MATCH " + matchElements.join(", ") + ((whereElements.length > 0) ? " WHERE " + whereElements.join(" AND ") : "") + " RETURN " + returnElements.join(", "); | |
| 2752 }; | |
| 2753 | |
| 2754 /** | |
| 2755 * Generate a Cypher query from the graph model to get all the possible values for the targetNode element. | |
| 2756 * | |
| 2757 * @param targetNode node in the graph to get the values. | |
| 2758 * @returns {string} the query to execute to get all the values of targetNode corresponding to the graph. | |
| 2759 */ | |
| 2760 popoto.query.generateValueQuery = function (targetNode) { | |
| 2761 | |
| 2762 var rootNode = popoto.graph.getRootNode(); | |
| 2763 var queryElements = popoto.query.generateQueryElements(rootNode, targetNode, popoto.query.getRelevantLinks(rootNode, targetNode, popoto.graph.force.links()), true); | |
| 2764 var matchElements = queryElements.matchElements, | |
| 2765 endElements = [], | |
| 2766 whereElements = queryElements.whereElements, | |
| 2767 returnElements = []; | |
| 2768 | |
| 2769 // Sort results by specified attribute | |
| 2770 var valueOrderByAttribute = popoto.provider.getValueOrderByAttribute(targetNode.label); | |
| 2771 if (valueOrderByAttribute) { | |
| 2772 var order = popoto.provider.isValueOrderAscending(targetNode.label) ? "ASC" : "DESC"; | |
| 2773 endElements.push("ORDER BY " + valueOrderByAttribute + " " + order); | |
| 2774 } | |
| 2775 | |
| 2776 endElements.push("LIMIT " + popoto.query.VALUE_QUERY_LIMIT); | |
| 2777 | |
| 2778 var resultAttributes = popoto.provider.getReturnAttributes(targetNode.label); | |
| 2779 var constraintAttribute = popoto.provider.getConstraintAttribute(targetNode.label); | |
| 2780 | |
| 2781 for (var i = 0; i < resultAttributes.length; i++) { | |
| 2782 if (resultAttributes[i] === popoto.query.NEO4J_INTERNAL_ID) { | |
| 2783 if (resultAttributes[i] == constraintAttribute) { | |
| 2784 returnElements.push("ID(" + targetNode.internalLabel + ") AS " + popoto.query.NEO4J_INTERNAL_ID.queryInternalName); | |
| 2785 } else { | |
| 2786 returnElements.push("COLLECT (DISTINCT ID(" + targetNode.internalLabel + ")) AS " + popoto.query.NEO4J_INTERNAL_ID.queryInternalName); | |
| 2787 } | |
| 2788 } else { | |
| 2789 if (resultAttributes[i] == constraintAttribute) { | |
| 2790 returnElements.push(targetNode.internalLabel + "." + resultAttributes[i] + " AS " + resultAttributes[i]); | |
| 2791 } else { | |
| 2792 returnElements.push("COLLECT(DISTINCT " + targetNode.internalLabel + "." + resultAttributes[i] + ") AS " + resultAttributes[i]); | |
| 2793 } | |
| 2794 } | |
| 2795 } | |
| 2796 | |
| 2797 // Add count return attribute on root node | |
| 2798 var rootConstraintAttr = popoto.provider.getConstraintAttribute(rootNode.label); | |
| 2799 | |
| 2800 if (rootConstraintAttr === popoto.query.NEO4J_INTERNAL_ID) { | |
| 2801 returnElements.push("count(DISTINCT ID(" + rootNode.internalLabel + ")) AS count"); | |
| 2802 } else { | |
| 2803 returnElements.push("count(DISTINCT " + rootNode.internalLabel + "." + rootConstraintAttr + ") AS count"); | |
| 2804 } | |
| 2805 | |
| 2806 return "MATCH " + matchElements.join(", ") + ((whereElements.length > 0) ? " WHERE " + whereElements.join(" AND ") : "") + " RETURN DISTINCT " + returnElements.join(", ") + " " + endElements.join(" "); | |
| 2807 }; | |
| 2808 | |
| 2809 /////////////////////////////////////////////////////////////////// | |
| 2810 // Results | |
| 2811 | |
| 2812 popoto.result = {}; | |
| 2813 popoto.result.containerId = "popoto-results"; | |
| 2814 popoto.result.hasChanged = true; | |
| 2815 popoto.result.resultCountListeners = []; | |
| 2816 popoto.result.resultListeners = []; | |
| 2817 | |
| 2818 /** | |
| 2819 * Register a listener to the result count event. | |
| 2820 * This listener will be called on evry result change with total result count. | |
| 2821 */ | |
| 2822 popoto.result.onTotalResultCount = function (listener) { | |
| 2823 popoto.result.resultCountListeners.push(listener); | |
| 2824 }; | |
| 2825 | |
| 2826 popoto.result.onResultReceived = function (listener) { | |
| 2827 popoto.result.resultListeners.push(listener); | |
| 2828 }; | |
| 2829 | |
| 2830 /** | |
| 2831 * Parse REST returned data and generate a list of result objects. | |
| 2832 * | |
| 2833 * @param data | |
| 2834 * @returns {Array} | |
| 2835 */ | |
| 2836 popoto.result.parseResultData = function (data) { | |
| 2837 | |
| 2838 var results = []; | |
| 2839 if (data.results && data.results.length > 0) { | |
| 2840 for (var x = 0; x < data.results[0].data.length; x++) { | |
| 2841 | |
| 2842 var obj = { | |
| 2843 "resultIndex": x, | |
| 2844 "label": popoto.graph.getRootNode().label, | |
| 2845 "attributes": {} | |
| 2846 }; | |
| 2847 | |
| 2848 for (var i = 0; i < data.results[0].columns.length; i++) { | |
| 2849 // Some results can be an array as collect is used in query | |
| 2850 // So all values are converted to string | |
| 2851 obj.attributes[data.results[0].columns[i]] = "" + data.results[0].data[x].row[i]; | |
| 2852 } | |
| 2853 | |
| 2854 results.push(obj); | |
| 2855 } | |
| 2856 } | |
| 2857 | |
| 2858 return results; | |
| 2859 }; | |
| 2860 | |
| 2861 popoto.result.updateResults = function () { | |
| 2862 if (popoto.result.hasChanged) { | |
| 2863 var query = popoto.query.generateResultCypherQuery(); | |
| 2864 | |
| 2865 // FIXME temporary cypher query update here. To be replaced by real interactive cypher viewer. | |
| 2866 if (popoto.cypherviewer.isActive) { | |
| 2867 d3.select("#" + popoto.cypherviewer.containerId) | |
| 2868 // In this temporary version only the match part of the query is displayed to avoid huge query with lot of return attributes. | |
| 2869 .text(query.split("RETURN")[0] + " RETURN " + popoto.graph.getRootNode().internalLabel); | |
| 2870 } | |
| 2871 | |
| 2872 popoto.logger.info("Results ==> "); | |
| 2873 popoto.rest.post( | |
| 2874 { | |
| 2875 "statements": [ | |
| 2876 { | |
| 2877 "statement": query | |
| 2878 }] | |
| 2879 }) | |
| 2880 .done(function (data) { | |
| 2881 | |
| 2882 if (data.errors && data.errors.length > 0) { | |
| 2883 popoto.logger.error("Cypher query error:" + JSON.stringify(data.errors)); | |
| 2884 } | |
| 2885 | |
| 2886 // Parse data | |
| 2887 var resultObjects = popoto.result.parseResultData(data); | |
| 2888 | |
| 2889 // Notify listeners | |
| 2890 popoto.result.resultListeners.forEach(function (listener) { | |
| 2891 listener(resultObjects); | |
| 2892 }); | |
| 2893 | |
| 2894 // Update displayed results only if needed () | |
| 2895 if (popoto.result.isActive) { | |
| 2896 // Clear all results | |
| 2897 var results = d3.select("#" + popoto.result.containerId).selectAll(".ppt-result").data([]); | |
| 2898 results.exit().remove(); | |
| 2899 | |
| 2900 // Update data | |
| 2901 results = d3.select("#" + popoto.result.containerId).selectAll(".ppt-result").data(resultObjects, function (d) { | |
| 2902 return d.resultIndex; | |
| 2903 }); | |
| 2904 | |
| 2905 // Add new elements | |
| 2906 var pElmt = results.enter() | |
| 2907 .append("p") | |
| 2908 .attr("class", "ppt-result") | |
| 2909 .attr("id", function (d) { | |
| 2910 return "popoto-result-" + d.resultIndex; | |
| 2911 }); | |
| 2912 | |
| 2913 // Generate results with providers | |
| 2914 pElmt.each(function (d) { | |
| 2915 popoto.provider.getDisplayResultFunction(d.label)(d3.select(this)); | |
| 2916 }); | |
| 2917 } | |
| 2918 | |
| 2919 popoto.result.hasChanged = false; | |
| 2920 }) | |
| 2921 .fail(function (xhr, textStatus, errorThrown) { | |
| 2922 popoto.logger.error(textStatus + ": error while accessing Neo4j server on URL:\"" + popoto.rest.CYPHER_URL + "\" defined in \"popoto.rest.CYPHER_URL\" property: " + errorThrown); | |
| 2923 | |
| 2924 // Notify listeners | |
| 2925 popoto.result.resultListeners.forEach(function (listener) { | |
| 2926 listener([]); | |
| 2927 }); | |
| 2928 | |
| 2929 }); | |
| 2930 | |
| 2931 // Execute query to get total result count | |
| 2932 // But only if needed, if listeners have been added | |
| 2933 if (popoto.result.resultCountListeners.length > 0) { | |
| 2934 popoto.logger.info("Results count ==> "); | |
| 2935 popoto.rest.post( | |
| 2936 { | |
| 2937 "statements": [ | |
| 2938 { | |
| 2939 "statement": popoto.query.generateResultCypherQueryCount() | |
| 2940 }] | |
| 2941 }) | |
| 2942 .done(function (data) { | |
| 2943 | |
| 2944 if (data.errors && data.errors.length > 0) { | |
| 2945 popoto.logger.error("Cypher query error:" + JSON.stringify(data.errors)); | |
| 2946 } | |
| 2947 | |
| 2948 var count = 0; | |
| 2949 | |
| 2950 if (data.results && data.results.length > 0) { | |
| 2951 count = data.results[0].data[0].row[0]; | |
| 2952 } | |
| 2953 | |
| 2954 popoto.result.resultCountListeners.forEach(function (listener) { | |
| 2955 listener(count); | |
| 2956 }); | |
| 2957 | |
| 2958 }) | |
| 2959 .fail(function (xhr, textStatus, errorThrown) { | |
| 2960 popoto.logger.error(textStatus + ": error while accessing Neo4j server on URL:\"" + popoto.rest.CYPHER_URL + "\" defined in \"popoto.rest.CYPHER_URL\" property: " + errorThrown); | |
| 2961 | |
| 2962 popoto.result.resultCountListeners.forEach(function (listener) { | |
| 2963 listener(0); | |
| 2964 }); | |
| 2965 }); | |
| 2966 } | |
| 2967 } | |
| 2968 }; | |
| 2969 | |
| 2970 // NODE LABEL PROVIDERS ----------------------------------------------------------------------------------------------------- | |
| 2971 | |
| 2972 popoto.provider = {}; | |
| 2973 popoto.provider.linkProvider = {}; | |
| 2974 popoto.provider.taxonomyProvider = {}; | |
| 2975 popoto.provider.nodeProviders = {}; | |
| 2976 | |
| 2977 /** | |
| 2978 * Get the text representation of a link. | |
| 2979 * | |
| 2980 * @param link the link to get the text representation. | |
| 2981 * @returns {string} the text representation of the link. | |
| 2982 */ | |
| 2983 popoto.provider.getLinkTextValue = function (link) { | |
| 2984 if (popoto.provider.linkProvider.hasOwnProperty("getLinkTextValue")) { | |
| 2985 return popoto.provider.linkProvider.getLinkTextValue(link); | |
| 2986 } else { | |
| 2987 if (popoto.provider.DEFAULT_LINK_PROVIDER.hasOwnProperty("getLinkTextValue")) { | |
| 2988 return popoto.provider.DEFAULT_LINK_PROVIDER.getLinkTextValue(link); | |
| 2989 } else { | |
| 2990 popoto.logger.error("No provider defined for getLinkTextValue"); | |
| 2991 } | |
| 2992 } | |
| 2993 }; | |
| 2994 | |
| 2995 /** | |
| 2996 * Get the semantic text representation of a link. | |
| 2997 * | |
| 2998 * @param link the link to get the semantic text representation. | |
| 2999 * @returns {string} the semantic text representation of the link. | |
| 3000 */ | |
| 3001 popoto.provider.getLinkSemanticValue = function (link) { | |
| 3002 if (popoto.provider.linkProvider.hasOwnProperty("getLinkSemanticValue")) { | |
| 3003 return popoto.provider.linkProvider.getLinkSemanticValue(link); | |
| 3004 } else { | |
| 3005 if (popoto.provider.DEFAULT_LINK_PROVIDER.hasOwnProperty("getLinkSemanticValue")) { | |
| 3006 return popoto.provider.DEFAULT_LINK_PROVIDER.getLinkSemanticValue(link); | |
| 3007 } else { | |
| 3008 popoto.logger.error("No provider defined for getLinkSemanticValue"); | |
| 3009 } | |
| 3010 } | |
| 3011 }; | |
| 3012 | |
| 3013 /** | |
| 3014 * Label provider used by default if none have been defined for a label. | |
| 3015 * This provider can be changed if needed to customize default behavior. | |
| 3016 * If some properties are not found in user customized providers, default values will be extracted from this provider. | |
| 3017 */ | |
| 3018 popoto.provider.DEFAULT_LINK_PROVIDER = Object.freeze( | |
| 3019 { | |
| 3020 /** | |
| 3021 * Function used to return the text representation of a link. | |
| 3022 * | |
| 3023 * The default behavior is to return the internal relation name as text for relation links. | |
| 3024 * And return the target node text value for links between a node and its expanded values but only if text is not displayed on value node. | |
| 3025 * | |
| 3026 * @param link the link to represent as text. | |
| 3027 * @returns {string} the text representation of the link. | |
| 3028 */ | |
| 3029 "getLinkTextValue": function (link) { | |
| 3030 if (link.type === popoto.graph.link.LinkTypes.VALUE) { | |
| 3031 // Links between node and list of values. | |
| 3032 | |
| 3033 if (popoto.provider.isTextDisplayed(link.target)) { | |
| 3034 // Don't display text on link if text is displayed on target node. | |
| 3035 return ""; | |
| 3036 } else { | |
| 3037 // No text is displayed on target node then the text is displayed on link. | |
| 3038 return popoto.provider.getTextValue(link.target); | |
| 3039 } | |
| 3040 | |
| 3041 } else { | |
| 3042 | |
| 3043 // Link | |
| 3044 return link.label | |
| 3045 } | |
| 3046 }, | |
| 3047 | |
| 3048 /** | |
| 3049 * Function used to return a descriptive text representation of a link. | |
| 3050 * This representation should be more complete than getLinkTextValue and can contain semantic data. | |
| 3051 * This function is used for example to generate the label in the query viewer. | |
| 3052 * | |
| 3053 * The default behavior is to return the getLinkTextValue. | |
| 3054 * | |
| 3055 * @param link the link to represent as text. | |
| 3056 * @returns {string} the text semantic representation of the link. | |
| 3057 */ | |
| 3058 "getLinkSemanticValue": function (link) { | |
| 3059 return popoto.provider.getLinkTextValue(link); | |
| 3060 } | |
| 3061 }); | |
| 3062 popoto.provider.linkProvider = popoto.provider.DEFAULT_LINK_PROVIDER; | |
| 3063 | |
| 3064 /** | |
| 3065 * Get the text representation of a taxonomy. | |
| 3066 * | |
| 3067 * @param label the label used for the taxonomy. | |
| 3068 * @returns {string} the text representation of the taxonomy. | |
| 3069 */ | |
| 3070 popoto.provider.getTaxonomyTextValue = function (label) { | |
| 3071 if (popoto.provider.taxonomyProvider.hasOwnProperty("getTextValue")) { | |
| 3072 return popoto.provider.taxonomyProvider.getTextValue(label); | |
| 3073 } else { | |
| 3074 if (popoto.provider.DEFAULT_TAXONOMY_PROVIDER.hasOwnProperty("getTextValue")) { | |
| 3075 return popoto.provider.DEFAULT_TAXONOMY_PROVIDER.getTextValue(label); | |
| 3076 } else { | |
| 3077 popoto.logger.error("No provider defined for taxonomy getTextValue"); | |
| 3078 } | |
| 3079 } | |
| 3080 }; | |
| 3081 | |
| 3082 /** | |
| 3083 * Label provider used by default if none have been defined for a label. | |
| 3084 * This provider can be changed if needed to customize default behavior. | |
| 3085 * If some properties are not found in user customized providers, default values will be extracted from this provider. | |
| 3086 */ | |
| 3087 popoto.provider.DEFAULT_TAXONOMY_PROVIDER = Object.freeze( | |
| 3088 { | |
| 3089 /** | |
| 3090 * Function used to return the text representation of a taxonomy. | |
| 3091 * | |
| 3092 * The default behavior is to return the label without changes. | |
| 3093 * | |
| 3094 * @param label the label used to represent the taxonomy. | |
| 3095 * @returns {string} the text representation of the taxonomy. | |
| 3096 */ | |
| 3097 "getTextValue": function (label) { | |
| 3098 return label; | |
| 3099 } | |
| 3100 }); | |
| 3101 popoto.provider.taxonomyProvider = popoto.provider.DEFAULT_TAXONOMY_PROVIDER; | |
| 3102 | |
| 3103 /** | |
| 3104 * Define the different type of rendering of a node for a given label. | |
| 3105 * TEXT: default rendering type, the node will be displayed with an ellipse and a text in it. | |
| 3106 * IMAGE: the node is displayed as an image using the image tag in the svg graph. | |
| 3107 * In this case an image path is required. | |
| 3108 * SVG: the node is displayed using a list of svg path, each path can contain its own color. | |
| 3109 */ | |
| 3110 popoto.provider.NodeDisplayTypes = Object.freeze({TEXT: 0, IMAGE: 1, SVG: 2}); | |
| 3111 | |
| 3112 /** | |
| 3113 * Get the label provider for the given label. | |
| 3114 * If no provider is defined for the label: | |
| 3115 * First search in parent provider. | |
| 3116 * Then if not found will create one from default provider. | |
| 3117 * | |
| 3118 * @param label to retrieve the corresponding label provider. | |
| 3119 * @returns {object} corresponding label provider. | |
| 3120 */ | |
| 3121 popoto.provider.getProvider = function (label) { | |
| 3122 if (label === undefined) { | |
| 3123 popoto.logger.error("Node label is undefined, no label provider can be found."); | |
| 3124 } else { | |
| 3125 if (popoto.provider.nodeProviders.hasOwnProperty(label)) { | |
| 3126 return popoto.provider.nodeProviders[label]; | |
| 3127 } else { | |
| 3128 popoto.logger.debug("No direct provider found for label " + label); | |
| 3129 | |
| 3130 // Search in all children list definitions to find the parent provider. | |
| 3131 for (var p in popoto.provider.nodeProviders) { | |
| 3132 if (popoto.provider.nodeProviders.hasOwnProperty(p)) { | |
| 3133 var provider = popoto.provider.nodeProviders[p]; | |
| 3134 if (provider.hasOwnProperty("children")) { | |
| 3135 if (provider["children"].indexOf(label) > -1) { | |
| 3136 popoto.logger.debug("No provider is defined for label (" + label + "), parent (" + p + ") will be used"); | |
| 3137 // A provider containing the required label in its children definition has been found it will be cloned. | |
| 3138 | |
| 3139 var newProvider = {"parent": p}; | |
| 3140 for (var pr in provider) { | |
| 3141 if (provider.hasOwnProperty(pr) && pr != "children" && pr != "parent") { | |
| 3142 newProvider[pr] = provider[pr]; | |
| 3143 } | |
| 3144 } | |
| 3145 | |
| 3146 popoto.provider.nodeProviders[label] = newProvider; | |
| 3147 return popoto.provider.nodeProviders[label]; | |
| 3148 } | |
| 3149 } | |
| 3150 } | |
| 3151 } | |
| 3152 | |
| 3153 popoto.logger.debug("No label provider defined for label (" + label + ") default one will be created from popoto.provider.DEFAULT_PROVIDER"); | |
| 3154 | |
| 3155 popoto.provider.nodeProviders[label] = {}; | |
| 3156 // Clone default provider properties in new provider. | |
| 3157 for (var prop in popoto.provider.DEFAULT_PROVIDER) { | |
| 3158 if (popoto.provider.DEFAULT_PROVIDER.hasOwnProperty(prop)) { | |
| 3159 popoto.provider.nodeProviders[label][prop] = popoto.provider.DEFAULT_PROVIDER[prop]; | |
| 3160 } | |
| 3161 } | |
| 3162 return popoto.provider.nodeProviders[label]; | |
| 3163 } | |
| 3164 } | |
| 3165 }; | |
| 3166 | |
| 3167 /** | |
| 3168 * Get the property or function defined in node label provider. | |
| 3169 * If the property is not found search is done in parents. | |
| 3170 * If not found in parent, property defined in popoto.provider.DEFAULT_PROVIDER is returned. | |
| 3171 * If not found in default provider, defaultValue is set and returned. | |
| 3172 * | |
| 3173 * @param label node label to get the property in its provider. | |
| 3174 * @param name name of the property to retrieve. | |
| 3175 * @returns {*} node property defined in its label provider. | |
| 3176 */ | |
| 3177 popoto.provider.getProperty = function (label, name) { | |
| 3178 var provider = popoto.provider.getProvider(label); | |
| 3179 | |
| 3180 if (!provider.hasOwnProperty(name)) { | |
| 3181 var providerIterator = provider; | |
| 3182 | |
| 3183 // Check parents | |
| 3184 var isPropertyFound = false; | |
| 3185 while (providerIterator.hasOwnProperty("parent") && !isPropertyFound) { | |
| 3186 providerIterator = popoto.provider.getProvider(providerIterator.parent); | |
| 3187 if (providerIterator.hasOwnProperty(name)) { | |
| 3188 | |
| 3189 // Set attribute in child to optimize next call. | |
| 3190 provider[name] = providerIterator[name]; | |
| 3191 isPropertyFound = true; | |
| 3192 } | |
| 3193 } | |
| 3194 | |
| 3195 if (!isPropertyFound) { | |
| 3196 popoto.logger.debug("No \"" + name + "\" property found for node label provider (" + label + "), default value will be used"); | |
| 3197 if (popoto.provider.DEFAULT_PROVIDER.hasOwnProperty(name)) { | |
| 3198 provider[name] = popoto.provider.DEFAULT_PROVIDER[name]; | |
| 3199 } else { | |
| 3200 popoto.logger.error("No default value for \"" + name + "\" property found for label provider (" + label + ")"); | |
| 3201 } | |
| 3202 } | |
| 3203 } | |
| 3204 return provider[name]; | |
| 3205 }; | |
| 3206 | |
| 3207 /** | |
| 3208 * Return the "isSearchable" property for the node label provider. | |
| 3209 * Is Searchable defined whether the label can be used as graph query builder root. | |
| 3210 * If true the label can be displayed in the taxonomy filter. | |
| 3211 * | |
| 3212 * @param label | |
| 3213 * @returns {*} | |
| 3214 */ | |
| 3215 popoto.provider.getIsSearchable = function (label) { | |
| 3216 return popoto.provider.getProperty(label, "isSearchable"); | |
| 3217 }; | |
| 3218 | |
| 3219 /** | |
| 3220 * Return the list of attributes defined in node label provider. | |
| 3221 * Parents return attributes are also returned. | |
| 3222 * | |
| 3223 * @param label used to retrieve parent attributes. | |
| 3224 * @returns {Array} list of return attributes for a node. | |
| 3225 */ | |
| 3226 popoto.provider.getReturnAttributes = function (label) { | |
| 3227 var provider = popoto.provider.getProvider(label); | |
| 3228 var attributes = {}; // Object is used as a Set to merge possible duplicate in parents | |
| 3229 | |
| 3230 if (provider.hasOwnProperty("returnAttributes")) { | |
| 3231 for (var i = 0; i < provider.returnAttributes.length; i++) { | |
| 3232 if (provider.returnAttributes[i] === popoto.query.NEO4J_INTERNAL_ID) { | |
| 3233 attributes[popoto.query.NEO4J_INTERNAL_ID.queryInternalName] = true; | |
| 3234 } else { | |
| 3235 attributes[provider.returnAttributes[i]] = true; | |
| 3236 } | |
| 3237 } | |
| 3238 } | |
| 3239 | |
| 3240 // Add parent attributes | |
| 3241 while (provider.hasOwnProperty("parent")) { | |
| 3242 provider = popoto.provider.getProvider(provider.parent); | |
| 3243 if (provider.hasOwnProperty("returnAttributes")) { | |
| 3244 for (var j = 0; j < provider.returnAttributes.length; j++) { | |
| 3245 if (provider.returnAttributes[j] === popoto.query.NEO4J_INTERNAL_ID) { | |
| 3246 attributes[popoto.query.NEO4J_INTERNAL_ID.queryInternalName] = true; | |
| 3247 } else { | |
| 3248 attributes[provider.returnAttributes[j]] = true; | |
| 3249 } | |
| 3250 } | |
| 3251 } | |
| 3252 } | |
| 3253 | |
| 3254 // Add default provider attributes if any but not internal id as this id is added only if none has been found. | |
| 3255 if (popoto.provider.DEFAULT_PROVIDER.hasOwnProperty("returnAttributes")) { | |
| 3256 for (var k = 0; k < popoto.provider.DEFAULT_PROVIDER.returnAttributes.length; k++) { | |
| 3257 if (popoto.provider.DEFAULT_PROVIDER.returnAttributes[k] !== popoto.query.NEO4J_INTERNAL_ID) { | |
| 3258 attributes[popoto.provider.DEFAULT_PROVIDER.returnAttributes[k]] = true; | |
| 3259 } | |
| 3260 } | |
| 3261 } | |
| 3262 | |
| 3263 // Add constraint attribute in the list | |
| 3264 var constraintAttribute = popoto.provider.getConstraintAttribute(label); | |
| 3265 if (constraintAttribute === popoto.query.NEO4J_INTERNAL_ID) { | |
| 3266 attributes[popoto.query.NEO4J_INTERNAL_ID.queryInternalName] = true; | |
| 3267 } else { | |
| 3268 attributes[constraintAttribute] = true; | |
| 3269 } | |
| 3270 | |
| 3271 | |
| 3272 // Add all in array | |
| 3273 var attrList = []; | |
| 3274 for (var attr in attributes) { | |
| 3275 if (attributes.hasOwnProperty(attr)) { | |
| 3276 if (attr == popoto.query.NEO4J_INTERNAL_ID.queryInternalName) { | |
| 3277 attrList.push(popoto.query.NEO4J_INTERNAL_ID); | |
| 3278 } else { | |
| 3279 attrList.push(attr); | |
| 3280 } | |
| 3281 } | |
| 3282 } | |
| 3283 | |
| 3284 // If no attributes have been found internal ID is used | |
| 3285 if (attrList.length <= 0) { | |
| 3286 attrList.push(popoto.query.NEO4J_INTERNAL_ID); | |
| 3287 } | |
| 3288 return attrList; | |
| 3289 }; | |
| 3290 | |
| 3291 /** | |
| 3292 * Return the attribute to use as constraint attribute for a node defined in its label provider. | |
| 3293 * | |
| 3294 * @param label | |
| 3295 * @returns {*} | |
| 3296 */ | |
| 3297 popoto.provider.getConstraintAttribute = function (label) { | |
| 3298 return popoto.provider.getProperty(label, "constraintAttribute"); | |
| 3299 }; | |
| 3300 | |
| 3301 /** | |
| 3302 * Return a list of predefined constraint defined in the node label configuration. | |
| 3303 * | |
| 3304 * @param label | |
| 3305 * @returns {*} | |
| 3306 */ | |
| 3307 popoto.provider.getPredefinedConstraints = function (label) { | |
| 3308 return popoto.provider.getProperty(label, "getPredefinedConstraints")(); | |
| 3309 }; | |
| 3310 | |
| 3311 | |
| 3312 popoto.provider.getValueOrderByAttribute = function (label) { | |
| 3313 return popoto.provider.getProperty(label, "valueOrderByAttribute"); | |
| 3314 }; | |
| 3315 | |
| 3316 popoto.provider.isValueOrderAscending = function (label) { | |
| 3317 return popoto.provider.getProperty(label, "isValueOrderAscending"); | |
| 3318 }; | |
| 3319 | |
| 3320 popoto.provider.getResultOrderByAttribute = function (label) { | |
| 3321 return popoto.provider.getProperty(label, "resultOrderByAttribute"); | |
| 3322 }; | |
| 3323 | |
| 3324 popoto.provider.isResultOrderAscending = function (label) { | |
| 3325 return popoto.provider.getProperty(label, "isResultOrderAscending"); | |
| 3326 }; | |
| 3327 | |
| 3328 /** | |
| 3329 * Return the value of the getTextValue function defined in the label provider corresponding to the parameter node. | |
| 3330 * If no "getTextValue" function is defined in the provider, search is done in parents. | |
| 3331 * If none is found in parent default provider method is used. | |
| 3332 * | |
| 3333 * @param node | |
| 3334 */ | |
| 3335 popoto.provider.getTextValue = function (node) { | |
| 3336 return popoto.provider.getProperty(node.label, "getTextValue")(node); | |
| 3337 }; | |
| 3338 | |
| 3339 | |
| 3340 /** | |
| 3341 * Return the value of the getTextValue function defined in the label provider corresponding to the parameter node. | |
| 3342 * If no "getTextValue" function is defined in the provider, search is done in parents. | |
| 3343 * If none is found in parent default provider method is used. | |
| 3344 * | |
| 3345 * @param node | |
| 3346 */ | |
| 3347 popoto.provider.getTextValue = function (node) { | |
| 3348 return popoto.provider.getProperty(node.label, "getTextValue")(node); | |
| 3349 }; | |
| 3350 | |
| 3351 /** | |
| 3352 * Return the value of the getSemanticValue function defined in the label provider corresponding to the parameter node. | |
| 3353 * The semantic value is a more detailed description of the node used for example in the query viewer. | |
| 3354 * If no "getTextValue" function is defined in the provider, search is done in parents. | |
| 3355 * If none is found in parent default provider method is used. | |
| 3356 * | |
| 3357 * @param node | |
| 3358 * @returns {*} | |
| 3359 */ | |
| 3360 popoto.provider.getSemanticValue = function (node) { | |
| 3361 return popoto.provider.getProperty(node.label, "getSemanticValue")(node); | |
| 3362 }; | |
| 3363 | |
| 3364 /** | |
| 3365 * Return a list of SVG paths objects, each defined by a "d" property containing the path and "f" property for the color. | |
| 3366 * | |
| 3367 * @param node | |
| 3368 * @returns {*} | |
| 3369 */ | |
| 3370 popoto.provider.getSVGPaths = function (node) { | |
| 3371 return popoto.provider.getProperty(node.label, "getSVGPaths")(node); | |
| 3372 }; | |
| 3373 | |
| 3374 /** | |
| 3375 * Check in label provider if text must be displayed with images nodes. | |
| 3376 * @param node | |
| 3377 * @returns {*} | |
| 3378 */ | |
| 3379 popoto.provider.isTextDisplayed = function (node) { | |
| 3380 return popoto.provider.getProperty(node.label, "getIsTextDisplayed")(node); | |
| 3381 }; | |
| 3382 | |
| 3383 /** | |
| 3384 * Return the getIsGroup property. | |
| 3385 * | |
| 3386 * @param node | |
| 3387 * @returns {*} | |
| 3388 */ | |
| 3389 popoto.provider.getIsGroup = function (node) { | |
| 3390 return popoto.provider.getProperty(node.label, "getIsGroup")(node); | |
| 3391 }; | |
| 3392 | |
| 3393 /** | |
| 3394 * Return the node display type. | |
| 3395 * can be TEXT, IMAGE, SVG or GROUP. | |
| 3396 * | |
| 3397 * @param node | |
| 3398 * @returns {*} | |
| 3399 */ | |
| 3400 popoto.provider.getNodeDisplayType = function (node) { | |
| 3401 return popoto.provider.getProperty(node.label, "getDisplayType")(node); | |
| 3402 }; | |
| 3403 | |
| 3404 /** | |
| 3405 * Return the file path of the image defined in the provider. | |
| 3406 * | |
| 3407 * @param node the node to get the image path. | |
| 3408 * @returns {string} the path of the node image. | |
| 3409 */ | |
| 3410 popoto.provider.getImagePath = function (node) { | |
| 3411 return popoto.provider.getProperty(node.label, "getImagePath")(node); | |
| 3412 }; | |
| 3413 | |
| 3414 /** | |
| 3415 * Return the width size of the node image. | |
| 3416 * | |
| 3417 * @param node the node to get the image width. | |
| 3418 * @returns {int} the image width. | |
| 3419 */ | |
| 3420 popoto.provider.getImageWidth = function (node) { | |
| 3421 return popoto.provider.getProperty(node.label, "getImageWidth")(node); | |
| 3422 }; | |
| 3423 | |
| 3424 /** | |
| 3425 * Return the height size of the node image. | |
| 3426 * | |
| 3427 * @param node the node to get the image height. | |
| 3428 * @returns {int} the image height. | |
| 3429 */ | |
| 3430 popoto.provider.getImageHeight = function (node) { | |
| 3431 return popoto.provider.getProperty(node.label, "getImageHeight")(node); | |
| 3432 }; | |
| 3433 | |
| 3434 /** | |
| 3435 * Return the displayResults function defined in label parameter's provider. | |
| 3436 * | |
| 3437 * @param label | |
| 3438 * @returns {*} | |
| 3439 */ | |
| 3440 popoto.provider.getDisplayResultFunction = function (label) { | |
| 3441 return popoto.provider.getProperty(label, "displayResults"); | |
| 3442 }; | |
| 3443 | |
| 3444 /** | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3445 * Select the label if there is more than one. |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3446 * |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3447 * Discards the label with an underscore. |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3448 */ |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3449 popoto.provider.getLabelFilter = function (nodeLabel) { |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3450 if (Array.isArray(nodeLabel)) { |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3451 // use last label |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3452 var label = nodeLabel[nodeLabel.length - 1]; |
| 3 | 3453 if (label.indexOf('_') != -1 && nodeLabel.length > 1) { |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3454 // skip if wrong label |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3455 label = nodeLabel[nodeLabel.length - 2]; |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3456 } |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3457 // replace array with string |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3458 nodeLabel = label; |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3459 } |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3460 return nodeLabel; |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3461 } |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3462 |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3463 /** |
| 0 | 3464 * Label provider used by default if none have been defined for a label. |
| 3465 * This provider can be changed if needed to customize default behavior. | |
| 3466 * If some properties are not found in user customized providers, default values will be extracted from this provider. | |
| 3467 */ | |
| 3468 popoto.provider.DEFAULT_PROVIDER = Object.freeze( | |
| 3469 { | |
| 3470 /********************************************************************** | |
| 3471 * Label specific parameters: | |
| 3472 * | |
| 3473 * These attributes are specific to a node label and will be used for every node having this label. | |
| 3474 **********************************************************************/ | |
| 3475 | |
| 3476 /** | |
| 3477 * Defines whether this label can be used as root element of the graph query builder. | |
| 3478 * This property is also used to determine whether the label can be displayed in the taxonomy filter. | |
| 3479 * | |
| 3480 * The default value is true. | |
| 3481 */ | |
| 3482 "isSearchable": true, | |
| 3483 | |
| 3484 /** | |
| 3485 * Defines the list of attribute to return for node of this label. | |
| 3486 * All the attributes listed here will be added in generated cypher queries and available in result list and in node provider's functions. | |
| 3487 * | |
| 3488 * The default value contains only the Neo4j internal id. | |
| 3489 * This id is used by default because it is a convenient way to identify a node when nothing is known about its attributes. | |
| 3490 * But you should really consider using your application attributes instead, it is a bad practice to rely on this attribute. | |
| 3491 */ | |
| 3492 "returnAttributes": [popoto.query.NEO4J_INTERNAL_ID], | |
| 3493 | |
| 3494 /** | |
| 3495 * Defines the attribute used to order the value displayed on node. | |
| 3496 * | |
| 3497 * Default value is "count" attribute. | |
| 3498 */ | |
| 3499 "valueOrderByAttribute": "count", | |
| 3500 | |
| 3501 /** | |
| 3502 * Defines whether the value query order by is ascending, if false order by will be descending. | |
| 3503 * | |
| 3504 * Default value is false (descending) | |
| 3505 */ | |
| 3506 "isValueOrderAscending": false, | |
| 3507 | |
| 3508 /** | |
| 3509 * Defines the attribute used to order the results. | |
| 3510 * | |
| 3511 * Default value is "null" to disable order by. | |
| 3512 */ | |
| 3513 "resultOrderByAttribute": null, | |
| 3514 | |
| 3515 /** | |
| 3516 * Defines whether the result query order by is ascending, if false order by will be descending. | |
| 3517 * | |
| 3518 * Default value is true (ascending) | |
| 3519 */ | |
| 3520 "isResultOrderAscending": true, | |
| 3521 | |
| 3522 /** | |
| 3523 * Defines the attribute of the node to use in query constraint for nodes of this label. | |
| 3524 * This attribute is used in the generated cypher query to build the constraints with selected values. | |
| 3525 * | |
| 3526 * The default value is the Neo4j internal id. | |
| 3527 * This id is used by default because it is a convenient way to identify a node when nothing is known about its attributes. | |
| 3528 * But you should really consider using your application attributes instead, it is a bad practice to rely on this attribute. | |
| 3529 */ | |
| 3530 "constraintAttribute": popoto.query.NEO4J_INTERNAL_ID, | |
| 3531 | |
| 3532 /** | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3533 * Defines the attribute of the node to display as a text identifying the node. |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3534 * |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3535 * The default value is the Neo4j internal id. |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3536 */ |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3537 "displayAttribute": popoto.query.NEO4J_INTERNAL_ID, |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3538 |
|
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3539 /** |
| 0 | 3540 * Return the list of predefined constraints to add for the given label. |
| 3541 * These constraints will be added in every generated Cypher query. | |
| 3542 * | |
| 3543 * For example if the returned list contain ["$identifier.born > 1976"] for "Person" nodes everywhere in popoto.js the generated Cypher query will add the constraint | |
| 3544 * "WHERE person.born > 1976" | |
| 3545 * | |
| 3546 * @returns {Array} | |
| 3547 */ | |
| 3548 "getPredefinedConstraints": function () { | |
| 3549 return []; | |
| 3550 }, | |
| 3551 | |
| 3552 /********************************************************************** | |
| 3553 * Node specific parameters: | |
| 3554 * | |
| 3555 * These attributes are specific to nodes (in graph or query viewer) for a given label. | |
| 3556 * But they can be customized for nodes of the same label. | |
| 3557 * The parameters are defined by a function that will be called with the node as parameter. | |
| 3558 * In this function the node internal attributes can be used to customize the value to return. | |
| 3559 **********************************************************************/ | |
| 3560 | |
| 3561 /** | |
| 3562 * Function returning the display type of a node. | |
| 3563 * This type defines how the node will be drawn in the graph. | |
| 3564 * | |
| 3565 * The result must be one of the following values: | |
| 3566 * | |
| 3567 * popoto.provider.NodeDisplayTypes.IMAGE | |
| 3568 * In this case the node will be drawn as an image and "getImagePath" function is required to return the node image path. | |
| 3569 * | |
| 3570 * popoto.provider.NodeDisplayTypes.SVG | |
| 3571 * In this case the node will be drawn as SVG paths and "getSVGPaths" | |
| 3572 * | |
| 3573 * popoto.provider.NodeDisplayTypes.TEXT | |
| 3574 * In this case the node will be drawn as a simple ellipse. | |
| 3575 * | |
| 3576 * Default value is TEXT. | |
| 3577 * | |
| 3578 * @param node the node to extract its type. | |
| 3579 * @returns {number} one value from popoto.provider.NodeDisplayTypes | |
| 3580 */ | |
| 3581 "getDisplayType": function (node) { | |
| 3582 return popoto.provider.NodeDisplayTypes.TEXT; | |
| 3583 }, | |
| 3584 | |
| 3585 /** | |
| 3586 * Function defining whether the node is a group node. | |
| 3587 * In this case no count are displayed and no value can be selected on the node. | |
| 3588 * | |
| 3589 * Default value is false. | |
| 3590 */ | |
| 3591 "getIsGroup": function (node) { | |
| 3592 return false; | |
| 3593 }, | |
| 3594 | |
| 3595 /** | |
| 3596 * Function defining whether the node text representation must be displayed on graph. | |
| 3597 * If true the value returned for getTextValue on node will be displayed on graph. | |
| 3598 * | |
| 3599 * This text will be added in addition to the getDisplayType representation. | |
| 3600 * It can be displayed on all type of node display, images, SVG or text. | |
| 3601 * | |
| 3602 * Default value is true | |
| 3603 * | |
| 3604 * @param node the node to display on graph. | |
| 3605 * @returns {boolean} true if text must be displayed on graph for the node. | |
| 3606 */ | |
| 3607 "getIsTextDisplayed": function (node) { | |
| 3608 return true; | |
| 3609 }, | |
| 3610 | |
| 3611 /** | |
| 3612 * Function used to return the text representation of a node. | |
| 3613 * | |
| 3614 * The default behavior is to return the label of the node | |
| 3615 * or the value of constraint attribute of the node if it contains value. | |
| 3616 * | |
| 3617 * The returned value is truncated using popoto.graph.node.NODE_MAX_CHARS property. | |
| 3618 * | |
| 3619 * @param node the node to represent as text. | |
| 3620 * @returns {string} the text representation of the node. | |
| 3621 */ | |
| 3622 "getTextValue": function (node) { | |
| 3623 var text; | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3624 var textAttr = popoto.provider.getProperty(node.label, "displayAttribute"); |
| 0 | 3625 if (node.type === popoto.graph.node.NodeTypes.VALUE) { |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3626 if (textAttr === popoto.query.NEO4J_INTERNAL_ID) { |
| 0 | 3627 text = "" + node.internalID; |
| 3628 } else { | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3629 text = "" + node.attributes[textAttr]; |
| 0 | 3630 } |
| 3631 } else { | |
| 3632 if (node.value === undefined) { | |
| 3633 text = node.label; | |
| 3634 } else { | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3635 if (textAttr === popoto.query.NEO4J_INTERNAL_ID) { |
| 0 | 3636 text = "" + node.value.internalID; |
| 3637 } else { | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3638 text = "" + node.value.attributes[textAttr]; |
| 0 | 3639 } |
| 3640 } | |
| 3641 } | |
| 3642 // Text is truncated to fill the ellipse | |
| 3643 return text.substring(0, popoto.graph.node.NODE_MAX_CHARS); | |
| 3644 }, | |
| 3645 | |
| 3646 /** | |
| 3647 * Function used to return a descriptive text representation of a link. | |
| 3648 * This representation should be more complete than getTextValue and can contain semantic data. | |
| 3649 * This function is used for example to generate the label in the query viewer. | |
| 3650 * | |
| 3651 * The default behavior is to return the getTextValue not truncated. | |
| 3652 * | |
| 3653 * @param node the node to represent as text. | |
| 3654 * @returns {string} the text semantic representation of the node. | |
| 3655 */ | |
| 3656 "getSemanticValue": function (node) { | |
| 3657 var text; | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3658 var textAttr = popoto.provider.getProperty(node.label, "displayAttribute"); |
| 0 | 3659 if (node.type === popoto.graph.node.NodeTypes.VALUE) { |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3660 if (textAttr === popoto.query.NEO4J_INTERNAL_ID) { |
| 0 | 3661 text = "" + node.internalID; |
| 3662 } else { | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3663 text = "" + node.attributes[textAttr]; |
| 0 | 3664 } |
| 3665 } else { | |
| 3666 if (node.value === undefined) { | |
| 3667 text = node.label; | |
| 3668 } else { | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3669 if (textAttr === popoto.query.NEO4J_INTERNAL_ID) { |
| 0 | 3670 text = "" + node.value.internalID; |
| 3671 } else { | |
|
1
db013b2f3e10
added displayAttribute to show on individual nodes.
Robert Casties <casties@mpiwg-berlin.mpg.de>
parents:
0
diff
changeset
|
3672 text = "" + node.value.attributes[textAttr]; |
| 0 | 3673 } |
| 3674 } | |
| 3675 } | |
| 3676 return text; | |
| 3677 }, | |
| 3678 | |
| 3679 /** | |
| 3680 * Function returning the image file path to use for a node. | |
| 3681 * This function is only used for popoto.provider.NodeDisplayTypes.IMAGE type nodes. | |
| 3682 * | |
| 3683 * @param node | |
| 3684 * @returns {string} | |
| 3685 */ | |
| 3686 "getImagePath": function (node) { | |
| 3687 if (node.type === popoto.graph.node.NodeTypes.VALUE) { | |
| 3688 return "css/image/node-yellow.png"; | |
| 3689 } else { | |
| 3690 if (node.value === undefined) { | |
| 3691 if (node.type === popoto.graph.node.NodeTypes.ROOT) { | |
| 3692 return "css/image/node-blue.png"; | |
| 3693 } | |
| 3694 if (node.type === popoto.graph.node.NodeTypes.CHOOSE) { | |
| 3695 return "css/image/node-green.png"; | |
| 3696 } | |
| 3697 if (node.type === popoto.graph.node.NodeTypes.GROUP) { | |
| 3698 return "css/image/node-black.png"; | |
| 3699 } | |
| 3700 } else { | |
| 3701 return "css/image/node-orange.png"; | |
| 3702 } | |
| 3703 } | |
| 3704 }, | |
| 3705 | |
| 3706 /** | |
| 3707 * Function returning the image width of the node. | |
| 3708 * This function is only used for popoto.provider.NodeDisplayTypes.IMAGE type nodes. | |
| 3709 * | |
| 3710 * @param node | |
| 3711 * @returns {number} | |
| 3712 */ | |
| 3713 "getImageWidth": function (node) { | |
| 3714 return 125; | |
| 3715 }, | |
| 3716 | |
| 3717 /** | |
| 3718 * Function returning the image height of the node. | |
| 3719 * This function is only used for popoto.provider.NodeDisplayTypes.IMAGE type nodes. | |
| 3720 * | |
| 3721 * @param node | |
| 3722 * @returns {number} | |
| 3723 */ | |
| 3724 "getImageHeight": function (node) { | |
| 3725 return 125; | |
| 3726 }, | |
| 3727 | |
| 3728 /********************************************************************** | |
| 3729 * Results specific parameters: | |
| 3730 * | |
| 3731 * These attributes are specific to result display. | |
| 3732 **********************************************************************/ | |
| 3733 | |
| 3734 /** | |
| 3735 * Generate the result entry content using d3.js mechanisms. | |
| 3736 * | |
| 3737 * The parameter of the function is the <p> selected with d3.js | |
| 3738 * | |
| 3739 * The default behavior is to generate a <table> containing all the return attributes in a <th> and their value in a <td>. | |
| 3740 * | |
| 3741 * @param pElmt the <p> element generated in the result list. | |
| 3742 */ | |
| 3743 "displayResults": function (pElmt) { | |
| 3744 var result = pElmt.data()[0]; | |
| 3745 | |
| 3746 var returnAttributes = popoto.provider.getReturnAttributes(result.label); | |
| 3747 | |
| 3748 var table = pElmt.append("table").attr("class", "ppt-result-table"); | |
| 3749 | |
| 3750 returnAttributes.forEach(function (attribute) { | |
| 3751 var tr = table.append("tr"); | |
| 3752 tr.append("th").text(function () { | |
| 3753 return attribute + ":"; | |
| 3754 }); | |
| 3755 if (result.attributes[attribute] !== undefined) { | |
| 3756 tr.append("td").text(function (result) { | |
| 3757 return result.attributes[attribute]; | |
| 3758 }); | |
| 3759 } | |
| 3760 }); | |
| 3761 } | |
| 3762 | |
| 3763 }); | |
| 3764 | |
| 3765 return popoto; | |
| 3766 }(); |