@dexteel/mesf-core 4.12.0 → 4.14.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Box, Divider, IconButton as IconButton$1, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
-import { values, get, isNil as isNil$1, isEmpty, isNaN, round, isNumber } from 'lodash-es';
+import { Typography, Checkbox, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Divider, IconButton as IconButton$1, Box, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { values, get, isNil as isNil$1, isEmpty, round, isNaN, isNumber } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
@@ -26,17 +26,17 @@ import moment from 'moment';
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
+import SaveIcon from '@material-ui/icons/Save';
+import LockIcon from '@material-ui/icons/Lock';
 import { Alert as Alert$3, Autocomplete } from '@material-ui/lab';
 import Popover from '@material-ui/core/Popover';
+import CreateIcon from '@material-ui/icons/Create';
+import DeleteIcon from '@material-ui/icons/Delete';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertChartIcon from '@material-ui/icons/InsertChart';
 import { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import CreateIcon from '@material-ui/icons/Create';
-import DeleteIcon from '@material-ui/icons/Delete';
-import LockIcon from '@material-ui/icons/Lock';
-import SaveIcon from '@material-ui/icons/Save';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
@@ -79,6 +79,7 @@ import ListAltIcon from '@material-ui/icons/ListAlt';
 import DescriptionIcon from '@material-ui/icons/Description';
 import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { findIana } from 'windows-iana';
+import moment$1 from 'moment-timezone';
 import FormControlLabel$1 from '@material-ui/core/FormControlLabel';
 import Checkbox$1 from '@material-ui/core/Checkbox';
 import Input from '@material-ui/core/Input';
@@ -275,6 +276,20 @@ BarChartControl.propTypes = {
     keys: PropTypes.array
 };
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css$2 = ".lds-ring {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 5px solid rgb(63,81,181);\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: rgb(63,81,181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+n(css$2,{});
+
+var LazyLoading = function () {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "lds-ring" },
+            React__default.createElement("div", null),
+            React__default.createElement("div", null),
+            React__default.createElement("div", null),
+            React__default.createElement("div", null))));
+};
+
 /**********************MATERIAL UI STYLES********************** */
 /*************************************************************** */
 function MinusSquare(props) {
@@ -312,13 +327,17 @@ var StyledTreeItem = withStyles(function (theme) { return ({
         marginLeft: 7,
         paddingLeft: 18,
         borderLeft: "1px dashed ".concat(alpha(theme.palette.text.primary, 0.4))
+    },
+    label: {
+        backgroundColor: function (props) {
+            return props.isChecked ? "lightblue !important" : "inherit";
+        }
     }
 }); })(function (props) { return (React__default.createElement(TreeItem, __assign({}, props, { TransitionComponent: TransitionComponent }))); });
 var useTreviewStyle = makeStyles(function (theme) { return ({
     root: {
         "min-height": 264,
-        flexGrow: 1,
-        maxWidth: 400
+        flexGrow: 1
     },
     treLabelIcon: {
         marginRight: theme.spacing(1)
@@ -335,13 +354,17 @@ var useTreviewStyle = makeStyles(function (theme) { return ({
     treeLabelInactive: {
         textDecoration: "line-through",
         textDecorationColor: "red"
+    },
+    smallCheckbox: {
+        transform: 'scale(0.8)'
     }
 }); });
 var ModalTreeFilterControl = function (props) {
-    var onClose = props.onClose, valueProp = props.value, open = props.open, title = props.title, data = props.data, selectBranch = props.selectBranch, selectActive = props.selectActive, selectInternal = props.selectInternal, other = __rest(props, ["onClose", "value", "open", "title", "data", "selectBranch", "selectActive", "selectInternal"]);
+    var onClose = props.onClose, valueProp = props.value, open = props.open, title = props.title, data = props.data, selectBranch = props.selectBranch, selectActive = props.selectActive, selectInternal = props.selectInternal, multipleSelectNodes = props.multipleSelectNodes, onHide = props.onHide, listAssetDrawings = props.listAssetDrawings, setListAssetDrawings = props.setListAssetDrawings, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onClose", "value", "open", "title", "data", "selectBranch", "selectActive", "selectInternal", "multipleSelectNodes", "onHide", "listAssetDrawings", "setListAssetDrawings", "onSuccess", "isLoading"]);
     var _a = useState(valueProp), value = _a[0], setValue = _a[1];
     var _b = useState([]), expanded = _b[0], setExpanded = _b[1];
     var treeRef = useRef(null);
+    var _c = useState([]), selectedNodes = _c[0], setSelectedNodes = _c[1];
     useEffect(function () {
         if (!open) {
             setValue(valueProp);
@@ -358,6 +381,7 @@ var ModalTreeFilterControl = function (props) {
     };
     var handleCancel = function () {
         onClose();
+        onHide(false);
     };
     var handleOk = function () {
         var findNode = getNodeData(data, parseInt(value));
@@ -367,12 +391,16 @@ var ModalTreeFilterControl = function (props) {
         var internalFilter = (selectInternal && findNode.isInternal) || selectInternal !== true;
         var branchFilter = selectBranch && !findNode.isLeaf;
         if (findNode.isLeaf) {
-            if (activeFilter && internalFilter)
+            if (activeFilter && internalFilter) {
                 onClose(value, findNode.name, findNode);
+                onSuccess(true);
+            }
         }
         else {
-            if (branchFilter)
+            if (branchFilter) {
                 onClose(value, findNode.name, findNode);
+                onSuccess(true);
+            }
         }
     };
     var handleKeyDown = function (event) {
@@ -380,6 +408,9 @@ var ModalTreeFilterControl = function (props) {
             onClose();
         }
     };
+    var handleCheckboxClick = function (event) {
+        event.stopPropagation();
+    };
     var getNodeParent = function (node, id, chain) {
         if (chain === void 0) { chain = []; }
         if (!node || node.id === undefined) {
@@ -427,9 +458,32 @@ var ModalTreeFilterControl = function (props) {
         return null;
     };
     var classes = useTreviewStyle();
+    var handleCheckboxChange = function (node) {
+        if (node) {
+            var isSelected = selectedNodes.includes(node.id);
+            var updatedSelectedNodes = void 0;
+            if (isSelected) {
+                updatedSelectedNodes = selectedNodes.filter(function (id) { return id !== node.id; });
+            }
+            else {
+                updatedSelectedNodes = __spreadArray(__spreadArray([], selectedNodes, true), [node.id], false);
+            }
+            setSelectedNodes(updatedSelectedNodes);
+        }
+    };
+    useEffect(function () {
+        if ((selectedNodes === null || selectedNodes === void 0 ? void 0 : selectedNodes.length) >= 1 && setListAssetDrawings) {
+            setListAssetDrawings(selectedNodes);
+        }
+    }, [selectedNodes]);
+    useEffect(function () {
+        if ((listAssetDrawings === null || listAssetDrawings === void 0 ? void 0 : listAssetDrawings.length) >= 1) {
+            setSelectedNodes(listAssetDrawings);
+        }
+    }, [listAssetDrawings]);
     var renderTree = function (nodes) { return (
     /* @ts-ignore */
-    React__default.createElement(StyledTreeItem, { key: nodes.id, nodeId: nodes.id.toString(), label: React__default.createElement("div", { className: classes.treeLabelRoot },
+    React__default.createElement(StyledTreeItem, { isChecked: selectedNodes.includes(nodes.id), key: nodes.id, nodeId: nodes.id.toString(), label: React__default.createElement("div", { className: classes.treeLabelRoot },
             nodes.isCode === true && (React__default.createElement(Code, { className: classes.treeLabelIcon, htmlColor: "#1ABC9C" })),
             nodes.isCode === false && (React__default.createElement(FolderIcon, { className: classes.treeLabelIcon, htmlColor: "#F1C40F" })),
             React__default.createElement(Typography, { variant: "body2", className: [
@@ -438,22 +492,24 @@ var ModalTreeFilterControl = function (props) {
                 ].join(" ") },
                 React__default.createElement("span", null,
                     nodes.isCode && (React__default.createElement("i", { className: "fas fa-square mr-2", style: { color: nodes.delayCategoryColor || "#FFFFFF" } })),
-                    nodes.name))), className: "delay-item-node", id: nodes.id, "data-isbranch": !nodes.isCode }, Array.isArray(nodes.children)
+                    nodes.name)),
+            multipleSelectNodes &&
+                React__default.createElement(Checkbox, { className: classes.smallCheckbox, size: "small", color: "primary", checked: selectedNodes.includes(nodes.id), onChange: function () {
+                        handleCheckboxChange(nodes);
+                    }, onClick: handleCheckboxClick })), className: "delay-item-node", id: nodes.id, "data-isbranch": !nodes.isCode }, Array.isArray(nodes.children)
         ? nodes.children.map(function (node) { return renderTree(node); })
         : null)); };
-    return (React__default.createElement(Dialog, __assign({ onClose: function (event, reason) { return null; }, "aria-label": title, maxWidth: "xs", TransitionProps: { onEntering: handleEntering }, "aria-labelledby": "confirmation-dialog-title", open: open }, other, { onKeyDown: handleKeyDown }),
+    return (React__default.createElement(Dialog, __assign({ onClose: function (event, reason) { return onHide(false); }, "aria-label": title, maxWidth: "sm", TransitionProps: { onEntering: handleEntering }, "aria-labelledby": "confirmation-dialog-title", open: open }, other, { onKeyDown: handleKeyDown }),
         React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, title),
-        React__default.createElement(DialogContent$1, { dividers: true },
-            React__default.createElement(TreeView, { className: classes.root, defaultCollapseIcon: React__default.createElement(MinusSquare, null), defaultExpandIcon: React__default.createElement(PlusSquare, null), ref: treeRef, selected: value === undefined ? "" : value.toString(), expanded: expanded, onNodeSelect: handleChange, onNodeToggle: handleToogle }, data && data.id !== undefined && renderTree(data))),
+        isLoading
+            ?
+                React__default.createElement("div", { style: { width: 600, minHeight: 416, display: "flex", justifyContent: "center", alignItems: "center" } },
+                    React__default.createElement(LazyLoading, null))
+            : (React__default.createElement(DialogContent$1, { dividers: true },
+                React__default.createElement(TreeView, { className: classes.root, defaultCollapseIcon: React__default.createElement(MinusSquare, null), defaultExpandIcon: React__default.createElement(PlusSquare, null), ref: treeRef, selected: value === undefined ? "" : value.toString(), expanded: expanded, onNodeSelect: handleChange, onNodeToggle: handleToogle }, data && data.id !== undefined && renderTree(data)))),
         React__default.createElement(DialogActions$1, null,
             React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
             React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "Ok"))));
-};
-ModalTreeFilterControl.propTypes = {
-    onClose: PropTypes.func.isRequired,
-    open: PropTypes.bool.isRequired,
-    title: PropTypes.string.isRequired,
-    data: PropTypes.object.isRequired
 };
 
 var useStyles$t = makeStyles(function (theme) { return ({
@@ -468,14 +524,13 @@ var useStyles$t = makeStyles(function (theme) { return ({
     },
     paper: {
         width: "100%",
-        maxWidth: 600,
         maxHeight: 600
     }
 }); });
 var TreePickerControl = function (props) {
     var classes = useStyles$t();
-    var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath"]);
-    var _c = React__default.useState(false), open = _c[0], setOpen = _c[1];
+    var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, showAssetTree = props.showAssetTree, onHide = props.onHide, _d = props.listAssetDrawings, listAssetDrawings = _d === void 0 ? [] : _d, onSuccess = props.onSuccess, isLoading = props.isLoading, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath", "multipleSelectNodes", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading"]);
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
     var handleClickListItem = function (e) {
         e.stopPropagation();
         setOpen(true);
@@ -483,8 +538,9 @@ var TreePickerControl = function (props) {
     var handleClose = function (newValue, newDescription, findNode) {
         setOpen(false);
         if (newValue) {
-            if (onSelect !== undefined)
+            if (onSelect !== undefined) {
                 onSelect(newValue, newDescription, findNode);
+            }
         }
     };
     var formatDescription = function (description) {
@@ -517,27 +573,35 @@ var TreePickerControl = function (props) {
         }
     };
     var description = useMemo(function () { return formatDescription(props.description); }, [props.description]);
+    useEffect(function () {
+        if (showAssetTree) {
+            setOpen(showAssetTree);
+        }
+    }, []);
     return (React__default.createElement(Grid, { container: true, className: classes.root },
-        React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" }, title: props.description },
-            React__default.createElement(Grid, { item: true, style: { position: "relative", width: "100%" } },
-                React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle, variant: "outlined", value: description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true }),
-                React__default.createElement(AccountTreeIcon, { style: {
+        !showAssetTree ?
+            React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" }, title: props.description },
+                React__default.createElement(Grid, { item: true, style: { position: "relative", width: "100%" } },
+                    React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle, variant: "outlined", value: description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true }),
+                    React__default.createElement(AccountTreeIcon, { style: {
+                            position: "absolute",
+                            right: 15,
+                            top: 16,
+                            cursor: "pointer"
+                        } })),
+                React__default.createElement("div", { style: {
                         position: "absolute",
-                        right: 15,
-                        top: 16,
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
                         cursor: "pointer"
-                    } })),
-            React__default.createElement("div", { style: {
-                    position: "absolute",
-                    top: 0,
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    cursor: "pointer"
-                }, onClick: handleClickListItem })),
-        React__default.createElement(ModalTreeFilterControl, __assign({ classes: {
-                paper: classes.paper
-            }, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); } }, other))));
+                    }, onClick: handleClickListItem }))
+            : React__default.createElement("div", null),
+        React__default.createElement(Grid, { item: true, xs: 12, md: 12 },
+            React__default.createElement(ModalTreeFilterControl, __assign({ classes: {
+                    paper: classes.paper
+                }, onHide: onHide, id: "modal-treeview-filter", title: props.title, keepMounted: true, open: open, onClose: handleClose, isLoading: isLoading, value: value, data: dataSource, onBackdropClick: function () { return setOpen(false); }, multipleSelectNodes: multipleSelectNodes, listAssetDrawings: listAssetDrawings, setListAssetDrawings: listAssetDrawings, onSuccess: onSuccess }, other)))));
 };
 var SimpleTextControl = /** @class */ (function (_super) {
     __extends(SimpleTextControl, _super);
@@ -1051,20 +1115,6 @@ var Alert = function (props) {
     return React__default.createElement(Alert$2, __assign({ elevation: 6, variant: "filled" }, props));
 };
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css$2 = ".lds-ring {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 64px;\n  height: 64px;\n  margin: 8px;\n  border: 5px solid rgb(63,81,181);\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: rgb(63,81,181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
-n(css$2,{});
-
-var LazyLoading = function () {
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "lds-ring" },
-            React__default.createElement("div", null),
-            React__default.createElement("div", null),
-            React__default.createElement("div", null),
-            React__default.createElement("div", null))));
-};
-
 var useStyles$s = makeStyles$1(function (theme) { return ({
     buttons: {
         opacity: 0,
@@ -4622,7 +4672,6 @@ var AssetReducer = createSlice({
             var payload = _a.payload;
             state.areasList = payload;
         },
-        // ===========================
         setAllAssets: function (state, _a) {
             var payload = _a.payload;
             state.allAssets = payload;
@@ -4704,28 +4753,29 @@ var useAssetCodes = function () {
             }
             // Use our mapping to locate the parent element in our data array
             var parentEl = nodes[idMapping[el.parentId]];
+            // Handle the case where the element has no parent
+            if (!parentEl) {
+                console.log(el);
+                return;
+            }
             // Add our current el to its parent's `children` array
-            parentEl.children = __spreadArray(__spreadArray([], (parentEl.children || []), true), [el], false);
+            if (!parentEl['children']) {
+                parentEl['children'] = [];
+            }
+            parentEl['children'] = __spreadArray(__spreadArray([], (parentEl['children'] || []), true), [el], false);
         });
         setAssetCodes(root);
     };
     var loadFilterAssets = function () {
-        var mydataSource = [];
-        allAssets.forEach(function (row) {
-            var code = TransformAssetCodeModel(row);
-            mydataSource = __spreadArray(__spreadArray([], mydataSource, true), [code], false);
-        });
-        buildTreeAssets(mydataSource);
-    };
-    var TransformAssetCodeModel = function (data) {
-        var model = {
-            id: data.AssetId,
-            parentId: data.ParentAssetId,
-            name: data.AssetName,
-            isLeaf: data.isLeaf,
-            isActive: true
-        };
-        return model;
+        var nodes = allAssets.map(function (el) { return ({
+            id: el.AssetId,
+            parentId: el.ParentAssetId,
+            name: el.AssetName,
+            isLeaf: !!el.IsLeaf,
+            isActive: true,
+            children: []
+        }); });
+        buildTreeAssets(nodes);
     };
     return { loadFilterAssets: loadFilterAssets };
 };
@@ -7317,6 +7367,7 @@ var TimeService = /** @class */ (function () {
         else {
             this.timeZone = timeZone;
         }
+        moment$1.tz.setDefault(this.timeZone);
     };
     TimeService.prototype.toUTC = function (datetime, format$1) {
         try {
@@ -7355,6 +7406,7 @@ var TimeService = /** @class */ (function () {
     };
     return TimeService;
 }());
+var getMomentTz = function () { return moment$1; };
 var dxtServerTimeZone = function () { return TimeService.getInstance().getServerTimeZone; };
 var dxtToUTC = TimeService.getInstance().toUTC;
 var dxtToLocalServerTime = TimeService.getInstance().toLocalServerTime;
@@ -8428,7 +8480,7 @@ var TrendingsInitialState = {
         }
     ],
     viewSelected: null,
-    viewTags: [],
+    viewTags: {},
     shouldRefetchSeries: 1
 };
 var TrendingsReducer = createSlice({
@@ -8589,7 +8641,12 @@ var TrendingsReducer = createSlice({
         },
         setViewTagsAndRefetch: function (state, _a) {
             var payload = _a.payload;
-            state.viewTags = payload;
+            var newTags = structuredClone(payload);
+            __spreadArray([], Object.values(payload), true).sort(function (a, b) { return b.order - a.order; })
+                .forEach(function (vtMap, idx) {
+                newTags[vtMap.viewTag.TagId]['order'] = idx;
+            });
+            state.viewTags = newTags;
             state.shouldRefetchSeries += 1;
         },
         setGraphShouldUpdate: function (state) {
@@ -8763,6 +8820,13 @@ var ColorPicker = function (_a) {
                 } })); })))));
 };
 
