quidproquo-web-admin 0.1.1 → 0.1.2

package/lib/esm/Auth/Auth.js

@@ -20,7 +20,7 @@ export function Auth({ children }) {
     if (state.authenticateUserResponse?.challenge === AuthenticateUserChallenge.MFA_SETUP) {
         return (_jsx(QpqRuntimeEffectCatcher, { runtime: authRuntime, children: _jsx(AuthChallengeMfaSetup, { authState: state }) }));
     }
-    return (_jsxs(QpqRuntimeEffectCatcher, { runtime: authRuntime, children: [!isAuthenticated && (_jsx(Login, { setUsername: api.authUISetUsername, setPassword: api.authUISetPassword, username: state.username, password: state.password, onLogin: api.authLogin })), isAuthenticated && (_jsx(authContext.Provider, { value: {
+    return (_jsxs(QpqRuntimeEffectCatcher, { runtime: authRuntime, children: [!isAuthenticated && (_jsx(Login, { onLogin: api.authLogin, password: state.password, setPassword: api.authUISetPassword, setUsername: api.authUISetUsername, username: state.username })), isAuthenticated && (_jsx(authContext.Provider, { value: {
                     challenge: state.authenticateUserResponse?.challenge,
                     session: state.authenticateUserResponse?.session,
                     username: state.username,

package/lib/esm/Auth/AuthChallengeMfaSetup/AuthChallengeMfaSetup.js

@@ -39,5 +39,5 @@ export function AuthChallengeMfaSetup({ authState }) {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: _jsx(Box, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Typography, { variant: "h5", gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(LockIcon, { sx: { marginRight: 1 } }), "Set Up Authenticator"] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { variant: "body2", color: "text.secondary", children: "Add this account to your authenticator app, then enter the 6-digit code it generates." }) }), _jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: "Secret key" }), _jsx(Typography, { variant: "body1", sx: { fontFamily: 'monospace', wordBreak: 'break-all' }, children: state.secretCode || 'Loading…' })] }), state.secretCode && (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { variant: "caption", color: "text.secondary", sx: { wordBreak: 'break-all' }, children: buildOtpAuthUri(authState.username, state.secretCode) }) })), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { required: true, fullWidth: true, id: "mfaCode", label: "Authentication Code", autoFocus: true, inputProps: { inputMode: 'numeric', pattern: '[0-9]*', maxLength: 6 }, value: state.mfaCode, onChange: (event) => api.authChallengeSetMfaSetupCode(event.target.value.replace(/\D/g, '')) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AsyncButton, { onClick: () => api.authChallengeSendMfaSetupCode(challenge, authState.username), disabled: !isCodeValid || !state.secretCode, children: "Verify" }) })] }) }) }));
+        }, children: _jsx(Box, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Typography, { gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, variant: "h5", children: [_jsx(LockIcon, { sx: { marginRight: 1 } }), "Set Up Authenticator"] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", variant: "body2", children: "Add this account to your authenticator app, then enter the 6-digit code it generates." }) }), _jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { color: "text.secondary", variant: "caption", children: "Secret key" }), _jsx(Typography, { sx: { fontFamily: 'monospace', wordBreak: 'break-all' }, variant: "body1", children: state.secretCode || 'Loading…' })] }), state.secretCode && (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", sx: { wordBreak: 'break-all' }, variant: "caption", children: buildOtpAuthUri(authState.username, state.secretCode) }) })), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { autoFocus: true, fullWidth: true, id: "mfaCode", inputProps: { inputMode: 'numeric', pattern: '[0-9]*', maxLength: 6 }, label: "Authentication Code", onChange: (event) => api.authChallengeSetMfaSetupCode(event.target.value.replace(/\D/g, '')), required: true, value: state.mfaCode }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AsyncButton, { disabled: !isCodeValid || !state.secretCode, onClick: () => api.authChallengeSendMfaSetupCode(challenge, authState.username), children: "Verify" }) })] }) }) }));
 }

package/lib/esm/Auth/AuthChallengeMfaSetup/logic/authActionCreator.js

@@ -1,5 +1,5 @@
 import { askStateDispatchEffect } from 'quidproquo-core';
-import { AuthChallengeMfaSetupEffect, } from './authChallengeTypes';
+import { AuthChallengeMfaSetupEffect } from './authChallengeTypes';
 export function* askAuthChallengeSetMfaSetupCode(mfaCode) {
     yield* askStateDispatchEffect(AuthChallengeMfaSetupEffect.SetMfaCode, mfaCode);
 }

package/lib/esm/Auth/AuthChallengeNewPasswordRequired/AuthChallengeNewPasswordRequired.js

@@ -23,5 +23,5 @@ export function AuthChallengeNewPasswordRequired({ authState }) {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: _jsx(Box, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Typography, { variant: "h5", gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(LockIcon, { sx: { marginRight: 1 } }), "Password Change Required"] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { required: true, fullWidth: true, id: "newPassword", label: "New Password", type: "password", autoFocus: true, value: state.passwordA, onChange: (event) => api.authChallengeSetPasswordA(event.target.value) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { required: true, fullWidth: true, id: "confirmPassword", label: "Confirm Password", type: "password", value: state.passwordB, onChange: (event) => api.authChallengeSetPasswordB(event.target.value) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AsyncButton, { onClick: () => api.authChallengeSendPasswords(authState.authenticateUserResponse?.challenge, authState.authenticateUserResponse?.session, authState.username), disabled: !arePasswordsMatching, children: "Update Password" }) })] }) }) }));
+        }, children: _jsx(Box, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Typography, { gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, variant: "h5", children: [_jsx(LockIcon, { sx: { marginRight: 1 } }), "Password Change Required"] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { autoFocus: true, fullWidth: true, id: "newPassword", label: "New Password", onChange: (event) => api.authChallengeSetPasswordA(event.target.value), required: true, type: "password", value: state.passwordA }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { fullWidth: true, id: "confirmPassword", label: "Confirm Password", onChange: (event) => api.authChallengeSetPasswordB(event.target.value), required: true, type: "password", value: state.passwordB }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AsyncButton, { disabled: !arePasswordsMatching, onClick: () => api.authChallengeSendPasswords(authState.authenticateUserResponse?.challenge, authState.authenticateUserResponse?.session, authState.username), children: "Update Password" }) })] }) }) }));
 }

package/lib/esm/Auth/AuthChallengeSoftwareTokenMfa/AuthChallengeSoftwareTokenMfa.js

