@cosmos.gl/graph 2.6.2 → 2.7.0-beta.0

package/src/modules/GraphData/index.ts

@@ -0,0 +1,383 @@
+import { getRgbaColor, isNumber } from '@/graph/helper'
+import { GraphConfig } from '@/graph/config'
+
+export enum PointShape {
+  Circle = 0,
+  Square = 1,
+  Triangle = 2,
+  Diamond = 3,
+  Pentagon = 4,
+  Hexagon = 5,
+  Star = 6,
+  Cross = 7,
+  None = 8
+}
+
+export class GraphData {
+  public inputPointPositions: Float32Array | undefined
+  public inputPointColors: Float32Array | undefined
+  public inputPointSizes: Float32Array | undefined
+  public inputPointShapes: Float32Array | undefined
+  public inputImageData: ImageData[] | undefined
+  public inputPointImageIndices: Float32Array | undefined
+  public inputPointImageSizes: Float32Array | undefined
+  public inputLinkColors: Float32Array | undefined
+  public inputLinkWidths: Float32Array | undefined
+  public inputLinkStrength: Float32Array | undefined
+  public inputPointClusters: (number | undefined)[] | undefined
+  public inputClusterPositions: (number | undefined)[] | undefined
+  public inputClusterStrength: Float32Array | undefined
+
+  public pointPositions: Float32Array | undefined
+  public pointColors: Float32Array | undefined
+  public pointSizes: Float32Array | undefined
+  public pointShapes: Float32Array | undefined
+  public pointImageIndices: Float32Array | undefined
+  public pointImageSizes: Float32Array | undefined
+
+  public inputLinks: Float32Array | undefined
+  public links: Float32Array | undefined
+  public linkColors: Float32Array | undefined
+  public linkWidths: Float32Array | undefined
+  public linkArrowsBoolean: boolean[] | undefined
+  public linkArrows: number[] | undefined
+  public linkStrength: Float32Array | undefined
+
+  public pointClusters: (number | undefined)[] | undefined
+  public clusterPositions: (number | undefined)[] | undefined
+  public clusterStrength: Float32Array | undefined
+
+  /**
+   * Each inner array of `sourceIndexToTargetIndices` and `targetIndexToSourceIndices` contains pairs where:
+   *   - The first value is the target/source index in the point array.
+   *   - The second value is the link index in the array of links.
+  */
+  public sourceIndexToTargetIndices: ([number, number][] | undefined)[] | undefined
+  public targetIndexToSourceIndices: ([number, number][] | undefined)[] | undefined
+
+  public degree: number[] | undefined
+  public inDegree: number[] | undefined
+  public outDegree: number[] | undefined
+
+  private _config: GraphConfig
+
+  public constructor (config: GraphConfig) {
+    this._config = config
+  }
+
+  public get pointsNumber (): number | undefined {
+    return this.pointPositions && this.pointPositions.length / 2
+  }
+
+  public get linksNumber (): number | undefined {
+    return this.links && this.links.length / 2
+  }
+
+  public updatePoints (): void {
+    this.pointPositions = this.inputPointPositions
+  }
+
+  /**
+   * Updates the point colors based on the input data or default config value.
+   */
+  public updatePointColor (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointColors = undefined
+      return
+    }
+
+    // Sets point colors to default values from config if the input is missing or does not match input points number.
+    const defaultRgba = getRgbaColor(this._config.pointColor)
+    if (this.inputPointColors === undefined || this.inputPointColors.length / 4 !== this.pointsNumber) {
+      this.pointColors = new Float32Array(this.pointsNumber * 4)
+      for (let i = 0; i < this.pointColors.length / 4; i++) {
+        this.pointColors[i * 4] = defaultRgba[0]
+        this.pointColors[i * 4 + 1] = defaultRgba[1]
+        this.pointColors[i * 4 + 2] = defaultRgba[2]
+        this.pointColors[i * 4 + 3] = defaultRgba[3]
+      }
+    } else {
+      this.pointColors = this.inputPointColors
+      for (let i = 0; i < this.pointColors.length / 4; i++) {
+        if (!isNumber(this.pointColors[i * 4])) this.pointColors[i * 4] = defaultRgba[0]
+        if (!isNumber(this.pointColors[i * 4 + 1])) this.pointColors[i * 4 + 1] = defaultRgba[1]
+        if (!isNumber(this.pointColors[i * 4 + 2])) this.pointColors[i * 4 + 2] = defaultRgba[2]
+        if (!isNumber(this.pointColors[i * 4 + 3])) this.pointColors[i * 4 + 3] = defaultRgba[3]
+      }
+    }
+  }
+
+  /**
+   * Updates the point sizes based on the input data or default config value.
+   */
+  public updatePointSize (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointSizes = undefined
+      return
+    }
+
+    // Sets point sizes to default values from config if the input is missing or does not match input points number.
+    if (this.inputPointSizes === undefined || this.inputPointSizes.length !== this.pointsNumber) {
+      this.pointSizes = new Float32Array(this.pointsNumber).fill(this._config.pointSize)
+    } else {
+      this.pointSizes = this.inputPointSizes
+      for (let i = 0; i < this.pointSizes.length; i++) {
+        if (!isNumber(this.pointSizes[i])) {
+          this.pointSizes[i] = this._config.pointSize
+        }
+      }
+    }
+  }
+
+  /**
+   * Updates the point shapes based on the input data or default shape.
+   * Default behavior: Circle (0).
+  * Images are rendered above shapes.
+   */
+  public updatePointShape (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointShapes = undefined
+      return
+    }
+
+    // Determine default shape: Circle
+    const defaultShape = PointShape.Circle
+
+    // Sets point shapes to default values if the input is missing or does not match input points number.
+    if (this.inputPointShapes === undefined || this.inputPointShapes.length !== this.pointsNumber) {
+      this.pointShapes = new Float32Array(this.pointsNumber).fill(defaultShape)
+    } else {
+      this.pointShapes = new Float32Array(this.inputPointShapes)
+      const pointShapes = this.pointShapes
+      for (let i = 0; i < pointShapes.length; i++) {
+        const shape = pointShapes[i]
+        if (shape == null || !isNumber(shape) || shape < 0 || shape > 8) {
+          pointShapes[i] = defaultShape
+        }
+      }
+    }
+  }
+
+  /**
+   * Updates the point image indices based on the input data or default value (-1 for no image).
+   */
+  public updatePointImageIndices (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointImageIndices = undefined
+      return
+    }
+
+    // Sets point image indices to -1 if input is missing or doesn't match points count
+    if (this.inputPointImageIndices === undefined || this.inputPointImageIndices.length !== this.pointsNumber) {
+      this.pointImageIndices = new Float32Array(this.pointsNumber).fill(-1)
+    } else {
+      const pointImageIndices = new Float32Array(this.inputPointImageIndices)
+      for (let i = 0; i < pointImageIndices.length; i++) {
+        const rawIndex = pointImageIndices[i]
+        const imageIndex = (rawIndex === undefined) ? NaN : rawIndex
+        if (!Number.isFinite(imageIndex) || imageIndex < 0) {
+          pointImageIndices[i] = -1
+        } else {
+          pointImageIndices[i] = Math.trunc(imageIndex)
+        }
+      }
+      this.pointImageIndices = pointImageIndices
+    }
+  }
+
+  /**
+   * Updates the point image sizes based on the input data or default to point sizes.
+   */
+  public updatePointImageSizes (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointImageSizes = undefined
+      return
+    }
+
+    // Sets point image sizes to point sizes if the input is missing or does not match input points number.
+    if (this.inputPointImageSizes === undefined || this.inputPointImageSizes.length !== this.pointsNumber) {
+      this.pointImageSizes = this.pointSizes ? new Float32Array(this.pointSizes) : new Float32Array(this.pointsNumber).fill(this._config.pointSize)
+    } else {
+      this.pointImageSizes = new Float32Array(this.inputPointImageSizes)
+      for (let i = 0; i < this.pointImageSizes.length; i++) {
+        if (!isNumber(this.pointImageSizes[i])) {
+          this.pointImageSizes[i] = this.pointSizes?.[i] ?? this._config.pointSize
+        }
+      }
+    }
+  }
+
+  public updateLinks (): void {
+    this.links = this.inputLinks
+  }
+
+  /**
+   * Updates the link colors based on the input data or default config value.
+   */
+  public updateLinkColor (): void {
+    if (this.linksNumber === undefined) {
+      this.linkColors = undefined
+      return
+    }
+
+    // Sets link colors to default values from config if the input is missing or does not match input links number.
+    const defaultRgba = getRgbaColor(this._config.linkColor)
+    if (this.inputLinkColors === undefined || this.inputLinkColors.length / 4 !== this.linksNumber) {
+      this.linkColors = new Float32Array(this.linksNumber * 4)
+
+      for (let i = 0; i < this.linkColors.length / 4; i++) {
+        this.linkColors[i * 4] = defaultRgba[0]
+        this.linkColors[i * 4 + 1] = defaultRgba[1]
+        this.linkColors[i * 4 + 2] = defaultRgba[2]
+        this.linkColors[i * 4 + 3] = defaultRgba[3]
+      }
+    } else {
+      this.linkColors = this.inputLinkColors
+      for (let i = 0; i < this.linkColors.length / 4; i++) {
+        if (!isNumber(this.linkColors[i * 4])) this.linkColors[i * 4] = defaultRgba[0]
+        if (!isNumber(this.linkColors[i * 4 + 1])) this.linkColors[i * 4 + 1] = defaultRgba[1]
+        if (!isNumber(this.linkColors[i * 4 + 2])) this.linkColors[i * 4 + 2] = defaultRgba[2]
+        if (!isNumber(this.linkColors[i * 4 + 3])) this.linkColors[i * 4 + 3] = defaultRgba[3]
+      }
+    }
+  }
+
+  /**
+   * Updates the link width based on the input data or default config value.
+   */
+  public updateLinkWidth (): void {
+    if (this.linksNumber === undefined) {
+      this.linkWidths = undefined
+      return
+    }
+
+    // Sets link widths to default values from config if the input is missing or does not match input links number.
+    if (this.inputLinkWidths === undefined || this.inputLinkWidths.length !== this.linksNumber) {
+      this.linkWidths = new Float32Array(this.linksNumber).fill(this._config.linkWidth)
+    } else {
+      this.linkWidths = this.inputLinkWidths
+      for (let i = 0; i < this.linkWidths.length; i++) {
+        if (!isNumber(this.linkWidths[i])) {
+          this.linkWidths[i] = this._config.linkWidth
+        }
+      }
+    }
+  }
+
+  /**
+   * Updates the link arrows based on the input data or default config value.
+   */
+  public updateArrows (): void {
+    if (this.linksNumber === undefined) {
+      this.linkArrows = undefined
+      return
+    }
+
+    // Sets link arrows to default values from config if the input is missing or does not match input links number.
+    if (this.linkArrowsBoolean === undefined || this.linkArrowsBoolean.length !== this.linksNumber) {
+      this.linkArrows = new Array(this.linksNumber).fill(+this._config.linkArrows)
+    } else {
+      this.linkArrows = this.linkArrowsBoolean.map(d => +d)
+    }
+  }
+
+  public updateLinkStrength (): void {
+    if (this.linksNumber === undefined) {
+      this.linkStrength = undefined
+    }
+
+    if (this.inputLinkStrength === undefined || this.inputLinkStrength.length !== this.linksNumber) {
+      this.linkStrength = undefined
+    } else {
+      this.linkStrength = this.inputLinkStrength
+    }
+  }
+
+  public updateClusters (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointClusters = undefined
+      this.clusterPositions = undefined
+      return
+    }
+    if (this.inputPointClusters === undefined || this.inputPointClusters.length !== this.pointsNumber) {
+      this.pointClusters = undefined
+    } else {
+      this.pointClusters = this.inputPointClusters
+    }
+    if (this.inputClusterPositions === undefined) {
+      this.clusterPositions = undefined
+    } else {
+      this.clusterPositions = this.inputClusterPositions
+    }
+    if (this.inputClusterStrength === undefined || this.inputClusterStrength.length !== this.pointsNumber) {
+      this.clusterStrength = undefined
+    } else {
+      this.clusterStrength = this.inputClusterStrength
+    }
+  }
+
+  public update (): void {
+    this.updatePoints()
+    this.updatePointColor()
+    this.updatePointSize()
+    this.updatePointShape()
+    this.updatePointImageIndices()
+    this.updatePointImageSizes()
+
+    this.updateLinks()
+    this.updateLinkColor()
+    this.updateLinkWidth()
+    this.updateArrows()
+    this.updateLinkStrength()
+
+    this.updateClusters()
+
+    this._createAdjacencyLists()
+    this._calculateDegrees()
+  }
+
+  public getAdjacentIndices (index: number): number[] | undefined {
+    return [...(this.sourceIndexToTargetIndices?.[index]?.map(d => d[0]) || []), ...(this.targetIndexToSourceIndices?.[index]?.map(d => d[0]) || [])]
+  }
+
+  private _createAdjacencyLists (): void {
+    if (this.linksNumber === undefined || this.links === undefined) {
+      this.sourceIndexToTargetIndices = undefined
+      this.targetIndexToSourceIndices = undefined
+      return
+    }
+
+    this.sourceIndexToTargetIndices = new Array(this.pointsNumber).fill(undefined)
+    this.targetIndexToSourceIndices = new Array(this.pointsNumber).fill(undefined)
+    for (let i = 0; i < this.linksNumber; i++) {
+      const sourceIndex = this.links[i * 2]
+      const targetIndex = this.links[i * 2 + 1]
+      if (sourceIndex !== undefined && targetIndex !== undefined) {
+        if (this.sourceIndexToTargetIndices[sourceIndex] === undefined) this.sourceIndexToTargetIndices[sourceIndex] = []
+        this.sourceIndexToTargetIndices[sourceIndex]?.push([targetIndex, i])
+
+        if (this.targetIndexToSourceIndices[targetIndex] === undefined) this.targetIndexToSourceIndices[targetIndex] = []
+        this.targetIndexToSourceIndices[targetIndex]?.push([sourceIndex, i])
+      }
+    }
+  }
+
+  private _calculateDegrees (): void {
+    if (this.pointsNumber === undefined) {
+      this.degree = undefined
+      this.inDegree = undefined
+      this.outDegree = undefined
+      return
+    }
+
+    this.degree = new Array(this.pointsNumber).fill(0)
+    this.inDegree = new Array(this.pointsNumber).fill(0)
+    this.outDegree = new Array(this.pointsNumber).fill(0)
+
+    for (let i = 0; i < this.pointsNumber; i++) {
+      this.inDegree[i] = this.targetIndexToSourceIndices?.[i]?.length ?? 0
+      this.outDegree[i] = this.sourceIndexToTargetIndices?.[i]?.length ?? 0
+      this.degree[i] = (this.inDegree[i] ?? 0) + (this.outDegree[i] ?? 0)
+    }
+  }
+}

