[tree] left/right handed implementation

src/Gargantext/Components/App.purs

 module Gargantext.Components.App where
 
-import Data.Array (fromFoldable)
+import Data.Array (fromFoldable, reverse)
 import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..), maybe')
 import Data.Tuple (fst, snd)
-import Prelude
+import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
 
+import Gargantext.Prelude
+
 import Gargantext.Components.Forest (forest)
 import Gargantext.Components.GraphExplorer (explorerLayout)
 import Gargantext.Components.Lang (LandingLang(..))
@@ -29,6 +31,7 @@ import Gargantext.Router (router)
 import Gargantext.Routes (AppRoute(..))
 import Gargantext.Sessions (Sessions, useSessions)
 import Gargantext.Sessions as Sessions
+import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
 
 -- TODO (what does this mean?)
@@ -49,10 +52,13 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
 
     treeReload <- R.useState' 0
 
+    handed <- R.useState' GT.RightHanded
+
     let backends          = fromFoldable defaultBackends
     let ff f session      = R.fragment [ f session, footer { session } ]
     let forested child    = forestLayout { child
                                          , frontends
+                                         , handed
                                          , reload: treeReload
                                          , route:  fst route
                                          , sessions: fst sessions
@@ -88,9 +94,10 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
           PGraphExplorer sid graphId ->
             withSession sid $
               \session ->
-                simpleLayout $
+                simpleLayout handed $
                   explorerLayout { frontends
                                  , graphId
+                                 , handed: fst handed
                                  , mCurrentRoute
                                  , session
                                  , sessions: (fst sessions)
@@ -100,6 +107,7 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
 type ForestLayoutProps =
   ( child     :: R.Element
   , frontends :: Frontends
+  , handed    :: R.State GT.Handed
   , reload    :: R.State Int
   , route     :: AppRoute
   , sessions  :: Sessions
@@ -112,8 +120,8 @@ forestLayout props = R.createElement forestLayoutCpt props []
 forestLayoutCpt :: R.Component ForestLayoutProps
 forestLayoutCpt = R.hooksComponent "G.C.A.forestLayout" cpt
   where
-    cpt props _ = do
-      pure $ R.fragment [ topBar {}, forestLayoutMain props ]
+    cpt props@{ handed } _ = do
+      pure $ R.fragment [ topBar { handed }, forestLayoutMain props ]
 
 forestLayoutMain :: Record ForestLayoutProps -> R.Element
 forestLayoutMain props = R.createElement forestLayoutMainCpt props []
@@ -121,16 +129,21 @@ forestLayoutMain props = R.createElement forestLayoutMainCpt props []
 forestLayoutMainCpt :: R.Component ForestLayoutProps
 forestLayoutMainCpt = R.hooksComponent "G.C.A.forestLayoutMain" cpt
   where
-    cpt { child, frontends, reload, route, sessions, showLogin } _ = do
-      pure $ R2.row [
+    cpt { child, frontends, handed, reload, route, sessions, showLogin } _ = do
+      let ordering =
+            case fst handed of
+              GT.LeftHanded  -> reverse
+              GT.RightHanded -> identity
+
+      pure $ R2.row $ ordering [
         H.div { className: "col-md-2", style: { paddingTop: "60px" } }
-            [ forest { frontends, reload, route, sessions, showLogin } ]
+            [ forest { frontends, handed: fst handed, reload, route, sessions, showLogin } ]
       , mainPage child
       ]
 
 -- Simple layout does not accommodate the tree
-simpleLayout :: R.Element -> R.Element
-simpleLayout child = R.fragment [ topBar {}, child, license]
+simpleLayout :: R.State GT.Handed -> R.Element -> R.Element
+simpleLayout handed child = R.fragment [ topBar { handed }, child, license]
 
 mainPage :: R.Element -> R.Element
 mainPage child =
@@ -138,16 +151,58 @@ mainPage child =
   [ H.div {id: "page-wrapper"}
     [ H.div {className: "container-fluid"} [ child ] ] ]
 
-topBar :: {} -> R.Element
-topBar _ =
-  H.div { id: "dafixedtop", role: "navigation"
-        , className: "navbar navbar-inverse navbar-fixed-top" }
-  [ H.div { className: "container-fluid" }
-    [ H.div { className: "navbar-inner" }
-      [ logo
-      , H.div { className: "collapse navbar-collapse" }
-        [ divDropdownLeft ] ] ] ]
-      -- SB.searchBar {session, databases: allDatabases}
+type TopBarProps = (
+  handed :: R.State GT.Handed
+  )
+
+topBar :: Record TopBarProps -> R.Element
+topBar props = R.createElement topBarCpt props []
+
+topBarCpt :: R.Component TopBarProps
+topBarCpt = R.hooksComponent "G.C.A.topBar" cpt
+  where
+    cpt { handed } _ = do
+      pure $ H.div { id: "dafixedtop"
+                   , role: "navigation"
+                   , className: "navbar navbar-inverse navbar-fixed-top" }
+        [ H.div { className: "container-fluid" }
+          [ H.div { className: "navbar-inner" }
+            [ logo
+            , H.div { className: "collapse navbar-collapse" } [
+                H.ul { className: "nav navbar-nav" } [
+                  divDropdownLeft
+                , handedChooser { handed }
+                ]
+              ]
+            ]
+          ]
+        ]
+            -- SB.searchBar {session, databases: allDatabases}
+
+type HandedChooserProps = (
+  handed :: R.State GT.Handed
+  )
+
+handedChooser :: Record HandedChooserProps -> R.Element
+handedChooser props = R.createElement handedChooserCpt props []
+
+handedChooserCpt :: R.Component HandedChooserProps
+handedChooserCpt = R.hooksComponent "G.C.A.handedChooser" cpt
+  where
+    cpt { handed } _ = do
+      pure $ H.li {} [
+        H.a {} [
+          H.span { className: handedClass handed
+                 , on: { click: onClick handed } } []
+          ]
+        ]
+
+    handedClass (GT.LeftHanded /\ _) = "fa fa-hand-o-left"
+    handedClass (GT.RightHanded /\ _) = "fa fa-hand-o-right"
+
+    onClick (_ /\ setHanded) = setHanded $ \h -> case h of
+      GT.LeftHanded  -> GT.RightHanded
+      GT.RightHanded -> GT.LeftHanded
 
 logo :: R.Element
 logo =
@@ -163,14 +218,12 @@ divDropdownLeft =
   divDropdownLeft' $
     LiNav { title : "About Gargantext"
           , href  : "#"
-          , icon  : "glyphicon glyphicon-info-sign"
+          , icon  : "fa fa-info-circle"
           , text  : "Info" }
 
 divDropdownLeft' :: LiNav -> R.Element
 divDropdownLeft' mb =
-  H.ul {className: "nav navbar-nav"}
-  [ H.ul {className: "nav navbar-nav pull-left"}
-    [ H.li {className: "dropdown"} [ menuButton mb, menuElements' ] ] ]
+  H.li {className: "dropdown"} [ menuButton mb, menuElements' ]
 
 menuButton :: LiNav -> R.Element
 menuButton (LiNav { title, href, icon, text } ) =

src/Gargantext/Components/Forest.purs

@@ -15,12 +15,13 @@ import Gargantext.Components.Forest.Tree (treeView)
 import Gargantext.Ends (Frontends)
 import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (Session(..), Sessions, OpenNodes, unSessions)
-import Gargantext.Types (Reload, Handed(..))
+import Gargantext.Types (Reload, Handed)
 import Gargantext.Utils.Reactix as R2
 
 type Props =
   ( frontends :: Frontends
-  , reload :: R.State Int
+  , handed    :: Handed
+  , reload    :: R.State Int
   , route     :: AppRoute
   , sessions  :: Sessions
   , showLogin :: R2.Setter Boolean
@@ -31,7 +32,7 @@ forest props = R.createElement forestCpt props []
 
 forestCpt :: R.Component Props
 forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
-  cpt { frontends, reload: extReload, route, sessions, showLogin } _ = do
+  cpt { frontends, handed, reload: extReload, route, sessions, showLogin } _ = do
     -- NOTE: this is a hack to reload the tree view on demand
     reload     <- R.useState' (0 :: Reload)
     openNodes  <- R2.useLocalStorageState R2.openNodesKey (Set.empty :: OpenNodes)
@@ -44,9 +45,10 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
       /\ fst extReload
       /\ fst reload
       /\ fst asyncTasks
+      /\ handed
       )
       (cpt' openNodes asyncTasks reload showLogin)
-  cpt' openNodes asyncTasks reload showLogin (frontends /\ route /\ sessions /\ _ /\ _ /\ _ /\ _) = do
+  cpt' openNodes asyncTasks reload showLogin (frontends /\ route /\ sessions /\ _ /\ _ /\ _ /\ _ /\ handed) = do
     pure $ R.fragment $ A.cons (plus showLogin) trees
     where
       trees = tree <$> unSessions sessions
@@ -54,11 +56,11 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
         treeView { root: treeId
                  , asyncTasks
                  , frontends
+                 , handed
                  , mCurrentRoute: Just route
                  , openNodes
                  , reload
                  , session: s
-                 , handed: RightHanded -- TODO enabling user to change it and save locally
                  }
 
 plus :: R2.Setter Boolean -> R.Element

src/Gargantext/Components/Forest/Tree.purs

@@ -63,20 +63,20 @@ treeView props = R.createElement treeViewCpt props []
         cpt { root
             , asyncTasks
             , frontends
+            , handed
             , mCurrentRoute
             , openNodes
             , reload
             , session
-            , handed
             } _children = pure
                         $ treeLoadView { root
                                        , asyncTasks
                                        , frontends
+                                       , handed
                                        , mCurrentRoute
                                        , openNodes
                                        , reload
                                        , session
-                                       , handed
                                        }
 
 treeLoadView :: Record Props -> R.Element
@@ -88,22 +88,22 @@ treeLoadView p = R.createElement treeLoadViewCpt p []
         cpt { root
             , asyncTasks
             , frontends
+            , handed
             , mCurrentRoute
             , openNodes
             , reload
             , session
-            , handed
             } _children = do
           let fetch _ = getNodeTree session root
           let paint loaded = loadedTreeView { asyncTasks
                                             , frontends
+                                            , handed
                                             , mCurrentRoute
                                             , openNodes
                                             , reload
                                             , session
                                             , tasks: tasksStruct root asyncTasks reload
                                             , tree: loaded
-                                            , handed
                                             }
           useLoader { root, counter: fst reload } fetch paint
 
@@ -126,26 +126,26 @@ loadedTreeView p = R.createElement loadedTreeViewCpt p []
       where
         cpt { asyncTasks
             , frontends
+            , handed
             , mCurrentRoute
             , openNodes
             , reload
             , session
             , tasks
             , tree
-            , handed
           } _ = pure $ H.ul { className: "tree " <> if handed == GT.RightHanded
                                                       then "flex-start"
                                                       else "flex-end"
                                                     }
                              [ toHtml { asyncTasks
                                       , frontends
+                                      , handed
                                       , mCurrentRoute
                                       , openNodes
                                       , reload
                                       , session
                                       , tasks
                                       , tree
-                                      , handed: GT.RightHanded -- TODO enabling user to change it
                                       }
                              ]
 
@@ -198,12 +198,12 @@ toHtml p@{ asyncTasks
                          , dispatch: pAction
                          , folderOpen
                          , frontends
+                         , handed
                          , mCurrentRoute
                          , name
                          , nodeType
                          , session
                          , tasks
-                         , handed
                          } ]
           <> childNodes ( Record.merge commonProps
                           { asyncTasks
@@ -230,9 +230,9 @@ childNodes { folderOpen: (false /\ _)           } = []
 childNodes props@{ asyncTasks, children, reload, handed } =
   map (\ctree@(NTree (LNode {id}) _) -> H.ul {} [
         toHtml (Record.merge commonProps { asyncTasks
+                                         , handed
                                          , tasks: tasksStruct id asyncTasks reload
                                          , tree: ctree
-                                         , handed
                                          }
                )]
       ) $ sorted children

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -51,7 +51,7 @@ type NodeMainSpanProps =
 
 nodeMainSpan :: Record NodeMainSpanProps
              -> R.Element
-nodeMainSpan p@{ dispatch, folderOpen, frontends, session, handed} = R.createElement el p []
+nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createElement el p []
   where
     el = R.hooksComponent "G.C.F.T.N.NodeMainSpan" cpt
     cpt props@{id, mCurrentRoute, name, nodeType, tasks: { onTaskFinish, tasks }} _ = do
@@ -61,11 +61,13 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session, handed} = R.createEle
 
       popoverRef    <- R.useRef null
 
+      let ordering =
+            case handed of
+              GT.LeftHanded  -> reverse
+              GT.RightHanded -> identity
+
       pure $ H.span (dropProps droppedFile isDragOver)
-           $ (if handed == GT.LeftHanded
-                then reverse
-                else identity)
-           $
+           $ ordering
         [ chevronIcon nodeType folderOpen
         , folderIcon nodeType folderOpen
         , if showBox then

src/Gargantext/Components/GraphExplorer.purs

@@ -42,6 +42,7 @@ type GraphId = Int
 type LayoutProps =
   ( frontends :: Frontends
   , graphId :: GraphId
+  , handed :: Types.Handed
   , mCurrentRoute :: AppRoute
   , session :: Session
   , sessions :: Sessions
@@ -86,7 +87,17 @@ explorer props = R.createElement explorerCpt props []
 explorerCpt :: R.Component Props
 explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
   where
-    cpt props@{frontends, graph, graphId, graphVersion, mCurrentRoute, mMetaData, session, sessions, showLogin, treeReload } _ = do
+    cpt props@{ frontends
+              , graph
+              , graphId
+              , graphVersion
+              , handed
+              , mCurrentRoute
+              , mMetaData
+              , session
+              , sessions
+              , showLogin
+              , treeReload } _ = do
       dataRef <- R.useRef graph
       graphRef <- R.useRef null
       graphVersionRef       <- R.useRef (fst graphVersion)
@@ -125,6 +136,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
                 [ rowControls [ Controls.controls controls ]
                 , R2.row [
                         tree { frontends
+                             , handed
                              , mCurrentRoute
                              , reload: props.treeReload
                              , sessions
@@ -165,9 +177,9 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
 
     tree :: Record TreeProps -> R.Element
     tree { show: false } = RH.div { id: "tree" } []
-    tree { frontends, mCurrentRoute: route, reload, sessions, showLogin } =
+    tree { frontends, handed, mCurrentRoute: route, reload, sessions, showLogin } =
       RH.div {className: "col-md-2 graph-tree"} [
-        forest { frontends, reload, route, sessions, showLogin }
+        forest { frontends, handed, reload, route, sessions, showLogin }
       ]
 
     mSidebar :: Maybe GET.MetaData
@@ -180,6 +192,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
 type TreeProps =
   (
     frontends :: Frontends
+  , handed :: Types.Handed
   , mCurrentRoute :: AppRoute
   , reload :: R.State Int
   , sessions :: Sessions