Merge pull request #13 from appventure-nush/beta

Fixes for plotly

.github/workflows/beta.yml

@@ -0,0 +1,23 @@
+name: Push to Registry (Beta Build)
+
+on:
+  push:
+    branches:
+      - beta
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Push image to AppVenture registry
+        uses: docker/build-push-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          registry: registry.nush.app
+          repository: e-notes
+          tags: beta

.github/workflows/docker.yml

@@ -1,4 +1,4 @@
-name: Node.js CI
+name: Push to Registry
 
 on:
   push:

frontend/src/components/notebookViewer/BlockOutput.vue

@@ -21,7 +21,7 @@
               <v-col cols="12" v-if="graphic" class="cell-content output-display">
                 <img v-if="'image/png' in output.data" alt="Image Error"
                      :src="b64ToUrl(normaliseJupyterOutput(output.data['image/png']),'image/png')"/>
-                <div v-if="'text/html' in output.data" v-html="output.data['text/html'].join('')"></div>
+                <HTMLOutput v-if="'text/html' in output.data" :html="output.data['text/html'].join('')" />
               </v-col>
             </template>
             <pre v-else-if="output.output_type==='error'" class="cell-content output-err"
@@ -42,9 +42,12 @@
 import {Component, Prop, Vue} from "vue-property-decorator";
 import {Cell} from "@/types/shims/shims-nbformat-v4";
 import Convert from "ansi-to-html";
+import HTMLOutput from "@/components/notebookViewer/HTMLOutput.vue";
 
 const convert = new Convert();
-@Component
+@Component({
+  components: {HTMLOutput}
+})
 export default class BlockOutput extends Vue {
   name = "BlockOutput"
   @Prop(Object) readonly cell!: Cell;

frontend/src/components/notebookViewer/HTMLOutput.vue

@@ -0,0 +1,45 @@
+<template>
+    <div v-html="html" ref="htmlDiv"></div>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from "vue-property-decorator";
+
+@Component
+export default class HTMLOutput extends Vue {
+  name = "HTMLOutput"
+  @Prop(String) readonly html!: string;
+
+  createScript(node: HTMLScriptElement) {
+    var script = document.createElement("script");
+    script.text = node.innerHTML;
+    
+    for (var i=0; i < node.attributes.length; i++) {
+      var attr = node.attributes[i];
+      script.setAttribute(attr.name, attr.value);
+    }
+    return script;
+  }
+
+  recurseDescendants (node: Element) {
+    for (var i = 0; i < node.children.length; i++) {
+      var child = node.children[i];
+      this.recurseDescendants(child);
+      if (child.tagName === 'SCRIPT') {
+        node.replaceChild(this.createScript(child as HTMLScriptElement), child);
+      }
+    }
+  }
+
+  mounted() {
+    console.log("running scripts");
+    this.$nextTick(() => {
+        this.recurseDescendants(this.$refs.htmlDiv as Element);
+    });
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/mixins/helpers.ts

@@ -122,8 +122,9 @@ export function addPyScript() {
     if (!document.getElementById('pyscript')) {
         const env = document.createElement('py-env');
         env.innerHTML = `
-        - numpy
-        - matplotlib`
+          - numpy
+          - matplotlib
+        `
         document.head.appendChild(env);
         const script = document.createElement('script');
         script.id = 'pyscript';
@@ -132,11 +133,12 @@ export function addPyScript() {
         document.head.appendChild(script);
         const styles = document.createElement('style');
         styles.innerHTML = `
-        .v-application.theme--dark .editor-box .cm-gutters{
+        .v-application.theme--dark .editor-box .cm-gutters {
             background-color: #999;
             color: #f5f5f5;
         }
         `
+        document.head.appendChild(styles);
     }
 }
 

frontend/src/pages/Index/App.vue

@@ -321,4 +321,8 @@ body.rb.rb-lock-off {
   }
 }
 
+py-loader, py-terminal {
+  display: none;
+}
+
 </style>