[chart] fix components to be truly react components

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

@@ -56,7 +56,8 @@ metricsLoadViewCpt = here.component "metricsLoadView" cpt
 type MetricsWithCacheLoadViewProps res ret =
   ( getMetricsHash :: Session -> ReloadPath -> AffRESTError Hash
   , handleResponse :: HashedResponse res -> ret
-  , loaded         :: Record MetricsProps -> ret -> R.Element
+  -- , loaded         :: Record MetricsProps -> ret -> R.Element
+  , loaded         :: Record (metrics :: ret | MetricsProps) -> R.Element
   , mkRequest      :: ReloadPath -> GUC.Request
   | MetricsProps
   )
@@ -87,5 +88,5 @@ metricsWithCacheLoadViewCpt = here.component "metricsWithCacheLoadView" cpt
                             , handleResponse
                             , mkRequest
                             , path: (reload' /\ path)
-                            , renderer: loaded { boxes, path, reload, session, onClick, onInit }
+                            , renderer: \metrics -> loaded { boxes, path, reload, session, onClick, onInit, metrics }
                             , spinnerClass: Just "echarts-for-react-spinner" }

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

@@ -24,6 +24,7 @@ import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Record.Extra as RX
 import Simple.JSON as JSON
 import Toestand as T
 
@@ -47,8 +48,14 @@ derive newtype instance JSON.WriteForeign HistoMetrics
 
 type Loaded = HistoMetrics
 
-chartOptions :: Record MetricsProps -> HistoMetrics -> Options
-chartOptions { onClick, onInit } (HistoMetrics { dates: dates', count: count'}) = Options
+type LoadedProps =
+  ( metrics :: HistoMetrics
+  | MetricsProps )
+
+chartOptions :: Record LoadedProps -> Options
+chartOptions { onClick
+             , onInit
+             , metrics: HistoMetrics { dates: dates', count: count'} } = Options
   { mainTitle : "Histogram"
   , subTitle  : "Distribution of publications over time"
   , xAxis     : xAxis' dates'
@@ -112,10 +119,15 @@ histoCpt = here.component "histo" cpt
         , onInit
         }
 
-loaded :: Record MetricsProps -> HistoMetrics -> R.Element
-loaded p l =
-  H.div {} [ U.reloadButton p.reload
-           , U.chartUpdateButton { chartType: Histo, path:p.path, reload:p.reload, session:p.session }
-           , chart $ chartOptions p l
-           ]
+loaded :: R2.Leaf LoadedProps
+loaded = R2.leaf loadedCpt
+loadedCpt :: R.Component LoadedProps
+loadedCpt = here.component "loaded" cpt where
+  cpt p@{ path
+        , reload
+        , session } _ = do
+    pure $ H.div {} [ U.reloadButton { reload }
+                    , U.chartUpdateButton { chartType: Histo, path, reload, session }
+                    , chart $ chartOptions p
+                    ]
   -- TODO: parametrize ngramsType above

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

@@ -54,8 +54,12 @@ derive newtype instance JSON.ReadForeign Metrics
 
 type Loaded  = Array Metric
 
-scatterOptions :: Record MetricsProps -> Array Metric -> Options
-scatterOptions { onClick, onInit } metrics' = Options
+type LoadedProps =
+  ( metrics :: Array Metric
+  | MetricsProps )
+
+scatterOptions :: Record LoadedProps -> Options
+scatterOptions { onClick, onInit, metrics: metrics' } = Options
   { mainTitle : "Ngrams Selection Metrics"
   , subTitle  : "Local metrics (Inc/Exc, Spe/Gen), Global metrics (TFICF maillage)"
   , xAxis     : xAxis { min: -1 }
@@ -125,10 +129,15 @@ metricsCpt = here.component "etrics" cpt
         }
 
 
-loaded :: Record MetricsProps -> Loaded -> R.Element
-loaded p loaded' =
-  H.div {} [
-  {-  U.reloadButton reload
-  , U.chartUpdateButton { chartType: Scatter, path, reload, session }
-  , -} chart $ scatterOptions p loaded'
-  ]
+loaded :: R2.Leaf LoadedProps
+loaded = R2.leaf loadedCpt
+loadedCpt :: R.Component LoadedProps
+loadedCpt = here.component "loaded" cpt where
+  cpt p@{ path
+        , reload
+        , session } _ = do
+    pure $ H.div {} [
+      {-  U.reloadButton reload
+      , U.chartUpdateButton { chartType: Scatter, path, reload, session }
+      , -} chart $ scatterOptions p
+      ]

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

@@ -52,8 +52,14 @@ derive newtype instance JSON.WriteForeign HistoMetrics
 
 type Loaded = HistoMetrics
 
-chartOptionsBar :: Record MetricsProps -> HistoMetrics -> Options
-chartOptionsBar { onClick, onInit } (HistoMetrics { dates: dates', count: count'}) = Options
+type LoadedProps =
+  ( metrics :: HistoMetrics
+  | MetricsProps )
+
+chartOptionsBar :: Record LoadedProps -> Options
+chartOptionsBar { onClick
+                , onInit
+                , metrics: HistoMetrics { dates: dates', count: count'} } = Options
   { mainTitle : "Bar"
   , subTitle  : "Count of MapTerm"
   , xAxis     : xAxis' $ map (\t -> joinWith " " $ map (take 3) $ A.take 3 $ filter (\s -> length s > 3) $ split (Pattern " ") t) dates'
@@ -65,8 +71,10 @@ chartOptionsBar { onClick, onInit } (HistoMetrics { dates: dates', count: count'
   , onInit
   }
 
-chartOptionsPie :: Record MetricsProps -> HistoMetrics -> Options
-chartOptionsPie { onClick, onInit } (HistoMetrics { dates: dates', count: count'}) = Options
+chartOptionsPie :: Record LoadedProps -> Options
+chartOptionsPie { onClick
+                , onInit
+                , metrics: HistoMetrics { dates: dates', count: count'} } = Options
   { mainTitle : "Pie"
   , subTitle  : "Distribution by MapTerm"
   , xAxis     : xAxis' []
@@ -117,13 +125,18 @@ pieCpt = here.component "pie" cpt
         , onInit
         }
 
-loadedPie :: Record MetricsProps -> HistoMetrics -> R.Element
-loadedPie p loaded =
-  H.div {} [
-  {-  U.reloadButton reload
+loadedPie :: R2.Leaf LoadedProps
+loadedPie = R2.leaf loadedPieCpt
+loadedPieCpt :: R.Component LoadedProps
+loadedPieCpt = here.component "loadedPie" cpt where
+  cpt p@{ path
+        , reload
+        , session } _ = do
+    pure $ H.div {} [
+      {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: ChartPie, path, reload, session }
-  , -} chart $ chartOptionsPie p loaded
-  ]
+  , -} chart $ chartOptionsPie p
+       ]
 
 
 bar :: Record Props -> R.Element
@@ -147,10 +160,15 @@ barCpt = here.component "bar" cpt
          , onInit
          }
 
-loadedBar :: Record MetricsProps -> Loaded -> R.Element
-loadedBar p loaded =
-  H.div {} [
-  {-  U.reloadButton reload
+loadedBar :: R2.Leaf LoadedProps
+loadedBar = R2.leaf loadedBarCpt
+loadedBarCpt :: R.Component LoadedProps
+loadedBarCpt = here.component "loadedBar" cpt where
+  cpt p@{ path
+        , reload
+        , session } _ = do
+    pure $ H.div {} [
+      {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: ChartBar, path, reload, session }
-  , -} chart $ chartOptionsBar p loaded
-  ]
+  , -} chart $ chartOptionsBar p
+       ]

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

