[ngramsTable] WIP

src/Gargantext/Components/NgramsTable.purs

@@ -2,6 +2,7 @@ module Gargantext.Components.NgramsTable
   ( MainNgramsTableProps
   , CommonProps
   , TreeEdit
+  , NgramsTreeEditProps
   , initialTreeEdit
   , mainNgramsTable
   ) where
@@ -9,6 +10,7 @@ module Gargantext.Components.NgramsTable
 import Gargantext.Prelude
 
 import Data.Array as A
+import Data.Either (Either(..))
 import Data.FunctorWithIndex (mapWithIndex)
 import Data.Lens (to, view, (%~), (.~), (^.), (^?), (^..))
 import Data.Lens.At (at)
@@ -33,7 +35,7 @@ import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.NgramsTable.Components as NTC
-import Gargantext.Components.NgramsTable.Core (Action(..), CoreAction(..), CoreState, Dispatch, NgramsClick, NgramsDepth, NgramsElement(..), NgramsPatch(..), NgramsTable, NgramsTerm, PageParams, PatchMap(..), Versioned(..), VersionedNgramsTable, VersionedWithCountNgramsTable, _NgramsElement, _NgramsRepoElement, _NgramsTable, _children, _list, _ngrams, _ngrams_repo_elements, _ngrams_scores, _occurrences, _root, addNewNgramA, applyNgramsPatches, applyPatchSet, chartsAfterSync, commitPatch, convOrderBy, coreDispatch, filterTermSize, fromNgramsPatches, ngramsRepoElementToNgramsElement, ngramsTermText, normNgram, patchSetFromMap, replace, setTermListA, singletonNgramsTablePatch, syncResetButtons, toVersioned)
+import Gargantext.Components.NgramsTable.Core (Action(..), CoreAction(..), CoreState, Dispatch, NgramsActionRef, NgramsClick, NgramsDepth, NgramsElement(..), NgramsPatch(..), NgramsTable, NgramsTerm, PageParams, PatchMap(..), Versioned(..), VersionedNgramsTable, VersionedWithCountNgramsTable, _NgramsElement, _NgramsRepoElement, _NgramsTable, _children, _list, _ngrams, _ngrams_repo_elements, _ngrams_scores, _occurrences, _root, addNewNgramA, applyNgramsPatches, applyPatchSet, chartsAfterSync, commitPatch, convOrderBy, coreDispatch, filterTermSize, fromNgramsPatches, ngramsRepoElementToNgramsElement, ngramsTermText, normNgram, patchSetFromMap, replace, setTermListA, singletonNgramsTablePatch, syncResetButtons, toVersioned)
 import Gargantext.Components.NgramsTable.Loader (useLoaderWithCacheAPI)
 import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Components.Table as TT
@@ -42,7 +44,7 @@ import Gargantext.Config.REST (AffRESTError, logRESTError)
 import Gargantext.Hooks.Loader (useLoaderBox)
 import Gargantext.Routes (SessionRoute(..)) as R
 import Gargantext.Sessions (Session, get)
-import Gargantext.Types (CTabNgramType, OrderBy(..), SearchQuery, TabType, TermList(..), TermSize, termLists, termSizes)
+import Gargantext.Types (CTabNgramType, NodeID, OrderBy(..), SearchQuery, TabType, TermList(..), TermSize, termLists, termSizes)
 import Gargantext.Utils (queryExactMatchesLabel, queryMatchesLabel, toggleSet, sortWith)
 import Gargantext.Utils.CacheAPI as GUC
 import Gargantext.Utils.Reactix as R2
@@ -50,6 +52,7 @@ import Gargantext.Utils.Seq as Seq
 import Gargantext.Utils.Toestand as T2
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Record as Record
 import Toestand as T
 import Unsafe.Coerce (unsafeCoerce)
 
@@ -110,30 +113,32 @@ setTermListSetA ngramsTable ns new_list =
 type PreConversionRows = Seq.Seq NgramsElement
 
 type TableContainerProps =
