[Graph] implemented node hover for selected nodes

Also, preliminary work done for selectorSize control.

src/Gargantext/Components/Graph.purs

@@ -32,6 +32,7 @@ type Props sigma forceatlas2 =
   , graph :: SigmaxTypes.SGraph
   , multiSelectEnabledRef :: R.Ref Boolean
   , selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
+  , selectorSize :: R.State Int
   , showEdges :: R.State SigmaxTypes.ShowEdgesState
   , sigmaRef :: R.Ref Sigmax.Sigma
   , sigmaSettings :: sigma
@@ -102,6 +103,10 @@ graphCpt = R.hooksComponent "Graph" cpt
           Sigmax.updateNodes sigma tNodesMap
           Sigmax.setEdges sigma (not $ SigmaxTypes.edgeStateHidden showEdges)
 
+      -- R.useEffect1' (fst props.selectorSize) $ do
+      --   Sigmax.dependOnSigma (R.readRef sigmaRef) "[graphCpt (Ready)] no sigma" $ \sigma -> do
+      --     Sigmax.selectorWithSize sigma $ fst props.selectorSize
+
     stageHooks _ = pure unit
 
 

src/Gargantext/Components/GraphExplorer.purs

@@ -189,6 +189,7 @@ graphViewCpt = R.hooksComponent "GraphView" cpt
         , graph
         , multiSelectEnabledRef
         , selectedNodeIds: controls.selectedNodeIds
+        , selectorSize: controls.selectorSize
         , showEdges: controls.showEdges
         , sigmaRef: controls.sigmaRef
         , sigmaSettings: Graph.sigmaSettings
@@ -202,16 +203,19 @@ convert (GET.GraphData r) = Tuple r.metaData $ SigmaxTypes.Graph {nodes, edges}
     nodes = foldMapWithIndex nodeFn r.nodes
     nodeFn i (GET.Node n) =
       Seq.singleton
