@jseeio/jsee 0.3.7 → 0.3.9

package/src/worker.js

@@ -1,13 +1,28 @@
 const utils = require('./utils')
 
 function log () {
-  const args = Array.prototype.slice.call(arguments);
+  const args = Array.prototype.slice.call(arguments)
   args.unshift('[Worker]')
-  postMessage({_status: 'log', _log: args})
+  postMessage({ _status: 'log', _log: args })
 }
 
 function progress (value) {
-  postMessage({_status: 'progress', _progress: value})
+  postMessage({ _status: 'progress', _progress: value })
+}
+
+let initialized = false
+let cancelled = false
+let streamInputConfig = {}
+
+function isCancelled () {
+  return cancelled === true
+}
+
+function getStreamOptions () {
+  return {
+    isCancelled,
+    onProgress: progress
+  }
 }
 
 function initTF (model) {
@@ -15,7 +30,7 @@ function initTF (model) {
 }
 
 async function initPython (model) {
-  importScripts("https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js")
+  importScripts('https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js')
   const pyodide = await loadPyodide()
   if (model.imports && Array.isArray(model.imports) && model.imports.length) {
     await pyodide.loadPackage(model.imports.map(i => i.url))
@@ -26,7 +41,7 @@ async function initPython (model) {
     for (let key in data) {
       self[key] = data[key]
     }
-    return await pyodide.runPythonAsync(model.code);
+    return await pyodide.runPythonAsync(model.code)
   }
 }
 
@@ -34,11 +49,9 @@ async function initJS (model) {
   log('Init JS')
   this.container = model.container
 
-  // Load imports
   if (model.imports && model.imports.length) {
     log('Loading imports...')
     for (let imp of model.imports) {
-      // Try creating an url
       if (imp.code) {
         log('Importing from DOM:', imp.url)
         importScripts(URL.createObjectURL(new Blob([imp.code], { type: 'text/javascript' })))
@@ -51,7 +64,6 @@ async function initJS (model) {
 
   if (model.code) {
     log('Load code as a string', model)
-    // https://github.com/altbdoor/blob-worker/blob/master/blobWorker.js
     importScripts(URL.createObjectURL(new Blob([model.code], { type: 'text/javascript' })))
   } else if (model.url) {
     log('Load script from URL:', model.url)
@@ -60,14 +72,15 @@ async function initJS (model) {
     log('No script provided')
   }
 
-  // Related:
-  // https://stackoverflow.com/questions/37711603/javascript-es6-class-definition-not-accessible-in-window-global
   const target = model.type === 'class'
     ? eval(model.name)
     : this[model.name]
 
-  // Need promise here in case of async init
-  let modelFunc = await utils.getModelFuncJS(model, target, { log, progress })
+  let modelFunc = await utils.getModelFuncJS(model, target, {
+    log,
+    progress,
+    isCancelled
+  })
 
   return modelFunc
 }
@@ -81,10 +94,19 @@ onmessage = async function (e) {
   var data = e.data
   log('Received message of type:', typeof data)
 
-  if ((typeof data === 'object') && ((data.url) || (data.code))) {
-    // Init message
+  if ((typeof data === 'object') && (data._cmd === 'cancel')) {
+    cancelled = true
+    log('Cancel command received')
+    return
+  }
+
+  if (utils.isWorkerInitMessage(data, initialized)) {
     log('Init...')
     let m = data
+    streamInputConfig = (m && typeof m._streamInputConfig === 'object' && m._streamInputConfig)
+      ? m._streamInputConfig
+      : {}
+
     switch (m.type) {
       case 'tf':
         self.modelFunc = await initTF(m)
@@ -105,12 +127,14 @@ onmessage = async function (e) {
       default:
         throw new Error(`No type information: ${m.type}`)
     }
-    postMessage({_status: 'loaded'})
+    initialized = true
+    postMessage({ _status: 'loaded' })
   } else {
-    // Execution
     try {
-      log('Run model with data:', data)
-      const results = await self.modelFunc(data)
+      cancelled = false
+      const runData = utils.wrapStreamInputs(data, streamInputConfig, getStreamOptions())
+      log('Run model')
+      const results = await self.modelFunc(runData)
       log('Results:', results)
       postMessage(results)
     } catch (error) {

package/templates/bulma-app.vue

@@ -202,8 +202,9 @@
               <button
                 v-on:click="$parent.reset(example)"
                 class="button is-small example-button"
+                style="white-space: normal; width: 100%; text-align: left; font-family: monospace; font-size: 10px;"
               >
-                {{ example }}
+                {{ JSON.stringify(example, null, 2) }}
               </button>
             </div>
           </div>
@@ -229,7 +230,7 @@
                 ></vue-output>
               </div>
             </div>
-            <pre v-if="$parent.model.debug">{{ $parent.outputs }}</pre>
+            <pre v-if="$parent.debug">{{ $parent.outputs }}</pre>
           </div>
         </div>
       </div>

package/templates/bulma-input.vue

@@ -1,3 +1,9 @@
+<style lang="scss" scoped>
+  .control {
+    margin-top: -1px;
+  }
+</style>
+
 <template>
   <div class="field" v-if="input.type == 'int' || input.type == 'float' || input.type == 'number'">
     <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
@@ -9,6 +15,7 @@
         v-bind:placeholder="input.placeholder ? input.placeholder : input.name"
         v-bind:min="input.min"
         v-bind:max="input.max"
+        v-bind:disabled="input.disabled"
         v-on:change="changeHandler"
         class="input"
         type="number"
@@ -76,24 +83,22 @@
   <div class="field" v-if="input.type == 'file'">
     <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
     <div class="control">
-      <div class="file has-name is-fullwidth" v-bind:class="{ 'is-primary': !input.file }">
-        <label class="file-label">
-          <input
-            v-bind:id="input.name"
-            v-on:change="loadFile"
-  	  			class="file-input"
-  	  			type="file"
-  	  		>
-          <span class="file-cta">
-            <span class="file-label">
-              Open
-            </span>
-          </span>
-          <span class="file-name">
-            <span v-if="input.file && input.file.name">{{ input.file.name }}</span>
-            <span v-else>No file selected</span>
-          </span>
-        </label>
+      <div class="file has-name is-fullwidth" v-bind:class="{ 'is-primary': !input.file }" v-if="!input.disabled">
+        <file-picker
+          v-model="input.value"
+          v-model:url="input.url"
+          v-bind:raw="input.raw === true || input.stream === true"
+          v-bind:autoload="input.urlAutoLoad === true"
+          v-on:change="changeHandler"
+        ></file-picker>
+      </div>
+      <div class="file has-name is-fullwidth" v-bind:class="{ 'is-primary': !input.file }" v-else>
+        <input 
+          class="input"
+          v-bind:id="input.name"
+          v-bind:value="input.default"
+          disabled
+        >
       </div>
     </div>
   </div>

package/templates/bulma-output.vue

@@ -1,5 +1,51 @@
+<style scoped>
+/* Quickly stretch the card when browser goes native full‑screen
+   (actual FS API above) OR when the helper class is present. */
+   /* 
+   .is-fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+    background: #fff;
+  }
+  .is-fullscreen .card-content, .is-fullscreen .content { 
+    height: 100% !important; 
+  }
+  */
+
+  /* Full‑screen override */
+.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.is-fullscreen .card-content {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+/* Ensure Plotly div or other content can grow */
+.is-fullscreen .content, .is-fullscreen .custom-container {
+  height: 100% !important;
+}
+</style>
+
 <template>
-  <div class="card mb-5" v-if="!(typeof output.value === 'undefined')">
+  <div 
+    class="card mb-5" 
+    v-show="!(typeof output.value === 'undefined')"
+    :class="{ 'is-fullscreen': isFullScreen }"
+    ref="cardRoot"
+  > 
     <header class="card-header">
       <p class="card-header-title is-size-6" v-if="output.name">
         {{ output.name }}
@@ -8,22 +54,41 @@
       <p class="card-header-icon">
         <button class="button is-small" v-on:click="save()">Save</button>
         <button class="button is-small" v-on:click="copy()">Copy</button>
+        <button
+          class="button is-small"
+          v-if="!isFullScreen"
+          @click="toggleFullScreen"
+          title="Expand to full screen"
+        >
+          Fullscreen
+        </button>
+        <button
+          class="button is-small"
+          v-else
+          @click="toggleFullScreen"
+          title="Exit full screen"
+        >
+          Close
+        </button>
       </p>
     </header>
     <div class="card-content">
-      <div class="content" v-if="(output.type == 'svg') || (output.type == 'html')">
+      <div class="content" :id="outputName" v-if="(output.type == 'svg') || (output.type == 'html')">
         <div v-html="output.value"></div>
       </div>
-      <div class="content" v-else-if="output.type == 'object'">
+      <div class="content" :id="outputName" v-else-if="output.type == 'object'">
         <json-viewer :value="output.value" copyable sort />
       </div>
-      <div class="content" v-else-if="output.type == 'code'">
+      <div class="content" :id="outputName" v-else-if="output.type == 'code'">
         <pre>{{ output.value }}</pre>
       </div>
-      <div class="content" v-else-if="output.type == 'function'">
-        <div ref="customContainer"></div>
+      <div class="content" :id="outputName" v-else-if="output.type == 'function'">
+        <div class="custom-container" ref="customContainer"></div>
+      </div>
+      <div class="content" :id="outputName" v-else-if="output.type == 'blank'">
+        <!-- will be filled by custom render function -->
       </div>
-      <div class="content" v-else>
+      <div class="content" :id="outputName" v-else>
         <pre>{{ output.value }}</pre>
       </div>
     </div>

package/templates/common-inputs.js

@@ -1,27 +1,16 @@
 const FileReader = window['FileReader']
+import FilePicker from './file-picker.vue'
 
 const component = {
   props: ['input'],
   emits: ['inchange'],
+  components: { FilePicker },
   methods: {
     changeHandler () {
       if (this.input.reactive) {
         this.$emit('inchange')
       }
     },
-    loadFile (e) {
-      const reader = new FileReader()
-      this.input.file = e.target.files[0]
-      reader.readAsText(this.input.file)
-      reader.onload = () => {
-        this.input.value = reader.result
-        if (typeof this.input.cb !== 'undefined') {
-          this.input.cb.run()
-        } else if (this.input.reactive) {
-          this.$emit('inchange')
-        }
-      }
-    },
     call (method) {
       console.log('calling: ', method)
     }

package/templates/common-outputs.js

@@ -1,6 +1,8 @@
 import { saveAs } from 'file-saver'
 import domtoimage from 'dom-to-image'
 
+const { sanitizeName } = require('../src/utils.js')
+
 const Blob = window['Blob']
 
 function stringify (v) {
@@ -12,11 +14,35 @@ function stringify (v) {
 const component = {
   props: ['output'],
   emits: ['notification'],
+  data () {
+    return {
+      outputName: 'output',
+      isFullScreen: false,
+    }
+  },
   mounted() {
+    this.outputName = this.output.alias 
+      ? this.output.alias
+      : this.output.name
+        ? sanitizeName(this.output.name) 
+        : 'output_' + Math.floor(Math.random() * 1000000)
     this.executeRenderFunction()
+    document.addEventListener('fullscreenchange', this.onFullScreenChange)
   },
-  updated() {
-    this.executeRenderFunction()
+  beforeUnmount() {
+    document.removeEventListener('fullscreenchange', this.onFullScreenChange)
+  },
+  // updated() {
+  //   this.executeRenderFunction()
+  // },
+  watch: {
+    'output.value': function (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$nextTick(() => {
+          this.executeRenderFunction()
+        })
+      }
+    }
   },
   computed: {
     isRenderFunction() {
@@ -24,6 +50,35 @@ const component = {
     }
   },
   methods: {
+    toggleFullScreen() {
+      const el = this.$refs.cardRoot || this.$el
+      if (!this.isFullScreen) {
+        if (el.requestFullscreen) {
+          el.requestFullscreen()
+        } else if (el.webkitRequestFullscreen) {
+          el.webkitRequestFullscreen()
+        } else if (el.mozRequestFullScreen) {
+          el.mozRequestFullScreen()
+        } else if (el.msRequestFullscreen) {
+          el.msRequestFullscreen()
+        }
+        // state will flip in onFullScreenChange
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+        // state will flip in onFullScreenChange
+      }
+    },
+    onFullScreenChange() {
+      this.isFullScreen = !!document.fullscreenElement
+    },
     save () {
       // Prepare filename
       let filename

package/templates/file-picker-base.vue

@@ -0,0 +1,169 @@
+<template>
+  <!-- Based on https://github.com/rowanwins/vue-file-picker/ -->
+  <div
+    :id="id"
+    class="vfp"
+  >
+    <div
+      class="vfp-bgArea"
+      :class="{ 'vfp-active': isActive }"
+      @dragover="setActive"
+      @dragleave="cancelActive"
+      @drop="fileAdded"
+    >
+      <div class="vfp-iconHolder vfp-gridItem">
+        <slot name="icon">
+          <svg
+            slot="icon"
+            height="40"
+            viewBox="0 0 48 48"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M18 32h12v-12h8l-14-14-14 14h8zm-8 4h28v4h-28z"
+              fill="#CACFD2"
+            />
+          </svg>
+        </slot>
+      </div>
+      <input
+        id="vfp-filePicker"
+        class="vfp-inputfile vfp-gridItem"
+        type="file"
+        name="vfp-filePicker"
+        :accept="accept"
+        :multiple="allowMultiple"
+        @change="fileAdded"
+      >
+      <label
+        class="vfp-label vfp-gridItem"
+        for="vfp-filePicker"
+      >
+        <slot name="label">
+          <!-- <strong>Choose a file</strong> or drop it here -->
+          <strong>{{ label }}</strong>
+        </slot>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FilePicker',
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: 'filePicker'
+    },
+    accept: {
+      type: String,
+      default: '*/*'
+    },
+    allowMultiple: {
+        type: Boolean,
+        default: false
+    }
+  },
+  data: function () {
+    return {
+        isActive: false,
+        label: 'Choose a file or drop it here'
+    }
+  },
+  computed: {
+    requiresTypeCheck: function () {
+      return this.accept !== '*/*'
+    },
+    acceptedTypes: function () {
+      return this.accept.split(',')
+    }
+  },
+  methods: {
+    cancelHandlers (e) {
+        e.preventDefault()
+        e.stopPropagation()
+    },
+    setActive (e) {
+        this.isActive = true
+        this.cancelHandlers(e)
+    },
+    cancelActive (e) {
+        this.isActive = false
+        this.cancelHandlers(e)
+    },
+    fileAdded (e) {
+        this.isActive = false
+        this.cancelHandlers(e)
+        const wasDropped = e.dataTransfer
+        const files = wasDropped ? e.dataTransfer.files : e.target.files
+        this.label = Array.from(files).map(file => file.name).join(', ')
+
+        if (wasDropped && !this.allowMultiple && files.length > 1) throw new Error('vue-file-picker: Multiple Files are not allowed')
+
+        if (wasDropped && this.requiresTypeCheck) {
+          for (var i = 0; i < files.length; i++) {
+            if (this.acceptedTypes.indexOf(files[i].type) === -1) throw new Error('vue-file-picker: File type not allowed')
+          }
+        }
+        this.$emit('vfp-file-added', files)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.vfp {
+    display: flex;
+    height: 100px;
+    width: 100%;
+
+    .vfp-bgArea {
+        transition: 0.3s;
+        background: #F2F3F4;
+        display: grid;
+        grid-template-rows: 60% 40%;
+        padding: 25px 10px;
+        width: 100%;
+        outline: 2px dashed #CACFD2;
+        outline-offset: -10px;
+        color: #3b3e40;
+        text-align: center;
+    }
+
+    .vfp-inputfile {
+        width: 0.1px;
+        height: 0.1px;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+    }
+
+    .vfp-gridItem {
+        align-self: center;
+        justify-self: center;
+    }
+
+    .vfp-label {
+        cursor: pointer;
+        text-align: center;
+        font-size: 0.9rem;
+    }
+
+    .vfp-active {
+        background-color: #D7DBDD;
+        outline-color: #F2F3F4;
+    }
+
+    @media only screen and (max-width: 440px) {
+        .vfp-bgArea {
+            padding: 18px 10px;
+            grid-template-rows: 50% 50%;
+            grid-row-gap: 5px;
+        }
+    }
+}
+
+</style>