@dexteel/mesf-core 4.10.3 → 4.10.5

package/CHANGELOG.md

@@ -1,4 +1,16 @@
-# CHANGELOG
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [4.10.5](https://github.com/dexteel/mesf-core-frontend/compare/v4.10.4...v4.10.5) (2024-05-02)
+
+
+### Bug Fixes
+
+* **trending:** Load view bug when you add and remove a view tag ([eb8a155](https://github.com/dexteel/mesf-core-frontend/commit/eb8a1553cad19fa9be106716f8958728fc1507dc))
+
+### [4.10.4](https://github.com/dexteel/mesf-core-frontend/compare/v4.10.2...v4.10.4) (2024-04-29)
+
 ## 4.10.3
 - Trending: Fix first view 
 ## 4.10.2

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 export { LicenseManager } from 'ag-grid-enterprise';
 import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Box, Divider, IconButton as IconButton$1, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
-import { values, get, isNil as isNil$1, isEmpty, isNaN, round } from 'lodash-es';
+import { values, get, isNil as isNil$1, isEmpty, isNaN, round, isNumber } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
@@ -9,7 +9,7 @@ import DialogContent$1 from '@material-ui/core/DialogContent';
 import DialogActions$1 from '@material-ui/core/DialogActions';
 import Dialog from '@material-ui/core/Dialog';
 import Button from '@material-ui/core/Button';
-import { Outlet, useNavigate, useSearchParams, Link, useParams, Routes, Route, Navigate, BrowserRouter } from 'react-router-dom';
+import { Outlet, useNavigate, useSearchParams, Link, useParams, Navigate, Routes, Route, BrowserRouter } from 'react-router-dom';
 import { useMsal, MsalProvider } from '@azure/msal-react';
 import { LogLevel, PublicClientApplication } from '@azure/msal-browser';
 import { useComplexState } from 'use-complex-state';
@@ -36,6 +36,7 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import CreateIcon from '@material-ui/icons/Create';
 import DeleteIcon from '@material-ui/icons/Delete';
 import LockIcon from '@material-ui/icons/Lock';
+import SaveIcon from '@material-ui/icons/Save';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
@@ -8620,7 +8621,22 @@ var tagColors = [
     "#e74b3c",
     "red",
     "#bf3b2c", // dark red
-];
+];
+var availableColors = __spreadArray([], tagColors, true);
+var lastColor = null;
+var getRandomColor = function () {
+    if (availableColors.length === 0) {
+        availableColors = __spreadArray([], tagColors, true);
+        if (lastColor && availableColors.length > 1) {
+            availableColors.splice(availableColors.indexOf(lastColor), 1);
+        }
+    }
+    var randomIndex = Math.floor(Math.random() * availableColors.length);
+    var color = availableColors[randomIndex];
+    availableColors.splice(randomIndex, 1);
+    lastColor = color;
+    return color;
+};
 
 var Swatch = function (_a) {
     var color = _a.color, onSelect = _a.onSelect;
@@ -9037,7 +9053,7 @@ var TagFolderCustomNode = function (_a) {
         ((_c = node.data) === null || _c === void 0 ? void 0 : _c.TagName) &&
             React__default.createElement(React__default.Fragment, null,
                 ((_d = node.data) === null || _d === void 0 ? void 0 : _d.TagTypeCode) && ((_e = node.data) === null || _e === void 0 ? void 0 : _e.TagTypeCode) !== 'F' && (React__default.createElement("div", { className: classes.dataTypeOfTree, style: {
-                        backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === 'A' ? 'blue' : 'red',
+                        backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === 'A' ? "#AD48C4" : "#C46F48",
                         margin: "0 5px"
                     } }, (_g = node.data) === null || _g === void 0 ? void 0 : _g.TagTypeCode)),
                 React__default.createElement(Tooltip, { title: node.data.TagName, placement: "top", arrow: true },
@@ -9567,8 +9583,13 @@ var LoadViewModal = function (_a) {
     var handleDeleteView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             e.stopPropagation();
-            setViewForDelete(view);
-            setDeleteViewModalOpen(true);
+            if (view.ViewId === (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) {
+                setError('Can not delete current view');
+            }
+            else {
+                setViewForDelete(view);
+                setDeleteViewModalOpen(true);
+            }
             return [2 /*return*/];
         });
     }); };
@@ -9582,8 +9603,8 @@ var LoadViewModal = function (_a) {
     var handleAllViewsCheckbox = function () {
         setAllViewsChecked(function (prev) { return !prev; });
     };
-    var privateViews = useMemo(function () {
-        return views.filter(function (v) { return v.IsPublic === false; });
+    var publicViews = useMemo(function () {
+        return views.filter(function (v) { return v.IsPublic === true; });
     }, [views, allViewsChecked]);
     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' },
@@ -9595,7 +9616,7 @@ var LoadViewModal = function (_a) {
                                 React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
                                 React__default.createElement(Typography, null, "All Views")))),
                     React__default.createElement(Grid$1, { item: true, md: 12 },
-                        React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: allViewsChecked ? views : privateViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderOption: function (option) { return (React__default.createElement("div", { className: classes.optionContainer },
+                        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 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 ? '' :
@@ -9606,7 +9627,7 @@ var LoadViewModal = function (_a) {
                                         React__default.createElement(CreateIcon, { fontSize: 'small', color: 'primary', style: { height: "18px", width: '18px', cursor: 'pointer' } })),
                                     React__default.createElement(IconButton$1, { onClick: function (e) { return handleDeleteView(option, e); } },
                                         React__default.createElement(DeleteIcon, { fontSize: 'small', color: 'secondary', style: { height: "18px", width: '18px', cursor: 'pointer' } }))))); }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })))) :
