[forest] rewrite graph explorer to new forest/sidebar/topbar layout

NOTE: This still doesn't work fully

src/Gargantext/Components/App/Data.purs

@@ -5,49 +5,70 @@ import Data.Maybe (Maybe(..))
 import Toestand as T
 
 import Gargantext.AsyncTasks as GAT
+import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
+import Gargantext.Components.Nodes.Lists.Types as ListsT
+import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Ends (Backend)
 import Gargantext.Routes (AppRoute(Home))
 import Gargantext.Sessions as Sessions
 import Gargantext.Sessions (OpenNodes, Sessions)
-import Gargantext.Types (Handed(RightHanded))
+import Gargantext.Types (Handed(RightHanded), SidePanelState(..))
 import Gargantext.Utils.Toestand as T2
 
 type App =
-  { backend      :: Maybe Backend
-  , forestOpen   :: OpenNodes
-  , handed       :: Handed
-  , reloadForest :: Int
-  , reloadRoot   :: Int
-  , route        :: AppRoute
-  , sessions     :: Sessions
-  , showCorpus   :: Boolean
-  , showLogin    :: Boolean
-  , tasks        :: GAT.Storage
+  { backend                 :: Maybe Backend
+  , forestOpen              :: OpenNodes
+  , graphVersion            :: T2.Reload
+  , handed                  :: Handed
+  , reloadForest            :: Int
+  , reloadRoot              :: Int
+  , route                   :: AppRoute
+  , sessions                :: Sessions
+  , showCorpus              :: Boolean
+  , showLogin               :: Boolean
+  , showTree                :: Boolean
+  , sidePanelGraph          :: Maybe (Record GEST.SidePanel)
+  , sidePanelLists          :: Maybe (Record ListsT.SidePanel)
+  , sidePanelTexts          :: Maybe (Record TextsT.SidePanel)
+  , sidePanelState          :: SidePanelState
+  , tasks                   :: GAT.Storage
   }
 
 emptyApp :: App
 emptyApp =
-  { backend:      Nothing
-  , forestOpen:   Set.empty
-  , handed:       RightHanded
-  , reloadForest: T2.newReload
-  , reloadRoot:   T2.newReload
-  , route:        Home
-  , sessions:     Sessions.empty
-  , showCorpus:   false
-  , showLogin:    false
-  , tasks:        GAT.empty
+  { backend                 : Nothing
+  , forestOpen              : Set.empty
+  , graphVersion            : T2.newReload
+  , handed                  : RightHanded
+  , reloadForest            : T2.newReload
+  , reloadRoot              : T2.newReload
+  , route                   : Home
+  , sessions                : Sessions.empty
+  , showCorpus              : false
+  , showLogin               : false
+  , showTree                : true
+  , sidePanelGraph          : GEST.initialSidePanel
+  , sidePanelLists          : ListsT.initialSidePanel
+  , sidePanelTexts          : TextsT.initialSidePanel
+  , sidePanelState          : InitialClosed
+  , tasks                   : GAT.empty
   }
 
 type Boxes =
-  { backend      :: T.Box (Maybe Backend)
-  , forestOpen   :: T.Box OpenNodes
-  , handed       :: T.Box Handed
-  , reloadForest :: T.Box T2.Reload
-  , reloadRoot   :: T.Box T2.Reload
-  , route        :: T.Box AppRoute
-  , sessions     :: T.Box Sessions
-  , showCorpus   :: T.Box Boolean
-  , showLogin    :: T.Box Boolean
-  , tasks        :: T.Box GAT.Storage
+  { backend                 :: T.Box (Maybe Backend)
+  , forestOpen              :: T.Box OpenNodes
+  , graphVersion            :: T2.ReloadS
+  , handed                  :: T.Box Handed
+  , reloadForest            :: T.Box T2.Reload
+  , reloadRoot              :: T.Box T2.Reload
+  , route                   :: T.Box AppRoute
+  , sessions                :: T.Box Sessions
+  , showCorpus              :: T.Box Boolean
+  , showLogin               :: T.Box Boolean
+  , showTree                :: T.Box Boolean
+  , sidePanelGraph          :: T.Box (Maybe (Record GEST.SidePanel))
+  , sidePanelLists          :: T.Box (Maybe (Record ListsT.SidePanel))
+  , sidePanelTexts          :: T.Box (Maybe (Record TextsT.SidePanel))
+  , sidePanelState          :: T.Box SidePanelState
+  , tasks                   :: T.Box GAT.Storage
   }

src/Gargantext/Components/DocsTable.purs

@@ -15,11 +15,11 @@ import Data.Set (Set)
 import Data.Set as Set
 import Data.String as Str
 import Data.Symbol (SProxy(..))
-import Data.Tuple (Tuple(..), fst)
-import Data.Tuple.Nested ((/\))
+import Data.Tuple (Tuple(..))
+import DOM.Simple.Console (log2)
 import DOM.Simple.Event as DE
 import Effect (Effect)
-import Effect.Aff (Aff)
+import Effect.Aff (Aff, launchAff_)
 import Effect.Class (liftEffect)
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -31,14 +31,14 @@ import Gargantext.Components.DocsTable.Types
   ( DocumentsView(..), Hyperdata(..), LocalUserScore, Query, Response(..), sampleData )
 import Gargantext.Components.Table.Types as TT
 import Gargantext.Components.Nodes.Lists.Types as NT
-import Gargantext.Components.Nodes.Texts.Types (SidePanelTriggers)
+import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Components.Table as TT
 import Gargantext.Ends (Frontends, url)
 import Gargantext.Hooks.Loader (useLoader, useLoaderWithCacheAPI, HashedResponse(..))
 import Gargantext.Routes as Routes
 import Gargantext.Routes (SessionRoute(NodeAPI))
 import Gargantext.Sessions (Session, sessionId, get, delete)
-import Gargantext.Types (ListId, NodeID, NodeType(..), OrderBy(..), TableResult, TabSubType, TabType, showTabType')
+import Gargantext.Types (ListId, NodeID, NodeType(..), OrderBy(..), SidePanelState(..), TableResult, TabSubType, TabType, showTabType')
 import Gargantext.Utils (sortWith)
 import Gargantext.Utils.CacheAPI as GUC
 import Gargantext.Utils.QueryString (joinQueryStrings, mQueryParamS, queryParam, queryParamS)
@@ -58,36 +58,35 @@ type Path a =
   , tabType   :: TabSubType a
   )
 
-type LayoutProps =
-  ( cacheState      :: T.Box NT.CacheState
-  , frontends       :: Frontends
-  , chart           :: R.Element
-  , listId          :: Int
-  , mCorpusId       :: Maybe Int
-  , nodeId          :: Int
-  -- , path         :: Record (Path a)
-  , session         :: Session
-  , showSearch      :: Boolean
-  , sidePanelTriggers :: Record SidePanelTriggers
-  , tabType         :: TabType
+type CommonProps =
+  ( cacheState     :: T.Box NT.CacheState
+  , frontends      :: Frontends
+  , listId         :: Int
+  , mCorpusId      :: Maybe Int
+  , nodeId         :: Int
+  , session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record TextsT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
+  , tabType        :: TabType
   -- ^ tabType is not ideal here since it is too much entangled with tabs and
   -- ngramtable. Let's see how this evolves.  )
-  , totalRecords    :: Int
+  , totalRecords  :: Int
+  )
+
+type LayoutProps =
+  (
+    chart      :: R.Element
+  , showSearch :: Boolean
+  | CommonProps
+  -- , path      :: Record (Path a)
   )
 
 type PageLayoutProps =
-  ( cacheState        :: T.Box NT.CacheState
-  , frontends         :: Frontends
-  , key               :: String  -- NOTE Necessary to clear the component when cache state changes
-  , listId            :: Int
-  , mCorpusId         :: Maybe Int
-  , nodeId            :: Int
-  , params            :: TT.Params
-  , query             :: Query
-  , session           :: Session
-  , sidePanelTriggers :: Record SidePanelTriggers
-  , tabType           :: TabType
-  , totalRecords      :: Int
+  (
+    key    :: String  -- NOTE Necessary to clear the component when cache state changes
+  , params :: TT.Params
+  , query  :: Query
+  | CommonProps
   )
 
 _documentIdsDeleted  = prop (SProxy :: SProxy "documentIdsDeleted")
@@ -123,7 +122,8 @@ docViewCpt = here.component "docView" cpt where
                 , nodeId
                 , session
                 , showSearch
-                , sidePanelTriggers
+                , sidePanel
+                , sidePanelState
                 , tabType
                 , totalRecords
                 }
@@ -147,7 +147,8 @@ docViewCpt = here.component "docView" cpt where
                        , params
                        , query: query'
                        , session
-                       , sidePanelTriggers
+                       , sidePanel
+                       , sidePanelState
                        , tabType
                        , totalRecords
                        } ] ] ]
@@ -259,7 +260,7 @@ pageLayoutCpt = here.component "pageLayout" cpt where
             , params
             , query
             , session
-            , sidePanelTriggers
+            , sidePanel
             , tabType } _ = do
     cacheState' <- T.useLive T.unequal cacheState
 
@@ -373,7 +374,8 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
                 , mCorpusId
                 , nodeId
                 , session
-                , sidePanelTriggers: sidePanelTriggers@{ currentDocIdRef }
+                , sidePanel
+                , sidePanelState
                 , totalRecords }
       , localCategories
       , params } _ = do
@@ -381,13 +383,15 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
     reload <- T.useBox T2.newReload
 
     localCategories' <- T.useLive T.unequal localCategories
+    sidePanel' <- T.useLive T.unequal sidePanel
+    let mCurrentDocId = maybe Nothing (_.mCurrentDocId) sidePanel'
 
     pure $ TT.table
