@dexteel/mesf-core 7.6.0 → 7.7.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "7.6.0"
+  ".": "7.7.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [7.7.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.6.0...@dexteel/mesf-core-v7.7.0) (2025-12-22)
+
+
+### Features
+
+* **Trendings V2:** add resizable-panels to Trendings V2 ([9c7dd08](https://github.com/dexteel/mesf-core-frontend/commit/9c7dd0846792dc3a8f18f7c70f4cc7e3db98650a))
+
+
+### Bug Fixes
+
+* **CreateProfile:** add validation to ProfileName field to prevent whitespace input ([#573](https://github.com/dexteel/mesf-core-frontend/issues/573)) ([0c31f95](https://github.com/dexteel/mesf-core-frontend/commit/0c31f95a87286bc8a7dd9247ad37e05051227b8e))
+* **Trendings V2:** fix autoscale functionality ([3ce4265](https://github.com/dexteel/mesf-core-frontend/commit/3ce42652c305afa5391abd5cbe835c17f248b2bf))
+
 ## [7.6.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.5.2...@dexteel/mesf-core-v7.6.0) (2025-12-17)
 
 

package/GEMINI.md

@@ -0,0 +1,92 @@
+# @dexteel/mesf-core
+
+## Project Overview
+
+`@dexteel/mesf-core` is a React component library built with TypeScript and bundled using Rollup. It provides a comprehensive set of components, contexts, and utilities designed for building Manufacturing Execution Systems (MES). It acts as a core foundation for MESF-based applications, handling common concerns like authentication, navigation, settings, and layout.
+
+**Key Technologies:**
+*   **Core:** React 18, TypeScript
+*   **Build Tool:** Rollup
+*   **UI Framework:** Material-UI (MUI) v6
+*   **Data Grid:** AG Grid
+*   **Data Visualization:** Chart.js, ECharts
+*   **State Management:** React Context, Redux Toolkit, React Query
+*   **Authentication:** Azure MSAL
+*   **Real-time:** SignalR
+
+## Building and Running
+
+This project is a library, so "running" it typically means building it for consumption or watching for changes while linked to a consuming application.
+
+*   **Build for Production:**
+    ```bash
+    npm run build
+    ```
+    This cleans the `dist` folder and runs Rollup to produce the production bundle.
+
+*   **Watch Mode (Development):**
+    ```bash
+    npm run watch
+    # OR
+    npm start
+    ```
+    This runs Rollup in watch mode, rebuilding on file changes.
+
+*   **CI Build:**
+    ```bash
+    npm run ci
+    ```
+    Performs a clean build suitable for CI environments.
+
+*   **Type Check:**
+    ```bash
+    npm run type-check
+    ```
+
+## Development Conventions
+
+*   **Code Formatting:** The project uses [Biome](https://biomejs.dev/) for formatting and organizing imports.
+    *   Run check and fix: `npx @biomejs/biome check --write ./src`
+    *   **Note:** A pre-commit hook is configured to automatically run Biome on staged files.
+    *   **Linting:** Linting rules are currently disabled in `biome.json`.
+
+*   **Project Structure:**
+    *   `src/index.ts`: The main entry point that exports all public APIs (components, hooks, utilities).
+    *   `src/MESFMain.tsx`: The main "shell" component that wraps the application with necessary providers (Auth, Theme, Router, etc.).
+
+## Architecture
+
+The library follows a modular architecture designed to be consumed as a single package.
+
+### Key Components & Modules
+
+*   **`MESFMain`**: The top-level component that consumes applications should use. It accepts `routes`, `navbar`, and `authentication` configuration, setting up the entire application shell.
+*   **Contexts**: Extensive use of React Context for global state:
+    *   `userContext`: Authentication and user profile.
+    *   `UTLSettingContext`: User settings and preferences.
+    *   `assetContext`: Management of plant assets.
+    *   `LogbookSettingsContext`: Configuration for logbook features.
+*   **Services**: `src/services` contains singletons for API communication (`ApiService`) and time handling (`TimeService`).
+*   **Configuration**: `src/configuration` contains admin modules and pages for managing system settings.
+
+### Directory Map
+
+*   `src/account/`: Authentication logic (Azure AD, Login strategies).
+*   `src/components/`: Reusable UI components (Modals, Navigation, Shared buttons/icons).
+*   `src/configuration/`: Admin pages and configuration logic.
+*   `src/context/`: React Context providers.
+*   `src/controls/`: Complex form controls (Asset pickers, Tree pickers, Date filters).
+*   `src/hooks/`: Custom hooks (e.g., `useMesfRealtime`).
+*   `src/pages/`: Domain-specific pages provided by the core (Logbook, Trending, SP Executor).
+*   `src/utils/`: Helper functions.
+
+## Dependencies
+
+This library relies heavily on **peer dependencies**. Consuming applications are expected to provide:
+*   React & React DOM
+*   Material-UI (MUI) components & styling
+*   AG Grid
+*   React Router DOM
+*   Date management libraries (Moment, Date-fns)
+
+Check `package.json` for the full list of peer dependencies and their required versions.

package/dist/index.esm.js

@@ -59,6 +59,7 @@ import { DateTimePicker as DateTimePicker$1 } from '@mui/x-date-pickers/DateTime
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import axios from 'axios';
+import { Group as Group$1, Panel, Separator } from 'react-resizable-panels';
 import { LocalizationProvider as LocalizationProvider$1 } from '@mui/x-date-pickers/LocalizationProvider';
 import InsertChartIcon from '@mui/icons-material/InsertChart';
 import ReactECharts from 'echarts-for-react';
@@ -3859,13 +3860,13 @@ var INITIAL_VALUES$2 = {
 };
 
 var CreateProfile = function (_a) {
-    var _b;
+    var _b, _c;
     var show = _a.show, onHide = _a.onHide, suffixTitle = _a.suffixTitle;
-    var _c = useState(false), openSnackbar = _c[0], setOpenSnackbar = _c[1];
-    var _d = useState(""), message = _d[0], setMessage = _d[1];
-    var _e = useState(false), isSubmitLoading = _e[0], setIsSubmitLoading = _e[1];
-    var _f = useState(""), error = _f[0], setError = _f[1];
-    var _g = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _g.register, handleSubmit = _g.handleSubmit, reset = _g.reset, errors = _g.formState.errors;
+    var _d = useState(false), openSnackbar = _d[0], setOpenSnackbar = _d[1];
+    var _e = useState(""), message = _e[0], setMessage = _e[1];
+    var _f = useState(false), isSubmitLoading = _f[0], setIsSubmitLoading = _f[1];
+    var _g = useState(""), error = _g[0], setError = _g[1];
+    var _h = useForm({ defaultValues: INITIAL_VALUES$2 }), register = _h.register, handleSubmit = _h.handleSubmit, reset = _h.reset, errors = _h.formState.errors;
     var createProfile = useMutation({
         mutationFn: upsertProfile,
         onSuccess: function () {
@@ -3915,9 +3916,18 @@ var CreateProfile = function (_a) {
                         React.createElement(MesfModal.Content, { style: { padding: "15px 30px" } },
                             React.createElement(Grid2, { container: true, spacing: 1 },
                                 React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                                    React.createElement(TextField, __assign({}, register("ProfileName", { required: true }), { label: "Profile name", variant: "outlined", error: !!errors.ProfileName, fullWidth: true, margin: "dense", autoComplete: "off" })),
+                                    React.createElement(TextField, __assign({}, register("ProfileName", {
+                                        required: true,
+                                        validate: {
+                                            notWhitespace: function (value) {
+                                                return value.trim() !== "" ||
+                                                    "Profile name cannot be only whitespace";
+                                            },
+                                        },
+                                    }), { label: "Profile name", variant: "outlined", error: !!errors.ProfileName, fullWidth: true, margin: "dense", autoComplete: "off" })),
                                     " ",
-                                    ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === "required" && (React.createElement("span", { style: { fontSize: 12, color: "#F44336" } }, "Profile name is required"))))),
+                                    ((_b = errors.ProfileName) === null || _b === void 0 ? void 0 : _b.type) === "required" && (React.createElement("span", { style: { fontSize: 12, color: "#F44336" } }, "Profile name is required")),
+                                    ((_c = errors.ProfileName) === null || _c === void 0 ? void 0 : _c.type) === "notWhitespace" && (React.createElement("span", { style: { fontSize: 12, color: "#F44336" } }, errors.ProfileName.message))))),
                         React.createElement(MesfModal.Actions, { style: { padding: "20px 30px 30px" } },
                             React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
                                 React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
@@ -15270,6 +15280,9 @@ var TrendingChartV2 = function (_a) {
         if (tag.IsAutoScale) {
             // Use automatic scaling based on data
             baseConfig.scale = true;
+            // Explicitly clear min/max to ensure auto-scaling works when switching from fixed scale
+            baseConfig.min = null;
+            baseConfig.max = null;
         }
         else {
             // Use explicit min/max values
@@ -15971,10 +15984,11 @@ var TrendingChartV2 = function (_a) {
         }
     }, [onChartReady, dataLoadedTrigger, chartOptions]);
     // Track chart area coordinates for cursor positioning
+    var containerRef = useRef(null);
     useEffect(function () {
         var _a;
         var instance = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
-        if (!instance)
+        if (!instance || !containerRef.current)
             return;
         var updateChartArea = function () {
             try {
@@ -16017,14 +16031,18 @@ var TrendingChartV2 = function (_a) {
                 // Silently handle chart area update failure
             }
         };
+        // Create ResizeObserver to handle container resizing (panel resize)
+        var resizeObserver = new ResizeObserver(function () {
+            instance.resize();
+            // Small delay to ensure ECharts has updated its internal state
+            requestAnimationFrame(updateChartArea);
+        });
+        resizeObserver.observe(containerRef.current);
         // Update immediately
         updateChartArea();
-        // Update on window resize
-        var handleResize = function () {
-            setTimeout(updateChartArea, 100);
+        return function () {
+            resizeObserver.disconnect();
         };
-        window.addEventListener("resize", handleResize);
-        return function () { return window.removeEventListener("resize", handleResize); };
     }, [chartInstance, useSeparateGrids]);
     // Keyboard control for cursor navigation
     useEffect(function () {
@@ -16086,7 +16104,7 @@ var TrendingChartV2 = function (_a) {
                 zIndex: 10,
             } },
             React__default.createElement(CircularProgress, { size: "2rem" }))),
-        React__default.createElement("div", { style: { height: "100%", width: "100%", position: "relative" } },
+        React__default.createElement("div", { ref: containerRef, style: { height: "100%", width: "100%", position: "relative" } },
             React__default.createElement(ReactECharts, { key: chartKey, ref: chartRef, option: chartOptions, style: {
                     height: "100%",
                     width: "100%",
@@ -16375,12 +16393,14 @@ var TrendingsPageV2 = function () {
     var isLoading = viewsLoading || viewTagsLoading;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HelmetDexteel, { title: "Trendings" }),
-        React__default.createElement(Grid2, { container: true, direction: "column", wrap: "nowrap", size: 12, sx: {
-                p: 2,
+        React__default.createElement("div", { style: {
+                padding: "16px",
                 width: "100%",
                 height: "92vh",
                 position: "relative",
                 backgroundColor: "#FAFAFA",
+                display: "flex",
+                flexDirection: "column",
             } },
             isLoading && (React__default.createElement("div", { style: {
                     position: "absolute",
@@ -16395,14 +16415,38 @@ var TrendingsPageV2 = function () {
                     zIndex: 1000,
                 } },
                 React__default.createElement(CircularProgress, { size: "3rem" }))),
-            React__default.createElement(Grid2, { size: 12, style: { flexShrink: 0 } },
+            React__default.createElement("div", { style: { flexShrink: 0 } },
                 React__default.createElement(HeaderSectionV2, { autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh, setChartOptions: setChartOptions, chartInstance: chartInstance })),
-            React__default.createElement(Grid2, { size: 12 },
-                React__default.createElement(Divider, { sx: { my: 2 } })),
-            React__default.createElement(Grid2, { size: 12, sx: { flexGrow: 1, minHeight: 0, overflow: "hidden", height: "100%" } },
-                React__default.createElement(TrendingChartV2, { customOptions: chartOptions, series: filteredSeries, isLoading: seriesLoading, onChartReady: setChartInstance, dataLoadedTrigger: dataLoadedTrigger })),
-            React__default.createElement(Grid2, { style: { flexShrink: 0, height: "160px", marginTop: "3px" } },
-                React__default.createElement(TagsTableV2, null))),
+            React__default.createElement(Divider, { sx: { my: 2 } }),
+            React__default.createElement("div", { style: {
+                    flexGrow: 1,
+                    minHeight: 0,
+                    display: "flex",
+                    width: "100%",
+                } },
+                React__default.createElement(Group$1, { orientation: "vertical", style: { width: "100%", height: "100%" } },
+                    React__default.createElement(Panel, { defaultSize: 80, minSize: 20 },
+                        React__default.createElement("div", { style: { height: "100%", width: "100%" } },
+                            React__default.createElement(TrendingChartV2, { customOptions: chartOptions, series: filteredSeries, isLoading: seriesLoading, onChartReady: setChartInstance, dataLoadedTrigger: dataLoadedTrigger }))),
+                    React__default.createElement(Separator, { style: {
+                            height: "10px",
+                            background: "#f0f0f0",
+                            cursor: "row-resize",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderTop: "1px solid #e0e0e0",
+                            borderBottom: "1px solid #e0e0e0",
+                        } },
+                        React__default.createElement("div", { style: {
+                                width: "40px",
+                                height: "4px",
+                                backgroundColor: "#ccc",
+                                borderRadius: "2px",
+                            } })),
+                    React__default.createElement(Panel, { defaultSize: 20, minSize: 10 },
+                        React__default.createElement("div", { style: { height: "100%", width: "100%", overflow: "auto" } },
+                            React__default.createElement(TagsTableV2, null)))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, size: "xl", title: "ERROR" })));
 };