@dexteel/mesf-core 7.21.0 → 7.22.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "7.21.0"
+  ".": "7.22.1"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [7.22.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.22.0...@dexteel/mesf-core-v7.22.1) (2026-05-11)
+
+
+### Bug Fixes
+
+* **logs:** improve large log filtering performance ([80eaa0a](https://github.com/dexteel/mesf-core-frontend/commit/80eaa0a0f0535e0e3f67397d85b97efaa7b8659b))
+
+## [7.22.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.21.0...@dexteel/mesf-core-v7.22.0) (2026-05-09)
+
+
+### Features
+
+* **trendings-v2:** simplify chart layout ([114ea8f](https://github.com/dexteel/mesf-core-frontend/commit/114ea8fd2f5495f8ccc2d52bcff0bdb6d5202999))
+
 ## [7.21.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.20.1...@dexteel/mesf-core-v7.21.0) (2026-04-24)
 
 

package/dist/configuration/pages/log/components/LogsTable/customHooks/useLogTableData.d.ts

@@ -1,4 +1,4 @@
 import { ColDef } from "ag-grid-community";
-export declare const useLogTableData: () => {
+export declare const useLogTableData: (timezone: "UTC" | "Server") => {
     columnDefs: ColDef<any, any>[];
 };

package/dist/index.esm.js

@@ -25,7 +25,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import FindInPageIcon from '@mui/icons-material/FindInPage';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
-import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, ExpandLess, ExpandMore, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group as Group$1, Assignment, Chat, ViewList, Build, Settings as Settings$2, Code as Code$1, FastRewind, FastForward, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
+import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, ExpandLess, ExpandMore, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group as Group$1, Assignment, Chat, ViewList, Build, Settings as Settings$2, Code as Code$1, KeyboardDoubleArrowLeft, KeyboardArrowLeft, KeyboardArrowRight, KeyboardDoubleArrowRight, Update, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import FormatListBulletedSharpIcon from '@mui/icons-material/FormatListBulletedSharp';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
@@ -7853,14 +7853,14 @@ const TagFilter = ({ tagFilters, setTagFilters, filterContext, }) => {
         startDate: filterContext.startDate,
         endDate: filterContext.endDate,
         logTypeCode: filterContext.logTypeCode,
-        tagFilters,
+        tagFilters: filterContext.tagFilters,
     });
     const { data: tagValues, isLoading: isLoadingValues, error: valuesError, isError: isValuesError, } = useSearchLogTagValues({
         tagName: selectedTag ? selectedTag.TagName : "",
         startDate: filterContext.startDate,
         endDate: filterContext.endDate,
         logTypeCode: filterContext.logTypeCode,
-        tagFilters,
+        tagFilters: filterContext.tagFilters,
     });
     const handleOpenPopover = (event) => {
         setAnchorEl(event.currentTarget);
@@ -8056,17 +8056,24 @@ const SearchFilter = ({ search, setSearch }) => {
             }, label: "Search", variant: "outlined", size: "small", value: search, onChange: (e) => setSearch(e.target.value), autoComplete: "off" })));
 };
 
-const useLogTableData = () => {
+const useLogTableData = (timezone) => {
     const backgroundColor = (logTypeCode) => {
         return get(LOG_TYPE_CODES, `${logTypeCode[0]}.color`, "#BBBBBB");
     };
-    const [columnDefs] = useState([
+    const columnDefs = useMemo(() => [
         {
             field: "Timestamp",
             headerName: "Time",
             minWidth: 220,
             flex: 1,
             headerClass: "ag-header-cell-centered",
+            valueFormatter: ({ value }) => {
+                if (!value)
+                    return "";
+                return timezone === "UTC"
+                    ? moment$g(value).utc().format("YYYY-MM-DD HH:mm:ss z")
+                    : dxtToLocalServerTime(value, "yyyy-MM-dd HH:mm:ss z");
+            },
         },
         {
             field: "Source",
@@ -8126,7 +8133,7 @@ const useLogTableData = () => {
             valueFormatter: ({ value }) => value || " ",
             headerClass: "ag-header-cell-centered",
         },
-    ]);
+    ], [timezone]);
     return { columnDefs };
 };
 
@@ -8148,7 +8155,7 @@ const getLogs = (params, signal) => __awaiter(void 0, void 0, void 0, function*
         },
         { name: "TagFilters", value: tagFiltersJson },
     ];
-    const resp = yield apiService.callV2("[MES].[GetLogs]", parameters);
+    const resp = yield apiService.callV2("[MES].[GetLogs]", parameters, signal);
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
         rows = rows.map((log) => (Object.assign(Object.assign({}, log), { Timestamp: log.Timestamp ? moment$g.utc(log["Timestamp"]).toDate() : null })));
@@ -8271,48 +8278,55 @@ const useSearchLogs = ({ startDate, endDate, logTypeCode, autoRefresh, tagFilter
             endDate,
             logTypeCode,
             tagFilters,
-        }),
+        }, signal),
         refetchInterval: autoRefresh ? 5000 : false,
         enabled: !!startDate && (!!endDate || autoRefresh),
