Changeset 1685 for XIOS/dev/dev_trunk_omp/inputs

Timestamp:

07/31/19 13:34:37 (5 years ago)

Author:

yushan

Message:

dev for graph

Location:

XIOS/dev/dev_trunk_omp/inputs

Files:

• vis.html (modified) (7 diffs)
• vis2.html (added)

XIOS/dev/dev_trunk_omp/inputs/vis.html

@@ -42 +42 @@
         /* /!\ Use border-top-color not border-color for firefox compatibility */
 
-        /*  Source Filter */
-        #class_1 {
-            background-color: LightSlateGray;
-            border: 2px solid SlateGray;
-            border-top-color: SlateGray;
-        }
-
-        /* Arithmetic Filter */
-        #class_2 {
-            background-color: Khaki;
-            border: 2px solid DarkKhaki;
-            border-top-color: DarkKhaki;
-        }
-
-        /* Axis Trans. Filter */
-        #class_3 {
-            background-color: Orchid;
-            border: 2px solid DarkOrchid;
-            border-top-color: DarkOrchid;
-        }
-
-        /* Temporal Filter */
-        #class_4 {
-            background-color: Orange;
-            border: 2px solid DarkOrange;
-            border-top-color: DarkOrange;
-        }
-
-        /* Pass Through Filter */
-        #class_5 {
-            background-color: YellowGreen;
-            border: 2px solid OliveDrab;
-            border-top-color: OliveDrab;
-        }
-
-        /* File Writer Filter */
-        #class_6 {
-            background-color: LightGray;
-            border: 2px solid Gray;
-            border-top-color: Gray;
-        }
+ 
+        
     </style>
 
@@ -112 +73 @@
 
 
-            //===========================================================
-            $('#clusteringcid2').on('click', function() 
-            {
-                network.setData(data);
-                var clusterOptionsByData = 
-                {
-                    joinCondition:function(childOptions) 
-                    {
-                        return childOptions.cid === 2;
-                    },
-                    clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
-                };
-                network.clustering.cluster(clusterOptionsByData);
-                var allNode = nodes.get();
-                nodes.update(allNode);
-            });
-
-
 
             //===========================================================
@@ -165 +108 @@
 
                 }
+
+
+            }); 
+
+
+            //===========================================================
+            $('#showGraph').on('click', function() 
+            {
+                //===== hide all except selected
+                var allNode = nodes.get();
+
+                for(i=0; i<allNode.length; i++)
+                {
+                    var node = allNode[i];
+
+                    if(node.hidden != true)
+                    {
+                        node.hidden = true;
+                    }
+                }
+
+                nodes.update(allNode);
+
+                var node = nodes.get(nodeSelected);
+                node.hidden = false;
+                nodes.update(node);
+
+                //===== enable all parents
+                console.log("showAllParents: allParentsNode = ", allParentsNode);
+                allNode = nodes.get(allParentsNode);
+
+                for (i = 0; i < allNode.length; i++) {
+                    node = allNode[i];
+                    node.font = {
+                        color:'black'
+                    }
+                    node.hidden = false;
+                    if(node.filled == 1)
+                    {                
+                        node.color = {
+                            background: redNode.background,
+                            border: redNode.border,
+                            hover: redNode.background,
+                            highlight: {
+                               background: redNode.background,
+                               border: 'blue'
+                            }
+                        }
+                    } 
+                    else
+                    {
+                        node.color = {
+                            background: styleArr[node.class].background,
+                            border: styleArr[node.class].border,
+                            highlight: {
+                                background: styleArr[node.class].background,
+                                border: 'blue'
+                            }
+                        }
+                    }   
+                }
+
+                nodes.update(allNode);
+
+                node = nodes.get(nodeSelected);
+                var connectedEdgeArray = edges.get(network.getConnectedEdges(node.id));
+                for (j = 0; j < connectedEdgeArray.length; j++)
+                {                        
+                    var edge = connectedEdgeArray[j];
+                    if(edge.to == node.id)
+                    {
+                        edge.hidden = false;
+                    }
+                    
+                }
+                edges.update(connectedEdgeArray);
+
+                allNode = nodes.get();
+                nodes.update(allNode);
+
+                //===== enable all children
+                allNode = nodes.get(allChildNode);
+
+                for (i = 0; i < allNode.length; i++) {
+                    node = allNode[i];
+                    node.font = {
+                        color:'black'
+                    }
+                    node.hidden = false;
+                    if(node.filled == 1)
+                    {                
+                        node.color = {
+                            background: redNode.background,
+                            border: redNode.border,
+                            hover: redNode.background,
+                            highlight: {
+                                background: redNode.background,
+                                border: 'blue'
+                            }
+                        }
+                    } 
+                    else
+                    {
+                        node.color = {
+                            background: styleArr[node.class].background,
+                            border: styleArr[node.class].border,
+                            highlight: {
+                                background: styleArr[node.class].background,
+                                border: 'blue'
+                            }
+                        }
+                    }           
+                }
+
+                nodes.update(allNode);
+
+                allNode = nodes.get();
+                nodes.update(allNode);
 
 
@@ -698 +759 @@
                 },
                 7: {
-                    background: 'LightGray',
+                    background: 'LightBlue',
                     border: 'Gray',
                     shape: 'ellipse'
@@ -851 +912 @@
                                 },
                                 physics: {
-                                    enabled: false,
-                                    stabilization: false
+                                    enabled: false
                                 },
                                 nodes: {
@@ -867 +927 @@
                                         levelSeparation: 300,
                                         nodeSpacing: 80,
-                                        treeSpacing: 200,
+                                        treeSpacing: 100,
+                                        blockShifting: true,
+                                        edgeMinimization: true
                                     }
                                 },
@@ -1010 +1072 @@
             <button type="button" class="btn btn-default" id="disableAllChild">Disable all children</button>
             <button type="button" class="btn btn-default" id="lastTemporal">Enable last temporal input</button>
-
-
-            <button type="button" class="btn btn-default" id="clusteringcid2">Clustering cid=2</button>
+            <button type="button" class="btn btn-default" id="showGraph">Show subgraph (and hide other)</button>
+
+
         </div>