@dexteel/mesf-core 4.8.1 → 4.8.3

package/CHANGELOG.md

@@ -1,4 +1,8 @@
 # CHANGELOG
+## 4.8.3
+- Trending: Add new icon to ViewTags table and Add tag modal to know if it is Digital or Real (#205 and #206)
+## 4.8.2
+ - Trending: Show only the significant digits in the date field of the table (#190)
 ## 4.8.0-1
 - Trending: Fix when removing view tag bug (#184)
 - Trending: Add new button to navigate to current date (#189 and #207)

package/dist/index.esm.js

@@ -9975,8 +9975,94 @@ var ColorPicker = function (_a) {
                 } })); })))));
 };
 
+var useTagsTableStyles = makeStyles$1(function (theme) { return ({
+    checkbox: {
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        },
+        textAlign: 'center'
+    },
+    rowHover: {
+        '&:hover': {
+            backgroundColor: "#f2f2f2"
+        }
+    },
+    topTitles: {
+        border: "0.0625rem black solid",
+        borderBottom: "none",
+        backgroundColor: "#e9ecef"
+    },
+    bottomTitlesRow: {
+        '& th': {
+            border: "1px black solid"
+        },
+        backgroundColor: "#e9ecef"
+    },
+    doubleInput: {
+        padding: "0",
+        '& input[type="text"] ': {
+            width: "100%",
+            height: "17px",
+            display: "block",
+            margin: "0",
+            padding: "0"
+        }
+    },
+    inputCol: {
+        width: "11.25rem",
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    aliasCol: {
+        width: "18rem",
+        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'
+    },
+    numberInput: {
+        '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+            '-webkit-appearance': 'none',
+            margin: 0
+        },
+        '&': {
+            '-moz-appearance': 'textfield'
+        }
+    },
+    xStats: {
+    // ...
+    },
+    dataType: {
+        width: '30px',
+        height: '30px',
+        color: "white",
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: 'pointer',
+        border: "1px black solid"
+    }
+}); });
+
 var TagSelectionModal = function (_a) {
     var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
+    var classes = useTagsTableStyles();
     var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState(''), error = _c[0], setError = _c[1];
     var _d = useState([]), treeData = _d[0], setTreeData = _d[1];
@@ -10058,7 +10144,8 @@ var TagSelectionModal = function (_a) {
                                                         IsAutoScale: true,
                                                         MinScale: dbTag.minScale,
                                                         MaxScale: dbTag.maxScale,
-                                                        IsVisible: true
+                                                        IsVisible: true,
+                                                        TagType: dbTag.tagType
                                                     }
                                                 }];
                                     }
@@ -10115,7 +10202,14 @@ var TagSelectionModal = function (_a) {
         }
         return null;
     };
-    var renderTree = function (node) { return (React__default.createElement(TreeItem$1, { key: node.TagName, nodeId: node.TagName, label: node.shortName, endIcon: React__default.createElement(ArrowDropDownIcon, null), icon: node.children && node.children.length > 0 ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertDriveFileIcon, null)) }, node.children && node.children.map(function (child) { return renderTree(child); }))); };
+    var renderTree = function (node) {
+        var _a;
+        return (React__default.createElement(TreeItem$1, { key: node.TagName, nodeId: node.TagName, label: React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+                ((_a = node.tag) === null || _a === void 0 ? void 0 : _a.TagType) && (React__default.createElement("div", { className: classes.dataType, style: {
+                        backgroundColor: node.tag.TagType === 'A' ? 'blue' : 'red'
+                    } }, node.tag.TagType)),
+                React__default.createElement("div", { style: { paddingLeft: "5px" } }, node.shortName)), endIcon: React__default.createElement(ArrowDropDownIcon, null), icon: node.children && node.children.length > 0 ? (React__default.createElement(FolderIcon, null)) : (React__default.createElement(InsertDriveFileIcon, null)) }, node.children && node.children.map(function (child) { return renderTree(child); })));
+    };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { style: {
                 display: isOpen ? "block" : "none",
@@ -10722,98 +10816,55 @@ var useTagsDataTable = function (_a) {
     }, [viewTags, chartData, cursorData]);
 };
 
