[Tree] fix node popup to use fixed CSS positioning

This way the popup really floats, avoiding being caught up in absolute
divs with limited width etc.

dist/styles/Login.css

@@ -46,9 +46,7 @@ li#rename #rename-a {
 }
 
 #node-popup-tooltip {
-  position: absolute;
-  left: 96px;
-  top: -64px;
+  position: fixed;
   background-color: white;
   z-index: 1000;
 }

dist/styles/Login.sass

@@ -45,9 +45,10 @@ li#rename
 
 
 #node-popup-tooltip
-  position : absolute
-  left : 96px
-  top: -64px
+  //position : absolute
+  position: fixed
+  //left : 96px
+  //top: -64px
   background-color: white
   z-index: 1000
   &:hover

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

@@ -2,6 +2,9 @@ module Gargantext.Components.Forest.Tree.Node where
 
 import Prelude (class Eq, class Show, show, (&&), (<>), (==))
 import Data.Array (foldl)
+import Data.Maybe (Maybe(..))
+import Data.Tuple (Tuple(..))
+
 import Gargantext.Types
 
 ------------------------------------------------------------------------
@@ -62,7 +65,6 @@ glyphiconNodeAction _                 = ""
 
 ------------------------------------------------------------------------
 ------------------------------------------------------------------------
