Merge remote-tracking branch 'origin/383-dev-docs-chart-update' into dev-merge

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%;

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/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/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/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/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;
+}