>>> BEGIN 340

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

 module Gargantext.Components.Nodes.Lists.Tabs where
 
+import Gargantext.Components.Nodes.Lists.Types hiding (here)
+
 import Data.Array as A
 import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Tuple.Nested ((/\))
@@ -12,15 +14,14 @@ 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.Corpus.Types (CorpusData)
-import Gargantext.Components.Nodes.Lists.Types hiding (here)
 import Gargantext.Components.Tab as Tab
-import Gargantext.Prelude (bind, pure, unit, ($), (<>))
+import Gargantext.Components.Table.Types (Params)
+import Gargantext.Prelude (bind, pure, unit, ($))
 import Gargantext.Sessions (Session)
 import Gargantext.Types (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
@@ -70,22 +71,22 @@ ngramsViewCpt = here.component "ngramsView" cpt where
 
       path <- T.useBox $ NTC.initialPageParams props.session initialPath.corpusId [initialPath.listId] initialPath.tabType
       { listIds, nodeId, params } <- T.useLive T.unequal path
-      let path' = {
-          corpusId: nodeId
-        , limit: params.limit
-        , listId: fromMaybe defaultListId $ A.head listIds
-        , tabType: tabType
-        }
-      let chartParams = {
-          corpusId: path'.corpusId
-        , limit: Just path'.limit
-        , listId: path'.listId
-        , tabType: path'.tabType
-        }
 
-      pure $ R.fragment
-        ( charts chartParams tabNgramType
-        <> [ NT.mainNgramsTable { afterSync: afterSync chartsReload
+      pure $
+        R.fragment
+        [
+          ngramsView'
+          { mode
+          , boxes
+          , session
+          , params
+          , listIds
+          , nodeId
+          , corpusData: props.corpusData
+          } []
+        ,
+          NT.mainNgramsTable
+          { afterSync: afterSync chartsReload
           , boxes
           , cacheState
           , defaultListId
@@ -96,7 +97,6 @@ ngramsViewCpt = here.component "ngramsView" cpt where
           , withAutoUpdate: false
           } []
         ]
-        )
       where
         afterSync chartsReload _ = do
           case mNgramsType of
@@ -118,6 +118,55 @@ ngramsViewCpt = here.component "ngramsView" cpt where
                        , tabType
                        }
 
+
+
+----------------
+
+
+-- @XXX re-render issue -> clone component
+type NgramsViewProps' =
+  ( mode          :: Mode
+  , boxes         :: Boxes
+  , session       :: Session
+  , listIds       :: Array Int
+  , params        :: Params
+  , nodeId        :: Int
+  , corpusData    :: CorpusData
+  )
+
+ngramsView' :: R2.Component NgramsViewProps'
+ngramsView' = R.createElement ngramsViewCpt'
+ngramsViewCpt' :: R.Memo NgramsViewProps'
+ngramsViewCpt' = R.memo' $ here.component "ngramsView_clone" cpt where
+  cpt { mode
+      , boxes
+      , session
+      , listIds
+      , params
+      , nodeId
+      , corpusData: { defaultListId }
+      } _ = do
+
+    let path' = {
+      corpusId: nodeId
+    , limit: params.limit
+    , listId: fromMaybe defaultListId $ A.head listIds
+    , tabType: tabType
+    }
+
+    let chartParams = {
+      corpusId: path'.corpusId
+    , limit: Just path'.limit
+    , listId: path'.listId
+    , tabType: path'.tabType
+    }
+
+    pure $
+
+      R.fragment $
+      charts chartParams tabNgramType
+
+    where
       charts _params CTabTerms = [
           {-
           H.div {className: "row"}
@@ -148,9 +197,13 @@ ngramsViewCpt = here.component "ngramsView" cpt where
         , getChartFunction chartType $ { path: params, session }
         -}
       ]
-        charts params _        = [ chart params mode ]
+      charts params' _        = [ chart params' mode ]
 
       chart path Authors    = pie     { boxes, path, session, onClick: Nothing, onInit: Nothing }
       chart path Institutes = tree    { boxes, path, session, onClick: Nothing, onInit: Nothing }
       chart path Sources    = bar     { boxes, path, session, onClick: Nothing, onInit: Nothing }
       chart path Terms      = metrics { boxes, path, session, onClick: Nothing, onInit: Nothing }
+
+      tabType      = TabCorpus (TabNgramType tabNgramType)
+
+      tabNgramType = modeTabType mode