DRAFT: Start port to luma.gl

.eslintrc

@@ -22,7 +22,17 @@
     "import/no-default-export": "error",
     "import/prefer-default-export": 0,
     "import/first": ["error", "absolute-first"],
-    "import/order": ["error", {"groups": ["builtin", "external", "parent", "sibling", "index", "object"]}],
+    "import/order": ["error", 
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object"],
+        "pathGroups": [
+          {
+            "pattern": "@/**",
+            "group": "internal"
+          }
+        ],
+      }
+    ],
     "comma-dangle": ["error", {
       "arrays": "always-multiline",
       "objects": "always-multiline",

.gitignore

@@ -3,4 +3,5 @@
 node_modules
 dist
 yarn.lock
-.eslintcache
+.eslintcache
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from "@storybook/html-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/html-vite",
+    options: {},
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark,
+});

.storybook/preview.ts

@@ -0,0 +1,26 @@
+import type { Preview } from "@storybook/html";
+import { themes } from '@storybook/theming';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      theme: themes.dark,
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: '#fff' },
+        { name: 'dark', value: '#192132' },
+      ],
+    },
+  },
+};
+
+export default preview;

README.md

@@ -1,17 +1,21 @@
+
 <p align="center" style="color: #444">
   <h1 align="center">🌌 Cosmos</h1>
 </p>
 <p align="center" style="font-size: 1.2rem;">GPU-accelerated Force Graph</p>
 
-Cosmos is a WebGL Force Graph layout algorithm and rendering engine. All the computations and drawing are happening on the GPU in fragment and vertex shaders avoiding expensive memory operations. 
+**Cosmos** is a WebGL Force Graph layout algorithm and rendering engine. All the computations and drawing are happening on the GPU in fragment and vertex shaders, avoiding expensive memory operations.
 
-It enables real-time simulation of network graphs consisting of hundreds of thousands of nodes and edges on modern hardware.
+It enables real-time simulation of network graphs consisting of hundreds of thousands of points and links on modern hardware.
 