+var ButtonWithLoading = function (_a) {
+    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
+    return (React__default.createElement(Button$1, __assign({}, props, { disabled: isLoading }),
+        isLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }),
+        children));
+};
+
 var getIhPath = function () { return localStorage.getItem('ihPath') || "[mssql2022].[IH_100020].[ih]"; };
 //tags
 var getTagsTree = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -8965,861 +9029,863 @@ var deleteAllViewTagsFromView = function (ViewId) { return __awaiter(void 0, voi
     });
 }); };
 
-var useTagsTreeModalStyles = makeStyles$1(function (theme) { return ({
-    dataTypeOfTree: {
-        width: '25px',
-        height: '25px',
-        color: "white",
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        cursor: 'pointer',
-        border: "1px black solid"
-    },
-    root: {
-        alignItems: "center",
-        display: "flex",
-        height: "32px"
-    },
-    customNodeRoot: {
-        listStyleType: "none",
-        margin: 0,
-        padding: 0,
-        '&:hover': {
-            backgroundColor: "#f2f2f2"
-        }
-    },
-    arrow: {
-        alignItems: "center",
-        cursor: "pointer",
-        display: "flex",
-        height: "24px",
-        justifyContent: "center",
-        width: "24px",
-        transition: "transform linear 0.1s",
-        transform: "rotate(0deg)"
-    },
-    "arrow > div": {
+var useTrendingStyles = makeStyles$1(function (theme) { return ({
+    datetimePicker: {
         alignItems: "center",
-        display: "flex"
-    },
-    "arrow.is-open": {
-        transform: "rotate(90deg)"
-    },
-    filetype: {
-        display: "flex"
-    },
-    label: {
-        paddingInlineStart: "8px"
-    },
-    selected: {
-        backgroundColor: "#e8f0fe"
+        "& .MuiInputBase-root": {
+            color: "black",
+            backgroundColor: "white",
+            borderRadius: theme.shape.borderRadius,
+            width: "90%",
+            minWidth: "90%",
+            maxWidth: "90%"
+        },
+        "& .MuiInputBase-input": {
+            fontSize: "13px !important",
+            height: "15px !important",
+            paddingRight: "3px",
+            paddingLeft: "3px"
+        },
+        "& .MuiInput-underline:before": {
+            borderBottomColor: "rgba(0, 0, 0, 0.42)"
+        },
+        padding: 0
     },
-    dragging: {
-        opacity: 0.5
+    select: {
+        "& .MuiInput-root": {
+            width: "100%"
+        },
+        "& .MuiInputBase-root": {
+            color: "black",
+            backgroundColor: "white",
+            borderRadius: theme.shape.borderRadius,
+            minWidth: "100%"
+        },
+        "& .MuiInputBase-input": {
+            fontSize: "14px !important",
+            height: "15px !important"
+        },
+        "& .MuiInput-underline:before": {
+            borderBottomColor: "rgba(0, 0, 0, 0.42)"
+        },
+        padding: 0
     },
-    contextMenu: {
-        fontSize: "14px",
-        backgroundColor: "#fff",
-        borderRadius: "2px",
-        padding: "5px 10px;",
-        width: "140px",
-        height: "auto",
-        margin: "0",
-        position: "fixed",
-        boxShadow: "0 0 20px 0 #ccc",
-        display: "flex",
-        flexDirection: "column"
+    labelOptions: {
+        paddingLeft: "2rem",
+        userSelect: "none",
+        "& > label": {
+            display: "flex",
+            alignItems: "center",
+            gap: "5px"
+        },
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        }
     },
-    storyRoot: {
-        display: "grid",
-        height: "100%",
-        gridTemplateRows: "auto 1fr",
-        listStyleType: "none !important"
+    isPublicCheckbox: {
+        userSelect: "none",
+        paddingLeft: '1rem',
+        "& > label": {
+            display: "flex",
+            alignItems: "center",
+            gap: "15px"
+        },
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        }
     },
-    assetRoot: {
-        boxSizing: "border-box",
-        height: "100%",
-        padding: "32px"
+    navigatorButton: {
+        "& .MuiSvgIcon-root": {
+            cursor: "pointer !important",
+            height: '24px',
+            width: '24px',
+            '& svg': {
+                // Adjust the icon size as well
+                fontSize: '1.5rem'
+            }
+        },
+        color: 'black'
     },
-    dropTarget: {
-        boxShadow: "0 0 0 1px #1967d2 inset",
-        borderRadius: '1px',
-        backgroundColor: '#DAE4F2'
+    iconContainer: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        flex: 1
     },
-    customDragRoot: {
-        alignItems: "center",
-        backgroundColor: "#1967d2",
-        borderRadius: "4px",
-        boxShadow: " 0 12px 24px -6px rgba(0, 0, 0, .25); 0 0 0 1px rgba(0, 0, 0, .08)",
-        color: "#fff",
-        display: "inline-grid",
-        fontSize: "14px",
-        gap: "8px",
-        gridTemplateColumns: "auto auto",
-        padding: "4px 8px",
-        pointerEvents: "none"
+    optionContainer: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        width: '100%'
     },
-    icon: {
-        alignItems: "center",
-        display: "flex"
+    optionLabel: {
+        flexGrow: 1
     },
-    customDragLabel: {
-        alignItems: "center",
-        display: "flex"
+    inputCustom: {
+        color: 'rgba(0, 0, 0, 0.87)',
+        cursor: 'text',
+        fontSize: '0.7rem',
+        boxSizing: 'border-box',
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: 400,
+        lineHeight: 1.1876,
+        letterSpacing: '0.00938em',
+        '& .MuiOutlinedInput-input': {
+            padding: '10px 10px'
+        }
     }
 }); });
 
-function buildTagsTreeV2(data) {
-    var tagsForTree = [];
-    data.forEach(function (el) {
-        var tagForTree = {
-            id: el.TagId,
-            parent: (el.ParentTagId || 0),
-            text: el.TagName,
-            data: el,
-            droppable: el.TagTypeCode === 'F'
-        };
-        return tagsForTree.push(tagForTree);
-    });
-    return tagsForTree;
-}
-
-var CustomDragPreview = function (props) {
-    var _a, _b, _c;
-    var classes = useTagsTreeModalStyles();
-    var item = props.monitorProps.item;
-    var isFolder = ((_a = item.data) === null || _a === void 0 ? void 0 : _a.TagTypeCode) === 'F' ? true : false;
-    return (React__default.createElement("div", { className: classes.customDragRoot },
-        React__default.createElement("div", { className: classes.icon }, isFolder ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertChartIcon, { fontSize: 'small' }))),
-        React__default.createElement("div", { className: classes.customDragLabel }, ((_b = item.data) === null || _b === void 0 ? void 0 : _b.Alias) || ((_c = item.data) === null || _c === void 0 ? void 0 : _c.TagName))));
-};
-
-var customStyles = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
-var TagFolderCustomNode = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var node = _a.node, _k = _a.options, depth = _k.depth, isOpen = _k.isOpen, onToggle = _k.onToggle, containerRef = _k.containerRef, options = _a.options, setOpenTagFolders = _a.setOpenTagFolders, openTagFolders = _a.openTagFolders, handleSelect = _a.handleSelect, setContextMenuOver = _a.setContextMenuOver, isSelected = _a.isSelected;
-    var classes = useTagsTreeModalStyles();
-    var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
-    var onClickHandler = function () {
-        var _a;
-        var _b;
-        if (options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === 'F') {
-            if (openTagFolders[node.id]) {
-                var newOpenTagFolders = __assign({}, openTagFolders);
-                delete newOpenTagFolders[node.id];
-                setOpenTagFolders(newOpenTagFolders);
-            }
-            else {
-                setOpenTagFolders(__assign(__assign({}, openTagFolders), (_a = {}, _a[node.id] = node.id, _a)));
-            }
-            onToggle();
-            return;
-        }
-        if (!options.hasChild) {
-            handleSelect(node);
-        }
-    };
-    var handleContextMenu = useCallback(function (ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        setContextMenuOver(node, ev);
-    }, [node.id, setContextMenuOver]);
-    useEffect(function () {
-        var _a;
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", handleContextMenu);
-        return function () {
-            var _a;
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("contextmenu", handleContextMenu);
-        };
-    }, []);
-    return (React__default.createElement("div", { className: nodeClasses, onClick: onClickHandler, style: { paddingLeft: depth * 20, cursor: "pointer" } },
-        React__default.createElement("style", null, customStyles),
-        React__default.createElement(React__default.Fragment, null,
-            options.hasChild ? (React__default.createElement("div", null, isOpen ? React__default.createElement(ArrowDropDownIcon, null) : React__default.createElement(ArrowRight, null)))
-                : null,
-            React__default.createElement("div", null, options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === 'F' ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertChartIcon, { fontSize: 'small' })))),
-        ((_c = node.data) === null || _c === void 0 ? void 0 : _c.TagName) &&
-            React__default.createElement(React__default.Fragment, null,
-                ((_d = node.data) === null || _d === void 0 ? void 0 : _d.TagTypeCode) && ((_e = node.data) === null || _e === void 0 ? void 0 : _e.TagTypeCode) !== 'F' && (React__default.createElement("div", { className: classes.dataTypeOfTree, style: {
-                        backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === 'A' ? "#AD48C4" : "#C46F48",
-                        margin: "0 5px"
-                    } }, (_g = node.data) === null || _g === void 0 ? void 0 : _g.TagTypeCode)),
-                React__default.createElement(Tooltip, { title: node.data.TagName, placement: "top", arrow: true },
-                    React__default.createElement(Typography, { variant: "body2" }, ((_h = node.data) === null || _h === void 0 ? void 0 : _h.Alias) || ((_j = node.data) === null || _j === void 0 ? void 0 : _j.TagName))))));
-};
-
-var ButtonWithLoading = function (_a) {
-    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
-    return (React__default.createElement(Button$1, __assign({}, props, { disabled: isLoading }),
-        isLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }),
-        children));
-};
-
-var NewFolderModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose, tagNodeSelectedInTree = _a.tagNodeSelectedInTree;
-    var _b = useState(), name = _b[0], setName = _b[1];
+var DeleteViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState(''), error = _c[0], setError = _c[1];
-    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var parentId, parentTagId, resp;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
-                    e.preventDefault();
-                    parentId = Number(tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.parent) || null;
-                    parentTagId = ((_a = tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.data) === null || _a === void 0 ? void 0 : _a.TagTypeCode) === "F" ? Number(tagNodeSelectedInTree.id) : parentId;
                     setIsLoading(true);
-                    if (!name) return [3 /*break*/, 2];
-                    return [4 /*yield*/, upsertTagFolder(null, parentTagId, name, true)];
+                    if (!!isNil$1(view)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, deleteView(view.ViewId)];
                 case 1:
-                    resp = _b.sent();
+                    resp = _a.sent();
                     if (!resp.ok) {
                         setError(resp.message);
                     }
-                    _b.label = 2;
+                    else {
+                        handleClose(true);
+                    }
+                    _a.label = 2;
                 case 2:
-                    handleClose(true);
-                    setName('');
                     setIsLoading(false);
                     return [2 /*return*/];
             }
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'New folder' },
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Box, null,
-                    React__default.createElement(TextField, { style: { minWidth: "600px" }, id: "outlined-basic", label: "Folder name", variant: "outlined", value: name, onChange: (function (e) { return setName(e.target.value); }) }))),
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Delete View' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
+                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(Typography, null,
+                            "Are yu sure you want to delete ",
+                            React__default.createElement("strong", null, view === null || view === void 0 ? void 0 : view.ViewName),
+                            " ?")))) :
+                (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
+            React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement("div", null,
-                    React__default.createElement(Button$1, { color: 'secondary', variant: 'outlined', onClick: function () { return handleClose(false); } }, "Cancel")),
-                React__default.createElement("div", null,
-                    React__default.createElement(ButtonWithLoading, { isLoading: isLoading, onClick: onSubmit, color: 'primary', variant: 'contained' }, "Save")))),
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'secondary', onClick: handleSubmit, isLoading: isLoading }, "Delete")
+                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var RemoveFolderModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose, tagNodeSelectedInTree = _a.tagNodeSelectedInTree;
-    var _b = useState(''), error = _b[0], setError = _b[1];
-    var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
-    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var parentId, name_1, id, resp;
+var EditViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
+    var classes = useTrendingStyles();
+    var _b = useState(''), newName = _b[0], setNewName = _b[1];
+    var _c = useState(true), isPublic = _c[0], setIsPublic = _c[1];
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(''), error = _e[0], setError = _e[1];
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    e.preventDefault();
-                    if (!tagNodeSelectedInTree) return [3 /*break*/, 5];
-                    parentId = Number(tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.parent) || null;
-                    name_1 = tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.text;
-                    id = Number(tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.id);
-                    resp = void 0;
                     setIsLoading(true);
