[texts] add side panel with doc view

dist/styles/Styles.css

@@ -11,4 +11,8 @@
   top: 50%;
 }
 
+.table .doc-chooser {
+  cursor: pointer;
+}
+
 /*# sourceMappingURL=Styles.css.map */

dist/styles/Styles.sass

@@ -8,3 +8,7 @@
     position: absolute
     left: 50%
     top: 50%
+
+.table
+  .doc-chooser
+    cursor: pointer

src/Gargantext/Components/App.purs

@@ -118,7 +118,7 @@ appCpt = R.hooksComponentWithModule thisModule "app" cpt where
             corpusLayout { nodeId, session }
           ]
           CorpusDocument sid corpusId listId nodeId -> withSession sid $ \session -> forested [
-            documentLayout { corpusId: Just corpusId,  nodeId, listId, session }
+            documentLayout { listId, mCorpusId: Just corpusId,  nodeId, session } []
           ]
           Dashboard sid nodeId       -> withSession sid $ \session -> forested [
             dashboardLayout { nodeId, session }
@@ -126,7 +126,7 @@ appCpt = R.hooksComponentWithModule thisModule "app" cpt where
           Document sid listId nodeId ->
             withSession sid $
               \session -> forested [
-                documentLayout { corpusId: Nothing, nodeId, listId, session }
+                documentLayout { listId, mCorpusId: Nothing, nodeId, session } []
               ]
           Folder sid nodeId -> withSession sid $ \session -> forested [ corpusLayout { nodeId, session } ]
           FolderPrivate sid nodeId -> withSession sid $ \session -> forested [ corpusLayout { nodeId, session } ]

src/Gargantext/Components/DocsTable/Types.purs

@@ -3,6 +3,7 @@ module Gargantext.Components.DocsTable.Types where
 import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, jsonEmptyObject, (.:), (:=), (~>))
 import Data.Map (Map)
 import Data.Map as Map
+import Data.Tuple (Tuple(..))
 
 import Gargantext.Prelude
 
@@ -92,3 +93,26 @@ instance decodeResponse :: DecodeJson Response where
 
 type LocalCategories = Map Int Category
 type Query = String
+
+---------------------------------------------------------
+sampleData' :: DocumentsView
+sampleData' = DocumentsView { _id : 1
+                            , url : ""
+                            , date : 2010
+                            , title : "title"
+                            , source : "source"
+                            , category : UnRead
+                            , ngramCount : 1}
+
+sampleData :: Array DocumentsView
+--sampleData = replicate 10 sampleData'
+sampleData = map (\(Tuple t s) -> DocumentsView { _id : 1
+                                                , url : ""
+                                                , date : 2017
+                                                , title: t
+                                                , source: s
+                                                , category : UnRead
+                                                , ngramCount : 10}) sampleDocuments
+
+sampleDocuments :: Array (Tuple String String)
+sampleDocuments = [Tuple "Macroscopic dynamics of the fusion process" "Journal de Physique Lettres",Tuple "Effects of static and cyclic fatigue at high temperature upon reaction bonded silicon nitride" "Journal de Physique Colloques",Tuple "Reliability of metal/glass-ceramic junctions made by solid state bonding" "Journal de Physique Colloques",Tuple "High temperature mechanical properties and intergranular structure of sialons" "Journal de Physique Colloques",Tuple "SOLUTIONS OF THE LANDAU-VLASOV EQUATION IN NUCLEAR PHYSICS" "Journal de Physique Colloques",Tuple "A STUDY ON THE FUSION REACTION 139La + 12C AT 50 MeV/u WITH THE VUU EQUATION" "Journal de Physique Colloques",Tuple "Atomic structure of \"vitreous\" interfacial films in sialon" "Journal de Physique Colloques",Tuple "MICROSTRUCTURAL AND ANALYTICAL CHARACTERIZATION OF Al2O3/Al-Mg COMPOSITE INTERFACES" "Journal de Physique Colloques",Tuple "Development of oxidation resistant high temperature NbTiAl alloys and intermetallics" "Journal de Physique IV Colloque",Tuple "Determination of brazed joint constitutive law by inverse method" "Journal de Physique IV Colloque",Tuple "Two dimensional estimates from ocean SAR images" "Nonlinear Processes in Geophysics",Tuple "Comparison Between New Carbon Nanostructures Produced by Plasma with Industrial Carbon Black Grades" "Journal de Physique III",Tuple "<i>Letter to the Editor:</i> SCIPION, a new flexible ionospheric sounder in Senegal" "Annales Geophysicae",Tuple "Is reducibility in nuclear multifragmentation related to thermal scaling?" "Physics Letters B",Tuple "Independence of fragment charge distributions of the size of heavy multifragmenting sources" "Physics Letters B",Tuple "Hard photons and neutral pions as probes of hot and dense nuclear matter" "Nuclear Physics A",Tuple "Surveying the nuclear caloric curve" "Physics Letters B",Tuple "A hot expanding source in 50 A MeV Xe+Sn central reactions" "Physics Letters B"]

