@dexteel/mesf-core 4.4.0-alpha → 4.4.1-alpha

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 # CHANGELOG
+## 4.4.0
+ - Add `/trendings` page. Needs specific version of mesf-core
 ## 4.3.3
  - Make submenu scrollable in Settings page
 ## 4.3.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, Container as Container$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, Box, 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';
@@ -7931,8 +7931,9 @@ n(css$1,{});
 
 var TagSelectionModal = function (_a) {
     var isOpen = _a.isOpen; _a.onClose; var onTagSelect = _a.onTagSelect;
-    var _b = useState([]), treeData = _b[0], setTreeData = _b[1];
-    var _c = useState([]), expanded = _c[0], setExpanded = _c[1];
+    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState([]), treeData = _c[0], setTreeData = _c[1];
+    var _d = useState([]), expanded = _d[0], setExpanded = _d[1];
     useEffect(function () {
         var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
             var children;
@@ -7940,10 +7941,12 @@ var TagSelectionModal = function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!isOpen) return [3 /*break*/, 2];
+                        setIsLoading(true);
                         return [4 /*yield*/, fetchChildren('root')];
                     case 1:
                         children = _a.sent();
                         setTreeData([{ tagId: null, tagName: 'root', children: children, isLoaded: true, shortName: 'Tags', tag: null }]);
+                        setIsLoading(false);
                         _a.label = 2;
                     case 2: return [2 /*return*/];
                 }
@@ -8047,9 +8050,9 @@ 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); }))); };
-    return (React__default.createElement("div", { style: { display: isOpen ? 'block' : 'none' } },
-        React__default.createElement("div", null,
-            React__default.createElement(TreeView$1, { expanded: expanded, onNodeSelect: handleNodeSelect, onNodeToggle: handleNodeToggle }, treeData.map(function (tree) { return renderTree(tree); })))));
+    return (React__default.createElement("div", { style: { display: isOpen ? 'block' : 'none', minHeight: "400px", minWidth: "600px" } },
+        React__default.createElement("div", null, isLoading ? (React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
+            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 TableComponent = function (_a) {
@@ -8128,18 +8131,6 @@ var TableComponent = function (_a) {
         setSelectedRowIndex(index);
         setContextMenuPosition({ x: event.clientX, y: event.clientY });
     };
-    var modalStyle = {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: 600,
-        minHeight: 800,
-        bgcolor: 'background.paper',
-        border: '2px solid #000',
-        boxShadow: 24,
-        p: 4
-    };
     return (React__default.createElement("div", null,
         React__default.createElement("table", { cellPadding: '5px' },
             React__default.createElement("thead", null,
@@ -8195,10 +8186,9 @@ var TableComponent = function (_a) {
                 })() : 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, "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description" },
+        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, { sx: modalStyle },
-                    React__default.createElement(Typography, { id: "modal-modal-title", variant: "h6", component: "h2" }, "Tags"),
+                React__default.createElement(Box, null,
                     React__default.createElement(Typography, { id: "modal-modal-description" },
                         React__default.createElement(TagSelectionModal, { isOpen: modalOpen, onClose: function () { return handleClose; }, onTagSelect: handleTagSelect })))))));
 };
@@ -8505,17 +8495,17 @@ var Trending = function (_a) {
             error);
     return (React__default.createElement("div", { className: "dashboard" },
         React__default.createElement("div", { className: "header" },
-            React__default.createElement("div", { className: "date-pickers" },
+            React__default.createElement("div", { className: "date-pickers", style: { marginBottom: "5vh" } },
                 React__default.createElement(DateComponent, { date: timeScope.start }),
                 React__default.createElement(DateComponent, { date: timeScope.end })),
             React__default.createElement("div", { className: "options" },
                 React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions })),
-            React__default.createElement("div", { className: "buttons" },
+            React__default.createElement("div", { className: "buttons", style: { padding: "15px" } },
                 React__default.createElement("button", null, "Button"),
                 React__default.createElement("button", null, "Button"))),
         React__default.createElement("div", { className: "chart-container" },
             React__default.createElement(Line, { data: chartData, options: chartOptions, plugins: [verticalLinePlugin] })),
-        React__default.createElement("div", { className: "table-container" },
+        React__default.createElement("div", { className: "table-container", style: { marginTop: "30vh" } },
             React__default.createElement(TableComponent, { tagList: tagList, setTagList: setTagList, cursorData: cursorData, onDeleteTag: handleDeleteTag, onAddTag: handleAddTag })),
         loading ? React__default.createElement("p", { className: "loading" }, "Loading...") : null));
 };
@@ -8524,17 +8514,16 @@ var Trending = function (_a) {
 var TrendingsIndex = function (props) {
     var _a = useState(new Date('2023-11-16')), startDate = _a[0]; _a[1];
     var _b = useState(new Date('2023-11-17')), endDate = _b[0]; _b[1];
-    return (React.createElement(Container$1, null,
-        React.createElement(Box, { p: 1 },
-            React.createElement(Paper, null,
-                React.createElement(Grid$1, { container: true, spacing: 3 },
-                    React.createElement(Grid$1, { item: true, xs: 12 },
-                        React.createElement(Trending, { title: "Trending Chart", start: startDate, end: endDate, tags: [
-                                { tagId: 29, tagName: 't1', tagType: 'number', color: 'red', autoScale: true, minScale: 0, maxScale: 100, visible: true },
-                                { tagId: 44, tagName: 't2', tagType: 'number', color: 'blue', autoScale: true, minScale: 0, maxScale: 100, visible: true },
-                                { tagId: 50, tagName: 't3', tagType: 'number', color: 'green', autoScale: true, minScale: 0, maxScale: 100, visible: true },
-                                { tagId: 46, tagName: 't4', tagType: 'number', color: 'black', autoScale: true, minScale: 0, maxScale: 100, visible: true },
-                            ] })))))));
+    return (React.createElement(Box, { p: 3, style: { maxWidth: '99%' } },
+        React.createElement(Paper, null,
+            React.createElement(Grid$1, { container: true, spacing: 3, style: { padding: "20px" } },
+                React.createElement(Grid$1, { item: true, xs: 12 },
+                    React.createElement(Trending, { title: "Trending Chart", start: startDate, end: endDate, tags: [
+                            { tagId: 29, tagName: 't1', tagType: 'number', color: 'red', autoScale: true, minScale: 0, maxScale: 100, visible: true },
+                            { tagId: 44, tagName: 't2', tagType: 'number', color: 'blue', autoScale: true, minScale: 0, maxScale: 100, visible: true },
+                            { tagId: 50, tagName: 't3', tagType: 'number', color: 'green', autoScale: true, minScale: 0, maxScale: 100, visible: true },
+                            { tagId: 46, tagName: 't4', tagType: 'number', color: 'black', autoScale: true, minScale: 0, maxScale: 100, visible: true },
+                        ] }))))));
 };
 
 var MESFMainRouter = function () {

package/package.json

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