@dexteel/mesf-core 4.5.0 → 4.5.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-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, FormControl as FormControl$1, Select as Select$1, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+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, 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 * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useMemo, useCallback, lazy, Suspense } from 'react';
@@ -21,7 +21,7 @@ import { isNil, get as get$1 } from 'lodash';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import axios from 'axios';
-import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, TimeScale } from 'chart.js';
+import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
 import moment from 'moment';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { Line } from 'react-chartjs-2';
@@ -8449,30 +8449,29 @@ 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 useTagsTableStyles = makeStyles$1(function (theme) { return ({
+    checkbox: {
+        '& input[type="checkbox"]': {
+            zoom: 1.5
+        },
+        textAlign: 'center'
+    }
+}); });
+
 var TableComponent = function (_a) {
     var tagList = _a.tagList, setTagList = _a.setTagList, cursorData = _a.cursorData, onDeleteTag = _a.onDeleteTag, onAddTag = _a.onAddTag;
+    var classes = useTagsTableStyles();
     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;
-            });
-        });
+        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 handleVisibilityChange = function (index, value) {
-        setTagList(function (prev) {
-            return prev.map(function (tag, currentIndex) {
-                return currentIndex === index ? __assign(__assign({}, tag), { visible: value }) : tag;
-            });
-        });
+        setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { visible: value }) : tag; }); });
     };
     var handleAutoScaleChange = function (index, value) {
-        setTagList(function (prev) {
-            return prev.map(function (tag, currentIndex) {
-                return currentIndex === index ? __assign(__assign({}, tag), { autoScale: value }) : tag;
-            });
-        });
+        setTagList(function (prev) { return prev.map(function (tag, currentIndex) { return currentIndex === index ? __assign(__assign({}, tag), { autoScale: value }) : tag; }); });
     };
     var _b = useState(null), selectedRowIndex = _b[0], setSelectedRowIndex = _b[1];
     var _c = useState(false), modalOpen = _c[0], setModalOpen = _c[1];
@@ -8487,17 +8486,10 @@ 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 _d = useState({ x: 0, y: 0 }), contextMenuPosition = _d[0], setContextMenuPosition = _d[1];
     var contextMenuOptions = [
-        {
-            id: "delete",
-            label: "Remove Tag",
-            onClick: function () { return handleDelete(); }
-        },
-        { id: "add", label: "Add Tag", onClick: function () { return handleTagAdd(); } },
+        { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
+        { id: 'add', label: 'Add Tag', onClick: function () { return handleTagAdd(); } },
         // ... other options
     ];
     var handleTagAdd = function () {
@@ -8543,71 +8535,82 @@ var TableComponent = function (_a) {
         setSelectedRowIndex(index);
         setContextMenuPosition({ x: event.clientX, y: event.clientY });
     };
-    return (React__default.createElement("div", null,
-        React__default.createElement("table", { cellPadding: "5px" },
-            React__default.createElement("thead", null,
-                React__default.createElement("tr", null,
-                    React__default.createElement("th", null, "Visible"),
-                    React__default.createElement("th", null, "Tag Name"),
-                    React__default.createElement("th", null, "Color"),
-                    React__default.createElement("th", null, "Min Scale"),
-                    React__default.createElement("th", null, "Max Scale"),
-                    React__default.createElement("th", null, "AutoScale"),
-                    React__default.createElement("th", null, "X"),
-                    React__default.createElement("th", null, "Y"))),
-            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", null,
-                    React__default.createElement("input", { type: "checkbox", checked: tag.visible, onChange: function (e) {
-                            return handleVisibilityChange(index, e.target.checked);
-                        } })),
-                React__default.createElement("td", null, tag.tagName),
-                React__default.createElement("td", null,
-                    React__default.createElement("div", { style: {
-                            backgroundColor: tag.color,
-                            width: "20px",
-                            height: "20px"
-                        } })),
-                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", null,
-                    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))); }))),
+    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 },
+        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("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(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("div", { style: {
+                                    backgroundColor: tag.color,
+                                    width: '20px',
+                                    height: '20px'
+                                } })),
+                        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))); }))))),
         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, { 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" },
@@ -8837,7 +8840,7 @@ var CustomOptionsComponent = function (_a) {
                 "Stepped"))));
 };
 
-Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, TimeScale, zoomPlugin);
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
 function getVerticalLinePlugin(setCursorData) {
     return {
         id: "verticalLinePlugin",
@@ -9202,17 +9205,12 @@ var Trending = function (_a) {
                     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(Grid$1, { item: true, xs: 12, style: { height: "45%" } },
-            React__default.createElement(Paper$1, { style: { height: "100%", overflow: "hidden" } },
+        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(Grid$1, { item: true, xs: 12, style: {
-                height: "40%",
-                display: "flex",
-                justifyContent: "center",
-                flexDirection: "column"
-            } },
+        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 })),
-        loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: "center" } },
+        loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
             React__default.createElement("p", null, "Loading...")))));
 };
 

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

@@ -1,6 +1,6 @@
-import React from "react";
-import { CursorData, TagList } from "./Trending";
-import "./ContextMenu.css";
+import React from 'react';
+import { CursorData, TagList } from './Trending';
+import './ContextMenu.css';
 interface TableComponentProps {
     tagList: TagList;
     setTagList: React.Dispatch<React.SetStateAction<TagList>>;

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

@@ -0,0 +1 @@
+export declare const useTagsTableStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"checkbox">;

package/package.json

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