[graph] screenshot work

src/Gargantext/Components/Forest/Tree/Node/Action/Upload.purs

@@ -307,7 +307,16 @@ uploadArbitraryFile session nodeType id {mName, blob: UploadFileBlob blob} = do
     else
       throwError $ error $ "[uploadArbitraryFile] NodeType " <> (show nodeType) <> " not supported"
 
-    contents' <- readAsDataURL blob
+    contents <- readAsDataURL blob
+    uploadArbitraryDataURL session nodeType id mName contents
+
+uploadArbitraryDataURL :: Session
+                       -> GT.NodeType
+                       -> ID
+                       -> Maybe String
+                       -> String
+                       -> Aff GT.AsyncTaskWithType
+uploadArbitraryDataURL session nodeType id mName contents' = do
     let re = unsafePartial $ fromRight $ DSR.regex "data:.*;base64," DSRF.noFlags
         contents = DSR.replace re "" contents'
     task <- postWwwUrlencoded session p (bodyParams contents)

src/Gargantext/Components/GraphExplorer.purs

@@ -37,11 +37,9 @@ import Gargantext.Types as Types
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 
-type GraphId = Int
-
 type LayoutProps =
   ( frontends :: Frontends
-  , graphId :: GraphId
+  , graphId :: GET.GraphId
   , handed :: Types.Handed
   , mCurrentRoute :: AppRoute
   , session :: Session
@@ -101,7 +99,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
       dataRef <- R.useRef graph
       graphRef <- R.useRef null
       graphVersionRef       <- R.useRef (fst graphVersion)
-      controls              <- Controls.useGraphControls graph
+      controls              <- Controls.useGraphControls graph graphId session
       multiSelectEnabledRef <- R.useRef $ fst controls.multiSelectEnabled
 
       R.useEffect' $ do
@@ -203,7 +201,7 @@ type TreeProps =
 type MSidebarProps =
   ( frontends       :: Frontends
   , graph           :: SigmaxT.SGraph
-  , graphId         :: GraphId
+  , graphId         :: GET.GraphId
   , graphVersion    :: R.State Int
   , removedNodeIds  :: R.State SigmaxT.NodeIds
   , showSidePanel   :: R.State GET.SidePanelState
@@ -215,7 +213,7 @@ type MSidebarProps =
 type GraphProps = (
     controls :: Record Controls.Controls
   , elRef :: R.Ref (Nullable Element)
-  , graphId :: GraphId
+  , graphId :: GET.GraphId
   , graph :: SigmaxT.SGraph
   , multiSelectEnabledRef :: R.Ref Boolean
 )
@@ -305,7 +303,7 @@ modeGraphType Types.Sources = "star"
 modeGraphType Types.Terms = "def"
 
 
-getNodes :: Session -> R.State Int -> GraphId -> Aff GET.GraphData
+getNodes :: Session -> R.State Int -> GET.GraphId -> Aff GET.GraphData
 getNodes session (graphVersion /\ _) graphId = get session $ NodeAPI Types.Graph (Just graphId) ("?version=" <> show graphVersion)
 
 

src/Gargantext/Components/GraphExplorer/Button.purs

@@ -2,15 +2,23 @@ module Gargantext.Components.GraphExplorer.Button
   ( centerButton
   , Props
   , simpleButton
+  , cameraButton
   ) where
 
 import Prelude
+
+import Data.Maybe (Maybe(..))
+import DOM.Simple.Console (log2)
 import Effect (Effect)
+import Effect.Aff (launchAff_)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
+import Gargantext.Components.Forest.Tree.Node.Action.Upload (uploadArbitraryDataURL)
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
+import Gargantext.Sessions (Session)
+import Gargantext.Types as GT
 
 type Props = (
     onClick :: forall e. e -> Effect Unit
@@ -40,3 +48,16 @@ centerButton sigmaRef = simpleButton {
         Sigma.goToAllCameras s {x: 0.0, y: 0.0, ratio: 1.0, angle: 0.0}
   , text: "Center"
   }
+
+
+cameraButton :: Session -> Int -> R.Ref Sigmax.Sigma -> R.Element
+cameraButton session id sigmaRef = simpleButton {
+    onClick: \_ -> do
+      let sigma = R.readRef sigmaRef
+      Sigmax.dependOnSigma sigma "[cameraButton] sigma: Nothing" $ \s -> do
+        screen <- Sigma.takeScreenshot s
+        log2 "[cameraButton] screenshot" screen
+        launchAff_ $ do
+          uploadArbitraryDataURL session GT.Graph id (Just "screenshot.png") screen
+  , text: "Screenshot"
+  }

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -21,7 +21,7 @@ import Reactix as R
 import Reactix.DOM.HTML as RH
 
 import Gargantext.Components.Graph as Graph
-import Gargantext.Components.GraphExplorer.Button (centerButton)
+import Gargantext.Components.GraphExplorer.Button (centerButton, cameraButton)
 import Gargantext.Components.GraphExplorer.RangeControl (edgeConfluenceControl, edgeWeightControl, nodeSizeControl)
 import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
 import Gargantext.Components.GraphExplorer.SlideButton (labelSizeButton, mouseSelectorSizeButton)
@@ -29,6 +29,7 @@ import Gargantext.Components.GraphExplorer.ToggleButton (multiSelectEnabledButto
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
+import Gargantext.Sessions (Session)
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 
@@ -37,11 +38,13 @@ type Controls =
   , edgeWeight :: R.State Range.NumberRange
   , forceAtlasState :: R.State SigmaxT.ForceAtlasState
   , graph           :: SigmaxT.SGraph
+  , graphId         :: GET.GraphId
   , graphStage      :: R.State Graph.Stage
   , multiSelectEnabled :: R.State Boolean
   , nodeSize        :: R.State Range.NumberRange
   , removedNodeIds  :: R.State SigmaxT.NodeIds
   , selectedNodeIds :: R.State SigmaxT.NodeIds
+  , session         :: Session
   , showControls    :: R.State Boolean
   , showEdges       :: R.State SigmaxT.ShowEdgesState
   , showLouvain     :: R.State Boolean
@@ -158,12 +161,13 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
                                                , multiSelectEnabled: props.multiSelectEnabled
                                                , selectedNodeIds: props.selectedNodeIds } ]
                 , RH.li {} [ mouseSelectorSizeButton props.sigmaRef localControls.mouseSelectorSize ]
+                , RH.li {} [ cameraButton props.session props.graphId props.sigmaRef ]
                 ]
               ]
             ]
 