-      { syncResetButton : [ H.div {} [] ]
-      , colNames
+      { colNames
       , container: TT.defaultContainer { title: "Documents" }
       , params
-      , rows: rows reload localCategories'
+      , rows: rows reload localCategories' mCurrentDocId
+      , syncResetButton : [ H.div {} [] ]
       , totalRecords
       , wrapColElts
       }
@@ -403,14 +407,20 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
           | otherwise = Routes.Document sid listId
         colNames = TT.ColumnName <$> [ "Show", "Tag", "Date", "Title", "Source", "Score" ]
         wrapColElts = const identity
-        rows reload localCategories' = row <$> A.toUnfoldable documents
+        rows reload localCategories' mCurrentDocId = row <$> A.toUnfoldable documents
           where
             row dv@(DocumentsView r@{ _id, category }) =
               { row:
                 TT.makeRow [ -- H.div {} [ H.a { className, style, on: {click: click Favorite} } [] ]
                             H.div { className: "" }
-                                  [ docChooser { listId, mCorpusId, nodeId: r._id, selected, sidePanelTriggers, tableReload: reload } []
-                                                                   ]
+                                  [ docChooser { listId
+                                               , mCorpusId
+                                               , nodeId: r._id
+                                               , selected
+                                               , sidePanel
+                                               , sidePanelState
+                                               , tableReload: reload } []
+                                  ]
                           --, H.div { className: "column-tag flex" } [ caroussel { category: cat, nodeId, row: dv, session, setLocalCategories } [] ]
                           , H.div { className: "column-tag flex" }
                                   [ rating { nodeId
@@ -434,15 +444,16 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
                 -- checked    = Star_1 == cat
                 tClassName = trashClassName cat selected
                 className  = gi cat
-                selected   = R.readRef currentDocIdRef == Just r._id
+                selected = mCurrentDocId == Just r._id
 
 type DocChooser = (
-    listId            :: ListId
-  , mCorpusId         :: Maybe NodeID
-  , nodeId            :: NodeID
-  , selected          :: Boolean
-  , sidePanelTriggers :: Record SidePanelTriggers
-  , tableReload       :: T2.ReloadS
+    listId         :: ListId
+  , mCorpusId      :: Maybe NodeID
+  , nodeId         :: NodeID
+  , selected       :: Boolean
+  , sidePanel      :: T.Box (Maybe (Record TextsT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
+  , tableReload    :: T2.ReloadS
   )
 
 docChooser :: R2.Component DocChooser
@@ -458,7 +469,8 @@ docChooserCpt = here.component "docChooser" cpt
         , mCorpusId: Just corpusId
         , nodeId
         , selected
-        , sidePanelTriggers: { triggerAnnotatedDocIdChange }
+        , sidePanel
+        , sidePanelState
         , tableReload } _ = do
 
       let eyeClass = if selected then "fa-eye" else "fa-eye-slash"
@@ -472,8 +484,14 @@ docChooserCpt = here.component "docChooser" cpt
           -- log2 "[docChooser] onClick, listId" listId
           -- log2 "[docChooser] onClick, corpusId" corpusId
           -- log2 "[docChooser] onClick, nodeId" nodeId
-          R2.callTrigger triggerAnnotatedDocIdChange { corpusId, listId, nodeId }
-          T2.reload tableReload
+          -- R2.callTrigger triggerAnnotatedDocIdChange { corpusId, listId, nodeId }
+          -- T2.reload tableReload
+          T.write_ (Just { corpusId: corpusId
+                         , listId: listId
+                         , mCurrentDocId: Nothing
+                         , nodeId: nodeId }) sidePanel
+          T.write_ Opened sidePanelState
+          log2 "[docChooser] sidePanel opened" sidePanelState
 
 
 newtype SearchQuery = SearchQuery {

src/Gargantext/Components/GraphExplorer.purs

@@ -14,20 +14,14 @@ 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
 import Gargantext.Data.Louvain as Louvain
@@ -41,32 +35,40 @@ 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 (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
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer"
 
 type BaseProps =
-  ( backend       :: T.Box (Maybe Backend)
-  , frontends     :: Frontends
-  , 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
+  ( backend        :: T.Box (Maybe Backend)
+  , boxes          :: Boxes
+  , 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
   )
 
 type LayoutLoaderProps = ( session :: R.Context Session | BaseProps )
 
 type LayoutProps =
-  ( graphVersion :: T2.ReloadS
-  , session :: Session
+  ( session      :: Session
   | BaseProps )
 
 type Props =
   ( graph          :: SigmaxT.SGraph
   , hyperdataGraph :: GET.HyperdataGraph
-  , mMetaData      :: Maybe GET.MetaData
   | LayoutProps
   )
 
@@ -77,10 +79,9 @@ explorerLayoutLoader = R.createElement explorerLayoutLoaderCpt
 explorerLayoutLoaderCpt :: R.Component LayoutLoaderProps
 explorerLayoutLoaderCpt = here.component "explorerLayoutLoader" cpt where
   cpt props _ = do
-    graphVersion <- T.useBox T2.newReload
-    session <- R.useContext props.session -- todo: ugh, props fiddling
+    session <- R.useContext props.session -- TODO: ugh, props fiddling
     let base = RX.pick props :: Record BaseProps
-    let props' = Record.merge base { graphVersion, session }
+    let props' = Record.merge base { session }
     pure $ explorerLayout props' []
     
 explorerLayout :: R2.Component LayoutProps
@@ -88,16 +89,16 @@ explorerLayout = R.createElement explorerLayoutCpt
 
 explorerLayoutCpt :: R.Component LayoutProps
 explorerLayoutCpt = here.component "explorerLayout" cpt where
-  cpt props@{ backend, graphId, graphVersion, session } _ = do
+  cpt props@{ backend, boxes: { graphVersion }, graphId, session } _ = do
     graphVersion' <- T.useLive T.unequal graphVersion
 
     useLoader graphId (getNodes session graphVersion') handler
     where
-      handler loaded = explorer (Record.merge props { graph, hyperdataGraph: loaded, mMetaData }) []
+      handler loaded = explorer (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
+          Tuple mMetaData' graph = convert hyperdataGraph
 
 --------------------------------------------------------------
 explorer :: R2.Component Props
@@ -107,24 +108,27 @@ explorerCpt :: R.Component Props
 explorerCpt = here.component "explorer" cpt
   where
     cpt props@{ backend
+              , boxes: boxes@{ graphVersion, sidePanelGraph }
               , frontends
               , graph
               , graphId
-              , graphVersion
               , handed
               , hyperdataGraph
-              , mMetaData
+              , mMetaData'
               , route
               , session
               , sessions
               , showLogin
+              , sidePanelState
               , tasks
               } _ = do
       handed' <- T.useLive T.unequal handed
       graphVersion' <- T.useLive T.unequal graphVersion
       graphVersionRef <- R.useRef graphVersion'
+      sidePanel <- T.useLive T.unequal sidePanelGraph
+      -- sideTab <- T.useBox GET.SideTabLegend
 
-      let startForceAtlas = maybe true (\(GET.MetaData { startForceAtlas: sfa }) -> sfa) mMetaData
+      let startForceAtlas = maybe true (\(GET.MetaData { startForceAtlas: sfa }) -> sfa) mMetaData'
 
       let forceAtlasS = if startForceAtlas
                           then SigmaxT.InitialRunning
@@ -139,10 +143,17 @@ explorerCpt = here.component "explorer" cpt
                                             , hyperdataGraph
                                             , reloadForest: \_ -> T2.reload reloadForest
                                             , session
+                                            , sidePanel: sidePanelGraph
+                                            , sidePanelState
                                             }
       multiSelectEnabled' <- T.useLive T.unequal controls.multiSelectEnabled
       showTree' <- T.useLive T.unequal controls.showTree
       multiSelectEnabledRef <- R.useRef multiSelectEnabled'
+      sidePanel@{ mGraph, mMetaData, sideTab } <- GEST.focusedSidePanel sidePanelGraph
+
+      R.useEffectOnce' $ do
+        T.write_ (Just graph) mGraph
+        T.write_ mMetaData' mMetaData
 
       forestOpen <- T.useBox $ Set.empty
       R.useEffectOnce' $ do
@@ -166,22 +177,14 @@ explorerCpt = here.component "explorer" cpt
           T.write_ SigmaxT.EShow controls.showEdges
           T.write_ forceAtlasS controls.forceAtlasState
           T.write_ Graph.Init controls.graphStage
-          T.write_ GET.InitialClosed controls.showSidePanel
+          T.write_ Types.InitialClosed controls.sidePanelState
 
       pure $
         RH.div { className: "graph-meta-container" } [
-          RH.div { className: "fixed-top navbar navbar-expand-lg"
-                 , id: "graph-explorer" }
-            [ rowToggle
-                    [ col [ spaces [ Toggle.treeToggleButton { state: controls.showTree } [] ]]
-                    , col [ spaces [ Toggle.controlsToggleButton { state: controls.showControls } [] ]]
-                    , col [ spaces [ Toggle.sidebarToggleButton { state: controls.showSidePanel } [] ]]
-                    , col [ spaces [ nodeSearchControl { graph
-                                                       , multiSelectEnabled: controls.multiSelectEnabled
-                                                       , selectedNodeIds: controls.selectedNodeIds } [] ] ]
-                    ]
-            ]
-        , RH.div { className: "graph-container" } [
+          -- RH.div { className: "fixed-top navbar navbar-expand-lg"
+          --        , id: "graph-explorer" }
+          --   [ topBar { controls, graph } [] ]
+          RH.div { className: "graph-container" } [
             inner handed' [
               rowControls [ Controls.controls controls ]
             , RH.div { className: "row graph-row" } $ mainLayout handed' $
@@ -207,18 +210,17 @@ explorerCpt = here.component "explorer" cpt
                           , hyperdataGraph
                           , mMetaData
                           , multiSelectEnabledRef
-                          }
+                          } []
                 /\
-                mSidebar mMetaData { frontends
-                                   , graph
-                                   , graphId
-                                   , graphVersion
-                                   , removedNodeIds : controls.removedNodeIds
-                                   , session
-                                   , selectedNodeIds: controls.selectedNodeIds
-                                   , showSidePanel  :   controls.showSidePanel
-                                   , reloadForest
-                                   }
+                mSidebar (Record.merge sidePanel { frontends
+                                                 , graph
+                                                 , graphId
+                                                 , graphVersion
+                                                 , reloadForest
+                                                 , removedNodeIds : controls.removedNodeIds
+                                                 , session
+                                                 , sideTab
+                                                 }) []
             ]
           ]
         ]
@@ -232,15 +234,9 @@ explorerCpt = here.component "explorer" cpt
         hClass = case h of
           Types.LeftHanded  -> "lefthanded"
           Types.RightHanded -> "righthanded"
-    -- rowToggle  = RH.div { id: "toggle-container" }
-    rowToggle  = RH.ul { className: "navbar-nav ml-auto mr-auto" }
     rowControls = RH.div { id: "controls-container" }
-    -- col       = RH.div { className: "col-md-4" }
-    col = RH.li { className: "nav-item" }
     pullLeft  = RH.div { className: "pull-left"  }
     pullRight = RH.div { className: "pull-right" }
-    -- spaces    = RH.div { className: "flex-space-between" }
-    spaces = RH.a { className: "nav-link" }
 
 
     tree :: Record TreeProps -> R.Element
@@ -259,12 +255,66 @@ explorerCpt = here.component "explorer" cpt
                , tasks } []
       ]
 
-    mSidebar :: Maybe GET.MetaData
-             -> Record MSidebarProps
-             -> R.Element
-    mSidebar  Nothing            _ = RH.div {} []
-    mSidebar (Just metaData) props =
-      Sidebar.sidebar (Record.merge props { metaData })
+type MSideBar =
+  (
+    mGraph             :: T.Box (Maybe SigmaxT.SGraph)
+  , mMetaData          :: T.Box (Maybe GET.MetaData)
+  , multiSelectEnabled :: T.Box Boolean
+  -- , selectedNodeIds    :: T.Box SigmaxT.NodeIds
+  , showControls       :: T.Box Boolean
+  | MSidebarProps
+  )
+
+mSidebar :: R2.Component MSideBar
+mSidebar = R.createElement mSidebarCpt
+
+mSidebarCpt :: R.Component MSideBar
+mSidebarCpt = here.component "mSidebar" cpt where
+  cpt props@{ mMetaData } _ = do
+    mMetaData' <- T.useLive T.unequal mMetaData
+
+    case mMetaData' of
+      Nothing       -> pure $ RH.div {} []
+      Just metaData -> do
+        pure $ Sidebar.sidebar (Record.merge (RX.pick props :: Record MSidebarProps) { metaData }) []
+
+type TopBar =
+ (
+   boxes    :: Boxes
+ )
+
+topBar :: R2.Component TopBar
+topBar = R.createElement topBarCpt
+
+topBarCpt :: R.Component TopBar
+topBarCpt = here.component "topBar" cpt where
+  cpt { boxes: { showTree
+               , sidePanelGraph
+               , sidePanelState } } _ = do
+    sidePanelGraph' <- T.useLive T.unequal sidePanelGraph
+    let mGraph = maybe Nothing (_.mGraph) sidePanelGraph'
+
+    { multiSelectEnabled, selectedNodeIds, showControls } <- GEST.focusedSidePanel sidePanelGraph
+
+    let search = case mGraph of
+          Just graph -> nodeSearchControl { graph
+                                         , multiSelectEnabled
+                                         , selectedNodeIds } []
+          Nothing -> RH.div {} []
+
+    pure $ rowToggle
+      [ 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 TreeProps = (
     backend      :: T.Box (Maybe Backend)
@@ -289,7 +339,7 @@ type MSidebarProps =
   , removedNodeIds  :: T.Box SigmaxT.NodeIds
   , selectedNodeIds :: T.Box SigmaxT.NodeIds
   , session         :: Session
-  , showSidePanel   :: T.Box GET.SidePanelState
+  , sideTab         :: T.Box GET.SideTab
   )
 
 type GraphProps = (
@@ -298,13 +348,13 @@ type GraphProps = (
   , graphId               :: GET.GraphId
   , graph                 :: SigmaxT.SGraph
   , hyperdataGraph        :: GET.HyperdataGraph
-  , mMetaData             :: Maybe GET.MetaData
+  , mMetaData             :: T.Box (Maybe GET.MetaData)
   , multiSelectEnabledRef :: R.Ref Boolean
 )
 
-graphView :: Record GraphProps -> R.Element
+graphView :: R2.Component GraphProps
 --graphView sigmaRef props = R.createElement (R.memo el memoCmp) props []
-graphView props = R.createElement graphViewCpt props []
+graphView = R.createElement graphViewCpt
 
 graphViewCpt :: R.Component GraphProps
 graphViewCpt = here.component "graphView" cpt
@@ -318,6 +368,7 @@ graphViewCpt = here.component "graphView" cpt
         , multiSelectEnabledRef } _children = do
       edgeConfluence' <- T.useLive T.unequal controls.edgeConfluence
       edgeWeight' <- T.useLive T.unequal controls.edgeWeight
+      mMetaData' <- T.useLive T.unequal mMetaData
       multiSelectEnabled' <- T.useLive T.unequal controls.multiSelectEnabled
       nodeSize' <- T.useLive T.unequal controls.nodeSize
       removedNodeIds' <- T.useLive T.unequal controls.removedNodeIds
@@ -334,12 +385,12 @@ graphViewCpt = here.component "graphView" cpt
             else
               graph
       let transformedGraph = transformGraph louvainGraph { edgeConfluence'
-                                                                  , edgeWeight'
-                                                                  , nodeSize'
-                                                                  , removedNodeIds'
-                                                                  , selectedNodeIds'
-                                                                  , showEdges' }
-      let startForceAtlas = maybe true (\(GET.MetaData { startForceAtlas: sfa }) -> sfa) mMetaData
+                                                         , edgeWeight'
+                                                         , nodeSize'
+                                                         , removedNodeIds'
+                                                         , selectedNodeIds'
+                                                         , showEdges' }
+      let startForceAtlas = maybe true (\(GET.MetaData { startForceAtlas: sfa }) -> sfa) mMetaData'
 
       R.useEffect1' multiSelectEnabled' $ do
         R.setRef multiSelectEnabledRef multiSelectEnabled'

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -24,10 +24,12 @@ import Gargantext.Components.GraphExplorer.Button (centerButton, cameraButton)
 import Gargantext.Components.GraphExplorer.RangeControl (edgeConfluenceControl, edgeWeightControl, nodeSizeControl)
 import Gargantext.Components.GraphExplorer.SlideButton (labelSizeButton, mouseSelectorSizeButton)
 import Gargantext.Components.GraphExplorer.ToggleButton (multiSelectEnabledButton, edgesToggleButton, louvainToggleButton, pauseForceAtlasButton)
+import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Sessions (Session)
+import Gargantext.Types as GT
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 
@@ -51,7 +53,7 @@ type Controls =
   , showControls       :: T.Box Boolean
   , showEdges          :: T.Box SigmaxT.ShowEdgesState
   , showLouvain        :: T.Box Boolean
-  , showSidePanel      :: T.Box GET.SidePanelState
+  , sidePanelState     :: T.Box GT.SidePanelState
   , showTree           :: T.Box Boolean
   , sigmaRef           :: R.Ref Sigmax.Sigma
   )
@@ -85,14 +87,14 @@ controlsCpt = here.component "controls" cpt
         , showControls
         , showEdges
         , showLouvain
-        , showSidePanel
         , showTree
+        , sidePanelState
         , sigmaRef } _ = do
       forceAtlasState' <- T.useLive T.unequal forceAtlasState
       graphStage' <- T.useLive T.unequal graphStage
       selectedNodeIds' <- T.useLive T.unequal selectedNodeIds
       showControls' <- T.useLive T.unequal showControls
-      showSidePanel' <- T.useLive T.unequal showSidePanel
+      sidePanelState' <- T.useLive T.unequal sidePanelState
 
       localControls <- initialLocalControls
       -- ref to track automatic FA pausing
@@ -115,8 +117,8 @@ controlsCpt = here.component "controls" cpt
 
       -- Automatic opening of sidebar when a node is selected (but only first time).
       R.useEffect' $ do
-        if showSidePanel' == GET.InitialClosed && (not Set.isEmpty selectedNodeIds') then
-          T.write_ (GET.Opened GET.SideTabData) showSidePanel
+        if sidePanelState' == GT.InitialClosed && (not Set.isEmpty selectedNodeIds') then
+          T.write_ GT.Opened sidePanelState
         else
           pure unit
 
@@ -221,15 +223,19 @@ useGraphControls :: { forceAtlasS :: SigmaxT.ForceAtlasState
                    , graph :: SigmaxT.SGraph
                    , graphId :: GET.GraphId
                    , hyperdataGraph :: GET.HyperdataGraph
+                   , reloadForest :: Unit -> Effect Unit
                    , session :: Session
-                   , reloadForest :: Unit -> Effect Unit }
+                   , sidePanel :: T.Box (Maybe (Record GEST.SidePanel))
+                   , sidePanelState :: T.Box GT.SidePanelState }
                  -> R.Hooks (Record Controls)
 useGraphControls { forceAtlasS
                  , graph
                  , graphId
                  , hyperdataGraph
+                 , reloadForest
                  , session
-                 , reloadForest } = do
+                 , sidePanel
+                 , sidePanelState } = do
   edgeConfluence <- T.useBox $ Range.Closed { min: 0.0, max: 1.0 }
   edgeWeight <- T.useBox $ Range.Closed {
       min: 0.0
@@ -237,18 +243,20 @@ useGraphControls { forceAtlasS
     }
   forceAtlasState <- T.useBox forceAtlasS
   graphStage      <- T.useBox Graph.Init
-  multiSelectEnabled <- T.useBox false
+  -- 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
+  -- removedNodeIds <- T.useBox SigmaxT.emptyNodeIds
+  -- selectedNodeIds <- T.useBox SigmaxT.emptyNodeIds
+  -- showControls    <- T.useBox false
   showEdges <- T.useBox SigmaxT.EShow
   showLouvain <- T.useBox false
-  showSidePanel   <- T.useBox GET.InitialClosed
+  -- sidePanelState   <- T.useBox GT.InitialClosed
   showTree <- T.useBox false
   sigma <- Sigmax.initSigma
   sigmaRef <- R.useRef sigma
 
+  { multiSelectEnabled, removedNodeIds, selectedNodeIds, showControls } <- GEST.focusedSidePanel sidePanel
+
   pure { edgeConfluence
        , edgeWeight
        , forceAtlasState
@@ -264,7 +272,7 @@ useGraphControls { forceAtlasS
        , showControls
        , showEdges
        , showLouvain
-       , showSidePanel
+       , sidePanelState
        , showTree
        , sigmaRef
        , reloadForest

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -23,13 +23,12 @@ import Toestand as T
 import Gargantext.Prelude
 
 import Gargantext.Components.Lang (Lang(..))
-import Gargantext.Components.Search (SearchType(..), SearchQuery(..))
-import Gargantext.Components.GraphExplorer.Types  as GET
-import Gargantext.Components.GraphExplorer.Types  (SidePanelState(..), SideTab(..))
+import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Components.GraphExplorer.Legend as Legend
 import Gargantext.Components.NgramsTable.Core as NTC
 import Gargantext.Components.Nodes.Corpus.Graph.Tabs (tabs) as CGT
 import Gargantext.Components.RandomText (words)
+import Gargantext.Components.Search (SearchType(..), SearchQuery(..))
 import Gargantext.Data.Array (mapMaybe)
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
@@ -54,38 +53,34 @@ type Props = (
     frontends       :: Frontends
   , graph           :: SigmaxT.SGraph
   , graphVersion    :: T2.ReloadS
-  , showSidePanel   :: T.Box GET.SidePanelState
+  , sideTab         :: T.Box GET.SideTab
   | Common
   )
 
-sidebar :: Record Props -> R.Element
-sidebar props = R.createElement sidebarCpt props []
+sidebar :: R2.Component Props
+sidebar = R.createElement sidebarCpt
 
 sidebarCpt :: R.Component Props
 sidebarCpt = here.component "sidebar" cpt
   where
-    cpt props@{ metaData, showSidePanel } _ = do
-      showSidePanel' <- T.useLive T.unequal showSidePanel
-
-      case showSidePanel' of
-        GET.Closed -> pure $ RH.div {} []
-        GET.InitialClosed -> pure $ RH.div {} []
-        GET.Opened sideTabT -> do
-          let sideTab' = case sideTabT of
-                SideTabLegend -> sideTabLegend sideTabProps []
-                SideTabData -> sideTabData sideTabProps []
-                SideTabCommunity -> sideTabCommunity sideTabProps []
-          pure $ RH.div { id: "sp-container" }
-            [ sideTabNav { sidePanel: showSidePanel
-                         , sideTabs: [SideTabLegend, SideTabData, SideTabCommunity] } []
-            , sideTab'
-            ]
+    cpt props@{ metaData, 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'
+        ]
       where
         sideTabProps = RX.pick props :: Record SideTabProps
 
 type SideTabNavProps = (
-    sidePanel :: T.Box GET.SidePanelState
-  , sideTabs  :: Array SideTab
+    sideTab         :: T.Box GET.SideTab
+  , sideTabs  :: Array GET.SideTab
   )
 
 sideTabNav :: R2.Component SideTabNavProps
@@ -94,23 +89,21 @@ sideTabNav = R.createElement sideTabNavCpt
 sideTabNavCpt :: R.Component SideTabNavProps
 sideTabNavCpt = here.component "sideTabNav" cpt
   where
-    cpt { sidePanel
-        , sideTabs } _ = do
-      sidePanel' <- T.useLive T.unequal sidePanel
+    cpt { sideTab, sideTabs } _ = do
+      sideTab' <- T.useLive T.unequal sideTab
 
       pure $ R.fragment [ H.div { className: "text-primary center"} [H.text ""]
-                        , H.div { className: "nav nav-tabs"} (liItem sidePanel' <$> sideTabs)
+                        , H.div { className: "nav nav-tabs"} (liItem sideTab' <$> sideTabs)
                             -- , H.div {className: "center"} [ H.text "Doc sideTabs"]
                         ]
       where
-        liItem :: GET.SidePanelState -> SideTab -> R.Element
-        liItem sidePanel' tab =
+        liItem :: GET.SideTab -> GET.SideTab -> R.Element
+        liItem sideTab' tab =
           H.div { className : "nav-item nav-link"
-                            <> if (Opened tab) == sidePanel'
+                            <> if tab == sideTab'
                                  then " active"
                                  else ""
-              , on: { click: \_ -> T.write (Opened tab) sidePanel
-                    }
+              , on: { click: \_ -> T.write_ tab sideTab }
               } [ H.text $ show tab ]
 
 type SideTabProps = Props

src/Gargantext/Components/GraphExplorer/Sidebar/Types.purs

+module Gargantext.Components.GraphExplorer.Sidebar.Types where
+
+import Data.Maybe (Maybe(..), maybe)
+import Data.Set as Set
+import Reactix as R
+import Toestand as T
+
+import Gargantext.Prelude
+
+import Gargantext.Components.GraphExplorer.Types as GET
+import Gargantext.Hooks.Sigmax.Types as SigmaxT
+
+type SidePanel =
+  (
+    mGraph             :: Maybe SigmaxT.SGraph
+  , mMetaData          :: Maybe GET.MetaData
+  , multiSelectEnabled :: Boolean
+  , removedNodeIds     :: SigmaxT.NodeIds
+  , selectedNodeIds    :: SigmaxT.NodeIds
+  , showControls       :: Boolean
+  , sideTab            :: GET.SideTab
+  )
+
+initialSidePanel :: Maybe (Record SidePanel)
+initialSidePanel = Nothing
+
+
+focusedSidePanel :: T.Box (Maybe (Record SidePanel))
+                 -> R.Hooks { mGraph              :: T.Box (Maybe SigmaxT.SGraph)
+                            , mMetaData          :: T.Box (Maybe GET.MetaData)
+                            , multiSelectEnabled :: T.Box Boolean
+                            , removedNodeIds     :: T.Box SigmaxT.NodeIds
+                            , selectedNodeIds    :: T.Box SigmaxT.NodeIds
+                            , showControls       :: T.Box Boolean
+                            , sideTab            :: T.Box GET.SideTab }
+focusedSidePanel sidePanel = do
+  mGraph <- T.useFocused
+            (maybe Nothing (_.mGraph))
+            (\val -> maybe Nothing (\sp -> Just $ sp { mGraph = val })) sidePanel
+  mMetaData <- T.useFocused
+            (maybe Nothing (_.mMetaData))
+            (\val -> maybe Nothing (\sp -> Just $ sp { mMetaData = val })) sidePanel
+  multiSelectEnabled <- T.useFocused
+                        (maybe false (_.multiSelectEnabled))
+                        (\val -> maybe Nothing (\sp -> Just $ sp { multiSelectEnabled = val })) sidePanel
+  removedNodeIds <- T.useFocused
+                     (maybe Set.empty (_.removedNodeIds))
+                     (\val -> maybe Nothing (\sp -> Just $ sp { removedNodeIds = val })) sidePanel
+  selectedNodeIds <- T.useFocused
+                     (maybe Set.empty (_.selectedNodeIds))
+                     (\val -> maybe Nothing (\sp -> Just $ sp { selectedNodeIds = val })) sidePanel
+  showControls <- T.useFocused
+                  (maybe false (_.showControls))
+                  (\val -> maybe Nothing (\sp -> Just $ sp { showControls = val })) sidePanel
+  sideTab <- T.useFocused
+                  (maybe GET.SideTabLegend (_.sideTab))
+                  (\val -> maybe Nothing (\sp -> Just $ sp { sideTab = val })) sidePanel
+  pure $ {
+    mGraph
+  , mMetaData
+  , multiSelectEnabled
+  , removedNodeIds
+  , selectedNodeIds
+  , showControls
+  , sideTab
+  }

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -18,8 +18,8 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
 
-import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
+import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
 
 here :: R2.Here
@@ -185,7 +185,7 @@ treeToggleButtonCpt = here.component "treeToggleButton" cpt
         } []
 
 type SidebarToggleButtonProps = (
-  state :: T.Box GET.SidePanelState
+  state :: T.Box GT.SidePanelState
 )
 
 sidebarToggleButton :: R2.Component SidebarToggleButtonProps
@@ -201,17 +201,18 @@ sidebarToggleButtonCpt = here.component "sidebarToggleButton" cpt
                       , on: { click: onClick state }
                       } [ R2.small {} [ H.text (text onMessage offMessage state') ] ]
 
-    cls (GET.Opened _) = "active"
-    cls _ = ""
+    cls GT.Opened = "active"
+    cls _         = ""
 
     onMessage = "Hide Sidebar"
     offMessage = "Show Sidebar"
-    text on _off (GET.Opened _)    = on
-    text _on off GET.InitialClosed = off
-    text _on off GET.Closed        = off
+    text on _off GT.Opened        = on
+    text _on off GT.InitialClosed = off
+    text _on off GT.Closed        = off
 
     onClick state = \_ ->
-      T.modify_ (\s -> case s of
-        GET.InitialClosed -> GET.Opened GET.SideTabLegend
-        GET.Closed        -> GET.Opened GET.SideTabLegend
-        (GET.Opened _)    -> GET.Closed) 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/Types.purs

@@ -114,9 +114,9 @@ type State = (
   --, legendData :: R.State (Array Legend)
   --, multiNodeSelection :: R.State Boolean
   --, selectedNodes :: R.State (Set SelectedNode)
-  --, showSidePanel :: R.State Boolean
   --, showControls :: T.Box Boolean
   --, showTree :: R.State Boolean
+  --, sidePanelState :: R.State Boolean
   --, sigmaGraphData :: R.State (Maybe SigmaxTypes.SGraph)
   --, sigmaSettings :: R.State ({|Graph.SigmaSettings})
     --treeId :: R.State (Maybe TreeId)
@@ -281,10 +281,6 @@ defaultPalette = ["#5fa571","#ab9ba2","#da876d","#bdd3ff","#b399df","#ffdfed","#
 intColor :: Int -> String
 intColor i = unsafePartial $ fromJust $ defaultPalette !! (i `mod` length defaultPalette)
 
-
-data SidePanelState = InitialClosed | Opened SideTab | Closed
-derive instance eqSidePanelState :: Eq SidePanelState
-
 data SideTab = SideTabLegend | SideTabData | SideTabCommunity
 
 derive instance eqSideTab :: Eq SideTab

src/Gargantext/Components/NgramsTable.purs

@@ -261,7 +261,6 @@ type CommonProps = (
     afterSync         :: Unit -> Aff Unit
   , reloadForest      :: T.Box T2.Reload
   , reloadRoot        :: T.Box T2.Reload
-  , sidePanelTriggers :: Record NT.SidePanelTriggers
   , tabNgramType      :: CTabNgramType
   , tasks             :: T.Box GAT.Storage
   , withAutoUpdate    :: Boolean
@@ -287,7 +286,6 @@ loadedNgramsTableCpt = here.component "loadedNgramsTable" cpt where
             , path
             , reloadForest
             , reloadRoot
-            , sidePanelTriggers
             , state
             , tabNgramType
             , tasks
@@ -300,9 +298,6 @@ loadedNgramsTableCpt = here.component "loadedNgramsTable" cpt where
     searchQuery <- T.useFocused (_.searchQuery) (\a b -> b { searchQuery = a }) path
     searchQuery' <- T.useLive T.unequal searchQuery
 
-    -- R.useEffectOnce' $ do
-    --   T.listen (\_ -> TT.changePage 1 params) searchQuery
-
     let ngramsTable = applyNgramsPatches state' initTable
         roots = rootsOf ngramsTable
 
@@ -351,8 +346,7 @@ loadedNgramsTableCpt = here.component "loadedNgramsTable" cpt where
                                       , ngramsLocalPatch
                                       , ngramsParent
                                       , ngramsSelection
-                                      , ngramsTable
-                                      , sidePanelTriggers } []
+                                      , ngramsTable } []
           , delete: false
           }
 
@@ -550,7 +544,6 @@ mainNgramsTableCpt = here.component "mainNgramsTable" cpt
               , path
               , reloadForest
               , reloadRoot
-              , sidePanelTriggers
               , tabNgramType
               , tasks
               , withAutoUpdate } _ = do
@@ -566,7 +559,6 @@ mainNgramsTableCpt = here.component "mainNgramsTable" cpt
                                                       , path
                                                       , reloadForest
                                                       , reloadRoot
-                                                      , sidePanelTriggers
                                                       , tabNgramType
                                                       , tasks
                                                       , versioned
@@ -585,7 +577,6 @@ mainNgramsTableCpt = here.component "mainNgramsTable" cpt
                                                                       , path
                                                                       , reloadForest
                                                                       , reloadRoot
-                                                                      , sidePanelTriggers
                                                                       , tabNgramType
                                                                       , tasks
                                                                       , versionedWithCount
@@ -655,7 +646,6 @@ mainNgramsTablePaintCpt = here.component "mainNgramsTablePaint" cpt
               , path
               , reloadForest
               , reloadRoot
-              , sidePanelTriggers
               , tabNgramType
               , tasks
               , versioned
@@ -668,7 +658,6 @@ mainNgramsTablePaintCpt = here.component "mainNgramsTablePaint" cpt
                                , path
                                , reloadForest
                                , reloadRoot
-                               , sidePanelTriggers
                                , state
                                , tabNgramType
                                , tasks
@@ -694,7 +683,6 @@ mainNgramsTablePaintNoCacheCpt = here.component "mainNgramsTablePaintNoCache" cp
               , path
               , reloadForest
               , reloadRoot
-              , sidePanelTriggers
               , tabNgramType
               , tasks
               , versionedWithCount
@@ -710,7 +698,6 @@ mainNgramsTablePaintNoCacheCpt = here.component "mainNgramsTablePaintNoCache" cp
       , path: path
       , reloadForest
       , reloadRoot
-      , sidePanelTriggers
       , state
       , tabNgramType
       , tasks

src/Gargantext/Components/NgramsTable/Components.purs

@@ -211,7 +211,6 @@ type RenderNgramsItem = (
   , ngramsParent      :: Maybe NgramsTerm
   , ngramsSelection   :: Set NgramsTerm
   , ngramsTable       :: NgramsTable
-  , sidePanelTriggers :: Record NT.SidePanelTriggers
   )
 
 renderNgramsItem :: R2.Component RenderNgramsItem
@@ -227,7 +226,6 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
         , ngramsParent
         , ngramsSelection
         , ngramsTable
-        , sidePanelTriggers: { toggleSidePanel }
         } _ = do
       pure $ Tbl.makeRow [
           H.div { className: "ngrams-selector" } [
@@ -254,8 +252,9 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
               a (ngramsStyle <> [DOM.onClick $ const effect])
             Nothing ->
               span ngramsStyle
-        onClick _ = do
-          R2.callTrigger toggleSidePanel unit
+        onClick _ = pure unit :: Effect Unit
+        -- onClick _ = do
+        --   R2.callTrigger toggleSidePanel unit
         termList    = ngramsElement ^. _NgramsElement <<< _list
         ngramsStyle = [termStyle termList ngramsOpacity]
         ngramsEdit  = Just <<< dispatch <<< SetParentResetChildren <<< Just <<< view _ngrams

src/Gargantext/Components/Nodes/Annuaire/Tabs.purs

@@ -17,13 +17,14 @@ import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.NgramsTable.Core as NTC
+import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (ContactData)
 import Gargantext.Components.Nodes.Lists.Types as LTypes
 import Gargantext.Components.Nodes.Texts.Types as TTypes
 import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
-import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), TabType(..), TabSubType(..))
+import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), SidePanelState, TabType(..), TabSubType(..))
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 
@@ -51,15 +52,16 @@ modeTabType' Books = CTabAuthors
 modeTabType' Communication = CTabAuthors
 
 type TabsProps =
-  ( cacheState        :: T.Box LTypes.CacheState
-  , contactData       :: ContactData
-  , frontends         :: Frontends
-  , nodeId            :: Int
-  , reloadForest      :: T.Box T2.Reload
-  , reloadRoot        :: T.Box T2.Reload
-  , session           :: Session
-  , sidePanelTriggers :: Record LTypes.SidePanelTriggers
-  , tasks             :: T.Box GAT.Storage
+  ( cacheState     :: T.Box LTypes.CacheState
+  , contactData    :: ContactData
+  , frontends      :: Frontends
+  , nodeId         :: Int
+  , reloadForest   :: T.Box T2.Reload
+  , reloadRoot     :: T.Box T2.Reload
+  , session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record TextsT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
+  , tasks          :: T.Box GAT.Storage
   )
 
 tabs :: R2.Leaf TabsProps
@@ -69,19 +71,18 @@ tabsCpt :: R.Component TabsProps
 tabsCpt = here.component "tabs" cpt where
   cpt props _ = do
     active <- R.useState' 0
-    triggers <- TTypes.emptySidePanelTriggers
-    pure $ Tab.tabs { selected: fst active, tabs: tabs' props triggers }
-  tabs' props trg =
-    [ "Documents"     /\ docs trg
+    pure $ Tab.tabs { selected: fst active, tabs: tabs' props }
+  tabs' props@{ sidePanel, sidePanelState } =
+    [ "Documents"     /\ docs
     , "Patents"       /\ ngramsView (viewProps Patents)
     , "Books"         /\ ngramsView (viewProps Books)
     , "Communication" /\ ngramsView (viewProps Communication)
-    , "Trash"         /\ docs trg -- TODO pass-in trash mode
+    , "Trash"         /\ docs -- TODO pass-in trash mode
     ] where
       viewProps mode = Record.merge props { defaultListId: props.contactData.defaultListId
                                           , mode }
       totalRecords = 4736 -- TODO lol
-      docs sidePanelTriggers = DT.docViewLayout (Record.merge { sidePanelTriggers } $ Record.merge dtCommon dtExtra)
+      docs = DT.docViewLayout (Record.merge { sidePanel, sidePanelState } $ Record.merge dtCommon dtExtra)
       dtCommon = RX.pick props :: Record DTCommon
       dtExtra =
         { chart: mempty
@@ -98,7 +99,7 @@ type DTCommon =
   , frontends         :: Frontends
   , nodeId            :: Int
   , session           :: Session
-  -- , sidePanelTriggers :: Record LTypes.SidePanelTriggers
+  -- , sidePanel    :: T.Box (Record SidePanel)
   )
 
 type NgramsViewTabsProps =
@@ -119,22 +120,21 @@ ngramsViewCpt = here.component "ngramsView" cpt where
     pure $ NT.mainNgramsTable (props' path) [] where
       most = RX.pick props :: Record NTCommon
       props' path =
-        Record.merge most
+        (Record.merge most
           { afterSync
           , path
           , tabType:        TabPairing (TabNgramType $ modeTabType mode)
           , tabNgramType:   modeTabType' mode
-          , withAutoUpdate: false }
+          , withAutoUpdate: false }) :: Record NT.MainNgramsTableProps
         where
           afterSync :: Unit -> Aff Unit
           afterSync _ = pure unit
 
 type NTCommon =
-  ( cacheState        :: T.Box LTypes.CacheState
-  , defaultListId     :: Int
-  , reloadForest      :: T.Box T2.Reload
-  , reloadRoot        :: T.Box T2.Reload
-  , session           :: Session
-  , sidePanelTriggers :: Record LTypes.SidePanelTriggers
-  , tasks             :: T.Box GAT.Storage
+  ( cacheState     :: T.Box LTypes.CacheState
+  , defaultListId  :: Int
+  , reloadForest   :: T.Box T2.Reload
+  , reloadRoot     :: T.Box T2.Reload
+  , session        :: Session
+  , tasks          :: T.Box GAT.Storage
   )

src/Gargantext/Components/Nodes/Annuaire/User.purs

@@ -23,11 +23,12 @@ import Gargantext.Components.InputWithEnter (inputWithEnter)
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (Contact(..), ContactData, ContactTouch(..), ContactWhere(..), ContactWho(..), HyperdataContact(..), HyperdataUser(..), _city, _country, _firstName, _labTeamDeptsJoinComma, _lastName, _mail, _office, _organizationJoinComma, _ouFirst, _phone, _role, _shared, _touch, _who, defaultContactTouch, defaultContactWhere, defaultContactWho, defaultHyperdataContact, defaultHyperdataUser)
 import Gargantext.Components.Nodes.Annuaire.Tabs as Tabs
 import Gargantext.Components.Nodes.Lists.Types as LT
+import Gargantext.Components.Nodes.Texts.Types as TT
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes as Routes
 import Gargantext.Sessions (WithSession, WithSessionContext, Session, get, put, sessionId)
-import Gargantext.Types (NodeType(..))
+import Gargantext.Types (NodeType(..), SidePanelState)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 
@@ -151,11 +152,13 @@ listElement :: Array R.Element -> R.Element
 listElement = H.li { className: "list-group-item justify-content-between" }
 
 type LayoutNoSessionProps =
-  ( frontends    :: Frontends
-  , nodeId       :: Int
-  , reloadForest :: T.Box T2.Reload
-  , reloadRoot   :: T.Box T2.Reload
-  , tasks        :: T.Box GAT.Storage
+  ( frontends      :: Frontends
+  , nodeId         :: Int
+  , reloadForest   :: T.Box T2.Reload
+  , reloadRoot     :: T.Box T2.Reload
+  , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
+  , tasks          :: T.Box GAT.Storage
   )
 
 type LayoutProps = WithSession LayoutNoSessionProps
@@ -184,7 +187,14 @@ userLayout = R.createElement userLayoutCpt
 userLayoutCpt :: R.Component LayoutProps
 userLayoutCpt = here.component "userLayout" cpt
   where
-    cpt { frontends, nodeId, reloadForest, reloadRoot, session, tasks } _ = do
+    cpt { frontends
+        , nodeId
+        , reloadForest
+        , reloadRoot
+        , session
+        , sidePanel
+        , sidePanelState
+        , tasks } _ = do
       let sid = sessionId session
 
       pure $ userLayoutWithKey {
@@ -194,6 +204,8 @@ userLayoutCpt = here.component "userLayout" cpt
         , reloadForest
         , reloadRoot
         , session
+        , sidePanel
+        , sidePanelState
         , tasks
         }
 
@@ -203,14 +215,19 @@ userLayoutWithKey props = R.createElement userLayoutWithKeyCpt props []
 userLayoutWithKeyCpt :: R.Component KeyLayoutProps
 userLayoutWithKeyCpt = here.component "userLayoutWithKey" cpt
   where
-    cpt { frontends, nodeId, reloadForest, reloadRoot, session, tasks } _ = do
+    cpt { frontends
+        , nodeId
+        , reloadForest
+        , reloadRoot
+        , session
+        , sidePanel
+        , sidePanelState
+        , tasks } _ = do
       reload <- T.useBox T2.newReload
       reload' <- T.useLive T.unequal reload
 
       cacheState <- T.useBox LT.CacheOn
 
-      sidePanelTriggers <- LT.emptySidePanelTriggers
-
       useLoader {nodeId, reload: reload', session} getUserWithReload $
         \contactData@{contactNode: Contact {name, hyperdata}} ->
           H.ul { className: "col-md-12 list-group" } [
@@ -224,7 +241,8 @@ userLayoutWithKeyCpt = here.component "userLayoutWithKey" cpt
                , reloadForest
                , reloadRoot
                , session
-               , sidePanelTriggers
+               , sidePanel
+        , sidePanelState
                , tasks
                }
           ]

src/Gargantext/Components/Nodes/Annuaire/User/Contact.purs

@@ -26,11 +26,12 @@ import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types
   , _shared, _touch, _who, defaultContactTouch, defaultContactWhere
   , defaultContactWho, defaultHyperdataContact, defaultHyperdataUser )
 import Gargantext.Components.Nodes.Lists.Types as LT
+import Gargantext.Components.Nodes.Texts.Types as TT
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes as Routes
 import Gargantext.Sessions (Session, get, put, sessionId)
-import Gargantext.Types (NodeType(..))
+import Gargantext.Types (NodeType(..), SidePanelState)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 
@@ -139,9 +140,11 @@ listElement :: Array R.Element -> R.Element
 listElement = H.li { className: "list-group-item justify-content-between" }
 
 type BasicProps =
-  ( frontends :: Frontends
-  , nodeId    :: Int
-  , tasks     :: T.Box GAT.Storage
+  ( frontends      :: Frontends
+  , nodeId         :: Int
+  , sidePanelState :: T.Box SidePanelState
+  , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
+  , tasks          :: T.Box GAT.Storage
   )
 
 type ReloadProps =
@@ -166,13 +169,30 @@ contactLayout = R.createElement contactLayoutCpt
 
 contactLayoutCpt :: R.Component AnnuaireLayoutProps
 contactLayoutCpt = here.component "contactLayout" cpt where
-  cpt { annuaireId, frontends, nodeId, reloadForest, reloadRoot, session, tasks } _ = do
+  cpt { annuaireId
+      , frontends
+      , nodeId
+      , reloadForest
+      , reloadRoot
+      , session
+      , sidePanel
+      , sidePanelState
+      , tasks } _ = do
     s <- R.useContext session
     let key = show (sessionId s) <> "-" <> show nodeId
     pure $
       contactLayoutWithKey
-      { annuaireId, tasks, frontends, key, nodeId
-      , session: s, reloadForest, reloadRoot }
+      { annuaireId
+      , frontends
+      , key
+      , nodeId
+      , reloadForest
+      , reloadRoot
+      , session: s
+      , sidePanel
+      , sidePanelState
+      , tasks
+      }
 
 contactLayoutWithKey :: R2.Leaf AnnuaireKeyLayoutProps
 contactLayoutWithKey props = R.createElement contactLayoutWithKeyCpt props []
@@ -185,11 +205,12 @@ contactLayoutWithKeyCpt = here.component "contactLayoutWithKey" cpt where
         , reloadRoot
         , nodeId
         , session
+        , sidePanel
+        , sidePanelState
         , tasks } _ = do
       reload <- T.useBox T2.newReload
       _ <- T.useLive T.unequal reload
       cacheState <- T.useBox LT.CacheOn
-      sidePanelTriggers <- LT.emptySidePanelTriggers
       useLoader nodeId (getAnnuaireContact session annuaireId) $
         \contactData@{contactNode: Contact' {name, hyperdata}} ->
           H.ul { className: "col-md-12 list-group" }
@@ -201,7 +222,8 @@ contactLayoutWithKeyCpt = here.component "contactLayoutWithKey" cpt where
                    , frontends
                    , nodeId
                    , session
-                   , sidePanelTriggers
+                   , sidePanel
+                   , sidePanelState
                    , reloadForest
                    , reloadRoot
                    , tasks } ]

src/Gargantext/Components/Nodes/Annuaire/User/Contacts/Tabs.purs

@@ -20,7 +20,7 @@ import Gargantext.Components.Nodes.Lists.Types as LTypes
 import Gargantext.Components.Nodes.Texts.Types as TTypes
 import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
-import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), TabType(..), TabSubType(..))
+import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), SidePanelState, TabType(..), TabSubType(..))
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 
@@ -49,15 +49,16 @@ modeTabType' Books = CTabAuthors
 modeTabType' Communication = CTabAuthors
 
 type TabsProps = (
-    cacheState        :: T.Box LTypes.CacheState
-  , contactData       :: ContactData'
-  , frontends         :: Frontends
-  , nodeId            :: Int
-  , reloadForest      :: T.Box T2.Reload
-  , reloadRoot        :: T.Box T2.Reload
-  , session           :: Session
-  , sidePanelTriggers :: Record LTypes.SidePanelTriggers
-  , tasks             :: T.Box GAT.Storage
+    cacheState     :: T.Box LTypes.CacheState
+  , contactData    :: ContactData'
+  , frontends      :: Frontends
+  , nodeId         :: Int
+  , reloadForest   :: T.Box T2.Reload
+  , reloadRoot     :: T.Box T2.Reload
+  , session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record TTypes.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
+  , tasks          :: T.Box GAT.Storage
   )
 
 tabs :: Record TabsProps -> R.Element
@@ -73,13 +74,13 @@ tabsCpt = here.component "tabs" cpt
         , frontends
         , nodeId
         , session
-        , sidePanelTriggers
+        , sidePanel
+        , sidePanelState
         , reloadForest } _ = do
       active <- R.useState' 0
-      textsSidePanelTriggers <- TTypes.emptySidePanelTriggers
-      pure $ Tab.tabs { selected: fst active, tabs: tabs' textsSidePanelTriggers }
+      pure $ Tab.tabs { selected: fst active, tabs: tabs' }
       where
-        tabs' trg =
+        tabs' =
           [ "Documents"     /\ docs
           , "Patents"       /\ ngramsView patentsView []
           , "Books"         /\ ngramsView booksView []
@@ -93,26 +94,23 @@ tabsCpt = here.component "tabs" cpt
                           , defaultListId
                           , mode: Patents
                           , nodeId
-                          , session
-                          , sidePanelTriggers
-                          , reloadForest }
+                          , reloadForest
+                          , session }
             booksView   = { reloadRoot
                           , tasks
                           , cacheState
                           , defaultListId
                           , mode: Books
                           , nodeId
-                          , session
-                          , sidePanelTriggers
-                          , reloadForest }
+                          , reloadForest
+                          , session }
             commView    = { reloadRoot, tasks
                           , cacheState
                           , defaultListId
                           , mode: Communication
                           , nodeId
-                          , session
-                          , sidePanelTriggers
-                          , reloadForest }
+                          , reloadForest
+                          , session }
             chart       = mempty
             totalRecords = 4736 -- TODO
             docs = DT.docViewLayout
@@ -124,22 +122,22 @@ tabsCpt = here.component "tabs" cpt
               , nodeId
               , session
               , showSearch: true
-              , sidePanelTriggers: trg
+              , sidePanel
+              , sidePanelState
               , tabType: TabPairing TabDocs
               , totalRecords
               }
 
 
 type NgramsViewTabsProps = (
-    cacheState        :: T.Box LTypes.CacheState
-  , defaultListId     :: Int
-  , mode              :: Mode
-  , nodeId            :: Int
-  , reloadForest      :: T.Box T2.Reload
-  , reloadRoot        :: T.Box T2.Reload
-  , session           :: Session
-  , sidePanelTriggers :: Record LTypes.SidePanelTriggers
-  , tasks             :: T.Box GAT.Storage
+    cacheState     :: T.Box LTypes.CacheState
+  , defaultListId  :: Int
+  , mode           :: Mode
+  , nodeId         :: Int
+  , reloadForest   :: T.Box T2.Reload
+  , reloadRoot     :: T.Box T2.Reload
+  , session        :: Session
+  , tasks          :: T.Box GAT.Storage
   )
 
 ngramsView :: R2.Component NgramsViewTabsProps
@@ -155,7 +153,6 @@ ngramsViewCpt = here.component "ngramsView" cpt
         , mode
         , nodeId
         , session
-        , sidePanelTriggers
         , tasks } _ = do
       path <- T.useBox $ NTC.initialPageParams session nodeId [defaultListId] (TabDocument TabDocs)
 
@@ -167,7 +164,6 @@ ngramsViewCpt = here.component "ngramsView" cpt
         , reloadForest
         , reloadRoot
         , session
-        , sidePanelTriggers
         , tabNgramType
         , tabType
         , tasks

src/Gargantext/Components/Nodes/Lists.purs

 module Gargantext.Components.Nodes.Lists where
 
-import DOM.Simple.Console (log, log2)
 import Data.Maybe (Maybe(..))
 import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Gargantext.AsyncTasks as GAT
-import Gargantext.Components.Forest as Forest
 import Gargantext.Components.NgramsTable.Loader (clearCache)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Components.Nodes.Corpus.Types (getCorpusInfo, CorpusInfo(..), Hyperdata(..))
 import Gargantext.Components.Nodes.Lists.Tabs as Tabs
-import Gargantext.Components.Nodes.Lists.Types (CacheState(..), ListsLayoutControls, SidePanelState(..), initialControls, toggleSidePanelState)
+import Gargantext.Components.Nodes.Lists.Types (CacheState(..), SidePanel)
 import Gargantext.Components.Table as Table
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude (Unit, bind, const, discard, pure, show, unit, ($), (<>))
@@ -24,7 +22,6 @@ import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Record as Record
-import Record.Extra as REX
 import Toestand as T
 
 here :: R2.Here
@@ -35,31 +32,26 @@ listsWithSessionContext = R.createElement listsWithSessionContextCpt
 
 listsWithSessionContextCpt :: R.Component CommonPropsSessionContext
 listsWithSessionContextCpt = here.component "listsWithSessionContext" cpt where
-  cpt props@{ session } _ = do
+  cpt props@{ session, sidePanel, sidePanelState } _ = do
       session' <- R.useContext session
-      controls <- initialControls
 
-      pure $ R.fragment [
-        -- topBar { controls } []
-        listsLayout (Record.merge { controls, session: session' } props) []
-      , H.div { className: "side-panel" } [ sidePanel { controls, session: session' } [] ]
-      ]
+      pure $ listsLayout (Record.merge { session: session', sidePanel, sidePanelState } props) []
 --------------------------------------------------------
 
 type CommonPropsNoSession =
-  ( nodeId        :: Int
-  , reloadForest  :: T.Box T2.Reload
-  , reloadRoot    :: T.Box T2.Reload
-  , sessionUpdate :: Session -> Effect Unit
-  , tasks         :: T.Box GAT.Storage
+  ( nodeId         :: Int
+  , reloadForest   :: T.Box T2.Reload
+  , reloadRoot     :: T.Box T2.Reload
+  , sessionUpdate  :: Session -> Effect Unit
+  , sidePanel      :: T.Box (Maybe (Record SidePanel))
+  , sidePanelState :: T.Box GT.SidePanelState
+  , tasks          :: T.Box GAT.Storage
   )
 
-type CommonProps = WithSession CommonPropsNoSession
+type Props = WithSession CommonPropsNoSession
 
 type CommonPropsSessionContext = WithSessionContext CommonPropsNoSession
 
-type Props = ( controls :: Record ListsLayoutControls | CommonProps )
-
 type WithTreeProps = ( handed :: GT.Handed | Props )
 
 listsLayout :: R2.Component Props
@@ -69,58 +61,65 @@ listsLayoutCpt :: R.Component Props
 listsLayoutCpt = here.component "listsLayout" cpt where
   cpt props@{ nodeId, session } _ = do
     let sid = sessionId session
-    pure $ listsLayoutWithKey $ Record.merge props { key: show sid <> "-" <> show nodeId }
+    pure $ listsLayoutWithKey (Record.merge props { key: show sid <> "-" <> show nodeId }) []
 
 type KeyProps = ( key :: String | Props )
 
-listsLayoutWithKey :: Record KeyProps -> R.Element
-listsLayoutWithKey props = R.createElement listsLayoutWithKeyCpt props []
+listsLayoutWithKey :: R2.Component KeyProps
+listsLayoutWithKey = R.createElement listsLayoutWithKeyCpt
 
 listsLayoutWithKeyCpt :: R.Component KeyProps
 listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where
-    cpt { controls, nodeId, reloadForest, reloadRoot, session, sessionUpdate, tasks } _ = do
-      let path = { nodeId, session }
-
-      cacheState <- T.useBox $ getCacheState CacheOn session nodeId
-      cacheState' <- T.useLive T.unequal cacheState
-
-      R.useEffectOnce' $ do
-        T.listen (\{ new } -> afterCacheStateChange new) cacheState
-
-      useLoader path loadCorpusWithChild $
-        \corpusData@{ corpusId, corpusNode: NodePoly poly, defaultListId } ->
-          let { date, hyperdata : Hyperdata h, name } = poly
-              CorpusInfo { authors, desc, query } = getCorpusInfo h.fields
-          in
-          R.fragment [
-            Table.tableHeaderLayout {
-                cacheState
-              , date
-              , desc
-              , key: "listsLayoutWithKey-header-" <> (show cacheState')
-              , query
-              , title: "Corpus " <> name
-              , user: authors } []
-          , Tabs.tabs {
-               cacheState
-             , corpusData
-             , corpusId
-             , key: "listsLayoutWithKey-tabs-" <> (show cacheState')
-             , reloadForest
-             , reloadRoot
-             , session
-             , sidePanelTriggers: controls.triggers
-             , tasks
-             }
-          ]
-      where
-        afterCacheStateChange cacheState = do
-          launchAff_ $ clearCache unit
-          sessionUpdate $ setCacheState session nodeId cacheState
+  cpt { nodeId
+      , reloadForest
+      , reloadRoot
+      , session
+      , sessionUpdate
+      , sidePanel
+      , sidePanelState
+      , tasks } _ = do
+    let path = { nodeId, session }
+
+    cacheState <- T.useBox $ getCacheState CacheOn session nodeId
+    cacheState' <- T.useLive T.unequal cacheState
+
+    R.useEffectOnce' $ do
+      T.listen (\{ new } -> afterCacheStateChange new) cacheState
+
+    useLoader path loadCorpusWithChild $
+      \corpusData@{ corpusId, corpusNode: NodePoly poly, defaultListId } ->
+        let { date, hyperdata : Hyperdata h, name } = poly
+            CorpusInfo { authors, desc, query } = getCorpusInfo h.fields
+        in
+        R.fragment [
+          Table.tableHeaderLayout {
+              cacheState
+            , date
+            , desc
+            , key: "listsLayoutWithKey-header-" <> (show cacheState')
+            , query
+            , title: "Corpus " <> name
+            , user: authors } []
+        , Tabs.tabs {
+              cacheState
+            , corpusData
+            , corpusId
+            , key: "listsLayoutWithKey-tabs-" <> (show cacheState')
+            , reloadForest
+            , reloadRoot
+            , session
+            , tasks
+            }
+        ]
+    where
+      afterCacheStateChange cacheState = do
+        launchAff_ $ clearCache unit
+        sessionUpdate $ setCacheState session nodeId cacheState
 
 type SidePanelProps =
-  ( controls :: Record ListsLayoutControls
-  , session  :: Session
+  ( session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record SidePanel))
+  , sidePanelState :: T.Box GT.SidePanelState
   )
 
 sidePanel :: R2.Component SidePanelProps
@@ -129,29 +128,17 @@ sidePanel = R.createElement sidePanelCpt
 sidePanelCpt :: R.Component SidePanelProps
 sidePanelCpt = here.component "sidePanel" cpt
   where
-    cpt { controls: { triggers: { toggleSidePanel
-                                , triggerSidePanel
-                                } }
-        , session } _ = do
-
-      showSidePanel <- R.useState' InitialClosed
-
-      R.useEffect' $ do
-        let toggleSidePanel' _  = snd showSidePanel toggleSidePanelState
-            triggerSidePanel' _ = snd showSidePanel $ const Opened
-        R2.setTrigger toggleSidePanel  toggleSidePanel'
-        R2.setTrigger triggerSidePanel triggerSidePanel'
+    cpt { session
+        , sidePanel
+        , sidePanelState } _ = do
 
-      (mCorpusId /\ setMCorpusId) <- R.useState' Nothing
-      (mListId   /\ setMListId  ) <- R.useState' Nothing
-      (mNodeId   /\ setMNodeId  ) <- R.useState' Nothing
+      sidePanelState' <- T.useLive T.unequal sidePanelState
 
-      let mainStyle = case fst showSidePanel of
-            Opened -> { display: "block" }
-            _      -> { display: "none" }
+      let mainStyle = case sidePanelState' of
+            GT.Opened -> { display: "block" }
+            _         -> { display: "none" }
 
-      let closeSidePanel _ = do
-            snd showSidePanel $ const Closed
+      let closeSidePanel _ = T.write_ GT.Closed sidePanelState
 
       pure $ H.div { style: mainStyle } [
         H.div { className: "header" } [

src/Gargantext/Components/Nodes/Lists/Tabs.purs

@@ -40,7 +40,6 @@ type Props = (
   , reloadForest      :: T.Box T2.Reload
   , reloadRoot        :: T.Box T2.Reload
   , session           :: Session
-  , sidePanelTriggers :: Record SidePanelTriggers
   , tasks             :: T.Box GAT.Storage
   )
 
@@ -76,7 +75,6 @@ ngramsViewCpt = here.component "ngramsView" cpt where
             , reloadRoot
             , mode
             , session
-            , sidePanelTriggers
             , tasks } _ = do
       chartsReload <- T.useBox T2.newReload
 
@@ -104,7 +102,6 @@ ngramsViewCpt = here.component "ngramsView" cpt where
                                 , reloadForest
                                 , reloadRoot
                                 , session
-                                , sidePanelTriggers
                                 , tabNgramType
                                 , tabType
                                 , tasks

src/Gargantext/Components/Nodes/Lists/Types.purs

 module Gargantext.Components.Nodes.Lists.Types where
 
-import Data.Argonaut (class DecodeJson, decodeJson, class EncodeJson, encodeJson, (~>), (:=))
+import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, encodeJson)
 import Data.Argonaut.Decode.Error (JsonDecodeError(..))
+import Data.Maybe (Maybe(..))
 import Data.Either (Either(..))
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Eq (genericEq)
 import Data.Generic.Rep.Show (genericShow)
-import Data.Maybe (Maybe(..))
-import Reactix as R
 
 import Gargantext.Prelude
 import Gargantext.Types (ListId, NodeID)
@@ -34,45 +33,7 @@ instance encodeJsonCacheState :: EncodeJson CacheState where
 instance showCacheState :: Show CacheState where
   show = genericShow
 
+type SidePanel = ()
 
-data SidePanelState = InitialClosed | Opened | Closed
-derive instance eqSidePanelState :: Eq SidePanelState
-
-toggleSidePanelState :: SidePanelState -> SidePanelState
-toggleSidePanelState InitialClosed = Opened
-toggleSidePanelState Closed        = Opened
-toggleSidePanelState Opened        = Closed
-
-type TriggerAnnotatedDocIdChangeParams = (
-    corpusId :: NodeID
-  , listId   :: ListId
-  , nodeId   :: NodeID
-  )
-
-type SidePanelTriggers = (
-    toggleSidePanel             :: R2.Trigger Unit  -- toggles side panel
-  , triggerSidePanel            :: R2.Trigger Unit  -- opens side panel
-)
-
-emptySidePanelTriggers :: R.Hooks (Record SidePanelTriggers)
-emptySidePanelTriggers = do
-  toggleSidePanel             <- R.useRef Nothing
-  triggerSidePanel            <- R.useRef Nothing
-
-  pure $ {
-      toggleSidePanel
-    , triggerSidePanel
-    }
-
-
-type ListsLayoutControls = (
-    triggers      :: Record SidePanelTriggers
-  )
-
-initialControls :: R.Hooks (Record ListsLayoutControls)
-initialControls = do
-  triggers <- emptySidePanelTriggers
-
-  pure $ {
-      triggers
-  }
+initialSidePanel :: Maybe (Record SidePanel)
+initialSidePanel = Nothing

src/Gargantext/Components/Nodes/Texts.purs

 module Gargantext.Components.Nodes.Texts where
 
-import Prelude
-  ( class Eq, class Show, Unit, bind, const, discard
-  , pure, show, unit, ($), (&&), (<>), (==) )
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
-import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\))
-import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Record as Record
-import Record.Extra as REX
 import Toestand as T
 
+import Gargantext.Prelude
+
 import Gargantext.Components.DocsTable as DT
-import Gargantext.Components.Forest as Forest
-import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Components.NgramsTable.Loader (clearCache)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Components.Nodes.Corpus.Chart.Histo (histo)
 import Gargantext.Components.Nodes.Corpus.Document as D
-import Gargantext.Components.Nodes.Corpus.Types
-  ( CorpusData, Hyperdata(..), getCorpusInfo, CorpusInfo(..) )
-import Gargantext.Components.Nodes.Lists.Types as NT
-import Gargantext.Components.Nodes.Texts.Types
-  ( SidePanelState(..), SidePanelTriggers, TextsLayoutControls
-  , TriggerAnnotatedDocIdChangeParams, initialControls, toggleSidePanelState )
-
+import Gargantext.Components.Nodes.Corpus.Types (CorpusData, Hyperdata(..), getCorpusInfo, CorpusInfo(..))
+import Gargantext.Components.Nodes.Lists.Types as LT
+import Gargantext.Components.Nodes.Texts.Types as TT
 import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Table as Table
 import Gargantext.Ends (Frontends)
+import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Sessions (WithSession, WithSessionContext, Session, sessionId, getCacheState)
-import Gargantext.Types (CTabNgramType(..), ListId, NodeID, TabSubType(..), TabType(..))
+import Gargantext.Types (CTabNgramType(..), ListId, NodeID, SidePanelState(..), TabSubType(..), TabType(..))
 import Gargantext.Utils.Reactix as R2
 
 here :: R2.Here
@@ -48,68 +39,52 @@ textsWithSessionContext = R.createElement textsWithSessionContextCpt
 textsWithSessionContextCpt :: R.Component CommonPropsSessionContext
 textsWithSessionContextCpt = here.component "textsWithSessionContext" cpt
   where
-    cpt props@{ session } _ = do
+    cpt props@{ session, sidePanel, sidePanelState } _ = do
       session' <- R.useContext session
-      controls <- initialControls
 
       pure $ R.fragment
-        [ -- topBar { controls } []
-          textsLayout (Record.merge { controls, session: session' } props) []
-        , H.div { className: "side-panel" } [ sidePanel { controls, session: session' } [] ]
+        [
+          textsLayout (Record.merge { session: session', sidePanel, sidePanelState } props) []
+        -- , H.div { className: "side-panel" } [ sidePanelC { session: session', sidePanel } [] ]
         ]
 
 
-type TopBarProps = ( controls :: Record TextsLayoutControls )
-
-topBar :: R2.Component TopBarProps
-topBar = R.createElement topBarCpt
-
-topBarCpt :: R.Component TopBarProps
-topBarCpt = here.component "topBar" cpt
-  where
-    cpt { controls } _ = do
-      -- empty for now because the button is moved to the side panel
-      pure $ H.div {} []
-        -- H.ul { className: "nav navbar-nav" } [
-        --   H.li {} [
-        --      sidePanelToggleButton { state: controls.showSidePanel } []
-        --      ]
-        --   ]  -- head (goes to top bar)
-
-
-
 type CommonPropsNoSession = (
-    frontends :: Frontends
-  , nodeId    :: NodeID
+    frontends      :: Frontends
+  , nodeId         :: NodeID
+  , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
   )
 
-type CommonProps = WithSession CommonPropsNoSession
+type Props = WithSession CommonPropsNoSession
 type CommonPropsSessionContext = WithSessionContext CommonPropsNoSession
 
-type Props = ( controls :: Record TextsLayoutControls | CommonProps )
 
 textsLayout :: R2.Component Props
 textsLayout = R.createElement textsLayoutCpt
 
 textsLayoutCpt :: R.Component Props
 textsLayoutCpt = here.component "textsLayout" cpt where
-  cpt { controls, frontends, nodeId, session } children = do
-    pure $ textsLayoutWithKey { controls
-                              , frontends
+  cpt { frontends, nodeId, session, sidePanel, sidePanelState } children = do
+    pure $ textsLayoutWithKey { frontends
                               , key
                               , nodeId
-                              , session } children
+                              , session
+                              , sidePanel
+                              , sidePanelState } children
       where
-        key = show sid <> "-" <> show nodeId
-          where
-            sid = sessionId session
+        key = show nodeId
+        -- key = show sid <> "-" <> show nodeId
+        --   where
+        --     sid = sessionId session
 
 type KeyProps = (
-    key       :: String
-  , controls  :: Record TextsLayoutControls
-  , frontends :: Frontends
-  , nodeId    :: NodeID
-  , session   :: Session
+    key            :: String
+  , frontends      :: Frontends
+  , nodeId         :: NodeID
+  , session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
   )
 
 textsLayoutWithKey :: R2.Component KeyProps
@@ -118,8 +93,8 @@ textsLayoutWithKey = R.createElement textsLayoutWithKeyCpt
 textsLayoutWithKeyCpt :: R.Component KeyProps
 textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
   where
-    cpt { controls, frontends, nodeId, session } _children = do
-      cacheState <- T.useBox $ getCacheState NT.CacheOff session nodeId
+    cpt { frontends, nodeId, session, sidePanel, sidePanelState } _children = do
+      cacheState <- T.useBox $ getCacheState LT.CacheOff session nodeId
       cacheState' <- T.useLive T.unequal cacheState
 
       R.useEffectOnce' $ do
@@ -143,7 +118,8 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
                    , corpusId
                    , frontends
                    , session
-                   , sidePanelTriggers: controls.triggers }
+                   , sidePanel
+                   , sidePanelState }
             ]
       where
         afterCacheStateChange cacheState = do
@@ -166,12 +142,13 @@ modeTabType MoreLikeFav    = CTabAuthors  -- TODO
 modeTabType MoreLikeTrash  = CTabSources  -- TODO
 
 type TabsProps =
-  ( cacheState      :: T.Box NT.CacheState
-  , corpusData      :: CorpusData
-  , corpusId        :: NodeID
-  , frontends       :: Frontends
-  , session         :: Session
-  , sidePanelTriggers :: Record SidePanelTriggers
+  ( cacheState     :: T.Box LT.CacheState
+  , corpusData     :: CorpusData
+  , corpusId       :: NodeID
+  , frontends      :: Frontends
+  , session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
   )
 
 tabs :: Record TabsProps -> R.Element
@@ -180,13 +157,11 @@ tabs props = R.createElement tabsCpt props []
 tabsCpt :: R.Component TabsProps
 tabsCpt = here.component "tabs" cpt
   where
-    cpt { cacheState, corpusId, corpusData, frontends, session, sidePanelTriggers } _ = do
-      (selected /\ setSelected) <- R.useState' 0
-
+    cpt { cacheState, corpusId, corpusData, frontends, session, sidePanel, sidePanelState } _ = do
       let path = initialPath
 
       pure $ Tab.tabs {
-          selected
+          selected: 0
         , tabs: [
             "Documents"       /\ R.fragment [
                 histo { path, session }
@@ -211,18 +186,20 @@ tabsCpt = here.component "tabs" cpt
                                         -- , path
                                         , session
                                         , tabType
-                                        , sidePanelTriggers } []
+                                        , sidePanel
+                                        , sidePanelState } []
 
 type DocViewProps a = (
-    cacheState        :: T.Box NT.CacheState
-  , corpusData        :: CorpusData
-  , corpusId          :: NodeID
-  , frontends         :: Frontends
-  , listId            :: ListId
-  -- , path           :: Record DT.Path
-  , session           :: Session
-  , tabType           :: TabSubType a
-  , sidePanelTriggers :: Record SidePanelTriggers
+    cacheState     :: T.Box LT.CacheState
+  , corpusData     :: CorpusData
+  , corpusId       :: NodeID
+  , frontends      :: Frontends
+  , listId         :: ListId
+  -- , path        :: Record DT.Path
+  , session        :: Session
+  , tabType        :: TabSubType a
+  , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
   )
 
 docView :: forall a. R2.Component (DocViewProps a)
@@ -241,7 +218,8 @@ docViewLayoutRec { cacheState
                  , listId
                  , session
                  , tabType: TabDocs
-                 , sidePanelTriggers } =
+                 , sidePanel
+                 , sidePanelState } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -251,7 +229,8 @@ docViewLayoutRec { cacheState
     -- ^ TODO merge nodeId and corpusId in DT
   , session
   , showSearch: true
-  , sidePanelTriggers
+  , sidePanel
+  , sidePanelState
   , tabType: TabCorpus TabDocs
   , totalRecords: 4737
   }
@@ -261,7 +240,8 @@ docViewLayoutRec { cacheState
                  , listId
                  , session
                  , tabType: TabMoreLikeFav
-                 , sidePanelTriggers } =
+                 , sidePanel
+                 , sidePanelState } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -271,7 +251,8 @@ docViewLayoutRec { cacheState
     -- ^ TODO merge nodeId and corpusId in DT
   , session
   , showSearch: false
-  , sidePanelTriggers
+  , sidePanel
+  , sidePanelState
   , tabType: TabCorpus TabMoreLikeFav
   , totalRecords: 4737
   }
@@ -281,7 +262,8 @@ docViewLayoutRec { cacheState
                  , listId
                  , session
                  , tabType: TabMoreLikeTrash
-                 , sidePanelTriggers } =
+                 , sidePanel
+                 , sidePanelState } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -291,7 +273,8 @@ docViewLayoutRec { cacheState
   -- ^ TODO merge nodeId and corpusId in DT
   , session
   , showSearch: false
-  , sidePanelTriggers
+  , sidePanel
+  , sidePanelState
   , tabType: TabCorpus TabMoreLikeTrash
   , totalRecords: 4737
   }
@@ -301,7 +284,8 @@ docViewLayoutRec { cacheState
                  , listId
                  , session
                  , tabType: TabTrash
-                 , sidePanelTriggers } =
+                 , sidePanel
+                 , sidePanelState } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -311,7 +295,8 @@ docViewLayoutRec { cacheState
   -- ^ TODO merge nodeId and corpusId in DT
   , session
   , showSearch: true
-  , sidePanelTriggers
+  , sidePanel
+  , sidePanelState
   , tabType: TabCorpus TabTrash
   , totalRecords: 4737
   }
@@ -322,7 +307,8 @@ docViewLayoutRec { cacheState
                  , listId
                  , session
                  , tabType
-                 , sidePanelTriggers } =
+                 , sidePanel
+                 , sidePanelState } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -332,7 +318,8 @@ docViewLayoutRec { cacheState
   -- ^ TODO merge nodeId and corpusId in DT
   , session
   , showSearch: true
-  , sidePanelTriggers
+  , sidePanel
+  , sidePanelState
   , tabType: TabCorpus TabTrash
   , totalRecords: 4737
   }
@@ -340,8 +327,9 @@ docViewLayoutRec { cacheState
 
 --------------------------------------------------------
 type SidePanelProps = (
-    controls :: Record TextsLayoutControls
-  , session  :: Session
+    session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
+  , sidePanelState :: T.Box SidePanelState
   )
 
 sidePanel :: R2.Component SidePanelProps
@@ -350,54 +338,67 @@ sidePanel = R.createElement sidePanelCpt
 sidePanelCpt :: R.Component SidePanelProps
 sidePanelCpt = here.component "sidePanel" cpt
   where
-    cpt { controls: { triggers: { currentDocIdRef
-                                , toggleSidePanel
-                                , triggerAnnotatedDocIdChange
-                                , triggerSidePanel
-                                } }
-        , session } _ = do
-
-      showSidePanel <- R.useState' InitialClosed
-
-      R.useEffect' $ do
-        let toggleSidePanel' _  = snd showSidePanel toggleSidePanelState
-            triggerSidePanel' _ = snd showSidePanel $ const Opened
-        R2.setTrigger toggleSidePanel  toggleSidePanel'
-        R2.setTrigger triggerSidePanel triggerSidePanel'
-
-      (mCorpusId /\ setMCorpusId) <- R.useState' Nothing
-      (mListId /\ setMListId) <- R.useState' Nothing
-      (mNodeId /\ setMNodeId) <- R.useState' Nothing
-
-      R.useEffect3 mCorpusId mListId mNodeId $ do
-        let trigger :: Record TriggerAnnotatedDocIdChangeParams -> Effect Unit
-            trigger { corpusId, listId, nodeId } = do
+    cpt { session
+        , sidePanel
+        , sidePanelState } _ = do
+
+      sidePanelState' <- T.useLive T.unequal sidePanelState
+      sidePanel' <- T.useLive T.unequal sidePanel
+
+      -- R.useEffect' $ do
+      --   let toggleSidePanel' _  = snd sidePanelState toggleSidePanelState
+      --       triggerSidePanel' _ = snd sidePanelState $ const Opened
+      --   R2.setTrigger toggleSidePanel  toggleSidePanel'
+      --   R2.setTrigger triggerSidePanel triggerSidePanel'
+
+      -- (mCorpusId /\ setMCorpusId) <- R.useState' Nothing
+      -- (mListId /\ setMListId) <- R.useState' Nothing
+      -- (mNodeId /\ setMNodeId) <- R.useState' Nothing
+
+      -- R.useEffect3 mCorpusId mListId mNodeId $ do
+      --   if mCorpusId == Just corpusId && mListId == Just listId && mNodeId == Just nodeId && mCurrentDocId == Just nodeId then do
+      --     T.modify_ (\sp -> sp { mCurrentDocId = Nothing }) sidePanel
+      --   else do
+      --     T.modify_ (\sp -> sp { mCorpusId = Just corpusId
+      --                         , mCurrentDocId = Just nodeId
+      --                         , mListId = Just listId
+      --                         , mNodeId = Just nodeId }) sidePanel
+        -- let trigger :: Record TriggerAnnotatedDocIdChangeParams -> Effect Unit
+        --     trigger { corpusId, listId, nodeId } = do
               -- log2 "[sidePanel trigger] trigger corpusId change" corpusId
               -- log2 "[sidePanel trigger] trigger listId change" listId
               -- log2 "[sidePanel trigger] trigger nodeId change" nodeId
-              if mCorpusId == Just corpusId && mListId == Just listId && mNodeId == Just nodeId && R.readRef currentDocIdRef == Just nodeId then do
-                R.setRef currentDocIdRef Nothing
-                R2.callTrigger toggleSidePanel unit
-              else do
-                setMCorpusId $ const $ Just corpusId
-                setMListId $ const $ Just listId
-                setMNodeId $ const $ Just nodeId
-                R.setRef currentDocIdRef $ Just nodeId
-                R2.callTrigger triggerSidePanel unit
+              -- if mCorpusId == Just corpusId && mListId == Just listId && mNodeId == Just nodeId && mCurrentDocId == Just nodeId then do
+                -- R.setRef currentDocIdRef Nothing
+                -- T.modify_ (\sp -> sp { mCurrentDocId = Nothing }) sidePanel
+                -- R2.callTrigger toggleSidePanel unit
+              -- else do
+                -- setMCorpusId $ const $ Just corpusId
+                -- setMListId $ const $ Just listId
+                -- setMNodeId $ const $ Just nodeId
+                -- R.setRef currentDocIdRef $ Just nodeId
+                -- R2.callTrigger triggerSidePanel unit
+                -- T.modify_ (\sp -> sp { mCorpusId = Just corpusId
+                --                     , mCurrentDocId = Just nodeId
+                --                     , mListId = Just listId
+                --                     , mNodeId = Just nodeId }) sidePanel
         -- log2 "[sidePanel] trigger" trigger
-        R2.setTrigger triggerAnnotatedDocIdChange trigger
+        -- R2.setTrigger triggerAnnotatedDocIdChange trigger
+        -- pure unit
 
-        pure $ do
-          -- log "[sidePanel] clearing triggerAnnotatedDocIdChange"
-          R2.clearTrigger triggerAnnotatedDocIdChange
+        -- pure $ do
+        --   -- log "[sidePanel] clearing triggerAnnotatedDocIdChange"
+        --   R2.clearTrigger triggerAnnotatedDocIdChange
 
-      let mainStyle = case fst showSidePanel of
+      let mainStyle = case sidePanelState' of
             Opened -> { display: "block" }
             _      -> { display: "none" }
 
       let closeSidePanel _ = do
-            R.setRef currentDocIdRef Nothing
-            snd showSidePanel $ const Closed
+            -- T.modify_ (\sp -> sp { mCurrentDocId = Nothing
+            --                     , state = Closed }) sidePanel
+            T.write_ Closed sidePanelState
+            T.write_ Nothing sidePanel
 
       pure $ H.div { style: mainStyle } [
         H.div { className: "header" } [
@@ -406,14 +407,12 @@ sidePanelCpt = here.component "sidePanel" cpt
             H.span { className: "fa fa-times" } []
           ]
         ]
-      , sidePanelDocView { mCorpusId, mListId, mNodeId, session } []
+      , sidePanelDocView { mSidePanel: sidePanel', session } []
       ]
 
 type SidePanelDocView = (
-    mCorpusId :: Maybe NodeID
-  , mListId   :: Maybe ListId
-  , mNodeId   :: Maybe NodeID
-  , session  :: Session
+    mSidePanel :: Maybe (Record TT.SidePanel)
+  , session    :: Session
   )
 
 sidePanelDocView :: R2.Component SidePanelDocView
@@ -422,16 +421,13 @@ sidePanelDocView = R.createElement sidePanelDocViewCpt
 sidePanelDocViewCpt :: R.Component SidePanelDocView
 sidePanelDocViewCpt = here.component "sidePanelDocView" cpt
   where
-    cpt { mListId: Nothing } _ = do
+    cpt { mSidePanel: Nothing } _ = do
       pure $ H.div {} []
-    cpt { mNodeId: Nothing } _ = do
-      pure $ H.div {} []
-    cpt { mCorpusId
-        , mListId: Just listId
-        , mNodeId: Just nodeId
+    cpt { mSidePanel: Just { corpusId, listId, nodeId }
         , session } _ = do
       let session' = R.createContext session
+
       pure $ D.documentLayout { listId
-                              , mCorpusId
+                              , mCorpusId: Just corpusId
                               , nodeId
                               , session: session' } []

src/Gargantext/Components/Nodes/Texts/Types.purs

 module Gargantext.Components.Nodes.Texts.Types where
 
 import Data.Maybe (Maybe(..))
-import Effect (Effect)
 import Reactix as R
 
 import Gargantext.Prelude
@@ -56,3 +55,15 @@ initialControls = do
   pure $ {
       triggers
   }
+
+
+type SidePanel =
+  (
+    corpusId      :: NodeID
+  , listId        :: ListId
+  , mCurrentDocId :: Maybe Int
+  , nodeId        :: NodeID
+  )
+
+initialSidePanel :: Maybe (Record SidePanel)
+initialSidePanel = Nothing

src/Gargantext/Components/Router.purs

 module Gargantext.Components.Router (router) where
 
+import Gargantext.Prelude
+
 import Data.Array (fromFoldable)
 import Data.Maybe (Maybe(..))
+import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Record as Record
@@ -9,13 +12,12 @@ import Record.Extra as RE
 import Toestand as T
 import Unsafe.Coerce (unsafeCoerce)
 
-import Gargantext.Prelude
-
-import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Footer (footer)
 import Gargantext.Components.Forest as Forest
-import Gargantext.Components.GraphExplorer (explorerLayoutLoader)
+import Gargantext.Components.GraphExplorer as GraphExplorer
+import Gargantext.Components.GraphExplorer.Sidebar as GES
+import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
 import Gargantext.Components.Lang (LandingLang(LL_EN))
 import Gargantext.Components.Login (login)
 import Gargantext.Components.Nodes.Annuaire (annuaireLayout)
@@ -28,17 +30,20 @@ import Gargantext.Components.Nodes.File (fileLayout)
 import Gargantext.Components.Nodes.Frame (frameLayout)
 import Gargantext.Components.Nodes.Home (homeLayout)
 import Gargantext.Components.Nodes.Lists as Lists
+import Gargantext.Components.Nodes.Lists.Types as ListsTypes
 import Gargantext.Components.Nodes.Texts as Texts
 import Gargantext.Components.SessionLoader (sessionWrapper)
 import Gargantext.Components.SimpleLayout (simpleLayout)
+import Gargantext.Components.TopBar (handedChooser)
 import Gargantext.Components.TopBar as TopBar
 import Gargantext.Config (defaultFrontends, defaultBackends)
 import Gargantext.Ends (Backend)
 import Gargantext.Routes (AppRoute)
 import Gargantext.Routes as GR
-import Gargantext.Sessions (Session)
-import Gargantext.Types (CorpusId, ListId, NodeID, NodeType(..), SessionId)
+import Gargantext.Sessions (Session, WithSessionContext)
+import Gargantext.Types (CorpusId, ListId, NodeID, NodeType(..), SessionId, SidePanelState(..))
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Router"
@@ -56,28 +61,21 @@ router props = R.createElement routerCpt props []
 routerCpt :: R.Component Props
 routerCpt = here.component "router" cpt where
   cpt props@{ boxes } _ = do
+    let session = R.createContext (unsafeCoerce {})
+
     pure $ R.fragment
       [ loginModal { boxes } []
-      , TopBar.topBar { handed: boxes.handed } []
-      , Forest.forestLayoutMain { backend: boxes.backend
-                                , forestOpen: boxes.forestOpen
-                                , frontends: defaultFrontends
-                                , handed: boxes.handed
-                                , reloadForest: boxes.reloadForest
-                                , reloadRoot: boxes.reloadRoot
-                                , route: boxes.route
-                                , sessions: boxes.sessions
-                                , showLogin: boxes.showLogin
-                                , tasks: boxes.tasks } [ renderRoute props [] ]
+      , topBar { boxes } []
+      , forest { boxes, session } []
+      , sidePanel { boxes, session } []
       ]
 
-renderRoute :: R2.Component Props
+renderRoute :: R2.Component (WithSessionContext Props)
 renderRoute = R.createElement renderRouteCpt
 
-renderRouteCpt :: R.Component Props
+renderRouteCpt :: R.Component (WithSessionContext Props)
 renderRouteCpt = here.component "renderRoute" cpt where
-  cpt props@{ boxes } _ = do
-    let session = R.createContext (unsafeCoerce {})
+  cpt props@{ boxes, session } _ = do
     let sessionProps sId = Record.merge { session, sessionId: sId } props
     let sessionNodeProps sId nId = Record.merge { nodeId: nId } $ sessionProps sId
 
@@ -95,7 +93,7 @@ renderRouteCpt = here.component "renderRoute" cpt where
         GR.FolderPrivate s n      -> corpus (sessionNodeProps s n) []
         GR.FolderPublic  s n      -> corpus (sessionNodeProps s n) []
         GR.FolderShared  s n      -> corpus (sessionNodeProps s n) []
-        GR.Home                   -> home props []
+        GR.Home                   -> home { boxes } []
         GR.Lists s n              -> lists (sessionNodeProps s n) []
         GR.Login                  -> login' boxes
         GR.PGraphExplorer s g     -> graphExplorer (sessionNodeProps s g) []
@@ -109,14 +107,10 @@ renderRouteCpt = here.component "renderRoute" cpt where
       ]
 
 
-type LoginModalProps = (
-  boxes :: Boxes
-  )
-
-loginModal :: R2.Component LoginModalProps
+loginModal :: R2.Component Props
 loginModal = R.createElement loginModalCpt
 
-loginModalCpt :: R.Component LoginModalProps
+loginModalCpt :: R.Component Props
 loginModalCpt = here.component "loginModal" cpt
   where
     cpt { boxes: boxes@{ showLogin } } _ = do
@@ -124,32 +118,6 @@ loginModalCpt = here.component "loginModal" cpt
 
         pure $ if showLogin' then login' boxes else H.div {} []
 
-forested :: R2.Component Props
-forested = R.createElement forestedCpt
-
-forestedCpt :: R.Component Props
-forestedCpt = here.component "forested" cpt
-  where
-    cpt { boxes: { backend
-                 , forestOpen
-                 , handed
-                 , reloadForest
-                 , reloadRoot
-                 , route
-                 , sessions
-                 , showLogin
-                 , tasks } } children = do
-      pure $ Forest.forestLayoutMain { backend
-                                     , forestOpen
-                                     , frontends: defaultFrontends
-                                     , handed
-                                     , reloadForest
-                                     , reloadRoot
-                                     , route
-                                     , sessions
-                                     , showLogin
-                                     , tasks } children
-
 authed :: Record SessionProps -> R.Element -> R.Element
 authed props@{ boxes: { sessions }, session, sessionId } content =
   sessionWrapper { fallback: home homeProps []
@@ -159,6 +127,101 @@ authed props@{ boxes: { sessions }, session, sessionId } content =
     where
       homeProps = RE.pick props :: Record Props
 
+topBar :: R2.Component Props
+topBar = R.createElement topBarCpt
+
+topBarCpt :: R.Component Props
+topBarCpt = here.component "topBar" cpt where
+  cpt props@{ boxes: boxes@{ handed
+                           , route } } _ = do
+    route' <- T.useLive T.unequal boxes.route
+
+    let children = case route' of
+          GR.PGraphExplorer s g -> [ GraphExplorer.topBar { boxes } [] ]
+          _                     -> []
+
+    pure $ TopBar.topBar { handed } children
+
+
+forest :: R2.Component (WithSessionContext Props)
+forest = R.createElement forestCpt
+
+forestCpt :: R.Component (WithSessionContext Props)
+forestCpt = here.component "forest" cpt where
+  cpt props@{ boxes: { backend
+                     , forestOpen
+                     , handed
+                     , reloadForest
+                     , reloadRoot
+                     , route
+                     , sessions
+                     , showLogin
+                     , tasks }
+            , session } _ = do
+    session' <- R.useContext session
+
+    pure $ Forest.forestLayoutMain { backend
+                                   , forestOpen
+                                   , frontends: defaultFrontends
+                                   , handed
+                                   , reloadForest
+                                   , reloadRoot
+                                   , route
+                                   , sessions
+                                   , showLogin
+                                   , tasks } [ renderRoute (Record.merge { session } props) [] ]
+
+sidePanel :: R2.Component (WithSessionContext Props)
+sidePanel = R.createElement sidePanelCpt
+
+sidePanelCpt :: R.Component (WithSessionContext Props)
+sidePanelCpt = here.component "sidePanel" cpt where
+  cpt props@{ boxes: boxes@{ graphVersion
+                           , reloadForest
+                           , sidePanelGraph
+                           , sidePanelState
+                           , sidePanelLists
+                           , sidePanelTexts }
+            , session } _ = do
+    route' <- T.useLive T.unequal boxes.route
+    session' <- R.useContext session
+    sidePanelState' <- T.useLive T.unequal sidePanelState
+
+    case sidePanelState' of
+      Opened ->
+        case route' of
+          GR.Lists s n -> do
+            pure $ H.div { className: "side-panel" } [ Lists.sidePanel { session: session'
+                                                                       , sidePanel: sidePanelLists
+                                                                       , sidePanelState } [] ]
+          GR.PGraphExplorer s g -> do
+            { mGraph, mMetaData, removedNodeIds, selectedNodeIds, sideTab } <- GEST.focusedSidePanel sidePanelGraph
+            mGraph' <- T.useLive T.unequal mGraph
+            mGraphMetaData' <- T.useLive T.unequal mMetaData
+
+            case (mGraph' /\ mGraphMetaData') of
+              (Nothing /\ _) -> pure $ H.div {} []
+              (_ /\ Nothing) -> pure $ H.div {} []
+              (Just graph /\ Just metaData) -> do
+                pure $ H.div { className: "side-panel" }
+                            [ GES.sidebar { frontends: defaultFrontends
+                                          , graph
+                                          , graphId: g
+                                          , graphVersion
+                                          , metaData
+                                          , reloadForest
+                                          , removedNodeIds
+                                          , selectedNodeIds
+                                          , session: session'
+                                          , sideTab
+                                          } [] ]
+          GR.Texts s n -> do
+            pure $ H.div { className: "side-panel" } [ Texts.sidePanel { session: session'
+                                                                       , sidePanel: sidePanelTexts
+                                                                       , sidePanelState } [] ]
+          _ -> pure $ H.div {} []
+      _ -> pure $ H.div {} []
+
 annuaire :: R2.Component SessionNodeProps
 annuaire = R.createElement annuaireCpt
 
@@ -166,8 +229,9 @@ annuaireCpt :: R.Component SessionNodeProps
 annuaireCpt = here.component "annuaire" cpt where
   cpt props@{ boxes, nodeId, session, sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
-    pure $ authed sessionProps $ annuaireLayout { frontends, nodeId, session }
-      where frontends = defaultFrontends
+    pure $ authed sessionProps $ annuaireLayout { frontends: defaultFrontends
+                                                , nodeId
+                                                , session }
 
 corpus :: R2.Component SessionNodeProps
 corpus = R.createElement corpusCpt
@@ -213,7 +277,7 @@ document = R.createElement documentCpt
 
 documentCpt :: R.Component DocumentProps
 documentCpt = here.component "document" cpt where
-  cpt props@{ listId, nodeId, session, sessionId, boxes } _ = do
+  cpt props@{ boxes, listId, nodeId, session, sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
       documentMainLayout { listId, nodeId, mCorpusId, session } []
@@ -225,7 +289,7 @@ home = R.createElement homeCpt
 homeCpt :: R.Component Props
 homeCpt = here.component "home" cpt where
   cpt props@{ boxes: boxes@{ sessions, showLogin } } _ = do
-    pure $ homeLayout  { lang: LL_EN, sessions, showLogin }
+    pure $ homeLayout { lang: LL_EN, sessions, showLogin }
 
 lists :: R2.Component SessionNodeProps
 lists = R.createElement listsCpt
@@ -240,6 +304,8 @@ listsCpt = here.component "lists" cpt where
                      , route
                      , sessions
                      , showLogin
+                     , sidePanelState
+                     , sidePanelLists
                      , tasks }
             , nodeId
             , session
@@ -251,8 +317,9 @@ listsCpt = here.component "lists" cpt where
                                     , reloadRoot
                                     , session
                                     , sessionUpdate: \_ -> pure unit
+                                    , sidePanel: sidePanelLists
+                                    , sidePanelState
                                     , tasks } []
-      where frontends = defaultFrontends
 
 login' :: Boxes -> R.Element
 login' { backend, sessions, showLogin: visible } =
@@ -266,29 +333,40 @@ graphExplorer = R.createElement graphExplorerCpt
 
 graphExplorerCpt :: R.Component SessionNodeProps
 graphExplorerCpt = here.component "graphExplorer" cpt where
-  cpt props@{ boxes: { backend, handed, route, sessions, showLogin, tasks }
+  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 }
-      [ explorerLayoutLoader { backend
-                             , frontends
-                             , graphId: nodeId
-                             , handed
-                             , route
-                             , session
-                             , sessions
-                             , showLogin
-                             , tasks } [] ]
-      where frontends = defaultFrontends
+      -- 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
 
 routeFileCpt :: R.Component SessionNodeProps
 routeFileCpt = here.component "routeFile" cpt where
-  cpt props@{ nodeId, session, sessionId, boxes } _ = do
+  cpt props@{ boxes, nodeId, session, sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
       fileLayout { nodeId, session }
@@ -303,7 +381,7 @@ routeFrame = R.createElement routeFrameCpt
 
 routeFrameCpt :: R.Component RouteFrameProps
 routeFrameCpt = here.component "routeFrame" cpt where
-  cpt props@{ nodeId, nodeType, session, sessionId, boxes } _ = do
+  cpt props@{ boxes, nodeId, nodeType, session, sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
       frameLayout { nodeId, nodeType, session }
@@ -313,7 +391,7 @@ team = R.createElement teamCpt
 
 teamCpt :: R.Component SessionNodeProps
 teamCpt = here.component "team" cpt where
-  cpt props@{ nodeId, session, sessionId, boxes } _ = do
+  cpt props@{ boxes, nodeId, session, sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
       corpusLayout { nodeId, session }
@@ -332,36 +410,43 @@ textsCpt = here.component "texts" cpt
                        , route
                        , sessions
                        , showLogin
+                       , sidePanelState
+                       , sidePanelTexts
                        , tasks }
               , nodeId
               , session
               , sessionId } _ = do
       let sessionProps = RE.pick props :: Record SessionProps
       pure $ authed sessionProps $
-        Texts.textsWithSessionContext { frontends
+        Texts.textsWithSessionContext { frontends: defaultFrontends
                                       , nodeId
-                                      , session } []
-        where
-          frontends = defaultFrontends
+                                      , session
+                                      , sidePanel: sidePanelTexts
+                                      , sidePanelState } []
 
 user :: R2.Component SessionNodeProps
 user = R.createElement userCpt
 
 userCpt :: R.Component SessionNodeProps
 userCpt = here.component "user" cpt where
-  cpt props@{ boxes: boxes@{ reloadForest, reloadRoot, tasks }
+  cpt props@{ boxes: boxes@{ reloadForest
+                           , reloadRoot
+                           , sidePanelState
+                           , sidePanelTexts
+                           , tasks }
             , nodeId
             , session
             , sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
-      userLayoutSessionContext { frontends
+      userLayoutSessionContext { frontends: defaultFrontends
                                , nodeId
                                , reloadForest
                                , reloadRoot
                                , session
+                               , sidePanel: sidePanelTexts
+                               , sidePanelState
                                , tasks } []
-      where frontends = defaultFrontends
 
 type ContactProps = ( annuaireId :: NodeID | SessionNodeProps )
 
@@ -370,10 +455,24 @@ contact = R.createElement contactCpt
 
 contactCpt :: R.Component ContactProps
 contactCpt = here.component "contact" cpt where
-  cpt props@{ annuaireId, nodeId, session, sessionId
-            , boxes: { reloadForest, reloadRoot, tasks } } _ = do
+  cpt props@{ annuaireId
+            , boxes: { reloadForest
+                     , reloadRoot
+                     , sidePanelTexts
+                     , sidePanelState
+                     , tasks }
+            , nodeId
+            , session
+            , sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     let forestedProps = RE.pick props :: Record Props
     pure $ authed sessionProps $
-      contactLayout { annuaireId, frontends, nodeId, reloadForest, reloadRoot, session, tasks } []
-      where frontends = defaultFrontends
+      contactLayout { annuaireId
+                    , frontends: defaultFrontends
+                    , nodeId
+                    , reloadForest
+                    , reloadRoot
+                    , session
+                    , sidePanel: sidePanelTexts
+                    , sidePanelState
+                    , tasks } []

src/Gargantext/Components/Tab.purs

@@ -52,9 +52,9 @@ tab = R.createElement tabCpt
 
 -- | A tab only shows its contents if it is currently selected
 tabCpt :: R.Component TabProps
-tabCpt = R.staticComponent "G.C.Tab.tab" cpt
+tabCpt = here.component "tab" cpt
   where
-    cpt { selected, index } children = H.div { className } children'
+    cpt { selected, index } children = pure $ H.div { className } children'
       where
         same = selected == index
         className = "tab-pane" <> (if same then "show active" else "fade")

src/Gargantext/Components/Table.purs

@@ -139,10 +139,10 @@ tableCpt = here.component "table" cpt
                 Just (DESC d) | c == d -> [lnk (Just (ASC  c)) "DESC ", lnk Nothing (columnName c)]
                 _ -> [lnk (Just (ASC c)) (columnName c)]
       pure $ container
-        { syncResetButton
-        , pageSizeControl: sizeDD { params }
+        { pageSizeControl: sizeDD { params }
         , pageSizeDescription: textDescription state.page state.pageSize totalRecords
         , paginationLinks: pagination { params, totalPages }
+        , syncResetButton
         , tableBody: map _.row $ A.fromFoldable rows
         , tableHead: H.tr {} (colHeader <$> colNames)
         }

src/Gargantext/Components/TopBar.purs

@@ -23,7 +23,7 @@ topBar = R.createElement topBarCpt
 topBarCpt :: R.Component TopBarProps
 topBarCpt = here.component "topBar" cpt
   where
-    cpt { handed } _children = do
+    cpt { handed } children = do
       handed' <- T.useLive T.unequal handed
 
       pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
@@ -34,13 +34,13 @@ topBarCpt = here.component "topBar" cpt
                       -- https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items
                       -- In practice: only apply "ml-auto" to the last element of this list, if handed == LeftHanded
                       logo
-                   , H.ul { className: "navbar-nav " <> if handed' == LeftHanded then "ml-auto" else "" } $ reverseHanded handed' [
-                        divDropdownLeft {} []
+                   , H.ul { className: "navbar-nav " <> if handed' == LeftHanded then "ml-auto" else "" } $ reverseHanded handed'
+                     ([ divDropdownLeft {} []
                       , handButton handed'
                       , smiley
                       , H.li { className: "nav-item" } [ themeSwitcher { theme: defaultTheme
                                                                        , themes: allThemes } [] ]
-                      ]
+                      ] <> children)
                    ]
           where
             handButton handed' = H.li { title: "If you are Left Handed you can change\n"

src/Gargantext/Hooks/Sigmax/Types.purs

@@ -19,7 +19,10 @@ import Gargantext.Types as GT
 
 newtype Graph n e = Graph { edges :: Seq.Seq {|e}, nodes :: Seq.Seq {|n} }
 
---derive instance eqGraph :: Eq Graph
+derive instance genericGraph :: Generic (Graph n e) _
+
+instance eqGraphInst :: (Eq (Record n), Eq (Record e)) => Eq (Graph n e) where
+  eq = genericEq
 
 --instance eqGraph :: Eq Graph where
 --  eq (Graph {nodes: n1, edges: e1}) (Graph {nodes: n2, edges: e2}) = n1 == n2 && e1 == e2

src/Gargantext/Types.purs

@@ -773,6 +773,14 @@ prettyNodeType nt = S.replace (S.Pattern "Node")   (S.Replacement " ")
                   $ S.replace (S.Pattern "Folder") (S.Replacement " ")
                   $ show nt
 
+---------------------------------------------------------------------------
 
+data SidePanelState = InitialClosed | Opened | Closed
+derive instance genericSidePanelState :: Generic SidePanelState _
+instance eqSidePanelState :: Eq SidePanelState where
+  eq = genericEq
 
-
+toggleSidePanelState :: SidePanelState -> SidePanelState
+toggleSidePanelState InitialClosed = Opened
+toggleSidePanelState Closed        = Opened
+toggleSidePanelState Opened        = Closed