[Visualization] Clean up full.tpl to improve vis loading time (#3116)

* Remove @jupyter/html-manager from full.tpl

* Include visualization server cloudbuild yaml to facilitate local dev

* Stop fallback behavior of KFP UI to improve dev experience

backend/src/apiserver/visualization/exporter.py

@@ -149,5 +149,5 @@ class Exporter:
         # Output generator
         self.ep.preprocess(nb, {"metadata": {"path": Path.cwd()}}, self.km)
         # Export all html and outputs
-        body, _ = html_exporter.from_notebook_node(nb)
+        body, _ = html_exporter.from_notebook_node(nb, resources={})
         return body

backend/src/apiserver/visualization/templates/full.tpl

@@ -15,32 +15,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 
 {% block ipywidgets %}
-{%- if "widgets" in nb.metadata -%}
-<script>
-(function() {
-  function addWidgetsRenderer() {
-    var mimeElement = document.querySelector('script[type="application/vnd.jupyter.widget-view+json"]');
-    var scriptElement = document.createElement('script');
-    var widgetRendererSrc = '{{ resources.ipywidgets_base_url }}@jupyter-widgets/html-manager@*/dist/embed-amd.js';
-    var widgetState;
-
-    // Fallback for older version:
-    try {
-      widgetState = mimeElement && JSON.parse(mimeElement.innerHTML);
-
-      if (widgetState && (widgetState.version_major < 2 || !widgetState.version_major)) {
-        widgetRendererSrc = '{{ resources.ipywidgets_base_url }}jupyter-js-widgets@*/dist/embed.js';
-      }
-    } catch(e) {}
-
-    scriptElement.src = widgetRendererSrc;
-    document.body.appendChild(scriptElement);
-  }
-
-  document.addEventListener('DOMContentLoaded', addWidgetsRenderer);
-}());
-</script>
-{%- endif -%}
+<!-- TODO: integrate this back, background: https://github.com/kubeflow/pipelines/issues/3114#issuecomment-588071746 -->
 {% endblock ipywidgets %}
 
 {% for css in resources.inlining.css -%}
@@ -98,4 +73,4 @@ div#notebook-container{
 {% block footer %}
 {{ super() }}
 </html>
-{% endblock footer %}
+{% endblock footer %}

frontend/server/app.ts

@@ -192,8 +192,5 @@ function createUIServer(options: UIConfigs) {
   app.use(basePath, StaticHandler(options.server.staticDir));
   app.use(StaticHandler(options.server.staticDir));
 
-  /** Fallback to index.html */
-  app.get('*', indexHtmlHandler);
-
   return app;
 }

test/cloudbuild/visualization.yaml

@@ -0,0 +1,8 @@
+steps:
+  - id: "visualization-server"
+    name: "gcr.io/cloud-builders/docker"
+    args:
+      ["build", "-t", "$_GCR_BASE/visualization-server", "-f", "backend/Dockerfile.visualization", "."]
+images:
+  - "$_GCR_BASE/visualization-server"
+timeout: 1800s # 30min