[tree] progress status as a circle

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/Node/ProgressBar.purs

@@ -36,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
 
@@ -61,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