Merge pull request #97 from irfannuri/avoid-resetting-frametabs-ontog…

…gle-vismerged

Avoid resetting frame tabs on toggling and resize

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

@@ -68,7 +68,7 @@ export class ExplorerComponent extends Component {
       <StyledFullSizeContainer id='svg-vis' className={Object.keys(this.state.stats.relTypes).length ? '' : 'one-legend-row'}>
         <LegendComponent stats={this.state.stats} graphStyle={this.state.graphStyle} onSelectedLabel={this.onSelectedLabel.bind(this)} onSelectedRelType={this.onSelectedRelType.bind(this)} />
         <StyledSvgWrapper>
-          <GraphComponent relationships={this.props.relationships} nodes={this.state.nodes} getNodeNeighbours={this.getNodeNeighbours.bind(this)} onItemMouseOver={this.onItemMouseOver.bind(this)} onItemSelect={this.onItemSelect.bind(this)} graphStyle={this.state.graphStyle} onGraphModelChange={this.onGraphModelChange.bind(this)} />
+          <GraphComponent fullscreen={this.props.fullscreen} frameHeight={this.props.frameHeight} relationships={this.props.relationships} nodes={this.state.nodes} getNodeNeighbours={this.getNodeNeighbours.bind(this)} onItemMouseOver={this.onItemMouseOver.bind(this)} onItemSelect={this.onItemSelect.bind(this)} graphStyle={this.state.graphStyle} onGraphModelChange={this.onGraphModelChange.bind(this)} />
         </StyledSvgWrapper>
         <InspectorComponent hoveredItem={this.state.hoveredItem} selectedItem={this.state.selectedItem} graphStyle={this.state.graphStyle} />
       </StyledFullSizeContainer>

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

@@ -2,18 +2,29 @@ import { Component } from 'preact'
 import {createGraph, mapNodes, mapRelationships, getGraphStats} from '../mapper'
 import {GraphEventHandler} from '../GraphEventHandler'
 import '../lib/visualization/index'
+import { dim } from 'browser-styles/constants'
 
 export class GraphComponent extends Component {
 
   graphInit (el) {
     this.state.el = el
   }
 
+  getVisualAreaHeight () {
+    if (this.props.frameHeight && this.props.fullscreen) {
+      return this.props.frameHeight - (dim.frameStatusbarHeight + dim.frameTitlebarHeight * 2)
+    } else {
+      return this.state.el.parentNode.offsetHeight
+    }
+  }
+
   componentDidMount () {
     if (this.state.el != null) {
       if (!this.graphView) {
         let NeoConstructor = neo.graphView
-        let measureSize = () => { return {width: this.state.el.offsetWidth, height: this.state.el.parentNode.offsetHeight} }
+        let measureSize = () => {
+          return {width: this.state.el.offsetWidth, height: this.getVisualAreaHeight()}
+        }
         this.graph = createGraph(this.props.nodes, this.props.relationships)
         this.graphView = new NeoConstructor(this.state.el, measureSize, this.graph, this.props.graphStyle)
         new GraphEventHandler(this.graph,
@@ -40,6 +51,18 @@ export class GraphComponent extends Component {
       this.graphView.update()
       this.state.currentStyleRules = nextProps.graphStyle.toString()
     }
+
+    if (this.props.fullscreen !== nextProps.fullscreen || this.props.frameHeight !== nextProps.frameHeight) {
+      this.setState({shouldResize: true})
+    } else {
+      this.setState({shouldResize: false})
+    }
+  }
+
+  componentDidUpdate () {
+    if (this.state.shouldResize) {
+      this.graphView.resize()
+    }
   }
 
   render () {

src/browser/modules/D3Visualization/lib/visualization/index.js

@@ -5,7 +5,6 @@ import '../../lib/visualization/components/graphGeometry'
 import '../../lib/visualization/components/graphView'
 import '../../lib/visualization/components/layout'
 import '../../lib/visualization/components/node'
-import '../../lib/visualization/components/queryPlan'
 import '../../lib/visualization/components/relationship'
 import '../../lib/visualization/components/renderer'
 import '../../lib/visualization/components/style'

src/browser/modules/Stream/CypherFrame.jsx

@@ -12,12 +12,13 @@ import bolt from 'services/bolt/bolt'
 import Visualization from './Visualization'
 import FrameError from './FrameError'
 import * as viewTypes from 'shared/modules/stream/frameViewTypes'
+import { StyledFrameBody } from './styled'
 
 class CypherFrame extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      openView: 'visualization',
+      openView: viewTypes.VISUALIZATION,
       plan: null,
       notifications: null
     }
@@ -122,6 +123,18 @@ class CypherFrame extends Component {
     )
   }
 
+  getDisplayStyle (viewType) {
+    return this.state.openView === viewType ? {display: 'block'} : {display: 'none'}
+  }
+
+  onResize (fullscreen, collapse, frameHeight) {
+    if (frameHeight) {
+      this.setState({fullscreen, collapse, frameHeight})
+    } else {
+      this.setState({fullscreen, collapse})
+    }
+  }
+
   render () {
     const frame = this.props.frame
     const errors = this.props.request.status === 'error' ? this.props.request.result : false
@@ -144,29 +157,15 @@ class CypherFrame extends Component {
       if (result.records && result.records.length > 0) {
         this.state.rows = this.state.rows || bolt.recordsToTableArray(result.records)
       }
-
-      switch (this.state.openView) {
-        case viewTypes.TEXT:
-          frameContents = <AsciiView rows={this.state.rows} />
-          break
-        case viewTypes.TABLE:
-          frameContents = <TableView data={this.state.rows} />
-          break
-        case viewTypes.VISUALIZATION:
-          frameContents = <Visualization records={result.records} />
-          break
-        case viewTypes.CODE:
-          frameContents = <CodeView query={this.props.frame.cmd} request={this.props.request} />
-          break
-        case viewTypes.PLAN:
-          frameContents = <QueryPlan plan={plan} />
-          break
-        case viewTypes.WARNINGS:
-          frameContents = <WarningsView notifications={this.state.notifications} cypher={this.state.cypher} />
-          break
-        default:
-          frameContents = <Visualization records={result.records} />
-      }
+      frameContents =
+        <StyledFrameBody fullscreen={this.state.fullscreen} collapsed={this.state.collapse}>
+          <AsciiView style={this.getDisplayStyle(viewTypes.TEXT)} rows={this.state.rows} />
+          <TableView style={this.getDisplayStyle(viewTypes.TABLE)} data={this.state.rows} />
+          <Visualization style={this.getDisplayStyle(viewTypes.VISUALIZATION)} records={result.records} fullscreen={this.state.fullscreen} frameHeight={this.state.frameHeight} />
+          <CodeView style={this.getDisplayStyle(viewTypes.CODE)} query={this.props.frame.cmd} request={this.props.request} />
+          <QueryPlan style={this.getDisplayStyle(viewTypes.PLAN)} plan={plan} />
+          <WarningsView style={this.getDisplayStyle(viewTypes.WARNINGS)} notifications={this.state.notifications} cypher={this.state.cypher} />
+        </StyledFrameBody>
     } else if (result) {
       frameContents = (
         <div>
@@ -187,6 +186,7 @@ class CypherFrame extends Component {
         contents={frameContents}
         exportData={this.state.rows}
         statusbar={statusBar}
+        onResize={this.onResize.bind(this)}
       />
     )
   }

src/browser/modules/Stream/FrameTemplate.jsx

@@ -1,27 +1,33 @@
 import { Component } from 'preact'
 import FrameTitlebar from './FrameTitlebar'
 import Visible from 'browser-components/Visible'
-import { StyledFrame, StyledFullscreenFrame, StyledFrameBody, StyledFrameContents, StyledFrameStatusbar, StyledFrameMainSection } from './styled'
+import { StyledFrame, StyledFrameBody, StyledFrameContents, StyledFrameStatusbar, StyledFrameMainSection } from './styled'
 
 class FrameTemplate extends Component {
   constructor (props) {
     super(props)
     this.state = {
       fullscreen: false,
-      collapse: false,
-      wasToggledToOrFromFullScreen: false
-    }
+      collapse: false}
   }
   toggleFullScreen () {
-    this.setState({fullscreen: !this.state.fullscreen, wasToggledToOrFromFullScreen: true})
+    this.setState({fullscreen: !this.state.fullscreen}, () => this.props.onResize && this.props.onResize(this.state.fullscreen, this.state.collapse, this.lastHeight))
   }
   toggleCollapse () {
-    this.setState({collapse: !this.state.collapse})
+    this.setState({collapse: !this.state.collapse}, () => this.props.onResize && this.props.onResize(this.state.fullscreen, this.state.collapse, this.lastHeight))
+  }
+  componentDidUpdate () {
+    if (this.frameContentElement && this.lastHeight !== this.frameContentElement.base.clientHeight) {
+      this.lastHeight = this.frameContentElement.base.clientHeight
+      this.props.onResize && this.props.onResize(this.state.fullscreen, this.state.collapse, this.lastHeight)
+    }
+  }
+  setFrameContentElement (el) {
+    this.frameContentElement = el
   }
   render () {
-    const FrameComponent = this.state.fullscreen ? StyledFullscreenFrame : StyledFrame
     return (
-      <FrameComponent playIntroAnimation={!this.state.wasToggledToOrFromFullScreen}>
+      <StyledFrame fullscreen={this.state.fullscreen}>
         <FrameTitlebar
           frame={this.props.header}
           fullscreen={this.state.fullscreen}
@@ -33,15 +39,15 @@ class FrameTemplate extends Component {
         <StyledFrameBody fullscreen={this.state.fullscreen} collapsed={this.state.collapse}>
           {(this.props.sidebar) ? this.props.sidebar() : null}
           <StyledFrameMainSection>
-            <StyledFrameContents fullscreen={this.state.fullscreen}>
+            <StyledFrameContents fullscreen={this.state.fullscreen} ref={this.setFrameContentElement.bind(this)}>
               {this.props.contents}
             </StyledFrameContents>
             <Visible if={this.props.statusbar}>
               <StyledFrameStatusbar>{this.props.statusbar}</StyledFrameStatusbar>
             </Visible>
           </StyledFrameMainSection>
         </StyledFrameBody>
-      </FrameComponent>
+      </StyledFrame>
     )
   }
 }

src/browser/modules/Stream/Planner/QueryPlan.jsx

@@ -12,8 +12,12 @@ class QueryPlan extends Component {
   }
 
   render () {
+    if (!this.props.plan) {
+      return
+    }
+
     return (
-      <svg className='neod3plan' ref={this.planInit.bind(this)} />
+      <svg display={this.props.style.display} className='neod3plan' ref={this.planInit.bind(this)} />
     )
   }
 }

src/browser/modules/Stream/Views/AsciiView.jsx

@@ -1,8 +1,11 @@
 import asciitable from 'ascii-data-table'
 
-const AsciiView = ({rows}) => {
-  if (!rows) return (<em>No results found</em>)
-  return <pre>{asciitable.table(rows, 70)}</pre>
+const AsciiView = ({rows, style}) => {
+  if (!rows) {
+    return (<div style={style}><em>No results found</em></div>)
+  }
+
+  return <pre style={style}>{asciitable.table(rows, 70)}</pre>
 }
 
 export default AsciiView

src/browser/modules/Stream/Views/CodeView.jsx

@@ -1,8 +1,8 @@
 import style from './code_style.css'
 
-const CodeView = ({request, query}) => {
+const CodeView = ({request, query, style: displayStyle}) => {
   return (
-    <table>
+    <table style={displayStyle}>
       <tbody className={style.altRows}>
         <tr>
           <td className={style.bold}>Server version</td>

src/browser/modules/Stream/Views/TableView.jsx

@@ -12,7 +12,7 @@ class TableView extends Component {
     }
   }
   render () {
-    if (!this.props.data) return (<em>No results found</em>)
+    if (!this.props.data) return (<div style={this.props.style}><em>No results found</em></div>)
     const tableHeader = this.state.columns.map((column, i) => (
       <th className='table-header' key={i}>{column}</th>)
     )
@@ -44,7 +44,7 @@ class TableView extends Component {
       </tbody>
     )
     return (
-      <table>
+      <table style={this.props.style}>
         <thead>
           <tr>
             {tableHeader}

src/browser/modules/Stream/Views/WarningsView.jsx

@@ -11,7 +11,11 @@ const getWarningComponent = (severity) => {
   }
 }
 
-const WarningsView = ({notifications, cypher}) => {
+const WarningsView = ({notifications, cypher, style}) => {
+  if (!notifications || !cypher) {
+    return null
+  }
+
   let cypherLines = cypher.split('\n')
   cypherLines[0] = cypherLines[0].replace(/^EXPLAIN /, '')
 
@@ -34,7 +38,7 @@ const WarningsView = ({notifications, cypher}) => {
     )
   })
   return (
-    <StyledHelpFrame>
+    <StyledHelpFrame style={style}>
       {notificationsList}
     </StyledHelpFrame>)
 }

src/browser/modules/Stream/Visualization.jsx

@@ -5,32 +5,52 @@ import { NevadaWrapper } from '../NevadaVisualization/NevadaWrapper'
 import bolt from 'services/bolt/bolt'
 import { withBus } from 'preact-suber'
 import { ExplorerComponent } from '../D3Visualization/components/Explorer'
-import { StyledNevadaCanvas } from './styled'
+import { StyledNevadaCanvas, StyledVisContainer } from './styled'
 import { getUseNewVisualization, getSettings } from 'shared/modules/settings/settingsDuck'
 
 import { CYPHER_REQUEST } from 'shared/modules/cypher/cypherDuck'
 
 export class Visualization extends Component {
   constructor (props) {
     super(props)
-    this.state = {}
-    this.state.useNewVis = this.props.useNewVis
+
+    this.state = {
+      nodesAndRelationships: {
+        nodes: [],
+        relationships: []
+      },
+      justInitiated: true,
+      useNewVis: props.useNewVis
+    }
+  }
+
+  componentWillMount () {
+    if (this.props.records && this.props.records.length > 0) {
+      this.populateDataToStateFromProps(this.props)
+    }
   }
 
   shouldComponentUpdate (nextProps) {
-    return nextProps.records !== this.props.records || nextProps.graphStyleData !== this.props.graphStyleData
+    return nextProps.records !== this.props.records || nextProps.graphStyleData !== this.props.graphStyleData || nextProps.style !== this.props.style
   }
 
   componentWillReceiveProps (nextProps) {
     if (nextProps.records !== this.props.records) {
-      if (this.state.useNewVis) {
-        this.setState({nodesAndRelationships: bolt.extractNodesAndRelationshipsFromRecords(this.props.records)})
-      } else {
-        this.setState({nodesAndRelationships: bolt.extractNodesAndRelationshipsFromRecordsForOldVis(nextProps.records)})
-      }
+      this.populateDataToStateFromProps(nextProps)
+    }
+
+    if (nextProps.style.display !== this.props.style.display) {
+      this.setState({justInitiated: false})
     }
   }
 
+  populateDataToStateFromProps (props) {
+    this.setState({nodesAndRelationships: this.state.useNewVis
+      ? bolt.extractNodesAndRelationshipsFromRecords(props.records)
+      : bolt.extractNodesAndRelationshipsFromRecordsForOldVis(props.records)
+    })
+  }
+
   getNeighbours (id, currentNeighbourIds = []) {
     let query = `MATCH path = (a)--(o)
                    WHERE id(a)= ${id}
@@ -60,18 +80,27 @@ export class Visualization extends Component {
 
   render () {
     if (this.state.useNewVis) {
-      this.state.nodesAndRelationships = this.state.nodesAndRelationships || bolt.extractNodesAndRelationshipsFromRecords(this.props.records)
       return (
         <StyledNevadaCanvas>
-          <NevadaWrapper onLabelsSave={this.props.onLabelsSave} labels={this.props.labels} getNeighbours={this.getNeighbours.bind(this)} nodes={this.state.nodesAndRelationships.nodes} relationships={this.state.nodesAndRelationships.relationships} />
+          <NevadaWrapper onLabelsSave={this.props.onLabelsSave} labels={this.props.labels}
+            getNeighbours={this.getNeighbours.bind(this)} nodes={this.state.nodesAndRelationships.nodes}
+            relationships={this.state.nodesAndRelationships.relationships} />
         </StyledNevadaCanvas>
       )
-    } else {
-      this.state.nodesAndRelationships = this.state.nodesAndRelationships || bolt.extractNodesAndRelationshipsFromRecordsForOldVis(this.props.records)
-      return (
-        <ExplorerComponent maxNeighbours={this.props.maxNeighbours} initialNodeDisplay={this.props.initialNodeDisplay} graphStyleData={this.props.graphStyleData} updateStyle={this.props.updateStyle} getNeighbours={this.getNeighbours.bind(this)} nodes={this.state.nodesAndRelationships.nodes} relationships={this.state.nodesAndRelationships.relationships} />
-      )
     }
+
+    // This workaround is to overcome the issue that if the svg is initiated with in a style.display = none component, it does not become visible even display changed to block or so
+    if (this.state.justInitiated && this.props.style.display === 'none') {
+      return null
+    }
+
+    return (
+      <StyledVisContainer style={this.props.style} >
+        <ExplorerComponent maxNeighbours={this.props.maxNeighbours} initialNodeDisplay={this.props.initialNodeDisplay} graphStyleData={this.props.graphStyleData} updateStyle={this.props.updateStyle}
+          getNeighbours={this.getNeighbours.bind(this)} nodes={this.state.nodesAndRelationships.nodes}
+          relationships={this.state.nodesAndRelationships.relationships} fullscreen={this.props.fullscreen} frameHeight={this.props.frameHeight} />
+      </StyledVisContainer>
+    )
   }
 }