@dexteel/mesf-core 6.0.5 → 6.1.1

package/dist/index.esm.js

@@ -2077,7 +2077,7 @@ var TableJobs = function () {
             },
         };
     }, []);
-    var onRowSelected = function (event) {
+    var onRowClicked = function (event) {
         var cell = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getFocusedCell();
         if ((cell === null || cell === void 0 ? void 0 : cell.column.getColId()) !== "-" && event.node.isSelected()) {
             setJobSelected(event.data);
@@ -2101,7 +2101,7 @@ var TableJobs = function () {
     var getContextMenuItems = function (params) {
         var _a, _b;
         var data = (_a = params.node) === null || _a === void 0 ? void 0 : _a.data;
-        showContextMenu(event, data, "jobContext");
+        showContextMenu(event, data, "jobsContext");
         if (data) {
             params.api.deselectAll();
             (_b = params.node) === null || _b === void 0 ? void 0 : _b.setSelected(true);
@@ -2180,7 +2180,7 @@ var TableJobs = function () {
             React.createElement(Grid, { container: true, justifyContent: "flex-start", alignItems: "center", className: classes.root, style: { width: "100%", padding: "0 10px" }, spacing: 2 },
                 React.createElement(Grid, { item: true, md: 6, xs: 12 },
                     React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%" } },
-                        React.createElement(AgGridReact, { loading: isLoading, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, getContextMenuItems: getContextMenuItems, loadingOverlayComponent: CenteredLazyLoading, rowHeight: 34, headerHeight: 34, animateRows: true, rowSelection: "single", onGridReady: function (params) { return setGridApi(params.api); }, getRowId: function (params) { return "".concat(params.data.JobId); }, onRowSelected: onRowSelected, onCellKeyDown: onCellKeyDown, gridOptions: {
+                        React.createElement(AgGridReact, { loading: isLoading, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, getContextMenuItems: getContextMenuItems, loadingOverlayComponent: CenteredLazyLoading, rowHeight: 34, headerHeight: 34, animateRows: true, rowSelection: "single", onGridReady: function (params) { return setGridApi(params.api); }, getRowId: function (params) { return "".concat(params.data.JobId); }, onRowClicked: onRowClicked, onCellKeyDown: onCellKeyDown, gridOptions: {
                                 theme: themeDXT,
                                 statusBar: {
                                     statusPanels: [
@@ -2289,20 +2289,51 @@ var JobsPage = function (props) {
 };
 
 var LOG_TYPE_CODES = {
-    A: { id: "A", description: "All" },
     I: { id: "I", color: "#3f51b5", description: "Info" },
     E: { id: "E", color: "#f44336", description: "Error" },
     W: { id: "W", color: "#E69C00", description: "Warning" },
+    D: { id: "D", color: "#FF79C6", description: "Debug" },
 };
 
 var CodeFilter = function (_a) {
     var LogTypeCode = _a.LogTypeCode, setLogTypeCodeFilter = _a.setLogTypeCodeFilter;
+    var getDisplayValue = function (selected) {
+        var sorted = __spreadArray([], selected, true).sort();
+        // For 'Info', 'Warning' and 'Error' show 'All'
+        if (sorted.length === 3 &&
+            sorted.includes("I") &&
+            sorted.includes("W") &&
+            sorted.includes("E")) {
+            return "All";
+        }
+        // For 'Info', 'Warning', 'Error' and 'Debug' show 'All + Debug'
+        if (sorted.length === 4 &&
+            sorted.includes("I") &&
+            sorted.includes("W") &&
+            sorted.includes("E") &&
+            sorted.includes("D")) {
+            return "All + Debug";
+        }
+        // For others, show the descriptions joined with " + "
+        return selected
+            .map(function (code) {
+            var _a;
+            return ((_a = LOG_TYPE_CODES[code]) === null || _a === void 0 ? void 0 : _a.description) ||
+                code;
+        })
+            .join(" + ");
+    };
     return (React__default.createElement("div", { style: { marginTop: 6, borderTopLeftRadius: 3, borderTopRightRadius: 3 } },
         React__default.createElement(InputLabel, { id: "demo-simple-select-label", style: { fontSize: 10, marginBottom: 0 } }, "Type"),
-        React__default.createElement(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", value: LogTypeCode, onChange: function (newLogTypeCode) {
-                return setLogTypeCodeFilter(newLogTypeCode.target.value);
-            }, style: { minWidth: "100%" } }, Object.values(LOG_TYPE_CODES).map(function (log) {
-            return (React__default.createElement(MenuItem, { key: "logId-".concat(log.id), value: log.id }, log.description));
+        React__default.createElement(Select, { labelId: "code-filter-select-label", id: "code-filter-select", multiple: true, value: LogTypeCode, onChange: function (newLogTypeCode) {
+                var newValue = newLogTypeCode.target.value;
+                if (newValue.length > 0) {
+                    setLogTypeCodeFilter(newValue);
+                }
+            }, renderValue: function (selected) { return getDisplayValue(selected); }, style: { minWidth: "100%" } }, Object.values(LOG_TYPE_CODES).map(function (log) {
+            return (React__default.createElement(MenuItem, { key: "logId-".concat(log.id), value: log.id, style: { padding: "0px 8px" } },
+                React__default.createElement(Checkbox, { checked: LogTypeCode.includes(log.id), size: "small", color: "primary" }),
+                React__default.createElement(ListItemText, { primary: log.description })));
         }))));
 };
 
@@ -2546,7 +2577,7 @@ var TableLogs = function () {
     var _b = useState(moment$8().hour(23).minute(59).second(59).toDate()), endDate = _b[0], setEndDate = _b[1];
     var _c = useState("UTC"), timezone = _c[0], setTimezone = _c[1];
     var _d = useState(""), search = _d[0], setSearch = _d[1];
-    var _e = useState("A"), logTypeCode = _e[0], setLogTypeCode = _e[1];
+    var _e = useState(["I", "W", "E"]), logTypeCode = _e[0], setLogTypeCode = _e[1];
     var _f = useState(false), autoRefresh = _f[0], setAutoRefresh = _f[1];
     var _g = useState(null), gridAPI = _g[0], setGridAPI = _g[1];
     var _h = useState(""), error = _h[0], setError = _h[1];
@@ -2555,7 +2586,7 @@ var TableLogs = function () {
     var _l = searchLogs({
         startDate: startDate,
         endDate: endDate,
-        logTypeCode: logTypeCode,
+        logTypeCode: logTypeCode.join(","),
         autoRefresh: autoRefresh,
     }), rows = _l.data, isLoading = _l.isLoading, refetch = _l.refetch, isError = _l.isError, e = _l.error;
     var onGridReady = function (params) {
@@ -2596,7 +2627,7 @@ var TableLogs = function () {
         setEndDate(moment$8().hour(23).minute(59).second(59).toDate());
         setSearch("");
         gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
-        setLogTypeCode("A");
+        setLogTypeCode(["I", "W", "E"]);
         refetch();
         setError("");
     };
@@ -2606,7 +2637,7 @@ var TableLogs = function () {
         setEndDate(moment$8().hour(23).minute(59).second(59).toDate());
         setSearch("");
         gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
-        setLogTypeCode("A");
+        setLogTypeCode(["I", "W", "E"]);
         setSelectedLog(undefined);
     };
     var rowClicked = function (rowClickedEvent) {
@@ -2649,19 +2680,21 @@ var TableLogs = function () {
                     React.createElement(Card, { className: classes.card },
                         React.createElement(CardContent, { style: { padding: "6px !important", width: "100%" } },
                             React.createElement(Grid, { container: true, alignItems: "center", direction: "row", spacing: 1 },
-                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                React.createElement(Grid, { item: true, style: { width: "fit-content" } },
                                     React.createElement(DateFilter, { label: "From", date: startDate, setDate: function (date) {
                                             return setStartDate(date || new Date());
                                         }, maxDate: endDate !== null && endDate !== void 0 ? endDate : undefined })),
-                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                React.createElement(Grid, { item: true, style: { width: "fit-content" } },
                                     React.createElement(DateFilter, { label: "To", date: endDate, setDate: function (date) {
                                             if (date) {
                                                 setEndDate(date);
                                                 setAutoRefresh(false);
                                             }
                                         }, minDate: startDate })),
-                                React.createElement(Grid, { item: true, md: 1, xs: 12 },
-                                    React.createElement(CodeFilter, { LogTypeCode: logTypeCode, setLogTypeCodeFilter: setLogTypeCode })),
+                                React.createElement(Grid, { item: true, md: 2, xs: 12 },
+                                    React.createElement(CodeFilter, { LogTypeCode: logTypeCode, setLogTypeCodeFilter: function (logTypeCodes) {
+                                            return setLogTypeCode(logTypeCodes);
+                                        } })),
                                 React.createElement(Grid, { item: true, md: 1, xs: 12 },
                                     React.createElement(TimezoneSelector, { value: timezone, onChange: setTimezone })),
                                 React.createElement(Grid, { item: true, md: 1, xs: 12 },
@@ -2674,7 +2707,7 @@ var TableLogs = function () {
                                             }
                                             setAutoRefresh(checked);
                                         } })),
-                                React.createElement(Grid, { item: true, md: 4, xs: 12 },
+                                React.createElement(Grid, { item: true, md: 3, xs: 12 },
                                     React.createElement(SearchFilter, { search: search, setSearch: function (search) {
                                             setSearch(search);
                                             gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", search);
@@ -11897,7 +11930,8 @@ var TrendingProvider = function (_a) {
         initialState: TrendingsReducer.getInitialState(),
         reducers: TrendingsReducer.caseReducers,
     }), state = _b[0], actions = _b[1];
-    return (React__default.createElement(TrendingContext.Provider, { value: { state: state, actions: actions } }, children));
+    var contextValue = useMemo(function () { return ({ state: state, actions: actions }); }, [state, actions]);
+    return (React__default.createElement(TrendingContext.Provider, { value: contextValue }, children));
 };
 
 var useTrendingStyles = makeStyles(function (theme) { return ({
@@ -13377,51 +13411,42 @@ var TableComponent = function (_a) {
         cursorData: cursorData,
     });
     var handleChange = function (tagId, value, property) {
-        var newTags = structuredClone(viewTags);
-        newTags[tagId]["viewTag"][property] = value;
-        newTags[tagId]["viewTag"]["IsAutoScale"] = false;
-        setViewTags(newTags);
+        var _a, _b;
+        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), (_b = {}, _b[property] = value, _b.IsAutoScale = false, _b)) }), _a)));
     };
     var handleChangeScale = function (value, scale, tagId) {
         handleChange(tagId, value, scale);
     };
     var handleChangeAlias = function (tagId, newName) {
-        var newTags = structuredClone(viewTags);
-        newTags[tagId]["viewTag"]["Alias"] = newName;
-        setViewTags(newTags);
+        var _a;
+        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { Alias: newName }) }), _a)));
     };
     var handleVisibilityChange = function (tagId, value) {
-        var newTags = structuredClone(viewTags);
-        newTags[tagId]["viewTag"]["IsVisible"] = value;
-        setViewTags(newTags);
+        var _a;
+        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { IsVisible: value }) }), _a)));
     };
     var handleUnitChange = function (tagId, newUnit) {
-        var newTags = structuredClone(viewTags);
-        newTags[tagId]["viewTag"]["Unit"] = newUnit;
-        setViewTags(newTags);
+        var _a;
+        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { Unit: newUnit }) }), _a)));
     };
     var handleAutoScaleChange = function (tagId, checked) {
-        var newTags = structuredClone(viewTags);
-        newTags[tagId]["viewTag"]["IsAutoScale"] = !checked;
-        setViewTags(newTags);
+        var _a;
+        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { IsAutoScale: !checked }) }), _a)));
     };
     var handleColorChange = function (tagId, value) {
-        var newTags = structuredClone(viewTags);
-        newTags[tagId]["viewTag"]["Color"] = value;
-        setViewTags(newTags);
+        var _a;
+        setViewTags(__assign(__assign({}, viewTags), (_a = {}, _a[tagId] = __assign(__assign({}, viewTags[tagId]), { viewTag: __assign(__assign({}, viewTags[tagId].viewTag), { Color: value }) }), _a)));
     };
     var handleDeleteTag = function (tagId) {
-        var newTags = structuredClone(viewTags);
-        delete newTags[tagId];
+        var _a = viewTags, _b = tagId; _a[_b]; var newTags = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
         setViewTagsAndRefetch(newTags);
     };
     var handleAddTag = function (newTag) {
-        var newTags = structuredClone(viewTags);
-        newTags[newTag.TagId] = {
+        var _a;
+        setViewTagsAndRefetch(__assign(__assign({}, viewTags), (_a = {}, _a[newTag.TagId] = {
             viewTag: __assign(__assign({}, newTag), { IsVisible: true, TagType: newTag.TagTypeCode, Color: newTag.Color || getRandomColor(), IsAutoScale: newTag.MinScale || newTag.MaxScale ? false : true }),
             order: Object.keys(viewTags).length,
-        };
-        setViewTagsAndRefetch(newTags);
+        }, _a)));
     };
     var handleAbleScales = function (tagId, checked) {
         if (checked) {
@@ -13548,7 +13573,6 @@ var TableComponent = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    debugger;
                     if (!(viewSelected && selectedRowTagId !== null)) return [3 /*break*/, 3];
                     _a = viewTags[selectedRowTagId].viewTag, TagId = _a.TagId, Alias = _a.Alias, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, Unit = _a.Unit, IsVisible = _a.IsVisible, IsAutoScale = _a.IsAutoScale;
                     return [4 /*yield*/, saveTags.mutate({
@@ -13840,7 +13864,7 @@ var formatDateTimeToString = function (date) {
 var useChartOptions = function () {
     var _a = useTrendingContext(); _a.state; var actions = _a.actions;
     var debounceTimerRef = useRef(null);
-    var handleZoom = function (_a) {
+    var handleZoom = useCallback(function (_a) {
         var chart = _a.chart;
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
@@ -13854,8 +13878,8 @@ var useChartOptions = function () {
                 end: newEnd,
             });
         }, 1000);
-    };
-    var handlePan = function (_a) {
+    }, [actions]);
+    var handlePan = useCallback(function (_a) {
         var chart = _a.chart;
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
@@ -13870,8 +13894,8 @@ var useChartOptions = function () {
                 graphPan: true,
             });
         }, 1000);
-    };
-    return useState({
+    }, [actions]);
+    var initialOptions = useMemo(function () { return ({
         animation: {
             duration: 0, // No animation
         },
@@ -13939,7 +13963,8 @@ var useChartOptions = function () {
                 },
             },
         },
-    });
+    }); }, [handleZoom, handlePan]);
+    return useState(initialOptions);
 };
 
 var CustomOptionsComponent = function (_a) {
@@ -13999,7 +14024,7 @@ var dateNavigator = function (startDate, endDate, scope, operator, current) {
     return { newStartDate: newStartDate, newEndDate: newEndDate };
 };
 
-var Header = function (_a) {
+var Header = React__default.memo(function (_a) {
     var setChartOptions = _a.setChartOptions, autoRefresh = _a.autoRefresh, setAutoRefresh = _a.setAutoRefresh;
     var classes = useTrendingStyles();
     var _b = useTrendingContext(), state = _b.state, actions = _b.actions;
@@ -14095,9 +14120,10 @@ var Header = function (_a) {
                             }
                             setAutoRefresh(autoRefresh);
                         } }))))));
