nflow-vis - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

package.json

 {
   "name": "nflow-vis",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "d3 visualisation for nflow",
@@ -5,0 +5,0 @@ "main": "dist/nflow-vis.js",

src/inspector/inspector.js

@@ -53,10 +53,12 @@ import './inspector.scss'
 
-  d.d3dom.select('.name').text(e.f.name)
-  d.d3dom.select('.id').text(e.f.guid)
-  d.d3dom.select('.status').text(e.f.status)
-  d.d3dom.select('.version').text(e.f.version)
-  d.d3dom.select('.parent').text((!e.f.isUnparented && e.f.parent && e.f.parent.name!=null)?e.f.parent.name: 'DETACHED')
+  d.d3dom.select('.name').text(e.name)
+  d.d3dom.select('.id').text(e.guid)
+  d.d3dom.select('.status').text(e.status)
+  d.d3dom.select('.version').text(e.version)
+  d.d3dom.select('.parent').text((!e.isUnparented && e.parent && e.parent.name!=null)?e.parent.name: 'DETACHED')
     
   //data
-  let datum = e.f.data!=null?JSON.stringify(JSON.parse(e.f.data), null, '  '):''
+  let payload = e.data
+  if (typeof(e.data)=='string') payload = JSON.parse(e.data)
+  let datum = e.data!=null?JSON.stringify(payload, null, '  '):''
   d.d3dom.select('.data').text(datum)
@@ -70,3 +72,3 @@ .each(function(){
       .selectAll('dl')
-      .data(Object.keys(e.f.listeners||{}))
+      .data(Object.keys(e.listeners||{}))
 
@@ -81,3 +83,3 @@ let dl = listeners.enter()
   listeners.select('dt').text(String)
-  listeners.select('dd').text(d=>e.f.listeners[d].join(', '))
+  listeners.select('dd').text(d=>e.listeners[d].join(', '))
 
@@ -89,3 +91,3 @@
     .selectAll('dl')
-    .data(e.f.recipients||[])
+    .data(e.recipients||[])
   let rdl = recipients.enter()
@@ -116,3 +118,3 @@ .append('dl')
     .selectAll('dl')
-    .data(e.f.children||[])
+    .data(e.children||[])
   let cdl = childNodes.enter()
@@ -130,3 +132,19 @@ .append('dl')
 
+  // history
+  var history = d.d3dom.select('.history')
+    .selectAll('dl')
+    .data(e.history||[])
+  let hdl = history.enter()
+    .append('dl')
+  
+  hdl.append('dt')
+  hdl.append('dd')
 
+  history.exit().remove()
+
+  history.select('dt').text(d=>d.name)
+  history.select('dd').text(d=>d.status)
+  history.classed('is-unparented',d=>d.isUnparented)
+
+
 }
@@ -133,0 +151,0 @@

src/links/links.js

 import {RADIUS} from '../utils/paths'
 import utils from '../utils/utils'
+import './links.scss'
 
@@ -64,56 +65,98 @@ export default (parent)=>(
 
-
-
-function updateRoutes(data){
+function updateRoutes(){
+  
+  let tree = this.target.parent()
   let flow = this.target
-  let tree = flow.parent()
   let d = flow.data()
   let td = tree.data()
-  let d3dom = td.d3nodes
-  let nodes = td.nodes
-  if (!td.showRoute
-    ||! td.showRoute.f.source.recipients) {
-    td.d3routes.html('')
-    return;
-  };
-  var line = d3.svg.line()
-    .x(d=>d.x)
-    .y(d=>d.y)
-    .interpolate('linear')
+  let d3dom = td.d3routes
+  let links = td.links.filter(link=>(
+      !link.source.hidden 
+      && !link.target.hidden
+      && link.target.f.route
+    ))
+  
+  var link = d3dom.selectAll(".routes")
+    .data(links, function(d) { return d.target.f.guid; });
 
-  var paths = td.d3routes
-    .selectAll("g.route")
-    .data(td.showRoute.f.source.recipients, d=>d.flow.guid);
-
-  paths
-    .enter()
+  let enter = link.enter()
     .append('g')
-    .classed('route', true)
+    .classed('routes', true)
 
-  var links = paths
-    .selectAll('path.link')
-    .data(d=>{
-      var r = d.route.concat()
-      var pairs = []
-      while (r.length>1) {
-        pairs.push({
-          source:td.nodeMap[r[0].guid],
-          target:td.nodeMap[r[1].guid]})
-        r.shift()
-      }
-      pairs = pairs
-        .filter(pair=>(pair.source && pair.target))
-        .filter(pair=>(
-          !pair.source.hidden 
-       && !pair.target.hidden))
-      return pairs
-    })
+  enter.append('path')
+    .classed("link", true)
+    .classed("link-up", true)
+    .attr("d", getCoords.bind(flow))
+    .classed('is-route', true)
+  
+  enter.append('path')
+    .classed("link", true)
+    .classed("link-down", true)
+    .attr("d", getCoords.bind(flow))
+    .classed('is-route', true)
+  
+  link.attr('data-direction', d=>d.target.f.route)
+  link.exit()
+    .remove();
+}
 
-  links.enter()
-    .insert("path", "g")
-    .attr("class", "link")
-
-  links.attr("d", getCoords.bind(flow));
+function selectNode(d){
+  console.log('selected', d)
+  let flow = this.target
+  
 }
 
+// function updateRoutes(data){
+//   let flow = this.target
+//   let tree = flow.parent()
+//   let d = flow.data()
+//   let td = tree.data()
+//   let d3dom = td.d3nodes
+//   let nodes = td.nodes
+
+//   if (!td.showRoute
+//     ||! td.showRoute.f.source.recipients) {
+//     td.d3routes.html('')
+//     return;
+//   };
+//   var line = d3.svg.line()
+//     .x(d=>d.x)
+//     .y(d=>d.y)
+//     .interpolate('linear')
+
+//   var paths = td.d3routes
+//     .selectAll("g.route")
+//     .data(td.showRoute.f.source.recipients, d=>d.flow.guid);
+
+//   paths
+//     .enter()
+//     .append('g')
+//     .classed('route', true)
+
+//   var links = paths
+//     .selectAll('path.link')
+//     .data(d=>{
+//       var r = d.route.concat()
+//       var pairs = []
+//       while (r.length>1) {
+//         pairs.push({
+//           source:td.nodeMap[r[0].guid],
+//           target:td.nodeMap[r[1].guid]})
+//         r.shift()
+//       }
+//       pairs = pairs
+//         .filter(pair=>(pair.source && pair.target))
+//         .filter(pair=>(
+//           !pair.source.hidden 
+//        && !pair.target.hidden))
+//       return pairs
+//     })
+
+//   links.enter()
+//     .insert("path", "g")
+//     .attr("class", "link")
+
+//   links.attr("d", getCoords.bind(flow));
+// }
+
 function getCoords(d){
@@ -120,0 +163,0 @@ return this.data().diagonal({

src/model/model.js

@@ -18,3 +18,14 @@ import nflow from 'nflow'
       },
-      nodeMap: {}
+      eventRoot: {
+        name: 'nflow-vis-event-root',
+        guid: -2,
+        parent: null,
+        children: [],
+        numInstances:1,
+        hidden:true,
+        listeners:[],
+        isRoot:true
+      },
+      nodeMap: {},
+      selectedNode: null
     })
@@ -21,0 +32,0 @@ .on('get-model', function(){

src/nodes/nodes.js

 import {RADIUS, CIRCLE, DROP} from '../utils/paths'
 import utils from '../utils/utils'
 import nflow from 'nflow'
-
+import './nodes.scss'
 export default (parent)=>(
@@ -18,2 +18,3 @@ nflow.create('nodes')
   this.target.data().dom = dom
+
 }
@@ -38,4 +39,6 @@
       return "translate(" + d.x0 + "," + d.y0 + ")"; })
-    .on("click", d=>flow.emit('select-node', d))
+    .on("click", d=>flow.emit('select-node', d.f))
     
+  nodeEnter.append('rect')
+    .classed('text-bg', true)
 
@@ -50,7 +53,10 @@ nodeEnter.append('path')
   nodeEnter
-    .append('g')
-    .attr("transform", `translate(${RADIUS+4},0)`)
+    //.append('g')
+    //.attr("transform", `translate(${RADIUS+4},0)`)
     .append("text")
+    .classed('node-label', true)
     .attr("x", 0)
-    .attr("dy", ".35em")
+    .attr("y", -(RADIUS+5)+'px')
+    .attr("text-anchor", 'middle')
+    //.attr("dy", ".35em")
     .style("fill-opacity", .1);
@@ -62,3 +68,7 @@
     })
+
   
+
+
+  
   //console.log('changedNodes', changedNodes.size())
@@ -76,4 +86,17 @@ var nodeUpdate = changedNodes
         .style("fill-opacity", 1)
-        .each(utils.wrapText(120))
+        //.each(utils.wrapText(100))
         .each(utils.fitText(70))
+
+      d3.select(this)
+        .select('.text-bg')
+        .each(function(){
+          var text = d3.select(this.parentNode).select('text');
+          var bbox = text.node().getBBox();
+          var padding = {x:2,y:0};
+          var rect = d3.select(this)
+              .attr("x", bbox.x - padding.x)
+              .attr("y", bbox.y - padding.y)
+              .attr("width", bbox.width + (padding.x*2))
+              .attr("height", bbox.height + (padding.y*2))
+        })
     });
