@dexteel/mesf-core 4.7.8 → 4.7.10

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 # CHANGELOG
+## 4.7.9
+- Trendings: Add distinction between public and private views in Load View popup. Also now you can Edit/Delete the views
 ## 4.7.8
 - Trendings: Remove the 'Save view' popup and improve the 'Save view as' modal. Now you can choose a view to save in save view as or create a new one
 ## 4.7.7

package/dist/index.esm.js

@@ -35,6 +35,9 @@ 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 CreateIcon from '@material-ui/icons/Create';
+import DeleteIcon from '@material-ui/icons/Delete';
+import LockIcon from '@material-ui/icons/Lock';
 import { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
@@ -63,7 +66,6 @@ import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from
 import MomentUtils from '@date-io/moment';
 import InputLabel from '@material-ui/core/InputLabel';
 import DialogContentText$1 from '@material-ui/core/DialogContentText';
-import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import 'ag-grid-enterprise/styles/ag-grid.css';
 import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
@@ -1329,7 +1331,8 @@ var DialogTitle = withStyles(styles)(function (props) {
 var DialogContent = withStyles(function (theme) { return ({
     root: {
         padding: theme.spacing(2),
-        minWidth: 600
+        minWidth: 600,
+        overflow: 'hidden'
     }
 }); })(DialogContent$1);
 var DialogActions = withStyles(function (theme) { return ({
@@ -10193,6 +10196,21 @@ var upsertView = function (ViewId, ViewName, isPublic) { return __awaiter(void 0
         }
     });
 }); };
+var deleteView = function (ViewId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[DeleteView]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
 //viewTags
 var getViewTags = function (ViewId) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp;
@@ -10247,47 +10265,6 @@ var deleteViewTag = function (ViewId, TagId) { return __awaiter(void 0, void 0,
     });
 }); };
 
-var LoadViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose;
-    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
-    var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
-    var _f = useState(''), error = _f[0], setError = _f[1];
-    var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var viewTagsResp;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!viewSelected) return [3 /*break*/, 2];
-                    setIsLoading(true);
-                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
-                case 1:
-                    viewTagsResp = _a.sent();
-                    if (viewTagsResp.ok) {
-                        setViewTags(viewTagsResp.data.tables[0].rows);
-                    }
-                    else {
-                        setError(viewTagsResp.message);
-                    }
-                    setIsLoading(false);
-                    handleClose(true);
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
-            }
-        });
-    }); };
-    return (React__default.createElement("div", null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid$1, { container: true },
-                    React__default.createElement(Grid$1, { item: true, md: 12 }, views.length ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
-                        (React__default.createElement("div", null, "No tag views detected, please add one"))))),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement("div", { style: { paddingTop: "1rem" } },
-                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
-                    React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
-};
-
 var useTrendingStyles = makeStyles$1(function (theme) { return ({
     datetimePicker: {
         alignItems: "center",
@@ -10364,9 +10341,245 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
             }
         },
         color: 'black'
+    },
+    iconContainer: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        flex: 1
+    },
+    optionContainer: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        width: '100%'
+    },
+    optionLabel: {
+        flexGrow: 1
+    },
+    inputCustom: {
+        color: 'rgba(0, 0, 0, 0.87)',
+        cursor: 'text',
+        fontSize: '0.7rem',
+        boxSizing: 'border-box',
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: 400,
+        lineHeight: 1.1876,
+        letterSpacing: '0.00938em',
+        '& .MuiOutlinedInput-input': {
+            padding: '10px 10px'
+        }
     }
 }); });
 
