[DOC] Interactive chart to filter documents

* Issue #303

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

@@ -3,3 +3,31 @@
 var ReactEcharts = require("echarts-for-react");
 
 exports.eChartsClass = ReactEcharts.default;
+
+/**
+ * @XXX "echarts-for-react" unsuitable to proper PureScript implementation
+ *       regarding event listeners
+ * @name listenerFn1
+ * @param {function} fn
+ * @returns
+ */
+exports.listenerFn1 = function(fn) {
+  return function() {
+    var args = Array.prototype.slice.call(arguments);
+    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

@@ -4,26 +4,34 @@ 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)
 import Gargantext.Components.Charts.Options.Font (IconOptions(..), Shape(..), TextStyle, chartFontStyle, chartFontWeight, icon, mkTooltip, Tooltip, mkToolBox)
 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, 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
-import Gargantext.Utils.Reactix as R2
+import Record.Extra as RX
 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 <<< opts
+chart = echarts <<< chartWith
 
-chartWith :: Option -> Echarts
-chartWith option =
-  { option
+chartWith :: Options -> Echarts
+chartWith options =
+  { option    : opts options
 --, className : Nothing
 --, style     : Nothing
 --, theme     : Nothing
@@ -35,8 +43,24 @@ chartWith option =
 --, optsLoading: Nothing
 --, onReady    : Nothing
 --, resizable  : Nothing
---, onEvents   : Nothing
+  , onEvents  : getEvents options
+  , ref       : refListener options
   }
+    where
+      getEvents (Options { onClick }) =
+        { click: listenerFn1 \e -> case onClick of
+            -- sanitize parsing (see MouseEvent comment)
+            Just fn -> RX.pick (e :: MouseEvent) # fn
+            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 []
@@ -155,6 +179,20 @@ data Options = Options
   , series    :: Array Series
   , 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...
   )
 
@@ -219,4 +221,3 @@ treeLeaf n v = TreeNode { name : n, value : v, children : []}
 -- | TODO
 -- https://ecomfe.github.io/echarts-examples/public/data/asset/data/life-expectancy-table.json
 -- https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter3D-dataset&gl=1
-

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

@@ -2,6 +2,8 @@ module Gargantext.Components.Charts.Options.Type where
 
 import Prelude
 
+import Data.Nullable (Nullable)
+import Effect (Effect)
 import Gargantext.Components.Charts.Options.Color (Color)
 import Gargantext.Components.Charts.Options.Data (DataLegend)
 import Gargantext.Components.Charts.Options.Font (TextStyle, Tooltip, ToolBox)
@@ -12,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
@@ -29,7 +34,8 @@ type Echarts =
 --, optsLoading :: Maybe OptsLoading --  PropTypes.object,
 --, onReady     :: Maybe String   --  PropTypes.func,
 --, resizable   :: Maybe Boolean  -- PropTypes.bool,
---, onEvents    :: Maybe String   -- PropTypes.object
+  , onEvents    :: OnEvents   -- PropTypes.object
+  , ref         :: Effect Unit
   }
 
 type Option =
@@ -160,3 +166,53 @@ type AxisLabel =
   }
 
 type Rich = {}
