[Graph] doesn't flicker now at all!

Turns out the issue was also at parent getting rerenders.
So the trick is that I added an empty div with ref for parent node and,
next to it, the Graph component pointing to that ref.
Graph component calls react's usePortal with that parent ref and a small
'createElement' div to hold sigma canvases.

src/Gargantext/Components/Graph.purs

@@ -11,6 +11,7 @@ import Data.Sequence as Seq
 import DOM.Simple (createElement, setAttr)
 import DOM.Simple.Console (log, log2)
 import DOM.Simple.Types (Element)
+import Effect.Timer (setTimeout)
 import FFI.Simple (delay)
 import Reactix as R
 import Reactix.DOM.HTML as RH
@@ -49,7 +50,7 @@ graphCpt :: forall s fa2. R.Component (Props s fa2)
 graphCpt = R.hooksComponent "Graph" cpt
   where
     cpt props _ = do
-      R.useEffect' $ do
+      R.useEffectOnce' $ do
         el <- case R.readNullableRef props.elRef of
           Just el -> do
             pure el
@@ -61,12 +62,12 @@ graphCpt = R.hooksComponent "Graph" cpt
             pure el
 
         case R.readNullableRef props.parentRef of
-          Nothing -> R2.addRootElement el
+          Nothing -> pure unit
           Just parentEl -> R2.appendChild parentEl el
         pure unit
 
       R.useEffectOnce $ do
-        log "[graphCpt] calling startSigmaEff"
+        --log "[graphCpt] calling startSigmaEff"
         startSigmaEff props.elRef props.sigmaRef props.sigmaSettings props.forceAtlas2Settings props.graph
 
         delay unit $ \_ -> do

src/Gargantext/Components/GraphExplorer.purs

@@ -41,7 +41,7 @@ type LayoutProps =
   )
 
 type Props = (
-    graphElRef :: R.Ref (Nullable Element)
+    graphParentRef :: R.Ref (Nullable Element)
   , graph :: Maybe Graph.Graph | LayoutProps
   )
 
@@ -53,11 +53,11 @@ explorerLayoutCpt :: R.Component LayoutProps
 explorerLayoutCpt = R.hooksComponent "G.C.GraphExplorer.explorerLayout" cpt
   where
     cpt {graphId, mCurrentRoute, treeId, session, sessions, frontends} _ = do
-      graphElRef <- R.useRef null
-      useLoader graphId (getNodes session) (handler graphElRef)
+      graphParentRef <- R.useRef null
+      useLoader graphId (getNodes session) (handler graphParentRef)
       where
-        handler graphElRef loaded =
-          explorer {graphElRef, graphId, mCurrentRoute, treeId, session, sessions, graph, frontends}
+        handler graphParentRef loaded =
+          explorer {graphParentRef, graphId, mCurrentRoute, treeId, session, sessions, graph, frontends}
           where graph = Just (convert loaded)
 
 --------------------------------------------------------------
@@ -67,7 +67,7 @@ explorer props = R.createElement explorerCpt props []
 explorerCpt :: R.Component Props
 explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
   where
-    cpt {graphElRef, sessions, session, graphId, mCurrentRoute, treeId, graph, frontends} _ = do
+    cpt {graphParentRef, sessions, session, graphId, mCurrentRoute, treeId, graph, frontends} _ = do
       controls <- Controls.useGraphControls
       state <- useExplorerState
       x /\ setX <- R.useState' 0
@@ -87,7 +87,8 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
                       , RH.div {on: {click: \e -> setX $ \x_ -> x_ + 1}} [ RH.text ("Counter: " <> (show x)) ]
                         ]
                 , row [ tree {mCurrentRoute, treeId} controls showLogin
-                      , mGraph graphElRef controls.sigmaRef {graphId, graph}
+                      , RH.div { ref: graphParentRef, id: "graph-view", className: "col-md-12" } []  -- graph parent
+                      , mGraph graphParentRef controls.sigmaRef {graphId, graph}
                       , Sidebar.sidebar {showSidePanel: fst controls.showSidePanel} ]
                 , row [
                   ]
@@ -112,7 +113,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
 
     mGraph :: R.Ref (Nullable Element) -> R.Ref Sigma -> {graphId :: GraphId, graph :: Maybe Graph.Graph} -> R.Element
     mGraph _ _ {graph: Nothing} = RH.div {} []
-    mGraph graphElRef sigmaRef {graphId, graph: Just graph} = graphView graphElRef sigmaRef {graphId, graph}
+    mGraph graphParentRef sigmaRef {graphId, graph: Just graph} = graphView graphParentRef sigmaRef {graphId, graph}
 
 useExplorerState :: R.Hooks (Record GET.State)
 useExplorerState = do pure {}
