registry improvements, Implementing result

browser/vue-flow/src/assets/default-theme.css

@@ -6,10 +6,10 @@
   --background-tertiary: rgba(188, 188, 188, 1);
   --normal: #333;
   --normal-secondary: #999;
-
-  /*--primary: #aaa;*/
-  --primary: #57b;
+  --primary: #57f;
   --primary-inverse: #fff;
+  --secondary: #666;
+  --secondary-inverse: #fff;
   --node-label: #fff;
   --node-socket: #444;
   --link-hover: #f00;
@@ -18,14 +18,30 @@
 }
 
 .vertical_sep {
+  flex-basis: 1px;
   width: 1px;
-  border-right: var(--primary);
+  height: 30px;
+  background: var(--primary);
 }
 
 .primary {
   color: var(--primary);
 }
 
+.primary-inverse {
+  background: var(--primary);
+  color: var(--primary-inverse);
+}
+
+.secondary {
+  color: var(--secondary);
+}
+
+.secondary-inverse {
+  background: var(--secondary);
+  color: var(--secondary-inverse);
+}
+
 button {
   color: inherit;
 }
@@ -36,6 +52,11 @@ input {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
+h3 {
+  font-weight: bold;
+  color: var(--primary);
+}
+
 .app-header {
   display: flex;
   align-items: center;

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

@@ -27,7 +27,7 @@
           v-for="(link,i) in nodeData.links"
           :key="i"
           v-bind="linkProps(link)"
-          @click="linkRemove(link)"
+          @click="linkPointerClick($event,link)"
         />
         <!-- nodes -->
         <flow-node
@@ -59,7 +59,6 @@
       <button @click="stickySockets=!stickySockets"> {{ stickySockets? 'Hide':'Show' }} sockets </button>
       <button @click="detailed=!detailed"> {{ detailed? 'Hide':'Show' }} detail </button>
       <button @click="$emit('documentSave')"> Save </button> <!-- should disable until confirmation -->
-      <div class="vertical_sep"/>
       <button v-if="panzoom.x!=0 || panzoom.y!=0 || panzoom.zoom!=1" @click="panzoomReset">
         Reset view
       </button>
@@ -376,6 +375,11 @@ export default {
       this.sendFlowEvent('nodeUpdate', (nu[newNode.id] = newNode, nu))
       this.sendDocumentUpdate()
     },
+    linkPointerClick (ev, link) {
+      if (ev.button !== 1) return
+      ev.preventDefault()
+      this.linkRemove(link)
+    },
     linkAdd (link) {
       this.nodeData.links.push(link)
       this.sendFlowEvent('linkUpdate', link)

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

@@ -55,7 +55,7 @@ export default {
 }
 
 .flow-node__activity-icon  >* {
-  transform-origin: 50% 50%;
+  transform-origin: 32px 32px;
   stroke-width: 6px;
   stroke: inherits;
 }

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

@@ -90,31 +90,32 @@
 
     <!-- socket labels -->
 
-    <text
-      :key="'inp' +i"
-      class="flow-node__socket-detail"
-      v-for="(inp,i) in inputs"
-      text-anchor="end"
-      :x="inputPos(i).x - 13"
-      :y="inputPos(i).y+5"
-    >{{ inp }}</text>
-    <text
-      class="flow-node__socket-detail"
-      :x="outputPos(0).x + 13"
-      :y="outputPos(0).y+5">
-      {{ output }}
-    </text>
+    <g>
+      <text
+        :key="'inp' +i"
+        class="flow-node__socket-detail"
+        v-for="(inp,i) in inputs"
+        text-anchor="end"
+        :x="inputPos(i).x - 13"
+        :y="inputPos(i).y+5"
+      >{{ inp }}</text>
+      <text
+        class="flow-node__socket-detail"
+        :x="outputPos(0).x + 13"
+        :y="outputPos(0).y+5">
+        {{ output }}
+      </text>
+    </g>
 
-    <!-- positioning -->
-    <flow-node-status
-      v-if="status!=''"
+    <flow-node-activity
+      v-if="status"
       :status="status"
       :transform="'translate('+bodyProps.width/2 +','+ -bodyProps.height/2 +')'"/>
   </g>
 </template>
 
 <script>
-import FlowNodeStatus from './nodestatus'
+import FlowNodeActivity from './node-activity'
 
 import utils from '@/utils/utils'
 const shapeOpts = {
@@ -127,7 +128,7 @@ const shapeOpts = {
 }
 export default {
   name: 'FlowNode',
-  components: {FlowNodeStatus},
+  components: {FlowNodeActivity},
   props: {
     'id': {type: String, required: true},
     'label': {type: String, default: ''},
@@ -149,10 +150,11 @@ export default {
   },
   computed: {
     style () {
+      console.log('Testing parent:', this.$parent)
       return this.nodeStyle || {}
     },
     status () {
-      return this.activity && this.activity.status || ''
+      return this.activity && (this.activity.status || '')
     },
     labelWrap () {
       let wrapThreshold = 8 // initial wrap threshold
@@ -311,6 +313,7 @@ for hidden
 
 .flow-node__socket-detail {
   pointer-events:none;
+  user-select:none;
   opacity:0;
   fill: #fff !default;
 }

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

@@ -76,32 +76,37 @@
         <div slot="header">Node inspector:</div>
         <div slot="body" class="flow-modal__body">
           <div class="flow-modal__info">
-            <svg class="flow-view preview activity flow-detail flow-linking" width="300" height="200" viewBox="0 0 300 200">
+            <svg class="flow-view preview activity flow-detail flow-linking" width="100%" height="100%" viewBox="0 0 300 200">
               <flow-panzoom>
                 <flow-node
                   style="pointer-events:none"
                   ref="modalPreviewNode"
-                  transform="translate(150,100)"
                   :id="nodeInspect.id"
+                  transform="translate(150,100)"
                   :match="{}"
                   :label="nodeInspect.label"
                   :inputs= "registry[nodeInspect.src].inputs"
                   :output= "registry[nodeInspect.src].output"
                   :activity= "activity[nodeInspect.id]"
                   :nodeStyle= "registry[nodeInspect.src].style"
-              /></flow-panzoom>
+                />
+              </flow-panzoom>
             </svg>
-            <div class="flow-modal__sockets-properties">
+            <div class="flow-modal__params" v-if="nodeInspect.prop" @keydown.enter="nodeInspect=null">
+              <h3>Node Parameters</h3>
+              <div class="flow-modal__param" v-for="(v,k) in nodeInspect.prop">
+                <label>{{ k }}</label>
+                <input ref="nodeInspectProp" type="text" v-model="nodeInspect.prop[k]">
+              </div>
+            </div>
+            <div class="flow-modal__properties">
+              <h3>Node Properties</h3>
               <label>Description</label>
               <div class="property">Bogus description</div>
               <label>Help</label>
               <div class="property">Connect to input a thing and goes to output another thing</div>
-              <div class="flow-modal__params" v-if="nodeInspect.prop" @keydown.enter="nodeInspect=null">
-                <div class="flow-modal__param" v-for="(v,k) in nodeInspect.prop">
-                  <label>{{ k }}</label>
-                  <input type="text" v-model="nodeInspect.prop[k]">
-                </div>
-              </div>
+              <label>Result</label>
+              <div class="property">{{ activity && activity[nodeInspect.id] && activity[nodeInspect.id].data }}</div>
             </div>
           </div>
           <label>label</label>
@@ -113,8 +118,8 @@
             @keydown.enter="nodeInspect=null"
           >
         </div>
-        <div slot="footer">
-          <button class="primary-invert" @click="nodeProcess(nodeInspect);nodeInspect=null">Run</button>
+        <div class="flow-modal__footer" slot="footer">
+          <button class="secondary-inverse" @click="nodeProcess(nodeInspect);nodeInspect = null">Run</button>
           <button @click="nodeInspect=false">OK</button>
         </div>
       </hx-modal>
@@ -222,8 +227,6 @@ export default {
       }
     })
     this.$flowService.on('registry', (v) => {
-      console.log('Registry received:', JSON.stringify(v))
-
       let res = {}
       for (let k of Object.keys(v.data)) {
         const e = v.data[k]
@@ -240,7 +243,6 @@ export default {
       this.registry = Object.assign({}, defRegistry, res)
     })
     this.$flowService.on('nodeActivity', (v) => {
-      console.log('Received activity')
       this.activity = v.data || {}
     })
 
@@ -258,9 +260,14 @@ export default {
     nodeInspectStart (node) { // node
       this.nodeInspect = node
       this.$nextTick(() => {
-        if (!this.$refs.modalInput) return
-        this.$refs.modalInput.setSelectionRange(0, this.$refs.modalInput.value.length)
-        this.$refs.modalInput.focus()
+        if (!this.$refs.modalInput) { return }
+        let targetInput = this.$refs.modalInput
+        if (this.$refs.nodeInspectProp.length > 0) {
+          targetInput = this.$refs.nodeInspectProp[0]
+        }
+
+        targetInput.setSelectionRange(0, this.$refs.modalInput.value.length)
+        targetInput.focus()
       })
     },
     nodeProcess (node) {
@@ -371,8 +378,10 @@ export default {
   flex-flow:row;
 }
 
+/* Columns */
 .flow-modal__info > * {
   margin-right:10px;
+  flex:1;
 }
 
 .flow-modal__body label {
@@ -388,4 +397,9 @@ export default {
   font-size:12px;
 }
 
+.flow-modal__footer {
+  display:flex;
+  justify-content: space-between;
+}
+
 </style>

go/src/flow/operation.go

@@ -117,6 +117,12 @@ func opFunc(f *Flow, id string) *operation {
 				f.hooks.error(id, f.err)
 				return nil
 			}
+
+			fnval := reflect.ValueOf(op.executor)
+			if fnval.Type().NumIn() != len(op.inputs) {
+				f.hooks.error(id, fmt.Errorf("expect %d inputs got %d", fnval.Type().NumIn(), len(op.inputs)))
+				return nil
+			}
 			/////////////////////////////
 			// NEW PARALLEL PROCESSING
 			///////////
@@ -142,7 +148,7 @@ func opFunc(f *Flow, id string) *operation {
 				}
 			}
 			f.hooks.start(id)
-			fnret := reflect.ValueOf(op.executor).Call(callParam)
+			fnret := fnval.Call(callParam)
 			if len(fnret) > 1 {
 				if err := fnret[1].Interface().(error); err != nil {
 					f.hooks.error(id, err)

go/src/flow/registry/registry.go

@@ -21,8 +21,6 @@ func (r *Registry) Register(name string, v interface{}) *Entry {
 	if e.err != nil {
 		return e
 	}
-	// build description here
-
 	r.data[name] = e
 	return e
 }

go/src/flowserver/session.go

@@ -27,6 +27,8 @@ type NodeActivity struct {
 // FlowSession Create a session and link clients
 type FlowSession struct {
 	sync.Mutex
+	mgr *FlowSessionManager
+
 	ID string // Random handle for sessionID
 	// List of clients on this session
 	clients []*websocket.Conn
@@ -39,7 +41,7 @@ type FlowSession struct {
 }
 
 //NewSession creates and initializes a NewSession
-func NewSession(ID string) *FlowSession {
+func NewSession(mgr *FlowSessionManager, ID string) *FlowSession {
 	// Or load
 	//
 	//
@@ -58,6 +60,7 @@ func NewSession(ID string) *FlowSession {
 
 	s := &FlowSession{
 		Mutex:        sync.Mutex{},
+		mgr:          mgr,
 		ID:           ID,
 		clients:      []*websocket.Conn{},
 		Chat:         ChatRoom{},
@@ -111,6 +114,10 @@ func (s *FlowSession) ClientRemove(c *websocket.Conn) {
 		}
 	}
 	s.Chat.ClientRemove(c)
+	if len(s.clients) == 0 {
+		log.Println("No more clients, remove session")
+		delete(s.mgr.sessions, s.ID) // Clear memory session
+	}
 }
 
 // ChatJoin the chat room on this session

go/src/flowserver/sessionmgr.go

@@ -38,8 +38,8 @@ func (fsm *FlowSessionManager) CreateSession() *FlowSession {
 		ID := flow.RandString(10)
 		sess, ok := fsm.sessions[ID]
 		if !ok {
-			sess = NewSession(ID)
-			fsm.sessions[ID] = sess
+			sess = NewSession(fsm, ID)
+			fsm.sessions[ID] = sess // XXX: Make this sync
 			return sess
 		}
 	}
@@ -54,8 +54,8 @@ func (fsm *FlowSessionManager) LoadSession(ID string) (*FlowSession, error) {
 	}
 	sess, ok := fsm.sessions[ID]
 	if !ok {
-		sess = NewSession(ID)
-		fsm.sessions[ID] = sess
+		sess = NewSession(fsm, ID)
+		fsm.sessions[ID] = sess // Make this sync
 	}
 	return sess, nil