1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
module Gargantext.Components.GraphExplorer.ToggleButton
( Props
, toggleButton
, toggleButtonCpt
, controlsToggleButton
, edgesToggleButton
, louvainToggleButton
, multiSelectEnabledButton
, sidebarToggleButton
, pauseForceAtlasButton
, treeToggleButton
) where
import Prelude
import Data.Tuple (snd)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Reactix as R
import Reactix.DOM.HTML as H
import Gargantext.Components.GraphExplorer.Types as GET
import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
type Props = (
state :: R.State Boolean
, onMessage :: String
, offMessage :: String
, onClick :: forall e. e -> Effect Unit
)
toggleButton :: Record Props -> R.Element
toggleButton props = R.createElement toggleButtonCpt props []
toggleButtonCpt :: R.Component Props
toggleButtonCpt = R.hooksComponent "ToggleButton" cpt
where
cpt {state, onMessage, offMessage, onClick} _ = do
let (toggled /\ _) = state
pure $
H.span {}
[
H.button
{ className: "btn btn-primary", on: {click: onClick} }
[ H.text (text onMessage offMessage toggled) ]
]
text on _off true = on
text _on off false = off
controlsToggleButton :: R.State Boolean -> R.Element
controlsToggleButton state =
toggleButton {
state: state
, onMessage: "Hide Controls"
, offMessage: "Show Controls"
, onClick: \_ -> snd state not
}
type EdgesButtonProps = (
state :: R.State SigmaxTypes.ShowEdgesState
)
edgesToggleButton :: Record EdgesButtonProps -> R.Element
edgesToggleButton props = R.createElement edgesToggleButtonCpt props []
edgesToggleButtonCpt :: R.Component EdgesButtonProps
edgesToggleButtonCpt = R.hooksComponent "EdgesToggleButton" cpt
where
cpt {state: (state /\ setState)} _ = do
pure $
H.span {}
[
H.button
{ className: "btn btn-primary", on: {click: onClick setState} }
[ H.text (text state) ]
]
text s = if SigmaxTypes.edgeStateHidden s then "Show edges" else "Hide edges"
-- TODO: Move this to Graph.purs to the R.useEffect handler which renders nodes/edges
onClick setState _ = setState SigmaxTypes.toggleShowEdgesState
louvainToggleButton :: R.State Boolean -> R.Element
louvainToggleButton state =
toggleButton {
state: state
, onMessage: "Louvain off"
, offMessage: "Louvain on"
, onClick: \_ -> snd state not
}
multiSelectEnabledButton :: R.State Boolean -> R.Element
multiSelectEnabledButton state =
toggleButton {
state: state
, onMessage: "Single-node"
, offMessage: "Multi-node"
, onClick: \_ -> snd state not
}
type ForceAtlasProps = (
state :: R.State SigmaxTypes.ForceAtlasState
)
pauseForceAtlasButton :: Record ForceAtlasProps -> R.Element
pauseForceAtlasButton props = R.createElement pauseForceAtlasButtonCpt props []
pauseForceAtlasButtonCpt :: R.Component ForceAtlasProps
pauseForceAtlasButtonCpt = R.hooksComponent "ForceAtlasToggleButton" cpt
where
cpt {state: (state /\ setState)} _ = do
pure $
H.span {}
[
H.button
{ className: "btn btn-primary", on: {click: onClick setState} }
[ H.text (text state) ]
]
text SigmaxTypes.InitialRunning = "Pause Force Atlas"
text SigmaxTypes.Running = "Pause Force Atlas"
text SigmaxTypes.Paused = "Start Force Atlas"
onClick setState _ = setState SigmaxTypes.toggleForceAtlasState
treeToggleButton :: R.State Boolean -> R.Element
treeToggleButton state =
toggleButton {
state: state
, onMessage: "Hide Tree"
, offMessage: "Show Tree"
, onClick: \_ -> snd state not
}
sidebarToggleButton :: R.State GET.SidePanelState -> R.Element
sidebarToggleButton (state /\ setState) = R.createElement el {} []
where
el = R.hooksComponent "SidebarToggleButton" cpt
cpt {} _ = do
pure $
H.span {}
[
H.button
{ className: "btn btn-primary", on: {click: onClick} }
[ H.text (text onMessage offMessage state) ]
]
onMessage = "Hide Sidebar"
offMessage = "Show Sidebar"
text on _off GET.Opened = on
text _on off GET.InitialClosed = off
text _on off GET.Closed = off
onClick = \_ -> do
setState $ \s -> case s of
GET.InitialClosed -> GET.Opened
GET.Closed -> GET.Opened
GET.Opened -> GET.Closed