>>> continue

src/Gargantext/Components/Bootstrap/Bootstrap.purs

@@ -7,7 +7,6 @@ import Gargantext.Components.Bootstrap.Button(button) as Exports
 import Gargantext.Components.Bootstrap.Caveat(caveat) as Exports
 import Gargantext.Components.Bootstrap.Cloak (cloak) as Exports
 import Gargantext.Components.Bootstrap.Fieldset(fieldset) as Exports
-import Gargantext.Components.Bootstrap.Fluff(fluff, fluff', fluff_) as Exports
 import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
 import Gargantext.Components.Bootstrap.FormSelect(formSelect, formSelect') as Exports
 import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports
@@ -17,6 +16,7 @@ import Gargantext.Components.Bootstrap.ProgressBar(progressBar) as Exports
 import Gargantext.Components.Bootstrap.Spinner(spinner) as Exports
 import Gargantext.Components.Bootstrap.Tabs(tabs) as Exports
 import Gargantext.Components.Bootstrap.Tooltip(tooltip, TooltipBindingProps, tooltipBind, tooltipBind', tooltipContainer) as Exports
+import Gargantext.Components.Bootstrap.Wad(wad, wad', wad_) as Exports
 
 import Gargantext.Components.Bootstrap.Shortcut(
     div', div_

src/Gargantext/Components/Bootstrap/Inline/Fluff.purs → src/Gargantext/Components/Bootstrap/Inline/Wad.purs

-module Gargantext.Components.Bootstrap.Fluff
-  ( fluff
-  , fluff'
-  , fluff_
+module Gargantext.Components.Bootstrap.Wad
+  ( wad
+  , wad'
+  , wad_
   ) where
 
 import Gargantext.Prelude
@@ -11,25 +11,24 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 
 componentName :: String
-componentName = "b-fluff"
+componentName = "b-wad"
 
 -- | Structural Component for a simple Element only serving the purpose to add
 -- | some classes in it
 -- |
--- | Hence the name: Fluff (uncountable noun): Consists of soft threads or
--- | fibres in the  form of small, light balls or lump [or a set of utility
--- | classes...]
-fluff :: Array String -> Array R.Element -> R.Element
-fluff classes children = R.createDOMElement "span" cls children
+-- | Hence the name: Wad (noun): a small mass, lump, or ball of anything ;
+-- | a roll of something
+wad :: Array String -> Array R.Element -> R.Element
+wad classes children = R.createDOMElement "div" cls children
   where
     cls = { className: intercalate " " $
               [ componentName
               ] <> classes
           }
 
--- | Shorthand for using <fluff> Component without writing its text node
-fluff' :: Array String -> String -> R.Element
-fluff' classes text = R.createDOMElement "span" cls chd
+-- | Shorthand for using <wad> Component without writing its text node
+wad' :: Array String -> String -> R.Element
+wad' classes text = R.createDOMElement "div" cls chd
   where
     cls = { className: intercalate " " $
               [ componentName
@@ -38,9 +37,9 @@ fluff' classes text = R.createDOMElement "span" cls chd
 
     chd = [ H.text text ]
 
--- | Shorthand for using <fluff> Component without any child
-fluff_ :: Array String -> R.Element
-fluff_ classes = R.createDOMElement "span" cls []
+-- | Shorthand for using <wad> Component without any child
+wad_ :: Array String -> R.Element
+wad_ classes = R.createDOMElement "div" cls []
   where
     cls = { className: intercalate " " $
               [ componentName

src/Gargantext/Components/Forest.purs

@@ -134,7 +134,7 @@ plusCpt = here.component "plus" cpt where
               B.icon
               { name: "universal-access" }
             ,
-              B.fluff_ [ "d-inline-block", "w-1" ]
+              B.wad_ [ "d-inline-block", "w-1" ]
             ,
               H.text $ "Log in/out"
             ]

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -15,9 +15,9 @@ import Data.Sequence as Seq
 import Data.Set as Set
 import Effect.Timer (setTimeout)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.GraphExplorer.Resources as Graph
 import Gargantext.Components.GraphExplorer.Buttons (centerButton, cameraButton, edgesToggleButton, louvainToggleButton, pauseForceAtlasButton, multiSelectEnabledButton)
 import Gargantext.Components.GraphExplorer.RangeControl (edgeConfluenceControl, edgeWeightControl, nodeSizeControl)
+import Gargantext.Components.GraphExplorer.Resources as Graph
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
 import Gargantext.Components.GraphExplorer.SlideButton (labelSizeButton, mouseSelectorSizeButton)
 import Gargantext.Components.GraphExplorer.Types as GET
@@ -52,7 +52,7 @@ type Controls =
   , showControls       :: T.Box Boolean
   , showEdges          :: T.Box SigmaxT.ShowEdgesState
   , showLouvain        :: T.Box Boolean
-  , sidePanelState     :: T.Box GT.SidePanelState
+  , showSidebar        :: T.Box GT.SidePanelState
   , sideTab            :: T.Box GET.SideTab
   , sigmaRef           :: R.Ref Sigmax.Sigma
   )
@@ -84,7 +84,7 @@ controlsCpt = here.component "controls" cpt
         , session
         , showEdges
         , showLouvain
-        , sidePanelState
+        , showSidebar
         , sideTab
         , sigmaRef } _ = do
 
@@ -94,7 +94,7 @@ controlsCpt = here.component "controls" cpt
       forceAtlasState' <- T.useLive T.unequal forceAtlasState
       graphStage' <- T.useLive T.unequal graphStage
       selectedNodeIds' <- T.useLive T.unequal selectedNodeIds
-      sidePanelState' <- T.useLive T.unequal sidePanelState
+      showSidebar' <- T.useLive T.unequal showSidebar
 
       localControls <- initialLocalControls
       -- ref to track automatic FA pausing
@@ -123,8 +123,8 @@ controlsCpt = here.component "controls" cpt
 
       -- Automatic opening of sidebar when a node is selected (but only first time).
       R.useEffect' $ do
-        if sidePanelState' == GT.InitialClosed && (not Set.isEmpty selectedNodeIds') then do
-          T.write_ GT.Opened sidePanelState
+        if showSidebar' == GT.InitialClosed && (not Set.isEmpty selectedNodeIds') then do
+          T.write_ GT.Opened showSidebar
           T.write_ GET.SideTabData sideTab
         else
           pure unit
@@ -322,7 +322,7 @@ useGraphControls :: { forceAtlasS :: SigmaxT.ForceAtlasState
                     , reloadForest   :: T2.ReloadS
                     , session        :: Session
                     , sidePanel      :: T.Box (Maybe (Record GEST.SidePanel))
-                    , sidePanelState :: T.Box GT.SidePanelState }
+                    }
                  -> R.Hooks (Record Controls)
 useGraphControls { forceAtlasS
                  , graph
@@ -331,7 +331,7 @@ useGraphControls { forceAtlasS
                  , reloadForest
                  , session
                  , sidePanel
-                 , sidePanelState } = do
+                 } = do
   edgeConfluence <- T.useBox $ Range.Closed { min: 0.0, max: 1.0 }
   edgeWeight <- T.useBox $ Range.Closed {
       min: 0.0
@@ -345,7 +345,13 @@ useGraphControls { forceAtlasS
   sigma <- Sigmax.initSigma
   sigmaRef <- R.useRef sigma
 
-  { multiSelectEnabled, removedNodeIds, selectedNodeIds, showControls, sideTab } <- GEST.focusedSidePanel sidePanel
+  { multiSelectEnabled
+  , removedNodeIds
+  , selectedNodeIds
+  , showControls
+  , sideTab
+  , showSidebar
+  } <- GEST.focusedSidePanel sidePanel
 
   pure { edgeConfluence
        , edgeWeight
@@ -362,7 +368,7 @@ useGraphControls { forceAtlasS
        , showControls
        , showEdges
        , showLouvain
-       , sidePanelState
+       , showSidebar
        , sideTab
        , sigmaRef
        , reloadForest

src/Gargantext/Components/GraphExplorer/Layout.purs

@@ -12,7 +12,6 @@ import Data.Nullable (null, Nullable)
 import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple (Tuple(..))
-import Data.Tuple.Nested ((/\))
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.GraphExplorer.Resources as Graph
@@ -25,7 +24,6 @@ import Gargantext.Config (defaultFrontends)
 import Gargantext.Data.Louvain as Louvain
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Sessions (Session)
-import Gargantext.Types (SidePanelState(..))
 import Gargantext.Types as GT
 import Gargantext.Types as Types
 import Gargantext.Utils ((?))
@@ -62,6 +60,7 @@ layoutCpt = here.component "explorerWriteGraph" cpt where
             , session
             , hyperdataGraph
             } _ = do
+
   -- Computed
   -----------------
 
@@ -78,13 +77,12 @@ layoutCpt = here.component "explorerWriteGraph" cpt where
   -- States
   -----------------
 
-    sideBarDisplayed /\ sideBarDisplayedBox <-
-      R2.useBox' (InitialClosed :: SidePanelState)
-
     { mMetaData: mMetaDataBox
+    , showSidebar
     } <- GEST.focusedSidePanel boxes.sidePanelGraph
     _graphVersion' <- T.useLive T.unequal boxes.graphVersion
 
+    showSidebar' <- R2.useLive' showSidebar
 
     -- _dataRef <- R.useRef graph
     graphRef <- R.useRef null
@@ -100,13 +98,13 @@ layoutCpt = here.component "explorerWriteGraph" cpt where
       , reloadForest: boxes.reloadForest
       , session
       , sidePanel: boxes.sidePanelGraph
-      , sidePanelState: sideBarDisplayedBox
       }
 
     mTopBarHost <- R.unsafeHooksEffect $ R2.getElementById "portal-topbar"
 
     showControls' <- R2.useLive' controls.showControls
 
+
     -- graphVersionRef <- R.useRef graphVersion'
     -- R.useEffect' $ do
     --   let readData = R.readRef dataRef
@@ -141,9 +139,7 @@ layoutCpt = here.component "explorerWriteGraph" cpt where
           R2.fragmentWithKey topBarPortalKey
           [
             GETB.topBar
-            { sidePanelState: sideBarDisplayedBox
-            , sidePanelGraph: props.boxes.sidePanelGraph
-            }
+            { sidePanelGraph: props.boxes.sidePanelGraph }
           ]
         ]
       ,
@@ -152,7 +148,7 @@ layoutCpt = here.component "explorerWriteGraph" cpt where
         { className: "graph-layout__sidebar"
         -- @XXX: ReactJS lack of "keep-alive" feature workaround solution
         -- @link https://github.com/facebook/react/issues/12039
-        , style: { display: sideBarDisplayed == GT.Opened ? "block" $ "none" }
+        , style: { display: showSidebar' == GT.Opened ? "block" $ "none" }
         }
         [
           case mMetaData' of

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -414,8 +414,8 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
           H.div
           { className: "graph-neighborhood__counter" }
           [
-            B.fluff'
-            [ "text-info" ] $
+            B.wad'
+            [ "text-info", "d-inline" ] $
             show termCount
           ,
             H.text $ nbsp 1 <> "terms"

src/Gargantext/Components/GraphExplorer/Sidebar/Types.purs

 module Gargantext.Components.GraphExplorer.Sidebar.Types where
 
-import Data.Maybe (Maybe(..), maybe)
-import Data.Set as Set
-import Reactix as R
-import Toestand as T
-
 import Gargantext.Prelude
 
+import Data.Maybe (Maybe(..), maybe)
+import Data.Set as Set
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
+import Gargantext.Types as GT
+import Reactix as R
+import Toestand as T
 
 type SidePanel =
   (
@@ -19,6 +19,7 @@ type SidePanel =
   , selectedNodeIds    :: SigmaxT.NodeIds
   , showControls       :: Boolean
   , sideTab            :: GET.SideTab
+  , showSidebar        :: GT.SidePanelState
   )
 
 initialSidePanel :: Maybe (Record SidePanel)
@@ -32,7 +33,9 @@ focusedSidePanel :: T.Box (Maybe (Record SidePanel))
                             , removedNodeIds     :: T.Box SigmaxT.NodeIds
                             , selectedNodeIds    :: T.Box SigmaxT.NodeIds
                             , showControls       :: T.Box Boolean
-                            , sideTab            :: T.Box GET.SideTab }
+                            , sideTab            :: T.Box GET.SideTab
+                            , showSidebar        :: T.Box GT.SidePanelState
+                            }
 focusedSidePanel sidePanel = do
   mGraph <- T.useFocused
             (maybe Nothing _.mGraph)
@@ -55,6 +58,9 @@ focusedSidePanel sidePanel = do
   sideTab <- T.useFocused
                   (maybe GET.SideTabLegend _.sideTab)
                   (\val -> maybe Nothing (\sp -> Just $ sp { sideTab = val })) sidePanel
+  showSidebar <- T.useFocused
+                  (maybe GT.InitialClosed _.showSidebar)
+                  (\val -> maybe Nothing (\sp -> Just $ sp { showSidebar = val })) sidePanel
 
   pure $ {
     mGraph
@@ -64,4 +70,5 @@ focusedSidePanel sidePanel = do
   , selectedNodeIds
   , showControls
   , sideTab
+  , showSidebar
   }

src/Gargantext/Components/Nodes/Graph.purs

@@ -88,7 +88,7 @@ graphLayoutCpt = here.component "explorerLayout" 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
@@ -96,7 +96,7 @@ graphLayoutCpt = here.component "explorerLayout" cpt where
 
         case mEl of
           Nothing -> R.nothing
-          Just el -> R2.removeClass el [ "p-0--i" ]
+          Just el -> R2.removeClass el [ "p-0" ]
 
     -- | Render
     -- |
@@ -158,6 +158,7 @@ contentCpt = here.component "content" cpt where
         , selectedNodeIds: Set.empty
         , showControls: false
         , sideTab: GET.SideTabLegend
+        , showSidebar: Types.InitialClosed
         }
 
   -- Render