>>> continue

dist/styles/bootstrap-darkster.css

@@ -7576,10 +7576,14 @@ input[type=range]:-moz-focusring {
   cursor: pointer;
   display: flex;
   align-items: flex-start;
+  transition: all 0.2s ease-in-out;
 }
 .graph-doc-list__item:focus {
   outline: 0;
 }
+.graph-doc-list__item:hover {
+  background-color: #121212;
+}
 .graph-doc-list__item__main {
   flex-grow: 1;
   padding-right: 1.25rem;

dist/styles/bootstrap-default.css

@@ -7529,10 +7529,14 @@ input[type=range]:-moz-focusring {
   cursor: pointer;
   display: flex;
   align-items: flex-start;
+  transition: all 0.2s ease-in-out;
 }
 .graph-doc-list__item:focus {
   outline: 0;
 }
+.graph-doc-list__item:hover {
+  background-color: #FCFCFC;
+}
 .graph-doc-list__item__main {
   flex-grow: 1;
   padding-right: 1.25rem;

dist/styles/bootstrap-greyson.css

@@ -7285,10 +7285,14 @@ input[type=range]:-moz-focusring {
   cursor: pointer;
   display: flex;
   align-items: flex-start;
+  transition: all 0.2s ease-in-out;
 }
 .graph-doc-list__item:focus {
   outline: 0;
 }
+.graph-doc-list__item:hover {
+  background-color: #FCFCFC;
+}
 .graph-doc-list__item__main {
   flex-grow: 1;
   padding-right: 1.25rem;

dist/styles/bootstrap-herbie.css

@@ -7533,10 +7533,14 @@ input[type=range]:-moz-focusring {
   cursor: pointer;
   display: flex;
   align-items: flex-start;
+  transition: all 0.2s ease-in-out;
 }
 .graph-doc-list__item:focus {
   outline: 0;
 }
+.graph-doc-list__item:hover {
+  background-color: #FCFCFC;
+}
 .graph-doc-list__item__main {
   flex-grow: 1;
   padding-right: 1.25rem;

dist/styles/bootstrap-monotony.css

@@ -7534,10 +7534,14 @@ input[type=range]:-moz-focusring {
   cursor: pointer;
   display: flex;
   align-items: flex-start;
+  transition: all 0.2s ease-in-out;
 }
 .graph-doc-list__item:focus {
   outline: 0;
 }
+.graph-doc-list__item:hover {
+  background-color: #FCFCFC;
+}
 .graph-doc-list__item__main {
   flex-grow: 1;
   padding-right: 1.25rem;

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

 module Gargantext.Components.GraphExplorer.Frame.DocFocus
-where
-{-}
+  ( docFocus
+  ) where
+
 import Gargantext.Prelude
 
+import Data.Maybe (Maybe(..))
+import Gargantext.Components.GraphExplorer.Types (GraphSideDoc(..))
+import Gargantext.Components.Nodes.Corpus.Document (documentMainLayout)
 import Gargantext.Sessions (Session)
-import Gargantext.Types (ListId, NodeID)
-import Gargantext.Utils.Reactix as R
 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 =
-  ( listId    :: ListId
-  , corpusId  :: NodeID
-  , nodeId    :: NodeID
+  ( graphSideDoc  :: GraphSideDoc
   , session       :: Session
   )
 
@@ -24,4 +26,27 @@ docFocus = R2.leaf docFocusCpt
 
 docFocusCpt :: R.Component Props
 docFocusCpt = here.component "main" cpt where
-  cpt props _ = pure $ H.div {} []
+  cpt { graphSideDoc: GraphSideDoc { docId, listId, corpusId }
+      , session
+      } _ = do
+
+
+    -- | Render
+    -- |
+    pure $
+
+      H.div
+      { className: "graph-layout__focus" }
+      [
+        H.div
+        { className: "graph-layout__focus__inner" }
+        [
+          documentMainLayout
+          { listId
+          , mCorpusId: Just corpusId
+          , nodeId: docId
+          , session
+          }
+          []
+        ]
+      ]

src/Gargantext/Components/GraphExplorer/Layout.purs

@@ -14,11 +14,13 @@ import Data.Set as Set
 import Data.Tuple (Tuple(..))
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.GraphExplorer.Frame.DocFocus (docFocus)
 import Gargantext.Components.GraphExplorer.Resources as Graph
 import Gargantext.Components.GraphExplorer.Sidebar as GES
 import Gargantext.Components.GraphExplorer.Store as GraphStore
 import Gargantext.Components.GraphExplorer.Toolbar.Controls as Controls
 import Gargantext.Components.GraphExplorer.TopBar as GETB
+import Gargantext.Components.GraphExplorer.Types (GraphSideDoc)
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Config (defaultFrontends)
 import Gargantext.Data.Louvain as Louvain
@@ -124,17 +126,14 @@ layoutCpt = R.memo' $ here.component "explorerWriteGraph" cpt where
         { className: "graph-layout__frame" }
         [
           -- Doc focus
-          R2.fromMaybe_ showDoc' \listId ->
+          R2.fromMaybe_ showDoc' \(graphSideDoc :: GraphSideDoc) ->
+
+            docFocus
+            { session
+            , graphSideDoc
+            }
+
 
-            H.div
-            { className: "graph-layout__focus" }
-            [
-              H.div
-              { className: "graph-layout__focus__inner" }
-              [
-                H.div {} [ H.text $ show listId ]
-              ]
-            ]
         ,
           -- Sidebar
           H.div

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

@@ -12,14 +12,13 @@ import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (Variant(..))
 import Gargantext.Components.FacetsTable (DocumentsView(..), PagePath, Rows(..), initialPagePath, loadPage, publicationDate)
-import Gargantext.Components.GraphExplorer.Types (GraphSideCorpus(..))
+import Gargantext.Components.GraphExplorer.Types (GraphSideCorpus(..), GraphSideDoc(..), DocId)
 import Gargantext.Components.Search (SearchQuery)
 import Gargantext.Config.REST (RESTError(..))
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Hooks.UpdateEffect (useUpdateEffect1')
 import Gargantext.Sessions (Session)
-import Gargantext.Types (ListId)
 import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -34,7 +33,7 @@ type TabsProps =
   , query           :: SearchQuery
   , session         :: Session
   , graphSideCorpus :: GraphSideCorpus
-  , showDoc         :: T.Box (Maybe ListId)
+  , showDoc         :: T.Box (Maybe GraphSideDoc)
   )
 
 docList :: R2.Leaf TabsProps
@@ -104,15 +103,35 @@ docListCpt = here.component "main" cpt where
     -- |
     let
 
-      callback :: Maybe ListId -> ListId -> Effect Unit
-      callback Nothing    new = T.write_ (Just new) showDoc
-      callback (Just old) new
-        | old == new = T.write_ Nothing showDoc
-        | otherwise  = T.write_ (Just new) showDoc
+      callback :: Maybe GraphSideDoc -> DocId -> Effect Unit
+      callback
+        Nothing
+        new
+          = setGraphSideDoc new # Just # flip T.write_ showDoc
+
+      callback
+        (Just (GraphSideDoc { docId }))
+        new
+        | docId == new = T.write_ Nothing showDoc
+        | otherwise    = setGraphSideDoc new # Just # flip T.write_ showDoc
+
+      setGraphSideDoc :: DocId -> GraphSideDoc
+      setGraphSideDoc docId = GraphSideDoc
+        { docId
+        , listId
+        , corpusId: nodeId
+        }
+
+      isSelected :: Maybe GraphSideDoc -> DocumentsView -> Boolean
+      isSelected
+        (Just (GraphSideDoc { docId }))
+        (DocumentsView { id })
+          = docId == id
 
-      isSelected :: Maybe ListId -> DocumentsView -> Boolean
-      isSelected Nothing        _                      = false
-      isSelected (Just current) (DocumentsView { id }) = current == id
+      isSelected
+        _
+        _
+          = false
 
     -- | Render
     -- |
@@ -158,7 +177,7 @@ type ItemProps =
   , frontends    :: Frontends
   , session      :: Session
   , path         :: PagePath
-  , callback     :: ListId -> Effect Unit
+  , callback     :: DocId -> Effect Unit
   , isSelected   :: Boolean
   )
 

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

@@ -35,7 +35,7 @@ import Gargantext.Data.Array (mapMaybe)
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Sessions (Session)
-import Gargantext.Types (CTabNgramType, FrontendError(..), NodeID, TabSubType(..), TabType(..), TermList(..), ListId, modeTabType)
+import Gargantext.Types (CTabNgramType, FrontendError(..), NodeID, TabSubType(..), TabType(..), TermList(..), modeTabType)
 import Gargantext.Utils (nbsp)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Stores as Stores
@@ -127,7 +127,6 @@ sideTabDataCpt = here.component "sideTabData" cpt where
   cpt props _ = do
     -- States
     { selectedNodeIds
-    , showDoc
     , graph
     } <- Stores.useStore GraphStore.context
 
@@ -178,7 +177,6 @@ sideTabDataCpt = here.component "sideTabData" cpt where
               , searchType: SearchDoc
               , selectedNodeIds: selectedNodeIds'
               , session: props.session
-              , showDoc
               }
             ]
       ]
@@ -193,7 +191,6 @@ sideTabCommunityCpt = here.component "sideTabCommunity" cpt where
   cpt props@{ frontends } _ = do
     -- States
     { selectedNodeIds
-    , showDoc
     , graph
     } <- Stores.useStore GraphStore.context
 
@@ -244,7 +241,6 @@ sideTabCommunityCpt = here.component "sideTabCommunity" cpt where
               , searchType: SearchContact
               , selectedNodeIds: selectedNodeIds'
               , session: props.session
-              , showDoc
               }
             ]
       ]
