@dexteel/mesf-core 4.8.7 → 4.9.0

package/dist/index.esm.js

@@ -26,19 +26,20 @@ import { AgGridReact } from 'ag-grid-react';
 import { withStyles, alpha, makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
 import Typography$1 from '@material-ui/core/Typography';
 import { useForm, Controller, get as get$2 } from 'react-hook-form';
-import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1, Autocomplete } from '@material-ui/lab';
+import { Alert as Alert$3, Autocomplete } from '@material-ui/lab';
 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 Popover from '@material-ui/core/Popover';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
 import FolderIcon from '@material-ui/icons/Folder';
-import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
+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 { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
@@ -72,7 +73,6 @@ import 'ag-grid-enterprise/styles/ag-grid.css';
 import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
-import { isAncestor, Tree } from '@minoru/react-dnd-treeview';
 import ImageIcon from '@material-ui/icons/Image';
 import ListAltIcon from '@material-ui/icons/ListAlt';
 import DescriptionIcon from '@material-ui/icons/Description';
@@ -4305,7 +4305,7 @@ var useStyles$l = makeStyles$1(function (theme) { return ({
         opacity: 0.5
     }
 }); });
-var customStyles = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
+var customStyles$1 = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
 var CustomNode = function (_a) {
     var setContextMenuOver = _a.setContextMenuOver, onDoubleClick = _a.onDoubleClick; _a.testIdPrefix; var isSelected = _a.isSelected, props = __rest(_a, ["setContextMenuOver", "onDoubleClick", "testIdPrefix", "isSelected"]);
     var _c = useConfigurationAssetContext(), openAssets = _c.state.openAssets, setOpenAssets = _c.actions.setOpenAssets;
@@ -4356,7 +4356,7 @@ var CustomNode = function (_a) {
         };
     }, []);
     return (React__default.createElement("div", { className: nodeClasses, style: { paddingInlineStart: indent }, "data-node-id": id, onClick: handleClick, title: "".concat(props.node.id, " - ").concat(props.node.text) },
-        React__default.createElement("style", null, customStyles),
+        React__default.createElement("style", null, customStyles$1),
         props.node.droppable ? (React__default.createElement("div", { className: "".concat(classes.arrow, " ").concat(props.isOpen ? classes["arrow.is-open"] : "") },
             React__default.createElement("div", { onClick: handleToggle },
                 React__default.createElement(ArrowRight, { "data-testid": "arrow-right-icon-".concat(id) })))) : null,
@@ -4432,7 +4432,7 @@ var useStyles$j = makeStyles$1(function (theme) { return ({
         display: "flex"
     }
 }); });
-var CustomDragPreview = function (props) {
+var CustomDragPreview$1 = function (props) {
     var _a;
     var classes = useStyles$j();
     var item = props.monitorProps.item;
@@ -5455,7 +5455,7 @@ var AssetViewComponent = function () {
                                                     if (selectedNodes.length > 1) {
                                                         return (React__default.createElement(MultipleDragPreview, { dragSources: selectedNodes }));
                                                     }
-                                                    return (React__default.createElement(CustomDragPreview, { monitorProps: monitorProps }));
+                                                    return (React__default.createElement(CustomDragPreview$1, { monitorProps: monitorProps }));
                                                 } })))))),
                             React__default.createElement(CreateNewAssetDialog, { show: showCreateNewAssetDialog, onHide: function (shouldUpdate) {
                                     setShowCreateNewAssetDialog(false);
@@ -9983,275 +9983,42 @@ var ColorPicker = function (_a) {
                 } })); })))));
 };
 