-
 data SettingsBox =
   SettingsBox { show    :: Boolean
               , edit    :: Boolean
@@ -72,7 +74,8 @@ data SettingsBox =
 ------------------------------------------------------------------------
 
 settingsBox :: NodeType -> SettingsBox
-settingsBox NodeUser = SettingsBox { show : true
+settingsBox NodeUser = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation NodeUser
   , buttons : [ SearchBox
@@ -84,7 +87,8 @@ settingsBox NodeUser = SettingsBox { show : true
               ]
   }
 
-settingsBox FolderPrivate = SettingsBox { show: true
+settingsBox FolderPrivate = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation FolderPrivate
   , buttons : [ SearchBox
@@ -95,7 +99,8 @@ settingsBox FolderPrivate = SettingsBox { show: true
               , Delete]
   }
 
-settingsBox Team = SettingsBox { show: true
+settingsBox Team = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation Team
   , buttons : [ SearchBox
@@ -106,7 +111,8 @@ settingsBox Team = SettingsBox { show: true
               , Delete]
   }
 
-settingsBox FolderShared = SettingsBox { show: true
+settingsBox FolderShared = SettingsBox {
+    show: true
   , edit : true
   , doc  : Documentation FolderShared
   , buttons : [ Add [Team, FolderShared]
@@ -114,8 +120,8 @@ settingsBox FolderShared = SettingsBox { show: true
               ]
   }
 
-
-settingsBox FolderPublic = SettingsBox { show : true
+settingsBox FolderPublic = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation FolderPublic
   , buttons : [{-, SearchBox
@@ -126,7 +132,8 @@ settingsBox FolderPublic = SettingsBox { show : true
     ]
   }
 
-settingsBox Folder = SettingsBox { show : true
+settingsBox Folder = SettingsBox {
+    show: true
   , edit : true
   , doc  : Documentation Folder
   , buttons : [ SearchBox
@@ -138,7 +145,8 @@ settingsBox Folder = SettingsBox { show : true
               ]
   }
 
-settingsBox Corpus = SettingsBox { show : true
+settingsBox Corpus = SettingsBox {
+    show: true
   , edit : true
   , doc  : Documentation Corpus
   , buttons : [ SearchBox
@@ -156,7 +164,8 @@ settingsBox Corpus = SettingsBox { show : true
               ]
   }
 
-settingsBox Texts = SettingsBox { show : true
+settingsBox Texts = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation Texts
   , buttons : [ Upload
@@ -165,7 +174,8 @@ settingsBox Texts = SettingsBox { show : true
               ]
   }
 
-settingsBox Graph = SettingsBox { show : true
+settingsBox Graph = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation Graph
   , buttons : [ Documentation Graph
@@ -174,7 +184,8 @@ settingsBox Graph = SettingsBox { show : true
               ]
   }
 
-settingsBox NodeList = SettingsBox { show : true
+settingsBox NodeList = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation NodeList
   , buttons : [ Upload
@@ -183,23 +194,23 @@ settingsBox NodeList = SettingsBox { show : true
               ]
   }
 
-settingsBox Dashboard = SettingsBox { show : true
+settingsBox Dashboard = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation Dashboard
   , buttons : [Delete]
   }
 
-settingsBox Annuaire = SettingsBox { show : true
+settingsBox Annuaire = SettingsBox {
+    show: true
   , edit : false
   , doc  : Documentation Annuaire
   , buttons : [Delete]
   }
 
-settingsBox _ = SettingsBox { show : false
+settingsBox _ = SettingsBox {
+    show: false
   , edit : false
   , doc  : Documentation NodeUser
   , buttons : []
   }
-
-
-

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

@@ -48,9 +48,10 @@ nodeMainSpan :: (Action -> Aff Unit)
 nodeMainSpan d p folderOpen session frontends = R.createElement el p []
   where
     el = R.hooksComponent "NodeMainSpan" cpt
-    cpt {id, name, nodeType, mCurrentRoute} _ = do
+    cpt props@{id, name, nodeType, mCurrentRoute} _ = do
       -- only 1 popup at a time is allowed to be opened
       popupOpen   <- R.useState' (Nothing :: Maybe NodePopup)
+      popupPosition <- R.useState' (Nothing :: Maybe R2.Point)
       droppedFile <- R.useState' (Nothing :: Maybe DroppedFile)
       isDragOver  <- R.useState' false
 
@@ -60,36 +61,45 @@ nodeMainSpan d p folderOpen session frontends = R.createElement el p []
               , style: {marginLeft: "22px"}
               }
           [ nodeText { isSelected: (mCorpusId mCurrentRoute) == (Just id)
-                     , name: name'} ]
-        , if showBox then popOverIcon popupOpen else H.div {} []
-        , if showBox
-             then nodePopupView  d { id
-                                   , name:name'
-                                   , nodeType
-                                   , action: Nothing
-                                   , session
-                                   } popupOpen
-             else H.div {} []
+                     , name: name' props} ]
+        , popOverIcon showBox popupOpen popupPosition
+        , mNodePopupView props showBox popupOpen popupPosition
         , fileTypeView   d {id, nodeType} droppedFile isDragOver
         ]
           where
-            name' = if nodeType == NodeUser then show session else name
-            SettingsBox {show:showBox} = settingsBox nodeType
+            SettingsBox {show: showBox} = settingsBox nodeType
 
+    name' {name, nodeType} = if nodeType == NodeUser then show session else name
 
     folderIcon nodeType folderOpen'@(open /\ _) =
       H.a {onClick: R2.effToggler folderOpen'}
       [ H.i {className: fldr nodeType open} [] ]
 
-    popOverIcon (popOver /\ setPopOver) =
+    popOverIcon false _ _ = H.div {} []
+    popOverIcon true (popOver /\ setPopOver) (_ /\ setPopupPosition) =
       H.a { className: "glyphicon glyphicon-cog"
           , id: "rename-leaf"
-          , on: { click: \_ -> setPopOver $ toggle }
+          , on: { click: toggle popOver }
           } []
       where
-        toggle Nothing = Just NodePopup
-        toggle _       = Nothing
-
+        toggle Nothing e = do
+          setPopupPosition $ const $ Just $ R2.mousePosition e
+          setPopOver $ const $ Just NodePopup
+        toggle _ _ = do
+          setPopupPosition $ const Nothing
+          setPopOver $ const Nothing
+
+    mNodePopupView _ false _ _ = H.div {} []
+    mNodePopupView _ _ (Nothing /\ _) _ = H.div {} []
+    mNodePopupView _ _ _ (Nothing /\ _) = H.div {} []
+    mNodePopupView props@{id, nodeType} true popupOpen (Just position /\ _) =
+      nodePopupView d { id
+                      , action: Nothing
+                      , name: name' props
+                      , nodeType
+                      , position
+                      , session
+                      } popupOpen
 
     dropProps droppedFile isDragOver =
       { className: dropClass droppedFile isDragOver
@@ -159,9 +169,10 @@ mCorpusId _ = Nothing
 -- | START Popup View
 type NodePopupProps =
   ( id       :: ID
+  , action   :: Maybe NodeAction
   , name     :: Name
   , nodeType :: NodeType
-  , action   :: Maybe NodeAction
+  , position :: R2.Point
   , session  :: Session
   )
 
@@ -178,11 +189,11 @@ nodePopupView :: (Action -> Aff Unit)
 nodePopupView d p mPop@(Just NodePopup /\ setPopupOpen) = R.createElement el p []
   where
     el = R.hooksComponent "NodePopupView" cpt
-    cpt {id, name, nodeType, action, session} _ = do
+    cpt {id, action, name, nodeType, position, session} _ = do
       renameBoxOpen <- R.useState' false
       nodePopupState@(nodePopup /\ setNodePopup) <- R.useState' {id, name, nodeType, action}
       search <- R.useState' $ defaultSearch { node_id = Just id }
-      pure $ H.div tooltipProps $
+      pure $ H.div (tooltipProps position) $
         [ H.div {id: "arrow"} []
         , H.div { className: "popup-container" }
           [ H.div { className: "panel panel-default" }
@@ -206,11 +217,13 @@ nodePopupView d p mPop@(Just NodePopup /\ setPopupOpen) = R.createElement el p [
           ]
         ]
       where
-        tooltipProps = { className: ""
+        tooltipProps (R2.Point {x, y}) = {
+          className: ""
           , id: "node-popup-tooltip"
           , title: "Node settings"
           , data: { toggle: "tooltip"
-                               , placement: "right"}
+                  , placement: "right"},
+            style: { top: y, left: x }
           }
 
         SettingsBox {edit, doc, buttons} = settingsBox nodeType