Merge remote-tracking branch...

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

spago.dhall

@@ -40,6 +40,7 @@ to generate this file without the comments in this block.
   , "foreign"
   , "foreign-object"
   , "form-urlencoded"
+  , "formatters"
   , "formula"
   , "functions"
   , "graphql-client"
@@ -47,9 +48,7 @@ to generate this file without the comments in this block.
   , "integers"
   , "js-timers"
   , "lists"
-  -- , "markdown"
   , "markdown-it"
-  --, "markdown-smolder"
   , "maybe"
   , "media-types"
   , "milkis"
@@ -75,7 +74,6 @@ to generate this file without the comments in this block.
   , "simple-json"
   , "simple-json-generics"
   , "simplecrypto"
-  -- , "smolder"
   , "strings"
   , "strings-extra"
   , "stringutils"

src/Gargantext/Components/Bootstrap/Inline/Button.purs

@@ -20,24 +20,24 @@ type Props =
   )
 
 type Options =
-  ( status    :: ComponentStatus
-  , size      :: Sizing
-  , variant   :: ButtonVariant
-  , type      :: String
+  ( block     :: Boolean
   , className :: String
-  , block     :: Boolean
+  , size      :: Sizing
+  , status    :: ComponentStatus
   , title     :: String
+  , type      :: String
+  , variant   :: ButtonVariant
   )
 
 options :: Record Options
 options =
-  { status    : Enabled
-  , size      : MediumSize
-  , variant   : ButtonVariant Primary
-  , type      : "button"
+  { block     : false
   , className : ""
-  , block     : false
+  , status    : Enabled
+  , size      : MediumSize
   , title     : ""
+  , type      : "button"
+  , variant   : ButtonVariant Primary
   }
 
 -- | Structural Component for the Bootstrap button

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

@@ -11,15 +11,13 @@ module Gargantext.Components.GraphExplorer.Toolbar.Buttons
 import Prelude
 
 import Data.Array as A
-import Data.DateTime as DDT
-import Data.DateTime.Instant as DDI
 import Data.Either (Either(..))
-import Data.Enum (fromEnum)
+import Data.Formatter.DateTime as DFDT
 import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..))
 import Data.Sequence as Seq
-import Data.String as DS
 import DOM.Simple.Console (log2)
+import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
 import Effect.Now as EN
@@ -49,13 +47,25 @@ here = R2.here "Gargantext.Components.GraphExplorer.Toolbar.Button"
 
 ------------------------------------------------------
 
-centerButton :: R.Ref Sigmax.Sigma -> R.Element
-centerButton sigmaRef = B.button
-  { variant: OutlinedButtonVariant Secondary
-  , callback: \_ -> do
-      let sigma = R.readRef sigmaRef
-      Sigmax.dependOnSigma sigma "[centerButton] sigma: Nothing" $ \s ->
+type CenterButtonProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , sigmaRef        :: R.Ref Sigmax.Sigma )
+
+centerButton :: R2.Leaf CenterButtonProps
+centerButton = R2.leaf centerButtonCpt
+centerButtonCpt :: R.Component CenterButtonProps
+centerButtonCpt = here.component "centerButton" cpt
+  where
+    cpt { forceAtlasState
+        , sigmaRef } _ = do
+      forceAtlasState' <- R2.useLive' forceAtlasState
+
+      pure $ B.button
+        { callback: \_ -> do
+          Sigmax.dependOnSigma (R.readRef sigmaRef) "[centerButton] sigma: Nothing" $ \s ->
             Camera.updateCamera (Camera.camera s) Camera.defaultCamera
+        , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+        , variant: OutlinedButtonVariant Secondary
         }
         [ H.text "Center" ]
 
@@ -64,38 +74,41 @@ centerButton sigmaRef = B.button
 type CameraButtonProps =
   ( id              :: Int
   , hyperdataGraph  :: GET.HyperdataGraph
+  , forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , reloadForest    :: T2.ReloadS
   , session         :: Session
   , sigmaRef        :: R.Ref Sigmax.Sigma
-  , reloadForest   :: T2.ReloadS
   )
 