+
+---
+
+-- | @XXX "echarts-for-react" third party library does not have an event
+-- |      dictionary
+-- |      these values had been picked from what we gather in the dist file
+-- |      "echarts/dist/echarts.common.js" and
+-- |      https://echarts.apache.org/en/api.html#events
+type OnEvents =
+  { click     :: Effect Unit
+  -- ...
+  }
+
+-- | @XXX "echarts-for-react" third party library bases on "apache-echarts"
+-- |      does not have strongly typed signature, nor determined arity
+-- |      (actual runtime event contains more key than what their docs describe)
+-- |
+-- | https://echarts.apache.org/en/api.html#events.Mouse%20events
+type MouseEvent =
+  { borderColor       :: Nullable String
+  , color             :: String
+  , componentIndex    :: Int
+  , componentSubType  :: String
+  , componentTyp      :: String
+  -- , data           ::  -- Object
+  , dataIndex         :: Int
+  , dataType          :: Nullable String
+  -- , dimensionNames :: -- Array
+  -- , encore         :: -- Object
+  -- , event          :: -- instanceof Event
+  -- , marker         :: -- String
+  , name              :: String
+  , seriesId          :: Nullable String
+  , seriesIndex       :: Int
+  , seriesName        :: String
+  , seriesType        :: String
+  , type              :: String
+  , 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/DocsTable.purs

 -- TODO: this module should be replaced by FacetsTable
 module Gargantext.Components.DocsTable where
 
-import Gargantext.Prelude
-  ( class Ord, Unit, bind, const, discard, identity, mempty
-  , otherwise, pure, show, unit, ($), (/=), (<$>), (<<<), (<>), (==) )
+import Prelude
+
+import DOM.Simple.Console (log2)
+import DOM.Simple.Event as DE
 import Data.Argonaut (class EncodeJson, jsonEmptyObject, (:=), (~>))
 import Data.Array as A
 import Data.Lens ((^.))
@@ -16,34 +17,31 @@ import Data.Set as Set
 import Data.String as Str
 import Data.Symbol (SProxy(..))
 import Data.Tuple (Tuple(..))
-import DOM.Simple.Console (log2)
-import DOM.Simple.Event as DE
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff_)
 import Effect.Class (liftEffect)
-import Reactix as R
-import Reactix.DOM.HTML as H
-import Toestand as T
-
 import Gargantext.Components.Category (rating)
 import Gargantext.Components.Category.Types (Star(..))
-import Gargantext.Components.DocsTable.Types
-  ( DocumentsView(..), Hyperdata(..), LocalUserScore, Query, Response(..), sampleData )
-import Gargantext.Components.Table.Types as TT
+import Gargantext.Components.DocsTable.Types (DocumentsView(..), Hyperdata(..), LocalUserScore, Query, Response(..), Year, sampleData)
 import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Components.Table as TT
+import Gargantext.Components.Table.Types as TT
 import Gargantext.Ends (Frontends, url)
 import Gargantext.Hooks.Loader (useLoader, useLoaderWithCacheAPI, HashedResponse(..))
-import Gargantext.Routes as Routes
+import Gargantext.Prelude (class Ord, Unit, bind, const, discard, identity, mempty, otherwise, pure, show, unit, ($), (/=), (<$>), (<<<), (<>), (==))
 import Gargantext.Routes (SessionRoute(NodeAPI))
+import Gargantext.Routes as Routes
 import Gargantext.Sessions (Session, sessionId, get, delete)
 import Gargantext.Types (ListId, NodeID, NodeType(..), OrderBy(..), SidePanelState(..), TableResult, TabSubType, TabType, showTabType')
 import Gargantext.Utils (sortWith)
 import Gargantext.Utils.CacheAPI as GUC
-import Gargantext.Utils.QueryString (joinQueryStrings, mQueryParamS, queryParam, queryParamS)
+import Gargantext.Utils.QueryString (joinQueryStrings, mQueryParam, mQueryParamS, queryParam, queryParamS)
 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.DocsTable"
@@ -70,7 +68,8 @@ type CommonProps =
   , tabType        :: TabType
   -- ^ tabType is not ideal here since it is too much entangled with tabs and
   -- ngramtable. Let's see how this evolves.  )
-  , totalRecords  :: Int
+  , totalRecords   :: Int
+  , yearFilter     :: T.Box (Maybe Year)
   )
 
 type LayoutProps =
@@ -126,6 +125,7 @@ docViewCpt = here.component "docView" cpt where
                 , sidePanelState
                 , tabType
                 , totalRecords
+                , yearFilter
                 }
       , params
       , query
@@ -151,6 +151,7 @@ docViewCpt = here.component "docView" cpt where
                        , sidePanelState
                        , tabType
                        , totalRecords
+                       , yearFilter
                        } [] ] ] ]
 
 type SearchBarProps =
