ato-water-lib 0.0.90 → 0.0.92

package/{fesm2022 → fesm2020}/ato-water-lib.mjs

@@ -10,25 +10,25 @@ import { v4 } from 'uuid';
 
 class AtoWaterLibService {
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibService, decorators: [{
+AtoWaterLibService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AtoWaterLibService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: function () { return []; } });
 
 class AtoWaterLibComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AtoWaterLibComponent, selector: "lib-ato-water-lib", ngImport: i0, template: `
+}
+AtoWaterLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AtoWaterLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoWaterLibComponent, selector: "lib-ato-water-lib", ngImport: i0, template: `
     <p>
       ato-water-lib works!
     </p>
   `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-ato-water-lib', template: `
     <p>
@@ -820,8 +820,6 @@ var ATO_ENUM_FLOW_DIRECTION;
 })(ATO_ENUM_FLOW_DIRECTION || (ATO_ENUM_FLOW_DIRECTION = {}));
 
 class AtoGojsEditorModel {
-    initialOptions;
-    data; // FlowGoJsComponentModel
     constructor(data) {
         this.data = data;
     }
@@ -887,6 +885,9 @@ class AtoGojsEditorModel {
         ENUM_COLORS["SNOW"] = "#FEF7F6";
         ENUM_COLORS["LIGHT_SKY_BLUE_2"] = "#92B9F9";
         ENUM_COLORS["REGENT_ST_BLUE"] = "#87cee7";
+        ENUM_COLORS["SELAGO"] = "#F6F3F6";
+        ENUM_COLORS["ICE_COLD"] = "#ABE0D9";
+        ENUM_COLORS["MINT_CREAM"] = "#F8FCFB";
         //  98CDE0
     })(ENUM_COLORS = AtoGojsEditorModel.ENUM_COLORS || (AtoGojsEditorModel.ENUM_COLORS = {}));
     let ENUM_LINK_TYPES;
