source: XIOS/dev/dev_trunk_omp/inputs/vis.html @ 1840

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

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