[Graph] Sidebar implementation, with styles

dist/styles/Graph.css

@@ -10,5 +10,17 @@
   display: flex;
   max-width: 200px;
 }
+#graph-explorer #sp-container {
+  border: 1px white solid;
+  background-color: white;
+}
+#graph-explorer #sp-container #myTab {
+  marginBottom: 18px;
+  marginTop: 18px;
+}
+#graph-explorer #sp-container #myTabContent {
+  borderBottom: 1px solid black;
+  paddingBottom: 19px;
+}
 
 /*# sourceMappingURL=Graph.css.map */

dist/styles/Graph.sass

@@ -9,3 +9,15 @@
       li
         display: flex
         max-width: 200px
+
+  #sp-container
+    border: 1px white solid
+    background-color: white
+
+    #myTab
+      marginBottom: 18px
+      marginTop: 18px
+
+    #myTabContent
+      borderBottom: 1px solid black
+      paddingBottom : 19px

src/Gargantext/Components/GraphExplorer.purs

@@ -25,10 +25,11 @@ import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
 import Gargantext.Hooks.Sigmax.Types as Sigmax
 import Gargantext.Hooks.Sigmax.Sigmajs (CameraProps, SigmaNode, cameras, getCameraProps, goTo, pauseForceAtlas2, sigmaOnMouseMove)
-import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Components.GraphExplorer.Controls as Controls
 import Gargantext.Components.GraphExplorer.Legend (legend)
+import Gargantext.Components.GraphExplorer.Sidebar as Sidebar
 import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
+import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Components.Graph as Graph
 import Gargantext.Components.Loader2 as Loader
 import Gargantext.Components.Login.Types (AuthData(..), TreeId)
@@ -96,13 +97,13 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
                   , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
                   ]
                 , row [ Controls.controls controls ]
-                , row [ tree {mCurrentRoute, treeId} controls, graphLoader graphId controls, sidebar controls ]
+                , row [ tree {mCurrentRoute, treeId} controls, graphLoader graphId controls, Sidebar.sidebar controls ]
                 , row [ ]
                 ]
               ]
             ]
           ]
-    outer = RH.div { className: "col-md-9" }
+    outer = RH.div { className: "col-md-12" }
     inner = RH.div { className: "container-fluid", style: { paddingTop: "90px" } }
     row1 = RH.div { className: "row", style: { paddingBottom: "10px", marginTop: "-24px" } }
     row = RH.div { className: "row" }
@@ -112,8 +113,8 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
 
     tree {treeId: Nothing} _ = RH.div {} []
     tree _ {showTree: false /\ _} = RH.div {} []
-    tree {mCurrentRoute, treeId: Just treeId} _ = RH.div {} [ Tree.elTreeview {mCurrentRoute, root: treeId} ]
-    sidebar _ = RH.div {} []
+    tree {mCurrentRoute, treeId: Just treeId} _ =
+      RH.div { className: "col-md-2" } [ Tree.elTreeview {mCurrentRoute, root: treeId} ]
 
 graphLoader :: GraphId -> Record Controls.Controls -> R.Element
 graphLoader graphId controls = R.createElement el {} []
@@ -133,11 +134,18 @@ loadedGraphView controls props = R.createElement el props []
   where
     el = R.hooksComponent "GraphView" cpt
     cpt {graphId, graph} _children = do
-      pure $ Graph.graph {
-          graph
-        , sigmaSettings: Controls.controlsToSigmaSettings controls
-        , forceAtlas2Settings: Graph.forceAtlas2Settings
-        }
+      pure $ RH.div { className: colSize controls }
+        [
+          Graph.graph {
+               forceAtlas2Settings: Graph.forceAtlas2Settings
+             , graph
+             , sigmaSettings: Controls.controlsToSigmaSettings controls
+             }
+        ]
+    -- TODO: this doesn't work? seems to always render "col-md-9"
+    colSize {showSidePanel: (true /\ _), showTree: (true /\ _)} = "col-md-8"
+    colSize {showSidePanel: (false /\ _), showTree: (false /\ _)} = "col-md-12"
+    colSize _ = "col-md-10"
 
 convert :: GET.GraphData -> Graph.Graph
 convert (GET.GraphData r) = Sigmax.Graph {nodes, edges}

src/Gargantext/Components/GraphExplorer/Sidebar.purs

+module Gargantext.Components.GraphExplorer.Sidebar
+       where
+
+import Data.Tuple.Nested ((/\))
+import Effect (Effect)
+import Prelude
+import Reactix as R
+import Reactix.DOM.HTML as RH
+
+import Gargantext.Components.GraphExplorer.Controls as Controls
+import Gargantext.Utils.Reactix as R2
+
+
+sidebar :: Record Controls.Controls -> R.Element
+sidebar controls = R.createElement sidebarCpt controls []
+
+sidebarCpt :: R.Component Controls.Controls
+sidebarCpt = R.hooksComponent "Sidebar" cpt
+  where
+    cpt {showSidePanel: (false /\ _)} _children = do
+      pure $ RH.div {} []
+    cpt props _children = do
+      pure $
+        RH.div { id: "sp-container"
+               , className: "col-md-2" }
+        [
+          RH.div {id: "sp-container"}
+          [
+            RH.div { className: "row" }
+            [
+              RH.div { className: "col-md-12" }
+              [
+                RH.ul { id: "myTab"
+                      , className: "nav nav-tabs"
+                      , role: "tablist"}
+                [
+                  RH.li { className: "nav-item" }
+                  [
+                    RH.a { id: "home-tab"
+                         , className: "nav-link active"
+                         , data: {toggle: "tab"}
+                         , href: "#home"
+                         , role: "tab"
+                         , aria: {controls: "home", selected: "true"}}
+                    [
+                      RH.text "Neighbours"
+                    ]
+                  ]
+                ]
+              , RH.div { className: "tab-content"
+                       , id: "myTabContent" }
+                [ RH.div { className: ""
+                         , id: "home"
+                         , role: "tabpanel" }
+                  [ badge "objects"
+                  , badge "evaluation"
+                  , badge "dynamics"
+                  , badge "virtual environments"
+                  , badge "virtual reality"
+                  , badge "performance analysis"
+                  , badge "software engineering"
+                  , badge "complex systems"
+                  , badge "wireless communications"
+                  ]
+                ]
+              ]
+            ]
+          ]
+        ]
+
+    badge text =
+      RH.a { className: "badge badge-light" } [ RH.text text ]