- Don't scale font size on zoom

- Also fix querying keys that contain quotes.

Author: GnaneshKunal

redisinsight/ui/src/packages/redisgraph/src/Graph.tsx

@@ -70,7 +70,7 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
     if (parsedResponse.nodeIds.length > 0) {
       try {
         /* Fetch named path nodes */
-        const resp = await executeRedisCommand(`graph.ro_query "${props.graphKey}" "MATCH (n) WHERE id(n) IN [${[...parsedResponse.nodeIds]}] RETURN n"`);
+        const resp = await executeRedisCommand(`graph.ro_query ${props.graphKey} "MATCH (n) WHERE id(n) IN [${[...parsedResponse.nodeIds]}] RETURN n"`);
 
         if (Array.isArray(resp) && (resp.length >= 1 || resp[0].status === 'success')) {
           const parsedData = responseParser(resp[0].response)
@@ -101,7 +101,7 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
 
     try {
       /* Fetch neighbours automatically */
-      const resp = await executeRedisCommand(`graph.ro_query "${props.graphKey}" "MATCH (n)-[t]->(m) WHERE ID(n) IN [${[...nodeIds]}] OR ID(m) IN [${[...nodeIds]}] RETURN DISTINCT t"`);
+      const resp = await executeRedisCommand(`graph.ro_query ${props.graphKey} "MATCH (n)-[t]->(m) WHERE ID(n) IN [${[...nodeIds]}] OR ID(m) IN [${[...nodeIds]}] RETURN DISTINCT t"`);
 
       if (Array.isArray(resp) && (resp.length >= 1 || resp[0].status === 'success')) {
         const parsedData = responseParser(resp[0].response)

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

@@ -78,6 +78,8 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
   let svgTranslate: number[];
   let node: any;
   let justLoaded = false;
+  var nominalTextSize = 10;
+  var maxTextSize = 24;
   const VERSION = '2.0.0';
 
   let zoomFuncs = {}
@@ -98,27 +100,36 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
 
   function appendGraph(container: d3.Selection<any, unknown, null, undefined>) {
     var mainSvg = container.append('svg')
-      .attr('width', '100%')
-      .attr('height', '100%')
-      .attr('class', 'graphd3-graph')
-      .call(options.graphZoom.on('zoom', (event) => {
-        let scale = event.transform.k;
-        const translate = [event.transform.x, event.transform.y];
-
-        if (svgTranslate) {
-          translate[0] += svgTranslate[0];
-          translate[1] += svgTranslate[1];
-        }
-
-        if (svgScale) {
-          scale *= svgScale;
+    .attr('width', '100%')
+    .attr('height', '100%')
+    .attr('class', 'graphd3-graph')
+    .call(options.graphZoom.on('zoom', (event) => {
+      let scale = event.transform.k;
+      const translate = [event.transform.x, event.transform.y];
+      if (svgTranslate) {
+        translate[0] += svgTranslate[0];
+        translate[1] += svgTranslate[1];
+      }
+      if (svgScale) {
+        scale *= svgScale;
+      }
+      var text = svg.selectAll('.node .text');
+      var textSize = nominalTextSize;
+      if (nominalTextSize * scale > maxTextSize) textSize = maxTextSize / scale;
+      text.attr("font-size", (textSize - 3) + "px");
+      text.text((d) => {
+        let label: string;
+        if (typeof options.onLabelNode === 'function') {
+          label = options.onLabelNode(d);
+        } else {
+          label = d.properties?.name || (d.labels ? d.labels[0] : '');
         }
-
-        svg.attr('transform', `translate(${translate[0]}, ${translate[1]}) scale(${scale})`);
-      }))
+        let maxLength = (maxTextSize - textSize) + 3;
+        return label.length > maxLength ? Utils.truncateText(label, maxLength) : label;
+      })
+      svg.attr('transform', `translate(${translate[0]}, ${translate[1]}) scale(${scale})`);
+    }))
     .on('dblclick.zoom', null)
-
-
       svg = mainSvg.append('g')
       .attr('width', '100%')
       .attr('height', '100%');
@@ -341,10 +352,11 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
           label = d.properties?.name || (d.labels ? d.labels[0] : '');
         }
 
-        return label.length > 10 ? Utils.truncateText(label, 10) : label;
+        let maxLength = maxTextSize - nominalTextSize - 5;
+        return label.length > maxLength ? Utils.truncateText(label, maxLength) : label;
       })
       .attr('class', 'text')
-      .attr('font-size', '10px')
+      .attr('font-size', (d) => nominalTextSize + "px")
       .attr('fill', (d) => labelColors(d.labels[0]).textColor)
       .attr('pointer-events', 'none')
       .attr('text-anchor', 'middle')