@@ -1037,6 +1038,8 @@ class AtoGojsEditorModel {
         // Plant Basic
         ENUM_TEMPLATES["GROUP_BASIC_COMPONENT"] = "Group Basic Component";
         ENUM_TEMPLATES["TEXT_LABEL"] = "label";
+        ENUM_TEMPLATES["PRESSURIZED_UF_WATER_TREATMENTS"] = "Pressurized UF";
+        ENUM_TEMPLATES["IMMERSED_UF_WATER_TREATMENTS"] = "Immersed UF";
         // Type Group duplicate Energy with Water
         ENUM_TEMPLATES["BOILER_ENERGY"] = "Boiler Energy";
         ENUM_TEMPLATES["COOLING_TOWER_ENERGY"] = "Cooling Tower Energy";
@@ -1177,6 +1180,8 @@ class AtoGojsEditorModel {
         ENUM_TYPES["STEAM_COMPONENT"] = "SteamComponents";
         ENUM_TYPES["STEAM_CONSUMING_SYSTEM"] = "SteamConsumings";
         ENUM_TYPES["ENERGY_CONVERTER"] = "EnergyConverters";
+        ENUM_TYPES["PRESSURIZED_UF_WATER_TREATMENTS"] = "PressurizedUFWaterTreatments";
+        ENUM_TYPES["IMMERSED_UF_WATER_TREATMENTS"] = "ImmersedUFWaterTreatments";
         // System Type Group duplicate Energy with Water
         ENUM_TYPES["BOILER_ENERGY"] = "Boiler Energy";
         ENUM_TYPES["COOLING_TOWER_ENERGY"] = "CoolingTowers Energy";
@@ -1451,6 +1456,8 @@ class AtoGojsEditorModel {
         ENUM_TYPES.ETP_WASTEWATER_TREATMENT,
         ENUM_TYPES.MBR_WASTEWATER_TREATMENT,
         ENUM_TYPES.ZLD_WASTEWATER_TREATMENT,
+        ENUM_TYPES.IMMERSED_UF_WATER_TREATMENTS,
+        ENUM_TYPES.PRESSURIZED_UF_WATER_TREATMENTS,
         ENUM_TYPES.DOMESTIC_USE,
         ENUM_TYPES.COOLING_TOWER,
         ENUM_TYPES.BOILER,
@@ -1658,6 +1665,16 @@ class AtoGojsEditorModel {
             icon: `${AtoGojsEditorModel.ICON_ASSET_PATH}/water_treatment.svg`,
             systemType: ENUM_TYPES.WATER_TREATMENT,
         },
+        [ENUM_TEMPLATES.IMMERSED_UF_WATER_TREATMENTS]: {
+            name: ENUM_TEMPLATES.IMMERSED_UF_WATER_TREATMENTS,
+            icon: `${AtoGojsEditorModel.ICON_ASSET_PATH}/water_treatment.svg`,
+            systemType: ENUM_TYPES.IMMERSED_UF_WATER_TREATMENTS,
+        },
+        [ENUM_TEMPLATES.PRESSURIZED_UF_WATER_TREATMENTS]: {
+            name: ENUM_TEMPLATES.PRESSURIZED_UF_WATER_TREATMENTS,
+            icon: `${AtoGojsEditorModel.ICON_ASSET_PATH}/water_treatment.svg`,
+            systemType: ENUM_TYPES.PRESSURIZED_UF_WATER_TREATMENTS,
+        },
         [ENUM_TEMPLATES.DEMIN_WATER_TREATMENT]: {
             name: ENUM_TEMPLATES.DEMIN_WATER_TREATMENT,
             icon: `${AtoGojsEditorModel.ICON_ASSET_PATH}/Demin.svg`,
@@ -2465,6 +2482,8 @@ class AtoGojsEditorModel {
         ENUM_TYPES.WATER_TREATMENT,
         ENUM_TYPES.DEMIN_WATER_TREATMENT,
         ENUM_TYPES.RO_WATER_TREATMENT,
+        ENUM_TYPES.IMMERSED_UF_WATER_TREATMENTS,
+        ENUM_TYPES.PRESSURIZED_UF_WATER_TREATMENTS,
         ENUM_TYPES.PROCESS,
         ENUM_TYPES.WASTEWATER_TREATMENT,
         ENUM_TYPES.DAF_WASTEWATER_TREATMENT,
@@ -2483,6 +2502,8 @@ class AtoGojsEditorModel {
     AtoGojsEditorModel.TYPE_TEMPLATE_WATER_NORMAL = [
         AtoGojsEditorModel.ENUM_TEMPLATES.PROCESS,
         AtoGojsEditorModel.ENUM_TEMPLATES.BOILER,
+        AtoGojsEditorModel.ENUM_TEMPLATES.IMMERSED_UF_WATER_TREATMENTS,
+        AtoGojsEditorModel.ENUM_TEMPLATES.PRESSURIZED_UF_WATER_TREATMENTS,
         AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER,
         AtoGojsEditorModel.ENUM_TEMPLATES.ETP_WASTEWATER_TREATMENT,
         AtoGojsEditorModel.ENUM_TEMPLATES.ZLD_WASTEWATER_TREATMENT,
@@ -2614,6 +2635,8 @@ class AtoGojsEditorModel {
         [AtoGojsEditorModel.ENUM_TEMPLATES.STEAM_PIPELINE]: AtoGojsEditorModel.ENUM_TEMPLATES.PIPELINE,
         [AtoGojsEditorModel.ENUM_TEMPLATES.BOILER_ENERGY]: AtoGojsEditorModel.ENUM_TEMPLATES.BOILER,
         [AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER_ENERGY]: AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER,
+        [AtoGojsEditorModel.ENUM_TEMPLATES.IMMERSED_UF_WATER_TREATMENTS]: AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER,
+        [AtoGojsEditorModel.ENUM_TEMPLATES.PRESSURIZED_UF_WATER_TREATMENTS]: AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER,
     };
 })(AtoGojsEditorModel || (AtoGojsEditorModel = {}));
 
@@ -3179,10 +3202,10 @@ class UtilsService {
         }
         return text.replace(new RegExp(escapeRegExp(find), 'g'), replace);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UtilsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UtilsService, decorators: [{
+UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3250,70 +3273,6 @@ const ARROW_GRAY = '/assets/images/icons/arrow-gray.svg';
 const RO_LINE_DIRTY = '/assets/images/icons/ro_line_dirty.svg';
 const OUTFLOW_LINE_DIRTY = '/assets/images/icons/outflow_line_dirty.png';
 class AtoDefaultGojsEditor {
-    _elRef;
-    menuTrigger;
-    linkValidation;
-    actions = [];
-    actionMenuId = 'actionMenuId';
-    myDiagramDiv = this.constructor.name + '-' + moment().valueOf();
-    myDiagram;
-    $ = go.GraphObject.make;
-    animationInterval;
-    defaultScaleZoomToFit;
-    _initialOptions = {
-        'toolManager.hoverDelay': 200,
-        // 'draggingTool.isEnabled': false,
-        // initialAutoScale: go.Diagram.UniformToFill,
-        // autoScrollRegion: AtoGojsEditorModel.GRID_SIZE * 5,
-        layout: this.$(go.LayeredDigraphLayout, { direction: 0 }),
-        initialContentAlignment: go.Spot.Center,
-        initialAutoScale: go.Diagram.Uniform,
-        // contentAlignment: go.Spot.Center,
-        // this.$(go.ForceDirectedLayout),
-        'undoManager.isEnabled': true, // enable undo & redo
-        // "animationManager.isInitial": false,
-        // "animationManager.isEnabled": false,
-        // "draggingTool.isGridSnapEnabled": true
-        dragSelectingTool: this.$(go.DragSelectingTool, { isPartialInclusion: true, delay: 50 }, {
-            box: this.$(go.Part, // replace the magenta box with a red one
-            { layerName: 'Tool', selectable: false }, this.$(go.Shape, {
-                name: 'SHAPE',
-                fill: 'rgba(255,0,0,0)',
-                stroke: '#E95F47',
-                strokeWidth: 2,
-            })),
-        }),
-        'linkingTool.linkValidation': this.checkLinkCondition.bind(this),
-        'draggingTool.doMouseMove': function () {
-            // do the standard behavior by calling the super method
-            go.DraggingTool.prototype.doMouseMove.call(this);
-            // if dragging-out from the diagram is not allowed, and
-            // if mouse is outside of viewport
-            if (!this.diagram.allowDragOut &&
-                !this.diagram.viewportBounds.containsPoint(this.diagram.lastInput.documentPoint)) {
-                this.diagram.ensureBounds();
-                const vp = this.diagram.lastInput.viewPoint;
-                const dp = this.diagram.position.copy();
-                if (vp.x < 0)
-                    dp.x -= 10;
-                else if (vp.x > 0)
-                    dp.x += 10;
-                if (vp.y < 0)
-                    dp.y -= 10;
-                else if (vp.y > 0)
-                    dp.y += 10;
-                this.diagram.position = dp; // scroll in the direction of the mouse
-            }
-        },
-        // LayoutCompleted: () => {
-        //     this.myDiagram.zoomToFit();
-        //     this.defaultScaleZoomToFit = this.myDiagram.scale;
-        //     if (!this.initialOptions.isReadOnly) {
-        //         const sizeMargin = AtoGojsEditorModel.GRID_SIZE * 15;
-        //         this.myDiagram.padding = new go.Margin(sizeMargin);
-        //     }
-        // },
-    };
     checkLinkCondition(fromNode, fromPort, toNode, toPort, link) {
         if (this.linkValidation) {
             return this.linkValidation(fromNode, fromPort, toNode, toPort, link);
@@ -3327,7 +3286,6 @@ class AtoDefaultGojsEditor {
     get initialOptions() {
         return this._initialOptions;
     }
-    _editor;
     set editor(v) {
         this._editor = v;
         if (v) {
@@ -3339,36 +3297,92 @@ class AtoDefaultGojsEditor {
     get editor() {
         return this._editor;
     }
-    isShowNodeInfo = false;
-    plantSatus;
     constructor(_elRef) {
         this._elRef = _elRef;
+        this.actions = [];
+        this.actionMenuId = 'actionMenuId';
+        this.myDiagramDiv = this.constructor.name + '-' + moment().valueOf();
+        this.$ = go.GraphObject.make;
+        this._initialOptions = {
+            'toolManager.hoverDelay': 200,
+            // 'draggingTool.isEnabled': false,
+            // initialAutoScale: go.Diagram.UniformToFill,
+            // autoScrollRegion: AtoGojsEditorModel.GRID_SIZE * 5,
+            layout: this.$(go.LayeredDigraphLayout, { direction: 0 }),
+            initialContentAlignment: go.Spot.Center,
+            initialAutoScale: go.Diagram.Uniform,
+            // contentAlignment: go.Spot.Center,
+            // this.$(go.ForceDirectedLayout),
+            'undoManager.isEnabled': true,
+            // "animationManager.isInitial": false,
+            // "animationManager.isEnabled": false,
+            // "draggingTool.isGridSnapEnabled": true
+            dragSelectingTool: this.$(go.DragSelectingTool, { isPartialInclusion: true, delay: 50 }, {
+                box: this.$(go.Part, // replace the magenta box with a red one
+                { layerName: 'Tool', selectable: false }, this.$(go.Shape, {
+                    name: 'SHAPE',
+                    fill: 'rgba(255,0,0,0)',
+                    stroke: '#E95F47',
+                    strokeWidth: 2,
+                })),
+            }),
+            'linkingTool.linkValidation': this.checkLinkCondition.bind(this),
+            'draggingTool.doMouseMove': function () {
+                // do the standard behavior by calling the super method
+                go.DraggingTool.prototype.doMouseMove.call(this);
+                // if dragging-out from the diagram is not allowed, and
+                // if mouse is outside of viewport
+                if (!this.diagram.allowDragOut &&
+                    !this.diagram.viewportBounds.containsPoint(this.diagram.lastInput.documentPoint)) {
+                    this.diagram.ensureBounds();
+                    const vp = this.diagram.lastInput.viewPoint;
+                    const dp = this.diagram.position.copy();
+                    if (vp.x < 0)
+                        dp.x -= 10;
+                    else if (vp.x > 0)
+                        dp.x += 10;
+                    if (vp.y < 0)
+                        dp.y -= 10;
+                    else if (vp.y > 0)
+                        dp.y += 10;
+                    this.diagram.position = dp; // scroll in the direction of the mouse
+                }
+            },
+            // LayoutCompleted: () => {
+            //     this.myDiagram.zoomToFit();
+            //     this.defaultScaleZoomToFit = this.myDiagram.scale;
+            //     if (!this.initialOptions.isReadOnly) {
+            //         const sizeMargin = AtoGojsEditorModel.GRID_SIZE * 15;
+            //         this.myDiagram.padding = new go.Margin(sizeMargin);
+            //     }
+            // },
+        };
+        this.isShowNodeInfo = false;
+        this.onModelChangeListenerEvent = new EventEmitter();
+        this.onClickInfoButton = new EventEmitter();
+        this.onOpenWizard = new EventEmitter();
+        this.onOpenDetail = new EventEmitter();
+        this.onOpenAssetParameter = new EventEmitter();
+        this.onOpenInsightMapping = new EventEmitter();
+        this.onHoverInfoButton = new EventEmitter();
+        this.onHoverAlert = new EventEmitter();
+        this.onDoubleClickNode = new EventEmitter();
+        this.onOpenChangeIcon = new EventEmitter();
+        // Click component
+        this.onClickCompoent = new EventEmitter();
+        this.callbackImageTopology = new EventEmitter();
+        // Click param on ParamTable
+        this.onClikParamOfTable = new EventEmitter();
+        // Delete Node
+        this.onDeleteNode = new EventEmitter();
+        this.onUndo = new EventEmitter();
+        // Rename
+        this.onRename = new EventEmitter();
+        this.committedTransactionSubject = new Subject();
+        // AddSub and UnSub
+        this._subscriptionList = new Subscription();
         go.Diagram.licenseKey = GO_LICENSE_KEY;
     }
-    onModelChangeListenerEvent = new EventEmitter();
-    onClickInfoButton = new EventEmitter();
-    onOpenWizard = new EventEmitter();
-    onOpenDetail = new EventEmitter();
-    onOpenAssetParameter = new EventEmitter();
-    onOpenInsightMapping = new EventEmitter();
-    onHoverInfoButton = new EventEmitter();
-    onHoverAlert = new EventEmitter();
-    onDoubleClickNode = new EventEmitter();
-    onOpenChangeIcon = new EventEmitter();
-    // Click component
-    onClickCompoent = new EventEmitter();
-    callbackImageTopology = new EventEmitter();
-    // Click param on ParamTable
-    onClikParamOfTable = new EventEmitter();
-    // Delete Node
-    onDeleteNode = new EventEmitter();
-    onUndo = new EventEmitter();
-    // Rename
-    onRename = new EventEmitter();
-    isAddedModelChangedListeners;
-    committedTransactionSubject = new Subject();
-    // AddSub and UnSub
-    _subscriptionList = new Subscription();
     ngOnDestroy() {
         this.unsubscribeAll();
         this.stopAnimation();
@@ -3432,6 +3446,16 @@ class AtoDefaultGojsEditor {
             this.makeGroupCoolingTowerTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name);
             return;
         }
+        if (node?.type ===
+            AtoGojsEditorModel.ENUM_TEMPLATES.IMMERSED_UF_WATER_TREATMENTS) {
+            this.makeGroupCoolingTowerTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name);
+            return;
+        }
+        if (node?.type ===
+            AtoGojsEditorModel.ENUM_TEMPLATES.PRESSURIZED_UF_WATER_TREATMENTS) {
+            this.makeGroupCoolingTowerTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name);
+            return;
+        }
         if (node?.type === AtoGojsEditorModel.ENUM_TEMPLATES.ZONE) {
             this.makeGroupZoneTemplate();
             return;
@@ -3456,7 +3480,7 @@ class AtoDefaultGojsEditor {
         this.makeGroupTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name);
     }
     addNodeTemplate(node) {
-        if (this.myDiagram.nodeTemplateMap?.Hb?.[node?.type] || node?.isGroup) {
+        if (this.myDiagram.nodeTemplateMap?.Hb[node?.type] || node?.isGroup) {
             return;
         }
         // Not Group
@@ -3614,7 +3638,7 @@ class AtoDefaultGojsEditor {
         // for water
         const { STORAGE, WATER_TREATMENT, DEMIN_WATER_TREATMENT, 
         // RO_WATER_TREATMENT,
-        PROCESS, WASTEWATER_TREATMENT, DAF_WASTEWATER_TREATMENT, ETP_WASTEWATER_TREATMENT, MBR_WASTEWATER_TREATMENT, ZLD_WASTEWATER_TREATMENT, COOLING_TOWER, BOILER, OTHER, LANDSCAPING_IRRIGATION, } = AtoGojsEditorModel.ENUM_TEMPLATES;
+        PROCESS, WASTEWATER_TREATMENT, DAF_WASTEWATER_TREATMENT, ETP_WASTEWATER_TREATMENT, MBR_WASTEWATER_TREATMENT, ZLD_WASTEWATER_TREATMENT, COOLING_TOWER, BOILER, OTHER, LANDSCAPING_IRRIGATION, PRESSURIZED_UF_WATER_TREATMENTS, IMMERSED_UF_WATER_TREATMENTS, } = AtoGojsEditorModel.ENUM_TEMPLATES;
         const waterGroups = [
             STORAGE,
             WATER_TREATMENT,
@@ -3630,6 +3654,8 @@ class AtoDefaultGojsEditor {
             BOILER,
             OTHER,
             LANDSCAPING_IRRIGATION,
+            PRESSURIZED_UF_WATER_TREATMENTS,
+            IMMERSED_UF_WATER_TREATMENTS,
         ];
         waterGroups.map((e) => {
             if (!!AtoGojsEditorModel.NODE_TEMPLATES[e]) {
@@ -3872,7 +3898,7 @@ class AtoDefaultGojsEditor {
             visible: true,
             fill: 'transparent',
         }));
-        elements.push(this.$(go.Panel, 'Vertical', {
+        elements.push(this.$(go.Panel, 'Top', {
             height: 38,
             // maxSize: new go.Size(NaN, 36),
             // width: 100,
@@ -3901,7 +3927,7 @@ class AtoDefaultGojsEditor {
             // editable: false,
             // alignment: go.Spot.Center, // Đảm bảo văn bản nằm ở trung tâm của nút
             // alignmentFocus: go.Spot.Center, // Đảm bảo văn bản không bị dịch chuyển ra khỏi trung tâm
-            wrap: go.TextBlock.WrapFit, // Chuyển dòng để văn bản không vượt ra ngoài
+            wrap: go.TextBlock.WrapFit,
             // selectable: true,
             overflow: go.TextBlock.OverflowEllipsis,
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
@@ -3955,7 +3981,7 @@ class AtoDefaultGojsEditor {
         // Icon Err when lack of value
         this.$(go.TextBlock, {
             margin: new go.Margin(10, 10, 10, 10),
-            text: VALUE_NA, // Old version: TEXT_ERROR
+            text: VALUE_NA,
             textAlign: 'center',
             font: 'bold 10pt sans-serif',
             stroke: AtoGojsEditorModel.ENUM_COLORS.SALMON,
@@ -4201,7 +4227,7 @@ class AtoDefaultGojsEditor {
                 maxSize: new go.Size(30, 30),
                 imageStretch: go.GraphObject.Uniform,
             }))
-            : {}), this.$(go.Panel, 'Auto', this.$(go.TextBlock, {
+            : ''), this.$(go.Panel, 'Auto', this.$(go.TextBlock, {
             name: 'textBlockValue',
             row: 2,
             editable: false,
@@ -4320,7 +4346,7 @@ class AtoDefaultGojsEditor {
         // Icon Err when lack of value
         this.$(go.TextBlock, {
             margin: new go.Margin(10, 10, 10, 10),
-            text: VALUE_NA, // Old version: TEXT_ERROR
+            text: VALUE_NA,
             textAlign: 'center',
             font: 'bold 10pt sans-serif',
             stroke: AtoGojsEditorModel.ENUM_COLORS.SALMON,
@@ -4391,6 +4417,10 @@ class AtoDefaultGojsEditor {
                         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.BOILER].name,
+                        AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES
+                            .IMMERSED_UF_WATER_TREATMENTS].name,
+                        AtoGojsEditorModel.NODE_TEMPLATES[AtoGojsEditorModel.ENUM_TEMPLATES
+                            .PRESSURIZED_UF_WATER_TREATMENTS].name,
                     ].includes(title)
                         ? [
                             AtoDefaultGojsEditor.ENUM_ACTIONS.RENAME,
@@ -4941,7 +4971,7 @@ class AtoDefaultGojsEditor {
                         case AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW:
                             onClickFn = () => {
                                 self.clickNewNode(e, _.merge(obj, {
-                                    actionMove: self.dragNewNode, // defined below, to support dragging from the button
+                                    actionMove: self.dragNewNode,
                                     _dragData: {
                                         ...{
                                             type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE,
@@ -5142,10 +5172,10 @@ class AtoDefaultGojsEditor {
             //           panel.background = 'transparent';
             //       },
         }, this.$(go.Shape, 'Ellipse', {
-            fill: 'white', // Background color of the circle
+            fill: 'white',
             strokeWidth: 2,
-            stroke: '#919CA5', // Border color of the circle
-            width: 40, // Match the panel's width
+            stroke: '#919CA5',
+            width: 40,
             height: 40, // Match the panel's height
         })
         // this.$(
@@ -5199,7 +5229,7 @@ class AtoDefaultGojsEditor {
             toSpot: spot,
             toLinkable: input,
             cursor: this._initialOptions.isReadOnly ? '' : 'pointer',
-            alignmentFocus: go.Spot.Center, // tập trung vào trung tâm của Panel
+            alignmentFocus: go.Spot.Center,
             mouseEnter: this._initialOptions.isReadOnly
                 ? null
                 : (e, panel) => {
@@ -5267,9 +5297,9 @@ class AtoDefaultGojsEditor {
         }), this.$(go.TextBlock, {
             name: 'textBlock',
             margin: 4,
-            text: '\uf0da', // Mã Unicode tương ứng với fa-caret-left
+            text: '\uf0da',
             font: '900 12px "Font Awesome 6 Pro"',
-            stroke: 'white', // Đặt màu chữ thành màu trắng
+            stroke: 'white',
             cursor: 'pointer',
             visible: false,
         }, new go.Binding('text', 'name', (_) => {
@@ -5664,7 +5694,7 @@ class AtoDefaultGojsEditor {
             }, new go.Binding('text', '', (data, panel) => {
                 return data?.name;
             }), new go.Binding('maxSize', '', (data, panel) => {
-                return data?.maxSizeNameParam ?? Infinity;
+                return data?.maxSizeNameParam;
             })), this.$(go.Panel, 'Table', {
                 column: 1,
                 margin: 2,
@@ -5697,7 +5727,7 @@ class AtoDefaultGojsEditor {
                 return data?.value;
             }), new go.Binding('stroke', '', (data) => {
                 if (!this._initialOptions.isReadOnly) {
-                    return 'transparent';
+                    return;
                 }
                 return data.color;
             }), new go.Binding('maxSize', '', (data) => {
@@ -6135,7 +6165,7 @@ class AtoDefaultGojsEditor {
                         name: 0,
                         color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
                     },
-                    click: self.addItemOnGroupZone, // defined below, to support a click on the button
+                    click: self.addItemOnGroupZone,
                     'ButtonBorder.strokeWidth': 0,
                     'ButtonBorder.fill': 'white',
                 }, this.$(go.TextBlock, {
@@ -6681,12 +6711,12 @@ class AtoDefaultGojsEditor {
             this._subscriptionList.add(el);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoDefaultGojsEditor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: AtoDefaultGojsEditor, inputs: { linkValidation: "linkValidation", initialOptions: "initialOptions", editor: "editor", isShowNodeInfo: "isShowNodeInfo", plantSatus: "plantSatus" }, outputs: { onModelChangeListenerEvent: "onModelChangeListenerEvent", onClickInfoButton: "onClickInfoButton", onOpenWizard: "onOpenWizard", onOpenDetail: "onOpenDetail", onOpenAssetParameter: "onOpenAssetParameter", onOpenInsightMapping: "onOpenInsightMapping", onHoverInfoButton: "onHoverInfoButton", onHoverAlert: "onHoverAlert", onDoubleClickNode: "onDoubleClickNode", onOpenChangeIcon: "onOpenChangeIcon", onClickCompoent: "onClickCompoent", callbackImageTopology: "callbackImageTopology", onClikParamOfTable: "onClikParamOfTable", onDeleteNode: "onDeleteNode", onUndo: "onUndo", onRename: "onRename" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoDefaultGojsEditor, decorators: [{
+AtoDefaultGojsEditor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoDefaultGojsEditor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AtoDefaultGojsEditor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoDefaultGojsEditor, inputs: { linkValidation: "linkValidation", initialOptions: "initialOptions", editor: "editor", isShowNodeInfo: "isShowNodeInfo", plantSatus: "plantSatus" }, outputs: { onModelChangeListenerEvent: "onModelChangeListenerEvent", onClickInfoButton: "onClickInfoButton", onOpenWizard: "onOpenWizard", onOpenDetail: "onOpenDetail", onOpenAssetParameter: "onOpenAssetParameter", onOpenInsightMapping: "onOpenInsightMapping", onHoverInfoButton: "onHoverInfoButton", onHoverAlert: "onHoverAlert", onDoubleClickNode: "onDoubleClickNode", onOpenChangeIcon: "onOpenChangeIcon", onClickCompoent: "onClickCompoent", callbackImageTopology: "callbackImageTopology", onClikParamOfTable: "onClikParamOfTable", onDeleteNode: "onDeleteNode", onUndo: "onUndo", onRename: "onRename" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoDefaultGojsEditor, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTrigger: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { menuTrigger: [{
                 type: ViewChild,
                 args: ['menuTrigger']
             }], linkValidation: [{
@@ -6814,10 +6844,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 })(AtoDefaultGojsEditor || (AtoDefaultGojsEditor = {}));
 
 class AtoLoadingDirective {
-    el;
-    renderer;
-    appLoading;
-    spinnerWrapper;
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
@@ -6858,31 +6884,30 @@ class AtoLoadingDirective {
             this.renderer.removeChild(this.el.nativeElement, this.spinnerWrapper);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: { appLoading: "appLoading" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoLoadingDirective, decorators: [{
+AtoLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+AtoLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: { appLoading: "appLoading" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoLoadingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[atoLoading]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { appLoading: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { appLoading: [{
                 type: Input
             }] } });
 
 class AtoFlowDiagramLibComponent extends AtoDefaultGojsEditor {
-    myDiagramDivTemp;
-    _data = null;
     set data(v) {
         this._data = v;
         this.loadDiagram();
     }
-    isLoading = false;
     get data() {
         return this._data;
     }
     constructor(_elRef) {
         super(_elRef);
+        this._data = null;
+        this.isLoading = false;
         this.actions = [
             AtoDefaultGojsEditor.ACTIONS[AtoDefaultGojsEditor.ENUM_ACTIONS.DETAILS],
             AtoDefaultGojsEditor.ACTIONS[AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE],
@@ -6904,13 +6929,13 @@ class AtoFlowDiagramLibComponent extends AtoDefaultGojsEditor {
     findNodeForKey(key) {
         this.myDiagram.select(this.myDiagram.findNodeForKey(key));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoFlowDiagramLibComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: { data: "data", isLoading: "isLoading" }, viewQueries: [{ propertyName: "myDiagramDivTemp", first: true, predicate: ["myDiagramDivTemp"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" atoLoading [appLoading]=\"data === null || !!isLoading\">\n    <div class=\"w-100 h-100 d-flex\">\n        <!-- <button\n            id=\"actionMenuId\"\n            class=\"invisible-btn\"\n            mat-button\n            [matMenuTriggerFor]=\"menu\"\n            #menuTrigger=\"matMenuTrigger\"\n        ></button>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of actions\" (click)=\"item?.onClick($event)\">\n                <div class=\"d-flex flex-gap-2\">\n                    <div><i class=\"{{ item?.iconClassName }}\"></i></div>\n                    <div>{{ item?.name }}</div>\n                </div>\n            </button>\n        </mat-menu> -->\n\n        <div #myDiagramDivTemp class=\"flex-grow-1 {{myDiagramDiv}}\"></div>\n        <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <!-- <nz-empty nzNotFoundImage=\"simple\"></nz-empty> -->\n            No Data\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoFlowDiagramLibComponent, decorators: [{
+AtoFlowDiagramLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoFlowDiagramLibComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AtoFlowDiagramLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: { data: "data", isLoading: "isLoading" }, viewQueries: [{ propertyName: "myDiagramDivTemp", first: true, predicate: ["myDiagramDivTemp"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" atoLoading [appLoading]=\"data === null || !!isLoading\">\n    <div class=\"w-100 h-100 d-flex\">\n        <!-- <button\n            id=\"actionMenuId\"\n            class=\"invisible-btn\"\n            mat-button\n            [matMenuTriggerFor]=\"menu\"\n            #menuTrigger=\"matMenuTrigger\"\n        ></button>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of actions\" (click)=\"item?.onClick($event)\">\n                <div class=\"d-flex flex-gap-2\">\n                    <div><i class=\"{{ item?.iconClassName }}\"></i></div>\n                    <div>{{ item?.name }}</div>\n                </div>\n            </button>\n        </mat-menu> -->\n\n        <div #myDiagramDivTemp class=\"flex-grow-1 {{myDiagramDiv}}\"></div>\n        <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <!-- <nz-empty nzNotFoundImage=\"simple\"></nz-empty> -->\n            No Data\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoFlowDiagramLibComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ato-flow-diagram-lib', template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" atoLoading [appLoading]=\"data === null || !!isLoading\">\n    <div class=\"w-100 h-100 d-flex\">\n        <!-- <button\n            id=\"actionMenuId\"\n            class=\"invisible-btn\"\n            mat-button\n            [matMenuTriggerFor]=\"menu\"\n            #menuTrigger=\"matMenuTrigger\"\n        ></button>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of actions\" (click)=\"item?.onClick($event)\">\n                <div class=\"d-flex flex-gap-2\">\n                    <div><i class=\"{{ item?.iconClassName }}\"></i></div>\n                    <div>{{ item?.name }}</div>\n                </div>\n            </button>\n        </mat-menu> -->\n\n        <div #myDiagramDivTemp class=\"flex-grow-1 {{myDiagramDiv}}\"></div>\n        <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <!-- <nz-empty nzNotFoundImage=\"simple\"></nz-empty> -->\n            No Data\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { myDiagramDivTemp: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { myDiagramDivTemp: [{
                 type: ViewChild,
                 args: ['myDiagramDivTemp']
             }], data: [{
@@ -6990,6 +7015,35 @@ var ENUM_ASSET_PARAMETERS;
     ENUM_ASSET_PARAMETERS["SI_IN_STEAM"] = "Si in Steam";
     ENUM_ASSET_PARAMETERS["SI_IN_BOILER"] = "Si in Boiler";
     ENUM_ASSET_PARAMETERS["PH_IN_BOILER"] = "pH in Boiler";
+    // For Immersed UF
+    ENUM_ASSET_PARAMETERS["FLOW_SYSTEMKPIS_PERMEABILITY_BP_TC"] = "Permeability BP (TC)";
+    ENUM_ASSET_PARAMETERS["FLOW_SYSTEMKPIS_PERMEATE_FLUX"] = "Permeate Flux";
+    ENUM_ASSET_PARAMETERS["FLOW_UF_TMP_BEFORE_BACK_PULSE"] = "Flow_UF_TMP_Before_Back_Pulse";
+    ENUM_ASSET_PARAMETERS["FLOW_UF_TMP_AFTER_BACK_PULSE"] = "Flow_UF_TMP_After_Back_Pulse";
+    ENUM_ASSET_PARAMETERS["FLOW_BACKPULSE_FLOW_RATE"] = "Flow_Backpulse_FlowRate";
+    ENUM_ASSET_PARAMETERS["FLOW_BACKPULSE_TMP"] = "Flow_Backpulse_TMP";
+    ENUM_ASSET_PARAMETERS["FLOW_PERMEATE_FLOW_RATE"] = "Flow_Permeate_FlowRate";
+    ENUM_ASSET_PARAMETERS["FLOW_FEED_FLOW_RATE"] = "Flow_Feed_FlowRate";
+    ENUM_ASSET_PARAMETERS["CHEMISTRY_SYSTEMKPIS_PERMEATE_TURBIDITY"] = "Chemistry_SystemKPIs_Permeate_Turbidity";
+    ENUM_ASSET_PARAMETERS["CHEMISTRY_UF_SYSTEM_RECOVERY"] = "Chemistry_UF_System_Recovery";
+    ENUM_ASSET_PARAMETERS["CHEMISTRY_UF_LEAP_STATUS"] = "Chemistry_UF_Leap_Status";
+    ENUM_ASSET_PARAMETERS["CHEMISTRY_BACKPULSE_FLOW_RATE"] = "Chemistry_Backpulse_FlowRate";
+    ENUM_ASSET_PARAMETERS["CHEMISTRY_BACKPULSE_TMP"] = "Chemistry_Backpulse_TMP";
+    ENUM_ASSET_PARAMETERS["CHEMISTRY_PERMEATE_TURBIDITY"] = "Chemistry_Permeate_Turbidity";
+    ENUM_ASSET_PARAMETERS["CHEMISTRY_PERMEATE_TEMPERATURE"] = "Chemistry_Permeate_Temperature";
+    ENUM_ASSET_PARAMETERS["CHEMISTRY_FEED_TURBIDITY"] = "Chemistry_Feed_Turbidity";
+    // For RO
+    // Flow
+    ENUM_ASSET_PARAMETERS["NORMAL_PRESSURE_DROP"] = "Normal Pressure Drop";
+    ENUM_ASSET_PARAMETERS["NORMAL_PRESSURE_FLOW_RATE"] = "Normal Pressure Flow Rate";
+    ENUM_ASSET_PARAMETERS["CONDENSATE_PRESSURE"] = "Condensate Pressure";
+    ENUM_ASSET_PARAMETERS["PRESSURE"] = "Pressure";
+    ENUM_ASSET_PARAMETERS["DIFFERENTIAL_PRESSURE"] = "Differential Pressure";
+    ENUM_ASSET_PARAMETERS["TDS"] = "TDS";
+    ENUM_ASSET_PARAMETERS["CONDUCTIVITY"] = "Conductivity";
+    ENUM_ASSET_PARAMETERS["TEMPERATURE"] = "Temperature";
+    ENUM_ASSET_PARAMETERS["REJECTION_RATE"] = "Rejection Rate";
+    ENUM_ASSET_PARAMETERS["NORMALIZED_REJECTION_RATE"] = "Normalized Rejection Rate";
 })(ENUM_ASSET_PARAMETERS || (ENUM_ASSET_PARAMETERS = {}));
 var WATER_SYSTEMS_NAME;
 (function (WATER_SYSTEMS_NAME) {
@@ -7019,6 +7073,41 @@ var WATER_SYSTEMS_NAME;
     WATER_SYSTEMS_NAME["BOILER_WATER__CHEMISTRY"] = "Boiler Water Chemistry";
     WATER_SYSTEMS_NAME["STEAM_LOSS"] = "Steam Loss";
     WATER_SYSTEMS_NAME["BLOWDOWN"] = "Blowdown";
+    // For Immersed UF
+    WATER_SYSTEMS_NAME["IMMERSED_UF_SYSTEM_KPIS"] = "System KPIs";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_SYSTEM_KPIS__FLOW"] = "System KPIs Flow";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_SYSTEM_KPIS__CHEMISTRY"] = "System KPIs Chemistry";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_UF"] = "UF";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_UF__FLOW"] = "UF Flow";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_UF__CHEMISTRY"] = "UF Chemistry";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_BACK_PULSE"] = "Backpulse";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_BACK_PULSE__FLOW"] = "Backpulse Flow";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_BACK_PULSE__CHEMISTRY"] = "Backpulse Chemistry";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_PERMEATE"] = "Permeate";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_PERMEATE__FLOW"] = "Permeate Flow";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_PERMEATE__CHEMISTRY"] = "Permeate Chemistry";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_FEED"] = "Feed";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_FEED__FLOW"] = "Feed Flow";
+    WATER_SYSTEMS_NAME["IMMERSED_UF_FEED__CHEMISTRY"] = "Feed Chemistry";
+    // For RO
+    WATER_SYSTEMS_NAME["FEED"] = "Feed";
+    WATER_SYSTEMS_NAME["RO"] = "RO";
+    WATER_SYSTEMS_NAME["CONCENTRATE"] = "Concentrate";
+    WATER_SYSTEMS_NAME["PERMEATE"] = "Permeate";
+    WATER_SYSTEMS_NAME["PRE_FILTER"] = "Pre-filter";
+    WATER_SYSTEMS_NAME["HP_PUMP"] = "HP Pump";
+    WATER_SYSTEMS_NAME["RO_FEED__FLOW"] = "Feed Flow";
+    WATER_SYSTEMS_NAME["RO_SYSTEM_KPIS__FLOW"] = "System KPIs Flow";
+    WATER_SYSTEMS_NAME["RO_RO__FLOW"] = "RO Flow";
+    WATER_SYSTEMS_NAME["RO_CONCENTRATE__FLOW"] = "Concentrate Flow";
+    WATER_SYSTEMS_NAME["RO_PERMEATE__FLOW"] = "Permeate Flow";
+    WATER_SYSTEMS_NAME["RO_PRE_FILTER__FLOW"] = "Pre-filter Flow";
+    WATER_SYSTEMS_NAME["RO_HP_PUMP__FLOW"] = "HP Pump Flow";
+    WATER_SYSTEMS_NAME["RO_FEED__CHEMISTRY"] = "Feed Chemistry";
+    WATER_SYSTEMS_NAME["RO_RO__CHEMISTRY"] = "RO Chemistry";
+    WATER_SYSTEMS_NAME["RO_PERMEATE__CHEMISTRY"] = "Permeate Chemistry";
+    WATER_SYSTEMS_NAME["RO_SYSTEM_KPIS__CHEMISTRY"] = "System KPIs Chemistry";
+    WATER_SYSTEMS_NAME["RO_CONCENTRATE__CHEMISTRY"] = "Concentrate Chemistry";
 })(WATER_SYSTEMS_NAME || (WATER_SYSTEMS_NAME = {}));
 const DATA_ASSET_PARAMETER_FIELDS = {
     [ENUM_ASSET_PARAMETERS.FEED_FLOW_RATE]: {
@@ -7264,99 +7353,410 @@ const DATA_ASSET_PARAMETER_FIELDS = {
         name: ENUM_ASSET_PARAMETERS.PH_IN_BOILER,
         key: ENUM_ASSET_PARAMETERS.PH_IN_BOILER,
     },
+    // For Immersed UF
+    [ENUM_ASSET_PARAMETERS.FLOW_SYSTEMKPIS_PERMEABILITY_BP_TC]: {
+        name: ENUM_ASSET_PARAMETERS.FLOW_SYSTEMKPIS_PERMEABILITY_BP_TC,
+        key: ENUM_ASSET_PARAMETERS.FLOW_SYSTEMKPIS_PERMEABILITY_BP_TC,
+    },
+    [ENUM_ASSET_PARAMETERS.FLOW_SYSTEMKPIS_PERMEATE_FLUX]: {
+        name: ENUM_ASSET_PARAMETERS.FLOW_SYSTEMKPIS_PERMEATE_FLUX,
+        key: ENUM_ASSET_PARAMETERS.FLOW_SYSTEMKPIS_PERMEATE_FLUX,
+    },
+    [ENUM_ASSET_PARAMETERS.FLOW_UF_TMP_BEFORE_BACK_PULSE]: {
+        name: 'TMP (Before Back Pulse)',
+        key: ENUM_ASSET_PARAMETERS.FLOW_UF_TMP_BEFORE_BACK_PULSE,
+    },
+    [ENUM_ASSET_PARAMETERS.FLOW_UF_TMP_AFTER_BACK_PULSE]: {
+        name: 'TMP (After Back Pulse)',
+        key: ENUM_ASSET_PARAMETERS.FLOW_UF_TMP_AFTER_BACK_PULSE,
+    },
+    [ENUM_ASSET_PARAMETERS.FLOW_BACKPULSE_FLOW_RATE]: {
+        name: 'Flow Rate',
+        key: ENUM_ASSET_PARAMETERS.FLOW_BACKPULSE_FLOW_RATE,
+    },
+    [ENUM_ASSET_PARAMETERS.FLOW_BACKPULSE_TMP]: {
+        name: 'TMP',
+        key: ENUM_ASSET_PARAMETERS.FLOW_BACKPULSE_TMP,
+    },
+    [ENUM_ASSET_PARAMETERS.FLOW_PERMEATE_FLOW_RATE]: {
+        name: 'Flow Rate',
+        key: ENUM_ASSET_PARAMETERS.FLOW_PERMEATE_FLOW_RATE,
+    },
+    [ENUM_ASSET_PARAMETERS.FLOW_FEED_FLOW_RATE]: {
+        name: 'Flow Rate',
+        key: ENUM_ASSET_PARAMETERS.FLOW_FEED_FLOW_RATE,
+    },
+    [ENUM_ASSET_PARAMETERS.CHEMISTRY_SYSTEMKPIS_PERMEATE_TURBIDITY]: {
+        name: 'Permeate Turbidity',
+        key: ENUM_ASSET_PARAMETERS.CHEMISTRY_SYSTEMKPIS_PERMEATE_TURBIDITY,
+    },
+    [ENUM_ASSET_PARAMETERS.CHEMISTRY_UF_SYSTEM_RECOVERY]: {
+        name: 'System Recovery',
+        key: ENUM_ASSET_PARAMETERS.CHEMISTRY_UF_SYSTEM_RECOVERY,
+    },
+    [ENUM_ASSET_PARAMETERS.CHEMISTRY_UF_LEAP_STATUS]: {
+        name: 'Leap Status',
+        key: ENUM_ASSET_PARAMETERS.CHEMISTRY_UF_LEAP_STATUS,
+    },
+    [ENUM_ASSET_PARAMETERS.CHEMISTRY_BACKPULSE_FLOW_RATE]: {
+        name: 'Flow Rate',
+        key: ENUM_ASSET_PARAMETERS.CHEMISTRY_BACKPULSE_FLOW_RATE,
+    },
+    [ENUM_ASSET_PARAMETERS.CHEMISTRY_BACKPULSE_TMP]: {
+        name: 'TMP',
+        key: ENUM_ASSET_PARAMETERS.CHEMISTRY_BACKPULSE_TMP,
+    },
+    [ENUM_ASSET_PARAMETERS.CHEMISTRY_PERMEATE_TURBIDITY]: {
+        name: 'Turbidity',
+        key: ENUM_ASSET_PARAMETERS.CHEMISTRY_PERMEATE_TURBIDITY,
+    },
+    [ENUM_ASSET_PARAMETERS.CHEMISTRY_PERMEATE_TEMPERATURE]: {
+        name: 'Temperature',
+        key: ENUM_ASSET_PARAMETERS.CHEMISTRY_PERMEATE_TEMPERATURE,
+    },
+    [ENUM_ASSET_PARAMETERS.CHEMISTRY_FEED_TURBIDITY]: {
+        name: 'Turbidity',
+        key: ENUM_ASSET_PARAMETERS.CHEMISTRY_FEED_TURBIDITY,
+    },
+    // For RO
+    [ENUM_ASSET_PARAMETERS.NORMAL_PRESSURE_DROP]: {
+        name: ENUM_ASSET_PARAMETERS.NORMAL_PRESSURE_DROP,
+        key: ENUM_ASSET_PARAMETERS.NORMAL_PRESSURE_DROP,
+    },
+    [ENUM_ASSET_PARAMETERS.NORMAL_PRESSURE_FLOW_RATE]: {
+        name: ENUM_ASSET_PARAMETERS.NORMAL_PRESSURE_FLOW_RATE,
+        key: ENUM_ASSET_PARAMETERS.NORMAL_PRESSURE_FLOW_RATE,
+    },
+    [ENUM_ASSET_PARAMETERS.PRESSURE]: {
+        name: ENUM_ASSET_PARAMETERS.PRESSURE,
+        key: ENUM_ASSET_PARAMETERS.PRESSURE,
+    },
+    [ENUM_ASSET_PARAMETERS.DIFFERENTIAL_PRESSURE]: {
+        name: ENUM_ASSET_PARAMETERS.DIFFERENTIAL_PRESSURE,
+        key: ENUM_ASSET_PARAMETERS.DIFFERENTIAL_PRESSURE,
+    },
+    [ENUM_ASSET_PARAMETERS.TDS]: {
+        name: ENUM_ASSET_PARAMETERS.TDS,
+        key: ENUM_ASSET_PARAMETERS.TDS,
+    },
+    [ENUM_ASSET_PARAMETERS.CONDUCTIVITY]: {
+        name: ENUM_ASSET_PARAMETERS.CONDUCTIVITY,
+        key: ENUM_ASSET_PARAMETERS.CONDUCTIVITY,
+    },
+    [ENUM_ASSET_PARAMETERS.TEMPERATURE]: {
+        name: ENUM_ASSET_PARAMETERS.TEMPERATURE,
+        key: ENUM_ASSET_PARAMETERS.TEMPERATURE,
+    },
+    [ENUM_ASSET_PARAMETERS.CONDUCTIVITY]: {
+        name: ENUM_ASSET_PARAMETERS.CONDUCTIVITY,
+        key: ENUM_ASSET_PARAMETERS.CONDUCTIVITY,
+    },
+    [ENUM_ASSET_PARAMETERS.REJECTION_RATE]: {
+        name: ENUM_ASSET_PARAMETERS.REJECTION_RATE,
+        key: ENUM_ASSET_PARAMETERS.REJECTION_RATE,
+    },
+    [ENUM_ASSET_PARAMETERS.NORMALIZED_REJECTION_RATE]: {
+        name: ENUM_ASSET_PARAMETERS.NORMALIZED_REJECTION_RATE,
+        key: ENUM_ASSET_PARAMETERS.NORMALIZED_REJECTION_RATE,
+    },
 };
-const DATA_WATER_SYSTEMS = {
-    [WATER_SYSTEMS_NAME.EVAPORATION_LOSS]: {
-        title: WATER_SYSTEMS_NAME.EVAPORATION_LOSS,
+const STYLE_TABLE_PARAM = {
+    FLAMINGO: {
         color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
         borderTable: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
         bgColor: AtoGojsEditorModel.ENUM_COLORS.SNOW,
     },
-    [WATER_SYSTEMS_NAME.WARMER_WATER]: {
-        title: WATER_SYSTEMS_NAME.WARMER_WATER,
+    CARROT_ORANGE: {
         color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
         borderTable: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
         bgColor: AtoGojsEditorModel.ENUM_COLORS.OLD_LACE,
     },
+    CERULEAN: {
+        color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        borderTable: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        bgColor: AtoGojsEditorModel.ENUM_COLORS.CERULEAN_ALICE_BLUE,
+    },
+    FOUNTAIN_BLUE: {
+        color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+    },
+    LIGHT_SKY_BLUE_2: {
+        color: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
+        borderTable: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
+        bgColor: AtoGojsEditorModel.ENUM_COLORS.DANUBE_ALICE_BLUE,
+    },
+    // REGENT_ST_BLUE: { // #87cee7
+    //   color: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
+    //   borderTable: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
+    //   bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+    // },
+    MEDIUM_RED_VIOLET: {
+        color: AtoGojsEditorModel.ENUM_COLORS.MEDIUM_RED_VIOLET,
+        borderTable: AtoGojsEditorModel.ENUM_COLORS.MEDIUM_RED_VIOLET,
+        bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+    },
+    // BLUE: { // #81B8FF
+    //   color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+    //   borderTable: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+    //   bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+    // }
+    ICE_COLD: {
+        color: AtoGojsEditorModel.ENUM_COLORS.ICE_COLD,
+        borderTable: AtoGojsEditorModel.ENUM_COLORS.ICE_COLD,
+        bgColor: AtoGojsEditorModel.ENUM_COLORS.MINT_CREAM,
+    },
+};
+const DATA_WATER_SYSTEMS = {
+    [WATER_SYSTEMS_NAME.EVAPORATION_LOSS]: {
+        title: WATER_SYSTEMS_NAME.EVAPORATION_LOSS,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.SNOW,
+        ...STYLE_TABLE_PARAM.FLAMINGO
+    },
+    [WATER_SYSTEMS_NAME.WARMER_WATER]: {
+        title: WATER_SYSTEMS_NAME.WARMER_WATER,
+        // color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.OLD_LACE,
+        ...STYLE_TABLE_PARAM.CARROT_ORANGE
+    },
     [WATER_SYSTEMS_NAME.BLOWDOWN_WATER]: {
         title: WATER_SYSTEMS_NAME.BLOWDOWN_WATER,
-        color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.OLD_LACE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.OLD_LACE,
+        ...STYLE_TABLE_PARAM.CARROT_ORANGE
     },
     [WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW]: {
         title: WATER_SYSTEMS_NAME.MAKEUP_WATER,
-        color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.CERULEAN_ALICE_BLUE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.CERULEAN_ALICE_BLUE,
+        ...STYLE_TABLE_PARAM.CERULEAN
     },
     [WATER_SYSTEMS_NAME.MAKEUP_WATER__CHEMISTRY]: {
         title: WATER_SYSTEMS_NAME.MAKEUP_WATER,
-        color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.CERULEAN_ALICE_BLUE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.CERULEAN_ALICE_BLUE,
+        ...STYLE_TABLE_PARAM.CERULEAN
     },
     [WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS]: {
         title: WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS,
-        color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
     },
     [WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY]: {
         title: WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY,
-        color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
     },
     [WATER_SYSTEMS_NAME.SYSTEM_KPIS]: {
         title: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
-        color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
     },
     // For Boiler
     [WATER_SYSTEMS_NAME.MAKEUP_WATER]: {
         title: WATER_SYSTEMS_NAME.MAKEUP_WATER,
-        color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.CERULEAN_ALICE_BLUE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.CERULEAN_ALICE_BLUE,
+        ...STYLE_TABLE_PARAM.CERULEAN
     },
     [WATER_SYSTEMS_NAME.CONDENSATE_RETURN]: {
         title: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
-        color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
     },
     [WATER_SYSTEMS_NAME.STEAM]: {
         title: WATER_SYSTEMS_NAME.STEAM,
-        color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.SNOW,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.SNOW,
+        ...STYLE_TABLE_PARAM.FLAMINGO
     },
     [WATER_SYSTEMS_NAME.BOILER_FEED_WATER]: {
         title: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
-        color: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.DANUBE_ALICE_BLUE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.DANUBE_ALICE_BLUE,
+        ...STYLE_TABLE_PARAM.LIGHT_SKY_BLUE_2
     },
     [WATER_SYSTEMS_NAME.BOILER_WATER]: {
         title: WATER_SYSTEMS_NAME.BOILER_WATER,
-        color: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
-        borderTable: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
-        bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
     },
     [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,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.SNOW,
+        ...STYLE_TABLE_PARAM.FLAMINGO
     },
     [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,
-    },
+        // color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.OLD_LACE,
+        ...STYLE_TABLE_PARAM.CARROT_ORANGE
+    },
+    // For Immersed UF
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS__FLOW]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS__CHEMISTRY]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_UF__FLOW]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_UF,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_UF__CHEMISTRY]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_UF,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE__FLOW]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.MEDIUM_RED_VIOLET,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.MEDIUM_RED_VIOLET,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.MEDIUM_RED_VIOLET
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE__CHEMISTRY]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.MEDIUM_RED_VIOLET,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.MEDIUM_RED_VIOLET,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.MEDIUM_RED_VIOLET
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE__FLOW]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.CERULEAN
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE__CHEMISTRY]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE,
+        // color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.CERULEAN
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_FEED__FLOW]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_FEED,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
+    },
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_FEED__CHEMISTRY]: {
+        title: WATER_SYSTEMS_NAME.IMMERSED_UF_FEED,
+        // color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // borderTable: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
+        // bgColor: AtoGojsEditorModel.ENUM_COLORS.AZURE,
+        ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
+    },
+    [WATER_SYSTEMS_NAME.FEED]: {
+        title: WATER_SYSTEMS_NAME.FEED,
+        ...STYLE_TABLE_PARAM.CERULEAN
+    },
+    [WATER_SYSTEMS_NAME.RO]: {
+        title: WATER_SYSTEMS_NAME.RO,
+        ...STYLE_TABLE_PARAM.MEDIUM_RED_VIOLET
+    },
+    [WATER_SYSTEMS_NAME.CONCENTRATE]: {
+        title: WATER_SYSTEMS_NAME.CONCENTRATE,
+        ...STYLE_TABLE_PARAM.CARROT_ORANGE
+    },
+    [WATER_SYSTEMS_NAME.PERMEATE]: {
+        title: WATER_SYSTEMS_NAME.PERMEATE,
+        ...STYLE_TABLE_PARAM.LIGHT_SKY_BLUE_2
+    },
+    [WATER_SYSTEMS_NAME.PRE_FILTER]: {
+        title: WATER_SYSTEMS_NAME.PRE_FILTER,
+        ...STYLE_TABLE_PARAM.ICE_COLD
+    },
+    [WATER_SYSTEMS_NAME.HP_PUMP]: {
+        title: WATER_SYSTEMS_NAME.HP_PUMP,
+        ...STYLE_TABLE_PARAM.ICE_COLD
+    },
+    // [WATER_SYSTEMS_NAME.RO_FEED__FLOW]: {
+    //   title: WATER_SYSTEMS_NAME.FEED,
+    //   ...STYLE_TABLE_PARAM.CERULEAN
+    // },
+    // [WATER_SYSTEMS_NAME.RO_SYSTEM_KPIS__FLOW]: {
+    //   title: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
+    //   ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
+    // },
+    // [WATER_SYSTEMS_NAME.RO_RO__FLOW]: {
+    //   title: WATER_SYSTEMS_NAME.RO,
+    //   ...STYLE_TABLE_PARAM.MEDIUM_RED_VIOLET
+    // },
+    // [WATER_SYSTEMS_NAME.RO_CONCENTRATE__FLOW]: {
+    //   title: WATER_SYSTEMS_NAME.CONCENTRATE,
+    //   ...STYLE_TABLE_PARAM.CARROT_ORANGE
+    // },
+    // [WATER_SYSTEMS_NAME.RO_PERMEATE__FLOW]: {
+    //   title: WATER_SYSTEMS_NAME.PERMEATE,
+    //   ...STYLE_TABLE_PARAM.LIGHT_SKY_BLUE_2
+    // },
+    // [WATER_SYSTEMS_NAME.RO_PRE_FILTER__FLOW]: {
+    //   title: WATER_SYSTEMS_NAME.PRE_FILTER,
+    //   ...STYLE_TABLE_PARAM.ICE_COLD
+    // },
+    // [WATER_SYSTEMS_NAME.RO_HP_PUMP__FLOW]: {
+    //   title: WATER_SYSTEMS_NAME.HP_PUMP,
+    //   ...STYLE_TABLE_PARAM.ICE_COLD
+    // },
+    // [WATER_SYSTEMS_NAME.RO_FEED__CHEMISTRY]: {
+    //   title: WATER_SYSTEMS_NAME.FEED,
+    //   ...STYLE_TABLE_PARAM.CERULEAN
+    // },
+    // [WATER_SYSTEMS_NAME.RO_RO__CHEMISTRY]: {
+    //   title: WATER_SYSTEMS_NAME.RO,
+    //   ...STYLE_TABLE_PARAM.MEDIUM_RED_VIOLET
+    // },
+    // [WATER_SYSTEMS_NAME.RO_PERMEATE__CHEMISTRY]: {
+    //   title: WATER_SYSTEMS_NAME.PERMEATE,
+    //   ...STYLE_TABLE_PARAM.LIGHT_SKY_BLUE_2
+    // },
+    // [WATER_SYSTEMS_NAME.RO_SYSTEM_KPIS__CHEMISTRY]: {
+    //   title: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
+    //   ...STYLE_TABLE_PARAM.FOUNTAIN_BLUE
+    // },
+    // [WATER_SYSTEMS_NAME.RO_CONCENTRATE__CHEMISTRY]: {
+    //   title: WATER_SYSTEMS_NAME.CONCENTRATE,
+    //   ...STYLE_TABLE_PARAM.CARROT_ORANGE
+    // },
 };
 const ASSET_CATEGORY_PARAMS = {
     [WATER_SYSTEMS_NAME.EVAPORATION_LOSS]: [
@@ -7466,6 +7866,96 @@ const ASSET_CATEGORY_PARAMS__BOILER = {
         DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
     ],
 };
+// For Immersed UF
+const ASSET_CATEGORY_PARAMS__IMMERSED_UF = {
+    // For Flow
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_SYSTEMKPIS_PERMEABILITY_BP_TC],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_SYSTEMKPIS_PERMEATE_FLUX],
+    ],
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_UF__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_UF_TMP_BEFORE_BACK_PULSE],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_UF_TMP_AFTER_BACK_PULSE],
+    ],
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_BACKPULSE_FLOW_RATE],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_BACKPULSE_TMP],
+    ],
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_PERMEATE_FLOW_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_FEED__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_FEED_FLOW_RATE],
+    ],
+    // For Chemistry
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CHEMISTRY_SYSTEMKPIS_PERMEATE_TURBIDITY],
+    ],
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_UF__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CHEMISTRY_UF_SYSTEM_RECOVERY],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CHEMISTRY_UF_LEAP_STATUS],
+    ],
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CHEMISTRY_BACKPULSE_FLOW_RATE],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CHEMISTRY_BACKPULSE_TMP],
+    ],
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CHEMISTRY_PERMEATE_TURBIDITY],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CHEMISTRY_PERMEATE_TEMPERATURE],
+    ],
+    [WATER_SYSTEMS_NAME.IMMERSED_UF_FEED__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CHEMISTRY_FEED_TURBIDITY],
+    ],
+};
+// For RO 
+const ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT = {
+    // For View Flow
+    [WATER_SYSTEMS_NAME.RO_FEED__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PRIMARY_PRESSURE],
+    ],
+    [WATER_SYSTEMS_NAME.RO_SYSTEM_KPIS__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.NORMAL_PRESSURE_DROP],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.NORMAL_PRESSURE_FLOW_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.RO_RO__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PRESSURE_DROP],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.SYSTEM_RECOVERY_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.RO_CONCENTRATE__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PRESSURE],
+    ],
+    [WATER_SYSTEMS_NAME.RO_PERMEATE__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.FLOW_RATE],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PRESSURE],
+    ],
+    [WATER_SYSTEMS_NAME.RO_PRE_FILTER__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.DIFFERENTIAL_PRESSURE],
+    ],
+    [WATER_SYSTEMS_NAME.RO_HP_PUMP__FLOW]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PRESSURE],
+    ],
+    [WATER_SYSTEMS_NAME.RO_FEED__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.TDS],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CONDUCTIVITY],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.TEMPERATURE],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PH],
+    ],
+    [WATER_SYSTEMS_NAME.RO_CONCENTRATE__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.CONDUCTIVITY],
+    ],
+    [WATER_SYSTEMS_NAME.RO_RO__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.REJECTION_RATE],
+    ],
+    [WATER_SYSTEMS_NAME.RO_PERMEATE__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.TDS],
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.PH],
+    ],
+    [WATER_SYSTEMS_NAME.RO_SYSTEM_KPIS__CHEMISTRY]: [
+        DATA_ASSET_PARAMETER_FIELDS[ENUM_ASSET_PARAMETERS.NORMALIZED_REJECTION_RATE],
+    ],
+};
 var COMPONENTS_GROUP_TYPE;
 (function (COMPONENTS_GROUP_TYPE) {
     COMPONENTS_GROUP_TYPE["INFLOW"] = "Inflow";
@@ -7689,138 +8179,324 @@ const ATO_COMPONENTS_GROUP_DATA = {
         nodeDataArray: [
             {
                 key: 93,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.MASS_BALANCE,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
                 group: 100,
-                loc: '830 10',
-                selectable: false,
-                value: 'NA',
-                font: 'bold 15px Arial',
-                colorValue: '',
-                tooltip: '',
+                loc: '0 0',
+                data: {
+                    quantity: 1,
+                    unit: 'm³',
+                },
+                name: 'top-left-marker',
+                color: '#a8438d',
             },
             {
                 key: 94,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
+                group: 100,
+                data: {
+                    quantity: 2,
+                    unit: 'm³',
+                },
+                name: 'bottom-right-marker',
+                color: '#a8438d',
+                extendedData: {
+                    loc: '650 580',
+                },
+                extendedDataResponsive: {
+                    loc: '700 300',
+                },
+            },
+            // For view Flow
+            {
+                // key: 132,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '20 10',
-                padding: new go.Margin(0, 0, 0, 20),
-                ...AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.CERULEAN],
+                loc: '10 310',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.FEED],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: [
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.FEED_FLOW_RATE,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.FEED_CONDUCTIVITY,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.FEED_TEMPERATURE,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.PRIMARY_PRESSURE,
-                        value: '',
-                        isEditable: true,
-                    },
-                ],
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_FEED__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.FEED,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
             },
             {
-                key: 95,
+                // key: 132,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '420 40',
-                ...AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.DANUBE],
+                loc: '10 10',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: [
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.REJECTION_RATE_SALT_PASSAGE,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.PRESSURE_DROP,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.SYSTEM_RECOVERY_RATE,
-                        value: '',
-                        isEditable: true,
-                    },
-                ],
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_SYSTEM_KPIS__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
             },
             {
-                key: 96,
+                // key: 132,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '590 150',
-                ...AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE],
+                loc: '300 10',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.RO],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: [
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.PERMEATE_FLOW_RATE,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.PERMEATE_CONDUCTIVITY,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.PERMEATE_PRESSURE,
-                        value: '',
-                        isEditable: true,
-                    },
-                ],
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_RO__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.RO,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
             },
             {
-                key: 97,
+                // key: 132,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '30 370',
-                ...AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.GALLIANO],
+                loc: '500 480',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.CONCENTRATE],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: [
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.CONCENTRATE_FLOW_RATE,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.CONCENTRATE_PRESSURE,
-                        value: '',
-                        isEditable: true,
-                    },
-                    {
-                        key: '',
-                        name: ENUM_ASSET_PARAMETERS.CONCENTRATE_CONDUCTIVITY,
-                        value: '',
-                        isEditable: true,
-                    },
-                ],
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_CONCENTRATE__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.CONCENTRATE,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                // key: 132,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '700 110',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.PERMEATE],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_PERMEATE__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.PERMEATE,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                // key: 132,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '560 210',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.PRE_FILTER],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_PRE_FILTER__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.PRE_FILTER,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                // key: 132,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '250 340',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.HP_PUMP],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_HP_PUMP__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.HP_PUMP,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            // For view Chemistry
+            {
+                // key: 132,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '10 310',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.FEED],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_FEED__CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.FEED,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                // key: 132,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '10 10',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_SYSTEM_KPIS__CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                // key: 132,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '300 10',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.RO],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_RO__CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.RO,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                // key: 132,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '500 480',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.CONCENTRATE],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_CONCENTRATE__CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.CONCENTRATE,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                // key: 132,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '700 110',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.PERMEATE],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT[WATER_SYSTEMS_NAME.RO_PERMEATE__CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.PERMEATE,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
             },
+            /// TODO
             {
                 key: 99,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE,
@@ -8542,7 +9218,8 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS]
+                    .map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
@@ -8550,7 +9227,8 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     extendedDataIsFromPlugin: {
                         maxSizeValue: 230,
                     },
-                })).concat(ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY].map((e) => ({
+                }))
+                    .concat(ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY].map((e) => ({
                     ...e,
                     value: `Mapping in "Cooling Water Chemistry" section`,
                     isEditable: false,
@@ -8633,11 +9311,12 @@ const ATO_COMPONENTS_GROUP_DATA = {
         ],
         linkDataArray: [],
     },
-    [AtoGojsEditorModel.ENUM_TYPES.BOILER]: {
+    [AtoGojsEditorModel.ENUM_TYPES.IMMERSED_UF_WATER_TREATMENTS]: {
         nodeDataArray: [
             {
+                key: 130,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
-                group: 100,
+                group: 150,
                 loc: '0 0',
                 data: {
                     quantity: 2222,
@@ -8647,8 +9326,9 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 color: '#a8438d',
             },
             {
+                key: 131,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
-                group: 100,
+                group: 150,
                 data: {
                     quantity: 3333,
                     unit: 'm³',
@@ -8664,19 +9344,20 @@ const ATO_COMPONENTS_GROUP_DATA = {
             },
             // For view Chemistry
             {
+                key: 132,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
-                loc: '10 310',
+                group: 150,
+                loc: '10 10',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER],
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS__CHEMISTRY],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.MAKEUP_WATER__CHEMISTRY].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS__CHEMISTRY].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
                     maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
@@ -8687,63 +9368,20 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 133,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
-                loc: '10 15',
-                padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS],
-                minSizeValue: new go.Size(100, NaN),
-                selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.SYSTEM_KPIS_STEAM].map((e) => ({
-                    ...e,
-                    value: `Mapping in "Steam" section`,
-                    isEditable: false,
-                    maxSizeValue: 220,
-                    waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
-                    isReadOnly: true,
-                    isFrom: ATO_MAPPER_FROM.PLUGIN,
-                    // font: '10px sans-serif',
-                    maxSizeNameParam: new go.Size(125, 15),
-                })).concat(ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.SYSTEM_KPIS_BOILER_WATER].map((e) => ({
-                    ...e,
-                    value: `Mapping in "Boiler Water" section`,
-                    isEditable: false,
-                    maxSizeValue: 220,
-                    waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
-                    isReadOnly: true,
-                    isFrom: ATO_MAPPER_FROM.PLUGIN,
-                    // font: '10px sans-serif',
-                    maxSizeNameParam: new go.Size(125, 15),
-                }))),
-                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
-                isFrom: ATO_MAPPER_FROM.PLUGIN,
-                extendedData: {
-                    visible: false,
-                },
-                extendedDataisFromPlugin: {
-                    visible: true,
-                },
-                extendedDataResponsive: {
-                    visible: false,
-                },
-                extendedDataisFromPluginResponsive: {
-                    visible: false,
-                },
-            },
-            {
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
-                loc: '400 15',
+                group: 150,
+                loc: '400 10',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.CONDENSATE_RETURN],
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_UF__CHEMISTRY],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.CONDENSATE_RETURN__CHEMISTRY].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_UF__CHEMISTRY].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
                     maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_UF,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
