ato-water-lib 0.0.52 → 0.0.54

package/fesm2015/ato-water-lib.mjs

@@ -3366,13 +3366,15 @@ class AtoDefaultGojsEditor {
         // Remove Node and Node Group
         _.forEach((_b = this.myDiagram.nodeTemplateMap) === null || _b === void 0 ? void 0 : _b.Hb, (temp) => {
             var _a, _b;
-            if ((temp === null || temp === void 0 ? void 0 : temp.key) && !((_b = (_a = this.editor.data) === null || _a === void 0 ? void 0 : _a.nodeDataArray) === null || _b === void 0 ? void 0 : _b.some((node) => (node === null || node === void 0 ? void 0 : node.type) === (temp === null || temp === void 0 ? void 0 : temp.key)))) {
+            if ((temp === null || temp === void 0 ? void 0 : temp.key) &&
+                !((_b = (_a = this.editor.data) === null || _a === void 0 ? void 0 : _a.nodeDataArray) === null || _b === void 0 ? void 0 : _b.some((node) => (node === null || node === void 0 ? void 0 : node.type) === (temp === null || temp === void 0 ? void 0 : temp.key)))) {
                 this.myDiagram.nodeTemplateMap.remove(temp === null || temp === void 0 ? void 0 : temp.key);
             }
         });
         _.forEach((_c = this.myDiagram.groupTemplateMap) === null || _c === void 0 ? void 0 : _c.Hb, (temp) => {
             var _a, _b;
-            if ((temp === null || temp === void 0 ? void 0 : temp.key) && !((_b = (_a = this.editor.data) === null || _a === void 0 ? void 0 : _a.nodeDataArray) === null || _b === void 0 ? void 0 : _b.some((node) => (node === null || node === void 0 ? void 0 : node.type) === (temp === null || temp === void 0 ? void 0 : temp.key)))) {
+            if ((temp === null || temp === void 0 ? void 0 : temp.key) &&
+                !((_b = (_a = this.editor.data) === null || _a === void 0 ? void 0 : _a.nodeDataArray) === null || _b === void 0 ? void 0 : _b.some((node) => (node === null || node === void 0 ? void 0 : node.type) === (temp === null || temp === void 0 ? void 0 : temp.key)))) {
                 this.myDiagram.groupTemplateMap.remove(temp === null || temp === void 0 ? void 0 : temp.key);
             }
         });
@@ -3403,7 +3405,8 @@ class AtoDefaultGojsEditor {
             this.makeGroupZoneTemplate();
             return;
         }
-        if ((node === null || node === void 0 ? void 0 : node.type) === AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL && (node === null || node === void 0 ? void 0 : node.isGroup)) {
+        if ((node === null || node === void 0 ? void 0 : node.type) === AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL &&
+            (node === null || node === void 0 ? void 0 : node.isGroup)) {
             this.groupPlantCellTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].name);
             return;
         }
@@ -3428,11 +3431,13 @@ class AtoDefaultGojsEditor {
         }
         // Not Group
         // Component Water Normal
-        if (((_b = AtoGojsEditorModel.TYPE_TEMPLATE_WATER_NORMAL) === null || _b === void 0 ? void 0 : _b.includes(node === null || node === void 0 ? void 0 : node.type)) && !(node === null || node === void 0 ? void 0 : node.isGroup)) {
+        if (((_b = AtoGojsEditorModel.TYPE_TEMPLATE_WATER_NORMAL) === null || _b === void 0 ? void 0 : _b.includes(node === null || node === void 0 ? void 0 : node.type)) &&
+            !(node === null || node === void 0 ? void 0 : node.isGroup)) {
             this.makeEntityTemplate((_c = AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].icon) !== null && _c !== void 0 ? _c : '', (_d = AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].name) !== null && _d !== void 0 ? _d : '');
         }
         // Component Water Withdraw Or Discharge
-        if (((_e = AtoGojsEditorModel.TYPE_TEMPLATE_WATER_WITHDRAW_OR_DISCHARGE) === null || _e === void 0 ? void 0 : _e.includes(node === null || node === void 0 ? void 0 : node.type)) && !(node === null || node === void 0 ? void 0 : node.isGroup)) {
+        if (((_e = AtoGojsEditorModel.TYPE_TEMPLATE_WATER_WITHDRAW_OR_DISCHARGE) === null || _e === void 0 ? void 0 : _e.includes(node === null || node === void 0 ? void 0 : node.type)) &&
+            !(node === null || node === void 0 ? void 0 : node.isGroup)) {
             this.makeEntityWithdrawOrDischarge((_f = AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].icon) !== null && _f !== void 0 ? _f : '', (_g = AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].name) !== null && _g !== void 0 ? _g : '');
         }
         // Component Energy Normal
@@ -3485,7 +3490,8 @@ class AtoDefaultGojsEditor {
             this.makeSpecialTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].name);
         }
         // Plant Cell
-        if ((node === null || node === void 0 ? void 0 : node.type) === AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL && !(node === null || node === void 0 ? void 0 : node.isGroup)) {
+        if ((node === null || node === void 0 ? void 0 : node.type) === AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL &&
+            !(node === null || node === void 0 ? void 0 : node.isGroup)) {
             this.plantCellTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node === null || node === void 0 ? void 0 : node.type].name);
         }
     }
