Merge branch 'dev' into dev-graph-screenshot

dist/styles/Login.css

@@ -202,16 +202,4 @@ a:focus, a:hover {
   cursor: pointer;
 }
 
-.copy-from-corpus .tree .node {
-  padding-left: 10px;
-  margin-top: 5px;
-}
-.copy-from-corpus .tree .node .name.clickable {
-  color: #337ab7;
-  cursor: pointer;
-}
-.copy-from-corpus .tree .node .name.clickable:hover {
-  text-decoration: underline;
-}
-
 /*# sourceMappingURL=Login.css.map */

dist/styles/Login.sass

@@ -183,19 +183,6 @@ li
   display: flex
   justify-content: space-between
 
-
-
 a:focus, a:hover
   cursor: pointer
 
-.copy-from-corpus
-  .tree
-    .node
-      padding-left: 10px
-      margin-top: 5px
-      .name
-        &.clickable
-          color: #337ab7
-          cursor: pointer
-          &:hover
-            text-decoration: underline

dist/styles/Tree.css

@@ -13,6 +13,17 @@
 .tree .node-actions .update-button.disabled {
   cursor: wait;
 }
+.tree .node {
+  padding-left: 10px;
+  margin-top: 1px;
+}
+.tree .node .name.clickable {
+  color: #337ab7;
+  cursor: pointer;
+}
+.tree .node .name.clickable:hover {
+  text-decoration: underline;
+}
 .tree .lefthanded ul {
   margin-right: 19px;
 }

dist/styles/Tree.sass

@@ -9,6 +9,8 @@
         cursor: pointer
       &.disabled
         cursor: wait
+  .node
+    margin-top: 1px
   .lefthanded
     ul
       margin-right : 19px
@@ -21,7 +23,6 @@
       .leaf
         justify-content : flex-start
 
-
 // based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
 .progress-pie
   background: rgba(51, 122, 183, 0.1)

nix/easy-ps.nix

@@ -5,7 +5,7 @@ import
     pkgs.fetchFromGitHub {
       owner = "justinwoo";
       repo = "easy-purescript-nix";
-      rev = "14e7d85431e9f9838d7107d18cb79c7fa534f54e";
+      rev = "7ebddd8613cf6736dbecef9fce4c32f2a104ef82";
       sha256 = "0lmkppidmhnayv0919990ifdd61f9d23dzjzr8amz7hjgc74yxs0";
     }
   ) {

nix/generate-packages-json.nix

@@ -6,7 +6,7 @@ let
     pkgs.fetchFromGitHub {
       owner = "justinwoo";
       repo = "easy-dhall-nix";
-      rev = "288ee825c326f352a5db194a024bd3e1f2f735b2";
+      rev = "90957969850a44481c6e150350c56e8b53b29e1e";
       sha256 = "12v4ql1nm1famz8r80k1xkkdgj7285vy2vn16iili0qwvz3i98ah";
     }
   ) {

nix/pinned.nix

 import (
   builtins.fetchTarball {
-    url = "https://github.com/nixos/nixpkgs/archive/ece829033b7b8f4e81261fef5427144df4147bc4.tar.gz";
+    url = "https://github.com/NixOS/nixpkgs/archive/20.03.tar.gz";
     sha256 = "07n91k3d9i9pym8npsszha9mnvg4d1r0l0ldnhk4g8sx15vv1br5";
   }
 )

package.json

@@ -27,6 +27,7 @@
         "react": "^16.10",
         "react-awesome-popover": "^6.1.1",
         "react-dom": "^16.10",
+        "react-tooltip": "^4.2.8",
         "secp256k1": "^3.3.0",
         "sigma": "git://github.com/poorscript/sigma.js#garg"
     },

packages.dhall

 let mkPackage =
