Show expanded details

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import { DropdownPanelProps, ExtractData, ExtractFunc } from '../../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
@@ -57,7 +57,8 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         },
         copiableContent: '',
         updating: false,
-        data: null
+        data: null,
+        expandPath: []
     })
 
     useEffect(() => {
@@ -81,6 +82,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         })
     }
 
+    const handleExpand = (keyPath) => {
+        if (!state.expandPath.includes(keyPath)) {
+            state.expandPath.push(keyPath)
+        } else {
+            state.expandPath = state.expandPath.filter(path => !path.startsWith(keyPath))
+        }
+    }
+
     const message = (message) => {
         if (message === state.message.innerText) return
         setState(prevState => {
@@ -148,14 +157,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
         if (children && children.length > 0 ) {
             return (
-                <TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) }>
+                <TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } handleClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}>
                     <TreeView id={`treeView${key}`} key={keyPath}>
                         { children }
                     </TreeView>
                 </TreeViewItem>
             )
         } else {
-            return <TreeViewItem id={key.toString()} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } />
+            return <TreeViewItem id={key.toString()} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } handleClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} />
         }
     }
 

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

@@ -8,7 +8,6 @@ export const SolidityLocals = ({ data, message }) => {
     const [calldata, setCalldata] = useState(null)
 
     useEffect(() => {
-        console.log('data: ', data)
         if (!deepequal(calldata, data)) setCalldata(data)
     }, [data])
 

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -1,14 +1,18 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { TreeViewItemProps } from '../../types'
 
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { id, children, label, ...otherProps } = props
+  const { id, children, label, expand, handleClick, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
+  useEffect(() => {
+    setIsExpanded(expand)
+  }, [expand])
+
   return (
-    <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
+    <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' onClick={handleClick} {...otherProps}>
       <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className='d-flex flex-row align-items-center' onClick={() => setIsExpanded(!isExpanded)}>
         <div className={isExpanded ? 'px-1 fas fa-caret-down caret caret_tv' : 'px-1 fas fa-caret-right caret caret_tv'}  style={{ visibility: children ? 'visible' : 'hidden' }}></div>
         <span className='w-100 pl-1'>

libs/remix-ui/tree-view/src/types/index.ts

@@ -6,5 +6,7 @@ export interface TreeViewProps {
 export interface TreeViewItemProps {
     children?: React.ReactNode,
     id: string,
-    label: string | number | React.ReactNode
+    label: string | number | React.ReactNode,
+    expand?: boolean,
+    handleClick?: (e) => void
 }