[ngrams] added sidebar to ngrams tables

dist/styles/Styles.css

@@ -25,9 +25,6 @@
 .table tr td .active {
   font-weight: bold;
 }
-.table tr td .trash {
-  text-decoration: line-through;
-}
 .table tr td .column-tag {
   align-items: center;
 }
@@ -35,6 +32,15 @@
   cursor: pointer;
   padding: 10px;
 }
+.table tr td .ngrams-selector {
+  display: flex;
+}
+.table tr td .ngrams-selector .ngrams-chooser {
+  padding: 3px;
+}
+.table tr td .trash {
+  text-decoration: line-through;
+}
 
 .context-menu {
   position: fixed;

dist/styles/Styles.sass

@@ -23,13 +23,17 @@
     td
       .active
         font-weight: bold
-      .trash
-        text-decoration: line-through
       .column-tag
         align-items: center
         .doc-chooser
           cursor: pointer
           padding: 10px
+      .ngrams-selector
+        display: flex
+        .ngrams-chooser
+          padding: 3px
+      .trash
+        text-decoration: line-through
 
 .context-menu
   position: fixed

src/Gargantext/Components/App.purs

@@ -20,7 +20,7 @@ import Gargantext.Components.Nodes.Corpus.Document (documentMainLayout)
 import Gargantext.Components.Nodes.File (fileLayout)
 import Gargantext.Components.Nodes.Frame  (frameLayout)
 import Gargantext.Components.Nodes.Home (homeLayout)
-import Gargantext.Components.Nodes.Lists (listsLayout)
+import Gargantext.Components.Nodes.Lists as Lists
 import Gargantext.Components.Nodes.Texts as Texts
 import Gargantext.Components.SimpleLayout (simpleLayout)
 import Gargantext.Config (defaultFrontends, defaultBackends, publicBackend)
@@ -134,16 +134,27 @@ appCpt = R.hooksComponentWithModule thisModule "app" cpt where
             homeLayout { backend, lang: LL_EN, publicBackend, sessions, visible: showLogin }
           ]
           Lists sid nodeId         -> withSession sid $