-        { id    : n.id_
-        , size  : log (toNumber n.size + 1.0)
+        { borderColor: color
+        , color : color
         , hidden : false
+        , id    : n.id_
         , label : n.label
+        , size  : log (toNumber n.size + 1.0)
+        , type  : "def"  -- default type
         , x     : n.x -- cos (toNumber i)
         , y     : n.y -- sin (toNumber i)
-        , color : GET.intColor (cDef n.attributes)
         }
       where
         cDef (GET.Cluster {clustDefault}) = clustDefault
+        color = GET.intColor (cDef n.attributes)
     nodesMap = SigmaxTypes.nodesMap nodes
     edges = foldMap edgeFn r.edges
     edgeFn (GET.Edge e) = Seq.singleton { id : e.id_
@@ -410,6 +414,6 @@ transformGraph controls graph = SigmaxTypes.Graph {nodes: newNodes, edges: newEd
         _                 -> edge
     nodeMarked node@{ id } =
       if Set.member id (fst controls.selectedNodeIds) then
-        node { color = "#ff0000" }
+        node { borderColor = "#000", type = "hovered" }
       else
         node

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -43,6 +43,7 @@ type Controls =
   , multiSelectEnabled :: R.State Boolean
   , nodeSize        :: R.State Range.NumberRange
   , selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
+  , selectorSize    :: R.State Int
   , showControls    :: R.State Boolean
   , showEdges       :: R.State SigmaxTypes.ShowEdgesState
   , showSidePanel   :: R.State GET.SidePanelState
@@ -167,6 +168,7 @@ useGraphControls graph = do
   nodeSize <- R.useState' $ Range.Closed { min: 0.0, max: 100.0 }
   showTree <- R.useState' false
   selectedNodeIds <- R.useState' $ Set.empty
+  selectorSize <- R.useState' 5
   showControls    <- R.useState' false
   showEdges <- R.useState' SigmaxTypes.EShow
   showSidePanel   <- R.useState' GET.InitialClosed
@@ -182,6 +184,7 @@ useGraphControls graph = do
        , multiSelectEnabled
        , nodeSize
        , selectedNodeIds
+       , selectorSize
        , showControls
        , showEdges
        , showSidePanel

src/Gargantext/Hooks/Sigmax.purs

@@ -132,12 +132,6 @@ handleForceAtlas2Pause sigmaRef (toggled /\ setToggled) mFAPauseRef = do
         -- restore edges state
         Sigma.stopForceAtlas2 s
       _ -> pure unit
-    -- handle case when user pressed pause/start fa button before timeout fired
-    --case R.readRef mFAPauseRef of
-    --  Nothing -> pure unit
-    --  Just timeoutId -> do
-    --    R.setRef mFAPauseRef Nothing
-    --    clearTimeout timeoutId
 
 setEdges :: Sigma.Sigma -> Boolean -> Effect Unit
 setEdges sigma val = do
@@ -148,45 +142,6 @@ setEdges sigma val = do
     }
   Sigma.setSettings sigma settings
 
-  -- -- prevent showing edges (via show edges button) when FA is running (flickering)
-  -- isFARunning <- Sigma.isForceAtlas2Running sigma
-  -- case Tuple val isFARunning of
-  --   Tuple false _ ->
-  --     Sigma.setSettings sigma settings
-  --   Tuple true false ->
-  --     Sigma.setSettings sigma settings
-  --   _ -> pure unit
-
-markSelectedEdges :: Sigma.Sigma -> ST.SelectedEdgeIds -> ST.EdgesMap -> Effect Unit
-markSelectedEdges sigma selectedEdgeIds graphEdges = do
-  Sigma.forEachEdge sigma \e -> do
-    case Map.lookup e.id graphEdges of
-      Nothing -> error $ "Edge id " <> e.id <> " not found in graphEdges map"
-      Just {color} -> do
-        let newColor =
-              if Set.member e.id selectedEdgeIds then
-                "#ff0000"
-              else
-                color
-        _ <- pure $ (e .= "color") newColor
-        pure unit
-  Sigma.refresh sigma
-
-markSelectedNodes :: Sigma.Sigma -> ST.SelectedNodeIds -> ST.NodesMap -> Effect Unit
-markSelectedNodes sigma selectedNodeIds graphNodes = do
-  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
-
 
 updateEdges :: Sigma.Sigma -> ST.EdgesMap -> Effect Unit
 updateEdges sigma edgesMap = do
@@ -207,9 +162,14 @@ updateNodes sigma nodesMap = do
     let mTNode = Map.lookup n.id nodesMap
     case mTNode of
       Nothing -> error $ "Node id " <> n.id <> " not found in nodesMap"
-      (Just {color: tColor, hidden: tHidden}) -> do
+      (Just { borderColor: tBorderColor
+             , color: tColor
+             , hidden: tHidden
+             , type: tType}) -> do
+        _ <- pure $ (n .= "borderColor") tBorderColor
         _ <- pure $ (n .= "color") tColor
         _ <- pure $ (n .= "hidden") tHidden
+        _ <- pure $ (n .= "type") tType
         pure unit
   --Sigma.refresh sigma
 
@@ -244,3 +204,39 @@ bindSelectedEdgesClick sigmaRef (_ /\ setSelectedEdgeIds) =
           Set.delete edge.id eids
         else
           Set.insert edge.id eids
+
+selectorWithSize :: Sigma.Sigma -> Int -> Effect Unit
+selectorWithSize sigma size = do
+  pure unit
+
+-- DEPRECATED
+
+markSelectedEdges :: Sigma.Sigma -> ST.SelectedEdgeIds -> ST.EdgesMap -> Effect Unit
+markSelectedEdges sigma selectedEdgeIds graphEdges = do
+  Sigma.forEachEdge sigma \e -> do
+    case Map.lookup e.id graphEdges of
+      Nothing -> error $ "Edge id " <> e.id <> " not found in graphEdges map"
+      Just {color} -> do
+        let newColor =
+              if Set.member e.id selectedEdgeIds then
+                "#ff0000"
+              else
+                color
+        _ <- pure $ (e .= "color") newColor
+        pure unit
+  Sigma.refresh sigma
+
+markSelectedNodes :: Sigma.Sigma -> ST.SelectedNodeIds -> ST.NodesMap -> Effect Unit
+markSelectedNodes sigma selectedNodeIds graphNodes = do
+  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

@@ -6,7 +6,21 @@ if (typeof window !== 'undefined') {
   window.sigma = sigma;
 }
 
-require('sigma/plugins/garg.js').init(sigma, window);
+const CustomShapes = require('sigma/plugins/garg.js').init(sigma, window).customShapes;
+require('sigma/src/utils/sigma.utils.js').init(sigma);
+
+sigma.canvas.nodes.hovered = (node, context, settings) => {
+  // hack
+  // We need to temporarily set node.type to 'def'. This is for 2 reasons
+  // 1. Make it render as a normal node
+  // 2. Avoid infinite recursion (hovers.def calls node renderer and we would end up here back
+  //    again with node.type = 'hovered')
+  node.type = 'def';
+  sigma.canvas.hovers.def(node, context, settings);
+  node.type = 'hovered';
+};
+
+CustomShapes.init();
 
 function _sigma(left, right, opts) {
   try {

src/Gargantext/Hooks/Sigmax/Types.purs

@@ -22,18 +22,21 @@ type Renderer = { "type" :: String, container :: Element }
 
 
 type Node =
-  ( id    :: String
-  , label :: String
+  ( borderColor :: String
+  , color :: String
   , hidden :: Boolean
+  , id    :: String
+  , label :: String
+  , size  :: Number
+  , type  :: String  -- available types: circle, cross, def, diamond, equilateral, pacman, square, star
   , x     :: Number
   , y     :: Number
-  , size  :: Number
-  , color :: String )
+  )
 
 type Edge =
-  ( id :: String
-  , color :: String
+  ( color :: String
   , confluence :: Number
+  , id :: String
   , hidden :: Boolean
   , size :: Number
   , source :: String