@dexteel/mesf-core 4.7.3 → 4.7.5

package/CHANGELOG.md

@@ -1,4 +1,12 @@
 # CHANGELOG
+## 4.7.5
+- Added function to format AssetFullPath and display a part in the input
+## 4.7.4
+- Trending: Change size of the date navigator arrows to improve the responsive behavior
+- Trendings: Fix too many numbers on table bug. Show only the 3 digits after the comma
+- Trending: Set new limits on the draggable line cursors. Now one cursor cannot exceed the position of the other cursor
+- Trending: In add tag modal, when you select a tag, the popup doesn't close
+- Trending: Fix cannot edit unit bug
 ## 4.7.3
 - Trendings: Fix date time navigation when the scope is 'custom'. Navigator takes difference between start date and end date
 ## 4.7.2

package/dist/controls/filters/filters.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 type TreePickerControlProps = {
-    onSelect: (value: string, description: string, findNode: any) => void;
+    onSelect: (value: string, description: string, findNode: any, showPath?: boolean) => void;
     [key: string]: any;
 };
 export declare const TreePickerControl: (props: TreePickerControlProps) => React.JSX.Element;

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 export { LicenseManager } from 'ag-grid-enterprise';
 import { Typography, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Checkbox, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, Tooltip, createStyles as createStyles$1, FormControl as FormControl$1, Select as Select$1, Box, Divider, IconButton as IconButton$1, debounce, List, ListItem, ListItemText } from '@material-ui/core';
-import { values, get, isNil as isNil$1, isEmpty, isNaN } from 'lodash-es';
+import { values, get, isNil as isNil$1, isEmpty, isNaN, round } from 'lodash-es';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
+import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
 import DialogTitle$1 from '@material-ui/core/DialogTitle';
 import DialogContent$1 from '@material-ui/core/DialogContent';
@@ -450,26 +450,26 @@ ModalTreeFilterControl.propTypes = {
     data: PropTypes.object.isRequired
 };
 
-var TreePickerControl = function (props) {
-    var useStyles = makeStyles(function (theme) { return ({
-        root: {
-            width: "100%",
-            backgroundColor: theme.palette.background.paper,
-            "& .MuiInputBase-input": {
-                color: "black",
-                cursor: "pointer",
-                paddingRight: 45
-            }
-        },
-        paper: {
-            width: "100%",
-            maxWidth: 600,
-            maxHeight: 600
+var useStyles$A = makeStyles(function (theme) { return ({
+    root: {
+        width: "100%",
+        backgroundColor: theme.palette.background.paper,
+        "& .MuiInputBase-input": {
+            color: "black",
+            cursor: "pointer",
+            paddingRight: 45
         }
-    }); });
-    var classes = useStyles();
-    var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a, other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle"]);
-    var _b = React__default.useState(false), open = _b[0], setOpen = _b[1];
+    },
+    paper: {
+        width: "100%",
+        maxWidth: 600,
+        maxHeight: 600
+    }
+}); });
+var TreePickerControl = function (props) {
+    var classes = useStyles$A();
+    var onSelect = props.onSelect, value = props.value; props.styleLabel; var dataSource = props.dataSource, _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var other = __rest(props, ["onSelect", "value", "styleLabel", "dataSource", "inputTitle", "showPath"]);
+    var _c = React__default.useState(false), open = _c[0], setOpen = _c[1];
     var handleClickListItem = function (e) {
         e.stopPropagation();
         setOpen(true);
@@ -481,10 +481,40 @@ var TreePickerControl = function (props) {
                 onSelect(newValue, newDescription, findNode);
         }
     };
+    var formatDescription = function (description) {
+        if (props.showPath && (description === null || description === void 0 ? void 0 : description.includes('/')) && description.split('/').length > 3) {
+            var parts = description.split('/');
+            var formattedDescription = '';
+            for (var i = 0; i < parts.length; i++) {
+                if (i < parts.length - 2) {
+                    formattedDescription += '.../';
+                }
+                else if (i === parts.length - 2) {
+                    if (parts[i].length > 6) {
+                        formattedDescription += parts[i].substring(0, 6) + '.../';
+                    }
+                    else {
+                        formattedDescription += parts[i] + '/';
+                    }
+                }
+                else {
+                    formattedDescription += parts[i];
+                    if (i < parts.length - 1) {
+                        formattedDescription += '/';
+                    }
+                }
+            }
+            return formattedDescription;
+        }
+        else {
+            return description;
+        }
+    };
+    var description = useMemo(function () { return formatDescription(props.description); }, [props.description]);
     return (React__default.createElement(Grid, { container: true, className: classes.root },
-        React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" } },
+        React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" }, title: props.description },
             React__default.createElement(Grid, { item: true, style: { position: "relative", width: "100%" } },
-                React__default.createElement(TextField, { label: inputTitle, variant: "outlined", value: props.description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true }),
+                React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle, variant: "outlined", value: description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true }),
                 React__default.createElement(AccountTreeIcon, { style: {
                         position: "absolute",
                         right: 15,
@@ -10273,11 +10303,12 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
             fontSize: "13px !important",
             height: "15px !important",
             paddingRight: "3px",
-            paddingLeft: "5px"
+            paddingLeft: "3px"
         },
         "& .MuiInput-underline:before": {
             borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        }
+        },
+        padding: 0
     },
     select: {
         "& .MuiInput-root": {
@@ -10295,7 +10326,8 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
         },
         "& .MuiInput-underline:before": {
             borderBottomColor: "rgba(0, 0, 0, 0.42)"
-        }
+        },
+        padding: 0
     },
     labelOptions: {
         paddingLeft: "2rem",
@@ -10323,8 +10355,15 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
     },
     navigatorButton: {
         "& .MuiSvgIcon-root": {
-            cursor: "pointer !important"
-        }
+            cursor: "pointer !important",
+            height: '24px',
+            width: '24px',
+            '& svg': {
+                // Adjust the icon size as well
+                fontSize: '1.5rem'
+            }
+        },
+        color: 'black'
     }
 }); });
 
