@dexteel/mesf-core 7.10.1 → 7.11.1

package/dist/index.esm.js

@@ -1,14 +1,14 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 export { LicenseManager } from 'ag-grid-enterprise';
-import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Hidden, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Autocomplete as Autocomplete$1, useMediaQuery, ListSubheader, ListItemButton, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, debounce, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
+import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Hidden, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Autocomplete as Autocomplete$1, useMediaQuery, ListSubheader, ListItemButton, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
 import { useMutation, useQuery, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, Component, lazy, Suspense } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
 import { AgGridReact } from 'ag-grid-react';
 import { createPart, themeMaterial, provideGlobalGridOptions } from 'ag-grid-community';
-import { values, get, isEmpty, isNil, round, isNaN as isNaN$1, isNumber } from 'lodash-es';
+import { values, get, isEmpty, isNil } from 'lodash-es';
 import { useForm, Controller } from 'react-hook-form';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
 import { Alert as Alert$4, AlertTitle, Autocomplete } from '@mui/lab';
@@ -54,7 +54,6 @@ import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import MenuIcon from '@mui/icons-material/Menu';
-import ShowChartIcon from '@mui/icons-material/ShowChart';
 import { DateTimePicker as DateTimePicker$1 } from '@mui/x-date-pickers/DateTimePicker';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -63,14 +62,6 @@ import { Group as Group$1, Panel, Separator, useDefaultLayout } from 'react-resi
 import { LocalizationProvider as LocalizationProvider$1 } from '@mui/x-date-pickers/LocalizationProvider';
 import InsertChartIcon from '@mui/icons-material/InsertChart';
 import ReactECharts from 'echarts-for-react';
-import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
-import zoomPlugin from 'chartjs-plugin-zoom';
-import SaveIcon from '@mui/icons-material/Save';
-import Button$1 from '@mui/material/Button';
-import Popover$1 from '@mui/material/Popover';
-import CreateIcon from '@mui/icons-material/Create';
-import ArrowDropDownIcon$1 from '@mui/icons-material/ArrowDropDown';
-import { Line } from 'react-chartjs-2';
 import MarkdownIt from 'markdown-it';
 import MdEditor, { PluginComponent } from 'react-markdown-editor-lite';
 import 'react-markdown-editor-lite/lib/index.css';
@@ -291,8 +282,8 @@ var HelmetDexteel = function (_a) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$1 = ".lds-ring {\n\tdisplay: inline-block;\n\tposition: relative;\n\twidth: 80px;\n\theight: 80px;\n}\n.lds-ring div {\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: absolute;\n\twidth: 64px;\n\theight: 64px;\n\tmargin: 8px;\n\tborder: 5px solid rgb(63, 81, 181);\n\tborder-radius: 50%;\n\tanimation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\tborder-color: rgb(63, 81, 181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n\tanimation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n\tanimation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n\tanimation-delay: -0.15s;\n}\n@keyframes lds-ring {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n";
-n(css$1,{});
+var css = ".lds-ring {\n\tdisplay: inline-block;\n\tposition: relative;\n\twidth: 80px;\n\theight: 80px;\n}\n.lds-ring div {\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: absolute;\n\twidth: 64px;\n\theight: 64px;\n\tmargin: 8px;\n\tborder: 5px solid rgb(63, 81, 181);\n\tborder-radius: 50%;\n\tanimation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\tborder-color: rgb(63, 81, 181) transparent transparent transparent;\n}\n.lds-ring div:nth-child(1) {\n\tanimation-delay: -0.45s;\n}\n.lds-ring div:nth-child(2) {\n\tanimation-delay: -0.3s;\n}\n.lds-ring div:nth-child(3) {\n\tanimation-delay: -0.15s;\n}\n@keyframes lds-ring {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n";
+n(css,{});
 
 var LazyLoading = function () {
     return (React__default.createElement(React__default.Fragment, null,
@@ -3330,7 +3321,7 @@ var useAssetOptionsFunctions = function (_a) {
     };
 };
 
-var customStyles$2 = "\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 openAssets = _a.openAssets, setOpenAssets = _a.setOpenAssets, setContextMenuOver = _a.setContextMenuOver, onDoubleClick = _a.onDoubleClick; _a.testIdPrefix; var isSelected = _a.isSelected, props = __rest(_a, ["openAssets", "setOpenAssets", "setContextMenuOver", "onDoubleClick", "testIdPrefix", "isSelected"]);
     var _c = props.node, id = _c.id, droppable = _c.droppable, data = _c.data;
@@ -3384,7 +3375,7 @@ var CustomNode = function (_a) {
             listStyleType: "none",
             backgroundColor: isSelected ? "#e8f0fe" : "",
         }, style: { paddingInlineStart: indent }, "data-node-id": id, onClick: handleClick, title: "".concat(props.node.id, " - ").concat(props.node.text) },
-        React__default.createElement("style", null, customStyles$2),
+        React__default.createElement("style", null, customStyles$1),
         props.node.droppable ? (React__default.createElement(Box, { sx: {
                 alignItems: "center",
                 cursor: "pointer",
@@ -7271,26 +7262,44 @@ var LoginWithAzureAD = function (_a) {
 };
 
 function Login(_a) {
-    var authConfig = _a.authConfig;
+    var authConfig = _a.authConfig, initialError = _a.initialError;
     var params = useRef(new URL(document.location).searchParams);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(""), message = _c[0], setMessage = _c[1];
+    var _d = useState("info"), severity = _d[0], setSeverity = _d[1];
     var useEmailAndPassword = get(authConfig, "useEmailAndPassword", true);
     var useAzureAD = get(authConfig, "useAzureAD", false);
     var useWindowsAuth = get(authConfig, "useWindowsAuth", false);
     var guestIsEnabled = get(authConfig, "guestIsEnabled", false);
+    var getBase = function () { var _a; return ((_a = document.getElementsByTagName("base")[0]) === null || _a === void 0 ? void 0 : _a.getAttribute("href")) || "/"; };
     var handleClose = function () {
         setOpen(false);
-        params.current.delete("message");
-        var newUrl = window.location.origin + "?" + params.current.toString();
+        // Read current URL params (not the ref) to preserve redirectTo
+        var currentParams = new URL(document.location).searchParams;
+        currentParams.delete("message");
+        currentParams.delete("error");
+        var base = getBase();
+        var queryString = currentParams.toString();
+        var newUrl = "".concat(window.location.origin).concat(base).concat(queryString ? "?".concat(queryString) : "");
         window.history.replaceState({ path: newUrl }, "", newUrl);
     };
     useEffect(function () {
-        if (params.current.has("message")) {
+        if (initialError) {
+            setMessage(initialError);
+            setSeverity("error");
+            setOpen(true);
+        }
+        else if (params.current.has("error")) {
+            setMessage(params.current.get("error"));
+            setSeverity("error");
+            setOpen(true);
+        }
+        else if (params.current.has("message")) {
             setMessage(params.current.get("message"));
+            setSeverity("info");
             setOpen(true);
         }
-    }, [params.toString()]);
+    }, [initialError]);
     return (React__default.createElement(Box, { sx: {
             minHeight: "100vh",
             backgroundImage: "linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)",
@@ -7384,9 +7393,10 @@ function Login(_a) {
                                 useAzureAD && (React__default.createElement(LoginWithAzureAD, { config: authConfig.AzureConfig })),
                                 guestIsEnabled && React__default.createElement(LoginAsGuest, null))))))))),
         React__default.createElement(Snackbar, { open: open, autoHideDuration: 6000, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React__default.createElement(Alert$4, { onClose: handleClose, severity: "info", variant: "filled" }, message))));
+            React__default.createElement(Alert$4, { onClose: handleClose, severity: severity, variant: "filled" }, message))));
 }
 
+var getBase = function () { var _a; return ((_a = document.getElementsByTagName("base")[0]) === null || _a === void 0 ? void 0 : _a.getAttribute("href")) || "/"; };
 var AuthProvider = function (_a) {
     var children = _a.children, authConfig = _a.authConfig;
     var useTokenHook = useToken();
@@ -7397,18 +7407,42 @@ var AuthProvider = function (_a) {
 };
 var Authenticated = function (_a) {
     var children = _a.children;
+    var redirectTo = new URL(document.location).searchParams.get("redirectTo");
+    useEffect(function () {
+        if (redirectTo) {
+            window.location.href = decodeURIComponent(redirectTo);
+        }
+    }, []);
+    if (redirectTo) {
+        return null;
+    }
     return React__default.createElement(React__default.Fragment, null, children);
 };
 var Unauthenticated = function (_a) {
     var authConfig = _a.authConfig;
     var clearUserData = useContext(AuthContext).clearUserData;
-    var params = useRef(new URL(document.location).searchParams);
+    var currentUrl = new URL(document.location);
+    var base = getBase();
+    var basePath = base.endsWith("/") ? base.slice(0, -1) : base;
+    var isRootPath = currentUrl.pathname === "/" ||
+        currentUrl.pathname === base ||
+        currentUrl.pathname === basePath;
+    var hasRedirectTo = currentUrl.searchParams.has("redirectTo");
+    var shouldShowError = !isRootPath && !hasRedirectTo;
     useEffect(function () {
         clearUserData();
-        var newUrl = window.location.origin + "?" + params.current.toString();
-        window.history.replaceState({ path: newUrl }, "", newUrl);
+        if (shouldShowError) {
+            var fullPath = currentUrl.pathname + currentUrl.search;
+            var newParams = new URLSearchParams();
+            newParams.set("redirectTo", fullPath);
+            newParams.set("error", "Session expired. Please log in to continue");
+            var newUrl = "".concat(window.location.origin).concat(base, "?").concat(newParams.toString());
+            window.history.replaceState({ path: newUrl }, "", newUrl);
+        }
     }, []);
-    return React__default.createElement(Login, { authConfig: authConfig });
+    return (React__default.createElement(Login, { authConfig: authConfig, initialError: shouldShowError
+            ? "Session expired. Please log in to continue"
+            : undefined }));
 };
 
 function Logout() {
@@ -7506,7 +7540,7 @@ var TimeAndUserMenu = function () {
 
 var ButtonWithLoading = function (_a) {
     var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
-    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading }),
+    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading || props.disabled }),
         isLoading && React__default.createElement(CircularProgress, { size: "1rem" }),
         children));
 };
@@ -10526,11 +10560,11 @@ var AreaSelector$1 = lazy(function () {
         default: mod.AreaSelector,
     }); });
 });
-function Header$1(_a) {
-    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.showTrendingsIcon, showTrendingsIcon = _c === void 0 ? true : _c, _d = _a.showTrendingsV2Icon, showTrendingsV2Icon = _d === void 0 ? true : _d, _e = _a.navbarTitle, navbarTitle = _e === void 0 ? "MESF" : _e;
-    var _f = useState(""), error = _f[0], setError = _f[1];
+function Header(_a) {
+    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.showTrendingsV2Icon, showTrendingsV2Icon = _c === void 0 ? true : _c, _d = _a.navbarTitle, navbarTitle = _d === void 0 ? "MESF" : _d;
+    var _e = useState(""), error = _e[0], setError = _e[1];
     var CustomNavbar = useContext(NavbarContext);
-    var _g = useState(false), drawerOpen = _g[0], setDrawerOpen = _g[1];
+    var _f = useState(false), drawerOpen = _f[0], setDrawerOpen = _f[1];
     var hasPermissionTo = useHasPermission();
     useUserContext().state.userLogged;
     var handleDrawerToggle = function () {
@@ -10588,9 +10622,6 @@ function Header$1(_a) {
                         alignItems: "center",
                         color: "white",
                     } },
-                    showTrendingsIcon && (React__default.createElement(Tooltip, { title: "Trendings", placement: "bottom", arrow: true, enterDelay: 1500 },
-                        React__default.createElement(IconButton$1, { color: "inherit", component: Link, to: "/trendings" },
-                            React__default.createElement(ShowChartIcon, null)))),
                     showTrendingsV2Icon && (React__default.createElement(Tooltip, { title: "Trendings V2 (ECharts)", placement: "bottom", arrow: true, enterDelay: 1500 },
                         React__default.createElement(IconButton$1, { color: "inherit", component: Link, to: "/trendings-v2" },
                             React__default.createElement(Timeline, null)))),
@@ -11629,45 +11660,7 @@ var Configuration = function () {
                     React__default.createElement(route.main, null)) })); })))));
 };
 
-var tagColors$1 = [
-    "#00AA00", // green
-    "#0000FF", // blue
-    "#FF0000", // red
-    "#9C27B0", // purple
-    "#FFA500", // orange
-    "#397234", // forest green
-    "#283F23", // dark olive
-    "#3F2617", // dark brown
-    "#0B0F08", // charcoal black
-    "#889c2dff", // olive green
-    "#B78449", // tan brown
-    "#5D9F96", // teal
-    "#1d5e74ff", // dark teal
-    "#FA7305", // bright orange
-    "#072684", // navy blue
-    "#269473ff", // emerald green
-    "#5d74b9ff", // slate blue
-    "#0C8EF4", // sky blue
-    "#8d481cff", // rust brown
-    "#2B384C", // dark slate
-];
-var availableColors = __spreadArray([], tagColors$1, true);
-var lastColor = null;
-var getRandomColor = function () {
-    if (availableColors.length === 0) {
-        availableColors = __spreadArray([], tagColors$1, true);
-        if (lastColor && availableColors.length > 1) {
-            availableColors.splice(availableColors.indexOf(lastColor), 1);
-        }
-    }
-    var randomIndex = Math.floor(Math.random() * availableColors.length);
-    var color = availableColors[randomIndex];
-    availableColors.splice(randomIndex, 1);
-    lastColor = color;
-    return color;
-};
-
-var TrendingContext$1 = createContext(undefined);
+var TrendingContext = createContext(undefined);
 var getDefaultTimeScope = function () {
     var end = new Date();
     var start = new Date(end.getTime() - 8 * 60 * 60 * 1000); // 8 hours ago
@@ -11818,10 +11811,10 @@ var TrendingProviderV2 = function (_a) {
         state: state,
         actions: actions,
     }); }, [state, actions]);
-    return (React__default.createElement(TrendingContext$1.Provider, { value: value }, children));
+    return (React__default.createElement(TrendingContext.Provider, { value: value }, children));
 };
 var useTrendingContextV2 = function () {
-    var context = useContext(TrendingContext$1);
+    var context = useContext(TrendingContext);
     if (!context) {
         throw new Error("useTrendingContextV2 must be used within TrendingProviderV2");
     }
@@ -12123,39 +12116,6 @@ var deleteAllViewTagsFromView = function (ViewId) { return __awaiter(void 0, voi
     });
 }); };
 