@@ -23,5 +23,5 @@ export function AuthChallengeSoftwareTokenMfa({ authState }) {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: _jsx(Box, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Typography, { variant: "h5", gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(LockIcon, { sx: { marginRight: 1 } }), "Verification Code"] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { variant: "body2", color: "text.secondary", children: "Enter the 6-digit code from your authenticator app." }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { required: true, fullWidth: true, id: "mfaCode", label: "Authentication Code", autoFocus: true, inputProps: { inputMode: 'numeric', pattern: '[0-9]*', maxLength: 6 }, value: state.mfaCode, onChange: (event) => api.authChallengeSetMfaCode(event.target.value.replace(/\D/g, '')) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AsyncButton, { onClick: () => api.authChallengeSendMfaCode(authState.authenticateUserResponse?.challenge, authState.authenticateUserResponse?.session, authState.username), disabled: !isCodeValid, children: "Verify" }) })] }) }) }));
+        }, children: _jsx(Box, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Typography, { gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, variant: "h5", children: [_jsx(LockIcon, { sx: { marginRight: 1 } }), "Verification Code"] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", variant: "body2", children: "Enter the 6-digit code from your authenticator app." }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { autoFocus: true, fullWidth: true, id: "mfaCode", inputProps: { inputMode: 'numeric', pattern: '[0-9]*', maxLength: 6 }, label: "Authentication Code", onChange: (event) => api.authChallengeSetMfaCode(event.target.value.replace(/\D/g, '')), required: true, value: state.mfaCode }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AsyncButton, { disabled: !isCodeValid, onClick: () => api.authChallengeSendMfaCode(authState.authenticateUserResponse?.challenge, authState.authenticateUserResponse?.session, authState.username), children: "Verify" }) })] }) }) }));
 }

package/lib/esm/Auth/Login.js

@@ -14,8 +14,8 @@ export function Login({ username, password, setUsername, setPassword, onLogin })
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: _jsx(Box, { component: "form", action: "#", autoComplete: "on", method: "post", sx: { width: '100%', maxWidth: 360 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Typography, { variant: "h5", gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(LockIcon, { sx: { marginRight: 1 } }), "QPQ Admin"] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { required: true, fullWidth: true, id: "username", label: "Username", type: "username", autoComplete: "username", autoFocus: true, value: username, onChange: (event) => setUsername(event.target.value) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { required: true, fullWidth: true, id: "password", label: "Password", type: "password", autoComplete: "current-password", value: password, onChange: (event) => setPassword(event.target.value) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AsyncButton, { type: "submit", onClick: async (event) => {
+        }, children: _jsx(Box, { action: "#", autoComplete: "on", component: "form", method: "post", sx: { width: '100%', maxWidth: 360 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Typography, { gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, variant: "h5", children: [_jsx(LockIcon, { sx: { marginRight: 1 } }), "QPQ Admin"] }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { autoComplete: "username", autoFocus: true, fullWidth: true, id: "username", label: "Username", onChange: (event) => setUsername(event.target.value), required: true, type: "username", value: username }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TextField, { autoComplete: "current-password", fullWidth: true, id: "password", label: "Password", onChange: (event) => setPassword(event.target.value), required: true, type: "password", value: password }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AsyncButton, { onClick: async (event) => {
                                 event.preventDefault();
                                 await onLogin();
-                            }, children: "Login" }) })] }) }) }));
+                            }, type: "submit", children: "Login" }) })] }) }) }));
 }

package/lib/esm/Config/Config.js

@@ -29,15 +29,15 @@ export function Config() {
     };
     const filteredServices = services.filter((s) => s.label.toLowerCase().includes(search.toLowerCase()));
     const selectedService = selectedServiceOverride || services[0]?.label;
-    return (_jsxs(Box, { sx: { display: 'flex' }, children: [_jsx(CssBaseline, {}), _jsxs(Drawer, { variant: "permanent", sx: {
+    return (_jsxs(Box, { sx: { display: 'flex' }, children: [_jsx(CssBaseline, {}), _jsxs(Drawer, { sx: {
                     width: drawerWidth,
                     flexShrink: 0,
                     [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
-                }, children: [_jsx(Toolbar, { children: _jsx(TextField, { fullWidth: true, size: "small", variant: "outlined", placeholder: "Search services", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
+                }, variant: "permanent", children: [_jsx(Toolbar, { children: _jsx(TextField, { fullWidth: true, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
                                 if (e.key === 'Enter') {
                                     setSearch(filteredServices[0]?.label);
                                     handleServiceClick(filteredServices[0]?.label);
                                 }
-                            }, sx: { mt: 2 } }) }), _jsx(Box, { sx: { overflow: 'auto', p: 2 }, children: _jsx(List, { children: filteredServices.map((service) => (_jsx(ListItem, { disablePadding: true, children: _jsx(ListItemButton, { selected: service.label === selectedService, onClick: () => handleServiceClick(service.label), children: _jsx(ListItemText, { primary: service.label }) }) }, service.value))) }) })] }), _jsxs(Box, { component: "main", sx: { flexGrow: 1, p: 3 }, children: [_jsxs(Typography, { variant: "h5", gutterBottom: true, children: [selectedService, " Service"] }), _jsx(Tabs, { value: tabIndex, onChange: handleTabChange, sx: { borderBottom: 1, borderColor: 'divider' }, children: sections.map((section, index) => (_jsx(Tab, { label: section }, index))) }), _jsxs(Box, { sx: { mt: 2 }, children: [sections[tabIndex] === 'General' && _jsxs(Typography, { children: ["General settings for ", selectedService] }), sections[tabIndex] === 'Settings' && _jsx(Typography, { children: "Custom configuration options" }), sections[tabIndex] === 'Advanced' && _jsx(Typography, { children: "Advanced tuning and overrides" })] })] })] }));
+                            }, placeholder: "Search services", size: "small", sx: { mt: 2 }, value: search, variant: "outlined" }) }), _jsx(Box, { sx: { overflow: 'auto', p: 2 }, children: _jsx(List, { children: filteredServices.map((service) => (_jsx(ListItem, { disablePadding: true, children: _jsx(ListItemButton, { onClick: () => handleServiceClick(service.label), selected: service.label === selectedService, children: _jsx(ListItemText, { primary: service.label }) }) }, service.value))) }) })] }), _jsxs(Box, { component: "main", sx: { flexGrow: 1, p: 3 }, children: [_jsxs(Typography, { gutterBottom: true, variant: "h5", children: [selectedService, " Service"] }), _jsx(Tabs, { onChange: handleTabChange, sx: { borderBottom: 1, borderColor: 'divider' }, value: tabIndex, children: sections.map((section, index) => (_jsx(Tab, { label: section }, index))) }), _jsxs(Box, { sx: { mt: 2 }, children: [sections[tabIndex] === 'General' && _jsxs(Typography, { children: ["General settings for ", selectedService] }), sections[tabIndex] === 'Settings' && _jsx(Typography, { children: "Custom configuration options" }), sections[tabIndex] === 'Advanced' && _jsx(Typography, { children: "Advanced tuning and overrides" })] })] })] }));
 }
 export default Config;

package/lib/esm/LogViewer/ActionHistoryItem.js

@@ -3,5 +3,5 @@ import TruncatedText from './TruncatedText';
 export const ActionHistoryItem = ({ action, result, expanded }) => {
     const inputText = JSON.stringify(action.payload, null, 2);
     const outputText = JSON.stringify(result, null, 2);
-    return (_jsxs(_Fragment, { children: [_jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: _jsx(TruncatedText, { title: "Input", text: inputText, expanded: expanded }) }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: _jsx(TruncatedText, { title: "Output", text: outputText, expanded: expanded }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: _jsx(TruncatedText, { expanded: expanded, text: inputText, title: "Input" }) }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: _jsx(TruncatedText, { expanded: expanded, text: outputText, title: "Output" }) })] }));
 };

package/lib/esm/LogViewer/ActionRender/ActionRender.js