@@ -88,5 +111,5 @@
     .classed('is-parent-cancelled', d=>utils.parentCancelled(d))
-    .classed('is-recipient', d=>utils.isRecipient(d,td))
+    .classed('is-recipient', d=>d.f.recipientInfo)
     .classed('has-no-recipients', d=>utils.hasNoRecipients(d))
-    .classed('is-emitter', d=>utils.isEntryPoint(d,td))
+    .classed('is-emitter', d=>d.f.isEmitter)
     .call(listeners)
@@ -93,0 +116,0 @@

src/parser/actions.js

 import nflow from 'nflow'
+import utils from '../utils/utils'
+
 var actions  = {}
@@ -17,3 +19,3 @@ let noop = ()=>{}
       actions[name](s, ...data)
-      updateProps(s, ...data)
+      updateProps(s, name, ...data)
       throttledUpdate()
@@ -37,3 +39,3 @@ }
 
-function updateProps(s, f, newData, oldData){
+function updateProps(s, name, f, newData, oldData){
   var e = s.nodeMap[f.guid]
@@ -44,2 +46,3 @@ //TODO merge in all props
   }
+  e.history.push({f, d:newData, d0:oldData})
 }
@@ -56,3 +59,3 @@
   e.listeners[newData.name] = newData.handlers
