[chart] auto recompute charts after ngrams changed

src/Gargantext/Components/NgramsTable.purs

@@ -275,7 +275,8 @@ tableContainerCpt { dispatch
 
 -- NEXT
 type Props =
-  ( path         :: R.State PageParams
+  ( afterSync    :: Unit -> Effect Unit
+  , path         :: R.State PageParams
   , state        :: R.State State
   , tabNgramType :: CTabNgramType
   , versioned    :: VersionedNgramsTable
@@ -288,7 +289,8 @@ loadedNgramsTable p = R.createElement loadedNgramsTableCpt p []
 loadedNgramsTableCpt :: R.Component Props
 loadedNgramsTableCpt = R2.hooksComponent thisModule "loadedNgramsTable" cpt
   where
-    cpt { path: path@(path'@{searchQuery, scoreType, params, termListFilter, termSizeFilter} /\ setPath)
+    cpt { afterSync
+        , path: path@(path'@{ searchQuery, scoreType, params, termListFilter, termSizeFilter } /\ setPath)
         , state: (state@{ ngramsChildren
                         , ngramsLocalPatch
                         , ngramsParent
@@ -325,13 +327,19 @@ loadedNgramsTableCpt = R2.hooksComponent thisModule "loadedNgramsTable" cpt
         ] <> syncResetButtons
       where
         autoUpdate :: Array R.Element
-        autoUpdate = if withAutoUpdate then [ R2.buff $ autoUpdateElt { duration: 5000, effect: performAction Synchronize } ] else []
+        autoUpdate = if withAutoUpdate then
+                       [ R2.buff $ autoUpdateElt { duration: 5000, effect: performAction Synchronize } ]
+                     else []
         resetButton :: Boolean -> R.Element
         resetButton active = H.button { className: "btn btn-primary " <> if active then "" else " disabled"
                                       , on: { click: \_ -> performAction ResetPatches } } [ H.text "Reset" ]
         syncButton :: R.Element
         syncButton = H.button { className: "btn btn-primary"
-                              , on: { click: \_ -> performAction Synchronize }} [ H.text "Sync" ]
+                              , on: { click: \_ -> do
+                                         performAction Synchronize
+                                         afterSync unit
+                                    }
+                              } [ H.text "Sync" ]
         -- I would rather have the two buttons always here and make the reset button inactive when the patch is empty.
         syncResetButtons :: Array R.Element
         syncResetButtons = [ H.div {} [ resetButton (ngramsLocalPatch /= mempty), syncButton ] ]
@@ -483,13 +491,14 @@ selectNgramsOnFirstPage rows = Set.fromFoldable $ (view $ _NgramsElement <<< _ng
 
 
 type MainNgramsTableProps =
-  ( nodeId        :: Int
-    -- ^ This node can be a corpus or contact.
+  ( afterSync     :: Unit -> Effect Unit
   , cacheState    :: R.State NT.CacheState
   , defaultListId :: Int
-  , tabType       :: TabType
+  , nodeId        :: Int
+    -- ^ This node can be a corpus or contact.
   , session       :: Session
   , tabNgramType  :: CTabNgramType
+  , tabType       :: TabType
   , withAutoUpdate :: Boolean
   )
 
@@ -499,10 +508,17 @@ mainNgramsTable props = R.createElement mainNgramsTableCpt props []
 mainNgramsTableCpt :: R.Component MainNgramsTableProps
 mainNgramsTableCpt = R2.hooksComponent thisModule "mainNgramsTable" cpt
   where
-    cpt props@{ cacheState, defaultListId, nodeId, session, tabNgramType, tabType, withAutoUpdate} _ = do
+    cpt props@{ afterSync
+              , cacheState
+              , defaultListId
+              , nodeId
+              , session
+              , tabNgramType
+              , tabType
+              , withAutoUpdate } _ = do
       let path = initialPageParams session nodeId [defaultListId] tabType
 
-      let render versioned = mainNgramsTablePaint { path, tabNgramType, versioned, withAutoUpdate }
+      let render versioned = mainNgramsTablePaint { afterSync, path, tabNgramType, versioned, withAutoUpdate }
 
       case cacheState of
         (NT.CacheOn /\ _) ->
@@ -545,10 +561,10 @@ mainNgramsTableCpt = R2.hooksComponent thisModule "mainNgramsTable" cpt
                                        , termListFilter = Nothing }
 
 type MainNgramsTablePaintProps =
-  (
-    path :: PageParams
-  , tabNgramType  :: CTabNgramType
-  , versioned :: VersionedNgramsTable
+  ( afterSync      :: Unit -> Effect Unit
+  , path           :: PageParams
+  , tabNgramType   :: CTabNgramType
+  , versioned      :: VersionedNgramsTable
   , withAutoUpdate :: Boolean
   )
 
@@ -558,12 +574,13 @@ mainNgramsTablePaint p = R.createElement mainNgramsTablePaintCpt p []
 mainNgramsTablePaintCpt :: R.Component MainNgramsTablePaintProps
 mainNgramsTablePaintCpt = R2.hooksComponent thisModule "mainNgramsTablePaint" cpt
   where
-    cpt {path, tabNgramType, versioned, withAutoUpdate} _ = do
+    cpt { afterSync, path, tabNgramType, versioned, withAutoUpdate } _ = do
       pathS <- R.useState' path
       state <- R.useState' $ initialState versioned
 
       pure $ loadedNgramsTable {
-        path: pathS
+        afterSync
+      , path: pathS
       , state
       , tabNgramType
       , versioned

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

@@ -19,6 +19,7 @@ import Gargantext.Sessions (Session)
 import Gargantext.Types (TabType(..), TabSubType(..), CTabNgramType(..), PTabNgramType(..))
 import Gargantext.Utils.Reactix as R2
 
+thisModule :: String
 thisModule = "Gargantext.Components.Nodes.Annuaire.User.Contacts.Tabs"
 
 
@@ -93,7 +94,8 @@ type NgramsViewTabsProps =
 ngramsView :: Record NgramsViewTabsProps -> R.Element
 ngramsView { cacheState, defaultListId, mode, nodeId, session } =
   NT.mainNgramsTable {
-      cacheState
+      afterSync: \_ -> pure unit
+    , cacheState
     , defaultListId
     , nodeId
     , tabType

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

@@ -26,13 +26,21 @@ reloadButtonWrap setReload el = H.div {} [
 
 reloadButton :: R.State Int -> R.Element
 reloadButton (_ /\ setReload) = H.a { className
-                                    , on: { click: onClick }
-                                    , title: "Reload" } []
+                                   , on: { click: onClick }
+                                   , title: "Reload" } []
   where
     className = "reload-btn fa fa-refresh"
     onClick _ = setReload $ (_ + 1)
 
 
+mNgramsTypeFromTabType :: T.TabType -> Maybe T.CTabNgramType
+mNgramsTypeFromTabType (T.TabCorpus (T.TabNgramType ngramType))   = Just ngramType
+mNgramsTypeFromTabType (T.TabCorpus _)                            = Nothing
+mNgramsTypeFromTabType (T.TabDocument (T.TabNgramType ngramType)) = Just ngramType
+mNgramsTypeFromTabType (T.TabDocument _)                          = Nothing
+mNgramsTypeFromTabType (T.TabPairing _)                           = Nothing
+
+
 type ChartUpdateButtonProps = (
     chartType :: T.ChartType
   , path :: Record Path
@@ -57,15 +65,8 @@ chartUpdateButtonCpt = R2.hooksComponent thisModule "chartUpdateButton" cpt
         onClick :: forall a. a -> Effect Unit
         onClick _ = do
           launchAff_ $ do
-            case mNgramsType of
+            case mNgramsTypeFromTabType tabType of
               Just ngramsType -> do
                 _ <- recomputeChart session chartType ngramsType corpusId listId
                 liftEffect $ setReload $ (_ + 1)
               Nothing -> pure unit
-
-        mNgramsType = case tabType of
-            T.TabCorpus (T.TabNgramType ngramType)   -> Just ngramType
-            T.TabCorpus _                            -> Nothing
-            T.TabDocument (T.TabNgramType ngramType) -> Just ngramType
-            T.TabDocument _                          -> Nothing
-            T.TabPairing _                           -> Nothing

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

 module Gargantext.Components.Nodes.Lists.Tabs where
 
 import Data.Maybe (Maybe(..), fromMaybe)
+import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log2)
+import Effect.Aff (launchAff_)
+import Effect.Class (liftEffect)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
@@ -9,16 +13,19 @@ import Gargantext.Prelude
 
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
+import Gargantext.Components.Nodes.Corpus.Chart.API (recomputeChart)
 import Gargantext.Components.Nodes.Corpus.Chart.Metrics (metrics)
 import Gargantext.Components.Nodes.Corpus.Chart.Pie  (pie, bar)
 import Gargantext.Components.Nodes.Corpus.Chart.Tree (tree)
 import Gargantext.Components.Nodes.Corpus.Chart (getChartFunction)
+import Gargantext.Components.Nodes.Corpus.Chart.Utils (mNgramsTypeFromTabType)
 import Gargantext.Components.Nodes.Lists.Types as NTypes
 import Gargantext.Components.Tab as Tab
 import Gargantext.Sessions (Session)
 import Gargantext.Types (ChartType(..), CTabNgramType(..), Mode(..), TabSubType(..), TabType(..), chartTypeFromString, modeTabType)
 import Gargantext.Utils.Reactix as R2
 
+thisModule :: String
 thisModule = "Gargantext.Components.Nodes.Lists.Tabs"
 
 type Props = ( cacheState :: R.State NTypes.CacheState
@@ -58,10 +65,12 @@ ngramsViewCpt = R2.hooksComponent thisModule "ngramsView" cpt
         , mode
         , session } _ = do
       chartType <- R.useState' Histo
+      chartsReload <- R.useState' 0
 
       pure $ R.fragment
-        ( charts tabNgramType chartType
-        <> [ NT.mainNgramsTable { cacheState
+        ( charts tabNgramType chartType chartsReload
+        <> [ NT.mainNgramsTable { afterSync: afterSync (fst chartType) chartsReload
+                                , cacheState
                                 , defaultListId
                                 , nodeId: corpusId
                                 , session
@@ -72,8 +81,17 @@ ngramsViewCpt = R2.hooksComponent thisModule "ngramsView" cpt
            ]
         )
       where
+        afterSync chartType (_ /\ setChartsReload) _ = do
+          case mNgramsType of
+            Just ngramsType -> do
+              launchAff_ $ do
+                recomputeChart session chartType ngramsType corpusId listId
+              setChartsReload $ (+) 1
+            Nothing         -> pure unit
+
         tabNgramType = modeTabType mode
         tabType      = TabCorpus (TabNgramType tabNgramType)
+        mNgramsType = mNgramsTypeFromTabType tabType
         listId       = defaultListId
         path         = { corpusId
                        , limit: Just 1000
@@ -81,7 +99,7 @@ ngramsViewCpt = R2.hooksComponent thisModule "ngramsView" cpt
                        , tabType
                        }
 
-        charts CTabTerms (chartType /\ setChartType) = [
+        charts CTabTerms (chartType /\ setChartType) _ = [
           H.div { className: "row chart-type-selector" } [
             H.div { className: "col-md-3" } [
               R2.select { className: "form-control"
@@ -102,7 +120,7 @@ ngramsViewCpt = R2.hooksComponent thisModule "ngramsView" cpt
           ]
         , getChartFunction chartType $ { session, path }
         ]
-        charts _ _       = [ chart mode ]
+        charts _ _ _       = [ chart mode ]
 
         chart Authors    = pie     { session, path }
         chart Institutes = tree    { session, path }