@gregoriusrippenstein/node-red-contrib-introspection 0.7.6 → 0.7.8

package/README.md

@@ -12,14 +12,17 @@ Orphans node many or many not have their reasons, sometimes nodes aren't meant t
 
 Sometimes I found myself having extremely complex flows, flows that went over multiple tabs via the link-in/out nodes. I was lost as to how specific nodes were ever reached. The birth of the Sink & Seeker nodes was inevitable.
 
+## Screencast
+
+For an introduction to these nodes, check out the [introduction screencasts](https://blog.openmindmap.org/blog/introspection).
+
+
 ## Sidebar Nodes
 
 There is no need nor requirement to deploy these nodes. Which implies that they also work in read-only mode of Node-RED. Since these nodes only provide information and make no changes, this should not be an issue.
 
 ### Screenshot
 
-**Update**: Screenshot node has become a sidebar node. This means it can no longer be triggered by external forces.
-
 ![img](https://cdn.openmindmap.org/content/1699269615464_Screen_Shot_2023-11-06_at_12.20.09.png)
 
 Drag the node into a flow, double-click on the node and the tray opens -depending on the size of the flow, this might take a moment. Once the tray is opened, the SVG is shown in the editor window (I took the code from the template node hence the syntax dropdown). Below the editor window is the download button. Pressing that will download the SVG as it is in the editor window, so making changes in that window will be reflected in the downloaded content.
@@ -41,8 +44,6 @@ Disappointments:
 
 ### Orphans
 
-**Update**: This is now a sidebar plugin which shows all unconnected nodes across alls flow tabs.
-
 ~~Drag the Orphan node into a flow, double click and all nodes that have no connections are shown in the tray. Click on a node to highlight its location in the flow.~~
 
 ![img](https://cdn.openmindmap.org/content/1699272147285_Screen_Shot_2023-11-06_at_13.02.22.png)
@@ -159,7 +160,7 @@ A node for inserting an SVG image into the workspace. The image is layered above
 
 ## Node-RED Versions
 
-These nodes have been tested and found to work on Node-RED 3.0.2 and 3.1.0.beta.4.
+These nodes have been tested and found to work with: Node-RED 3.0.2, 3.1.0 to 3.1.6 and 4.0.0.beta.2.
 
 ## Examples
 
@@ -178,13 +179,10 @@ There are [example flows](/examples) contained in the package, examples can also
 
 [*Do whatever but don't do evil* license](/LICENSE)
 
-## Contribution & Ideas
-
-Please here at GitHub via issues.
-
 ## Artifacts
 
 - [NPMjs Package](https://www.npmjs.com/package/@gregoriusrippenstein/node-red-contrib-introspection)
 - [GitHub Repository](https://github.com/gorenje/node-red-contrib-introspection)
 - [Flow that maintains this package](https://flowhub.org/f/d73d76db3df96ba2)
 - [Node-RED node package](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-introspection)
+- [Contact Author](https://blog.openmindmap.org/author.vcf)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "dependencies": {
     "got": "^13",
     "uglify-js": "^3.17.4",

package/plugins/sidebar.html

@@ -12,7 +12,7 @@
 
    function highlightAllLinkCalls(){let e=[];RED.nodes.eachNode(t=>{t.z==RED.workspaces.active()&&"link call"==t.type&&e.push(t)}),e.forEach(t=>{$("#grplnkcallclk-"+t.id).remove();var e=document.createElementNS("http://www.w3.org/2000/svg","g"),l=(e.setAttribute("class","red-ui-linkcall-link-indicator"),e.setAttribute("transform","translate(12,0)"),e.setAttribute("id","grplnkcallclk-"+t.id),document.createElementNS("http://www.w3.org/2000/svg","circle")),i=(l.setAttribute("cx","5"),l.setAttribute("cy","5"),l.setAttribute("r","5"),l.setAttribute("id","lnkcallclk-"+t.id),l.setAttribute("style","cursor: pointer;"),t.links[0]);i?RED.nodes.node(i)?l.setAttribute("fill","green"):l.setAttribute("fill","red"):l.setAttribute("fill","orange"),e.append(l),$(e).insertBefore($("#"+t.id).find(".red-ui-flow-node-changed"));let r=t.id;$("#lnkcallclk-"+t.id).on("click",t=>{t&&t.preventDefault();t=RED.nodes.node(r);if(t){let l=t.links[0];1<t.links.length&&RED.notify("Multiple links, showing first","warning"),RED.nodes.node(l)?(RED.view.reveal(l),RED.view.select(l),setTimeout(()=>{$("#lnkcallclk-"+l).remove();var t=document.createElementNS("http://www.w3.org/2000/svg","g"),e=(t.setAttribute("class","red-ui-linkcall-link-indicator"),t.setAttribute("transform","translate(12,0)"),t.setAttribute("id","lnkcallclk-"+l),document.createElementNS("http://www.w3.org/2000/svg","circle"));e.setAttribute("cx","5"),e.setAttribute("cy","5"),e.setAttribute("r","5"),e.setAttribute("id","lnkcallclk-"+l),e.setAttribute("style","cursor: pointer;"),e.setAttribute("fill","green"),t.append(e),$(t).insertBefore($("#"+l).find(".red-ui-flow-node-changed")),$("#lnkcallclk-"+l).on("click",t=>{t&&t.preventDefault(),RED.view.reveal(r),RED.view.select(r),setTimeout(highlightAllLinkCalls,500)})},500)):RED.notify("Link in node not found","error")}else RED.notify("Node not found","error")})})}
 
-   function setupTreelistAllLinksForLinkIn(e){e=collectAllLinksNodes(e);if(0==e.length){RED.notify("No links found",{type:"error",timeout:2e3});try{$("#node-input-orphan-target-container-div").treeList("empty")}catch(e){}}else{try{$("#node-input-orphan-target-container-div").treeList("empty")}catch(e){$("#node-input-orphan-target-container-div").css({width:"100%",height:"calc(100%)"}).treeList({multi:!1}).on("treelistitemmouseover",function(e,t){}).on("treelistitemmouseout",function(e,t){}).on("treelistselect",function(e,t){t.node&&(RED.workspaces.show(t.node.z,!1,!1,!0),RED.view.reveal(t.node.id,!0),RED.view.redraw())}).on("treelistconfirm",function(e,t){var n;t.node&&(n=t.node.id,setTimeout(()=>{var e=RED.nodes.node(n);e&&(RED.view.reveal(e.id),RED.view.select(e.id),RED.editor.edit(e,"editor-tab-description")),n==RED.workspaces.active()&&RED.workspaces.edit()},50))}),$("#node-input-orphan-target-filter").show();var n=$("#node-input-orphan-target-filter").searchBox({style:"compact",delay:300,change:function(){var e,t=$(this).val().trim().toLowerCase();""===t?($("#node-input-orphan-target-container-div").treeList("filter",null),n.searchBox("count","")):(e=$("#node-input-orphan-target-container-div").treeList("filter",function(e){return-1<e.label.toLowerCase().indexOf(t)||-1<e.node.type.toLowerCase().indexOf(t)}),n.searchBox("count",e+" / "+$("#node-input-orphan-target-container-div").treeList("data").length))}})}$("#node-input-orphan-target-container-div").treeList("data",e.sort((e,t)=>e.node.z>t.node.z))}}function collectAllLinksNodes(t){let n=[];RED.nodes.eachNode(e=>{"link call"!=e.type&&"link out"!=e.type||-1<e.links.indexOf(t)&&n.push(e)});var i=[],r={};return n.forEach(function(e){var t=RED.nodes.getType(e.type);if(t){var n,o=t.label,o=("function"==typeof o?o.call(e):o)||"";if(0===(n=e.type).indexOf("subflow:"))return}t&&o||(o=e.type),r[e.id]={node:e,label:o,sublabel:n,selected:!1,checkbox:!1},i.push(r[e.id])}),i}
+   function setupTreelistAllLinksForLinkIn(e){e=collectAllLinksNodes(e);if(0==e.length){RED.notify("No links found",{type:"error",timeout:2e3});try{$("#node-input-orphan-target-container-div").treeList("empty")}catch(e){}}else{try{$("#node-input-orphan-target-container-div").treeList("empty")}catch(e){$("#node-input-orphan-target-container-div").css({width:"100%",height:"calc(100%)"}).treeList({multi:!1}).on("treelistitemmouseover",function(e,t){}).on("treelistitemmouseout",function(e,t){}).on("treelistselect",function(e,t){t.node&&(RED.workspaces.show(t.node.z,!1,!1,!0),RED.view.reveal(t.node.id,!0),RED.view.redraw())}).on("treelistconfirm",function(e,t){var n;t.node&&(n=t.node.id,setTimeout(()=>{var e=RED.nodes.node(n);e&&(RED.view.reveal(e.id),RED.view.select(e.id),RED.editor.edit(e,"editor-tab-description")),n==RED.workspaces.active()&&RED.workspaces.edit()},50))}),$("#node-input-orphan-target-filter").show();var n=$("#node-input-orphan-target-filter").searchBox({style:"compact",delay:300,change:function(){var e,t=$(this).val().trim().toLowerCase();""===t?($("#node-input-orphan-target-container-div").treeList("filter",null),n.searchBox("count","")):(e=$("#node-input-orphan-target-container-div").treeList("filter",function(e){return-1<e.label.toLowerCase().indexOf(t)||-1<e.node.type.toLowerCase().indexOf(t)}),n.searchBox("count",e+" / "+$("#node-input-orphan-target-container-div").treeList("data").length))}})}$("#node-input-orphan-target-container-div").treeList("data",e.sort((e,t)=>e.node.z>t.node.z))}}function collectAllLinksNodes(t){let n=[];RED.nodes.eachNode(e=>{"link call"!=e.type&&"link out"!=e.type||-1<e.links.indexOf(t)&&n.push(e)});var i=[],r={};return n.forEach(function(e){var t=RED.nodes.getType(e.type);if(t){var n,o=t.label,o=("function"==typeof o?o.call(e):o)||"";if(0===(n=e.type).indexOf("subflow:"))return}t&&o||(o=e.type),r[e.id]={node:e,label:o,sublabel:n,selected:!1,checkbox:!1},i.push(r[e.id])}),i}function collectNodeStats(){let t={},n=[],o={workspaces:0,junctions:0,subflows:0,configs:0,groups:0,wires:0,nodes:0},i=(RED.nodes.eachConfig(e=>{o.configs+=1}),RED.nodes.eachLink(e=>{o.wires+=1}),RED.nodes.eachJunction(e=>{o.junctions+=1}),RED.nodes.eachGroup(e=>{o.groups+=1}),RED.nodes.eachWorkspace(e=>{o.workspaces+=1}),RED.nodes.eachSubflow(e=>{o.subflows+=1}),RED.nodes.eachNode(e=>{o.nodes+=1,t[e.type]=(t[e.type]||0)+1}),Object.keys(t).forEach(e=>{n.push({label:e,sublabel:t[e],selected:!1,checkbox:!1})}),[]),r=0;return Object.keys(o).forEach(e=>{r+=o[e],i.push({label:e,sublabel:o[e],selected:!1,checkbox:!1})}),[{label:"__ TOTALS",sublabel:r,selected:!1,checkbox:!1,children:i}].concat(n.sort((e,t)=>e.label>t.label))}function setupTreeListForNodeStats(){var e=collectNodeStats();try{$("#node-input-orphan-target-container-div").treeList("empty")}catch(e){$("#node-input-orphan-target-container-div").css({width:"100%",height:"calc(100%)"}).treeList({multi:!1}).on("treelistitemmouseover",function(e,t){}).on("treelistitemmouseout",function(e,t){}).on("treelistselect",function(e,t){}).on("treelistconfirm",function(e,t){}),$("#node-input-orphan-target-filter").show();var n=$("#node-input-orphan-target-filter").searchBox({style:"compact",delay:300,change:function(){var e,t=$(this).val().trim().toLowerCase();""===t?($("#node-input-orphan-target-container-div").treeList("filter",null),n.searchBox("count","")):(e=$("#node-input-orphan-target-container-div").treeList("filter",function(e){return-1<e.label.toLowerCase().indexOf(t)}),n.searchBox("count",e+" / "+$("#node-input-orphan-target-container-div").treeList("data").length))}})}$("#node-input-orphan-target-container-div").treeList("data",e)}
 
    // Add your plugin as a new tabsheet in the right sidebar AFTER the flow editor is completely started
    var initialiseConfigNodeOnce = () => {
@@ -49,7 +49,7 @@
       
       // Add tab, orphans
       tabs.addTab({
-            id: 'func-introspection-tab-orphans',
+            id: 'func-introspection-tab-lint',
             iconClass: 'fa fa-eyedropper',
             label: 'Lint'
       });
@@ -243,10 +243,17 @@
       $('#node-input-linkcalls-find-btn').on('click', (e) => {
          if ( e ) { e.preventDefault() }
          highlightAllLinkCalls()
-
+         
+         /*
          try {
             $("#node-input-orphan-target-container-div").treeList('empty')
-         } catch (ex) { }         
+         } catch (ex) { }
+         */
+      })
+
+      $('#node-input-statistics-btn').on('click', (e) => {
+         if ( e ) { e.preventDefault() }
+         setupTreeListForNodeStats()
       })
    };
    RED.events.on('runtime-state', initialiseConfigNodeOnce);
@@ -278,6 +285,9 @@
 </div>
 
 <div id="func-introspection-tabs-content" style="min-height: calc(100% - 95px);">
+
+   <!-- Screenshot Tab in Sidebar -->
+
    <div id="func-introspection-tab-screenshot" style="display:none; min-height: calc(100%);">
       <div class="form-row">
          <div class="col-100">
@@ -320,29 +330,38 @@
       </div>
    </div>
 
-   <div id="func-introspection-tab-orphans" style="display:none; min-height: calc(100%);">
+   <!-- Lint Tab in Sidebar -->
+
+   <div id="func-introspection-tab-lint" style="display:none; min-height: calc(100%);">
       <div class="form-row" style="margin-left: 10px; margin-top: 30px">
          <button id="node-input-orphan-find-btn"
                      class="red-ui-button"><i class="fa fa-life-ring"></i> Unconnected</button>
          <button id="node-input-documentation-find-btn"
                      class="red-ui-button"><i class="fa fa-cc"></i> Undocumented</button>
-         <button id="node-input-linkcalls-find-btn"
-                     class="red-ui-button"><i class="fa fa-link"></i> Link Calls</button>
          <button id="node-input-linkin-nodes-find-btn"
                      class="red-ui-button"><i class="fa fa-link"></i> Link Ins</button>
-         <button id="node-input-orphan-clear-workspace-btn"
-                     class="red-ui-button">Clear dots</button>
+         <button id="node-input-statistics-btn"
+                     class="red-ui-button"><i class="fa fa-pie-chart"></i> Stats</button>
       </div>
 
       <div class="form-row"
-         style="margin-left: 10px; position: relative; min-height: 200px; height: 450px; margin-right: 15px; ">
+         style="margin-left: 10px; position: relative; min-height: 200px; height: 450px; margin-right: 15px;">
          <div style="margin-bottom: 5px; width: 35%; padding-left: 60%;">
             <input type="text" id="node-input-orphan-target-filter" style="display: none;">
          </div>
          <div id="node-input-orphan-target-container-div"></div>
       </div>
+
+      <div class="form-row" style="margin-left: 10px; margin-top: 40px">
+         <button id="node-input-linkcalls-find-btn"
+                           class="red-ui-button"><i class="fa fa-link"></i> Link Calls</button>
+         <button id="node-input-orphan-clear-workspace-btn"
+                           class="red-ui-button">Clear dots</button>
+      </div>
    </div>
 
+   <!-- Obfuscation Tab in Sidebar -->
+
    <div id="func-introspection-tab-obfuscation" style="display:none; min-height: calc(100%);">
 
       <div class="form-row">