Controls.purs 5.27 KB
Newer Older
James Laver's avatar
James Laver committed
1
module Gargantext.Components.GraphExplorer.Controls
2 3 4 5 6
 ( Controls
 , controlsToSigmaSettings
 , useGraphControls
 , controls
 , controlsCpt
James Laver's avatar
James Laver committed
7 8 9 10 11 12 13 14 15 16
 , getShowTree, setShowTree
 , getShowControls, setShowControls
 , getShowSidePanel, setShowSidePanel
 , getShowEdges, setShowEdges
 , getCursorSize, setCursorSize
 , getLabelSize, setLabelSize
 , getNodeSize, setNodeSize
 , getMultiNodeSelect, setMultiNodeSelect
 ) where

17 18 19
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Prelude
James Laver's avatar
James Laver committed
20 21 22
import Reactix as R
import Reactix.DOM.HTML as RH

23
import Gargantext.Components.Graph as Graph
24 25
import Gargantext.Components.GraphExplorer.RangeControl (nodeSizeControl)
import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton)
26
import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton)
27
import Gargantext.Utils.Range as Range
28 29
import Gargantext.Utils.Reactix as R2

James Laver's avatar
James Laver committed
30 31

type Controls =
32
  ( cursorSize :: R.State Number
James Laver's avatar
James Laver committed
33
  , labelSize :: R.State Number
34
  , nodeSize :: R.State Range.NumberRange
James Laver's avatar
James Laver committed
35
  , multiNodeSelect :: R.Ref Boolean
36 37 38 39
  , showControls :: R.State Boolean
  , showEdges :: R.State Boolean
  , showSidePanel :: R.State Boolean
  , showTree :: R.State Boolean
James Laver's avatar
James Laver committed
40 41
  )

42
controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings
43 44
controlsToSigmaSettings { cursorSize: (cursorSize /\ _)
                        , labelSize: (labelSize /\ _)
45
                        , nodeSize: (Range.Closed { min: nodeSizeMin, max: nodeSizeMax } /\ _)
46 47
                        , showEdges: (showEdges /\ _)} = Graph.sigmaSettings {
    drawEdges = showEdges
48 49
  , drawEdgeLabels = showEdges
  , hideEdgesOnMove = not showEdges
50 51 52
  , labelMaxSize = labelSize
  , maxEdgeSize = if showEdges then 1.0 else 0.0
  , minEdgeSize = if showEdges then 1.0 else 0.0
53
  , maxNodeSize = nodeSizeMax
54
  , minNodeSize = nodeSizeMin
55 56
  }

57
controls :: Record Controls -> R.Element
James Laver's avatar
James Laver committed
58 59 60 61 62 63 64 65 66
controls props = R.createElement controlsCpt props []

controlsCpt :: R.Component Controls
controlsCpt = R.hooksComponent "GraphControls" cpt
  where
    cpt props _ =
      case getShowControls props of
        false -> pure $ RH.div {} []
        true -> do
67 68 69 70 71 72 73 74 75 76
          pure $ RH.div { className: "col-md-12", style: { paddingBottom: "10px" } }
            [ R2.menu { id: "toolbar" }
              [ RH.ul {}
                [ -- change type button (?)
                  RH.li {} [ edgesToggleButton props.showEdges ]
                  -- change level
                  -- file upload
                  -- run demo
                  -- search button
                  -- search topics
77
                , RH.li {} [ cursorSizeButton props.cursorSize ] -- cursor size: 0-100
78
                , RH.li {} [ labelSizeButton props.labelSize ] -- labels size: 1-4
79
                , RH.li {} [ nodeSizeControl props.nodeSize ] -- node size : 5-15
80 81 82 83 84 85
                  -- edge size : ??
                  -- zoom: 0 -100 - calculate ratio
                  -- toggle multi node selection
                  -- spatialization (pause ForceAtlas2)
                  -- save button
                ]
James Laver's avatar
James Laver committed
86 87 88 89 90
              ]
            ]

