@jseeio/jsee 0.3.7 → 0.3.8

package/src/main.js

@@ -52,19 +52,7 @@ function clone (obj) {
 
 
 
-function getName (code) {
-  switch (typeof code) {
-    case 'function':
-      return code.name
-    case 'string':
-      const words = code.split(' ')
-      const functionIndex = words.findIndex((word) => word == 'function')
-      const name = words[functionIndex + 1]
-      return name.includes('(') ? undefined : name
-    default:
-      return undefined
-  }
-}
+const getName = utils.getName
 
 // Return input value
 function getValue (input) {
@@ -112,6 +100,25 @@ function getInputs (model) {
   return []
 }
 
+function collectStreamInputConfig (inputs, config={}) {
+  if (!Array.isArray(inputs)) {
+    return config
+  }
+  inputs.forEach(input => {
+    if (!isObject(input)) {
+      return
+    }
+    if (input.type === 'group') {
+      collectStreamInputConfig(input.elements, config)
+      return
+    }
+    if (input.type === 'file' && input.stream === true && input.name) {
+      config[input.name] = { stream: true }
+    }
+  })
+  return config
+}
+
 function getFunctionContainer (target) {
   // Check if the number of parameters is > 1, then 'args'
 }
@@ -138,6 +145,8 @@ export default class JSEE {
     this.schema = params.schema || params.config // Previous naming
     this.utils = utils
     this.__version__ = VERSION
+    this.cancelled = false
+    this._cancelWorkerRun = null
 
     // Check if schema is provided
     if (typeof this.schema === 'undefined') {
@@ -168,35 +177,83 @@ export default class JSEE {
     notyf.success(txt)
   }
 
+  cancelCurrentRun () {
+    log('Stopping current run')
+    this.cancelled = true
+    if (typeof this._cancelWorkerRun === 'function') {
+      this._cancelWorkerRun()
+    }
+  }
+
+  isCancelled () {
+    return this.cancelled === true
+  }
+
   progress (i) {
+    const progressState = utils.getProgressState(i)
+    if (!progressState) {
+      return
+    }
+
     // Check if progress div is defined
     let progress = document.querySelector('#progress')
+    if (!progress && progressState.mode === 'determinate' && progressState.value === 0) {
+      return
+    }
+
     if (!progress) {
       progress = document.createElement('div')
       progress.setAttribute('id', 'progress')
       progress.style = 'position: fixed; top: 0; left: 0; width: 0; height: 3px; background: #00d1b2; z-index: 1000;'
       document.body.appendChild(progress)
     }
-    progress.style.width = `${i}%`
+
+    let progressStyle = document.querySelector('#jsee-progress-style')
+    if (!progressStyle) {
+      progressStyle = document.createElement('style')
+      progressStyle.setAttribute('id', 'jsee-progress-style')
+      progressStyle.textContent = `
+      @keyframes jsee-progress-indeterminate {
+        0% { transform: translateX(-120%); }
+        100% { transform: translateX(360%); }
+      }
+      `
+      document.head.appendChild(progressStyle)
+    }
+
+    if (progressState.mode === 'indeterminate') {
+      progress.style.width = '30%'
+      progress.style.animation = 'jsee-progress-indeterminate 1.2s ease-in-out infinite'
+    } else {
+      progress.style.animation = 'none'
+      progress.style.transform = 'none'
+      progress.style.width = `${progressState.value}%`
+    }
   }
 
   async init () {
     // At this point this.schema is defined but can be in different forms (e.g. string, object, function)
-    await this.initSchema()                   // -> this.schema (object)
-    await this.initModel()
-    await this.initInputs()
-    await this.initVue()                            // -> this.app, this.data
-    await this.initPipeline()
-    if (this.schema.autorun) {
-      log('Autorun is enabled. Running the model')
-      this.run('init')
+    await this.initSchema() // Inits: this.schema (object)
+    await this.initModel() // Inits: this.model (array of objects)
+    await this.initInputs() // Inits: schema inputs based on url
+    this.streamInputConfig = collectStreamInputConfig(this.schema.inputs)
+    await this.initVue() // Inits: this.app, this.data
+    await this.initPipeline() // Inits: this.pipeline (function)
+    if (this.schema.autorun || this.schema.inputs.some(input => input.disabled && input.reactive)) {
+      // 1. If autorun is enabled in the schema, run the model immediately
+      // 2. Server-side inputs: If there are inputs with disabled and reactive flags
+      // (we assume that they are set by the server and trigger the model run)
+      log('[Init] First run of the model due to autorun or reactive inputs')
+      // Catch here to prevent unhandled rejection from init-time run
+      this.run('init').catch(err => log('Init run error:', err))
     }
   }
 
   async initSchema () {
     // Check if schema is a string (url to json)
     if (typeof this.schema === 'string') {
-      this.schemaUrl = this.schema.indexOf('json') ? this.schema : this.schema + '.json'
+      // indexOf returns -1 (truthy) when not found, so use includes instead
+      this.schemaUrl = this.schema.includes('.json') ? this.schema : this.schema + '.json'
 
       // Check if schema is present in the hidden DOM element
       const schema = utils.loadFromDOM(this.schemaUrl)
@@ -227,6 +284,17 @@ export default class JSEE {
       notyf.error('Schema is in a wrong format')
       throw new Error(`Schema is in a wrong format: ${this.schema}`)
     }
+
+    // Validate schema shape early so init stages fail fast on critical issues
+    const schemaValidation = utils.validateSchema(this.schema)
+    schemaValidation.warnings.forEach(warning => {
+      log('[Schema validation warning]', warning)
+    })
+    if (schemaValidation.errors.length) {
+      const firstError = schemaValidation.errors[0]
+      notyf.error(firstError)
+      throw new Error(`Schema validation failed: ${schemaValidation.errors.join('; ')}`)
+    }
   }
 
   async initModel () {
@@ -234,8 +302,21 @@ export default class JSEE {
     // At the end it should be an array of objects that define a sequence of tasks
     this.model = []
 
+    // Check if there's a render or view defined in the schema
+    let view = this.schema.render || this.schema.view
+    if (isObject(view)) {
+      // If view is an object, convert it to an array
+      view = [view] // Convert to array if it's an object
+    }
+    if (Array.isArray(view)) {
+      view.forEach(v => {
+        v.worker = false // Render should not be in a worker
+      })
+      log('View is defined in the schema')
+    }
+
     // Check if model is a function (model)
-    ;[this.schema.model, this.schema.render].forEach(m => {
+    ;[this.schema.model, view].forEach(m => {
       // Function -> {code: Function}
       if (typeof m === 'function') {
         this.model.push({
@@ -362,6 +443,8 @@ export default class JSEE {
       let paramValue = null
       if (urlParams.has(input.name)) {
         paramValue = urlParams.get(input.name);
+      } else if (urlParams.has(utils.sanitizeName(input.name))) {
+        paramValue = urlParams.get(utils.sanitizeName(input.name));
       } else if (input.alias) {
         // Handle alias as either a string or an array of strings
         if (Array.isArray(input.alias)) {
@@ -379,24 +462,28 @@ export default class JSEE {
 
       // Set input value from URL param with type conversion
       if (paramValue !== null) {
-        switch (input.type) {
-          case 'number':
-            paramValue = Number(paramValue);
-            break;
-          case 'boolean':
-            paramValue = paramValue === 'true';
-            break;
-          case 'json':
-            try {
-              paramValue = JSON.parse(paramValue);
-            } catch (e) {
-              console.error(`Failed to parse JSON for input ${input.name}:`, e);
-            }
-            break;
-          default:
-            break;
+        if (input.type === 'file') {
+          input.url = paramValue;
+        } else {
+          switch (input.type) {
+            case 'number':
+              paramValue = Number(paramValue);
+              break;
+            case 'boolean':
+              paramValue = paramValue === 'true';
+              break;
+            case 'json':
+              try {
+                paramValue = JSON.parse(paramValue);
+              } catch (e) {
+                console.error(`Failed to parse JSON for input ${input.name}:`, e);
+              }
+              break;
+            default:
+              break;
+          }
+          input.default = paramValue
         }
-        input.default = paramValue
       }
     })
     log('Inputs are:', this.schema.inputs)
@@ -414,17 +501,14 @@ export default class JSEE {
           this.modelContainer = container.querySelector('#model')
           // Init overlay
           this.overlay = new Overlay(this.inputsContainer ? this.inputsContainer : this.outputsContainer)
-          // Add stop button to the overlay if interval is defined
-          if (this.schema.interval) {
-            this.stopElement = document.createElement('button')
-            this.stopElement.innerHTML = 'Stop'
-            this.stopElement.style = 'background: white; color: #333; border: 1px solid #DDD; padding: 10px; border-radius: 5px; cursor: pointer;'
-            this.stopElement.addEventListener('click', () => {
-              this.running = false
-            })
-            this.overlay.element.innerHTML = ''
-            this.overlay.element.appendChild(this.stopElement)
-          }
+          // Stop button is shown only while a run is active
+          this.stopElement = document.createElement('button')
+          this.stopElement.innerHTML = 'Stop'
+          this.stopElement.style = 'display: none; margin-left: 12px; background: white; color: #333; border: 1px solid #DDD; padding: 6px 10px; border-radius: 5px; cursor: pointer;'
+          this.stopElement.addEventListener('click', () => {
+            this.cancelCurrentRun()
+          })
+          this.overlay.element.appendChild(this.stopElement)
           resolve()
         }, log)
         this.data = this.app.$data
@@ -439,15 +523,14 @@ export default class JSEE {
     this.pipeline = (inputs) => inputs
     // Async for-loop over this.model (again)
     for (const [i, m] of this.model.entries()) {
-      log('Initilizing the pipeline with model:', i, m.type)
       let modelFunc
       if (m.worker) {
         // Init worker model
-        log('Initializing model in a worker:', m.name || m.url)
+        log(`[Init pipeline] Initializing model ${i} in a worker: ${m.name || m.url}`)
         modelFunc = await this.initWorker(m)
       } else {
         // Init specific model types
-        log('Initializing model in the main thread:', m.name || m.url)
+        log(`[Init pipeline] Initializing model ${i} in the main thread: ${m.name || m.url}`)
         switch (m.type) {
           case 'py':
             modelFunc = await this.initPython(m)
@@ -470,20 +553,40 @@ export default class JSEE {
             notyf.error('No type information')
             throw new Error(`No type information: ${m.type}`)
         }
+
+        const streamInputConfig = this.streamInputConfig || {}
+        const hasStreamInputs = Object.keys(streamInputConfig).length > 0
+        if (hasStreamInputs) {
+          const originalModelFunc = modelFunc
+          modelFunc = (inputs) => {
+            const wrappedInputs = utils.wrapStreamInputs(inputs, streamInputConfig, {
+              isCancelled: () => this.isCancelled(),
+              onProgress: (value) => this.progress(value)
+            })
+            return originalModelFunc(wrappedInputs)
+          }
+        }
       }
 
       this.pipeline = (p => {
         return async (inputs) => {
           const resPrev = await p(inputs)
+          // Early stop if resPrev is object and has stop flag
+          if (isObject(resPrev) && resPrev.stop) {
+            log('[Pipeline] Stopping the pipeline due to stop flag in the result')
+            return resPrev
+          }
           const resNext = await modelFunc(resPrev)
           if (isObject(resNext) && isObject(resPrev)) {
             // If both results are objects, merge them
+            log(`[Pipeline] Merging results: ${Object.keys(resPrev).join(', ')} + ${Object.keys(resNext).join(', ')}`)
             return Object.assign({}, resPrev, resNext)
           } else if (typeof resNext !== 'undefined') {
             // If next result is defined, return it
             return resNext
           } else {
             // Otherwise return previous result (pass through)
+            log('[Pipeline] Passing through the previous result')
             return resPrev
           }
         }
@@ -510,43 +613,81 @@ export default class JSEE {
       model.name = 'anon'
     }
 
-    const modelFunc = (inputs) => new Promise((resolve, reject) => {
-      worker.onmessage = (e) => {
-        const res = e.data
-        if ((typeof res === 'object') && (res._status)) {
-          switch (res._status) {
-            case 'loaded':
-              notyf.success('Loaded model (in worker)')
-              log('Loaded model (in worker):', res)
-              resolve(res)
-              break
-            case 'log':
-              log(...res._log)
-              break
-            case 'progress':
-              this.progress(res._progress)
-              break
-            case 'error':
-              notyf.error(res._error)
-              log('Error from worker:', res._error)
-              reject(res._error)
-              break
+    // Timeout prevents permanently frozen UI if worker hangs (default 30s, configurable via model.timeout)
+    const timeoutMs = model.timeout || 30000
+    this._cancelWorkerRun = () => worker.postMessage({ _cmd: 'cancel' })
+
+    const modelFunc = (inputs) => {
+      const isInitCall = inputs && inputs.code !== undefined
+      const payload = isInitCall
+        ? inputs
+        : utils.toWorkerSerializable(inputs)
+
+      const workerPromise = new Promise((resolve, reject) => {
+        worker.onmessage = (e) => {
+          const res = e.data
+          if ((typeof res === 'object') && (res._status)) {
+            switch (res._status) {
+              case 'loaded':
+                notyf.success('Loaded model (in worker)')
+                log('Loaded model (in worker):', res)
+                this.progress(0)
+                resolve(res)
+                break
+              case 'log':
+                log(...res._log)
+                break
+              case 'progress':
+                this.progress(res._progress)
+                break
+              case 'error':
+                notyf.error(res._error)
+                log('Error from worker:', res._error)
+                this.progress(0)
+                reject(res._error)
+                break
+            }
+          } else {
+            log('Response from worker:', res)
+            this.progress(0)
+            resolve(res)
           }
-        } else {
-          log('Response from worker:', res)
-          resolve(res)
         }
-      }
-      worker.onerror = (e) => {
-        notyf.error(e.message)
-        log('Error from worker:', e)
-        reject(e)
-      }
-      worker.postMessage(inputs)
-    })
+        worker.onerror = (e) => {
+          notyf.error(e.message)
+          log('Error from worker:', e)
+          this.progress(0)
+          reject(e)
+        }
+        try {
+          worker.postMessage(payload)
+        } catch (error) {
+          try {
+            const fallbackPayload = JSON.parse(JSON.stringify(payload))
+            worker.postMessage(fallbackPayload)
+          } catch (fallbackError) {
+            reject(fallbackError)
+          }
+        }
+      })
+
+      // Skip timeout for init call (loading model can be slow); apply to execution calls
+      if (isInitCall) return workerPromise
 
-    // Initial worker call with model definition
-    await modelFunc(model)
+      const timeoutPromise = new Promise((_, reject) => {
+        setTimeout(() => {
+          worker.terminate()
+          reject(new Error(`Worker timed out after ${timeoutMs}ms`))
+        }, timeoutMs)
+      })
+      return Promise.race([workerPromise, timeoutPromise])
+    }
+
+    // Initial worker call with model definition and stream input config
+    const modelInitPayload = Object.assign({}, model, {
+      _streamInputConfig: this.streamInputConfig || {}
+    })
+    await modelFunc(modelInitPayload)
 
     // Worker will be in the context of each modelFunc
     return modelFunc
@@ -640,44 +781,76 @@ export default class JSEE {
     // 1. custom input button name
     // 2. `run`
     // 3. `autorun`
+
+    // Prevent overlapping runs: autorun skips, manual clicks queue
+    // Prevent overlapping runs: reactive/autorun calls are dropped, manual clicks queue
+    if (this.running) {
+      if (caller === 'autorun' || caller === 'reactive') return
+      log('Run already in progress, queuing', caller)
+      this._pendingRun = caller
+      return
+    }
+
     const schema = this.schema
     const data = this.data
     this.running = true
+    this.cancelled = false
+    // Run token to detect stale results when worker.onmessage gets rebound
+    const runToken = this._runToken = {}
 
-    log('Running the pipeline...')
-    // Collect input values
-    let inputValues = {}
-    data.inputs.forEach(input => {
-      // Skip buttons
-      if (input.name && !(input.type == 'action' || input.type == 'button')) {
-        inputValues[input.name] = getValue(input)
-      }
-    })
-    // Add caller to input values so we can change model behavior based on it
-    inputValues.caller = caller
+    try {
+      log('Running the pipeline...')
+      // Collect input values
+      let inputValues = {}
+      data.inputs.forEach(input => {
+        // Skip buttons
+        if (input.name && !(input.type == 'action' || input.type == 'button')) {
+          inputValues[input.name] = getValue(input)
+        }
+      })
+      // Add caller to input values so we can change model behavior based on it
+      inputValues.caller = caller
 
-    log('Input values:', inputValues)
-    // We have all input values here, pass them to worker, window.modelFunc or tf
-    if (!schema.model.autorun) {
+      log('Input values:', inputValues)
       this.overlay.show()
-    }
+      if (this.stopElement) {
+        this.stopElement.style.display = 'inline-block'
+      }
 
-    // Run pipeline
-    const results = await this.pipeline(inputValues)
+      // Run pipeline
+      const results = await this.pipeline(inputValues)
 
-    // Output results
-    this.output(results)
+      // Drop stale results if a newer run started (e.g. worker.onmessage rebound race)
+      if (this._runToken !== runToken) return
 
-    // Check if interval is defined
-    if (schema.interval && this.running && (caller === 'run')) {
-      log('Interval is defined:', schema.interval)
-      await utils.delay(schema.interval)
-      await this.run(caller)
-    }
+      // Output results
+      this.output(results)
 
-    // Hide overlay
-    this.overlay.hide()
-    return
+      // Check if interval is defined
+      if (utils.shouldContinueInterval(schema.interval, this.running, this.isCancelled(), caller)) {
+        log('Interval is defined:', schema.interval)
+        await utils.delay(schema.interval)
+        await this.run(caller)
+      }
+    } catch (err) {
+      // Surface pipeline/worker errors so they don't silently swallow failures
+      log('Pipeline error:', err)
+      notyf.error(typeof err === 'string' ? err : (err.message || 'Pipeline error'))
+    } finally {
+      // Always clean up UI state so overlay and running flag don't get stuck
+      this.overlay.hide()
+      if (this.stopElement) {
+        this.stopElement.style.display = 'none'
+      }
+      this.running = false
+
+      // Drain queued run if a manual click arrived while we were running
+      if (this._pendingRun) {
+        const pending = this._pendingRun
+        this._pendingRun = null
+        this.run(pending).catch(err => log('Queued run error:', err))
+      }
+    }
   }
 
   async outputAsync (res) {
@@ -695,28 +868,65 @@ export default class JSEE {
 
     log('[Output] Got output results of type:', typeof res)
 
-    // Process results (res)
-    const inputNames = this.schema.inputs.map(i => i.name)
-    if (isObject(res) && Object.keys(res).every(key => inputNames.includes(key))) {
-      // Update inputs from results
-      log('Updating inputs:', Object.keys(res))
-      this.data.inputs.forEach((input, i) => {
-        if (input.name && (typeof res[input.name] !== 'undefined')) {
-          log('Updating input: ', input.name, 'with data:', res[input.name])
-          const r = res[input.name]
-          if (typeof r === 'object') {
-            Object.keys(r).forEach(k => {
-              input[k] = r[k]
-            })
-          } else {
-            input.value = r
+    const inputNames = this.schema.inputs ? this.schema.inputs.map(i => i.name) : []
+    log('Input names:', inputNames)
+
+    if (isObject(res)) {
+      // Drop system fields
+      delete res.caller
+      delete res.stop
+      delete res._status
+      delete res._log
+      delete res._progress
+      log('Processing results as an object:', res)
+
+      if (Object.keys(res).every(key => inputNames.includes(key))) {
+        // Update input fields from results
+        // e.g. loading a csv file and updating list of target variables
+        // This will be dynamically updated in the UI
+        log('Updating inputs from results with keys:', Object.keys(res))
+        this.data.inputs.forEach((input, i) => {
+          if (input.name && (typeof res[input.name] !== 'undefined')) {
+            log(`Updating input: ${input.name} with data: ${res[input.name]}`)
+            const r = res[input.name]
+            if (typeof r === 'object') {
+              Object.keys(r).forEach(k => {
+                input[k] = r[k]
+              })
+            } else {
+              input.value = r
+            }
           }
-        }
-      })
-    } else if (this.renderFunc) {
-      // Pass results to a custom render function
-      log('Calling a render function...')
-      this.renderFunc(res, this)
+        })
+      } else if (this.data.outputs && this.data.outputs.length) {
+        // Update outputs from results
+        log('Updating outputs from results with keys:', Object.keys(res))
+        this.data.outputs.forEach((output, i) => {
+          // try output.name, sanitized output.name, output.alias
+          const r = res[output.name] 
+            || res[utils.sanitizeName(output.name)] 
+            || (output.alias && res[output.alias])
+          if (typeof r !== 'undefined') {
+            log(`Updating output: ${output.name} with data: ${typeof r}`)
+            output.value = r
+          }
+        })
+      } else if (!this.schema.render && !this.schema.view) {
+        // There's no render or view defined in the schema, also:
+        // No outputs defined, create outputs from results
+        log('Creating outputs from results with keys:', Object.keys(res))
+        this.data.outputs = Object.keys(res)
+          .filter(key => !inputNames.includes(key))
+          .filter(key => key !== 'caller') // Filter out caller
+          .map(key => {
+            return {
+              'name': key,
+              // typeof returns 'object' for arrays; distinguish them for proper rendering
+              'type': Array.isArray(res[key]) ? 'array' : typeof res[key],
+              'value': res[key]
+            }
+          })
+      }
     } else if (Array.isArray(res) && res.length) {
       // Result is array
       if (this.data.outputs && this.data.outputs.length) {
@@ -737,20 +947,6 @@ export default class JSEE {
           'value': res
         }]
       }
-    } else if (typeof res === 'object') {
-      if (this.data.outputs && this.data.outputs.length) {
-        this.data.outputs.forEach((output, i) => {
-          if (output.name && (typeof res[output.name] !== 'undefined')) {
-            log('Updating output: ', output.name)
-            output.value = res[output.name]
-          }
-        })
-      } else {
-        this.data.outputs = [{
-          'type': 'object',
-          'value': res
-        }]
-      }
     } else if (this.schema.outputs && this.schema.outputs.length === 1) {
       // One output value passed as raw js object
       this.data.outputs[0].value = res