[phylo] add document focus

* #375

dist/styles/bootstrap-darkster.css

@@ -7864,14 +7864,15 @@ input[type=range]:-moz-focusring {
   background-color: #121212;
 }
 .graph-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   content: "";
   position: absolute;
   z-index: 1;
   width: 2px;
   background-color: #0F81C7;
-  left: 0;
-  top: 0;
-  bottom: 0;
 }
 .graph-doc-list__item--selected:first-child::before {
   border-top-left-radius: 0.25rem;
@@ -9280,6 +9281,20 @@ select.form-control {
   border-right: 1px solid #dee2e6;
 }
 
+.phylo__focus {
+  flex-grow: 1;
+  pointer-events: all;
+  position: relative;
+}
+.phylo__focus__inner {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  background-color: #000000;
+}
+
 .phylo-isoline {
   display: flex;
   position: relative;
@@ -9443,7 +9458,7 @@ select.form-control {
   font-weight: bold;
 }
 .phylo-selection-tab__selection {
-  margin: 16px 20px 0;
+  margin: 16px 20px;
 }
 .phylo-selection-tab__selection__item {
   white-space: normal;
@@ -9475,6 +9490,55 @@ select.form-control {
   color: #ADB5BD;
   text-align: center;
 }
+.phylo-selection-tab__extracted-docs {
+  margin: 16px 20px;
+}
+
+.phylo-doc-list__item {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  transition: all 0.2s ease-in-out;
+}
+.phylo-doc-list__item:focus {
+  outline: 0;
+}
+.phylo-doc-list__item:hover {
+  background-color: #121212;
+}
+.phylo-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  width: 2px;
+  background-color: #0F81C7;
+}
+.phylo-doc-list__item--selected:first-child::before {
+  border-top-left-radius: 0.25rem;
+}
+.phylo-doc-list__item--selected:last-child::before {
+  border-bottom-left-radius: 0.25rem;
+}
+.phylo-doc-list__item__main {
+  flex-grow: 1;
+  padding-right: 1.25rem;
+}
+.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.phylo-doc-list__item__source {
+  font-size: 15px;
+  color: #DEE2E6;
+}
+.phylo-doc-list__item__date {
+  font-size: 14px;
+  color: #CED4DA;
+}
 
 .phylo-toolbar {
   display: flex;

dist/styles/bootstrap-default.css

@@ -7817,14 +7817,15 @@ input[type=range]:-moz-focusring {
   background-color: #FCFCFC;
 }
 .graph-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   content: "";
   position: absolute;
   z-index: 1;
   width: 2px;
   background-color: #17a2b8;
-  left: 0;
-  top: 0;
-  bottom: 0;
 }
 .graph-doc-list__item--selected:first-child::before {
   border-top-left-radius: 0.25rem;
@@ -9233,6 +9234,20 @@ select.form-control {
   border-right: 1px solid #dee2e6;
 }
 
+.phylo__focus {
+  flex-grow: 1;
+  pointer-events: all;
+  position: relative;
+}
+.phylo__focus__inner {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  background-color: #fff;
+}
+
 .phylo-isoline {
   display: flex;
   position: relative;
@@ -9396,7 +9411,7 @@ select.form-control {
   font-weight: bold;
 }
 .phylo-selection-tab__selection {
-  margin: 16px 20px 0;
+  margin: 16px 20px;
 }
 .phylo-selection-tab__selection__item {
   white-space: normal;
@@ -9428,6 +9443,55 @@ select.form-control {
   color: #ADB5BD;
   text-align: center;
 }
+.phylo-selection-tab__extracted-docs {
+  margin: 16px 20px;
+}
+
+.phylo-doc-list__item {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  transition: all 0.2s ease-in-out;
+}
+.phylo-doc-list__item:focus {
+  outline: 0;
+}
+.phylo-doc-list__item:hover {
+  background-color: #FCFCFC;
+}
+.phylo-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  width: 2px;
+  background-color: #17a2b8;
+}
+.phylo-doc-list__item--selected:first-child::before {
+  border-top-left-radius: 0.25rem;
+}
+.phylo-doc-list__item--selected:last-child::before {
+  border-bottom-left-radius: 0.25rem;
+}
+.phylo-doc-list__item__main {
+  flex-grow: 1;
+  padding-right: 1.25rem;
+}
+.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.phylo-doc-list__item__source {
+  font-size: 15px;
+  color: #495057;
+}
+.phylo-doc-list__item__date {
+  font-size: 14px;
+  color: #6C757D;
+}
 
 .phylo-toolbar {
   display: flex;

dist/styles/bootstrap-greyson.css

@@ -7573,14 +7573,15 @@ input[type=range]:-moz-focusring {
   background-color: #FCFCFC;
 }
 .graph-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   content: "";
   position: absolute;
   z-index: 1;
   width: 2px;
   background-color: #5c8f94;
-  left: 0;
-  top: 0;
-  bottom: 0;
 }
 .graph-doc-list__item--selected:first-child::before {
   border-top-left-radius: 0.25rem;
@@ -8989,6 +8990,20 @@ select.form-control {
   border-right: 1px solid #dee2e6;
 }
 
+.phylo__focus {
+  flex-grow: 1;
+  pointer-events: all;
+  position: relative;
+}
+.phylo__focus__inner {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  background-color: #fff;
+}
+
 .phylo-isoline {
   display: flex;
   position: relative;
@@ -9152,7 +9167,7 @@ select.form-control {
   font-weight: bold;
 }
 .phylo-selection-tab__selection {
-  margin: 16px 20px 0;
+  margin: 16px 20px;
 }
 .phylo-selection-tab__selection__item {
   white-space: normal;
@@ -9184,6 +9199,55 @@ select.form-control {
   color: #ADB5BD;
   text-align: center;
 }
+.phylo-selection-tab__extracted-docs {
+  margin: 16px 20px;
+}
+
+.phylo-doc-list__item {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  transition: all 0.2s ease-in-out;
+}
+.phylo-doc-list__item:focus {
+  outline: 0;
+}
+.phylo-doc-list__item:hover {
+  background-color: #FCFCFC;
+}
+.phylo-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  width: 2px;
+  background-color: #5c8f94;
+}
+.phylo-doc-list__item--selected:first-child::before {
+  border-top-left-radius: 0.25rem;
+}
+.phylo-doc-list__item--selected:last-child::before {
+  border-bottom-left-radius: 0.25rem;
+}
+.phylo-doc-list__item__main {
+  flex-grow: 1;
+  padding-right: 1.25rem;
+}
+.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.phylo-doc-list__item__source {
+  font-size: 15px;
+  color: #495057;
+}
+.phylo-doc-list__item__date {
+  font-size: 14px;
+  color: #6C757D;
+}
 
 .phylo-toolbar {
   display: flex;

dist/styles/bootstrap-herbie.css

@@ -7821,14 +7821,15 @@ input[type=range]:-moz-focusring {
   background-color: #FCFCFC;
 }
 .graph-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   content: "";
   position: absolute;
   z-index: 1;
   width: 2px;
   background-color: #74DBEF;
-  left: 0;
-  top: 0;
-  bottom: 0;
 }
 .graph-doc-list__item--selected:first-child::before {
   border-top-left-radius: 0.25rem;
@@ -9237,6 +9238,20 @@ select.form-control {
   border-right: 1px solid #dee2e6;
 }
 
+.phylo__focus {
+  flex-grow: 1;
+  pointer-events: all;
+  position: relative;
+}
+.phylo__focus__inner {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  background-color: #fff;
+}
+
 .phylo-isoline {
   display: flex;
   position: relative;
@@ -9400,7 +9415,7 @@ select.form-control {
   font-weight: bold;
 }
 .phylo-selection-tab__selection {
-  margin: 16px 20px 0;
+  margin: 16px 20px;
 }
 .phylo-selection-tab__selection__item {
   white-space: normal;
@@ -9432,6 +9447,55 @@ select.form-control {
   color: #ADB5BD;
   text-align: center;
 }
+.phylo-selection-tab__extracted-docs {
+  margin: 16px 20px;
+}
+
+.phylo-doc-list__item {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  transition: all 0.2s ease-in-out;
+}
+.phylo-doc-list__item:focus {
+  outline: 0;
+}
+.phylo-doc-list__item:hover {
+  background-color: #FCFCFC;
+}
+.phylo-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  width: 2px;
+  background-color: #74DBEF;
+}
+.phylo-doc-list__item--selected:first-child::before {
+  border-top-left-radius: 0.25rem;
+}
+.phylo-doc-list__item--selected:last-child::before {
+  border-bottom-left-radius: 0.25rem;
+}
+.phylo-doc-list__item__main {
+  flex-grow: 1;
+  padding-right: 1.25rem;
+}
+.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.phylo-doc-list__item__source {
+  font-size: 15px;
+  color: #495057;
+}
+.phylo-doc-list__item__date {
+  font-size: 14px;
+  color: #6C757D;
+}
 
 .phylo-toolbar {
   display: flex;

dist/styles/bootstrap-monotony.css

@@ -7822,14 +7822,15 @@ input[type=range]:-moz-focusring {
   background-color: #FCFCFC;
 }
 .graph-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   content: "";
   position: absolute;
   z-index: 1;
   width: 2px;
   background-color: #515151;
-  left: 0;
-  top: 0;
-  bottom: 0;
 }
 .graph-doc-list__item--selected:first-child::before {
   border-top-left-radius: 0.25rem;
@@ -9238,6 +9239,20 @@ select.form-control {
   border-right: 1px solid #dee2e6;
 }
 
+.phylo__focus {
+  flex-grow: 1;
+  pointer-events: all;
+  position: relative;
+}
+.phylo__focus__inner {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  background-color: #fff;
+}
+
 .phylo-isoline {
   display: flex;
   position: relative;
@@ -9401,7 +9416,7 @@ select.form-control {
   font-weight: bold;
 }
 .phylo-selection-tab__selection {
-  margin: 16px 20px 0;
+  margin: 16px 20px;
 }
 .phylo-selection-tab__selection__item {
   white-space: normal;
@@ -9433,6 +9448,55 @@ select.form-control {
   color: #ADB5BD;
   text-align: center;
 }
+.phylo-selection-tab__extracted-docs {
+  margin: 16px 20px;
+}
+
+.phylo-doc-list__item {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  transition: all 0.2s ease-in-out;
+}
+.phylo-doc-list__item:focus {
+  outline: 0;
+}
+.phylo-doc-list__item:hover {
+  background-color: #FCFCFC;
+}
+.phylo-doc-list__item--selected::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  width: 2px;
+  background-color: #515151;
+}
+.phylo-doc-list__item--selected:first-child::before {
+  border-top-left-radius: 0.25rem;
+}
+.phylo-doc-list__item--selected:last-child::before {
+  border-bottom-left-radius: 0.25rem;
+}
+.phylo-doc-list__item__main {
+  flex-grow: 1;
+  padding-right: 1.25rem;
+}
+.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+.phylo-doc-list__item__source {
+  font-size: 15px;
+  color: #495057;
+}
+.phylo-doc-list__item__date {
+  font-size: 14px;
+  color: #6C757D;
+}
 
 .phylo-toolbar {
   display: flex;

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

@@ -11,7 +11,7 @@ import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.PhyloExplorer.API (get)
 import Gargantext.Components.PhyloExplorer.Layout (layout)
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
-import Gargantext.Components.PhyloExplorer.Types (CacheParams, PhyloDataSet, defaultCacheParams)
+import Gargantext.Components.PhyloExplorer.Types (CacheParams, PhyloSet(..), defaultCacheParams)
 import Gargantext.Config.REST (logRESTError)
 import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.Loader (useLoaderEffect)
@@ -40,7 +40,7 @@ nodeCpt = here.component "node" cpt where
     -- |
     session <- useSession
 
-    state' /\ state <- R2.useBox' (Nothing :: Maybe PhyloDataSet)
+    state' /\ state <- R2.useBox' (Nothing :: Maybe PhyloSet)
     cache' /\ cache <- R2.useBox' (defaultCacheParams :: CacheParams)
 
     -- | Computed
@@ -92,13 +92,15 @@ nodeCpt = here.component "node" cpt where
             ]
           ]
       , defaultSlot:
-          R2.fromMaybe state' \(phyloDataSet :: PhyloDataSet) ->
+          R2.fromMaybe state' \(PhyloSet { corpusId, listId, phyloData }) ->
 
             let
               state_ :: Record PhyloStore.State
               state_ =
                 -- Data
-                { phyloDataSet
+                { phyloData
+                , corpusId
+                , listId
                 , phyloId: nodeId
                 -- (cache params)
                 , expandSelection: getter _.expandSelection cache'

src/Gargantext/Components/PhyloExplorer/API.purs

@@ -16,8 +16,8 @@ import Data.Maybe (Maybe(..))
 import Data.Newtype (class Newtype)
 import Data.Show.Generic (genericShow)
 import Data.Symbol (SProxy(..))
-import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet)
-import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet, parsePhyloJSONSet)
+import Gargantext.Components.PhyloExplorer.JSON (PhyloJSON)
+import Gargantext.Components.PhyloExplorer.Types (PhyloSet, parseToPhyloSet)
 import Gargantext.Config.REST (AffRESTError)
 import Gargantext.Routes (SessionRoute(..))
 import Gargantext.Routes as GR
@@ -30,10 +30,10 @@ import Simple.JSON as JSON
 import Simple.JSON.Generics as JSONG
 
 
-get :: S.Session -> NodeID -> AffRESTError (PhyloDataSet)
-get session nodeId = request >>= (_ <#> parsePhyloJSONSet) >>> pure
+get :: S.Session -> NodeID -> AffRESTError (PhyloSet)
+get session nodeId = request >>= (_ <#> parseToPhyloSet) >>> pure
   where
-    request :: AffRESTError (PhyloJSONSet)
+    request :: AffRESTError (PhyloJSON)
     request = S.get session $ PhyloAPI nodeId
 
 ----------------------------------------------------------

src/Gargantext/Components/PhyloExplorer/Frame/DocFocus.purs

+module Gargantext.Components.PhyloExplorer.Frame.DocFocus
+  ( docFocus
+  ) where
+
+import Gargantext.Prelude
+
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (Elevation(..))
+import Gargantext.Components.Nodes.Corpus.Document (node)
+import Gargantext.Components.PhyloExplorer.Types (FrameDoc(..))
+import Gargantext.Sessions (Session, sessionId)
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+
+here :: R2.Here
+here = R2.here "Gargantext.Components.GraphExplorer.Frame.DocFocus"
+
+type Props =
+  ( frameDoc      :: FrameDoc
+  , session       :: Session
+  , closeCallback :: Unit -> Effect Unit
+  )
+
+docFocus :: R2.Leaf Props
+docFocus = R2.leaf docFocusCpt
+
+docFocusCpt :: R.Component Props
+docFocusCpt = here.component "main" cpt where
+  cpt { frameDoc: FrameDoc { docId, listId, corpusId }
+      , session
+      , closeCallback
+      } _ = do
+    -- | Render
+    -- |
+    pure $
+
+      H.div
+      { className: "graph-doc-focus" }
+      [
+        H.div
+        { className: "graph-doc-focus__header" }
+        [
+          B.iconButton
+          { name: "times"
+          , elevation: Level2
+          , callback: closeCallback
+          }
+        ]
+      ,
+        H.div
+        { className: "graph-doc-focus__body" }
+        [
+          -- print the document node
+          node
+          { listId
+          , mCorpusId: Just corpusId
+          , nodeId: docId
+          , key: show (sessionId session) <> "-" <> show docId
+          }
+        ]
+      ]

src/Gargantext/Components/PhyloExplorer/JSON.purs

-module Gargantext.Components.PhyloExplorer.JSON where
+module Gargantext.Components.PhyloExplorer.JSON
+  ( PhyloJSON(..)
+  , GraphData(..)
+  , NodeData(..), RawObject(..)
+  , EdgeData(..), RawEdge(..)
+  ) where
 
 import Gargantext.Prelude
 
@@ -10,6 +15,26 @@ import Gargantext.Utils.SimpleJSON (untaggedSumRep)
 import Simple.JSON as JSON
 
 
+newtype PhyloJSON = PhyloJSON
+  { pd_corpusId       :: Int
+  , pd_listId         :: Int
+  , pd_data           ::
+      { _subgraph_cnt     :: Int
+      , directed          :: Boolean
+      , edges             :: Array RawEdge
+      , objects           :: Array RawObject
+      , strict            :: Boolean
+      | GraphData
+      }
+  }
+
+derive instance Generic PhyloJSON _
+derive instance Eq PhyloJSON
+instance Show PhyloJSON where show = genericShow
+derive newtype instance JSON.ReadForeign PhyloJSON
+
+--------------------------------------------------
+
 type GraphData =
   ( bb                :: String
   , color             :: String
@@ -39,22 +64,6 @@ type GraphData =
 
 --------------------------------------------------
 
-newtype PhyloJSONSet = PhyloJSONSet
-  { _subgraph_cnt     :: Int
-  , directed          :: Boolean
-  , edges             :: Array RawEdge
-  , objects           :: Array RawObject
-  , strict            :: Boolean
-  | GraphData
-  }
-
-derive instance Generic PhyloJSONSet _
-derive instance Eq PhyloJSONSet
-instance Show PhyloJSONSet where show = genericShow
-derive newtype instance JSON.ReadForeign PhyloJSONSet
-
---------------------------------------------------
-
 type NodeData =
   ( height            :: String
   , label             :: String
@@ -125,7 +134,6 @@ instance Show RawObject where show = genericShow
 instance JSON.ReadForeign RawObject where
   readImpl f = GR.to <$> untaggedSumRep f
 
-
 --------------------------------------------------
 
 type EdgeData =

src/Gargantext/Components/PhyloExplorer/Layout.purs

@@ -13,14 +13,16 @@ import Data.String (null)
 import Effect (Effect)
 import FFI.Simple ((..), (.=))
 import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.PhyloExplorer.Frame.DocFocus (docFocus)
 import Gargantext.Components.PhyloExplorer.Resources (PubSubEvent(..))
 import Gargantext.Components.PhyloExplorer.Resources as RS
 import Gargantext.Components.PhyloExplorer.SideBar (sideBar)
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
 import Gargantext.Components.PhyloExplorer.ToolBar (toolBar)
 import Gargantext.Components.PhyloExplorer.TopBar (topBar)
-import Gargantext.Components.PhyloExplorer.Types (DisplayView, ExtractedCount, FrameDoc, PhyloDataSet(..), TabView(..), Term, sortSources)
+import Gargantext.Components.PhyloExplorer.Types (DisplayView, ExtractedCount, FrameDoc, PhyloData(..), TabView(..), Term, sortSources)
 import Gargantext.Hooks.FirstEffect (useFirstEffect')
+import Gargantext.Hooks.Session (useSession)
 import Gargantext.Hooks.UpdateEffect (useUpdateEffect1', useUpdateEffect3')
 import Gargantext.Types (SidePanelState(..))
 import Gargantext.Utils (getter, (?))
@@ -59,11 +61,11 @@ layoutCpt = here.component "layout" cpt where
     , selectedSource
     , extractedCount
     , phyloId
-    , phyloDataSet
+    , phyloData
     , frameDoc
     } <- PhyloStore.use
 
-    (PhyloDataSet o)    <- R2.useLive' phyloDataSet
+    (PhyloData o)       <- R2.useLive' phyloData
     phyloId'            <- R2.useLive' phyloId
     sources'            <- R2.useLive' sources
     terms'              <- R2.useLive' terms
@@ -77,6 +79,8 @@ layoutCpt = here.component "layout" cpt where
     selectedSource'     <- R2.useLive' selectedSource
     frameDoc'           <- R2.useLive' frameDoc
 
+    session <- useSession
+
     -- | Hooks
     -- |
     let topBarPortalKey = "portal-topbar::" <> show phyloId'
@@ -143,6 +147,9 @@ layoutCpt = here.component "layout" cpt where
         mTerm <- RS.autocompleteSearch terms' s
         RS.autocompleteSubmit displayView mTerm
 
+      closeDocCallback :: Unit -> Effect Unit
+      closeDocCallback _ = T.write_ Nothing frameDoc
+
     -- | Effects
     -- |
 
@@ -150,7 +157,7 @@ layoutCpt = here.component "layout" cpt where
     useFirstEffect' do
       (sortSources >>> flip T.write_ sources) o.sources
       RS.setGlobalD3Reference window d3
-      RS.setGlobalDependencies window (PhyloDataSet o)
+      RS.setGlobalDependencies window (PhyloData o)
       RS.drawPhylo
         o.branches
         o.periods
@@ -256,7 +263,7 @@ layoutCpt = here.component "layout" cpt where
         { className: "phylo__frame" }
         [
           -- Doc focus
-          R2.fromMaybe frameDoc' \(f :: FrameDoc) ->
+          R2.fromMaybe frameDoc' \(frameDoc_ :: FrameDoc) ->
 
             H.div
             { className: "phylo__focus" }
@@ -264,7 +271,11 @@ layoutCpt = here.component "layout" cpt where
               H.div
               { className: "phylo__focus__inner" }
               [
-                H.text $ "hello"
+                docFocus
+                { session
+                , frameDoc: frameDoc_
+                , closeCallback: closeDocCallback
+                }
               ]
             ]
         ,

src/Gargantext/Components/PhyloExplorer/Resources.purs

@@ -25,7 +25,7 @@ import Data.String as String
 import Effect (Effect)
 import Effect.Uncurried (EffectFn1, EffectFn2, EffectFn4, EffectFn7, runEffectFn1, runEffectFn2, runEffectFn4, runEffectFn7)
 import FFI.Simple ((..), (.=), (.?))
-import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, DisplayView(..), Group(..), Link, Period, PhyloDataSet(..), Source(..), Term(..))
+import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, DisplayView(..), Group(..), Link, Period, PhyloData(..), Source(..), Term(..))
 import Gargantext.Utils (getter)
 import Gargantext.Utils.Reactix ((~~))
 import Gargantext.Utils.Reactix as R2
@@ -203,8 +203,8 @@ selectionNodes = ffi ["selection", ""] "selection.nodes()"
 
 -----------------------------------------------------------
 
-setGlobalDependencies :: Window -> PhyloDataSet -> Effect Unit
-setGlobalDependencies w (PhyloDataSet o)
+setGlobalDependencies :: Window -> PhyloData -> Effect Unit
+setGlobalDependencies w (PhyloData o)
   = do
     _ <- pure $ (w .= "freq") {}
     _ <- pure $ (w .= "nbBranches") o.nbBranches

src/Gargantext/Components/PhyloExplorer/Sidebar/DetailsTab.purs

@@ -5,7 +5,7 @@ module Gargantext.Components.PhyloExplorer.DetailsTab
 import Gargantext.Prelude
 
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
-import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet(..))
+import Gargantext.Components.PhyloExplorer.Types (PhyloData(..))
 import Gargantext.Utils (nbsp)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -25,7 +25,7 @@ detailsTabCpt = here.component "" cpt where
     -- |
     store <- PhyloStore.use
 
-    (PhyloDataSet o) <- R2.useLive' store.phyloDataSet
+    (PhyloData o) <- R2.useLive' store.phyloData
 
     -- | Render
     -- |

src/Gargantext/Components/PhyloExplorer/Sidebar/SelectionTab.purs

@@ -12,6 +12,7 @@ import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
+import Gargantext.Components.PhyloExplorer.Sidebar.DocList (docListWrapper)
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
 import Gargantext.Components.PhyloExplorer.Types (ExtractedCount(..), ExtractedTerm(..), defaultCacheParams)
 import Gargantext.Hooks.FirstEffect (useFirstEffect')
@@ -322,19 +323,26 @@ component = here.component "main" cpt where
                 ]
             ]
           ]
-      -- ,
+      ,
         -- (separator)
-        -- R2.when (not null extractedTerms) $
-
-        --   H.div
-        --   { className: "phylo-selection-tab__separator" }
-        --   [
-        --     B.icon
-        --     { name: "angle-double-down" }
-        --   ]
-      -- ,
+        R2.when (not null extractedTerms) $
+
+          H.div
+          { className: "phylo-selection-tab__separator" }
+          [
+            B.icon
+            { name: "angle-double-down" }
+          ]
+      ,
         -- Extracted Docs
-        -- R2.when (not null extractedTerms) $
+        R2.when (not null extractedTerms) $
+
+          H.div
+          { className: "phylo-selection-tab__extracted-docs" }
+          [
+            docListWrapper
+            {}
+          ]
       ]
 
 termFontSize :: Number -> String

src/Gargantext/Components/PhyloExplorer/Store.purs

@@ -11,7 +11,7 @@ module Gargantext.Components.PhyloExplorer.Store
 import Gargantext.Prelude
 
 import Data.Maybe (Maybe(..))
-import Gargantext.Components.PhyloExplorer.Types (DisplayView(..), ExtractedCount, ExtractedTerm, FrameDoc, PhyloDataSet, Source, TabView(..), Term, defaultCacheParams)
+import Gargantext.Components.PhyloExplorer.Types (CorpusId, DisplayView(..), ExtractedCount, ExtractedTerm, FrameDoc, PhyloData, Source, TabView(..), Term, ListId, defaultCacheParams)
 import Gargantext.Types (NodeID, SidePanelState(..))
 import Gargantext.Utils (getter)
 import Gargantext.Utils.Reactix as R2
@@ -25,8 +25,10 @@ here = R2.here "Gargantext.Components.GraphExplorer.Store"
 
 type Store =
   -- Data
-  ( phyloDataSet        :: T.Box PhyloDataSet
+  ( phyloData           :: T.Box PhyloData
   , phyloId             :: T.Box NodeID
+  , corpusId            :: T.Box CorpusId
+  , listId              :: T.Box ListId
   , isBuilt             :: T.Box Boolean
   -- Layout
   , toolBarDisplayed    :: T.Box Boolean
@@ -54,8 +56,10 @@ type Store =
 
 type State =
   -- Data
-  ( phyloDataSet        :: PhyloDataSet
+  ( phyloData           :: PhyloData
   , phyloId             :: NodeID
+  , corpusId            :: CorpusId
+  , listId              :: ListId
   , isBuilt             :: Boolean
   -- Layout
   , toolBarDisplayed    :: Boolean

src/Gargantext/Components/PhyloExplorer/Types.purs

 module Gargantext.Components.PhyloExplorer.Types
-  ( PhyloDataSet(..)
-  , parsePhyloJSONSet
+  ( PhyloSet(..), parseToPhyloSet
+  , CorpusId, ListId, DocId
+  , PhyloData(..)
   , Branch(..), Period(..), Group(..)
   , Link(..), AncestorLink(..), BranchLink(..)
   , Term(..)
@@ -28,18 +29,72 @@ import Data.String as String
 import Data.String.Extra (camelCase)
 import Data.Tuple as Tuple
 import Data.Tuple.Nested ((/\))
-import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet(..), RawEdge(..), RawObject(..))
+import Gargantext.Components.PhyloExplorer.JSON (PhyloJSON(..), RawEdge(..), RawObject(..))
 import Gargantext.Types (NodeID)
 import Simple.JSON as JSON
 
-
 -- @NOTE #219: PureScript Date or stick to JavaScript foreign?
 foreign import yearToDate       :: String -> Date.Date
 foreign import stringToDate     :: String -> Date.Date
 foreign import utcStringToDate  :: String -> Date.Date
 
+type CorpusId = Int
+type ListId   = Int
+type DocId    = Int
+
+------------------------------------------------------------------
+
+data PhyloSet = PhyloSet
+  { corpusId  :: CorpusId
+  , listId    :: ListId
+  , phyloData :: PhyloData
+  }
+
+derive instance Generic PhyloSet _
+derive instance Eq PhyloSet
+instance Show PhyloSet where show = genericShow
+
+parseToPhyloSet :: PhyloJSON -> PhyloSet
+parseToPhyloSet (PhyloJSON o) = PhyloSet
+  { corpusId  : o.pd_corpusId
+  , listId    : o.pd_listId
+  , phyloData : PhyloData
+      { ancestorLinks
+      , bb            : parseBB p.bb
+      , branchLinks
+      , branches
+      , groups
+      , links
+      , name          : p.name
+      , nbBranches    : parseInt p.phyloBranches
+      -- @NOTE #219: remotely stringify as a Double instead of an Int (reason?)
+      , nbDocs        : (parseFloat >>> parseInt') p.phyloDocs
+      , nbFoundations : parseInt p.phyloFoundations
+      , nbGroups      : parseInt p.phyloGroups
+      , nbPeriods     : parseInt p.phyloPeriods
+      , nbTerms       : parseInt p.phyloTerms
+      , periods
+      , sources       : parseSources p.phyloSources
+      , timeScale     : p.phyloTimeScale
+      , weighted      : getGlobalWeightedValue groups
+      }
+  }
+
+  where
+    p             = o.pd_data
+
+    epochTS       = p.phyloTimeScale == "epoch"
+
+    ancestorLinks = parseAncestorLinks p.edges
+    branchLinks   = parseBranchLinks p.edges
+    branches      = parseBranches p.objects
+    groups        = parseGroups epochTS p.objects
+    links         = parseLinks p.edges
+    periods       = parsePeriods epochTS p.objects
+
+----------------------------------------------------------------------
 
-data PhyloDataSet = PhyloDataSet
+data PhyloData = PhyloData
   { ancestorLinks :: Array AncestorLink
   , bb            :: Array Number
   , branchLinks   :: Array BranchLink
@@ -59,41 +114,9 @@ data PhyloDataSet = PhyloDataSet
   , weighted      :: Boolean
   }
 
-derive instance Generic PhyloDataSet _
-derive instance Eq PhyloDataSet
-instance Show PhyloDataSet where show = genericShow
-
-parsePhyloJSONSet :: PhyloJSONSet -> PhyloDataSet
-parsePhyloJSONSet (PhyloJSONSet o) = PhyloDataSet
-  { ancestorLinks
-  , bb            : parseBB o.bb
-  , branchLinks
-  , branches
-  , groups
-  , links
-  , name          : o.name
-  , nbBranches    : parseInt o.phyloBranches
-  -- @NOTE #219: remotely stringify as a Double instead of an Int (reason?)
-  , nbDocs        : (parseFloat >>> parseInt') o.phyloDocs
-  , nbFoundations : parseInt o.phyloFoundations
-  , nbGroups      : parseInt o.phyloGroups
-  , nbPeriods     : parseInt o.phyloPeriods
-  , nbTerms       : parseInt o.phyloTerms
-  , periods
-  , sources       : parseSources o.phyloSources
-  , timeScale     : o.phyloTimeScale
-  , weighted      : getGlobalWeightedValue groups
-  }
-
-  where
-    epochTS       = o.phyloTimeScale == "epoch"
-
-    ancestorLinks = parseAncestorLinks o.edges
-    branchLinks   = parseBranchLinks o.edges
-    branches      = parseBranches o.objects
-    groups        = parseGroups epochTS o.objects
-    links         = parseLinks o.edges
-    periods       = parsePeriods epochTS o.objects
+derive instance Generic PhyloData _
+derive instance Eq PhyloData
+instance Show PhyloData where show = genericShow
 
 -----------------------------------------------------------
 
@@ -492,9 +515,9 @@ derive newtype instance JSON.ReadForeign ExtractedCount
 -----------------------------------------------------------
 
 newtype FrameDoc = FrameDoc
-  { docId     :: NodeID
-  , corpusId  :: NodeID
-  , listId    :: NodeID
+  { docId     :: DocId
+  , corpusId  :: CorpusId
+  , listId    :: ListId
   }
 
 derive instance Generic FrameDoc _

src/sass/_legacy/_graph.sass

@@ -252,14 +252,13 @@
       background-color: $gray-50
 
     &--selected::before
+      @include fit-positions
+
       content: ""
       position: absolute
       z-index: 1
       width: 2px
       background-color: $info
-      left: 0
-      top: 0
-      bottom: 0
 
     // (following list group item border radius)
     &--selected:first-child::before

src/sass/_legacy/_phylo.scss

@@ -383,6 +383,19 @@ $decreasing-color: #11638F;
       }
     }
   }
+
+  &__focus {
+    flex-grow: 1;
+    pointer-events: all;
+    position: relative;
+
+    &__inner {
+      @include fit-positions();
+
+      position: absolute;
+      background-color: $body-bg;
+    }
+  }
 }
 
 
@@ -563,7 +576,7 @@ $decreasing-color: #11638F;
   }
 
   &__selection {
-    margin: $margin-y $margin-x 0;
+    margin: $margin-y $margin-x;
 
     &__item {
       white-space: normal;
@@ -611,6 +624,65 @@ $decreasing-color: #11638F;
     color: $gray-500;
     text-align: center;
   }
+
+  &__extracted-docs {
+    margin: $margin-y $margin-x;
+  }
+}
+
+.phylo-doc-list {
+
+  &__item {
+    @include clickable();
+
+    display: flex;
+    align-items: flex-start;
+    transition: $transition-base;
+
+    &:hover {
+      background-color: $gray-50;
+    }
+
+    &--selected::before {
+      @include fit-positions();
+
+      content: "";
+      position: absolute;
+      z-index: 1;
+      width: 2px;
+      background-color: $info;
+    }
+
+    // (following list group item border radius)
+    &--selected:first-child::before {
+      border-top-left-radius: $list-group-border-radius;
+    }
+    &--selected:last-child::before {
+      border-bottom-left-radius: $list-group-border-radius;
+    }
+
+    &__main {
+      flex-grow: 1;
+      padding-right: $card-spacer-x;
+    }
+
+    &__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;
+    }
+  }
 }
 
 ////////////////////////////////////////////////////////////////