@@ -8754,19 +9392,20 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 134,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
-                loc: '840 70',
+                group: 150,
+                loc: '900 10',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.STEAM],
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE__CHEMISTRY],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.STEAM__CHEMISTRY].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE__CHEMISTRY].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
                     maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.STEAM,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
@@ -8777,19 +9416,20 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 135,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
-                loc: '460 520',
+                group: 150,
+                loc: '1000 250',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BOILER_FEED_WATER],
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE__CHEMISTRY],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BOILER_FEED_WATER__CHEMISTRY].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE__CHEMISTRY].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
                     maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
@@ -8800,19 +9440,20 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 136,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
-                loc: '920 250',
+                group: 150,
+                loc: '15 350',
                 padding: new go.Margin(0, 10, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BOILER_WATER],
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_FEED__CHEMISTRY],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BOILER_WATER].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_FEED__CHEMISTRY].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
                     maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.BOILER_WATER,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_FEED,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
@@ -8823,9 +9464,10 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 137,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE,
                 source: AtoGojsEditorModel.IMAGE_BOILER_PATH,
-                group: 100,
+                group: 150,
                 loc: '0 0',
                 selectable: false,
                 extendedData: {
@@ -8836,8 +9478,9 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 138,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
-                group: 100,
+                group: 150,
                 loc: '80 285',
                 name: WATER_SYSTEMS_NAME.MAKEUP_WATER,
                 color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
@@ -8850,8 +9493,9 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 139,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
-                group: 100,
+                group: 150,
                 loc: '300 17',
                 name: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
                 color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
@@ -8864,8 +9508,9 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 140,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
-                group: 100,
+                group: 150,
                 loc: '760 17',
                 name: WATER_SYSTEMS_NAME.STEAM,
                 color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
@@ -8878,8 +9523,9 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 141,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
-                group: 100,
+                group: 150,
                 loc: '490 400',
                 name: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
                 color: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
@@ -8892,8 +9538,9 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 142,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
-                group: 100,
+                group: 150,
                 loc: '920 160',
                 name: WATER_SYSTEMS_NAME.BOILER_WATER,
                 color: AtoGojsEditorModel.ENUM_COLORS.REGENT_ST_BLUE,
@@ -8907,19 +9554,20 @@ const ATO_COMPONENTS_GROUP_DATA = {
             },
             // For view Flow
             {
+                key: 143,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
-                loc: '15 330',
+                group: 150,
+                loc: '10 10',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER],
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS__FLOW],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS__FLOW].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
                     maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_SYSTEM_KPIS,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.FLOW,
                 extendedData: {
@@ -8930,19 +9578,20 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 144,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
-                loc: '230 50',
+                group: 150,
+                loc: '400 10',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.CONDENSATE_RETURN],
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_UF__FLOW],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.CONDENSATE_RETURN__FLOW].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_UF__FLOW].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
                     maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_UF,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.FLOW,
                 extendedData: {
@@ -8953,19 +9602,810 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 145,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
-                group: 100,
+                group: 150,
+                loc: '900 10',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE__FLOW],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_BACK_PULSE,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                key: 146,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 150,
+                loc: '1000 250',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE__FLOW],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_PERMEATE,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                key: 147,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 150,
+                loc: '15 350',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.IMMERSED_UF_FEED__FLOW],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__IMMERSED_UF[WATER_SYSTEMS_NAME.IMMERSED_UF_FEED__FLOW].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.IMMERSED_UF_FEED,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                key: 148,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 150,
+                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,
+                },
+            },
+            {
+                key: 149,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 150,
+                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,
+                },
+            },
+            {
+                key: 151,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 150,
+                loc: '760 17',
+                name: WATER_SYSTEMS_NAME.STEAM,
+                color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                },
+            },
+            {
+                key: 152,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 150,
+                loc: '490 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,
+                },
+            },
+            {
+                key: 153,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 150,
+                loc: '380 200',
+                name: WATER_SYSTEMS_NAME.STEAM_LOSS,
+                color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                },
+            },
+            {
+                key: 150,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.IMMERSED_UF_WATER_TREATMENTS,
+                isGroup: true,
+                name: 'Group',
+            },
+        ],
+        linkDataArray: [],
+    },
+    [AtoGojsEditorModel.ENUM_TYPES.BOILER]: {
+        nodeDataArray: [
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
+                group: 100,
+                loc: '0 0',
+                data: {
+                    quantity: 2222,
+                    unit: 'm³',
+                },
+                name: 'top-left-marker',
+                color: '#a8438d',
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
+                group: 100,
+                data: {
+                    quantity: 3333,
+                    unit: 'm³',
+                },
+                name: 'bottom-right-marker',
+                color: '#a8438d',
+                extendedData: {
+                    loc: '1220 660',
+                },
+                extendedDataResponsive: {
+                    loc: '700 300',
+                },
+            },
+            // For view Chemistry
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '10 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__CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '10 15',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.SYSTEM_KPIS_STEAM]
+                    .map((e) => ({
+                    ...e,
+                    value: `Mapping in "Steam" section`,
+                    isEditable: false,
+                    maxSizeValue: 220,
+                    waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
+                    isReadOnly: true,
+                    isFrom: ATO_MAPPER_FROM.PLUGIN,
+                    // font: '10px sans-serif',
+                    maxSizeNameParam: new go.Size(125, 15),
+                }))
+                    .concat(ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.SYSTEM_KPIS_BOILER_WATER].map((e) => ({
+                    ...e,
+                    value: `Mapping in "Boiler Water" section`,
+                    isEditable: false,
+                    maxSizeValue: 220,
+                    waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
+                    isReadOnly: true,
+                    isFrom: ATO_MAPPER_FROM.PLUGIN,
+                    // font: '10px sans-serif',
+                    maxSizeNameParam: new go.Size(125, 15),
+                }))),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                isFrom: ATO_MAPPER_FROM.PLUGIN,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataisFromPlugin: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+                extendedDataisFromPluginResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '400 15',
+                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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.STEAM,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '460 520',
+                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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '920 250',
+                padding: new go.Margin(0, 10, 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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.BOILER_WATER,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE,
+                source: AtoGojsEditorModel.IMAGE_BOILER_PATH,
+                group: 100,
+                loc: '0 0',
+                selectable: false,
+                extendedData: {
+                    margin: new go.Margin(150, 160, 0, 0),
+                },
+                extendedDataResponsive: {
+                    margin: new go.Margin(20, 20, 0, 0),
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '80 285',
+                name: WATER_SYSTEMS_NAME.MAKEUP_WATER,
+                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                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.CHEMISTRY,
+                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.CHEMISTRY,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '490 400',
+                name: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
+                color: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
+                    visible: false,
+                },
+                extendedDataResponsive: {
+                    visible: true,
+                },
+            },
+            {
+                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,
+                },
+            },
+            // For view Flow
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '15 330',
+                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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '230 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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
                 loc: '830 50',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.STEAM],
+                ...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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.STEAM,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '470 530',
+                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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '15 220',
+                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) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                    waterSystem: WATER_SYSTEMS_NAME.STEAM_LOSS,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                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) => ({
+                    ...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: '490 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: '380 200',
+                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: [],
+    },
+    [AtoGojsEditorModel.ENUM_TYPES.OTHER]: {
+        nodeDataArray: [
+            {
+                key: 90,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
+                name: 'Inflow',
+                value: '0 kl',
+                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+                group: 100,
+                loc: '0 140.5',
+            },
+            {
+                key: 91,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
+                name: 'Outflow',
+                value: '0 kl',
+                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+                group: 100,
+                loc: '300 134.5',
+            },
+            {
+                key: 92,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
+                name: 'Loss',
+                value: 'M',
+                color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+                group: 100,
+                colorValue: AtoGojsEditorModel.ENUM_COLORS.GRAY,
+                loc: '160.5 0',
+            },
+            {
+                key: 99,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.SPECIAL_OTHER,
+                group: 100,
+                loc: '92.5 95',
+            },
+            {
+                key: 100,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.OTHER,
+                isGroup: true,
+                name: 'Group',
+            },
+        ],
+        linkDataArray: [
+            { from: 90, to: 99, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
+            { from: 99, to: 91, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
+            { from: 99, to: 92, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
+        ],
+    },
+    [AtoGojsEditorModel.ENUM_TYPES.LANDSCAPING_IRRIGATION]: {
+        nodeDataArray: [
+            {
+                key: 90,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
+                name: 'Inflow',
+                value: '0 kl',
+                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+                group: 100,
+                loc: '0 140.5',
+            },
+            {
+                key: 91,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
+                name: 'Loss',
+                value: 'M',
+                color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
+                group: 100,
+                colorValue: AtoGojsEditorModel.ENUM_COLORS.GRAY,
+                loc: '300 140.5',
+            },
+            {
+                key: 99,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.SPECIAL_DISCHARGE,
+                group: 100,
+                loc: '92.5 95',
+            },
+            {
+                key: 100,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.LANDSCAPING_IRRIGATION,
+                isGroup: true,
+                name: 'Group',
+            },
+        ],
+        linkDataArray: [
+            { from: 90, to: 99, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
+            { from: 99, to: 91, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
+        ],
+    },
+    [AtoGojsEditorModel.ENUM_TYPES.PRESSURIZED_UF_WATER_TREATMENTS]: {
+        nodeDataArray: [
+            {
+                key: 86,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
+                group: 100,
+                loc: '0 0',
+                data: {
+                    quantity: 2222,
+                    unit: 'm³',
+                },
+                name: 'top-left-marker',
+                color: '#a8438d',
+            },
+            {
+                key: 87,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
+                group: 100,
+                data: {
+                    quantity: 3333,
+                    unit: 'm³',
+                },
+                name: 'bottom-right-marker',
+                color: '#a8438d',
+                extendedData: {
+                    loc: '1000 700',
+                },
+                extendedDataResponsive: {
+                    loc: '700 300',
+                },
+            },
+            {
+                key: 88,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                loc: '320 60',
+                padding: new go.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.EVAPORATION_LOSS],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.EVAPORATION_LOSS].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                })),
+                visible: true,
+                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                key: 89,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                padding: new go.Margin(0, 0, 0, 0),
+                loc: '30 350',
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.STEAM__FLOW].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
-                    maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.STEAM,
+                    maxSizeValue: 120,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.FLOW,
                 extendedData: {
@@ -8976,21 +10416,21 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 90,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '470 530',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BOILER_FEED_WATER],
+                loc: '10 270',
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER__CHEMISTRY],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BOILER_FEED_WATER__FLOW].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.MAKEUP_WATER__CHEMISTRY].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
-                    maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
+                    maxSizeValue: 120,
                 })),