-
-cameraButton :: Record CameraButtonProps -> R.Element
-cameraButton { id
-             , hyperdataGraph: GET.HyperdataGraph { graph: GET.GraphData hyperdataGraph }
+screenshotFilename :: Effect String
+screenshotFilename = do
+  nowdt <- EN.nowDateTime
+  pure $ case DFDT.formatDateTime "YYYY-MM-DDTHH:mm:ss" nowdt of
+    Left err -> err
+    Right s -> s <> "-screenshot.png"
+
+cameraButton :: R2.Leaf CameraButtonProps
+cameraButton = R2.leaf cameraButtonCpt
+cameraButtonCpt :: R.Component CameraButtonProps
+cameraButtonCpt = here.component "cameraButton" cpt
+  where
+    cpt { id
+        , forceAtlasState
+        , hyperdataGraph: GET.HyperdataGraph { graph: GET.GraphData graphData' }
+        , reloadForest
         , session
-             , sigmaRef
-             , reloadForest } = B.button
+        , sigmaRef } _ = do
+      forceAtlasState' <- R2.useLive' forceAtlasState
 
-  { variant: OutlinedButtonVariant Secondary
-  , callback: \_ -> do
-      let sigma = R.readRef sigmaRef
-      Sigmax.dependOnSigma sigma "[cameraButton] sigma: Nothing" $ \s -> do
+      pure $ B.button
+        { callback: \_ -> do
+             filename <- screenshotFilename
+             Sigmax.dependOnSigma (R.readRef sigmaRef) "[cameraButton] sigma: Nothing" $ \s -> do
                screen <- Sigma.takeScreenshot s
-        now <- EN.now
-        let nowdt = DDI.toDateTime now
-            nowd = DDT.date nowdt
-            nowt = DDT.time nowdt
-            nowStr = DS.joinWith "-" [ show $ fromEnum $ DDT.year nowd
-                                     , show $ fromEnum $ DDT.month nowd
-                                     , show $ fromEnum $ DDT.day nowd
-                                     , show $ fromEnum $ DDT.hour nowt
-                                     , show $ fromEnum $ DDT.minute nowt
-                                     , show $ fromEnum $ DDT.second nowt ]
                let graph = Sigma.graph s
                    edges = Graphology.edges graph
                    nodes = Graphology.nodes graph
-            graphData = GET.GraphData $ hyperdataGraph { edges = A.fromFoldable $ Seq.map GEU.stEdgeToGET edges
+                   graphData = GET.GraphData $ graphData' { edges = A.fromFoldable $ Seq.map GEU.stEdgeToGET edges
                                                           , nodes = A.fromFoldable $ GEU.normalizeNodes $ Seq.map GEU.stNodeToGET nodes }
                let camera = Camera.toCamera $ Camera.camera s
                let hyperdataGraph' = GET.HyperdataGraph { graph: graphData, mCamera: Just camera }
@@ -104,13 +117,14 @@ cameraButton { id
                  case eClonedGraphId of
                    Left err -> liftEffect $ log2 "[cameraButton] RESTError" err
                    Right clonedGraphId -> do
-              eRet <- uploadArbitraryData session clonedGraphId Plain (Just $ nowStr <> "-" <> "screenshot.png") screen
+                     eRet <- uploadArbitraryData session clonedGraphId Plain (Just filename) screen
                      case eRet of
                        Left err -> liftEffect $ log2 "[cameraButton] RESTError" err
                        Right _ret -> do
                          liftEffect $ T2.reload reloadForest
-  }
-  [ H.text "Screenshot" ]
+        , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+        , variant: OutlinedButtonVariant Secondary
+        } [ H.text "Screenshot" ]
 
 ------------------------------------------------------
 
@@ -129,28 +143,23 @@ edgesToggleButtonCpt = here.component "edgesToggleButton" cpt
       state'      <- R2.useLive' state
       stateAtlas' <- R2.useLive' stateAtlas
 
-      -- Computed
-      let
-        cst SigmaxTypes.InitialRunning  = Disabled
-        cst SigmaxTypes.Running         = Disabled
-        cst _                           = Enabled
-
       -- Render
       pure $
         B.button
-        { variant: state' == SigmaxTypes.EShow ?
+        { -- TODO: Move this to Graph.purs to the R.useEffect handler which renders nodes/edges
+          callback: \_ -> T.modify_ SigmaxTypes.toggleShowEdgesState state
+        , status: SigmaxTypes.forceAtlasComponentStatus stateAtlas'
+        , variant: state' == SigmaxTypes.EShow ?
             ButtonVariant Secondary $
             OutlinedButtonVariant Secondary
-        , status: cst stateAtlas'
-          -- TODO: Move this to Graph.purs to the R.useEffect handler which renders nodes/edges
-        , callback: \_ -> T.modify_ SigmaxTypes.toggleShowEdgesState state
         }
         [ H.text "Edges" ]
 
 ------------------------------------------------------
 
 type LouvainToggleButtonProps =
-  ( state :: T.Box Boolean
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , state           :: T.Box Boolean
   )
 
 louvainToggleButton :: R2.Leaf LouvainToggleButtonProps
@@ -158,16 +167,17 @@ louvainToggleButton = R2.leaf louvainToggleButtonCpt
 louvainToggleButtonCpt :: R.Component LouvainToggleButtonProps
 louvainToggleButtonCpt = here.component "louvainToggleButton" cpt
   where
-    cpt { state } _ = do
+    cpt { forceAtlasState, state } _ = do
       state' <- R2.useLive' state
+      forceAtlasState' <- R2.useLive' forceAtlasState
 
       pure $
-
         B.button
-        { variant: state' ?
+        { callback: \_ -> T.modify_ (not) state
+        , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+        , variant: state' ?
             ButtonVariant Secondary $
             OutlinedButtonVariant Secondary
-        , callback: \_ -> T.modify_ (not) state
         }
         [ H.text "Louvain" ]
 
@@ -238,7 +248,7 @@ resetForceAtlasButtonCpt = here.component "resetForceAtlasToggleButton" cpt
     onClick forceAtlasState sigmaRef _ = do
       -- TODO Sigma.killForceAtlas2 sigma
       -- startForceAtlas2 sigma
-      Sigmax.dependOnSigma (R.readRef sigmaRef) "[resetForceAtlasButton] no sigma" $ \sigma -> do
+      Sigmax.dependOnSigma (R.readRef sigmaRef) "[resetForceAtlasButton] no sigma" $ \_sigma -> do
         -- TODO Use fa2Ref instead of sigmaRef
         --Sigma.killForceAtlas2 sigma
         --Sigma.refreshForceAtlas sigma Graph.forceAtlas2Settings
@@ -247,7 +257,8 @@ resetForceAtlasButtonCpt = here.component "resetForceAtlasToggleButton" cpt
 ------------------------------------------------------------------
 
 type MultiSelectEnabledButtonProps =
-  ( state       :: T.Box Boolean
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , state           :: T.Box Boolean
   )
 
 multiSelectEnabledButton :: R2.Leaf MultiSelectEnabledButtonProps
@@ -255,29 +266,31 @@ multiSelectEnabledButton = R2.leaf multiSelectEnabledButtonCpt
 multiSelectEnabledButtonCpt :: R.Component MultiSelectEnabledButtonProps
 multiSelectEnabledButtonCpt = here.component "multiSelectEnabledButton" cpt
   where
-    cpt { state } _ = do
+    cpt { forceAtlasState, state } _ = do
       state' <- R2.useLive' state
+      forceAtlasState' <- R2.useLive' forceAtlasState
 
       pure $
-
         H.div
         { className: "btn-group"
         , role: "group"
         }
         [
           B.button
-          { variant: state' ?
+          { callback: \_ -> T.write_ false state
+          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+          , variant: state' ?
               OutlinedButtonVariant Secondary $
               ButtonVariant Secondary
-          , callback: \_ -> T.write_ false state
           }
           [ H.text "Single" ]
         ,
           B.button
-          { variant: state' ?
+          { callback: \_ -> T.write_ true state
+          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+          , variant: state' ?
               ButtonVariant Secondary $
               OutlinedButtonVariant Secondary
-          , callback: \_ -> T.write_ true state
           }
           [ H.text "Multiple" ]
         ]

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

@@ -16,7 +16,7 @@ import Gargantext.Components.GraphExplorer.Resources as Graph
 import Gargantext.Components.GraphExplorer.Store as GraphStore
 import Gargantext.Components.GraphExplorer.Toolbar.Buttons (centerButton, cameraButton, edgesToggleButton, louvainToggleButton, pauseForceAtlasButton, multiSelectEnabledButton)
 import Gargantext.Components.GraphExplorer.Toolbar.RangeControl (edgeConfluenceControl, edgeWeightControl, nodeSizeControl)
-import Gargantext.Components.GraphExplorer.Toolbar.SlideButton (labelSizeButton, labelRenderedSizeThresholdButton, mouseSelectorSizeButton)
+import Gargantext.Components.GraphExplorer.Toolbar.SlideButton (labelSizeButton, labelRenderedSizeThresholdButton, mouseSelectorSizeSlider)
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Session (useSession)
 import Gargantext.Hooks.Sigmax.ForceAtlas2 as ForceAtlas
@@ -184,10 +184,11 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             ,
               cameraButton
               { id: graphId'
+              , forceAtlasState
               , hyperdataGraph: hyperdataGraph'
+              , reloadForest
               , session: session
               , sigmaRef: sigmaRef
-              , reloadForest
               }
             ]
           ,
@@ -197,7 +198,8 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             , titleSlot: H.text "View settings"
             }
             [
-              centerButton sigmaRef
+              centerButton { forceAtlasState
+                           , sigmaRef }
             ,
               gap
             ,
@@ -208,7 +210,8 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             ,
               gap
             ,
-              louvainToggleButton { state: showLouvain }
+              louvainToggleButton { forceAtlasState
+                                  , state: showLouvain }
             ]
           ]
         ,
@@ -222,13 +225,16 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
           }
           [
             -- zoom: 0 -100 - calculate ratio
-            multiSelectEnabledButton { state: multiSelectEnabled }
+            multiSelectEnabledButton { forceAtlasState
+                                     , state: multiSelectEnabled }
           ,
             gap
           ,
             -- toggle multi node selection
             -- save button
-            mouseSelectorSizeButton sigmaRef mouseSelectorSize
+            mouseSelectorSizeSlider { forceAtlasState
+                                    , sigmaRef
+                                    , state: mouseSelectorSize }
           ]
         ]
       ,
@@ -262,7 +268,9 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             -- run demo
             -- search button
             -- search topics
-            labelSizeButton sigmaRef labelSize
+            labelSizeButton { forceAtlasState
+                            , sigmaRef
+                            , state: labelSize }
           ,
             -- labels size: 1-4
             nodeSizeControl
@@ -279,7 +287,9 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             -- run demo
             -- search button
             -- search topics
-            labelRenderedSizeThresholdButton sigmaRef labelRenderedSizeThreshold
+            labelRenderedSizeThresholdButton { forceAtlasState
+                                             , sigmaRef
+                                             , state: labelRenderedSizeThreshold }
           -- ,
           --   -- labels size: 1-4
           --   nodeSizeControl

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

@@ -3,7 +3,7 @@ module Gargantext.Components.GraphExplorer.Toolbar.SlideButton
   , sizeButton
   , labelSizeButton
   , labelRenderedSizeThresholdButton
-  , mouseSelectorSizeButton
+  , mouseSelectorSizeSlider
   ) where
 
 import Data.Maybe (Maybe(..))
