@dexteel/mesf-core 4.10.0 → 4.10.2

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 # CHANGELOG
+## 4.10.2
+- Trending: Fix root of tags tree
+- Trending: When no view detected, the Save View and Save View As work propertly and you can create the first view. Also the unit param was added to the Save View Modal
+- Trending: Fix the Digital/Analog icon of the view tags. Also fixed when add a new tag from the tree
+- Trending: The tag can be selected once for the view tags table
+## 4.10.1
+- Trending: Fix some bugs
 ## 4.10.0
 - Forms: Remove forms from mesf-core-frontend
 ## 4.9.0

package/dist/index.esm.js

@@ -8674,6 +8674,50 @@ var getTagsTree = function () { return __awaiter(void 0, void 0, void 0, functio
         }
     });
 }); };
+var deleteTagFolder = function (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;
+                }
+                parameters.push({ name: "TagFolderId", value: TagFolderId });
+                return [4 /*yield*/, apiService.callV2(getIhPath() + ".[DeleteTagFolder]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var upsertTagFolder = function (TagFolderId, ParentTagFolderId, TagFolderName, IsActive) { 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;
+                }
+                if (ParentTagFolderId && ParentTagFolderId > backendOffset) {
+                    ParentTagFolderId = ParentTagFolderId - backendOffset;
+                }
+                parameters.push({ name: "TagFolderId", value: TagFolderId });
+                parameters.push({ name: "ParentTagFolderId", value: ParentTagFolderId });
+                parameters.push({ name: "TagFolderName", value: TagFolderName });
+                parameters.push({ name: "IsActive", value: IsActive });
+                return [4 /*yield*/, apiService.callV2(getIhPath() + ".[UpsertTagFolder]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
 var changeTagFolderToTag = function (TagId, TagFolderId) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, backendOffset, resp;
     return __generator(this, function (_a) {
@@ -8873,13 +8917,14 @@ var useTagsTreeModalStyles = makeStyles$1(function (theme) { return ({
         fontSize: "14px",
         backgroundColor: "#fff",
         borderRadius: "2px",
-        padding: "5px 0 5px 0",
-        width: "150px",
+        padding: "5px 10px;",
+        width: "140px",
         height: "auto",
         margin: "0",
         position: "fixed",
-        listStyle: "none",
-        boxShadow: "0 0 20px 0 #ccc"
+        boxShadow: "0 0 20px 0 #ccc",
+        display: "flex",
+        flexDirection: "column"
     },
     storyRoot: {
         display: "grid",
@@ -8947,13 +8992,14 @@ var CustomDragPreview = function (props) {
 
 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 _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;
-        if (options.hasChild) {
+        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];
@@ -8969,81 +9015,256 @@ var TagFolderCustomNode = function (_a) {
             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 ? (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("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,
-                ((_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',
+                ((_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' ? 'blue' : 'red',
                         margin: "0 5px"
-                    } }, (_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode)),
+                    } }, (_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" }, ((_g = node.data) === null || _g === void 0 ? void 0 : _g.Alias) || ((_h = node.data) === null || _h === void 0 ? void 0 : _h.TagName))))));
+                    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 _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) {
+                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)];
+                case 1:
+                    resp = _b.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    _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: "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("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 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 (!parentId) return [3 /*break*/, 2];
+                    return [4 /*yield*/, deleteTagFolder(id)];
+                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);
+                    }
+                    _a.label = 5;
+                case 5:
+                    handleClose(true);
+                    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: '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("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 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 NewTagSelectionModal = function (_a) {
+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({}), openTagFolders = _e[0], setOpenTagFolders = _e[1];
-    var _f = useState([]), selectedNodes = _f[0]; _f[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 (!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*/];
+            }
+        });
+    }); };
     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();
+        getTagsTreeData();
     }, [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) {
+        var tagId, newFolderId, newTree, newTree;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    if (!(options.dragSource && options.dropTarget)) return [3 /*break*/, 2];
                     setIsLoading(true);
+                    if (!options.dragSource) return [3 /*break*/, 5];
                     tagId = Number(options.dragSource.id);
-                    newFolderId = Number(options.dropTarget.id);
+                    newFolderId = Number((_a = options.dropTarget) === null || _a === void 0 ? void 0 : _a.id) || null;
                     if (tagId === newFolderId) {
                         setIsLoading(false);
                         return [2 /*return*/];
                     }
-                    return [4 /*yield*/, changeTagFolderToTag(tagId, newFolderId)];
+                    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:
-                    newTree = _a.sent();
-                    setTagsTreeData(tree);
-                    setIsLoading(false);
+                    newTree = _c.sent();
                     if (!newTree.ok) {
                         setError(newTree.message);
                     }
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
+                    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;
+                case 4:
+                    setTagsTreeData(tree);
+                    _c.label = 5;
+                case 5:
+                    setIsLoading(false);
+                    return [2 /*return*/];
             }
         });
     }); };
@@ -9052,23 +9273,29 @@ var NewTagSelectionModal = function (_a) {
             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" } },
+        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: 0, onDrop: handleDrop, canDrop: function (tag, options) {
+                    }, 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, { node: node, options: options, isSelected: selected, openTagFolders: openTagFolders, setOpenTagFolders: setOpenTagFolders, handleSelect: handleClick }));
+                        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(''); } })));
 };
 