-                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
                     visible: true,
                 },
@@ -8999,19 +10439,19 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 91,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '15 220',
                 padding: new go.Margin(0, 0, 0, 0),
-                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.STEAM_LOSS],
+                loc: '570 250',
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.WARMER_WATER],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.STEAM_LOSS].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.WARMER_WATER].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
-                    maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.STEAM_LOSS,
+                    maxSizeValue: 120,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.FLOW,
                 extendedData: {
@@ -9022,19 +10462,19 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 92,
                 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],
+                loc: '570 560',
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BLOWDOWN_WATER],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
-                dataTable: ASSET_CATEGORY_PARAMS__BOILER[WATER_SYSTEMS_NAME.BLOWDOWN].map((e) => ({
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.BLOWDOWN_WATER].map((e) => ({
                     ...e,
                     value: '',
                     isEditable: true,
-                    maxSizeValue: 140,
-                    waterSystem: WATER_SYSTEMS_NAME.BLOWDOWN,
+                    maxSizeValue: 120,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.FLOW,
                 extendedData: {
@@ -9045,40 +10485,109 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                key: 93,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '80 280',
-                name: WATER_SYSTEMS_NAME.MAKEUP_WATER,
-                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                padding: new go.Margin(0, 0, 0, 0),
+                loc: '450 20',
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 130,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
-                    visible: false,
+                    visible: true,
                 },
                 extendedDataResponsive: {
+                    visible: false,
+                },
+            },
+            {
+                key: 94,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                padding: new go.Margin(0, 0, 0, 0),
+                loc: '730 20',
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 130,
+                })),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
+                extendedData: {
                     visible: true,
                 },
+                extendedDataResponsive: {
+                    visible: false,
+                },
             },
             {
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                key: 95,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '300 17',
-                name: WATER_SYSTEMS_NAME.CONDENSATE_RETURN,
-                color: AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE,
-                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                padding: new go.Margin(0, 0, 0, 0),
+                loc: '10 20',
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS],
+                minSizeValue: new go.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS]
+                    .map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 130,
+                    extendedDataIsFromPlugin: {
+                        maxSizeValue: 230,
+                    },
+                }))
+                    .concat(ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: `Mapping in "Cooling Water Chemistry" section`,
+                    isEditable: false,
+                    maxSizeValue: 250,
+                    isReadOnly: true,
+                    isFrom: ATO_MAPPER_FROM.PLUGIN,
+                    // font: '10px sans-serif',
+                    visible: false,
+                }))),
+                assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
                 extendedData: {
+                    visible: true,
+                },
+                extendedDataResponsive: {
                     visible: false,
                 },
