>>> continue

src/Gargantext/Components/Charts/Options/Data.purs

 module Gargantext.Components.Charts.Options.Data where
 
+import Gargantext.Components.Charts.Options.Font (TextStyle, Icon, ItemStyle)
+import Gargantext.Components.Charts.Options.Legend (SelectedMode)
+import Gargantext.Types (class Optional)
 import Record.Unsafe (unsafeSet)
 import Unsafe.Coerce (unsafeCoerce)
-import Gargantext.Types (class Optional)
-import Gargantext.Components.Charts.Options.Font (TextStyle, Icon, ItemStyle)
 
 type DataLegend =
   { name :: String
@@ -22,11 +23,15 @@ type RequiredData v o =
   }
 
 type OptionalData =
-  ( name       :: String
-  , symbolSize :: Number
-  , itemStyle  :: ItemStyle
-    -- ^ the style setting about single data point(bubble).
-  , label      :: { show :: Boolean }
+  ( name          :: String
+  , symbolSize    :: Number
+  , itemStyle     :: ItemStyle
+  -- ^ the style setting about single data point(bubble).
+  , label         :: { show :: Boolean }
+  , emphasis      :: { itemStyle :: ItemStyle }
+  , selectedMode  :: SelectedMode
+  , select        :: { itemStyle :: ItemStyle }
+  -- ^ need "selectedMode" to be defined
   )
 
 type DataSerie v = RequiredData v OptionalData

src/Gargantext/Components/Charts/Options/ECharts.js

@@ -6,6 +6,7 @@ exports.eChartsClass = ReactEcharts.default;
 
 /**
  * @XXX "echarts-for-react" unsuitable to proper PureScript implementation
+ *       regarding event listeners
  * @name listenerFn1
  * @param {function} fn
  * @returns
@@ -16,3 +17,17 @@ exports.listenerFn1 = function(fn) {
     fn(args[0])()
   }
 };
+/**
+ * @link https://echarts.apache.org/en/api.html#echartsInstance.dispatchAction
+ * @name dispatchAction
+ * @param {object} eChartsInstance instanceof ECharts
+ * @param {object} opts
+ * @returns
+ */
+exports.dispatchAction = function(eChartsInstance) {
+  return function(opts) {
+    return function() {
+      eChartsInstance.dispatchAction(opts);
+    }
+  }
+}

src/Gargantext/Components/Charts/Options/ECharts.purs

@@ -5,6 +5,7 @@ import Prelude
 import CSS (italic)
 import CSS.Common (normal)
 import Data.Maybe (Maybe(..))
+import Data.Nullable (toMaybe)
 import Effect (Effect)
 import Gargantext.Components.Charts.Options.Color (transparent, violet, black)
 import Gargantext.Components.Charts.Options.Data (DataLegend, dataSerie)
@@ -12,7 +13,7 @@ import Gargantext.Components.Charts.Options.Font (IconOptions(..), Shape(..), Te
 import Gargantext.Components.Charts.Options.Legend (legendType, LegendMode(..), PlainOrScroll(..), selectedMode, Orientation(..), orient)
 import Gargantext.Components.Charts.Options.Position (Align(..), LeftRelativePosition(..), TopRelativePosition(..), numberPosition, percentPosition, relativePosition)
 import Gargantext.Components.Charts.Options.Series (Series, seriesPieD1)
-import Gargantext.Components.Charts.Options.Type (DataZoom, Echarts, Legend, Option, Title, XAxis, YAxis, MouseEvent, xAxis, yAxis)
+import Gargantext.Components.Charts.Options.Type (DataZoom, EChartsInstance, Echarts, Legend, MouseEvent, Option, Title, XAxis, YAxis, EChartRef, xAxis, yAxis)
 import Gargantext.Utils.Reactix as R2
 import React (ReactClass, unsafeCreateElementDynamic)
 import Reactix as R
@@ -21,13 +22,16 @@ import Unsafe.Coerce (unsafeCoerce)
 
 foreign import eChartsClass :: ReactClass Echarts
 foreign import listenerFn1 :: forall evt. (evt -> Effect Unit) -> Effect Unit
+-- | @XXX some eCharts "actions" not working ("select", ...)
+-- | https://echarts.apache.org/en/api.html#echartsInstance.dispatchAction
+foreign import dispatchAction :: forall payload. EChartsInstance -> payload -> Effect Unit
 
 chart :: Options -> R.Element
 chart = echarts <<< chartWith
 
 chartWith :: Options -> Echarts
 chartWith options =
-  { option: opts options
+  { option    : opts options
 --, className : Nothing
 --, style     : Nothing
 --, theme     : Nothing
@@ -39,7 +43,8 @@ chartWith options =
 --, optsLoading: Nothing
 --, onReady    : Nothing
 --, resizable  : Nothing
-  , onEvents: getEvents options
+  , onEvents  : getEvents options
+  , ref       : refListener options
   }
     where
       getEvents (Options { onClick }) =
@@ -49,6 +54,14 @@ chartWith options =
             Nothing -> pure unit
         }
 
+      refListener (Options { onInit }) = case onInit of
+        Nothing -> pure unit
+        Just fn -> listenerFn1 (_ # fn # execOnInit)
+
+      execOnInit fn = toMaybe >>> case _ of
+        Nothing                        -> pure unit
+        Just (ref :: Record EChartRef) -> fn =<< ref.getEchartsInstance
+
 echarts :: Echarts -> R.Element
 echarts c = R2.buff $ unsafeCreateElementDynamic (unsafeCoerce eChartsClass) c []
 
@@ -167,6 +180,19 @@ data Options = Options
   , addZoom   :: Boolean
   , tooltip   :: Tooltip
   , onClick   :: Maybe (MouseEvent -> Effect Unit)
+  -- (?) `onInit` custom listener
+  --
+  --      * in addition of the already existing `onReady` native listener
+  --        which is executed on chart mount, but does not provide any arg
+  --      * the React library also contained another native listener as
+  --        `ref`, which adds the React Ref of the mounted chart
+  --      * this additional `onInit` is executed after the "Apache Echarts"
+  --        has been "initialised" (see more details [1]),
+  --        it intends to return the `eChartsInstance` used for every
+  --        library actions
+  --
+  -- [1] https://echarts.apache.org/en/api.html#echarts.init
+  , onInit    :: Maybe (EChartsInstance -> Effect Unit)
   }
 
 tooltipTriggerAxis :: Tooltip

src/Gargantext/Components/Charts/Options/Series.purs

 module Gargantext.Components.Charts.Options.Series where
 
-import Prelude (class Eq, class Show, bind, map, pure, show, ($), (+), (<<<), (<>), eq)
-
 import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, encodeJson, (.:), (~>), (:=))
 import Data.Argonaut.Core (jsonEmptyObject)
 import Data.Array (foldl)
 import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..), maybe)
+import Gargantext.Components.Charts.Options.Data (DataD1, DataD2)
+import Gargantext.Components.Charts.Options.Font (ItemStyle, Tooltip)
+import Gargantext.Components.Charts.Options.Legend (SelectedMode)
+import Gargantext.Types (class Optional)
+import Prelude (class Eq, class Show, bind, map, pure, show, ($), (+), (<<<), (<>), eq)
 import Record.Unsafe (unsafeSet)
 import Unsafe.Coerce (unsafeCoerce)
 
-import Gargantext.Types (class Optional)
-import Gargantext.Components.Charts.Options.Font (ItemStyle, Tooltip)
-import Gargantext.Components.Charts.Options.Data (DataD1, DataD2)
-
 newtype SeriesType = SeriesType String
 
 type SeriesName = String
@@ -57,13 +56,16 @@ seriesType = SeriesType <<< show
 
 -- | Scatter Dimension 2 data
 type OptionalSeries =
-  ( name       :: String
-  , symbolSize :: Number
-  , itemStyle  :: ItemStyle
+  ( name          :: String
+  , symbolSize    :: Number
+  , itemStyle     :: ItemStyle
     -- ^ Graphic style of, *emphasis* is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.
     --   https://ecomfe.github.io/echarts-doc/public/en/option.html#series-scatter.itemStyle
-  , tooltip    :: Tooltip
-
+  , tooltip       :: Tooltip
+  , emphasis      :: { itemStyle :: ItemStyle }
+  , selectedMode  :: SelectedMode
+  , select        :: { itemStyle :: ItemStyle }
+  -- ^ need "selectedMode" to be defined
   -- many more...
   )
 

src/Gargantext/Components/Charts/Options/Type.purs

@@ -14,6 +14,9 @@ import Gargantext.Types (class Optional)
 import React as R
 import Unsafe.Coerce (unsafeCoerce)
 
+-- | https://echarts.apache.org/en/api.html#echartsInstance
+foreign import data EChartsInstance :: Type
+
 newtype ChartAlign = ChartAlign String
 
 -- TODO: Maybe is not working here => use Optional
@@ -32,6 +35,7 @@ type Echarts =
 --, onReady     :: Maybe String   --  PropTypes.func,
 --, resizable   :: Maybe Boolean  -- PropTypes.bool,
   , onEvents    :: OnEvents   -- PropTypes.object
+  , ref         :: Effect Unit
   }
 
 type Option =