-};
+});
+Header.displayName = "Header";
 
-var DraggableLineControl = function (_a) {
+var DraggableLineControl = React__default.memo(function (_a) {
     var initialLeft = _a.initialLeft, otherLineCoord = _a.otherLineCoord, onUpdate = _a.onUpdate, color = _a.color, chartArea = _a.chartArea;
     var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
     var _c = useState(initialLeft), left = _c[0], setLeft = _c[1];
@@ -14156,10 +14182,11 @@ var DraggableLineControl = function (_a) {
                 right: 0,
                 margin: "auto",
             } })));
-};
+});
+DraggableLineControl.displayName = "DraggableLineControl";
 
 var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
-    var chartPlugin = {
+    var chartPlugin = useMemo(function () { return ({
         id: "verticalLinePlugin",
         afterUpdate: function (chart) {
             if (chart.chartArea) {
@@ -14185,7 +14212,7 @@ var useGetVerticalLinePlugin = function (setChartArea, setCoords) {
             setChartArea(chart.chartArea);
             setCoords({ x1: x1, x2: x2 });
         },
-    };
+    }); }, [setChartArea, setCoords]);
     return chartPlugin;
 };
 
@@ -14223,7 +14250,7 @@ var updateCursorData = function (chart, setCursorData) {
 };
 
 var useXAxisDatePlugin = function () {
-    var chartPlugin = {
+    var chartPlugin = useMemo(function () { return ({
         id: "xAxisDatePlugin",
         afterBuildTicks: function (chart) {
             var oldTicks = chart.scales.x.ticks;
@@ -14249,14 +14276,14 @@ var useXAxisDatePlugin = function () {
             }
             chart.scales.x.ticks = newTicks;
         },
-    };
+    }); }, []);
     return chartPlugin;
 };
 
 var useYAxisPlugin = function () {
-    var chartPlugin = {
+    var chartPlugin = useMemo(function () { return ({
         id: "yAxisPlugin",
-    };
+    }); }, []);
     return chartPlugin;
 };
 
@@ -14278,7 +14305,7 @@ var areRangesSimilar = function (tag1, tag2) {
     return isSignificantOverlap;
 };
 
-var TrendingChart = function (_a) {
+var TrendingChart = React__default.memo(function (_a) {
     var series = _a.series, chartOptions = _a.chartOptions, setChartOptions = _a.setChartOptions, chartData = _a.chartData, setCursorData = _a.setCursorData, setChartData = _a.setChartData;
     var _b = useTrendingContext(), state = _b.state, viewTags = _b.state.viewTags; _b.actions;
     var _c = useState(null), lineTabCoords = _c[0], setLineTabCoords = _c[1];
@@ -14332,9 +14359,9 @@ var TrendingChart = function (_a) {
                 id: "y-axis-".concat(axis.TagId),
                 type: "linear",
                 display: axis.IsVisible,
-                scaleLabel: {
+                title: {
                     display: true,
-                    labelString: axis.TagName,
+                    text: axis.TagName,
                 },
                 min: axis.IsAutoScale ? undefined : min,
                 max: axis.IsAutoScale ? undefined : max,
@@ -14400,13 +14427,18 @@ var TrendingChart = function (_a) {
         });
     }, 1000));
     var _e = useState(false), chartShouldInitCursors = _e[0], setChartShouldInitCursors = _e[1];
-    var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
+    var memoizedSetChartArea = useCallback(function (area) { return setChartArea(area); }, []);
+    var memoizedSetLineTabCoords = useCallback(function (coords) { return setLineTabCoords(coords); }, []);
+    var verticalLinePlugin = useGetVerticalLinePlugin(memoizedSetChartArea, memoizedSetLineTabCoords);
     var xAxisDatePlugin = useXAxisDatePlugin();
     var yAxisPlugin = useYAxisPlugin();
+    var plugins = useMemo(function () { return [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin]; }, [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin]);
     var seriesVsTags = useRef({});
     useEffect(function () {
+        // Only run debounced update when series data actually changes
+        // Display property changes (color, visibility, scales) are handled by immediate useEffects
         debouncedUpdateChartBasedOnData.current();
-    }, [state.graphShouldUpdate, series]);
+    }, [series]); // Removed state.graphShouldUpdate to prevent running on display-only changes
     useEffect(function () {
         if (chartShouldInitCursors) {
             if (chartRef.current) {
@@ -14415,6 +14447,85 @@ var TrendingChart = function (_a) {
             }
         }
     }, [chartShouldInitCursors, state.graphShouldUpdate]);
+    // Update colors and visibility immediately without debounce
+    useEffect(function () {
+        setChartData(function (prevData) {
+            if (!prevData.datasets || !prevData.datasets.length)
+                return prevData;
+            var updatedDatasets = prevData.datasets.map(function (dataset) {
+                var tag = viewTags[dataset.tagId];
+                if (tag) {
+                    return __assign(__assign({}, dataset), { borderColor: tag.viewTag.Color, hidden: !tag.viewTag.IsVisible });
+                }
+                return dataset;
+            });
+            return __assign(__assign({}, prevData), { datasets: updatedDatasets });
+        });
+    }, [viewTags, setChartData]);
+    // Update Y-axis scales immediately when AutoScale or Min/Max changes
+    useEffect(function () {
+        var axes = [];
+        Object.values(viewTags).forEach(function (_a) {
+            var tag = _a.viewTag;
+            var existingAxis = axes.findIndex(function (existingTag) {
+                return areRangesSimilar(existingTag, tag);
+            });
+            if (existingAxis === -1) {
+                axes.push(tag);
+            }
+        });
+        var yAxesConfig = axes.map(function (axis) {
+            var min = Number(axis.MinScale);
+            var max = Number(axis.MaxScale);
+            if (!min && !max) {
+                max = 1;
+            }
+            return {
+                id: "y-axis-".concat(axis.TagId),
+                type: "linear",
+                display: axis.IsVisible,
+                title: {
+                    display: true,
+                    text: axis.TagName,
+                },
+                min: axis.IsAutoScale ? undefined : min,
+                max: axis.IsAutoScale ? undefined : max,
+                suggestedMin: axis.IsAutoScale ? undefined : min,
+                suggestedMax: axis.IsAutoScale ? undefined : max,
+                stepSize: 10,
+                grid: {
+                    display: true,
+                },
+                afterUpdate: function (a) {
+                    var chart = a.chart;
+                    var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== "x"; });
+                    var counterOfDefaultsScales = 0;
+                    if (keys.length > 1) {
+                        for (var scaleKey in chart.scales) {
+                            var scale = chart.scales[scaleKey];
+                            if (scale.max === 1 && scale.min === 0) {
+                                chart.scales[scaleKey].display = false;
+                                chart.scales[scaleKey].options.display = false;
+                                counterOfDefaultsScales++;
+                            }
+                            else {
+                                chart.scales[scaleKey].display = true;
+                                chart.scales[scaleKey].options.display = true;
+                            }
+                            if (counterOfDefaultsScales === keys.length) {
+                                chart.scales[keys[0]].display = true;
+                                chart.scales[keys[0]].options.display = true;
+                            }
+                        }
+                    }
+                },
+            };
+        });
+        setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign({ x: __assign({}, prevOptions.scales.x) }, yAxesConfig.reduce(function (acc, cur) {
+                var _a;
+                return (__assign(__assign({}, acc), (_a = {}, _a[cur.id] = cur, _a)));
+            }, {})) })); });
+    }, [viewTags, setChartOptions]);
     return (React__default.createElement(Paper, { style: { height: "100%", position: "relative" } },
         lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: "red", chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, onUpdate: function (newLeft) {
                 setLineTabCoords(function (prevCoords) {
@@ -14434,11 +14545,12 @@ var TrendingChart = function (_a) {
                 chartRef.current.secondLineX = newLeft;
                 debouncedUpdateChart.current();
             } })) : null,
-        React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin] })));
-};
+        React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: plugins })));
+});
+TrendingChart.displayName = "TrendingChart";
 
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
-var Trending = function (_a) {
+var Trending = React__default.memo(function (_a) {
     _a.title; var autoRefresh = _a.autoRefresh, setAutoRefresh = _a.setAutoRefresh;
     var _b = useTrendingContext(), state = _b.state, _c = _b.state, viewTags = _c.viewTags; _c.shouldRefetchSeries;
     var _d = useState(""), error = _d[0], setError = _d[1];
@@ -14496,7 +14608,8 @@ var Trending = function (_a) {
                     React__default.createElement(CircularProgress, { size: "2rem" }))),
                 React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, viewTagForDelete: viewTagForDelete, setViewTagForDelete: setViewTagForDelete, selectedRowTagId: selectedRowTagId, setSelectedRowTagId: setSelectedRowTagId }))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); }, title: "ERROR" })));
