GraphWidget.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612
  1. /*##############################################################################
  2. # HPCC SYSTEMS software Copyright (C) 2012 HPCC Systems.
  3. #
  4. # Licensed under the Apache License, Version 2.0 (the "License");
  5. # you may not use this file except in compliance with the License.
  6. # You may obtain a copy of the License at
  7. #
  8. # http://www.apache.org/licenses/LICENSE-2.0
  9. #
  10. # Unless required by applicable law or agreed to in writing, software
  11. # distributed under the License is distributed on an "AS IS" BASIS,
  12. # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. # See the License for the specific language governing permissions and
  14. # limitations under the License.
  15. ############################################################################## */
  16. require([
  17. "dojo/_base/declare",
  18. "dojo/aspect",
  19. "dojo/has",
  20. "dojo/dom",
  21. "dojo/dom-construct",
  22. "dojo/dom-class",
  23. "dijit/layout/_LayoutWidget",
  24. "dijit/_TemplatedMixin",
  25. "dijit/_WidgetsInTemplateMixin",
  26. "dijit/layout/BorderContainer",
  27. "dijit/layout/ContentPane",
  28. "dojo/text!./templates/GraphWidget.html",
  29. "dijit/Toolbar", "dijit/ToolbarSeparator", "dijit/form/Button"
  30. ],
  31. function (declare, aspect, has, dom, domConstruct, domClass,
  32. _LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin, BorderContainer, ContentPane,
  33. template) {
  34. return declare("GraphWidget", [_LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin], {
  35. templateString: template,
  36. baseClass: "GraphWidget",
  37. borderContainer: null,
  38. graphContentPane: null,
  39. _isPluginInstalled: false,
  40. _plugin: null,
  41. eventsRegistered: false,
  42. xgmml: "",
  43. dot: "",
  44. svg: "",
  45. // Known control properties ---
  46. DOT_META_ATTR: "DOT_META_ATTR",
  47. _onClickRefresh: function () {
  48. this.setMessage("Performing Layout...");
  49. this.startLayout("dot");
  50. },
  51. _onClickZoomOrig: function (args) {
  52. this.setScale(100);
  53. this.centerOnItem(0);
  54. },
  55. _onClickZoomAll: function (args) {
  56. this.centerOnItem(0, true);
  57. },
  58. _onClickZoomWidth: function (args) {
  59. this.centerOnItem(0, true, true);
  60. },
  61. onSelectionChanged: function (items) {
  62. },
  63. onDoubleClick: function (globalID) {
  64. },
  65. onLayoutFinished: function () {
  66. },
  67. buildRendering: function (args) {
  68. this.inherited(arguments);
  69. },
  70. postCreate: function (args) {
  71. this.inherited(arguments);
  72. this.borderContainer = dijit.byId(this.id + "BorderContainer");
  73. this.graphContentPane = dijit.byId(this.id + "GraphContentPane");
  74. },
  75. startup: function (args) {
  76. this.inherited(arguments);
  77. this._isPluginInstalled = this.isPluginInstalled();
  78. this.createPlugin();
  79. this.watchStyleChange();
  80. },
  81. resize: function (args) {
  82. this.inherited(arguments);
  83. this.borderContainer.resize();
  84. },
  85. layout: function (args) {
  86. this.inherited(arguments);
  87. },
  88. // Plugin wrapper ---
  89. clear: function () {
  90. if (this._plugin) {
  91. this.xgmml = "";
  92. this.svg = "";
  93. this.dot = "";
  94. this._plugin.clear();
  95. }
  96. },
  97. loadXGMML: function (xgmml, merge) {
  98. this.registerEvents();
  99. if (this._plugin && this.xgmml != xgmml) {
  100. this.setMessage("Loading Data...");
  101. if (merge)
  102. this._plugin.mergeXGMML(xgmml);
  103. else
  104. this._plugin.loadXGMML(xgmml);
  105. this.setMessage("Performing Layout...");
  106. this._plugin.startLayout("dot");
  107. this.xgmml = xgmml;
  108. }
  109. },
  110. mergeXGMML: function (xgmml) {
  111. this.registerEvents();
  112. if (this._plugin && this.xgmml != xgmml) {
  113. this._plugin.mergeXGMML(xgmml);
  114. this.xgmml = xgmml;
  115. }
  116. },
  117. loadDOT: function (dot) {
  118. this.registerEvents();
  119. this.load(dot, "dot");
  120. },
  121. load: function (dot, layout) {
  122. this.registerEvents();
  123. if (this._plugin && this.xgmml != xgmml) {
  124. this.setMessage("Loading Data...");
  125. this._plugin.loadDOT(dot);
  126. this.setMessage("Performing Layout...");
  127. this._plugin.startLayout(layout);
  128. this.xgmml = xgmml;
  129. }
  130. },
  131. setLayout: function (layout) {
  132. if (this._plugin) {
  133. this.setMessage("Performing Layout...");
  134. this._plugin.startLayout(layout);
  135. }
  136. },
  137. centerOn: function (globalID) {
  138. if (this._plugin) {
  139. var item = this._plugin.getItem(globalID);
  140. this._plugin.centerOnItem(item, true);
  141. var items = [item];
  142. this._plugin.setSelected(items, true);
  143. }
  144. },
  145. getVersion: function () {
  146. if (this._plugin) {
  147. return this._plugin.version;
  148. }
  149. return "";
  150. },
  151. getSVG: function () {
  152. return this._plugin.getSVG();
  153. },
  154. getXGMML: function () {
  155. return this.xgmml;
  156. },
  157. localLayout: function(callback) {
  158. var context = this;
  159. require(
  160. ["hpcc/viz"],
  161. function (viz) {
  162. callback(Viz(context.dot, "svg"));
  163. }
  164. );
  165. },
  166. displayProperties: function (globalID, place) {
  167. if (this._plugin) {
  168. var item = this._plugin.getItem(globalID);
  169. var props = this._plugin.getProperties(item);
  170. if (props.id) {
  171. var table = domConstruct.create("h3", {
  172. innerHTML: props.id,
  173. align: "center"
  174. }, place);
  175. delete props.id;
  176. }
  177. if (props.count) {
  178. var table = domConstruct.create("table", { border: 1, cellspacing: 0, width: "100%" }, place);
  179. var tr = domConstruct.create("tr", null, table);
  180. var td = domConstruct.create("td", { innerHTML: "Count" }, tr);
  181. var td = domConstruct.create("td", {
  182. align: "right",
  183. innerHTML: props.count
  184. }, tr);
  185. delete props.count;
  186. domConstruct.create("br", null, place);
  187. }
  188. if (props.max) {
  189. var table = domConstruct.create("table", { border: 1, cellspacing: 0, width: "100%" }, place);
  190. var tr = domConstruct.create("tr", null, table);
  191. domConstruct.create("th", { innerHTML: " " }, tr);
  192. domConstruct.create("th", { innerHTML: "Skew" }, tr);
  193. domConstruct.create("th", { innerHTML: "Node" }, tr);
  194. domConstruct.create("th", { innerHTML: "Rows" }, tr);
  195. tr = domConstruct.create("tr", null, table);
  196. domConstruct.create("td", { innerHTML: "Max" }, tr);
  197. domConstruct.create("td", { innerHTML: props.maxskew }, tr);
  198. domConstruct.create("td", { innerHTML: props.maxEndpoint }, tr);
  199. domConstruct.create("td", { innerHTML: props.max }, tr);
  200. tr = domConstruct.create("tr", null, table);
  201. domConstruct.create("td", { innerHTML: "Min" }, tr);
  202. domConstruct.create("td", { innerHTML: props.minskew }, tr);
  203. domConstruct.create("td", { innerHTML: props.minEndpoint }, tr);
  204. domConstruct.create("td", { innerHTML: props.min }, tr);
  205. delete props.maxskew;
  206. delete props.maxEndpoint;
  207. delete props.max;
  208. delete props.minskew;
  209. delete props.minEndpoint;
  210. delete props.min;
  211. domConstruct.create("br", null, place);
  212. }
  213. if (props.slaves) {
  214. var table = domConstruct.create("table", { border: 1, cellspacing: 0, width: "100%" }, place);
  215. var tr = domConstruct.create("tr", null, table);
  216. domConstruct.create("th", { innerHTML: "Slaves" }, tr);
  217. domConstruct.create("th", { innerHTML: "Started" }, tr);
  218. domConstruct.create("th", { innerHTML: "Stopped" }, tr);
  219. tr = domConstruct.create("tr", null, table);
  220. domConstruct.create("td", { innerHTML: props.slaves }, tr);
  221. domConstruct.create("td", { innerHTML: props.started }, tr);
  222. domConstruct.create("td", { innerHTML: props.stopped }, tr);
  223. delete props.slaves;
  224. delete props.started;
  225. delete props.stopped;
  226. domConstruct.create("br", null, place);
  227. }
  228. var first = true;
  229. var table = {};
  230. var tr = {};
  231. for (key in props) {
  232. if (key[0] == "_")
  233. continue;
  234. if (first) {
  235. first = false;
  236. table = domConstruct.create("table", { border: 1, cellspacing: 0, width: "100%" }, place);
  237. tr = domConstruct.create("tr", null, table);
  238. domConstruct.create("th", { innerHTML: "Property" }, tr);
  239. domConstruct.create("th", { innerHTML: "Value" }, tr);
  240. }
  241. tr = domConstruct.create("tr", null, table);
  242. domConstruct.create("td", { innerHTML: key }, tr);
  243. domConstruct.create("td", { innerHTML: props[key] }, tr);
  244. }
  245. if (first == false) {
  246. domConstruct.create("br", null, place);
  247. }
  248. }
  249. },
  250. isPluginInstalled: function () {
  251. if (has("ie")) {
  252. try {
  253. var o = new ActiveXObject("HPCCSystems.HPCCSystemsGraphViewControl.1");
  254. o = null;
  255. return true;
  256. } catch (e) { }
  257. return false;
  258. } else {
  259. for (var i = 0, p = navigator.plugins, l = p.length; i < l; i++) {
  260. if (p[i].name.indexOf("HPCCSystemsGraphViewControl") > -1) {
  261. return true;
  262. }
  263. }
  264. return false;
  265. }
  266. },
  267. createPlugin: function () {
  268. if (this._plugin == null) {
  269. if (this._isPluginInstalled) {
  270. var pluginID = this.id + "Plugin";
  271. if (has("ie")) {
  272. this.graphContentPane.domNode.innerHTML = '<object '
  273. + 'type="application/x-hpccsystemsgraphviewcontrol" '
  274. + 'id="' + pluginID + '" '
  275. + 'name="' + pluginID + '" '
  276. + 'width="100%" '
  277. + 'height="100%">'
  278. + '</object>';
  279. } else {
  280. this.graphContentPane.domNode.innerHTML = '<embed type="application/x-hpccsystemsgraphviewcontrol" '
  281. + 'id="' + pluginID + '" '
  282. + 'name="' + pluginID + '" '
  283. + 'width="100%" '
  284. + 'height="100%">'
  285. + '</embed>';
  286. }
  287. this._plugin = dom.byId(pluginID);
  288. var context = this;
  289. } else {
  290. domConstruct.create("div", {
  291. innerHTML: "<h4>Graph View</h4>" +
  292. "<p>To enable graph views, please install the Graph View Control plugin:</p>" +
  293. this.getResourceLinks()
  294. }, this.graphContentPane.domNode);
  295. }
  296. }
  297. },
  298. getResourceLinks: function () {
  299. return "<a href=\"http://hpccsystems.com/download/free-community-edition/graph-control\" target=\"_blank\">Binary Installs</a><br/>" +
  300. "<a href=\"https://github.com/hpcc-systems/GraphControl\" target=\"_blank\">Source Code</a><br/><br/>" +
  301. "<a href=\"http://hpccsystems.com\" target=\"_blank\">HPCC Systems</a>"
  302. },
  303. setMessage: function (message) {
  304. if (this._plugin) {
  305. return this._plugin.setMessage(message);
  306. }
  307. return null;
  308. },
  309. getLocalisedXGMML: function (items, depth, distance) {
  310. if (this._plugin) {
  311. return this._plugin.getLocalisedXGMML(items, depth, distance);
  312. }
  313. return null;
  314. },
  315. mergeSVG: function (svg) {
  316. if (this._plugin) {
  317. return this._plugin.mergeSVG(svg);
  318. }
  319. return null;
  320. },
  321. startLayout: function (layout) {
  322. if (this._plugin) {
  323. return this._plugin.startLayout(layout);
  324. }
  325. return null;
  326. },
  327. find: function (findText) {
  328. if (this._plugin) {
  329. return this._plugin.find(findText);
  330. }
  331. return [];
  332. },
  333. findAsGlobalID: function (findText) {
  334. if (this._plugin) {
  335. var items = this.find(findText);
  336. var globalIDs = [];
  337. for (var i = 0; i < items.length; ++i) {
  338. globalIDs.push(this._plugin.getGlobalID(items[i]));
  339. }
  340. return globalIDs;
  341. }
  342. return [];
  343. },
  344. setScale: function(percent) {
  345. if (this._plugin) {
  346. return this._plugin.setScale(percent);
  347. }
  348. return 100;
  349. },
  350. centerOnItem: function (item, scaleToFit, widthOnly) {
  351. if (this._plugin) {
  352. return this._plugin.centerOnItem(item, scaleToFit, widthOnly);
  353. }
  354. return null;
  355. },
  356. centerOnGlobalID: function (globalID, scaleToFit, widthOnly) {
  357. if (this._plugin) {
  358. var item = this._plugin.getItem(globalID);
  359. if (item) {
  360. return this.centerOnItem(item, scaleToFit, widthOnly);
  361. }
  362. }
  363. return null;
  364. },
  365. setSelected: function (items) {
  366. if (this._plugin) {
  367. return this._plugin.setSelected(items);
  368. }
  369. return null;
  370. },
  371. setSelectedAsGlobalID: function (items) {
  372. if (this._plugin) {
  373. return this._plugin.setSelectedAsGlobalID(items);
  374. }
  375. return null;
  376. },
  377. getSelection: function () {
  378. if (this._plugin) {
  379. return this._plugin.getSelection();
  380. }
  381. return [];
  382. },
  383. getSelectionAsGlobalID: function () {
  384. if (this._plugin) {
  385. return this._plugin.getSelectionAsGlobalID();
  386. }
  387. return [];
  388. },
  389. getItem: function (globalID) {
  390. if (this._plugin) {
  391. return this._plugin.getItem(globalID);
  392. }
  393. return null;
  394. },
  395. hide: function () {
  396. if (this._plugin) {
  397. dojo.style(this._plugin, "width", "1px");
  398. dojo.style(this._plugin, "height", "1px");
  399. }
  400. },
  401. show: function () {
  402. if (this._plugin) {
  403. dojo.style(this._plugin, "width", "100%");
  404. dojo.style(this._plugin, "height", "100%");
  405. }
  406. },
  407. watchSplitter: function (splitter) {
  408. if (has("chrome")) {
  409. // Chrome can ignore splitter events
  410. return;
  411. }
  412. var context = this;
  413. dojo.connect(splitter, "_startDrag", function () {
  414. context.hide();
  415. });
  416. dojo.connect(splitter, "_stopDrag", function (evt) {
  417. context.show();
  418. });
  419. },
  420. watchSelect: function (select) {
  421. if (select) {
  422. // Only chrome needs to monitor select drop downs.
  423. var context = this;
  424. select.watch("_opened", function () {
  425. if (select._opened) {
  426. context.hide();
  427. } else {
  428. context.show();
  429. }
  430. });
  431. }
  432. },
  433. watchStyleChange: function () {
  434. // When chrome hides the plugin it destroys it. To prevent this it is just made very small.
  435. if (has("chrome")) {
  436. var watchList = [];
  437. var context = this;
  438. var domNode = this.domNode;
  439. // There are many places that may cause the plugin to be hidden, the possible places are calculated by walking the hierarchy upwards.
  440. while (domNode) {
  441. if (domNode.id) {
  442. watchList[domNode.id] = false;
  443. }
  444. domNode = domNode.parentElement;
  445. }
  446. // Hijack the dojo style class replacement call and monitor for elements in our watchList.
  447. aspect.around(domClass, "replace", function (origFunc) {
  448. return function (node, addStyle, removeStyle) {
  449. if (node.firstChild && (node.firstChild.id in watchList)) {
  450. if (addStyle == "dijitHidden") {
  451. watchList[node.firstChild.id] = true;
  452. dojo.style(node, "width", "1px");
  453. dojo.style(node, "height", "1px");
  454. dojo.style(node.firstChild, "width", "1px");
  455. dojo.style(node.firstChild, "height", "1px");
  456. return;
  457. } else if (addStyle == "dijitVisible" && watchList[node.firstChild.id] == true) {
  458. watchList[node.firstChild.id] = false;
  459. dojo.style(node, "width", "100%");
  460. dojo.style(node, "height", "100%");
  461. dojo.style(node.firstChild, "width", "100%");
  462. dojo.style(node.firstChild, "height", "100%");
  463. return;
  464. }
  465. }
  466. return origFunc(node, addStyle, removeStyle);
  467. }
  468. });
  469. }
  470. },
  471. getDotMetaAttributes: function () {
  472. if (this._plugin && this._plugin.getControlProperty) {
  473. return this._plugin.getControlProperty(this.DOT_META_ATTR);
  474. }
  475. return "";
  476. },
  477. setDotMetaAttributes: function (dotMetaAttr) {
  478. if (this._plugin && this._plugin.setControlProperty) {
  479. this._plugin.setControlProperty(this.DOT_META_ATTR, dotMetaAttr);
  480. }
  481. },
  482. getProperty: function (item, key) {
  483. if (this._plugin && this._plugin.getProperty) {
  484. return this._plugin.getProperty(item, key);
  485. }
  486. return "";
  487. },
  488. setProperty: function (item, key, value) {
  489. if (this._plugin && this._plugin.setProperty) {
  490. this._plugin.setProperty(item, key, value);
  491. }
  492. },
  493. getProperties: function (item) {
  494. if (this._plugin) {
  495. return this._plugin.getProperties(item);
  496. }
  497. return [];
  498. },
  499. getSubgraphsWithProperties: function () {
  500. if (this._plugin) {
  501. return this._plugin.getSubgraphsWithProperties();
  502. }
  503. return [];
  504. },
  505. getVerticesWithProperties: function () {
  506. if (this._plugin) {
  507. return this._plugin.getVerticesWithProperties();
  508. }
  509. return [];
  510. },
  511. getEdgesWithProperties: function () {
  512. if (this._plugin) {
  513. return this._plugin.getEdgesWithProperties();
  514. }
  515. return [];
  516. },
  517. registerEvents: function () {
  518. if (!this.eventsRegistered) {
  519. this.eventsRegistered = true;
  520. var context = this;
  521. this.registerEvent("MouseDoubleClick", function (item) {
  522. context._plugin.centerOnItem(item, true);
  523. context.onDoubleClick(context._plugin.getGlobalID(item));
  524. });
  525. this.registerEvent("LayoutFinished", function () {
  526. context._plugin.centerOnItem(0, true);
  527. context.setMessage('');
  528. context.dot = context._plugin.getDOT();
  529. context.svg = context._plugin.getSVG();
  530. context.onLayoutFinished();
  531. });
  532. this.registerEvent("SelectionChanged", function (items) {
  533. context.onSelectionChanged(items);
  534. });
  535. }
  536. },
  537. registerEvent: function (evt, func) {
  538. if (this._plugin) {
  539. if (this._plugin.attachEvent) {
  540. return this._plugin.attachEvent("on" + evt, func);
  541. } else {
  542. return this._plugin.addEventListener(evt, func, false);
  543. }
  544. }
  545. return false;
  546. }
  547. });
  548. });