Not rendering any nodes

[chris-aeviator]

When using graspologic, and following the example code, I can not get any rendering happening.

import React, { useState, useCallback, useMemo } from 'react'
import colorizer from './data/categoricalColorizer.ts'
import {
        Axes,
        GraphView,
        Camera,
        HighlightHoveredNode,
        HandleNodeClicks,
        NodeSetHighlight,
        Edges,
        Nodes,
} from '@graspologic/react'
import {
        SettingsPane,
        DisplaySettings,
        EdgeSettings,
        NodeSettings,
} from '@graspologic/render-controls-react'

import { NodeImpl, EdgeImpl } from '@graspologic/graph'

export default  () => {
  let data = {
                                        nodes: [
                                                {
                                                        group: '1',
                                                        id: 'A',
                                                        label: 'A',
                                                        weight: 10.0,
                                                        x: -71.6570947858611,
                                                        y: 100.9663430468361,
                                                },
                                                {
                                                        group: '2',
                                                        id: 'B',
                                                        label: 'B',
                                                        weight: 50.0,
                                                        x: 59.56856268696598,
                                                        y: -96.58517255185609,
                                                },
                                                {
                                                        group: '3',
                                                        id: 'C',
                                                        label: 'C',
                                                        weight: 100.0,
                                                        x: -73.72442078702332,
                                                        y: -120.15483189996596,
                                                },
                                                {
                                                        group: '4',
                                                        id: 'D',
                                                        label: 'D',
                                                        weight: 1.0,
                                                        x: -50.72442078702332,
                                                        y: -30.15483189996596,
                                                },
                                        ],
                                        edges: [
                                                {
                                                        source: 'B',
                                                        target: 'A',
                                                        weight: 0.5,
                                                },
                                                {
                                                        source: 'B',
                                                        target: 'C',
                                                        weight: 0.25,
                                                },
                                                {
                                                        source: 'B',
                                                        target: 'D',
                                                        weight: 1.0,
                                                },
                                        ],
                }


        // A function which takes a "group" property from a node and returns a color
        const [nodeIds, setNodeIds] = useState([])
        const handleVertexClick = useCallback(
                (id: string | undefined) => {
                        console.log('click', id)
                        if (id) {
                                if (nodeIds.indexOf(id) === -1) {
                                        setNodeIds([...nodeIds, id])
                                } else {
                                        setNodeIds(nodeIds.filter(v => v !== id))
                                }
                        }
                },
                [nodeIds, setNodeIds],
        )

        return (
                <GraphView
      style={{ width: 600, height: 300 }}
      data={data}
      colorizer={colorizer}
    >
                        { /* Displays a set of Axes on the graph */}
                        <Axes />

                        { /* Enables controlling of certain aspects of the camera */}
                        <Camera interactive />

                        { /* Enables highlighting of the node that is being hovered over */}
                        <HighlightHoveredNode />

                        { /* Enables handling of node click events */}
                        <HandleNodeClicks onClick={handleVertexClick} />

                        {/* Highlights the given set of node ids */}
                        <NodeSetHighlight vertexIds={nodeIds} />

                        { /* Controls rendering of edges */ }
                        <Edges minWidth={5} maxWidth={5} alpha={1}/>

                        { /* Controls rendering of nodes */ }
                        <Nodes minRadius={5} maxRadius={5} />

                        {/* Adds a settings pane that allows the user to configure the graph renderer on the fly */}
                        <SettingsPane>

                                {/* Adds a display settings section to the settings pane */}
                                <DisplaySettings />

                                {/* Adds a node settings section to the settings pane */}
                                <NodeSettings />

                                {/* Adds a edge settings section to the settings pane */}
                                <EdgeSettings />
                        </SettingsPane>
                </GraphView>
        )
}

This is inside my App.js created with create-react-scripts