@cosmos.gl/graph 2.6.0 → 2.6.2-rc.0

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

@@ -1,163 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { generateData } from './data-gen'
-import './style.css'
-
-export const basicSetUp = (): { graph: Graph; div: HTMLDivElement} => {
-  const div = document.createElement('div')
-  div.className = 'app'
-
-  const graphDiv = document.createElement('div')
-  graphDiv.className = 'graph'
-  div.appendChild(graphDiv)
-
-  const actionsDiv = document.createElement('div')
-  actionsDiv.className = 'actions'
-  div.appendChild(actionsDiv)
-
-  const actionsHeader = document.createElement('div')
-  actionsHeader.className = 'actions-header'
-  actionsHeader.textContent = 'Actions'
-  actionsDiv.appendChild(actionsHeader)
-
-  const graph = new Graph(graphDiv, {
-    spaceSize: 4096,
-    backgroundColor: '#2d313a',
-    pointSize: 4,
-    pointDefaultColor: '#4B5BBF',
-    linkWidth: 0.6,
-    scalePointsOnZoom: true,
-    linkColor: '#5F74C2',
-    linkArrows: false,
-    linkGreyoutOpacity: 0,
-    curvedLinks: true,
-    renderHoveredPointRing: true,
-    hoveredPointRingColor: '#4B5BBF',
-    enableDrag: true,
-    simulationLinkDistance: 1,
-    simulationLinkSpring: 2,
-    simulationRepulsion: 0.2,
-    simulationGravity: 0.1,
-    simulationDecay: 100000,
-    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>',
-  })
-
-  const { pointPositions, links } = generateData()
-  graph.setPointPositions(pointPositions)
-  graph.setLinks(links)
-
-  graph.zoom(0.9)
-  graph.render()
-
-  /* ~ Demo Actions ~ */
-  // Start / Pause
-  let isPaused = false
-  const pauseButton = document.createElement('div')
-  pauseButton.className = 'action'
-  pauseButton.textContent = 'Pause'
-  actionsDiv.appendChild(pauseButton)
-
-  function pause (): void {
-    isPaused = true
-    pauseButton.textContent = 'Start'
-    graph.pause()
-  }
-
-  function unpause (): void {
-    isPaused = false
-    pauseButton.textContent = 'Pause'
-    // if the graph is at 100% progress, start the graph
-    if (graph.progress === 1) {
-      graph.start()
-    } else {
-      graph.unpause()
-    }
-  }
-
-  function togglePause (): void {
-    if (isPaused) unpause()
-    else pause()
-  }
-
-  pauseButton.addEventListener('click', togglePause)
-  graph.setConfig({
-    onSimulationEnd: (): void => {
-      pause()
-    },
-  })
-
-  // Zoom and Select
-  function getRandomPointIndex (): number {
-    return Math.floor((Math.random() * pointPositions.length) / 2)
-  }
-
-  function getRandomInRange ([min, max]: [number, number]): number {
-    return Math.random() * (max - min) + min
-  }
-
-  function fitView (): void {
-    graph.fitView()
-  }
-
-  function zoomIn (): void {
-    const pointIndex = getRandomPointIndex()
-    graph.zoomToPointByIndex(pointIndex)
-    graph.selectPointByIndex(pointIndex)
-    pause()
-  }
-
-  function selectPoint (): void {
-    const pointIndex = getRandomPointIndex()
-    graph.selectPointByIndex(pointIndex)
-    graph.fitView()
-    pause()
-  }
-
-  function selectPointsInArea (): void {
-    const w = div.clientWidth
-    const h = div.clientHeight
-    const left = getRandomInRange([w / 4, w / 2])
-    const right = getRandomInRange([left, (w * 3) / 4])
-    const top = getRandomInRange([h / 4, h / 2])
-    const bottom = getRandomInRange([top, (h * 3) / 4])
-    pause()
-    graph.selectPointsInRect([
-      [left, top],
-      [right, bottom],
-    ])
-  }
-
-  const fitViewButton = document.createElement('div')
-  fitViewButton.className = 'action'
-  fitViewButton.textContent = 'Fit View'
-  fitViewButton.addEventListener('click', fitView)
-  actionsDiv.appendChild(fitViewButton)
-
-  const zoomButton = document.createElement('div')
-  zoomButton.className = 'action'
-  zoomButton.textContent = 'Zoom to a point'
-  zoomButton.addEventListener('click', zoomIn)
-  actionsDiv.appendChild(zoomButton)
-
-  const selectPointButton = document.createElement('div')
-  selectPointButton.className = 'action'
-  selectPointButton.textContent = 'Select a point'
-  selectPointButton.addEventListener('click', selectPoint)
-  actionsDiv.appendChild(selectPointButton)
-
-  const selectPointsInAreaButton = document.createElement('div')
-  selectPointsInAreaButton.className = 'action'
-  selectPointsInAreaButton.textContent = 'Select points in a rectangular area'
-  selectPointsInAreaButton.addEventListener('click', selectPointsInArea)
-  actionsDiv.appendChild(selectPointsInAreaButton)
-
-  return { div, graph }
-}

package/src/stories/beginners/basic-set-up/style.css

@@ -1,35 +0,0 @@
-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;
-}
-
-.actions-header {
-  font-weight: bold;
-  margin-bottom: 2px;
-}
-
-.action {
-  margin-left: 2px;
-  font-size: 10pt;
-  text-decoration: underline;
-  cursor: pointer;
-  user-select: none;
-}

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

@@ -1,198 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,73 +0,0 @@
-/* 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

@@ -1,153 +0,0 @@
-// 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 }
-}