@@ -207,12 +208,13 @@ mock :: Boolean
 mock = false
 
 type PageParams = {
-    listId    :: Int
-  , mCorpusId :: Maybe Int
-  , nodeId    :: Int
-  , tabType   :: TabType
-  , query     :: Query
-  , params    :: TT.Params
+    listId      :: Int
+  , mCorpusId   :: Maybe Int
+  , nodeId      :: Int
+  , tabType     :: TabType
+  , query       :: Query
+  , params      :: TT.Params
+  , yearFilter  :: Maybe Year
   }
 
 getPageHash :: Session -> PageParams -> Aff String
@@ -247,6 +249,12 @@ filterDocs query docs = A.filter filterFunc docs
     filterFunc (Response { hyperdata: Hyperdata { title } }) =
       isJust $ Str.indexOf (Str.Pattern $ Str.toLower query) $ Str.toLower title
 
+filterDocsByYear :: Year -> Array Response -> Array Response
+filterDocsByYear year docs = A.filter filterFunc docs
+  where
+    filterFunc :: Response -> Boolean
+    filterFunc (Response { hyperdata: Hyperdata { pub_year } }) = eq year $ show pub_year
+
 pageLayout :: R2.Component PageLayoutProps
 pageLayout = R.createElement pageLayoutCpt
 
@@ -261,19 +269,30 @@ pageLayoutCpt = here.component "pageLayout" cpt where
             , query
             , session
             , sidePanel
-            , tabType } _ = do
+            , tabType
+            , yearFilter
+            } _ = do
     cacheState' <- T.useLive T.unequal cacheState
+    yearFilter' <- T.useLive T.unequal yearFilter
 
-    let path = { listId, mCorpusId, nodeId, params, query, tabType }
+    let path = { listId, mCorpusId, nodeId, params, query, tabType, yearFilter: yearFilter' }
         handleResponse :: HashedResponse (TableResult Response) -> Tuple Int (Array DocumentsView)
         handleResponse (HashedResponse { hash, value: res }) = ret
           where
-            docs = res2corpus <$> filterDocs query res.docs
+
+            filters = filterDocs query
+                    >>> \res' -> case yearFilter' of
+                      Nothing -> res'
+                      Just year -> filterDocsByYear year res'
+
+            docs = res2corpus <$> filters res.docs
+
             ret = if mock then
                       --Tuple 0 (take limit $ drop offset sampleData)
                       Tuple 0 sampleData
                     else
                       Tuple res.count docs
+
     case cacheState' of
       NT.CacheOn -> do
         let paint (Tuple count docs) = page { documents: docs
@@ -529,9 +548,10 @@ tableRouteWithPage :: forall row.
                       , params :: TT.Params
                       , query ::  Query
                       , tabType :: TabType
+                      , yearFilter :: Maybe Year
                       | row } -> SessionRoute
-tableRouteWithPage { listId, nodeId, params: { limit, offset, orderBy, searchType }, query, tabType } =
-  NodeAPI Node (Just nodeId) $ "table" <> joinQueryStrings [tt, lst, lmt, odb, ofs, st, q]
+tableRouteWithPage { listId, nodeId, params: { limit, offset, orderBy, searchType }, query, tabType, yearFilter } =
+  NodeAPI Node (Just nodeId) $ "table" <> joinQueryStrings [tt, lst, lmt, odb, ofs, st, q, y]
   where
     lmt = queryParam "limit" limit
     lst = queryParam "list" listId
@@ -540,6 +560,7 @@ tableRouteWithPage { listId, nodeId, params: { limit, offset, orderBy, searchTyp
     st  = queryParam "searchType" searchType
     tt  = queryParamS "tabType" (showTabType' tabType)
     q   = queryParamS "query" query
+    y   = mQueryParam "year" yearFilter
 
 deleteAllDocuments :: Session -> Int -> Aff (Array Int)
 deleteAllDocuments session = delete session <<< documentsRoute

src/Gargantext/Components/DocsTable/Types.purs

@@ -105,6 +105,7 @@ instance decodeResponse :: DecodeJson Response where
 type LocalCategories = Map Int Category
 type LocalUserScore  = Map Int Star
 type Query = String
+type Year = String
 
 ---------------------------------------------------------
 sampleData' :: DocumentsView

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

@@ -2,31 +2,32 @@
 module Gargantext.Components.Nodes.Annuaire.Tabs where
 
 import Prelude hiding (div)
-import Effect.Aff (Aff)
+
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
 import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
-import Reactix as R
-import Record as Record
-import Record.Extra as RX
-import Toestand as T
-
+import Effect.Aff (Aff)
 import Gargantext.AsyncTasks as GAT
 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.Texts.Types as TextsT
-import Gargantext.Components.Tab as Tab
 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.Nodes.Texts.Types as TextsT
+import Gargantext.Components.Tab as Tab
 import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), SidePanelState, TabType(..), TabSubType(..))
 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
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Annuaire.User.Contacts.Tabs"
@@ -71,9 +72,10 @@ tabsCpt :: R.Component TabsProps
 tabsCpt = here.component "tabs" cpt where
   cpt props _ = do
     activeTab <- T.useBox 0
+    yearFilter <- T.useBox (Nothing :: Maybe Year)
 
-    pure $ Tab.tabs { activeTab, tabs: tabs' props }
-  tabs' props@{ sidePanel, sidePanelState } =
+    pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter props }
+  tabs' yearFilter props@{ sidePanel, sidePanelState } =
     [ "Documents"     /\ docs
     , "Patents"       /\ ngramsView (viewProps Patents)
     , "Books"         /\ ngramsView (viewProps Books)
@@ -92,6 +94,7 @@ tabsCpt = here.component "tabs" cpt where
         , showSearch: true
         , tabType: TabPairing TabDocs
         , totalRecords
+        , yearFilter
         }
 
 type DTCommon =

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

@@ -2,27 +2,28 @@
 module Gargantext.Components.Nodes.Annuaire.User.Contacts.Tabs where
 
 import Prelude hiding (div)
+
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
 import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
-import Reactix as R
-import Toestand as T
-
 import Gargantext.AsyncTasks as GAT
 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.Tab as Tab
 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
 import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), SidePanelState, TabType(..), TabSubType(..))
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
+import Reactix as R
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Annuaire.User.Contacts.Tabs"
@@ -78,10 +79,11 @@ tabsCpt = here.component "tabs" cpt
         , sidePanelState
         , reloadForest } _ = do
       activeTab <- T.useBox 0
