Add screenshot and zoom buttons

python-wrapper/.gitignore

@@ -1,8 +1,10 @@
 *.egg-info
 __pycache__
 build
+dist
 
 # Should we ignore the following?
 src/neo4j_viz/resources/nvl_entrypoint/*
 !src/neo4j_viz/resources/nvl_entrypoint/base.js
+!src/neo4j_viz/resources/nvl_entrypoint/styles.css
 !src/neo4j_viz/resources/nvl_entrypoint/__init__.py

python-wrapper/pyproject.toml

@@ -88,7 +88,12 @@ include = [
 namespaces = false # only scan directories with __init__.py files (true by default)
 
 [tool.setuptools.package-data]
-neo4j_viz = ["resources/nvl_entrypoint/base.js", "py.typed"]
+neo4j_viz = [
+    "resources/nvl_entrypoint/base.js",
+    "resources/nvl_entrypoint/styles.css",
+    "resources/icons/*.svg",
+    "py.typed"
+]
 
 [tool.pytest.ini_options]
 addopts = ["--import-mode=importlib"]

python-wrapper/src/neo4j_viz/nvl.py

@@ -19,10 +19,27 @@ def __init__(self) -> None:
         nvl_entry_point = resource_folder / "nvl_entrypoint"
 
         js_path = nvl_entry_point / "base.js"
-
         with js_path.open("r", encoding="utf-8") as file:
             self.library_code = file.read()
 
+        styles_path = nvl_entry_point / "styles.css"
+        with styles_path.open("r", encoding="utf-8") as file:
+            self.styles = file.read()
+
+        icons = resource_folder / "icons"
+
+        zoom_in_path = icons / "zoom-in.svg"
+        with zoom_in_path.open("r", encoding="utf-8") as file:
+            self.zoom_in_svg = file.read()
+
+        zoom_out_path = icons / "zoom-out.svg"
+        with zoom_out_path.open("r", encoding="utf-8") as file:
+            self.zoom_out_svg = file.read()
+
+        screenshot_path = icons / "screenshot.svg"
+        with screenshot_path.open("r", encoding="utf-8") as file:
+            self.screenshot_svg = file.read()
+
     def unsupported_field_type_error(self, e: TypeError, entity: str) -> Exception:
         if "not JSON serializable" in str(e):
             return ValueError(f"A field of a {entity} object is not supported: {str(e)}")
@@ -51,13 +68,19 @@ def render(
 
         if show_hover_tooltip:
             hover_element = f"document.getElementById('{container_id}-tooltip')"
-            hover_div = f'<div id="{container_id}-tooltip" style="width: 20%; min-width: 100px; max-width: 600px; max-height: 80%; position: absolute; z-index: 2147483647; right: 0; bottom: 0; background: white; display: none; border: solid; border-color: #BBBEC3; border-width: 0.5px; padding: 0.8rem; border-radius: 8px; margin-bottom: 1rem; margin-right: 0.5rem; filter: drop-shadow(0 4px 8px rgba(26,27,29,0.12)); font-family: PublicSans; color: #4D5157; font-size: 14px"></div>'
+            hover_div = f'<div id="{container_id}-tooltip" class="tooltip" style="display: none;"></div>'
         else:
             hover_element = "null"
             hover_div = ""
 
+        # Using a different varname for every instance, so that a notebook
+        # can use several instances without unwanted interactions.
+        # The first part of the UUID should be "unique enough" in this context.
+        nvl_varname = "graph_" + container_id.split("-")[0]
+        download_name = nvl_varname + ".png"
+
         js_code = f"""
-        var myNvl = new NVLBase.NVL(
+        var {nvl_varname} = new NVLBase.NVL(
             document.getElementById('{container_id}'),
             {hover_element},
             {nodes_json},
@@ -66,12 +89,37 @@ def render(
         );
         """
         full_code = self.library_code + js_code
+
         html_output = f"""
+        <style>
+            {self.styles}
+        </style>
         <div id="{container_id}" style="width: {width}; height: {height}; position: relative;">
+            <div style="position: absolute; z-index: 2147483647; right: 0; top: 0; padding: 1rem">
+                <button type="button" title="Save as PNG" onclick="{nvl_varname}.nvl.saveToFile({{ filename: '{download_name}' }})" class="icon">
+                    {self.screenshot_svg}
+                </button>
+                <button type="button" title="Zoom in" onclick="{nvl_varname}.nvl.setZoom({nvl_varname}.nvl.getScale() + 0.5)" class="icon">
+                    {self.zoom_in_svg}
+                </button>
+                <button type="button" title="Zoom out" onclick="{nvl_varname}.nvl.setZoom({nvl_varname}.nvl.getScale() - 0.5)" class="icon">
+                    {self.zoom_out_svg}
+                </button>
+            </div>
             {hover_div}
         </div>
+
         <script>
+            getTheme = () => {{
+                const backgroundColorString = window.getComputedStyle(document.body, null).getPropertyValue('background-color')
+                const colorsArray = backgroundColorString.match(/\d+/g);
+                const brightness = Number(colorsArray[0]) * 0.2126 + Number(colorsArray[1]) * 0.7152 + Number(colorsArray[2]) * 0.0722
+                return brightness < 128 ? "dark" : "light"
+            }}
+            document.documentElement.className = getTheme()
+
             {full_code}
         </script>
         """
+
         return HTML(html_output)  # type: ignore[no-untyped-call]

python-wrapper/src/neo4j_viz/resources/nvl_entrypoint/styles.css

@@ -0,0 +1,53 @@
+:root,
+:root.light {
+  --button-hover-bg-color: #f3f3f3;
+  --button-active-bg-color: #d3d3d3;
+  --neutral-text-default: 26 27 29 / 1;
+  --stroke: #4D5157;
+}
+
+:root.dark {
+  --button-hover-bg-color: #5b5b5b;
+  --button-active-bg-color: #8c8c8c;
+  --neutral-text-default: 245 246 246 / 1;
+  --stroke: #d2d2d2;
+}
+
+button.icon {
+  stroke: var(--stroke);
+  background-color: inherit;
+  padding: 10px 10px 5px 10px;
+  border: 1.3px solid #bcbcbc;
+  border-radius: 10px;
+}
+
+button.icon:hover {
+  background-color: var(--button-hover-bg-color)
+}
+
+button.icon:active {
+  background-color: var(--button-active-bg-color)
+}
+
+.tooltip {
+  width: 20%;
+  min-width: 100px;
+  max-width: 600px;
+  max-height: 80%;
+  position: absolute;
+  z-index: 2147483647;
+  right: 0;
+  bottom: 0;
+  background-color:var(--button-hover-bg-color);
+  border: solid;
+  border-color: #BBBEC3;
+  border-width: 0.5px;
+  padding: 0.8rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  margin-right: 0.5rem;
+  filter: drop-shadow(0 4px 8px rgba(26,27,29,0.12));
+  font-family: 'Public Sans', sans-serif;
+  color: var(--neutral-text-default);
+  font-size: 14px
+}