@@ -14,8 +14,10 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
 
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(Disabled))
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
+import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Utils.Reactix as R2
 
 here :: R2.Here
@@ -23,6 +25,7 @@ here = R2.here "Gargantext.Components.GraphExplorer.Toolbar.SlideButton"
 
 type Props =
   ( caption         :: String
+  , forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
   , min             :: Number
   , max             :: Number
   , onChange        :: forall e. e -> Effect Unit
@@ -33,8 +36,11 @@ sizeButton :: Record Props -> R.Element
 sizeButton props = R.createElement sizeButtonCpt props []
 sizeButtonCpt :: R.Component Props
 sizeButtonCpt = here.component "sizeButton" cpt where
-  cpt { state, caption, min, max, onChange } _ = do
+  cpt { state, caption, forceAtlasState, min, max, onChange } _ = do
     defaultValue <- T.useLive T.unequal state
+    forceAtlasState' <- R2.useLive' forceAtlasState
+
+    let status = SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
 
     pure $
 
@@ -55,15 +61,26 @@ sizeButtonCpt = here.component "sizeButton" cpt where
           , defaultValue
           , on: { input: onChange }
           , className: "range-simple__input"
+          , disabled: status == Disabled
           }
         ]
       ]
 
-labelSizeButton :: R.Ref Sigmax.Sigma -> T.Box Number -> R.Element
-labelSizeButton sigmaRef state =
-  sizeButton {
+type LabelSizeButtonProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , sigmaRef :: R.Ref Sigmax.Sigma
+  , state    :: T.Box Number)
+
+labelSizeButton :: R2.Leaf LabelSizeButtonProps
+labelSizeButton = R2.leaf labelSizeButtonCpt
+labelSizeButtonCpt :: R.Component LabelSizeButtonProps
+labelSizeButtonCpt = here.component "labelSizeButton" cpt
+  where
+    cpt { forceAtlasState, sigmaRef, state} _ = do
+      pure $ sizeButton {
           state
         , caption: "Label size"
+        , forceAtlasState
         , min: 1.0
         , max: 30.0
         , onChange: \e -> do
@@ -83,11 +100,21 @@ labelSizeButton sigmaRef state =
                 T.write_ newValue state
         }
 