@@ -172,7 +176,7 @@ type Rich = {}
 -- |      https://echarts.apache.org/en/api.html#events
 type OnEvents =
   { click     :: Effect Unit
-  -- and many more...
+  -- ...
   }
 
 -- | @XXX "echarts-for-react" third party library bases on "apache-echarts"
@@ -199,5 +203,16 @@ type MouseEvent =
   , seriesName        :: String
   , seriesType        :: String
   , type              :: String
-  , value             :: String -- @WIP or Array ??
+  , value             :: String -- or Array ??
   }
+
+----
+
+-- | @XXX partial definition given by the third library author
+-- |      POJO containing a mix of ReactElement field and custom method attached
+-- |
+-- | https://github.com/hustcc/echarts-for-react#component-api--echarts-api
+type EChartRef =
+  ( getEchartsInstance :: Effect EChartsInstance
+  -- ...
+  )

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

@@ -34,11 +34,11 @@ metricsLoadView p = R.createElement metricsLoadViewCpt p []
 metricsLoadViewCpt :: forall a. Eq a => R.Component (MetricsLoadViewProps a)
 metricsLoadViewCpt = here.component "metricsLoadView" cpt
   where
-    cpt { getMetrics, loaded, path, reload, session, onClick } _ = do
+    cpt { getMetrics, loaded, path, reload, session, onClick, onInit } _ = do
       reload' <- T.useLive T.unequal reload
 
       useLoader (reload' /\ path) (getMetrics session) $ \l ->
-        loaded { path, reload, session, onClick } l
+        loaded { path, reload, session, onClick, onInit } l
 
 type MetricsWithCacheLoadViewProps res ret = (
     getMetricsHash :: Session -> ReloadPath -> Aff Hash
@@ -58,11 +58,11 @@ metricsWithCacheLoadViewCpt :: forall res ret.
                                R.Component (MetricsWithCacheLoadViewProps res ret)
 metricsWithCacheLoadViewCpt = here.component "metricsWithCacheLoadView" cpt
   where
-    cpt { getMetricsHash, handleResponse, loaded, mkRequest, path, reload, session, onClick } _ = do
+    cpt { getMetricsHash, handleResponse, loaded, mkRequest, path, reload, session, onClick, onInit } _ = do
       reload' <- T.useLive T.unequal reload
 
       useLoaderWithCacheAPI { cacheEndpoint: (getMetricsHash session)
                             , handleResponse
                             , mkRequest
                             , path: (reload' /\ path)
-                            , renderer: loaded { path, reload, session, onClick } }
+                            , renderer: loaded { path, reload, session, onClick, onInit } }

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

@@ -7,26 +7,25 @@ import Data.Generic.Rep.Eq (genericEq)
 import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
-import Reactix as R
-import Reactix.DOM.HTML as H
-import Toestand as T
-
-import Gargantext.Prelude (class Eq, bind, map, pure, ($), (==))
-
-import Gargantext.Components.Charts.Options.Color (grey)
+import Gargantext.Components.Charts.Options.Color (grey, blue, green)
 import Gargantext.Components.Charts.Options.Data (dataSerie)
 import Gargantext.Components.Charts.Options.ECharts (Options(..), chart, xAxis', yAxis')
 import Gargantext.Components.Charts.Options.Font (itemStyle, mkTooltip, templateFormatter)
+import Gargantext.Components.Charts.Options.Legend (LegendMode(..), selectedMode)
 import Gargantext.Components.Charts.Options.Series (seriesBarD1)
 import Gargantext.Components.Nodes.Corpus.Chart.Common (metricsWithCacheLoadView)
 import Gargantext.Components.Nodes.Corpus.Chart.Types (MetricsProps, Path, Props, ReloadPath)
 import Gargantext.Hooks.Loader (HashedResponse(..))
+import Gargantext.Prelude (class Eq, bind, map, pure, ($), (==))
 import Gargantext.Routes (SessionRoute(..))
 import Gargantext.Sessions (Session, get)
 import Gargantext.Types (ChartType(..))
 import Gargantext.Utils.CacheAPI as GUC
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Corpus.Chart.Histo"
@@ -62,17 +61,31 @@ instance encodeHistoMetrics :: EncodeJson HistoMetrics where
 type Loaded = HistoMetrics
 
 chartOptions :: Record MetricsProps -> HistoMetrics -> Options
-chartOptions { onClick } (HistoMetrics { dates: dates', count: count'}) = Options
+chartOptions { onClick, onInit } (HistoMetrics { dates: dates', count: count'}) = Options
   { mainTitle : "Histogram"
   , subTitle  : "Distribution of publications over time"
   , xAxis     : xAxis' dates'
   , yAxis     : yAxis' { position: "left", show: true, min:0}
   , addZoom   : true
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
-  , series    : [seriesBarD1 {name: "Number of publication / year"} $
-                 map (\n -> dataSerie {value: n, itemStyle : itemStyle {color:grey}}) count']
+  , series
   , onClick
+  , onInit
   }
+    where
+      mapSeriesBar n = dataSerie
+        { value: n
+        , itemStyle: itemStyle { color: grey }
+        , emphasis: { itemStyle: itemStyle { color: blue } }
+        -- @XXX "select" action not working
+        -- , selectedMode: selectedMode Single
+        , select: { itemStyle: itemStyle { color: green }}
+        }
+
+      series =
+        [ seriesBarD1 {name: "Number of publication / year"} $
+          map mapSeriesBar count'
+        ]
 
 getMetricsHash :: Session -> ReloadPath -> Aff String
 getMetricsHash session (_ /\ { corpusId, limit, listId, tabType }) = do
@@ -97,7 +110,7 @@ histo props = R.createElement histoCpt props []
 histoCpt :: R.Component Props
 histoCpt = here.component "histo" cpt
   where
-    cpt { path, session, onClick } _ = do
+    cpt { path, session, onClick, onInit } _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -109,6 +122,7 @@ histoCpt = here.component "histo" cpt
         , reload
         , session
         , onClick
+        , onInit
         }
 
 loaded :: Record MetricsProps -> HistoMetrics -> R.Element

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

@@ -74,7 +74,7 @@ instance decodeMetrics :: DecodeJson Metrics where
 type Loaded  = Array Metric
 
 scatterOptions :: Record MetricsProps -> Array Metric -> Options
-scatterOptions { onClick } metrics' = Options
+scatterOptions { onClick, onInit } metrics' = Options
   { mainTitle : "Ngrams Selection Metrics"
   , subTitle  : "Local metrics (Inc/Exc, Spe/Gen), Global metrics (TFICF maillage)"
   , xAxis     : xAxis { min: -1 }
@@ -83,6 +83,7 @@ scatterOptions { onClick } metrics' = Options
   , addZoom   : false
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
   , onClick
+  , onInit
   }
   where
     metric2map :: Array Metric -> Map TermList (Array Metric)
@@ -127,7 +128,7 @@ metrics props = R.createElement metricsCpt props []
 metricsCpt :: R.Component Props
 metricsCpt = here.component "etrics" cpt
   where
-    cpt {path, session, onClick } _ = do
+    cpt {path, session, onClick, onInit } _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -139,6 +140,7 @@ metricsCpt = here.component "etrics" cpt
         , reload
         , session
         , onClick
+        , onInit
         }
 
 

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

@@ -69,7 +69,7 @@ instance encodeHistoMetrics :: EncodeJson HistoMetrics where
 type Loaded = HistoMetrics
 
 chartOptionsBar :: Record MetricsProps -> HistoMetrics -> Options
-chartOptionsBar { onClick } (HistoMetrics { dates: dates', count: count'}) = Options
+chartOptionsBar { onClick, onInit } (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'
@@ -78,10 +78,11 @@ chartOptionsBar { onClick } (HistoMetrics { dates: dates', count: count'}) = Opt
   , addZoom   : false
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
   , onClick
+  , onInit
   }
 
 chartOptionsPie :: Record MetricsProps -> HistoMetrics -> Options
-chartOptionsPie { onClick } (HistoMetrics { dates: dates', count: count'}) = Options
+chartOptionsPie { onClick, onInit } (HistoMetrics { dates: dates', count: count'}) = Options
   { mainTitle : "Pie"
   , subTitle  : "Distribution by MapTerm"
   , xAxis     : xAxis' []
@@ -91,6 +92,7 @@ chartOptionsPie { onClick } (HistoMetrics { dates: dates', count: count'}) = Opt
   , addZoom   : false
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
   , onClick
+  , onInit
   }
 
 getMetricsHash :: Session -> ReloadPath -> Aff String
@@ -116,7 +118,7 @@ pie props = R.createElement pieCpt props []
 pieCpt :: R.Component Props
 pieCpt = here.component "pie" cpt
   where
-    cpt { path, session, onClick } _ = do
+    cpt { path, session, onClick, onInit } _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -128,6 +130,7 @@ pieCpt = here.component "pie" cpt
         , reload
         , session
         , onClick
+        , onInit
         }
 
 loadedPie :: Record MetricsProps -> HistoMetrics -> R.Element
