quidproquo-web-admin 0.1.1 → 0.1.2

package/lib/esm/LogViewer/TopSection.js

@@ -29,20 +29,20 @@ export function TopSection({ onSearch }) {
         updateStartAndEndTimeSpan(minutes);
         handleQuickTimeClose();
     };
-    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterDateFns, children: [_jsxs(Grid, { container: true, columns: 12, spacing: 2, children: [_jsx(Grid, { item: true, xs: 2, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { id: "runtime-select-label", children: "Runtime Type" }), _jsx(Select, { labelId: "runtime-select-label", id: "demo-simple-select", value: runtimeType, label: "Runtime Type", onChange: handleRuntimeTypeOnChange, children: RuntimeTypes.map((key) => (_jsx(MenuItem, { value: key, children: key }, key))) })] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(FormControl, { fullWidth: true, children: _jsx(Autocomplete, { getOptionLabel: (option) => option.label, options: serviceOptions, value: serviceOptions.find((o) => o.value === service) || null, onChange: handleServiceOnChange, renderInput: (params) => (_jsx(TextField, { ...params, label: "Service Name", InputLabelProps: {
+    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterDateFns, children: [_jsxs(Grid, { columns: 12, container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 2, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { id: "runtime-select-label", children: "Runtime Type" }), _jsx(Select, { id: "demo-simple-select", label: "Runtime Type", labelId: "runtime-select-label", onChange: handleRuntimeTypeOnChange, value: runtimeType, children: RuntimeTypes.map((key) => (_jsx(MenuItem, { value: key, children: key }, key))) })] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(FormControl, { fullWidth: true, children: _jsx(Autocomplete, { getOptionLabel: (option) => option.label, onChange: handleServiceOnChange, options: serviceOptions, renderInput: (params) => (_jsx(TextField, { ...params, InputLabelProps: {
                                         shrink: true,
-                                    } })) }) }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Box, { position: "relative", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "Start DateTime", value: startDate, onChange: handleStartDateChange }) }), _jsx(IconButton, { "aria-label": "quick time select", "aria-controls": "quick-time-menu", "aria-haspopup": "true", onClick: handleQuickTimeClick, sx: {
+                                    }, label: "Service Name" })), value: serviceOptions.find((o) => o.value === service) || null }) }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Box, { position: "relative", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "Start DateTime", onChange: handleStartDateChange, value: startDate }) }), _jsx(IconButton, { "aria-controls": "quick-time-menu", "aria-haspopup": "true", "aria-label": "quick time select", onClick: handleQuickTimeClick, sx: {
                                         position: 'absolute',
                                         right: '-28px',
                                         top: '50%',
                                         transform: 'translateY(-50%)',
-                                    }, children: _jsx(ExpandMoreIcon, {}) })] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", value: endDate, onChange: handleEndDateChange }) }) }), _jsx(Grid, { item: true, xs: 4, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { label: "User", value: user, onChange: handleUserOnChange, InputLabelProps: {
+                                    }, children: _jsx(ExpandMoreIcon, {}) })] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", onChange: handleEndDateChange, value: endDate }) }) }), _jsx(Grid, { item: true, xs: 4, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
                                     shrink: true,
-                                } }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { label: "Info", value: info, onChange: handleInfoOnChange, InputLabelProps: {
+                                }, label: "User", onChange: handleUserOnChange, value: user }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
                                     shrink: true,
-                                } }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { label: "Error Filter", value: error, onChange: handleErrorOnChange, InputLabelProps: {
+                                }, label: "Info", onChange: handleInfoOnChange, value: info }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
                                     shrink: true,
-                                } }) }) }), _jsx(Grid, { item: true, xs: 10, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { label: "Deep Search", value: deep, onChange: handleDeepOnChange, placeholder: "Use with caution, reduce results with above fields first, this is a contains search on the log JSON, so it will be slow.", InputLabelProps: {
+                                }, label: "Error Filter", onChange: handleErrorOnChange, value: error }) }) }), _jsx(Grid, { item: true, xs: 10, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
                                     shrink: true,
-                                } }) }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(AsyncButton, { onClick: () => onSearch(), children: "Search" }) })] }), _jsxs(Menu, { id: "quick-time-menu", anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleQuickTimeClose, children: [_jsx(MenuItem, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
+                                }, label: "Deep Search", onChange: handleDeepOnChange, placeholder: "Use with caution, reduce results with above fields first, this is a contains search on the log JSON, so it will be slow.", value: deep }) }) }), _jsx(Grid, { item: true, xs: 2, children: _jsx(AsyncButton, { onClick: () => onSearch(), children: "Search" }) })] }), _jsxs(Menu, { anchorEl: anchorEl, id: "quick-time-menu", keepMounted: true, onClose: handleQuickTimeClose, open: Boolean(anchorEl), children: [_jsx(MenuItem, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
 }

package/lib/esm/LogViewer/actionComponents/custom/CoreContextListCustomAction.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { AnyVariableView, genericFunctionRendererStyles } from '../genericActionRenderer';
 export const CoreContextListCustomAction = ({ result, expanded, }) => {
-    return (_jsx(Box, { sx: { width: '100%', my: 1 }, children: _jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(AnyVariableView, { value: result, expanded: expanded }) }) }));
+    return (_jsx(Box, { sx: { width: '100%', my: 1 }, children: _jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(AnyVariableView, { expanded: expanded, value: result }) }) }));
 };

package/lib/esm/LogViewer/actionComponents/custom/CoreLogCreateCustomAction.js

@@ -24,5 +24,5 @@ export const CoreLogCreateCustomAction = ({ action, expanded }) => {
         return null;
     }
     const { logLevel, msg, data } = action.payload;
-    return (_jsx(Box, { sx: { width: '100%', my: 1 }, children: _jsxs(Alert, { severity: getSeverity(logLevel), children: [_jsx(Typography, { variant: "body1", fontWeight: "bold", children: resolveLookupText(logLevel, LogLevelEnum) }), _jsx(Typography, { variant: "body1", children: msg }), data && (_jsx(Typography, { variant: "body2", sx: { mt: 1, whiteSpace: 'pre-wrap' }, children: _jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(AnyVariableView, { value: data, expanded: expanded }) }) }))] }) }));
+    return (_jsx(Box, { sx: { width: '100%', my: 1 }, children: _jsxs(Alert, { severity: getSeverity(logLevel), children: [_jsx(Typography, { fontWeight: "bold", variant: "body1", children: resolveLookupText(logLevel, LogLevelEnum) }), _jsx(Typography, { variant: "body1", children: msg }), data && (_jsx(Typography, { sx: { mt: 1, whiteSpace: 'pre-wrap' }, variant: "body2", children: _jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(AnyVariableView, { expanded: expanded, value: data }) }) }))] }) }));
 };

package/lib/esm/LogViewer/actionComponents/custom/CoreLogDisableEventHistoryCustomAction.js

@@ -6,5 +6,5 @@ export const CoreLogDisableEventHistoryCustomAction = ({ action }) => {
         return null;
     }
     const { reason } = action.payload;
-    return (_jsx(Box, { sx: { width: '100%', my: 1 }, children: _jsx(Alert, { severity: 'warning', children: _jsx(Typography, { variant: "body1", fontWeight: "bold", children: reason }) }) }));
+    return (_jsx(Box, { sx: { width: '100%', my: 1 }, children: _jsx(Alert, { severity: 'warning', children: _jsx(Typography, { fontWeight: "bold", variant: "body1", children: reason }) }) }));
 };

package/lib/esm/LogViewer/actionComponents/custom/CoreLogTemplateLiteralCustomAction.js

@@ -7,5 +7,5 @@ export const CoreLogTemplateLiteralCustomAction = ({ action, expanded }) => {
         return null;
     }
     const { messageParts: [strings, values], } = action.payload;
-    return (_jsx(Box, { sx: { width: '100%', my: 1 }, children: _jsx(Alert, { severity: 'info', children: _jsx(Typography, { variant: "body1", children: values.reduce((preComp, value, index) => (_jsxs(_Fragment, { children: [preComp, _jsx(AnyVariableView, { value: value, expanded: expanded, hideStringQuotes: true }), _jsx("span", { children: strings[index + 1] })] })), _jsx("span", { children: strings[0] })) }) }) }));
+    return (_jsx(Box, { sx: { width: '100%', my: 1 }, children: _jsx(Alert, { severity: 'info', children: _jsx(Typography, { variant: "body1", children: values.reduce((preComp, value, index) => (_jsxs(_Fragment, { children: [preComp, _jsx(AnyVariableView, { expanded: expanded, hideStringQuotes: true, value: value }), _jsx("span", { children: strings[index + 1] })] })), _jsx("span", { children: strings[0] })) }) }) }));
 };

package/lib/esm/LogViewer/actionComponents/custom/CoreNetworkRequestCustomAction.js

@@ -5,7 +5,7 @@ export const CoreNetworkRequestCustomAction = ({ action, result, expanded }) =>
     if (!action.payload) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(GenericFunctionRenderer, { functionName: 'askNetworkRequest', args: [
+    return (_jsxs(_Fragment, { children: [_jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(GenericFunctionRenderer, { args: [
                         action.payload.method,
                         action.payload.url,
                         {
@@ -15,5 +15,5 @@ export const CoreNetworkRequestCustomAction = ({ action, result, expanded }) =>
                             params: action.payload.params,
                             responseType: action.payload.responseType,
                         },
-                    ], tooltipMap: ['method', 'url', 'httpRequestOptions'], expanded: expanded }) }), _jsx(ActionResultDisplay, { action: action, result: result, expanded: expanded })] }));
+                    ], expanded: expanded, functionName: 'askNetworkRequest', tooltipMap: ['method', 'url', 'httpRequestOptions'] }) }), _jsx(ActionResultDisplay, { action: action, expanded: expanded, result: result })] }));
 };

package/lib/esm/LogViewer/actionComponents/genericActionRenderer/ActionResultDisplay.js

@@ -3,7 +3,7 @@ import { genericFunctionRendererStyles } from './AnyVariableView';
 import { AnyVariableView } from './AnyVariableView';
 const ActionResultDisplay = ({ result, expanded }) => {
     const [successResult, errorResult] = result || [];
-    return (_jsxs(_Fragment, { children: [successResult !== undefined && !errorResult && (_jsxs("pre", { style: genericFunctionRendererStyles.pre, children: [_jsx("span", { children: "Result: " }), _jsx(AnyVariableView, { value: successResult, expanded: expanded })] })), errorResult !== undefined && (_jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(AnyVariableView, { value: errorResult, expanded: expanded }) }))] }));
+    return (_jsxs(_Fragment, { children: [successResult !== undefined && !errorResult && (_jsxs("pre", { style: genericFunctionRendererStyles.pre, children: [_jsx("span", { children: "Result: " }), _jsx(AnyVariableView, { expanded: expanded, value: successResult })] })), errorResult !== undefined && (_jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(AnyVariableView, { expanded: expanded, value: errorResult }) }))] }));
 };
 // Make sure to export ActionResultDisplay if it's defined in a separate file
 export default ActionResultDisplay;

package/lib/esm/LogViewer/actionComponents/genericActionRenderer/AnyVariableView/AnyVariableView.js

@@ -60,13 +60,13 @@ const tryDecodeBase64 = (text) => {
 export const StringVariableView = ({ value, expanded, hideStringQuotes }) => {
     const asJson = tryParseJson(value);
     if (asJson.ok) {
-        return (_jsxs(_Fragment, { children: [_jsxs("span", { style: genericFunctionRendererStyles.jsonComment, children: ['<', "json", '>'] }), _jsx(AnyVariableView, { value: asJson.value, expanded: expanded })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("span", { style: genericFunctionRendererStyles.jsonComment, children: ['<', "json", '>'] }), _jsx(AnyVariableView, { expanded: expanded, value: asJson.value })] }));
     }
     const decoded = tryDecodeBase64(value);
     if (decoded !== undefined) {
         const asBase64Json = tryParseJson(decoded);
         if (asBase64Json.ok) {
-            return (_jsxs(_Fragment, { children: [_jsxs("span", { style: genericFunctionRendererStyles.jsonComment, children: ['<', "base64-json", '>'] }), _jsx(AnyVariableView, { value: asBase64Json.value, expanded: expanded })] }));
+            return (_jsxs(_Fragment, { children: [_jsxs("span", { style: genericFunctionRendererStyles.jsonComment, children: ['<', "base64-json", '>'] }), _jsx(AnyVariableView, { expanded: expanded, value: asBase64Json.value })] }));
         }
     }
     const trimmedValue = value.length > 25 && !expanded ? `${value.slice(0, 25)}...` : value;
@@ -80,42 +80,42 @@ export const ArrayVariableView = ({ value, expanded }) => {
         return !expanded ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "[" }), _jsx("span", { style: genericFunctionRendererStyles.emptyObject, children: "Empty Array" }), _jsx("span", { children: "]" })] })) : (_jsx(_Fragment, { children: "[]" }));
     }
     if (expanded) {
-        return (_jsxs(_Fragment, { children: [_jsx("span", { children: "[" }), _jsx("div", { style: { paddingLeft: 10 }, children: value.map((item, index) => (_jsxs("div", { children: [_jsx(AnyVariableView, { value: item, expanded: expanded }), ","] }, index))) }), _jsx("span", { children: "]" })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("span", { children: "[" }), _jsx("div", { style: { paddingLeft: 10 }, children: value.map((item, index) => (_jsxs("div", { children: [_jsx(AnyVariableView, { expanded: expanded, value: item }), ","] }, index))) }), _jsx("span", { children: "]" })] }));
     }
     return (_jsxs(_Fragment, { children: [_jsx("span", { children: "[ " }), _jsxs("span", { style: genericFunctionRendererStyles.arrayItems, children: [value.length, " items"] }), _jsx("span", { children: " ]" })] }));
 };
 export const KvsQueryConditionVariableView = ({ value, expanded }) => {
-    return _jsx(GenericFunctionRenderer, { functionName: `kvs${value.operation}`, args: [value.key, value.valueA], expanded: expanded });
+    return _jsx(GenericFunctionRenderer, { args: [value.key, value.valueA], expanded: expanded, functionName: `kvs${value.operation}` });
 };
 export const KvsLogicalOperatorVariableView = ({ value, expanded }) => {
-    return _jsx(GenericFunctionRenderer, { functionName: `kvs${value.operation}`, args: [value.conditions], expanded: expanded });
+    return _jsx(GenericFunctionRenderer, { args: [value.conditions], expanded: expanded, functionName: `kvs${value.operation}` });
 };
 export const EmptyObjectVariableView = ({ value, expanded }) => {
     return !expanded ? (_jsxs(_Fragment, { children: [_jsx("span", { children: '{ ' }), _jsx("span", { style: genericFunctionRendererStyles.emptyObject, children: "Empty Object" }), _jsx("span", { children: ' }' })] })) : (_jsx(_Fragment, { children: `{ }` }));
 };
 export const QpqBinaryDataVariableView = ({ value, expanded }) => {
-    return (_jsx("img", { src: `data:${value.mimeType || 'image/jpeg'};base64,${value.base64Data}`, alt: "Binary Data", style: { width: '100px', height: 'auto' } }));
+    return (_jsx("img", { alt: "Binary Data", src: `data:${value.mimeType || 'image/jpeg'};base64,${value.base64Data}`, style: { width: '100px', height: 'auto' } }));
 };
 export const ObjectVariableView = ({ value, expanded }) => {
     if (Array.isArray(value)) {
-        return _jsx(ArrayVariableView, { value: value, expanded: expanded });
+        return _jsx(ArrayVariableView, { expanded: expanded, value: value });
     }
     const objectKeys = Object.keys(value);
     if (value.operation && value.key && objectKeys.length <= 4) {
-        return _jsx(KvsQueryConditionVariableView, { value: value, expanded: expanded });
+        return _jsx(KvsQueryConditionVariableView, { expanded: expanded, value: value });
     }
     else if (value.operation && value.conditions && objectKeys.length == 2) {
-        return _jsx(KvsLogicalOperatorVariableView, { value: value, expanded: expanded });
+        return _jsx(KvsLogicalOperatorVariableView, { expanded: expanded, value: value });
     }
     else if (objectKeys.length == 0) {
-        return _jsx(EmptyObjectVariableView, { value: value, expanded: expanded });
+        return _jsx(EmptyObjectVariableView, { expanded: expanded, value: value });
     }
     else if (value.base64Data && value.filename) {
-        return _jsx(QpqBinaryDataVariableView, { value: value, expanded: expanded });
+        return _jsx(QpqBinaryDataVariableView, { expanded: expanded, value: value });
     }
     const cleanObject = JSON.parse(JSON.stringify(value));
     const cleanObjectKeys = Object.keys(cleanObject);
-    return !expanded ? (_jsxs(_Fragment, { children: [_jsx("span", { children: '{ ' }), cleanObjectKeys.map((key, index) => (_jsxs("span", { children: [key, Array.isArray(cleanObject[key]) && !expanded && (_jsxs(_Fragment, { children: [_jsx("span", { children: ":" }), " ", _jsx(ArrayVariableView, { value: cleanObject[key], expanded: false })] })), index < cleanObjectKeys.length - 1 && ', '] }, key))), _jsx("span", { children: ' }' })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: '{ ' }), _jsx("div", { style: { paddingLeft: 10 }, children: cleanObjectKeys.map((key, index) => (_jsxs("div", { children: [key, ": ", _jsx(AnyVariableView, { value: cleanObject[key], expanded: expanded }), ","] }, key))) }), _jsx("span", { children: '}' })] }));
+    return !expanded ? (_jsxs(_Fragment, { children: [_jsx("span", { children: '{ ' }), cleanObjectKeys.map((key, index) => (_jsxs("span", { children: [key, Array.isArray(cleanObject[key]) && !expanded && (_jsxs(_Fragment, { children: [_jsx("span", { children: ":" }), " ", _jsx(ArrayVariableView, { expanded: false, value: cleanObject[key] })] })), index < cleanObjectKeys.length - 1 && ', '] }, key))), _jsx("span", { children: ' }' })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: '{ ' }), _jsx("div", { style: { paddingLeft: 10 }, children: cleanObjectKeys.map((key, index) => (_jsxs("div", { children: [key, ": ", _jsx(AnyVariableView, { expanded: expanded, value: cleanObject[key] }), ","] }, key))) }), _jsx("span", { children: '}' })] }));
 };
 // Helper function to style values based on their type
 export const AnyVariableView = ({ value, expanded, hideStringQuotes }) => {
@@ -132,17 +132,17 @@ export const AnyVariableView = ({ value, expanded, hideStringQuotes }) => {
         return _jsx("span", { style: genericFunctionRendererStyles.numberValue, children: value });
     }
     else if (typeof value === 'string') {
-        return _jsx(StringVariableView, { value: value, expanded: expanded, hideStringQuotes: hideStringQuotes });
+        return _jsx(StringVariableView, { expanded: expanded, hideStringQuotes: hideStringQuotes, value: value });
     }
     else if (typeof value === 'object') {
-        return _jsx(ObjectVariableView, { value: value, expanded: expanded });
+        return _jsx(ObjectVariableView, { expanded: expanded, value: value });
     }
     // Fallback for other types, using normal text color
     return _jsx("span", { children: value.toString() });
 };
 const renderBasicArg = (arg, value, index, expanded, tooltip) => {
     const tooltipText = `${tooltip || arg}\n\nvalue: ${JSON.stringify(value, null, 2)}`;
-    return (_jsx(React.Fragment, { children: _jsx("span", { title: tooltipText, children: _jsx(AnyVariableView, { value: value, expanded: expanded }) }) }, arg));
+    return (_jsx(React.Fragment, { children: _jsx("span", { title: tooltipText, children: _jsx(AnyVariableView, { expanded: expanded, value: value }) }) }, arg));
 };
 export const GenericFunctionRenderer = ({ functionName, args, expanded, tooltipMap = [], argRenderer = renderBasicArg, }) => {
     // Convert args object to an array of key-value pairs and map each to a span element with dynamic styling and optional tooltip

package/lib/esm/LogViewer/actionComponents/genericActionRenderer/getGenericActionRenderer.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import ActionResultDisplay from './ActionResultDisplay';
 import { GenericFunctionRenderer, genericFunctionRendererStyles } from './AnyVariableView'; // Assuming this is the correct path
-export const getGenericActionRenderer = (functionName, argMap, tooltipMap = argMap) => ({ action, expanded, result }) => {
-    const anyPayload = action.payload;
-    const args = argMap.reduce((acc, arg) => ({ ...acc, [arg]: anyPayload[arg] }), {});
-    return (_jsxs(_Fragment, { children: [_jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(GenericFunctionRenderer, { functionName: functionName, args: args, tooltipMap: tooltipMap, expanded: expanded }) }), _jsx(ActionResultDisplay, { action: action, result: result, expanded: expanded })] }));
+export const getGenericActionRenderer = (functionName, argMap, tooltipMap = argMap) => {
+    const GenericActionRenderer = ({ action, expanded, result }) => {
+        const anyPayload = action.payload;
+        const args = argMap.reduce((acc, arg) => ({ ...acc, [arg]: anyPayload[arg] }), {});
+        return (_jsxs(_Fragment, { children: [_jsx("pre", { style: genericFunctionRendererStyles.pre, children: _jsx(GenericFunctionRenderer, { args: args, expanded: expanded, functionName: functionName, tooltipMap: tooltipMap }) }), _jsx(ActionResultDisplay, { action: action, expanded: expanded, result: result })] }));
+    };
+    return GenericActionRenderer;
 };