src/Gargantext/Components/Forest.purs

@@ -35,8 +35,8 @@ type Props = (
   , treeReloadRef :: R.Ref (Maybe ReloadS)
   )
 
-forest :: Record Props -> R.Element
-forest props = R.createElement forestCpt props []
+forest :: R2.Component Props
+forest = R.createElement forestCpt
 
 forestCpt :: R.Component Props
 forestCpt = R.hooksComponentWithModule thisModule "forest" cpt where
@@ -133,7 +133,7 @@ forestLayoutCpt :: R.Component ForestLayoutProps
 forestLayoutCpt = R.hooksComponentWithModule thisModule "forestLayout" cpt
   where
     cpt props@{ handed } children = do
-      pure $ R.fragment [ topBar { handed } [], forestLayoutRaw props children ]
+      pure $ R.fragment [ topBar { handed } [], forestLayoutMain props children ]
 
 -- a component, for which first child element is placed inside the top bar
 -- while the remaining ones are put into the main view
@@ -146,46 +146,27 @@ forestLayoutWithTopBarCpt = R.hooksComponentWithModule thisModule "forestLayoutW
     cpt props@{ handed } children = do
       let { head: topBarChild, tail: mainChildren } =
             fromMaybe { head: H.div {} [], tail: [] } $ A.uncons children
-      pure $ R.fragment [ topBar { handed } [ topBarChild ], forestLayoutMain props mainChildren ]
-
-forestLayoutRaw :: R2.Component ForestLayoutProps
-forestLayoutRaw props = R.createElement forestLayoutRawCpt props
-
-forestLayoutRawCpt :: R.Component ForestLayoutProps
-forestLayoutRawCpt = R.hooksComponentWithModule thisModule "forestLayoutRaw" cpt
-  where
-    cpt { appReload
-        , asyncTasksRef
-        , backend
-        , frontends
-        , handed
-        , route
-        , sessions
-        , showLogin
-        , treeReloadRef } children = do
-      let ordering =
-            case fst handed of
-              LeftHanded  -> A.reverse
-              RightHanded -> identity
-
-      pure $ R2.row $ ordering [
-        H.div { className: "col-md-2", style: { paddingTop: "60px" } } ([
-          forest { appReload
-                 , asyncTasksRef
-                 , backend
-                 , frontends
-                 , handed: fst handed
-                 , route
-                 , sessions
-                 , showLogin
-                 , treeReloadRef } ] <> children)
-        ]
+      pure $ R.fragment [
+          topBar { handed } [ topBarChild ]
+        , forestLayoutMain props mainChildren
+      ]
 
 forestLayoutMain :: R2.Component ForestLayoutProps
 forestLayoutMain props = R.createElement forestLayoutMainCpt props
 
 forestLayoutMainCpt :: R.Component ForestLayoutProps
 forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" cpt
