Merge branch 'dev' into dev-ngrams-refactoring

dist/styles/Tree.css

@@ -14,4 +14,41 @@
   cursor: wait;
 }
 
+.progress-pie {
+  background: rgba(51, 122, 183, 0.1);
+  border-radius: 100%;
+  height: calc(var(--size, 14) * 1px);
+  overflow: hidden;
+  position: relative;
+  width: calc(var(--size, 14) * 1px);
+}
+.progress-pie .progress-pie-segment {
+  --a: calc(var(--over50, 0) * -100%);
+  --b: calc((1 + var(--over50, 0)) * 100%);
+  --degrees: calc((var(--offset, 0) / 100) * 360);
+  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+  height: 100%;
+  position: absolute;
+  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
+  transform-origin: 50% 100%;
+  width: 100%;
+  z-index: calc(1 + var(--over50));
+}
+.progress-pie .progress-pie-segment:after, .progress-pie .progress-pie-segment:before {
+  background: var(--bg, #337ab7);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.progress-pie .progress-pie-segment:before {
+  --degrees: calc((var(--value, 45) / 100) * 360);
+  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
+  transform-origin: 50% 0%;
+}
+.progress-pie .progress-pie-segment:after {
+  opacity: var(--over50, 0);
+}
+
 /*# sourceMappingURL=Tree.css.map */

dist/styles/Tree.sass

@@ -9,3 +9,41 @@
         cursor: pointer
       &.disabled
         cursor: wait
+
+// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
+.progress-pie
+  background: rgba(51, 122, 183, 0.1)
+  border-radius: 100%
+  height: calc(var(--size, 14) * 1px)
+  overflow: hidden
+  position: relative
+  width: calc(var(--size, 14) * 1px)
+
+  .progress-pie-segment
+    --a: calc(var(--over50, 0) * -100%)
+    --b: calc((1 + var(--over50, 0)) * 100%)
+    --degrees: calc((var(--offset, 0) / 100) * 360)
+    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
+    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
+    height: 100%
+    position: absolute
+    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
+    transform-origin: 50% 100%
+    width: 100%
+    z-index: calc(1 + var(--over50))
+
+    &:after,
+    &:before
+      background: var(--bg, rgb(51, 122, 183))
+      content: ''
+      height: 100%
+      position: absolute
+      width: 100%
+
+    &:before
+      --degrees: calc((var(--value, 45) / 100) * 360)
+      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
+      transform-origin: 50% 0%
+
+    &:after
+      opacity: var(--over50, 0)

src/Gargantext/Components/Forest/Tree.purs

@@ -168,14 +168,14 @@ type PerformActionProps =
 performAction :: Record PerformActionProps
               -> Action
               -> Aff Unit
-performAction { openNodes: (_ /\ setOpenNodes)
-              , reload: (_ /\ setReload)
-              , session
-              , tree: (NTree (LNode {id}) _) } DeleteNode = do
+performAction p@{ openNodes: (_ /\ setOpenNodes)
+                , reload: (_ /\ setReload)
+                , session
+                , tree: (NTree (LNode {id}) _) } DeleteNode = do
   void $ deleteNode session id
   liftEffect do
     setOpenNodes (Set.delete (mkNodeId session id))
-    setReload (_ + 1)
+  performAction p RefreshTree
 
 performAction { reload: (_ /\ setReload)
               , session
@@ -183,23 +183,21 @@ performAction { reload: (_ /\ setReload)
               , tree: (NTree (LNode {id}) _) } (SearchQuery task) = do
   liftEffect $ setAsyncTasks $ A.cons task
   liftEffect $ log2 "[performAction] SearchQuery task:" task
-  liftEffect $ setReload (_ + 1)
 
-performAction { reload: (_ /\ setReload)
-              , session
-              , tree: (NTree (LNode {id}) _) } (Submit name)  = do
+performAction p@{ reload: (_ /\ setReload)
+                , session
+                , tree: (NTree (LNode {id}) _) } (Submit name)  = do
   void $ renameNode session id $ RenameValue {name}
-  liftEffect do
-    setReload (_ + 1)
+  performAction p RefreshTree
 
-performAction { openNodes: (_ /\ setOpenNodes)
-              , reload: (_ /\ setReload)
-              , session
-              , tree: (NTree (LNode {id}) _) } (CreateSubmit name nodeType) = do
+performAction p@{ openNodes: (_ /\ setOpenNodes)
+                , reload: (_ /\ setReload)
+                , session
+                , tree: (NTree (LNode {id}) _) } (CreateSubmit name nodeType) = do
   void $ createNode session id $ CreateValue {name, nodeType}
   liftEffect do
     setOpenNodes (Set.insert (mkNodeId session id))
-    setReload (_ + 1)
+  performAction p RefreshTree
 
 performAction { session
               , tasks: (_ /\ setAsyncTasks)
@@ -207,3 +205,6 @@ performAction { session
   task <- uploadFile session nodeType id fileType {mName, contents}
   liftEffect $ setAsyncTasks $ A.cons task
   liftEffect $ log2 "uploaded, task:" task
+
+performAction { reload: (_ /\ setReload) } RefreshTree = do
+  liftEffect $ setReload (_ + 1)

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

@@ -19,6 +19,7 @@ data Action = CreateSubmit String GT.NodeType
             | SearchQuery GT.AsyncTaskWithType
             | Submit       String
             | UploadFile  GT.NodeType FileType (Maybe String) UploadFileContents
+            | RefreshTree
 
 -----------------------------------------------------
 -- UploadFile Action

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

@@ -24,7 +24,7 @@ import Gargantext.Components.Forest.Tree.Node.Action (Action(..), DroppedFile(..
 import Gargantext.Components.Forest.Tree.Node.Action.Add (NodePopup(..), createNodeView)
 import Gargantext.Components.Forest.Tree.Node.Action.Rename (renameBox)
 import Gargantext.Components.Forest.Tree.Node.Action.Upload (uploadFileView, fileTypeView, uploadTermListView, copyFromCorpusView)
-import Gargantext.Components.Forest.Tree.Node.ProgressBar (asyncProgressBar)
+import Gargantext.Components.Forest.Tree.Node.ProgressBar (asyncProgressBar, BarType(..))
 import Gargantext.Components.GraphExplorer.API as GEAPI
 import Gargantext.Components.Search.SearchBar (searchBar)
 import Gargantext.Components.Search.SearchField (Search, defaultSearch, isIsTex)
@@ -89,11 +89,15 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session } = R.createElement el
               }
           [ nodeText { isSelected: (mCorpusId mCurrentRoute) == (Just id)
                      , name: name' props } ]
-        , nodeActions { id, nodeType, session }
+        , nodeActions { id
+                      , nodeType
+                      , refreshTree: const $ dispatch RefreshTree
+                      , session }
         , fileTypeView {dispatch, droppedFile, id, isDragOver, nodeType}
         , H.div {} (map (\t -> asyncProgressBar { asyncTask: t
+                                                , barType: Pie
                                                 , corpusId: id
-                                                , onFinish: \_ -> onAsyncTaskFinish t
+                                                , onFinish: const $ onAsyncTaskFinish t
                                                 , session }) asyncTasks)
         ]
           where
@@ -192,6 +196,7 @@ type NodeActionsProps =
   (
     id :: ID
   , nodeType :: GT.NodeType
+  , refreshTree :: Unit -> Aff Unit
   , session :: Session
   )
 
@@ -201,24 +206,21 @@ nodeActions p = R.createElement nodeActionsCpt p []
 nodeActionsCpt :: R.Component NodeActionsProps
 nodeActionsCpt = R.hooksComponent "G.C.F.T.N.B.nodeActions" cpt
   where
-    cpt { id, nodeType: GT.Graph, session } _ = do
-      refresh <- R.useState' 0
-
-      useLoader (id /\ fst refresh) (graphVersions session) $ \gv ->
-        nodeActionsGraph { id, graphVersions: gv, session, triggerRefresh: triggerRefresh refresh }
+    cpt { id, nodeType: GT.Graph, refreshTree, session } _ = do
+      useLoader id (graphVersions session) $ \gv ->
+        nodeActionsGraph { id, graphVersions: gv, session, triggerRefresh: triggerRefresh refreshTree }
     cpt _ _ = do
       pure $ H.div {} []
 
-    graphVersions session (graphId /\ _) =
-      GEAPI.graphVersions { graphId, session }
-    triggerRefresh (_ /\ setRefresh) _ = setRefresh $ (+) 1
+    graphVersions session graphId = GEAPI.graphVersions { graphId, session }
+    triggerRefresh refreshTree = refreshTree
 
 type NodeActionsGraphProps =
   (
     id :: ID
   , graphVersions :: Record GEAPI.GraphVersions
   , session :: Session
-  , triggerRefresh :: Unit -> Effect Unit
+  , triggerRefresh :: Unit -> Aff Unit
   )
 
 nodeActionsGraph :: Record NodeActionsGraphProps -> R.Element
@@ -239,7 +241,7 @@ type GraphUpdateButtonProps =
   (
     id :: ID
   , session :: Session
-  , triggerRefresh :: Unit -> Effect Unit
+  , triggerRefresh :: Unit -> Aff Unit
   )
 
 graphUpdateButton :: Record GraphUpdateButtonProps -> R.Element
@@ -262,7 +264,7 @@ graphUpdateButtonCpt = R.hooksComponent "G.C.F.T.N.B.graphUpdateButton" cpt
             liftEffect $ setEnabled $ const false
             g <- GEAPI.updateGraphVersions { graphId: id, session }
             liftEffect $ setEnabled $ const true
-            liftEffect $ triggerRefresh unit
+            triggerRefresh unit
           pure unit
 
 -- END nodeActions

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

@@ -19,9 +19,13 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 
 
+data BarType = Bar | Pie
+
+
 type Props =
   (
     asyncTask :: GT.AsyncTaskWithType
+  , barType   :: BarType
   , corpusId  :: ID
   , onFinish  :: Unit -> Effect Unit
   , session   :: Session
@@ -32,9 +36,9 @@ asyncProgressBar :: Record Props -> R.Element
 asyncProgressBar p = R.createElement asyncProgressBarCpt p []
 
 asyncProgressBarCpt :: R.Component Props
-asyncProgressBarCpt = R.hooksComponent "G.C.F.T.N.asyncProgressBar" cpt
+asyncProgressBarCpt = R.hooksComponent "G.C.F.T.N.PB.asyncProgressBar" cpt
   where
-    cpt props@{asyncTask: (GT.AsyncTaskWithType {task: GT.AsyncTask {id}}), corpusId, onFinish} _ = do
+    cpt props@{asyncTask: (GT.AsyncTaskWithType {task: GT.AsyncTask {id}}), barType, corpusId, onFinish} _ = do
       (progress /\ setProgress) <- R.useState' 0.0
       intervalIdRef <- R.useRef Nothing
 
@@ -57,16 +61,41 @@ asyncProgressBarCpt = R.hooksComponent "G.C.F.T.N.asyncProgressBar" cpt
         pure unit
 
 
+      pure $ progressIndicator { barType, label: id, progress: toInt progress }
+
+    toInt :: Number -> Int
+    toInt n = unsafePartial $ fromJust $ fromNumber n
+
+type ProgressIndicatorProps =
+  (
+    barType :: BarType
+  , label :: String
+  , progress :: Int
+  )
+
+progressIndicator :: Record ProgressIndicatorProps -> R.Element
+progressIndicator p = R.createElement progressIndicatorCpt p []
+
+progressIndicatorCpt :: R.Component ProgressIndicatorProps
+progressIndicatorCpt = R.hooksComponent "G.C.F.T.N.PB.progressIndicator" cpt
+  where
+    cpt { barType: Bar, label, progress } _ = do
       pure $
         H.div { className: "progress" } [
           H.div { className: "progress-bar"
                 , role: "progressbar"
-                , style: { width: (show $ toInt progress) <> "%" }
-                } [ H.text id ]
+                , style: { width: (show $ progress) <> "%" }
+                } [ H.text label ]
         ]
 
-    toInt :: Number -> Int
-    toInt n = unsafePartial $ fromJust $ fromNumber n
+    cpt { barType: Pie, label, progress } _ = do
+      pure $
+        H.div { className: "progress-pie" } [
+          H.div { className: "progress-pie-segment"
+                , style: { "--over50": if progress < 50 then "0" else "1"
+                         , "--value": show $ progress } } [
+          ]
+        ]
 
 queryProgress :: Record Props -> Aff GT.AsyncProgress
 queryProgress {asyncTask: GT.AsyncTaskWithType {task: GT.AsyncTask {id}, typ}, corpusId, session} = get session p