[GraphExplorer] display the selector circle if cursorSize > 0.

src/Gargantext/Components/GraphExplorer/Sigmajs.js

@@ -50,7 +50,6 @@ exports.getSigmaRef = function() {
 };
 exports.goToImpl = function(cam) {
   return function(props) {
-    console.log("goTo", cam, props);
     return cam.goTo(props);
   };
 };
@@ -66,17 +65,10 @@ exports.pauseForceAtlas2 = function() {
   }
 };
 
-exports.cursor_size = 10;
+var trackMouse = function(cursorSize, e) {
 
-// TODO
-//exports.shift_key = false;
-exports.shift_key = true;
-
-exports.trackMouse = function(e) {
-
-    if(!exports.shift_key) {
+    if(!e.shiftKey) {
       var partialGraph = window.sigmaGargInstance;
-      console.log('FUN t.minimap:trackMouse');
       // new sigma.js 2D mouse context
       var ctx = partialGraph.renderers[0].contexts.mouse;
       ctx.globalCompositeOperation = "source-over";
@@ -91,7 +83,7 @@ exports.trackMouse = function(e) {
       var coord = window.sigma.utils.mouseCoords(e)
       var x = (coord.x + coord.clientX) / 2 // ; // sigma.utils.getX(e);
       var y = (coord.y + coord.clientY) /2 // ; // sigma.utils.getY(e);
-      console.log(coord);
+      console.log('trackMouse', coord);
       // optional: make more labels appear on circle hover (/!\ costly /!\ esp. on large graphs)
 //      if (partialGraph.conf.moreLabelsUnderArea) {
 //        // convert screen => mouse => cam
@@ -119,8 +111,7 @@ exports.trackMouse = function(e) {
       ctx.fillStyle = "#71C3FF";
       ctx.globalAlpha = 0.5;
       ctx.beginPath();
-      ctx.arc(x, y, 30.0, 0, Math.PI * 2, true);
-      //ctx.arc(x, y, partialGraph.gui.circleSize, 0, Math.PI * 2, true);
+      ctx.arc(x, y, cursorSize, 0, Math.PI * 2, true);
       ctx.closePath();
       ctx.fill();
       ctx.stroke();
@@ -130,11 +121,12 @@ exports.trackMouse = function(e) {
 
 };
 
-exports.sigmaOnMouseMove = function(e) {
+exports.sigmaOnMouseMove = function(props) {
+  return function(e) {
     return function() {
-      console.log('sigmaOnMouseMove');
       if(typeof(window.sigmaGargInstance) !== "undefined") {
-          if(exports.cursor_size>0) exports.trackMouse(e);
+          if(props.cursorSize > 0) trackMouse(props.cursorSize, e);
       }
     };
+  };
 };

src/Gargantext/Components/GraphExplorer/Sigmajs.purs

@@ -6,6 +6,7 @@ import Data.Nullable (Nullable)
 import Effect (Effect)
 import Effect.Uncurried (EffectFn1, EffectFn2, mkEffectFn1, runEffectFn1)
 import React (Children, ReactClass, ReactElement, ReactRef, SyntheticEventHandler, createElement, unsafeCreateElement)
+import React.SyntheticEvent (SyntheticMouseEvent)
 import Record.Unsafe (unsafeGet)
 import Thermite (EventHandler)
 import Unsafe.Coerce (unsafeCoerce)
@@ -260,7 +261,7 @@ type SigmaInstance = { | SigmaInstance' }
 type CameraInstance = { | CameraInstance' }
 foreign import setSigmaRef :: EffectFn1 (Nullable ReactRef) Unit
 foreign import getSigmaRef :: Effect SigmaInstance
-foreign import sigmaOnMouseMove :: forall o. o -> Effect Unit
+foreign import sigmaOnMouseMove :: {cursorSize :: Number} -> SyntheticMouseEvent -> Effect Unit
 cameras :: SigmaInstance -> Array CameraInstance
 cameras = unsafeGet "cameras"
 

src/Gargantext/Config.purs

@@ -26,7 +26,7 @@ endConfig = endConfig' V10
 
 endConfig' :: ApiVersion -> EndConfig
 endConfig' v = { front : frontRelative
-               , back  : backLocal v  }
+               , back  : backDemo v  }
 --               , back  : backDemo v  }
 
 ------------------------------------------------------------------------

src/Gargantext/Pages/Corpus/Graph.purs

@@ -63,6 +63,7 @@ data Action
   | ChangeNodeSize Number
   | DisplayEdges
   | ToggleMultiNodeSelection
+  | ChangeCursorSize Number
 --  | Zoom Boolean
 
 newtype SelectedNode = SelectedNode {id :: String, label :: String}
@@ -74,6 +75,8 @@ derive instance ordSelectedNode :: Ord SelectedNode
 instance showSelectedNode :: Show SelectedNode where
   show (SelectedNode node) = node.label
 
+_cursorSize :: forall s a. Lens' { cursorSize :: a | s } a
+_cursorSize = prop (SProxy :: SProxy "cursorSize")
 
 _multiNodeSelection :: forall s a. Lens' { multiNodeSelection :: a | s } a
 _multiNodeSelection = prop (SProxy :: SProxy "multiNodeSelection")
@@ -117,6 +120,7 @@ newtype State = State
   , sigmaGraphData :: Maybe SigmaGraphData
   , legendData :: Array Legend
   , selectedNodes :: Set SelectedNode
+  , cursorSize :: Number
   , multiNodeSelection :: Boolean
   , showSidePanel :: Boolean
   , showControls :: Boolean
@@ -135,6 +139,7 @@ initialState = State
   , sigmaGraphData : Nothing
   , legendData : []
   , selectedNodes : Set.empty
+  , cursorSize : 0.0
   , multiNodeSelection : false
   , showSidePanel : false
   , showControls : false
@@ -200,6 +205,11 @@ performAction ToggleMultiNodeSelection _ _ =
   modifyState_ $ \(State s) -> do
     State $ s # _multiNodeSelection %~ not
 
+performAction (ChangeCursorSize size) _ _ =
+  modifyState_ $ \(State s) ->
+    State $ s # _cursorSize .~ size
+
+
 --performAction (Zoom True) _ _ =
 --  modifyState_ $ \() -> do
 --    State $
@@ -513,10 +523,16 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
                     ]
                   ]
                 -}
-                {-, li [className "col-md-2"]
-                  [ span [] [text "Selector"],input [_type "range", _id "myRange", value "90"]
+                , li [className "col-md-1"]
+                  [ span [] [text "Selector"]
+                  , input [ _type "range"
+                          , _id "cursorSizeRange"
+                          , min "0"
+                          , max "100"
+                          , defaultValue (show st.cursorSize)
+                          , onChange \e -> d $ ChangeCursorSize (numberTargetValue e)
+                          ]
                   ]
-                -}
                 , li [className "col-md-1"]
                   [ span [] [text "Labels"],input [_type "range"
                                                  , _id "labelSizeRange"
@@ -586,7 +602,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
          , div [className "row"]
            [div [if (st.showSidePanel && st.showTree) then className "col-md-10" else if (st.showSidePanel || st.showTree) then className "col-md-10" else className "col-md-12"]
              [ div [style {height: "95%"}
-                   ,onMouseMove sigmaOnMouseMove] $
+                   ,onMouseMove (sigmaOnMouseMove {cursorSize: st.cursorSize})] $
                [
                ]
                <>