Feature relatable

package.json

@@ -127,7 +127,8 @@
   },
   "dependencies": {
     "@neo4j/browser-lambda-parser": "1.0.4",
-    "@relate-by-ui/css": "^1.0.4",
+    "@relate-by-ui/css": "1.0.5",
+    "@relate-by-ui/relatable": "1.0.1",
     "@relate-by-ui/saved-scripts": "^1.0.4",
     "ascii-data-table": "^2.1.1",
     "canvg": "^1.5.3",

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

@@ -26,6 +26,8 @@ import neoGraphStyle from '../graphStyle'
 import { InspectorComponent } from './Inspector'
 import { LegendComponent } from './Legend'
 import { StyledFullSizeContainer } from './styled'
+import { getMaxFieldItems } from 'shared/modules/settings/settingsDuck'
+import { connect } from 'react-redux'
 
 const deduplicateNodes = nodes => {
   return nodes.reduce(
@@ -231,6 +233,7 @@ export class ExplorerComponent extends Component {
           setGraph={this.props.setGraph}
         />
         <InspectorComponent
+          hasTruncatedFields={this.props.hasTruncatedFields}
           fullscreen={this.props.fullscreen}
           hoveredItem={this.state.hoveredItem}
           selectedItem={this.state.selectedItem}
@@ -241,4 +244,6 @@ export class ExplorerComponent extends Component {
     )
   }
 }
-export const Explorer = ExplorerComponent
+export const Explorer = connect(state => ({
+  maxFieldItems: getMaxFieldItems(state)
+}))(ExplorerComponent)

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

@@ -40,6 +40,9 @@ import { GrassEditor } from './GrassEditor'
 import { RowExpandToggleComponent } from './RowExpandToggle'
 import ClickableUrls from '../../../components/clickable-urls'
 import numberToUSLocale from 'shared/utils/number-to-US-locale'
+import { StyledTruncatedMessage } from 'browser/modules/Stream/styled'
+import { Icon } from 'semantic-ui-react'
+import Ellipsis from 'browser-components/Ellipsis'
 
 const mapItemProperties = itemProperties =>
   itemProperties
@@ -149,6 +152,12 @@ export class InspectorComponent extends Component {
           <StyledInlineList className="list-inline">
             <StyledInspectorFooterRowListPair className="pair" key="pair">
               <StyledInspectorFooterRowListValue className="value">
+                {this.props.hasTruncatedFields && (
+                  <StyledTruncatedMessage>
+                    <Icon name="warning sign" /> Record fields have been
+                    truncated.&nbsp;
+                  </StyledTruncatedMessage>
+                )}
                 {description}
               </StyledInspectorFooterRowListValue>
             </StyledInspectorFooterRowListPair>

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

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { Component } from 'react'
+import React, { Component, useMemo } from 'react'
 import asciitable from 'ascii-data-table'
 import Render from 'browser-components/Render'
 import Ellipsis from 'browser-components/Ellipsis'
@@ -29,17 +29,22 @@ import {
   StyledBodyMessage,
   StyledRightPartial,
   StyledWidthSliderContainer,
-  StyledWidthSlider
+  StyledWidthSlider,
+  StyledTruncatedMessage
 } from '../styled'
 import {
   getBodyAndStatusBarMessages,
   getRecordsToDisplayInTable,
   transformResultRecordsToResultArray,
-  stringifyResultArray
+  stringifyResultArray,
+  resultHasTruncatedFields
 } from './helpers'
 import { stringModifier } from 'services/bolt/cypherTypesFormatting'
+import { getMaxFieldItems } from 'shared/modules/settings/settingsDuck'
+import { connect } from 'react-redux'
+import { Icon } from 'semantic-ui-react'
 
-export class AsciiView extends Component {
+export class AsciiViewComponent extends Component {
   state = {
     serializedRows: [],
     bodyMessage: ''
@@ -73,7 +78,7 @@ export class AsciiView extends Component {
   }
 
   makeState(props) {
-    const { result, maxRows } = props
+    const { result, maxRows, maxFieldItems } = props
     const { bodyMessage = null } =
       getBodyAndStatusBarMessages(result, maxRows) || {}
     this.setState({ bodyMessage })
@@ -82,7 +87,7 @@ export class AsciiView extends Component {
     const serializedRows =
       stringifyResultArray(
         stringModifier,
-        transformResultRecordsToResultArray(records)
+        transformResultRecordsToResultArray(records, maxFieldItems)
       ) || []
     this.setState({ serializedRows })
     const maxColWidth = asciitable.maxColumnWidth(serializedRows)
@@ -110,12 +115,17 @@ export class AsciiView extends Component {
   }
 }
 
-export class AsciiStatusbar extends Component {
+export const AsciiView = connect(state => ({
+  maxFieldItems: getMaxFieldItems(state)
+}))(AsciiViewComponent)
+
+export class AsciiStatusbarComponent extends Component {
   state = {
     maxSliderWidth: 140,
     minSliderWidth: 3,
     maxColWidth: 70,
-    statusBarMessage: ''
+    statusBarMessage: '',
+    hasTruncatedFields: false
   }
 
   componentDidUpdate() {
@@ -126,7 +136,11 @@ export class AsciiStatusbar extends Component {
     this.setMaxSliderWidth(props._asciiMaxColWidth)
     const { statusBarMessage = null } =
       getBodyAndStatusBarMessages(props.result, props.maxRows) || {}
-    this.setState({ statusBarMessage })
+    const hasTruncatedFields = resultHasTruncatedFields(
+      props.result,
+      props.maxFieldItems
+    )
+    this.setState({ statusBarMessage, hasTruncatedFields })
   }
 
   shouldComponentUpdate(props, state) {
@@ -156,13 +170,19 @@ export class AsciiStatusbar extends Component {
   render() {
     const hasRecords =
       this.props.result.records && this.props.result.records.length
-    const { maxColWidth, maxSliderWidth } = this.state
+    const { maxColWidth, maxSliderWidth, hasTruncatedFields } = this.state
     return (
       <StyledStatsBar>
         <Render if={!hasRecords}>
           <Ellipsis>{this.state.statusBarMessage}</Ellipsis>
         </Render>
         <Render if={hasRecords}>
+          {hasTruncatedFields && (
+            <StyledTruncatedMessage>
+              <Icon name="warning sign" /> Record fields have been
+              truncated.&nbsp;
+            </StyledTruncatedMessage>
+          )}
           <StyledRightPartial>
             <StyledWidthSliderContainer>
               Max column width:
@@ -180,3 +200,7 @@ export class AsciiStatusbar extends Component {
     )
   }
 }
+
+export const AsciiStatusbar = connect(state => ({
+  maxFieldItems: getMaxFieldItems(state)
+}))(AsciiStatusbarComponent)

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

@@ -22,7 +22,10 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import neo4j from 'neo4j-driver'
 
-import { AsciiView, AsciiStatusbar } from './AsciiView'
+import {
+  AsciiViewComponent as AsciiView,
+  AsciiStatusbarComponent as AsciiStatusbar
+} from './AsciiView'
 
 describe('AsciiViews', () => {
   describe('AsciiView', () => {

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

@@ -29,7 +29,13 @@ import {
   StyledTd,
   StyledExpandable
 } from '../styled'
-import { TableStatusbar } from './TableView'
+import {
+  RelatableStatusbar,
+  RelatableStatusbarComponent
+} from './relatable-view'
+import { getMaxFieldItems } from 'shared/modules/settings/settingsDuck'
+import { connect } from 'react-redux'
+import { map, take } from 'lodash-es'
 
 class ExpandableContent extends Component {
   state = {}
@@ -54,16 +60,33 @@ class ExpandableContent extends Component {
   }
 }
 
-export class CodeView extends Component {
+const fieldLimiterFactory = maxFieldItems => (key, val) => {
+  if (!maxFieldItems || key !== '_fields') {
+    return val
+  }
+
+  return map(val, field => {
+    return Array.isArray(field) ? take(field, maxFieldItems) : field
+  })
+}
+
+export class CodeViewComponent extends Component {
   shouldComponentUpdate(props) {
     return !this.props.result || !deepEquals(props.result, this.props.result)
   }
-
   render() {
-    const { request = {}, query } = this.props
+    const { request = {}, query, maxFieldItems } = this.props
     if (request.status !== 'success') return null
-    const resultJson = JSON.stringify(request.result.records, null, 2)
-    const summaryJson = JSON.stringify(request.result.summary, null, 2)
+    const resultJson = JSON.stringify(
+      request.result.records,
+      fieldLimiterFactory(maxFieldItems),
+      2
+    )
+    const summaryJson = JSON.stringify(
+      request.result.summary,
+      fieldLimiterFactory(maxFieldItems),
+      2
+    )
     return (
       <PaddedDiv>
         <StyledTable>
@@ -97,4 +120,9 @@ export class CodeView extends Component {
   }
 }
 
-export const CodeStatusbar = TableStatusbar
+export const CodeView = connect(state => ({
+  maxFieldItems: getMaxFieldItems(state)
+}))(CodeViewComponent)
+
+export const CodeStatusbarComponent = RelatableStatusbarComponent
+export const CodeStatusbar = RelatableStatusbar

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

@@ -22,7 +22,10 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import neo4j from 'neo4j-driver'
 
-import { CodeView, CodeStatusbar } from './CodeView'
+import {
+  CodeViewComponent as CodeView,
+  CodeStatusbarComponent as CodeStatusbar
+} from './CodeView'
 
 describe('CodeViews', () => {
   describe('CodeView', () => {