@dexteel/mesf-core 6.1.1 → 6.1.4

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 export { LicenseManager } from 'ag-grid-enterprise';
-import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Chip, SvgIcon, Collapse, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Box, Card, CardContent, CardActions, createTheme, CircularProgress, Snackbar, FormControlLabel, Switch, InputLabel, Select, DialogContentText, Popover, MenuList, FormControl, FormHelperText, Badge, Tooltip, useTheme, Input, Divider, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, ListSubheader, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, debounce, ThemeProvider, ListItemSecondaryAction } from '@material-ui/core';
+import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Chip, SvgIcon, Collapse, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Box, Card, CardContent, CardActions, createTheme, CircularProgress, Snackbar, FormControlLabel, Switch, InputLabel, Select, DialogContentText, Popover, MenuList, FormControl, FormHelperText, Badge, Tooltip, useTheme, Input, Divider, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, ListSubheader, debounce, ThemeProvider, ListItemSecondaryAction } from '@material-ui/core';
 import { useMutation, useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useRef, useEffect, useMemo, Component, useCallback, lazy, Suspense } from 'react';
@@ -11930,117 +11930,9 @@ var TrendingProvider = function (_a) {
         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));
+    return (React__default.createElement(TrendingContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useTrendingStyles = makeStyles(function (theme) { return ({
-    datetimePicker: {
-        alignItems: "center",
-        "& .MuiInputBase-root": {
-            color: "black",
-            backgroundColor: "white",
-            borderRadius: theme.shape.borderRadius,
-            width: "90%",
-            minWidth: "90%",
-            maxWidth: "90%",
-        },
-        "& .MuiInputBase-input": {
-            fontSize: "13px !important",
-            height: "15px !important",
-            paddingRight: "3px",
-            paddingLeft: "3px",
-        },
-        "& .MuiInput-underline:before": {
-            borderBottomColor: "rgba(0, 0, 0, 0.42)",
-        },
-        padding: 0,
-    },
-    select: {
-        "& .MuiInput-root": {
-            width: "100%",
-        },
-        "& .MuiInputBase-root": {
-            color: "black",
-            backgroundColor: "white",
-            borderRadius: theme.shape.borderRadius,
-            minWidth: "100%",
-        },
-        "& .MuiInputBase-input": {
-            fontSize: "14px !important",
-            height: "15px !important",
-        },
-        "& .MuiInput-underline:before": {
-            borderBottomColor: "rgba(0, 0, 0, 0.42)",
-        },
-        padding: 0,
-    },
-    labelOptions: {
-        paddingLeft: "2rem",
-        userSelect: "none",
-        "& > label": {
-            display: "flex",
-            alignItems: "center",
-            gap: "5px",
-        },
-        '& input[type="checkbox"]': {
-            zoom: 1.5,
-        },
-    },
-    isPublicCheckbox: {
-        userSelect: "none",
-        paddingLeft: "1rem",
-        "& > label": {
-            display: "flex",
-            alignItems: "center",
-            gap: "15px",
-        },
-        '& input[type="checkbox"]': {
-            zoom: 1.5,
-        },
-    },
-    navigatorButton: {
-        "& .MuiSvgIcon-root": {
-            cursor: "pointer !important",
-            height: "24px",
-            width: "24px",
-            "& svg": {
-                // Adjust the icon size as well
-                fontSize: "1.5rem",
-            },
-        },
-        color: "black",
-    },
-    iconContainer: {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        flex: 1,
-    },
-    optionContainer: {
-        display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "center",
-        width: "100%",
-    },
-    optionLabel: {
-        flexGrow: 1,
-    },
-    inputCustom: {
-        color: "rgba(0, 0, 0, 0.87)",
-        cursor: "text",
-        fontSize: "0.7rem",
-        boxSizing: "border-box",
-        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-        fontWeight: 400,
-        lineHeight: 1.1876,
-        letterSpacing: "0.00938em",
-        "& .MuiOutlinedInput-input": {
-            padding: "10px 10px",
-        },
-    },
-}); });
-
 var getIhPath = function () {
     return localStorage.getItem("ihPath") || "[mssql2022].[IH_100020].[ih]";
 };
@@ -12055,12 +11947,7 @@ var getTagsTree = function () { return __awaiter(void 0, void 0, void 0, functio
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[GetTagsTree]", parameters)];
             case 1:
                 resp = _a.sent();
-                if (resp.ok) {
-                    return [2 /*return*/, get(resp, "data.tables[0].rows", [])];
-                }
-                else {
-                    throw new Error(resp.message || "Error fetching tags tree");
-                }
+                return [2 /*return*/, resp];
         }
     });
 }); };
@@ -12070,100 +11957,81 @@ var deleteTagFolder = function (TagFolderId) { return __awaiter(void 0, void 0,
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [
-                    { name: "TagFolderId", value: TagFolderId },
-                ];
+                parameters = [];
                 backendOffset = 1000000;
                 if (TagFolderId && TagFolderId > backendOffset) {
                     TagFolderId = TagFolderId - backendOffset;
                 }
+                parameters.push({ name: "TagFolderId", value: TagFolderId });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[DeleteTagFolder]", parameters)];
             case 1:
                 resp = _a.sent();
-                if (!resp.ok) {
-                    throw new Error(resp.message || "Error when delete tag folder");
-                }
-                return [2 /*return*/];
+                return [2 /*return*/, resp];
         }
     });
 }); };
-var upsertTagFolder = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+var upsertTagFolder = function (TagFolderId, ParentTagFolderId, TagFolderName, IsActive) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, backendOffset, resp;
-    var tagFolderId = _b.tagFolderId, parentTagFolderId = _b.parentTagFolderId, tagFolderName = _b.tagFolderName, isActive = _b.isActive;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [
-                    { name: "TagFolderId", value: tagFolderId },
-                    { name: "ParentTagFolderId", value: parentTagFolderId },
-                    { name: "TagFolderName", value: tagFolderName },
-                    { name: "IsActive", value: isActive },
-                ];
+                parameters = [];
                 backendOffset = 1000000;
-                if (tagFolderId && tagFolderId > backendOffset) {
-                    tagFolderId = tagFolderId - backendOffset;
+                if (TagFolderId && TagFolderId > backendOffset) {
+                    TagFolderId = TagFolderId - backendOffset;
                 }
-                if (parentTagFolderId && parentTagFolderId > backendOffset) {
-                    parentTagFolderId = parentTagFolderId - backendOffset;
+                if (ParentTagFolderId && ParentTagFolderId > backendOffset) {
+                    ParentTagFolderId = ParentTagFolderId - backendOffset;
                 }
+                parameters.push({ name: "TagFolderId", value: TagFolderId });
+                parameters.push({ name: "ParentTagFolderId", value: ParentTagFolderId });
+                parameters.push({ name: "TagFolderName", value: TagFolderName });
+                parameters.push({ name: "IsActive", value: IsActive });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[UpsertTagFolder]", parameters)];
             case 1:
-                resp = _c.sent();
-                if (!resp.ok) {
-                    throw new Error(resp.message || "Error when upsert tag folder");
-                }
-                return [2 /*return*/];
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
     });
 }); };
-var changeTagFolderToTag = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+var changeTagFolderToTag = function (TagId, TagFolderId) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, backendOffset, resp;
-    var tagId = _b.tagId, tagFolderId = _b.tagFolderId;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [
-                    { name: "TagId", value: tagId },
-                    { name: "TagFolderId", value: tagFolderId },
-                ];
+                parameters = [];
                 backendOffset = 1000000;
-                if (tagFolderId && tagFolderId > backendOffset) {
-                    tagFolderId = tagFolderId - backendOffset;
+                if (TagFolderId && TagFolderId > backendOffset) {
+                    TagFolderId = TagFolderId - backendOffset;
                 }
+                parameters.push({ name: "TagId", value: TagId });
+                parameters.push({ name: "TagFolderId", value: TagFolderId });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[ChangeTagFolderToTag]", parameters)];
             case 1:
-                resp = _c.sent();
-                if (!resp.ok) {
-                    throw new Error(resp.message || "Error when change tag folder tag");
-                }
-                return [2 /*return*/];
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
     });
 }); };
-var saveTagDefaults = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+var saveTagDefaults = function (TagId, Alias, Color, MinScale, MaxScale, Unit) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp;
-    var tagId = _b.tagId, alias = _b.alias, color = _b.color, minScale = _b.minScale, maxScale = _b.maxScale, unit = _b.unit;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [
-                    { name: "TagId", value: tagId },
-                    { name: "Alias", value: alias },
-                    { name: "Color", value: color },
-                    { name: "MinScale", value: minScale },
-                    { name: "MaxScale", value: maxScale },
-                    { name: "Unit", value: unit },
-                ];
+                parameters = [];
+                parameters.push({ name: "TagId", value: TagId });
+                parameters.push({ name: "Alias", value: Alias });
+                parameters.push({ name: "Color", value: Color });
+                parameters.push({ name: "MinScale", value: MinScale });
+                parameters.push({ name: "MaxScale", value: MaxScale });
+                parameters.push({ name: "Unit", value: Unit });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[SaveTagDefaults]", parameters)];
             case 1:
-                resp = _c.sent();
-                if (!resp.ok) {
-                    throw new Error(resp.message || "Error when save tag defaults");
-                }
-                return [2 /*return*/];
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
     });
 }); };
@@ -12174,40 +12042,29 @@ var getViews = function (Search) { return __awaiter(void 0, void 0, void 0, func
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [{ name: "Search", value: Search }];
+                parameters = [];
+                parameters.push({ name: "Search", value: Search });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[GetViews]", parameters)];
             case 1:
                 resp = _a.sent();
-                if (resp.ok) {
-                    return [2 /*return*/, get(resp, "data.tables[0].rows", [])];
-                }
-                else {
-                    throw new Error(resp.message || "Error fetching views");
-                }
+                return [2 /*return*/, resp];
         }
     });
 }); };
-var upsertView = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+var upsertView = function (ViewId, ViewName, isPublic) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp;
-    var viewId = _b.viewId, viewName = _b.viewName, isPublic = _b.isPublic;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [
-                    { name: "ViewId", value: viewId },
-                    { name: "ViewName", value: viewName },
-                    { name: "isPublic", value: isPublic },
-                ];
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                parameters.push({ name: "ViewName", value: ViewName });
+                parameters.push({ name: "isPublic", value: isPublic });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[UpsertView]", parameters)];
             case 1:
-                resp = _c.sent();
-                if (resp.ok) {
-                    return [2 /*return*/, get(resp, "data.returnValue", null)];
-                }
-                else {
-                    throw new Error(resp.message || "Error when delete view");
-                }
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
     });
 }); };
@@ -12217,14 +12074,12 @@ var deleteView = function (ViewId) { return __awaiter(void 0, void 0, void 0, fu
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [{ name: "ViewId", value: ViewId }];
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[DeleteView]", parameters)];
             case 1:
                 resp = _a.sent();
-                if (!resp.ok) {
-                    throw new Error(resp.message || "Error when delete view");
-                }
-                return [2 /*return*/];
+                return [2 /*return*/, resp];
         }
     });
 }); };
@@ -12235,43 +12090,34 @@ var getViewTags = function (ViewId) { return __awaiter(void 0, void 0, void 0, f
         switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [{ name: "ViewId", value: ViewId }];
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[GetViewTags]", parameters)];
             case 1:
                 resp = _a.sent();
-                if (resp.ok) {
-                    return [2 /*return*/, get(resp, "data.tables[0].rows", [])];
-                }
-                else {
-                    throw new Error(resp.message || "Error fetching view tags");
-                }
+                return [2 /*return*/, resp];
         }
     });
 }); };
-var upsertViewTag = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+var upsertViewTag = function (ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale, Unit) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp;
-    var viewId = _b.viewId, tagId = _b.tagId, color = _b.color, minScale = _b.minScale, maxScale = _b.maxScale, isVisible = _b.isVisible, isAutoScale = _b.isAutoScale, unit = _b.unit;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0:
                 apiService = new MESApiService();
-                parameters = [
-                    { name: "ViewId", value: viewId },
-                    { name: "TagId", value: tagId },
-                    { name: "Color", value: color },
-                    { name: "MinScale", value: minScale },
-                    { name: "MaxScale", value: maxScale },
-                    { name: "IsVisible", value: isVisible },
-                    { name: "IsAutoScale", value: isAutoScale },
-                    { name: "Unit", value: unit },
-                ];
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                parameters.push({ name: "TagId", value: TagId });
+                parameters.push({ name: "Color", value: Color });
+                parameters.push({ name: "MinScale", value: MinScale });
+                parameters.push({ name: "MaxScale", value: MaxScale });
+                parameters.push({ name: "IsVisible", value: IsVisible });
+                parameters.push({ name: "IsAutoScale", value: IsAutoScale });
+                parameters.push({ name: "Unit", value: Unit });
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[UpsertViewTag]", parameters)];
             case 1:
-                resp = _c.sent();
-                if (!resp.ok) {
-                    throw new Error(resp.message || "Error when upsert view tag");
-                }
-                return [2 /*return*/];
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
     });
 }); };
@@ -12286,36 +12132,138 @@ var deleteAllViewTagsFromView = function (ViewId) { return __awaiter(void 0, voi
                 return [4 /*yield*/, apiService.callV2(getIhPath() + ".[DeleteAllViewTagsFromView]", parameters)];
             case 1:
                 resp = _a.sent();
-                if (!resp.ok) {
-                    throw new Error(resp.message || "Error when delete all view tags");
-                }
-                return [2 /*return*/];
+                return [2 /*return*/, resp];
         }
     });
 }); };
 
+var useTrendingStyles = makeStyles(function (theme) { return ({
+    datetimePicker: {
+        alignItems: "center",
+        "& .MuiInputBase-root": {
+            color: "black",
+            backgroundColor: "white",
+            borderRadius: theme.shape.borderRadius,
+            width: "90%",
+            minWidth: "90%",
+            maxWidth: "90%",
+        },
+        "& .MuiInputBase-input": {
+            fontSize: "13px !important",
+            height: "15px !important",
+            paddingRight: "3px",
+            paddingLeft: "3px",
+        },
+        "& .MuiInput-underline:before": {
+            borderBottomColor: "rgba(0, 0, 0, 0.42)",
+        },
+        padding: 0,
+    },
+    select: {
+        "& .MuiInput-root": {
+            width: "100%",
+        },
+        "& .MuiInputBase-root": {
+            color: "black",
+            backgroundColor: "white",
+            borderRadius: theme.shape.borderRadius,
+            minWidth: "100%",
+        },
+        "& .MuiInputBase-input": {
+            fontSize: "14px !important",
+            height: "15px !important",
+        },
+        "& .MuiInput-underline:before": {
+            borderBottomColor: "rgba(0, 0, 0, 0.42)",
+        },
+        padding: 0,
+    },
+    labelOptions: {
+        paddingLeft: "2rem",
+        userSelect: "none",
+        "& > label": {
+            display: "flex",
+            alignItems: "center",
+            gap: "5px",
+        },
+        '& input[type="checkbox"]': {
+            zoom: 1.5,
+        },
+    },
+    isPublicCheckbox: {
+        userSelect: "none",
+        paddingLeft: "1rem",
+        "& > label": {
+            display: "flex",
+            alignItems: "center",
+            gap: "15px",
+        },
+        '& input[type="checkbox"]': {
+            zoom: 1.5,
+        },
+    },
+    navigatorButton: {
+        "& .MuiSvgIcon-root": {
+            cursor: "pointer !important",
+            height: "24px",
+            width: "24px",
+            "& svg": {
+                // Adjust the icon size as well
+                fontSize: "1.5rem",
+            },
+        },
+        color: "black",
+    },
+    iconContainer: {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        flex: 1,
+    },
+    optionContainer: {
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        width: "100%",
+    },
+    optionLabel: {
+        flexGrow: 1,
+    },
+    inputCustom: {
+        color: "rgba(0, 0, 0, 0.87)",
+        cursor: "text",
+        fontSize: "0.7rem",
+        boxSizing: "border-box",
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: 400,
+        lineHeight: 1.1876,
+        letterSpacing: "0.00938em",
+        "& .MuiOutlinedInput-input": {
+            padding: "10px 10px",
+        },
+    },
+}); });
+
 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 () {
+        var resp;
         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)];
+                    return [4 /*yield*/, deleteView(view.ViewId)];
                 case 1:
-                    _a.sent();
+                    resp = _a.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    else {
+                        handleClose(true);
+                    }
                     _a.label = 2;
                 case 2:
                     setIsLoading(false);
