Fix graph height

Author: GnaneshKunal

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

@@ -90,7 +90,7 @@ function HandleError(props: { command?: string, data: any }): JSX.Element {
   const command = props.command.split(' ')
 
   if (command[command.length - 1] === '--compact') {
-    return <div className="responseFail">Queries with '--compact' flag is currently not supported.</div>
+    return <div className="responseFail">'--compact' flag is currently not supported.</div>
   }
 
   return null

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

@@ -43,6 +43,11 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
   const parsedResponse = responseParser(props.data)
   let nodeIds = new Set(parsedResponse.nodes.map(n => n.id))
   let edgeIds = new Set(parsedResponse.edges.map(e => e.id))
+
+  if (nodeIds.size === 0 && parsedResponse.nodeIds.length === 0) {
+    return <div className="responseFail">No vizualization data.</div>
+  }
+
   let data = {
     results: [{
       columns: parsedResponse.headers,
@@ -288,7 +293,7 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
           </div>
         }
       </div>
-      <div ref={d3Container} id="graphd3" style={{ height: "800px" }}></div>
+      <div ref={d3Container} id="graphd3"></div>
       <div
         style={{
           position: 'absolute',

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

@@ -78,9 +78,11 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
   let svgTranslate: number[];
   let node: any;
   let justLoaded = false;
-  var nominalTextSize = 10;
-  var maxTextSize = 24;
+  let nominalTextSize = 10;
+  let maxTextSize = 24;
   const VERSION = '2.0.0';
+  let coreSvg = null;
+  let height = 585;
 
   let zoomFuncs = {}
 
@@ -99,9 +101,9 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
   }
 
   function appendGraph(container: d3.Selection<any, unknown, null, undefined>) {
-    var mainSvg = container.append('svg')
+    let mainSvg = container.append('svg')
     .attr('width', '100%')
-    .attr('height', '100%')
+    .attr('height', height)
     .attr('class', 'graphd3-graph')
     .call(options.graphZoom.on('zoom', (event) => {
       let scale = event.transform.k;
@@ -113,8 +115,8 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
       if (svgScale) {
         scale *= svgScale;
       }
-      var text = svg.selectAll('.node .text');
-      var textSize = nominalTextSize;
+      let text = svg.selectAll('.node .text');
+      let textSize = nominalTextSize;
       if (nominalTextSize * scale > maxTextSize) textSize = maxTextSize / scale;
       text.attr("font-size", (textSize - 3) + "px");
       text.text((d) => {
@@ -146,6 +148,8 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
 
     svgNodes = svg.append('g')
       .attr('class', 'nodes');
+
+    coreSvg = mainSvg
   }
 
   function appendInfoPanel(container) {
@@ -465,10 +469,10 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
 
   function updateNodesAndRelationships(n, r) {
 
-    var nodeIds = nodes.map(n => n.id)
+    let nodeIds = nodes.map(n => n.id)
     n = n.filter(k => !nodeIds.includes(k.id))
 
-    var edgeIds = relationships.map(e => e.id)
+    let edgeIds = relationships.map(e => e.id)
     r = r.filter(k => !edgeIds.includes(k.id))
 
     updateRelationships(r);
@@ -789,6 +793,22 @@ function GraphD3(_selector: HTMLDivElement, _options: any) {
 
   init();
 
+  function resize() {
+    const isFullScreen = parent.document.body.getElementsByClassName('fullscreen').length > 0
+    if (isFullScreen) {
+      coreSvg.attr("height", parent.document.body.offsetHeight - 50)
+      coreSvg.transition().call(zoom.translateTo, ...ZOOM_PROPS.CAMERA_CENTER(coreSvg.node().getBoundingClientRect().width, coreSvg.node().getBoundingClientRect().height - 300))
+    } else {
+      coreSvg.attr("height", height)
+      coreSvg.transition().call(zoom.translateTo, ...ZOOM_PROPS.CAMERA_CENTER(coreSvg.node().getBoundingClientRect().width, coreSvg.node().getBoundingClientRect().height))
+    }
+    simulation.restart()
+  }
+
+  d3.select(window).on("resize", resize)
+
+  resize()
+
   return {
     graphDataToD3Data,
     size,

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

@@ -43,7 +43,7 @@ function responseParser(data: any) {
   let types: {[key: string]: number} = {}
   let labels: {[key: string]: number} = {}
   if (data.length === 0) return {
-    nodes, edges, types, labels
+    nodes, edges, types, labels, headers, nodeIds, edgeIds,
   }
 
   const entries = data[1].map((entry: any) => {

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

@@ -206,6 +206,10 @@
     opacity: .3;
 }
 
+#graphd3 {
+    height: 100%;
+}
+
 .graphd3-graph {
     cursor: move;
     background-color: var(--svg-background);