+      yearFilter <- T.useBox (Nothing :: Maybe Year)
 
-      pure $ Tab.tabs { activeTab, tabs: tabs' }
+      pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter }
       where
-        tabs' =
+        tabs' yearFilter =
           [ "Documents"     /\ docs
           , "Patents"       /\ ngramsView patentsView []
           , "Books"         /\ ngramsView booksView []
@@ -127,6 +129,7 @@ tabsCpt = here.component "tabs" cpt
               , sidePanelState
               , tabType: TabPairing TabDocs
               , totalRecords
+              , yearFilter
               }
 
 

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 } _ = 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 } 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 } _ = 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 } }
+                            , 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"
@@ -61,16 +60,32 @@ instance encodeHistoMetrics :: EncodeJson HistoMetrics where
 
 type Loaded = HistoMetrics
 
-chartOptions :: HistoMetrics -> Options
-chartOptions (HistoMetrics { dates: dates', count: count'}) = Options
+chartOptions :: Record MetricsProps -> HistoMetrics -> 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
@@ -95,7 +110,7 @@ histo props = R.createElement histoCpt props []
 histoCpt :: R.Component Props
 histoCpt = here.component "histo" cpt
   where
-    cpt { path, session } _ = do
+    cpt { path, session, onClick, onInit } _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -106,13 +121,15 @@ histoCpt = here.component "histo" cpt
         , path
         , reload
         , session
+        , onClick
+        , onInit
         }
 
 loaded :: Record MetricsProps -> HistoMetrics -> R.Element
-loaded { path, reload, session } l =
+loaded p@{ path, reload, session } l =
   H.div {} [
   {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: Histo, path, reload, session }
-  , -} chart $ chartOptions l
+  , -} chart $ chartOptions p l
   ]
   -- TODO: parametrize ngramsType above

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