@@ -12353,28 +12301,22 @@ var EditViewModal = function (_a) {
     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 () {
+        var resp;
         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,
-                        })];
+                    return [4 /*yield*/, upsertView(view.ViewId, newName, isPublic)];
                 case 1:
-                    _a.sent();
+                    resp = _a.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    else {
+                        handleClose(true);
+                    }
                     _a.label = 2;
                 case 2:
                     setIsLoading(false);
@@ -12418,35 +12360,45 @@ var EditViewModal = function (_a) {
 };
 
 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 open = _a.open, handleClose = _a.handleClose, getTagsFromAPI = _a.getTagsFromAPI;
+    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTagsAndRefetch = _d.setViewTagsAndRefetch, setViewSelected = _d.setViewSelected;
     var classes = useTrendingStyles();
-    var _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 = searchViewTags({ 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 _e = useState(null), viewForDelete = _e[0], setViewForDelete = _e[1];
+    var _f = useState(null), viewForEdit = _f[0], setViewForEdit = _f[1];
+    var _g = useState(false), deleteViewModalOpen = _g[0], setDeleteViewModalOpen = _g[1];
+    var _h = useState(false), editViewModalOpen = _h[0], setEditViewModalOpen = _h[1];
+    var _j = useState(false), allViewsChecked = _j[0], setAllViewsChecked = _j[1];
+    var _k = useState(false), isLoading = _k[0], setIsLoading = _k[1];
+    var _l = useState(""), error = _l[0], setError = _l[1];
     var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var viewTagsResp;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!optionSelected) return [3 /*break*/, 2];
-                    setViewSelected(optionSelected);
-                    return [4 /*yield*/, queryClient.invalidateQueries({
-                            queryKey: ["viewTags", viewSelected.ViewId],
-                        })];
+                    if (!viewSelected) return [3 /*break*/, 2];
+                    setIsLoading(true);
+                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
                 case 1:
-                    _a.sent();
-                    handleClose(true);
-                    return [2 /*return*/];
-                case 2:
+                    viewTagsResp = _a.sent();
+                    if (viewTagsResp.ok) {
+                        setViewTagsAndRefetch(viewTagsResp.data.tables[0].rows.reduce(function (carr, curr, idx) {
+                            if (isNil(curr.Color)) {
+                                curr.Color = getRandomColor();
+                            }
+                            carr[curr.TagId] = {
+                                viewTag: curr,
+                                order: idx,
+                            };
+                            return carr;
+                        }, {}));
+                    }
+                    else {
+                        setError(viewTagsResp.message);
+                    }
+                    setIsLoading(false);
                     handleClose(false);
-                    return [2 /*return*/];
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
             }
         });
     }); };
@@ -12476,20 +12428,6 @@ var LoadViewModal = function (_a) {
     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,
@@ -12502,7 +12440,7 @@ var LoadViewModal = function (_a) {
                     React__default.createElement(Grid, { item: true, md: 12 },
                         React__default.createElement(Autocomplete, { size: "small", id: "list-of-views", noOptionsText: allViewsChecked
                                 ? "No views detected, please create a new view"
-                                : "No private views detected, please create a new view .", options: allViewsChecked ? views : publicViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setOptionSelected(val); }, defaultValue: optionSelected || viewSelected, style: { width: "100%" }, renderOption: function (option) { return (React__default.createElement("div", { className: classes.optionContainer },
+                                : "No private views detected, please create a new view .", options: allViewsChecked ? views : publicViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, defaultValue: viewSelected, style: { width: "100%" }, renderOption: function (option) { return (React__default.createElement("div", { className: classes.optionContainer },
                                 React__default.createElement("div", { className: classes.optionLabel }, option.ViewName),
                                 React__default.createElement("div", { className: classes.iconContainer },
                                     option.IsPublic ? ("") : (React__default.createElement(React__default.Fragment, null,
@@ -12528,35 +12466,17 @@ var LoadViewModal = function (_a) {
             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*/];
-                    }
-                });
-            }); } }),
+                    views.length ? (React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: "contained", color: "primary", isLoading: isLoading, 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) {
+                setDeleteViewModalOpen(false);
+                if (shouldUpdate)
+                    getTagsFromAPI().then(function () { });
+            } }),
+        React__default.createElement(EditViewModal, { open: editViewModalOpen, view: viewForEdit, handleClose: function (shouldUpdate) {
+                setEditViewModalOpen(false);
+                if (shouldUpdate)
+                    getTagsFromAPI().then(function () { });
+            } }),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -12569,63 +12489,37 @@ var SaveAsViewModal = function (_a) {
     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 () {
+        var resp, ViewId_1, shouldClose_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setIsLoading(true);
-                    return [4 /*yield*/, updateView.mutate({
-                            viewId: null,
-                            viewName: newView,
-                            isPublic: isPublic,
-                        })];
+                    return [4 /*yield*/, upsertView(null, newView, isPublic)];
                 case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 3];
+                    ViewId_1 = resp.data.returnValue;
+                    shouldClose_1 = true;
+                    return [4 /*yield*/, Promise.allSettled(Object.values(viewTags).map(function (_a) {
+                            var _b = _a.viewTag, TagId = _b.TagId, Color = _b.Color, MinScale = _b.MinScale, MaxScale = _b.MaxScale, IsAutoScale = _b.IsAutoScale, IsVisible = _b.IsVisible, Unit = _b.Unit;
+                            upsertViewTag(ViewId_1, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale, Unit).then(function (r) {
+                                if (!r.ok) {
+                                    setError(function (prevErr) { return "".concat(prevErr, ". ").concat(r.message); });
+                                    if (shouldClose_1) {
+                                        shouldClose_1 = false;
+                                    }
+                                }
+                            });
+                        }))];
+                case 2:
                     _a.sent();
+                    handleClose(shouldClose_1);
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(resp.message);
+                    _a.label = 4;
+                case 4:
                     setIsLoading(false);
                     return [2 /*return*/];
             }
@@ -12791,14 +12685,8 @@ var NewFolderModal = function (_a) {
     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);
-        },
-    });
     var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var parentId, parentTagId;
+        var parentId, parentTagId, resp;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -12810,14 +12698,12 @@ var NewFolderModal = function (_a) {
                         : parentId;
                     setIsLoading(true);
                     if (!name) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updateTagFolder.mutate({
-                            tagFolderId: null,
-                            parentTagFolderId: parentTagId,
-                            tagFolderName: name,
-                            isActive: true,
-                        })];
+                    return [4 /*yield*/, upsertTagFolder(null, parentTagId, name, true)];
                 case 1:
-                    _b.sent();
+                    resp = _b.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
                     _b.label = 2;
                 case 2:
                     handleClose(true);
@@ -12844,44 +12730,36 @@ 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;
+        var parentId, name_1, id, resp;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     e.preventDefault();
-                    if (!tagNodeSelectedInTree) return [3 /*break*/, 4];
+                    if (!tagNodeSelectedInTree) return [3 /*break*/, 5];
                     parentId = Number(tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.parent) || null;
                     name_1 = tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.text;
                     id = Number(tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.id);
+                    resp = void 0;
                     setIsLoading(true);
                     if (!parentId) return [3 /*break*/, 2];
-                    return [4 /*yield*/, removeFolder.mutate(id)];
+                    return [4 /*yield*/, deleteTagFolder(id)];
                 case 1:
-                    _a.sent();
+                    resp = _a.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
                     return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, updateTagFolder.mutate({
-                        tagFolderId: id,
-                        parentTagFolderId: parentId,
-                        tagFolderName: name_1,
-                        isActive: false,
-                    })];
+                case 2: return [4 /*yield*/, upsertTagFolder(id, parentId, name_1, false)];
                 case 3:
-                    _a.sent();
+                    resp = _a.sent();
                     _a.label = 4;
                 case 4:
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    _a.label = 5;
+                case 5:
                     handleClose(true);
                     setIsLoading(false);
                     return [2 /*return*/];