+  where
+    cpt props children = do
+      pure $ forestLayoutRaw props [
+          mainPage {} children
+        ]
+
+forestLayoutRaw :: R2.Component ForestLayoutProps
+forestLayoutRaw props = R.createElement forestLayoutRawCpt props
+
+forestLayoutRawCpt :: R.Component ForestLayoutProps
+forestLayoutRawCpt = R.hooksComponentWithModule thisModule "forestLayoutRaw" cpt
   where
     cpt { appReload
         , asyncTasksRef
@@ -201,7 +182,7 @@ forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" c
               LeftHanded  -> A.reverse
               RightHanded -> identity
 
-      pure $ R2.row $ ordering [
+      pure $ R2.row $ ordering ([
         H.div { className: "col-md-2", style: { paddingTop: "60px" } } [
           forest { appReload
                  , asyncTasksRef
@@ -211,9 +192,9 @@ forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" c
                  , route
                  , sessions
                  , showLogin
-                 , treeReloadRef } ]
-        , mainPage {} children
-        ]
+                 , treeReloadRef } []
+          ]
+        ] <> children)
 
 mainPage :: R2.Component ()
 mainPage = R.createElement mainPageCpt

src/Gargantext/Components/GraphExplorer.purs

@@ -225,7 +225,7 @@ explorerCpt = R.hooksComponentWithModule thisModule "explorer" cpt
                , route
                , sessions
                , showLogin
-               , treeReloadRef }
+               , treeReloadRef } []
       ]
 
     mSidebar :: Maybe GET.MetaData

src/Gargantext/Components/Nodes/Corpus/Document.purs

@@ -8,6 +8,7 @@ import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Record as Record
 
 import Gargantext.Prelude (bind, pure, show, unit, ($), (<>), (<<<))
 
@@ -22,7 +23,7 @@ import Gargantext.Components.Annotation.AnnotatedField as AnnotatedField
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes (SessionRoute(..))
 import Gargantext.Sessions (Session, get, sessionId)
-import Gargantext.Types (CTabNgramType(..), NodeType(..), TabSubType(..), TabType(..), ScoreType(..))
+import Gargantext.Types (CTabNgramType(..), ListId, NodeID, NodeType(..), TabSubType(..), TabType(..), ScoreType(..))
 import Gargantext.Utils as U
 import Gargantext.Utils.Reactix as R2
 
