[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/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/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/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