[tree] disable graph node when version is empty

I.e. when graph is not recomputed.

Also, added missing test/Utils.purs

dist/styles/sass.css

@@ -367,9 +367,12 @@ li .leaf .folder-icon {
   padding: 0 2 0 2;
   cursor: pointer;
 }
-li .leaf .node-link {
+li .leaf .node-link a {
   cursor: pointer;
 }
+li .leaf .node-link > .node-text {
+  color: #000000;
+}
 li .leaf a.settings {
   cursor: pointer;
   display: block;
@@ -638,7 +641,6 @@ li .leaf:hover a.settings {
   cursor: pointer;
 }
 #page-wrapper .side-panel {
-  background-color: white;
   left: 70%;
   padding: 5px;
   position: fixed;

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC3IA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAGF;EACE;;;AAEJ;EACE;EACA;;;AChFF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBALyB;;AAiC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBALyB;;AA2C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC9IA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EAEE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAGF;EACE;;;AAEJ;EACE;EACA;;;AChFF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBALyB;;AAiC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBALyB;;AA2C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
\ No newline at end of file

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

@@ -8,6 +8,7 @@ import Data.String as S
 import Data.String.CodeUnits as DSCU
 import Data.Tuple (snd)
 import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log2)
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff, launchAff_)
 import Reactix as R
@@ -18,8 +19,9 @@ import Gargantext.Prelude
 import Gargantext.Components.Forest.Tree.Node.Action
 import Gargantext.Components.InputWithEnter (inputWithEnter)
 import Gargantext.Ends (Frontends, url)
+import Gargantext.Components.GraphExplorer.API as GraphAPI
+import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Sessions (Session, sessionId)
-import Gargantext.Types (ID, Name)
 import Gargantext.Types as GT
 import Gargantext.Utils (glyphicon, toggleSet)
 import Gargantext.Utils.Reactix as R2
@@ -56,7 +58,7 @@ panel bodies submit =
 ------------------------------------------------------------------------
 -- | START Text input
 type TextInputBoxProps =
-  ( id       :: ID
+  ( id       :: GT.ID
   , dispatch :: Action -> Aff Unit
   , text     :: String
   , isOpen   :: R.State Boolean
@@ -271,17 +273,20 @@ checkboxesListGroup xs (val /\ set) =
       ) xs
 
 
+tooltipId :: GT.NodeID -> String
+tooltipId id = "node-link-" <> show id
 
 -- START node link
+
 type NodeLinkProps = (
     frontends  :: Frontends
-  , id         :: Int
+  , id         :: GT.NodeID
   , folderOpen :: R.State Boolean
+  , handed     :: GT.Handed
   , isSelected :: Boolean
-  , name       :: Name
+  , name       :: GT.Name
   , nodeType   :: GT.NodeType
   , session    :: Session
-  , handed     :: GT.Handed
   )
 
 nodeLink :: R2.Component NodeLinkProps
@@ -304,22 +309,15 @@ nodeLinkCpt = R.hooksComponentWithModule thisModule "nodeLink" cpt
       pure $
         H.div { className: "node-link"
               , on: { click: onClick } }
-              [ 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 $ GT.prettyNodeType nodeType ]
-                                                          ]
-                                                 , R2.row [ H.span {} [ H.text $ name ]]
-                                                 ]
+          [ nodeLinkHref { frontends, handed, id, isSelected, name, nodeType, session } []
+          , ReactTooltip.reactTooltip { id: tooltipId id }
+              [ R2.row
+                  [ H.h4 {className: GT.fldr nodeType true}
+                      [ H.text $ GT.prettyNodeType nodeType ]
+                  ]
+              , R2.row [ H.span {} [ H.text $ name ]]
               ]
+          ]
 
       where
         -- NOTE Don't toggle tree if it is not selected
@@ -329,33 +327,82 @@ nodeLinkCpt = R.hooksComponentWithModule thisModule "nodeLink" cpt
                       setFolderOpen (const true)
                     else
                       setFolderOpen (const true)
-        tooltipId = "node-link-" <> show id
 -- END node link
 
