[graph] fixed sidebar

Error is still shown because of some docView issues.

dist/styles/sass.css

@@ -642,10 +642,11 @@ li .leaf:hover a.settings {
   list-style: decimal !important;
 }
 
-#page-wrapper .cache-toggle {
+.cache-toggle {
   cursor: pointer;
 }
-#page-wrapper .side-panel {
+
+.side-panel {
   left: 70%;
   padding: 5px;
   position: fixed;
@@ -653,14 +654,14 @@ li .leaf:hover a.settings {
   background-color: #fff;
   width: 28%;
 }
-#page-wrapper .side-panel .header {
+.side-panel .header {
   float: right;
 }
-#page-wrapper .side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
+.side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
   max-height: 200px;
   overflow-y: scroll;
 }
-#page-wrapper .side-panel .corpus-doc-view .list-group .list-group-item-heading {
+.side-panel .corpus-doc-view .list-group .list-group-item-heading {
   display: inline-block;
   width: 60px;
 }

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;EACE;;;AAOF;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;;;ACvKF;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;;;ACpJE;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;;;ACrFV;EACE;;AACF;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;;;AClFF;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;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;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;;;ACvKF;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;;;ACpJE;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;;;AACF;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;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;;;ACjFF;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/App.purs

@@ -2,7 +2,6 @@ module Gargantext.Components.App (app) where
 
 import Gargantext.Prelude
 
-import Data.Maybe (Maybe(..))
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.App.Data (emptyApp)
 import Gargantext.Components.Router (router)

src/Gargantext/Components/GraphExplorer.purs

@@ -12,23 +12,12 @@ import Data.Nullable (null, Nullable)
 import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple (Tuple(..))
-import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
-import Math (log)
-import Partial.Unsafe (unsafePartial)
-import Reactix as R
-import Reactix.DOM.HTML as RH
-import Record as Record
-import Record.Extra as RX
-import Toestand as T
-
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.App.Data (Boxes)
-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.Sidebar.Types as GEST
 import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
 import Gargantext.Components.GraphExplorer.Types as GET
@@ -43,6 +32,13 @@ import Gargantext.Types as Types
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
+import Math as Math
+import Partial.Unsafe (unsafePartial)
+import Reactix as R
+import Reactix.DOM.HTML as RH
+import Record as Record
+import Record.Extra as RX
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer"
@@ -53,11 +49,9 @@ type BaseProps =
   , frontends      :: Frontends
   , graphId        :: GET.GraphId
   , handed         :: T.Box Types.Handed
-  , mMetaData'     :: Maybe GET.MetaData
   , route          :: T.Box AppRoute
   , sessions       :: T.Box Sessions
   , showLogin      :: T.Box Boolean
-  , sidePanelState :: T.Box Types.SidePanelState
   , tasks          :: T.Box GAT.Storage
   )
 
@@ -67,6 +61,13 @@ type LayoutProps =
   ( session      :: Session
   | BaseProps )
 
