>>> continue

dist/styles/bootstrap-darkster.css

@@ -7482,6 +7482,19 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.graph-doc-list__item__source {
+  font-size: 15px;
+  color: #DEE2E6;
+}
+.graph-doc-list__item__date {
+  font-size: 14px;
+  color: #CED4DA;
+}
+
 .graph-toolbar {
   display: flex;
   padding: 8px;

dist/styles/bootstrap-default.css

@@ -7435,6 +7435,19 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.graph-doc-list__item__source {
+  font-size: 15px;
+  color: #495057;
+}
+.graph-doc-list__item__date {
+  font-size: 14px;
+  color: #6C757D;
+}
+
 .graph-toolbar {
   display: flex;
   padding: 8px;

dist/styles/bootstrap-greyson.css

@@ -7191,6 +7191,19 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.graph-doc-list__item__source {
+  font-size: 15px;
+  color: #495057;
+}
+.graph-doc-list__item__date {
+  font-size: 14px;
+  color: #6C757D;
+}
+
 .graph-toolbar {
   display: flex;
   padding: 8px;

dist/styles/bootstrap-herbie.css

@@ -7439,6 +7439,19 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.graph-doc-list__item__source {
+  font-size: 15px;
+  color: #495057;
+}
+.graph-doc-list__item__date {
+  font-size: 14px;
+  color: #6C757D;
+}
+
 .graph-toolbar {
   display: flex;
   padding: 8px;

dist/styles/bootstrap-monotony.css

@@ -7440,6 +7440,19 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.graph-doc-list__item__source {
+  font-size: 15px;
+  color: #495057;
+}
+.graph-doc-list__item__date {
+  font-size: 14px;
+  color: #6C757D;
+}
+
 .graph-toolbar {
   display: flex;
   padding: 8px;

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

+module Gargantext.Components.GraphExplorer.Sidebar.DocList
+  ( docList
+  ) where
+
+import Gargantext.Prelude
+
+import Data.Foldable (intercalate)
+import Data.Maybe (Maybe(..))
+import Data.Sequence as Seq
+import Data.Tuple.Nested ((/\))
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.FacetsTable (DocumentsView(..), PagePath, Rows(..), initialPagePath, loadPage, publicationDate)
+import Gargantext.Components.GraphExplorer.Types (GraphSideCorpus(..))
+import Gargantext.Components.Search (SearchQuery)
+import Gargantext.Config.REST (RESTError(..))
+import Gargantext.Ends (Frontends, url)
+import Gargantext.Hooks.Loader (useLoaderEffect)
+import Gargantext.Hooks.UpdateEffect (useUpdateEffect1')
+import Gargantext.Routes as Routes
+import Gargantext.Sessions (Session, sessionId)
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Toestand as T
+
+here :: R2.Here
+here = R2.here "Gargantext.Components.GraphExplorer.Sidebar.DocList"
+
+-- @WIP: SIMULATING <Gargantext.Components.Nodes.Corpus.Graph.Tabs>
+
+type TabsProps =
+  ( frontends       :: Frontends
+  , query           :: SearchQuery
+  , session         :: Session
+  , graphSideCorpus :: GraphSideCorpus
+  )
+
+docList :: R2.Leaf TabsProps
+docList = R2.leaf docListCpt
+
+docListCpt :: R.Component TabsProps
+docListCpt = here.component "main" cpt where
+  -- | Helpers
+  -- |
+  errorHandler err = do
+    here.warn2 "[pageLayout] RESTError" err
+    case err of
+      ReadJSONError err' ->
+        here.warn2 "[pageLayout] ReadJSONError" $ show err'
+      _ -> pure unit
+  -- | Component
+  -- |
+  cpt { frontends
+      , query
+      , session
+      , graphSideCorpus: GraphSideCorpus
+          { corpusId: nodeId
+          , listId
+          }
+      } _ = do
+    -- | States
+    -- |
+
+    path' /\ path
+      <- R2.useBox' $ initialPagePath { nodeId, listId, query, session }
+
+    state' /\ state <-
+      R2.useBox' Nothing
+
+    rows' /\ rows <-
+      R2.useBox' Nothing
+
+    -- | Hooks
+    -- |
+
+    useLoaderEffect
+      { errorHandler
+      , state
+      , loader: loadPage
+      , path: path'
+      }
+
+    -- | Effects
+    -- |
+
+    -- (on query change, reload fetched docs)
+    useUpdateEffect1' query $
+      flip T.write_ path $ initialPagePath { nodeId, listId, query, session }
+
+    -- (on fetch success, extract existing docs)
+    useUpdateEffect1' state' case state' of
+      Nothing -> T.write_ (Just Seq.empty) rows
+      Just r -> case r of
+        Docs { docs } -> T.write_ (Just docs) rows
+        _             -> T.write_ (Just Seq.empty) rows
+
+    -- | Render
+    -- |
+    pure $
+
+      R2.fromMaybe_ rows' \results ->
+
+        R.fragment
+        [
+          R2.if' (results == Seq.empty) $
+
+            B.caveat
+            {}
+            [
+              H.text "No docs found in your corpus for your selected terms"
+            ]
+        ,
+          R2.if' (not $ eq results Seq.empty) $
+
+            H.ul
+            { className: intercalate " "
+                [ "graph-doc-list"
+                , "list-group"
+                ]
+            } $
+            Seq.toUnfoldable $ flip Seq.map results \r ->
+
+              item
+              { frontends
+              , path: path'
+              , session
+              , documentView: (r :: DocumentsView)
+              }
+        ]
+
+
+---------------------------------------------------------
+
+type ItemProps =
+  ( documentView :: DocumentsView
+  , frontends    :: Frontends
+  , session      :: Session
+  , path         :: PagePath
+  )
+
+item :: R2.Leaf ItemProps
+item = R2.leaf itemCpt
+
+itemCpt :: R.Component ItemProps
+itemCpt = here.component "item" cpt where
+  cpt { frontends
+      , path
+      , documentView: dv@(DocumentsView { id, title, source })
+      , session
+      } _ = do
+    -- Computed
+    let
+      documentUrl id' { listId, nodeId } =
+        url frontends $ Routes.CorpusDocument (sessionId session) nodeId listId id'
+
+
+    -- Render
+    pure $
+
+      H.div
+      { className: intercalate " "
+          [ "graph-doc-list__item"
+          , "list-group-item"
+          ]
+      }
+      [
+        B.div'
+        { className: "graph-doc-list__item__title" }
+        title
+      ,
+        B.div'
+        { className: "graph-doc-list__item__source" }
+        source
+      ,
+        B.div'
+        { className: "graph-doc-list__item__date" } $
+        publicationDate dv
+
+
+        -- H.a
+        -- { target: "_blank"
+        -- , href: documentUrl id path
+        -- }
+      ]

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

@@ -23,12 +23,12 @@ import Effect.Class (liftEffect)
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
+import Gargantext.Components.GraphExplorer.Sidebar.DocList (docList)
 import Gargantext.Components.GraphExplorer.Sidebar.Legend as Legend
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Components.Lang (Lang(..))
 import Gargantext.Components.NgramsTable.Core as NTC
-import Gargantext.Components.Nodes.Corpus.Graph.Tabs (tabs) as CGT
 import Gargantext.Components.RandomText (words)
 import Gargantext.Components.Search (SearchType(..), SearchQuery(..))
 import Gargantext.Config.REST (AffRESTError)
@@ -172,7 +172,7 @@ sideTabDataCpt = here.component "sideTabData" cpt
               ,
                 sideBarTabSeparator
               ,
-                query
+                docListWrapper
                 { frontends: props.frontends
                 , metaData: props.metaData
                 , nodesMap: SigmaxT.nodesGraphMap props.graph
@@ -233,7 +233,7 @@ sideTabCommunityCpt = here.component "sideTabCommunity" cpt
               ,
                 sideBarTabSeparator
               ,
-                query
+                docListWrapper
                 { frontends
                 , metaData: props.metaData
                 , nodesMap: SigmaxT.nodesGraphMap props.graph
@@ -606,7 +606,7 @@ sendPatch termList session (GET.MetaData metaData) node = do
 
 ---------------------------------------------------------
 
-type Query =
+type DocListWrapper =
   ( frontends       :: Frontends
   , metaData        :: GET.MetaData
   , nodesMap        :: SigmaxT.NodesMap
@@ -615,43 +615,77 @@ type Query =
   , session         :: Session
   )
 
-query :: R2.Leaf Query
-query = R2.leaf queryCpt
+docListWrapper :: R2.Leaf DocListWrapper
+docListWrapper = R2.leaf docListWrapperCpt
 
-queryCpt :: R.Component Query
-queryCpt = here.component "query'" cpt where
+docListWrapperCpt :: R.Component DocListWrapper
+docListWrapperCpt = here.component "docListWrapper" cpt where
   cpt { frontends
       , metaData: GET.MetaData metaData
       , nodesMap
       , searchType
       , selectedNodeIds
-      , session } _ = do
-    -- Computed
+      , session
+      } _ = do
+    -- States
+    query /\ queryBox <- R2.useBox' Nothing
+
+    -- Helpers
     let
+      toSearchQuery ids = SearchQuery
+        { expected: searchType
+        , query: concat $ toQuery <$> Set.toUnfoldable ids
+        }
+
       toQuery id = case Map.lookup id nodesMap of
         Nothing -> []
         Just n -> words n.label
 
-      side corpusId = GET.GraphSideCorpus
+      toGraphSideCorpus corpusId = GET.GraphSideCorpus
         { corpusId
         , corpusLabel: metaData.title
         , listId     : metaData.list.listId
         }
 
+    -- Hooks
+    R.useEffect1' selectedNodeIds $
+      T.write_ (selectedNodeIds # toSearchQuery >>> Just) queryBox
+
     -- Render
     pure $
 
-      R2.fromMaybe_ (head metaData.corpusId) \corpusId ->
-
-        CGT.tabs
-        { frontends
-        , query: SearchQuery
-            { expected: searchType
-            , query: concat $ toQuery <$> Set.toUnfoldable selectedNodeIds
+      R.fragment
+      [
+        case (head metaData.corpusId) /\ query of
+
+          (Just corpusId) /\ (Just query') ->
+            docList
+            { frontends
+            , query: query'
+            , session
+            , graphSideCorpus: toGraphSideCorpus corpusId
             }
-        , session
-        , sides: [side corpusId]
-        }
+
+          _ /\ _ ->
+            B.caveat
+            {}
+            [
+              H.text "You can link a corpus to your Graph to retrieve relative documents when selecting nodes"
+            ]
+
+      ]
+
+
+        -- -- @WIP
+        -- CGT.tabs
+        -- { frontends
+        -- , query: SearchQuery
+        --     { expected: searchType
+        --     , query: concat $ toQuery <$> Set.toUnfoldable selectedNodeIds
+        --     }
+        -- , session
+        -- , sides: [side corpusId]
+        -- }
 
 ------------------------------------------------------------------------
 

src/sass/_legacy/_graph.sass

@@ -183,6 +183,25 @@ $layout-height: calc(100vh - #{ $topbar-height} )
     margin-top: space-x(2)
 
 
+.graph-doc-list
+
+  &__item
+
+    &__title,
+    &__source,
+    &__date
+      line-height: 1.3
+      margin-bottom: space-x(0.5)
+
+    &__source
+      font-size: 15px
+      color: $gray-700
+
+    &__date
+      font-size: 14px
+      color: $gray-600
+
+
 /////////////////////////////////////////////
 
 .graph-toolbar