-var dateNavigator = function (startDate, endDate, scope, operator, current) {
-    if (current === void 0) { current = false; }
-    var newStartDate;
-    var newEndDate = endDate;
-    if (current) {
-        newEndDate = new Date();
-        if (scope === "custom") {
-            // If scope is custom, keep the same startDate
-            newStartDate = startDate;
-        }
-        else {
-            var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
-            newStartDate = moment$f(newEndDate)
-                .subtract(quantity, duration[0])
-                .toDate();
-        }
-    }
-    else {
-        if (scope === "custom") {
-            var durationInMs = moment$f(endDate).diff(moment$f(startDate));
-            newStartDate = moment$f(startDate)[operator](durationInMs).toDate();
-        }
-        else {
-            var _b = scope.split(" "), quantity = _b[0], duration = _b[1];
-            newStartDate = moment$f(startDate)[operator](quantity, duration[0])
-                .toDate();
-            newEndDate = moment$f(endDate)[operator](quantity, duration[0])
-                .toDate();
-        }
-    }
-    return { newStartDate: newStartDate, newEndDate: newEndDate };
-};
-
 var ConfirmationDialogRaw = function (_a) {
     var title = _a.title, message = _a.message, open = _a.open, onClose = _a.onClose, suffixTitle = _a.suffixTitle, other = __rest(_a, ["title", "message", "open", "onClose", "suffixTitle"]);
     var handleCancel = function () {
@@ -12561,6 +12521,39 @@ var calculateCounterpartDate = function (changedDate, changedField, scope) {
     }
 };
 
+var dateNavigator = function (startDate, endDate, scope, operator, current) {
+    if (current === void 0) { current = false; }
+    var newStartDate;
+    var newEndDate = endDate;
+    if (current) {
+        newEndDate = new Date();
+        if (scope === "custom") {
+            // If scope is custom, keep the same startDate
+            newStartDate = startDate;
+        }
+        else {
+            var _a = scope.split(" "), quantity = _a[0], duration = _a[1];
+            newStartDate = moment$f(newEndDate)
+                .subtract(quantity, duration[0])
+                .toDate();
+        }
+    }
+    else {
+        if (scope === "custom") {
+            var durationInMs = moment$f(endDate).diff(moment$f(startDate));
+            newStartDate = moment$f(startDate)[operator](durationInMs).toDate();
+        }
+        else {
+            var _b = scope.split(" "), quantity = _b[0], duration = _b[1];
+            newStartDate = moment$f(startDate)[operator](quantity, duration[0])
+                .toDate();
+            newEndDate = moment$f(endDate)[operator](quantity, duration[0])
+                .toDate();
+        }
+    }
+    return { newStartDate: newStartDate, newEndDate: newEndDate };
+};
+
 var HeaderSectionV2 = React__default.memo(function (_a) {
     var autoRefresh = _a.autoRefresh, setAutoRefresh = _a.setAutoRefresh, setChartOptions = _a.setChartOptions, chartInstance = _a.chartInstance;
     var queryClient = useQueryClient();
@@ -12891,7 +12884,7 @@ var HeaderSectionV2 = React__default.memo(function (_a) {
 });
 HeaderSectionV2.displayName = "HeaderSectionV2";
 
-var tagColors = [
+var tagColors$1 = [
     "#5eaf60", // light green
     "green", // green
     "#62bd9c", // turquoise green
@@ -12960,7 +12953,7 @@ var ColorPickerV2 = function (_a) {
                     flexWrap: "wrap",
                     padding: "10px",
                     maxWidth: "165px",
-                } }, tagColors.map(function (tagColor) { return (React__default.createElement(ColorSwatch, { key: tagColor, color: tagColor, onSelect: handleColorSelect })); })))));
+                } }, tagColors$1.map(function (tagColor) { return (React__default.createElement(ColorSwatch, { key: tagColor, color: tagColor, onSelect: handleColorSelect })); })))));
 };
 
 var NotificationSnackBar = function (_a) {
@@ -12979,274 +12972,88 @@ var NotificationSnackBar = function (_a) {
         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];
-    var _c = useState(""), error = _c[0], setError = _c[1];
-    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var updateTagFolder = useMutation({
-        mutationFn: upsertTagFolder,
-        onError: function (error) {
-            setError(error.message);
-        },
+function buildTagsTreeV2(data) {
+    var tagsForTree = [];
+    data.forEach(function (el) {
+        var tagForTree = {
+            id: el.TagId,
+            parent: el.ParentTagFolderId || 0,
+            text: el.TagName,
+            data: el,
+            droppable: el.TagTypeCode === "F",
+        };
+        return tagsForTree.push(tagForTree);
     });
-    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var parentId, parentTagId;
+    return tagsForTree;
+}
+
+var customStyles = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
+var TagFolderCustomNodeV2 = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var node = _a.node, _k = _a.options, depth = _k.depth, isOpen = _k.isOpen, onToggle = _k.onToggle, containerRef = _k.containerRef, options = _a.options, setOpenTagFolders = _a.setOpenTagFolders, openTagFolders = _a.openTagFolders, handleSelect = _a.handleSelect, setContextMenuOver = _a.setContextMenuOver, isSelected = _a.isSelected;
+    var onClickHandler = function () {
         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*/, updateTagFolder.mutate({
-                            tagFolderId: null,
-                            parentTagFolderId: parentTagId,
-                            tagFolderName: name,
-                            isActive: true,
-                        })];
-                case 1:
-                    _b.sent();
-                    _b.label = 2;
-                case 2:
-                    handleClose(true);
-                    setName("");
-                    setIsLoading(false);
-                    return [2 /*return*/];
+        var _b;
+        if (options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F") {
+            if (openTagFolders[node.id]) {
+                var newOpenTagFolders = __assign({}, openTagFolders);
+                delete newOpenTagFolders[node.id];
+                setOpenTagFolders(newOpenTagFolders);
             }
-        });
-    }); };
-    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, { 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 updateTagFolder = useMutation({
-        mutationFn: upsertTagFolder,
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var removeFolder = useMutation({
-        mutationFn: deleteTagFolder,
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var parentId, name_1, id;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    if (!tagNodeSelectedInTree) return [3 /*break*/, 4];
-                    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);
-                    setIsLoading(true);
-                    if (!parentId) return [3 /*break*/, 2];
-                    return [4 /*yield*/, removeFolder.mutate(id)];
-                case 1:
-                    _a.sent();
-                    return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, updateTagFolder.mutate({
-                        tagFolderId: id,
-                        parentTagFolderId: parentId,
-                        tagFolderName: name_1,
-                        isActive: false,
-                    })];
-                case 3:
-                    _a.sent();
-                    _a.label = 4;
-                case 4:
-                    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$1, 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, { 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 _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", { style: {
-                top: anchorPoint.y,
-                left: anchorPoint.x,
-                fontSize: "0.875rem",
-                backgroundColor: "#fff",
-                borderRadius: "2px",
-                padding: "5px 10px;",
-                width: "140px",
-                height: "auto",
-                margin: "0",
-                position: "fixed",
-                boxShadow: "0 0 20px 0 #ccc",
-                display: "flex",
-                flexDirection: "column",
-            } },
-            React__default.createElement(MenuItem, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowNewTagModal(true); } }, "New Folder"),
-            tagNodeSelectedInTree && isFolder && (React__default.createElement(MenuItem, { 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 CustomDragPreview = function (props) {
-    var _a, _b, _c;
-    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(Box, { sx: {
-            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: "0.875rem",
-            gap: "8px",
-            gridTemplateColumns: "auto auto",
-            padding: "4px 8px",
-            pointerEvents: "none",
-        } },
-        React__default.createElement(Box, { sx: {
-                alignItems: "center",
-                display: "flex",
-            } }, isFolder ? React__default.createElement(FolderIcon, null) : React__default.createElement(InsertChartIcon, { fontSize: "small" })),
-        React__default.createElement(Box, { sx: {
-                alignItems: "center",
-                display: "flex",
-            } }, ((_b = item.data) === null || _b === void 0 ? void 0 : _b.Alias) || ((_c = item.data) === null || _c === void 0 ? void 0 : _c.TagName))));
-};
-
-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 customStyles$1 = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
-var TagFolderCustomNodeV2 = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var node = _a.node, _k = _a.options, depth = _k.depth, isOpen = _k.isOpen, onToggle = _k.onToggle, containerRef = _k.containerRef, options = _a.options, setOpenTagFolders = _a.setOpenTagFolders, openTagFolders = _a.openTagFolders, handleSelect = _a.handleSelect, setContextMenuOver = _a.setContextMenuOver, isSelected = _a.isSelected;
-    var onClickHandler = function () {
-        var _a;
-        var _b;
-        if (options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F") {
-            if (openTagFolders[node.id]) {
-                var newOpenTagFolders = __assign({}, openTagFolders);
-                delete newOpenTagFolders[node.id];
-                setOpenTagFolders(newOpenTagFolders);
-            }
-            else {
-                setOpenTagFolders(__assign(__assign({}, openTagFolders), (_a = {}, _a[node.id] = node.id, _a)));
-            }
-            onToggle();
-            return;
-        }
-        if (!options.hasChild) {
-            handleSelect(node);
-        }
-    };
-    var handleContextMenu = useCallback(function (ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        setContextMenuOver(node, ev);
-    }, [node.id, setContextMenuOver]);
-    useEffect(function () {
-        var _a;
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", handleContextMenu);
-        return function () {
-            var _a;
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("contextmenu", handleContextMenu);
-        };
-    }, []);
-    return (React__default.createElement(Box, { "data-node-id": node.id, onClick: onClickHandler, sx: {
-            paddingInlineStart: depth * 2,
-            cursor: "pointer",
-            alignItems: "center",
-            display: "flex",
-            height: "32px",
-            backgroundColor: isSelected ? "#e8f0fe" : "",
-            "&:hover": {
-                backgroundColor: "#f2f2f2",
-            },
-        } },
-        React__default.createElement("style", null, customStyles$1),
-        React__default.createElement(React__default.Fragment, null,
-            options.hasChild ? (React__default.createElement("div", null, isOpen ? React__default.createElement(ArrowDropDownIcon, null) : React__default.createElement(ArrowRight, null))) : null,
-            React__default.createElement("div", null, options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F" ? (React__default.createElement(Folder, null)) : (React__default.createElement(InsertChart, { fontSize: "small" })))),
-        ((_c = node.data) === null || _c === void 0 ? void 0 : _c.TagName) && (React__default.createElement(React__default.Fragment, null,
-            ((_d = node.data) === null || _d === void 0 ? void 0 : _d.TagTypeCode) && ((_e = node.data) === null || _e === void 0 ? void 0 : _e.TagTypeCode) !== "F" && (React__default.createElement(Box, { sx: {
-                    width: "20px",
-                    height: "20px",
-                    color: "white",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    fontSize: "10px",
-                    fontWeight: "bold",
-                    borderRadius: "3px",
-                    border: "1px solid rgba(0, 0, 0, 0.2)",
-                    backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === "A" ? "#AD48C4" : "#C46F48",
-                } }, (_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$1, { variant: "body2" }, ((_h = node.data) === null || _h === void 0 ? void 0 : _h.Alias) || ((_j = node.data) === null || _j === void 0 ? void 0 : _j.TagName)))))));
+            else {
+                setOpenTagFolders(__assign(__assign({}, openTagFolders), (_a = {}, _a[node.id] = node.id, _a)));
+            }
+            onToggle();
+            return;
+        }
+        if (!options.hasChild) {
+            handleSelect(node);
+        }
+    };
+    var handleContextMenu = useCallback(function (ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        setContextMenuOver(node, ev);
+    }, [node.id, setContextMenuOver]);
+    useEffect(function () {
+        var _a;
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", handleContextMenu);
+        return function () {
+            var _a;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("contextmenu", handleContextMenu);
+        };
+    }, []);
+    return (React__default.createElement(Box, { "data-node-id": node.id, onClick: onClickHandler, sx: {
+            paddingInlineStart: depth * 2,
+            cursor: "pointer",
+            alignItems: "center",
+            display: "flex",
+            height: "32px",
+            backgroundColor: isSelected ? "#e8f0fe" : "",
+            "&:hover": {
+                backgroundColor: "#f2f2f2",
+            },
+        } },
+        React__default.createElement("style", null, customStyles),
+        React__default.createElement(React__default.Fragment, null,
+            options.hasChild ? (React__default.createElement("div", null, isOpen ? React__default.createElement(ArrowDropDownIcon, null) : React__default.createElement(ArrowRight, null))) : null,
+            React__default.createElement("div", null, options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F" ? (React__default.createElement(Folder, null)) : (React__default.createElement(InsertChart, { fontSize: "small" })))),
+        ((_c = node.data) === null || _c === void 0 ? void 0 : _c.TagName) && (React__default.createElement(React__default.Fragment, null,
+            ((_d = node.data) === null || _d === void 0 ? void 0 : _d.TagTypeCode) && ((_e = node.data) === null || _e === void 0 ? void 0 : _e.TagTypeCode) !== "F" && (React__default.createElement(Box, { sx: {
+                    width: "20px",
+                    height: "20px",
+                    color: "white",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    fontSize: "10px",
+                    fontWeight: "bold",
+                    borderRadius: "3px",
+                    border: "1px solid rgba(0, 0, 0, 0.2)",
+                    backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === "A" ? "#AD48C4" : "#C46F48",
+                } }, (_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$1, { 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 useTagSearch = function (_a) {
@@ -13485,56 +13292,242 @@ var TagSearchInput = function (_a) {
                     } }))); })))));
 };
 
-// React Query hook for fetching tags tree
-var useSearchTagsTree$1 = function () {
-    return useQuery({
-        queryKey: ["tagsTree-v2"],
-        queryFn: function () { return getTagsTree(); },
-        enabled: false, // Only fetch when explicitly called
-    });
-};
-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 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(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 _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;
-        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 _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 _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
     var updateTagFolder = useMutation({
-        mutationFn: function (_a) {
-            var tagFolderId = _a.tagFolderId, parentTagFolderId = _a.parentTagFolderId, tagFolderName = _a.tagFolderName, isActive = _a.isActive;
-            return upsertTagFolder({
-                tagFolderId: tagFolderId,
-                parentTagFolderId: parentTagFolderId,
-                tagFolderName: tagFolderName,
-                isActive: isActive,
-            });
-        },
+        mutationFn: upsertTagFolder,
         onError: function (error) {
             setError(error.message);
         },
     });
-    var changeTagFolderTag = useMutation({
-        mutationFn: function (_a) {
-            var tagId = _a.tagId, tagFolderId = _a.tagFolderId;
+    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var parentId, parentTagId;
+        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*/, updateTagFolder.mutate({
+                            tagFolderId: null,
+                            parentTagFolderId: parentTagId,
+                            tagFolderName: name,
+                            isActive: true,
+                        })];
+                case 1:
+                    _b.sent();
+                    _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, { 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 updateTagFolder = useMutation({
+        mutationFn: upsertTagFolder,
+        onError: function (error) {
+            setError(error.message);
+        },
+    });
+    var removeFolder = useMutation({
+        mutationFn: deleteTagFolder,
+        onError: function (error) {
+            setError(error.message);
+        },
+    });
+    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var parentId, name_1, id;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!tagNodeSelectedInTree) return [3 /*break*/, 4];
+                    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);
+                    setIsLoading(true);
+                    if (!parentId) return [3 /*break*/, 2];
+                    return [4 /*yield*/, removeFolder.mutate(id)];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, updateTagFolder.mutate({
+                        tagFolderId: id,
+                        parentTagFolderId: parentId,
+                        tagFolderName: name_1,
+                        isActive: false,
+                    })];
+                case 3:
+                    _a.sent();
+                    _a.label = 4;
+                case 4:
+                    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$1, 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, { 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 _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", { style: {
+                top: anchorPoint.y,
+                left: anchorPoint.x,
+                fontSize: "0.875rem",
+                backgroundColor: "#fff",
+                borderRadius: "2px",
+                padding: "5px 10px;",
+                width: "140px",
+                height: "auto",
+                margin: "0",
+                position: "fixed",
+                boxShadow: "0 0 20px 0 #ccc",
+                display: "flex",
+                flexDirection: "column",
+            } },
+            React__default.createElement(MenuItem, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowNewTagModal(true); } }, "New Folder"),
+            tagNodeSelectedInTree && isFolder && (React__default.createElement(MenuItem, { 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 CustomDragPreview = function (props) {
+    var _a, _b, _c;
+    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(Box, { sx: {
+            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: "0.875rem",
+            gap: "8px",
+            gridTemplateColumns: "auto auto",
+            padding: "4px 8px",
+            pointerEvents: "none",
+        } },
+        React__default.createElement(Box, { sx: {
+                alignItems: "center",
+                display: "flex",
+            } }, isFolder ? React__default.createElement(FolderIcon, null) : React__default.createElement(InsertChartIcon, { fontSize: "small" })),
+        React__default.createElement(Box, { sx: {
+                alignItems: "center",
+                display: "flex",
+            } }, ((_b = item.data) === null || _b === void 0 ? void 0 : _b.Alias) || ((_c = item.data) === null || _c === void 0 ? void 0 : _c.TagName))));
+};
+
+// React Query hook for fetching tags tree
+var useSearchTagsTree = function () {
+    return useQuery({
+        queryKey: ["tagsTree-v2"],
+        queryFn: function () { return getTagsTree(); },
+        enabled: false, // Only fetch when explicitly called
+    });
+};
+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(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 _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;
+        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 _l = useSearchTagsTree(), 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;
+            return upsertTagFolder({
+                tagFolderId: tagFolderId,
+                parentTagFolderId: parentTagFolderId,
+                tagFolderName: tagFolderName,
+                isActive: isActive,
+            });
+        },
+        onError: function (error) {
+            setError(error.message);
+        },
+    });
+    var changeTagFolderTag = useMutation({
+        mutationFn: function (_a) {
+            var tagId = _a.tagId, tagFolderId = _a.tagFolderId;
             return changeTagFolderToTag({ tagId: tagId, tagFolderId: tagFolderId });
         },
         onError: function (error) {
@@ -14015,38 +14008,76 @@ var LoadViewModalV2 = function (_a) {
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var TagsTableV2 = function () {
-    var queryClient = useQueryClient();
-    var _a = useContextMenuMESF(), registerConfig = _a.registerConfig, showContextMenu = _a.showContextMenu;
-    var _b = useTrendingContextV2(), _c = _b.state, viewTags = _c.viewTags, cursorData = _c.cursorData, viewSelected = _c.viewSelected; _c.views; var seriesMinMax = _c.seriesMinMax, _d = _b.actions, setViewTags = _d.setViewTags, setViewTagsAndRefetch = _d.setViewTagsAndRefetch; _d.setViewSelected; _d.setViews; var highlightSeries = _d.highlightSeries;
-    // Number formatters for consistent thousand separator and decimal formatting
-    var numberFormatterOneDecimal = useMemo(function () {
-        return new Intl.NumberFormat("en-US", {
-            minimumFractionDigits: 1,
-            maximumFractionDigits: 1,
-        });
-    }, []);
-    var numberFormatterNoDecimal = useMemo(function () {
-        return new Intl.NumberFormat("en-US", {
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 0,
-        });
-    }, []);
-    // State management
-    var _e = useState(""), error = _e[0], setError = _e[1];
-    var _f = useState(false); _f[0]; var setIsLoading = _f[1];
-    var _g = useState(null); _g[0]; var setSelectedRowTagId = _g[1];
-    var _h = useState(false), tagsTreeModalOpen = _h[0], setTagsTreeModalOpen = _h[1];
-    var _j = useState(false), bitSelectorModalOpen = _j[0], setBitSelectorModalOpen = _j[1];
-    var _k = useState(false), saveAsViewModalOpen = _k[0], setSaveAsViewModalOpen = _k[1];
-    var _l = useState(false), loadViewOpen = _l[0], setLoadViewOpen = _l[1];
-    var _m = useState(""), snackbarMessage = _m[0], setSnackbarMessage = _m[1];
-    var _o = useState(null), draggedRowId = _o[0], setDraggedRowId = _o[1];
-    var _p = useState(null), dragOverRowId = _p[0], setDragOverRowId = _p[1];
-    // Mutations
-    var deleteAllViewTags = useMutation({
-        mutationFn: function (viewId) { return deleteAllViewTagsFromView(viewId); },
-        onError: function (error) {
+var tagColors = [
+    "#00AA00", // green
+    "#0000FF", // blue
+    "#FF0000", // red
+    "#9C27B0", // purple
+    "#FFA500", // orange
+    "#397234", // forest green
+    "#283F23", // dark olive
+    "#3F2617", // dark brown
+    "#0B0F08", // charcoal black
+    "#889c2dff", // olive green
+    "#B78449", // tan brown
+    "#5D9F96", // teal
+    "#1d5e74ff", // dark teal
+    "#FA7305", // bright orange
+    "#072684", // navy blue
+    "#269473ff", // emerald green
+    "#5d74b9ff", // slate blue
+    "#0C8EF4", // sky blue
+    "#8d481cff", // rust brown
+    "#2B384C", // dark slate
+];
+var availableColors = __spreadArray([], tagColors, true);
+var lastColor = null;
+var getRandomColor = function () {
+    if (availableColors.length === 0) {
+        availableColors = __spreadArray([], tagColors, true);
+        if (lastColor && availableColors.length > 1) {
+            availableColors.splice(availableColors.indexOf(lastColor), 1);
+        }
+    }
+    var randomIndex = Math.floor(Math.random() * availableColors.length);
+    var color = availableColors[randomIndex];
+    availableColors.splice(randomIndex, 1);
+    lastColor = color;
+    return color;
+};
+
+var TagsTableV2 = function () {
+    var queryClient = useQueryClient();
+    var _a = useContextMenuMESF(), registerConfig = _a.registerConfig, showContextMenu = _a.showContextMenu;
+    var _b = useTrendingContextV2(), _c = _b.state, viewTags = _c.viewTags, cursorData = _c.cursorData, viewSelected = _c.viewSelected; _c.views; var seriesMinMax = _c.seriesMinMax, _d = _b.actions, setViewTags = _d.setViewTags, setViewTagsAndRefetch = _d.setViewTagsAndRefetch; _d.setViewSelected; _d.setViews; var highlightSeries = _d.highlightSeries;
+    // Number formatters for consistent thousand separator and decimal formatting
+    var numberFormatterOneDecimal = useMemo(function () {
+        return new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        });
+    }, []);
+    var numberFormatterNoDecimal = useMemo(function () {
+        return new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        });
+    }, []);
+    // State management
+    var _e = useState(""), error = _e[0], setError = _e[1];
+    var _f = useState(false); _f[0]; var setIsLoading = _f[1];
+    var _g = useState(null); _g[0]; var setSelectedRowTagId = _g[1];
+    var _h = useState(false), tagsTreeModalOpen = _h[0], setTagsTreeModalOpen = _h[1];
+    var _j = useState(false), bitSelectorModalOpen = _j[0], setBitSelectorModalOpen = _j[1];
+    var _k = useState(false), saveAsViewModalOpen = _k[0], setSaveAsViewModalOpen = _k[1];
+    var _l = useState(false), loadViewOpen = _l[0], setLoadViewOpen = _l[1];
+    var _m = useState(""), snackbarMessage = _m[0], setSnackbarMessage = _m[1];
+    var _o = useState(null), draggedRowId = _o[0], setDraggedRowId = _o[1];
+    var _p = useState(null), dragOverRowId = _p[0], setDragOverRowId = _p[1];
+    // Mutations
+    var deleteAllViewTags = useMutation({
+        mutationFn: function (viewId) { return deleteAllViewTagsFromView(viewId); },
+        onError: function (error) {
             setError(error.message);
         },
     });
@@ -16289,7 +16320,7 @@ var TrendingChartV2 = function (_a) {
 };
 
 // React Query hooks for data fetching
-var useSearchViews$1 = function (_a) {
+var useSearchViews = function (_a) {
     var _b = _a.autoRefresh, autoRefresh = _b === void 0 ? false : _b;
     return useQuery({
         queryKey: ["views-v2"],
@@ -16297,7 +16328,7 @@ var useSearchViews$1 = function (_a) {
         refetchInterval: autoRefresh ? 10000 : false,
     });
 };
-var useSearchViewTags$1 = function (_a) {
+var useSearchViewTags = function (_a) {
     var viewId = _a.viewId;
     return useQuery({
         queryKey: ["viewTags-v2", viewId],
@@ -16310,7 +16341,7 @@ var useSearchViewTags$1 = function (_a) {
         enabled: viewId !== null,
     });
 };
-var useSearchSeries$1 = function (_a) {
+var useSearchSeries = function (_a) {
     var start = _a.start, end = _a.end, tagIds = _a.tagIds, _b = _a.autoRefresh, autoRefresh = _b === void 0 ? false : _b;
     return useQuery({
         queryKey: ["series-v2", start, end, tagIds],
@@ -16358,9 +16389,9 @@ var TrendingsPageV2 = function () {
     var _f = useState(0), dataLoadedTrigger = _f[0], setDataLoadedTrigger = _f[1];
     var _g = useTrendingContextV2(), _h = _g.state, viewSelected = _h.viewSelected, viewTags = _h.viewTags, timeScopeStart = _h.timeScopeStart, timeScopeEnd = _h.timeScopeEnd, _j = _g.actions, setViews = _j.setViews, setViewTagsAndRefetch = _j.setViewTagsAndRefetch, setViewSelected = _j.setViewSelected, setSeriesMinMax = _j.setSeriesMinMax, resetCursors = _j.resetCursors;
     // Fetch views
-    var _k = useSearchViews$1({ autoRefresh: autoRefresh }), views = _k.data, viewsLoading = _k.isLoading, viewsIsError = _k.isError, viewsError = _k.error, viewSuccess = _k.isSuccess;
+    var _k = useSearchViews({ autoRefresh: autoRefresh }), views = _k.data, viewsLoading = _k.isLoading, viewsIsError = _k.isError, viewsError = _k.error, viewSuccess = _k.isSuccess;
     // Fetch view tags
-    var _l = useSearchViewTags$1({ viewId: viewId }), viewTagsData = _l.data, viewTagsLoading = _l.isLoading, viewTagsIsError = _l.isError, viewTagsError = _l.error, viewTagsSuccess = _l.isSuccess;
+    var _l = useSearchViewTags({ viewId: viewId }), viewTagsData = _l.data, viewTagsLoading = _l.isLoading, viewTagsIsError = _l.isError, viewTagsError = _l.error, viewTagsSuccess = _l.isSuccess;
     // Memoize tagIds for series query
     // Tags are sorted in DESCENDING order to match TrendingChartV2 processing
     var tagIds = useMemo(function () {
@@ -16401,7 +16432,7 @@ var TrendingsPageV2 = function () {
         return stableTagIdsRef.current;
     }, [realTagIds, timeScopeStart, timeScopeEnd]);
     // Fetch series data using stable query key
-    var _m = useSearchSeries$1({
+    var _m = useSearchSeries({
         start: timeScopeStart.getTime(),
         end: timeScopeEnd.getTime(),
         tagIds: queryTagIds,
@@ -16447,2891 +16478,96 @@ var TrendingsPageV2 = function () {
                 // BitIndex 0 = LSB (least significant bit)
                 return sourceData.map(function (point) { return ({
                     timestamp: point.timestamp,
-                    value: point.value !== null
-                        ? (Math.floor(point.value) >> viewTag.BitIndex) & 1
-                        : null,
-                }); });
-            }
-            // Regular tag - use series data directly
-            return seriesMap.get(tagId);
-        })
-            .filter(Boolean);
-    }, [series, tagIds, queryTagIds, viewTags]);
-    // Calculate overall min/max values from filtered series data
-    var seriesMinMaxData = useSeriesMinMax(filteredSeries, tagIds);
-    // Load initial view when views are fetched
-    useEffect(function () {
-        if (!viewSuccess || !views || !Array.isArray(views))
-            return;
-        // Always update the views list in context
-        setViews(views);
-        // Only set initial view if none is selected
-        if (!viewSelected) {
-            var lastCreated = views.reduce(function (prev, current) {
-                return prev && prev.ViewId > current.ViewId ? prev : current;
-            }, null);
-            if (lastCreated) {
-                setViewId(lastCreated.ViewId);
-                setViewSelected(lastCreated);
-            }
-        }
-    }, [viewSuccess, views, viewSelected, setViews, setViewSelected]);
-    // Update viewId when viewSelected changes (e.g., from LoadViewModal)
-    useEffect(function () {
-        if (viewSelected) {
-            setViewId(viewSelected.ViewId);
-        }
-    }, [viewSelected]);
-    // Load view tags when fetched - ONLY when viewId changes, not on every data refetch
-    // 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) ||
-            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 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(mergedTags);
-    }, [viewTagsSuccess, viewTagsData, setViewTagsAndRefetch, viewId]);
-    // Update context with calculated min/max values
-    // Use ref to prevent infinite loop from object reference changes
-    var seriesMinMaxDataRef = useRef("");
-    useEffect(function () {
-        var serialized = JSON.stringify(seriesMinMaxData);
-        if (serialized !== seriesMinMaxDataRef.current) {
-            seriesMinMaxDataRef.current = serialized;
-            setSeriesMinMax(seriesMinMaxData);
-        }
-    }, [seriesMinMaxData, setSeriesMinMax]);
-    // Reset cursors when view changes or time scope changes significantly
-    var prevViewIdRef = useRef(null);
-    useEffect(function () {
-        // Reset cursors when switching views or when time scope changes significantly
-        if (viewSelected && viewSelected.ViewId !== prevViewIdRef.current) {
-            prevViewIdRef.current = viewSelected.ViewId;
-            resetCursors();
-        }
-    }, [viewSelected, resetCursors]);
-    // Also reset cursors when time scope changes (zoom/pan)
-    useEffect(function () {
-        resetCursors();
-    }, [timeScopeStart, timeScopeEnd, resetCursors]);
-    // Increment trigger when series data finishes loading
-    // This ensures cursors re-render AFTER chart has new data
-    var prevSeriesLoadingRef = useRef(false);
-    useEffect(function () {
-        if (prevSeriesLoadingRef.current && !seriesLoading) {
-            // Transition from loading to not loading - data just loaded
-            setDataLoadedTrigger(function (prev) { return prev + 1; });
-        }
-        prevSeriesLoadingRef.current = seriesLoading;
-    }, [seriesLoading]);
-    // Handle errors
-    useEffect(function () {
-        if (viewTagsError && viewTagsIsError) {
-            setError(viewTagsError instanceof Error
-                ? viewTagsError.message
-                : String(viewTagsError));
-        }
-        if (viewsError && viewsIsError) {
-            setError(viewsError instanceof Error ? viewsError.message : String(viewsError));
-        }
-        if (seriesError && seriesIsError) {
-            setError(seriesError instanceof Error
-                ? seriesError.message
-                : String(seriesError));
-        }
-    }, [
-        viewsError,
-        viewsIsError,
-        viewTagsError,
-        viewTagsIsError,
-        seriesError,
-        seriesIsError,
-    ]);
-    var isLoading = viewsLoading || viewTagsLoading;
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HelmetDexteel, { title: "Trendings" }),
-        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",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%",
-                    background: "rgba(255, 255, 255, 0.7)",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    zIndex: 1000,
-                } },
-                React__default.createElement(CircularProgress, { size: "3rem" }))),
-            React__default.createElement("div", { style: { flexShrink: 0 } },
-                React__default.createElement(HeaderSectionV2, { autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh, setChartOptions: setChartOptions, chartInstance: chartInstance })),
-            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" })));
-};
-
-var TrendingsV2Index = function () {
-    var _a = useState(false), ihPathLoaded = _a[0], setIhPathLoaded = _a[1];
-    useEffect(function () {
-        var getIhPath = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var resp;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, axiosInstance.get("/backend/ih-path")];
-                    case 1:
-                        resp = _a.sent();
-                        localStorage.setItem("ihPath", resp.data);
-                        setIhPathLoaded(true);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        getIhPath();
-    }, []);
-    if (!ihPathLoaded) {
-        return (React__default.createElement("div", { className: "d-flex justify-content-center align-items-center" }, "Loading..."));
-    }
-    return (React__default.createElement(TrendingProviderV2, null,
-        React__default.createElement(TrendingsPageV2, null)));
-};
-
-/*!
-  * chartjs-adapter-moment v1.0.1
-  * https://www.chartjs.org
-  * (c) 2022 chartjs-adapter-moment Contributors
-  * Released under the MIT license
-  */
-
-const FORMATS = {
-  datetime: 'MMM D, YYYY, h:mm:ss a',
-  millisecond: 'h:mm:ss.SSS a',
-  second: 'h:mm:ss a',
-  minute: 'h:mm a',
-  hour: 'hA',
-  day: 'MMM D',
-  week: 'll',
-  month: 'MMM YYYY',
-  quarter: '[Q]Q - YYYY',
-  year: 'YYYY'
-};
-
-_adapters._date.override(typeof moment$f === 'function' ? {
-  _id: 'moment', // DEBUG ONLY
-
-  formats: function() {
-    return FORMATS;
-  },
-
-  parse: function(value, format) {
-    if (typeof value === 'string' && typeof format === 'string') {
-      value = moment$f(value, format);
-    } else if (!(value instanceof moment$f)) {
-      value = moment$f(value);
-    }
-    return value.isValid() ? value.valueOf() : null;
-  },
-
-  format: function(time, format) {
-    return moment$f(time).format(format);
-  },
-
-  add: function(time, amount, unit) {
-    return moment$f(time).add(amount, unit).valueOf();
-  },
-
-  diff: function(max, min, unit) {
-    return moment$f(max).diff(moment$f(min), unit);
-  },
-
-  startOf: function(time, unit, weekday) {
-    time = moment$f(time);
-    if (unit === 'isoWeek') {
-      weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
-      return time.isoWeekday(weekday).startOf('day').valueOf();
-    }
-    return time.startOf(unit).valueOf();
-  },
-
-  endOf: function(time, unit) {
-    return moment$f(time).endOf(unit).valueOf();
-  }
-} : {});
-
-var css = "/* ContextMenu.css */ .context-menu {\n\tposition: absolute;\n\tz-index: 1000;\n\tbackground-color: #fff;\n\tborder: 1px solid #ddd;\n\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n\tborder-radius: 4px;\n\toverflow: hidden;\n}\n\n.context-menu ul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.context-menu li {\n\tpadding: 8px 15px;\n\tcursor: pointer;\n\tborder-bottom: 1px solid #eee;\n\tbackground-color: #fff;\n\tcolor: #333;\n\tfontSize: 0.875rem;\n}\n\n.context-menu li:hover {\n\tbackground-color: #f5f5f5;\n}\n";
-n(css,{});
-
-var Swatch = function (_a) {
-    var color = _a.color, onSelect = _a.onSelect;
-    return (React__default.createElement("div", { style: {
-            backgroundColor: color,
-            width: "25px",
-            height: "25px",
-            display: "inline-block",
-            margin: "2px",
-            borderRadius: "4px",
-            cursor: "pointer",
-        }, onClick: function () { return onSelect(color); } }));
-};
-var ColorPicker = function (_a) {
-    var onChange = _a.onChange, color = _a.color, elementId = _a.elementId;
-    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
-    var handleClick = function (event) {
-        setAnchorEl(event.currentTarget);
-    };
-    var handleClose = function () {
-        setAnchorEl(null);
-    };
-    var open = Boolean(anchorEl);
-    var id = open ? "simple-popover" : undefined;
-    return (React__default.createElement("div", null,
-        React__default.createElement(Button$1, { "aria-describedby": id, variant: "outlined", onClick: handleClick, style: {
-                backgroundColor: color,
-                width: "20px",
-                height: "20px",
-                minWidth: "20px",
-                padding: 0,
-                margin: "4px",
-            } }),
-        React__default.createElement(Popover$1, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
-                vertical: "bottom",
-                horizontal: "left",
-            } },
-            React__default.createElement("div", { style: {
-                    display: "flex",
-                    flexWrap: "wrap",
-                    padding: "10px",
-                    maxWidth: "165px",
-                } }, tagColors$1.map(function (color) { return (React__default.createElement(Swatch, { key: color, color: color, onSelect: function (color) {
-                    onChange(elementId, color);
-                    handleClose();
-                } })); })))));
-};
-
-var TrendingsInitialState = {
-    timeScopeStart: moment$f(new Date()).subtract(1, "days").toDate(),
-    timeScopeEnd: new Date(),
-    scope: "1 day",
-    graphPan: false,
-    graphShouldUpdate: 0,
-    views: [
-        {
-            ViewId: 0,
-            ViewName: "",
-            UserName: null,
-            IsPublic: false,
-            LastModified: null,
-            LastModifiedBy: null,
-        },
-    ],
-    viewSelected: null,
-    viewTags: {},
-    shouldRefetchSeries: 1,
-};
-var TrendingsReducer = createSlice({
-    name: "__",
-    initialState: TrendingsInitialState,
-    reducers: {
-        setTotalScope: function (state, _a) {
-            var payload = _a.payload; _a.type;
-            state.shouldRefetchSeries += 1;
-            state.graphShouldUpdate += 1;
-            if (!isNil(payload.start) &&
-                !isNil(payload.end) &&
-                !isNil(payload.scope)) {
-                //from arrow navigators
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                state.scope = payload.scope;
-                return;
-            }
-            if (!isNil(payload.scope)) {
-                if (payload.scope !== "custom") {
-                    switch (payload.scope) {
-                        case "10 min":
-                            state.timeScopeStart = moment$f(state.timeScopeEnd)
-                                .subtract(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeStart = moment$f(state.timeScopeEnd)
-                                .subtract(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeStart = moment$f(state.timeScopeEnd)
-                                .subtract(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeStart = moment$f(state.timeScopeEnd)
-                                .subtract(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeStart = moment$f(state.timeScopeEnd)
-                                .subtract(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeStart = moment$f(state.timeScopeEnd)
-                                .subtract(10, "days")
-                                .toDate();
-                            break;
-                    }
-                }
-                state.scope = payload.scope;
-                return;
-            }
-            if (!isNil(payload.start) &&
-                !isNil(payload.end) &&
-                isNil(payload.graphPan)) {
-                // from zoom
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                state.scope = "custom";
-                return;
-            }
-            if (!isNil(payload.start) &&
-                !isNil(payload.end) &&
-                !isNil(payload.graphPan)) {
-                // from pan
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                return;
-            }
-            if (!isNil(payload.start)) {
-                state.timeScopeStart = payload.start;
-                if (state.scope !== "custom") {
-                    switch (state.scope) {
-                        case "10 min":
-                            state.timeScopeEnd = moment$f(payload.start)
-                                .add(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeEnd = moment$f(payload.start)
-                                .add(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeEnd = moment$f(payload.start)
-                                .add(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeEnd = moment$f(payload.start)
-                                .add(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeEnd = moment$f(payload.start)
-                                .add(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeEnd = moment$f(payload.start)
-                                .add(10, "days")
-                                .toDate();
-                            break;
-                    }
-                }
-                return;
-            }
-            if (!isNil(payload.end)) {
-                state.timeScopeEnd = payload.end;
-                if (state.scope !== "custom") {
-                    switch (state.scope) {
-                        case "10 min":
-                            state.timeScopeStart = moment$f(payload.end)
-                                .subtract(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeStart = moment$f(payload.end)
-                                .subtract(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeStart = moment$f(payload.end)
-                                .subtract(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeStart = moment$f(payload.end)
-                                .subtract(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeStart = moment$f(payload.end)
-                                .subtract(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeStart = moment$f(payload.end)
-                                .subtract(10, "days")
-                                .toDate();
-                            break;
-                    }
-                }
-                return;
-            }
-        },
-        setViews: function (state, _a) {
-            var payload = _a.payload;
-            state.views = payload;
-        },
-        setViewSelected: function (state, _a) {
-            var payload = _a.payload;
-            state.viewSelected = payload;
-        },
-        setViewTags: function (state, _a) {
-            var payload = _a.payload;
-            state.viewTags = payload;
-            state.graphShouldUpdate += 1;
-        },
-        setViewTagsAndRefetch: function (state, _a) {
-            var payload = _a.payload;
-            var newTags = structuredClone(payload);
-            __spreadArray([], Object.values(payload), true).sort(function (a, b) { return b.order - a.order; })
-                .forEach(function (vtMap, idx) {
-                newTags[vtMap.viewTag.TagId]["order"] = idx;
-            });
-            state.viewTags = newTags;
-            state.shouldRefetchSeries += 1;
-        },
-        setGraphShouldUpdate: function (state) {
-            state.graphShouldUpdate = +1;
-        },
-    },
-});
-
-var TrendingContext = createContext({
-    state: TrendingsReducer.getInitialState(),
-    actions: TrendingsReducer.actions,
-});
-var useTrendingContext = function () { return useContext(TrendingContext); };
-var TrendingProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: TrendingsReducer.getInitialState(),
-        reducers: TrendingsReducer.caseReducers,
-    }), state = _b[0], actions = _b[1];
-    var contextValue = useMemo(function () { return ({ state: state, actions: actions }); }, [state, actions]);
-    return (React__default.createElement(TrendingContext.Provider, { value: contextValue }, children));
-};
-
-var useSearchViews = function (_a) {
-    var _b = _a.autoRefresh, autoRefresh = _b === void 0 ? false : _b;
-    return useQuery({
-        queryKey: ["views"],
-        queryFn: function () { return getViews(null); },
-        refetchInterval: autoRefresh ? 10000 : false,
-    });
-};
-var useSearchViewTags = function (_a) {
-    var viewId = _a.viewId;
-    return useQuery({
-        queryKey: ["viewTags", viewId],
-        queryFn: function () {
-            if (viewId) {
-                return getViewTags(viewId);
-            }
-            else {
-                return [];
-            }
-        },
-    });
-};
-var useSearchTagsTree = function () {
-    return useQuery({
-        queryKey: ["tagsTree"],
-        queryFn: function () { return getTagsTree(); },
-    });
-};
-var useSearchSeries = function (_a) {
-    var start = _a.start, end = _a.end, tagIds = _a.tagIds, _b = _a.autoRefresh, autoRefresh = _b === void 0 ? false : _b;
-    return useQuery({
-        queryKey: ["series", start, end, tagIds],
-        queryFn: function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
-            var resp, error_1;
-            var signal = _b.signal;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        _c.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, axios.post("/series?nodeName=null", {
-                                start: start,
-                                end: end ? end : new Date().getTime(),
-                                tagIds: tagIds,
-                                sampleCount: 1000,
-                            }, {
-                                signal: signal,
-                            })];
-                    case 1:
-                        resp = _c.sent();
-                        return [2 /*return*/, get(resp, "data", [])];
-                    case 2:
-                        error_1 = _c.sent();
-                        // Ignore abort errors
-                        if (axios.isCancel(error_1) || error_1.name === "AbortError") {
-                            return [2 /*return*/, []];
-                        }
-                        throw new Error(getError(error_1));
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); },
-        refetchInterval: autoRefresh ? 10000 : false,
-    });
-};
-
-var DeleteViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
-    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(""), error = _c[0], setError = _c[1];
-    var removeView = useMutation({
-        mutationFn: deleteView,
-        onSuccess: function () {
-            handleClose(true);
-        },
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setIsLoading(true);
-                    if (!!isNil(view)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, removeView.mutate(view.ViewId)];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    setIsLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: "Delete View" },
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null, !isNil(view) ? (React__default.createElement(Grid2, { container: true, spacing: 5, style: { padding: "2rem" } },
-                React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, style: { padding: "10px", width: "100%" } },
-                    React__default.createElement(Typography$1, null,
-                        "Are yu sure you want to delete",
-                        " ",
-                        React__default.createElement("strong", null, view === null || view === void 0 ? void 0 : view.ViewName),
-                        " ?")))) : (React__default.createElement(Typography$1, null, "ERROR: No view detected, please select one"))),
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid2, { container: true, spacing: 1, style: {
-                        display: "flex",
-                        alignItems: "flex-end",
-                        justifyContent: "flex-end",
-                    } },
-                    React__default.createElement(Grid2, null,
-                        React__default.createElement(Button, { variant: "outlined", color: "secondary", onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid2, null, !isNil(view) ? (React__default.createElement(ButtonWithLoading, { variant: "contained", color: "secondary", onClick: handleSubmit, isLoading: isLoading }, "Delete")) : (React__default.createElement(Button, { variant: "contained", style: { marginRight: "1rem" }, color: "primary", onClick: function () { return handleClose(false); } }, "Ok")))))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
-};
-
-var EditViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
-    var _b = useState(""), newName = _b[0], setNewName = _b[1];
-    var _c = useState(true), isPublic = _c[0], setIsPublic = _c[1];
-    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = useState(""), error = _e[0], setError = _e[1];
-    var updateView = useMutation({
-        mutationFn: upsertView,
-        onSuccess: function () {
-            handleClose(true);
-        },
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setIsLoading(true);
-                    if (!!isNil(view)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updateView.mutate({
-                            viewId: view.ViewId,
-                            viewName: newName,
-                            isPublic: isPublic,
-                        })];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    setIsLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleChangeInput = function (e) {
-        e.preventDefault();
-        var name = e.target.value;
-        setNewName(name);
-    };
-    var handleCheck = function () { return setIsPublic(!isPublic); };
-    useEffect(function () {
-        if (view) {
-            setIsPublic(view.IsPublic);
-            setNewName(view.ViewName);
-        }
-    }, [view]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: "Update View" },
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null, !isNil(view) ? (React__default.createElement(Grid2, { container: true, spacing: 5, style: { padding: "2rem" } },
-                React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, style: { padding: "10px", width: "100%" } },
-                    React__default.createElement(TextField, { required: true, sx: {
-                            color: "rgba(0, 0, 0, 0.87)",
-                            cursor: "text",
-                            fontSize: "0.7rem",
-                            boxSizing: "border-box",
-                            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-                            fontWeight: 400,
-                            lineHeight: 1.1876,
-                            letterSpacing: "0.00938em",
-                            "& .MuiOutlinedInput-input": {
-                                padding: "10px 10px",
-                            },
-                        }, id: "viewName", label: "Name", variant: "outlined", onChange: handleChangeInput, value: newName })),
-                React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, sx: {
-                        paddingTop: "2rem",
-                        userSelect: "none",
-                        paddingLeft: "1rem",
-                        "& > label": {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "15px",
-                        },
-                        '& input[type="checkbox"]': {
-                            zoom: 1.5,
-                        },
-                    } },
-                    React__default.createElement("label", null,
-                        React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck }),
-                        React__default.createElement(Typography$1, null, "Public"))))) : (React__default.createElement(Typography$1, null, "ERROR: No view detected, please select one"))),
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid2, { container: true, spacing: 1, style: {
-                        display: "flex",
-                        alignItems: "flex-end",
-                        justifyContent: "flex-end",
-                    } },
-                    React__default.createElement(Grid2, null,
-                        React__default.createElement(Button, { variant: "outlined", color: "secondary", onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid2, null, !isNil(view) ? (React__default.createElement(ButtonWithLoading, { variant: "contained", color: "primary", onClick: handleSubmit, isLoading: isLoading }, "Update")) : (React__default.createElement(Button, { variant: "contained", style: { marginRight: "1rem" }, color: "primary", onClick: function () { return handleClose(false); } }, "Ok")))))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
-};
-
-var LoadViewModal = function (_a) {
-    var _b;
-    var open = _a.open, handleClose = _a.handleClose;
-    var queryClient = useQueryClient();
-    var _c = useTrendingContext(), _d = _c.state, views = _d.views, viewSelected = _d.viewSelected, _e = _c.actions, setViewTagsAndRefetch = _e.setViewTagsAndRefetch, setViewSelected = _e.setViewSelected;
-    var _f = useState(null), viewForDelete = _f[0], setViewForDelete = _f[1];
-    var _g = useState(null), viewForEdit = _g[0], setViewForEdit = _g[1];
-    var _h = useState(null), optionSelected = _h[0], setOptionSelected = _h[1];
-    var _j = useState(false), deleteViewModalOpen = _j[0], setDeleteViewModalOpen = _j[1];
-    var _k = useState(false), editViewModalOpen = _k[0], setEditViewModalOpen = _k[1];
-    var _l = useState(false), allViewsChecked = _l[0], setAllViewsChecked = _l[1];
-    var _m = useState(""), error = _m[0], setError = _m[1];
-    var _o = useSearchViewTags({ viewId: (_b = viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) !== null && _b !== void 0 ? _b : null }), viewTags = _o.data, viewTagsLoading = _o.isLoading; _o.isError; _o.error; var viewTagsSuccess = _o.isSuccess, viewTagsFetched = _o.isFetched;
-    var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!optionSelected) return [3 /*break*/, 2];
-                    setViewSelected(optionSelected);
-                    return [4 /*yield*/, queryClient.invalidateQueries({
-                            queryKey: ["viewTags", viewSelected.ViewId],
-                        })];
-                case 1:
-                    _a.sent();
-                    handleClose(true);
-                    return [2 /*return*/];
-                case 2:
-                    handleClose(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleDeleteView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            e.stopPropagation();
-            if (view.ViewId === (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) {
-                setError("Can not delete current view");
-            }
-            else {
-                setViewForDelete(view);
-                setDeleteViewModalOpen(true);
-            }
-            return [2 /*return*/];
-        });
-    }); };
-    var handleEditView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            setViewForEdit(view);
-            setEditViewModalOpen(true);
-            return [2 /*return*/];
-        });
-    }); };
-    var handleAllViewsCheckbox = function () {
-        setAllViewsChecked(function (prev) { return !prev; });
-    };
-    var publicViews = useMemo(function () {
-        return views.filter(function (v) { return v.IsPublic === true; });
-    }, [views, allViewsChecked]);
-    useEffect(function () {
-        if (viewTagsSuccess && viewTagsFetched) {
-            setViewTagsAndRefetch((viewTags !== null && viewTags !== void 0 ? viewTags : []).reduce(function (carr, curr, idx) {
-                if (isNil(curr.Color)) {
-                    curr.Color = getRandomColor();
-                }
-                carr[curr.TagId] = {
-                    viewTag: curr,
-                    order: idx,
-                };
-                return carr;
-            }, {}));
-        }
-    }, [viewTagsSuccess, viewTagsFetched]);
-    return (React__default.createElement("div", null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: "Views" },
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid2, { container: true }, views.length ? (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Grid2, { size: { md: 12 } },
-                        React__default.createElement(Box, { sx: {
-                                paddingBottom: "1rem",
-                                userSelect: "none",
-                                paddingLeft: "1rem",
-                                "& > label": {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: "15px",
-                                },
-                                '& input[type="checkbox"]': {
-                                    zoom: 1.5,
-                                },
-                            } },
-                            React__default.createElement("label", { htmlFor: "" },
-                                React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
-                                React__default.createElement(Typography$1, null, "All Views")))),
-                    React__default.createElement(Grid2, { size: { md: 12 } },
-                        React__default.createElement(Autocomplete$1, { size: "small", id: "list-of-views", noOptionsText: allViewsChecked
-                                ? "No views detected, please create a new view"
-                                : "No private views detected, please create a new view .", options: allViewsChecked ? views : publicViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setOptionSelected(val); }, defaultValue: optionSelected || viewSelected, style: { width: "100%" }, renderOption: function (props, option) { return (React__default.createElement("li", __assign({}, props, { key: option.ViewId }),
-                                React__default.createElement("div", { style: {
-                                        display: "flex",
-                                        justifyContent: "flex-start",
-                                        alignItems: "center",
-                                        width: "100%",
-                                    } },
-                                    React__default.createElement("div", { style: {
-                                            flexGrow: 1,
-                                        } }, option.ViewName),
-                                    React__default.createElement("div", { style: {
-                                            display: "flex",
-                                            justifyContent: "flex-end",
-                                            alignItems: "center",
-                                            flex: 1,
-                                        } },
-                                        option.IsPublic ? ("") : (React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement(Tooltip, { title: "Private", arrow: true },
-                                                React__default.createElement(LockIcon, { fontSize: "small", style: {
-                                                        color: "black",
-                                                        height: "18px",
-                                                        width: "18px",
-                                                        cursor: "auto",
-                                                    } })))),
-                                        React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(option); } },
-                                            React__default.createElement(CreateIcon, { fontSize: "small", color: "primary", style: {
-                                                    height: "18px",
-                                                    width: "18px",
-                                                    cursor: "pointer",
-                                                } })),
-                                        React__default.createElement(IconButton$1, { onClick: function (e) { return handleDeleteView(option, e); } },
-                                            React__default.createElement(DeleteIcon, { fontSize: "small", color: "secondary", style: {
-                                                    height: "18px",
-                                                    width: "18px",
-                                                    cursor: "pointer",
-                                                } })))))); }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" }))); } })))) : (React__default.createElement(Typography$1, null, "No views detected, please add one")))),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement("div", { style: { paddingTop: "1rem" } },
-                    React__default.createElement(Button, { variant: "outlined", style: { marginRight: "1rem" }, color: "secondary", onClick: function () { return handleClose(false); } }, "Cancel"),
-                    views.length ? (React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: "contained", color: "primary", isLoading: viewTagsLoading, style: { marginRight: "1rem" } }, "Apply")) : (React__default.createElement(Button, { variant: "contained", style: { marginRight: "1rem" }, color: "primary", onClick: function () { return handleClose(false); } }, "Ok"))))),
-        React__default.createElement(DeleteViewModal, { open: deleteViewModalOpen, view: viewForDelete, handleClose: function (shouldUpdate) { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            setDeleteViewModalOpen(false);
-                            if (!shouldUpdate) return [3 /*break*/, 2];
-                            return [4 /*yield*/, queryClient.invalidateQueries({ queryKey: ["views"] })];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
-            }); } }),
-        React__default.createElement(EditViewModal, { open: editViewModalOpen, view: viewForEdit, handleClose: function (shouldUpdate) { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            setEditViewModalOpen(false);
-                            if (!shouldUpdate) return [3 /*break*/, 2];
-                            return [4 /*yield*/, queryClient.invalidateQueries({ queryKey: ["views"] })];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
-            }); } }),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
-};
-
-var SaveAsViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose;
-    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(""), error = _c[0], setError = _c[1];
-    var _d = useTrendingContext(), _e = _d.state, viewTags = _e.viewTags, views = _e.views, viewSelected = _e.viewSelected, _f = _d.actions, setViewSelected = _f.setViewSelected; _f.setViewTags;
-    var _g = useState(true), isPublic = _g[0], setIsPublic = _g[1];
-    var _h = useState(""), newView = _h[0], setNewView = _h[1];
-    var handleCheck = function () { return setIsPublic(!isPublic); };
-    var updateViewTag = useMutation({
-        mutationFn: upsertViewTag,
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var updateView = useMutation({
-        mutationFn: upsertView,
-        onSuccess: function (viewId) { return __awaiter(void 0, void 0, void 0, function () {
-            var shouldClose;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        shouldClose = true;
-                        return [4 /*yield*/, Promise.allSettled(Object.values(viewTags).map(function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
-                                var _c = _b.viewTag, TagId = _c.TagId, Color = _c.Color, MinScale = _c.MinScale, MaxScale = _c.MaxScale, IsAutoScale = _c.IsAutoScale, IsVisible = _c.IsVisible, Unit = _c.Unit;
-                                return __generator(this, function (_d) {
-                                    switch (_d.label) {
-                                        case 0: return [4 /*yield*/, updateViewTag.mutate({
-                                                viewId: viewId,
-                                                tagId: TagId,
-                                                color: Color,
-                                                minScale: MinScale,
-                                                maxScale: MaxScale,
-                                                isVisible: IsVisible,
-                                                isAutoScale: IsAutoScale,
-                                                unit: Unit,
-                                            })];
-                                        case 1:
-                                            _d.sent();
-                                            return [2 /*return*/];
-                                    }
-                                });
-                            }); }))];
-                    case 1:
-                        _a.sent();
-                        handleClose(shouldClose);
-                        return [2 /*return*/];
-                }
-            });
-        }); },
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setIsLoading(true);
-                    return [4 /*yield*/, updateView.mutate({
-                            viewId: null,
-                            viewName: newView,
-                            isPublic: isPublic,
-                        })];
-                case 1:
-                    _a.sent();
-                    setIsLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: "Save View As" },
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid2, { container: true, spacing: 5, style: { padding: "1rem" } },
-                    React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete$1, { size: "small", id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) {
-                            if (typeof option === "string") {
-                                return option;
-                            }
-                            return option.ViewName;
-                        }, freeSolo: true, onChange: function (ev, val) {
-                            setViewSelected(val);
-                            if (val) {
-                                setNewView("");
-                            }
-                        }, onInputChange: function (event, newInputValue) {
-                            var isValueInViews = views.some(function (view) { return view.ViewName === newInputValue; });
-                            if (!isValueInViews) {
-                                setNewView(newInputValue);
-                            }
-                        }, style: { width: "100%" }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" }))); } })) : (React__default.createElement(Box, null,
-                        React__default.createElement(TextField, { style: { minWidth: "600px" }, size: "small", id: "outlined-basic", label: "View name", variant: "outlined", value: newView, onChange: function (e) { return setNewView(e.target.value); } }))))),
-                React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, sx: {
-                        paddingTop: "2rem",
-                        userSelect: "none",
-                        paddingLeft: "1rem",
-                        "& > label": {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "15px",
-                        },
-                        '& input[type="checkbox"]': {
-                            zoom: 1.5,
-                        },
-                    } },
-                    React__default.createElement("label", null,
-                        "Public",
-                        React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck })))),
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid2, { container: true, spacing: 1, style: {
-                        display: "flex",
-                        alignItems: "flex-end",
-                        justifyContent: "flex-end",
-                    } },
-                    React__default.createElement(Grid2, null,
-                        React__default.createElement(Button, { variant: "outlined", color: "secondary", onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid2, null,
-                        React__default.createElement(ButtonWithLoading, { variant: "contained", color: "primary", onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
-};
-
-var customStyles = "\n  ul, ol {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  }\n";
-var TagFolderCustomNode = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var node = _a.node, _k = _a.options, depth = _k.depth, isOpen = _k.isOpen, onToggle = _k.onToggle, containerRef = _k.containerRef, options = _a.options, setOpenTagFolders = _a.setOpenTagFolders, openTagFolders = _a.openTagFolders, handleSelect = _a.handleSelect, setContextMenuOver = _a.setContextMenuOver, isSelected = _a.isSelected;
-    var onClickHandler = function () {
-        var _a;
-        var _b;
-        if (options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F") {
-            if (openTagFolders[node.id]) {
-                var newOpenTagFolders = __assign({}, openTagFolders);
-                delete newOpenTagFolders[node.id];
-                setOpenTagFolders(newOpenTagFolders);
-            }
-            else {
-                setOpenTagFolders(__assign(__assign({}, openTagFolders), (_a = {}, _a[node.id] = node.id, _a)));
-            }
-            onToggle();
-            return;
-        }
-        if (!options.hasChild) {
-            handleSelect(node);
-        }
-    };
-    var handleContextMenu = useCallback(function (ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        setContextMenuOver(node, ev);
-    }, [node.id, setContextMenuOver]);
-    useEffect(function () {
-        var _a;
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("contextmenu", handleContextMenu);
-        return function () {
-            var _a;
-            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("contextmenu", handleContextMenu);
-        };
-    }, []);
-    return (React__default.createElement(Box, { onClick: onClickHandler, sx: {
-            paddingLeft: depth * 20,
-            cursor: "pointer",
-            listStyleType: "none",
-            margin: 0,
-            padding: 0,
-            alignItems: "center",
-            display: "flex",
-            height: "32px",
-            backgroundColor: isSelected ? "#e8f0fe" : "",
-            "&:hover": {
-                backgroundColor: "#f2f2f2",
-            },
-        } },
-        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$1, null) : React__default.createElement(ArrowRight, null))) : null,
-            React__default.createElement("div", null, options.hasChild || ((_b = node.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F" ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertChartIcon, { fontSize: "small" })))),
-        ((_c = node.data) === null || _c === void 0 ? void 0 : _c.TagName) && (React__default.createElement(React__default.Fragment, null,
-            ((_d = node.data) === null || _d === void 0 ? void 0 : _d.TagTypeCode) && ((_e = node.data) === null || _e === void 0 ? void 0 : _e.TagTypeCode) !== "F" && (React__default.createElement("div", { style: {
-                    backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === "A" ? "#AD48C4" : "#C46F48",
-                    margin: "0 5px",
-                    width: "25px",
-                    height: "25px",
-                    color: "white",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    cursor: "pointer",
-                    border: "1px black solid",
-                } }, (_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$1, { 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 TagSelectionModal = function (_a) {
-    var isOpen = _a.isOpen; _a.onClose; var 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 backendOffset = 1000000;
-    var _h = useState({}), openTagFolders = _h[0], setOpenTagFolders = _h[1];
-    var _j = useState([]), selectedNodes = _j[0], setSelectedNodes = _j[1];
-    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 _k = useSearchTagsTree(), tagsTree = _k.data, tagsTreeLoading = _k.isLoading, tagsTreeIsError = _k.isError, tagsTreeError = _k.error, tagsTreeIsSuccess = _k.isSuccess, tagsTreeIsFetched = _k.isFetched, refetch = _k.refetch;
-    var updateTagFolder = useMutation({
-        mutationFn: upsertTagFolder,
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var changeTagFolderTag = useMutation({
-        mutationFn: changeTagFolderToTag,
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var expanded = useMemo(function () {
-        return Object.keys(openTagFolders).map(function (el) { return Number.parseInt(el); });
-    }, [openTagFolders]);
-    var handleDrop = function (tree, options) { return __awaiter(void 0, void 0, void 0, function () {
-        var tagId, newFolderId;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    setIsLoading(true);
-                    if (!options.dragSource) return [3 /*break*/, 5];
-                    tagId = Number(options.dragSource.id);
-                    newFolderId = Number((_a = options.dropTarget) === null || _a === void 0 ? void 0 : _a.id) || null;
-                    if (tagId === newFolderId) {
-                        setIsLoading(false);
-                        return [2 /*return*/];
-                    }
-                    if (!(((_b = options.dragSource.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F")) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updateTagFolder.mutate({
-                            tagFolderId: tagId,
-                            parentTagFolderId: newFolderId,
-                            tagFolderName: options.dragSource.text,
-                            isActive: true,
-                        })];
-                case 1:
-                    _c.sent();
-                    return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, changeTagFolderTag.mutate({ tagId: tagId, tagFolderId: newFolderId })];
-                case 3:
-                    _c.sent();
-                    _c.label = 4;
-                case 4:
-                    setTagsTreeData(tree);
-                    _c.label = 5;
-                case 5:
-                    setIsLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleClick = function (node) {
-        if (node.data) {
-            onTagSelect(node.data);
-        }
-    };
-    var handleCloseContextMenu = function (e) {
-        if (showContextMenu) {
-            setShowContextMenu(false);
-        }
-    };
-    useEffect(function () {
-        if (isOpen) {
-            refetch();
-        }
-    }, [isOpen]);
-    useEffect(function () {
-        if (isOpen) {
-            var tree = buildTagsTreeV2(tagsTree !== null && tagsTree !== void 0 ? tagsTree : []);
-            setTagsTreeData(tree);
-        }
-    }, [tagsTreeIsSuccess, tagsTreeIsFetched]);
-    useEffect(function () {
-        if (tagsTreeError && tagsTreeIsError) {
-            setError(tagsTreeError.message);
-        }
-    }, [tagsTreeError, tagsTreeIsError]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { style: {
-                display: isOpen ? "block" : "none",
-                minHeight: "700px",
-                minWidth: "800px",
-            }, onClick: handleCloseContextMenu },
-            React__default.createElement("div", { style: { overflowY: "auto", maxHeight: "700px" } }, isLoading || tagsTreeLoading ? (React__default.createElement(Grid2, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
-                React__default.createElement(CircularProgress, { size: "2rem" }))) : (React__default.createElement(DndProvider$1, { backend: HTML5Backend },
-                React__default.createElement(Box, { sx: {
-                        "& .root": {
-                            boxSizing: "border-box",
-                            height: "100%",
-                            padding: "32px",
-                        },
-                        "& .dropTarget": {
-                            boxShadow: "0 0 0 1px #1967d2 inset",
-                        },
-                    } },
-                    React__default.createElement(Tree, { classes: {
-                            root: "root",
-                            dropTarget: "dropTarget",
-                        }, initialOpen: expanded, tree: tagsTreeData, rootId: backendOffset, onDrop: handleDrop, canDrop: function (tag, options) {
-                            return !selectedNodes.some(function (selectedNode) {
-                                return Number(selectedNode.id) ===
-                                    Number(options.dropTargetId);
-                            });
-                        }, render: function (node, options) {
-                            var selected = selectedNodes.some(function (selectedNode) {
-                                return Number(selectedNode.id) === Number(node.id);
-                            });
-                            return (React__default.createElement(TagFolderCustomNode, { setContextMenuOver: handleContextMenu, node: node, options: options, isSelected: selected, openTagFolders: openTagFolders, setOpenTagFolders: setOpenTagFolders, handleSelect: handleClick }));
-                        }, dragPreviewRender: function (monitorProps) { return (React__default.createElement(CustomDragPreview, { monitorProps: monitorProps })
-                        // <div>{monitorProps.item.data?.TagName}</div>
-                        ); } })))))),
-        React__default.createElement(ContextMenu, { anchorPoint: anchorPoint, isOpen: showContextMenu, setShowContextMenu: setShowContextMenu, tagNodeSelectedInTree: tagNodeSelectedInTree, getTagsTreeData: function () { return refetch(); } }),
-        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$1, { id: "modal-modal-description" },
-                        React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect })))))));
-};
-
-var useTagsDataTable = function (_a) {
-    var cursorData = _a.cursorData, viewTagsMap = _a.viewTagsMap, chartData = _a.chartData;
-    return useMemo(function () {
-        var _a;
-        var dataTable = {};
-        if (cursorData) {
-            var _loop_1 = function (viewTagEntry) {
-                var tag = viewTagsMap[viewTagEntry].viewTag;
-                var datasetForTag = ((_a = chartData.datasets.find(function (ds) {
-                    return ds.tagId === (tag === null || tag === void 0 ? void 0 : tag.TagId);
-                })) === null || _a === void 0 ? void 0 : _a.data) || [];
-                var p1 = { x: new Date("1900-01-01"), y: 0 };
-                var p2 = { x: new Date("1900-01-01"), y: 0 };
-                var p1Found = false;
-                var pmin = { x: 0, y: Number.POSITIVE_INFINITY };
-                var pmax = { x: 0, y: Number.NEGATIVE_INFINITY };
-                for (var idx = 0; idx < datasetForTag.length; idx++) {
-                    var curr = datasetForTag[idx];
-                    var currentVal = curr.x;
-                    if (!p1Found) {
-                        if (currentVal < cursorData.x1) {
-                            p1 = curr;
-                            p2 = JSON.parse(JSON.stringify(p1));
-                            pmin = JSON.parse(JSON.stringify(p1));
-                            pmax = JSON.parse(JSON.stringify(p1));
-                            continue;
-                        }
-                        else {
-                            p1Found = true;
-                        }
-                    }
-                    else {
-                        if (currentVal < cursorData.x2) {
-                            p2 = curr;
-                            if (pmin["y"] > curr["y"]) {
-                                pmin = JSON.parse(JSON.stringify(curr));
-                            }
-                            if (pmax["y"] < curr["y"]) {
-                                pmax = JSON.parse(JSON.stringify(curr));
-                            }
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                }
-                dataTable[tag === null || tag === void 0 ? void 0 : tag.TagName] = {
-                    y1: p1.y,
-                    y2: p2.y,
-                    y2y1: Number(p2.y) - Number(p1.y),
-                    pmin: pmin,
-                    pmax: pmax,
-                };
-            };
-            for (var viewTagEntry in viewTagsMap) {
-                _loop_1(viewTagEntry);
-            }
-        }
-        return dataTable;
-    }, [viewTagsMap, chartData, cursorData]);
-};
-
-var formatTimeDiffWithMs = function (start, end) {
-    // Calculate total difference in milliseconds
-    var totalMilliseconds = end - start;
-    // Convert milliseconds to seconds, minutes, hours, days, and months for comparison
-    var seconds = totalMilliseconds / 1000;
-    var minutes = seconds / 60;
-    var hours = minutes / 60;
-    var days = hours / 24;
-    var months = days / 30; // Approximation of a month
-    var remainingSeconds = seconds % 60; // Remaining seconds after full minutes
-    if (months > 12) {
-        var years = months / 12;
-        return "".concat(Math.floor(years), " years, ").concat(Math.floor(months % 12), " months");
-    }
-    else if (months > 6) {
-        return "".concat(Math.floor(months), " months, ").concat(Math.floor(days % 30), " days");
-    }
-    else if (days > 10) {
-        return "".concat(Math.floor(days), " days, ").concat(Math.floor(hours % 24), " hours");
-    }
-    else if (days > 1) {
-        return "".concat(Math.floor(days), " days, ").concat(Math.floor(hours % 24), " hours");
-    }
-    else if (hours > 12) {
-        return "".concat(Math.floor(hours), " hours, ").concat(Math.floor(minutes % 60), " minutes, ").concat(remainingSeconds.toFixed(2), " seconds");
-    }
-    else if (hours < 1) {
-        // If there are 0 hours, return just minutes and remaining seconds
-        return "".concat(Math.floor(minutes), " minutes, ").concat(remainingSeconds.toFixed(2), " seconds");
-    }
-    else {
-        // For time intervals less than 12 hours but more than 1 hour, return hours, minutes, and remaining seconds
-        return "".concat(Math.floor(hours), " hours, ").concat(Math.floor(minutes % 60), " minutes, ").concat(remainingSeconds.toFixed(2), " seconds");
-    }
-};
-
-var TableComponent = function (_a) {
-    var chartData = _a.chartData, cursorData = _a.cursorData; _a.viewTagForDelete; var setViewTagForDelete = _a.setViewTagForDelete, selectedRowTagId = _a.selectedRowTagId, setSelectedRowTagId = _a.setSelectedRowTagId;
-    var queryClient = useQueryClient();
-    var _b = useContextMenuMESF(), registerConfig = _b.registerConfig, showContextMenu = _b.showContextMenu;
-    var _c = useTrendingContext(), _d = _c.state, viewTags = _d.viewTags, viewSelected = _d.viewSelected, _e = _c.actions, setViewTags = _e.setViewTags, setViewTagsAndRefetch = _e.setViewTagsAndRefetch;
-    var _f = useState(""), error = _f[0], setError = _f[1];
-    var _g = useState(false); _g[0]; var setIsLoading = _g[1];
-    var _h = useState(false), tagsTreeModalOpen = _h[0], setTagsTreeModalOpen = _h[1];
-    var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
-    var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
-    var _l = useState(""), snackbarMessage = _l[0], setSnackbarMessage = _l[1];
-    var deleteAllViewTags = useMutation({
-        mutationFn: deleteAllViewTagsFromView,
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var updateView = useMutation({
-        mutationFn: upsertView,
-        onSuccess: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var results;
-            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 1:
-                        _b.sent();
-                        return [4 /*yield*/, Promise.allSettled(Object.values(viewTags)
-                                .sort(function (a, b) { return b.order - a.order; })
-                                .map(function (_a) {
-                                var _b;
-                                var _c = _a.viewTag, TagId = _c.TagId, Color = _c.Color, MinScale = _c.MinScale, MaxScale = _c.MaxScale, IsAutoScale = _c.IsAutoScale, IsVisible = _c.IsVisible, Unit = _c.Unit;
-                                updateViewTag.mutate({
-                                    viewId: (_b = viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) !== null && _b !== void 0 ? _b : 0,
-                                    tagId: TagId,
-                                    color: Color,
-                                    minScale: MinScale,
-                                    maxScale: MaxScale,
-                                    isVisible: IsVisible,
-                                    isAutoScale: IsAutoScale,
-                                    unit: Unit,
-                                });
-                            }))];
-                    case 2:
-                        results = _b.sent();
-                        results.forEach(function (result, index) {
-                            if (result.status === "rejected") {
-                                setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
-                            }
-                            else {
-                                setSelectedRowTagId(null);
-                                setSnackbarMessage("View saved successfully");
-                            }
-                        });
-                        return [2 /*return*/];
-                }
-            });
-        }); },
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var saveTags = useMutation({
-        mutationFn: saveTagDefaults,
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var updateViewTag = useMutation({
-        mutationFn: upsertViewTag,
-        onError: function (error) {
-            setError(error.message);
-        },
-    });
-    var dataTable = useTagsDataTable({
-        viewTagsMap: viewTags,
-        chartData: chartData,
-        cursorData: cursorData,
-    });
-    var handleChange = function (tagId, value, property) {
-        var _a, _b;
-        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), (_b = {}, _b[property] = value, _b.IsAutoScale = false, _b)) }), _a)));
-    };
-    var handleChangeScale = function (value, scale, tagId) {
-        handleChange(tagId, value, scale);
-    };
-    var handleChangeAlias = function (tagId, newName) {
-        var _a;
-        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { Alias: newName }) }), _a)));
-    };
-    var handleVisibilityChange = function (tagId, value) {
-        var _a;
-        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { IsVisible: value }) }), _a)));
-    };
-    var handleUnitChange = function (tagId, newUnit) {
-        var _a;
-        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { Unit: newUnit }) }), _a)));
-    };
-    var handleAutoScaleChange = function (tagId, checked) {
-        var _a;
-        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { IsAutoScale: !checked }) }), _a)));
-    };
-    var handleColorChange = function (tagId, value) {
-        var _a;
-        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { Color: value }) }), _a)));
-    };
-    var handleDeleteTag = function (tagId) {
-        var _a = viewTags, _b = tagId; _a[_b]; var newTags = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-        setViewTagsAndRefetch(newTags);
-    };
-    var handleAddTag = function (newTag) {
-        var _a;
-        setViewTagsAndRefetch(__assign(__assign({}, viewTags), (_a = {}, _a[newTag.TagId] = {
-            viewTag: __assign(__assign({}, newTag), { IsVisible: true, TagType: newTag.TagTypeCode, Color: newTag.Color || getRandomColor(), IsAutoScale: newTag.MinScale || newTag.MaxScale ? false : true }),
-            order: Object.keys(viewTags).length,
-        }, _a)));
-    };
-    var handleAbleScales = function (tagId, checked) {
-        if (checked) {
-            handleAutoScaleChange(tagId, checked);
-        }
-    };
-    var handleClose = function () { return setTagsTreeModalOpen(false); };
-    var getMenuOptions = function (data) {
-        var options = [];
-        if (data) {
-            options.push({
-                key: "delete",
-                name: "Remove Tag",
-                onClick: function () {
-                    if (!isNil(data)) {
-                        handleDeleteTag(data.TagId);
-                        setSelectedRowTagId(null);
-                        setViewTagForDelete(null);
-                    }
-                },
-            });
-        }
-        options = options.concat([
-            {
-                key: "add",
-                name: "Tags Tree",
-                onClick: function () {
-                    setTagsTreeModalOpen(true);
-                },
-            },
-            {
-                key: "saveDefault",
-                name: "Save Default To Tag",
-                onClick: function () {
-                    handleSaveDefaultToTag(data.TagId);
-                },
-            },
-            {
-                key: "saveView",
-                name: "Save View",
-                onClick: function () {
-                    handleSaveView();
-                },
-            },
-            {
-                key: "saveViewAs",
-                name: "Save View as",
-                onClick: function () {
-                    setSaveAsViewModalOpen(true);
-                },
-            },
-            {
-                key: "loadView",
-                name: "Load View",
-                onClick: function () {
-                    setLoadViewOpen(true);
-                },
-            },
-        ]);
-        return options;
-    };
-    var handleTagSelect = function (selectedTag) {
-        var alreadySelected = viewTags[selectedTag.Tagkey];
-        if (!alreadySelected) {
-            handleAddTag(selectedTag);
-        }
-        else {
-            setError("".concat(selectedTag.TagName, " is already selected"));
-        }
-    };
-    var handleSaveView = function () { return __awaiter(void 0, void 0, void 0, function () {
-        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*/, 3];
-                    return [4 /*yield*/, updateView.mutate({
-                            viewId: viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId,
-                            viewName: viewSelected.ViewName,
-                            isPublic: viewSelected.IsPublic,
-                        })];
-                case 2:
-                    _a.sent();
-                    _a.label = 3;
-                case 3:
-                    setIsLoading(false);
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleCloseSnackbar = function (event, reason) {
-        if (reason === "clickaway") {
-            return;
-        }
-        setSnackbarMessage("");
-    };
-    useEffect(function () {
-        var handleGlobalClick = function (e) {
-            if (selectedRowTagId !== null) {
-                setSelectedRowTagId(null);
-            }
-        };
-        var handleKeyDown = function (e) {
-            if (e.key === "Escape" && selectedRowTagId !== null) {
-                setSelectedRowTagId(null);
-            }
-        };
-        // Attach event listeners
-        document.addEventListener("click", handleGlobalClick);
-        document.addEventListener("keydown", handleKeyDown);
-        // Cleanup function
-        return function () {
-            document.removeEventListener("click", handleGlobalClick);
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [selectedRowTagId]);
-    var handleSaveDefaultToTag = function (selectedRowTagId) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, TagId, Alias, Color, MinScale, MaxScale, Unit, IsVisible, IsAutoScale;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    if (!(viewSelected && selectedRowTagId !== null)) return [3 /*break*/, 3];
-                    _a = viewTags[selectedRowTagId].viewTag, TagId = _a.TagId, Alias = _a.Alias, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, Unit = _a.Unit, IsVisible = _a.IsVisible, IsAutoScale = _a.IsAutoScale;
-                    return [4 /*yield*/, saveTags.mutate({
-                            tagId: TagId,
-                            alias: Alias,
-                            color: Color,
-                            minScale: MinScale,
-                            maxScale: MaxScale,
-                            unit: Unit,
-                        })];
-                case 1:
-                    _b.sent();
-                    return [4 /*yield*/, updateViewTag.mutate({
-                            viewId: viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId,
-                            tagId: TagId,
-                            color: Color,
-                            minScale: MinScale,
-                            maxScale: MaxScale,
-                            isVisible: IsVisible,
-                            isAutoScale: IsAutoScale,
-                            unit: Unit,
-                        })];
-                case 2:
-                    _b.sent();
-                    setSelectedRowTagId(null);
-                    _b.label = 3;
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); };
-    useEffect(function () {
-        registerConfig({
-            id: "chartContext",
-            getOptions: getMenuOptions,
-        });
-    }, [viewTags, selectedRowTagId]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid2, { container: true, spacing: 1, alignContent: "flex-start", style: {
-                height: "100%",
-                maxHeight: "100%",
-                overflowY: "auto",
-            } },
-            React__default.createElement(Grid2, { size: { xs: 12 }, style: {
-                    position: "sticky",
-                    background: "white",
-                    top: 0,
-                    left: 0,
-                    zIndex: 1000,
-                } },
-                React__default.createElement(TableContainer, { component: Paper, style: {
-                        overflowX: "auto",
-                        width: "100%",
-                        boxShadow: "none",
-                        border: "none",
-                    } },
-                    React__default.createElement(Table, { size: "small", style: { width: "100%", tableLayout: "fixed" } },
-                        React__default.createElement(TableHead, null,
-                            React__default.createElement(TableRow, null,
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        border: "0.0625rem solid black",
-                                        borderBottom: "none",
-                                        backgroundColor: "#f5f7f7",
-                                        color: "#333",
-                                        fontWeight: "normal",
-                                        textAlign: "center",
-                                        width: "26.125rem",
-                                        padding: "0",
-                                    } }, viewSelected ? (React__default.createElement(Button, { variant: "text", style: {
-                                        color: "#0075ff",
-                                        width: "26.125rem",
-                                        padding: "0",
-                                    }, onClick: function () { return setLoadViewOpen(true); }, startIcon: viewSelected.IsPublic ? (React__default.createElement(React__default.Fragment, null)) : (React__default.createElement(LockIcon, { fontSize: "small" })) }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) || "")) : (React__default.createElement(Button, { variant: "text", style: {
-                                        color: "#0075ff",
-                                        width: "26.125rem",
-                                        padding: "0",
-                                    }, onClick: function () { return setSaveAsViewModalOpen(true); } },
-                                    React__default.createElement("i", null,
-                                        React__default.createElement(SaveIcon, null),
-                                        "(Save view as)")))),
-                                React__default.createElement(TableCell, { align: "center", colSpan: 4, sx: {
-                                        border: "0.0625rem solid black",
-                                        borderBottom: "none",
-                                        backgroundColor: "#f5f7f7",
-                                        color: "#333",
-                                        fontWeight: "normal",
-                                        textAlign: "center",
-                                        width: "37.5rem",
-                                        padding: "0",
-                                    } }, "Scale"),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        border: "0.0625rem solid black",
-                                        borderBottom: "none",
-                                        backgroundColor: "#f5f7f7",
-                                        color: "#333",
-                                        fontWeight: "normal",
-                                        textAlign: "center",
-                                        padding: "6px 0",
-                                    } }, cursorData
-                                    ? (function () {
-                                        var dateX1 = new Date(cursorData.x1);
-                                        var dateX2 = new Date(cursorData.x2);
-                                        var formattedDate = dateX1.toLocaleString("en-US", __assign({ hour12: false, month: "short", day: "numeric" }, (dateX1.getFullYear() !==
-                                            dateX2.getFullYear() && { year: "numeric" })));
-                                        var dateText = "".concat(formattedDate);
-                                        return (React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement("span", { style: {
-                                                    height: "10px",
-                                                    width: "10px",
-                                                    backgroundColor: "red",
-                                                    borderRadius: "50%",
-                                                    display: "inline-block",
-                                                    marginRight: "5px",
-                                                } }),
-                                            dateText));
-                                    })()
-                                    : null),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        border: "0.0625rem solid black",
-                                        borderBottom: "none",
-                                        backgroundColor: "#f5f7f7",
-                                        color: "#333",
-                                        fontWeight: "normal",
-                                        textAlign: "center",
-                                        padding: "6px 0",
-                                    } }, cursorData
-                                    ? (function () {
-                                        var dateX1 = new Date(cursorData.x1);
-                                        var dateX2 = new Date(cursorData.x2);
-                                        var formattedDate = dateX2.toLocaleString("en-US", __assign({ hour12: false, month: "short", day: "numeric" }, (dateX1.getFullYear() !==
-                                            dateX2.getFullYear() && { year: "numeric" })));
-                                        var dateText = "".concat(formattedDate);
-                                        return (React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement("span", { style: {
-                                                    height: "10px",
-                                                    width: "10px",
-                                                    backgroundColor: "blue",
-                                                    borderRadius: "50%",
-                                                    display: "inline-block",
-                                                    marginRight: "5px",
-                                                } }),
-                                            dateText));
-                                    })()
-                                    : null),
-                                React__default.createElement(TableCell, { align: "center", colSpan: 3, sx: {
-                                        border: "0.0625rem solid black",
-                                        borderBottom: "none",
-                                        backgroundColor: "#f5f7f7",
-                                        color: "#333",
-                                        fontWeight: "normal",
-                                        textAlign: "center",
-                                        padding: "6px 0",
-                                    } }, cursorData
-                                    ? formatTimeDiffWithMs(cursorData.x1, cursorData.x2)
-                                    : null)))),
-                    React__default.createElement(Table, { size: "small", style: { width: "100%", tableLayout: "fixed" } },
-                        React__default.createElement(TableHead, null,
-                            React__default.createElement(TableRow, { sx: {
-                                    "& th": {
-                                        border: "0.0625rem solid black",
-                                        backgroundColor: "#f5f7f7",
-                                        color: "#333",
-                                        fontWeight: "normal",
-                                        textAlign: "center",
-                                        padding: "6px 0",
-                                    },
-                                } },
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "3.75rem", // 60px / 16px
-                                        fontSize: "0.75rem",
-                                    } }, "Visible"),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "18rem",
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                    } }, "Alias / Tagname"),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "4.375rem", // 70px / 16px
-                                    } }, "Color"),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "11.25rem", // 180px / 16px
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                    } }, "Min Scale"),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "11.25rem", // 180px / 16px
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                    } }, "Max Scale"),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "7.5rem", // 120px / 16px
-                                    } }, "AutoScale"),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "7.5rem", // 120px / 16px
-                                    } }, "Unit"),
-                                React__default.createElement(TableCell, { align: "center" },
-                                    " ",
-                                    cursorData
-                                        ? (function () {
-                                            var date = new Date(cursorData.x1);
-                                            var formattedHour = date.toLocaleString("en-US", {
-                                                hour12: false,
-                                                hour: "2-digit",
-                                                minute: "2-digit",
-                                                second: "2-digit",
-                                            });
-                                            var milliseconds = (date.getMilliseconds() / 1000)
-                                                .toFixed(2)
-                                                .substring(2);
-                                            var dateText = "".concat(formattedHour, ".").concat(milliseconds, " hs");
-                                            return React__default.createElement(React__default.Fragment, null, dateText);
-                                        })()
-                                        : null,
-                                    " "),
-                                React__default.createElement(TableCell, { align: "center" },
-                                    " ",
-                                    cursorData
-                                        ? (function () {
-                                            var date = new Date(cursorData.x2);
-                                            var formattedHour = date.toLocaleString("en-US", {
-                                                hour12: false,
-                                                hour: "2-digit",
-                                                minute: "2-digit",
-                                                second: "2-digit",
-                                            });
-                                            var milliseconds = (date.getMilliseconds() / 1000)
-                                                .toFixed(2)
-                                                .substring(2);
-                                            var dateText = "".concat(formattedHour, ".").concat(milliseconds, " hs");
-                                            return React__default.createElement(React__default.Fragment, null, dateText);
-                                        })()
-                                        : null,
-                                    " "),
-                                React__default.createElement(TableCell, { align: "center" }, "Y2-Y1"),
-                                React__default.createElement(TableCell, { align: "center" }, "Min"),
-                                React__default.createElement(TableCell, { align: "center" }, "Max")))))),
-            React__default.createElement(Grid2, { size: { xs: 12 } },
-                React__default.createElement(TableContainer, { component: Paper, style: {
-                        width: "100%",
-                        height: "100%",
-                        maxHeight: "100%",
-                        boxShadow: "none",
-                        border: "none",
-                    } },
-                    React__default.createElement(Table, { size: "small", style: { width: "100%", tableLayout: "fixed" } },
-                        React__default.createElement(TableBody, null, Object.values(viewTags).length ? (Object.values(viewTags).map(function (_a) {
-                            var _b, _c, _d, _e, _f, _g, _h;
-                            var tag = _a.viewTag;
-                            return (React__default.createElement(TableRow, { key: tag.TagName, onContextMenu: function (e) {
-                                    showContextMenu(e, tag, "chartContext");
-                                }, sx: {
-                                    "&:hover": {
-                                        backgroundColor: "#f2f2f2",
-                                    },
-                                } },
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "3.75rem", // 60px / 16px
-                                        fontSize: "0.75rem",
-                                        '& input[type="checkbox"]': {
-                                            zoom: 1.5,
-                                        },
-                                        textAlign: "center",
-                                    } },
-                                    React__default.createElement("input", { type: "checkbox", checked: tag.IsVisible, onChange: function (e) {
-                                            return handleVisibilityChange(tag.TagId, e.target.checked);
-                                        } })),
-                                React__default.createElement(TableCell, { sx: {
-                                        width: "18rem",
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                    } },
-                                    React__default.createElement(Tooltip, { title: tag.TagName, placement: "top", arrow: true, enterDelay: 500 },
-                                        React__default.createElement("div", { style: { display: "flex", alignItems: "center" } },
-                                            tag.TagType && (React__default.createElement("div", { style: {
-                                                    backgroundColor: tag.TagType === "A" ? "#AD48C4" : "#C46F48",
-                                                    width: "30px",
-                                                    height: "30px",
-                                                    color: "white",
-                                                    display: "flex",
-                                                    justifyContent: "center",
-                                                    alignItems: "center",
-                                                    cursor: "pointer",
-                                                    border: "1px black solid",
-                                                } }, 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);
-                                                } })))),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "4.375rem", // 70px / 16px
-                                    } },
-                                    React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.Color, elementId: tag.TagId })),
-                                React__default.createElement(TableCell, { sx: {
-                                        width: "11.25rem", // 180px / 16px
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                    } },
-                                    React__default.createElement(Box, { component: "input", type: "number", sx: __assign({ "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
-                                                "-webkit-appearance": "none",
-                                                margin: 0,
-                                            }, "&": {
-                                                "-moz-appearance": "textfield", // to Firefox
-                                            }, width: "100%" }, (tag.IsAutoScale
-                                            ? {
-                                                backgroundColor: "rgba(239, 239, 239, 0.3)",
-                                                color: "rgba(84, 84, 84, 1)",
-                                                border: "1px solid rgba(118, 118, 118, 0.3)",
-                                            }
-                                            : {})), value: tag.MinScale, onClick: function () {
-                                            return handleAbleScales(tag.TagId, tag.IsAutoScale);
-                                        }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
-                                            return handleChangeScale(e.target.value, "MinScale", tag.TagId);
-                                        } })),
-                                React__default.createElement(TableCell, { sx: {
-                                        width: "11.25rem", // 180px / 16px
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                    } },
-                                    React__default.createElement(Box, { component: "input", type: "number", sx: __assign({ "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
-                                                "-webkit-appearance": "none",
-                                                margin: 0,
-                                            }, "&": {
-                                                "-moz-appearance": "textfield", // to Firefox
-                                            }, width: "100%", WebkitAppearance: "none" }, (tag.IsAutoScale
-                                            ? {
-                                                backgroundColor: "rgba(239, 239, 239, 0.3)",
-                                                color: "rgba(84, 84, 84, 1)",
-                                                border: "1px solid rgba(118, 118, 118, 0.3)",
-                                            }
-                                            : {})), value: tag.MaxScale, onClick: function () {
-                                            return handleAbleScales(tag.TagId, tag.IsAutoScale);
-                                        }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
-                                            handleChangeScale(e.target.value, "MaxScale", tag.TagId);
-                                        } })),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        width: "7.5rem", // 120px / 16px
-                                        '& input[type="checkbox"]': {
-                                            zoom: 1.5,
-                                        },
-                                        textAlign: "center",
-                                    } },
-                                    React__default.createElement("input", { type: "checkbox", checked: !!tag.IsAutoScale, onChange: function (e) {
-                                            return handleAutoScaleChange(tag.TagId, tag.IsAutoScale);
-                                        } })),
-                                React__default.createElement(TableCell, { sx: {
-                                        width: "7.5rem", // 120px / 16px
-                                        '& input[type="checkbox"]': {
-                                            zoom: 1.5,
-                                        },
-                                        textAlign: "center",
-                                    } },
-                                    React__default.createElement("input", { type: "text", style: {
-                                            width: "100%",
-                                        }, onClick: function () {
-                                            return handleAbleScales(tag.TagId, tag.IsAutoScale);
-                                        }, onChange: function (e) {
-                                            var value = e.target.value;
-                                            handleUnitChange(tag.TagId, value);
-                                        }, value: tag.Unit === "-" ? "" : tag.Unit, onFocus: function (e) { return e.target.select(); } })),
-                                React__default.createElement(TableCell, { align: "center" }, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y1, 3) || 0),
-                                React__default.createElement(TableCell, { align: "center", sx: {
-                                        padding: "0",
-                                        '& input[type="text"] ': {
-                                            width: "100%", // 180px / 16px,
-                                            height: "17px",
-                                            display: "block",
-                                            margin: "0",
-                                            padding: "0",
-                                        },
-                                    } }, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2, 3) || 0),
-                                React__default.createElement(TableCell, { align: "center" }, round((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.y2y1, 3) || 0),
-                                React__default.createElement(TableCell, { align: "center" },
-                                    !isNaN$1(((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y) * 0)
-                                        ? round((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmin.y, 3)
-                                        : 0,
-                                    " "),
-                                React__default.createElement(TableCell, { align: "center" },
-                                    !isNaN$1(((_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y) * 0)
-                                        ? round((_h = dataTable[tag.TagName]) === null || _h === void 0 ? void 0 : _h.pmax.y)
-                                        : 0,
-                                    " ")));
-                        })) : (React__default.createElement(TableRow, null,
-                            React__default.createElement(TableCell, { colSpan: 12 },
-                                React__default.createElement(Box, { sx: {
-                                        display: "flex",
-                                        flexDirection: "column",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        padding: 4,
-                                        gap: 2,
-                                    } },
-                                    React__default.createElement("div", null, "No tag view detected."),
-                                    React__default.createElement(Button, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: "contained", color: "primary" }, "Add tag"),
-                                    React__default.createElement(Button, { onClick: function () { return setLoadViewOpen(true); }, variant: "outlined", color: "primary" }, "Load view"))))))))),
-            React__default.createElement(TagsTreeModal, { open: tagsTreeModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
-            React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function (shouldUpdate) { return __awaiter(void 0, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                setSaveAsViewModalOpen(false);
-                                if (!shouldUpdate) return [3 /*break*/, 2];
-                                return [4 /*yield*/, queryClient.invalidateQueries({ queryKey: ["views"] })];
-                            case 1:
-                                _a.sent();
-                                _a.label = 2;
-                            case 2: return [2 /*return*/];
-                        }
-                    });
-                }); } }),
-            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function (shouldUpdate) {
-                    setLoadViewOpen(false);
-                } })),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
-        React__default.createElement(Snackbar, { open: !!snackbarMessage, autoHideDuration: 800, onClose: handleCloseSnackbar, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React__default.createElement(Alert$2, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
-};
-
-var formatDateTimeToString = function (date) {
-    var hour = date.getHours().toString().padStart(2, "0");
-    var minute = date.getMinutes().toString().padStart(2, "0");
-    var second = date.getSeconds().toString().padStart(2, "0");
-    if (hour === "24") {
-        hour = "00";
-    }
-    var formattedDate = date.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-    });
-    var formattedTime = "".concat(hour, ":").concat(minute, ":").concat(second);
-    return { formattedDate: formattedDate, formattedTime: formattedTime };
-};
-
-var useChartOptions = function () {
-    var _a = useTrendingContext(); _a.state; var actions = _a.actions;
-    var debounceTimerRef = useRef(null);
-    var handleZoom = useCallback(function (_a) {
-        var chart = _a.chart;
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        debounceTimerRef.current = setTimeout(function () {
-            // Handle zoom event and execute fetch
-            var newStart = new Date(chart.scales.x.min);
-            var newEnd = new Date(chart.scales.x.max);
-            actions.setTotalScope({
-                start: newStart,
-                end: newEnd,
-            });
-        }, 1000);
-    }, [actions]);
-    var handlePan = useCallback(function (_a) {
-        var chart = _a.chart;
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        debounceTimerRef.current = setTimeout(function () {
-            // Handle pan event and execute fetch
-            var newStart = new Date(chart.scales.x.min);
-            var newEnd = new Date(chart.scales.x.max);
-            actions.setTotalScope({
-                start: newStart,
-                end: newEnd,
-                graphPan: true,
-            });
-        }, 1000);
-    }, [actions]);
-    var initialOptions = useMemo(function () { return ({
-        animation: {
-            duration: 0, // No animation
-        },
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-            x: {
-                type: "time",
-                ticks: {
-                    autoSkip: true,
-                    maxTicksLimit: 20,
-                    callback: function (value, index, ticks) {
-                        var currentDate = new Date(value);
-                        var time = formatDateTimeToString(currentDate).formattedTime;
-                        var date = formatDateTimeToString(currentDate).formattedDate;
-                        // Si es el primer tick, siempre muestra la fecha y hora
-                        if (index === 0) {
-                            return [time, date];
-                        }
-                        // De lo contrario, solo muestra la hora
-                        return time;
-                    },
-                },
-                grid: {
-                    display: true,
-                },
-            },
-            y: {
-                grid: {
-                    display: true,
-                },
-                afterUpdate: function (axis) {
-                    var chart = axis.chart;
-                    var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== "x"; });
-                    if (keys.length > 1) {
-                        for (var scaleKey in chart.scales) {
-                            var scale = chart.scales[scaleKey];
-                            if (scale.max === 1 && scale.min === 0) {
-                                chart.scales[scaleKey].display = false;
-                                chart.scales[scaleKey].options.display = false;
-                            }
-                            else {
-                                chart.scales[scaleKey].display = true;
-                                chart.scales[scaleKey].options.display = true;
-                            }
-                        }
-                    }
-                },
-            },
-        },
-        plugins: {
-            tooltip: { enabled: false },
-            legend: { display: false },
-            zoom: {
-                zoom: {
-                    wheel: { enabled: true, mode: "x" },
-                    pinch: { enabled: true, mode: "x" },
-                    onZoom: handleZoom,
-                    mode: "x",
-                },
-                pan: {
-                    enabled: true,
-                    mode: "x",
-                    onPan: handlePan,
-                },
-            },
-        },
-    }); }, [handleZoom, handlePan]);
-    return useState(initialOptions);
-};
-
-var CustomOptionsComponent = function (_a) {
-    var customOptions = _a.customOptions, setCustomOptions = _a.setCustomOptions, autoRefresh = _a.autoRefresh, setAutoRefresh = _a.setAutoRefresh;
-    var handleGridChange = function (value) {
-        setCustomOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { showGrid: value })); });
-    };
-    var handleSteppedChange = function (value) {
-        setCustomOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { stepped: value })); });
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid2, { sx: {
-                paddingLeft: "2rem",
-                userSelect: "none",
-                "& > label": {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "5px",
-                },
-                '& input[type="checkbox"]': {
-                    zoom: 1.5,
-                },
-            } },
-            React__default.createElement(FormControlLabel, { checked: customOptions.showGrid, control: React__default.createElement(Checkbox, { color: "primary" }), label: "Show Grid", onChange: function (e, checked) {
-                    handleGridChange(checked);
-                } })),
-        React__default.createElement(Grid2, { sx: {
-                paddingLeft: "2rem",
-                userSelect: "none",
-                "& > label": {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "5px",
-                },
-                '& input[type="checkbox"]': {
-                    zoom: 1.5,
-                },
-            } },
-            React__default.createElement(FormControlLabel, { checked: customOptions.stepped, control: React__default.createElement(Checkbox, { color: "primary" }), label: "Stepped", onChange: function (e, checked) {
-                    handleSteppedChange(checked);
-                } })),
-        React__default.createElement(Grid2, { sx: {
-                paddingLeft: "2rem",
-                userSelect: "none",
-                "& > label": {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "5px",
-                },
-                '& input[type="checkbox"]': {
-                    zoom: 1.5,
-                },
-            } },
-            React__default.createElement(FormControlLabel, { checked: autoRefresh, control: React__default.createElement(Switch, { color: "primary" }), label: "Auto Refresh", onChange: function (e, checked) {
-                    setAutoRefresh(checked);
-                } }))));
-};
-
-var Header = React__default.memo(function (_a) {
-    var setChartOptions = _a.setChartOptions, autoRefresh = _a.autoRefresh, setAutoRefresh = _a.setAutoRefresh;
-    var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
-    var _c = useState({
-        showGrid: true,
-        stepped: false,
-    }), customOptions = _c[0], setCustomOptions = _c[1];
-    var handleDateNavigator = function (operator, current) {
-        if (current === void 0) { current = false; }
-        var newDates = dateNavigator(state.timeScopeStart, state.timeScopeEnd, state.scope, operator, current);
-        if (newDates) {
-            actions.setTotalScope({
-                start: newDates.newStartDate,
-                end: newDates.newEndDate,
-                scope: state.scope,
-            });
-        }
-    };
-    var handleDateChange = function (newValue, key) {
-        var _a;
-        //@ts-ignore
-        actions.setTotalScope((_a = {}, _a[key] = moment$f(newValue).toDate(), _a));
-    };
-    var handleChangeScope = function (value) {
-        actions.setTotalScope({
-            scope: value,
-        });
-    };
-    useEffect(function () {
-        var changeOptions = function () {
-            setChartOptions(function (prevOptions) {
-                var newScales = __assign({}, prevOptions.scales);
-                Object.keys(newScales).forEach(function (key) {
-                    if (key) {
-                        newScales[key] = __assign(__assign({}, newScales[key]), { grid: __assign(__assign({}, newScales[key].grid), { display: customOptions.showGrid }) });
-                    }
-                });
-                return __assign(__assign({}, prevOptions), { elements: {
-                        line: {
-                            stepped: customOptions.stepped,
-                            lineTension: 0.1,
-                        },
-                    }, scales: newScales });
-            });
-        };
-        changeOptions();
-    }, [customOptions]);
-    useEffect(function () {
-        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { min: state.timeScopeStart.getTime(), max: state.timeScopeEnd.getTime() }) }) })); });
-    }, [state.timeScopeStart, state.timeScopeEnd]);
-    return (React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
-        React__default.createElement(Grid2, { size: { xs: 12 }, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "8%" } },
-            React__default.createElement(Grid2, { size: { md: 4 }, container: true, spacing: 1, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
-                React__default.createElement(Grid2, null,
-                    React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, size: "small", sx: {
-                            padding: 0.5,
-                            color: "black",
-                        } },
-                        React__default.createElement(ChevronLeft, { fontSize: "medium" }))),
-                React__default.createElement(Grid2, { size: { md: 4 } },
-                    React__default.createElement(DateTimePicker, { label: "Start", format: "MM/DD/YYYY HH:mm:ss", value: moment$f(state.timeScopeStart), onChange: function (newValue) {
-                            if (newValue) {
-                                handleDateChange(newValue.toDate(), "start");
-                            }
-                        }, minutesStep: 1, slotProps: {
-                            textField: {
-                                size: "small",
-                                variant: "outlined",
-                                fullWidth: true,
-                            },
-                        } })),
-                React__default.createElement(Grid2, { size: { md: 2 }, marginTop: 0.5 },
-                    React__default.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true },
-                        React__default.createElement(Select, { value: state.scope, onChange: function (e) {
-                                return handleChangeScope(e.target.value);
-                            }, displayEmpty: true },
-                            React__default.createElement(MenuItem, { value: "10 min" }, "10 min"),
-                            React__default.createElement(MenuItem, { value: "1 hour" }, "1 hour"),
-                            React__default.createElement(MenuItem, { value: "4 hours" }, "4 hours"),
-                            React__default.createElement(MenuItem, { value: "12 hours" }, "12 hours"),
-                            React__default.createElement(MenuItem, { value: "1 day" }, "1 day"),
-                            React__default.createElement(MenuItem, { value: "10 days" }, "10 days"),
-                            React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
-                React__default.createElement(Grid2, { size: { md: 4 } },
-                    React__default.createElement(DateTimePicker, { label: "End", format: "MM/DD/YYYY HH:mm:ss", value: autoRefresh ? null : moment$f(state.timeScopeEnd), onChange: function (newValue) {
-                            if (newValue) {
-                                handleDateChange(newValue.toDate(), "end");
-                            }
-                        }, minutesStep: 1, slotProps: {
-                            textField: {
-                                size: "small",
-                                variant: "outlined",
-                                fullWidth: true,
-                            },
-                        }, disabled: autoRefresh })),
-                React__default.createElement(Grid2, null,
-                    React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("add"); }, sx: {
-                            "& .MuiSvgIcon-root": {
-                                cursor: "pointer !important",
-                                height: "24px",
-                                width: "24px",
-                                "& svg": {
-                                    // Adjust the icon size as well
-                                    fontSize: "1.5rem",
-                                },
-                            },
-                            color: "black",
-                        } },
-                        React__default.createElement(ChevronRight, { fontSize: "large" }))),
-                React__default.createElement(Grid2, null,
-                    React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("subtract", true); }, sx: {
-                            "& .MuiSvgIcon-root": {
-                                cursor: "pointer !important",
-                                height: "24px",
-                                width: "24px",
-                                "& svg": {
-                                    // Adjust the icon size as well
-                                    fontSize: "1.5rem",
-                                },
-                            },
-                            color: "black",
-                        } },
-                        React__default.createElement(SkipNextIcon, { fontSize: "large" })))),
-            React__default.createElement(Grid2, { size: { md: 6 }, container: true, justifyContent: "space-between" },
-                React__default.createElement(Grid2, { container: true, wrap: "nowrap", spacing: 1 },
-                    React__default.createElement(Grid2, { container: true },
-                        React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions, autoRefresh: autoRefresh, setAutoRefresh: function (autoRefresh) {
-                                if (autoRefresh) {
-                                    handleChangeScope("custom");
-                                    handleDateChange(new Date(), "end");
-                                }
-                                setAutoRefresh(autoRefresh);
-                            } })))))));
-});
-Header.displayName = "Header";
-
-var DraggableLineControl = React__default.memo(function (_a) {
-    var initialLeft = _a.initialLeft, otherLineCoord = _a.otherLineCoord, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
-    var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
-    var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
-    var ref = useRef(null);
-    var handleMouseDown = function (e) {
-        setIsDragging(true);
-        e.stopPropagation();
-        e.preventDefault();
-    };
-    var handleMouseMove = function (e) {
-        if (!isDragging || !ref.current)
-            return;
-        chartArea.width - chartArea.right;
-        chartArea.left;
-        var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
-        // Line limit
-        if (color === "red" && newLeft > otherLineCoord - 20) {
-            newLeft = otherLineCoord - 20;
-        }
-        else if (color === "blue" && newLeft < otherLineCoord + 20) {
-            newLeft = otherLineCoord + 20;
-        }
-        setLeft(newLeft);
-        onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
-    };
-    var handleMouseUp = function () {
-        setIsDragging(false);
-    };
-    useEffect(function () {
-        var mouseMoveHandler = function (e) { return handleMouseMove(e); };
-        var mouseUpHandler = function () { return handleMouseUp(); };
-        if (isDragging) {
-            window.addEventListener("mousemove", mouseMoveHandler);
-            window.addEventListener("mouseup", mouseUpHandler);
-        }
-        return function () {
-            window.removeEventListener("mousemove", mouseMoveHandler);
-            window.removeEventListener("mouseup", mouseUpHandler);
-        };
-    }, [isDragging]);
-    return (React__default.createElement("div", { ref: ref, style: {
-            height: 20,
-            width: 20,
-            background: color,
-            position: "absolute",
-            top: -10,
-            left: left - 10,
-        }, onMouseDown: handleMouseDown },
-        React__default.createElement("div", { style: {
-                height: chartArea.height,
-                width: 2,
-                background: color,
-                position: "relative",
-                top: 20,
-                left: 0,
-                right: 0,
-                margin: "auto",
-            } })));
-});
-DraggableLineControl.displayName = "DraggableLineControl";
-
-var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
-    var chartPlugin = useMemo(function () { return ({
-        id: "verticalLinePlugin",
-        afterUpdate: function (chart) {
-            if (chart.chartArea) {
-                // console.log("after update");
-                if (chart.mouseX === null) {
-                    chart.mouseX = chart.chartArea.left + chart.chartArea.width / 10;
-                    // chart.mouseX = chart.chartArea.left + 30.9
-                }
-                if (chart.secondLineX === null) {
-                    chart.secondLineX =
-                        chart.chartArea.left + chart.chartArea.width * 0.9;
-                    // chart.secondLineX = chart.chartArea.right
-                }
-            }
-        },
-        beforeInit: function (chart) {
-            chart.mouseX = null;
-            chart.secondLineX = null;
-        },
-        afterDatasetsDraw: function (chart) {
-            var x1 = chart.mouseX;
-            var x2 = chart.secondLineX;
-            setChartArea(chart.chartArea);
-            setCoords({ x1: x1, x2: x2 });
-        },
-    }); }, [setChartArea, setCoords]);
-    return chartPlugin;
-};
-
-var getValuesAtCursor = function (chart, timeAtCursor) {
-    var valuesAtCursor = [];
-    chart.data.datasets.forEach(function (dataset) {
-        var previousDataPoint = null;
-        for (var i = 0; i < dataset.data.length; i++) {
-            if (dataset.data[i].x.getTime() <= timeAtCursor) {
-                previousDataPoint = dataset.data[i];
-            }
-            else {
-                break;
-            }
-        }
-        if (previousDataPoint) {
-            valuesAtCursor.push(previousDataPoint.y);
-        }
-    });
-    return valuesAtCursor;
-};
-var updateCursorData = function (chart, setCursorData) {
-    var xScale = chart.scales.x;
-    // Coordenadas para la primera y segunda línea
-    var timeAtCursor1 = xScale.getValueForPixel(chart.mouseX);
-    var timeAtCursor2 = xScale.getValueForPixel(chart.secondLineX);
-    // Los valores en el punto del cursor pueden ser diferentes
-    var valuesAtCursor1 = getValuesAtCursor(chart, timeAtCursor1);
-    var valuesAtCursor2 = getValuesAtCursor(chart, timeAtCursor2);
-    setCursorData({
-        x1: timeAtCursor1,
-        x2: timeAtCursor2,
-        values: __spreadArray(__spreadArray([], valuesAtCursor1, true), valuesAtCursor2, true),
-    });
-};
-
-var useXAxisDatePlugin = function () {
-    var chartPlugin = useMemo(function () { return ({
-        id: "xAxisDatePlugin",
-        afterBuildTicks: function (chart) {
-            var oldTicks = chart.scales.x.ticks;
-            var newTicks = [];
-            newTicks.push(oldTicks[0]);
-            for (var i = 1; i < oldTicks.length; i++) {
-                var current = new Date(oldTicks[i].value);
-                var previous = new Date(oldTicks[i - 1].value);
-                var time = formatDateTimeToString(current).formattedTime;
-                var date = formatDateTimeToString(current).formattedDate;
-                var newLabel = void 0;
-                if (current.getDate() !== previous.getDate()) {
-                    newLabel = [time, date];
-                }
-                else {
-                    newLabel = time;
-                }
-                newTicks.push({
-                    value: oldTicks[i].value,
-                    major: oldTicks[i].major,
-                    label: newLabel,
-                });
-            }
-            chart.scales.x.ticks = newTicks;
-        },
-    }); }, []);
-    return chartPlugin;
-};
-
-var useYAxisPlugin = function () {
-    var chartPlugin = useMemo(function () { return ({
-        id: "yAxisPlugin",
-    }); }, []);
-    return chartPlugin;
-};
-
-var areRangesSimilar = function (tag1, tag2) {
-    if (isNil(tag1.MaxScale) ||
-        isNil(tag1.MinScale) ||
-        isNil(tag2.MaxScale) ||
-        isNil(tag2.MinScale))
-        return;
-    var range1 = tag1.MaxScale - tag1.MinScale; // Rango de la primera etiqueta
-    var range2 = tag2.MaxScale - tag2.MinScale; // Rango de la segunda etiqueta
-    // Determina los límites para la comparación
-    var lowerBound = Math.max(tag1.MinScale, tag2.MinScale);
-    var upperBound = Math.min(tag1.MaxScale, tag2.MaxScale);
-    // Calcula el solapamiento entre los dos rangos
-    var overlap = Math.max(0, upperBound - lowerBound);
-    // Determina si el solapamiento es significativo comparado con los rangos individuales
-    var isSignificantOverlap = overlap / range1 > 0.5 && overlap / range2 > 0.5;
-    return isSignificantOverlap;
-};
-
-var TrendingChart = React__default.memo(function (_a) {
-    var series = _a.series, chartOptions = _a.chartOptions, setChartOptions = _a.setChartOptions, chartData = _a.chartData, setCursorData = _a.setCursorData, setChartData = _a.setChartData;
-    var _b = useTrendingContext(), state = _b.state, viewTags = _b.state.viewTags; _b.actions;
-    var _c = useState(null), lineTabCoords = _c[0], setLineTabCoords = _c[1];
-    var _d = useState(null), chartArea = _d[0], setChartArea = _d[1];
-    var chartRef = useRef(null);
-    var forDebounce = useRef({
-        viewTags: viewTags,
-        series: series,
-        setChartOptions: setChartOptions,
-        setChartData: setChartData,
-    });
-    var debouncedUpdateChart = useRef(debounce(function () {
-        if (chartRef.current) {
-            updateCursorData(chartRef.current, setCursorData);
-            chartRef.current.update();
-        }
-    }, 250));
-    forDebounce.current = {
-        viewTags: viewTags,
-        series: series,
-        setChartOptions: setChartOptions,
-        setChartData: setChartData,
-    };
-    var debouncedUpdateChartBasedOnData = useRef(debounce(function () {
-        var _a = forDebounce.current, viewTags = _a.viewTags, series = _a.series, setChartOptions = _a.setChartOptions, setChartData = _a.setChartData;
-        var axes = [];
-        if (!series.length) {
-            return;
-        }
-        Object.values(viewTags).forEach(function (_a, index) {
-            var tag = _a.viewTag;
-            var existingAxis = axes.findIndex(function (existingTag) {
-                return areRangesSimilar(existingTag, tag);
-            });
-            if (existingAxis === -1) {
-                axes.push(tag); // Add new axis if no similar one exists
-                seriesVsTags.current[tag.TagId] = tag.TagId;
-            }
-            else {
-                seriesVsTags.current[tag.TagId] = axes[existingAxis].TagId;
-            }
-        });
-        // Configure yAxes based on grouped axes
-        var yAxesConfig = axes.map(function (axis) {
-            var min = Number(axis.MinScale);
-            var max = Number(axis.MaxScale);
-            if (!min && !max) {
-                max = 1;
-            }
-            return {
-                id: "y-axis-".concat(axis.TagId),
-                type: "linear",
-                display: axis.IsVisible,
-                title: {
-                    display: true,
-                    text: axis.TagName,
-                },
-                min: axis.IsAutoScale ? undefined : min,
-                max: axis.IsAutoScale ? undefined : max,
-                suggestedMin: axis.IsAutoScale ? undefined : min,
-                suggestedMax: axis.IsAutoScale ? undefined : max,
-                stepSize: 10,
-                grid: {
-                    display: true,
-                },
-                afterUpdate: function (a) {
-                    var chart = a.chart;
-                    var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== "x"; });
-                    var counterOfDefaultsScales = 0;
-                    if (keys.length > 1) {
-                        for (var scaleKey in chart.scales) {
-                            var scale = chart.scales[scaleKey];
-                            if (scale.max === 1 && scale.min === 0) {
-                                chart.scales[scaleKey].display = false;
-                                chart.scales[scaleKey].options.display = false;
-                                counterOfDefaultsScales++;
-                            }
-                            else {
-                                chart.scales[scaleKey].display = true;
-                                chart.scales[scaleKey].options.display = true;
-                            }
-                            if (counterOfDefaultsScales === keys.length) {
-                                chart.scales[keys[0]].display = true;
-                                chart.scales[keys[0]].options.display = true;
-                            }
-                        }
-                    }
-                },
-            };
-        });
-        setChartOptions(function (prevOptions) {
-            var newResp = __assign(__assign({}, prevOptions), { scales: __assign({ x: __assign({}, prevOptions.scales.x) }, yAxesConfig.reduce(function (acc, cur) {
-                    var _a;
-                    return (__assign(__assign({}, acc), (_a = {}, _a[cur.id] = cur, _a)));
-                }, {})) });
-            return newResp;
-        });
-        var updatedSeries = series.map(function (serie, index) {
-            var _a;
-            var tagsSortedArray = Object.values(viewTags).sort(function (a, b) { return b.order - a.order; });
-            var tag = (_a = tagsSortedArray[index]) === null || _a === void 0 ? void 0 : _a.viewTag;
-            var yAxisTagId = seriesVsTags.current[tag === null || tag === void 0 ? void 0 : tag.TagId];
-            return {
-                yAxisID: "y-axis-".concat(yAxisTagId),
-                data: serie.map(function (sample) { return ({
-                    x: new Date(sample.timestamp),
-                    y: sample.value,
-                }); }),
-                tagId: tag === null || tag === void 0 ? void 0 : tag.TagId,
-                borderColor: tag === null || tag === void 0 ? void 0 : tag.Color,
-                hidden: !(tag === null || tag === void 0 ? void 0 : tag.IsVisible),
-                pointRadius: serie.length <= 50 ? 3 : 0,
-            };
-        });
-        setChartShouldInitCursors(true);
-        setChartData({
-            labels: [],
-            datasets: updatedSeries,
-        });
-    }, 1000));
-    var _e = useState(false), chartShouldInitCursors = _e[0], setChartShouldInitCursors = _e[1];
-    var memoizedSetChartArea = useCallback(function (area) { return setChartArea(area); }, []);
-    var memoizedSetLineTabCoords = useCallback(function (coords) { return setLineTabCoords(coords); }, []);
-    var verticalLinePlugin = useGetVerticalLinePlugin(memoizedSetChartArea, memoizedSetLineTabCoords);
-    var xAxisDatePlugin = useXAxisDatePlugin();
-    var yAxisPlugin = useYAxisPlugin();
-    var plugins = useMemo(function () { return [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin]; }, [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin]);
-    var seriesVsTags = useRef({});
-    useEffect(function () {
-        // Only run debounced update when series data actually changes
-        // Display property changes (color, visibility, scales) are handled by immediate useEffects
-        debouncedUpdateChartBasedOnData.current();
-    }, [series]); // Removed state.graphShouldUpdate to prevent running on display-only changes
+                    value: point.value !== null
+                        ? (Math.floor(point.value) >> viewTag.BitIndex) & 1
+                        : null,
+                }); });
+            }
+            // Regular tag - use series data directly
+            return seriesMap.get(tagId);
+        })
+            .filter(Boolean);
+    }, [series, tagIds, queryTagIds, viewTags]);
+    // Calculate overall min/max values from filtered series data
+    var seriesMinMaxData = useSeriesMinMax(filteredSeries, tagIds);
+    // Load initial view when views are fetched
     useEffect(function () {
-        if (chartShouldInitCursors) {
-            if (chartRef.current) {
-                updateCursorData(chartRef.current, setCursorData);
-                chartRef.current.update();
+        if (!viewSuccess || !views || !Array.isArray(views))
+            return;
+        // Always update the views list in context
+        setViews(views);
+        // Only set initial view if none is selected
+        if (!viewSelected) {
+            var lastCreated = views.reduce(function (prev, current) {
+                return prev && prev.ViewId > current.ViewId ? prev : current;
+            }, null);
+            if (lastCreated) {
+                setViewId(lastCreated.ViewId);
+                setViewSelected(lastCreated);
             }
         }
-    }, [chartShouldInitCursors, state.graphShouldUpdate]);
-    // Update colors and visibility immediately without debounce
+    }, [viewSuccess, views, viewSelected, setViews, setViewSelected]);
+    // Update viewId when viewSelected changes (e.g., from LoadViewModal)
     useEffect(function () {
-        setChartData(function (prevData) {
-            if (!prevData.datasets || !prevData.datasets.length)
-                return prevData;
-            var updatedDatasets = prevData.datasets.map(function (dataset) {
-                var tag = viewTags[dataset.tagId];
-                if (tag) {
-                    return __assign(__assign({}, dataset), { borderColor: tag.viewTag.Color, hidden: !tag.viewTag.IsVisible });
-                }
-                return dataset;
-            });
-            return __assign(__assign({}, prevData), { datasets: updatedDatasets });
-        });
-    }, [viewTags, setChartData]);
-    // Update Y-axis scales immediately when AutoScale or Min/Max changes
+        if (viewSelected) {
+            setViewId(viewSelected.ViewId);
+        }
+    }, [viewSelected]);
+    // Load view tags when fetched - ONLY when viewId changes, not on every data refetch
+    // This preserves local order changes (from drag-and-drop) until a new view is loaded
+    var loadedViewIdRef = useRef(null);
     useEffect(function () {
-        var axes = [];
-        Object.values(viewTags).forEach(function (_a) {
-            var tag = _a.viewTag;
-            var existingAxis = axes.findIndex(function (existingTag) {
-                return areRangesSimilar(existingTag, tag);
+        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 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;
+                }
             });
-            if (existingAxis === -1) {
-                axes.push(tag);
-            }
-        });
-        var yAxesConfig = axes.map(function (axis) {
-            var min = Number(axis.MinScale);
-            var max = Number(axis.MaxScale);
-            if (!min && !max) {
-                max = 1;
-            }
-            return {
-                id: "y-axis-".concat(axis.TagId),
-                type: "linear",
-                display: axis.IsVisible,
-                title: {
-                    display: true,
-                    text: axis.TagName,
-                },
-                min: axis.IsAutoScale ? undefined : min,
-                max: axis.IsAutoScale ? undefined : max,
-                suggestedMin: axis.IsAutoScale ? undefined : min,
-                suggestedMax: axis.IsAutoScale ? undefined : max,
-                stepSize: 10,
-                grid: {
-                    display: true,
-                },
-                afterUpdate: function (a) {
-                    var chart = a.chart;
-                    var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== "x"; });
-                    var counterOfDefaultsScales = 0;
-                    if (keys.length > 1) {
-                        for (var scaleKey in chart.scales) {
-                            var scale = chart.scales[scaleKey];
-                            if (scale.max === 1 && scale.min === 0) {
-                                chart.scales[scaleKey].display = false;
-                                chart.scales[scaleKey].options.display = false;
-                                counterOfDefaultsScales++;
-                            }
-                            else {
-                                chart.scales[scaleKey].display = true;
-                                chart.scales[scaleKey].options.display = true;
-                            }
-                            if (counterOfDefaultsScales === keys.length) {
-                                chart.scales[keys[0]].display = true;
-                                chart.scales[keys[0]].options.display = true;
-                            }
-                        }
+            // 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();
                     }
-                },
-            };
-        });
-        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign({ x: __assign({}, prevOptions.scales.x) }, yAxesConfig.reduce(function (acc, cur) {
-                var _a;
-                return (__assign(__assign({}, acc), (_a = {}, _a[cur.id] = cur, _a)));
-            }, {})) })); });
-    }, [viewTags, setChartOptions]);
-    return (React__default.createElement(Paper, { style: { height: "100%", position: "relative" } },
-        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: "red", chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, onUpdate: function (newLeft) {
-                setLineTabCoords(function (prevCoords) {
-                    prevCoords.x1 = newLeft;
-                    return prevCoords;
-                });
-                // @ts-ignore
-                chartRef.current.mouseX = newLeft;
-                debouncedUpdateChart.current();
-            } })) : null,
-        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: "blue", initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, chartArea: chartArea, onUpdate: function (newLeft) {
-                setLineTabCoords(function (prevCoords) {
-                    prevCoords.x2 = newLeft;
-                    return prevCoords;
-                });
-                // @ts-ignore
-                chartRef.current.secondLineX = newLeft;
-                debouncedUpdateChart.current();
-            } })) : null,
-        React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: plugins })));
-});
-TrendingChart.displayName = "TrendingChart";
-
-Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
-var Trending = React__default.memo(function (_a) {
-    _a.title; var autoRefresh = _a.autoRefresh, setAutoRefresh = _a.setAutoRefresh;
-    var _b = useTrendingContext(), state = _b.state, _c = _b.state, viewTags = _c.viewTags; _c.shouldRefetchSeries;
-    var _d = useState(""), error = _d[0], setError = _d[1];
-    var _e = useState(null), selectedRowTagId = _e[0], setSelectedRowTagId = _e[1];
-    var _f = useState(null), viewTagForDelete = _f[0], setViewTagForDelete = _f[1];
-    var _g = useChartOptions(), chartOptions = _g[0], setChartOptions = _g[1];
-    var _h = useState({
-        labels: [],
-        datasets: [],
-    }), chartData = _h[0], setChartData = _h[1];
-    var _j = useState(null), cursorData = _j[0], setCursorData = _j[1];
-    var handleRightClick = function (event, tagId) {
-        event.preventDefault();
-        event.stopPropagation(); // Prevent the click event from propagating to the document
-        if (isNumber(tagId)) {
-            setViewTagForDelete(viewTags[tagId].viewTag);
-        }
-        else {
-            setViewTagForDelete(null);
-        }
-        setSelectedRowTagId(tagId);
-    };
-    var _k = useSearchSeries({
-        start: state.timeScopeStart.getTime(),
-        end: state.timeScopeEnd.getTime(),
-        tagIds: Object.values(viewTags).map(function (tag) { return tag.viewTag.TagId; }),
-        autoRefresh: autoRefresh,
-    }), series = _k.data, seriesLoading = _k.isLoading; _k.isError; _k.error; _k.isSuccess;
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid2, { container: true, style: { width: "95svw", height: "88svh", margin: 0 } },
-            React__default.createElement(Header, { setChartOptions: setChartOptions, autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh }),
-            React__default.createElement(Grid2, { size: { md: 12 } },
-                React__default.createElement(Divider, { style: { margin: "10px 0 20px" } })),
-            React__default.createElement(Grid2, { size: { xs: 12 }, style: { height: "45%" } },
-                React__default.createElement(TrendingChart, { series: series !== null && series !== void 0 ? series : [], chartData: chartData, setChartData: setChartData, chartOptions: chartOptions, setChartOptions: setChartOptions, setCursorData: setCursorData })),
-            React__default.createElement(Grid2, { container: true, size: { xs: 12 }, onContextMenu: function (e) { return handleRightClick(e, null); }, style: {
-                    height: "40%",
-                    minWidth: "100%",
-                    borderRadius: 10,
-                    margin: "10px 0 10px",
-                    position: seriesLoading ? "relative" : "inherit",
-                } },
-                seriesLoading && (React__default.createElement("div", { style: {
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        width: "100%",
-                        height: "100%",
-                        background: "rgba(255, 255, 255, 0.7)", // fondo semitransparente
-                        display: "flex", // Centra el CircularProgress
-                        justifyContent: "center", // Centra horizontalmente
-                        alignItems: "center", // Centra verticalmente
-                        zIndex: 2,
-                    } },
-                    React__default.createElement(CircularProgress, { size: "2rem" }))),
-                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, viewTagForDelete: viewTagForDelete, setViewTagForDelete: setViewTagForDelete, selectedRowTagId: selectedRowTagId, setSelectedRowTagId: setSelectedRowTagId }))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "ERROR" })));
-});
-Trending.displayName = "Trending";
-
-// @flow
-var TrendingsPage = function () {
-    var _a = useState(false), autoRefresh = _a[0], setAutoRefresh = _a[1];
-    var _b = useState(""), error = _b[0], setError = _b[1];
-    var _c = useState(null), viewId = _c[0], setViewId = _c[1];
-    var _d = useTrendingContext(), viewSelected = _d.state.viewSelected, _e = _d.actions, setViews = _e.setViews, setViewTagsAndRefetch = _e.setViewTagsAndRefetch, setViewSelected = _e.setViewSelected;
-    var _f = useSearchViews({ autoRefresh: autoRefresh }), views = _f.data; _f.isLoading; var viewsIsError = _f.isError, viewsError = _f.error, viewSuccess = _f.isSuccess;
-    var _g = useSearchViewTags({ viewId: viewId }), viewTags = _g.data; _g.isLoading; var viewTagsIsError = _g.isError, viewTagsError = _g.error, viewTagsSuccess = _g.isSuccess;
-    useEffect(function () {
-        var lastCreated;
-        if (!viewSelected) {
-            if (!views)
-                return;
-            setViews(views);
-            lastCreated = views.reduce(function (prev, current) {
-                return prev && prev.ViewId > current.ViewId ? prev : current;
-            }, null);
-            setViewId(lastCreated.ViewId);
-            //viewSelected
-            setViewSelected(lastCreated);
+                    mergedTags[backendTag.TagId] = {
+                        viewTag: backendTag,
+                        order: maxOrder + 1,
+                    };
+                }
+            });
         }
         else {
-            lastCreated = viewSelected;
-            setViewId(lastCreated.ViewId);
-        }
-    }, [viewSuccess]);
-    useEffect(function () {
-        if (viewTags) {
-            if (!viewTags)
-                return;
-            var vTags = viewTags.reduce(function (carr, curr, idx) {
+            // No local storage -> Use backend tags with default ordering
+            mergedTags = backendTags.reduce(function (carr, curr, idx) {
                 if (isNil(curr.Color)) {
                     curr.Color = getRandomColor();
                 }
@@ -19341,25 +16577,128 @@ var TrendingsPage = function () {
                 };
                 return carr;
             }, {});
-            setViewTagsAndRefetch(vTags);
         }
-    }, [viewTagsSuccess]);
+        // Reset stable ref when loading new view
+        stableTagIdsRef.current = [];
+        setViewTagsAndRefetch(mergedTags);
+    }, [viewTagsSuccess, viewTagsData, setViewTagsAndRefetch, viewId]);
+    // Update context with calculated min/max values
+    // Use ref to prevent infinite loop from object reference changes
+    var seriesMinMaxDataRef = useRef("");
+    useEffect(function () {
+        var serialized = JSON.stringify(seriesMinMaxData);
+        if (serialized !== seriesMinMaxDataRef.current) {
+            seriesMinMaxDataRef.current = serialized;
+            setSeriesMinMax(seriesMinMaxData);
+        }
+    }, [seriesMinMaxData, setSeriesMinMax]);
+    // Reset cursors when view changes or time scope changes significantly
+    var prevViewIdRef = useRef(null);
+    useEffect(function () {
+        // Reset cursors when switching views or when time scope changes significantly
+        if (viewSelected && viewSelected.ViewId !== prevViewIdRef.current) {
+            prevViewIdRef.current = viewSelected.ViewId;
+            resetCursors();
+        }
+    }, [viewSelected, resetCursors]);
+    // Also reset cursors when time scope changes (zoom/pan)
+    useEffect(function () {
+        resetCursors();
+    }, [timeScopeStart, timeScopeEnd, resetCursors]);
+    // Increment trigger when series data finishes loading
+    // This ensures cursors re-render AFTER chart has new data
+    var prevSeriesLoadingRef = useRef(false);
+    useEffect(function () {
+        if (prevSeriesLoadingRef.current && !seriesLoading) {
+            // Transition from loading to not loading - data just loaded
+            setDataLoadedTrigger(function (prev) { return prev + 1; });
+        }
+        prevSeriesLoadingRef.current = seriesLoading;
+    }, [seriesLoading]);
+    // Handle errors
     useEffect(function () {
         if (viewTagsError && viewTagsIsError) {
-            setError(viewTagsError.message);
+            setError(viewTagsError instanceof Error
+                ? viewTagsError.message
+                : String(viewTagsError));
         }
         if (viewsError && viewsIsError) {
-            setError(viewsError.message);
+            setError(viewsError instanceof Error ? viewsError.message : String(viewsError));
+        }
+        if (seriesError && seriesIsError) {
+            setError(seriesError instanceof Error
+                ? seriesError.message
+                : String(seriesError));
         }
-    }, [viewsError, viewsIsError, viewTagsError, viewTagsIsError]);
+    }, [
+        viewsError,
+        viewsIsError,
+        viewTagsError,
+        viewTagsIsError,
+        seriesError,
+        seriesIsError,
+    ]);
+    var isLoading = viewsLoading || viewTagsLoading;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HelmetDexteel, { title: "Trending Chart" }),
-        React__default.createElement(Grid2, { style: { padding: "20px", justifyContent: "center", display: "flex" } },
-            React__default.createElement(Trending, { title: "Trending Chart", autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh })),
+        React__default.createElement(HelmetDexteel, { title: "Trendings" }),
+        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",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    background: "rgba(255, 255, 255, 0.7)",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    zIndex: 1000,
+                } },
+                React__default.createElement(CircularProgress, { size: "3rem" }))),
+            React__default.createElement("div", { style: { flexShrink: 0 } },
+                React__default.createElement(HeaderSectionV2, { autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh, setChartOptions: setChartOptions, chartInstance: chartInstance })),
+            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" })));
 };
 