-                    if (!parentId) return [3 /*break*/, 2];
-                    return [4 /*yield*/, deleteTagFolder(id)];
+                    if (!!isNil$1(view)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, upsertView(view.ViewId, newName, isPublic)];
                 case 1:
                     resp = _a.sent();
                     if (!resp.ok) {
                         setError(resp.message);
                     }
-                    return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, upsertTagFolder(id, parentId, name_1, false)];
-                case 3:
-                    resp = _a.sent();
-                    _a.label = 4;
-                case 4:
-                    if (!resp.ok) {
-                        setError(resp.message);
+                    else {
+                        handleClose(true);
                     }
-                    _a.label = 5;
-                case 5:
-                    handleClose(true);
+                    _a.label = 2;
+                case 2:
                     setIsLoading(false);
                     return [2 /*return*/];
             }
         });
     }); };
+    var handleChangeInput = function (e) {
+        e.preventDefault();
+        var name = e.target.value;
+        setNewName(name);
+    };
+    var handleCheck = function () { return setIsPublic(!isPublic); };
+    useEffect(function () {
+        if (view) {
+            setIsPublic(view.IsPublic);
+            setNewName(view.ViewName);
+        }
+    }, [view]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Remove Folder' },
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Box, null,
-                    React__default.createElement(Typography, null,
-                        "Are you sure you want to remove ",
-                        React__default.createElement("strong", null, tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.text),
-                        " folder?"))),
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Update View' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
+                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(TextField, { required: true, className: classes.inputCustom, id: "viewName", label: "Name", variant: "outlined", onChange: handleChangeInput, value: newName })),
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
+                        React__default.createElement("label", null,
+                            React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck }),
+                            React__default.createElement(Typography, null, "Public"))))) :
+                (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
+            React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement("div", null,
-                    React__default.createElement(Button$1, { color: 'secondary', variant: 'outlined', onClick: function () { return handleClose(false); } }, "Cancel")),
-                React__default.createElement("div", null,
-                    React__default.createElement(ButtonWithLoading, { isLoading: isLoading, onClick: onSubmit, color: 'primary', variant: 'contained' }, "Remove")))),
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Update")
+                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var ContextMenu = function (_a) {
-    var _b;
-    var isOpen = _a.isOpen, anchorPoint = _a.anchorPoint, tagNodeSelectedInTree = _a.tagNodeSelectedInTree, getTagsTreeData = _a.getTagsTreeData, setShowContextMenu = _a.setShowContextMenu;
-    var classes = useTagsTreeModalStyles();
-    var _c = useState(false), showNewTagModal = _c[0], setShowNewTagModal = _c[1];
-    var _d = useState(false), showRemoveTagModal = _d[0], setShowRemoveTagModal = _d[1];
-    var isFolder = ((_b = tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F";
-    return (React__default.createElement(React__default.Fragment, null,
-        isOpen && anchorPoint ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: anchorPoint.y, left: anchorPoint.x } },
-            React__default.createElement(MenuItem$1, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowNewTagModal(true); } }, "New Folder"),
-            tagNodeSelectedInTree && isFolder && (React__default.createElement(MenuItem$1, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowRemoveTagModal(true); } }, "Remove Folder")))) : (null),
-        React__default.createElement(NewFolderModal, { open: showNewTagModal, handleClose: function (shouldUpdate) {
-                if (shouldUpdate) {
-                    getTagsTreeData();
-                }
-                setShowContextMenu(false);
-                setShowNewTagModal(false);
-            }, tagNodeSelectedInTree: tagNodeSelectedInTree }),
-        React__default.createElement(RemoveFolderModal, { open: showRemoveTagModal, handleClose: function (shouldUpdate) {
-                if (shouldUpdate) {
-                    getTagsTreeData();
-                }
-                setShowContextMenu(false);
-                setShowRemoveTagModal(false);
-            }, tagNodeSelectedInTree: tagNodeSelectedInTree })));
-};
-
-var TagSelectionModal = function (_a) {
-    var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
-    var classes = useTagsTreeModalStyles();
-    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(''), error = _c[0], setError = _c[1];
-    var _d = useState([]), tagsTreeData = _d[0], setTagsTreeData = _d[1];
-    var _e = useState(null), tagNodeSelectedInTree = _e[0], setTagNodeSelectedInTree = _e[1];
-    var _f = useState(null), anchorPoint = _f[0], setAnchorPoint = _f[1];
-    var _g = useState(false), showContextMenu = _g[0], setShowContextMenu = _g[1];
-    var backendOffset = 1000000;
-    var _h = useState({}), openTagFolders = _h[0], setOpenTagFolders = _h[1];
-    var _j = useState([]), selectedNodes = _j[0], setSelectedNodes = _j[1];
-    useTrendingContext().state.viewTags;
-    var handleContextMenu = function (data, e) {
-        e.preventDefault();
-        var top = e.clientY;
-        var left = e.clientX;
-        setAnchorPoint({ x: left, y: top });
-        setSelectedNodes([data]);
-        setShowContextMenu(true);
-        var selectedNode = tagsTreeData.find(function (node) { var _a; return ((_a = node.data) === null || _a === void 0 ? void 0 : _a.TagId) === data.id; });
-        if (selectedNode) {
-            setTagNodeSelectedInTree(selectedNode);
-        }
-    };
-    var getTagsTreeData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var tagsTree, rows, tree;
+var LoadViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, getTagsFromAPI = _a.getTagsFromAPI;
+    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTagsAndRefetch = _d.setViewTagsAndRefetch, setViewSelected = _d.setViewSelected;
+    var classes = useTrendingStyles();
+    var _e = useState(null), viewForDelete = _e[0], setViewForDelete = _e[1];
+    var _f = useState(null), viewForEdit = _f[0], setViewForEdit = _f[1];
+    var _g = useState(false), deleteViewModalOpen = _g[0], setDeleteViewModalOpen = _g[1];
+    var _h = useState(false), editViewModalOpen = _h[0], setEditViewModalOpen = _h[1];
+    var _j = useState(false), allViewsChecked = _j[0], setAllViewsChecked = _j[1];
+    var _k = useState(false), isLoading = _k[0], setIsLoading = _k[1];
+    var _l = useState(''), error = _l[0], setError = _l[1];
+    var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var viewTagsResp;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!isOpen) return [3 /*break*/, 2];
+                    if (!viewSelected) return [3 /*break*/, 2];
                     setIsLoading(true);
-                    return [4 /*yield*/, getTagsTree()];
+                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
                 case 1:
-                    tagsTree = _a.sent();
-                    if (tagsTree.ok) {
-                        rows = tagsTree.data.tables[0].rows;
-                        tree = buildTagsTreeV2(rows);
-                        setTagsTreeData(tree);
+                    viewTagsResp = _a.sent();
+                    if (viewTagsResp.ok) {
+                        setViewTagsAndRefetch(viewTagsResp.data.tables[0].rows.reduce(function (carr, curr, idx) {
+                            if (isNil$1(curr.Color)) {
+                                curr.Color = getRandomColor();
+                            }
+                            carr[curr.TagId] = {
+                                viewTag: curr,
+                                order: idx
+                            };
+                            return carr;
+                        }, {}));
+                    }
+                    else {
+                        setError(viewTagsResp.message);
                     }
                     setIsLoading(false);
+                    handleClose(false);
                     _a.label = 2;
                 case 2: return [2 /*return*/];
             }
         });
     }); };
