Merge remote-tracking branch 'origin/375-dev-docs-focus-rc1.x' into dev

dist/styles/bootstrap-darkster.css

@@ -7827,6 +7827,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7889,6 +7892,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

dist/styles/bootstrap-default.css

@@ -7780,6 +7780,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7842,6 +7845,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

dist/styles/bootstrap-greyson.css

@@ -7536,6 +7536,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7598,6 +7601,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

dist/styles/bootstrap-herbie.css

@@ -7784,6 +7784,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7846,6 +7849,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

dist/styles/bootstrap-monotony.css

@@ -7785,6 +7785,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7847,6 +7850,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

src/Gargantext/Components/Forest/Tree/Node.js

+exports.nodeUserRegexp = /(@{1}.*).gargantext.org$/;

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

-module Gargantext.Components.Forest.Tree.Node where
+module Gargantext.Components.Forest.Tree.Node
+  ( nodeSpan
+  , blankNodeSpan
+  ) where
 
 import Gargantext.Prelude
 
+import Data.Array.NonEmpty as NArray
 import Data.Foldable (intercalate)
-import Data.Maybe (Maybe(..))
+import Data.Maybe (Maybe(..), maybe)
 import Data.Nullable (null)
+import Data.String.Regex as Regex
 import Data.Symbol (SProxy(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
@@ -43,6 +48,9 @@ import Reactix.DOM.HTML as H
 import Record as Record
 import Toestand as T
 
+-- (?) never been able to properly declare PureScript Regex...
+foreign import nodeUserRegexp :: Regex.Regex
+
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node"
 
@@ -285,6 +293,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
           , href
           , id
           , name: name' props.name nodeType session
+          , type: nodeType
           }
         ,
 
@@ -411,25 +420,25 @@ folderIconCpt = here.component "folderIcon" cpt where
 
 -----------------------------------------------
 
-
 type NodeLinkProps =
   ( callback   :: Unit -> Effect Unit
   , href       :: String
   , id         :: Int
   , name       :: GT.Name
+  , type       :: GT.NodeType
   )
 
 nodeLink :: R2.Leaf NodeLinkProps
 nodeLink = R2.leaf nodeLinkCpt
 nodeLinkCpt :: R.Component NodeLinkProps
-nodeLinkCpt = here.component "nodeLink" cpt
-  where
+nodeLinkCpt = here.component "nodeLink" cpt where
   cpt { callback
       , href
       , id
       , name
+      , type: nodeType
       } _ = do
-
+    -- Computed
     let
       tid = tooltipId name id
 
@@ -437,6 +446,7 @@ nodeLinkCpt = here.component "nodeLink" cpt
         { href
         } `Record.merge` B.tooltipBind tid
 
+    -- Render
     pure $
 
       H.div
@@ -447,10 +457,18 @@ nodeLinkCpt = here.component "nodeLink" cpt
         H.a
         aProps
         [
-            B.span_ $ textEllipsisBreak 15 name
+          B.span_ $ nodeLinkText nodeType name
         ]
       ]
 
+nodeLinkText :: GT.NodeType -> String -> String
+nodeLinkText GT.NodeUser s = s # (truncateNodeUser)
+                         >>> maybe s identity
+nodeLinkText _           s = textEllipsisBreak 15 s
+
+truncateNodeUser :: String -> Maybe String
+truncateNodeUser = Regex.match (nodeUserRegexp) >=> flip NArray.index 1 >>> join
+
 ---------------------------------------------------
 
 type NodeTooltipProps =

src/Gargantext/Components/Forest/Tree/Node/Tools/Sync.purs

@@ -31,15 +31,15 @@ type NodeActionsGraphProps =
 nodeActionsGraph :: R2.Component NodeActionsGraphProps
 nodeActionsGraph = R.createElement nodeActionsGraphCpt
 nodeActionsGraphCpt :: R.Component NodeActionsGraphProps
