Add Observer block (#34)

src/components/Block.vue

@@ -121,6 +121,7 @@
       <s-block-expression :block="block" v-if="block.typeCode === 1"></s-block-expression>
       <s-block-data :block="block" v-if="block.typeCode === 2"></s-block-data>
       <s-block-accumulator :block="block" v-if="block.typeCode === 3"></s-block-accumulator>
+      <s-block-observer :block="block" v-if="block.typeCode === 4"></s-block-observer>
       <s-block-condition :block="block" v-if="block.typeCode === 5"></s-block-condition>
       <s-block-optimize :block="block" v-if="block.typeCode === 8"></s-block-optimize>
     </template>
@@ -134,6 +135,7 @@ import BlockExpression from './BlockExpression.vue'
 import BlockAccumulator from './BlockAccumulator.vue'
 import BlockOptimize from './BlockOptimize.vue'
 import BlockCondition from './BlockCondition.vue'
+import BlockObserver from './BlockObserver.vue'
 
 import colors from '../lib/blockColors.js'
 
@@ -200,6 +202,7 @@ export default {
     's-block-accumulator': BlockAccumulator,
     's-block-optimize': BlockOptimize,
     's-block-condition': BlockCondition,
+    's-block-observer': BlockObserver,
   },
   props: ['block', 'blockIndex', 'id'],
 }

src/components/BlockObserver.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-card-text>
+    <!-- Data -->
+    <v-text-field 
+      label="Observed data"
+      v-model="block.value" 
+      clearable 
+      density="compact"
+    ></v-text-field>
+
+    <!-- Distribution type -->
+    <v-select 
+      label="Distribution" 
+      v-model="block.distribution" 
+      :items="Object.keys(distributions)"
+      density="compact"
+    ></v-select>
+
+    <!-- Distribution parameters -->
+    <div 
+      :class="{'d-flex': Object.keys(params).length === 2}"    
+    >
+      <v-text-field
+        v-if="block.distribution.length"
+        v-for="(paramOptions, param) in params"
+        :label="param"
+        v-model="block.params[param]"
+        clearable 
+        density="compact"
+      ></v-text-field>
+    </div>
+  </v-card-text>
+</template>
+
+<script>
+const distributions = require('../lib/distributions')
+export default {
+  data: () => ({
+    distributions,
+  }),
+  computed: {
+    params() {
+      return distributions[this.block.distribution]
+    }
+  },
+  props: ['block'],
+}
+</script>

src/lib/flowConvert.js

@@ -116,7 +116,7 @@ function flowToBlocks (flowInput, log) {
     }
 
     // Case: Variable
-    if (node.type === 'Variable' && node.inputs.operation && node.inputs.operation.value !== 'None') {
+    if (((node.type === 'Variable') || (node.type === 'Observer')) && node.inputs.operation && node.inputs.operation.value !== 'None') {
       block.distribution = node.inputs.operation.value
       block.params = {}
       Object.keys(distributions[node.inputs.operation.value]).forEach(inputName => {
@@ -261,9 +261,9 @@ function blockToNode(block) {
   // In blocks models strict integer/float inputs can contain string names of other blocks
   // Baklava throws TypeError: intf.value.value.toFixed is not a function
 
-  // [Variable]
-  if (block.typeCode === 0) {
-    // Variable -> Distribution, Params
+  // [Variable || Observer]
+  if (block.typeCode === 0 || block.typeCode === 4) {
+    // Distribution, Params
     if (typeof block.distribution !== 'undefined') {
       node.inputs.operation = {
         id: genId('i'),
@@ -279,7 +279,7 @@ function blockToNode(block) {
         }
       })
     }
-    // Variable -> Shape
+    // Shape
     if (typeof block.dims !== 'undefined') {
       node.inputs.dims = {
         id: genId('i'),
@@ -371,8 +371,16 @@ function blockToNode(block) {
       value: block.show
     }
   }
+
+  // `value` for Observer (non-dynamic)
+  if (typeof block.value !== 'undefined' && block.typeCode === 4) {
+    node.inputs.value = {
+      id: genId('i'),
+      value: block.value || '',
+    }
+  }
 
-  // `value` (for Condition and Optimize)
+  // `value` (for Accumulator, Condition and Optimize)
   if (typeof block.value !== 'undefined' && [3, 5, 8].includes(block.typeCode)) {
     node.inputs.value = {
       id: genId('i'),

src/lib/flowNodes.js

@@ -101,6 +101,41 @@ const VariableNode = defineDynamicNode({
   },
 })
 
+
+// Define a custom node
+// https://v2.baklava.tech/nodes/dynamic-nodes.html
+const ObserverNode = defineDynamicNode({
+  type: 'Observer',
+  inputs: {
+    value: () => new TextInputInterface('Observed data', ''),
+    operation: () => new SelectInterface(
+      'Distribution', 
+      'Gaussian', 
+      Object.keys(distributions)
+    ).setPort(false),
+  },
+  onUpdate({ operation }) {
+    const inputs = {}
+    const params = distributions[operation]
+    Object.keys(params).forEach(paramName => {
+      const param = params[paramName]
+      if (param.type === 'int')
+        inputs[paramName] = () => new IntegerInterface(paramName, 0, param.min, param.max)
+      else if (param.type === 'vector')
+        inputs[paramName] = () => new TextInputInterface(paramName, '')
+      else
+        inputs[paramName] = () => new NumberInterface(paramName, 0, param.min, param.max)
+    })
+    const update = this.previousValue !== operation
+    this.previousValue = operation
+    return {
+      inputs,
+      forceUpdateInputs: update ? ['value'] : []
+    }
+  },
+  outputs: {},
+})
+
 /*
 const ExpressionNode = defineDynamicNode({
     type: 'Expression',
@@ -289,5 +324,6 @@ export default [
   ExpressionListNode,
   AccumulatorNode,
   ConditionNode,
-  OptimizeNode
+  OptimizeNode,
+  ObserverNode
 ]