@dexteel/mesf-core 7.6.0 → 7.8.0

package/dist/index.esm.js

@@ -59,6 +59,7 @@ import { DateTimePicker as DateTimePicker$1 } from '@mui/x-date-pickers/DateTime
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import axios from 'axios';
+import { Group as Group$1, Panel, Separator } from 'react-resizable-panels';
 import { LocalizationProvider as LocalizationProvider$1 } from '@mui/x-date-pickers/LocalizationProvider';
 import InsertChartIcon from '@mui/icons-material/InsertChart';
 import ReactECharts from 'echarts-for-react';
@@ -3859,13 +3860,13 @@ var INITIAL_VALUES$2 = {
 };
 
 var CreateProfile = function (_a) {
-    var _b;
+    var _b, _c;
     var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
-    var _c = useState(false), openSnackbar = _c[0], setOpenSnackbar = _c[1];
-    var _d = useState(""), message = _d[0], setMessage = _d[1];
-    var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
-    var _f = useState(""), error = _f[0], setError = _f[1];
-    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _g.register, handleSubmit = _g.handleSubmit, reset = _g.reset, errors = _g.formState.errors;
+    var _d = useState(false), openSnackbar = _d[0], setOpenSnackbar = _d[1];
+    var _e = useState(""), message = _e[0], setMessage = _e[1];
+    var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
+    var _g = useState(""), error = _g[0], setError = _g[1];
+    var _h = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _h.register, handleSubmit = _h.handleSubmit, reset = _h.reset, errors = _h.formState.errors;
     var createProfile = useMutation({
         mutationFn: upsertProfile,
         onSuccess: function () {
@@ -3915,9 +3916,18 @@ var CreateProfile = function (_a) {
                         React.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
                             React.createElement(Grid2, { container: true, spacing: 1 },
                                 React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                                    React.createElement(TextField, __assign({}, register("ProfileName", { required: true }), { label: "Profile name", variant: "outlined", error: !!errors.ProfileName, fullWidth: true, margin: "dense", autoComplete: "off" })),
+                                    React.createElement(TextField, __assign({}, register("ProfileName", {
+                                        required: true,
+                                        validate: {
+                                            notWhitespace: function (value) {
+                                                return value.trim() !== "" ||
+                                                    "Profile name cannot be only whitespace";
+                                            },
+                                        },
+                                    }), { label: "Profile name", variant: "outlined", error: !!errors.ProfileName, fullWidth: true, margin: "dense", autoComplete: "off" })),
                                     " ",
-                                    ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === "required" && (React.createElement("span", { style: { fontSize: 12, color: "#F44336" } }, "Profile name is required"))))),
+                                    ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === "required" && (React.createElement("span", { style: { fontSize: 12, color: "#F44336" } }, "Profile name is required")),
+                                    ((_c = errors.ProfileName) === null || _c === void 0 ? void 0 : _c.type) === "notWhitespace" && (React.createElement("span", { style: { fontSize: 12, color: "#F44336" } }, errors.ProfileName.message))))),
                         React.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
                             React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
                                 React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
@@ -12052,7 +12062,7 @@ var getViewTags = function (ViewId) { return __awaiter(void 0, void 0, void 0, f
 }); };
 var upsertViewTag = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
     var apiService, parameters, resp;
-    var viewId = _b.viewId, tagId = _b.tagId, color = _b.color, minScale = _b.minScale, maxScale = _b.maxScale, isVisible = _b.isVisible, isAutoScale = _b.isAutoScale, unit = _b.unit;
+    var viewId = _b.viewId, tagId = _b.tagId, color = _b.color, minScale = _b.minScale, maxScale = _b.maxScale, isVisible = _b.isVisible, isAutoScale = _b.isAutoScale, unit = _b.unit; _b.order; _b.alias; _b.tagType; _b.sourceTagId; _b.bitIndex;
     return __generator(this, function (_c) {
         switch (_c.label) {
             case 0:
@@ -12148,6 +12158,37 @@ var ConfirmationDialogRaw = function (_a) {
                 React__default.createElement(Button, { variant: "contained", size: "small", color: "primary", onClick: handleOk }, "Ok")))));
 };
 