-var index = function () {
+var TrendingsV2Index = function () {
     var _a = useState(false), ihPathLoaded = _a[0], setIhPathLoaded = _a[1];
     useEffect(function () {
         var getIhPath = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -19375,15 +16714,13 @@ var index = function () {
                 }
             });
         }); };
-        getIhPath().then(function () {
-            console.log("ih path loaded");
-        });
+        getIhPath();
     }, []);
     if (!ihPathLoaded) {
         return (React__default.createElement("div", { className: "d-flex justify-content-center align-items-center" }, "Loading..."));
     }
-    return (React__default.createElement(TrendingProvider, null,
-        React__default.createElement(TrendingsPage, null)));
+    return (React__default.createElement(TrendingProviderV2, null,
+        React__default.createElement(TrendingsPageV2, null)));
 };
 
 var MESFMainRouter = function () {
@@ -19395,7 +16732,6 @@ var MESFMainRouter = function () {
             React__default.createElement(Route, { path: "/", element: React__default.createElement(Navigate, { replace: true, to: "/home" }) }),
             canShowSettings && (React__default.createElement(Route, { path: "/configuration/*", element: React__default.createElement(Configuration, null) })),
             React__default.createElement(Route, { path: "/account", element: React__default.createElement(Account, null) }),
-            React__default.createElement(Route, { path: "/trendings", element: React__default.createElement(index, null) }),
             React__default.createElement(Route, { path: "/trendings-v2", element: React__default.createElement(TrendingsV2Index, null) }),
             React__default.createElement(Route, { path: "/home", element: React__default.createElement(Home, null) })),
         React__default.createElement(CustomRoutes, null)));
