@dexteel/mesf-core 4.5.10 → 4.6.1

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-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, Box, Tooltip, 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 { 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, Box, Divider, Tooltip, 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 } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
@@ -20,15 +20,15 @@ import Grid from '@material-ui/core/Grid';
 import { isNil, get as get$1 } from 'lodash';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import moment from 'moment';
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
-import moment from 'moment';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import Popover from '@material-ui/core/Popover';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
-import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
+import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1, Autocomplete } from '@material-ui/lab';
 import { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
@@ -1298,7 +1298,7 @@ var DialogTitle = withStyles(styles)(function (props) {
 var DialogContent = withStyles(function (theme) { return ({
     root: {
         padding: theme.spacing(2),
-        minWidth: 300
+        minWidth: 600
     }
 }); })(DialogContent$1);
 var DialogActions = withStyles(function (theme) { return ({
@@ -8283,6 +8283,213 @@ var Home = function () { return (React__default.createElement("div", { style: {
         position: "absolute"
     } })); };
 
+var TrendingsInitialState = {
+    timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
+    timeScopeEnd: new Date(),
+    scope: "1 day",
+    graphPan: false,
+    graphShouldUpdate: 0,
+    views: [
+        {
+            ViewId: 0,
+            ViewName: '',
+            UserName: null,
+            IsPublic: false,
+            LastModified: null,
+            LastModifiedBy: null
+        }
+    ],
+    viewSelected: null,
+    viewTags: [
+        {
+            ViewId: 0,
+            TagId: 0,
+            TagName: '',
+            Color: '',
+            IsVisible: true,
+            MinScale: 0,
+            MaxScale: 0,
+            IsAutoScale: true,
+            Alias: '',
+            TagType: '',
+            Unit: ''
+        }
+    ]
+};
+var TrendingsReducer = createSlice({
+    name: "__",
+    initialState: TrendingsInitialState,
+    reducers: {
+        setTotalScope: function (state, _a) {
+            var payload = _a.payload; _a.type;
+            state.graphShouldUpdate += 1;
+            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.scope)) {
+                //from arrow navigators
+                state.timeScopeStart = payload.start;
+                state.timeScopeEnd = payload.end;
+                state.scope = payload.scope;
+                return;
+            }
+            if (!isNil$1(payload.scope)) {
+                if (payload.scope !== "custom") {
+                    switch (payload.scope) {
+                        case "10 min":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(10, "minutes")
+                                .toDate();
+                            break;
+                        case "1 hour":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(1, "hours")
+                                .toDate();
+                            break;
+                        case "4 hours":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(4, "hours")
+                                .toDate();
+                            break;
+                        case "12 hours":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(12, "hours")
+                                .toDate();
+                            break;
+                        case "1 day":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(1, "days")
+                                .toDate();
+                            break;
+                        case "10 days":
+                            state.timeScopeStart = moment(state.timeScopeEnd)
+                                .subtract(10, "days")
+                                .toDate();
+                            break;
+                    }
+                }
+                state.scope = payload.scope;
+                return;
+            }
+            if (!isNil$1(payload.start) && !isNil$1(payload.end) && isNil$1(payload.graphPan)) {
+                // from zoom
+                state.timeScopeStart = payload.start;
+                state.timeScopeEnd = payload.end;
+                state.scope = "custom";
+                return;
+            }
+            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.graphPan)) {
+                // from pan
+                state.timeScopeStart = payload.start;
+                state.timeScopeEnd = payload.end;
+                return;
+            }
+            if (!isNil$1(payload.start)) {
+                state.timeScopeStart = payload.start;
+                if (state.scope !== "custom") {
+                    switch (state.scope) {
+                        case "10 min":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(10, "minutes")
+                                .toDate();
+                            break;
+                        case "1 hour":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(1, "hours")
+                                .toDate();
+                            break;
+                        case "4 hours":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(4, "hours")
+                                .toDate();
+                            break;
+                        case "12 hours":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(12, "hours")
+                                .toDate();
+                            break;
+                        case "1 day":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(1, "days")
+                                .toDate();
+                            break;
+                        case "10 days":
+                            state.timeScopeEnd = moment(payload.start)
+                                .add(10, "days")
+                                .toDate();
+                            break;
+                    }
+                }
+                return;
+            }
+            if (!isNil$1(payload.end)) {
+                state.timeScopeEnd = payload.end;
+                if (state.scope !== "custom") {
+                    switch (state.scope) {
+                        case "10 min":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(10, "minutes")
+                                .toDate();
+                            break;
+                        case "1 hour":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(1, "hours")
+                                .toDate();
+                            break;
+                        case "4 hours":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(4, "hours")
+                                .toDate();
+                            break;
+                        case "12 hours":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(12, "hours")
+                                .toDate();
+                            break;
+                        case "1 day":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(1, "days")
+                                .toDate();
+                            break;
+                        case "10 days":
+                            state.timeScopeStart = moment(payload.end)
+                                .subtract(10, "days")
+                                .toDate();
+                            break;
+                    }
+                }
+                return;
+            }
+        },
+        setViews: function (state, _a) {
+            var payload = _a.payload;
+            state.views = payload;
+        },
+        setViewSelected: function (state, _a) {
+            var payload = _a.payload;
+            state.viewSelected = payload;
+        },
+        setViewTags: function (state, _a) {
+            var payload = _a.payload;
+            state.viewTags = payload;
+        },
+        setGraphShouldUpdate: function (state) {
+            state.graphShouldUpdate = +1;
+        }
+    }
+});
+
+var TrendingContext = createContext({
+    state: TrendingsReducer.getInitialState(),
+    actions: TrendingsReducer.actions
+});
+var useTrendingContext = function () { return useContext(TrendingContext); };
+var TrendingProvider = function (_a) {
+    var children = _a.children;
+    var _b = useComplexState({
+        initialState: TrendingsReducer.getInitialState(),
+        reducers: TrendingsReducer.caseReducers
+    }), state = _b[0], actions = _b[1];
+    return (React__default.createElement(TrendingContext.Provider, { value: { state: state, actions: actions } }, children));
+};
+
 /*!
   * chartjs-adapter-moment v1.0.1
   * https://www.chartjs.org
@@ -8422,8 +8629,9 @@ var ColorPicker = function (_a) {
 var TagSelectionModal = function (_a) {
     var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState([]), treeData = _c[0], setTreeData = _c[1];
-    var _d = useState([]), expanded = _d[0], setExpanded = _d[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var _d = useState([]), treeData = _d[0], setTreeData = _d[1];
+    var _e = useState([]), expanded = _e[0], setExpanded = _e[1];
     var currentColorIndex = useRef(0);
     useEffect(function () {
         var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -8438,8 +8646,8 @@ var TagSelectionModal = function (_a) {
                         children = _a.sent();
                         setTreeData([
                             {
-                                tagId: null,
-                                tagName: "root",
+                                TagId: null,
+                                TagName: "root",
                                 children: children,
                                 isLoaded: true,
                                 shortName: "Tags",
@@ -8488,20 +8696,19 @@ var TagSelectionModal = function (_a) {
                                         case 1:
                                             children = _a.sent();
                                             return [2 /*return*/, {
-                                                    tagId: dbTag.tagId,
-                                                    tagName: childTagName,
+                                                    TagId: dbTag.tagId,
+                                                    TagName: childTagName,
                                                     shortName: dbTag.tagName,
                                                     children: children,
                                                     isLoaded: true,
                                                     tag: {
-                                                        tagId: dbTag.tagId,
-                                                        tagName: dbTag.tagName,
-                                                        tagType: dbTag.tagType,
-                                                        color: getColor(),
-                                                        autoScale: true,
-                                                        minScale: null,
-                                                        maxScale: null,
-                                                        visible: true
+                                                        TagId: dbTag.tagId,
+                                                        TagName: dbTag.tagName,
+                                                        Color: getColor(),
+                                                        IsAutoScale: true,
+                                                        MinScale: dbTag.minScale,
+                                                        MaxScale: dbTag.maxScale,
+                                                        IsVisible: true
                                                     }
                                                 }];
                                     }
@@ -8514,7 +8721,7 @@ var TagSelectionModal = function (_a) {
                         return [2 /*return*/, childrenData];
                     case 4:
                         error_1 = _a.sent();
-                        console.error("Error fetching children:", error_1);
+                        setError(error_1.message);
                         return [2 /*return*/, []];
                     case 5: return [2 /*return*/];
                 }
@@ -8533,7 +8740,7 @@ var TagSelectionModal = function (_a) {
         var node;
         return __generator(this, function (_a) {
             node = findNode(treeData, nodeId);
-            if (node === null || node === void 0 ? void 0 : node.tagId) {
+            if (node === null || node === void 0 ? void 0 : node.TagId) {
                 onTagSelect(node.tag);
             }
             return [2 /*return*/];
@@ -8542,7 +8749,7 @@ var TagSelectionModal = function (_a) {
     var findNode = function (nodes, tagName) {
         for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
             var node = nodes_1[_i];
-            if (node.tagName === tagName) {
+            if (node.TagName === tagName) {
                 return node;
             }
             else if (node.children) {
@@ -8553,553 +8760,733 @@ var TagSelectionModal = function (_a) {
         }
         return null;
     };
-    var renderTree = function (node) { return (React__default.createElement(TreeItem$1, { key: node.tagName, nodeId: node.tagName, label: node.shortName, endIcon: React__default.createElement(ArrowDropDownIcon, null), icon: node.children && node.children.length > 0 ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertDriveFileIcon, null)) }, node.children && node.children.map(function (child) { return renderTree(child); }))); };
-    return (React__default.createElement("div", { style: {
-            display: isOpen ? "block" : "none",
-            minHeight: "400px",
-            minWidth: "600px"
-        } },
-        React__default.createElement("div", null, isLoading ? (React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
-            React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); }))))));
+    var renderTree = function (node) { return (React__default.createElement(TreeItem$1, { key: node.TagName, nodeId: node.TagName, label: node.shortName, endIcon: React__default.createElement(ArrowDropDownIcon, null), icon: node.children && node.children.length > 0 ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertDriveFileIcon, null)) }, node.children && node.children.map(function (child) { return renderTree(child); }))); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { style: {
+                display: isOpen ? "block" : "none",
+                minHeight: "400px",
+                minWidth: "600px"
+            } },
+            React__default.createElement("div", null, isLoading ? (React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
+                React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); }))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
 var AddTagModal = function (_a) {
     var open = _a.open, handleClose = _a.handleClose, onTagSelect = _a.onTagSelect;
-    return (React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
-        React__default.createElement(MesfModal.Content, null,
-            React__default.createElement(Box, null,
-                React__default.createElement(Typography, { id: "modal-modal-description" },
-                    React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect }))))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "lg", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Box, null,
+                    React__default.createElement(Typography, { id: "modal-modal-description" },
+                        React__default.createElement(TagSelectionModal, { isOpen: open, onClose: function () { return handleClose; }, onTagSelect: onTagSelect })))))));
 };
 
