Merge branch 'dev' into 395-dev-ps-0.15-update

dist/styles/bootstrap-darkster.css

@@ -6220,6 +6220,10 @@ h3 {
   background-image: radial-gradient(circle, #000000 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-default.css

@@ -6173,6 +6173,10 @@ h3 {
   background-image: radial-gradient(circle, #343a40 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-greyson.css

@@ -5929,6 +5929,10 @@ h3 {
   background-image: radial-gradient(circle, #1e2b37 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-herbie.css

@@ -6177,6 +6177,10 @@ h3 {
   background-image: radial-gradient(circle, #072247 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-monotony.css

@@ -6178,6 +6178,10 @@ h3 {
   background-image: radial-gradient(circle, #111111 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

package.json

 {
     "name": "Gargantext",
-    "version": "0.0.5.8.8.2",
+    "version": "0.0.5.8.9",
     "scripts": {
         "generate-purs-packages-nix": "./nix/generate-purs-packages.nix",
         "generate-psc-packages-nix": "./nix/generate-packages-json.bash",

src/Gargantext/Components/Category.purs

@@ -7,7 +7,8 @@ import Data.Array as A
 import Data.Generic.Rep (class Generic)
 import Data.Map as Map
 import Data.Maybe (Maybe(..))
-import Effect.Aff (launchAff)
+import Effect.Aff (launchAff_)
+import Effect.Class (liftEffect)
 import Gargantext.Components.Category.Types (Category(..), Star(..), cat2score, categories, clickAgain, star2score, stars)
 import Gargantext.Components.DocsTable.Types (DocumentsView(..), LocalCategories, LocalUserScore)
 import Gargantext.Config.REST (AffRESTError)
@@ -15,6 +16,7 @@ import Gargantext.Routes (SessionRoute(NodeAPI))
 import Gargantext.Sessions (Session, put)
 import Gargantext.Types (NodeID, NodeType(..))
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Simple.JSON as JSON
@@ -23,19 +25,24 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.Category"
 
 type RatingProps =
-  ( score              :: Star
+  ( chartReload        :: T2.ReloadS
   , nodeId             :: NodeID
   , row                :: DocumentsView
+  , score              :: Star
   , session            :: Session
   , setLocalCategories :: R.Setter LocalUserScore
   )
 
 rating :: R2.Component RatingProps
 rating = R.createElement ratingCpt
-
 ratingCpt :: R.Component RatingProps
 ratingCpt = here.component "rating" cpt where
-  cpt { nodeId, row: DocumentsView r, score, session, setLocalCategories } _ =
+  cpt { chartReload
+      , nodeId
+      , row: DocumentsView r
+      , score
+      , session
+      , setLocalCategories } _ =
     pure $ H.div { className:"flex" } divs where
       divs = map (\s -> H.div { className : icon' score s
                               , on: { click: onClick s } } []) stars
@@ -48,9 +55,9 @@ ratingCpt = here.component "rating" cpt where
                   else c
 
         setLocalCategories $ Map.insert r._id c'
-        void $ launchAff
-             $ putRating session nodeId
-             $ RatingQuery { nodeIds: [r._id], rating: c' }
+        launchAff_ $ do
+          _ <- putRating session nodeId $ RatingQuery { nodeIds: [r._id], rating: c' }
+          liftEffect $ T2.reload chartReload
 
 newtype RatingQuery =
   RatingQuery { nodeIds :: Array Int
@@ -98,9 +105,8 @@ carousselCpt = here.component "caroussel" cpt
 
         onClick c = \_-> do
           setLocalCategories $ Map.insert r._id c
-          void $ launchAff
-               $ putCategories session nodeId
-               $ CategoryQuery {nodeIds: [r._id], category: c}
+          launchAff_ $ do
+            putCategories session nodeId $ CategoryQuery {nodeIds: [r._id], category: c}
 
 icon :: Category -> Boolean -> String
 icon cat b = btn b $ "fa fa-" <> (color $ size b $ icon' cat b)

src/Gargantext/Components/DocsTable.purs

@@ -74,6 +74,7 @@ type Path a =
 type CommonProps =
   ( boxes          :: Boxes
   , cacheState     :: T.Box NT.CacheState
+  , chartReload :: T2.ReloadS
   , frontends      :: Frontends
   , listId         :: Int
   , mCorpusId      :: Maybe Int
@@ -88,8 +89,8 @@ type CommonProps =
   )
 
 type LayoutProps =
-  ( chart      :: R.Element
-  , showSearch :: Boolean
+  ( chart       :: R.Element
+  , showSearch  :: Boolean
   | CommonProps
   -- , path      :: Record (Path a)
   )
@@ -126,6 +127,7 @@ docViewCpt = here.component "docView" cpt where
   cpt { layout: { boxes
                 , cacheState
                 , chart
+                , chartReload
                 , frontends
                 , listId
                 , mCorpusId
@@ -204,20 +206,21 @@ docViewCpt = here.component "docView" cpt where
             ]
           , H.div {className: "col-md-12"}
             [ pageLayout { boxes
-                        , cacheState
-                        , frontends
-                        , key: "docView-" <> (show cacheState')
-                        , listId
-                        , mCorpusId
-                        , nodeId
-                        , params
-                        , query: query'
-                        , session
-                        , sidePanel
-                        , tabType
-                        , totalRecords
-                        , yearFilter
-                        } []
+                         , cacheState
+                         , chartReload
+                         , frontends
+                         , key: "docView-" <> (show cacheState')
+                         , listId
+                         , mCorpusId
+                         , nodeId
+                         , params
+                         , query: query'
+                         , session
+                         , sidePanel
+                         , tabType
+                         , totalRecords
+                         , yearFilter
+                         } []
             ]
           ]
         ]
@@ -434,6 +437,7 @@ pageLayoutCpt = here.component "pageLayout" cpt where
           , mkRequest
           , path
           , renderer: paint
+          , spinnerClass: Nothing
           }
       NT.CacheOff -> do
         localCategories <- T.useBox (Map.empty :: LocalUserScore)
@@ -448,7 +452,7 @@ pageLayoutCpt = here.component "pageLayout" cpt where
               pure $ handleResponse <$> eRes
         let render (Tuple count documents) = pagePaintRaw { documents
                                                           , layout: props' { params = paramsS'
-                                                                          , totalRecords = count }
+                                                                           , totalRecords = count }
                                                           , localCategories
                                                           , params: paramsS } []
         let errorHandler = logRESTError here "[pageLayout]"
@@ -515,9 +519,10 @@ type PagePaintRawProps =
 pagePaintRaw :: R2.Component PagePaintRawProps
 pagePaintRaw = R.createElement pagePaintRawCpt
 pagePaintRawCpt :: R.Component PagePaintRawProps
-pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
+pagePaintRawCpt = here.component "pagePaintRaw" cpt where
   cpt { documents
       , layout: { boxes
+                , chartReload
                 , frontends
                 , listId
                 , mCorpusId
@@ -539,7 +544,7 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
       { colNames
       , container: TT.defaultContainer
       , params
-      , rows: rows reload localCategories' mCurrentDocId'
+      , rows: rows reload chartReload localCategories' mCurrentDocId'
       , syncResetButton : [ H.div {} [] ]
       , totalRecords
       , wrapColElts
@@ -554,9 +559,9 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
           | otherwise = Routes.Document sid listId
         colNames = TT.ColumnName <$> [ "Show", "Tag", "Date", "Title", "Source", "Score" ]
         wrapColElts = const identity
-        rows reload localCategories' mCurrentDocId' = row reload <$> A.toUnfoldable documents
+        rows reload chartReload localCategories' mCurrentDocId' = row <$> A.toUnfoldable documents
           where
-            row reload dv@(DocumentsView r@{ _id, category }) =
+            row dv@(DocumentsView r@{ _id, category }) =
               { row:
                 TT.makeRow [ -- H.div {} [ H.a { className, style, on: {click: click Favorite} } [] ]
                             H.div { className: "" }
@@ -568,7 +573,8 @@ pagePaintRawCpt = here.component "pagePaintRawCpt" cpt where
                                   ]
                           --, H.div { className: "column-tag flex" } [ caroussel { category: cat, nodeId, row: dv, session, setLocalCategories } [] ]
                           , H.div { className: "column-tag flex" }
-                                  [ rating { nodeId
+                                  [ rating { chartReload
+                                           , nodeId
                                            , row: dv
                                            , score: cat
                                            , setLocalCategories: \lc -> T.modify_ lc localCategories

src/Gargantext/Components/FolderView.purs

@@ -23,7 +23,8 @@ import Gargantext.Components.Forest.Tree.Node.Action.Update (updateRequest)
 import Gargantext.Components.Forest.Tree.Node.Action.Upload (uploadArbitraryFile, uploadFile)
 import Gargantext.Components.Forest.Tree.Node.Box (nodePopupView)
 import Gargantext.Components.Forest.Tree.Node.Tools.SubTree.Types (SubTreeOut(..))
-import Gargantext.Components.GraphQL.Endpoints (getTreeFirstLevel)
+import Gargantext.Components.GraphQL.Endpoints (getNode, getTreeFirstLevel)
+import Gargantext.Components.GraphQL.Node (Node)
 import Gargantext.Components.GraphQL.Tree (TreeFirstLevel, TreeNode)
 import Gargantext.Config.REST (AffRESTError, logRESTError)
 import Gargantext.Config.Utils (handleRESTError)
@@ -32,7 +33,7 @@ import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude (Ordering, Unit, bind, compare, discard, otherwise, pure, unit, void, ($), (<$>), (<>))
 import Gargantext.Routes (AppRoute(Home), nodeTypeAppRoute)
 import Gargantext.Sessions (Session(..), sessionId)
-import Gargantext.Types (NodeType(..))
+import Gargantext.Types (NodeType(..), SessionId)
 import Gargantext.Types as GT
 import Gargantext.Utils.Popover as Popover
 import Gargantext.Utils.Reactix as R2
@@ -86,82 +87,58 @@ folderViewMain :: R2.Component FolderViewProps
 folderViewMain = R.createElement folderViewMainCpt
 folderViewMainCpt :: R.Component FolderViewProps
 folderViewMainCpt = here.component "folderViewMainCpt" cpt where
-  cpt { boxes
-      , folders: {parent: parentNode, children}
-      , nodeId
-      , reload
-      , session
-      , setPopoverRef } _ = do
-    let foldersS = A.sortBy sortFolders children
-    let parent = makeParentFolder parentNode session
-    let childrenEl = makeFolderElements foldersS { boxes, nodeId, reload, session, setPopoverRef }
+  cpt props@{ folders: {parent: parentNode, children, root} } _ = do
+    let folders' = A.sortBy sortFolders children
+    let parent = makeParentFolder root parentNode props
+    let childrenEl = makeFolderElements folders' props
 
     pure $ H.div {className: "fv folders"} $ parent <> childrenEl
 
-  makeFolderElements foldersS props = makeFolderElementsMap <$> foldersS where
+  makeFolderElements :: Array TreeNode -> Record FolderViewProps -> Array R.Element
+  makeFolderElements folders' props = makeFolderElementsMap <$> folders' where
     makeFolderElementsMap :: TreeNode -> R.Element
     makeFolderElementsMap node = folder { boxes: props.boxes
-                                                          , nodeId: node.id
-                                                          , nodeType: node.node_type
-                                                          , parentId: props.nodeId
-                                                          , reload: props.reload
-                                                          , session: props.session
-                                                          , setPopoverRef: props.setPopoverRef
-                                                          , style: FolderChild
-                                                          , text: node.name } []
-
-  makeParentFolder :: Maybe TreeNode -> Session -> Array R.Element
-  makeParentFolder (Just parent) session =
-    [ folderSimple {style: FolderUp, text: "..", nodeId: parent.id, nodeType: parent.node_type, session: session} [] ]
-  makeParentFolder Nothing _ = []
-
+                                        , nodeId: node.id
+                                        , linkId: node.id
+                                        , nodeType: node.node_type
+                                        , linkNodeType: node.node_type
+                                        , parentId: props.nodeId
+                                        , reload: props.reload
+                                        , session: props.session
+                                        , setPopoverRef: props.setPopoverRef
+                                        , style: FolderChild
+                                        , text: node.name } []
+
+  makeParentFolder :: TreeNode -> Maybe TreeNode -> Record FolderViewProps -> Array R.Element
+  makeParentFolder root (Just parent) props =
+    [ folder { boxes: props.boxes
+             , nodeId: root.id
+             , linkId: parent.id
+             , linkNodeType: parent.node_type
+             , nodeType: root.node_type
+             , parentId: parent.id
+             , reload: props.reload
+             , session: props.session
+             , setPopoverRef: props.setPopoverRef
+             , style: FolderUp
+             , text: root.name } [] ]
+  makeParentFolder _ Nothing _ = []
 
   sortFolders :: TreeNode-> TreeNode -> Ordering
   sortFolders a b = compare a.id b.id
 
-type FolderSimpleProps =
-  (
-    style :: FolderStyle
-  , text :: String
-  , nodeType :: GT.NodeType
-  , nodeId :: Int
-  , session :: Session
-  )
-
-folderSimple :: R2.Component FolderSimpleProps
-folderSimple = R.createElement folderSimpleCpt
-
-folderSimpleCpt :: R.Component FolderSimpleProps
-folderSimpleCpt = here.component "folderSimpleCpt" cpt where
-  cpt {style, text, nodeId, session, nodeType} _ = do
-    { goToRoute } <- useLinkHandler
-    let sid = sessionId session
-    let rootId = treeId session
-    pure $ H.button { className: "btn btn-primary"
-               , on: {click: \_ -> goToRoute $ route nodeId rootId nodeType sid} }
-      [ H.i { className: icon style nodeType } []
-      , H.br {}
-      , H.text text ]
-    where
-      treeId (Session {treeId: tId}) = tId
-      route nId rootId nType sid
-        | rootId == nodeId = Home
-        | otherwise        = getFolderPath nType sid nId
-
-
-  icon :: FolderStyle -> GT.NodeType -> String
-  icon FolderUp _ = "fa fa-folder-open"
-  icon _ nodeType = GT.fldr nodeType false
-
-  getFolderPath :: GT.NodeType -> GT.SessionId -> Int -> AppRoute
-  getFolderPath nodeType sid nodeId = fromMaybe Home $ nodeTypeAppRoute nodeType sid nodeId
-
 type FolderProps =
-  ( boxes         :: Boxes
+  ( style         :: FolderStyle
+  , text          :: String
+  , nodeType      :: GT.NodeType
+  , nodeId        :: Int
+  , linkNodeType  :: GT.NodeType
+  , linkId        :: Int
+  , session       :: Session
+  , boxes         :: Boxes
   , parentId      :: Int
   , reload        :: T.Box T2.Reload
   , setPopoverRef :: R.Ref (Maybe (Boolean -> Effect Unit))
-  | FolderSimpleProps
   )
 
 folder :: R2.Component FolderProps
@@ -171,6 +148,8 @@ folderCpt = here.component "folderCpt" cpt where
   cpt props@{ boxes
             , nodeId
             , nodeType
+            , linkId
+            , linkNodeType
             , parentId
             , reload
             , session
@@ -178,6 +157,7 @@ folderCpt = here.component "folderCpt" cpt where
             , style
             , text } _ = do
     let sid = sessionId session
+    let rootId = treeId session
     let dispatch a = performAction a { boxes, nodeId, parentId, reload, session, setPopoverRef }
     popoverRef <- R.useRef null
     { goToRoute } <- useLinkHandler
@@ -197,19 +177,11 @@ folderCpt = here.component "folderCpt" cpt where
               popOverIcon
               , mNodePopupView (Record.merge props { dispatch }) (onPopoverClose popoverRef)
               ]]
-      , H.button {on: {click: \_ -> goToRoute $ getFolderPath nodeType sid nodeId }, className: "btn btn-primary fv btn" } [
+      , H.button {on: {click: \_ -> goToRoute $ route linkId rootId linkNodeType sid }, className: "btn btn-primary fv btn" } [
           H.i {className: icon style nodeType} []
         , H.br {}
         , H.text text]]
 
-
-  icon :: FolderStyle -> GT.NodeType -> String
-  icon FolderUp _ = "fa fa-folder-open"
-  icon _ nodeType = GT.fldr nodeType false
-
-  getFolderPath :: GT.NodeType -> GT.SessionId -> Int -> AppRoute
-  getFolderPath nodeType sid nodeId = fromMaybe Home $ nodeTypeAppRoute nodeType sid nodeId
-
   onPopoverClose popoverRef _ = Popover.setOpen popoverRef false
 
   popOverIcon = H.span { className: "fv action" } [
@@ -226,11 +198,22 @@ folderCpt = here.component "folderCpt" cpt where
                                            , name: props.text
                                            , session: props.session
                                            }
+  route :: Int -> Int -> NodeType -> SessionId -> AppRoute
+  route lId rootId nType sid
+    | rootId == lId    = Home
+    | otherwise        = getFolderPath nType sid lId
+
+  icon :: FolderStyle -> GT.NodeType -> String
+  icon FolderUp _ = "fa fa-folder-open"
+  icon _ nodeType = GT.fldr nodeType false
+
+  getFolderPath :: GT.NodeType -> GT.SessionId -> Int -> AppRoute
+  getFolderPath nodeType sid nodeId = fromMaybe Home $ nodeTypeAppRoute nodeType sid nodeId
 
 backButton :: R2.Component ()
 backButton = R.createElement backButtonCpt
 backButtonCpt :: R.Component ()
-backButtonCpt = R.hooksComponent "backButton" cpt where
+backButtonCpt = here.component "backButton" cpt where
   cpt _ _ = do
     { goToPreviousPage } <- useLinkHandler
 
@@ -242,6 +225,46 @@ backButtonCpt = R.hooksComponent "backButton" cpt where
         H.i { className: "fa fa-arrow-left", title: "Previous view"} []
       ]
 
+backButtonSmart :: R2.Component (nodeId :: Int, session :: Session)
+backButtonSmart = R.createElement backButtonSmartCpt
+
+backButtonSmartCpt :: R.Component (nodeId :: Int, session :: Session)
+backButtonSmartCpt = here.component "backButtonSmart" cpt where
+  cpt {nodeId, session} _ = do
+    reload <- T.useBox T2.newReload
+    reload' <- T.useLive T.unequal reload
+    useLoader { errorHandler
+              , loader: loadNode
+              , path: { nodeId, session, reload: reload' }
+              , render: \node -> backButtonSmartMain { node, session } []
+    }
+    where
+      errorHandler = logRESTError here "[folderView]"
+
+backButtonSmartMain :: R2.Component (node :: Node, session :: Session)
+backButtonSmartMain = R.createElement backButtonSmartMainCpt
+
+backButtonSmartMainCpt :: R.Component (node :: Node, session :: Session)
+backButtonSmartMainCpt = here.component "backButtonSmartMain" cpt where
+  cpt { node, session } _ = do
+    handlers <- useLinkHandler
+    let rootId = treeId session
+
+    pure $ 
+      H.button {
+        className: "btn btn-primary"
+      , on: { click: action rootId node.parent_id handlers }
+      } [
+        H.i { className: "fa fa-arrow-left", title: "Previous view"} []
+      ]
+    where
+      action rootId pId handlers
+        | rootId == pId = handlers.goToRoute Home
+        | otherwise = handlers.goToPreviousPage unit
+
+treeId :: Session -> Int
+treeId (Session {treeId: tId}) = tId
+
 type LoadProps =
   (
     session :: Session,
@@ -252,6 +275,9 @@ type LoadProps =
 loadFolders :: Record LoadProps -> AffRESTError TreeFirstLevel
 loadFolders {nodeId, session} = getTreeFirstLevel session nodeId
 
+loadNode :: Record LoadProps -> AffRESTError Node
+loadNode {nodeId, session} = getNode session nodeId
+
 type PerformActionProps =
   ( boxes         :: Boxes
   , nodeId        :: Int

src/Gargantext/Components/Forest/Tree/Node/Settings.purs

@@ -116,6 +116,7 @@ settingsBox FolderPrivate =
                                 , Annuaire
                                 , NodeFrameWrite
                                 , NodeFrameCalc
+                                , NodeFrameNotebook
                                 ]
                           , Delete
                           ]
@@ -167,6 +168,7 @@ settingsBox Folder =
                                 , Annuaire
                                 , NodeFrameWrite
                                 , NodeFrameCalc
+                                , NodeFrameNotebook
                                 ]
                           , Move moveParameters
                           , Delete
@@ -188,6 +190,7 @@ settingsBox Corpus =
                                 , NodeFrameWrite
                                 , NodeFrameCalc
                                 , Phylo
+                                , NodeFrameNotebook
                                 ]
                           , Link (linkParams Annuaire)
                           , Move moveParameters

src/Gargantext/Components/GraphQL.purs

@@ -71,6 +71,7 @@ queryGql session name q = do
 -- Schema
 type Schema
   = { imt_schools :: {} ==> Array GQLIMT.School
+    , nodes :: { node_id :: Int } ==> Array Node
     , node_parent :: { node_id :: Int, parent_type :: String } ==> Array Node  -- TODO: parent_type :: NodeType
     , user_infos :: { user_id :: Int } ==> Array UserInfo
     , users :: { user_id :: Int } ==> Array User

src/Gargantext/Components/GraphQL/Endpoints.purs

@@ -2,7 +2,7 @@ module Gargantext.Components.GraphQL.Endpoints where
 
 import Gargantext.Prelude
 
-import Gargantext.Components.GraphQL.Node (Node, nodeParentQuery)
+import Gargantext.Components.GraphQL.Node (Node, nodeParentQuery, nodesQuery)
 import Gargantext.Components.GraphQL.Tree (TreeFirstLevel, treeFirstLevelQuery)
 import Gargantext.Components.GraphQL.User (UserInfo, userInfoQuery)
 
@@ -30,6 +30,15 @@ getIMTSchools session = do
   liftEffect $ here.log2 "[getIMTSchools] imt_schools" imt_schools
   pure $ Right imt_schools
 
+getNode :: Session -> Int -> AffRESTError Node
+getNode session nodeId = do
+  { nodes } <- queryGql session "get nodes" $
+              nodesQuery `withVars` { id: nodeId }
+  liftEffect $ here.log2 "[getNode] node" nodes
+  pure $ case A.head nodes of
+    Nothing -> Left (CustomError $ "node with id" <> show nodeId <>" not found")
+    Just node -> Right node
+
 getNodeParent :: Session -> Int -> NodeType -> Aff (Array Node)
 getNodeParent session nodeId parentType = do
   { node_parent } <- queryGql session "get node parent" $

src/Gargantext/Components/GraphQL/Tree.purs

@@ -11,6 +11,7 @@ type TreeNode =
   { name      :: String
   , id        :: Int
   , node_type :: NodeType
+  , parent_id :: Maybe Int
   }
 type TreeFirstLevel =
   { root     :: TreeNode
@@ -22,14 +23,17 @@ treeFirstLevelQuery = { tree: { root_id: Var :: _ "id" Int} =>>
   { root: { name: unit
           , node_type: unit
           , id: unit
+          , parent_id: unit
           }
   , children: { name: unit
               , node_type: unit
               , id: unit
+              , parent_id: unit
               }
   , parent: { name: unit
             , node_type: unit
             , id: unit
+            , parent_id: unit
             }
   }
  }

src/Gargantext/Components/LoadingSpinner.purs

 module Gargantext.Components.LoadingSpinner where
 
+import Data.Maybe (Maybe(..), fromMaybe)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
@@ -10,7 +11,9 @@ import Gargantext.Utils.Reactix as R2
 here :: R2.Here
 here = R2.here "Gargantext.Components.LoadingSpinner"
 
-type Props = ()
+type Props =
+  ( additionalClass :: Maybe String  -- addtional classes for styling the spinner
+  )
 
 loadingSpinner :: Record Props -> R.Element
 loadingSpinner props = R.createElement loadingSpinnerCpt props []
@@ -22,5 +25,7 @@ loadingSpinnerCpt = here.component "LoadingSpinner" cpt
     -- cpt _ _ = H.i {className: "fa fa-globe fa-spin fa-3x fa-fw"} [H.text ""]
 
     -- cpt _ _ = H.i {className: "fa fa-circle-o-notch fa-spin fa-3x fa-fw"} [H.text ""]
-    cpt _ _ = do
-      pure $ H.i {className: "fa fa-spinner fa-pulse fa-3x fa-fw"} [H.text ""]
+    cpt { additionalClass } _ = do
+      pure $ H.i { className: "fa fa-spinner fa-pulse fa-3x fa-fw " <> c } [H.text ""]
+      where
+        c = fromMaybe "" additionalClass

src/Gargantext/Components/NgramsTable.purs

@@ -605,6 +605,7 @@ mainNgramsTableCacheOnCpt = here.component "mainNgramsTableCacheOn" cpt where
       , mkRequest
       , path: path'
       , renderer: render
+      , spinnerClass: Nothing
       }
   versionEndpoint { defaultListId, path: { nodeId, tabType, session } } _ = get session $ R.GetNgramsTableVersion { listId: defaultListId, tabType } (Just nodeId)
   errorHandler = logRESTError here "[mainNgramsTable]"

src/Gargantext/Components/NgramsTable/Loader.purs

@@ -32,13 +32,20 @@ type LoaderWithCacheAPIProps path res ret = (
   , mkRequest      :: path -> GUC.Request
   , path           :: path
   , renderer       :: ret -> R.Element
+  , spinnerClass   :: Maybe String
   )
 
 
 useLoaderWithCacheAPI :: forall path res ret. Eq path => JSON.ReadForeign res => Eq ret =>
                          Record (LoaderWithCacheAPIProps path res ret)
                       -> R.Hooks R.Element
-useLoaderWithCacheAPI { cacheEndpoint, errorHandler, handleResponse, mkRequest, path, renderer } = do
+useLoaderWithCacheAPI { cacheEndpoint
+                      , errorHandler
+                      , handleResponse
+                      , mkRequest
+                      , path
+                      , renderer
+                      , spinnerClass } = do
   state <- T.useBox Nothing
   state' <- T.useLive T.unequal state
 
@@ -48,7 +55,7 @@ useLoaderWithCacheAPI { cacheEndpoint, errorHandler, handleResponse, mkRequest,
                            , mkRequest
                            , path
                            , state }
-  pure $ maybe (loadingSpinner {}) renderer state'
+  pure $ maybe (loadingSpinner { additionalClass: spinnerClass }) renderer state'
 
 type LoaderWithCacheAPIEffectProps path res ret = (
     cacheEndpoint  :: path -> AffRESTError Version

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

@@ -11,10 +11,8 @@ import Effect.Aff (Aff)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.DocsTable as DT
 import Gargantext.Components.DocsTable.Types (Year)
-import Gargantext.Components.GraphQL.User (UserInfo)
 import Gargantext.Components.NgramsTable as NT
 import Gargantext.Components.NgramsTable.Core as NTC
-import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (ContactData)
 import Gargantext.Components.Nodes.Lists.Types as LTypes
 import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Components.Tab as Tab
@@ -22,6 +20,7 @@ import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), TabSubType(..), TabType(..))
 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
@@ -67,9 +66,10 @@ tabsCpt = here.component "tabs" cpt where
   cpt props _ = do
     activeTab <- T.useBox 0
     yearFilter <- T.useBox (Nothing :: Maybe Year)
+    chartReload <- T.useBox T2.newReload
 
-    pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter props }
-  tabs' yearFilter props@{ boxes, defaultListId, sidePanel } =
+    pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter chartReload props }
+  tabs' yearFilter chartReload props@{ boxes, defaultListId, sidePanel } =
     [ "Documents"     /\ docs
     , "Patents"       /\ ngramsView (viewProps Patents)
     , "Books"         /\ ngramsView (viewProps Books)
@@ -78,7 +78,7 @@ tabsCpt = here.component "tabs" cpt where
     ] where
       viewProps mode = Record.merge props { mode }
       totalRecords = 4736  -- TODO lol
-      docs = DT.docViewLayout (Record.merge { boxes, sidePanel } $ Record.merge dtCommon dtExtra)
+      docs = DT.docViewLayout (Record.merge { boxes, chartReload, sidePanel } $ Record.merge dtCommon dtExtra)
       dtCommon = RX.pick props :: Record DTCommon
       dtExtra =
         { chart: mempty

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

@@ -12,7 +12,6 @@ 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.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
@@ -20,6 +19,7 @@ import Gargantext.Ends (Frontends)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (CTabNgramType(..), PTabNgramType(..), TabSubType(..), TabType(..))
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Toestand as T
 
@@ -72,10 +72,11 @@ tabsCpt = here.component "tabs" cpt
         } _ = do
       activeTab <- T.useBox 0
       yearFilter <- T.useBox (Nothing :: Maybe Year)
+      chartReload <- T.useBox T2.newReload
 
-      pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter }
+      pure $ Tab.tabs { activeTab, tabs: tabs' yearFilter chartReload }
       where
-        tabs' yearFilter =
+        tabs' yearFilter chartReload =
           [ "Documents"     /\ docs
           , "Patents"       /\ ngramsView patentsView []
           , "Books"         /\ ngramsView booksView []
@@ -110,6 +111,7 @@ tabsCpt = here.component "tabs" cpt
               { boxes
               , cacheState
               , chart
+              , chartReload
               , frontends
               , listId: defaultListId
               , mCorpusId: Nothing

src/Gargantext/Components/Nodes/Corpus.purs

@@ -68,20 +68,22 @@ corpusLayoutMainCpt = here.component "corpusLayoutMain" cpt
         pure $ GR.CorpusCode (sessionId session) nodeId
       -- Render
       pure $
-
         H.div {}
         [
-          tileMenu
-          { boxes
-          , currentTile: Just corpusCodeRoute
-          , xTile: Just corpusCodeRoute
-          , yTile: Just corpusCodeRoute
-          }
-          [
-            H.button
-            { className: "btn btn-primary" }
+          R2.row [
+            FV.backButtonSmart { nodeId, session } []
+          , tileMenu
+            { boxes
+            , currentTile: Just corpusCodeRoute
+            , xTile: Just corpusCodeRoute
+            , yTile: Just corpusCodeRoute
+            }
             [
-              H.i { className: "fa fa-code" } []
+              H.button
+              { className: "btn btn-primary" }
+              [
+                H.i { className: "fa fa-code" } []
+              ]
             ]
           ]
         ,

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

@@ -3,6 +3,7 @@ module Gargantext.Components.Nodes.Corpus.Chart.Common where
 import Gargantext.Prelude
 
 import Data.Array as A
+import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
 import Gargantext.Components.Nodes.Corpus.Chart.Types (MetricsProps, ReloadPath)
 import Gargantext.Config.REST (AffRESTError)
@@ -86,4 +87,5 @@ metricsWithCacheLoadViewCpt = here.component "metricsWithCacheLoadView" cpt
                             , handleResponse
                             , mkRequest
                             , path: (reload' /\ path)
-                            , renderer: loaded { boxes, path, reload, session, onClick, onInit } }
+                            , renderer: loaded { boxes, path, reload, session, onClick, onInit }
+                            , spinnerClass: Just "echarts-for-react-spinner" }

src/Gargantext/Components/Nodes/Lists.purs

@@ -49,12 +49,11 @@ listsLayoutWithKey :: R2.Component ( key :: String | Props )
 listsLayoutWithKey = R.createElement listsLayoutWithKeyCpt
 listsLayoutWithKeyCpt :: R.Component ( key :: String | Props )
 listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where
-  cpt { boxes: boxes@{ reloadMainPage }
+  cpt { boxes
       , nodeId
       , session
       , sessionUpdate } _ = do
     activeTab <- T.useBox 0
-    _reloadMainPage' <- T.useLive T.unequal reloadMainPage
 
     let path = { nodeId, session }
 

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

@@ -8,6 +8,7 @@ import Data.Tuple.Nested ((/\))
 import Effect.Class (liftEffect)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.NgramsTable as NT
+import Gargantext.Components.NgramsTable.Core (PageParams)
 import Gargantext.Components.NgramsTable.Core as NTC
 import Gargantext.Components.Nodes.Corpus.Chart.Metrics (metrics)
 import Gargantext.Components.Nodes.Corpus.Chart.Pie (pie, bar)
@@ -51,9 +52,31 @@ tabsCpt = here.component "tabs" cpt where
               , "Sources"    /\ view Sources []
               ]
       common = RX.pick props :: Record Props
-      view mode = ngramsView $ Record.merge common { mode }
+      view mode = tab $ Record.merge common { mode }
 
-type NgramsViewProps = ( mode :: Mode | Props )
+type TabProps = ( mode :: Mode | Props )
+
+tab :: R2.Component TabProps
+tab = R.createElement tabCpt
+
+tabCpt :: R.Component TabProps
+tabCpt = here.component "tab" cpt where
+  cpt props _ = do
+    path <- T.useBox $ NTC.initialPageParams props.session initialPath.corpusId [initialPath.listId] initialPath.tabType
+    pure $ ngramsView (Record.merge props { path }) []
+    where
+      tabNgramType = modeTabType props.mode
+      tabType      = TabCorpus (TabNgramType tabNgramType)
+      listId       = props.corpusData.defaultListId
+      corpusId     = props.corpusId
+      initialPath  = { corpusId
+                      -- , limit: Just 1000
+                      , listId
+                      , tabType
+                      }
+      
+
+type NgramsViewProps = ( path :: T.Box PageParams | TabProps )
 
 ngramsView :: R2.Component NgramsViewProps
 ngramsView = R.createElement ngramsViewCpt
@@ -62,12 +85,11 @@ ngramsViewCpt = here.component "ngramsView" cpt where
   cpt props@{ boxes
             , cacheState
             , corpusData: { defaultListId }
-            , corpusId
             , mode
-            , session } _ = do
+            , session
+            , path } _ = do
       chartsReload <- T.useBox T2.newReload
 
-      path <- T.useBox $ NTC.initialPageParams props.session initialPath.corpusId [initialPath.listId] initialPath.tabType
       { listIds, nodeId, params } <- T.useLive T.unequal path
 
       pure $
@@ -109,12 +131,6 @@ ngramsViewCpt = here.component "ngramsView" cpt where
         tabNgramType = modeTabType mode
         tabType      = TabCorpus (TabNgramType tabNgramType)
         mNgramsType  = mNgramsTypeFromTabType tabType
-        listId       = defaultListId
-        initialPath  = { corpusId
-                       -- , limit: Just 1000
-                       , listId
-                       , tabType
-                       }
 
 
 

src/Gargantext/Components/Nodes/Texts.purs

@@ -6,6 +6,7 @@ import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..))
 import Data.Show.Generic (genericShow)
 import Data.Tuple.Nested ((/\))
+import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Charts.Options.ECharts (dispatchAction)
@@ -16,6 +17,7 @@ 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.Chart.Types as CTypes
 import Gargantext.Components.Nodes.Corpus.Document as D
 import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
 import Gargantext.Components.Nodes.Lists.Types as LT
@@ -203,14 +205,16 @@ tabsCpt = here.component "tabs" cpt
 
       activeTab <- T.useBox 0
 
+      chartReload <- T.useBox T2.newReload
+
       pure $ Tab.tabs {
           activeTab
         , tabs: [
             "Documents"       /\ R.fragment [
-                histo { boxes, path, session, onClick, onInit }
-              , docView' path TabDocs
+                histoRender { boxes, path, onClick, onInit, reload: chartReload, session } []
+              , docView' path chartReload TabDocs
               ]
-          , "Trash"           /\ docView' path TabTrash
+          , "Trash"           /\ docView' path chartReload TabTrash
           -- , "More like fav"   /\ docView' path TabMoreLikeFav
           -- , "More like trash" /\ docView' path TabMoreLikeTrash
           ]
@@ -221,31 +225,47 @@ tabsCpt = here.component "tabs" cpt
                       , listId: corpusData.defaultListId
                       , limit: Nothing
                       , tabType: TabCorpus TabDocs }
-        docView' path tabType = docView { boxes
-                                        , cacheState
-                                        , corpusData
-                                        , corpusId
-                                        , frontends
-                                        , listId: path.listId
-                                        -- , path
-                                        , session
-                                        , tabType
-                                        , sidePanel
-                                        , yearFilter
-                                        } []
+        docView' path chartReload tabType = docView { boxes
+                                                    , cacheState
+                                                    , chartReload
+                                                    , corpusData
+                                                    , corpusId
+                                                    , frontends
+                                                    , listId: path.listId
+                                                      -- , path
+                                                    , session
+                                                    , tabType
+                                                    , sidePanel
+                                                    , yearFilter
+                                                    } []
+
+type HistoProps =
+  ( reload  :: T2.ReloadS
+  | CTypes.Props
+  )
+
+histoRender :: R2.Component HistoProps
+histoRender = R.createElement histoRenderCpt
+histoRenderCpt :: R.Component HistoProps
+histoRenderCpt = here.component "histoRender" cpt where
+  cpt { boxes, path, onClick, onInit, reload, session } _ = do
+    reload' <- T.useLive T.unequal reload
+
+    pure $ histo { boxes, path, onClick, onInit, session }
 
 type DocViewProps a =
-  ( boxes      :: Boxes
-  , cacheState :: T.Box LT.CacheState
-  , corpusData :: CorpusData
-  , corpusId   :: NodeID
-  , frontends  :: Frontends
-  , listId     :: ListId
-  -- , path    :: Record DT.Path
-  , session    :: Session
-  , tabType    :: TabSubType a
-  , sidePanel  :: T.Box (Maybe (Record TT.SidePanel))
-  , yearFilter :: T.Box (Maybe Year)
+  ( boxes       :: Boxes
+  , cacheState  :: T.Box LT.CacheState
+  , chartReload :: T2.ReloadS
+  , corpusData  :: CorpusData
+  , corpusId    :: NodeID
+  , frontends   :: Frontends
+  , listId      :: ListId
+  -- , path     :: Record DT.Path
+  , session     :: Session
+  , tabType     :: TabSubType a
+  , sidePanel   :: T.Box (Maybe (Record TT.SidePanel))
+  , yearFilter  :: T.Box (Maybe Year)
   )
 
 docView :: forall a. R2.Component (DocViewProps a)
@@ -259,6 +279,7 @@ docViewCpt = here.component "docView" cpt
 -- docViewLayoutRec :: forall a. DocViewProps a -> Record DT.LayoutProps
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -270,6 +291,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId
@@ -284,6 +306,7 @@ docViewLayoutRec { boxes
   }
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -295,6 +318,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId
@@ -309,6 +333,7 @@ docViewLayoutRec { boxes
   }
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -320,6 +345,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId
@@ -334,6 +360,7 @@ docViewLayoutRec { boxes
   }
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -345,6 +372,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId
@@ -360,6 +388,7 @@ docViewLayoutRec { boxes
 -- DUMMY
 docViewLayoutRec { boxes
                  , cacheState
+                 , chartReload
                  , corpusId
                  , frontends
                  , listId
@@ -371,6 +400,7 @@ docViewLayoutRec { boxes
   { boxes
   , cacheState
   , chart  : H.div {} []
+  , chartReload
   , frontends
   , listId
   , mCorpusId: Just corpusId

src/Gargantext/Components/Tab.purs

@@ -49,7 +49,6 @@ type TabProps = ( selected :: Int, index :: Int )
 
 tab :: R2.Component TabProps
 tab = R.createElement tabCpt
-
 -- | A tab only shows its contents if it is currently selected
 tabCpt :: R.Component TabProps
 tabCpt = here.component "tab" cpt

src/Gargantext/Hooks/Loader.purs

@@ -62,7 +62,7 @@ loaderCpt = here.component "loader" cpt
     cpt { render, state } _ = do
       state' <- T.useLive T.unequal state
 
-      pure $ maybe (loadingSpinner {}) render state'
+      pure $ maybe (loadingSpinner { additionalClass: Nothing }) render state'
 
 type UseLoaderEffect path state =
   ( errorHandler :: RESTError -> Effect Unit
@@ -142,6 +142,7 @@ type LoaderWithCacheAPIProps path res ret =
   , mkRequest      :: path -> GUC.Request
   , path           :: path
   , renderer       :: ret -> R.Element
+  , spinnerClass   :: Maybe String
   )
 
 useLoaderWithCacheAPI :: forall path res ret.
@@ -153,7 +154,8 @@ useLoaderWithCacheAPI { boxes
                       , handleResponse
                       , mkRequest
                       , path
-                      , renderer } = do
+                      , renderer
+                      , spinnerClass } = do
   state <- T.useBox Nothing
   state' <- T.useLive T.unequal state
 
@@ -163,7 +165,7 @@ useLoaderWithCacheAPI { boxes
                            , mkRequest
                            , path
                            , state }
-  pure $ maybe (loadingSpinner {}) renderer state'
+  pure $ maybe (loadingSpinner { additionalClass: spinnerClass }) renderer state'
 
 type LoaderWithCacheAPIEffectProps path res ret = (
     boxes          :: Boxes

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -158,8 +158,13 @@ let sigmaMouseSelector = (sigma, options) => {
       };
     };
 
-    _offset = calculateOffset(renderer.container);
-
+    // Container resize event listener
+    // @TODO: debounce?
+    const onContainerResize = (entries) => {
+      _offset = calculateOffset(_container);
+    };
+    const _resizeObserver = new ResizeObserver( onContainerResize );
+    _resizeObserver.observe(_container);
   }
 }
 

src/Gargantext/Utils/Toestand.purs

@@ -55,3 +55,4 @@ useMemberBox val box = T.useFocused (Set.member val) (toggleSet val) box
 toggleSet :: forall s. Ord s => s -> Boolean -> Set s -> Set s
 toggleSet val true  set = Set.insert val set
 toggleSet val false set = Set.delete val set
+

src/sass/_components.sass

 @import "./components/_grouped.scss"
+@import "./components/_loading_spinner.scss"

src/sass/components/_loading_spinner.scss

+.echarts-for-react {
+    height: 300px;
+}