useGraphControls :: R.Hooks (Record Controls)
useGraphControls = do
91 92
  cursorSize <- R.useState' 10.0
  labelSize <- R.useState' 3.0
93
  nodeSize <- R.useState' $ Range.Closed { min: 5.0, max: 10.0 }
94
  multiNodeSelect <- R.useRef false
James Laver's avatar
James Laver committed
95 96
  showControls <- R.useState' false
  showEdges <- R.useState' true
97 98
  showSidePanel <- R.useState' false
  showTree <- R.useState' false
James Laver's avatar
James Laver committed
99
  pure { showTree, showControls, showSidePanel, showEdges, cursorSize, labelSize, nodeSize, multiNodeSelect }
100 101

getShowTree :: Record Controls -> Boolean
James Laver's avatar
James Laver committed
102 103
getShowTree { showTree: ( should /\ _ ) } = should

104
getShowControls :: Record Controls -> Boolean
James Laver's avatar
James Laver committed
105 106
getShowControls { showControls: ( should /\ _ ) } = should

107
getShowSidePanel :: Record Controls -> Boolean
James Laver's avatar
James Laver committed
108 109
getShowSidePanel { showSidePanel: ( should /\ _ ) } = should

110 111
getShowEdges :: Record Controls -> Boolean
getShowEdges { showEdges: ( should /\ _ ) } = should
James Laver's avatar
James Laver committed
112

113
getCursorSize :: Record Controls -> Number
James Laver's avatar
James Laver committed
114 115
getCursorSize { cursorSize: ( size /\ _ ) } = size

116
getLabelSize :: Record Controls -> Number
James Laver's avatar
James Laver committed
117 118
getLabelSize { labelSize: ( size /\ _ ) } = size

119
getNodeSize :: Record Controls -> Range.NumberRange
James Laver's avatar
James Laver committed
120 121
getNodeSize { nodeSize: ( size /\ _ ) } = size

122
getMultiNodeSelect :: Record Controls -> Boolean
James Laver's avatar
James Laver committed
123 124
getMultiNodeSelect { multiNodeSelect } = R.readRef multiNodeSelect

125 126
setShowTree :: Record Controls -> Boolean -> Effect Unit
setShowTree { showTree: ( _ /\ set ) } v = set $ const v
James Laver's avatar
James Laver committed
127

128 129
setShowControls :: Record Controls -> Boolean -> Effect Unit
setShowControls { showControls: ( _ /\ set ) } v = set $ const v
James Laver's avatar
James Laver committed
130

131 132
setShowSidePanel :: Record Controls -> Boolean -> Effect Unit
setShowSidePanel { showSidePanel: ( _ /\ set ) } v = set $ const v
James Laver's avatar
James Laver committed
133

134 135
setShowEdges :: Record Controls -> Boolean -> Effect Unit
setShowEdges { showEdges: ( _ /\ set ) } v = set $ const v
James Laver's avatar
James Laver committed
136

137 138
setCursorSize :: Record Controls -> Number -> Effect Unit
setCursorSize { cursorSize: ( _ /\ setSize ) } v = setSize $ const v
James Laver's avatar
James Laver committed
139

140 141
setLabelSize :: Record Controls -> Number -> Effect Unit
setLabelSize { labelSize: ( _ /\ setSize) } v = setSize $ const v
James Laver's avatar
James Laver committed
142

143
setNodeSize :: Record Controls -> Range.NumberRange -> Effect Unit
144
setNodeSize { nodeSize: ( _ /\ setSize ) } v = setSize $ const v
James Laver's avatar
James Laver committed
145

146
setMultiNodeSelect :: Record Controls -> Boolean -> Effect Unit
James Laver's avatar
James Laver committed
147
setMultiNodeSelect { multiNodeSelect } = R.setRef multiNodeSelect