package/src/modules/Lines/draw-curve-line.frag

@@ -0,0 +1,59 @@
+#version 300 es
+#ifdef GL_ES
+precision highp float;
+#endif
+
+in vec4 rgbaColor;
+in vec2 pos;
+in float arrowLength;
+in float useArrow;
+in float smoothing;
+in float arrowWidthFactor;
+in float linkIndex;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform drawLineFragmentUniforms {
+  float renderMode;
+} drawLineFrag;
+
+#define renderMode drawLineFrag.renderMode
+#else
+// renderMode: 0.0 = normal rendering, 1.0 = index buffer rendering for picking
+uniform float renderMode;
+#endif
+
+out vec4 fragColor;
+
+float map(float value, float min1, float max1, float min2, float max2) {
+  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+}
+
+void main() {
+  float opacity = 1.0;
+  vec3 color = rgbaColor.rgb;
+
+  if (useArrow > 0.5) {
+    float end_arrow = 0.5 + arrowLength / 2.0;
+    float start_arrow = end_arrow - arrowLength;
+    float arrowWidthDelta = arrowWidthFactor / 2.0;
+    float linkOpacity = rgbaColor.a * smoothstep(0.5 - arrowWidthDelta, 0.5 - arrowWidthDelta - smoothing / 2.0, abs(pos.y));
+    float arrowOpacity = 1.0;
+    if (pos.x > start_arrow && pos.x < start_arrow + arrowLength) {
+      float xmapped = map(pos.x, start_arrow, end_arrow, 0.0, 1.0);
+      arrowOpacity = rgbaColor.a * smoothstep(xmapped - smoothing, xmapped, map(abs(pos.y), 0.5, 0.0, 0.0, 1.0));
+      if (linkOpacity != arrowOpacity) {
+        linkOpacity = max(linkOpacity, arrowOpacity);
+      }
+    }
+    opacity = linkOpacity;
+  } else opacity = rgbaColor.a * smoothstep(0.5, 0.5 - smoothing, abs(pos.y));
+  
+  if (renderMode > 0.0) {
+    if (opacity > 0.0) {
+      fragColor = vec4(linkIndex, 0.0, 0.0, 1.0);
+    } else {
+      fragColor = vec4(-1.0, 0.0, 0.0, 0.0);
+    }
+  } else fragColor = vec4(color, opacity);
+
+}

