@dexteel/mesf-core 7.5.2 → 7.7.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 export { LicenseManager } from 'ag-grid-enterprise';
-import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Hidden, Drawer, useMediaQuery, ListSubheader, ListItemButton, Autocomplete as Autocomplete$1, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, debounce, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
+import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Hidden, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Autocomplete as Autocomplete$1, useMediaQuery, ListSubheader, ListItemButton, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, debounce, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
 import { useMutation, useQuery, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, Component, lazy, Suspense } from 'react';
@@ -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, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, ViewList, Build, Settings as Settings$2, 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, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group, 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 FormatListBulletedSharpIcon from '@mui/icons-material/FormatListBulletedSharp';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import CloseIcon from '@mui/icons-material/Close';
@@ -55,7 +55,11 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import MenuIcon from '@mui/icons-material/Menu';
 import ShowChartIcon from '@mui/icons-material/ShowChart';
+import { DateTimePicker as DateTimePicker$1 } from '@mui/x-date-pickers/DateTimePicker';
+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';
@@ -3856,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 () {
@@ -3912,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 } },
@@ -10964,6 +10977,448 @@ var Settings = function () {
     return React__default.createElement(SettingsPage, null);
 };
 
+var getDefaultValue = function (dataType) {
+    var type = dataType.toLowerCase();
+    if ([
+        "int",
+        "bigint",
+        "smallint",
+        "tinyint",
+        "decimal",
+        "float",
+        "real",
+        "money",
+        "numeric",
+    ].includes(type)) {
+        return "";
+    }
+    if (["datetime", "datetime2", "date", "smalldatetime"].includes(type)) {
+        return null;
+    }
+    if (type === "bit") {
+        return false;
+    }
+    return "";
+};
+var renderInput = function (param, onChange, disabled) {
+    var type = param.dataType.toLowerCase();
+    if (["int", "bigint", "smallint", "tinyint"].includes(type)) {
+        return (React__default.createElement(TextField, { type: "number", label: param.parameterName, value: param.value, onChange: function (e) {
+                return onChange(e.target.value === "" ? "" : Number(e.target.value));
+            }, disabled: disabled, fullWidth: true, size: "small", inputProps: { step: 1 } }));
+    }
+    if (["decimal", "float", "real", "money", "numeric"].includes(type)) {
+        return (React__default.createElement(TextField, { type: "number", label: param.parameterName, value: param.value, onChange: function (e) {
+                return onChange(e.target.value === "" ? "" : Number(e.target.value));
+            }, disabled: disabled, fullWidth: true, size: "small", inputProps: { step: "any" } }));
+    }
+    if (["datetime", "datetime2", "date", "smalldatetime"].includes(type)) {
+        return (React__default.createElement(DateTimePicker$1, { label: param.parameterName, value: param.value ? moment$8(param.value) : null, onChange: function (newValue) { return onChange((newValue === null || newValue === void 0 ? void 0 : newValue.toDate()) || null); }, disabled: disabled, slotProps: {
+                textField: {
+                    fullWidth: true,
+                    size: "small",
+                },
+            } }));
+    }
+    if (type === "bit") {
+        return (React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: !!param.value, onChange: function (e) { return onChange(e.target.checked); }, disabled: disabled }), label: param.parameterName }));
+    }
+    // Default: text field for varchar, nvarchar, char, etc.
+    return (React__default.createElement(TextField, { label: param.parameterName, value: param.value, onChange: function (e) { return onChange(e.target.value); }, disabled: disabled, fullWidth: true, size: "small", multiline: type.includes("text") || type.includes("max"), rows: type.includes("text") || type.includes("max") ? 3 : 1 }));
+};
+var DynamicParameterForm = function (_a) {
+    var parameters = _a.parameters, onExecute = _a.onExecute, isExecuting = _a.isExecuting;
+    var _b = useState([]), formState = _b[0], setFormState = _b[1];
+    useEffect(function () {
+        var initialState = parameters.map(function (p) { return ({
+            parameterName: p.ParameterName,
+            include: !p.IsOptional, // Required params start included and locked
+            sendAsNull: false,
+            value: getDefaultValue(p.DataType),
+            dataType: p.DataType,
+            isOptional: p.IsOptional,
+        }); });
+        setFormState(initialState);
+    }, [parameters]);
+    var updateParam = function (index, field, value) {
+        setFormState(function (prev) {
+            var _a;
+            var updated = __spreadArray([], prev, true);
+            updated[index] = __assign(__assign({}, updated[index]), (_a = {}, _a[field] = value, _a));
+            // If "sendAsNull" is checked, include must be true
+            if (field === "sendAsNull" && value === true) {
+                updated[index].include = true;
+            }
+            // If "include" is unchecked, sendAsNull must be false
+            if (field === "include" && value === false) {
+                updated[index].sendAsNull = false;
+            }
+            return updated;
+        });
+    };
+    var handleExecute = function () {
+        onExecute(formState);
+    };
+    if (parameters.length === 0) {
+        return (React__default.createElement(Paper, { sx: { p: 2 } },
+            React__default.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, "This stored procedure has no parameters."),
+            React__default.createElement(Button, { variant: "contained", onClick: handleExecute, disabled: isExecuting, sx: { mt: 2 } }, isExecuting ? "Executing..." : "Execute")));
+    }
+    return (React__default.createElement(Paper, { sx: { p: 2 } },
+        React__default.createElement(Typography$1, { variant: "subtitle1", sx: { mb: 2, fontWeight: 600 } }, "Parameters"),
+        React__default.createElement(Grid, { container: true, spacing: 2 }, formState.map(function (param, index) {
+            var isInputDisabled = !param.include || param.sendAsNull;
+            var isIncludeDisabled = !param.isOptional; // Required params can't be unchecked
+            return (React__default.createElement(Grid, { item: true, xs: 12, key: param.parameterName },
+                React__default.createElement(Box, { sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 2,
+                        p: 1,
+                        borderRadius: 1,
+                        bgcolor: param.include ? "transparent" : "action.hover",
+                    } },
+                    React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: param.include, onChange: function (e) {
+                                return updateParam(index, "include", e.target.checked);
+                            }, disabled: isIncludeDisabled, size: "small" }), label: "Include", sx: { minWidth: 100 } }),
+                    React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: param.sendAsNull, onChange: function (e) {
+                                return updateParam(index, "sendAsNull", e.target.checked);
+                            }, disabled: !param.include, size: "small" }), label: "NULL", sx: { minWidth: 80 } }),
+                    React__default.createElement(Box, { sx: { flexGrow: 1 } }, renderInput(param, function (value) { return updateParam(index, "value", value); }, isInputDisabled)),
+                    React__default.createElement(Typography$1, { variant: "caption", color: "text.secondary", sx: { minWidth: 80 } },
+                        param.dataType,
+                        !param.isOptional && (React__default.createElement(Typography$1, { component: "span", color: "error", sx: { ml: 0.5 } }, "*"))))));
+        })),
+        React__default.createElement(Box, { sx: { mt: 3, display: "flex", justifyContent: "flex-end" } },
+            React__default.createElement(Button, { variant: "contained", onClick: handleExecute, disabled: isExecuting, size: "large" }, isExecuting ? "Executing..." : "Execute"))));
+};
+
+var SESSION_KEY = "sp-executor-authenticated";
+var getCurrentPin = function () {
+    var now = new Date();
+    var hours = now.getHours().toString().padStart(2, "0");
+    var minutes = now.getMinutes().toString().padStart(2, "0");
+    return "".concat(hours).concat(minutes);
+};
+var PinGate = function (_a) {
+    var children = _a.children;
+    var _b = useState(function () {
+        return sessionStorage.getItem(SESSION_KEY) === "true";
+    }), isAuthenticated = _b[0], setIsAuthenticated = _b[1];
+    var _c = useState(""), pin = _c[0], setPin = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var handleUnlock = function () {
+        if (pin === getCurrentPin()) {
+            sessionStorage.setItem(SESSION_KEY, "true");
+            setIsAuthenticated(true);
+            setError("");
+        }
+        else {
+            setError("Incorrect PIN. Please try again.");
+            setPin("");
+        }
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter") {
+            handleUnlock();
+        }
+    };
+    if (isAuthenticated) {
+        return React__default.createElement(React__default.Fragment, null, children);
+    }
+    return (React__default.createElement(Box, { sx: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: "60vh",
+        } },
+        React__default.createElement(Paper, { elevation: 3, sx: {
+                p: 4,
+                maxWidth: 400,
+                width: "100%",
+                textAlign: "center",
+            } },
+            React__default.createElement(LockIcon, { sx: { fontSize: 48, color: "primary.main", mb: 2 } }),
+            React__default.createElement(Typography$1, { variant: "h5", sx: { mb: 1, fontWeight: 600 } }, "Access Required"),
+            React__default.createElement(Typography$1, { variant: "body2", color: "text.secondary", sx: { mb: 3 } }, "Enter PIN to access the SP Executor"),
+            React__default.createElement(TextField, { type: "password", label: "PIN", variant: "outlined", fullWidth: true, value: pin, onChange: function (e) { return setPin(e.target.value); }, onKeyDown: handleKeyDown, error: !!error, helperText: error, sx: { mb: 2 }, autoFocus: true }),
+            React__default.createElement(Button, { variant: "contained", fullWidth: true, onClick: handleUnlock, disabled: !pin }, "Unlock"))));
+};
+
+var defaultColDef = {
+    flex: 1,
+    filter: false,
+    sortable: true,
+    resizable: true,
+};
+var parseResults = function (data) {
+    if (!data || !data.tables)
+        return [];
+    return data.tables.map(function (table) {
+        var _a;
+        var rows = table.rows || [];
+        var columns = rows.length > 0
+            ? Object.keys(rows[0])
+            : ((_a = table.columns) === null || _a === void 0 ? void 0 : _a.map(function (c) { return c.name; })) || [];
+        return { rows: rows, columns: columns };
+    });
+};
+var formatTimestamp = function (date) {
+    return date.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    });
+};
+var formatDuration = function (ms) {
+    if (ms < 1000)
+        return "".concat(ms, "ms");
+    return "".concat((ms / 1000).toFixed(2), "s");
+};
+var formatParameters = function (params) {
+    if (params.length === 0)
+        return "No parameters";
+    return params
+        .map(function (p) { return "".concat(p.name, "=").concat(p.value === null ? "NULL" : p.value); })
+        .join(", ");
+};
+var ResultItem = function (_a) {
+    var result = _a.result, onDelete = _a.onDelete, defaultExpanded = _a.defaultExpanded;
+    var _b = useState(0), activeTab = _b[0], setActiveTab = _b[1];
+    var resultSets = useMemo(function () { return parseResults(result.data); }, [result.data]);
+    var getColumnDefs = function (columns) {
+        return columns.map(function (col) { return ({
+            field: col,
+            headerName: col,
+            minWidth: 100,
+            flex: 1,
+            cellRenderer: function (params) {
+                var value = params.value;
+                if (value === null || value === undefined) {
+                    return (React__default.createElement("span", { style: { color: "#999", fontStyle: "italic" } }, "NULL"));
+                }
+                if (typeof value === "boolean") {
+                    return value ? "true" : "false";
+                }
+                return String(value);
+            },
+        }); });
+    };
+    var getTotalRows = function () {
+        return resultSets.reduce(function (sum, rs) { return sum + rs.rows.length; }, 0);
+    };
+    return (React__default.createElement(Accordion, { defaultExpanded: defaultExpanded },
+        React__default.createElement(AccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, null), sx: {
+                bgcolor: result.isError ? "error.light" : "background.paper",
+                "&:hover": { bgcolor: result.isError ? "error.light" : "grey.100" },
+            } },
+            React__default.createElement(Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    width: "100%",
+                    gap: 2,
+                    pr: 2,
+                } },
+                React__default.createElement(Typography$1, { variant: "subtitle2", sx: { fontWeight: 600, minWidth: 80 } }, formatTimestamp(result.timestamp)),
+                React__default.createElement(Typography$1, { variant: "body2", sx: {
+                        flexGrow: 1,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                    } }, result.procedureName),
+                React__default.createElement(Chip, { label: formatDuration(result.duration), size: "small", color: result.duration > 5000 ? "warning" : "default", sx: { minWidth: 60 } }),
+                !result.isError && (React__default.createElement(Chip, { label: "".concat(getTotalRows(), " rows"), size: "small", color: "primary", variant: "outlined", sx: { minWidth: 70 } })),
+                result.isError && (React__default.createElement(Chip, { label: "Error", size: "small", color: "error", sx: { minWidth: 60 } })),
+                React__default.createElement(Tooltip, { title: "Delete this result" },
+                    React__default.createElement(IconButton$1, { size: "small", onClick: function (e) {
+                            e.stopPropagation();
+                            onDelete();
+                        }, sx: { ml: 1 } },
+                        React__default.createElement(DeleteIcon, { fontSize: "small" }))))),
+        React__default.createElement(AccordionDetails, null,
+            React__default.createElement(Typography$1, { variant: "caption", color: "text.secondary", sx: { mb: 1, display: "block" } },
+                "Parameters: ",
+                formatParameters(result.parameters)),
+            result.isError ? (React__default.createElement(Typography$1, { color: "error", variant: "body2" }, result.errorMessage)) : resultSets.length === 0 ? (React__default.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, "The stored procedure executed successfully but returned no result sets.")) : (React__default.createElement(React__default.Fragment, null,
+                resultSets.length > 1 && (React__default.createElement(Tabs, { value: activeTab, onChange: function (_, newValue) { return setActiveTab(newValue); }, sx: { mb: 1 } }, resultSets.map(function (rs, index) { return (React__default.createElement(Tab, { key: index, label: "Result Set ".concat(index + 1, " (").concat(rs.rows.length, ")") })); }))),
+                resultSets.map(function (resultSet, index) { return (React__default.createElement(Box, { key: index, sx: {
+                        display: activeTab === index ? "block" : "none",
+                        height: 300,
+                    } }, resultSet.rows.length === 0 ? (React__default.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, "No rows returned.")) : (React__default.createElement(AgGridReact, { rowData: resultSet.rows, columnDefs: getColumnDefs(resultSet.columns), defaultColDef: defaultColDef, domLayout: "normal" })))); }))))));
+};
+var ResultsList = function (_a) {
+    var results = _a.results, onDeleteResult = _a.onDeleteResult, onClearAll = _a.onClearAll;
+    if (results.length === 0) {
+        return (React__default.createElement(Paper, { sx: { p: 3, textAlign: "center" } },
+            React__default.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, "Execute a stored procedure to see results here.")));
+    }
+    return (React__default.createElement(Paper, { sx: { p: 2 } },
+        React__default.createElement(Box, { sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                mb: 2,
+            } },
+            React__default.createElement(Typography$1, { variant: "subtitle1", sx: { fontWeight: 600 } },
+                "Execution Results (",
+                results.length,
+                ")"),
+            React__default.createElement(Button, { variant: "outlined", color: "error", size: "small", startIcon: React__default.createElement(ClearAllIcon, null), onClick: onClearAll }, "Clear All")),
+        React__default.createElement(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 } }, results.map(function (result, index) { return (React__default.createElement(ResultItem, { key: result.id, result: result, onDelete: function () { return onDeleteResult(result.id); }, defaultExpanded: index === 0 })); }))));
+};
+
+var SPAutocomplete = function (_a) {
+    var procedures = _a.procedures, value = _a.value, onChange = _a.onChange, isLoading = _a.isLoading, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    return (React__default.createElement(Autocomplete$1, { options: procedures, value: value, onChange: function (_, newValue) { return onChange(newValue); }, getOptionLabel: function (option) { return option.FullName; }, groupBy: function (option) { return option.SchemaName; }, disabled: disabled, isOptionEqualToValue: function (option, val) { return option.FullName === val.FullName; }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Select Stored Procedure", variant: "outlined", fullWidth: true, slotProps: {
+                input: __assign(__assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : (params.InputProps.endAdornment))) }),
+            } }))); }, renderOption: function (props, option) { return (React__default.createElement("li", __assign({}, props, { key: option.FullName }),
+            option.SchemaName,
+            ".",
+            option.ProcedureName)); } }));
+};
+
+var getStoredProceduresWithParameters = function (schemaFilter) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                if (schemaFilter) {
+                    parameters.push({ name: "SchemaFilter", value: schemaFilter });
+                }
+                return [4 /*yield*/, apiService.callV2("[SYSTEM].[GetStoredProceduresWithParameters]", parameters)];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    });
+}); };
+var executeStoredProcedure = function (procedureName, parameters) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                return [4 /*yield*/, apiService.callV2(procedureName, parameters)];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    });
+}); };
+
+var SPExecutorPage = function () {
+    var _a = useState([]), procedures = _a[0], setProcedures = _a[1];
+    var _b = useState([]), allParameters = _b[0], setAllParameters = _b[1];
+    var _c = useState(null), selectedProcedure = _c[0], setSelectedProcedure = _c[1];
+    var _d = useState([]), executionResults = _d[0], setExecutionResults = _d[1];
+    var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
+    var _f = useState(false), isExecuting = _f[0], setIsExecuting = _f[1];
+    var _g = useState(""), error = _g[0], setError = _g[1];
+    var _h = useState(true), accumulateResults = _h[0], setAccumulateResults = _h[1];
+    var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, procs, params;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    setError("");
+                    return [4 /*yield*/, getStoredProceduresWithParameters()];
+                case 1:
+                    resp = _a.sent();
+                    if (resp.ok) {
+                        procs = get(resp, "data.tables[0].rows", []);
+                        params = get(resp, "data.tables[1].rows", []);
+                        setProcedures(procs);
+                        setAllParameters(params);
+                    }
+                    else {
+                        setError(resp.message);
+                    }
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        loadData();
+    }, []);
+    var currentParameters = useMemo(function () {
+        if (!selectedProcedure)
+            return [];
+        return allParameters.filter(function (p) { return p.FullName === selectedProcedure.FullName; });
+    }, [selectedProcedure, allParameters]);
+    var handleProcedureChange = function (proc) {
+        setSelectedProcedure(proc);
+    };
+    var handleExecute = function (formState) { return __awaiter(void 0, void 0, void 0, function () {
+        var startTime, parameters, resp, duration, newResult;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!selectedProcedure)
+                        return [2 /*return*/];
+                    setIsExecuting(true);
+                    setError("");
+                    startTime = Date.now();
+                    parameters = formState
+                        .filter(function (p) { return p.include; })
+                        .map(function (p) { return ({
+                        name: p.parameterName,
+                        value: p.sendAsNull ? null : p.value,
+                    }); });
+                    return [4 /*yield*/, executeStoredProcedure(selectedProcedure.FullName, parameters)];
+                case 1:
+                    resp = _a.sent();
+                    duration = Date.now() - startTime;
+                    newResult = {
+                        id: "".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9)),
+                        procedureName: selectedProcedure.FullName,
+                        parameters: parameters,
+                        timestamp: new Date(),
+                        duration: duration,
+                        data: resp.ok ? resp.data : null,
+                        isError: !resp.ok,
+                        errorMessage: resp.ok ? undefined : resp.message,
+                    };
+                    if (accumulateResults) {
+                        setExecutionResults(function (prev) { return __spreadArray([newResult], prev, true); });
+                    }
+                    else {
+                        setExecutionResults([newResult]);
+                    }
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    setIsExecuting(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDeleteResult = function (id) {
+        setExecutionResults(function (prev) { return prev.filter(function (r) { return r.id !== id; }); });
+    };
+    var handleClearAllResults = function () {
+        setExecutionResults([]);
+    };
+    return (React__default.createElement(PinGate, null,
+        React__default.createElement(HelmetDexteel, { title: "SP Executor" }),
+        React__default.createElement(Grid, { container: true, spacing: 2, sx: { p: 2 } },
+            React__default.createElement(Grid, { item: true, xs: 12 },
+                React__default.createElement(Typography$1, { variant: "h5", sx: { fontWeight: 600 } }, "Stored Procedure Executor"),
+                React__default.createElement(Typography$1, { variant: "body2", color: "text.secondary" }, "Select a stored procedure and configure its parameters to execute.")),
+            React__default.createElement(Grid, { item: true, xs: 12 },
+                React__default.createElement(Paper, { sx: { p: 2 } },
+                    React__default.createElement(Grid, { container: true, spacing: 2, alignItems: "center" },
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 9 },
+                            React__default.createElement(SPAutocomplete, { procedures: procedures, value: selectedProcedure, onChange: handleProcedureChange, isLoading: isLoading })),
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 3 },
+                            React__default.createElement(FormControlLabel, { control: React__default.createElement(Switch, { checked: accumulateResults, onChange: function (e) { return setAccumulateResults(e.target.checked); }, color: "primary" }), label: "Accumulate results" }))))),
+            selectedProcedure && (React__default.createElement(Grid, { item: true, xs: 12 },
+                React__default.createElement(DynamicParameterForm, { parameters: currentParameters, onExecute: handleExecute, isExecuting: isExecuting }))),
+            React__default.createElement(Grid, { item: true, xs: 12 },
+                React__default.createElement(ResultsList, { results: executionResults, onDeleteResult: handleDeleteResult, onClearAll: handleClearAllResults }))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
+};
+
 var Configuration = function () {
     var option = useParams().option;
     var _a = useContext(ConfigurationContext), customConfiguration = _a[0], CustomSidebar = _a[1];
@@ -11017,6 +11472,11 @@ var Configuration = function () {
             path: "real-time/config",
             sidebar: function () { return React__default.createElement("div", null, "Config"); },
             main: function () { return React__default.createElement(QueryCacheInvalidations, null); },
+        },
+        {
+            path: "sp-executor",
+            sidebar: function () { return React__default.createElement("div", null, "SP Executor"); },
+            main: function () { return React__default.createElement(SPExecutorPage, null); },
         }
     ], customConfiguration, true);
     // At the top level of your component, add a useEffect to handle window resizing
