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

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

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

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

package/src/stories/clusters/radial.ts

@@ -1,24 +0,0 @@
-
-import { Graph } from '@cosmos.gl/graph'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const radial = (): { graph: Graph; div: HTMLDivElement} => {
-  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,
-  })
-}

package/src/stories/clusters/with-labels.ts

@@ -1,53 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { createClusterLabels } from '../create-cluster-labels'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const withLabels = (): {div: HTMLDivElement; graph: Graph; destroy: () => void } => {
-  let nClusters = 2
-  const { pointPositions, pointColors, pointClusters } = generateMeshData(100, 100, nClusters, 1.0)
-
-  const { div, graph } = createCosmos({
-    pointPositions,
-    pointColors,
-    pointClusters,
-    simulationGravity: 2,
-    simulationCluster: 0.25,
-    simulationRepulsion: 10,
-    pointSize: 10,
-  })
-
-  const updateClusterLabels = createClusterLabels({ div })
-  graph.setZoomLevel(0.3)
-
-  graph.setConfig({
-    onZoom: updateClusterLabels.bind(this, graph),
-    onSimulationTick: updateClusterLabels.bind(this, graph),
-  })
-
-  let increasing = true
-  const interval = setInterval(() => {
-    if (increasing) {
-      nClusters += 5
-      if (nClusters >= 15) {
-        increasing = false
-      }
-    } else {
-      nClusters -= 5
-      if (nClusters <= 2) {
-        increasing = true
-      }
-    }
-
-    const nextData = generateMeshData(100, 100, nClusters, 1.0)
-    graph.setPointClusters(nextData.pointClusters)
-    graph.setPointColors(nextData.pointColors)
-    graph.render(1)
-  }, 1500)
-
-  const destroy = (): void => {
-    clearInterval(interval)
-  }
-
-  return { div, graph, destroy }
-}

package/src/stories/clusters/worm.ts

@@ -1,40 +0,0 @@
-
-import { Graph } from '@cosmos.gl/graph'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const worm = (): {graph: Graph; div: HTMLDivElement} => {
-  const { pointPositions, pointColors, links, linkColors, pointClusters } = generateMeshData(100, 100, 1000, 1.0)
-
-  const { div, graph } = createCosmos({
-    simulationGravity: 0.5,
-    simulationRepulsion: 1,
-    simulationLinkSpring: 1,
-    pointPositions,
-    pointColors,
-    pointClusters,
-    links,
-    linkColors,
-    onSimulationTick: () => {
-      const currentPointColors = graph.getPointColors()
-      const newPointColors = new Float32Array(currentPointColors.length)
-      for (let i = 0; i < currentPointColors.length / 4; i++) {
-        if (i === 0) {
-          newPointColors[i * 4] = currentPointColors[currentPointColors.length - 4] as number
-          newPointColors[i * 4 + 1] = currentPointColors[currentPointColors.length - 3] as number
-          newPointColors[i * 4 + 2] = currentPointColors[currentPointColors.length - 2] as number
-          newPointColors[i * 4 + 3] = currentPointColors[currentPointColors.length - 1] as number
-        } else {
-          newPointColors[i * 4] = currentPointColors[(i - 1) * 4] as number
-          newPointColors[i * 4 + 1] = currentPointColors[(i - 1) * 4 + 1] as number
-          newPointColors[i * 4 + 2] = currentPointColors[(i - 1) * 4 + 2] as number
-          newPointColors[i * 4 + 3] = currentPointColors[(i - 1) * 4 + 3] as number
-        }
-      }
-      graph.setPointColors(newPointColors)
-      graph.render()
-    },
-  })
-
-  return { div, graph }
-}

package/src/stories/clusters.stories.ts

@@ -1,77 +0,0 @@
-import type { Meta } from '@storybook/html'
-import { CosmosStoryProps } from '@/graph/stories/create-cosmos'
-import { createStory, Story } from '@/graph/stories/create-story'
-import { withLabels } from './clusters/with-labels'
-import { worm } from './clusters/worm'
-import { radial } from './clusters/radial'
-import { polygonSelection } from './clusters/polygon-selection'
-
-import createCosmosRaw from './create-cosmos?raw'
-import generateMeshDataRaw from './generate-mesh-data?raw'
-import withLabelsStoryRaw from './clusters/with-labels?raw'
-import createClusterLabelsRaw from './create-cluster-labels?raw'
-import wormStory from './clusters/worm?raw'
-import radialStory from './clusters/radial?raw'
-import polygonSelectionStory from './clusters/polygon-selection?raw'
-import polygonSelectionStyleRaw from './clusters/polygon-selection/style.css?raw'
-import polygonSelectionPolygonRaw from './clusters/polygon-selection/polygon.ts?raw'
-
-const meta: Meta<CosmosStoryProps> = {
-  title: 'Examples/Clusters',
-  parameters: {
-    controls: {
-      disable: true,
-    },
-  },
-}
-
-const sourceCodeAddonParams = [
-  { name: 'create-cosmos', code: createCosmosRaw },
-  { name: 'generate-mesh-data', code: generateMeshDataRaw },
-]
-
-export const Worm: Story = {
-  ...createStory(worm),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: wormStory },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-
-export const Radial: Story = {
-  ...createStory(radial),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: radialStory },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-
-export const WithLabels: Story = {
-  ...createStory(withLabels),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: withLabelsStoryRaw },
-      { name: 'create-cluster-labels', code: createClusterLabelsRaw },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-
-export const PolygonSelection: Story = {
-  ...createStory(polygonSelection),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: polygonSelectionStory },
-      { name: 'polygon.ts', code: polygonSelectionPolygonRaw },
-      ...sourceCodeAddonParams,
-      { name: 'style.css', code: polygonSelectionStyleRaw },
-    ],
-  },
-}
-
-// eslint-disable-next-line import/no-default-export
-export default meta

package/src/stories/create-cluster-labels.ts

@@ -1,50 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-
-export const createClusterLabels = (props: { div: HTMLDivElement }): (graph: Graph) => void => {
-  const clusterLabelDivs: HTMLDivElement[] = []
-  return function updateClusterLabels (graph: Graph): void {
-    const clusterPositions = graph.getClusterPositions()
-    const nClusters = clusterPositions.length / 2
-    if (nClusters === 0) return
-    if (clusterLabelDivs.length !== nClusters) {
-      clusterLabelDivs.forEach((div) => div.remove())
-      for (let i = 0; i < nClusters; i++) {
-        const clusterLabelDiv = document.createElement('div')
-        const contentLabel = document.createElement('p')
-        clusterLabelDiv.appendChild(contentLabel)
-        clusterLabelDiv.style.position = 'absolute'
-        clusterLabelDiv.style.pointerEvents = 'none'
-
-        contentLabel.style.fontFamily = [
-          '"Nunito Sans"',
-          '-apple-system',
-          '".SFNSText-Regular"',
-          '"San Francisco"',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          '"Helvetica Neue"',
-          'Helvetica',
-          'Arial',
-          'sans-serif',
-        ].join(', ')
-        contentLabel.style.fontWeight = 'bold'
-        contentLabel.style.color = 'white'
-        contentLabel.style.transform = 'translate(-50%, -100%)'
-        contentLabel.innerText = `Cluster ${i + 1}`
-
-        props.div.appendChild(clusterLabelDiv)
-        clusterLabelDivs[i] = clusterLabelDiv
-      }
-    }
-
-    for (let i = 0; i < nClusters; i++) {
-      const clusterPosition = clusterPositions.slice(i * 2, i * 2 + 2)
-      const x = clusterPosition[0]
-      const y = clusterPosition[1]
-      const clusterLabelDiv = clusterLabelDivs[i] as HTMLDivElement
-      const screenXY = graph.spaceToScreenPosition([x ?? 0, y ?? 0])
-      clusterLabelDiv.style.top = `${screenXY[1]}px`
-      clusterLabelDiv.style.left = `${screenXY[0]}px`
-    }
-  }
-}

package/src/stories/create-cosmos.ts