@@ -10619,6 +10658,10 @@ var TableComponent = function (_a) {
         var newTags = viewTags.map(function (tag) { return tag.TagId === tagId ? __assign(__assign({}, tag), { IsVisible: value }) : tag; });
         setViewTags(newTags);
     };
+    var handleUnitChange = function (tagId, newUnit) {
+        var newTags = viewTags.map(function (tag) { return (tag.TagId === tagId ? __assign(__assign({}, tag), { Unit: newUnit }) : tag); });
+        setViewTags(newTags);
+    };
     var handleAutoScaleChange = function (tagId, checked) {
         var newTags = viewTags.map(function (t) { return t.TagId == tagId ? __assign(__assign({}, t), { IsAutoScale: !checked }) : t; });
         setViewTags(newTags);
@@ -10669,7 +10712,6 @@ var TableComponent = function (_a) {
     ];
     var handleTagSelect = function (selectedTag) {
         handleAddTag(selectedTag);
-        handleClose();
     };
     var handleDelete = function (index) { return __awaiter(void 0, void 0, void 0, function () {
         var tagToDelete, resp;
@@ -10887,17 +10929,24 @@ var TableComponent = function (_a) {
                                             }
                                         } })),
                                 React__default.createElement("td", { className: "".concat(classes.autoScale, " ").concat(classes.checkbox) },
-                                    React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: true, value: tag.Unit, onFocus: function (e) { return e.target.select(); } })),
+                                    React__default.createElement("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) {
+                                            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, (_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, round((_a = dataTable[tag.TagName]) === null || _a === void 0 ? void 0 : _a.y1, 3)),
+                                React__default.createElement("td", { className: classes.doubleInput }, round((_b = dataTable[tag.TagName]) === null || _b === void 0 ? void 0 : _b.y2, 3)),
+                                React__default.createElement("td", null, round((_c = dataTable[tag.TagName]) === null || _c === void 0 ? void 0 : _c.y2y1, 3)),
                                 React__default.createElement("td", null,
-                                    !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,
+                                    !isNaN(((_d = dataTable[tag.TagName]) === null || _d === void 0 ? void 0 : _d.pmin.y) * 0) ? round((_e = dataTable[tag.TagName]) === null || _e === void 0 ? void 0 : _e.pmin.y, 3) : 0,
                                     " "),
                                 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,
+                                    !isNaN(((_f = dataTable[tag.TagName]) === null || _f === void 0 ? void 0 : _f.pmax.y) * 0) ? round((_g = dataTable[tag.TagName]) === null || _g === void 0 ? void 0 : _g.pmax.y) : 0,
                                     " ")));
                         }) : React__default.createElement("div", { style: { padding: '2rem' } },
                             React__default.createElement("div", { style: { padding: "1rem" } }, "No tag view detected. "),
@@ -11105,13 +11154,20 @@ var Header = function (_a) {
     };
     useEffect(function () {
         var changeOptions = function () {
-            // console.log("change options");
-            setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { elements: {
-                    line: {
-                        stepped: customOptions.stepped,
-                        lineTension: 0.1
+            setChartOptions(function (prevOptions) {
+                var newScales = __assign({}, prevOptions.scales);
+                Object.keys(newScales).forEach(function (key) {
+                    if (key) {
+                        newScales[key] = __assign(__assign({}, newScales[key]), { grid: __assign(__assign({}, newScales[key].grid), { display: customOptions.showGrid }) });
                     }
-                }, scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { grid: __assign(__assign({}, prevOptions.scales.x.grid), { display: customOptions.showGrid }) }), y: __assign(__assign({}, prevOptions.scales.y), { grid: __assign(__assign({}, prevOptions.scales.y.grid), { display: customOptions.showGrid }) }) }) })); });
+                });
+                return __assign(__assign({}, prevOptions), { elements: {
+                        line: {
+                            stepped: customOptions.stepped,
+                            lineTension: 0.1
+                        }
+                    }, scales: newScales });
+            });
         };
         changeOptions();
     }, [customOptions]);