@@ -11094,7 +11554,11 @@ var Configuration = function () {
             React__default.createElement(ListItemButton, { selected: option === "settings", component: Link, to: "/configuration/settings" },
                 React__default.createElement(ListItemIcon, null,
                     React__default.createElement(Settings$2, null)),
-                React__default.createElement(ListItemText, { primary: "Settings" }))))); };
+                React__default.createElement(ListItemText, { primary: "Settings" })),
+            React__default.createElement(ListItemButton, { selected: option === "sp-executor", component: Link, to: "/configuration/sp-executor" },
+                React__default.createElement(ListItemIcon, null,
+                    React__default.createElement(Code$1, null)),
+                React__default.createElement(ListItemText, { primary: "SP Executor" }))))); };
     useEffect(function () {
         var handleListItemClick = function (event) {
             var target = event.target;
@@ -13154,6 +13618,170 @@ var TagsTreeModalV2 = function (_a) {
                 React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })))));
 };
 
+var BitSelectorModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, viewTags = _a.viewTags, onAddBits = _a.onAddBits, existingBitTags = _a.existingBitTags;
+    var _b = useState(null), selectedTag = _b[0], setSelectedTag = _b[1];
+    var _c = useState(new Set()), selectedBits = _c[0], setSelectedBits = _c[1];
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    // Get list of non-bit-extracted tags (source tags only)
+    var availableTags = useMemo(function () {
+        return Object.values(viewTags)
+            .filter(function (t) { return t && t.viewTag && !t.viewTag.IsBitExtracted; })
+            .map(function (t) { return t.viewTag; })
+            .sort(function (a, b) { return a.TagName.localeCompare(b.TagName); });
+    }, [viewTags]);
+    // Check if a specific bit is already extracted for the selected tag
+    var isBitAlreadyExtracted = useCallback(function (bitIndex) {
+        if (!selectedTag)
+            return false;
+        return existingBitTags.has("".concat(selectedTag.TagId, "-").concat(bitIndex));
+    }, [selectedTag, existingBitTags]);
+    // Handle bit checkbox change
+    var handleBitToggle = useCallback(function (bitIndex) {
+        setSelectedBits(function (prev) {
+            var newSet = new Set(prev);
+            if (newSet.has(bitIndex)) {
+                newSet.delete(bitIndex);
+            }
+            else {
+                newSet.add(bitIndex);
+            }
+            return newSet;
+        });
+    }, []);
+    // Select all available bits
+    var handleSelectAll = useCallback(function () {
+        var availableBits = new Set();
+        for (var i = 0; i < 32; i++) {
+            if (!isBitAlreadyExtracted(i)) {
+                availableBits.add(i);
+            }
+        }
+        setSelectedBits(availableBits);
+    }, [isBitAlreadyExtracted]);
+    // Clear all selections
+    var handleClearAll = useCallback(function () {
+        setSelectedBits(new Set());
+    }, []);
+    // Handle tag selection change
+    var handleTagChange = useCallback(function (_event, value) {
+        setSelectedTag(value);
+        setSelectedBits(new Set()); // Clear bit selection when tag changes
+    }, []);
+    // Handle add button click
+    var handleAdd = useCallback(function () {
+        if (!selectedTag || selectedBits.size === 0)
+            return;
+        setIsLoading(true);
+        onAddBits(selectedTag.TagId, Array.from(selectedBits).sort(function (a, b) { return a - b; }));
+        setIsLoading(false);
+        // Reset state and close
+        setSelectedTag(null);
+        setSelectedBits(new Set());
+        handleClose();
+    }, [selectedTag, selectedBits, onAddBits, handleClose]);
+    // Handle cancel
+    var handleCancel = useCallback(function () {
+        setSelectedTag(null);
+        setSelectedBits(new Set());
+        handleClose();
+    }, [handleClose]);
+    // Render bit grid (4 rows x 8 columns)
+    var renderBitGrid = function () {
+        if (!selectedTag) {
+            return (React__default.createElement(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    minHeight: "200px",
+                    color: "text.secondary",
+                } },
+                React__default.createElement(Typography$1, null, "Select a tag to view available bits")));
+        }
+        var rows = [];
+        for (var row = 0; row < 4; row++) {
+            var bits = [];
+            var _loop_1 = function (col) {
+                var bitIndex = row * 8 + col;
+                var isExtracted = isBitAlreadyExtracted(bitIndex);
+                var isSelected = selectedBits.has(bitIndex);
+                bits.push(React__default.createElement(Grid2, { key: bitIndex, size: 1.5 },
+                    React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: isSelected, onChange: function () { return handleBitToggle(bitIndex); }, disabled: isExtracted, size: "small", sx: {
+                                padding: "4px",
+                            } }), label: React__default.createElement(Typography$1, { variant: "body2", sx: {
+                                color: isExtracted ? "text.disabled" : "text.primary",
+                                fontSize: "0.8rem",
+                                minWidth: "20px",
+                            } }, bitIndex), sx: {
+                            margin: 0,
+                            "& .MuiFormControlLabel-label": {
+                                marginLeft: "2px",
+                            },
+                        } })));
+            };
+            for (var col = 0; col < 8; col++) {
+                _loop_1(col);
+            }
+            rows.push(React__default.createElement(Grid2, { container: true, key: row, spacing: 0.5, sx: { mb: 0.5 } }, bits));
+        }
+        return rows;
+    };
+    var selectedCount = selectedBits.size;
+    var availableCount = selectedTag
+        ? 32 -
+            Array.from({ length: 32 }, function (_, i) { return i; }).filter(isBitAlreadyExtracted)
+                .length
+        : 0;
+    return (React__default.createElement(MesfModal, { open: open, handleClose: handleCancel, maxWidth: "md", "aria-labelledby": "bit-selector-modal-title", "aria-describedby": "bit-selector-modal-description", title: "Add Bits from Bit Array" },
+        React__default.createElement(MesfModal.Content, { dividers: true },
+            React__default.createElement(Grid2, { container: true, spacing: 2 },
+                React__default.createElement(Grid2, { size: 12 },
+                    React__default.createElement(Typography$1, { variant: "subtitle2", sx: { mb: 1 } }, "Select Source Tag"),
+                    React__default.createElement(Autocomplete$1, { size: "small", id: "source-tag-selector", options: availableTags, getOptionLabel: function (option) { return option.Alias || option.TagName; }, value: selectedTag, onChange: handleTagChange, noOptionsText: "No tags available in current view", renderOption: function (props, option) { return (React__default.createElement(Box, __assign({}, props, { component: "li" }),
+                            React__default.createElement(Box, { sx: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                    width: "100%",
+                                } },
+                                React__default.createElement(Typography$1, { variant: "body2" }, option.Alias || option.TagName),
+                                React__default.createElement(Typography$1, { variant: "caption", sx: { color: "text.secondary", ml: 2 } }, option.TagName !== option.Alias ? option.TagName : "")))); }, renderInput: function (params) { return (React__default.createElement(TextField, __assign({}, params, { label: "Source Tag", variant: "outlined", placeholder: "Search tags..." }))); }, sx: { width: "100%" } })),
+                React__default.createElement(Grid2, { size: 12 },
+                    React__default.createElement(Box, { sx: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            mt: 1,
+                        } },
+                        React__default.createElement(Typography$1, { variant: "subtitle2" }, "Select Bit Positions (0-31, LSB = 0)"),
+                        selectedTag && (React__default.createElement(Box, { sx: { display: "flex", gap: 1 } },
+                            React__default.createElement(Button, { size: "small", variant: "outlined", onClick: handleSelectAll, disabled: availableCount === 0 }, "Select All"),
+                            React__default.createElement(Button, { size: "small", variant: "outlined", onClick: handleClearAll, disabled: selectedCount === 0 }, "Clear"))))),
+                React__default.createElement(Grid2, { size: 12 },
+                    React__default.createElement(Box, { sx: {
+                            border: "1px solid",
+                            borderColor: "divider",
+                            borderRadius: 1,
+                            p: 2,
+                            minHeight: "200px",
+                            backgroundColor: "background.paper",
+                        } }, renderBitGrid())),
+                selectedTag && (React__default.createElement(Grid2, { size: 12 },
+                    React__default.createElement(Typography$1, { variant: "body2", sx: { color: "text.secondary" } },
+                        selectedCount,
+                        " bit",
+                        selectedCount !== 1 ? "s" : "",
+                        " selected",
+                        availableCount < 32 &&
+                            " (".concat(32 - availableCount, " already extracted)")))))),
+        React__default.createElement(MesfModal.Actions, null,
+            React__default.createElement(Box, { sx: { display: "flex", gap: 1, pt: 1 } },
+                React__default.createElement(Button, { variant: "outlined", color: "secondary", onClick: handleCancel }, "Cancel"),
+                React__default.createElement(ButtonWithLoading, { onClick: handleAdd, variant: "contained", color: "primary", isLoading: isLoading, disabled: !selectedTag || selectedCount === 0 },
+                    "Add ",
+                    selectedCount > 0 ? "(".concat(selectedCount, ")") : "")))));
+};
+
 var LoadViewModalV2 = function (_a) {
     var open = _a.open, handleClose = _a.handleClose;
     var queryClient = useQueryClient();
@@ -13316,11 +13944,12 @@ var TagsTableV2 = function () {
     var _f = useState(false); _f[0]; var setIsLoading = _f[1];
     var _g = useState(null); _g[0]; var setSelectedRowTagId = _g[1];
     var _h = useState(false), tagsTreeModalOpen = _h[0], setTagsTreeModalOpen = _h[1];
-    var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
-    var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
-    var _l = useState(""), snackbarMessage = _l[0], setSnackbarMessage = _l[1];
-    var _m = useState(null), draggedRowId = _m[0], setDraggedRowId = _m[1];
-    var _o = useState(null), dragOverRowId = _o[0], setDragOverRowId = _o[1];
+    var _j = useState(false), bitSelectorModalOpen = _j[0], setBitSelectorModalOpen = _j[1];
+    var _k = useState(false), saveAsViewModalOpen = _k[0], setSaveAsViewModalOpen = _k[1];
+    var _l = useState(false), loadViewOpen = _l[0], setLoadViewOpen = _l[1];
+    var _m = useState(""), snackbarMessage = _m[0], setSnackbarMessage = _m[1];
+    var _o = useState(null), draggedRowId = _o[0], setDraggedRowId = _o[1];
+    var _p = useState(null), dragOverRowId = _p[0], setDragOverRowId = _p[1];
     // Mutations
     var deleteAllViewTags = useMutation({
         mutationFn: function (viewId) { return deleteAllViewTagsFromView(viewId); },
@@ -13452,6 +14081,63 @@ var TagsTableV2 = function () {
         // Add the new tag
         handleAddTag(selectedTag);
     };
+    // Generate synthetic ID for bit-extracted tags
+    var generateBitTagId = function (sourceTagId, bitIndex) {
+        return sourceTagId * 100 + bitIndex;
+    };
+    // Get set of existing bit tags as "sourceTagId-bitIndex" strings
+    var existingBitTags = useMemo(function () {
+        var bitTags = new Set();
+        Object.values(viewTags).forEach(function (_a) {
+            var viewTag = _a.viewTag;
+            if (viewTag.IsBitExtracted &&
+                viewTag.SourceTagId !== undefined &&
+                viewTag.BitIndex !== undefined) {
+                bitTags.add("".concat(viewTag.SourceTagId, "-").concat(viewTag.BitIndex));
+            }
+        });
+        return bitTags;
+    }, [viewTags]);
+    // Handle adding bits from a bit array tag
+    var handleAddBits = useCallback(function (sourceTagId, bitIndices) {
+        var sourceTagEntry = viewTags[sourceTagId];
+        if (!sourceTagEntry) {
+            setError("Source tag not found");
+            return;
+        }
+        var sourceTag = sourceTagEntry.viewTag;
+        var newTags = __assign({}, viewTags);
+        var maxOrder = Math.max.apply(Math, __spreadArray(__spreadArray([], Object.values(viewTags).map(function (v) { return v.order; }), false), [0], false));
+        bitIndices.forEach(function (bitIndex) {
+            // Generate unique ID for this bit extraction
+            var syntheticId = generateBitTagId(sourceTagId, bitIndex);
+            // Skip if already exists
+            if (newTags[syntheticId])
+                return;
+            maxOrder++;
+            newTags[syntheticId] = {
+                viewTag: {
+                    TagId: syntheticId,
+                    TagName: "".concat(sourceTag.TagName, "[").concat(bitIndex, "]"),
+                    Alias: "".concat(sourceTag.Alias || sourceTag.TagName, "[").concat(bitIndex, "]"),
+                    TagType: "D", // Bit-extracted tags are always digital
+                    Color: getRandomColor(),
+                    MinScale: 0,
+                    MaxScale: 1,
+                    IsAutoScale: true,
+                    IsVisible: true,
+                    Unit: "",
+                    SourceTagId: sourceTagId,
+                    BitIndex: bitIndex,
+                    IsBitExtracted: true,
+                },
+                order: maxOrder,
+            };
+        });
+        // Use setViewTags since bit-extracted tags don't need new API calls
+        // They derive data from existing source tags
+        setViewTags(newTags);
+    }, [viewTags, setViewTags]);
     var handleRowReorder = useCallback(function (draggedId, targetId) {
         if (draggedId === targetId)
             return;
@@ -13581,6 +14267,13 @@ var TagsTableV2 = function () {
                     setTagsTreeModalOpen(true);
                 },
             },
+            {
+                key: "addBitFromArray",
+                name: "Add Bit from Bit Array",
+                onClick: function () {
+                    setBitSelectorModalOpen(true);
+                },
+            },
             {
                 key: "saveView",
                 name: "Save View",
@@ -13692,6 +14385,10 @@ var TagsTableV2 = function () {
                 max: overallMinMax.max,
                 overallMin: overallMinMax.min,
                 overallMax: overallMinMax.max,
+                // Bit extraction metadata
+                isBitExtracted: viewTag.IsBitExtracted,
+                sourceTagId: viewTag.SourceTagId,
+                bitIndex: viewTag.BitIndex,
             };
         });
     }, [viewTags, cursorValues, seriesMinMax]);
@@ -13714,8 +14411,17 @@ var TagsTableV2 = function () {
     // Custom cell renderer for type (with colored badge)
     var renderTypeCell = useCallback(function (params) {
         var type = params.value;
-        return (React__default.createElement(Chip, { label: type, size: "small", style: {
-                backgroundColor: type === "A" ? "#AD48C4" : "#C46F48",
+        var isBitExtracted = params.row.isBitExtracted;
+        // Show "B" for bit-extracted tags, otherwise show the tag type
+        var displayLabel = isBitExtracted ? "B" : type;
+        // Use green for bit-extracted, purple for analog, orange for digital
+        var backgroundColor = isBitExtracted
+            ? "#48C4A0"
+            : type === "A"
+                ? "#AD48C4"
+                : "#C46F48";
+        return (React__default.createElement(Chip, { label: displayLabel, size: "small", style: {
+                backgroundColor: backgroundColor,
                 color: "white",
                 fontWeight: "bold",
                 fontSize: "0.7rem",
@@ -14112,6 +14818,7 @@ var TagsTableV2 = function () {
                 },
             } }),
         React__default.createElement(TagsTreeModalV2, { open: tagsTreeModalOpen, handleClose: function () { return setTagsTreeModalOpen(false); }, onTagSelect: handleTagSelect }),
+        React__default.createElement(BitSelectorModal, { open: bitSelectorModalOpen, handleClose: function () { return setBitSelectorModalOpen(false); }, viewTags: viewTags, onAddBits: handleAddBits, existingBitTags: existingBitTags }),
         React__default.createElement(SaveUpdateDeleteViewModalV2, { open: saveAsViewModalOpen, mode: "create", handleClose: function (shouldUpdate) {
                 setSaveAsViewModalOpen(false);
                 if (shouldUpdate) {
@@ -14573,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
@@ -15274,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 {
@@ -15320,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 () {
@@ -15389,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%",
@@ -15481,27 +16196,37 @@ var TrendingsPageV2 = function () {
             .sort(function (a, b) { return b.order - a.order; }) // DESCENDING order - MUST match TrendingChartV2 sort!
             .map(function (tag) { return tag.viewTag.TagId; });
     }, [viewTags]);
+    // Real tag IDs (excluding bit-extracted synthetic IDs) for API queries
+    // Bit-extracted tags derive their data client-side from source tags
+    var realTagIds = useMemo(function () {
+        return Object.values(viewTags)
+            .filter(function (tag) { return tag && tag.viewTag && !tag.viewTag.IsBitExtracted; })
+            .sort(function (a, b) { return b.order - a.order; })
+            .map(function (tag) { return tag.viewTag.TagId; });
+    }, [viewTags]);
     // Stable query key that only changes on time scope or when explicitly refetching (add/zoom/pan)
     // This prevents refetch when removing tags from viewTags
+    // IMPORTANT: Uses realTagIds (excludes bit-extracted tags) for API queries
     var stableTagIdsRef = useRef([]);
     var prevTimeScopeRef = useRef("");
     var queryTagIds = useMemo(function () {
         var currentTimeScope = "".concat(timeScopeStart.getTime(), "-").concat(timeScopeEnd.getTime());
         var timeScopeChanged = currentTimeScope !== prevTimeScopeRef.current;
-        // Check if any new tags were added (not present in stable ref)
-        var hasNewTags = tagIds.some(function (id) { return !stableTagIdsRef.current.includes(id); });
+        // Check if any new REAL tags were added (not present in stable ref)
+        // Bit-extracted tags don't trigger API refetch since they derive data client-side
+        var hasNewTags = realTagIds.some(function (id) { return !stableTagIdsRef.current.includes(id); });
         // Update query tagIds if:
         // 1. It's empty (first load)
-        // 2. New tags were added (not just length change)
-        // 3. Time scope changed (zoom/pan) - use current tagIds to avoid fetching removed tags
+        // 2. New REAL tags were added (not just length change)
+        // 3. Time scope changed (zoom/pan) - use current realTagIds to avoid fetching removed tags
         if (stableTagIdsRef.current.length === 0 ||
             hasNewTags ||
             timeScopeChanged) {
-            stableTagIdsRef.current = tagIds;
+            stableTagIdsRef.current = realTagIds;
             prevTimeScopeRef.current = currentTimeScope;
         }
         return stableTagIdsRef.current;
-    }, [tagIds, timeScopeStart, timeScopeEnd]);
+    }, [realTagIds, timeScopeStart, timeScopeEnd]);
     // Fetch series data using stable query key
     var _m = useSearchSeries$1({
         start: timeScopeStart.getTime(),
@@ -15510,6 +16235,7 @@ var TrendingsPageV2 = function () {
         autoRefresh: autoRefresh,
     }), series = _m.data, seriesLoading = _m.isLoading, seriesIsError = _m.isError, seriesError = _m.error;
     // Filter and reorder series to match current viewTags order
+    // Also handles bit-extracted tags by deriving their data from source tags
     var filteredSeries = useMemo(function () {
         if (!series)
             return [];
@@ -15525,12 +16251,39 @@ var TrendingsPageV2 = function () {
                 seriesMap.set(tagId, series[index]);
             }
         });
+        // Build viewTags array sorted by order (descending) to match tagIds order
+        var viewTagsArray = Object.values(viewTags)
+            .filter(function (tag) { return tag && tag.viewTag; })
+            .sort(function (a, b) { return b.order - a.order; });
         // Return series in the SAME order as tagIds (which matches viewTags sort order)
-        // This ensures series[i] always corresponds to viewTagsArray[i] in the chart
+        // For bit-extracted tags, derive data from source tag by extracting the specific bit
         return tagIds
-            .map(function (tagId) { return seriesMap.get(tagId); })
+            .map(function (tagId, idx) {
+            var viewTagEntry = viewTagsArray[idx];
+            if (!viewTagEntry)
+                return null;
+            var viewTag = viewTagEntry.viewTag;
+            // If this is a bit-extracted tag, derive data from source
+            if (viewTag.IsBitExtracted &&
+                viewTag.SourceTagId !== undefined &&
+                viewTag.BitIndex !== undefined) {
+                var sourceData = seriesMap.get(viewTag.SourceTagId);
+                if (!sourceData)
+                    return null;
+                // Extract bit from each data point
+                // BitIndex 0 = LSB (least significant bit)
+                return sourceData.map(function (point) { return ({
+                    timestamp: point.timestamp,
+                    value: point.value !== null
+                        ? (Math.floor(point.value) >> viewTag.BitIndex) & 1
+                        : null,
+                }); });
+            }
+            // Regular tag - use series data directly
+            return seriesMap.get(tagId);
+        })
             .filter(Boolean);
-    }, [series, tagIds, queryTagIds]);
+    }, [series, tagIds, queryTagIds, viewTags]);
     // Calculate overall min/max values from filtered series data
     var seriesMinMaxData = useSeriesMinMax(filteredSeries, tagIds);
     // Load initial view when views are fetched
@@ -15640,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",
@@ -15660,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" })));
 };
 
@@ -21206,5 +21985,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, ExcelIcon, 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, useSearchAssets as searchAssets, useSearchSeries as searchSeries, useSearchTagsTree as searchTagsTree, useSearchViewTags as searchViewTags, useSearchViews as searchViews, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, ExcelIcon, 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, SPExecutorPage, 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, useSearchAssets as searchAssets, useSearchSeries as searchSeries, useSearchTagsTree as searchTagsTree, useSearchViewTags as searchViewTags, useSearchViews as searchViews, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map