added visible display of number of outputs for a filter

static/diagram.js

@@ -191,8 +191,9 @@ var NodeConnection = /** @class */ (function (_super) {
 }(CanvasObject));
 var DiagramNode = /** @class */ (function (_super) {
     __extends(DiagramNode, _super);
-    function DiagramNode(id, x, y, label, meta, ctx) {
+    function DiagramNode(id, x, y, label, meta, ctx, results) {
         if (meta === void 0) { meta = {}; }
+        if (results === void 0) { results = new Array(); }
         var _this = _super.call(this, x, y, 0, 0) || this;
         _this.dragging = false;
         _this.dragOrigin = new Point();
@@ -207,6 +208,7 @@ var DiagramNode = /** @class */ (function (_super) {
         _this.logButton = new Button(0, 0, "Log", ctx, _diagram.editNodeCallback, _this);
         _this.input = new NodeIO(_this, true);
         _this.output = new NodeIO(_this, false);
+        _this.results = results;
         return _this;
     }
     DiagramNode.prototype.update = function (ms) {
@@ -253,6 +255,13 @@ var DiagramNode = /** @class */ (function (_super) {
         var typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2;
         var typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight;
         ctx.fillText(this.type, typeX, typeY);
+        var resultCount = "" + this.results.length;
+        var resultCountSize = ctx.measureText(resultCount);
+        var resultCountWidth = resultCountSize.width;
+        var resultCountHeight = resultCountSize.actualBoundingBoxAscent + resultCountSize.actualBoundingBoxDescent;
+        var resultCountX = ms.offset.x + this.x + this.width - resultCountWidth - 3 * 3;
+        var resultCountY = ms.offset.y + this.y + resultCountHeight + 3 * 3;
+        ctx.fillText(resultCount, resultCountX, resultCountY);
         this.deleteButton.x = ms.offset.x + this.x;
         this.deleteButton.y = ms.offset.y + this.y + this.height - this.deleteButton.height;
         this.deleteButton.draw(ctx, ms);
@@ -529,9 +538,10 @@ var Diagrams = /** @class */ (function () {
     };
     Diagrams.prototype.draw = function () {
     };
-    Diagrams.prototype.addNode = function (id, x, y, label, meta) {
+    Diagrams.prototype.addNode = function (id, x, y, label, meta, results) {
         if (meta === void 0) { meta = {}; }
-        var node = new DiagramNode(id, x, y, label, meta, this.ctx);
+        if (results === void 0) { results = new Array(); }
+        var node = new DiagramNode(id, x, y, label, meta, this.ctx, results);
         this.nodes.set(id, node);
     };
     Diagrams.prototype.addConnection = function (A, B) {

static/diagram.ts

@@ -227,6 +227,7 @@ class DiagramNode extends CanvasObject {
     children: Array<DiagramNode>;
 
     meta: Object = {};
+    results: Array<string>;
 
     constructor(
         id: number,
@@ -234,7 +235,8 @@ class DiagramNode extends CanvasObject {
         y: number, 
         label: string,
         meta: Object = {},
-        ctx: CanvasRenderingContext2D
+        ctx: CanvasRenderingContext2D,
+        results: Array<string> = new Array(),
     ){
         super(x, y, 0, 0)
         this.id = id;
@@ -249,6 +251,7 @@ class DiagramNode extends CanvasObject {
 
         this.input = new NodeIO(this, true);
         this.output = new NodeIO(this, false);
+        this.results = results;
     }
 
     update(ms: MouseState) {
@@ -299,6 +302,14 @@ class DiagramNode extends CanvasObject {
         let typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight;
         ctx.fillText(this.type, typeX, typeY);
 
+        let resultCount = `${this.results.length}`
+        let resultCountSize = ctx.measureText(resultCount);
+        let resultCountWidth = resultCountSize.width;
+        let resultCountHeight = resultCountSize.actualBoundingBoxAscent + resultCountSize.actualBoundingBoxDescent;
+        let resultCountX = ms.offset.x + this.x + this.width - resultCountWidth - 3 * 3;
+        let resultCountY = ms.offset.y + this.y + resultCountHeight + 3 * 3;
+        ctx.fillText(resultCount, resultCountX, resultCountY)
+
         this.deleteButton.x = ms.offset.x + this.x;
         this.deleteButton.y = ms.offset.y + this.y + this.height - this.deleteButton.height;
         this.deleteButton.draw(ctx, ms);
@@ -559,8 +570,8 @@ class Diagrams {
 
     }
 
-    addNode(id: number, x: number, y: number, label: string, meta: Object = {}){
+    addNode(id: number, x: number, y: number, label: string, meta: Object = {}, results: Array<string> = new Array()){
-        let node = new DiagramNode(id, x, y, label, meta, this.ctx);
+        let node = new DiagramNode(id, x, y, label, meta, this.ctx, results);
         this.nodes.set(id, node);
     }
 

templates/watch/view.html

@@ -153,7 +153,12 @@ function canvasInit() {
                 var1: "{{ .Var1 }}",
                 var2: "{{ .Var2 }}",
                 var3: "{{ .Var3 }}",
-            }
+            },
+            [
+                {{ range .Results }}
+                    ["{{ . }}"],
+                {{ end }}
+            ]
         );
     {{ end }}
     {{ range .Connections }}