Merge pull request #3396 from plotly/hooks/devtool-position

Add position argument to hooks.devtool

Author: T4rk1n

CHANGELOG.md

@@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [UNRELEASED]
 
+## Added
+- [#3395](https://github.com/plotly/dash/pull/3396) Add position argument to hooks.devtool
+
 ## Fixed
 - [#3395](https://github.com/plotly/dash/pull/3395) Fix Components added through set_props() cannot trigger related callback functions. Fix [#3316](https://github.com/plotly/dash/issues/3316)
 - [#3397](https://github.com/plotly/dash/pull/3397) Add optional callbacks, suppressing callback warning for missing component ids for a single callback.

dash/_hooks.py

@@ -22,6 +22,7 @@
 
 
 HookDataType = _tx.TypeVar("HookDataType")
+DevtoolPosition = _tx.Literal["right", "left"]
 
 
 # pylint: disable=too-few-public-methods
@@ -217,7 +218,13 @@ def wrap(func: _t.Callable[[_t.Dict], _t.Any]):
 
         return wrap
 
-    def devtool(self, namespace: str, component_type: str, props=None):
+    def devtool(
+        self,
+        namespace: str,
+        component_type: str,
+        props=None,
+        position: DevtoolPosition = "right",
+    ):
         """
         Add a component to be rendered inside the dev tools.
 
@@ -232,6 +239,7 @@ def devtool(self, namespace: str, component_type: str, props=None):
                 "namespace": namespace,
                 "type": component_type,
                 "props": props or {},
+                "position": position,
             }
         )
 

dash/dash-renderer/src/components/error/menu/DebugMenu.react.js

@@ -52,25 +52,29 @@ const MenuContent = ({
 
     let custom = null;
     if (config.dev_tools?.length && ready) {
-        custom = (
-            <>
-                {config.dev_tools.map((devtool, i) => (
+        custom = config.dev_tools.reduce(
+            (acc, devtool, i) => {
+                const comp = (
                     <ExternalWrapper
                         component={devtool}
                         componentPath={['__dash_devtools', i]}
                         key={devtool?.props?.id ? devtool.props.id : i}
                     />
-                ))}
-                <div
-                    className='dash-debug-menu__divider'
-                    style={{marginRight: 0}}
-                />
-            </>
+                );
+                if (devtool.position === 'left') {
+                    acc.left.push(comp);
+                } else {
+                    acc.right.push(comp);
+                }
+                return acc;
+            },
+            {left: [], right: []}
         );
     }
 
     return (
         <div className='dash-debug-menu__content'>
+            {custom && <>{custom.left}</>}
             <button
                 onClick={toggleErrors}
                 className={
@@ -109,11 +113,11 @@ const MenuContent = ({
                 Server
                 <_StatusIcon className='dash-debug-menu__icon' />
             </div>
+            {custom && <>{custom.right}</>}
             <div
                 className='dash-debug-menu__divider'
                 style={{marginRight: 0}}
             />
-            {custom}
         </div>
     );
 };