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

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

@@ -0,0 +1,167 @@
+import { Graph } from '@cosmos.gl/graph'
+import { generateData } from './data-gen'
+import './style.css'
+
+export const basicSetUp = (): { graph: Graph; div: HTMLDivElement; destroy?: () => void } => {
+  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,
+    pointColor: '#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)
+
+  const destroy = (): void => {
+    graph.destroy()
+  }
+
+  return { div, graph, destroy }
+}

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

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

@@ -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,65 @@
+import { Graph, GraphConfigInterface } from '@cosmos.gl/graph'
+import { generateData } from './data-generator'
+import './style.css'
+
+export const linkHovering = (): { div: HTMLDivElement; graph: Graph; destroy?: () => void } => {
+  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)
+
+  const destroy = (): void => {
+    graph.destroy()
+  }
+
+  return { div, graph, destroy }
+}

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/point-labels/data.ts

@@ -0,0 +1,73 @@
+function getRandom (min: number, max: number): number {
+  return Math.random() * (max - min) + min
+}
+
+export const pointsToShowLabelsFor = [
+  'Drury Lane Theatre',
+  "King's Theatre",
+  "Lincoln's Inn Fields",
+  "Goodman's Fields",
+  'Haymarket Theatre',
+  'Covent Garden',
+  'Bartholomew Fair',
+  'Southwark Fair',
+  'Pantheon, Oxford Street',
+]
+
+export const processPerformances = (performances: {
+  theaterCode: string;
+  performanceTitle: string;
+  theaterName: string;
+}[]): { pointPositions: Float32Array; pointColors: Float32Array; pointSizes: Float32Array; pointLabelToIndex: Map<string, number>; pointIndexToLabel: Map<number, string>; links: Float32Array } => {
+  const pointLabelToIndex = new Map<string, number>()
+  const pointIndexToLabel = new Map<number, string>()
+  const pointPositions: number[] = []
+  const pointColors: number[] = []
+  const pointSizes: number[] = []
+
+  Array.from(
+    new Set([
+      ...performances.map((p) => `P:${p.performanceTitle}`),
+      ...performances.map((p) => p.theaterName),
+    ])
+  ).forEach((point, index) => {
+    pointLabelToIndex.set(point, index)
+    pointIndexToLabel.set(index, point)
+    pointPositions.push(4096 * getRandom(0.495, 0.505)) // x
+    pointPositions.push(4096 * getRandom(0.495, 0.505)) // y
+    if (point.indexOf('P:') === 0) {
+    // #4B5BBF
+      pointColors.push(75 / 256) // r
+      pointColors.push(91 / 256) // g
+      pointColors.push(191 / 256) // b
+      pointColors.push(1) // a
+    } else {
+    // #ED69B4
+      pointColors.push(237 / 256) // r
+      pointColors.push(105 / 256) // g
+      pointColors.push(180 / 256) // b
+      pointColors.push(1) // a
+    }
+    pointSizes.push(pointsToShowLabelsFor.includes(point) ? 8 : 2)
+  })
+
+  const links = performances
+    .map((p) => {
+      const theaterIndex = pointLabelToIndex.get(p.theaterName)
+      const performanceIndex = pointLabelToIndex.get(`P:${p.performanceTitle}`)
+      if (theaterIndex === undefined || performanceIndex === undefined) {
+        return []
+      }
+      return [theaterIndex, performanceIndex]
+    })
+    .flat()
+
+  return {
+    pointPositions: new Float32Array(pointPositions),
+    pointColors: new Float32Array(pointColors),
+    pointSizes: new Float32Array(pointSizes),
+    pointLabelToIndex,
+    pointIndexToLabel,
+    links: new Float32Array(links),
+  }
+}

package/src/stories/beginners/point-labels/index.ts

@@ -0,0 +1,69 @@
+import { Graph } from '@cosmos.gl/graph'
+import { CosmosLabels } from './labels'
+import { processPerformances, pointsToShowLabelsFor } from './data'
+import './style.css'
+
+// Load data from Github Gist and use it as `performances` argument for `PointLabelsStory`:
+// const data = await fetch('https://gist.githubusercontent.com/Stukova/e6c4c7777e0166431a983999213f10c8/raw/performances.json')
+// const performances = await data.json()
+
+export const pointLabels = (
+  performances: {
+    theaterCode: string;
+    performanceTitle: string;
+    theaterName: string;
+  }[]
+): { graph: Graph; div: HTMLDivElement; destroy?: () => void } => {
+  const { pointPositions, pointColors, pointSizes, links, pointIndexToLabel, pointLabelToIndex } = processPerformances(performances)
+  const div = document.createElement('div')
+  div.className = 'app'
+
+  const labelsDiv = document.createElement('div')
+  div.appendChild(labelsDiv)
+
+  const graphDiv = document.createElement('div')
+  graphDiv.className = 'graph'
+  div.appendChild(graphDiv)
+
+  const cosmosLabels = new CosmosLabels(labelsDiv, pointIndexToLabel)
+
+  const graph = new Graph(graphDiv, {
+    spaceSize: 4096,
+    backgroundColor: '#2d313a',
+    scalePointsOnZoom: true,
+    linkWidth: 0.6,
+    linkColor: '#5F74C2',
+    linkArrows: false,
+    fitViewOnInit: false,
+    enableDrag: true,
+    simulationGravity: 0.1,
+    simulationLinkDistance: 1,
+    simulationLinkSpring: 0.3,
+    simulationRepulsion: 0.4,
+    onSimulationTick: () => cosmosLabels.update(graph),
+    onZoom: () => cosmosLabels.update(graph),
+    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
+  })
+
+  graph.setPointPositions(new Float32Array(pointPositions))
+  graph.setPointColors(new Float32Array(pointColors))
+  graph.setPointSizes(new Float32Array(pointSizes))
+  graph.setLinks(new Float32Array(links))
+  graph.render()
+  graph.setZoomLevel(0.6)
+
+  // _Track the points_ for which you wish to display labels.
+  // Their coordinates in the simulation space will be accessible
+  // via the `getTrackedPointPositionsMap` method. You can then convert
+  // them to the screen space with the `spaceToScreenPosition`
+  // method.
+  graph.trackPointPositionsByIndices(
+    pointsToShowLabelsFor.map((l) => pointLabelToIndex.get(l) as number)
+  )
+
+  const destroy = (): void => {
+    graph.destroy()
+  }
+
+  return { div, graph, destroy }
+}