Add deep linking of dbt docs

cosmos/plugin/__init__.py

@@ -139,6 +139,26 @@ def open_file(path: str) -> str:
       )
     }
   }
+
+  // Prevent parent hash changes from sending a message back to the parent.
+  // This is necessary for making sure the browser back button works properly.
+  let hashChangeLock = true;
+
+  window.addEventListener('hashchange', function () {
+    if (!hashChangeLock) {
+      window.parent.postMessage(window.location.hash);
+    }
+    hashChangeLock = false;
+  });
+  window.addEventListener('message', function (event) {
+    let msgData = event.data;
+    if (typeof msgData === 'string' && msgData.startsWith('#!')) {
+      let updateUrl = new URL(window.location);
+      updateUrl.hash = msgData;
+      hashChangeLock = true;
+      history.replaceState(null, null, updateUrl);
+    }
+  });
 </script>
 """
 

cosmos/plugin/templates/dbt_docs.html

@@ -1,4 +1,5 @@
 {% extends base_template %}
+{% block page_title %}dbt docs - {{ appbuilder.app_name }}{% endblock %}
 {% block content %}
     <script src="{{ url_for('.static', filename='iframeResizer.min.js') }}"></script>
     <iframe id="dbtIframe" src="{{ url_for('.dbt_docs_index') }}" style="min-width: 100%; border: 0;"></iframe>
@@ -10,6 +11,25 @@
                 minHeight: 500
             },
             '#dbtIframe'
-        )
+        );
+
+        window.addEventListener('message', function (event) {
+            let msgData = event.data;
+            if (msgData.startsWith('#!')) {
+                let updateUrl = new URL(window.location);
+                updateUrl.hash = msgData;
+                history.replaceState(null, null, updateUrl);
+            }
+        });
+
+        window.addEventListener('popstate', function () {
+            dbtIframe.contentWindow.postMessage(window.location.hash);
+        });
+
+        let dbtIframe = document.getElementById('dbtIframe');
+        let iframeUrl = new URL(dbtIframe.src);
+        iframeUrl.hash = window.location.hash;
+        dbtIframe.src = iframeUrl.href;
+
     </script>
 {% endblock %}