Skip to content

P
purescript-gargantext
Commit 98794386 authored by Alexandre Delanoë's avatar Alexandre Delanoë
Browse files
Options

[DESIGN/ERGO] Graph explorer.

parent 554abebd
Hide whitespace changes
Inline Side-by-side
Showing with 34 additions and 31 deletions
src/Gargantext/Pages/Corpus/Graph.purs
View file @ 98794386
...@@ -299,7 +299,7 @@ mySettings = sigmaSettings { verbose : true ...@@ -299,7 +299,7 @@ mySettings = sigmaSettings { verbose : true
, mouseEnabled: true , mouseEnabled: true
, touchEnabled: true , touchEnabled: true
, animationsTime: 1500.0 , animationsTime: (5500.0)
, defaultNodeColor: "#ddd" , defaultNodeColor: "#ddd"
, twNodeRendBorderSize: 0.5 -- node borders (only iff ourRendering) , twNodeRendBorderSize: 0.5 -- node borders (only iff ourRendering)
...@@ -310,8 +310,8 @@ mySettings = sigmaSettings { verbose : true ...@@ -310,8 +310,8 @@ mySettings = sigmaSettings { verbose : true
, maxEdgeSize: 0.0 , maxEdgeSize: 0.0
--, defaultEdgeType: "curve" -- 'curve' or 'line' (curve only iff ourRendering) --, defaultEdgeType: "curve" -- 'curve' or 'line' (curve only iff ourRendering)
, twEdgeDefaultOpacity: 0.4 -- initial opacity added to src/tgt colors , twEdgeDefaultOpacity: 0.4 -- initial opacity added to src/tgt colors
, minNodeSize: 1.0 , minNodeSize: 5.0
, maxNodeSize: 10.0 , maxNodeSize: 30.0
-- --
-- -- labels -- -- labels
, font: "Droid Sans" -- font params , font: "Droid Sans" -- font params
...@@ -402,7 +402,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -402,7 +402,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
where where
treespec = over _render \frender d p (State s) c -> treespec = over _render \frender d p (State s) c ->
[ div [ className "col-md-1", _id "graph-tree", style {marginTop:"151px"}] $ [ div [ className "col-md-1", _id "graph-tree", style {marginTop: "65px"}] $
[ [
button [className "btn btn-primary" , onClick \_ -> d ToggleTree] button [className "btn btn-primary" , onClick \_ -> d ToggleTree]
[text $ if s.showTree then "Hide Tree" else "Show Tree"] [text $ if s.showTree then "Hide Tree" else "Show Tree"]
...@@ -423,11 +423,13 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -423,11 +423,13 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
simpleSpec defaultPerformAction defaultRender simpleSpec defaultPerformAction defaultRender
Just treeId -> Just treeId ->
(cmapProps (const {root: treeId}) (noState Tree.treeview)) (cmapProps (const {root: treeId}) (noState Tree.treeview))
render' :: Render State {} Action render' :: Render State {} Action
render' d _ (State st@{settings, graphData: GraphData {sides,metaData }}) _ = render' d _ (State st@{settings, graphData: GraphData {sides,metaData }}) _ =
[ div [className "container-fluid", style {"padding-top" : "100px"}] [ div [className "container-fluid", style {"padding-top" : "90px" }]
[ div [ className "row"] [ {-div [ className "row"]
[ h2 [ style {textAlign : "center", position : "relative", top: "-38px"}] [ h2 [ style {textAlign : "center", position : "relative", top: "-1px"}]
[-- : MetaData {title} [-- : MetaData {title}
case metaData of case metaData of
Just( MetaData {title }) -> Just( MetaData {title }) ->
...@@ -436,7 +438,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -436,7 +438,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
text "Title" text "Title"
] ]
] ]
, div [className "row", style {"padding-bottom" : "10px", marginTop : "-24px"}] , -} div [className "row", style {"padding-bottom" : "10px", marginTop : "-24px"}]
[ [
div [className "col-md-4"] div [className "col-md-4"]
[ [
...@@ -464,10 +466,8 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -464,10 +466,8 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
[ menu [_id "toolbar"] [ menu [_id "toolbar"]
[ ul' [ ul'
[ [
li' -- li' [ button [className "btn btn-success btn-sm"] [text "Change Type"] ]
[ button [className "btn btn-success btn-sm"] [text "Change Type"] -- ,
]
,
li' li'
[ button [ [ button [
className "btn btn-primary btn-sm" className "btn btn-primary btn-sm"
...@@ -475,10 +475,8 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -475,10 +475,8 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
] ]
[text "Toggle Edges"] [text "Toggle Edges"]
] ]
, li' -- , li' [ button [className "btn btn-primary btn-sm"] [text "Change Level"] ]
[ button [className "btn btn-primary btn-sm"] [text "Change Level"] {- ,li [style {display : "inline-block"}]
]
,li [style {display : "inline-block"}]
[ form' [ form'
[ input [_type "file" [ input [_type "file"
, name "file" , name "file"
...@@ -488,14 +486,15 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -488,14 +486,15 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
-- , text $ show st.readyState -- , text $ show st.readyState
] ]
] ]
, li' [ input [_type "button" -}
{-, li' [ input [_type "button"
, className "btn btn-warning btn-sm" , className "btn btn-warning btn-sm"
,value "Run Demo" ,value "Run Demo"
-- , onClick \_ -> d SetGraph, disabled (st.readyState /= DONE) -- , onClick \_ -> d SetGraph, disabled (st.readyState /= DONE)
] ]
] ]
-}
, li' {-, li'
[ form' [ form'
[ div [className "col-lg-2"] [ div [className "col-lg-2"]
[ [
...@@ -507,16 +506,18 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -507,16 +506,18 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
[ span [className "glyphicon glyphicon-search"] [] [ span [className "glyphicon glyphicon-search"] []
] ]
] ]
,input [_type "text", className "form-control", placeholder "select topics"] , input [_type "text", className "form-control", placeholder "select topics"]
] ]
] ]
] ]
] ]
, li [className "col-md-2"] -}
{-, li [className "col-md-2"]
[ span [] [text "Selector"],input [_type "range", _id "myRange", value "90"] [ span [] [text "Selector"],input [_type "range", _id "myRange", value "90"]
] ]
, li [className "col-md-2"] -}
, li [className "col-md-1"]
[ span [] [text "Labels"],input [_type "range" [ span [] [text "Labels"],input [_type "range"
, _id "labelSizeRange" , _id "labelSizeRange"
, max "4" , max "4"
...@@ -526,24 +527,25 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -526,24 +527,25 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
] ]
] ]
, li [className "col-md-2"] , li [className "col-md-1"]
[ span [] [text "Nodes"],input [_type "range" [ span [] [text "Nodes"],input [_type "range"
, _id "nodeSizeRange" , _id "nodeSizeRange"
, max "4" , max "15"
, defaultValue <<< show $ settings ^. _minNodeSize , defaultValue <<< show $ settings ^. _minNodeSize
, min "1" , min "5"
, onChange \e -> d $ ChangeNodeSize (numberTargetValue e) , onChange \e -> d $ ChangeNodeSize (numberTargetValue e)
] ]
] ]
, li [className "col-md-2"] {-, li [className "col-md-2"]
[ span [] [text "Edges"],input [_type "range", _id "myRange", value "90"] [ span [] [text "Edges"],input [_type "range", _id "myRange", value "90"]
] ]
-}
, li' , li'
[ button [ className "btn btn-primary" [ button [ className "btn btn-primary"
, onClick \_ -> modCamera0 (const {x: 0.0, y: 0.0, ratio: 1.0}) , onClick \_ -> modCamera0 (const {x: 0.0, y: 0.0, ratio: 1.0})
] [text "Center"] ] [text "Center"]
] ]
, li [className "col-md-2"] , li [className "col-md-1"]
[ span [] [text "Zoom"],input [ _type "range" [ span [] [text "Zoom"],input [ _type "range"
, _id "cameraRatio" , _id "cameraRatio"
, max "100" , max "100"
...@@ -554,7 +556,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -554,7 +556,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
modCamera0 (const {ratio}) modCamera0 (const {ratio})
] ]
] ]
, li [className "col-me-2"] , li [className "col-md-1"]
[ span [] [text "MultiNode"] [ span [] [text "MultiNode"]
, input , input
[ _type "checkbox" [ _type "checkbox"
...@@ -566,15 +568,16 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -566,15 +568,16 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
, li' , li'
[ button [ className "btn btn-primary" [ button [ className "btn btn-primary"
, onClick \_ -> pauseForceAtlas2 , onClick \_ -> pauseForceAtlas2
] [text "Pause"] ] [text "Spatialization"]
] ]
, li' {-, li'
[ button [className "btn btn-primary" [ button [className "btn btn-primary"
, onClick \_ -> do , onClick \_ -> do
_ <- log "Hey there" -- $ show st.camera _ <- log "Hey there" -- $ show st.camera
pure unit pure unit
] [text "Save"] -- TODO: Implement Save! ] [text "Save"] -- TODO: Implement Save!
] ]
-}
] ]
] ]
] ]
...@@ -582,7 +585,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render'] ...@@ -582,7 +585,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
] ]
, div [className "row"] , div [className "row"]
[div [if (st.showSidePanel && st.showTree) then className "col-md-10" else if (st.showSidePanel || st.showTree) then className "col-md-10" else className "col-md-12"] [div [if (st.showSidePanel && st.showTree) then className "col-md-10" else if (st.showSidePanel || st.showTree) then className "col-md-10" else className "col-md-12"]
[ div [style {height: "90%"} [ div [style {height: "95%"}
,onMouseMove sigmaOnMouseMove] $ ,onMouseMove sigmaOnMouseMove] $
[ [
] ]
......
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