@@ -3514,7 +3520,8 @@ class AtoDefaultGojsEditor {
             this.myDiagram.dragSelectingTool = (_m = this.initialOptions) === null || _m === void 0 ? void 0 : _m.dragSelectingTool;
             this.myDiagram.toolManager.draggingTool.isGridSnapEnabled =
                 (_p = (_o = this.initialOptions) === null || _o === void 0 ? void 0 : _o['draggingTool.isGridSnapEnabled']) !== null && _p !== void 0 ? _p : false;
-            if (this.myDiagram.toolManager && this.myDiagram.toolManager.draggingTool) {
+            if (this.myDiagram.toolManager &&
+                this.myDiagram.toolManager.draggingTool) {
                 if ((_q = this.initialOptions) === null || _q === void 0 ? void 0 : _q['draggingTool.gridSnapCellSize']) {
                     this.myDiagram.toolManager.draggingTool.gridSnapCellSize =
                         (_r = this.initialOptions) === null || _r === void 0 ? void 0 : _r['draggingTool.gridSnapCellSize'];
@@ -3532,7 +3539,8 @@ class AtoDefaultGojsEditor {
                         (_v = this.initialOptions) === null || _v === void 0 ? void 0 : _v['linkingTool.linkValidation'];
                 }
             }
-            this.myDiagram.contentAlignment = (_x = (_w = this.initialOptions) === null || _w === void 0 ? void 0 : _w.contentAlignment) !== null && _x !== void 0 ? _x : go.Spot.Center;
+            this.myDiagram.contentAlignment =
+                (_x = (_w = this.initialOptions) === null || _w === void 0 ? void 0 : _w.contentAlignment) !== null && _x !== void 0 ? _x : go.Spot.Center;
             this.myDiagram.layout = (_y = this.initialOptions) === null || _y === void 0 ? void 0 : _y.layout;
             // this.myDiagram.minViewportBounds = new go.Rect(0, 0, 1200, 1200);
             if (!!((_z = this.editor) === null || _z === void 0 ? void 0 : _z.data)) {
@@ -3557,7 +3565,8 @@ class AtoDefaultGojsEditor {
             this.isAddedModelChangedListeners = true;
             this.myDiagram.addModelChangedListener(function (e) {
                 var _a;
-                if (e.change === go.ChangedEvent.Remove && e.propertyName === 'nodeDataArray') {
+                if (e.change === go.ChangedEvent.Remove &&
+                    e.propertyName === 'nodeDataArray') {
                     const data = e.oldValue;
                     self.onDeleteNode.emit(data);
                 }
@@ -3784,7 +3793,12 @@ class AtoDefaultGojsEditor {
     }
     initSolarDiagram() {
         const { SOLAR_POWER, POWER_CONDITIONING_UNIT, BATTERIES: BATTERY, INVERTERS: INVERTER, } = AtoGojsEditorModel.ENUM_TEMPLATES;
-        const ListItemsCreateEntityTemplate = [SOLAR_POWER, POWER_CONDITIONING_UNIT, BATTERY, INVERTER];
+        const ListItemsCreateEntityTemplate = [
+            SOLAR_POWER,
+            POWER_CONDITIONING_UNIT,
+            BATTERY,
+            INVERTER,
+        ];
         ListItemsCreateEntityTemplate.map((e) => {
             if (!!AtoGojsEditorModel.NODE_TEMPLATES[e]) {
                 this.makeEntityTemplateEnergy(AtoGojsEditorModel.NODE_TEMPLATES[e].icon, AtoGojsEditorModel.NODE_TEMPLATES[e].name);
@@ -3862,7 +3876,11 @@ class AtoDefaultGojsEditor {
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
                 margin: 4,
             }, new go.Binding('text', 'textComponent'))),
-        }, new go.Binding('text', 'textComponent'), new go.Binding('background', 'textComponent', (x) => (x ? 'white' : 'transparent')))));
+        }, new go.Binding('text', 'textComponent'), new go.Binding('background', 'textComponent', (x) => x ? 'white' : 'transparent')
+        //     new go.Binding('margin', 'isFormat', (x) =>
+        //     x ? new go.Margin(5, 0, 5, 5) : new go.Margin(5, 5, 5, 5),
+        // ),
+        )));
         // arrow
         elements.push(this.$(go.Shape, Object.assign({}, (_c = AtoGojsEditorModel.LINK_TEMPLATES[AtoGojsEditorModel.ENUM_LINK_TYPES.SIMPLE]) === null || _c === void 0 ? void 0 : _c.arrow), new go.Binding('visible', 'type', (x) => ![
             AtoGojsEditorModel.ENUM_LINK_TYPES.PIPE_ANIMATION,
@@ -3883,7 +3901,7 @@ class AtoDefaultGojsEditor {
             toShortLength: AtoGojsEditorModel.LINK_TEMPLATES[AtoGojsEditorModel.ENUM_LINK_TYPES.SIMPLE].toShortLength, // assume arrowhead at "to" end, need to avoid bad appearance when path is thick
         }, new go.Binding('layerName', '', (data) => {
             return (data === null || data === void 0 ? void 0 : data.textComponent) ? 'Background' : '';
-        }), new go.Binding('zOrder', 'type', (x) => (x === AtoGojsEditorModel.ENUM_LINK_TYPES.PIPE_ANIMATION ? 11 : 10)), new go.Binding('toShortLength', 'type', (x) => AtoGojsEditorModel.LINK_TEMPLATES[x].toShortLength || 0), new go.Binding('selectable', 'selectable'), new go.Binding('visible', 'visible'), 
+        }), new go.Binding('zOrder', 'type', (x) => x === AtoGojsEditorModel.ENUM_LINK_TYPES.PIPE_ANIMATION ? 11 : 10), new go.Binding('toShortLength', 'type', (x) => AtoGojsEditorModel.LINK_TEMPLATES[x].toShortLength || 0), new go.Binding('selectable', 'selectable'), new go.Binding('visible', 'visible'), 
         // make sure links come in from the proper direction and go out appropriately
         ...elements);
     }
@@ -3964,7 +3982,10 @@ class AtoDefaultGojsEditor {
         }, new go.Binding('stroke', 'color'), new go.Binding('text', 'name'), new go.Binding('visible', 'visible')))));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL, node);
     }