+        keepPreviousData: true,
         staleTime: 10000,
     });
 };
 const getLogTypeByCodeId = (logTypeCodeId) => {
     return get(LOG_TYPE_CODES, `${logTypeCodeId}.description`, " -");
 };
+const getDefaultFilters = () => ({
+    startDate: moment$g().add(-5, "days").hour(0).minute(0).second(0).toDate(),
+    endDate: moment$g().hour(23).minute(59).second(59).toDate(),
+    logTypeCode: ["I", "W", "E"],
+    autoRefresh: false,
+    tagFilters: [],
+});
+const copyFilters = (filters) => (Object.assign(Object.assign({}, filters), { logTypeCode: [...filters.logTypeCode], tagFilters: [...filters.tagFilters] }));
 const TableLogs = () => {
-    const [startDate, setStartDate] = useState(moment$g().add(-5, "days").hour(0).minute(0).second(0).toDate());
-    const [endDate, setEndDate] = useState(moment$g().hour(23).minute(59).second(59).toDate());
+    var _a;
+    const [draftFilters, setDraftFilters] = useState(() => getDefaultFilters());
+    const [appliedFilters, setAppliedFilters] = useState(() => getDefaultFilters());
+    const [isApplyingFilters, setIsApplyingFilters] = useState(false);
+    const hasMountedRef = useRef(false);
     const [timezone, setTimezone] = useState("UTC");
     const [search, setSearch] = useState("");
-    const [logTypeCode, setLogTypeCode] = useState(["I", "W", "E"]);
-    const [autoRefresh, setAutoRefresh] = useState(false);
-    const [tagFilters, setTagFilters] = useState([]);
     const [gridAPI, setGridAPI] = useState(null);
     const [error, setError] = useState("");
     const [showLogModal, setShowLogModal] = useState(false);
     const [selectedLog, setSelectedLog] = useState(undefined);
-    const { data: rows, isLoading, refetch, isError, error: e, } = useSearchLogs({
-        startDate,
-        endDate,
-        logTypeCode: logTypeCode.join(","),
-        autoRefresh,
-        tagFilters,
+    const { data: rows, isLoading, isFetching, isError, error: e, } = useSearchLogs({
+        startDate: appliedFilters.startDate,
+        endDate: appliedFilters.endDate,
+        logTypeCode: appliedFilters.logTypeCode.join(","),
+        autoRefresh: appliedFilters.autoRefresh,
+        tagFilters: appliedFilters.tagFilters,
     });
     const onGridReady = (params) => {
         setGridAPI(params.api);
     };
-    const formattedRows = rows === null || rows === void 0 ? void 0 : rows.map(({ LogId, Timestamp, Source, Message, LogTypeCode, User }) => ({
+    const formattedRows = useMemo(() => rows === null || rows === void 0 ? void 0 : rows.map(({ LogId, Timestamp, Source, Message, LogTypeCode, User }) => ({
         id: LogId,
-        Timestamp: timezone === "UTC"
-            ? moment$g(Timestamp).utc().format("YYYY-MM-DD HH:mm:ss z")
-            : dxtToLocalServerTime(Timestamp, "yyyy-MM-dd HH:mm:ss z"),
+        Timestamp,
         Source,
         Message: isNil(Message) ? "" : Message.replaceAll("Added", " Added"),
         LogTypeCode: getLogTypeByCodeId(LogTypeCode),
         User,
-    }));
-    const { columnDefs } = useLogTableData();
+    })), [rows]);
+    const { columnDefs } = useLogTableData(timezone);
     const defaultColDef = useMemo(() => {
         return {
             sortable: true,
@@ -8328,16 +8342,17 @@ const TableLogs = () => {
         };
     }, []);
     const { showContextMenu, registerConfig } = useContextMenuMESF();
+    const handleAutoRefreshChange = (checked) => {
+        const nextFilters = checked
+            ? Object.assign(Object.assign({}, draftFilters), { startDate: moment$g().add(-15, "minutes").toDate(), endDate: null, autoRefresh: true }) : Object.assign(Object.assign({}, draftFilters), { endDate: moment$g().hour(23).minute(59).second(59).toDate(), autoRefresh: false });
+        setDraftFilters(copyFilters(nextFilters));
+    };
     const handleResetButtonClick = () => {
-        setStartDate(moment$g().add(-5, "days").hour(0).minute(0).second(0).toDate());
-        setEndDate(moment$g().hour(23).minute(59).second(59).toDate());
+        const filters = getDefaultFilters();
+        setDraftFilters(copyFilters(filters));
         setSearch("");
-        gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
-        setLogTypeCode(["I", "W", "E"]);
-        setTagFilters([]);
         setSelectedLog(undefined);
         setError("");
-        refetch();
     };
     const rowClicked = (rowClickedEvent) => {
         let data = rowClickedEvent.data;
@@ -8360,11 +8375,11 @@ const TableLogs = () => {
         handleResetButtonClick,
     });
     const filterContext = useMemo(() => ({
-        startDate,
-        endDate,
-        logTypeCode: logTypeCode.join(","),
-        tagFilters,
-    }), [startDate, endDate, logTypeCode, tagFilters]);
+        startDate: appliedFilters.startDate,
+        endDate: appliedFilters.endDate,
+        logTypeCode: appliedFilters.logTypeCode.join(","),
+        tagFilters: appliedFilters.tagFilters,
+    }), [appliedFilters]);
     useEffect(() => {
         registerConfig({
             id: "TableLogs",
@@ -8376,6 +8391,24 @@ const TableLogs = () => {
             setError(e.message);
         }
     }, [isError, e]);
+    useEffect(() => {
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true;
+            return;
+        }
+        setIsApplyingFilters(true);
+        const timeout = window.setTimeout(() => {
+            setAppliedFilters(copyFilters(draftFilters));
+            setIsApplyingFilters(false);
+        }, 100);
+        return () => window.clearTimeout(timeout);
+    }, [draftFilters]);
+    useEffect(() => {
+        const timeout = window.setTimeout(() => {
+            gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", search);
+        }, 350);
+        return () => window.clearTimeout(timeout);
+    }, [gridAPI, search]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Grid2, { container: true, justifyContent: "flex-start", p: 1, spacing: 1 },
             React.createElement(Grid2, { size: { md: 12, xs: 12 } },
@@ -8402,43 +8435,32 @@ const TableLogs = () => {
                         React.createElement(CardContent, { sx: { width: "100%" } },
                             React.createElement(Grid2, { container: true, alignItems: "center", direction: "row", spacing: 2 },
                                 React.createElement(Grid2, { size: { md: 1.5 } },
-                                    React.createElement(DateFilter, { label: "From", date: startDate, setDate: (date) => setStartDate(date || new Date()), maxDate: endDate !== null && endDate !== void 0 ? endDate : undefined })),
+                                    React.createElement(DateFilter, { label: "From", date: draftFilters.startDate, setDate: (date) => setDraftFilters(Object.assign(Object.assign({}, draftFilters), { startDate: date || new Date() })), maxDate: (_a = draftFilters.endDate) !== null && _a !== void 0 ? _a : undefined })),
                                 React.createElement(Grid2, { size: { md: 1.5 } },
-                                    React.createElement(DateFilter, { label: "To", date: endDate, setDate: (date) => {
+                                    React.createElement(DateFilter, { label: "To", date: draftFilters.endDate, setDate: (date) => {
                                             if (date) {
-                                                setEndDate(date);
-                                                setAutoRefresh(false);
+                                                setDraftFilters(Object.assign(Object.assign({}, draftFilters), { endDate: date, autoRefresh: false }));
                                             }
-                                        }, minDate: startDate })),
+                                        }, minDate: draftFilters.startDate })),
                                 React.createElement(Grid2, { size: { md: 2, xs: 12 } },
-                                    React.createElement(CodeFilter, { LogTypeCode: logTypeCode, setLogTypeCodeFilter: (logTypeCodes) => setLogTypeCode(logTypeCodes) })),
+                                    React.createElement(CodeFilter, { LogTypeCode: draftFilters.logTypeCode, setLogTypeCodeFilter: (logTypeCodes) => setDraftFilters(Object.assign(Object.assign({}, draftFilters), { logTypeCode: logTypeCodes })) })),
                                 React.createElement(Grid2, { size: { md: 1, xs: 12 } },
                                     React.createElement(TimezoneSelector, { value: timezone, onChange: setTimezone })),
                                 React.createElement(Grid2, { size: { md: 1.5, xs: 12 } },
-                                    React.createElement(FormControlLabel, { checked: autoRefresh, control: React.createElement(Switch, { color: "primary" }), label: "Auto Refresh", onChange: (e, checked) => {
-                                            if (checked) {
-                                                setEndDate(null);
-                                            }
-                                            else {
-                                                setEndDate(moment$g().hour(23).minute(59).second(59).toDate());
-                                            }
-                                            setAutoRefresh(checked);
-                                        } })),
+                                    React.createElement(FormControlLabel, { checked: draftFilters.autoRefresh, control: React.createElement(Switch, { color: "primary" }), label: "Auto Refresh", onChange: (e, checked) => handleAutoRefreshChange(checked) })),
                                 React.createElement(Grid2, { size: { md: 3.5, xs: 12 } },
-                                    React.createElement(SearchFilter, { search: search, setSearch: (search) => {
-                                            setSearch(search);
-                                            gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", search);
-                                        } })),
+                                    React.createElement(SearchFilter, { search: search, setSearch: setSearch })),
                                 React.createElement(Grid2, { size: { md: 1, xs: 12 }, style: { paddingTop: 8 } },
                                     React.createElement(Button, { variant: "contained", color: "inherit", onClick: handleResetButtonClick, fullWidth: true }, "Reset")),
                                 React.createElement(Grid2, { size: { md: 12, xs: 12 }, sx: { mt: 1 } },
-                                    React.createElement(TagFilter, { tagFilters: tagFilters, setTagFilters: setTagFilters, filterContext: filterContext })))))),
+                                    React.createElement(TagFilter, { tagFilters: draftFilters.tagFilters, setTagFilters: (tagFilters) => setDraftFilters(Object.assign(Object.assign({}, draftFilters), { tagFilters })), filterContext: filterContext })))))),
                 React.createElement(Grid2, { size: { md: 12, xs: 12 }, style: {
                         height: "70vh",
                     } },
                     React.createElement(Paper, { style: { height: "100%", width: "100%" } },
-                        React.createElement(AgGridReact, { loading: isLoading, gridOptions: {
+                        React.createElement(AgGridReact, { loading: isLoading || isApplyingFilters || isFetching, gridOptions: {
                                 theme: themeDXT,
+                                cacheQuickFilter: true,
                             }, rowData: formattedRows, columnDefs: columnDefs, defaultColDef: defaultColDef, onGridReady: onGridReady, getRowId: (params) => params.data.id, rowHeight: 34, headerHeight: 40, animateRows: true, loadingOverlayComponent: CenteredLazyLoading, getContextMenuItems: (e) => getContextMenuItems(e), rowSelection: "single", onRowDoubleClicked: (e) => {
                                 rowClicked(e);
                             } })))),
@@ -11861,9 +11883,9 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
         steppedLines: true,
         showLegend: false,
         showTooltip: true,
-        combinedView: false,
+        combinedView: true,
         showToolbox: true,
-        showYAxisNames: true,
+        showYAxisNames: false,
     });
     const [aggregationMode, setAggregationModeState] = useState("avg");
     // View management state
