module Gargantext.Components.GraphExplorer.RangeControl ( Props , rangeControl , edgeConfluenceControl , edgeWeightControl , nodeSizeControl ) where import Prelude import Reactix as R import Reactix.DOM.HTML as H import Toestand as T import Gargantext.Components.RangeSlider as RS import Gargantext.Utils.Range as Range import Gargantext.Utils.Reactix as R2 here :: R2.Here here = R2.here "Gargantext.Components.GraphExplorer.RangeControl" type Props = ( caption :: String , sliderProps :: Record RS.Props ) rangeControl :: R2.Component Props rangeControl = R.createElement rangeControlCpt rangeControlCpt :: R.Component Props rangeControlCpt = here.component "rangeButton" cpt where cpt {caption, sliderProps} _ = do pure $ H.span {className: "range text-center"} [ H.label {} [ R2.small {} [ H.text caption ] ] , RS.rangeSlider sliderProps ] type EdgeConfluenceControlProps = ( range :: Range.NumberRange , state :: T.Box Range.NumberRange ) edgeConfluenceControl :: R2.Component EdgeConfluenceControlProps edgeConfluenceControl = R.createElement edgeConfluenceControlCpt edgeConfluenceControlCpt :: R.Component EdgeConfluenceControlProps edgeConfluenceControlCpt = here.component "edgeConfluenceControl" cpt where cpt { range: Range.Closed { min, max } , state } _ = do 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 , onChange: \rng -> T.write_ rng state } } [] type EdgeWeightControlProps = ( range :: Range.NumberRange , state :: T.Box Range.NumberRange ) edgeWeightControl :: R2.Component EdgeWeightControlProps edgeWeightControl = R.createElement edgeWeightControlCpt edgeWeightControlCpt :: R.Component EdgeWeightControlProps edgeWeightControlCpt = here.component "edgeWeightControl" cpt where cpt { range: Range.Closed { min, max } , state } _ = do 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 , onChange: \rng -> T.write_ rng state } } [] type NodeSideControlProps = ( range :: Range.NumberRange , state :: T.Box Range.NumberRange ) nodeSizeControl :: R2.Component NodeSideControlProps nodeSizeControl = R.createElement nodeSizeControlCpt nodeSizeControlCpt :: R.Component NodeSideControlProps nodeSizeControlCpt = here.component "nodeSizeControl" cpt where cpt { range: Range.Closed { min, max } , state } _ = do 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 , onChange: \rng -> T.write_ rng state } } []