fix(help-panel): use safe module loading #213
Conversation
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings. WalkthroughHelpPanelContent now accepts only Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HelpPanelContent
participant RemoteLoader as useLoadModule / useRemoteHook
participant Module as ModelsModule
participant VAHook as useVirtualAssistant
User->>HelpPanelContent: Click "Ask Red Hat"
HelpPanelContent->>RemoteLoader: ensure Models module & VA hook loaded
alt modules not loaded or error
RemoteLoader-->>HelpPanelContent: loading / error
HelpPanelContent-->>User: disable action / no-op
else modules loaded
RemoteLoader-->>Module: provide Models (includes ASK_RED_HAT)
RemoteLoader-->>VAHook: provide setVirtualAssistantState
HelpPanelContent->>VAHook: setVirtualAssistantState({ currentModel: Module.ASK_RED_HAT, open: true })
HelpPanelContent->>User: assistant opened / drawer toggled
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (1)
src/components/HelpPanel/HelpPanelContent.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Red Hat Konflux / learning-resources-on-pull-request
🔇 Additional comments (3)
src/components/HelpPanel/HelpPanelContent.tsx (3)
21-21: LGTM!Simplifying the prop contract and moving the module loading responsibility into the component aligns with the PR objective to ensure the help panel's rendering is not blocked by module loading.
26-32: Consider handling potential errors from remote hook loading.The
useRemoteHookcall handles loading state, but if the remote module fails to load (network error, module not found), there's no explicit error handling. Verify thatuseRemoteHookgracefully handles failures and that the component degrades appropriately.
45-45: LGTM!Defensive destructuring with fallback to empty array correctly handles the case where
hookResultis undefined during loading.
karelhala
force-pushed
the
module-loading-fix
branch
from
8ae09c1 to
86ebf39
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/HelpPanel/HelpPanelContent.tsx (1)
80-80: Fix typo in comment."asynchroonous" should be "asynchronous".
🔎 Apply this diff:
- // FIX: temporary solution to have asynchroonous release of insights chrome and learning resources + // FIX: temporary solution to have asynchronous release of insights chrome and learning resources
🧹 Nitpick comments (2)
src/components/HelpPanel/HelpPanelContent.tsx (2)
30-49: Module loading approach is functional.The component loads both the hook and the Models from the same remote module using separate
useRemoteHookanduseLoadModulecalls. While this works, both hooks provide aloadingstate, but only the one fromuseRemoteHook(line 30) is destructured and used. TheuseLoadModulehook on line 38 also returns a loading state as the second element of its tuple, which could be useful for additional safety checks.Consider destructuring the loading state from
useLoadModuleas well if you want to ensure both the hook and Models are fully loaded before enabling the "Ask Red Hat" button.🔎 Optional enhancement:
- const [module] = useLoadModule( + const [module, moduleLoading] = useLoadModule( { scope: 'virtualAssistant', module: './state/globalState', importName: 'Models', }, {} );Then update the guard condition:
- if (!loading && module && setVirtualAssistantState) { + if (!loading && !moduleLoading && module && setVirtualAssistantState) {
78-91: Redundant check and type safety concern.Line 81 checks
moduleagain, which is redundant since it's already verified on line 78. Additionally, the type assertionsas ModelsTypeon lines 82 and 84 bypass TypeScript's type checking. Ifmodule.Modelsis undefined (when the empty object fallback is used), the cast doesn't prevent runtime issues—Models.ASK_RED_HATwill be undefined and passed ascurrentModel.Based on past discussions, you've indicated that passing
undefinedto the virtual assistant is intentional error-handling behavior. However, for clarity and safety, consider:
- Removing the redundant
modulecheck on line 81- Adding an explicit runtime check for
Models.ASK_RED_HATexistence before callingsetVirtualAssistantState🔎 Suggested improvements:
onClick={() => { if (!loading && module && setVirtualAssistantState) { let Models: ModelsType; // FIX: temporary solution to have asynchronous release of insights chrome and learning resources - if (module && !module.ASK_RED_HAT) { + if (!module.ASK_RED_HAT) { Models = module.Models as ModelsType; } else { Models = module as ModelsType; } + // Only set state if we successfully resolved a valid model + if (Models?.ASK_RED_HAT) { setVirtualAssistantState({ isOpen: true, currentModel: Models.ASK_RED_HAT, }); + } } }}If the undefined behavior is truly intentional for your error handling, you can skip the additional check but still remove the redundant
modulecondition on line 81.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (1)
src/components/HelpPanel/HelpPanelContent.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Red Hat Konflux / learning-resources-on-pull-request
- GitHub Check: install
🔇 Additional comments (2)
src/components/HelpPanel/HelpPanelContent.tsx (2)
25-25: Good API simplification.Removing the
ModelsandsetVirtualAssistantStateprops and handling module loading internally improves encapsulation and aligns with the PR objectives.
126-126: Export consolidation improves simplicity.Directly exporting
HelpPanelContentinstead of a wrapper component reduces indirection and makes the code easier to maintain.
tahmidefaz
left a comment
tahmidefaz
left a comment
There was a problem hiding this comment.
I think this looks good! One thing I wanted to point out is that, previously we showed "Loading..." during initialization, but now there's seems to be no indication. In the future, we can probably consider disabling the button or show some sort of loading state when loading == true.
justinorringer
left a comment
justinorringer
left a comment
There was a problem hiding this comment.
Looking good! we should be able to add one more check on the module loading
| importName: 'useVirtualAssistant', | ||
| }); | ||
|
|
||
| const [module] = useLoadModule( |
There was a problem hiding this comment.
There should also be an error prop here we can read and log :)
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/HelpPanel/HelpPanelContent.tsx (1)
57-69: Addrel="noopener noreferrer"fortarget="_blank"
The status-page link opens a new tab withoutrel, which is a reverse-tabnabbing risk.Proposed fix
href="https://status.redhat.com/" target="_blank" + rel="noopener noreferrer" isInline
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (1)
src/components/HelpPanel/HelpPanelContent.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Red Hat Konflux / learning-resources-on-pull-request
🔇 Additional comments (1)
src/components/HelpPanel/HelpPanelContent.tsx (1)
25-25: Public API change verified: wrapper removal and default export update are completeNo remaining references to
HelpPanelContentWrapperexist in the codebase. TheHelpPanelContentcomponent is properly exported as default, and all imports are correctly updated (test imports via the barrel export atsrc/components/HelpPanel/index.ts).
| const { hookResult, loading } = useRemoteHook< | ||
| [unknown, Dispatch<SetStateAction<VirtualAssistantState>>] | ||
| >({ | ||
| scope: 'virtualAssistant', | ||
| module: './state/globalState', | ||
| importName: 'useVirtualAssistant', | ||
| }); | ||
|
|
||
| const [module, error] = useLoadModule( | ||
| { | ||
| scope: 'virtualAssistant', | ||
| module: './state/globalState', | ||
| importName: 'Models', | ||
| }, | ||
| {} | ||
| ); | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check the actual file content to understand the context
cat -n src/components/HelpPanel/HelpPanelContent.tsx | head -150Repository: RedHatInsights/learning-resources
Length of output: 4960
🏁 Script executed:
# Check package.json for @scalprum/react-core version
cat package.json | grep -A2 -B2 "@scalprum/react-core"Repository: RedHatInsights/learning-resources
Length of output: 300
🌐 Web query:
@scalprum/react-core 0.11.1 useRemoteHook useLoadModule return value types
💡 Result:
Short answer:
- useLoadModule returns a tuple: [moduleExports, error]. moduleExports is an object of the module's named exports (including a possible default export). Example shape: [{ default: Component, someExport: Function, ... }, Error | undefined].
- useModule (and the hook-style remote loader) returns the moduleExports object directly (you can destructure { default, namedExport } = useModule(...)).
Source: @scalprum/react-core README (package docs). [1]
Reference:
[1] @scalprum/react-core README / hook examples.
🌐 Web query:
@scalprum/react-core useRemoteHook return value type signature
💡 Result:
I can't find a public symbol named useRemoteHook in @scalprum/react-core. Do you have a link or snippet (GitHub/README/file) where you saw useRemoteHook used? If you share that I’ll fetch the exact TypeScript return-type signature.
🏁 Script executed:
# Check if package-lock.json or similar has @scalprum/react-core details
find . -name "package-lock.json" -o -name "yarn.lock" -o -name "pnpm-lock.yaml" | head -5Repository: RedHatInsights/learning-resources
Length of output: 96
🏁 Script executed:
# Check if there are other usages of useRemoteHook in the codebase that might show the return shape
rg "useRemoteHook" -A 3 -B 1 --type tsx --type tsRepository: RedHatInsights/learning-resources
Length of output: 104
🏁 Script executed:
# Search for useRemoteHook definition in the codebase
rg "useRemoteHook" -A 5 -B 2Repository: RedHatInsights/learning-resources
Length of output: 1382
🏁 Script executed:
# Check if useRemoteHook is defined/exported elsewhere in the project
rg "export.*useRemoteHook"Repository: RedHatInsights/learning-resources
Length of output: 59
🏁 Script executed:
# Extract @scalprum/react-core from package-lock.json to see actual package exports
jq '.packages["node_modules/@scalprum/react-core"] // .dependencies["@scalprum/react-core"]' package-lock.json 2>/dev/null | head -100Repository: RedHatInsights/learning-resources
Length of output: 588
🏁 Script executed:
# Try to see what's exported from @scalprum/react-core by checking common index files
rg "@scalprum/react-core" --type js --type jsonRepository: RedHatInsights/learning-resources
Length of output: 815
🏁 Script executed:
# Look for useRemoteHook in the @scalprum packages (might be in @scalprum/core)
rg "useRemoteHook" node_modules/@scalprum/ --type ts --type js 2>/dev/null | head -20Repository: RedHatInsights/learning-resources
Length of output: 59
🏁 Script executed:
# Check @scalprum/core for useRemoteHook since @scalprum/react-core depends on it
find node_modules/@scalprum -name "*.d.ts" -o -name "index.js" -o -name "index.ts" | xargs grep -l "useRemoteHook" 2>/dev/nullRepository: RedHatInsights/learning-resources
Length of output: 136
🌐 Web query:
@scalprum/react-core 0.11.1 API documentation useRemoteHook
💡 Result:
I can't find any public API docs or references for a hook named useRemoteHook in @scalprum/react-core v0.11.1. Do you want me to:
- search the package source (GitHub / tarball) for that hook (I can fetch and show the exact signature and examples), or
- check similar hooks in the package (useModule, useLoadModule) and summarize those?
🌐 Web query:
@scalprum/core 0.9.0 useRemoteHook
💡 Result:
Do you mean the React hook (useRemote / useRemoteHook) in @scalprum/react-core or a hook exported by @scalprum/core v0.9.0? I can't find documentation for a useRemoteHook in @scalprum/core v0.9.0—please confirm which package/version or paste the code/docs you have and I’ll look it up.
🏁 Script executed:
# Check tsconfig or other config files for path aliases
find . -name "tsconfig.json" -o -name "tsconfig.*.json" | xargs cat 2>/dev/null | grep -A 20 "paths"Repository: RedHatInsights/learning-resources
Length of output: 59
🏁 Script executed:
# Check if there's a custom index.ts or barrel export in the src directory
find src -name "index.ts" -o -name "index.tsx" | head -10Repository: RedHatInsights/learning-resources
Length of output: 110
🏁 Script executed:
# Look for any .d.ts files that might provide type hints about useRemoteHook
find . -name "*.d.ts" -type f ! -path "./node_modules/*" | head -20Repository: RedHatInsights/learning-resources
Length of output: 114
🏁 Script executed:
# Check if @scalprum/react-core appears in any local type definitions or augmentations
rg "@scalprum/react-core" --type ts -A 5 | grep -i "useremote\|hook"Repository: RedHatInsights/learning-resources
Length of output: 191
🌐 Web query:
site:github.com @scalprum/react-core useRemoteHook
💡 Result:
I couldn't find any references to a symbol named useRemoteHook in the @scalprum/react-core code on GitHub. The @scalprum/react-core package exposes React bindings and hooks such as useScalprum and useModule (and related APIs) for loading remote modules instead. [1][2]
Sources:
- @scalprum/react-core package README (Skypack). [1]
- @scalprum packages documentation / overview (Libraries.io). [2]
🏁 Script executed:
# Check the globals.d.ts and src/types/index.d.ts for any custom type definitions
cat ./globals.d.tsRepository: RedHatInsights/learning-resources
Length of output: 154
🏁 Script executed:
cat ./src/types/index.d.tsRepository: RedHatInsights/learning-resources
Length of output: 241
🏁 Script executed:
# Check if there's any build output or generated types that might define useRemoteHook
find . -name "*.d.ts" ! -path "./node_modules/*" -exec grep -l "useRemoteHook" {} \;Repository: RedHatInsights/learning-resources
Length of output: 59
🏁 Script executed:
# Check if the code actually compiles/builds without errors
# Look for build logs or check if this is a type-only import
rg "useRemoteHook" --type jsonRepository: RedHatInsights/learning-resources
Length of output: 59
🌐 Web query:
@scalprum/react-core GitHub repository source code index.ts exports useRemoteHook
💡 Result:
Short answer: No — the public exports for @scalprum/react-core do not include a useRemoteHook. The package README / registry listings show exports like ScalprumComponent, scalprumContext, useScalprum, useModule and related bindings, but not a useRemoteHook. [1][2]
Sources:
- @scalprum/react-core package README / Skypack listing. [1]
- Package summary / analysis (socket.dev / libraries listing) showing package API description. [2]
🏁 Script executed:
# Check if there's a build or type error for this file
# Look for any CI/build configuration that might show errors
find . -name ".eslintignore" -o -name "tsconfig.json" | head -5Repository: RedHatInsights/learning-resources
Length of output: 132
🏁 Script executed:
# Search for "RemoteHook" anywhere in the codebase (might be named differently)
rg "RemoteHook" --type ts --type tsxRepository: RedHatInsights/learning-resources
Length of output: 104
🏁 Script executed:
# Check if useRemoteHook might be defined in a local type stub
rg "declare.*useRemoteHook\|export.*useRemoteHook" --type ts --type tsx --type dRepository: RedHatInsights/learning-resources
Length of output: 104
🏁 Script executed:
# Look for any recent commits or changes that might have introduced this
git log --oneline --all -n 50 -- src/components/HelpPanel/HelpPanelContent.tsx 2>/dev/null || echo "Git history unavailable"Repository: RedHatInsights/learning-resources
Length of output: 585
🌐 Web query:
@scalprum/react-core GitHub NPM package actual exports list 0.11.1
💡 Result:
Exports in @scalprum/react-core v0.11.1 (named exports):
- ScalprumComponent
- scalprumContext
- useScalprum
- useModule
- useLoadModule
Sources: [1] Skypack package page for @scalprum/react-core. [2] socket.dev/npm package summary for @scalprum/react-core.
🏁 Script executed:
# Let me check the actual commit that introduced this
git show 1f276d1 --stat 2>/dev/null | head -50Repository: RedHatInsights/learning-resources
Length of output: 3027
🏁 Script executed:
# Check if useRemoteHook might be a renamed version of useScalprum or useModule
git show 1f276d1 2>/dev/null | head -200Repository: RedHatInsights/learning-resources
Length of output: 5305
🏁 Script executed:
# Let's verify: search for any file that might have useRemoteHook defined locally
rg "useRemoteHook\|useScalprum\|useModule" --glob="!node_modules" -lRepository: RedHatInsights/learning-resources
Length of output: 59
🌐 Web query:
@scalprum/react-core GitHub scalprum-loader useRemoteHook
💡 Result:
Do you want (a) the source/docs link for useRemoteHook, (b) a short example of how to use it, or (c) help debugging a problem you have with useRemoteHook?
🏁 Script executed:
# Let me check the actual HelpPanelContent.tsx one more time to see what's imported
head -20 src/components/HelpPanel/HelpPanelContent.tsxRepository: RedHatInsights/learning-resources
Length of output: 654
🌐 Web query:
scalprum-loader useRemoteHook hook
💡 Result:
There isn’t an official documented "useRemoteHook" in the core Scalprum packages, but the common pattern is to load a remote module (container) with Scalprum/@scalprum/react-core (or a dynamic remote loader) and then lazy-import a hook from that module and call it. Example pattern:
- load the remote container (useLoadModule or ensure container script is injected)
- import the hook from the remote module URL or from the federated module
- call the loaded hook like a normal hook
Minimal example (TypeScript/React):
import { useEffect, useState } from 'react';
import { useLoadModule } from '@scalprum/react-core';
export function useRemoteHook<T extends (...args:any[])=>any>(
appName: string,
modulePath: string, // e.g. './hooks/useUser'
hookExport = 'default'
) {
const { loaded } = useLoadModule(appName, appName); // ensure container loaded
const [remoteHook, setRemoteHook] = useState<T | null>(null);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
if (!loaded) return;
let mounted = true;
(async () => {
try {
// import through federated module exposed by Scalprum
// adjust to your module resolution (scoped federated import vs remote URL)
const mod = await window[appName]?.get?.(modulePath)?.then(factory => factory());
const hook = mod?.[hookExport] ?? mod?.default;
if (!mounted) return;
if (typeof hook !== 'function') throw new Error('Remote export is not a hook');
setRemoteHook(hook as T);
} catch (e) {
if (!mounted) return;
setError(e instanceof Error ? e : new Error(String(e)));
}
})();
return () => { mounted = false; };
}, [loaded, appName, modulePath, hookExport]);
return { hook: remoteHook, error, loading: !remoteHook && !error };
}
Usage:
const { hook: useRemoteUser, loading } = useRemoteHook<typeof useUser>('remoteApp','./hooks/useUser');
const userData = useRemoteUser ? useRemoteUser(userId) : { user:null, loading: true };
References:
- Scalprum React hooks / useModule / useLoadModule overview. [1]
- Example pattern for runtime remote hook loader (generic remote-hook loader snippet). [2]
References:
[1] @scalprum/react-core documentation (useModule / useLoadModule details). (skypack.dev)
[2] Example remote-hook loader pattern (type-safe remote hook loader). (stevekinney.com)
If you want, tell me how your remote module is exposed (federation container name or direct URL) and I’ll give a tailored implementation.
Citations:
- 1: https://www.skypack.dev/view/%40scalprum/react-core?utm_source=openai
- 2: https://stevekinney.com/courses/react-typescript/module-federation-typescript?utm_source=openai
🌐 Web query:
@scalprum/react-core useScalprum alternative to useRemoteHook
💡 Result:
Short answer: don't use useRemoteHook — use useModule or useLoadModule (or ScalprumComponent) from @scalprum/react-core; useScalprum is for accessing the provider/api (context) rather than loading remote modules. [1][2]
References
- @scalprum/react-core README (useModule, useLoadModule, ScalprumComponent, useScalprum). [1]
- @scalprum/core / package docs (Scalprum provider/useScalprum usage). [2]
🏁 Script executed:
# One final check: look for any type declaration or mock of useRemoteHook that I might have missed
rg "useRemoteHook" -C 5Repository: RedHatInsights/learning-resources
Length of output: 2026
🏁 Script executed:
# Check if this file even compiles - look for build errors or type check results
ls -la | grep -E "dist|build|\.next"Repository: RedHatInsights/learning-resources
Length of output: 208
useRemoteHook does not exist in @scalprum/react-core@0.11.1
The code imports useRemoteHook from @scalprum/react-core, but this hook is not exported by that package at v0.11.1. The official exports are: useLoadModule, useModule, ScalprumComponent, useScalprum, and scalprumContext. This import will fail at runtime.
Either implement a custom useRemoteHook wrapper locally (e.g., composing useLoadModule with dynamic hook invocation), or replace the usage with the actual Scalprum API. Check the virtualAssistant scope configuration to determine the correct loading pattern.
| {askRH ? ( | ||
| <Button | ||
| variant="link" | ||
| isDisabled={!!error || loading} | ||
| component="button" | ||
| onClick={() => { | ||
| setVirtualAssistantState?.({ | ||
| isOpen: true, | ||
| currentModel: Models?.ASK_RED_HAT, | ||
| }); | ||
| if (!loading && module && setVirtualAssistantState) { | ||
| let Models: ModelsType; | ||
| // FIX: temporary solution to have asynchroonous release of insights chrome and learning resources | ||
| if (module && !module.ASK_RED_HAT) { | ||
| Models = module.Models as ModelsType; | ||
| } else { | ||
| Models = module as ModelsType; | ||
| } | ||
|
|
||
| setVirtualAssistantState({ | ||
| isOpen: true, | ||
| currentModel: Models.ASK_RED_HAT, | ||
| }); | ||
| } | ||
| }} |
There was a problem hiding this comment.
Make model resolution total (avoid “module present but unusable” runtime paths)
module && !module.ASK_RED_HAT → module.Models assumes a legacy shape that may still be missing or malformed; in that case Models.ASK_RED_HAT can throw or become undefined. Prefer a small type-guard resolver and disable (or noop with telemetry/log) when resolution fails.
Concrete fix (safe resolver + use it for disable/click)
+ const resolveModels = (m: any): ModelsType | undefined => {
+ if (m && typeof m === 'object') {
+ if ('ASK_RED_HAT' in m && typeof m.ASK_RED_HAT === 'string') return m as ModelsType;
+ if ('Models' in m && m.Models && typeof m.Models === 'object') {
+ const mm = m.Models as any;
+ if ('ASK_RED_HAT' in mm && typeof mm.ASK_RED_HAT === 'string') return mm as ModelsType;
+ }
+ }
+ return undefined;
+ };
+
+ const models = resolveModels(module);
...
variant="link"
- isDisabled={!!error || loading}
+ isDisabled={!!error || loading || !models || !setVirtualAssistantState}
component="button"
onClick={() => {
- if (!loading && module && setVirtualAssistantState) {
- let Models: ModelsType;
- // FIX: temporary solution to have asynchroonous release of insights chrome and learning resources
- if (module && !module.ASK_RED_HAT) {
- Models = module.Models as ModelsType;
- } else {
- Models = module as ModelsType;
- }
-
+ if (!loading && models && setVirtualAssistantState) {
setVirtualAssistantState({
isOpen: true,
- currentModel: Models.ASK_RED_HAT,
+ currentModel: models.ASK_RED_HAT,
});
}
}}Also applies to: 76-92
3 participants
Description
There's possibility of missmatch in loading modules if insights-chrome is released before learning resources. This PR fixes such issue by safe loading module and if older version of scalprum is found it uses fallback method of loading the module. Moreover this moves the module loading into help panel itself and does not block rendering of the help panel so if the module loading fails we can still use the help panel.