@@ -73,8 +73,8 @@ instance decodeMetrics :: DecodeJson Metrics where
 
 type Loaded  = Array Metric
 
-scatterOptions :: Array Metric -> Options
-scatterOptions metrics' = Options
+scatterOptions :: Record MetricsProps -> Array Metric -> 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 }
@@ -82,6 +82,8 @@ scatterOptions metrics' = Options
   , series    : map2series $ metric2map metrics'
   , addZoom   : false
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
+  , onClick
+  , onInit
   }
   where
     metric2map :: Array Metric -> Map TermList (Array Metric)
@@ -126,7 +128,7 @@ metrics props = R.createElement metricsCpt props []
 metricsCpt :: R.Component Props
 metricsCpt = here.component "etrics" cpt
   where
-    cpt {path, session} _ = do
+    cpt {path, session, onClick, onInit } _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -137,13 +139,15 @@ metricsCpt = here.component "etrics" cpt
         , path
         , reload
         , session
+        , onClick
+        , onInit
         }
 
 
 loaded :: Record MetricsProps -> Loaded -> R.Element
-loaded { path, reload, session } loaded' =
+loaded p@{ path, reload, session } loaded' =
   H.div {} [
   {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: Scatter, path, reload, session }
-  , -} chart $ scatterOptions loaded'
+  , -} chart $ scatterOptions p loaded'
   ]

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

@@ -68,8 +68,8 @@ instance encodeHistoMetrics :: EncodeJson HistoMetrics where
 
 type Loaded = HistoMetrics
 
-chartOptionsBar :: HistoMetrics -> Options
-chartOptionsBar (HistoMetrics { dates: dates', count: count'}) = Options
+chartOptionsBar :: Record MetricsProps -> HistoMetrics -> 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'
@@ -77,10 +77,12 @@ chartOptionsBar (HistoMetrics { dates: dates', count: count'}) = Options
   , series    : [seriesBarD1 {name: "Number of publication / year"} $ map (\n -> dataSerie {name: "", itemStyle: itemStyle {color:blue}, value: n }) count']
   , addZoom   : false
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
+  , onClick
+  , onInit
   }
 
-chartOptionsPie :: HistoMetrics -> Options
-chartOptionsPie (HistoMetrics { dates: dates', count: count'}) = Options
+chartOptionsPie :: Record MetricsProps -> HistoMetrics -> Options
+chartOptionsPie { onClick, onInit } (HistoMetrics { dates: dates', count: count'}) = Options
   { mainTitle : "Pie"
   , subTitle  : "Distribution by MapTerm"
   , xAxis     : xAxis' []
@@ -89,6 +91,8 @@ chartOptionsPie (HistoMetrics { dates: dates', count: count'}) = Options
   -- , series    : [seriesBarD1 {name: "Number of publication / year"} $ map (\n -> dataSerie {name: "", value: n }) count']
   , addZoom   : false
   , tooltip   : mkTooltip { formatter: templateFormatter "{b0}" }
+  , onClick
+  , onInit
   }
 
 getMetricsHash :: Session -> ReloadPath -> Aff String
@@ -114,7 +118,7 @@ pie props = R.createElement pieCpt props []
 pieCpt :: R.Component Props
 pieCpt = here.component "pie" cpt
   where
-    cpt { path, session } _ = do
+    cpt { path, session, onClick, onInit } _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -125,14 +129,16 @@ pieCpt = here.component "pie" cpt
         , path
         , reload
         , session
+        , onClick
+        , onInit
         }
 
 loadedPie :: Record MetricsProps -> HistoMetrics -> R.Element
-loadedPie { path, reload, session } loaded =
+loadedPie p@{ path, reload, session } loaded =
   H.div {} [
   {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: ChartPie, path, reload, session }
-  , -} chart $ chartOptionsPie loaded
+  , -} chart $ chartOptionsPie p loaded
   ]
 
 
@@ -142,7 +148,7 @@ bar props = R.createElement barCpt props []
 barCpt :: R.Component Props
 barCpt = here.component "bar" cpt
   where
