Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
P
purescript-gargantext
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
142
Issues
142
List
Board
Labels
Milestones
Merge Requests
4
Merge Requests
4
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
gargantext
purescript-gargantext
Commits
4c0bca05
Commit
4c0bca05
authored
5 years ago
by
Przemyslaw Kaminski
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[Graph] use local settings
These don't refersh the whole graph, only change sigma settings.
parent
26de4b9d
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
130 additions
and
105 deletions
+130
-105
Controls.purs
src/Gargantext/Components/GraphExplorer/Controls.purs
+19
-53
RangeControl.purs
src/Gargantext/Components/GraphExplorer/RangeControl.purs
+25
-6
SlideButton.purs
src/Gargantext/Components/GraphExplorer/SlideButton.purs
+39
-7
ToggleButton.purs
src/Gargantext/Components/GraphExplorer/ToggleButton.purs
+40
-39
Sigma.js
src/Gargantext/Hooks/Sigmax/Sigma.js
+2
-0
Sigma.purs
src/Gargantext/Hooks/Sigmax/Sigma.purs
+5
-0
No files found.
src/Gargantext/Components/GraphExplorer/Controls.purs
View file @
4c0bca05
...
...
@@ -7,10 +7,7 @@ module Gargantext.Components.GraphExplorer.Controls
, getShowTree, setShowTree
, getShowControls, setShowControls
, getShowSidePanel, setShowSidePanel
, getShowEdges, setShowEdges
, getCursorSize, setCursorSize
, getLabelSize, setLabelSize
, getNodeSize, setNodeSize
, getMultiNodeSelect, setMultiNodeSelect
) where
...
...
@@ -33,43 +30,38 @@ import Gargantext.Utils.Reactix as R2
type Controls =
( cursorSize :: R.State Number
, edgeSize :: R.State Range.NumberRange
, labelSize :: R.State Number
, nodeSize :: R.State Range.NumberRange
, multiNodeSelect :: R.Ref Boolean
, showControls :: R.State Boolean
, showEdges :: R.State Boolean
, showSidePanel :: R.State Boolean
, showTree :: R.State Boolean
, sigmaRef :: R.Ref (Maybe Sigmax.Sigma)
)
controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings
controlsToSigmaSettings { cursorSize: (cursorSize /\ _)
, edgeSize: (Range.Closed { min: edgeSizeMin, max: edgeSizeMax } /\ _)
, labelSize: (labelSize /\ _)
, nodeSize: (Range.Closed { min: nodeSizeMin, max: nodeSizeMax } /\ _)
, showEdges: (showEdges /\ _)} = Graph.sigmaSettings {
defaultLabelSize = labelSize
, drawEdges = showEdges
, drawEdgeLabels = showEdges
, hideEdgesOnMove = not showEdges
, minEdgeSize = if showEdges then edgeSizeMin else 0.0
, maxEdgeSize = if showEdges then edgeSizeMax else 0.0
, minNodeSize = nodeSizeMin
, maxNodeSize = nodeSizeMax
}
controlsToSigmaSettings { cursorSize: (cursorSize /\ _)} = Graph.sigmaSettings
type LocalControls =
( pauseForceAtlas :: R.State Boolean
( edgeSize :: R.State Range.NumberRange
, labelSize :: R.State Number
, nodeSize :: R.State Range.NumberRange
, pauseForceAtlas :: R.State Boolean
, showEdges :: R.State Boolean
)
initialLocalControls :: R.Hooks (Record LocalControls)
initialLocalControls = do
edgeSize <- R.useState' $ Range.Closed { min: 0.5, max: 1.0 }
labelSize <- R.useState' 3.0
nodeSize <- R.useState' $ Range.Closed { min: 5.0, max: 10.0 }
pauseForceAtlas <- R.useState' true
showEdges <- R.useState' true
pure $ {
pauseForceAtlas
edgeSize
, labelSize
, nodeSize
, pauseForceAtlas
, showEdges
}
controls :: Record Controls -> R.Element
...
...
@@ -88,16 +80,16 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
[ RH.ul {}
[ -- change type button (?)
RH.li {} [ pauseForceAtlasButton props.sigmaRef localControls.pauseForceAtlas ] -- spatialization (pause ForceAtlas2)
, RH.li {} [ edgesToggleButton props.showEdges ]
, RH.li {} [ edgeSizeControl props.edgeSize ] -- edge size : 0-3
, RH.li {} [ edgesToggleButton props.s
igmaRef localControls.s
howEdges ]
, RH.li {} [ edgeSizeControl props.
sigmaRef localControls.
edgeSize ] -- edge size : 0-3
-- change level
-- file upload
-- run demo
-- search button
-- search topics
, RH.li {} [ cursorSizeButton props.cursorSize ] -- cursor size: 0-100
, RH.li {} [ labelSizeButton props.labelSize ] -- labels size: 1-4
, RH.li {} [ nodeSizeControl props.nodeSize ] -- node size : 5-15
, RH.li {} [ labelSizeButton props.
sigmaRef localControls.
labelSize ] -- labels size: 1-4
, RH.li {} [ nodeSizeControl props.
sigmaRef localControls.
nodeSize ] -- node size : 5-15
-- zoom: 0 -100 - calculate ratio
-- toggle multi node selection
-- save button
...
...
@@ -108,24 +100,16 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
useGraphControls :: R.Hooks (Record Controls)
useGraphControls = do
cursorSize <- R.useState' 10.0
edgeSize <- R.useState' $ Range.Closed { min: 0.5, max: 1.0 }
labelSize <- R.useState' 3.0
nodeSize <- R.useState' $ Range.Closed { min: 5.0, max: 10.0 }
multiNodeSelect <- R.useRef false
showControls <- R.useState' false
showEdges <- R.useState' true
showSidePanel <- R.useState' false
showTree <- R.useState' false
sigmaRef <- R.useRef Nothing
pure {
cursorSize
, edgeSize
, labelSize
, multiNodeSelect
, nodeSize
, showControls
, showEdges
, showSidePanel
, showTree
, sigmaRef
...
...
@@ -140,18 +124,9 @@ getShowSidePanel { showSidePanel: ( should /\ _ ) } = should
getShowTree :: Record Controls -> Boolean
getShowTree { showTree: ( should /\ _ ) } = should
getShowEdges :: Record Controls -> Boolean
getShowEdges { showEdges: ( should /\ _ ) } = should
getCursorSize :: Record Controls -> Number
getCursorSize { cursorSize: ( size /\ _ ) } = size
getLabelSize :: Record Controls -> Number
getLabelSize { labelSize: ( size /\ _ ) } = size
getNodeSize :: Record Controls -> Range.NumberRange
getNodeSize { nodeSize: ( size /\ _ ) } = size
getMultiNodeSelect :: Record Controls -> Boolean
getMultiNodeSelect { multiNodeSelect } = R.readRef multiNodeSelect
...
...
@@ -164,17 +139,8 @@ setShowSidePanel { showSidePanel: ( _ /\ set ) } v = set $ const v
setShowTree :: Record Controls -> Boolean -> Effect Unit
setShowTree { showTree: ( _ /\ set ) } v = set $ const v
setShowEdges :: Record Controls -> Boolean -> Effect Unit
setShowEdges { showEdges: ( _ /\ set ) } v = set $ const v
setCursorSize :: Record Controls -> Number -> Effect Unit
setCursorSize { cursorSize: ( _ /\ setSize ) } v = setSize $ const v
setLabelSize :: Record Controls -> Number -> Effect Unit
setLabelSize { labelSize: ( _ /\ setSize) } v = setSize $ const v
setNodeSize :: Record Controls -> Range.NumberRange -> Effect Unit
setNodeSize { nodeSize: ( _ /\ setSize ) } v = setSize $ const v
setMultiNodeSelect :: Record Controls -> Boolean -> Effect Unit
setMultiNodeSelect { multiNodeSelect } = R.setRef multiNodeSelect
This diff is collapsed.
Click to expand it.
src/Gargantext/Components/GraphExplorer/RangeControl.purs
View file @
4c0bca05
...
...
@@ -6,11 +6,14 @@ module Gargantext.Components.GraphExplorer.RangeControl
) where
import Prelude
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H
import Gargantext.Components.RangeSlider as RS
import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax.Sigma as Sigma
import Gargantext.Utils.Range as Range
type Props = (
...
...
@@ -31,8 +34,8 @@ rangeControlCpt = R.hooksComponent "RangeButton" cpt
, RS.rangeSlider sliderProps
]
edgeSizeControl :: R.State Range.NumberRange -> R.Element
edgeSizeControl (state /\ setState) =
edgeSizeControl :: R.
Ref (Maybe Sigmax.Sigma) -> R.
State Range.NumberRange -> R.Element
edgeSizeControl
sigmaRef
(state /\ setState) =
rangeControl {
caption: "Edge Size"
, sliderProps: {
...
...
@@ -42,12 +45,20 @@ edgeSizeControl (state /\ setState) =
, step: 1.0
, width: 10.0
, height: 5.0
, onChange: setState <<< const
, onChange: \range@(Range.Closed {min, max}) -> do
let mSigma = Sigmax.readSigma <$> R.readRef sigmaRef
case mSigma of
Just (Just s) -> Sigma.setSettings s {
minEdgeSize: min
, maxEdgeSize: max
}
_ -> pure unit
setState $ const range
}
}
nodeSizeControl :: R.State Range.NumberRange -> R.Element
nodeSizeControl (state /\ setState) =
nodeSizeControl :: R.
Ref (Maybe Sigmax.Sigma) -> R.
State Range.NumberRange -> R.Element
nodeSizeControl
sigmaRef
(state /\ setState) =
rangeControl {
caption: "Node Size"
, sliderProps: {
...
...
@@ -57,6 +68,14 @@ nodeSizeControl (state /\ setState) =
, step: 1.0
, width: 10.0
, height: 5.0
, onChange: setState <<< const
, onChange: \range@(Range.Closed {min, max}) -> do
let mSigma = Sigmax.readSigma <$> R.readRef sigmaRef
case mSigma of
Just (Just s) -> Sigma.setSettings s {
minNodeSize: min
, maxNodeSize: max
}
_ -> pure unit
setState $ const range
}
}
This diff is collapsed.
Click to expand it.
src/Gargantext/Components/GraphExplorer/SlideButton.purs
View file @
4c0bca05
...
...
@@ -7,13 +7,24 @@ module Gargantext.Components.GraphExplorer.SlideButton
import Global (readFloat)
import Prelude
import Data.Maybe (Maybe(..))
import Data.Tuple (snd)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Reactix as R
import Reactix.DOM.HTML as H
import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax.Sigma as Sigma
import Gargantext.Utils.Reactix as R2
type Props = ( state :: R.State Number, caption :: String, min :: Number, max :: Number )
type Props = (
state :: R.State Number
, caption :: String
, min :: Number
, max :: Number
, onChange :: forall e. e -> Effect Unit
)
sizeButton :: Record Props -> R.Element
sizeButton props = R.createElement sizeButtonCpt props []
...
...
@@ -21,7 +32,7 @@ sizeButton props = R.createElement sizeButtonCpt props []
sizeButtonCpt :: R.Component Props
sizeButtonCpt = R.hooksComponent "SizeButton" cpt
where
cpt {state, caption, min, max} _ = do
cpt {state, caption, min, max
, onChange
} _ = do
let (value /\ setValue) = state
pure $
H.span {}
...
...
@@ -31,14 +42,35 @@ sizeButtonCpt = R.hooksComponent "SizeButton" cpt
, min: show min
, max: show max
, defaultValue: value
, on: {input:
\e -> setValue $ const $ readFloat $ R2.unsafeEventValue e
}
, on: {input:
onChange
}
}
]
cursorSizeButton :: R.State Number -> R.Element
cursorSizeButton state =
sizeButton { state: state, caption: "Cursor Size", min: 1.0, max: 4.0 }
sizeButton {
state: state
, caption: "Cursor Size"
, min: 1.0
, max: 4.0
, onChange: \e -> snd state $ const $ readFloat $ R2.unsafeEventValue e
}
labelSizeButton :: R.State Number -> R.Element
labelSizeButton state =
sizeButton { state: state, caption: "Label Size", min: 1.0, max: 4.0 }
labelSizeButton :: R.Ref (Maybe Sigmax.Sigma) -> R.State Number -> R.Element
labelSizeButton sigmaRef state =
sizeButton {
state: state
, caption: "Label Size"
, min: 1.0
, max: 4.0
, onChange: \e -> do
let mSigma = Sigmax.readSigma <$> R.readRef sigmaRef
let newValue = readFloat $ R2.unsafeEventValue e
let (value /\ setValue) = state
case mSigma of
Just (Just s) -> Sigma.setSettings s {
defaultLabelSize: newValue
}
_ -> pure unit
setValue $ const newValue
}
This diff is collapsed.
Click to expand it.
src/Gargantext/Components/GraphExplorer/ToggleButton.purs
View file @
4c0bca05
...
...
@@ -10,20 +10,23 @@ module Gargantext.Components.GraphExplorer.ToggleButton
import Prelude
import Data.Maybe (Maybe(..))
import Data.Tuple (snd)
import Data.Tuple.Nested ((/\))
import DOM.Simple.Console (log2)
import Effect (Effect)
import Effect.Class (liftEffect)
import Reactix as R
import Reactix.DOM.HTML as H
import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax.Sigma
(restartForceAtlas2, stopForceAtlas2)
import Gargantext.Hooks.Sigmax.Sigma
as Sigma
import Gargantext.Utils.Reactix as R2
type Props = (
state :: R.State Boolean
, onMessage :: String
, offMessage :: String
, onClick :: forall e. e -> Effect Unit
)
toggleButton :: Record Props -> R.Element
...
...
@@ -32,13 +35,13 @@ toggleButton props = R.createElement toggleButtonCpt props []
toggleButtonCpt :: R.Component Props
toggleButtonCpt = R.hooksComponent "ToggleButton" cpt
where
cpt {state, onMessage, offMessage} _ = do
let (toggled /\
setToggled
) = state
cpt {state, onMessage, offMessage
, onClick
} _ = do
let (toggled /\
_
) = state
pure $
H.span {}
[
H.button
{ className: "btn btn-primary", on: {click:
\_ -> setToggled not
} }
{ className: "btn btn-primary", on: {click:
onClick
} }
[ H.text (text onMessage offMessage toggled) ]
]
text on _off true = on
...
...
@@ -50,51 +53,47 @@ controlsToggleButton state =
state: state
, onMessage: "Hide Controls"
, offMessage: "Show Controls"
, onClick: \_ -> snd state not
}
edgesToggleButton :: R.State Boolean -> R.Element
edgesToggleButton state =
edgesToggleButton :: R.
Ref (Maybe Sigmax.Sigma) -> R.
State Boolean -> R.Element
edgesToggleButton s
igmaRef s
tate =
toggleButton {
state: state
, onMessage: "Hide Edges"
, offMessage: "Show Edges"
, onClick: \_ -> do
let mSigma = Sigmax.readSigma <$> R.readRef sigmaRef
let (toggled /\ setToggled) = state
case mSigma of
Just (Just s) -> do
let settings = {
drawEdges: toggled
, drawEdgeLabels: toggled
, hideEdgesOnMove: not toggled
}
Sigma.setSettings s settings
_ -> pure unit
setToggled not
}
pauseForceAtlasButton :: R.Ref (Maybe Sigmax.Sigma) -> R.State Boolean -> R.Element
pauseForceAtlasButton sigmaRef state = R.createElement el props []
where
props = {
state
, onMessage: "Pause Force Atlas"
, offMessage: "Start Force Atlas"
}
el = R.hooksComponent "ForceAtlasButton" cpt
cpt {state, onMessage, offMessage} _ = do
pauseForceAtlasButton sigmaRef state =
toggleButton {
state: state
, onMessage: "Pause Force Atlas"
, offMessage: "Start Force Atlas"
, onClick: \_ -> do
let mSigma = Sigmax.readSigma <$> R.readRef sigmaRef
let (toggled /\ setToggled) = state
pure $
H.span {}
[
H.button
{ className: "btn btn-primary"
, on: {click: \_ -> do
let mSigma = R.readRef sigmaRef
case mSigma of
Nothing -> pure unit
Just sigma -> do
let rSigma = Sigmax.readSigma sigma
case rSigma of
Nothing -> pure unit
Just s -> if toggled then
stopForceAtlas2 s
else
restartForceAtlas2 s
setToggled not
}
}
[ H.text (text onMessage offMessage toggled) ]
]
text on _off true = on
text _on off false = off
case mSigma of
Just (Just s) -> if toggled then
Sigma.stopForceAtlas2 s
else
Sigma.restartForceAtlas2 s
_ -> pure unit
setToggled not
}
treeToggleButton :: R.State Boolean -> R.Element
treeToggleButton state =
...
...
@@ -102,6 +101,7 @@ treeToggleButton state =
state: state
, onMessage: "Hide Tree"
, offMessage: "Show Tree"
, onClick: \_ -> snd state not
}
sidebarToggleButton :: R.State Boolean -> R.Element
...
...
@@ -110,4 +110,5 @@ sidebarToggleButton state =
state: state
, onMessage: "Hide Sidebar"
, offMessage: "Show Sidebar"
, onClick: \_ -> snd state not
}
This diff is collapsed.
Click to expand it.
src/Gargantext/Hooks/Sigmax/Sigma.js
View file @
4c0bca05
...
...
@@ -49,6 +49,7 @@ function killSigma(left, right, sigma) {
}
function
clear
(
sigma
)
{
sigma
.
graph
.
clear
();
}
function
bind
(
sigma
,
event
,
handler
)
{
sigma
.
bind
(
event
,
handler
);
}
function
setSettings
(
sigma
,
settings
)
{
sigma
.
settings
(
settings
);
}
function
startForceAtlas2
(
sigma
,
settings
)
{
sigma
.
startForceAtlas2
(
settings
);
}
function
stopForceAtlas2
(
sigma
)
{
sigma
.
stopForceAtlas2
();
}
function
killForceAtlas2
(
sigma
)
{
sigma
.
killForceAtlas2
();
}
...
...
@@ -62,6 +63,7 @@ exports._killRenderer = killRenderer;
exports
.
_killSigma
=
killSigma
exports
.
_clear
=
clear
;
exports
.
_bind
=
bind
;
exports
.
_setSettings
=
setSettings
;
exports
.
_startForceAtlas2
=
startForceAtlas2
;
exports
.
_stopForceAtlas2
=
stopForceAtlas2
;
exports
.
_killForceAtlas2
=
killForceAtlas2
;
...
...
This diff is collapsed.
Click to expand it.
src/Gargantext/Hooks/Sigmax/Sigma.purs
View file @
4c0bca05
...
...
@@ -96,6 +96,11 @@ bind_ s e h = runEffectFn3 _bind s e (mkEffectFn1 h)
foreign import _bind :: forall e. EffectFn3 Sigma String (EffectFn1 e Unit) Unit
setSettings :: forall settings. Sigma -> settings -> Effect Unit
setSettings = runEffectFn2 _setSettings
foreign import _setSettings :: forall settings. EffectFn2 Sigma settings Unit
startForceAtlas2 :: forall settings. Sigma -> settings -> Effect Unit
startForceAtlas2 = runEffectFn2 _startForceAtlas2
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment