Merge remote-tracking branch 'origin/451-dev-disable-controls-when-forceatlas-is-running' into dev

dist/styles/bootstrap-darkster.css

@@ -9030,6 +9030,9 @@ a:focus {
 .range-slider__knob:focus {
   outline: 0;
 }
+.range-slider__knob.disabled {
+  cursor: not-allowed;
+}
 .range-slider__knob:hover {
   background-color: #0a0a0a;
 }
@@ -9064,6 +9067,9 @@ a:focus {
 .range-simple__field {
   position: relative;
 }
+.range-simple input[disabled] {
+  cursor: not-allowed;
+}
 
 input[type=range] {
   cursor: pointer;

dist/styles/bootstrap-default.css

@@ -8983,6 +8983,9 @@ a:focus {
 .range-slider__knob:focus {
   outline: 0;
 }
+.range-slider__knob.disabled {
+  cursor: not-allowed;
+}
 .range-slider__knob:hover {
   background-color: #0056b3;
 }
@@ -9017,6 +9020,9 @@ a:focus {
 .range-simple__field {
   position: relative;
 }
+.range-simple input[disabled] {
+  cursor: not-allowed;
+}
 
 input[type=range] {
   cursor: pointer;

dist/styles/bootstrap-greyson.css

@@ -8739,6 +8739,9 @@ a:focus {
 .range-slider__knob:focus {
   outline: 0;
 }
+.range-slider__knob.disabled {
+  cursor: not-allowed;
+}
 .range-slider__knob:hover {
   background-color: #4d5861;
 }
@@ -8773,6 +8776,9 @@ a:focus {
 .range-simple__field {
   position: relative;
 }
+.range-simple input[disabled] {
+  cursor: not-allowed;
+}
 
 input[type=range] {
   cursor: pointer;

dist/styles/bootstrap-herbie.css

@@ -8987,6 +8987,9 @@ a:focus {
 .range-slider__knob:focus {
   outline: 0;
 }
+.range-slider__knob.disabled {
+  cursor: not-allowed;
+}
 .range-slider__knob:hover {
   background-color: #f12a3f;
 }
@@ -9021,6 +9024,9 @@ a:focus {
 .range-simple__field {
   position: relative;
 }
+.range-simple input[disabled] {
+  cursor: not-allowed;
+}
 
 input[type=range] {
   cursor: pointer;

dist/styles/bootstrap-monotony.css

@@ -8988,6 +8988,9 @@ a:focus {
 .range-slider__knob:focus {
   outline: 0;
 }
+.range-slider__knob.disabled {
+  cursor: not-allowed;
+}
 .range-slider__knob:hover {
   background-color: #404040;
 }
@@ -9022,6 +9025,9 @@ a:focus {
 .range-simple__field {
   position: relative;
 }
+.range-simple input[disabled] {
+  cursor: not-allowed;
+}
 
 input[type=range] {
   cursor: pointer;

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

@@ -252,11 +252,13 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
           { className: "d-flex justify-content-between mb-3" }
           [
             edgeConfluenceControl
-            { range: edgeConfluenceRange
+            { forceAtlasState
+            , range: edgeConfluenceRange
             , state: edgeConfluence }
           ,
             edgeWeightControl
-            { range: edgeWeightRange
+            { forceAtlasState
+            , range: edgeWeightRange
             , state: edgeWeight }
           ]
         ,
@@ -274,7 +276,8 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
           ,
             -- labels size: 1-4
             nodeSizeControl
-            { range: nodeSizeRange
+            { forceAtlasState
+            , range: nodeSizeRange
             , state: nodeSize }
 
           ]

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

@@ -12,6 +12,7 @@ import Reactix.DOM.HTML as H
 import Toestand as T
 
 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
 
@@ -28,23 +29,23 @@ rangeControl = R2.leaf rangeControlCpt
 rangeControlCpt :: R.Component Props
 rangeControlCpt = here.component "rangeButton" cpt
   where
-    cpt {caption, sliderProps} _ = pure $
-
-      H.span
-      { className: "range-control" }
-      [
-        H.label
-        { className: "range-control__label" }
-        [ H.text caption ]
-      ,
-        RS.rangeSlider sliderProps
-      ]
+    cpt { caption, sliderProps } _ = do
+      pure $ H.span
+        { className: "range-control" }
+        [
+          H.label
+          { className: "range-control__label" }
+          [ H.text caption ]
+        ,
+          RS.rangeSlider sliderProps
+        ]
 
 ----------------------------------------
 
 type EdgeConfluenceControlProps =
-  ( range :: Range.NumberRange
-  , state :: T.Box Range.NumberRange
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , range           :: Range.NumberRange
+  , state           :: T.Box Range.NumberRange
   )
 
 edgeConfluenceControl :: R2.Leaf EdgeConfluenceControlProps
@@ -52,28 +53,32 @@ edgeConfluenceControl = R2.leaf edgeConfluenceControlCpt
 edgeConfluenceControlCpt :: R.Component EdgeConfluenceControlProps
 edgeConfluenceControlCpt = here.component "edgeConfluenceControl" cpt
   where
-    cpt { range: Range.Closed { min, max }
+    cpt { forceAtlasState
+        , range: Range.Closed { min, max }
         , state
         } _ = do
+      forceAtlasState' <- R2.useLive' forceAtlasState
       state' <- T.useLive T.unequal state
 
       pure $ rangeControl {
         caption: "Edge Confluence Weight"
         , sliderProps: {
-          bounds: Range.Closed { min, max }
-          , initialValue: state'
+            bounds: Range.Closed { min, max }
           , epsilon: 0.01
-          , step: 1.0
-          , width: 10.0
           , height: 5.0
+          , initialValue: state'
           , onChange: \rng -> T.write_ rng state
+          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+          , step: 1.0
+          , width: 10.0
           }
         }
 
 --------------------------------------
 
 type EdgeWeightControlProps =
-  ( range :: Range.NumberRange
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , range :: Range.NumberRange
   , state :: T.Box Range.NumberRange
   )
 
@@ -82,9 +87,11 @@ edgeWeightControl = R2.leaf edgeWeightControlCpt
 edgeWeightControlCpt :: R.Component EdgeWeightControlProps
 edgeWeightControlCpt = here.component "edgeWeightControl" cpt
   where
-    cpt { range: Range.Closed { min, max }
+    cpt { forceAtlasState
+        , range: Range.Closed { min, max }
         , state
         } _ = do
+      forceAtlasState' <- R2.useLive' forceAtlasState
       state' <- T.useLive T.unequal state
 
       pure $ rangeControl {
@@ -93,19 +100,20 @@ edgeWeightControlCpt = here.component "edgeWeightControl" cpt
           bounds: Range.Closed { min, max }
           , initialValue: state'
           , epsilon: 1.0
+          , height: 5.0
+          , onChange: \rng -> T.write_ rng state
+          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
           , step: 1.0
           , width: 10.0
-          , height: 5.0
-          , onChange: \rng -> do
-            T.write_ rng state
           }
         }
 
 --------------------------------------
 
 type NodeSideControlProps =
-  ( range :: Range.NumberRange
-  , state :: T.Box Range.NumberRange
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , range           :: Range.NumberRange
+  , state           :: T.Box Range.NumberRange
   )
 
 nodeSizeControl :: R2.Leaf NodeSideControlProps
@@ -113,10 +121,12 @@ nodeSizeControl = R2.leaf nodeSizeControlCpt
 nodeSizeControlCpt :: R.Component NodeSideControlProps
 nodeSizeControlCpt = here.component "nodeSizeControl" cpt
   where
-    cpt { range: Range.Closed { min, max }
+    cpt { forceAtlasState
+        , range: Range.Closed { min, max }
         , state
         } _ = do
-      state' <- T.useLive T.unequal state
+      forceAtlasState' <- R2.useLive' forceAtlasState
+      state' <- R2.useLive' state
 
       pure $ rangeControl {
         caption: "Node Size"
@@ -124,9 +134,10 @@ nodeSizeControlCpt = here.component "nodeSizeControl" cpt
           bounds: Range.Closed { min, max }
           , initialValue: state'
           , epsilon: 0.1
-          , step: 1.0
-          , width: 10.0
           , height: 5.0
           , onChange: \rng -> T.write_ rng state
+          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+          , step: 1.0
+          , width: 10.0
           }
         }

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

@@ -68,8 +68,8 @@ sizeButtonCpt = here.component "sizeButton" cpt where
 
 type LabelSizeButtonProps =
   ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
-  , sigmaRef :: R.Ref Sigmax.Sigma
-  , state    :: T.Box Number)
+  , sigmaRef        :: R.Ref Sigmax.Sigma
+  , state           :: T.Box Number)
 
 labelSizeButton :: R2.Leaf LabelSizeButtonProps
 labelSizeButton = R2.leaf labelSizeButtonCpt

src/Gargantext/Components/Nodes/Graph.purs

@@ -13,7 +13,6 @@ import Data.Tuple.Nested ((/\))
 import Gargantext.Components.App.Store as AppStore
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.GraphExplorer.API as GraphAPI
-import Gargantext.Components.GraphExplorer.GraphTypes as GEGT
 import Gargantext.Components.GraphExplorer.Layout (convert, layout)
 import Gargantext.Components.GraphExplorer.Store as GraphStore
 import Gargantext.Components.GraphExplorer.Types as GET

src/Gargantext/Components/RangeSlider.purs

@@ -27,6 +27,7 @@ import Toestand as T
 
 import Gargantext.Prelude
 
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
 import Gargantext.Utils.Math (roundToMultiple)
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
@@ -42,14 +43,15 @@ type Epsilon = Number
 -- and 'max' as being the bounds of the scale and 'low' and 'high' as
 -- being the selected values
 type Props =
-  ( bounds :: Bounds                  -- The minimum and maximum values it is possible to select
+  ( bounds       :: Bounds                  -- The minimum and maximum values it is possible to select
   , initialValue :: Range.NumberRange -- The user's selection of minimum and maximum values
-  , epsilon :: Number                 -- The smallest possible change (for mouse)
-  , step :: Number                    -- The 'standard' change (for keyboard)
-  -- , axis :: Axis                   -- Which direction to move in
-  , width :: Number
-  , height :: Number
-  , onChange :: Range.NumberRange -> Effect Unit )
+  , epsilon      :: Number                 -- The smallest possible change (for mouse)
+  , step         :: Number                    -- The 'standard' change (for keyboard)
+  -- , axis      :: Axis                   -- Which direction to move in
+  , width        :: Number
+  , height       :: Number
+  , onChange     :: Range.NumberRange -> Effect Unit
+  , status       :: ComponentStatus )
 
 data Knob = MinKnob | MaxKnob
 derive instance Generic Knob _
@@ -129,8 +131,8 @@ rangeSliderCpt = here.component "rangeSlider" cpt
       pure $ H.div { className, aria }
         [ renderScale scaleElem props value'
         , renderScaleSel scaleSelElem props value'
-        , renderKnob MinKnob lowElem  value' props.bounds dragKnob precision
-        , renderKnob MaxKnob highElem value' props.bounds dragKnob precision
+        , renderKnob MinKnob lowElem  value' props.bounds dragKnob precision props.status
+        , renderKnob MaxKnob highElem value' props.bounds dragKnob precision props.status
         ]
     className = "range-slider"
     aria = { label: "Range Slider Control. Expresses filtering data by a minimum and maximum value range through two slider knobs. Knobs can be adjusted with the arrow keys." }
@@ -184,22 +186,24 @@ renderScaleSel ref props (Range.Closed {min, max}) =
     formatter n = (DNF.toStringWith (DNF.fixed 0) n) <> "%"
 
 
-renderKnob :: Knob -> R.Ref (Nullable DOM.Element) -> Range.NumberRange -> Bounds -> T.Box (Maybe Knob) -> Int -> R.Element
-renderKnob knob ref (Range.Closed value) bounds set precision =
+renderKnob :: Knob -> R.Ref (Nullable DOM.Element) -> Range.NumberRange -> Bounds -> T.Box (Maybe Knob) -> Int -> ComponentStatus -> R.Element
+renderKnob knob ref (Range.Closed value) bounds set precision status =
   H.div { ref, tabIndex, className, aria, on: { mouseDown: onMouseDown }, style } [
-      H.div { className: "range-slider__placeholder" }
+      H.div { className: "range-slider__placeholder " }
         [
           H.text $ DNF.toStringWith (DNF.precision precision) val
         ]
   ]
   where
     tabIndex = 0
-    className = "range-slider__knob"
+    className = "range-slider__knob " <> (show status)
     aria = { label: labelPrefix knob <> "value: " <> show val }
     labelPrefix :: Knob -> String
     labelPrefix MinKnob = "Minimum "
     labelPrefix MaxKnob = "Maximum "
-    onMouseDown _ = T.write_ (Just knob) set
+    onMouseDown _ = case status of
+      Disabled -> pure unit
+      _ -> T.write_ (Just knob) set
     percOffset = Range.normalise bounds val
     style = { left: (show $ 100.0 * percOffset) <> "%" }
     val :: Number

src/sass/base/_range_slider.sass

@@ -64,6 +64,9 @@ $knob-size: 14px
     // alignement with the bar
     transform: translateX(-5px) translateY(-3px)
 
+    &.disabled
+      cursor: not-allowed
+
     &:hover
       background-color: darken($range-bg-progress-color, 15%)
 
@@ -102,6 +105,9 @@ $knob-size: 14px
   &__field
     position: relative
 
+  & input[disabled]
+    cursor: not-allowed
+
 ////////////////////////////////////////////
 
 // Cross browser rules