@@ -625,7 +621,6 @@ type DocListWrapper =
   , searchType      :: SearchType
   , selectedNodeIds :: SigmaxT.NodeIds
   , session         :: Session
-  , showDoc         :: T.Box (Maybe ListId)
   )
 
 docListWrapper :: R2.Leaf DocListWrapper
@@ -639,9 +634,11 @@ docListWrapperCpt = here.component "docListWrapper" cpt where
       , searchType
       , selectedNodeIds
       , session
-      , showDoc
       } _ = do
     -- States
+    { showDoc
+    } <- Stores.useStore GraphStore.context
+
     query /\ queryBox <- R2.useBox' Nothing
 
     -- Helpers

src/Gargantext/Components/GraphExplorer/Store.purs

@@ -33,7 +33,7 @@ type Store =
   , showControls       :: T.Box Boolean
   , sideTab            :: T.Box GET.SideTab
   , showSidebar        :: T.Box GT.SidePanelState
-  , showDoc            :: T.Box (Maybe GT.ListId)
+  , showDoc            :: T.Box (Maybe GET.GraphSideDoc)
   -- Controls
   , multiSelectEnabled :: T.Box Boolean
   , edgeConfluence     :: T.Box Range.NumberRange
@@ -61,7 +61,7 @@ type State =
   , showControls       :: Boolean
   , sideTab            :: GET.SideTab
   , showSidebar        :: GT.SidePanelState