@@ -145,7 +148,7 @@ bar props = R.createElement barCpt props []
 barCpt :: R.Component Props
 barCpt = here.component "bar" cpt
   where
-    cpt {path, session, onClick} _ = do
+    cpt {path, session, onClick, onInit} _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -157,6 +160,7 @@ barCpt = here.component "bar" cpt
          , reload
          , session
          , onClick
+         , onInit
          }
 
 loadedBar :: Record MetricsProps -> Loaded -> R.Element

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

@@ -7,8 +7,9 @@ import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Ord (genericCompare)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..), fromMaybe)
+import Data.Nullable (Nullable)
 import Effect (Effect)
-import Gargantext.Components.Charts.Options.Type (MouseEvent)
+import Gargantext.Components.Charts.Options.Type (EChartsInstance, MouseEvent)
 import Gargantext.Components.Nodes.Corpus.Chart.Histo (histo)
 import Gargantext.Components.Nodes.Corpus.Chart.Metrics (metrics)
 import Gargantext.Components.Nodes.Corpus.Chart.Pie (pie)
@@ -68,39 +69,40 @@ type Params =
   -- optinal params
   , limit    :: Maybe Int
   , listId   :: Maybe Int
-  , onClick :: Maybe (MouseEvent -> Effect Unit)
+  , onClick  :: Maybe (MouseEvent -> Effect Unit)
+  , onInit   :: Maybe (EChartsInstance -> Effect Unit)
   )
 
 render :: PredefinedChart -> Record Params -> R.Element
