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

package/src/stories/geospatial/moscow-metro-stations/point-colors.ts

@@ -0,0 +1,46 @@
+import { scaleSequential } from 'd3-scale'
+import { interpolateWarm } from 'd3-scale-chromatic'
+import { getRgbaColor } from '@cosmos.gl/graph'
+
+export const getPointColors = (pointPositions: number[]): Float32Array => {
+  const pointColorScale = scaleSequential(interpolateWarm)
+  const numPoints = pointPositions.length / 2
+
+  // Calculate center coordinates
+  let centerX = 0
+  let centerY = 0
+  for (let i = 0, idx = 0; i < numPoints; i++, idx += 2) {
+    centerX += pointPositions[idx] as number
+    centerY += pointPositions[idx + 1] as number
+  }
+  centerX /= numPoints
+  centerY /= numPoints
+
+  // Find maximum distance from center (using squared distance for optimization)
+  let maxDistanceSquared = 0
+  for (let i = 0, idx = 0; i < numPoints; i++, idx += 2) {
+    const dx = (pointPositions[idx] as number) - centerX
+    const dy = (pointPositions[idx + 1] as number) - centerY
+    const distanceSquared = dx * dx + dy * dy
+    if (distanceSquared > maxDistanceSquared) maxDistanceSquared = distanceSquared
+  }
+
+  pointColorScale.domain([0, Math.sqrt(maxDistanceSquared)])
+
+  // Calculate colors
+  const pointColors = new Float32Array(numPoints * 4)
+  for (let i = 0, posIdx = 0, colorIdx = 0; i < numPoints; i++, posIdx += 2, colorIdx += 4) {
+    const dx = (pointPositions[posIdx] as number) - centerX
+    const dy = (pointPositions[posIdx + 1] as number) - centerY
+    const distance = Math.sqrt(dx * dx + dy * dy)
+    const pointColor = pointColorScale(distance)
+    const rgba = getRgbaColor(pointColor)
+
+    pointColors[colorIdx] = rgba[0]
+    pointColors[colorIdx + 1] = rgba[1]
+    pointColors[colorIdx + 2] = rgba[2]
+    pointColors[colorIdx + 3] = rgba[3]
+  }
+
+  return pointColors
+}

package/src/stories/geospatial/moscow-metro-stations/style.css

@@ -0,0 +1,30 @@
+body {
+  font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0px;
+}
+
+.app {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.graph {
+  width: 100%;
+  height: 100vh;
+}
+
+.actions {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: #ccc;
+}
+
+.action {
+  margin-left: 2px;
+  font-size: 10pt;
+  text-decoration: underline;
+  cursor: pointer;
+  user-select: none;
+}

package/src/stories/geospatial.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta } from '@storybook/html'
+
+import { createStory, Story } from '@/graph/stories/create-story'
+import { CosmosStoryProps } from './create-cosmos'
+import { moscowMetroStations } from './geospatial/moscow-metro-stations'
+
+import moscowMetroStationsStoryRaw from './geospatial/moscow-metro-stations/index?raw'
+import dataRaw from './geospatial/moscow-metro-stations/moscow-metro-coords?raw'
+import pointColorsRaw from './geospatial/moscow-metro-stations/point-colors?raw'
+import styleRaw from './geospatial/moscow-metro-stations/style.css?raw'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<CosmosStoryProps> = {
+  title: 'Examples/Geospatial',
+}
+
+export const MoscowMetroStations: Story = {
+  ...createStory(moscowMetroStations),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: moscowMetroStationsStoryRaw },
+      { name: 'moscow-metro-coords', code: dataRaw },
+      { name: 'point-colors', code: pointColorsRaw },
+      { name: 'style.css', code: styleRaw },
+    ],
+  },
+}
+
+// eslint-disable-next-line import/no-default-export
+export default meta

package/src/stories/shapes/all-shapes/index.ts