-      https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.2-20190804/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57
+      https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.8-20200724/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57
 
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.13.2-20190804/packages.dhall sha256:2230fc547841b54bca815eb0058414aa03ed7b675042f8b3dda644e1952824e5
+      https://github.com/purescript/package-sets/releases/download/psc-0.13.8-20200724/packages.dhall sha256:2230fc547841b54bca815eb0058414aa03ed7b675042f8b3dda644e1952824e5
 
 let overrides =
       { thermite =

src/Gargantext/Components/App.purs

@@ -170,12 +170,21 @@ topBarCpt = R.hooksComponent "G.C.A.topBar" cpt
         [ H.div { className: "container-fluid" }
           [ H.div { className: "navbar-inner" }
             [ logo
-            , H.div { className: "collapse navbar-collapse" } [
-                H.ul { className: "nav navbar-nav" } [
-                  divDropdownLeft
-                , handedChooser { handed }
-                ]
-              ]
+            , H.div { className: "collapse navbar-collapse" }
+                    [ H.ul { className: "nav navbar-nav" } [divDropdownLeft]
+                    , H.ul { title: "If you are Left Handed you can change "
+                                  <> "the interface by clicking on me. Click "
+                                  <> "again to come back to previous state."
+                           , className: "nav navbar-nav"
+                           } [handedChooser { handed }]
+                    {-, H.ul { title: "Dark Mode soon here"
+                           , className : "nav navbar-nav"
+                           } [ H.li {} [ H.a {} [ H.span {className : "fa fa-moon"}[]
+                                                ]
+                                       ]
+                             ]
+                    -}
+                    ]
             ]
           ]
         ]
@@ -199,7 +208,7 @@ handedChooserCpt = R.hooksComponent "G.C.A.handedChooser" cpt
           ]
         ]
 
-    handedClass (GT.LeftHanded /\ _) = "fa fa-hand-o-left"
+    handedClass (GT.LeftHanded  /\ _) = "fa fa-hand-o-left"
     handedClass (GT.RightHanded /\ _) = "fa fa-hand-o-right"
 
     onClick (_ /\ setHanded) = setHanded $ \h -> case h of
@@ -209,11 +218,12 @@ handedChooserCpt = R.hooksComponent "G.C.A.handedChooser" cpt
 logo :: R.Element
 logo =
   H.a { className, href: "#/" }
-  [ H.img { src, title, width: "30", height: "28" } ]
+  [ H.img { src, title, width: "30", height: "28" }
+  ]
   where
     className = "navbar-brand logoSmall"
-    src = "images/logoSmall.png"
-    title = "Back to home."
+    src       = "images/logoSmall.png"
+    title     = "Back to home."
 
 divDropdownLeft :: R.Element
 divDropdownLeft =

src/Gargantext/Components/Forest.purs

@@ -2,7 +2,6 @@ module Gargantext.Components.Forest where
 
 import Gargantext.Prelude
 
-import Data.Array as A
 import Data.Maybe (Maybe(..))
 import Data.Set as Set
 import Data.Tuple (fst)
@@ -69,7 +68,8 @@ plus handed showLogin = H.div {className: if handed == RightHanded
                                              then "flex-start"  -- TODO we should use lefthanded SASS class here
                                              else "flex-end"
                               } [
-  H.button { on: {click}
+  H.button { title: "Add or remove connections to the server(s)."
+           , on: {click}
            , className: "btn btn-default"
            }
           [ H.div { "type": ""

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

@@ -9,7 +9,6 @@ import Effect.Class (liftEffect)
 import React.SyntheticEvent as E
 import Reactix as R
 import Reactix.DOM.HTML as H
-import Web.File.FileReader.Aff (readAsText)
 
 import Gargantext.Components.Forest.Tree.Node.Settings (SettingsBox(..), settingsBox)
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
@@ -20,11 +19,11 @@ import Gargantext.Components.Forest.Tree.Node.Box.Types (CommonProps)
 import Gargantext.Components.Forest.Tree.Node.Tools.ProgressBar (asyncProgressBar, BarType(..))
 import Gargantext.Components.Forest.Tree.Node.Tools.Task (Tasks)
 import Gargantext.Components.Forest.Tree.Node.Tools.Sync (nodeActionsGraph, nodeActionsNodeList)
-import Gargantext.Components.Forest.Tree.Node.Tools (nodeText)
+import Gargantext.Components.Forest.Tree.Node.Tools (nodeLink)
 import Gargantext.Components.GraphExplorer.API as GraphAPI
 import Gargantext.Components.Lang (Lang(EN))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
-import Gargantext.Ends (Frontends, url)
+import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude (Unit, bind, const, discard, map, pure, show, unit, void, ($), (<>), (==), identity)
 import Gargantext.Routes as Routes
@@ -45,7 +44,6 @@ type NodeMainSpanProps =
   , name          :: Name
   , nodeType      :: GT.NodeType
   , tasks         :: Record Tasks
-  , handed        :: GT.Handed
   | CommonProps
   )
 
@@ -68,8 +66,33 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createEl
 
       pure $ H.span (dropProps droppedFile isDragOver)
            $ ordering
-             [ chevronIcon nodeType folderOpen
-             , folderIcon nodeType folderOpen
+             [ folderIcon  nodeType folderOpen
+             , chevronIcon handed nodeType folderOpen
+             , nodeLink { frontends
+                        , id
+                        , isSelected: mCurrentRoute
+                                    == Routes.nodeTypeAppRoute
+                                        nodeType 
+                                        (sessionId session) id
+                        , name: name' props
+                        , nodeType
+                        , session
+                        , handed 
+                        }
+
+             , fileTypeView { dispatch, droppedFile, id, isDragOver, nodeType }
+             , H.div {} (map (\t -> asyncProgressBar { asyncTask: t
+                                                     , barType: Pie
+                                                     , corpusId: id
+                                                     , onFinish: const $ onTaskFinish t
+                                                     , session
+                                                     }
+                             ) tasks
+                        )
+             , if nodeType == GT.NodeUser
+                  then GV.versionView {session}
+                  else H.div {} []
+
              , if showBox then
                  Popover.popover { arrow: false
                                  , open: false
@@ -80,27 +103,15 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createEl
                    , mNodePopupView props (onPopoverClose popoverRef)
                  ]
                else H.div {} []
-             , H.a { href: url frontends $ GT.NodePath (sessionId session) nodeType (Just id) }
-                   [ nodeText { isSelected: mCurrentRoute == Routes.nodeTypeAppRoute nodeType (sessionId session) id
-                              , name: name' props
-                              } ]
+
+
              , nodeActions { id
                            , nodeType
                            , refreshTree: const $ dispatch RefreshTree
                            , session
                            }
-             , fileTypeView { dispatch, droppedFile, id, isDragOver, nodeType }
-             , H.div {} (map (\t -> asyncProgressBar { asyncTask: t
-                                                     , barType: Pie
-                                                     , corpusId: id
-                                                     , onFinish: const $ onTaskFinish t
-                                                     , session
-                                                     }
-                             ) tasks
-                        )
-             , if nodeType == GT.NodeUser
-                  then GV.versionView {session}
-                  else H.div {} []
+
+
              ]
                where
                  SettingsBox {show: showBox} = settingsBox nodeType
@@ -110,14 +121,16 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createEl
                                 then show session
                                 else name
 
-    chevronIcon nodeType folderOpen'@(open /\ _) =
+    chevronIcon handed' nodeType folderOpen'@(open /\ _) =
       H.a { className: "chevron-icon"
           , onClick: R2.effToggler folderOpen'
           }
           [ H.i {
                className: if open
                           then "fa fa-chevron-down"
-                          else "fa fa-chevron-right"
+                          else if handed' == GT.RightHanded
+                                 then "fa fa-chevron-right"
+                                 else "fa fa-chevron-left"
                } [] ]
 
     folderIcon nodeType folderOpen'@(open /\ _) =
@@ -136,6 +149,7 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createEl
                     , nodeType
                     , onPopoverClose
                     , session
+                    , handed : props.handed
                     }
 
     dropProps droppedFile isDragOver =

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

@@ -58,7 +58,7 @@ linkNode p = R.createElement linkNodeCpt p []
 linkNodeCpt :: R.Component SubTreeParamsIn
 linkNodeCpt = R.hooksComponent "G.C.F.T.N.A.L.linkNode" cpt
   where
-    cpt p@{dispatch, subTreeParams, id, nodeType, session} _ = do
+    cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
 
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (LinkNode {nodeType:Nothing,params:Nothing})
 
@@ -75,5 +75,6 @@ linkNodeCpt = R.hooksComponent "G.C.F.T.N.A.L.linkNode" cpt
                       , nodeType
                       , session
                       , subTreeParams
+                      , handed
                       }
               ] button

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

@@ -25,7 +25,7 @@ mergeNode p = R.createElement mergeNodeCpt p []
 mergeNodeCpt :: R.Component SubTreeParamsIn
 mergeNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.mergeNode" cpt
   where
-    cpt p@{dispatch, subTreeParams, id, nodeType, session} _ = do
+    cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (MergeNode {params:Nothing})
 
       merge   <- R.useState' false
@@ -37,21 +37,21 @@ mergeNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.mergeNode" cpt
               Nothing -> H.div {} []
             _                   -> H.div {} []
 
-      pure $ panel [
-          subTreeView { action
+      pure $ panel [ subTreeView { action
                       , dispatch
                       , id
                       , nodeType
                       , session
                       , subTreeParams
+                      , handed
                       }
-        , H.div { className:"panel panel-primary"}
-                [ H.text "Merge which list?"
-                , checkboxes [GT.MapTerm, GT.CandidateTerm, GT.StopTerm] options
-                ]
-        , H.div { className:"panel panel-primary"}
-                [ H.text "Title"
-                , H.div {className: "checkbox"}
-                        [checkbox merge, H.text "Merge data?"]
-                ]
-        ] button
+                  , H.div { className:"panel panel-primary"}
+                          [ H.text "Merge which list?"
+                          , checkboxes [GT.MapTerm, GT.CandidateTerm, GT.StopTerm] options
+                          ]
+                  , H.div { className:"panel panel-primary"}
+                          [ H.text "Title"
+                          , H.div {className: "checkbox"}
+                                  [checkbox merge, H.text "Merge data?"]
+                          ]
+                  ] button

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

@@ -24,7 +24,7 @@ moveNode p = R.createElement moveNodeCpt p []
 moveNodeCpt :: R.Component SubTreeParamsIn
 moveNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.moveNode" cpt
   where
-    cpt p@{dispatch, subTreeParams, id, nodeType, session} _ = do
+    cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (MoveNode {params: Nothing})
 
       let button = case valAction of
@@ -39,5 +39,6 @@ moveNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.moveNode" cpt
                                  , nodeType
                                  , session
                                  , subTreeParams
+                                 , handed
                                  }
               ] button

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

@@ -57,7 +57,7 @@ shareNode p = R.createElement shareNodeCpt p []
 shareNodeCpt :: R.Component SubTreeParamsIn
 shareNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.shareNode" cpt
   where
-    cpt p@{dispatch, subTreeParams, id, nodeType, session} _ = do
+    cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (Action.SharePublic {params: Nothing})
 
       let button = case valAction of
@@ -67,11 +67,12 @@ shareNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.shareNode" cpt
               _   -> H.div {} []
 
       pure $ Tools.panel [ subTreeView { action
-                                 , dispatch
-                                 , id
-                                 , nodeType
-                                 , session
-                                 , subTreeParams
-                                 }
+                                       , dispatch
+                                       , id
+                                       , nodeType
+                                       , session
+                                       , subTreeParams
+                                       , handed
+                                       }
               ] button
 

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

@@ -17,7 +17,7 @@ import React.SyntheticEvent     as E
 import Reactix                  as R
 import Reactix.DOM.HTML         as H
 import URI.Extra.QueryPairs     as QP
-import Web.File.Blob (Blob)
+-- import Web.File.Blob (Blob)
 import Web.File.FileReader.Aff (readAsDataURL, readAsText)
 
 import Gargantext.Prelude
@@ -31,7 +31,6 @@ import Gargantext.Sessions (Session, postWwwUrlencoded)
 import Gargantext.Types (NodeType(..), ID)
 import Gargantext.Types         as GT
 import Gargantext.Utils.Reactix as R2
