[terms] resolve flickering issue on children terms

src/Gargantext/Components/NgramsTable.purs

@@ -3,7 +3,7 @@ module Gargantext.Components.NgramsTable
   , CommonProps
   , TreeEdit
   , NgramsTreeEditProps
-  , getNgramsChildrenAff
+  , getNgramsChildrenAffRequest
   , initialTreeEdit
   , mainNgramsTable
   ) where
@@ -127,7 +127,8 @@ type PreConversionRows = Seq.Seq NgramsElement
 type TableContainerProps =
   ( addCallback       :: String -> Effect Unit
   , dispatch          :: Dispatch
-  , getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
+  , getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
+  , getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
   , ngramsSelection   :: Set NgramsTerm
   , ngramsTable       :: NgramsTable
   , path              :: T.Box PageParams
@@ -142,7 +143,6 @@ tableContainer p q = R.createElement (tableContainerCpt p) q []
 tableContainerCpt :: Record TableContainerProps -> R.Component TT.TableContainerProps
 tableContainerCpt { addCallback
                   , dispatch
-                  , getNgramsChildren
                   , ngramsSelection
                   , ngramsTable: ngramsTableCache
                   , path
@@ -506,7 +506,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
       , path
       , state
       , tabNgramType
-      , treeEdit: treeEdit@{ getNgramsChildren }
+      , treeEdit: treeEdit@{ getNgramsChildrenAff, getNgramsChildren }
       , versioned: Versioned { data: initTable }
       } _ = do
     treeEdit'@{ ngramsParent } <- T.useLive T.unequal treeEdit.box
@@ -566,6 +566,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
 
         convertRow ngramsElement =
           { row: renderNgramsItem { dispatch: performAction
+                                  , getNgramsChildrenAff
                                   , getNgramsChildren
                                   , isEditing
                                   , ngrams: ngramsElement ^. _NgramsElement <<< _ngrams
@@ -633,6 +634,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
       , container: tableContainer
         { addCallback
         , dispatch: performAction
+        , getNgramsChildrenAff
         , getNgramsChildren
         , ngramsSelection
         , ngramsTable
@@ -788,8 +790,8 @@ type MainNgramsTableProps = (
   | CommonProps
   )
 
-getNgramsChildrenAff :: Session -> NodeID -> Array ListId -> TabType -> NgramsTerm -> Aff (Array NgramsTerm)
-getNgramsChildrenAff session nodeId listIds tabType (NormNgramsTerm ngrams) = do
+getNgramsChildrenAffRequest :: Session -> NodeID -> Array ListId -> TabType -> NgramsTerm -> Aff (Array NgramsTerm)
+getNgramsChildrenAffRequest session nodeId listIds tabType (NormNgramsTerm ngrams) = do
   res :: Either RESTError ({ data :: Array { children :: Array String, ngrams :: String }}) <- get session $ Routes.GetNgrams params (Just nodeId)
   case res of
     Left err -> pure []
@@ -845,12 +847,13 @@ mainNgramsTableCpt = here.component "mainNgramsTable" cpt
 
 
 type NgramsTreeEditProps =
-  ( box               :: T.Box TreeEdit
-  , getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
+  ( box                   :: T.Box TreeEdit
+  , getNgramsChildrenAff  :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
+  , getNgramsChildren  :: Maybe (NgramsTerm -> Array NgramsTerm)
   --, ngramsLocalPatch  :: T.Box NgramsTablePatch
-  , onCancelRef       :: NgramsActionRef
-  , onNgramsClickRef  :: R.Ref (Maybe NgramsClick)
-  , onSaveRef         :: NgramsActionRef
+  , onCancelRef           :: NgramsActionRef
+  , onNgramsClickRef      :: R.Ref (Maybe NgramsClick)
+  , onSaveRef             :: NgramsActionRef
   )
 
 ngramsTreeEdit :: R2.Leaf NgramsTreeEditProps
@@ -880,6 +883,7 @@ ngramsTreeEditReal = R2.leaf ngramsTreeEditRealCpt
 ngramsTreeEditRealCpt :: R.Component NgramsTreeEditRealProps
 ngramsTreeEditRealCpt = here.component "ngramsTreeEditReal" cpt where
   cpt { box
+      , getNgramsChildrenAff
       , getNgramsChildren
       , ngramsParent'
       , onCancelRef
@@ -938,7 +942,8 @@ ngramsTreeEditRealCpt = here.component "ngramsTreeEditReal" cpt where
         { className: "card-body" }
         [
           renderNgramsTree
-          { getNgramsChildren: gnc
+          { getNgramsChildrenAff: Just gnc
+          , getNgramsChildren: Nothing
           , ngramsClick
           , ngramsDepth
           , ngramsEdit

src/Gargantext/Components/NgramsTable/Tree.purs

@@ -3,7 +3,6 @@ module Gargantext.Components.NgramsTable.Tree where
 import Gargantext.Prelude
 
 import Data.Array as A
-import Data.Either (Either(..))
 import Data.Lens ((^..), (^.), view)
 import Data.Lens.Fold (folded)
 import Data.Lens.Index (ix)
@@ -12,16 +11,16 @@ import Data.List as L
 import Data.Maybe (Maybe(..), maybe)
 import Data.Set (Set)
 import Data.Set as Set
+import Data.Tuple.Nested ((/\))
 import Effect (Effect)
-import Effect.Aff (Aff)
+import Effect.Aff (Aff, launchAff_)
+import Effect.Class (liftEffect)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Variant(..))
+import Gargantext.Components.Bootstrap.Types (Variant(..))
 import Gargantext.Components.Table as Tbl
-import Gargantext.Config.REST (logRESTError)
 import Gargantext.Core.NgramsTable.Functions (applyNgramsPatches, setTermListA, tablePatchHasNgrams)
 import Gargantext.Core.NgramsTable.Types (Action(..), NgramsClick, NgramsDepth, NgramsElement, NgramsTable, NgramsTablePatch, NgramsTerm, _NgramsElement, _NgramsRepoElement, _children, _list, _ngrams, _occurrences, ngramsTermText, replace)
-import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Prelude (Unit, bind, const, map, mempty, not, otherwise, pure, show, unit, ($), (+), (<<<), (<>), (==), (>), (||))
+import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Types as GT
 import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
@@ -38,7 +37,8 @@ here = R2.here "Gargantext.Components.NgramsTable.Tree"
 
 
 type RenderNgramsTree =
-  ( getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
+  ( getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
+  , getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
   --, ngramsChildren    :: List NgramsTerm
   , ngramsClick       :: NgramsClick
   , ngramsDepth       :: NgramsDepth
@@ -53,13 +53,20 @@ renderNgramsTree p = R.createElement renderNgramsTreeCpt p []
 renderNgramsTreeCpt :: R.Component RenderNgramsTree
 renderNgramsTreeCpt = here.component "renderNgramsTree" cpt
   where
-    cpt { getNgramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ = do
+    cpt { getNgramsChildrenAff
+        , getNgramsChildren
+        , ngramsClick
+        , ngramsDepth
+        , ngramsEdit
+        , ngramsStyle
+        } _ = do
       pure $
         H.ul
         { className: "render-ngrams-tree" }
         [ H.span { className: "tree" }
           [ H.span { className: "righthanded" }
             [ tree { getNgramsChildren
+                   , getNgramsChildrenAff
                      --, ngramsChildren
                    , ngramsClick
                    , ngramsDepth
@@ -88,28 +95,61 @@ tag tagProps =
 -}
 
 type TreeProps =
-  ( getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
-  , ngramsEdit        :: NgramsClick
+  ( getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
+  , getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
+  , ngramsEdit           :: NgramsClick
   --, ngramsTable :: NgramsTable
   | TagProps
   )
 
+-- | /!\ Multiple issues to deal in this specific component:
+-- |     - stack of patch surgery: monolitic use of the <doctable> +
+-- |       design choice of rendering ngrams children on the fly +
+-- |       setting up a facade for the `getNgramsChildren` thunk ALWAYS as an
+-- |       `Aff` even if not necessary
+-- |     - ReactJS re-rendering flaw causing flickering UI effect
+-- |     - PureScript pattern matching recursive limitation
+-- |
+-- |      ↳ workaround: employ a delegation pattern with the an input bearing
+-- |        both the `Aff` thunk and a pure one. Note that we could create a
+-- |        Typing way, due to the PureScript limitation (see above)
 tree :: Record TreeProps -> R.Element
 tree p = R.createElement treeCpt p []
 treeCpt :: R.Component TreeProps
 treeCpt = here.component "tree" cpt where
-  cpt props@{ getNgramsChildren, ngramsDepth } _ = do
-    let loader p = do
-          res <- getNgramsChildren p
-          pure $ Right res
-    let render nc = treeLoaded (Record.merge props { ngramsChildren: L.fromFoldable nc })
-
-    useLoader { errorHandler
-              , loader
-              , path: ngramsDepth.ngrams
-              , render }
-    where
-      errorHandler = logRESTError here "[tree]"
+  cpt props@{ getNgramsChildrenAff
+            , getNgramsChildren
+            , ngramsDepth
+            } _ = do
+    -- | States
+    -- |
+    defaultNgramsChildren <- R.useMemo $ const $
+      maybe
+        (mempty :: List NgramsTerm)
+        (\thunk -> L.fromFoldable $ thunk ngramsDepth.ngrams)
+        getNgramsChildren
+
+    ngramsChildren /\ ngramsChildren' <-
+      R2.useBox' (defaultNgramsChildren :: List NgramsTerm)
+
+    -- | Hooks
+    -- |
+    useFirstEffect' $ maybe
+      (R.nothing)
+      (\aff -> launchAff_ do
+        res <- aff ngramsDepth.ngrams
+        liftEffect $
+          flip T.write_ ngramsChildren' $ L.fromFoldable res
+      )
+      (getNgramsChildrenAff)
+
+    -- | Render
+    -- |
+    pure $
+
+      treeLoaded (Record.merge props { ngramsChildren })
+
+
 
 type TreeLoaded =
   ( ngramsChildren    :: List NgramsTerm
@@ -183,8 +223,9 @@ treeLoadedCpt = here.component "treeLoaded" cpt where
           H.ul {} <<< map (\ngrams -> tree ((Record.delete (Proxy :: Proxy "ngramsChildren") params) { ngramsDepth = {depth, ngrams} })) <<< L.toUnfoldable
 
 type RenderNgramsItem =
-  ( dispatch          :: Action -> Effect Unit
-  , getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
+  ( dispatch             :: Action -> Effect Unit
+  , getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
+  , getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
   , isEditing         :: T.Box Boolean
   , ngrams            :: NgramsTerm
   , ngramsElement     :: NgramsElement
@@ -235,7 +276,8 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
             else
               [
                 renderNgramsTree
-                { getNgramsChildren: getNgramsChildren'
+                { getNgramsChildrenAff: Nothing
+                , getNgramsChildren: Just $ getNgramsChildren'
                 , ngramsClick
                 , ngramsDepth
                 , ngramsEdit
@@ -261,8 +303,8 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
                                  , ngramsStagePatch: mempty
                                  , ngramsValidPatch: mempty
                                  , ngramsVersion: 0 } ngramsTable
-        getNgramsChildren' :: NgramsTerm -> Aff (Array NgramsTerm)
-        getNgramsChildren' n = pure $ A.fromFoldable $ ngramsChildren n
+        getNgramsChildren' :: NgramsTerm -> Array NgramsTerm
+        getNgramsChildren' n = A.fromFoldable $ ngramsChildren n
         ngramsChildren n = tbl ^.. ix n <<< _NgramsRepoElement <<< _children <<< folded
         ngramsClick =
           Just <<< dispatch <<< CoreAction <<< cycleTermListItem <<< view _ngrams

src/Gargantext/Components/Nodes/Annuaire/Tabs.purs

@@ -131,7 +131,8 @@ ngramsViewCpt = here.component "ngramsView" cpt where
            , tabType:        TabPairing (TabNgramType $ modeTabType mode)
            , tabNgramType:   modeTabType' mode
            , treeEdit: { box: treeEditBox
-                       , getNgramsChildren: \_ -> pure []
+                       , getNgramsChildrenAff: Nothing
+                       , getNgramsChildren: Nothing
                        , onCancelRef
                        , onNgramsClickRef
                        , onSaveRef }

src/Gargantext/Components/Nodes/Annuaire/User/Contacts/Tabs.purs

@@ -161,7 +161,8 @@ ngramsViewCpt = here.component "ngramsView" cpt
         , tabNgramType
         , tabType
         , treeEdit: { box: treeEditBox
-                    , getNgramsChildren: \_ -> pure []
+                    , getNgramsChildrenAff: Nothing
+                    , getNgramsChildren: Nothing
                     , onCancelRef
                     , onNgramsClickRef
                     , onSaveRef }

src/Gargantext/Components/Nodes/Lists/Tabs.purs

@@ -121,7 +121,8 @@ ngramsViewCpt = here.component "ngramsView" cpt where
           , tabNgramType
           , tabType
           , treeEdit: { box: treeEditBox
-                      , getNgramsChildren: NT.getNgramsChildrenAff session nodeId listIds tabType
+                      , getNgramsChildrenAff: Just $ NT.getNgramsChildrenAffRequest session nodeId listIds tabType
+                      , getNgramsChildren: Nothing
                       , onCancelRef
                       , onNgramsClickRef
                       , onSaveRef }