@@ -0,0 +1,73 @@
+import { Graph, PointShape } from '@cosmos.gl/graph'
+
+export const allShapes = (): {div: HTMLDivElement; graph: Graph; destroy?: () => void } => {
+  // Create container div
+  const div = document.createElement('div')
+  div.style.height = '100vh'
+  div.style.width = '100%'
+
+  // Create 8 points, one for each shape
+  const spaceSize = 4096
+  const pointCount = 8
+  const spacing = spaceSize / pointCount
+
+  const pointPositions = new Float32Array(pointCount * 2)
+  const pointColors = new Float32Array(pointCount * 4)
+  const pointShapes = new Float32Array(pointCount)
+
+  // Define distinct colors for each shape
+  const shapeColors: [number, number, number][] = [
+    [1.0, 0.42, 0.38], // Coral for Circle
+    [0.13, 0.55, 0.45], // Forest Green for Square
+    [0.25, 0.32, 0.71], // Royal Blue for Triangle
+    [0.96, 0.76, 0.19], // Amber Gold for Diamond
+    [0.74, 0.24, 0.45], // Deep Rose for Pentagon
+    [0.18, 0.55, 0.56], // Teal for Hexagon
+    [0.85, 0.45, 0.28], // Terracotta for Star
+    [0.58, 0.44, 0.86], // Periwinkle for Cross
+  ]
+
+  // Position points in a horizontal line
+  const startX = spacing / 2
+  const centerY = spaceSize / 2
+  for (let i = 0; i < pointCount; i++) {
+    // Position: horizontal line, centered
+    pointPositions[i * 2] = startX + i * spacing
+    pointPositions[i * 2 + 1] = centerY
+
+    // Color: distinct color for each shape
+    const color = shapeColors[i] || [1.0, 1.0, 1.0] // fallback to white if undefined
+    pointColors[i * 4] = color[0] // R
+    pointColors[i * 4 + 1] = color[1] // G
+    pointColors[i * 4 + 2] = color[2] // B
+    pointColors[i * 4 + 3] = 1.0 // A
+
+    // Shape: cycle through all available shapes
+    pointShapes[i] = i as PointShape
+  }
+
+  // Create graph with minimal configuration
+  const graph = new Graph(div, {
+    spaceSize,
+    pointSize: spacing / 2,
+    enableSimulation: false,
+    scalePointsOnZoom: true,
+    renderHoveredPointRing: true,
+    hoveredPointRingColor: '#ffffff',
+    rescalePositions: false,
+    enableDrag: true,
+  })
+
+  // Set data
+  graph.setPointPositions(pointPositions)
+  graph.setPointColors(pointColors)
+  graph.setPointShapes(pointShapes)
+
+  graph.render()
+
+  const destroy = (): void => {
+    graph.destroy()
+  }
+
+  return { div, graph, destroy }
+}

package/src/stories/shapes/image-example/index.ts

