[graph explorer] removal of some unused props

Also, fixed styling of "info" dropdown.

dist/styles/sass.css

@@ -141,7 +141,7 @@
 }
 .graph-container #controls-container {
   position: absolute;
-  z-index: 999;
+  z-index: 900;
   backdrop-filter: blur(4px);
   background: rgba(255, 255, 255, 0.75);
   left: 0;
@@ -171,7 +171,7 @@
 }
 
 #dafixedtop {
-  z-index: 999;
+  z-index: 910;
 }
 
 #logo-designed {
@@ -540,7 +540,7 @@ li .leaf:hover a.settings {
   position: fixed;
   top: 3.7em;
   width: 15%;
-  z-index: 999;
+  z-index: 900;
 }
 
 .left-handed .forest-layout {

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EAEE;;;AAQF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACzKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;EACA;EACA;EACA;EACA;;;AAEA;EACE;;;AAEF;EACE;;;AC9JA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;ACtGF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA","file":"sass.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACtFJ;EAEE;;;AAQF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACzKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;EACA;EACA;EACA;EACA;;;AAEA;EACE;;;AAEF;EACE;;;AC9JA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;ACtGF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/Graph.purs

@@ -9,7 +9,6 @@ import Data.Either (Either(..))
 import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..))
 import Data.Nullable (Nullable)
-import DOM.Simple.Console (log, log2)
 import DOM.Simple.Types (Element)
 import Reactix as R
 import Reactix.DOM.HTML as RH
@@ -70,12 +69,12 @@ graphCpt = here.component "graph" cpt where
 
       R.useEffectOnce $ do
         pure $ do
-          log "[graphCpt (Cleanup)]"
+          here.log "[graphCpt (Cleanup)]"
           Sigmax.dependOnSigma (R.readRef sigmaRef) "[graphCpt (Cleanup)] no sigma" $ \sigma -> do
             Sigma.stopForceAtlas2 sigma
-            log2 "[graphCpt (Cleanup)] forceAtlas stopped for" sigma
+            here.log2 "[graphCpt (Cleanup)] forceAtlas stopped for" sigma
             Sigma.kill sigma
-            log "[graphCpt (Cleanup)] sigma killed"
+            here.log "[graphCpt (Cleanup)] sigma killed"
 
       -- NOTE: This div is not empty after sigma initializes.
       -- When we change state, we make it empty though.
@@ -93,7 +92,7 @@ graphCpt = here.component "graph" cpt where
           Nothing -> do
             eSigma <- Sigma.sigma {settings: sigmaSettings}
             case eSigma of
-              Left err -> log2 "[graphCpt] error creating sigma" err
+              Left err -> here.log2 "[graphCpt] error creating sigma" err
               Right sig -> do
                 Sigmax.writeSigma rSigma $ Just sig
 
@@ -115,7 +114,7 @@ graphCpt = here.component "graph" cpt where
 
                 Sigmax.setEdges sig false
 
-                -- log2 "[graph] startForceAtlas" startForceAtlas
+                -- here.log2 "[graph] startForceAtlas" startForceAtlas
                 if startForceAtlas then
                   Sigma.startForceAtlas2 sig fa2
                 else

src/Gargantext/Components/GraphExplorer.purs

 module Gargantext.Components.GraphExplorer where
 
-import Gargantext.Prelude hiding (max,min)
-
 import Data.Array as A
 import Data.FoldableWithIndex (foldMapWithIndex)
 import Data.Int (toNumber)
@@ -21,20 +19,18 @@ import Record as Record
 import Record.Extra as RX
 import Toestand as T
 
-import Gargantext.AsyncTasks as GAT
+import Gargantext.Prelude hiding (max,min)
+
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Graph as Graph
 import Gargantext.Components.GraphExplorer.Controls as Controls
-import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
-import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Data.Louvain as Louvain
-import Gargantext.Ends (Frontends, Backend)
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
-import Gargantext.Routes (SessionRoute(NodeAPI), AppRoute)
-import Gargantext.Sessions (Session, Sessions, get)
+import Gargantext.Routes (SessionRoute(NodeAPI))
+import Gargantext.Sessions (Session, get)
 import Gargantext.Types as Types
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
@@ -44,32 +40,23 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer"
 
 type BaseProps =
