@cosmos.gl/graph 2.5.0 → 2.6.0

package/dist/modules/GraphData/index.d.ts

@@ -24,6 +24,7 @@ export declare class GraphData {
     inputPointClusters: (number | undefined)[] | undefined;
     inputClusterPositions: (number | undefined)[] | undefined;
     inputClusterStrength: Float32Array | undefined;
+    inputPinnedPoints: number[] | undefined;
     pointPositions: Float32Array | undefined;
     pointColors: Float32Array | undefined;
     pointSizes: Float32Array | undefined;

package/dist/modules/Points/index.d.ts

@@ -39,6 +39,8 @@ export declare class Points extends CoreModule {
     private trackedIndices;
     private selectedTexture;
     private greyoutStatusTexture;
+    private pinnedStatusTexture;
+    private pinnedStatusFbo;
     private sizeTexture;
     private trackedIndicesTexture;
     private polygonPathTexture;
@@ -51,6 +53,7 @@ export declare class Points extends CoreModule {
     initPrograms(): void;
     updateColor(): void;
     updateGreyoutStatus(): void;
+    updatePinnedStatus(): void;
     updateSize(): void;
     updateShape(): void;
     updateImageIndices(): void;

package/dist/stories/beginners/pinned-points/data-gen.d.ts

@@ -0,0 +1,5 @@
+export declare function generateData(numNodes?: number): {
+    pointPositions: Float32Array;
+    links: Float32Array;
+    pointColors: Float32Array;
+};

package/dist/stories/beginners/pinned-points/index.d.ts

@@ -0,0 +1,5 @@
+import { Graph } from '../../..';
+export declare const pinnedPoints: () => {
+    graph: Graph;
+    div: HTMLDivElement;
+};

package/dist/stories/beginners.stories.d.ts

@@ -7,4 +7,5 @@ export declare const BasicSetUp: Story;
 export declare const PointLabels: Story;
 export declare const RemovePoints: Story;
 export declare const LinkHovering: Story;
+export declare const PinnedPoints: Story;
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmos.gl/graph",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "GPU-based force graph layout and rendering",
   "jsdelivr": "dist/index.min.js",
   "main": "dist/index.js",

package/src/config.ts

@@ -44,6 +44,9 @@ export interface GraphConfigInterface {
    * in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255.
    * Default value: '#b3b3b3'
    */
+  pointDefaultColor?: string | [number, number, number, number];
+
+  /** @deprecated Use `pointDefaultColor` instead */
   pointColor?: string | [number, number, number, number];
 
   /**
@@ -51,7 +54,7 @@ export interface GraphConfigInterface {
    * 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 `pointColor`,
+   * 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
@@ -615,6 +618,11 @@ export class GraphConfig implements GraphConfigInterface {
   public backgroundColor = defaultBackgroundColor
   public spaceSize = defaultConfigValues.spaceSize
   public pointColor = defaultPointColor
+  // TODO: When pointColor is removed, change this to:
+  // public pointDefaultColor = defaultPointColor
+  // Currently undefined to allow fallback to deprecated pointColor via nullish coalescing
+  // in GraphData.updatePointColor() (see: this._config.pointDefaultColor ?? this._config.pointColor)
+  public pointDefaultColor = undefined
   public pointGreyoutOpacity = defaultGreyoutPointOpacity
   public pointGreyoutColor = defaultGreyoutPointColor
   public pointSize = defaultPointSize

package/src/index.ts

@@ -247,7 +247,8 @@ export class Graph {
     if (this._isDestroyed || !this.reglInstance || !this.points || !this.lines || !this.clusters) return
     const prevConfig = { ...this.config }
     this.config.init(config)
-    if (prevConfig.pointColor !== this.config.pointColor) {
+    if ((prevConfig.pointDefaultColor !== this.config.pointDefaultColor) ||
+      (prevConfig.pointColor !== this.config.pointColor)) {
       this.graph.updatePointColor()
       this.points.updateColor()
     }
@@ -340,6 +341,7 @@ export class Graph {
     this.isPointSizeUpdateNeeded = true
     this.isPointShapeUpdateNeeded = true
     this.isPointImageIndicesUpdateNeeded = true
+    this.isPointImageSizesUpdateNeeded = true
     this.isPointClusterUpdateNeeded = true
     this.isForceManyBodyUpdateNeeded = true
     this.isForceLinkUpdateNeeded = true
@@ -592,6 +594,29 @@ export class Graph {
     this.isPointClusterUpdateNeeded = true
   }
 
+  /**
+   * Sets which points are pinned (fixed) in position.
+   *
+   * Pinned points:
+   * - Do not move due to physics forces (gravity, repulsion, link forces, etc.)
+   * - Still participate in force calculations (other nodes are attracted to/repelled by them)
+   * - Can still be dragged by the user if `enableDrag` is true
+   *
+   * @param {number[] | null} pinnedIndices - Array of point indices to pin. Set to `[]` or `null` to unpin all points.
+   * @example
+   *   // Pin points 0 and 5
+   *   graph.setPinnedPoints([0, 5])
+   *
+   *   // Unpin all points
+   *   graph.setPinnedPoints([])
+   *   graph.setPinnedPoints(null)
+   */
+  public setPinnedPoints (pinnedIndices: number[] | null): void {
+    if (this._isDestroyed || !this.points) return
+    this.graph.inputPinnedPoints = pinnedIndices && pinnedIndices.length > 0 ? pinnedIndices : undefined
+    this.points.updatePinnedStatus()
+  }
+
   /**
    * Renders the graph.
    *
@@ -1361,6 +1386,8 @@ export class Graph {
         // To prevent the dragged point from suddenly jumping, run the drag function twice
         this.points?.drag()
         this.points?.drag()
+        // Update tracked positions after drag, even when simulation is disabled
+        this.points?.trackPoints()
       }
       this.fpsMonitor?.end(now)
 

package/src/modules/GraphData/index.ts

@@ -27,6 +27,7 @@ export class GraphData {
   public inputPointClusters: (number | undefined)[] | undefined
   public inputClusterPositions: (number | undefined)[] | undefined
   public inputClusterStrength: Float32Array | undefined
+  public inputPinnedPoints: number[] | undefined
 
   public pointPositions: Float32Array | undefined
   public pointColors: Float32Array | undefined
@@ -87,7 +88,7 @@ export class GraphData {
     }
 
     // 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)
+    const defaultRgba = getRgbaColor(this._config.pointDefaultColor ?? 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++) {

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/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

package/src/stories/2. configuration.mdx

@@ -9,9 +9,10 @@ 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` |

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',

package/src/stories/beginners/pinned-points/data-gen.ts

@@ -0,0 +1,153 @@
+// Note: This is vibe coding only - quick prototype code for demonstration purposes
+
+function getRandom (min: number, max: number): number {
+  return Math.random() * (max - min) + min
+}
+
+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]
+}
+
+export function generateData (numNodes = 60): { pointPositions: Float32Array; links: Float32Array; pointColors: Float32Array } {
+  const pointPositions = new Float32Array(numNodes * 2)
+  const pointColors = new Float32Array(numNodes * 4)
+  const linksArray: number[] = []
+
+  const centerX = 2048
+  const centerY = 2048
+  const circleRadius = 900
+
+  // First, place 6 nodes in a perfect circle with equal spacing
+  const numCircleNodes = 6
+  for (let i = 0; i < numCircleNodes; i++) {
+    const angle = (i / numCircleNodes) * Math.PI * 2
+    const x = centerX + Math.cos(angle) * circleRadius
+    const y = centerY + Math.sin(angle) * circleRadius
+
+    pointPositions[i * 2] = x
+    pointPositions[i * 2 + 1] = y
+
+    // Color based on position - rainbow gradient
+    const hue = (i / numNodes) * 360
+    const [r, g, b] = hslToRgb(hue, 0.7, 0.6)
+
+    pointColors[i * 4] = r
+    pointColors[i * 4 + 1] = g
+    pointColors[i * 4 + 2] = b
+    pointColors[i * 4 + 3] = 1.0
+  }
+
+  // Create remaining nodes in clusters around the space
+  const numClusters = 4
+  const remainingNodes = numNodes - numCircleNodes
+  const nodesPerCluster = Math.floor(remainingNodes / numClusters)
+
+  for (let cluster = 0; cluster < numClusters; cluster++) {
+    const clusterAngle = (cluster / numClusters) * Math.PI * 2
+    const clusterRadius = 1200
+    const clusterX = centerX + Math.cos(clusterAngle) * clusterRadius
+    const clusterY = centerY + Math.sin(clusterAngle) * clusterRadius
+
+    const startIndex = numCircleNodes + cluster * nodesPerCluster
+    const endIndex = cluster === numClusters - 1 ? numNodes : startIndex + nodesPerCluster
+
+    for (let i = startIndex; i < endIndex; i++) {
+      // Position nodes in a small cluster
+      const angle = (i - startIndex) / (endIndex - startIndex) * Math.PI * 2
+      const radius = 300 + getRandom(-50, 50)
+      const x = clusterX + Math.cos(angle) * radius * getRandom(0.7, 1.3)
+      const y = clusterY + Math.sin(angle) * radius * getRandom(0.7, 1.3)
+
+      pointPositions[i * 2] = x
+      pointPositions[i * 2 + 1] = y
+
+      // Color based on position - rainbow gradient
+      const hue = (i / numNodes) * 360
+      const [r, g, b] = hslToRgb(hue, 0.7, 0.6)
+
+      pointColors[i * 4] = r
+      pointColors[i * 4 + 1] = g
+      pointColors[i * 4 + 2] = b
+      pointColors[i * 4 + 3] = 1.0
+    }
+  }
+
+  // Create links: connect the 6 circle nodes to form a ring
+  for (let i = 0; i < numCircleNodes; i++) {
+    const nextIndex = (i + 1) % numCircleNodes
+    linksArray.push(i)
+    linksArray.push(nextIndex)
+  }
+
+  // Connect circle nodes to nearby cluster nodes - more connections
+  for (let i = 0; i < numCircleNodes; i++) {
+    const circleAngle = (i / numCircleNodes) * Math.PI * 2
+    // Find nearest cluster and connect to many nodes in it
+    const nearestCluster = Math.floor((circleAngle / (Math.PI * 2)) * numClusters) % numClusters
+    const clusterStart = numCircleNodes + nearestCluster * nodesPerCluster
+    const clusterEnd = nearestCluster === numClusters - 1 ? numNodes : clusterStart + nodesPerCluster
+    // Connect to many nodes in the nearest cluster
+    for (let j = clusterStart; j < Math.min(clusterStart + Math.floor(nodesPerCluster * 0.6), clusterEnd); j++) {
+      linksArray.push(i)
+      linksArray.push(j)
+    }
+    // Also connect to some nodes in adjacent clusters
+    const nextCluster = (nearestCluster + 1) % numClusters
+    const nextClusterStart = numCircleNodes + nextCluster * nodesPerCluster
+    const nextClusterEnd = nextCluster === numClusters - 1 ? numNodes : nextClusterStart + nodesPerCluster
+    for (let j = nextClusterStart; j < Math.min(nextClusterStart + Math.floor(nodesPerCluster * 0.3), nextClusterEnd); j++) {
+      linksArray.push(i)
+      linksArray.push(j)
+    }
+  }
+
+  // Connect nodes within clusters and some cross-cluster links
+  for (let i = numCircleNodes; i < numNodes; i++) {
+    const cluster = Math.floor((i - numCircleNodes) / nodesPerCluster)
+    const clusterStart = numCircleNodes + cluster * nodesPerCluster
+    const clusterEnd = cluster === numClusters - 1 ? numNodes : clusterStart + nodesPerCluster
+
+    // Connect to nearby nodes in the same cluster
+    for (let j = clusterStart; j < clusterEnd; j++) {
+      if (i !== j && Math.abs(i - j) <= 3) {
+        linksArray.push(i)
+        linksArray.push(j)
+      }
+    }
+
+    // Connect to nodes in adjacent clusters (sparse connections)
+    if (i % 3 === 0) {
+      const nextCluster = (cluster + 1) % numClusters
+      const nextClusterStart = numCircleNodes + nextCluster * nodesPerCluster
+      const nextClusterEnd = nextCluster === numClusters - 1 ? numNodes : nextClusterStart + nodesPerCluster
+      const targetIndex = nextClusterStart + Math.floor(((i - clusterStart) % nodesPerCluster) * (nextClusterEnd - nextClusterStart) / nodesPerCluster)
+      if (targetIndex < numNodes && targetIndex >= numCircleNodes) {
+        linksArray.push(i)
+        linksArray.push(targetIndex)
+      }
+    }
+  }
+
+  const links = new Float32Array(linksArray)
+
+  return { pointPositions, links, pointColors }
+}

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

@@ -0,0 +1,61 @@
+import { Graph } from '@cosmos.gl/graph'
+import { generateData } from './data-gen'
+
+export const pinnedPoints = (): { graph: Graph; div: HTMLDivElement} => {
+  const div = document.createElement('div')
+  div.style.height = '100vh'
+  div.style.width = '100%'
+  div.style.position = 'relative'
+
+  const infoPanel = document.createElement('div')
+  infoPanel.textContent = 'White points are pinned. Try to move them.'
+  Object.assign(infoPanel.style, {
+    position: 'absolute',
+    top: '20px',
+    left: '20px',
+    color: 'white',
+    fontSize: '14px',
+  })
+  div.appendChild(infoPanel)
+
+  const graph = new Graph(div, {
+    spaceSize: 4096,
+    backgroundColor: '#2d313a',
+    curvedLinks: true,
+    enableDrag: true,
+    simulationLinkSpring: 3.1,
+    simulationRepulsion: 150,
+    simulationGravity: 0.05,
+    simulationDecay: 10000000,
+    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
+  })
+
+  const { pointPositions, links, pointColors } = generateData(100)
+
+  const pinnedIndices = [0, 1, 2, 3, 4, 5]
+  const numPoints = pointPositions.length / 2
+
+  const colors = new Float32Array(pointColors)
+  for (const pinnedIndex of pinnedIndices) {
+    colors[pinnedIndex * 4] = 1.0
+    colors[pinnedIndex * 4 + 1] = 1.0
+    colors[pinnedIndex * 4 + 2] = 1.0
+    colors[pinnedIndex * 4 + 3] = 1.0
+  }
+
+  const pointSizes = new Float32Array(numPoints).fill(12)
+  for (const pinnedIndex of pinnedIndices) {
+    pointSizes[pinnedIndex] = 30
+  }
+
+  graph.setPointPositions(pointPositions)
+  graph.setPointColors(colors)
+  graph.setPointSizes(pointSizes)
+  graph.setLinks(links)
+  graph.setPinnedPoints(pinnedIndices)
+
+  graph.zoom(0.8)
+  graph.render()
+
+  return { div, graph }
+}

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

@@ -8,7 +8,7 @@ export const quickStart = (): { graph: Graph; div: HTMLDivElement} => {
   const config: GraphConfigInterface = {
     spaceSize: 4096,
     backgroundColor: '#2d313a',
-    pointColor: '#F069B4',
+    pointDefaultColor: '#F069B4',
     scalePointsOnZoom: true,
     simulationFriction: 0.1, // keeps the graph inert
     simulationGravity: 0, // disables gravity

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

@@ -4,7 +4,7 @@ export const config: GraphConfigInterface = {
   spaceSize: 4096,
   backgroundColor: '#2d313a',
   pointSize: 4,
-  pointColor: '#4B5BBF',
+  pointDefaultColor: '#4B5BBF',
   scalePointsOnZoom: true,
   pointGreyoutOpacity: 0.1,
   linkWidth: 0.6,

package/src/stories/beginners.stories.ts

@@ -7,6 +7,7 @@ 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 { pinnedPoints } from './beginners/pinned-points'
 
 import quickStartStoryRaw from './beginners/quick-start?raw'
 import basicSetUpStoryRaw from './beginners/basic-set-up/index?raw'
@@ -23,6 +24,8 @@ import removePointsStoryDataGenRaw from './beginners/remove-points/data-gen.ts?r
 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'
+import pinnedPointsStoryRaw from './beginners/pinned-points/index?raw'
+import pinnedPointsStoryDataGenRaw from './beginners/pinned-points/data-gen.ts?raw'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<CosmosStoryProps> = {
@@ -113,5 +116,16 @@ export const LinkHovering: Story = {
   },
 }
 
+export const PinnedPoints: Story = {
+  ...createStory(pinnedPoints),
+  name: 'Pinned Points',
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: pinnedPointsStoryRaw },
+      { name: 'data-gen.ts', code: pinnedPointsStoryDataGenRaw },
+    ],
+  },
+}
+
 // eslint-disable-next-line import/no-default-export
 export default meta

package/src/stories/create-cosmos.ts

@@ -23,7 +23,7 @@ export const createCosmos = (props: CosmosStoryProps): { div: HTMLDivElement; gr
   const config: GraphConfigInterface = {
     backgroundColor: '#2d313a',
     pointSize: 3,
-    pointColor: '#4B5BBF',
+    pointDefaultColor: '#4B5BBF',
     pointGreyoutOpacity: 0.1,
     scalePointsOnZoom: true,
     linkWidth: 0.8,

package/src/stories/geospatial/moscow-metro-stations/index.ts

@@ -31,7 +31,7 @@ export const moscowMetroStations = (): {graph: Graph; div: HTMLDivElement} => {
     backgroundColor: '#2d313a',
     scalePointsOnZoom: false,
     rescalePositions,
-    pointColor: '#FEE08B',
+    pointDefaultColor: '#FEE08B',
     enableSimulation: false,
     enableDrag: false,
     fitViewOnInit: true,