@cosmos.gl/graph 2.4.0 → 2.5.0

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,61 @@
+import { Graph, GraphConfigInterface } from '@cosmos.gl/graph'
+import { generateData } from './data-generator'
+import './style.css'
+
+export const linkHovering = (): { div: HTMLDivElement; graph: Graph } => {
+  const data = generateData()
+  const infoPanel = document.createElement('div')
+
+  // Create div container
+  const div = document.createElement('div')
+  div.style.height = '100vh'
+  div.style.width = '100%'
+  div.style.position = 'relative'
+
+  // Configure graph
+  const config: GraphConfigInterface = {
+    backgroundColor: '#2d313a',
+    scalePointsOnZoom: true,
+    linkArrows: false,
+    curvedLinks: true,
+    enableSimulation: false,
+    hoveredLinkWidthIncrease: 4,
+    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
+
+    onLinkMouseOver: (linkIndex: number) => {
+      infoPanel.style.display = 'block'
+      infoPanel.textContent = `Link ${linkIndex}`
+    },
+
+    onLinkMouseOut: () => {
+      infoPanel.style.display = 'none'
+    },
+  }
+
+  // Create graph instance
+  const graph = new Graph(div, config)
+
+  // Set data
+  graph.setPointPositions(data.pointPositions)
+  graph.setPointColors(data.pointColors)
+  graph.setPointSizes(data.pointSizes)
+  graph.setLinks(data.links)
+  graph.setLinkColors(data.linkColors)
+  graph.setLinkWidths(data.linkWidths)
+
+  // Render graph
+  graph.zoom(0.9)
+  graph.render()
+
+  infoPanel.style.cssText = `
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    color: white;
+    font-size: 14px;
+    display: none;
+  `
+  div.appendChild(infoPanel)
+
+  return { div, graph }
+}

package/src/stories/beginners/link-hovering/style.css

@@ -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/quick-start.ts

@@ -18,7 +18,8 @@ export const quickStart = (): { graph: Graph; div: HTMLDivElement} => {
     fitViewPadding: 0.3, // centers the graph width padding of ~30% of screen
     rescalePositions: true, // rescale positions
     enableDrag: true, // enable dragging points
-    onClick: pointIndex => { console.log('Clicked point index: ', pointIndex) },
+    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>',
   /* ... */
   }

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

@@ -22,40 +22,38 @@ export const removePoints = (): { graph: Graph; div: HTMLDivElement} => {
 
   const graph = new Graph(graphDiv, {
     ...config,
-    onClick: (i): void => {
-      if (i !== undefined) {
-        // 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) ||
+    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)
+      // 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)
     },
   })

package/src/stories/beginners.stories.ts

@@ -6,6 +6,7 @@ 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'
@@ -19,6 +20,9 @@ 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> = {
@@ -96,5 +100,18 @@ export const RemovePoints: Story = {
     ],
   },
 }
+
+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

@@ -17,10 +17,8 @@ export const polygonSelection = (): {div: HTMLDivElement; graph: Graph; destroy:
     pointSize: 8,
     backgroundColor: '#1a1a2e',
     pointGreyoutOpacity: 0.2,
-    onClick: (index: number | undefined): void => {
-      if (index === undefined) {
-        graph.unselectPoints()
-      }
+    onBackgroundClick: (): void => {
+      graph.unselectPoints()
     },
   })
 

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

@@ -194,14 +194,13 @@ export const imageExample = async (): Promise<{div: HTMLDivElement; graph: Graph
       renderHoveredPointRing: true,
 
       // Add click handler for point and background selection
-      onClick: (pointIndex: number | undefined): void => {
-        if (pointIndex !== undefined) {
-          // Use built-in functionality to select the clicked point and its neighbors
-          graph.selectPointByIndex(pointIndex, true)
-        } else {
-          // Clear selection when clicking on background
-          graph.unselectPoints()
-        }
+      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()
       },
     })
 

package/src/variables.ts

@@ -14,18 +14,21 @@ export const defaultConfigValues = {
   spaceSize: 8192,
   pointSizeScale: 1,
   linkWidthScale: 1,
-  arrowSizeScale: 1,
+  linkArrowsSizeScale: 1,
   renderLinks: true,
   curvedLinks: false,
   curvedLinkSegments: 19,
   curvedLinkWeight: 0.8,
   curvedLinkControlPointDistance: 0.5,
-  arrowLinks: false,
+  linkArrows: false,
   linkVisibilityDistanceRange: [50, 150],
   linkVisibilityMinTransparency: 0.25,
   hoveredPointCursor: 'auto',
+  hoveredLinkCursor: 'auto',
   renderHoveredPointRing: false,
   hoveredPointRingColor: 'white',
+  hoveredLinkColor: undefined,
+  hoveredLinkWidthIncrease: 5,
   focusedPointRingColor: 'white',
   focusedPointIndex: undefined,
   useClassicQuadtree: false,