CODEWITHSUNDEEP
neo4j
Hamza Massaoudi
Hamza Massaoudi

Reputation: 21

Clickable Url property in Neo4j

I want to add a URL property to a node in Neo4J. The probleme is that the URL is not clickable. Is there a way to make it rendered and clickable in Neo4J ?

Upvotes: 2

Views: 1067

Answers (1)

Himanshu Jain
Himanshu Jain

Reputation: 1818

I will answer the question assuming that you are talking about the Neo4j Dashboard. The custom styling that they currently provide applies to the graph component which includes the nodes and relationships: Grass Styling

The property value in the property bar below that is not provided.

I see 2 ways of achieving this:

First

If its for a bigger audience, the correct way would be to edit the Neo4j browser code to make these changes. The browser is actually made using React. Once you figure out the component and code actually rendering the properties of the node, you can edit that to show the url as link.

Step1: Using inspect element to find the classes of the properties status bar, I was able to narrow down the code that was rendering this. In your case, the file was: inspector.jsx and the component we are looking for is StyledInspectorFooterRowListPair . This you can figure out from inspect element.

Step2: We see that the StyledInspectorFooterRowListPair is using the mapItemProperties to render the key, value pairs. So just modifying that method solves the problem.

const mapItemProperties = itemProperties =>
  itemProperties
    .sort(
      ({ key: keyA }, { key: keyB }) =>
        keyA < keyB ? -1 : keyA === keyB ? 0 : 1
    )
    .map((prop, i) => (
      <StyledInspectorFooterRowListPair className='pair' key={'prop' + i}>
        <StyledInspectorFooterRowListKey className='key'>
          {prop.key + ': '}
        </StyledInspectorFooterRowListKey>
        <StyledInspectorFooterRowListValue className='value'>
         { prop.key =="link"
            ? <a href={optionalToString(prop.value)}>{optionalToString(prop.value)}</a>
            : optionalToString(prop.value)
         }
        </StyledInspectorFooterRowListValue>
      </StyledInspectorFooterRowListPair>
    ))

The code mentioned below is actually responsible for rendering the link element if the node property name is "link". You can use any other logic that you like. That is an example.

{ prop.key =="link"
  ? <a href={optionalToString(prop.value)}> {optionalToString(prop.value)} 
    </a>
  : optionalToString(prop.value)
}

Step3 Use the steps mentioned in the repository to start the project.

Working Example

Second

If its only for you, you can get away with creating just a simple browser extension which would change these properties into links.

Upvotes: 1

Related Questions