-import Gargantext.Utils.String as GUS
 
 -- UploadFile Action
 

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

@@ -2,7 +2,6 @@ module Gargantext.Components.Forest.Tree.Node.Box where
 
 import Data.Array as A
 import Data.Maybe (Maybe(..))
-import Data.String as S
 import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
 import DOM.Simple.Console (log2)
@@ -29,7 +28,7 @@ import Gargantext.Components.Forest.Tree.Node.Action.Merge (mergeNode)
 import Gargantext.Components.Forest.Tree.Node.Box.Types (NodePopupProps, NodePopupS)
 import Gargantext.Components.Forest.Tree.Node.Settings (NodeAction(..), SettingsBox(..), glyphiconNodeAction, settingsBox)
 import Gargantext.Components.Forest.Tree.Node.Status (Status(..), hasStatus)
-import Gargantext.Components.Forest.Tree.Node.Tools (textInputBox, fragmentPT)
+import Gargantext.Components.Forest.Tree.Node.Tools (textInputBox, fragmentPT, prettyNodeType)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (Name, ID)
 import Gargantext.Types as GT
@@ -74,9 +73,7 @@ nodePopupCpt = R.hooksComponent "G.C.F.T.N.B.nodePopupView" cpt
             [ H.div { className : "col-md-10 flex-between"}
                 [ H.h3 { className: GT.fldr p.nodeType true} []
                 -- TODO fix names
-                , H.text $ S.replace (S.Pattern "Node")   (S.Replacement " ") 
-                         $ S.replace (S.Pattern "Folder") (S.Replacement " ")
-                         $ show p.nodeType
+                , H.text $ prettyNodeType p.nodeType
                 , H.p {className: "text-primary center"} [H.text p.name]
                 ]
               ]
@@ -183,6 +180,7 @@ nodePopupCpt = R.hooksComponent "G.C.F.T.N.B.nodePopupView" cpt
                         , nodePopup: Just NodePopup
                         , nodeType : props.nodeType
                         , session  : props.session
+                        , handed   : props.handed
                         }
 
 type ActionState =
@@ -255,6 +253,7 @@ type PanelActionProps =
   , nodePopup :: Maybe NodePopup
   , nodeType  :: GT.NodeType
   , session   :: Session
+  , handed    :: GT.Handed
   )
 
 panelAction :: Record PanelActionProps -> R.Element
@@ -278,14 +277,14 @@ panelActionCpt = R.hooksComponent "G.C.F.T.N.B.panelAction" cpt
 
 -----------
     -- Functions using SubTree
-    cpt {action: Merge {subTreeParams}, dispatch, id, nodeType, session} _ = do
-      pure $ mergeNode {dispatch, id, nodeType, session, subTreeParams}
+    cpt {action: Merge {subTreeParams}, dispatch, id, nodeType, session, handed} _ = do
+      pure $ mergeNode {dispatch, id, nodeType, session, subTreeParams, handed}
 
