[graph] ccircle renderer for circles with contour

src/Gargantext/Components/GraphExplorer/Layout.purs

@@ -343,7 +343,8 @@ modeGraphType Types.Authors     = "square"
 modeGraphType Types.Institutes  = "equilateral"
 modeGraphType Types.Sources     = "star"
 --modeGraphType Types.Terms       = "def"
-modeGraphType Types.Terms       = "circle"
+--modeGraphType Types.Terms       = "circle"
+modeGraphType Types.Terms       = "ccircle"
 
 --------------------------------------------------------------
 

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -3,6 +3,8 @@
 import Graph from 'graphology';
 import Sigma from 'sigma';
 import { takeScreenshot } from '../../src/external-deps/sigmajs-screenshot.js';
+import CircleNodeProgram from 'sigma/rendering/webgl/programs/node.fast';
+import ContourCircleNodeProgram from '../../src/external-deps/sigmajs-circle-with-contour.js';
 
 let sigma = Sigma.Sigma;
 console.log('imported sigma', Sigma);
@@ -164,7 +166,14 @@ let sigmaMouseSelector = function(sigma, options) {
 function _sigma(left, right, el, opts) {
   try {
     let graph = new Graph();
-    let s = new sigma(graph, el, opts.settigns);
+    const settings = {
+      nodeProgramClasses: {
+        circle: CircleNodeProgram.default,  // TODO why default? It seems that import should be fixed
+        ccircle: ContourCircleNodeProgram
+      },
+      ...opts.settings
+    };
+    let s = new sigma(graph, el, settings);
     console.log('[_sigma] initializing sigma with el', el, 'opts', opts.settings, 'sigma', s);
     console.log('[_sigma] labelRenderedSizeThreshold', opts.settings.labelRenderedSizeThreshold);
     sigmaMouseSelector(s);

src/external-deps/sigmajs-circle-with-contour.js

+// Based on sigma.js/src/rendering/webgl/programs/node.fast.ts
+
+import { NodeDisplayData } from "sigma/types";
+import { floatColor } from "sigma/utils";
+import vertexShaderSource from "sigma/rendering/webgl/shaders/node.fast.vert.glsl";
+import fragmentShaderSource from "sigma/rendering/webgl/shaders/node.fast.frag.glsl";
+import { AbstractNodeProgram } from "sigma/rendering/webgl/programs/common/node";
+import { RenderParams } from "sigma/rendering/webgl/programs/common/program";
+import CircleNodeProgram from 'sigma/rendering/webgl/programs/node.fast';
+
+const POINTS = 2;
+const ATTRIBUTES = 4;
+
+/*
+export default class NodeContourFastProgram extends AbstractNodeProgram {
+  //constructor(gl : WebGLRenderingContext) {
+  constructor(gl) {
+    super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES);
+    this.bind();
+    }
+*/
+
+export default class NodeContourFastProgram extends CircleNodeProgram {
+  //process(data: NodeDisplayData, hidden: boolean, offset: number): void {
+  process(data, hidden, offset) {
+    const array = this.array;
+    let i = offset * POINTS * ATTRIBUTES;
+
+    if (hidden) {
+      // contour
+      array[i++] = 0;
+      array[i++] = 0;
+      array[i++] = 0;
+      array[i++] = 0;
+
+      // circle
+      array[i++] = 0;
+      array[i++] = 0;
+      array[i++] = 0;
+      array[i++] = 0;
+
+      return;
+    }
+
+    const color = floatColor(data.color);
+    const black = floatColor('black');
+
+    // contour
+    array[i++] = data.x;
+    array[i++] = data.y;
+    array[i++] = data.size + 1;
+    array[i++] = black;
+
+    // circle
+    array[i++] = data.x;
+    array[i++] = data.y;
+    array[i++] = data.size;
+    array[i] = color;
+}
+
+  //render(params: RenderParams): void {
+  render(params) {
+    if (this.hasNothingToRender()) return;
+
+    const gl = this.gl;
+
+    const program = this.program;
+    gl.useProgram(program);
+
+    gl.uniform1f(this.ratioLocation, 1 / Math.sqrt(params.ratio));
+    gl.uniform1f(this.scaleLocation, params.scalingRatio);
+    gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+
+    gl.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+  }
+}