neesjanvaneck / vosviewer-online Goto Github PK

Description

I'm trying to use the vosviewer-online component within a vite typescript application.

Everything works fine with a standard network.
However if I add items descriptions or templates descriptions, the application crashes when I hover a node with the following error :

react-dom.development.js:26923  Uncaught TypeError: (0 , ju.addHook) is not a function
    at du (helpers2.js:42:3)
    at y2 (index.js:175:40)
    at index.js:193:22
    at observer.ts:104:34
    at useObserver.ts:126:25
    at trackDerivedFunction (derivation.ts:183:24)
    at Reaction2.track (reaction.ts:137:24)
    at useObserver (useObserver.ts:124:18)
    at observerComponent (observer.ts:104:16)
    at renderWithHooks (react-dom.development.js:16305:18)

The npm run build displays the following error that may be the cause :

vite v5.0.11 building for production...
node_modules/vosviewer-online/index.js (139:115203) "addHook" is not exported by "node_modules/dompurify/dist/purify.es.js", imported by "node_modules/vosviewer-online/index.js".
node_modules/vosviewer-online/index.js (139:115226) "sanitize" is not exported by "node_modules/dompurify/dist/purify.es.js", imported by "node_modules/vosviewer-online/index.js".

Do you have any suggestions or workaround ?
Thanks in advance.

PS: Note that the items descriptions works fine in a standard react typescript app without vite.

Reproduction

I made a repo with a vite template that you can build.
https://github.com/ahonestla/vosviewer-online-component-vite

Use JOI_2007-2016_co-authorship_network.json for the default network and JOI_2007-2016_co-authorship_network_template.json for the network with items descriptions.

The font size of the labels in the legends (item size and color) are fixed and not relatively defined as in the other UI elements.

An error occurs when zero-indexed IDs are used in the VOSviewer input files. See the below screenshots.

The issue can be reproduced using this test VOSviewer JSON file.

Info boxes become too wide if items have a description that consists of very long texts.

If the largest_component parameter is in use and you open a network with coordinates after opening a network without coordinates, then the identification of the largest component and/or the layout algorithm will be performed incorrectly.

Hello
From what I understand, the VOSviewer online can render a network that was first computed by the VOS viewer.
It would be very interesting to be able to compute the network layout directly in the web application, without using an heavy client.
I did not found an implementation of the VOS algorithm. The link www.neesjanvaneck.nl/vos/ that appears in the original publication does not point to a "simple open source program" but to the VOSviewer website.

Custom color schemes provided in VOSviewer JSON files are not processed if parameters are not specified. See this test VOSviewer JSON file.

Thanks @WoutLamers for reporting this issue.

Hi,

Is there a way to serve VOSviewer-Online (development version) at http://localhost:8600/vosviewer or some other custom path?

Thanks for the amazing tool!

I've observed that when using the URL parameter show_item=x, the app zooms in on a node labeled y (x) instead of the node labeled x. I'm not familiar with the function levenSort, but it seems intuitively right to select the first item returned by the sort (line referenced below), so I'm wondering why I see the behaviour described above. The Levenshtein distance should be 0 for the exact match and I assumed sortedItems[0] would then return x.

The positioning of items and links are in some cases disordered after exiting full screen mode. This issue occurs in the following situation: Go to full screen -> perform some scrolling/zooming -> exit full screen.

I was wondering if there's a recipe for loading a VOSViewer graph with a Jupyter notebook. E.g. like pyvis.

Has anyone tried that before?

The aspect ratio of the logo is incorrect in the dark user interface.

The share link is not correct if VOSviewer Online is hosted in a subfolder. Solution: add not only the domain but the whole path in the share link.

Hyperlinks in item descriptions are not displayed in the primary pallet color. Additionally, when item descriptions feature an HTML table, the table content is not displayed in the correct font color in the dark user interface.

Changing the Scale and Size variation sliders in the control panel will make items bigger or smaller in the visualization. However, the item size legend is not automatically adjusted after a change.

The loading screen is not adjusting to the dark user interface. As a consequence, the progress text is difficult to read. See the below screenshot.

If an item with a description is selected and you hover the mouse over an edge without a description, then the info panel will display incorrect information, namely the description of the item.

When the user chooses to include custom visualization settings in the share link, the score_colors parameter seems be missing in the share link.

Hello :-)

Can we add HTML to the id and labels?

My data looks this:

      {
        "id": "<strong>Commissioning of the ATLAS Muon Spectrometer with cosmic rays</strong><br />European Physical Journal C ",
        "label": "<strong>Commissioning of the ATLAS Muon Spectrometer with cosmic rays</strong><br />European Physical Journal C ",
        "scores": {
          "_": 1
        },
        "weights": {},
        "cluster": 1,
        "url": "https://app.dimensions.ai/details/publication/pub.1012859014",
        "description": "<div class='description_heading'><a href='https://app.dimensions.ai/details/publication/pub.1012859014' target='_blank'><strong>Commissioning of the ATLAS Muon Spectrometer with cosmic rays</strong><br />European Physical Journal C </a></div>"
      },

But the resulting visualization is not rendering correctly:

Full JSON data here: test.json

Hi,

I have issues with sharing links on VosViewer Online.

It does not seem like tinyurls/QR codes are correctly interpreted in terms of the input path/token to the json files in my Google Drive (all json files are shared read-only). It worked four weeks ago.

How do I resolve this so I can share my networks?

Best,
Tobias

Extend share feature:

• Add 'Short link' switch in Share dialog.

• If the switch is toggled on then the share link is shortened.

• For link shortening we could for example use the TinyURL (https://www.npmjs.com/package/tinyurl) package.

Hi, I'm developing a web app that hosts some VOSviewer JSON files and dynamically loads them into an iframe.
I can confirm that the target URLs return valid JSON networks (e.g., my web app's URL: https://musictechnet.simssa.ca/network?idx=30), but embedding the returned JSON into VOSviewer online returns "Error while reading VOSviewer JSON file: File cannot be found" (e.g., https://app.vosviewer.com/?json=https://musictechnet.simssa.ca/network?idx=30).

The previous link had been loaded correctly for most of the development process, but recently won't load any of the networks. I've tried returning a download of the JSON as well as just the JSON as you do in the VOSviewer Online doc examples, but neither are working anymore.

This issue has been intermittent throughout the development process, but recently none of the networks are loading anymore. I can also confirm that the JSONs loaded locally into VOSviewer online display the network perfectly. It's a pretty odd issue.

Hi! Thanks for this great web app. I am trying to integrate it to https://nocodefunctions.com so that users can visualize the networks they build.

The json format is rich, and it could be useful to complement it with descriptive fields for the network. These fields would be parsed and fill in placeholders in the visualization. Either in a existing or new collapsable panel, or directly visible (especially for the title I would say?).

The same way there is a config object, there could be a "metadata" object with:

"metadata": {
            "author(s) of the visualization": " xxxxx",
            "date of creation": "xxxx",
            "description of the data": "xxxx",
            "title of the visualization": "xxxxxxx",
            "further information": "xxxxxxxx"
        }

Hi, I'm a developer from the Dimensions team. We would need to integrate VOSviewer without the iframe + json file method that we are using today.

We have a react app, and I see that also the Viewer uses react, so it would be amazing to import it as a JSX component. It is possible?

Thanks!

Spacing between letters of item labels increases when zooming in.

The React peer dependency of the component package is currently locked to version ^17.0.2. This causes problems when the package is used in React 18 applications. The following npm install warnings then occur:

Hi, I'm trying to use the viewing features through Google Drive using a dev app, but I'm running into a problem with the proxy server configuration (Error while reading VOSviewer JSON data: Re-select the file.), can you help me resolve this?

Hello,

I'm using the the vosviewer-online component within a vite typescript application.

The clusters labels in the legend and the legend box have sometimes a disproportionate size.
It seems to depends to the resolution of the screen.

I did some tests with the exact same page :

1. On my windows machine

• 1536 x 864 (and lower) :
  
• 1920 x 1080 :
  

2. On my mac

• 1680 x 1050 (and lower) :
  
• 2048 x 1280 :
  

What could be the cause for this behavior ?
Thank in advance!

Cluster legend labels are displayed too small on macOS. See the below screenshot.