Skip to content

Commit

Permalink
NodeInspectorPanel shows by default but can be turned-off by option (#21
Browse files Browse the repository at this point in the history
)

* NodeInspectorPanel shows by default but can be turned-off by option

* Fix test

* Version bump

* Self-review: add documentation
  • Loading branch information
QubitPi authored Nov 21, 2023
1 parent 6736e69 commit 51168eb
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 39 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ yarn start-prod

Neo4j Browser has both unit and end to end tests running automatically on every pull request. To run the tests locally:

`yarn test-unit` runs a linter and then our unit tests.
`yarn jest` runs our unit tests.

`yarn test-e2e` runs our Cypress end to end tests in the easiest, slowest way. Running them with this command requires docker installed and that nothing else runs on ports 7687 and 8080.

Expand Down
33 changes: 19 additions & 14 deletions docs/modules/ROOT/pages/neo4j-arc/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,6 @@ import { BasicNode, BasicRelationship, GraphVisualizer } from "neo4j-devtools-ar
export default function MyGraphComponent(): JSX.Element {
const isFullscreen = true;
const graphData = selectGraphData();
const [hasVis, setHasVis] = useState<boolean>(true);
const [visElement, setVisElement] = useState<null | {
svgElement: unknown;
graphElement: unknown;
type: "plan" | "graph";
}>(null);
const nodes: BasicNode[] = [
{
id: "1",
Expand Down Expand Up @@ -67,6 +57,8 @@ export default function MyGraphComponent(): JSX.Element {
}
]
const isFullscreen = true;
return (
<GraphVisualizer
maxNeighbours={100}
Expand All @@ -75,10 +67,6 @@ export default function MyGraphComponent(): JSX.Element {
autocompleteRelationships={false}
relationships={links}
isFullscreen={isFullscreen}
assignVisElement={(svgElement: any, graphElement: any) => {
setVisElement({ svgElement, graphElement, type: "graph" });
setHasVis(true);
}}
nodeLimitHit={false}
getAutoCompleteCallback={undefined}
wheelZoomRequiresModKey={!isFullscreen}
Expand All @@ -92,6 +80,23 @@ export default function MyGraphComponent(): JSX.Element {

image:basic-example.png[width=900]

=== Options

==== Turnning Off Inspection Panel

[source,typescript]
----
export default function MyGraphComponent(): JSX.Element {
return (
<GraphVisualizer
...
showNodeInspectorPanel={false}
/>
);
}
----

= Neo4J Browser Internals

The Neo4J Browser is logically composed of 2 parts:
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
/*
* Copyright (c) Jiaqi Liu
*
* 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/>.
*/
import { render, screen } from '@testing-library/react'
import React from 'react'

import { BasicNode, BasicRelationship } from 'neo4j-arc/common'
import { GraphVisualizer } from 'neo4j-arc/graph-visualization'

describe('<GraphVisualizer />', () => {
const isFullscreen = true
const nodes: BasicNode[] = [
{
id: '1',
labels: ['Person'],
properties: {
name: 'Jack',
age: '20'
},
propertyTypes: {
name: 'string',
age: 'number'
}
},
{
id: '2',
labels: ['React'],
properties: {
name: 'ReactJS'
},
propertyTypes: {
name: 'string'
}
}
]
const links: BasicRelationship[] = [
{
id: '3',
startNodeId: '1',
endNodeId: '2',
type: 'likes',
properties: {},
propertyTypes: {}
}
]

type RenderComponentProps = {
showNodeInspectorPanel?: boolean
}

const renderComponent = ({
showNodeInspectorPanel = true
}: RenderComponentProps) => {
if (showNodeInspectorPanel) {
// we never pass showNodeInspectorPanel in this case to test the "default behavior"
return render(
<GraphVisualizer
maxNeighbours={100}
hasTruncatedFields={false}
nodes={nodes}
autocompleteRelationships={true} // "true" prevents "undefined (reading 'baseVal')" test error
relationships={links}
isFullscreen={isFullscreen}
nodeLimitHit={false}
getAutoCompleteCallback={undefined}
wheelZoomRequiresModKey={!isFullscreen}
wheelZoomInfoMessageEnabled={false}
useGeneratedDefaultColors={false}
initialZoomToFit={false}
/>
)
}

return render(
<GraphVisualizer
maxNeighbours={100}
hasTruncatedFields={false}
nodes={nodes}
autocompleteRelationships={true}
relationships={links}
isFullscreen={isFullscreen}
nodeLimitHit={false}
getAutoCompleteCallback={undefined}
wheelZoomRequiresModKey={!isFullscreen}
wheelZoomInfoMessageEnabled={false}
useGeneratedDefaultColors={false}
initialZoomToFit={false}
showNodeInspectorPanel={false}
/>
)
}

test('should render NodeInspectorPanel by default', async () => {
renderComponent({})

expect(
screen.getByRole('button', {
name: 'Collapse the node properties display'
})
).toBeInTheDocument()
})

test('should not render NodeInspectorPanel if explicitly being turned off', async () => {
renderComponent({ showNodeInspectorPanel: false })

expect(
screen.queryByRole('button', {
name: 'Collapse the node properties display'
})
).toBeNull()
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ type GraphVisualizerDefaultProps = {
initialZoomToFit?: boolean
disableWheelZoomInfoMessage: () => void
useGeneratedDefaultColors: boolean
showNodeInspectorPanel: boolean
}
type GraphVisualizerProps = GraphVisualizerDefaultProps & {
relationships: BasicRelationship[]
Expand Down Expand Up @@ -118,7 +119,8 @@ export class GraphVisualizer extends Component<
setNodePropertiesExpandedByDefault: () => undefined,
wheelZoomInfoMessageEnabled: false,
disableWheelZoomInfoMessage: () => undefined,
useGeneratedDefaultColors: true
useGeneratedDefaultColors: true,
showNodeInspectorPanel: true
}

constructor(props: GraphVisualizerProps) {
Expand Down Expand Up @@ -285,28 +287,30 @@ export class GraphVisualizer extends Component<
initialZoomToFit={this.props.initialZoomToFit}
onGraphInteraction={this.props.onGraphInteraction}
/>
<NodeInspectorPanel
graphStyle={graphStyle}
hasTruncatedFields={this.props.hasTruncatedFields}
hoveredItem={this.state.hoveredItem}
selectedItem={this.state.selectedItem}
stats={this.state.stats}
width={this.state.width}
setWidth={(width: number) =>
this.setState({ width: Math.max(panelMinWidth, width) })
}
expanded={this.state.nodePropertiesExpanded}
toggleExpanded={() => {
const { nodePropertiesExpanded } = this.state
this.props.setNodePropertiesExpandedByDefault(
!nodePropertiesExpanded
)
this.setState({ nodePropertiesExpanded: !nodePropertiesExpanded })
}}
DetailsPaneOverride={this.props.DetailsPaneOverride}
OverviewPaneOverride={this.props.OverviewPaneOverride}
onGraphInteraction={this.props.onGraphInteraction}
/>
{this.props.showNodeInspectorPanel && (
<NodeInspectorPanel
graphStyle={graphStyle}
hasTruncatedFields={this.props.hasTruncatedFields}
hoveredItem={this.state.hoveredItem}
selectedItem={this.state.selectedItem}
stats={this.state.stats}
width={this.state.width}
setWidth={(width: number) =>
this.setState({ width: Math.max(panelMinWidth, width) })
}
expanded={this.state.nodePropertiesExpanded}
toggleExpanded={() => {
const { nodePropertiesExpanded } = this.state
this.props.setNodePropertiesExpandedByDefault(
!nodePropertiesExpanded
)
this.setState({ nodePropertiesExpanded: !nodePropertiesExpanded })
}}
DetailsPaneOverride={this.props.DetailsPaneOverride}
OverviewPaneOverride={this.props.OverviewPaneOverride}
onGraphInteraction={this.props.onGraphInteraction}
/>
)}
</StyledFullSizeContainer>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/neo4j-arc/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "neo4j-devtools-arc",
"version": "0.0.52",
"version": "0.0.53",
"main": "dist/neo4j-arc.js",
"author": "Neo4j Inc.",
"license": "GPL-3.0",
Expand Down

0 comments on commit 51168eb

Please sign in to comment.