@cosmos.gl/graph 2.4.0 → 2.6.0

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/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
@@ -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/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/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,8 @@ 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 { pinnedPoints } from './beginners/pinned-points'
 
 import quickStartStoryRaw from './beginners/quick-start?raw'
 import basicSetUpStoryRaw from './beginners/basic-set-up/index?raw'
@@ -19,6 +21,11 @@ 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'
+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> = {
@@ -96,5 +103,29 @@ 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 },
+    ],
+  },
+}
+
+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