[tree] trim node names, add hover tooltip

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"
     },

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

@@ -20,7 +20,7 @@ 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)
@@ -80,10 +80,12 @@ 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
-                         } ]
+        , nodeLink { frontends
+                   , id
+                   , isSelected: mCurrentRoute == Routes.nodeTypeAppRoute nodeType (sessionId session) id
+                   , name: name' props
+                   , nodeType
+                   , session }
         , nodeActions { id
                       , nodeType
                       , refreshTree: const $ dispatch RefreshTree

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

@@ -29,7 +29,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 +74,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]
                 ]
               ]

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,6 +259,53 @@ 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
+  )
+
+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 } _ = 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
+                       } ]
+        , ReactTooltip.reactTooltip { id: tooltipId } [
+            R2.row [
+               H.h4 {} [ 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
@@ -262,16 +316,24 @@ 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 <> "    ")
+      pure $ H.text (name15 name <> "    ")
+
+    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/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

@@ -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"