-var useTagsDataTable = function (_a) {
-    var cursorData = _a.cursorData, tagList = _a.tagList, chartData = _a.chartData;
-    return useMemo(function () {
-        // calculo y1,y2,y2y1,ymin,ymax por cada tag
-        var _a;
-        var dataTable = {};
-        if (cursorData) {
-            var _loop_1 = function (idx) {
-                var tag = tagList[idx];
-                var datasetForTag = ((_a = chartData.datasets.find(function (ds) { return ds.tagId === tag.tagId; })) === null || _a === void 0 ? void 0 : _a.data) || [];
-                var p1 = { x: new Date('1900-01-01'), y: 0 };
-                var p2 = { x: new Date('1900-01-01'), y: 0 };
-                var p1Found = false;
-                var pmin = { x: 0, y: Number.POSITIVE_INFINITY };
-                var pmax = { x: 0, y: Number.NEGATIVE_INFINITY };
-                for (var idx_1 = 0; idx_1 < datasetForTag.length; idx_1++) {
-                    var curr = datasetForTag[idx_1];
-                    var currentVal = curr.x;
-                    if (!p1Found) {
-                        if (currentVal < cursorData.x1) {
-                            p1 = curr;
-                            p2 = JSON.parse(JSON.stringify(p1));
-                            pmin = JSON.parse(JSON.stringify(p1));
-                            pmax = JSON.parse(JSON.stringify(p1));
-                            continue;
-                        }
-                        else {
-                            p1Found = true;
-                        }
-                    }
-                    else {
-                        if (currentVal < cursorData.x2) {
-                            p2 = curr;
-                            if (pmin['y'] > curr['y']) {
-                                pmin = JSON.parse(JSON.stringify(curr));
-                            }
-                            if (pmax['y'] < curr['y']) {
-                                pmax = JSON.parse(JSON.stringify(curr));
-                            }
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                }
-                dataTable[tag.tagName] = {
-                    y1: p1.y,
-                    y2: p2.y,
-                    y2y1: Number(p2.y) - Number(p1.y),
-                    pmin: pmin,
-                    pmax: pmax
-                };
-            };
-            for (var idx = 0; idx < tagList.length; idx++) {
-                _loop_1(idx);
-            }
-        }
-        return dataTable;
-    }, [tagList, chartData, cursorData]);
+var ButtonWithLoading = function (_a) {
+    var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
+    return (React__default.createElement(Button$1, __assign({}, props, { disabled: isLoading }),
+        isLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }),
+        children));
 };
 
-var useTagsTableStyles = makeStyles$1(function (theme) { return ({
-    checkbox: {
-        '& input[type="checkbox"]': {
-            zoom: 1.5
-        },
-        textAlign: 'center'
-    },
-    rowHover: {
-        '&:hover': {
-            backgroundColor: "#f2f2f2"
+var saveTagDefaults = function (TagId, Alias, Color, MinScale, MaxScale, Unit) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                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("[mssql2022].[IH_100020].[ih].[SaveTagDefaults]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
         }
-    },
-    topTitles: {
-        border: "0.0625rem black solid",
-        borderBottom: "none",
-        backgroundColor: "#e9ecef"
-    },
-    bottomTitlesRow: {
-        '& th': {
-            border: "1px black solid"
+    });
+}); };
+//views
+var getViews = function (Search) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "Search", value: Search });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[GetViews]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var getViewTags = function (ViewId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[GetViewTags]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var upsertView = function (ViewId, ViewName, isPublic) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                parameters.push({ name: "ViewName", value: ViewName });
+                parameters.push({ name: "isPublic", value: isPublic });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[UpsertView]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+var upsertViewTag = function (ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                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 });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[UpsertViewTag]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+
+var LoadViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose;
+    var _b = useTrendingContext(), _c = _b.state; _c.viewTags; var views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
+    var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
+    var _f = useState(''), error = _f[0], setError = _f[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 (!viewSelected) return [3 /*break*/, 2];
+                    setIsLoading(true);
+                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
+                case 1:
+                    viewTagsResp = _a.sent();
+                    if (viewTagsResp.ok) {
+                        setViewTags(viewTagsResp.data.tables[0].rows);
+                    }
+                    else {
+                        setError(viewTagsResp.message);
+                    }
+                    setIsLoading(false);
+                    handleClose();
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement("div", null,
+        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true },
+                    React__default.createElement(Grid$1, { item: true, md: 12 }, views.length ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
+                        (React__default.createElement("div", null, "No tag views detected, please add one"))))),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement("div", { style: { paddingTop: "1rem" } },
+                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: handleClose }, "Cancel"),
+                    React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
+var useTrendingStyles = makeStyles$1(function (theme) { return ({
+    datetimePicker: {
+        alignItems: "center",
+        "& .MuiInputBase-root": {
+            color: "black",
+            backgroundColor: "white",
+            borderRadius: theme.shape.borderRadius,
+            width: "90%",
+            minWidth: "90%",
+            maxWidth: "90%"
         },
-        backgroundColor: "#e9ecef"
-    },
-    doubleInput: {
-        padding: "0",
-        '& input[type="text"] ': {
-            width: "100%",
-            height: "17px",
-            display: "block",
-            margin: "0",
-            padding: "0"
+        "& .MuiInputBase-input": {
+            fontSize: "13px !important",
+            height: "15px !important",
+            paddingRight: "3px",
+            paddingLeft: "5px"
+        },
+        "& .MuiInput-underline:before": {
+            borderBottomColor: "rgba(0, 0, 0, 0.42)"
         }
     },
-    inputCol: {
-        width: "11.25rem",
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    },
-    autoScale: {
-        width: '7.5rem'
-    },
-    scale: {
-        width: '37.5rem',
-        padding: "0"
-    },
-    visible: {
-        width: '3.75rem'
+    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)"
+        }
     },
-    color: {
-        width: '4.375rem'
+    labelOptions: {
+        paddingLeft: "2rem",
+        userSelect: "none",
+        "& > label": {
+            display: "flex",
+            alignItems: "center",
+            gap: "5px"
+        },
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        }
     },
-    unit: {
-        width: '7.5rem'
+    isPublicCheckbox: {
+        userSelect: "none",
+        paddingLeft: '1rem',
+        "& > label": {
+            display: "flex",
+            alignItems: "center",
+            gap: "15px"
+        },
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        }
     },
-    xStats: {
-    // ...
+    navigatorButton: {
+        "& .MuiSvgIcon-root": {
+            cursor: "pointer !important"
+        }
     }
 }); });
 
-var timeDifference = function (start, end) {
-    var differenceMilliseconds = start - end;
-    var seconds = Math.floor(differenceMilliseconds / 1000);
-    var minutes = Math.floor(seconds / 60);
-    var hours = Math.floor(minutes / 60);
-    var remainingMinutes = minutes % 60;
-    var remainingSeconds = seconds % 60;
-    return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
-};
-
-var TableComponent = function (_a) {
-    var tagList = _a.tagList, setTagList = _a.setTagList, chartData = _a.chartData, cursorData = _a.cursorData;
-    var classes = useTagsTableStyles();
-    var _b = useState(""); _b[0]; _b[1];
-    var dataTable = useTagsDataTable({ tagList: tagList, chartData: chartData, cursorData: cursorData });
-    var _c = useState({}), editableTagNames = _c[0], setEditableTagNames = _c[1];
-    var handleChange = function (index, value, property) {
-        setTagList(function (prev) { return prev.map(function (tag, currentIndex) {
-            var _a;
-            return currentIndex === index ? __assign(__assign({}, tag), (_a = {}, _a[property] = value, _a.autoScale = false, _a)) : tag;
-        }); });
-    };
-    var handleChangeAlias = function (tagId, newName) {
-        setTagList(function (prevTagList) {
-            return prevTagList.map(function (tag) { return (tag.tagId === tagId ? __assign(__assign({}, tag), { tagName: newName }) : tag); });
-        });
-    };
-    var handleVisibilityChange = function (index, value) {
-        setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { visible: value }) : tag; }); });
-    };
-    var handleAutoScaleChange = function (index, value) {
-        setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { autoScale: value }) : tag; }); });
-    };
-    var handleColorChange = function (tagId, value) {
-        setTagList(function (prev) { return prev.map(function (tag) { return tag.tagId === tagId ? __assign(__assign({}, tag), { color: value }) : tag; }); });
-    };
-    var handleDeleteTag = function (tagId) {
-        setTagList(function (prevTagList) {
-            return prevTagList.filter(function (tag) { return tag.tagId !== tagId; });
-        });
-    };
-    var handleAddTag = function (newTag) {
-        if (newTag) {
-            setTagList(function (prevTagList) {
-                // Check if the tag is already in the list to avoid duplicates
-                if (prevTagList.some(function (tag) { return tag.tagId === newTag.tagId; })) {
-                    return prevTagList; // Return the existing list if the tag is already there
-                }
-                return __spreadArray(__spreadArray([], prevTagList, true), [newTag], false); // Add the new tag to the list
-            });
-        }
-    };
-    var _d = useState(null), selectedRowIndex = _d[0], setSelectedRowIndex = _d[1];
-    var _e = useState(false), addTagModalOpen = _e[0], setAddTagModalOpen = _e[1];
-    var handleClose = function () { return setAddTagModalOpen(false); };
-    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)); }))));
-    };
-    // Position state for the context menu
-    var _f = useState({ x: 0, y: 0 }), contextMenuPosition = _f[0], setContextMenuPosition = _f[1];
-    var contextMenuOptions = [
-        { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
-        { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
-        { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { } },
-        { id: 'saveAsView', label: 'Save as View', onClick: function () { } },
-        { id: 'loadView', label: 'Load View', onClick: function () { } },
-    ];
-    var handleTagSelect = function (selectedTag) {
-        handleAddTag(selectedTag);
-        handleClose();
-    };
-    var handleDelete = function (index) {
-        if (selectedRowIndex !== null) {
-            var tagToDelete = tagList[selectedRowIndex];
-            handleDeleteTag(tagToDelete.tagId);
-            setSelectedRowIndex(null); // Reset the selected row index
-        }
-    };
-    useEffect(function () {
-        setEditableTagNames(tagList.reduce(function (acc, tag) {
-            acc[tag.tagId] = tag.tagName;
-            return acc;
-        }, {}));
-    }, [tagList]);
-    useEffect(function () {
-        var handleGlobalClick = function (e) {
-            if (selectedRowIndex !== null) {
-                setSelectedRowIndex(null);
-            }
-        };
-        var handleKeyDown = function (e) {
-            if (e.key === "Escape" && selectedRowIndex !== null) {
-                setSelectedRowIndex(null);
+var SaveAsViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose;
+    var classes = useTrendingStyles();
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var viewTags = useTrendingContext().state.viewTags;
+    var _d = useState(true), isPublic = _d[0], setIsPublic = _d[1];
+    var _e = useState(''), viewName = _e[0], setViewName = _e[1];
+    var handleCheck = function () { return setIsPublic(!isPublic); };
+    var handleInputChange = function (e) { return setViewName(e.target.value); };
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, ViewId_1, results;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    return [4 /*yield*/, upsertView(null, viewName, isPublic)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 3];
+                    ViewId_1 = resp.data.returnValue;
+                    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;
+                            upsertViewTag(ViewId_1, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale)
+                                .then(function (r) {
+                                if (!r.ok) {
+                                    setError(r.message);
+                                }
+                            });
+                        }))];
+                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();
+                        }
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(resp.message);
+                    _a.label = 4;
+                case 4:
+                    setIsLoading(false);
+                    return [2 /*return*/];
             }