-    cpt {path, session} _ = do
+    cpt {path, session, onClick, onInit} _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -153,12 +159,14 @@ barCpt = here.component "bar" cpt
          , path
          , reload
          , session
+         , onClick
+         , onInit
          }
 
 loadedBar :: Record MetricsProps -> Loaded -> R.Element
-loadedBar { path, reload, session } loaded =
+loadedBar p@{ path, reload, session } loaded =
   H.div {} [
   {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: ChartBar, path, reload, session }
-  , -} chart $ chartOptionsBar loaded
+  , -} chart $ chartOptionsBar p loaded
   ]

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

 module Gargantext.Components.Nodes.Corpus.Chart.Predefined where
 
+import Gargantext.Prelude
+
 import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, encodeJson)
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Ord (genericCompare)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..), fromMaybe)
-import Reactix as R
-
-import Gargantext.Prelude
-import Gargantext.Components.Nodes.Corpus.Chart.Histo   (histo)
+import Data.Nullable (Nullable)
+import Effect (Effect)
+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)
-import Gargantext.Components.Nodes.Corpus.Chart.Tree    (tree)
+import Gargantext.Components.Nodes.Corpus.Chart.Pie (pie)
+import Gargantext.Components.Nodes.Corpus.Chart.Tree (tree)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (NodeID, Mode(..), TabSubType(..), TabType(..), modeTabType)
+import Reactix as R
 
 
 data PredefinedChart =
@@ -66,45 +69,43 @@ type Params =
   -- optinal params
   , limit    :: Maybe Int
   , listId   :: Maybe Int
+  , onClick  :: Maybe (MouseEvent -> Effect Unit)
+  , onInit   :: Maybe (EChartsInstance -> Effect Unit)
   )
 
 render :: PredefinedChart -> Record Params -> R.Element
-render CDocsHistogram { corpusId, listId, session } = histo { path, session }
+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 } = pie { path, session }
+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 } = tree { path, session }
+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 } = metrics { path, session }
+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 } = metrics { path, session }
+render CSourcesBar { corpusId, limit, listId, session, onClick, onInit } = metrics { path, session, onClick, onInit }
   where
     path = { corpusId
            , limit
            , listId: fromMaybe 0 listId
            , tabType: TabCorpus (TabNgramType $ modeTabType Sources)
            }
-
-
-
-

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

@@ -42,8 +42,8 @@ instance encodeMetrics :: EncodeJson Metrics where
 
 type Loaded  = Array TreeNode
 
-scatterOptions :: Array TreeNode -> Options
-scatterOptions nodes = Options
+scatterOptions :: Record MetricsProps -> Array TreeNode -> Options
+scatterOptions { onClick, onInit } nodes = Options
   { mainTitle : "Tree"
   , subTitle  : "Tree Sub Title"
   , xAxis     : xAxis' []
@@ -51,6 +51,8 @@ scatterOptions nodes = Options
   , series    : [ mkTree TreeMap nodes]
   , 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
 
@@ -79,7 +81,7 @@ tree props = R.createElement treeCpt props []
 treeCpt :: R.Component Props
 treeCpt = here.component "tree" cpt
   where
-    cpt {path, session} _ = do
+    cpt {path, session, onClick, onInit} _ = do
       reload <- T.useBox T2.newReload
 
       pure $ metricsWithCacheLoadView {
@@ -90,12 +92,14 @@ treeCpt = here.component "tree" cpt
         , path
         , reload
         , session
+        , onClick
+        , onInit
         }
 
 loaded :: Record MetricsProps -> Loaded -> R.Element
-loaded { path, reload, session } loaded' =
+loaded p@{ path, reload, session } loaded' =
   H.div {} [
   {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: ChartTree, path, reload, session }
-  , -} chart (scatterOptions loaded')
+  , -} chart (scatterOptions p loaded')
   ]

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

@@ -2,7 +2,9 @@ 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 (EChartsInstance, MouseEvent)
+import Gargantext.Prelude (Unit)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (TabType)
 import Gargantext.Utils.Toestand as T2
@@ -15,8 +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

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

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

 module Gargantext.Components.Nodes.Corpus.Types where
 
+import Gargantext.Prelude
+
 import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, (.:), (:=), (~>), jsonEmptyObject)
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Eq (genericEq)
 import Data.List as List
 import Data.Maybe (Maybe(..))
