[GRAPH] SidePanel Tabs States use (WIP)

src/Gargantext/Components/GraphExplorer.purs

@@ -89,8 +89,8 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
     cpt props@{frontends, graph, graphId, graphVersion, mCurrentRoute, mMetaData, session, sessions, showLogin, treeReload } _ = do
       dataRef <- R.useRef graph
       graphRef <- R.useRef null
-      graphVersionRef <- R.useRef (fst graphVersion)
-      controls <- Controls.useGraphControls graph
+      graphVersionRef       <- R.useRef (fst graphVersion)
+      controls              <- Controls.useGraphControls graph
       multiSelectEnabledRef <- R.useRef $ fst controls.multiSelectEnabled
 
       R.useEffect' $ do
@@ -105,12 +105,12 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
           R.setRef dataRef graph
           R.setRef graphVersionRef (fst graphVersion)
           -- Reinitialize bunch of state as well.
-          snd controls.removedNodeIds $ const SigmaxT.emptyNodeIds
+          snd controls.removedNodeIds  $ const SigmaxT.emptyNodeIds
           snd controls.selectedNodeIds $ const SigmaxT.emptyNodeIds
-          snd controls.showEdges $ const SigmaxT.EShow
+          snd controls.showEdges       $ const SigmaxT.EShow
           snd controls.forceAtlasState $ const SigmaxT.InitialRunning
-          snd controls.graphStage $ const Graph.Init
-          snd controls.showSidePanel $ const GET.InitialClosed
+          snd controls.graphStage      $ const Graph.Init
+          snd controls.showSidePanel   $ const GET.InitialClosed
 
       pure $
         RH.div
@@ -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
                                            }
                       ]
@@ -171,7 +171,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
     mSidebar :: Maybe GET.MetaData
              -> Record MSidebarProps
              -> R.Element
-    mSidebar Nothing _ = RH.div {} []
+    mSidebar  Nothing            _ = RH.div {} []
     mSidebar (Just metaData) props =
       Sidebar.sidebar (Record.merge props { metaData })
 
@@ -186,15 +186,15 @@ type TreeProps =
   )
 
 type MSidebarProps =
-  ( frontends :: Frontends
-  , graph :: SigmaxT.SGraph
-  , graphId :: GraphId
-  , graphVersion :: R.State Int
-  , removedNodeIds :: R.State SigmaxT.NodeIds
-  , showSidePanel :: GET.SidePanelState
+  ( frontends       :: Frontends
+  , graph           :: SigmaxT.SGraph
+  , graphId         :: GraphId
+  , graphVersion    :: R.State Int
+  , removedNodeIds  :: R.State SigmaxT.NodeIds
+  , showSidePanel   :: R.State GET.SidePanelState
   , selectedNodeIds :: R.State SigmaxT.NodeIds
-  , session :: Session
-  , treeReload :: R.State Int
+  , session         :: Session
+  , treeReload      :: R.State Int
   )
 
 type GraphProps = (

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,43 +49,47 @@ 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 stop" StopTerm props nodesMap
-                  ]
+                         [ removeButton "Remove candidate" CandidateTerm props nodesMap
+                         , removeButton "Remove stop"      StopTerm      props nodesMap
+                         ]
 
                 , RH.li { className: "nav-item" }
                         [ RH.a { id: "home-tab"
-                        , className: "nav-link active"
-                        , data: {toggle: "tab"}
-                        , href: "#legend"
-                        , role: "tab"
-                        , aria: {controls: "legend", selected: "true"}
-                        }
+                               , className: "nav-link active"
+                               , data: {toggle: "tab"}
+                               , href: "#legend"
+                               , role: "tab"
+                               , aria: {controls: "legend", selected: "true"}
+                               }
                     [ RH.text "Legend" ]
                  , let (GET.MetaData {legend}) = metaData
                     in Legend.legend { items: Seq.fromFoldable legend}
                   ]
                 , 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
@@ -145,8 +150,8 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
 badge :: R.State SigmaxT.NodeIds -> Record SigmaxT.Node -> R.Element
 badge (_ /\ setNodeIds) {id, label} =
   RH.a { className: "badge badge-light"
-        , on: { click: onClick }
-        } [ RH.text label ]
+       , on: { click: onClick }
+       } [ RH.text label ]
   where
     onClick e = do
       setNodeIds $ const $ Set.singleton id

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
+    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"