-nodeActionsGraphCpt = here.component "nodeActionsGraph" cpt
-  where
-    cpt { id, graphVersions, session, refresh } _ = do
-      pure $ H.div { className: "node-actions" } [
-        if graphVersions.gv_graph == Just graphVersions.gv_repo then
-          H.div {} []
-        else
+nodeActionsGraphCpt = here.component "nodeActionsGraph" cpt where
+  cpt { id, graphVersions, session, refresh } _ =
+    let sameVersions = (graphVersions.gv_graph == Just graphVersions.gv_repo)
+    in pure $
+
+      R2.if' (not sameVersions) $
+
         graphUpdateButton { id, session, refresh }
-      ]
+
 
 type GraphUpdateButtonProps =
   ( id :: GT.ID
@@ -99,12 +99,9 @@ type NodeActionsNodeListProps =
 nodeActionsNodeList :: Record NodeActionsNodeListProps -> R.Element
 nodeActionsNodeList p = R.createElement nodeActionsNodeListCpt p []
 nodeActionsNodeListCpt :: R.Component NodeActionsNodeListProps
-nodeActionsNodeListCpt = here.component "nodeActionsNodeList" cpt
-  where
-    cpt props _ = do
-      pure $ H.div { className: "node-actions" } [
-        nodeListUpdateButton props
-      ]
+nodeActionsNodeListCpt = here.component "nodeActionsNodeList" cpt where
+  cpt props _ = pure $ nodeListUpdateButton props
+
 
 type NodeListUpdateButtonProps =
   ( listId :: GT.ListId

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -326,7 +326,7 @@ selectedNodesCpt = here.component "selectedNodes" cpt where
         [
           updateTermButton
           ( commonProps `Record.merge`
-            { variant: ButtonVariant Primary
+            { variant: ButtonVariant Success
             , rType: CandidateTerm
             , nodesMap
             }
@@ -344,9 +344,6 @@ selectedNodesCpt = here.component "selectedNodes" cpt where
         ]
       ]
 
-
-
-
 ---------------------------------------------------------
 
 neighborhood :: R2.Leaf Props

src/Gargantext/Components/Nodes/Corpus/Phylo.purs

@@ -93,7 +93,7 @@ phyloLayoutCpt = here.component "main" cpt where
 
       case mEl of
         Nothing -> R.nothing
-        Just el -> R2.addClass el [ "p-0--i" ]
+        Just el -> R2.addClass el [ "p-0" ]
 
     R.useEffectOnce do
       pure do
@@ -101,7 +101,7 @@ phyloLayoutCpt = here.component "main" cpt where
 
         case mEl of
           Nothing -> R.nothing
-          Just el -> R2.removeClass el [ "p-0--i" ]
+          Just el -> R2.removeClass el [ "p-0" ]
 
 
     -- | Render

src/Gargantext/Components/PhyloExplorer/Layout.purs

@@ -21,7 +21,7 @@ import Gargantext.Components.PhyloExplorer.TopBar (topBar)
 import Gargantext.Components.PhyloExplorer.Types (DisplayView(..), PhyloDataSet(..), ExtractedTerm, ExtractedCount, Source, Term, sortSources)
 import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.UpdateEffect (useUpdateEffect1')
-import Gargantext.Types (NodeID)
+import Gargantext.Types (NodeID, SidePanelState(..))
 import Gargantext.Utils (getter, (?))
 import Gargantext.Utils.Reactix as R2
 import Graphics.D3.Base (d3)
@@ -46,6 +46,7 @@ layoutCpt = here.component "layout" cpt where
   cpt { phyloDataSet: (PhyloDataSet o)
       , nodeId
       } _ = do
+
   -- States
   ---------
 
@@ -82,7 +83,7 @@ layoutCpt = here.component "layout" cpt where
       R2.useBox' false
 
     sideBarDisplayed /\ sideBarDisplayedBox <-
-      R2.useBox' false
+      R2.useBox' InitialClosed
 
     extractedTerms /\ extractedTermsBox <-
       R2.useBox' (mempty :: Array ExtractedTerm)
@@ -256,7 +257,7 @@ layoutCpt = here.component "layout" cpt where
         { className: "phylo__sidebar"
         -- @XXX: ReactJS lack of "keep-alive" feature workaround solution
         -- @link https://github.com/facebook/react/issues/12039
-        , style: { display: sideBarDisplayed ? "block" $ "none" }
+        , style: { display: sideBarDisplayed == Opened? "block" $ "none" }
         }
         [
           sideBar

src/Gargantext/Components/PhyloExplorer/TopBar.purs

@@ -9,6 +9,7 @@ import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
 import Gargantext.Components.PhyloExplorer.Types (Term(..), Source(..))
+import Gargantext.Types (SidePanelState(..), toggleSidePanelState)
 import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
 import Reactix (nothing)
@@ -27,7 +28,7 @@ type Props =
   , resultCallback      :: Maybe Term -> Effect Unit
 
   , toolBar             :: T.Box (Boolean)
-  , sideBar             :: T.Box (Boolean)
+  , sideBar             :: T.Box (SidePanelState)
   )
 
 here :: R2.Here
@@ -71,12 +72,12 @@ component = here.component "main" cpt where
         -- Sidebar toggle
         B.button
         { className: "phylo-topbar__sidebar"
-        , callback: \_ -> T.modify_ (not) sideBar
-        , variant: sideBar' ?
+        , callback: \_ -> T.modify_ (toggleSidePanelState) sideBar
+        , variant: sideBar' == Opened ?
             ButtonVariant Light $
             OutlinedButtonVariant Light
         }
-        [ H.text $ sideBar' ? "Hide sidebar" $ "Show sidebar" ]
+        [ H.text $ sideBar' == Opened ? "Hide sidebar" $ "Show sidebar" ]
       ,
         -- Source
         H.div

src/Gargantext/Utils/Popover.purs

 module Gargantext.Utils.Popover where
 
+import Gargantext.Prelude
+
+import DOM.Simple as DOM
 import Data.Maybe (maybe)
 import Data.Nullable (Nullable, toMaybe)
-import DOM.Simple as DOM
 import Effect (Effect)
 import Effect.Uncurried (EffectFn2, runEffectFn2)
 import Reactix as R
-
-import Gargantext.Prelude
+import Record as Record
 
 type PopoverRef = R.Ref (Nullable DOM.Element)
 
@@ -22,8 +23,11 @@ type Props =
 
 foreign import popoverCpt :: R.Component Props
 
+-- | https://github.com/vaheqelyan/react-awesome-popover
 popover :: Record Props -> Array R.Element -> R.Element
-popover = R.rawCreateElement popoverCpt
+popover props children = R.rawCreateElement popoverCpt props' children
+  where
+    props' = Record.merge props { className: "awesome-popover" }
 
 foreign import _setState :: forall a. EffectFn2 DOM.Element a Unit
 

src/sass/_legacy/_tree.sass

@@ -60,10 +60,9 @@ $node-popup-width: 544px
 
 ////////////////////////////////////
 
-$leaf-margin-bottom: 3px
-
 .mainleaf
   $self: &
+  $leaf-margin-bottom: 3px
 
   display: flex
   align-items: center
@@ -216,11 +215,10 @@ $leaf-margin-bottom: 3px
   &__settings-icon
     // altering component overlay offset to fit it with the ".mainleaf" overlay
     // dimension
-      $aside-icon-offset-y: -5px
+    $aside-icon-offset-top: -5px
 
     &.b-icon-button--overlay::before
-        top: $aside-icon-offset-y
-        bottom: $aside-icon-offset-y
+      top: $aside-icon-offset-top
 
   //----------------------------
 
@@ -303,6 +301,30 @@ $leaf-margin-bottom: 3px
         position: absolute
         top: $blank-link-offset-y
 
+// (?) Chrome engine adds extra height to the overlay embedded settings icon
+//        → set an empirical icon overlay position
+@media screen and (-webkit-min-device-pixel-ratio:0)
+  $icon-overlay-bottom: -5px
+
+  .awesome-popover
+
+    .b-icon-button--overlay::before
+      bottom: $icon-overlay-bottom
+
+
+// (?) FireFox engine adds extra height to the embedded settings
+//        → set an empirical fixed height on its wrapper to avoid
+//          an height flickering alteration (on mainleaf hover) ;
+//          and modify the icon overlay position
+@-moz-document url-prefix()
+  $simulated-mainleaf-overlay-height: 22.5px
+  $icon-overlay-bottom: -3px
+
+  .awesome-popover
+    max-height: $simulated-mainleaf-overlay-height
+
+    .b-icon-button--overlay::before
+      bottom: $icon-overlay-bottom
 
 
 ////////////////////////////////////////