Vue yFiles Component

This is a Vue 3 component that wraps the yFiles graph visualization library. It implements the generic graph visualization API of Qwiery and thus allows an in-place replacement (betweeen Cytoscape, Ogma, yFiles and GoJs).

Note that yFiles is a commercial component and you need to obtain a license to use it.

If you don't have a license you can use the free Cytoscape version. It implements the same API referred above.

Installation

If have a Vue 3 application, install the component with

npm i @orbifold/vue-yfiles

and make sure you also have the yFiles library installed. You can download it from the yWorks website.

Add the component to your app via the usual plugin mechanism:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import cyto from '@orbifold/vue-yfiles'
const app = createApp(App)
app.use(cyto)
app.mount('#app')

If you don't have a Vue app, use

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm i <the path to the yFiles tgz package>
npm i @orbifold/vue-yfiles

and then add the component to your app via the prescription above.

If you are using Nuxt, the procedure is similar. You have to create a plugin in the plugins folder and use the following:

import yFilesView from "@orbifold/vue-yfiles";
import { yFilesUtils } from "@orbifold/vue-yfiles";
export default defineNuxtPlugin((nuxtApp) => {
	nuxtApp.vueApp.use(yFilesView);
	return {
		provide: {
			yfiles: yFilesUtils,
		},
	};
});

The provider is not necessary but it allows you to use the yFilesUtils in your components via $yfiles.

License

To assign the yFiles license and create a component with this library, use something like the following:

<template>
  <div>
    <GraphViewer class="graphViewer" ref="viewer" :license="license"  />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { type IGraphView, Utils } from "@orbifold/utils";
import { GraphViewer } from "@orbifold/vue-yfiles";
 

const viewer = ref(null);
 

let view: IGraphView;
let license = ref<any>(null);
const lic = JSON.parse(import.meta.env.VITE_YFILES_LICENSE);
 license.value = lic;


onMounted(() => {
  view = <IGraphView>(<unknown>viewer.value);
  setTimeout(() => {
    view.setStyle("default");
    loadSomething();
  }, 600);
});
function loadSomething() {
  const g = {
    nodes: [
      { id: "a", name: "A" },
      { id: "b", name: "B" },
      { id: "c", name: "C" },
      { id: "d", name: "D" },
      { id: "e", name: "E" },
    ],
    edges: [{ sourceId: "a", targetId: "e", name: "A to E", id: Utils.id() }],
  };

  view.loadGraph(g);
  view.layout();
}
</script>

<style  >
.graphHost {
  z-index: 0;
  height: 85vh;
  width: 100vw;
  background-color: rgb(155, 37, 107);
  outline: none;
}
</style>

There are a few important remarks here:

• you need a license and you need to have yFiles installed. Make the license value is set before onMounted, otherwise the component will not be able to load the license.
• the license can be assigned as a JSON object or via the .env file as shown. Note that the VITE_ prefix is required if you use Vite.
• the style is necessary, if not specified the size of the canvas will be 0 and you won't see anything

In case you are not sure, the yFiles license looks similar to this:

const license = {
    "company": "Your Corp",
    "date": "2021-09-01",
    "distribution": "global",
    "domains": [ "localhost"],
    "key": "your key",
    ...

See the demo application (npm run dev) for a complete example.

IGraphView

This wrapper implements the Qwiery IGraphView interface and it means you can transparently exchange it with other implementations. The yFiles and Linkurious Ogma implementations are more advanced but are not free.

Build and Testing

Clone the repo, install things (npm i). To build the library run npm run build and to test it run npm run test.

Sample Application

You can run the sample application with npm run dev and then open http://localhost:5173 (or whatever Vite shows in the console) in your browser.

If you include the Qwiery Graph package (npm i @orbifold/graphs) you can use diverse graph generators to create graphs and then visualize them with this component.

For instance

import { Graph } from "@orbifold/graphs";

const g = Graph.create("erdos");
const viewe = <IGraphView>viewer.value; //see snippet above
	viewer.loadGraph(g);
	viewer.layout(); //organica layout by default

Graph structure

The loadGraph method expects a JSON graph:

const g = {
	nodes: [
		{ id: 'a', name: 'A' },
		{ id: 'b', name: 'B' }
	],
	edges: [
		{ sourceId: 'a', targetId: 'b', name: 'A to B' },

	]
};
cy.loadGraph(g)

The name property is optional and will be used as the label of the node or edge. The style of the graph defines whether the label is shown or not.

There are many different graph structures out there and if you wish to convert or use them, see the Qwiery Graph package.

Feedback

This component is part of the Qwiery framework to help jump-start your graph visualizations. It's neither bug-free nor complete and
if you find something isn't as expected you can report it or contact us:

• X
• Email
• Orbifold Consulting

Consulting and Custom Development

You can use any of the links above to contact us with respect to custom development and beyond. We have more than 20 years experience with everything graphs.

License

MIT License

Copyright (c) 2024 Orbifold B.V.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.