-
-import Gargantext.Prelude
-
 import Gargantext.Components.Node (NodePoly)
 import Gargantext.Components.Nodes.Types (FTField, Field(..), FieldType(..), isJSON)
+import Reactix as R
+import Toestand as T
 
 newtype Hyperdata =
   Hyperdata { fields :: List.List FTField }

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

 module Gargantext.Components.Nodes.Lists.Tabs where
 
-import Gargantext.Prelude (bind, pure, unit, ($), (<>))
+import Gargantext.Components.Nodes.Lists.Types
+
 import Data.Array as A
 import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
 import Effect.Class (liftEffect)
-import Reactix as R
-import Reactix.DOM.HTML as H
-import Record as Record
-import Record.Extra as RX
-import Toestand as T
-
-
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.NgramsTable.Core as NTC
-import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
 import Gargantext.Components.Nodes.Corpus.Chart.Metrics (metrics)
-import Gargantext.Components.Nodes.Corpus.Chart.Pie  (pie, bar)
+import Gargantext.Components.Nodes.Corpus.Chart.Pie (pie, bar)
 import Gargantext.Components.Nodes.Corpus.Chart.Tree (tree)
 import Gargantext.Components.Nodes.Corpus.Chart.Utils (mNgramsTypeFromTabType)
-import Gargantext.Components.Nodes.Lists.Types
+import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
 import Gargantext.Components.Search as S
 import Gargantext.Components.Tab as Tab
+import Gargantext.Prelude (bind, pure, unit, ($), (<>))
 import Gargantext.Sessions (Session)
-import Gargantext.Types
-  ( ChartType(..), CTabNgramType(..), Mode(..), TabSubType(..), TabType(..), modeTabType )
+import Gargantext.Types (ChartType(..), CTabNgramType(..), Mode(..), TabSubType(..), TabType(..), modeTabType)
 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.Extra as RX
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Lists.Tabs"
@@ -163,7 +161,7 @@ ngramsViewCpt = here.component "ngramsView" cpt where
         ]
         charts params _        = [ chart params mode ]
 
-        chart path Authors    = pie     { path, session }
-        chart path Institutes = tree    { path, session }
-        chart path Sources    = bar     { path, session }
-        chart path Terms      = metrics { path, session }
+        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 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 Reactix as R
-import Reactix.DOM.HTML as H
-import Record as Record
-import Toestand as T
-
-import Gargantext.Prelude
-
+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)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Components.Nodes.Corpus.Chart.Histo (histo)
 import Gargantext.Components.Nodes.Corpus.Document as D
-import Gargantext.Components.Nodes.Corpus.Types (CorpusData, Hyperdata(..), getCorpusInfo, CorpusInfo(..))
+import Gargantext.Components.Nodes.Corpus.Types (CorpusData, CorpusInfo(..), Hyperdata(..), getCorpusInfo)
 import Gargantext.Components.Nodes.Lists.Types as LT
 import Gargantext.Components.Nodes.Texts.Types as TT
 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 Reactix as R
+import Reactix.DOM.HTML as H
+import Record (set)
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Texts"
@@ -82,6 +86,10 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
       cacheState <- T.useBox $ getCacheState LT.CacheOff session nodeId
       cacheState' <- T.useLive T.unequal cacheState
 
+      yearFilter <- T.useBox (Nothing :: Maybe Year)
+
+      eChartsInstance <- T.useBox (Nothing :: Maybe EChartsInstance)
+
       R.useEffectOnce' $ do
         T.listen (\{ new } -> afterCacheStateChange new) cacheState
 
@@ -90,6 +98,7 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
           let NodePoly { date, hyperdata: Hyperdata h, name } = corpusNode
               CorpusInfo { authors, desc, query } = getCorpusInfo h.fields
               title = "Corpus " <> name
