[GRAPH] SidePanel Tabs States use (WIP)

src/Gargantext/Components/GraphExplorer.purs

@@ -141,10 +141,10 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
                                            , graph
                                            , graphId
                                            , graphVersion
-                                           , removedNodeIds: controls.removedNodeIds
+                                           , removedNodeIds : controls.removedNodeIds
                                            , session
                                            , selectedNodeIds: controls.selectedNodeIds
-                                           , showSidePanel: fst controls.showSidePanel
+                                           , showSidePanel  :   controls.showSidePanel
                                            , treeReload
                                            }
                       ]
@@ -191,7 +191,7 @@ type MSidebarProps =
   , graphId         :: GraphId
   , graphVersion    :: R.State Int
   , removedNodeIds  :: R.State SigmaxT.NodeIds
-  , showSidePanel :: GET.SidePanelState
+  , showSidePanel   :: R.State GET.SidePanelState
   , selectedNodeIds :: R.State SigmaxT.NodeIds
   , session         :: Session
   , treeReload      :: R.State Int

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -94,7 +94,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
       -- Automatic opening of sidebar when a node is selected (but only first time).
       R.useEffect' $ do
         if fst props.showSidePanel == GET.InitialClosed && (not Set.isEmpty $ fst props.selectedNodeIds) then
-          snd props.showSidePanel $ \_ -> GET.Opened
+          snd props.showSidePanel $ \_ -> GET.Opened GET.SideTab2
         else
           pure unit
 

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -39,7 +39,7 @@ type Props =
   , removedNodeIds  :: R.State SigmaxT.NodeIds
   , selectedNodeIds :: R.State SigmaxT.NodeIds
   , session         :: Session
-  , showSidePanel   :: GET.SidePanelState
+  , showSidePanel   :: R.State GET.SidePanelState
   , treeReload      :: R.State Int
   )
 
@@ -49,25 +49,29 @@ sidebar props = R.createElement sidebarCpt props []
 sidebarCpt :: R.Component Props
 sidebarCpt = R.hooksComponent "Sidebar" cpt
   where
-    cpt {showSidePanel: GET.Closed} _children = do
+    cpt {showSidePanel: (GET.Closed /\ _)} _children = do
       pure $ RH.div {} []
-    cpt {showSidePanel: GET.InitialClosed} _children = do
+    cpt {showSidePanel: (GET.InitialClosed /\ _)} _children = do
       pure $ RH.div {} []
-    cpt props@{metaData} _children = do
+    cpt props@{metaData, showSidePanel} _children = do
+      let (sidePanel /\ setSidePanel) = showSidePanel
       let nodesMap = SigmaxT.nodesGraphMap props.graph
       pure $
         RH.div { id: "sp-container" }
         [ RH.div {}
           [ R2.row
-            [ R2.col12
+            [ R2.col 12
               [ RH.ul { id: "myTab", className: "nav nav-tabs", role: "tablist"}
                 [ RH.div { className: "tab-content" }
                   [ RH.div { className: "", role: "tabpanel" }
-                    (Seq.toUnfoldable $ (Seq.map (badge props.selectedNodeIds) (badges props.graph props.selectedNodeIds)))
+                           ( Seq.toUnfoldable
+                           $ ( Seq.map (badge              props.selectedNodeIds)
+                                       (badges props.graph props.selectedNodeIds)
+                             )
+                           )
                   ]
                 , RH.div { className: "tab-content" }
-                  [
-                    removeButton "Remove candidate" CandidateTerm props nodesMap
+                         [ removeButton "Remove candidate" CandidateTerm props nodesMap
                          , removeButton "Remove stop"      StopTerm      props nodesMap
                          ]
 
@@ -85,7 +89,7 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
                   ]
                 , RH.li { className: "nav-item" }
                   [ RH.a { id: "home-tab"
-                         , className: "nav-link active"
+                         , className: "nav-link"
                          , data: {toggle: "tab"}
                          , href: "#nodes"
                          , role: "tab"
@@ -131,7 +135,8 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
         [ RH.text text ]
 
     onClickRemove rType props nodesMap e = do
-      let nodes = mapMaybe (\id -> Map.lookup id nodesMap) $ Set.toUnfoldable $ fst props.selectedNodeIds
+      let nodes = mapMaybe (\id -> Map.lookup id nodesMap)
+                           $ Set.toUnfoldable $ fst props.selectedNodeIds
       deleteNodes { graphId: props.graphId
                   , metaData: props.metaData
                   , nodes

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -144,12 +144,12 @@ sidebarToggleButton (state /\ setState) = R.createElement el {} []
           ]
     onMessage = "Hide Sidebar"
     offMessage = "Show Sidebar"
-    text on _off GET.Opened = on
+    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
+        GET.InitialClosed -> GET.Opened GET.SideTab1
+        GET.Closed        -> GET.Opened GET.SideTab1
+        (GET.Opened _)    -> GET.Closed

src/Gargantext/Components/GraphExplorer/Types.purs

@@ -189,6 +189,10 @@ intColor :: Int -> String
 intColor i = unsafePartial $ fromJust $ defaultPalette !! (i `mod` length defaultPalette)
 
 
-data SidePanelState = InitialClosed | Opened | Closed
+data SidePanelState = InitialClosed | Opened SideTab | Closed
+
+data SideTab = SideTab1 | SideTab2 | SideTab3
+
+derive instance eqSideTab :: Eq SideTab
 
 derive instance eqSidePanelState :: Eq SidePanelState

src/Gargantext/Utils/Reactix.purs

@@ -252,8 +252,8 @@ blur el = el ... "blur" $ []
 row :: Array R.Element -> R.Element
 row children = H.div { className: "row" } children
 
-col12 :: Array R.Element -> R.Element
-col12 children = H.div { className: "col-md-12" } children
+col :: Int -> Array R.Element -> R.Element
+col n children = H.div { className : "col-md" <> show n } children
 
 innerText :: DOM.Element -> String
 innerText e = e .. "innerText"