[graph] some edge weight work, but unfinished and this doesn't compile!

package.json

@@ -36,6 +36,7 @@
     "create-react-class": "~15.6.3",
     "crypto": "~1.0.1",
     "d3": "~7.6.1",
+    "debounce": "^2.0.0",
     "echarts": "~5.1.2",
     "echarts-for-react": "~3.0.1",
     "graphology": "~0.25.1",
@@ -51,6 +52,7 @@
     "markdown-it": "~13.0.1",
     "prop-types": "~15.6.2",
     "pullstate": "~1.20.6",
+    "react": "~18.2.0",
     "react-awesome-popover": "~6.1.1",
     "react-bootstrap": "~1.5.2",
     "react-dom": "~17.0.2",

spago.lock

@@ -20,6 +20,7 @@ workspace:
         - d3: "*"
         - data-default: "*"
         - datetime: ">=6.1.0 <7.0.0"
+        - debounce
         - debug: ">=6.0.2 <7.0.0"
         - dom-filereader: ">=7.0.0 <8.0.0"
         - dom-simple: ">=0.4.0 <0.5.0"
@@ -118,6 +119,7 @@ workspace:
         - d3
         - data-default
         - datetime
+        - debounce
         - debug
         - distributive
         - dom-filereader
@@ -728,6 +730,8 @@ workspace:
     data-default:
       git: https://github.com/garganscript/purescript-data-default.git
       ref: v0.4.0
+    debounce:
+      path: /data/git-work/github/PURESCRIPT/purescript-debounce
     graphql-client:
       git: https://github.com/garganscript/purescript-graphql-client.git
       ref: spago-next-9.3.2
@@ -1050,6 +1054,13 @@ packages:
       - partial
       - prelude
       - tuples
+  debounce:
+    type: local
+    path: /data/git-work/github/PURESCRIPT/purescript-debounce
+    dependencies:
+      - effect
+      - ffi-simple
+      - prelude
   debug:
     type: registry
     version: 6.0.2

spago.yaml

@@ -6,6 +6,8 @@ workspace:
     d3:
       git: https://github.com/garganscript/purescript-d3.git
       ref: v0.11.0
+    debounce:
+      path: /data/git-work/github/PURESCRIPT/purescript-debounce
     string-search:
       git: https://gitlab.iscpif.fr/gargantext/purescript-string-search.git
       ref: spago-next
@@ -58,6 +60,7 @@ package:
     - d3: "*"
     - data-default: "*"
     - datetime: ">=6.1.0 <7.0.0"
+    - debounce
     - debug: ">=6.0.2 <7.0.0"
     - dom-filereader: ">=7.0.0 <8.0.0"
     - dom-simple: ">=0.4.0 <0.5.0"

src/Gargantext/Components/GraphExplorer/Layout.purs

@@ -235,6 +235,8 @@ graphViewCpt = R.memo' $ here.component "graphView" cpt where
       , sigmaRef
       } _ = do
 
+    -- { edgeConfluence, edgeWeight } <- GraphStore.use
+    
     -- edgeConfluence'     <- R2.useLive' edgeConfluence
     -- edgeWeight'         <- R2.useLive' edgeWeight
     -- nodeSize'           <- R2.useLive' nodeSize
@@ -410,7 +412,11 @@ hooksTransformGraph = do
   params <- transformGraphStoreParams
   graph' <- R2.useLive' store.graph
 
+  R.useEffect' $ do
+    here.log2 "[hooksTransformGraph] hashed" $ hashLiveProps params
+
   R.useEffect2' (hashLiveProps params) graph' $ do