+var DeleteViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!!isNil$1(view)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, deleteView(view.ViewId)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    else {
+                        handleClose(true);
+                    }
+                    _a.label = 2;
+                case 2:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Delete View' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
+                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(Typography, null,
+                            "Are yu sure you want to delete ",
+                            React__default.createElement("strong", null, view === null || view === void 0 ? void 0 : view.ViewName),
+                            " ?")))) :
+                (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'secondary', onClick: handleSubmit, isLoading: isLoading }, "Delete")
+                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
+var EditViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
+    var classes = useTrendingStyles();
+    var _b = useState(''), newName = _b[0], setNewName = _b[1];
+    var _c = useState(true), isPublic = _c[0], setIsPublic = _c[1];
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(''), error = _e[0], setError = _e[1];
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!!isNil$1(view)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, upsertView(view.ViewId, newName, isPublic)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    else {
+                        handleClose(true);
+                    }
+                    _a.label = 2;
+                case 2:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleChangeInput = function (e) {
+        e.preventDefault();
+        var name = e.target.value;
+        setNewName(name);
+    };
+    var handleCheck = function () { return setIsPublic(!isPublic); };
+    useEffect(function () {
+        if (view) {
+            setIsPublic(view.IsPublic);
+            setNewName(view.ViewName);
+        }
+    }, [view]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Update View' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
+                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(TextField, { required: true, className: classes.inputCustom, id: "viewName", label: "Name", variant: "outlined", onChange: handleChangeInput, value: newName })),
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
+                        React__default.createElement("label", null,
+                            React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck }),
+                            React__default.createElement(Typography, null, "Public"))))) :
+                (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Update")
+                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
+var LoadViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, getTagsFromAPI = _a.getTagsFromAPI;
+    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
+    var classes = useTrendingStyles();
+    var _e = useState(null), viewForDelete = _e[0], setViewForDelete = _e[1];
+    var _f = useState(null), viewForEdit = _f[0], setViewForEdit = _f[1];
+    var _g = useState(false), deleteViewModalOpen = _g[0], setDeleteViewModalOpen = _g[1];
+    var _h = useState(false), editViewModalOpen = _h[0], setEditViewModalOpen = _h[1];
+    var _j = useState(false), allViewsChecked = _j[0], setAllViewsChecked = _j[1];
+    var _k = useState(false), isLoading = _k[0], setIsLoading = _k[1];
+    var _l = useState(''), error = _l[0], setError = _l[1];
+    var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var viewTagsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!viewSelected) return [3 /*break*/, 2];
+                    setIsLoading(true);
+                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
+                case 1:
+                    viewTagsResp = _a.sent();
+                    if (viewTagsResp.ok) {
+                        setViewTags(viewTagsResp.data.tables[0].rows);
+                    }
+                    else {
+                        setError(viewTagsResp.message);
+                    }
+                    setIsLoading(false);
+                    handleClose(true);
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDeleteView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            e.stopPropagation();
+            setViewForDelete(view);
+            setDeleteViewModalOpen(true);
+            return [2 /*return*/];
+        });
+    }); };
+    var handleEditView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setViewForEdit(view);
+            setEditViewModalOpen(true);
+            return [2 /*return*/];
+        });
+    }); };
+    var handleAllViewsCheckbox = function () {
+        setAllViewsChecked(function (prev) { return !prev; });
+    };
+    var privateViews = useMemo(function () {
+        return views.filter(function (v) { return v.IsPublic === false; });
+    }, [views, allViewsChecked]);
+    return (React__default.createElement("div", null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Views' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true }, views.length ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Grid$1, { item: true, md: 12 },
+                        React__default.createElement("div", { className: classes.isPublicCheckbox, style: { paddingBottom: '1rem' } },
+                            React__default.createElement("label", { htmlFor: "" },
+                                React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
+                                React__default.createElement(Typography, null, "All Views")))),
+                    React__default.createElement(Grid$1, { item: true, md: 12 },
+                        React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: allViewsChecked ? views : privateViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderOption: function (option) { return (React__default.createElement("div", { className: classes.optionContainer },
+                                React__default.createElement("div", { className: classes.optionLabel }, option.ViewName),
+                                React__default.createElement("div", { className: classes.iconContainer },
+                                    option.IsPublic ? '' :
+                                        React__default.createElement(React__default.Fragment, null,
+                                            React__default.createElement(Tooltip, { title: "Private", arrow: true },
+                                                React__default.createElement(LockIcon, { fontSize: 'small', style: { color: 'black', height: "18px", width: '18px', cursor: 'auto' } }))),
+                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(option); } },
+                                        React__default.createElement(CreateIcon, { fontSize: 'small', color: 'primary', style: { height: "18px", width: '18px', cursor: 'pointer' } })),
+                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleDeleteView(option, e); } },
+                                        React__default.createElement(DeleteIcon, { fontSize: 'small', color: 'secondary', style: { height: "18px", width: '18px', cursor: 'pointer' } }))))); }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })))) :
+                    (React__default.createElement(Typography, null, "No tag views detected, please add one")))),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement("div", { style: { paddingTop: "1rem" } },
+                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
+                    views.length ? (React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")) : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok"))))),
+        React__default.createElement(DeleteViewModal, { open: deleteViewModalOpen, view: viewForDelete, handleClose: function (shouldUpdate) {
+                setDeleteViewModalOpen(false);
+                if (shouldUpdate)
+                    getTagsFromAPI().then(function () { });
+            } }),
+        React__default.createElement(EditViewModal, { open: editViewModalOpen, view: viewForEdit, handleClose: function (shouldUpdate) {
+                setEditViewModalOpen(false);
+                if (shouldUpdate)
+                    getTagsFromAPI().then(function () { });
+            } }),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
 var SaveAsViewModal = function (_a) {
     var open = _a.open, handleClose = _a.handleClose;
     var classes = useTrendingStyles();
@@ -10548,6 +10761,12 @@ var useTagsTableStyles = makeStyles$1(function (theme) { return ({
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap'
     },
+    aliasCol: {
+        width: "15rem",
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
     autoScale: {
         width: '7.5rem'
     },
@@ -10564,6 +10783,15 @@ var useTagsTableStyles = makeStyles$1(function (theme) { return ({
     unit: {
         width: '7.5rem'
     },
+    numberInput: {
+        '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+            '-webkit-appearance': 'none',
+            margin: 0
+        },
+        '&': {
+            '-moz-appearance': 'textfield'
+        }
+    },
     xStats: {
     // ...
     }
@@ -10788,7 +11016,7 @@ var TableComponent = function (_a) {
                         React__default.createElement("thead", null,
                             React__default.createElement("tr", null,
                                 React__default.createElement("th", { className: classes.visible }, "View:"),
-                                React__default.createElement("th", { className: classes.inputCol }, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
+                                React__default.createElement("th", { className: classes.aliasCol }, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
                                 React__default.createElement("th", { className: classes.color }),
                                 React__default.createElement("th", { colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
                                 React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
@@ -10796,13 +11024,9 @@ var TableComponent = function (_a) {
                                     var formattedDate = date.toLocaleString('en-US', {
                                         hour12: false,
                                         month: 'short',
-                                        day: 'numeric',
-                                        hour: '2-digit',
-                                        minute: '2-digit',
-                                        second: '2-digit'
+                                        day: 'numeric'
                                     });
-                                    var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
-                                    var dateText = "".concat(formattedDate, ".").concat(milliseconds);
+                                    var dateText = "".concat(formattedDate);
                                     return (React__default.createElement(React__default.Fragment, null,
                                         React__default.createElement("span", { style: {
                                                 height: '10px',
@@ -10819,13 +11043,9 @@ var TableComponent = function (_a) {
                                     var formattedDate = date.toLocaleString('en-US', {
                                         hour12: false,
                                         month: 'short',
-                                        day: 'numeric',
-                                        hour: '2-digit',
-                                        minute: '2-digit',
-                                        second: '2-digit'
+                                        day: 'numeric'
                                     });
-                                    var milliseconds = date.getMilliseconds().toString().padStart(3, '0');
-                                    var dateText = "".concat(formattedDate, ".").concat(milliseconds);
+                                    var dateText = "".concat(formattedDate);
                                     return (React__default.createElement(React__default.Fragment, null,
                                         React__default.createElement("span", { style: {
                                                 height: '10px',
@@ -10842,14 +11062,41 @@ var TableComponent = function (_a) {
                         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.aliasCol }, "Alias / Tagname"),
                                 React__default.createElement("th", { className: classes.color }, "Color"),
                                 React__default.createElement("th", { className: classes.inputCol }, "Min Scale"),
                                 React__default.createElement("th", { className: classes.inputCol }, "Max Scale"),
-                                React__default.createElement("th", { className: classes.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,
+                                    "  ",
+                                    cursorData ? (function () {
+                                        var date = new Date(cursorData.x1);
+                                        var formattedHour = date.toLocaleString('en-US', {
+                                            hour12: false,
+                                            hour: '2-digit',
+                                            minute: '2-digit',
+                                            second: '2-digit'
+                                        });
+                                        var milliseconds = date.getMilliseconds().toString().padStart(2, '0');
+                                        var dateText = "".concat(formattedHour, ".").concat(milliseconds, " hs");
+                                        return (React__default.createElement(React__default.Fragment, null, dateText));
+                                    })() : null,
+                                    " "),
+                                React__default.createElement("th", null,
+                                    " ",
+                                    cursorData ? (function () {
+                                        var date = new Date(cursorData.x2);
+                                        var formattedHour = date.toLocaleString('en-US', {
+                                            hour12: false,
+                                            hour: '2-digit',
+                                            minute: '2-digit',
+                                            second: '2-digit'
+                                        });
+                                        var milliseconds = date.getMilliseconds().toString().padStart(2, '0');
+                                        var dateText = "".concat(formattedHour, ".").concat(milliseconds, " hs");
+                                        return (React__default.createElement(React__default.Fragment, null, dateText));
+                                    })() : null,
+                                    " "),
                                 React__default.createElement("th", null, "Y2-Y1"),
                                 React__default.createElement("th", null, "Min"),
                                 React__default.createElement("th", null, "Max")))))),
@@ -10863,7 +11110,7 @@ var TableComponent = function (_a) {
                                 onContextMenu: function (e) { return handleRightClick(e, index); }, className: classes.rowHover },
                                 React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
                                     React__default.createElement("input", { type: "checkbox", checked: tag.IsVisible, onChange: function (e) { return handleVisibilityChange(tag.TagId, e.target.checked); } })),
-                                React__default.createElement("td", { className: classes.inputCol },
+                                React__default.createElement("td", { className: classes.aliasCol },
                                     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: tag.Alias || tag.TagName, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
@@ -10873,7 +11120,7 @@ var TableComponent = function (_a) {
                                 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: "number", style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
+                                    React__default.createElement("input", { type: "number", className: classes.numberInput, style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
                                             backgroundColor: 'rgba(239, 239, 239, 0.3)',
                                             color: 'rgba(84, 84, 84, 1)',
                                             border: '1px solid rgba(118, 118, 118, 0.3)'
@@ -10885,8 +11132,7 @@ var TableComponent = function (_a) {
                                             }
                                         } })),
                                 React__default.createElement("td", { className: classes.inputCol },
-                                    React__default.createElement("input", { type: "number" // Cambiado de text a number para una mejor validación de entrada
-                                        , style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
+                                    React__default.createElement("input", { type: "number", className: classes.numberInput, style: __assign({ width: '100%', WebkitAppearance: 'none' }, (tag.IsAutoScale ? {
                                             backgroundColor: 'rgba(239, 239, 239, 0.3)',
                                             color: 'rgba(84, 84, 84, 1)',
                                             border: '1px solid rgba(118, 118, 118, 0.3)'
@@ -10898,16 +11144,14 @@ var TableComponent = function (_a) {
                                             }
                                         } })),
                                 React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
-                                    React__default.createElement("input", { type: "text", style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
-                                            backgroundColor: 'rgba(239, 239, 239, 0.3)',
-                                            color: 'rgba(84, 84, 84, 1)',
-                                            border: '1px solid rgba(118, 118, 118, 0.3)'
-                                        } : {})), onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onChange: function (e) {
+                                    React__default.createElement("input", { type: "checkbox", checked: tag.IsAutoScale, onChange: function (e) { return handleAutoScaleChange(tag.TagId, tag.IsAutoScale); } })),
+                                React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
+                                    React__default.createElement("input", { type: "text", style: {
+                                            width: '100%'
+                                        }, onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onChange: function (e) {
                                             var value = e.target.value;
                                             handleUnitChange(tag.TagId, value);
                                         }, value: tag.Unit, onFocus: function (e) { return e.target.select(); } })),
-                                React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
-                                    React__default.createElement("input", { type: "checkbox", checked: tag.IsAutoScale, onChange: function (e) { return handleAutoScaleChange(tag.TagId, tag.IsAutoScale); } })),
                                 React__default.createElement("td", null, round((_a = dataTable[tag.TagName]) === null || _a === void 0 ? void 0 : _a.y1, 3)),
                                 React__default.createElement("td", { className: classes.doubleInput }, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y2, 3)),
                                 React__default.createElement("td", null, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2y1, 3)),
@@ -10930,7 +11174,7 @@ var TableComponent = function (_a) {
                     if (shouldUpdate)
                         getTagsFromAPI(true).then(function () { });
                 } }),
-            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function (shouldUpdate) {
+            React__default.createElement(LoadViewModal, { open: loadViewOpen, getTagsFromAPI: getTagsFromAPI, handleClose: function (shouldUpdate) {
                     setLoadViewOpen(false);
                 } })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } }),