@vitormnm/node-red-simple-opcua 1.3.1 → 1.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @vitormnm/node-red-simple-opcua
 OPC UA client and server with a simple graphical interface for Node-RED.
-fully parameterized via JSON.
+Fully parameterized in JSON.
 
 It supports the following OPC UA items on only 3 nodes.
 
@@ -9,6 +9,8 @@ It supports the following OPC UA items on only 3 nodes.
  - events read and write tags in server(See which tags are being written to or read from the client directly on the server in a simple workflow)
  - methods(write methods in node-red flow)
  - variables
+ - variables arrays
+ - description and displayname nodes
  - objects
  - simple objectsType
  - custom namespace
@@ -21,8 +23,9 @@ It supports the following OPC UA items on only 3 nodes.
 **Client editor**
 ![node-red-si](/resources/editorClient.PNG) 
 
-example json server config
 
+
+example json server config
 ```
 {
     "objects": [],
@@ -124,5 +127,6 @@ example json server config
     ]
 }
 ```
-
+Disclaimer
+This node was only used in simulation and testing environments.
 

package/client/lib/opcua-client-browser.js

@@ -24,17 +24,56 @@ async function browseNode(session, root) {
         resultMask: 63
     });
 
-    const references = browseResult && Array.isArray(browseResult.references)
-        ? browseResult.references
-        : [];
+    const references = browseResult?.references ?? [];
+    if (!references.length) return result;
+
+    // Monta lista de todos os atributos de todos os nós de uma vez
+    const nodeIds = references.map(ref => normalizeNodeId(ref.nodeId));
+    const attributesToRead = nodeIds.flatMap(nodeId => [
+        { nodeId, attributeId: AttributeIds.Description },
+        { nodeId, attributeId: AttributeIds.DataType },
+        { nodeId, attributeId: AttributeIds.Value },
+    ]);
+
+    // UMA única chamada para todos os nós e atributos
+    const dataValues = await session.read(attributesToRead);
+
+    // Distribui os resultados por nó (3 atributos por nó)
+    result.browse = await Promise.all(references.map(async (reference, i) => {
+        const childNodeId = nodeIds[i];
+        const nodeClass = resolveNodeClassName(reference.nodeClass);
+        const browseName = extractBrowseName(reference.browseName, childNodeId);
+        const displayName = extractDisplayName(reference.displayName, browseName);
+
+        const descValue = dataValues[i * 3]?.value?.value;
+        const description = typeof descValue === "string"
+            ? descValue
+            : (descValue?.text ?? "");
+
+        const item = { nodeID: childNodeId, nodeClass, browseName, displayName, description };
+
+        if (nodeClass === "Variable") {
+            const dataTypeValue = dataValues[i * 3 + 1]?.value?.value;
+            const rawValue = dataValues[i * 3 + 2]?.value?.value;
+
+            item.dataType = dataTypeValue?.namespace === 0 && typeof dataTypeValue?.value === "number"
+                ? (DataType[dataTypeValue.value] || dataTypeValue.toString())
+                : (dataTypeValue?.toString() ?? "");
+
+            item.value = rawValue ?? "";
+        }
 
-    for (const reference of references) {
-        result.browse.push(await mapReference(session, reference));
-    }
+        if (nodeClass === "Method") {
+            const definition = await readMethodArguments(session, childNodeId);
+            item.inputArguments = definition.inputArguments;
+            item.outputArguments = definition.outputArguments;
+        }
+
+        return item;
+    }));
 
     return result;
 }
-
 function normalizeBrowseRoots(payload) {
     if (payload === undefined || payload === null) {
         return [{ name: "RootFolder", nodeID: ROOT_NODE_ID }];

package/client/lib/opcua-client-write-service.js

@@ -1,53 +1,147 @@
 "use strict";
 
-const { DataType, coerceNodeId } = require("node-opcua");
+const { AttributeIds, DataType, coerceNodeId } = require("node-opcua");
 const {
     buildVariantFromItem,
-    dataValueToItemResult,
     normalizeTypeName,
     resolveNodeId,
     statusCodeToString
 } = require("../opcua-client-utils");
 
+// Máximo de tags por chamada session.write (ajuste conforme limite do servidor)
+const WRITE_BATCH_SIZE = 100;
+
+// Batches em paralelo simultâneos
+const CONCURRENCY = 5;
+
+// Cede o event loop a cada N itens para não travar o Node-RED
+const YIELD_EVERY = 50;
+
 class OpcUaClientWriteService {
     async execute(node, msg, session, itemsResolver) {
         const items = itemsResolver.ensureWriteItems(node, msg);
-        const results = [];
-
-        for (const item of items) {
-            const nodeId = resolveNodeId(item);
-
-            try {
-                const explicitType = normalizeTypeName(item.type);
-                const builtInType = await session.getBuiltInDataType(coerceNodeId(nodeId));
-                const typeName = explicitType || DataType[builtInType];
-                const variant = buildVariantFromItem(item, typeName);
-                const statusCode = await session.writeSingleNode(nodeId, variant);
-                const dataValue = await session.readVariableValue(nodeId);
-                const result = dataValueToItemResult(item, dataValue);
-
-                if (statusCode && statusCode.name && statusCode.name !== "Good") {
-                    result.status = statusCodeToString(statusCode);
-                }
-
-                results.push(result);
-            } catch (itemError) {
-                results.push({
-                    name: item.name || nodeId,
-                    nodeID: nodeId,
-                    value: item.value,
-                    type: normalizeTypeName(item.type) || null,
-                    status: itemError.message,
-                    sourceTimestamp: null,
-                    serverTimestamp: null
-                });
+
+        // 1. Resolve variantes (tipo + valor) — consulta servidor só para quem não tem tipo explícito
+        const variants = await resolveVariants(session, items);
+
+        // 2. Escreve todos os nós em batches paralelos
+        const statusCodes = await writeBatches(session, items, variants);
+
+        // 3. Monta resultados — statusCode Good já confirma a escrita, sem round-trip extra
+        return buildResults(items, variants, statusCodes);
+    }
+}
+
+// ─── Resolução de tipos ──────────────────────────────────────────────────────
+
+async function resolveVariants(session, items) {
+    // Separa quais itens precisam consultar o tipo no servidor
+    const needsLookup = items
+        .map((item, index) => ({ item, index }))
+        .filter(({ item }) => !normalizeTypeName(item.type));
+
+    // Busca tipos desconhecidos em paralelo
+    const resolvedTypes = new Map();
+
+    await mapConcurrent(needsLookup, CONCURRENCY * 2, async ({ item, index }) => {
+        try {
+            const builtInType = await session.getBuiltInDataType(coerceNodeId(resolveNodeId(item)));
+            resolvedTypes.set(index, DataType[builtInType]);
+        } catch {
+            resolvedTypes.set(index, "String");
+        }
+    });
+
+    return items.map((item, index) => {
+        const typeName = normalizeTypeName(item.type) || resolvedTypes.get(index) || "String";
+        return buildVariantFromItem(item, typeName);
+    });
+}
+
+// ─── Escrita em batches paralelos ────────────────────────────────────────────
+
+async function writeBatches(session, items, variants) {
+    const allStatusCodes = new Array(items.length);
+
+    // Divide em batches de WRITE_BATCH_SIZE
+    const batches = [];
+    for (let i = 0; i < items.length; i += WRITE_BATCH_SIZE) {
+        batches.push({ start: i, end: Math.min(i + WRITE_BATCH_SIZE, items.length) });
+    }
+
+    let processed = 0;
+
+    await mapConcurrent(batches, CONCURRENCY, async ({ start, end }) => {
+        const nodesToWrite = items.slice(start, end).map((item, i) => ({
+            nodeId: coerceNodeId(resolveNodeId(item)),
+            attributeId: AttributeIds.Value,
+            value: { value: variants[start + i] }
+        }));
+
+        try {
+            const statusCodes = await session.write(nodesToWrite);
+            statusCodes.forEach((sc, i) => {
+                allStatusCodes[start + i] = sc;
+            });
+        } catch (batchError) {
+            // Se o batch falhar por completo, marca todos com erro
+            for (let i = start; i < end; i++) {
+                allStatusCodes[i] = { name: batchError.message, value: -1 };
             }
         }
 
-        return results;
+        // Cede o event loop a cada YIELD_EVERY itens para não travar o Node-RED
+        processed += end - start;
+        if (processed % YIELD_EVERY === 0) {
+            await yieldEventLoop();
+        }
+    });
+
+    return allStatusCodes;
+}
+
+// ─── Montagem dos resultados ─────────────────────────────────────────────────
+
+function buildResults(items, variants, statusCodes) {
+    return items.map((item, index) => {
+        const nodeId = resolveNodeId(item);
+        const sc = statusCodes[index];
+        const scName = sc && sc.name ? sc.name : "Good";
+        const typeName = DataType[variants[index].dataType] || null;
+
+        return {
+            name: item.name || nodeId,
+            nodeID: nodeId,
+            value: variants[index].value,
+            type: typeName,
+            status: scName,
+            sourceTimestamp: null,
+            serverTimestamp: null
+        };
+    });
+}
+
+// ─── Utilitários ─────────────────────────────────────────────────────────────
+
+async function mapConcurrent(items, concurrency, fn) {
+    let index = 0;
+
+    async function worker() {
+        while (index < items.length) {
+            const i = index++;
+            await fn(items[i], i);
+        }
     }
+
+    await Promise.all(
+        Array.from({ length: Math.min(concurrency, items.length) }, worker)
+    );
+}
+
+function yieldEventLoop() {
+    return new Promise(resolve => setImmediate(resolve));
 }
 
 module.exports = {
     OpcUaClientWriteService
-};
+};

package/client/opcua-client.html

@@ -245,12 +245,30 @@
 <script type="text/javascript">
     (function () {
         var selectedItemsState = [];
+        var selectedNodeIdSet = {};          // fast O(1) lookup: nodeId → index
         var browseState = null;
         var expansionState = {};
         var browseSearchValue = "";
         var browseSearchTerm = "";
         var contextMenuPath = "";
         var browseSelectedPath = "";
+        var renderPending = false;           // debounce flag for renderBrowseTree
+
+        function debounce(fn, delay) {
+            var timer;
+            return function () {
+                var ctx = this, args = arguments;
+                clearTimeout(timer);
+                timer = setTimeout(function () { fn.apply(ctx, args); }, delay);
+            };
+        }
+
+        function rebuildNodeIdIndex() {
+            selectedNodeIdSet = {};
+            selectedItemsState.forEach(function (item, i) {
+                if (item.nodeID) selectedNodeIdSet[item.nodeID] = i;
+            });
+        }
 
         function openBrowseModal() { $("#node-input-browse-modal").show(); $("body").addClass("opcua-tree-modal-open"); }
         function closeBrowseModal() {
@@ -456,6 +474,7 @@
         }
 
         function syncSelectedItems() {
+            rebuildNodeIdIndex();
             updateSelectedItemsField();
             renderSelectedTags();
             renderBrowseTree();
@@ -470,9 +489,8 @@
         }
 
         function selectedIndexByNodeId(nodeId) {
-            return selectedItemsState.findIndex(function (item) {
-                return item.nodeID === nodeId;
-            });
+            var idx = selectedNodeIdSet[nodeId];
+            return (idx !== undefined) ? idx : -1;
         }
 
         function canExpand(item) {
@@ -501,24 +519,47 @@
         }
 
         function renderBrowseTree() {
+            if (renderPending) return;
+            renderPending = true;
+            setTimeout(function () {
+                renderPending = false;
+                _doRenderBrowseTree();
+            }, 0);
+        }
+
+        function _doRenderBrowseTree() {
             var container = $("#node-input-browse-tree");
-            container.empty();
+            var frag = document.createDocumentFragment();
 
             if (!browseState) {
-                container.append('<div class="opcua-tree-empty">Click Browse to load the server tree.</div>');
+                var empty = document.createElement("div");
+                empty.className = "opcua-tree-empty";
+                empty.textContent = "Click Browse to load the server tree.";
+                frag.appendChild(empty);
+                container[0].innerHTML = "";
+                container[0].appendChild(frag);
                 return;
             }
 
             if (browseSearchTerm) {
                 if (!branchHasSearchMatch(browseState, browseSearchTerm)) {
-                    container.append('<div class="opcua-tree-empty">No items found in the already explored items.</div>');
+                    var noMatch = document.createElement("div");
+                    noMatch.className = "opcua-tree-empty";
+                    noMatch.textContent = "No items found in the already explored items.";
+                    frag.appendChild(noMatch);
+                    container[0].innerHTML = "";
+                    container[0].appendChild(frag);
                     return;
                 }
-                renderBrowseRootFiltered(browseState, "root", 0, container, browseSearchTerm);
+                renderBrowseRootFiltered(browseState, "root", 0, frag, browseSearchTerm);
+                container[0].innerHTML = "";
+                container[0].appendChild(frag);
                 return;
             }
 
-            renderBrowseRoot(browseState, "root", 0, container);
+            renderBrowseRoot(browseState, "root", 0, frag);
+            container[0].innerHTML = "";
+            container[0].appendChild(frag);
         }
 
         function isFolderNode(item) {
@@ -549,92 +590,111 @@
             return "fa-tag";
         }
 
-        function renderBrowseRoot(root, path, depth, container) {
+        function makeEl(tag, className, html) {
+            var el = document.createElement(tag);
+            if (className) el.className = className;
+            if (html !== undefined) el.innerHTML = html;
+            return el;
+        }
+
+        function makeTreeRow(path, extraClass) {
+            var row = document.createElement("div");
+            row.className = "opcua-tree-row" + (extraClass ? " " + extraClass : "");
+            row.setAttribute("data-path", path);
+            return row;
+        }
+
+        function renderBrowseRoot(root, path, depth, frag) {
             var expanded = isExpanded(path, true);
-            var row = $('<div class="opcua-tree-row"></div>').attr("data-path", path);
-            row.append('<span class="opcua-tree-indent"></span>');
-            row.append('<span class="opcua-tree-twisty opcua-client-toggle-tree" data-path="' + path + '">' + (expanded ? '<i class="fa fa-caret-down"></i>' : '<i class="fa fa-caret-right"></i>') + '</span>');
-            row.append('<span class="opcua-tree-icon"><i class="fa fa-sitemap"></i></span>');
-            row.append('<span class="opcua-tree-label">' + escapeHtml(root.name || root.nodeID || "RootFolder") + '</span>');
-            row.append('<span class="opcua-tree-type">' + escapeHtml(root.nodeID || "") + '</span>');
-            container.append(row);
+            var row = makeTreeRow(path);
+            row.innerHTML = '<span class="opcua-tree-indent"></span>'
+                + '<span class="opcua-tree-twisty opcua-client-toggle-tree" data-path="' + escapeHtml(path) + '">'
+                + (expanded ? '<i class="fa fa-caret-down"></i>' : '<i class="fa fa-caret-right"></i>') + '</span>'
+                + '<span class="opcua-tree-icon"><i class="fa fa-sitemap"></i></span>'
+                + '<span class="opcua-tree-label">' + escapeHtml(root.name || root.nodeID || "RootFolder") + '</span>'
+                + '<span class="opcua-tree-type">' + escapeHtml(root.nodeID || "") + '</span>';
+            frag.appendChild(row);
 
             if (!expanded) return;
 
             if (!Array.isArray(root.browse) || !root.browse.length) {
-                container.append('<div class="opcua-tree-empty">No items found..</div>');
+                frag.appendChild(makeEl("div", "opcua-tree-empty", "No items found.."));
             } else {
                 root.browse.forEach(function (item, index) {
-                    renderBrowseItem(item, path + ".browse." + index, depth + 1, container);
+                    renderBrowseItem(item, path + ".browse." + index, depth + 1, frag);
                 });
             }
         }
 
-        function renderBrowseItem(item, path, depth, container) {
+        function renderBrowseItem(item, path, depth, frag) {
             var expanded = isExpanded(path, false);
             var nodeId = nodeIdOf(item);
             var selectedIndex = selectedIndexByNodeId(nodeId);
             var hasChildren = canExpand(item);
-            var row = $('<div class="opcua-tree-row"></div>').attr("data-path", path);
-            if (selectedIndex >= 0) row.addClass("is-selected");
+            var row = makeTreeRow(path, selectedIndex >= 0 ? "is-selected" : "");
 
-            for (var i = 0; i < depth; i += 1) {
-                row.append('<span class="opcua-tree-indent"></span>');
-            }
-            row.append('<span class="opcua-tree-twisty' + (hasChildren ? ' opcua-client-toggle-tree' : '') + '" data-path="' + path + '">' + (hasChildren ? '<i class="fa ' + (expanded ? 'fa-caret-down' : 'fa-caret-right') + '"></i>' : '') + '</span>');
-            row.append('<span class="opcua-tree-icon"><i class="fa ' + browseIconFor(item) + '"></i></span>');
-            row.append('<span class="opcua-tree-label">' + escapeHtml(item.displayName || item.browseName || item.nodeID) + '</span>');
-            row.append('<span class="opcua-tree-type">' + escapeHtml(item.nodeClass || "") + (item.dataType ? " | " + escapeHtml(item.dataType) : "") + '</span>');
-            row.append('<span class="opcua-client-nodeid-label">' + escapeHtml(nodeId) + '</span>');
-
-            if (nodeId) {
-                var actionLabel = selectedIndex >= 0 ? "Remove" : "Add";
-                var actionIcon = selectedIndex >= 0 ? "fa-minus" : "fa-plus";
-                row.append('<div class="opcua-tree-actions"><a href="#" class="editor-button editor-button-small opcua-client-toggle-tag" data-nodeid="' + escapeHtml(nodeId) + '" data-path="' + path + '"><i class="fa ' + actionIcon + '"></i> ' + actionLabel + '</a></div>');
-            }
-            container.append(row);
+            var indents = "";
+            for (var i = 0; i < depth; i += 1) indents += '<span class="opcua-tree-indent"></span>';
+
+            var twisty = '<span class="opcua-tree-twisty' + (hasChildren ? ' opcua-client-toggle-tree' : '') + '" data-path="' + escapeHtml(path) + '">'
+                + (hasChildren ? '<i class="fa ' + (expanded ? 'fa-caret-down' : 'fa-caret-right') + '"></i>' : '') + '</span>';
+
+            var actions = nodeId
+                ? '<div class="opcua-tree-actions"><a href="#" class="editor-button editor-button-small opcua-client-toggle-tag" data-nodeid="' + escapeHtml(nodeId) + '" data-path="' + escapeHtml(path) + '"><i class="fa ' + (selectedIndex >= 0 ? 'fa-minus' : 'fa-plus') + '"></i> ' + (selectedIndex >= 0 ? 'Remove' : 'Add') + '</a></div>'
+                : '';
+
+            row.innerHTML = indents + twisty
+                + '<span class="opcua-tree-icon"><i class="fa ' + browseIconFor(item) + '"></i></span>'
+                + '<span class="opcua-tree-label">' + escapeHtml(item.displayName || item.browseName || item.nodeID) + '</span>'
+                + '<span class="opcua-tree-type">' + escapeHtml(item.nodeClass || "") + (item.dataType ? " | " + escapeHtml(item.dataType) : "") + '</span>'
+                + '<span class="opcua-client-nodeid-label">' + escapeHtml(nodeId) + '</span>'
+                + actions;
+            frag.appendChild(row);
 
             if (item.description) {
-                container.append('<div class="opcua-client-description" style="padding: 0 10px 8px ' + String((depth + 2) * 14) + 'px;">' + escapeHtml(item.description) + '</div>');
+                var desc = makeEl("div", "opcua-client-description");
+                desc.style.padding = "0 10px 8px " + String((depth + 2) * 14) + "px";
+                desc.textContent = item.description;
+                frag.appendChild(desc);
             }
 
             if (expanded && hasChildren) {
                 if (Array.isArray(item.browse)) {
                     if (!item.browse.length) {
-                        container.append('<div class="opcua-tree-empty">No children found..</div>');
+                        frag.appendChild(makeEl("div", "opcua-tree-empty", "No children found.."));
                     } else {
                         item.browse.forEach(function (child, index) {
-                            renderBrowseItem(child, path + ".browse." + index, depth + 1, container);
+                            renderBrowseItem(child, path + ".browse." + index, depth + 1, frag);
                         });
                     }
                 } else {
-                    container.append('<div class="opcua-tree-empty">Searching for items...</div>');
+                    frag.appendChild(makeEl("div", "opcua-tree-empty", "Searching for items..."));
                 }
             }
         }
 
-        function renderBrowseRootFiltered(root, path, depth, container, term) {
-            var row = $('<div class="opcua-tree-row"></div>').attr("data-path", path);
-            row.append('<span class="opcua-tree-indent"></span>');
-            row.append('<span class="opcua-tree-twisty"><i class="fa fa-caret-down"></i></span>');
-            row.append('<span class="opcua-tree-icon"><i class="fa fa-sitemap"></i></span>');
-            row.append('<span class="opcua-tree-label">' + escapeHtml(root.name || root.nodeID || "RootFolder") + '</span>');
-            row.append('<span class="opcua-tree-type">' + escapeHtml(root.nodeID || "") + '</span>');
-            container.append(row);
+        function renderBrowseRootFiltered(root, path, depth, frag, term) {
+            var row = makeTreeRow(path);
+            row.innerHTML = '<span class="opcua-tree-indent"></span>'
+                + '<span class="opcua-tree-twisty"><i class="fa fa-caret-down"></i></span>'
+                + '<span class="opcua-tree-icon"><i class="fa fa-sitemap"></i></span>'
+                + '<span class="opcua-tree-label">' + escapeHtml(root.name || root.nodeID || "RootFolder") + '</span>'
+                + '<span class="opcua-tree-type">' + escapeHtml(root.nodeID || "") + '</span>';
+            frag.appendChild(row);
 
             if (!Array.isArray(root.browse) || !root.browse.length) {
-                container.append('<div class="opcua-tree-empty">Nenhum item encontrado.</div>');
+                frag.appendChild(makeEl("div", "opcua-tree-empty", "Nenhum item encontrado."));
                 return;
             }
 
             root.browse.forEach(function (item, index) {
                 if (branchHasSearchMatch(item, term)) {
-                    renderBrowseItemFiltered(item, path + ".browse." + index, depth + 1, container, term, false);
+                    renderBrowseItemFiltered(item, path + ".browse." + index, depth + 1, frag, term, false);
                 }
             });
         }
 
-        function renderBrowseItemFiltered(item, path, depth, container, term, ancestorMatched) {
+        function renderBrowseItemFiltered(item, path, depth, frag, term, ancestorMatched) {
             if (!branchHasSearchMatch(item, term)) return;
 
             var nodeId = nodeIdOf(item);
@@ -648,40 +708,47 @@
             var expanded = hasChildren && (hasExplicitExpansion
                 ? !!expansionState[path]
                 : ((subtreeVisible && Array.isArray(item.browse)) || hasMatchingLoadedChild));
-            var row = $('<div class="opcua-tree-row"></div>').attr("data-path", path);
-            if (selectedIndex >= 0) row.addClass("is-selected");
-
-            for (var i = 0; i < depth; i += 1) row.append('<span class="opcua-tree-indent"></span>');
-            row.append('<span class="opcua-tree-twisty' + (hasChildren ? ' opcua-client-toggle-tree' : '') + '" data-path="' + path + '">' + (hasChildren ? '<i class="fa ' + (expanded ? 'fa-caret-down' : 'fa-caret-right') + '"></i>' : '') + '</span>');
-            row.append('<span class="opcua-tree-icon"><i class="fa ' + browseIconFor(item) + '"></i></span>');
-            row.append('<span class="opcua-tree-label">' + escapeHtml(item.displayName || item.browseName || item.nodeID) + '</span>');
-            row.append('<span class="opcua-tree-type">' + escapeHtml(item.nodeClass || "") + (item.dataType ? " | " + escapeHtml(item.dataType) : "") + '</span>');
-            row.append('<span class="opcua-client-nodeid-label">' + escapeHtml(nodeId) + '</span>');
-
-            if (nodeId) {
-                var actionLabel = selectedIndex >= 0 ? "Remove" : "Add";
-                var actionIcon = selectedIndex >= 0 ? "fa-minus" : "fa-plus";
-                row.append('<div class="opcua-tree-actions"><a href="#" class="editor-button editor-button-small opcua-client-toggle-tag" data-nodeid="' + escapeHtml(nodeId) + '" data-path="' + path + '"><i class="fa ' + actionIcon + '"></i> ' + actionLabel + '</a></div>');
-            }
-            container.append(row);
+
+            var row = makeTreeRow(path, selectedIndex >= 0 ? "is-selected" : "");
+
+            var indents = "";
+            for (var i = 0; i < depth; i += 1) indents += '<span class="opcua-tree-indent"></span>';
+
+            var twisty = '<span class="opcua-tree-twisty' + (hasChildren ? ' opcua-client-toggle-tree' : '') + '" data-path="' + escapeHtml(path) + '">'
+                + (hasChildren ? '<i class="fa ' + (expanded ? 'fa-caret-down' : 'fa-caret-right') + '"></i>' : '') + '</span>';
+
+            var actions = nodeId
+                ? '<div class="opcua-tree-actions"><a href="#" class="editor-button editor-button-small opcua-client-toggle-tag" data-nodeid="' + escapeHtml(nodeId) + '" data-path="' + escapeHtml(path) + '"><i class="fa ' + (selectedIndex >= 0 ? 'fa-minus' : 'fa-plus') + '"></i> ' + (selectedIndex >= 0 ? 'Remove' : 'Add') + '</a></div>'
+                : '';
+
+            row.innerHTML = indents + twisty
+                + '<span class="opcua-tree-icon"><i class="fa ' + browseIconFor(item) + '"></i></span>'
+                + '<span class="opcua-tree-label">' + escapeHtml(item.displayName || item.browseName || item.nodeID) + '</span>'
+                + '<span class="opcua-tree-type">' + escapeHtml(item.nodeClass || "") + (item.dataType ? " | " + escapeHtml(item.dataType) : "") + '</span>'
+                + '<span class="opcua-client-nodeid-label">' + escapeHtml(nodeId) + '</span>'
+                + actions;
+            frag.appendChild(row);
 
             if (item.description) {
-                container.append('<div class="opcua-client-description" style="padding: 0 10px 8px ' + String((depth + 2) * 14) + 'px;">' + escapeHtml(item.description) + '</div>');
+                var desc = makeEl("div", "opcua-client-description");
+                desc.style.padding = "0 10px 8px " + String((depth + 2) * 14) + "px";
+                desc.textContent = item.description;
+                frag.appendChild(desc);
             }
 
             if (expanded && hasChildren) {
                 if (Array.isArray(item.browse)) {
                     if (!item.browse.length) {
-                        container.append('<div class="opcua-tree-empty">Nenhum filho encontrado.</div>');
+                        frag.appendChild(makeEl("div", "opcua-tree-empty", "Nenhum filho encontrado."));
                     } else {
                         item.browse.forEach(function (child, index) {
                             if (subtreeVisible || branchHasSearchMatch(child, term)) {
-                                renderBrowseItemFiltered(child, path + ".browse." + index, depth + 1, container, term, subtreeVisible);
+                                renderBrowseItemFiltered(child, path + ".browse." + index, depth + 1, frag, term, subtreeVisible);
                             }
                         });
                     }
                 } else {
-                    container.append('<div class="opcua-tree-empty">Expandindo...</div>');
+                    frag.appendChild(makeEl("div", "opcua-tree-empty", "Expandindo..."));
                 }
             }
         }
@@ -938,6 +1005,7 @@
                 });
 
                 selectedItemsState = parseSelectedItems(this.selectedItems);
+                rebuildNodeIdIndex();
 
                 browseState = null;
                 expansionState = {};
@@ -967,12 +1035,12 @@
                     hideTreeContextMenu();
                     if (event.target === this) closeBrowseModal();
                 });
-                $("#node-input-browse-search").off("input").on("input", function () {
+                $("#node-input-browse-search").off("input").on("input", debounce(function () {
                     browseSearchValue = $(this).val();
                     browseSearchTerm = normalizeSearchTerm(browseSearchValue);
                     $("#node-input-browse-search-clear").toggle(!!browseSearchTerm);
                     renderBrowseTree();
-                });
+                }, 200));
                 $("#node-input-browse-search-clear").off("click").on("click", function (event) {
                     event.preventDefault();
                     browseSearchValue = "";
@@ -1222,4 +1290,4 @@
 ]</code></pre>
     <h3>Subscription</h3>
     <p>In subscription mode the node emits one message per value change.</p>
-</script>
+</script>