diff --git a/README.md b/README.md index 9ebabbb5f6b..aaed7a51d9f 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/docs/modules/ROOT/pages/neo4j-arc/index.adoc b/docs/modules/ROOT/pages/neo4j-arc/index.adoc index 97eec6c38f6..be5a5620ae6 100644 --- a/docs/modules/ROOT/pages/neo4j-arc/index.adoc +++ b/docs/modules/ROOT/pages/neo4j-arc/index.adoc @@ -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(true); - const [visElement, setVisElement] = useState(null); - const nodes: BasicNode[] = [ { id: "1", @@ -67,6 +57,8 @@ export default function MyGraphComponent(): JSX.Element { } ] + const isFullscreen = true; + return ( { - setVisElement({ svgElement, graphElement, type: "graph" }); - setHasVis(true); - }} nodeLimitHit={false} getAutoCompleteCallback={undefined} wheelZoomRequiresModKey={!isFullscreen} @@ -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 ( + + ); +} +---- + = Neo4J Browser Internals The Neo4J Browser is logically composed of 2 parts: diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.test.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.test.tsx new file mode 100644 index 00000000000..d2c4e9a942f --- /dev/null +++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.test.tsx @@ -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 . + */ +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('', () => { + 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( + + ) + } + + return render( + + ) + } + + 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() + }) +}) diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.tsx index aaeb65d3957..c10ffac4c93 100644 --- a/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.tsx +++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.tsx @@ -56,6 +56,7 @@ type GraphVisualizerDefaultProps = { initialZoomToFit?: boolean disableWheelZoomInfoMessage: () => void useGeneratedDefaultColors: boolean + showNodeInspectorPanel: boolean } type GraphVisualizerProps = GraphVisualizerDefaultProps & { relationships: BasicRelationship[] @@ -118,7 +119,8 @@ export class GraphVisualizer extends Component< setNodePropertiesExpandedByDefault: () => undefined, wheelZoomInfoMessageEnabled: false, disableWheelZoomInfoMessage: () => undefined, - useGeneratedDefaultColors: true + useGeneratedDefaultColors: true, + showNodeInspectorPanel: true } constructor(props: GraphVisualizerProps) { @@ -285,28 +287,30 @@ export class GraphVisualizer extends Component< initialZoomToFit={this.props.initialZoomToFit} onGraphInteraction={this.props.onGraphInteraction} /> - - 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 && ( + + 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} + /> + )} ) } diff --git a/src/neo4j-arc/package.json b/src/neo4j-arc/package.json index dea5493dae0..fdb18f7f9d5 100644 --- a/src/neo4j-arc/package.json +++ b/src/neo4j-arc/package.json @@ -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",