package/lib/esm/LogViewer/charts/CostPerService.js

@@ -25,5 +25,5 @@ export const CostPerService = ({ logs }) => {
         }))
             .sort((a, b) => b.cost - a.cost);
     }, [logs]);
-    return (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", gutterBottom: true, children: "Cost per Service" }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Service" }), _jsx(TableCell, { align: "right", children: "Executions" }), _jsx(TableCell, { align: "right", children: "Runtime (ms)" }), _jsx(TableCell, { align: "right", children: "Cost ($)" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: row.service }), _jsx(TableCell, { align: "right", children: row.executions }), _jsx(TableCell, { align: "right", children: row.runtime }), _jsx(TableCell, { align: "right", children: row.cost.toFixed(8) })] }, row.service))) })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Typography, { gutterBottom: true, variant: "h5", children: "Cost per Service" }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Service" }), _jsx(TableCell, { align: "right", children: "Executions" }), _jsx(TableCell, { align: "right", children: "Runtime (ms)" }), _jsx(TableCell, { align: "right", children: "Cost ($)" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: row.service }), _jsx(TableCell, { align: "right", children: row.executions }), _jsx(TableCell, { align: "right", children: row.runtime }), _jsx(TableCell, { align: "right", children: row.cost.toFixed(8) })] }, row.service))) })] }) })] }));
 };

