@cosmos.gl/graph 2.3.1 → 2.5.0

package/src/stories/1. welcome.mdx

@@ -35,7 +35,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

@@ -16,6 +16,7 @@ import { Meta } from "@storybook/blocks";
 | 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 +27,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 +89,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
@@ -91,8 +94,11 @@ This method sets the shapes for the graph points.
 | 5 | Hexagon |
 | 6 | Star |
 | 7 | Cross |
+| 8 | None |
 
-Each shape value in the array specifies the shape of a point using the same order as the points in the graph data. Invalid shape values (outside the range 0-7) will default to Circle (0).
+Each shape value in the array specifies the shape of a point using the same order as the points in the graph data. Invalid shape values (outside the range 0-8) will default to Circle (0).
+
+Images are rendered above shapes.
 
 **Example:**
 ```javascript
@@ -108,6 +114,50 @@ graph.setPointShapes(new Float32Array([
 graph.render();
 ```
 
+### <a name="set_image_data" href="#set_image_data">#</a> graph.<b>setImageData</b>(<i>imageDataArray</i>)
+
+This method sets the images for the graph points using [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) objects. Images are rendered above shapes. To use images, provide image indices via `setPointImageIndices()`.
+
+Images are rendered above shapes.
+
+* **`imageDataArray`** (ImageData[]): Array of ImageData objects to use as point images.
+
+**Example:**
+```javascript
+// Create ImageData objects from canvas or other sources
+const imageData1 = canvas1.getContext('2d').getImageData(0, 0, 32, 32);
+const imageData2 = canvas2.getContext('2d').getImageData(0, 0, 32, 32);
+
+// Set the images for the graph
+graph.setImageData([imageData1, imageData2]);
+
+// Set which image each point should use (0 = imageData1, 1 = imageData2)
+graph.setPointImageIndices(new Float32Array([0, 1, 0, 1]));
+
+// To show shapes with images
+graph.setPointShapes(new Float32Array([0, 1, 2, 3])); // Circle, Square, Triangle, Diamond
+
+graph.render();
+```
+
+This example sets up two images and assigns them to four points: the first and third points use imageData1, while the second and fourth points use imageData2. The shapes are also set to show both shapes and images together.
+
+### <a name="set_point_image_indices" href="#set_point_image_indices">#</a> graph.<b>setPointImageIndices</b>(<i>imageIndices</i>)
+
+This method sets which image each point should use from the images array provided to `setImageData()`. Images are rendered above shapes.
+
+* **`imageIndices`** (Float32Array): A Float32Array representing which image each point uses in the format `[index1, index2, ..., indexN]`, where each value is an index into the images array provided to `setImageData()`.
+* **Valid indices**: Use 0 for the first image, 1 for the second image, etc. Invalid or negative indices will default to -1 (no image).
+* **Default behavior**: When no image indices are provided, all points default to -1 (no image).
+
+### <a name="set_point_image_sizes" href="#set_point_image_sizes">#</a> graph.<b>setPointImageSizes</b>(<i>imageSizes</i>)
+
+This method sets the sizes for the point images in the graph.
+
+* **`imageSizes`** (Float32Array): A Float32Array representing the sizes of point images in the format `[size1, size2, ..., sizeN]`, where each `size` value corresponds to the size of the image for the point at the same index in the graph's data.
+
+Each size value in the array specifies the size of a point image using the same order as the points in the graph data. The sizes are applied to images that have been set using `setImageData()` and referenced via `setPointImageIndices()`.
+
 ### <a name="set_links" href="#set_links">#</a> graph.<b>setLinks</b>(<i>links</i>)
 
 This method sets the links (connections) between points in a cosmos.gl graph.
@@ -199,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.
 
@@ -251,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>])
 
@@ -461,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

