[docs] UI enhancement on phylo doc focus

* #407

dist/styles/bootstrap-darkster.css

@@ -9383,6 +9383,50 @@ select.form-control {
   display: none;
 }
 
+.phylo-doc-focus {
+  scrollbar-width: none;
+  overflow-y: scroll;
+  background-color: #000000;
+  height: 100%;
+  position: relative;
+  z-index: 0;
+}
+.phylo-doc-focus::-webkit-scrollbar {
+  display: none;
+}
+.phylo-doc-focus::before {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 45%);
+  content: "";
+  z-index: 2;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.phylo-doc-focus::after {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 45%);
+  content: "";
+  pointer-events: none;
+  position: sticky;
+  bottom: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.right-handed .phylo-doc-focus__header {
+  margin-left: 32px;
+}
+
+.left-handed .phylo-doc-focus__header {
+  margin-right: 32px;
+}
+
+.phylo-doc-focus .document-layout__header {
+  padding-top: initial;
+}
+
 .phylo-sidebar {
   scrollbar-width: none;
   overflow-y: scroll;

dist/styles/bootstrap-default.css

@@ -9336,6 +9336,50 @@ select.form-control {
   display: none;
 }
 
+.phylo-doc-focus {
+  scrollbar-width: none;
+  overflow-y: scroll;
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+  z-index: 0;
+}
+.phylo-doc-focus::-webkit-scrollbar {
+  display: none;
+}
+.phylo-doc-focus::before {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
+  content: "";
+  z-index: 2;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.phylo-doc-focus::after {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
+  content: "";
+  pointer-events: none;
+  position: sticky;
+  bottom: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.right-handed .phylo-doc-focus__header {
+  margin-left: 32px;
+}
+
+.left-handed .phylo-doc-focus__header {
+  margin-right: 32px;
+}
+
+.phylo-doc-focus .document-layout__header {
+  padding-top: initial;
+}
+
 .phylo-sidebar {
   scrollbar-width: none;
   overflow-y: scroll;

dist/styles/bootstrap-greyson.css

@@ -9092,6 +9092,50 @@ select.form-control {
   display: none;
 }
 
+.phylo-doc-focus {
+  scrollbar-width: none;
+  overflow-y: scroll;
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+  z-index: 0;
+}
+.phylo-doc-focus::-webkit-scrollbar {
+  display: none;
+}
+.phylo-doc-focus::before {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
+  content: "";
+  z-index: 2;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.phylo-doc-focus::after {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
+  content: "";
+  pointer-events: none;
+  position: sticky;
+  bottom: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.right-handed .phylo-doc-focus__header {
+  margin-left: 32px;
+}
+
+.left-handed .phylo-doc-focus__header {
+  margin-right: 32px;
+}
+
+.phylo-doc-focus .document-layout__header {
+  padding-top: initial;
+}
+
 .phylo-sidebar {
   scrollbar-width: none;
   overflow-y: scroll;

dist/styles/bootstrap-herbie.css

@@ -9340,6 +9340,50 @@ select.form-control {
   display: none;
 }
 
+.phylo-doc-focus {
+  scrollbar-width: none;
+  overflow-y: scroll;
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+  z-index: 0;
+}
+.phylo-doc-focus::-webkit-scrollbar {
+  display: none;
+}
+.phylo-doc-focus::before {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
+  content: "";
+  z-index: 2;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.phylo-doc-focus::after {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
+  content: "";
+  pointer-events: none;
+  position: sticky;
+  bottom: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.right-handed .phylo-doc-focus__header {
+  margin-left: 32px;
+}
+
+.left-handed .phylo-doc-focus__header {
+  margin-right: 32px;
+}
+
+.phylo-doc-focus .document-layout__header {
+  padding-top: initial;
+}
+
 .phylo-sidebar {
   scrollbar-width: none;
   overflow-y: scroll;

dist/styles/bootstrap-monotony.css

@@ -9341,6 +9341,50 @@ select.form-control {
   display: none;
 }
 
+.phylo-doc-focus {
+  scrollbar-width: none;
+  overflow-y: scroll;
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+  z-index: 0;
+}
+.phylo-doc-focus::-webkit-scrollbar {
+  display: none;
+}
+.phylo-doc-focus::before {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
+  content: "";
+  z-index: 2;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.phylo-doc-focus::after {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
+  content: "";
+  pointer-events: none;
+  position: sticky;
+  bottom: 0;
+  height: 16px;
+  width: 100%;
+  display: block;
+}
+.right-handed .phylo-doc-focus__header {
+  margin-left: 32px;
+}
+
+.left-handed .phylo-doc-focus__header {
+  margin-right: 32px;
+}
+
+.phylo-doc-focus .document-layout__header {
+  padding-top: initial;
+}
+
 .phylo-sidebar {
   scrollbar-width: none;
   overflow-y: scroll;

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

@@ -4,62 +4,101 @@ module Gargantext.Components.PhyloExplorer.Frame.DocFocus
 
 import Gargantext.Prelude
 
-import Data.Maybe (Maybe(..))
+import Data.Maybe (Maybe(..), isJust)
+import Data.Tuple.Nested ((/\))
 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.Document.API (loadData)
+import Gargantext.Components.Document.Layout (layout)
+import Gargantext.Components.Document.Types (LoadedData, DocPath)
 import Gargantext.Components.PhyloExplorer.Types (FrameDoc(..))
-import Gargantext.Sessions (Session, sessionId)
+import Gargantext.Config.REST (logRESTError)
+import Gargantext.Hooks.Loader (useLoaderEffect)
+import Gargantext.Sessions (Session)
+import Gargantext.Types (CTabNgramType(..), TabSubType(..), TabType(..))
 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"
+here = R2.here "Gargantext.Components.PhyloExplorer.Frame.DocFocus"
 
 type Props =
-  ( frameDoc      :: FrameDoc
+  ( frameDoc  :: FrameDoc
   , session       :: Session
   , closeCallback :: Unit -> Effect Unit
   )
 
-docFocus :: R2.Leaf Props
+docFocus :: R2.Leaf ( key :: String | Props )
 docFocus = R2.leaf docFocusCpt
 
-docFocusCpt :: R.Component Props
+docFocusCpt :: R.Component ( key :: String | Props )
 docFocusCpt = here.component "main" cpt where
   cpt { frameDoc: FrameDoc { docId, listId, corpusId }
       , session
       , closeCallback
       } _ = do
+    -- | States
+    -- |
+    state' /\ state <- R2.useBox' (Nothing :: Maybe LoadedData)
+
+    -- | Computed
+    -- |
+    let
+
+      tabType :: TabType
+      tabType = TabDocument (TabNgramType CTabTerms)
+
+      path :: DocPath
+      path =
+        { listIds: [listId]
+        , mCorpusId: Just corpusId
+        , nodeId: docId
+        , session
+        , tabType
+        }
+
+    -- | Hooks
+    -- |
+    useLoaderEffect
+      { errorHandler: logRESTError here "[docFocus]"
+      , loader: loadData
+      , path
+      , state
+      }
+
     -- | Render
     -- |
     pure $
 
+
       H.div
-      { className: "graph-doc-focus" }
+      { className: "phylo-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
-          }
-        ]
+        B.cloak
+        { isDisplayed: isJust state'
+        , idlingPhaseDuration: Just 150
+        , cloakSlot:
+            B.preloader
+            {}
+
+        , defaultSlot:
+            R2.fromMaybe state' \loaded ->
+              layout
+              { loaded
+              , path
+              , sideControlsSlot: Just $
+                  H.div
+                  { className: "phylo-doc-focus__header" }
+                  [
+                    B.iconButton
+                    { name: "times"
+                    , elevation: Level2
+                    , callback: closeCallback
+                    }
+                  ]
+              }
+        }
       ]

src/Gargantext/Components/PhyloExplorer/Layout.purs

@@ -275,6 +275,7 @@ layoutCpt = here.component "layout" cpt where
                 { session
                 , frameDoc: frameDoc_
                 , closeCallback: closeDocCallback
+                , key: show $ getter _.docId frameDoc_
                 }
               ]
             ]

src/Gargantext/Components/PhyloExplorer/Types.purs

@@ -30,7 +30,6 @@ import Data.String.Extra (camelCase)
 import Data.Tuple as Tuple
 import Data.Tuple.Nested ((/\))
 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?
@@ -520,6 +519,7 @@ newtype FrameDoc = FrameDoc
   , listId    :: ListId
   }
 
+derive instance Newtype FrameDoc _
 derive instance Generic FrameDoc _
 derive instance Eq FrameDoc
 

src/sass/_legacy/_phylo.scss

@@ -524,6 +524,27 @@ $decreasing-color: #11638F;
   }
 }
 
+/////////////////////////////////////////////
+
+.phylo-doc-focus {
+  @include term-window();
+
+  &__header {
+    // avoid overlap with document side controls
+    @include right-handed() {
+      margin-left: space-x(4);
+    }
+    @include left-handed () {
+      margin-right: space-x(4);
+    }
+  }
+  // remove document header top spacing due to the already presence of
+  // the inner column top teaser
+  .document-layout__header {
+    padding-top: initial;
+  }
+}
+
 ////////////////////////////////////////////////////////////////
 
 .phylo-sidebar {