@@ -9079,14 +9306,7 @@ var TagsTreeModal = function (_a) {
             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));
+                        React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect })))))));
 };
 
 var useTrendingStyles = makeStyles$1(function (theme) { return ({
@@ -9469,7 +9689,8 @@ var SaveAsViewModal = function (_a) {
                                 setNewView(newInputValue);
                             }
                         }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
-                        (React__default.createElement("div", null, "No tag views detected, please add one")))),
+                        (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",
@@ -9715,7 +9936,7 @@ var TableComponent = function (_a) {
     var handleAddTag = function (newTag) {
         var newArr = __spreadArray([], viewTags, true);
         if (newTag) {
-            newArr.push(__assign(__assign({}, newTag), { IsVisible: true }));
+            newArr.push(__assign(__assign({}, newTag), { IsVisible: true, TagType: newTag.TagTypeCode }));
             setViewTagsAndRefetch(newArr);
         }
     };
@@ -9744,7 +9965,13 @@ var TableComponent = function (_a) {
         { id: 'loadView', label: 'Load View', onClick: function () { return setLoadViewOpen(true); } },
     ];
     var handleTagSelect = function (selectedTag) {
-        handleAddTag(selectedTag);
+        var alreadySelected = viewTags.find(function (vt) { return vt.TagId === selectedTag.TagId; });
+        if (!alreadySelected) {
+            handleAddTag(selectedTag);
+        }
+        else {
+            setError("".concat(selectedTag.TagName, " is already selected"));
+        }
     };
     var handleDelete = function (index) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -9763,14 +9990,18 @@ var TableComponent = function (_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    if (!!viewSelected) return [3 /*break*/, 1];
+                    setSaveAsViewModalOpen(true);
+                    return [2 /*return*/];
+                case 1:
                     setIsLoading(true);
-                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 5];
+                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 6];
                     return [4 /*yield*/, upsertView(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, viewSelected.ViewName, viewSelected.IsPublic)];
-                case 1:
+                case 2:
                     resp = _a.sent();
-                    if (!resp.ok) return [3 /*break*/, 4];
+                    if (!resp.ok) return [3 /*break*/, 5];
                     return [4 /*yield*/, deleteAllViewTagsFromView(viewSelected.ViewId)];
-                case 2:
+                case 3:
                     deleteResp = _a.sent();
                     if (!deleteResp.ok) {
                         setError(deleteResp.message);
@@ -9784,7 +10015,7 @@ var TableComponent = function (_a) {
                                 }
                             });
                         }))];
-                case 3:
+                case 4:
                     results = _a.sent();
                     results.forEach(function (result, index) {
                         if (result.status === "rejected") {
@@ -9795,13 +10026,14 @@ var TableComponent = function (_a) {
                             setSnackbarMessage('View saved successfully');
                         }
                     });
-                    return [3 /*break*/, 5];
-                case 4:
-                    setError(resp.message);
-                    _a.label = 5;
+                    return [3 /*break*/, 6];
                 case 5:
+                    setError(resp.message);
+                    _a.label = 6;
+                case 6:
                     setIsLoading(false);
-                    return [2 /*return*/];
+                    _a.label = 7;
+                case 7: return [2 /*return*/];
             }
         });
     }); };
@@ -9870,7 +10102,7 @@ var TableComponent = function (_a) {
                     React__default.createElement("table", { style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
                         React__default.createElement("thead", null,
                             React__default.createElement("tr", null,
-                                React__default.createElement("th", { className: classes.visible }, "View:"),
+                                React__default.createElement("th", { className: classes.visible }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) && "View:"),
                                 React__default.createElement("th", { className: classes.aliasCol }, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
                                 React__default.createElement("th", { className: classes.color }),
                                 React__default.createElement("th", { colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
@@ -9963,7 +10195,8 @@ 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.TagTypeCode === "Real" || tag.TagTypeCode === "A" ? "blue" : ("red") } }, tag.TagTypeCode === "Real" || tag.TagTypeCode === "A" ? "A" : "D"),
+                                            tag.TagType &&
+                                                (React__default.createElement("div", { className: classes.dataType, style: { backgroundColor: tag.TagType === "A" ? "blue" : "red" } }, tag.TagType)),
                                             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);
@@ -10012,7 +10245,7 @@ var TableComponent = function (_a) {
                                 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,
                                     " ")));
-                        }) : React__default.createElement("div", { style: { padding: '2rem' } },
+                        }) : React__default.createElement("div", { style: { padding: '1rem' } },
                             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 setTagsTreeModalOpen(true); }, variant: 'contained', color: 'primary' }, " Add tag")),
@@ -10666,7 +10899,7 @@ var TrendingsPage = function (props) {
                         setViews(viewsResp.data.tables[0].rows);
                         lastCreated = void 0;
                         if (!viewSelected || forceReload) {
-                            lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
+                            lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; }, null);
                             //viewSelected
                             setViewSelected(lastCreated);
                         }