@@ -0,0 +1,246 @@
+import { Graph, PointShape } from '@cosmos.gl/graph'
+
+// Import all PNG icons
+import boxUrl from './icons/box.png'
+import toolboxUrl from './icons/toolbox.png'
+import swiftUrl from './icons/swift.png'
+import legoUrl from './icons/lego.png'
+import sUrl from './icons/s.png'
+
+// Helper function to convert PNG URL to ImageData
+const pngUrlToImageData = (pngUrl: string): Promise<ImageData> => {
+  return new Promise<ImageData>((resolve, reject) => {
+    const img = new Image()
+
+    img.onload = (): void => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        reject(new Error('Could not get 2D context'))
+        return
+      }
+
+      canvas.width = img.width
+      canvas.height = img.height
+      ctx.drawImage(img, 0, 0)
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      resolve(imageData)
+    }
+    img.onerror = (): void => reject(new Error(`Failed to load image: ${pngUrl}`))
+    img.src = pngUrl
+  })
+}
+
+const loadPngImages = (pngUrls: string[]): Promise<ImageData[]> => {
+  return Promise.all(pngUrls.map(pngUrlToImageData))
+}
+
+// Define node types for Xcode dependency graph
+enum NodeType {
+  App = 0, // Main app target (swift icon)
+  Framework = 1, // Framework (box icon)
+  Library = 2, // Static library (toolbox icon)
+  Bundle = 3, // Bundle (lego icon)
+  Target = 4 // Build target (s icon)
+}
+
+interface DependencyNode {
+  id: number;
+  name: string;
+  type: NodeType;
+  x: number;
+  y: number;
+  dependencies: number[];
+  size: number;
+  color: [number, number, number, number];
+}
+
+export const imageExample = (): {div: HTMLDivElement; graph: Graph; destroy?: () => void } => {
+  // Create container div
+  const div = document.createElement('div')
+  div.style.height = '100vh'
+  div.style.width = '100%'
+  div.style.display = 'flex'
+  div.style.flexDirection = 'column'
+
+  // Create main graph container
+  const graphContainer = document.createElement('div')
+  graphContainer.style.height = '100vh'
+  graphContainer.style.width = '100%'
+  graphContainer.style.position = 'absolute'
+  graphContainer.style.overflow = 'hidden'
+  div.appendChild(graphContainer)
+
+  try {
+    const spaceSize = 4096
+
+    const nodes: DependencyNode[] = [
+      // Main app target (center)
+      { id: 0, name: 'MyApp', type: NodeType.App, x: 2048, y: 2048, dependencies: [1, 2, 3, 14], size: 60, color: [0.2, 0.6, 1.0, 1.0] },
+
+      // Frameworks (first ring around center)
+      { id: 1, name: 'CoreData', type: NodeType.Framework, x: 1024, y: 2048, dependencies: [4, 5], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+      { id: 2, name: 'UIKit', type: NodeType.Framework, x: 2048, y: 1024, dependencies: [6, 15], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+      { id: 3, name: 'Network', type: NodeType.Framework, x: 3072, y: 2048, dependencies: [7, 8], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+
+      // Libraries (second ring)
+      { id: 4, name: 'SQLite', type: NodeType.Library, x: 512, y: 2048, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 5, name: 'Foundation', type: NodeType.Library, x: 1024, y: 1024, dependencies: [16], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 6, name: 'CoreGraphics', type: NodeType.Library, x: 2048, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 7, name: 'Security', type: NodeType.Library, x: 3072, y: 1024, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 8, name: 'CFNetwork', type: NodeType.Library, x: 3584, y: 2048, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+
+      // Additional frameworks (first ring)
+      { id: 9, name: 'Analytics', type: NodeType.Framework, x: 2048, y: 3072, dependencies: [10, 17], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+      { id: 10, name: 'Firebase', type: NodeType.Library, x: 2048, y: 3840, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+
+      // Test targets (outer ring)
+      { id: 11, name: 'Tests', type: NodeType.Target, x: 512, y: 1024, dependencies: [0], size: 50, color: [0.4, 0.6, 1.0, 1.0] },
+      { id: 12, name: 'UITests', type: NodeType.Target, x: 3584, y: 1024, dependencies: [0, 2], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
+      { id: 13, name: 'Widget', type: NodeType.Target, x: 3584, y: 3072, dependencies: [1, 2], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
+
+      // Additional components
+      { id: 14, name: 'Localization', type: NodeType.Framework, x: 1536, y: 3072, dependencies: [18], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+      { id: 15, name: 'CoreAnimation', type: NodeType.Library, x: 2560, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 16, name: 'CoreFoundation', type: NodeType.Library, x: 1024, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 17, name: 'Crashlytics', type: NodeType.Library, x: 1536, y: 3584, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 18, name: 'LocalizationBundle', type: NodeType.Bundle, x: 1792, y: 3584, dependencies: [], size: 45, color: [1.0, 0.4, 1.0, 1.0] },
+
+      // More test targets
+      { id: 19, name: 'UnitTests', type: NodeType.Target, x: 512, y: 3072, dependencies: [0, 1], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
+      { id: 20, name: 'IntegrationTests', type: NodeType.Target, x: 512, y: 3584, dependencies: [0, 3], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
+
+      // Bundle resources
+      { id: 21, name: 'Resources', type: NodeType.Bundle, x: 2304, y: 3072, dependencies: [0], size: 50, color: [1.0, 0.4, 1.0, 1.0] },
+      { id: 22, name: 'Assets', type: NodeType.Bundle, x: 2560, y: 3584, dependencies: [0, 21], size: 50, color: [1.0, 0.4, 1.0, 1.0] },
+    ]
+
+    const pointCount = nodes.length
+    const pointPositions = new Float32Array(pointCount * 2)
+    const pointColors = new Float32Array(pointCount * 4)
+    const pointShapes = new Float32Array(pointCount)
+    const pointSizes = new Float32Array(pointCount)
+    const imageIndices = new Float32Array(pointCount)
+
+    // Create links array for dependencies
+    const links: number[] = []
+    const linkArrows: boolean[] = []
+    const linkColors: number[] = []
+
+    // Set up nodes based on the dependency structure
+    for (const node of nodes) {
+      const i = node.id
+
+      // Set positions
+      pointPositions[i * 2] = node.x
+      pointPositions[i * 2 + 1] = node.y
+
+      // Set node properties - use None shape for all images except targets (s icon)
+      pointShapes[i] = node.type === NodeType.Target ? PointShape.Hexagon : PointShape.None
+      pointSizes[i] = node.size
+      imageIndices[i] = node.type
+
+      // Set colors
+      pointColors[i * 4] = node.color[0]
+      pointColors[i * 4 + 1] = node.color[1]
+      pointColors[i * 4 + 2] = node.color[2]
+      pointColors[i * 4 + 3] = node.color[3]
+
+      // Add dependency links
+      for (const depId of node.dependencies) {
+        links.push(i, depId)
+        linkArrows.push(true)
+
+        // Add colorful link colors based on source node type
+        const sourceType = node.type
+        let linkColor: [number, number, number, number]
+
+        switch (sourceType) {
+        case NodeType.App:
+          linkColor = [0.2, 0.8, 1.0, 0.8] // Bright blue
+          break
+        case NodeType.Framework:
+          linkColor = [1.0, 0.6, 0.2, 0.8] // Orange
+          break
+        case NodeType.Library:
+          linkColor = [0.4, 1.0, 0.4, 0.8] // Green
+          break
+        case NodeType.Bundle:
+          linkColor = [1.0, 0.4, 1.0, 0.8] // Magenta
+          break
+        case NodeType.Target:
+          linkColor = [0.8, 0.4, 1.0, 0.8] // Purple
+          break
+        default:
+          linkColor = [0.7, 0.7, 0.7, 0.8] // Gray
+        }
+
+        // Add RGBA values for this link
+        linkColors.push(linkColor[0], linkColor[1], linkColor[2], linkColor[3])
+      }
+    }
+
+    // Create graph with static positioning
+    const graph = new Graph(graphContainer, {
+      spaceSize,
+      enableSimulation: false,
+      enableDrag: false,
+      linkArrows: true,
+      curvedLinks: true,
+      pointSize: 50,
+      linkWidth: 3,
+      hoveredPointRingColor: 'white',
+      renderHoveredPointRing: true,
+
+      // Add click handler for point and background selection
+      onPointClick: (pointIndex: number): void => {
+        // Use built-in functionality to select the clicked point and its neighbors
+        graph.selectPointByIndex(pointIndex, true)
+      },
+      onBackgroundClick: (): void => {
+        // Clear selection when clicking on background
+        graph.unselectPoints()
+      },
+    })
+
+    // Load images asynchronously and set them when ready
+    loadPngImages([swiftUrl, boxUrl, toolboxUrl, legoUrl, sUrl]).then((imageDataArray) => {
+      // Set images and their indices
+      graph.setImageData(imageDataArray)
+      graph.setPointImageIndices(imageIndices)
+      graph.render()
+    }).catch((error) => {
+      console.error('Error loading images:', error)
+    })
+
+    // Set all data
+    graph.setPointPositions(pointPositions)
+    graph.setPointColors(pointColors)
+    graph.setPointShapes(pointShapes)
+    graph.setPointSizes(pointSizes)
+
+    // Set links if we have any dependencies
+    if (links.length > 0) {
+      graph.setLinks(new Float32Array(links))
+      graph.setLinkArrows(linkArrows)
+      graph.setLinkColors(new Float32Array(linkColors))
+    }
+
+    graph.render()
+
+    const destroy = (): void => {
+      graph.destroy()
+    }
+
+    return { div, graph, destroy }
+  } catch (error) {
+    console.error('Error creating Xcode dependency graph:', error)
+    div.innerHTML = `
+      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #ff0000; font-size: 18px;">
+        Error loading Xcode dependency graph: ${error instanceof Error ? error.message : 'Unknown error'}
+      </div>
+    `
+    throw error
+  }
+}

package/src/stories/shapes.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html'
+
+import { createStory, Story } from '@/graph/stories/create-story'
+import { CosmosStoryProps } from './create-cosmos'
+import { allShapes } from './shapes/all-shapes'
+import { imageExample } from './shapes/image-example'
+
+import allShapesStoryRaw from './shapes/all-shapes/index?raw'
+import imageExampleStoryRaw from './shapes/image-example/index?raw'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<CosmosStoryProps> = {
+  title: 'Examples/Shapes',
+}
+
+export const AllShapes: Story = {
+  ...createStory(allShapes),
+  name: 'All Point Shapes',
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: allShapesStoryRaw },
+    ],
+  },
+}
+
+export const ImageExample: Story = {
+  ...createStory(imageExample),
+  name: 'Image Points Example',
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: imageExampleStoryRaw },
+    ],
+  },
+}
+
+// eslint-disable-next-line import/no-default-export
+export default meta

package/src/stories/test-luma-migration.ts

@@ -0,0 +1,195 @@
+import { Graph, GraphConfigInterface } from '@cosmos.gl/graph'
+
+export const testLumaMigration = (): { graph: Graph; div: HTMLDivElement; destroy?: () => void } => {
+  const div = document.createElement('div')
+  div.style.height = '100vh'
+  div.style.width = '100%'
+
+  const config: GraphConfigInterface = {
+    spaceSize: 4096,
+    backgroundColor: '#f25a8a', // '#2d313a',
+    pointColor: '#f069b4',
+    pointSize: 40,
+    scalePointsOnZoom: true,
+    simulationGravity: 0,
+    // simulationCenter: 1,
+    simulationRepulsion: 10,
+    // simulationCluster: 0.05, // Cluster force strength
+    simulationRepulsionFromMouse: 100,
+    enableRightClickRepulsion: true,
+    curvedLinks: false,
+    fitViewDelay: 1000,
+    fitViewPadding: 0.3,
+    rescalePositions: true,
+    enableDrag: true,
+    renderHoveredPointRing: true,
+    hoveredPointCursor: 'pointer',
+    hoveredPointRingColor: 'orange',
+    focusedPointIndex: 0,
+    focusedPointRingColor: 'blue',
+    enableSimulation: true,
+    linkArrows: true,
+    linkArrowsSizeScale: 2,
+    linkColor: 'orange',
+    linkWidth: 2,
+    linkOpacity: 1,
+    linkGreyoutOpacity: 0.1,
+    hoveredLinkColor: 'red',
+    scaleLinksOnZoom: true,
+    // renderLinks: false,
+    onLinkMouseOver: linkIndex => {
+      console.log('Hovered link index: ', linkIndex)
+    },
+    // Test point interactions
+    onPointClick: pointIndex => {
+      console.log('Clicked point index: ', pointIndex)
+    },
+    onPointMouseOver: pointIndex => {
+      console.log('Hovered point index: ', pointIndex)
+    },
+    onBackgroundClick: () => {
+      // console.log('Clicked background')
+      // // const points = graph.getPointsInRect([[0, 0], [100, 100]])
+      // // console.log('Points: ', points)
+      // const polygonPath = [[0, 0], [100, 0], [100, 100], [0, 100]] as [number, number][]
+      // const points = graph?.getPointsInPolygon(polygonPath)
+      // console.log('Points: ', points)
+    },
+    onZoomEnd: () => {
+      // const sampledPointIndices = graph?.getSampledPoints().indices
+      // console.log('Sampled point indices: ', sampledPointIndices)
+      // if (sampledPointIndices) {
+      //   graph?.selectPointsByIndices(sampledPointIndices)
+      // }
+    },
+    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
+  }
+
+  // Create graph
+  const graph = new Graph(div, config)
+
+  // Create a grid of points to test rendering with different colors and sizes
+  const pointCount = 100
+  const gridSize = Math.ceil(Math.sqrt(pointCount))
+  const pointPositions = new Float32Array(pointCount * 2)
+  const pointColors = new Float32Array(pointCount * 4) // RGBA for each point
+  const pointSizes = new Float32Array(pointCount) // Size for each point
+  const pointShapes = new Float32Array(pointCount) // Shape for each point
+
+  // Define a palette of colors (RGBA values normalized to 0-1)
+  const colorPalette = [
+    [1.0, 0.0, 0.0, 0.5], // Red
+    [0.0, 1.0, 0.0, 0.5], // Green
+    [0.0, 0.0, 1.0, 0.5], // Blue
+    [1.0, 1.0, 0.0, 0.5], // Yellow
+    [1.0, 0.0, 1.0, 0.5], // Magenta
+    [0.0, 1.0, 1.0, 0.5], // Cyan
+    [1.0, 0.5, 0.0, 0.5], // Orange
+    [0.5, 0.0, 1.0, 0.5], // Purple
+    [0.94, 0.41, 0.71, 0.5], // Pink (#f069b4)
+    [0.95, 0.35, 0.54, 0.5], // Rose (#f25a8a)
+  ]
+
+  // Size range: 10 to 60
+  const minSize = 10
+  const maxSize = 60
+
+  for (let i = 0; i < pointCount; i++) {
+    // Position in grid
+    const x = (i % gridSize) * 100 - (gridSize * 50)
+    const y = Math.floor(i / gridSize) * 100 - (gridSize * 50)
+    pointPositions[i * 2] = x
+    pointPositions[i * 2 + 1] = y
+
+    // Assign color from palette (cycling through colors)
+    const colorIndex = i % colorPalette.length
+    const color = colorPalette[colorIndex]!
+    pointColors[i * 4] = color[0]! // R
+    pointColors[i * 4 + 1] = color[1]! // G
+    pointColors[i * 4 + 2] = color[2]! // B
+    pointColors[i * 4 + 3] = color[3]! // A
+
+    // Assign size (varying sizes, could be based on position, index, or random)
+    // Using a pattern: larger points in center, smaller at edges
+    const centerX = (gridSize - 1) / 2
+    const centerY = (gridSize - 1) / 2
+    const pointX = i % gridSize
+    const pointY = Math.floor(i / gridSize)
+    const distFromCenter = Math.sqrt(
+      Math.pow(pointX - centerX, 2) + Math.pow(pointY - centerY, 2)
+    )
+    const maxDist = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2))
+    // Size decreases from center to edge, with some variation
+    const normalizedDist = distFromCenter / maxDist
+    const baseSize = minSize + (maxSize - minSize) * (1 - normalizedDist)
+    // Add some variation based on index for more visual interest
+    const variation = (i % 3) * 5 // Add 0, 5, or 10 pixels variation
+    pointSizes[i] = Math.max(minSize, Math.min(maxSize, baseSize + variation))
+
+    // Assign shape (cycling through available shapes: Circle, Square, Triangle, Diamond, Pentagon, Hexagon, Star, Cross)
+    // Shape values: 0 = Circle, 1 = Square, 2 = Triangle, 3 = Diamond, 4 = Pentagon, 5 = Hexagon, 6 = Star, 7 = Cross, 8 = None
+    const shapeIndex = i % 8 // Cycle through shapes 0-7 (excluding None)
+    pointShapes[i] = shapeIndex
+  }
+
+  graph.setPointPositions(pointPositions)
+  graph.setPointColors(pointColors)
+  graph.setPointSizes(pointSizes)
+  graph.setPointShapes(pointShapes)
+
+  // Create cluster assignments - group points into clusters based on their shape
+  // Points with the same shape will be in the same cluster
+  const pointClusters: (number | undefined)[] = []
+  const numShapes = 8 // Number of different shapes (0-7)
+  for (let i = 0; i < pointCount; i++) {
+    const shapeIndex = i % numShapes
+    // Assign each shape group to a cluster (cluster index = shape index)
+    pointClusters.push(shapeIndex)
+  }
+  // graph.setPointClusters(pointClusters)
+
+  // Optionally set explicit cluster positions (centered around the grid)
+  // If not set, clusters will use centermass (average position of points in cluster)
+  const clusterPositions: (number | undefined)[] = []
+  for (let clusterIndex = 0; clusterIndex < numShapes; clusterIndex++) {
+    // Position clusters in a circle around the center
+    const angle = (clusterIndex / numShapes) * Math.PI * 2
+    const radius = gridSize * 30 // Distance from center
+    const x = Math.cos(angle) * radius
+    const y = Math.sin(angle) * radius
+    clusterPositions.push(x, y)
+  }
+  // graph.setClusterPositions(clusterPositions)
+
+  // Create links to test link rendering
+  const links = new Float32Array((pointCount - 1) * 2)
+  for (let i = 0; i < pointCount - 1; i++) {
+    links[i * 2] = i
+    links[i * 2 + 1] = i + 1
+  }
+
+  graph.setLinks(links)
+
+  graph.render()
+  graph.trackPointPositionsByIndices([0, 1])
+
+  // Dynamic update: change links 5s after initial rendering
+  // setTimeout(() => {
+  //   if (!graph) return
+  //   // Create a simple star topology: node 0 connected to all others
+  //   const dynamicLinks = new Float32Array((pointCount - 1) * 2)
+  //   for (let i = 1; i < pointCount; i++) {
+  //     dynamicLinks[(i - 1) * 2] = 0
+  //     dynamicLinks[(i - 1) * 2 + 1] = i
+  //   }
+  //   graph.setLinks(dynamicLinks)
+  //   graph.setConfig({ renderLinks: true })
+  //   graph.render()
+  // }, 5000)
+
+  const destroy = (): void => {
+    graph.destroy()
+  }
+
+  return { div, graph, destroy }
+}