-            \session -> forested [
-              listsLayout {
-                  appReload
-                , asyncTasksRef
-                , nodeId
-                , session
-                , sessionUpdate
-                , treeReloadRef
+            \session -> Lists.listsWithForest {
+                  forestProps: {
+                      appReload
+                    , asyncTasksRef
+                    , backend
+                    , frontends
+                    , handed
+                    , route: fst route
+                    , sessions: fst sessions
+                    , showLogin: snd showLogin
+                    , treeReloadRef
+                  }
+                , listsProps: {
+                      appReload
+                    , asyncTasksRef
+                    , nodeId
+                    , session
+                    , sessionUpdate
+                    , treeReloadRef
                 }
-            ]
+              } []
           Login -> login { backend, backends, sessions, visible: showLogin }
           PGraphExplorer sid graphId ->
             withSession sid $

src/Gargantext/Components/DocsTable.purs

@@ -72,18 +72,18 @@ type LayoutProps = (
   )
 
 type PageLayoutProps = (
-    cacheState   :: R.State NT.CacheState
-  , frontends    :: Frontends
-  , key          :: String  -- NOTE Necessary to clear the component when cache state changes
-  , listId       :: Int
-  , mCorpusId    :: Maybe Int
-  , nodeId       :: Int
-  , params       :: T.Params
-  , query        :: Query
-  , session      :: Session
+    cacheState        :: R.State NT.CacheState
+  , frontends         :: Frontends
+  , key               :: String  -- NOTE Necessary to clear the component when cache state changes
+  , listId            :: Int
+  , mCorpusId         :: Maybe Int
+  , nodeId            :: Int
+  , params            :: T.Params
+  , query             :: Query
+  , session           :: Session
   , sidePanelTriggers :: Record SidePanelTriggers
-  , tabType      :: TabType
-  , totalRecords :: Int
+  , tabType           :: TabType
+  , totalRecords      :: Int
   )
 
 _documentIdsDeleted  = prop (SProxy :: SProxy "documentIdsDeleted")

src/Gargantext/Components/NgramsTable.purs

 module Gargantext.Components.NgramsTable
   ( MainNgramsTableProps
+  , CommonProps
   , mainNgramsTable
   ) where
 
@@ -279,16 +280,22 @@ tableContainerCpt { dispatch
       ]
 
 -- NEXT
+
+type CommonProps = (
+    afterSync         :: Unit -> Aff Unit
+  , appReload         :: ReloadS
+  , asyncTasksRef     :: R.Ref (Maybe GAT.Reductor)
+  , sidePanelTriggers :: Record NT.SidePanelTriggers
+  , tabNgramType      :: CTabNgramType
+  , treeReloadRef     :: R.Ref (Maybe ReloadS)
+  , withAutoUpdate    :: Boolean
+  )
+
 type Props = (
-    appReload      :: ReloadS
-  , afterSync      :: Unit -> Aff Unit
-  , asyncTasksRef  :: R.Ref (Maybe GAT.Reductor)
-  , path           :: R.State PageParams
-  , state          :: R.State State
-  , tabNgramType   :: CTabNgramType
-  , treeReloadRef  :: R.Ref (Maybe ReloadS)
-  , versioned      :: VersionedNgramsTable
-  , withAutoUpdate :: Boolean
+    path              :: R.State PageParams
+  , state             :: R.State State
+  , versioned         :: VersionedNgramsTable
+  | CommonProps
   )
 
 loadedNgramsTable :: Record Props -> R.Element
@@ -301,6 +308,7 @@ loadedNgramsTableCpt = R.hooksComponentWithModule thisModule "loadedNgramsTable"
         , appReload
         , asyncTasksRef
         , path: path@(path'@{ listIds, nodeId, params, searchQuery, scoreType, termListFilter, termSizeFilter } /\ setPath)
+        , sidePanelTriggers
         , state: (state@{ ngramsChildren
                         , ngramsLocalPatch
                         , ngramsParent
@@ -443,7 +451,8 @@ loadedNgramsTableCpt = R.hooksComponentWithModule thisModule "loadedNgramsTable"
                                       , ngramsLocalPatch
                                       , ngramsParent
                                       , ngramsSelection
-                                      , ngramsTable }
+                                      , ngramsTable
+                                      , sidePanelTriggers } []
           , delete: false
           }
         orderWith =
@@ -509,19 +518,14 @@ selectNgramsOnFirstPage rows = Set.fromFoldable $ (view $ _NgramsElement <<< _ng
 
 
 type MainNgramsTableProps = (
-    afterSync      :: Unit -> Aff Unit
-  , appReload      :: ReloadS
-  , asyncTasksRef  :: R.Ref (Maybe GAT.Reductor)
-  , cacheState     :: R.State NT.CacheState
-  , defaultListId  :: Int
-  , nodeId         :: Int
+    cacheState        :: R.State NT.CacheState
+  , defaultListId     :: Int
+  , nodeId            :: Int
     -- ^ This node can be a corpus or contact.
-  , pathS          :: R.State PageParams
-  , session        :: Session
-  , tabNgramType   :: CTabNgramType
-  , tabType        :: TabType
-  , treeReloadRef  :: R.Ref (Maybe ReloadS)
-  , withAutoUpdate :: Boolean
+  , pathS             :: R.State PageParams
+  , session           :: Session
+  , tabType           :: TabType
+  | CommonProps
   )
 
 mainNgramsTable :: Record MainNgramsTableProps -> R.Element
@@ -538,6 +542,7 @@ mainNgramsTableCpt = R.hooksComponentWithModule thisModule "mainNgramsTable" cpt
               , nodeId
               , pathS
               , session
+              , sidePanelTriggers
               , tabNgramType
               , tabType
               , treeReloadRef
@@ -551,6 +556,7 @@ mainNgramsTableCpt = R.hooksComponentWithModule thisModule "mainNgramsTable" cpt
                                                       , appReload
                                                       , asyncTasksRef
                                                       , path: fst pathS
+                                                      , sidePanelTriggers
                                                       , tabNgramType
                                                       , treeReloadRef
                                                       , versioned
@@ -568,6 +574,7 @@ mainNgramsTableCpt = R.hooksComponentWithModule thisModule "mainNgramsTable" cpt
                                                              , appReload
                                                              , asyncTasksRef
                                                              , pathS
+                                                             , sidePanelTriggers
                                                              , tabNgramType
                                                              , treeReloadRef
                                                              , versioned
@@ -619,14 +626,9 @@ mainNgramsTableCpt = R.hooksComponentWithModule thisModule "mainNgramsTable" cpt
     handleResponse v = v
 
 type MainNgramsTablePaintProps = (
-    afterSync      :: Unit -> Aff Unit
-  , appReload      :: ReloadS
-  , asyncTasksRef  :: R.Ref (Maybe GAT.Reductor)
-  , path           :: PageParams
-  , tabNgramType   :: CTabNgramType
-  , treeReloadRef  :: R.Ref (Maybe ReloadS)
-  , versioned      :: VersionedNgramsTable
-  , withAutoUpdate :: Boolean
+    path              :: PageParams
+  , versioned         :: VersionedNgramsTable
+  | CommonProps
   )
 
 mainNgramsTablePaint :: Record MainNgramsTablePaintProps -> R.Element
@@ -635,7 +637,15 @@ mainNgramsTablePaint p = R.createElement mainNgramsTablePaintCpt p []
 mainNgramsTablePaintCpt :: R.Component MainNgramsTablePaintProps
 mainNgramsTablePaintCpt = R.hooksComponentWithModule thisModule "mainNgramsTablePaint" cpt
   where
-    cpt props@{ afterSync, appReload, asyncTasksRef, path, tabNgramType, treeReloadRef, versioned, withAutoUpdate } _ = do
+    cpt props@{ afterSync
+              , appReload
+              , asyncTasksRef
+              , path
+              , sidePanelTriggers
+              , tabNgramType
+              , treeReloadRef
+              , versioned
+              , withAutoUpdate } _ = do
       pathS <- R.useState' path
       state <- R.useState' $ initialState versioned
 
@@ -644,6 +654,7 @@ mainNgramsTablePaintCpt = R.hooksComponentWithModule thisModule "mainNgramsTable
       , appReload
       , asyncTasksRef
       , path: pathS
+      , sidePanelTriggers
       , state
       , tabNgramType
       , treeReloadRef
@@ -652,14 +663,9 @@ mainNgramsTablePaintCpt = R.hooksComponentWithModule thisModule "mainNgramsTable
       }
 
 type MainNgramsTablePaintNoCacheProps = (
-    afterSync      :: Unit -> Aff Unit
-  , appReload      :: ReloadS
-  , asyncTasksRef  :: R.Ref (Maybe GAT.Reductor)
-  , pathS          :: R.State PageParams
-  , tabNgramType   :: CTabNgramType
-  , treeReloadRef  :: R.Ref (Maybe ReloadS)
-  , versioned      :: VersionedNgramsTable
-  , withAutoUpdate :: Boolean
+    pathS             :: R.State PageParams
+  , versioned         :: VersionedNgramsTable
+  | CommonProps
   )
 
 mainNgramsTablePaintNoCache :: Record MainNgramsTablePaintNoCacheProps -> R.Element
@@ -668,7 +674,15 @@ mainNgramsTablePaintNoCache p = R.createElement mainNgramsTablePaintNoCacheCpt p
 mainNgramsTablePaintNoCacheCpt :: R.Component MainNgramsTablePaintNoCacheProps
 mainNgramsTablePaintNoCacheCpt = R.hooksComponentWithModule thisModule "mainNgramsTablePaintNoCache" cpt
   where
-    cpt props@{ afterSync, appReload, asyncTasksRef, pathS, tabNgramType, treeReloadRef, versioned, withAutoUpdate } _ = do
+    cpt props@{ afterSync
+              , appReload
+              , asyncTasksRef
+              , pathS
+              , sidePanelTriggers
+              , tabNgramType
+              , treeReloadRef
+              , versioned
+              , withAutoUpdate } _ = do
       state <- R.useState' $ initialState versioned
 
       pure $ loadedNgramsTable {
@@ -676,6 +690,7 @@ mainNgramsTablePaintNoCacheCpt = R.hooksComponentWithModule thisModule "mainNgra
       , appReload
       , asyncTasksRef
       , path: pathS
+      , sidePanelTriggers
       , state
       , tabNgramType
       , treeReloadRef

src/Gargantext/Components/NgramsTable/Components.purs

@@ -23,6 +23,7 @@ import Gargantext.Components.NgramsTable.Core ( Action(..), Dispatch, NgramsElem
                                               , _list, _ngrams, _occurrences, ngramsTermText, replace
                                               , singletonNgramsTablePatch, setTermListA
                                               )
+import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Table as Tbl
 import Gargantext.Types as T
 import Gargantext.Utils.Reactix as R2
@@ -171,18 +172,19 @@ treeCpt = R.hooksComponentWithModule thisModule "tree" cpt
             H.ul {} <<< map (\ngrams -> tree (params { ngramsDepth = {depth, ngrams} })) <<< L.toUnfoldable
 
 
-type RenderNgramsItem =
-  ( dispatch :: Action -> Effect Unit
-  , ngrams :: NgramsTerm
-  , ngramsElement :: NgramsElement
-  , ngramsLocalPatch :: NgramsTablePatch
-  , ngramsParent :: Maybe NgramsTerm
-  , ngramsSelection :: Set NgramsTerm
-  , ngramsTable :: NgramsTable
+type RenderNgramsItem = (
+    dispatch          :: Action -> Effect Unit
+  , ngrams            :: NgramsTerm
+  , ngramsElement     :: NgramsElement
+  , ngramsLocalPatch  :: NgramsTablePatch
+  , ngramsParent      :: Maybe NgramsTerm
+  , ngramsSelection   :: Set NgramsTerm
+  , ngramsTable       :: NgramsTable
+  , sidePanelTriggers :: Record NT.SidePanelTriggers
   )
 
-renderNgramsItem :: Record RenderNgramsItem -> R.Element
-renderNgramsItem p = R.createElement renderNgramsItemCpt p []
+renderNgramsItem :: R2.Component RenderNgramsItem
+renderNgramsItem = R.createElement renderNgramsItemCpt
 
 renderNgramsItemCpt :: R.Component RenderNgramsItem
 renderNgramsItemCpt = R.hooksComponentWithModule thisModule "renderNgramsItem" cpt
@@ -193,21 +195,31 @@ renderNgramsItemCpt = R.hooksComponentWithModule thisModule "renderNgramsItem" c
         , ngramsLocalPatch
         , ngramsParent
         , ngramsSelection
-        , ngramsTable } _ =
+        , ngramsTable
+        , sidePanelTriggers: { toggleSidePanel }
+        } _ = do
       pure $ Tbl.makeRow [
-          selected
+          H.div { className: "ngrams-selector" } [
+            H.span { className: "ngrams-chooser fa fa-eye"
+                   , on: { click: onClick } } []
+          , selected
+          ]
         , checkbox T.MapTerm
         , checkbox T.StopTerm
-        , if ngramsParent == Nothing
-          then renderNgramsTree { ngramsTable, ngrams, ngramsStyle, ngramsClick, ngramsEdit }
-          else
-            H.a { on: { click: const $ dispatch $ ToggleChild true ngrams } } [
-                H.i { className: "glyphicon glyphicon-plus" } []
-              , (R2.buff $ span ngramsStyle [text $ " " <> ngramsTermText ngrams])
-            ]
+        , H.div {} [
+          if ngramsParent == Nothing
+            then renderNgramsTree { ngramsTable, ngrams, ngramsStyle, ngramsClick, ngramsEdit }
+            else
+              H.a { on: { click: const $ dispatch $ ToggleChild true ngrams } } [
+                  H.i { className: "glyphicon glyphicon-plus" } []
+                , (R2.buff $ span ngramsStyle [text $ " " <> ngramsTermText ngrams])
+              ]
+        ]
         , H.text $ show (ngramsElement ^. _NgramsElement <<< _occurrences)
       ]
       where
+        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/User/Contacts.purs

@@ -19,7 +19,7 @@ import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.InputWithEnter (inputWithEnter)
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Tabs as Tabs
 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.Lists.Types as NT
+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)
@@ -197,9 +197,9 @@ userLayoutWithKeyCpt = R.hooksComponentWithModule thisModule "userLayoutWithKey"
     cpt { appReload, asyncTasksRef, frontends, nodeId, session, treeReloadRef } _ = do
       reload <- R.useState' 0
 
