ToggleButton.purs 4.69 KB
Newer Older
James Laver's avatar
James Laver committed
1
module Gargantext.Components.GraphExplorer.ToggleButton
2 3 4
  ( Props
  , toggleButton
  , toggleButtonCpt
James Laver's avatar
James Laver committed
5 6
  , controlsToggleButton
  , edgesToggleButton
7 8
  , louvainToggleButton
  , multiSelectEnabledButton
9
  , sidebarToggleButton
10
  , pauseForceAtlasButton
11
  , treeToggleButton
James Laver's avatar
James Laver committed
12 13
  ) where

14
import Prelude
15

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

22
import Gargantext.Components.GraphExplorer.Types as GET
23
import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
24 25 26
import Gargantext.Utils.Reactix as R2

thisModule = "Gargantext.Components.GraphExplorer.ToggleButton"
27 28 29 30 31

type Props = (
    state :: R.State Boolean
  , onMessage :: String
  , offMessage :: String
32
  , onClick :: forall e. e -> Effect Unit
33
  )
James Laver's avatar
James Laver committed
34 35 36

toggleButton :: Record Props -> R.Element
toggleButton props = R.createElement toggleButtonCpt props []
37

James Laver's avatar
James Laver committed
38
toggleButtonCpt :: R.Component Props
39
toggleButtonCpt = R.hooksComponentWithModule thisModule "toggleButton" cpt
James Laver's avatar
James Laver committed
40
  where
41 42
    cpt {state, onMessage, offMessage, onClick} _ = do
      let (toggled /\ _) = state
James Laver's avatar
James Laver committed
43
      pure $
44 45 46
        H.span {}
          [
            H.button
47
              { className: "btn btn-primary", on: {click: onClick} }
48 49
              [ H.text (text onMessage offMessage toggled) ]
          ]
James Laver's avatar
James Laver committed
50 51 52 53 54
    text on _off true = on
    text _on off false = off

controlsToggleButton :: R.State Boolean -> R.Element
controlsToggleButton state =
55 56 57 58
  toggleButton {
      state: state
    , onMessage: "Hide Controls"
    , offMessage: "Show Controls"
59
    , onClick: \_ -> snd state not
60
    }
James Laver's avatar
James Laver committed
61

62 63 64 65 66 67 68 69
type EdgesButtonProps = (
  state :: R.State SigmaxTypes.ShowEdgesState
)

edgesToggleButton :: Record EdgesButtonProps -> R.Element
edgesToggleButton props = R.createElement edgesToggleButtonCpt props []

edgesToggleButtonCpt :: R.Component EdgesButtonProps
70
edgesToggleButtonCpt = R.hooksComponentWithModule thisModule "edgesToggleButton" cpt
71 72 73 74 75 76 77 78 79 80 81 82 83
  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
84

85 86 87 88
louvainToggleButton :: R.State Boolean -> R.Element
louvainToggleButton state =
  toggleButton {
      state: state
89 90
    , onMessage: "Louvain off"
    , offMessage: "Louvain on"
91 92 93
    , onClick: \_ -> snd state not
    }

94 95 96 97 98 99 100 101 102
multiSelectEnabledButton :: R.State Boolean -> R.Element
multiSelectEnabledButton state =
  toggleButton {
      state: state
    , onMessage: "Single-node"
    , offMessage: "Multi-node"
    , onClick: \_ -> snd state not
    }

103 104 105 106 107 108 109 110
type ForceAtlasProps = (
  state :: R.State SigmaxTypes.ForceAtlasState
)

pauseForceAtlasButton :: Record ForceAtlasProps -> R.Element
pauseForceAtlasButton props = R.createElement pauseForceAtlasButtonCpt props []

pauseForceAtlasButtonCpt :: R.Component ForceAtlasProps
111
pauseForceAtlasButtonCpt = R.hooksComponentWithModule thisModule "forceAtlasToggleButton" cpt
112 113 114 115 116 117 118 119 120 121
  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"
122
    text SigmaxTypes.InitialStopped = "Start Force Atlas"
123 124 125 126
    text SigmaxTypes.Running = "Pause Force Atlas"
    text SigmaxTypes.Paused = "Start Force Atlas"

    onClick setState _ = setState SigmaxTypes.toggleForceAtlasState
James Laver's avatar
James Laver committed
127

128 129
treeToggleButton :: R.State Boolean -> R.Element
treeToggleButton state =
130 131 132 133
  toggleButton {
      state: state
    , onMessage: "Hide Tree"
    , offMessage: "Show Tree"
134
    , onClick: \_ -> snd state not
135
    }
136

137 138 139
sidebarToggleButton :: R.State GET.SidePanelState -> R.Element
sidebarToggleButton (state /\ setState) = R.createElement el {} []
  where
140
    el = R.hooksComponentWithModule thisModule "sidebarToggleButton" cpt
141 142 143 144 145 146 147 148 149 150
    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"
151
    text on _off (GET.Opened _)    = on
152
    text _on off GET.InitialClosed = off
153
    text _on off GET.Closed        = off
154 155 156

    onClick = \_ -> do
      setState $ \s -> case s of
157 158
        GET.InitialClosed -> GET.Opened GET.SideTabLegend
        GET.Closed        -> GET.Opened GET.SideTabLegend
159
        (GET.Opened _)    -> GET.Closed