source: XIOS/dev/dev_trunk_graph/inputs/vis2.html @ 1688

Last change on this file since 1688 was 1688, checked in by yushan, 5 years ago

dev for trunk with graph. trunk at r1684
File size: 41.4 KB
Line 
1<html>
2
3<!--
4 ##########################################################################
5 Author: Patrick.Brockmann@cea.fr
6 ##########################################################################
7-->
8
9<head>
10
11    <meta charset="utf-8">
12
13    <style type="text/css">
14        body {
15            font-family: arial;
16            font-size: 12px;
17        }
18
19        .row {
20            margin-top: 10px;
21            margin-bottom: 20px;
22        }
23
24        #mynetwork {
25            width: 600px;
26            height: 600px;
27            border: 1px solid lightgray;
28        }
29
30        #mynetwork1 {
31            width: 600px;
32            height: 600px;
33            border: 1px solid lightgray;
34        }
35
36        input {
37            padding: 10px;
38        }
39
40        ul li {
41            display: inline;
42            border: 1px solid gray;
43            padding: 4px;
44            margin: 2px;
45            border-radius: 4px;
46        }
47
48        .btn {
49            margin-top: 5px;
50        }
51
52        /* /!\ Use border-top-color not border-color for firefox compatibility */
53    </style>
54
55</head>
56
57<body>
58    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
59
60    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
61
62    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
63    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
64
65    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
66    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
67
68    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
69    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
70
71    <script type="text/javascript">
72        //######################################################################################################
73        $(document).ready(function() {
74
75            var container = $('#mynetwork')[0];
76            var container1 = $('#mynetwork1')[0];
77
78            //===========================================================
79            $('#file').on('change', function() {
80                var file = $("#file").prop('files')[0];
81                handleFileSelect(file);
82            });
83
84            //===========================================================
85            $('#lastTemporal').on('click', function() {
86                var node = nodes.get(nodeSelected);
87
88                if (node.class == 5) //temporal filter
89                {
90                    var inputnodes = network.getConnectedNodes(node.id, 'from');
91                    var repere = 0;
92                    for (i = 0; i < inputnodes.length; i++) {
93                        repere = Math.max(repere, nodes.get(inputnodes[i]).id);
94                    }
95                    var inputnode = nodes.get(repere);
96                    console.log("last inputnode id = ", inputnode.id);
97
98                    inputnode.hidden = false;
99                    nodes.update(inputnode);
100
101                    var edges_ofinputnode = edges.get(network.getConnectedEdges(inputnode.id));
102                    for (i = 0; i < edges_ofinputnode.length; i++) {
103                        var edge = edges_ofinputnode[i];
104                        if (edge.from == inputnode.id) {
105                            edge.hidden = false;
106                        }
107                    }
108                    edges.update(edges_ofinputnode);
109
110                    var allNode = nodes.get();
111                    nodes.update(allNode);
112
113                }
114
115
116            });
117
118
119            //===========================================================
120            $('#showGraph').on('click', function() {
121                //===== hide all except selected
122                var allNode = nodes.get();
123
124                for (i = 0; i < allNode.length; i++) {
125                    var node = allNode[i];
126
127                    if (node.hidden != true) {
128                        node.hidden = true;
129                    }
130                }
131
132                nodes.update(allNode);
133
134                var node = nodes.get(nodeSelected);
135                node.hidden = false;
136                nodes.update(node);
137
138                //===== enable all parents
139                console.log("showAllParents: allParentsNode = ", allParentsNode);
140                allNode = nodes.get(allParentsNode);
141
142                for (i = 0; i < allNode.length; i++) {
143                    node = allNode[i];
144                    node.font = {
145                        color: 'black'
146                    }
147                    node.hidden = false;
148                    if (node.filled == 1) {
149                        node.color = {
150                            background: redNode.background,
151                            border: redNode.border,
152                            hover: redNode.background,
153                            highlight: {
154                                background: redNode.background,
155                                border: 'blue'
156                            }
157                        }
158                    } else {
159                        node.color = {
160                            background: styleArr[node.class].background,
161                            border: styleArr[node.class].border,
162                            highlight: {
163                                background: styleArr[node.class].background,
164                                border: 'blue'
165                            }
166                        }
167                    }
168                }
169
170                nodes.update(allNode);
171
172                node = nodes.get(nodeSelected);
173                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
174                for (j = 0; j < connectedEdgeArray.length; j++) {
175                    var edge = connectedEdgeArray[j];
176                    if (edge.to == node.id) {
177                        edge.hidden = false;
178                    }
179
180                }
181                edges.update(connectedEdgeArray);
182
183                allNode = nodes.get();
184                nodes.update(allNode);
185
186                //===== enable all children
187                allNode = nodes.get(allChildNode);
188
189                for (i = 0; i < allNode.length; i++) {
190                    node = allNode[i];
191                    node.font = {
192                        color: 'black'
193                    }
194                    node.hidden = false;
195                    if (node.filled == 1) {
196                        node.color = {
197                            background: redNode.background,
198                            border: redNode.border,
199                            hover: redNode.background,
200                            highlight: {
201                                background: redNode.background,
202                                border: 'blue'
203                            }
204                        }
205                    } else {
206                        node.color = {
207                            background: styleArr[node.class].background,
208                            border: styleArr[node.class].border,
209                            highlight: {
210                                background: styleArr[node.class].background,
211                                border: 'blue'
212                            }
213                        }
214                    }
215                }
216
217                nodes.update(allNode);
218
219                node = nodes.get(nodeSelected);
220                connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
221                for (j = 0; j < connectedEdgeArray.length; j++) {
222                    var edge = connectedEdgeArray[j];
223                    if (edge.from == node.id) {
224                        edge.hidden = false;
225                    }
226
227                }
228                edges.update(connectedEdgeArray);
229
230                allNode = nodes.get();
231                nodes.update(allNode);
232
233
234                // network1 = new vis.Network(container1, data);
235
236
237            });
238
239
240
241            //===========================================================
242            $('#disableAll').on('click', function() {
243                var allNode = nodes.get();
244
245                for (i = 0; i < allNode.length; i++) {
246                    var node = allNode[i];
247
248                    if (node.hidden != true) {
249                        node.hidden = true;
250                    }
251                }
252                nodes.update(allNode);
253            });
254
255
256            //===========================================================
257            $('#enableAll').on('click', function() {
258                var allNode = nodes.get();
259
260                for (i = 0; i < allNode.length; i++) {
261                    var node = allNode[i];
262
263                    if (node.hidden != false) {
264                        node.hidden = false;
265                    }
266                }
267                nodes.update(allNode);
268
269                var allEdge = edges.get();
270                for (i = 0; i < allEdge.length; i++) {
271                    var edge = allEdge[i];
272
273                    if (edge.hidden != false) {
274                        edge.hidden = false;
275                    }
276                }
277                edges.update(allEdge);
278
279            });
280
281
282
283            //===========================================================
284            $('#enableInput').on('click', function() {
285                var allNode = nodes.get();
286
287                for (i = 0; i < allNode.length; i++) {
288                    var node = allNode[i];
289
290                    if (node.class == 1) {
291                        node.hidden = false;
292                    }
293                }
294                nodes.update(allNode);
295            });
296
297
298
299            //===========================================================
300            $('#enableOutput').on('click', function() {
301                var allNode = nodes.get();
302
303                for (i = 0; i < allNode.length; i++) {
304                    var node = allNode[i];
305
306                    if (node.class >= 6 || node.filled == 1) {
307                        node.hidden = false;
308                    }
309                }
310                nodes.update(allNode);
311            });
312
313
314            //===========================================================
315            $('#hideNode').on('click', function() {
316                var node = nodes.get(nodeSelected);
317
318                node.color = {
319                    background: transparentNode.background,
320                    border: transparentNode.border,
321                    highlight: {
322                        background: transparentNode.border,
323                        border: 'blue'
324                    }
325                }
326                node.font = {
327                    color: transparentNode.background
328                }
329                nodes.update(node);
330
331                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
332                for (i = 0; i < connectedEdgeArray.length; i++) {
333                    var edge = connectedEdgeArray[i];
334
335                    edge.color = {
336                        color: transparentEdge.color,
337                        highlight: transparentEdge.color,
338                        hover: transparentEdge.color,
339                    }
340                    edge.font = {
341                        size: 0
342                    }
343
344                }
345                edges.update(connectedEdgeArray);
346
347            });
348
349
350            //===========================================================
351            $('#showNode').on('click', function() {
352                var node = nodes.get(nodeSelected);
353
354                node.font = {
355                    color: 'black'
356                }
357                if (node.filled == 1) {
358                    node.color = {
359                        background: redNode.background,
360                        border: redNode.border,
361                        hover: redNode.background,
362                        highlight: {
363                            background: redNode.background,
364                            border: 'blue'
365                        }
366                    }
367                } else {
368                    node.color = {
369                        background: styleArr[node.class].background,
370                        border: styleArr[node.class].border,
371                        highlight: {
372                            background: styleArr[node.class].background,
373                            border: 'blue'
374                        }
375                    }
376                }
377                nodes.update(node);
378
379                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
380                for (i = 0; i < connectedEdgeArray.length; i++) {
381
382                    var edge = connectedEdgeArray[i];
383
384                    edge.color = {
385                        color: 'black',
386                        highlight: 'black',
387                        hover: 'black',
388                    }
389                    edge.font = {
390                        size: 14,
391                    }
392                }
393                edges.update(connectedEdgeArray);
394            });
395
396
397            //===========================================================
398            $('#enableParents').on('click', function() {
399                console.log("enableParents: ", allParentsNode);
400
401                var node = nodes.get(nodeSelected);
402
403                var connectedParents = nodes.get(network.getConnectedNodes(node.id, "from"));
404                console.log("connectedParents = ", connectedParents);
405
406                for (i = 0; i < connectedParents.length; i++) {
407                    var node = connectedParents[i];
408                    node.font = {
409                        color: 'black'
410                    }
411                    node.hidden = false;
412                    if (node.filled == 1) {
413                        node.color = {
414                            background: redNode.background,
415                            border: redNode.border,
416                            hover: redNode.background,
417                            highlight: {
418                                background: redNode.background,
419                                border: 'blue'
420                            }
421                        }
422                    } else {
423                        node.color = {
424                            background: styleArr[node.class].background,
425                            border: styleArr[node.class].border,
426                            highlight: {
427                                background: styleArr[node.class].background,
428                                border: 'blue'
429                            }
430                        }
431                    }
432                }
433                nodes.update(connectedParents);
434            });
435
436
437
438            //===========================================================
439            $('#enableAllParents').on('click', function() {
440                console.log("showAllParents: allParentsNode = ", allParentsNode);
441                var allNode = nodes.get(allParentsNode);
442
443                for (i = 0; i < allNode.length; i++) {
444                    var node = allNode[i];
445                    node.font = {
446                        color: 'black'
447                    }
448                    node.hidden = false;
449                    if (node.filled == 1) {
450                        node.color = {
451                            background: redNode.background,
452                            border: redNode.border,
453                            hover: redNode.background,
454                            highlight: {
455                                background: redNode.background,
456                                border: 'blue'
457                            }
458                        }
459                    } else {
460                        node.color = {
461                            background: styleArr[node.class].background,
462                            border: styleArr[node.class].border,
463                            highlight: {
464                                background: styleArr[node.class].background,
465                                border: 'blue'
466                            }
467                        }
468                    }
469                }
470
471                nodes.update(allNode);
472
473                var node = nodes.get(nodeSelected);
474                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
475                for (j = 0; j < connectedEdgeArray.length; j++) {
476                    var edge = connectedEdgeArray[j];
477                    if (edge.to == node.id) {
478                        edge.hidden = false;
479                    }
480
481                }
482                edges.update(connectedEdgeArray);
483
484                allNode = nodes.get();
485                nodes.update(allNode);
486
487            });
488
489
490
491
492            //===========================================================
493            $('#disableAllParents').on('click', function() {
494                console.log("disableAllParents: ", allParentsNode);
495
496                var node = nodes.get(nodeSelected);
497                node.hidden = true;
498                console.log("node.id = ", node.id, "hidden = ", node.hidden);
499                nodes.update(node);
500
501                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
502                for (j = 0; j < connectedEdgeArray.length; j++) {
503                    var edge = connectedEdgeArray[j];
504                    if (edge.to == node.id) {
505                        edge.hidden = true;
506                    }
507
508                }
509                edges.update(connectedEdgeArray);
510
511                var allNode = nodes.get(allParentsNode);
512                for (i = 0; i < allNode.length; i++) {
513                    var node = allNode[i];
514                    node.hidden = true;
515                }
516                nodes.update(allNode);
517
518                for (i = 0; i < allNode.length; i++) {
519                    var node = allNode[i];
520
521                    var cNodes = nodes.get(network.getConnectedNodes(node.id, 'to'));
522                    for (j = 0; j < cNodes.length; j++) {
523                        var cnode = cNodes[j];
524
525                        if (cnode.hidden != true) {
526                            node.hidden = false;
527                            nodes.update(node);
528                            break;
529                        }
530                    }
531                }
532                nodes.update(allNode);
533
534                node = nodes.get(nodeSelected);
535                node.hidden = false;
536                console.log("node.id = ", node.id, "hidden = ", node.hidden);
537                nodes.update(node);
538
539                allNode = nodes.get();
540                nodes.update(allNode);
541            });
542
543
544            //===========================================================
545            $('#enableChild').on('click', function() {
546                console.log("enableChild: ", allChildNode);
547                var node = nodes.get(nodeSelected);
548
549                var connectedChild = nodes.get(network.getConnectedNodes(node.id, "to"));
550                console.log("connectedChild = ", connectedChild);
551
552                for (i = 0; i < connectedChild.length; i++) {
553                    var node = connectedChild[i];
554                    node.font = {
555                        color: 'black'
556                    }
557                    node.hidden = false;
558                    if (node.filled == 1) {
559                        node.color = {
560                            background: redNode.background,
561                            border: redNode.border,
562                            hover: redNode.background,
563                            highlight: {
564                                background: redNode.background,
565                                border: 'blue'
566                            }
567                        }
568                    } else {
569                        node.color = {
570                            background: styleArr[node.class].background,
571                            border: styleArr[node.class].border,
572                            highlight: {
573                                background: styleArr[node.class].background,
574                                border: 'blue'
575                            }
576                        }
577                    }
578                }
579                nodes.update(connectedChild);
580            });
581
582
583
584            //===========================================================
585            $('#enableAllChild').on('click', function() {
586                console.log("enableAllChild: ", allChildNode);
587
588                var node = nodes.get(nodeSelected);
589                node.hidden = false;
590                console.log("node.id = ", node.id, "hidden = ", node.hidden);
591                nodes.update(node);
592
593                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
594                for (j = 0; j < connectedEdgeArray.length; j++) {
595                    var edge = connectedEdgeArray[j];
596                    if (edge.from == node.id) {
597                        edge.hidden = false;
598                    }
599
600                }
601                edges.update(connectedEdgeArray);
602
603
604                var allNode = nodes.get(allChildNode);
605
606                for (i = 0; i < allNode.length; i++) {
607                    node = allNode[i];
608                    node.font = {
609                        color: 'black'
610                    }
611                    node.hidden = false;
612                    if (node.filled == 1) {
613                        node.color = {
614                            background: redNode.background,
615                            border: redNode.border,
616                            hover: redNode.background,
617                            highlight: {
618                                background: redNode.background,
619                                border: 'blue'
620                            }
621                        }
622                    } else {
623                        node.color = {
624                            background: styleArr[node.class].background,
625                            border: styleArr[node.class].border,
626                            highlight: {
627                                background: styleArr[node.class].background,
628                                border: 'blue'
629                            }
630                        }
631                    }
632                }
633
634                nodes.update(allNode);
635
636                allNode = nodes.get();
637                nodes.update(allNode);
638
639            });
640
641            //===========================================================
642            $('#disableAllChild').on('click', function() {
643                console.log("disableAllChind: ", allChildNode);
644                var node = nodes.get(nodeSelected);
645                node.hidden = true;
646                console.log("node.id = ", node.id, "hidden = ", node.hidden);
647                nodes.update(node);
648
649                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
650                for (j = 0; j < connectedEdgeArray.length; j++) {
651                    var edge = connectedEdgeArray[j];
652                    if (edge.from == node.id) {
653                        edge.hidden = true;
654                    }
655
656                }
657                edges.update(connectedEdgeArray);
658
659                var allNode = nodes.get(allChildNode);
660                for (i = 0; i < allNode.length; i++) {
661                    var node = allNode[i];
662                    node.hidden = true;
663                }
664                nodes.update(allNode);
665
666                for (i = 0; i < allNode.length; i++) {
667                    var node = allNode[i];
668
669                    var pNodes = nodes.get(network.getConnectedNodes(node.id, 'from'));
670                    for (j = 0; j < pNodes.length; j++) {
671                        var pnode = pNodes[j];
672                        // console.log("node.id = ", node.id, "node.hidden = ", node.hidden, "pnode.id=", pnode.id, "pnode.hidden = ", pnode.hidden);
673
674                        if (pnode.hidden != true) {
675                            node.hidden = false;
676                            nodes.update(node);
677                            break;
678                        }
679                    }
680                    // console.log("node.id = ", node.id, "node.hidden = ", node.hidden);
681                }
682                nodes.update(allNode);
683
684                node = nodes.get(nodeSelected);
685                node.hidden = false;
686                console.log("node.id = ", node.id, "hidden = ", node.hidden);
687                nodes.update(node);
688
689                allNode = nodes.get();
690                nodes.update(allNode);
691            });
692
693            //===========================================================
694            var shapeArr = [
695                'box',
696                'ellipse',
697                'ellipse',
698                'ellipse',
699                'box',
700                'ellipse'
701            ];
702
703            var styleArr = {
704                1: {
705                    background: 'LightSlateGray',
706                    border: 'SlateGray',
707                    shape: 'box'
708                },
709                2: {
710                    background: 'Khaki',
711                    border: 'DarkKhaki',
712                    shape: 'ellipse'
713                },
714                3: {
715                    background: 'Orchid',
716                    border: 'DarkOrchid',
717                    shape: 'ellipse'
718                },
719                4: {
720                    background: 'Orange',
721                    border: 'DarkOrange',
722                    shape: 'ellipse'
723                },
724                5: {
725                    background: 'YellowGreen',
726                    border: 'OliveDrab',
727                    shape: 'box'
728                },
729                6: {
730                    background: 'LightGray',
731                    border: 'Gray',
732                    shape: 'ellipse'
733                },
734                7: {
735                    background: 'LightBlue',
736                    border: 'Gray',
737                    shape: 'ellipse'
738                }
739            }
740
741            var transparentNode = {
742                background: 'white',
743                border: 'LightGray'
744            }
745
746            var redNode = {
747                background: 'Red',
748                border: 'DarkRed'
749            }
750
751            var transparentEdge = {
752                color: '#00000000',
753                font: 0
754            }
755
756            var nbClass = shapeArr.length;
757
758            //===========================================================
759            var node;
760            var nodes;
761            var edges;
762            var network;
763
764
765            //==================================================
766            var allParentsNode = [];
767            var allChildNode = [];
768
769            var allParentsEdge = [];
770            var allChildEdge = [];
771
772            //===========================================================
773            function handleFileSelect(file) {
774
775                if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
776                    alert('The File APIs are not fully supported in this browser.');
777                    return;
778                }
779
780
781                var reader = new FileReader();
782                var json;
783
784                reader.onload = (function(file) {
785                    return function(e) {
786                        //console.log('e readAsText = ', e);
787                        //console.log('e readAsText target = ', e.target);
788                        try {
789                            //==================================================
790                            json = JSON.parse(e.target.result);
791                            //alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json));
792
793                            //==================================================
794                            json.nodes.forEach(function(node, index) {
795                                var classVal = node.class;
796                                var typeVal = node.type;
797                                var entryVal = node.entry;
798                                var attrVal = node.attributes;
799                                var inputsVal = node.inputs;
800                                var labelVal = node.label;
801                                var cidVal = node.cid;
802                                var distVal = node.distance;
803                                var nbinVal = node.nbin;
804                                var nboutVal = node.nbout;
805
806                                node.color = {
807                                    background: styleArr[classVal].background,
808                                    border: styleArr[classVal].border,
809                                    hover: styleArr[classVal].background,
810                                    highlight: {
811                                        background: styleArr[classVal].background,
812                                        border: 'blue'
813                                    }
814                                }
815
816                                node.shape = styleArr[classVal].shape;
817
818                                if (node.class == 1 || node.class >= 6)
819                                    node.title = "node id = " + node.id + "</br>" + labelVal + "</br>field attributes : </br>" + attrVal + "</br>filter entry nb = " + entryVal + "</br>cid = " + cidVal + "</br>distance = " + distVal;
820                                else if (node.class == 5)
821                                    node.title = "node id = " + node.id + "</br>" + labelVal + "</br>filter type = " + typeVal + "</br> entry nb = " + entryVal + "</br> inputs_complete = " + inputsVal + "</br>cid = " + cidVal + "</br>distance = " + distVal;
822                                else
823                                    node.title = "node id = " + node.id + "</br>" + labelVal + "</br>filter entry nb = " + entryVal + "</br>cid = " + cidVal + "</br>distance = " + distVal;
824
825                                if (node.filled == 1) {
826                                    node.title += "</br></br> filter has no child!!!</br>" + "</br>field attributes : </br>" + attrVal + "</br> entry nb = " + entryVal;
827                                    node.color = {
828                                        background: 'Red',
829                                        border: 'DarkRed',
830                                        hover: 'Red',
831                                        highlight: {
832                                            background: 'Red',
833                                            border: 'blue'
834                                        }
835                                    }
836                                }
837
838                                node.level = distVal;
839
840                                if (node.class >= 6 || node.filled == 1) node.hidden = true;
841                                else node.hidden = true;
842
843                            });
844
845                            //==================================================
846                            json.edges.forEach(function(node, index) {
847                                var dateVal = node.date;
848                                var fidVal = node.fid;
849                                var fnameVal = node.fname;
850                                var gidVal = node.gid;
851                                var attVal = node.attributes;
852                                var idVal = node.id
853
854                                node.title = "id = " + idVal + "</br>field attributes : </br>" + attVal + "</br> date = " + dateVal;
855
856                            });
857
858                            //==================================================
859                            nodes = new vis.DataSet();
860                            nodes.add(json.nodes);
861
862                            edges = new vis.DataSet();
863                            edges.add(json.edges);
864
865                            //==================================================
866                            var data = {
867                                nodes: nodes,
868                                edges: edges
869                            };
870
871                            //==================================================
872                            var options = {
873                                edges: {
874                                    smooth: false,
875                                    arrows: 'to',
876                                    font: {
877                                        align: 'middle',
878                                        size: 14,
879                                    },
880                                    color: {
881                                        color: 'black',
882                                        highlight: 'black',
883                                        hover: 'black',
884                                    }
885                                },
886                                physics: {
887                                    enabled: false
888                                },
889                                nodes: {
890                                    borderWidth: 2
891                                },
892                                interaction: {
893                                    hover: true
894                                },
895                                layout: {
896                                    hierarchical: {
897                                        enabled: true,
898                                        direction: "LR",
899                                        sortMethod: "direct",
900                                        levelSeparation: 300,
901                                        nodeSpacing: 80,
902                                        treeSpacing: 100,
903                                        blockShifting: true,
904                                        edgeMinimization: true
905                                    }
906                                },
907
908
909                            };
910
911                            //==================================================
912                            network = new vis.Network(container, data, options);
913                            network1 = new vis.Network(container1, data, options);
914                           
915
916
917
918                            //==================================================
919                            Array.prototype.unique = function() {
920                                var a = this.concat();
921                                for (var i = 0; i < a.length; ++i) {
922                                    for (var j = i + 1; j < a.length; ++j) {
923                                        if (a[i] === a[j])
924                                            a.splice(j--, 1);
925                                    }
926                                }
927                                return a;
928                            };
929
930                            //==================================================
931                            function findAllParents(nodesArray) {
932                                if (nodesArray.length == 0) {
933                                    return 1;
934                                }
935                                var parentsArray = network.getConnectedNodes(nodesArray[0], 'from');
936                                //console.log('node ', nodesArray[0], 'has ', parentsArray);
937                                nodesArray = nodesArray.concat(parentsArray).unique();
938                                //console.log('---> ', nodesArray);
939                                allParentsNode = allParentsNode.concat(nodesArray[0]).unique();
940
941
942                                nodesArray.splice(0, 1);
943                                return findAllParents(nodesArray);
944                            }
945
946                            //==================================================
947                            function findAllChild(nodesArray) {
948                                if (nodesArray.length == 0) {
949                                    return 1;
950                                }
951                                var childArray = network.getConnectedNodes(nodesArray[0], 'to');
952                                //console.log('node ', nodesArray[0], 'has ', childArray);
953                                nodesArray = nodesArray.concat(childArray).unique();
954                                //console.log('---> ', nodesArray);
955                                allChildNode = allChildNode.concat(nodesArray[0]).unique();
956                                nodesArray.splice(0, 1);
957                                return findAllChild(nodesArray);
958                            }
959
960                            //==================================================
961                            function getEdgeConnections(node) {
962                                var connectedEdgeArray = network.getConnectedEdges(node);
963                            }
964
965                            //==================================================
966                            network.on("click", function(params) {
967                                params.event = "[original event]";
968                                console.log('__________________________');
969                                nodeSelected = this.getNodeAt(params.pointer.DOM);
970                                if (nodeSelected === undefined) return 0;
971
972                                var node = nodes.get(nodeSelected);
973
974                                var connectedChild = nodes.get(network.getConnectedNodes(node.id, "to"));
975                                console.log('------->', connectedChild.length);
976                                if (connectedChild.length == 0) {
977                                    $('#enableAllChild').attr("disabled", true);
978                                } else {
979                                    $('#enableAllChild').attr("disabled", false);
980                                }
981
982                                var connectedEdgeArray = getEdgeConnections(nodeSelected);
983
984                                //--------------------------
985                                var parentsArray = network.getConnectedNodes(nodeSelected, 'from');
986
987
988                                allParentsNode = [nodeSelected];
989                                findAllParents(parentsArray);
990                                // remove selected node
991                                var index = allParentsNode.indexOf(nodeSelected);
992                                if (index !== -1) allParentsNode.splice(index, 1);
993                                console.log('Final parents: ', allParentsNode);
994
995
996                                //--------------------------
997                                var node = this.getNodeAt(params.pointer.DOM);
998                                var childArray = network.getConnectedNodes(nodeSelected, 'to');
999
1000
1001                                allChildNode = [nodeSelected];
1002                                findAllChild(childArray);
1003                                // remove selected node
1004                                var index = allChildNode.indexOf(nodeSelected);
1005                                if (index !== -1) allChildNode.splice(index, 1);
1006                                console.log('Final child: ', allChildNode);
1007
1008
1009                                //--------------------------
1010                            });
1011
1012                        } catch (ex) {
1013                            alert('ex when trying to parse json = ' + ex);
1014                        }
1015                    }
1016                })(file);
1017
1018                reader.readAsText(file);
1019
1020            }
1021
1022            //######################################################################################################
1023        });
1024    </script>
1025
1026    <div class="container">
1027
1028        <div class="row">
1029            <label class="btn btn-primary" for="file">
1030                <input type="file" id="file" style="display:none" onchange="$('#upload-file-info').html(this.files[0].name)">
1031                Load a JSON XIOS file
1032            </label>
1033            <button type="button" class="btn btn-default disabled" id="upload-file-info">...</button>
1034        </div>
1035
1036        <div class="row">
1037
1038            <div class="btn-group">
1039                <button type="button" class="btn btn-success" id="showNode">Show node</button>
1040                <button type="button" class="btn btn-success" id="hideNode">Hide node</button>
1041            </div>
1042
1043            <div class="btn-group">
1044                <button type="button" class="btn btn-success" id="enableAll">Enable all</button>
1045                <button type="button" class="btn btn-success" id="disableAll">Disable all</button>
1046            </div>
1047
1048            <div class="btn-group">
1049                <button type="button" class="btn btn-success" id="enableParents">Enable parents</button>
1050                <button type="button" class="btn btn-success" id="enableChild">Enable children</button>
1051            </div>
1052
1053            <div class="btn-group">
1054                <button type="button" class="btn btn-success" id="enableAllParents">Enable all parents</button>
1055                <button type="button" class="btn btn-success" id="disableAllParents">Disable all parents</button>
1056            </div>
1057
1058            <div class="btn-group">
1059                <button type="button" class="btn btn-success" id="enableAllChild">Enable all children</button>
1060                <button type="button" class="btn btn-success" id="disableAllChild">Disable all children</button>
1061            </div>
1062
1063            <button type="button" class="btn btn-success" id="enableInput">Enable input</button>
1064            <button type="button" class="btn btn-success" id="enableOutput">Enable output</button>
1065
1066            <button type="button" class="btn btn-success" id="lastTemporal">Enable last temporal input</button>
1067            <button type="button" class="btn btn-success" id="showGraph">Show subgraph (and hide other)</button>
1068
1069
1070        </div>
1071
1072        <div class="row">
1073            <div id="mynetwork"></div>
1074            <div id="mynetwork1"></div>
1075        </div>
1076
1077</body>
1078
1079</html>
Note: See TracBrowser for help on using the repository browser.