@@ -24,7 +24,7 @@ export const AnyCustomAction = ({ action, result, expanded }) => {
 export const ActionRender = ({ action, result, isLegacy, expanded }) => {
     const actionComponentConfig = actionComponentMap[action.type];
     if (!isLegacy && action.type === SystemActionType.Batch) {
-        return _jsx(CoreBatchCustomAction, { action: action, result: result, expanded: expanded });
+        return _jsx(CoreBatchCustomAction, { action: action, expanded: expanded, result: result });
     }
     const ActionComponent = isLegacy
         ? ActionHistoryItem
@@ -33,7 +33,7 @@ export const ActionRender = ({ action, result, isLegacy, expanded }) => {
             : actionComponentConfig
                 ? getGenericActionRenderer(actionComponentConfig[0], actionComponentConfig.slice(1))
                 : AnyCustomAction;
-    return (_jsx(_Fragment, { children: _jsx(ActionComponent, { action: action, result: result, expanded: expanded }) }));
+    return (_jsx(_Fragment, { children: _jsx(ActionComponent, { action: action, expanded: expanded, result: result }) }));
 };
 export const AnyActionHistoryItem = ({ action, result }) => {
     const [expanded, setExpanded] = useState(false);
@@ -44,5 +44,5 @@ export const AnyActionHistoryItem = ({ action, result }) => {
     const toggleLegacy = () => {
         setLegacy(!legacy);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { variant: "h6", component: "span", children: action.type.split('/').slice(-2).join('::') }), _jsx(Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: _jsx(IconButton, { size: "small", onClick: toggleExpanded, children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) }), _jsx(Tooltip, { title: "Legacy View", children: _jsx(IconButton, { size: "small", onClick: toggleLegacy, children: _jsx(HistoryIcon, { color: legacy ? 'primary' : 'inherit' }) }) })] }), _jsx(ActionRender, { action: action, result: result, isLegacy: legacy, expanded: expanded })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { alignItems: "center", display: "flex", children: [_jsx(Typography, { component: "span", variant: "h6", children: action.type.split('/').slice(-2).join('::') }), _jsx(Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: _jsx(IconButton, { onClick: toggleExpanded, size: "small", children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) }), _jsx(Tooltip, { title: "Legacy View", children: _jsx(IconButton, { onClick: toggleLegacy, size: "small", children: _jsx(HistoryIcon, { color: legacy ? 'primary' : 'inherit' }) }) })] }), _jsx(ActionRender, { action: action, expanded: expanded, isLegacy: legacy, result: result })] }));
 };

package/lib/esm/LogViewer/AdminLogs/AdminLogGrid/AdminLogGrid.js

@@ -101,8 +101,8 @@ export const AdminLogGrid = ({ logs, isLoading, searchProgress }) => {
     background-color: #E3E3E3 !important; 
     color: #000;
   }
-` }), _jsx(DataGrid, { components: {
+` }), _jsx(DataGrid, { autoPageSize: true, columns: columns, components: {
                     Pagination: DataGridPagination,
-                    LoadingOverlay: () => _jsx(LinearProgress, { variant: "determinate", value: searchProgress }),
-                }, columns: columns, rows: logs.map((log, i) => ({ ...log, id: `${i}` })), autoPageSize: true, loading: isLoading, onRowClick: onRowClick, getRowClassName: getRowClassName }), _jsx(LogDialog, { open: !!selectedLogCorrelation, handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, storyResultMetadatas: logs, setSelectedLogCorrelation: setSelectedLogCorrelation })] }));
+                    LoadingOverlay: () => _jsx(LinearProgress, { value: searchProgress, variant: "determinate" }),
+                }, getRowClassName: getRowClassName, loading: isLoading, onRowClick: onRowClick, rows: logs.map((log, i) => ({ ...log, id: `${i}` })) }), _jsx(LogDialog, { handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, open: !!selectedLogCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, storyResultMetadatas: logs })] }));
 };

package/lib/esm/LogViewer/AdminLogs/AdminLogSearchBar/AdminLogSearchBar.js

@@ -29,14 +29,14 @@ export function AdminLogSearchBar({ onSearch }) {
         updateStartAndEndTimeSpan(minutes);
         handleQuickTimeClose();
     };
