Commit 90eb82be authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[Graph] RangeSlider compiles now

parent f78f6138
...@@ -131,7 +131,7 @@ mkToolBox = { feature: { dataView : { show: true, readOnly : false, title : " ...@@ -131,7 +131,7 @@ mkToolBox = { feature: { dataView : { show: true, readOnly : false, title : "
--------------------------------------- ---------------------------------------
type ToolBox = { feature :: Feature  type ToolBox = { feature :: Feature
, orient :: String} , orient :: String}
type Feature = { dataView :: DataView type Feature = { dataView :: DataView
, saveAsImage :: Save , saveAsImage :: Save
......
...@@ -26,7 +26,7 @@ import Gargantext.Hooks.Sigmax ...@@ -26,7 +26,7 @@ import Gargantext.Hooks.Sigmax
import Gargantext.Hooks.Sigmax.Types as Sigmax import Gargantext.Hooks.Sigmax.Types as Sigmax
import Gargantext.Hooks.Sigmax.Sigma (SigmaOpts) import Gargantext.Hooks.Sigmax.Sigma (SigmaOpts)
import Gargantext.Hooks.Sigmax.Sigma as Sigma import Gargantext.Hooks.Sigmax.Sigma as Sigma
import Gargantext.Hooks.Sigmax.Sigmajs () import Gargantext.Hooks.Sigmax.Sigmajs
type OnProps = () type OnProps = ()
......
...@@ -7,23 +7,25 @@ ...@@ -7,23 +7,25 @@
module Gargantext.Components.RangeSlider where module Gargantext.Components.RangeSlider where
import Prelude import Prelude
import Reactix as R import Data.Maybe (Maybe(..))
import Data.Nullable (null)
import Data.Traversable (traverse_) import Data.Traversable (traverse_)
import Gargantext.Utils.Reactix as R2 import Effect (Effect)
import Effect.Class (liftEffect)
import Effect.Uncurried (EffectFn1, mkEffectFn1)
import DOM.Simple.Document (document) import DOM.Simple.Document (document)
import DOM.Simple.EventListener as EL import DOM.Simple.EventListener as EL
import DOM.Simple.Types (DOMRect, Element) import DOM.Simple.Types (DOMRect, Element)
import DOM.Simple.Event as Event import DOM.Simple.Event as Event
import DOM.Simple.Console (log, log2) import DOM.Simple.Console (log, log2)
import Data.Tuple.Nested ((/\)) import Data.Tuple.Nested ((/\))
import Effect.Uncurried (EffectFn1, mkEffectFn1) import Reactix as R
import Gargantext.Utils.Math (roundToMultiple)
import Gargantext.Utils.Range as Range
import Data.Maybe (Maybe(..))
import Data.Nullable (null)
import Effect (Effect)
import Reactix.DOM.HTML as H import Reactix.DOM.HTML as H
import Reactix.SyntheticEvent as RE import Reactix.SyntheticEvent as RE
import Gargantext.Utils.Math (roundToMultiple)
import Gargantext.Utils.Range as Range
import Gargantext.Utils.Reactix as R2
-- data Axis = X | Y -- data Axis = X | Y
type NumberRange = Range.Closed Number type NumberRange = Range.Closed Number
...@@ -51,7 +53,8 @@ rangeSliderCpt :: R.Component Props ...@@ -51,7 +53,8 @@ rangeSliderCpt :: R.Component Props
rangeSliderCpt = R.hooksComponent "RangeSlider" cpt rangeSliderCpt = R.hooksComponent "RangeSlider" cpt
where where
cpt props _ = do cpt props _ = do
R.useEffect' $ \_ -> log2 "Props: " props R.useEffect' $ do
liftEffect $ log2 "Props: " props
-- scale bar -- scale bar
scaleElem <- R.useRef null -- dom ref scaleElem <- R.useRef null -- dom ref
scalePos <- R2.usePositionRef scaleElem scalePos <- R2.usePositionRef scaleElem
...@@ -62,11 +65,11 @@ rangeSliderCpt = R.hooksComponent "RangeSlider" cpt ...@@ -62,11 +65,11 @@ rangeSliderCpt = R.hooksComponent "RangeSlider" cpt
highElem <- R.useRef null -- a dom ref to the high knob highElem <- R.useRef null -- a dom ref to the high knob
highPos <- R2.usePositionRef highElem highPos <- R2.usePositionRef highElem
-- The value of the user's selection -- The value of the user's selection
value /\ setValue <- R.useState $ \_ -> pure $ initialValue props value /\ setValue <- R.useState' $ initialValue props
let Range.Closed value' = value let Range.Closed value' = value
-- the knob we are currently in a drag for. set by mousedown on a knob -- the knob we are currently in a drag for. set by mousedown on a knob
dragKnob /\ setDragKnob <- R.useState $ \_ -> pure Nothing dragKnob /\ setDragKnob <- R.useState' $ (Nothing :: Maybe Knob)
-- the bounding box within which the mouse can drag -- the bounding box within which the mouse can drag
dragScale <- R.useRef $ Nothing dragScale <- R.useRef $ Nothing
-- the handler functions for trapping mouse events, so they can be removed -- the handler functions for trapping mouse events, so they can be removed
...@@ -79,12 +82,12 @@ rangeSliderCpt = R.hooksComponent "RangeSlider" cpt ...@@ -79,12 +82,12 @@ rangeSliderCpt = R.hooksComponent "RangeSlider" cpt
R2.useLayoutEffect1' dragKnob $ \_ -> do R2.useLayoutEffect1' dragKnob $ \_ -> do
case dragKnob of case dragKnob of
Just knob -> do Just knob -> do
let drag = getDragScale knob scalePos lowPos highPos let drag = (getDragScale knob scalePos lowPos highPos) :: Maybe NumberRange
R.setRef dragScale drag R.setRef dragScale drag
let onMouseMove = EL.callback $ \(event :: Event.MouseEvent) -> let onMouseMove = EL.callback $ \(event :: Event.MouseEvent) ->
case reproject drag scalePos value (R2.domMousePosition event) of case reproject drag scalePos value (R2.domMousePosition event) of
Just val -> setKnob knob setValue value val Just val -> setKnob knob setValue value val
Nothing -> destroy unit Nothing -> destroy unit
let onMouseUp = EL.callback $ \(_event :: Event.MouseEvent) -> destroy unit let onMouseUp = EL.callback $ \(_event :: Event.MouseEvent) -> destroy unit
log "RangeSlider: Creating event handlers" log "RangeSlider: Creating event handlers"
EL.addEventListener document "mousemove" onMouseMove EL.addEventListener document "mousemove" onMouseMove
...@@ -108,13 +111,13 @@ destroyEventHandler name ref = traverse_ destroy $ R.readRef ref ...@@ -108,13 +111,13 @@ destroyEventHandler name ref = traverse_ destroy $ R.readRef ref
EL.removeEventListener document name handler EL.removeEventListener document name handler
R.setRef ref Nothing R.setRef ref Nothing
setKnob :: Knob -> (Range.Closed Number -> Effect Unit) -> Range.Closed Number -> Number -> Effect Unit setKnob :: Knob -> ((NumberRange -> NumberRange) -> Effect Unit) -> NumberRange -> Number -> Effect Unit
setKnob knob setValue r val = setValue $ setter knob r val setKnob knob setValue r val = setValue $ const $ setter knob r val
where where
setter MinKnob = Range.withMin setter MinKnob = Range.withMin
setter MaxKnob = Range.withMax setter MaxKnob = Range.withMax
getDragScale :: Knob -> R.Ref (Maybe DOMRect) -> R.Ref (Maybe DOMRect) -> R.Ref (Maybe DOMRect) -> Maybe (Range.Closed Number) getDragScale :: Knob -> R.Ref (Maybe DOMRect) -> R.Ref (Maybe DOMRect) -> R.Ref (Maybe DOMRect) -> Maybe NumberRange
getDragScale knob scalePos lowPos highPos = do getDragScale knob scalePos lowPos highPos = do
scale <- R.readRef scalePos scale <- R.readRef scalePos
low <- R.readRef lowPos low <- R.readRef lowPos
...@@ -138,17 +141,17 @@ renderKnob ref val label knob set = ...@@ -138,17 +141,17 @@ renderKnob ref val label knob set =
tabIndex = 0 tabIndex = 0
className = "knob" className = "knob"
aria = { label } aria = { label }
onMouseDown = mkEffectFn1 $ \_ -> set (Just knob) onMouseDown = mkEffectFn1 $ \_ -> set $ const $ Just knob
-- todo round to nearest epsilon -- todo round to nearest epsilon
reproject :: Maybe (Range.Closed Number) -> R.Ref (Maybe DOMRect) -> Range.Closed Number -> R2.Point -> Maybe Number reproject :: Maybe NumberRange -> R.Ref (Maybe DOMRect) -> NumberRange -> R2.Point -> Maybe Number
reproject drag scale value (R2.Point mousePos) = do reproject drag scale value (R2.Point mousePos) = do
drag_ <- drag drag_ <- drag
scale_ <- rectRange <$> R.readRef scale scale_ <- rectRange <$> R.readRef scale
let normal = Range.normalise scale_ (Range.clamp drag_ mousePos.x) let normal = Range.normalise scale_ (Range.clamp drag_ mousePos.x)
pure $ Range.projectNormal value normal pure $ Range.projectNormal value normal
rectRange :: DOMRect -> Range.Closed Number rectRange :: DOMRect -> NumberRange
rectRange rect = Range.Closed { min, max } rectRange rect = Range.Closed { min, max }
where min = rect.left where min = rect.left
max = rect.right max = rect.right
......
...@@ -79,7 +79,7 @@ loadedAnnuaireSpec :: Spec {} Props Void ...@@ -79,7 +79,7 @@ loadedAnnuaireSpec :: Spec {} Props Void
loadedAnnuaireSpec = simpleSpec defaultPerformAction render loadedAnnuaireSpec = simpleSpec defaultPerformAction render
where where
render :: Render {} Props Void render :: Render {} Props Void
render _ {path: nodeId, loaded: annuaireInfo@AnnuaireInfo {name, date}} _ _ = render _ {path: nodeId, loaded: annuaireInfo@(AnnuaireInfo {name, date})} _ _ =
T.renderTableHeaderLayout T.renderTableHeaderLayout
{ title: name { title: name
, desc: name , desc: name
......
...@@ -22,6 +22,17 @@ import Data.Traversable (for_) ...@@ -22,6 +22,17 @@ import Data.Traversable (for_)
import Effect (Effect) import Effect (Effect)
import Effect.Aff (Aff) import Effect.Aff (Aff)
import Effect.Class (liftEffect) import Effect.Class (liftEffect)
import Partial.Unsafe (unsafePartial)
import React (ReactElement)
import React.DOM (button, div, input, li, li', menu, p, span, text, ul')
import React.DOM.Props (_id, _type, className, defaultValue, max, min, onChange, onClick, style, onMouseMove)
import React.SyntheticEvent (SyntheticUIEvent, target)
import Thermite (PerformAction, Render, Spec, _render, cmapProps, defaultPerformAction, defaultRender, modifyState, modifyState_, noState, simpleSpec, withState)
import Unsafe.Coerce (unsafeCoerce)
import Web.HTML (window)
import Web.HTML.Window (localStorage)
import Web.Storage.Storage (getItem)
import Gargantext.Hooks.Sigmax.Types as Sigmax import Gargantext.Hooks.Sigmax.Types as Sigmax
import Gargantext.Hooks.Sigmax.Sigmajs (CameraProps, SigmaNode, cameras, getCameraProps, goTo, pauseForceAtlas2, sigmaOnMouseMove) import Gargantext.Hooks.Sigmax.Sigmajs (CameraProps, SigmaNode, cameras, getCameraProps, goTo, pauseForceAtlas2, sigmaOnMouseMove)
import Gargantext.Components.GraphExplorer.Types (Cluster(..), MetaData(..), Edge(..), GraphData(..), Legend(..), Node(..), getLegendData, intColor) import Gargantext.Components.GraphExplorer.Types (Cluster(..), MetaData(..), Edge(..), GraphData(..), Legend(..), Node(..), getLegendData, intColor)
...@@ -35,17 +46,8 @@ import Gargantext.Config.REST (get) ...@@ -35,17 +46,8 @@ import Gargantext.Config.REST (get)
import Gargantext.Pages.Corpus.Graph.Tabs as GT import Gargantext.Pages.Corpus.Graph.Tabs as GT
import Gargantext.Types (class Optional) import Gargantext.Types (class Optional)
import Gargantext.Utils (toggleSet) import Gargantext.Utils (toggleSet)
import Gargantext.Utils.Range as Range
import Gargantext.Utils.Reactix (scuff) import Gargantext.Utils.Reactix (scuff)
import Partial.Unsafe (unsafePartial)
import React (ReactElement)
import React.DOM (button, div, input, li, li', menu, p, span, text, ul')
import React.DOM.Props (_id, _type, className, defaultValue, max, min, onChange, onClick, style, onMouseMove)
import React.SyntheticEvent (SyntheticUIEvent, target)
import Thermite (PerformAction, Render, Spec, _render, cmapProps, defaultPerformAction, defaultRender, modifyState, modifyState_, noState, simpleSpec, withState)
import Unsafe.Coerce (unsafeCoerce)
import Web.HTML (window)
import Web.HTML.Window (localStorage)
import Web.Storage.Storage (getItem)
data Action data Action
= LoadGraph Int = LoadGraph Int
...@@ -57,6 +59,17 @@ data Action ...@@ -57,6 +59,17 @@ data Action
newtype SelectedNode = SelectedNode {id :: String, label :: String} newtype SelectedNode = SelectedNode {id :: String, label :: String}
type EdgeFilters =
{ confluence :: Range.Closed Number }
defaultEdgeFilters :: EdgeFilters
defaultEdgeFilters = { confluence: Range.closedProbability }
type NodeFilters = {}
defaultNodeFilters :: NodeFilters
defaultNodeFilters = {}
derive instance eqSelectedNode :: Eq SelectedNode derive instance eqSelectedNode :: Eq SelectedNode
derive instance newtypeSelectedNode :: Newtype SelectedNode _ derive instance newtypeSelectedNode :: Newtype SelectedNode _
derive instance ordSelectedNode :: Ord SelectedNode derive instance ordSelectedNode :: Ord SelectedNode
...@@ -111,11 +124,14 @@ derive instance newtypeState :: Newtype State _ ...@@ -111,11 +124,14 @@ derive instance newtypeState :: Newtype State _
emptyGraphData :: GraphData emptyGraphData :: GraphData
emptyGraphData = GraphData { nodes: [], edges: [], sides: [], metaData } emptyGraphData = GraphData { nodes: [], edges: [], sides: [], metaData }
where metaData = Just $ MetaData { title : "", legend : [], corpusId : [] } where metaData = Just $ MetaData { title : "", legend : [], corpusId : [], listId: 0 }
initialState :: State initialState :: State
initialState = State initialState = State
{ graphData : GraphData {nodes: [], edges: [], sides: [], metaData : Just $ MetaData{title : "", legend : [], corpusId : [], listId : 0}} { graphData : GraphData {nodes: [], edges: [], sides: [], metaData : Just $ MetaData{title : "", legend : [], corpusId : [], listId : 0}}
, rawGraphData : emptyGraphData
, edgeFilters: defaultEdgeFilters
, nodeFilters: defaultNodeFilters
, filePath : "" , filePath : ""
, sigmaGraphData : Nothing , sigmaGraphData : Nothing
, legendData : [] , legendData : []
...@@ -231,7 +247,6 @@ render d p (State {sigmaGraphData, settings, legendData}) c = ...@@ -231,7 +247,6 @@ render d p (State {sigmaGraphData, settings, legendData}) c =
-- [dispLegend legendData] -- [dispLegend legendData]
--} --}
=======
......
...@@ -12,6 +12,7 @@ import DOM.Simple.Element as Element ...@@ -12,6 +12,7 @@ import DOM.Simple.Element as Element
import DOM.Simple.Event as DE import DOM.Simple.Event as DE
import DOM.Simple as DOM import DOM.Simple as DOM
import Effect (Effect) import Effect (Effect)
import Effect.Class (liftEffect)
import Effect.Uncurried (EffectFn1, mkEffectFn1) import Effect.Uncurried (EffectFn1, mkEffectFn1)
import FFI.Simple ((...), defineProperty) import FFI.Simple ((...), defineProperty)
import React (ReactClass, ReactElement, Children, class IsReactElement, class ReactPropFields) import React (ReactClass, ReactElement, Children, class IsReactElement, class ReactPropFields)
...@@ -22,6 +23,7 @@ import Reactix.React (createDOMElement) ...@@ -22,6 +23,7 @@ import Reactix.React (createDOMElement)
import Reactix.SyntheticEvent as RE import Reactix.SyntheticEvent as RE
import Thermite (Spec, simpleSpec, Render, defaultPerformAction) import Thermite (Spec, simpleSpec, Render, defaultPerformAction)
import Unsafe.Coerce (unsafeCoerce) import Unsafe.Coerce (unsafeCoerce)
newtype Point = Point { x :: Number, y :: Number } newtype Point = Point { x :: Number, y :: Number }
-- | Turns a ReactElement into aReactix Element -- | Turns a ReactElement into aReactix Element
...@@ -107,9 +109,9 @@ nothingRef :: forall t. R.Hooks (R.Ref (Maybe t)) ...@@ -107,9 +109,9 @@ nothingRef :: forall t. R.Hooks (R.Ref (Maybe t))
nothingRef = R.useRef Nothing nothingRef = R.useRef Nothing
useLayoutEffect1' :: forall a. a -> (Unit -> Effect Unit) -> R.Hooks Unit useLayoutEffect1' :: forall a. a -> (Unit -> Effect Unit) -> R.Hooks Unit
useLayoutEffect1' a f = R.useLayoutEffect1 a $ \_ -> useLayoutEffect1' a f = R.useLayoutEffect1 a $ do
do f unit liftEffect $ f unit
pure $ \_ -> pure unit pure $ pure unit
useLayoutRef :: forall a b. (a -> b) -> b -> R.Ref a -> R.Hooks (R.Ref b) useLayoutRef :: forall a b. (a -> b) -> b -> R.Ref a -> R.Hooks (R.Ref b)
useLayoutRef fn init ref = do useLayoutRef fn init ref = do
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment