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

package/src/stories/generate-mesh-data.ts

@@ -1,125 +0,0 @@
-import { scaleLinear, scaleSequential } from 'd3-scale'
-import { interpolateWarm } from 'd3-scale-chromatic'
-import { getRgbaColor } from '@cosmos.gl/graph'
-
-function getRandom (min: number, max: number): number {
-  return Math.random() * (max - min) + min
-}
-
-function getPositionOnCircle (radius: number, angle: number, center: number): [number, number] {
-  const x = center + radius * Math.cos(angle)
-  const y = center + radius * Math.sin(angle)
-  return [x, y]
-}
-
-export type MeshData = {
-  pointPositions: Float32Array;
-  pointColors: Float32Array;
-  pointSizes: Float32Array;
-
-  links: Float32Array;
-  linkColors: Float32Array;
-  linkWidths: Float32Array;
-  // linkStrength: Float32Array;
-
-  pointClusters: number[];
-  clusterPositions: number[];
-  clusterStrength: Float32Array;
-}
-
-export function generateMeshData (
-  n: number,
-  m: number,
-  nClusters: number,
-  wholeness: number,
-  radialness = [10, 1000]
-): MeshData {
-  const pointColorScale = scaleSequential(interpolateWarm)
-  pointColorScale.domain([0, nClusters])
-  const radius = scaleLinear(radialness)
-  radius.domain([0, nClusters])
-
-  const pointPositions = new Float32Array(n * m * 2)
-  const links: number[] = []
-  const pointClusters = new Array(n * m)
-  const clusterPositions = new Array(nClusters * 2)
-  const clusterStrength = new Float32Array(n * m)
-  const pointColors = new Float32Array(n * m * 4)
-  const pointSizes = new Float32Array(n * m)
-
-  // The maximum texture size can vary between devices and WebGL versions
-  // The space size should be less than the maximum texture size to ensure better visual quality of the generated mesh.
-  const gl = document.createElement('canvas').getContext('webgl')
-  const spaceSize = (gl?.getParameter(gl.MAX_TEXTURE_SIZE) ?? 16384) / 2
-  gl?.getExtension('WEBGL_lose_context')?.loseContext()
-
-  for (let clusterIndex = 0; clusterIndex < nClusters; clusterIndex += 1) {
-    const [x, y] = getPositionOnCircle(radius(clusterIndex), 15 * Math.PI * (clusterIndex / nClusters), spaceSize / 2)
-    clusterPositions[clusterIndex * 2] = x
-    clusterPositions[clusterIndex * 2 + 1] = y
-  }
-
-  for (let pointIndex = 0; pointIndex < n * m; pointIndex += 1) {
-    const x = spaceSize * getRandom(0.495, 0.505)
-    const y = spaceSize * getRandom(0.495, 0.505)
-    pointPositions[pointIndex * 2] = x
-    pointPositions[pointIndex * 2 + 1] = y
-
-    pointClusters[pointIndex] = pointIndex % nClusters
-    clusterStrength[pointIndex] = (nClusters - (pointIndex % nClusters)) / nClusters
-    const pointColor = pointColorScale(pointIndex % nClusters)
-    const rgba = getRgbaColor(pointColor)
-    pointColors[pointIndex * 4] = rgba[0]
-    pointColors[pointIndex * 4 + 1] = rgba[1]
-    pointColors[pointIndex * 4 + 2] = rgba[2]
-    pointColors[pointIndex * 4 + 3] = rgba[3]
-
-    pointSizes[pointIndex] = getRandom(1, 5)
-
-    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 && Math.random() < wholeness) {
-      links.push(pointIndex)
-      links.push(nextPointIndex)
-    }
-
-    if (bottomPointLine < m && Math.random() < wholeness) {
-      links.push(pointIndex)
-      links.push(bottomPointIndex)
-    }
-  }
-
-  const linkColors = new Float32Array(links.length / 2 * 4)
-  const linkWidths = new Float32Array(links.length / 2)
-  // const linkStrength = new Float32Array(links.length / 2)
-  for (let i = 0; i < links.length / 2; i++) {
-    const sourcePointIndex = links[i * 2] as number
-    const rgba = getRgbaColor(pointColorScale(sourcePointIndex % nClusters))
-    linkColors[i * 4 + 0] = rgba[0]
-    linkColors[i * 4 + 1] = rgba[1]
-    linkColors[i * 4 + 2] = rgba[2]
-    linkColors[i * 4 + 3] = 0.9
-
-    linkWidths[i] = getRandom(0.4, 0.8)
-    // linkStrength[i] = (n * m - sourcePointIndex) / (n * m)
-  }
-
-  return {
-    pointPositions,
-    pointColors,
-    pointSizes,
-
-    links: new Float32Array(links),
-    linkColors,
-    linkWidths,
-    // linkStrength,
-
-    pointClusters,
-    clusterStrength,
-    clusterPositions,
-  }
-}

package/src/stories/geospatial/moscow-metro-stations/index.ts

@@ -1,62 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { moscowMetroCoords } from './moscow-metro-coords'
-import { getPointColors } from './point-colors'
-import './style.css'
-
-/**
- * This example demonstrates the importance of rescaling positions by Cosmos.
- * The Moscow Metro station coordinates are are normalized (0-1 range in both dimensions).
- * By default, cosmos.gl rescales these positions to fit the canvas.
- * When disabling rescaling (`rescalePositions: false`):
- * - Points render using raw coordinates
- * - The entire graph occupies a tiny 1x1 area in WebGL's clip space (-1 to 1)
- * - This causes visual artifacts due to WebGL's floating-point precision limitations
- * - Points cluster in the center and may exhibit rendering glitches
- */
-export const moscowMetroStations = (): {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)
-
-  let rescalePositions = true
-
-  const graph = new Graph(graphDiv, {
-    backgroundColor: '#2d313a',
-    scalePointsOnZoom: false,
-    rescalePositions,
-    pointDefaultColor: '#FEE08B',
-    enableSimulation: false,
-    enableDrag: false,
-    fitViewOnInit: true,
-    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
-  })
-
-  const pointColors = getPointColors(moscowMetroCoords)
-
-  graph.setPointPositions(new Float32Array(moscowMetroCoords))
-  graph.setPointColors(pointColors)
-  graph.render()
-
-  const disableEnableRescaleButton = document.createElement('div')
-  disableEnableRescaleButton.className = 'action'
-  disableEnableRescaleButton.textContent = 'Disable Rescale'
-  actionsDiv.appendChild(disableEnableRescaleButton)
-
-  disableEnableRescaleButton.addEventListener('click', () => {
-    rescalePositions = !rescalePositions
-    disableEnableRescaleButton.textContent = rescalePositions ? 'Disable Rescale' : 'Enable Rescale'
-    graph.setConfig({ rescalePositions })
-    graph.setPointPositions(new Float32Array(moscowMetroCoords))
-    graph.render()
-    graph.fitView()
-  })
-
-  return { div, graph }
-}

package/src/stories/geospatial/moscow-metro-stations/moscow-metro-coords.ts

@@ -1 +0,0 @@
-export const moscowMetroCoords = [0.6048172222222222, 0.8100822222222221, 0.6048466666666666, 0.8100211111111111, 0.6047641666666667, 0.8099794444444445, 0.6046672222222222, 0.8099377777777779, 0.6046313888888889, 0.8098894444444444, 0.6046005555555556, 0.8098627777777778, 0.6045797222222222, 0.8098277777777778, 0.6045522222222223, 0.8098094444444445, 0.6045200000000001, 0.8097761111111111, 0.6044905555555555, 0.809765, 0.6044722222222223, 0.8097288888888888, 0.6044547222222222, 0.8096961111111111, 0.6044286111111111, 0.8096422222222223, 0.604385, 0.8095927777777777, 0.6043441666666667, 0.8095738888888888, 0.6043311111111112, 0.8095016666666666, 0.6042591666666667, 0.8094033333333334, 0.6041833333333333, 0.8093172222222222, 0.6041202777777778, 0.8092427777777778, 0.6040902777777778, 0.8091438888888888, 0.6040052777777778, 0.8090722222222223, 0.6039555555555556, 0.809015, 0.603910125, 0.8088964833333334, 0.6039827833333333, 0.8088124555555556, 0.6040537, 0.8087146833333334, 0.6040783888888889, 0.8086688666666666, 0.6041465694444444, 0.8086257777777778, 0.6041172222222222, 0.8104394444444444, 0.6041011111111112, 0.8103655555555556, 0.6041002777777777, 0.8103049999999999, 0.6041297222222222, 0.8102211111111111, 0.604161111111111, 0.8101055555555556, 0.6042091666666667, 0.8100283333333334, 0.6042580555555556, 0.8100016666666666, 0.6043277777777778, 0.8099427777777778, 0.6043986111111112, 0.8098705555555555, 0.6044327777777778, 0.809833888888889, 0.6044624999999999, 0.8098038888888889, 0.6044972222222222, 0.8097655555555556, 0.6045263888888889, 0.809675, 0.6045491666666667, 0.809613888888889, 0.6046044444444445, 0.8094855555555556, 0.6046225, 0.8094166666666667, 0.6046216666666667, 0.809325, 0.6045797222222222, 0.809195, 0.604601111111111, 0.8090877777777779, 0.6046372222222222, 0.8090077777777778, 0.6047080555555555, 0.8089622222222222, 0.6047738888888889, 0.8089488888888888, 0.6048455555555555, 0.8089649999999999, 0.6049055555555556, 0.80907, 0.6037622222222222, 0.8103127777777778, 0.6037838888888889, 0.8102538888888888, 0.6038394444444445, 0.8101966666666667, 0.6038477777777778, 0.81014, 0.6038975, 0.8100211111111111, 0.6039113888888888, 0.8097594444444444, 0.6039355555555556, 0.8096711111111111, 0.6040163888888889, 0.8096150000000001, 0.604085, 0.8096088888888889, 0.6042172222222223, 0.8096455555555555, 0.6043458333333334, 0.80969, 0.6043952777777778, 0.8097077777777778, 0.6044613888888889, 0.8097344444444445, 0.6045044444444444, 0.8097588888888888, 0.6046047222222223, 0.8097644444444444, 0.6046683333333334, 0.80985, 0.6047325, 0.8098983333333334, 0.60478, 0.8099072222222222, 0.6048627777777777, 0.8099366666666666, 0.6049483333333333, 0.8099322222222223, 0.6049980555555556, 0.8099711111111112, 0.6049961111111111, 0.8100522222222222, 0.6040163888888889, 0.8096150000000001, 0.6040752777777778, 0.8096444444444444, 0.6041202777777778, 0.8096644444444444, 0.6041602777777778, 0.8096877777777778, 0.6042083333333333, 0.8097000000000001, 0.6042622222222223, 0.8096661111111112, 0.6043008333333333, 0.8096599999999999, 0.6042608333333334, 0.8097127777777777, 0.6042799999999999, 0.8097233333333334, 0.604348611111111, 0.8096866666666668, 0.6043958333333334, 0.8097155555555556, 0.6044463888888889, 0.8097322222222222, 0.6044680555555555, 0.8097361111111111, 0.6043455555555556, 0.8096922222222221, 0.6043816666666667, 0.809785, 0.6044011111111112, 0.8098688888888889, 0.6044522222222223, 0.8098883333333333, 0.6045327777777778, 0.8098877777777778, 0.6045969444444445, 0.80986, 0.6046097222222222, 0.8097611111111112, 0.6045880555555556, 0.8096766666666667, 0.6045497222222223, 0.8096211111111111, 0.6045119444444444, 0.8096061111111112, 0.6044697222222223, 0.8096094444444445, 0.6044208333333333, 0.8096427777777778, 0.6046147222222221, 0.8104844444444445, 0.6046233333333333, 0.8103855555555555, 0.6045908333333334, 0.8103066666666666, 0.6045508333333334, 0.8102494444444445, 0.6045586111111111, 0.8101172222222223, 0.6045527777777778, 0.8100488888888888, 0.604545, 0.8099644444444445, 0.6045327777777778, 0.8098955555555556, 0.6045330555555556, 0.8098516666666667, 0.6045483333333334, 0.8098116666666666, 0.6045369444444444, 0.8097516666666666, 0.6045205555555555, 0.8096733333333332, 0.6044755555555555, 0.8096144444444445, 0.6044674999999999, 0.8095544444444444, 0.6044058333333333, 0.8094872222222221, 0.6043702777777779, 0.8093761111111112, 0.6043408333333333, 0.8093222222222222, 0.6043177777777777, 0.8092788888888889, 0.6042791666666667, 0.8092061111111112, 0.6042380555555555, 0.8091266666666667, 0.6042188888888889, 0.8090738888888889, 0.6041894444444444, 0.808995, 0.6042591666666667, 0.8089238888888889, 0.6043169444444445, 0.8088944444444445, 0.60399, 0.8103372222222223, 0.6039988888888889, 0.8102805555555557, 0.6039911111111111, 0.8101483333333335, 0.6039866666666667, 0.810101111111111, 0.6040669444444444, 0.8100477777777778, 0.6041486111111111, 0.8099638888888888, 0.60422, 0.809875, 0.6042966666666666, 0.8098544444444444, 0.6043369444444445, 0.8098055555555554, 0.6043875, 0.8097844444444444, 0.6044663888888889, 0.8098055555555554, 0.6045163888888889, 0.8097811111111112, 0.6045369444444444, 0.8097516666666666, 0.6045894444444444, 0.8096677777777779, 0.6046275, 0.8096216666666667, 0.6046858333333334, 0.809585, 0.6048100000000001, 0.8094933333333333, 0.6049044444444445, 0.8094755555555556, 0.6049813888888889, 0.8095388888888888, 0.6050502777777779, 0.8095311111111111, 0.6051458333333333, 0.8094516666666667, 0.6051563888888889, 0.8093638888888889, 0.6051616666666667, 0.8093016666666668, 0.6037075, 0.8090772222222221, 0.6037644444444444, 0.8091088888888889, 0.6038058333333334, 0.8091533333333334, 0.6038636111111111, 0.8091627777777777, 0.6039366666666667, 0.8092194444444445, 0.6040252777777777, 0.8092827777777779, 0.6041202777777778, 0.8093866666666666, 0.6041622222222223, 0.8094305555555555, 0.60421, 0.8094827777777778, 0.6041583333333334, 0.8095811111111112, 0.6042172222222223, 0.8096455555555555, 0.6042552777777778, 0.8097083333333334, 0.6045205555555555, 0.8096733333333332, 0.6045952777777778, 0.8096727777777779, 0.6046733333333333, 0.8097066666666666, 0.6047752777777777, 0.8097355555555555, 0.6048611111111111, 0.8097644444444444, 0.6049627777777777, 0.8097283333333334, 0.6050461111111111, 0.8097316666666666, 0.6051772222222223, 0.809695, 0.6044083333333333, 0.8105444444444444, 0.6044538888888888, 0.8104655555555556, 0.6044575, 0.8103516666666667, 0.6044163888888889, 0.8102627777777778, 0.6043736111111111, 0.8101950000000001, 0.6043791666666667, 0.8100977777777778, 0.6043936111111111, 0.8100383333333332, 0.6044125, 0.8099594444444445, 0.6044475, 0.8098944444444445, 0.6044963888888889, 0.8098377777777779, 0.6044713888888888, 0.8098022222222222, 0.6044644444444445, 0.8097283333333334, 0.6044944444444444, 0.809655, 0.6045127777777778, 0.8096000000000001, 0.6045080555555556, 0.8094927777777777, 0.6045066666666666, 0.80935, 0.6044733333333333, 0.8092911111111112, 0.6044597222222222, 0.8092372222222223, 0.60444, 0.80918, 0.6044630555555556, 0.8091138888888889, 0.6044694444444445, 0.8090133333333334, 0.6044566666666666, 0.8089577777777778, 0.6044455555555556, 0.8088605555555556, 0.604435, 0.8087933333333333, 0.6043802777777778, 0.8087183333333333, 0.604300925, 0.8103611111111112, 0.6043364194444444, 0.8103101833333333, 0.6043729166666667, 0.8102555555555556, 0.6043736111111111, 0.8101950000000001, 0.6044113888888889, 0.8101266666666667, 0.6044522222222223, 0.8100738888888889, 0.6044894444444444, 0.8099744444444444, 0.6044863888888888, 0.8098977777777777, 0.6045, 0.8098266666666667, 0.6045533333333334, 0.8098155555555555, 0.604603611111111, 0.8097583333333335, 0.6046719444444444, 0.8097016666666667, 0.6046313888888889, 0.8096283333333334, 0.6046555555555555, 0.8095477777777779, 0.6046808333333333, 0.8094855555555556, 0.6047972222222222, 0.8094077777777777, 0.6048694444444445, 0.8093938888888889, 0.6048938888888888, 0.8093100000000001, 0.6048625, 0.8092205555555555, 0.6048419444444444, 0.8091666666666667, 0.6048433333333334, 0.8090744444444444, 0.6048436111111111, 0.8090061111111112, 0.6048480555555555, 0.8089577777777778, 0.6046638888888889, 0.8099461111111111, 0.6047305916666667, 0.8098905111111111, 0.6047409638888889, 0.8098040999999999, 0.6047754138888889, 0.8097426111111111, 0.6048057666666666, 0.8096208222222223, 0.6048011111111111, 0.8094833333333333, 0.6047972222222222, 0.8094111111111112, 0.604736111111111, 0.8093583333333334, 0.6046794444444444, 0.8093083333333333, 0.6045797222222222, 0.809195, 0.6044983333333332, 0.809185, 0.6044397222222222, 0.8091833333333333, 0.6043669444444445, 0.8092016666666666, 0.6042775, 0.809215, 0.6042272222222221, 0.8092783333333333, 0.6041805555555555, 0.809321111111111, 0.6041252777777777, 0.80938, 0.6040672222222222, 0.809428888888889, 0.6040325000000001, 0.8095294444444445, 0.6040158333333333, 0.8096133333333333, 0.6040572222222222, 0.8097177777777778, 0.6040855555555555, 0.8097694444444444, 0.6041233333333333, 0.8098544444444444, 0.6042552777777778, 0.8097083333333334, 0.6042388888888889, 0.8097594444444444, 0.6042241666666667, 0.8098711111111112, 0.6042591666666667, 0.8099255555555556, 0.6043252777777778, 0.8099544444444444, 0.6044111111111111, 0.8099644444444445, 0.6043227777777778, 0.8088911111111111, 0.6043802777777778, 0.8087894444444444, 0.6043797222222222, 0.8087166666666668, 0.6043183333333333, 0.8086005555555555, 0.6042861111111111, 0.8085861111111111, 0.6042522222222222, 0.8085655555555555, 0.6042105555555556, 0.8085444444444445, 0.6043858333333334, 0.8101055555555556, 0.6044197222222222, 0.8101211111111111, 0.6044691666666667, 0.8101211111111111, 0.6045191666666667, 0.8101211111111111, 0.6045508333333334, 0.8101333333333334, 0.6045691666666667, 0.8101622222222223, 0.6043594444444444, 0.8102622222222221, 0.6044250000000001, 0.8102644444444445, 0.6045591666666666, 0.8102555555555556, 0.6046258333333333, 0.8102222222222223, 0.604723888888889, 0.8101666666666666, 0.6048247222222222, 0.8100955555555557, 0.60485, 0.8100216666666666, 0.604841111111111, 0.8099366666666666, 0.6048475, 0.8098411111111111, 0.6048508333333333, 0.8097722222222223, 0.6048177777777778, 0.8096727777777779, 0.6048005555555556, 0.8096233333333334, 0.6047669444444443, 0.8095772222222223, 0.6047161111111111, 0.8095461111111111, 0.6047161111111111, 0.8095461111111111, 0.6046197222222222, 0.8094794444444444, 0.6045786111111111, 0.8094350000000001, 0.6044969444444445, 0.8093888888888888, 0.6044583333333333, 0.8093888888888888, 0.604405, 0.8094827777777778, 0.6043419444444444, 0.8095572222222223, 0.6042591666666667, 0.8096711111111111, 0.6042561111111111, 0.8097066666666666, 0.6042377777777778, 0.8097638888888888, 0.6041866666666666, 0.8098733333333333, 0.6041791666666667, 0.8099322222222223, 0.6041633333333334, 0.809995, 0.6041302777777777, 0.8100755555555555, 0.6041558333333333, 0.8101433333333334, 0.6042230555555556, 0.8102205555555555, 0.6043091666666667, 0.8102622222222221, 0.6048057666666666, 0.8096208222222223, 0.6048941666666666, 0.8095833333333333, 0.6049491666666666, 0.8095477777777779, 0.6050528055555555, 0.8094720555555556, 0.6051419444444445, 0.8094627777777779, 0.60522, 0.8095, 0.6052788888888888, 0.8094916666666667, 0.6053511111111111, 0.8094644444444444]

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

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

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

package/src/stories/geospatial.stories.ts

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

@@ -1,69 +0,0 @@
-import { Graph, PointShape } from '@cosmos.gl/graph'
-
-export const allShapes = (): {div: HTMLDivElement; graph: Graph } => {
-  // 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()
-
-  return { div, graph }
-}

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

@@ -1,238 +0,0 @@
-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 = async (): Promise<{div: HTMLDivElement; graph: Graph }> => {
-  // 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()
-      },
-    })
-
-    const imageDataArray = await loadPngImages([swiftUrl, boxUrl, toolboxUrl, legoUrl, sUrl])
-
-    // Set images and their indices
-    graph.setImageData(imageDataArray)
-    graph.setPointImageIndices(imageIndices)
-
-    // 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()
-
-    return { div, graph }
-  } 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

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