[Graph] implement node removal

src/Gargantext/Components/App.purs

@@ -81,9 +81,8 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
 
 forestLayout :: Frontends -> Sessions -> AppRoute -> R2.Setter Boolean -> R.Element -> R.Element
 forestLayout frontends sessions route showLogin child =
-  R.fragment [ topBar {}, row main, footer {} ]
+  R.fragment [ topBar {}, R2.row [main], footer {} ]
   where
-    row child' = H.div {className: "row"} [child']
     main =
       R.fragment
       [ H.div {className: "col-md-2", style: {paddingTop: "60px"}}

src/Gargantext/Components/DocsTable.purs

@@ -254,7 +254,7 @@ docViewCpt = R.hooksComponent "G.C.DocsTable.docView" cpt where
       , layout: { frontends, session, nodeId, tabType, listId
                 , corpusId, totalRecords, chart, showSearch } } _ = do
     pure $ H.div {className: "container1"}
-      [ H.div {className: "row"}
+      [ R2.row
         [ chart
         , if showSearch then searchBar query else H.div {} []
         , H.div {className: "col-md-12"}

src/Gargantext/Components/FacetsTable.purs

@@ -28,6 +28,7 @@ import Gargantext.Sessions (Session, sessionId, post, deleteWithBody)
 import Gargantext.Types (NodeType(..), OrderBy(..), NodePath(..))
 import Gargantext.Utils (toggleSet, zeroPad)
 import Gargantext.Utils.DecodeMaybe ((.|))
+import Gargantext.Utils.Reactix as R2
 ------------------------------------------------------------------------
 
 type NodeID = Int
@@ -191,7 +192,7 @@ docViewCpt = R.hooksComponent "G.C.FacetsTable.DocView" cpt
           snd path $ const ipp
 
       pure $ H.div { className: "container1" }
-        [ H.div { className: "row" }
+        [ R2.row
           [ chart
           , H.div { className: "col-md-12" }
             [ pageLayout { deletions, frontends, totalRecords, container, session, path } ]
@@ -241,7 +242,7 @@ docViewGraphCpt = R.hooksComponent "FacetsDocViewGraph" cpt
         , H.p {} [ H.text "" ]
         , H.br {}
         , H.div { className: "container-fluid" }
-          [ H.div { className: "row" }
+          [ R2.row
             [ chart
             , H.div { className: "col-md-12" }
               [ pageLayout { frontends, totalRecords, deletions, container, session, path }

src/Gargantext/Components/Forest/Tree/Node/Box.purs

@@ -224,7 +224,7 @@ nodePopupView d p mPop@(Just NodePopup /\ setPopupOpen) = R.createElement el p [
 
         panelHeading renameBoxOpen@(open /\ _) =
           H.div {className: "panel-heading"}
-                [ H.div {className: "row" }
+                [ R2.row
                         [ H.div {className: "col-md-8"}
                                 [ renameBox d {id, name, nodeType} renameBoxOpen ]
 

src/Gargantext/Components/GraphExplorer.purs

@@ -98,7 +98,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
       pure $
         RH.div
           { id: "graph-explorer" }
-          [ row
+          [ R2.row
             [ outer
               [ inner
                 [ row1
@@ -107,7 +107,8 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
                   , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
                   ]
                 , rowControls [ Controls.controls controls ]
-                , row [ tree (fst controls.showTree) {sessions, mCurrentRoute, frontends} (snd showLogin)
+                , R2.row [
+                        tree (fst controls.showTree) {sessions, mCurrentRoute, frontends} (snd showLogin)
                       , RH.div { ref: graphRef, id: "graph-view", className: "col-md-12" } []  -- graph container
                       , graphView { controls
                                   , elRef: graphRef
@@ -130,7 +131,6 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
     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" }
     rowControls = RH.div { className: "row controls" }
     col       = RH.div { className: "col-md-4" }
     pullLeft  = RH.div { className: "pull-left" }

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -4,20 +4,29 @@ module Gargantext.Components.GraphExplorer.Sidebar
 
 import Prelude
 import Data.Array (head)
+import Data.Int (fromString)
 import Data.Map as Map
 import Data.Maybe (Maybe(..))
 import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple.Nested((/\))
+import DOM.Simple.Console (log2)
+import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
 import Reactix as R
 import Reactix.DOM.HTML as RH
 
 import Gargantext.Components.RandomText (words)
 import Gargantext.Components.Nodes.Corpus.Graph.Tabs as GT
 import Gargantext.Components.GraphExplorer.Types as GET
+import Gargantext.Data.Array (mapMaybe)
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
-import Gargantext.Sessions (Session)
+import Gargantext.Routes (SessionRoute(NodeAPI))
+import Gargantext.Sessions (Session, delete)
+import Gargantext.Types (NodeType(..))
+import Gargantext.Utils.Monad (mapM_)
+import Gargantext.Utils.Reactix as R2
 
 type Props =
   ( frontends :: Frontends
@@ -44,10 +53,20 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
       pure $
         RH.div { id: "sp-container", className: "col-md-3" }
         [ RH.div {}
-          [ RH.div { className: "row" }
-            [ RH.div { className: "col-md-12" }
+          [ R2.row
+            [ R2.col12
               [ RH.ul { id: "myTab", className: "nav nav-tabs", role: "tablist"}
-                [ RH.li { className: "nav-item" }
+                [ RH.div { className: "tab-content" }
+                  [ RH.div { className: "", role: "tabpanel" }
+                    (Seq.toUnfoldable $ (Seq.map (badge props.selectedNodeIds) (badges props.graph props.selectedNodeIds)))
+                  ]
+                , RH.div { className: "tab-content" }
+                  [
+                    RH.button { className: "btn btn-danger"
+                              , on: { click: onClickRemove props.session props.selectedNodeIds }}
+                    [ RH.text "Remove" ]
+                  ]
+                , RH.li { className: "nav-item" }
                   [ RH.a { id: "home-tab"
                          , className: "nav-link active"
                          , data: {toggle: "tab"}
@@ -55,12 +74,12 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
                          , role: "tab"
                          , aria: {controls: "home", selected: "true"}
                          }
-                    [ RH.text "Selected nodes" ]
+                    [ RH.text "Neighbours" ]
                   ]
                 ]
               , RH.div { className: "tab-content", id: "myTabContent" }
                 [ RH.div { className: "", id: "home", role: "tabpanel" }
-                  (Seq.toUnfoldable $ (Seq.map (badge props.selectedNodeIds) (badges props.graph props.selectedNodeIds)))
+                  (Seq.toUnfoldable $ (Seq.map (badge props.selectedNodeIds) (neighbourBadges props.graph props.selectedNodeIds)))
                 ]
               ]
             {-, RH.div { className: "col-md-12", id: "horizontal-checkbox" }
@@ -94,10 +113,24 @@ sidebarCpt = R.hooksComponent "Sidebar" cpt
                  , checked: true
                  , title: "Mark as completed" } ]
     badges :: SigmaxTypes.SGraph -> R.State SigmaxTypes.SelectedNodeIds -> Seq.Seq (Record SigmaxTypes.Node)
-    badges graph (selectedNodeIds /\ _) = SigmaxTypes.neighbours graph selectedNodes
+    badges graph (selectedNodeIds /\ _) = SigmaxTypes.nodesById graph selectedNodeIds
+    neighbourBadges :: SigmaxTypes.SGraph -> R.State SigmaxTypes.SelectedNodeIds -> Seq.Seq (Record SigmaxTypes.Node)
+    neighbourBadges graph (selectedNodeIds /\ _) = SigmaxTypes.neighbours graph selectedNodes
       where
         selectedNodes = SigmaxTypes.nodesById graph selectedNodeIds
 
+    onClickRemove session (selectedNodeIds /\ _) e = do
+      log2 "[onClickRemove] selectedNodeIds" selectedNodeIds
+      let nodeIds = mapMaybe fromString $ Set.toUnfoldable selectedNodeIds
+      deleteNodes session nodeIds
+
+    deleteNodes :: Session -> Array Int -> Effect Unit
+    deleteNodes session nodeIds =
+      mapM_ (launchAff_ <<< deleteNode session) nodeIds
+
+    deleteNode :: Session -> Int -> Aff Int
+    deleteNode session nodeId = delete session $ NodeAPI Node (Just nodeId) ""
+
     query _ _ _ _ (selectedNodeIds /\ _) | Set.isEmpty selectedNodeIds = RH.div {} []
     query frontends (GET.MetaData metaData) session nodesMap (selectedNodeIds /\ _) =
       query' (head metaData.corpusId)

src/Gargantext/Components/Login.purs

@@ -157,7 +157,7 @@ formCpt = R.hooksComponent "G.C.Login.form" cpt where
     error <- R.useState' ""
     username <- R.useState' ""
     password <- R.useState' ""
-    pure $ H.div {className: "row"}
+    pure $ R2.row
       [ cardGroup
         [ card
           [ cardBlock

src/Gargantext/Components/NgramsTable.purs

@@ -148,14 +148,14 @@ tableContainer { path: {searchQuery, termListFilter, termSizeFilter} /\ setPath
                } props =
   H.div {className: "container-fluid"}
   [ H.div {className: "jumbotron1"}
-    [ H.div {className: "row"}
+    [ R2.row
       [ H.div {className: "panel panel-default"}
         [ H.div {className: "panel-heading"}
           [ H.h2 {className: "panel-title", style: {textAlign : "center"}}
             [ H.span {className: "glyphicon glyphicon-hand-down"} []
             , H.text "Extracted Terms"
             ]
-          , H.div {className: "row"}
+          , R2.row
             [ H.div {className: "col-md-3", style: {marginTop: "6px"}}
               [ H.input { className: "form-control"
                         , name: "search"

src/Gargantext/Components/Table.purs

@@ -90,12 +90,12 @@ tableHeaderLayoutCpt = R.hooksComponent "G.C.Table.tableHeaderLayout" cpt
   where
     cpt {title, desc, query, date, user} _ =
       pure $ R.fragment
-      [ H.div {className: "row"}
+      [ R2.row
         [ H.div {className: "col-md-3"} [ H.h3 {} [H.text title] ]
         , H.div {className: "col-md-9"}
           [ H.hr {style: {height: "2px", backgroundColor: "black"}} ]
         ]
-      , H.div {className: "row"}
+      , R2.row
         [ H.div {className: "jumbotron1", style: {padding: "12px 0px 20px 12px"}}
           [ H.div {className: "col-md-8 content"}
             [ H.p {}
@@ -158,7 +158,7 @@ tableCpt = R.hooksComponent "G.C.Table.table" cpt
 
 defaultContainer :: {title :: String} -> Record TableContainerProps -> R.Element
 defaultContainer {title} props = R.fragment
-  [ H.div {className: "row"}
+  [ R2.row
     [ H.div {className: "col-md-4"} [ props.pageSizeDescription ]
     , H.div {className: "col-md-4"} [ props.paginationLinks ]
     , H.div {className: "col-md-4"} [ props.pageSizeControl ]

src/Gargantext/Hooks/Sigmax/Types.purs

@@ -78,7 +78,6 @@ nodesById g nodeIds = Seq.filter (\n -> Set.member n.id nodeIds) $ graphNodes g
 neighbours :: SGraph -> Seq.Seq (Record Node) -> Seq.Seq (Record Node)
 neighbours g nodes = Seq.fromFoldable $ Set.unions [Set.fromFoldable nodes, sources, targets]
   where
-    nMap = nodesMap $ graphNodes g
     nodeIds = Set.fromFoldable $ Seq.map _.id nodes
     selectedEdges = neighbouringEdges g nodeIds
     sources = Set.fromFoldable $ nodesById g $ Set.fromFoldable $ Seq.map _.source selectedEdges

src/Gargantext/Utils/Reactix.purs

@@ -226,3 +226,9 @@ dataTransferFileBlob e = unsafePartial $ do
 
 blur :: DOM.Element -> Effect Unit
 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