@@ -11119,9 +11175,10 @@ var Header = function (_a) {
         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]);
     return (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" },
-            React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
-                React__default.createElement(ChevronLeft, { fontSize: "large" })),
+        React__default.createElement(Grid$1, { md: 6, item: true, container: true, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
+            React__default.createElement(Grid$1, { item: true },
+                React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
+                    React__default.createElement(ChevronLeft, { fontSize: "large" }))),
             React__default.createElement(Grid$1, { item: true },
                 React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
                         shrink: true,
@@ -11144,16 +11201,17 @@ var Header = function (_a) {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     } })),
-            React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("add"); }, className: classes.navigatorButton },
-                React__default.createElement(ChevronRight, { fontSize: "large" }))),
-        React__default.createElement(Grid$1, { md: 7, item: true, container: true, justifyContent: "space-between" },
+            React__default.createElement(Grid$1, { item: true },
+                React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("add"); }, className: "".concat(classes.navigatorButton) },
+                    React__default.createElement(ChevronRight, { fontSize: "large" })))),
+        React__default.createElement(Grid$1, { md: 6, 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 }))))));
 };
 
 var DraggableLineControl = function (_a) {
-    var initialLeft = _a.initialLeft, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
+    var initialLeft = _a.initialLeft, otherLineCoord = _a.otherLineCoord, 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);
@@ -11168,6 +11226,13 @@ var DraggableLineControl = function (_a) {
         chartArea.width - chartArea.right;
         chartArea.left;
         var newLeft = Math.min(Math.max(e.clientX - ref.current.offsetParent.getBoundingClientRect().left, chartArea.left), chartArea.right);
+        // Line limit
+        if (color === 'red' && newLeft > (otherLineCoord - 20)) {
+            newLeft = otherLineCoord - 20;
+        }
+        else if (color === 'blue' && newLeft < (otherLineCoord + 20)) {
+            newLeft = otherLineCoord + 20;
+        }
         setLeft(newLeft);
         onUpdate(newLeft); // Actualiza la posición de la línea en el gráfico
     };
@@ -11420,7 +11485,7 @@ var TrendingChart = function (_a) {
         }
     }, [chartShouldInitCursors, state.graphShouldUpdate]);
     return (React__default.createElement(Paper$1, { style: { height: '100%', position: 'relative' } },
-        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'red', chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, onUpdate: function (newLeft) {
+        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'red', chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, onUpdate: function (newLeft) {
                 setLineTabCoords(function (prevCoords) {
                     prevCoords.x1 = newLeft;
                     return prevCoords;
@@ -11429,7 +11494,7 @@ var TrendingChart = function (_a) {
                 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) {
+        lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'blue', initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, chartArea: chartArea, onUpdate: function (newLeft) {
                 setLineTabCoords(function (prevCoords) {
                     prevCoords.x2 = newLeft;
                     return prevCoords;