-        };
-        // Attach event listeners
-        document.addEventListener("click", handleGlobalClick);
-        document.addEventListener("keydown", handleKeyDown);
-        // Cleanup function
-        return function () {
-            document.removeEventListener("click", handleGlobalClick);
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [selectedRowIndex]);
-    var handleRowClick = function (index) {
-        setSelectedRowIndex(index);
-    };
-    var handleRightClick = function (event, index) {
-        event.preventDefault();
-        event.stopPropagation(); // Prevent the click event from propagating to the document
-        setSelectedRowIndex(index);
-        setContextMenuPosition({ x: event.clientX, y: event.clientY });
-    };
-    return (React__default.createElement(Grid$1, { container: true, spacing: 1 },
-        React__default.createElement(Grid$1, { item: true, xs: 12 },
-            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 }),
-                            React__default.createElement("th", { className: classes.inputCol }),
-                            React__default.createElement("th", { className: classes.color }),
-                            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 date = new Date(cursorData.x1);
-                                var formattedDate = date.toLocaleString('en-US', {
-                                    hour12: false,
-                                    month: 'short',
-                                    day: 'numeric',
-                                    hour: '2-digit',
-                                    minute: '2-digit',
-                                    second: '2-digit'
-                                });
-                                var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
-                                var dateText = "".concat(formattedDate, ".").concat(milliseconds);
-                                return (React__default.createElement(React__default.Fragment, null,
-                                    React__default.createElement("span", { style: {
-                                            height: '10px',
-                                            width: '10px',
-                                            backgroundColor: "red",
-                                            borderRadius: '50%',
-                                            display: 'inline-block',
-                                            marginRight: '5px'
-                                        } }),
-                                    dateText));
-                            })() : null),
-                            React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
-                                var date = new Date(cursorData.x2);
-                                var formattedDate = date.toLocaleString('en-US', {
-                                    hour12: false,
-                                    month: 'short',
-                                    day: 'numeric',
-                                    hour: '2-digit',
-                                    minute: '2-digit',
-                                    second: '2-digit'
-                                });
-                                var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
-                                var dateText = "".concat(formattedDate, ".").concat(milliseconds);
-                                return (React__default.createElement(React__default.Fragment, null,
-                                    React__default.createElement("span", { style: {
-                                            height: '10px',
-                                            width: '10px',
-                                            backgroundColor: "blue",
-                                            borderRadius: '50%',
-                                            display: 'inline-block',
-                                            marginRight: '5px'
-                                        } }),
-                                    dateText));
-                            })() : null),
-                            React__default.createElement("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? timeDifference(cursorData.x2, cursorData.x1) : null)))),
-                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.inputCol }, "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.unit }, "Unit"),
-                            React__default.createElement("th", { className: classes.autoScale }, "AutoScale"),
-                            React__default.createElement("th", null, " "),
-                            React__default.createElement("th", null),
-                            React__default.createElement("th", null, "Y2-Y1"),
-                            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("table", { cellPadding: '4px', style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
-                    React__default.createElement("tbody", null, tagList.map(function (tag, index) {
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        return (React__default.createElement("tr", { key: tag.tagName, onClick: function () { return handleRowClick(index); }, onContextMenu: function (e) { return handleRightClick(e, index); }, className: classes.rowHover },
-                            React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
-                                React__default.createElement("input", { type: "checkbox", checked: tag.visible, onChange: function (e) { return handleVisibilityChange(index, e.target.checked); } })),
-                            React__default.createElement("td", { className: classes.inputCol },
-                                React__default.createElement(Tooltip, { title: tag.tagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
-                                    React__default.createElement("div", null,
-                                        React__default.createElement("input", { type: "text", style: { width: '100%' }, value: editableTagNames[tag.tagId] || '', onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
-                                                var _a;
-                                                setEditableTagNames(__assign(__assign({}, editableTagNames), (_a = {}, _a[tag.tagId] = e.target.value, _a)));
-                                            }, onKeyDown: function (e) {
-                                                if (e.key === 'Enter') {
-                                                    handleChangeAlias(tag.tagId, editableTagNames[tag.tagId]);
-                                                }
-                                            } })))),
-                            React__default.createElement("td", { className: classes.color },
-                                React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.color, elementId: tag.tagId })),
-                            React__default.createElement("td", { className: classes.inputCol },
-                                React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: tag.autoScale, value: tag.minScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
-                                        var value = e.target.value;
-                                        var numericValue = Number(value);
-                                        // Check if the value is a number and not empty
-                                        handleChange(index, numericValue, 'minScale');
-                                    } })),
-                            React__default.createElement("td", { className: classes.inputCol },
-                                React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: tag.autoScale, value: tag.maxScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
-                                        var value = e.target.value;
-                                        var numericValue = Number(value);
-                                        // Check if the value is a number and not empty
-                                        if (!isNaN(numericValue) && value.trim() !== '') {
-                                            handleChange(index, numericValue, 'maxScale');
-                                        }
-                                    } })),
-                            React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
-                                React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: true, value: /* tag.unit */ "Unit ", onFocus: function (e) { return e.target.select(); } })),
-                            React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
-                                React__default.createElement("input", { type: "checkbox", checked: tag.autoScale, onChange: function (e) { return handleAutoScaleChange(index, e.target.checked); } })),
-                            React__default.createElement("td", null, (_a = dataTable[tag.tagName]) === null || _a === void 0 ? void 0 : _a.y1),
-                            React__default.createElement("td", { className: classes.doubleInput }, (_b = dataTable[tag.tagName]) === null || _b === void 0 ? void 0 : _b.y2),
-                            React__default.createElement("td", null, (_c = dataTable[tag.tagName]) === null || _c === void 0 ? void 0 : _c.y2y1),
-                            React__default.createElement("td", null,
-                                !isNaN(((_d = dataTable[tag.tagName]) === null || _d === void 0 ? void 0 : _d.pmin.y) * 0) ? (_e = dataTable[tag.tagName]) === null || _e === void 0 ? void 0 : _e.pmin.y : 0,
-                                " "),
-                            React__default.createElement("td", null,
-                                !isNaN(((_f = dataTable[tag.tagName]) === null || _f === void 0 ? void 0 : _f.pmax.y) * 0) ? (_g = dataTable[tag.tagName]) === null || _g === void 0 ? void 0 : _g.pmax.y : 0,
-                                " ")));
-                    }))))),
-        selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
-        React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect })));
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(TextField, { size: 'small', id: "outlined-basic", label: "View Name", variant: "outlined", value: viewName, onChange: handleInputChange, style: { width: "100%" } }))),
+                React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
+                    React__default.createElement("label", null,
+                        "Public",
+                        React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck })))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: handleClose }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var TrendingsInitialState = {
-    timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
-    timeScopeEnd: new Date(),
-    scope: "1 day",
-    graphPan: false
-};
-var TrendingsReducer = createSlice({
-    name: "__",
-    initialState: TrendingsInitialState,
-    reducers: {
-        setTotalScope: function (state, _a) {
-            var payload = _a.payload; _a.type;
-            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.scope)) {
-                //from arrow navigators
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                state.scope = payload.scope;
-                return;
-            }
-            if (!isNil$1(payload.scope)) {
-                if (payload.scope !== "custom") {
-                    switch (payload.scope) {
-                        case "10 min":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeStart = moment(state.timeScopeEnd)
-                                .subtract(10, "days")
-                                .toDate();
-                            break;
-                    }
-                }
-                state.scope = payload.scope;
-                return;
-            }
-            if (!isNil$1(payload.start) && !isNil$1(payload.end) && isNil$1(payload.graphPan)) {
-                // from zoom
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                state.scope = "custom";
-                return;
-            }
-            if (!isNil$1(payload.start) && !isNil$1(payload.end) && !isNil$1(payload.graphPan)) {
-                // from pan
-                state.timeScopeStart = payload.start;
-                state.timeScopeEnd = payload.end;
-                return;
-            }
-            if (!isNil$1(payload.start)) {
-                state.timeScopeStart = payload.start;
-                if (state.scope !== "custom") {
-                    switch (state.scope) {
-                        case "10 min":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeEnd = moment(payload.start)
-                                .add(10, "days")
-                                .toDate();
-                            break;
+var useTagsDataTable = function (_a) {
+    var cursorData = _a.cursorData, viewTags = _a.viewTags, chartData = _a.chartData;
+    return useMemo(function () {
+        var _a;
+        var dataTable = {};
+        if (cursorData) {
+            var _loop_1 = function (idx) {
+                var tag = viewTags[idx];
+                var datasetForTag = ((_a = chartData.datasets.find(function (ds) {
+                    return ds.tagId === (tag === null || tag === void 0 ? void 0 : tag.TagId);
+                })) === null || _a === void 0 ? void 0 : _a.data) || [];
+                var p1 = { x: new Date('1900-01-01'), y: 0 };
+                var p2 = { x: new Date('1900-01-01'), y: 0 };
+                var p1Found = false;
+                var pmin = { x: 0, y: Number.POSITIVE_INFINITY };
+                var pmax = { x: 0, y: Number.NEGATIVE_INFINITY };
+                for (var idx_1 = 0; idx_1 < datasetForTag.length; idx_1++) {
+                    var curr = datasetForTag[idx_1];
+                    var currentVal = curr.x;
+                    if (!p1Found) {
+                        if (currentVal < cursorData.x1) {
+                            p1 = curr;
+                            p2 = JSON.parse(JSON.stringify(p1));
+                            pmin = JSON.parse(JSON.stringify(p1));
+                            pmax = JSON.parse(JSON.stringify(p1));
+                            continue;
+                        }
+                        else {
+                            p1Found = true;
+                        }
                     }
-                }
-                return;
-            }
-            if (!isNil$1(payload.end)) {
-                state.timeScopeEnd = payload.end;
-                if (state.scope !== "custom") {
-                    switch (state.scope) {
-                        case "10 min":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(10, "minutes")
-                                .toDate();
-                            break;
-                        case "1 hour":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(1, "hours")
-                                .toDate();
-                            break;
-                        case "4 hours":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(4, "hours")
-                                .toDate();
-                            break;
-                        case "12 hours":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(12, "hours")
-                                .toDate();
-                            break;
-                        case "1 day":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(1, "days")
-                                .toDate();
-                            break;
-                        case "10 days":
-                            state.timeScopeStart = moment(payload.end)
-                                .subtract(10, "days")
-                                .toDate();
+                    else {
+                        if (currentVal < cursorData.x2) {
+                            p2 = curr;
+                            if (pmin['y'] > curr['y']) {
+                                pmin = JSON.parse(JSON.stringify(curr));
+                            }
+                            if (pmax['y'] < curr['y']) {
+                                pmax = JSON.parse(JSON.stringify(curr));
+                            }
+                        }
+                        else {
                             break;
+                        }
                     }
                 }
-                return;
+                dataTable[tag === null || tag === void 0 ? void 0 : tag.TagName] = {
+                    y1: p1.y,
+                    y2: p2.y,
+                    y2y1: Number(p2.y) - Number(p1.y),
+                    pmin: pmin,
+                    pmax: pmax
+                };
+            };
+            for (var idx = 0; idx < viewTags.length; idx++) {
+                _loop_1(idx);
             }
         }
+        return dataTable;
+    }, [viewTags, chartData, cursorData]);
+};
+
+var useTagsTableStyles = makeStyles$1(function (theme) { return ({
+    checkbox: {
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        },
+        textAlign: 'center'
+    },
+    rowHover: {
+        '&:hover': {
+            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"] ': {
+            width: "100%",
+            height: "17px",
+            display: "block",
+            margin: "0",
+            padding: "0"
+        }
+    },
+    inputCol: {
+        width: "11.25rem",
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    autoScale: {
+        width: '7.5rem'
+    },
+    scale: {
+        width: '37.5rem',
+        padding: "0"
+    },
+    visible: {
+        width: '3.75rem'
+    },
+    color: {
+        width: '4.375rem'
+    },
+    unit: {
+        width: '7.5rem'
+    },
+    xStats: {
+    // ...
     }
-});
+}); });
 
-var TrendingContext = createContext({
-    state: TrendingsReducer.getInitialState(),
-    actions: TrendingsReducer.actions
-});
-var useTrendingContext = function () { return useContext(TrendingContext); };
-var TrendingProvider = function (_a) {
-    var children = _a.children;
-    var _b = useComplexState({
-        initialState: TrendingsReducer.getInitialState(),
-        reducers: TrendingsReducer.caseReducers
-    }), state = _b[0], actions = _b[1];
-    return (React__default.createElement(TrendingContext.Provider, { value: { state: state, actions: actions } }, children));
+var timeDifference = function (start, end) {
+    var differenceMilliseconds = start - end;
+    var seconds = Math.floor(differenceMilliseconds / 1000);
+    var minutes = Math.floor(seconds / 60);
+    var hours = Math.floor(minutes / 60);
+    var remainingMinutes = minutes % 60;
+    var remainingSeconds = seconds % 60;
+    return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
+};
+
+var TableComponent = function (_a) {
+    var chartData = _a.chartData, cursorData = _a.cursorData;
+    var classes = useTagsTableStyles();
+    var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setGraphShouldUpdate = _d.setGraphShouldUpdate;
+    var _e = useState(''), error = _e[0], setError = _e[1];
+    var dataTable = useTagsDataTable({ viewTags: viewTags, chartData: chartData, cursorData: cursorData });
+    var _f = useState({}), editableTagNames = _f[0], setEditableTagNames = _f[1];
+    var handleChange = function (tagId, value, property) {
+        var newTags = viewTags.map(function (tag) {
+            var _a;
+            return tag.TagId === tagId ? __assign(__assign({}, tag), (_a = {}, _a[property] = value, _a.IsAutoScale = false, _a)) : tag;
+        });
+        setViewTags(newTags);
+        setGraphShouldUpdate();
+    };
+    var handleChangeAlias = function (tagId, newName) {
+        var newTags = viewTags.map(function (tag) { return (tag.TagId === tagId ? __assign(__assign({}, tag), { Alias: newName }) : tag); });
+        setViewTags(newTags);
+    };
+    var handleVisibilityChange = function (tagId, value) {
+        var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { IsVisible: value }) : tag; });
+        setViewTags(newTags);
+    };
+    var handleAutoScaleChange = function (tagId, checked) {
+        var newTags = viewTags.map(function (t) { return t.TagId == tagId ? __assign(__assign({}, t), { IsAutoScale: !checked }) : t; });
+        setViewTags(newTags);
+    };
+    var handleColorChange = function (tagId, value) {
+        var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { Color: value }) : tag; });
+        setViewTags(newTags);
+    };
+    var handleDeleteTag = function (tagId) {
+        var newTags = viewTags.filter(function (tag) { return tag.TagId !== tagId; });
+        setViewTags(newTags);
+    };
+    var handleAddTag = function (newTag) {
+        var newArr = __spreadArray([], viewTags, true);
+        if (newTag) {
+            newArr.push(newTag);
+            setViewTags(newArr);
+        }
+    };
+    var handleAbleScales = function (tagId, checked) {
+        if (checked) {
+            handleAutoScaleChange(tagId, checked);
+        }
+    };
+    var _g = useState(null), selectedRowIndex = _g[0], setSelectedRowIndex = _g[1];
+    var _h = useState(false), addTagModalOpen = _h[0], setAddTagModalOpen = _h[1];
+    var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
+    var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
+    var handleClose = function () { return setAddTagModalOpen(false); };
+    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)); }))));
+    };
+    // Position state for the context menu
+    var _l = useState({ x: 0, y: 0 }), contextMenuPosition = _l[0], setContextMenuPosition = _l[1];
+    var contextMenuOptions = [
+        { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
+        { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
+        { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { return handleSaveDefaultToTag(); } },
+        { id: 'saveAsView', label: 'Save as View', onClick: function () { return setSaveAsViewModalOpen(true); } },
+        { id: 'loadView', label: 'Load View', onClick: function () { return setLoadViewOpen(true); } },
+    ];
+    var handleTagSelect = function (selectedTag) {
+        handleAddTag(selectedTag);
+        handleClose();
+    };
+    var handleDelete = function (index) {
+        if (selectedRowIndex !== null) {
+            var tagToDelete = viewTags[selectedRowIndex];
+            handleDeleteTag(tagToDelete.TagId);
+            setSelectedRowIndex(null); // Reset the selected row index
+        }
+    };
+    useEffect(function () {
+        if (Array.isArray(viewTags)) {
+            setEditableTagNames(viewTags.reduce(function (acc, tag) {
+                acc[tag.TagId] = tag.Alias || tag.TagName;
+                return acc;
+            }, {}));
+        }
+    }, [viewTags]);
+    useEffect(function () {
+        var handleGlobalClick = function (e) {
+            if (selectedRowIndex !== null) {
+                setSelectedRowIndex(null);
+            }
+        };
+        var handleKeyDown = function (e) {
+            if (e.key === "Escape" && selectedRowIndex !== null) {
+                setSelectedRowIndex(null);
+            }
+        };
+        // Attach event listeners
+        document.addEventListener("click", handleGlobalClick);
+        document.addEventListener("keydown", handleKeyDown);
+        // Cleanup function
+        return function () {
+            document.removeEventListener("click", handleGlobalClick);
+            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);
+        setContextMenuPosition({ x: event.clientX, y: event.clientY });
+    };
+    var handleSaveDefaultToTag = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var promises, allResponses, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, 3, 4]);
+                    promises = viewTags.map(function (vt) { return __awaiter(void 0, void 0, void 0, function () {
+                        var response;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, saveTagDefaults(vt.TagId, vt.Alias, vt.Color, vt.MinScale, vt.MaxScale, vt.Unit)];
+                                case 1:
+                                    response = _a.sent();
+                                    return [2 /*return*/, response];
+                            }
+                        });
+                    }); });
+                    return [4 /*yield*/, Promise.all(promises)];
+                case 1:
+                    allResponses = _a.sent();
+                    allResponses.forEach(function (r) {
+                        if (!r.ok) {
+                            setError(r.message);
+                        }
+                    });
+                    return [3 /*break*/, 4];
+                case 2:
+                    error_1 = _a.sent();
+                    setError(error_1.message);
+                    return [3 /*break*/, 4];
+                case 3:
+                    setSelectedRowIndex(null);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    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("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 }, "View:"),
+                                React__default.createElement("th", { className: classes.inputCol }, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
+                                React__default.createElement("th", { className: classes.color }),
+                                React__default.createElement("th", { colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
+                                React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
+                                    var date = new Date(cursorData.x1);
+                                    var formattedDate = date.toLocaleString('en-US', {
+                                        hour12: false,
+                                        month: 'short',
+                                        day: 'numeric',
+                                        hour: '2-digit',
+                                        minute: '2-digit',
+                                        second: '2-digit'
+                                    });
+                                    var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+                                    var dateText = "".concat(formattedDate, ".").concat(milliseconds);
+                                    return (React__default.createElement(React__default.Fragment, null,
+                                        React__default.createElement("span", { style: {
+                                                height: '10px',
+                                                width: '10px',
+                                                backgroundColor: "red",
+                                                borderRadius: '50%',
+                                                display: 'inline-block',
+                                                marginRight: '5px'
+                                            } }),
+                                        dateText));
+                                })() : null),
+                                React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
+                                    var date = new Date(cursorData.x2);
+                                    var formattedDate = date.toLocaleString('en-US', {
+                                        hour12: false,
+                                        month: 'short',
+                                        day: 'numeric',
+                                        hour: '2-digit',
+                                        minute: '2-digit',
+                                        second: '2-digit'
+                                    });
+                                    var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+                                    var dateText = "".concat(formattedDate, ".").concat(milliseconds);
+                                    return (React__default.createElement(React__default.Fragment, null,
+                                        React__default.createElement("span", { style: {
+                                                height: '10px',
+                                                width: '10px',
+                                                backgroundColor: "blue",
+                                                borderRadius: '50%',
+                                                display: 'inline-block',
+                                                marginRight: '5px'
+                                            } }),
+                                        dateText));
+                                })() : null),
+                                React__default.createElement("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? timeDifference(cursorData.x2, cursorData.x1) : null)))),
+                    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.inputCol }, "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.unit }, "Unit"),
+                                React__default.createElement("th", { className: classes.autoScale }, "AutoScale"),
+                                React__default.createElement("th", null, " "),
+                                React__default.createElement("th", null),
+                                React__default.createElement("th", null, "Y2-Y1"),
+                                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("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;
+                            return (React__default.createElement("tr", { key: tag.TagName, 
+                                // onClick={() => handleRowClick(index)}
+                                onContextMenu: function (e) { return handleRightClick(e, index); }, 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("td", { className: classes.inputCol },
+                                    React__default.createElement(Tooltip, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
+                                        React__default.createElement("div", null,
+                                            React__default.createElement("input", { type: "text", style: { width: '100%' }, value: editableTagNames[tag.TagId], onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                                                    var _a;
+                                                    setEditableTagNames(__assign(__assign({}, editableTagNames), (_a = {}, _a[tag.TagId] = e.target.value, _a)));
+                                                }, onKeyDown: function (e) {
+                                                    if (e.key === 'Enter') {
+                                                        handleChangeAlias(tag.TagId, editableTagNames[tag.TagId]);
+                                                    }
+                                                } })))),
+                                React__default.createElement("td", { className: classes.color },
+                                    React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.Color, elementId: tag.TagId })),
+                                React__default.createElement("td", { className: classes.inputCol },
+                                    React__default.createElement("input", { type: "text", style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
+                                            backgroundColor: 'rgba(239, 239, 239, 0.3)',
+                                            color: 'rgba(84, 84, 84, 1)',
+                                            border: '1px solid rgba(118, 118, 118, 0.3)'
+                                        } : {})), value: tag.MinScale, onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                                            var value = e.target.value;
+                                            var numericValue = Number(value);
+                                            handleChange(tag.TagId, numericValue, 'MinScale');
+                                        } })),
+                                React__default.createElement("td", { className: classes.inputCol },
+                                    React__default.createElement("input", { type: "text", style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
+                                            backgroundColor: 'rgba(239, 239, 239, 0.3)',
+                                            color: 'rgba(84, 84, 84, 1)',
+                                            border: '1px solid rgba(118, 118, 118, 0.3)'
+                                        } : {})), value: tag.MaxScale, onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                                            var value = e.target.value;
+                                            var numericValue = Number(value);
+                                            // Check if the value is a number and not empty
+                                            if (!isNaN(numericValue) && value.trim() !== '') {
+                                                handleChange(tag.TagId, numericValue, 'MaxScale');
+                                            }
+                                        } })),
+                                React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
+                                    React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: true, value: tag.Unit, onFocus: function (e) { return e.target.select(); } })),
+                                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("td", null, (_a = dataTable[tag.TagName]) === null || _a === void 0 ? void 0 : _a.y1),
+                                React__default.createElement("td", { className: classes.doubleInput }, (_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y2),
+                                React__default.createElement("td", null, (_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2y1),
+                                React__default.createElement("td", null,
+                                    !isNaN(((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.pmin.y) * 0) ? (_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y : 0,
+                                    " "),
+                                React__default.createElement("td", null,
+                                    !isNaN(((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmax.y) * 0) ? (_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y : 0,
+                                    " ")));
+                        }) : React__default.createElement("div", { style: { padding: '2rem' } },
+                            React__default.createElement("div", { style: { padding: "1rem" } }, "No tag view detected. "),
+                            React__default.createElement("div", { style: { padding: "1rem" } },
+                                React__default.createElement(Button$1, { onClick: function () { return setAddTagModalOpen(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 })),
+            React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
+            React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function () { return setSaveAsViewModalOpen(false); } }),
+            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function () { return setLoadViewOpen(false); } })),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
 var formatDateTimeToString = function (date) {
@@ -9199,9 +9586,6 @@ var useChartOptions = function () {
                             }
                         }
                     }