@@ -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 {

package/src/stories/beginners/link-hovering/data-generator.ts

@@ -0,0 +1,198 @@
+interface Point {
+  id: number;
+}
+
+interface Link {
+  source: number;
+  target: number;
+}
+
+interface NetworkData {
+  pointPositions: Float32Array;
+  pointColors: Float32Array;
+  pointSizes: Float32Array;
+  links: Float32Array;
+  linkColors: Float32Array;
+  linkWidths: Float32Array;
+  points: Point[];
+  connections: Link[];
+}
+
+function hslToRgb (hue: number, saturation: number, lightness: number): [number, number, number] {
+  const c = (1 - Math.abs(2 * lightness - 1)) * saturation
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1))
+  const m = lightness - c / 2
+
+  let r, g, b
+  if (hue >= 0 && hue < 60) {
+    r = c; g = x; b = 0
+  } else if (hue >= 60 && hue < 120) {
+    r = x; g = c; b = 0
+  } else if (hue >= 120 && hue < 180) {
+    r = 0; g = c; b = x
+  } else if (hue >= 180 && hue < 240) {
+    r = 0; g = x; b = c
+  } else if (hue >= 240 && hue < 300) {
+    r = x; g = 0; b = c
+  } else {
+    r = c; g = 0; b = x
+  }
+
+  return [r + m, g + m, b + m]
+}
+
+function generatePoints (count: number): Point[] {
+  const points: Point[] = []
+  for (let i = 0; i < count; i++) {
+    points.push({ id: i })
+  }
+  return points
+}
+
+function generateConnections (points: Point[]): Link[] {
+  const connections: Link[] = []
+  const pointCount = points.length
+
+  // Sequential connections
+  for (let i = 0; i < pointCount; i++) {
+    const nextId1 = (i + 1) % pointCount
+    const nextId2 = (i + 2) % pointCount
+    connections.push({ source: i, target: nextId1 })
+    if (i % 2 === 0) {
+      connections.push({ source: i, target: nextId2 })
+    }
+  }
+
+  // Hub connections
+  const hubPoints = [0, 10, 20, 30, 40, 50, 60, 70]
+  hubPoints.forEach(hub => {
+    for (let i = 1; i <= 5; i++) {
+      const targetId = (hub + i * 3) % pointCount
+      if (targetId !== hub) {
+        connections.push({ source: hub, target: targetId })
+      }
+    }
+  })
+
+  // Cross connections
+  for (let i = 0; i < pointCount / 2; i++) {
+    const oppositeId = i + Math.floor(pointCount / 2)
+    if (i % 3 === 0) {
+      connections.push({ source: i, target: oppositeId })
+    }
+  }
+
+  // Random connections
+  for (let i = 0; i < 30; i++) {
+    const source = Math.floor(Math.random() * pointCount)
+    const target = Math.floor(Math.random() * pointCount)
+    if (source !== target) {
+      const exists = connections.some(conn =>
+        (conn.source === source && conn.target === target) ||
+        (conn.source === target && conn.target === source)
+      )
+      if (!exists) {
+        connections.push({ source, target })
+      }
+    }
+  }
+
+  return connections
+}
+
+function generatePointPositions (points: Point[]): Float32Array {
+  const radius = 100
+  const positions = new Float32Array(points.length * 2)
+
+  points.forEach((point, i) => {
+    const angle = (i / points.length) * Math.PI * 2
+    const pointRadius = radius + (Math.random() - 0.5) * 20
+
+    positions[i * 2] = Math.cos(angle) * pointRadius
+    positions[i * 2 + 1] = Math.sin(angle) * pointRadius
+  })
+
+  return positions
+}
+
+function generatePointColors (points: Point[]): Float32Array {
+  const colors = new Float32Array(points.length * 4)
+
+  points.forEach((point, i) => {
+    const hue = (point.id / points.length) * 360
+    const [r, g, b] = hslToRgb(hue, 0.8, 0.6)
+
+    colors[i * 4] = r
+    colors[i * 4 + 1] = g
+    colors[i * 4 + 2] = b
+    colors[i * 4 + 3] = 1.0
+  })
+
+  return colors
+}
+
+function generatePointSizes (points: Point[]): Float32Array {
+  const sizes = new Float32Array(points.length)
+  sizes.fill(10)
+  return sizes
+}
+
+function generateLinkData (connections: Link[], points: Point[]): {
+  links: Float32Array;
+  linkColors: Float32Array;
+  linkWidths: Float32Array;
+} {
+  const links = new Float32Array(connections.length * 2)
+  const linkColors = new Float32Array(connections.length * 4)
+  const linkWidths = new Float32Array(connections.length)
+
+  connections.forEach((connection, i) => {
+    links[i * 2] = connection.source
+    links[i * 2 + 1] = connection.target
+
+    // Color links based on average hue of connected points
+    const sourceHue = (connection.source / points.length) * 360
+    const targetHue = (connection.target / points.length) * 360
+
+    let avgHue
+    const hueDiff = Math.abs(targetHue - sourceHue)
+    if (hueDiff > 180) {
+      avgHue = ((sourceHue + targetHue + 360) / 2) % 360
+    } else {
+      avgHue = (sourceHue + targetHue) / 2
+    }
+
+    const [r, g, b] = hslToRgb(avgHue, 0.7, 0.5)
+
+    linkColors[i * 4] = r
+    linkColors[i * 4 + 1] = g
+    linkColors[i * 4 + 2] = b
+    linkColors[i * 4 + 3] = 0.9
+
+    linkWidths[i] = 2
+  })
+
+  return { links, linkColors, linkWidths }
+}
+
+export function generateData (pointCount: number = 500): NetworkData {
+  const points = generatePoints(pointCount)
+  const connections = generateConnections(points)
+
+  const pointPositions = generatePointPositions(points)
+  const pointColors = generatePointColors(points)
+  const pointSizes = generatePointSizes(points)
+
+  const { links, linkColors, linkWidths } = generateLinkData(connections, points)
+
+  return {
+    pointPositions,
+    pointColors,
+    pointSizes,
+    links,
+    linkColors,
+    linkWidths,
+    points,
+    connections,
+  }
+}

