Merge branch 'dev' into 451-dev-disable-controls-when-forceatlas-is-running

dist/styles/bootstrap-darkster.css

@@ -9515,6 +9515,10 @@ a:focus, a:hover {
   right: -4px;
   z-index: 2;
 }
+.mainleaf__version-badge .b-icon-button__inner {
+  top: -3px;
+  left: 1px;
+}
 .mainleaf__version-badge--matched.b-icon-button, .mainleaf__version-badge--matched.b-icon-button:hover {
   color: #015668;
 }

dist/styles/bootstrap-default.css

@@ -9468,6 +9468,10 @@ a:focus, a:hover {
   right: -4px;
   z-index: 2;
 }
+.mainleaf__version-badge .b-icon-button__inner {
+  top: -3px;
+  left: 1px;
+}
 .mainleaf__version-badge--matched.b-icon-button, .mainleaf__version-badge--matched.b-icon-button:hover {
   color: #28a745;
 }
@@ -10334,21 +10338,10 @@ select.form-control {
   flex-grow: 1;
   margin-left: 32px;
 }
-.table-header-rename__cache {
-  margin-top: 16px;
-}
-.table-header-rename__cache--on {
-  font-weight: bold;
-}
-.table-header-rename__cache__button {
-  margin-left: 16px;
-  color: #007bff;
-}
-.table-header-rename__cache__text {
-  cursor: pointer;
-}
-.table-header-rename__cache__text:focus {
-  outline: 0;
+.table-header-rename__cache-toolbar {
+  width: 136px;
+  margin-left: 4px;
+  margin-right: 4px;
 }
 .table-header-rename__calendar__icon {
   margin-right: 4px;

dist/styles/bootstrap-greyson.css

@@ -9224,6 +9224,10 @@ a:focus, a:hover {
   right: -4px;
   z-index: 2;
 }
+.mainleaf__version-badge .b-icon-button__inner {
+  top: -3px;
+  left: 1px;
+}
 .mainleaf__version-badge--matched.b-icon-button, .mainleaf__version-badge--matched.b-icon-button:hover {
   color: #3e4d59;
 }

dist/styles/bootstrap-herbie.css

@@ -9472,6 +9472,10 @@ a:focus, a:hover {
   right: -4px;
   z-index: 2;
 }
+.mainleaf__version-badge .b-icon-button__inner {
+  top: -3px;
+  left: 1px;
+}
 .mainleaf__version-badge--matched.b-icon-button, .mainleaf__version-badge--matched.b-icon-button:hover {
   color: #0074E4;
 }

dist/styles/bootstrap-monotony.css

@@ -9473,6 +9473,10 @@ a:focus, a:hover {
   right: -4px;
   z-index: 2;
 }
+.mainleaf__version-badge .b-icon-button__inner {
+  top: -3px;
+  left: 1px;
+}
 .mainleaf__version-badge--matched.b-icon-button, .mainleaf__version-badge--matched.b-icon-button:hover {
   color: #333333;
 }

src/Gargantext/Components/Bootstrap/Floaty/ContextMenu.purs

@@ -64,12 +64,13 @@ component = R.hooksComponent componentName cpt where
     R.useLayoutEffect1 (R.readRef ref) do
       for_ (toMaybe $ R.readRef ref) \el -> do
 
-        let rect  = Element.boundingRect el
-        let pos   = position { x, y } rect
-        let style = el .. "style"
+        let rect      = Element.boundingRect el
+        let pos       = position { x, y } rect
+        let style     = el .. "style"
+        let toPixels  = show >>> (_ <> "px")
 
-        void $ pure $ setProperty' style "left" [ show pos.left ]
-        void $ pure $ setProperty' style "top" [ show pos.top ]
+        void $ pure $ setProperty' style "left" [ pos.left # toPixels ]
+        void $ pure $ setProperty' style "top" [ pos.top # toPixels ]
 
 
       R.nothing # R.thenNothing

src/Gargantext/Components/Table.purs

@@ -4,14 +4,13 @@ import Gargantext.Prelude
 
 import Data.Array as A
 import Data.Either (Either(..))
-import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..))
 import Data.Sequence as Seq
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (Elevation(..), Variant(..))
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.FolderView as FV
 import Gargantext.Components.Forest.Tree.Node.Action.Rename (RenameValue(..), rename)
 import Gargantext.Components.Nodes.Corpus (saveCorpus)
@@ -106,10 +105,28 @@ tableHeaderWithRenameBoxedLayout = R.createElement tableHeaderWithRenameBoxedLay
 tableHeaderWithRenameBoxedLayoutCpt :: R.Component TableHeaderWithRenameBoxedLayoutProps
 tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxedLayoutCpt" cpt
   where
-    cpt { hyperdata: Hyperdata h, nodeId, session, cacheState, name, date, corpusInfoS} _ = do
+    cpt { hyperdata: Hyperdata h
+        , nodeId
+        , session
+        , cacheState
+        , name
+        , date
+        , corpusInfoS
+        } _ = do
+      -- | States
+      -- |
       cacheState' <- T.useLive T.unequal cacheState
       CorpusInfo {title, desc, query, authors} <- T.read corpusInfoS
 
+      -- | Hooks
+      -- |
+
+      topBarPortalKey <- pure $ "portal-topbar::" <> show nodeId
+
+      mTopBarHost <- R.unsafeHooksEffect $ R2.getElementById "portal-topbar"
+
+      -- | Render
+      -- |
       pure $
 
         H.div