@@ -37,8 +37,12 @@ derive newtype instance JSON.WriteForeign Metrics
 
 type Loaded  = Array TreeNode
 
-scatterOptions :: Record MetricsProps -> Array TreeNode -> Options
-scatterOptions { onClick, onInit } nodes = Options
+type LoadedProps =
+  ( metrics :: Array TreeNode
+  | MetricsProps )
+
+scatterOptions :: Record LoadedProps -> Options
+scatterOptions { onClick, onInit, metrics: nodes } = Options
   { mainTitle : "Tree"
   , subTitle  : "Tree Sub Title"
   , xAxis     : xAxis' []
@@ -91,10 +95,15 @@ treeCpt = here.component "tree" cpt
         , onInit
         }
 
-loaded :: Record MetricsProps -> Loaded -> R.Element
-loaded p loaded' =
-  H.div {} [
-  {-  U.reloadButton reload
+loaded :: R2.Leaf LoadedProps
+loaded = R2.leaf loadedCpt
+loadedCpt :: R.Component LoadedProps
+loadedCpt = here.component "loaded" cpt where
+  cpt p@{ path
+        , reload
+        , session } _ = do
+    pure $ H.div {} [
+      {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: ChartTree, path, reload, session }
-  , -} chart (scatterOptions p loaded')
-  ]
+  , -} chart $ scatterOptions p
+       ]

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

@@ -18,16 +18,18 @@ import Gargantext.Utils.Toestand as T2
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Corpus.Chart.Utils"
 
-reloadButtonWrap :: T2.ReloadS -> R.Element -> R.Element
-reloadButtonWrap setReload el = H.div {} [
-    reloadButton setReload
-  , el
-  ]
+type ReloadButtonProps =
+  ( reload :: T2.ReloadS )
 
-reloadButton :: T2.ReloadS -> R.Element
-reloadButton reloadS = H.a { className, on: { click }, title: "Reload" } [] where
-  className = "pr-1 fa fa-refresh"
-  click _ = T2.reload reloadS
+reloadButton :: R2.Leaf ReloadButtonProps
+reloadButton = R2.leaf reloadButtonCpt
+reloadButtonCpt :: R.Component ReloadButtonProps
+reloadButtonCpt = here.component "reloadButton" cpt where
+  cpt { reload } _ = do
+    pure $ H.a { className, on: { click }, title: "Reload" } []
+    where
+      className = "pr-1 fa fa-refresh"
+      click _ = T2.reload reload
 
 
 mNgramsTypeFromTabType :: T.TabType -> Maybe T.CTabNgramType
@@ -43,9 +45,8 @@ type ChartUpdateButtonProps =
   , session   :: Session
   )
 
-chartUpdateButton :: Record ChartUpdateButtonProps -> R.Element
-chartUpdateButton p = R.createElement chartUpdateButtonCpt p []
-
+chartUpdateButton :: R2.Leaf ChartUpdateButtonProps
+chartUpdateButton = R2.leaf chartUpdateButtonCpt
 chartUpdateButtonCpt :: R.Component ChartUpdateButtonProps
 chartUpdateButtonCpt = here.component "chartUpdateButton" cpt where
   cpt {  path: { corpusId, listId, tabType }