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
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
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
Grégoire Locqueville
purescript-gargantext
Commits
9b8fde6e
Commit
9b8fde6e
authored
Dec 11, 2019
by
Alexandre Delanoë
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'dev-warnings-cleanup' into dev
parents
73386281
57f6fa5c
Changes
14
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
293 additions
and
165 deletions
+293
-165
Login.css
dist/styles/Login.css
+5
-12
range-slider.css
dist/styles/range-slider.css
+2
-0
range-slider.sass
dist/styles/range-slider.sass
+2
-0
Graph.purs
src/Gargantext/Components/Graph.purs
+17
-18
GraphExplorer.purs
src/Gargantext/Components/GraphExplorer.purs
+79
-64
Controls.purs
src/Gargantext/Components/GraphExplorer/Controls.purs
+37
-28
RangeControl.purs
src/Gargantext/Components/GraphExplorer/RangeControl.purs
+33
-16
Search.purs
src/Gargantext/Components/GraphExplorer/Search.purs
+51
-0
Sidebar.purs
src/Gargantext/Components/GraphExplorer/Sidebar.purs
+1
-2
ToggleButton.purs
src/Gargantext/Components/GraphExplorer/ToggleButton.purs
+13
-1
Types.purs
src/Gargantext/Components/GraphExplorer/Types.purs
+1
-1
Sigmax.purs
src/Gargantext/Hooks/Sigmax.purs
+27
-15
Sigma.purs
src/Gargantext/Hooks/Sigmax/Sigma.purs
+8
-0
Types.purs
src/Gargantext/Hooks/Sigmax/Types.purs
+17
-8
No files found.
dist/styles/Login.css
View file @
9b8fde6e
...
@@ -79,18 +79,6 @@ li#rename #rename-a {
...
@@ -79,18 +79,6 @@ li#rename #rename-a {
width
:
1300px
;
width
:
1300px
;
}
}
#search-popup-tooltip
{
position
:
absolute
;
left
:
300px
;
top
:
-300px
;
background-color
:
white
;
z-index
:
1000
;
}
#search-popup-tooltip
:hover
{
border
:
none
;
text-decoration
:
none
;
}
#create-node-tooltip
{
#create-node-tooltip
{
position
:
absolute
;
position
:
absolute
;
left
:
96px
;
left
:
96px
;
...
@@ -216,6 +204,11 @@ li:hover a#rename-leaf {
...
@@ -216,6 +204,11 @@ li:hover a#rename-leaf {
justify-content
:
center
;
justify-content
:
center
;
}
}
.flex-center
{
display
:
flex
;
justify-content
:
space-between
;
}
a
:focus
,
a
:hover
{
a
:focus
,
a
:hover
{
cursor
:
pointer
;
cursor
:
pointer
;
}
}
...
...
dist/styles/range-slider.css
View file @
9b8fde6e
.range
{
.range
{
width
:
400px
;
width
:
400px
;
/* some space for the right knob */
padding-right
:
30px
;
}
}
.range
.range-slider
{
.range
.range-slider
{
position
:
relative
;
position
:
relative
;
...
...
dist/styles/range-slider.sass
View file @
9b8fde6e
.range
.range
width
:
400px
width
:
400px
/* some space for the right knob */
padding-right
:
30px
.range-slider
.range-slider
position
:
relative
position
:
relative
...
...
src/Gargantext/Components/Graph.purs
View file @
9b8fde6e
...
@@ -4,7 +4,9 @@ module Gargantext.Components.Graph
...
@@ -4,7 +4,9 @@ module Gargantext.Components.Graph
-- , forceAtlas2Settings, ForceAtlas2Settings, ForceAtlas2OptionalSettings
-- , forceAtlas2Settings, ForceAtlas2Settings, ForceAtlas2OptionalSettings
-- )
-- )
where
where
import Prelude (bind, const, discard, pure, ($), unit)
import Prelude (bind, const, discard, pure, ($), unit, map)
import Data.Array as A
import Data.Either (Either(..))
import Data.Either (Either(..))
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe(..))
import Data.Nullable (Nullable)
import Data.Nullable (Nullable)
...
@@ -22,20 +24,18 @@ import Gargantext.Hooks.Sigmax.Sigma as Sigma
...
@@ -22,20 +24,18 @@ import Gargantext.Hooks.Sigmax.Sigma as Sigma
type OnProps = ()
type OnProps = ()
type Graph = SigmaxTypes.Graph SigmaxTypes.Node SigmaxTypes.Edge
data Stage = Init | Ready | Cleanup
data Stage = Init | Ready | Cleanup
type Props sigma forceatlas2 =
type Props sigma forceatlas2 =
( elRef :: R.Ref (Nullable Element)
( elRef :: R.Ref (Nullable Element)
, forceAtlas2Settings :: forceatlas2
, forceAtlas2Settings :: forceatlas2
, graph :: Graph
, graph ::
SigmaxTypes.S
Graph
,
selectedEdgeIds :: R.State SigmaxTypes.SelectedEdgeIds
,
multiSelectEnabledRef :: R.Ref Boolean
, selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
, selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
, sigmaRef :: R.Ref Sigmax.Sigma
, sigmaRef :: R.Ref Sigmax.Sigma
, sigmaSettings :: sigma
, sigmaSettings :: sigma
, stage :: R.State Stage
, stage :: R.State Stage
, transformedGraph :: Graph
, transformedGraph ::
SigmaxTypes.S
Graph
)
)
graph :: forall s fa2. Record (Props s fa2) -> R.Element
graph :: forall s fa2. Record (Props s fa2) -> R.Element
...
@@ -54,9 +54,8 @@ graphCpt = R.hooksComponent "Graph" cpt
...
@@ -54,9 +54,8 @@ graphCpt = R.hooksComponent "Graph" cpt
Nothing -> RH.div {} []
Nothing -> RH.div {} []
Just el -> R.createPortal [] el
Just el -> R.createPortal [] el
stageHooks props@{stage: (Init /\ setStage)} = do
stageHooks props@{
multiSelectEnabledRef, selectedNodeIds, sigmaRef,
stage: (Init /\ setStage)} = do
R.useEffectOnce $ do
R.useEffectOnce $ do
log "[graphCpt] effect once"
let rSigma = R.readRef props.sigmaRef
let rSigma = R.readRef props.sigmaRef
case Sigmax.readSigma rSigma of
case Sigmax.readSigma rSigma of
...
@@ -67,7 +66,7 @@ graphCpt = R.hooksComponent "Graph" cpt
...
@@ -67,7 +66,7 @@ graphCpt = R.hooksComponent "Graph" cpt
Right sig -> do
Right sig -> do
Sigmax.writeSigma rSigma $ Just sig
Sigmax.writeSigma rSigma $ Just sig
Sigmax.dependOnContainer props.elRef "[graphCpt] container not found" $ \c -> do
Sigmax.dependOnContainer props.elRef "[graphCpt
(Ready)
] container not found" $ \c -> do
_ <- Sigma.addRenderer sig {
_ <- Sigma.addRenderer sig {
"type": "canvas"
"type": "canvas"
, container: c
, container: c
...
@@ -76,28 +75,28 @@ graphCpt = R.hooksComponent "Graph" cpt
...
@@ -76,28 +75,28 @@ graphCpt = R.hooksComponent "Graph" cpt
Sigmax.refreshData sig $ Sigmax.sigmafy props.graph
Sigmax.refreshData sig $ Sigmax.sigmafy props.graph
Sigmax.dependOnSigma (R.readRef sigmaRef) "[graphCpt (Ready)] no sigma" $ \sigma -> do
-- bind the click event only initially, when ref was empty
Sigmax.bindSelectedNodesClick sigma selectedNodeIds multiSelectEnabledRef
Sigmax.setEdges sig false
Sigmax.setEdges sig false
Sigma.startForceAtlas2 sig props.forceAtlas2Settings
Sigma.startForceAtlas2 sig props.forceAtlas2Settings
-- bind the click event only initially, when ref was empty
Sigmax.bindSelectedNodesClick props.sigmaRef props.selectedNodeIds
Sigmax.bindSelectedEdgesClick props.sigmaRef props.selectedEdgeIds
Just sig -> do
Just sig -> do
pure unit
pure unit
setStage $ const
$
Ready
setStage $ const Ready
delay unit $ \_ -> do
delay unit $ \_ -> do
log "[graphCpt] cleanup"
log "[graphCpt] cleanup"
pure $ pure unit
pure $ pure unit
stageHooks props@{s
tage: (Ready /\ setStage)
} = do
stageHooks props@{s
igmaRef, stage: (Ready /\ setStage), transformedGraph
} = do
let tEdgesMap = SigmaxTypes.edgesGraphMap
props.
transformedGraph
let tEdgesMap = SigmaxTypes.edgesGraphMap transformedGraph
let tNodesMap = SigmaxTypes.nodesGraphMap
props.
transformedGraph
let tNodesMap = SigmaxTypes.nodesGraphMap transformedGraph
-- TODO Probably this can be optimized to re-mark selected nodes only when they changed
-- TODO Probably this can be optimized to re-mark selected nodes only when they changed
R.useEffect' $ do
R.useEffect' $ do
Sigmax.dependOnSigma (R.readRef
props.sigmaRef) "[graphCpt
] no sigma" $ \sigma -> do
Sigmax.dependOnSigma (R.readRef
sigmaRef) "[graphCpt (Ready)
] no sigma" $ \sigma -> do
Sigmax.updateEdges sigma tEdgesMap
Sigmax.updateEdges sigma tEdgesMap
Sigmax.updateNodes sigma tNodesMap
Sigmax.updateNodes sigma tNodesMap
...
...
src/Gargantext/Components/GraphExplorer.purs
View file @
9b8fde6e
This diff is collapsed.
Click to expand it.
src/Gargantext/Components/GraphExplorer/Controls.purs
View file @
9b8fde6e
...
@@ -7,10 +7,11 @@ module Gargantext.Components.GraphExplorer.Controls
...
@@ -7,10 +7,11 @@ module Gargantext.Components.GraphExplorer.Controls
, getShowTree, setShowTree
, getShowTree, setShowTree
, getShowControls, setShowControls
, getShowControls, setShowControls
, getCursorSize, setCursorSize
, getCursorSize, setCursorSize
, getMultiNodeSelect, setMultiNodeSelect
) where
) where
import Data.Maybe (Maybe(..))
import Data.Array as A
import Data.Maybe (Maybe(..), maybe)
import Data.Sequence as Seq
import Data.Set as Set
import Data.Set as Set
import Data.Tuple (fst, snd)
import Data.Tuple (fst, snd)
import Data.Tuple.Nested ((/\), get1)
import Data.Tuple.Nested ((/\), get1)
...
@@ -22,9 +23,10 @@ import Reactix.DOM.HTML as RH
...
@@ -22,9 +23,10 @@ import Reactix.DOM.HTML as RH
import Gargantext.Components.Graph as Graph
import Gargantext.Components.Graph as Graph
import Gargantext.Components.GraphExplorer.Button (centerButton)
import Gargantext.Components.GraphExplorer.Button (centerButton)
import Gargantext.Components.GraphExplorer.RangeControl (edgeSizeControl, nodeSizeControl)
import Gargantext.Components.GraphExplorer.RangeControl (edgeConfluenceControl, edgeWeightControl, nodeSizeControl)
import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton)
import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton)
import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton, pauseForceAtlasButton)
import Gargantext.Components.GraphExplorer.ToggleButton (
multiSelectEnabledButton,
edgesToggleButton, pauseForceAtlasButton)
import Gargantext.Components.GraphExplorer.Types as GET
import Gargantext.Components.GraphExplorer.Types as GET
import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
...
@@ -33,11 +35,13 @@ import Gargantext.Utils.Reactix as R2
...
@@ -33,11 +35,13 @@ import Gargantext.Utils.Reactix as R2
type Controls =
type Controls =
( cursorSize :: R.State Number
( cursorSize :: R.State Number
, edgeConfluence :: R.State Range.NumberRange
, edgeWeight :: R.State Range.NumberRange
, graph :: SigmaxTypes.SGraph
, graphStage :: R.State Graph.Stage
, graphStage :: R.State Graph.Stage
, multi
NodeSelect :: R.Ref
Boolean
, multi
SelectEnabled :: R.State
Boolean
, nodeSize :: R.State Range.NumberRange
, nodeSize :: R.State Range.NumberRange
, selectedEdgeIds :: R.State (Set.Set String)
, selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
, selectedNodeIds :: R.State (Set.Set String)
, showControls :: R.State Boolean
, showControls :: R.State Boolean
, showSidePanel :: R.State GET.SidePanelState
, showSidePanel :: R.State GET.SidePanelState
, showTree :: R.State Boolean
, showTree :: R.State Boolean
...
@@ -48,23 +52,21 @@ controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings
...
@@ -48,23 +52,21 @@ controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings
controlsToSigmaSettings { cursorSize: (cursorSize /\ _)} = Graph.sigmaSettings
controlsToSigmaSettings { cursorSize: (cursorSize /\ _)} = Graph.sigmaSettings
type LocalControls =
type LocalControls =
( edgeSize :: R.State Range.NumberRange
( labelSize :: R.State Number
, labelSize :: R.State Number
, pauseForceAtlas :: R.State Boolean
, pauseForceAtlas :: R.State Boolean
, showEdges :: R.State Boolean
, showEdges :: R.State Boolean
)
)
initialLocalControls :: R.Hooks (Record LocalControls)
initialLocalControls :: R.Hooks (Record LocalControls)
initialLocalControls = do
initialLocalControls = do
edgeSize <- R.useState' $ Range.Closed { min: 0.5, max: 1.0 }
labelSize <- R.useState' 14.0
labelSize <- R.useState' 14.0
--nodeSize <- R.useState' $ Range.Closed { min: 0.0, max: 10.0 }
--nodeSize <- R.useState' $ Range.Closed { min: 0.0, max: 10.0 }
pauseForceAtlas <- R.useState' true
pauseForceAtlas <- R.useState' true
search <- R.useState' ""
showEdges <- R.useState' true
showEdges <- R.useState' true
pure $ {
pure $ {
edgeSize
labelSize
, labelSize
--, nodeSize
--, nodeSize
, pauseForceAtlas
, pauseForceAtlas
, showEdges
, showEdges
...
@@ -107,6 +109,11 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
...
@@ -107,6 +109,11 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
R.setRef mFAPauseRef $ Just timeoutId
R.setRef mFAPauseRef $ Just timeoutId
pure unit
pure unit
let nodesSorted = A.sortWith (_.size) $ Seq.toUnfoldable $ SigmaxTypes.graphNodes props.graph
let nodeSizeMin = maybe 0.0 _.size $ A.head nodesSorted
let nodeSizeMax = maybe 100.0 _.size $ A.last nodesSorted
let nodeSizeRange = Range.Closed { min: nodeSizeMin, max: nodeSizeMax }
pure $ case getShowControls props of
pure $ case getShowControls props of
false -> RH.div {} []
false -> RH.div {} []
true -> RH.div { className: "col-md-12", style: { paddingBottom: "10px" } }
true -> RH.div { className: "col-md-12", style: { paddingBottom: "10px" } }
...
@@ -116,7 +123,8 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
...
@@ -116,7 +123,8 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
RH.li {} [ centerButton props.sigmaRef ]
RH.li {} [ centerButton props.sigmaRef ]
, RH.li {} [ pauseForceAtlasButton props.sigmaRef localControls.pauseForceAtlas ] -- spatialization (pause ForceAtlas2)
, RH.li {} [ pauseForceAtlasButton props.sigmaRef localControls.pauseForceAtlas ] -- spatialization (pause ForceAtlas2)
, RH.li {} [ edgesToggleButton props.sigmaRef localControls.showEdges ]
, RH.li {} [ edgesToggleButton props.sigmaRef localControls.showEdges ]
, RH.li {} [ edgeSizeControl props.sigmaRef localControls.edgeSize ] -- edge size : 0-3
, RH.li {} [ edgeConfluenceControl props.sigmaRef props.edgeConfluence ]
, RH.li {} [ edgeWeightControl props.sigmaRef props.edgeWeight ]
-- change level
-- change level
-- file upload
-- file upload
-- run demo
-- run demo
...
@@ -124,33 +132,40 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
...
@@ -124,33 +132,40 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
-- search topics
-- search topics
, RH.li {} [ cursorSizeButton props.cursorSize ] -- cursor size: 0-100
, RH.li {} [ cursorSizeButton props.cursorSize ] -- cursor size: 0-100
, RH.li {} [ labelSizeButton props.sigmaRef localControls.labelSize ] -- labels size: 1-4
, RH.li {} [ labelSizeButton props.sigmaRef localControls.labelSize ] -- labels size: 1-4
, RH.li {} [ nodeSizeControl props.nodeSize ]
, RH.li {} [ nodeSizeControl
nodeSizeRange
props.nodeSize ]
-- zoom: 0 -100 - calculate ratio
-- zoom: 0 -100 - calculate ratio
-- toggle multi node selection
, RH.li {} [ multiSelectEnabledButton props.multiSelectEnabled ]
-- toggle multi node selection
-- save button
-- save button
, RH.li {} [ nodeSearchControl { selectedNodeIds: props.selectedNodeIds } ]
]
]
]
]
]
]
useGraphControls :: R.Hooks (Record Controls)
useGraphControls :: SigmaxTypes.SGraph -> R.Hooks (Record Controls)
useGraphControls = do
useGraphControls graph = do
let edges = SigmaxTypes.graphEdges graph
let nodes = SigmaxTypes.graphNodes graph
cursorSize <- R.useState' 10.0
cursorSize <- R.useState' 10.0
edgeConfluence <- R.useState' $ Range.Closed { min: 0.0, max: 1.0 }
edgeWeight <- R.useState' $ Range.Closed { min: 0.0, max: 1.0 }
graphStage <- R.useState' Graph.Init
graphStage <- R.useState' Graph.Init
multi
NodeSelect <- R.useRef
false
multi
SelectEnabled <- R.useState'
false
nodeSize <- R.useState' $ Range.Closed { min: 0.0, max: 10.0 }
nodeSize <- R.useState' $ Range.Closed { min: 0.0, max: 10
0
.0 }
showTree <- R.useState' false
showTree <- R.useState' false
selectedNodeIds <- R.useState' $ Set.empty
selectedNodeIds <- R.useState' $ Set.empty
selectedEdgeIds <- R.useState' $ Set.empty
showControls <- R.useState' false
showControls <- R.useState' false
showSidePanel <- R.useState' GET.InitialClosed
showSidePanel <- R.useState' GET.InitialClosed
sigma <- Sigmax.initSigma
sigma <- Sigmax.initSigma
sigmaRef <- R.useRef sigma
sigmaRef <- R.useRef sigma
pure { cursorSize
pure { cursorSize
, edgeConfluence
, edgeWeight
, graph
, graphStage
, graphStage
, multi
NodeSelect
, multi
SelectEnabled
, nodeSize
, nodeSize
, selectedEdgeIds
, selectedNodeIds
, selectedNodeIds
, showControls
, showControls
, showSidePanel
, showSidePanel
...
@@ -167,9 +182,6 @@ getShowTree { showTree: ( should /\ _ ) } = should
...
@@ -167,9 +182,6 @@ getShowTree { showTree: ( should /\ _ ) } = should
getCursorSize :: Record Controls -> Number
getCursorSize :: Record Controls -> Number
getCursorSize { cursorSize: ( size /\ _ ) } = size
getCursorSize { cursorSize: ( size /\ _ ) } = size
getMultiNodeSelect :: Record Controls -> Boolean
getMultiNodeSelect { multiNodeSelect } = R.readRef multiNodeSelect
setShowControls :: Record Controls -> Boolean -> Effect Unit
setShowControls :: Record Controls -> Boolean -> Effect Unit
setShowControls { showControls: ( _ /\ set ) } v = set $ const v
setShowControls { showControls: ( _ /\ set ) } v = set $ const v
...
@@ -178,6 +190,3 @@ setShowTree { showTree: ( _ /\ set ) } v = set $ not <<< const v
...
@@ -178,6 +190,3 @@ setShowTree { showTree: ( _ /\ set ) } v = set $ not <<< const v
setCursorSize :: Record Controls -> Number -> Effect Unit
setCursorSize :: Record Controls -> Number -> Effect Unit
setCursorSize { cursorSize: ( _ /\ setSize ) } v = setSize $ const v
setCursorSize { cursorSize: ( _ /\ setSize ) } v = setSize $ const v
setMultiNodeSelect :: Record Controls -> Boolean -> Effect Unit
setMultiNodeSelect { multiNodeSelect } = R.setRef multiNodeSelect
src/Gargantext/Components/GraphExplorer/RangeControl.purs
View file @
9b8fde6e
module Gargantext.Components.GraphExplorer.RangeControl
module Gargantext.Components.GraphExplorer.RangeControl
( Props
( Props
, rangeControl
, rangeControl
, edgeSizeControl
, edgeConfluenceControl
, edgeWeightControl
, nodeSizeControl
, nodeSizeControl
) where
) where
...
@@ -33,34 +34,50 @@ rangeControlCpt = R.hooksComponent "RangeButton" cpt
...
@@ -33,34 +34,50 @@ rangeControlCpt = R.hooksComponent "RangeButton" cpt
, RS.rangeSlider sliderProps
, RS.rangeSlider sliderProps
]
]
edge
Siz
eControl :: R.Ref Sigmax.Sigma -> R.State Range.NumberRange -> R.Element
edge
Confluenc
eControl :: R.Ref Sigmax.Sigma -> R.State Range.NumberRange -> R.Element
edge
Siz
eControl sigmaRef (state /\ setState) =
edge
Confluenc
eControl sigmaRef (state /\ setState) =
rangeControl {
rangeControl {
caption: "Edge
Size
"
caption: "Edge
Confluence Weight
"
, sliderProps: {
, sliderProps: {
bounds: Range.Closed { min: 0.0, max:
3
.0 }
bounds: Range.Closed { min: 0.0, max:
1
.0 }
, initialValue: state
, initialValue: state
, epsilon: 0.1
, epsilon: 0.
0
1
, step: 1.0
, step: 1.0
, width: 10.0
, width: 10.0
, height: 5.0
, height: 5.0
, onChange: \range@(Range.Closed {min, max}) -> do
, onChange: setState <<< const
let sigma = R.readRef sigmaRef
Sigmax.dependOnSigma sigma "[edgeSizeControl] sigma: Nothing" $ \s -> do
Sigma.setSettings s {
minEdgeSize: min
, maxEdgeSize: max
}
}
setState $ const range
}
edgeWeightControl :: R.Ref Sigmax.Sigma -> R.State Range.NumberRange -> R.Element
edgeWeightControl sigmaRef (state /\ setState) =
rangeControl {
caption: "Edge Weight"
, sliderProps: {
bounds: Range.Closed { min: 0.0, max: 3.0 }
, initialValue: state
, epsilon: 0.01
, step: 1.0
, width: 10.0
, height: 5.0
, onChange: setState <<< const
-- , onChange: \range@(Range.Closed {min, max}) -> do
-- let sigma = R.readRef sigmaRef
-- Sigmax.dependOnSigma sigma "[edgeWeightControl] sigma: Nothing" $ \s -> do
-- Sigma.setSettings s {
-- minEdgeSize: min
-- , maxEdgeSize: max
-- }
-- setState $ const range
}
}
}
}
nodeSizeControl :: R.State Range.NumberRange -> R.Element
nodeSizeControl :: R
ange.NumberRange -> R
.State Range.NumberRange -> R.Element
nodeSizeControl (state /\ setState) =
nodeSizeControl (
Range.Closed { min: rangeMin, max: rangeMax }) (
state /\ setState) =
rangeControl {
rangeControl {
caption: "Node Size"
caption: "Node Size"
, sliderProps: {
, sliderProps: {
bounds: Range.Closed { min:
0.0, max: 15.0
}
bounds: Range.Closed { min:
rangeMin, max: rangeMax
}
, initialValue: state
, initialValue: state
, epsilon: 0.1
, epsilon: 0.1
, step: 1.0
, step: 1.0
...
...
src/Gargantext/Components/GraphExplorer/Search.purs
0 → 100644
View file @
9b8fde6e
module Gargantext.Components.GraphExplorer.Search
( Props
, nodeSearchControl
) where
import Global (readFloat)
import Prelude
import Data.Set as Set
import Data.Tuple (snd)
import Data.Tuple.Nested ((/\))
import DOM.Simple.Console (log2)
import Effect (Effect)
import FFI.Simple ((..))
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.Hooks.Sigmax.Types as SigmaxTypes
import Gargantext.Utils.Reactix as R2
type Props = (
selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
)
nodeSearchControl :: Record Props -> R.Element
nodeSearchControl props = R.createElement sizeButtonCpt props []
sizeButtonCpt :: R.Component Props
sizeButtonCpt = R.hooksComponent "NodeSearchControl" cpt
where
cpt {selectedNodeIds} _ = do
(search /\ setSearch) <- R.useState' ""
pure $
H.div { className: "form-group" }
[ H.div { className: "input-group" }
[ H.input { type: "text"
, className: "form-control"
, defaultValue: search
, on: { input: \e -> setSearch $ const $ e .. "target" .. "value" }
}
, H.div { className: "btn input-group-addon"
, on: { click: \_ -> log2 "[sizeButtonCpt] search" search }
}
[ H.span { className: "fa fa-search" } [] ]
]
]
-- TODO Wherefrom do I get graph nodes?
-- How to implement filtering here? I want to set selectedNodeIds based on graph data.
src/Gargantext/Components/GraphExplorer/Sidebar.purs
View file @
9b8fde6e
...
@@ -14,7 +14,6 @@ import Reactix.DOM.HTML as RH
...
@@ -14,7 +14,6 @@ import Reactix.DOM.HTML as RH
import Gargantext.Data.Array (catMaybes)
import Gargantext.Data.Array (catMaybes)
import Gargantext.Components.RandomText (words)
import Gargantext.Components.RandomText (words)
import Gargantext.Components.Nodes.Corpus.Graph.Tabs as GT
import Gargantext.Components.Nodes.Corpus.Graph.Tabs as GT
import Gargantext.Components.Graph as Graph
import Gargantext.Components.GraphExplorer.Types as GET
import Gargantext.Components.GraphExplorer.Types as GET
import Gargantext.Ends (Frontends)
import Gargantext.Ends (Frontends)
import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
...
@@ -22,7 +21,7 @@ import Gargantext.Sessions (Session)
...
@@ -22,7 +21,7 @@ import Gargantext.Sessions (Session)
type Props =
type Props =
( frontends :: Frontends
( frontends :: Frontends
, graph ::
Graph.
Graph
, graph ::
SigmaxTypes.S
Graph
, metaData :: GET.MetaData
, metaData :: GET.MetaData
, selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
, selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
, session :: Session
, session :: Session
...
...
src/Gargantext/Components/GraphExplorer/ToggleButton.purs
View file @
9b8fde6e
module Gargantext.Components.GraphExplorer.ToggleButton
module Gargantext.Components.GraphExplorer.ToggleButton
( Props, toggleButton, toggleButtonCpt
( Props
, toggleButton
, toggleButtonCpt
, multiSelectEnabledButton
, controlsToggleButton
, controlsToggleButton
, edgesToggleButton
, edgesToggleButton
, sidebarToggleButton
, sidebarToggleButton
...
@@ -66,6 +69,15 @@ edgesToggleButton sigmaRef state =
...
@@ -66,6 +69,15 @@ edgesToggleButton sigmaRef state =
setToggled not
setToggled not
}
}
multiSelectEnabledButton :: R.State Boolean -> R.Element
multiSelectEnabledButton state =
toggleButton {
state: state
, onMessage: "Single-node"
, offMessage: "Multi-node"
, onClick: \_ -> snd state not
}
pauseForceAtlasButton :: R.Ref Sigmax.Sigma -> R.State Boolean -> R.Element
pauseForceAtlasButton :: R.Ref Sigmax.Sigma -> R.State Boolean -> R.Element
pauseForceAtlasButton sigmaRef state =
pauseForceAtlasButton sigmaRef state =
toggleButton {
toggleButton {
...
...
src/Gargantext/Components/GraphExplorer/Types.purs
View file @
9b8fde6e
...
@@ -88,7 +88,7 @@ type State = (
...
@@ -88,7 +88,7 @@ type State = (
--, showSidePanel :: R.State Boolean
--, showSidePanel :: R.State Boolean
--, showControls :: R.State Boolean
--, showControls :: R.State Boolean
--, showTree :: R.State Boolean
--, showTree :: R.State Boolean
--, sigmaGraphData :: R.State (Maybe
Graph.
Graph)
--, sigmaGraphData :: R.State (Maybe
SigmaxTypes.S
Graph)
--, sigmaSettings :: R.State ({|Graph.SigmaSettings})
--, sigmaSettings :: R.State ({|Graph.SigmaSettings})
--treeId :: R.State (Maybe TreeId)
--treeId :: R.State (Maybe TreeId)
)
)
...
...
src/Gargantext/Hooks/Sigmax.purs
View file @
9b8fde6e
module Gargantext.Hooks.Sigmax
module Gargantext.Hooks.Sigmax
where
where
import Prelude (Unit, bind, discard, flip, pure, unit, ($), (*>), (<<<), (<>), (>>=), (||), not, const, map)
import Data.Array as A
import Data.Array as A
import Data.Either (either)
import Data.Either (either)
import Data.Foldable (sequence_)
import Data.Foldable (sequence_
, foldl
)
import Data.Map as Map
import Data.Map as Map
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe(..))
import Data.Nullable (Nullable)
import Data.Nullable (Nullable)
...
@@ -20,9 +22,8 @@ import Effect.Class.Console (error)
...
@@ -20,9 +22,8 @@ import Effect.Class.Console (error)
import Effect.Timer (TimeoutId, clearTimeout)
import Effect.Timer (TimeoutId, clearTimeout)
import FFI.Simple ((.=))
import FFI.Simple ((.=))
import Gargantext.Hooks.Sigmax.Sigma as Sigma
import Gargantext.Hooks.Sigmax.Sigma as Sigma
import Gargantext.Hooks.Sigmax.Types (Graph(..),
EdgesMap, NodesMap, SelectedNodeIds, SelectedEdgeId
s)
import Gargantext.Hooks.Sigmax.Types (Graph(..),
SGraph, EdgesMap, NodesMap, SelectedNodeIds, SelectedEdgeIds, graphEdge
s)
import Gargantext.Utils.Reactix as R2
import Gargantext.Utils.Reactix as R2
import Prelude (Unit, bind, discard, flip, pure, unit, ($), (*>), (<<<), (<>), (>>=), not)
import Reactix as R
import Reactix as R
type Sigma =
type Sigma =
...
@@ -190,8 +191,9 @@ updateEdges sigma edgesMap = do
...
@@ -190,8 +191,9 @@ updateEdges sigma edgesMap = do
let mTEdge = Map.lookup e.id edgesMap
let mTEdge = Map.lookup e.id edgesMap
case mTEdge of
case mTEdge of
Nothing -> error $ "Edge id " <> e.id <> " not found in edgesMap"
Nothing -> error $ "Edge id " <> e.id <> " not found in edgesMap"
(Just
tEdge@{color: tColor
}) -> do
(Just
{color: tColor, hidden: tHidden
}) -> do
_ <- pure $ (e .= "color") tColor
_ <- pure $ (e .= "color") tColor
_ <- pure $ (e .= "hidden") tHidden
pure unit
pure unit
Sigma.refresh sigma
Sigma.refresh sigma
...
@@ -202,28 +204,38 @@ updateNodes sigma nodesMap = do
...
@@ -202,28 +204,38 @@ updateNodes sigma nodesMap = do
let mTNode = Map.lookup n.id nodesMap
let mTNode = Map.lookup n.id nodesMap
case mTNode of
case mTNode of
Nothing -> error $ "Node id " <> n.id <> " not found in nodesMap"
Nothing -> error $ "Node id " <> n.id <> " not found in nodesMap"
(Just
tNode@
{color: tColor, hidden: tHidden}) -> do
(Just {color: tColor, hidden: tHidden}) -> do
_ <- pure $ (n .= "color") tColor
_ <- pure $ (n .= "color") tColor
_ <- pure $ (n .= "hidden") tHidden
_ <- pure $ (n .= "hidden") tHidden
pure unit
pure unit
Sigma.refresh sigma
Sigma.refresh sigma
bindSelectedNodesClick :: R.Ref Sigma -> R.State SelectedNodeIds -> Effect Unit
-- | Toggles item visibility in the selected set
bindSelectedNodesClick sigmaRef (_ /\ setSelectedNodeIds) =
multiSelectUpdate :: SelectedNodeIds -> SelectedNodeIds -> SelectedNodeIds
dependOnSigma (R.readRef sigmaRef) "[graphCpt] no sigma" $ \sigma -> do
multiSelectUpdate new selected = foldl fld selected new
Sigma.bindClickNode sigma $ \node -> do
where
setSelectedNodeIds \nids ->
fld selectedAcc item =
if Set.member node.id nids then
if Set.member item selectedAcc then
Set.delete node.id nids
Set.delete item selectedAcc
else
Set.insert item selectedAcc
bindSelectedNodesClick :: Sigma.Sigma -> R.State SelectedNodeIds -> R.Ref Boolean -> Effect Unit
bindSelectedNodesClick sigma (_ /\ setSelectedNodeIds) multiSelectEnabledRef =
Sigma.bindClickNodes sigma $ \nodes -> do
let multiSelectEnabled = R.readRef multiSelectEnabledRef
let nodeIds = Set.fromFoldable $ map _.id nodes
if multiSelectEnabled then
setSelectedNodeIds $ multiSelectUpdate nodeIds
else
else
Set.insert node.id ni
ds
setSelectedNodeIds $ const nodeI
ds
bindSelectedEdgesClick :: R.Ref Sigma -> R.State SelectedEdgeIds -> Effect Unit
bindSelectedEdgesClick :: R.Ref Sigma -> R.State SelectedEdgeIds -> Effect Unit
bindSelectedEdgesClick sigmaRef (_ /\ setSelectedEdgeIds) =
bindSelectedEdgesClick sigmaRef (_ /\ setSelectedEdgeIds) =
dependOnSigma (R.readRef sigmaRef) "[graphCpt] no sigma" $ \sigma -> do
dependOnSigma (R.readRef sigmaRef) "[graphCpt] no sigma" $ \sigma -> do
Sigma.bindClickEdge sigma $ \edge -> do
Sigma.bindClickEdge sigma $ \edge -> do
log2 "[bindClickEdge] edge" edge
setSelectedEdgeIds \eids ->
setSelectedEdgeIds \eids ->
if Set.member edge.id eids then
if Set.member edge.id eids then
Set.delete edge.id eids
Set.delete edge.id eids
...
...
src/Gargantext/Hooks/Sigmax/Sigma.purs
View file @
9b8fde6e
...
@@ -142,6 +142,14 @@ bindClickNode s f = bind_ s "clickNode" $ \e -> do
...
@@ -142,6 +142,14 @@ bindClickNode s f = bind_ s "clickNode" $ \e -> do
unbindClickNode :: Sigma -> Effect Unit
unbindClickNode :: Sigma -> Effect Unit
unbindClickNode s = unbind_ s "clickNode"
unbindClickNode s = unbind_ s "clickNode"
bindClickNodes :: Sigma -> (Array (Record Types.Node) -> Effect Unit) -> Effect Unit
bindClickNodes s f = bind_ s "clickNodes" $ \e -> do
let nodes = e .. "data" .. "node" :: Array (Record Types.Node)
f nodes
unbindClickNodes :: Sigma -> Effect Unit
unbindClickNodes s = unbind_ s "clickNodes"
bindOverNode :: Sigma -> (Record Types.Node -> Effect Unit) -> Effect Unit
bindOverNode :: Sigma -> (Record Types.Node -> Effect Unit) -> Effect Unit
bindOverNode s f = bind_ s "overNode" $ \e -> do
bindOverNode s f = bind_ s "overNode" $ \e -> do
let node = e .. "data" .. "node" :: Record Types.Node
let node = e .. "data" .. "node" :: Record Types.Node
...
...
src/Gargantext/Hooks/Sigmax/Types.purs
View file @
9b8fde6e
module Gargantext.Hooks.Sigmax.Types where
module Gargantext.Hooks.Sigmax.Types where
import Prelude (map, ($), (&&), (==))
import Prelude (map, ($), (&&), (==)
, class Ord, Ordering, compare
)
import Data.Map as Map
import Data.Map as Map
import Data.Sequence (Seq)
import Data.Sequence (Seq)
import Data.Set as Set
import Data.Set as Set
...
@@ -30,27 +30,36 @@ type Node =
...
@@ -30,27 +30,36 @@ type Node =
type Edge =
type Edge =
( id :: String
( id :: String
, color :: String
, color :: String
, confluence :: Number
, hidden :: Boolean
, size :: Number
, size :: Number
, source :: String
, source :: String
, target :: String )
, target :: String
, weight :: Number )
type SelectedNodeIds = Set.Set String
type SelectedNodeIds = Set.Set String
type SelectedEdgeIds = Set.Set String
type SelectedEdgeIds = Set.Set String
type EdgesMap = Map.Map String (Record Edge)
type EdgesMap = Map.Map String (Record Edge)
type NodesMap = Map.Map String (Record Node)
type NodesMap = Map.Map String (Record Node)
type SGraph = Graph Node Edge
graphEdges :: SGraph -> Seq (Record Edge)
graphEdges (Graph {edges}) = edges
graphNodes :: SGraph -> Seq (Record Node)
graphNodes (Graph {nodes}) = nodes
edgesGraphMap :: Graph Node Edge -> EdgesMap
edgesGraphMap :: Graph Node Edge -> EdgesMap
edgesGraphMap graph = do
edgesGraphMap graph =
let (Graph {edges}) = graph
Map.fromFoldable $ map (\e -> Tuple e.id e) $ graphEdges graph
Map.fromFoldable $ map (\e -> Tuple e.id e) edges
nodesMap :: Seq (Record Node) -> NodesMap
nodesMap :: Seq (Record Node) -> NodesMap
nodesMap nodes = Map.fromFoldable $ map (\n -> Tuple n.id n) nodes
nodesMap nodes = Map.fromFoldable $ map (\n -> Tuple n.id n) nodes
nodesGraphMap :: Graph Node Edge -> NodesMap
nodesGraphMap :: Graph Node Edge -> NodesMap
nodesGraphMap graph = do
nodesGraphMap graph =
let (Graph {nodes}) = graph
nodesMap $ graphNodes graph
nodesMap nodes
eqGraph :: (Graph Node Edge) -> (Graph Node Edge) -> Boolean
eqGraph :: (Graph Node Edge) -> (Graph Node Edge) -> Boolean
eqGraph (Graph {nodes: n1, edges: e1}) (Graph {nodes: n2, edges: e2}) = (n1 == n2) && (e1 == e2)
eqGraph (Graph {nodes: n1, edges: e1}) (Graph {nodes: n2, edges: e2}) = (n1 == n2) && (e1 == e2)
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