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

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

@@ -0,0 +1,46 @@
+import { LabelRenderer, LabelOptions } from '@interacta/css-labels'
+import { Graph } from '@cosmos.gl/graph'
+
+export class CosmosLabels {
+  private labelRenderer: LabelRenderer
+  private labels: LabelOptions[] = []
+  private pointIndexToLabel: Map<number, string>
+
+  public constructor (div: HTMLDivElement, pointIndexToLabel: Map<number, string>) {
+    this.labelRenderer = new LabelRenderer(div, { pointerEvents: 'none' })
+    this.pointIndexToLabel = pointIndexToLabel
+  }
+
+  public update (graph: Graph): void {
+    // Get coordinates of the tracked nodes
+    const trackedNodesPositions = graph.getTrackedPointPositionsMap()
+    let index = 0
+    trackedNodesPositions.forEach((positions, pointIndex) => {
+      // Convert coordinates to the screen space
+      const screenPosition = graph.spaceToScreenPosition([
+        positions?.[0] ?? 0,
+        positions?.[1] ?? 0,
+      ])
+
+      // Get the node radius and convert it to the screen space value in pixels
+      const radius = graph.spaceToScreenRadius(
+        graph.getPointRadiusByIndex(pointIndex) as number
+      )
+
+      // Set label properties
+      this.labels[index] = {
+        id: `${pointIndex}`,
+        text: this.pointIndexToLabel.get(pointIndex) ?? '',
+        x: screenPosition[0],
+        y: screenPosition[1] - (radius + 2),
+        opacity: 1,
+      }
+
+      index += 1
+    })
+
+    // Pass labels configuration to the renderer and draw them
+    this.labelRenderer.setLabels(this.labels)
+    this.labelRenderer.draw(true)
+  }
+}

package/src/stories/beginners/point-labels/style.css

@@ -0,0 +1,16 @@
+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%;
+  color: white;
+}
+
+.graph {
+  width: 100%;
+  height: 100vh;
+}

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

@@ -0,0 +1,54 @@
+import { Graph, GraphConfigInterface } from '@cosmos.gl/graph'
+
+export const quickStart = (): { 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: '#2d313a',
+    pointColor: '#F069B4',
+    scalePointsOnZoom: true,
+    simulationFriction: 0.1, // keeps the graph inert
+    simulationGravity: 0, // disables gravity
+    simulationRepulsion: 0.5, // increases repulsion between points
+    curvedLinks: true, // curved links
+    fitViewDelay: 1000, // wait 1 second before fitting the view
+    fitViewPadding: 0.3, // centers the graph width padding of ~30% of screen
+    rescalePositions: true, // rescale positions
+    enableDrag: true, // enable dragging points
+    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>',
+  /* ... */
+  }
+
+  const graph = new Graph(div, config)
+
+  // Points: [x1, y1, x2, y2, x3, y3]
+  const pointPositions = new Float32Array([
+    0.0, 0.0, // Point 1 at (0,0)
+    1.0, 0.0, // Point 2 at (1,0)
+    0.5, 1.0, // Point 3 at (0.5,1)
+  ])
+
+  graph.setPointPositions(pointPositions)
+
+  // Links: [sourceIndex1, targetIndex1, sourceIndex2, targetIndex2]
+  const links = new Float32Array([
+    0, 1, // Link from point 0 to point 1
+    1, 2, // Link from point 1 to point 2
+    2, 0, // Link from point 2 to point 0
+  ])
+
+  graph.setLinks(links)
+
+  graph.render()
+
+  const destroy = (): void => {
+    graph.destroy()
+  }
+
+  return { div, graph, destroy }
+}

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

@@ -0,0 +1,25 @@
+import { GraphConfigInterface } from '@cosmos.gl/graph'
+
+export const config: GraphConfigInterface = {
+  spaceSize: 4096,
+  backgroundColor: '#2d313a',
+  pointSize: 4,
+  pointColor: '#4B5BBF',
+  scalePointsOnZoom: true,
+  pointGreyoutOpacity: 0.1,
+  linkWidth: 0.6,
+  linkColor: '#5F74C2',
+  linkArrows: false,
+  linkGreyoutOpacity: 0,
+  hoveredPointCursor: 'pointer',
+  renderHoveredPointRing: true,
+  fitViewDuration: 1000,
+  fitViewPadding: 0.3,
+  enableSimulationDuringZoom: true,
+  simulationLinkDistance: 1,
+  simulationLinkSpring: 2,
+  simulationRepulsion: 0.2,
+  simulationGravity: 0.1,
+  simulationDecay: 100000,
+  attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
+}

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