-      cacheState <- R.useState' NT.CacheOn
+      cacheState <- R.useState' LT.CacheOn
 
-      sidePanelTriggers <- TT.emptySidePanelTriggers
+      sidePanelTriggers <- LT.emptySidePanelTriggers
 
       useLoader {nodeId, reload: fst reload, session} getContactWithReload $
         \contactData@{contactNode: Contact {name, hyperdata}} ->
@@ -257,9 +257,9 @@ annuaireUserLayoutCpt :: R.Component AnnuaireLayoutProps
 annuaireUserLayoutCpt = R.hooksComponentWithModule thisModule "annuaireUserLayout" cpt
   where
     cpt { annuaireId, appReload, asyncTasksRef, frontends, nodeId, session, treeReloadRef } _ = do
-      cacheState <- R.useState' NT.CacheOn
+      cacheState <- R.useState' LT.CacheOn
 
-      sidePanelTriggers <- TT.emptySidePanelTriggers
+      sidePanelTriggers <- LT.emptySidePanelTriggers
 
       useLoader nodeId (getAnnuaireContact session annuaireId) $
         \contactData@{contactNode: Contact {name, hyperdata}} ->

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

@@ -16,8 +16,8 @@ import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.NgramsTable.Core as NTC
 import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (ContactData)