-    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterDateFns, children: [_jsxs(Grid, { container: true, columns: 12, spacing: 2, children: [_jsx(Grid, { item: true, xs: 3, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { id: "runtime-select-label", children: "Log Level" }), _jsx(Select, { labelId: "runtime-select-label", id: "demo-simple-select", value: logLevel, label: "Log Level", onChange: handleLogLevelOnChange, children: logLevelEnumLookups.map((key) => (_jsx(MenuItem, { value: key, children: key }, key))) })] }) }), _jsx(Grid, { item: true, xs: 3, 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: 3, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { id: "runtime-select-label", children: "Log Level" }), _jsx(Select, { id: "demo-simple-select", label: "Log Level", labelId: "runtime-select-label", onChange: handleLogLevelOnChange, value: logLevel, children: logLevelEnumLookups.map((key) => (_jsx(MenuItem, { value: key, children: key }, key))) })] }) }), _jsx(Grid, { item: true, xs: 3, 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: 3, 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: 3, 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: 3, children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", value: endDate, onChange: handleEndDateChange }) }) }), _jsx(Grid, { item: true, xs: 10, children: _jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { label: "Message", value: msg, onChange: handleMsgOnChange, InputLabelProps: {
+                                    }, children: _jsx(ExpandMoreIcon, {}) })] }) }), _jsx(Grid, { item: true, xs: 3, children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", onChange: handleEndDateChange, value: endDate }) }) }), _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: "Message", onChange: handleMsgOnChange, value: msg }) }) }), _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/AdminLogs/AdminLogs.js

@@ -7,5 +7,5 @@ import { useLogLogSearch } from './hooks';
 export const AdminLogs = () => {
     const { logLogs, searchProgress, onSearch } = useLogLogSearch();
     const isLoading = useIsLoading();
-    return (_jsx(TabViewBox, { header: () => _jsx(AdminLogSearchBar, { onSearch: onSearch }), body: () => _jsx(AdminLogGrid, { logs: logLogs, isLoading: isLoading, searchProgress: searchProgress }) }));
+    return (_jsx(TabViewBox, { body: () => _jsx(AdminLogGrid, { isLoading: isLoading, logs: logLogs, searchProgress: searchProgress }), header: () => _jsx(AdminLogSearchBar, { onSearch: onSearch }) }));
 };

package/lib/esm/LogViewer/Dashboard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { uniqueBy } from 'quidproquo-web';
-import { useRunEvery, useThrottledMemo } from 'quidproquo-web-react';
+import { useEffectCallback, useRunEvery, useThrottledMemo } from 'quidproquo-web-react';
 import { useSubscribeToWebSocketEvent } from 'quidproquo-web-react';
 import { WebSocketQueueQpqAdminServerMessageEventType } from 'quidproquo-webserver';
 import React, { useEffect, useMemo } from 'react';
@@ -24,7 +24,8 @@ export const Dashboard = () => {
     const [realtimeLogs, setRealtimeLogs] = React.useState([]);
     const { onSearch, logs: weeklyLogs } = useLogSearch();
     const isLoading = useIsLoading();
-    useEffect(() => {
+    // Stable identity so the mount-only effect below can list it as a dependency.
+    const runInitialSearch = useEffectCallback(() => {
         const currentDate = new Date();
         const sevenDaysAgo = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
         const isoDateSevenDaysAgo = sevenDaysAgo.toISOString();
@@ -42,7 +43,10 @@ export const Dashboard = () => {
             onlyErrors: true,
         };
         onSearch(searchParams);
-    }, []);
+    });
+    useEffect(() => {
+        runInitialSearch();
+    }, [runInitialSearch]);
     useSubscribeToWebSocketEvent(WebSocketQueueQpqAdminServerMessageEventType.LogMetadata, (webSocketService, message) => {
         // Add the log to the list if its an error
         if (message.payload.log.error) {
@@ -54,7 +58,7 @@ export const Dashboard = () => {
         const uniqueLogs = uniqueBy([...realtimeLogs, ...weeklyLogs], (log) => log.correlation);
         return uniqueLogs.sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime());
     }, [realtimeLogs, weeklyLogs]);
-    const dailyErrorCount = useMemo(() => getLogCountForSinceXDaysAgo(allLogs, hoursPassedToday / 24), [allLogs, getHoursSinceStartOfDay]);
+    const dailyErrorCount = useMemo(() => getLogCountForSinceXDaysAgo(allLogs, hoursPassedToday / 24), [allLogs, hoursPassedToday]);
     const weeklyErrorCount = useMemo(() => getLogCountForSinceXDaysAgo(allLogs, 7), [allLogs]);
-    return (_jsxs(TabViewBox, { children: [_jsxs(Grid, { container: true, spacing: 2, sx: { mb: 2 }, children: [_jsx(Grid, { item: true, xs: 6, children: _jsxs(Paper, { sx: { p: 2, textAlign: 'center' }, children: [_jsx(Typography, { children: "Daily Errors" }), _jsx(Typography, { variant: "h4", children: dailyErrorCount })] }) }), _jsx(Grid, { item: true, xs: 6, children: _jsxs(Paper, { sx: { p: 2, textAlign: 'center' }, children: [_jsx(Typography, { children: "Weekly Errors" }), _jsx(Typography, { variant: "h4", children: weeklyErrorCount })] }) })] }), _jsx(Box, { sx: { flex: 1, overflow: 'auto' }, children: _jsx(LogMetadataGrid, { logs: allLogs, isLoading: isLoading }) })] }));
+    return (_jsxs(TabViewBox, { children: [_jsxs(Grid, { container: true, spacing: 2, sx: { mb: 2 }, children: [_jsx(Grid, { item: true, xs: 6, children: _jsxs(Paper, { sx: { p: 2, textAlign: 'center' }, children: [_jsx(Typography, { children: "Daily Errors" }), _jsx(Typography, { variant: "h4", children: dailyErrorCount })] }) }), _jsx(Grid, { item: true, xs: 6, children: _jsxs(Paper, { sx: { p: 2, textAlign: 'center' }, children: [_jsx(Typography, { children: "Weekly Errors" }), _jsx(Typography, { variant: "h4", children: weeklyErrorCount })] }) })] }), _jsx(Box, { sx: { flex: 1, overflow: 'auto' }, children: _jsx(LogMetadataGrid, { isLoading: isLoading, logs: allLogs }) })] }));
 };

package/lib/esm/LogViewer/EventTimeline.js

@@ -13,7 +13,7 @@ const TimelineEvent = ({ event, level, setSelectedLogCorrelation, scale, parrent
                     height: EVENT_HEIGHT,
                     textAlign: 'right',
                     display: totalTimeOffset ? 'inline-block' : 'none',
-                } }), _jsxs("div", { style: {
+                } }), _jsxs("div", { onClick: () => setSelectedLogCorrelation(event.correlation), style: {
                     whiteSpace: 'nowrap',
                     width: `${eventWidth}px`,
                     height: EVENT_HEIGHT,
@@ -22,12 +22,12 @@ const TimelineEvent = ({ event, level, setSelectedLogCorrelation, scale, parrent
                     padding: 3,
                     borderRadius: 4,
                     display: 'inline-block',
-                }, onClick: () => setSelectedLogCorrelation(event.correlation), children: [event.moduleName, "::", event.generic.split('::').pop(), " - @", parrentTimeOffsetMs, "ms - ", event.executionTimeMs, "ms"] }), event.children.map((child) => {
+                }, children: [event.moduleName, "::", event.generic.split('::').pop(), " - @", parrentTimeOffsetMs, "ms - ", event.executionTimeMs, "ms"] }), event.children.map((child) => {
                 const childDate = new Date(child.startedAt);
                 const eventDate = new Date(event.startedAt);
                 const offsetMs = childDate.getTime() - eventDate.getTime();
                 const totalOffset = totalParrentTimeOffsetMs + offsetMs;
-                return (_jsx(TimelineEvent, { event: child, setSelectedLogCorrelation: setSelectedLogCorrelation, level: level + 1, scale: scale, parrentTimeOffsetMs: offsetMs, totalParrentTimeOffsetMs: totalOffset }, child.correlation));
+                return (_jsx(TimelineEvent, { event: child, level: level + 1, parrentTimeOffsetMs: offsetMs, scale: scale, setSelectedLogCorrelation: setSelectedLogCorrelation, totalParrentTimeOffsetMs: totalOffset }, child.correlation));
             })] }));
 };
 export const EventTimeline = ({ logCorrelation, setSelectedLogCorrelation, isVisible, treeApi }) => {
@@ -70,5 +70,5 @@ export const EventTimeline = ({ logCorrelation, setSelectedLogCorrelation, isVis
     const endDate = new Date(latestFinishedAt);
     const offsetMs = endDate.getTime() - startDate.getTime();
     const scale = 1100 / offsetMs + scaleOffset;
-    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsxs("div", { style: { height: 24 }, children: [_jsx("b", { children: formatDuration(totalExecutionTime) }), _jsx("i", { children: " of compute over " }), _jsx("b", { children: formatDuration(offsetMs) })] }), _jsx("div", { ref: setTimelineRef, onWheel: handleOnWheel, style: { width: '100%', height: 'calc(100% - 24px)' }, children: treeApi.treeDataWithNoQpqActions[0] && (_jsx(TimelineEvent, { event: treeApi.treeDataWithNoQpqActions[0], level: 0, setSelectedLogCorrelation: setSelectedLogCorrelation, scale: scale, parrentTimeOffsetMs: 0, totalParrentTimeOffsetMs: 0 })) })] }));
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsxs("div", { style: { height: 24 }, children: [_jsx("b", { children: formatDuration(totalExecutionTime) }), _jsx("i", { children: " of compute over " }), _jsx("b", { children: formatDuration(offsetMs) })] }), _jsx("div", { ref: setTimelineRef, onWheel: handleOnWheel, style: { width: '100%', height: 'calc(100% - 24px)' }, children: treeApi.treeDataWithNoQpqActions[0] && (_jsx(TimelineEvent, { event: treeApi.treeDataWithNoQpqActions[0], level: 0, parrentTimeOffsetMs: 0, scale: scale, setSelectedLogCorrelation: setSelectedLogCorrelation, totalParrentTimeOffsetMs: 0 })) })] }));
 };