-var useTagsTableStyles = makeStyles$1(function (theme) { return ({
-    checkbox: {
-        '& input[type="checkbox"]': {
-            zoom: 1.5
-        },
-        textAlign: 'center'
-    },
-    rowHover: {
-        '&:hover': {
-            backgroundColor: "#f2f2f2"
-        }
-    },
-    topTitles: {
-        border: "0.0625rem black solid",
-        borderBottom: "none",
-        backgroundColor: "#e9ecef"
-    },
-    bottomTitlesRow: {
-        '& th': {
-            border: "1px black solid"
-        },
-        backgroundColor: "#e9ecef"
-    },
-    doubleInput: {
-        padding: "0",
-        '& input[type="text"] ': {
-            width: "100%",
-            height: "17px",
-            display: "block",
-            margin: "0",
-            padding: "0"
-        }
-    },
-    inputCol: {
-        width: "11.25rem",
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    },
-    aliasCol: {
-        width: "18rem",
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    },
-    autoScale: {
-        width: '7.5rem'
-    },
-    scale: {
-        width: '37.5rem',
-        padding: "0"
-    },
-    visible: {
-        width: '3.75rem'
-    },
-    color: {
-        width: '4.375rem'
-    },
-    unit: {
-        width: '7.5rem'
-    },
-    numberInput: {
-        '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
-            '-webkit-appearance': 'none',
-            margin: 0
-        },
-        '&': {
-            '-moz-appearance': 'textfield'
+var getIhPath = function () { return localStorage.getItem('ihPath') || "[mssql2022].[IH_100020].[ih]"; };
+//tags
+var getTagsTree = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                return [4 /*yield*/, apiService.callV2(getIhPath() + ".[GetTagsTree]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
-    },
-    xStats: {
-    // ...
-    },
-    dataType: {
-        width: '30px',
-        height: '30px',
-        color: "white",
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        cursor: 'pointer',
-        border: "1px black solid"
-    }
-}); });
-
-var TagSelectionModal = function (_a) {
-    var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
-    var classes = useTagsTableStyles();
-    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(''), error = _c[0], setError = _c[1];
-    var _d = useState([]), treeData = _d[0], setTreeData = _d[1];
-    var _e = useState([]), expanded = _e[0], setExpanded = _e[1];
-    var viewTags = useTrendingContext().state.viewTags;
-    var currentColorIndex = useRef(0);
-    useEffect(function () {
-        var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var children;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!isOpen) return [3 /*break*/, 2];
-                        setIsLoading(true);
-                        return [4 /*yield*/, fetchChildren("root")];
-                    case 1:
-                        children = _a.sent();
-                        setTreeData([
-                            {
-                                TagId: null,
-                                TagName: "root",
-                                children: children,
-                                isLoaded: true,
-                                shortName: "Tags",
-                                tag: null
-                            },
-                        ]);
-                        setIsLoading(false);
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        }); };
-        loadData();
-    }, [isOpen]);
-    var getColor = function () {
-        var color = tagColors[currentColorIndex.current];
-        currentColorIndex.current =
-            (currentColorIndex.current + 1) % tagColors.length;
-        return color;
-    };
-    var fetchChildren = function (tagName, depth, maxDepth) {
-        if (depth === void 0) { depth = 0; }
-        if (maxDepth === void 0) { maxDepth = 3; }
-        return __awaiter(void 0, void 0, void 0, function () {
-            var response, childrenData, error_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        // Limiting the recursion depth for safety
-                        if (depth > maxDepth) {
-                            return [2 /*return*/, []];
-                        }
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 4, , 5]);
-                        return [4 /*yield*/, axios.get("/Tag/".concat(tagName, "/children"))];
-                    case 2:
-                        response = _a.sent();
-                        return [4 /*yield*/, Promise.all(response.data.map(function (dbTag) { return __awaiter(void 0, void 0, void 0, function () {
-                                var children, childTagName;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            children = null;
-                                            childTagName = tagName !== "root" ? tagName + "." + dbTag.tagName : dbTag.tagName;
-                                            if (!isNil$1(dbTag.tagType)) return [3 /*break*/, 2];
-                                            return [4 /*yield*/, fetchChildren(childTagName, depth + 1, maxDepth)];
-                                        case 1:
-                                            children = _a.sent();
-                                            _a.label = 2;
-                                        case 2: return [2 /*return*/, {
-                                                TagId: dbTag.tagId,
-                                                TagName: childTagName,
-                                                shortName: dbTag.tagName,
-                                                children: children,
-                                                isLoaded: true,
-                                                tag: {
-                                                    TagId: dbTag.tagId,
-                                                    TagName: dbTag.tagName,
-                                                    Color: dbTag.color || getColor(),
-                                                    IsAutoScale: (dbTag.minValue || dbTag.maxValue) ? false : true,
-                                                    MinScale: dbTag.minValue,
-                                                    MaxScale: dbTag.maxValue,
-                                                    IsVisible: true,
-                                                    TagType: dbTag.tagType,
-                                                    Alias: dbTag.alias,
-                                                    Unit: dbTag.unit
-                                                }
-                                            }];
-                                    }
-                                });
-                            }); }))];
-                    case 3:
-                        childrenData = _a.sent();
-                        // Flatten the structure if needed or perform other transformations
-                        // ...
-                        return [2 /*return*/, childrenData];
-                    case 4:
-                        error_1 = _a.sent();
-                        setError(error_1.message);
-                        return [2 /*return*/, []];
-                    case 5: return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /* I have to get the grandchildren because the toggle action would not be triggered if no children */
-    var handleNodeToggle = function (event, nodeIds) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            setExpanded(nodeIds);
-            return [2 /*return*/];
-        });
-    }); };
-    var handleNodeSelect = function (event, nodeId) { return __awaiter(void 0, void 0, void 0, function () {
-        var node, alreadySelected;
-        return __generator(this, function (_a) {
-            node = findNode(treeData, nodeId);
-            if (node === null || node === void 0 ? void 0 : node.TagId) {
-                alreadySelected = viewTags.find(function (vt) { return vt.TagId === node.TagId; });
-                if (!alreadySelected) {
-                    onTagSelect(node.tag);
-                }
-                else {
-                    setError("".concat(node.TagName, " is already added to the view"));
+    });
+}); };
+var changeTagFolderToTag = function (TagId, TagFolderId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, backendOffset, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                backendOffset = 1000000;
+                if (TagFolderId && TagFolderId > backendOffset) {
+                    TagFolderId = TagFolderId - backendOffset;
                 }
-            }
-            return [2 /*return*/];
-        });
-    }); };
-    var findNode = function (nodes, tagName) {
-        for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
-            var node = nodes_1[_i];
-            if (node.TagName === tagName) {
-                return node;
-            }
-            else if (node.children) {
-                var found = findNode(node.children, tagName);
-                if (found)
-                    return found;
-            }
+                parameters.push({ name: "TagId", value: TagId });
+                parameters.push({ name: "TagFolderId", value: TagFolderId });
+                return [4 /*yield*/, apiService.callV2(getIhPath() + ".[ChangeTagFolderToTag]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
-        return null;
-    };
-    var renderTree = function (node) {
-        var _a;
-        return (React__default.createElement(TreeItem$1, { key: node.TagName, nodeId: node.TagName, label: React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                ((_a = node.tag) === null || _a === void 0 ? void 0 : _a.TagType) && (React__default.createElement("div", { className: classes.dataType, style: {
-                        backgroundColor: node.tag.TagType === 'A' ? 'blue' : 'red'
-                    } }, node.tag.TagType)),
-                React__default.createElement("div", { style: { paddingLeft: "5px" } }, node.shortName)), endIcon: React__default.createElement(ArrowDropDownIcon, null), icon: node.children && node.children.length > 0 ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertDriveFileIcon, null)) }, node.children && node.children.map(function (child) { return renderTree(child); })));
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { style: {
-                display: isOpen ? "block" : "none",
-                minHeight: "400px",
-                minWidth: "600px"
-            } },
-            React__default.createElement("div", null, 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(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); }))))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
-};
-
-var AddTagModal = 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 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]"; };
+    });
+}); };
 var saveTagDefaults = function (TagId, Alias, Color, MinScale, MaxScale, Unit) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp;
     return __generator(this, function (_a) {
@@ -10374,6 +10141,279 @@ 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": {
+        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 0 5px 0",
+        width: "150px",
+        height: "auto",
+        margin: "0",
+        position: "fixed",
+        listStyle: "none",
+        boxShadow: "0 0 20px 0 #ccc"
+    },
+    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;
+    var node = _a.node, _j = _a.options, depth = _j.depth, isOpen = _j.isOpen, onToggle = _j.onToggle, options = _a.options, setOpenTagFolders = _a.setOpenTagFolders, openTagFolders = _a.openTagFolders, handleSelect = _a.handleSelect, isSelected = _a.isSelected;
+    var classes = useTagsTreeModalStyles();
+    var nodeClasses = "".concat(classes.customNodeRoot, " ").concat(classes.root, " ").concat(isSelected ? classes.selected : "");
+    var onClickHandler = function () {
+        var _a;
+        if (options.hasChild) {
+            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);
+        }
+    };
+    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 ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertChartIcon, { fontSize: 'small' })))),
+        ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagName) &&
+            React__default.createElement(React__default.Fragment, null,
+                ((_c = node.data) === null || _c === void 0 ? void 0 : _c.TagTypeCode) && ((_d = node.data) === null || _d === void 0 ? void 0 : _d.TagTypeCode) !== 'F' && (React__default.createElement("div", { className: classes.dataTypeOfTree, style: {
+                        backgroundColor: ((_e = node.data) === null || _e === void 0 ? void 0 : _e.TagTypeCode) === 'A' ? 'blue' : 'red',
+                        margin: "0 5px"
+                    } }, (_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode)),
+                React__default.createElement(Tooltip, { title: node.data.TagName, placement: "top", arrow: true },
+                    React__default.createElement(Typography, { variant: "body2" }, ((_g = node.data) === null || _g === void 0 ? void 0 : _g.Alias) || ((_h = node.data) === null || _h === void 0 ? void 0 : _h.TagName))))));
+};
+
+var NewTagSelectionModal = 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({}), openTagFolders = _e[0], setOpenTagFolders = _e[1];
+    var _f = useState([]), selectedNodes = _f[0]; _f[1];
+    useTrendingContext().state.viewTags;
+    var expanded = useMemo(function () {
+        return Object.keys(openTagFolders).map(function (el) { return parseInt(el); });
+    }, [openTagFolders]);
+    useEffect(function () {
+        var loadData = 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 (!isOpen) return [3 /*break*/, 2];
+                        setIsLoading(true);
+                        return [4 /*yield*/, getTagsTree()];
+                    case 1:
+                        tagsTree = _a.sent();
+                        if (tagsTree.ok) {
+                            rows = tagsTree.data.tables[0].rows;
+                            tree = buildTagsTreeV2(rows);
+                            setTagsTreeData(tree);
+                        }
+                        setIsLoading(false);
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadData();
+    }, [isOpen]);
+    var handleDrop = function (tree, options) { return __awaiter(void 0, void 0, void 0, function () {
+        var tagId, newFolderId, newTree;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(options.dragSource && options.dropTarget)) return [3 /*break*/, 2];
+                    setIsLoading(true);
+                    tagId = Number(options.dragSource.id);
+                    newFolderId = Number(options.dropTarget.id);
+                    if (tagId === newFolderId) {
+                        setIsLoading(false);
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, changeTagFolderToTag(tagId, newFolderId)];
+                case 1:
+                    newTree = _a.sent();
+                    setTagsTreeData(tree);
+                    setIsLoading(false);
+                    if (!newTree.ok) {
+                        setError(newTree.message);
+                    }
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClick = function (node) {
+        if (node.data) {
+            onTagSelect(node.data);
+        }
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { style: { display: isOpen ? "block" : "none", minHeight: "700px", minWidth: "800px" } },
+            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: 0, 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, { 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(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(NewTagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect })))))));
+};
+
+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 useTrendingStyles = makeStyles$1(function (theme) { return ({
     datetimePicker: {
         alignItems: "center",
@@ -10831,6 +10871,91 @@ var useTagsDataTable = function (_a) {
     }, [viewTags, chartData, cursorData]);
 };
 
+var useTagsTableStyles = makeStyles$1(function (theme) { return ({
+    checkbox: {
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        },
+        textAlign: 'center'
+    },
+    rowHover: {
+        '&:hover': {
+            backgroundColor: "#f2f2f2"
+        }
+    },
+    topTitles: {
+        border: "0.0625rem black solid",
+        borderBottom: "none",
+        backgroundColor: "#e9ecef"
+    },
+    bottomTitlesRow: {
+        '& th': {
+            border: "1px black solid"
+        },
+        backgroundColor: "#e9ecef"
+    },
+    doubleInput: {
+        padding: "0",
+        '& input[type="text"] ': {
+            width: "100%",
+            height: "17px",
+            display: "block",
+            margin: "0",
+            padding: "0"
+        }
+    },
+    inputCol: {
+        width: "11.25rem",
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    aliasCol: {
+        width: "18rem",
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    autoScale: {
+        width: '7.5rem'
+    },
+    scale: {
+        width: '37.5rem',
+        padding: "0"
+    },
+    visible: {
+        width: '3.75rem'
+    },
+    color: {
+        width: '4.375rem'
+    },
+    unit: {
+        width: '7.5rem'
+    },
+    numberInput: {
+        '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+            '-webkit-appearance': 'none',
+            margin: 0
+        },
+        '&': {
+            '-moz-appearance': 'textfield'
+        }
+    },
+    xStats: {
+    // ...
+    },
+    dataType: {
+        width: '30px',
+        height: '30px',
+        color: "white",
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: 'pointer',
+        border: "1px black solid"
+    }
+}); });
+
 var formatTimeDiffWithMs = function (start, end) {
     // Calculate total difference in milliseconds
     var totalMilliseconds = end - start;
@@ -10876,7 +11001,7 @@ var TableComponent = function (_a) {
     var _g = useState(false); _g[0]; var setIsLoading = _g[1];
     var _h = useState(null), viewTagForDelete = _h[0], setViewTagForDelete = _h[1];
     var _j = useState(null), selectedRowIndex = _j[0], setSelectedRowIndex = _j[1];
-    var _k = useState(false), addTagModalOpen = _k[0], setAddTagModalOpen = _k[1];
+    var _k = useState(false), tagsTreeModalOpen = _k[0], setTagsTreeModalOpen = _k[1];
     var _l = useState(false), saveAsViewModalOpen = _l[0], setSaveAsViewModalOpen = _l[1];
     var _m = useState(false), loadViewOpen = _m[0], setLoadViewOpen = _m[1];
     var _o = useState(''), snackbarMessage = _o[0], setSnackbarMessage = _o[1];
@@ -10915,7 +11040,7 @@ var TableComponent = function (_a) {
     var handleAddTag = function (newTag) {
         var newArr = __spreadArray([], viewTags, true);
         if (newTag) {
-            newArr.push(newTag);
+            newArr.push(__assign(__assign({}, newTag), { IsVisible: true }));
             setViewTagsAndRefetch(newArr);
         }
     };
@@ -10924,7 +11049,7 @@ var TableComponent = function (_a) {
             handleAutoScaleChange(tagId, checked);
         }
     };
-    var handleClose = function () { return setAddTagModalOpen(false); };
+    var handleClose = function () { return setTagsTreeModalOpen(false); };
     var ContextMenu = function (_a) {
         var x = _a.x, y = _a.y, options = _a.options;
         var handleContextMenuClick = function (e) {
@@ -10937,7 +11062,7 @@ var TableComponent = function (_a) {
     var _p = useState({ x: 0, y: 0 }), contextMenuPosition = _p[0], setContextMenuPosition = _p[1];
     var contextMenuOptions = [
         { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
-        { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
+        { id: 'add', label: 'Tags Tree', onClick: function () { return setTagsTreeModalOpen(true); } },
         { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { return handleSaveDefaultToTag(); } },
         { id: 'saveView', label: 'Save View', onClick: function () { return handleSaveView(); } },
         { id: 'saveViewAs', label: 'Save View as', onClick: function () { return setSaveAsViewModalOpen(true); } },
@@ -11163,7 +11288,7 @@ var TableComponent = function (_a) {
                                 React__default.createElement("td", { className: classes.aliasCol },
                                     React__default.createElement(Tooltip, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
                                         React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                                            React__default.createElement("div", { className: classes.dataType, style: { backgroundColor: tag.TagType === "Real" || tag.TagType === "A" ? "blue" : "red" } }, tag.TagType === "Real" || tag.TagType === "A" ? "A" : "D"),
+                                            React__default.createElement("div", { className: classes.dataType, style: { backgroundColor: tag.TagTypeCode === "Real" || tag.TagTypeCode === "A" ? "blue" : ("red") } }, tag.TagTypeCode === "Real" || tag.TagTypeCode === "A" ? "A" : "D"),
                                             React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.Alias || tag.TagName, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                                     var newAlias = e.target.value;
                                                     handleChangeAlias(tag.TagId, newAlias);
@@ -11215,11 +11340,11 @@ var TableComponent = function (_a) {
                         }) : React__default.createElement("div", { style: { padding: '2rem' } },
                             React__default.createElement("div", { style: { padding: "1rem" } }, "No tag view detected. "),
                             React__default.createElement("div", { style: { padding: "1rem" } },
-                                React__default.createElement(Button$1, { onClick: function () { return setAddTagModalOpen(true); }, variant: 'contained', color: 'primary' }, " Add tag")),
+                                React__default.createElement(Button$1, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: 'contained', color: 'primary' }, " Add tag")),
                             React__default.createElement("div", null,
                                 React__default.createElement(Button$1, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
             selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
-            React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
+            React__default.createElement(TagsTreeModal, { open: tagsTreeModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
             React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function (shouldUpdate) {
                     setSaveAsViewModalOpen(false);
                     if (shouldUpdate)