[Graph] basic controls added and working

src/Gargantext/Components/GraphExplorer.purs

@@ -66,7 +66,7 @@ spec = simpleSpec GET.performAction render
      [ R2.scuff $ specCpt dispatch state props ]
 
 specCpt :: (GET.Action -> Effect Unit) -> Record GET.StateGlue -> Record Props -> R.Element
-specCpt d stateGlue props = R.createElement el props []
+specCpt d stateGlue p = R.createElement el p []
   where
     el = R.hooksComponent "SpecCpt" cpt
     cpt props _children = do
@@ -77,27 +77,31 @@ specCpt d stateGlue props = R.createElement el props []
 explorer :: Record GET.State -> Record Props -> R.Element
 explorer state props = R.createElement (explorerCpt state) props []
 
---explorerCpt :: GET.State -> R.Component Props
+explorerCpt :: Record GET.State -> R.Component Props
 explorerCpt state = R.hooksComponent "GraphExplorer" cpt
   where
     cpt {graphId, mCurrentRoute, treeId} _ = do
       controls <- Controls.useGraphControls
       pure $
-        row
-        [
-          outer
-          [ inner
-            [ row1
-              [ col [ pullLeft [ Toggle.treeToggleButton controls.showTree ] ]
-              , col [ Toggle.controlsToggleButton controls.showControls ]
-              , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
+        RH.div
+          { id: "graph-explorer" }
+          [
+            row
+            [
+              outer
+              [ inner
+                [ row1
+                  [ col [ pullLeft [ Toggle.treeToggleButton controls.showTree ] ]
+                  , col [ Toggle.controlsToggleButton controls.showControls ]
+                  , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
+                  ]
+                , row [ Controls.controls controls ]
+                , row [ tree {mCurrentRoute, treeId} controls, graphLoader graphId controls, sidebar controls ]
+                , row [ ]
+                ]
               ]
-            , row [ Controls.controls controls ]
-            , row [ tree {mCurrentRoute, treeId} controls, graphLoader graphId controls, sidebar controls ]
-            , row [ ]
             ]
           ]
-        ]
     outer = RH.div { className: "col-md-9" }
     inner = RH.div { className: "container-fluid", style: { paddingTop: "90px" } }
     row1 = RH.div { className: "row", style: { paddingBottom: "10px", marginTop: "-24px" } }
@@ -131,7 +135,7 @@ loadedGraphView controls props = R.createElement el props []
     cpt {graphId, graph} _children = do
       pure $ Graph.graph {
           graph
-        , sigmaSettings: Graph.sigmaSettings
+        , sigmaSettings: Controls.controlsToSigmaSettings controls
         , forceAtlas2Settings: Graph.forceAtlas2Settings
         }
 
@@ -158,7 +162,125 @@ defaultPalette = ["#5fa571","#ab9ba2","#da876d","#bdd3ff","#b399df","#ffdfed","#
 
 -- clusterColor :: Cluster -> Color
 -- clusterColor (Cluster {clustDefault}) = unsafePartial $ fromJust $ defaultPalette !! (clustDefault `mod` length defaultPalette)
+    
+--               div [className "col-md-12", style {"padding-bottom" : "10px"}]
+--             [ menu [_id "toolbar"]
+--               [ ul'
+--                 [
+--                 --  li' [ button [className "btn btn-success btn-sm"] [text "Change Type"] ]
+--                 -- ,
+--                 -- , li' [ button [className "btn btn-primary btn-sm"] [text "Change Level"] ]
+--                 {- ,li [style {display : "inline-block"}]
+--                   [ form'
+--                     [ input [_type "file"
+--                             , name "file"
+--                          --   , onChange (\e -> d $ SetFile (getFile e) (unsafeCoerce $ d <<< SetProgress))
+--                             , className "btn btn-primary"]
+
+--                     -- , text $ show st.readyState
+--                     ]
+--                   ]
+--                 -}
+--                 {-, li' [ input [_type "button"
+--                               , className "btn btn-warning btn-sm"
+--                               ,value "Run Demo"
+--                             --  , onClick \_ -> d SetGraph, disabled (st.readyState /= DONE)
+--                               ]
+--                       ]
+--                       -}
+--                 {-, li'
+--                   [ form'
+--                     [ div [className "col-lg-2"]
+--                       [
+--                         div [className "input-group"]
+--                         [
+--                           span [className "input-group-btn"]
+--                           [
+--                             button [className "btn btn-primary", _type "button"]
+--                             [ span [className "glyphicon glyphicon-search"] []
+--                             ]
+--                           ]
+--                           , input [_type "text", className "form-control", placeholder "select topics"]
+--                         ]
+--                       ]
+
+--                     ]
+--                   ]
+--                 -}
+--                  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"
+--                                                  , max "4"
+--                                                  , defaultValue <<< show $ sigmaSettings ^. _labelSizeRatio
+--                                                  , min "1"
+--                                                  , onChange \e -> d $ ChangeLabelSize (numberTargetValue e)
+--                                                  ]
+--                   ]
+
+--                 , li [className "col-md-1"]
+--                   [ span [] [text "Nodes"],input [_type "range"
+--                                                  , _id "nodeSizeRange"
+--                                                  , max "15"
+--                                                  , defaultValue <<< show $ sigmaSettings ^. _minNodeSize
+--                                                  , min "5"
+--                                                  , onChange \e -> d $ ChangeNodeSize (numberTargetValue e)
+--                                                  ]
+--                   ]
+--                 {-, li [className "col-md-2"]
+--                   [ span [] [text "Edges"],input [_type "range", _id "myRange", value "90"]
+--                   ]
+--                 -}
+--                 -- , li'
+--                   -- [ button [ className "btn btn-primary"
+--                   --          , onClick \_ -> modCamera0 (const {x: 0.0, y: 0.0, ratio: 1.0})
+--                   --          ] [text "Center"]
+--                   -- ]
+--                 -- , li [className "col-md-1"]
+--                 --   [ span [] [text "Zoom"],input [ _type "range"
+--                 --                                 , _id "cameraRatio"
+--                 --                                 , max "100"
+--                 --                                 , defaultValue "0"
+--                 --                                 , min "0"
+--                 --                                 , onChange \e -> do
+--                 --                                     let ratio = (100.0 - numberTargetValue e) / 100.0pa
+--                 --                                     modCamera0 (const {ratio})
+--                 --                                 ]
+--                 --   ]
+--                 , li [className "col-md-1"]
+--                   [ span [] [text "MultiNode"]
+--                   , input
+--                     [ _type "checkbox"
+--                     , className "checkbox"
+--                     -- , checked
+--                     , onChange $ const $ d ToggleMultiNodeSelection
+--                     ]
+--                   ]
+--                 , li'
+--                   [ button [ className "btn btn-primary"
+--                            , onClick \_ -> pauseForceAtlas2
+--                            ] [text "Spatialization"]
+--                   ]
+--                 {-, li'
+--                   [ button [className "btn btn-primary"
+--                             , onClick \_ -> do
+--                                              _ <- log "Hey there" -- $ show st.camera
+--                                              pure unit
+--                            ] [text "Save"] -- TODO: Implement Save!
+--                   ]
+--                 -}
+--                 ]
+--               ]
 
 
 getNodes :: GraphId -> Aff GET.GraphData
-getNodes graphId = get $ Config.toUrl Config.Back Config.Graph $ Just graphId
\ No newline at end of file
+getNodes graphId = get $ Config.toUrl Config.Back Config.Graph $ Just graphId

src/Gargantext/Components/GraphExplorer/Controls.purs

 module Gargantext.Components.GraphExplorer.Controls
- ( Controls, useGraphControls, controls, controlsCpt
+ ( Controls
+ , controlsToSigmaSettings
+ , useGraphControls
+ , controls
+ , controlsCpt
  , getShowTree, setShowTree
  , getShowControls, setShowControls
  , getShowSidePanel, setShowSidePanel
@@ -16,6 +20,8 @@ import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as RH
 
+import Gargantext.Components.Graph as Graph
+import Gargantext.Components.GraphExplorer.SlideButton (labelSizeButton, nodeSizeButton)
 import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton)
 import Gargantext.Utils.Reactix as R2
 
@@ -31,6 +37,18 @@ type Controls =
   , showTree :: R.State Boolean
   )
 
+controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings
+controlsToSigmaSettings { labelSize: (labelSize /\ _)
+                        , nodeSize: (nodeSize /\ _)
+                        , showEdges: (showEdges /\ _)} = Graph.sigmaSettings {
+    drawEdges = showEdges
+  , labelMaxSize = labelSize
+  , maxEdgeSize = if showEdges then 1.0 else 0.0
+  , maxNodeSize = nodeSize
+  , minEdgeSize = if showEdges then 1.0 else 0.0
+  , minNodeSize = nodeSize
+  }
+
 controls :: Record Controls -> R.Element
 controls props = R.createElement controlsCpt props []
 
@@ -52,8 +70,8 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
                   -- search button
                   -- search topics
                   -- cursor size: 0-100
-                  -- labels size: 1-4
-                  -- node size : 5-15
+                , RH.li {} [ labelSizeButton props.labelSize ] -- labels size: 1-4
+                , RH.li {} [ nodeSizeButton props.nodeSize ] -- node size : 5-15
                   -- edge size : ??
                   -- zoom: 0 -100 - calculate ratio
                   -- toggle multi node selection
@@ -67,7 +85,7 @@ useGraphControls :: R.Hooks (Record Controls)
 useGraphControls = do
   cursorSize <- R.useState' 10.0
   labelSize <- R.useState' 3.0
-  nodeSize <- R.useState' 10.0
+  nodeSize <- R.useState' 5.0
   multiNodeSelect <- R.useRef false
   showControls <- R.useState' false
   showEdges <- R.useState' true

src/Gargantext/Components/GraphExplorer/SlideButton.purs

+module Gargantext.Components.GraphExplorer.SlideButton
+  ( Props
+  , sizeButton
+  , labelSizeButton
+  , nodeSizeButton
+  ) where
+
+import Global (readFloat)
+import Prelude
+import Data.Tuple.Nested ((/\))
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Utils.Reactix as R2
+
+type Props = ( state :: R.State Number, caption :: String, min :: Number, max :: Number )
+
+sizeButton :: Record Props -> R.Element
+sizeButton props = R.createElement sizeButtonCpt props []
+
+sizeButtonCpt :: R.Component Props
+sizeButtonCpt = R.hooksComponent "SizeButton" cpt
+  where
+    cpt {state, caption, min, max} _ = do
+      let (value /\ setValue) = state
+      pure $
+        H.span {}
+          [ H.label {} [ H.text caption ]
+          , H.input { type: "range"
+                    , className: "form-control"
+                    , min: show min
+                    , max: show max
+                    , defaultValue: value
+                    , on: {input: \e -> setValue $ const $ readFloat $ R2.unsafeEventValue e }
+                    }
+          ]
+
+labelSizeButton :: R.State Number -> R.Element
+labelSizeButton state =
+  sizeButton { state: state, caption: "Label Size", min: 1.0, max: 4.0 }
+
+nodeSizeButton :: R.State Number -> R.Element
+nodeSizeButton state =
+  sizeButton { state: state, caption: "Node Size", min: 5.0, max: 15.0 }

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -22,9 +22,12 @@ toggleButtonCpt = R.hooksComponent "ToggleButton" cpt
     cpt {state, onMessage, offMessage} _ = do
       let (toggled /\ setToggled) = state
       pure $
-        H.button
-          { className: "btn btn-primary", on: {click: \_ -> setToggled not } }
-          [ H.text (text onMessage offMessage toggled) ]
+        H.span {}
+          [
+            H.button
+              { className: "btn btn-primary", on: {click: \_ -> setToggled not } }
+              [ H.text (text onMessage offMessage toggled) ]
+          ]
     text on _off true = on
     text _on off false = off
 

src/Gargantext/Components/GraphExplorer/Types.purs

@@ -87,6 +87,8 @@ performAction Dummy _ _ = do
   pure $ unit
 
 
+-- NOTE: special state to "glue" thermite with reactix
+-- When thermite is removed, this can be removed as well and replaced with State
 type StateGlue = (
   --treeId :: Maybe TreeId
 )

src/Gargantext/Hooks/Sigmax.purs

@@ -90,6 +90,7 @@ useCanvasRenderer container sigma =
 
 createSigma :: forall settings err. settings -> Effect (Either err Sigma.Sigma)
 createSigma settings = do
+  log2 "[useSigma] Initializing sigma with settings" settings
   ret <- Sigma.sigma {settings}
   ret <$ logStatus ret
   where