@@ -12997,7 +12875,7 @@ var TagFolderCustomNode = function (_a) {
 var TagSelectionModal = function (_a) {
     var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
     var classes = useTagsTreeModalStyles();
-    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState(""), error = _c[0], setError = _c[1];
     var _d = useState([]), tagsTreeData = _d[0], setTagsTreeData = _d[1];
     var _e = useState(null), tagNodeSelectedInTree = _e[0], setTagNodeSelectedInTree = _e[1];
@@ -13006,6 +12884,7 @@ var TagSelectionModal = function (_a) {
     var backendOffset = 1000000;
     var _h = useState({}), openTagFolders = _h[0], setOpenTagFolders = _h[1];
     var _j = useState([]), selectedNodes = _j[0], setSelectedNodes = _j[1];
+    useTrendingContext().state.viewTags;
     var handleContextMenu = function (data, e) {
         e.preventDefault();
         var top = e.clientY;
@@ -13018,24 +12897,35 @@ var TagSelectionModal = function (_a) {
             setTagNodeSelectedInTree(selectedNode);
         }
     };
-    var _k = searchTagsTree(), 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 getTagsTreeData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var tagsTree, rows, tree;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isOpen) return [3 /*break*/, 2];
+                    setIsLoading(true);
+                    return [4 /*yield*/, getTagsTree()];
+                case 1:
+                    tagsTree = _a.sent();
+                    if (tagsTree.ok) {
+                        rows = tagsTree.data.tables[0].rows;
+                        tree = buildTagsTreeV2(rows);
+                        setTagsTreeData(tree);
+                    }
+                    setIsLoading(false);
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
     var expanded = useMemo(function () {
         return Object.keys(openTagFolders).map(function (el) { return Number.parseInt(el); });
     }, [openTagFolders]);
+    useEffect(function () {
+        getTagsTreeData();
+    }, [isOpen]);
     var handleDrop = function (tree, options) { return __awaiter(void 0, void 0, void 0, function () {
-        var tagId, newFolderId;
+        var tagId, newFolderId, newTree, newTree;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -13049,18 +12939,19 @@ var TagSelectionModal = function (_a) {
                         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,
-                        })];
+                    return [4 /*yield*/, upsertTagFolder(tagId, newFolderId, options.dragSource.text, true)];
                 case 1:
-                    _c.sent();
+                    newTree = _c.sent();
+                    if (!newTree.ok) {
+                        setError(newTree.message);
+                    }
                     return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, changeTagFolderTag.mutate({ tagId: tagId, tagFolderId: newFolderId })];
+                case 2: return [4 /*yield*/, changeTagFolderToTag(tagId, newFolderId)];
                 case 3:
-                    _c.sent();
+                    newTree = _c.sent();
+                    if (!newTree.ok) {
+                        setError(newTree.message);
+                    }
                     _c.label = 4;
                 case 4:
                     setTagsTreeData(tree);
@@ -13081,29 +12972,13 @@ var TagSelectionModal = function (_a) {
             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(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
+            React__default.createElement("div", { style: { overflowY: "auto", maxHeight: "700px" } }, isLoading ? (React__default.createElement(Grid, { 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(Tree, { classes: {
                         root: classes.assetRoot,
@@ -13120,7 +12995,7 @@ var TagSelectionModal = function (_a) {
                     }, 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(ContextMenu, { anchorPoint: anchorPoint, isOpen: showContextMenu, setShowContextMenu: setShowContextMenu, tagNodeSelectedInTree: tagNodeSelectedInTree, getTagsTreeData: getTagsTreeData }),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -13331,122 +13206,67 @@ var formatTimeDiffWithMs = function (start, end) {
 };
 
 var TableComponent = function (_a) {
-    var chartData = _a.chartData, cursorData = _a.cursorData; _a.viewTagForDelete; var setViewTagForDelete = _a.setViewTagForDelete, selectedRowTagId = _a.selectedRowTagId, setSelectedRowTagId = _a.setSelectedRowTagId;
+    var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI, viewTagForDelete = _a.viewTagForDelete, setViewTagForDelete = _a.setViewTagForDelete, selectedRowTagId = _a.selectedRowTagId, setSelectedRowTagId = _a.setSelectedRowTagId, handleRightClick = _a.handleRightClick; _a.setContextMenuPosition; var contextMenuPosition = _a.contextMenuPosition, openContextMenu = _a.openContextMenu, setOpenContextMenu = _a.setOpenContextMenu;
     var classes = useTagsTableStyles();
-    var 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 _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setViewTagsAndRefetch = _d.setViewTagsAndRefetch;
+    var _e = useState({}); _e[0]; _e[1];
     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 newTags = structuredClone(viewTags);
+        newTags[tagId]["viewTag"][property] = value;
+        newTags[tagId]["viewTag"]["IsAutoScale"] = false;
+        setViewTags(newTags);
     };
     var handleChangeScale = function (value, scale, tagId) {
         handleChange(tagId, value, scale);
     };
     var handleChangeAlias = function (tagId, newName) {
-        var _a;
-        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { Alias: newName }) }), _a)));
+        var newTags = structuredClone(viewTags);
+        newTags[tagId]["viewTag"]["Alias"] = newName;
+        setViewTags(newTags);
     };
     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 newTags = structuredClone(viewTags);
+        newTags[tagId]["viewTag"]["IsVisible"] = value;
+        setViewTags(newTags);
     };
     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 newTags = structuredClone(viewTags);
+        newTags[tagId]["viewTag"]["Unit"] = newUnit;
+        setViewTags(newTags);
     };
     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 newTags = structuredClone(viewTags);
+        newTags[tagId]["viewTag"]["IsAutoScale"] = !checked;
+        setViewTags(newTags);
     };
     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 newTags = structuredClone(viewTags);
+        newTags[tagId]["viewTag"]["Color"] = value;
+        setViewTags(newTags);
     };
     var handleDeleteTag = function (tagId) {
-        var _a = viewTags, _b = tagId; _a[_b]; var newTags = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+        var newTags = structuredClone(viewTags);
+        delete newTags[tagId];
         setViewTagsAndRefetch(newTags);
     };
     var handleAddTag = function (newTag) {
-        var _a;
-        setViewTagsAndRefetch(__assign(__assign({}, viewTags), (_a = {}, _a[newTag.TagId] = {
+        var newTags = structuredClone(viewTags);
+        newTags[newTag.TagId] = {
             viewTag: __assign(__assign({}, newTag), { IsVisible: true, TagType: newTag.TagTypeCode, Color: newTag.Color || getRandomColor(), IsAutoScale: newTag.MinScale || newTag.MaxScale ? false : true }),
             order: Object.keys(viewTags).length,
-        }, _a)));
+        };
+        setViewTagsAndRefetch(newTags);
     };
     var handleAbleScales = function (tagId, checked) {
         if (checked) {
@@ -13454,62 +13274,69 @@ var TableComponent = function (_a) {
         }
     };
     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);
-                },
+    var ContextMenu = function (_a) {
+        var x = _a.x, y = _a.y, options = _a.options;
+        var handleContextMenuClick = function (e) {
+            e.stopPropagation(); // Prevent click inside the menu from closing it
+        };
+        return (React__default.createElement("div", { className: "context-menu", style: { top: y, left: x }, onClick: handleContextMenuClick },
+            React__default.createElement("ul", null, options.map(function (option) { return (React__default.createElement("li", { key: option.id, onClick: option.onClick }, option.label)); }))));
+    };
+    var contextMenuOptions = [];
+    if (viewTagForDelete) {
+        contextMenuOptions.push({
+            id: "delete",
+            label: "Remove Tag",
+            onClick: function () {
+                handleDelete();
+                setOpenContextMenu(false);
             },
-            {
-                key: "saveDefault",
-                name: "Save Default To Tag",
-                onClick: function () {
-                    handleSaveDefaultToTag(data.TagId);
-                },
+        });
+    }
+    contextMenuOptions.push.apply(contextMenuOptions, [
+        {
+            id: "add",
+            label: "Tags Tree",
+            onClick: function () {
+                setTagsTreeModalOpen(true);
+                setOpenContextMenu(false);
             },
-            {
-                key: "saveView",
-                name: "Save View",
-                onClick: function () {
-                    handleSaveView();
-                },
+        },
+        {
+            id: "saveDefault",
+            label: "Save Default To Tag",
+            onClick: function () {
+                handleSaveDefaultToTag();
+                setOpenContextMenu(false);
             },
-            {
-                key: "saveViewAs",
-                name: "Save View as",
-                onClick: function () {
-                    setSaveAsViewModalOpen(true);
-                },
+        },
+        {
+            id: "saveView",
+            label: "Save View",
+            onClick: function () {
+                handleSaveView();
+                setOpenContextMenu(false);
             },
-            {
-                key: "loadView",
-                name: "Load View",
-                onClick: function () {
-                    setLoadViewOpen(true);
-                },
+        },
+        {
+            id: "saveViewAs",
+            label: "Save View as",
+            onClick: function () {
+                setSaveAsViewModalOpen(true);
+                setOpenContextMenu(false);
             },
-        ]);
-        return options;
-    };
+        },
+        {
+            id: "loadView",
+            label: "Load View",
+            onClick: function () {
+                setLoadViewOpen(true);
+                setOpenContextMenu(false);
+            },
+        },
+    ]);
     var handleTagSelect = function (selectedTag) {
-        var alreadySelected = viewTags[selectedTag.Tagkey];
+        var alreadySelected = viewTags[selectedTag.TagId];
         if (!alreadySelected) {
             handleAddTag(selectedTag);
         }
@@ -13517,7 +13344,20 @@ var TableComponent = function (_a) {
             setError("".concat(selectedTag.TagName, " is already selected"));
         }
     };
+    var handleDelete = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (!isNil(viewTagForDelete)) {
+                if (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId) {
+                    handleDeleteTag(viewTagForDelete.TagId);
+                }
+                setSelectedRowTagId(null); // Reset the selected row index
+                setViewTagForDelete(null);
+            }
+            return [2 /*return*/];
+        });
+    }); };
     var handleSaveView = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, deleteResp, results;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -13526,19 +13366,46 @@ var TableComponent = function (_a) {
                     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,
-                        })];
+                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 6];
+                    return [4 /*yield*/, upsertView(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, viewSelected.ViewName, viewSelected.IsPublic)];
                 case 2:
-                    _a.sent();
-                    _a.label = 3;
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, deleteAllViewTagsFromView(viewSelected.ViewId)];
                 case 3:
+                    deleteResp = _a.sent();
+                    if (!deleteResp.ok) {
+                        setError(deleteResp.message);
+                    }
+                    return [4 /*yield*/, Promise.allSettled(Object.values(viewTags)
+                            .sort(function (a, b) { return b.order - a.order; })
+                            .map(function (_a) {
+                            var _b = _a.viewTag, TagId = _b.TagId, Color = _b.Color, MinScale = _b.MinScale, MaxScale = _b.MaxScale, IsAutoScale = _b.IsAutoScale, IsVisible = _b.IsVisible, Unit = _b.Unit;
+                            upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale, Unit).then(function (r) {
+                                if (!r.ok) {
+                                    setError(r.message);
+                                }
+                            });
+                        }))];
+                case 4:
+                    results = _a.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 [3 /*break*/, 6];
+                case 5:
+                    setError(resp.message);
+                    _a.label = 6;
+                case 6:
                     setIsLoading(false);
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
+                    _a.label = 7;
+                case 7: return [2 /*return*/];
             }
         });
     }); };
@@ -13568,47 +13435,31 @@ var TableComponent = function (_a) {
             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;
+    var handleSaveDefaultToTag = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, TagId, Alias, Color, MinScale, MaxScale, Unit, IsVisible, IsAutoScale, saveTagDefaultsResp, upsertViewTagResp;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
                     if (!(viewSelected && 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,
-                        })];
+                    return [4 /*yield*/, saveTagDefaults(TagId, Alias, Color, MinScale, MaxScale, 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,
-                        })];
+                    saveTagDefaultsResp = _b.sent();
+                    return [4 /*yield*/, upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale, Unit)];
                 case 2:
-                    _b.sent();
+                    upsertViewTagResp = _b.sent();
+                    if (!saveTagDefaultsResp.ok) {
+                        setError(saveTagDefaultsResp.message);
+                    }
+                    if (!upsertViewTagResp.ok) {
+                        setError(upsertViewTagResp.message);
+                    }
                     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(Grid, { container: true, spacing: 1, alignContent: "flex-start", style: {
                 height: "100%",
@@ -13622,21 +13473,20 @@ var TableComponent = function (_a) {
                     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", className: "".concat(classes.topTitles, " ").concat(classes.viewSelected) }, viewSelected ? (React__default.createElement(Button, { variant: "text", style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setLoadViewOpen(true); }, startIcon: viewSelected.IsPublic ? (React__default.createElement(React__default.Fragment, null)) : (React__default.createElement(LockIcon, { fontSize: "small" })) }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) || "")) : (React__default.createElement(Button, { variant: "text", style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setSaveAsViewModalOpen(true); } },
+                React__default.createElement("div", { style: { overflowX: "auto", width: "100%" } },
+                    React__default.createElement("table", { style: {
+                            width: "100%",
+                            tableLayout: "fixed",
+                            textAlign: "center",
+                        } },
+                        React__default.createElement("thead", null,
+                            React__default.createElement("tr", null,
+                                React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.viewSelected) }, viewSelected ? (React__default.createElement(Button, { variant: "text", style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setLoadViewOpen(true); }, startIcon: viewSelected.IsPublic ? (React__default.createElement(React__default.Fragment, null)) : (React__default.createElement(LockIcon, { fontSize: "small" })) }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) || "")) : (React__default.createElement(Button, { variant: "text", style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setSaveAsViewModalOpen(true); } },
                                     React__default.createElement("i", null,
                                         React__default.createElement(SaveIcon, null),
                                         "(Save view as)")))),
-                                React__default.createElement(TableCell, { align: "center", colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
-                                React__default.createElement(TableCell, { align: "center", className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData
+                                React__default.createElement("th", { colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
+                                React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData
                                     ? (function () {
                                         var dateX1 = new Date(cursorData.x1);
                                         var dateX2 = new Date(cursorData.x2);
@@ -13655,7 +13505,7 @@ var TableComponent = function (_a) {
                                             dateText));
                                     })()
                                     : null),
-                                React__default.createElement(TableCell, { align: "center", className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData
+                                React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData
                                     ? (function () {
                                         var dateX1 = new Date(cursorData.x1);
                                         var dateX2 = new Date(cursorData.x2);
@@ -13674,20 +13524,24 @@ var TableComponent = function (_a) {
                                             dateText));
                                     })()
                                     : null),
-                                React__default.createElement(TableCell, { align: "center", colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData
+                                React__default.createElement("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, 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, { className: classes.bottomTitlesRow },
-                                React__default.createElement(TableCell, { align: "center", className: classes.visible }, "Visible"),
-                                React__default.createElement(TableCell, { align: "center", className: classes.aliasCol }, "Alias / Tagname"),
-                                React__default.createElement(TableCell, { align: "center", className: classes.color }, "Color"),
-                                React__default.createElement(TableCell, { align: "center", className: classes.inputCol }, "Min Scale"),
-                                React__default.createElement(TableCell, { align: "center", className: classes.inputCol }, "Max Scale"),
-                                React__default.createElement(TableCell, { align: "center", className: classes.autoScale }, "AutoScale"),
-                                React__default.createElement(TableCell, { align: "center", className: classes.unit }, "Unit"),
-                                React__default.createElement(TableCell, { align: "center" },
+                    React__default.createElement("table", { style: {
+                            width: "100%",
+                            tableLayout: "fixed",
+                            textAlign: "center",
+                        } },
+                        React__default.createElement("thead", null,
+                            React__default.createElement("tr", { className: classes.bottomTitlesRow },
+                                React__default.createElement("th", { className: classes.visible }, "Visible"),
+                                React__default.createElement("th", { className: classes.aliasCol }, "Alias / Tagname"),
+                                React__default.createElement("th", { className: classes.color }, "Color"),
+                                React__default.createElement("th", { className: classes.inputCol }, "Min Scale"),
+                                React__default.createElement("th", { className: classes.inputCol }, "Max Scale"),
+                                React__default.createElement("th", { className: classes.autoScale }, "AutoScale"),
+                                React__default.createElement("th", { className: classes.unit }, "Unit"),
+                                React__default.createElement("th", null,
                                     " ",
                                     cursorData
                                         ? (function () {
@@ -13706,7 +13560,7 @@ var TableComponent = function (_a) {
                                         })()
                                         : null,
                                     " "),
-                                React__default.createElement(TableCell, { align: "center" },
+                                React__default.createElement("th", null,
                                     " ",
                                     cursorData
                                         ? (function () {
@@ -13725,29 +13579,27 @@ var TableComponent = function (_a) {
                                         })()
                                         : 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("th", null, "Y2-Y1"),
+                                React__default.createElement("th", null, "Min"),
+                                React__default.createElement("th", null, "Max")))))),
             React__default.createElement(Grid, { item: true, 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) {
+                React__default.createElement("div", { style: { width: "100%", height: "100%", maxHeight: "100%" } },
+                    React__default.createElement("table", { cellPadding: "4px", style: {
+                            width: "100%",
+                            tableLayout: "fixed",
+                            textAlign: "center",
+                        } },
+                        React__default.createElement("tbody", null, 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");
-                                }, className: classes.rowHover },
-                                React__default.createElement(TableCell, { align: "center", className: "".concat(classes.visible, " ").concat(classes.checkbox) },
+                            return (React__default.createElement("tr", { key: tag.TagName, 
+                                // onClick={() => handleRowClick(index)}
+                                onContextMenu: function (e) { return handleRightClick(e, tag.TagId); }, className: classes.rowHover },
+                                React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
                                     React__default.createElement("input", { type: "checkbox", checked: tag.IsVisible, onChange: function (e) {
                                             return handleVisibilityChange(tag.TagId, e.target.checked);
                                         } })),
-                                React__default.createElement(TableCell, { className: classes.aliasCol },
+                                React__default.createElement("td", { className: classes.aliasCol },
                                     React__default.createElement(Tooltip, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
                                         React__default.createElement("div", { style: { display: "flex", alignItems: "center" } },
                                             tag.TagType && (React__default.createElement("div", { className: classes.dataType, style: {
@@ -13757,9 +13609,9 @@ var TableComponent = function (_a) {
                                                     var newAlias = e.target.value;
                                                     handleChangeAlias(tag.TagId, newAlias);
                                                 } })))),
-                                React__default.createElement(TableCell, { align: "center", className: classes.color },
+                                React__default.createElement("td", { className: classes.color },
                                     React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.Color, elementId: tag.TagId })),
-                                React__default.createElement(TableCell, { className: classes.inputCol },
+                                React__default.createElement("td", { className: classes.inputCol },
                                     React__default.createElement("input", { type: "number", className: classes.numberInput, style: __assign({ width: "100%" }, (tag.IsAutoScale
                                             ? {
                                                 backgroundColor: "rgba(239, 239, 239, 0.3)",
@@ -13771,7 +13623,7 @@ var TableComponent = function (_a) {
                                         }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                             return handleChangeScale(e.target.value, "MinScale", tag.TagId);
                                         } })),
-                                React__default.createElement(TableCell, { className: classes.inputCol },
+                                React__default.createElement("td", { className: classes.inputCol },
                                     React__default.createElement("input", { type: "number", className: classes.numberInput, style: __assign({ width: "100%", WebkitAppearance: "none" }, (tag.IsAutoScale
                                             ? {
                                                 backgroundColor: "rgba(239, 239, 239, 0.3)",
@@ -13783,11 +13635,11 @@ var TableComponent = function (_a) {
                                         }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                             handleChangeScale(e.target.value, "MaxScale", tag.TagId);
                                         } })),
-                                React__default.createElement(TableCell, { align: "center", className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
+                                React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
                                     React__default.createElement("input", { type: "checkbox", checked: !!tag.IsAutoScale, onChange: function (e) {
                                             return handleAutoScaleChange(tag.TagId, tag.IsAutoScale);
                                         } })),
-                                React__default.createElement(TableCell, { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
+                                React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
                                     React__default.createElement("input", { type: "text", style: {
                                             width: "100%",
                                         }, onClick: function () {
@@ -13796,49 +13648,39 @@ var TableComponent = function (_a) {
                                             var value = e.target.value;
                                             handleUnitChange(tag.TagId, value);
                                         }, value: tag.Unit === "-" ? "" : tag.Unit, onFocus: function (e) { return e.target.select(); } })),
-                                React__default.createElement(TableCell, { align: "center" }, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y1, 3) || 0),
-                                React__default.createElement(TableCell, { align: "center", className: classes.doubleInput }, 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" },
+                                React__default.createElement("td", null, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y1, 3) || 0),
+                                React__default.createElement("td", { className: classes.doubleInput }, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2, 3) || 0),
+                                React__default.createElement("td", null, round((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.y2y1, 3) || 0),
+                                React__default.createElement("td", null,
                                     !isNaN$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" },
+                                React__default.createElement("td", null,
                                     !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("div", { style: { padding: "1rem" } },
-                                    React__default.createElement("div", { style: { padding: "1rem" } },
-                                        "No tag view detected.",
-                                        " "),
-                                    React__default.createElement("div", { style: { padding: "1rem" } },
-                                        React__default.createElement(Button, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: "contained", color: "primary" },
-                                            " ",
-                                            "Add tag")),
-                                    React__default.createElement("div", null,
-                                        React__default.createElement(Button, { onClick: function () { return setLoadViewOpen(true); }, variant: "outlined", color: "primary" },
-                                            " ",
-                                            "Load view")))))))))),
+                        })) : (React__default.createElement("div", { style: { padding: "1rem" } },
+                            React__default.createElement("div", { style: { padding: "1rem" } },
+                                "No tag view detected.",
+                                " "),
+                            React__default.createElement("div", { style: { padding: "1rem" } },
+                                React__default.createElement(Button, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: "contained", color: "primary" },
+                                    " ",
+                                    "Add tag")),
+                            React__default.createElement("div", null,
+                                React__default.createElement(Button, { onClick: function () { return setLoadViewOpen(true); }, variant: "outlined", color: "primary" },
+                                    " ",
+                                    "Load view")))))))),
+            openContextMenu && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
             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) {
+            React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function (shouldUpdate) {
+                    setSaveAsViewModalOpen(false);
+                    if (shouldUpdate)
+                        getTagsFromAPI(true).then(function () { });
+                } }),
+            React__default.createElement(LoadViewModal, { open: loadViewOpen, getTagsFromAPI: getTagsFromAPI, handleClose: function (shouldUpdate) {
                     setLoadViewOpen(false);
                 } })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
@@ -13864,7 +13706,7 @@ var formatDateTimeToString = function (date) {
 var useChartOptions = function () {
     var _a = useTrendingContext(); _a.state; var actions = _a.actions;
     var debounceTimerRef = useRef(null);
-    var handleZoom = useCallback(function (_a) {
+    var handleZoom = function (_a) {
         var chart = _a.chart;
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
@@ -13878,8 +13720,8 @@ var useChartOptions = function () {
                 end: newEnd,
             });
         }, 1000);
-    }, [actions]);
-    var handlePan = useCallback(function (_a) {
+    };
+    var handlePan = function (_a) {
         var chart = _a.chart;
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
@@ -13894,8 +13736,8 @@ var useChartOptions = function () {
                 graphPan: true,
             });
         }, 1000);
-    }, [actions]);
-    var initialOptions = useMemo(function () { return ({
+    };
+    return useState({
         animation: {
             duration: 0, // No animation
         },
@@ -13963,12 +13805,11 @@ var useChartOptions = function () {
                 },
             },
         },
-    }); }, [handleZoom, handlePan]);
-    return useState(initialOptions);
+    });
 };
 
 var CustomOptionsComponent = function (_a) {
-    var customOptions = _a.customOptions, setCustomOptions = _a.setCustomOptions, autoRefresh = _a.autoRefresh, setAutoRefresh = _a.setAutoRefresh;
+    var customOptions = _a.customOptions, setCustomOptions = _a.setCustomOptions;
     var classes = useTrendingStyles();
     var handleGridChange = function (value) {
         setCustomOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { showGrid: value })); });
@@ -13978,17 +13819,13 @@ var CustomOptionsComponent = function (_a) {
     };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Grid, { item: true, className: classes.labelOptions },
-            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(Grid, { item: true, className: classes.labelOptions },
-            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("label", null,
+                React__default.createElement("input", { type: "checkbox", checked: customOptions.showGrid, onChange: function (e) { return handleGridChange(e.target.checked); } }),
+                "Show Grid")),
         React__default.createElement(Grid, { item: true, className: classes.labelOptions },
-            React__default.createElement(FormControlLabel, { checked: autoRefresh, control: React__default.createElement(Switch, { color: "primary" }), label: "Auto Refresh", onChange: function (e, checked) {
-                    setAutoRefresh(checked);
-                } }))));
+            React__default.createElement("label", null,
+                React__default.createElement("input", { type: "checkbox", checked: customOptions.stepped, onChange: function (e) { return handleSteppedChange(e.target.checked); } }),
+                "Stepped"))));
 };
 
 var dateNavigator = function (startDate, endDate, scope, operator, current) {
@@ -14024,8 +13861,8 @@ var dateNavigator = function (startDate, endDate, scope, operator, current) {
     return { newStartDate: newStartDate, newEndDate: newEndDate };
 };
 
-var Header = React__default.memo(function (_a) {
-    var setChartOptions = _a.setChartOptions, autoRefresh = _a.autoRefresh, setAutoRefresh = _a.setAutoRefresh;
+var Header = function (_a) {
+    var setChartOptions = _a.setChartOptions;
     var classes = useTrendingStyles();
     var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
     var _c = useState({
@@ -14048,9 +13885,10 @@ var Header = React__default.memo(function (_a) {
         //@ts-ignore
         actions.setTotalScope((_a = {}, _a[key] = moment$8(newValue).toDate(), _a));
     };
-    var handleChangeScope = function (value) {
+    var handleChangeScope = function (e) {
+        var newScope = e.target.value;
         actions.setTotalScope({
-            scope: value,
+            scope: newScope,
         });
     };
     useEffect(function () {
@@ -14075,7 +13913,7 @@ var Header = React__default.memo(function (_a) {
     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(Grid, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "8%" } },
+    return (React__default.createElement(Grid, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
         React__default.createElement(Grid, { md: 6, item: true, container: true, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
             React__default.createElement(Grid, { item: true },
                 React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
@@ -14089,7 +13927,7 @@ var Header = React__default.memo(function (_a) {
                     } })),
             React__default.createElement(Grid, { item: true, className: classes.select },
                 React__default.createElement(FormControl, { variant: "outlined" },
-                    React__default.createElement(Select, { value: state.scope, onChange: function (e) { return handleChangeScope(e.target.value); }, displayEmpty: true },
+                    React__default.createElement(Select, { value: state.scope, onChange: handleChangeScope, 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"),
@@ -14098,9 +13936,7 @@ var Header = React__default.memo(function (_a) {
                         React__default.createElement(MenuItem, { value: "10 days" }, "10 days"),
                         React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
             React__default.createElement(Grid, { item: true },
-                React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: autoRefresh
-                        ? ""
-                        : moment$8(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
+                React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment$8(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" },
                     } })),
@@ -14113,17 +13949,10 @@ var Header = React__default.memo(function (_a) {
         React__default.createElement(Grid, { md: 6, item: true, container: true, justifyContent: "space-between" },
             React__default.createElement(Grid, { item: true, container: true, wrap: "nowrap", spacing: 1 },
                 React__default.createElement(Grid, { item: true, 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";
+                    React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions }))))));
+};
 
-var DraggableLineControl = React__default.memo(function (_a) {
+var DraggableLineControl = 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];
@@ -14182,11 +14011,10 @@ var DraggableLineControl = React__default.memo(function (_a) {
                 right: 0,
                 margin: "auto",
             } })));
-});
-DraggableLineControl.displayName = "DraggableLineControl";
+};
 
 var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
-    var chartPlugin = useMemo(function () { return ({
+    var chartPlugin = {
         id: "verticalLinePlugin",
         afterUpdate: function (chart) {
             if (chart.chartArea) {
@@ -14212,7 +14040,7 @@ var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
             setChartArea(chart.chartArea);
             setCoords({ x1: x1, x2: x2 });
         },
-    }); }, [setChartArea, setCoords]);
+    };
     return chartPlugin;
 };
 
@@ -14250,7 +14078,7 @@ var updateCursorData = function (chart, setCursorData) {
 };
 
 var useXAxisDatePlugin = function () {
-    var chartPlugin = useMemo(function () { return ({
+    var chartPlugin = {
         id: "xAxisDatePlugin",
         afterBuildTicks: function (chart) {
             var oldTicks = chart.scales.x.ticks;
@@ -14276,14 +14104,14 @@ var useXAxisDatePlugin = function () {
             }
             chart.scales.x.ticks = newTicks;
         },
-    }); }, []);
+    };
     return chartPlugin;
 };
 
 var useYAxisPlugin = function () {
-    var chartPlugin = useMemo(function () { return ({
+    var chartPlugin = {
         id: "yAxisPlugin",
-    }); }, []);
+    };
     return chartPlugin;
 };
 
@@ -14305,7 +14133,7 @@ var areRangesSimilar = function (tag1, tag2) {
     return isSignificantOverlap;
 };
 
-var TrendingChart = React__default.memo(function (_a) {
+var TrendingChart = 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];
@@ -14359,9 +14187,9 @@ var TrendingChart = React__default.memo(function (_a) {
                 id: "y-axis-".concat(axis.TagId),
                 type: "linear",
                 display: axis.IsVisible,
-                title: {
+                scaleLabel: {
                     display: true,
-                    text: axis.TagName,
+                    labelString: axis.TagName,
                 },
                 min: axis.IsAutoScale ? undefined : min,
                 max: axis.IsAutoScale ? undefined : max,
@@ -14427,18 +14255,13 @@ var TrendingChart = React__default.memo(function (_a) {
         });
     }, 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 verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
     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
+    }, [state.graphShouldUpdate, series]);
     useEffect(function () {
         if (chartShouldInitCursors) {
             if (chartRef.current) {
@@ -14447,85 +14270,6 @@ var TrendingChart = React__default.memo(function (_a) {
             }
         }
     }, [chartShouldInitCursors, state.graphShouldUpdate]);
-    // Update colors and visibility immediately without debounce
-    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
-    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 (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;
-                            }
-                        }
-                    }
-                },
-            };
-        });
-        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) {
@@ -14545,23 +14289,30 @@ var TrendingChart = React__default.memo(function (_a) {
                 chartRef.current.secondLineX = newLeft;
                 debouncedUpdateChart.current();
             } })) : null,
-        React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: plugins })));
-});
-TrendingChart.displayName = "TrendingChart";
+        React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin] })));
+};
 
 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 Trending = function (_a) {
+    _a.title; var getTagsFromAPI = _a.getTagsFromAPI;
+    var _b = useTrendingContext(), state = _b.state, _c = _b.state, viewTags = _c.viewTags, shouldRefetchSeries = _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({
+    var _e = useState(true), loading = _e[0], setLoading = _e[1];
+    var _f = useState([]), series = _f[0], setSeries = _f[1];
+    var _g = useState(null), selectedRowTagId = _g[0], setSelectedRowTagId = _g[1];
+    var _h = useState(null), viewTagForDelete = _h[0], setViewTagForDelete = _h[1];
+    var _j = useChartOptions(), chartOptions = _j[0], setChartOptions = _j[1];
+    var _k = useState({
         labels: [],
         datasets: [],
-    }), chartData = _h[0], setChartData = _h[1];
-    var _j = useState(null), cursorData = _j[0], setCursorData = _j[1];
+    }), chartData = _k[0], setChartData = _k[1];
+    var _l = useState(null), cursorData = _l[0], setCursorData = _l[1];
+    var debounceForFetchingData = useRef(null);
+    var _m = useState({
+        x: 0,
+        y: 0,
+    }), contextMenuPosition = _m[0], setContextMenuPosition = _m[1];
+    var _o = useState(false), openContextMenu = _o[0], setOpenContextMenu = _o[1];
     var handleRightClick = function (event, tagId) {
         event.preventDefault();
         event.stopPropagation(); // Prevent the click event from propagating to the document
@@ -14572,28 +14323,70 @@ var Trending = React__default.memo(function (_a) {
             setViewTagForDelete(null);
         }
         setSelectedRowTagId(tagId);
+        setOpenContextMenu(true);
+        setContextMenuPosition({ x: event.clientX, y: event.clientY });
     };
-    var _k = searchSeries({
-        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;
+    useEffect(function () {
+        if (debounceForFetchingData.current) {
+            clearTimeout(debounceForFetchingData.current);
+        }
+        debounceForFetchingData.current = setTimeout(function () {
+            var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var viewTagsArr, tagIds, response, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 3, , 4]);
+                            setLoading(true);
+                            viewTagsArr = Object.values(viewTags).sort(function (a, b) { return b.order - a.order; });
+                            tagIds = viewTagsArr.map(function (tag) { return tag.viewTag.TagId; });
+                            if (!tagIds.length) return [3 /*break*/, 2];
+                            return [4 /*yield*/, axios.post("/series?nodeName=null", {
+                                    start: state.timeScopeStart.getTime(),
+                                    end: state.timeScopeEnd.getTime(),
+                                    tagIds: tagIds,
+                                    sampleCount: 1000,
+                                })];
+                        case 1:
+                            response = _a.sent();
+                            setSeries(response.data || []);
+                            _a.label = 2;
+                        case 2:
+                            setLoading(false);
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_1 = _a.sent();
+                            setError(error_1.message);
+                            setLoading(false);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); };
+            fetchData();
+        }, 800);
+        return function () {
+            if (debounceForFetchingData.current) {
+                clearTimeout(debounceForFetchingData.current);
+            }
+        };
+    }, [shouldRefetchSeries]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid, { container: true, style: { width: "95svw", height: "88svh", margin: 0 } },
-            React__default.createElement(Header, { setChartOptions: setChartOptions, autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh }),
-            React__default.createElement(Grid, { item: true, md: 12 },
-                React__default.createElement(Divider, { style: { margin: "10px 0 20px" } })),
+        React__default.createElement(Grid, { container: true, style: { width: "95svw", height: "88svh", margin: 0 }, onClick: function () { return setOpenContextMenu(false); } },
+            React__default.createElement(Header, { setChartOptions: setChartOptions }),
             React__default.createElement(Grid, { item: true, 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(TrendingChart, { series: series, chartData: chartData, setChartData: setChartData, chartOptions: chartOptions, setChartOptions: setChartOptions, setCursorData: setCursorData })),
             React__default.createElement(Grid, { item: true, container: true, xs: 12, onContextMenu: function (e) { return handleRightClick(e, null); }, style: {
                     height: "40%",
                     minWidth: "100%",
+                    paddingTop: "3rem",
+                    border: "4px solid #ccc",
                     borderRadius: 10,
-                    margin: "10px 0 10px",
-                    position: seriesLoading ? "relative" : "inherit",
+                    padding: 10,
+                    margin: "20px 0 10px",
+                    position: loading ? "relative" : "inherit",
                 } },
-                seriesLoading && (React__default.createElement("div", { style: {
+                loading && (React__default.createElement("div", { style: {
                         position: "absolute",
                         top: 0,
                         left: 0,
@@ -14606,129 +14399,79 @@ var Trending = React__default.memo(function (_a) {
                         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(TableComponent, { chartData: chartData, cursorData: cursorData, getTagsFromAPI: getTagsFromAPI, openContextMenu: openContextMenu, setOpenContextMenu: setOpenContextMenu, viewTagForDelete: viewTagForDelete, setViewTagForDelete: setViewTagForDelete, selectedRowTagId: selectedRowTagId, setSelectedRowTagId: setSelectedRowTagId, handleRightClick: handleRightClick, contextMenuPosition: contextMenuPosition, setContextMenuPosition: setContextMenuPosition }))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "ERROR" })));
-});
-Trending.displayName = "Trending";
-
-var searchViews = 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 searchViewTags = function (_a) {
-    var viewId = _a.viewId;
-    return useQuery({
-        queryKey: ["viewTags", viewId],
-        queryFn: function () {
-            if (viewId) {
-                return getViewTags(viewId);
-            }
-            else {
-                return [];
-            }
-        },
-    });
 };
-var searchTagsTree = function () {
-    return useQuery({
-        queryKey: ["tagsTree"],
-        queryFn: function () { return getTagsTree(); },
-    });
-};
-var searchSeries = 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,
-                            })];
+
+var TrendingsPage = function (props) {
+    var _a = useState(""), error = _a[0], setError = _a[1];
+    var _b = useTrendingContext(), viewSelected = _b.state.viewSelected, _c = _b.actions, setViews = _c.setViews, setViewTagsAndRefetch = _c.setViewTagsAndRefetch, setViewSelected = _c.setViewSelected;
+    var getTagsFromAPI = function () {
+        var args_1 = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args_1[_i] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (forceReload) {
+            var viewsResp, lastCreated, viewTagsResp, viewTags;
+            if (forceReload === void 0) { forceReload = false; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getViews(null)];
                     case 1:
-                        resp = _c.sent();
-                        return [2 /*return*/, get(resp, "data", [])];
+                        viewsResp = _a.sent();
+                        if (!viewsResp.ok) return [3 /*break*/, 4];
+                        setViews(viewsResp.data.tables[0].rows);
+                        lastCreated = void 0;
+                        if (!viewSelected || forceReload) {
+                            lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) {
+                                return prev && prev.ViewId > current.ViewId ? prev : current;
+                            }, null);
+                            //viewSelected
+                            setViewSelected(lastCreated);
+                        }
+                        else {
+                            lastCreated = viewSelected;
+                        }
+                        if (!lastCreated) return [3 /*break*/, 3];
+                        return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
                     case 2:
-                        error_1 = _c.sent();
-                        // Ignore abort errors
-                        if (axios.isCancel(error_1) || error_1.name === "AbortError") {
-                            return [2 /*return*/, []];
+                        viewTagsResp = _a.sent();
+                        if (viewTagsResp.ok) {
+                            viewTags = viewTagsResp.data.tables[0].rows.reduce(function (carr, curr, idx) {
+                                if (isNil(curr.Color)) {
+                                    curr.Color = getRandomColor();
+                                }
+                                carr[curr.TagId] = {
+                                    viewTag: curr,
+                                    order: idx,
+                                };
+                                return carr;
+                            }, {});
+                            setViewTagsAndRefetch(viewTags);
                         }
-                        throw new Error(getError(error_1));
-                    case 3: return [2 /*return*/];
+                        else {
+                            setError(viewTagsResp.message);
+                        }
+                        _a.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4:
+                        setError(viewsResp.message);
+                        _a.label = 5;
+                    case 5: return [2 /*return*/];
                 }
             });
-        }); },
-        refetchInterval: autoRefresh ? 10000 : false,
-    });
-};
-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 = searchViews({ autoRefresh: autoRefresh }), views = _f.data; _f.isLoading; var viewsIsError = _f.isError, viewsError = _f.error, viewSuccess = _f.isSuccess;
-    var _g = searchViewTags({ 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);
-        }
-        else {
-            lastCreated = viewSelected;
-            setViewId(lastCreated.ViewId);
-        }
-    }, [viewSuccess]);
-    useEffect(function () {
-        if (viewTags) {
-            if (!viewTags)
-                return;
-            var vTags = viewTags.reduce(function (carr, curr, idx) {
-                if (isNil(curr.Color)) {
-                    curr.Color = getRandomColor();
-                }
-                carr[curr.TagId] = {
-                    viewTag: curr,
-                    order: idx,
-                };
-                return carr;
-            }, {});
-            setViewTagsAndRefetch(vTags);
-        }
-    }, [viewTagsSuccess]);
+        });
+    };
     useEffect(function () {
-        if (viewTagsError && viewTagsIsError) {
-            setError(viewTagsError.message);
-        }
-        if (viewsError && viewsIsError) {
-            setError(viewsError.message);
-        }
-    }, [viewsError, viewsIsError, viewTagsError, viewTagsIsError]);
+        getTagsFromAPI();
+    }, []);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HelmetDexteel, { title: "Trending Chart" }),
-        React__default.createElement(Grid, { style: { padding: "20px", justifyContent: "center", display: "flex" } },
-            React__default.createElement(Trending, { title: "Trending Chart", autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh })),
+        React__default.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
+            React__default.createElement(Paper, null,
+                React__default.createElement(Grid, { container: true, spacing: 3, style: { padding: "20px" } },
+                    React__default.createElement(Grid, { item: true, xs: 12 },
+                        React__default.createElement(Trending, { title: "Trending Chart", getTagsFromAPI: getTagsFromAPI }))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, size: "xl", title: "ERROR" })));
 };
 
@@ -17762,5 +17505,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry, MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, RemoveAssetDialog, 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, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry, routeLogbookReport, searchAssets, searchSeries, searchTagsTree, searchViewTags, searchViews, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$i as useStyles, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry, MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, RemoveAssetDialog, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry, routeLogbookReport, searchAssets, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$i as useStyles, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map