[tree] action search fix popup close after search

dist/styles/sass.css

@@ -710,10 +710,18 @@ li .leaf:hover a.settings {
   text-decoration: line-through;
 }
 
+.action-search {
+  margin: 10px;
+}
+
 .context-menu {
   position: fixed;
 }
 
+.search-bar {
+  margin: 10px;
+}
+
 .range {
   width: 400px;
   /* some space for the right knob */

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;ACjBA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;;AAEN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAtCA;EACA;EAEA;EAqCE;EACA;;AACF;EACE;;AACF;EACE;;AAEF;EACE;;AAEF;EAlDA;EACA;EAEA;EAiDE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1KF;EACE;;;AAGA;EACE;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AC/HR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;EACA;;AACJ;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AChDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;ACjBA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;;AAEN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAtCA;EACA;EAEA;EAqCE;EACA;;AACF;EACE;;AACF;EACE;;AAEF;EACE;;AAEF;EAlDA;EACA;EAEA;EAiDE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1KF;EACE;;;AAGA;EACE;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AC/HR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;EACA;;AACJ;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACtDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/App.purs

@@ -89,7 +89,6 @@ appCpt = R.hooksComponentWithModule thisModule "app" cpt where
                      , visible: showLogin
                      }
           ]
-    let mCurrentRoute     = fst route
     let withSession sid f = maybe' defaultView (ff f) (Sessions.lookup sid (fst sessions))
 
     let sessionUpdate s = snd sessions $ Sessions.Update s
@@ -165,7 +164,7 @@ appCpt = R.hooksComponentWithModule thisModule "app" cpt where
                                  , frontends
                                  , graphId
                                  , handed: fst handed
-                                 , mCurrentRoute
+                                 , mCurrentRoute: fst route
                                  , session
                                  , sessions: (fst sessions)
                                  , showLogin

src/Gargantext/Components/Forest.purs

@@ -37,56 +37,57 @@ type Props = (
 
 forest :: R2.Component Props
 forest = R.createElement forestCpt
+  where
+    forestCpt :: R.Component Props
+    forestCpt = R.hooksComponentWithModule thisModule "forest" cpt
 
-forestCpt :: R.Component Props
-forestCpt = R.hooksComponentWithModule thisModule "forest" cpt where
-  cpt { appReload
-      , asyncTasksRef
-      , backend
-      , frontends
-      , handed
-      , route
-      , sessions
-      , showLogin
-      , treeReloadRef } _ = do
-    -- NOTE: this is a hack to reload the tree view on demand
-    reload     <- R.useState' (0 :: Reload)
-    asyncTasks <- GAT.useTasks appReload reload
-    openNodes  <- R2.useLocalStorageState R2.openNodesKey (Set.empty :: OpenNodes)
-
-    -- TODO If `treeReloadRef` is set, `reload` state should be updated
-    R.useEffect' $ do
-      R.setRef asyncTasksRef $ Just asyncTasks
-      case R.readRef treeReloadRef of
-        Nothing -> R.setRef treeReloadRef $ Just reload
-        Just _  -> pure unit
-
-    R2.useCache (
-        frontends
-      /\ route
-      /\ sessions
-      /\ fst openNodes
-      /\ fst appReload
-      /\ fst reload
-      /\ (fst asyncTasks).storage
-      /\ handed
-      )
-      (cpt' openNodes asyncTasks appReload reload showLogin backend)
-  cpt' openNodes asyncTasks appReload reload showLogin backend (frontends /\ route /\ sessions /\ _ /\ _ /\ _ /\ _ /\ handed) = do
-    pure $ R2.row $ [plus handed showLogin backend] <> trees
-    where
-      trees = tree <$> unSessions sessions
-      tree s@(Session {treeId}) =
-        treeView { appReload
-                 , asyncTasks
-                 , frontends
-                 , handed
-                 , mCurrentRoute: Just route
-                 , openNodes
-                 , reload
-                 , root: treeId
-                 , session: s
-                 } []
+    cpt { appReload
+        , asyncTasksRef
+        , backend
+        , frontends
+        , handed
+        , route
+        , sessions
+        , showLogin
+        , treeReloadRef } _ = do
+      -- NOTE: this is a hack to reload the tree view on demand
+      reload     <- R.useState' (0 :: Reload)
+      asyncTasks <- GAT.useTasks appReload reload
+      openNodes  <- R2.useLocalStorageState R2.openNodesKey (Set.empty :: OpenNodes)
+
+      -- TODO If `treeReloadRef` is set, `reload` state should be updated
+      R.useEffect' $ do
+        R.setRef asyncTasksRef $ Just asyncTasks
+        case R.readRef treeReloadRef of
+          Nothing -> R.setRef treeReloadRef $ Just reload
+          Just _  -> pure unit
+
+      R2.useCache (
+          frontends
+        /\ route
+        /\ sessions
+        /\ fst openNodes
+        /\ fst appReload
+        /\ fst reload
+        /\ (fst asyncTasks).storage
+        /\ handed
+        )
+        (cpt' openNodes asyncTasks appReload reload showLogin backend)
+    cpt' openNodes asyncTasks appReload reload showLogin backend (frontends /\ route /\ sessions /\ _ /\ _ /\ _ /\ _ /\ handed) = do
+      pure $ R2.row $ [plus handed showLogin backend] <> trees
+      where
+        trees = tree <$> unSessions sessions
+        tree s@(Session {treeId}) =
+          treeView { appReload
+                  , asyncTasks
+                  , frontends
+                  , handed
+                  , mCurrentRoute: Just route
+                  , openNodes
+                  , reload
+                  , root: treeId
+                  , session: s
+                  } []
 
 plus :: Handed -> R.Setter Boolean -> R.State (Maybe Backend) -> R.Element
 plus handed showLogin backend = H.div { className: handedClass } [
@@ -129,10 +130,10 @@ type ForestLayoutProps = (
 
 forestLayout :: R2.Component ForestLayoutProps
 forestLayout props = R.createElement forestLayoutCpt props
-
-forestLayoutCpt :: R.Component ForestLayoutProps
-forestLayoutCpt = R.hooksComponentWithModule thisModule "forestLayout" cpt
   where
+    forestLayoutCpt :: R.Component ForestLayoutProps
+    forestLayoutCpt = R.hooksComponentWithModule thisModule "forestLayout" cpt
+
     cpt props@{ handed } children = do
       pure $ R.fragment [ topBar { handed } [], forestLayoutMain props children ]
 
@@ -140,10 +141,10 @@ forestLayoutCpt = R.hooksComponentWithModule thisModule "forestLayout" cpt
 -- while the remaining ones are put into the main view
 forestLayoutWithTopBar :: R2.Component ForestLayoutProps
 forestLayoutWithTopBar props = R.createElement forestLayoutWithTopBarCpt props
-
-forestLayoutWithTopBarCpt :: R.Component ForestLayoutProps
-forestLayoutWithTopBarCpt = R.hooksComponentWithModule thisModule "forestLayoutWithTopBar" cpt
   where
+    forestLayoutWithTopBarCpt :: R.Component ForestLayoutProps
+    forestLayoutWithTopBarCpt = R.hooksComponentWithModule thisModule "forestLayoutWithTopBar" cpt
+
     cpt props@{ handed } children = do
       let { head: topBarChild, tail: mainChildren } =
             fromMaybe { head: H.div {} [], tail: [] } $ A.uncons children
@@ -154,10 +155,10 @@ forestLayoutWithTopBarCpt = R.hooksComponentWithModule thisModule "forestLayoutW
 
 forestLayoutMain :: R2.Component ForestLayoutProps
 forestLayoutMain props = R.createElement forestLayoutMainCpt props
-
-forestLayoutMainCpt :: R.Component ForestLayoutProps
-forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" cpt
   where
+    forestLayoutMainCpt :: R.Component ForestLayoutProps
+    forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" cpt
+
     cpt props children = do
       pure $ forestLayoutRaw props [
           mainPage {} children
@@ -165,10 +166,10 @@ forestLayoutMainCpt = R.hooksComponentWithModule thisModule "forestLayoutMain" c
 
 forestLayoutRaw :: R2.Component ForestLayoutProps
 forestLayoutRaw props = R.createElement forestLayoutRawCpt props
-
-forestLayoutRawCpt :: R.Component ForestLayoutProps
-forestLayoutRawCpt = R.hooksComponentWithModule thisModule "forestLayoutRaw" cpt
   where
+    forestLayoutRawCpt :: R.Component ForestLayoutProps
+    forestLayoutRawCpt = R.hooksComponentWithModule thisModule "forestLayoutRaw" cpt
+
     cpt { appReload
         , asyncTasksRef
         , backend
@@ -199,10 +200,10 @@ forestLayoutRawCpt = R.hooksComponentWithModule thisModule "forestLayoutRaw" cpt
 
 mainPage :: R2.Component ()
 mainPage = R.createElement mainPageCpt
-
-mainPageCpt :: R.Component ()
-mainPageCpt = R.hooksComponentWithModule thisModule "mainPage" cpt
   where
+    mainPageCpt :: R.Component ()
+    mainPageCpt = R.hooksComponentWithModule thisModule "mainPage" cpt
+
     cpt {} children = do
       pure $ H.div {className: "col-md-10"} [
         H.div {id: "page-wrapper"} [

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

@@ -59,19 +59,19 @@ type IsLeaf = Boolean
 
 nodeSpan :: R2.Component NodeMainSpanProps
 nodeSpan = R.createElement nodeSpanCpt
-
-nodeSpanCpt :: R.Component NodeMainSpanProps
-nodeSpanCpt = R.hooksComponentWithModule thisModule "nodeSpan" cpt
   where
+    nodeSpanCpt :: R.Component NodeMainSpanProps
+    nodeSpanCpt = R.hooksComponentWithModule thisModule "nodeSpan" cpt
+
     cpt props children = do
       pure $ H.div {} ([ nodeMainSpan props [] ] <> children)
 
 nodeMainSpan :: R2.Component NodeMainSpanProps
 nodeMainSpan = R.createElement nodeMainSpanCpt
-
-nodeMainSpanCpt :: R.Component NodeMainSpanProps
-nodeMainSpanCpt = R.hooksComponentWithModule thisModule "nodeMainSpan" cpt
   where
+    nodeMainSpanCpt :: R.Component NodeMainSpanProps
+    nodeMainSpanCpt = R.hooksComponentWithModule thisModule "nodeMainSpan" cpt
+
     cpt props@{ appReload
               , asyncTasks: (asyncTasks /\ dispatchAsyncTasks)
               , dispatch
@@ -142,8 +142,8 @@ nodeMainSpanCpt = R.hooksComponentWithModule thisModule "nodeMainSpan" cpt
 
                 , nodeActions { id
                               , nodeType
-                              , refreshTree: const $ dispatch RefreshTree
                               , session
+                              , triggerRefresh: const $ dispatch RefreshTree
                               }
 
 
@@ -242,33 +242,33 @@ fldr nt open = if open
 type NodeActionsProps =
   ( id          :: ID
   , nodeType    :: GT.NodeType
-  , refreshTree :: Unit -> Aff Unit
   , session     :: Session
+  , triggerRefresh :: Unit -> Aff Unit
   )
 
 nodeActions :: Record NodeActionsProps -> R.Element
 nodeActions p = R.createElement nodeActionsCpt p []
-
-nodeActionsCpt :: R.Component NodeActionsProps
-nodeActionsCpt = R.hooksComponentWithModule thisModule "nodeActions" cpt
   where
+    nodeActionsCpt :: R.Component NodeActionsProps
+    nodeActionsCpt = R.hooksComponentWithModule thisModule "nodeActions" cpt
+
     cpt { id
         , nodeType: GT.Graph
-        , refreshTree
         , session
+        , triggerRefresh
         } _ = do
 
       useLoader id (graphVersions session) $ \gv ->
         nodeActionsGraph { id
                          , graphVersions: gv
                          , session
-                         , triggerRefresh: triggerRefresh refreshTree
+                         , triggerRefresh
                          }
 
     cpt { id
         , nodeType: GT.NodeList
-        , refreshTree
         , session
+        , triggerRefresh
         } _ = do
       useLoader { nodeId: id, session } loadCorpusWithChild $
         \{ corpusId } ->
@@ -276,13 +276,12 @@ nodeActionsCpt = R.hooksComponentWithModule thisModule "nodeActions" cpt
                               , nodeId: corpusId
                               , nodeType: GT.TabNgramType GT.CTabTerms
                               , session
-                              , triggerRefresh: triggerRefresh refreshTree
+                              , triggerRefresh
                               }
     cpt _ _ = do
       pure $ H.div {} []
 
     graphVersions session graphId = GraphAPI.graphVersions { graphId, session }
-    triggerRefresh refreshTree    = refreshTree
 
 
 -- END nodeActions

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

@@ -3,17 +3,20 @@ module Gargantext.Components.Forest.Tree.Node.Action.Search where
 import Data.Maybe (Maybe)
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff)
+import Effect.Class (liftEffect)
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Prelude
+
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Add (NodePopup)
 import Gargantext.Components.Forest.Tree.Node.Action.Search.SearchBar (searchBar)
 import Gargantext.Components.Forest.Tree.Node.Action.Search.SearchField (defaultSearch)
 import Gargantext.Components.Lang (allLangs)
-import Gargantext.Prelude (Unit, bind, pure, unit, ($), (<>))
 import Gargantext.Sessions (Session)
 import Gargantext.Types (ID)
 import Gargantext.Types as GT
-import Reactix as R
-import Reactix.DOM.HTML as H
 
 
 -- | Action : Search
@@ -24,7 +27,7 @@ actionSearch :: Session
             -> R.Hooks R.Element
 actionSearch session id dispatch nodePopup = do
   search <- R.useState' $ defaultSearch { node_id = id }
-  pure $ R.fragment [ H.p {"style": {"margin" :"10px"}}
+  pure $ R.fragment [ H.p { className: "action-search" }
                           [ H.text $ "Search and create a private "
                                   <> "corpus with the search query as corpus name." ]
                     , searchBar { langs: allLangs
@@ -41,6 +44,7 @@ actionSearch session id dispatch nodePopup = do
       searchOn dispatch' p task = do
         _ <- launchAff $ dispatch' (DoSearch task)
         -- close popup
+        _ <- launchAff $ dispatch' ClosePopover
         -- TODO
         --snd p $ const Nothing
         pure unit

src/Gargantext/Components/Forest/Tree/Node/Action/Search/SearchBar.purs

 module Gargantext.Components.Forest.Tree.Node.Action.Search.SearchBar
-  ( Props, searchBar, searchBarCpt
+  ( Props
+  , searchBar
   ) where
 
 import Data.Tuple.Nested ((/\))
@@ -25,13 +26,13 @@ type Props = ( langs     :: Array Lang
 
 searchBar :: Record Props -> R.Element
 searchBar props = R.createElement searchBarCpt props []
-
-searchBarCpt :: R.Component Props
-searchBarCpt = R.hooksComponentWithModule thisModule "searchBar" cpt
   where
+    searchBarCpt :: R.Component Props
+    searchBarCpt = R.hooksComponentWithModule thisModule "searchBar" cpt
+
     cpt {langs, onSearch, search: search@(s /\ _), session} _ = do
       --onSearchChange session s
-      pure $ H.div {"style": {"margin" :"10px"}}
+      pure $ H.div { className: "search-bar" }
                    [ searchField { databases:allDatabases
                                  , langs
                                  , onSearch

src/Gargantext/Components/Forest/Tree/Node/Action/Search/SearchField.purs

@@ -45,12 +45,12 @@ type Props =
 
 searchField :: Record Props -> R.Element
 searchField p = R.createElement searchFieldComponent p []
-
---searchFieldComponent :: R.Memo Props
---searchFieldComponent = R.memo (R.hooksComponentWithModule thisModule "searchField" cpt) eqProps
-searchFieldComponent :: R.Component Props
-searchFieldComponent = R.hooksComponentWithModule thisModule "searchField" cpt
   where
+    --searchFieldComponent :: R.Memo Props
+    --searchFieldComponent = R.memo (R.hooksComponentWithModule thisModule "searchField" cpt) eqProps
+    searchFieldComponent :: R.Component Props
+    searchFieldComponent = R.hooksComponentWithModule thisModule "searchField" cpt
+
     cpt props@{onSearch, search: search@(s /\ _)} _ = do
       iframeRef <- R.useRef    null
       let params = 
@@ -361,15 +361,15 @@ type SubmitButtonProps =
 
 submitButton :: Record SubmitButtonProps -> R.Element
 submitButton p = R.createElement submitButtonComponent p []
-
-submitButtonComponent :: R.Component SubmitButtonProps
-submitButtonComponent = R.hooksComponentWithModule thisModule "submitButton" cpt
   where
+    submitButtonComponent :: R.Component SubmitButtonProps
+    submitButtonComponent = R.hooksComponentWithModule thisModule "submitButton" cpt
+
     cpt {onSearch, search: (mySearch /\ _), session} _ =
       pure $
         H.button { className: "btn btn-primary"
                  , "type"   : "button"
-                 , on       : {click: doSearch onSearch session mySearch}
+                 , on       : { click: doSearch onSearch session mySearch }
                  , style    : { width: "100%" }
                  } [ H.text "Launch Search" ]
 

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

@@ -48,10 +48,10 @@ type CommonProps =
 
 nodePopupView :: Record NodePopupProps -> R.Element
 nodePopupView p = R.createElement nodePopupCpt p []
-
-nodePopupCpt :: R.Component NodePopupProps
-nodePopupCpt = R.hooksComponentWithModule thisModule "nodePopupView" cpt
   where
+    nodePopupCpt :: R.Component NodePopupProps
+    nodePopupCpt = R.hooksComponentWithModule thisModule "nodePopupView" cpt
+
     cpt p _ = do
       isOpen    <- R.useState' false
 

src/sass/_styles.sass

@@ -45,5 +45,11 @@
       .trash
         text-decoration: line-through
 
+.action-search
+  margin: 10px
+
 .context-menu
   position: fixed
+
+.search-bar
+  margin: 10px