-  updateHash(e)
+  utils.updateHash(e)
 }
@@ -63,3 +66,3 @@ actions.listenerRemoved = (s, f, newData, oldData)=>{
   delete e.listeners[newData.name]
-  updateHash(e)
+  utils.updateHash(e)
 }
@@ -71,3 +74,3 @@
   e.parent = s.root
-  updateHash(s.root)
+  utils.updateHash(s.root)
 }
@@ -97,3 +100,3 @@
   e.isUnparented = true
-  updateHash(e)
+  utils.updateHash(e)
 }
@@ -105,3 +108,3 @@
   e.recipients = newData.recipients
-  updateHash(e)
+  utils.updateHash(e)
 }
@@ -113,3 +116,3 @@
   e.name = f.name
-  updateHash(e)
+  utils.updateHash(e)
 }
@@ -121,3 +124,3 @@
   e.data = newData
-  updateHash(e)
+  utils.updateHash(e)
 }
@@ -130,3 +133,3 @@
   if (!e) return
-  updateHash(e)
+  utils.updateHash(e)
 }
@@ -139,3 +142,3 @@
   if (!e) return
-  updateHash(e)
+  utils.updateHash(e)
   // remove child from old parent
@@ -150,3 +153,3 @@ var oldP = e.parent
     }
