[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