diff --git a/browser-manual/5/_images/neo4j-browser.drawio b/browser-manual/5/_images/neo4j-browser.drawio
new file mode 100644
index 00000000000..012567d14b3
--- /dev/null
+++ b/browser-manual/5/_images/neo4j-browser.drawio
@@ -0,0 +1,253 @@
+<mxfile host="app.diagrams.net" modified="2023-10-04T08:29:15.363Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36" etag="WhTwIJZaDVUG441ajH24" version="22.0.2" type="device">
+  <diagram name="Page-1" id="7fj5daxvw-zFe0u0rVS1">
+    <mxGraphModel dx="3265" dy="4275" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="hoaP64khOImTLO0eVR3v-3" value="" style="triangle;whiteSpace=wrap;html=1;fillColor=none;dashed=1;strokeWidth=6;strokeColor=#EB6E52;rotation=3;" vertex="1" parent="1">
+          <mxGeometry x="540" y="450" width="620" height="670" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-4" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeWidth=3;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="580" y="1380" width="840" height="240" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-5" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeWidth=3;dashed=1;" vertex="1" parent="1">
+          <mxGeometry x="75" y="-480" width="1430" height="910" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-6" value="&lt;font size=&quot;1&quot; face=&quot;Ubuntu&quot;&gt;&lt;b style=&quot;font-size: 20px;&quot;&gt;Graphing Module&lt;/b&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="1140" y="1420" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;strokeWidth=3;startArrow=classic;startFill=1;endArrow=none;endFill=0;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-8" target="hoaP64khOImTLO0eVR3v-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-8" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;index.html&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#E96328;strokeWidth=3;" vertex="1" parent="1">
+          <mxGeometry x="730" y="-1320" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-9" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;index.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="730" y="-1100" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;curved=1;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-9" target="hoaP64khOImTLO0eVR3v-9">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="832" y="-1120" />
+              <mxPoint x="910" y="-1120" />
+              <mxPoint x="910" y="-1040" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-11" value="&lt;font style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;setupSentry()&lt;/b&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="910" y="-1100" width="160" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-16" target="hoaP64khOImTLO0eVR3v-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-16" target="hoaP64khOImTLO0eVR3v-24">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-16" target="hoaP64khOImTLO0eVR3v-26">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-16" target="hoaP64khOImTLO0eVR3v-20">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-16" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;AppInit.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="730" y="-880" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-20" target="hoaP64khOImTLO0eVR3v-28">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-18" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-20" target="hoaP64khOImTLO0eVR3v-33">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-19" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;strokeWidth=3;edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-20" target="hoaP64khOImTLO0eVR3v-37">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-20" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;App.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="730" y="-660" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-21" value="&lt;font face=&quot;Ubuntu&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;wraps&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="660" y="-730" width="180" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-22" value="&lt;font face=&quot;Ubuntu&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;is dependency of&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="790" y="-940" width="180" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-23" value="&lt;font face=&quot;Ubuntu&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;is dependency of&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="600" y="-1160" width="180" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-24" value="&lt;font color=&quot;#7248b6&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Redux Store&lt;/b&gt;&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=none;strokeColor=#7248B6;strokeWidth=3;" vertex="1" parent="1">
+          <mxGeometry x="1320" y="-880" width="160" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-25" value="&lt;font face=&quot;Ubuntu&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;connect to via Redux Provider&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="1000" y="-870" width="180" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-26" value="&lt;font color=&quot;#0086f7&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b style=&quot;&quot;&gt;Neo4J DB&lt;/b&gt;&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=none;strokeColor=#0086F7;strokeWidth=3;" vertex="1" parent="1">
+          <mxGeometry x="265" y="-880" width="160" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-27" value="&lt;font face=&quot;Ubuntu&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;connect to via suber&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="490" y="-870" width="180" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-28" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;AppInit.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5B4372;" vertex="1" parent="1">
+          <mxGeometry x="280" y="-660" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-29" value="&lt;font face=&quot;Ubuntu&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;ErrorBoundary&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="480" y="-650" width="180" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;curved=1;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-20" target="hoaP64khOImTLO0eVR3v-20">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="832" y="-680" />
+              <mxPoint x="960" y="-680" />
+              <mxPoint x="960" y="-600" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-31" value="&lt;font face=&quot;Ubuntu&quot; style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;ThemeProvider&lt;br&gt;&lt;/font&gt;(styled-components)&lt;/b&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="940" y="-670" width="180" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-33" target="hoaP64khOImTLO0eVR3v-28">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-33" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Sidebar.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="425" y="-335" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-34" value="&lt;font face=&quot;Ubuntu&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;ErrorBoundary&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="170" y="-430" width="180" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-35" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-37" target="hoaP64khOImTLO0eVR3v-38">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-37" target="hoaP64khOImTLO0eVR3v-41">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-37" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Main.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="1070" y="-350" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-38" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Editor.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="810" y="-350" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-39" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-41" target="hoaP64khOImTLO0eVR3v-24">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-40" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-41" target="hoaP64khOImTLO0eVR3v-44">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-41" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Stream.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="1070" y="-150" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-44" target="hoaP64khOImTLO0eVR3v-24">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-43" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-44" target="hoaP64khOImTLO0eVR3v-48">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-44" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Cypher&lt;br&gt;Frame.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="1070" y="60" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-45" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-48" target="hoaP64khOImTLO0eVR3v-24">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-46" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-48" target="hoaP64khOImTLO0eVR3v-51">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-47" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;dashed=1;strokeWidth=3;curved=1;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-75" target="hoaP64khOImTLO0eVR3v-71">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-48" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Visualization&lt;br&gt;View.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="1060" y="270" width="140" height="140" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-49" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;strokeWidth=3;edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-51" target="hoaP64khOImTLO0eVR3v-53">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-50" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-51" target="hoaP64khOImTLO0eVR3v-54">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-51" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Graph&lt;br&gt;Visualizer.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="1060" y="500" width="140" height="140" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-52" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.393;entryY=0.004;entryDx=0;entryDy=0;entryPerimeter=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-53" target="hoaP64khOImTLO0eVR3v-4">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-53" value="&lt;b style=&quot;border-color: var(--border-color); color: rgb(255, 255, 255); font-family: Ubuntu; font-size: 20px;&quot;&gt;Graph.tsx&lt;/b&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="850" y="690" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-54" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Node&lt;br&gt;InspectionPanel.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="1250" y="670" width="210" height="210" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-55" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Relationship.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="665" y="1415" width="170" height="170" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-56" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Graph.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="970" y="1440" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-57" value="&lt;font color=&quot;#ffffff&quot; style=&quot;font-size: 20px;&quot; face=&quot;Ubuntu&quot;&gt;&lt;b&gt;Node.tsx&lt;/b&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="1240" y="1445" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-58" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-61" target="hoaP64khOImTLO0eVR3v-66">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-59" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-61" target="hoaP64khOImTLO0eVR3v-67">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-60" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-61" target="hoaP64khOImTLO0eVR3v-68">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-61" value="&lt;font face=&quot;Ubuntu&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b style=&quot;&quot;&gt;visualization module&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=#5FD3F2;fillColor=none;gradientColor=none;strokeWidth=3;" vertex="1" parent="1">
+          <mxGeometry x="292.44" y="750" width="140" height="140" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-62" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=0;strokeColor=none;fillColor=#10739E;fontSize=10;align=center;fillOpacity=20;strokeWidth=4;" vertex="1" parent="1">
+          <mxGeometry x="670" y="710" width="100" height="100" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-63" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.30120819117478337;endAngle=0.6226935680937278;arcWidth=0.5;rotation=10;strokeWidth=3;" vertex="1" parent="1">
+          <mxGeometry x="233.34" y="985.28" width="250" height="250" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-64" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.30120819117478337;endAngle=0.6226935680937278;arcWidth=0.5;rotation=-110;strokeWidth=3;" vertex="1" parent="1">
+          <mxGeometry x="236.78" y="979" width="250" height="250" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-65" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.978;entryY=0.678;entryDx=0;entryDy=0;entryPerimeter=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-61" target="hoaP64khOImTLO0eVR3v-64">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-66" value="&lt;b style=&quot;border-color: var(--border-color); color: rgb(255, 255, 255); font-family: Ubuntu; font-size: 20px;&quot;&gt;Force&lt;br&gt;Simulation&lt;br&gt;&lt;/b&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="10" y="760" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-67" value="&lt;b style=&quot;border-color: var(--border-color); color: rgb(255, 255, 255); font-family: Ubuntu; font-size: 20px;&quot;&gt;Graph&lt;br&gt;Geometry&lt;br&gt;Model&lt;br&gt;&lt;/b&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="50" y="950" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-68" value="&lt;b style=&quot;border-color: var(--border-color); color: rgb(255, 255, 255); font-family: Ubuntu; font-size: 20px;&quot;&gt;mouse&lt;br&gt;EventHand.&lt;br&gt;&lt;/b&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="301.78" y="530" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-69" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;endArrow=none;endFill=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-71" target="hoaP64khOImTLO0eVR3v-53">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-70" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;endArrow=none;endFill=0;strokeWidth=3;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-71" target="hoaP64khOImTLO0eVR3v-73">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-71" value="&lt;b style=&quot;border-color: var(--border-color); color: rgb(255, 255, 255); font-family: Ubuntu; font-size: 20px;&quot;&gt;Graph&lt;br&gt;Event&lt;br&gt;Hand.&lt;br&gt;Model&lt;br&gt;&lt;/b&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="580" y="540" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-72" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=1;entryDx=0;entryDy=0;strokeWidth=3;endArrow=none;endFill=0;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-73" target="hoaP64khOImTLO0eVR3v-53">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-73" value="&lt;b style=&quot;border-color: var(--border-color); color: rgb(255, 255, 255); font-family: Ubuntu; font-size: 20px;&quot;&gt;Visualization&lt;br&gt;&lt;/b&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="575" y="820" width="130" height="130" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-74" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;dashed=1;strokeWidth=3;curved=1;" edge="1" parent="1" source="hoaP64khOImTLO0eVR3v-48" target="hoaP64khOImTLO0eVR3v-75">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="1060" y="340" as="sourcePoint" />
+            <mxPoint x="605" y="530" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-75" value="&lt;div style=&quot;color: rgb(41, 41, 41); background-color: rgb(255, 255, 255); font-family: Menlo, Monaco, Ubuntu, monospace, Menlo, Monaco, &amp;quot;Courier New&amp;quot;, monospace; font-size: 20px; line-height: 30px;&quot;&gt;onGraphInteraction&lt;/div&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="800" y="325" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-76" value="&lt;font face=&quot;Ubuntu&quot; color=&quot;#ffffff&quot;&gt;&lt;span style=&quot;font-size: 20px;&quot;&gt;&lt;b&gt;Renders.ts&lt;br&gt;&lt;/b&gt;&lt;/span&gt;&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=none;fillColor=#5FD3F2;" vertex="1" parent="1">
+          <mxGeometry x="298.34000000000003" y="1046" width="120" height="120" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-77" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.30120819117478337;endAngle=0.6226935680937278;arcWidth=0.5;rotation=130;strokeWidth=3;" vertex="1" parent="1">
+          <mxGeometry x="230.34" y="979" width="250" height="250" as="geometry" />
+        </mxCell>
+        <mxCell id="hoaP64khOImTLO0eVR3v-78" value="&lt;font size=&quot;1&quot; face=&quot;Ubuntu&quot; color=&quot;#eb6e52&quot;&gt;&lt;b style=&quot;font-size: 20px;&quot;&gt;On Canvas Interaction&lt;/b&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;rotation=333;" vertex="1" parent="1">
+          <mxGeometry x="630" y="745" width="240" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/browser-manual/5/_images/neo4j-browser.png b/browser-manual/5/_images/neo4j-browser.png
index f8d4927af76..535f3d6726c 100644
Binary files a/browser-manual/5/_images/neo4j-browser.png and b/browser-manual/5/_images/neo4j-browser.png differ
diff --git a/browser-manual/5/internals/graph-interactions/index.html b/browser-manual/5/internals/graph-interactions/index.html
new file mode 100644
index 00000000000..6d3e7186628
--- /dev/null
+++ b/browser-manual/5/internals/graph-interactions/index.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1">
+    <meta name="msvalidate.01" content="B5163518CBE4A854B63801277FE5E35C" />
+    <meta name="google-site-verification" content="ucqagxjVuq0lJZeLKs0F5AppzK111lNt3IoxU6mzlJE" />
+    <meta name="robots" content="index, follow" />
+    <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+    <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="article" />
+
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-WK23PSS');</script>
+<!-- Hotjar Tracking Code for staging -->
+<script>
+    (function(h,o,t,j,a,r){
+        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+        h._hjSettings={hjid:3587741,hjsv:6};
+        a=o.getElementsByTagName('head')[0];
+        r=o.createElement('script');r.async=1;
+        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+        a.appendChild(r);
+    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+</script>
+<!-- End Hotjar Tracking code -->
+    <title>How Graph Interations Take Effect on Displayed Graph and Backing Database - Neo4j Browser</title>
+      <meta name="description" content="How graph interations take effect on displayed graph and backing database">
+<link rel="stylesheet" href="https://neo4j.com/wp-content/themes/neo4jweb/assets/neo4j-react-modules-assets/search-preact/chunkless/bundle.css" />
+<link rel="stylesheet" href="https://neo4j.com/wp-content/themes/neo4jweb/assets/neo4j-react-modules-assets/search-preact/chunkless/utilities.min.css" />
+
+    <link rel="preload" href="../../../../assets/fonts/fontawesome-webfont.woff2?v=4.7.0" as="font">
+    <link rel="stylesheet" href="../../../../assets/css/site.css">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
+
+    <link rel="shortcut icon" href="https://neo4j.com/wp-content/themes/neo4jweb/favicon.ico" />
+
+
+
+    <meta property="neo:type" content="Docs">
+    <meta property="neo:site" content="Reference Docs">
+
+
+    <meta property="og:site_name" content="Neo4j Graph Data Platform" />
+    <meta property="article:publisher" content="https://www.facebook.com/neo4j.graph.database" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:creator" content="@neo4j" />
+    <meta name="twitter:site" content="@neo4j" />
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="How Graph Interations Take Effect on Displayed Graph and Backing Database - Neo4j Browser" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:image" content="https://dist.neo4j.com/wp-content/uploads/20210423062553/neo4j-social-share-21.png" />
+    <meta property="og:description" content="How graph interations take effect on displayed graph and backing database" />
+    <meta property="og:url" content="https://neo4j.com/docs/browser-manual/5/internals/graph-interactions/" />
+    <link rel="shortcut icon" href="https://neo4j.com/wp-content/themes/neo4jweb/favicon.ico" />
+  </head>
+  <body class="article docs">
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WK23PSS"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+<script>(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
+for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
+MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
+mixpanel.init("4bfb2414ab973c741b6f067bf06d5575", {batch_requests: true})
+mixpanel.track("Page View", {
+    pathname: window.location.origin + window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+    referrer: document.referrer,
+})
+</script>
+<header class="header">
+  <nav class="navbar">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/">
+
+      <img class="navbar-logo" src="https://dist.neo4j.com/wp-content/uploads/20210422142941/neo4j-logo-2020.svg" alt="Neo4j Docs" />
+      <a href="/docs/" class="navbar-item no-left-padding" aria-label="Docs">
+        Docs
+      </a>
+
+      </div>
+
+      <button class="navbar-search search-button" data-target="topbar-nav" id="search_open_mobile" aria-label="Open Search">
+        <svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" class="fill-current float-right" id="searchx" role="button" title="Search Website">
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
+            stroke-linejoin="round">
+            <g transform="translate(-2.000000, -2.000000)" stroke="#a0aec0" stroke-width="1.5">
+              <circle
+                transform="translate(11.389364, 11.388564) rotate(-23.025000) translate(-11.389364, -11.388564) "
+                cx="11.3893642" cy="11.3885639" r="8.056"></circle>
+              <path d="M17.0853333,17.0844444 L23.3333333,23.3333333" ></path>
+            </g>
+          </g>
+        </svg>
+      </button>
+      <button class="navbar-burger" data-target="topbar-nav" aria-label="Mobile Navigation Button">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+    </div>
+    <div id="topbar-nav" class="navbar-menu">
+            <div class="navbar-end">
+
+
+        <div class="navbar-item has-dropdown is-hoverable docs">
+          <a class="navbar-link" href="/docs/">Docs</a>
+          <div class="navbar-dropdown">
+            <div class="navbar-item project">
+              <span class="project-name">Neo4j DBMS</span>
+              <ul class="project-links">
+                <li><a href="/docs/getting-started/current/" class="project-link">Getting Started</a></li>
+                <li><a href="/docs/operations-manual/current/" class="project-link">Operations</a></li>
+                <li><a href="/docs/migration-guide/current/" class="project-link">Migration and Upgrade</a></li>
+                <li><a href="/docs/status-codes/current/" class="project-link">Status Codes</a></li>
+                <li><a href="/docs/java-reference/current/" class="project-link">Java Reference</a></li>
+                <li><a href="/docs/kerberos-add-on/current/" class="project-link">Kerberos Add-on</a></li>
+              </ul>
+            </div>
+
+            <div class="navbar-item project">
+              <a class="project-name" href="/docs/aura/">Neo4j Aura</a>
+              <ul class="project-links">
+                <li><a class="project-link" href="/docs/aura">Neo4j Aura</a></li>
+                <li><a class="project-link" href="/docs/aura/auradb/">Neo4j AuraDB</a></li>
+                <li><a class="project-link" href="/docs/aura/aurads/">Neo4j AuraDS</a></li>
+              </ul>
+            </div>
+
+            <div class="navbar-item project">
+              <span class="project-name">Neo4j Tools</span>
+              <ul class="project-links">
+                <li><a href="/docs/bloom-user-guide/current/" class="project-link">Neo4j Bloom</a></li>
+                <li><a href="/docs/browser-manual/current/" class="project-link">Neo4j Browser</a></li>
+                <li><a href="/docs/data-importer/current/" class="project-link">Neo4j Data Importer</a></li>
+                <li><a href="/docs/desktop-manual/current/" class="project-link">Neo4j Desktop</a></li>
+                <li><a href="/docs/ops-manager/current/" class="project-link">Neo4j Ops Manager</a></li>
+              </ul>
+            </div>
+
+            <div class="navbar-item project">
+              <span class="project-name">Neo4j Graph Data Science</span>
+              <ul class="project-links">
+                <li><a href="/docs/graph-data-science/current/" class="project-link">Neo4j Graph Data Science Library</a></li>
+              </ul>
+            </div>
+
+            <div class="navbar-item project">
+              <span class="project-name">Cypher Query Language</span>
+              <ul class="project-links">
+                <li><a href="/docs/cypher-manual/current/" class="project-link">Cypher</a></li>
+                <li><a href="/docs/cypher-cheat-sheet/current/" class="project-link">Cypher Cheat Sheet</a></li>
+                <li><a href="/docs/apoc/current/" class="project-link">APOC Library</a></li>
+              </ul>
+            </div>
+
+            <div class="navbar-item project">
+              <span class="project-name" href="/docs/drivers-apis">Create applications</span>
+              <ul class="project-links">
+                <li><a href="/docs/python-manual/current/" class="project-link">Python Driver</a></li>
+                <li><a href="/docs/go-manual/current/" class="project-link">Go Driver</a></li>
+                <li><a href="/docs/java-manual/current/" class="project-link">Java Driver</a></li>
+                <li><a href="/docs/javascript-manual/current/" class="project-link">JavaScript Driver</a></li>
+                <li><a href="/docs/dotnet-manual/current/" class="project-link">.Net Driver</a></li>
+                <li><a href="/docs/graphql-manual/current/" class="project-link">Neo4j GraphQL Library</a></li>
+                <li><a href="/docs/http-api/current/" class="project-link">HTTP API</a></li>
+                <li><a href="/docs/ogm-manual/current/" class="project-link">OGM Library</a></li>
+                <li><a href="https://docs.spring.io/spring-data/neo4j/docs/current/reference/html/#reference" class="project-link">Spring Data Neo4j</a></li>
+                <li><a href="/docs/spark/" class="project-link">Neo4j Connector for Apache Spark</a></li>
+                <li><a href="/docs/kafka/" class="project-link">Neo4j Connector for Apache Kafka</a></li>
+              </ul>
+            </div>
+
+          </div>
+        </div>
+        <div class="navbar-item has-dropdown is-hoverable labs">
+          <a class="navbar-link" href="/labs/">Labs</a>
+          <div class="navbar-dropdown">
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/arrows/">arrows.app</a>
+              <ul class="project-links">
+                <li><a href="/labs/arrows/" class="project-link">Details</a></li>
+                <li><a href="https://arrows.app" class="project-link">arrows.app</a></li>
+              </ul>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/apoc/">APOC Extended</a>
+
+              <ul class="project-links">
+                <li><a href="/labs/apoc/5/" class="project-link">Documentation</a></li>
+                <li><a href="/developer/neo4j-apoc/" class="project-link">Developer Guide</a></li>
+              </ul>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/halin/">Halin</a>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/etl-tool/">ETL Tool</a>
+              <ul class="project-links">
+                <li><a href="/labs/etl-tool/" class="project-link">Details</a></li>
+                <li><a href="/labs/etl-tool/1.5.0/" class="project-link">Documentation</a></li>
+              </ul>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/neo4j-migrations/">Neo4j Migrations</a>
+              <ul class="project-links">
+                <li><a href="/labs/neo4j-migrations/" class="project-link">Details</a></li>
+                <li><a href="/labs/neo4j-migrations/2.0/" class="project-link">Documentation</a></li>
+              </ul>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/liquibase/">Neo4j Plugin For Liquibase</a>
+              <ul class="project-links">
+                <li><a href="/labs/liquibase/" class="project-link">Details</a></li>
+                <li><a href="https://github.com/liquibase/liquibase-neo4j" class="project-link">Documentation</a></li>
+              </ul>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/neosemantics/">Neosemantics</a>
+              <ul class="project-links">
+                <li><a href="/labs/neosemantics/tutorial/" class="project-link">Getting Started</a></li>
+                <li><a href="/labs/neosemantics/4.0/" class="project-link">Documentation</a></li>
+              </ul>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/neo4j-helm/">Neo4j Helm</a>
+              <ul class="project-links">
+                <li><a href="/labs/neo4j-helm/" class="project-link">Details</a></li>
+                <li><a href="/labs/neo4j-helm/1.0.0/" class="project-link">Documentation</a></li>
+              </ul>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/neodash/">NeoDash</a>
+              <ul class="project-links">
+                <li><a href="/labs/neodash/" class="project-link">Details</a></li>
+                <li><a href="/labs/neodash/2.1/" class="project-link">Documentation</a></li>
+              </ul>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/labs/neomodel/">neomodel</a>
+              <ul class="project-links">
+                <li><a href="/labs/neomodel/" class="project-link">Details</a></li>
+                <li><a href="https://neomodel.readthedocs.io/en/latest/" target="_blank" class="project-link">Documentation</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="navbar-item has-dropdown is-hoverable developer">
+          <a class="navbar-link" href="/developer/resources/">Get Help</a>
+          <div class="navbar-dropdown">
+            <div class="navbar-item project">
+              <a class="project-name" href="https://graphacademy.neo4j.com/?ref=docs" target="_blank">GraphAcademy</a>
+              <ul class="project-links">
+                <li><a class="project-link" href="https://graphacademy.neo4j.com/?ref=docs">Free, Self Paced Training</a></li>
+                <li><a class="project-link" href="https://graphacademy.neo4j.com/certification/?ref=docs" target="_blank">Certification</a></li>
+              </ul>
+            </div>
+
+            <div class="navbar-item project">
+              <a class="project-name" href="https://dev.neo4j.com/forum" target="_blank">Community Forum</a>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="https://dev.neo4j.com/chat" target="_blank">Discord Chat</a>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="/developer/kb" target="_blank">Knowledge Base</a>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="https://medium.com/neo4j" target="_blank">Neo4j Developer Blog</a>
+            </div>
+            <div class="navbar-item project">
+              <a class="project-name" href="https://www.youtube.com/neo4j" target="_blank">Neo4j Videos</a>
+            </div>
+          </div>
+        </div>
+        <div class="navbar-item is-hoverable getting-started-cta">
+          <a class="navbar-link primary" href="https://neo4j.com/cloud/platform/aura-graph-database/?ref=docs-nav-get-started">Get Started Free</a>
+        </div>
+        <div class="navbar-item">
+          <a class="navbar-link search-button" href="#search" id="search_open"><svg width="23px" height="23px" viewBox="0 0 23 23"
+              version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+              class="fill-current float-right" id="search" role="button" title="Search Website">
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
+                stroke-linejoin="round">
+                <g transform="translate(-2.000000, -2.000000)" stroke="#a0aec0" stroke-width="1.5">
+                  <circle
+                    transform="translate(11.389364, 11.388564) rotate(-23.025000) translate(-11.389364, -11.388564) "
+                    cx="11.3893642" cy="11.3885639" r="8.056"></circle>
+                  <path d="M17.0853333,17.0844444 L23.3333333,23.3333333" ></path>
+                </g>
+              </g>
+            </svg><span class="navbar-mobile">Search</span></a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>
+<div class="body">
+<div class="nav-container" data-component="browser-manual" data-version="5">
+  <aside class="nav">
+    <div class="panels">
+      <div class="selectors">
+        
+      </div>
+      <div class="nav-panel-menu is-active" data-panel="menu">
+    <nav class="nav-menu">
+    <ul class="nav-list">
+  <li class="nav-item" data-depth="0">
+<ul class="nav-list">
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="../../">Neo4j Browser</a>
+  </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="../../about-browser/">About Neo4j Browser</a>
+  </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link nav-item-toggle" href="../../deployment-modes/">Deployment modes</a>
+<ul class="nav-list">
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../deployment-modes/neo4j-server/">Neo4j Server</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../deployment-modes/neo4j-desktop/">Neo4j Desktop</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../deployment-modes/web-application/">Web application</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../deployment-modes/neo4j-sandbox/">Neo4j Sandbox</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../deployment-modes/neo4j-aura/">Neo4j Aura</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../deployment-modes/dedicated-web-server/">Dedicated web server</a>
+  </li>
+</ul>
+  </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="../../visual-tour/">Visual tour</a>
+  </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link nav-item-toggle" href="../../operations/">Browser operations</a>
+<ul class="nav-list">
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/dbms-connection/">Connect to a Neo4j DBMS</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/credentials-handling/">Browser credentials handling</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/browser-sso/">Browser Single Sign-On</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/browser-settings/">Browser settings</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/initial-command/">Initial command</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/result-frames/">Result frames</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/export-results/">Export results</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/browser-styling/">Browser styling</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/query-parameters/">Query parameters</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/browser-url-parameters/">Browser URL parameters</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/rest-requests/">HTTP REST requests</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/browser-rbac-count/">Node and relationship counts with role-based access control</a>
+  </li>
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../../operations/product-analytics/">Product analytics</a>
+  </li>
+</ul>
+  </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="../../reference-commands/">Command reference</a>
+  </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link nav-item-toggle" href="../">Internals</a>
+<ul class="nav-list">
+  <li class="nav-item" data-depth="2">
+    <a class="nav-link" href="../graph-modelling/">Graph Modeling</a>
+  </li>
+</ul>
+  </li>
+</ul>
+  </li>
+</ul>
+  </nav>
+</div>
+    </div>
+  </aside>
+</div>
+<main class="article">
+<div class="toolbar" role="navigation">
+  <div class="toolbar-wrapper">
+    <button class="nav-toggle" aria-label="Toggle Table of Contents"></button>
+    <a href="../../" class="home-link" aria-label="Go to home page"></a>
+    <nav class="breadcrumbs" aria-label="breadcrumbs">
+  <ul>
+    <li><a href="../../">Neo4j Browser</a></li>
+    <li><a href="./">
+        How Graph Interations Take Effect on Displayed Graph and Backing Database
+    </a></li>
+  </ul>
+</nav>
+      </div>
+</div>
+
+  <div class="content">
+<article class="doc">
+<div class="sect-header">
+<h1 class="page">How Graph Interations Take Effect on Displayed Graph and Backing Database</h1>
+</div>
+
+
+
+
+
+<div id="preamble">
+<div class="sectionbody">
+<div class="paragraph">
+<p>We define <strong>graph interactions</strong> as any <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent">mouse</a> and
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent">keyboard</a> events on the
+<a href="visual-tour.html#frame-views"><em>Graph</em> frame view</a></p>
+</div>
+<div class="paragraph">
+<p>There are basically 3 components involved in handling users' interactions:</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p><strong>GraphEventHandlerModel</strong> contains implementations on how to operate on the displayed graph for various interactions</p>
+</li>
+<li>
+<p><strong>Visualization</strong> triggers the implementations via D3 callbacks</p>
+</li>
+<li>
+<p><strong>VisualizationView</strong> is involved if a certain type of user interaction involves database changes</p>
+</li>
+</ol>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_how_to_implement_a_user_interaction"><a class="anchor" href="#_how_to_implement_a_user_interaction"></a>How to Implement a User Interaction</h2>
+<div class="sectionbody">
+<div class="olist arabic">
+<ol class="arabic">
+<li>
+<p>Implement an event handler function in GraphEventHandlerModel</p>
+</li>
+<li>
+<p>Bind the handler function in <code>GraphEventHandlerModel.bindEventHandlers()</code></p>
+</li>
+<li>
+<p>Trigger the handler function in <code>Visualization</code></p>
+</li>
+<li>
+<p>If the interaction involves database changes, add the corresponding logic to <code>GraphInteractionCallBack</code>, and</p>
+</li>
+<li>
+<p>trigger the <code>GraphInteractionCallBack</code> in the handler function</p>
+</li>
+</ol>
+</div>
+<div class="paragraph">
+<p>For example, let&#8217;s say we&#8217;d like to support easy on-graph editing by allowing us to create a new node when we double
+click on canvas. We will</p>
+</div>
+<div class="paragraph">
+<p>The complete implementation is in <a href="https://github.com/QubitPi/neo4j-browser/pull/7">this PR</a> as a reference</p>
+</div>
+</div>
+</div>
+    <div class="feedback">
+    <div class="header question">
+        <p><strong>Was this page helpful?</strong></p>
+
+        <svg width="22px" height="22px" viewBox="0 0 22 22" role="button" class="no" aria-label="No, this page isn't helpful">
+            <path
+                d="M6.25,15.8333333 C6.25,13.7622655 7.92893219,12.0833333 10,12.0833333 C12.0710678,12.0833333 13.75,13.7622655 13.75,15.8333333"
+                ></path>
+            <circle  cx="10" cy="10" r="9.58333333"></circle>
+            <path
+                d="M12.5,4.58333333 C12.8934466,4.05873783 13.5109223,3.75 14.1666667,3.75 C14.822411,3.75 15.4398867,4.05873783 15.8333333,4.58333333"
+                ></path>
+            <line x1="4.58333333" y1="7.91666667" x2="7.08333333" y2="7.91666667" ></line>
+            <path
+                d="M7.08333333,8.54166667 C6.96827401,8.54166667 6.875,8.44839266 6.875,8.33333333 C6.875,8.21827401 6.96827401,8.125 7.08333333,8.125 C7.19839266,8.125 7.29166667,8.21827401 7.29166667,8.33333333 C7.29166667,8.44839266 7.19839266,8.54166667 7.08333333,8.54166667"
+                ></path>
+            <line x1="12.9166667" y1="7.91666667" x2="15.4166667" y2="7.91666667" ></line>
+            <path
+                d="M15.4166667,8.54166667 C15.3016073,8.54166667 15.2083333,8.44839266 15.2083333,8.33333333 C15.2083333,8.21827401 15.3016073,8.125 15.4166667,8.125 C15.531726,8.125 15.625,8.21827401 15.625,8.33333333 C15.625,8.44839266 15.531726,8.54166667 15.4166667,8.54166667"
+                ></path>
+            <path
+                d="M4.16666667,4.58333333 C4.5601133,4.05873783 5.17758895,3.75 5.83333333,3.75 C6.48907772,3.75 7.10655337,4.05873783 7.5,4.58333333"
+                ></path>
+        </svg>
+
+        <svg width="22px" height="22px" viewBox="0 0 22 22" role="button" class="yes" aria-label="Yes, this page is helpful">
+            <circle  cx="10" cy="10" r="9.58333333"></circle>
+            <path
+                d="M5.41666667,8.125 C5.53172599,8.125 5.625,8.21827401 5.625,8.33333333 C5.625,8.44839266 5.53172599,8.54166667 5.41666667,8.54166667 C5.30160734,8.54166667 5.20833333,8.44839266 5.20833333,8.33333333 C5.20833333,8.21827401 5.30160734,8.125 5.41666667,8.125"
+                ></path>
+            <path
+                d="M14.5833333,8.125 C14.468274,8.125 14.375,8.21827401 14.375,8.33333333 C14.375,8.44839266 14.468274,8.54166667 14.5833333,8.54166667 C14.6983927,8.54166667 14.7916667,8.44839266 14.7916667,8.33333333 C14.7916667,8.21827401 14.6983927,8.125 14.5833333,8.125"
+                ></path>
+            <path
+                d="M13.2275,12.9166657 C13.4853075,12.9162808 13.7287776,13.035241 13.8869095,13.2388563 C14.0450415,13.4424715 14.1000278,13.7078123 14.0358333,13.9575 C13.562901,15.7999679 11.9021969,17.0882321 10,17.0882321 C8.09780311,17.0882321 6.43709903,15.7999679 5.96416667,13.9575 C5.89997223,13.7078123 5.95495852,13.4424715 6.11309045,13.2388563 C6.27122239,13.035241 6.51469246,12.9162808 6.7725,12.9166657 L13.2275,12.9166657 Z"
+                ></path>
+        </svg>
+    </div>
+
+
+</div></article>
+<aside class="toc sidebar" data-title="Contents"
+  data-levels="2">
+  <div class="toc-menu">
+    <div class="toc-menu-placeholder"></div>
+
+      </div>
+  </aside>  </div>
+</main>
+</div>
+<footer class="footer">
+  <div class="wrapper">
+  <div class="column">
+    <div class="logo-footer"></div>
+    <p>© <span id="footer-copyright-year">2023</span> Neo4j, Inc.<br>
+      <a href="https://neo4j.com/terms/">Terms</a> | <a href="https://neo4j.com/privacy-policy/">Privacy </a> | <a href="https://neo4j.com/sitemap/">Sitemap</a></p>
+    <p>Neo4j<sup>®</sup>, Neo Technology<sup>®</sup>, Cypher<sup>®</sup>, Neo4j<sup>®</sup> Bloom<sup>™</sup> and
+      Neo4j<sup>®</sup> Aura<sup>™</sup> are registered trademarks
+      of Neo4j, Inc. All other marks are owned by their respective companies.</p>
+  </div>
+
+  <div class="column">
+    <h2><a href="https://neo4j.com/contact-us/?ref=footer">Contact Us →</a></h2>
+    <p>US: 1-855-636-4532<br>
+      Sweden +46 171 480 113<br>
+      UK: +44 20 3868 3223<br>
+      France: +33 (0) 1 88 46 13 20<br>
+      <!--Germany: +49 (0)89 26204 6300</p>-->
+    </p>
+  </div>
+  <div class="column links">
+    <h2>Learn</h2>
+    <ul>
+      <li><i class="fa fa-wrench" aria-hidden="true"></i> <a rel="noopener" href="https://neo4j.com/sandbox/?ref=developer-footer">Sandbox</a></li>
+      <li><i class="fa fa-comments-o" aria-hidden="true"></i> <a rel="noopener" href="https://community.neo4j.com?ref=developer-footer" target="_blank">Neo4j Community Site</a></li>
+      <li><i class="fa fa-book" aria-hidden="true"></i> <a rel="noopener" href="https://medium.com/neo4j" target="_blank">Neo4j Developer Blog</a></li>
+      <li><i class="fa fa-youtube" aria-hidden="true"></i> <a rel="noopener" href="https://www.youtube.com/neo4j" target="_blank">Neo4j Videos</a></li>
+      <li><i class="fa fa-graduation-cap" aria-hidden="true"></i> <a rel="noopener" href="https://neo4j.com/graphacademy/?ref=developer-footer">GraphAcademy</a></li>
+      <li><i class="fa fa-flask" aria-hidden="true"></i> <a href="https://neo4j.com/labs/?ref=developer-footer">Neo4j Labs</a></li>
+    </ul>
+  </div>
+  <div class="column links">
+    <h2>Social</h2>
+    <ul>
+      <li><i class="fa fa-twitter" aria-hidden="true"></i> <a rel="noopener" href="https://twitter.com/neo4j" target="_blank">Twitter</a></li>
+      <li><i class="fa fa-meetup" aria-hidden="true"></i> <a rel="noopener" href="https://www.meetup.com/Neo4j-Online-Meetup/" target="_blank">Meetups</a></li>
+      <li><i class="fa fa-github" aria-hidden="true"></i> <a rel="noopener" href="https://github.com/neo4j/neo4j" target="_blank">Github</a></li>
+      <li><i class="fa fa-stack-overflow" aria-hidden="true"></i> <a rel="noopener" href="https://stackoverflow.com/questions/tagged/neo4j" target="_blank">Stack Overflow</a></li>
+
+      <li class="speaker-program"><a href="https://docs.google.com/forms/d/e/1FAIpQLSdEcNnMruES5iwvOVYovmS1D_P1ZL_HdUOitFrwrvruv5PZvA/viewform">Want to Speak?</a></li>
+    </ul>
+  </div>
+</div>
+</footer>
+
+  <script src="../../../../assets/js/vendor/auth0.js"></script>
+  <script src="../../../../assets/js/site.js"></script>
+  <script async src="../../../../assets/js/vendor/highlight.js"></script>
+  <script async src="../../../../assets/js/vendor/image-zoom.js"></script>
+
+
+<div id="neo4j-algolia-search-v2"></div>
+<script src="https://neo4j.com/wp-content/themes/neo4jweb/assets/neo4j-react-modules-assets/search-preact/chunkless/bundle.js"></script>
+<script src="https://neo4j.com/wp-content/themes/neo4jweb/assets/neo4j-react-modules-assets/search-preact/chunkless/polyfill.js"></script>
+<script>window.algoliaSearchOptions = {indexName: "docs",placeholder: "Search Documentation",template: "docs"}</script>  </body>
+</html>
diff --git a/browser-manual/5/internals/index.html b/browser-manual/5/internals/index.html
index 50d55d749be..bf56fc10ea8 100644
--- a/browser-manual/5/internals/index.html
+++ b/browser-manual/5/internals/index.html
@@ -450,9 +450,10 @@ <h1 class="page">Neo4J Browser Internals</h1>
 </ol>
 </div>
 <div class="paragraph">
-<p>The graphing is based on D3 but pretty much developed from scratch by building everything on top of D3 and implementing
-its own layout, coloring, and link drawing. For example, the calculation of arrow (e.g. node links) between nodes
-uses some very complicated math along with very prelimiary MDN standard basic shap specification.</p>
+<p>The graphing 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
+<a href="https://github.com/QubitPi/neo4j-browser/blob/master/src/neo4j-arc/graph-visualization/utils/ArcArrow.ts">very complicated math</a>
+along with very prelimiary MDN standard basic shap specification.</p>
 </div>
 <div class="admonitionblock warning">
 <table>
@@ -462,7 +463,8 @@ <h1 class="page">Neo4J Browser Internals</h1>
 </td>
 <td class="content">
 <div class="paragraph">
-<p>We will not have any TypeDoc documentation, because the TypeScript version used in Neo4J Browser is not supprted by it</p>
+<p>We will not have any TypeDoc documentation, because the TypeScript version used in Neo4J Browser is not supprted by the
+TypeDoc</p>
 </div>
 </td>
 </tr>
@@ -474,11 +476,15 @@ <h1 class="page">Neo4J Browser Internals</h1>
 <h2 id="_component_diagram_wip"><a class="anchor" href="#_component_diagram_wip"></a>Component Diagram (WIP)</h2>
 <div class="sectionbody">
 <div class="paragraph">
-<p><span class="image"><img src="../_images/neo4j-browser.png" alt="neo4j browser" width="300"></span></p>
+<p><span class="image"><img src="../_images/neo4j-browser.png" alt="neo4j browser" width="900"></span></p>
 </div>
 <div class="ulist">
 <ul>
 <li>
+<p>The orange triangle labled with "On Canvas Interaction" is discussed in detail in
+<a href="internals/graph-interactions">graph interactions</a> section</p>
+</li>
+<li>
 <p>Sentry.io is initialized in the top index.tsx</p>
 </li>
 <li>
diff --git a/browser-manual/5/sitemap.xml b/browser-manual/5/sitemap.xml
index 08de6674faf..15cb7e211a2 100644
--- a/browser-manual/5/sitemap.xml
+++ b/browser-manual/5/sitemap.xml
@@ -2,110 +2,114 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/about-browser/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/deployment-modes/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/deployment-modes/dedicated-web-server/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/deployment-modes/neo4j-aura/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/deployment-modes/neo4j-desktop/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/deployment-modes/neo4j-sandbox/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/deployment-modes/neo4j-server/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/deployment-modes/web-application/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/internals/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
+</url>
+<url>
+<loc>https://neo4j.com/docs/browser-manual/current/internals/graph-interactions/</loc>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/internals/graph-modelling/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/browser-rbac-count/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/browser-settings/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/browser-sso/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/browser-styling/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/browser-url-parameters/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/credentials-handling/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/dbms-connection/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/export-results/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/initial-command/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/product-analytics/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/query-parameters/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/rest-requests/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/operations/result-frames/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/reference-commands/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 <url>
 <loc>https://neo4j.com/docs/browser-manual/current/visual-tour/</loc>
-<lastmod>2023-10-03T02:45:06.834Z</lastmod>
+<lastmod>2023-10-04T10:49:32.686Z</lastmod>
 </url>
 </urlset>