-    makeTextTemplate(size = { w: AtoGojsEditorModel.GRID_SIZE * 5, h: AtoGojsEditorModel.GRID_SIZE * 2 }) {
+    makeTextTemplate(size = {
+        w: AtoGojsEditorModel.GRID_SIZE * 5,
+        h: AtoGojsEditorModel.GRID_SIZE * 2,
+    }) {
         const self = this;
         const contextMenu = this.$(go.Adornment, 'Vertical', this.$('ContextMenuButton', this.$(go.TextBlock, 'Option 1'), {
             click: function (e, obj) {
@@ -3974,7 +3995,9 @@ class AtoDefaultGojsEditor {
             click: function (e, obj) {
                 alert('Option 2 clicked!');
             },
-        }));
+        })
+        // ... add more options as needed ...
+        );
         const node = this.$(go.Node, 'Spot', {
             // fromSpot: go.Spot.RightSide,
             // toSpot: go.Spot.LeftSide,
@@ -4027,7 +4050,8 @@ class AtoDefaultGojsEditor {
             doubleClick: (e, obj) => {
                 var _a, _b, _c, _d, _e;
                 const node = obj.part;
-                if (((_a = node === null || node === void 0 ? void 0 : node.ob) === null || _a === void 0 ? void 0 : _a.isTypeInflowOfPlantCell) && !((_b = this._initialOptions) === null || _b === void 0 ? void 0 : _b.isReadOnly)) {
+                if (((_a = node === null || node === void 0 ? void 0 : node.ob) === null || _a === void 0 ? void 0 : _a.isTypeInflowOfPlantCell) &&
+                    !((_b = this._initialOptions) === null || _b === void 0 ? void 0 : _b.isReadOnly)) {
                     // obj?.data?.onSelected(node?.ob?.nodePlantCellParent);
                     // this.isShowNodeInfo
                     //     ? self.onDoubleClickNode.emit({
@@ -4052,7 +4076,11 @@ class AtoDefaultGojsEditor {
             },
             selectionAdornmentTemplate: this.$(go.Adornment, 'Spot', this.$(go.Panel, 'Auto', 
             // { height: 62 },
-            this.$(go.Shape, { fill: null, stroke: 'dodgerblue', strokeWidth: 4 }), this.$(go.Placeholder, 
+            this.$(go.Shape, {
+                fill: null,
+                stroke: 'dodgerblue',
+                strokeWidth: 4,
+            }), this.$(go.Placeholder, 
             // { padding: new go.Margin(8, 3, 0, 3) },
             new go.Binding('padding', '', (x) => {
                 return (x === null || x === void 0 ? void 0 : x.isTypeInflowOfPlantCell)
@@ -4190,7 +4218,10 @@ class AtoDefaultGojsEditor {
         }
         return `${data === null || data === void 0 ? void 0 : data.shortenedNumber}${(data === null || data === void 0 ? void 0 : data.unitPrefixes) ? ' ' + (data === null || data === void 0 ? void 0 : data.unitPrefixes) : ''}`;
     }
-    makeDataBoxTemplate(size = { w: AtoGojsEditorModel.GRID_SIZE * 5, h: AtoGojsEditorModel.GRID_SIZE * 5 }) {
+    makeDataBoxTemplate(size = {
+        w: AtoGojsEditorModel.GRID_SIZE * 5,
+        h: AtoGojsEditorModel.GRID_SIZE * 5,
+    }) {
         const self = this;
         let node = this.$(go.Node, 'Spot', {
             locationSpot: go.Spot.Center,
@@ -4287,7 +4318,10 @@ class AtoDefaultGojsEditor {
     showPoint(loc) {
         const docLoc = this.myDiagram.transformDocToView(loc);
     }
-    makeEntityTemplate(icon, title, size = { w: AtoGojsEditorModel.GRID_SIZE * 5, h: AtoGojsEditorModel.GRID_SIZE * 5 }) {
+    makeEntityTemplate(icon, title, size = {
+        w: AtoGojsEditorModel.GRID_SIZE * 5,
+        h: AtoGojsEditorModel.GRID_SIZE * 5,
+    }) {
         const self = this;
         let node = this.$(go.Node, 'Spot', {
             locationSpot: go.Spot.Center,
@@ -4319,7 +4353,11 @@ class AtoDefaultGojsEditor {
                     shadowBlur: 6,
                     shadowOffset: new go.Point(0, 2),
                     shadowColor: '#00000029',
-                }, this.$(go.Panel, 'Auto', this.$(go.Shape, { fill: null, stroke: 'dodgerblue', strokeWidth: 4 }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', {
+                }, this.$(go.Panel, 'Auto', this.$(go.Shape, {
+                    fill: null,
+                    stroke: 'dodgerblue',
+                    strokeWidth: 4,
+                }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', {
                     alignment: go.Spot.TopRight,
                     alignmentFocus: go.Spot.Bottom,
                     background: 'white',
@@ -4328,8 +4366,8 @@ class AtoDefaultGojsEditor {
                 !this._initialOptions.isReadOnly
                     ? this.generateActionGroup([
                         AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.RO_WATER_TREATMENT].name,
-                        AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER]
-                            .name,
+                        AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER].name,
+                        AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.BOILER].name,
                     ].includes(title)
                         ? [
                             AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME,
@@ -4377,7 +4415,8 @@ class AtoDefaultGojsEditor {
             var _a;
             return !(((_a = AtoGojsEditorModel.TYPE_COMPONENT_WATER) === null || _a === void 0 ? void 0 : _a.includes(data === null || data === void 0 ? void 0 : data.systemType)) &&
                 (data === null || data === void 0 ? void 0 : data.topologyType) !== ATO_ECOMPONENT_PLANT_TYPE.WATER &&
-                (data === null || data === void 0 ? void 0 : data.topologyType) !== ATO_ECOMPONENT_PLANT_TYPE.WATER_PLANT_CELL);
+                (data === null || data === void 0 ? void 0 : data.topologyType) !==
+                    ATO_ECOMPONENT_PLANT_TYPE.WATER_PLANT_CELL);
         })))), this.$(go.Panel, 'Vertical', {
             alignment: go.Spot.Left,
             alignmentFocus: new go.Spot(0, 0.5, 8, 0),
@@ -4387,7 +4426,10 @@ class AtoDefaultGojsEditor {
         }), this.makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), this.makePort('L', go.Spot.Left, go.Spot.LeftSide, false, true), this.makePort('R', go.Spot.Right, go.Spot.RightSide, true, false), this.makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false));
         this.myDiagram.nodeTemplateMap.set(title, node);
     }
-    makeEntityTemplateEnergy(icon, title, size = { w: AtoGojsEditorModel.GRID_SIZE * 5, h: AtoGojsEditorModel.GRID_SIZE * 5 }) {
+    makeEntityTemplateEnergy(icon, title, size = {
+        w: AtoGojsEditorModel.GRID_SIZE * 5,
+        h: AtoGojsEditorModel.GRID_SIZE * 5,
+    }) {
         var _a;
         const self = this;
         let node = this.$(go.Node, 'Spot', {
@@ -4414,7 +4456,11 @@ class AtoDefaultGojsEditor {
                     shadowBlur: 6,
                     shadowOffset: new go.Point(0, 2),
                     shadowColor: '#00000029',
-                }, this.$(go.Panel, 'Auto', this.$(go.Shape, { fill: null, stroke: 'dodgerblue', strokeWidth: 4 }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', {
+                }, this.$(go.Panel, 'Auto', this.$(go.Shape, {
+                    fill: null,
+                    stroke: 'dodgerblue',
+                    strokeWidth: 4,
+                }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', {
                     alignment: go.Spot.TopRight,
                     alignmentFocus: go.Spot.Bottom,
                     background: 'white',
@@ -4471,7 +4517,10 @@ class AtoDefaultGojsEditor {
         this.myDiagram.nodeTemplateMap.set(title, node);
     }
     // Plant Cell
-    plantCellTemplate(icon, title, size = { w: 260, h: AtoGojsEditorModel.PLANT_CELL_HEIGHT }) {
+    plantCellTemplate(icon, title, size = {
+        w: 260,
+        h: AtoGojsEditorModel.PLANT_CELL_HEIGHT,
+    }) {
         const self = this;
         let node = this.$(go.Group, 'Spot', {
             locationSpot: go.Spot.Center,
@@ -4540,7 +4589,11 @@ class AtoDefaultGojsEditor {
                     shadowBlur: 6,
                     shadowOffset: new go.Point(0, 2),
                     shadowColor: '#00000029',
-                }, this.$(go.Panel, 'Auto', { width: 170 }, this.$(go.Shape, { fill: null, stroke: 'dodgerblue', strokeWidth: 4 }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Bottom }, 
+                }, this.$(go.Panel, 'Auto', { width: 170 }, this.$(go.Shape, {
+                    fill: null,
+                    stroke: 'dodgerblue',
+                    strokeWidth: 4,
+                }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Bottom }, 
                 // more
                 this.generateActionGroup([
                     AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME,
@@ -4548,7 +4601,19 @@ class AtoDefaultGojsEditor {
                     AtoDefaultGojsEditor.ENUM_ACTIONS.ONLY_DETAILS,
                     //   DefaultGojsEditor.ENUM_ACTIONS.OUTFLOW,
                     AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE,
-                ]))),
+                ])
+                //   new go.Binding('visible', 'isNotAction', (x) => !x),
+                )
+                //   this.$(
+                //       go.Panel,
+                //       'Horizontal',
+                //       { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Bottom },
+                //       this.generateActionGroup([DefaultGojsEditor.ENUM_ACTIONS.ONLY_DETAILS]),
+                //       new go.Binding('visible', '', (x) => {
+                //           return x?.isOnlyDetails && !x?.isNotAction ? true : false;
+                //       }),
+                //   ),
+                ),
         }, new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), this.$(go.Panel, 'Auto', { width: size.w, height: size.h }, 
         // this.$(go.Shape, 'RoundedRectangle', {
         //     fill: 'white',
@@ -4598,10 +4663,18 @@ class AtoDefaultGojsEditor {
         }), this.$(go.Panel, 'Vertical', {
             alignment: go.Spot.Right,
             alignmentFocus: new go.Spot(1, 0.5, -8, 0),
-        }));
+        })
+        // this.makePort('T', go.Spot.Top, go.Spot.TopSide, false, true),
+        // this.makePort('L', go.Spot.Left, go.Spot.LeftSide, false, true),
+        // this.makePort('R', go.Spot.Right, go.Spot.RightSide, true, false),
+        // this.makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false),
+        );
         this.myDiagram.nodeTemplateMap.set(title, node);
     }
-    makeEntityWithdrawOrDischarge(icon, title, size = { w: AtoGojsEditorModel.GRID_SIZE * 5, h: AtoGojsEditorModel.GRID_SIZE * 5 }) {
+    makeEntityWithdrawOrDischarge(icon, title, size = {
+        w: AtoGojsEditorModel.GRID_SIZE * 5,
+        h: AtoGojsEditorModel.GRID_SIZE * 5,
+    }) {
         const self = this;
         let node = this.$(go.Node, 'Spot', {
             locationSpot: go.Spot.Center,
@@ -4622,7 +4695,11 @@ class AtoDefaultGojsEditor {
             },
             selectionAdornmentTemplate: this._initialOptions.isReadOnly
                 ? null
-                : this.$(go.Adornment, 'Spot', this.$(go.Panel, 'Auto', this.$(go.Shape, { fill: null, stroke: 'dodgerblue', strokeWidth: 4 }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Bottom }, this.generateActionGroup([
+                : this.$(go.Adornment, 'Spot', this.$(go.Panel, 'Auto', this.$(go.Shape, {
+                    fill: null,
+                    stroke: 'dodgerblue',
+                    strokeWidth: 4,
+                }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Bottom }, this.generateActionGroup([
                     AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME,
                     AtoDefaultGojsEditor.ENUM_ACTIONS.DETAILS,
                     AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW,
@@ -4661,7 +4738,15 @@ class AtoDefaultGojsEditor {
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
                 margin: 4,
             }, new go.Binding('text', 'name').makeTwoWay())),
-        }, new go.Binding('text', 'name').makeTwoWay()))), this.$(go.Panel, 'Vertical', {
+        }, new go.Binding('text', 'name').makeTwoWay()
+        // {
+        //     // define a tooltip for each node that displays the color as text
+        //     toolTip: this.$(
+        //         'ToolTip',
+        //         this.$(go.TextBlock, { margin: 4 }, new go.Binding('text', 'name')),
+        //     ), // end of Adornment
+        // },
+        ))), this.$(go.Panel, 'Vertical', {
             alignment: go.Spot.Left,
             alignmentFocus: new go.Spot(0, 0.5, 8, 0),
         }), this.$(go.Panel, 'Vertical', {
@@ -4745,26 +4830,32 @@ class AtoDefaultGojsEditor {
                         return !!((_b = (_a = obj.part) === null || _a === void 0 ? void 0 : _a['ob']) === null || _b === void 0 ? void 0 : _b.id);
                     }
                     if (action === AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME &&
-                        ((_d = (_c = obj.part) === null || _c === void 0 ? void 0 : _c['ob']) === null || _d === void 0 ? void 0 : _d.type) !== AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE &&
+                        ((_d = (_c = obj.part) === null || _c === void 0 ? void 0 : _c['ob']) === null || _d === void 0 ? void 0 : _d.type) !==
+                            AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE &&
                         ((_e = AtoGojsEditorModel.TYPE_COMPONENT_WATER) === null || _e === void 0 ? void 0 : _e.includes((_g = (_f = obj.part) === null || _f === void 0 ? void 0 : _f['ob']) === null || _g === void 0 ? void 0 : _g.systemType)) &&
-                        ((_j = (_h = obj.part) === null || _h === void 0 ? void 0 : _h['ob']) === null || _j === void 0 ? void 0 : _j.topologyType) !== ATO_ECOMPONENT_PLANT_TYPE.WATER &&
-                        ((_l = (_k = obj.part) === null || _k === void 0 ? void 0 : _k['ob']) === null || _l === void 0 ? void 0 : _l.topologyType) !== ATO_ECOMPONENT_PLANT_TYPE.WATER_PLANT_CELL) {
+                        ((_j = (_h = obj.part) === null || _h === void 0 ? void 0 : _h['ob']) === null || _j === void 0 ? void 0 : _j.topologyType) !==
+                            ATO_ECOMPONENT_PLANT_TYPE.WATER &&
+                        ((_l = (_k = obj.part) === null || _k === void 0 ? void 0 : _k['ob']) === null || _l === void 0 ? void 0 : _l.topologyType) !==
+                            ATO_ECOMPONENT_PLANT_TYPE.WATER_PLANT_CELL) {
                         return false;
                     }
                     if (action === AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW &&
                         self.plantSatus === ATO_EPlantType.BASIC_PLANT &&
-                        ((_o = (_m = obj.part) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.type) === AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE) {
+                        ((_o = (_m = obj.part) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.type) ===
+                            AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE) {
                         return false;
                     }
                     return true;
                 }).map((e) => {
                     var _a, _b, _c, _d;
-                    if (ATO_ECOMPONENT_PLANT_TYPE.STEAM === ((_b = (_a = obj.part) === null || _a === void 0 ? void 0 : _a['ob']) === null || _b === void 0 ? void 0 : _b.topologyType) &&
+                    if (ATO_ECOMPONENT_PLANT_TYPE.STEAM ===
+                        ((_b = (_a = obj.part) === null || _a === void 0 ? void 0 : _a['ob']) === null || _b === void 0 ? void 0 : _b.topologyType) &&
                         e === AtoDefaultGojsEditor.ENUM_ACTIONS.INSIGHT) {
                         return AtoDefaultGojsEditor.ENUM_ACTIONS.DATA_MAPPING;
                     }
                     if (e === AtoDefaultGojsEditor.ENUM_ACTIONS.FLOW_DETAILS &&
-                        ((_d = (_c = obj === null || obj === void 0 ? void 0 : obj.part) === null || _c === void 0 ? void 0 : _c['ob']) === null || _d === void 0 ? void 0 : _d.systemType) === AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER) {
+                        ((_d = (_c = obj === null || obj === void 0 ? void 0 : obj.part) === null || _c === void 0 ? void 0 : _c['ob']) === null || _d === void 0 ? void 0 : _d.systemType) ===
+                            AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER) {
                         return AtoDefaultGojsEditor.ENUM_ACTIONS.FLOW_DETAILS_AND_WIZARD;
                     }
                     return e;
@@ -4806,7 +4897,8 @@ class AtoDefaultGojsEditor {
                         case AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME:
                             onClickFn = () => {
                                 var _a, _b, _c, _d, _e;
-                                if (((_b = (_a = obj.part) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.type) === AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE) {
+                                if (((_b = (_a = obj.part) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.type) ===
+                                    AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE) {
                                     self.onRename.emit(Object.assign({ left: ((_c = e === null || e === void 0 ? void 0 : e['Wr']) === null || _c === void 0 ? void 0 : _c.x) - 50, top: (_d = e === null || e === void 0 ? void 0 : e['Wr']) === null || _d === void 0 ? void 0 : _d.y }, (_e = obj.part) === null || _e === void 0 ? void 0 : _e.data));
                                     // LayoutService.setToolTipComponentDataStatic({
                                     //     component: RenameBoxComponent,
@@ -4898,7 +4990,8 @@ class AtoDefaultGojsEditor {
             if ((nodedata === null || nodedata === void 0 ? void 0 : nodedata.movable) !== undefined && (nodedata === null || nodedata === void 0 ? void 0 : nodedata.movable) !== null) {
                 newnode.movable = nodedata === null || nodedata === void 0 ? void 0 : nodedata.movable;
             }
-            newnode.location = new go.Point(fromnode.location.x + 160, fromnode.location.y + this.findLocYFromnode(fromnode) * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT);
+            newnode.location = new go.Point(fromnode.location.x + 160, fromnode.location.y +
+                this.findLocYFromnode(fromnode) * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT);
             e.diagram.commitTransaction('Create Node and Link');
         });
     }
@@ -4921,12 +5014,20 @@ class AtoDefaultGojsEditor {
         return this.isEmptyYLoc(locYAlreadyExist, i);
     }
     isEmptyYLoc(locYAlreadyExist, i) {
-        if (!_.some(locYAlreadyExist, (x) => x < i * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT + AtoDefaultGojsEditor.DISTANCE_2_OUTPUT / 2 &&
-            x > i * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT - AtoDefaultGojsEditor.DISTANCE_2_OUTPUT / 2)) {
+        if (!_.some(locYAlreadyExist, (x) => x <
+            i * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT +
+                AtoDefaultGojsEditor.DISTANCE_2_OUTPUT / 2 &&
+            x >
+                i * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT -
+                    AtoDefaultGojsEditor.DISTANCE_2_OUTPUT / 2)) {
             return i;
         }
-        if (!_.some(locYAlreadyExist, (x) => x < -i * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT + AtoDefaultGojsEditor.DISTANCE_2_OUTPUT / 2 &&
-            x > -i * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT - AtoDefaultGojsEditor.DISTANCE_2_OUTPUT / 2)) {
+        if (!_.some(locYAlreadyExist, (x) => x <
+            -i * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT +
+                AtoDefaultGojsEditor.DISTANCE_2_OUTPUT / 2 &&
+            x >
+                -i * AtoDefaultGojsEditor.DISTANCE_2_OUTPUT -
+                    AtoDefaultGojsEditor.DISTANCE_2_OUTPUT / 2)) {
             return -i;
         }
         return null;
@@ -4962,7 +5063,9 @@ class AtoDefaultGojsEditor {
             width: 40,
             height: 40,
             alignment: align,
-            stretch: horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical,
+            stretch: horizontal
+                ? go.GraphObject.Horizontal
+                : go.GraphObject.Vertical,
             portId: name,
             fromSpot: spot,
             fromLinkable: output,
@@ -5009,7 +5112,35 @@ class AtoDefaultGojsEditor {
             stroke: '#919CA5',
             width: 40,
             height: 40, // Match the panel's height
-        }));
+        })
+        // this.$(
+        //     go.TextBlock,
+        //     {
+        //         name: 'textBlock',
+        //         margin: 4,
+        //         text: '\uf0da', // Mã Unicode tương ứng với fa-caret-left
+        //         font: '900 12px "Font Awesome 6 Pro"',
+        //         stroke: 'white', // Đặt màu chữ thành màu trắng
+        //         cursor: 'pointer',
+        //         visible: false,
+        //     },
+        //     new go.Binding('text', 'name', (_) => {
+        //         switch (name) {
+        //             case 'T':
+        //             case 'B': {
+        //                 return '\uf0d7';
+        //             }
+        //             case 'L':
+        //             case 'R': {
+        //                 return '\uf0da';
+        //             }
+        //             default: {
+        //                 return '\uf0d7';
+        //             }
+        //         }
+        //     }),
+        // ),
+        );
     }
     makePort(name, align, spot, output, input) {
         // if (this._initialOptions.isReadOnly) {
@@ -5024,7 +5155,9 @@ class AtoDefaultGojsEditor {
             width: horizontal ? NaN : 8,
             height: !horizontal ? NaN : 8,
             alignment: align,
-            stretch: horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical,
+            stretch: horizontal
+                ? go.GraphObject.Horizontal
+                : go.GraphObject.Vertical,
             portId: name,
             fromSpot: spot,
             fromLinkable: output,
@@ -5073,10 +5206,12 @@ class AtoDefaultGojsEditor {
                 return false;
             }
             if (data === null || data === void 0 ? void 0 : data.flowOfPlantCell) {
-                if ((data === null || data === void 0 ? void 0 : data.flowOfPlantCell) === ATO_ENUM_FLOW_DIRECTION.INFLOW && name === 'L') {
+                if ((data === null || data === void 0 ? void 0 : data.flowOfPlantCell) === ATO_ENUM_FLOW_DIRECTION.INFLOW &&
+                    name === 'L') {
                     return true;
                 }
-                if ((data === null || data === void 0 ? void 0 : data.flowOfPlantCell) === ATO_ENUM_FLOW_DIRECTION.OUTFLOW && name === 'R') {
+                if ((data === null || data === void 0 ? void 0 : data.flowOfPlantCell) === ATO_ENUM_FLOW_DIRECTION.OUTFLOW &&
+                    name === 'R') {
                     return true;
                 }
                 return false;
@@ -5170,7 +5305,84 @@ class AtoDefaultGojsEditor {
             // stroke: AtoGojsEditorModel.ENUM_COLORS.RESOLUTION_BLUE,
             strokeWidth: 2,
             // strokeDashArray: [5, 5],
-        })));
+        })
+        // this.$(go.Placeholder),
+        // this.$(go.Placeholder, { padding: new go.Margin(0, 0, 0, 0) }),
+        )
+        // this.$(go.TextBlock, title, {
+        //     row: 0,
+        //     margin: new go.Margin(0, 0, 0, 0),
+        //     stroke: '#444444',
+        //     font: 'normal 10pt Arial',
+        //     textAlign: 'center',
+        //     alignment: go.Spot.Left,
+        // },
+        // new go.Binding('text', 'key').makeTwoWay(),),
+        // this.$(
+        //     go.Panel,
+        //     'Table',
+        //     {
+        //         alignment: go.Spot.TopLeft,
+        //         alignmentFocus: new go.Spot(0, 0, -10, -10),
+        //         // padding: new go.Margin(0, 0, 50, 0),
+        //     },
+        //     this.$(
+        //         go.Panel,
+        //         'Horizontal',
+        //         {
+        //             row: 0,
+        //             alignment: go.Spot.Left,
+        //         },
+        //         this.$(go.Picture, icon, {
+        //             row: 0,
+        //             // alignment: go.Spot.Center,
+        //             alignment: go.Spot.Left,
+        //             maxSize: new go.Size(40, 40),
+        //             imageStretch: go.GraphObject.Uniform,
+        //         }),
+        //         this.$(
+        //             go.Panel,
+        //             'Table',
+        //             {
+        //                 column: 1,
+        //                 defaultAlignment: go.Spot.Left,
+        //                 alignmentFocus: new go.Spot(0, 0, 0, 20),
+        //             },
+        //             this.$(go.TextBlock, title, {
+        //                 row: 0,
+        //                 margin: new go.Margin(3, 3, 5, 10),
+        //                 // maxSize: new go.Size(size.w - 20, NaN),
+        //                 stroke: '#444444',
+        //                 font: 'normal 10pt Arial',
+        //                 textAlign: 'center',
+        //                 alignment: go.Spot.Left,
+        //             }),
+        //             this.$(
+        //                 go.TextBlock,
+        //                 {
+        //                     row: 1,
+        //                     margin: new go.Margin(0, 3, 3, 10),
+        //                     editable: true,
+        //                     // maxSize: new go.Size(size.w - 20, 40),
+        //                     stroke: '#000D42',
+        //                     font: 'bold 10pt Arial',
+        //                     textAlign: 'center',
+        //                     wrap: go.TextBlock.None,
+        //                     overflow: go.TextBlock.OverflowEllipsis,
+        //                 },
+        //                 new go.Binding('text', 'name').makeTwoWay(),
+        //                 {
+        //                     // define a tooltip for each node that displays the color as text
+        //                     toolTip: this.$(
+        //                         'ToolTip',
+        //                         this.$(go.TextBlock, { margin: 4 }, new go.Binding('text', 'name')),
+        //                     ), // end of Adornment
+        //                 },
+        //             ),
+        //         ),
+        //     ),
+        // ),
+        );
         this.myDiagram.groupTemplateMap.set(title, node);
     }
     makeGroupTemplate(icon, title, size = { w: 80, h: 80 }) {
@@ -5305,7 +5517,9 @@ class AtoDefaultGojsEditor {
             // imageStretch: go.GraphObject.Uniform,
             // margin: new go.Margin(130, 0, 0, 0),
         }, new go.Binding('margin', 'margin'), new go.Binding('width', 'width'), new go.Binding('height', 'height'), new go.Binding('source', '', (data) => {
-            return (data === null || data === void 0 ? void 0 : data.source) ? data === null || data === void 0 ? void 0 : data.source : AtoGojsEditorModel.IMAGE_RO_WATER_TREATMENT_PATH;
+            return (data === null || data === void 0 ? void 0 : data.source)
+                ? data === null || data === void 0 ? void 0 : data.source
+                : AtoGojsEditorModel.IMAGE_RO_WATER_TREATMENT_PATH;
         }))));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE, node);
     }
@@ -5390,13 +5604,19 @@ class AtoDefaultGojsEditor {
                 cursor: 'pointer',
                 click: (e, obj) => {
                     var _a, _b, _c;
-                    if (((_b = (_a = obj.panel.part.data) === null || _a === void 0 ? void 0 : _a.dataTable[obj.row]) === null || _b === void 0 ? void 0 : _b.isEditable) === false) {
+                    if (((_b = (_a = obj.panel.part.data) === null || _a === void 0 ? void 0 : _a.dataTable[obj.row]) === null || _b === void 0 ? void 0 : _b.isEditable) ===
+                        false) {
                         return;
                     }
                     self.onClikParamOfTable.emit(Object.assign({}, (_c = obj.panel.part.data) === null || _c === void 0 ? void 0 : _c.dataTable[obj.row]));
                 },
                 background: 'transparent',
-            }, this.$(go.TextBlock, '', { column: 0, margin: 2, textAlign: 'left', alignment: go.Spot.Left }, new go.Binding('text', '', (data, panel) => {
+            }, this.$(go.TextBlock, '', {
+                column: 0,
+                margin: 2,
+                textAlign: 'left',
+                alignment: go.Spot.Left,
+            }, new go.Binding('text', '', (data, panel) => {
                 return data === null || data === void 0 ? void 0 : data.name;
             })), this.$(go.Panel, 'Table', {
                 column: 1,
@@ -5421,7 +5641,8 @@ class AtoDefaultGojsEditor {
                         ? `${(data === null || data === void 0 ? void 0 : data.tagName) || ''} `
                         : ''}${data === null || data === void 0 ? void 0 : data.value}`;
                 }), new go.Binding('visible', '', (data) => {
-                    if (!!this._initialOptions.isReadOnly && (data === null || data === void 0 ? void 0 : data.tagName)) {
+                    if (!!this._initialOptions.isReadOnly &&
+                        (data === null || data === void 0 ? void 0 : data.tagName)) {
                         return true;
                     }
                     return !!(data === null || data === void 0 ? void 0 : data.value);
@@ -5439,7 +5660,7 @@ class AtoDefaultGojsEditor {
                 alignment: go.Spot.Right,
                 column: 1,
                 margin: new go.Margin(0, 0, 0, 5),
-                source: ICONS_BASE64["uf044"],
+                source: ICONS_BASE64['uf044'],
                 cursor: 'pointer',
                 visible: false,
                 toolTip: this.$('ToolTip', this.$(go.TextBlock, {
@@ -5454,7 +5675,9 @@ class AtoDefaultGojsEditor {
             }), new go.Binding('opacity', '', (data, panel) => {
                 return (data === null || data === void 0 ? void 0 : data.isEditable) === false ? 0.6 : 1;
             })))),
-        })));
+        }
+        // new go.Binding('text', 'name')
+        )));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, node);
     }
     makeMassBalance() {
@@ -5719,7 +5942,8 @@ class AtoDefaultGojsEditor {
             //     : node?.layout;
             if ((data === null || data === void 0 ? void 0 : data.layoutValue) !== (data === null || data === void 0 ? void 0 : data.layoutValueClone)) {
                 data.layoutValueClone = data === null || data === void 0 ? void 0 : data.layoutValue;
-                return (data === null || data === void 0 ? void 0 : data.layoutValue) === AtoGojsEditorModel.ENUM_LAYOUT_EDITOR.AUTO
+                return (data === null || data === void 0 ? void 0 : data.layoutValue) ===
+                    AtoGojsEditorModel.ENUM_LAYOUT_EDITOR.AUTO
                     ? self.$(go.LayeredDigraphLayout, { direction: 0 })
                     : self.$(go.Layout);
             }
@@ -5819,10 +6043,16 @@ class AtoDefaultGojsEditor {
         })));
         this.myDiagram.groupTemplateMap.set(title, node);
     }
-    makeGroupZoneTemplate(size = { w: AtoGojsEditorModel.GRID_SIZE * 14, h: AtoGojsEditorModel.GRID_SIZE * 5 }) {
+    makeGroupZoneTemplate(size = {
+        w: AtoGojsEditorModel.GRID_SIZE * 14,
+        h: AtoGojsEditorModel.GRID_SIZE * 5,
+    }) {
         const self = this;
         let node = this.$(go.Group, 'Vertical', {
-            layout: this.$(go.GridLayout, { wrappingColumn: 1, spacing: new go.Size(0, 0) }),
+            layout: this.$(go.GridLayout, {
+                wrappingColumn: 1,
+                spacing: new go.Size(0, 0),
+            }),
         }, {
             locationSpot: go.Spot.Center,
             mouseOver: function (e, obj) {
@@ -5847,7 +6077,11 @@ class AtoDefaultGojsEditor {
                     shadowBlur: 6,
                     shadowOffset: new go.Point(0, 2),
                     shadowColor: '#00000029',
-                }, this.$(go.Panel, 'Auto', this.$(go.Shape, { fill: null, stroke: 'dodgerblue', strokeWidth: 4 }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', {
+                }, this.$(go.Panel, 'Auto', this.$(go.Shape, {
+                    fill: null,
+                    stroke: 'dodgerblue',
+                    strokeWidth: 4,
+                }), this.$(go.Placeholder, { padding: 3 })), this.$(go.Panel, 'Horizontal', {
                     alignment: go.Spot.TopRight,
                     alignmentFocus: go.Spot.Bottom,
                     background: 'white',
@@ -5873,7 +6107,82 @@ class AtoDefaultGojsEditor {
                     AtoDefaultGojsEditor.ENUM_ACTIONS.DETAILS,
                     AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW,
                     AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE,
-                ]))),
+                ])
+                // this.$(
+                //     // Edit Text
+                //     'Button',
+                //     {
+                //         click: self.editTextGroupZone,
+                //         'ButtonBorder.strokeWidth': 0,
+                //         'ButtonBorder.fill': 'white',
+                //     },
+                //     this.$(go.TextBlock, {
+                //         margin: 4,
+                //         text: '\ue1bf',
+                //         font: '20px "Font Awesome 6 Pro"',
+                //         cursor: 'pointer',
+                //         stroke: '#2c2c2c',
+                //     }),
+                // ),
+                // this.$(
+                //     // Open Detail
+                //     'Button',
+                //     {
+                //         click: (e, obj: any) => {
+                //             const node = obj.part;
+                //             self.onOpenDetail.emit({
+                //                 node,
+                //             });
+                //         },
+                //         'ButtonBorder.strokeWidth': 0,
+                //         'ButtonBorder.fill': 'white',
+                //     },
+                //
+                //     this.$(go.TextBlock, {
+                //         margin: 4,
+                //         text: '\ue49a',
+                //         font: '20px "Font Awesome 6 Pro"',
+                //         cursor: 'pointer',
+                //     }),
+                // ),
+                // !this._initialOptions.isReadOnly
+                //     ? this.$(
+                //           'Button',
+                //           {
+                //               actionMove: self.dragNewNode, // defined below, to support dragging from the button
+                //               _dragData: {
+                //                   type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE,
+                //                   name: 0,
+                //                   color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+                //               },
+                //               click: self.clickNewNode, // defined below, to support a click on the button
+                //               'ButtonBorder.strokeWidth': 0,
+                //               'ButtonBorder.fill': 'white',
+                //           },
+                //           this.$(go.TextBlock, {
+                //               margin: 4,
+                //               text: '\ue157',
+                //               font: '20px "Font Awesome 6 Pro"',
+                //               cursor: 'pointer',
+                //               stroke: '#2c2c2c',
+                //           }),
+                //       )
+                //     : {},
+                // this.$(
+                //     'Button',
+                //     {
+                //         click: self.deleteNode,
+                //         'ButtonBorder.strokeWidth': 0,
+                //         'ButtonBorder.fill': 'white',
+                //     },
+                //     this.$(go.TextBlock, {
+                //         margin: 4,
+                //         text: '\uf2ed',
+                //         font: '20px "Font Awesome 6 Pro"',
+                //         cursor: 'pointer',
+                //     }),
+                // ),
+                )),
         }, this.$(go.Panel, 'Auto', this.$(go.Shape, 'RoundedRectangle', {
             fill: 'transparent',
             stroke: AtoGojsEditorModel.ENUM_COLORS.RESOLUTION_BLUE,
@@ -5901,7 +6210,10 @@ class AtoDefaultGojsEditor {
         })), this.makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), this.makePort('L', go.Spot.Left, go.Spot.LeftSide, true, true), this.makePort('R', go.Spot.Right, go.Spot.RightSide, true, true), this.makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false)), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify));
         this.myDiagram.groupTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.ZONE, node);
     }
-    makeZoneItemTemplate(size = { w: AtoGojsEditorModel.GRID_SIZE * 12, h: AtoGojsEditorModel.GRID_SIZE * 2 }) {
+    makeZoneItemTemplate(size = {
+        w: AtoGojsEditorModel.GRID_SIZE * 12,
+        h: AtoGojsEditorModel.GRID_SIZE * 2,
+    }) {
         const self = this;
         const node = this.$(go.Node, 'Auto', 
         // {
@@ -5985,7 +6297,10 @@ class AtoDefaultGojsEditor {
                 value: x === null || x === void 0 ? void 0 : x.quantity,
                 unit: x === null || x === void 0 ? void 0 : x.unit,
             });
-            return (_a = formatted.shortenedNumber + ' ' + formatted.unitPrefixes + (x === null || x === void 0 ? void 0 : x.unit)) !== null && _a !== void 0 ? _a : '';
+            return ((_a = formatted.shortenedNumber +
+                ' ' +
+                formatted.unitPrefixes +
+                (x === null || x === void 0 ? void 0 : x.unit)) !== null && _a !== void 0 ? _a : '');
         }), new go.Binding('visible', 'data', (x) => typeof (x === null || x === void 0 ? void 0 : x.quantity) === 'number')), this.$(go.TextBlock, {
             margin: new go.Margin(0, 5, 10, 0),
             textAlign: 'center',
@@ -5996,7 +6311,10 @@ class AtoDefaultGojsEditor {
         }, new go.Binding('visible', 'data', (x) => typeof (x === null || x === void 0 ? void 0 : x.quantity) === 'number'))))));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.ZONE_ENERGY_ITEM, node);
     }
-    makeSpecialTemplate(icon, title, size = { w: AtoGojsEditorModel.GRID_SIZE * 5, h: AtoGojsEditorModel.GRID_SIZE * 5 }) {
+    makeSpecialTemplate(icon, title, size = {
+        w: AtoGojsEditorModel.GRID_SIZE * 5,
+        h: AtoGojsEditorModel.GRID_SIZE * 5,
+    }) {
         let node = null;
         switch (title) {
             case AtoGojsEditorModel.ENUM_TEMPLATES.SPECIAL_PROCESS:
@@ -6248,7 +6566,8 @@ class AtoDefaultGojsEditor {
         //     return;
         // }
         // const newDocument = newWindow?.document;
-        if (!((_c = (_b = (_a = this.myDiagram) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.nodeDataArray) === null || _c === void 0 ? void 0 : _c.length) && !((_f = (_e = (_d = this.myDiagram) === null || _d === void 0 ? void 0 : _d.model) === null || _e === void 0 ? void 0 : _e.linkDataArray) === null || _f === void 0 ? void 0 : _f.length)) {
+        if (!((_c = (_b = (_a = this.myDiagram) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.nodeDataArray) === null || _c === void 0 ? void 0 : _c.length) &&
+            !((_f = (_e = (_d = this.myDiagram) === null || _d === void 0 ? void 0 : _d.model) === null || _e === void 0 ? void 0 : _e.linkDataArray) === null || _f === void 0 ? void 0 : _f.length)) {
             return;
         }
         const svg = this.myDiagram.makeSvg({
@@ -6269,7 +6588,8 @@ class AtoDefaultGojsEditor {
                     svgElement.setAttribute('stroke', 'rgba(64, 181, 206, 0.6)');
                 }
                 // Empty Value
-                if ((graphObject === null || graphObject === void 0 ? void 0 : graphObject.name) === 'textBlockValue' || (graphObject === null || graphObject === void 0 ? void 0 : graphObject.name) === 'textBlockUnitPrefixes') {
+                if ((graphObject === null || graphObject === void 0 ? void 0 : graphObject.name) === 'textBlockValue' ||
+                    (graphObject === null || graphObject === void 0 ? void 0 : graphObject.name) === 'textBlockUnitPrefixes') {
                     svgElement.textContent = '';
                 }
                 if (svgElement.clipPath) {
@@ -6616,6 +6936,9 @@ var ENUM_ASSET_PARAMETERS;
     // Steam
     ENUM_ASSET_PARAMETERS["PHOSPHATE"] = "Phosphate";
     ENUM_ASSET_PARAMETERS["M_AKALINITY"] = "M-Akalinity";
+    // For Boiler - view Flow
+    ENUM_ASSET_PARAMETERS["FLOW"] = "Flow";
+    ENUM_ASSET_PARAMETERS["FLOW_RATE"] = "Flow Rate";
 })(ENUM_ASSET_PARAMETERS || (ENUM_ASSET_PARAMETERS = {}));
 var WATER_SYSTEMS_NAME;
 (function (WATER_SYSTEMS_NAME) {
@@ -6630,9 +6953,19 @@ var WATER_SYSTEMS_NAME;
     WATER_SYSTEMS_NAME["SYSTEM_KPIS"] = "System KPI's";
     // For Boiler
     WATER_SYSTEMS_NAME["CONDENSATE_RETURN"] = "Condensate Return";
+    WATER_SYSTEMS_NAME["CONDENSATE_RETURN__FLOW"] = "Condensate Return Flow";
+    WATER_SYSTEMS_NAME["CONDENSATE_RETURN__CHEMISTRY"] = "Condensate Return Chemistry";
     WATER_SYSTEMS_NAME["BOILER_FEED_WATER"] = "Boiler Feed Water";
+    WATER_SYSTEMS_NAME["BOILER_FEED_WATER__FLOW"] = "Boiler Feed Water Flow";
+    WATER_SYSTEMS_NAME["BOILER_FEED_WATER__CHEMISTRY"] = "Boiler Feed Water Chemistry";
     WATER_SYSTEMS_NAME["STEAM"] = "Steam";
+    WATER_SYSTEMS_NAME["STEAM__FLOW"] = "Steam Flow";
+    WATER_SYSTEMS_NAME["STEAM__CHEMISTRY"] = "Steam Chemistry";
     WATER_SYSTEMS_NAME["BOILER_WATER"] = "Boiler Water";
+    WATER_SYSTEMS_NAME["BOILER_WATER__FLOW"] = "Boiler Water Flow";
+    WATER_SYSTEMS_NAME["BOILER_WATER__CHEMISTRY"] = "Boiler Water Chemistry";
+    WATER_SYSTEMS_NAME["STEAM_LOSS"] = "Steam Loss";
+    WATER_SYSTEMS_NAME["BLOWDOWN"] = "Blowdown";
 })(WATER_SYSTEMS_NAME || (WATER_SYSTEMS_NAME = {}));
 const DATA_ASSET_PARAMETER_FIELDS = {
     [ENUM_ASSET_PARAMETERS.FEED_FLOW_RATE]: {
@@ -6804,7 +7137,7 @@ const DATA_ASSET_PARAMETER_FIELDS = {
         key: ENUM_ASSET_PARAMETERS.KPI_ATP,
         waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
     },
-    // Boiler 
+    // Boiler for view Chemistry
     [ENUM_ASSET_PARAMETERS.SPECIFIC_CONDUCTIVITY]: {
         name: ENUM_ASSET_PARAMETERS.SPECIFIC_CONDUCTIVITY,
         key: ENUM_ASSET_PARAMETERS.SPECIFIC_CONDUCTIVITY,
@@ -6829,6 +7162,15 @@ const DATA_ASSET_PARAMETER_FIELDS = {
         name: ENUM_ASSET_PARAMETERS.M_AKALINITY,
         key: ENUM_ASSET_PARAMETERS.M_AKALINITY,
     },
+    // Boiler for view Flow
+    [ENUM_ASSET_PARAMETERS.FLOW]: {
+        name: ENUM_ASSET_PARAMETERS.FLOW,
+        key: ENUM_ASSET_PARAMETERS.FLOW,
+    },
+    [ENUM_ASSET_PARAMETERS.FLOW_RATE]: {
+        name: ENUM_ASSET_PARAMETERS.FLOW_RATE,
+        key: ENUM_ASSET_PARAMETERS.FLOW_RATE,
+    },
 };
 const DATA_WATER_SYSTEMS = {
     [WATER_SYSTEMS_NAME.EVAPORATION_LOSS]: {
@@ -6910,6 +7252,18 @@ const DATA_WATER_SYSTEMS = {
         borderTable: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
         bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
     },
+    [WATER_SYSTEMS_NAME.STEAM_LOSS]: {
+        title: WATER_SYSTEMS_NAME.STEAM_LOSS,
+        color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+        borderTable: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+        bgColor: AtoGojsEditorModel.ENUM_COLORS.SNOW,
+    },
+    [WATER_SYSTEMS_NAME.BLOWDOWN]: {
+        title: WATER_SYSTEMS_NAME.BLOWDOWN,
+        color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+        borderTable: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+        bgColor: AtoGojsEditorModel.ENUM_COLORS.OLD_LACE,
+    },
 };
 const ASSET_CATEGORY_PARAMS = {
     [WATER_SYSTEMS_NAME.EVAPORATION_LOSS]: [
@@ -6953,23 +7307,24 @@ const ASSET_CATEGORY_PARAMS = {
 };
 // For Boiler
 const ASSET_CATEGORY_PARAMS__BOILER = {
-    [WATER_SYSTEMS_NAME.MAKEUP_WATER]: [
+    // For View Chemistry
+    [WATER_SYSTEMS_NAME.MAKEUP_WATER__CHEMISTRY]: [
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SPECIFIC_CONDUCTIVITY],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PH],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SILICA],
     ],
-    [WATER_SYSTEMS_NAME.CONDENSATE_RETURN]: [
+    [WATER_SYSTEMS_NAME.CONDENSATE_RETURN__CHEMISTRY]: [
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SPECIFIC_CONDUCTIVITY],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PH],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.TOTAL_IRON],
     ],
-    [WATER_SYSTEMS_NAME.STEAM]: [
+    [WATER_SYSTEMS_NAME.STEAM__CHEMISTRY]: [
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SPECIFIC_CONDUCTIVITY],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PH],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SILICA],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.TOTAL_IRON],
     ],
-    [WATER_SYSTEMS_NAME.BOILER_FEED_WATER]: [
+    [WATER_SYSTEMS_NAME.BOILER_FEED_WATER__CHEMISTRY]: [
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SPECIFIC_CONDUCTIVITY],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PH],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.TOTAL_IRON],
@@ -6981,6 +7336,31 @@ const ASSET_CATEGORY_PARAMS__BOILER = {
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SILICA],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.M_AKALINITY],
     ],
+    // For View Flow
+    [WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.CONDENSATE_RETURN__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.STEAM__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.BOILER_FEED_WATER__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.STEAM_LOSS]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.BLOWDOWN]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
+    ],
 };
 var COMPONENTS_GROUP_TYPE;
 (function (COMPONENTS_GROUP_TYPE) {
@@ -7802,7 +8182,6 @@ const ATO_COMPONENTS_GROUP_DATA = {
     [AtoGojsEditorModel.ENUM_TYPES.BOILER]: {
         nodeDataArray: [
             {
-                key: 86,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
                 group: 100,
                 loc: '0 0',
@@ -7814,7 +8193,6 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 color: '#a8438d',
             },
             {
-                key: 87,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
                 group: 100,
                 data: {
@@ -7830,33 +8208,32 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     loc: '700 300',
                 }
             },
-            Object.assign(Object.assign({ key: 88, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '13 280', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.MAKEUP_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER }))), visible: true, extendedData: {
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '13 280', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.MAKEUP_WATER__CHEMISTRY].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER }))), assetLayers: ATO_ASSET_LAYERS.CHEMISTRY, extendedData: {
                     visible: true,
                 }, extendedDataResponsive: {
                     visible: false,
                 } }),
-            Object.assign(Object.assign({ key: 89, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '190 20', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.CONDENSATE_RETURN]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.CONDENSATE_RETURN].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.CONDENSATE_RETURN }))), visible: true, extendedData: {
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '190 20', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.CONDENSATE_RETURN]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.CONDENSATE_RETURN__CHEMISTRY].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.CONDENSATE_RETURN }))), assetLayers: ATO_ASSET_LAYERS.CHEMISTRY, extendedData: {
                     visible: true,
                 }, extendedDataResponsive: {
                     visible: false,
                 } }),
-            Object.assign(Object.assign({ key: 90, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '840 70', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.STEAM]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.STEAM].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.STEAM }))), visible: true, extendedData: {
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '840 70', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.STEAM]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.STEAM__CHEMISTRY].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.STEAM }))), assetLayers: ATO_ASSET_LAYERS.CHEMISTRY, extendedData: {
                     visible: true,
                 }, extendedDataResponsive: {
                     visible: false,
                 } }),
-            Object.assign(Object.assign({ key: 91, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '400 510', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BOILER_FEED_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BOILER_FEED_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.BOILER_FEED_WATER }))), visible: true, extendedData: {
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '400 510', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BOILER_FEED_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BOILER_FEED_WATER__CHEMISTRY].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.BOILER_FEED_WATER }))), assetLayers: ATO_ASSET_LAYERS.CHEMISTRY, extendedData: {
                     visible: true,
                 }, extendedDataResponsive: {
                     visible: false,
                 } }),
-            Object.assign(Object.assign({ key: 92, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '920 270', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BOILER_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BOILER_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.BOILER_WATER }))), visible: true, extendedData: {
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '920 270', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BOILER_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BOILER_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.BOILER_WATER }))), assetLayers: ATO_ASSET_LAYERS.CHEMISTRY, extendedData: {
                     visible: true,
                 }, extendedDataResponsive: {
                     visible: false,
                 } }),
             {
-                key: 94,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE,
                 source: AtoGojsEditorModel.IMAGE_BOILER_PATH,
                 group: 100,
@@ -7870,12 +8247,12 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 }
             },
             {
-                key: 95,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
                 group: 100,
                 loc: '80 280',
                 name: WATER_SYSTEMS_NAME.MAKEUP_WATER,
                 color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
                     visible: false,
                 },
@@ -7884,12 +8261,12 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 }
             },
             {
-                key: 96,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
                 group: 100,
                 loc: '300 17',
                 name: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
                 color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
                     visible: false,
                 },
@@ -7898,12 +8275,12 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 }
             },
             {
-                key: 97,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
                 group: 100,
                 loc: '760 17',
                 name: WATER_SYSTEMS_NAME.STEAM,
                 color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
                     visible: false,
                 },
@@ -7912,12 +8289,12 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 }
             },
             {
-                key: 98,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
                 group: 100,
                 loc: '460 400',
                 name: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
                 color: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
                     visible: false,
                 },
@@ -7926,12 +8303,112 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 }
             },
             {
-                key: 99,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
                 group: 100,
                 loc: '920 160',
                 name: WATER_SYSTEMS_NAME.BOILER_WATER,
                 color: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                }
+            },
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '15 310', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER }))), assetLayers: ATO_ASSET_LAYERS.FLOW, extendedData: {
+                    visible: true,
+                }, extendedDataResponsive: {
+                    visible: false,
+                } }),
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '190 50', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.CONDENSATE_RETURN]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.CONDENSATE_RETURN__FLOW].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.CONDENSATE_RETURN }))), assetLayers: ATO_ASSET_LAYERS.FLOW, extendedData: {
+                    visible: true,
+                }, extendedDataResponsive: {
+                    visible: false,
+                } }),
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '830 70', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.STEAM]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.STEAM__FLOW].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.STEAM }))), assetLayers: ATO_ASSET_LAYERS.FLOW, extendedData: {
+                    visible: true,
+                }, extendedDataResponsive: {
+                    visible: false,
+                } }),
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '400 510', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BOILER_FEED_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BOILER_FEED_WATER__FLOW].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.BOILER_FEED_WATER }))), assetLayers: ATO_ASSET_LAYERS.FLOW, extendedData: {
+                    visible: true,
+                }, extendedDataResponsive: {
+                    visible: false,
+                } }),
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '330 240', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.STEAM_LOSS]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.STEAM_LOSS].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.STEAM_LOSS }))), assetLayers: ATO_ASSET_LAYERS.FLOW, extendedData: {
+                    visible: true,
+                }, extendedDataResponsive: {
+                    visible: false,
+                } }),
+            Object.assign(Object.assign({ type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '900 425', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BLOWDOWN]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BLOWDOWN].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140, waterSystem: WATER_SYSTEMS_NAME.BLOWDOWN }))), assetLayers: ATO_ASSET_LAYERS.FLOW, extendedData: {
+                    visible: true,
+                }, extendedDataResponsive: {
+                    visible: false,
+                } }),
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '80 280',
+                name: WATER_SYSTEMS_NAME.MAKEUP_WATER,
+                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                }
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '300 17',
+                name: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
+                color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                }
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '760 17',
+                name: WATER_SYSTEMS_NAME.STEAM,
+                color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                }
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '460 400',
+                name: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
+                color: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                }
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '325 190',
+                name: WATER_SYSTEMS_NAME.STEAM_LOSS,
+                color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
                 extendedData: {
                     visible: false,
                 },