[ngrams] more ngrams context side panel work

dist/styles/bootstrap-darkster.css

@@ -11381,6 +11381,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

@@ -11184,6 +11184,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

@@ -10947,6 +10947,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

@@ -11195,6 +11195,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

@@ -11196,6 +11196,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/GraphQL/Endpoints.purs

@@ -21,7 +21,7 @@ import Gargantext.Components.GraphQL.User (UserInfo, userInfoQuery)
 import Gargantext.Components.Lang (Lang)
 import Gargantext.Config.REST (RESTError(..), AffRESTError)
 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)
@@ -122,7 +122,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

@@ -563,6 +563,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
 
         convertRow ngramsElement =
           { row: renderNgramsItem { boxes
+                                  , corpusId: path'.nodeId
                                   , dispatch: performAction
                                   , getNgramsChildrenAff
                                   , getNgramsChildren

src/Gargantext/Components/NgramsTable/Tree.purs

@@ -228,6 +228,7 @@ treeLoadedCpt = here.component "treeLoaded" cpt where
 
 type RenderNgramsItem =
   ( boxes             :: Boxes
+  , corpusId          :: GT.CorpusId
   , dispatch             :: Action -> Effect Unit
   , getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
   , getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
@@ -247,6 +248,7 @@ renderNgramsItemCpt :: R.Component RenderNgramsItem
 renderNgramsItemCpt = here.component "renderNgramsItem" cpt
   where
     cpt { boxes
+        , corpusId
         , dispatch
         --, getNgramsChildren
         , isEditing
@@ -272,6 +274,7 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
       pure $ Tbl.makeRow' { className }
         [
           ngramsContext { boxes
+                        , corpusId
                         , ngrams
                         , session
                         , sidePanel } []
@@ -412,6 +415,7 @@ nextTermList GT.CandidateTerm = GT.MapTerm
 
 type NgramsContextProps =
   ( boxes     :: Boxes
+  , corpusId  :: GT.CorpusId
   , ngrams    :: NgramsTerm
   , session   :: Session
   , sidePanel :: T.Box (Maybe (Record SidePanel)))
@@ -422,6 +426,7 @@ ngramsContextCpt :: R.Component NgramsContextProps
 ngramsContextCpt = here.component "ngramsContext" cpt where
   cpt { ngrams
       , boxes: { sidePanelState }
+      , corpusId
       , session
       , sidePanel } _ = do
     mCurrentNgrams <-
@@ -444,7 +449,8 @@ ngramsContextCpt = here.component "ngramsContext" cpt where
             T.write_ Nothing sidePanel
             T.write_ GT.Closed sidePanelState
           else do
-            T.write_ (Just { mCurrentNgrams: Just ngrams }) sidePanel
+            T.write_ (Just { mCorpusId: Just corpusId
+                           , mCurrentNgrams: Just ngrams }) sidePanel
             T.write_ GT.Opened sidePanelState
 
 

src/Gargantext/Components/Nodes/Lists.purs

@@ -2,19 +2,21 @@ module Gargantext.Components.Nodes.Lists where
 
 import Gargantext.Prelude
 
-import Data.Maybe (Maybe)
+import Data.Maybe (Maybe(..), maybe)
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Gargantext.Components.App.Store (Boxes)
-import Gargantext.Core.NgramsTable.Types (NgramsTerm)
 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.REST (logRESTError, AffRESTError)
+import Gargantext.Core.NgramsTable.Types (NgramsTerm(..))
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Sessions (WithSession, WithSessionContext, Session, sessionId, getCacheState, setCacheState)
 import Gargantext.Types as GT
@@ -145,6 +147,85 @@ sidePanelNgramsContextViewCpt :: R.Component SidePanelNgramsContextView
 sidePanelNgramsContextViewCpt = here.component "sidePanelNgramsContextView" cpt where
   cpt { session
       , sidePanel } _ = do
-    sidePanel' <- T.useLive T.unequal sidePanel
+    mSidePanel' <- T.useLive T.unequal sidePanel
+
+    case mSidePanel' of
+      Nothing -> pure $ H.div {} []
+      Just sidePanel' ->
+        pure $ H.div {} [ H.text $ show sidePanel'
+                        , ngramsDocList { mCorpusId: sidePanel'.mCorpusId
+                                        , mNgrams: sidePanel'.mCurrentNgrams
+                                        , session } [] ]
+
+type NgramsDocListProps =
+  ( mCorpusId :: Maybe GT.CorpusId
+  , 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 { mNgrams: Nothing } _ = do
+    pure $ H.div {} []
+  cpt { mCorpusId: Just corpusId
+      , mNgrams: Just ngrams
+      , session } _ = do
+    useLoader { errorHandler
+              , path: { corpusId, ngrams, session }
+              , loader: loaderNgramsDocList
+              , render: \ctx -> ngramsDocListLoaded { contexts: ctx
+                                                    , corpusId
+                                                    , 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
+  , 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
+      , ngrams
+      , session } _ = do
+    pure $ H.div { className: "ngrams-doc-list" }
+      [ H.text "contexts"
+      , H.ul { className: "list-group" } ((\item -> contextItem { item } [] ) <$> contexts)
+      ]
 
-    pure $ H.div {} [ H.text $ show sidePanel' ]
+type ContextItemProps =
+  ( item :: GQLCTX.Context )
+
+contextItem :: R2.Component ContextItemProps
+contextItem = R.createElement contextItemCpt
+contextItemCpt :: R.Component ContextItemProps
+contextItemCpt = here.component "contextItem" cpt where
+  cpt { item } _ = do
+    pure $ H.a { className: "list-group-item text-decoration-none" }
+      [ 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

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

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