Linting, new icons, new state component

browser/vue-flow/.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   extends: [ 'standard', 'plugin:vue/recommended'],
   rules: {
-    'vue/valid-v-model':'warning'
+    'vue/valid-v-model':'warning',
+    'vue/attribute-hyphenation':'none'
   }
 }

browser/vue-flow/src/assets/icons/fail.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="18.947" y1="17.153" x2="45.045" y2="43.056"/>
+</g>
+<g>
+	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="19.045" y1="43.153" x2="44.947" y2="17.056"/>
+</g>
+<g>
+	<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="30.999"/>
+</g>
+</svg>

browser/vue-flow/src/assets/icons/ok.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<polyline fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="13,33 25,45 
+		49,21 	"/>
+</g>
+<g>
+	<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="30.999"/>
+</g>
+</svg>

browser/vue-flow/src/assets/icons/refresh-bak.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M32,1c17.121,0,31,13.879,31,31S49.121,63,32,63"/>
+<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M32,1C14.879,1,1,14.879,1,32
+	c0,6.713,2.134,12.926,5.759,18l5.62,5.621"/>
+<polyline fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="13,45 13,56 2,56 
+	"/>
+</svg>

browser/vue-flow/src/assets/icons/refresh.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M31,1C23.322,1,15.646,3.929,9.788,9.787
+		C-0.91,20.484-1.841,37.248,6.997,49l6.001,6.002"/>
+</g>
+<g>
+	<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M33,63c7.678,0,15.354-2.929,21.212-8.787
+		C64.91,43.516,65.841,26.752,57.003,15l-6.001-6.002"/>
+</g>
+<polyline fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="13,44 13,55 2,55 
+	"/>
+<polyline fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="51,20 51,9 62,9 
+	"/>
+</svg>

browser/vue-flow/src/assets/icons/wait.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="26"/>
+<polyline fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="32,20 32,32 40,36 "/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="21.995" y1="56.005" x2="15" y2="63"/>
+<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="49" y1="63" x2="42.005" y2="56.005"/>
+<polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="1,8 5,4 15,6 3,18 "/>
+<polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="59,4 63,8 61,18 49,6 "/>
+</svg>

browser/vue-flow/src/components/chat.vue

@@ -19,7 +19,7 @@
 
       <div class="flow-chat__users">
         <div class="flow-chat__user" v-for="u in userList">
-          <img src="../assets/user.svg"><span>{{ u }}</span>
+          <img src="../assets/icons/user.svg"><span>{{ u }}</span>
         </div>
       </div>
 

browser/vue-flow/src/components/flow/node.vue

@@ -1,5 +1,4 @@
 <template>
-
   <g
     class="flow-node"
     :class="{
@@ -11,6 +10,7 @@
     @dblclick="$emit('nodeDoubleClick',$event)"
   >
 
+    <!-- selection square -->
     <rect
       class="flow-node__selection"
       stroke-dasharray="7,3"
@@ -20,49 +20,51 @@
       :height="bodyProps.height+8"
     />
 
-    <!--      <circle
-        :r="bodyProps.r+4"
-        stroke-dasharray="7,3"
-        class="flow-node__selection"
-        />-->
-    <svg
-      v-if="style.shape == 'thing'"
-      ref="body"
-      viewBox="0 0 100 100"
-      preserveAspectRatio="XMinYMin"
-      class="flow-node__body"
-      :class="{'flow-node__body--dragging':dragging}"
-      v-bind="bodyProps"
-    >
-      <path d=" M 0 0 l 90 0 l 10 50 l -10 50 l -90 0 c 10 -20, 10 -80, 0 -100 Z " />
-    </svg>
-
-    <circle
-      v-else-if="style.shape == 'circle'"
-      ref="body"
-      class="flow-node__body"
-      :class="{'flow-node__body--dragging':dragging}"
-      v-bind="bodyProps"
-    />
-    <rect
-      v-else
-      ref="body"
-      class="flow-node__body"
-      :class="{'flow-node__body--dragging':dragging}"
-      v-bind="bodyProps"
-    />
+    <!-- shape -->
+    <template>
+      <svg
+        v-if="style.shape == 'thing'"
+        ref="body"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="XMinYMin"
+        class="flow-node__body"
+        :class="{'flow-node__body--dragging':dragging}"
+        v-bind="bodyProps"
+      >
+        <path d=" M 0 0 l 90 0 l 10 50 l -10 50 l -90 0 c 10 -20, 10 -80, 0 -100 Z " />
+      </svg>
+      <circle
+        v-else-if="style.shape == 'circle'"
+        ref="body"
+        class="flow-node__body"
+        :class="{'flow-node__body--dragging':dragging}"
+        v-bind="bodyProps"
+      />
+      <rect
+        v-else
+        ref="body"
+        class="flow-node__body"
+        :class="{'flow-node__body--dragging':dragging}"
+        v-bind="bodyProps"
+      />
+    </template>
 
+    <!-- label -->
     <text
       ref="label"
       class="flow-node__label"
       v-bind="labelProps"
       text-anchor="middle">
