[Charts] add reload button to all charts in Pages/Corpus/Chart

dist/styles/Login.css

@@ -219,3 +219,7 @@ text-align: center;
     padding-left: 0 !important;
     padding-right: 0 !important;
 }
+
+.tab-pane .reload-btn {
+    padding-right: 6px;
+}

src/Gargantext/Components/Tree.purs

@@ -20,7 +20,6 @@ import Effect.Exception (error)
 import Effect.Uncurried (mkEffectFn1)
 import FFI.Simple ((..))
 import Partial.Unsafe (unsafePartial)
-import React (ReactClass, ReactElement)
 import React as React
 import React.DOM (a, div, i)
 import React.DOM.Props (className, style)

src/Gargantext/Pages/Corpus/Chart/Histo.purs

 module Gargantext.Pages.Corpus.Chart.Histo where
 
+import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Array (foldl)
-import Data.Tuple (Tuple(..))
-import Data.Map as Map
 import Data.Int (toNumber)
+import Data.Map as Map
 import Data.Map (Map)
-import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Maybe (Maybe(..), maybe)
+import Data.Tuple (Tuple(..))
 import Effect.Aff (Aff)
 import Gargantext.Config -- (End(..), Path(..), TabType, toUrl)
 import Gargantext.Config.REST (get)
 import React (ReactClass, ReactElement, createElement)
-import Thermite (Spec, Render, defaultPerformAction, simpleSpec, createClass)
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Thermite (Spec)
+
 import Gargantext.Prelude
 import Gargantext.Types (TermList(..))
 import Gargantext.Components.Loader as Loader
+import Gargantext.Components.Loader2 (useLoader)
 import Gargantext.Components.Charts.Options.ECharts
 import Gargantext.Components.Charts.Options.Type
 import Gargantext.Components.Charts.Options.Series
 import Gargantext.Components.Charts.Options.Color
 import Gargantext.Components.Charts.Options.Font
 import Gargantext.Components.Charts.Options.Data
