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

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

@@ -1,61 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { generateData } from './data-gen'
-
-export const pinnedPoints = (): { graph: Graph; div: HTMLDivElement} => {
-  const div = document.createElement('div')
-  div.style.height = '100vh'
-  div.style.width = '100%'
-  div.style.position = 'relative'
-
-  const infoPanel = document.createElement('div')
-  infoPanel.textContent = 'White points are pinned. Try to move them.'
-  Object.assign(infoPanel.style, {
-    position: 'absolute',
-    top: '20px',
-    left: '20px',
-    color: 'white',
-    fontSize: '14px',
-  })
-  div.appendChild(infoPanel)
-
-  const graph = new Graph(div, {
-    spaceSize: 4096,
-    backgroundColor: '#2d313a',
-    curvedLinks: true,
-    enableDrag: true,
-    simulationLinkSpring: 3.1,
-    simulationRepulsion: 150,
-    simulationGravity: 0.05,
-    simulationDecay: 10000000,
-    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
-  })
-
-  const { pointPositions, links, pointColors } = generateData(100)
-
-  const pinnedIndices = [0, 1, 2, 3, 4, 5]
-  const numPoints = pointPositions.length / 2
-
-  const colors = new Float32Array(pointColors)
-  for (const pinnedIndex of pinnedIndices) {
-    colors[pinnedIndex * 4] = 1.0
-    colors[pinnedIndex * 4 + 1] = 1.0
-    colors[pinnedIndex * 4 + 2] = 1.0
-    colors[pinnedIndex * 4 + 3] = 1.0
-  }
-
-  const pointSizes = new Float32Array(numPoints).fill(12)
-  for (const pinnedIndex of pinnedIndices) {
-    pointSizes[pinnedIndex] = 30
-  }
-
-  graph.setPointPositions(pointPositions)
-  graph.setPointColors(colors)
-  graph.setPointSizes(pointSizes)
-  graph.setLinks(links)
-  graph.setPinnedPoints(pinnedIndices)
-
-  graph.zoom(0.8)
-  graph.render()
-
-  return { div, graph }
-}

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

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

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

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

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

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

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

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

@@ -1,50 +0,0 @@
-import { Graph, GraphConfigInterface } from '@cosmos.gl/graph'
-
-export const quickStart = (): { graph: Graph; div: HTMLDivElement} => {
-  const div = document.createElement('div')
-  div.style.height = '100vh'
-  div.style.width = '100%'
-
-  const config: GraphConfigInterface = {
-    spaceSize: 4096,
-    backgroundColor: '#2d313a',
-    pointDefaultColor: '#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()
-
-  return { div, graph }
-}

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

@@ -1,25 +0,0 @@
-import { GraphConfigInterface } from '@cosmos.gl/graph'
-
-export const config: GraphConfigInterface = {
-  spaceSize: 4096,
-  backgroundColor: '#2d313a',
-  pointSize: 4,
-  pointDefaultColor: '#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

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

@@ -1,92 +0,0 @@
-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} => {
-  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)
-
-  return { div, graph }
-}

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

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

@@ -1,131 +0,0 @@
-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 { pinnedPoints } from './beginners/pinned-points'
-
-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'
-import pinnedPointsStoryRaw from './beginners/pinned-points/index?raw'
-import pinnedPointsStoryDataGenRaw from './beginners/pinned-points/data-gen.ts?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.graph?.destroy()
-    }
-  },
-  render: (args, { loaded: { data } }) => {
-    const story = pointLabels(data.performances)
-    args.graph = story.graph
-    return story.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 },
-    ],
-  },
-}
-
-export const PinnedPoints: Story = {
-  ...createStory(pinnedPoints),
-  name: 'Pinned Points',
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: pinnedPointsStoryRaw },
-      { name: 'data-gen.ts', code: pinnedPointsStoryDataGenRaw },
-    ],
-  },
-}
-
-// eslint-disable-next-line import/no-default-export
-export default meta

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

@@ -1,51 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { createCosmos } from '../../create-cosmos'
-import { generateMeshData } from '../../generate-mesh-data'
-import { PolygonSelection } from './polygon'
-
-export const polygonSelection = (): {div: HTMLDivElement; graph: Graph; destroy: () => void } => {
-  const nClusters = 25
-  const { pointPositions, pointColors, pointClusters } = generateMeshData(150, 150, nClusters, 1.0)
-
-  const { div, graph } = 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)
-    }
-  }
-
-  return { div, graph, destroy }
-}