Use same node/edge colors on hover. Fix graph on empty node labels

Author: GnaneshKunal

redisinsight/ui/src/packages/redisgraph/src/graphd3.ts

@@ -124,7 +124,7 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
         if (typeof options.onLabelNode === 'function') {
           label = options.onLabelNode(d);
         } else {
-          label = d.properties?.name || (d.labels ? d.labels[0] : '');
+          label = d.properties?.name || (d.labels?.length ? d.labels[0] : '');
         }
         let maxLength = (maxTextSize - textSize) + 3;
         return label.length > maxLength ? Utils.truncateText(label, maxLength) : label;
@@ -241,7 +241,7 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
     return node.enter()
       .append('g')
       .attr('class', (d) => {
-        const label = d.labels[0];
+        const label = d.labels?.length ? d.labels[0] : '';
         let classes = 'node';
         let highlight;
 
@@ -303,16 +303,17 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
 
   function appendRingToNode(svgNode) {
     return svgNode.append('circle')
-      .attr('class', 'ring')
-      .attr('r', options.nodeRadius * 1.16);
+    .attr('class', 'ring')
+    .style('stroke', (d) => labelColors(d.labels?.length ? d.labels[0] : '').borderColor)
+    .attr('r', options.nodeRadius * 1.16);
   }
 
   function appendOutlineToNode(svgNode) {
     return svgNode.append('circle')
       .attr('class', 'outline')
       .attr('r', options.nodeRadius)
-      .style('fill', (d) => labelColors(d.labels[0]).color)
-      .style('stroke', (d) => labelColors(d.labels[0]).borderColor);
+      .style('fill', (d) => labelColors(d.labels?.length ? d.labels[0] : '').color)
+      .style('stroke', (d) => labelColors(d.labels?.length ? d.labels[0] : '').borderColor);
   }
 
   function appendNodeInfo(svgNode) {
@@ -353,15 +354,15 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
         if (typeof options.onLabelNode === 'function') {
           label = options.onLabelNode(d);
         } else {
-          label = d.properties?.name || (d.labels ? d.labels[0] : '');
+          label = d.properties?.name || (d.labels?.length ? d.labels[0] : '');
         }
 
         let maxLength = maxTextSize - nominalTextSize - 5;
         return label.length > maxLength ? Utils.truncateText(label, maxLength) : label;
       })
       .attr('class', 'text')
       .attr('font-size', (d) => nominalTextSize + "px")
-      .attr('fill', (d) => labelColors(d.labels[0]).textColor)
+      .attr('fill', (d) => labelColors(d.labels?.length ? d.labels[0] : '').textColor)
       .attr('pointer-events', 'none')
       .attr('text-anchor', 'middle')
       .attr('dy', () => options.nodeRadius / ((options.nodeRadius * 25) / 100));
@@ -408,7 +409,8 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
 
   function appendOverlayToRelationship(r) {
     return r.append('path')
-      .attr('class', 'overlay');
+    .attr('class', 'overlay')
+    .style('fill', (d) => edgeColors(d.type).color)
   }
 
   function appendTextToRelationship(r) {

redisinsight/ui/src/packages/redisgraph/src/styles/styles.less

@@ -170,8 +170,8 @@
 .node.selected .ring,
 .node:hover .ring {
     -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
-    filter: alpha(opacity=30);
-    opacity: .3;
+    filter: alpha(opacity=50);
+    opacity: .5;
 }
 
 .relationship {
@@ -202,8 +202,8 @@
 .relationship.selected .overlay,
 .relationship:hover .overlay {
     -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
-    filter: alpha(opacity=30);
-    opacity: .3;
+    filter: alpha(opacity=50);
+    opacity: .5;
 }
 
 #graphd3 {

redisinsight/ui/src/packages/redisgraph/src/utils.ts

@@ -78,7 +78,8 @@ export const unitaryVector = (source, target, newLength) => {
 export const darkenColor = (color) => d3.rgb(color).darker(1);
 
 
-function charCodeSum(str: string) {
+function charCodeSum(str: string | undefined) {
+  if (str === undefined) return 0
   let sum = 0
   for (let i = 0; i < str.length; i++) {
     sum += str.charCodeAt(i)