-    var expanded = useMemo(function () {
-        return Object.keys(openTagFolders).map(function (el) { return parseInt(el); });
-    }, [openTagFolders]);
-    useEffect(function () {
-        getTagsTreeData();
-    }, [isOpen]);
-    var handleDrop = function (tree, options) { return __awaiter(void 0, void 0, void 0, function () {
-        var tagId, newFolderId, newTree, newTree;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+    var handleDeleteView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            e.stopPropagation();
+            if (view.ViewId === (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) {
+                setError('Can not delete current view');
+            }
+            else {
+                setViewForDelete(view);
+                setDeleteViewModalOpen(true);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var handleEditView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setViewForEdit(view);
+            setEditViewModalOpen(true);
+            return [2 /*return*/];
+        });
+    }); };
+    var handleAllViewsCheckbox = function () {
+        setAllViewsChecked(function (prev) { return !prev; });
+    };
+    var publicViews = useMemo(function () {
+        return views.filter(function (v) { return v.IsPublic === true; });
+    }, [views, allViewsChecked]);
+    return (React__default.createElement("div", null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Views' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true }, views.length ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Grid$1, { item: true, md: 12 },
+                        React__default.createElement("div", { className: classes.isPublicCheckbox, style: { paddingBottom: '1rem' } },
+                            React__default.createElement("label", { htmlFor: "" },
+                                React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
+                                React__default.createElement(Typography, null, "All Views")))),
+                    React__default.createElement(Grid$1, { item: true, md: 12 },
+                        React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", noOptionsText: allViewsChecked ? "No views detected, please create a new view" : "No private views detected, please create a new view .", options: allViewsChecked ? views : publicViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, defaultValue: viewSelected, style: { width: "100%" }, renderOption: function (option) { return (React__default.createElement("div", { className: classes.optionContainer },
+                                React__default.createElement("div", { className: classes.optionLabel }, option.ViewName),
+                                React__default.createElement("div", { className: classes.iconContainer },
+                                    option.IsPublic ? '' :
+                                        React__default.createElement(React__default.Fragment, null,
+                                            React__default.createElement(Tooltip, { title: "Private", arrow: true },
+                                                React__default.createElement(LockIcon, { fontSize: 'small', style: { color: 'black', height: "18px", width: '18px', cursor: 'auto' } }))),
+                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(option); } },
+                                        React__default.createElement(CreateIcon, { fontSize: 'small', color: 'primary', style: { height: "18px", width: '18px', cursor: 'pointer' } })),
+                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleDeleteView(option, e); } },
+                                        React__default.createElement(DeleteIcon, { fontSize: 'small', color: 'secondary', style: { height: "18px", width: '18px', cursor: 'pointer' } }))))); }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })))) :
+                    (React__default.createElement(Typography, null, "No views detected, please add one")))),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement("div", { style: { paddingTop: "1rem" } },
+                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
+                    views.length ? (React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")) : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok"))))),
+        React__default.createElement(DeleteViewModal, { open: deleteViewModalOpen, view: viewForDelete, handleClose: function (shouldUpdate) {
+                setDeleteViewModalOpen(false);
+                if (shouldUpdate)
+                    getTagsFromAPI().then(function () { });
+            } }),
+        React__default.createElement(EditViewModal, { open: editViewModalOpen, view: viewForEdit, handleClose: function (shouldUpdate) {
+                setEditViewModalOpen(false);
+                if (shouldUpdate)
+                    getTagsFromAPI().then(function () { });
+            } }),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
+var SaveAsViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose;
+    var classes = useTrendingStyles();
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var _d = useTrendingContext(), _e = _d.state, viewTags = _e.viewTags, views = _e.views, viewSelected = _e.viewSelected, _f = _d.actions, setViewSelected = _f.setViewSelected; _f.setViewTags;
+    var _g = useState(true), isPublic = _g[0], setIsPublic = _g[1];
+    var _h = useState(''), newView = _h[0], setNewView = _h[1];
+    var handleCheck = function () { return setIsPublic(!isPublic); };
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, ViewId_1, shouldClose_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     setIsLoading(true);
-                    if (!options.dragSource) return [3 /*break*/, 5];
-                    tagId = Number(options.dragSource.id);
-                    newFolderId = Number((_a = options.dropTarget) === null || _a === void 0 ? void 0 : _a.id) || null;
-                    if (tagId === newFolderId) {
-                        setIsLoading(false);
-                        return [2 /*return*/];
-                    }
-                    if (!(((_b = options.dragSource.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F")) return [3 /*break*/, 2];
-                    return [4 /*yield*/, upsertTagFolder(tagId, newFolderId, options.dragSource.text, true)];
+                    return [4 /*yield*/, upsertView(null, newView, isPublic)];
                 case 1:
-                    newTree = _c.sent();
-                    if (!newTree.ok) {
-                        setError(newTree.message);
-                    }
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 3];
+                    ViewId_1 = resp.data.returnValue;
+                    shouldClose_1 = true;
+                    return [4 /*yield*/, Promise.allSettled(Object.values(viewTags).map(function (_a) {
+                            var _b = _a.viewTag, TagId = _b.TagId, Color = _b.Color, MinScale = _b.MinScale, MaxScale = _b.MaxScale, IsAutoScale = _b.IsAutoScale, IsVisible = _b.IsVisible, Unit = _b.Unit;
+                            upsertViewTag(ViewId_1, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale, Unit)
+                                .then(function (r) {
+                                if (!r.ok) {
+                                    setError(function (prevErr) { return "".concat(prevErr, ". ").concat(r.message); });
+                                    if (shouldClose_1) {
+                                        shouldClose_1 = false;
+                                    }
+                                }
+                            });
+                        }))];
+                case 2:
+                    _a.sent();
+                    handleClose(shouldClose_1);
                     return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, changeTagFolderToTag(tagId, newFolderId)];
                 case 3:
-                    newTree = _c.sent();
-                    if (!newTree.ok) {
-                        setError(newTree.message);
-                    }
-                    _c.label = 4;
+                    setError(resp.message);
+                    _a.label = 4;
                 case 4:
-                    setTagsTreeData(tree);
-                    _c.label = 5;
-                case 5:
                     setIsLoading(false);
                     return [2 /*return*/];
             }
         });
     }); };