-useGraphControls :: SigmaxT.SGraph -> R.Hooks (Record Controls)
-useGraphControls graph = do
+useGraphControls :: SigmaxT.SGraph -> GET.GraphId -> Session -> R.Hooks (Record Controls)
+useGraphControls graph graphId session = do
   edgeConfluence <- R.useState' $ Range.Closed { min: 0.0, max: 1.0 }
   edgeWeight <- R.useState' $ Range.Closed {
       min: 0.0
@@ -187,11 +191,13 @@ useGraphControls graph = do
        , edgeWeight
        , forceAtlasState
        , graph
+       , graphId
        , graphStage
        , multiSelectEnabled
        , nodeSize
        , removedNodeIds
        , selectedNodeIds
+       , session
        , showControls
        , showEdges
        , showLouvain

src/Gargantext/Components/GraphExplorer/Types.purs

@@ -7,6 +7,8 @@ import Data.Maybe (Maybe(..), fromJust)
 import Data.Newtype (class Newtype)
 import Partial.Unsafe (unsafePartial)
 
+type GraphId = Int
+
 newtype Node = Node
   { id_ :: String
   , size :: Int

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -190,7 +190,12 @@ function bindMouseSelectorPlugin(left, right, sig) {
 }
 function bind(sigma, event, handler) { sigma.bind(event, handler); }
 
+function takeScreenshot(sigma) {
+  return sigma.renderers[0].container.lastChild.toDataURL();
+}
+
 exports._sigma = _sigma;
 exports._addRenderer = addRenderer;
 exports._bindMouseSelectorPlugin = bindMouseSelectorPlugin;
 exports._bind = bind;
+exports._takeScreenshot = takeScreenshot;

src/Gargantext/Hooks/Sigmax/Sigma.purs

@@ -13,7 +13,7 @@ import Data.Traversable (traverse_)
 import Effect (Effect)
 import Effect.Exception as EEx
 import Effect.Timer (setTimeout)
-import Effect.Uncurried (EffectFn1, EffectFn3, EffectFn4, mkEffectFn1, runEffectFn3, runEffectFn4)
+import Effect.Uncurried (EffectFn1, EffectFn3, EffectFn4, mkEffectFn1, runEffectFn1, runEffectFn3, runEffectFn4)
 import FFI.Simple ((..), (...), (.=))
 import Foreign.Object as Object
 import Gargantext.Hooks.Sigmax.Types as Types
@@ -291,6 +291,9 @@ goTo props cam = pure $ cam ... "goTo" $ [props]
 goToAllCameras :: Sigma -> Record CameraProps -> Effect Unit
 goToAllCameras s props = traverse_ (goTo props) $ cameras s
 
+takeScreenshot :: Sigma -> Effect String
+takeScreenshot = runEffectFn1 _takeScreenshot
+
 -- | FFI
 foreign import _sigma ::
   forall a b opts err.
@@ -312,3 +315,4 @@ foreign import _bindMouseSelectorPlugin
             Sigma
             (Either err Unit)
 foreign import _bind :: forall e. EffectFn3 Sigma String (EffectFn1 e Unit) Unit
+foreign import _takeScreenshot :: EffectFn1 Sigma String