RangeControl.purs 3.38 KB
Newer Older
arturo's avatar
arturo committed
1
module Gargantext.Components.GraphExplorer.Toolbar.RangeControl
2 3
  ( Props
  , rangeControl
4 5
  , edgeConfluenceControl
  , edgeWeightControl
6 7 8 9 10 11
  , nodeSizeControl
  ) where

import Prelude
import Reactix as R
import Reactix.DOM.HTML as H
12
import Toestand as T
13 14 15

import Gargantext.Components.RangeSlider as RS
import Gargantext.Utils.Range as Range
16 17
import Gargantext.Utils.Reactix as R2

18
here :: R2.Here
arturo's avatar
arturo committed
19
here = R2.here "Gargantext.Components.GraphExplorer.Toolbar.RangeControl"
20

arturo's avatar
arturo committed
21 22
type Props =
  ( caption     :: String
23 24 25
  , sliderProps :: Record RS.Props
  )

arturo's avatar
arturo committed
26 27
rangeControl :: R2.Leaf Props
rangeControl = R2.leaf rangeControlCpt
28
rangeControlCpt :: R.Component Props
29
rangeControlCpt = here.component "rangeButton" cpt
30
  where
arturo's avatar
arturo committed
31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
    cpt {caption, sliderProps} _ = pure $

      H.span
      { className: "range-control" }
      [
        H.label
        { className: "range-control__label" }
        [ H.text caption ]
      ,
        RS.rangeSlider sliderProps
      ]

----------------------------------------

type EdgeConfluenceControlProps =
  ( range :: Range.NumberRange
47
  , state :: T.Box Range.NumberRange
48 49
  )

arturo's avatar
arturo committed
50 51
edgeConfluenceControl :: R2.Leaf EdgeConfluenceControlProps
edgeConfluenceControl = R2.leaf edgeConfluenceControlCpt
52 53 54 55
edgeConfluenceControlCpt :: R.Component EdgeConfluenceControlProps
edgeConfluenceControlCpt = here.component "edgeConfluenceControl" cpt
  where
    cpt { range: Range.Closed { min, max }
arturo's avatar
arturo committed
56 57
        , state
        } _ = do
58 59 60 61 62 63 64 65 66 67 68
      state' <- T.useLive T.unequal state

      pure $ rangeControl {
        caption: "Edge Confluence Weight"
        , sliderProps: {
          bounds: Range.Closed { min, max }
          , initialValue: state'
          , epsilon: 0.01
          , step: 1.0
          , width: 10.0
          , height: 5.0
69
          , onChange: \rng -> T.write_ rng state
70
          }
arturo's avatar
arturo committed
71
        }
72

arturo's avatar
arturo committed
73 74 75 76
--------------------------------------

type EdgeWeightControlProps =
  ( range :: Range.NumberRange
77
  , state :: T.Box Range.NumberRange
78 79
  )

arturo's avatar
arturo committed
80 81
edgeWeightControl :: R2.Leaf EdgeWeightControlProps
edgeWeightControl = R2.leaf edgeWeightControlCpt
82 83 84 85
edgeWeightControlCpt :: R.Component EdgeWeightControlProps
edgeWeightControlCpt = here.component "edgeWeightControl" cpt
  where
    cpt { range: Range.Closed { min, max }
arturo's avatar
arturo committed
86 87
        , state
        } _ = do
88 89 90 91 92 93 94 95 96 97 98
      state' <- T.useLive T.unequal state

      pure $ rangeControl {
        caption: "Edge Weight"
        , sliderProps: {
          bounds: Range.Closed { min, max }
          , initialValue: state'
          , epsilon: 1.0
          , step: 1.0
          , width: 10.0
          , height: 5.0
99 100
          , onChange: \rng -> do
            T.write_ rng state
101
          }
arturo's avatar
arturo committed
102 103 104
        }

--------------------------------------
105

arturo's avatar
arturo committed
106 107
type NodeSideControlProps =
  ( range :: Range.NumberRange
108
  , state :: T.Box Range.NumberRange
109 110
  )

arturo's avatar
arturo committed
111 112
nodeSizeControl :: R2.Leaf NodeSideControlProps
nodeSizeControl = R2.leaf nodeSizeControlCpt
113 114 115 116
nodeSizeControlCpt :: R.Component NodeSideControlProps
nodeSizeControlCpt = here.component "nodeSizeControl" cpt
  where
    cpt { range: Range.Closed { min, max }
arturo's avatar
arturo committed
117 118
        , state
        } _ = do
119 120 121 122 123 124 125 126 127 128 129
      state' <- T.useLive T.unequal state

      pure $ rangeControl {
        caption: "Node Size"
        , sliderProps: {
          bounds: Range.Closed { min, max }
          , initialValue: state'
          , epsilon: 0.1
          , step: 1.0
          , width: 10.0
          , height: 5.0
130
          , onChange: \rng -> T.write_ rng state
131
          }
arturo's avatar
arturo committed
132
        }