Merge remote-tracking branch 'origin/395-dev-ps-0.15-update' into dev-graph-multipartite

package.json

@@ -57,7 +57,8 @@
         "react-dom": "^17.0.2",
         "react-tooltip": "^4.2.8",
         "secp256k1": "^4.0.2",
-        "sigma": "^2.3.1"
+        "sigma": "^2.3.1",
+        "twgl.js": "^5.0.4"
     },
     "devDependencies": {
         "@babel/core": "^7.15.0",

src/Gargantext/Components/GraphExplorer/Layout.purs

@@ -25,6 +25,7 @@ import Gargantext.Components.GraphExplorer.Toolbar.Controls as Controls
 import Gargantext.Components.GraphExplorer.TopBar as GETB
 import Gargantext.Components.GraphExplorer.Types (GraphSideDoc)
 import Gargantext.Components.GraphExplorer.Types as GET
+import Gargantext.Components.GraphExplorer.Utils as GEU
 import Gargantext.Config (defaultFrontends)
 import Gargantext.Data.Louvain as Louvain
 import Gargantext.Hooks.Session (useSession)
@@ -289,7 +290,7 @@ graphViewCpt = R.memo' $ here.component "graphView" cpt where
 convert :: GET.GraphData -> Tuple (Maybe GET.MetaData) SigmaxT.SGraph
 convert (GET.GraphData r) = Tuple r.metaData $ SigmaxT.Graph {nodes, edges}
   where
-    nodes = foldMapWithIndex nodeFn r.nodes
+    nodes = foldMapWithIndex nodeFn $ GEU.normalizeNodeSize 1 10000 r.nodes
     nodeFn _i nn@(GEGT.Node n) =
       Seq.singleton {
           borderColor: color
@@ -302,6 +303,7 @@ convert (GET.GraphData r) = Tuple r.metaData $ SigmaxT.Graph {nodes, edges}
         , id    : n.id_
         , label : n.label
         , size  : DN.log (toNumber n.size + 1.0)
+        --, size: toNumber n.size
         , type  : modeGraphType gargType
         , x     : n.x -- cos (toNumber i)
         , y     : n.y -- sin (toNumber i)

src/Gargantext/Components/GraphExplorer/Resources.purs

@@ -207,26 +207,26 @@ drawGraphCpt = R.memo' $ here.component "graph" cpt where
 
 
 type SigmaSettings =
-  ( animationsTime :: Number
-  , autoRescale :: Boolean
-  , autoResize :: Boolean
-  , batchEdgesDrawing :: Boolean
-  , borderSize :: Number
+  ( --animationsTime :: Number
+  --, autoRescale :: Boolean
+  --, autoResize :: Boolean
+  --, batchEdgesDrawing :: Boolean
+  --, borderSize :: Number
   -- , canvasEdgesBatchSize :: Number
   -- , clone :: Boolean
   -- , defaultEdgeColor :: String
-  , defaultEdgeHoverColor :: String
-  , defaultEdgeType :: String
-  , defaultHoverLabelBGColor :: String
-  , defaultHoverLabelColor :: String
-  , defaultLabelColor :: String
+  --, defaultEdgeHoverColor :: String
+    defaultEdgeType :: String
+  --, defaultHoverLabelBGColor :: String
+  --, defaultHoverLabelColor :: String
+  --, defaultLabelColor :: String
   -- , defaultLabelHoverColor :: String
   , defaultLabelSize :: Number
-  , defaultNodeBorderColor :: String
+  --, defaultNodeBorderColor :: String
   , defaultNodeColor :: String
   -- , defaultNodeHoverColor :: String
   -- , defaultNodeType :: String
-  , doubleClickEnabled :: Boolean
+  --, doubleClickEnabled :: Boolean
   -- , doubleClickTimeout :: Number
   -- , doubleClickZoomDuration :: Number
   -- , doubleClickZoomingRatio :: Number
@@ -234,20 +234,20 @@ type SigmaSettings =
   -- , dragTimeout :: Number
   -- , drawEdgeLabels :: Boolean
   -- , drawEdges :: Boolean
-  , drawLabels :: Boolean
-  , drawNodes :: Boolean
+  -- , drawLabels :: Boolean
+  -- , drawNodes :: Boolean
   -- , edgeColor :: String
-  , edgeHoverColor :: String
-  , edgeHoverExtremities :: Boolean
-  , edgeHoverPrecision :: Number
-  , edgeHoverSizeRatio :: Number
+  -- , edgeHoverColor :: String
+  -- , edgeHoverExtremities :: Boolean
+  -- , edgeHoverPrecision :: Number
+  -- , edgeHoverSizeRatio :: Number
   -- , edgesPowRatio :: Number
   -- , enableCamera :: Boolean
-  , enableEdgeHovering :: Boolean
-  , enableHovering :: Boolean
+  , enableEdgeHoverEvents :: Boolean
+  -- , enableHovering :: Boolean
   -- , eventsEnabled :: Boolean
-  , font :: String
-  , fontStyle :: String
+  -- , font :: String
+  -- , fontStyle :: String
   , hideEdgesOnMove :: Boolean
   -- , hoverFont :: String
   -- , hoverFontStyle :: String
@@ -257,117 +257,120 @@ type SigmaSettings =
   -- , labelHoverColor :: String
   -- , labelHoverShadow :: String
   -- , labelHoverShadowColor :: String
-  , labelSize :: String
-  , labelSizeRatio :: Number
-  , labelThreshold :: Number
-  , maxEdgeSize :: Number
-  , maxNodeSize :: Number
+  -- , labelSize :: String
+  -- , labelSizeRatio :: Number
+  , labelRenderedSizeThreshold :: Number
+  --, labelThreshold :: Number
+  -- , maxEdgeSize :: Number
+  -- , maxNodeSize :: Number
   -- , minArrowSize :: Number
-  , minEdgeSize :: Number
-  , minNodeSize :: Number
-  , mouseEnabled :: Boolean
+  -- , minEdgeSize :: Number
+  -- , minNodeSize :: Number
+  -- , mouseEnabled :: Boolean
   -- , mouseInertiaDuration :: Number
   -- , mouseInertiaRatio :: Number
-  , mouseSelectorSize :: Number
+  -- , mouseSelectorSize :: Number
   -- , mouseWheelEnabled :: Boolean
-  , mouseZoomDuration :: Number
-  , nodeBorderColor :: String
+  -- , mouseZoomDuration :: Number
+  -- , nodeBorderColor :: String
   -- , nodeHoverColor :: String
   --, nodesPowRatio :: Number
-  , rescaleIgnoreSize :: Boolean
+  -- , rescaleIgnoreSize :: Boolean
   -- , scalingMode :: String
   -- , sideMargin :: Number
-  , singleHover :: Boolean
+  -- , singleHover :: Boolean
   -- , skipErrors :: Boolean
-  , touchEnabled :: Boolean
+  -- , touchEnabled :: Boolean
   -- , touchInertiaDuration :: Number
   -- , touchInertiaRatio :: Number
-  , twBorderGreyColor     :: String
-  , twEdgeDefaultOpacity  :: Number
-  , twEdgeGreyColor       :: String
-  , twNodeRendBorderColor :: String
-  , twNodeRendBorderSize :: Number
-  , twNodesGreyOpacity    :: Number
-  , twSelectedColor       :: String
-  , verbose :: Boolean
+  -- , twBorderGreyColor     :: String
+  -- , twEdgeDefaultOpacity  :: Number
+  -- , twEdgeGreyColor       :: String
+  -- , twNodeRendBorderColor :: String
+  -- , twNodeRendBorderSize :: Number
+  -- , twNodesGreyOpacity    :: Number
+  -- , twSelectedColor       :: String
+  -- , verbose :: Boolean
   -- , webglEdgesBatchSize :: Number
   -- , webglOversamplingRatio :: Number
-  , zoomMax :: Number
-  , zoomMin :: Number
-  , zoomingRatio :: Number
+  -- , zoomMax :: Number
+  -- , zoomMin :: Number
+  -- , zoomingRatio :: Number
   )
 
   -- not selected <=> (1-greyness)
   -- selected nodes <=> special label
 sigmaSettings :: Themes.Theme -> {|SigmaSettings}
 sigmaSettings theme =
-  { animationsTime : 30000.0
-  , autoRescale : true
-  , autoResize : true
-  , batchEdgesDrawing : true
-  , borderSize : 1.0                   -- for ex, bigger border when hover
-  , defaultEdgeHoverColor : "#f00"
-  , defaultEdgeType : "curve"          -- 'curve' or 'line' (curve iff ourRendering)
+  { -- animationsTime : 30000.0
+  -- , autoRescale : true
+  --, autoResize : true
+  --, batchEdgesDrawing : true
+  --, borderSize : 1.0                   -- for ex, bigger border when hover
+  --, defaultEdgeHoverColor : "#f00"
+    defaultEdgeType : "line"          -- 'curve' or 'line' (curve iff ourRendering)
   -- , defaultHoverLabelBGColor : "#fff"
   -- , defaultHoverLabelColor : "#000"
   -- , defaultLabelColor : "#000"         -- labels text color
   , defaultLabelSize : 15.0                -- (old tina: showLabelsIfZoom)
-  , defaultNodeBorderColor  : "#000"   -- <- if nodeBorderColor = 'default'
+  --, defaultNodeBorderColor  : "#000"   -- <- if nodeBorderColor = 'default'
   , defaultNodeColor : "#FFF"
-  , doubleClickEnabled : false -- indicates whether or not the graph can be zoomed on double-click
+  --, doubleClickEnabled : false -- indicates whether or not the graph can be zoomed on double-click
   -- , drawEdgeLabels : true
   -- , drawEdges : true
-  , drawLabels : true
-  , drawNodes : true
-  , enableEdgeHovering : false
-  , edgeHoverExtremities : true
-  , edgeHoverColor : "edge"
-  , edgeHoverPrecision : 2.0
-  , edgeHoverSizeRatio : 2.0
-  , enableHovering : true
-  , font : "arial"
-  , fontStyle : ""
+  --, drawLabels : true
+  --, drawNodes : true
+  -- , edgeHoverExtremities : true
+  -- , edgeHoverColor : "edge"
+  -- , edgeHoverPrecision : 2.0
+  -- , edgeHoverSizeRatio : 2.0
+  , enableEdgeHoverEvents : false
+  -- , enableHovering : true
+  -- , font : "arial"
+  -- , fontStyle : ""
   , hideEdgesOnMove : true
-  , labelSize  : "proportional" -- alt : proportional, fixed
+  -- , labelSize  : "proportional" -- alt : proportional, fixed
   -- , labelSize : "fixed"
-  , labelSizeRatio : 2.0               -- label size in ratio of node size
-  , labelThreshold : 9.0 -- 5.0 for more labels              -- min node cam size to start showing label
-  , maxEdgeSize : 1.0
-  , maxNodeSize : 10.0
-  , minEdgeSize : 0.5              -- in fact used in tina as edge size
-  , minNodeSize : 1.0
-  , mouseEnabled : true
-  , mouseSelectorSize : 15.0
-  , mouseZoomDuration : 150.0
-  , nodeBorderColor : "default"           -- choices: "default" color vs. "node" color
+  -- , labelSizeRatio : 2.0               -- label size in ratio of node size
+  , labelRenderedSizeThreshold: 2.0
+  --, labelThreshold : 5.0 -- 5.0 for more labels              -- min node cam size to start showing label
+  -- , maxEdgeSize : 1.0
+  -- , maxNodeSize : 10.0
+  -- , minEdgeSize : 0.5              -- in fact used in tina as edge size
+  -- , minNodeSize : 1.0
+  -- , mouseEnabled : true
+  -- , mouseSelectorSize : 15.0
+  -- , mouseZoomDuration : 150.0
+  -- , nodeBorderColor : "default"           -- choices: "default" color vs. "node" color
   --, nodesPowRatio  : 10.8
-  , rescaleIgnoreSize  : false
-  , singleHover  : true
-  , touchEnabled  : true
-  , twBorderGreyColor  : "rgba(100, 100, 100, 0.9)"
-  , twEdgeDefaultOpacity  : 0.4       -- initial opacity added to src/tgt colors
-  , twEdgeGreyColor  : "rgba(100, 100, 100, 0.25)"
-  , twNodeRendBorderColor  : "#FFF"
-  , twNodeRendBorderSize  : 2.5          -- node borders (only iff ourRendering)
-  , twNodesGreyOpacity  : 5.5           -- smaller value: more grey
-  , twSelectedColor  : "node"     -- "node" for a label bg like the node color, "default" for white background
-  , verbose  : true
-  , zoomMax : 1.7
-  , zoomMin : 0.0
-  , zoomingRatio : 1.4
-  } `merge` themeSettings theme
-  where
-    themeSettings t
-      | eq t darksterTheme =
-          { defaultHoverLabelBGColor: "#FFF"
-          , defaultHoverLabelColor : "#000"
-          , defaultLabelColor: "#FFF"
-          }
-      | otherwise =
-          { defaultHoverLabelBGColor: "#FFF"
-          , defaultHoverLabelColor : "#000"
-          , defaultLabelColor: "#000"
-          }
+  -- , rescaleIgnoreSize  : false
+  -- , singleHover  : true
+  -- , touchEnabled  : true
+  -- , twBorderGreyColor  : "rgba(100, 100, 100, 0.9)"
+  -- , twEdgeDefaultOpacity  : 0.4       -- initial opacity added to src/tgt colors
+  -- , twEdgeGreyColor  : "rgba(100, 100, 100, 0.25)"
+  -- , twNodeRendBorderColor  : "#FFF"
+  -- , twNodeRendBorderSize  : 2.5          -- node borders (only iff ourRendering)
+  -- , twNodesGreyOpacity  : 5.5           -- smaller value: more grey
+  -- , twSelectedColor  : "node"     -- "node" for a label bg like the node color, "default" for white background
+  -- , verbose  : true
+  -- , zoomMax : 1.7
+  -- , zoomMin : 0.0
+  -- , zoomingRatio : 1.4
+  }
+  -- `merge` themeSettings theme
+  -- where
+  --   themeSettings t
+  --     | eq t darksterTheme =
+  --         { defaultHoverLabelBGColor: "#FFF"
+  --         , defaultHoverLabelColor : "#000"
+  --         , defaultLabelColor: "#FFF"
+  --         }
+  --     | otherwise =
+  --         { defaultHoverLabelBGColor: "#FFF"
+  --         , defaultHoverLabelColor : "#000"
+  --         , defaultLabelColor: "#000"
+  --         }
 
 type ForceAtlas2Settings =
   ( adjustSizes                    :: Boolean

src/Gargantext/Components/GraphExplorer/Store.purs

@@ -121,7 +121,7 @@ options =
   -- Controls
   , multiSelectEnabled         : false
   , labelSize                  : 14.0
-  , labelRenderedSizeThreshold : 6.0
+  , labelRenderedSizeThreshold : 2.0
   , mouseSelectorSize          : 15.0
   , edgeConfluence             : Range.Closed { min: 0.0, max: 1.0 }
   , graphStage                 : GET.Init

src/Gargantext/Components/GraphExplorer/Utils.purs

 module Gargantext.Components.GraphExplorer.Utils
   ( stEdgeToGET, stNodeToGET
   , normalizeNodes
+  , normalizeNodeSize
   , takeGreatestNodeByCluster, countNodeByCluster
   ) where
 
@@ -8,13 +9,17 @@ import Gargantext.Prelude
 
 import Data.Array as A
 import Data.Foldable (maximum, minimum)
-import Data.Maybe (Maybe(..))
+import Data.Lens (Lens', lens, over, traversed, (^.))
+import Data.Int (floor, toNumber)
+import Data.Maybe (Maybe(..), fromMaybe, maybe)
 import Data.Newtype (wrap)
 import Data.Sequence as Seq
+import Data.Traversable (class Traversable)
 import Gargantext.Components.GraphExplorer.GraphTypes as GEGT
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax.Types as ST
 import Gargantext.Utils (getter)
+import Gargantext.Utils.Lens as GUL
 import Gargantext.Utils.Seq as GUS
 
 stEdgeToGET :: Record ST.Edge -> GEGT.Edge
@@ -34,31 +39,32 @@ stNodeToGET { id, label, x, y, _original: GEGT.Node { attributes, size, type_ }
 
 -----------------------------------------------------------------------
 
-normalizeNodes :: Seq.Seq GEGT.Node -> Seq.Seq GEGT.Node
-normalizeNodes ns = Seq.map normalizeNode ns
+-- | Normalize nodes, i.e. set their {x, y} values so that they are in
+-- | range [0, 1].
+normalizeNodes :: forall t. Traversable t => t GEGT.Node -> t GEGT.Node
+normalizeNodes ns = GUL.normalizeLens xLens $ GUL.normalizeLens yLens ns
   where
-    xs = map (\(GEGT.Node { x }) -> x) ns
-    ys = map (\(GEGT.Node { y }) -> y) ns
-    mMinx = minimum xs
-    mMaxx = maximum xs
-    mMiny = minimum ys
-    mMaxy = maximum ys
-    mXrange = do
-      minx <- mMinx
-      maxx <- mMaxx
-      pure $ maxx - minx
-    mYrange = do
-      miny <- mMiny
-      maxy <- mMaxy
-      pure $ maxy - miny
-    xdivisor = case mXrange of
-      Nothing -> 1.0
-      Just xdiv -> 1.0 / xdiv
-    ydivisor = case mYrange of
-      Nothing -> 1.0
-      Just ydiv -> 1.0 / ydiv
-    normalizeNode (GEGT.Node n@{ x, y }) = GEGT.Node $ n { x = x * xdivisor
-                                                         , y = y * ydivisor }
+    xLens :: Lens' GEGT.Node Number
+    xLens = lens (\(GEGT.Node { x }) -> x) $ (\(GEGT.Node n) val -> GEGT.Node (n { x = val }))
+    yLens :: Lens' GEGT.Node Number
+    yLens = lens (\(GEGT.Node { y }) -> y) $ (\(GEGT.Node n) val -> GEGT.Node (n { y = val }))
+
+normalizeNodeSize :: forall t. Traversable t => Int -> Int -> t GEGT.Node -> t GEGT.Node
+normalizeNodeSize minSize maxSize ns = over traversed (over sizeLens (\s -> toNumber minSize + (s - sizeMin') * quotient)) ns
+  where
+    sizes = over traversed (_ ^. sizeLens) ns
+    sizeMin = minimum sizes
+    sizeMax = maximum sizes
+    range = do
+      sMin <- sizeMin
+      sMax <- sizeMax
+      pure $ sMax - sMin
+    sizeMin' = fromMaybe 0.0 sizeMin
+    divisor = maybe 1.0 (\r -> 1.0 / r) range
+    quotient :: Number
+    quotient = (toNumber $ maxSize - minSize) * divisor
+    sizeLens :: Lens' GEGT.Node Number
+    sizeLens = lens (\(GEGT.Node { size }) -> toNumber size) $ (\(GEGT.Node n) val -> GEGT.Node (n { size = floor val }))
 
 ------------------------------------------------------------------------
 

src/Gargantext/Components/Nodes/Graph.purs

@@ -13,6 +13,7 @@ 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
@@ -116,7 +117,7 @@ type HydrateStoreProps =
   , cacheParams     :: GET.CacheParams
   )
 
-hydrateStore:: R2.Leaf HydrateStoreProps
+hydrateStore :: R2.Leaf HydrateStoreProps
 hydrateStore = R2.leaf hydrateStoreCpt
 hydrateStoreCpt :: R.Component HydrateStoreProps
 hydrateStoreCpt = here.component "hydrateStore" cpt where

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -2,6 +2,7 @@
 
 import Graph from 'graphology';
 import Sigma from 'sigma';
+import { takeScreenshot } from '../../src/external-deps/sigmajs-screenshot.js';
 
 let sigma = Sigma.Sigma;
 console.log('imported sigma', Sigma);
@@ -163,11 +164,13 @@ let sigmaMouseSelector = function(sigma, options) {
 function _sigma(left, right, el, opts) {
   try {
     let graph = new Graph();
-    let s = new sigma(graph, el, opts);
-    console.log('initializing sigma with el', el, 'opts', 'sigma', s);
+    let s = new sigma(graph, el, opts.settigns);
+    console.log('[_sigma] initializing sigma with el', el, 'opts', opts, 'sigma', s);
+    console.log('[_sigma] labelRenderedSizeThreshold', opts.settings.labelRenderedSizeThreshold);
     sigmaMouseSelector(s);
     return right(s);
   } catch(e) {
+    console.log('[_sigma] error', e);
     return left(e);
   }
 }
@@ -190,17 +193,7 @@ function _bindMouseSelectorPlugin(left, right, sig) {
 function _on(sigma, event, handler) { sigma.on(event, handler); }
 
 function _takeScreenshot(sigma) {
-  let c = sigma.renderers[0].container;
-  let edges = c.getElementsByClassName('sigma-edges')[0];
-  let scene = c.getElementsByClassName('sigma-scene')[0];
-  // let sceneCtx = scene.getContext('2d');
-  // sceneCtx.globalAlpha = 1;
-  // sceneCtx.drawImage(edges, 0, 0);
-  // return scene.toDataURL('image/png');
-  let edgesCtx = edges.getContext('2d');
-  edgesCtx.globalAlpha = 1;
-  edgesCtx.drawImage(scene, 0, 0);
-  return edges.toDataURL('image/png');
+  return takeScreenshot(sigma);
 }
 
 function _proxySetSettings(window, sigma, settings) {

src/Gargantext/Utils/Lens.purs

+module Gargantext.Utils.Lens where
+
+import Gargantext.Prelude
+
+import Data.Foldable (maximum, minimum)
+import Data.Maybe (Maybe(..), fromMaybe, maybe)
+import Data.Lens
+import Data.Traversable
+
+-- | Given a Traversable of entities and a lens for them, normalize
+-- | over lens getter so that the value of lens setter is in range [0,
+-- | 1].
+normalizeLens :: forall a t. Traversable t => Lens' a Number -> t a -> t a
+normalizeLens l ns = over traversed normalize' ns
+  where
+    values = over traversed (_ ^. l) ns
+    vMin = minimum values
+    vMax = maximum values
+    vRange = do
+      minv <- vMin
+      maxv <- vMax
+      pure $ maxv - minv
+    divisor = maybe 1.0 (\r -> 1.0 / r) vRange
+    min = fromMaybe 0.0 vMin
+    normalize' n = over l (\v -> (v - min) * divisor) n

src/external-deps/sigmajs-screenshot.js

+import * as twgl from 'twgl.js';
+
+
+const vertexShader = `
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+
+uniform vec2 u_resolution;
+
+varying vec2 v_texCoord;
+
+void main() {
+   // convert the rectangle from pixels to 0.0 to 1.0
+   vec2 zeroToOne = a_position / u_resolution;
+
+   // convert from 0->1 to 0->2
+   vec2 zeroToTwo = zeroToOne * 2.0;
+
+   // convert from 0->2 to -1->+1 (clipspace)
+   vec2 clipSpace = zeroToTwo - 1.0;
+
+   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+
+   // pass the texCoord to the fragment shader
+   // The GPU will interpolate this value between points.
+   v_texCoord = a_texCoord;
+}
+`;
+
+const fragmentShader = `
+precision mediump float;
+
+    // our 2 canvases
+    uniform sampler2D u_canvas1;
+    uniform sampler2D u_canvas2;
+
+    // the texCoords passed in from the vertex shader.
+    // note: we're only using 1 set of texCoords which means
+    //   we're assuming the canvases are the same size.
+    varying vec2 v_texCoord;
+
+    void main() {
+         // Look up a pixel from first canvas
+         vec4 color1 = texture2D(u_canvas1, v_texCoord);
+
+         // Look up a pixel from second canvas
+         vec4 color2 = texture2D(u_canvas2, v_texCoord);
+
+         // return the 2 colors multiplied
+         // TODO Modify this
+         gl_FragColor = color1 * color2;
+    }
+`;
+
+
+
+function setupTexture(gl, canvas, textureUnit, program, uniformName) {
+  let tex = gl.createTexture();
+
+  updateTextureFromCanvas(gl, tex, canvas, textureUnit);
+
+  // Set the parameters so we can render any size image.
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+  let location = gl.getUniformLocation(program, uniformName);
+  gl.uniform1i(location, textureUnit);
+}
+
+function updateTextureFromCanvas(gl, tex, canvas, textureUnit) {
+  gl.activeTexture(gl.TEXTURE0 + textureUnit);
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+}
+
+
+export function takeScreenshot(sigma) {
+  // https://stackoverflow.com/questions/12590685/blend-two-canvases-onto-one-with-webgl
+  let c = sigma.container;
+  let edges = c.getElementsByClassName('sigma-edges')[0];
+  let nodes = c.getElementsByClassName('sigma-nodes')[0];
+  // let sceneCtx = scene.getContext('2d');
+  // sceneCtx.globalAlpha = 1;
+  // sceneCtx.drawImage(edges, 0, 0);
+  // return scene.toDataURL('image/png');
+  let edgesCtx = twgl.getContext(edges);
+  //edgesCtx.globalAlpha = 1;
+  //edgesCtx.drawImage(nodes, 0, 0);
+
+  let gl = edgesCtx;  // TODO Create separate canvas for this
+
+  const program = twgl.createProgramFromSources(gl, [vertexShader, fragmentShader]);
+
+  gl.useProgram(program);
+
+  const positionLocation = gl.getAttribLocation(program, "a_position");
+  const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+
+  const texCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+      0.0,  0.0,
+      1.0,  0.0,
+      0.0,  1.0,
+      0.0,  1.0,
+      1.0,  0.0,
+      1.0,  1.0]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(texCoordLocation);
+  gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
+
+  // lookup uniforms
+  let resolutionLocation = gl.getUniformLocation(program, "u_resolution");
+
+  // set the resolution
+  gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
+
+  // Create a buffer for the position of the rectangle corners.
+  let buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.enableVertexAttribArray(positionLocation);
+  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+  // Set a rectangle the same size as the image.
+  setRectangle(gl, 0, 0, gl.canvas.width, gl.canvas.height);
+
+  let tex1 = setupTexture(gl, nodes, 0, program, "u_canvas1");
+  let tex2 = setupTexture(gl, edges, 1, program, "u_canvas2");
+
+  // Draw the rectangle.
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+  return gl.canvas.toDataURL('image/png');
+}
+
+
+function setRectangle(gl, x, y, width, height) {
+  const x1 = x;
+  const x2 = x + width;
+  const y1 = y;
+  const y2 = y + height;
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+    x1, y1,
+    x2, y1,
+    x1, y2,
+    x1, y2,
+    x2, y1,
+    x2, y2]), gl.STATIC_DRAW);
+}

yarn.lock

@@ -10218,6 +10218,11 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
+twgl.js@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/twgl.js/-/twgl.js-5.0.4.tgz#4e3d54c4e8ff01af418bfbf7ce38df26595a6108"
+  integrity sha512-8U0ehLWvqOMTqMQd3xGjeQJSDwCNtoFvLg4V3Ne4QTCaPoJmOB4CSpy7MMHkMkc1qO2DMRhnV0uAgZmhO3Q/2w==
+
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"