+    here.log2 "[hooksTransformGraph] transformed" $ transformGraph graph' params
     T.write_ (transformGraph graph' params) store.transformedGraph
 
 transformGraph :: SigmaxT.SGraph -> Record LiveProps -> SigmaxT.SGraph

src/Gargantext/Components/GraphExplorer/Store.purs

@@ -44,6 +44,7 @@ type Store =
   , edgeConfluence             :: T.Box Range.NumberRange
   , edgeConfluenceRange        :: T.Box Range.NumberRange
   , edgeWeight                 :: T.Box Range.NumberRange
+  , edgeWeightRange            :: T.Box Range.NumberRange
   , forceAtlasState            :: T.Box SigmaxT.ForceAtlasState
   , noverlapState              :: T.Box SigmaxT.NoverlapState
   , graphStage                 :: T.Box GET.Stage
@@ -79,6 +80,7 @@ type State =
   , edgeConfluence             :: Range.NumberRange
   , edgeConfluenceRange        :: Range.NumberRange
   , edgeWeight                 :: Range.NumberRange
+  , edgeWeightRange            :: Range.NumberRange
   , forceAtlasState            :: SigmaxT.ForceAtlasState
   , noverlapState              :: SigmaxT.NoverlapState
   , graphStage                 :: GET.Stage
@@ -109,6 +111,7 @@ options ::
   , mouseSelectorSize          :: Number
   , multiSelectEnabled         :: Boolean
   , edgeConfluence             :: Range.NumberRange
+  , edgeWeight                 :: Range.NumberRange
   , graphStage                 :: GET.Stage
   , nodeSize                   :: Range.NumberRange
   --, showLouvain                :: Boolean
@@ -131,6 +134,7 @@ options =
   , labelRenderedSizeThreshold : 2.0
   , mouseSelectorSize          : 15.0
   , edgeConfluence             : Range.Closed { min: 0.0, max: 1.0 }
+  , edgeWeight                 : Range.Closed { min: 0.0, max: 1.0 }
   , graphStage                 : GET.Init
   , nodeSize                   : Range.Closed { min: 0.0, max: 100.0 }
   --, showLouvain                : false

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

@@ -53,6 +53,7 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
     { edgeConfluence
     , edgeConfluenceRange
     , edgeWeight
+    , edgeWeightRange
     , forceAtlasState
     , noverlapState
     , graph
@@ -80,7 +81,7 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
     selectedNodeIds'      <- R2.useLive' selectedNodeIds
     showSidebar'          <- R2.useLive' showSidebar
     edgeConfluenceRange'  <- R2.useLive' edgeConfluenceRange
-    edgeWeight'           <- R2.useLive' edgeWeight
+    edgeWeightRange'      <- R2.useLive' edgeWeightRange
     nodeSizeRange'        <- R2.useLive' nodeSizeRange
 
     -- session <- useSession
@@ -210,7 +211,7 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
               gap, gap
              , edgeWeightControl
                 { forceAtlasState
-                , range: edgeWeight'
+                , range: edgeWeightRange'
                 , state: edgeWeight }
             ]
           ,

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

@@ -6,6 +6,9 @@ module Gargantext.Components.GraphExplorer.Toolbar.RangeControl
   , nodeSizeControl
   ) where
 
+import Data.Tuple.Nested((/\))
+import Debug (spy)
+import Effect.Debounce as Debounce
 import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -54,20 +57,50 @@ edgeConfluenceControlCpt :: R.Component EdgeConfluenceControlProps
 edgeConfluenceControlCpt = here.component "edgeConfluenceControl" cpt
   where
     cpt { forceAtlasState
+        , range
+        , state
+        } _ = do
+
+      let onChange' rng = do
+            -- here.log2 "[edgeWeightControl] debounce rng" rng
+            let _ = spy "debounce rng" rng
+            T.write_ rng state
+          onChange = Debounce.debounce onChange' 1000
+
+      pure $ edgeConfluenceControlInternal { forceAtlasState
+                                           , onChange
+                                           , range
+                                           , state }
+
+type EdgeConfluenceControlInternalProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , onChange :: Debounce.Debounce
+  , range           :: Range.NumberRange
+  , state           :: T.Box Range.NumberRange
+  )
+
+edgeConfluenceControlInternal :: R2.Leaf EdgeConfluenceControlInternalProps
+edgeConfluenceControlInternal = R2.leaf edgeConfluenceControlInternalCpt
+edgeConfluenceControlInternalCpt :: R.Component EdgeConfluenceControlInternalProps
+edgeConfluenceControlInternalCpt = here.component "edgeConfluenceControlInternal" cpt
+  where
+    cpt { forceAtlasState
+        , onChange
         , range: Range.Closed { min, max }
         , state
         } _ = do
