RangeControl.purs 2.19 KB
Newer Older
1 2 3
module Gargantext.Components.GraphExplorer.RangeControl
  ( Props
  , rangeControl
4
  , edgeSizeControl
5 6 7 8 9 10 11 12 13
  , nodeSizeControl
  ) where

import Prelude
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H

import Gargantext.Components.RangeSlider as RS
14 15
import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax.Sigma as Sigma
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
import Gargantext.Utils.Range as Range

type Props = (
    caption :: String
  , sliderProps :: Record RS.Props
  )

rangeControl :: Record Props -> R.Element
rangeControl props = R.createElement rangeControlCpt props []

rangeControlCpt :: R.Component Props
rangeControlCpt = R.hooksComponent "RangeButton" cpt
  where
    cpt {caption, sliderProps} _ = do
      pure $
31
        H.span {className: "range text-center"}
32 33 34 35
          [ H.label {} [ H.text caption ]
          , RS.rangeSlider sliderProps
          ]

36
edgeSizeControl :: R.Ref Sigmax.Sigma -> R.State Range.NumberRange -> R.Element
37
edgeSizeControl sigmaRef (state /\ setState) =
38 39 40 41 42 43 44 45 46
  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
47
      , onChange: \range@(Range.Closed {min, max}) -> do
48 49 50 51 52 53
          let sigma = R.readRef sigmaRef
          Sigmax.dependOnSigma sigma "[edgeSizeControl] sigma: Nothing" $ \s -> do
            Sigma.setSettings s {
              minEdgeSize: min
            , maxEdgeSize: max
            }
54
          setState $ const range
55 56 57
      }
    }

58 59
nodeSizeControl :: R.State Range.NumberRange -> R.Element
nodeSizeControl (state /\ setState) =
60 61 62
  rangeControl {
      caption: "Node Size"
    , sliderProps: {
63
        bounds: Range.Closed { min: 0.0, max: 15.0 }
64 65 66 67 68
      , initialValue: state
      , epsilon: 0.1
      , step: 1.0
      , width: 10.0
      , height: 5.0
69
      , onChange: \range@(Range.Closed {min, max}) -> do
70 71 72 73 74 75
          -- let sigma = R.readRef sigmaRef
          -- Sigmax.dependOnSigma sigma "[nodeSizeControl] sigma: Nothing" $ \s -> do
          --   Sigma.setSettings s {
          --     minNodeSize: min
          --   , maxNodeSize: max
          --   }
76
          setState $ const range
77 78
      }
    }