-                    else {
-                        console.log('sin y', keys);
-                    }
                 }
             }
         },
@@ -9225,64 +9609,6 @@ var useChartOptions = function () {
     });
 };
 
-var useTrendingStyles = makeStyles$1(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: "5px"
-        },
-        "& .MuiInput-underline:before": {
-            borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        }
-    },
-    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)"
-        }
-    },
-    labelOptions: {
-        paddingLeft: "2rem",
-        userSelect: "none",
-        "& > label": {
-            display: "flex",
-            alignItems: "center",
-            gap: "5px"
-        },
-        '& input[type="checkbox"]': {
-            zoom: 1.5
-        }
-    },
-    navigatorButton: {
-        "& .MuiSvgIcon-root": {
-            cursor: "pointer !important"
-        }
-    }
-}); });
-
 var CustomOptionsComponent = function (_a) {
     var customOptions = _a.customOptions, setCustomOptions = _a.setCustomOptions;
     var classes = useTrendingStyles();
@@ -9528,11 +9854,13 @@ var useYAxisPlugin = function () {
 };
 
 var areRangesSimilar = function (tag1, tag2) {
-    var range1 = tag1.maxScale - tag1.minScale; // Rango de la primera etiqueta
-    var range2 = tag2.maxScale - tag2.minScale; // Rango de la segunda etiqueta
+    if (isNil$1(tag1.MaxScale) || isNil$1(tag1.MinScale) || isNil$1(tag2.MaxScale) || isNil$1(tag2.MinScale))
+        return;
+    var range1 = tag1.MaxScale - tag1.MinScale; // Rango de la primera etiqueta
+    var range2 = tag2.MaxScale - tag2.MinScale; // Rango de la segunda etiqueta
     // Determina los límites para la comparación
-    var lowerBound = Math.max(tag1.minScale, tag2.minScale);
-    var upperBound = Math.min(tag1.maxScale, tag2.maxScale);
+    var lowerBound = Math.max(tag1.MinScale, tag2.MinScale);
+    var upperBound = Math.min(tag1.MaxScale, tag2.MaxScale);
     // Calcula el solapamiento entre los dos rangos
     var overlap = Math.max(0, upperBound - lowerBound);
     // Determina si el solapamiento es significativo comparado con los rangos individuales
@@ -9540,28 +9868,9 @@ var areRangesSimilar = function (tag1, tag2) {
     return isSignificantOverlap;
 };
 
-var calculateScales = function (min, max, sigDigits) {
-    var roundToSignificantDigits = function (num) {
-        if (num === 0)
-            return 0;
-        var multiplier = Math.pow(10, sigDigits - Math.floor(Math.log10(Math.abs(num))) - 1);
-        return Math.round(num * multiplier) / multiplier;
-    };
-    var minScale = roundToSignificantDigits(min);
-    var maxScale = roundToSignificantDigits(max);
-    // Adjust minScale and maxScale if necessary
-    if (minScale > min) {
-        minScale *= 0.9;
-    }
-    if (maxScale < max) {
-        maxScale *= 1.1;
-    }
-    return { minScale: minScale, maxScale: maxScale };
-};
-
 var TrendingChart = function (_a) {
-    var tagList = _a.tagList, series = _a.series, chartOptions = _a.chartOptions, setChartOptions = _a.setChartOptions, chartData = _a.chartData, setCursorData = _a.setCursorData, setChartData = _a.setChartData;
-    var _b = useTrendingContext(), state = _b.state; _b.actions;
+    var series = _a.series, chartOptions = _a.chartOptions, setChartOptions = _a.setChartOptions, chartData = _a.chartData, setCursorData = _a.setCursorData, setChartData = _a.setChartData;
+    var _b = useTrendingContext(), state = _b.state, viewTags = _b.state.viewTags; _b.actions;
     var _c = useState(null), lineTabCoords = _c[0], setLineTabCoords = _c[1];
     var _d = useState(null), chartArea = _d[0], setChartArea = _d[1];
     var chartRef = useRef(null);
@@ -9575,58 +9884,62 @@ var TrendingChart = function (_a) {
     var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
     var xAxisDatePlugin = useXAxisDatePlugin();
     var yAxisPlugin = useYAxisPlugin();
+    var seriesVsTags = useRef({});
     useEffect(function () {
         var axes = [];
         if (!series.length) {
             return;
         }
-        tagList.forEach(function (tag, index) {
-            if (series[index].length) {
-                if (tag.autoScale && series[index]) {
-                    var serieSamples = series[index].map(function (sample) { return sample.value; });
-                    var _a = calculateScales(Math.min.apply(Math, serieSamples), Math.max.apply(Math, serieSamples), 3), minScale = _a.minScale, maxScale = _a.maxScale;
-                    tag.minScale = minScale;
-                    tag.maxScale = maxScale;
-                }
-                var existingAxis = axes.find(function (existingTag) {
-                    return areRangesSimilar(existingTag, tag);
-                });
-                if (!existingAxis) {
-                    axes.push(tag); // Add new axis if no similar one exists
-                }
+        viewTags.forEach(function (tag, index) {
+            var existingAxis = axes.findIndex(function (existingTag) {
+                return areRangesSimilar(existingTag, tag);
+            });
+            if (existingAxis === -1) {
+                axes.push(tag); // Add new axis if no similar one exists
+                seriesVsTags.current[tag.TagId] = tag.TagId;
+            }
+            else {
+                seriesVsTags.current[tag.TagId] = axes[existingAxis].TagId;
             }
         });
         // Configure yAxes based on grouped axes
-        var yAxesConfig = axes.map(function (axis, index) {
+        var yAxesConfig = axes.map(function (axis) {
             return {
-                id: "y-axis-".concat(index),
+                id: "y-axis-".concat(axis.TagId),
                 type: "linear",
-                display: axis.visible,
+                display: axis.IsVisible,
                 scaleLabel: {
                     display: true,
-                    labelString: axis.tagName
-                },
-                ticks: {
-                    min: axis.autoScale ? undefined : axis.minScale,
-                    max: axis.autoScale ? undefined : axis.maxScale
+                    labelString: axis.TagName
                 },
+                min: axis.IsAutoScale ? undefined : axis.MinScale,
+                max: axis.IsAutoScale ? undefined : axis.MaxScale,
+                suggestedMin: axis.IsAutoScale ? undefined : axis.MinScale,
+                suggestedMax: axis.IsAutoScale ? undefined : axis.MaxScale,
+                stepSize: 10,
                 grid: {
                     display: true
                 },
-                afterUpdate: function (axis) {
-                    var chart = axis.chart;
+                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;
+                            }
                         }
                     }
                 }
@@ -9640,19 +9953,17 @@ var TrendingChart = function (_a) {
             return newResp;
         });
         var updatedSeries = series.map(function (serie, index) {
-            var tag = tagList[index];
-            var axisIndex = axes.findIndex(function (existingTag) {
-                return areRangesSimilar(existingTag, tag);
-            });
+            var tag = viewTags[index];
+            var yAxisTagId = seriesVsTags.current[tag.TagId];
             return {
-                yAxisID: axisIndex >= 0 ? "y-axis-".concat(axisIndex) : undefined,
+                yAxisID: "y-axis-".concat(yAxisTagId),
                 data: serie.map(function (sample) { return ({
                     x: new Date(sample.timestamp),
                     y: sample.value
                 }); }),
-                tagId: tag.tagId,
-                borderColor: tag.color,
-                hidden: !tag.visible,
+                tagId: tag === null || tag === void 0 ? void 0 : tag.TagId,
+                borderColor: tag === null || tag === void 0 ? void 0 : tag.Color,
+                hidden: !(tag === null || tag === void 0 ? void 0 : tag.IsVisible),
                 pointRadius: serie.length <= 50 ? 3 : 0
             };
         });
@@ -9661,7 +9972,7 @@ var TrendingChart = function (_a) {
             labels: [],
             datasets: updatedSeries
         });
-    }, [JSON.stringify(state), tagList, series]);
+    }, [state.graphShouldUpdate, series]);
     useEffect(function () {
         if (chartShouldInitCursors) {
             if (chartRef.current) {
@@ -9669,7 +9980,7 @@ var TrendingChart = function (_a) {
                 chartRef.current.update();
             }
         }
-    }, [chartShouldInitCursors, state]);
+    }, [chartShouldInitCursors, state.graphShouldUpdate]);
     return (React__default.createElement(Paper$1, { 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, onUpdate: function (newLeft) {
                 setLineTabCoords(function (prevCoords) {
@@ -9694,18 +10005,17 @@ var TrendingChart = function (_a) {
 
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
 var Trending = function (_a) {
-    _a.title; var tags = _a.tags;
-    var _b = useTrendingContext(), state = _b.state; _b.actions;
-    var _c = useState(true), loading = _c[0], setLoading = _c[1];
-    var _d = useState(""), error = _d[0], setError = _d[1];
-    var _e = useState(tags), tagList = _e[0], setTagList = _e[1];
-    var _f = useState([]), series = _f[0], setSeries = _f[1];
-    var _g = useChartOptions(), chartOptions = _g[0], setChartOptions = _g[1];
-    var _h = useState({
+    _a.title;
+    var _b = useTrendingContext(), state = _b.state, viewTags = _b.state.viewTags;
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var _d = useState(true), loading = _d[0], setLoading = _d[1];
+    var _e = useState([]), series = _e[0], setSeries = _e[1];
+    var _f = useChartOptions(), chartOptions = _f[0], setChartOptions = _f[1];
+    var _g = useState({
         labels: [],
         datasets: []
-    }), chartData = _h[0], setChartData = _h[1];
-    var _j = useState(null), cursorData = _j[0], setCursorData = _j[1];
+    }), chartData = _g[0], setChartData = _g[1];
+    var _h = useState(null), cursorData = _h[0], setCursorData = _h[1];
     var debounceForFetchingData = useRef(null);
     useEffect(function () {
         if (debounceForFetchingData.current) {
@@ -9717,10 +10027,10 @@ var Trending = function (_a) {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            _a.trys.push([0, 2, , 3]);
-                            console.log("fetching data");
+                            _a.trys.push([0, 3, , 4]);
                             setLoading(true);
-                            tagIds = tagList.map(function (tag) { return tag.tagId; });
+                            if (!(Array.isArray(viewTags) && viewTags.length)) return [3 /*break*/, 2];
+                            tagIds = viewTags.map(function (tag) { return tag.TagId; });
                             return [4 /*yield*/, axios.post("/series?nodeName=null", {
                                     start: state.timeScopeStart.getTime(),
                                     end: state.timeScopeEnd.getTime(),
@@ -9730,84 +10040,81 @@ var Trending = function (_a) {
                         case 1:
                             response = _a.sent();
                             setSeries(response.data || []);
-                            setLoading(false);
-                            return [3 /*break*/, 3];
+                            _a.label = 2;
                         case 2:
+                            setLoading(false);
+                            return [3 /*break*/, 4];
+                        case 3:
                             error_1 = _a.sent();
-                            console.error("Error fetching data:", error_1);
-                            setError("Failed to fetch data");
+                            setError(error_1.message);
                             setLoading(false);
-                            return [3 /*break*/, 3];
-                        case 3: return [2 /*return*/];
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
                     }
                 });
             }); };
             fetchData();
         }, 800);
-    }, [JSON.stringify(state), tagList]);
-    if (error)
-        return React__default.createElement("p", null,
-            "Error: ",
-            error);
-    return (React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "81svh", margin: 0 } },
-        React__default.createElement(Header, { setChartOptions: setChartOptions }),
-        React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
-            React__default.createElement(TrendingChart, { setChartData: setChartData, series: series, tagList: tagList, chartOptions: chartOptions, setChartOptions: setChartOptions, chartData: chartData, setCursorData: setCursorData })),
-        React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
-            React__default.createElement(TableComponent, { tagList: tagList, chartData: chartData, setTagList: setTagList, cursorData: cursorData })),
-        loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
-            React__default.createElement("p", null, "Loading...")))));
+    }, [state.graphShouldUpdate, viewTags]);
+    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(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 })),
+            loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
+                React__default.createElement("p", null, "Loading...")))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, title: "ERROR" })));
 };
 
