@dexteel/mesf-core 4.5.5 → 4.5.7

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 # CHANGELOG
+## 4.5.6
+ - Fix login with Windows Auth
 ## 4.5.5
  - 115 fix area asset picker
  - 114 fix error modal width

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, Box, IconButton as IconButton$1, FormControl as FormControl$1, Select as Select$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
-import { values, get, isNil as isNil$1, isEmpty } from 'lodash-es';
+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, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { values, get, isNil as isNil$1, isEmpty, debounce } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
@@ -26,11 +26,11 @@ import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement
 import moment from 'moment';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { Line } from 'react-chartjs-2';
+import Popover from '@material-ui/core/Popover';
 import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
-import Popover from '@material-ui/core/Popover';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
@@ -8013,7 +8013,7 @@ function Login(_a) {
     var _c = useState(""), message = _c[0], setMessage = _c[1];
     var useEmailAndPassword = get(authConfig, "useEmailAndPassword", true);
     var useAzureAD = get(authConfig, "useAzureAD", false);
-    get(authConfig, "useWindowsAuth", false);
+    var useWindowsAuth = get(authConfig, "useWindowsAuth", false);
     var guestIsEnabled = get(authConfig, "guestIsEnabled", false);
     var handleClose = function () {
         setOpen(false);
@@ -8037,7 +8037,7 @@ function Login(_a) {
                     React__default.createElement(Paper$1, { elevation: 2 },
                         React__default.createElement("div", { className: "card-header text-center" },
                             React__default.createElement("b", null, "LOGIN")),
-                        React__default.createElement(Grid$1, { container: true, justifyContent: "space-between", alignItems: "center" }, (!useAzureAD && !guestIsEnabled) ? (React__default.createElement(Grid$1, { item: true, xs: 12 },
+                        React__default.createElement(Grid$1, { container: true, justifyContent: "space-between", alignItems: "center" }, (!useAzureAD && !guestIsEnabled && !useWindowsAuth) ? (React__default.createElement(Grid$1, { item: true, xs: 12 },
                             React__default.createElement(Paper$1, { elevation: 2, style: { padding: 40, margin: "40px 40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null)))) : (React__default.createElement(React__default.Fragment, null,
                             React__default.createElement(Grid$1, { item: true, md: 5, xs: 5 },
                                 React__default.createElement(Paper$1, { elevation: 2, style: { padding: 40, margin: "40px -40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null))),
@@ -8348,6 +8348,23 @@ _adapters._date.override(typeof moment === 'function' ? {
 var css$1 = "/* ContextMenu.css */\n.context-menu {\n    position: absolute;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #ddd;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n    .context-menu ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .context-menu li {\n        padding: 8px 15px;\n        cursor: pointer;\n        border-bottom: 1px solid #eee;\n        background-color: #fff;\n        color: #333;\n        font-size: 14px;\n    }\n\n        .context-menu li:hover {\n            background-color: #f5f5f5;\n        }\n\n\n";
 n(css$1,{});
 
+var useTagColorsStyles = makeStyles$1({
+    swatch: {
+        width: '25px',
+        height: '25px',
+        display: 'inline-block',
+        margin: '2px',
+        borderRadius: '4px',
+        cursor: 'pointer'
+    },
+    popover: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        padding: '10px',
+        maxWidth: '165px'
+    }
+});
+
 var tagColors = [
     "#5eaf60",
     "green",
@@ -8366,6 +8383,102 @@ var tagColors = [
     "#bf3b2c", // dark red
 ];
 
+var Swatch = function (_a) {
+    var color = _a.color, onSelect = _a.onSelect;
+    var classes = useTagColorsStyles();
+    return (React__default.createElement("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: function () { return onSelect(color); } }));
+};
+var ColorPicker = function (_a) {
+    var onChange = _a.onChange, color = _a.color, elementId = _a.elementId;
+    var classes = useTagColorsStyles();
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var open = Boolean(anchorEl);
+    var id = open ? 'simple-popover' : undefined;
+    return (React__default.createElement("div", null,
+        React__default.createElement(Button, { "aria-describedby": id, variant: "outlined", onClick: handleClick, style: {
+                backgroundColor: color,
+                width: '20px',
+                height: '20px',
+                minWidth: '20px',
+                padding: 0,
+                margin: '4px'
+            } }),
+        React__default.createElement(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left'
+            } },
+            React__default.createElement("div", { className: classes.popover }, tagColors.map(function (color) { return (React__default.createElement(Swatch, { key: color, color: color, onSelect: function (color) {
+                    onChange(elementId, color);
+                    handleClose();
+                } })); })))));
+};
+
+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 TagSelectionModal = function (_a) {
     var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
@@ -8512,77 +8625,31 @@ var TagSelectionModal = function (_a) {
             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 useTagColorsStyles = makeStyles$1({
-    swatch: {
-        width: '25px',
-        height: '25px',
-        display: 'inline-block',
-        margin: '2px',
-        borderRadius: '4px',
-        cursor: 'pointer'
-    },
-    popover: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        padding: '10px',
-        maxWidth: '165px'
-    }
-});
-
-var Swatch = function (_a) {
-    var color = _a.color, onSelect = _a.onSelect;
-    var classes = useTagColorsStyles();
-    return (React__default.createElement("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: function () { return onSelect(color); } }));
-};
-var ColorPicker = function (_a) {
-    var onChange = _a.onChange, color = _a.color, elementId = _a.elementId;
-    var classes = useTagColorsStyles();
-    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
-    var handleClick = function (event) {
-        setAnchorEl(event.currentTarget);
-    };
-    var handleClose = function () {
-        setAnchorEl(null);
-    };
-    var open = Boolean(anchorEl);
-    var id = open ? 'simple-popover' : undefined;
-    return (React__default.createElement("div", null,
-        React__default.createElement(Button, { "aria-describedby": id, variant: "outlined", onClick: handleClick, style: {
-                backgroundColor: color,
-                width: '20px',
-                height: '20px',
-                minWidth: '20px',
-                padding: 0,
-                margin: '4px'
-            } }),
-        React__default.createElement(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'left'
-            } },
-            React__default.createElement("div", { className: classes.popover }, tagColors.map(function (color) { return (React__default.createElement(Swatch, { key: color, color: color, onSelect: function (color) {
-                    onChange(elementId, color);
-                    handleClose();
-                } })); })))));
+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 }))))));
 };
 
-var useTagsTableStyles = makeStyles$1(function (theme) { return ({
-    checkbox: {
-        '& input[type="checkbox"]': {
-            zoom: 1.5
-        },
-        textAlign: 'center'
-    }
-}); });
-
 var TableComponent = function (_a) {
-    var tagList = _a.tagList, setTagList = _a.setTagList, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
+    var tagList = _a.tagList, setTagList = _a.setTagList; _a.chartData; var cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
     var classes = useTagsTableStyles();
+    var _b = useState(""); _b[0]; _b[1];
+    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; }); });
     };
@@ -8592,10 +8659,9 @@ var TableComponent = function (_a) {
     var handleColorChange = function (tagId, value) {
         setTagList(function (prev) { return prev.map(function (tag) { return tag.tagId === tagId ? __assign(__assign({}, tag), { color: value }) : tag; }); });
     };
-    var _b = useState(null), selectedRowIndex = _b[0], setSelectedRowIndex = _b[1];
-    var _c = useState(false), modalOpen = _c[0], setModalOpen = _c[1];
-    var handleOpen = function () { return setModalOpen(true); };
-    var handleClose = function () { return setModalOpen(false); };
+    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) {
@@ -8605,15 +8671,47 @@ var TableComponent = function (_a) {
             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 _d = useState({ x: 0, y: 0 }), contextMenuPosition = _d[0], setContextMenuPosition = _d[1];
+    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 handleTagAdd(); } },
+        { 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 () { } },
         // ... other options
     ];
-    var handleTagAdd = function () {
-        handleOpen();
-    };
+    // const binarySearch = (arr: any, searchDate: Date): number | null => {
+    //     let left = 0;
+    //     let right = arr.length - 1;
+    //     let closest: number | null = null;  
+    //     if (!arr.length) return null;
+    //     while (left <= right) {
+    //         const mid = Math.floor((left + right) / 2);
+    //         const midDate = arr[mid].x; // Asegúrate de que esto es una instancia de Date
+    //         const midTimestamp = midDate.getTime(); // Esto es un number
+    //         const searchTimestamp = searchDate.getTime(); // Esto también es un number
+    // console.log(midTimestamp, searchTimestamp);
+    //         if (midTimestamp === searchTimestamp) {
+    //             return arr[mid].y;
+    //         } else if (midTimestamp < searchTimestamp) {
+    //             left = mid + 1;
+    //         } else {
+    //             right = mid - 1;
+    //         }
+    //         // Revisa si midDate está más cerca que el 'closest' actual
+    //         if (closest === null || Math.abs(midTimestamp - searchTimestamp) < Math.abs(arr[closest].x.getTime() - searchTimestamp)) {
+    //             closest = mid;
+    //         }
+    //     }
+    //     return closest !== null ? arr[closest].y : null;
+    // };
+    // useEffect(() => {
+    //     if (cursorData) {
+    //         const yValue = binarySearch(chartData.datasets[0]?.data, new Date(cursorData.x1));
+    //         if(yValue)console.log(yValue,"retorna binary")
+    //     }
+    //     else console.log("NULL")
+    // }, [cursorData,chartData.datasets[1]?.data])
     var handleTagSelect = function (selectedTag) {
         onAddTag(selectedTag);
         handleClose();
@@ -8625,6 +8723,12 @@ var TableComponent = function (_a) {
             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) {
@@ -8654,53 +8758,88 @@ var TableComponent = function (_a) {
         setSelectedRowIndex(index);
         setContextMenuPosition({ x: event.clientX, y: event.clientY });
     };
-    var headerStyles = {
-        visible: { width: '60px' },
-        color: { width: '70px' },
-        autoScale: { width: '120px' }
-    };
-    var cellStyles = {
-        tagName: {
-            maxWidth: '200px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-        }
-    };
-    return (React__default.createElement(Grid$1, { container: true },
+    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: '80%', tableLayout: 'fixed' } },
+                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", { style: headerStyles.visible }, "Visible"),
-                            React__default.createElement("th", null, "Tag Name"),
-                            React__default.createElement("th", { style: headerStyles.color }, "Color"),
-                            React__default.createElement("th", null, "Min Scale"),
-                            React__default.createElement("th", null, "Max Scale"),
-                            React__default.createElement("th", { style: __assign(__assign({}, headerStyles.autoScale), { textAlign: "center" }) }, "AutoScale"),
-                            React__default.createElement("th", null, "X"),
-                            React__default.createElement("th", null, "Y")))))),
+                            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);
+                                // console.log(cursorData, "cursor data")
+                                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');
+                                return "".concat(formattedDate, ".").concat(milliseconds);
+                            })() : null),
+                            React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
+                                var date = new Date(cursorData.x2);
+                                // console.log(cursorData, "cursor data")
+                                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');
+                                return "".concat(formattedDate, ".").concat(milliseconds);
+                            })() : null),
+                            React__default.createElement("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, "X2-X1 Stats")))),
+                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, " Y1"),
+                            React__default.createElement("th", null, "Y2"),
+                            React__default.createElement("th", null, "Y2-Y1"),
+                            React__default.createElement("th", null, "Min"),
+                            React__default.createElement("th", null, "May")))))),
         React__default.createElement(Grid$1, { item: true, xs: 12 },
-            React__default.createElement("div", { style: { width: '100%', overflowY: 'auto', maxHeight: ' 26svh' } },
-                React__default.createElement("table", { cellPadding: '4px', style: { width: '80%', tableLayout: 'fixed' } },
-                    React__default.createElement("tbody", null, tagList.map(function (tag, index) { return (React__default.createElement("tr", { key: tag.tagName, onClick: function () { return handleRowClick(index); }, onContextMenu: function (e) { return handleRightClick(e, index); }, className: selectedRowIndex === index ? "selected-row" : "" },
-                        React__default.createElement("td", { style: headerStyles.visible, className: classes.checkbox },
+            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) { 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", null,
+                        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", { style: cellStyles.tagName }, tag.tagName))),
-                        React__default.createElement("td", { style: headerStyles.color },
+                                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", null,
-                            React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.minScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                        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", null,
-                            React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.maxScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                        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
@@ -8708,34 +8847,24 @@ var TableComponent = function (_a) {
                                         handleChange(index, numericValue, 'maxScale');
                                     }
                                 } })),
-                        React__default.createElement("td", { style: headerStyles.autoScale, className: classes.checkbox },
+                        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, cursorData ? (function () {
-                            var date = new Date(cursorData.x);
-                            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');
-                            return "".concat(formattedDate, ".").concat(milliseconds);
-                        })() : null),
-                        React__default.createElement("td", null, cursorData ? cursorData.values[index] : null))); }))))),
+                        React__default.createElement("td", null),
+                        React__default.createElement("td", { className: classes.doubleInput }),
+                        React__default.createElement("td", null, "y1y2"),
+                        React__default.createElement("td", null, "min"),
+                        React__default.createElement("td", null, "max"))); }))))),
         selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
-        React__default.createElement(MesfModal, { open: modalOpen, 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: modalOpen, onClose: function () { return handleClose; }, onTagSelect: handleTagSelect })))))));
+        React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect })));
 };
 
 var TrendingsInitialState = {
     timeScopeStart: moment(new Date()).subtract(1, "days").toDate(),
     timeScopeEnd: new Date(),
-    scope: "1 day"
+    scope: "1 day",
+    graphPan: false
 };
 var TrendingsReducer = createSlice({
     name: "__",
@@ -8788,13 +8917,19 @@ var TrendingsReducer = createSlice({
                 state.scope = payload.scope;
                 return;
             }
-            if (!isNil$1(payload.start) && !isNil$1(payload.end) && isNil$1(payload.scope)) {
-                // from graph
+            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") {
@@ -8967,6 +9102,44 @@ var CustomOptionsComponent = function (_a) {
                 "Stepped"))));
 };
 
+var DraggableLineControl = function (_a) {
+    var initialLeft = _a.initialLeft, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
+    var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
+    var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
+    var ref = useRef(null);
+    var handleMouseDown = function (e) {
+        setIsDragging(true);
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    var handleMouseMove = function (e) {
+        if (!isDragging || !ref.current)
+            return;
+        chartArea.width - chartArea.right;
+        chartArea.left;
+        var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
+        setLeft(newLeft);
+        onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    useEffect(function () {
+        var mouseMoveHandler = function (e) { return handleMouseMove(e); };
+        var mouseUpHandler = function () { return handleMouseUp(); };
+        if (isDragging) {
+            window.addEventListener('mousemove', mouseMoveHandler);
+            window.addEventListener('mouseup', mouseUpHandler);
+        }
+        return function () {
+            window.removeEventListener('mousemove', mouseMoveHandler);
+            window.removeEventListener('mouseup', mouseUpHandler);
+        };
+    }, [isDragging]);
+    return (React__default.createElement("div", { ref: ref, style: { height: 20, width: 20, background: color, position: 'absolute', top: -10, left: left - 10 }, onMouseDown: handleMouseDown },
+        React__default.createElement("div", { style: { height: chartArea.height, width: 2, background: color, position: 'relative', top: 20, left: 0, right: 0, margin: 'auto' } })));
+};
+
 var dateNavigator = function (startDate, endDate, scope, operator) {
     if (scope === "custom")
         return;
@@ -8979,76 +9152,90 @@ var dateNavigator = function (startDate, endDate, scope, operator) {
 };
 
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
-function getVerticalLinePlugin(setCursorData) {
+function getValuesAtCursor(chart, timeAtCursor) {
+    var valuesAtCursor = [];
+    chart.data.datasets.forEach(function (dataset) {
+        var previousDataPoint = null;
+        for (var i = 0; i < dataset.data.length; i++) {
+            if (dataset.data[i].x.getTime() <= timeAtCursor) {
+                previousDataPoint = dataset.data[i];
+            }
+            else {
+                break;
+            }
+        }
+        if (previousDataPoint) {
+            valuesAtCursor.push(previousDataPoint.y);
+        }
+    });
+    return valuesAtCursor;
+}
+function updateCursorData(chart, setCursorData) {
+    var xScale = chart.scales.x;
+    chart.scales.y;
+    // Coordenadas para la primera línea
+    var timeAtCursor1 = xScale.getValueForPixel(chart.mouseX);
+    // Coordenadas para la segunda línea
+    var timeAtCursor2 = xScale.getValueForPixel(chart.secondLineX);
+    // Los valores en el punto del cursor pueden ser diferentes para cada línea si corresponden a diferentes series de datos
+    var valuesAtCursor1 = getValuesAtCursor(chart, timeAtCursor1);
+    var valuesAtCursor2 = getValuesAtCursor(chart, timeAtCursor2);
+    setCursorData({
+        x1: timeAtCursor1,
+        x2: timeAtCursor2,
+        values: __spreadArray(__spreadArray([], valuesAtCursor1, true), valuesAtCursor2, true)
+    });
+}
+function getVerticalLinePlugin(setChartArea, setCoords) {
     return {
         id: "verticalLinePlugin",
+        afterUpdate: function (chart) {
+            if (chart.secondLineX === null) {
+                chart.secondLineX = chart.scales.x.left + (chart.scales.x.width * 0.75);
+            }
+            if (chart.mouseX === null) {
+                chart.mouseX = chart.scales.x.left + (chart.scales.x.width / 4);
+            }
+        },
         beforeInit: function (chart) {
-            var canvas = chart.canvas;
             chart.mouseX = null;
-            canvas.addEventListener("mousemove", function (event) {
-                var rect = canvas.getBoundingClientRect();
-                chart.mouseX = event.clientX - rect.left;
-                var xScale = chart.scales.x;
-                var mouseXPixel = chart.mouseX - xScale.left; // Adjusting for the scale's position
-                var timeAtCursor = xScale.min +
-                    (mouseXPixel * (xScale.max - xScale.min)) / xScale.width;
-                var valuesAtCursor = [];
-                // Loop through each dataset to find the previous y-values at the current x-position
-                chart.data.datasets.forEach(function (dataset) {
-                    // Find the closest preceding data point
-                    var previousDataPoint = null;
-                    for (var i = 0; i < dataset.data.length; i++) {
-                        if (dataset.data[i].x.getTime() <= timeAtCursor) {
-                            previousDataPoint = dataset.data[i];
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                    if (previousDataPoint) {
-                        valuesAtCursor.push(previousDataPoint.y);
-                    }
-                });
-                setCursorData({ x: timeAtCursor, values: valuesAtCursor });
-                chart.draw();
-            });
+            chart.secondLineX = null;
         },
-        afterDatasetsDraw: function (chart, args, options) {
-            if (chart.mouseX) {
-                var ctx = chart.ctx;
-                var x = chart.mouseX;
-                var topY = chart.chartArea.top;
-                var bottomY = chart.chartArea.bottom;
-                ctx.save();
-                ctx.beginPath();
-                ctx.moveTo(x, topY);
-                ctx.lineTo(x, bottomY);
-                ctx.strokeStyle = "#ff0000"; // Customize line color
-                ctx.lineWidth = 1; // Customize line width
-                ctx.stroke();
-                ctx.restore();
-            }
+        afterDatasetsDraw: function (chart) {
+            var x1 = chart.mouseX;
+            var x2 = chart.secondLineX;
+            setChartArea(chart.chartArea);
+            setCoords({ x1: x1, x2: x2 });
         }
     };
 }
 var Trending = function (_a) {
     _a.title; var tags = _a.tags;
     var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
+    var chartRef = useRef(null);
     var _c = useState({
         labels: [],
         datasets: []
     }), chartData = _c[0], setChartData = _c[1];
-    var _d = useState(tags), tagList = _d[0], setTagList = _d[1];
-    var _e = useState(null), cursorData = _e[0], setCursorData = _e[1];
-    var verticalLinePlugin = getVerticalLinePlugin(setCursorData);
-    var _f = useState({
+    var _d = useState(null), lineTabCoords = _d[0], setLineTabCoords = _d[1];
+    var _e = useState(null), chartArea = _e[0], setChartArea = _e[1];
+    var _f = useState(tags), tagList = _f[0], setTagList = _f[1];
+    var _g = useState(null), cursorData = _g[0], setCursorData = _g[1];
+    var verticalLinePlugin = getVerticalLinePlugin(setChartArea, setLineTabCoords);
+    var _h = useState({
         showGrid: true,
         stepped: false
-    }), customOptions = _f[0], setCustomOptions = _f[1];
-    var _g = useState(true), loading = _g[0], setLoading = _g[1];
-    var _h = useState(""), error = _h[0], setError = _h[1];
+    }), customOptions = _h[0], setCustomOptions = _h[1];
+    var _j = useState(true), loading = _j[0], setLoading = _j[1];
+    var _k = useState(""), error = _k[0], setError = _k[1];
     var debounceTimerRef = useRef(null);
     var classes = useTrendingStyles();
+    var debouncedUpdateChart = useRef(debounce(function () {
+        if (chartRef.current) {
+            updateCursorData(chartRef.current, setCursorData);
+            chartRef.current.update();
+        }
+    }, 250)).current;
     var handleDateChange = function (newValue, key) {
         var _a;
         //@ts-ignore
@@ -9075,6 +9262,22 @@ var Trending = function (_a) {
             });
         }, 1000);
     };
+    var handlePan = function (_a) {
+        var chart = _a.chart;
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(function () {
+            // Handle pan event and execute fetch
+            var newStart = new Date(chart.scales.x.min);
+            var newEnd = new Date(chart.scales.x.max);
+            actions.setTotalScope({
+                start: newStart,
+                end: newEnd,
+                graphPan: true
+            });
+        }, 1000);
+    };
     var handleDeleteTag = function (tagId) {
         setTagList(function (prevTagList) {
             return prevTagList.filter(function (tag) { return tag.tagId !== tagId; });
@@ -9097,7 +9300,7 @@ var Trending = function (_a) {
             actions.setTotalScope({ start: newDates.newStartDate, end: newDates.newEndDate, scope: state.scope });
         }
     };
-    var _j = useState({
+    var _l = useState({
         animation: {
             duration: 0
         },
@@ -9162,11 +9365,11 @@ var Trending = function (_a) {
                 pan: {
                     enabled: true,
                     mode: "x",
-                    onPan: handleZoom
+                    onPan: handlePan
                 }
             }
         }
-    }), chartOptions = _j[0], setChartOptions = _j[1];
+    }), chartOptions = _l[0], setChartOptions = _l[1];
     useEffect(function () {
         var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
             var tagIds, response, series_1, axes_1, updatedSeries, error_1;
@@ -9267,28 +9470,16 @@ var Trending = function (_a) {
         changeOptions();
     }, [customOptions]);
     function areRangesSimilar(tag1, tag2) {
-        var threshold = 1; // Define a threshold for "closeness"
-        // Helper function to safely compute logarithm, avoiding negative and zero values
-        var safeLog = function (value) {
-            if (value <= 0) {
-                return null; // or some safe value depending on your context
-            }
-            return Math.log(value);
-        };
-        var logTag1Min = safeLog(tag1.minScale);
-        var logTag1Max = safeLog(tag1.maxScale);
-        var logTag2Min = safeLog(tag2.minScale);
-        var logTag2Max = safeLog(tag2.maxScale);
-        // Check if any log value is null, which indicates an invalid comparison
-        if (logTag1Min === null ||
-            logTag1Max === null ||
-            logTag2Min === null ||
-            logTag2Max === null) {
-            return false;
-        }
-        var logDiffMin = Math.abs(logTag1Min - logTag2Min);
-        var logDiffMax = Math.abs(logTag1Max - logTag2Max);
-        return logDiffMin < threshold && logDiffMax < threshold;
+        var range1 = tag1.maxScale - tag1.minScale; // Rango de la primera etiqueta
+        var range2 = tag2.maxScale - tag2.minScale; // Rango de la segunda etiqueta
+        // Determina los límites para la comparación
+        var lowerBound = Math.max(tag1.minScale, tag2.minScale);
+        var upperBound = Math.min(tag1.maxScale, tag2.maxScale);
+        // Calcula el solapamiento entre los dos rangos
+        var overlap = Math.max(0, upperBound - lowerBound);
+        // Determina si el solapamiento es significativo comparado con los rangos individuales
+        var isSignificantOverlap = (overlap / range1 > 0.5) && (overlap / range2 > 0.5);
+        return isSignificantOverlap;
     }
     function calculateScales(min, max, sigDigits) {
         var roundToSignificantDigits = function (num) {
@@ -9312,7 +9503,6 @@ var Trending = function (_a) {
         return React__default.createElement("p", null,
             "Error: ",
             error);
-    useRef(null);
     useEffect(function () {
         setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { min: state.timeScopeStart.getTime(), max: state.timeScopeEnd.getTime() }) }) })); });
     }, [state.timeScopeStart, state.timeScopeEnd]);
@@ -9348,21 +9538,66 @@ var Trending = function (_a) {
             React__default.createElement(Grid$1, { md: 7, item: true, container: true, justifyContent: "space-between" },
                 React__default.createElement(Grid$1, { item: true, container: true, wrap: "nowrap", spacing: 1 },
                     React__default.createElement(Grid$1, { item: true, container: true },
-                        React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions })),
-                    React__default.createElement(Grid$1, { item: true, container: true, justifyContent: "flex-end" },
-                        React__default.createElement(Button$1, { variant: "contained", color: "primary" }, "Load View"),
-                        React__default.createElement(Button$1, { variant: "contained", color: "secondary" }, "Save View"))))),
+                        React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions }))))),
         React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