@@ -1,68 +0,0 @@
-import { Graph, GraphConfigInterface } from '@cosmos.gl/graph'
-
-export type CosmosStoryProps = GraphConfigInterface & {
-  pointPositions: Float32Array;
-  pointColors?: Float32Array;
-  pointSizes?: Float32Array;
-
-  links?: Float32Array;
-  linkColors?: Float32Array;
-  linkWidths?: Float32Array;
-  // linkStrength?: Float32Array;
-
-  pointClusters?: number[];
-  clusterPositions?: number[];
-  clusterStrength?: Float32Array;
-}
-
-export const createCosmos = (props: CosmosStoryProps): { div: HTMLDivElement; graph: Graph} => {
-  const div = document.createElement('div')
-  div.style.height = '100vh'
-  div.style.width = '100%'
-
-  const config: GraphConfigInterface = {
-    backgroundColor: '#2d313a',
-    pointSize: 3,
-    pointDefaultColor: '#4B5BBF',
-    pointGreyoutOpacity: 0.1,
-    scalePointsOnZoom: true,
-    linkWidth: 0.8,
-    linkColor: '#5F74C2',
-    linkArrows: false,
-    linkGreyoutOpacity: 0,
-    curvedLinks: true,
-    renderLinks: true,
-    renderHoveredPointRing: true,
-    fitViewOnInit: false,
-    hoveredPointRingColor: '#4B5BBF',
-    enableDrag: true,
-    simulationLinkDistance: 1,
-    simulationLinkSpring: 2,
-    simulationRepulsion: 0.5,
-    simulationGravity: 0.02,
-    simulationFriction: 0.7,
-    simulationDecay: 10000000,
-    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
-    ...props,
-  }
-
-  const graph = new Graph(div, config)
-
-  graph.setPointPositions(props.pointPositions)
-  if (props.pointColors) graph.setPointColors(props.pointColors)
-  if (props.pointSizes) graph.setPointSizes(props.pointSizes)
-
-  if (props.links) graph.setLinks(props.links)
-  if (props.linkColors) graph.setLinkColors(props.linkColors)
-  if (props.linkWidths) graph.setLinkWidths(props.linkWidths)
-  // if (props.linkStrength) graph.setLinkStrength(props.linkStrength)
-
-  if (props.pointClusters) graph.setPointClusters(props.pointClusters)
-  if (props.clusterPositions) graph.setClusterPositions(props.clusterPositions)
-  if (props.clusterStrength) graph.setPointClusterStrength(props.clusterStrength)
-
-  graph.zoom(0.9)
-  graph.render()
-
-  return { div, graph }
-}

package/src/stories/create-story.ts

@@ -1,51 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import type { StoryObj } from '@storybook/html'
-import { CosmosStoryProps } from '@/graph/stories/create-cosmos'
-
-export type Story = StoryObj<CosmosStoryProps & { graph: Graph; destroy?: () => void }>;
-
-export const createStory: (storyFunction: () => {
-  graph: Graph;
-  div: HTMLDivElement;
-  destroy?: () => void;
-} | Promise<{
-  graph: Graph;
-  div: HTMLDivElement;
-  destroy?: () => void;
-}>) => Story = (storyFunction) => ({
-  async beforeEach (d): Promise<() => void> {
-    return (): void => {
-      d.args.destroy?.()
-      d.args.graph?.destroy()
-    }
-  },
-  render: (args): HTMLDivElement => {
-    const result = storyFunction()
-
-    if (result instanceof Promise) {
-      // For async story functions, create a simple div and update it when ready
-      const div = document.createElement('div')
-      div.style.height = '100vh'
-      div.style.width = '100%'
-      div.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666;">Loading story...</div>'
-
-      result.then((story) => {
-        args.graph = story.graph
-        args.destroy = story.destroy
-        // Replace the content with the actual story div
-        div.innerHTML = ''
-        div.appendChild(story.div)
-      }).catch((error) => {
-        console.error('Failed to load 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
-    } else {
-      // Synchronous story function
-      args.graph = result.graph
-      args.destroy = result.destroy
-      return result.div
-    }
-  },
-})

package/src/stories/experiments/full-mesh.ts

@@ -1,13 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const fullMesh = (): { graph: Graph; div: HTMLDivElement} => {
-  const { pointPositions, links, pointColors } = generateMeshData(40, 30, 15, 1.0)
-
-  return createCosmos({
-    pointPositions,
-    links,
-    pointColors,
-  })
-}

package/src/stories/experiments/mesh-with-holes.ts

@@ -1,13 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const meshWithHoles = (): { graph: Graph; div: HTMLDivElement} => {
-  const { pointPositions, links, pointColors } = generateMeshData(40, 80, 15, 0.8)
-
-  return createCosmos({
-    pointPositions,
-    links,
-    pointColors,
-  })
-}

package/src/stories/experiments.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta } from '@storybook/html'
-
-import { createStory, Story } from '@/graph/stories/create-story'
-import { CosmosStoryProps } from './create-cosmos'
-import { meshWithHoles } from './experiments/mesh-with-holes'
-import { fullMesh } from './experiments/full-mesh'
-
-import createCosmosRaw from './create-cosmos?raw'
-import generateMeshDataRaw from './generate-mesh-data?raw'
-import meshWithHolesRaw from './experiments/mesh-with-holes?raw'
-import fullMeshRaw from './experiments/full-mesh?raw'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<CosmosStoryProps> = {
-  title: 'Examples/Experiments',
-}
-
-const sourceCodeAddonParams = [
-  { name: 'create-cosmos', code: createCosmosRaw },
-  { name: 'generate-mesh-data', code: generateMeshDataRaw },
-]
-
-export const FullMesh: Story = {
-  ...createStory(fullMesh),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: fullMeshRaw },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-export const MeshWithHoles: Story = {
-  ...createStory(meshWithHoles),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: meshWithHolesRaw },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-
-// eslint-disable-next-line import/no-default-export
-export default meta