Merge branch '717-dev-locate-in-tree' into 'dev'

Resolve ""locate in tree""

See merge request !492

src/Gargantext/Components/Forest.purs

@@ -7,6 +7,7 @@ import Data.Array as A
 import Data.Map (empty)
 import Data.Map as Map
 import Data.Maybe (Maybe(..), fromMaybe)
+import Effect (Effect)
 import Gargantext.Components.App.Store as Store
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Position(..), TooltipPosition(..), Variant(..))
@@ -90,6 +91,12 @@ plusCpt = here.component "plus" cpt
         _ <- T.write Nothing backend
         T.write_ true showLogin
 
+      locateInTree _ = do
+        mEl <- R2.querySelector ".forest-layout__tree .mainleaf--selected"
+        case mEl of
+          Nothing -> pure unit
+          Just el -> R2.scrollIntoView el
+
     -- Render
     pure $
       H.div { className: "forest-layout__actions position-sticky top-0 py-1 bg-light" }
@@ -178,6 +185,26 @@ plusCpt = here.component "plus" cpt
                       ]
                 }
             ]
+        , H.div
+            { className: "forest-layout__top_action" }
+            [ B.tooltipContainer
+                { delayShow: 600
+                , position: TooltipPosition Right
+                , tooltipSlot:
+                    B.span_ "Locate current node in tree"
+                , defaultSlot:
+                    B.button
+                      { className: "w-100 text-small px-2"
+                      , callback: locateInTree
+                      , variant: ButtonVariant Light
+                      }
+                      [ B.icon
+                          { name: "bullseye" }
+                      , B.wad_ [ "d-inline-block", "w-1" ]
+                      , B.span_ "Locate in tree"
+                      ]
+                }
+            ]
 
         {-
       ,

src/Gargantext/Components/Forest/Tree.purs

@@ -211,12 +211,6 @@ treeCpt = here.component "tree" cpt
       let action = NT.InsertCallback (NT.UpdateTree root) ("tree-" <> show root) cb
       Notifications.performAction ws action
 
-    R.useEffect' do
-      selectedLeaf <- R2.querySelector ".mainleaf--selected"
-      case selectedLeaf of
-        Nothing -> pure unit
-        Just el -> R2.scrollIntoView el
-
     pure $
       H.div
         { className: intercalate " "

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -267,6 +267,13 @@ nodeSpanCpt = here.component "nodeSpan" cpt
       let action = NT.InsertCallback (NT.UpdateTree props.id) ("node-span-" <> show props.id) cb
       Notifications.performAction ws action
 
+    R.useEffectOnce' $ do
+      when isSelected $ do
+        mEl <- R2.querySelector ".forest-layout__tree .mainleaf--selected"
+        case mEl of
+          Nothing -> pure unit
+          Just el -> R2.scrollIntoView el
+
     -- Render
 
     pure $