@dexteel/mesf-core 4.5.6 → 4.5.8

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, isNaN, 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 { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
+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 Popover from '@material-ui/core/Popover';
+import { Alert as Alert$3, TreeView as TreeView$1, TreeItem as TreeItem$1 } from '@material-ui/lab';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
@@ -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,42 @@ 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 TagSelectionModal = function (_a) {
     var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
@@ -8512,57 +8565,74 @@ 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 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 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 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 useTagsTableStyles = makeStyles$1(function (theme) { return ({
@@ -8571,18 +8641,88 @@ var useTagsTableStyles = makeStyles$1(function (theme) { return ({
             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 timeDifference = function (start, end) {
+    console.log(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, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
+    var tagList = _a.tagList, setTagList = _a.setTagList, chartData = _a.chartData, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
     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; }); });
     };
@@ -8592,10 +8732,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 +8744,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 +8796,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,88 +8831,178 @@ 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');
+                                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);
+                                // 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');
+                                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: ' 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("input", { type: "checkbox", checked: tag.visible, onChange: function (e) { return handleVisibilityChange(index, e.target.checked); } })),
-                        React__default.createElement("td", null,
-                            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(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) {
-                                    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) {
-                                    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", { style: headerStyles.autoScale, className: 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("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(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 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 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 +9055,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 +9240,100 @@ var CustomOptionsComponent = function (_a) {
                 "Stepped"))));
 };
 
+var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
+    return {
+        id: "verticalLinePlugin",
+        afterUpdate: function (chart) {
+            if (chart.chartArea) {
+                // console.log("after update");
+                if (chart.mouseX === null) {
+                    chart.mouseX = chart.chartArea.left + (chart.chartArea.width / 10);
+                    // chart.mouseX = chart.chartArea.left + 30.9
+                }
+                if (chart.secondLineX === null) {
+                    chart.secondLineX = chart.chartArea.left + (chart.chartArea.width * 0.90);
+                    // chart.secondLineX = chart.chartArea.right
+                }
+            }
+        },
+        beforeInit: function (chart) {
+            chart.mouseX = null;
+            chart.secondLineX = null;
+        },
+        afterDatasetsDraw: function (chart) {
+            var x1 = chart.mouseX;
+            var x2 = chart.secondLineX;
+            setChartArea(chart.chartArea);
+            setCoords({ x1: x1, x2: x2 });
+        }
+    };
+};
+
+var getValuesAtCursor = function (chart, timeAtCursor) {
+    var valuesAtCursor = [];
+    chart.data.datasets.forEach(function (dataset) {
+        var previousDataPoint = null;
+        for (var i = 0; i < dataset.data.length; i++) {
+            if (dataset.data[i].x.getTime() <= timeAtCursor) {
+                previousDataPoint = dataset.data[i];
+            }
+            else {
+                break;
+            }
+        }
+        if (previousDataPoint) {
+            valuesAtCursor.push(previousDataPoint.y);
+        }
+    });
+    return valuesAtCursor;
+};
+var updateCursorData = function (chart, setCursorData) {
+    var xScale = chart.scales.x;
+    // Coordenadas para la primera y segunda línea
+    var timeAtCursor1 = xScale.getValueForPixel(chart.mouseX);
+    var timeAtCursor2 = xScale.getValueForPixel(chart.secondLineX);
+    // Los valores en el punto del cursor pueden ser diferentes
+    var valuesAtCursor1 = getValuesAtCursor(chart, timeAtCursor1);
+    var valuesAtCursor2 = getValuesAtCursor(chart, timeAtCursor2);
+    setCursorData({
+        x1: timeAtCursor1,
+        x2: timeAtCursor2,
+        values: __spreadArray(__spreadArray([], valuesAtCursor1, true), valuesAtCursor2, true)
+    });
+};
+
+var 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
+    // Determina los límites para la comparación
+    var lowerBound = Math.max(tag1.minScale, tag2.minScale);
+    var upperBound = Math.min(tag1.maxScale, tag2.maxScale);
+    // Calcula el solapamiento entre los dos rangos
+    var overlap = Math.max(0, upperBound - lowerBound);
+    // Determina si el solapamiento es significativo comparado con los rangos individuales
+    var isSignificantOverlap = (overlap / range1 > 0.5) && (overlap / range2 > 0.5);
+    return isSignificantOverlap;
+};
+
+var 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 dateNavigator = function (startDate, endDate, scope, operator) {
     if (scope === "custom")
         return;
@@ -8979,76 +9346,34 @@ var dateNavigator = function (startDate, endDate, scope, operator) {
 };
 
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
-function getVerticalLinePlugin(setCursorData) {
-    return {
-        id: "verticalLinePlugin",
-        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();
-            });
-        },
-        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();
-            }
-        }
-    };
-}
 var Trending = function (_a) {
     _a.title; var tags = _a.tags;
+    var classes = useTrendingStyles();
     var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
-    var _c = useState({
+    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(null), cursorData = _f[0], setCursorData = _f[1];
+    var _g = useState(null), lineTabCoords = _g[0], setLineTabCoords = _g[1];
+    var _h = useState(null), chartArea = _h[0], setChartArea = _h[1];
+    var _j = useState(false), chartShouldInitCursors = _j[0], setChartShouldInitCursors = _j[1];
+    var chartRef = useRef(null);
+    var _k = 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({
+    }), chartData = _k[0], setChartData = _k[1];
+    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
+    var _l = 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 = _l[0], setCustomOptions = _l[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 +9400,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 +9438,7 @@ var Trending = function (_a) {
             actions.setTotalScope({ start: newDates.newStartDate, end: newDates.newEndDate, scope: state.scope });
         }
     };
-    var _j = useState({
+    var _m = useState({
         animation: {
             duration: 0
         },
@@ -9162,11 +9503,11 @@ var Trending = function (_a) {
                 pan: {
                     enabled: true,
                     mode: "x",
-                    onPan: handleZoom
+                    onPan: handlePan
                 }
             }
         }
-    }), chartOptions = _j[0], setChartOptions = _j[1];
+    }), chartOptions = _m[0], setChartOptions = _m[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;
@@ -9231,11 +9572,13 @@ var Trending = function (_a) {
                                     x: new Date(sample.timestamp),
                                     y: sample.value
                                 }); }),
+                                tagId: tag.tagId,
                                 borderColor: tag.color,
                                 hidden: !tag.visible,
                                 pointRadius: serie.length <= 50 ? 3 : 0
                             };
                         });
+                        setChartShouldInitCursors(true);
                         setChartData({
                             labels: [],
                             datasets: updatedSeries
@@ -9256,7 +9599,7 @@ var Trending = function (_a) {
     }, [JSON.stringify(state), tagList]);
     useEffect(function () {
         var changeOptions = function () {
-            console.log("change options");
+            // console.log("change options");
             setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { elements: {
                     line: {
                         stepped: customOptions.stepped,
@@ -9266,56 +9609,21 @@ 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;
-    }
-    function calculateScales(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 };
-    }
     if (error)
         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]);
+    useEffect(function () {
+        if (chartShouldInitCursors) {
+            if (chartRef.current) {
+                updateCursorData(chartRef.current, setCursorData);
+                chartRef.current.update();
+            }
+        }
+    }, [chartShouldInitCursors, state]);
     return (React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "81svh", margin: 0 } },
         React__default.createElement(Grid$1, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
             React__default.createElement(Grid$1, { md: 5, item: true, container: true, justifyContent: "flex-start", alignItems: "center", spacing: 1, wrap: "wrap" },
@@ -9348,21 +9656,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,