-render CDocsHistogram { corpusId, listId, session, onClick } = histo { path, session, onClick }
+render CDocsHistogram { corpusId, listId, session, onClick, onInit } = histo { path, session, onClick, onInit }
   where
     path = { corpusId
            , listId: fromMaybe 0 listId
            , limit: Nothing
            , tabType: TabCorpus TabDocs
            }
-render CAuthorsPie { corpusId, listId, session, onClick } = pie { path, session, onClick }
+render CAuthorsPie { corpusId, listId, session, onClick, onInit } = pie { path, session, onClick, onInit }
   where
     path = { corpusId
            , listId: fromMaybe 0 listId
            , limit: Nothing
            , tabType: TabCorpus (TabNgramType $ modeTabType Authors)
            }
-render CInstitutesTree { corpusId, limit, listId, session, onClick } = tree { path, session, onClick }
+render CInstitutesTree { corpusId, limit, listId, session, onClick, onInit } = tree { path, session, onClick, onInit }
   where
     path = { corpusId
            , limit
            , listId: fromMaybe 0 listId
            , tabType: TabCorpus (TabNgramType $ modeTabType Institutes)
            }
-render CTermsMetrics { corpusId, limit, listId, session, onClick } = metrics { path, session, onClick }
+render CTermsMetrics { corpusId, limit, listId, session, onClick, onInit } = metrics { path, session, onClick, onInit }
   where
     path = { corpusId
            , limit
            , listId: fromMaybe 0 listId
            , tabType: TabCorpus (TabNgramType $ modeTabType Terms)
            }