+            },
+            {
+                key: 96,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE,
+                source: AtoGojsEditorModel.IMAGE_COOLING_TOWER_PATH,
+                group: 100,
+                loc: '0 0',
+                selectable: false,
+                extendedData: {
+                    margin: new go.Margin(195, 20, 0, 0),
+                },
                 extendedDataResponsive: {
-                    visible: true,
+                    margin: new go.Margin(20, 20, 0, 0),
                 },
             },
             {
+                key: 97,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
                 group: 100,
-                loc: '760 17',
-                name: WATER_SYSTEMS_NAME.STEAM,
+                loc: '250 25',
+                name: 'Evaporation Loss',
                 color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
-                assetLayers: ATO_ASSET_LAYERS.FLOW,
                 extendedData: {
                     visible: false,
                 },
@@ -9087,12 +10596,12 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 98,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
                 group: 100,
-                loc: '490 400',
-                name: WATER_SYSTEMS_NAME.BOILER_FEED_WATER,
-                color: AtoGojsEditorModel.ENUM_COLORS.LIGHT_SKY_BLUE_2,
-                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                loc: '110 290',
+                name: 'Makeup Water',
+                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
                 extendedData: {
                     visible: false,
                 },
@@ -9101,12 +10610,12 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 },
             },
             {
+                key: 99,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
                 group: 100,
-                loc: '380 200',
-                name: WATER_SYSTEMS_NAME.STEAM_LOSS,
-                color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
-                assetLayers: ATO_ASSET_LAYERS.FLOW,
+                loc: '580 435',
+                name: 'Blowdown Water',
+                color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
                 extendedData: {
                     visible: false,
                 },
@@ -9116,116 +10625,30 @@ const ATO_COMPONENTS_GROUP_DATA = {
             },
             {
                 key: 100,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.BOILER,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PRESSURIZED_UF_WATER_TREATMENTS,
                 isGroup: true,
                 name: 'Group',
             },
         ],
         linkDataArray: [],
     },
