From d4d85a27c273a1ba6bfc3a0bd374e80df2b03c34 Mon Sep 17 00:00:00 2001
From: BroodjeAap <david@broodjeaap.net>
Date: Sun, 2 Oct 2022 11:28:52 +0000
Subject: [PATCH] added visible display of number of outputs for a filter

---
 static/diagram.js         | 16 +++++++++++++---
 static/diagram.ts         | 19 +++++++++++++++----
 templates/watch/view.html |  7 ++++++-
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/static/diagram.js b/static/diagram.js
index 4d381be..afb37a6 100644
--- a/static/diagram.js
+++ b/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) {
diff --git a/static/diagram.ts b/static/diagram.ts
index a5082ab..70d8bc9 100644
--- a/static/diagram.ts
+++ 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) {
@@ -298,7 +301,15 @@ class DiagramNode extends CanvasObject {
         let typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2;
         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 = {}){
-        let node = new DiagramNode(id, x, y, label, meta, this.ctx);
+    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, results);
         this.nodes.set(id, node);
     }
 
diff --git a/templates/watch/view.html b/templates/watch/view.html
index 51fb679..042a30a 100644
--- a/templates/watch/view.html
+++ b/templates/watch/view.html
@@ -153,7 +153,12 @@ function canvasInit() {
                 var1: "{{ .Var1 }}",
                 var2: "{{ .Var2 }}",
                 var3: "{{ .Var3 }}",
-            }
+            },
+            [
+                {{ range .Results }}
+                    ["{{ . }}"],
+                {{ end }}
+            ]
         );
     {{ end }}
     {{ range .Connections }}