Collapse empty panels and display no data available message

libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx

@@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel'
 export const CalldataPanel = ({ calldata }) => {
     return (
         <div id='calldatapanel'>
-            <DropdownPanel dropdownName='Call Data' calldata={calldata} />
+            <DropdownPanel dropdownName='Call Data' calldata={calldata || {}} />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx

@@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel'
 export const CallstackPanel = ({ calldata }) => {
     return (
         <div id='callstackpanel'>
-            <DropdownPanel dropdownName='Call Stack' calldata={calldata} />
+            <DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -12,10 +12,10 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     const data = useExtractData(calldata, extractFunc)
     const [state, setState] = useState({
         header: '',
-        toggleDropdown: true,
+        toggleDropdown: false,
         message: {
-            innerText: '',
-            display: 'none'
+            innerText: 'No data available.',
+            display: 'block'
         },
         dropdownContent: {
             innerText: '',
@@ -83,6 +83,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     }
 
     const update = function (calldata) {
+        let isEmpty = !calldata ? true : false
+
+        if(calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true
+        else if(calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true
+
         setState(prevState => {
             return {
                 ...prevState,
@@ -91,7 +96,12 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                     display: 'block'
                 },
                 copiableContent: JSON.stringify(calldata, null, '\t'),
-                updating: false
+                message: {
+                    innerText: isEmpty ? 'No data available' : '',
+                    display: isEmpty ? 'block' : 'none'
+                },
+                updating: false,
+                toggleDropdown: !isEmpty
             }
         })
     }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx

@@ -4,7 +4,7 @@ import { DropdownPanel } from './dropdown-panel'
 export const FullStoragesChanges = ({ calldata }) => {
     return (
         <div id='fullstorageschangespanel'>
-            <DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata } />
+            <DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata || {}} />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx

@@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel'
 export const FunctionPanel = ({ calldata }) => {
     return (
         <div id="FunctionPanel">
-            <DropdownPanel dropdownName='Function Stack' calldata={calldata} />
+            <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel'
 
 export const MemoryPanel = ({ calldata }) => {
     return (
-        <DropdownPanel  dropdownName='Memory' calldata={calldata} />
+        <DropdownPanel  dropdownName='Memory' calldata={calldata || {}} />
     )
 }
 

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx

@@ -36,7 +36,7 @@ export const SolidityLocals = ({ calldata, message }) => {
 
     return (
         <div id='soliditylocals' data-id="solidityLocals">
-            <DropdownPanel dropdownName='Solidity Locals' dropdownMessage={message} calldata={calldata}  extractFunc={extractData} formatSelfFunc={formatSelf} />
+            <DropdownPanel dropdownName='Solidity Locals' calldata={calldata || {}}  extractFunc={extractData} formatSelfFunc={formatSelf} />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx

@@ -36,7 +36,7 @@ export const SolidityState = ({ calldata, message }) => {
     return (
         <div id='soliditylocals' data-id='solidityLocals'>
             {
-                <DropdownPanel dropdownName='Solidity State' dropdownMessage={message} calldata={calldata} formatSelfFunc={formatSelf} extractFunc={extractData} />
+                <DropdownPanel dropdownName='Solidity State' calldata={calldata || {}} formatSelfFunc={formatSelf} extractFunc={extractData} />
             }
         </div>
     )

libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx

@@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel'
 export const StackPanel = ({ calldata }) => {
     return (
         <div id="stackpanel">
-            <DropdownPanel dropdownName='Stack' calldata={calldata} />
+            <DropdownPanel dropdownName='Stack' calldata={calldata || {}} />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx

@@ -50,7 +50,7 @@ export const StepDetail = (props: StepDetailProps) => {
 
     return (
         <div id='stepdetail' data-id="stepdetail">
-            <DropdownPanel dropdownName='Step details' calldata={ detail } />
+            <DropdownPanel dropdownName='Step details' calldata={detail || {}} />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx

 import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
-export const StoragePanel = ({ storage, header }) => {
+export const StoragePanel = ({ calldata, header }) => {
     return (
         <div id='storagepanel'>
-            <DropdownPanel dropdownName='Storage' calldata={storage} header={header} />
+            <DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx

@@ -89,9 +89,9 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
     <div id="vmheadView" className="mt-1 px-0">
       <div className="d-flex flex-column">
         <div className="w-100">
-          <FunctionPanel calldata={functionPanel || {}} />
-          <SolidityLocals calldata={solidityLocals.calldata || {}} message={solidityLocals.message} />
-          <SolidityState calldata={solidityState.calldata || {}} message={solidityState.message} />
+          <FunctionPanel calldata={functionPanel} />
+          <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
+          <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
         </div>
         <div className="w-100"><CodeListView asm={asm} /></div>
         <div className="w-100"><StepDetail stepDetail={stepDetail} /></div>

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx

@@ -52,13 +52,13 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
   return (
     <div id="vmdebugger" className="px-2">
       <div>
-        <StackPanel calldata={stackPanel || {}} />
-        <MemoryPanel calldata={memoryPanel || {}} />
-        <StoragePanel storage={storagePanel.calldata || {}} header={storagePanel.header} />
-        <CallstackPanel calldata={callStackPanel || {}} />
-        <CalldataPanel calldata={calldataPanel || {}} />
+        <StackPanel calldata={stackPanel} />
+        <MemoryPanel calldata={memoryPanel} />
+        <StoragePanel calldata={storagePanel.calldata} header={storagePanel.header} />
+        <CallstackPanel calldata={callStackPanel} />
+        <CalldataPanel calldata={calldataPanel} />
         <ReturnValuesPanel dropdownName="Return Value" calldata={returnValuesPanel || {}} />
-        <FullStoragesChangesPanel calldata={fullStoragesChangesPanel || {}} />
+        <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
       </div>
     </div>
   )