-render CSourcesBar { corpusId, limit, listId, session, onClick } = metrics { path, session, onClick }
+render CSourcesBar { corpusId, limit, listId, session, onClick, onInit } = metrics { path, session, onClick, onInit }
   where
     path = { corpusId
            , limit

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

@@ -43,7 +43,7 @@ instance encodeMetrics :: EncodeJson Metrics where
 type Loaded  = Array TreeNode
 
 scatterOptions :: Record MetricsProps -> Array TreeNode -> Options
-scatterOptions { onClick } nodes = Options
+scatterOptions { onClick, onInit } nodes = Options
   { mainTitle : "Tree"
   , subTitle  : "Tree Sub Title"
   , xAxis     : xAxis' []
@@ -52,6 +52,7 @@ scatterOptions { onClick } nodes = Options
   , addZoom   : false
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
   , onClick
+  , onInit
 -- TODO improve the formatter:
 -- https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-obama
 
@@ -80,7 +81,7 @@ tree props = R.createElement treeCpt props []
 treeCpt :: R.Component Props
 treeCpt = here.component "tree" cpt
   where
-    cpt {path, session, onClick} _ = do
+    cpt {path, session, onClick, onInit} _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -92,6 +93,7 @@ treeCpt = here.component "tree" cpt
         , reload
         , session
         , onClick
+        , onInit
         }
 
 loaded :: Record MetricsProps -> Loaded -> R.Element

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

@@ -3,7 +3,7 @@ module Gargantext.Components.Nodes.Corpus.Chart.Types where
 import Data.Maybe (Maybe)
 import Data.Tuple (Tuple)
 import Effect (Effect)
-import Gargantext.Components.Charts.Options.Type (MouseEvent)
+import Gargantext.Components.Charts.Options.Type (EChartsInstance, MouseEvent)
 import Gargantext.Prelude (Unit)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (TabType)
@@ -17,9 +17,10 @@ type Path = (
   )
 
 type Props = (
-    path :: Record Path
+    path    :: Record Path
   , session :: Session
   , onClick :: Maybe (MouseEvent -> Effect Unit)
+  , onInit  :: Maybe (EChartsInstance -> Effect Unit)
   )
 
 type MetricsProps = (

src/Gargantext/Components/Nodes/Corpus/Dashboard.purs

@@ -241,6 +241,7 @@ renderChartCpt = here.component "renderChart" cpt
                  , listId: Just defaultListId
                  , session
                  , onClick: Nothing
+                 , onInit: Nothing
                  }
 
     -- aSchool school = H.div {className: "col-md-4 content"} [ chart $ focus school ]

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

@@ -161,7 +161,7 @@ ngramsViewCpt = here.component "ngramsView" cpt where
         ]
         charts params _        = [ chart params mode ]
 
-        chart path Authors    = pie     { path, session, onClick: Nothing }
-        chart path Institutes = tree    { path, session, onClick: Nothing }
-        chart path Sources    = bar     { path, session, onClick: Nothing }
-        chart path Terms      = metrics { path, session, onClick: Nothing }
+        chart path Authors    = pie     { path, session, onClick: Nothing, onInit: Nothing }
+        chart path Institutes = tree    { path, session, onClick: Nothing, onInit: Nothing }
+        chart path Sources    = bar     { path, session, onClick: Nothing, onInit: Nothing }
+        chart path Terms      = metrics { path, session, onClick: Nothing, onInit: Nothing }

src/Gargantext/Components/Nodes/Texts.purs

 module Gargantext.Components.Nodes.Texts where
 
 import Gargantext.Prelude