-            React__default.createElement(Paper$1, { style: { height: '100%', overflow: 'hidden' } },
-                React__default.createElement(Line, { data: chartData, options: chartOptions, plugins: [verticalLinePlugin] }))),
+            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) {
+                            prevCoords.x1 = newLeft;
+                            return prevCoords;
+                        });
+                        // @ts-ignore
+                        chartRef.current.mouseX = newLeft;
+                        debouncedUpdateChart();
+                    } })) : null,
+                lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'blue', initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, chartArea: chartArea, onUpdate: function (newLeft) {
+                        setLineTabCoords(function (prevCoords) {
+                            prevCoords.x2 = newLeft;
+                            return prevCoords;
+                        });
+                        // @ts-ignore
+                        chartRef.current.secondLineX = newLeft;
+                        debouncedUpdateChart();
+                    } })) : null,
+                React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin] }))),
         React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
-            React__default.createElement(TableComponent, { tagList: tagList, setTagList: setTagList, cursorData: cursorData, onDeleteTag: handleDeleteTag, onAddTag: handleAddTag })),
+            React__default.createElement(TableComponent, { tagList: tagList, chartData: chartData, setTagList: setTagList, cursorData: cursorData, onDeleteTag: handleDeleteTag, onAddTag: handleAddTag })),
         loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
             React__default.createElement("p", null, "Loading...")))));
 };
 
-// @flow
+//tags
+var getTags = function (NodeName) { 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: "NodeName", value: NodeName });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[dbo].[GetTagDirectChildren]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
+
 var TrendingsIndex = function (props) {
+    React.useEffect(function () {
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var tags;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getTags(null)];
+                    case 1:
+                        tags = _a.sent();
+                        console.log(tags);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, []);
     return (React.createElement(TrendingProvider, null,
         React.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
             React.createElement(Paper, null,

package/dist/pages/trendings/components/chart/TableComponent.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 import './ContextMenu.css';
 import { CursorData, TagList } from './Trending';
+import { ChartData } from 'chart.js';
 interface TableComponentProps {
     tagList: TagList;
     setTagList: React.Dispatch<React.SetStateAction<TagList>>;
     cursorData: CursorData;
     onDeleteTag: (tagId: number) => void;
     onAddTag: (tagId: number) => void;
+    chartData: ChartData;
 }
 declare const TableComponent: React.FC<TableComponentProps>;
 export default TableComponent;

package/dist/pages/trendings/components/chart/Trending.d.ts

@@ -20,9 +20,14 @@ export interface Tag {
     visible: boolean;
 }
 export interface CursorData {
-    x: Date;
+    x1: Date;
+    x2: Date;
     values: number[];
 }
+export interface LineCoords {
+    x1: number;
+    x2: number;
+}
 export interface CustomOptions {
     showGrid: boolean;
     stepped: boolean;

package/dist/pages/trendings/components/chart/components/DraggableLineControl.d.ts

@@ -0,0 +1,10 @@
+import { ChartArea } from 'chart.js';
+import React from 'react';
+interface DraggableLineControlProps {
+    chartArea: ChartArea;
+    initialLeft: number;
+    onUpdate: (newLeft: number) => void;
+    color: string;
+}
+declare const DraggableLineControl: React.FC<DraggableLineControlProps>;
+export default DraggableLineControl;

package/dist/pages/trendings/components/chart/components/modals/addTagModal/AddTagModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Tag } from '../../../Trending';
+interface Props {
+    open: boolean;
+    handleClose: () => void;
+    onTagSelect: (selected: Tag) => void;
+}
+export declare const AddTagModal: ({ open, handleClose, onTagSelect }: Props) => React.JSX.Element;
+export {};

package/dist/pages/trendings/components/chart/{TagSelectionModal.d.ts → components/modals/addTagModal/TagSelectionModal.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { Tag } from "./Trending";
+import { Tag } from "../../../Trending";
 interface TagSelectionModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/pages/trendings/components/chart/context/TrendingContext.d.ts

@@ -4,29 +4,35 @@ export declare const useTrendingContext: () => {
         timeScopeStart: Date;
         timeScopeEnd: Date;
         scope: import("../models/scopes.model").scopeType;
+        graphPan?: boolean | undefined;
     };
     actions: import("@reduxjs/toolkit").CaseReducerActions<{
         setTotalScope(state: import("immer/dist/internal").WritableDraft<{
             timeScopeStart: Date;
             timeScopeEnd: Date;
             scope: import("../models/scopes.model").scopeType;
+            graphPan?: boolean | undefined;
         }>, { payload, type, }: {
             payload: {
                 scope: import("../models/scopes.model").scopeType;
                 start?: Date | undefined;
                 end?: Date | undefined;
+                graphPan?: boolean | undefined;
             } | {
                 scope?: import("../models/scopes.model").scopeType | undefined;
                 start: Date;
                 end?: Date | undefined;
+                graphPan?: boolean | undefined;
             } | {
                 scope?: import("../models/scopes.model").scopeType | undefined;
                 start?: Date | undefined;
                 end: Date;
+                graphPan?: boolean | undefined;
             } | {
-                scope: import("../models/scopes.model").scopeType;
+                scope?: import("../models/scopes.model").scopeType | undefined;
                 start: Date;
                 end: Date;
+                graphPan: boolean;
             };
             type: string;
         }): void;

package/dist/pages/trendings/components/chart/repository/TrendingRepository.d.ts

@@ -0,0 +1,6 @@
+export declare const getTags: (NodeName: string | null) => Promise<import("../../../../../services").ResponseMESF>;
+export declare const getSeriesData: (TagIds: string, Start: number | null, End: number | null, SampleCount: number) => Promise<import("../../../../../services").ResponseMESF>;
+export declare const saveTagDefaults: (TagId: number, Alias: string, Color: string, MinScale: number, MaxScale: number, Unit: string) => Promise<import("../../../../../services").ResponseMESF>;
+export declare const getViewTags: (ViewId: number | null) => Promise<import("../../../../../services").ResponseMESF>;
+export declare const upsertView: (ViewId: number | null, ViewName: string, UserName: string, isPublic: boolean) => Promise<import("../../../../../services").ResponseMESF>;
+export declare const upsertViewTag: (ViewId: number, TagId: number, Color: string, MinScale: number, MaxScale: number, IsVisible: boolean) => Promise<import("../../../../../services").ResponseMESF>;

package/dist/pages/trendings/components/chart/styles/TagsTableStyles.d.ts

@@ -1 +1 @@
-export declare const useTagsTableStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"checkbox">;
+export declare const useTagsTableStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"checkbox" | "color" | "scale" | "visible" | "rowHover" | "topTitles" | "bottomTitlesRow" | "doubleInput" | "inputCol" | "autoScale" | "unit" | "xStats">;

package/dist/pages/trendings/reducers/trendings.reducer.d.ts

@@ -3,28 +3,34 @@ export declare const TrendingsReducer: import("@reduxjs/toolkit").Slice<{
     timeScopeStart: Date;
     timeScopeEnd: Date;
     scope: scopeType;
+    graphPan?: boolean | undefined;
 }, {
     setTotalScope(state: import("immer/dist/internal").WritableDraft<{
         timeScopeStart: Date;
         timeScopeEnd: Date;
         scope: scopeType;
+        graphPan?: boolean | undefined;
     }>, { payload, type, }: {
         payload: {
             scope: scopeType;
             start?: Date;
             end?: Date;
+            graphPan?: boolean;
         } | {
             scope?: scopeType;
             start: Date;
             end?: Date;
+            graphPan?: boolean;
         } | {
             scope?: scopeType;
             start?: Date;
             end: Date;
+            graphPan?: boolean;
         } | {
-            scope: scopeType;
+            scope?: scopeType;
             start: Date;
             end: Date;
+            graphPan: boolean;
         };
         type: string;
     }): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexteel/mesf-core",
-  "version": "4.5.5",
+  "version": "4.5.7",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",