-    updateHash(oldP)
+    utils.updateHash(oldP)
   }
@@ -159,3 +162,3 @@
     e.parent = newP
-    updateHash(newP)
+    utils.updateHash(newP)
   }
@@ -173,5 +176,6 @@ e.isUnparented = !newP
       status:f.status,
-      version:f.version
+      version:f.version,
+      history:[]
     }
-  updateHash(e)
+  utils.updateHash(e)
   return e
@@ -186,13 +190,1 @@ }
 }
-
-function updateHash(d){
-  d.hash = createGuid()
-}
-
-function createGuid(){
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
-    .replace(/[xy]/g, function(c) {
-      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-      return v.toString(16);
-    });
-}

src/parser/parser.js

 import utils from '../utils/utils'
 import {ERRORS} from '../utils/consts'
 import Actions from './actions'
+import Selection from './selection'
 import Model from '../model/model'
@@ -11,4 +12,5 @@ import nflow from 'nflow'
     .parent(parent)
+    .call(Model)
     .call(Actions)
-    .call(Model)
+    .call(Selection)
     .on('track', track
@@ -26,3 +28,3 @@ , initLogger)
     
-    f.emit('action', 'start', root.toObj(), root.toObj(), null)
+    f.emit('action', 'start', root.toObj('name', 'guid'), root.toObj('name', 'guid'), null)
   }
@@ -29,0 +31,0 @@

src/tree/tree.js

@@ -5,2 +5,3 @@ import './tree.scss'
 import Links from '../links/links'
+import utils from '../utils/utils'
 
@@ -22,2 +23,3 @@ export default (parent)=>(
       maxBatchLength: 7,
+      nodesize:{ width:100, height:80},
       clonedNodes : {}
@@ -84,3 +86,3 @@ })
       //d.y0 =d.y = d.depth*50+Math.random()*50
-      d.y = d.depth * (root.hidden?40:50)+ (root.hidden?0:50);
+      //d.y = d.depth * (root.hidden?40:fd.nodesize.height)+ (root.hidden?0:fd.nodesize.height);
       d.x+=fd.width/2
@@ -139,5 +141,5 @@
           ? .05
-          : 1//b.f.name.length*.1
+          : ((a.f.children.length | b.f.children.length)?1:.8 )
       })
-    .nodeSize([100,50])
+    .nodeSize([d.nodesize.width,d.nodesize.height])
     .children((e)=>(
@@ -155,2 +157,6 @@ d.showEvents
 
+
+
+
+
 function cloneNode(e,d){
@@ -157,0 +163,0 @@ if (!d.clonedNodes[e.guid])

src/utils/consts.js

@@ -6,2 +6,7 @@
 , invalidOnChangeArgs:  'Invalid Argument. Please use a Function as the callback'
+}
+
+export const DIRECTION_BITMASK = {
+  UPSTREAM: 1<<0,
+  DOWNSTREAM: 1<<1,
 }

src/utils/utils.js

@@ -70,5 +70,6 @@ var utils = {}
     var r = maxWidth / bb.width;
+    var fontSize = parseFloat(d3text.style("font-size"))
     r = Math.min(r,1)
     d3text
-      .style('transform', `scale(${r})`)
+      .style('font-size', (r*fontSize)+'px')
     
@@ -116,2 +117,15 @@ }
 
+
+utils.updateHash = (d)=>{
+  d.hash = createGuid()
+}
+
+function createGuid(){
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
+    .replace(/[xy]/g, function(c) {
+      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+      return v.toString(16);
+    });
+}
+
 export default utils

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1709132

increased by1.3%

Number of package files

36

increased by16.13%

Lines of code

18179

increased by1.81%

No dependency changes