source: XIOS/dev/dev_trunk_omp/xios_test_suite/HTML/graph.html @ 1844

Last change on this file since 1844 was 1844, checked in by yushan, 4 years ago

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