@econic/graph-ui

Framework bindings (React, Vue, Svelte) providing declarative component APIs for building 3D graph visualisations.

This is a part of e Econic graph framework.

🚧 Future Package — This package is planned for post-MVP development.

Planned Usage

React

import { Graph, Node, Edge, Group } from '@econic/graph-ui/react';

function NetworkVisualization() {
  const [expanded, setExpanded] = useState(['cluster-a']);

  return (
    <Graph 
      camera={{ distance: 5 }}
      onNodeClick={(id) => console.log('Clicked', id)}
    >
      <Group id="cluster-a" position={[0, 0, 0]} expanded={expanded.includes('cluster-a')}>
        <Node id="a1" position={[-1, 0, 0]}>
          <ServerPanel name="Server 1" />
        </Node>
        <Node id="a2" position={[1, 0, 0]}>
          <ServerPanel name="Server 2" />
        </Node>
      </Group>
      
      <Node id="database" position={[0, -2, 0]}>
        <DatabasePanel />
      </Node>
      
      <Edge from="a1" to="database" />
      <Edge from="a2" to="database" />
    </Graph>
  );
}

Vue

<template>
  <Graph :camera="{ distance: 5 }">
    <Node id="a" :position="[0, 0, 0]">
      <div class="node-label">Node A</div>
    </Node>
    <Edge from="a" to="b" />
  </Graph>
</template>

<script setup>
import { Graph, Node, Edge } from '@econic/graph-ui/vue';
</script>

Svelte

<script>
  import { Graph, Node, Edge } from '@econic/graph-ui/svelte';
</script>

<Graph camera={{ distance: 5 }}>
  <Node id="a" position={[0, 0, 0]}>
    <div class="node-label">Node A</div>
  </Node>
  <Edge from="a" to="b" />
</Graph>

Documentation

See the full documentation for architecture details and API specifications.

License

MIT