package/lib/esm/LogViewer/charts/ErrorsByType.js

@@ -4,5 +4,5 @@ import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow
 import { useErrorsByType } from '../hooks/useErrorsByType';
 export const ErrorsByType = ({ logs }) => {
     const data = useErrorsByType(logs);
-    return (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", gutterBottom: true, children: "Errors by Type" }), _jsxs(BarChart, { width: 1200, height: 300, data: data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "errorText" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Legend, {}), _jsx(Bar, { dataKey: "count", fill: "#8884d8" })] }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Error Type" }), _jsx(TableCell, { align: "right", children: "Count" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: row.errorText }), _jsx(TableCell, { align: "right", children: row.count })] }, row.errorText))) })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Typography, { gutterBottom: true, variant: "h5", children: "Errors by Type" }), _jsxs(BarChart, { data: data, height: 300, width: 1200, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "errorText" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Legend, {}), _jsx(Bar, { dataKey: "count", fill: "#8884d8" })] }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Error Type" }), _jsx(TableCell, { align: "right", children: "Count" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: row.errorText }), _jsx(TableCell, { align: "right", children: row.count })] }, row.errorText))) })] }) })] }));
 };

package/lib/esm/LogViewer/charts/ErrorsOverTime.js

@@ -4,5 +4,5 @@ import { Typography } from '@mui/material';
 import { useErrorsOverTime } from '../hooks/useErrorsOverTime';
 export const ErrorsOverTime = ({ logs, searchParams }) => {
     const data = useErrorsOverTime(logs, searchParams);
-    return (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", gutterBottom: true, children: "Errors Over Time" }), _jsxs(LineChart, { width: 1200, height: 300, data: data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "time" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Legend, {}), _jsx(Line, { type: "monotone", dataKey: "errors", stroke: "#8884d8", activeDot: { r: 8 } })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Typography, { gutterBottom: true, variant: "h5", children: "Errors Over Time" }), _jsxs(LineChart, { data: data, height: 300, width: 1200, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "time" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Legend, {}), _jsx(Line, { activeDot: { r: 8 }, dataKey: "errors", stroke: "#8884d8", type: "monotone" })] })] }));
 };

package/lib/esm/LogViewer/charts/RequestsByService.js

@@ -4,7 +4,7 @@ import { Typography } from '@mui/material';
 import { useRequestsByService } from '../hooks/useRequestsByService';
 export const RequestsByService = ({ logs, searchParams }) => {
     const data = useRequestsByService(logs, searchParams);
-    return (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", gutterBottom: true, children: "Requests by Service" }), _jsxs(LineChart, { width: 1200, height: 300, data: data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "time" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Legend, {}), Object.keys(data[0] || {})
+    return (_jsxs(_Fragment, { children: [_jsx(Typography, { gutterBottom: true, variant: "h5", children: "Requests by Service" }), _jsxs(LineChart, { data: data, height: 300, width: 1200, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "time" }), _jsx(YAxis, {}), _jsx(Tooltip, {}), _jsx(Legend, {}), Object.keys(data[0] || {})
                         .filter((key) => key !== 'time')
-                        .map((service) => (_jsx(Line, { type: "monotone", dataKey: service, stroke: `#${Math.floor(Math.random() * 16777215).toString(16)}` }, service)))] })] }));
+                        .map((service) => (_jsx(Line, { dataKey: service, stroke: `#${Math.floor(Math.random() * 16777215).toString(16)}`, type: "monotone" }, service)))] })] }));
 };

package/lib/esm/LogViewer/hooks/useLogManagement.js

@@ -10,7 +10,7 @@ export const useLogManagement = () => {
         window.viewLog = (log) => {
             setCorrelation(log.correlation);
         };
-    }, [logs]);
+    }, [logs, setCorrelation]);
     useEffect(() => {
         console.log('logs attached to window, try: viewLog(logs[0])');
     }, []);

package/lib/esm/LogViewer/hooks/useLogTreeData.js

@@ -1,4 +1,4 @@
-import { useAuthAccessToken, useBaseUrlResolvers } from 'quidproquo-web-react';
+import { useAuthAccessToken, useBaseUrlResolvers, useEffectCallback } from 'quidproquo-web-react';
 import { useEffect, useState } from 'react';
 import { getLogHierarchy } from '../logic';
 const filterQpqActions = (logs) => {
@@ -33,20 +33,23 @@ export const useLogTreeData = (correlationId, hideQpqActions = false) => {
         }
         setIsLoading(false);
     };