@@ -35,8 +36,8 @@ publicationDate (Document doc@{publication_year: Just py, publication_month: Not
 publicationDate (Document doc@{publication_year: Just py, publication_month: Just pm, publication_day: Nothing}) = (U.zeroPad 2 py) <> "-" <> (U.zeroPad 2 pm)
 publicationDate (Document doc@{publication_year: Just py, publication_month: Just pm, publication_day: Just pd}) = (U.zeroPad 2 py) <> "-" <> (U.zeroPad 2 pm) <> "-" <> (U.zeroPad 2 pd)
 
-docViewWrapper :: Record Props -> R.Element
-docViewWrapper props = R.createElement docViewWrapperCpt props []
+docViewWrapper :: R2.Component Props
+docViewWrapper = R.createElement docViewWrapperCpt
 
 docViewWrapperCpt :: R.Component Props
 docViewWrapperCpt = R.hooksComponentWithModule thisModule "docViewWrapper" cpt
@@ -44,15 +45,15 @@ docViewWrapperCpt = R.hooksComponentWithModule thisModule "docViewWrapper" cpt
     cpt { loaded, path } _ = do
       state <- R.useState' $ initialState { loaded }
 
-      pure $ docView { loaded, path, state }
+      pure $ docView { loaded, path, state } []
 
 type DocViewProps = (
   state :: R.State State
   | Props
   )
 
-docView :: Record DocViewProps -> R.Element
-docView props = R.createElement docViewCpt props []
+docView :: R2.Component DocViewProps
+docView = R.createElement docViewCpt
 
 docViewCpt :: R.Component DocViewProps
 docViewCpt = R.hooksComponentWithModule thisModule "docView" cpt
@@ -126,44 +127,40 @@ docViewCpt = R.hooksComponentWithModule thisModule "docView" cpt
           NodePoly {hyperdata: Document doc} = document
 
 type LayoutProps = (
-    corpusId :: Maybe Int
-  , listId :: Int
-  , nodeId :: Int
-  , session :: Session
+    listId   :: ListId
+  , mCorpusId :: Maybe NodeID
+  , nodeId   :: NodeID
+  , session  :: Session
   )
 
-documentLayout :: Record LayoutProps -> R.Element
-documentLayout props = R.createElement documentLayoutCpt props []
+documentLayout :: R2.Component LayoutProps
+documentLayout = R.createElement documentLayoutCpt
 
 documentLayoutCpt :: R.Component LayoutProps
 documentLayoutCpt = R.hooksComponentWithModule thisModule "documentLayout" cpt
   where
-    cpt { corpusId, listId, nodeId, session } _ = do
+    cpt props@{ nodeId, session } _ = do
       let sid = sessionId session
 
-      pure $ documentLayoutWithKey { corpusId
-                                   , key: show sid <> "-" <> show nodeId
-                                   , listId
-                                   , nodeId
-                                   , session }
+      pure $ documentLayoutWithKey (Record.merge props { key: show sid <> "-" <> show nodeId }) []
 
 type KeyLayoutProps = (
   key :: String
   | LayoutProps
   )
 
-documentLayoutWithKey :: Record KeyLayoutProps -> R.Element
-documentLayoutWithKey props = R.createElement documentLayoutWithKeyCpt props []
+documentLayoutWithKey :: R2.Component KeyLayoutProps
+documentLayoutWithKey = R.createElement documentLayoutWithKeyCpt
 
 documentLayoutWithKeyCpt :: R.Component KeyLayoutProps
 documentLayoutWithKeyCpt = R.hooksComponentWithModule thisModule "documentLayoutWithKey" cpt
   where
-    cpt { corpusId, listId, nodeId, session } _ = do
+    cpt { listId, mCorpusId, nodeId, session } _ = do
       useLoader path loadData $ \loaded ->
-        docViewWrapper {path, loaded}
+        docViewWrapper { loaded, path } []
       where
         tabType = TabDocument (TabNgramType CTabTerms)
-        path = { corpusId, listIds: [listId], nodeId, session, tabType }
+        path = { listIds: [listId], mCorpusId, nodeId, session, tabType }
 
 ------------------------------------------------------------------------
 
@@ -174,14 +171,14 @@ loadData :: DocPath -> Aff LoadedData
 loadData {session, nodeId, listIds, tabType} = do
   document <- loadDocument session nodeId
   ngramsTable <- loadNgramsTable
-    { session
+    { listIds
     , nodeId
-    , listIds
     , params: { offset : 0, limit : 100, orderBy: Nothing, searchType: SearchDoc}
-    , tabType
+    , scoreType: Occurrences
     , searchQuery: ""
+    , session
+    , tabType
     , termListFilter: Nothing
     , termSizeFilter: Nothing
-    , scoreType: Occurrences
     }
-  pure {document, ngramsTable}
+  pure { document, ngramsTable }

src/Gargantext/Components/Nodes/Corpus/Document/Types.purs

@@ -10,14 +10,14 @@ import Gargantext.Prelude
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.NgramsTable.Core (CoreState, Versioned(..) , VersionedNgramsTable)
 import Gargantext.Sessions (Session)
-import Gargantext.Types (TabType)
+import Gargantext.Types (ListId, NodeID, TabType)
 
 type DocPath =
-  { corpusId :: Maybe Int
-  , listIds  :: Array Int
-  , nodeId   :: Int
-  , session  :: Session
-  , tabType  :: TabType
+  { listIds   :: Array ListId
+  , mCorpusId :: Maybe NodeID
+  , nodeId    :: NodeID
+  , session   :: Session
+  , tabType   :: TabType
   }
 
 type NodeDocument = NodePoly Document

src/Gargantext/Components/Nodes/Texts.purs

@@ -6,6 +6,7 @@ import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
 import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log, log2)
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Reactix as R
@@ -20,6 +21,7 @@ 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.SidePanelToggleButton (sidePanelToggleButton)
@@ -28,7 +30,7 @@ import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Table as Table
 import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session, Sessions, sessionId, getCacheState, setCacheState)
-import Gargantext.Types (CTabNgramType(..), Handed(..), NodeID, ReloadS, TabSubType(..), TabType(..))
+import Gargantext.Types (CTabNgramType(..), Handed(..), ListId, NodeID, ReloadS, TabSubType(..), TabType(..))
 import Gargantext.Utils.Reactix as R2
 
 thisModule :: String
@@ -47,38 +49,25 @@ textsWithForestCpt :: R.Component TextsWithForest
 textsWithForestCpt = R.hooksComponentWithModule thisModule "textsWithForest" cpt
   where
     cpt { forestProps
-        , textsProps } _ = do
+        , textsProps: textProps@{ session } } _ = do
       controls <- initialControls
 
       pure $ Forest.forestLayoutWithTopBar forestProps [
         topBar { controls } []
-      , H.div {className: "col-md-10"} [
+      , H.div { className: "col-md-10" } [
           H.div {id: "page-wrapper"} [
             H.div {className: "container-fluid"} [
-              textsLayout (Record.merge textsProps { controls }) []
+              textsLayout (Record.merge textProps { controls }) []
             ]
           ]
         ]
-      , sidePanel { controls } []
+      , H.div { className: "col-md-2" } [
+          sidePanel { controls, session } []
+        ]
       ]
 
 --------------------------------------------------------
 
-type TextsLayoutControls = (
-    showSidePanel :: R.State SidePanelState
-  , triggers      :: Record SidePanelTriggers
-  )
-
-initialControls :: R.Hooks (Record TextsLayoutControls)
-initialControls = do
-  showSidePanel  <- R.useState' InitialClosed
-  triggers <- emptySidePanelTriggers
-
-  pure $ {
-      showSidePanel
-    , triggers
-  }
-
 type TopBarProps = (
   controls :: Record TextsLayoutControls
   )
@@ -214,29 +203,34 @@ tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
         }
 
       where
-        initialPath = { corpusId, listId: 0, limit: Nothing, tabType: TabCorpus TabDocs }
+        initialPath = { corpusId
+                      , listId: corpusData.defaultListId
+                      , limit: Nothing
+                      , tabType: TabCorpus TabDocs }
         docView' path tabType = docView { cacheState
                                         , corpusData
                                         , corpusId
                                         , frontends
+                                        , listId: path.listId
                                         -- , path
                                         , session
                                         , tabType
-                                        , sidePanelTriggers }
+                                        , sidePanelTriggers } []
 
 type DocViewProps a = (
     cacheState      :: R.State NT.CacheState
   , corpusData      :: CorpusData
-  , corpusId        :: Int
+  , corpusId        :: NodeID
   , frontends       :: Frontends
+  , listId          :: ListId
   -- , path         :: Record DT.Path
   , session         :: Session
   , tabType         :: TabSubType a
   , sidePanelTriggers :: Record SidePanelTriggers
   )
 