-labelRenderedSizeThresholdButton :: R.Ref Sigmax.Sigma -> T.Box Number -> R.Element
-labelRenderedSizeThresholdButton sigmaRef state =
-  sizeButton {
+type LabelRenderedSizeThresholdButtonProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , sigmaRef :: R.Ref Sigmax.Sigma
+  , state    :: T.Box Number)
+
+labelRenderedSizeThresholdButton :: R2.Leaf LabelRenderedSizeThresholdButtonProps
+labelRenderedSizeThresholdButton = R2.leaf labelRenderedSizeThresholdButtonCpt
+labelRenderedSizeThresholdButtonCpt :: R.Component LabelRenderedSizeThresholdButtonProps
+labelRenderedSizeThresholdButtonCpt = here.component "labelRenderedSizeThresholdButton" cpt
+  where
+    cpt { forceAtlasState, sigmaRef, state} _ = do
+      pure $ sizeButton {
         state
         , caption: "Label rendered size threshold"
+        , forceAtlasState
         , min: 0.0
         , max: 10.0
         , onChange: \e -> do
@@ -103,11 +130,20 @@ labelRenderedSizeThresholdButton sigmaRef state =
                 T.write_ newValue state
         }
 
-mouseSelectorSizeButton :: R.Ref Sigmax.Sigma -> T.Box Number -> R.Element
-mouseSelectorSizeButton sigmaRef state =
-  sizeButton {
-      state
-    , caption: "Selector size (Shift + wheel)"
+type MouseSelectorSizeSliderProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , sigmaRef :: R.Ref Sigmax.Sigma
+  , state    :: T.Box Number)
+
+mouseSelectorSizeSlider :: R2.Leaf MouseSelectorSizeSliderProps
+mouseSelectorSizeSlider = R2.leaf mouseSelectorSizeSliderCpt
+mouseSelectorSizeSliderCpt :: R.Component MouseSelectorSizeSliderProps
+mouseSelectorSizeSliderCpt = here.component "mouseSelectorSizeSlider" cpt
+  where
+    cpt { forceAtlasState, sigmaRef, state } _ = do
+      pure $ sizeButton {
+          caption: "Selector size (Shift + wheel)"
+        , forceAtlasState
         , min: 1.0
         , max: 50.0
         , onChange: \e -> do
@@ -121,4 +157,5 @@ mouseSelectorSizeButton sigmaRef state =
                   mouseSelectorSize: newValue
                   }
                 T.write_ newValue state