-    cpt {action: Move {subTreeParams}, dispatch, id, nodeType, session} _ = do
-      pure $ moveNode {dispatch, id, nodeType, session, subTreeParams}
+    cpt {action: Move {subTreeParams}, dispatch, id, nodeType, session, handed} _ = do
+      pure $ moveNode {dispatch, id, nodeType, session, subTreeParams, handed}
 
-    cpt {action: Link {subTreeParams}, dispatch, id, nodeType, session} _ = do
-      pure $ linkNode {dispatch, id, nodeType, session, subTreeParams}
+    cpt {action: Link {subTreeParams}, dispatch, id, nodeType, session, handed} _ = do
+      pure $ linkNode {dispatch, id, nodeType, session, subTreeParams, handed}
 -----------
 
     cpt {action : Share, dispatch, id, name } _ = do
@@ -311,8 +310,8 @@ panelActionCpt = R.hooksComponent "G.C.F.T.N.B.panelAction" cpt
 
 
 
-    cpt {action : Publish {subTreeParams}, dispatch, id, nodeType, session } _ = do
-      pure $ Share.shareNode {dispatch, id, nodeType, session, subTreeParams}
+    cpt {action : Publish {subTreeParams}, dispatch, id, nodeType, session, handed} _ = do
+      pure $ Share.shareNode {dispatch, id, nodeType, session, subTreeParams, handed}
 
 
     cpt props@{action: SearchBox, id, session, dispatch, nodePopup} _ =

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

@@ -14,6 +14,7 @@ import Gargantext.Types as GT
 type CommonProps =
   ( dispatch :: Action -> Aff Unit
   , session :: Session
+  , handed  :: GT.Handed
   )
 
 type NodePopupProps =

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

 module Gargantext.Components.Forest.Tree.Node.Tools 
   where
 
-import Data.Maybe (fromMaybe)
+import Data.Maybe (fromMaybe, Maybe(..))
+import Data.Nullable (null)
 import Data.Set (Set)
 import Data.Set as Set
 import Data.String as S
+import Data.String.CodeUnits as DSCU
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff, launchAff_)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
+import Gargantext.Prelude
+
 import Gargantext.Components.Forest.Tree.Node.Action
 import Gargantext.Components.InputWithEnter (inputWithEnter)
-import Gargantext.Prelude (Unit, bind, const, discard, pure, show, ($), (<<<), (<>), read, map, class Read, class Show, not, class Ord)
+import Gargantext.Ends (Frontends, url)
+import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types (ID, Name)
+import Gargantext.Types as GT
 import Gargantext.Utils (toggleSet)
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.ReactTooltip as ReactTooltip
 
 ------------------------------------------------------------------------
 
@@ -252,26 +259,84 @@ checkboxes xs (val /\ set) =
                   ) xs
 
 
+prettyNodeType :: GT.NodeType -> String
+prettyNodeType nt = S.replace (S.Pattern "Node")   (S.Replacement " ")
+                  $ S.replace (S.Pattern "Folder") (S.Replacement " ")
+                  $ show nt
+
+
+-- START node link
+type NodeLinkProps = (
+    frontends :: Frontends
+  , id :: Int
+  , isSelected :: Boolean
+  , name :: Name
+  , nodeType :: GT.NodeType
+  , session :: Session
+  , handed :: GT.Handed
+  )
+
+nodeLink :: Record NodeLinkProps -> R.Element
+nodeLink p = R.createElement nodeLinkCpt p []
+
+nodeLinkCpt :: R.Component NodeLinkProps
+nodeLinkCpt = R.hooksComponent "G.C.F.T.N.T.nodeLink" cpt
+  where
+    cpt { frontends, id, isSelected, name, nodeType, session, handed} _ = do
+      popoverRef <- R.useRef null
+
+      pure $
+        H.div {} [ H.a { data: { for: tooltipId, tip: true }
+                 , href: url frontends $ GT.NodePath (sessionId session) nodeType (Just id) }
+                                       [ nodeText { isSelected
+                                                  , name
+                                                  , handed
+                                                  }
+                                       ]
+                 , ReactTooltip.reactTooltip { id: tooltipId }
+                                             [ R2.row [ H.h4 {className: GT.fldr nodeType true}
+                                                             [ H.text $ prettyNodeType nodeType ]
+                                                      ]
+                                             , R2.row [ H.span {} [ H.text $ name ]]
+                                             ]
+                 ]
+
+      where
+        tooltipId = "node-link-" <> show id
+-- END node link
+
+
 -- START node text
 type NodeTextProps =
   ( isSelected :: Boolean
   , name       :: Name
+  , handed     :: GT.Handed
   )
 
 nodeText :: Record NodeTextProps -> R.Element
 nodeText p = R.createElement nodeTextCpt p []
 
 nodeTextCpt :: R.Component NodeTextProps
