ato-water-lib 0.0.53 → 0.0.56

package/fesm2020/ato-water-lib.mjs

@@ -3359,12 +3359,14 @@ class AtoDefaultGojsEditor {
         });
         // Remove Node and Node Group
         _.forEach(this.myDiagram.nodeTemplateMap?.Hb, (temp) => {
-            if (temp?.key && !this.editor.data?.nodeDataArray?.some((node) => node?.type === temp?.key)) {
+            if (temp?.key &&
+                !this.editor.data?.nodeDataArray?.some((node) => node?.type === temp?.key)) {
                 this.myDiagram.nodeTemplateMap.remove(temp?.key);
             }
         });
         _.forEach(this.myDiagram.groupTemplateMap?.Hb, (temp) => {
-            if (temp?.key && !this.editor.data?.nodeDataArray?.some((node) => node?.type === temp?.key)) {
+            if (temp?.key &&
+                !this.editor.data?.nodeDataArray?.some((node) => node?.type === temp?.key)) {
                 this.myDiagram.groupTemplateMap.remove(temp?.key);
             }
         });
@@ -3394,7 +3396,8 @@ class AtoDefaultGojsEditor {
             this.makeGroupZoneTemplate();
             return;
         }
-        if (node?.type === AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL && node?.isGroup) {
+        if (node?.type === AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL &&
+            node?.isGroup) {
             this.groupPlantCellTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name);
             return;
         }
@@ -3418,11 +3421,13 @@ class AtoDefaultGojsEditor {
         }
         // Not Group
         // Component Water Normal
-        if (AtoGojsEditorModel.TYPE_TEMPLATE_WATER_NORMAL?.includes(node?.type) && !node?.isGroup) {
+        if (AtoGojsEditorModel.TYPE_TEMPLATE_WATER_NORMAL?.includes(node?.type) &&
+            !node?.isGroup) {
             this.makeEntityTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon ?? '', AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name ?? '');
         }
         // Component Water Withdraw Or Discharge
-        if (AtoGojsEditorModel.TYPE_TEMPLATE_WATER_WITHDRAW_OR_DISCHARGE?.includes(node?.type) && !node?.isGroup) {
+        if (AtoGojsEditorModel.TYPE_TEMPLATE_WATER_WITHDRAW_OR_DISCHARGE?.includes(node?.type) &&
+            !node?.isGroup) {
             this.makeEntityWithdrawOrDischarge(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon ?? '', AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name ?? '');
         }
         // Component Energy Normal
@@ -3475,7 +3480,8 @@ class AtoDefaultGojsEditor {
             this.makeSpecialTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name);
         }
         // Plant Cell
-        if (node?.type === AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL && !node?.isGroup) {
+        if (node?.type === AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL &&
+            !node?.isGroup) {
             this.plantCellTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name);
         }
     }
@@ -3503,7 +3509,8 @@ class AtoDefaultGojsEditor {
             this.myDiagram.dragSelectingTool = this.initialOptions?.dragSelectingTool;
             this.myDiagram.toolManager.draggingTool.isGridSnapEnabled =
                 this.initialOptions?.['draggingTool.isGridSnapEnabled'] ?? false;
-            if (this.myDiagram.toolManager && this.myDiagram.toolManager.draggingTool) {
+            if (this.myDiagram.toolManager &&
+                this.myDiagram.toolManager.draggingTool) {
                 if (this.initialOptions?.['draggingTool.gridSnapCellSize']) {
                     this.myDiagram.toolManager.draggingTool.gridSnapCellSize =
                         this.initialOptions?.['draggingTool.gridSnapCellSize'];
@@ -3521,7 +3528,8 @@ class AtoDefaultGojsEditor {
                         this.initialOptions?.['linkingTool.linkValidation'];
                 }
             }
-            this.myDiagram.contentAlignment = this.initialOptions?.contentAlignment ?? go.Spot.Center;
+            this.myDiagram.contentAlignment =
+                this.initialOptions?.contentAlignment ?? go.Spot.Center;
             this.myDiagram.layout = this.initialOptions?.layout;
             // this.myDiagram.minViewportBounds = new go.Rect(0, 0, 1200, 1200);
             if (!!this.editor?.data) {
@@ -3545,7 +3553,8 @@ class AtoDefaultGojsEditor {
             // if (!this.isAddedModelChangedListeners) {
             this.isAddedModelChangedListeners = true;
             this.myDiagram.addModelChangedListener(function (e) {
-                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);
                 }
@@ -3772,7 +3781,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);
@@ -3853,10 +3867,16 @@ 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, // the "from" arrowhead
-        { ...AtoGojsEditorModel.LINK_TEMPLATES[AtoGojsEditorModel.ENUM_LINK_TYPES.SIMPLE]?.arrow }, new go.Binding('visible', 'type', (x) => ![
+        {
+            ...AtoGojsEditorModel.LINK_TEMPLATES[AtoGojsEditorModel.ENUM_LINK_TYPES.SIMPLE]?.arrow,
+        }, new go.Binding('visible', 'type', (x) => ![
             AtoGojsEditorModel.ENUM_LINK_TYPES.PIPE_ANIMATION,
             AtoGojsEditorModel.ENUM_LINK_TYPES.PIPE,
             AtoGojsEditorModel.ENUM_LINK_TYPES.PIPE_HIDDEN,
@@ -3875,7 +3895,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?.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);
     }
@@ -3955,7 +3975,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) {
@@ -3965,7 +3988,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,
@@ -4016,7 +4041,8 @@ class AtoDefaultGojsEditor {
             },
             doubleClick: (e, obj) => {
                 const node = obj.part;
-                if (node?.ob?.isTypeInflowOfPlantCell && !this._initialOptions?.isReadOnly) {
+                if (node?.ob?.isTypeInflowOfPlantCell &&
+                    !this._initialOptions?.isReadOnly) {
                     // obj?.data?.onSelected(node?.ob?.nodePlantCellParent);
                     // this.isShowNodeInfo
                     //     ? self.onDoubleClickNode.emit({
@@ -4041,7 +4067,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?.isTypeInflowOfPlantCell
@@ -4177,7 +4207,10 @@ class AtoDefaultGojsEditor {
         }
         return `${data?.shortenedNumber}${data?.unitPrefixes ? ' ' + 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,
@@ -4270,7 +4303,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,
@@ -4300,7 +4336,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',
@@ -4309,8 +4349,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,
@@ -4357,7 +4397,8 @@ class AtoDefaultGojsEditor {
         }, new go.Binding('text', 'name').makeTwoWay(), new go.Binding('editable', '', (data) => {
             return !(AtoGojsEditorModel.TYPE_COMPONENT_WATER?.includes(data?.systemType) &&
                 data?.topologyType !== ATO_ECOMPONENT_PLANT_TYPE.WATER &&
-                data?.topologyType !== ATO_ECOMPONENT_PLANT_TYPE.WATER_PLANT_CELL);
+                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),
@@ -4367,7 +4408,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,
+    }) {
         const self = this;
         let node = this.$(go.Node, 'Spot', {
             locationSpot: go.Spot.Center,
@@ -4391,7 +4435,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',
@@ -4448,7 +4496,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,
@@ -4513,7 +4564,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,
@@ -4521,7 +4576,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',
@@ -4552,7 +4619,8 @@ class AtoDefaultGojsEditor {
             alignment: go.Spot.Center,
             desiredSize: new go.Size(size.w - 20, size.h - 65),
             imageStretch: go.GraphObject.Uniform,
-        }, new go.Binding('source', 'pathImage', (x) => x ?? AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL].icon)), this.$(go.TextBlock, {
+        }, new go.Binding('source', 'pathImage', (x) => x ??
+            AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES.PLANT_CELL].icon)), this.$(go.TextBlock, {
             row: 2,
             margin: new go.Margin(10, 0, 3, 0),
             editable: true,
@@ -4571,10 +4639,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,
@@ -4593,7 +4669,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,
@@ -4632,7 +4712,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', {
@@ -4662,7 +4750,10 @@ class AtoDefaultGojsEditor {
             const fromnode = button.part.adornedPart;
             const diagram = fromnode.diagram;
             const model = diagram.model;
-            const nodedata = { ...model.copyNodeData(data), key: UtilsService.generateUUID() };
+            const nodedata = {
+                ...model.copyNodeData(data),
+                key: UtilsService.generateUUID(),
+            };
             model.addNodeData(nodedata);
             const newnode = diagram.findNodeForData(nodedata);
             const linkdata = model.copyLinkData({});
@@ -4717,25 +4808,31 @@ class AtoDefaultGojsEditor {
                         return !!obj.part?.['ob']?.id;
                     }
                     if (action === AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME &&
-                        obj.part?.['ob']?.type !== AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE &&
+                        obj.part?.['ob']?.type !==
+                            AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE &&
                         AtoGojsEditorModel.TYPE_COMPONENT_WATER?.includes(obj.part?.['ob']?.systemType) &&
-                        obj.part?.['ob']?.topologyType !== ATO_ECOMPONENT_PLANT_TYPE.WATER &&
-                        obj.part?.['ob']?.topologyType !== ATO_ECOMPONENT_PLANT_TYPE.WATER_PLANT_CELL) {
+                        obj.part?.['ob']?.topologyType !==
+                            ATO_ECOMPONENT_PLANT_TYPE.WATER &&
+                        obj.part?.['ob']?.topologyType !==
+                            ATO_ECOMPONENT_PLANT_TYPE.WATER_PLANT_CELL) {
                         return false;
                     }
                     if (action === AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW &&
                         self.plantSatus === ATO_EPlantType.BASIC_PLANT &&
-                        obj.part?.data?.type === AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE) {
+                        obj.part?.data?.type ===
+                            AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE) {
                         return false;
                     }
                     return true;
                 }).map((e) => {
-                    if (ATO_ECOMPONENT_PLANT_TYPE.STEAM === obj.part?.['ob']?.topologyType &&
+                    if (ATO_ECOMPONENT_PLANT_TYPE.STEAM ===
+                        obj.part?.['ob']?.topologyType &&
                         e === AtoDefaultGojsEditor.ENUM_ACTIONS.INSIGHT) {
                         return AtoDefaultGojsEditor.ENUM_ACTIONS.DATA_MAPPING;
                     }
                     if (e === AtoDefaultGojsEditor.ENUM_ACTIONS.FLOW_DETAILS &&
-                        obj?.part?.['ob']?.systemType === AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER) {
+                        obj?.part?.['ob']?.systemType ===
+                            AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER) {
                         return AtoDefaultGojsEditor.ENUM_ACTIONS.FLOW_DETAILS_AND_WIZARD;
                     }
                     return e;
@@ -4776,7 +4873,8 @@ class AtoDefaultGojsEditor {
                             break;
                         case AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME:
                             onClickFn = () => {
-                                if (obj.part?.data?.type === AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE) {
+                                if (obj.part?.data?.type ===
+                                    AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE) {
                                     self.onRename.emit({
                                         left: e?.['Wr']?.x - 50,
                                         top: e?.['Wr']?.y,
@@ -4806,7 +4904,7 @@ class AtoDefaultGojsEditor {
                                             name: `${AtoGojsEditorModel.ACTION_RIGHT_MENU_GROUP.DATA_BOX}_${moment().valueOf()}`,
                                             color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
                                         },
-                                        ...self.setProFOrNewNode(self)
+                                        ...self.setProFOrNewNode(self),
                                     },
                                 }));
                             };
@@ -4863,7 +4961,10 @@ class AtoDefaultGojsEditor {
         const dragData = button._dragData;
         const diagram = fromnode.diagram;
         const model = diagram.model;
-        const nodedata = { ...model.copyNodeData(dragData), key: UtilsService.generateUUID() };
+        const nodedata = {
+            ...model.copyNodeData(dragData),
+            key: UtilsService.generateUUID(),
+        };
         model.addNodeData({
             ...nodedata,
             isEditable: true,
@@ -4883,7 +4984,8 @@ class AtoDefaultGojsEditor {
         if (nodedata?.movable !== undefined && nodedata?.movable !== null) {
             newnode.movable = 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');
     }
     findLocYFromnode(fromnode) {
@@ -4903,12 +5005,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;
@@ -4944,7 +5054,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,
@@ -4991,7 +5103,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) {
@@ -5006,7 +5146,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,
@@ -5055,10 +5197,12 @@ class AtoDefaultGojsEditor {
                 return false;
             }
             if (data?.flowOfPlantCell) {
-                if (data?.flowOfPlantCell === ATO_ENUM_FLOW_DIRECTION.INFLOW && name === 'L') {
+                if (data?.flowOfPlantCell === ATO_ENUM_FLOW_DIRECTION.INFLOW &&
+                    name === 'L') {
                     return true;
                 }
-                if (data?.flowOfPlantCell === ATO_ENUM_FLOW_DIRECTION.OUTFLOW && name === 'R') {
+                if (data?.flowOfPlantCell === ATO_ENUM_FLOW_DIRECTION.OUTFLOW &&
+                    name === 'R') {
                     return true;
                 }
                 return false;
@@ -5152,7 +5296,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 }) {
@@ -5287,7 +5508,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?.source ? data?.source : AtoGojsEditorModel.IMAGE_RO_WATER_TREATMENT_PATH;
+            return data?.source
+                ? data?.source
+                : AtoGojsEditorModel.IMAGE_RO_WATER_TREATMENT_PATH;
         }))));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE, node);
     }
@@ -5371,7 +5594,8 @@ class AtoDefaultGojsEditor {
             itemTemplate: this.$(go.Panel, 'TableRow', {
                 cursor: 'pointer',
                 click: (e, obj) => {
-                    if (obj.panel.part.data?.dataTable[obj.row]?.isEditable === false) {
+                    if (obj.panel.part.data?.dataTable[obj.row]?.isEditable ===
+                        false) {
                         return;
                     }
                     self.onClikParamOfTable.emit({
@@ -5379,7 +5603,12 @@ class AtoDefaultGojsEditor {
                     });
                 },
                 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?.name;
             })), this.$(go.Panel, 'Table', {
                 column: 1,
@@ -5403,7 +5632,8 @@ class AtoDefaultGojsEditor {
                         ? `${data?.tagName || ''} `
                         : ''}${data?.value}`;
                 }), new go.Binding('visible', '', (data) => {
-                    if (!!this._initialOptions.isReadOnly && data?.tagName) {
+                    if (!!this._initialOptions.isReadOnly &&
+                        data?.tagName) {
                         return true;
                     }
                     return !!data?.value;
@@ -5421,7 +5651,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, {
@@ -5436,7 +5666,9 @@ class AtoDefaultGojsEditor {
             }), new go.Binding('opacity', '', (data, panel) => {
                 return data?.isEditable === false ? 0.6 : 1;
             })))),
-        })));
+        }
+        // new go.Binding('text', 'name')
+        )));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, node);
     }
     makeMassBalance() {
@@ -5700,7 +5932,8 @@ class AtoDefaultGojsEditor {
             //     : node?.layout;
             if (data?.layoutValue !== data?.layoutValueClone) {
                 data.layoutValueClone = data?.layoutValue;
-                return data?.layoutValue === AtoGojsEditorModel.ENUM_LAYOUT_EDITOR.AUTO
+                return data?.layoutValue ===
+                    AtoGojsEditorModel.ENUM_LAYOUT_EDITOR.AUTO
                     ? self.$(go.LayeredDigraphLayout, { direction: 0 })
                     : self.$(go.Layout);
             }
@@ -5799,10 +6032,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) {
@@ -5825,7 +6064,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',
@@ -5851,7 +6094,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,
@@ -5879,7 +6197,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', 
         // {
@@ -5962,7 +6283,10 @@ class AtoDefaultGojsEditor {
                 value: x?.quantity,
                 unit: x?.unit,
             });
-            return formatted.shortenedNumber + ' ' + formatted.unitPrefixes + x?.unit ?? '';
+            return (formatted.shortenedNumber +
+                ' ' +
+                formatted.unitPrefixes +
+                x?.unit ?? '');
         }), new go.Binding('visible', 'data', (x) => typeof x?.quantity === 'number')), this.$(go.TextBlock, {
             margin: new go.Margin(0, 5, 10, 0),
             textAlign: 'center',
@@ -5973,7 +6297,10 @@ class AtoDefaultGojsEditor {
         }, new go.Binding('visible', 'data', (x) => typeof 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:
@@ -6214,7 +6541,8 @@ class AtoDefaultGojsEditor {
         //     return;
         // }
         // const newDocument = newWindow?.document;
-        if (!this.myDiagram?.model?.nodeDataArray?.length && !this.myDiagram?.model?.linkDataArray?.length) {
+        if (!this.myDiagram?.model?.nodeDataArray?.length &&
+            !this.myDiagram?.model?.linkDataArray?.length) {
             return;
         }
         const svg = this.myDiagram.makeSvg({
@@ -6235,7 +6563,8 @@ class AtoDefaultGojsEditor {
                     svgElement.setAttribute('stroke', 'rgba(64, 181, 206, 0.6)');
                 }
                 // Empty Value
-                if (graphObject?.name === 'textBlockValue' || graphObject?.name === 'textBlockUnitPrefixes') {
+                if (graphObject?.name === 'textBlockValue' ||
+                    graphObject?.name === 'textBlockUnitPrefixes') {
                     svgElement.textContent = '';
                 }
                 if (svgElement.clipPath) {
@@ -6584,7 +6913,7 @@ var ENUM_ASSET_PARAMETERS;
     ENUM_ASSET_PARAMETERS["TOTAL_IRON"] = "Total Iron";
     // Steam
     ENUM_ASSET_PARAMETERS["PHOSPHATE"] = "Phosphate";
-    ENUM_ASSET_PARAMETERS["M_AKALINITY"] = "M-Akalinity";
+    ENUM_ASSET_PARAMETERS["M_ALKALINITY"] = "M-Alkalinity";
     // For Boiler - view Flow
     ENUM_ASSET_PARAMETERS["FLOW"] = "Flow";
     ENUM_ASSET_PARAMETERS["FLOW_RATE"] = "Flow Rate";
@@ -6807,9 +7136,9 @@ const DATA_ASSET_PARAMETER_FIELDS = {
         name: ENUM_ASSET_PARAMETERS.PHOSPHATE,
         key: ENUM_ASSET_PARAMETERS.PHOSPHATE,
     },
-    [ENUM_ASSET_PARAMETERS.M_AKALINITY]: {
-        name: ENUM_ASSET_PARAMETERS.M_AKALINITY,
-        key: ENUM_ASSET_PARAMETERS.M_AKALINITY,
+    [ENUM_ASSET_PARAMETERS.M_ALKALINITY]: {
+        name: ENUM_ASSET_PARAMETERS.M_ALKALINITY,
+        key: ENUM_ASSET_PARAMETERS.M_ALKALINITY,
     },
     // Boiler for view Flow
     [ENUM_ASSET_PARAMETERS.FLOW]: {
@@ -6983,7 +7312,7 @@ const ASSET_CATEGORY_PARAMS__BOILER = {
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PH],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PHOSPHATE],
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SILICA],
-        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.M_AKALINITY],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.M_ALKALINITY],
     ],
     // For View Flow
     [WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW]: [
@@ -8377,6 +8706,76 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     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,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                }
+            },
             { key: 100, type: AtoGojsEditorModel.ENUM_TEMPLATES.BOILER, isGroup: true, name: 'Group' },
         ],
         linkDataArray: [],