source: XIOS/dev/dev_trunk_omp/inputs/vis2.html @ 1685

Last change on this file since 1685 was 1685, checked in by yushan, 2 years ago

dev for graph

File size: 41.1 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                allNode = nodes.get();
220                nodes.update(allNode);
221
222
223                // network1 = new vis.Network(container1, data);
224
225
226            });
227
228
229
230            //===========================================================
231            $('#disableAll').on('click', function() {
232                var allNode = nodes.get();
233
234                for (i = 0; i < allNode.length; i++) {
235                    var node = allNode[i];
236
237                    if (node.hidden != true) {
238                        node.hidden = true;
239                    }
240                }
241                nodes.update(allNode);
242            });
243
244
245            //===========================================================
246            $('#enableAll').on('click', function() {
247                var allNode = nodes.get();
248
249                for (i = 0; i < allNode.length; i++) {
250                    var node = allNode[i];
251
252                    if (node.hidden != false) {
253                        node.hidden = false;
254                    }
255                }
256                nodes.update(allNode);
257
258                var allEdge = edges.get();
259                for (i = 0; i < allEdge.length; i++) {
260                    var edge = allEdge[i];
261
262                    if (edge.hidden != false) {
263                        edge.hidden = false;
264                    }
265                }
266                edges.update(allEdge);
267
268            });
269
270
271
272            //===========================================================
273            $('#enableInput').on('click', function() {
274                var allNode = nodes.get();
275
276                for (i = 0; i < allNode.length; i++) {
277                    var node = allNode[i];
278
279                    if (node.class == 1) {
280                        node.hidden = false;
281                    }
282                }
283                nodes.update(allNode);
284            });
285
286
287
288            //===========================================================
289            $('#enableOutput').on('click', function() {
290                var allNode = nodes.get();
291
292                for (i = 0; i < allNode.length; i++) {
293                    var node = allNode[i];
294
295                    if (node.class >= 6 || node.filled == 1) {
296                        node.hidden = false;
297                    }
298                }
299                nodes.update(allNode);
300            });
301
302
303            //===========================================================
304            $('#hideNode').on('click', function() {
305                var node = nodes.get(nodeSelected);
306
307                node.color = {
308                    background: transparentNode.background,
309                    border: transparentNode.border,
310                    highlight: {
311                        background: transparentNode.border,
312                        border: 'blue'
313                    }
314                }
315                node.font = {
316                    color: transparentNode.background
317                }
318                nodes.update(node);
319
320                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
321                for (i = 0; i < connectedEdgeArray.length; i++) {
322                    var edge = connectedEdgeArray[i];
323
324                    edge.color = {
325                        color: transparentEdge.color,
326                        highlight: transparentEdge.color,
327                        hover: transparentEdge.color,
328                    }
329                    edge.font = {
330                        size: 0
331                    }
332
333                }
334                edges.update(connectedEdgeArray);
335
336            });
337
338
339            //===========================================================
340            $('#showNode').on('click', function() {
341                var node = nodes.get(nodeSelected);
342
343                node.font = {
344                    color: 'black'
345                }
346                if (node.filled == 1) {
347                    node.color = {
348                        background: redNode.background,
349                        border: redNode.border,
350                        hover: redNode.background,
351                        highlight: {
352                            background: redNode.background,
353                            border: 'blue'
354                        }
355                    }
356                } else {
357                    node.color = {
358                        background: styleArr[node.class].background,
359                        border: styleArr[node.class].border,
360                        highlight: {
361                            background: styleArr[node.class].background,
362                            border: 'blue'
363                        }
364                    }
365                }
366                nodes.update(node);
367
368                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
369                for (i = 0; i < connectedEdgeArray.length; i++) {
370
371                    var edge = connectedEdgeArray[i];
372
373                    edge.color = {
374                        color: 'black',
375                        highlight: 'black',
376                        hover: 'black',
377                    }
378                    edge.font = {
379                        size: 14,
380                    }
381                }
382                edges.update(connectedEdgeArray);
383            });
384
385
386            //===========================================================
387            $('#enableParents').on('click', function() {
388                console.log("enableParents: ", allParentsNode);
389
390                var node = nodes.get(nodeSelected);
391
392                var connectedParents = nodes.get(network.getConnectedNodes(node.id, "from"));
393                console.log("connectedParents = ", connectedParents);
394
395                for (i = 0; i < connectedParents.length; i++) {
396                    var node = connectedParents[i];
397                    node.font = {
398                        color: 'black'
399                    }
400                    node.hidden = false;
401                    if (node.filled == 1) {
402                        node.color = {
403                            background: redNode.background,
404                            border: redNode.border,
405                            hover: redNode.background,
406                            highlight: {
407                                background: redNode.background,
408                                border: 'blue'
409                            }
410                        }
411                    } else {
412                        node.color = {
413                            background: styleArr[node.class].background,
414                            border: styleArr[node.class].border,
415                            highlight: {
416                                background: styleArr[node.class].background,
417                                border: 'blue'
418                            }
419                        }
420                    }
421                }
422                nodes.update(connectedParents);
423            });
424
425
426
427            //===========================================================
428            $('#enableAllParents').on('click', function() {
429                console.log("showAllParents: allParentsNode = ", allParentsNode);
430                var allNode = nodes.get(allParentsNode);
431
432                for (i = 0; i < allNode.length; i++) {
433                    var node = allNode[i];
434                    node.font = {
435                        color: 'black'
436                    }
437                    node.hidden = false;
438                    if (node.filled == 1) {
439                        node.color = {
440                            background: redNode.background,
441                            border: redNode.border,
442                            hover: redNode.background,
443                            highlight: {
444                                background: redNode.background,
445                                border: 'blue'
446                            }
447                        }
448                    } else {
449                        node.color = {
450                            background: styleArr[node.class].background,
451                            border: styleArr[node.class].border,
452                            highlight: {
453                                background: styleArr[node.class].background,
454                                border: 'blue'
455                            }
456                        }
457                    }
458                }
459
460                nodes.update(allNode);
461
462                var node = nodes.get(nodeSelected);
463                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
464                for (j = 0; j < connectedEdgeArray.length; j++) {
465                    var edge = connectedEdgeArray[j];
466                    if (edge.to == node.id) {
467                        edge.hidden = false;
468                    }
469
470                }
471                edges.update(connectedEdgeArray);
472
473                allNode = nodes.get();
474                nodes.update(allNode);
475
476            });
477
478
479
480
481            //===========================================================
482            $('#disableAllParents').on('click', function() {
483                console.log("disableAllParents: ", allParentsNode);
484
485                var node = nodes.get(nodeSelected);
486                node.hidden = true;
487                console.log("node.id = ", node.id, "hidden = ", node.hidden);
488                nodes.update(node);
489
490                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
491                for (j = 0; j < connectedEdgeArray.length; j++) {
492                    var edge = connectedEdgeArray[j];
493                    if (edge.to == node.id) {
494                        edge.hidden = true;
495                    }
496
497                }
498                edges.update(connectedEdgeArray);
499
500                var allNode = nodes.get(allParentsNode);
501                for (i = 0; i < allNode.length; i++) {
502                    var node = allNode[i];
503                    node.hidden = true;
504                }
505                nodes.update(allNode);
506
507                for (i = 0; i < allNode.length; i++) {
508                    var node = allNode[i];
509
510                    var cNodes = nodes.get(network.getConnectedNodes(node.id, 'to'));
511                    for (j = 0; j < cNodes.length; j++) {
512                        var cnode = cNodes[j];
513
514                        if (cnode.hidden != true) {
515                            node.hidden = false;
516                            nodes.update(node);
517                            break;
518                        }
519                    }
520                }
521                nodes.update(allNode);
522
523                node = nodes.get(nodeSelected);
524                node.hidden = false;
525                console.log("node.id = ", node.id, "hidden = ", node.hidden);
526                nodes.update(node);
527
528                allNode = nodes.get();
529                nodes.update(allNode);
530            });
531
532
533            //===========================================================
534            $('#enableChild').on('click', function() {
535                console.log("enableChild: ", allChildNode);
536                var node = nodes.get(nodeSelected);
537
538                var connectedChild = nodes.get(network.getConnectedNodes(node.id, "to"));
539                console.log("connectedChild = ", connectedChild);
540
541                for (i = 0; i < connectedChild.length; i++) {
542                    var node = connectedChild[i];
543                    node.font = {
544                        color: 'black'
545                    }
546                    node.hidden = false;
547                    if (node.filled == 1) {
548                        node.color = {
549                            background: redNode.background,
550                            border: redNode.border,
551                            hover: redNode.background,
552                            highlight: {
553                                background: redNode.background,
554                                border: 'blue'
555                            }
556                        }
557                    } else {
558                        node.color = {
559                            background: styleArr[node.class].background,
560                            border: styleArr[node.class].border,
561                            highlight: {
562                                background: styleArr[node.class].background,
563                                border: 'blue'
564                            }
565                        }
566                    }
567                }
568                nodes.update(connectedChild);
569            });
570
571
572
573            //===========================================================
574            $('#enableAllChild').on('click', function() {
575                console.log("enableAllChild: ", allChildNode);
576
577                var node = nodes.get(nodeSelected);
578                node.hidden = false;
579                console.log("node.id = ", node.id, "hidden = ", node.hidden);
580                nodes.update(node);
581
582                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
583                for (j = 0; j < connectedEdgeArray.length; j++) {
584                    var edge = connectedEdgeArray[j];
585                    if (edge.from == node.id) {
586                        edge.hidden = false;
587                    }
588
589                }
590                edges.update(connectedEdgeArray);
591
592
593                var allNode = nodes.get(allChildNode);
594
595                for (i = 0; i < allNode.length; i++) {
596                    node = allNode[i];
597                    node.font = {
598                        color: 'black'
599                    }
600                    node.hidden = false;
601                    if (node.filled == 1) {
602                        node.color = {
603                            background: redNode.background,
604                            border: redNode.border,
605                            hover: redNode.background,
606                            highlight: {
607                                background: redNode.background,
608                                border: 'blue'
609                            }
610                        }
611                    } else {
612                        node.color = {
613                            background: styleArr[node.class].background,
614                            border: styleArr[node.class].border,
615                            highlight: {
616                                background: styleArr[node.class].background,
617                                border: 'blue'
618                            }
619                        }
620                    }
621                }
622
623                nodes.update(allNode);
624
625                allNode = nodes.get();
626                nodes.update(allNode);
627
628            });
629
630            //===========================================================
631            $('#disableAllChild').on('click', function() {
632                console.log("disableAllChind: ", allChildNode);
633                var node = nodes.get(nodeSelected);
634                node.hidden = true;
635                console.log("node.id = ", node.id, "hidden = ", node.hidden);
636                nodes.update(node);
637
638                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
639                for (j = 0; j < connectedEdgeArray.length; j++) {
640                    var edge = connectedEdgeArray[j];
641                    if (edge.from == node.id) {
642                        edge.hidden = true;
643                    }
644
645                }
646                edges.update(connectedEdgeArray);
647
648                var allNode = nodes.get(allChildNode);
649                for (i = 0; i < allNode.length; i++) {
650                    var node = allNode[i];
651                    node.hidden = true;
652                }
653                nodes.update(allNode);
654
655                for (i = 0; i < allNode.length; i++) {
656                    var node = allNode[i];
657
658                    var pNodes = nodes.get(network.getConnectedNodes(node.id, 'from'));
659                    for (j = 0; j < pNodes.length; j++) {
660                        var pnode = pNodes[j];
661                        // console.log("node.id = ", node.id, "node.hidden = ", node.hidden, "pnode.id=", pnode.id, "pnode.hidden = ", pnode.hidden);
662
663                        if (pnode.hidden != true) {
664                            node.hidden = false;
665                            nodes.update(node);
666                            break;
667                        }
668                    }
669                    // console.log("node.id = ", node.id, "node.hidden = ", node.hidden);
670                }
671                nodes.update(allNode);
672
673                node = nodes.get(nodeSelected);
674                node.hidden = false;
675                console.log("node.id = ", node.id, "hidden = ", node.hidden);
676                nodes.update(node);
677
678                allNode = nodes.get();
679                nodes.update(allNode);
680            });
681
682            //===========================================================
683            var shapeArr = [
684                'box',
685                'ellipse',
686                'ellipse',
687                'ellipse',
688                'box',
689                'ellipse'
690            ];
691
692            var styleArr = {
693                1: {
694                    background: 'LightSlateGray',
695                    border: 'SlateGray',
696                    shape: 'box'
697                },
698                2: {
699                    background: 'Khaki',
700                    border: 'DarkKhaki',
701                    shape: 'ellipse'
702                },
703                3: {
704                    background: 'Orchid',
705                    border: 'DarkOrchid',
706                    shape: 'ellipse'
707                },
708                4: {
709                    background: 'Orange',
710                    border: 'DarkOrange',
711                    shape: 'ellipse'
712                },
713                5: {
714                    background: 'YellowGreen',
715                    border: 'OliveDrab',
716                    shape: 'box'
717                },
718                6: {
719                    background: 'LightGray',
720                    border: 'Gray',
721                    shape: 'ellipse'
722                },
723                7: {
724                    background: 'LightBlue',
725                    border: 'Gray',
726                    shape: 'ellipse'
727                }
728            }
729
730            var transparentNode = {
731                background: 'white',
732                border: 'LightGray'
733            }
734
735            var redNode = {
736                background: 'Red',
737                border: 'DarkRed'
738            }
739
740            var transparentEdge = {
741                color: '#00000000',
742                font: 0
743            }
744
745            var nbClass = shapeArr.length;
746
747            //===========================================================
748            var node;
749            var nodes;
750            var edges;
751            var network;
752
753
754            //==================================================
755            var allParentsNode = [];
756            var allChildNode = [];
757
758            var allParentsEdge = [];
759            var allChildEdge = [];
760
761            //===========================================================
762            function handleFileSelect(file) {
763
764                if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
765                    alert('The File APIs are not fully supported in this browser.');
766                    return;
767                }
768
769
770                var reader = new FileReader();
771                var json;
772
773                reader.onload = (function(file) {
774                    return function(e) {
775                        //console.log('e readAsText = ', e);
776                        //console.log('e readAsText target = ', e.target);
777                        try {
778                            //==================================================
779                            json = JSON.parse(e.target.result);
780                            //alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json));
781
782                            //==================================================
783                            json.nodes.forEach(function(node, index) {
784                                var classVal = node.class;
785                                var typeVal = node.type;
786                                var entryVal = node.entry;
787                                var attrVal = node.attributes;
788                                var inputsVal = node.inputs;
789                                var labelVal = node.label;
790                                var cidVal = node.cid;
791                                var distVal = node.distance;
792                                var nbinVal = node.nbin;
793                                var nboutVal = node.nbout;
794
795                                node.color = {
796                                    background: styleArr[classVal].background,
797                                    border: styleArr[classVal].border,
798                                    hover: styleArr[classVal].background,
799                                    highlight: {
800                                        background: styleArr[classVal].background,
801                                        border: 'blue'
802                                    }
803                                }
804
805                                node.shape = styleArr[classVal].shape;
806
807                                if (node.class == 1 || node.class >= 6)
808                                    node.title = "node id = " + node.id + "</br>" + labelVal + "</br>field attributes : </br>" + attrVal + "</br>filter entry nb = " + entryVal + "</br>cid = " + cidVal + "</br>distance = " + distVal;
809                                else if (node.class == 5)
810                                    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;
811                                else
812                                    node.title = "node id = " + node.id + "</br>" + labelVal + "</br>filter entry nb = " + entryVal + "</br>cid = " + cidVal + "</br>distance = " + distVal;
813
814                                if (node.filled == 1) {
815                                    node.title += "</br></br> filter has no child!!!</br>" + "</br>field attributes : </br>" + attrVal + "</br> entry nb = " + entryVal;
816                                    node.color = {
817                                        background: 'Red',
818                                        border: 'DarkRed',
819                                        hover: 'Red',
820                                        highlight: {
821                                            background: 'Red',
822                                            border: 'blue'
823                                        }
824                                    }
825                                }
826
827                                node.level = distVal;
828
829                                if (node.class >= 6 || node.filled == 1) node.hidden = true;
830                                else node.hidden = true;
831
832                            });
833
834                            //==================================================
835                            json.edges.forEach(function(node, index) {
836                                var dateVal = node.date;
837                                var fidVal = node.fid;
838                                var fnameVal = node.fname;
839                                var gidVal = node.gid;
840                                var attVal = node.attributes;
841                                var idVal = node.id
842
843                                node.title = "id = " + idVal + "</br>field attributes : </br>" + attVal + "</br> date = " + dateVal;
844
845                            });
846
847                            //==================================================
848                            nodes = new vis.DataSet();
849                            nodes.add(json.nodes);
850
851                            edges = new vis.DataSet();
852                            edges.add(json.edges);
853
854                            //==================================================
855                            var data = {
856                                nodes: nodes,
857                                edges: edges
858                            };
859
860                            //==================================================
861                            var options = {
862                                edges: {
863                                    smooth: false,
864                                    arrows: 'to',
865                                    font: {
866                                        align: 'middle',
867                                        size: 14,
868                                    },
869                                    color: {
870                                        color: 'black',
871                                        highlight: 'black',
872                                        hover: 'black',
873                                    }
874                                },
875                                physics: {
876                                    enabled: false
877                                },
878                                nodes: {
879                                    borderWidth: 2
880                                },
881                                interaction: {
882                                    hover: true
883                                },
884                                layout: {
885                                    hierarchical: {
886                                        enabled: true,
887                                        direction: "LR",
888                                        sortMethod: "direct",
889                                        levelSeparation: 300,
890                                        nodeSpacing: 80,
891                                        treeSpacing: 100,
892                                        blockShifting: true,
893                                        edgeMinimization: true
894                                    }
895                                },
896
897                                joinCondition: function(nodeOptions) {
898                                    return nodeOptions.cid === 2;
899
900                                }
901
902
903                            };
904
905                            //==================================================
906                            network = new vis.Network(container, data, options);
907                            network1 = new vis.Network(container1, data, options);
908                           
909
910
911
912                            //==================================================
913                            Array.prototype.unique = function() {
914                                var a = this.concat();
915                                for (var i = 0; i < a.length; ++i) {
916                                    for (var j = i + 1; j < a.length; ++j) {
917                                        if (a[i] === a[j])
918                                            a.splice(j--, 1);
919                                    }
920                                }
921                                return a;
922                            };
923
924                            //==================================================
925                            function findAllParents(nodesArray) {
926                                if (nodesArray.length == 0) {
927                                    return 1;
928                                }
929                                var parentsArray = network.getConnectedNodes(nodesArray[0], 'from');
930                                //console.log('node ', nodesArray[0], 'has ', parentsArray);
931                                nodesArray = nodesArray.concat(parentsArray).unique();
932                                //console.log('---> ', nodesArray);
933                                allParentsNode = allParentsNode.concat(nodesArray[0]).unique();
934
935
936                                nodesArray.splice(0, 1);
937                                return findAllParents(nodesArray);
938                            }
939
940                            //==================================================
941                            function findAllChild(nodesArray) {
942                                if (nodesArray.length == 0) {
943                                    return 1;
944                                }
945                                var childArray = network.getConnectedNodes(nodesArray[0], 'to');
946                                //console.log('node ', nodesArray[0], 'has ', childArray);
947                                nodesArray = nodesArray.concat(childArray).unique();
948                                //console.log('---> ', nodesArray);
949                                allChildNode = allChildNode.concat(nodesArray[0]).unique();
950                                nodesArray.splice(0, 1);
951                                return findAllChild(nodesArray);
952                            }
953
954                            //==================================================
955                            function getEdgeConnections(node) {
956                                var connectedEdgeArray = network.getConnectedEdges(node);
957                            }
958
959                            //==================================================
960                            network.on("click", function(params) {
961                                params.event = "[original event]";
962                                console.log('__________________________');
963                                nodeSelected = this.getNodeAt(params.pointer.DOM);
964                                if (nodeSelected === undefined) return 0;
965
966                                var node = nodes.get(nodeSelected);
967
968                                var connectedChild = nodes.get(network.getConnectedNodes(node.id, "to"));
969                                console.log('------->', connectedChild.length);
970                                if (connectedChild.length == 0) {
971                                    $('#enableAllChild').attr("disabled", true);
972                                } else {
973                                    $('#enableAllChild').attr("disabled", false);
974                                }
975
976                                var connectedEdgeArray = getEdgeConnections(nodeSelected);
977
978                                //--------------------------
979                                var parentsArray = network.getConnectedNodes(nodeSelected, 'from');
980
981
982                                allParentsNode = [nodeSelected];
983                                findAllParents(parentsArray);
984                                // remove selected node
985                                var index = allParentsNode.indexOf(nodeSelected);
986                                if (index !== -1) allParentsNode.splice(index, 1);
987                                console.log('Final parents: ', allParentsNode);
988
989
990                                //--------------------------
991                                var node = this.getNodeAt(params.pointer.DOM);
992                                var childArray = network.getConnectedNodes(nodeSelected, 'to');
993
994
995                                allChildNode = [nodeSelected];
996                                findAllChild(childArray);
997                                // remove selected node
998                                var index = allChildNode.indexOf(nodeSelected);
999                                if (index !== -1) allChildNode.splice(index, 1);
1000                                console.log('Final child: ', allChildNode);
1001
1002
1003                                //--------------------------
1004                            });
1005
1006                        } catch (ex) {
1007                            alert('ex when trying to parse json = ' + ex);
1008                        }
1009                    }
1010                })(file);
1011
1012                reader.readAsText(file);
1013
1014            }
1015
1016            //######################################################################################################
1017        });
1018    </script>
1019
1020    <div class="container">
1021
1022        <div class="row">
1023            <label class="btn btn-primary" for="file">
1024                <input type="file" id="file" style="display:none" onchange="$('#upload-file-info').html(this.files[0].name)">
1025                Load a JSON XIOS file
1026            </label>
1027            <button type="button" class="btn btn-default disabled" id="upload-file-info">...</button>
1028        </div>
1029
1030        <div class="row">
1031
1032            <div class="btn-group">
1033                <button type="button" class="btn btn-success" id="showNode">Show node</button>
1034                <button type="button" class="btn btn-success" id="hideNode">Hide node</button>
1035            </div>
1036
1037            <div class="btn-group">
1038                <button type="button" class="btn btn-success" id="enableAll">Enable all</button>
1039                <button type="button" class="btn btn-success" id="disableAll">Disable all</button>
1040            </div>
1041
1042            <div class="btn-group">
1043                <button type="button" class="btn btn-success" id="enableParents">Enable parents</button>
1044                <button type="button" class="btn btn-success" id="enableChild">Enable children</button>
1045            </div>
1046
1047            <div class="btn-group">
1048                <button type="button" class="btn btn-success" id="enableAllParents">Enable all parents</button>
1049                <button type="button" class="btn btn-success" id="disableAllParents">Disable all parents</button>
1050            </div>
1051
1052            <div class="btn-group">
1053                <button type="button" class="btn btn-success" id="enableAllChild">Enable all children</button>
1054                <button type="button" class="btn btn-success" id="disableAllChild">Disable all children</button>
1055            </div>
1056
1057            <button type="button" class="btn btn-success" id="enableInput">Enable input</button>
1058            <button type="button" class="btn btn-success" id="enableOutput">Enable output</button>
1059
1060            <button type="button" class="btn btn-success" id="lastTemporal">Enable last temporal input</button>
1061            <button type="button" class="btn btn-success" id="showGraph">Show subgraph (and hide other)</button>
1062
1063
1064        </div>
1065
1066        <div class="row">
1067            <div id="mynetwork"></div>
1068            <div id="mynetwork1"></div>
1069        </div>
1070
1071</body>
1072
1073</html>
Note: See TracBrowser for help on using the repository browser.