-      <tspan x="0" dy="1em" v-for="s in labelWrap" >
+      <tspan
+        :key="'label-wrap' + i"
+        x="0"
+        dy="1em"
+        v-for="(s,i) in labelWrap" >
         {{ s }}
       </tspan>
-      <!--{{ label }}-->
     </text>
 
+    <!-- Sockets -->
     <!-- input -->
     <circle
       class="flow-node__socket flow-node__socket--inputs"
@@ -86,6 +88,7 @@
       @mousedown.stop.prevent="socketPointerDown($event, {out:0})"
     />
 
+    <!-- socket labels -->
     <text
       :key="'inp' +i"
       class="flow-node__socket-detail"
@@ -101,11 +104,16 @@
       {{ output }}
     </text>
 
+    <!-- positioning -->
+    <flow-node-status
+      :status="status"
+      :transform="'translate('+bodyProps.width/2 +','+ -bodyProps.height/2 +')'"/>
   </g>
-
 </template>
 
 <script>
+import FlowNodeStatus from './nodestatus'
+
 import utils from '@/utils/utils'
 const shapeOpts = {
   'circle': {
@@ -117,6 +125,7 @@ const shapeOpts = {
 }
 export default {
   name: 'FlowNode',
+  components: {FlowNodeStatus},
   props: {
     'id': {type: String, required: true},
     'label': {type: String, default: ''},
@@ -238,18 +247,6 @@ export default {
 </script>
 <style>
 
-.flow-node[status=running] .flow-node__body{
-  stroke: yellow !important;
-  fill: yellow !important;
-  stroke-width:30;
-}
-
-.flow-node[status=error] .flow-node__body{
-  stroke: red !important;
-  fill: red !important;
-  stroke-width:30;
-}
-
 .flow-view:not(.activity) .flow-node:hover,
 .flow-node--dragging {
   cursor:move;

browser/vue-flow/src/components/flow/nodestatus.vue

@@ -0,0 +1,56 @@
+<template>
+  <g class="flow-node__activity"
+     v-if="status!=''">
+    <circle
+      class="flow-node__activity-background"
+      rx="0"
+      ry="0"
+      r="14"/>
+
+    <g
+      v-if="status=='running'"
+      transform="rotate(0 0 0)">
+      <animateTransform
+        attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0"
+        to="360"
+        dur="1s"
+        repeatCount="indefinite" />
+      <object xlink:href="../../assets/icons/refresh.svg"/>
+      <image
+        x="-10"
+        y="-10"
+        width="20"
+        height="20"
+        xlink:href="../../assets/icons/refresh.svg"/>
+    </g>
+    <g v-if="status=='waiting'"/>
+
+  </g>
+</template>
+<script>
+export default {
+  name: 'FlowNodeStatus',
+  props: { status: {type: String, default: ''} }
+}
+</script>
+
+<style>
+.flow-node__activity-background {
+  fill: rgba(255,255,255,0.8);
+}
+
+.flow-node[status=running] .flow-node__body{
+  stroke: yellow !important;
+}
+
+.flow-node[status=error] .flow-node__body{
+  stroke: red !important;
+}
+.flow-node[status=finished] .flow-node__body{
+  stroke: green !important;
+}
+
+</style>

browser/vue-flow/src/components/main.vue

@@ -85,7 +85,7 @@
                   :label="nodeInspect.label"
                   :inputs= "registry[nodeInspect.src].inputs"
                   :output= "registry[nodeInspect.src].output"
-                  :activity: "activity[node.id]"
+                  :activity= "activity[nodeInspect.id]"
                   :nodeStyle= "registry[nodeInspect.src].style"
               /></flow-panzoom>
             </svg>

go/src/flow/operation.go

@@ -110,6 +110,9 @@ func opFunc(f *Flow, id string) *operation {
 		kind: "func",
 		set:  dumbSet,
 		process: func(ctx OpCtx, params ...Data) Data {
+			f.trigger("nodeWait", map[string]Data{
+				"id": id,
+			})
 			op, ok := f.operations[id]
 			if !ok {
 				f.err = fmt.Errorf("invalid operation '%s'", id)

go/src/flowserver/session.go

@@ -11,6 +11,7 @@ import (
 	"github.com/gorilla/websocket"
 )
 
+// NodeActivity when nodes are processing
 type NodeActivity struct {
 	Status string    `json:"status"` // nodeStatus, Running, error, result
 	Result flow.Data `json:"result"`
@@ -134,13 +135,16 @@ func (s *FlowSession) NodeRun(c *websocket.Conn, data []byte) error {
 	}()
 
 	log.Println("Attaching hooks")
+	//XXX: Transform this function to a typed hook structure
 	s.flow.Handle(func(name string, payload map[string]flow.Data) {
-
 		switch name {
+		case "nodeWait":
+			s.nodeActivity[payload["id"].(string)] = NodeActivity{Status: "waiting"}
 		case "nodeStart":
 			s.nodeActivity[payload["id"].(string)] = NodeActivity{Status: "running"}
 		case "nodeFinish":
 			s.nodeActivity[payload["id"].(string)] = NodeActivity{Status: "finish", Result: payload["result"]}
+
 		}
 		// Add to executing nodes
 		log.Println("Exec doc", name)