MetaboHUB
web-components
Viz Core

Repository

@metabohub:registry=https://forgemia.inra.fr/api/v4/packages/npm/
npm install @metabohub/viz-core
declare module "@metabohub/viz-core";
<script setup lang="js">

import { NetworkComponent } from "@metabohub/viz-core";
import { ref } from "vue";

const nodes = {
	A: {
		id: 'A',
		x: 50,
		y: 50
	},
	B: {
		id: 'B',
		x: 100,
		y: 100
	}
}

const links = [
	{
		source: nodes.A,
		target: nodes.B,
		id: ''
	}
]
const network = ref({ id: 'test', nodes: nodes, links: links });
const networkStyle = ref({ nodeStyles: {}, linkStyles: {} });

</script>

<template>
	<NetworkComponent :network="network" :graphStyleProperties="networkStyle">
	</NetworkComponent>
	<br />

</template>

<style>
@import "@metabohub/viz-core/dist/style.css";

</style>
<script setup lang="ts">
import type { Network } from "@metabohub/viz-core/src/types/Network";
import type { GraphStyleProperties } from "@metabohub/viz-core/src/types/GraphStyleProperties";

import { NetworkComponent } from "@metabohub/viz-core";
import { ref } from "vue";

const nodes = {
	A: {
		id: 'A',
		x: 50,
		y: 50
	},
	B: {
		id: 'B',
		x: 100,
		y: 100
	}
}

const links = [
	{
		source: nodes.A,
		target: nodes.B,
		id: ''
	}
]
const network = ref<Network>({ id: 'test', nodes: nodes, links: links });
const networkStyle = ref<GraphStyleProperties>({ nodeStyles: {}, linkStyles: {} });

</script>

<template>
	<NetworkComponent :network="network" :graphStyleProperties="networkStyle">
	</NetworkComponent>
</template>

<style>
@import "@metabohub/viz-core/dist/style.css";
</style>

{
  "graph": {
    "id": "example",
    "nodes": {
      "A": {
        "id": "A",
        "label": "Node A",
        "metadata": {
          "position": {
            "x": 50,
            "y": 50
          }
        }
      },
      "B": {
        "id": "B",
        "label": "Node B",
        "metadata": {
          "position": {
            "x": 100,
            "y": 100
          }
        }
      }
    },
    "edges": [
      {
        "id": "AB",
        "source": "A",
        "target": "B",
        "label": "Edge AB"
      }
    ]
  }
}
import { importNetworkFromURL } from "@metabohub/viz-core";
const network = ref<Network>();
cont networkStyle = ref<GraphStyleProperties>();
importNetworkFromURL('/example.json', network, networkStyle);
const nodes = {
	A: {
		id: 'A',
		x: 50,
		y: 50,
		classes: ['classNode1']
	},
	B: {
		id: 'B',
		x: 100,
		y: 100,
		classes: ['classNode2']
	}
}

const links = [
	{
		source: nodes.A,
		target: nodes.B,
		id: '',
		class: ['classLink1']
	}
]
const networkStyle = ref({
	nodeStyles: {
		classNode1: {
			fill: 'red',
			stroke: 'gray',
			strokeWidth: 2,
		}, classNode2: {
			fill: 'blue',
			stroke: 'purple',
			strokeWidth: 4,
			shape: 'circle',
			width: 20,
			height: 20
		}
	},
	linkStyles: {
		classLink1: {
			stroke: 'red',
			strokeWidth: 2
		}, class2: {
			stroke: 'blue',
			strokeWidth: 2,
			opacity: 0.5
		}
	}
});

const network = ref({ id: 'test', nodes: nodes, links: links });
{
  "graph": {
    "id": "example",
    "metadata": {
      "style": {
        "nodeStyles": {
          "classNode1": {
            "fill": "red",
            "stroke": "gray",
            "strokeWidth": 2
          },
          "classNode2": {
            "fill": "blue",
            "stroke": "purple",
            "strokeWidth": 4,
            "shape": "circle",
            "width": 20,
            "height": 20
          }
        },
        "linkStyles": {
			"classLink1": {
				"stroke": "red",
				"strokeWidth": 2
			},
			"classLink2": {
				"stroke": "blue",
				"strokeWidth": 2,
				"opacity": 0.5
			}
		}
      }
    },
const { undo, redo } = createUndoFunction(network);
const { undo, redo } = createUndoFunction(network, 10);
const { undo, redo, pause, commit, resume } = createUndoFunction(network);

const onDragStart = () => {
	pause();
}

const onDragEnd = () => {
	resume();
	commit();
}
<NetworkComponent
 :network="network"
 :graphStyleProperties="networkStyle"
 @dragStart="onDragStart"
 @dragEnd="onDragEnd"
>
</NetworkComponent>
<template>
	<NetworkComponent
		:network="network"
		:graphStyleProperties="networkStyle"
	>
		<yourComponent />
	</NetworkComponent>
</template>