@@ -19405,8 +16741,8 @@ var MESFMainContainer = function () { return (React__default.createElement("div"
     React__default.createElement(MESFMainRouter, null))); };
 
 var Navigation = function (_a) {
-    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.showTrendingsIcon, showTrendingsIcon = _c === void 0 ? true : _c, _d = _a.showTrendingsV2Icon, showTrendingsV2Icon = _d === void 0 ? true : _d, _e = _a.navbarTitle, navbarTitle = _e === void 0 ? "MESF" : _e, _f = _a.byPassHeaderRoutes, byPassHeaderRoutes = _f === void 0 ? [] : _f;
-    var _g = useSearchParams(), params = _g[0]; _g[1];
+    var _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b, _c = _a.showTrendingsV2Icon, showTrendingsV2Icon = _c === void 0 ? true : _c, _d = _a.navbarTitle, navbarTitle = _d === void 0 ? "MESF" : _d, _e = _a.byPassHeaderRoutes, byPassHeaderRoutes = _e === void 0 ? [] : _e;
+    var _f = useSearchParams(), params = _f[0]; _f[1];
     var mounted = useRef(true);
     var location = useLocation();
     useEffect(function () {
@@ -19425,7 +16761,7 @@ var Navigation = function (_a) {
         return location.pathname.startsWith(route);
     });
     return (React__default.createElement("div", { className: "wrapper" },
-        !byPassHeader && (React__default.createElement(Header$1, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle, showTrendingsIcon: showTrendingsIcon, showTrendingsV2Icon: showTrendingsV2Icon })),
+        !byPassHeader && (React__default.createElement(Header, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle, showTrendingsV2Icon: showTrendingsV2Icon })),
         React__default.createElement(MESFMainContainer, null)));
 };
 