@@ -11999,12 +12021,13 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                         width: "100%",
                     } },
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("subtract"), size: "small" },
-                            React__default.createElement(ChevronLeft, { fontSize: "medium", sx: { color: "black" } }))),
+                        React__default.createElement(Tooltip, { title: "Previous period", arrow: true },
+                            React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("subtract"), size: "small" },
+                                React__default.createElement(KeyboardDoubleArrowLeft, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(Tooltip, { title: "Navigate backward 20%", arrow: true },
+                        React__default.createElement(Tooltip, { title: "Pan backward 20%", arrow: true },
                             React__default.createElement(IconButton$1, { onClick: () => handlePartialDateNavigator("subtract"), size: "small" },
-                                React__default.createElement(FastRewind, { fontSize: "medium", sx: { color: "black" } })))),
+                                React__default.createElement(KeyboardArrowLeft, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, { size: { md: 3.5 } },
                         React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
                             React__default.createElement(DateTimePicker, { label: "Start", format: "MM/DD/YYYY HH:mm:ss", value: moment$g(timeScopeStart), onChange: (newValue) => {
@@ -12042,15 +12065,17 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                     },
                                 }, disabled: autoRefresh }))),
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(Tooltip, { title: "Navigate forward 20%", arrow: true },
+                        React__default.createElement(Tooltip, { title: "Pan forward 20%", arrow: true },
                             React__default.createElement(IconButton$1, { onClick: () => handlePartialDateNavigator("add"), size: "small" },
-                                React__default.createElement(FastForward, { fontSize: "medium", sx: { color: "black" } })))),
+                                React__default.createElement(KeyboardArrowRight, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("add"), size: "small" },
-                            React__default.createElement(ChevronRight, { fontSize: "medium", sx: { color: "black" } }))),
+                        React__default.createElement(Tooltip, { title: "Next period", arrow: true },
+                            React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("add"), size: "small" },
+                                React__default.createElement(KeyboardDoubleArrowRight, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("subtract", true), size: "small" },
-                            React__default.createElement(SkipNext, { fontSize: "medium", sx: { color: "black" } }))))),
+                        React__default.createElement(Tooltip, { title: "Jump to current time", arrow: true },
+                            React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("subtract", true), size: "small" },
+                                React__default.createElement(Update, { fontSize: "medium", sx: { color: "black" } })))))),
             React__default.createElement(Grid2, { size: { md: 5, sm: 6, xs: 12 } },
                 React__default.createElement(Paper, { elevation: 0, sx: {
                         p: 1,
@@ -12062,7 +12087,7 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                             alignItems: "stretch",
                             justifyContent: "space-between",
                         } },
-                        React__default.createElement(Box, { sx: { width: 230 } },
+                        React__default.createElement(Box, { sx: { width: 155 } },
                             React__default.createElement(FormControl, { fullWidth: true, size: "small" },
                                 React__default.createElement(Select, { multiple: true, value: [
                                         ...(customOptions.showGridLines ? ["grid"] : []),
@@ -12076,20 +12101,10 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                         const selected = e.target.value;
                                         setCustomOptions((prevOptions) => (Object.assign(Object.assign({}, prevOptions), { showGridLines: selected.includes("grid"), showSymbols: selected.includes("symbols"), smoothLines: selected.includes("smooth") &&
                                                 !selected.includes("stepped"), steppedLines: selected.includes("stepped"), showTooltip: selected.includes("tooltip"), showToolbox: selected.includes("toolbox"), showYAxisNames: selected.includes("yAxisNames") })));
-                                    }, renderValue: (selected) => {
-                                        const labels = {
-                                            grid: "Grid",
-                                            symbols: "Symbols",
-                                            smooth: "Smooth",
-                                            stepped: "Stepped",
-                                            tooltip: "Tooltip",
-                                            toolbox: "Toolbox",
-                                            yAxisNames: "Y-Axis Names",
-                                        };
-                                        return (React__default.createElement("span", { style: { fontSize: "0.75rem" } }, selected
-                                            .map((val) => labels[val])
-                                            .join(", ")));
-                                    } },
+                                    }, renderValue: (selected) => (React__default.createElement("span", { style: { fontSize: "0.75rem" } },
+                                        "Chart: ",
+                                        selected.length,
+                                        " options")) },
                                     React__default.createElement(MenuItem, { value: "grid", style: { padding: 0 } },
                                         React__default.createElement(Checkbox, { checked: customOptions.showGridLines, size: "small" }),
                                         React__default.createElement(ListItemText, null, "Grid")),
@@ -12115,16 +12130,14 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                             React__default.createElement(FormControl, { fullWidth: true, size: "small" },
                                 React__default.createElement(Select, { value: aggregationMode, onChange: (e) => {
                                         setAggregationModeState(e.target.value);
-                                    }, renderValue: (selected) => selected === "last"
-                                        ? "Aggregation: Last value"
-                                        : "Aggregation: Average" },
+                                    }, renderValue: (selected) => selected === "last" ? "Agg: Last" : "Agg: Avg" },
                                     React__default.createElement(MenuItem, { value: "avg" }, "Average"),
                                     React__default.createElement(MenuItem, { value: "last" }, "Last value")))),
                         React__default.createElement(Divider, { orientation: "vertical", flexItem: true }),
                         React__default.createElement(FormControlLabel, { checked: customOptions.combinedView, control: React__default.createElement(Switch, { color: "primary", size: "small" }), label: React__default.createElement("span", { style: { fontSize: "0.75rem", fontWeight: 600 } }, "Combined"), style: { margin: "0" }, onChange: (e, checked) => {
                                 setCustomOptions((prevOptions) => (Object.assign(Object.assign({}, prevOptions), { combinedView: checked })));
                             } }),
-                        React__default.createElement(FormControlLabel, { checked: autoRefresh, control: React__default.createElement(Switch, { color: "primary", size: "small" }), label: React__default.createElement("span", { style: { fontSize: "0.75rem", fontWeight: 600 } }, "Auto Refresh"), style: { margin: "0" }, onChange: (e, checked) => {
+                        React__default.createElement(FormControlLabel, { checked: autoRefresh, control: React__default.createElement(Switch, { color: "primary", size: "small" }), label: React__default.createElement("span", { style: { fontSize: "0.75rem", fontWeight: 600 } }, "Auto"), style: { margin: "0" }, onChange: (e, checked) => {
                                 if (checked) {
                                     // When enabling auto-refresh, set end to now
                                     // and keep the current period to calculate start
@@ -12143,8 +12156,12 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                 setAutoRefresh(checked);
                             } }),
                         React__default.createElement(Divider, { orientation: "vertical", flexItem: true }),
-                        React__default.createElement(Button, { variant: "outlined", size: "small", color: "primary", startIcon: React__default.createElement(ZoomIn, null), onClick: handleZoomIn, style: { fontSize: "0.7rem" } }, "Zoom"),
-                        React__default.createElement(Button, { variant: "outlined", size: "small", color: "primary", startIcon: React__default.createElement(Restore, null), onClick: handleRestoreZoom, style: { fontSize: "0.7rem" } }, "Restore")))),
+                        React__default.createElement(Tooltip, { title: "Area zoom", arrow: true },
+                            React__default.createElement(IconButton$1, { color: "primary", onClick: handleZoomIn, size: "small" },
+                                React__default.createElement(ZoomIn, { fontSize: "small" }))),
+                        React__default.createElement(Tooltip, { title: "Restore zoom", arrow: true },
+                            React__default.createElement(IconButton$1, { color: "primary", onClick: handleRestoreZoom, size: "small" },
+                                React__default.createElement(Restore, { fontSize: "small" })))))),
             React__default.createElement(Grid2, { size: { md: 2, sm: 6, xs: 12 }, container: true, justifyContent: "flex-end", alignItems: "center" },
                 React__default.createElement(Paper, { elevation: 0, sx: {
                         p: 1,
@@ -14539,10 +14556,21 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         steppedLines: true,
         showLegend: true,
         showTooltip: true,
-        combinedView: false,
+        combinedView: true,
         showToolbox: true,
-        showYAxisNames: true,
+        showYAxisNames: false,
     };
+    const getTagName = useCallback((tag) => tag.Alias || tag.TagName, []);
+    const getActiveAxisTag = useCallback((tags) => {
+        if (tags.length === 0)
+            return null;
+        if (highlightedSeries) {
+            const highlightedTag = tags.find((tag) => tag.IsVisible && getTagName(tag) === highlightedSeries);
+            if (highlightedTag)
+                return highlightedTag;
+        }
+        return tags.find((tag) => tag.IsVisible) || null;
+    }, [highlightedSeries, getTagName]);
     // Clear zoom state when time scope changes or combined view toggles
     useEffect(() => {
         const currentTimeScope = `${timeScopeStart.getTime()}-${timeScopeEnd.getTime()}`;
@@ -14561,13 +14589,14 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         prevCombinedViewRef.current = opts.combinedView;
     }, [timeScopeStart, timeScopeEnd, opts.combinedView]);
     // Helper to build yAxis config with scale settings
-    const buildYAxisConfig = useCallback((tag, gridIndex, position, offset = 0) => {
+    const buildYAxisConfig = useCallback((tag, gridIndex, position, offset = 0, isAxisVisible = true) => {
         const baseConfig = {
             gridIndex,
             type: "value",
-            name: opts.showYAxisNames ? tag.Alias || tag.TagName : "",
+            show: isAxisVisible,
+            name: isAxisVisible && opts.showYAxisNames ? getTagName(tag) : "",
             nameLocation: "middle",
-            nameGap: 45 + offset,
+            nameGap: 45,
             position,
             offset,
             splitNumber: 8, // Suggest 8 divisions, ECharts will adjust for readability
@@ -14577,21 +14606,24 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
                 fontWeight: "bold",
             },
             axisLine: {
-                show: true,
+                show: isAxisVisible,
                 lineStyle: {
                     color: tag.Color,
+                    width: 2,
                 },
             },
             axisTick: {
-                show: true,
+                show: isAxisVisible,
             },
             axisLabel: {
-                show: true,
+                show: isAxisVisible,
                 color: tag.Color,
                 fontSize: 10,
             },
             splitLine: {
-                show: position === "left" && offset === 0 ? opts.showGridLines : false,
+                show: isAxisVisible && position === "left" && offset === 0
+                    ? opts.showGridLines
+                    : false,
                 lineStyle: {
                     color: "#e0e0e0",
                     type: "solid",
@@ -14623,7 +14655,7 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
             delete baseConfig.scale;
         }
         return baseConfig;
-    }, [opts.showGridLines, true, opts.showYAxisNames]);
+    }, [opts.showGridLines, opts.showYAxisNames, getTagName]);
     // Determine if we should use separate grids (analog/digital)
     const useSeparateGrids = !opts.combinedView &&
         processedData.analogTags.length > 0 &&
@@ -14754,21 +14786,8 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         isUserDraggingRef.current = false;
     }, [handleCursor2Change]);
     const chartOptions = useMemo(() => {
-        // Calculate dynamic margins based on number of tags to ensure all Y-axes are visible
-        // Formula: Each pair of tags (left + right) needs 60px offset
-        // Base margin is 60px, then add 60px for each additional pair
-        const calculateMargin = (tagCount) => {
-            if (tagCount === 0)
-                return 60;
-            // Number of axes on each side (alternating left/right)
-            const axesPerSide = Math.ceil(tagCount / 2);
-            // Last axis offset = (axesPerSide - 1) * 60
-            // Total margin = last offset + base margin (60px)
-            return (axesPerSide - 1) * 60 + 60;
-        };
-        const analogMargin = calculateMargin(processedData.analogTags.length);
-        const digitalMargin = calculateMargin(processedData.digitalTags.length);
-        const combinedMargin = calculateMargin(processedData.analogTags.length + processedData.digitalTags.length);
+        const chartLeftMargin = opts.showYAxisNames ? 96 : 72;
+        const chartRightMargin = 32;
         return {
             animation: false,
             backgroundColor: "#fff",
@@ -14777,16 +14796,16 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
                 ? [
                     {
                         id: "analog",
-                        left: `${analogMargin}px`,
-                        right: `${analogMargin}px`,
+                        left: `${chartLeftMargin}px`,
+                        right: `${chartRightMargin}px`,
                         top: opts.showLegend ? "70px" : "50px", // Increased to prevent cursor circle clipping
                         bottom: "55%",
                         containLabel: false,
                     },
                     {
                         id: "digital",
-                        left: `${digitalMargin}px`,
-                        right: `${digitalMargin}px`,
+                        left: `${chartLeftMargin}px`,
+                        right: `${chartRightMargin}px`,
                         top: "55%",
                         bottom: 60,
                         containLabel: false,
@@ -14795,8 +14814,8 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
                 : [
                     {
                         id: "combined",
-                        left: `${combinedMargin}px`,
-                        right: `${combinedMargin}px`,
+                        left: `${chartLeftMargin}px`,
+                        right: `${chartRightMargin}px`,
                         top: opts.showLegend ? "70px" : "50px", // Increased to prevent cursor circle clipping
                         bottom: 60,
                         containLabel: false,
@@ -15023,34 +15042,25 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
             yAxis: (() => {
                 const yAxisArray = [];
                 if (useSeparateGrids) {
-                    // Separate view with both analog and digital: analog in grid 0, digital in grid 1
-                    // Add analog axes (grid 0)
+                    const activeAnalogTag = getActiveAxisTag(processedData.analogTags);
+                    const activeDigitalTag = getActiveAxisTag(processedData.digitalTags);
                     processedData.analogTags.forEach((tag, idx) => {
-                        const position = idx % 2 === 0 ? "left" : "right";
-                        const offset = Math.floor(idx / 2) * 60;
-                        yAxisArray.push(buildYAxisConfig(tag, 0, position, offset));
+                        yAxisArray.push(buildYAxisConfig(tag, 0, "left", 0, tag === activeAnalogTag));
                     });
-                    // Add digital axes (grid 1)
-                    processedData.digitalTags.forEach((tag, idx) => {
-                        const position = idx % 2 === 0 ? "left" : "right";
-                        const offset = Math.floor(idx / 2) * 60;
-                        yAxisArray.push(buildYAxisConfig(tag, 1, position, offset));
+                    processedData.digitalTags.forEach((tag) => {
+                        yAxisArray.push(buildYAxisConfig(tag, 1, "left", 0, tag === activeDigitalTag));
                     });
                 }
                 else {
-                    // Combined view or only one type: all axes in grid 0
-                    // Add analog axes
-                    processedData.analogTags.forEach((tag, idx) => {
-                        const position = idx % 2 === 0 ? "left" : "right";
-                        const offset = Math.floor(idx / 2) * 60;
-                        yAxisArray.push(buildYAxisConfig(tag, 0, position, offset));
+                    const activeCombinedTag = getActiveAxisTag([
+                        ...processedData.analogTags,
+                        ...processedData.digitalTags,
+                    ]);
+                    processedData.analogTags.forEach((tag) => {
+                        yAxisArray.push(buildYAxisConfig(tag, 0, "left", 0, tag === activeCombinedTag));
                     });
-                    // Add digital axes
-                    processedData.digitalTags.forEach((tag, idx) => {
-                        const position = idx % 2 === 0 ? "left" : "right";
-                        const baseOffset = Math.ceil(processedData.analogTags.length / 2) * 60;
-                        const offset = baseOffset + Math.floor(idx / 2) * 60;
-                        yAxisArray.push(buildYAxisConfig(tag, 0, position, offset));
+                    processedData.digitalTags.forEach((tag) => {
+                        yAxisArray.push(buildYAxisConfig(tag, 0, "left", 0, tag === activeCombinedTag));
                     });
                 }
                 // If no axes were created at all, add a default one to prevent errors
@@ -15239,6 +15249,7 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         timeScopeStart,
         timeScopeEnd,
         buildYAxisConfig,
+        getActiveAxisTag,
         zoomState,
         useSeparateGrids,
     ]);
@@ -15609,9 +15620,9 @@ const TrendingsPageV2 = () => {
         steppedLines: true,
         showLegend: false,
         showTooltip: true,
-        combinedView: false,
+        combinedView: true,
         showToolbox: true,
-        showYAxisNames: true,
+        showYAxisNames: false,
     });
     const [aggregationMode, setAggregationMode] = useState("avg");
     const [error, setError] = useState("");