[forest] rewrite forest layout so that it won't rerender

src/Gargantext/Components/Forest.purs

@@ -76,7 +76,7 @@ forestCpt = here.component "forest" cpt where
     handed'       <- T.useLive T.unequal handed
     reloadForest' <- T.useLive T.unequal reloadForest
     -- reloadRoot'   <- T.useLive T.unequal reloadRoot
-    route'        <- T.useLive T.unequal route
+    -- route'        <- T.useLive T.unequal route
     forestOpen'   <- T.useLive T.unequal forestOpen
     sessions'     <- T.useLive T.unequal sessions
 
@@ -85,7 +85,7 @@ forestCpt = here.component "forest" cpt where
     -- R.useEffect' $ do
       -- R.setRef tasks $ Just tasks'
     R2.useCache
-      ( frontends /\ route' /\ sessions' /\ handed' /\ forestOpen' /\ reloadForest' )
+      ( frontends /\ sessions' /\ handed' /\ forestOpen' /\ reloadForest' )
       (cp handed' sessions')
         where
           common = RX.pick props :: Record Common

src/Gargantext/Components/Nodes/Lists.purs

@@ -30,65 +30,22 @@ import Toestand as T
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Lists"
 
-type ListsWithForest =
-  ( forestProps :: Record Forest.Props
-  , listsProps  :: Record CommonProps
-  )
-
-type ListsWithForestSessionContext =
-  ( forestProps :: Record Forest.Props
-  , listsProps  :: Record CommonPropsSessionContext )
-
-listsWithForestSessionContext :: R2.Component ListsWithForestSessionContext
-listsWithForestSessionContext = R.createElement listsWithForestSessionContextCpt
+listsWithSessionContext :: R2.Component CommonPropsSessionContext
+listsWithSessionContext = R.createElement listsWithSessionContextCpt
 
-listsWithForestSessionContextCpt :: R.Component ListsWithForestSessionContext
-listsWithForestSessionContextCpt = here.component "listsWithForestSessionContext" cpt where
-  cpt { forestProps, listsProps: listsProps@{ session } } _ = do
+listsWithSessionContextCpt :: R.Component CommonPropsSessionContext
+listsWithSessionContextCpt = here.component "listsWithSessionContext" cpt where
+  cpt props@{ session } _ = do
       session' <- R.useContext session
-
-      pure $ listsWithForest
-        { forestProps
-        , listsProps: Record.merge { session: session' } $ (REX.pick listsProps :: Record CommonPropsNoSession)
-        } []
-
-listsWithForest :: R2.Component ListsWithForest
-listsWithForest = R.createElement listsWithForestCpt
-
-listsWithForestCpt :: R.Component ListsWithForest
-listsWithForestCpt = here.component "listsWithForest" cpt
-  where
-    cpt { forestProps
-        , listsProps: listsProps@{ session } } _ = do
       controls <- initialControls
 
-      pure $ Forest.forestLayoutWithTopBar forestProps
-           [ topBar { controls } []
-           , listsLayout (Record.merge listsProps { controls }) []
-
-           -- TODO remove className "side-panel" is preview is not triggered
-           -- , H.div { className: "" }
-           , H.div { className: "side-panel" }
-                   [ sidePanel { controls, session } []]
+      pure $ R.fragment [
+        -- topBar { controls } []
+        listsLayout (Record.merge { controls, session: session' } props) []
+      , H.div { className: "side-panel" } [ sidePanel { controls, session: session' } [] ]
       ]
 --------------------------------------------------------
 
-type TopBarProps = ( controls :: Record ListsLayoutControls )
-
-topBar :: R2.Component TopBarProps
-topBar = R.createElement topBarCpt
-
-topBarCpt :: R.Component TopBarProps
-topBarCpt = here.component "topBar" cpt where
-  cpt { controls } _ = do
-    -- empty for now because the button is moved to the side panel
-    pure $ H.div {} []
-      -- H.ul { className: "nav navbar-nav" } [
-      --   H.li {} [
-      --      sidePanelToggleButton { state: controls.showSidePanel } []
-      --      ]
-      --   ]  -- head (goes to top bar)
-
 type CommonPropsNoSession =
   ( nodeId        :: Int
   , reloadForest  :: T.Box T2.Reload
@@ -110,9 +67,9 @@ listsLayout = R.createElement listsLayoutCpt
 
 listsLayoutCpt :: R.Component Props
 listsLayoutCpt = here.component "listsLayout" cpt where
-  cpt path@{ nodeId, session } _ = do
+  cpt props@{ nodeId, session } _ = do
     let sid = sessionId session
-    pure $ listsLayoutWithKey $ Record.merge path { key: show sid <> "-" <> show nodeId }
+    pure $ listsLayoutWithKey $ Record.merge props { key: show sid <> "-" <> show nodeId }
 
 type KeyProps = ( key :: String | Props )
 

src/Gargantext/Components/Nodes/Texts.purs

@@ -42,44 +42,21 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Texts"
 
 --------------------------------------------------------
-type TextsWithForest = (
-    forestProps :: Record Forest.Props
-  , textsProps  :: Record CommonProps
-  )
-
-type TextsWithForestSessionContext =
-  ( forestProps :: Record Forest.Props
-  , textsProps  :: Record CommonPropsSessionContext )
-
-textsWithForestSessionContext :: R2.Component TextsWithForestSessionContext
-textsWithForestSessionContext = R.createElement textsWithForestSessionContextCpt
+textsWithSessionContext :: R2.Component CommonPropsSessionContext
+textsWithSessionContext = R.createElement textsWithSessionContextCpt
 
-textsWithForestSessionContextCpt :: R.Component TextsWithForestSessionContext
-textsWithForestSessionContextCpt = here.component "textsWithForestSessionContext" cpt
+textsWithSessionContextCpt :: R.Component CommonPropsSessionContext
+textsWithSessionContextCpt = here.component "textsWithSessionContext" cpt
   where
-    cpt { forestProps, textsProps: textsProps@{ session } } _ = do
+    cpt props@{ session } _ = do
       session' <- R.useContext session
-
-      pure $ textsWithForest
-        { forestProps
-        , textsProps: Record.merge { session: session' } $ (REX.pick textsProps :: Record CommonPropsNoSession)
-        } []
-
-textsWithForest :: R2.Component TextsWithForest
-textsWithForest = R.createElement textsWithForestCpt
-
-textsWithForestCpt :: R.Component TextsWithForest
-textsWithForestCpt = here.component "textsWithForest" cpt
-  where
-    cpt { forestProps, textsProps: textProps@{ session } } _ = do
       controls <- initialControls
-      pure $ Forest.forestLayoutWithTopBar forestProps
-        [ topBar { controls } []
-        , textsLayout (Record.merge textProps { controls }) []
-        -- TODO remove className "side-panel" is preview is not triggered
-        -- , H.div { className: "" }
-        , H.div { className: "side-panel" }
-          [ sidePanel { controls, session } [] ]]
+
+      pure $ R.fragment
+        [ -- topBar { controls } []
+          textsLayout (Record.merge { controls, session: session' } props) []
+        , H.div { className: "side-panel" } [ sidePanel { controls, session: session' } [] ]
+        ]
 
 
 type TopBarProps = ( controls :: Record TextsLayoutControls )

src/Gargantext/Components/Router.purs

@@ -14,7 +14,7 @@ import Gargantext.Prelude
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Footer (footer)
-import Gargantext.Components.Forest (forestLayout)
+import Gargantext.Components.Forest as Forest
 import Gargantext.Components.GraphExplorer (explorerLayoutLoader)
 import Gargantext.Components.Lang (LandingLang(LL_EN))
 import Gargantext.Components.Login (login)
@@ -31,6 +31,7 @@ import Gargantext.Components.Nodes.Lists as Lists
 import Gargantext.Components.Nodes.Texts as Texts
 import Gargantext.Components.SessionLoader (sessionWrapper)
 import Gargantext.Components.SimpleLayout (simpleLayout)
+import Gargantext.Components.TopBar as TopBar
 import Gargantext.Config (defaultFrontends, defaultBackends)
 import Gargantext.Ends (Backend)
 import Gargantext.Routes (AppRoute)
@@ -54,6 +55,27 @@ router props = R.createElement routerCpt props []
 
 routerCpt :: R.Component Props
 routerCpt = here.component "router" cpt where
+  cpt props@{ boxes } _ = do
+    pure $ R.fragment
+      [ loginModal { boxes } []
+      , TopBar.topBar { handed: boxes.handed } []
+      , Forest.forestLayoutMain { backend: boxes.backend
+                                , forestOpen: boxes.forestOpen
+                                , frontends: defaultFrontends
+                                , handed: boxes.handed
+                                , reloadForest: boxes.reloadForest
+                                , reloadRoot: boxes.reloadRoot
+                                , route: boxes.route
+                                , sessions: boxes.sessions
+                                , showLogin: boxes.showLogin
+                                , tasks: boxes.tasks } [ renderRoute props [] ]
+      ]
+
+renderRoute :: R2.Component Props
+renderRoute = R.createElement renderRouteCpt
+
+renderRouteCpt :: R.Component Props
+renderRouteCpt = here.component "renderRoute" cpt where
   cpt props@{ boxes } _ = do
     let session = R.createContext (unsafeCoerce {})
     let sessionProps sId = Record.merge { session, sessionId: sId } props
@@ -62,8 +84,7 @@ routerCpt = here.component "router" cpt where
     route' <- T.useLive T.unequal boxes.route
 
     pure $ R.fragment
-      [ loginModal { boxes } []
-      , case route' of
+      [ case route' of
         GR.Annuaire s n           -> annuaire (sessionNodeProps s n) []
         GR.ContactPage s a n      -> contact (Record.merge { annuaireId: a } $ sessionNodeProps s n) []
         GR.Corpus s n             -> corpus (sessionNodeProps s n) []
@@ -118,7 +139,7 @@ forestedCpt = here.component "forested" cpt
                  , sessions
                  , showLogin
                  , tasks } } children = do
-      pure $ forestLayout { backend
+      pure $ Forest.forestLayoutMain { backend
                                      , forestOpen
                                      , frontends: defaultFrontends
                                      , handed
@@ -145,8 +166,7 @@ annuaireCpt :: R.Component SessionNodeProps
 annuaireCpt = here.component "annuaire" cpt where
   cpt props@{ boxes, nodeId, session, sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
-    pure $ authed sessionProps $
-      forested { boxes } [ annuaireLayout { frontends, nodeId, session } ]
+    pure $ authed sessionProps $ annuaireLayout { frontends, nodeId, session }
       where frontends = defaultFrontends
 
 corpus :: R2.Component SessionNodeProps
@@ -156,8 +176,7 @@ corpusCpt :: R.Component SessionNodeProps
 corpusCpt = here.component "corpus" cpt where
   cpt props@{ boxes, nodeId, session } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
-    pure $ authed sessionProps $
-      forested { boxes } [ corpusLayout { nodeId, session } ]
+    pure $ authed sessionProps $ corpusLayout { nodeId, session }
 
 type CorpusDocumentProps =
   ( corpusId :: CorpusId
@@ -174,8 +193,7 @@ corpusDocumentCpt = here.component "corpusDocument" cpt
     cpt props@{ boxes, corpusId: corpusId', listId, nodeId, session, sessionId } _ = do
       let sessionProps = RE.pick props :: Record SessionProps
       pure $ authed sessionProps $
-        forested { boxes }
-        [ documentMainLayout { mCorpusId: corpusId, listId: listId, nodeId, session } [] ]
+        documentMainLayout { mCorpusId: corpusId, listId: listId, nodeId, session } []
         where corpusId = Just corpusId'
 
 dashboard :: R2.Component SessionNodeProps
@@ -186,8 +204,7 @@ dashboardCpt = here.component "dashboard" cpt
   where
     cpt props@{ boxes, nodeId, session } _ = do
       let sessionProps = RE.pick props :: Record SessionProps
-      pure $ authed sessionProps $
-        forested { boxes } [ dashboardLayout { nodeId, session } [] ]
+      pure $ authed sessionProps $ dashboardLayout { nodeId, session } []
 
 type DocumentProps = ( listId :: ListId | SessionNodeProps )
 
@@ -199,8 +216,7 @@ documentCpt = here.component "document" cpt where
   cpt props@{ listId, nodeId, session, sessionId, boxes } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
-      forested { boxes }
-      [ documentMainLayout { listId, nodeId, mCorpusId, session } [] ]
+      documentMainLayout { listId, nodeId, mCorpusId, session } []
       where mCorpusId = Nothing
 
 home :: R2.Component Props
@@ -209,7 +225,7 @@ home = R.createElement homeCpt
 homeCpt :: R.Component Props
 homeCpt = here.component "home" cpt where
   cpt props@{ boxes: boxes@{ sessions, showLogin } } _ = do
-    pure $ forested { boxes } [ homeLayout  { lang: LL_EN, sessions, showLogin } ]
+    pure $ homeLayout  { lang: LL_EN, sessions, showLogin }
 
 lists :: R2.Component SessionNodeProps
 lists = R.createElement listsCpt
@@ -230,24 +246,12 @@ listsCpt = here.component "lists" cpt where
             , sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
-      Lists.listsWithForestSessionContext
-      { forestProps: { backend
-                     , forestOpen
-                     , frontends
-                     , handed
-                     , reloadForest
-                     , reloadRoot
-                     , route
-                     , sessions
-                     , showLogin
-                     , tasks }
-      , listsProps: { nodeId
+      Lists.listsWithSessionContext { nodeId
                                     , reloadForest
                                     , reloadRoot
                                     , session
                                     , sessionUpdate: \_ -> pure unit
-                    , tasks }
-      } []
+                                    , tasks } []
       where frontends = defaultFrontends
 
 login' :: Boxes -> R.Element
@@ -287,7 +291,7 @@ routeFileCpt = here.component "routeFile" cpt where
   cpt props@{ nodeId, session, sessionId, boxes } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
-      forested { boxes } [ fileLayout { nodeId, session } ]
+      fileLayout { nodeId, session }
 
 type RouteFrameProps = (
   nodeType :: NodeType
@@ -302,7 +306,7 @@ routeFrameCpt = here.component "routeFrame" cpt where
   cpt props@{ nodeId, nodeType, session, sessionId, boxes } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
-      forested { boxes } [ frameLayout { nodeId, nodeType, session } ]
+      frameLayout { nodeId, nodeType, session }
 
 team :: R2.Component SessionNodeProps
 team = R.createElement teamCpt
@@ -312,7 +316,7 @@ teamCpt = here.component "team" cpt where
   cpt props@{ nodeId, session, sessionId, boxes } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
-      forested { boxes } [ corpusLayout { nodeId, session } ]
+      corpusLayout { nodeId, session }
 
 texts :: R2.Component SessionNodeProps
 texts = R.createElement textsCpt
@@ -334,21 +338,9 @@ textsCpt = here.component "texts" cpt
               , sessionId } _ = do
       let sessionProps = RE.pick props :: Record SessionProps
       pure $ authed sessionProps $
-        Texts.textsWithForestSessionContext
-        { forestProps: { backend
-                       , forestOpen
-                       , frontends
-                       , handed
-                       , route
-                       , reloadForest
-                       , reloadRoot
-                       , sessions
-                       , showLogin
-                       , tasks }
-        , textsProps: { frontends
+        Texts.textsWithSessionContext { frontends
                                       , nodeId
-                      , session }
-        } []
+                                      , session } []
         where
           frontends = defaultFrontends
 
@@ -363,13 +355,12 @@ userCpt = here.component "user" cpt where
             , sessionId } _ = do
     let sessionProps = RE.pick props :: Record SessionProps
     pure $ authed sessionProps $
-      forested { boxes }
-        [ userLayoutSessionContext { frontends
+      userLayoutSessionContext { frontends
                                , nodeId
                                , reloadForest
                                , reloadRoot
                                , session
-                                   , tasks } [] ]
+                               , tasks } []
       where frontends = defaultFrontends
 
 type ContactProps = ( annuaireId :: NodeID | SessionNodeProps )
@@ -384,6 +375,5 @@ contactCpt = here.component "contact" cpt where
     let sessionProps = RE.pick props :: Record SessionProps
     let forestedProps = RE.pick props :: Record Props
     pure $ authed sessionProps $
-      forested forestedProps
-      [ contactLayout { annuaireId, frontends, nodeId, reloadForest, reloadRoot, session, tasks } [] ]
+      contactLayout { annuaireId, frontends, nodeId, reloadForest, reloadRoot, session, tasks } []
       where frontends = defaultFrontends