[graph] some more attempts to fix edge weight control

package.json

@@ -55,11 +55,12 @@
     "react": "~18.2.0",
     "react-awesome-popover": "~6.1.1",
     "react-bootstrap": "~1.5.2",
-    "react-dom": "~17.0.2",
+    "react-dom": "~18.2.0",
     "react-tooltip": "~4.2.8",
     "secp256k1": "~4.0.2",
     "sigma": "~2.4.0",
     "twgl.js": "~5.0.4",
+    "use-debounce": "^10.0.0",
     "uuid": "8.3.2"
   },
   "devDependencies": {

spago.lock

@@ -59,7 +59,7 @@ workspace:
         - profunctor-lenses: ">=8.0.0 <9.0.0"
         - random: ">=6.0.0 <7.0.0"
         - react: ">=11.0.0 <12.0.0"
-        - reactix: ">=0.6.0 <0.7.0"
+        - reactix
         - record: ">=4.0.0 <5.0.0"
         - record-extra: ">=5.0.1 <6.0.0"
         - routing: ">=11.0.0 <12.0.0"
@@ -81,6 +81,7 @@ workspace:
         - unordered-collections: ">=3.1.0 <4.0.0"
         - unsafe-coerce: ">=6.0.0 <7.0.0"
         - uri: ">=9.0.0 <10.0.0"
+        - use-debounce
         - uuid: ">=9.0.0 <10.0.0"
         - validation: ">=6.0.0 <7.0.0"
         - web-file: ">=4.0.0 <5.0.0"
@@ -224,6 +225,7 @@ workspace:
         - unsafe-coerce
         - unsafe-reference
         - uri
+        - use-debounce
         - uuid
         - validation
         - variant
@@ -738,6 +740,8 @@ workspace:
     markdown-it:
       git: https://github.com/garganscript/purescript-markdown-it.git
       ref: spago-next
+    reactix:
+      path: /data/git-work/github/PURESCRIPT/purescript-reactix
     sequences:
       git: https://github.com/garganscript/purescript-sequences.git
       ref: v3.0.2-spago-next
@@ -751,6 +755,8 @@ workspace:
     tuples-native:
       git: https://github.com/garganscript/purescript-tuples-native.git
       ref: v2.3.0-spago-next
+    use-debounce:
+      path: /data/git-work/github/PURESCRIPT/purescript-use-debounce
 packages:
   aff:
     type: registry
@@ -1841,9 +1847,8 @@ packages:
       - typelevel-prelude
       - unsafe-coerce
   reactix:
-    type: registry
-    version: 0.6.0
-    integrity: sha256-gaF3igbCsTmaGxfbykWaBcyv4n7AHVmQRstZ/msNfJw=
+    type: local
+    path: /data/git-work/github/PURESCRIPT/purescript-reactix
     dependencies:
       - dom-simple
       - effect
@@ -2271,6 +2276,15 @@ packages:
       - these
       - transformers
       - unfoldable
+  use-debounce:
+    type: local
+    path: /data/git-work/github/PURESCRIPT/purescript-use-debounce
+    dependencies:
+      - console
+      - effect
+      - ffi-simple
+      - prelude
+      - reactix
   uuid:
     type: registry
     version: 9.0.0

spago.yaml

@@ -35,6 +35,11 @@ workspace:
       git: https://github.com/garganscript/purescript-spec-discovery.git
       ref: v8.2.0-spago-next
 
+    use-debounce:
+      path: /data/git-work/github/PURESCRIPT/purescript-use-debounce
+    reactix:
+      path: /data/git-work/github/PURESCRIPT/purescript-reactix
+
 package:
   name: gargantext
   dependencies:
@@ -97,7 +102,8 @@ package:
     - profunctor-lenses: ">=8.0.0 <9.0.0"
     - random: ">=6.0.0 <7.0.0"
     - react: ">=11.0.0 <12.0.0"
-    - reactix: ">=0.6.0 <0.7.0"
+    #- reactix: ">=0.6.0 <0.7.0"
+    - reactix
     - record: ">=4.0.0 <5.0.0"
     - record-extra: ">=5.0.1 <6.0.0"
     - routing: ">=11.0.0 <12.0.0"
@@ -120,6 +126,7 @@ package:
     - unsafe-coerce: ">=6.0.0 <7.0.0"
     - uri: ">=9.0.0 <10.0.0"
     - uuid: ">=9.0.0 <10.0.0"
+    - use-debounce
     - validation: ">=6.0.0 <7.0.0"
     - web-file: ">=4.0.0 <5.0.0"
     - web-html: ">=4.1.0 <5.0.0"

src/Gargantext/Components/GraphExplorer/Toolbar/RangeControl.purs

@@ -9,12 +9,14 @@ module Gargantext.Components.GraphExplorer.Toolbar.RangeControl
 import Data.Tuple.Nested((/\))
 import Debug (spy)
 import Effect.Debounce as Debounce
+import FFI.Simple (delay)
 import Gargantext.Components.RangeSlider as RS
 import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 import Prelude
 import Reactix as R
+import Reactix.Debounce as RD
 import Reactix.DOM.HTML as H
 import Toestand as T
 
@@ -74,7 +76,7 @@ edgeConfluenceControlCpt = here.component "edgeConfluenceControl" cpt
 
 type EdgeConfluenceControlInternalProps =
   ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
-  , onChange :: Debounce.Debounce
+  , onChange        :: Debounce.Debounce
   , range           :: Range.NumberRange
   , state           :: T.Box Range.NumberRange
   )
