Merge pull request neo4j#840 from oskarhane/fix-internal-rels-on-firs…

…t-render

Fix auto-completed relationships not showing in viz legend on first render

e2e_tests/integration/viz.zpec.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2002-2018 "Neo4j, Inc"
+ * Network Engine for Objects in Lund AB [http://neotechnology.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* global Cypress, cy, test, expect, before */
+
+describe('Viz rendering', () => {
+  before(function () {
+    cy.visit(Cypress.config.url)
+      .title()
+      .should('include', 'Neo4j Browser')
+  })
+  it('can connect', () => {
+    const password = Cypress.config.password
+    cy.connect(
+      'neo4j',
+      password
+    )
+  })
+  it('shows legend with rel types + node labels on first render', () => {
+    cy.executeCommand(':clear')
+    cy.executeCommand(
+      `CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b`
+    )
+    cy.get(`[data-test-id="viz-legend-reltypes"]`, { timeout: 5000 }).contains(
+      'CONNECTS'
+    )
+    cy.get(`[data-test-id="viz-legend-labels"]`, { timeout: 5000 }).contains(
+      'TestLabel'
+    )
+    cy.executeCommand(`MATCH (a:TestLabel) DETACH DELETE a`)
+  })
+})

src/browser/modules/D3Visualization/components/Explorer.jsx

@@ -72,6 +72,7 @@ export class ExplorerComponent extends Component {
     this.state = {
       stats: { labels: {}, relTypes: {} },
       graphStyle,
+      styleVersion: 0,
       nodes,
       relationships,
       selectedItem
@@ -149,7 +150,10 @@ export class ExplorerComponent extends Component {
       if (props.graphStyleData) {
         const rebasedStyle = deepmerge(this.defaultStyle, props.graphStyleData)
         this.state.graphStyle.loadRules(rebasedStyle)
-        this.setState({ graphStyle: this.state.graphStyle })
+        this.setState({
+          graphStyle: this.state.graphStyle,
+          styleVersion: this.state.styleVersion + 1
+        })
       } else {
         this.state.graphStyle.resetToDefault()
         this.setState(
@@ -161,14 +165,6 @@ export class ExplorerComponent extends Component {
         )
       }
     }
-
-    if (!deepEquals(props.nodes, this.props.nodes)) {
-      this.setState({ nodes: props.nodes })
-    }
-
-    if (!deepEquals(props.relationships, this.props.relationships)) {
-      this.setState({ relationships: props.relationships })
-    }
   }
 
   onInspectorExpandToggled (contracted, inspectorHeight) {
@@ -227,6 +223,7 @@ export class ExplorerComponent extends Component {
           onItemMouseOver={this.onItemMouseOver.bind(this)}
           onItemSelect={this.onItemSelect.bind(this)}
           graphStyle={this.state.graphStyle}
+          styleVersion={this.state.styleVersion} // cheap way for child to check style updates
           onGraphModelChange={this.onGraphModelChange.bind(this)}
           assignVisElement={this.props.assignVisElement}
           getAutoCompleteCallback={this.props.getAutoCompleteCallback}

src/browser/modules/D3Visualization/components/Graph.jsx

@@ -19,26 +19,18 @@
  */
 
 import React, { Component } from 'react'
-import { deepEquals } from 'services/utils'
-import {
-  createGraph,
-  mapNodes,
-  mapRelationships,
-  getGraphStats
-} from '../mapper'
+import { createGraph, mapRelationships, getGraphStats } from '../mapper'
 import { GraphEventHandler } from '../GraphEventHandler'
 import '../lib/visualization/index'
 import { dim } from 'browser-styles/constants'
 import { StyledZoomHolder, StyledSvgWrapper, StyledZoomButton } from './styled'
 import { ZoomInIcon, ZoomOutIcon } from 'browser-components/icons/Icons'
 
 export class GraphComponent extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      zoomInLimitReached: true,
-      zoomOutLimitReached: false
-    }
+  state = {
+    zoomInLimitReached: true,
+    zoomOutLimitReached: false,
+    shouldResize: false
   }
 
   graphInit (el) {
@@ -74,9 +66,7 @@ export class GraphComponent extends Component {
       this.initGraphView()
       this.graph && this.props.setGraph && this.props.setGraph(this.graph)
       this.props.getAutoCompleteCallback &&
-        this.props.getAutoCompleteCallback(
-          this.addInternalRelationships.bind(this)
-        )
+        this.props.getAutoCompleteCallback(this.addInternalRelationships)
       this.props.assignVisElement &&
         this.props.assignVisElement(this.svgElement, this.graphView)
     }
@@ -107,42 +97,27 @@ export class GraphComponent extends Component {
         this.props.onGraphModelChange
       )
       this.graphEH.bindEventHandlers()
-      this.state.currentStyleRules = this.props.graphStyle.toString()
       this.props.onGraphModelChange(getGraphStats(this.graph))
       this.graphView.resize()
       this.graphView.update()
     }
   }
 
-  addInternalRelationships (internalRelationships) {
+  addInternalRelationships = internalRelationships => {
     if (this.graph) {
       this.graph.addInternalRelationships(
         mapRelationships(internalRelationships, this.graph)
       )
+      this.props.onGraphModelChange(getGraphStats(this.graph))
       this.graphView.update()
       this.graphEH.onItemMouseOut()
     }
   }
 
   componentWillReceiveProps (props) {
-    if (
-      (!deepEquals(props.relationships, this.props.relationships) ||
-        !deepEquals(props.nodes, this.props.nodes)) &&
-      this.graphView
-    ) {
-      this.graph.resetGraph()
-      this.graph.addNodes(mapNodes(props.nodes))
-      this.graph.addRelationships(
-        mapRelationships(props.relationships, this.graph)
-      )
-      this.props.onGraphModelChange(getGraphStats(this.graph))
-    } else if (
-      !deepEquals(this.state.currentStyleRules, props.graphStyle.toString())
-    ) {
-      this.state.currentStyleRules = props.graphStyle.toString()
+    if (props.styleVersion !== this.props.styleVersion) {
       this.graphView.update()
     }
-
     if (
       this.props.fullscreen !== props.fullscreen ||
       this.props.frameHeight !== props.frameHeight

src/browser/modules/D3Visualization/components/Legend.jsx

@@ -67,16 +67,17 @@ export class LegendComponent extends Component {
           color: styleForItem.get('text-color-internal')
         }
         return (
-          <StyledLegendInlineListItem key={i}>
+          <StyledLegendInlineListItem key={i} data-test-id='viz-legend-labels'>
             <StyledLegendContents className='contents'>
               <StyledLabelToken
                 onClick={onClick}
                 style={style}
                 className='token token-label'
               >
                 {legendItemKey}
-                <StyledTokenCount className='count'>{`(${labels[legendItemKey]
-                  .count})`}</StyledTokenCount>
+                <StyledTokenCount className='count'>{`(${
+                  labels[legendItemKey].count
+                })`}</StyledTokenCount>
               </StyledLabelToken>
             </StyledLegendContents>
           </StyledLegendInlineListItem>
@@ -124,7 +125,10 @@ export class LegendComponent extends Component {
           color: styleForItem.get('text-color-internal')
         }
         return (
-          <StyledLegendInlineListItem key={i}>
+          <StyledLegendInlineListItem
+            key={i}
+            data-test-id='viz-legend-reltypes'
+          >
             <StyledLegendContents className='contents'>
               <StyledTokenRelationshipType
                 onClick={onClick}