@@ -19457,7 +16793,7 @@ var queryClient = new QueryClient({
     },
 });
 function MESFMain(_a) {
-    var authentication = _a.authentication, routes = _a.routes, navbar = _a.navbar, _b = _a.navbarTitle, navbarTitle = _b === void 0 ? "MESF" : _b, configurations = _a.configurations, _c = _a.showAreaSelector, showAreaSelector = _c === void 0 ? false : _c, _d = _a.showTrendingsIcon, showTrendingsIcon = _d === void 0 ? true : _d, _e = _a.showTrendingsV2Icon, showTrendingsV2Icon = _e === void 0 ? true : _e, _f = _a.byPassHeaderRoutes, byPassHeaderRoutes = _f === void 0 ? [] : _f, _g = _a.plantAssetId, plantAssetId = _g === void 0 ? 1 : _g, _h = _a.theme, theme = _h === void 0 ? themeMESF : _h, _j = _a.logbookSettings, logbookSettings = _j === void 0 ? {} : _j;
+    var authentication = _a.authentication, routes = _a.routes, navbar = _a.navbar, _b = _a.navbarTitle, navbarTitle = _b === void 0 ? "MESF" : _b, configurations = _a.configurations, _c = _a.showAreaSelector, showAreaSelector = _c === void 0 ? false : _c, _d = _a.showTrendingsV2Icon, showTrendingsV2Icon = _d === void 0 ? true : _d, _e = _a.byPassHeaderRoutes, byPassHeaderRoutes = _e === void 0 ? [] : _e, _f = _a.plantAssetId, plantAssetId = _f === void 0 ? 1 : _f, _g = _a.theme, theme = _g === void 0 ? themeMESF : _g, _h = _a.logbookSettings, logbookSettings = _h === void 0 ? {} : _h;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(CssBaseline, null),
         React__default.createElement(StyledEngineProvider, { injectFirst: true },
@@ -19480,7 +16816,7 @@ function MESFMain(_a) {
                                                                             React__default.createElement(BrowserRouter, { basename: base },
                                                                                 React__default.createElement(Routes, null,
                                                                                     React__default.createElement(Route, { path: "/logout", element: React__default.createElement(Logout, null) })),
-                                                                                React__default.createElement(Navigation, { showAreaSelector: showAreaSelector, showTrendingsIcon: showTrendingsIcon, navbarTitle: navbarTitle, byPassHeaderRoutes: byPassHeaderRoutes, showTrendingsV2Icon: showTrendingsV2Icon })))))))))))))))))))));
+                                                                                React__default.createElement(Navigation, { showAreaSelector: showAreaSelector, navbarTitle: navbarTitle, byPassHeaderRoutes: byPassHeaderRoutes, showTrendingsV2Icon: showTrendingsV2Icon })))))))))))))))))))));
 }
 
 var ExcelButton = function (_a) {
@@ -21561,6 +18897,7 @@ var useEntriesReport$1 = function (_a) {
     return useQuery({
         queryKey: ["entriesReport", startShiftId, endShiftId, assetId],
         queryFn: function () { return getEntriesReport$1({ startShiftId: startShiftId, endShiftId: endShiftId, assetId: assetId }); },
+        enabled: !!startShiftId && !!endShiftId && !!assetId,
     });
 };
 var routeLogbookReport = "/logbook/report";
@@ -21880,7 +19217,7 @@ var Logbook$2 = function () {
         startShiftId: shiftPeriod.StartShiftId,
         endShiftId: shiftPeriod.EndShiftId,
         assetId: assetId,
-    }), rows = _h.data, isLoading = _h.isLoading, e = _h.error, isError = _h.isError, refetch = _h.refetch;
+    }), rows = _h.data, isLoading = _h.isLoading, e = _h.error, isError = _h.isError; _h.refetch;
     var columnDefs = useTableData$2({
         showAttachments: showAttachments,
         showAsset: showAsset,
@@ -22002,16 +19339,6 @@ var Logbook$2 = function () {
         if (shiftPeriod.StartShiftId !== null || shiftPeriod.EndShiftId !== null) {
             setShow("");
             setSelectedRowData(null);
-            (function () { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, refetch()];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); })();
         }
     }, [shiftPeriod.StartShiftId, shiftPeriod.EndShiftId]);
     return (React__default.createElement(Box, { sx: {
@@ -24957,5 +22284,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES$1 as ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, ExcelIcon, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry$1 as MESFLogbookEntry, MESFLogbookReport$1 as MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, RemoveAssetDialog, SPExecutorPage, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getEntries$1 as getEntries, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry$1 as routeLogbookEntry, routeLogbookReport, useSearchAssets as searchAssets, useSearchSeries as searchSeries, useSearchTagsTree as searchTagsTree, useSearchViewTags as searchViewTags, useSearchViews as searchViews, sectionLogbookNavbar, sectionLogbookRoutesMESF, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES$1 as ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, ExcelIcon, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry$1 as MESFLogbookEntry, MESFLogbookReport$1 as MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, RemoveAssetDialog, SPExecutorPage, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getEntries$1 as getEntries, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry$1 as routeLogbookEntry, routeLogbookReport, useSearchAssets as searchAssets, sectionLogbookNavbar, sectionLogbookRoutesMESF, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map