+      
       forceAtlasState' <- R2.useLive' forceAtlasState
       state' <- T.useLive T.unequal state
 
       pure $ rangeControl {
-        caption: "Edge Confluence Weight"
+          caption: "Edge Confluence Weight"
         , sliderProps: {
             bounds: Range.Closed { min, max }
           , epsilon: 0.01
           , height: 5.0
           , initialValue: state'
-          , onChange: \rng -> T.write_ rng state
+          , onChange: \rng -> Debounce.call onChange rng
           , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
           , step: 1.0
           , width: 10.0
@@ -88,20 +121,72 @@ edgeWeightControlCpt :: R.Component EdgeWeightControlProps
 edgeWeightControlCpt = here.component "edgeWeightControl" cpt
   where
     cpt { forceAtlasState
+        , range: range@(Range.Closed { min, max })
+        , state
+        } _ = do
+
+      -- TODO
+      useTransition
+      let onChange' rng = do
+            -- here.log2 "[edgeWeightControl] debounce rng" rng
+            let _ = spy "debounce rng" rng
+            let _ = spy "debounce state" state
+            T.write_ rng state
+          onChange = Debounce.debounce onChange' 1000
+
+      forceAtlasState' <- R2.useLive' forceAtlasState
+      state' <- T.useLive T.unequal state
+      let _ = spy "[edgeWeightControlInteral] onChange" onChange
+
+      pure $ rangeControl {
+          caption: "Edge Weight"
+        , sliderProps: {
+            bounds: range
+          , initialValue: state'
+          , epsilon: (max - min) / 100.0
+          , height: 5.0
+          , onChange: \rng -> Debounce.call onChange rng
+          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+          , step: 1.0
+          , width: 10.0
+          }
+        }
+
+-- pure $ edgeWeightControlInternal { forceAtlasState
+      --                                  , onChange
+      --                                  , range
+      --                                  , state }
+
+type EdgeWeightControlInternalProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , onChange :: Debounce.Debounce
+  , range :: Range.NumberRange
+  , state :: T.Box Range.NumberRange
+  )
+
+edgeWeightControlInternal :: R2.Leaf EdgeWeightControlInternalProps
+edgeWeightControlInternal = R2.leaf edgeWeightControlInternalCpt
+edgeWeightControlInternalCpt :: R.Component EdgeWeightControlInternalProps
+edgeWeightControlInternalCpt = here.component "edgeWeightControlInternal" cpt
+  where
+    cpt { forceAtlasState
+        , onChange
         , range: Range.Closed { min, max }
         , state
         } _ = do
+      
       forceAtlasState' <- R2.useLive' forceAtlasState
       state' <- T.useLive T.unequal state
+      let _ = spy "[edgeWeightControlInteral] onChange" onChange
 
       pure $ rangeControl {
-        caption: "Edge Weight"
+          caption: "Edge Weight"
         , sliderProps: {
           bounds: Range.Closed { min, max }
           , initialValue: state'
           , epsilon: (max - min) / 100.0
           , height: 5.0
-          , onChange: \rng -> T.write_ rng state
+          , onChange: \rng -> Debounce.call onChange rng
           , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
           , step: 1.0
           , width: 10.0

src/Gargantext/Components/Nodes/Graph.purs

@@ -5,8 +5,7 @@ module Gargantext.Components.Nodes.Graph
 import Gargantext.Prelude
 
 import Data.Array as A
-import Data.Foldable (minimum, maximum)
-import Data.Maybe (Maybe(..), isJust, fromMaybe, maybe)
+import Data.Maybe (Maybe(..), isJust, maybe)
 import Data.Sequence as Seq
 import Data.Tuple (Tuple(..))
 import DOM.Simple (document, querySelector)
@@ -165,6 +164,11 @@ hydrateStoreCpt = here.component "hydrateStore" cpt where
     -- | Precompute some values
     -- |
 
+    let edgesWeightSorted = A.sortWith (_.weight) $ Seq.toUnfoldable $ SigmaxT.graphEdges graph
+    let edgeWeightMin = maybe 0.0 _.weight $ A.head edgesWeightSorted
+    let edgeWeightMax = maybe 100.0 _.weight $ A.last edgesWeightSorted
+    let edgeWeightRange = Range.Closed { min: edgeWeightMin, max: edgeWeightMax }
+
     let edgesConfluenceSorted = A.sortWith (_.confluence) $ Seq.toUnfoldable $ SigmaxT.graphEdges graph
     let edgeConfluenceMin = maybe 0.0 _.confluence $ A.head edgesConfluenceSorted
     let edgeConfluenceMax = maybe 100.0 _.confluence $ A.last edgesConfluenceSorted
@@ -188,13 +192,13 @@ hydrateStoreCpt = here.component "hydrateStore" cpt where
     --       { min: 0.0
     --       , max: I.toNumber $ Seq.length $ SigmaxT.graphEdges graph
     --       }
-    let weightsSeq = Seq.map _.weight $ SigmaxT.graphEdges graph
-    let edgeWeight = Range.Closed
-          { min: fromMaybe 0.0 $ minimum weightsSeq
-          , max: fromMaybe 1.0 $ maximum weightsSeq } :: Range.Closed Number
+    -- let weightsSeq = Seq.map _.weight $ SigmaxT.graphEdges graph
+    -- let edgeWeight = Range.Closed
+    --       { min: fromMaybe 0.0 $ minimum weightsSeq
+    --       , max: fromMaybe 1.0 $ maximum weightsSeq } :: Range.Closed Number
 
     let transformedGraph = transformGraph graph { edgeConfluence': GraphStore.options.edgeConfluence
-                                                , edgeWeight': edgeWeight
+                                                , edgeWeight': GraphStore.options.edgeWeight
                                                 , nodeSize': GraphStore.options.nodeSize
                                                 , removedNodeIds': GraphStore.options.removedNodeIds
                                                 , selectedNodeIds': GraphStore.options.selectedNodeIds
@@ -212,7 +216,8 @@ hydrateStoreCpt = here.component "hydrateStore" cpt where
       , startForceAtlas
       , forceAtlasState
       , noverlapState: SigmaxT.NoverlapPaused
-      , edgeWeight
+      -- , edgeWeight
+      , edgeWeightRange
       , edgeConfluenceRange
       , nodeSizeRange
       -- (cache options)

src/Gargantext/Utils/Reactix.js

 'use strict';
 
+import { useTransition } from 'react';
+
 export function _addRootElement(rootElem) {
     document.body.insertBefore(
         rootElem,
@@ -61,4 +63,6 @@ export function _scrollIntoView(el) {
         inline: 'center'
     });
 }
-   
\ No newline at end of file
+   
+
+export const useTransition;

src/Gargantext/Utils/Reactix.purs

@@ -648,3 +648,8 @@ setInputValue elNullableRef val = case toMaybe (R.readRef elNullableRef) of
     _ <- pure $ (el .= "value") val
     triggerEvent el "change"
     triggerEvent el "input"
+
+-- TODO useTransition?
+foreign import data Transition :: Type
+
+foreign import useTransitionImpl ::