package/lib/esm/LogViewer/HelpChat/HelpChat.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuthAccessToken, useBaseUrlResolvers } from 'quidproquo-web-react';
+import { useAuthAccessToken, useBaseUrlResolvers, useEffectCallback } from 'quidproquo-web-react';
 import { useEffect, useRef, useState } from 'react';
 import Markdown from 'react-markdown';
 import { Android as AndroidIcon, Person as PersonIcon } from '@mui/icons-material';
@@ -13,10 +13,8 @@ export const HelpChat = ({ logCorrelation }) => {
     const chatContainerRef = useRef(null);
     const accessToken = useAuthAccessToken();
     const baseUrlResolvers = useBaseUrlResolvers();
-    useEffect(() => {
-        fetchChatMessages();
-    }, []);
-    const fetchChatMessages = async () => {
+    // Stable identity so the mount-only effect below can list it as a dependency.
+    const fetchChatMessages = useEffectCallback(async () => {
         const listLogChatMessages = {
             correlationId: logCorrelation,
             nextPageKey: nextPageKey,
@@ -29,7 +27,10 @@ export const HelpChat = ({ logCorrelation }) => {
         finally {
             // Do nothing
         }
-    };
+    });
+    useEffect(() => {
+        fetchChatMessages();
+    }, [fetchChatMessages]);
     const handleSendMessage = async () => {
         if (inputMessage.trim() !== '') {
             const newMessage = {
@@ -64,7 +65,7 @@ export const HelpChat = ({ logCorrelation }) => {
             chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
         }
     }, [chatMessages]);
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs(Box, { sx: { flexGrow: 1, overflowY: 'auto', p: 2 }, ref: chatContainerRef, children: [chatMessages.map((message, index) => (_jsx(Box, { sx: {
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs(Box, { ref: chatContainerRef, sx: { flexGrow: 1, overflowY: 'auto', p: 2 }, children: [chatMessages.map((message, index) => (_jsx(Box, { sx: {
                             display: 'flex',
                             alignItems: 'flex-start',
                             mb: 2,
@@ -89,5 +90,5 @@ export const HelpChat = ({ logCorrelation }) => {
                                 backgroundColor: 'grey.300',
                                 color: 'black',
                                 maxWidth: '70%',
-                            }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', mb: 1 }, children: [_jsx(Avatar, { sx: { mr: 1, bgcolor: 'grey.500' }, children: _jsx(AndroidIcon, {}) }), _jsx(Typography, { variant: "subtitle2", children: "AI Assistant" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(CircularProgress, { size: 20, sx: { mr: 1 } }), _jsx(Typography, { variant: "body1", children: "Thinking..." })] })] }) }))] }), _jsx(Box, { sx: { p: 2, borderTop: '1px solid #ccc' }, children: _jsxs(Box, { sx: { display: 'flex' }, children: [_jsx(TextField, { fullWidth: true, variant: "outlined", placeholder: "Type your message...", value: inputMessage, onChange: (e) => setInputMessage(e.target.value), onKeyDown: handleKeyPress, sx: { mr: 2 } }), _jsx(Button, { variant: "contained", onClick: handleSendMessage, children: "Send" })] }) })] }));
+                            }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', mb: 1 }, children: [_jsx(Avatar, { sx: { mr: 1, bgcolor: 'grey.500' }, children: _jsx(AndroidIcon, {}) }), _jsx(Typography, { variant: "subtitle2", children: "AI Assistant" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(CircularProgress, { size: 20, sx: { mr: 1 } }), _jsx(Typography, { variant: "body1", children: "Thinking..." })] })] }) }))] }), _jsx(Box, { sx: { p: 2, borderTop: '1px solid #ccc' }, children: _jsxs(Box, { sx: { display: 'flex' }, children: [_jsx(TextField, { fullWidth: true, onChange: (e) => setInputMessage(e.target.value), onKeyDown: handleKeyPress, placeholder: "Type your message...", sx: { mr: 2 }, value: inputMessage, variant: "outlined" }), _jsx(Button, { onClick: handleSendMessage, variant: "contained", children: "Send" })] }) })] }));
 };

package/lib/esm/LogViewer/LogCorrelationTree.js

@@ -6,30 +6,33 @@ import { Box, CircularProgress } from '@mui/material';
 const BACKGROUND_COLOR = '#c1c1c1';
 // Here we're using `renderCustomNodeElement` to represent each node
 // as an SVG `rect` instead of the default `circle`.
-const renderRectSvgNode = (setSelectedLogCorrelation, highlightCorrelationId) => ({ nodeDatum }) => {
-    // TODO: Workout the nodeDateum type
-    const color = nodeDatum.correlation === highlightCorrelationId
-        ? nodeDatum.error
-            ? '#8B0000'
-            : '#00008B' // Very dark red for selected errors, dark blue for selected non-errors
-        : nodeDatum.error
-            ? 'red'
-            : 'white'; // Bright red for non-selected errors, white for non-selected non-errors
-    // For story runtime types, collapse the runtimeType line away so the generic
-    // info takes its place — other runtime types keep their full label stack.
-    const isStoryRuntimeType = nodeDatum.runtimeType === QpqRuntimeType.EXECUTE_STORY || nodeDatum.runtimeType === QpqRuntimeType.EXECUTE_IMPLEMENTATION_STORY;
-    const displayText = (nodeDatum.generic || '').split('::').pop();
-    const textLines = isStoryRuntimeType
-        ? [nodeDatum.moduleName, displayText, nodeDatum.error || '']
-        : [nodeDatum.moduleName, nodeDatum.runtimeType, displayText, nodeDatum.error || ''];
-    return (_jsxs("g", { children: [_jsx("circle", { r: 10, fill: color, x: "10", y: "10", onClick: () => setSelectedLogCorrelation(nodeDatum.correlation) }), textLines
-                .filter((t) => !!t)
-                .map((text, i) => {
-                const x = 0;
-                const y = i === 0 ? -20 : 10 + i * 20;
-                const fontSize = i === 0 ? 30 : 15;
-                return (_jsxs(Fragment, { children: [_jsx("rect", { x: x - 50, y: y - fontSize / 2 - 8, width: "100", height: fontSize, fill: BACKGROUND_COLOR, strokeWidth: "0" }), _jsx("text", { textAnchor: "middle", fontSize: fontSize, fill: nodeDatum.error ? 'red' : 'black', strokeWidth: 0, y: y, children: text })] }, `${i}`));
-            })] }));
+const renderRectSvgNode = (setSelectedLogCorrelation, highlightCorrelationId) => {
+    const RectSvgNode = ({ nodeDatum }) => {
+        // TODO: Workout the nodeDateum type
+        const color = nodeDatum.correlation === highlightCorrelationId
+            ? nodeDatum.error
+                ? '#8B0000'
+                : '#00008B' // Very dark red for selected errors, dark blue for selected non-errors
+            : nodeDatum.error
+                ? 'red'
+                : 'white'; // Bright red for non-selected errors, white for non-selected non-errors
+        // For story runtime types, collapse the runtimeType line away so the generic
+        // info takes its place — other runtime types keep their full label stack.
+        const isStoryRuntimeType = nodeDatum.runtimeType === QpqRuntimeType.EXECUTE_STORY || nodeDatum.runtimeType === QpqRuntimeType.EXECUTE_IMPLEMENTATION_STORY;
+        const displayText = (nodeDatum.generic || '').split('::').pop();
+        const textLines = isStoryRuntimeType
+            ? [nodeDatum.moduleName, displayText, nodeDatum.error || '']
+            : [nodeDatum.moduleName, nodeDatum.runtimeType, displayText, nodeDatum.error || ''];
+        return (_jsxs("g", { children: [_jsx("circle", { fill: color, onClick: () => setSelectedLogCorrelation(nodeDatum.correlation), r: 10, x: "10", y: "10" }), textLines
+                    .filter((t) => !!t)
+                    .map((text, i) => {
+                    const x = 0;
+                    const y = i === 0 ? -20 : 10 + i * 20;
+                    const fontSize = i === 0 ? 30 : 15;
+                    return (_jsxs(Fragment, { children: [_jsx("rect", { fill: BACKGROUND_COLOR, height: fontSize, strokeWidth: "0", width: "100", x: x - 50, y: y - fontSize / 2 - 8 }), _jsx("text", { fill: nodeDatum.error ? 'red' : 'black', fontSize: fontSize, strokeWidth: 0, textAnchor: "middle", y: y, children: text })] }, `${i}`));
+                })] }));
+    };
+    return RectSvgNode;
 };
 const LogCorrelationTreeComponent = ({ correlationId, highlightCorrelationId, setSelectedLogCorrelation, isVisible, treeApi, }) => {
     const treeContainer = useRef(null);

package/lib/esm/LogViewer/LogCorrelations.js

@@ -9,5 +9,5 @@ export const LogCorrelations = ({ logCorrelation, setSelectedLogCorrelation, isV
             alignItems: 'center',
             justifyContent: 'center',
             height: '100%',
-        }, children: _jsx(LogCorrelationTree, { correlationId: logCorrelation, highlightCorrelationId: logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, isVisible: isVisible, treeApi: treeApi }) }));
+        }, children: _jsx(LogCorrelationTree, { correlationId: logCorrelation, highlightCorrelationId: logCorrelation, isVisible: isVisible, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }) }));
 };

package/lib/esm/LogViewer/LogDetails.js

@@ -34,5 +34,5 @@ export const LogDetails = ({ log, hideFastActions, orderByDuration, }) => {
             return durationB - durationA;
         });
     }
-    return (_jsx(Box, { sx: { width: 1 }, children: _jsx(Table, { sx: { tableLayout: 'fixed' }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { sx: leftTableCell, children: _jsx(ActionHistoryItemTimeStamp, { startedAt: log.startedAt, finishedAt: log.startedAt }) }), _jsx(TableCell, { sx: rightTableCell, children: _jsx(LogSummaryDetails, { log: log }) })] }), history.map((historyItem, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { sx: leftTableCell, children: _jsx(ActionHistoryItemTimeStamp, { startedAt: historyItem.startedAt, finishedAt: historyItem.finishedAt }) }), _jsxs(TableCell, { sx: rightTableCell, children: [historyItem.act && _jsx(AnyActionHistoryItem, { action: historyItem.act, result: historyItem.res }), !historyItem.act && _jsx("div", { children: "No Action" })] })] }, `${index}`))), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: leftTableCell, children: _jsx(ActionHistoryItemTimeStamp, { startedAt: log.finishedAt, finishedAt: log.finishedAt }) }), _jsx(TableCell, { sx: rightTableCell, children: _jsx(LogSummaryReturn, { log: log }) })] }), log?.logs && (_jsx(TableRow, { children: _jsxs(TableCell, { colSpan: 2, style: { width: '100%' }, children: [_jsx("div", { style: { paddingBottom: '10px' }, children: _jsx(Typography, { variant: "h6", component: "span", children: "Caught console.log events" }) }), _jsx(ConsoleLogViewer, { logs: log?.logs })] }) }))] }) }) }));
+    return (_jsx(Box, { sx: { width: 1 }, children: _jsx(Table, { sx: { tableLayout: 'fixed' }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { sx: leftTableCell, children: _jsx(ActionHistoryItemTimeStamp, { finishedAt: log.startedAt, startedAt: log.startedAt }) }), _jsx(TableCell, { sx: rightTableCell, children: _jsx(LogSummaryDetails, { log: log }) })] }), history.map((historyItem, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { sx: leftTableCell, children: _jsx(ActionHistoryItemTimeStamp, { finishedAt: historyItem.finishedAt, startedAt: historyItem.startedAt }) }), _jsxs(TableCell, { sx: rightTableCell, children: [historyItem.act && _jsx(AnyActionHistoryItem, { action: historyItem.act, result: historyItem.res }), !historyItem.act && _jsx("div", { children: "No Action" })] })] }, `${index}`))), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: leftTableCell, children: _jsx(ActionHistoryItemTimeStamp, { finishedAt: log.finishedAt, startedAt: log.finishedAt }) }), _jsx(TableCell, { sx: rightTableCell, children: _jsx(LogSummaryReturn, { log: log }) })] }), log?.logs && (_jsx(TableRow, { children: _jsxs(TableCell, { colSpan: 2, style: { width: '100%' }, children: [_jsx("div", { style: { paddingBottom: '10px' }, children: _jsx(Typography, { component: "span", variant: "h6", children: "Caught console.log events" }) }), _jsx(ConsoleLogViewer, { logs: log?.logs })] }) }))] }) }) }));
 };

