Typing graph on SIgma class

examples/custom-rendering/node.border.ts

@@ -12,6 +12,7 @@
  * every GPU.
  * @module
  */
+import { Attributes } from "graphology-types";
 import { NodeDisplayData, RenderParams } from "sigma/types";
 import { floatColor } from "sigma/utils";
 import { NodeProgram } from "sigma/rendering/webgl/programs/common/node";
@@ -22,7 +23,10 @@ const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix"] as const;
 
-export default class NodeBorderProgram extends NodeProgram<typeof UNIFORMS[number]> {
+export default class NodeBorderProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends NodeProgram<N, E, (typeof UNIFORMS)[number]> {
   getDefinition() {
     return {
       VERTICES: 1,

examples/use-reducers/index.ts

@@ -9,14 +9,24 @@ import { Coordinates, EdgeDisplayData, NodeDisplayData } from "sigma/types";
 import Graph from "graphology";
 
 import data from "./data.json";
+interface NodeData {
+  x: number;
+  y: number;
+  size: number;
+  label: string;
+  color: string;
+}
+interface EdgeData {
+  size: number;
+}
 
 // Retrieve some useful DOM elements:
 const container = document.getElementById("sigma-container") as HTMLElement;
 const searchInput = document.getElementById("search-input") as HTMLInputElement;
 const searchSuggestions = document.getElementById("suggestions") as HTMLDataListElement;
 
 // Instantiate sigma:
-const graph = new Graph();
+const graph = new Graph<NodeData, EdgeData>();
 graph.import(data);
 const renderer = new Sigma(graph, container);
 
@@ -116,7 +126,6 @@ renderer.on("leaveNode", () => {
 // 3. If there is a hovered node, all non-neighbor nodes are greyed
 renderer.setSetting("nodeReducer", (node, data) => {
   const res: Partial<NodeDisplayData> = { ...data };
-
   if (state.hoveredNeighbors && !state.hoveredNeighbors.has(node) && state.hoveredNode !== node) {
     res.label = "";
     res.color = "#f6f6f6";

examples/webpack.config.js

@@ -20,7 +20,7 @@ module.exports = {
         __dirname,
         "../src/rendering/webgl/programs/common/node.ts",
       ),
-      sigma: path.resolve(__dirname, "../src/index.ts"),
+      sigma: path.resolve(__dirname, "../src"),
     },
   },
   module: {

src/rendering/canvas/edge-label.ts

@@ -8,12 +8,12 @@
 import { Settings } from "../../settings";
 import { EdgeDisplayData, NodeDisplayData, PartialButFor } from "../../types";
 
-export default function drawEdgeLabel(
+export default function drawEdgeLabel<N, E>(
   context: CanvasRenderingContext2D,
   edgeData: PartialButFor<EdgeDisplayData, "label" | "color" | "size">,
   sourceData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
   targetData: PartialButFor<NodeDisplayData, "x" | "y" | "size">,
-  settings: Settings,
+  settings: Settings<N, E>,
 ): void {
   const size = settings.edgeLabelSize,
     font = settings.edgeLabelFont,

src/rendering/canvas/hover.ts

@@ -16,10 +16,10 @@ import drawLabel from "./label";
  * - if the label box is bigger than node size => display a label box that contains the node with a shadow
  * - else node with shadow and the label box
  */
-export default function drawHover(
+export default function drawHover<N, E>(
   context: CanvasRenderingContext2D,
   data: PartialButFor<NodeDisplayData, "x" | "y" | "size" | "label" | "color">,
-  settings: Settings,
+  settings: Settings<N, E>,
 ): void {
   const size = settings.labelSize,
     font = settings.labelFont,

src/rendering/canvas/label.ts

@@ -8,10 +8,10 @@
 import { Settings } from "../../settings";
 import { NodeDisplayData, PartialButFor } from "../../types";
 
-export default function drawLabel(
+export default function drawLabel<N, E>(
   context: CanvasRenderingContext2D,
   data: PartialButFor<NodeDisplayData, "x" | "y" | "size" | "label" | "color">,
-  settings: Settings,
+  settings: Settings<N, E>,
 ): void {
   if (!data.label) return;
 

src/rendering/webgl/programs/common/edge.ts

@@ -4,11 +4,15 @@
  *
  * @module
  */
+import { Attributes } from "graphology-types";
 import Sigma from "../../../../sigma";
 import { AbstractProgram, Program } from "./program";
 import { NodeDisplayData, EdgeDisplayData, RenderParams } from "../../../../types";
 
-export abstract class AbstractEdgeProgram extends AbstractProgram {
+export abstract class AbstractEdgeProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends AbstractProgram<N, E> {
   abstract process(
     offset: number,
     sourceData: NodeDisplayData,
@@ -17,9 +21,13 @@ export abstract class AbstractEdgeProgram extends AbstractProgram {
   ): void;
 }
 
-export abstract class EdgeProgram<Uniform extends string = string>
-  extends Program<Uniform>
-  implements AbstractEdgeProgram
+export abstract class EdgeProgram<
+    N extends Attributes = Attributes,
+    E extends Attributes = Attributes,
+    Uniform extends string = string,
+  >
+  extends Program<N, E, Uniform>
+  implements AbstractEdgeProgram<N, E>
 {
   process(offset: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData): void {
     let i = offset * this.STRIDE;
@@ -41,8 +49,8 @@ export abstract class EdgeProgram<Uniform extends string = string>
   ): void;
 }
 
-export interface EdgeProgramConstructor {
-  new (gl: WebGLRenderingContext, renderer: Sigma): AbstractEdgeProgram;
+export interface EdgeProgramConstructor<N extends Attributes = Attributes, E extends Attributes = Attributes> {
+  new (gl: WebGLRenderingContext, renderer: Sigma<N, E>): AbstractEdgeProgram<N, E>;
 }
 
 /**

src/rendering/webgl/programs/common/node.ts

@@ -4,17 +4,25 @@
  *
  * @module
  */
+import { Attributes } from "graphology-types";
 import Sigma from "../../../../sigma";
 import { AbstractProgram, Program } from "./program";
 import { NodeDisplayData, RenderParams } from "../../../../types";
 
-export abstract class AbstractNodeProgram extends AbstractProgram {
+export abstract class AbstractNodeProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends AbstractProgram<N, E> {
   abstract process(offset: number, data: NodeDisplayData): void;
 }
 
-export abstract class NodeProgram<Uniform extends string = string>
-  extends Program<Uniform>
-  implements AbstractNodeProgram
+export abstract class NodeProgram<
+    N extends Attributes = Attributes,
+    E extends Attributes = Attributes,
+    Uniform extends string = string,
+  >
+  extends Program<N, E, Uniform>
+  implements AbstractNodeProgram<N, E>
 {
   process(offset: number, data: NodeDisplayData): void {
     let i = offset * this.STRIDE;
@@ -31,8 +39,8 @@ export abstract class NodeProgram<Uniform extends string = string>
   abstract processVisibleItem(i: number, data: NodeDisplayData): void;
 }
 
-export interface NodeProgramConstructor {
-  new (gl: WebGLRenderingContext, renderer: Sigma): AbstractNodeProgram;
+export interface NodeProgramConstructor<N extends Attributes = Attributes, E extends Attributes = Attributes> {
+  new (gl: WebGLRenderingContext, renderer: Sigma<N, E>): AbstractNodeProgram;
 }
 
 /**

src/rendering/webgl/programs/common/program.ts

@@ -5,12 +5,13 @@
  * Class representing a single WebGL program used by sigma's WebGL renderer.
  * @module
  */
+import { Attributes } from "graphology-types";
 import type Sigma from "../../../../sigma";
 import type { RenderParams } from "../../../../types";
 import { canUse32BitsIndices } from "../../../../utils";
 import { loadVertexShader, loadFragmentShader, loadProgram } from "../../shaders/utils";
 
-const SIZE_FACTOR_PER_ATTRIBUTE_TYPE = {
+const SIZE_FACTOR_PER_ATTRIBUTE_TYPE: Record<number, number> = {
   [WebGL2RenderingContext.BOOL]: 1,
   [WebGL2RenderingContext.BYTE]: 1,
   [WebGL2RenderingContext.UNSIGNED_BYTE]: 1,
@@ -37,14 +38,20 @@ export interface ProgramDefinition<Uniform extends string = string> {
   ATTRIBUTES: Array<ProgramAttributeSpecification>;
 }
 
-export abstract class AbstractProgram {
+export abstract class AbstractProgram<N extends Attributes = Attributes, E extends Attributes = Attributes> {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  constructor(_gl: WebGLRenderingContext, _renderer: Sigma) {}
+  constructor(_gl: WebGLRenderingContext, _renderer: Sigma<N, E>) {}
   abstract reallocate(capacity: number): void;
   abstract render(params: RenderParams): void;
 }
 
-export abstract class Program<Uniform extends string = string> implements AbstractProgram, ProgramDefinition {
+export abstract class Program<
+    N extends Attributes = Attributes,
+    E extends Attributes = Attributes,
+    Uniform extends string = string,
+  >
+  implements AbstractProgram<N, E>, ProgramDefinition
+{
   VERTICES: number;
   ARRAY_ITEMS_PER_VERTEX: number;
   VERTEX_SHADER_SOURCE: string;

src/rendering/webgl/programs/edge.arrowHead.ts

@@ -5,6 +5,7 @@
  * Program rendering direction arrows as a simple triangle.
  * @module
  */
+import { Attributes } from "graphology-types";
 import { NodeDisplayData, EdgeDisplayData, RenderParams } from "../../../types";
 import { floatColor } from "../../../utils";
 import { EdgeProgram } from "./common/edge";
@@ -15,7 +16,10 @@ const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_matrix", "u_sizeRatio", "u_correctionRatio"] as const;
 
-export default class EdgeArrowHeadProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+export default class EdgeArrowHeadProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends EdgeProgram<N, E, (typeof UNIFORMS)[number]> {
   getDefinition() {
     return {
       VERTICES: 3,

src/rendering/webgl/programs/edge.line.ts

@@ -6,6 +6,7 @@
  * won't render thickness correctly on some GPUs and has some quirks.
  * @module
  */
+import { Attributes } from "graphology-types";
 import { NodeDisplayData, EdgeDisplayData, RenderParams } from "../../../types";
 import { floatColor } from "../../../utils";
 import { EdgeProgram } from "./common/edge";
@@ -16,7 +17,10 @@ const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_matrix"] as const;
 
-export default class EdgeLineProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+export default class EdgeLineProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends EdgeProgram<N, E, (typeof UNIFORMS)[number]> {
   getDefinition() {
     return {
       VERTICES: 2,

src/rendering/webgl/programs/edge.rectangle.ts

@@ -15,6 +15,7 @@
  * the CPU & GPU (normals are computed on the CPU side).
  * @module
  */
+import { Attributes } from "graphology-types";
 import { NodeDisplayData, EdgeDisplayData, RenderParams } from "../../../types";
 import { floatColor } from "../../../utils";
 import { EdgeProgram } from "./common/edge";
@@ -25,7 +26,10 @@ const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_matrix", "u_zoomRatio", "u_sizeRatio", "u_correctionRatio"] as const;
 
-export default class EdgeRectangleProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+export default class EdgeRectangleProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends EdgeProgram<N, E, (typeof UNIFORMS)[number]> {
   getDefinition() {
     return {
       VERTICES: 4,

src/rendering/webgl/programs/edge.triangle.ts

@@ -5,6 +5,7 @@
  * Program rendering directed edges as a single triangle.
  * @module
  */
+import { Attributes } from "graphology-types";
 import { NodeDisplayData, EdgeDisplayData, RenderParams } from "../../../types";
 import { floatColor } from "../../../utils";
 import { EdgeProgram } from "./common/edge";
@@ -15,7 +16,10 @@ const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_matrix", "u_sizeRatio", "u_correctionRatio"] as const;
 
-export default class EdgeTriangleProgram extends EdgeProgram<typeof UNIFORMS[number]> {
+export default class EdgeTriangleProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends EdgeProgram<N, E, (typeof UNIFORMS)[number]> {
   getDefinition() {
     return {
       VERTICES: 3,

src/rendering/webgl/programs/node.circle.ts

@@ -8,6 +8,7 @@
  * indicating which "corner" of the triangle to draw.
  * @module
  */
+import { Attributes } from "graphology-types";
 import { NodeDisplayData, RenderParams } from "../../../types";
 import { floatColor } from "../../../utils";
 import { NodeProgram } from "./common/node";
@@ -18,7 +19,10 @@ const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_sizeRatio", "u_correctionRatio", "u_matrix"] as const;
 
-export default class NodeCircleProgram extends NodeProgram<typeof UNIFORMS[number]> {
+export default class NodeCircleProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends NodeProgram<N, E, (typeof UNIFORMS)[number]> {
   static readonly ANGLE_1 = 0;
   static readonly ANGLE_2 = (2 * Math.PI) / 3;
   static readonly ANGLE_3 = (4 * Math.PI) / 3;

src/rendering/webgl/programs/node.image.ts

@@ -6,6 +6,7 @@
  * the classic colored disc.
  * @module
  */
+import { Attributes } from "graphology-types";
 import { Coordinates, Dimensions, NodeDisplayData, RenderParams } from "../../../types";
 import { floatColor } from "../../../utils";
 import VERTEX_SHADER_SOURCE from "../shaders/node.image.vert.glsl";
@@ -200,7 +201,10 @@ export default function getNodeImageProgram(): NodeProgramConstructor {
 
   const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix", "u_atlas"] as const;
 
-  return class NodeImageProgram extends NodeProgram<typeof UNIFORMS[number]> {
+  return class NodeImageProgram<
+    N extends Attributes = Attributes,
+    E extends Attributes = Attributes,
+  > extends NodeProgram<N, E, (typeof UNIFORMS)[number]> {
     getDefinition() {
       return {
         VERTICES: 1,

src/rendering/webgl/programs/node.point.ts

@@ -7,6 +7,7 @@
  * every GPU.
  * @module
  */
+import { Attributes } from "graphology-types";
 import { NodeDisplayData, RenderParams } from "../../../types";
 import { floatColor } from "../../../utils";
 import { NodeProgram } from "./common/node";
@@ -17,7 +18,10 @@ const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
 
 const UNIFORMS = ["u_sizeRatio", "u_pixelRatio", "u_matrix"] as const;
 
-export default class NodePointProgram extends NodeProgram<typeof UNIFORMS[number]> {
+export default class NodePointProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+> extends NodeProgram<N, E, (typeof UNIFORMS)[number]> {
   getDefinition() {
     return {
       VERTICES: 1,