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

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

MARK: Dynamic workflow graph developement. Branch up to date with trunk @1676. Add visualization tool(vis.html) and an example graph data file(graph_data_example.json)

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