-![](https://user-images.githubusercontent.com/755708/173392407-9b05cbb6-d39e-4c2c-ab41-50900cfda823.mp4)
+<img src="https://user-images.githubusercontent.com/755708/173392407-9b05cbb6-d39e-4c2c-ab41-50900cfda823.mp4" autoplay controls>
+</img>
 
 [📺 Comparison with other libraries](https://www.youtube.com/watch?v=HWk78hP8aEE)
 
-[🎮 Try Cosmos on CodeSandbox](https://codesandbox.io/s/cosmos-example-fmuf1x?file=/src/index.ts)
+[🎮 Try Cosmos on CodeSandbox](https://stackblitz.com/edit/how-to-use-cosmos?file=src%2Fmain.ts)
+
+---
 
 ### Quick Start
 
@@ -21,56 +25,89 @@ Install the package:
 npm install @cosmograph/cosmos
 ```
 
-Get the data, [configure](https://github.com/cosmograph-org/cosmos/wiki/Cosmos-configuration) the graph and run the simulation:
+Configure the graph, set data, and run the simulation:
+
 ```javascript
-import { Graph } from '@cosmograph/cosmos'
-import { nodes, links } from './data'
+import { Graph } from '@cosmograph/cosmos';
+import { pointPositions, links } from './data';
 
-const canvas = document.querySelector('canvas')
+const canvas = document.querySelector('canvas');
 const config = {
   simulation: {
     repulsion: 0.5,
   },
   renderLinks: true,
-  linkColor: link => link.color,
-  nodeColor: node => node.color,
   events: {
-    onClick: node => { console.log('Clicked node: ', node) },
+    onClick: (pointIndex) => {
+      console.log('Clicked point index: ', pointIndex);
+    },
   },
-  /* ... */
-}
+};
 
-const graph = new Graph(canvas, config)
+const graph = new Graph(canvas, config);
 
-graph.setData(nodes, links)
+graph.setPointPositions(pointPositions);
+graph.setLinks(links);
+graph.render();
 ```
 
+- **`pointPositions`**: An array of `[x1, y1, x2, y2, ..., xN, yN]`.
+- **`links`**: An array of `[sourceIndex1, targetIndex1, ..., sourceIndexN, targetIndexN]`.
+
 > **Note**
-> If your canvas element has no width and height styles (either CSS or inline) Cosmos will automatically set them to 100%.
+> If your canvas element has no width and height styles (either CSS or inline), Cosmos will automatically set them to 100%.
+
+---
 
-> **Warning**
-> If you're going to create a new graph within the same HTML canvas element that already has a graph, **destroy** the previous graph using `graph.destroy()` to prevent unexpected glitches.
+### What's New in v2.0?
 
-Check out the [Wiki](https://github.com/cosmograph-org/cosmos/wiki) for more information on 🛠 [Configuration](https://github.com/cosmograph-org/cosmos/wiki/Cosmos-configuration) and ⚙️ [API Reference](https://github.com/cosmograph-org/cosmos/wiki/API-Reference).
+Cosmos v2.0 introduces significant improvements in performance and data handling:
+
+- Enhanced data structures with WebGL-compatible formats.
+- Methods like `setPointPositions` and `setLinks` replace `setData` for improved efficiency.
+- Direct control over point and link attributes via arrays (e.g., colors, sizes, widths).
+- Updated event handling based on indices instead of objects.
+
+Check the [Migration Guide](https://github.com/cosmograph-org/cosmos/tree/next/cosmos-2-0-migration-notes.md) for details.
+
+---
 
 ### Examples
-- [Basic Set-Up](https://codesandbox.io/s/cosmos-example-fmuf1x?file=/src/index.ts)
-- [Adding Node Labels](https://codesandbox.io/s/cosmos-node-labels-hkfplk) (via [`@interacta/css-labels`](https://www.npmjs.com/package/@interacta/css-labels))
+
+- [Basic Set-Up](https://stackblitz.com/edit/how-to-use-cosmos?file=src%2Fmain.ts)
+
+---
 
 ### Showcase (via [cosmograph.app](https://cosmograph.app))
-- [Silk Road Case: Bitcoin Transactions](https://cosmograph.app/run/?data=https://cosmograph.app/data/184R7cFG-4lv.csv) ([📄 Read about the case](https://medium.com/@cosmograph.app/visualizing-darknet-6846dec7f1d7))
-- [ABACUS Shell](https://cosmograph.app/run/?&decay=100000&link-distance=1&link-spring=2&data=https://cosmograph.app/data/ABACUS_shell_hd.csv) ([source](http://sparse.tamu.edu/Puri/ABACUS_shell_hd))
+
+- [Silk Road Case: Bitcoin Transactions](https://cosmograph.app/run/?data=https://cosmograph.app/data/184R7cFG-4lv.csv) ([📄 Read more](https://medium.com/@cosmograph.app/visualizing-darknet-6846dec7f1d7))
+- [ABACUS Shell](https://cosmograph.app/run/?data=https://cosmograph.app/data/ABACUS_shell_hd.csv) ([source](http://sparse.tamu.edu/Puri/ABACUS_shell_hd))
 - [The MathWorks, Inc: symmetric positive definite matrix](https://cosmograph.app/run/?data=https://cosmograph.app/data/Kuu.csv) ([source](https://sparse.tamu.edu/MathWorks/Kuu))
-- [4 Tower Silo](https://cosmograph.app/run/?data=https://cosmograph.app/data/pkustk10.csv) ([source](https://sparse.tamu.edu/Chen/pkustk10))
-- [Jacobian from Bank of Canada ‘jan99’ model](https://cosmograph.app/run/?data=https://cosmograph.app/data/jan99jac040sc.csv) ([source](https://sparse.tamu.edu/Hollinger/jan99jac040sc))
+
+---
 
 ### Known Issues
-Starting from version 15.4, iOS has stopped supporting the key WebGL extension powering our Many-Body force implementation (EXT_float_blend). We're trying to figure out why that happened and hope to find a way to solve the problem in the future.
+
+- Starting from version 15.4, iOS has stopped supporting the key WebGL extension powering our Many-Body force implementation (`EXT_float_blend`). We're investigating this issue and exploring solutions.
+
+---
+
+### Documentation
+
+- 🛠 [Configuration](https://github.com/cosmograph-org/cosmos/wiki/Cosmos-v2-(Beta-version)-configuration)
+- ⚙️ [API Reference](https://github.com/cosmograph-org/cosmos/wiki/Cosmos-v2-(Beta-version)-API-Reference)
+- 🚀 [Migration Guide](https://github.com/cosmograph-org/cosmos/tree/next/cosmos-2-0-migration-notes.md)
+
+---
 
 ### License
-CC-BY-NC-4.0
 
-Cosmos is free non-commercial usage. If you're a scientist, artist, educator, journalist, student, ..., we would love to hear about your project and how you use Cosmos! If you want to use it in a commercial project, please reach out to us.
+**CC-BY-NC-4.0**
+
+Cosmos is free for non-commercial usage. If you're a scientist, artist, educator, journalist, or student, we'd love to hear how you're using Cosmos! For commercial projects, please [reach out](mailto:[email protected]).
+
+---
 
 ### Contact
+
 [📩 [email protected]](mailto:[email protected])

cosmos-2-0-migration-notes.md

@@ -0,0 +1,79 @@
+### Migration Guide @cosmograph/cosmos v2.0 
+
+#### Introduction
+
+Welcome to the updated @cosmograph/cosmos library! Version 2.0 introduces significant improvements in data handling and performance, marking a major milestone for the library. This guide will help you transition to the new version smoothly.
+
+#### Key Changes in Data Handling
+
+This update is centered on enhancing data performance by utilizing formats directly compatible with WebGL. Since WebGL operates with buffers and framebuffers created from arrays of numbers, we have introduced new methods to handle data more efficiently.
+
+#### Replacing `setData`
+
+The `setData` method has been replaced with `setPointPositions` and `setLinks`. These new methods accept arrays of numbers, which are directly used to create WebGL textures.
+
+**Before:**
+```js
+graph.setData(
+  [{ id: 'a' }, { id: 'b' }], // Nodes
+  [{ source: 'a', target: 'b' }] // Links
+);
+```
+
+**After:**
+```js
+graph.setPointPositions([
+  400, 400, // x and y of the first point
+  500, 500, // x and y of the second point
+]);
+graph.setLinks([
+  0, 1 // Link between the first and second point
+]);
+```
+
+#### Configuration Updates
+
+Accessor functions for styling such as `nodeColor`, `nodeSize`, `linkColor`, `linkWidth`, and `linkArrows`, are eliminated. You can now set these attributes directly using arrays of numbers.
+
+**Old Method for Setting Node Color:**
+```js
+config.nodeColor = node => node.color;
+```
+
+**New Method for Setting Point Colors:**
+```js
+graph.setPointColors([
+  0.5, 0.5, 1, 1, // r, g, b, alpha for the first point
+  0.5, 1, 0.5, 1, // r, g, b, alpha for the second point
+]);
+```
+
+If you don't set point colors, sizes, link colors, widths, or arrows, default values from the new config parameters (`defaultPointColor`, `defaultPointSize`, `defaultLinkColor`, `defaultLinkWidth`, and `defaultLinkArrow`) will be applied.
+
+**Example:**
+```js
+const config = {
+  defaultPointColor: 'navajowhite'
+};
+```
+
+**Modifying Event Handling**
+
+Event handling now focuses on point indices instead of node objects.
+
+**Old Event Handling:**
+```js
+config.events.onNodeMouseOver = (node, index, pos) => console.log(`Hovered over node ${node.id}`);
+```
+
+**New Event Handling:**
+```js
+config.events.onPointMouseOver = (index, pos) => console.log(`Hovered over point at index ${index}`);
+```
+
+**Summary of Additional Changes**
+
+- **Terminology Update:** "Node" is now "Point," but "Link" remains unchanged.
+- **API Modifications:** All methods that focused on node objects have been updated or replaced to handle indices.
+- **Manual Rendering:** After setting data or updating point/link properties, remember to run `graph.render()` to update WebGL textures and render the graph with the new data.
+