Merge remote-tracking branch 'origin/670-dev-first-tree-lighter-calls' into dev

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs

@@ -140,6 +140,12 @@ component = R.memo' $ R.hooksComponent componentName cpt where
       then showModal window selector modalEvents
       else hideModal window selector
 
+    -- | When box is true, show the modal immediately
+    R.useEffectOnce' $ do
+      if isVisible
+      then showModal window selector modalEvents
+      else hideModal window selector
+
     -- | Behaviors
     -- |
     let

src/Gargantext/Components/Forest/Tree.purs

@@ -90,9 +90,13 @@ type NSCommon =
   , handed    :: Handed
   , session   :: Session  )
 
--- The annoying 'render' here is busting a cycle in the low tech
--- way. This function is only called by functions in this module, so
--- we just have to careful in what we pass.
+-- | The annoying 'render' here is busting a cycle in the low tech
+--   way. This function is only called by functions in this module, so
+--   we just have to careful in what we pass.
+--   Without the 'render' function though, we get a 'tree' cpt that
+--   depends on a 'renderTreeChildren' component, which itself depends
+--   on 'tree'. This results in PS 'CycleInDeclaration' compilation
+--   error.
 type ChildLoaderProps =
   ( id     :: ID
   , render :: R2.Leaf TreeProps
@@ -109,7 +113,6 @@ type PerformActionProps =
 -- | Loads and renders the tree starting at the given root node id.
 treeLoader :: R2.Leaf ( key :: String | LoaderProps )
 treeLoader = R2.leaf treeLoaderCpt
-
 treeLoaderCpt :: R.Component ( key :: String | LoaderProps )
 treeLoaderCpt = R2.hereComponent here "treeLoader" hCpt where
 -- treeLoaderCpt :: R.Memo LoaderProps
@@ -155,7 +158,6 @@ getNodeTreeFirstLevel session nodeId = get session $ GR.TreeFirstLevel (Just nod
 
 tree :: R2.Leaf TreeProps
 tree props = R.createElement treeCpt props []
-
 treeCpt :: R.Component TreeProps
 treeCpt = here.component "tree" cpt where
   cpt p@{ frontends
@@ -255,8 +257,42 @@ renderTreeChildrenCpt = here.component "renderTreeChildren" cpt where
 
     where
       nodeProps = RecordE.pick p :: Record NodeProps
-      renderChild (NTree (LNode {id: cId}) _) = childLoader props [] where
-        props = Record.merge nodeProps { id: cId, render, root }
+      -- | | If a child doesn't have children, avoid normal
+      -- |   'childLoader' which queries API for first-level data (there
+      -- |   is nothing new here) and render the child immediately.
+      renderChild tree'@(NTree (LNode {id: cId}) []) = childDummyLoader renderProps []
+        where
+          renderProps = Record.merge nodeProps { id: cId, render, root, tree: tree' } :: Record ChildDummyLoaderProps
+      renderChild (NTree (LNode {id: cId}) _children) = childLoader renderProps []
+        where
+          renderProps = Record.merge nodeProps { id: cId, render, root } :: Record ChildLoaderProps
+
+type ChildDummyLoaderProps =
+  ( tree   :: FTree
+  | ChildLoaderProps
+  )
+
+
+-- | A "dummy" loader: this is because for nodes without children, we
+-- | don't want to make the API call.
+childDummyLoader :: R2.Component ChildDummyLoaderProps
+childDummyLoader = R.createElement childDummyLoaderCpt
+childDummyLoaderCpt :: R.Component ChildDummyLoaderProps
+childDummyLoaderCpt = R2.hereComponent here "childDummyLoader" hCpt where
+  hCpt hp p@{ reloadTree
+            , render
+            , root
+            , tree: tree' } _ = do
+    { reloadRoot } <- Store.use
+    reload <- T.useBox T2.newReload
+
+    pure $ paint reload tree'
+
+    where
+      paint reload tree' = render (Record.merge base extra) where
+        base = nodeProps { reload = reload }
+        extra = { root, tree: tree' }
+        nodeProps = RecordE.pick p :: Record NodeProps
 
 
 childLoader :: R2.Component ChildLoaderProps

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

@@ -31,6 +31,7 @@ import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
 import Gargantext.Context.Progress (asyncContext, asyncProgress)
 import Gargantext.Ends (Frontends, url)
 import Gargantext.Hooks.Loader (useLoader)
+import Gargantext.Hooks.UpdateEffect (useUpdateEffect1')
 import Gargantext.Hooks.Version (Version, useVersion)
 import Gargantext.Routes as Routes
 import Gargantext.Sessions (Session, sessionId)
@@ -100,6 +101,19 @@ nodeSpanCpt = here.component "nodeSpan" cpt
 
       folderOpen' <- R2.useLive' folderOpen
 
+      isBoxVisible' <- R2.useLive' isBoxVisible
+      isBoxVisiblePersist <- T.useBox isBoxVisible'
+      isBoxVisiblePersist' <- R2.useLive' isBoxVisiblePersist
+
+      -- | Modal not visible initially, but visible after first user
+      -- | click. This is to avoid modal loading initially
+      -- | (optimization for large trees), but persist it after user
+      -- | opens it.
+      useUpdateEffect1' isBoxVisible'
+        if isBoxVisible'
+           then T.write_ true isBoxVisiblePersist
+           else pure unit
+
       -- tasks' <- T.read tasks
 
     -- Computed
@@ -221,17 +235,17 @@ nodeSpanCpt = here.component "nodeSpan" cpt
 
         -- // Abstract informations //
 
-            nodeTooltip
-            { id
-            , nodeType
-            , name
-            }
-            [
-              case mVersion of
-                Nothing -> mempty
-                Just v  -> versionComparator v
-            ]
-          ,
+          --   nodeTooltip
+          --   { id
+          --   , nodeType
+          --   , name
+          --   }
+          --   [
+          --     case mVersion of
+          --       Nothing -> mempty
+          --       Just v  -> versionComparator v
+          --   ]
+          -- ,
             R.createPortal
             [
               fileTypeView
@@ -340,24 +354,25 @@ nodeSpanCpt = here.component "nodeSpan" cpt
 
           -- // Modals //
 
-            B.baseModal
-            { isVisibleBox: isBoxVisible
-            , noBody: true
-            , noHeader: true
-            , modalClassName: "forest-tree-node-modal"
-            }
-            [
-              nodePopupView
-              { boxes
-              , closeCallback: \_ -> T.write_ false isBoxVisible
-              , dispatch
-              , id
-              , name
-              , nodeType
-              , session
+            R2.when isBoxVisiblePersist' (
+              B.baseModal
+              { isVisibleBox: isBoxVisible
+              , noBody: true
+              , noHeader: true
+              , modalClassName: "forest-tree-node-modal"
               }
-            ]
-          ]
+              [
+                nodePopupView
+                { boxes
+                , closeCallback: \_ -> T.write_ false isBoxVisible
+                , dispatch
+                , id
+                , name
+                , nodeType
+                , session
+                }
+              ]
+            )
         ,
         -- // Mainleaf indicator of selected node //
         --
@@ -372,6 +387,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
             { className: "mainleaf-selection-indicator" }
             []
         ]
+      ]
 
 
 ---------------------------------------------------------