Merge branch 'dev' into 395-dev-ps-0.15-update

dist/styles/bootstrap-darkster.css

@@ -6220,6 +6220,10 @@ h3 {
   background-image: radial-gradient(circle, #000000 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-default.css

@@ -6173,6 +6173,10 @@ h3 {
   background-image: radial-gradient(circle, #343a40 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-greyson.css

@@ -5929,6 +5929,10 @@ h3 {
   background-image: radial-gradient(circle, #1e2b37 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-herbie.css

@@ -6177,6 +6177,10 @@ h3 {
   background-image: radial-gradient(circle, #072247 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-monotony.css

@@ -6178,6 +6178,10 @@ h3 {
   background-image: radial-gradient(circle, #111111 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

package.json

 {
     "name": "Gargantext",
-    "version": "0.0.5.8.8.2",
+    "version": "0.0.5.8.9",
     "scripts": {
         "generate-purs-packages-nix": "./nix/generate-purs-packages.nix",
         "generate-psc-packages-nix": "./nix/generate-packages-json.bash",

src/Gargantext/Components/Category.purs

@@ -7,7 +7,8 @@ import Data.Array as A
 import Data.Generic.Rep (class Generic)
 import Data.Map as Map
 import Data.Maybe (Maybe(..))
-import Effect.Aff (launchAff)
+import Effect.Aff (launchAff_)
+import Effect.Class (liftEffect)
 import Gargantext.Components.Category.Types (Category(..), Star(..), cat2score, categories, clickAgain, star2score, stars)
 import Gargantext.Components.DocsTable.Types (DocumentsView(..), LocalCategories, LocalUserScore)
 import Gargantext.Config.REST (AffRESTError)
@@ -15,6 +16,7 @@ import Gargantext.Routes (SessionRoute(NodeAPI))
 import Gargantext.Sessions (Session, put)
 import Gargantext.Types (NodeID, NodeType(..))
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Simple.JSON as JSON
@@ -23,19 +25,24 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.Category"
 
 type RatingProps =
-  ( score              :: Star
+  ( chartReload        :: T2.ReloadS
   , nodeId             :: NodeID
   , row                :: DocumentsView
+  , score              :: Star
   , session            :: Session
   , setLocalCategories :: R.Setter LocalUserScore
   )
 
 rating :: R2.Component RatingProps
 rating = R.createElement ratingCpt
-
 ratingCpt :: R.Component RatingProps
 ratingCpt = here.component "rating" cpt where
-  cpt { nodeId, row: DocumentsView r, score, session, setLocalCategories } _ =
+  cpt { chartReload
+      , nodeId
+      , row: DocumentsView r
+      , score
+      , session
+      , setLocalCategories } _ =
     pure $ H.div { className:"flex" } divs where
       divs = map (\s -> H.div { className : icon' score s
                               , on: { click: onClick s } } []) stars
@@ -48,9 +55,9 @@ ratingCpt = here.component "rating" cpt where
                   else c
 
         setLocalCategories $ Map.insert r._id c'
-        void $ launchAff
-             $ putRating session nodeId
-             $ RatingQuery { nodeIds: [r._id], rating: c' }
+        launchAff_ $ do
+          _ <- putRating session nodeId $ RatingQuery { nodeIds: [r._id], rating: c' }
+          liftEffect $ T2.reload chartReload
 
 newtype RatingQuery =
   RatingQuery { nodeIds :: Array Int
@@ -98,9 +105,8 @@ carousselCpt = here.component "caroussel" cpt
 
         onClick c = \_-> do
           setLocalCategories $ Map.insert r._id c
-          void $ launchAff
-               $ putCategories session nodeId
-               $ CategoryQuery {nodeIds: [r._id], category: c}
+          launchAff_ $ do
+            putCategories session nodeId $ CategoryQuery {nodeIds: [r._id], category: c}
 
 icon :: Category -> Boolean -> String
 icon cat b = btn b $ "fa fa-" <> (color $ size b $ icon' cat b)

src/Gargantext/Components/DocsTable.purs

@@ -74,6 +74,7 @@ type Path a =
 type CommonProps =
   ( boxes          :: Boxes
   , cacheState     :: T.Box NT.CacheState
+  , chartReload :: T2.ReloadS
   , frontends      :: Frontends
   , listId         :: Int
   , mCorpusId      :: Maybe Int
@@ -126,6 +127,7 @@ docViewCpt = here.component "docView" cpt where
   cpt { layout: { boxes
                 , cacheState
                 , chart
+                , chartReload
                 , frontends
                 , listId
                 , mCorpusId
@@ -205,6 +207,7 @@ docViewCpt = here.component "docView" cpt where
           , H.div {className: "col-md-12"}
             [ pageLayout { boxes
                          , cacheState
+                         , chartReload
                          , frontends
                          , key: "docView-" <> (show cacheState')
                          , listId
@@ -434,6 +437,7 @@ pageLayoutCpt = here.component "pageLayout" cpt where
           , mkRequest
           , path
           , renderer: paint
+          , spinnerClass: Nothing
           }
       NT.CacheOff -> do
         localCategories <- T.useBox (Map.empty :: LocalUserScore)
@@ -515,9 +519,10 @@ type PagePaintRawProps =
 pagePaintRaw :: R2.Component PagePaintRawProps
 pagePaintRaw = R.createElement pagePaintRawCpt
 pagePaintRawCpt :: R.Component PagePaintRawProps
-pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
+pagePaintRawCpt = here.component "pagePaintRaw" cpt where
   cpt { documents
       , layout: { boxes
+                , chartReload
                 , frontends
                 , listId
                 , mCorpusId
@@ -539,7 +544,7 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
       { colNames
       , container: TT.defaultContainer
       , params
-      , rows: rows reload localCategories' mCurrentDocId'
+      , rows: rows reload chartReload localCategories' mCurrentDocId'
       , syncResetButton : [ H.div {} [] ]
       , totalRecords
       , wrapColElts
@@ -554,9 +559,9 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
           | otherwise = Routes.Document sid listId
         colNames = TT.ColumnName <$> [ "Show", "Tag", "Date", "Title", "Source", "Score" ]
         wrapColElts = const identity
-        rows reload localCategories' mCurrentDocId' = row reload <$> A.toUnfoldable documents
+        rows reload chartReload localCategories' mCurrentDocId' = row <$> A.toUnfoldable documents
           where
-            row reload dv@(DocumentsView r@{ _id, category }) =
+            row dv@(DocumentsView r@{ _id, category }) =
               { row:
                 TT.makeRow [ -- H.div {} [ H.a { className, style, on: {click: click Favorite} } [] ]
                             H.div { className: "" }
@@ -568,7 +573,8 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
                                   ]
                           --, H.div { className: "column-tag flex" } [ caroussel { category: cat, nodeId, row: dv, session, setLocalCategories } [] ]
                           , H.div { className: "column-tag flex" }
-                                  [ rating { nodeId
+                                  [ rating { chartReload
+                                           , nodeId
                                            , row: dv
                                            , score: cat
                                            , setLocalCategories: \lc -> T.modify_ lc localCategories

src/Gargantext/Components/Forest/Tree/Node/Settings.purs

@@ -116,6 +116,7 @@ settingsBox FolderPrivate =
                                 , Annuaire
                                 , NodeFrameWrite
                                 , NodeFrameCalc
+                                , NodeFrameNotebook
                                 ]
                           , Delete
                           ]
@@ -167,6 +168,7 @@ settingsBox Folder =
                                 , Annuaire
                                 , NodeFrameWrite
                                 , NodeFrameCalc
+                                , NodeFrameNotebook
                                 ]
                           , Move moveParameters
                           , Delete
@@ -188,6 +190,7 @@ settingsBox Corpus =
                                 , NodeFrameWrite
                                 , NodeFrameCalc
                                 , Phylo
+                                , NodeFrameNotebook
                                 ]
                           , Link (linkParams Annuaire)
                           , Move moveParameters

src/Gargantext/Components/GraphQL.purs

@@ -71,6 +71,7 @@ queryGql session name q = do
 -- Schema
 type Schema
   = { imt_schools :: {} ==> Array GQLIMT.School
+    , nodes :: { node_id :: Int } ==> Array Node
     , node_parent :: { node_id :: Int, parent_type :: String } ==> Array Node  -- TODO: parent_type :: NodeType
     , user_infos :: { user_id :: Int } ==> Array UserInfo
     , users :: { user_id :: Int } ==> Array User

src/Gargantext/Components/GraphQL/Endpoints.purs

@@ -2,7 +2,7 @@ module Gargantext.Components.GraphQL.Endpoints where
 
 import Gargantext.Prelude
 
-import Gargantext.Components.GraphQL.Node (Node, nodeParentQuery)
+import Gargantext.Components.GraphQL.Node (Node, nodeParentQuery, nodesQuery)
 import Gargantext.Components.GraphQL.Tree (TreeFirstLevel, treeFirstLevelQuery)
 import Gargantext.Components.GraphQL.User (UserInfo, userInfoQuery)
 
@@ -30,6 +30,15 @@ getIMTSchools session = do
   liftEffect $ here.log2 "[getIMTSchools] imt_schools" imt_schools
   pure $ Right imt_schools
 
+getNode :: Session -> Int -> AffRESTError Node
+getNode session nodeId = do
+  { nodes } <- queryGql session "get nodes" $
+              nodesQuery `withVars` { id: nodeId }
+  liftEffect $ here.log2 "[getNode] node" nodes
+  pure $ case A.head nodes of
+    Nothing -> Left (CustomError $ "node with id" <> show nodeId <>" not found")
+    Just node -> Right node
+
 getNodeParent :: Session -> Int -> NodeType -> Aff (Array Node)
 getNodeParent session nodeId parentType = do
   { node_parent } <- queryGql session "get node parent" $

src/Gargantext/Components/GraphQL/Tree.purs

@@ -11,6 +11,7 @@ type TreeNode =
   { name      :: String
   , id        :: Int
   , node_type :: NodeType
+  , parent_id :: Maybe Int
   }
 type TreeFirstLevel =
   { root     :: TreeNode
@@ -22,14 +23,17 @@ treeFirstLevelQuery = { tree: { root_id: Var :: _ "id" Int} =>>
   { root: { name: unit
           , node_type: unit
           , id: unit
+          , parent_id: unit
           }
   , children: { name: unit
               , node_type: unit
               , id: unit
+              , parent_id: unit
               }
   , parent: { name: unit
             , node_type: unit
             , id: unit
+            , parent_id: unit
             }
   }
  }

src/Gargantext/Components/LoadingSpinner.purs

 module Gargantext.Components.LoadingSpinner where
 
+import Data.Maybe (Maybe(..), fromMaybe)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
@@ -10,7 +11,9 @@ import Gargantext.Utils.Reactix as R2
 here :: R2.Here
 here = R2.here "Gargantext.Components.LoadingSpinner"
 
-type Props = ()
+type Props =
+  ( additionalClass :: Maybe String  -- addtional classes for styling the spinner
+  )
 
 loadingSpinner :: Record Props -> R.Element
 loadingSpinner props = R.createElement loadingSpinnerCpt props []
@@ -22,5 +25,7 @@ loadingSpinnerCpt = here.component "LoadingSpinner" cpt
     -- cpt _ _ = H.i {className: "fa fa-globe fa-spin fa-3x fa-fw"} [H.text ""]
 
     -- cpt _ _ = H.i {className: "fa fa-circle-o-notch fa-spin fa-3x fa-fw"} [H.text ""]
-    cpt _ _ = do
-      pure $ H.i {className: "fa fa-spinner fa-pulse fa-3x fa-fw"} [H.text ""]
+    cpt { additionalClass } _ = do
+      pure $ H.i { className: "fa fa-spinner fa-pulse fa-3x fa-fw " <> c } [H.text ""]
+      where
+        c = fromMaybe "" additionalClass

src/Gargantext/Components/NgramsTable.purs

@@ -605,6 +605,7 @@ mainNgramsTableCacheOnCpt = here.component "mainNgramsTableCacheOn" cpt where
       , mkRequest
       , path: path'
       , renderer: render
+      , spinnerClass: Nothing
       }
   versionEndpoint { defaultListId, path: { nodeId, tabType, session } } _ = get session $ R.GetNgramsTableVersion { listId: defaultListId, tabType } (Just nodeId)
   errorHandler = logRESTError here "[mainNgramsTable]"

src/Gargantext/Components/NgramsTable/Loader.purs

@@ -32,13 +32,20 @@ type LoaderWithCacheAPIProps path res ret = (
   , mkRequest      :: path -> GUC.Request
   , path           :: path
   , renderer       :: ret -> R.Element
+  , spinnerClass   :: Maybe String
   )
 
 
 useLoaderWithCacheAPI :: forall path res ret. Eq path => JSON.ReadForeign res => Eq ret =>
                          Record (LoaderWithCacheAPIProps path res ret)
                       -> R.Hooks R.Element
-useLoaderWithCacheAPI { cacheEndpoint, errorHandler, handleResponse, mkRequest, path, renderer } = do
+useLoaderWithCacheAPI { cacheEndpoint
+                      , errorHandler
+                      , handleResponse
+                      , mkRequest
+                      , path
+                      , renderer
+                      , spinnerClass } = do
   state <- T.useBox Nothing
   state' <- T.useLive T.unequal state
 
@@ -48,7 +55,7 @@ useLoaderWithCacheAPI { cacheEndpoint, errorHandler, handleResponse, mkRequest,
                            , mkRequest
                            , path
                            , state }
-  pure $ maybe (loadingSpinner {}) renderer state'
+  pure $ maybe (loadingSpinner { additionalClass: spinnerClass }) renderer state'
 
 type LoaderWithCacheAPIEffectProps path res ret = (
     cacheEndpoint  :: path -> AffRESTError Version

src/Gargantext/Components/Nodes/Annuaire/Tabs.purs

@@ -11,10 +11,8 @@ import Effect.Aff (Aff)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.DocsTable.Types (Year)
-import Gargantext.Components.GraphQL.User (UserInfo)
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.NgramsTable.Core as NTC
-import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (ContactData)
 import Gargantext.Components.Nodes.Lists.Types as LTypes
 import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Components.Tab as Tab
@@ -22,6 +20,7 @@ import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), TabSubType(..), TabType(..))
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Record as Record
 import Record.Extra as RX
@@ -67,9 +66,10 @@ tabsCpt = here.component "tabs" cpt where
   cpt props _ = do
     activeTab <- T.useBox 0
     yearFilter <- T.useBox (Nothing :: Maybe Year)
+    chartReload <- T.useBox T2.newReload
 
-    pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter props }
-  tabs' yearFilter props@{ boxes, defaultListId, sidePanel } =
+    pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter chartReload props }
+  tabs' yearFilter chartReload props@{ boxes, defaultListId, sidePanel } =
     [ "Documents"     /\ docs
     , "Patents"       /\ ngramsView (viewProps Patents)
     , "Books"         /\ ngramsView (viewProps Books)
@@ -78,7 +78,7 @@ tabsCpt = here.component "tabs" cpt where
     ] where
       viewProps mode = Record.merge props { mode }
       totalRecords = 4736  -- TODO lol
-      docs = DT.docViewLayout (Record.merge { boxes, sidePanel } $ Record.merge dtCommon dtExtra)
+      docs = DT.docViewLayout (Record.merge { boxes, chartReload, sidePanel } $ Record.merge dtCommon dtExtra)
       dtCommon = RX.pick props :: Record DTCommon
       dtExtra =
         { chart: mempty

src/Gargantext/Components/Nodes/Annuaire/User/Contacts/Tabs.purs

@@ -12,7 +12,6 @@ import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.DocsTable.Types (Year)
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.NgramsTable.Core as NTC
-import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (ContactData')
 import Gargantext.Components.Nodes.Lists.Types as LTypes
 import Gargantext.Components.Nodes.Texts.Types as TTypes
 import Gargantext.Components.Tab as Tab
@@ -20,6 +19,7 @@ import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), TabSubType(..), TabType(..))
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Toestand as T
 
@@ -72,10 +72,11 @@ tabsCpt = here.component "tabs" cpt
         } _ = do
       activeTab <- T.useBox 0
       yearFilter <- T.useBox (Nothing :: Maybe Year)
+      chartReload <- T.useBox T2.newReload
 
-      pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter }
+      pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter chartReload }
       where
-        tabs' yearFilter =
+        tabs' yearFilter chartReload =
           [ "Documents"     /\ docs
           , "Patents"       /\ ngramsView patentsView []
           , "Books"         /\ ngramsView booksView []
@@ -110,6 +111,7 @@ tabsCpt = here.component "tabs" cpt
               { boxes
               , cacheState
               , chart
+              , chartReload
               , frontends
               , listId: defaultListId
               , mCorpusId: Nothing

src/Gargantext/Components/Nodes/Corpus.purs

@@ -68,10 +68,11 @@ corpusLayoutMainCpt = here.component "corpusLayoutMain" cpt
         pure $ GR.CorpusCode (sessionId session) nodeId
       -- Render
       pure $
-
         H.div {}
         [
-          tileMenu
+          R2.row [
+            FV.backButtonSmart { nodeId, session } []
+          , tileMenu
             { boxes
             , currentTile: Just corpusCodeRoute
             , xTile: Just corpusCodeRoute
@@ -84,6 +85,7 @@ corpusLayoutMainCpt = here.component "corpusLayoutMain" cpt
                 H.i { className: "fa fa-code" } []
               ]
             ]
+          ]
         ,
           H.hr {}
         ,

src/Gargantext/Components/Nodes/Corpus/Chart/Common.purs

@@ -3,6 +3,7 @@ module Gargantext.Components.Nodes.Corpus.Chart.Common where
 import Gargantext.Prelude
 
 import Data.Array as A
+import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
 import Gargantext.Components.Nodes.Corpus.Chart.Types (MetricsProps, ReloadPath)
 import Gargantext.Config.REST (AffRESTError)
@@ -86,4 +87,5 @@ metricsWithCacheLoadViewCpt = here.component "metricsWithCacheLoadView" cpt
                             , handleResponse
                             , mkRequest
                             , path: (reload' /\ path)
-                            , renderer: loaded { boxes, path, reload, session, onClick, onInit } }
+                            , renderer: loaded { boxes, path, reload, session, onClick, onInit }
+                            , spinnerClass: Just "echarts-for-react-spinner" }

src/Gargantext/Components/Nodes/Lists.purs

@@ -49,12 +49,11 @@ listsLayoutWithKey :: R2.Component ( key :: String | Props )
 listsLayoutWithKey = R.createElement listsLayoutWithKeyCpt
 listsLayoutWithKeyCpt :: R.Component ( key :: String | Props )
 listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where
-  cpt { boxes: boxes@{ reloadMainPage }
+  cpt { boxes
       , nodeId
       , session
       , sessionUpdate } _ = do
     activeTab <- T.useBox 0
-    _reloadMainPage' <- T.useLive T.unequal reloadMainPage
 
     let path = { nodeId, session }
 

src/Gargantext/Components/Nodes/Lists/Tabs.purs

@@ -8,6 +8,7 @@ import Data.Tuple.Nested ((/\))
 import Effect.Class (liftEffect)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.NgramsTable as NT
+import Gargantext.Components.NgramsTable.Core (PageParams)
 import Gargantext.Components.NgramsTable.Core as NTC
 import Gargantext.Components.Nodes.Corpus.Chart.Metrics (metrics)
 import Gargantext.Components.Nodes.Corpus.Chart.Pie (pie, bar)
@@ -51,9 +52,31 @@ tabsCpt = here.component "tabs" cpt where
               , "Sources"    /\ view Sources []
               ]
       common = RX.pick props :: Record Props
-      view mode = ngramsView $ Record.merge common { mode }
+      view mode = tab $ Record.merge common { mode }
 
-type NgramsViewProps = ( mode :: Mode | Props )
+type TabProps = ( mode :: Mode | Props )
+
+tab :: R2.Component TabProps
+tab = R.createElement tabCpt
+
+tabCpt :: R.Component TabProps
+tabCpt = here.component "tab" cpt where
+  cpt props _ = do
+    path <- T.useBox $ NTC.initialPageParams props.session initialPath.corpusId [initialPath.listId] initialPath.tabType
+    pure $ ngramsView (Record.merge props { path }) []
+    where
+      tabNgramType = modeTabType props.mode
+      tabType      = TabCorpus (TabNgramType tabNgramType)
+      listId       = props.corpusData.defaultListId
+      corpusId     = props.corpusId
+      initialPath  = { corpusId
+                      -- , limit: Just 1000
+                      , listId
+                      , tabType
+                      }
+      
+
+type NgramsViewProps = ( path :: T.Box PageParams | TabProps )
 
 ngramsView :: R2.Component NgramsViewProps
 ngramsView = R.createElement ngramsViewCpt
@@ -62,12 +85,11 @@ ngramsViewCpt = here.component "ngramsView" cpt where
   cpt props@{ boxes
             , cacheState
             , corpusData: { defaultListId }
-            , corpusId
             , mode
-            , session } _ = do
+            , session
+            , path } _ = do
       chartsReload <- T.useBox T2.newReload
 
-      path <- T.useBox $ NTC.initialPageParams props.session initialPath.corpusId [initialPath.listId] initialPath.tabType
       { listIds, nodeId, params } <- T.useLive T.unequal path
 
       pure $
@@ -109,12 +131,6 @@ ngramsViewCpt = here.component "ngramsView" cpt where
         tabNgramType = modeTabType mode
         tabType      = TabCorpus (TabNgramType tabNgramType)
         mNgramsType  = mNgramsTypeFromTabType tabType
-        listId       = defaultListId
-        initialPath  = { corpusId
-                       -- , limit: Just 1000
-                       , listId
-                       , tabType
-                       }
 
 
 

src/Gargantext/Components/Nodes/Texts.purs

@@ -6,6 +6,7 @@ import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..))
 import Data.Show.Generic (genericShow)
 import Data.Tuple.Nested ((/\))
+import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Charts.Options.ECharts (dispatchAction)
@@ -16,6 +17,7 @@ import Gargantext.Components.NgramsTable.Loader (clearCache)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Components.Nodes.Corpus.Chart.Histo (histo)
+import Gargantext.Components.Nodes.Corpus.Chart.Types as CTypes
 import Gargantext.Components.Nodes.Corpus.Document as D
 import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
 import Gargantext.Components.Nodes.Lists.Types as LT
@@ -203,14 +205,16 @@ tabsCpt = here.component "tabs" cpt
 
       activeTab <- T.useBox 0
 
+      chartReload <- T.useBox T2.newReload
+
       pure $ Tab.tabs {
           activeTab
         , tabs: [
             "Documents"       /\ R.fragment [
-                histo { boxes, path, session, onClick, onInit }
-              , docView' path TabDocs
+                histoRender { boxes, path, onClick, onInit, reload: chartReload, session } []
+              , docView' path chartReload TabDocs
               ]
-          , "Trash"           /\ docView' path TabTrash
+          , "Trash"           /\ docView' path chartReload TabTrash
           -- , "More like fav"   /\ docView' path TabMoreLikeFav
           -- , "More like trash" /\ docView' path TabMoreLikeTrash
           ]
@@ -221,8 +225,9 @@ tabsCpt = here.component "tabs" cpt
                       , listId: corpusData.defaultListId
                       , limit: Nothing
                       , tabType: TabCorpus TabDocs }
-        docView' path tabType = docView { boxes
+        docView' path chartReload tabType = docView { boxes
                                                     , cacheState
+                                                    , chartReload
                                                     , corpusData
                                                     , corpusId
                                                     , frontends
@@ -234,9 +239,24 @@ tabsCpt = here.component "tabs" cpt
                                                     , yearFilter
                                                     } []
 
+type HistoProps =
+  ( reload  :: T2.ReloadS
+  | CTypes.Props
+  )
+
+histoRender :: R2.Component HistoProps
+histoRender = R.createElement histoRenderCpt
+histoRenderCpt :: R.Component HistoProps
+histoRenderCpt = here.component "histoRender" cpt where
+  cpt { boxes, path, onClick, onInit, reload, session } _ = do
+    reload' <- T.useLive T.unequal reload
+
+    pure $ histo { boxes, path, onClick, onInit, session }
+
 type DocViewProps a =
   ( boxes       :: Boxes
   , cacheState  :: T.Box LT.CacheState
+  , chartReload :: T2.ReloadS
   , corpusData  :: CorpusData
   , corpusId    :: NodeID
   , frontends   :: Frontends
@@ -259,6 +279,7 @@ docViewCpt = here.component "docView" cpt
 -- docViewLayoutRec :: forall a. DocViewProps a -> Record DT.LayoutProps
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -270,6 +291,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId
@@ -284,6 +306,7 @@ docViewLayoutRec { boxes
   }
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -295,6 +318,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId
@@ -309,6 +333,7 @@ docViewLayoutRec { boxes
   }
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -320,6 +345,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId
@@ -334,6 +360,7 @@ docViewLayoutRec { boxes
   }
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -345,6 +372,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId
@@ -360,6 +388,7 @@ docViewLayoutRec { boxes
 -- DUMMY
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -371,6 +400,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId

src/Gargantext/Components/Tab.purs

@@ -49,7 +49,6 @@ type TabProps = ( selected :: Int, index :: Int )
 
 tab :: R2.Component TabProps
 tab = R.createElement tabCpt
-
 -- | A tab only shows its contents if it is currently selected
 tabCpt :: R.Component TabProps
 tabCpt = here.component "tab" cpt

src/Gargantext/Hooks/Loader.purs

@@ -62,7 +62,7 @@ loaderCpt = here.component "loader" cpt
     cpt { render, state } _ = do
       state' <- T.useLive T.unequal state
 
-      pure $ maybe (loadingSpinner {}) render state'
+      pure $ maybe (loadingSpinner { additionalClass: Nothing }) render state'
 
 type UseLoaderEffect path state =
   ( errorHandler :: RESTError -> Effect Unit
@@ -142,6 +142,7 @@ type LoaderWithCacheAPIProps path res ret =
   , mkRequest      :: path -> GUC.Request
   , path           :: path
   , renderer       :: ret -> R.Element
+  , spinnerClass   :: Maybe String
   )
 
 useLoaderWithCacheAPI :: forall path res ret.
@@ -153,7 +154,8 @@ useLoaderWithCacheAPI { boxes
                       , handleResponse
                       , mkRequest
                       , path
-                      , renderer } = do
+                      , renderer
+                      , spinnerClass } = do
   state <- T.useBox Nothing
   state' <- T.useLive T.unequal state
 
@@ -163,7 +165,7 @@ useLoaderWithCacheAPI { boxes
                            , mkRequest
                            , path
                            , state }
-  pure $ maybe (loadingSpinner {}) renderer state'
+  pure $ maybe (loadingSpinner { additionalClass: spinnerClass }) renderer state'
 
 type LoaderWithCacheAPIEffectProps path res ret = (
     boxes          :: Boxes

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -158,8 +158,13 @@ let sigmaMouseSelector = (sigma, options) => {
       };
     };
 
-    _offset = calculateOffset(renderer.container);
-
+    // Container resize event listener
+    // @TODO: debounce?
+    const onContainerResize = (entries) => {
+      _offset = calculateOffset(_container);
+    };
+    const _resizeObserver = new ResizeObserver( onContainerResize );
+    _resizeObserver.observe(_container);
   }
 }
 

src/Gargantext/Utils/Toestand.purs

@@ -55,3 +55,4 @@ useMemberBox val box = T.useFocused (Set.member val) (toggleSet val) box
 toggleSet :: forall s. Ord s => s -> Boolean -> Set s -> Set s
 toggleSet val true  set = Set.insert val set
 toggleSet val false set = Set.delete val set
+

src/sass/_components.sass

 @import "./components/_grouped.scss"
+@import "./components/_loading_spinner.scss"

src/sass/components/_loading_spinner.scss

+.echarts-for-react {
+    height: 300px;
+}