-import Prelude
 
 import DOM.Simple.Console (log2)
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
+import Data.Symbol (SProxy(..))
 import Data.Tuple.Nested ((/\))
 import Effect.Aff (launchAff_)
+import Gargantext.Components.Charts.Options.ECharts (dispatchAction)
+import Gargantext.Components.Charts.Options.Type (EChartsInstance)
 import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.DocsTable.Types (Year)
 import Gargantext.Components.NgramsTable.Loader (clearCache)
@@ -23,13 +25,12 @@ import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Table as Table
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Sessions (WithSession, WithSessionContext, Session, sessionId, getCacheState)
+import Gargantext.Sessions (WithSession, Session, getCacheState)
 import Gargantext.Types (CTabNgramType(..), ListId, NodeID, SidePanelState(..), TabSubType(..), TabType(..))
 import Gargantext.Utils.Reactix as R2
-import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Reactix.DOM.HTML as H
-import Record as Record
+import Record (set)
 import Toestand as T
 
 here :: R2.Here
@@ -87,9 +88,7 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
 
       yearFilter <- T.useBox (Nothing :: Maybe Year)
 
-      R.useEffectOnce' do
-        T.listen (\{ new } -> log2 "filter" new) yearFilter
-
+      eChartsInstance <- T.useBox (Nothing :: Maybe EChartsInstance)
 
       R.useEffectOnce' $ do
         T.listen (\{ new } -> afterCacheStateChange new) cacheState
@@ -116,6 +115,7 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
                    , sidePanel
                    , sidePanelState
                    , yearFilter
+                   , eChartsInstance
                    }
             ]
       where
@@ -139,14 +139,15 @@ modeTabType MoreLikeFav    = CTabAuthors  -- TODO
 modeTabType MoreLikeTrash  = CTabSources  -- TODO
 
 type TabsProps =
-  ( cacheState     :: T.Box LT.CacheState
-  , corpusData     :: CorpusData
-  , corpusId       :: NodeID
-  , frontends      :: Frontends
-  , session        :: Session
-  , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
-  , sidePanelState :: T.Box SidePanelState
-  , yearFilter     :: T.Box (Maybe Year)
+  ( cacheState      :: T.Box LT.CacheState
+  , corpusData      :: CorpusData
+  , corpusId        :: NodeID
+  , frontends       :: Frontends
+  , session         :: Session
+  , sidePanel       :: T.Box (Maybe (Record TT.SidePanel))
+  , sidePanelState  :: T.Box SidePanelState
+  , yearFilter      :: T.Box (Maybe Year)
+  , eChartsInstance :: T.Box (Maybe EChartsInstance)
   )
 
 tabs :: Record TabsProps -> R.Element
@@ -155,9 +156,23 @@ tabs props = R.createElement tabsCpt props []
 tabsCpt :: R.Component TabsProps
 tabsCpt = here.component "tabs" cpt
   where
-    cpt { cacheState, corpusId, corpusData, frontends, session, sidePanel, sidePanelState, yearFilter } _ = do
-      let path = initialPath
-      let onClick = Just \{ name } -> T.write_ (Just name) (yearFilter)
+    cpt { cacheState, corpusId, corpusData, frontends, session, sidePanel, sidePanelState, yearFilter, eChartsInstance } _ = do
+
+      let
+        path = initialPath
+
+        onInit = Just \i -> T.write_ (Just i) eChartsInstance
+
+        onClick = Just \opts@{ name } -> do
+          T.write_ (Just name) yearFilter
+          T.read eChartsInstance >>= case _ of
+            Nothing -> pure unit
+            Just i  -> do
+              -- @XXX due to lack of support for "echart.select" action,
+              --      have to manually rely on a set/unset selection
+              --      targeting the "echart.emphasis" action
+              dispatchAction i { type: "downplay" }
+              dispatchAction i $ set (SProxy :: SProxy "type") "highlight" opts
 
       activeTab <- T.useBox 0
 
@@ -165,7 +180,7 @@ tabsCpt = here.component "tabs" cpt
           activeTab
         , tabs: [
             "Documents"       /\ R.fragment [
-                histo { path, session, onClick }
+                histo { path, session, onClick, onInit }
               , docView' path TabDocs
               ]
           , "Trash"           /\ docView' path TabTrash