-  , showDoc            :: Maybe GT.ListId
+  , showDoc            :: Maybe GET.GraphSideDoc
   -- Controls
   , multiSelectEnabled :: Boolean
   , edgeConfluence     :: Range.NumberRange
@@ -86,7 +86,7 @@ options ::
   , removedNodeIds      :: SigmaxT.NodeIds
   , selectedNodeIds     :: SigmaxT.NodeIds
   , showControls        :: Boolean
-  , showDoc             :: Maybe GT.ListId
+  , showDoc             :: Maybe GET.GraphSideDoc
   , showSidebar         :: GT.SidePanelState
   , sideTab             :: GET.SideTab
   , edgeConfluence      :: Range.NumberRange

src/Gargantext/Components/GraphExplorer/Toolbar/Controls.purs

@@ -162,27 +162,6 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
           H.div
           { className: "d-flex" }
           [
-            -- View Settings
-            B.fieldset
-            { className: "graph-toolbar__section"
-            , titleSlot: H.text "View settings"
-            }
-            [
-              -- change type button (?)
-              centerButton sigmaRef
-            ,
-              gap
-            ,
-              edgesToggleButton
-              { state: showEdges
-              , stateAtlas: forceAtlasState
-              }
-            ,
-              gap
-            ,
-              louvainToggleButton { state: showLouvain }
-            ]
-          ,
             -- Actions
             B.fieldset
             { className: "graph-toolbar__section"
@@ -202,6 +181,26 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
               , reloadForest
               }
             ]
+          ,
+            -- View Settings
+            B.fieldset
+            { className: "graph-toolbar__section"
+            , titleSlot: H.text "View settings"
+            }
+            [
+              centerButton sigmaRef
+            ,
+              gap
+            ,
+              edgesToggleButton
+              { state: showEdges
+              , stateAtlas: forceAtlasState
+              }
+            ,
+              gap
+            ,
+              louvainToggleButton { state: showLouvain }
+            ]
           ]
         ,
           -- Selection Settings

src/Gargantext/Components/GraphExplorer/Types.purs

@@ -98,6 +98,7 @@ type ListId      = Int
 type Version     = Int
 type CorpusId    = Int
 type CorpusLabel = String
+type DocId       = Int
 
 newtype GraphSideCorpus = GraphSideCorpus
   { corpusId    :: CorpusId
@@ -107,6 +108,14 @@ newtype GraphSideCorpus = GraphSideCorpus
 derive instance Generic GraphSideCorpus _
 instance Eq GraphSideCorpus where eq = genericEq
 
+newtype GraphSideDoc = GraphSideDoc
+  { docId     :: DocId
+  , corpusId  :: CorpusId
+  , listId    :: ListId
+  }
+derive instance Generic GraphSideDoc _
+instance Eq GraphSideDoc where eq = genericEq
+
 newtype GraphData = GraphData
   { nodes :: Array Node
   , edges :: Array Edge

src/sass/_legacy/_graph.sass

@@ -217,10 +217,13 @@ $layout-height: calc(100vh - #{ $topbar-height} )
 
   &__item
     @include clickable
-    // @include ripple-effect($body-bg, $gray-100)
 
     display: flex
     align-items: flex-start
+    transition: $transition-base
+
+    &:hover
+      background-color: $gray-50
 
     &__main
       flex-grow: 1