-    [AtoGojsEditorModel.ENUM_TYPES.OTHER]: {
-        nodeDataArray: [
-            {
-                key: 90,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
-                name: 'Inflow',
-                value: '0 kl',
-                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-                group: 100,
-                loc: '0 140.5',
-            },
-            {
-                key: 91,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
-                name: 'Outflow',
-                value: '0 kl',
-                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-                group: 100,
-                loc: '300 134.5',
-            },
-            {
-                key: 92,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
-                name: 'Loss',
-                value: 'M',
-                color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
-                group: 100,
-                colorValue: AtoGojsEditorModel.ENUM_COLORS.GRAY,
-                loc: '160.5 0',
-            },
-            {
-                key: 99,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.SPECIAL_OTHER,
-                group: 100,
-                loc: '92.5 95',
-            },
-            {
-                key: 100,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.OTHER,
-                isGroup: true,
-                name: 'Group',
-            },
-        ],
-        linkDataArray: [
-            { from: 90, to: 99, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
-            { from: 99, to: 91, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
-            { from: 99, to: 92, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
-        ],
-    },
-    [AtoGojsEditorModel.ENUM_TYPES.LANDSCAPING_IRRIGATION]: {
-        nodeDataArray: [
-            {
-                key: 90,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
-                name: 'Inflow',
-                value: '0 kl',
-                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
-                group: 100,
-                loc: '0 140.5',
-            },
-            {
-                key: 91,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.DATA_BOX,
-                name: 'Loss',
-                value: 'M',
-                color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
-                group: 100,
-                colorValue: AtoGojsEditorModel.ENUM_COLORS.GRAY,
-                loc: '300 140.5',
-            },
-            {
-                key: 99,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.SPECIAL_DISCHARGE,
-                group: 100,
-                loc: '92.5 95',
-            },
-            {
-                key: 100,
-                type: AtoGojsEditorModel.ENUM_TEMPLATES.LANDSCAPING_IRRIGATION,
-                isGroup: true,
-                name: 'Group',
-            },
-        ],
-        linkDataArray: [
-            { from: 90, to: 99, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
-            { from: 99, to: 91, color: AtoGojsEditorModel.ENUM_COLORS.BLUE },
-        ],
-    },
 };
 
 class AtoAssetParamsViewComponent {
-    isEditView = false;
-    data = [];
-    clickParamTableRow = new EventEmitter();
+    constructor() {
+        this.isEditView = false;
+        this.data = [];
+        this.clickParamTableRow = new EventEmitter();
+    }
     onClickRowParam(itemTable) {
         if (this.isEditView && itemTable?.isEditable) {
             this.clickParamTableRow.emit(itemTable);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoAssetParamsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: { isEditView: "isEditView", data: "data" }, outputs: { clickParamTableRow: "clickParamTableRow" }, ngImport: i0, template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2\">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoAssetParamsViewComponent, decorators: [{
+AtoAssetParamsViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoAssetParamsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AtoAssetParamsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: { isEditView: "isEditView", data: "data" }, outputs: { clickParamTableRow: "clickParamTableRow" }, ngImport: i0, template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2\">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoAssetParamsViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ato-asset-params-view', template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2\">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"] }]
         }], propDecorators: { isEditView: [{
@@ -9237,22 +10660,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class AssetFlowComponent {
-    assetLayer;
-    gjFlowDiagramTemp;
-    assetParamsViewTemp;
-    selectedComponent;
-    systemType;
-    onClickParamOfTableEvent = new EventEmitter();
-    isUseBase64 = false;
-    isFrom;
-    $ = go.GraphObject.make;
-    options = {
-        layout: this.$(go.LayeredDigraphLayout, {
-        // direction: 0,
-        }),
-        // isReadOnly: true,
-    };
-    _flowData;
+    constructor() {
+        this.onClickParamOfTableEvent = new EventEmitter();
+        this.isUseBase64 = false;
+        this.$ = go.GraphObject.make;
+        this.options = {
+            layout: this.$(go.LayeredDigraphLayout, {
+            // direction: 0,
+            }),
+            // isReadOnly: true,
+        };
+    }
     set flowData(v) {
         this._flowData = v;
         this.updateDataTableAssetParams({ ...v, assetLayer: this.assetLayer });
@@ -9260,14 +10678,10 @@ class AssetFlowComponent {
     get flowData() {
         return this._flowData;
     }
-    // Reponsive
-    dataTableAssetParams;
     // @Input() isResponsiveView = false;
     get isResponsiveView() {
         return window.innerWidth < 1024;
     }
-    getFlowDataCallBack;
-    timeoutResizeWindow;
     onResize(event) {
         // Now only Support Cooling Tower Responsive
         if (this.timeoutResizeWindow) {
@@ -9364,10 +10778,10 @@ class AssetFlowComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AssetFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AssetFlowComponent, selector: "ato-asset-flow", inputs: { assetLayer: "assetLayer", selectedComponent: "selectedComponent", systemType: "systemType", isUseBase64: "isUseBase64", isFrom: "isFrom", flowData: "flowData", getFlowDataCallBack: "getFlowDataCallBack" }, outputs: { onClickParamOfTableEvent: "onClickParamOfTableEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "gjFlowDiagramTemp", first: true, predicate: AtoFlowDiagramLibComponent, descendants: true }, { propertyName: "assetParamsViewTemp", first: true, predicate: AtoAssetParamsViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: ["data", "isLoading"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }, { kind: "component", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: ["isEditView", "data"], outputs: ["clickParamTableRow"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AssetFlowComponent, decorators: [{
+AssetFlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssetFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AssetFlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AssetFlowComponent, selector: "ato-asset-flow", inputs: { assetLayer: "assetLayer", selectedComponent: "selectedComponent", systemType: "systemType", isUseBase64: "isUseBase64", isFrom: "isFrom", flowData: "flowData", getFlowDataCallBack: "getFlowDataCallBack" }, outputs: { onClickParamOfTableEvent: "onClickParamOfTableEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "gjFlowDiagramTemp", first: true, predicate: AtoFlowDiagramLibComponent, descendants: true }, { propertyName: "assetParamsViewTemp", first: true, predicate: AtoAssetParamsViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: ["data", "isLoading"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }, { kind: "component", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: ["isEditView", "data"], outputs: ["clickParamTableRow"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssetFlowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ato-asset-flow', template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"] }]
         }], propDecorators: { assetLayer: [{
@@ -9398,8 +10812,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class AtoNgVarDirective {
-    templateRef;
-    vcRef;
     set ngAtoVar(context) {
         this.context.$implicit = this.context.ngAtoVar = context;
         if (!this.hasView) {
@@ -9407,43 +10819,43 @@ class AtoNgVarDirective {
             this.hasView = true;
         }
     }
-    context = {
-        $implicit: null,
-        ngAtoVar: null,
-    };
-    hasView = false;
     constructor(templateRef, vcRef) {
         this.templateRef = templateRef;
         this.vcRef = vcRef;
+        this.context = {
+            $implicit: null,
+            ngAtoVar: null,
+        };
+        this.hasView = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoNgVarDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: AtoNgVarDirective, selector: "[ngAtoVar]", inputs: { ngAtoVar: "ngAtoVar" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoNgVarDirective, decorators: [{
+AtoNgVarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoNgVarDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+AtoNgVarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoNgVarDirective, selector: "[ngAtoVar]", inputs: { ngAtoVar: "ngAtoVar" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoNgVarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngAtoVar]',
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ngAtoVar: [{
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { ngAtoVar: [{
                 type: Input
             }] } });
 
 class AtoWaterLibModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibModule, declarations: [AtoWaterLibComponent,
-            AtoFlowDiagramLibComponent,
-            AssetFlowComponent,
-            AtoLoadingDirective,
-            AtoAssetParamsViewComponent,
-            AtoNgVarDirective], imports: [CommonModule], exports: [AtoWaterLibComponent,
-            AtoFlowDiagramLibComponent,
-            AssetFlowComponent,
-            AtoLoadingDirective,
-            AtoAssetParamsViewComponent,
-            AtoNgVarDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibModule, decorators: [{
+AtoWaterLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AtoWaterLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, declarations: [AtoWaterLibComponent,
+        AtoFlowDiagramLibComponent,
+        AssetFlowComponent,
+        AtoLoadingDirective,
+        AtoAssetParamsViewComponent,
+        AtoNgVarDirective], imports: [CommonModule], exports: [AtoWaterLibComponent,
+        AtoFlowDiagramLibComponent,
+        AssetFlowComponent,
+        AtoLoadingDirective,
+        AtoAssetParamsViewComponent,
+        AtoNgVarDirective] });
+AtoWaterLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -9476,5 +10888,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ASSET_CATEGORY_PARAMS, ASSET_CATEGORY_PARAMS__BOILER, ATO_ASSET_LAYERS, ATO_COMPONENTS_GROUP_DATA, ATO_MAPPER_FROM, AssetFlowComponent, AtoAssetParamsViewComponent, AtoFlowDiagramLibComponent, AtoGojsEditorModel, AtoLoadingDirective, AtoNgVarDirective, AtoWaterLibComponent, AtoWaterLibModule, AtoWaterLibService, COMPONENTS_GROUP_TYPE, DATA_ASSET_PARAMETER_FIELDS, DATA_WATER_SYSTEMS, ENUM_ASSET_PARAMETERS, WATER_SYSTEMS_NAME };
+export { ASSET_CATEGORY_PARAMS, ASSET_CATEGORY_PARAMS__BOILER, ASSET_CATEGORY_PARAMS__IMMERSED_UF, ASSET_CATEGORY_PARAMS__RO_WATER_TREATMENT, ATO_ASSET_LAYERS, ATO_COMPONENTS_GROUP_DATA, ATO_MAPPER_FROM, AssetFlowComponent, AtoAssetParamsViewComponent, AtoFlowDiagramLibComponent, AtoGojsEditorModel, AtoLoadingDirective, AtoNgVarDirective, AtoWaterLibComponent, AtoWaterLibModule, AtoWaterLibService, COMPONENTS_GROUP_TYPE, DATA_ASSET_PARAMETER_FIELDS, DATA_WATER_SYSTEMS, ENUM_ASSET_PARAMETERS, STYLE_TABLE_PARAM, WATER_SYSTEMS_NAME };
 //# sourceMappingURL=ato-water-lib.mjs.map