[phylo] Change ngram for selected terms

* #408: UI/UX first layer, no interaction yet

dist/styles/bootstrap-darkster.css

@@ -9574,6 +9574,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

@@ -9526,6 +9526,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

@@ -9283,6 +9283,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

@@ -9531,6 +9531,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

@@ -9532,6 +9532,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')
@@ -47,6 +48,7 @@ component = here.component "main" cpt where
     selectedBranch      <- R2.useLive' store.selectedBranch
     selectedSource      <- R2.useLive' store.selectedSource
     expandNeighborhood  <- R2.useLive' store.expandNeighborhood
+    expandSelection     <- R2.useLive' store.expandSelection
 
     showMore' /\ showMore <- R2.useBox' false
 
@@ -79,8 +81,8 @@ component = here.component "main" cpt where
     -- | Behaviors
     -- |
     let
-      onExpandClick _ = T.modify_ (not) store.expandNeighborhood
-
+      onExpandNeighborhoodClick _ = T.modify_ (not) store.expandNeighborhood
+      onExpandSelectionClick _ = T.modify_ (not) store.expandSelection
 
     -- | Render
     -- |
@@ -195,11 +197,24 @@ component = here.component "main" cpt where
                     [
                       H.text "term"
                     ]
+                  ,
+                    -- Expand Selection actions
+                    B.iconButton
+                    { name: expandSelection ?
+                        "caret-up" $
+                        "caret-down"
+                    , className: "phylo-selection-tab__highlight__expand"
+                    , callback: onExpandSelectionClick
+                    }
                   ]
                 ,
+                  -- 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
@@ -209,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
+                        {}
+                      ]
                     ]
                 ]
               ]
@@ -270,7 +293,7 @@ component = here.component "main" cpt where
                         "caret-up" $
                         "caret-down"
                     , className: "phylo-selection-tab__counter__expand"
-                    , callback: onExpandClick
+                    , callback: onExpandNeighborhoodClick
                     }
                   ]
             ,

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

@@ -594,6 +594,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 {