@@ -125,19 +127,34 @@ edgeWeightControlCpt = here.component "edgeWeightControl" cpt
         , state
         } _ = do
 
-      -- transition <- R2.useTransition
+      transition <- R2.useTransition
+      test /\ setTest <- R.useState' 1
       
       let onChange' rng = do
             -- here.log2 "[edgeWeightControl] debounce rng" rng
             let _ = spy "debounce rng" rng
             let _ = spy "debounce state" state
+            let _ = spy "transition" transition
+            let _ = spy "test" test
             -- R2.startTransition transition (\_ -> T.write_ rng state)
+            setTest (_ + 1)
             T.write_ rng state
+            -- T.modify_ SigmaxTypes.toggleForceAtlasState forceAtlasState
           onChange = Debounce.debounce onChange' 1000
 
+      -- rd <- RD.useDebouncedCallback (
+      --   \rng -> do
+      --     let _ = spy "debounce rng" rng
+      --     let _ = spy "test" test
+      --     setTest (_ + 1)
+      --     T.write_ rng state
+      --   ) 200
+      
       forceAtlasState' <- R2.useLive' forceAtlasState
       state' <- T.useLive T.unequal state
-      let _ = spy "[edgeWeightControlInteral] onChange" onChange
+      R.useEffect' $ do
+        here.log2 "[edgeWeightControl] state'" state'
+        here.log2 "[edgeWeightControl] test" test
 
       pure $ rangeControl {
           caption: "Edge Weight"
@@ -147,6 +164,8 @@ edgeWeightControlCpt = here.component "edgeWeightControl" cpt
           , epsilon: (max - min) / 100.0
           , height: 5.0
           , onChange: \rng -> Debounce.call onChange rng
+          -- , onChange: \rng -> RD.callDebouncedCallback rd rng
+          -- , onChange: onChange'
           , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
           , step: 1.0
           , width: 10.0

src/Gargantext/Utils/Reactix.js

@@ -68,5 +68,6 @@ export const isPendingTransitionImpl = (t) => () => {
 }
 
 export const startTransitionImpl = (t) => (f) => () => {
-  return t[1](f);
+  console.log('starting transition', t, f);
+  return t[1](() => { f()() });
 }

src/Main.purs

@@ -8,7 +8,7 @@ import Effect (Effect)
 import FFI.Simple ((...))
 import Gargantext.Components.App as App
 import Gargantext.Utils.Reactix as R2
-import Prelude (Unit, ($))
+import Prelude (Unit, ($), bind)
 import Reactix as R
 
 
@@ -21,6 +21,8 @@ main = paint $ toMaybe (document ... "getElementById" $ [ "app" ])
 paint :: Maybe Element -> Effect Unit
 paint Nothing  = here.error "[main] Container not found"
 paint (Just c) = do
-  R.render app c
+  -- R.render app c
+  let r = R.createRoot c
+  R.renderRoot r app
   where
     app = App.app {}