Merge pull request #619 from oskarhane/3.0-handle-integers-in-frame

Fix display of Neo4j integers in Cypher result frames

Author: pe4cey

__mocks__/neo4j.js

@@ -18,10 +18,18 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+function integerFn (val) {
+  this.val = val
+}
+integerFn.prototype.toString = function () {
+  return this.val.toString()
+}
+
 var out = {
   v1: {
-    isInt: function () {
-      return false
+    Int: integerFn,
+    isInt: function (val) {
+      return val instanceof integerFn
     },
     types: {
       Node: function Node (id, labels, properties) {

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

@@ -20,15 +20,12 @@
 
 import { Component } from 'preact'
 import asciitable from 'ascii-data-table'
-import bolt from 'services/bolt/bolt'
+import { v1 as neo4j } from 'neo4j-driver-alias'
 import Render from 'browser-components/Render'
 import Ellipsis from 'browser-components/Ellipsis'
 import { debounce, shallowEquals, deepEquals } from 'services/utils'
 import { StyledStatsBar, PaddedDiv, StyledBodyMessage, StyledRightPartial, StyledWidthSliderContainer, StyledWidthSlider } from '../styled'
-import { getBodyAndStatusBarMessages, getRecordsToDisplayInTable } from './helpers'
-
-const toTable = (records) => records && records.length ? bolt.recordsToTableArray(records) : undefined
-const stringify = bolt.stringifyRows || undefined
+import { getBodyAndStatusBarMessages, getRecordsToDisplayInTable, transformResultRecordsToResultArray, stringifyResultArray } from './helpers'
 
 export class AsciiView extends Component {
   constructor (props) {
@@ -68,7 +65,7 @@ export class AsciiView extends Component {
     this.setState({ bodyMessage })
     if (!result || !result.records) return
     const records = getRecordsToDisplayInTable(props.result, props.maxRows)
-    const serializedRows = stringify(toTable(records))
+    const serializedRows = stringifyResultArray(neo4j.isInt, transformResultRecordsToResultArray(records)) || []
     this.setState({ serializedRows })
     this.props.setParentState && this.props.setParentState({ _asciiSerializedRows: serializedRows })
   }

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

@@ -23,11 +23,13 @@ import { v4 } from 'uuid'
 import { StyledStatsBar, PaddedTableViewDiv, StyledBodyMessage } from '../styled'
 import Ellipsis from 'browser-components/Ellipsis'
 import {StyledTable, StyledBodyTr, StyledTh, StyledTd, StyledJsonPre} from 'browser-components/DataTables'
-import bolt from 'services/bolt/bolt'
-import { deepEquals, shallowEquals } from 'services/utils'
-import { getBodyAndStatusBarMessages, getRecordsToDisplayInTable } from './helpers'
+import { deepEquals, shallowEquals, stringifyMod } from 'services/utils'
+import { v1 as neo4j } from 'neo4j-driver-alias'
+import { getBodyAndStatusBarMessages, getRecordsToDisplayInTable, transformResultRecordsToResultArray } from './helpers'
 
-const toTable = (records) => records && records.length ? bolt.recordsToTableArray(records) : undefined
+const intToString = (val) => {
+  if (neo4j.isInt(val)) return val.toString()
+}
 
 const renderCell = (entry) => {
   if (Array.isArray(entry)) {
@@ -36,14 +38,15 @@ const renderCell = (entry) => {
   } else if (typeof entry === 'object') {
     return renderObject(entry)
   } else {
-    return JSON.stringify(entry)
+    return stringifyMod(entry, intToString, true)
   }
 }
 const renderObject = (entry) => {
+  if (neo4j.isInt(entry)) return entry.toString()
   if (Object.keys(entry).length === 0 && entry.constructor === Object) {
     return <em>(empty)</em>
   } else {
-    return <StyledJsonPre>{JSON.stringify(entry, null, 2)}</StyledJsonPre>
+    return <StyledJsonPre>{stringifyMod(entry, intToString, true)}</StyledJsonPre>
   }
 }
 const buildData = (entries) => {
@@ -87,7 +90,7 @@ export class TableView extends Component {
   }
   makeState (props) {
     const records = getRecordsToDisplayInTable(props.result, props.maxRows)
-    const table = toTable(records) || []
+    const table = transformResultRecordsToResultArray(records) || []
     const data = table ? table.slice() : []
     const columns = data.length > 0 ? data.shift() : []
     const { bodyMessage } = getBodyAndStatusBarMessages(props.result, props.maxRows)

src/browser/modules/Stream/CypherFrame/helpers.js

@@ -19,8 +19,10 @@
  */
 
 import bolt from 'services/bolt/bolt'
+import { v1 as neo4j } from 'neo4j-driver-alias'
 import * as viewTypes from 'shared/modules/stream/frameViewTypes'
 import { recursivelyExtractGraphItems, flattenArray } from 'services/bolt/boltMappings'
+import { stringifyMod } from 'services/utils'
 
 export function getBodyAndStatusBarMessages (result, maxRows) {
   if (!result || !result.summary || !result.summary.resultAvailableAfter) {
@@ -120,3 +122,102 @@ export const initialView = (props, state = {}) => {
   if (resultHasNodes(props.request)) return viewTypes.VISUALIZATION
   return viewTypes.TABLE
 }
+
+/**
+ * Takes an array of objects and stringifies it using a
+ * modified version of JSON.stringify.
+ * It takes a replacer without enforcing quoting rules to it.
+ * Used so we can have Neo4j integers as string without quotes.
+ */
+export const stringifyResultArray = (intChecker = neo4j.isInt, arr = []) => {
+  return arr.map((col) => {
+    if (!col) return col
+    return col.map((fVal) => {
+      return stringifyMod(fVal, (val) => {
+        if (intChecker(val)) return val.toString()
+      })
+    })
+  })
+}
+
+/**
+ * Transformes an array of neo4j driver records to an array of objects.
+ * Flattens graph items so only their props are left.
+ * Leaves Neo4j Integers as they were.
+ */
+export const transformResultRecordsToResultArray = (records) => {
+  return records && records.length
+  ? [records]
+      .map(extractRecordsToResultArray)
+      .map(flattenGraphItemsInResultArray.bind(null, neo4j.types, neo4j.isInt))[0]
+  : undefined
+}
+
+/**
+ * Transformes an array of neo4j driver records to an array of objects.
+ * Leaves all values as they were, just changing the data structure.
+ */
+export const extractRecordsToResultArray = (records = []) => {
+  records = Array.isArray(records) ? records : []
+  const keys = records[0] ? [records[0].keys] : undefined
+  return (keys || []).concat(
+    records.map((record) => {
+      return record.keys.map((key, i) => record._fields[i])
+    })
+  )
+}
+
+export const flattenGraphItemsInResultArray = (types = neo4j.types, intChecker = neo4j.isInt, result = []) => {
+  return result.map(flattenGraphItems.bind(null, types, intChecker))
+}
+
+/**
+ * Recursively looks for graph items and elevates their properties if found.
+ * Leaves everything else (including neo4j integers) as is
+ */
+export const flattenGraphItems = (types = neo4j.types, intChecker = neo4j.isInt, item) => {
+  if (Array.isArray(item)) return item.map(flattenGraphItems.bind(null, types, intChecker))
+  if (typeof item === 'object' && item !== null && !isGraphItem(types, item) && !intChecker(item)) {
+    let out = {}
+    const keys = Object.keys(item)
+    for (let i = 0; i < keys.length; i++) {
+      out[keys[i]] = flattenGraphItems(types, intChecker, item[keys[i]])
+    }
+    return out
+  }
+  if (isGraphItem(types, item)) return extractPropertiesFromGraphItems(types, item)
+  return item
+}
+
+export const isGraphItem = (types = neo4j.types, item) => {
+  return (
+    item instanceof types.Node ||
+    item instanceof types.Relationship ||
+    item instanceof types.Path ||
+    item instanceof types.PathSegment
+  )
+}
+
+export function extractPropertiesFromGraphItems (types = neo4j.types, obj) {
+  if (obj instanceof types.Node || obj instanceof types.Relationship) {
+    return obj.properties
+  } else if (obj instanceof types.Path) {
+    return [].concat.apply([], arrayifyPath(types, obj))
+  }
+  return obj
+}
+
+const arrayifyPath = (types = neo4j.types, path) => {
+  let segments = path.segments
+  // Zero length path. No relationship, end === start
+  if (!Array.isArray(path.segments) || path.segments.length < 1) {
+    segments = [{...path, end: null}]
+  }
+  return segments.map(function (segment) {
+    return [
+      extractPropertiesFromGraphItems(types, segment.start),
+      extractPropertiesFromGraphItems(types, segment.relationship),
+      extractPropertiesFromGraphItems(types, segment.end)
+    ].filter((part) => part !== null)
+  })
+}

src/browser/modules/Stream/CypherFrame/helpers.test.js

@@ -28,7 +28,10 @@ import {
   resultHasPlan,
   resultIsError,
   getRecordsToDisplayInTable,
-  initialView
+  initialView,
+  extractRecordsToResultArray,
+  flattenGraphItemsInResultArray,
+  stringifyResultArray
 } from './helpers'
 
 describe('helpers', () => {
@@ -474,4 +477,129 @@ describe('helpers', () => {
       expect(view).toEqual(viewTypes.TABLE)
     })
   })
+  describe('record transformations', () => {
+    test('extractRecordsToResultArray handles empty records', () => {
+      // Given
+      const records = null
+
+      // When
+      const res = extractRecordsToResultArray(records)
+
+      // Then
+      expect(res).toEqual([])
+    })
+    test('extractRecordsToResultArray handles regular records', () => {
+      // Given
+      const start = new neo4j.types.Node(1, ['X'], {x: 1})
+      const end = new neo4j.types.Node(2, ['Y'], {y: new neo4j.Int(1)})
+      const rel = new neo4j.types.Relationship(3, 1, 2, 'REL', {rel: 1})
+      const segments = [new neo4j.types.PathSegment(start, rel, end)]
+      const path = new neo4j.types.Path(start, end, segments)
+
+      const records = [
+        {
+          keys: ['"x"', '"y"', '"n"'],
+          _fields: ['x', 'y', new neo4j.types.Node('1', ['Person'], {prop1: 'prop1'})]
+        },
+        {
+          keys: ['"x"', '"y"', '"n"'],
+          _fields: ['xx', 'yy', path]
+        }
+      ]
+
+      // When
+      const res = extractRecordsToResultArray(records)
+
+      // Then
+      expect(res).toEqual([
+        ['"x"', '"y"', '"n"'],
+        ['x', 'y', new neo4j.types.Node('1', ['Person'], {prop1: 'prop1'})],
+        ['xx', 'yy', path]
+      ])
+    })
+    test('flattenGraphItemsInResultArray extracts props from graph items', () => {
+      // Given
+      const start = new neo4j.types.Node(1, ['X'], {x: 1})
+      const end = new neo4j.types.Node(2, ['Y'], {y: 1})
+      const rel = new neo4j.types.Relationship(3, 1, 2, 'REL', {rel: 1})
+      const segments = [new neo4j.types.PathSegment(start, rel, end)]
+      const path = new neo4j.types.Path(start, end, segments)
+
+      const records = [
+        {
+          keys: ['"x"', '"y"', '"n"'],
+          _fields: ['x', 'y', new neo4j.types.Node('1', ['Person'], {prop1: 'prop1'})]
+        },
+        {
+          keys: ['"x"', '"y"', '"n"'],
+          _fields: ['xx', 'yy', {prop: path}]
+        }
+      ]
+
+      // When
+      const step1 = extractRecordsToResultArray(records)
+      const res = flattenGraphItemsInResultArray(neo4j.types, neo4j.isInt, step1)
+
+      // Then
+      expect(res).toEqual([
+        ['"x"', '"y"', '"n"'],
+        ['x', 'y', {prop1: 'prop1'}],
+        ['xx', 'yy', {prop: [{x: 1}, {rel: 1}, {y: 1}]}]
+      ])
+    })
+    test('stringifyResultArray uses stringifyMod to serialize', () => {
+      // Given
+      const records = [
+        {
+          keys: ['"neoInt"', '"int"', '"any"'],
+          _fields: [new neo4j.Int('882573709873217509'), 100, 0.5]
+        },
+        {
+          keys: ['"neoInt"', '"int"', '"any"'],
+          _fields: [new neo4j.Int(300), 100, 'string']
+        }
+      ]
+
+      // When
+      const step1 = extractRecordsToResultArray(records)
+      const step2 = flattenGraphItemsInResultArray(neo4j.types, neo4j.isInt, step1)
+      const res = stringifyResultArray(neo4j.isInt, step2)
+      // Then
+      expect(res).toEqual([
+        [JSON.stringify('"neoInt"'), JSON.stringify('"int"'), JSON.stringify('"any"')],
+        ['882573709873217509', '100', '0.5'],
+        ['300', '100', '"string"']
+      ])
+    })
+    test('stringifyResultArray handles neo4j integers nested within graph items', () => {
+      // Given
+      const start = new neo4j.types.Node(1, ['X'], {x: 1})
+      const end = new neo4j.types.Node(2, ['Y'], {y: new neo4j.Int(2)}) // <-- Neo4j integer
+      const rel = new neo4j.types.Relationship(3, 1, 2, 'REL', {rel: 1})
+      const segments = [new neo4j.types.PathSegment(start, rel, end)]
+      const path = new neo4j.types.Path(start, end, segments)
+
+      const records = [
+        {
+          keys: ['"x"', '"y"', '"n"'],
+          _fields: ['x', 'y', new neo4j.types.Node('1', ['Person'], {prop1: 'prop1'})]
+        },
+        {
+          keys: ['"x"', '"y"', '"n"'],
+          _fields: ['xx', 'yy', {prop: path}]
+        }
+      ]
+
+      // When
+      const step1 = extractRecordsToResultArray(records)
+      const step2 = flattenGraphItemsInResultArray(neo4j.types, neo4j.isInt, step1)
+      const res = stringifyResultArray(neo4j.isInt, step2)
+      // Then
+      expect(res).toEqual([
+        [JSON.stringify('"x"'), JSON.stringify('"y"'), JSON.stringify('"n"')],
+        ['"x"', '"y"', JSON.stringify({prop1: 'prop1'})],
+        ['"xx"', '"yy"', JSON.stringify({prop: [{x: 1}, {rel: 1}, {y: 2}]})] // <--
+      ])
+    })
+  })
 })

src/browser/modules/Stream/CypherFrame/index.jsx

@@ -23,7 +23,7 @@ import { Component } from 'preact'
 import FrameTemplate from '../FrameTemplate'
 import { CypherFrameButton } from 'browser-components/buttons'
 import Centered from 'browser-components/Centered'
-import bolt from 'services/bolt/bolt'
+import { v1 as neo4j } from 'neo4j-driver-alias'
 import { deepEquals } from 'services/utils'
 import FrameSidebar from '../FrameSidebar'
 import { VisualizationIcon, TableIcon, AsciiIcon, CodeIcon, PlanIcon, AlertIcon, ErrorIcon, Spinner } from 'browser-components/icons/Icons'
@@ -37,7 +37,7 @@ import { VisualizationConnectedBus } from './VisualizationView'
 import Render from 'browser-components/Render'
 import Display from 'browser-components/Display'
 import * as viewTypes from 'shared/modules/stream/frameViewTypes'
-import { resultHasRows, resultHasWarnings, resultHasPlan, resultIsError, resultHasNodes, initialView } from './helpers'
+import { resultHasRows, resultHasWarnings, resultHasPlan, resultIsError, resultHasNodes, initialView, transformResultRecordsToResultArray, stringifyResultArray } from './helpers'
 import { StyledFrameBody, SpinnerContainer, StyledStatsBarContainer } from '../styled'
 import { getMaxRows, getInitialNodeDisplay, getMaxNeighbours, shouldAutoComplete } from 'shared/modules/settings/settingsDuck'
 import { setRecentView, getRecentView } from 'shared/modules/stream/streamDuck'
@@ -50,6 +50,9 @@ export class CypherFrame extends Component {
       exportData: null
     }
   }
+  makeExportData (records) {
+    return stringifyResultArray(neo4j.isInt, transformResultRecordsToResultArray(records))
+  }
   changeView (view) {
     this.setState({openView: view})
     if (this.props.onRecentViewChanged) {
@@ -74,7 +77,7 @@ export class CypherFrame extends Component {
     }
     if (this.props.request === undefined || !deepEquals(props.request.result, this.props.request.result)) {
       if (props.request.result && props.request.result.records && props.request.result.records.length) {
-        newState['exportData'] = bolt.recordsToTableArray(props.request.result.records)
+        newState['exportData'] = this.makeExportData(props.request.result.records)
       } else {
         newState['exportData'] = null
       }
@@ -85,7 +88,7 @@ export class CypherFrame extends Component {
     const view = initialView(this.props, this.state)
     if (view) this.setState({ openView: view })
     if (this.props.request && this.props.request.result && this.props.request.result.records && this.props.request.result.records.length) {
-      this.setState({ exportData: bolt.recordsToTableArray(this.props.request.result.records) })
+      this.setState({ exportData: this.makeExportData(this.props.request.result.records) })
     }
   }
   sidebar () {