package/lib/esm/LogViewer/LogDialog/LogDialog.js

@@ -32,20 +32,20 @@ export const LogDialog = ({ logCorrelation, open, handleClose, setSelectedLogCor
         logDialogStateApi.setSelectedTab(newValue);
     };
     const treeApi = useLogTreeData(logCorrelation, false);
-    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: [_jsxs(DialogTitle, { id: "scroll-dialog-title", children: ["Log Details - ", logCorrelation] }), _jsx(AppBar, { position: "sticky", color: "primary", children: _jsxs(Tabs, { value: logDialogState.selectedTab, onChange: handleTabChange, textColor: "inherit", indicatorColor: "secondary", children: [_jsx(Tab, { label: "Log Details" }), _jsx(Tab, { label: "Tree" }), _jsx(Tab, { label: "Timeline" }), _jsx(Tab, { label: "Notes" }), _jsx(Tab, { label: "Raw JSON" }), _jsx(Tab, { label: "Help" })] }) }), _jsxs(DialogContent, { dividers: true, sx: {
+        }, scroll: 'paper', children: [_jsxs(DialogTitle, { id: "scroll-dialog-title", children: ["Log Details - ", logCorrelation] }), _jsx(AppBar, { color: "primary", position: "sticky", children: _jsxs(Tabs, { indicatorColor: "secondary", onChange: handleTabChange, textColor: "inherit", value: logDialogState.selectedTab, children: [_jsx(Tab, { label: "Log Details" }), _jsx(Tab, { label: "Tree" }), _jsx(Tab, { label: "Timeline" }), _jsx(Tab, { label: "Notes" }), _jsx(Tab, { label: "Raw JSON" }), _jsx(Tab, { label: "Help" })] }) }), _jsxs(DialogContent, { dividers: true, sx: {
                     minHeight: '150px',
                     overflowY: 'scroll',
-                }, children: [asyncLog.isLoading && _jsx(LinearProgress, {}), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 0), children: _jsx(LogDetailsTab, { log: asyncLog, logDialogState: logDialogState, logDialogStateApi: logDialogStateApi }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 1), children: _jsx(TreeTab, { log: asyncLog, isVisible: logDialogState.selectedTab === 1, treeApi: treeApi, setSelectedLogCorrelation: setSelectedLogCorrelation }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 2), children: _jsx(TimelineTab, { log: asyncLog, setSelectedLogCorrelation: setSelectedLogCorrelation, isVisible: logDialogState.selectedTab === 2, treeApi: treeApi }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 3), children: _jsx(NotesTab, { log: asyncLog }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 4), children: _jsx(RawTab, { log: asyncLog }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 5), children: _jsx(HelpTab, { log: asyncLog }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { style: getTabStyle(logDialogState.selectedTab, 1), onClick: (event) => treeApi.refreshTreeData(), disabled: asyncLog.isLoading, children: "Refresh Tree" }), _jsx(Button, { style: getTabStyle(logDialogState.selectedTab, 2), onClick: (event) => treeApi.refreshTreeData(), disabled: asyncLog.isLoading, children: "Refresh Timeline" }), _jsx(Button, { onClick: (event) => {
+                }, children: [asyncLog.isLoading && _jsx(LinearProgress, {}), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 0), children: _jsx(LogDetailsTab, { log: asyncLog, logDialogState: logDialogState, logDialogStateApi: logDialogStateApi }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 1), children: _jsx(TreeTab, { isVisible: logDialogState.selectedTab === 1, log: asyncLog, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 2), children: _jsx(TimelineTab, { isVisible: logDialogState.selectedTab === 2, log: asyncLog, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 3), children: _jsx(NotesTab, { log: asyncLog }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 4), children: _jsx(RawTab, { log: asyncLog }) }), _jsx("div", { style: getTabStyle(logDialogState.selectedTab, 5), children: _jsx(HelpTab, { log: asyncLog }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { disabled: asyncLog.isLoading, onClick: (event) => treeApi.refreshTreeData(), style: getTabStyle(logDialogState.selectedTab, 1), children: "Refresh Tree" }), _jsx(Button, { disabled: asyncLog.isLoading, onClick: (event) => treeApi.refreshTreeData(), style: getTabStyle(logDialogState.selectedTab, 2), children: "Refresh Timeline" }), _jsx(Button, { disabled: asyncLog.isLoading, onClick: (event) => {
                             if (asyncLog.log) {
                                 downloadJson(JSON.stringify(asyncLog.log, null, 2), `${asyncLog.log.correlation}.json`);
                             }
                             event.stopPropagation();
-                        }, disabled: asyncLog.isLoading, children: "Download" }), asyncLog.log && (_jsx(Button, { onClick: handleExecute, disabled: asyncLog.isLoading, children: "Execute" })), _jsx(Button, { onClick: handleClose, children: "Close" })] })] }));
+                        }, children: "Download" }), asyncLog.log && (_jsx(Button, { disabled: asyncLog.isLoading, onClick: handleExecute, children: "Execute" })), _jsx(Button, { onClick: handleClose, children: "Close" })] })] }));
 };

