Add edge tooltips, new query magic option for specifying edge label length (#218)

* Display tooltips on visualized edges

* Fix unit tests

* ChangeLog.md

* Truncate edge labels based on --label-max-length value, add this parameter as %%sparql option

* Add unit tests

* Use separate query parameter for edge label length

* Update Changelog

Co-authored-by: Michael Chin <chnmch@amazon.com>

Author: michaelnchin

ChangeLog.md

@@ -3,6 +3,7 @@
 Starting with v1.31.6, this file will contain a record of major features and updates made in each release of graph-notebook.
 
 ## Upcoming
+- Added edge tooltips, and options for specifying edge label length ([Link to PR](https://github.com/aws/graph-notebook/pull/218))
 
 ## Release 3.0.7 (October 25, 2021)
 - Added full support for NeptuneML API command parameters to `%neptune_ml` ([Link to PR](https://github.com/aws/graph-notebook/pull/202))

src/graph_notebook/magics/graph_magic.py

@@ -248,6 +248,10 @@ def sparql(self, line='', cell='', local_ns: dict = None):
                             choices=['dynamic', 'static', 'details'])
         parser.add_argument('--explain-format', default='text/html', help='response format for explain query mode',
                             choices=['text/csv', 'text/html'])
+        parser.add_argument('-l', '--label-max-length', type=int, default=10,
+                            help='Specifies max length of vertex labels, in characters. Default is 10')
+        parser.add_argument('-le', '--edge-label-max-length', type=int, default=10,
+                            help='Specifies max length of edge labels, in characters. Default is 10')
         parser.add_argument('--store-to', type=str, default='', help='store query result to this variable')
         parser.add_argument('-sp', '--stop-physics', action='store_true', default=False,
                             help="Disable visualization physics after the initial simulation stabilizes.")
@@ -304,7 +308,8 @@ def sparql(self, line='', cell='', local_ns: dict = None):
                     sparql_metadata = build_sparql_metadata_from_query(query_type='query', res=query_res,
                                                                        results=results, scd_query=True)
 
-                    sn = SPARQLNetwork(expand_all=args.expand_all)
+                    sn = SPARQLNetwork(label_max_length=args.label_max_length,
+                                       edge_label_max_length=args.edge_label_max_length, expand_all=args.expand_all)
                     sn.extract_prefix_declarations_from_query(cell)
                     try:
                         sn.add_results(results)
@@ -420,6 +425,8 @@ def gremlin(self, line, cell, local_ns: dict = None):
                             help='Property to display the value of on each edge, default is T.label')
         parser.add_argument('-l', '--label-max-length', type=int, default=10,
                             help='Specifies max length of vertex label, in characters. Default is 10')
+        parser.add_argument('-le', '--edge-label-max-length', type=int, default=10,
+                            help='Specifies max length of edge labels, in characters. Default is 10')
         parser.add_argument('--store-to', type=str, default='', help='store query result to this variable')
         parser.add_argument('--ignore-groups', action='store_true', default=False, help="Ignore all grouping options")
         parser.add_argument('--no-results', action='store_false', default=True,
@@ -500,7 +507,9 @@ def gremlin(self, line, cell, local_ns: dict = None):
                     logger.debug(f'ignore_groups: {args.ignore_groups}')
                     gn = GremlinNetwork(group_by_property=args.group_by, display_property=args.display_property,
                                         edge_display_property=args.edge_display_property,
-                                        label_max_length=args.label_max_length, ignore_groups=args.ignore_groups)
+                                        label_max_length=args.label_max_length,
+                                        edge_label_max_length=args.edge_label_max_length,
+                                        ignore_groups=args.ignore_groups)
 
                     if args.path_pattern == '':
                         gn.add_results(query_res)
@@ -1542,6 +1551,8 @@ def handle_opencypher_query(self, line, cell, local_ns):
                             help='Property to display the value of on each edge, default is ~type')
         parser.add_argument('-l', '--label-max-length', type=int, default=10,
                             help='Specifies max length of vertex label, in characters. Default is 10')
+        parser.add_argument('-rel', '--rel-label-max-length', type=int, default=10,
+                            help='Specifies max length of edge labels, in characters. Default is 10')
         parser.add_argument('--store-to', type=str, default='', help='store query result to this variable')
         parser.add_argument('--ignore-groups', action='store_true', default=False, help="Ignore all grouping options")
         parser.add_argument('-sp', '--stop-physics', action='store_true', default=False,
@@ -1571,7 +1582,9 @@ def handle_opencypher_query(self, line, cell, local_ns):
                 try:
                     gn = OCNetwork(group_by_property=args.group_by, display_property=args.display_property,
                                    edge_display_property=args.edge_display_property,
-                                   label_max_length=args.label_max_length, ignore_groups=args.ignore_groups)
+                                   label_max_length=args.label_max_length,
+                                   rel_label_max_length=args.rel_label_max_length,
+                                   ignore_groups=args.ignore_groups)
                     gn.add_results(res)
                     logger.debug(f'number of nodes is {len(gn.graph.nodes)}')
                     if len(gn.graph.nodes) > 0:

src/graph_notebook/network/EventfulNetwork.py

@@ -43,10 +43,10 @@ def __init__(self, graph: MultiDiGraph = None, callbacks: dict = None):
         super().__init__(graph)
 
     def strip_and_truncate_label_and_title(self, old_label, max_len: int) -> Tuple[str, str]:
-        if isinstance(old_label, list) and len(old_label) > 1:
-            title = str(old_label)
-        else:
+        if isinstance(old_label, list) and len(old_label) == 1:
             title = str(old_label).strip("[]'")
+        else:
+            title = str(old_label)
         if len(title) <= max_len:
             label = title
         else:
@@ -140,7 +140,7 @@ def add_node(self, node_id: str, data: dict = None):
         }
         self.dispatch_callbacks(EVENT_ADD_NODE, payload)
 
-    def add_edge(self, from_id: str, to_id: str, edge_id: str, label: str, data: dict = None):
+    def add_edge(self, from_id: str, to_id: str, edge_id: str, label: str, title: str = None, data: dict = None):
         if data is None:
             data = {}
         super().add_edge(from_id, to_id, edge_id, label, data)
@@ -149,6 +149,7 @@ def add_edge(self, from_id: str, to_id: str, edge_id: str, label: str, data: dic
             'to_id': to_id,
             'edge_id': edge_id,
             'label': label,
+            'title': title,
             'data': data
         }
         self.dispatch_callbacks(EVENT_ADD_EDGE, payload)

src/graph_notebook/network/gremlin/GremlinNetwork.py

@@ -99,14 +99,12 @@ class GremlinNetwork(EventfulNetwork):
     """
 
     def __init__(self, graph: MultiDiGraph = None, callbacks=None, label_max_length=DEFAULT_LABEL_MAX_LENGTH,
-                 group_by_property=T_LABEL, display_property=T_LABEL, edge_display_property=T_LABEL,
-                 ignore_groups=False):
+                 edge_label_max_length=DEFAULT_LABEL_MAX_LENGTH, group_by_property=T_LABEL, display_property=T_LABEL,
+                 edge_display_property=T_LABEL, ignore_groups=False):
         if graph is None:
             graph = MultiDiGraph()
-        if label_max_length < 3:
-            self.label_max_length = 3
-        else:
-            self.label_max_length = label_max_length
+        self.label_max_length = 3 if label_max_length < 3 else label_max_length
+        self.edge_label_max_length = 3 if edge_label_max_length < 3 else edge_label_max_length
         try:
             self.group_by_property = json.loads(group_by_property)
         except ValueError:
@@ -455,34 +453,37 @@ def add_path_edge(self, edge, from_id='', to_id='', data=None):
                             if isinstance(self.edge_display_property[edge_label], tuple) and isinstance(edge[k],list):
                                 if str(k) == self.edge_display_property[edge_label][0]:
                                     try:
-                                        edge_label = str(edge[k][self.edge_display_property[edge_label][1]])
+                                        edge_label = edge[k][self.edge_display_property[edge_label][1]]
                                         display_is_set = True
                                     except (TypeError, IndexError) as e:
                                         logger.debug(f"Failed to index into edge sub-property for: {edge[k]} and "
                                                      f"{self.edge_display_property[edge_label]}")
                                         continue
                             elif str(k) == self.edge_display_property[edge_label]:
-                                edge_label = str(edge[k])
+                                edge_label = edge[k]
                                 display_is_set = True
                         except KeyError:
                             continue
                     elif isinstance(self.edge_display_property, tuple):
                         if str(k) == self.edge_display_property[0] and isinstance(edge[k], list):
                             try:
-                                edge_label = str(edge[k][self.edge_display_property[1]])
+                                edge_label = edge[k][self.edge_display_property[1]]
                                 display_is_set = True
                             except IndexError:
                                 logger.debug(f"Failed to index into edge sub-property for: {edge[k]} and "
                                              f"{self.edge_display_property[0]}")
                                 continue
                     elif str(k) == self.edge_display_property:
-                        edge_label = str(edge[k])
+                        edge_label = edge[k]
                         display_is_set = True
-
             data['properties'] = properties
-            self.add_edge(from_id, to_id, edge_id, edge_label, data)
+            edge_title, edge_label = self.strip_and_truncate_label_and_title(edge_label, self.edge_label_max_length)
+            data['title'] = edge_title
+            self.add_edge(from_id=from_id, to_id=to_id, edge_id=edge_id, label=edge_label, title=edge_title, data=data)
         else:
-            self.add_edge(from_id, to_id, edge, str(edge), data)
+            edge_title, edge_label = self.strip_and_truncate_label_and_title(edge, self.edge_label_max_length)
+            data['title'] = edge_title
+            self.add_edge(from_id=from_id, to_id=to_id, edge_id=edge, label=edge_label, title=edge_title, data=data)
 
     def add_blank_edge(self, from_id, to_id, edge_id=None, undirected=True, label=''):
         """
@@ -498,7 +499,7 @@ def add_blank_edge(self, from_id, to_id, edge_id=None, undirected=True, label=''
         if edge_id is None:
             edge_id = str(uuid.uuid4())
         edge_data = UNDIRECTED_EDGE if undirected else {}
-        self.add_edge(from_id, to_id, edge_id, label, edge_data)
+        self.add_edge(from_id=from_id, to_id=to_id, edge_id=edge_id, label=label, title=label, data=edge_data)
 
     def insert_path_element(self, path, i):
         if i == 0:

src/graph_notebook/network/opencypher/OCNetwork.py

@@ -33,14 +33,13 @@ class OCNetwork(EventfulNetwork):
     """
 
     def __init__(self, graph: MultiDiGraph = None, callbacks=None, label_max_length=DEFAULT_LABEL_MAX_LENGTH,
-                 group_by_property=LABEL_KEY, display_property=LABEL_KEY,
-                 edge_display_property=EDGE_TYPE_KEY, ignore_groups=False):
+                 rel_label_max_length=DEFAULT_LABEL_MAX_LENGTH, group_by_property=LABEL_KEY,
+                 display_property=LABEL_KEY, edge_display_property=EDGE_TYPE_KEY, ignore_groups=False):
         if graph is None:
             graph = MultiDiGraph()
-        if label_max_length < 3:
-            self.label_max_length = 3
-        else:
-            self.label_max_length = label_max_length
+
+        self.label_max_length = 3 if label_max_length < 3 else label_max_length
+        self.rel_label_max_length = 3 if rel_label_max_length < 3 else rel_label_max_length
         try:
             self.group_by_property = json.loads(group_by_property)
         except ValueError:
@@ -139,7 +138,7 @@ def parse_node(self, node: dict):
         self.add_node(node[ID_KEY], data)
 
     def parse_rel(self, rel):
-        data = {'properties': self.flatten(rel), 'label': rel[EDGE_TYPE_KEY]}
+        data = {'properties': self.flatten(rel), 'label': rel[EDGE_TYPE_KEY], 'title': rel[EDGE_TYPE_KEY]}
         if self.edge_display_property is not EDGE_TYPE_KEY:
             try:
                 if isinstance(self.edge_display_property, dict):
@@ -164,7 +163,11 @@ def parse_rel(self, rel):
                 display_label = rel[EDGE_TYPE_KEY]
         else:
             display_label = rel[EDGE_TYPE_KEY]
-        self.add_edge(rel[START_KEY], rel[END_KEY], rel[ID_KEY], str(display_label), data)
+        edge_title, edge_label = self.strip_and_truncate_label_and_title(display_label, self.rel_label_max_length)
+        data['title'] = edge_title
+        data['label'] = edge_label
+        self.add_edge(from_id=rel[START_KEY], to_id=rel[END_KEY], edge_id=rel[ID_KEY], label=edge_label,
+                      title=edge_title, data=data)
 
     def process_result(self, res: dict):
         """Determines the type of element passed in and processes it appropriately

src/graph_notebook/network/sparql/SPARQLNetwork.py

@@ -50,12 +50,15 @@ def __init__(self,
                  graph: MultiDiGraph = None,
                  callbacks: list = None,
                  label_max_length: int = DEFAULT_LABEL_MAX_LENGTH,
+                 edge_label_max_length: int = DEFAULT_LABEL_MAX_LENGTH,
                  expand_all: bool = False):
         if graph is None:
             graph = MultiDiGraph()
 
         self.expand_all = expand_all
-        self.label_max_length = label_max_length
+        self.label_max_length = 3 if label_max_length < 3 else label_max_length
+        self.edge_label_max_length = 3 if edge_label_max_length < 3 else edge_label_max_length
+
         super().__init__(graph, callbacks)
         self.namespace_to_prefix = {  # http://foo/bar/ -> bar
             NAMESPACE_RDFS: PREFIX_RDFS,
@@ -291,7 +294,7 @@ def add_results(self, results):
                     data['title'] = title
                     data['label'] = label
 
-                # object is a literal. Check if data has this preciate already. If it does, turn its value into an
+                # object is a literal. Check if data has this predicate already. If it does, turn its value into an
                 # array and append the new value to it.
                 if 'properties' in data and f'{prefix}:{value}' in data['properties']:
                     if type(data['properties'][f'{prefix}:{value}']) is list:
@@ -301,7 +304,7 @@ def add_results(self, results):
                 else:
                     data['properties'][f'{prefix}:{value}'] = obj_entry
             else:
-                # Check if data has this preciate already. If it does, turn its value into an
+                # Check if data has this predicate already. If it does, turn its value into an
                 # array and append the new value to it.
                 if 'properties' in data and pred['value'] in data['properties']:
                     if type(data['properties'][pred['value']]) is list:
@@ -341,4 +344,7 @@ def process_edge_bindings(self, bindings, use_spo=False):
 
             if not self.graph.has_node(b[object_binding]['value']):
                 self.add_node(b[object_binding]['value'])
-            self.add_edge(b[subject_binding]['value'], b[object_binding]['value'], pred['value'], edge_label)
+            edge_title, edge_label = self.strip_and_truncate_label_and_title(edge_label, self.edge_label_max_length)
+            data = {'title': edge_title}
+            self.add_edge(from_id=b[subject_binding]['value'], to_id=b[object_binding]['value'], edge_id=pred['value'],
+                          label=edge_label, title=edge_title, data=data)

src/graph_notebook/widgets/src/force_widget.ts

@@ -666,7 +666,6 @@ export class ForceView extends DOMWidgetView {
     if (edge === null) {
       return;
     }
-
     if (edge.title !== undefined && edge.title !== "") {
       this.detailsText.innerText = "Details - " + edge.title;
     } else {