Merge branch 'dev-refactor-views-panel' of...

Merge branch 'dev-refactor-views-panel' of ssh://gitlab.iscpif.fr:20022/gargantext/purescript-gargantext into dev-merge

Merge branch 'dev-refactor-views-panel' of...
Merge branch 'dev-refactor-views-panel' of ssh://gitlab.iscpif.fr:20022/gargantext/purescript-gargantext into dev-merge
33ee2109 · Alexandre Delanoë · cfa43f03 · 5a8eced7 · 33ee2109 · 33ee2109
Commit 33ee2109 authored Sep 10, 2020 by Alexandre Delanoë
19 changed files
--- a/dist/index.html
+++ b/dist/index.html
@@ -16,12 +16,51 @@
        <link href="styles/Login.css" rel="stylesheet" type="text/css" />
        <link href="styles/Tree.css" rel="stylesheet" type="text/css" />
        <link href="styles/CodeEditor.css" rel="stylesheet" type="text/css" />
+        <link href="styles/Styles.css" rel="stylesheet" type="text/css" />
        <link href="styles/range-slider.css" rel="stylesheet" type="text/css" />
        <style>
-          .tree { margin: 0; padding: 0; border: 0; }
+         * {margin: 0; padding: 0; list-style: none;}
-          .tree LI { list-style: none; }
+         .tree ul li {
-          .tree UL { margin: 0 0 0 1.5em; border: 0; padding: 0; }
+             margin-left: 15px;
-        </style>
+             position: relative;
+             padding-left: 5px;
+         }
+         #toolbar {display : inline;}
+         #toolbar ul li {display : inline }
+         #toolbar ul li form {display : inline}
+         .tree { margin-top : 20px;}
+         .tree ul li::before {
+             content: " ";
+             position: absolute;
+             width: 1px;
+             background-color: #000;
+             top: 5px;
+             bottom: -12px;
+             left: -10px;
+         }
+         body > .tree ul > li:first-child::before {top: 12px;}
+         .tree ul li:not(:first-child):last-child::before {display: none;}
+         .tree ul li:only-child::before {
+             display: list-item;
+             content: " ";
+             position: absolute;
+             width: 1px;
+             background-color: "#000";
+             top: 5px;
+             bottom: 7px;
+             height: 7px;
+             left: -10px;
+         }
+         .tree ul li::after {
+             content: " ";
+             position: absolute;
+             left: -10px;
+             width: 10px;
+             height: 1px;
+             background-color: "#000";
+             top: 12px;
+         }
+              </style>
    </head>
    <body>
        <div id="app" class ="container-fluid"></div>

--- a/dist/styles/Tree.css
+++ b/dist/styles/Tree.css
@@ -16,6 +16,10 @@
 .tree .node {
  margin-top: 1px;
 }
+.tree .node.node-type-valid .text {
+  color: blue;
+  text-decoration: underline;
+}
 .tree .lefthanded ul {
  margin-right: 19px;
 }

--- a/dist/styles/Tree.sass
+++ b/dist/styles/Tree.sass
@@ -11,6 +11,10 @@
        cursor: wait
  .node
    margin-top: 1px
+    &.node-type-valid
+      .text
+        color: blue
+        text-decoration: underline
  .lefthanded
    ul
      margin-right : 19px

