[Graph] multi node selection

src/Gargantext/Components/Graph.purs

@@ -4,42 +4,36 @@ module Gargantext.Components.Graph
   -- , forceAtlas2Settings, ForceAtlas2Settings, ForceAtlas2OptionalSettings
   -- )
   where
-import Prelude (bind, discard, pure, ($), unit)
+import Prelude (bind, discard, pure, ($), unit, map)
+import Data.Map as Map
 import Data.Maybe (Maybe(..))
 import Data.Nullable (notNull, null, Nullable)
-import Data.Sequence as Seq
+import Data.Set as Set
+import Data.Tuple (Tuple(..))
+import Data.Tuple.Nested ((/\))
 import DOM.Simple (createElement, setAttr)
 import DOM.Simple.Console (log, log2)
 import DOM.Simple.Types (Element)
 import Effect.Timer (setTimeout)
-import FFI.Simple (delay)
+import FFI.Simple (delay, (..))
 import Reactix as R
 import Reactix.DOM.HTML as RH
 
-import Gargantext.Hooks.Sigmax
-import Gargantext.Hooks.Sigmax.Types as Sigmax
+import Gargantext.Hooks.Sigmax as Sigmax
+import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
+import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Utils.Reactix as R2
 
 type OnProps  = ()
 
-type Node =
-  ( id    :: String
-  , label :: String
-  , x     :: Number
-  , y     :: Number
-  , size  :: Number
-  , color :: String )
-
-type Edge = ( id :: String, source :: String, target :: String )
-
-type Graph = Sigmax.Graph Node Edge
+type Graph = SigmaxTypes.Graph SigmaxTypes.Node SigmaxTypes.Edge
 
 type Props sigma forceatlas2 =
   ( elRef :: R.Ref (Nullable Element)
   , forceAtlas2Settings :: forceatlas2
   , graph :: Graph
   , sigmaSettings :: sigma
-  , sigmaRef :: R.Ref Sigma
+  , sigmaRef :: R.Ref Sigmax.Sigma
   )
 
 graph :: forall s fa2. Record (Props s fa2) -> R.Element
@@ -49,28 +43,28 @@ graphCpt :: forall s fa2. R.Component (Props s fa2)
 graphCpt = R.hooksComponent "Graph" cpt
   where
     cpt props _ = do
-      -- R.useEffectOnce' $ do
-      --   el <- case R.readNullableRef props.elRef of
-      --     Just el -> do
-      --       pure el
-      --     Nothing -> do
-      --       let el = createElement "div"
-      --       setAttr el "style" "height: 95%"
-      --       setAttr el "id" "graph-cpt-root"
-      --       R.setRef props.elRef $ notNull $ el
-      --       pure el
+      (selectedNodeIds /\ setSelectedNodeIds) <- R.useState' $ Set.empty
 
-      --   case R.readNullableRef props.parentRef of
-      --     Nothing -> pure unit
-      --     Just parentEl -> R2.appendChild parentEl el
-      --   pure unit
+      let (SigmaxTypes.Graph {nodes: nodes}) = props.graph
+      let nodesMap = Map.fromFoldable $ map (\n -> Tuple n.id {color: n.color}) nodes
+
+      R.useEffect' $ do
+        Sigmax.dependOnSigma (R.readRef props.sigmaRef) "[graphCpt] no sigma" $ \sigma ->
+          Sigmax.markSelectedNodes sigma selectedNodeIds nodesMap
 
       R.useEffectOnce $ do
-        --log "[graphCpt] calling startSigmaEff"
-        startSigmaEff props.elRef props.sigmaRef props.sigmaSettings props.forceAtlas2Settings props.graph
+        Sigmax.startSigmaEff props.elRef props.sigmaRef props.sigmaSettings props.forceAtlas2Settings props.graph
+
+        Sigmax.dependOnSigma (R.readRef props.sigmaRef) "[graphCpt] no sigma" $ \sigma ->
+          Sigma.bindClickNode sigma $ \node -> do
+            setSelectedNodeIds \nids ->
+              if Set.member node.id nids then
+                Set.delete node.id nids
+              else
+                Set.insert node.id nids
 
         delay unit $ \_ -> do
-          log "[GraphCpt] cleaning up"
+          log "[GraphCpt] cleanup"
           pure $ pure unit
 
       -- NOTE: This div is not empty after sigma initializes.

src/Gargantext/Hooks/Sigmax.purs

@@ -8,18 +8,21 @@ import DOM.Simple.Types (Element)
 import Data.Array as A
 import Data.Either (Either(..), either)
 import Data.Foldable (sequence_)
+import Data.Map as Map
 import Data.Maybe (Maybe(..))
 import Data.Nullable (Nullable)
 import Data.Sequence (Seq)
 import Data.Sequence as Seq
+import Data.Set as Set
 import Data.Traversable (traverse_)
 import Data.Tuple (Tuple(..))
 import Data.Tuple.Nested((/\))
 import Effect (Effect)
+import Effect.Class.Console (error)
 import Effect.Timer (TimeoutId, clearTimeout)