-  ( dispatch          :: Dispatch
+  ( addCallback       :: String -> Effect Unit
+  , dispatch          :: Dispatch
+  , getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
   , ngramsSelection   :: Set NgramsTerm
   , ngramsTable       :: NgramsTable
-  , queryExactMatches :: Boolean
   , path              :: T.Box PageParams
+  , queryExactMatches :: Boolean
+  , syncResetButton   :: Array R.Element
   , tabNgramType      :: CTabNgramType
   , treeEdit          :: TreeEdit
-  , syncResetButton   :: Array R.Element
-  , addCallback       :: String -> Effect Unit
   )
 
 tableContainer :: Record TableContainerProps -> Record TT.TableContainerProps -> R.Element
 tableContainer p q = R.createElement (tableContainerCpt p) q []
 tableContainerCpt :: Record TableContainerProps -> R.Component TT.TableContainerProps
-tableContainerCpt { dispatch
+tableContainerCpt { addCallback
+                  , dispatch
+                  , getNgramsChildren
                   , ngramsSelection
                   , ngramsTable: ngramsTableCache
                   , path
                   , queryExactMatches
+                  , syncResetButton
                   , tabNgramType
                   , treeEdit: { ngramsChildrenDiff
                               , ngramsParent }
-                  , syncResetButton
-                  , addCallback
                   } = here.component "tableContainer" cpt
   where
     cpt props _ = do
@@ -224,7 +229,8 @@ tableContainerCpt { dispatch
     editor = H.div {} $ maybe [] edit ngramsParent
       where
         edit ngrams = [ H.p {} [H.text $ "Editing " <> ngramsTermText ngrams]
-                   , NTC.renderNgramsTree { ngramsChildren
+                   , NTC.renderNgramsTree { getNgramsChildren
+                                          , ngramsChildren
                                           , ngramsClick
                                           , ngramsDepth
                                           , ngramsEdit
@@ -269,19 +275,19 @@ tableContainerCpt { dispatch
 -- NEXT
 
 type CommonProps =
-  ( afterSync      :: Unit -> Aff Unit
-  , boxes          :: Boxes
-  , tabNgramType   :: CTabNgramType
-  , withAutoUpdate :: Boolean -- (?) not used
+  ( afterSync         :: Unit -> Aff Unit
+  , boxes             :: Boxes
+  , tabNgramType      :: CTabNgramType
+  , withAutoUpdate    :: Boolean -- (?) not used
   )
 
 type PropsNoReload =
-  ( cacheState :: NT.CacheState
-  , mTotalRows :: Maybe Int
-  , path       :: T.Box PageParams
-  , state      :: T.Box State
-  , treeEdit   :: T.Box TreeEdit
-  , versioned  :: VersionedNgramsTable
+  ( cacheState        :: NT.CacheState
+  , mTotalRows        :: Maybe Int
+  , path              :: T.Box PageParams
+  , state             :: T.Box State
+  , treeEdit          :: Record NgramsTreeEditProps
+  , versioned         :: VersionedNgramsTable
   | CommonProps
   )
 
@@ -318,10 +324,10 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
       , path
       , state
       , tabNgramType
-      , treeEdit
+      , treeEdit: treeEdit@{ getNgramsChildren }
       , versioned: Versioned { data: initTable }
       } _ = do
-    treeEdit'@{ ngramsParent } <- T.useLive T.unequal treeEdit
+    treeEdit'@{ ngramsParent } <- T.useLive T.unequal treeEdit.box
     state'@{ ngramsLocalPatch, ngramsSelection } <- T.useLive T.unequal state
     path'@{ scoreType, termListFilter, termSizeFilter } <- T.useLive T.unequal path
     params <- T.useFocused (_.params) (\a b -> b { params = a }) path
@@ -377,6 +383,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
 
         convertRow ngramsElement =
           { row: NTC.renderNgramsItem { dispatch: performAction
+                                      , getNgramsChildren
                                       , ngrams: ngramsElement ^. _NgramsElement <<< _ngrams
                                       , ngramsElement
                                       , ngramsLocalPatch
@@ -428,11 +435,20 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
                             <<< _Just
             ) =<< ngramsParent
 
+    R.useEffect' $ do
+      R.setRef treeEdit.onCancelRef $ Just $ const $ performAction ClearTreeEdit
+      R.setRef treeEdit.onSaveRef $ Just $ const $ performAction AddTermChildren
+      let ngramsClick { depth: 1, ngrams: child } = Just $ performAction $ ToggleChild false child
+          ngramsClick  _ = Nothing
+      R.setRef treeEdit.onNgramsClickRef $ Just ngramsClick
+
     pure $ R.fragment
       [ TT.table
         { colNames
         , container: tableContainer
-          { dispatch: performAction
+          { addCallback
+          , dispatch: performAction
+          , getNgramsChildren
           , ngramsSelection
           , ngramsTable
           , path
@@ -440,7 +456,6 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
           , syncResetButton: [ syncResetButton ]
           , tabNgramType
           , treeEdit: treeEdit'
-          , addCallback
           }
         , params
         , rows: filteredConvertedRows
@@ -471,7 +486,7 @@ type MkDispatchProps = (
     filteredRows :: PreConversionRows
   , path         :: PageParams
   , state        :: T.Box State
-  , treeEdit     :: T.Box TreeEdit
+  , treeEdit     :: Record NgramsTreeEditProps
   )
 
 mkDispatch :: Record MkDispatchProps -> (Action -> Effect Unit)
@@ -481,14 +496,14 @@ mkDispatch { filteredRows
            , treeEdit } = performAction
   where
     performAction :: Action -> Effect Unit
-    performAction ClearTreeEdit =
-      T.write_ initialTreeEdit treeEdit
-    performAction (SetParentResetChildren p c) =
+    performAction ClearTreeEdit = do
+      T.write_ initialTreeEdit treeEdit.box
+    performAction (SetParentResetChildren p c) = do
       T.write_ { ngramsChildren: c
                , ngramsChildrenDiff: Map.empty
-               , ngramsParent: p } treeEdit
+               , ngramsParent: p } treeEdit.box
     performAction (ToggleChild b c) =
-      T.modify_ (\g@{ ngramsChildrenDiff: nc } -> g { ngramsChildrenDiff = newNC nc }) treeEdit
+      T.modify_ (\g@{ ngramsChildrenDiff: nc } -> g { ngramsChildrenDiff = newNC nc }) treeEdit.box
       where
         newNC nc = Map.alter (maybe (Just b) (const Nothing)) c nc
     performAction (ToggleSelect c) =
@@ -503,7 +518,7 @@ mkDispatch { filteredRows
           else
             s { ngramsSelection = selectNgramsOnFirstPage filteredRows }
     performAction AddTermChildren = do
-      { ngramsChildren, ngramsChildrenDiff, ngramsParent } <- T.read treeEdit
+      { ngramsChildren, ngramsChildrenDiff, ngramsParent } <- T.read treeEdit.box
       case ngramsParent of
         Nothing ->
           -- impossible but harmless
@@ -580,23 +595,42 @@ type MainNgramsTableProps = (
   , path          :: T.Box PageParams
   , session       :: Session
   , tabType       :: TabType
-  , treeEdit      :: T.Box TreeEdit
+  , treeEdit      :: Record NgramsTreeEditProps
   | CommonProps
   )
 
+getNgramsChildrenAff :: Session -> NodeID -> TabType -> NgramsTerm -> Aff (Array NgramsTerm)
+getNgramsChildrenAff session nodeId tabType ngrams = do
+  res <- get session $ R.GetNgrams params (Just nodeId)
+  case res of
+    Left err -> pure []
+    Right r -> pure r
+  where
+    params = { limit: 10
+             , listIds: []
+             , offset: Nothing
+             , orderBy: Nothing
+             , searchQuery: show ngrams
+             , tabType
+             , termListFilter: Nothing
+             , termSizeFilter: Nothing }
+
 mainNgramsTable :: R2.Component MainNgramsTableProps
 mainNgramsTable = R.createElement mainNgramsTableCpt
 mainNgramsTableCpt :: R.Component MainNgramsTableProps
 mainNgramsTableCpt = here.component "mainNgramsTable" cpt
   where
-    cpt props@{ cacheState, path } _ = do
+    cpt props@{ cacheState, path, session, tabType } _ = do
       searchQuery <- T.useFocused (_.searchQuery) (\a b -> b { searchQuery = a }) path
       cacheState' <- T.useLive T.unequal cacheState
       onCancelRef <- R.useRef Nothing
       onNgramsClickRef <- R.useRef Nothing
       onSaveRef   <- R.useRef Nothing
-      treeEdit    <- T.useBox initialTreeEdit
+      treeEditBox <- T.useBox initialTreeEdit
 
+      nodeId <- T.useFocused (_.nodeId) (\a b -> b { nodeId = a }) path
+      nodeId' <- T.useLive T.unequal nodeId
+    
       -- let path = initialPageParams session nodeId [defaultListId] tabType
 
       case cacheState' of
@@ -608,59 +642,71 @@ mainNgramsTableCpt = here.component "mainNgramsTable" cpt
         NT.CacheOff -> pure $ R.fragment
           [
             loadedNgramsTableHeader { searchQuery } []
-          , ngramsTreeEdit { treeEdit } []
-          , mainNgramsTableCacheOff (props { onCancelRef = onCancelRef
-                                           , onNgramsClickRef = onNgramsClickRef
-                                           , onSaveRef = onSaveRef
-                                           , treeEdit = treeEdit }) []
+          , ngramsTreeEdit { box: treeEditBox
+                           , getNgramsChildren: getNgramsChildrenAff session nodeId' tabType
+                           , onCancelRef
+                           , onNgramsClickRef
+                           , onSaveRef } []
+          , mainNgramsTableCacheOff (Record.merge props
+                                     { treeEdit: { box: treeEditBox
+                                                 , onCancelRef
+                                                 , onNgramsClickRef
+                                                 , onSaveRef 
+                                                 , getNgramsChildren: getNgramsChildrenAff session nodeId' tabType
+                                                 }
+                                     }) []
           ]
 
 type NgramsTreeEditProps =
-  ( onCancelRef      :: R.Ref (Maybe (Unit -> Effect Unit))
-  , onNgramsClickRef :: R.Ref (Maybe NgramsClick)
-  , onSaveRef        :: R.Ref (Maybe (Unit -> Effect Unit))
-  , treeEdit         :: T.Box TreeEdit )
+  ( box               :: T.Box TreeEdit
+  , getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
+  , onCancelRef       :: NgramsActionRef
+  , onNgramsClickRef  :: R.Ref (Maybe NgramsClick)
+  , onSaveRef         :: NgramsActionRef
+  )
 
 ngramsTreeEdit :: R2.Component NgramsTreeEditProps
 ngramsTreeEdit = R.createElement ngramsTreeEditCpt
 ngramsTreeEditCpt :: R.Component NgramsTreeEditProps
 ngramsTreeEditCpt = here.component "ngramsTreeEdit" cpt where
-  cpt props@{ treeEdit } _ = do
-    { ngramsParent } <- T.useLive T.unequal treeEdit
+  cpt props@{ box } _ = do
+    { ngramsParent } <- T.useLive T.unequal box
+
+    pure $ case ngramsParent of
+      Nothing -> H.div {} []
+      Just ngramsParent' -> ngramsTreeEditReal (Record.merge props { ngramsParent' }) []
 
-    pure $ if ngramsParent == Nothing
-           then
-             H.div {} []
-           else
-             ngramsTreeEditReal props []
+type NgramsTreeEditRealProps =
+  ( ngramsParent' :: NgramsTerm
+  | NgramsTreeEditProps )
 
-ngramsTreeEditReal :: R2.Component NgramsTreeEditProps
+ngramsTreeEditReal :: R2.Component NgramsTreeEditRealProps
 ngramsTreeEditReal = R.createElement ngramsTreeEditRealCpt
-ngramsTreeEditRealCpt :: R.Component NgramsTreeEditProps
+ngramsTreeEditRealCpt :: R.Component NgramsTreeEditRealProps
 ngramsTreeEditRealCpt = here.component "ngramsTreeEditReal" cpt where
-  cpt { onCancelRef, onNgramsClickRef, onSaveRef, treeEdit } _ = do
-    -- pure $ H.div {} [ H.text "ngramsTreeEditReal" ]
+  cpt { box, getNgramsChildren, ngramsParent', onCancelRef, onNgramsClickRef, onSaveRef } _ = do
+    { ngramsChildren, ngramsChildrenDiff } <- T.useLive T.unequal box
 
-    { ngramsChildren, ngramsChildrenDiff, ngramsParent } <- T.useLive T.unequal treeEdit
-
-    --let ngramsTable = applyPatchSet (patchSetFromMap ngramsChildrenDiff) ngramsChildren
-    let ngramsDepth = { depth: 1, ngrams: ngramsParent }
+    let ngramsDepth = { depth: 1, ngrams: ngramsParent' }
+        ngramsChildrenPatched :: Set NgramsTerm
+        ngramsChildrenPatched = applyPatchSet (patchSetFromMap ngramsChildrenDiff) $ Set.fromFoldable ngramsChildren
     
     pure $ H.div {}
       [ H.p {}
         [ H.text $ "Editing " <> ngramsTermText ngramsDepth.ngrams ]
-      , NTC.renderNgramsTree { ngramsChildren: applyPatchSet (patchSetFromMap ngramsChildrenDiff) $ Set.toUnfoldable ngramsChildren
+      , NTC.renderNgramsTree { getNgramsChildren
+                             , ngramsChildren: List.fromFoldable ngramsChildrenPatched
                              , ngramsClick
                              , ngramsDepth
                              , ngramsEdit
                              , ngramsStyle: []
                              }
       , H.button { className: "btn btn-primary"
-                 , on: {click: onSaveClick} --(const $ dispatch AddTermChildren)}
-                 } [H.text "Save"]
+                 , on: { click: onSaveClick } --(const $ dispatch AddTermChildren)}
+                 } [ H.text "Save" ]
       , H.button { className: "btn btn-primary"
-                 , on: {click: onCancelClick } --(const $ dispatch ClearTreeEdit)}
-                 } [H.text "Cancel"]
+                 , on: { click: onCancelClick } --(const $ dispatch ClearTreeEdit)}
+                 } [ H.text "Cancel" ]
       ]
       where
         -- ngramsTable = ngramsTableCache # at ngrams
@@ -670,15 +716,19 @@ ngramsTreeEditRealCpt = here.component "ngramsTreeEditReal" cpt where
         --               %~ applyPatchSet (patchSetFromMap ngramsChildrenDiff)
         --ngramsClick {depth: 1, ngrams: child} = Just $ dispatch $ ToggleChild false child
         --ngramsClick _ = Nothing
+        ngramsClick :: NgramsClick
         ngramsClick nd = case R.readRef onNgramsClickRef of
           Nothing  -> Nothing
           Just ngc -> ngc nd
+        ngramsEdit :: NgramsClick
         ngramsEdit  _ = Nothing
+        onCancelClick :: forall e. e -> Effect Unit
         onCancelClick _ = case R.readRef onCancelRef of
-          Nothing -> Nothing
+          Nothing -> pure unit
           Just onCancel -> onCancel unit
+        onSaveClick :: forall e. e -> Effect Unit
         onSaveClick _ = case R.readRef onSaveRef of
-          Nothing -> Nothing
+          Nothing -> pure unit
           Just onSave -> onSave unit
 
 mainNgramsTableCacheOn :: R2.Component MainNgramsTableProps
@@ -776,10 +826,10 @@ mainNgramsTableCacheOffCpt = here.component "mainNgramsTableCacheOff" cpt where
 
 
 type MainNgramsTablePaintProps = (
-    cacheState :: NT.CacheState
-  , treeEdit   :: T.Box TreeEdit
-  , path       :: T.Box PageParams
-  , versioned  :: VersionedNgramsTable
+    cacheState        :: NT.CacheState
+  , path              :: T.Box PageParams
+  , treeEdit          :: Record NgramsTreeEditProps
+  , versioned         :: VersionedNgramsTable
   | CommonProps
   )
 
@@ -816,7 +866,7 @@ mainNgramsTablePaintCpt = here.component "mainNgramsTablePaint" cpt
 type MainNgramsTablePaintNoCacheProps = (
     cacheState         :: NT.CacheState
   , path               :: T.Box PageParams
-  , treeEdit           :: T.Box TreeEdit
+  , treeEdit           :: Record NgramsTreeEditProps
   , versionedWithCount :: VersionedWithCountNgramsTable
   | CommonProps
   )

src/Gargantext/Components/NgramsTable/Components.purs

@@ -11,6 +11,8 @@ import Data.Nullable (null, toMaybe)
 import Data.Set (Set)
 import Data.Set as Set
 import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
+import Effect.Class (liftEffect)
 import FFI.Simple (delay)
 import Gargantext.Components.NgramsTable.Core (Action(..), Dispatch, NgramsClick, NgramsDepth, NgramsElement, NgramsTable, NgramsTablePatch, NgramsTerm, _NgramsElement, _NgramsRepoElement, _PatchMap, _children, _list, _ngrams, _occurrences, ngramsTermText, replace, setTermListA)
 import Gargantext.Components.Table as Tbl
@@ -118,11 +120,12 @@ selectionCheckboxCpt = here.component "selectionCheckbox" cpt
 
 
 type RenderNgramsTree =
-  ( ngramsChildren :: List NgramsTerm
-  , ngramsClick    :: NgramsClick
-  , ngramsDepth    :: NgramsDepth
-  , ngramsEdit     :: NgramsClick
-  , ngramsStyle    :: Array DOM.Props
+  ( getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
+  , ngramsChildren    :: List NgramsTerm
+  , ngramsClick       :: NgramsClick
+  , ngramsDepth       :: NgramsDepth
+  , ngramsEdit        :: NgramsClick
+  , ngramsStyle       :: Array DOM.Props
   --, ngramsTable    :: NgramsTable
   )
 
@@ -131,11 +134,12 @@ renderNgramsTree p = R.createElement renderNgramsTreeCpt p []
 renderNgramsTreeCpt :: R.Component RenderNgramsTree
 renderNgramsTreeCpt = here.component "renderNgramsTree" cpt
   where
-    cpt { ngramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ =
+    cpt { getNgramsChildren, ngramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ =
       pure $ H.ul {}
       [ H.span { className: "tree" }
         [ H.span { className: "righthanded" }
-          [ tree { ngramsChildren
+          [ tree { getNgramsChildren
+                 , ngramsChildren
                  , ngramsClick
                  , ngramsDepth
                  , ngramsEdit
@@ -163,8 +167,9 @@ tag tagProps =
 -}
 
 type TreeProps =
-  ( ngramsChildren :: List NgramsTerm
-  , ngramsEdit     :: NgramsClick
+  ( getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
+  , ngramsChildren    :: List NgramsTerm
+  , ngramsEdit        :: NgramsClick
   --, ngramsTable :: NgramsTable
   | TagProps
   )
@@ -174,11 +179,13 @@ tree p = R.createElement treeCpt p []
 treeCpt :: R.Component TreeProps
 treeCpt = here.component "tree" cpt
   where
-    cpt params@{ ngramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ = do
-
+    cpt params@{ getNgramsChildren, ngramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ = do
       R.useEffect' $ do
-        here.log2 "[tree] ngramsChildren" ngramsChildren
-      
+        launchAff_ $ do
+          c <- getNgramsChildren ngramsDepth.ngrams
+          liftEffect $ here.log2 "[tree] ngrams" ngramsDepth.ngrams
+          liftEffect $ here.log2 "[tree] children" c
+       
       pure $
         H.li { style: { width : "100%" } }
           ([ H.i { className, style } [] ]
@@ -212,8 +219,9 @@ treeCpt = here.component "tree" cpt
             H.ul {} <<< map (\ngrams -> tree (params { ngramsDepth = {depth, ngrams} })) <<< L.toUnfoldable
 
 
-type RenderNgramsItem = (
-    dispatch          :: Action -> Effect Unit
+type RenderNgramsItem =
+  ( dispatch          :: Action -> Effect Unit
+  , getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
   , ngrams            :: NgramsTerm
   , ngramsElement     :: NgramsElement
   , ngramsLocalPatch  :: NgramsTablePatch
@@ -228,6 +236,7 @@ renderNgramsItemCpt :: R.Component RenderNgramsItem
 renderNgramsItemCpt = here.component "renderNgramsItem" cpt
   where
     cpt { dispatch
+        , getNgramsChildren
         , ngrams
         , ngramsElement
         , ngramsLocalPatch
@@ -245,7 +254,8 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
         , checkbox GT.StopTerm
         , H.div {}
           ( if ngramsParent == Nothing
-            then [renderNgramsTree { ngramsChildren
+            then [renderNgramsTree { getNgramsChildren
+                                   , ngramsChildren
                                    , ngramsClick
                                    , ngramsDepth
                                    , ngramsEdit

src/Gargantext/Components/NgramsTable/Core.purs

@@ -80,6 +80,7 @@ module Gargantext.Components.NgramsTable.Core
 
   , NgramsDepth
   , NgramsClick
+  , NgramsActionRef
   )
   where
 
@@ -1197,3 +1198,4 @@ postNgramsChartsAsync { listIds, nodeId, session, tabType } = do
 
 type NgramsDepth = { ngrams :: NgramsTerm, depth :: Int }
 type NgramsClick = NgramsDepth -> Maybe (Effect Unit)
+type NgramsActionRef = R.Ref (Maybe (Unit -> Effect Unit))

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

@@ -113,22 +113,30 @@ ngramsViewCpt = here.component "ngramsView" cpt where
       NTC.initialPageParams session nodeId
       [ defaultListId ] (TabDocument TabDocs)
 
-    treeEdit <- T.useBox NT.initialTreeEdit
+    onCancelRef <- R.useRef Nothing
+    onNgramsClickRef <- R.useRef Nothing
+    onSaveRef <- R.useRef Nothing
+    treeEditBox <- T.useBox NT.initialTreeEdit
 
-    pure $ NT.mainNgramsTable (props' treeEdit path) []
-      where
-        most = RX.pick props :: Record NTCommon
-        props' treeEdit path =
+    let most = RX.pick props :: Record NTCommon
+        props' =
           (Record.merge most
            { afterSync
            , path
            , tabType:        TabPairing (TabNgramType $ modeTabType mode)
            , tabNgramType:   modeTabType' mode
-           , treeEdit
+           , treeEdit: { box: treeEditBox
+                       , getNgramsChildren: \_ -> pure []
+                       , onCancelRef
+                       , onNgramsClickRef
+                       , onSaveRef }
            , withAutoUpdate: false }) :: Record NT.MainNgramsTableProps
         afterSync :: Unit -> Aff Unit
         afterSync _ = pure unit
 
+
+    pure $ NT.mainNgramsTable props' []
+
 type NTCommon =
   ( boxes         :: Boxes
   , cacheState    :: T.Box LTypes.CacheState

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

@@ -146,7 +146,10 @@ ngramsViewCpt = here.component "ngramsView" cpt
         , nodeId
         , session } _ = do
       path <- T.useBox $ NTC.initialPageParams session nodeId [defaultListId] (TabDocument TabDocs)
-      treeEdit <- T.useBox NT.initialTreeEdit
+      onCancelRef <- R.useRef Nothing
+      onNgramsClickRef <- R.useRef Nothing
+      onSaveRef <- R.useRef Nothing
+      treeEditBox <- T.useBox NT.initialTreeEdit
 
       pure $ NT.mainNgramsTable {
           afterSync: \_ -> pure unit
@@ -157,7 +160,11 @@ ngramsViewCpt = here.component "ngramsView" cpt
         , session
         , tabNgramType
         , tabType
-        , treeEdit
+        , treeEdit: { box: treeEditBox
+                    , getNgramsChildren: \_ -> pure []
+                    , onCancelRef
+                    , onNgramsClickRef
+                    , onSaveRef }
         , withAutoUpdate: false
         } []
       where

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

@@ -89,7 +89,10 @@ ngramsViewCpt = here.component "ngramsView" cpt where
             , session
             , path } _ = do
       chartsReload <- T.useBox T2.newReload
-      treeEdit <- T.useBox NT.initialTreeEdit
+      onCancelRef <- R.useRef Nothing
+      onNgramsClickRef <- R.useRef Nothing
+      onSaveRef <- R.useRef Nothing
+      treeEditBox <- T.useBox NT.initialTreeEdit
 
       { listIds, nodeId, params } <- T.useLive T.unequal path
 
@@ -115,7 +118,11 @@ ngramsViewCpt = here.component "ngramsView" cpt where
           , session
           , tabNgramType
           , tabType
-          , treeEdit
+          , treeEdit: { box: treeEditBox
+                      , getNgramsChildren: \_ -> pure []
+                      , onCancelRef
+                      , onNgramsClickRef
+                      , onSaveRef }
           , withAutoUpdate: false
           } []
         ]