@@ -155,30 +172,24 @@ tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxed
                 , onRename: onRenameQuery
                 }
               ,
-                H.div
-                { className: intercalate " "
-                    [ "table-header-rename__cache"
-                    , cacheState' == NT.CacheOn ?
-                        "table-header-rename__cache--on" $
-                        ""
-                    ]
-                }
+                -- [To Topbar portal]
+                -- @NOTE #446: UI flicker artfact when user toggle the CTA
+                --             This is due to a re-render + portal input focus --             lost
+                R2.createPortal' mTopBarHost
                 [
-                  H.span
-                  { className: "table-header-rename__cache__text"
-                  , on: { click: cacheClick cacheState }
-                  }
+                  R2.fragmentWithKey topBarPortalKey
                   [
-                    H.text $ cacheText cacheState'
+                    B.button
+                    { className: "table-header-rename__cache-toolbar"
+                    , callback: cacheClick cacheState
+                    , variant: cacheState' == NT.CacheOn ?
+                        ButtonVariant Light $
+                        OutlinedButtonVariant Light
+                    }
+                    [
+                      H.text $ cacheText cacheState'
+                    ]
                   ]
-                ,
-                  B.iconButton
-                  { name: cacheToggle cacheState'
-                  , className: "table-header-rename__cache__button"
-                  , variant: Secondary
-                  , elevation: Level1
-                  , callback: cacheClick cacheState
-                  }
                 ]
               ]
             ,
@@ -232,9 +243,6 @@ tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxed
           save {fields: newFields, session, nodeId}
 
 
-    cacheToggle NT.CacheOn = "toggle-on"
-    cacheToggle NT.CacheOff = "toggle-off"
-
     cacheText NT.CacheOn = "Cache On"
     cacheText NT.CacheOff = "Cache Off"
 

src/Gargantext/Hooks/Sigmax/Graphology.js

@@ -19,39 +19,37 @@ export function _mergeNodeAttributes(g, name, attrs) {
 }
 
 export function _addEdge(g, source, target, e) {
-  return g.addEdge(source, target, e);
+  //return g.addEdge(source, target, e);
+
+  // NOTE: Our edge.id is the main key. We don't need sigma
+  // auto-generated keys for edges
+  return g.addEdgeWithKey(e.id, source, target, e);
 }
 
 // Almost the same as graphology.mapNodes but with a change that only
 // 1 argument is passed: the whole node structure
 export function _mapNodes(g, fn) {
-  return g.mapNodes(function(name, attrs) {
-    return fn({id: name, ...attrs});
+  return g.mapNodes(function(_name, attrs) {
+    return fn(attrs);
   });
 }
 
 export function _filterNodes(g, fn) {
-  return g.filterNodes(function(name, attrs) {
-    return fn({id: name, ...attrs});
+  return g.filterNodes(function(_name, attrs) {
+    return fn(attrs);
   })
 }
 
 
 export function _forEachEdge(g, fn) {
-  return g.forEachEdge(function(name, attrs, source, target, sourceAttributes, targetAttributes, undirected) {
-    return fn({id: name,
-               source,
-               target,
-               ...attrs});
+  return g.forEachEdge(function(_name, attrs, _source, _target, _sourceAttributes, _targetAttributes, _undirected) {
+    return fn(attrs);
   });
 }
 
 export function _updateEachEdgeAttributes(g, fn) {
-  return g.updateEachEdgeAttributes(function(name, attrs, source, target) {
-    return fn({id: name,
-               source,
-               target,
-               ...attrs});
+  return g.updateEachEdgeAttributes(function(_name, attrs, _source, _target) {
+    return fn(attrs);
   });
 }
 
@@ -59,16 +57,13 @@ export function _updateEachEdgeAttributes(g, fn) {
 // 1 argument is passed: the whole node structure
 // https://graphology.github.io/iteration.html#mapedges
 export function _mapEdges(g, fn) {
-  return g.mapEdges(function(name, attrs, source, target, sourceAttributes, targetAttributes, undirected) {
-    return fn({id: name,
-               source,
-               target,
-               ...attrs});
+  return g.mapEdges(function(_name, attrs, _source, _target, _sourceAttributes, _targetAttributes, _undirected) {
+    return fn(attrs);
   });
 }
 
 export function _filterEdges(g, fn) {
-  return g.filterEdges(function(name, attrs) {
-    return fn({id: name, ...attrs});
+  return g.filterEdges(function(_name, attrs) {
+    return fn(attrs);
   })
 }

src/sass/_legacy/_list.sass

@@ -189,18 +189,10 @@ $renameable-icon-width: 16px
       flex-grow: 1
       margin-left: space-x(4)
 
-  &__cache
-    margin-top: space-x(2)
-
-    &--on
-      font-weight: bold
-
-    &__button
-      margin-left: $renameable-button-margin
-      color: $secondary
-
-    &__text
-      @include clickable
+  &__cache-toolbar
+    width: $topbar-fixed-button-width
+    margin-left: $topbar-item-margin
+    margin-right: $topbar-item-margin
 
   &__calendar
 

src/sass/_legacy/_tree.sass

@@ -157,6 +157,14 @@ $node-popup-width: 544px
     right: $offset-x
     z-index: z-index("tree", "badge")
 
+    // (?) unknown regresion: empirical offset re-alignement
+    .b-icon-button__inner
+      $offset-y: -3px
+      $offset-x: 1px
+
+      top: $offset-y
+      left: $offset-x
+
     // (remove hover effect to maintain continuity with folder + node icon
     // lack of hover effect)
     &--matched