@@ -0,0 +1,30 @@
+function getRandom (min: number, max: number): number {
+  return Math.random() * (max - min) + min
+}
+
+export function generateData (n = 100, m = 100): { pointPositions: number[]; links: number[] } {
+  const pointPositions = new Array(n * m * 2)
+  const links: number[] = []
+  for (let pointIndex = 0; pointIndex < n * m; pointIndex += 1) {
+    const x = 4096 * getRandom(0.495, 0.505)
+    const y = 4096 * getRandom(0.495, 0.505)
+    pointPositions[pointIndex * 2] = x
+    pointPositions[pointIndex * 2 + 1] = y
+    const nextPointIndex = pointIndex + 1
+    const bottomPointIndex = pointIndex + n
+    const pointLine = Math.floor(pointIndex / n)
+    const nextPointLine = Math.floor(nextPointIndex / n)
+    const bottomPointLine = Math.floor(bottomPointIndex / n)
+    if (pointLine === nextPointLine) {
+      links.push(pointIndex)
+      links.push(nextPointIndex)
+    }
+
+    if (bottomPointLine < m) {
+      links.push(pointIndex)
+      links.push(bottomPointIndex)
+    }
+  }
+
+  return { pointPositions, links }
+}

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

@@ -0,0 +1,96 @@
+import { Graph } from '@cosmos.gl/graph'
+import { generateData } from './data-gen'
+import { config } from './config'
+import './style.css'
+
+export const removePoints = (): { graph: Graph; div: HTMLDivElement; destroy?: () => void } => {
+  const { pointPositions, links } = generateData()
+  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)
+
+  let isPaused = false
+
+  let graphLinks = links
+
+  const graph = new Graph(graphDiv, {
+    ...config,
+    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)
+      console.log('Clicked node: ', i)
+    },
+  })
+  graph.setPointPositions(new Float32Array(pointPositions))
+  graph.setLinks(new Float32Array(graphLinks))
+  graph.render()
+  graph.zoom(0.9)
+
+  /* ~ Demo Actions ~ */
+  // Start / Pause
+  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 start (): void {
+    isPaused = false
+    pauseButton.textContent = 'Pause'
+    graph.start()
+  }
+
+  function togglePause (): void {
+    if (isPaused) start()
+    else pause()
+  }
+
+  pauseButton.addEventListener('click', togglePause)
+
+  const destroy = (): void => {
+    graph.destroy()
+  }
+
+  return { div, graph, destroy }
+}

package/src/stories/beginners/remove-points/style.css

@@ -0,0 +1,31 @@
+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/beginners.stories.ts

@@ -0,0 +1,130 @@
+import type { Meta } from '@storybook/html'
+
+import { createStory, Story } from '@/graph/stories/create-story'
+import { CosmosStoryProps } from './create-cosmos'
+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 quickStartStoryRaw from './beginners/quick-start?raw'
+import basicSetUpStoryRaw from './beginners/basic-set-up/index?raw'
+import basicSetUpStoryCssRaw from './beginners/basic-set-up/style.css?raw'
+import basicSetUpStoryDataGenRaw from './beginners/basic-set-up/data-gen?raw'
+import pointLabelsStoryRaw from './beginners/point-labels/index?raw'
+import pointLabelsStoryDataRaw from './beginners/point-labels/data.ts?raw'
+import pointLabelsStoryLabelsRaw from './beginners/point-labels/labels.ts?raw'
+import pointLabelsStoryCssRaw from './beginners/point-labels/style.css?raw'
+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'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<CosmosStoryProps> = {
+  title: 'Examples/Beginners',
+}
+
+export const QuickStart: Story = {
+  ...createStory(quickStart),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: quickStartStoryRaw },
+    ],
+  },
+}
+
+export const BasicSetUp: Story = {
+  ...createStory(basicSetUp),
+  name: '100x100 grid',
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: basicSetUpStoryRaw },
+      { name: 'style.css', code: basicSetUpStoryCssRaw },
+      { name: 'data-gen', code: basicSetUpStoryDataGenRaw },
+    ],
+  },
+}
+
+export const PointLabels: Story = {
+  loaders: [
+    async (): Promise<{ data: { performances: [] } }> => {
+      try {
+        const response = await fetch('https://gist.githubusercontent.com/Stukova/e6c4c7777e0166431a983999213f10c8/raw/performances.json')
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`)
+        }
+        return {
+          data: await response.json(),
+        }
+      } catch (error) {
+        console.error('Failed to fetch data:', error)
+        return {
+          data: { performances: [] },
+        }
+      }
+    },
+  ],
+  async beforeEach (d): Promise<() => void> {
+    return (): void => {
+      d.args.destroy?.()
+      d.args.graph?.destroy()
+    }
+  },
+  render: (args, { loaded: { data } }): HTMLDivElement => {
+    const div = document.createElement('div')
+    div.style.height = '100vh'
+    div.style.width = '100%'
+
+    try {
+      const story = pointLabels(data.performances)
+      args.graph = story.graph
+      args.destroy = story.destroy
+      div.appendChild(story.div)
+    } catch (error) {
+      console.error('Failed to load PointLabels story:', error)
+      div.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #ff0000;">Failed to load story</div>'
+    }
+
+    return div
+  },
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: pointLabelsStoryRaw },
+      { name: 'data.ts', code: pointLabelsStoryDataRaw },
+      { name: 'labels.ts', code: pointLabelsStoryLabelsRaw },
+      { name: 'style.css', code: pointLabelsStoryCssRaw },
+    ],
+  },
+}
+
+export const RemovePoints: Story = {
+  ...createStory(removePoints),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: removePointsStoryRaw },
+      { name: 'config.ts', code: removePointsStoryConfigRaw },
+      { name: 'data-gen.ts', code: removePointsStoryDataGenRaw },
+      { name: 'style.css', code: removePointsStoryCssRaw },
+    ],
+  },
+}
+
+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 },
+    ],
+  },
+}
+
+// eslint-disable-next-line import/no-default-export
+export default meta

package/src/stories/clusters/polygon-selection/index.ts

@@ -0,0 +1,52 @@
+import { Graph } from '@cosmos.gl/graph'
+import { createCosmos } from '../../create-cosmos'
+import { generateMeshData } from '../../generate-mesh-data'
+import { PolygonSelection } from './polygon'
+
+export const polygonSelection = async (): Promise<{div: HTMLDivElement; graph: Graph; destroy: () => void }> => {
+  const nClusters = 25
+  const { pointPositions, pointColors, pointClusters } = generateMeshData(150, 150, nClusters, 1.0)
+
+  const { div, graph, destroy: baseDestroy } = await createCosmos({
+    pointPositions,
+    pointColors,
+    pointClusters,
+    simulationGravity: 1.5,
+    simulationCluster: 0.3,
+    simulationRepulsion: 8,
+    pointSize: 8,
+    backgroundColor: '#1a1a2e',
+    pointGreyoutOpacity: 0.2,
+    onBackgroundClick: (): void => {
+      graph.unselectPoints()
+    },
+  })
+
+  graph.setZoomLevel(0.4)
+
+  const polygonSelection = new PolygonSelection(div, (polygonPoints) => {
+    graph.selectPointsInPolygon(polygonPoints)
+  })
+
+  const actionsDiv = document.createElement('div')
+  actionsDiv.className = 'actions'
+  div.appendChild(actionsDiv)
+
+  const polygonButton = document.createElement('div')
+  polygonButton.className = 'action'
+  polygonButton.textContent = 'Enable Polygon Selection'
+  polygonButton.addEventListener('click', () => {
+    polygonSelection.enablePolygonMode()
+  })
+  actionsDiv.appendChild(polygonButton)
+
+  const destroy = (): void => {
+    polygonSelection.destroy()
+    if (actionsDiv.parentNode) {
+      actionsDiv.parentNode.removeChild(actionsDiv)
+    }
+    baseDestroy?.()
+  }
+
+  return { div, graph, destroy }
+}

package/src/stories/clusters/polygon-selection/polygon.ts

@@ -0,0 +1,143 @@
+import './style.css'
+
+export class PolygonSelection {
+  private canvas: HTMLCanvasElement
+  private ctx: CanvasRenderingContext2D
+  private isDrawing = false
+  private points: Array<{ x: number; y: number }> = []
+  private graphDiv: HTMLElement
+  private onPolygonComplete?: (points: [number, number][]) => void
+  private boundStartDrawing: (e: MouseEvent) => void
+  private boundDraw: (e: MouseEvent) => void
+  private boundStopDrawing: () => void
+  private resizeObserver: ResizeObserver
+
+  public constructor (graphDiv: HTMLElement, onPolygonComplete?: (points: [number, number][]) => void) {
+    this.graphDiv = graphDiv
+    this.onPolygonComplete = onPolygonComplete
+
+    // Bind event handlers
+    this.boundStartDrawing = this.startDrawing.bind(this)
+    this.boundDraw = this.draw.bind(this)
+    this.boundStopDrawing = this.stopDrawing.bind(this)
+
+    // Create canvas
+    this.canvas = document.createElement('canvas')
+    this.canvas.className = 'polygon-canvas'
+
+    const ctx = this.canvas.getContext('2d')
+    if (!ctx) throw new Error('Could not get canvas context')
+    this.ctx = ctx
+
+    this.graphDiv.appendChild(this.canvas)
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.resizeCanvas()
+    })
+    this.resizeObserver.observe(this.graphDiv)
+  }
+
+  public enablePolygonMode (): void {
+    this.canvas.style.pointerEvents = 'auto'
+    this.canvas.style.cursor = 'crosshair'
+
+    // Add event listeners
+    this.canvas.addEventListener('mousedown', this.boundStartDrawing)
+    this.canvas.addEventListener('mousemove', this.boundDraw)
+    this.canvas.addEventListener('mouseup', this.boundStopDrawing)
+  }
+
+  public disablePolygonMode (): void {
+    this.canvas.style.pointerEvents = 'none'
+    this.canvas.style.cursor = 'default'
+
+    // Remove event listeners
+    this.canvas.removeEventListener('mousedown', this.boundStartDrawing)
+    this.canvas.removeEventListener('mousemove', this.boundDraw)
+    this.canvas.removeEventListener('mouseup', this.boundStopDrawing)
+
+    // Clear canvas
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  public destroy (): void {
+    this.disablePolygonMode()
+    this.resizeObserver.disconnect()
+    if (this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas)
+    }
+  }
+
+  private resizeCanvas (): void {
+    const rect = this.graphDiv.getBoundingClientRect()
+
+    // Apply pixel ratio for crisp rendering
+    const pixelRatio = window.devicePixelRatio || 1
+    this.canvas.width = rect.width * pixelRatio
+    this.canvas.height = rect.height * pixelRatio
+
+    // Reset transform and scale the context to match the pixel ratio
+    this.ctx.resetTransform()
+    this.ctx.scale(pixelRatio, pixelRatio)
+  }
+
+  private startDrawing (e: MouseEvent): void {
+    this.isDrawing = true
+    this.points = []
+    const rect = this.canvas.getBoundingClientRect()
+    this.points.push({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  private draw (e: MouseEvent): void {
+    if (!this.isDrawing) return
+
+    const rect = this.canvas.getBoundingClientRect()
+    this.points.push({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+
+    // Clear the entire canvas accounting for pixel ratio
+    const pixelRatio = window.devicePixelRatio || 1
+    this.ctx.clearRect(0, 0, this.canvas.width / pixelRatio, this.canvas.height / pixelRatio)
+
+    this.ctx.beginPath()
+    if (this.points.length > 0 && this.points[0]) {
+      this.ctx.moveTo(this.points[0].x, this.points[0].y)
+    }
+
+    for (let i = 1; i < this.points.length; i++) {
+      const point = this.points[i]
+      if (point) {
+        this.ctx.lineTo(point.x, point.y)
+      }
+    }
+
+    this.ctx.strokeStyle = '#ffffff'
+    this.ctx.lineWidth = 2
+    this.ctx.stroke()
+  }
+
+  private stopDrawing (): void {
+    if (!this.isDrawing) return
+    this.isDrawing = false
+
+    if (this.points.length > 2) {
+      this.ctx.closePath()
+      this.ctx.stroke()
+
+      const polygonPoints: [number, number][] = this.points.map(p => [p.x, p.y])
+      const firstPolygonPoint = polygonPoints[0]
+      const lastPolygonPoint = polygonPoints[polygonPoints.length - 1]
+      if (firstPolygonPoint && lastPolygonPoint && (firstPolygonPoint[0] !== lastPolygonPoint[0] || firstPolygonPoint[1] !== lastPolygonPoint[1])) {
+        polygonPoints.push(firstPolygonPoint)
+      }
+
+      if (this.onPolygonComplete) {
+        this.onPolygonComplete(polygonPoints)
+      }
+    }
+
+    const pixelRatio = window.devicePixelRatio || 1
+    this.ctx.clearRect(0, 0, this.canvas.width / pixelRatio, this.canvas.height / pixelRatio)
+    this.disablePolygonMode()
+  }
+}

package/src/stories/clusters/polygon-selection/style.css

@@ -0,0 +1,8 @@
+.polygon-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}

package/src/stories/clusters/radial.ts

@@ -0,0 +1,24 @@
+
+import { Graph } from '@cosmos.gl/graph'
+import { createCosmos } from '../create-cosmos'
+import { generateMeshData } from '../generate-mesh-data'
+
+export const radial = async (): Promise<{ graph: Graph; div: HTMLDivElement; destroy?: () => void }> => {
+  const {
+    pointPositions, pointColors, pointSizes,
+    links, linkColors, linkWidths,
+    pointClusters, clusterPositions, clusterStrength,
+  } = generateMeshData(100, 100, 100, 1.0)
+
+  return createCosmos({
+    pointPositions,
+    pointColors,
+    pointSizes,
+    pointClusters,
+    links,
+    linkColors,
+    linkWidths,
+    clusterPositions,
+    clusterStrength,
+  })
+}