RangeControl.purs 2.03 KB
Newer Older
1 2 3
module Gargantext.Components.GraphExplorer.RangeControl
  ( Props
  , rangeControl
4 5
  , edgeConfluenceControl
  , edgeWeightControl
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
  , nodeSizeControl
  ) where

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

import Gargantext.Components.RangeSlider as RS
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 $
30
        H.span {className: "range text-center"}
31 32 33 34
          [ H.label {} [ H.text caption ]
          , RS.rangeSlider sliderProps
          ]

35 36
edgeConfluenceControl :: Range.NumberRange -> R.State Range.NumberRange -> R.Element
edgeConfluenceControl (Range.Closed { min, max }) (state /\ setState) =
37
  rangeControl {
38 39
      caption: "Edge Confluence Weight"
    , sliderProps: {
40
        bounds: Range.Closed { min, max }
41 42 43 44 45 46 47 48 49
      , initialValue: state
      , epsilon: 0.01
      , step: 1.0
      , width: 10.0
      , height: 5.0
      , onChange: setState <<< const
      }
    }

50 51
edgeWeightControl :: Range.NumberRange -> R.State Range.NumberRange -> R.Element
edgeWeightControl (Range.Closed { min, max }) (state /\ setState) =
52 53
  rangeControl {
      caption: "Edge Weight"
54
    , sliderProps: {
55
        bounds: Range.Closed { min, max }
56
      , initialValue: state
57
      , epsilon: 1.0
58 59 60
      , step: 1.0
      , width: 10.0
      , height: 5.0
61
      , onChange: setState <<< const
62 63 64
      }
    }

65
nodeSizeControl :: Range.NumberRange -> R.State Range.NumberRange -> R.Element
66
nodeSizeControl (Range.Closed { min, max }) (state /\ setState) =
67 68 69
  rangeControl {
      caption: "Node Size"
    , sliderProps: {
70
        bounds: Range.Closed { min, max }
71 72 73 74 75
      , initialValue: state
      , epsilon: 0.1
      , step: 1.0
      , width: 10.0
      , height: 5.0
76
      , onChange: setState <<< const
77 78
      }
    }