Commit 7cda9bfa authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[Graph] some more controls added

parent b30ab918
...@@ -21,7 +21,7 @@ import Reactix as R ...@@ -21,7 +21,7 @@ import Reactix as R
import Reactix.DOM.HTML as RH import Reactix.DOM.HTML as RH
import Gargantext.Components.Graph as Graph import Gargantext.Components.Graph as Graph
import Gargantext.Components.GraphExplorer.SlideButton (labelSizeButton, nodeSizeButton) import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton, nodeSizeButton)
import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton) import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton)
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
...@@ -38,10 +38,13 @@ type Controls = ...@@ -38,10 +38,13 @@ type Controls =
) )
controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings
controlsToSigmaSettings { labelSize: (labelSize /\ _) controlsToSigmaSettings { cursorSize: (cursorSize /\ _)
, labelSize: (labelSize /\ _)
, nodeSize: (nodeSize /\ _) , nodeSize: (nodeSize /\ _)
, showEdges: (showEdges /\ _)} = Graph.sigmaSettings { , showEdges: (showEdges /\ _)} = Graph.sigmaSettings {
drawEdges = showEdges drawEdges = showEdges
, drawEdgeLabels = showEdges
, hideEdgesOnMove = not showEdges
, labelMaxSize = labelSize , labelMaxSize = labelSize
, maxEdgeSize = if showEdges then 1.0 else 0.0 , maxEdgeSize = if showEdges then 1.0 else 0.0
, maxNodeSize = nodeSize , maxNodeSize = nodeSize
...@@ -69,7 +72,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt ...@@ -69,7 +72,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
-- run demo -- run demo
-- search button -- search button
-- search topics -- search topics
-- cursor size: 0-100 , RH.li {} [ cursorSizeButton props.cursorSize ] -- cursor size: 0-100
, RH.li {} [ labelSizeButton props.labelSize ] -- labels size: 1-4 , RH.li {} [ labelSizeButton props.labelSize ] -- labels size: 1-4
, RH.li {} [ nodeSizeButton props.nodeSize ] -- node size : 5-15 , RH.li {} [ nodeSizeButton props.nodeSize ] -- node size : 5-15
-- edge size : ?? -- edge size : ??
......
module Gargantext.Components.GraphExplorer.SlideButton module Gargantext.Components.GraphExplorer.SlideButton
( Props ( Props
, sizeButton , sizeButton
, cursorSizeButton
, labelSizeButton , labelSizeButton
, nodeSizeButton , nodeSizeButton
) where ) where
...@@ -35,6 +36,10 @@ sizeButtonCpt = R.hooksComponent "SizeButton" cpt ...@@ -35,6 +36,10 @@ sizeButtonCpt = R.hooksComponent "SizeButton" cpt
} }
] ]
cursorSizeButton :: R.State Number -> R.Element
cursorSizeButton state =
sizeButton { state: state, caption: "Cursor Size", min: 1.0, max: 4.0 }
labelSizeButton :: R.State Number -> R.Element labelSizeButton :: R.State Number -> R.Element
labelSizeButton state = labelSizeButton state =
sizeButton { state: state, caption: "Label Size", min: 1.0, max: 4.0 } sizeButton { state: state, caption: "Label Size", min: 1.0, max: 4.0 }
......
module Gargantext.Components.GraphExplorer.ToggleButton module Gargantext.Components.GraphExplorer.ToggleButton
( Props, toggleButton, toggleButtonCpt ( Props, toggleButton, toggleButtonCpt
, treeToggleButton
, controlsToggleButton , controlsToggleButton
, sidebarToggleButton
, edgesToggleButton , edgesToggleButton
, sidebarToggleButton
, treeToggleButton
) where ) where
import Prelude import Prelude
...@@ -31,19 +31,18 @@ toggleButtonCpt = R.hooksComponent "ToggleButton" cpt ...@@ -31,19 +31,18 @@ toggleButtonCpt = R.hooksComponent "ToggleButton" cpt
text on _off true = on text on _off true = on
text _on off false = off text _on off false = off
treeToggleButton :: R.State Boolean -> R.Element
treeToggleButton state =
toggleButton { state: state, onMessage: "Hide Tree", offMessage: "Show Tree" }
controlsToggleButton :: R.State Boolean -> R.Element controlsToggleButton :: R.State Boolean -> R.Element
controlsToggleButton state = controlsToggleButton state =
toggleButton { state: state, onMessage: "Hide Controls", offMessage: "Show Controls" } toggleButton { state: state, onMessage: "Hide Controls", offMessage: "Show Controls" }
sidebarToggleButton :: R.State Boolean -> R.Element
sidebarToggleButton state =
toggleButton { state: state, onMessage: "Hide Sidebar", offMessage: "Show Sidebar" }
edgesToggleButton :: R.State Boolean -> R.Element edgesToggleButton :: R.State Boolean -> R.Element
edgesToggleButton state = edgesToggleButton state =
toggleButton { state: state, onMessage: "Hide Edges", offMessage: "Show Edges" } toggleButton { state: state, onMessage: "Hide Edges", offMessage: "Show Edges" }
treeToggleButton :: R.State Boolean -> R.Element
treeToggleButton state =
toggleButton { state: state, onMessage: "Hide Tree", offMessage: "Show Tree" }
sidebarToggleButton :: R.State Boolean -> R.Element
sidebarToggleButton state =
toggleButton { state: state, onMessage: "Hide Sidebar", offMessage: "Show Sidebar" }
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