Update styling and callbacks

Add callbacks on hover, update stylesheet to match new algorithm

Author: Xing Han Lu

demos/usage-phylogeny.py

@@ -1,3 +1,5 @@
+import math
+
 import dash_cytoscape
 import dash
 from dash.dependencies import Input, Output
@@ -7,7 +9,8 @@
 try:
     from Bio import Phylo
 except ModuleNotFoundError as e:
-    print(e, "Please make sure you have biopython installed correctly before running this example.")
+    print(e,
+          "Please make sure biopython is installed correctly before running this example.")
     exit(1)
 
 
@@ -121,10 +124,7 @@ def add_to_elements(clade, clade_id):
 nodes, edges = generate_elements(tree)
 elements = nodes + edges
 
-layout = {
-    'name': 'breadthfirst',
-    'directed': True
-}
+layout = {'name': 'preset'}
 
 stylesheet = [
     {
@@ -136,36 +136,36 @@ def add_to_elements(clade, clade_id):
             "text-valign": "top",
         }
     },
+    {
+        'selector': '.support',
+        'style': {'background-opacity': 0}
+    },
     {
         'selector': 'edge',
         'style': {
-            "source-endpoint": "outside-to-node",
+            "source-endpoint": "inside-to-node",
+            "target-endpoint": "inside-to-node",
         }
     },
     {
         'selector': '.terminal',
         'style': {
             'label': 'data(name)',
-            "shape": "roundrectangle",
-            "width": 115,
-            "height": 25,
+            'width': 10,
+            'height': 10,
             "text-valign": "center",
-            'background-color': 'white',
-            "border-width": 1.5,
-            "border-style": "solid",
-            "border-opacity": 1,
+            "text-halign": "right",
+            'background-color': '#222222'
         }
     }
 ]
 
-
 # Start the app
 app = dash.Dash(__name__)
 
 app.scripts.config.serve_locally = True
 app.css.config.serve_locally = True
 
-
 app.layout = html.Div([
     dash_cytoscape.Cytoscape(
         id='cytoscape',
@@ -180,5 +180,26 @@ def add_to_elements(clade, clade_id):
 ])
 
 
+@app.callback(Output('cytoscape', 'stylesheet'),
+              [Input('cytoscape', 'mouseoverEdgeData')])
+def color_children(edgeData):
+    if not edgeData:
+        return stylesheet
+
+    if 's' in edgeData['source']:
+        val = edgeData['source'].split('s')[0]
+    else:
+        val = edgeData['source']
+
+    children_style = [{
+        'selector': f'edge[source *= "{val}"]',
+        'style': {
+            'line-color': 'blue'
+        }
+    }]
+
+    return stylesheet + children_style
+
+
 if __name__ == '__main__':
     app.run_server(debug=True)