-var useTagsTableStyles = makeStyles$1(function (theme) { return ({
-    checkbox: {
-        '& input[type="checkbox"]': {
-            zoom: 1.5
-        },
-        textAlign: 'center'
-    },
-    rowHover: {
-        '&:hover': {
-            backgroundColor: "#f2f2f2"
-        }
-    },
-    topTitles: {
-        border: "0.0625rem black solid",
-        borderBottom: "none",
-        backgroundColor: "#e9ecef"
-    },
-    bottomTitlesRow: {
-        '& th': {
-            border: "1px black solid"
-        },
-        backgroundColor: "#e9ecef"
-    },
-    doubleInput: {
-        padding: "0",
-        '& input[type="text"] ': {
-            width: "100%",
-            height: "17px",
-            display: "block",
-            margin: "0",
-            padding: "0"
-        }
-    },
-    inputCol: {
-        width: "11.25rem",
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    },
-    aliasCol: {
-        width: "15rem",
-        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'
-    },
-    numberInput: {
-        '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
-            '-webkit-appearance': 'none',
-            margin: 0
-        },
-        '&': {
-            '-moz-appearance': 'textfield'
-        }
-    },
-    xStats: {
-    // ...
+var formatTimeDiffWithMs = function (start, end) {
+    // Calculate total difference in milliseconds
+    var totalMilliseconds = end - start;
+    // Convert milliseconds to seconds, minutes, hours, days, and months for comparison
+    var seconds = totalMilliseconds / 1000;
+    var minutes = seconds / 60;
+    var hours = minutes / 60;
+    var days = hours / 24;
+    var months = days / 30; // Approximation of a month
+    var remainingSeconds = seconds % 60; // Remaining seconds after full minutes
+    if (months > 12) {
+        var years = months / 12;
+        return "".concat(Math.floor(years), " years, ").concat(Math.floor(months % 12), " months");
+    }
+    else if (months > 6) {
+        return "".concat(Math.floor(months), " months, ").concat(Math.floor(days % 30), " days");
+    }
+    else if (days > 10) {
+        return "".concat(Math.floor(days), " days, ").concat(Math.floor(hours % 24), " hours");
+    }
+    else if (days > 1) {
+        return "".concat(Math.floor(days), " days, ").concat(Math.floor(hours % 24), " hours");
+    }
+    else if (hours > 12) {
+        return "".concat(Math.floor(hours), " hours, ").concat(Math.floor(minutes % 60), " minutes, ").concat(remainingSeconds.toFixed(2), " seconds");
+    }
+    else if (hours < 1) {
+        // If there are 0 hours, return just minutes and remaining seconds
+        return "".concat(Math.floor(minutes), " minutes, ").concat(remainingSeconds.toFixed(2), " seconds");
+    }
+    else {
+        // For time intervals less than 12 hours but more than 1 hour, return hours, minutes, and remaining seconds
+        return "".concat(Math.floor(hours), " hours, ").concat(Math.floor(minutes % 60), " minutes, ").concat(remainingSeconds.toFixed(2), " seconds");
     }
-}); });
-
-var timeDifference = function (start, end) {
-    var differenceMilliseconds = start - end;
-    var seconds = Math.floor(differenceMilliseconds / 1000);
-    var minutes = Math.floor(seconds / 60);
-    var hours = Math.floor(minutes / 60);
-    var remainingMinutes = minutes % 60;
-    var remainingSeconds = seconds % 60;
-    return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
 };
 
 var TableComponent = function (_a) {
     var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI;
     var classes = useTagsTableStyles();
     var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setGraphShouldUpdate = _d.setGraphShouldUpdate; _d.setViewSelected;
-    var _e = useState(''), error = _e[0], setError = _e[1];
-    var _f = useState(false); _f[0]; var setIsLoading = _f[1];
-    var _g = useState(null), viewTagForDelete = _g[0], setViewTagForDelete = _g[1];
+    var _e = useState({}); _e[0]; _e[1];
+    var _f = useState(''), error = _f[0], setError = _f[1];
+    var _g = useState(false); _g[0]; var setIsLoading = _g[1];
+    var _h = useState(null), viewTagForDelete = _h[0], setViewTagForDelete = _h[1];
+    var _j = useState(null), selectedRowIndex = _j[0], setSelectedRowIndex = _j[1];
+    var _k = useState(false), addTagModalOpen = _k[0], setAddTagModalOpen = _k[1];
+    var _l = useState(false), saveAsViewModalOpen = _l[0], setSaveAsViewModalOpen = _l[1];
+    var _m = useState(false), loadViewOpen = _m[0], setLoadViewOpen = _m[1];
+    var _o = useState(''), snackbarMessage = _o[0], setSnackbarMessage = _o[1];
     var dataTable = useTagsDataTable({ viewTags: viewTags, chartData: chartData, cursorData: cursorData });
     var handleChange = function (tagId, value, property) {
         var newTags = viewTags.map(function (tag) {
@@ -10859,11 +10910,6 @@ var TableComponent = function (_a) {
             handleAutoScaleChange(tagId, checked);
         }
     };
-    var _h = useState(null), selectedRowIndex = _h[0], setSelectedRowIndex = _h[1];
-    var _j = useState(false), addTagModalOpen = _j[0], setAddTagModalOpen = _j[1];
-    var _k = useState(false), saveAsViewModalOpen = _k[0], setSaveAsViewModalOpen = _k[1];
-    var _l = useState(false), loadViewOpen = _l[0], setLoadViewOpen = _l[1];
-    var _m = useState(''), snackbarMessage = _m[0], setSnackbarMessage = _m[1];
     var handleClose = function () { return setAddTagModalOpen(false); };
     var ContextMenu = function (_a) {
         var x = _a.x, y = _a.y, options = _a.options;
@@ -10874,7 +10920,7 @@ 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 _o = useState({ x: 0, y: 0 }), contextMenuPosition = _o[0], setContextMenuPosition = _o[1];
+    var _p = useState({ x: 0, y: 0 }), contextMenuPosition = _p[0], setContextMenuPosition = _p[1];
     var contextMenuOptions = [
         { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
         { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
@@ -11015,12 +11061,9 @@ var TableComponent = function (_a) {
                                 React__default.createElement("th", { className: classes.color }),
                                 React__default.createElement("th", { colSpan: 4, className: "".concat(classes.topTitles, " ").concat(classes.scale) }, "Scale"),
                                 React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
-                                    var date = new Date(cursorData.x1);
-                                    var formattedDate = date.toLocaleString('en-US', {
-                                        hour12: false,
-                                        month: 'short',
-                                        day: 'numeric'
-                                    });
+                                    var dateX1 = new Date(cursorData.x1);
+                                    var dateX2 = new Date(cursorData.x2);
+                                    var formattedDate = dateX1.toLocaleString('en-US', __assign({ hour12: false, month: 'short', day: 'numeric' }, (dateX1.getFullYear() !== dateX2.getFullYear() && { year: 'numeric' })));
                                     var dateText = "".concat(formattedDate);
                                     return (React__default.createElement(React__default.Fragment, null,
                                         React__default.createElement("span", { style: {
@@ -11034,12 +11077,9 @@ var TableComponent = function (_a) {
                                         dateText));
                                 })() : null),
                                 React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? (function () {
-                                    var date = new Date(cursorData.x2);
-                                    var formattedDate = date.toLocaleString('en-US', {
-                                        hour12: false,
-                                        month: 'short',
-                                        day: 'numeric'
-                                    });
+                                    var dateX1 = new Date(cursorData.x1);
+                                    var dateX2 = new Date(cursorData.x2);
+                                    var formattedDate = dateX2.toLocaleString('en-US', __assign({ hour12: false, month: 'short', day: 'numeric' }, (dateX1.getFullYear() !== dateX2.getFullYear() && { year: 'numeric' })));
                                     var dateText = "".concat(formattedDate);
                                     return (React__default.createElement(React__default.Fragment, null,
                                         React__default.createElement("span", { style: {
@@ -11052,7 +11092,7 @@ var TableComponent = function (_a) {
                                             } }),
                                         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("th", { colSpan: 3, className: "".concat(classes.topTitles, " ").concat(classes.xStats) }, cursorData ? formatTimeDiffWithMs(cursorData.x1, cursorData.x2) : null)))),
                     React__default.createElement("table", { style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
                         React__default.createElement("thead", null,
                             React__default.createElement("tr", { className: classes.bottomTitlesRow },
@@ -11073,7 +11113,7 @@ var TableComponent = function (_a) {
                                             minute: '2-digit',
                                             second: '2-digit'
                                         });
-                                        var milliseconds = date.getMilliseconds().toString().padStart(2, '0');
+                                        var milliseconds = (date.getMilliseconds() / 1000).toFixed(2).substring(2);
                                         var dateText = "".concat(formattedHour, ".").concat(milliseconds, " hs");
                                         return (React__default.createElement(React__default.Fragment, null, dateText));
                                     })() : null,
@@ -11088,7 +11128,7 @@ var TableComponent = function (_a) {
                                             minute: '2-digit',
                                             second: '2-digit'
                                         });
-                                        var milliseconds = date.getMilliseconds().toString().padStart(2, '0');
+                                        var milliseconds = (date.getMilliseconds() / 1000).toFixed(2).substring(2);
                                         var dateText = "".concat(formattedHour, ".").concat(milliseconds, " hs");
                                         return (React__default.createElement(React__default.Fragment, null, dateText));
                                     })() : null,
@@ -11108,7 +11148,8 @@ var TableComponent = function (_a) {
                                     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.aliasCol },
                                     React__default.createElement(Tooltip, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
-                                        React__default.createElement("div", null,
+                                        React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+                                            React__default.createElement("div", { className: classes.dataType, style: { backgroundColor: tag.TagType === "Real" ? "blue" : "red" } }, tag.TagType === "Real" ? "A" : "D"),
                                             React__default.createElement("input", { type: "text", style: { width: '100%' }, value: tag.Alias || tag.TagName, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                                     var newAlias = e.target.value;
                                                     handleChangeAlias(tag.TagId, newAlias);