diff --git a/docs/modules/ROOT/content-nav.adoc b/docs/modules/ROOT/content-nav.adoc index b9f1a5c7c58..df2c1aa3d97 100644 --- a/docs/modules/ROOT/content-nav.adoc +++ b/docs/modules/ROOT/content-nav.adoc @@ -32,5 +32,6 @@ * xref:neo4j-arc/index.adoc[Neo4J Arc] ** xref:neo4j-arc/i18n.adoc[] ** xref:neo4j-arc/themes.adoc[] +** xref:neo4j-arc/internals.adoc[] ** xref:neo4j-arc/graph-modelling.adoc[] ** xref:neo4j-arc/graph-interactions.adoc[] diff --git a/docs/modules/ROOT/images/neo4j-browser.drawio b/docs/modules/ROOT/images/neo4j-browser.drawio index a21ea4490d9..270b229e07d 100644 --- a/docs/modules/ROOT/images/neo4j-browser.drawio +++ b/docs/modules/ROOT/images/neo4j-browser.drawio @@ -1,20 +1,26 @@ - + - + + + + + + + - + - + - + - + @@ -161,25 +167,31 @@ - + - + + + + + + + - + - + - + - + @@ -191,28 +203,28 @@ - + - + - + - + - + - + - + @@ -221,13 +233,13 @@ - + - + @@ -239,35 +251,44 @@ - + - + - + - + - + - + - + - + - - - - + + + + + + + + + + + + + diff --git a/docs/modules/ROOT/images/neo4j-browser.png b/docs/modules/ROOT/images/neo4j-browser.png index 353972f16d5..315e5153e55 100644 Binary files a/docs/modules/ROOT/images/neo4j-browser.png and b/docs/modules/ROOT/images/neo4j-browser.png differ diff --git a/docs/modules/ROOT/pages/neo4j-arc/index.adoc b/docs/modules/ROOT/pages/neo4j-arc/index.adoc index 1a36d0d7b31..a009eb3af31 100644 --- a/docs/modules/ROOT/pages/neo4j-arc/index.adoc +++ b/docs/modules/ROOT/pages/neo4j-arc/index.adoc @@ -82,7 +82,15 @@ image:basic-example.png[width=900] === Options -==== Turnning Off Inspection Panel +==== Turnning Off Node Inspector Panel + +neo4j-arc shows graph with an accompanying inspection panel on the right side. This panel might be not needed in at +least 2 business scenarios: + +1. a simple static page that just needs to show some static and simple graph +2. a MVP product has planned but would not want to add panel feature at the moment + +The inspector panel will show by default. To turn it-off: [source,typescript] ---- @@ -97,82 +105,23 @@ export default function MyGraphComponent(): JSX.Element { } ---- -= Neo4J Browser Internals - -The Neo4J Browser is logically composed of 2 parts: - -. The neo4j-arc, which is the current part we are discussing -.. The neo4j-arc is based on D3 and implements its own layout, coloring, and link drawing. For example, the calculation - of arrow, i.e. links, between nodes uses some - https://github.com/QubitPi/neo4j-browser/blob/master/src/neo4j-arc/graph-visualization/utils/ArcArrow.ts[very complicated math] - along with very prelimiary MDN standard basic shap specification. -. A user-interface that combines the graph rendering (supported by the graphing module), database, and user - interaction together - -[IMPORTANT] -==== -Although we see `` property for every node or relationship in the node inspection panel of Neo4J Browser, those -ID's are NOT generated by neo4j-arc, but https://stackoverflow.com/a/67702695[instead by Neo4J database]. This pattern -should be honored by all client using neo4j-arc library. All nodes or relationships, at the moment of being fed into -the module for graph viauzliation, MUST all have defined ID's. - -*neo4j-arc does NOT generate or manage node/rel ID's* - -Note: the displayed `` is the value of NodeMode.id -==== - -[WARNING] -==== -We will not have any TypeDoc documentation, because the TypeScript version used in Neo4J Browser is not supprted by the -TypeDoc -==== - -== Component Diagram (WIP) - -image:neo4j-browser.png[width=900] - -* The orange triangle labled with "On Canvas Interaction" is discussed in detail in - link:neo4j-arc/graph-interactions[graph interactions] section -* Sentry.io is initialized in the top index.tsx -* AppInit.tsx is responsible for several initializations: -+ --- -** Redux -** Suber (discussed below) -** Apollo GraphQL Client -** Drag & Drop Plugin --- -+ -The initialization assumes provider pattern around regular App component: +==== Turnning Off Properties Table + [source,typescript] ---- - - - - - - - - - ----- - -* Neo4J Browser styling is implemented via https://styled-components.com/[styled-components] and is initialized in App.tsx - -=== What is Suber? - -Looking at suber-related code (`bus`), we feel that it is very similar to Redux. It's true that both Suber and Redux are -designed to *decouple React components*. - -Redux decouples components via "state", which makes it great for shared application state handling. Essentially, if one -component A depends on component B via a state S; when S is updated in B, A gets re-rendered accordingly. Redux is our -choice in this case +export default function MyGraphComponent(): JSX.Element { -But what if component A depends on B via a prop that is not a state? For example, if component B is a database client -and component A is a user registration form, then there is no concept of state S between A and B, because between A and -B is just a one-time username/password message. Application state that is not shared should not go into Redux, it should -go directly into the component that needs it. + return ( + + ); +} +---- -This is where https://github.com/oskarhane/suber[suber] comes in. +=== Node Inspector Panel -image:redux-vs-suber.png[width=900] +neo4j-arc comes with the default overview pane (`DefaultOverviewPane.tsx`) and details pane (`DefaultDetaislPane.tsx`). +If initializing `GraphVisualizer` does not specify `OverviewPaneOverride` or `DetailsPaneOverride`, their corresponding +default implementation will be used. diff --git a/docs/modules/ROOT/pages/neo4j-arc/internals.adoc b/docs/modules/ROOT/pages/neo4j-arc/internals.adoc new file mode 100644 index 00000000000..967399a403b --- /dev/null +++ b/docs/modules/ROOT/pages/neo4j-arc/internals.adoc @@ -0,0 +1,82 @@ +:description: This section describes the neo4j-arc, including its architecture and components + +[[neo4j-arc-internals]] += Neo4J Browser Internals + +The Neo4J Browser is logically composed of 2 parts: + +. The neo4j-arc, which is the current part we are discussing +.. The neo4j-arc is based on D3 and implements its own layout, coloring, and link drawing. For example, the calculation + of arrow, i.e. links, between nodes uses some + https://github.com/QubitPi/neo4j-browser/blob/master/src/neo4j-arc/graph-visualization/utils/ArcArrow.ts[very complicated math] + along with very prelimiary MDN standard basic shap specification. +. A user-interface that combines the graph rendering (supported by the graphing module), database, and user + interaction together + +[IMPORTANT] +==== +Although we see `` property for every node or relationship in the node inspection panel of Neo4J Browser, those +ID's are NOT generated by neo4j-arc, but https://stackoverflow.com/a/67702695[instead by Neo4J database]. This pattern +should be honored by all client using neo4j-arc library. All nodes or relationships, at the moment of being fed into +the module for graph viauzliation, MUST all have defined ID's. + +*neo4j-arc does NOT generate or manage node/rel ID's* + +Note: the displayed `` is the value of NodeMode.id +==== + +[WARNING] +==== +We will not have any TypeDoc documentation, because the TypeScript version used in Neo4J Browser is not supprted by the +TypeDoc +==== + +== Component Diagram (WIP) + +image:neo4j-browser.png[width=900] + +* The orange triangle labled with "On Canvas Interaction" is discussed in detail in + link:neo4j-arc/graph-interactions[graph interactions] section +* Sentry.io is initialized in the top index.tsx +* AppInit.tsx is responsible for several initializations: ++ +-- +** Redux +** Suber (discussed below) +** Apollo GraphQL Client +** Drag & Drop Plugin +-- ++ +The initialization assumes provider pattern around regular App component: +[source,typescript] +---- + + + + + + + + + +---- + +* Neo4J Browser styling is implemented via https://styled-components.com/[styled-components] and is initialized in App.tsx + +=== What is Suber? + +Looking at suber-related code (`bus`), we feel that it is very similar to Redux. It's true that both Suber and Redux are +designed to *decouple React components*. + +Redux decouples components via "state", which makes it great for shared application state handling. Essentially, if one +component A depends on component B via a state S; when S is updated in B, A gets re-rendered accordingly. Redux is our +choice in this case + +But what if component A depends on B via a prop that is not a state? For example, if component B is a database client +and component A is a user registration form, then there is no concept of state S between A and B, because between A and +B is just a one-time username/password message. Application state that is not shared should not go into Redux, it should +go directly into the component that needs it. + +This is where https://github.com/oskarhane/suber[suber] comes in. + +image:redux-vs-suber.png[width=900]