package/src/modules/Lines/draw-curve-line.vert

@@ -0,0 +1,248 @@
+#version 300 es
+#ifdef GL_ES
+precision highp float;
+#endif
+
+in vec2 position, pointA, pointB;
+in vec4 color;
+in float width;
+in float arrow;
+in float linkIndices;
+
+uniform sampler2D positionsTexture;
+uniform sampler2D pointGreyoutStatus;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform drawLineUniforms {
+  mat4 transformationMatrix;
+  float pointsTextureSize;
+  float widthScale;
+  float linkArrowsSizeScale;
+  float spaceSize;
+  vec2 screenSize;
+  vec2 linkVisibilityDistanceRange;
+  float linkVisibilityMinTransparency;
+  float linkOpacity;
+  float greyoutOpacity;
+  float curvedWeight;
+  float curvedLinkControlPointDistance;
+  float curvedLinkSegments;
+  float scaleLinksOnZoom;
+  float maxPointSize;
+  float renderMode;
+  float hoveredLinkIndex;
+  vec4 hoveredLinkColor;
+  float hoveredLinkWidthIncrease;
+} drawLine;
+
+#define transformationMatrix drawLine.transformationMatrix
+#define pointsTextureSize drawLine.pointsTextureSize
+#define widthScale drawLine.widthScale
+#define linkArrowsSizeScale drawLine.linkArrowsSizeScale
+#define spaceSize drawLine.spaceSize
+#define screenSize drawLine.screenSize
+#define linkVisibilityDistanceRange drawLine.linkVisibilityDistanceRange
+#define linkVisibilityMinTransparency drawLine.linkVisibilityMinTransparency
+#define linkOpacity drawLine.linkOpacity
+#define greyoutOpacity drawLine.greyoutOpacity
+#define curvedWeight drawLine.curvedWeight
+#define curvedLinkControlPointDistance drawLine.curvedLinkControlPointDistance
+#define curvedLinkSegments drawLine.curvedLinkSegments
+#define scaleLinksOnZoom drawLine.scaleLinksOnZoom
+#define maxPointSize drawLine.maxPointSize
+#define renderMode drawLine.renderMode
+#define hoveredLinkIndex drawLine.hoveredLinkIndex
+#define hoveredLinkColor drawLine.hoveredLinkColor
+#define hoveredLinkWidthIncrease drawLine.hoveredLinkWidthIncrease
+#else
+uniform mat3 transformationMatrix;
+uniform float pointsTextureSize;
+uniform float widthScale;
+uniform float linkArrowsSizeScale;
+uniform float spaceSize;
+uniform vec2 screenSize;
+uniform vec2 linkVisibilityDistanceRange;
+uniform float linkVisibilityMinTransparency;
+uniform float linkOpacity;
+uniform float greyoutOpacity;
+uniform float curvedWeight;
+uniform float curvedLinkControlPointDistance;
+uniform float curvedLinkSegments;
+uniform bool scaleLinksOnZoom;
+uniform float maxPointSize;
+// renderMode: 0.0 = normal rendering, 1.0 = index buffer rendering for picking
+uniform float renderMode;
+uniform float hoveredLinkIndex;
+uniform vec4 hoveredLinkColor;
+uniform float hoveredLinkWidthIncrease;
+#endif
+
+out vec4 rgbaColor;
+out vec2 pos;
+out float arrowLength;
+out float useArrow;
+out float smoothing;
+out float arrowWidthFactor;
+out float linkIndex;
+
+float map(float value, float min1, float max1, float min2, float max2) {
+  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+}
+
+vec2 conicParametricCurve(vec2 A, vec2 B, vec2 ControlPoint, float t, float w) {
+  vec2 divident = (1.0 - t) * (1.0 - t) * A + 2.0 * (1.0 - t) * t * w * ControlPoint + t * t * B;
+  float divisor = (1.0 - t) * (1.0 - t) + 2.0 * (1.0 - t) * t * w + t * t;
+  return divident / divisor;
+}
+
+float calculateLinkWidth(float width) {
+  float linkWidth;
+  if (scaleLinksOnZoom > 0.0) {
+    // Use original width if links should scale with zoom
+    linkWidth = width;
+  } else {
+    // Adjust width based on zoom level to maintain visual size
+    linkWidth = width / transformationMatrix[0][0];
+    // Apply a non-linear scaling to avoid extreme widths
+    linkWidth *= min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
+  }
+  // Limit link width based on whether it has an arrow
+  if (useArrow > 0.5) {
+    return min(linkWidth, (maxPointSize * 2.0) / transformationMatrix[0][0]);
+  } else {
+    return min(linkWidth, maxPointSize / transformationMatrix[0][0]);
+  }
+}
+
+float calculateArrowWidth(float arrowWidth) {
+  if (scaleLinksOnZoom > 0.0) {
+    return arrowWidth;
+  } else {
+    // Apply the same scaling logic as calculateLinkWidth to maintain proportionality
+    arrowWidth = arrowWidth / transformationMatrix[0][0];
+    // Apply the same non-linear scaling to avoid extreme widths
+    arrowWidth *= min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
+    return arrowWidth;
+  }
+}
+
+void main() {
+  pos = position;
+  linkIndex = linkIndices;
+
+  vec2 pointTexturePosA = (pointA + 0.5) / pointsTextureSize;
+  vec2 pointTexturePosB = (pointB + 0.5) / pointsTextureSize;
+  
+  vec4 greyoutStatusA = texture(pointGreyoutStatus, pointTexturePosA);
+  vec4 greyoutStatusB = texture(pointGreyoutStatus, pointTexturePosB);
+  
+  vec4 pointPositionA = texture(positionsTexture, pointTexturePosA);
+  vec4 pointPositionB = texture(positionsTexture, pointTexturePosB);
+  vec2 a = pointPositionA.xy;
+  vec2 b = pointPositionB.xy;
+  
+  // Calculate direction vector and its perpendicular
+  vec2 xBasis = b - a;
+  vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
+
+  // Calculate link distance and control point for curved link
+  float linkDist = length(xBasis);
+  float h = curvedLinkControlPointDistance;
+  vec2 controlPoint = (a + b) / 2.0 + yBasis * linkDist * h;
+
+  // Convert link distance to screen pixels
+  float linkDistPx = linkDist * transformationMatrix[0][0];
+  
+  // Calculate line width using the width scale
+  float linkWidth = width * widthScale;
+  float k = 2.0;
+  // Arrow width is proportionally larger than the line width
+  float arrowWidth = linkWidth * k;
+  arrowWidth *= linkArrowsSizeScale;
+
+  // Ensure arrow width difference is non-negative to prevent unwanted changes to link width
+  float arrowWidthDifference = max(0.0, arrowWidth - linkWidth);
+
+  // Calculate arrow width in pixels
+  float arrowWidthPx = calculateArrowWidth(arrowWidth);
+
+  // Calculate arrow length proportional to its width
+  // 0.866 is approximately sqrt(3)/2 - related to equilateral triangle geometry
+  // Cap the length to avoid overly long arrows on short links
+  arrowLength = min(0.3, (0.866 * arrowWidthPx * 2.0) / linkDist);
+
+  useArrow = arrow;
+  if (useArrow > 0.5) {
+    linkWidth += arrowWidthDifference;
+  }
+
+  arrowWidthFactor = arrowWidthDifference / linkWidth;
+
+  // Calculate final link width in pixels with smoothing
+  float linkWidthPx = calculateLinkWidth(linkWidth);
+    
+  if (renderMode > 0.0) {
+    // Add 5 pixels padding for better hover detection
+    linkWidthPx += 5.0 / transformationMatrix[0][0];
+  } else {
+      // Add pixel increase if this is the hovered link
+    if (hoveredLinkIndex == linkIndex) {
+      linkWidthPx += hoveredLinkWidthIncrease / transformationMatrix[0][0];
+    }
+  }
+  float smoothingPx = 0.5 / transformationMatrix[0][0];
+  smoothing = smoothingPx / linkWidthPx;
+  linkWidthPx += smoothingPx;
+
+
+
+  // Calculate final color with opacity based on link distance
+  vec3 rgbColor = color.rgb;
+  // Adjust opacity based on link distance
+  float opacity = color.a * linkOpacity * max(linkVisibilityMinTransparency, map(linkDistPx, linkVisibilityDistanceRange.g, linkVisibilityDistanceRange.r, 0.0, 1.0));
+
+  // Apply greyed out opacity if either endpoint is greyed out
+  if (greyoutStatusA.r > 0.0 || greyoutStatusB.r > 0.0) {
+    opacity *= greyoutOpacity;
+  }
+
+  // Pass final color to fragment shader
+  rgbaColor = vec4(rgbColor, opacity);
+
+  // Apply hover color if this is the hovered link and hover color is defined
+  if (hoveredLinkIndex == linkIndex && hoveredLinkColor.a > -0.5) {
+    // Keep existing RGB values but multiply opacity with hover color opacity
+    rgbaColor.rgb = hoveredLinkColor.rgb;
+    rgbaColor.a *= hoveredLinkColor.a;
+  }
+
+  // Calculate position on the curved path
+  float t = position.x;
+  float w = curvedWeight;
+  
+  float tPrev = t - 1.0 / curvedLinkSegments;
+  float tNext = t + 1.0 / curvedLinkSegments;
+  
+  vec2 pointCurr = conicParametricCurve(a, b, controlPoint, t, w);
+  
+  vec2 pointPrev = conicParametricCurve(a, b, controlPoint, max(0.0, tPrev), w);
+  vec2 pointNext = conicParametricCurve(a, b, controlPoint, min(tNext, 1.0), w);
+  
+  vec2 xBasisCurved = pointNext - pointPrev;
+  vec2 yBasisCurved = normalize(vec2(-xBasisCurved.y, xBasisCurved.x));
+  
+  pointCurr += yBasisCurved * linkWidthPx * position.y;
+  
+  // Transform to clip space coordinates
+  vec2 p = 2.0 * pointCurr / spaceSize - 1.0;
+  p *= spaceSize / screenSize;
+  
+  #ifdef USE_UNIFORM_BUFFERS
+  mat3 transformMat3 = mat3(transformationMatrix);
+  vec3 final = transformMat3 * vec3(p, 1);
+  #else
+  vec3 final = transformationMatrix * vec3(p, 1);
+  #endif
+  
+  gl_Position = vec4(final.rg, 0, 1);
+}

package/src/modules/Lines/geometry.ts

@@ -0,0 +1,18 @@
+import { scalePow } from 'd3-scale'
+import { range } from 'd3-array'
+
+export const getCurveLineGeometry = (segments: number): number[][] => {
+  const scale = scalePow()
+    .exponent(2)
+    .range([0, 1])
+    .domain([-1, 1])
+
+  const hodographValues = range(0, segments).map(d => -0.5 + d / segments)
+  hodographValues.push(0.5)
+  const result = new Array(hodographValues.length * 2)
+  hodographValues.forEach((d, i) => {
+    result[i * 2] = [scale(d * 2), 0.5]
+    result[i * 2 + 1] = [scale(d * 2), -0.5]
+  })
+  return result
+}