Add always_show_buttons option

Option to show buttons (add rule, etc.) even when they are not hovered.

Author: cedricvlt

README.md

@@ -101,11 +101,12 @@ st.write(return_val)
 ```python
 def condition_tree(
     config: dict,
-    return_type: str,
-    tree: dict,
-    min_height: int,
-    placeholder: str,
-    key: str
+    return_type: str [Optional],
+    tree: dict [Optional],
+    min_height: int [Optional],
+    placeholder: str [Optional],
+    always_show_buttons: bool [Optional],
+    key: str [Optional]
 )
 ```
 
@@ -144,6 +145,11 @@ and [demo](https://ukrbublik.github.io/react-awesome-query-builder/).
   Default : None
 
 
+- **always_show_buttons**: Show buttons (create rule, etc.) even when they are not hovered
+
+  Default: False
+
+
 - **key**: Fixed identity if you want to change its arguments over time and not have it be re-created.  
 Can also be used to access the generated condition tree (see section below).
 

streamlit_condition_tree/__init__.py

@@ -57,6 +57,7 @@ def condition_tree(config: dict,
                    tree: dict = None,
                    min_height: int = 400,
                    placeholder: str = '',
+                   always_show_buttons: bool = False,
                    key: str = None):
     """Create a new instance of condition_tree.
 
@@ -79,6 +80,9 @@ def condition_tree(config: dict,
     placeholder: str
         Text displayed when the condition tree is empty
         Default: empty
+    always_show_buttons: false
+        If false, buttons (add rule, etc.) will be shown only on hover
+        Default: true
     key: str or None
         An optional key that uniquely identifies this component. If this is
         None, and the component's arguments are changed, the component will
@@ -109,6 +113,7 @@ def condition_tree(config: dict,
         key='_' + key if key else None,
         min_height=min_height,
         placeholder=placeholder,
+        always_show_buttons=always_show_buttons,
         default=['', '']
     )
 

streamlit_condition_tree/frontend/src/ConditionTree.tsx

@@ -146,7 +146,8 @@ class ConditionTree extends StreamlitComponentBase<State> {
 
     private renderBuilder = (props: BuilderProps) => (
         <div className="query-builder-container">
-            <div className="query-builder qb-lite">
+            <div className={'query-builder '+
+            (this.props.args['always_show_buttons'] ? '':'qb-lite')}>
                 <Builder {...props} />
             </div>
         </div>