+    // Stable identity so the effect below can list it as a dependency while
+    // still only re-running when a correlation id appears or disappears.
+    const fetchTreeData = useEffectCallback(async () => {
+        setIsLoading(true);
+        console.log('correlationId: ', correlationId);
+        const logHierarchy = await getLogHierarchy(baseUrlResolvers.getApiUrl(), correlationId, false, accessToken);
+        if (logHierarchy) {
+            setTreeData([logHierarchy]);
+        }
+        setIsLoading(false);
+    });
+    const hasCorrelationId = !!correlationId;
     useEffect(() => {
-        const fetchTreeData = async () => {
-            setIsLoading(true);
-            console.log('correlationId: ', correlationId);
-            const logHierarchy = await getLogHierarchy(baseUrlResolvers.getApiUrl(), correlationId, false, accessToken);
-            if (logHierarchy) {
-                setTreeData([logHierarchy]);
-            }
-            setIsLoading(false);
-        };
-        if (correlationId) {
+        if (hasCorrelationId) {
             fetchTreeData();
         }
-    }, [!!correlationId]);
+    }, [hasCorrelationId, fetchTreeData]);
     const result = {
         isLoading,
         refreshTreeData: refreshTreeData,

package/lib/esm/LogViewer/hooks/useServiceNames.js

@@ -1,17 +1,18 @@
-import { useAuthAccessToken, useBaseUrlResolvers } from 'quidproquo-web-react';
+import { useAuthAccessToken, useBaseUrlResolvers, useEffectCallback } from 'quidproquo-web-react';
 import { useEffect, useMemo, useState } from 'react';
 import { getServiceNames } from '../logic';
 export const useServiceNames = () => {
     const [serviceNames, setServiceNames] = useState(['All']);
     const accessToken = useAuthAccessToken();
     const baseUrlResolvers = useBaseUrlResolvers();
+    // Stable identity so the mount-only effect below can list it as a dependency.
+    const fetchData = useEffectCallback(async () => {
+        const updatedServiceNames = await getServiceNames(baseUrlResolvers.getApiUrl(), accessToken);
+        setServiceNames(updatedServiceNames);
+    });
     useEffect(() => {
-        const fetchData = async () => {
-            const updatedServiceNames = await getServiceNames(baseUrlResolvers.getApiUrl(), accessToken);
-            setServiceNames(updatedServiceNames);
-        };
         fetchData();
-    }, []);
+    }, [fetchData]);
     const serviceOptions = useMemo(() => serviceNames.map((s) => ({
         label: s
             .split('-')

package/lib/esm/components/AdminDialog.js

@@ -20,14 +20,14 @@ export const AdminDialog = ({ open, handleClose, title, selectedTab, onSelectTab
     const handleTabChange = (event, newValue) => {
         onSelectTab(tabs[newValue]);
     };
-    return (_jsxs(Dialog, { open: open, scroll: 'paper', "aria-labelledby": "scroll-dialog-title", "aria-describedby": "scroll-dialog-description", onClose: handleClose, maxWidth: false, fullWidth: true, PaperProps: {
+    return (_jsxs(Dialog, { "aria-describedby": "scroll-dialog-description", "aria-labelledby": "scroll-dialog-title", fullWidth: true, maxWidth: false, onClose: handleClose, open: open, PaperProps: {
             style: {
                 width: '90%',
                 height: '90%',
                 maxHeight: '90%',
                 maxWidth: '90%',
             },
-        }, children: [_jsx(DialogTitle, { id: "scroll-dialog-title", children: title }), tabs.length > 0 && (_jsx(AppBar, { position: "sticky", color: "primary", children: _jsx(Tabs, { value: selectedTabIndex, onChange: handleTabChange, textColor: "inherit", indicatorColor: "secondary", children: tabs.map((t) => (_jsx(Tab, { label: t }, t))) }) })), _jsx(DialogContent, { dividers: true, sx: {
+        }, scroll: 'paper', children: [_jsx(DialogTitle, { id: "scroll-dialog-title", children: title }), tabs.length > 0 && (_jsx(AppBar, { color: "primary", position: "sticky", children: _jsx(Tabs, { indicatorColor: "secondary", onChange: handleTabChange, textColor: "inherit", value: selectedTabIndex, children: tabs.map((t) => (_jsx(Tab, { label: t }, t))) }) })), _jsx(DialogContent, { dividers: true, sx: {
                     minHeight: '150px',
                     overflowY: 'scroll',
                 }, children: children }), buttons.length > 0 && (_jsx(DialogActions, { children: buttons.map((b) => (_jsx(Button, { disabled: b.disabled, onClick: b.onClick, children: b.text }, b.text))) }))] }));

package/lib/esm/components/AsyncButton.js

@@ -17,5 +17,5 @@ export function AsyncButton({ onClick, children, disabled, type }) {
             setLoading(false);
         }
     };
-    return (_jsx(Button, { onClick: handleLogin, fullWidth: true, variant: "contained", color: "primary", disabled: loading || disabled, style: { maxHeight: '100%', height: '4em' }, type: type, children: loading ? _jsx(CircularProgress, { size: 24 }) : children }));
+    return (_jsx(Button, { color: "primary", disabled: loading || disabled, fullWidth: true, onClick: handleLogin, style: { maxHeight: '100%', height: '4em' }, type: type, variant: "contained", children: loading ? _jsx(CircularProgress, { size: 24 }) : children }));
 }

package/lib/esm/components/AutocompleteInput.js

@@ -5,7 +5,7 @@ export const AutocompleteInput = ({ label, value, options, onChange }) => {
         onChange(newValue ? newValue.value : '');
     };
     const selectedValue = options.find((option) => option.value === value) || null;
-    return (_jsx(FormControl, { fullWidth: true, children: _jsx(Autocomplete, { options: options, getOptionLabel: (option) => option.label, value: selectedValue, onChange: handleChange, renderInput: (params) => (_jsx(TextField, { ...params, label: label, InputLabelProps: {
+    return (_jsx(FormControl, { fullWidth: true, children: _jsx(Autocomplete, { getOptionLabel: (option) => option.label, onChange: handleChange, options: options, renderInput: (params) => (_jsx(TextField, { ...params, InputLabelProps: {
                     shrink: true,
-                } })) }) }));
+                }, label: label })), value: selectedValue }) }));
 };

package/lib/esm/components/DataGrid.js

@@ -13,5 +13,5 @@ export const DataGrid = ({ items, columns, onRowClick }) => {
         valueGetter: 'valueGetter' in col ? (params) => col.valueGetter(params.row, params) : undefined,
         renderCell: (params) => col.renderCell?.(params.row, params),
     }));
-    return (_jsx(Box, { sx: { height: '100%', width: '100%' }, children: _jsx(MuiDataGrid, { rows: items, columns: muiColumns, onRowClick: handleRowClick }) }));
+    return (_jsx(Box, { sx: { height: '100%', width: '100%' }, children: _jsx(MuiDataGrid, { columns: muiColumns, onRowClick: handleRowClick, rows: items }) }));
 };

package/lib/esm/components/DataGridPagination/DataGridPagination.js

@@ -5,5 +5,5 @@ export function DataGridPagination() {
     const apiRef = useGridApiContext();
     const page = useGridSelector(apiRef, gridPageSelector);
     const pageCount = useGridSelector(apiRef, gridPageCountSelector);
-    return _jsx(Pagination, { color: "primary", count: pageCount, page: page + 1, onChange: (event, value) => apiRef.current.setPage(value - 1) });
+    return _jsx(Pagination, { color: "primary", count: pageCount, onChange: (event, value) => apiRef.current.setPage(value - 1), page: page + 1 });
 }

package/lib/esm/components/DateCell/DateCell.js

@@ -12,5 +12,5 @@ export const DateCell = (props) => {
         month: '2-digit',
         year: '2-digit',
     });
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(Typography, { variant: "body2", component: "span", children: [formattedDate, " ", formattedTime] }), _jsx(LastSeen, { isoTime: date.toISOString(), timeStyle: "twitter" })] }));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(Typography, { component: "span", variant: "body2", children: [formattedDate, " ", formattedTime] }), _jsx(LastSeen, { isoTime: date.toISOString(), timeStyle: "twitter" })] }));
 };