package/src/stories/beginners/link-hovering/index.ts

@@ -0,0 +1,61 @@
+import { Graph, GraphConfigInterface } from '@cosmos.gl/graph'
+import { generateData } from './data-generator'
+import './style.css'
+
+export const linkHovering = (): { div: HTMLDivElement; graph: Graph } => {
+  const data = generateData()
+  const infoPanel = document.createElement('div')
+
+  // Create div container
+  const div = document.createElement('div')
+  div.style.height = '100vh'
+  div.style.width = '100%'
+  div.style.position = 'relative'
+
+  // Configure graph
+  const config: GraphConfigInterface = {
+    backgroundColor: '#2d313a',
+    scalePointsOnZoom: true,
+    linkArrows: false,
+    curvedLinks: true,
+    enableSimulation: false,
+    hoveredLinkWidthIncrease: 4,
+    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
+
+    onLinkMouseOver: (linkIndex: number) => {
+      infoPanel.style.display = 'block'
+      infoPanel.textContent = `Link ${linkIndex}`
+    },
+
+    onLinkMouseOut: () => {
+      infoPanel.style.display = 'none'
+    },
+  }
+
+  // Create graph instance
+  const graph = new Graph(div, config)
+
+  // Set data
+  graph.setPointPositions(data.pointPositions)
+  graph.setPointColors(data.pointColors)
+  graph.setPointSizes(data.pointSizes)
+  graph.setLinks(data.links)
+  graph.setLinkColors(data.linkColors)
+  graph.setLinkWidths(data.linkWidths)
+
+  // Render graph
+  graph.zoom(0.9)
+  graph.render()
+
+  infoPanel.style.cssText = `
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    color: white;
+    font-size: 14px;
+    display: none;
+  `
+  div.appendChild(infoPanel)
+
+  return { div, graph }
+}

package/src/stories/beginners/link-hovering/style.css

