@cosmos.gl/graph 2.4.0 → 2.6.0

package/src/modules/Lines/index.ts

@@ -2,21 +2,44 @@ import regl from 'regl'
 import { CoreModule } from '@/graph/modules/core-module'
 import drawLineFrag from '@/graph/modules/Lines/draw-curve-line.frag'
 import drawLineVert from '@/graph/modules/Lines/draw-curve-line.vert'
+import hoveredLineIndexFrag from '@/graph/modules/Lines/hovered-line-index.frag'
+import hoveredLineIndexVert from '@/graph/modules/Lines/hovered-line-index.vert'
 import { defaultConfigValues } from '@/graph/variables'
 import { getCurveLineGeometry } from '@/graph/modules/Lines/geometry'
 
 export class Lines extends CoreModule {
+  public linkIndexFbo: regl.Framebuffer2D | undefined
+  public hoveredLineIndexFbo: regl.Framebuffer2D | undefined
   private drawCurveCommand: regl.DrawCommand | undefined
+  private hoveredLineIndexCommand: regl.DrawCommand | undefined
   private pointsBuffer: regl.Buffer | undefined
   private colorBuffer: regl.Buffer | undefined
   private widthBuffer: regl.Buffer | undefined
   private arrowBuffer: regl.Buffer | undefined
   private curveLineGeometry: number[][] | undefined
   private curveLineBuffer: regl.Buffer | undefined
+  private linkIndexBuffer: regl.Buffer | undefined
+  private quadBuffer: regl.Buffer | undefined
 
   public initPrograms (): void {
     const { reglInstance, config, store } = this
 
+    this.updateLinkIndexFbo()
+
+    // Initialize the hovered line index FBO
+    if (!this.hoveredLineIndexFbo) {
+      this.hoveredLineIndexFbo = reglInstance.framebuffer({
+        color: reglInstance.texture({
+          width: 1,
+          height: 1,
+          format: 'rgba',
+          type: 'float',
+        }),
+        depth: false,
+        stencil: false,
+      })
+    }
+
     if (!this.drawCurveCommand) {
       this.drawCurveCommand = reglInstance({
         vert: drawLineVert,
@@ -57,6 +80,12 @@ export class Lines extends CoreModule {
             offset: Float32Array.BYTES_PER_ELEMENT * 0,
             stride: Float32Array.BYTES_PER_ELEMENT * 1,
           },
+          linkIndices: {
+            buffer: () => this.linkIndexBuffer,
+            divisor: 1,
+            offset: Float32Array.BYTES_PER_ELEMENT * 0,
+            stride: Float32Array.BYTES_PER_ELEMENT * 1,
+          },
         },
         uniforms: {
           positionsTexture: () => this.points?.currentPositionFbo,
@@ -64,7 +93,7 @@ export class Lines extends CoreModule {
           transformationMatrix: () => store.transform,
           pointsTextureSize: () => store.pointsTextureSize,
           widthScale: () => config.linkWidthScale,
-          arrowSizeScale: () => config.linkArrowsSizeScale,
+          linkArrowsSizeScale: () => config.linkArrowsSizeScale,
           spaceSize: () => store.adjustedSpaceSize,
           screenSize: () => store.screenSize,
           linkVisibilityDistanceRange: () => config.linkVisibilityDistanceRange,
@@ -76,11 +105,24 @@ export class Lines extends CoreModule {
           curvedWeight: () => config.curvedLinkWeight,
           curvedLinkControlPointDistance: () => config.curvedLinkControlPointDistance,
           curvedLinkSegments: () => config.curvedLinks ? config.curvedLinkSegments ?? defaultConfigValues.curvedLinkSegments : 1,
+          hoveredLinkIndex: () => store.hoveredLinkIndex ?? -1,
+          hoveredLinkColor: () => store.hoveredLinkColor,
+          hoveredLinkWidthIncrease: () => config.hoveredLinkWidthIncrease,
+          renderMode: reglInstance.prop<{ renderMode: number }, 'renderMode'>('renderMode'),
         },
         cull: {
           enable: true,
           face: 'back',
         },
+        /**
+         * Blending behavior for link index rendering (renderMode: 1.0 - hover detection):
+         *
+         * When rendering link indices to the framebuffer, we use full opacity (1.0).
+         * This means:
+         * - The source color completely overwrites the destination
+         * - No blending occurs - it's like drawing with a permanent marker
+         * - This preserves the exact index values we need for picking/selection
+         */
         blend: {
           enable: true,
           func: {
@@ -98,11 +140,37 @@ export class Lines extends CoreModule {
           enable: false,
           mask: false,
         },
+        framebuffer: reglInstance.prop<{ framebuffer: regl.Framebuffer2D }, 'framebuffer'>('framebuffer'),
         count: () => this.curveLineGeometry?.length ?? 0,
         instances: () => this.data.linksNumber ?? 0,
         primitive: 'triangle strip',
       })
     }
+
+    if (!this.hoveredLineIndexCommand) {
+      this.hoveredLineIndexCommand = reglInstance({
+        vert: hoveredLineIndexVert,
+        frag: hoveredLineIndexFrag,
+        attributes: {
+          position: {
+            buffer: () => this.quadBuffer,
+          },
+        },
+        uniforms: {
+          linkIndexTexture: () => this.linkIndexFbo,
+          mousePosition: () => store.screenMousePosition,
+          screenSize: () => store.screenSize,
+        },
+        framebuffer: this.hoveredLineIndexFbo,
+        count: 4,
+        primitive: 'triangle strip',
+      })
+    }
+
+    // Initialize quad buffer for full-screen rendering
+    if (!this.quadBuffer) {
+      this.quadBuffer = reglInstance.buffer([-1, -1, 1, -1, -1, 1, 1, 1])
+    }
   }
 
   public draw (): void {
@@ -111,7 +179,28 @@ export class Lines extends CoreModule {
     if (!this.widthBuffer) this.updateWidth()
     if (!this.arrowBuffer) this.updateArrow()
     if (!this.curveLineGeometry) this.updateCurveLineGeometry()
-    this.drawCurveCommand?.()
+
+    // Render normal links (renderMode: 0.0 = normal rendering)
+    this.drawCurveCommand?.({ framebuffer: null, renderMode: 0.0 })
+  }
+
+  public updateLinkIndexFbo (): void {
+    const { reglInstance, store } = this
+
+    // Only create and update the link index FBO if link hovering is enabled
+    if (!this.store.isLinkHoveringEnabled) return
+
+    if (!this.linkIndexFbo) this.linkIndexFbo = reglInstance.framebuffer()
+    this.linkIndexFbo({
+      color: reglInstance.texture({
+        width: store.screenSize[0],
+        height: store.screenSize[1],
+        format: 'rgba',
+        type: 'float',
+      }),
+      depth: false,
+      stencil: false,
+    })
   }
 
   public updatePointsBuffer (): void {
@@ -134,6 +223,13 @@ export class Lines extends CoreModule {
 
     if (!this.pointsBuffer) this.pointsBuffer = reglInstance.buffer(0)
     this.pointsBuffer(instancePoints)
+
+    const linkIndices = new Float32Array(data.linksNumber)
+    for (let i = 0; i < data.linksNumber; i++) {
+      linkIndices[i] = i
+    }
+    if (!this.linkIndexBuffer) this.linkIndexBuffer = reglInstance.buffer(0)
+    this.linkIndexBuffer(linkIndices)
   }
 
   public updateColor (): void {
@@ -160,4 +256,18 @@ export class Lines extends CoreModule {
     if (!this.curveLineBuffer) this.curveLineBuffer = reglInstance.buffer(0)
     this.curveLineBuffer(this.curveLineGeometry)
   }
+
+  public findHoveredLine (): void {
+    if (!this.data.linksNumber || !this.store.isLinkHoveringEnabled) return
+    if (!this.linkIndexFbo) this.updateLinkIndexFbo()
+    this.reglInstance.clear({
+      framebuffer: this.linkIndexFbo as regl.Framebuffer2D,
+      color: [0, 0, 0, 0],
+    })
+    // Render to index buffer for picking/hover detection (renderMode: 1.0 = index rendering)
+    this.drawCurveCommand?.({ framebuffer: this.linkIndexFbo, renderMode: 1.0 })
+
+    // Execute the command to read the link index at mouse position
+    this.hoveredLineIndexCommand?.()
+  }
 }

package/src/modules/Points/index.ts

@@ -61,6 +61,8 @@ export class Points extends CoreModule {
   private trackedIndices: number[] | undefined
   private selectedTexture: regl.Texture2D | undefined
   private greyoutStatusTexture: regl.Texture2D | undefined
+  private pinnedStatusTexture: regl.Texture2D | undefined
+  private pinnedStatusFbo: regl.Framebuffer2D | undefined
   private sizeTexture: regl.Texture2D | undefined
   private trackedIndicesTexture: regl.Texture2D | undefined
   private polygonPathTexture: regl.Texture2D | undefined
@@ -172,6 +174,7 @@ export class Points extends CoreModule {
     this.sampledPointIndices(createIndexesForBuffer(store.pointsTextureSize))
 
     this.updateGreyoutStatus()
+    this.updatePinnedStatus()
     this.updateSampledPointsGrid()
 
     this.trackPointsByIndices()
@@ -193,6 +196,7 @@ export class Points extends CoreModule {
             velocity: () => this.velocityFbo,
             friction: () => config.simulationFriction,
             spaceSize: () => store.adjustedSpaceSize,
+            pinnedStatusTexture: () => this.pinnedStatusFbo,
           },
         })
       }
@@ -520,6 +524,36 @@ export class Points extends CoreModule {
     })
   }
 
+  public updatePinnedStatus (): void {
+    const { reglInstance, store: { pointsTextureSize }, data } = this
+    if (!pointsTextureSize) return
+
+    // Pinned status: 0 - not pinned, 1 - pinned
+    const initialState = new Float32Array(pointsTextureSize * pointsTextureSize * 4).fill(0)
+
+    if (data.inputPinnedPoints && data.pointsNumber !== undefined) {
+      for (const pinnedIndex of data.inputPinnedPoints) {
+        if (pinnedIndex >= 0 && pinnedIndex < data.pointsNumber) {
+          initialState[pinnedIndex * 4] = 1
+        }
+      }
+    }
+
+    if (!this.pinnedStatusTexture) this.pinnedStatusTexture = reglInstance.texture()
+    this.pinnedStatusTexture({
+      data: initialState,
+      width: pointsTextureSize,
+      height: pointsTextureSize,
+      type: 'float',
+    })
+    if (!this.pinnedStatusFbo) this.pinnedStatusFbo = reglInstance.framebuffer()
+    this.pinnedStatusFbo({
+      color: this.pinnedStatusTexture,
+      depth: false,
+      stencil: false,
+    })
+  }
+
   public updateSize (): void {
     const { reglInstance, store: { pointsTextureSize }, data } = this
     if (!pointsTextureSize || data.pointsNumber === undefined || data.pointSizes === undefined) return

package/src/modules/Points/update-position.frag

@@ -4,6 +4,7 @@ precision highp float;
 
 uniform sampler2D positionsTexture;
 uniform sampler2D velocity;
+uniform sampler2D pinnedStatusTexture;
 uniform float friction;
 uniform float spaceSize;
 
@@ -13,6 +14,17 @@ void main() {
   vec4 pointPosition = texture2D(positionsTexture, textureCoords);
   vec4 pointVelocity = texture2D(velocity, textureCoords);
 
+  // Check if point is pinned
+  // pinnedStatusTexture has the same size and layout as positionsTexture
+  // Each pixel corresponds to a point: red channel > 0.5 means the point is pinned
+  vec4 pinnedStatus = texture2D(pinnedStatusTexture, textureCoords);
+  
+  // If pinned, don't update position
+  if (pinnedStatus.r > 0.5) {
+    gl_FragColor = pointPosition;
+    return;
+  }
+
   // Friction
   pointVelocity.rg *= friction;
 

package/src/modules/Store/index.ts

@@ -3,10 +3,18 @@ import { mat3 } from 'gl-matrix'
 import { Random } from 'random'
 import { getRgbaColor, rgbToBrightness } from '@/graph/helper'
 import { hoveredPointRingOpacity, focusedPointRingOpacity, defaultConfigValues } from '@/graph/variables'
+import type { GraphConfigInterface } from '@/graph/config'
 
 export const ALPHA_MIN = 0.001
 export const MAX_POINT_SIZE = 64
 
+/**
+ * Maximum number of executions to delay before performing hover detection.
+ * This threshold prevents excessive hover detection calls for performance optimization.
+ * The `findHoveredItem` method will skip actual detection until this count is reached.
+ */
+export const MAX_HOVER_DETECTION_DELAY = 4
+
 export type Hovered = { index: number; position: [ number, number ] }
 type Focused = { index: number }
 
@@ -26,6 +34,7 @@ export class Store {
   public hoveredPoint: Hovered | undefined = undefined
   public focusedPoint: Focused | undefined = undefined
   public draggingPointIndex: number | undefined = undefined
+  public hoveredLinkIndex: number | undefined = undefined
   public adjustedSpaceSize = defaultConfigValues.spaceSize
   public isSpaceKeyPressed = false
   public div: HTMLDivElement | undefined
@@ -33,10 +42,13 @@ export class Store {
 
   public hoveredPointRingColor = [1, 1, 1, hoveredPointRingOpacity]
   public focusedPointRingColor = [1, 1, 1, focusedPointRingOpacity]
+  public hoveredLinkColor = [-1, -1, -1, -1]
   // -1 means that the color is not set
   public greyoutPointColor = [-1, -1, -1, -1]
   // If backgroundColor is dark, isDarkenGreyout is true
   public isDarkenGreyout = false
+  // Whether link hovering is enabled based on configured event handlers
+  public isLinkHoveringEnabled = false
   private alphaTarget = 0
   private scalePointX = scaleLinear()
   private scalePointY = scaleLinear()
@@ -102,14 +114,14 @@ export class Store {
     return this.scalePointY(y)
   }
 
-  public setHoveredPointRingColor (color: string): void {
+  public setHoveredPointRingColor (color: string | [number, number, number, number]): void {
     const convertedRgba = getRgbaColor(color)
     this.hoveredPointRingColor[0] = convertedRgba[0]
     this.hoveredPointRingColor[1] = convertedRgba[1]
     this.hoveredPointRingColor[2] = convertedRgba[2]
   }
 
-  public setFocusedPointRingColor (color: string): void {
+  public setFocusedPointRingColor (color: string | [number, number, number, number]): void {
     const convertedRgba = getRgbaColor(color)
     this.focusedPointRingColor[0] = convertedRgba[0]
     this.focusedPointRingColor[1] = convertedRgba[1]
@@ -128,6 +140,25 @@ export class Store {
     this.greyoutPointColor[3] = convertedRgba[3]
   }
 
+  public updateLinkHoveringEnabled (config: Pick<GraphConfigInterface, 'onLinkClick' | 'onLinkMouseOver' | 'onLinkMouseOut'>): void {
+    this.isLinkHoveringEnabled = !!(config.onLinkClick || config.onLinkMouseOver || config.onLinkMouseOut)
+    if (!this.isLinkHoveringEnabled) {
+      this.hoveredLinkIndex = undefined
+    }
+  }
+
+  public setHoveredLinkColor (color?: string | [number, number, number, number]): void {
+    if (color === undefined) {
+      this.hoveredLinkColor = [-1, -1, -1, -1]
+      return
+    }
+    const convertedRgba = getRgbaColor(color)
+    this.hoveredLinkColor[0] = convertedRgba[0]
+    this.hoveredLinkColor[1] = convertedRgba[1]
+    this.hoveredLinkColor[2] = convertedRgba[2]
+    this.hoveredLinkColor[3] = convertedRgba[3]
+  }
+
   public setFocusedPoint (index?: number): void {
     if (index !== undefined) {
       this.focusedPoint = { index }

package/src/modules/core-module.ts

@@ -10,6 +10,7 @@ export class CoreModule {
   public readonly store: Store
   public readonly data: GraphData
   public readonly points: Points | undefined
+  public _debugRandomNumber = Math.floor(Math.random() * 1000)
 
   public constructor (
     reglInstance: regl.Regl,

package/src/stories/1. welcome.mdx

@@ -2,13 +2,19 @@ import { Meta } from "@storybook/blocks";
 
 <Meta title="Welcome to cosmos.gl" />
 
-<p style={{ fontSize: '2rem', lineHeight: '1.25em' }}>Welcome to cosmos.gl — a high-performance WebGL library for visualizing network graphs and machine learning embeddings.</p>
+<div style={{ fontSize: '1.0rem', float: 'right' }}>
+  <a href="https://github.com/cosmosgl/graph" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', color: '#fff' }}>
+    <svg height="30" viewBox="0 0 16 16" width="30" aria-hidden="true">
+      <path fill="currentColor" d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+    </svg>
+  </a>
+</div>
+
+<p style={{ fontSize: '1.75rem', lineHeight: '1.25em', marginTop: 0 }}>Welcome to <b>cosmos.gl</b> – a high-performance WebGL library for visualizing network graphs and machine learning embeddings.</p>
 
 <video style={{ width: '100%' }} src="https://user-images.githubusercontent.com/755708/173392407-9b05cbb6-d39e-4c2c-ab41-50900cfda823.mp4" loop autoPlay muted playsInline>
 </video>
 
-<p style={{ fontSize: '1.0rem' }}>Here you can find documentaion and examples of how to use cosmos.gl</p>
-
 ---
 
 ### Quick Start
@@ -35,7 +41,8 @@ const config = {
   fitViewPadding: 0.3, // centers the graph width padding of ~30% of screen
   rescalePositions: true, // rescale positions
   enableDrag: true, // enable dragging points
-  onClick: pointIndex => { console.log('Clicked point index: ', pointIndex) },
+  onPointClick: pointIndex => { console.log('Clicked point index: ', pointIndex) },
+  onBackgroundClick: () => { console.log('Clicked background') },
   /* ... */
 }
 

package/src/stories/2. configuration.mdx

@@ -9,13 +9,15 @@ import { Meta } from "@storybook/blocks";
 | enableSimulation | If set to `false`, the simulation will not run. This property will be applied only on component initialization and it can't be changed using the `setConfig` method | `true` |
 | backgroundColor | Canvas background color | `#222222` |
 | spaceSize | Simulation space size (max 8192) | `8192` |
-| pointColor | The default color to use for points when no point colors are provided, or if the color value in the array is `undefined` or `null`. This can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255 | `#b3b3b3` |
+| pointDefaultColor | The default color to use for points when no point colors are provided, or if the color value in the array is `undefined` or `null`. This can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255 | `#b3b3b3` |
+| pointColor | **[DEPRECATED]** Use `pointDefaultColor` instead. The default color to use for points when no point colors are provided... | `#b3b3b3` |
 | pointGreyoutOpacity | Greyed out point opacity value when the selection is active | `undefined` |
-| pointGreyoutColor | Greyed out point color value when the selection is active | `undefined` |
+| pointGreyoutColor | The color to use for points when they are greyed out (when selection is active). This can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255. If not provided, the color will be the same as the point's original color, but darkened or lightened depending on the background color. If `pointGreyoutOpacity` is also defined, it will override the alpha/opacity component of this color. | `undefined` |
 | pointSize | The default size value to use for points when no point sizes are provided or if the size value in the array is `undefined` or `null` | `4` |
 | pointOpacity | Universal opacity value applied to all points. This value multiplies with individual point alpha values (if set via setPointColors). Useful for dynamically controlling opacity of all points without updating individual RGBA arrays. | `1.0` |
 | pointSizeScale | Scale factor for the point size | `1` |
 | hoveredPointCursor | Cursor style to use when hovering over a point | `auto` |
+| hoveredLinkCursor | Cursor style to use when hovering over a link | `auto` |
 | renderHoveredPointRing | Turns ring rendering around a point on hover on / off | `false` |
 | hoveredPointRingColor | Hovered point ring color hex value or an array of RGBA values | `white` |
 | focusedPointRingColor | Focused point ring color hex value or an array of RGBA values | `white` |
@@ -26,6 +28,8 @@ import { Meta } from "@storybook/blocks";
 | linkGreyoutOpacity | Greyed out link opacity value when the selection is active | `0.1` |
 | linkWidth | The default width value to use for links when no link widths are provided or if the width value in the array is `undefined` or `null` | `1` |
 | linkWidthScale | Scale factor for the link width | `1` |
+| hoveredLinkColor | The color to use for links when they are hovered. This can be either a hex color string (e.g., '#ff3333') or an array of RGBA values in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255 | `undefined` |
+| hoveredLinkWidthIncrease | Number of pixels to add to the link width when hovered | `5` |
 | scaleLinksOnZoom | Increase/decrease link width when zooming | `false` |
 | curvedLinks | If set to true, links are rendered as curved lines. Otherwise as straight lines | `false` |
 | curvedLinkSegments | Number of segments in a curved line | `19` |
@@ -86,11 +90,17 @@ cosmos.gl layout algorithm was inspired by the [d3-force](https://github.com/d3/
 | onSimulationTick | Called on every simulation tick, with the current alpha value and hover information |
 | onSimulationEnd | Called when simulation stops |
 | onSimulationPause | Called when simulation pauses |
-| onSimulationRestart | Called when simulation restarts |
+| onSimulationUnpause | Called when simulation unpauses |
+| onSimulationRestart | **[DEPRECATED]** Called when simulation restarts. Use `onSimulationUnpause` instead |
 | onClick | Called on canvas click with point index and position |
+| onPointClick | Called when a point is clicked |
+| onLinkClick | Called when a link is clicked |
+| onBackgroundClick | Called when the background (empty space) is clicked |
 | onMouseMove | Called on mouse movement with hover info |
 | onPointMouseOver | Called when pointer enters a point |
 | onPointMouseOut | Called when pointer leaves a point |
+| onLinkMouseOver | Called when pointer enters a link |
+| onLinkMouseOut | Called when pointer leaves a link |
 | onZoomStart | Called when zoom/pan starts |
 | onZoom | Called during zoom/pan |
 | onZoomEnd | Called when zoom/pan ends |

package/src/stories/3. api-reference.mdx

@@ -8,11 +8,14 @@ This method sets the [cosmos.gl configuration](../?path=/docs/configuration--doc
 
 * **`config`** (Object): The configuration object adhering to cosmos.gl configuration properties.
 
-### <a name="set_point_positions" href="#set_point_positions">#</a> graph.<b>setPointPositions</b>(<i>pointPositions</i>)
+### <a name="set_point_positions" href="#set_point_positions">#</a> graph.<b>setPointPositions</b>(<i>pointPositions</i>, [<i>dontRescale</i>])
 
 This method sets the positions of points in a cosmos.gl graph using the provided coordinates array.
 
 * **`pointPositions`** (Float32Array): A Float32Array representing the x and y coordinates of points in the format `[x1, y1, x2, y2, ..., xN, yN]`. Each pair represents the coordinates of a single point.
+* **`dontRescale`** (Boolean, optional): For this call only, controls whether to rescale the points.
+  - `true`: Don't rescale the points.
+  - `false` or `undefined` (default): Use the behavior defined by `config.rescalePositions`.
 
 **Example:**
 ```javascript
@@ -246,7 +249,7 @@ graph.render();
 
 In this example, the `linkArrows` array contains three boolean values. The first value `true` sets an arrow on the first link, the second value `false` leaves the second link without an arrow, and the third value `true` sets an arrow on the third link.
 
-### <a name="set_link_strengths" href="#set_link_strengths">#</a> graph.<b>setLinkStrength</b>(<i>linkStrength</i>)
+### <a name="set_link_strength" href="#set_link_strength">#</a> graph.<b>setLinkStrength</b>(<i>linkStrength</i>)
 
 This method sets the strength of the graph links.
 
@@ -298,7 +301,7 @@ This method sets the force strength coefficients for clustering points in the gr
 
 The `render` method renders the graph and, optionally, controls the initial energy of the simulation.
 
-* **`runSimulation`** (number, optional): The higher the value, the more initial energy the simulation will get. Zero value stops the simulation.
+* **`simulationAlpha`** (number, optional): The higher the value, the more initial energy the simulation will get. Zero value stops the simulation.
 
 ### <a name="zoom_to_point_by_index" href="#zoom_to_point_by_index">#</a> graph.<b>zoomToPointByIndex</b>(<i>index</i>, [<i>duration</i>], [<i>scale</i>], [<i>canZoomOut</i>])
 
@@ -508,7 +511,13 @@ Starts the simulation with an optional <i>alpha</i> parameter, which controls th
 
 Pauses the current simulation in the graph.
 
-### <a name="restart" href="#restart">#</a> graph.<b>restart</b>()
+### <a name="unpause" href="#unpause">#</a> graph.<b>unpause</b>()
+
+Unpauses (resumes) the current simulation in the graph.
+
+### <a name="restart" href="#restart">#</a> graph.<b>restart</b>() <b style={{ color: 'orange' }}>[DEPRECATED]</b>
+
+**⚠️ Deprecated:** Use `unpause()` instead. This method will be removed in a future version.
 
 Restarts the current simulation in the graph.
 

package/src/stories/beginners/basic-set-up/index.ts

@@ -23,7 +23,7 @@ export const basicSetUp = (): { graph: Graph; div: HTMLDivElement} => {
     spaceSize: 4096,
     backgroundColor: '#2d313a',
     pointSize: 4,
-    pointColor: '#4B5BBF',
+    pointDefaultColor: '#4B5BBF',
     linkWidth: 0.6,
     scalePointsOnZoom: true,
     linkColor: '#5F74C2',
@@ -38,15 +38,15 @@ export const basicSetUp = (): { graph: Graph; div: HTMLDivElement} => {
     simulationRepulsion: 0.2,
     simulationGravity: 0.1,
     simulationDecay: 100000,
-    onClick: (index: number | undefined): void => {
-      if (index !== undefined) {
-        graph.selectPointByIndex(index)
-        graph.zoomToPointByIndex(index)
-      } else {
-        graph.unselectPoints()
-      }
+    onPointClick: (index: number): void => {
+      graph.selectPointByIndex(index)
+      graph.zoomToPointByIndex(index)
       console.log('Clicked point index: ', index)
     },
+    onBackgroundClick: (): void => {
+      graph.unselectPoints()
+      console.log('Clicked background')
+    },
     attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
   })
 
@@ -71,18 +71,28 @@ export const basicSetUp = (): { graph: Graph; div: HTMLDivElement} => {
     graph.pause()
   }
 
-  function start (): void {
+  function unpause (): void {
     isPaused = false
     pauseButton.textContent = 'Pause'
-    graph.start()
+    // if the graph is at 100% progress, start the graph
+    if (graph.progress === 1) {
+      graph.start()
+    } else {
+      graph.unpause()
+    }
   }
 
   function togglePause (): void {
-    if (isPaused) start()
+    if (isPaused) unpause()
     else pause()
   }
 
   pauseButton.addEventListener('click', togglePause)
+  graph.setConfig({
+    onSimulationEnd: (): void => {
+      pause()
+    },
+  })
 
   // Zoom and Select
   function getRandomPointIndex (): number {