+type GraphWriteProps =
+  ( graph          :: SigmaxT.SGraph
+  , hyperdataGraph :: GET.HyperdataGraph
+  , mMetaData'     :: Maybe GET.MetaData
+  | LayoutProps
+  )
+
 type Props =
   ( graph          :: SigmaxT.SGraph
   , hyperdataGraph :: GET.HyperdataGraph
@@ -95,12 +96,39 @@ explorerLayoutCpt = here.component "explorerLayout" cpt where
 
     useLoader graphId (getNodes session graphVersion') handler
     where
-      handler loaded = explorer (Record.merge props { graph, hyperdataGraph: loaded, mMetaData' }) []
+      handler loaded = explorerWriteGraph (Record.merge props { graph, hyperdataGraph: loaded, mMetaData' }) []
         -- explorer (Record.merge props { graph, graphVersion, hyperdataGraph: loaded, mMetaData })
         where
           GET.HyperdataGraph { graph: hyperdataGraph } = loaded
           Tuple mMetaData' graph = convert hyperdataGraph
 
+explorerWriteGraph :: R2.Component GraphWriteProps
+explorerWriteGraph = R.createElement explorerWriteGraphCpt
+
+explorerWriteGraphCpt :: R.Component GraphWriteProps
+explorerWriteGraphCpt = here.component "explorerWriteGraph" cpt where
+  cpt props@{ boxes: { sidePanelGraph, sidePanelState }
+            , graph
+            , hyperdataGraph
+            , mMetaData' } _ = do
+      R.useEffectOnce' $ do
+        T.write_ (Just { mGraph: Just graph
+                       , mMetaData: mMetaData'
+                       , multiSelectEnabled: false
+                       , removedNodeIds: Set.empty
+                       , selectedNodeIds: Set.empty
+                       , showControls: false
+                       , sideTab: GET.SideTabLegend }) sidePanelGraph
+
+      -- { mGraph, mMetaData, sideTab } <- GEST.focusedSidePanel sidePanelGraph
+
+      -- R.useEffect' $ do
+      --   here.log2 "writing graph" graph
+      --   T.write_ (Just graph) mGraph
+      --   T.write_ mMetaData' mMetaData
+
+      pure $ explorer (RX.pick props :: Record Props) []
+
 --------------------------------------------------------------
 explorer :: R2.Component Props
 explorer = R.createElement explorerCpt
@@ -109,24 +137,23 @@ explorerCpt :: R.Component Props
 explorerCpt = here.component "explorer" cpt
   where
     cpt props@{ backend
-              , boxes: boxes@{ graphVersion, showTree, sidePanelGraph }
+              , boxes: boxes@{ graphVersion, showTree, sidePanelGraph, sidePanelState }
               , frontends
               , graph
               , graphId
               , handed
               , hyperdataGraph
-              , mMetaData'
               , route
               , session
               , sessions
               , showLogin
-              , sidePanelState
               , tasks
               } _ = do
+      { mMetaData, sideTab } <- GEST.focusedSidePanel sidePanelGraph
       handed' <- T.useLive T.unequal handed
       graphVersion' <- T.useLive T.unequal graphVersion
       graphVersionRef <- R.useRef graphVersion'
-      sidePanel <- T.useLive T.unequal sidePanelGraph
+      mMetaData' <- T.useLive T.unequal mMetaData
       -- sideTab <- T.useBox GET.SideTabLegend
 
       let startForceAtlas = maybe true (\(GET.MetaData { startForceAtlas: sfa }) -> sfa) mMetaData'
@@ -151,12 +178,6 @@ explorerCpt = here.component "explorer" cpt
       multiSelectEnabled' <- T.useLive T.unequal controls.multiSelectEnabled
       showTree' <- T.useLive T.unequal controls.showTree
       multiSelectEnabledRef <- R.useRef multiSelectEnabled'
-      { mGraph, mMetaData, sideTab } <- GEST.focusedSidePanel sidePanelGraph
-
-      R.useEffectOnce' $ do
-        here.log2 "writing graph" graph
-        T.write_ (Just graph) mGraph
-        T.write_ mMetaData' mMetaData
 
       forestOpen <- T.useBox $ (Set.empty :: OpenNodes)
       R.useEffectOnce' $ do
@@ -325,7 +346,7 @@ convert (GET.GraphData r) = Tuple r.metaData $ SigmaxT.Graph {nodes, edges}
         , hidden : false
         , id    : n.id_
         , label : n.label
-        , size  : log (toNumber n.size + 1.0)
+        , size  : Math.log (toNumber n.size + 1.0)
         , type  : modeGraphType gargType
         , x     : n.x -- cos (toNumber i)
         , y     : n.y -- sin (toNumber i)

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -95,9 +95,6 @@ controlsCpt = here.component "controls" cpt
       showControls' <- T.useLive T.unequal showControls
       sidePanelState' <- T.useLive T.unequal sidePanelState
 
-      R.useEffect' $ do
-        here.log2 "showControls" showControls'
-
       localControls <- initialLocalControls
       -- ref to track automatic FA pausing
       -- If user pauses FA before auto is triggered, clear the timeoutId

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -63,24 +63,23 @@ sidebar = R.createElement sidebarCpt
 sidebarCpt :: R.Component Props
 sidebarCpt = here.component "sidebar" cpt
   where
-    cpt props@{ metaData, sideTab } _ = do
+    cpt props@{ sideTab } _ = do
       sideTab' <- T.useLive T.unequal sideTab
 
-      let sideTabLegend' = case sideTab' of
-            GET.SideTabLegend -> sideTabLegend sideTabProps []
-            GET.SideTabData -> sideTabData sideTabProps []
-            GET.SideTabCommunity -> sideTabCommunity sideTabProps []
       pure $ RH.div { id: "sp-container" }
         [ sideTabNav { sideTab
                      , sideTabs: [GET.SideTabLegend, GET.SideTabData, GET.SideTabCommunity] } []
-        , sideTabLegend'
+        , case sideTab' of
+            GET.SideTabLegend -> sideTabLegend sideTabProps []
+            GET.SideTabData -> sideTabData sideTabProps []
+            GET.SideTabCommunity -> sideTabCommunity sideTabProps []
         ]
       where
         sideTabProps = RX.pick props :: Record SideTabProps
 
 type SideTabNavProps = (
-    sideTab         :: T.Box GET.SideTab
-  , sideTabs  :: Array GET.SideTab
+    sideTab  :: T.Box GET.SideTab
+  , sideTabs :: Array GET.SideTab
   )
 
 sideTabNav :: R2.Component SideTabNavProps
@@ -103,8 +102,8 @@ sideTabNavCpt = here.component "sideTabNav" cpt
                             <> if tab == sideTab'
                                  then " active"
                                  else ""
-              , on: { click: \_ -> T.write_ tab sideTab }
-              } [ H.text $ show tab ]
+                , on: { click: \_ -> T.write_ tab sideTab }
+                } [ H.text $ show tab ]
 
 type SideTabProps = Props
 
@@ -133,12 +132,13 @@ sideTabDataCpt = here.component "sideTabData" cpt
         [ selectedNodes (Record.merge { nodesMap: SigmaxT.nodesGraphMap props.graph } props) []
         , neighborhood props []
         , RH.div { className: "col-md-12", id: "query" }
-          [ query SearchDoc
-            props.frontends
-            props.metaData
-            props.session
-            (SigmaxT.nodesGraphMap props.graph)
-            selectedNodeIds'
+          [ query { frontends: props.frontends
+                  , metaData: props.metaData
+                  , nodesMap: SigmaxT.nodesGraphMap props.graph
+                  , searchType: SearchDoc
+                  , selectedNodeIds: selectedNodeIds'
+                  , session: props.session
+                  } []
           ]
         ]
         where
@@ -162,12 +162,13 @@ sideTabCommunityCpt = here.component "sideTabCommunity" cpt
       pure $ RH.div { className: "col-md-12", id: "query" }
         [ selectedNodes (Record.merge { nodesMap: SigmaxT.nodesGraphMap props.graph } props) []
         , neighborhood props []
-        , query SearchContact
-          props.frontends
-          props.metaData
-          props.session
-          (SigmaxT.nodesGraphMap props.graph)
-          selectedNodeIds'
+        , query { frontends: props.frontends
+                , metaData: props.metaData
+                , nodesMap: SigmaxT.nodesGraphMap props.graph
+                , searchType: SearchContact
+                , selectedNodeIds: selectedNodeIds'
+                , session: props.session
+                } []
         ]
 
 
@@ -365,35 +366,56 @@ deleteNode termList session (GET.MetaData metaData) node = do
     patch_list :: NTC.Replace TermList
     patch_list = NTC.Replace { new: termList, old: MapTerm }
 
-query :: SearchType
-      -> Frontends
-      -> GET.MetaData
-      -> Session
-      -> SigmaxT.NodesMap
-      -> SigmaxT.NodeIds
-      -> R.Element
-query _ _ _ _ _ selectedNodeIds | Set.isEmpty selectedNodeIds = RH.div {} []
-query searchType frontends (GET.MetaData metaData) session nodesMap selectedNodeIds =
-  query' (head metaData.corpusId)
-  where
-    query' Nothing         = RH.div {} []
-    query' (Just corpusId) =
-      CGT.tabs { frontends
-               , session
-               , query: SearchQuery { query : concat $ toQuery <$> Set.toUnfoldable selectedNodeIds
-                                    , expected: searchType
-                                    }
-               , sides: [side corpusId]
-               }
-
-    toQuery id = case Map.lookup id nodesMap of
-      Nothing -> []
-      Just n -> words n.label
-
-    side corpusId = GET.GraphSideCorpus { corpusId
-                                        , listId     : metaData.list.listId
-                                        , corpusLabel: metaData.title
-                                        }
+type Query =
+  ( frontends       :: Frontends
+  , metaData        :: GET.MetaData
+  , nodesMap        :: SigmaxT.NodesMap
+  , searchType      :: SearchType
+  , selectedNodeIds :: SigmaxT.NodeIds
+  , session         :: Session )
+
+query :: R2.Component Query
+query = R.createElement queryCpt
+
+queryCpt :: R.Component Query
+queryCpt = here.component "query" cpt where
+  cpt props@{ selectedNodeIds } _ = do
+
+    pure $ if Set.isEmpty selectedNodeIds
+           then RH.div {} []
+           else query' props []
+
+query' :: R2.Component Query
+query' = R.createElement queryCpt'
+
+queryCpt' :: R.Component Query
+queryCpt' = here.component "query'" cpt where
+  cpt { frontends
+      , metaData: GET.MetaData metaData
+      , nodesMap
+      , searchType
+      , selectedNodeIds
+      , session } _ = do
+    pure $ case (head metaData.corpusId) of
+      Nothing -> RH.div {} []
+      Just corpusId ->
+        CGT.tabs { frontends
+                 , query: SearchQuery { expected: searchType
+                                      , query : concat $ toQuery <$> Set.toUnfoldable selectedNodeIds
+                                      }
+                 , session
+                 , sides: [side corpusId]
+                 }
+
+    where
+      toQuery id = case Map.lookup id nodesMap of
+        Nothing -> []
+        Just n -> words n.label
+
+      side corpusId = GET.GraphSideCorpus { corpusId
+                                          , corpusLabel: metaData.title
+                                          , listId     : metaData.list.listId
+                                          }
 
 ------------------------------------------------------------------------
 

src/Gargantext/Components/Nodes/Corpus/Graph/Tabs.purs

@@ -2,12 +2,13 @@ module Gargantext.Components.Nodes.Corpus.Graph.Tabs where
 
 import Prelude hiding (div)
 import Data.Array (fromFoldable)
-import Data.Tuple (Tuple(..), fst)
+import Data.Tuple (Tuple(..))
 import Reactix as R
+
 import Gargantext.Components.GraphExplorer.Types (GraphSideCorpus(..))
 import Gargantext.Components.FacetsTable (docView)
 import Gargantext.Components.Search (SearchQuery)
-import Gargantext.Components.Table as T
+import Gargantext.Components.Table as Table
 import Gargantext.Components.Tab as Tab
 import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
@@ -31,8 +32,7 @@ tabsCpt :: R.Component Props
 tabsCpt = here.component "tabs" cpt
   where
     cpt {frontends, query, session, sides} _ = do
-      active <- R.useState' 0
-      pure $ Tab.tabs {tabs: tabs', selected: fst active}
+      pure $ Tab.tabs { selected: 0, tabs: tabs' }
       where
         tabs' = fromFoldable $ tab frontends session query <$> sides
 
@@ -42,5 +42,4 @@ tab frontends session query (GraphSideCorpus {corpusId: nodeId, corpusLabel, lis
   where
     dvProps   = {frontends, session, nodeId, listId, query, chart, totalRecords: 0, container}
     chart     = mempty
-    container = T.graphContainer {title: corpusLabel}
-
+    container = Table.graphContainer {title: corpusLabel}

src/Gargantext/Components/Router.purs

@@ -207,10 +207,11 @@ openedSidePanelCpt = here.component "openedSidePanel" cpt where
     mGraphMetaData' <- T.useLive T.unequal mMetaData
 
     let className = "side-panel"
+    let wrapper = H.div { className }
 
     case route' of
       GR.Lists s n -> do
-        pure $ H.div { className }
+        pure $ wrapper
           [ Lists.sidePanel { session: session'
                             , sidePanel: sidePanelLists
                             , sidePanelState } [] ]
@@ -220,10 +221,10 @@ openedSidePanelCpt = here.component "openedSidePanel" cpt where
           here.log2 "mGraphMetaData" mGraphMetaData'
 
         case (mGraph' /\ mGraphMetaData') of
-          (Nothing /\ _) -> pure $ H.div {} []
-          (_ /\ Nothing) -> pure $ H.div {} []
+          (Nothing /\ _) -> pure $ wrapper []
+          (_ /\ Nothing) -> pure $ wrapper []
           (Just graph /\ Just metaData) -> do
-            pure $ H.div { className }
+            pure $ wrapper
               [ GES.sidebar { frontends: defaultFrontends
                             , graph
                             , graphId: g
@@ -236,11 +237,11 @@ openedSidePanelCpt = here.component "openedSidePanel" cpt where
                             , sideTab
                             } [] ]
       GR.Texts s n -> do
-        pure $ H.div { className }
+        pure $ wrapper
           [ Texts.sidePanel { session: session'
                             , sidePanel: sidePanelTexts
                             , sidePanelState } [] ]
-      _ -> pure $ H.div {} []
+      _ -> pure $ wrapper []
 
 annuaire :: R2.Component SessionNodeProps
 annuaire = R.createElement annuaireCpt
@@ -303,6 +304,35 @@ documentCpt = here.component "document" cpt where
       documentMainLayout { listId, nodeId, mCorpusId, session } []
       where mCorpusId = Nothing
 
+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 }
+            , nodeId
+            , session } _ = do
+    let sessionProps = RE.pick props :: Record SessionProps
+    pure $ authed sessionProps $
+      -- simpleLayout { handed }
+      GraphExplorer.explorerLayoutLoader { backend
+                                         , boxes
+                                         , frontends: defaultFrontends
+                                         , graphId: nodeId
+                                         , handed
+                                         , route
+                                         , session
+                                         , sessions
+                                         , showLogin
+                                         , tasks } []
+
 home :: R2.Component Props
 home = R.createElement homeCpt
 
@@ -348,39 +378,6 @@ login' { backend, sessions, showLogin: visible } =
         , sessions
         , visible }
 
-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 }
-            , nodeId
-            , session } _ = do
-    { mMetaData } <- GEST.focusedSidePanel sidePanelGraph
-    mMetaData' <- T.useLive T.unequal mMetaData
-    let sessionProps = RE.pick props :: Record SessionProps
-    pure $ authed sessionProps $
-      -- simpleLayout { handed }
-      GraphExplorer.explorerLayoutLoader { backend
-                                         , boxes
-                                         , frontends: defaultFrontends
-                                         , graphId: nodeId
-                                         , handed
-                                         , mMetaData'
-                                         , route
-                                         , session
-                                         , sessions
-                                         , showLogin
-                                         , sidePanelState
-                                         , tasks } []
-
 routeFile :: R2.Component SessionNodeProps
 routeFile = R.createElement routeFileCpt
 

src/sass/_styles.sass

-#page-wrapper
-  .cache-toggle
-    cursor: pointer
-  .side-panel
-    //background-color: $dark
-    left: 70%
-    padding: 5px
-    position: fixed
-    top: 60px
-    background-color: #fff
-    width: 28%
-    .header
-      float: right
-    .corpus-doc-view
-      .annotated-field-wrapper
-        .annotated-field-runs
-          max-height: 200px
-          overflow-y: scroll
-      .list-group
-        .list-group-item-heading
-          display: inline-block
-          width: 60px
+.cache-toggle
+  cursor: pointer
+.side-panel
+  //background-color: $dark
+  left: 70%
+  padding: 5px
+  position: fixed
+  top: 60px
+  background-color: #fff
+  width: 28%
+  .header
+    float: right
+  .corpus-doc-view
+    .annotated-field-wrapper
+      .annotated-field-runs
+        max-height: 200px
+        overflow-y: scroll
+    .list-group
+      .list-group-item-heading
+        display: inline-block
+        width: 60px
 
 .simple-layout
   height: 100%