>>> continue

dist/styles/bootstrap-darkster.css

@@ -8776,6 +8776,29 @@ a:focus, a:hover {
   margin-right: 8px;
 }
 
+.ngrams-tree-edit-real {
+  padding: 1.5rem 1.5rem;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  border-left: 1px solid #dee2e6;
+  border-right: 1px solid #dee2e6;
+}
+.ngrams-tree-edit-real__header {
+  margin-bottom: 4px;
+}
+.ngrams-tree-edit-real__body {
+  min-width: 400px;
+  width: fit-content;
+  margin-bottom: 8px;
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-tree-edit-real__footer {
+  display: flex;
+}
+.ngrams-tree-edit-real__footer .b-button {
+  margin-right: 8px;
+}
+
 .action-search {
   margin: 10px;
 }

dist/styles/bootstrap-default.css

@@ -8729,6 +8729,29 @@ a:focus, a:hover {
   margin-right: 8px;
 }
 
+.ngrams-tree-edit-real {
+  padding: 1.5rem 1.5rem;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  border-left: 1px solid #dee2e6;
+  border-right: 1px solid #dee2e6;
+}
+.ngrams-tree-edit-real__header {
+  margin-bottom: 4px;
+}
+.ngrams-tree-edit-real__body {
+  min-width: 400px;
+  width: fit-content;
+  margin-bottom: 8px;
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-tree-edit-real__footer {
+  display: flex;
+}
+.ngrams-tree-edit-real__footer .b-button {
+  margin-right: 8px;
+}
+
 .action-search {
   margin: 10px;
 }

dist/styles/bootstrap-greyson.css

@@ -8485,6 +8485,29 @@ a:focus, a:hover {
   margin-right: 8px;
 }
 
+.ngrams-tree-edit-real {
+  padding: 1.5rem 1.5rem;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  border-left: 1px solid #dee2e6;
+  border-right: 1px solid #dee2e6;
+}
+.ngrams-tree-edit-real__header {
+  margin-bottom: 4px;
+}
+.ngrams-tree-edit-real__body {
+  min-width: 400px;
+  width: fit-content;
+  margin-bottom: 8px;
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-tree-edit-real__footer {
+  display: flex;
+}
+.ngrams-tree-edit-real__footer .b-button {
+  margin-right: 8px;
+}
+
 .action-search {
   margin: 10px;
 }

dist/styles/bootstrap-herbie.css

@@ -8733,6 +8733,29 @@ a:focus, a:hover {
   margin-right: 8px;
 }
 
+.ngrams-tree-edit-real {
+  padding: 1.5rem 1.5rem;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  border-left: 1px solid #dee2e6;
+  border-right: 1px solid #dee2e6;
+}
+.ngrams-tree-edit-real__header {
+  margin-bottom: 4px;
+}
+.ngrams-tree-edit-real__body {
+  min-width: 400px;
+  width: fit-content;
+  margin-bottom: 8px;
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-tree-edit-real__footer {
+  display: flex;
+}
+.ngrams-tree-edit-real__footer .b-button {
+  margin-right: 8px;
+}
+
 .action-search {
   margin: 10px;
 }

dist/styles/bootstrap-monotony.css

@@ -8734,6 +8734,29 @@ a:focus, a:hover {
   margin-right: 8px;
 }
 
+.ngrams-tree-edit-real {
+  padding: 1.5rem 1.5rem;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  border-left: 1px solid #dee2e6;
+  border-right: 1px solid #dee2e6;
+}
+.ngrams-tree-edit-real__header {
+  margin-bottom: 4px;
+}
+.ngrams-tree-edit-real__body {
+  min-width: 400px;
+  width: fit-content;
+  margin-bottom: 8px;
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-tree-edit-real__footer {
+  display: flex;
+}
+.ngrams-tree-edit-real__footer .b-button {
+  margin-right: 8px;
+}
+
 .action-search {
   margin: 10px;
 }

src/Gargantext/Components/NgramsTable/SyncResetButton.purs

@@ -59,4 +59,3 @@ syncResetButtonsCpt = here.component "syncResetButtons" cpt
                      } [ H.text "Sync" ]
           ]
         ]
-

src/Gargantext/Components/NgramsTable/Tree.purs

@@ -57,7 +57,9 @@ renderNgramsTreeCpt :: R.Component RenderNgramsTree
 renderNgramsTreeCpt = here.component "renderNgramsTree" cpt
   where
     cpt { getNgramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ = do
-      pure $ H.ul {}
+      pure $
+        H.ul
+        { className: "render-ngrams-tree" }
         [ H.span { className: "tree" }
           [ H.span { className: "righthanded" }
             [ tree { getNgramsChildren

src/sass/_legacy/_styles.sass

@@ -96,6 +96,39 @@
           width: 14px
           margin-right: space-x(1)
 
+
+.ngrams-tree-edit-real
+  // empirical value corresponding to the glass search icon of the above search
+  // bar, this will add an nested alignment telling the user that this feature
+  // is a deep feature reveals to zim
+  $gutter: 2.5em
+
+  padding: ($card-spacer-y * 2) ($card-spacer-y * 2)
+  margin-left: $gutter
+  margin-right: $gutter
+  border-left: 1px solid $border-color
+  border-right: 1px solid $border-color
+
+  &__header
+    margin-bottom: space-x(0.5)
+
+  &__body
+    // empirical value fitting the best size of the render tree
+    $body-min-with: 400px
+
+    min-width: 400px
+    width: fit-content
+    margin-bottom: space-x(1)
+    padding: $card-spacer-y $card-spacer-x
+
+
+  &__footer
+    display: flex
+
+    .b-button
+      margin-right: space-x(1)
+
+
 .action-search
   margin: 10px