-// @flow
-var TrendingsIndex = function (props) {
-    return (React.createElement(TrendingProvider, null,
-        React.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
-            React.createElement(Paper, null,
-                React.createElement(Grid$1, { container: true, spacing: 3, style: { padding: "20px" } },
-                    React.createElement(Grid$1, { item: true, xs: 12 },
-                        React.createElement(Trending, { title: "Trending Chart", tags: [
-                                {
-                                    tagId: 29,
-                                    tagName: "t1",
-                                    tagType: "number",
-                                    color: "red",
-                                    autoScale: true,
-                                    minScale: 0,
-                                    maxScale: 100,
-                                    visible: true
-                                },
-                                {
-                                    tagId: 44,
-                                    tagName: "t2",
-                                    tagType: "number",
-                                    color: "blue",
-                                    autoScale: true,
-                                    minScale: 0,
-                                    maxScale: 100,
-                                    visible: true
-                                },
-                                {
-                                    tagId: 50,
-                                    tagName: "t3",
-                                    tagType: "number",
-                                    color: "green",
-                                    autoScale: true,
-                                    minScale: 0,
-                                    maxScale: 100,
-                                    visible: true
-                                },
-                                {
-                                    tagId: 46,
-                                    tagName: "t4",
-                                    tagType: "number",
-                                    color: "black",
-                                    autoScale: true,
-                                    minScale: 0,
-                                    maxScale: 100,
-                                    visible: true
-                                },
-                            ] })))))));
+var TrendingsPage = function (props) {
+    var _a = useState(''), error = _a[0], setError = _a[1];
+    var _b = useTrendingContext().actions, setViews = _b.setViews, setViewTags = _b.setViewTags, setViewSelected = _b.setViewSelected;
+    useEffect(function () {
+        var getTags = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var viewsResp, lastCreated, viewTagsResp;
+            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];
+                        setViews(viewsResp.data.tables[0].rows);
+                        lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
+                        //viewSelected
+                        setViewSelected(lastCreated);
+                        return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
+                    case 2:
+                        viewTagsResp = _a.sent();
+                        if (viewTagsResp.ok) {
+                            setViewTags(viewTagsResp.data.tables[0].rows);
+                        }
+                        else {
+                            setError(viewTagsResp.message);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setError(viewsResp.message);
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        getTags();
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
+            React__default.createElement(Paper, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 3, style: { padding: "20px" } },
+                    React__default.createElement(Grid$1, { item: true, xs: 12 },
+                        React__default.createElement(Trending, { title: "Trending Chart" }))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, size: "xl", title: "ERROR" })));
+};
+
+var index = function () {
+    return (React__default.createElement(TrendingProvider, null,
+        React__default.createElement(TrendingsPage, null)));
 };
 
 var MESFMainRouter = function () {
@@ -9817,7 +10124,7 @@ var MESFMainRouter = function () {
             React__default.createElement(Route, { path: "/", element: React__default.createElement(Navigate, { replace: true, to: "/home" }) }),
             React__default.createElement(Route, { path: "/configuration/*", element: React__default.createElement(Configuration, null) }),
             React__default.createElement(Route, { path: "/account", element: React__default.createElement(Account, null) }),
-            React__default.createElement(Route, { path: "/trendings", element: React__default.createElement(TrendingsIndex, null) }),
+            React__default.createElement(Route, { path: "/trendings", element: React__default.createElement(index, null) }),
             React__default.createElement(Route, { path: "/home", element: React__default.createElement(Home, null) })),
         React__default.createElement(CustomRoutes, null)));
 };
@@ -10004,5 +10311,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, TrendingsIndex, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, formatNumber, getCrewStyle, getError, getShiftStyle, getTokenFromLS, renewToken, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, TrendingsPage, USER_LABELS, UTLSettingsProvider, UploadFileControl, UserProvider, axiosInstance, formatNumber, getCrewStyle, getError, getShiftStyle, getTokenFromLS, renewToken, useAssetContext, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map