>>> BEGIN 375

dist/styles/bootstrap-default.css

@@ -10362,6 +10362,9 @@ h4, h5, h6 {
 .graph-topbar {
   padding: 0 8px;
   height: 100%;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 .right-handed .graph-topbar {
   border-left: 1px solid rgba(255, 255, 255, 0.05);
@@ -10371,6 +10374,20 @@ h4, h5, h6 {
   border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
+.graph-topbar__toolbar, .graph-topbar__sidebar {
+  width: 136px;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.graph-topbar__search {
+  width: 304px;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.graph-topbar__search [type=submit] {
+  display: none;
+}
+
 #logo-designed {
   border: 15px;
 }
@@ -11355,8 +11372,6 @@ select.form-control {
 }
 
 /* Grid constants */
-/* Topbar constants */
-/* Sidebar constant */
 /* Colors */
 .phylo {
   /* ---------- axis ---------- */

src/Gargantext/Components/GraphExplorer/Search.purs

@@ -4,10 +4,11 @@ module Gargantext.Components.GraphExplorer.Search
 import Prelude
 
 import DOM.Simple.Console (log2)
-import Data.Foldable (foldl)
+import Data.Foldable (foldl, intercalate)
 import Data.Sequence as Seq
 import Data.Set as Set
 import Effect (Effect)
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.InputWithAutocomplete (inputWithAutocomplete)
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Utils (queryMatchesLabel)
@@ -23,6 +24,7 @@ type Props = (
     graph              :: SigmaxT.SGraph
   , multiSelectEnabled :: T.Box Boolean
   , selectedNodeIds    :: T.Box SigmaxT.NodeIds
+  , className          :: String
   )
 
 -- | Whether a node matches a search string
@@ -37,28 +39,43 @@ searchNodes :: String -> Seq.Seq (Record SigmaxT.Node) -> Seq.Seq (Record Sigmax
 searchNodes "" _ = Seq.empty
 searchNodes s nodes = Seq.filter (nodeMatchesSearch s) nodes
 
-nodeSearchControl :: R2.Component Props
-nodeSearchControl = R.createElement nodeSearchControlCpt
+nodeSearchControl :: R2.Leaf Props
+nodeSearchControl = R2.leaf nodeSearchControlCpt
 nodeSearchControlCpt :: R.Component Props
 nodeSearchControlCpt = here.component "nodeSearchControl" cpt
   where
-    cpt { graph, multiSelectEnabled, selectedNodeIds } _ = do
+    cpt props@{ graph, multiSelectEnabled, selectedNodeIds } _ = do
       search <- T.useBox ""
       search' <- T.useLive T.unequal search
       multiSelectEnabled' <- T.useLive T.unequal multiSelectEnabled
 
       let doSearch s = triggerSearch graph s multiSelectEnabled' selectedNodeIds
 
-      pure $ R.fragment
-        [ inputWithAutocomplete { autocompleteSearch: autocompleteSearch graph
-                                , classes: "mx-2"
-                                , onAutocompleteClick: doSearch
-                                , onEnterPress: doSearch
-                                , state: search } []
-        , H.div { className: "btn input-group-addon"
-                , on: { click: \_ -> doSearch search' }
-                }
-          [ H.span { className: "fa fa-search" } [] ]
+      pure $
+
+        H.form
+        { className: intercalate " "
+            [ "graph-node-search"
+            , props.className
+            ]
+        }
+        [
+          inputWithAutocomplete
+          { autocompleteSearch: autocompleteSearch graph
+          , onAutocompleteClick: doSearch
+          , onEnterPress: doSearch
+          , classes: ""
+          , state: search
+          }
+        ,
+          B.button
+          { callback: \_ -> doSearch search'
+          , type: "submit"
+          , className: "graph-node-search__submit"
+          }
+          [
+            B.icon { name: "search"}
+          ]
         ]
 
 autocompleteSearch :: SigmaxT.SGraph -> String -> Array String

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -6,7 +6,6 @@ module Gargantext.Components.GraphExplorer.ToggleButton
   , edgesToggleButton
   , louvainToggleButton
   , multiSelectEnabledButton
-  , sidebarToggleButton
   , pauseForceAtlasButton
   , resetForceAtlasButton
   , treeToggleButton
@@ -203,35 +202,3 @@ treeToggleButtonCpt = here.component "treeToggleButton" cpt
         , onClick: \_ -> T.modify_ not state
         , style: "light"
         } []
-
-type SidebarToggleButtonProps = (
-  state :: T.Box GT.SidePanelState
-)
-
-sidebarToggleButton :: R2.Component SidebarToggleButtonProps
-sidebarToggleButton = R.createElement sidebarToggleButtonCpt
-sidebarToggleButtonCpt :: R.Component SidebarToggleButtonProps
-sidebarToggleButtonCpt = here.component "sidebarToggleButton" cpt
-  where
-    cpt { state } _ = do
-      state' <- T.useLive T.unequal state
-
-      pure $ H.div { className: "btn btn-outline-light " <> cls state'
-                   , on: { click: onClick state }
-                   } [ R2.small {} [ H.text (text onMessage offMessage state') ] ]
-
-    cls GT.Opened = "active"
-    cls _         = ""
-
-    onMessage = "Hide Sidebar"
-    offMessage = "Show Sidebar"
-    text on _off GT.Opened        = on
-    text _on off GT.InitialClosed = off
-    text _on off GT.Closed        = off
-
-    onClick state = \_ ->
-      T.modify_ GT.toggleSidePanelState state
-                  -- case s of
-        -- GET.InitialClosed -> GET.Opened GET.SideTabLegend
-        -- GET.Closed        -> GET.Opened GET.SideTabLegend
-        -- (GET.Opened _)    -> GET.Closed) state

src/Gargantext/Components/GraphExplorer/TopBar.purs

-module Gargantext.Components.GraphExplorer.TopBar where
+module Gargantext.Components.GraphExplorer.TopBar (topBar) where
 
-import Data.Maybe (Maybe(..))
-import Reactix as R
-import Reactix.DOM.HTML as RH
-import Toestand as T
-
-import Gargantext.Prelude hiding (max,min)
+import Gargantext.Prelude hiding (max, min)
 
-import Gargantext.Components.App.Data (Boxes)
+import Data.Maybe (Maybe(..))
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
-import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
+import Gargantext.Types (SidePanelState)
+import Gargantext.Types as GT
+import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Toestand as T
+
+type Props =
+  ( sidePanelGraph :: T.Box (Maybe (Record GEST.SidePanel))
+  , sidePanelState :: T.Box (SidePanelState)
+  )
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.TopBar"
 
-type TopBar =
-  (
-    boxes    :: Boxes
-  )
+topBar :: R2.Leaf Props
+topBar = R2.leaf component
+
+component :: R.Component Props
+component = here.component "topBar" cpt where
+  cpt { sidePanelGraph, sidePanelState } _ = do
+    -- States
+    { mGraph
+    , multiSelectEnabled
+    , selectedNodeIds
+    , showControls
+    } <- GEST.focusedSidePanel sidePanelGraph
+
+    mGraph'         <- R2.useLive' mGraph
+    showControls'   <- R2.useLive' showControls
+    sidePanelState' <- R2.useLive' sidePanelState
+
+    -- Render
+    pure $
+
+      H.div
+      { className: "graph-topbar" }
+      [
+        -- Toolbar toggle
+        B.button
+        { className: "graph-topbar__toolbar"
+        , callback: \_ -> T.modify_ (not) showControls
+        , variant: showControls' ?
+            ButtonVariant Light $
+            OutlinedButtonVariant Light
+        }
+        [
+          H.text $ showControls' ? "Hide toolbar" $ "Show toolbar"
+        ]
+      ,
+        -- Sidebar toggle
+        B.button
+        { className: "graph-topbar__sidebar"
+        , callback: \_ -> T.modify_ GT.toggleSidePanelState sidePanelState
 
-topBar :: R2.Leaf TopBar
-topBar = R2.leafComponent topBarCpt
-topBarCpt :: R.Component TopBar
-topBarCpt = here.component "topBar" cpt where
-  cpt { boxes: { sidePanelGraph
-               , sidePanelState } } _ = do
-    { mGraph, multiSelectEnabled, selectedNodeIds, showControls } <- GEST.focusedSidePanel sidePanelGraph
-
-    mGraph' <- T.useLive T.unequal mGraph
-
-    let search = case mGraph' of
-          Just graph -> nodeSearchControl { graph
-                                         , multiSelectEnabled
-                                         , selectedNodeIds } []
-          Nothing -> RH.div {} []
-
-    pure $ RH.form { className: "graph-topbar d-flex" }
-      [ Toggle.controlsToggleButton { state: showControls } []
-      , Toggle.sidebarToggleButton { state: sidePanelState } []
-      , search
+        , variant: sidePanelState' == GT.Opened ?
+            ButtonVariant Light $
+            OutlinedButtonVariant Light
+        }
+        [
+          H.text $ sidePanelState' == GT.Opened ?
+            "Hide sidebar" $
+            "Show sidebar"
+        ]
+      ,
+        -- Search
+        -- @WIP: R2.fromMaybe_
+        case mGraph' of
+          Nothing    -> mempty
+          Just graph ->
+            nodeSearchControl
+            { graph
+            , multiSelectEnabled
+            , selectedNodeIds
+            , className: "graph-topbar__search"
+            }
       ]

src/Gargantext/Components/InputWithAutocomplete.purs

@@ -29,8 +29,8 @@ type Props =
   , state               :: T.Box String
   )
 
-inputWithAutocomplete :: R2.Component Props
-inputWithAutocomplete = R.createElement inputWithAutocompleteCpt
+inputWithAutocomplete :: R2.Leaf Props
+inputWithAutocomplete = R2.leaf inputWithAutocompleteCpt
 inputWithAutocompleteCpt :: R.Component Props
 inputWithAutocompleteCpt = here.component "inputWithAutocomplete" cpt
   where

src/Gargantext/Components/Router.purs

@@ -14,7 +14,7 @@ import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.ErrorsView (errorsView)
 import Gargantext.Components.Footer (footer)
 import Gargantext.Components.Forest as Forest
-import Gargantext.Components.GraphExplorer as GraphExplorer
+import Gargantext.Components.GraphExplorer.Layout as GraphExplorer
 import Gargantext.Components.GraphExplorer.Sidebar as GES
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
 import Gargantext.Components.Lang (LandingLang(LL_EN))
@@ -434,12 +434,13 @@ graphExplorerCpt = here.component "graphExplorer" cpt where
       authedProps =
         Record.merge
         { content:
-            \session -> GraphExplorer.explorerLayoutWithKey
+            \session -> GraphExplorer.layout
                         { boxes
                         , graphId: nodeId
                         , key: "graphId-" <> show nodeId
-                        , session }
-                        []
+                        , session
+                        }
+
         }
         sessionProps
 

src/sass/_legacy/_graph.sass

@@ -86,5 +86,25 @@
     width: 300px
     top: 50px
 
+/////////////////////////////////////////////
+
 .graph-topbar
   @include aside-topbar
+
+  display: flex
+  padding-left: $topbar-item-margin
+  padding-right: $topbar-item-margin
+
+  &__toolbar,
+  &__sidebar
+    width: $topbar-fixed-button-width
+    margin-left: $topbar-item-margin
+    margin-right: $topbar-item-margin
+
+  &__search
+    width: $topbar-input-width
+    margin-left: $topbar-item-margin
+    margin-right: $topbar-item-margin
+
+    [type="submit"]
+      display: none

src/sass/_legacy/_phylo.scss

@@ -26,7 +26,6 @@
 
 /* Grid constants */
 
-$topbar-height: 56px; // ~ unworthy empirical value (@TODO topbar height calculation)
 $graph-margin: 16px;
 
 $layout-height: calc(100vh - #{ $topbar-height} );
@@ -38,16 +37,6 @@ $left-column-width: 10%;
 $center-column-width: 85%;
 $right-column-width: 5%;
 
-/* Topbar constants */
-
-$topbar-input-width: 304px;
-
-/* Sidebar constant */
-
-$sidebar-width: 480px;
-$sidebar-height: calc(100vh - #{ $topbar-height });
-$tab-margin-x: space-x(2.5);
-
 /* Colors */
 
 $graph-background-color: $body-bg;
@@ -448,34 +437,33 @@ $decreasing-color: #11638F;
 ////////////////////////////////////////////////////////////////
 
 .phylo-topbar {
-  $margin: space-x(0.5);
   $fixed-button-width: 136px;
 
   @include aside-topbar();
 
-  padding-left: $margin;
-  padding-right: $margin;
+  padding-left: $topbar-item-margin;
+  padding-right: $topbar-item-margin;
   display: flex;
 
   &__toolbar,
   &__sidebar {
-    width: $fixed-button-width;
-    margin-left: $margin;
-    margin-right: $margin;
+    width: $topbar-fixed-button-width;
+    margin-left: $topbar-item-margin;
+    margin-right: $topbar-item-margin;
   }
 
   &__source {
     width: $topbar-input-width;
-    margin-left: $margin;
-    margin-right: $margin;
+    margin-left: $topbar-item-margin;
+    margin-right: $topbar-item-margin;
   }
 
   &__autocomplete {
     display: flex;
     width: $topbar-input-width;
     position: relative;
-    margin-left: $margin;
-    margin-right: $margin;
+    margin-left: $topbar-item-margin;
+    margin-right: $topbar-item-margin;
   }
 
   &__suggestion {
@@ -559,7 +547,7 @@ $decreasing-color: #11638F;
 }
 
 .phylo-details-tab {
-  $margin-x: $tab-margin-x;
+  $margin-x: $sidebar-tab-margin-x;
   $margin-y: space-x(2);
 
   &__counter {
@@ -585,7 +573,7 @@ $decreasing-color: #11638F;
 }
 
 .phylo-selection-tab {
-  $margin-x: $tab-margin-x;
+  $margin-x: $sidebar-tab-margin-x;
   $margin-y: space-x(2);
 
   &__highlight {

src/sass/base/_layout.scss

+/// Topbar
+$topbar-height: 56px; // ~ unworthy empirical value (@TODO topbar height calculation)
+$topbar-input-width: 304px;
+$topbar-item-margin: space-x(0.5);
+$topbar-fixed-button-width: 136px;
+
+/// Sidebar
+$sidebar-width: 480px;
+$sidebar-height: calc(100vh - #{ $topbar-height });
+$sidebar-tab-margin-x: space-x(2.5);
+
+
+
 .with-icon-font {
   font-family: ForkAwesome, $font-family-base;
 }