Merge branch '705-dev-graph-display-improvements' into 'dev'

[graph] restore proportional labels and make edges transparent

See merge request !522

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -4,7 +4,7 @@ import Graph from 'graphology';
 import Sigma from 'sigma';
 //import { takeScreenshot } from '../../src/external-deps/sigmajs-screenshot.js';
 import takeScreenshot from '../../src/external-deps/sigmajs-screenshot-with-canvas.js';
-import { NodeCircleProgram } from 'sigma/rendering';
+import { NodeCircleProgram, EdgeLineProgram } from 'sigma/rendering';
 import ContourCircleNodeProgram from '../../src/external-deps/sigmajs-circle-with-contour.js';
 import TriangleNodeProgram from '../../src/external-deps/sigmajs-triangle.js';
 import ContourTriangleNodeProgram from '../../src/external-deps/sigmajs-triangle-with-contour.js';
@@ -12,6 +12,7 @@ import SquareNodeProgram from '../../src/external-deps/sigmajs-square.js';
 import ContourSquareNodeProgram from '../../src/external-deps/sigmajs-square-with-contour.js';
 import DiamondNodeProgram from '../../src/external-deps/sigmajs-diamond.js';
 import ContourDiamondNodeProgram from '../../src/external-deps/sigmajs-diamond-with-contour.js';
+import EdgeLineTransparentProgram from '../../src/external-deps/sigmajs-line-transparent.js';
 
 let sigma = Sigma.Sigma;
 console.log('imported sigma', Sigma);
@@ -196,7 +197,7 @@ function _sigma(left, right, el, opts) {
   try {
     let graph = new Graph();
     const settings = {
-      labelRenderer: drawLabel,
+      defaultDrawNodeLabel: drawLabel,
       nodeProgramClasses: {
         circle: NodeCircleProgram,
         ccircle: ContourCircleNodeProgram,
@@ -207,6 +208,9 @@ function _sigma(left, right, el, opts) {
         diamond: DiamondNodeProgram,
         cdiamond: ContourDiamondNodeProgram
       },
+      edgeProgramClasses: {
+        line: EdgeLineTransparentProgram
+      },
       ...opts.settings
     };
     let s = new Sigma(graph, el, settings);

src/external-deps/line-frag.glsl.js

+// language=GLSL
+const SHADER_SOURCE = /*glsl*/ `
+precision mediump float;
+
+varying vec4 v_color;
+
+void main(void) {
+  gl_FragColor = v_color;
+}
+`;
+
+export default SHADER_SOURCE;
\ No newline at end of file

src/external-deps/line-vert.glsl.js

+// language=GLSL
+const SHADER_SOURCE = /*glsl*/ `
+attribute vec4 a_id;
+attribute vec4 a_color;
+attribute vec2 a_position;
+
+uniform mat3 u_matrix;
+
+varying vec4 v_color;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+  // Scale from [[-1 1] [-1 1]] to the container:
+  gl_Position = vec4(
+    (u_matrix * vec3(a_position, 1)).xy,
+    0,
+    1
+  );
+
+  #ifdef PICKING_MODE
+  // For picking mode, we use the ID as the color:
+  v_color = a_id;
+  #else
+  // For normal mode, we use the color:
+  v_color = a_color;
+  #endif
+
+  v_color.a *= bias;
+}
+`;
+
+export default SHADER_SOURCE;
\ No newline at end of file

src/external-deps/sigmajs-line-transparent.js

+/**
+ * Sigma.js WebGL Renderer Fast Edge Program
+ * ==========================================
+ *
+ * Program rendering edges using GL_LINES which is presumably very fast but
+ * won't render thickness correctly on some GPUs and has some quirks.
+ * @module
+ */
+
+import { floatColor } from "sigma/utils";
+import { EdgeProgram } from "sigma/rendering";
+import FRAGMENT_SHADER_SOURCE from "./line-frag.glsl";
+import VERTEX_SHADER_SOURCE from "./line-vert.glsl";
+
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
+
+const UNIFORMS = ["u_matrix"];
+
+export default class EdgeLineTransparentProgram extends EdgeProgram {
+  getDefinition() {
+    return {
+      VERTICES: 2,
+      VERTEX_SHADER_SOURCE,
+      FRAGMENT_SHADER_SOURCE,
+      METHOD: WebGLRenderingContext.LINES,
+      UNIFORMS,
+      ATTRIBUTES: [
+        { name: "a_position", size: 2, type: FLOAT },
+        { name: "a_color", size: 4, type: UNSIGNED_BYTE, normalized: true },
+        { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
+      ],
+    };
+  }
+
+  processVisibleItem(
+    edgeIndex,
+    startIndex,
+    sourceData,
+    targetData,
+    data
+  ) {
+    const array = this.array;
+
+    const x1 = sourceData.x;
+    const y1 = sourceData.y;
+    const x2 = targetData.x;
+    const y2 = targetData.y;
+    // console.log("original color: ", data.color);
+    let colorTransparent;
+    // Check if color parameter is of expected length (without an alpha component)
+    if (data.color.length == 7) {
+      // Add the alpha component
+      colorTransparent = data.color.concat("bc");
+    } else {
+      // Otherwise use as is
+      colorTransparent = data.color;
+    }
+    // console.log("transformed color: ", colorTransparent);
+    const color = floatColor(colorTransparent);
+
+    // First point
+    array[startIndex++] = x1;
+    array[startIndex++] = y1;
+    array[startIndex++] = color;
+    array[startIndex++] = edgeIndex;
+
+    // Second point
+    array[startIndex++] = x2;
+    array[startIndex++] = y2;
+    array[startIndex++] = color;
+    array[startIndex++] = edgeIndex;
+  }
+
+  setUniforms(params, { gl, uniformLocations }) {
+    const { u_matrix } = uniformLocations;
+
+    gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+  }
+}
\ No newline at end of file