[Ngrams table] keep position when editing by keeping tree expanded

dist/styles/bootstrap-darkster.css

@@ -11461,6 +11461,11 @@ select.form-control {
   font-size: 0.85rem;
 }
 
+.tree-expanded {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-default.css

@@ -11265,6 +11265,11 @@ select.form-control {
   font-size: 0.85rem;
 }
 
+.tree-expanded {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-greyson.css

@@ -11027,6 +11027,11 @@ select.form-control {
   font-size: 0.85rem;
 }
 
+.tree-expanded {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-herbie.css

@@ -11275,6 +11275,11 @@ select.form-control {
   font-size: 0.85rem;
 }
 
+.tree-expanded {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-monotony.css

@@ -11276,6 +11276,11 @@ select.form-control {
   font-size: 0.85rem;
 }
 
+.tree-expanded {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

src/Gargantext/Components/NgramsTable/Tree.purs

@@ -2,6 +2,7 @@ module Gargantext.Components.NgramsTable.Tree where
 
 import Gargantext.Prelude
 
+import Data.Array (length)
 import Data.Array as A
 import Data.Lens ((^..), (^.), view)
 import Data.Lens.Fold (folded)
@@ -291,18 +292,33 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
           H.div {}
           ( if isEditing'
             then
-              [
-                B.iconButton
-                { name: "plus"
-                , className: "mr-1 align-bottom"
-                , overlay: false
-                , variant: Primary
-                , callback: const $ dispatch $ ToggleChild true ngrams
-                }
-              ,
-                R2.buff $
-                tag [ text $ " " <> ngramsTermText ngramsDepth.ngrams ]
-              ]
+              if (length $ getNgramsChildren' ngrams) > 0
+                then
+                  [ H.div {className: "tree-expanded"} [
+                    B.iconButton
+                    { name: "plus"
+                    , className: "mr-1 align-bottom"
+                    , overlay: false
+                    , variant: Primary
+                    , callback: const $ dispatch $ ToggleChild true ngrams
+                    }
+                  ,
+                    R2.buff $
+                    tag [ text $ " " <> ngramsTermText ngramsDepth.ngrams ]
+                  ] ]
+                else
+                  [
+                    B.iconButton
+                    { name: "plus"
+                    , className: "mr-1 align-bottom"
+                    , overlay: false
+                    , variant: Primary
+                    , callback: const $ dispatch $ ToggleChild true ngrams
+                    }
+                  ,
+                    R2.buff $
+                    tag [ text $ " " <> ngramsTermText ngramsDepth.ngrams ]
+                  ]
             else
               [
                 renderNgramsTree

src/sass/_legacy/_list.sass

@@ -335,3 +335,7 @@
       .context-item-date
         color: $gray-600
         font-size: .85rem
+
+.tree-expanded
+  padding-top: 12px
+  padding-bottom: 12px