FIX(plot.jupy) PanZoom CDN-URL; use ids vs class >

(a brain-twisted way of arming pan-zoom based on the last script loaded,
which didn't always work for all graphs visible at the ame time).

- fix: GH-repo for PanZoom seemed to have renamed its owner
   from ariutta --> https://github.com/bumbu/svg-pan-zoom
- fix: load remote-script only once pan-zoom code.

Author: ankostis

docs/source/arch.rst

@@ -670,7 +670,7 @@ Architecture
         the :ref:`plotting` section.
 
         SVGs are in rendered with the `zoom-and-pan javascript library
-        <https://github.com/ariutta/svg-pan-zoom>`_
+        <https://github.com/bumbu/svg-pan-zoom>`_
 
         .. include:: plotting.rst
             :start-after: .. serve-sphinx-warn-start

docs/source/plotting.rst

@@ -286,7 +286,7 @@ Directives
    .. rst:directive:option:: zoomable-opts: <empty>, (true, 1, yes, on) | (false, 0, no, off)
       :type: `str`
 
-      A JS-object with `the options <https://github.com/ariutta/svg-pan-zoom#how-to-use>`_
+      A JS-object with `the options <https://github.com/bumbu/svg-pan-zoom#how-to-use>`_
       for the interactive zoom+pan pf SVGs.
       If missing, :confval:`graphtik_zoomable_options` assumed.
       Specify ``{}`` explicitly to force library's default options.
@@ -362,7 +362,7 @@ Configurations
    - default: ``True``
 
    Whether to render SVGs with the `zoom-and-pan javascript library
-   <https://github.com/ariutta/svg-pan-zoom>`_, unless the ``:zoomable:``
+   <https://github.com/bumbu/svg-pan-zoom>`_, unless the ``:zoomable:``
    directive-option is given (and not empty).
 
    .. serve-sphinx-warn-start
@@ -380,7 +380,7 @@ Configurations
    - type: `str`
    - default: ``{controlIconsEnabled: true, fit: true}``
 
-   A JS-object with `the options <https://github.com/ariutta/svg-pan-zoom#how-to-use>`_
+   A JS-object with `the options <https://github.com/bumbu/svg-pan-zoom#how-to-use>`_
    for the interactive zoom+pan pf SVGs, when the ``:zoomable-opts:`` directive option
    is missing.
    If empty, ``{}`` assumed (library's default options).

graphtik/plot.py

@@ -91,7 +91,7 @@ def is_empty_frame(val):
 #:
 #: :param svg_pan_zoom_json:
 #:     arguments controlling the rendering of a zoomable SVG in
-#:     Jupyter notebooks, as defined in https://github.com/ariutta/svg-pan-zoom#how-to-use
+#:     Jupyter notebooks, as defined in https://github.com/bumbu/svg-pan-zoom#how-to-use
 #:     if `None`, defaults to string (also maps supported)::
 #:
 #:             "{controlIconsEnabled: true, fit: true}"
@@ -159,27 +159,49 @@ def _dot2svg(dot):
         Or with plotly https://plot.ly/~empet/14007.embed
 
     """
+    # Load js-script only once from: https://stackoverflow.com/a/57572107/548792
+
+    import random
+
     pan_zoom_json, element_styles, container_styles = _parse_jupyter_render(dot)
     svg_txt = dot.create_svg().decode()
+    svg_id = f"graphtik-plot-{random.randrange(int(1<<32)):08x}"
     html_txt = f"""
-        <div class="svg_container">
-            <style>
-                .svg_container {{
-                    {container_styles}
-                }}
-                .svg_container SVG {{
-                    {element_styles}
-                }}
-            </style>
-            <script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
-            <script type="text/javascript">
-                var scriptTag = document.scripts[document.scripts.length - 1];
-                var parentTag = scriptTag.parentNode;
-                var svg_el = parentTag.querySelector(".svg_container svg");
-                svgPanZoom(svg_el, {pan_zoom_json});
-            </script>
-            {svg_txt}
-        </</>
+<div id="{svg_id}" class="svg_container">
+    <style>
+        #{svg_id} {{
+            {container_styles}
+        }}
+        #{svg_id} SVG {{
+            {element_styles}
+        }}
+    </style>
+    <script type="text/javascript">
+    function graphtik_renderPlot() {{
+        var svg_el = document.querySelector("#{svg_id} svg");
+        svgPanZoom(svg_el, {pan_zoom_json});
+    }}
+
+    function graphtik_load_panZoom_script_n_render() {{
+        let id = 'graphtik_panZoomScript'
+        if(document.getElementById(id) === null) {{
+            let script = document.createElement('script')
+            script.setAttribute(
+                'src',
+                'https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js')
+            script.setAttribute('id', id)
+            document.body.appendChild(script)
+
+            script.onload = graphtik_renderPlot
+        }} else {{
+            graphtik_renderPlot()
+        }}
+    }}
+
+    graphtik_load_panZoom_script_n_render()
+    </script>
+    {svg_txt}
+</</>
     """
     return html_txt
 

graphtik/sphinxext/__init__.py

@@ -92,14 +92,14 @@ def _enact_zoomable_svg(self: HTMLTranslator, node: dynaimage, tag: str):
     :param node:
         Assign a special *class* for the zoom js-code to select by it.
 
-    NOTE: does not work locally with chrome: ariutta/svg-pan-zoom#326
+    NOTE: does not work locally with chrome: bumbu/svg-pan-zoom#326
     """
     if tag == "object" and "graphtik-zoomable-svg" in node["classes"]:
         ## # Setup pan+zoom JS-code only once.
         #
         if not hasattr(self.builder, "svg_zoomer_doc_scripts"):
             self.builder.add_js_file(
-                "https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js"
+                "https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.5.0/dist/svg-pan-zoom.min.js"
             )
             self.builder.add_js_file(
                 None,