-import Gargantext.Components.Nodes.Lists.Types as NTypes
-import Gargantext.Components.Nodes.Texts.Types (SidePanelTriggers)
+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(..), NodeID, PTabNgramType(..), ReloadS, TabType(..), TabSubType(..))
@@ -47,15 +47,15 @@ modeTabType' Books = CTabAuthors
 modeTabType' Communication = CTabAuthors
 
 type TabsProps = (
-    appReload       :: ReloadS
-  , asyncTasksRef   :: R.Ref (Maybe GAT.Reductor)
-  , cacheState      :: R.State NTypes.CacheState
-  , contactData     :: ContactData
-  , frontends       :: Frontends
-  , nodeId          :: Int
-  , session         :: Session
-  , sidePanelTriggers :: Record SidePanelTriggers
-  , treeReloadRef   :: R.Ref (Maybe ReloadS)
+    appReload         :: ReloadS
+  , asyncTasksRef     :: R.Ref (Maybe GAT.Reductor)
+  , cacheState        :: R.State LTypes.CacheState
+  , contactData       :: ContactData
+  , frontends         :: Frontends
+  , nodeId            :: Int
+  , session           :: Session
+  , sidePanelTriggers :: Record LTypes.SidePanelTriggers
+  , treeReloadRef     :: R.Ref (Maybe ReloadS)
   )
 
 tabs :: Record TabsProps -> R.Element
