[Graph] working on moving controls out of the way

dist/styles/Graph.css

@@ -26,5 +26,8 @@
   display: inline;
   float: left;
 }
+#graph-explorer #tree {
+  position: absolute;
+}
 
 /*# sourceMappingURL=Graph.css.map */

dist/styles/Graph.sass

@@ -26,3 +26,6 @@
       ul
         display: inline
         float : left
+
+  #tree
+    position: absolute

src/Gargantext/Components/Graph.purs

@@ -169,8 +169,8 @@ sigmaSettings =
   , labelSizeRatio: 2.0               -- label size in ratio of node size
   , labelThreshold: 2.0               -- min node cam size to start showing label
   , maxEdgeSize: 1.0
-  , maxNodeSize: 30.0
-  , minEdgeSize: 1.0              -- in fact used in tina as edge size
+  , maxNodeSize: 10.0
+  , minEdgeSize: 0.5              -- in fact used in tina as edge size
   , minNodeSize: 5.0
   , mouseEnabled: true
   , mouseZoomDuration: 150.0

src/Gargantext/Components/GraphExplorer.purs

@@ -14,6 +14,7 @@ import Thermite (Render, Spec, simpleSpec)
 import Reactix as R
 import Reactix.DOM.HTML as RH
 
+import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Sigma (Sigma)
 import Gargantext.Hooks.Sigmax.Types as Sigmax
 import Gargantext.Components.GraphExplorer.Controls as Controls
@@ -87,7 +88,7 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
                   ]
                 , row [ Controls.controls controls ]
                 , row [ tree {mCurrentRoute, treeId} controls
-                      , mGraph controls {graphId, graph}
+                      , mGraph controls.sigmaRef {graphId, graph}
                       , Sidebar.sidebar controls ]
                 , row [ ]
                 ]
@@ -102,39 +103,37 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
     pullLeft = RH.div { className: "pull-left" }
     pullRight = RH.div { className: "pull-right" }
 
-    tree {treeId: Nothing} _ = RH.div {} []
-    tree _ {showTree: false /\ _} = RH.div {} []
+    tree {treeId: Nothing} _ = RH.div { id: "tree" } []
+    tree _ {showTree: false /\ _} = RH.div { id: "tree" } []
     tree {mCurrentRoute, treeId: Just treeId} _ =
-      RH.div { className: "col-md-2" } [ Tree.elTreeview {mCurrentRoute, root: treeId} ]
+      RH.div { id: "tree", className: "col-md-2" } [
+        Tree.elTreeview {mCurrentRoute, root: treeId}
+      ]
 
-    mGraph :: Record Controls.Controls -> {graphId :: GraphId, graph :: Maybe Graph.Graph} -> R.Element
+    mGraph :: R.Ref (Maybe Sigmax.Sigma) -> {graphId :: GraphId, graph :: Maybe Graph.Graph} -> R.Element
     mGraph _ {graph: Nothing} = RH.div {} []
-    mGraph controls {graphId, graph: Just graph} = graphView controls {graphId, graph}
+    mGraph sigmaRef {graphId, graph: Just graph} = graphView sigmaRef {graphId, graph}
 
 type GraphProps = (
     graphId :: GraphId
   , graph :: Graph.Graph
 )
 
-graphView :: Record Controls.Controls -> Record GraphProps -> R.Element
-graphView controls props = R.createElement el props []
+graphView :: R.Ref (Maybe Sigmax.Sigma) -> Record GraphProps -> R.Element
+graphView sigmaRef props = R.createElement (R.memo el (==)) props []
   where
     el = R.hooksComponent "GraphView" cpt
     cpt {graphId, graph} _children = do
       pure $
-        RH.div { className: colSize controls }
+        RH.div { id: "graph-view", className: "col-md-12" }
         [
           Graph.graph {
-               forceAtlas2Settings: Graph.forceAtlas2Settings
+             forceAtlas2Settings: Graph.forceAtlas2Settings
              , graph
-             , sigmaSettings: Controls.controlsToSigmaSettings controls
-             , sigmaRef: controls.sigmaRef
+             , sigmaSettings: Graph.sigmaSettings
+             , sigmaRef: sigmaRef
              }
         ]
-    -- TODO: this doesn't work? seems to always render "col-md-9"
-    colSize {showSidePanel: (true /\ _), showTree: (true /\ _)} = "col-md-8"
-    colSize {showSidePanel: (false /\ _), showTree: (false /\ _)} = "col-md-12"
-    colSize _ = "col-md-10"
 
 convert :: GET.GraphData -> Graph.Graph
 convert (GET.GraphData r) = Sigmax.Graph {nodes, edges}

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -51,7 +51,7 @@ type LocalControls =
 initialLocalControls :: R.Hooks (Record LocalControls)
 initialLocalControls = do
   edgeSize <- R.useState' $ Range.Closed { min: 0.5, max: 1.0 }
-  labelSize <- R.useState' 3.0
+  labelSize <- R.useState' 14.0
   nodeSize <- R.useState' $ Range.Closed { min: 5.0, max: 10.0 }
   pauseForceAtlas <- R.useState' true
   showEdges <- R.useState' true

src/Gargantext/Hooks/Sigmax/Types.purs

 module Gargantext.Hooks.Sigmax.Types where
 
+import Gargantext.Prelude
+
+import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe)
 import Data.Sequence as Seq
 import Data.Sequence (Seq)
@@ -8,5 +11,11 @@ import DOM.Simple.Types (Element)
 
 newtype Graph n e = Graph { nodes :: Seq {|n}, edges :: Seq {|e} }
 
+derive instance eqGraph :: Eq Graph
+
+--instance eqGraph :: Eq Graph where
+--  eq (Graph {nodes: n1, edges: e1}) (Graph {nodes: n2, edges: e2}) = n1 == n2 && e1 == e2
+
+
 type Renderer = { "type" :: String, container :: Element }