package/lib/esm/LogViewer/LogDialog/MovedToColdStorage/MovedToColdStorage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Paper, Typography } from '@mui/material';
 export const MovedToColdStorage = ({ guid }) => {
-    return (_jsxs(Paper, { elevation: 3, sx: { padding: 2, borderRadius: 2 }, children: [_jsxs(Typography, { variant: "body1", color: "textSecondary", children: ["The log you are requesting has been moved to ", _jsx("b", { children: "cold storage" }), ". Please provide the following Correlation to an administrator if you would like it to be moved back to standard storage."] }), _jsx(Box, { mt: 1, children: _jsx(Typography, { variant: "subtitle1", color: "primary", fontWeight: "bold", children: guid }) })] }));
+    return (_jsxs(Paper, { elevation: 3, sx: { padding: 2, borderRadius: 2 }, children: [_jsxs(Typography, { color: "textSecondary", variant: "body1", children: ["The log you are requesting has been moved to ", _jsx("b", { children: "cold storage" }), ". Please provide the following Correlation to an administrator if you would like it to be moved back to standard storage."] }), _jsx(Box, { mt: 1, children: _jsx(Typography, { color: "primary", fontWeight: "bold", variant: "subtitle1", children: guid }) })] }));
 };

package/lib/esm/LogViewer/LogDialog/tabs/LogDetailsTab/LogDetailsTab.js

@@ -12,5 +12,5 @@ export const LogDetailsTab = ({ log, logDialogState: { hideFastActions, orderByD
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'row-reverse',
-        }, children: [_jsxs("div", { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: hideFastActions, onChange: (event) => setHideFastActions(event.target.checked) }), label: "Hide Fast Actions" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: orderByDuration, onChange: (event) => setOrderByDuration(event.target.checked) }), label: "Order by Duration" })] }), _jsx(LogDetails, { log: log.log, hideFastActions: hideFastActions, orderByDuration: orderByDuration })] }));
+        }, children: [_jsxs("div", { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: hideFastActions, onChange: (event) => setHideFastActions(event.target.checked) }), label: "Hide Fast Actions" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: orderByDuration, onChange: (event) => setOrderByDuration(event.target.checked) }), label: "Order by Duration" })] }), _jsx(LogDetails, { hideFastActions: hideFastActions, log: log.log, orderByDuration: orderByDuration })] }));
 };

package/lib/esm/LogViewer/LogDialog/tabs/TimelineTab/TimelineTab.js

@@ -4,5 +4,5 @@ export const TimelineTab = ({ log, isVisible, setSelectedLogCorrelation, treeApi
     if (log.isLoading) {
         return _jsx("div", { children: "Loading..." });
     }
-    return (_jsx(EventTimeline, { logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, isVisible: isVisible, treeApi: treeApi }));
+    return (_jsx(EventTimeline, { isVisible: isVisible, logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }));
 };

package/lib/esm/LogViewer/LogDialog/tabs/TreeTab/TreeTab.js

@@ -4,5 +4,5 @@ export const TreeTab = ({ log, isVisible, setSelectedLogCorrelation, treeApi, })
     if (log.isLoading) {
         return _jsx("div", { children: "Loading..." });
     }
-    return (_jsx(LogCorrelations, { logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, isVisible: isVisible, treeApi: treeApi }));
+    return (_jsx(LogCorrelations, { isVisible: isVisible, logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }));
 };

package/lib/esm/LogViewer/LogMetadataGrid.js

@@ -49,8 +49,8 @@ export const LogMetadataGrid = ({ logs, isLoading }) => {
           .greenRow {
             background-color: #eaffea;
           }
-        ` }), _jsx(DataGrid, { components: {
+        ` }), _jsx(DataGrid, { autoPageSize: true, columns: columns, components: {
                     Pagination: DataGridPagination,
-                    LoadingOverlay: () => _jsx(LinearProgress, { variant: "determinate", value: searchProgress }),
-                }, columns: columns, rows: logs.map((log) => ({ ...log, id: log.correlation })), autoPageSize: true, loading: isLoading, onRowClick: onRowClick, getRowClassName: getRowClassName }), _jsx(LogDialog, { open: !!selectedLogCorrelation, handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, storyResultMetadatas: logs, setSelectedLogCorrelation: setSelectedLogCorrelation })] }));
+                    LoadingOverlay: () => _jsx(LinearProgress, { value: searchProgress, variant: "determinate" }),
+                }, getRowClassName: getRowClassName, loading: isLoading, onRowClick: onRowClick, rows: logs.map((log) => ({ ...log, id: log.correlation })) }), _jsx(LogDialog, { handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, open: !!selectedLogCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, storyResultMetadatas: logs })] }));
 };

