dash14 / v-network-graph Goto Github PK

Hi, really appreciate your amazing work!

I'm using Vue3 with Typescript and I can't reproduce this example about d3-force.

anyway, VSCode didn't show any error after importing v-network-graph/force-layout (the interface is reachable I guess), but the compilation failed when I run npm run serve.

here's the full error message:

 ERROR  Failed to compile with 1 error

This dependency was not found:

* v-network-graph/force-layout in ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--15-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/DiagramContainer.vue?vue&type=script&lang=ts

To install it, you can run: npm install --save v-network-graph/force-layout

thanks for reviewing this problem!

Hi,

Very nice library!
I just wonder if it is possible to have arrows on the edges to indicate the flow?

kr,
Filip.

Is it possible to have a different force configuration for different nodes/edges?

Hi,

when using your awesome library with TS, I run into a warning in my IDE because of missing type declarations.
I'm using the RecursivePartial to properly type the main configuration. And since it is not referenced in the index.d.ts TS does not know the type declarations.

Is it possible to add common/common.ts to the exported type information?

// @ts-ignore because of Cannot find module 'v-network-graph/lib/types/common/common' or its corresponding type declarations.
import { RecursivePartial } from 'v-network-graph/lib/types/common/common'
...
const mainConfig: UnwrapNestedRefs<RecursivePartial<Configs>> = reactive({})

I noticed that the node:pointerup event will only fire if you pressed the mouse button on that same node. Meaning, if you have nodes A and B, and press down mouse button on node A, and then move to node B and release mouse button over node B, you will get node:pointerdown on node A but no node:pointerup at all.

The node:pointerover will also not fire when hovering a node (B) while holding the mouse button if it was pressed over another node (A).

Is this intended? Would it be possible to have these events fired in all cases?

I am trying to implement a way to create an edge between 2 nodes using the mouse (dragging from a node to an other) but this is preventing me from finding out what the destination node is (when releasing the mouse button).

Thanks

Hello, i noticed that coordinates translation example, that worked in rev previous to 0.5.3, now is not working.

Hi,
Can you enhance this example:
https://dash14.github.io/v-network-graph/examples/appearance.html#change-the-appearance-of-each-node-and-edge

by adding "Add" and "Remove" nodes like in this example:
https://dash14.github.io/v-network-graph/examples/operation.html#add-remove-network-elements

thanks!

Was wondering if there is a provision to add this to Vue 2 projects

https://dash14.github.io/v-network-graph/getting-started.html
it says what needs to be added to main.js here it is

But this construction using in Vue 2
In Vue 3 need using this construction

import { createApp } from 'vue'
import App from './App.vue'
import VNetworkGraph from "v-network-graph"
import "v-network-graph/lib/style.css"

createApp(App).use(VNetworkGraph).mount('#app')  

it's my first time using Vue 3 and I didn't immediately understand why nothing works for me and what to do with it))
please fix this error and it would be great to sign the names of the files in which you want to make these imports (main.js) I think junior developers will appreciate it)

P.s. if an entry in main.js was used as in vue 2, does this mean that v-network-graph will work in vue 2 as well?

Since you used an own implementation of the svg-pan-zoom library and haven't hosted it anywhere on the public npm repos, I can't access the code, because our proxy repository doesn't allow to access npm packages directly from github pages (for good reason though).

Is it possible to

• deploy your own svg-pan-zoom package,
• merge your changes into the real svg-pan-zoom codebase or
• included it in the v-network-graph package?

hi, I am wondering if there is any way I can set the z-index for specific nodes and edges?
(ex. I want the node to be 'z-index=999' when I trigger the hover event)
thx!

hello and thanks a lot for the library
I want to switch to your library
I looked at the functionality and almost cried because everything was implemented at once. "out of the box"
On the current library, I had to write everything myself.
I didn't find only options for the two features I needed

1. need the ability to insert an image into the node, instead of filling in color (for example, a photo of a person)
2. tooltip displaying additional information about the node (for example, right click opens the context menu)
3. algorithm for finding the shortest path to node (A*, Dijkstra's algorithm)

thx for your response!

Hi .
is exist a version of project for Vue 2.x version?

Hi @dash14,
I don't know if I configure something wrongly, but I can't set the minimum zoom level. That's my config regarding zoom:

zoomEnabled: true, // whether the zoom is enabled or not.     default: true
minZoomLevel: 0.5, // minimum zoom level.                     default: 0.1
maxZoomLevel: 2, // maximum zoom level.                     default: 64

You can also see in one of your examples (https://dash14.github.io/v-network-graph/examples/layout.html#scale-the-entire-objects) that you can scroll out indefinitely. Is that desired?

Sorry for beeing this much annoying 😅
Best regards

Problem

When using Safari browser on iPhone or Mac computer, if a text label is multiple lines (i.e., contains \n) then the entire label is shifted upwards when rendered on the graph (assuming label direction = south).

Likely Cause

When a <tspan> is rendered in Safari, it does not seem to inherit the dominant-baseline attribute from the parent <text> element. Chrome, Firefox, and Edge do not seem to have this issue.

Proposed Solution

Consider setting dominant-baseline directly on <tspan> in addition to <text>.

Reference: https://stackoverflow.com/a/42023579
"Apparently, Safari wants the inner tspan have the dominant baseline set..."

Thanks for the very useful component. I'm not an expert at Vue or Javascript and am trying to place a new node on a v-network-graph at a position defined by a drag-drop event. One of your examples has a button that creates a new node at the center of the graph. How would I instead place the new node at a desired position. In my case, the SVG element is of width and height 400, with the upper left corner (0,0) and the lower right corner (400,400). I can obtain a SVGPoint location in this reference frame from a drag-drop event.

I can almost create the desired behavior by setting layouts.nodes[new_nodeId] = {point.x-200, point.y-200}, but that doesn't work well, especially if there is pan/zoom/scale involved. And it doesn't take into account possibly overlapping nodes.

Is there some way to access setNewNodePositions() in src.layouts.simple.ts, or is there a better way to create a node at a desired SVGPoint location? A brief example would be very helpful.

If it helps, in my onDrop(evt) method, I obtain the drop point location as:

onDrop(evt) { 
    evt.preventDefault();
    var pt = this.svg.createSVGPoint();
    pt.x = evt.clientX
    pt.y = evt.clientY
    var svg_pt = pt.matrixTransform(this.svg.getScreenCTM().inverse())
}

this.svg is obtained from a ref="graphRef" on the v-network-graph: In mounted() I have: this.svg = this.$refs.graphRef.svg.

John

I don't know if it is possible to fix a node to the center of the visualization in a force layout.
If so, it would be nice to add it to the documentation.

If not, see it as a feature request ;)

It would be super helpful, if someone could add this functionality to this amazing visualization package.

Hello everybody, I have an issue relative to use "EventHandlers" in my project.

Importing VNetworkGraph from 'v-network-graph' , the import don't have this function mencioned at doc "vNG.EventHandlers".

The VNetworkGraph have only these exports at dependency (version 0.5.8), and I can't access the "EventHandlers":

import { Plugin } from "vue";
import * as components from "./components/index";
declare const install: Exclude<Plugin["install"], undefined>;
export default install;
export declare type VNetworkGraphInstance = InstanceType<typeof components.VNetworkGraph>;
export declare type Instance = InstanceType<typeof components.VNetworkGraph>;
export * from "./components/index";
export { getFullConfigs } from "./common/config-defaults";
export { SimpleLayout } from "./layouts/simple";
export { GridLayout } from "./layouts/grid";
export type { LayoutHandler } from "./layouts/handler";
export * from "./common/types";
export * from "./common/configs";
export { useStates } from "./composables/state";

I'm using VUE 3 with JS (not TS) and I trying do this in mounted() cycle:

this.eventHandlers = VNetworkGraph.EventHandlers = {
      'node:click': ({ node }) => {
        console.log('inside');
        // toggle
        this.nodes[node].active = !this.nodes[node].active;
      }
    };

On the examples event page the anchor tag on

"For a list of events that can be captured, see here."

is missing the prefix /v-network-graph at the beginning of the URL, resulting in a 404.

I was going to create a pull request for this, but I can't work out if the docs are generated or written by hand (I've never used github pages, it isn't as obvious as I expected).

Hi, love the examples in the documentation!

I wonder whether the nodes and edges data have to be set up in a vue file as shown in the documentation, or it's possible to compose the graph by reading a JSON file?
E.g. import data from "./test-data.json"

If so, can you kindly throw me a brief snippet of how to get the imported file integrated in App.vue when doing const nodes: Nodes = {}? I'm very new to Vue and this library, so thank you in advance!

This might be related to View:unload #24 . As suggested there, I am using version 0.3.10.

I have two "views/pages" or more accurately two components, one of which will show depending on a button click. One of the views, call it the "graph view", has a child component containing a v-network-graph. Once I create a graph, I save the graph data on the backend. When the graph view is opened, code in "mounted()" queries the backend to obtain the saved graph data, if any, and uses it to populate the svg.

I can create a svg graph and save the results. And I can refresh the app from the "other" page and open the graph view without error. But when have the graph view open, then click the button to jump to the other view and back again to the graph view, I always obtain the error:

svg-pan-zoom.js:669 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getViewBox')
   at SvgPanZoom.fit (svg-pan-zoom.js:669)
   at Proxy.fit (svg-pan-zoom.js:1003)
   at Proxy.fitToContents (svg-pan-zoom-ex.ts:52)
   at network-graph.vue:389

The same error occurs if I have the graph view open, alter the code to that page, and save the changes. This causes the v-network-graph component to refresh.

The code near network-graph.vue line 389 is:

// Scales the content to fit in the SVG area.
   const fitToContents = () => {
    updateBorderBox(() => {
    svgPanZoom.value?.fitToContents()

It appears that svgPanZoom is being called with no ViewBox present, so it can't complete the fit function and raises an error. The error apparently occurs before my code in mounted() can query the backend to retrieve the saved graph data. That is, the error occurs, then the backend is queried, then the data is returned and my code works fine.

I can simply ignore the error. But perhaps it would be best if the code in network-graph.vue was changed to call svgPanZoom only if there is a ViewBox present (if that is possible). I'm hoping that this verbal description makes sense, so I won't need to create a small demo to show the problem.

John

Hi,

First, thanks a lot for this awesome library.

I tried to create a custom node with icons as stated in the documentation: https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node. Unfortunately, when trying to download the SVG as described in the docs (https://dash14.github.io/v-network-graph/examples/misc.html#get-the-content-as-svg-data), it seems that the icons are not visible in the downloaded SVG and the font is different.

Is there a way to somehow embed the styles into the downloaded SVG?

Thanks and best regards.

Hi, I got a error message while trying the example about custom nodes:

Expected '<component>' elements to have 'v-bind:is' attribute

then I fixed it by changing line 13

<component is="style">

into

<component :is="'style'">

don't know if this is a bug or just my environment issue? thanks!

This might be beyond the aims of v-network-graph, but I am attempting to use v-network-graph to create a graph editor for Neo4j. It would allow a user to create/edit graphs in the browser, and these would be saved in Neo4j on the backend. Likewise, a graph stored in Neo4j could be converted to v-network-graph on the frontend for viewing and additional editing.

This project suggests some potential new features for v-network-graph. One would be the ability to select multiple nodes by dragging a rectangle or lasso around existing nodes. Once selected, the nodes could be removed from the graph, if that is the intent. Or, more interesting, the selected nodes could be included into a group by writing a node property on each.

In the latter case, there could be an option to keep the rectangle or other boundary visible, to denote the group. It could even have an optional visible text label somewhere in the boundary, (e.g., "Group 1"). Finally, the nodes within the boundary could be arranged by some force method, and the group could be treated as a whole when using a force method to arrange all other nodes. I imagine all this would involve creating a subgroup within the SVG that includes the rectangle as a border.

Is the ability to select multiple nodes in this way of interest to the developers? If you do not foresee adding this as a feature, could you provide a short description as to how this might be best accomplished in the existing v-network-graph framework?

Is there a way to visualize self-loops? Currently an edge, where source and target are the same, only goes out of the node but the end doesn't go back into the node, but rather ends somewhere besides the node without connecting to anything.

Hi @dash14,

is there any way to sponsor your work for this amazing library?

Something like github sponsor, buy me a coffee, etc.

Best regards

Expected behaviour

Binding computed values to :nodes and :edges should result in the graph updating when the value of the computed changes.

Actual behaviour

The graph does not update, although the value of the computed has changed.

Example

• Clicking the button in the component below adds an item the reactive array whatsits.
• The list updates immediately.
• The graph does not exist (but in my actual project, if I navigate away and come back the change is visible).

<script setup lang="ts">
import { reactive, computed } from "vue"

const whatsits = reactive([{id: "blah", name: "hi there"}])
const edges = reactive({});
const addNode = function () {
  whatsits.push({id: "secondNode", name: "this works?"});
}

const nodes = computed(() => Object.fromEntries(whatsits.map(e => [e.id, { name: e.name }])));
</script>

<template>
  <button type="button" @click="addNode">Add node</button>
  <ul>
    <li v-for="n in whatsits" :key="n.id">{{ n.name }} is {{ nodes[n.id] ? "in" : "not in" }} "nodes"</li>
  </ul>
  <v-network-graph :nodes="nodes" :edges="edges" />
</template>

(Sorry for originally submitting this as an empty issue - my finger slipped.)

I have following config

view: {
        panEnabled: true,
        zoomEnabled: true,
        scalingObjects: true,
        fit: true,
        layoutHandler: new GridLayout({ grid: 20 }),
        grid: {
            visible: true,
        },
    },

And <g class="v-background-viewport"... scaling along with other objects with grid on background

When i turn scalingObjects option to false everything back to normal, but my task is scale nodes and edges on zoom and leave background grid fullscreen.

Defining an edge marker color works if the color value is in hex format (e.g., #212121). However, if the edge marker color is specified using non-hex color formats, such as rgba(128,128,128,0.35) or var(--my-color), then the edge marker does not appear when rendered.

Likely Cause

Please see this line:

The m.color.replace("#", "") expression referenced above allows parentheses ( and ) and comma , and period . to be included in the id string. Then, when sourceMarkerId and targetMarkerId are referenced in edge.vue template, the url(...) value becomes invalid. See lines 41-42 and 49-50 below.

Proposed Solution

In edge.vue, please consider wrapping the inner part of url(#...) in single quotes, like this: url('#...')

    :marker-start="state.sourceMarkerId ? `url('#${state.sourceMarkerId}')` : undefined"
    :marker-end="state.targetMarkerId ? `url('#${state.targetMarkerId}')` : undefined"

And, in marker.ts, perhaps add more logic to remove special characters:

m.color.replace("#", "").replace("(", "").replace(")", "").replace(",", "_").replace(".", "")

Thank you for considering this issue.

I want to use Position nodes with d3-force for layout
But when I use the page an error is reported

Currently I have upgraded to the latest library

I use it like this

I need your help，thanks

Hello, here some issues I have found while testing rev 0.5.3

• node:dblclick and edge:dblclick are not fired on mobile, they work on desktop
• node:click is fired on mobile but "event.detail" value is always 1 on mobile.

view:dblclick is working OK on mobile and desktop

Thank you and Best Regards!

how can i show node info via tootip on hover on node

Hi @dash14,

I'm working with the summarized edges feature at the moment. I got two questions for you :)

• I try to get the event edge:pointerover but it did not work. Is it possible to have a hover event on summarized edges?
• Additionally, is it possible to add a custom label to a summerized edge that can be added at a specific NodeLabelDirection?

Thanks for your amazing stuff 🥇

I am trying to focus on a specific node when the graph gets loaded. However it seems that there is always a call to panToCenter after view:loaded event is fired.

This behavior can be observed on the examples page - https://dash14.github.io/v-network-graph/examples/event.html#capture-all-events:

This behavior forces users to pan in setTimeout (so there is a workaround).

Hi, this project looks super useful for what I need to do. Unfortunately, I've tried adding it to my project and to brand new Vue projects and it always hangs on the npm install v-network-graph. Is this an issue with the npm registry? With my end? If so, do you know how to fix this?

Here's the output of install verbose:

$ npm install v-network-graph --verbose
npm info it worked if it ends with ok
npm verb cli [ '/usr/bin/node',      
npm verb cli   '/usr/bin/npm',       
npm verb cli   'install',
npm verb cli   'v-network-graph',    
npm verb cli   '--verbose' ]
npm info using [email protected]
npm info using [email protected]
npm verb npm-session 394b41768a22dfca
npm timing stage:loadCurrentTree Completed in 1606ms
npm timing stage:loadIdealTree:cloneCurrentTree Completed in 20ms
npm timing stage:loadIdealTree:loadShrinkwrap Completed in 584ms
npm http fetch GET 304 https://registry.npmjs.org/mitt 391ms (from cache)
[..................] / fetchMetadata: http fetch GET 304 https://registry.npmjs.org/mitt 391ms (from cache)

hii use image as node and then when i want to use storke for the same node it will be hide behind the image
how can i fix this issue

Hi,
Is there an example or best practice on loading nodes and edges via Axios calls? I want to be able to build my network graph dynamically.

thanks

----EDIT----
I found the CSS file in the vue node-modules.... The css was located in the lib folder.... I fixed this by altering the import statement to direct to the lib folder....
import "v-network-graph/**lib**/style.css"

---ORIGINAL----

the npm install command doesn't pull the style.css file. Likewise, I'm getting an error when trying to pull or even find the style.css file. Where can I find the correct style.css file, should be included in the Repo?

I ran the following npm command successfully.
npm i v-network-graph

I have added the following import and use statements

import VNetworkGraph from "v-network-graph"
import "v-network-graph/style.css"
Vue.use(VNetworkGraph)

After running my vue app, I get the following error:

This dependency was not found:

* v-network-graph/style.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save v-network-graph/style.css
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'

I run the suggested command....
npm install --save v-network-graph/style.css

And get the following error

npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://[email protected]/v-network-graph/style.css.git
npm ERR! 
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR! 
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR! 
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Seth Klingbeil\AppData\Roaming\npm-cache\_logs\2021-09-01T19_38_00_919Z-debug.log

Hello!
Using the capture all events example I can see the view:click and view:dblclick events work. Then if I do a right click/long press on the view I can see view:contextmenu event work. But after that both view:click and view:dblclick are not fired anymore.

Thank you and Best Regards

Hi @dash14,
is it possible to have an inbuilt hyphenation? So that if a word or text is too long, it breaks into the next line?
Like the CSS attribute word-break: break-all | break-word.

Hi dash,
I don't know if it is just me or something that I may be using wrong. But I found that when I change between router-links and the unload event is triggered after I leave the component where the v-network-graph is loaded, two more events are triggered (zoom and pan) causing to increase the size of the nodes and move the position at the last second of the transition... is it posible to stop those events from being triggered?

Hello,
I wanted to know, with node selection enabled, why on mobile/tablet "tapping" a node does not select the node itself.

Using the capture all exampe I can see that clicked and selected are not fired, but pointerdown, pointerup and many other node events are fired, and generally mobile seems to be well supported

Many thanks

Hi, do you plan to support Nuxt 3?

There are events for view, node, edge and path clicks. It would be useful to have a separate event for double-click.
I have tried to handle this in the event handler, but my solutions were a bit complex. It would probably be simpler to handle at the library level.

Hi,
Do you have an example of how to configure the boot file when using Quasar?
Normally, I would put this in the main.js file and everything works:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VNetworkGraph from "v-network-graph";
import "v-network-graph/lib/style.css";

createApp(App).use(store).use(router).use(VNetworkGraph).mount("#app");

But you cannot do this in Quasar, you have to create seperate boot files for each one...I tried this but got an error saying failed to resolve component
import { boot } from 'quasar/wrappers'
import VNetworkGraph from "v-network-graph";
import "v-network-graph/lib/style.css";

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(({ app }) => {
// something to do
app.config.globalProperties.$VNetworkGraph = VNetworkGraph

})

thanks!

What do you think of victor as dev dependencies?
It is pretty unmaintained (last update 6 years ago, some issues open, some PR open)

It seems like a solid ground to implement mindmap functionality with advanced features eventually. Is that on the roadmap somehow?

Hi,
I want to incorporate this library into my regular vuejs application, the main components and vue files are not in Typescript. How to do I embed this into it? Since this library requires typescript?

thanks in advance.

Hi,
First, I appreciate your library much, and i would like to thank you for your effort. I sadly encountered that the import of the style.css file is failing. It seems to be that the styles.css file (import "v-network-graph/style.css) is missing in the node_modules directory. Do you have any workaround for that?
Thanks in advance,
Have a nice day.
Phil

Hello, I am using your library on a tablet oriented project, so I rely on touch gestures.

I would like to use a context menu, but on mobile i cannot make a "right click".
On mobile often a right click is performed via long press so this would be a possible way for having that.
Is there already available something for a context menu on mobile that I am missing?

Thank you and best regards.