+-- START node link href
+type NodeLinkHrefProps = (
+    frontends  :: Frontends
+  , handed     :: GT.Handed
+  , id         :: GT.NodeID
+  , isSelected :: Boolean
+  , name       :: GT.Name
+  , nodeType   :: GT.NodeType
+  , session    :: Session
+  )
+
+nodeLinkHref :: R2.Component NodeLinkHrefProps
+nodeLinkHref = R.createElement nodeLinkHrefCpt
+
+nodeLinkHrefCpt :: R.Component NodeLinkHrefProps
+nodeLinkHrefCpt = R.hooksComponentWithModule thisModule "nodeLinkHref" cpt
+  where
+    cpt { frontends
+        , handed
+        , id
+        , isSelected
+        , name
+        , nodeType: nodeType@GT.Graph
+        , session } _ = do
+
+      useLoader id (graphVersions session) renderElement
+
+      where
+        renderElement { gv_graph: Nothing } = nodeText { isSelected, handed, name } []
+        renderElement _ = H.a { data: { for: tooltipId id
+                                      , tip: true
+                                      }
+                              , href: url frontends $ GT.NodePath (sessionId session) nodeType (Just id) }
+                            [ nodeText { isSelected, handed, name} [] ]
+
+    cpt { frontends
+        , handed
+        , id
+        , isSelected
+        , name
+        , nodeType
+        , session } _ = do
+      pure $ H.a { data: { for: tooltipId id
+                         , tip: true
+                         }
+                 , href: url frontends $ GT.NodePath (sessionId session) nodeType (Just id) }
+        [ nodeText { isSelected, handed, name} [] ]
+
+    graphVersions session graphId = GraphAPI.graphVersions { graphId, session }
+
 
 -- START node text
 type NodeTextProps =
   ( isSelected :: Boolean
-  , name       :: Name
   , handed     :: GT.Handed
+  , name       :: GT.Name
   )
 
-nodeText :: Record NodeTextProps -> R.Element
-nodeText p = R.createElement nodeTextCpt p []
+nodeText :: R2.Component NodeTextProps
+nodeText = R.createElement nodeTextCpt
 
 nodeTextCpt :: R.Component NodeTextProps
 nodeTextCpt = R.hooksComponentWithModule thisModule "nodeText" cpt
   where
     cpt { isSelected: true, name } _ = do
-      pure $ H.u {} [
+      pure $ H.u { className } [
         H.b {} [
            H.text ("| " <> name15 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 "..."
+                then H.span { className } [ H.text "..." <> H.text (name15 name) ]
+                else H.span { className} [ H.text (name15 name) <> H.text "..." ]
 
     name len n = if S.length n < len then
                  n
@@ -364,6 +411,7 @@ nodeTextCpt = R.hooksComponentWithModule thisModule "nodeText" cpt
                    Nothing -> "???"
                    Just s  -> s <> "..."
     name15 = name 15
+    className = "node-text"
 -- END node text
 
 ------------------------------------------------------------------------

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

@@ -127,7 +127,7 @@ subTreeTreeViewCpt = R.hooksComponentWithModule thisModule "subTreeTreeViewCpt"
                   nodeText { isSelected: isSelected targetId valAction
                            , name: " " <> name
                            , handed
-                           }
+                           } []
                 , H.span { className: "children" } children
                 ]
               ]

src/sass/_styles.sass

@@ -2,7 +2,7 @@
   .cache-toggle
     cursor: pointer
   .side-panel
-    background-color: white
+    //background-color: $dark
     left: 70%
     padding: 5px
     position: fixed

src/sass/_tree.sass

@@ -12,7 +12,10 @@ li
       cursor: pointer
 
     .node-link
-      cursor: pointer
+      a
+        cursor: pointer
+      & > .node-text
+        color: #000000
 
     a.settings
       cursor: pointer

test/Utils.purs

+module Test.Utils where
+
+import Prelude
+
+import Control.Monad.Error.Class (class MonadThrow)
+import Data.Array as A
+import Data.Maybe (Maybe(..))
+import Data.Tuple (Tuple(..))
+import Effect.Exception (Error)
+import Test.Spec.Assertions (fail)
+
+-- | This function can be used to compare arrays, it reports the diff in more
+-- | detail which can be useful when debuggnign tests
+shouldEqualArray
+  :: forall m t
+   . MonadThrow Error m
+  => Show t
+  => Eq t
+  => Array t
+  -> Array t
+  -> m Unit
+shouldEqualArray v1 v2 =
+  when (v1 /= v2) $
+    fail $ show v1 <> " ≠ " <> show v2 <> diff
+  where
+    diffs = A.filter (\(Tuple a b) -> a /= b) $ A.zip v1 v2
+    diff = case A.head diffs of
+      Nothing -> ""
+      Just (Tuple a1 a2) -> " (first differing element: " <> (show a1 <> " ≠ " <> show a2) <> ")"