-                    (React__default.createElement(Typography, null, "No tag views detected, please add one")))),
+                    (React__default.createElement(Typography, null, "No views detected, please add one")))),
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement("div", { style: { paddingTop: "1rem" } },
                     React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
@@ -9634,7 +9655,7 @@ var SaveAsViewModal = function (_a) {
     var _h = useState(''), newView = _h[0], setNewView = _h[1];
     var handleCheck = function () { return setIsPublic(!isPublic); };
     var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp, ViewId_1, results;
+        var resp, ViewId_1, shouldClose_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -9644,25 +9665,22 @@ var SaveAsViewModal = function (_a) {
                     resp = _a.sent();
                     if (!resp.ok) return [3 /*break*/, 3];
                     ViewId_1 = resp.data.returnValue;
+                    shouldClose_1 = true;
                     return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
                             var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible, Unit = _a.Unit;
                             upsertViewTag(ViewId_1, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale, Unit)
                                 .then(function (r) {
                                 if (!r.ok) {
-                                    setError(r.message);
+                                    setError(function (prevErr) { return "".concat(prevErr, ". ").concat(r.message); });
+                                    if (shouldClose_1) {
+                                        shouldClose_1 = false;
+                                    }
                                 }
                             });
                         }))];
                 case 2:
-                    results = _a.sent();
-                    results.forEach(function (result, index) {
-                        if (result.status === "rejected") {
-                            setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
-                        }
-                        else {
-                            handleClose(true);
-                        }
-                    });
+                    _a.sent();
+                    handleClose(shouldClose_1);
                     return [3 /*break*/, 4];
                 case 3:
                     setError(resp.message);