-    var handleClick = function (node) {
-        if (node.data) {
-            onTagSelect(node.data);
-        }
-    };
-    var handleCloseContextMenu = function (e) {
-        if (showContextMenu) {
-            setShowContextMenu(false);
-        }
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { style: { display: isOpen ? "block" : "none", minHeight: "700px", minWidth: "800px" }, onClick: handleCloseContextMenu },
-            React__default.createElement("div", { style: { overflowY: 'auto', maxHeight: '700px' } }, isLoading ? (React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
-                React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(DndProvider$1, { backend: HTML5Backend },
-                React__default.createElement(Tree, { classes: {
-                        root: classes.assetRoot,
-                        dropTarget: classes.dropTarget
-                    }, initialOpen: expanded, tree: tagsTreeData, rootId: backendOffset, onDrop: handleDrop, canDrop: function (tag, options) {
-                        return !selectedNodes.some(function (selectedNode) {
-                            return Number(selectedNode.id) === Number(options.dropTargetId);
-                        });
-                    }, render: function (node, options) {
-                        var selected = selectedNodes.some(function (selectedNode) { return Number(selectedNode.id) === Number(node.id); });
-                        return (React__default.createElement(TagFolderCustomNode, { setContextMenuOver: handleContextMenu, node: node, options: options, isSelected: selected, openTagFolders: openTagFolders, setOpenTagFolders: setOpenTagFolders, handleSelect: handleClick }));
-                    }, dragPreviewRender: function (monitorProps) { return (React__default.createElement(CustomDragPreview, { monitorProps: monitorProps })
-                    // <div>{monitorProps.item.data?.TagName}</div>
-                    ); } }))))),
-        React__default.createElement(ContextMenu, { anchorPoint: anchorPoint, isOpen: showContextMenu, setShowContextMenu: setShowContextMenu, tagNodeSelectedInTree: tagNodeSelectedInTree, getTagsTreeData: getTagsTreeData }),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
-};
-
-var TagsTreeModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose, onTagSelect = _a.onTagSelect;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Save View As' },
+            React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Box, null,
-                    React__default.createElement(Typography, { id: "modal-modal-description" },
-                        React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect })))))));
+                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) { return option.ViewName; }, freeSolo: true, onChange: function (ev, val) {
+                            setViewSelected(val);
+                            if (val) {
+                                setNewView("");
+                            }
+                        }, onInputChange: function (event, newInputValue) {
+                            var isValueInViews = views.some(function (view) { return view.ViewName === newInputValue; });
+                            if (!isValueInViews) {
+                                setNewView(newInputValue);
+                            }
+                        }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
+                        (React__default.createElement(Box, null,
+                            React__default.createElement(TextField, { style: { minWidth: "600px" }, size: 'small', id: "outlined-basic", label: "View name", variant: "outlined", value: newView, onChange: (function (e) { return setNewView(e.target.value); }) }))))),
+                React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
+                    React__default.createElement("label", null,
+                        "Public",
+                        React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck })))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var useTrendingStyles = makeStyles$1(function (theme) { return ({
-    datetimePicker: {
-        alignItems: "center",
-        "& .MuiInputBase-root": {
-            color: "black",
-            backgroundColor: "white",
-            borderRadius: theme.shape.borderRadius,
-            width: "90%",
-            minWidth: "90%",
-            maxWidth: "90%"
-        },
-        "& .MuiInputBase-input": {
-            fontSize: "13px !important",
-            height: "15px !important",
-            paddingRight: "3px",
-            paddingLeft: "3px"
-        },
-        "& .MuiInput-underline:before": {
-            borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        },
-        padding: 0
+var useTagsTreeModalStyles = makeStyles$1(function (theme) { return ({
+    dataTypeOfTree: {
+        width: '25px',
+        height: '25px',
+        color: "white",
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: 'pointer',
+        border: "1px black solid"
     },
-    select: {
-        "& .MuiInput-root": {
-            width: "100%"
-        },
-        "& .MuiInputBase-root": {
-            color: "black",
-            backgroundColor: "white",
-            borderRadius: theme.shape.borderRadius,
-            minWidth: "100%"
-        },
-        "& .MuiInputBase-input": {
-            fontSize: "14px !important",
-            height: "15px !important"
-        },
-        "& .MuiInput-underline:before": {
-            borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        },
-        padding: 0
+    root: {
+        alignItems: "center",
+        display: "flex",
+        height: "32px"
     },
-    labelOptions: {
-        paddingLeft: "2rem",
-        userSelect: "none",
-        "& > label": {
-            display: "flex",
-            alignItems: "center",
-            gap: "5px"
-        },
-        '& input[type="checkbox"]': {
-            zoom: 1.5
+    customNodeRoot: {
+        listStyleType: "none",
+        margin: 0,
+        padding: 0,
+        '&:hover': {
+            backgroundColor: "#f2f2f2"
         }
     },
-    isPublicCheckbox: {
-        userSelect: "none",
-        paddingLeft: '1rem',
-        "& > label": {
-            display: "flex",
-            alignItems: "center",
-            gap: "15px"
-        },
-        '& input[type="checkbox"]': {
-            zoom: 1.5
-        }
+    arrow: {
+        alignItems: "center",
+        cursor: "pointer",
+        display: "flex",
+        height: "24px",
+        justifyContent: "center",
+        width: "24px",
+        transition: "transform linear 0.1s",
+        transform: "rotate(0deg)"
     },
-    navigatorButton: {
-        "& .MuiSvgIcon-root": {
-            cursor: "pointer !important",
-            height: '24px',
-            width: '24px',
-            '& svg': {
-                // Adjust the icon size as well
-                fontSize: '1.5rem'
+    "arrow > div": {
+        alignItems: "center",
+        display: "flex"
+    },
+    "arrow.is-open": {
+        transform: "rotate(90deg)"
+    },
+    filetype: {
+        display: "flex"
+    },
+    label: {
+        paddingInlineStart: "8px"
+    },
+    selected: {
+        backgroundColor: "#e8f0fe"
+    },
+    dragging: {
+        opacity: 0.5
+    },
+    contextMenu: {
+        fontSize: "14px",
+        backgroundColor: "#fff",
+        borderRadius: "2px",
+        padding: "5px 10px;",
+        width: "140px",
+        height: "auto",
+        margin: "0",
+        position: "fixed",
+        boxShadow: "0 0 20px 0 #ccc",
+        display: "flex",
+        flexDirection: "column"
+    },
+    storyRoot: {
+        display: "grid",
+        height: "100%",
+        gridTemplateRows: "auto 1fr",
+        listStyleType: "none !important"
+    },
+    assetRoot: {
+        boxSizing: "border-box",
+        height: "100%",
+        padding: "32px"
+    },
+    dropTarget: {
+        boxShadow: "0 0 0 1px #1967d2 inset",
+        borderRadius: '1px',
+        backgroundColor: '#DAE4F2'
+    },
+    customDragRoot: {
+        alignItems: "center",
+        backgroundColor: "#1967d2",
+        borderRadius: "4px",
+        boxShadow: " 0 12px 24px -6px rgba(0, 0, 0, .25); 0 0 0 1px rgba(0, 0, 0, .08)",
+        color: "#fff",
+        display: "inline-grid",
+        fontSize: "14px",
+        gap: "8px",
+        gridTemplateColumns: "auto auto",
+        padding: "4px 8px",
+        pointerEvents: "none"
+    },
+    icon: {
+        alignItems: "center",
+        display: "flex"
+    },
+    customDragLabel: {
+        alignItems: "center",
+        display: "flex"
+    }
+}); });
+
+function buildTagsTreeV2(data) {
+    var tagsForTree = [];
+    data.forEach(function (el) {
+        var tagForTree = {
+            id: el.TagId,
+            parent: (el.ParentTagId || 0),
+            text: el.TagName,
+            data: el,
+            droppable: el.TagTypeCode === 'F'
+        };
+        return tagsForTree.push(tagForTree);
+    });
+    return tagsForTree;
+}
+
+var CustomDragPreview = function (props) {
+    var _a, _b, _c;
+    var classes = useTagsTreeModalStyles();
+    var item = props.monitorProps.item;
+    var isFolder = ((_a = item.data) === null || _a === void 0 ? void 0 : _a.TagTypeCode) === 'F' ? true : false;
+    return (React__default.createElement("div", { className: classes.customDragRoot },
+        React__default.createElement("div", { className: classes.icon }, isFolder ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertChartIcon, { fontSize: 'small' }))),
+        React__default.createElement("div", { className: classes.customDragLabel }, ((_b = item.data) === null || _b === void 0 ? void 0 : _b.Alias) || ((_c = item.data) === null || _c === void 0 ? void 0 : _c.TagName))));
+};
+
+var customStyles = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
+var TagFolderCustomNode = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var node = _a.node, _k = _a.options, depth = _k.depth, isOpen = _k.isOpen, onToggle = _k.onToggle, containerRef = _k.containerRef, options = _a.options, setOpenTagFolders = _a.setOpenTagFolders, openTagFolders = _a.openTagFolders, handleSelect = _a.handleSelect, setContextMenuOver = _a.setContextMenuOver, isSelected = _a.isSelected;
+    var classes = useTagsTreeModalStyles();
+    var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
+    var onClickHandler = function () {
+        var _a;
+        var _b;
+        if (options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === 'F') {
+            if (openTagFolders[node.id]) {
+                var newOpenTagFolders = __assign({}, openTagFolders);
+                delete newOpenTagFolders[node.id];
+                setOpenTagFolders(newOpenTagFolders);
+            }
+            else {
+                setOpenTagFolders(__assign(__assign({}, openTagFolders), (_a = {}, _a[node.id] = node.id, _a)));
             }
-        },
-        color: 'black'
-    },
-    iconContainer: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-        flex: 1
-    },
-    optionContainer: {
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        width: '100%'
-    },
-    optionLabel: {
-        flexGrow: 1
-    },
-    inputCustom: {
-        color: 'rgba(0, 0, 0, 0.87)',
-        cursor: 'text',
-        fontSize: '0.7rem',
-        boxSizing: 'border-box',
-        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-        fontWeight: 400,
-        lineHeight: 1.1876,
-        letterSpacing: '0.00938em',
-        '& .MuiOutlinedInput-input': {
-            padding: '10px 10px'
+            onToggle();
+            return;
         }
-    }
-}); });
+        if (!options.hasChild) {
+            handleSelect(node);
+        }
+    };
+    var handleContextMenu = useCallback(function (ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        setContextMenuOver(node, ev);
+    }, [node.id, setContextMenuOver]);
+    useEffect(function () {
+        var _a;
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", handleContextMenu);
+        return function () {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("contextmenu", handleContextMenu);
+        };
+    }, []);
+    return (React__default.createElement("div", { className: nodeClasses, onClick: onClickHandler, style: { paddingLeft: depth * 20, cursor: "pointer" } },
+        React__default.createElement("style", null, customStyles),
+        React__default.createElement(React__default.Fragment, null,
+            options.hasChild ? (React__default.createElement("div", null, isOpen ? React__default.createElement(ArrowDropDownIcon, null) : React__default.createElement(ArrowRight, null)))
+                : null,
+            React__default.createElement("div", null, options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === 'F' ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertChartIcon, { fontSize: 'small' })))),
+        ((_c = node.data) === null || _c === void 0 ? void 0 : _c.TagName) &&
+            React__default.createElement(React__default.Fragment, null,
+                ((_d = node.data) === null || _d === void 0 ? void 0 : _d.TagTypeCode) && ((_e = node.data) === null || _e === void 0 ? void 0 : _e.TagTypeCode) !== 'F' && (React__default.createElement("div", { className: classes.dataTypeOfTree, style: {
+                        backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === 'A' ? "#AD48C4" : "#C46F48",
+                        margin: "0 5px"
+                    } }, (_g = node.data) === null || _g === void 0 ? void 0 : _g.TagTypeCode)),
+                React__default.createElement(Tooltip, { title: node.data.TagName, placement: "top", arrow: true },
+                    React__default.createElement(Typography, { variant: "body2" }, ((_h = node.data) === null || _h === void 0 ? void 0 : _h.Alias) || ((_j = node.data) === null || _j === void 0 ? void 0 : _j.TagName))))));
+};
 
-var DeleteViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
-    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+var NewFolderModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, tagNodeSelectedInTree = _a.tagNodeSelectedInTree;
+    var _b = useState(), name = _b[0], setName = _b[1];
     var _c = useState(''), error = _c[0], setError = _c[1];
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var parentId, parentTagId, resp;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
+                    e.preventDefault();
+                    parentId = Number(tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.parent) || null;
+                    parentTagId = ((_a = tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.data) === null || _a === void 0 ? void 0 : _a.TagTypeCode) === "F" ? Number(tagNodeSelectedInTree.id) : parentId;
                     setIsLoading(true);
-                    if (!!isNil$1(view)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, deleteView(view.ViewId)];
+                    if (!name) return [3 /*break*/, 2];
+                    return [4 /*yield*/, upsertTagFolder(null, parentTagId, name, true)];
                 case 1:
-                    resp = _a.sent();
+                    resp = _b.sent();
                     if (!resp.ok) {
                         setError(resp.message);
                     }
-                    else {
-                        handleClose(true);
-                    }
-                    _a.label = 2;
+                    _b.label = 2;
                 case 2:
+                    handleClose(true);
+                    setName('');
                     setIsLoading(false);
                     return [2 /*return*/];
             }
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Delete View' },
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
-                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
-                        React__default.createElement(Typography, null,
-                            "Are yu sure you want to delete ",
-                            React__default.createElement("strong", null, view === null || view === void 0 ? void 0 : view.ViewName),
-                            " ?")))) :
-                (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
-            React__default.createElement(Divider, null),
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'New folder' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Box, null,
+                    React__default.createElement(TextField, { style: { minWidth: "600px" }, id: "outlined-basic", label: "Folder name", variant: "outlined", value: name, onChange: (function (e) { return setName(e.target.value); }) }))),
             React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
-                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'secondary', onClick: handleSubmit, isLoading: isLoading }, "Delete")
-                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
+                React__default.createElement("div", null,
+                    React__default.createElement(Button$1, { color: 'secondary', variant: 'outlined', onClick: function () { return handleClose(false); } }, "Cancel")),
+                React__default.createElement("div", null,
+                    React__default.createElement(ButtonWithLoading, { isLoading: isLoading, onClick: onSubmit, color: 'primary', variant: 'contained' }, "Save")))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var EditViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
-    var classes = useTrendingStyles();
-    var _b = useState(''), newName = _b[0], setNewName = _b[1];
-    var _c = useState(true), isPublic = _c[0], setIsPublic = _c[1];
-    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = useState(''), error = _e[0], setError = _e[1];
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp;
+var RemoveFolderModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, tagNodeSelectedInTree = _a.tagNodeSelectedInTree;
+    var _b = useState(''), error = _b[0], setError = _b[1];
+    var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var parentId, name_1, id, resp;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    e.preventDefault();
+                    if (!tagNodeSelectedInTree) return [3 /*break*/, 5];
+                    parentId = Number(tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.parent) || null;
+                    name_1 = tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.text;
+                    id = Number(tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.id);
+                    resp = void 0;
                     setIsLoading(true);
-                    if (!!isNil$1(view)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, upsertView(view.ViewId, newName, isPublic)];
+                    if (!parentId) return [3 /*break*/, 2];
+                    return [4 /*yield*/, deleteTagFolder(id)];
                 case 1:
                     resp = _a.sent();
                     if (!resp.ok) {
                         setError(resp.message);
                     }
-                    else {
-                        handleClose(true);
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, upsertTagFolder(id, parentId, name_1, false)];
+                case 3:
+                    resp = _a.sent();
+                    _a.label = 4;
+                case 4:
+                    if (!resp.ok) {
+                        setError(resp.message);
                     }
-                    _a.label = 2;
-                case 2:
+                    _a.label = 5;
+                case 5:
+                    handleClose(true);
                     setIsLoading(false);
                     return [2 /*return*/];
             }
         });
     }); };
-    var handleChangeInput = function (e) {
-        e.preventDefault();
-        var name = e.target.value;
-        setNewName(name);
-    };
-    var handleCheck = function () { return setIsPublic(!isPublic); };
-    useEffect(function () {
-        if (view) {
-            setIsPublic(view.IsPublic);
-            setNewName(view.ViewName);
-        }
-    }, [view]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Update View' },
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
-                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
-                        React__default.createElement(TextField, { required: true, className: classes.inputCustom, id: "viewName", label: "Name", variant: "outlined", onChange: handleChangeInput, value: newName })),
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
-                        React__default.createElement("label", null,
-                            React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck }),
-                            React__default.createElement(Typography, null, "Public"))))) :
-                (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
-            React__default.createElement(Divider, null),
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Remove Folder' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Box, null,
+                    React__default.createElement(Typography, null,
+                        "Are you sure you want to remove ",
+                        React__default.createElement("strong", null, tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.text),
+                        " folder?"))),
             React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
-                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Update")
-                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
+                React__default.createElement("div", null,
+                    React__default.createElement(Button$1, { color: 'secondary', variant: 'outlined', onClick: function () { return handleClose(false); } }, "Cancel")),
+                React__default.createElement("div", null,
+                    React__default.createElement(ButtonWithLoading, { isLoading: isLoading, onClick: onSubmit, color: 'primary', variant: 'contained' }, "Remove")))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var LoadViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose, getTagsFromAPI = _a.getTagsFromAPI;
-    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
-    var classes = useTrendingStyles();
-    var _e = useState(null), viewForDelete = _e[0], setViewForDelete = _e[1];
-    var _f = useState(null), viewForEdit = _f[0], setViewForEdit = _f[1];
-    var _g = useState(false), deleteViewModalOpen = _g[0], setDeleteViewModalOpen = _g[1];
-    var _h = useState(false), editViewModalOpen = _h[0], setEditViewModalOpen = _h[1];
-    var _j = useState(false), allViewsChecked = _j[0], setAllViewsChecked = _j[1];
-    var _k = useState(false), isLoading = _k[0], setIsLoading = _k[1];
-    var _l = useState(''), error = _l[0], setError = _l[1];
-    var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var viewTagsResp;
+var ContextMenu = function (_a) {
+    var _b;
+    var isOpen = _a.isOpen, anchorPoint = _a.anchorPoint, tagNodeSelectedInTree = _a.tagNodeSelectedInTree, getTagsTreeData = _a.getTagsTreeData, setShowContextMenu = _a.setShowContextMenu;
+    var classes = useTagsTreeModalStyles();
+    var _c = useState(false), showNewTagModal = _c[0], setShowNewTagModal = _c[1];
+    var _d = useState(false), showRemoveTagModal = _d[0], setShowRemoveTagModal = _d[1];
+    var isFolder = ((_b = tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F";
+    return (React__default.createElement(React__default.Fragment, null,
+        isOpen && anchorPoint ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: anchorPoint.y, left: anchorPoint.x } },
+            React__default.createElement(MenuItem$1, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowNewTagModal(true); } }, "New Folder"),
+            tagNodeSelectedInTree && isFolder && (React__default.createElement(MenuItem$1, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowRemoveTagModal(true); } }, "Remove Folder")))) : (null),
+        React__default.createElement(NewFolderModal, { open: showNewTagModal, handleClose: function (shouldUpdate) {
+                if (shouldUpdate) {
+                    getTagsTreeData();
+                }
+                setShowContextMenu(false);
+                setShowNewTagModal(false);
+            }, tagNodeSelectedInTree: tagNodeSelectedInTree }),
+        React__default.createElement(RemoveFolderModal, { open: showRemoveTagModal, handleClose: function (shouldUpdate) {
+                if (shouldUpdate) {
+                    getTagsTreeData();
+                }
+                setShowContextMenu(false);
+                setShowRemoveTagModal(false);
+            }, tagNodeSelectedInTree: tagNodeSelectedInTree })));
+};
+
+var TagSelectionModal = function (_a) {
+    var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
+    var classes = useTagsTreeModalStyles();
+    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var _d = useState([]), tagsTreeData = _d[0], setTagsTreeData = _d[1];
+    var _e = useState(null), tagNodeSelectedInTree = _e[0], setTagNodeSelectedInTree = _e[1];
+    var _f = useState(null), anchorPoint = _f[0], setAnchorPoint = _f[1];
+    var _g = useState(false), showContextMenu = _g[0], setShowContextMenu = _g[1];
+    var backendOffset = 1000000;
+    var _h = useState({}), openTagFolders = _h[0], setOpenTagFolders = _h[1];
+    var _j = useState([]), selectedNodes = _j[0], setSelectedNodes = _j[1];
+    useTrendingContext().state.viewTags;
+    var handleContextMenu = function (data, e) {
+        e.preventDefault();
+        var top = e.clientY;
+        var left = e.clientX;
+        setAnchorPoint({ x: left, y: top });
+        setSelectedNodes([data]);
+        setShowContextMenu(true);
+        var selectedNode = tagsTreeData.find(function (node) { var _a; return ((_a = node.data) === null || _a === void 0 ? void 0 : _a.TagId) === data.id; });
+        if (selectedNode) {
+            setTagNodeSelectedInTree(selectedNode);
+        }
+    };
+    var getTagsTreeData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var tagsTree, rows, tree;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!viewSelected) return [3 /*break*/, 2];
+                    if (!isOpen) return [3 /*break*/, 2];
                     setIsLoading(true);
-                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
+                    return [4 /*yield*/, getTagsTree()];
                 case 1:
-                    viewTagsResp = _a.sent();
-                    if (viewTagsResp.ok) {
-                        setViewTags(viewTagsResp.data.tables[0].rows);
-                    }
-                    else {
-                        setError(viewTagsResp.message);
+                    tagsTree = _a.sent();
+                    if (tagsTree.ok) {
+                        rows = tagsTree.data.tables[0].rows;
+                        tree = buildTagsTreeV2(rows);
+                        setTagsTreeData(tree);
                     }
                     setIsLoading(false);
-                    handleClose(true);
                     _a.label = 2;
                 case 2: return [2 /*return*/];
             }
         });
     }); };
-    var handleDeleteView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            e.stopPropagation();
-            if (view.ViewId === (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) {
-                setError('Can not delete current view');
-            }
-            else {
-                setViewForDelete(view);
-                setDeleteViewModalOpen(true);
-            }
-            return [2 /*return*/];
-        });
-    }); };
-    var handleEditView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            setViewForEdit(view);
-            setEditViewModalOpen(true);
-            return [2 /*return*/];
-        });
-    }); };
-    var handleAllViewsCheckbox = function () {
-        setAllViewsChecked(function (prev) { return !prev; });
-    };
-    var publicViews = useMemo(function () {
-        return views.filter(function (v) { return v.IsPublic === true; });
-    }, [views, allViewsChecked]);
-    return (React__default.createElement("div", null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Views' },
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid$1, { container: true }, views.length ? (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Grid$1, { item: true, md: 12 },
-                        React__default.createElement("div", { className: classes.isPublicCheckbox, style: { paddingBottom: '1rem' } },
-                            React__default.createElement("label", { htmlFor: "" },
-                                React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
-                                React__default.createElement(Typography, null, "All Views")))),
-                    React__default.createElement(Grid$1, { item: true, md: 12 },
-                        React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", noOptionsText: allViewsChecked ? "No views detected, please create a new view" : "No private views detected, please create a new view .", options: allViewsChecked ? views : publicViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, defaultValue: viewSelected, style: { width: "100%" }, renderOption: function (option) { return (React__default.createElement("div", { className: classes.optionContainer },
-                                React__default.createElement("div", { className: classes.optionLabel }, option.ViewName),
-                                React__default.createElement("div", { className: classes.iconContainer },
-                                    option.IsPublic ? '' :
-                                        React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement(Tooltip, { title: "Private", arrow: true },
-                                                React__default.createElement(LockIcon, { fontSize: 'small', style: { color: 'black', height: "18px", width: '18px', cursor: 'auto' } }))),
-                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(option); } },
-                                        React__default.createElement(CreateIcon, { fontSize: 'small', color: 'primary', style: { height: "18px", width: '18px', cursor: 'pointer' } })),
-                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleDeleteView(option, e); } },
-                                        React__default.createElement(DeleteIcon, { fontSize: 'small', color: 'secondary', style: { height: "18px", width: '18px', cursor: 'pointer' } }))))); }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })))) :
-                    (React__default.createElement(Typography, null, "No views detected, please add one")))),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement("div", { style: { paddingTop: "1rem" } },
-                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
-                    views.length ? (React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")) : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok"))))),
-        React__default.createElement(DeleteViewModal, { open: deleteViewModalOpen, view: viewForDelete, handleClose: function (shouldUpdate) {
-                setDeleteViewModalOpen(false);
-                if (shouldUpdate)
-                    getTagsFromAPI().then(function () { });
-            } }),
-        React__default.createElement(EditViewModal, { open: editViewModalOpen, view: viewForEdit, handleClose: function (shouldUpdate) {
-                setEditViewModalOpen(false);
-                if (shouldUpdate)
-                    getTagsFromAPI().then(function () { });
-            } }),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
-};
-
-var SaveAsViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose;
-    var classes = useTrendingStyles();
-    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(''), error = _c[0], setError = _c[1];
-    var _d = useTrendingContext(), _e = _d.state, viewTags = _e.viewTags, views = _e.views, viewSelected = _e.viewSelected, _f = _d.actions, setViewSelected = _f.setViewSelected; _f.setViewTags;
-    var _g = useState(true), isPublic = _g[0], setIsPublic = _g[1];
-    var _h = useState(''), newView = _h[0], setNewView = _h[1];
-    var handleCheck = function () { return setIsPublic(!isPublic); };
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp, ViewId_1, shouldClose_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+    var expanded = useMemo(function () {
+        return Object.keys(openTagFolders).map(function (el) { return parseInt(el); });
+    }, [openTagFolders]);
+    useEffect(function () {
+        getTagsTreeData();
+    }, [isOpen]);
+    var handleDrop = function (tree, options) { return __awaiter(void 0, void 0, void 0, function () {
+        var tagId, newFolderId, newTree, newTree;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     setIsLoading(true);
-                    return [4 /*yield*/, upsertView(null, newView, isPublic)];
+                    if (!options.dragSource) return [3 /*break*/, 5];
+                    tagId = Number(options.dragSource.id);
+                    newFolderId = Number((_a = options.dropTarget) === null || _a === void 0 ? void 0 : _a.id) || null;
+                    if (tagId === newFolderId) {
+                        setIsLoading(false);
+                        return [2 /*return*/];
+                    }
+                    if (!(((_b = options.dragSource.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F")) return [3 /*break*/, 2];
+                    return [4 /*yield*/, upsertTagFolder(tagId, newFolderId, options.dragSource.text, true)];
                 case 1:
-                    resp = _a.sent();
-                    if (!resp.ok) return [3 /*break*/, 3];
-                    ViewId_1 = resp.data.returnValue;
-                    shouldClose_1 = true;
-                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
-                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible, Unit = _a.Unit;
-                            upsertViewTag(ViewId_1, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale, Unit)
-                                .then(function (r) {
-                                if (!r.ok) {
-                                    setError(function (prevErr) { return "".concat(prevErr, ". ").concat(r.message); });
-                                    if (shouldClose_1) {
-                                        shouldClose_1 = false;
-                                    }
-                                }
-                            });
-                        }))];
-                case 2:
-                    _a.sent();
-                    handleClose(shouldClose_1);
+                    newTree = _c.sent();
+                    if (!newTree.ok) {
+                        setError(newTree.message);
+                    }
                     return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, changeTagFolderToTag(tagId, newFolderId)];
                 case 3:
-                    setError(resp.message);
-                    _a.label = 4;
+                    newTree = _c.sent();
+                    if (!newTree.ok) {
+                        setError(newTree.message);
+                    }
+                    _c.label = 4;
                 case 4:
+                    setTagsTreeData(tree);
+                    _c.label = 5;
+                case 5:
                     setIsLoading(false);
                     return [2 /*return*/];
             }
         });
     }); };
+    var handleClick = function (node) {
+        if (node.data) {
+            onTagSelect(node.data);
+        }
+    };
+    var handleCloseContextMenu = function (e) {
+        if (showContextMenu) {
+            setShowContextMenu(false);
+        }
+    };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Save View As' },
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) { return option.ViewName; }, freeSolo: true, onChange: function (ev, val) {
-                            setViewSelected(val);
-                            if (val) {
-                                setNewView("");
-                            }
-                        }, onInputChange: function (event, newInputValue) {
-                            var isValueInViews = views.some(function (view) { return view.ViewName === newInputValue; });
-                            if (!isValueInViews) {
-                                setNewView(newInputValue);
-                            }
-                        }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
-                        (React__default.createElement(Box, null,
-                            React__default.createElement(TextField, { style: { minWidth: "600px" }, size: 'small', id: "outlined-basic", label: "View name", variant: "outlined", value: newView, onChange: (function (e) { return setNewView(e.target.value); }) }))))),
-                React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
-                    React__default.createElement("label", null,
-                        "Public",
-                        React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck })))),
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
+        React__default.createElement("div", { style: { display: isOpen ? "block" : "none", minHeight: "700px", minWidth: "800px" }, onClick: handleCloseContextMenu },
+            React__default.createElement("div", { style: { overflowY: 'auto', maxHeight: '700px' } }, isLoading ? (React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
+                React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(DndProvider$1, { backend: HTML5Backend },
+                React__default.createElement(Tree, { classes: {
+                        root: classes.assetRoot,
+                        dropTarget: classes.dropTarget
+                    }, initialOpen: expanded, tree: tagsTreeData, rootId: backendOffset, onDrop: handleDrop, canDrop: function (tag, options) {
+                        return !selectedNodes.some(function (selectedNode) {
+                            return Number(selectedNode.id) === Number(options.dropTargetId);
+                        });
+                    }, render: function (node, options) {
+                        var selected = selectedNodes.some(function (selectedNode) { return Number(selectedNode.id) === Number(node.id); });
+                        return (React__default.createElement(TagFolderCustomNode, { setContextMenuOver: handleContextMenu, node: node, options: options, isSelected: selected, openTagFolders: openTagFolders, setOpenTagFolders: setOpenTagFolders, handleSelect: handleClick }));
+                    }, dragPreviewRender: function (monitorProps) { return (React__default.createElement(CustomDragPreview, { monitorProps: monitorProps })
+                    // <div>{monitorProps.item.data?.TagName}</div>
+                    ); } }))))),
+        React__default.createElement(ContextMenu, { anchorPoint: anchorPoint, isOpen: showContextMenu, setShowContextMenu: setShowContextMenu, tagNodeSelectedInTree: tagNodeSelectedInTree, getTagsTreeData: getTagsTreeData }),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
+var TagsTreeModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, onTagSelect = _a.onTagSelect;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Box, null,
+                    React__default.createElement(Typography, { id: "modal-modal-description" },
+                        React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect })))))));
+};
+
 var useTagsDataTable = function (_a) {
-    var cursorData = _a.cursorData, viewTags = _a.viewTags, chartData = _a.chartData;
+    var cursorData = _a.cursorData, viewTagsMap = _a.viewTagsMap, chartData = _a.chartData;
     return useMemo(function () {
         var _a;
         var dataTable = {};
         if (cursorData) {
-            var _loop_1 = function (idx) {
-                var tag = viewTags[idx];
+            var _loop_1 = function (viewTagEntry) {
+                var tag = viewTagsMap[viewTagEntry].viewTag;
                 var datasetForTag = ((_a = chartData.datasets.find(function (ds) {
                     return ds.tagId === (tag === null || tag === void 0 ? void 0 : tag.TagId);
                 })) === null || _a === void 0 ? void 0 : _a.data) || [];
@@ -9828,8 +9894,8 @@ var useTagsDataTable = function (_a) {
                 var p1Found = false;
                 var pmin = { x: 0, y: Number.POSITIVE_INFINITY };
                 var pmax = { x: 0, y: Number.NEGATIVE_INFINITY };
-                for (var idx_1 = 0; idx_1 < datasetForTag.length; idx_1++) {
-                    var curr = datasetForTag[idx_1];
+                for (var idx = 0; idx < datasetForTag.length; idx++) {
+                    var curr = datasetForTag[idx];
                     var currentVal = curr.x;
                     if (!p1Found) {
                         if (currentVal < cursorData.x1) {
@@ -9866,12 +9932,12 @@ var useTagsDataTable = function (_a) {
                     pmax: pmax
                 };
             };
-            for (var idx = 0; idx < viewTags.length; idx++) {
-                _loop_1(idx);
+            for (var viewTagEntry in viewTagsMap) {
+                _loop_1(viewTagEntry);
             }
         }
         return dataTable;
-    }, [viewTags, chartData, cursorData]);
+    }, [viewTagsMap, chartData, cursorData]);
 };
 
 var useTagsTableStyles = makeStyles$1(function (theme) { return ({
@@ -10009,7 +10075,7 @@ var formatTimeDiffWithMs = function (start, end) {
 };
 
 var TableComponent = function (_a) {
-    var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI, viewTagForDelete = _a.viewTagForDelete, setViewTagForDelete = _a.setViewTagForDelete, selectedRowIndex = _a.selectedRowIndex, setSelectedRowIndex = _a.setSelectedRowIndex, handleRightClick = _a.handleRightClick; _a.setContextMenuPosition; var contextMenuPosition = _a.contextMenuPosition, openContextMenu = _a.openContextMenu, setOpenContextMenu = _a.setOpenContextMenu;
+    var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI, viewTagForDelete = _a.viewTagForDelete, setViewTagForDelete = _a.setViewTagForDelete, selectedRowTagId = _a.selectedRowTagId, setSelectedRowTagId = _a.setSelectedRowTagId, handleRightClick = _a.handleRightClick; _a.setContextMenuPosition; var contextMenuPosition = _a.contextMenuPosition, openContextMenu = _a.openContextMenu, setOpenContextMenu = _a.setOpenContextMenu;
     var classes = useTagsTableStyles();
     var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setViewTagsAndRefetch = _d.setViewTagsAndRefetch;
     var _e = useState({}); _e[0]; _e[1];
@@ -10019,44 +10085,53 @@ var TableComponent = function (_a) {
     var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
     var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
     var _l = useState(''), snackbarMessage = _l[0], setSnackbarMessage = _l[1];
-    var dataTable = useTagsDataTable({ viewTags: viewTags, chartData: chartData, cursorData: cursorData });
+    var dataTable = useTagsDataTable({ viewTagsMap: viewTags, chartData: chartData, cursorData: cursorData });
     var handleChange = function (tagId, value, property) {
-        var newTags = viewTags.map(function (tag) {
-            var _a;
-            return tag.TagId === tagId ? __assign(__assign({}, tag), (_a = {}, _a[property] = value, _a.IsAutoScale = false, _a)) : tag;
-        });
+        var newTags = structuredClone(viewTags);
+        newTags[tagId]['viewTag'][property] = value;
+        newTags[tagId]['viewTag']['IsAutoScale'] = false;
         setViewTags(newTags);
     };
+    var handleChangeScale = function (value, scale, tagId) {
+        handleChange(tagId, value, scale);
+    };
     var handleChangeAlias = function (tagId, newName) {
-        var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { Alias: newName }) : tag; });
+        var newTags = structuredClone(viewTags);
+        newTags[tagId]['viewTag']['Alias'] = newName;
         setViewTags(newTags);
     };
     var handleVisibilityChange = function (tagId, value) {
-        var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { IsVisible: value }) : tag; });
+        var newTags = structuredClone(viewTags);
+        newTags[tagId]['viewTag']['IsVisible'] = value;
         setViewTags(newTags);
     };
     var handleUnitChange = function (tagId, newUnit) {
-        var newTags = viewTags.map(function (tag) { return (tag.TagId === tagId ? __assign(__assign({}, tag), { Unit: newUnit }) : tag); });
+        var newTags = structuredClone(viewTags);
+        newTags[tagId]['viewTag']['Unit'] = newUnit;
         setViewTags(newTags);
     };
     var handleAutoScaleChange = function (tagId, checked) {
-        var newTags = viewTags.map(function (t) { return t.TagId == tagId ? __assign(__assign({}, t), { IsAutoScale: !checked }) : t; });
+        var newTags = structuredClone(viewTags);
+        newTags[tagId]['viewTag']['IsAutoScale'] = !checked;
         setViewTags(newTags);
     };
     var handleColorChange = function (tagId, value) {
-        var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { Color: value }) : tag; });
+        var newTags = structuredClone(viewTags);
+        newTags[tagId]['viewTag']['Color'] = value;
         setViewTags(newTags);
     };
     var handleDeleteTag = function (tagId) {
-        var newTags = viewTags.filter(function (tag) { return tag.TagId !== tagId; });
+        var newTags = structuredClone(viewTags);
+        delete newTags[tagId];
         setViewTagsAndRefetch(newTags);
     };
     var handleAddTag = function (newTag) {
-        var newArr = __spreadArray([], viewTags, true);
-        if (newTag) {
-            newArr.push(__assign(__assign({}, newTag), { IsVisible: true, TagType: newTag.TagTypeCode, Color: newTag.Color || getRandomColor() }));
-            setViewTagsAndRefetch(newArr);
-        }
+        var newTags = structuredClone(viewTags);
+        newTags[newTag.TagId] = {
+            viewTag: __assign(__assign({}, newTag), { IsVisible: true, TagType: newTag.TagTypeCode, Color: newTag.Color || getRandomColor(), IsAutoScale: newTag.MinScale || newTag.MaxScale ? false : true }),
+            order: Object.keys(viewTags).length
+        };
+        setViewTagsAndRefetch(newTags);
     };
     var handleAbleScales = function (tagId, checked) {
         if (checked) {
@@ -10114,7 +10189,7 @@ var TableComponent = function (_a) {
         },
     ]);
     var handleTagSelect = function (selectedTag) {
-        var alreadySelected = viewTags.find(function (vt) { return vt.TagId === selectedTag.TagId; });
+        var alreadySelected = viewTags[selectedTag.TagId];
         if (!alreadySelected) {
             handleAddTag(selectedTag);
         }
@@ -10122,13 +10197,13 @@ var TableComponent = function (_a) {
             setError("".concat(selectedTag.TagName, " is already selected"));
         }
     };
-    var handleDelete = function (index) { return __awaiter(void 0, void 0, void 0, function () {
+    var handleDelete = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             if (!isNil$1(viewTagForDelete)) {
                 if (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) {
                     handleDeleteTag(viewTagForDelete.TagId);
                 }
-                setSelectedRowIndex(null); // Reset the selected row index 
+                setSelectedRowTagId(null); // Reset the selected row index 
                 setViewTagForDelete(null);
             }
             return [2 /*return*/];
@@ -10155,8 +10230,8 @@ var TableComponent = function (_a) {
                     if (!deleteResp.ok) {
                         setError(deleteResp.message);
                     }
-                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
-                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible, Unit = _a.Unit;
+                    return [4 /*yield*/, Promise.allSettled(Object.values(viewTags).sort(function (a, b) { return b.order - a.order; }).map(function (_a) {
+                            var _b = _a.viewTag, TagId = _b.TagId, Color = _b.Color, MinScale = _b.MinScale, MaxScale = _b.MaxScale, IsAutoScale = _b.IsAutoScale, IsVisible = _b.IsVisible, Unit = _b.Unit;
                             upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale, Unit)
                                 .then(function (r) {
                                 if (!r.ok) {
@@ -10171,7 +10246,7 @@ var TableComponent = function (_a) {
                             setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
                         }
                         else {
-                            setSelectedRowIndex(null);
+                            setSelectedRowTagId(null);
                             setSnackbarMessage('View saved successfully');
                         }
                     });
@@ -10194,13 +10269,13 @@ var TableComponent = function (_a) {
     };
     useEffect(function () {
         var handleGlobalClick = function (e) {
-            if (selectedRowIndex !== null) {
-                setSelectedRowIndex(null);
+            if (selectedRowTagId !== null) {
+                setSelectedRowTagId(null);
             }
         };
         var handleKeyDown = function (e) {
-            if (e.key === "Escape" && selectedRowIndex !== null) {
-                setSelectedRowIndex(null);
+            if (e.key === "Escape" && selectedRowTagId !== null) {
+                setSelectedRowTagId(null);
             }
         };
         // Attach event listeners
@@ -10211,14 +10286,14 @@ var TableComponent = function (_a) {
             document.removeEventListener("click", handleGlobalClick);
             document.removeEventListener("keydown", handleKeyDown);
         };
-    }, [selectedRowIndex]);
+    }, [selectedRowTagId]);
     var handleSaveDefaultToTag = function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a, TagId, Alias, Color, MinScale, MaxScale, Unit, IsVisible, IsAutoScale, saveTagDefaultsResp, upsertViewTagResp;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    if (!(viewSelected && selectedRowIndex !== null)) return [3 /*break*/, 3];
-                    _a = viewTags[selectedRowIndex], TagId = _a.TagId, Alias = _a.Alias, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, Unit = _a.Unit, IsVisible = _a.IsVisible, IsAutoScale = _a.IsAutoScale;
+                    if (!(viewSelected && selectedRowTagId !== null)) return [3 /*break*/, 3];
+                    _a = viewTags[selectedRowTagId].viewTag, TagId = _a.TagId, Alias = _a.Alias, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, Unit = _a.Unit, IsVisible = _a.IsVisible, IsAutoScale = _a.IsAutoScale;
                     return [4 /*yield*/, saveTagDefaults(TagId, Alias, Color, MinScale, MaxScale, Unit)];
                 case 1:
                     saveTagDefaultsResp = _b.sent();
@@ -10231,7 +10306,7 @@ var TableComponent = function (_a) {
                     if (!upsertViewTagResp.ok) {
                         setError(upsertViewTagResp.message);
                     }
-                    setSelectedRowIndex(null);
+                    setSelectedRowTagId(null);
                     _b.label = 3;
                 case 3: return [2 /*return*/];
             }
@@ -10255,7 +10330,7 @@ var TableComponent = function (_a) {
                         React__default.createElement("thead", null,
                             React__default.createElement("tr", null,
                                 React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.viewSelected) }, viewSelected ?
-                                    (React__default.createElement(Button$1, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setLoadViewOpen(true); } }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) || '')) : (React__default.createElement(Button$1, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setSaveAsViewModalOpen(true); } },
+                                    (React__default.createElement(Button$1, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setLoadViewOpen(true); }, startIcon: viewSelected.IsPublic ? React__default.createElement(React__default.Fragment, null) : React__default.createElement(LockIcon, { fontSize: 'small' }) }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) || '')) : (React__default.createElement(Button$1, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setSaveAsViewModalOpen(true); } },
                                     React__default.createElement("i", null,
                                         React__default.createElement(SaveIcon, null),
                                         "(Save view as)")))),
@@ -10339,11 +10414,12 @@ var TableComponent = function (_a) {
             React__default.createElement(Grid$1, { item: true, xs: 12 },
                 React__default.createElement("div", { style: { width: '100%', height: '100%', maxHeight: '100%' } },
                     React__default.createElement("table", { cellPadding: '4px', style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
-                        React__default.createElement("tbody", null, viewTags && viewTags.length && Array.isArray(viewTags) ? viewTags.map(function (tag, index) {
-                            var _a, _b, _c, _d, _e, _f, _g;
+                        React__default.createElement("tbody", null, Object.values(viewTags).length ? Object.values(viewTags).map(function (_a) {
+                            var _b, _c, _d, _e, _f, _g, _h;
+                            var tag = _a.viewTag;
                             return (React__default.createElement("tr", { key: tag.TagName, 
                                 // onClick={() => handleRowClick(index)}
-                                onContextMenu: function (e) { return handleRightClick(e, index); }, className: classes.rowHover },
+                                onContextMenu: function (e) { return handleRightClick(e, tag.TagId); }, className: classes.rowHover },
                                 React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
                                     React__default.createElement("input", { type: "checkbox", checked: tag.IsVisible, onChange: function (e) { return handleVisibilityChange(tag.TagId, e.target.checked); } })),
                                 React__default.createElement("td", { className: classes.aliasCol },
@@ -10362,24 +10438,14 @@ var TableComponent = function (_a) {
                                             backgroundColor: 'rgba(239, 239, 239, 0.3)',
                                             color: 'rgba(84, 84, 84, 1)',
                                             border: '1px solid rgba(118, 118, 118, 0.3)'
-                                        } : {})), value: tag.MinScale, onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
-                                            var value = e.target.value;
-                                            var numericValue = Number(value);
-                                            if (!isNaN(numericValue) && value.trim() !== '') {
-                                                handleChange(tag.TagId, numericValue, 'MinScale');
-                                            }
-                                        } })),
+                                        } : {})), value: tag.MinScale, onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) { return handleChangeScale((e.target).value, "MinScale", tag.TagId); } })),
                                 React__default.createElement("td", { className: classes.inputCol },
                                     React__default.createElement("input", { type: "number", className: classes.numberInput, style: __assign({ width: '100%', WebkitAppearance: 'none' }, (tag.IsAutoScale ? {
                                             backgroundColor: 'rgba(239, 239, 239, 0.3)',
                                             color: 'rgba(84, 84, 84, 1)',
                                             border: '1px solid rgba(118, 118, 118, 0.3)'
                                         } : {})), value: tag.MaxScale, onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
-                                            var value = e.target.value;
-                                            var numericValue = Number(value);
-                                            if (!isNaN(numericValue) && value.trim() !== '') {
-                                                handleChange(tag.TagId, numericValue, 'MaxScale');
-                                            }
+                                            handleChangeScale((e.target).value, "MaxScale", tag.TagId);
                                         } })),
                                 React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
                                     React__default.createElement("input", { type: "checkbox", checked: !!tag.IsAutoScale, onChange: function (e) { return handleAutoScaleChange(tag.TagId, tag.IsAutoScale); } })),