@@ -139,17 +140,14 @@ type GraphProps = (
 
 graphView :: R.Ref (Nullable Element) -> R.Ref Sigma -> Record GraphProps -> R.Element
 --graphView sigmaRef props = R.createElement (R.memo el memoCmp) props []
-graphView elRef sigmaRef props = R.createElement el props []
+graphView parentRef sigmaRef props = R.createElement el props []
   where
     --memoCmp props1 props2 = props1.graphId == props2.graphId
     el = R.hooksComponent "GraphView" cpt
     cpt {graphId, graph} _children = do
-      parentRef <- R.useRef null
+      elRef <- R.useRef null
 
-      pure $
-        RH.div { ref: parentRef, id: "graph-view", className: "col-md-12" }
-        [
-          Graph.graph {
+      pure $ Graph.graph {
           elRef
         , forceAtlas2Settings: Graph.forceAtlas2Settings
         , graph
@@ -157,7 +155,6 @@ graphView elRef sigmaRef props = R.createElement el props []
         , sigmaSettings: Graph.sigmaSettings
         , sigmaRef: sigmaRef
         }
-        ]
 
 convert :: GET.GraphData -> Graph.Graph
 convert (GET.GraphData r) = Sigmax.Graph {nodes, edges}

src/Gargantext/Hooks/Sigmax.purs

@@ -220,23 +220,23 @@ startSigmaEff ref sigmaRef settings forceAtlas2Settings graph = do
   let rSigma = R.readRef sigmaRef
   case readSigma rSigma of
     Nothing -> do
-      log "[startSigmaEff] calling useSigmaEff"
+      --log "[startSigmaEff] calling useSigmaEff"
       sigma <- useSigmaEff settings sigmaRef
-      log "[startSigmaEff] calling useCanvasRendererEff"
+      --log "[startSigmaEff] calling useCanvasRendererEff"
       useCanvasRendererEff ref sigma
 
-      log "[startSigmaEff] calling useDataEff"
+      --log "[startSigmaEff] calling useDataEff"
       useDataEff sigma graph
-      log "[startSigmaEff] calling useForceAtlas2Eff"
+      --log "[startSigmaEff] calling useForceAtlas2Eff"
       useForceAtlas2Eff sigma forceAtlas2Settings
     Just sig -> do
-      log "[startSigmaEff] sigma initialized already"
+      --log "[startSigmaEff] sigma initialized already"
       --Sigma.swapRendererContainer ref sig
       --dependOnContainer ref "[startSigmaEff] no container" $ Sigma.setRendererContainer sig
       --useCanvasRendererEff ref rSigma
       --useDataEff rSigma graph
       --useForceAtlas2Eff rSigma forceAtlas2Settings
-      log "[startSigmaEff] refreshForceAtlas"
+      --log "[startSigmaEff] refreshForceAtlas"
       --Sigma.refreshForceAtlas sig
       --if isFARunning then
       --  Sigma.restartForceAtlas2 sig
@@ -301,8 +301,7 @@ useForceAtlas2Eff sigma settings = effect
   where
     effect = dependOnSigma sigma sigmaNotFoundMsg withSigma
     withSigma sig = do
-      log startingMsg
-      log sigma
+      --log2 startingMsg sigma
       Sigma.startForceAtlas2 sig settings
       --cleanupFirst sigma (Sigma.killForceAtlas2 sig)
     startingMsg = "[useForceAtlas2Eff] Starting ForceAtlas2"
@@ -313,10 +312,10 @@ handleForceAtlas2Pause :: R.Ref Sigma -> R.State Boolean -> Effect Unit
 handleForceAtlas2Pause sigmaRef (toggled /\ setToggled) = do
   let sigma = R.readRef sigmaRef
   dependOnSigma sigma "[handleForceAtlas2Pause] sigma: Nothing" $ \s -> do
-    log2 "[handleForceAtlas2Pause] mSigma: Just " s
-    log2 "[handleForceAtlas2Pause] toggled: " toggled
+    --log2 "[handleForceAtlas2Pause] mSigma: Just " s
+    --log2 "[handleForceAtlas2Pause] toggled: " toggled
     isFARunning <- Sigma.isForceAtlas2Running s
-    log2 "[handleForceAtlas2Pause] isFARunning: " isFARunning
+    --log2 "[handleForceAtlas2Pause] isFARunning: " isFARunning
     case Tuple toggled isFARunning of
       Tuple true false -> Sigma.restartForceAtlas2 s
       Tuple false true -> Sigma.stopForceAtlas2 s

src/Gargantext/Utils/Reactix.purs

@@ -6,6 +6,7 @@ import Data.Nullable (Nullable, null, toMaybe)
 import Data.Tuple (Tuple)
 import Data.Tuple.Nested ((/\))
 import DOM.Simple as DOM
+import DOM.Simple.Console (log, log2)
 import DOM.Simple.Document (document)
 import DOM.Simple.Event as DE
 import DOM.Simple.Element as Element
@@ -177,3 +178,12 @@ foreign import _addRootElement
 
 appendChild :: forall n m. IsNode n => IsNode m => n -> m -> Effect Unit
 appendChild n c = delay unit $ \_ -> pure $ n ... "appendChild" $ [c]
+
+appendChildToParentId :: forall c. IsNode c => String -> c -> Effect Unit
+appendChildToParentId ps c = delay unit $ \_ -> do
+  parentEl <- getElementById ps
+  log2 "[appendChildToParentId] ps" ps
+  log2 "[appendChildToParentId] parentEl" parentEl
+  case parentEl of
+    Nothing -> pure unit
+    Just el -> appendChild el c