Make toolbox update when mechanism_component holder changes

Author: alan412

src/App.tsx

@@ -42,6 +42,7 @@ import * as CustomBlocks from './blocks/setup_custom_blocks';
 import { initialize as initializePythonBlocks } from './blocks/utils/python';
 import * as ChangeFramework from './blocks/utils/change_framework'
 import { mutatorOpenListener } from './blocks/mrc_param_container'
+import { TOOLBOX_UPDATE_EVENT } from './blocks/mrc_mechanism_component_holder';
 
 /** Storage key for shown toolbox categories. */
 const SHOWN_TOOLBOX_CATEGORIES_KEY = 'shownPythonToolboxCategories';
@@ -253,6 +254,22 @@ const App: React.FC = (): React.JSX.Element => {
     return tabs;
   };
 
+  /** Handles toolbox update requests from blocks */
+  const handleToolboxUpdateRequest = React.useCallback(() => {
+    if (blocksEditor.current && currentModule) {
+      blocksEditor.current.updateToolbox(shownPythonToolboxCategories);
+    }
+  }, [currentModule, shownPythonToolboxCategories]);
+
+  // Add event listener for toolbox updates
+  React.useEffect(() => {
+    window.addEventListener(TOOLBOX_UPDATE_EVENT, handleToolboxUpdateRequest);
+    
+    return () => {
+      window.removeEventListener(TOOLBOX_UPDATE_EVENT, handleToolboxUpdateRequest);
+    };
+  }, [handleToolboxUpdateRequest]);
+
   // Initialize storage and blocks when app loads
   React.useEffect(() => {
     openStorage();

src/blocks/mrc_mechanism_component_holder.ts

@@ -37,6 +37,8 @@ export const BLOCK_NAME = 'mrc_mechanism_component_holder';
 export const MECHANISM = 'mechanism';
 export const COMPONENT = 'component';
 
+export const TOOLBOX_UPDATE_EVENT = 'toolbox-update-requested';
+
 type MechanismComponentHolderExtraState = {
   hideMechanisms?: boolean;
 }
@@ -115,17 +117,33 @@ const MECHANISM_COMPONENT_HOLDER = {
       let blockMoveEvent = blockEvent as Blockly.Events.BlockMove;
       if (blockMoveEvent.reason?.includes('connect')) {
         setName(block);
+        updateToolboxAfterDelay();
       }
     }
     else {
       if (blockEvent.type == Blockly.Events.BLOCK_CHANGE) {
         setName(block);
+        updateToolboxAfterDelay();
       }
     }
   },
 
 }
 
+let toolboxUpdateTimeout: NodeJS.Timeout | null = null;
+export function updateToolboxAfterDelay(){
+  if (toolboxUpdateTimeout) {
+    clearTimeout(toolboxUpdateTimeout);
+  }
+  toolboxUpdateTimeout = setTimeout(() => {
+    const event = new CustomEvent(TOOLBOX_UPDATE_EVENT, {
+      detail: { timestamp: Date.now() }
+    });
+    window.dispatchEvent(event);
+    toolboxUpdateTimeout = null;
+  }, 100);
+}
+
 export const setup = function () {
   Blockly.Blocks[BLOCK_NAME] = MECHANISM_COMPONENT_HOLDER;
 }