+        , state
         }

src/Gargantext/Hooks/Sigmax/Types.purs

@@ -13,6 +13,7 @@ import Data.Tuple (Tuple(..))
 import Partial.Unsafe (unsafePartial)
 import Prelude (class Eq, class Show, map, ($), (&&), (==), (||), (<$>), (<), mod, not)
 
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
 import Gargantext.Components.GraphExplorer.GraphTypes as GEGT
 import Gargantext.Data.Louvain as Louvain
 import Gargantext.Types as GT
@@ -172,6 +173,15 @@ toggleForceAtlasState Running = Paused
 toggleForceAtlasState Paused = Running
 toggleForceAtlasState Killed = InitialRunning
 
+
+forceAtlasComponentStatus :: ForceAtlasState -> ComponentStatus
+forceAtlasComponentStatus InitialRunning = Disabled
+forceAtlasComponentStatus InitialStopped = Enabled
+forceAtlasComponentStatus Running = Disabled
+forceAtlasComponentStatus Paused = Enabled
+forceAtlasComponentStatus Killed = Enabled
+
+
 -- | Custom state for show edges. Normally it is EShow or EHide (show/hide
 -- | edges). However, edges are temporarily turned off when forceAtlas is
 -- | running.
@@ -219,10 +229,8 @@ forceAtlasEdgeState Killed es = es
 -- | Return state in which labels should be depending on forceAtlasState
 forceAtlasLabelState :: ForceAtlasState -> Boolean
 forceAtlasLabelState InitialRunning = false
-forceAtlasLabelState InitialStopped = true
 forceAtlasLabelState Running        = false
-forceAtlasLabelState Paused = true
-forceAtlasLabelState Killed = true
+forceAtlasLabelState _              = true