>>> continue

dist/styles/bootstrap-darkster.css

@@ -9457,6 +9457,14 @@ select.form-control {
   padding: 0.25em 0.4em;
   font-weight: bold;
 }
+.phylo-selection-tab__highlight__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
+.phylo-selection-tab__highlight__actions {
+  margin-top: 16px;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px;
 }

dist/styles/bootstrap-default.css

@@ -9410,6 +9410,14 @@ select.form-control {
   padding: 0.25em 0.4em;
   font-weight: bold;
 }
+.phylo-selection-tab__highlight__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
+.phylo-selection-tab__highlight__actions {
+  margin-top: 16px;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px;
 }

dist/styles/bootstrap-greyson.css

@@ -9166,6 +9166,14 @@ select.form-control {
   padding: 0.25em 0.4em;
   font-weight: bold;
 }
+.phylo-selection-tab__highlight__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
+.phylo-selection-tab__highlight__actions {
+  margin-top: 16px;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px;
 }

dist/styles/bootstrap-herbie.css

@@ -9414,6 +9414,14 @@ select.form-control {
   padding: 0.25em 0.4em;
   font-weight: bold;
 }
+.phylo-selection-tab__highlight__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
+.phylo-selection-tab__highlight__actions {
+  margin-top: 16px;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px;
 }

dist/styles/bootstrap-monotony.css

@@ -9415,6 +9415,14 @@ select.form-control {
   padding: 0.25em 0.4em;
   font-weight: bold;
 }
+.phylo-selection-tab__highlight__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
+.phylo-selection-tab__highlight__actions {
+  margin-top: 16px;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px;
 }

src/Gargantext/Components/PhyloExplorer/Sidebar/SelectionTab.purs

@@ -13,6 +13,7 @@ import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.PhyloExplorer.Sidebar.DocList (docListWrapper)
+import Gargantext.Components.PhyloExplorer.Sidebar.UpdateTerms (updateTerms)
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
 import Gargantext.Components.PhyloExplorer.Types (ExtractedCount(..), ExtractedTerm(..), defaultCacheParams)
 import Gargantext.Hooks.FirstEffect (useFirstEffect')
@@ -199,7 +200,7 @@ component = here.component "main" cpt where
                   ,
                     -- Expand Selection actions
                     B.iconButton
-                    { name: expandSelection' ?
+                    { name: expandSelection ?
                         "caret-up" $
                         "caret-down"
                     , className: "phylo-selection-tab__highlight__expand"
@@ -207,9 +208,13 @@ component = here.component "main" cpt where
                     }
                   ]
                 ,
+                  -- Selection actions
+                  R2.when expandSelection $
+
                     H.li
                     { className: "list-group-item" }
                     [
+                      -- Wikipedia informations
                       H.a
                       { href: "https://en.wikipedia.org/w/index.php?search=\""
                           <> s
@@ -219,6 +224,14 @@ component = here.component "main" cpt where
                       [
                         H.text "Click here for more info"
                       ]
+                    ,
+                      -- NGrams edition
+                      H.div
+                      { className: "phylo-selection-tab__highlight__actions" }
+                      [
+                        updateTerms
+                        {}
+                      ]
                     ]
                 ]
               ]

src/Gargantext/Components/PhyloExplorer/Sidebar/UpdateTerms.purs

+module Gargantext.Components.PhyloExplorer.Sidebar.UpdateTerms where
+
+import Gargantext.Prelude
+
+import Effect (Effect)
+import Gargantext.Components.App.Store as AppStore
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
+import Gargantext.Components.PhyloExplorer.Store as PhyloStore
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+here :: R2.Here
+here = R2.here "Gargantext.Components.PhyloExplorer.Sidebar.UpdateTerms"
+
+-- | @NOTE #408: only dealing with single Term selection
+-- |             (hence not dealing with multiple selection, nor Branch,
+-- |             nor Source → if so, please change the source code accordingly)
+updateTerms :: R2.Leaf ()
+updateTerms = R2.leaf updateTermsCpt
+
+updateTermsCpt :: R.Component ()
+updateTermsCpt = here.component "main" cpt where
+  cpt {} _ = do
+    -- | States
+    -- |
+    { errors
+    , reloadForest
+    } <- AppStore.use
+
+    { selectedTerm
+    , phyloId
+    } <- PhyloStore.use
+
+    selectedTerm' <- R2.useLive' selectedTerm
+    phyloId'      <- R2.useLive' phyloId
+
+    -- | Behaviors
+    -- |
+    let
+      callback :: Unit -> Effect Unit
+      callback _ = pure unit
+
+    -- | Render
+    -- |
+    pure $
+
+      B.buttonGroup
+      { collapse: false }
+      [
+        B.button
+        { variant: ButtonVariant Light
+        , status: Disabled
+        , callback
+        }
+        [
+          B.icon
+          { name: "circle"
+          , className: "mr-1 candidate-term"
+          }
+        ,
+          H.text "Move as candidate"
+        ]
+      ,
+        B.button
+        { variant: ButtonVariant Light
+        , status: Disabled
+        , callback
+        }
+        [
+          B.icon
+          { name: "circle"
+          , className: "mr-1 stop-term"
+          }
+        ,
+          H.text "Move as stop"
+        ]
+      ]

src/sass/_legacy/_phylo.scss

@@ -573,6 +573,21 @@ $decreasing-color: #11638F;
       padding: $badge-padding-y $badge-padding-x;
       font-weight: bold;
     }
+
+    &__expand {
+      // Following <list-group-item> spacing
+      $position-x: $list-group-item-padding-x;
+      // Empirical: fit well with icon overlay
+      $position-y: 1rem;
+
+      position: absolute;
+      right: $position-x;
+      bottom: $position-y;
+    }
+
+    &__actions {
+      margin-top: space-x(2);
+    }
   }
 
   &__selection {