package/lib/esm/components/DateRangePicker.js

@@ -30,10 +30,10 @@ export const DateRangePicker = ({ startIsoDateTime, endIsoDateTime, setStartIsoD
     const handleQuickTimeClose = () => {
         setAnchorEl(null);
     };
-    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterDateFns, children: [_jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 6, children: _jsx(Box, { position: "relative", children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "Start DateTime", value: new Date(startIsoDateTime), onChange: handleStartDateChange }) }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsxs(Box, { position: "relative", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", value: new Date(endIsoDateTime), onChange: handleEndDateChange }) }), _jsx(IconButton, { "aria-label": "quick time select", "aria-controls": "quick-time-menu", "aria-haspopup": "true", onClick: handleQuickTimeClick, sx: {
+    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterDateFns, children: [_jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 6, children: _jsx(Box, { position: "relative", children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "Start DateTime", onChange: handleStartDateChange, value: new Date(startIsoDateTime) }) }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsxs(Box, { position: "relative", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", onChange: handleEndDateChange, value: new Date(endIsoDateTime) }) }), _jsx(IconButton, { "aria-controls": "quick-time-menu", "aria-haspopup": "true", "aria-label": "quick time select", onClick: handleQuickTimeClick, sx: {
                                         position: 'absolute',
                                         right: '-28px',
                                         top: '50%',
                                         transform: 'translateY(-50%)',
-                                    }, children: _jsx(ExpandMoreIcon, {}) })] }) })] }), _jsxs(Menu, { id: "quick-time-menu", anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleQuickTimeClose, children: [_jsx(MenuItem, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
+                                    }, children: _jsx(ExpandMoreIcon, {}) })] }) })] }), _jsxs(Menu, { anchorEl: anchorEl, id: "quick-time-menu", keepMounted: true, onClose: handleQuickTimeClose, open: Boolean(anchorEl), children: [_jsx(MenuItem, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
 };

package/lib/esm/components/MainLayout/MainLayout.js

@@ -21,7 +21,7 @@ export function MainLayout() {
                     pb: '56px', // <— prevent content from being hidden behind bottom nav
                 }, children: tabs
                     .filter((t, index) => index === tab)
-                    .map((tab) => (_jsx(tab.View, {}, tab.name))) }), _jsxs(BottomNavigation, { value: tab, onChange: (event, newValue) => {
+                    .map((tab) => (_jsx(tab.View, {}, tab.name))) }), _jsxs(BottomNavigation, { onChange: (event, newValue) => {
                     // The trailing Logout / Loading actions are not tabs
                     if (newValue < tabs.length) {
                         handleTabOnChange(event, newValue);
@@ -35,5 +35,5 @@ export function MainLayout() {
                     borderTop: 1,
                     borderColor: 'divider',
                     bgcolor: 'background.paper',
-                }, children: [tabs.map((t) => (_jsx(BottomNavigationAction, { label: t.name, icon: t.icon }, t.name))), loading && _jsx(BottomNavigationAction, { label: "Loading", icon: _jsx(CircularProgress, { size: 18 }), disabled: true }), _jsx(BottomNavigationAction, { label: "Logout", icon: _jsx(LogoutIcon, {}), onClick: () => authApi.authLogout() })] })] }));
+                }, value: tab, children: [tabs.map((t) => (_jsx(BottomNavigationAction, { icon: t.icon, label: t.name }, t.name))), loading && _jsx(BottomNavigationAction, { disabled: true, icon: _jsx(CircularProgress, { size: 18 }), label: "Loading" }), _jsx(BottomNavigationAction, { icon: _jsx(LogoutIcon, {}), label: "Logout", onClick: () => authApi.authLogout() })] })] }));
 }