+var STORAGE_PREFIX = "mesf_trending_view_v2_";
+var saveViewToLocal = function (viewId, viewTags) {
+    try {
+        var key = "".concat(STORAGE_PREFIX).concat(viewId);
+        localStorage.setItem(key, JSON.stringify(viewTags));
+    }
+    catch (e) {
+        console.error("Failed to save view to local storage", e);
+    }
+};
+var getViewFromLocal = function (viewId) {
+    try {
+        var key = "".concat(STORAGE_PREFIX).concat(viewId);
+        var data = localStorage.getItem(key);
+        return data ? JSON.parse(data) : null;
+    }
+    catch (e) {
+        console.error("Failed to load view from local storage", e);
+        return null;
+    }
+};
+var removeViewFromLocal = function (viewId) {
+    try {
+        var key = "".concat(STORAGE_PREFIX).concat(viewId);
+        localStorage.removeItem(key);
+    }
+    catch (e) {
+        console.error("Failed to remove view from local storage", e);
+    }
+};
+
 var SaveUpdateDeleteViewModalV2 = function (_a) {
     var _b, _c, _d;
     var open = _a.open, mode = _a.mode, handleClose = _a.handleClose, view = _a.view;
@@ -12185,7 +12226,7 @@ var SaveUpdateDeleteViewModalV2 = function (_a) {
     };
     var updateViewTag = useMutation({
         mutationFn: function (_a) {
-            var viewId = _a.viewId, tagId = _a.tagId, color = _a.color, minScale = _a.minScale, maxScale = _a.maxScale, isVisible = _a.isVisible, isAutoScale = _a.isAutoScale, unit = _a.unit;
+            var viewId = _a.viewId, tagId = _a.tagId, color = _a.color, minScale = _a.minScale, maxScale = _a.maxScale, isVisible = _a.isVisible, isAutoScale = _a.isAutoScale, unit = _a.unit, order = _a.order, alias = _a.alias, tagType = _a.tagType, sourceTagId = _a.sourceTagId, bitIndex = _a.bitIndex;
             return upsertViewTag({
                 viewId: viewId,
                 tagId: tagId,
@@ -12195,6 +12236,11 @@ var SaveUpdateDeleteViewModalV2 = function (_a) {
                 isVisible: isVisible,
                 isAutoScale: isAutoScale,
                 unit: unit,
+                order: order,
+                alias: alias,
+                tagType: tagType,
+                sourceTagId: sourceTagId,
+                bitIndex: bitIndex,
             });
         },
         onError: function (error) {
@@ -12207,6 +12253,12 @@ var SaveUpdateDeleteViewModalV2 = function (_a) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        if (view === null || view === void 0 ? void 0 : view.ViewId) {
+                            removeViewFromLocal(view.ViewId);
+                        }
+                        else if (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) {
+                            removeViewFromLocal(viewSelected.ViewId);
+                        }
                         setSnackbarMessage("The view was deleted successfully");
                         setSnackbarOpen(true);
                         return [4 /*yield*/, queryClient.invalidateQueries({ queryKey: ["views-v2"] })];
@@ -12229,31 +12281,43 @@ var SaveUpdateDeleteViewModalV2 = function (_a) {
             });
         }); },
         onSuccess: function (viewId) { return __awaiter(void 0, void 0, void 0, function () {
-            var results, failed;
+            var backendTags, results, failed;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, Promise.allSettled(Object.values(viewTags)
-                            .sort(function (a, b) { return a.order - b.order; })
-                            .map(function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
-                            var viewTag = _b.viewTag;
-                            return __generator(this, function (_c) {
-                                switch (_c.label) {
-                                    case 0: return [4 /*yield*/, updateViewTag.mutate({
-                                            viewId: viewId,
-                                            tagId: viewTag.TagId,
-                                            color: viewTag.Color,
-                                            minScale: viewTag.MinScale,
-                                            maxScale: viewTag.MaxScale,
-                                            isVisible: viewTag.IsVisible,
-                                            isAutoScale: viewTag.IsAutoScale,
-                                            unit: viewTag.Unit,
-                                        })];
-                                    case 1:
-                                        _c.sent();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); }))];
+                    case 0:
+                        // Save complete state to local storage (metadata + virtual tags)
+                        saveViewToLocal(viewId, viewTags);
+                        backendTags = Object.values(viewTags).filter(function (_a) {
+                            var viewTag = _a.viewTag;
+                            return !viewTag.IsBitExtracted;
+                        });
+                        return [4 /*yield*/, Promise.allSettled(backendTags
+                                .sort(function (a, b) { return a.order - b.order; })
+                                .map(function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+                                var viewTag = _b.viewTag, order = _b.order;
+                                return __generator(this, function (_c) {
+                                    switch (_c.label) {
+                                        case 0: return [4 /*yield*/, updateViewTag.mutateAsync({
+                                                viewId: viewId,
+                                                tagId: viewTag.TagId,
+                                                color: viewTag.Color,
+                                                minScale: viewTag.MinScale,
+                                                maxScale: viewTag.MaxScale,
+                                                isVisible: viewTag.IsVisible,
+                                                isAutoScale: viewTag.IsAutoScale,
+                                                unit: viewTag.Unit,
+                                                order: order,
+                                                alias: viewTag.Alias,
+                                                tagType: viewTag.TagType,
+                                                sourceTagId: viewTag.SourceTagId,
+                                                bitIndex: viewTag.BitIndex,
+                                            })];
+                                        case 1:
+                                            _c.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); }))];
                     case 1:
                         results = _a.sent();
                         failed = results.filter(function (r) { return r.status === "rejected"; });
@@ -12291,7 +12355,7 @@ var SaveUpdateDeleteViewModalV2 = function (_a) {
                     setIsSubmitLoading(true);
                     viewToDelete = view || viewSelected;
                     if (!!isNil(viewToDelete)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, removeView.mutate(viewToDelete.ViewId)];
+                    return [4 /*yield*/, removeView.mutateAsync(viewToDelete.ViewId)];
                 case 1:
                     _a.sent();
                     _a.label = 2;
@@ -12882,6 +12946,22 @@ var ColorPickerV2 = function (_a) {
                 } }, tagColors.map(function (tagColor) { return (React__default.createElement(ColorSwatch, { key: tagColor, color: tagColor, onSelect: handleColorSelect })); })))));
 };
 
