Fix element-id showing incorrectly in table

e2e_tests/integration/types.spec.ts

@@ -145,6 +145,7 @@ describe('Types in Browser', () => {
       cy.get('[data-testid="vizInspector"]')
         .should('contain', 'P11M2DT2H19')
         .and('contain', 'srid:4326')
+        .and('contain', 'elementId')
     })
     it('renders types in paths in viz correctly', () => {
       cy.executeCommand(':clear')

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

@@ -43,7 +43,6 @@ import { shallowEquals } from 'services/utils'
 import { GlobalState } from 'shared/globalState'
 import { BrowserRequestResult } from 'shared/modules/requests/requestsDuck'
 import { getMaxFieldItems } from 'shared/modules/settings/settingsDuck'
-import { Record } from 'neo4j-driver'
 
 interface BaseAsciiViewComponentProps {
   result: BrowserRequestResult

src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.test.tsx

@@ -55,6 +55,7 @@ describe('<DetailsPane />', () => {
           type: type,
           item: {
             id: 'abc',
+            elementId: 'abc',
             labels,
             propertyList
           }
@@ -65,6 +66,7 @@ describe('<DetailsPane />', () => {
           type: type,
           item: {
             id: 'abc',
+            elementId: 'abc',
             type: 'abc2',
             propertyList
           }
@@ -84,8 +86,8 @@ describe('<DetailsPane />', () => {
 
     expect(screen.getByRole('button', { name: 'Show all' })).toBeInTheDocument()
     expect(
-      screen.getByRole('button', { name: 'Show 2 more' })
-    ).toBeInTheDocument() // id is added to list of properties so only showing 999
+      screen.getByRole('button', { name: 'Show 3 more' })
+    ).toBeInTheDocument() // id & elementId is added to list of properties so only showing 998
     expect(screen.queryByText('prop1000')).not.toBeInTheDocument()
 
     const showAllButton = screen.getByText('Show all')
@@ -117,7 +119,7 @@ describe('<DetailsPane />', () => {
       screen.queryByRole('button', { name: 'Show all' })
     ).toBeInTheDocument()
     expect(
-      screen.getByRole('button', { name: 'Show 2 more' })
+      screen.getByRole('button', { name: 'Show 3 more' })
     ).toBeInTheDocument()
   })
 })

src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx

@@ -41,9 +41,16 @@ export function DetailsPane({
     value: `${vizItem.item.id}`,
     type: 'String'
   }
-  const allItemProperties = [idProperty, ...vizItem.item.propertyList].sort(
-    (a, b) => (a.key < b.key ? -1 : 1)
-  )
+  const elementIdProperty = {
+    key: '<elementId>',
+    value: `${vizItem.item.elementId}`,
+    type: 'String'
+  }
+  const allItemProperties = [
+    idProperty,
+    elementIdProperty,
+    ...vizItem.item.propertyList
+  ].sort((a, b) => (a.key < b.key ? -1 : 1))
   const visibleItemProperties = allItemProperties.slice(0, maxPropertiesCount)
 
   const handleMorePropertiesClick = (numMore: number) => {

src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.test.tsx

@@ -51,6 +51,7 @@ describe('<DetailsPane />', () => {
           type: type,
           item: {
             id: 'abc',
+            elementId: 'abc',
             labels,
             propertyList
           }
@@ -61,6 +62,7 @@ describe('<DetailsPane />', () => {
           type: type,
           item: {
             id: 'abc',
+            elementId: 'abc',
             type: 'abc2',
             propertyList
           }

src/neo4j-arc/common/types/arcTypes.ts

@@ -19,12 +19,14 @@
  */
 export type BasicNode = {
   id: string
+  elementId: string
   labels: string[]
   properties: Record<string, string>
   propertyTypes: Record<string, string>
 }
 export type BasicRelationship = {
   id: string
+  elementId: string
   startNodeId: string
   endNodeId: string
   type: string

src/neo4j-arc/common/utils/driverUtils.ts

@@ -117,6 +117,7 @@ export const extractUniqueNodesAndRels = (
   const nodes = Array.from(nodeMap.values()).map(item => {
     return {
       id: item.identity.toString(),
+      elementId: item.elementId,
       labels: item.labels,
       properties: mapObjectValues(item.properties, propertyToString),
       propertyTypes: mapObjectValues(
@@ -142,6 +143,7 @@ export const extractUniqueNodesAndRels = (
     .map(item => {
       return {
         id: item.identity.toString(),
+        elementId: item.elementId,
         startNodeId: item.start.toString(),
         endNodeId: item.end.toString(),
         type: item.type,

src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.test.tsx

@@ -59,6 +59,7 @@ describe('<DetailsPane />', () => {
           type: type,
           item: {
             id: 'abc',
+            elementId: 'elementId',
             labels,
             propertyList
           }
@@ -69,6 +70,7 @@ describe('<DetailsPane />', () => {
           type: type,
           item: {
             id: 'abc',
+            elementId: 'elementId',
             type: 'abc2',
             propertyList
           }
@@ -88,8 +90,8 @@ describe('<DetailsPane />', () => {
 
     expect(screen.getByRole('button', { name: 'Show all' })).toBeInTheDocument()
     expect(
-      screen.getByRole('button', { name: 'Show 2 more' })
-    ).toBeInTheDocument() // id is added to list of properties so only showing 999
+      screen.getByRole('button', { name: 'Show 3 more' })
+    ).toBeInTheDocument() // id & elementId is added to list of properties so only showing 998
     expect(screen.queryByText('prop1000')).not.toBeInTheDocument()
 
     const showAllButton = screen.getByText('Show all')
@@ -121,7 +123,7 @@ describe('<DetailsPane />', () => {
       screen.queryByRole('button', { name: 'Show all' })
     ).toBeInTheDocument()
     expect(
-      screen.getByRole('button', { name: 'Show 2 more' })
+      screen.getByRole('button', { name: 'Show 3 more' })
     ).toBeInTheDocument()
   })
 })

src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx

@@ -47,9 +47,16 @@ export function DefaultDetailsPane({
     value: `${vizItem.item.id}`,
     type: 'String'
   }
-  const allItemProperties = [idProperty, ...vizItem.item.propertyList].sort(
-    (a, b) => (a.key < b.key ? -1 : 1)
-  )
+  const elementIdProperty = {
+    key: '<element-id>',
+    value: `${vizItem.item.elementId}`,
+    type: 'String'
+  }
+  const allItemProperties = [
+    idProperty,
+    elementIdProperty,
+    ...vizItem.item.propertyList
+  ].sort((a, b) => (a.key < b.key ? -1 : 1))
   const visibleItemProperties = allItemProperties.slice(0, maxPropertiesCount)
 
   const handleMorePropertiesClick = (numMore: number) => {

src/neo4j-arc/graph-visualization/models/Node.ts

@@ -30,6 +30,7 @@ export type NodeCaptionLine = {
 
 export class NodeModel {
   id: string
+  elementId: string
   labels: string[]
   propertyList: VizItemProperty[]
   propertyMap: NodeProperties
@@ -55,7 +56,8 @@ export class NodeModel {
     id: string,
     labels: string[],
     properties: NodeProperties,
-    propertyTypes: Record<string, string>
+    propertyTypes: Record<string, string>,
+    elementId: string
   ) {
     this.id = id
     this.labels = labels
@@ -76,6 +78,7 @@ export class NodeModel {
     this.y = 0
     this.hoverFixed = false
     this.initialPositionCalculated = false
+    this.elementId = elementId
   }
 
   toJSON(): NodeProperties {

src/neo4j-arc/graph-visualization/models/Relationship.ts

@@ -26,6 +26,7 @@ import { NodeModel } from './Node'
 export type RelationshipCaptionLayout = 'internal' | 'external'
 export class RelationshipModel {
   id: string
+  elementId: string
   propertyList: VizItemProperty[]
   propertyMap: Record<string, string>
   source: NodeModel
@@ -52,7 +53,8 @@ export class RelationshipModel {
     target: NodeModel,
     type: string,
     properties: Record<string, string>,
-    propertyTypes: Record<string, string>
+    propertyTypes: Record<string, string>,
+    elementId: string
   ) {
     this.id = id
     this.source = source
@@ -73,6 +75,8 @@ export class RelationshipModel {
     this.captionHeight = 0
     this.captionLayout = 'internal'
     this.centreDistance = 0
+
+    this.elementId = elementId
   }
 
   toJSON(): Record<string, string> {

src/neo4j-arc/graph-visualization/types.ts

@@ -30,7 +30,7 @@ export type VizItem =
 
 export type NodeItem = {
   type: 'node'
-  item: Pick<NodeModel, 'id' | 'labels' | 'propertyList'>
+  item: Pick<NodeModel, 'id' | 'elementId' | 'labels' | 'propertyList'>
 }
 
 type ContextMenuItem = {
@@ -49,7 +49,7 @@ type StatusItem = {
 
 export type RelationshipItem = {
   type: 'relationship'
-  item: Pick<RelationshipModel, 'id' | 'type' | 'propertyList'>
+  item: Pick<RelationshipModel, 'id' | 'elementId' | 'type' | 'propertyList'>
 }
 
 type CanvasItem = {

src/neo4j-arc/graph-visualization/utils/mapper.ts

@@ -46,7 +46,8 @@ export function mapNodes(nodes: BasicNode[]): NodeModel[] {
         node.id,
         node.labels,
         mapProperties(node.properties),
-        node.propertyTypes
+        node.propertyTypes,
+        node.elementId
       )
   )
 }
@@ -64,7 +65,8 @@ export function mapRelationships(
       target,
       rel.type,
       mapProperties(rel.properties),
-      rel.propertyTypes
+      rel.propertyTypes,
+      rel.elementId
     )
   })
 }

src/shared/services/bolt/boltMappings.ts

@@ -252,6 +252,7 @@ export function extractNodesAndRelationshipsFromRecordsForOldVis(
   const nodes = rawNodes.map(item => {
     return {
       id: item.identity.toString(),
+      elementId: item.elementId,
       labels: item.labels,
       properties: itemIntToString(item.properties, converters),
       propertyTypes: Object.entries(item.properties).reduce(
@@ -274,6 +275,7 @@ export function extractNodesAndRelationshipsFromRecordsForOldVis(
   relationships = relationships.map(item => {
     return {
       id: item.identity.toString(),
+      elementId: item.elementId,
       startNodeId: item.start.toString(),
       endNodeId: item.end.toString(),
       type: item.type,
@@ -427,15 +429,19 @@ export const applyGraphTypes = (
         return new types[className](
           applyGraphTypes(tmpItem.identity, types),
           tmpItem.labels,
-          applyGraphTypes(tmpItem.properties, types)
+          applyGraphTypes(tmpItem.properties, types),
+          tmpItem.elementId
         )
       case 'Relationship':
         return new types[className](
           applyGraphTypes(tmpItem.identity, types),
           applyGraphTypes(item.start, types),
           applyGraphTypes(item.end, types),
           item.type,
-          applyGraphTypes(item.properties, types)
+          applyGraphTypes(item.properties, types),
+          tmpItem.elementId,
+          tmpItem.startNodeElementId,
+          tmpItem.endNodeElementId
         )
       case 'PathSegment':
         return new types[className](