[Graph Explorer] Add cluster button

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -128,6 +128,8 @@ sideTabLegendCpt = here.component "sideTabLegend" cpt where
     hyperdataGraph
       <- R2.useLive' store.hyperdataGraph
 
+    legend' /\ legendBox <- R2.useBox' legend
+
     -- | Computed
     -- |
     let
@@ -161,12 +163,13 @@ sideTabLegendCpt = here.component "sideTabLegend" cpt where
       { className: "graph-sidebar__legend-tab" }
       [
         Legend.legend
-        { legendSeq: Seq.fromFoldable legend
+        { legendSeq: Seq.fromFoldable legend'
         , extractedNodeList
         , nodeCountList
         , selectedNodeIds: store.selectedNodeIds
         , session
         , graphId
+        , legendBox
         }
       ]
 

src/Gargantext/Components/GraphExplorer/Sidebar/Legend.purs

@@ -5,14 +5,16 @@ module Gargantext.Components.GraphExplorer.Sidebar.Legend
 import Prelude hiding (map)
 
 import Control.Applicative (map)
-import Data.Array (fromFoldable)
+import Data.Array (fromFoldable, snoc)
 import Data.Array as A
+import Data.Foldable (length)
 import Data.Maybe (isJust, maybe)
 import Data.Sequence (Seq, replace)
 import Data.Set as Set
 import Data.Traversable (foldMap, intercalate)
 import Effect (Effect)
 import Effect.Aff (launchAff_)
+import Effect.Class (liftEffect)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.GraphExplorer.API (updateLegend)
 import Gargantext.Components.GraphExplorer.GraphTypes as GEGT
@@ -36,6 +38,7 @@ type Props =
   , selectedNodeIds       :: T.Box ST.NodeIds
   , session               :: Session
   , graphId               :: GET.GraphId
+  , legendBox             :: T.Box (Array GET.Legend)
   )
 
 legend :: R2.Leaf Props
@@ -48,6 +51,7 @@ legendCpt = here.component "legend" cpt where
       , selectedNodeIds
       , session
       , graphId
+      , legendBox
       } _ = do
     -- | Hooks
     -- |
@@ -56,34 +60,47 @@ legendCpt = here.component "legend" cpt where
     -- |
     pure $
 
-      H.ul
-      { className: "graph-legend" }
+      R.fragment
       [
-        flip foldMap legendSeq \(GET.Legend { id_, label, color}) ->
+        H.ul
+        { className: "graph-legend" }
+        [
+          flip foldMap legendSeq \(GET.Legend { id_, label, color}) ->
 
-          H.li
-          { className: "graph-legend__item" }
-          [
-            H.button
-            { className: "graph-legend__code"
-            , style: { backgroundColor: GET.intColor id_ }
-            , on: { click: \_ -> selectNodes id_}
-            }
-            []
-          ,
-            B.wad
-            [ "flex-grow-1" ]
+            H.li
+            { className: "graph-legend__item" }
             [
-              renameable { text: label, className: "graph-legend__label", onRename: \s -> rename s id_ color }
-            ,
-              selectedNodes
-              { selectedNodeIds
-              , extractedNodeList
-              , clusterId: id_
-              , nodeCount: getClusterNodeCount nodeCountList id_
+              H.button
+              { className: "graph-legend__code"
+              , style: { backgroundColor: GET.intColor id_ }
+              , on: { click: \_ -> selectNodes id_}
               }
+              []
+            ,
+              B.wad
+              [ "flex-grow-1" ]
+              [
+                renameable { text: label, className: "graph-legend__label", onRename: \s -> rename s id_ color }
+              ,
+                selectedNodes
+                { selectedNodeIds
+                , extractedNodeList
+                , clusterId: id_
+                , nodeCount: getClusterNodeCount nodeCountList id_
+                }
+              ]
             ]
-          ]
+        ]
+      ,
+        H.li
+        { className: "graph-legend__item" }
+        [
+          H.button
+          { className: "fa fa-plus"
+          , on: { click: \_ -> addCluster } 
+          } 
+          []
+        ]
       ]
       where
         rename :: String -> Int -> String -> Effect Unit
@@ -98,6 +115,14 @@ legendCpt = here.component "legend" cpt where
           let nodes = filterByCluster id extractedNodeList
           T.write_ (Set.fromFoldable $ map (\(GEGT.Node { id_ }) -> id_) nodes) selectedNodeIds
 
+        addCluster :: Effect Unit
+        addCluster = do
+          let newLegend = snoc (fromFoldable legendSeq) $ GET.Legend { id_: (length legendSeq) + 1, label: "Cluster" <> show ((length legendSeq) + 1), color: "#ffffff" }
+          launchAff_ do
+            _ <- updateLegend { legend: newLegend, graphId, session }
+            _ <- liftEffect $ T.write newLegend legendBox
+            pure unit
+
 filterByCluster :: Int -> Array GEGT.Node -> Array GEGT.Node
 filterByCluster id
   =   A.filter