Merge remote-tracking branch 'origin/547-dev-ngrams-context-sidebar' into dev

dist/styles/bootstrap-darkster.css

@@ -11359,6 +11359,26 @@ select.form-control {
   text-align: center;
 }
 
+.side-panel {
+  z-index: 10;
+}
+.side-panel .ngrams-doc-list .list-group {
+  max-height: 40em;
+  overflow-y: scroll;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-title {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-source {
+  color: #CED4DA;
+  font-variant-caps: small-caps;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-date {
+  color: #CED4DA;
+  font-size: 0.85rem;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-default.css

@@ -11162,6 +11162,26 @@ select.form-control {
   text-align: center;
 }
 
+.side-panel {
+  z-index: 10;
+}
+.side-panel .ngrams-doc-list .list-group {
+  max-height: 40em;
+  overflow-y: scroll;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-title {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-source {
+  color: #6C757D;
+  font-variant-caps: small-caps;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-date {
+  color: #6C757D;
+  font-size: 0.85rem;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-greyson.css

@@ -10925,6 +10925,26 @@ select.form-control {
   text-align: center;
 }
 
+.side-panel {
+  z-index: 10;
+}
+.side-panel .ngrams-doc-list .list-group {
+  max-height: 40em;
+  overflow-y: scroll;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-title {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-source {
+  color: #6C757D;
+  font-variant-caps: small-caps;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-date {
+  color: #6C757D;
+  font-size: 0.85rem;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-herbie.css

@@ -11173,6 +11173,26 @@ select.form-control {
   text-align: center;
 }
 
+.side-panel {
+  z-index: 10;
+}
+.side-panel .ngrams-doc-list .list-group {
+  max-height: 40em;
+  overflow-y: scroll;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-title {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-source {
+  color: #6C757D;
+  font-variant-caps: small-caps;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-date {
+  color: #6C757D;
+  font-size: 0.85rem;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-monotony.css

@@ -11174,6 +11174,26 @@ select.form-control {
   text-align: center;
 }
 
+.side-panel {
+  z-index: 10;
+}
+.side-panel .ngrams-doc-list .list-group {
+  max-height: 40em;
+  overflow-y: scroll;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-title {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-source {
+  color: #6C757D;
+  font-variant-caps: small-caps;
+}
+.side-panel .ngrams-doc-list .list-group .context-item-date {
+  color: #6C757D;
+  font-size: 0.85rem;
+}
+
 .annotation-run {
   cursor: pointer;
 }

src/Gargantext/Components/App/Store.purs

@@ -19,6 +19,7 @@ import Data.Map as Map
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.Lang as Lang
 import Gargantext.Components.Login.Types (TreeId)
+import Gargantext.Components.Nodes.Lists.SidePanel as ListsSP
 import Gargantext.Components.Nodes.Lists.Types as ListsT
 import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Components.Themes as Themes
@@ -56,7 +57,7 @@ type Store =
   , showLogin           :: T.Box Boolean
   , showTree            :: T.Box Boolean
   , showSearch          :: T.Box Boolean
-  , sidePanelLists      :: T.Box (Maybe (Record ListsT.SidePanel))
+  , sidePanelLists      :: T.Box (Maybe (Record ListsSP.SidePanel))
   , sidePanelTexts      :: T.Box (Maybe (Record TextsT.SidePanel))
   , sidePanelState      :: T.Box SidePanelState
   , tasks               :: T.Box GAT.Storage
@@ -84,7 +85,7 @@ type State =
   , showLogin           :: Boolean
   , showTree            :: Boolean
   , showSearch          :: Boolean
-  , sidePanelLists      :: Maybe (Record ListsT.SidePanel)
+  , sidePanelLists      :: Maybe (Record ListsSP.SidePanel)
   , sidePanelTexts      :: Maybe (Record TextsT.SidePanel)
   , sidePanelState      :: SidePanelState
   , tasks               :: GAT.Storage
@@ -113,7 +114,7 @@ options =
   , showLogin           : false
   , showTree            : true
   , showSearch          : false
-  , sidePanelLists      : ListsT.initialSidePanel
+  , sidePanelLists      : ListsSP.initialSidePanel
   , sidePanelTexts      : TextsT.initialSidePanel
   , sidePanelState      : InitialClosed
   , tasks               : GAT.empty

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

@@ -273,7 +273,6 @@ type ItemProps =
 
 item :: R2.Leaf ItemProps
 item = R2.leaf itemCpt
-
 itemCpt :: R.Component ItemProps
 itemCpt = here.component "item" cpt where
   cpt { documentView: dv@(DocumentsView { id, title, source })

src/Gargantext/Components/GraphQL/Endpoints.purs

@@ -22,7 +22,7 @@ import Gargantext.Components.Lang (Lang)
 import Gargantext.Config.REST (RESTError(..), AffRESTError)
 import Gargantext.Core.NgramsTable.Types (NgramsTerm(..))
 import Gargantext.Sessions (Session(..))
-import Gargantext.Types (NodeType)
+import Gargantext.Types (CorpusId, NodeType)
 import Gargantext.Utils.Reactix as R2
 import GraphQL.Client.Args (onlyArgs)
 import GraphQL.Client.Query (mutation)
@@ -123,7 +123,7 @@ getNodeContext session context_id node_id = do
     Just context -> pure $ Right context -- TODO: error handling
 
 type ContextsForNgramsGQL = { contexts_for_ngrams :: Array GQLCTX.Context }
-getContextsForNgrams :: Session -> Int -> Array String -> AffRESTError (Array GQLCTX.Context)
+getContextsForNgrams :: Session -> CorpusId -> Array String -> AffRESTError (Array GQLCTX.Context)
 getContextsForNgrams session corpus_id ngrams_terms = do
   let query = GQLCTX.contextsForNgramsQuery `withVars` { corpus_id
                                                        , ngrams_terms: GQLCTX.NgramsTerms ngrams_terms }

src/Gargantext/Components/NgramsTable.purs

@@ -41,6 +41,7 @@ import Gargantext.Components.NgramsTable.Search as NTS
 import Gargantext.Components.NgramsTable.SelectionCheckbox as NTSC
 import Gargantext.Components.NgramsTable.SyncResetButton (syncResetButtons)
 import Gargantext.Components.NgramsTable.Tree (renderNgramsItem, renderNgramsTree)
+import Gargantext.Components.Nodes.Lists.SidePanel (SidePanel)
 import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Table (changePage)
 import Gargantext.Components.Table as TT
@@ -415,6 +416,8 @@ type PropsNoReload =
   ( cacheState        :: NT.CacheState
   , mTotalRows        :: Maybe Int
   , path              :: T.Box PageParams
+  , session           :: Session
+  , sidePanel         :: T.Box (Maybe (Record SidePanel))
   , state             :: T.Box State
   , treeEdit          :: Record NgramsTreeEditProps
   , versioned         :: VersionedNgramsTable
@@ -486,11 +489,13 @@ loadedNgramsTableBody = R.createElement loadedNgramsTableBodyCpt
 loadedNgramsTableBodyCpt :: R.Component PropsNoReload
 loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
   cpt { afterSync
-      , boxes: { errors
-               , tasks }
+      , boxes: boxes@{ errors
+                     , tasks }
       , cacheState
       , mTotalRows
       , path
+      , session
+      , sidePanel
       , state
       , tabNgramType
       , treeEdit: treeEdit@{ getNgramsChildrenAff, getNgramsChildren }
@@ -557,15 +562,20 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
         filteredConvertedRows = convertRow <$> filteredRows
 
         convertRow ngramsElement =
-          { row: renderNgramsItem { dispatch: performAction
+          { row: renderNgramsItem { boxes
+                                  , corpusId: path'.nodeId
+                                  , dispatch: performAction
                                   , getNgramsChildrenAff
                                   , getNgramsChildren
                                   , isEditing
+                                  , mListId: A.head path'.listIds
                                   , ngrams: ngramsElement ^. _NgramsElement <<< _ngrams
                                   , ngramsElement
                                   , ngramsLocalPatch
                                   , ngramsSelection
-                                  , ngramsTable } []
+                                  , ngramsTable
+                                  , session: path'.session
+                                  , sidePanel } []
           , delete: false
           }
 
@@ -649,7 +659,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
           scoreType
       }
       where
-        colNames = TT.ColumnName <$> [ "Select", "Score", "Terms"] -- see convOrderBy
+        colNames = TT.ColumnName <$> [ "Show", "Select", "Score", "Terms"] -- see convOrderBy
 
 ngramsTableOrderWith :: Maybe (TT.OrderByDirection TT.ColumnName)
                      -> Seq.Seq NgramsElement
@@ -777,6 +787,7 @@ type MainNgramsTableProps = (
     -- ^ This node can be a corpus or contact.
   , path          :: T.Box PageParams
   , session       :: Session
+  , sidePanel     :: T.Box (Maybe (Record SidePanel))
   , tabType       :: TabType
   , treeEdit      :: Record NgramsTreeEditProps
   | CommonProps
@@ -1014,6 +1025,8 @@ mainNgramsTableCacheOnCpt = here.component "mainNgramsTableCacheOn" cpt where
       , boxes
       , defaultListId
       , path
+      , session
+      , sidePanel
       , state
       , tabNgramType
       , treeEdit
@@ -1026,6 +1039,8 @@ mainNgramsTableCacheOnCpt = here.component "mainNgramsTableCacheOn" cpt where
                                                 , boxes
                                                 , cacheState: NT.CacheOn
                                                 , path
+                                                , session
+                                                , sidePanel
                                                 , state
                                                 , tabNgramType
                                                 , treeEdit
@@ -1060,6 +1075,8 @@ mainNgramsTableCacheOffCpt = here.component "mainNgramsTableCacheOff" cpt where
   cpt { afterSync
       , boxes
       , path
+      , session
+      , sidePanel
       , state
       , tabNgramType
       , treeEdit
@@ -1068,6 +1085,8 @@ mainNgramsTableCacheOffCpt = here.component "mainNgramsTableCacheOff" cpt where
                                                                 , boxes
                                                                 , cacheState: NT.CacheOff
                                                                 , path
+                                                                , session
+                                                                , sidePanel
                                                                 , state
                                                                 , tabNgramType
                                                                 , treeEdit
@@ -1106,6 +1125,8 @@ mainNgramsTableCacheOffCpt = here.component "mainNgramsTableCacheOff" cpt where
 type MainNgramsTablePaintProps = (
     cacheState        :: NT.CacheState
   , path              :: T.Box PageParams
+  , session           :: Session
+  , sidePanel         :: T.Box (Maybe (Record SidePanel))
   , state             :: T.Box State
   , treeEdit          :: Record NgramsTreeEditProps
   , versioned         :: VersionedNgramsTable
@@ -1121,6 +1142,8 @@ mainNgramsTablePaintCpt = here.component "mainNgramsTablePaint" cpt
         , boxes
         , cacheState
         , path
+        , session
+        , sidePanel
         , state
         , tabNgramType
         , treeEdit
@@ -1137,6 +1160,8 @@ mainNgramsTablePaintCpt = here.component "mainNgramsTablePaint" cpt
         , cacheState
         , mTotalRows: Nothing
         , path
+        , session
+        , sidePanel
         , state
         , tabNgramType
         , treeEdit
@@ -1147,6 +1172,8 @@ mainNgramsTablePaintCpt = here.component "mainNgramsTablePaint" cpt
 type MainNgramsTablePaintNoCacheProps = (
     cacheState         :: NT.CacheState
   , path               :: T.Box PageParams
+  , session            :: Session
+  , sidePanel          :: T.Box (Maybe (Record SidePanel))
   , state              :: T.Box State
   , treeEdit           :: Record NgramsTreeEditProps
   , versionedWithCount :: VersionedWithCountNgramsTable
@@ -1162,6 +1189,8 @@ mainNgramsTablePaintNoCacheCpt = here.component "mainNgramsTablePaintNoCache" cp
         , boxes
         , cacheState
         , path
+        , session
+        , sidePanel
         , state
         , tabNgramType
         , treeEdit
@@ -1181,6 +1210,8 @@ mainNgramsTablePaintNoCacheCpt = here.component "mainNgramsTablePaintNoCache" cp
         , cacheState
         , mTotalRows: Just count
         , path
+        , session
+        , sidePanel
         , state
         , tabNgramType
         , treeEdit

src/Gargantext/Components/NgramsTable/Tree.purs

@@ -16,12 +16,15 @@ import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff_)
 import Effect.Class (liftEffect)
+import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (Variant(..))
+import Gargantext.Components.Nodes.Lists.SidePanel (SidePanel)
 import Gargantext.Components.Table as Tbl
 import Gargantext.Core.NgramsTable.Functions (applyNgramsPatches, setTermListA, tablePatchHasNgrams)
 import Gargantext.Core.NgramsTable.Types (Action(..), CoreAction, NgramsClick, NgramsDepth, NgramsElement, NgramsTable, NgramsTablePatch, NgramsTerm, _NgramsElement, _NgramsRepoElement, _children, _list, _ngrams, _occurrences, ngramsTermText, replace)
 import Gargantext.Hooks.FirstEffect (useFirstEffect')
+import Gargantext.Sessions (Session)
 import Gargantext.Types as GT
 import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
@@ -225,15 +228,20 @@ treeLoadedCpt = here.component "treeLoaded" cpt where
           H.ul {} <<< map (\ngrams -> tree ((Record.delete (Proxy :: Proxy "ngramsChildren") params) { ngramsDepth = {depth, ngrams} })) <<< L.toUnfoldable
 
 type RenderNgramsItem =
-  ( dispatch             :: Action -> Effect Unit
+  ( boxes             :: Boxes
+  , corpusId          :: GT.CorpusId
+  , dispatch             :: Action -> Effect Unit
   , getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
   , getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
   , isEditing         :: T.Box Boolean
+  , mListId           :: Maybe GT.ListId
   , ngrams            :: NgramsTerm
   , ngramsElement     :: NgramsElement
   , ngramsLocalPatch  :: NgramsTablePatch
   , ngramsSelection   :: Set NgramsTerm
   , ngramsTable       :: NgramsTable
+  , session           :: Session
+  , sidePanel         :: T.Box (Maybe (Record SidePanel))
   )
 
 renderNgramsItem :: R2.Component RenderNgramsItem
@@ -241,19 +249,40 @@ renderNgramsItem = R.createElement renderNgramsItemCpt
 renderNgramsItemCpt :: R.Component RenderNgramsItem
 renderNgramsItemCpt = here.component "renderNgramsItem" cpt
   where
-    cpt { dispatch
+    cpt { boxes
+        , corpusId
+        , dispatch
         --, getNgramsChildren
         , isEditing
+        , mListId
         , ngrams
         , ngramsElement
         , ngramsLocalPatch
         , ngramsSelection
         , ngramsTable
+        , session
+        , sidePanel
         } _ = do
       isEditing' <- T.useLive T.unequal isEditing
 
-      pure $ Tbl.makeRow
+      mCurrentNgrams <-
+        T.useFocused
+        (maybe Nothing _.mCurrentNgrams)
+        (\val -> maybe Nothing (\sp -> Just $ sp { mCurrentNgrams = val })) sidePanel
+      mCurrentNgrams' <- T.useLive T.unequal mCurrentNgrams
+
+      let currentRowSelected = mCurrentNgrams' == Just ngrams
+          className = currentRowSelected ? "page-paint-raw page-paint-raw--selected" $ ""
+
+      pure $ Tbl.makeRow' { className }
         [
+          ngramsContext { boxes
+                        , corpusId
+                        , mListId
+                        , ngrams
+                        , session
+                        , sidePanel } []
+        ,
           selected
         ,
           B.wad'
@@ -392,3 +421,55 @@ nextTermList :: GT.TermList -> GT.TermList
 nextTermList GT.MapTerm       = GT.StopTerm
 nextTermList GT.StopTerm      = GT.CandidateTerm
 nextTermList GT.CandidateTerm = GT.MapTerm
+
+
+type NgramsContextProps =
+  ( boxes     :: Boxes
+  , corpusId  :: GT.CorpusId
+  , mListId   :: Maybe GT.ListId
+  , ngrams    :: NgramsTerm
+  , session   :: Session
+  , sidePanel :: T.Box (Maybe (Record SidePanel)))
+
+ngramsContext :: R2.Component NgramsContextProps
+ngramsContext = R.createElement ngramsContextCpt
+ngramsContextCpt :: R.Component NgramsContextProps
+ngramsContextCpt = here.component "ngramsContext" cpt where
+  cpt { ngrams
+      , boxes: { sidePanelState }
+      , corpusId
+      , mListId
+      , session
+      , sidePanel } _ = do
+    mCurrentNgrams <-
+      T.useFocused
+      (maybe Nothing _.mCurrentNgrams)
+      (\val -> maybe Nothing (\sp -> Just $ sp { mCurrentNgrams = val })) sidePanel
+    mCurrentNgrams' <- T.useLive T.unequal mCurrentNgrams
+
+    let selected = mCurrentNgrams' == Just ngrams
+        eyeClass = selected ? "eye" $ "eye-slash"
+        variant = selected ? Info $ Dark
+
+        onClick selected _ = do
+          -- here.log2 "[docChooser] onClick, listId" listId
+          -- here.log2 "[docChooser] onClick, corpusId" corpusId
+          -- here.log2 "[docChooser] onClick, nodeId" nodeId
+          -- R2.callTrigger triggerAnnotatedDocIdChange { corpusId, listId, nodeId }
+          -- T2.reload tableReload
+          if selected then do
+            T.write_ Nothing sidePanel
+            T.write_ GT.Closed sidePanelState
+          else do
+            T.write_ (Just { mCorpusId: Just corpusId
+                           , mListId
+                           , mCurrentNgrams: Just ngrams }) sidePanel
+            T.write_ GT.Opened sidePanelState
+
+    pure $ H.div { className: "doc-chooser"}
+      [ B.iconButton
+        { name: eyeClass
+        , overlay: false
+        , variant
+        , callback: onClick selected }
+      ]

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

@@ -13,6 +13,7 @@ import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.DocsTable.Types (Year)
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Core.NgramsTable.Functions as NTC
+import Gargantext.Components.Nodes.Lists.SidePanel as LSidePanel
 import Gargantext.Components.Nodes.Lists.Types as LTypes
 import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Components.Tab as Tab
@@ -57,6 +58,7 @@ type TabsProps =
   , nodeId        :: Int
   , session       :: Session
   , sidePanel     :: T.Box (Maybe (Record TextsT.SidePanel))
+  , sidePanelList :: T.Box (Maybe (Record LSidePanel.SidePanel))
   )
 
 tabs :: R2.Leaf TabsProps
@@ -81,7 +83,15 @@ tabsCpt = here.component "tabs" cpt where
     , "Communication" /\ ngramsView (viewProps Communication)
     , "Trash"         /\ docs -- TODO pass-in trash mode
     ] where
-      viewProps mode = Record.merge props { mode }
+      viewProps mode = { boxes         : props.boxes
+                       , cacheState    : props.cacheState
+                       , defaultListId : props.defaultListId
+                       , frontends     : props.frontends
+                       , mode
+                       , nodeId        : props.nodeId
+                       , session       : props.session
+                       , sidePanel     : props.sidePanel
+                       , sidePanelList : props.sidePanelList }
       totalRecords = 4736  -- TODO lol
       docs = DT.docViewLayout (Record.merge { boxes, chartReload, sidePanel } $ Record.merge dtCommon dtExtra)
       dtCommon = RX.pick props :: Record DTCommon
@@ -102,7 +112,6 @@ type DTCommon =
   , frontends         :: Frontends
   , nodeId            :: Int
   , session           :: Session
-  -- , sidePanel    :: T.Box (Record SidePanel)
   )
 
 type NgramsViewTabsProps =
@@ -113,7 +122,11 @@ ngramsView :: R2.Leaf NgramsViewTabsProps
 ngramsView = R2.leaf ngramsViewCpt
 ngramsViewCpt :: R.Component NgramsViewTabsProps
 ngramsViewCpt = here.component "ngramsView" cpt where
-  cpt props@{ defaultListId, mode, nodeId, session } _ = do
+  cpt props@{ defaultListId
+            , mode
+            , nodeId
+            , session
+            , sidePanelList } _ = do
     path <- T.useBox $
       NTC.initialPageParams session nodeId
       [ defaultListId ] (TabDocument TabDocs)
@@ -128,6 +141,7 @@ ngramsViewCpt = here.component "ngramsView" cpt where
           (Record.merge most
            { afterSync
            , path
+           , sidePanel: sidePanelList
            , tabType:        TabPairing (TabNgramType $ modeTabType mode)
            , tabNgramType:   modeTabType' mode
            , treeEdit: { box: treeEditBox

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

@@ -94,7 +94,8 @@ userLayoutWithKey :: R2.Leaf ( key :: String | LayoutProps )
 userLayoutWithKey = R2.leaf userLayoutWithKeyCpt
 userLayoutWithKeyCpt :: R.Component ( key :: String | LayoutProps )
 userLayoutWithKeyCpt = here.component "userLayoutWithKey" cpt where
-  cpt { boxes: boxes@{ sidePanelTexts }
+  cpt { boxes: boxes@{ sidePanelLists
+                     , sidePanelTexts }
       , frontends
       , nodeId
       , session } _ = do
@@ -120,6 +121,7 @@ userLayoutWithKeyCpt = here.component "userLayoutWithKey" cpt where
                        , nodeId
                        , session
                        , sidePanel: sidePanelTexts
+                       , sidePanelList: sidePanelLists
                        }
                     ]
               }

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

@@ -12,6 +12,7 @@ import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.DocsTable.Types (Year)
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Core.NgramsTable.Functions as NTC
+import Gargantext.Components.Nodes.Lists.SidePanel as LSidePanel
 import Gargantext.Components.Nodes.Lists.Types as LTypes
 import Gargantext.Components.Nodes.Texts.Types as TTypes
 import Gargantext.Components.Tab as Tab
@@ -55,6 +56,7 @@ type TabsProps =
   , nodeId        :: Int
   , session       :: Session
   , sidePanel     :: T.Box (Maybe (Record TTypes.SidePanel))
+  , sidePanelList :: T.Box (Maybe (Record LSidePanel.SidePanel))
   )
 
 tabs :: R2.Leaf TabsProps
@@ -69,6 +71,7 @@ tabsCpt = here.component "tabs" cpt
         , nodeId
         , session
         , sidePanel
+        , sidePanelList
         } _ = do
       activeTab <- T.useBox 0
       yearFilter <- T.useBox (Nothing :: Maybe Year)
@@ -90,6 +93,7 @@ tabsCpt = here.component "tabs" cpt
                           , mode: Patents
                           , nodeId
                           , session
+                          , sidePanel: sidePanelList
                           }
             booksView   = { boxes
                           , cacheState
@@ -97,6 +101,7 @@ tabsCpt = here.component "tabs" cpt
                           , mode: Books
                           , nodeId
                           , session
+                          , sidePanel: sidePanelList
                           }
             commView    = { boxes
                           , cacheState
@@ -104,6 +109,7 @@ tabsCpt = here.component "tabs" cpt
                           , mode: Communication
                           , nodeId
                           , session
+                          , sidePanel: sidePanelList
                           }
             chart       = mempty
             totalRecords = 4736 -- TODO
@@ -132,6 +138,7 @@ type NgramsViewTabsProps = (
   , mode           :: Mode
   , nodeId         :: Int
   , session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record LSidePanel.SidePanel))
   )
 
 ngramsView :: R2.Component NgramsViewTabsProps
@@ -144,7 +151,8 @@ ngramsViewCpt = here.component "ngramsView" cpt
         , defaultListId
         , mode
         , nodeId
-        , session } _ = do
+        , session
+        , sidePanel } _ = do
       path <- T.useBox $ NTC.initialPageParams session nodeId [defaultListId] (TabDocument TabDocs)
       onCancelRef <- R.useRef Nothing
       onNgramsClickRef <- R.useRef Nothing
@@ -158,6 +166,7 @@ ngramsViewCpt = here.component "ngramsView" cpt
         , defaultListId
         , path
         , session
+        , sidePanel
         , tabNgramType
         , tabType
         , treeEdit: { box: treeEditBox

src/Gargantext/Components/Nodes/Lists.purs

@@ -2,17 +2,25 @@ module Gargantext.Components.Nodes.Lists where
 
 import Gargantext.Prelude
 
+import Data.Maybe (Maybe(..), fromMaybe, maybe)
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Corpus.CodeSection (loadCorpusWithChild)
+import Gargantext.Components.GraphQL.Context as GQLCTX
+import Gargantext.Components.GraphQL.Endpoints (getContextsForNgrams)
 import Gargantext.Components.NgramsTable.Loader (clearCache)
 import Gargantext.Components.Node (NodePoly(..))
+import Gargantext.Components.Nodes.Lists.SidePanel (SidePanel)
 import Gargantext.Components.Nodes.Lists.Tabs as Tabs
 import Gargantext.Components.Nodes.Lists.Types (CacheState(..))
 import Gargantext.Components.Table as Table
-import Gargantext.Config.REST (logRESTError)
+import Gargantext.Config (defaultFrontends)
+import Gargantext.Config.REST (logRESTError, AffRESTError)
+import Gargantext.Core.NgramsTable.Types (NgramsTerm(..))
+import Gargantext.Ends (url)
 import Gargantext.Hooks.Loader (useLoader)
+import Gargantext.Routes as Routes
 import Gargantext.Sessions (WithSession, WithSessionContext, Session, sessionId, getCacheState, setCacheState)
 import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
@@ -29,6 +37,7 @@ type CommonPropsNoSession =
   ( boxes         :: Boxes
   , nodeId        :: Int
   , sessionUpdate :: Session -> Effect Unit
+  , sidePanel     :: T.Box (Maybe (Record SidePanel))
   )
 
 type Props = WithSession CommonPropsNoSession
@@ -52,7 +61,8 @@ listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where
   cpt { boxes
       , nodeId
       , session
-      , sessionUpdate } _ = do
+      , sessionUpdate
+      , sidePanel } _ = do
     activeTab <- T.useBox 0
 
     let path = { nodeId, session }
@@ -87,6 +97,7 @@ listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where
                               , corpusId
                               , key: "listsLayoutWithKey-tabs-" <> (show cacheState')
                               , session
+                              , sidePanel
                               }
                             ] }
     where
@@ -97,6 +108,7 @@ listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where
 
 type SidePanelProps =
   ( session        :: Session
+  , sidePanel      :: T.Box (Maybe (Record SidePanel))
   , sidePanelState :: T.Box GT.SidePanelState
   )
 
@@ -106,6 +118,7 @@ sidePanelCpt :: R.Component SidePanelProps
 sidePanelCpt = here.component "sidePanel" cpt
   where
     cpt { session
+        , sidePanel
         , sidePanelState } _ = do
 
       sidePanelState' <- T.useLive T.unequal sidePanelState
@@ -123,15 +136,123 @@ sidePanelCpt = here.component "sidePanel" cpt
             H.span { className: "fa fa-times" } []
           ]
         ]
-      , sidePanelDocView { session } []
+      , sidePanelNgramsContextView { session
+                                   , sidePanel } []
       ]
 
-type SidePanelDocView = ( session :: Session )
+type SidePanelNgramsContextView =
+ ( session        :: Session
+ , sidePanel      :: T.Box (Maybe (Record SidePanel)) )
 
-sidePanelDocView :: R2.Component SidePanelDocView
-sidePanelDocView = R.createElement sidePanelDocViewCpt
-sidePanelDocViewCpt :: R.Component SidePanelDocView
-sidePanelDocViewCpt = here.component "sidePanelDocView" cpt where
-  cpt { } _ = do
-    -- pure $ H.h4 {} [ H.text txt ]
-    pure $ H.div {} [ H.text "Hello ngrams" ]
+sidePanelNgramsContextView :: R2.Component SidePanelNgramsContextView
+sidePanelNgramsContextView = R.createElement sidePanelNgramsContextViewCpt
+sidePanelNgramsContextViewCpt :: R.Component SidePanelNgramsContextView
+sidePanelNgramsContextViewCpt = here.component "sidePanelNgramsContextView" cpt where
+  cpt { session
+      , sidePanel } _ = do
+    mSidePanel' <- T.useLive T.unequal sidePanel
+
+    case mSidePanel' of
+      Nothing -> pure $ H.div {} []
+      Just sidePanel' -> do
+        let ngrams = maybe "" (\(NormNgramsTerm n) -> n) sidePanel'.mCurrentNgrams
+
+        pure $ H.div {} [ H.h3 {} [ H.text ngrams ]
+                        , ngramsDocList { mCorpusId: sidePanel'.mCorpusId
+                                        , mListId: sidePanel'.mListId
+                                        , mNgrams: sidePanel'.mCurrentNgrams
+                                        , session } [] ]
+
+type NgramsDocListProps =
+  ( mCorpusId :: Maybe GT.CorpusId
+  , mListId   :: Maybe GT.ListId
+  , mNgrams   :: Maybe NgramsTerm
+  , session   :: Session )
+
+ngramsDocList :: R2.Component NgramsDocListProps
+ngramsDocList = R.createElement ngramsDocListCpt
+ngramsDocListCpt :: R.Component NgramsDocListProps
+ngramsDocListCpt = here.component "ngramsDocList" cpt where
+  cpt { mCorpusId: Nothing } _ = do
+    pure $ H.div {} []
+  cpt { mListId: Nothing } _ = do
+    pure $ H.div {} []
+  cpt { mNgrams: Nothing } _ = do
+    pure $ H.div {} []
+  cpt { mCorpusId: Just corpusId
+      , mListId: Just listId
+      , mNgrams: Just ngrams
+      , session } _ = do
+    useLoader { errorHandler
+              , path: { corpusId, ngrams, session }
+              , loader: loaderNgramsDocList
+              , render: \ctx -> ngramsDocListLoaded { contexts: ctx
+                                                    , corpusId
+                                                    , listId
+                                                    , ngrams
+                                                    , session } []
+              }
+    where
+      errorHandler = logRESTError here "[ngramsDocList]"
+
+type NgramsDocLoadProps =
+  ( corpusId :: GT.CorpusId
+  , ngrams   :: NgramsTerm
+  , session  :: Session )
+
+loaderNgramsDocList :: Record NgramsDocLoadProps -> AffRESTError (Array GQLCTX.Context)
+loaderNgramsDocList { corpusId, ngrams: NormNgramsTerm ngrams, session } =
+  getContextsForNgrams session corpusId [ngrams]
+
+type NgramsDocListLoadedProps =
+  ( contexts :: Array GQLCTX.Context
+  , corpusId :: GT.CorpusId
+  , listId   :: GT.ListId
+  , ngrams   :: NgramsTerm
+  , session  :: Session )
+
+ngramsDocListLoaded :: R2.Component NgramsDocListLoadedProps
+ngramsDocListLoaded = R.createElement ngramsDocListLoadedCpt
+ngramsDocListLoadedCpt :: R.Component NgramsDocListLoadedProps
+ngramsDocListLoadedCpt = here.component "ngramsDocListLoaded" cpt where
+  cpt { contexts
+      , corpusId
+      , listId
+      , ngrams
+      , session } _ = do
+    pure $ H.div { className: "ngrams-doc-list" }
+      [ H.ul { className: "list-group" } ((\item -> contextItem { corpusId
+                                                                , item
+                                                                , listId
+                                                                , session } [] ) <$> contexts)
+      ]
+
+type ContextItemProps =
+  ( corpusId :: GT.CorpusId
+  , item     :: GQLCTX.Context
+  , listId   :: GT.ListId
+  , session  :: Session )
+
+contextItem :: R2.Component ContextItemProps
+contextItem = R.createElement contextItemCpt
+contextItemCpt :: R.Component ContextItemProps
+contextItemCpt = here.component "contextItem" cpt where
+  cpt { corpusId
+      , item
+      , listId
+      , session } _ = do
+
+    let route = Routes.CorpusDocument (sessionId session) corpusId listId item.c_id
+        href = url defaultFrontends route
+
+    pure $ H.a { className: "list-group-item text-decoration-none"
+               , href
+               , target: "_blank" }
+      [ H.div { className: "context-item-title" }
+          [ H.text $ maybe "" (_.hrd_title) item.c_hyperdata ]
+      , H.div { className: "context-item-source"}
+          [ H.text $ maybe "" (_.hrd_source) item.c_hyperdata ]
+      , H.div { className: "context-item-date"}
+          [ H.text $ (maybe "" (\h -> show h.hrd_publication_year) item.c_hyperdata) <>
+                     "-" <>
+                     (maybe "" (\h -> show h.hrd_publication_month) item.c_hyperdata) ] ]

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

+module Gargantext.Components.Nodes.Lists.SidePanel where
+
+import Data.Maybe (Maybe(..))
+import Gargantext.Core.NgramsTable.Types (NgramsTerm)
+import Gargantext.Types (CorpusId, ListId)
+
+
+-- type SidePanel :: forall k. Row k
+type SidePanel = (
+    mCorpusId      :: Maybe CorpusId
+  , mCurrentNgrams :: Maybe NgramsTerm
+  , mListId        :: Maybe ListId
+)
+
+initialSidePanel :: Maybe (Record SidePanel)
+initialSidePanel = Nothing

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

@@ -14,6 +14,7 @@ import Gargantext.Components.Nodes.Corpus.Chart.Pie (pie, bar)
 import Gargantext.Components.Nodes.Corpus.Chart.Tree (tree)
 import Gargantext.Components.Nodes.Corpus.Chart.Utils (mNgramsTypeFromTabType)
 import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
+import Gargantext.Components.Nodes.Lists.SidePanel (SidePanel)
 import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Table.Types (Params)
 import Gargantext.Core.NgramsTable.Types (PageParams)
@@ -37,6 +38,7 @@ type Props = (
   , corpusData :: CorpusData
   , corpusId   :: Int
   , session    :: Session
+  , sidePanel  :: T.Box (Maybe (Record SidePanel))
   )
 
 tabs :: Record ( key :: String | Props ) -> R.Element
@@ -60,7 +62,6 @@ type TabProps = ( mode :: Mode | Props )
 
 tab :: R2.Component TabProps
 tab = R.createElement tabCpt
-
 tabCpt :: R.Component TabProps
 tabCpt = here.component "tab" cpt where
   cpt props _ = do
@@ -78,7 +79,9 @@ tabCpt = here.component "tab" cpt where
                       }
 
 
-type NgramsViewProps = ( path :: T.Box PageParams | TabProps )
+type NgramsViewProps =
+  ( path :: T.Box PageParams
+  | TabProps )
 
 ngramsView :: R2.Component NgramsViewProps
 ngramsView = R.createElement ngramsViewCpt
@@ -89,7 +92,8 @@ ngramsViewCpt = here.component "ngramsView" cpt where
             , corpusData: { defaultListId }
             , mode
             , session
-            , path } _ = do
+            , path
+            , sidePanel } _ = do
       chartsReload <- T.useBox T2.newReload
       onCancelRef <- R.useRef Nothing
       onNgramsClickRef <- R.useRef Nothing
@@ -118,6 +122,7 @@ ngramsViewCpt = here.component "ngramsView" cpt where
           , defaultListId
           , path
           , session
+          , sidePanel
           , tabNgramType
           , tabType
           , treeEdit: { box: treeEditBox

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

@@ -24,9 +24,3 @@ instance Eq CacheState where
   eq = genericEq
 instance Show CacheState where
   show = genericShow
-
-type SidePanel :: forall k. Row k
-type SidePanel = ()
-
-initialSidePanel :: Maybe (Record SidePanel)
-initialSidePanel = Nothing

src/Gargantext/Components/Router.purs

@@ -218,7 +218,6 @@ mainPageCpt = here.component "mainPage" cpt where
 
 forest :: R2.Leaf Props
 forest = R2.leaf forestCpt
-
 forestCpt :: R.Memo Props
 forestCpt = R.memo' $ here.component "forest" cpt where
   cpt { boxes } _ = do
@@ -366,11 +365,11 @@ authedCpt = here.component "authed" cpt where
 
 openedSidePanel :: R2.Leaf Props
 openedSidePanel = R2.leaf openedSidePanelCpt
-
 openedSidePanelCpt :: R.Component Props
 openedSidePanelCpt = here.component "openedSidePanel" cpt where
   cpt { boxes:
         { route
+        , sidePanelLists
         , sidePanelState
         }
       } _ = do
@@ -380,10 +379,13 @@ openedSidePanelCpt = here.component "openedSidePanel" cpt where
 
     let wrapper = H.div { className: "side-panel shadow" }
 
+    selectedNgrams <- T.useBox Nothing
+
     case route' of
       GR.Lists _s _n -> do
         pure $ wrapper
           [ Lists.sidePanel { session
+                            , sidePanel: sidePanelLists
                             , sidePanelState } [] ]
       GR.NodeTexts _s _n ->
         pure $ wrapper [ Texts.textsSidePanel {} ]
@@ -548,7 +550,6 @@ graphExplorerCpt = here.component "graphExplorer" cpt where
 
 phyloExplorer :: R2.Component SessionNodeProps
 phyloExplorer = R.createElement phyloExplorerCpt
-
 phyloExplorerCpt :: R.Component SessionNodeProps
 phyloExplorerCpt = here.component "phylo" cpt where
   cpt props@{ nodeId } _ = do
@@ -588,7 +589,8 @@ listsCpt = here.component "lists" cpt where
                                    Lists.listsLayout { boxes
                                                      , nodeId
                                                      , session
-                                                     , sessionUpdate: \_ -> pure unit } [] } sessionProps) []
+                                                     , sessionUpdate: \_ -> pure unit
+                                                     , sidePanel: boxes.sidePanelLists } [] } sessionProps) []
 
 --------------------------------------------------------------
 
@@ -675,7 +677,6 @@ teamCpt = here.component "team" cpt where
 
 texts :: R2.Component SessionNodeProps
 texts = R.createElement textsCpt
-
 textsCpt :: R.Component SessionNodeProps
 textsCpt = here.component "texts" cpt where
   cpt props@{ nodeId } _ = do

src/Gargantext/Routes.purs

@@ -20,21 +20,21 @@ data AppRoute
   | FolderPrivate  SessionId Int
   | FolderPublic   SessionId Int
   | FolderShared   SessionId Int
+  | ForgotPassword  (M.Map String String)
   | Home
   | Lists          SessionId Int
   | Login
+  | NodeTexts       SessionId Int
   | TreeFlat        SessionId Int String
   | PGraphExplorer  SessionId Int
   | PhyloExplorer   SessionId Int
   | RouteFile       SessionId Int
   | RouteFrameCalc  SessionId Int
   | RouteFrameCode  SessionId Int
-  | RouteFrameWrite SessionId Int
   | RouteFrameVisio SessionId Int
+  | RouteFrameWrite SessionId Int
   | Team            SessionId Int
-  | NodeTexts       SessionId Int
   | UserPage        SessionId Int
-  | ForgotPassword  (M.Map String String)
 
 derive instance Eq AppRoute
 

src/sass/_legacy/_list.sass

@@ -49,14 +49,14 @@
 
   display: flex
   padding-top: $offset-top
-  
+
   &__action
     // @XXX Glyphicon icons lack of homogeneous width
     width: 14px
     margin-right: space-x(1)
 
 ///////////////////////////////////////////////////:
- 
+
 .loaded-ngrams-table-header
   display: flex
   margin-top: space-x(4)
@@ -317,3 +317,19 @@
     width: $icon-width
     font-size: 14px
     text-align: center
+
+.side-panel
+  z-index: 10
+  .ngrams-doc-list
+    .list-group
+      max-height: 40em
+      overflow-y: scroll
+      .context-item-title
+        line-height: 1.3
+        margin-bottom: 4px
+      .context-item-source
+        color: $gray-600
+        font-variant-caps: small-caps
+      .context-item-date
+        color: $gray-600
+        font-size: .85rem