[Graph] various fixes

- range slider precision fix
- added edge size bounds
- fixed Globals 4.1.0 dependency (was 4.0.0 which was missing lots of
functions)
- upgraded purescript to 0.13.3 (has better error messages, with diff)

.psc-package/local/.set/packages.json

@@ -1092,9 +1092,12 @@
     "version": "v6.1.1"
   },
   "globals": {
-    "dependencies": [],
-    "repo": "https://github.com/purescript/purescript-globals.git",
-    "version": "v4.0.0"
+    "dependencies": [
+      "functions",
+      "maybe"
+    ],
+    "repo": "https://github.com/purescript/purescript-globals",
+    "version": "v4.1.0"
   },
   "gomtang-basic": {
     "dependencies": [

package.json

@@ -46,7 +46,7 @@
         "psc": "^0.1.1",
         "psc-package": "^3.0.1",
         "pulp": "^13.0.0",
-        "purescript": "^0.13.2",
+        "purescript": "^0.13.3",
         "purs-loader": "^3.3.0",
         "react-testing-library": "^6.1.2",
         "source-map-loader": "^0.2.4",

packages.dhall

@@ -127,6 +127,13 @@ let overrides =
           ]
           "https://github.com/np/purescript-thermite.git"
           "hide"
+      , globals =
+          mkPackage
+          [ "functions"
+          , "maybe"
+          ]
+          "https://github.com/purescript/purescript-globals"
+          "v4.1.0"
       }
 
 let additions =

psc-package.json

@@ -13,6 +13,7 @@
     "effect",
     "foreign-object",
     "generics-rep",
+    "globals",
     "integers",
     "js-timers",
     "math",

src/Gargantext/Components/Annotation/Menu.purs

@@ -15,6 +15,7 @@ import Gargantext.Types ( TermList(..), termListName )
 import Gargantext.Components.Annotation.Utils ( termBootstrapClass )
 
 import Gargantext.Components.ContextMenu.ContextMenu as CM
+import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Selection (Selection, selectionToString)
 
 data MenuType = NewNgram | SetTermListItem
@@ -29,7 +30,7 @@ type AnnotationMenu = { x :: Number, y :: Number | Props }
 
 -- | An Annotation Menu is parameterised by a Maybe Termlist of the
 -- | TermList the currently selected text belongs to
-annotationMenu :: ((Maybe AnnotationMenu -> Maybe AnnotationMenu) -> Effect Unit) -> AnnotationMenu -> R.Element
+annotationMenu :: R2.StateSetter (Maybe AnnotationMenu) -> AnnotationMenu -> R.Element
 annotationMenu setMenu { x,y,list,menuType,setList } =
   CM.contextMenu { x,y,setMenu } [
     R.createElement annotationMenuCpt {list,menuType,setList} []

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -21,7 +21,7 @@ import Reactix as R
 import Reactix.DOM.HTML as RH
 
 import Gargantext.Components.Graph as Graph
-import Gargantext.Components.GraphExplorer.RangeControl (nodeSizeControl)
+import Gargantext.Components.GraphExplorer.RangeControl (edgeSizeControl, nodeSizeControl)
 import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton)
 import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton)
 import Gargantext.Utils.Range as Range