-nodeTextCpt = R.hooksComponent "G.C.F.T.N.B.nodeText" cpt
+nodeTextCpt = R.hooksComponent "G.C.F.T.N.T.nodeText" cpt
   where
     cpt { isSelected: true, name } _ = do
       pure $ H.u {} [
         H.b {} [
-           H.text ("| " <> name <> " |    ")
+           H.text ("| " <> name15 name <> " |    ")
          ]
         ]
-    cpt {isSelected: false, name} _ = do
-      pure $ H.text (name <> "    ")
+    cpt {isSelected: false, name, handed} _ = do
+      pure $ if handed == GT.RightHanded
+                then H.text "..." <> H.text (name15 name)
+                else H.text (name15 name) <> H.text "..."
+
+    name len n = if S.length n < len then
+                 n
+               else
+                 case (DSCU.slice 0 len n) of
+                   Nothing -> "???"
+                   Just s  -> s <> "..."
+    name15 = name 15
 -- END node text
 
 ------------------------------------------------------------------------

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

@@ -10,7 +10,7 @@ import Gargantext.Components.Forest.Tree.Node.Tools.SubTree.Types (SubTreeParams
 import Gargantext.Components.Forest.Tree.Node.Tools.FTree (FTree, LNode(..), NTree(..))
 import Gargantext.Components.Forest.Tree.Node.Tools (nodeText)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Prelude (map, pure, show, ($), (&&), (/=), (<>), const, (==){-, discard, bind, void-})
+import Gargantext.Prelude (map, pure, show, ($), (&&), (/=), (<>), const, (==), identity{-, discard, bind, void-})
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session(..), get)
 import Gargantext.Types as GT
@@ -19,6 +19,7 @@ import Reactix.DOM.HTML as H
 
 type SubTreeParamsIn =
   ( subTreeParams :: SubTreeParams
+  , handed    :: GT.Handed
   | Props
   )
 
@@ -40,6 +41,7 @@ subTreeViewCpt = R.hooksComponent "G.C.F.T.N.A.U.subTreeView" cpt
                , session
                , subTreeParams
                , action
+               , handed
                } _ =
       do
         let
@@ -56,6 +58,7 @@ subTreeViewCpt = R.hooksComponent "G.C.F.T.N.A.U.subTreeView" cpt
                               , tree
                               , subTreeParams
                               , action
+                              , handed
                               }
 
 loadSubTree :: Array GT.NodeType -> Session -> Aff FTree
@@ -80,12 +83,13 @@ subTreeViewLoaded props = R.createElement subTreeViewLoadedCpt props []
 subTreeViewLoadedCpt :: R.Component CorpusTreeProps
 subTreeViewLoadedCpt = R.hooksComponent "G.C.F.T.N.A.U.subTreeViewLoadedCpt" cpt
   where
