[GRAPH] Adding legend box (WIP)

src/Gargantext/Components/GraphExplorer/Legend.purs

@@ -23,6 +23,11 @@ legendCpt = R.hooksComponent "Legend" cpt
 entry :: Legend -> R.Element
 entry (Legend {id_, label}) =
   RH.p {}
-  [ RH.span { style: { width: 10, height: 10, backgroundColor: intColor id_, display: "inline-block" } } []
+  [ RH.span { style: { width : 10
+                     , height: 10
+                     , backgroundColor: intColor id_
+                     , display: "inline-block"
+                     } 
+            } []
   , RH.text $ " " <> label
   ]

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -15,6 +15,7 @@ import Effect (Effect)
 import Effect.Aff (Aff, launchAff_)
 import Effect.Class (liftEffect)
 import Gargantext.Components.GraphExplorer.Types  as GET
+import Gargantext.Components.GraphExplorer.Legend as Legend
 import Gargantext.Components.NgramsTable.Core as NTC
 import Gargantext.Components.Nodes.Corpus.Graph.Tabs (tabs) as CGT
 import Gargantext.Components.RandomText (words)
@@ -52,9 +53,8 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
       pure $ RH.div {} []
     cpt {showSidePanel: GET.InitialClosed} _children = do
       pure $ RH.div {} []
-    cpt props _children = do
+    cpt props@{metaData} _children = do
       let nodesMap = SigmaxT.nodesGraphMap props.graph
-
       pure $
         RH.div { id: "sp-container" }
         [ RH.div {}
@@ -70,15 +70,31 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
                     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"}
+                        }
+                    [ 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"
                          , data: {toggle: "tab"}
-                         , href: "#home"
+                         , href: "#nodes"
                          , role: "tab"
-                         , aria: {controls: "home", selected: "true"}
+                         , aria: {controls: "nodes", selected: "false"}
                          }
-                    [ RH.text "Neighbours" ]
+                    [ RH.text "Nodes" ]
+
+                , RH.div { className: "col-md-12", id: "query" }
+                  [ query props.frontends props.metaData props.session nodesMap props.selectedNodeIds]
                   ]
                 ]
               , RH.div { className: "tab-content", id: "myTabContent" }
@@ -95,10 +111,6 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
                 ]
               ]
               -}
-            , RH.div { className: "col-md-12", id: "query" }
-              [
-                query props.frontends props.metaData props.session nodesMap props.selectedNodeIds
-              ]
             ]
           ]
         ]
@@ -148,8 +160,7 @@ neighbourBadges graph (selectedNodeIds /\ _) = SigmaxT.neighbours graph selected
     selectedNodes = SigmaxT.graphNodes $ SigmaxT.nodesById graph selectedNodeIds
 
 type DeleteNodes =
-  (
-    graphId :: Int
+  ( graphId :: Int
   , metaData :: GET.MetaData
   , nodes :: Array (Record SigmaxT.Node)
   , session :: Session

src/Gargantext/Components/GraphExplorer/Types.purs

@@ -58,12 +58,10 @@ derive instance newtypeGraphData :: Newtype GraphData _
 
 
 newtype MetaData = MetaData
-  {
-    title :: String
+  { title    :: String
   , legend   :: Array Legend
   , corpusId :: Array Int
-  , list :: {
-      listId   :: ListId
+  , list :: { listId   :: ListId
             , version  :: Version
             }
   }