+
           R.fragment
             [ Table.tableHeaderLayout { cacheState
                                       , date
@@ -104,7 +113,10 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
                    , frontends
                    , session
                    , sidePanel
-                   , sidePanelState }
+                   , sidePanelState
+                   , yearFilter
+                   , eChartsInstance
+                   }
             ]
       where
         afterCacheStateChange cacheState = do
@@ -127,13 +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
+  ( 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
@@ -142,8 +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 } _ = do
-      let path = initialPath
+    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
 
@@ -151,7 +180,7 @@ tabsCpt = here.component "tabs" cpt
           activeTab
         , tabs: [
             "Documents"       /\ R.fragment [
-                histo { path, session }
+                histo { path, session, onClick, onInit }
               , docView' path TabDocs
               ]
           , "Trash"           /\ docView' path TabTrash
@@ -174,7 +203,9 @@ tabsCpt = here.component "tabs" cpt
                                         , session
                                         , tabType
                                         , sidePanel
-                                        , sidePanelState } []
+                                        , sidePanelState
+                                        , yearFilter
+                                        } []
 
 type DocViewProps a = (
     cacheState     :: T.Box LT.CacheState
@@ -187,6 +218,7 @@ type DocViewProps a = (
   , tabType        :: TabSubType a
   , sidePanel      :: T.Box (Maybe (Record TT.SidePanel))
   , sidePanelState :: T.Box SidePanelState
+  , yearFilter     :: T.Box (Maybe Year)
   )
 
 docView :: forall a. R2.Component (DocViewProps a)
@@ -206,7 +238,9 @@ docViewLayoutRec { cacheState
                  , session
                  , tabType: TabDocs
                  , sidePanel
-                 , sidePanelState } =
+                 , sidePanelState
+                 , yearFilter
+                 } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -220,6 +254,7 @@ docViewLayoutRec { cacheState
   , sidePanelState
   , tabType: TabCorpus TabDocs
   , totalRecords: 4737
+  , yearFilter
   }
 docViewLayoutRec { cacheState
                  , corpusId
@@ -228,7 +263,9 @@ docViewLayoutRec { cacheState
                  , session
                  , tabType: TabMoreLikeFav
                  , sidePanel
-                 , sidePanelState } =
+                 , sidePanelState
+                 , yearFilter
+                 } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -242,6 +279,7 @@ docViewLayoutRec { cacheState
   , sidePanelState
   , tabType: TabCorpus TabMoreLikeFav
   , totalRecords: 4737
+  , yearFilter
   }
 docViewLayoutRec { cacheState
                  , corpusId
@@ -250,7 +288,9 @@ docViewLayoutRec { cacheState
                  , session
                  , tabType: TabMoreLikeTrash
                  , sidePanel
-                 , sidePanelState } =
+                 , sidePanelState
+                 , yearFilter
+                 } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -264,6 +304,7 @@ docViewLayoutRec { cacheState
   , sidePanelState
   , tabType: TabCorpus TabMoreLikeTrash
   , totalRecords: 4737
+  , yearFilter
   }
 docViewLayoutRec { cacheState
                  , corpusId
@@ -272,7 +313,9 @@ docViewLayoutRec { cacheState
                  , session
                  , tabType: TabTrash
                  , sidePanel
-                 , sidePanelState } =
+                 , sidePanelState
+                 , yearFilter
+                 } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -286,6 +329,7 @@ docViewLayoutRec { cacheState
   , sidePanelState
   , tabType: TabCorpus TabTrash
   , totalRecords: 4737
+  , yearFilter
   }
 -- DUMMY
 docViewLayoutRec { cacheState
@@ -295,7 +339,9 @@ docViewLayoutRec { cacheState
                  , session
                  , tabType
                  , sidePanel
-                 , sidePanelState } =
+                 , sidePanelState
+                 , yearFilter
+                 } =
   { cacheState
   , chart  : H.div {} []
   , frontends
@@ -309,6 +355,7 @@ docViewLayoutRec { cacheState
   , sidePanelState
   , tabType: TabCorpus TabTrash
   , totalRecords: 4737
+  , yearFilter
   }