package/lib/esm/components/TextInput.js

@@ -4,7 +4,7 @@ export const TextInput = ({ label, value, onChange }) => {
     const handleChange = (event) => {
         onChange(event.target.value);
     };
-    return (_jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { label: label, value: value || '', onChange: handleChange, InputLabelProps: {
+    return (_jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
                 shrink: true,
-            } }) }));
+            }, label: label, onChange: handleChange, value: value || '' }) }));
 };

package/lib/esm/tmp/RandomView.js

@@ -36,6 +36,6 @@ const columns = [
 ];
 const AdminView = () => {
     const accessToken = useAuthAccessToken();
-    return (_jsx(TabViewBox, { header: () => (_jsxs(GridContainer, { spacing: 2, xs: 12, children: [_jsx(GridItem, { xs: 6, children: _jsx(DateRangePicker, { startIsoDateTime: new Date().toISOString(), endIsoDateTime: new Date().toISOString(), setStartIsoDateTime: () => { }, setEndIsoDateTime: () => { } }) }), _jsx(GridItem, { xs: 4, children: _jsx(TextInput, { label: "Email", onChange: () => { }, value: "" }) }), _jsx(GridItem, { xs: 2, children: _jsx(AsyncButton, { onClick: async () => { }, children: "Search" }) })] })), body: () => _jsx(DataGrid, { items: [], columns: columns }) }));
+    return (_jsx(TabViewBox, { body: () => _jsx(DataGrid, { columns: columns, items: [] }), header: () => (_jsxs(GridContainer, { spacing: 2, xs: 12, children: [_jsx(GridItem, { xs: 6, children: _jsx(DateRangePicker, { endIsoDateTime: new Date().toISOString(), setEndIsoDateTime: () => { }, setStartIsoDateTime: () => { }, startIsoDateTime: new Date().toISOString() }) }), _jsx(GridItem, { xs: 4, children: _jsx(TextInput, { label: "Email", onChange: () => { }, value: "" }) }), _jsx(GridItem, { xs: 2, children: _jsx(AsyncButton, { onClick: async () => { }, children: "Search" }) })] })) }));
 };
 export default memo(AdminView);

package/lib/esm/useFederatedAddon.js

@@ -1,4 +1,4 @@
-import { useAuthAccessToken, useBaseUrlResolvers } from 'quidproquo-web-react';
+import { useAuthAccessToken, useBaseUrlResolvers, useEffectCallback } from 'quidproquo-web-react';
 import { useEffect, useState } from 'react';
 import { useLoadFederatedAddons } from './FederatedAddonProvider';
 export function useFederatedAddon() {
@@ -7,12 +7,13 @@ export function useFederatedAddon() {
     const accessToken = useAuthAccessToken();
     const baseUrlResolvers = useBaseUrlResolvers();
     const loadAddons = useLoadFederatedAddons();
+    // Stable identity so the mount-only effect below can list it as a dependency.
+    const doAsyncWork = useEffectCallback(async () => {
+        setLoading(true);
+        const addons = await loadAddons({ baseUrlResolvers, accessToken });
+        setFederatedAddons(addons);
+    });
     useEffect(() => {
-        const doAsyncWork = async () => {
-            setLoading(true);
-            const addons = await loadAddons({ baseUrlResolvers, accessToken });
-            setFederatedAddons(addons);
-        };
         doAsyncWork()
             .catch((e) => {
             console.log(e);
@@ -21,7 +22,7 @@ export function useFederatedAddon() {
             .finally(() => {
             setLoading(false);
         });
-    }, []);
+    }, [doAsyncWork]);
     return {
         addons: federatedAddons,
         loading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-admin",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/esm/index.js",
@@ -44,11 +44,11 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "javascript-time-ago": "^2.5.9",
-    "quidproquo-core": "0.1.1",
-    "quidproquo-tsconfig": "0.1.1",
-    "quidproquo-web": "0.1.1",
-    "quidproquo-web-react": "0.1.1",
-    "quidproquo-webserver": "0.1.1",
+    "quidproquo-core": "0.1.2",
+    "quidproquo-tsconfig": "0.1.2",
+    "quidproquo-web": "0.1.2",
+    "quidproquo-web-react": "0.1.2",
+    "quidproquo-webserver": "0.1.2",
     "react": ">=18.3.1",
     "react-d3-tree": "^3.6.6",
     "react-dom": "18.3.1",