-    cpt p@{dispatch, id, nodeType, session, tree} _ = do
-      pure $ H.div {className:"panel panel-primary"}
-                   [H.div { className: "copy-from-corpus" }
-                          [ H.div { className: "tree" }
-                                  [subTreeTreeView p]
-                          ]
+    cpt p@{dispatch, id, nodeType, session, tree, handed} _ = do
+      pure $ H.div {className:"tree"}
+                   [H.div { className: if handed == GT.RightHanded
+                                         then "righthanded"
+                                         else "lefthanded"
+                          }
+                          [ subTreeTreeView p ]
                    ]
 
 subTreeTreeView :: Record CorpusTreeProps -> R.Element
@@ -103,22 +107,35 @@ subTreeTreeViewCpt = R.hooksComponent "G.C.F.T.N.A.U.subTreeTreeViewCpt" cpt
           , subTreeParams
           , dispatch
           , action
+          , handed
           } _ = do
-            pure $ H.div {} [ H.div { className: "node " <> GT.fldr nodeType true} 
-                                    ( [ H.span { className: "name " <> clickable
-                                               , on: { click: onClick }
-                                               } [ nodeText { isSelected: isSelected targetId valAction
-                                                            , name: " " <> name
-                                                            }
-                                                 ]
-
-                                    ] <> children
-                                  )
-                       ]
+            let ordering =
+                  case handed of
+                    GT.LeftHanded  -> A.reverse
+                    GT.RightHanded -> identity
+
+            pure $ H.div {} $ (ordering [ H.div { className: "node " <> GT.fldr nodeType true} []
+                                        , H.span { style : if validNodeType
+                                                                    then { color : "blue"
+                                                                         , "text-decoration": "underline"
+                                                                         }
+                                                                    else { color : ""
+                                                                         , "text-decoration": "none"
+                                                                         }
+                                                        , on: { click: onClick }
+                                                        }
+                                                        [ nodeText { isSelected: isSelected targetId valAction
+                                                                               , name: " " <> name
+                                                                               , handed
+                                                                               }
+                                                        ]
+                                       ]
+                            )
+                            <> children
       where
 
         SubTreeParams { valitypes } = subTreeParams
-        
+
         sortedAry = A.sortWith (\(NTree (LNode {id:id'}) _) -> id')
                   $ A.filter (\(NTree (LNode {id:id'}) _) -> id'/= id) ary
 

src/Gargantext/Utils/ReactTooltip.js

+'use strict';
+
+const reactTooltip = require('react-tooltip');
+
+if (typeof window !== 'undefined') {
+    window.ReactTooltip = reactTooltip;
+}
+
+exports.reactTooltipCpt = reactTooltip;

src/Gargantext/Utils/ReactTooltip.purs

+module Gargantext.Utils.ReactTooltip where
+
+import Data.Maybe (maybe)
+import Data.Nullable (Nullable, toMaybe)
+import DOM.Simple as DOM
+import Effect (Effect)
+import Effect.Uncurried (EffectFn2, runEffectFn2)
+import Reactix as R
+
+import Gargantext.Prelude
+
+type Props =
+  (
+    id :: String
+  )
+
+foreign import reactTooltipCpt :: R.Component Props
+
+reactTooltip :: Record Props -> Array R.Element -> R.Element
+reactTooltip = R.rawCreateElement reactTooltipCpt

yarn.lock

@@ -2409,7 +2409,7 @@ prop-types@15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.6.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -2642,6 +2642,14 @@ react-testing-library@^6.1.2:
     "@babel/runtime" "^7.4.2"
     dom-testing-library "^3.19.0"
 
+react-tooltip@^4.2.8:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.8.tgz#270858fee46fab73b66de316271aa94145f7446b"
+  integrity sha512-pDWa0/khTAgIfldp95tHgyuYyBhWNlfaU2LF9ubAKxpoqNe15uyf+uLlnhK/Lstb6FU8E8/SL28Wp6oEO9xw3g==
+  dependencies:
+    prop-types "^15.7.2"
+    uuid "^7.0.3"
+
 react@^16.10:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
@@ -3444,6 +3452,11 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"