-import FFI.Simple (delay)
+import FFI.Simple (delay, (.=))
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
-import Gargantext.Hooks.Sigmax.Types (Graph(..))
+import Gargantext.Hooks.Sigmax.Types (Graph(..), Node(..))
 import Gargantext.Utils.Reactix as R2
 import Prelude (Unit, bind, const, discard, flip, pure, unit, ($), (*>), (<$), (<$>), (<<<), (<>), (>>=), not)
 import Reactix as R
@@ -326,3 +329,19 @@ setEdges sigma val = do
     Tuple true false ->
       Sigma.setSettings sigma settings
     _ -> pure unit
+
+markSelectedNodes :: Sigma.Sigma -> Set.Set String -> Map.Map String {color :: String} -> Effect Unit
+markSelectedNodes sigma selectedNodeIds graphNodes = do
+  log2 "[markSelectedNodes] selectedNodeIds" selectedNodeIds
+  Sigma.forEachNode sigma \n -> do
+    case Map.lookup n.id graphNodes of
+      Nothing -> error $ "Node id " <> n.id <> " not found in graphNodes map"
+      Just {color} -> do
+        let newColor =
+              if Set.member n.id selectedNodeIds then
+                "#ff0000"
+              else
+                color
+        _ <- pure $ (n .= "color") newColor
+        pure unit
+  Sigma.refresh sigma

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -55,6 +55,8 @@ function killSigma(left, right, sigma) {
 }
 function clear(sigma) { sigma.graph.clear(); }
 function bind(sigma, event, handler) { sigma.bind(event, handler); }
+function forEachNode(sigma, handler) { sigma.graph.nodes().forEach(handler); }
+function forEachEdge(sigma, handler) { sigma.graph.edges().forEach(handler); }
 function setSettings(sigma, settings) { sigma.settings(settings); }
 function startForceAtlas2(sigma, settings) { sigma.startForceAtlas2(settings); }
 function stopForceAtlas2(sigma) { sigma.stopForceAtlas2(); }
@@ -80,6 +82,8 @@ exports._setRendererContainer = setRendererContainer;
 exports._killSigma = killSigma
 exports._clear = clear;
 exports._bind = bind;
+exports._forEachNode = forEachNode;
+exports._forEachEdge = forEachEdge;
 exports._setSettings = setSettings;
 exports._startForceAtlas2 = startForceAtlas2;
 exports._stopForceAtlas2 = stopForceAtlas2;

src/Gargantext/Hooks/Sigmax/Sigma.purs

@@ -5,12 +5,15 @@ import Data.Either (Either(..))
 import Data.Nullable (notNull, null, Nullable)
 import DOM.Simple.Console (log, log2)
 import DOM.Simple.Types (Element)
+import FFI.Simple (delay, (..))
 import Effect (Effect, foreachE)
 import Effect.Timer (setTimeout)
 import Effect.Uncurried (EffectFn1, mkEffectFn1, runEffectFn1, EffectFn2, runEffectFn2, EffectFn3, runEffectFn3, EffectFn4, runEffectFn4)
 import Type.Row (class Union)
 import Reactix as R
 
+import Gargantext.Hooks.Sigmax.Types as Types
+
 foreign import data Sigma :: Type
 
 type NodeRequiredProps = ( id :: String )
@@ -116,6 +119,21 @@ bind_ s e h = runEffectFn3 _bind s e (mkEffectFn1 h)
 
 foreign import _bind :: forall e. EffectFn3 Sigma String (EffectFn1 e Unit) Unit
 
+forEachNode :: Sigma -> (Record Types.Node -> Effect Unit) -> Effect Unit
+forEachNode s f = runEffectFn2 _forEachNode s (mkEffectFn1 f)
+
+foreign import _forEachNode :: EffectFn2 Sigma (EffectFn1 (Record Types.Node) Unit) Unit
+
+forEachEdge :: Sigma -> (Record Types.Edge -> Effect Unit) -> Effect Unit
+forEachEdge s f = runEffectFn2 _forEachEdge s (mkEffectFn1 f)
+
+foreign import _forEachEdge :: EffectFn2 Sigma (EffectFn1 (Record Types.Edge) Unit) Unit
+
+bindClickNode :: Sigma -> (Record Types.Node -> Effect Unit) -> Effect Unit
+bindClickNode sigma f = bind_ sigma "clickNode" $ \e -> do
+  let node = e .. "data" .. "node" :: Record Types.Node
+  f node
+
 setSettings :: forall settings. Sigma -> settings -> Effect Unit
 setSettings sigma settings = do
   runEffectFn2 _setSettings sigma settings

src/Gargantext/Hooks/Sigmax/Types.purs

@@ -13,3 +13,13 @@ newtype Graph n e = Graph { nodes :: Seq {|n}, edges :: Seq {|e} }
 
 type Renderer = { "type" :: String, container :: Element }
 
+
+type Node =
+  ( id    :: String
+  , label :: String
+  , x     :: Number
+  , y     :: Number
+  , size  :: Number
+  , color :: String )
+
+type Edge = ( id :: String, source :: String, target :: String )