@@ -0,0 +1,73 @@
+/* Enhanced styling for the link hovering demo */
+
+.company-network {
+  background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0a0a0a 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.info-panel {
+  backdrop-filter: blur(12px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.info-panel:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.relationship-type-indicator {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.relationship-type-indicator.management {
+  background: linear-gradient(45deg, #FFAD6B, #FF8A65);
+  box-shadow: 0 2px 8px rgba(255, 173, 107, 0.4);
+}
+
+.relationship-type-indicator.collaboration {
+  background: linear-gradient(45deg, #59C0FF, #42A5F5);
+  box-shadow: 0 2px 8px rgba(89, 192, 255, 0.4);
+}
+
+.relationship-type-indicator.mentorship {
+  background: linear-gradient(45deg, #6BD17B, #66BB6A);
+  box-shadow: 0 2px 8px rgba(107, 209, 123, 0.4);
+}
+
+.relationship-type-indicator.friendship {
+  background: linear-gradient(45deg, #FF61AD, #EC407A);
+  box-shadow: 0 2px 8px rgba(255, 97, 173, 0.4);
+}
+
+.person-card {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  padding: 12px;
+  margin: 6px 0;
+  border-left: 3px solid transparent;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  transition: all 0.2s ease;
+}
+
+.person-card.highlighted {
+  border-left-color: #59C0FF;
+  background: rgba(89, 192, 255, 0.08);
+  box-shadow: 0 4px 16px rgba(89, 192, 255, 0.15);
+}
+
+/* Modern color scheme variables */
+:root {
+  --cosmos-orange: #FFAD6B;
+  --cosmos-blue: #59C0FF;
+  --cosmos-green: #6BD17B;
+  --cosmos-pink: #FF61AD;
+  --cosmos-gray: #C7CDD1;
+  --cosmos-dark-bg: rgba(16, 20, 40, 0.95);
+  --cosmos-card-bg: rgba(255, 255, 255, 0.03);
+  --cosmos-border: rgba(255, 255, 255, 0.08);
+}

package/src/stories/beginners/quick-start.ts

@@ -18,7 +18,8 @@ export const quickStart = (): { graph: Graph; div: HTMLDivElement} => {
     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') },
     attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
   /* ... */
   }

package/src/stories/beginners/remove-points/index.ts

@@ -22,40 +22,38 @@ export const removePoints = (): { graph: Graph; div: HTMLDivElement} => {
 
   const graph = new Graph(graphDiv, {
     ...config,
-    onClick: (i): void => {
-      if (i !== undefined) {
-        // Filter out the clicked point from positions array
-        const currentPositions = graph.getPointPositions()
-        const newPointPositions = currentPositions
-          .filter((pos, posIndex) => {
-            return (
-              (posIndex % 2 === 0 && posIndex !== i * 2) ||
+    onPointClick: (i): void => {
+      // Filter out the clicked point from positions array
+      const currentPositions = graph.getPointPositions()
+      const newPointPositions = currentPositions
+        .filter((pos, posIndex) => {
+          return (
+            (posIndex % 2 === 0 && posIndex !== i * 2) ||
             (posIndex % 2 === 1 && posIndex !== i * 2 + 1)
-            )
-          })
-
-        // Convert links array to source-target pairs for easier filtering
-        const pairedNumbers = []
-        for (let j = 0; j < graphLinks.length; j += 2) {
-          const pair = [graphLinks[j], graphLinks[j + 1]]
-          pairedNumbers.push(pair)
-        }
-
-        // Remove links connected to deleted point and adjust indices of remaining links
-        graphLinks = (pairedNumbers
-          .filter(
-            ([sourceIndex, targetIndex]) => sourceIndex !== i && targetIndex !== i
           )
-          .flat() as number[])
-          .map((p) => {
-            if (p > i) return p - 1
-            else return p
-          })
+        })
 
-        graph.setPointPositions(new Float32Array(newPointPositions))
-        graph.setLinks(new Float32Array(graphLinks))
-        graph.render(isPaused ? 0 : undefined)
+      // Convert links array to source-target pairs for easier filtering
+      const pairedNumbers = []
+      for (let j = 0; j < graphLinks.length; j += 2) {
+        const pair = [graphLinks[j], graphLinks[j + 1]]
+        pairedNumbers.push(pair)
       }
+
+      // Remove links connected to deleted point and adjust indices of remaining links
+      graphLinks = (pairedNumbers
+        .filter(
+          ([sourceIndex, targetIndex]) => sourceIndex !== i && targetIndex !== i
+        )
+        .flat() as number[])
+        .map((p) => {
+          if (p > i) return p - 1
+          else return p
+        })
+
+      graph.setPointPositions(new Float32Array(newPointPositions))
+      graph.setLinks(new Float32Array(graphLinks))
+      graph.render(isPaused ? 0 : undefined)
       console.log('Clicked node: ', i)
     },
   })

package/src/stories/beginners.stories.ts

@@ -6,6 +6,7 @@ import { quickStart } from './beginners/quick-start'
 import { basicSetUp } from './beginners/basic-set-up'
 import { pointLabels } from './beginners/point-labels'
 import { removePoints } from './beginners/remove-points'
+import { linkHovering } from './beginners/link-hovering'
 
 import quickStartStoryRaw from './beginners/quick-start?raw'
 import basicSetUpStoryRaw from './beginners/basic-set-up/index?raw'
@@ -19,6 +20,9 @@ import removePointsStoryRaw from './beginners/remove-points/index?raw'
 import removePointsStoryCssRaw from './beginners/remove-points/style.css?raw'
 import removePointsStoryConfigRaw from './beginners/remove-points/config.ts?raw'
 import removePointsStoryDataGenRaw from './beginners/remove-points/data-gen.ts?raw'
+import linkHoveringStoryRaw from './beginners/link-hovering/index?raw'
+import linkHoveringStoryDataGenRaw from './beginners/link-hovering/data-generator.ts?raw'
+import linkHoveringStoryCssRaw from './beginners/link-hovering/style.css?raw'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<CosmosStoryProps> = {
@@ -96,5 +100,18 @@ export const RemovePoints: Story = {
     ],
   },
 }
+
+export const LinkHovering: Story = {
+  ...createStory(linkHovering),
+  name: 'Link Hovering',
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: linkHoveringStoryRaw },
+      { name: 'data-generator.ts', code: linkHoveringStoryDataGenRaw },
+      { name: 'style.css', code: linkHoveringStoryCssRaw },
+    ],
+  },
+}
+
 // eslint-disable-next-line import/no-default-export
 export default meta

package/src/stories/clusters/polygon-selection/index.ts

@@ -17,10 +17,8 @@ export const polygonSelection = (): {div: HTMLDivElement; graph: Graph; destroy:
     pointSize: 8,
     backgroundColor: '#1a1a2e',
     pointGreyoutOpacity: 0.2,
-    onClick: (index: number | undefined): void => {
-      if (index === undefined) {
-        graph.unselectPoints()
-      }
+    onBackgroundClick: (): void => {
+      graph.unselectPoints()
     },
   })