-docView :: forall a. Record (DocViewProps a) -> R.Element
-docView props = R.createElement docViewCpt props []
+docView :: forall a. R2.Component (DocViewProps a)
+docView = R.createElement docViewCpt
 
 docViewCpt :: forall a. R.Component (DocViewProps a)
 docViewCpt = R.hooksComponentWithModule thisModule "docView" cpt
@@ -246,9 +240,9 @@ docViewCpt = R.hooksComponentWithModule thisModule "docView" cpt
 
 -- docViewLayoutRec :: forall a. DocViewProps a -> Record DT.LayoutProps
 docViewLayoutRec { cacheState
-                 , corpusData: { defaultListId }
                  , corpusId
                  , frontends
+                 , listId
                  , session
                  , tabType: TabDocs
                  , sidePanelTriggers } =
@@ -256,7 +250,7 @@ docViewLayoutRec { cacheState
   , chart  : H.div {} []
   , corpusId: Just corpusId
   , frontends
-  , listId: defaultListId
+  , listId
   , nodeId: corpusId
     -- ^ TODO merge nodeId and corpusId in DT
   , session
@@ -266,9 +260,9 @@ docViewLayoutRec { cacheState
   , totalRecords: 4737
   }
 docViewLayoutRec { cacheState
-                 , corpusData: { defaultListId }
                  , corpusId
                  , frontends
+                 , listId
                  , session
                  , tabType: TabMoreLikeFav
                  , sidePanelTriggers } =
@@ -276,7 +270,7 @@ docViewLayoutRec { cacheState
   , chart  : H.div {} []
   , corpusId: Just corpusId
   , frontends
-  , listId: defaultListId
+  , listId
   , nodeId: corpusId
     -- ^ TODO merge nodeId and corpusId in DT
   , session
@@ -286,9 +280,9 @@ docViewLayoutRec { cacheState
   , totalRecords: 4737
   }
 docViewLayoutRec { cacheState
-                 , corpusData: { defaultListId }
                  , corpusId
                  , frontends
+                 , listId
                  , session
                  , tabType: TabMoreLikeTrash
                  , sidePanelTriggers } =
@@ -296,7 +290,7 @@ docViewLayoutRec { cacheState
   , chart  : H.div {} []
   , corpusId: Just corpusId
   , frontends
-  , listId: defaultListId
+  , listId
   , nodeId: corpusId
   -- ^ TODO merge nodeId and corpusId in DT
   , session
@@ -306,9 +300,9 @@ docViewLayoutRec { cacheState
   , totalRecords: 4737
   }
 docViewLayoutRec { cacheState
-                 , corpusData: { defaultListId }
                  , corpusId
                  , frontends
+                 , listId
                  , session
                  , tabType: TabTrash
                  , sidePanelTriggers } =
@@ -316,7 +310,7 @@ docViewLayoutRec { cacheState
   , chart  : H.div {} []
   , corpusId: Nothing
   , frontends
-  , listId: defaultListId
+  , listId
   , nodeId: corpusId
   -- ^ TODO merge nodeId and corpusId in DT
   , session
@@ -327,9 +321,9 @@ docViewLayoutRec { cacheState
   }
 -- DUMMY
 docViewLayoutRec { cacheState
-                 , corpusData: { defaultListId }
                  , corpusId
                  , frontends
+                 , listId
                  , session
                  , tabType
                  , sidePanelTriggers } =
@@ -337,7 +331,7 @@ docViewLayoutRec { cacheState
   , chart  : H.div {} []
   , corpusId: Nothing
   , frontends
-  , listId: defaultListId
+  , listId
   , nodeId: corpusId
   -- ^ TODO merge nodeId and corpusId in DT
   , session
@@ -351,7 +345,8 @@ docViewLayoutRec { cacheState
 --------------------------------------------------------
 
 type SidePanelProps = (
-  controls :: Record TextsLayoutControls
+    controls :: Record TextsLayoutControls
+  , session  :: Session
   )
 
 sidePanel :: R2.Component SidePanelProps
@@ -364,7 +359,55 @@ sidePanelCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
       pure $ H.div {} []
     cpt { controls: { showSidePanel: (Closed /\ _) } } _ = do
       pure $ H.div {} []
-    cpt { controls: { showSidePanel: (Opened /\ _) } } _ = do
-      pure $ H.div { className: "side-bar" } [
-        H.h4 {} [ H.text "Side Bar" ]
-        ]
+    cpt { controls: { showSidePanel: (Opened /\ _)
+                    , triggers: { triggerAnnotatedDocIdChange } }
+        , session } _ = do
+      (mCorpusId /\ setMCorpusId) <- R.useState' Nothing
+      (mListId /\ setMListId) <- R.useState' Nothing
+      (mNodeId /\ setMNodeId) <- R.useState' Nothing
+
+      R.useEffect2 mListId mNodeId $ do
+        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
+              setMCorpusId $ const $ Just corpusId
+              setMListId $ const $ Just listId
+              setMNodeId $ const $ Just nodeId
+        -- log2 "[sidePanel] trigger" trigger
+        R2.setTrigger triggerAnnotatedDocIdChange trigger
+
+        pure $ do
+          -- log "[sidePanel] clearing triggerAnnotatedDocIdChange"
+          R2.clearTrigger triggerAnnotatedDocIdChange
+
+      pure $ H.div { className: "side-panel" } [
+        sidePanelDocView { mCorpusId, mListId, mNodeId, session } []
+      ]
+
+type SidePanelDocView = (
+    mCorpusId :: Maybe NodeID
+  , mListId   :: Maybe ListId
+  , mNodeId   :: Maybe NodeID
+  , session  :: Session
+  )
+
+sidePanelDocView :: R2.Component SidePanelDocView
+sidePanelDocView = R.createElement sidePanelDocViewCpt
+
+sidePanelDocViewCpt :: R.Component SidePanelDocView
+sidePanelDocViewCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
+  where
+    cpt { mListId: Nothing } _ = do
+      pure $ H.div {} []
+    cpt { mNodeId: Nothing } _ = do
+      pure $ H.div {} []
+    cpt { mCorpusId
+        , mListId: Just listId
+        , mNodeId: Just nodeId
+        , session } _ = do
+      -- pure $ H.h4 {} [ H.text txt ]
+      pure $ D.documentLayout { listId, mCorpusId, nodeId, session } []
+      where
+        txt = "mCorpusId: " <> show mCorpusId <> ", listId: " <> show listId <> ", nodeId: " <> show nodeId

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

@@ -6,7 +6,8 @@ import Reactix as R
 
 import Gargantext.Prelude
 
-import Gargantext.Types (NodeID)
+import Gargantext.Types (ListId, NodeID)
+import Gargantext.Utils.Reactix as R2
 
 data SidePanelState = InitialClosed | Opened | Closed
 derive instance eqSidePanelState :: Eq SidePanelState
@@ -16,15 +17,39 @@ toggleSidePanelState InitialClosed = Opened
 toggleSidePanelState Closed        = Opened
 toggleSidePanelState Opened        = Closed
 
+type TriggerAnnotatedDocIdChangeParams = (
+    corpusId :: NodeID
+  , listId   :: ListId
+  , nodeId   :: NodeID
+  )
 
 type SidePanelTriggers = (
-    triggerAnnotatedDocIdChange :: R.Ref (Maybe (NodeID -> Effect Unit))
+    triggerAnnotatedDocIdChange :: R2.Trigger (Record TriggerAnnotatedDocIdChangeParams)
+  , triggerSidePanel            :: R2.Trigger Unit
 )
 
 emptySidePanelTriggers :: R.Hooks (Record SidePanelTriggers)
 emptySidePanelTriggers = do
   triggerAnnotatedDocIdChange <- R.useRef Nothing
+  triggerSidePanel            <- R.useRef Nothing
 
   pure $ {
-    triggerAnnotatedDocIdChange
+      triggerAnnotatedDocIdChange
+    , triggerSidePanel
     }
+
+
+type TextsLayoutControls = (
+    showSidePanel :: R.State SidePanelState
+  , triggers      :: Record SidePanelTriggers
+  )
+
+initialControls :: R.Hooks (Record TextsLayoutControls)
+initialControls = do
+  showSidePanel  <- R.useState' InitialClosed
+  triggers <- emptySidePanelTriggers
+
+  pure $ {
+      showSidePanel
+    , triggers
+  }

src/Gargantext/Utils/Reactix.purs

@@ -17,6 +17,7 @@ import Data.Maybe (Maybe(..), fromJust, fromMaybe, isJust)
 import Data.Nullable (Nullable, null, toMaybe)
 import Data.Tuple (Tuple(..))
 import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log2)
 import Effect (Effect)
 import Effect.Console (logShow)
 import Effect.Aff (Aff, launchAff, launchAff_, killFiber)
@@ -325,3 +326,22 @@ focus nEl = case toMaybe nEl of
 
 setIndeterminateCheckbox :: R.Element -> Boolean -> Effect R.Element
 setIndeterminateCheckbox el val = pure $ (el .= "indeterminate") val
+
+
+-- A "trigger" is a ref to a function which is used to make changes without
+-- modifying too much DOM.
+-- This is to escape passing explicit state to nested child components.
+type Trigger a = R.Ref (Maybe (a -> Effect Unit))
+
+callTrigger :: forall a. Trigger a -> a -> Effect Unit
+callTrigger tRef arg = case R.readRef tRef of
+  Nothing -> do
+    log2 "[callTrigger] trigger is empty" tRef
+    pure unit
+  Just t  -> t arg
+
+setTrigger :: forall a. Trigger a -> (a -> Effect Unit) -> Effect Unit
+setTrigger tRef fun = R.setRef tRef $ Just fun
+
+clearTrigger :: forall a. Trigger a -> Effect Unit
+clearTrigger tRef = R.setRef tRef Nothing