diff --git a/public/pages/workflow_detail/workspace/component_details.tsx b/public/pages/workflow_detail/workspace/component_details.tsx
index b9784e18..3499a3a9 100644
--- a/public/pages/workflow_detail/workspace/component_details.tsx
+++ b/public/pages/workflow_detail/workspace/component_details.tsx
@@ -44,6 +44,7 @@ export function ComponentDetails(props: ComponentDetailsProps) {
    * Hook provided by reactflow to listen on when nodes are selected / de-selected.
    * - populate panel content appropriately
    * - open the panel if a node is selected and the panel is closed
+   * - it is assumed that only one node can be selected at once
    */
   useOnSelectionChange({
     onChange: ({ nodes, edges }) => {
diff --git a/public/pages/workflow_detail/workspace/resizable_workspace.tsx b/public/pages/workflow_detail/workspace/resizable_workspace.tsx
index a62212a6..e092660d 100644
--- a/public/pages/workflow_detail/workspace/resizable_workspace.tsx
+++ b/public/pages/workflow_detail/workspace/resizable_workspace.tsx
@@ -14,6 +14,8 @@ interface ResizableWorkspaceProps {
   workflow?: Workflow;
 }
 
+const COMPONENT_DETAILS_PANEL_ID = 'component_details_panel_id';
+
 /**
  * The overall workspace component that maintains state related to the 2 resizable
  * panels - the ReactFlow workspace panel and the selected component details panel.
@@ -25,7 +27,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
   );
 
   const onToggleChange = () => {
-    collapseFn.current('inputsPanel', { direction: 'left' });
+    collapseFn.current(COMPONENT_DETAILS_PANEL_ID, { direction: 'left' });
     setIsOpen(!isOpen);
   };
 
@@ -47,7 +49,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
             </EuiResizablePanel>
             <EuiResizableButton />
             <EuiResizablePanel
-              id="inputsPanel"
+              id={COMPONENT_DETAILS_PANEL_ID}
               mode="collapsible"
               initialSize={25}
               minSize="10%"