[subtree] Fold subtree node by default

* #308: second iteration
* resolve UI left/right placement

dist/styles/sass.css

@@ -441,6 +441,63 @@ li .leaf:hover a.settings {
   text-decoration: underline;
 }
 
+.subtree__node {
+  margin-top: 2px;
+}
+.subtree__node__text {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 15px;
+}
+.subtree__node__icons {
+  display: flex;
+}
+.subtree__node__icons .fa {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.subtree__node--can-be-selected {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.right-handed .subtree__node__text {
+  flex-direction: row;
+  text-align: left;
+}
+.right-handed .subtree__node__icons {
+  flex-direction: row;
+}
+.right-handed .subtree__node__children > .subtree__node {
+  padding-left: 16px;
+}
+
+.left-handed .subtree__node__text {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+.left-handed .subtree__node__icons {
+  flex-direction: row-reverse;
+}
+.left-handed .subtree__node__children > .subtree__node {
+  padding-right: 20px;
+}
+
+.node-text {
+  display: inline-flex;
+}
+.node-text--selected {
+  font-weight: bold;
+  text-decoration: underline;
+}
+.right-handed .node-text {
+  flex-direction: row;
+}
+
+.left-handed .node-text {
+  flex-direction: row-reverse;
+}
+
 .progress-pie {
   background: rgba(51, 122, 183, 0.1);
   border-radius: 100%;

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/abstract/_members.scss","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;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;;;AAME;EACE;;;AC9DN;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;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAEJ;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;;;AC1GF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;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;;;AAEN;EAWE;EAGA;EACA,eAvLkB;;AAyLlB;EACE;EACA;;ACxJO;EDqKP;EACA,MAFW;EAGX;;;AChLO;EDoLP;EACA,OAFW;EAGX;;;AAGA;EACE;;AAEA;EACE;;AAGJ;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;;AAEA;EAGE;EACA,WAzOa;EA4Ob;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEN;EACE;EACA;EACA;EACA;;AAEJ;EAEE;EACA;;;AAEJ;EAEE;EACA;;;AAEF;EAGE;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EAGE;;ACpQS;ED5BP;EACA;;;ACkBO;EDfP;EACA;;;ACuBO;EDuQP;;AAEA;EACE;;;ACnRK;EDsRP;;AAEA;EACE;;;AAON;EAIE;EAEA;EACA;EACA;EACA,QApUmC;EAqUnC;;ACjSS;EDqSP;;;AC9SO;EDiTP;;;AAEJ;EAGE;EAEA;EACA;EACA;EACA,QAvVgC;EAwVhC;;ACnTS;EDuTP;;;AChUO;EDmUP;;;AAKF;EAIE;EACA;;ACpUO;ED5BP;EACA;;;ACkBO;EDfP;EACA;;;AA6VA;EACE,eA3W+B;;;AEsBjC;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;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;AAEV;EACE;;AAEA;EACE;;;AC9FN;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;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;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;AAGJ;EAKE;;AAEA;EACE;;AAIE;EACE;;AACF;EACE;;AAEJ;EAGE;;AAGJ;EACE,SAtBa;EAuBb;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAKN;EACE;;AFhIO;EEmIL;;;AF5IK;EE+IL;;;AAEJ;EACE,SAZa;;;ACpKjB;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,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACNxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","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/abstract/_members.scss","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;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;;;AAME;EACE;;;AC9DN;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;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAEJ;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;;;AC1GF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;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;;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEA;EACE;EACA;;AAEJ;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAGR;EACE;;AAEA;EACE;EACA;;ACrJO;EDwJP;;;ACjKO;EDoKP;;;AAKJ;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;;;AAEN;EAWE;EAGA;EACA,eAvPkB;;AAyPlB;EACE;EACA;;ACxNO;EDqOP;EACA,MAFW;EAGX;;;AChPO;EDoPP;EACA,OAFW;EAGX;;;AAGA;EACE;;AAEA;EACE;;AAGJ;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;;AAEA;EAGE;EACA,WAzSa;EA4Sb;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEN;EACE;EACA;EACA;EACA;;AAEJ;EAEE;EACA;;;AAEJ;EAEE;EACA;;;AAEF;EAGE;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EAGE;;ACpUS;ED5BP;EACA;;;ACkBO;EDfP;EACA;;;ACuBO;EDuUP;;AAEA;EACE;;;ACnVK;EDsVP;;AAEA;EACE;;;AAON;EAIE;EAEA;EACA;EACA;EACA,QApYmC;EAqYnC;;ACjWS;EDqWP;;;AC9WO;EDiXP;;;AAEJ;EAGE;EAEA;EACA;EACA;EACA,QAvZgC;EAwZhC;;ACnXS;EDuXP;;;AChYO;EDmYP;;;AAKF;EAIE;EACA;;ACpYO;ED5BP;EACA;;;ACkBO;EDfP;EACA;;;AA6ZA;EACE,eA3a+B;;;AEsBjC;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;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;AAEV;EACE;;AAEA;EACE;;;AC9FN;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;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;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;AAGJ;EAKE;;AAEA;EACE;;AAIE;EACE;;AACF;EACE;;AAEJ;EAGE;;AAGJ;EACE,SAtBa;EAuBb;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAKN;EACE;;AFhIO;EEmIL;;;AF5IK;EE+IL;;;AAEJ;EACE,SAZa;;;ACpKjB;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,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACNxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file

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

@@ -5,10 +5,6 @@ import Gargantext.Prelude
 import Data.Either (Either)
 import Data.Maybe (Maybe(..))
 import Effect.Aff (Aff)
-import Reactix as R
-import Reactix.DOM.HTML as H
-import Toestand as T
-
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, panel)
 import Gargantext.Components.Forest.Tree.Node.Tools.SubTree (subTreeView, SubTreeParamsIn)
@@ -17,6 +13,9 @@ import Gargantext.Routes (SessionRoute(..))
 import Gargantext.Sessions (Session, put_)
 import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Action.Move"

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

 module Gargantext.Components.Forest.Tree.Node.Tools where
 
+import Data.Foldable (intercalate)
 import Data.Maybe (fromMaybe, Maybe(..))
-import Data.Nullable (null)
 import Data.Set (Set)
 import Data.Set as Set
 import Data.String as S
@@ -15,7 +15,7 @@ import Gargantext.Ends (Frontends, url)
 import Gargantext.Prelude (class Ord, class Read, class Show, Unit, bind, const, discard, map, not, pure, read, show, when, mempty, ($), (<), (<<<), (<>), (<$>), (<*>))
 import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types as GT
-import Gargantext.Utils (toggleSet)
+import Gargantext.Utils (toggleSet, (?))
 import Gargantext.Utils.Glyphicon (glyphicon)
 import Gargantext.Utils.ReactTooltip as ReactTooltip
 import Gargantext.Utils.Reactix as R2
@@ -269,7 +269,7 @@ nodeLink = R.createElement nodeLinkCpt
 nodeLinkCpt :: R.Component NodeLinkProps
 nodeLinkCpt = here.component "nodeLink" cpt
   where
-    cpt { boxes: { handed }
+    cpt { boxes
         , folderOpen
         , frontends
         , id
@@ -278,13 +278,12 @@ nodeLinkCpt = here.component "nodeLink" cpt
         , nodeType
         , session
         } _ = do
-      popoverRef <- R.useRef null
 
       pure $
         H.div { className: "node-link"
               , on: { click } }
           [ H.a { href, data: { for: tooltipId id, tip: true } }
-            [ nodeText { handed, isSelected, name } []
+            [ nodeText { isSelected, name }
             , ReactTooltip.reactTooltip { effect: "float", id: tooltipId id, type: "dark" }
                 [ R2.row
                     [ H.h4 {className: GT.fldr nodeType true}
@@ -305,29 +304,45 @@ nodeLinkCpt = here.component "nodeLink" cpt
 
 type NodeTextProps =
   ( isSelected :: Boolean
-  , handed     :: T.Box GT.Handed
   , name       :: GT.Name
   )
 
-nodeText :: R2.Component NodeTextProps
-nodeText = R.createElement nodeTextCpt
-nodeTextCpt :: R.Component NodeTextProps
-nodeTextCpt = here.component "nodeText" cpt where
-  cpt { isSelected, handed, name } _ = do
-    handed' <- T.useLive T.unequal handed
-    pure $ if isSelected then
-              H.u { className }
-                [ H.b {}
-                  [ H.text ("| " <> name15 name <> " |    ") ]
-                ]
-              else
-                GT.flipHanded l r handed' where
-                  l = H.text "..."
-                  r = 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
-  className = "node-text"
+nodeText :: R2.Leaf NodeTextProps
+nodeText p = R.createElement nodeTextCpt p []
+nodeTextCpt :: R.Memo NodeTextProps
+nodeTextCpt = R.memo' $ here.component "nodeText" cpt where
+  cpt props@{ isSelected } _ = do
+    -- Computed
+    let
+
+      className = intercalate " "
+        [ "node-text"
+        , isSelected ? "node-text--selected" $ ""
+        ]
+
+      prefix = isSelected ?
+        "" $
+        "..."
+
+      name = isSelected ?
+        "| " <> (textEllipsisBreak 15 props.name) <> " |    " $
+        textEllipsisBreak 15 props.name
+
+    -- Render
+    pure $
+
+      H.span { className }
+      [
+        H.span {}
+        [ H.text prefix ]
+      ,
+        H.span {}
+        [ H.text name ]
+      ]
+
+textEllipsisBreak :: Int -> String -> String
+textEllipsisBreak len n =
+  if S.length n < len then n
+  else case (DSCU.slice 0 len n) of
+    Nothing -> "???"
+    Just s  -> s <> "..."

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

@@ -2,9 +2,12 @@ module Gargantext.Components.Forest.Tree.Node.Tools.SubTree where
 
 import Gargantext.Prelude
 
+import Data.Array (length)
 import Data.Array as A
 import Data.Either (Either)
+import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..))
+import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Forest.Tree.Node.Action (Props, Action, subTreeOut, setTreeOut)
@@ -16,8 +19,9 @@ import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session(..), get)
 import Gargantext.Types as GT
+import Gargantext.Utils ((?))
+import Gargantext.Utils.Reactix (if', useBox', useLive')
 import Gargantext.Utils.Reactix as R2
-import React.SyntheticEvent as E
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Record as Record
@@ -91,63 +95,94 @@ type CorpusTreeProps =
 subTreeViewLoaded :: R2.Component CorpusTreeProps
 subTreeViewLoaded = R.createElement subTreeViewLoadedCpt
 subTreeViewLoadedCpt :: R.Component CorpusTreeProps
-subTreeViewLoadedCpt = here.component "subTreeViewLoaded" cpt
-  where
-    cpt p@{ boxes: { handed } } _ = do
-      handed' <- T.useLive T.unequal handed
-      let pRender = Record.merge { render: subTreeTreeView } p
-
-      pure $ H.div {className:"tree"}
-        [ H.div { className: if handed' == GT.RightHanded
-                             then "righthanded"
-                             else "lefthanded"
-                }
-          [ subTreeTreeView (CorpusTreeRenderProps pRender) [] ]
-        ]
+subTreeViewLoadedCpt = here.component "subTreeViewLoaded" cpt where
+  cpt props _ = do
+
+    let pRender = Record.merge { render: subTreeTreeView } props
+
+    pure $
+
+      H.div { className: "subtree" }
+      [ subTreeTreeView (CorpusTreeRenderProps pRender) [] ]
 
 newtype CorpusTreeRenderProps = CorpusTreeRenderProps
   { render :: CorpusTreeRenderProps -> Array R.Element -> R.Element
-  | CorpusTreeProps }
+  | CorpusTreeProps
+  }
 
 subTreeTreeView :: CorpusTreeRenderProps -> Array R.Element -> R.Element
 subTreeTreeView = R2.ntCreateElement subTreeTreeViewCpt
 subTreeTreeViewCpt :: R2.NTComponent CorpusTreeRenderProps
 subTreeTreeViewCpt = here.ntComponent "subTreeTreeView" cpt where
-  cpt (CorpusTreeRenderProps p@{ action
-                               , boxes: { handed }
-                               , id
+  cpt (CorpusTreeRenderProps p@{ id
                                , render
                                , subTreeParams
                                , tree: NTree (LNode { id: targetId, name, nodeType }) ary }) _ = do
-    action' <- T.useLive T.unequal action
-    handed' <- T.useLive T.unequal handed
-
-    let click e = do
-          let action'' = if not validNodeType then Nothing else Just $ SubTreeOut { in: id, out: targetId }
-          E.preventDefault  e
-          E.stopPropagation e
-          T.modify_ (\a -> setTreeOut a action'') action
+    -- Hooks
+    action <- useLive' p.action
+    isExpanded /\ isExpandedBox <- useBox' false
+    -- Computed
+    let
+        expandCbk _ = T.modify_ not isExpandedBox
+
+        selectCbk _ = do
+          params <- pure $
+            if validNodeType
+            then Just $ SubTreeOut { in: id, out: targetId }
+            else Nothing
+          T.modify_ (\a -> setTreeOut a params) p.action
 
         children = (map (\ctree -> render (CorpusTreeRenderProps (p { tree = ctree })) []) sortedAry) :: Array R.Element
 
-    pure $ H.div {} $ GT.reverseHanded handed'
-      [ H.div { className: nodeClass validNodeType }
-        [ H.span { className: "text"
-                 , on: { click } }
-          [ nodeText { handed
-                     , isSelected: isSelected targetId action'
-                     , name: " " <> name } []
-          , H.span { className: "children" } children
+        hasChild = length children > 0
+
+    -- Render
+    pure $
+
+      H.div
+      { className: intercalate " "
+          [ "subtree__node"
+          , validNodeType ? "subtree__node--can-be-selected" $ ""
+          ]
+      }
+      [
+          H.div
+          { className: "subtree__node__text" }
+          [
+            H.div
+            { className: "subtree__node__icons"
+            , on: { click: expandCbk }
+            }
+            [
+              H.span { className: GT.fldr nodeType true } []
+            ,
+              if' hasChild $
+
+                if isExpanded then
+                  H.span { className: "fa fa-chevron-down" } []
+                else
+                  H.span { className: "fa fa-chevron-right" } []
+            ]
+          ,
+            H.div
+            { on: { click: selectCbk } }
+            [
+              nodeText
+              { isSelected: isSelected targetId action
+              , name
+              }
+            ]
           ]
-        ]
+      ,
+        if' (hasChild && isExpanded) $
+          H.div { className: "subtree__node__children" }
+          children
       ]
     where
-      nodeClass vnt = "node " <> GT.fldr nodeType true <> " " <> validNodeTypeClass where
-        validNodeTypeClass = if vnt then "node-type-valid" else ""
       SubTreeParams { valitypes } = subTreeParams
       sortedAry = A.sortWith (\(NTree (LNode {id:id'}) _) -> id')
         $ A.filter (\(NTree (LNode {id:id'}) _) -> id'/= id) ary
       validNodeType = (A.elem nodeType valitypes) && (id /= targetId)
-      isSelected n action' = case (subTreeOut action') of
+      isSelected n action = case (subTreeOut action) of
         Nothing                   -> false
         (Just (SubTreeOut {out})) -> n == out

src/Gargantext/Utils.purs

@@ -112,3 +112,8 @@ nbsp = nbsp' ""
     nbsp' acc n
       | n <= 0 = acc
       | otherwise = nbsp' (acc <> char) (n - 1)
+
+ifElse :: forall a. Boolean -> a -> a -> a
+ifElse predicate a b = if predicate then a else b
+
+infixl 1 ifElse as ?

src/sass/_tree.sass

@@ -132,6 +132,70 @@ li
       .text
         text-decoration: underline
 
+
+.subtree
+  $self: &
+
+  &__node
+    margin-top: space-x(0.25)
+
+    &__text
+      display: flex
+      align-items: center // align icon with text
+      cursor: pointer
+      font-size: 15px
+
+    &__icons
+      display: flex
+
+      .fa
+        margin-left: space-x(0.25)
+        margin-right: space-x(0.25)
+
+    &--can-be-selected
+      text-decoration: underline
+      text-underline-offset: 2px // easing node reading (empirical)
+
+    @include right-handed
+
+      &__text
+        flex-direction: row
+        text-align: left
+
+      &__icons
+        flex-direction: row
+
+      &__children > #{ $self }__node
+        padding-left: space-x(2)
+
+    @include left-handed
+
+      &__text
+        flex-direction: row-reverse
+        text-align: right
+
+      &__icons
+        flex-direction: row-reverse
+
+      &__children > #{ $self }__node
+        padding-right: space-x(2.5)
+
+
+.node-text
+  display: inline-flex
+
+  &--selected
+    font-weight: bold
+    text-decoration: underline
+
+  @include right-handed
+    flex-direction: row
+
+  @include left-handed
+    flex-direction: row-reverse
+
+
+
 // based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
 .progress-pie
   background: rgba(51, 122, 183, 0.1)