Details pane title (#43)

* Details pane title shows node/rel caption instead

* Add unit tests

* Add E2E tests

* Version bump

docs/modules/ROOT/pages/operations/browser-styling.adoc

@@ -36,7 +36,7 @@ If you select a relationship type in the _Overview_, there are several styling o
 [caption="Label and type overview"]
 image:browser-style3.png[]
 
-If you select a node in the _graph result frame_, the _Node Properties_ shows labels and properties; selecting a node label works the same as in the _Overview_.
+If you select a node in the _graph result frame_, the _Node Inspector Panel_ toggles up on the right and shows labels and properties; selecting a node label works the same as in the _Overview_.
 
 .Styling for selected node labels
 =====

e2e_tests/integration/node-inspection-panel.spec.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright Jiaqi Liu
+ *
+ * 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, before */
+
+describe('Node Inspection Panel rendering', () => {
+  before(function () {
+    cy.visit(Cypress.config('url')).title().should('include', 'Neo4j Browser')
+    cy.wait(3000)
+    cy.ensureConnection()
+  })
+
+  it('should display node/rel caption as panel title', () => {
+    cy.executeCommand(':clear')
+    cy.executeCommand(`CREATE (s:SourceNode {name: 'My Node'}) RETURN s`, {
+      parseSpecialCharSequences: false
+    })
+
+    cy.get(`[aria-label^="graph-node"]`)
+      .trigger('mouseover', { force: true })
+      .trigger('mouseenter', { force: true })
+      .get('[data-testid="viz-details-pane-title"]')
+      .contains('My Node')
+  })
+})

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

@@ -128,4 +128,14 @@ describe('<DetailsPane />', () => {
       screen.getByRole('button', { name: 'Show 3 more' })
     ).toBeInTheDocument()
   })
+
+  test('should display node/rel caption as panel title', async () => {
+    renderComponent({
+      propertyList: [{ key: 'name', value: 'New Node', type: 'string' }]
+    })
+
+    expect(screen.getByTestId('viz-details-pane-title').textContent).toEqual(
+      'New Node'
+    )
+  })
 })

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

@@ -58,11 +58,22 @@ export function DetailsPane({
     setMaxPropertiesCount(maxPropertiesCount + numMore)
   }
 
+  let paneTitle = ''
+  const item = vizItem.item
+  const captionPropertyKey = graphStyle
+    .pickupCaptionPropertyKey(item)
+    .replace(/[{}]/g, '')
+  for (let i = 0; i < item.propertyList.length; i++) {
+    if (item.propertyList[i].key == captionPropertyKey) {
+      paneTitle = item.propertyList[i].value
+    }
+  }
+
   return (
     <PaneWrapper>
       <PaneHeader>
-        <PaneTitle>
-          <span>{`${upperFirst(vizItem.type)} properties`}</span>
+        <PaneTitle data-testid="viz-details-pane-title">
+          <span>{`${paneTitle}`}</span>
           <ClipboardCopier
             textToCopy={allItemProperties
               .map(prop => `${prop.key}: ${prop.value}`)

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

@@ -129,4 +129,14 @@ describe('<DetailsPane />', () => {
       screen.getByRole('button', { name: 'Show 3 more' })
     ).toBeInTheDocument()
   })
+
+  test('should display node/rel caption as panel title', async () => {
+    renderComponent({
+      propertyList: [{ key: 'name', value: 'New Node', type: 'string' }]
+    })
+
+    expect(screen.getByTestId('viz-details-pane-title').textContent).toEqual(
+      'New Node'
+    )
+  })
 })

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

@@ -66,11 +66,22 @@ export function DefaultDetailsPane({
     setMaxPropertiesCount(maxPropertiesCount + numMore)
   }
 
+  let paneTitle = ''
+  const item = vizItem.item
+  const captionPropertyKey = graphStyle
+    .pickupCaptionPropertyKey(item)
+    .replace(/[{}]/g, '')
+  for (let i = 0; i < item.propertyList.length; i++) {
+    if (item.propertyList[i].key == captionPropertyKey) {
+      paneTitle = item.propertyList[i].value
+    }
+  }
+
   return (
     <PaneWrapper>
       <PaneHeader>
-        <PaneTitle>
-          <span>{`${upperFirst(vizItem.type)} properties`}</span>
+        <PaneTitle data-testid="viz-details-pane-title">
+          <span>{`${paneTitle}`}</span>
           <ClipboardCopier
             textToCopy={allItemProperties
               .map(prop => `${prop.key}: ${prop.value}`)

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

@@ -280,18 +280,7 @@ export class GraphStyleModel {
     return DEFAULT_COLORS[index]
   }
 
-  getDefaultNodeCaption = function (
-    item: any
-  ): { caption: string } | { defaultCaption: string } {
-    if (
-      !item ||
-      // @ts-expect-error ts-migrate(2365) FIXME: Operator '>' cannot be applied to types 'boolean' ... Remove this comment to see the full error message
-      !(item.propertyList != null ? item.propertyList.length : 0) > 0
-    ) {
-      return {
-        defaultCaption: '<id>'
-      }
-    }
+  pickupCaptionPropertyKey = (item: any): string => {
     const captionPrioOrder = [
       /^name$/i,
       /^title$/i,
@@ -300,7 +289,8 @@ export class GraphStyleModel {
       /description$/i,
       /^.+/
     ]
-    let defaultCaption = captionPrioOrder.reduceRight((leading, current) => {
+
+    return captionPrioOrder.reduceRight((leading, current) => {
       const hits = item.propertyList.filter((prop: any) =>
         current.test(prop.key)
       )
@@ -310,6 +300,23 @@ export class GraphStyleModel {
         return leading
       }
     }, '')
+  }
+
+  getDefaultNodeCaption = (
+    item: any
+  ): { caption: string } | { defaultCaption: string } => {
+    if (
+      !item ||
+      // @ts-expect-error ts-migrate(2365) FIXME: Operator '>' cannot be applied to types 'boolean' ... Remove this comment to see the full error message
+      !(item.propertyList != null ? item.propertyList.length : 0) > 0
+    ) {
+      return {
+        defaultCaption: '<id>'
+      }
+    }
+
+    let defaultCaption = this.pickupCaptionPropertyKey(item)
+
     defaultCaption || (defaultCaption = '<id>')
     return {
       caption: defaultCaption

src/neo4j-arc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo4j-devtools-arc",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",