-};
+});
+Trending.displayName = "Trending";
 
 var searchViews = function (_a) {
     var _b = _a.autoRefresh, autoRefresh = _b === void 0 ? false : _b;
@@ -14530,23 +14643,30 @@ var searchSeries = function (_a) {
     var start = _a.start, end = _a.end, tagIds = _a.tagIds, _b = _a.autoRefresh, autoRefresh = _b === void 0 ? false : _b;
     return useQuery({
         queryKey: ["series", start, end, tagIds],
-        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+        queryFn: function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
             var resp, error_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var signal = _b.signal;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
-                        _a.trys.push([0, 2, , 3]);
+                        _c.trys.push([0, 2, , 3]);
                         return [4 /*yield*/, axios.post("/series?nodeName=null", {
                                 start: start,
                                 end: end ? end : new Date().getTime(),
                                 tagIds: tagIds,
                                 sampleCount: 1000,
+                            }, {
+                                signal: signal,
                             })];
                     case 1:
-                        resp = _a.sent();
+                        resp = _c.sent();
                         return [2 /*return*/, get(resp, "data", [])];
                     case 2:
-                        error_1 = _a.sent();
+                        error_1 = _c.sent();
+                        // Ignore abort errors
+                        if (axios.isCancel(error_1) || error_1.name === "AbortError") {
+                            return [2 /*return*/, []];
+                        }
                         throw new Error(getError(error_1));
                     case 3: return [2 /*return*/];
                 }
@@ -14842,8 +14962,10 @@ var useTableData$1 = function (_a) {
                 field: "AssetName",
                 headerName: "Asset",
                 sortable: true,
-                flex: 1,
+                flex: 2,
                 minWidth: 70,
+                wrapText: true,
+                autoHeight: true,
             },
         ]
         : []), true), [
@@ -16876,8 +16998,10 @@ var useTableData = function (_a) {
                 field: "AssetName",
                 headerName: "Asset",
                 sortable: true,
-                flex: 1,
+                flex: 2,
                 minWidth: 70,
+                wrapText: true,
+                autoHeight: true,
             },
         ]
         : []), true), [
@@ -17638,5 +17762,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry, MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry, routeLogbookReport, searchAssets, searchSeries, searchTagsTree, searchViewTags, searchViews, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$i as useStyles, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, BarChartControl, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry, MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, RemoveAssetDialog, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, TrendingsPage, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getEntries, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry, routeLogbookReport, searchAssets, searchSeries, searchTagsTree, searchViewTags, searchViews, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useStyles$i as useStyles, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map