+import Gargantext.Utils.Reactix as R2
+import Gargantext.Pages.Corpus.Chart.Utils as U
 
 type Path =
   { corpusId :: Int
@@ -51,12 +57,6 @@ instance decodeHistoMetrics :: DecodeJson HistoMetrics where
 
 type Loaded = HistoMetrics
 
-loadedMetricsSpec :: Spec {} (Loader.InnerProps Path Loaded ()) Void
-loadedMetricsSpec = simpleSpec defaultPerformAction render
-  where
-    render :: Render {} (Loader.InnerProps Path Loaded ()) Void
-    render dispatch {loaded:histoMetrics} {} _ = [chart (chartOptions histoMetrics)]
-
 chartOptions :: HistoMetrics -> Options
 chartOptions (HistoMetrics { dates: dates', count: count'}) = Options
   { mainTitle : "Histogram"
@@ -68,23 +68,27 @@ chartOptions (HistoMetrics { dates: dates', count: count'}) = Options
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
   }
 
-metricsLoader :: Loader.Props' Path HistoMetrics -> ReactElement
-metricsLoader props = createElement metricsLoaderClass props []
-  where
-    metricsLoaderClass :: ReactClass (Loader.Props Path HistoMetrics)
-    metricsLoaderClass = Loader.createLoaderClass "MetricsLoader" getMetrics
 
-    getMetrics :: Path -> Aff HistoMetrics
-    getMetrics {corpusId, tabType} = do
-      ChartMetrics ms <- get $ toUrl Back (Chart {chartType: Histo, tabType: tabType}) $ Just corpusId
-      pure ms."data"
+getMetrics :: Path -> Aff HistoMetrics
+getMetrics {corpusId, tabType} = do
+  ChartMetrics ms <- get $ toUrl Back (Chart {chartType: Histo, tabType: tabType}) $ Just corpusId
+  pure ms."data"
 
 histoSpec :: Spec {} Path Void
-histoSpec = simpleSpec defaultPerformAction render
+histoSpec = R2.elSpec $ R.hooksComponent "LoadedMetricsHisto" cpt
   where
-    render :: Render {} Path Void
-    render dispatch path {} _ =
-      [ metricsLoader
-        { path
-        , component: createClass "LoadedMetrics" loadedMetricsSpec (const {})
-        } ]
+    cpt p _ = do
+      setReload <- R.useState' 0
+
+      pure $ metricsLoadView setReload p
+
+metricsLoadView :: R.State Int -> Path -> R.Element
+metricsLoadView setReload p = R.createElement el p []
+  where
+    el = R.hooksComponent "MetricsLoadedHistoView" cpt
+    cpt p _ = do
+      useLoader p getMetrics $ \{loaded} ->
+        loadedMetricsView setReload loaded
+
+loadedMetricsView :: R.State Int -> HistoMetrics -> R.Element
+loadedMetricsView setReload loaded = U.reloadButtonWrap setReload $ R2.buff $ chart $ chartOptions loaded

src/Gargantext/Pages/Corpus/Chart/Metrics.purs

 module Gargantext.Pages.Corpus.Chart.Metrics where
 
+import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Array (foldl)
-import Data.Tuple (Tuple(..))
 import Data.Map as Map
 import Data.Map (Map)
-import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Maybe (Maybe(..), maybe)
+import Data.Tuple (Tuple(..))
 import Effect.Aff (Aff)
 import Gargantext.Config -- (End(..), Path(..), TabType, toUrl)
 import Gargantext.Config.REST (get)
 import React (ReactClass, ReactElement, createElement)
-import Thermite (Spec, Render, defaultPerformAction, simpleSpec, createClass)
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Thermite (Spec)
+
 import Gargantext.Prelude
 import Gargantext.Types (TermList(..))
+import Gargantext.Components.Loader2 (useLoader)
 import Gargantext.Components.Loader as Loader
 import Gargantext.Components.Charts.Options.ECharts
 import Gargantext.Components.Charts.Options.Type
@@ -20,6 +24,8 @@ import Gargantext.Components.Charts.Options.Series
 import Gargantext.Components.Charts.Options.Color
 import Gargantext.Components.Charts.Options.Font
 import Gargantext.Components.Charts.Options.Data
+import Gargantext.Utils.Reactix as R2
+import Gargantext.Pages.Corpus.Chart.Utils as U
 
 type Path =
   { corpusId :: Int
@@ -56,12 +62,6 @@ instance decodeMetrics :: DecodeJson Metrics where
 
 type Loaded  = Array Metric
 
-loadedMetricsSpec :: Spec {} (Loader.InnerProps Path Loaded ()) Void
-loadedMetricsSpec = simpleSpec defaultPerformAction render
-  where
-    render :: Render {} (Loader.InnerProps Path Loaded ()) Void
-    render dispatch {loaded} {} _ = [chart (scatterOptions loaded)]
-
 scatterOptions :: Array Metric -> Options
 scatterOptions metrics = Options
   { mainTitle : "Ngrams Selection Metrics"
@@ -101,18 +101,21 @@ getMetrics {corpusId, listId, limit, tabType} = do
   Metrics ms <- get $ toUrl Back (CorpusMetrics {listId, tabType, limit}) $ Just corpusId
   pure ms."data"
 
-metricsLoaderClass :: ReactClass (Loader.Props Path Loaded)
-metricsLoaderClass = Loader.createLoaderClass "MetricsLoader" getMetrics
 
-metricsLoader :: Loader.Props' Path Loaded -> ReactElement
-metricsLoader props = createElement metricsLoaderClass props []
+metricsSpec = R2.elSpec $ R.hooksComponent "LoadedMetrics" cpt
+  where
+    cpt p _ = do
+      setReload <- R.useState' 0
 
-metricsSpec :: Spec {} Path Void
-metricsSpec = simpleSpec defaultPerformAction render
+      pure $ metricsLoadView setReload p
+
+metricsLoadView :: R.State Int -> Path -> R.Element
+metricsLoadView setReload p = R.createElement el p []
   where
-    render :: Render {} Path Void
-    render dispatch path {} _ =
-      [ metricsLoader
-        { path
-        , component: createClass "LoadedMetrics" loadedMetricsSpec (const {})
-        } ]
+    el = R.hooksComponent "MetricsLoadedView" cpt
+    cpt p _ = do
+      useLoader p getMetrics $ \{loaded} ->
+        loadedMetricsView setReload loaded
+
+loadedMetricsView :: R.State Int -> Loaded -> R.Element
+loadedMetricsView setReload loaded = U.reloadButtonWrap setReload $ R2.buff $ chart $ scatterOptions loaded

src/Gargantext/Pages/Corpus/Chart/Pie.purs

 module Gargantext.Pages.Corpus.Chart.Pie where
 
-import Data.String (take, joinWith, Pattern(..), split, length)
+import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Array (foldl, zip, filter)
 import Data.Array as A
-import Data.Tuple (Tuple(..))
-import Data.Map as Map
 import Data.Int (toNumber)
-import Data.Map (Map)
-import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Maybe (Maybe(..), maybe)
+import Data.String (take, joinWith, Pattern(..), split, length)
+import Data.Tuple (Tuple(..))
 import Effect.Aff (Aff)
 import Gargantext.Config -- (End(..), Path(..), TabType, toUrl)
 import Gargantext.Config.REST (get)
 import React (ReactClass, ReactElement, createElement)
-import Thermite (Spec, Render, defaultPerformAction, simpleSpec, createClass)
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Thermite (Spec)
+
 import Gargantext.Prelude
 import Gargantext.Types (TermList(..))
-import Gargantext.Components.Loader as Loader
+import Gargantext.Components.Loader2 (useLoader)
 import Gargantext.Components.Charts.Options.ECharts
 import Gargantext.Components.Charts.Options.Type
 import Gargantext.Components.Charts.Options.Series
 import Gargantext.Components.Charts.Options.Color
 import Gargantext.Components.Charts.Options.Font
 import Gargantext.Components.Charts.Options.Data
+import Gargantext.Utils.Reactix as R2
+import Gargantext.Pages.Corpus.Chart.Utils as U
 
 type Path =
   { corpusId :: Int
@@ -53,14 +56,8 @@ instance decodeHistoMetrics :: DecodeJson HistoMetrics where
 
 type Loaded = HistoMetrics
 
-loadedMetricsSpec :: Spec {} (Loader.InnerProps Path Loaded ()) Void
-loadedMetricsSpec = simpleSpec defaultPerformAction render
-  where
-    render :: Render {} (Loader.InnerProps Path Loaded ()) Void
-    render dispatch {loaded : metricsData} {} _ = [chart (chartOptions metricsData)]
-
-chartOptions :: HistoMetrics -> Options
-chartOptions (HistoMetrics { dates: dates', count: count'}) = Options
+chartOptionsBar :: HistoMetrics -> Options
+chartOptionsBar (HistoMetrics { dates: dates', count: count'}) = Options
   { mainTitle : "Bar"
   , subTitle  : "Count of GraphTerm"
   , xAxis     : xAxis' $ map (\t -> joinWith " " $ map (take 3) $ A.take 3 $ filter (\s -> length s > 3) $ split (Pattern " ") t) dates'
@@ -70,12 +67,6 @@ chartOptions (HistoMetrics { dates: dates', count: count'}) = Options
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
   }
 
-loadedMetricsSpecPie :: Spec {} (Loader.InnerProps Path Loaded ()) Void
-loadedMetricsSpecPie = simpleSpec defaultPerformAction render
-  where
-    render :: Render {} (Loader.InnerProps Path Loaded ()) Void
-    render dispatch {loaded : metricsData} {} _ = [chart (chartOptionsPie metricsData)]
-
 chartOptionsPie :: HistoMetrics -> Options
 chartOptionsPie (HistoMetrics { dates: dates', count: count'}) = Options
   { mainTitle : "Pie"
@@ -89,34 +80,50 @@ chartOptionsPie (HistoMetrics { dates: dates', count: count'}) = Options
   }
 
 
-metricsLoader :: Loader.Props' Path HistoMetrics -> ReactElement
-metricsLoader props = createElement metricsLoaderClass props []
-  where
-    metricsLoaderClass :: ReactClass (Loader.Props Path HistoMetrics)
-    metricsLoaderClass = Loader.createLoaderClass "MetricsLoader" getMetrics
+getMetrics :: Path -> Aff HistoMetrics
+getMetrics {corpusId, tabType:tabType} = do
+  ChartMetrics ms <- get $ toUrl Back (Chart {chartType: ChartPie, tabType: tabType}) $ Just corpusId
+  pure ms."data"
+
 
-    getMetrics :: Path -> Aff HistoMetrics
-    getMetrics {corpusId, tabType:tabType} = do
-      ChartMetrics ms <- get $ toUrl Back (Chart {chartType: ChartPie, tabType: tabType}) $ Just corpusId
-      pure ms."data"
 
 pieSpec :: Spec {} Path Void
-pieSpec = simpleSpec defaultPerformAction render
+pieSpec = R2.elSpec $ R.hooksComponent "LoadedMetricsPie" cpt
+  where
+    cpt p _ = do
+      setReload <- R.useState' 0
+
+      pure $ metricsLoadPieView setReload p
+
+metricsLoadPieView :: R.State Int -> Path -> R.Element
+metricsLoadPieView setReload p = R.createElement el p []
   where
-    render :: Render {} Path Void
-    render dispatch path {} _ =
-      [ metricsLoader
-        { path
-        , component: createClass "LoadedMetrics" loadedMetricsSpecPie (const {})
-        } ]
+    el = R.hooksComponent "MetricsLoadedPieView" cpt
+    cpt p _ = do
+      useLoader p getMetrics $ \{loaded} ->
+        loadedMetricsPieView setReload loaded
+
+loadedMetricsPieView :: R.State Int -> HistoMetrics -> R.Element
+loadedMetricsPieView setReload loaded = U.reloadButtonWrap setReload $ R2.buff $ chart $ chartOptionsPie loaded
+
+
 
 barSpec :: Spec {} Path Void
-barSpec = simpleSpec defaultPerformAction render
+barSpec = R2.elSpec $ R.hooksComponent "LoadedMetricsBar" cpt
+  where
+    cpt p _ = do
+      setReload <- R.useState' 0
+
+      pure $ metricsLoadBarView setReload p
+
+
+metricsLoadBarView :: R.State Int -> Path -> R.Element
+metricsLoadBarView setReload p = R.createElement el p []
   where
-    render :: Render {} Path Void
-    render dispatch path {} _ =
-      [ metricsLoader
-        { path
-        , component: createClass "LoadedMetrics" loadedMetricsSpec (const {})
-        } ]
+    el = R.hooksComponent "MetricsLoadedBarView" cpt
+    cpt p _ = do
+      useLoader p getMetrics $ \{loaded} ->
+        loadedMetricsBarView setReload loaded
 
+loadedMetricsBarView :: R.State Int -> Loaded -> R.Element
+loadedMetricsBarView setReload loaded = U.reloadButtonWrap setReload $ R2.buff $ chart $ chartOptionsBar loaded

src/Gargantext/Pages/Corpus/Chart/Tree.purs

 module Gargantext.Pages.Corpus.Chart.Tree where
 
 import Data.Array (foldl)
-import Data.Tuple (Tuple(..))
 import Data.Map as Map
 import Data.Map (Map)
 import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Maybe (Maybe(..), maybe)
+import Data.Tuple (Tuple(..))
 import Effect.Aff (Aff)
 import Gargantext.Config -- (End(..), Path(..), TabType, toUrl)
 import Gargantext.Config.REST (get)
 import React (ReactClass, ReactElement, createElement)
-import Thermite (Spec, Render, defaultPerformAction, simpleSpec, createClass)
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Thermite (Spec)
+
 import Gargantext.Prelude
 import Gargantext.Types (TermList(..))
-import Gargantext.Components.Loader as Loader
+import Gargantext.Components.Loader2 (useLoader)
 import Gargantext.Components.Charts.Options.ECharts
 import Gargantext.Components.Charts.Options.Type
 import Gargantext.Components.Charts.Options.Series
 import Gargantext.Components.Charts.Options.Color
 import Gargantext.Components.Charts.Options.Font
 import Gargantext.Components.Charts.Options.Data
-
-import Gargantext.Pages.Corpus.Dashboard (treeMapEx)
+import Gargantext.Utils.Reactix as R2
+import Gargantext.Pages.Corpus.Chart.Utils as U
 
 
 type Path =
@@ -44,12 +47,6 @@ instance decodeMetrics :: DecodeJson Metrics where
 
 type Loaded  = Array TreeNode
 
-loadedMetricsSpec :: Spec {} (Loader.InnerProps Path Loaded ()) Void
-loadedMetricsSpec = simpleSpec defaultPerformAction render
-  where
-    render :: Render {} (Loader.InnerProps Path Loaded ()) Void
-    render dispatch {loaded} {} _ = [chart (scatterOptions loaded)]
-
 scatterOptions :: Array TreeNode -> Options
 scatterOptions nodes = Options
   { mainTitle : "Tree"
@@ -69,18 +66,24 @@ getMetrics {corpusId, listId, limit, tabType} = do
   Metrics ms <- get $ toUrl Back (Chart {chartType : ChartTree, tabType: tabType}) $ Just corpusId
   pure ms."data"
 
-metricsLoaderClass :: ReactClass (Loader.Props Path Loaded)
-metricsLoaderClass = Loader.createLoaderClass "MetricsLoader" getMetrics
+treeSpec :: Spec {} Path Void
+treeSpec = R2.elSpec $ R.hooksComponent "LoadedMetrics" cpt
+  where
+    cpt p _ = do
+      setReload <- R.useState' 0
 
-metricsLoader :: Loader.Props' Path Loaded -> ReactElement
-metricsLoader props = createElement metricsLoaderClass props []
+      pure $ metricsLoadView setReload p
 
-treeSpec :: Spec {} Path Void
-treeSpec = simpleSpec defaultPerformAction render
+metricsLoadView :: R.State Int -> Path -> R.Element
+metricsLoadView setReload p = R.createElement el p []
   where
-    render :: Render {} Path Void
-    render dispatch path {} _ =
-      [ metricsLoader
-        { path
-        , component: createClass "LoadedMetrics" loadedMetricsSpec (const {})
-        } ]
+    el = R.hooksComponent "MetricsLoadView" cpt
+    cpt p _ = do
+      useLoader p getMetrics $ \{loaded} ->
+        loadedMetricsView setReload loaded
+
+loadedMetricsView :: R.State Int -> Loaded -> R.Element
+loadedMetricsView setReload loaded = H.div {} [
+    U.reloadButton setReload
+  , R2.buff $ chart (scatterOptions loaded)
+  ]

src/Gargantext/Pages/Corpus/Chart/Utils.purs

+module Gargantext.Pages.Corpus.Chart.Utils where
+
+import Data.Tuple.Nested ((/\))
+import Effect.Uncurried (mkEffectFn1)
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Prelude
+
+reloadButtonWrap :: R.State Int -> R.Element -> R.Element
+reloadButtonWrap setReload el = H.div {} [
+    reloadButton setReload
+  , el
+  ]
+
+reloadButton :: R.State Int -> R.Element
+reloadButton (_ /\ setReload) = H.a {className, onClick, title: "Reload"} []
+  where
+    className = "reload-btn glyphicon glyphicon-refresh"
+    onClick = mkEffectFn1 $ \_ -> setReload $ \r -> r + 1

src/Gargantext/Pages/Corpus/Tabs/Specs.purs

@@ -16,7 +16,6 @@ import Gargantext.Pages.Corpus.Chart.Metrics (metricsSpec)
 import Gargantext.Pages.Corpus.Chart.Pie  (pieSpec, barSpec)
 import Gargantext.Pages.Corpus.Chart.Tree (treeSpec)
 
-import Gargantext.Pages.Corpus.Dashboard (globalPublis)
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.Charts.Options.ECharts (chart) as ECharts
 import Gargantext.Components.DocsTable as DT