--- a/src/Gargantext/Components/Forest/Tree/Node/Tools/SubTree.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Tools/SubTree.purs
@@ -121,14 +121,8 @@ subTreeTreeViewCpt = R2.hooksComponent thisModule "subTreeTreeViewCpt" cpt
                    GT.RightHanded -> identity
            pure $ H.div {} $ ordering [
-              H.div { className: "node " <> GT.fldr nodeType true} [
+              H.div { className: nodeClass validNodeType } [
-                H.span { style : if validNodeType then
+                H.span { className: "text"
-                                   { color : "blue"
-                                   , "text-decoration": "underline"
-                                   }
-                                  else { color : ""
-                                       , "text-decoration": "none"
-                                       }
                       , on: { click: onClick }
                       } [
                  nodeText { isSelected: isSelected targetId valAction
@@ -141,6 +135,10 @@ subTreeTreeViewCpt = R2.hooksComponent thisModule "subTreeTreeViewCpt" cpt
            ]
      where
+        nodeClass vnt = "node " <> GT.fldr nodeType true <> " " <> validNodeTypeClass
+          where
+            validNodeTypeClass = if vnt then "node-type-valid" else ""
        SubTreeParams { valitypes } = subTreeParams
        sortedAry = A.sortWith (\(NTree (LNode {id:id'}) _) -> id')
@@ -152,7 +150,7 @@ subTreeTreeViewCpt = R2.hooksComponent thisModule "subTreeTreeViewCpt" cpt
        clickable    = if validNodeType then "clickable" else ""
-        ( valAction /\ setAction) = action
+        (valAction /\ setAction) = action
        isSelected n action' = case (subTreeOut action') of
            Nothing                   -> false

--- a/src/Gargantext/Components/NgramsTable.purs
+++ b/src/Gargantext/Components/NgramsTable.purs
@@ -30,9 +30,11 @@ import Reactix.DOM.HTML as H
 import Unsafe.Coerce (unsafeCoerce)
 import Gargantext.Components.AutoUpdate (autoUpdateElt)
+import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Components.NgramsTable.Components as NTC
 import Gargantext.Components.NgramsTable.Core
 import Gargantext.Components.NgramsTable.Loader (useLoaderWithCacheAPI)
+import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Table as T
 import Gargantext.Prelude (class Show, Unit, bind, const, discard, identity, map, mempty, not, pure, show, unit, (#), ($), (&&), (/=), (<$>), (<<<), (<>), (=<<), (==), (||), read)
 import Gargantext.Routes (SessionRoute(..)) as R
@@ -483,6 +485,7 @@ selectNgramsOnFirstPage rows = Set.fromFoldable $ fst <$> rows
 type MainNgramsTableProps =
  ( nodeId        :: Int
    -- ^ This node can be a corpus or contact.
+  , cacheState    :: R.State NT.CacheState
  , defaultListId :: Int
  , tabType       :: TabType
  , session       :: Session
@@ -496,20 +499,30 @@ mainNgramsTable props = R.createElement mainNgramsTableCpt props []
 mainNgramsTableCpt :: R.Component MainNgramsTableProps
 mainNgramsTableCpt = R2.hooksComponent thisModule "mainNgramsTable" cpt
  where
-    cpt props@{nodeId, defaultListId, session, tabNgramType, tabType, withAutoUpdate} _ = do
+    cpt props@{ cacheState, defaultListId, nodeId, session, tabNgramType, tabType, withAutoUpdate} _ = do
      let path = initialPageParams session nodeId [defaultListId] tabType
-      useLoaderWithCacheAPI {
+      let render versioned = mainNgramsTablePaint { path, tabNgramType, versioned, withAutoUpdate }
-          cacheEndpoint: versionEndpoint props
-        , handleResponse
+      case cacheState of
-        , mkRequest
+        (NT.CacheOn /\ _) ->
-        , path
+          useLoaderWithCacheAPI {
-        , renderer: \versioned -> mainNgramsTablePaint { path, tabNgramType, versioned, withAutoUpdate }
+              cacheEndpoint: versionEndpoint props
-        }
+            , handleResponse
+            , mkRequest
+            , path
+            , renderer: render
+            }
+        (NT.CacheOff /\ _) ->
+          useLoader path loader render
    versionEndpoint :: Record MainNgramsTableProps -> PageParams -> Aff Version
    versionEndpoint { defaultListId, nodeId, session, tabType } _ = get session $ R.GetNgramsTableVersion { listId: defaultListId, tabType } (Just nodeId)
+    loader :: PageParams -> Aff VersionedNgramsTable
+    loader path@{ listIds, nodeId, session, tabType } =
+      get session $ R.GetNgramsTableAll { listIds, tabType } (Just nodeId)
    mkRequest :: PageParams -> GUC.Request
    mkRequest path@{ session } = GUC.makeGetRequest session $ url path
      where
@@ -523,14 +536,6 @@ mainNgramsTableCpt = R2.hooksComponent thisModule "mainNgramsTable" cpt
            , termSizeFilter
            } = R.GetNgramsTableAll { listIds
                                    , tabType } (Just nodeId)
-            -- } = R.GetNgrams { limit
-            --                 , listIds
-            --                 , offset: Just offset
-            --                 , orderBy: convOrderBy <$> orderBy
-            --                 , searchQuery
-            --                 , tabType
-            --                 , termListFilter
-            --                 , termSizeFilter } (Just nodeId)
    handleResponse :: VersionedNgramsTable -> VersionedNgramsTable
    handleResponse v = v
@@ -554,10 +559,6 @@ mainNgramsTablePaintCpt :: R.Component MainNgramsTablePaintProps
 mainNgramsTablePaintCpt = R2.hooksComponent thisModule "mainNgramsTablePaint" cpt
  where
    cpt {path, tabNgramType, versioned, withAutoUpdate} _ = do
-      R.useEffect' $ do
-        let (Versioned v) = versioned
-        log2 "[mainNgramsTablePaint] versioned values" $ show v.data
      pathS <- R.useState' path
      state <- R.useState' $ initialState versioned

--- a/src/Gargantext/Components/NgramsTable/Loader.purs
+++ b/src/Gargantext/Components/NgramsTable/Loader.purs
@@ -17,6 +17,13 @@ import Gargantext.Components.NgramsTable.Core (Version(..), Versioned(..))
 import Gargantext.Utils.CacheAPI as GUC
+cacheName = "ngrams-cache-api-loader"
+clearCache :: Unit -> Aff Unit
+clearCache _ = GUC.delete $ GUC.CacheName cacheName
 type LoaderWithCacheAPIProps path res ret = (
    cacheEndpoint :: path -> Aff Version
  , handleResponse :: Versioned res -> ret
@@ -62,7 +69,6 @@ useCachedAPILoaderEffect { cacheEndpoint
    else do
      R.setRef oPath path
-      let cacheName = "ngrams-cache-api-loader"
      let req = mkRequest path
      -- log2 "[useCachedLoader] mState" mState
      launchAff_ $ do
@@ -77,7 +83,7 @@ useCachedAPILoaderEffect { cacheEndpoint
          --   log "[useCachedAPILoaderEffect] versions dont match"
          --   log2 "[useCachedAPILoaderEffect] cached version" version
          --   log2 "[useCachedAPILoaderEffect] real version" cacheReal
-          _ <- GUC.delete cache req
+          _ <- GUC.deleteReq cache req
          vr@(Versioned { version, "data": d }) <- GUC.cachedJson cache req
          if version == cacheReal then
            pure vr

--- a/src/Gargantext/Components/Nodes/Annuaire.purs
+++ b/src/Gargantext/Components/Nodes/Annuaire.purs
@@ -7,12 +7,15 @@ import Data.List as L
 import Data.Maybe (Maybe(..), maybe, fromMaybe)
 import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\))
-import Effect.Aff (Aff)
+import Effect.Aff (Aff, launchAff_)
-import Prelude (bind, const, identity, pure, ($), (<$>), (<>))
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Gargantext.Prelude
+import Gargantext.Components.NgramsTable.Loader (clearCache)
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types as CT
+import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Table as T
 import Gargantext.Ends (url, Frontends)
 import Gargantext.Hooks.Loader (useLoader)
@@ -66,6 +69,7 @@ annuaireLayoutWithKeyCpt = R2.hooksComponent thisModule "annuaireLayoutWithKey"
  where
    cpt { frontends, nodeId, session } _ = do
      path <- R.useState' nodeId
      useLoader (fst path) (getAnnuaireInfo session) $
        \info -> annuaire { frontends, info, path, session }
@@ -87,15 +91,22 @@ annuaireCpt = R2.hooksComponent thisModule "annuaire" cpt
    cpt {session, path, info: info@(AnnuaireInfo {name, date: date'}), frontends} _ = do
      pagePath <- R.useState' $ initialPagePath (fst path)
+      cacheState <- R.useState' NT.CacheOn
      pure $ R.fragment
-        [ T.tableHeaderLayout headerProps
+        [ T.tableHeaderLayout { afterCacheStateChange: \_ -> launchAff_ $ clearCache unit
+                              , cacheState
+                              , date
+                              , desc: name
+                              , query: ""
+                              , title: name
+                              , user: "" }
          , H.p {} []
          , H.div {className: "col-md-3"}
            [ H.text "    Filter ", H.input { className: "form-control", style } ]
          , H.br {}
          , pageLayout { info, session, pagePath, frontends} ]
      where
-        headerProps = { title: name, desc: name, query: "", date, user: ""}
        date = "Last update: " <> date'
        style = {width: "250px", display: "inline-block"}
        initialPagePath nodeId = {nodeId, params: T.initialParams}

--- a/src/Gargantext/Components/Nodes/Annuaire/User/Contacts.purs
+++ b/src/Gargantext/Components/Nodes/Annuaire/User/Contacts.purs
@@ -18,6 +18,7 @@ import Reactix.DOM.HTML as H
 import Gargantext.Components.InputWithEnter (inputWithEnter)
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Tabs as Tabs
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (Contact(..), ContactData, ContactTouch(..), ContactWhere(..), ContactWho(..), HyperdataContact(..), HyperdataUser(..), _city, _country, _firstName, _labTeamDeptsJoinComma, _lastName, _mail, _office, _organizationJoinComma, _ouFirst, _phone, _role, _shared, _touch, _who, defaultContactTouch, defaultContactWhere, defaultContactWho, defaultHyperdataContact, defaultHyperdataUser)
+import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude (Unit, bind, const, discard, pure, show, unit, ($), (+), (<$>), (<<<), (<>), (==))
@@ -173,12 +174,14 @@ userLayoutWithKeyCpt = R2.hooksComponent thisModule "userLayoutWithKey" cpt
    cpt { frontends, nodeId, session } _ = do
      reload <- R.useState' 0
+      cacheState <- R.useState' NT.CacheOn
      useLoader {nodeId, reload: fst reload, session} getContactWithReload $
        \contactData@{contactNode: Contact {name, hyperdata}} ->
-          H.ul { className: "col-md-12 list-group" }
+          H.ul { className: "col-md-12 list-group" } [
-          [ display (fromMaybe "no name" name) (contactInfos hyperdata (onUpdateHyperdata reload))
+            display (fromMaybe "no name" name) (contactInfos hyperdata (onUpdateHyperdata reload))
-          , Tabs.tabs {frontends, nodeId, contactData, session} ]
+          , Tabs.tabs { cacheState, contactData, frontends, nodeId, session }
+          ]
      where
        onUpdateHyperdata :: R.State Int -> HyperdataUser -> Effect Unit
        onUpdateHyperdata (_ /\ setReload) hd = do
@@ -219,12 +222,14 @@ annuaireUserLayout props = R.createElement annuaireUserLayoutCpt props []
 annuaireUserLayoutCpt :: R.Component AnnuaireLayoutProps
 annuaireUserLayoutCpt = R2.hooksComponent thisModule "annuaireUserLayout" cpt
  where
-    cpt {annuaireId, frontends, nodeId, session} _ = do
+    cpt { annuaireId, frontends, nodeId, session } _ = do
+      cacheState <- R.useState' NT.CacheOn
      useLoader nodeId (getAnnuaireContact session annuaireId) $
        \contactData@{contactNode: Contact {name, hyperdata}} ->
          H.ul { className: "col-md-12 list-group" }
          [ display (fromMaybe "no name" name) (contactInfos hyperdata onUpdateHyperdata)
-          , Tabs.tabs {frontends, nodeId, contactData, session} ]
+          , Tabs.tabs { cacheState, contactData, frontends, nodeId, session } ]
      where
        onUpdateHyperdata :: HyperdataUser -> Effect Unit

--- a/src/Gargantext/Components/Nodes/Annuaire/User/Contacts/Tabs.purs
+++ b/src/Gargantext/Components/Nodes/Annuaire/User/Contacts/Tabs.purs
@@ -8,10 +8,12 @@ import Data.Maybe (Maybe(..))
 import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (ContactData)
+import Gargantext.Components.Nodes.Lists.Types as NTypes
 import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (TabType(..), TabSubType(..), CTabNgramType(..), PTabNgramType(..))
@@ -41,10 +43,12 @@ modeTabType' Books = CTabAuthors
 modeTabType' Communication = CTabAuthors
 type TabsProps =
-  ( nodeId :: Int
+  ( cacheState :: R.State NTypes.CacheState
  , contactData :: ContactData
  , frontends :: Frontends
-  , session :: Session )
+  , nodeId :: Int
+  , session :: Session
+  )
 tabs :: Record TabsProps -> R.Element
 tabs props = R.createElement tabsCpt props []
@@ -52,10 +56,10 @@ tabs props = R.createElement tabsCpt props []
 tabsCpt :: R.Component TabsProps
 tabsCpt = R2.hooksComponent thisModule "tabs" cpt
  where
-    cpt {frontends, nodeId, contactData: {defaultListId}, session} _ = do
+    cpt { cacheState, contactData: {defaultListId}, frontends, nodeId, session} _ = do
      active <- R.useState' 0
      pure $
-        Tab.tabs { tabs: tabs', selected: fst active }
+        Tab.tabs { selected: fst active, tabs: tabs' }
      where
        tabs' =
          [ "Documents"     /\ docs
@@ -65,9 +69,9 @@ tabsCpt = R2.hooksComponent thisModule "tabs" cpt
          , "Trash"         /\ docs -- TODO pass-in trash mode
          ]
          where
-            patentsView = {session, defaultListId, nodeId, mode: Patents}
+            patentsView = { cacheState, defaultListId, mode: Patents, nodeId, session }
-            booksView   = {session, defaultListId, nodeId, mode: Books}
+            booksView   = { cacheState, defaultListId, mode: Books, nodeId, session }
-            commView    = {session, defaultListId, nodeId, mode: Communication}
+            commView    = { cacheState, defaultListId, mode: Communication, nodeId, session }
            chart       = mempty
            totalRecords = 4736 -- TODO
            docs = DT.docViewLayout
@@ -79,15 +83,24 @@ tabsCpt = R2.hooksComponent thisModule "tabs" cpt
 type NgramsViewTabsProps =
-  ( session :: Session
+  ( cacheState :: R.State NTypes.CacheState
-  , mode :: Mode
  , defaultListId :: Int
-  , nodeId :: Int )
+  , mode :: Mode
+  , nodeId :: Int
+  , session :: Session
+  )
 ngramsView :: Record NgramsViewTabsProps -> R.Element
-ngramsView {session,mode, defaultListId, nodeId} =
+ngramsView { cacheState, defaultListId, mode, nodeId, session } =
-  NT.mainNgramsTable
+  NT.mainNgramsTable {
-  { nodeId, defaultListId, tabType, session, tabNgramType, withAutoUpdate: false }
+      cacheState
+    , defaultListId
+    , nodeId
+    , tabType
+    , session
+    , tabNgramType
+    , withAutoUpdate: false
+    }
  where
    tabNgramType = modeTabType' mode
    tabType      = TabPairing $ TabNgramType $ modeTabType mode
--- a/src/Gargantext/Components/Nodes/Corpus/Chart/Pie.purs
+++ b/src/Gargantext/Components/Nodes/Corpus/Chart/Pie.purs
@@ -108,6 +108,7 @@ pieCpt = R2.hooksComponent thisModule "pie" cpt
  where
    cpt { path, session } _ = do
      reload <- R.useState' 0
      pure $ metricsWithCacheLoadView {
          getMetricsHash
        , handleResponse
@@ -120,10 +121,11 @@ pieCpt = R2.hooksComponent thisModule "pie" cpt
 loadedPie :: Record MetricsProps -> HistoMetrics -> R.Element
 loadedPie { path, reload, session } loaded =
-  H.div {} [ U.reloadButton reload
+  H.div {} [
-           , U.chartUpdateButton { chartType: ChartPie, path, reload, session }
+    U.reloadButton reload
-           , chart $ chartOptionsPie loaded
+  , U.chartUpdateButton { chartType: ChartPie, path, reload, session }
-           ]
+  , chart $ chartOptionsPie loaded
+  ]
 bar :: Record Props -> R.Element
@@ -134,16 +136,16 @@ barCpt = R2.hooksComponent thisModule "bar" cpt
  where
    cpt {path, session} _ = do
      reload <- R.useState' 0
-      --pure $ metricsLoadView {getMetrics, loaded: loadedBar, path, reload, session}
-      pure $ metricsWithCacheLoadView
+      pure $ metricsWithCacheLoadView {
-           { getMetricsHash
+           getMetricsHash
-           , handleResponse
+         , handleResponse
-           , loaded: loadedPie
+         , loaded: loadedBar
-           , mkRequest: mkRequest session
+         , mkRequest: mkRequest session
-           , path
+         , path
-           , reload
+         , reload
-           , session
+         , session
-           }
+         }
 loadedBar :: Record MetricsProps -> Loaded -> R.Element
 loadedBar { path, reload, session } loaded =

--- a/src/Gargantext/Components/Nodes/Lists.purs
+++ b/src/Gargantext/Components/Nodes/Lists.purs
 module Gargantext.Components.Nodes.Lists where
+import Effect.Aff (launchAff_)
 import Reactix as R
 ------------------------------------------------------------------------
+import Gargantext.Components.NgramsTable.Loader (clearCache)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Components.Nodes.Corpus.Types (getCorpusInfo, CorpusInfo(..), Hyperdata(..))
 import Gargantext.Components.Nodes.Lists.Tabs as Tabs
+import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Table as Table
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude
@@ -46,13 +49,26 @@ listsLayoutWithKeyCpt = R2.hooksComponent thisModule "listsLayoutWithKey" cpt
    cpt { nodeId, session } _ = do
      let path = { nodeId, session }
+      cacheState <- R.useState' NT.CacheOn
      useLoader path loadCorpusWithChild $
        \corpusData@{ corpusId, corpusNode: NodePoly poly, defaultListId } ->
              let { date, hyperdata : Hyperdata h, name } = poly
                  CorpusInfo {desc,query,authors} = getCorpusInfo h.fields
           in
-          R.fragment
+          R.fragment [
-          [ Table.tableHeaderLayout
+            Table.tableHeaderLayout {
-            { title: "Corpus " <> name, desc, query, user:authors, date }
+                afterCacheStateChange: \_ -> launchAff_ $ clearCache unit
-         , Tabs.tabs {session, corpusId, corpusData}]
+              , cacheState
+              , date
+              , desc
+              , query
+              , title: "Corpus " <> name
+              , user: authors }
+          , Tabs.tabs {
+               cacheState
+             , corpusData
+             , corpusId
+             , session }
+          ]
 ------------------------------------------------------------------------
--- a/src/Gargantext/Components/Nodes/Lists/Tabs.purs
+++ b/src/Gargantext/Components/Nodes/Lists/Tabs.purs
@@ -8,21 +8,23 @@ import Reactix.DOM.HTML as H
 import Gargantext.Prelude
 import Gargantext.Components.NgramsTable as NT
-import Gargantext.Components.Tab as Tab
 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.Tree (tree)
 import Gargantext.Components.Nodes.Corpus.Chart (getChartFunction)
+import Gargantext.Components.Nodes.Lists.Types as NTypes
+import Gargantext.Components.Tab as Tab
 import Gargantext.Sessions (Session)
 import Gargantext.Types (ChartType(..), CTabNgramType(..), Mode(..), TabSubType(..), TabType(..), chartTypeFromString, modeTabType)
 import Gargantext.Utils.Reactix as R2
 thisModule = "Gargantext.Components.Nodes.Lists.Tabs"
-type Props = ( session    :: Session
+type Props = ( cacheState :: R.State NTypes.CacheState
+             , corpusData :: CorpusData
             , corpusId   :: Int
-             , corpusData :: CorpusData 
+             , session    :: Session
             )
 tabs :: Record Props -> R.Element
@@ -31,15 +33,16 @@ tabs props = R.createElement tabsCpt props []
 tabsCpt :: R.Component Props
 tabsCpt = R2.hooksComponent thisModule "tabs" cpt
  where
-    cpt { corpusData: corpusData@{ defaultListId }, corpusId, session } _ = do
+    cpt { cacheState, corpusData: corpusData@{ defaultListId }, corpusId, session } _ = do
      (selected /\ setSelected) <- R.useState' 0
      pure $ Tab.tabs { selected, tabs: tabs' }
      where
        tabs' = [ "Authors"    /\ view Authors
                , "Institutes" /\ view Institutes
                , "Sources"    /\ view Sources
                , "Terms"      /\ view Terms ]
-        view mode = ngramsView { corpusData, corpusId, mode, session }
+        view mode = ngramsView { cacheState, corpusData, corpusId, mode, session }
 type NgramsViewProps = ( mode :: Mode | Props )
@@ -49,7 +52,8 @@ ngramsView props = R.createElement ngramsViewCpt props []
 ngramsViewCpt :: R.Component NgramsViewProps
 ngramsViewCpt = R2.hooksComponent thisModule "ngramsView" cpt
  where
-    cpt { corpusData: { defaultListId }
+    cpt { cacheState
+        , corpusData: { defaultListId }
        , corpusId
        , mode
        , session } _ = do
@@ -57,7 +61,8 @@ ngramsViewCpt = R2.hooksComponent thisModule "ngramsView" cpt
      pure $ R.fragment
        ( charts tabNgramType chartType
-        <> [ NT.mainNgramsTable { defaultListId
+        <> [ NT.mainNgramsTable { cacheState
+                                , defaultListId
                                , nodeId: corpusId
                                , session
                                , tabNgramType
@@ -98,7 +103,8 @@ ngramsViewCpt = R2.hooksComponent thisModule "ngramsView" cpt
        , getChartFunction chartType $ { session, path }
        ]
        charts _ _       = [ chart mode ]
        chart Authors    = pie     { session, path }
-        chart Sources    = bar     { session, path }
        chart Institutes = tree    { session, path }
+        chart Sources    = bar     { session, path }
        chart Terms      = metrics { session, path }
--- a/src/Gargantext/Components/Nodes/Lists/Types.purs
+++ b/src/Gargantext/Components/Nodes/Lists/Types.purs
+module Gargantext.Components.Nodes.Lists.Types where
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Eq (genericEq)
+import Gargantext.Prelude
+thisModule = "Gargantext.Components.Nodes.Lists.Types"
+data CacheState = CacheOn | CacheOff
+derive instance genericCacheState :: Generic CacheState _
+instance eqCacheState :: Eq CacheState where
+  eq = genericEq
--- a/src/Gargantext/Components/Nodes/Texts.purs
+++ b/src/Gargantext/Components/Nodes/Texts.purs
@@ -5,15 +5,18 @@ import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
+import Effect.Aff (launchAff_)
 import Reactix as R
 import Reactix.DOM.HTML as H
 --------------------------------------------------------
 import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.Loader (loader)
+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.Types (CorpusData, Hyperdata(..), getCorpusInfo, CorpusInfo(..))
+import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Tab as Tab
 import Gargantext.Components.Table as Table
 import Gargantext.Ends (Frontends)
@@ -53,16 +56,25 @@ textsLayoutWithKeyCpt :: R.Component KeyProps
 textsLayoutWithKeyCpt = R2.hooksComponent thisModule "textsLayoutWithKey" cpt
  where
    cpt { frontends, nodeId, session } _ = do
-      pure $ loader {session, nodeId} loadCorpusWithChild paint
+      cacheState <- R.useState' NT.CacheOn
-      where
-        paint corpusData@{corpusId, corpusNode, defaultListId} =
+      pure $ loader {session, nodeId} loadCorpusWithChild $
-          R.fragment [ Table.tableHeaderLayout headerProps, tabs' ]
+        \corpusData@{ corpusId, corpusNode, defaultListId } -> do
-          where
+          let NodePoly { name, date, hyperdata: Hyperdata h } = corpusNode
-            NodePoly { name, date, hyperdata: Hyperdata h } = corpusNode
+              CorpusInfo { authors, desc, query } = getCorpusInfo h.fields
-            CorpusInfo {desc,query,authors} = getCorpusInfo h.fields
+              tabs' = tabs { corpusData, corpusId, frontends, session }
-            tabs' = tabs {session, corpusId, corpusData, frontends}
+              title = "Corpus " <> name
-            title = "Corpus " <> name
-            headerProps = { title, desc, query, date, user:authors }
+          R.fragment [
+              Table.tableHeaderLayout { afterCacheStateChange: \_ -> launchAff_ $ clearCache unit
+                                      , cacheState
+                                      , date
+                                      , desc
+                                      , query
+                                      , title
+                                      , user: authors }
+            , tabs'
+          ]
 data Mode = MoreLikeFav | MoreLikeTrash

--- a/src/Gargantext/Components/Table.purs
+++ b/src/Gargantext/Components/Table.purs
@@ -9,11 +9,14 @@ import Data.Maybe (Maybe(..))
 import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\))
 import DOM.Simple.Console (log2)
+import Effect (Effect)
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Gargantext.Components.Nodes.Lists.Types as NT
+import Gargantext.Components.Search
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Reactix (effectLink)
-import Gargantext.Components.Search
 thisModule = "Gargantext.Components.Table"
@@ -87,10 +90,12 @@ stateParams {pageSize, page, orderBy, searchType} = {offset, limit, orderBy, sea
    offset = limit * (page - 1)
 type TableHeaderLayoutProps =
-  ( title :: String
+  ( afterCacheStateChange :: Unit -> Effect Unit
+  , cacheState :: R.State NT.CacheState
+  , date  :: String
  , desc  :: String
  , query :: String
-  , date  :: String
+  , title :: String
  , user  :: String
  )
@@ -104,7 +109,7 @@ tableHeaderLayout props = R.createElement tableHeaderLayoutCpt props []
 tableHeaderLayoutCpt :: R.Component TableHeaderLayoutProps
 tableHeaderLayoutCpt = R2.hooksComponent thisModule "tableHeaderLayout" cpt
  where
-    cpt {title, desc, query, date, user} _ =
+    cpt { afterCacheStateChange, cacheState, date, desc, query, title, user } _ =
      pure $ R.fragment
      [ R2.row
        [ H.div {className: "col-md-3"} [ H.h3 {} [H.text title] ]
@@ -115,27 +120,45 @@ tableHeaderLayoutCpt = R2.hooksComponent thisModule "tableHeaderLayout" cpt
        [ H.div {className: "jumbotron1", style: {padding: "12px 0px 20px 12px"}}
          [ H.div {className: "col-md-8 content"}
            [ H.p {}
-              [ H.i {className: "glyphicon glyphicon-globe"} []
+              [ H.i {className: "fa fa-globe"} []
              , H.text $ " " <> desc
-          ]
+              ]
            , H.p {}
-              [ H.i {className: "glyphicon glyphicon-zoom-in"} []
+              [ H.i {className: "fa fa-search-plus"} []
              , H.text $ " " <> query
              ]
+            , H.p { className: "cache-toggle"
+                  , on: { click: cacheClick cacheState afterCacheStateChange } }
+              [ H.i {className: "fa " <> (cacheToggle cacheState)} []
+              , H.text $ cacheText cacheState
+              ]
            ]
          , H.div {className: "col-md-4 content"}
            [ H.p {}
-              [ H.i {className: "glyphicon glyphicon-calendar"} []
+              [ H.i {className: "fa fa-calendar"} []
              , H.text $ " " <> date
              ]
            , H.p {}
-              [ H.i {className: "glyphicon glyphicon-user"} []
+              [ H.i {className: "fa fa-user"} []
              , H.text $ " " <> user
              ]
            ]
          ]
        ]
      ]
+    cacheToggle (NT.CacheOn /\ _) = "fa-toggle-on"
+    cacheToggle (NT.CacheOff /\ _) = "fa-toggle-off"
+    cacheText (NT.CacheOn /\ _) = "Cache On"
+    cacheText (NT.CacheOff /\ _) = "Cache Off"
+    cacheClick (_ /\ setCacheState) after _ = do
+      setCacheState cacheStateToggle
+      after unit
+    cacheStateToggle NT.CacheOn = NT.CacheOff
+    cacheStateToggle NT.CacheOff = NT.CacheOn
 table :: Record Props -> R.Element
 table props = R.createElement tableCpt props []

--- a/src/Gargantext/Hooks/Loader.purs
+++ b/src/Gargantext/Hooks/Loader.purs
@@ -130,7 +130,7 @@ useCachedAPILoaderEffect { cacheEndpoint
        val <- if hash == cacheReal then
          pure hr
        else do
-          _ <- GUC.delete cache req
+          _ <- GUC.deleteReq cache req
          hr@(HashedResponse { hash, value }) <- GUC.cachedJson cache req
          if hash == cacheReal then
            pure hr

--- a/src/Gargantext/Utils/CacheAPI.js
+++ b/src/Gargantext/Utils/CacheAPI.js
@@ -13,7 +13,13 @@ exports._openCache = function(cacheName) {
    }
 }
-exports._delete = function(cache) {
+exports._delete = function(cacheName) {
+    return function() {
+        return caches.delete(cacheName);
+    }
+}
+exports._deleteReq = function(cache) {
    return function(req) {
        return function() {
            return cache.delete(req);

--- a/src/Gargantext/Utils/CacheAPI.purs
+++ b/src/Gargantext/Utils/CacheAPI.purs
@@ -63,6 +63,9 @@ makeGetRequest session@(Session { token }) p = makeTokenRequest url (Just token)
 openCache :: CacheName -> Aff Cache
 openCache (CacheName cacheName) = toAffE $ _openCache cacheName
+delete :: CacheName -> Aff Unit
+delete (CacheName cacheName) = toAffE $ _delete cacheName
 add :: Cache -> Request -> Aff Unit
 add cache req = toAffE $ _add cache req
@@ -100,8 +103,8 @@ cachedJson cache req = do
    Left err -> throwError $ error $ "[cachedJson] decodeJson affResp.body: " <> show err
    Right b -> pure b
-delete :: Cache -> Request -> Aff Unit
+deleteReq :: Cache -> Request -> Aff Unit
-delete cache req = toAffE $ _delete cache req
+deleteReq cache req = toAffE $ _deleteReq cache req
 -- No cache: raw API calls
@@ -123,7 +126,8 @@ pureJson req = do
 foreign import _makeRequest :: forall options trash. Union options trash M.Options =>
                               M.URL -> { method :: M.Method, headers :: M.Headers | options } -> Request
 foreign import _openCache :: String -> Effect (Promise Cache)
-foreign import _delete :: Cache -> Request -> Effect (Promise Unit)
+foreign import _delete :: String -> Effect (Promise Unit)
+foreign import _deleteReq :: Cache -> Request -> Effect (Promise Unit)
 foreign import _add :: Cache -> Request -> Effect (Promise Unit)
 foreign import _match :: Cache -> Request -> Effect (Promise F.Foreign)
 foreign import _fetch :: Request -> Effect (Promise F.Foreign)
--- a/src/index.html
+++ b/src/index.html
@@ -16,6 +16,7 @@
        <link href="styles/Login.css" rel="stylesheet" type="text/css" />
        <link href="styles/Tree.css" rel="stylesheet" type="text/css" />
        <link href="styles/CodeEditor.css" rel="stylesheet" type="text/css" />
+        <link href="styles/Styles.css" rel="stylesheet" type="text/css" />
        <link href="styles/range-slider.css" rel="stylesheet" type="text/css" />
        <style>
         * {margin: 0; padding: 0; list-style: none;}