[graph] left/right handed handled correctly

dist/styles/Graph.css

@@ -34,6 +34,12 @@
   background-color: #fff;
   z-index: 1;
 }
+#graph-explorer .lefthanded .graph-tree {
+  left: 80%;
+}
+#graph-explorer .righthanded .graph-tree {
+  left: 0%;
+}
 #graph-explorer #graph-view {
   height: 95%;
 }
@@ -43,7 +49,6 @@
   top: 170px;
   border: 1px white solid;
   background-color: white;
-  left: 70%;
   width: 28%;
 }
 #graph-explorer #sp-container #myTab {
@@ -58,6 +63,12 @@
   display: inline;
   float: left;
 }
+#graph-explorer .lefthanded #sp-container {
+  left: 0%;
+}
+#graph-explorer .righthanded #sp-container {
+  left: 70%;
+}
 #graph-explorer #tree {
   position: absolute;
   z-index: 1;

dist/styles/Graph.sass

@@ -38,6 +38,10 @@
     @include sidePanelCommon
     background-color: #fff
     z-index: 1
+  .lefthanded .graph-tree
+    left: 80%
+  .righthanded .graph-tree
+    left: 0%
 
   #graph-view
     height: 95%
@@ -46,7 +50,6 @@
     @include sidePanelCommon
     border: 1px white solid
     background-color: white
-    left: 70%
     width: 28%
 
     #myTab
@@ -61,6 +64,10 @@
       ul
         display: inline
         float : left
+  .lefthanded #sp-container
+    left: 0%
+  .righthanded #sp-container
+    left: 70%
 
   #tree
     position: absolute

dist/styles/Tree.css

@@ -14,16 +14,8 @@
   cursor: wait;
 }
 .tree .node {
-  padding-left: 10px;
   margin-top: 1px;
 }
-.tree .node .name.clickable {
-  color: #337ab7;
-  cursor: pointer;
-}
-.tree .node .name.clickable:hover {
-  text-decoration: underline;
-}
 .tree .lefthanded ul {
   margin-right: 19px;
 }

src/Gargantext/Components/GraphExplorer.purs

@@ -45,7 +45,6 @@ type LayoutProps =
   , session :: Session
   , sessions :: Sessions
   , showLogin :: R.State Boolean
-  --, treeReload :: R.State Int
   )
 
 type Props = (
@@ -72,7 +71,7 @@ explorerLayoutView :: R.State Int -> Record LayoutProps -> R.Element
 explorerLayoutView graphVersion p = R.createElement el p []
   where
     el = R.hooksComponent "G.C.GE.explorerLayoutView" cpt
-    cpt props@{graphId, session} _ = do
+    cpt props@{ graphId, session } _ = do
       useLoader graphId (getNodes session graphVersion) handler
       where
         handler loaded =
@@ -99,7 +98,6 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
               , session
               , sessions
               , showLogin
-              --, treeReload
               } _ = do
 
       let startForceAtlas = maybe true (\(GET.MetaData { startForceAtlas }) -> startForceAtlas) mMetaData
@@ -146,13 +144,13 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
                   , col [ spaces [ Toggle.sidebarToggleButton controls.showSidePanel ]]
                   ], R2.row
             [ outer
-              [ inner
+              [ inner handed
                 [ rowControls [ Controls.controls controls ]
                 , R2.row $ mainLayout handed $
                     tree { frontends
                           , handed
                           , mCurrentRoute
-                          , reload: props.treeReload
+                          , reload: treeReload
                           , sessions
                           , show: fst controls.showTree
                           , showLogin: snd showLogin }
@@ -187,7 +185,11 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
     mainLayout Types.LeftHanded (tree' /\ gc /\ gv /\ sdb) = [sdb, gc, gv, tree']
 
     outer = RH.div { className: "col-md-12" }
-    inner = RH.div { className: "container-fluid", style: { paddingTop: "90px" } }
+    inner h = RH.div { className: "container-fluid " <> hClass, style: { paddingTop: "90px" } }
+      where
+        hClass = case h of
+          Types.LeftHanded -> "lefthanded"
+          Types.RightHanded -> "righthanded"
     rowToggle  = RH.div { id: "toggle-container" }
     rowControls = RH.div { id: "controls-container" }
     col       = RH.div { className: "col-md-4" }