-  ( backend        :: T.Box (Maybe Backend)
-  , boxes          :: Boxes
-  , frontends      :: Frontends
+  ( boxes          :: Boxes
   , graphId        :: GET.GraphId
-  , handed         :: T.Box Types.Handed
-  , route          :: T.Box AppRoute
-  , sessions       :: T.Box Sessions
-  , showLogin      :: T.Box Boolean
-  , tasks          :: T.Box GAT.Storage
   )
 
 type LayoutProps =
   ( session      :: Session
   | BaseProps )
 
-type GraphWriteProps =
+type Props =
   ( graph          :: SigmaxT.SGraph
   , hyperdataGraph :: GET.HyperdataGraph
-  , mMetaData'     :: Maybe GET.MetaData
   | LayoutProps
   )
 
-type Props =
-  ( graph          :: SigmaxT.SGraph
-  , hyperdataGraph :: GET.HyperdataGraph
-  | LayoutProps
+type GraphWriteProps =
+  ( mMetaData'     :: Maybe GET.MetaData
+  | Props
   )
 
 --------------------------------------------------------------
@@ -77,7 +64,7 @@ explorerLayout :: R2.Component LayoutProps
 explorerLayout = R.createElement explorerLayoutCpt
 explorerLayoutCpt :: R.Component LayoutProps
 explorerLayoutCpt = here.component "explorerLayout" cpt where
-  cpt props@{ backend, boxes: { graphVersion }, graphId, session } _ = do
+  cpt props@{ boxes: { graphVersion }, graphId, session } _ = do
     graphVersion' <- T.useLive T.unequal graphVersion
 
     useLoader graphId (getNodes session graphVersion') handler
@@ -112,25 +99,16 @@ explorer = R.createElement explorerCpt
 explorerCpt :: R.Component Props
 explorerCpt = here.component "explorer" cpt
   where
-    cpt props@{ backend
-              , boxes: boxes@{ graphVersion, reloadForest, showTree, sidePanelGraph, sidePanelState }
-              , frontends
+    cpt props@{ boxes: boxes@{ graphVersion, handed, reloadForest, showTree, sidePanelGraph, sidePanelState }
               , graph
               , graphId
-              , handed
               , hyperdataGraph
-              , route
               , session
-              , sessions
-              , showLogin
-              , tasks
               } _ = do
       { mMetaData, sideTab } <- GEST.focusedSidePanel sidePanelGraph
-      handed' <- T.useLive T.unequal handed
       graphVersion' <- T.useLive T.unequal graphVersion
-      graphVersionRef <- R.useRef graphVersion'
+      handed' <- T.useLive T.unequal handed
       mMetaData' <- T.useLive T.unequal mMetaData
-      -- sideTab <- T.useBox GET.SideTabLegend
 
       let startForceAtlas = maybe true (\(GET.MetaData { startForceAtlas: sfa }) -> sfa) mMetaData'
 
@@ -148,11 +126,9 @@ explorerCpt = here.component "explorer" cpt
                                             , session
                                             , showTree
                                             , sidePanel: sidePanelGraph
-                                            , sidePanelState
-                                            }
-      multiSelectEnabled' <- T.useLive T.unequal controls.multiSelectEnabled
-      multiSelectEnabledRef <- R.useRef multiSelectEnabled'
+                                            , sidePanelState }
 
+      -- graphVersionRef <- R.useRef graphVersion'
       -- R.useEffect' $ do
       --   let readData = R.readRef dataRef
       --   let gv = R.readRef graphVersionRef
@@ -175,77 +151,31 @@ explorerCpt = here.component "explorer" cpt
       pure $
         RH.div { className: "graph-meta-container" }
         [ RH.div { className: "graph-container" }
-          [ inner handed'
+          [ RH.div { className: "container-fluid " <> hClass handed' }
             [ RH.div { id: "controls-container" } [ Controls.controls controls [] ]
             , RH.div { className: "row graph-row" }
               [ RH.div { ref: graphRef, id: "graph-view", className: "col-md-12" } []
               , graphView { controls
                           , elRef: graphRef
-                          , graphId
                           , graph
                           , hyperdataGraph
                           , mMetaData
-                          , multiSelectEnabledRef
                           } []
               ]
             ]
           ]
         ]
 
-    inner h = RH.div { className: "container-fluid " <> hClass }
-      where
-        hClass = case h of
+    hClass h = case h of
       Types.LeftHanded  -> "lefthanded"
       Types.RightHanded -> "righthanded"
 
-type TopBar =
-  (
-    boxes    :: Boxes
-  )
-
-topBar :: R2.Leaf TopBar
-topBar p = R.createElement topBarCpt p []
-topBarCpt :: R.Component TopBar
-topBarCpt = here.component "topBar" cpt where
-  cpt { boxes: { showTree
-               , 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: "d-flex" }
-      [ Toggle.treeToggleButton { state: showTree } []
-      , Toggle.controlsToggleButton { state: showControls } []
-      , Toggle.sidebarToggleButton { state: sidePanelState } []
-      , search
-      -- [ col [ spaces [ Toggle.treeToggleButton { state: showTree } [] ]]
-      -- , col [ spaces [ Toggle.controlsToggleButton { state: showControls } [] ]]
-      -- , col [ spaces [ Toggle.sidebarToggleButton { state: sidePanelState } [] ]]
-      -- , col [ spaces [ search ] ]
-      ]
-    where
-      -- rowToggle  = RH.div { id: "toggle-container" }
-      rowToggle  = RH.ul { className: "navbar-nav ml-auto mr-auto" }
-      -- col       = RH.div { className: "col-md-4" }
-      col = RH.li { className: "nav-item" }
-      -- spaces    = RH.div { className: "flex-space-between" }
-      spaces = RH.a { className: "nav-link" }
-
 type GraphProps = (
     controls       :: Record Controls.Controls
   , elRef          :: R.Ref (Nullable Element)
-  , graphId               :: GET.GraphId
   , graph          :: SigmaxT.SGraph
   , hyperdataGraph :: GET.HyperdataGraph
   , mMetaData      :: T.Box (Maybe GET.MetaData)
-  , multiSelectEnabledRef :: R.Ref Boolean
 )
 
 graphView :: R2.Component GraphProps
@@ -255,11 +185,9 @@ graphViewCpt = here.component "graphView" cpt
   where
     cpt { controls
         , elRef
-        , graphId
         , graph
         , hyperdataGraph: GET.HyperdataGraph { mCamera }
-        , mMetaData
-        , multiSelectEnabledRef } _children = do
+        , mMetaData } _children = do
       edgeConfluence' <- T.useLive T.unequal controls.edgeConfluence
       edgeWeight' <- T.useLive T.unequal controls.edgeWeight
       mMetaData' <- T.useLive T.unequal mMetaData
@@ -270,6 +198,8 @@ graphViewCpt = here.component "graphView" cpt
       showEdges' <- T.useLive T.unequal controls.showEdges
       showLouvain' <- T.useLive T.unequal controls.showLouvain
 
+      multiSelectEnabledRef <- R.useRef multiSelectEnabled'
+
       -- TODO Cache this?
       let louvainGraph =
             if showLouvain' then

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -245,14 +245,9 @@ useGraphControls { forceAtlasS
     }
   forceAtlasState <- T.useBox forceAtlasS
   graphStage      <- T.useBox Graph.Init
-  -- multiSelectEnabled <- T.useBox false
   nodeSize <- T.useBox $ Range.Closed { min: 0.0, max: 100.0 }
-  -- removedNodeIds <- T.useBox SigmaxT.emptyNodeIds
-  -- selectedNodeIds <- T.useBox SigmaxT.emptyNodeIds
-  -- showControls    <- T.useBox false
   showEdges <- T.useBox SigmaxT.EShow
   showLouvain <- T.useBox false
-  -- sidePanelState   <- T.useBox GT.InitialClosed
   sigma <- Sigmax.initSigma
   sigmaRef <- R.useRef sigma
 

src/Gargantext/Components/GraphExplorer/ControlsToggleButton.purs

@@ -2,7 +2,6 @@ module Gargantext.Components.GraphExplorer.ControlsToggleButton
   ( Props, controlsToggleButton, controlsToggleButtonCpt
   ) where
 
-import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
@@ -16,7 +15,7 @@ here = R2.here "Gargantext.Components.GraphExplorer.ControlsToggleButton"
 
 type Props = ( state :: T.Box Boolean )
 
-controlsToggleButton :: Record Props -> R.Element
+controlsToggleButton :: R2.Leaf Props
 controlsToggleButton props = R.createElement controlsToggleButtonCpt props []
 
 controlsToggleButtonCpt :: R.Component Props

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -35,7 +35,6 @@ type Props = (
 
 toggleButton :: R2.Component Props
 toggleButton = R.createElement toggleButtonCpt
-
 toggleButtonCpt :: R.Component Props
 toggleButtonCpt = here.component "toggleButton" cpt
   where
@@ -61,7 +60,6 @@ type ControlsToggleButtonProps = (
 
 controlsToggleButton :: R2.Component ControlsToggleButtonProps
 controlsToggleButton = R.createElement controlsToggleButtonCpt
-
 controlsToggleButtonCpt :: R.Component ControlsToggleButtonProps
 controlsToggleButtonCpt = here.component "controlsToggleButton" cpt
   where
@@ -80,7 +78,6 @@ type EdgesButtonProps = (
 
 edgesToggleButton :: R2.Component EdgesButtonProps
 edgesToggleButton = R.createElement edgesToggleButtonCpt
-
 edgesToggleButtonCpt :: R.Component EdgesButtonProps
 edgesToggleButtonCpt = here.component "edgesToggleButton" cpt
   where
@@ -105,7 +102,6 @@ type LouvainToggleButtonProps = (
 
 louvainToggleButton :: R2.Component LouvainToggleButtonProps
 louvainToggleButton = R.createElement louvainToggleButtonCpt
-
 louvainToggleButtonCpt :: R.Component LouvainToggleButtonProps
 louvainToggleButtonCpt = here.component "louvainToggleButton" cpt
   where
@@ -124,7 +120,6 @@ type MultiSelectEnabledButtonProps = (
 
 multiSelectEnabledButton :: R2.Component MultiSelectEnabledButtonProps
 multiSelectEnabledButton = R.createElement multiSelectEnabledButtonCpt
-
 multiSelectEnabledButtonCpt :: R.Component MultiSelectEnabledButtonProps
 multiSelectEnabledButtonCpt = here.component "lmultiSelectEnabledButton" cpt
   where
@@ -143,7 +138,6 @@ type ForceAtlasProps = (
 
 pauseForceAtlasButton :: R2.Component ForceAtlasProps
 pauseForceAtlasButton = R.createElement pauseForceAtlasButtonCpt
-
 pauseForceAtlasButtonCpt :: R.Component ForceAtlasProps
 pauseForceAtlasButtonCpt = here.component "forceAtlasToggleButton" cpt
   where
@@ -171,7 +165,6 @@ type TreeToggleButtonProps = (
 
 treeToggleButton :: R2.Component TreeToggleButtonProps
 treeToggleButton = R.createElement treeToggleButtonCpt
-
 treeToggleButtonCpt :: R.Component TreeToggleButtonProps
 treeToggleButtonCpt = here.component "treeToggleButton" cpt
   where
@@ -190,7 +183,6 @@ type SidebarToggleButtonProps = (
 
 sidebarToggleButton :: R2.Component SidebarToggleButtonProps
 sidebarToggleButton = R.createElement sidebarToggleButtonCpt
-
 sidebarToggleButtonCpt :: R.Component SidebarToggleButtonProps
 sidebarToggleButtonCpt = here.component "sidebarToggleButton" cpt
   where

src/Gargantext/Components/GraphExplorer/TopBar.purs

+module Gargantext.Components.GraphExplorer.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.Components.App.Data (Boxes)
+import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
+import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
+import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
+import Gargantext.Utils.Reactix as R2
+
+here :: R2.Here
+here = R2.here "Gargantext.Components.GraphExplorer.TopBar"
+
+type TopBar =
+  (
+    boxes    :: Boxes
+  )
+
+topBar :: R2.Leaf TopBar
+topBar p = R.createElement topBarCpt p []
+topBarCpt :: R.Component TopBar
+topBarCpt = here.component "topBar" cpt where
+  cpt { boxes: { showTree
+               , 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: "d-flex" }
+      [ Toggle.treeToggleButton { state: showTree } []
+      , Toggle.controlsToggleButton { state: showControls } []
+      , Toggle.sidebarToggleButton { state: sidePanelState } []
+      , search
+      -- [ col [ spaces [ Toggle.treeToggleButton { state: showTree } [] ]]
+      -- , col [ spaces [ Toggle.controlsToggleButton { state: showControls } [] ]]
+      -- , col [ spaces [ Toggle.sidebarToggleButton { state: sidePanelState } [] ]]
+      -- , col [ spaces [ search ] ]
+      ]
+    where
+      -- rowToggle  = RH.div { id: "toggle-container" }
+      rowToggle  = RH.ul { className: "navbar-nav ml-auto mr-auto" }
+      -- col       = RH.div { className: "col-md-4" }
+      col = RH.li { className: "nav-item" }
+      -- spaces    = RH.div { className: "flex-space-between" }
+      spaces = RH.a { className: "nav-link" }

src/Gargantext/Components/Router.purs

@@ -17,6 +17,7 @@ import Gargantext.Components.Forest as Forest
 import Gargantext.Components.GraphExplorer as GraphExplorer
 import Gargantext.Components.GraphExplorer.Sidebar as GES
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
+import Gargantext.Components.GraphExplorer.TopBar as GETB
 import Gargantext.Components.Lang (LandingLang(LL_EN))
 import Gargantext.Components.Login (login)
 import Gargantext.Components.MainPage as MainPage
@@ -92,7 +93,7 @@ topBarCpt = here.component "topBar" cpt where
     route' <- T.useLive T.unequal boxes.route
 
     let children = case route' of
-          GR.PGraphExplorer s g -> [ GraphExplorer.topBar { boxes } ]
+          GR.PGraphExplorer s g -> [ GETB.topBar { boxes } ]
           _                     -> []
 
     pure $ TopBar.topBar { handed } children
@@ -326,27 +327,13 @@ graphExplorer :: R2.Component SessionNodeProps
 graphExplorer = R.createElement graphExplorerCpt
 graphExplorerCpt :: R.Component SessionNodeProps
 graphExplorerCpt = here.component "graphExplorer" cpt where
-  cpt props@{ boxes: boxes@{ backend
-                           , handed
-                           , route
-                           , sessions
-                           , showLogin
-                           , sidePanelGraph
-                           , sidePanelState
-                           , tasks }
+  cpt props@{ boxes
             , nodeId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed (Record.merge { content: \session ->
-                                   GraphExplorer.explorerLayout { backend
-                                                                , boxes
-                                                                , frontends: defaultFrontends
+                                   GraphExplorer.explorerLayout { boxes
                                                                 , graphId: nodeId
-                                                                , handed
-                                                                , route
-                                                                , session
-                                                                , sessions
-                                                                , showLogin
-                                                                , tasks } [] } sessionProps) []
+                                                                , session } [] } sessionProps) []
 
 home :: R2.Component Props
 home = R.createElement homeCpt

src/Gargantext/Components/TopBar.purs

@@ -84,7 +84,6 @@ logo =
 
 divDropdownLeft :: R2.Component ()
 divDropdownLeft = R.createElement divDropdownLeftCpt
-
 divDropdownLeftCpt :: R.Component ()
 divDropdownLeftCpt = here.component "divDropdownLeft" cpt
   where
@@ -160,14 +159,13 @@ type MenuButtonProps = (
 
 menuButton :: R2.Component MenuButtonProps
 menuButton = R.createElement menuButtonCpt
-
 menuButtonCpt :: R.Component MenuButtonProps
 menuButtonCpt = here.component "menuButton" cpt
   where
     cpt { element: LiNav { title, href, icon, text }, show } _ = do
       pure $ H.a { className: "dropdown-toggle navbar-text"
                 -- , data: {toggle: "dropdown"}
-                , href, title
+                , title
                 , on: { click: \_ -> T.modify_ not show }
                 , role: "button" } [
           H.span { aria: {hidden : true}, className: icon } []
@@ -182,7 +180,6 @@ type MenuElementsProps = (
 
 menuElements :: R2.Component MenuElementsProps
 menuElements = R.createElement menuElementsCpt
-
 menuElementsCpt :: R.Component MenuElementsProps
 menuElementsCpt = here.component "menuElements" cpt
   where

src/sass/_graph.sass

@@ -56,7 +56,8 @@
   #controls-container
     // position: fixed
     position: absolute
-    z-index: 999 // needs to appear above graph elements
+    // needs to appear above graph elements
+    z-index: 900
     backdrop-filter: blur(4px)
     background: rgba(255,255,255,75%)
     // overflow: auto

src/sass/_login.sass

 #dafixedtop
   // correction for the popover
-  z-index: 999
+  z-index: 910
   // height: 60px
 
 //.logoSmall

src/sass/_tree.sass

@@ -173,7 +173,7 @@ li
   position: fixed
   top: 3.7em
   width: 15%
-  z-index: 999
+  z-index: 900
 .left-handed
   .forest-layout
     left: 80%