@@ -9768,6 +9786,25 @@ var useTagsDataTable = function (_a) {
 };
 
 var useTagsTableStyles = makeStyles$1(function (theme) { return ({
+    topTitles: {
+        border: "0.0625rem solid black",
+        borderBottom: "none",
+        backgroundColor: "#f5f7f7",
+        color: "#333",
+        fontWeight: "normal",
+        textAlign: "center",
+        padding: "6px 0"
+    },
+    bottomTitlesRow: {
+        '& th': {
+            border: "0.0625rem solid black",
+            backgroundColor: "#f5f7f7",
+            color: "#333",
+            fontWeight: "normal",
+            textAlign: "center",
+            padding: "6px 0"
+        }
+    },
     checkbox: {
         '& input[type="checkbox"]': {
             zoom: 1.5
@@ -9779,17 +9816,6 @@ var useTagsTableStyles = makeStyles$1(function (theme) { return ({
             backgroundColor: "#f2f2f2"
         }
     },
-    topTitles: {
-        border: "0.0625rem black solid",
-        borderBottom: "none",
-        backgroundColor: "#e9ecef"
-    },
-    bottomTitlesRow: {
-        '& th': {
-            border: "1px black solid"
-        },
-        backgroundColor: "#e9ecef"
-    },
     doubleInput: {
         padding: "0",
         '& input[type="text"] ': {
@@ -9812,6 +9838,10 @@ var useTagsTableStyles = makeStyles$1(function (theme) { return ({
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap'
     },
+    viewSelected: {
+        width: '26.125rem',
+        padding: "0"
+    },
     autoScale: {
         width: '7.5rem'
     },
@@ -9820,7 +9850,8 @@ var useTagsTableStyles = makeStyles$1(function (theme) { return ({
         padding: "0"
     },
     visible: {
-        width: '3.75rem'
+        width: '3.75rem',
+        fontSize: "12px"
     },
     color: {
         width: '4.375rem'
@@ -9889,18 +9920,16 @@ var formatTimeDiffWithMs = function (start, end) {
 };
 
 var TableComponent = function (_a) {
-    var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI;
+    var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI, viewTagForDelete = _a.viewTagForDelete, setViewTagForDelete = _a.setViewTagForDelete, selectedRowIndex = _a.selectedRowIndex, setSelectedRowIndex = _a.setSelectedRowIndex, handleRightClick = _a.handleRightClick; _a.setContextMenuPosition; var contextMenuPosition = _a.contextMenuPosition, openContextMenu = _a.openContextMenu, setOpenContextMenu = _a.setOpenContextMenu;
     var classes = useTagsTableStyles();
     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(null), viewTagForDelete = _h[0], setViewTagForDelete = _h[1];
-    var _j = useState(null), selectedRowIndex = _j[0], setSelectedRowIndex = _j[1];
-    var _k = useState(false), tagsTreeModalOpen = _k[0], setTagsTreeModalOpen = _k[1];
-    var _l = useState(false), saveAsViewModalOpen = _l[0], setSaveAsViewModalOpen = _l[1];
-    var _m = useState(false), loadViewOpen = _m[0], setLoadViewOpen = _m[1];
-    var _o = useState(''), snackbarMessage = _o[0], setSnackbarMessage = _o[1];
+    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 dataTable = useTagsDataTable({ viewTags: viewTags, chartData: chartData, cursorData: cursorData });
     var handleChange = function (tagId, value, property) {
         var newTags = viewTags.map(function (tag) {
@@ -9936,7 +9965,7 @@ var TableComponent = function (_a) {
     var handleAddTag = function (newTag) {
         var newArr = __spreadArray([], viewTags, true);
         if (newTag) {
-            newArr.push(__assign(__assign({}, newTag), { IsVisible: true, TagType: newTag.TagTypeCode }));
+            newArr.push(__assign(__assign({}, newTag), { IsVisible: true, TagType: newTag.TagTypeCode, Color: newTag.Color || getRandomColor() }));
             setViewTagsAndRefetch(newArr);
         }
     };
@@ -9954,16 +9983,47 @@ var TableComponent = function (_a) {
         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)); }))));
     };
-    // Position state for the context menu
-    var _p = useState({ x: 0, y: 0 }), contextMenuPosition = _p[0], setContextMenuPosition = _p[1];
-    var contextMenuOptions = [
-        { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
-        { id: 'add', label: 'Tags Tree', onClick: function () { return setTagsTreeModalOpen(true); } },
-        { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { return handleSaveDefaultToTag(); } },
-        { id: 'saveView', label: 'Save View', onClick: function () { return handleSaveView(); } },
-        { id: 'saveViewAs', label: 'Save View as', onClick: function () { return setSaveAsViewModalOpen(true); } },
-        { id: 'loadView', label: 'Load View', onClick: function () { return setLoadViewOpen(true); } },
-    ];
+    var contextMenuOptions = [];
+    if (viewTagForDelete) {
+        contextMenuOptions.push({
+            id: 'delete', label: 'Remove Tag', onClick: function () {
+                handleDelete();
+                setOpenContextMenu(false);
+            }
+        });
+    }
+    contextMenuOptions.push.apply(contextMenuOptions, [
+        {
+            id: 'add', label: 'Tags Tree', onClick: function () {
+                setTagsTreeModalOpen(true);
+                setOpenContextMenu(false);
+            }
+        },
+        {
+            id: 'saveDefault', label: 'Save Default To Tag', onClick: function () {
+                handleSaveDefaultToTag();
+                setOpenContextMenu(false);
+            }
+        },
+        {
+            id: 'saveView', label: 'Save View', onClick: function () {
+                handleSaveView();
+                setOpenContextMenu(false);
+            }
+        },
+        {
+            id: 'saveViewAs', label: 'Save View as', onClick: function () {
+                setSaveAsViewModalOpen(true);
+                setOpenContextMenu(false);
+            }
+        },
+        {
+            id: 'loadView', label: 'Load View', onClick: function () {
+                setLoadViewOpen(true);
+                setOpenContextMenu(false);
+            }
+        },
+    ]);
     var handleTagSelect = function (selectedTag) {
         var alreadySelected = viewTags.find(function (vt) { return vt.TagId === selectedTag.TagId; });
         if (!alreadySelected) {
@@ -10063,13 +10123,6 @@ var TableComponent = function (_a) {
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [selectedRowIndex]);
-    var handleRightClick = function (event, index) {
-        event.preventDefault();
-        event.stopPropagation(); // Prevent the click event from propagating to the document
-        setSelectedRowIndex(index);
-        setViewTagForDelete(viewTags[index]);
-        setContextMenuPosition({ x: event.clientX, y: event.clientY });
-    };
     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) {
@@ -10096,15 +10149,27 @@ var TableComponent = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid$1, { container: true, spacing: 1 },
-            React__default.createElement(Grid$1, { item: true, xs: 12 },
+        React__default.createElement(Grid$1, { container: true, spacing: 1, alignContent: 'flex-start', style: {
+                height: '100%',
+                maxHeight: '100%',
+                overflowY: 'auto'
+            } },
+            React__default.createElement(Grid$1, { item: true, xs: 12, style: {
+                    position: 'sticky',
+                    background: 'white',
+                    top: 0,
+                    left: 0,
+                    zIndex: 1000
+                } },
                 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: classes.visible }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) && "View:"),
-                                React__default.createElement("th", { className: classes.aliasCol }, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
-                                React__default.createElement("th", { className: classes.color }),
+                                React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.viewSelected) }, viewSelected ?
+                                    (React__default.createElement(Button$1, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setLoadViewOpen(true); } }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) || '')) : (React__default.createElement(Button$1, { 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("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);
@@ -10183,7 +10248,7 @@ var TableComponent = function (_a) {
                                 React__default.createElement("th", null, "Min"),
                                 React__default.createElement("th", null, "Max")))))),
             React__default.createElement(Grid$1, { item: true, xs: 12 },
-                React__default.createElement("div", { style: { width: '100%', overflowY: 'auto', maxHeight: ' 20svh' } },
+                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, viewTags && viewTags.length && Array.isArray(viewTags) ? viewTags.map(function (tag, index) {
                             var _a, _b, _c, _d, _e, _f, _g;
@@ -10196,7 +10261,7 @@ var TableComponent = function (_a) {
                                     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: { backgroundColor: tag.TagType === "A" ? "blue" : "red" } }, tag.TagType)),
+                                                (React__default.createElement("div", { className: classes.dataType, style: { backgroundColor: tag.TagType === "A" ? "#AD48C4" : "#C46F48" } }, tag.TagType)),
                                             React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.Alias || tag.TagName, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                                     var newAlias = e.target.value;
                                                     handleChangeAlias(tag.TagId, newAlias);
@@ -10236,9 +10301,9 @@ 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("td", null, round((_a = dataTable[tag.TagName]) === null || _a === void 0 ? void 0 : _a.y1, 3)),
-                                React__default.createElement("td", { className: classes.doubleInput }, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y2, 3)),
-                                React__default.createElement("td", null, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2y1, 3)),
+                                React__default.createElement("td", null, round((_a = dataTable[tag.TagName]) === null || _a === void 0 ? void 0 : _a.y1, 3) || 0),
+                                React__default.createElement("td", { className: classes.doubleInput }, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y2, 3) || 0),
+                                React__default.createElement("td", null, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2y1, 3) || 0),
                                 React__default.createElement("td", null,
                                     !isNaN(((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.pmin.y) * 0) ? round((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y, 3) : 0,
                                     " "),
@@ -10251,7 +10316,8 @@ var TableComponent = function (_a) {
                                 React__default.createElement(Button$1, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: 'contained', color: 'primary' }, " Add tag")),
                             React__default.createElement("div", null,
                                 React__default.createElement(Button$1, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
-            selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
+            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) {
                     setSaveAsViewModalOpen(false);
@@ -10769,7 +10835,7 @@ var TrendingChart = function (_a) {
         });
         var updatedSeries = series.map(function (serie, index) {
             var tag = viewTags[index];
-            var yAxisTagId = seriesVsTags.current[tag.TagId];
+            var yAxisTagId = seriesVsTags.current[tag === null || tag === void 0 ? void 0 : tag.TagId];
             return {
                 yAxisID: "y-axis-".concat(yAxisTagId),
                 data: serie.map(function (sample) { return ({
@@ -10825,13 +10891,30 @@ var Trending = function (_a) {
     var _d = useState(''), error = _d[0], setError = _d[1];
     var _e = useState(true), loading = _e[0], setLoading = _e[1];
     var _f = useState([]), series = _f[0], setSeries = _f[1];
-    var _g = useChartOptions(), chartOptions = _g[0], setChartOptions = _g[1];
-    var _h = useState({
+    var _g = useState(null), selectedRowIndex = _g[0], setSelectedRowIndex = _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, index) {
+        event.preventDefault();
+        event.stopPropagation(); // Prevent the click event from propagating to the document
+        if (isNumber(index)) {
+            setViewTagForDelete(viewTags[index]);
+        }
+        else {
+            setViewTagForDelete(null);
+        }
+        setSelectedRowIndex(index);
+        setOpenContextMenu(true);
+        setContextMenuPosition({ x: event.clientX, y: event.clientY });
+    };
     useEffect(function () {
         if (debounceForFetchingData.current) {
             clearTimeout(debounceForFetchingData.current);
@@ -10872,14 +10955,35 @@ var Trending = function (_a) {
         }, 800);
     }, [shouldRefetchSeries]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "81svh", margin: 0 } },
+        React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "88svh", margin: 0 }, onClick: function () { return setOpenContextMenu(false); } },
             React__default.createElement(Header, { setChartOptions: setChartOptions }),
             React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
                 React__default.createElement(TrendingChart, { series: series, chartData: chartData, setChartData: setChartData, chartOptions: chartOptions, setChartOptions: setChartOptions, setCursorData: setCursorData })),
-            React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
-                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, getTagsFromAPI: getTagsFromAPI })),
-            loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
-                React__default.createElement("p", null, "Loading...")))),
+            React__default.createElement(Grid$1, { 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,
+                    padding: 10,
+                    margin: "20px 0 10px",
+                    position: loading ? "relative" : "inherit"
+                } },
+                loading &&
+                    (React__default.createElement("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            background: 'rgba(255, 255, 255, 0.7)',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            zIndex: 2
+                        } },
+                        React__default.createElement(CircularProgress$1, { size: "2rem" }))),
+                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, getTagsFromAPI: getTagsFromAPI, openContextMenu: openContextMenu, setOpenContextMenu: setOpenContextMenu, viewTagForDelete: viewTagForDelete, setViewTagForDelete: setViewTagForDelete, selectedRowIndex: selectedRowIndex, setSelectedRowIndex: setSelectedRowIndex, handleRightClick: handleRightClick, contextMenuPosition: contextMenuPosition, setContextMenuPosition: setContextMenuPosition }))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, title: "ERROR" })));
 };
 
@@ -10889,13 +10993,13 @@ var TrendingsPage = function (props) {
     var getTagsFromAPI = function (forceReload) {
         if (forceReload === void 0) { forceReload = false; }
         return __awaiter(void 0, void 0, void 0, function () {
-            var viewsResp, lastCreated, viewTagsResp;
+            var viewsResp, lastCreated, viewTagsResp, viewTags;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, getViews(null)];
                     case 1:
                         viewsResp = _a.sent();
-                        if (!viewsResp.ok) return [3 /*break*/, 3];
+                        if (!viewsResp.ok) return [3 /*break*/, 4];
                         setViews(viewsResp.data.tables[0].rows);
                         lastCreated = void 0;
                         if (!viewSelected || forceReload) {
@@ -10906,21 +11010,28 @@ var TrendingsPage = function (props) {
                         else {
                             lastCreated = viewSelected;
                         }
-                        console.log(lastCreated);
+                        if (!lastCreated) return [3 /*break*/, 3];
                         return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
                     case 2:
                         viewTagsResp = _a.sent();
                         if (viewTagsResp.ok) {
-                            setViewTagsAndRefetch(viewTagsResp.data.tables[0].rows);
+                            viewTags = viewTagsResp.data.tables[0].rows.map(function (e) {
+                                if (isNil$1(e.Color)) {
+                                    e.Color = getRandomColor();
+                                }
+                                return e;
+                            });
+                            setViewTagsAndRefetch(viewTags);
                         }
                         else {
                             setError(viewTagsResp.message);
                         }
-                        return [3 /*break*/, 4];
-                    case 3:
+                        _a.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4:
                         setError(viewsResp.message);
-                        _a.label = 4;
-                    case 4: return [2 /*return*/];
+                        _a.label = 5;
+                    case 5: return [2 /*return*/];
                 }
             });
         });