@@ -30,6 +30,7 @@ import Gargantext.Utils.Reactix as R2
 
 type Controls =
   ( cursorSize :: R.State Number
+  , edgeSize :: R.State Range.NumberRange
   , labelSize :: R.State Number
   , nodeSize :: R.State Range.NumberRange
   , multiNodeSelect :: R.Ref Boolean
@@ -41,6 +42,7 @@ type Controls =
 
 controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings
 controlsToSigmaSettings { cursorSize: (cursorSize /\ _)
+                        , edgeSize: (Range.Closed { min: edgeSizeMin, max: edgeSizeMax } /\ _)
                         , labelSize: (labelSize /\ _)
                         , nodeSize: (Range.Closed { min: nodeSizeMin, max: nodeSizeMax } /\ _)
                         , showEdges: (showEdges /\ _)} = Graph.sigmaSettings {
@@ -48,10 +50,10 @@ controlsToSigmaSettings { cursorSize: (cursorSize /\ _)
   , drawEdges = showEdges
   , drawEdgeLabels = showEdges
   , hideEdgesOnMove = not showEdges
-  , maxEdgeSize = if showEdges then 1.0 else 0.0
-  , minEdgeSize = if showEdges then 1.0 else 0.0
-  , maxNodeSize = nodeSizeMax
+  , minEdgeSize = if showEdges then edgeSizeMin else 0.0
+  , maxEdgeSize = if showEdges then edgeSizeMax else 0.0
   , minNodeSize = nodeSizeMin
+  , maxNodeSize = nodeSizeMax
   }
 
 controls :: Record Controls -> R.Element
@@ -69,6 +71,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
               [ RH.ul {}
                 [ -- change type button (?)
                   RH.li {} [ edgesToggleButton props.showEdges ]
+                , RH.li {} [ edgeSizeControl props.edgeSize ] -- edge size : 0-3
                   -- change level
                   -- file upload
                   -- run demo
@@ -77,7 +80,6 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
                 , RH.li {} [ cursorSizeButton props.cursorSize ] -- cursor size: 0-100
                 , RH.li {} [ labelSizeButton props.labelSize ] -- labels size: 1-4
                 , RH.li {} [ nodeSizeControl props.nodeSize ] -- node size : 5-15
-                  -- edge size : ??
                   -- zoom: 0 -100 - calculate ratio
                   -- toggle multi node selection
                   -- spatialization (pause ForceAtlas2)
@@ -89,6 +91,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
 useGraphControls :: R.Hooks (Record Controls)
 useGraphControls = do
   cursorSize <- R.useState' 10.0
+  edgeSize <- R.useState' $ Range.Closed { min: 0.5, max: 1.0 }
   labelSize <- R.useState' 3.0
   nodeSize <- R.useState' $ Range.Closed { min: 5.0, max: 10.0 }
   multiNodeSelect <- R.useRef false
@@ -96,7 +99,17 @@ useGraphControls = do
   showEdges <- R.useState' true
   showSidePanel <- R.useState' false
   showTree <- R.useState' false
-  pure { showTree, showControls, showSidePanel, showEdges, cursorSize, labelSize, nodeSize, multiNodeSelect }
+  pure {
+      showTree
+    , showControls
+    , showSidePanel
+    , showEdges
+    , cursorSize
+    , edgeSize
+    , labelSize
+    , nodeSize
+    , multiNodeSelect
+    }
 
 getShowTree :: Record Controls -> Boolean
 getShowTree { showTree: ( should /\ _ ) } = should

src/Gargantext/Components/GraphExplorer/RangeControl.purs

 module Gargantext.Components.GraphExplorer.RangeControl
   ( Props
   , rangeControl
+  , edgeSizeControl
   , nodeSizeControl
   ) where
 
@@ -32,6 +33,21 @@ rangeControlCpt = R.hooksComponent "RangeButton" cpt
           , RS.rangeSlider sliderProps
           ]
 
+edgeSizeControl :: R.State Range.NumberRange -> R.Element
+edgeSizeControl (state /\ setState) =
+  rangeControl {
+      caption: "Edge Size"
+    , sliderProps: {
+        bounds: Range.Closed { min: 0.0, max: 3.0 }
+      , initialValue: state
+      , epsilon: 0.1
+      , step: 1.0
+      , width: 10.0
+      , height: 5.0
+      , onChange: setState <<< const
+      }
+    }
+
 nodeSizeControl :: R.State Range.NumberRange -> R.Element
 nodeSizeControl (state /\ setState) =
   rangeControl {

src/Gargantext/Components/RangeSlider.purs

@@ -7,7 +7,8 @@
 module Gargantext.Components.RangeSlider where
 
 import Prelude
-import Data.Maybe (Maybe(..))
+import Data.Int (fromNumber)
+import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Nullable (Nullable, null, toMaybe)
 import Data.Traversable (traverse_)
 import Data.Tuple.Nested ((/\))
@@ -18,10 +19,12 @@ import DOM.Simple.Element as Element
 import DOM.Simple.Event as Event
 import DOM.Simple.EventListener as EL
 import DOM.Simple.Types (DOMRect, Element)
+import Global (toFixed)
 import Effect (Effect)
 import Effect.Class (liftEffect)
 import Effect.Uncurried (EffectFn1, mkEffectFn1)
 --import Global (toFixed)
+import Math as M
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Reactix.SyntheticEvent as RE
@@ -58,6 +61,9 @@ rangeSliderCpt = R.hooksComponent "RangeSlider" cpt
       --R.useEffect' $ do
       --  liftEffect $ log2 "Props: " props
 
+      -- rounding precision (i.e. how many decimal digits are in epsilon)
+      let precision = fromMaybe 0 $ fromNumber $ max 0.0 $ - M.floor $ (M.log props.epsilon) / M.ln10
+
       -- scale bar
       scaleElem <- (R.useRef null) :: R.Hooks (R.Ref (Nullable DOM.Element)) -- dom ref
       --scalePos <- R2.usePositionRef scaleElem
@@ -137,8 +143,8 @@ rangeSliderCpt = R.hooksComponent "RangeSlider" cpt
           Nothing -> destroy unit
       pure $ H.div { className, aria }
         [ renderScale scaleElem props value'
-        , renderKnob lowElem  value'.min props.bounds MinKnob setDragKnob props.epsilon
-        , renderKnob highElem value'.max props.bounds MaxKnob setDragKnob props.epsilon
+        , renderKnob MinKnob lowElem  value'.min props.bounds setDragKnob precision
+        , renderKnob MaxKnob highElem value'.max props.bounds setDragKnob precision
         ]
     className = "range-slider"
     aria = { label: "Range Slider Control. Expresses filtering data by a minimum and maximum value range through two slider knobs. Knobs can be adjusted with the arrow keys." }
@@ -153,7 +159,7 @@ destroyEventHandler name ref = traverse_ destroy $ R.readRef ref
       EL.removeEventListener document name handler
       R.setRef ref Nothing
 
-setKnob :: Knob -> ((Range.NumberRange -> Range.NumberRange) -> Effect Unit) -> Range.NumberRange -> Number -> Effect Unit
+setKnob :: Knob -> R2.StateSetter Range.NumberRange -> Range.NumberRange -> Number -> Effect Unit
 setKnob knob setValue r val = setValue $ const $ setter knob r val
   where
     setter MinKnob = Range.withMin
@@ -178,13 +184,14 @@ renderScale ref {width,height} {min, max} =
     aria = { label: "Scale running from " <> show min <> " to " <> show max }
     style = { width: "100%", height: "3px" }
 
-renderKnob ref val bounds knob set epsilon =
+renderKnob :: Knob -> R.Ref (Nullable DOM.Element) -> Number -> Range.NumberRange -> R2.StateSetter (Maybe Knob) -> Int -> R.Element
+renderKnob knob ref val bounds set precision =
   H.div { ref, tabIndex, className, aria, onMouseDown, style } [
       H.div { className: "button" } []
-    , H.text (text $ Just val)
+    , H.text $ text $ toFixed precision val
   ]
   where
-    text (Just num) = show num
+    text (Just num) = num
     text Nothing = "error"
     tabIndex = 0
     className = "knob"

src/Gargantext/Utils/Reactix.purs

@@ -26,6 +26,8 @@ import Unsafe.Coerce (unsafeCoerce)
 
 newtype Point = Point { x :: Number, y :: Number }
 
+type StateSetter a = (a -> a) -> Effect Unit
+
 -- | Turns a ReactElement into aReactix Element
 -- | buff (v.) to polish
 buff :: ReactElement -> R.Element

yarn.lock

@@ -5177,10 +5177,10 @@ purescript-installer@^0.2.0:
     which "^1.3.1"
     zen-observable "^0.8.14"
 
-purescript@^0.13.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/purescript/-/purescript-0.13.2.tgz#9d7e8cde0e1a23bb2ec008449675cb6434933165"
-  integrity sha512-HdB8KzEjXDUq1OXLU+FCfjWWX28suNfsrBYqpAbWVKKg6hvJs+fyCc1earfwZeVL/QimL1734AlmhRP0fQrN+A==
+purescript@^0.13.3:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/purescript/-/purescript-0.13.3.tgz#18e0a8c0a21332fc16b02218a8b136a699d444bb"
+  integrity sha512-YFznjWSFrl6pbds0JxWXJ/ztzyGgUsR5pvdF/wH1i1BqSqxpFtWgREUIOCCkzmuc+X9U2Ntf5DMQ56RxawE3gQ==
   dependencies:
     purescript-installer "^0.2.0"