@@ -10390,14 +10456,14 @@ var TableComponent = function (_a) {
                                             var value = e.target.value;
                                             handleUnitChange(tag.TagId, value);
                                         }, value: tag.Unit === "-" ? '' : tag.Unit, onFocus: function (e) { return e.target.select(); } })),
-                                React__default.createElement("td", null, round((_a = dataTable[tag.TagName]) === null || _a === void 0 ? void 0 : _a.y1, 3) || 0),
-                                React__default.createElement("td", { className: classes.doubleInput }, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y2, 3) || 0),
-                                React__default.createElement("td", null, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2y1, 3) || 0),
+                                React__default.createElement("td", null, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y1, 3) || 0),
+                                React__default.createElement("td", { className: classes.doubleInput }, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2, 3) || 0),
+                                React__default.createElement("td", null, round((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.y2y1, 3) || 0),
                                 React__default.createElement("td", null,
-                                    !isNaN(((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.pmin.y) * 0) ? round((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y, 3) : 0,
+                                    !isNaN(((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y) * 0) ? round((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmin.y, 3) : 0,
                                     " "),
                                 React__default.createElement("td", null,
-                                    !isNaN(((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmax.y) * 0) ? round((_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y) : 0,
+                                    !isNaN(((_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y) * 0) ? round((_h = dataTable[tag.TagName]) === null || _h === void 0 ? void 0 : _h.pmax.y) : 0,
                                     " ")));
                         }) : React__default.createElement("div", { style: { padding: '1rem' } },
                             React__default.createElement("div", { style: { padding: "1rem" } }, "No tag view detected. "),
@@ -10844,23 +10910,32 @@ var TrendingChart = function (_a) {
     var _c = useState(null), lineTabCoords = _c[0], setLineTabCoords = _c[1];
     var _d = useState(null), chartArea = _d[0], setChartArea = _d[1];
     var chartRef = useRef(null);
+    var forDebounce = useRef({
+        viewTags: viewTags,
+        series: series,
+        setChartOptions: setChartOptions,
+        setChartData: setChartData
+    });
     var debouncedUpdateChart = useRef(debounce(function () {
         if (chartRef.current) {
             updateCursorData(chartRef.current, setCursorData);
             chartRef.current.update();
         }
-    }, 250)).current;
-    var _e = useState(false), chartShouldInitCursors = _e[0], setChartShouldInitCursors = _e[1];
-    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
-    var xAxisDatePlugin = useXAxisDatePlugin();
-    var yAxisPlugin = useYAxisPlugin();
-    var seriesVsTags = useRef({});
-    useEffect(function () {
+    }, 250));
+    forDebounce.current = {
+        viewTags: viewTags,
+        series: series,
+        setChartOptions: setChartOptions,
+        setChartData: setChartData
+    };
+    var debouncedUpdateChartBasedOnData = useRef(debounce(function () {
+        var _a = forDebounce.current, viewTags = _a.viewTags, series = _a.series, setChartOptions = _a.setChartOptions, setChartData = _a.setChartData;
         var axes = [];
         if (!series.length) {
             return;
         }
-        viewTags.forEach(function (tag, index) {
+        Object.values(viewTags).forEach(function (_a, index) {
+            var tag = _a.viewTag;
             var existingAxis = axes.findIndex(function (existingTag) {
                 return areRangesSimilar(existingTag, tag);
             });
@@ -10874,6 +10949,11 @@ var TrendingChart = function (_a) {
         });
         // Configure yAxes based on grouped axes
         var yAxesConfig = axes.map(function (axis) {
+            var min = Number(axis.MinScale);
+            var max = Number(axis.MaxScale);
+            if (!min && !max) {
+                max = 1;
+            }
             return {
                 id: "y-axis-".concat(axis.TagId),
                 type: "linear",
@@ -10882,10 +10962,10 @@ var TrendingChart = function (_a) {
                     display: true,
                     labelString: axis.TagName
                 },
-                min: axis.IsAutoScale ? undefined : axis.MinScale,
-                max: axis.IsAutoScale ? undefined : axis.MaxScale,
-                suggestedMin: axis.IsAutoScale ? undefined : axis.MinScale,
-                suggestedMax: axis.IsAutoScale ? undefined : axis.MaxScale,
+                min: axis.IsAutoScale ? undefined : min,
+                max: axis.IsAutoScale ? undefined : max,
+                suggestedMin: axis.IsAutoScale ? undefined : min,
+                suggestedMax: axis.IsAutoScale ? undefined : max,
                 stepSize: 10,
                 grid: {
                     display: true
@@ -10923,7 +11003,9 @@ var TrendingChart = function (_a) {
             return newResp;
         });
         var updatedSeries = series.map(function (serie, index) {
-            var tag = viewTags[index];
+            var _a;
+            var tagsSortedArray = Object.values(viewTags).sort(function (a, b) { return b.order - a.order; });
+            var tag = (_a = tagsSortedArray[index]) === null || _a === void 0 ? void 0 : _a.viewTag;
             var yAxisTagId = seriesVsTags.current[tag === null || tag === void 0 ? void 0 : tag.TagId];
             return {
                 yAxisID: "y-axis-".concat(yAxisTagId),
@@ -10942,6 +11024,14 @@ var TrendingChart = function (_a) {
             labels: [],
             datasets: updatedSeries
         });
+    }, 1000));
+    var _e = useState(false), chartShouldInitCursors = _e[0], setChartShouldInitCursors = _e[1];
+    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
+    var xAxisDatePlugin = useXAxisDatePlugin();
+    var yAxisPlugin = useYAxisPlugin();
+    var seriesVsTags = useRef({});
+    useEffect(function () {
+        debouncedUpdateChartBasedOnData.current();
     }, [state.graphShouldUpdate, series]);
     useEffect(function () {
         if (chartShouldInitCursors) {
@@ -10959,7 +11049,7 @@ var TrendingChart = function (_a) {
                 });
                 // @ts-ignore
                 chartRef.current.mouseX = newLeft;
-                debouncedUpdateChart();
+                debouncedUpdateChart.current();
             } })) : null,
         lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'blue', initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, chartArea: chartArea, onUpdate: function (newLeft) {
                 setLineTabCoords(function (prevCoords) {
@@ -10968,7 +11058,7 @@ var TrendingChart = function (_a) {
                 });
                 // @ts-ignore
                 chartRef.current.secondLineX = newLeft;
-                debouncedUpdateChart();
+                debouncedUpdateChart.current();
             } })) : null,
         React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin] })));
 };
@@ -10980,7 +11070,7 @@ var Trending = function (_a) {
     var _d = useState(''), error = _d[0], setError = _d[1];
     var _e = useState(true), loading = _e[0], setLoading = _e[1];
     var _f = useState([]), series = _f[0], setSeries = _f[1];
-    var _g = useState(null), selectedRowIndex = _g[0], setSelectedRowIndex = _g[1];
+    var _g = useState(null), selectedRowTagId = _g[0], setSelectedRowTagId = _g[1];
     var _h = useState(null), viewTagForDelete = _h[0], setViewTagForDelete = _h[1];
     var _j = useChartOptions(), chartOptions = _j[0], setChartOptions = _j[1];
     var _k = useState({
@@ -10991,16 +11081,16 @@ var Trending = function (_a) {
     var debounceForFetchingData = useRef(null);
     var _m = useState({ x: 0, y: 0 }), contextMenuPosition = _m[0], setContextMenuPosition = _m[1];
     var _o = useState(false), openContextMenu = _o[0], setOpenContextMenu = _o[1];
-    var handleRightClick = function (event, index) {
+    var handleRightClick = function (event, tagId) {
         event.preventDefault();
         event.stopPropagation(); // Prevent the click event from propagating to the document
-        if (isNumber(index)) {
-            setViewTagForDelete(viewTags[index]);
+        if (isNumber(tagId)) {
+            setViewTagForDelete(viewTags[tagId].viewTag);
         }
         else {
             setViewTagForDelete(null);
         }
-        setSelectedRowIndex(index);
+        setSelectedRowTagId(tagId);
         setOpenContextMenu(true);
         setContextMenuPosition({ x: event.clientX, y: event.clientY });
     };
@@ -11010,14 +11100,15 @@ var Trending = function (_a) {
         }
         debounceForFetchingData.current = setTimeout(function () {
             var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
-                var tagIds, response, error_1;
+                var viewTagsArr, tagIds, response, error_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             _a.trys.push([0, 3, , 4]);
                             setLoading(true);
-                            if (!(Array.isArray(viewTags) && viewTags.length)) return [3 /*break*/, 2];
-                            tagIds = viewTags.map(function (tag) { return tag.TagId; });
+                            viewTagsArr = Object.values(viewTags).sort(function (a, b) { return b.order - a.order; });
+                            tagIds = viewTagsArr.map(function (tag) { return tag.viewTag.TagId; });
+                            if (!tagIds.length) return [3 /*break*/, 2];
                             return [4 /*yield*/, axios.post("/series?nodeName=null", {
                                     start: state.timeScopeStart.getTime(),
                                     end: state.timeScopeEnd.getTime(),
@@ -11042,6 +11133,11 @@ var Trending = function (_a) {
             }); };
             fetchData();
         }, 800);
+        return function () {
+            if (debounceForFetchingData.current) {
+                clearTimeout(debounceForFetchingData.current);
+            }
+        };
     }, [shouldRefetchSeries]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "88svh", margin: 0 }, onClick: function () { return setOpenContextMenu(false); } },
@@ -11072,7 +11168,7 @@ var Trending = function (_a) {
                             zIndex: 2
                         } },
                         React__default.createElement(CircularProgress$1, { size: "2rem" }))),
-                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, getTagsFromAPI: getTagsFromAPI, openContextMenu: openContextMenu, setOpenContextMenu: setOpenContextMenu, viewTagForDelete: viewTagForDelete, setViewTagForDelete: setViewTagForDelete, selectedRowIndex: selectedRowIndex, setSelectedRowIndex: setSelectedRowIndex, handleRightClick: handleRightClick, contextMenuPosition: contextMenuPosition, setContextMenuPosition: setContextMenuPosition }))),
+                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, getTagsFromAPI: getTagsFromAPI, openContextMenu: openContextMenu, setOpenContextMenu: setOpenContextMenu, viewTagForDelete: viewTagForDelete, setViewTagForDelete: setViewTagForDelete, selectedRowTagId: selectedRowTagId, setSelectedRowTagId: setSelectedRowTagId, handleRightClick: handleRightClick, contextMenuPosition: contextMenuPosition, setContextMenuPosition: setContextMenuPosition }))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, title: "ERROR" })));
 };
 
@@ -11104,12 +11200,16 @@ var TrendingsPage = function (props) {
                     case 2:
                         viewTagsResp = _a.sent();
                         if (viewTagsResp.ok) {
-                            viewTags = viewTagsResp.data.tables[0].rows.map(function (e) {
-                                if (isNil$1(e.Color)) {
-                                    e.Color = getRandomColor();
+                            viewTags = viewTagsResp.data.tables[0].rows.reduce(function (carr, curr, idx) {
+                                if (isNil$1(curr.Color)) {
+                                    curr.Color = getRandomColor();
                                 }
-                                return e;
-                            });
+                                carr[curr.TagId] = {
+                                    viewTag: curr,
+                                    order: idx
+                                };
+                                return carr;
+                            }, {});
                             setViewTagsAndRefetch(viewTags);
                         }
                         else {
@@ -11358,5 +11458,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getProfiles, getShiftStyle, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TimeService, TreePickerControl, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getProfiles, getShiftStyle, getTokenFromLS, getUsers, renewToken, setPassword, setProfilesToUser, upsertUser, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map