@@ -74,15 +74,15 @@ tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
         , sidePanelTriggers
         , treeReloadRef } _ = do
       active <- R.useState' 0
-      pure $
-        Tab.tabs { selected: fst active, tabs: tabs' }
+      textsSidePanelTriggers <- TTypes.emptySidePanelTriggers
+      pure $ Tab.tabs { selected: fst active, tabs: tabs' textsSidePanelTriggers }
       where
-        tabs' =
-          [ "Documents"     /\ docs
+        tabs' trg =
+          [ "Documents"     /\ docs trg
           , "Patents"       /\ ngramsView patentsView
           , "Books"         /\ ngramsView booksView
           , "Communication" /\ ngramsView commView
-          , "Trash"         /\ docs -- TODO pass-in trash mode
+          , "Trash"         /\ docs trg -- TODO pass-in trash mode
           ]
           where
             patentsView = { appReload
@@ -113,7 +113,7 @@ tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
                           , treeReloadRef }
             chart       = mempty
             totalRecords = 4736 -- TODO
-            docs = DT.docViewLayout
+            docs sidePanelTriggers = DT.docViewLayout
               { cacheState
               , chart
               , frontends
@@ -129,15 +129,15 @@ tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
 
 
 type NgramsViewTabsProps = (
-    appReload     :: ReloadS
-  , asyncTasksRef :: R.Ref (Maybe GAT.Reductor)
-  , cacheState    :: R.State NTypes.CacheState
-  , defaultListId :: Int
-  , mode          :: Mode
-  , nodeId        :: Int
-  , session       :: Session
-  , sidePanelTriggers :: Record SidePanelTriggers
-  , treeReloadRef  :: R.Ref (Maybe ReloadS)
+    appReload         :: ReloadS
+  , asyncTasksRef     :: R.Ref (Maybe GAT.Reductor)
+  , cacheState        :: R.State LTypes.CacheState
+  , defaultListId     :: Int
+  , mode              :: Mode
+  , nodeId            :: Int
+  , session           :: Session
+  , sidePanelTriggers :: Record LTypes.SidePanelTriggers
+  , treeReloadRef     :: R.Ref (Maybe ReloadS)
   )
 
 ngramsView :: Record NgramsViewTabsProps -> R.Element
@@ -146,7 +146,15 @@ ngramsView props = R.createElement ngramsViewCpt props []
 ngramsViewCpt :: R.Component NgramsViewTabsProps
 ngramsViewCpt = R.hooksComponentWithModule thisModule "ngramsView" cpt
   where
-    cpt { appReload, asyncTasksRef, cacheState, defaultListId, mode, nodeId, session, treeReloadRef } _ = do
+    cpt { appReload
+        , asyncTasksRef
+        , cacheState
+        , defaultListId
+        , mode
+        , nodeId
+        , session
+        , sidePanelTriggers
+        , treeReloadRef } _ = do
       pathS <- R.useState' $ NTC.initialPageParams session nodeId [defaultListId] (TabDocument TabDocs)
 
       pure $ NT.mainNgramsTable {
@@ -159,6 +167,7 @@ ngramsViewCpt = R.hooksComponentWithModule thisModule "ngramsView" cpt
         , pathS
         , tabType
         , session
+        , sidePanelTriggers
         , tabNgramType
         , treeReloadRef
         , withAutoUpdate: false

src/Gargantext/Components/Nodes/Lists.purs

 module Gargantext.Components.Nodes.Lists where
 
 import Data.Maybe (Maybe(..))
-import Data.Tuple (fst)
+import Data.Tuple (fst, snd)
+import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Reactix as R
+import Reactix.DOM.HTML as H
 import Record as Record
 ------------------------------------------------------------------------
 import 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 as NT
+import Gargantext.Components.Nodes.Lists.Types
 import Gargantext.Components.Table as Table
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude
@@ -24,8 +27,51 @@ import Gargantext.Utils.Reactix as R2
 thisModule :: String
 thisModule = "Gargantext.Components.Nodes.Lists"
 ------------------------------------------------------------------------
+type ListsWithForest = (
+    forestProps :: Record Forest.ForestLayoutProps
+  , listsProps  :: Record CommonProps
+  )
 
-type Props = (
+listsWithForest :: R2.Component ListsWithForest
+listsWithForest = R.createElement listsWithForestCpt
+
+listsWithForestCpt :: R.Component ListsWithForest
+listsWithForestCpt = R.hooksComponentWithModule thisModule "listsWithForest" cpt
+  where
+    cpt { forestProps
+        , listsProps: listsProps@{ session } } _ = do
+      controls <- initialControls
+
+      pure $ Forest.forestLayoutWithTopBar forestProps [
+        topBar { controls } []
+      , listsLayout (Record.merge listsProps { controls }) []
+      , H.div { className: "side-panel" } [
+          sidePanel { controls, session } []
+        ]
+      ]
+--------------------------------------------------------
+
+type TopBarProps = (
+  controls :: Record ListsLayoutControls
+  )
+
+topBar :: R2.Component TopBarProps
+topBar = R.createElement topBarCpt
+
+topBarCpt :: R.Component TopBarProps
+topBarCpt = R.hooksComponentWithModule thisModule "topBar" cpt
+  where
+    cpt { controls } _ = do
+      -- empty for now because the button is moved to the side panel
+      pure $ H.div {} []
+        -- H.ul { className: "nav navbar-nav" } [
+        --   H.li {} [
+        --      sidePanelToggleButton { state: controls.showSidePanel } []
+        --      ]
+        --   ]  -- head (goes to top bar)
+--------------------------------------------------------
+
+type CommonProps = (
     appReload     :: GT.ReloadS
   , asyncTasksRef :: R.Ref (Maybe GAT.Reductor)
   , nodeId        :: Int
@@ -34,22 +80,18 @@ type Props = (
   , treeReloadRef :: R.Ref (Maybe GT.ReloadS)
   )
 
+type Props = (
+  controls :: Record ListsLayoutControls
+  | CommonProps
+  )
+
 type WithTreeProps = (
     handed :: GT.Handed
   | Props
   )
 
-listsLayoutWithTree :: R2.Component WithTreeProps
-listsLayoutWithTree props = R.createElement listsLayoutWithTreeCpt props
-
-listsLayoutWithTreeCpt :: R.Component WithTreeProps
-listsLayoutWithTreeCpt = R.hooksComponentWithModule thisModule "listsLayoutWithTree" cpt
-  where
-    cpt { appReload, asyncTasksRef, handed, nodeId, session, sessionUpdate, treeReloadRef } _ = do
-      pure $ listsLayout { appReload, asyncTasksRef, nodeId, session, sessionUpdate, treeReloadRef }
-
-listsLayout :: Record Props -> R.Element
-listsLayout props = R.createElement listsLayoutCpt props []
+listsLayout :: R2.Component Props
+listsLayout = R.createElement listsLayoutCpt
 
 listsLayoutCpt :: R.Component Props
 listsLayoutCpt = R.hooksComponentWithModule thisModule "listsLayout" cpt
@@ -70,10 +112,16 @@ listsLayoutWithKey props = R.createElement listsLayoutWithKeyCpt props []
 listsLayoutWithKeyCpt :: R.Component KeyProps
 listsLayoutWithKeyCpt = R.hooksComponentWithModule thisModule "listsLayoutWithKey" cpt
   where
-    cpt { appReload, asyncTasksRef, nodeId, session, sessionUpdate, treeReloadRef } _ = do
+    cpt { appReload
+        , asyncTasksRef
+        , controls
+        , nodeId
+        , session
+        , sessionUpdate
+        , treeReloadRef } _ = do
       let path = { nodeId, session }
 
-      cacheState <- R.useState' $ getCacheState NT.CacheOn session nodeId
+      cacheState <- R.useState' $ getCacheState CacheOn session nodeId
 
       useLoader path loadCorpusWithChild $
         \corpusData@{ corpusId, corpusNode: NodePoly poly, defaultListId } ->
@@ -98,6 +146,7 @@ listsLayoutWithKeyCpt = R.hooksComponentWithModule thisModule "listsLayoutWithKe
              , corpusId
              , key: "listsLayoutWithKey-tabs-" <> (show $ fst cacheState)
              , session
+             , sidePanelTriggers: controls.triggers
              , treeReloadRef
              }
           ]
@@ -106,3 +155,62 @@ listsLayoutWithKeyCpt = R.hooksComponentWithModule thisModule "listsLayoutWithKe
           launchAff_ $ clearCache unit
           sessionUpdate $ setCacheState session nodeId cacheState
 ------------------------------------------------------------------------
+
+type SidePanelProps = (
+    controls :: Record ListsLayoutControls
+  , session  :: Session
+  )
+
+sidePanel :: R2.Component SidePanelProps
+sidePanel = R.createElement sidePanelCpt
+
+sidePanelCpt :: R.Component SidePanelProps
+sidePanelCpt = R.hooksComponentWithModule thisModule "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'
+
+      (mCorpusId /\ setMCorpusId) <- R.useState' Nothing
+      (mListId /\ setMListId) <- R.useState' Nothing
+      (mNodeId /\ setMNodeId) <- R.useState' Nothing
+
+      let mainStyle = case fst showSidePanel of
+            Opened -> { display: "block" }
+            _      -> { display: "none" }
+
+      let closeSidePanel _ = do
+            snd showSidePanel $ const Closed
+
+      pure $ H.div { style: mainStyle } [
+        H.div { className: "header" } [
+          H.span { className: "btn btn-danger"
+                 , on: { click: closeSidePanel } } [
+            H.span { className: "fa fa-times" } []
+          ]
+        ]
+      , sidePanelDocView { session } []
+      ]
+
+type SidePanelDocView = (
+    session   :: Session
+  )
+
+sidePanelDocView :: R2.Component SidePanelDocView
+sidePanelDocView = R.createElement sidePanelDocViewCpt
+
+sidePanelDocViewCpt :: R.Component SidePanelDocView
+sidePanelDocViewCpt = R.hooksComponentWithModule thisModule "sidePanelDocView" cpt
+  where
+    cpt { session } _ = do
+      -- pure $ H.h4 {} [ H.text txt ]
+      pure $ H.div {} [ H.text "Hello ngrams" ]

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

@@ -20,7 +20,7 @@ import Gargantext.Components.Nodes.Corpus.Chart.Pie  (pie, bar)
 import Gargantext.Components.Nodes.Corpus.Chart.Tree (tree)
 import Gargantext.Components.Nodes.Corpus.Chart (getChartFunction)
 import Gargantext.Components.Nodes.Corpus.Chart.Utils (mNgramsTypeFromTabType)
-import Gargantext.Components.Nodes.Lists.Types as NTypes
+import Gargantext.Components.Nodes.Lists.Types
 import Gargantext.Components.Tab as Tab
 import Gargantext.Sessions (Session)
 import Gargantext.Types (ChartType(..), CTabNgramType(..), Mode(..), ReloadS, TabSubType(..), TabType(..), chartTypeFromString, modeTabType)
@@ -30,13 +30,14 @@ thisModule :: String
 thisModule = "Gargantext.Components.Nodes.Lists.Tabs"
 
 type Props = (
-    appReload     :: ReloadS
-  , asyncTasksRef :: R.Ref (Maybe GAT.Reductor)
-  , cacheState    :: R.State NTypes.CacheState
-  , corpusData    :: CorpusData
-  , corpusId      :: Int
-  , session       :: Session
-  , treeReloadRef :: R.Ref (Maybe ReloadS)
+    appReload         :: ReloadS
+  , asyncTasksRef     :: R.Ref (Maybe GAT.Reductor)
+  , cacheState        :: R.State CacheState
+  , corpusData        :: CorpusData
+  , corpusId          :: Int
+  , session           :: Session
+  , sidePanelTriggers :: Record SidePanelTriggers
+  , treeReloadRef     :: R.Ref (Maybe ReloadS)
   )
 
 type PropsWithKey = (
@@ -50,7 +51,14 @@ tabs props = R.createElement tabsCpt props []
 tabsCpt :: R.Component PropsWithKey
 tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
   where
-    cpt { appReload, asyncTasksRef, cacheState, corpusData, corpusId, session, treeReloadRef } _ = do
+    cpt { appReload
+        , asyncTasksRef
+        , cacheState
+        , corpusData
+        , corpusId
+        , session
+        , sidePanelTriggers
+        , treeReloadRef } _ = do
       (selected /\ setSelected) <- R.useState' 0
 
       pure $ Tab.tabs { selected, tabs: tabs' }
@@ -59,7 +67,15 @@ tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
                 , "Institutes" /\ view Institutes
                 , "Sources"    /\ view Sources
                 , "Terms"      /\ view Terms ]
-        view mode = ngramsView { appReload, asyncTasksRef, cacheState, corpusData, corpusId, mode, session, treeReloadRef }
+        view mode = ngramsView { appReload
+                               , asyncTasksRef
+                               , cacheState
+                               , corpusData
+                               , corpusId
+                               , mode
+                               , session
+                               , sidePanelTriggers
+                               , treeReloadRef }
 
 type NgramsViewProps = ( mode :: Mode | Props )
 
@@ -76,6 +92,7 @@ ngramsViewCpt = R.hooksComponentWithModule thisModule "ngramsView" cpt
         , corpusId
         , mode
         , session
+        , sidePanelTriggers
         , treeReloadRef
         } _ = do
 
@@ -106,6 +123,7 @@ ngramsViewCpt = R.hooksComponentWithModule thisModule "ngramsView" cpt
                                 , nodeId: corpusId
                                 , pathS
                                 , session
+                                , sidePanelTriggers
                                 , tabNgramType
                                 , tabType
                                 , treeReloadRef

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

@@ -6,8 +6,12 @@ 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)
+import Gargantext.Utils.Reactix as R2
 
 thisModule :: String
 thisModule = "Gargantext.Components.Nodes.Lists.Types"
@@ -29,3 +33,46 @@ instance encodeJsonCacheState :: EncodeJson CacheState where
   encodeJson CacheOff = encodeJson "CacheOff"
 instance showCacheState :: Show CacheState where
   show = genericShow
+
+
+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
+  }

src/Gargantext/Components/Nodes/Texts.purs

@@ -420,7 +420,7 @@ sidePanelDocView :: R2.Component SidePanelDocView
 sidePanelDocView = R.createElement sidePanelDocViewCpt
 
 sidePanelDocViewCpt :: R.Component SidePanelDocView
-sidePanelDocViewCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
+sidePanelDocViewCpt = R.hooksComponentWithModule thisModule "sidePanelDocView" cpt
   where
     cpt { mListId: Nothing } _ = do
       pure $ H.div {} []
@@ -430,10 +430,7 @@ sidePanelDocViewCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
         , 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