[graph explorer] move search to top bar

dist/styles/sass.css

@@ -168,7 +168,7 @@
   max-height: 300px;
   overflow-y: scroll;
   width: 300px;
-  top: 100px;
+  top: 50px;
 }
 
 #dafixedtop {

src/Gargantext/Components/GraphExplorer.purs

@@ -24,6 +24,7 @@ import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.Forest (forest)
 import Gargantext.Components.Graph as Graph
 import Gargantext.Components.GraphExplorer.Controls as Controls
+import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
 import Gargantext.Components.GraphExplorer.Sidebar as Sidebar
 import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
 import Gargantext.Components.GraphExplorer.Types as GET
@@ -154,6 +155,9 @@ explorerCpt = R.hooksComponentWithModule thisModule "explorer" cpt
             [ rowToggle
                     [ col [ spaces [ Toggle.treeToggleButton controls.showTree         ]]
                     , col [ spaces [ Toggle.controlsToggleButton controls.showControls ]]
+                    , col [ spaces [ nodeSearchControl { graph
+                                                       , multiSelectEnabled: controls.multiSelectEnabled
+                                                       , selectedNodeIds: controls.selectedNodeIds } [] ] ]
                     , col [ spaces [ Toggle.sidebarToggleButton controls.showSidePanel ]]
                     ]
             ]

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -23,7 +23,6 @@ import Reactix.DOM.HTML as RH
 import Gargantext.Components.Graph as Graph
 import Gargantext.Components.GraphExplorer.Button (centerButton, cameraButton)
 import Gargantext.Components.GraphExplorer.RangeControl (edgeConfluenceControl, edgeWeightControl, nodeSizeControl)
-import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
 import Gargantext.Components.GraphExplorer.SlideButton (labelSizeButton, mouseSelectorSizeButton)
 import Gargantext.Components.GraphExplorer.ToggleButton (multiSelectEnabledButton, edgesToggleButton, louvainToggleButton, pauseForceAtlasButton)
 import Gargantext.Components.GraphExplorer.Types as GET
@@ -31,8 +30,8 @@ import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Sessions (Session)
 import Gargantext.Utils.Range as Range
-import Gargantext.Utils.Reactix as R2
 
+thisModule :: String
 thisModule = "Gargantext.Components.GraphExplorer.Controls"
 
 type Controls =
@@ -160,9 +159,6 @@ controlsCpt = R.hooksComponentWithModule thisModule "controls" cpt
               -- zoom: 0 -100 - calculate ratio
                    , RH.li { className: "nav-item" } [ multiSelectEnabledButton props.multiSelectEnabled ]  -- toggle multi node selection
               -- save button
-                   , RH.li { className: "nav-item" } [ nodeSearchControl { graph: props.graph
-                                           , multiSelectEnabled: props.multiSelectEnabled
-                                           , selectedNodeIds: props.selectedNodeIds } ]
                    , RH.li { className: "nav-item" } [ mouseSelectorSizeButton props.sigmaRef localControls.mouseSelectorSize ]
                    , RH.li { className: "nav-item" } [ cameraButton { id: props.graphId
                                       , hyperdataGraph: props.hyperdataGraph

src/Gargantext/Components/GraphExplorer/Search.purs

@@ -17,6 +17,7 @@ import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Utils (queryMatchesLabel)
 import Gargantext.Utils.Reactix as R2
 
+thisModule :: String
 thisModule = "Gargantext.Components.GraphExplorer.Search"
 
 type Props = (
@@ -33,8 +34,8 @@ searchNodes :: String -> Seq.Seq (Record SigmaxT.Node) -> Seq.Seq (Record Sigmax
 searchNodes "" _ = Seq.empty
 searchNodes s nodes = Seq.filter (nodeMatchesSearch s) nodes
 
-nodeSearchControl :: Record Props -> R.Element
-nodeSearchControl props = R.createElement sizeButtonCpt props []
+nodeSearchControl :: R2.Component Props
+nodeSearchControl = R.createElement sizeButtonCpt
 
 sizeButtonCpt :: R.Component Props
 sizeButtonCpt = R.hooksComponentWithModule thisModule "nodeSearchControl" cpt

src/sass/_graph.sass

@@ -82,4 +82,4 @@
     max-height: 300px
     overflow-y: scroll
     width: 300px
-    top: 100px
+    top: 50px