[Graph] open sidebar when first node is selected

src/Gargantext/Components/GraphExplorer.purs

@@ -76,6 +76,12 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
       showLogin <- snd <$> R.useState' true
       selectedNodeIds <- R.useState' $ Set.empty
 
+      R.useEffect' $ do
+        if fst controls.showSidePanel == GET.InitialClosed && (not Set.isEmpty $ fst selectedNodeIds) then
+          snd controls.showSidePanel $ \_ -> GET.Opened
+        else
+          pure unit
+
       pure $
         RH.div
           { id: "graph-explorer" }
@@ -125,7 +131,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
 
     mSidebar :: Maybe Graph.Graph
              -> Maybe GET.MetaData
-             -> { showSidePanel :: Boolean
+             -> { showSidePanel :: GET.SidePanelState
                 , selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
                 , session :: Session }
              -> R.Element

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -6,7 +6,6 @@ module Gargantext.Components.GraphExplorer.Controls
  , controlsCpt
  , getShowTree, setShowTree
  , getShowControls, setShowControls
- , getShowSidePanel, setShowSidePanel
  , getCursorSize, setCursorSize
  , getMultiNodeSelect, setMultiNodeSelect
  ) where
@@ -25,17 +24,17 @@ import Gargantext.Components.GraphExplorer.Button (centerButton)
 import Gargantext.Components.GraphExplorer.RangeControl (edgeSizeControl, nodeSizeControl)
 import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton)
 import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton, pauseForceAtlasButton)
+import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 
-
 type Controls =
   ( cursorSize      :: R.State Number
   , multiNodeSelect :: R.Ref Boolean
   , showControls    :: R.State Boolean
-  , showSidePanel   :: R.State Boolean
+  , showSidePanel   :: R.State GET.SidePanelState
   , showTree        :: R.State Boolean
   , sigmaRef        :: R.Ref Sigmax.Sigma
   )
@@ -125,7 +124,7 @@ useGraphControls = do
   cursorSize      <- R.useState' 10.0
   multiNodeSelect <- R.useRef false
   showControls    <- R.useState' false
-  showSidePanel   <- R.useState' false
+  showSidePanel   <- R.useState' GET.InitialClosed
   showTree <- R.useState' false
   sigma <- Sigmax.initSigma
   sigmaRef <- R.useRef sigma
@@ -141,9 +140,6 @@ useGraphControls = do
 getShowControls :: Record Controls -> Boolean
 getShowControls { showControls: ( should /\ _ ) } = should
 
-getShowSidePanel :: Record Controls -> Boolean
-getShowSidePanel { showSidePanel: ( should /\ _ ) } = should
-
 getShowTree :: Record Controls -> Boolean
 getShowTree { showTree: ( should /\ _ ) } = should
 
@@ -156,9 +152,6 @@ getMultiNodeSelect { multiNodeSelect } = R.readRef multiNodeSelect
 setShowControls :: Record Controls -> Boolean -> Effect Unit
 setShowControls { showControls: ( _ /\ set ) } v = set $ const v
 
-setShowSidePanel :: Record Controls -> Boolean -> Effect Unit
-setShowSidePanel { showSidePanel: ( _ /\ set ) } v = set $ const v
-
 setShowTree :: Record Controls -> Boolean -> Effect Unit
 setShowTree { showTree: ( _ /\ set ) } v = set $ not <<< const v
 

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -23,7 +23,7 @@ type Props =
   , metaData :: GET.MetaData
   , selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
   , session :: Session
-  , showSidePanel :: Boolean
+  , showSidePanel :: GET.SidePanelState
   )
 
 sidebar :: Record Props -> R.Element
@@ -32,7 +32,9 @@ sidebar props = R.createElement sidebarCpt props []
 sidebarCpt :: R.Component Props
 sidebarCpt = R.hooksComponent "Sidebar" cpt
   where
-    cpt {showSidePanel: false} _children = do
+    cpt {showSidePanel: GET.Closed} _children = do
+      pure $ RH.div {} []
+    cpt {showSidePanel: GET.InitialClosed} _children = do
       pure $ RH.div {} []
     cpt props _children = do
       let nodesMap = SigmaxTypes.nodesMap props.graph

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -16,6 +16,7 @@ import Effect (Effect)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
+import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 
@@ -87,11 +88,26 @@ treeToggleButton state =
     , onClick: \_ -> snd state not
     }
 
-sidebarToggleButton :: R.State Boolean -> R.Element
-sidebarToggleButton state =
-  toggleButton {
-      state: state
-    , onMessage: "Hide Sidebar"
-    , offMessage: "Show Sidebar"
-    , onClick: \_ -> snd state not
-    }
+sidebarToggleButton :: R.State GET.SidePanelState -> R.Element
+sidebarToggleButton (state /\ setState) = R.createElement el {} []
+  where
+    el = R.hooksComponent "SidebarToggleButton" cpt
+    cpt {} _ = do
+      pure $
+        H.span {}
+          [
+            H.button
+              { className: "btn btn-primary", on: {click: onClick} }
+              [ H.text (text onMessage offMessage state) ]
+          ]
+    onMessage = "Hide Sidebar"
+    offMessage = "Show Sidebar"
+    text on _off GET.Opened = on
+    text _on off GET.InitialClosed = off
+    text _on off GET.Closed = off
+
+    onClick = \_ -> do
+      setState $ \s -> case s of
+        GET.InitialClosed -> GET.Opened
+        GET.Closed -> GET.Opened
+        GET.Opened -> GET.Closed

src/Gargantext/Components/GraphExplorer/Types.purs

@@ -184,3 +184,8 @@ defaultPalette = ["#5fa571","#ab9ba2","#da876d","#bdd3ff","#b399df","#ffdfed","#
 
 intColor :: Int -> String
 intColor i = unsafePartial $ fromJust $ defaultPalette !! (i `mod` length defaultPalette)
+
+
+data SidePanelState = InitialClosed | Opened | Closed
+
+derive instance eqSidePanelState :: Eq SidePanelState

src/Gargantext/Hooks/Sigmax.purs

@@ -157,7 +157,6 @@ setEdges sigma val = do
 
 markSelectedNodes :: Sigma.Sigma -> SelectedNodeIds -> NodesMap -> Effect Unit
 markSelectedNodes sigma selectedNodeIds graphNodes = do
-  log2 "[markSelectedNodes] selectedNodeIds" selectedNodeIds
   Sigma.forEachNode sigma \n -> do
     case Map.lookup n.id graphNodes of
       Nothing -> error $ "Node id " <> n.id <> " not found in graphNodes map"
@@ -176,7 +175,6 @@ bindSelectedNodesClick :: R.Ref Sigma -> R.State SelectedNodeIds -> Effect Unit
 bindSelectedNodesClick sigmaRef (_ /\ setSelectedNodeIds) =
   dependOnSigma (R.readRef sigmaRef) "[graphCpt] no sigma" $ \sigma ->
     Sigma.bindClickNode sigma $ \node -> do
-      log2 "[graphCpt] clickNode" node
       setSelectedNodeIds \nids ->
         if Set.member node.id nids then
           Set.delete node.id nids