From 89d84504d2ad390a5fe05af4076f7247b9096a1e Mon Sep 17 00:00:00 2001 From: David Jones Date: Wed, 27 Aug 2025 13:32:11 -0400 Subject: [PATCH] Module ID resolved incorrectly --- .../adapters/LegacyModuleAdapter.tsx | 83 ++++++++++++++----- .../components/LayoutEngine.tsx | 13 +-- 2 files changed, 71 insertions(+), 25 deletions(-) diff --git a/frontend/src/features/unified-dynamic-page-renderer/adapters/LegacyModuleAdapter.tsx b/frontend/src/features/unified-dynamic-page-renderer/adapters/LegacyModuleAdapter.tsx index 7856ea9..7624029 100644 --- a/frontend/src/features/unified-dynamic-page-renderer/adapters/LegacyModuleAdapter.tsx +++ b/frontend/src/features/unified-dynamic-page-renderer/adapters/LegacyModuleAdapter.tsx @@ -304,18 +304,20 @@ export const LegacyModuleAdapter: React.FC = React.mem if (!targetModule) { // Enhanced module ID extraction for complex generated IDs - // Format: PluginName_actualModuleId_timestamp + // Format: ServiceExample_Theme_userId_ServiceExample_Theme_actualModuleId_timestamp const parts = moduleId.split('_'); - if (parts.length >= 2) { - const extractedModuleId = parts[1]; // Get the actual module ID + if (parts.length >= 6) { + const extractedModuleId = parts[5]; // Get the actual module ID (ThemeDisplay/ThemeController) targetModule = remotePlugin.loadedModules.find(m => m.id === extractedModuleId); if (process.env.NODE_ENV === 'development') { console.log(`[LegacyModuleAdapter] Trying extracted module ID: "${extractedModuleId}" from complex ID: "${moduleId}"`); + console.log(`[LegacyModuleAdapter] Module ID parts:`, parts); if (targetModule) { - console.log(`[LegacyModuleAdapter] Successfully found module with extracted ID:`, { + console.log(`[LegacyModuleAdapter] ✅ Successfully found module with extracted ID:`, { id: targetModule.id, name: targetModule.name, + displayName: targetModule.displayName, hasComponent: !!targetModule.component }); } @@ -323,6 +325,23 @@ export const LegacyModuleAdapter: React.FC = React.mem } } + if (!targetModule) { + // Enhanced fallback for complex IDs: try combined plugin_module format + const parts = moduleId.split('_'); + if (parts.length >= 4) { + const combinedModuleId = `${parts[1]}_${parts[2]}`; // ServiceExample_Theme_ThemeDisplay + targetModule = remotePlugin.loadedModules.find(m => + m.id === combinedModuleId || + (m.id && m.id.endsWith(parts[2])) || + m.name === parts[2] + ); + + if (process.env.NODE_ENV === 'development') { + console.log(`[LegacyModuleAdapter] Trying combined module ID: "${combinedModuleId}" and module name: "${parts[2]}"`); + } + } + } + if (!targetModule) { // Try simple pattern removal (original logic) const baseModuleId = moduleId.replace(/-\d+$/, ''); @@ -334,17 +353,19 @@ export const LegacyModuleAdapter: React.FC = React.mem } if (!targetModule) { - // For complex generated IDs like "BrainDriveChat_1830586da8834501bea1ef1d39c3cbe8_BrainDriveChat_BrainDriveChat_1754404718788" - // Try to extract the plugin name (first part before underscore) - const pluginNameFromId = moduleId.split('_')[0]; - targetModule = remotePlugin.loadedModules.find(m => - m.id === pluginNameFromId || - m.name === pluginNameFromId || - (m.id && m.id.includes(pluginNameFromId)) - ); - - if (process.env.NODE_ENV === 'development') { - console.log(`[LegacyModuleAdapter] Trying plugin name extraction: "${pluginNameFromId}" from moduleId: "${moduleId}"`); + // Final module name fallback: try exact match with the extracted module name + const parts = moduleId.split('_'); + if (parts.length >= 3) { + const moduleNameOnly = parts[2]; + targetModule = remotePlugin.loadedModules.find(m => + m.name === moduleNameOnly || + m.displayName === moduleNameOnly || + (m.id && m.id.toLowerCase().includes(moduleNameOnly.toLowerCase())) + ); + + if (process.env.NODE_ENV === 'development') { + console.log(`[LegacyModuleAdapter] Trying module name fallback: "${moduleNameOnly}"`); + } } } @@ -383,12 +404,36 @@ export const LegacyModuleAdapter: React.FC = React.mem } if (process.env.NODE_ENV === 'development') { - console.log(`[LegacyModuleAdapter] Target module found:`, targetModule); + if (targetModule) { + const parts = moduleId ? moduleId.split('_') : []; + console.log(`[LegacyModuleAdapter] ✅ Module resolution successful:`, { + originalModuleId: moduleId, + extractedParts: parts, + extractedModuleId: parts.length >= 6 ? parts[5] : 'N/A', + resolvedModule: { + id: targetModule.id, + name: targetModule.name, + displayName: targetModule.displayName, + componentType: typeof targetModule.component, + hasComponent: !!targetModule.component + } + }); + } else { + console.warn(`[LegacyModuleAdapter] ❌ Module resolution failed:`, { + originalModuleId: moduleId, + pluginId: pluginId, + moduleName: moduleName, + extractedParts: moduleId ? moduleId.split('_') : [], + availableModules: remotePlugin?.loadedModules?.map(m => ({ + id: m.id, + name: m.name, + displayName: m.displayName + })) || [] + }); + } } + if (!targetModule) { - if (process.env.NODE_ENV === 'development') { - console.log(`[LegacyModuleAdapter] No target module found for ${pluginId}/${moduleId || moduleName}`); - } return null; } diff --git a/frontend/src/features/unified-dynamic-page-renderer/components/LayoutEngine.tsx b/frontend/src/features/unified-dynamic-page-renderer/components/LayoutEngine.tsx index 6e3be26..61326f9 100644 --- a/frontend/src/features/unified-dynamic-page-renderer/components/LayoutEngine.tsx +++ b/frontend/src/features/unified-dynamic-page-renderer/components/LayoutEngine.tsx @@ -580,7 +580,7 @@ export const LayoutEngine: React.FC = React.memo(({ // Pattern: BrainDriveBasicAIChat_59898811a4b34d9097615ed6698d25f6_1754507768265 // We want: 59898811a4b34d9097615ed6698d25f6 const parts = item.moduleId.split('_'); - const extractedModuleId = parts.length >= 2 ? parts[1] : item.moduleId; + const extractedModuleId = parts.length >= 6 ? parts[5] : item.moduleId; // Create stable breakpoint object const breakpointConfig = { @@ -651,12 +651,13 @@ export const LayoutEngine: React.FC = React.memo(({ pluginId={item.pluginId} moduleId={module._legacy?.moduleId || (() => { // Extract simple module ID from complex ID - // Pattern: BrainDriveBasicAIChat_59898811a4b34d9097615ed6698d25f6_1754507768265 - // We want: 59898811a4b34d9097615ed6698d25f6 + // Pattern: ServiceExample_Theme_userId_ServiceExample_Theme_actualModuleId_timestamp + // Example: ServiceExample_Theme_c34bfc30de004813ad5b5d3a4ab9df34_ServiceExample_Theme_ThemeDisplay_1756311722722 + // We want: ThemeDisplay (or ThemeController) const parts = item.moduleId.split('_'); - if (parts.length >= 2) { - // The module ID is typically the second part (after plugin name) - return parts[1]; + if (parts.length >= 6) { + // The actual module ID is the sixth part (after ServiceExample_Theme_userId_ServiceExample_Theme) + return parts[5]; } return item.moduleId; // fallback to original if pattern doesn't match })()}