package/lib/esm/LogViewer/LogRawJson.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 export const LogRawJson = ({ log }) => {
-    return (_jsxs(Box, { sx: { width: 1, p: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Raw JSON" }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: JSON.stringify(log, null, 2) })] }));
+    return (_jsxs(Box, { sx: { width: 1, p: 2 }, children: [_jsx(Typography, { gutterBottom: true, variant: "h6", children: "Raw JSON" }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: JSON.stringify(log, null, 2) })] }));
 };

package/lib/esm/LogViewer/LogSearch.js

@@ -7,5 +7,5 @@ import { TopSection } from './TopSection';
 export const LogSearch = () => {
     const { onSearch, logs } = useLogSearch();
     const isLoading = useIsLoading();
-    return _jsx(TabViewBox, { header: () => _jsx(TopSection, { onSearch: onSearch }), body: () => _jsx(LogMetadataGrid, { logs: logs, isLoading: isLoading }) });
+    return _jsx(TabViewBox, { body: () => _jsx(LogMetadataGrid, { isLoading: isLoading, logs: logs }), header: () => _jsx(TopSection, { onSearch: onSearch }) });
 };

package/lib/esm/LogViewer/LogSummary.js

@@ -33,6 +33,6 @@ export const LogSummary = ({ log }) => {
             },
         };
         sendMessage(refreshEvent);
-    }, [log.correlation]);
-    return (_jsxs(Box, { sx: { width: 1, p: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Log Summary" }), _jsxs(Typography, { children: ["Correlation ID: ", log.correlation] }), _jsx(FormControlLabel, { control: checkedLoading ? _jsx(CircularProgress, { size: 24 }) : _jsx(Checkbox, { checked: !!logMetadata?.checked, onChange: handleCheckboxChange }), label: "Mark as done" })] }));
+    }, [log.correlation, sendMessage]);
+    return (_jsxs(Box, { sx: { width: 1, p: 2 }, children: [_jsx(Typography, { gutterBottom: true, variant: "h6", children: "Log Summary" }), _jsxs(Typography, { children: ["Correlation ID: ", log.correlation] }), _jsx(FormControlLabel, { control: checkedLoading ? _jsx(CircularProgress, { size: 24 }) : _jsx(Checkbox, { checked: !!logMetadata?.checked, onChange: handleCheckboxChange }), label: "Mark as done" })] }));
 };

package/lib/esm/LogViewer/LogSummaryDetails.js

@@ -9,6 +9,8 @@ const runtimeTypeToCamelCase = (runtimeType) => runtimeType.toLowerCase().replac
 export const LogSummaryDetails = ({ log }) => {
     const [expanded, setExpanded] = useState(false);
     const totalRuntime = new Date(log.finishedAt).getTime() - new Date(log.startedAt).getTime();
-    const functionKey = log.qpqFunctionRuntimeInfo ? getUniqueKeyFromQpqFunctionRuntime(log.qpqFunctionRuntimeInfo) : runtimeTypeToCamelCase(log.runtimeType);
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsxs(Typography, { variant: "h5", gutterBottom: true, children: [log.runtimeType, " - ", log.moduleName] }), _jsx(Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: _jsx(IconButton, { size: "small", onClick: () => setExpanded(!expanded), children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) })] }), _jsx("div", { children: _jsxs("pre", { style: genericFunctionRendererStyles.pre, children: [_jsxs("div", { style: genericFunctionRendererStyles.commentBlock, children: [_jsx("div", { children: "// //////////////////////////////////////////////////////" }), _jsxs("div", { children: ["// src: ", functionKey] }), log.fromCorrelation && _jsxs("div", { children: ["// Caller: ", log.fromCorrelation] }), _jsxs("div", { children: ["// Total Runtime: ", _jsxs("span", { style: genericFunctionRendererStyles.highlightComment, children: [totalRuntime, " ms"] })] }), _jsx("div", { children: "// //////////////////////////////////////////////////////" })] }), _jsx(GenericFunctionRenderer, { functionName: functionKey.split('::').pop() || 'unknown', args: log.input, expanded: expanded })] }) })] }));
+    const functionKey = log.qpqFunctionRuntimeInfo
+        ? getUniqueKeyFromQpqFunctionRuntime(log.qpqFunctionRuntimeInfo)
+        : runtimeTypeToCamelCase(log.runtimeType);
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { alignItems: "center", display: "flex", children: [_jsxs(Typography, { gutterBottom: true, variant: "h5", children: [log.runtimeType, " - ", log.moduleName] }), _jsx(Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: _jsx(IconButton, { onClick: () => setExpanded(!expanded), size: "small", children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) })] }), _jsx("div", { children: _jsxs("pre", { style: genericFunctionRendererStyles.pre, children: [_jsxs("div", { style: genericFunctionRendererStyles.commentBlock, children: [_jsx("div", { children: '// //////////////////////////////////////////////////////' }), _jsxs("div", { children: ['// src: ', functionKey] }), log.fromCorrelation && (_jsxs("div", { children: ['// Caller: ', log.fromCorrelation] })), _jsxs("div", { children: ['// Total Runtime: ', _jsxs("span", { style: genericFunctionRendererStyles.highlightComment, children: [totalRuntime, " ms"] })] }), _jsx("div", { children: '// //////////////////////////////////////////////////////' })] }), _jsx(GenericFunctionRenderer, { args: log.input, expanded: expanded, functionName: functionKey.split('::').pop() || 'unknown' })] }) })] }));
 };

package/lib/esm/LogViewer/LogSummaryReturn.js

@@ -6,5 +6,5 @@ import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { AnyVariableView, genericFunctionRendererStyles } from './actionComponents';
 export const LogSummaryReturn = ({ log }) => {
     const [expanded, setExpanded] = useState(false);
-    return (_jsxs("div", { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: log.error ? 'Thrown Error' : 'Returned' }), _jsx(Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: _jsx(IconButton, { size: "small", onClick: () => setExpanded(!expanded), children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) })] }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: _jsx("pre", { style: genericFunctionRendererStyles.pre, children: log.error ? _jsx(AnyVariableView, { value: log.error, expanded: expanded }) : _jsx(AnyVariableView, { value: log.result, expanded: expanded }) }) })] }));
+    return (_jsxs("div", { children: [_jsxs(Box, { alignItems: "center", display: "flex", children: [_jsx(Typography, { gutterBottom: true, variant: "h6", children: log.error ? 'Thrown Error' : 'Returned' }), _jsx(Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: _jsx(IconButton, { onClick: () => setExpanded(!expanded), size: "small", children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) })] }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: _jsx("pre", { style: genericFunctionRendererStyles.pre, children: log.error ? _jsx(AnyVariableView, { expanded: expanded, value: log.error }) : _jsx(AnyVariableView, { expanded: expanded, value: log.result }) }) })] }));
 };