Add entry point for observable visualizations

config/plugins/visualizations/common/templates/observable_entry_point.mako

@@ -0,0 +1,30 @@
+# -*- coding: utf-8 -*-
+<%inherit file="visualization_base.mako"/>
+
+## Create a container, attach data and import script file
+<%def name="get_body()">
+    <%
+        from markupsafe import escape
+
+        ## Collect incoming data
+        data_incoming = {
+            "root": h.url_for("/"),
+            "visualization_id": visualization_id,
+            "visualization_name": visualization_name,
+            "visualization_plugin": visualization_plugin,
+            "visualization_title": escape(title),
+            "visualization_config": config }
+
+        ## Load script source
+        script_src = script_attributes.get("src")
+    %>
+
+    ## Create container and initialize notebook
+    <div id="app" data-incoming='${h.dumps(data_incoming)}'></div>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
+    <script type="module">
+        import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
+        import define from "https://api.observablehq.com/d/${script_src}";
+        new Runtime().module(define, Inspector.into("#app"));
+    </script>
+</%def>

config/plugins/visualizations/example_observable/config/example_observable.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="Example: Observable" embeddable="false">
+    <description>Welcome to the Observable Example Plugin.</description>
+    <data_sources>
+        <data_source>
+            <model_class>HistoryDatasetAssociation</model_class>
+            <test test_attr="ext" result_type="datatype">csv</test>
+            <to_param param_attr="id">dataset_id</to_param>
+        </data_source>
+    </data_sources>
+    <params>
+        <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+    </params>
+    <entry_point entry_point_type="observable" src="[email protected]?v=3" />
+</visualization>

lib/galaxy/visualization/plugins/config_parser.py

@@ -33,7 +33,7 @@ class VisualizationsConfigParser:
     """
 
     #: what are the allowed 'entry_point_type' for entry_point elements
-    ALLOWED_ENTRY_POINT_TYPES = ["mako", "html", "script", "chart"]
+    ALLOWED_ENTRY_POINT_TYPES = ["mako", "html", "script", "chart", "observable"]
     #: what are the allowed href targets when clicking on a visualization anchor
     VALID_RENDER_TARGETS = ["galaxy_main", "_top", "_blank"]
 

lib/galaxy/visualization/plugins/plugin.py

@@ -267,6 +267,9 @@ class ChartVisualizationPlugin(ScriptVisualizationPlugin):
     MAKO_TEMPLATE = "chart_entry_point.mako"
 
 
+class ObservableVisualizationPlugin(ScriptVisualizationPlugin):
+    MAKO_TEMPLATE = "observable_entry_point.mako"
+
 class StaticFileVisualizationPlugin(VisualizationPlugin):
     """
     A visualization plugin that starts by loading a static html file defined in

lib/galaxy/visualization/plugins/registry.py

@@ -201,6 +201,9 @@ def _build_plugin(self, plugin_name, plugin_path, config):
         # from a static file (html, etc)
         elif config["entry_point"]["type"] == "html":
             plugin_class = vis_plugins.StaticFileVisualizationPlugin
+        # from an observable notebook
+        elif config["entry_point"]["type"] == "observable":
+            plugin_class = vis_plugins.ObservableVisualizationPlugin
         return plugin_class(
             self.app(),
             plugin_path,