+var NotificationSnackBar = function (_a) {
+    var message = _a.message, _b = _a.onHide, onHide = _b === void 0 ? function () { } : _b, _c = _a.severity, severity = _c === void 0 ? "success" : _c;
+    var handleClose = function (event, reason) {
+        if (reason === "clickaway") {
+            return;
+        }
+        onHide();
+    };
+    var _d = useState(true), open = _d[0], setOpen = _d[1];
+    useEffect(function () {
+        setOpen(!!message);
+    }, [message]);
+    return (React__default.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
+        React__default.createElement(Alert$3, { elevation: 6, variant: "filled", severity: severity, onClose: handleClose }, message)));
+};
+
 var NewFolderModal = function (_a) {
     var open = _a.open, handleClose = _a.handleClose, tagNodeSelectedInTree = _a.tagNodeSelectedInTree;
     var _b = useState(), name = _b[0], setName = _b[1];
@@ -13119,7 +13199,7 @@ var TagFolderCustomNodeV2 = function (_a) {
             (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("contextmenu", handleContextMenu);
         };
     }, []);
-    return (React__default.createElement(Box, { onClick: onClickHandler, sx: {
+    return (React__default.createElement(Box, { "data-node-id": node.id, onClick: onClickHandler, sx: {
             paddingInlineStart: depth * 2,
             cursor: "pointer",
             alignItems: "center",
@@ -13400,13 +13480,14 @@ var TagsTreeModalV2 = function (_a) {
     var open = _a.open, handleClose = _a.handleClose, onTagSelect = _a.onTagSelect;
     var _b = useState(false), 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 _d = useState(null), snackbarMessage = _d[0], setSnackbarMessage = _d[1];
+    var _e = useState([]), tagsTreeData = _e[0], setTagsTreeData = _e[1];
+    var _f = useState(null), tagNodeSelectedInTree = _f[0], setTagNodeSelectedInTree = _f[1];
+    var _g = useState(null), anchorPoint = _g[0], setAnchorPoint = _g[1];
+    var _h = useState(false), showContextMenu = _h[0], setShowContextMenu = _h[1];
     var backendOffset = 1000000;
-    var _h = useState({}), openTagFolders = _h[0], setOpenTagFolders = _h[1];
-    var _j = useState([]), selectedNodes = _j[0], setSelectedNodes = _j[1];
+    var _j = useState({}), openTagFolders = _j[0], setOpenTagFolders = _j[1];
+    var _k = useState([]), selectedNodes = _k[0], setSelectedNodes = _k[1];
     var handleContextMenu = function (data, e) {
         e.preventDefault();
         var top = e.clientY;
@@ -13419,7 +13500,7 @@ var TagsTreeModalV2 = function (_a) {
             setTagNodeSelectedInTree(selectedNode);
         }
     };
-    var _k = useSearchTagsTree$1(), tagsTree = _k.data, tagsTreeLoading = _k.isLoading, tagsTreeIsError = _k.isError, tagsTreeError = _k.error, tagsTreeIsSuccess = _k.isSuccess, tagsTreeIsFetched = _k.isFetched, refetch = _k.refetch;
+    var _l = useSearchTagsTree$1(), tagsTree = _l.data, tagsTreeLoading = _l.isLoading, tagsTreeIsError = _l.isError, tagsTreeError = _l.error, tagsTreeIsSuccess = _l.isSuccess, tagsTreeIsFetched = _l.isFetched, refetch = _l.refetch;
     var updateTagFolder = useMutation({
         mutationFn: function (_a) {
             var tagFolderId = _a.tagFolderId, parentTagFolderId = _a.parentTagFolderId, tagFolderName = _a.tagFolderName, isActive = _a.isActive;
@@ -13518,6 +13599,10 @@ var TagsTreeModalV2 = function (_a) {
         });
         setOpenTagFolders(newOpenTagFolders);
         setSelectedNodes([result.node]);
+        if (result.node.data && result.node.data.TagTypeCode !== "F") {
+            onTagSelect(result.node.data);
+            setSnackbarMessage("Tag \"".concat(result.node.data.TagName, "\" added"));
+        }
         // Scroll to the node after expansion
         setTimeout(function () {
             var nodeElement = document.querySelector("[data-node-id=\"".concat(result.id, "\"]"));
@@ -13605,7 +13690,8 @@ var TagsTreeModalV2 = function (_a) {
                                     return (React__default.createElement(TagFolderCustomNodeV2, { setContextMenuOver: handleContextMenu, node: node, options: options, isSelected: selected, openTagFolders: openTagFolders, setOpenTagFolders: setOpenTagFolders, handleSelect: handleClick }));
                                 }, dragPreviewRender: function (monitorProps) { return React__default.createElement(CustomDragPreview, { monitorProps: monitorProps }); } })))))),
                 React__default.createElement(ContextMenu, { anchorPoint: anchorPoint, isOpen: showContextMenu, setShowContextMenu: setShowContextMenu, tagNodeSelectedInTree: tagNodeSelectedInTree, getTagsTreeData: function () { return refetch(); } }),
-                React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })))));
+                React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
+                React__default.createElement(NotificationSnackBar, { message: snackbarMessage, onHide: function () { return setSnackbarMessage(null); } })))));
 };
 
 var BitSelectorModal = function (_a) {
@@ -13952,20 +14038,31 @@ var TagsTableV2 = function () {
             var viewId = _a.viewId, viewName = _a.viewName, isPublic = _a.isPublic;
             return upsertView({ viewId: viewId, viewName: viewName, isPublic: isPublic });
         },
-        onSuccess: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var results, failed;
+        onSuccess: function (viewId) { return __awaiter(void 0, void 0, void 0, function () {
+            var backendTags, results, failed;
             var _a;
             return __generator(this, function (_b) {
                 switch (_b.label) {
-                    case 0: return [4 /*yield*/, deleteAllViewTags.mutate((_a = viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) !== null && _a !== void 0 ? _a : 0)];
+                    case 0:
+                        // Save complete state to local storage (metadata + virtual tags)
+                        if (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) {
+                            saveViewToLocal(viewSelected.ViewId, viewTags);
+                        }
+                        // Wait for delete to finish before inserting new tags
+                        return [4 /*yield*/, deleteAllViewTags.mutateAsync((_a = viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) !== null && _a !== void 0 ? _a : 0)];
                     case 1:
+                        // Wait for delete to finish before inserting new tags
                         _b.sent();
-                        return [4 /*yield*/, Promise.allSettled(Object.values(viewTags)
+                        backendTags = Object.values(viewTags).filter(function (_a) {
+                            var viewTag = _a.viewTag;
+                            return !viewTag.IsBitExtracted;
+                        });
+                        return [4 /*yield*/, Promise.allSettled(backendTags
                                 .sort(function (a, b) { return b.order - a.order; })
                                 .map(function (_a) {
                                 var _b;
-                                var viewTag = _a.viewTag;
-                                return upsertViewTag({
+                                var viewTag = _a.viewTag, order = _a.order;
+                                return updateViewTag.mutateAsync({
                                     viewId: (_b = viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) !== null && _b !== void 0 ? _b : 0,
                                     tagId: viewTag.TagId,
                                     color: viewTag.Color,
@@ -13974,6 +14071,11 @@ var TagsTableV2 = function () {
                                     isVisible: viewTag.IsVisible,
                                     isAutoScale: viewTag.IsAutoScale,
                                     unit: viewTag.Unit,
+                                    order: order,
+                                    alias: viewTag.Alias,
+                                    tagType: viewTag.TagType,
+                                    sourceTagId: viewTag.SourceTagId,
+                                    bitIndex: viewTag.BitIndex,
                                 });
                             }))];
                     case 2:
@@ -13995,7 +14097,7 @@ var TagsTableV2 = function () {
     });
     var updateViewTag = useMutation({
         mutationFn: function (_a) {
-            var viewId = _a.viewId, tagId = _a.tagId, color = _a.color, minScale = _a.minScale, maxScale = _a.maxScale, isVisible = _a.isVisible, isAutoScale = _a.isAutoScale, unit = _a.unit;
+            var viewId = _a.viewId, tagId = _a.tagId, color = _a.color, minScale = _a.minScale, maxScale = _a.maxScale, isVisible = _a.isVisible, isAutoScale = _a.isAutoScale, unit = _a.unit, order = _a.order, alias = _a.alias, tagType = _a.tagType, sourceTagId = _a.sourceTagId, bitIndex = _a.bitIndex;
             return upsertViewTag({
                 viewId: viewId,
                 tagId: tagId,
@@ -14005,6 +14107,11 @@ var TagsTableV2 = function () {
                 isVisible: isVisible,
                 isAutoScale: isAutoScale,
                 unit: unit,
+                order: order,
+                alias: alias,
+                tagType: tagType,
+                sourceTagId: sourceTagId,
+                bitIndex: bitIndex,
             });
         },
         onError: function (error) {
@@ -15270,6 +15377,9 @@ var TrendingChartV2 = function (_a) {
         if (tag.IsAutoScale) {
             // Use automatic scaling based on data
             baseConfig.scale = true;
+            // Explicitly clear min/max to ensure auto-scaling works when switching from fixed scale
+            baseConfig.min = null;
+            baseConfig.max = null;
         }
         else {
             // Use explicit min/max values
@@ -15971,10 +16081,11 @@ var TrendingChartV2 = function (_a) {
         }
     }, [onChartReady, dataLoadedTrigger, chartOptions]);
     // Track chart area coordinates for cursor positioning
+    var containerRef = useRef(null);
     useEffect(function () {
         var _a;
         var instance = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
-        if (!instance)
+        if (!instance || !containerRef.current)
             return;
         var updateChartArea = function () {
             try {
@@ -16017,14 +16128,18 @@ var TrendingChartV2 = function (_a) {
                 // Silently handle chart area update failure
             }
         };
+        // Create ResizeObserver to handle container resizing (panel resize)
+        var resizeObserver = new ResizeObserver(function () {
+            instance.resize();
+            // Small delay to ensure ECharts has updated its internal state
+            requestAnimationFrame(updateChartArea);
+        });
+        resizeObserver.observe(containerRef.current);
         // Update immediately
         updateChartArea();
-        // Update on window resize
-        var handleResize = function () {
-            setTimeout(updateChartArea, 100);
+        return function () {
+            resizeObserver.disconnect();
         };
-        window.addEventListener("resize", handleResize);
-        return function () { return window.removeEventListener("resize", handleResize); };
     }, [chartInstance, useSeparateGrids]);
     // Keyboard control for cursor navigation
     useEffect(function () {
@@ -16086,7 +16201,7 @@ var TrendingChartV2 = function (_a) {
                 zIndex: 10,
             } },
             React__default.createElement(CircularProgress, { size: "2rem" }))),
-        React__default.createElement("div", { style: { height: "100%", width: "100%", position: "relative" } },
+        React__default.createElement("div", { ref: containerRef, style: { height: "100%", width: "100%", position: "relative" } },
             React__default.createElement(ReactECharts, { key: chartKey, ref: chartRef, option: chartOptions, style: {
                     height: "100%",
                     width: "100%",
@@ -16295,26 +16410,70 @@ var TrendingsPageV2 = function () {
     // This preserves local order changes (from drag-and-drop) until a new view is loaded
     var loadedViewIdRef = useRef(null);
     useEffect(function () {
-        if (!viewTagsSuccess || !viewTagsData || !Array.isArray(viewTagsData))
+        if (!viewTagsSuccess ||
+            !viewTagsData ||
+            !Array.isArray(viewTagsData) ||
+            viewId === null)
             return;
         // Only reset viewTags when viewId actually changes (loading a different view)
         // Do NOT reset if viewId is the same (data is just refetching)
         if (viewId === loadedViewIdRef.current)
             return;
         loadedViewIdRef.current = viewId;
-        var vTags = viewTagsData.reduce(function (carr, curr, idx) {
-            if (isNil(curr.Color)) {
-                curr.Color = getRandomColor();
-            }
-            carr[curr.TagId] = {
-                viewTag: curr,
-                order: idx,
-            };
-            return carr;
-        }, {});
+        var backendTags = viewTagsData;
+        var localViewTags = getViewFromLocal(viewId);
+        var mergedTags = {};
+        if (localViewTags) {
+            // If local storage exists, use it as the source of truth for metadata (Order, Alias)
+            // and for virtual tags (Bit Extracted)
+            var backendTagIds_1 = new Set(backendTags.map(function (t) { return t.TagId; }));
+            // 1. Process local tags
+            Object.values(localViewTags).forEach(function (entry) {
+                var viewTag = entry.viewTag;
+                // If it's a backend tag, check if it still exists in the backend response
+                // (Permission check or tag deletion check)
+                if (!viewTag.IsBitExtracted) {
+                    if (backendTagIds_1.has(viewTag.TagId)) {
+                        mergedTags[viewTag.TagId] = entry;
+                    }
+                }
+                else {
+                    // Virtual tags are always added from local storage
+                    mergedTags[viewTag.TagId] = entry;
+                }
+            });
+            // 2. Add any new backend tags that might be missing from local storage
+            // (Rare case, but possible if added by another user/session)
+            backendTags.forEach(function (backendTag) {
+                if (!mergedTags[backendTag.TagId]) {
+                    // Add with default order at the end
+                    var maxOrder = Math.max.apply(Math, __spreadArray(__spreadArray([], Object.values(mergedTags).map(function (t) { return t.order; }), false), [0], false));
+                    if (isNil(backendTag.Color)) {
+                        backendTag.Color = getRandomColor();
+                    }
+                    mergedTags[backendTag.TagId] = {
+                        viewTag: backendTag,
+                        order: maxOrder + 1,
+                    };
+                }
+            });
+        }
+        else {
+            // No local storage -> Use backend tags with default ordering
+            mergedTags = backendTags.reduce(function (carr, curr, idx) {
+                if (isNil(curr.Color)) {
+                    curr.Color = getRandomColor();
+                }
+                carr[curr.TagId] = {
+                    viewTag: curr,
+                    order: idx,
+                };
+                return carr;
+            }, {});
+        }
         // Reset stable ref when loading new view
         stableTagIdsRef.current = [];
-        setViewTagsAndRefetch(vTags);
+        setViewTagsAndRefetch(mergedTags);
     }, [viewTagsSuccess, viewTagsData, setViewTagsAndRefetch, viewId]);
     // Update context with calculated min/max values
     // Use ref to prevent infinite loop from object reference changes
@@ -16375,12 +16534,14 @@ var TrendingsPageV2 = function () {
     var isLoading = viewsLoading || viewTagsLoading;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HelmetDexteel, { title: "Trendings" }),
-        React__default.createElement(Grid2, { container: true, direction: "column", wrap: "nowrap", size: 12, sx: {
-                p: 2,
+        React__default.createElement("div", { style: {
+                padding: "16px",
                 width: "100%",
                 height: "92vh",
                 position: "relative",
                 backgroundColor: "#FAFAFA",
+                display: "flex",
+                flexDirection: "column",
             } },
             isLoading && (React__default.createElement("div", { style: {
                     position: "absolute",
@@ -16395,14 +16556,38 @@ var TrendingsPageV2 = function () {
                     zIndex: 1000,
                 } },
                 React__default.createElement(CircularProgress, { size: "3rem" }))),
-            React__default.createElement(Grid2, { size: 12, style: { flexShrink: 0 } },
+            React__default.createElement("div", { style: { flexShrink: 0 } },
                 React__default.createElement(HeaderSectionV2, { autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh, setChartOptions: setChartOptions, chartInstance: chartInstance })),
-            React__default.createElement(Grid2, { size: 12 },
-                React__default.createElement(Divider, { sx: { my: 2 } })),
-            React__default.createElement(Grid2, { size: 12, sx: { flexGrow: 1, minHeight: 0, overflow: "hidden", height: "100%" } },
-                React__default.createElement(TrendingChartV2, { customOptions: chartOptions, series: filteredSeries, isLoading: seriesLoading, onChartReady: setChartInstance, dataLoadedTrigger: dataLoadedTrigger })),
-            React__default.createElement(Grid2, { style: { flexShrink: 0, height: "160px", marginTop: "3px" } },
-                React__default.createElement(TagsTableV2, null))),
+            React__default.createElement(Divider, { sx: { my: 2 } }),
+            React__default.createElement("div", { style: {
+                    flexGrow: 1,
+                    minHeight: 0,
+                    display: "flex",
+                    width: "100%",
+                } },
+                React__default.createElement(Group$1, { orientation: "vertical", style: { width: "100%", height: "100%" } },
+                    React__default.createElement(Panel, { defaultSize: 80, minSize: 20 },
+                        React__default.createElement("div", { style: { height: "100%", width: "100%" } },
+                            React__default.createElement(TrendingChartV2, { customOptions: chartOptions, series: filteredSeries, isLoading: seriesLoading, onChartReady: setChartInstance, dataLoadedTrigger: dataLoadedTrigger }))),
+                    React__default.createElement(Separator, { style: {
+                            height: "10px",
+                            background: "#f0f0f0",
+                            cursor: "row-resize",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderTop: "1px solid #e0e0e0",
+                            borderBottom: "1px solid #e0e0e0",
+                        } },
+                        React__default.createElement("div", { style: {
+                                width: "40px",
+                                height: "4px",
+                                backgroundColor: "#ccc",
+                                borderRadius: "2px",
+                            } })),
+                    React__default.createElement(Panel, { defaultSize: 20, minSize: 10 },
+                        React__default.createElement("div", { style: { height: "100%", width: "100%", overflow: "auto" } },
+                            React__default.createElement(TagsTableV2, null)))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, size: "xl", title: "ERROR" })));
 };
 
@@ -19940,22 +20125,6 @@ var ShiftSelector = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "Error loading shifts" })));
 };
 
-var NotificationSnackBar = function (_a) {
-    var message = _a.message, _b = _a.onHide, onHide = _b === void 0 ? function () { } : _b, _c = _a.severity, severity = _c === void 0 ? "success" : _c;
-    var handleClose = function (event, reason) {
-        if (reason === "clickaway") {
-            return;
-        }
-        onHide();
-    };
-    var _d = useState(true), open = _d[0], setOpen = _d[1];
-    useEffect(function () {
-        setOpen(!!message);
-    }, [message]);
-    return (React__default.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-        React__default.createElement(Alert$3, { elevation: 6, variant: "filled", severity: severity, onClose: handleClose }, message)));
-};
-
 var useEntrySubmission = function (_a) {
     var _b = _a === void 0 ? {} : _a, onSuccess = _b.onSuccess, onError = _b.onError, _c = _b.isNewEntry, isNewEntry = _c === void 0 ? false : _c, _d = _b.onHide, onHide = _d === void 0 ? function () { } : _d;
     var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];