Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The JS stoped working when the aggregation JS and CSS is turned on #1

Open
kylehuynh205 opened this issue Sep 9, 2024 · 3 comments
Labels
good first issue Good for newcomers

Comments

@kylehuynh205
Copy link
Contributor

kylehuynh205 commented Sep 9, 2024

Visit /admin/config/development/performance, make sure these 2 options is enable.

image

Visit the node which has the data visualization field formatter is used. the diagram are not rendered.

Right click on the web page, there is this error:

image

This field formatter can be found at:

  • /admin/structure/media/manage/file/display/network_diagram
  • /admin/structure/media/manage/file/display/kinship_diagram

if there is an JS error $.once is not a function, install this module: https://www.drupal.org/project/jquery_once

@ExuApplePie
Copy link

kinship1 custom.json
This is a modified version of the original kinship 1 JSON file, which includes new key/value pairs to support customizing which nodes get expanded at the start, as well as the screen size.

@ExuApplePie
Copy link

The issue was that the kinship diagrams depended on an old version of d3-dag, which was throwing the errors when aggregated. The updated library came with many breaking changes, so this PR replaces the old functions with the new ones, as well as factoring out the hard coded values into the JSON files instead.
The main issues were

  • Deprecated functions, especially those that returned an array - now returns a generator and is now manually converted into an array
  • Old code referenced a children property of all_nodes but this resulted in conflicts with the library as it does not expect our custom children property, so that was renamed
  • Hard coded values for certain diagrams to display certain nodes at the start and setting the screen size based on them, which has be removed in favour of setting these values in the JSON file instead
  • When updating the library, the initial screen position, and where the screen/zoom would go after clicking on a node was broken, so added code which seems to put the screen around the node consistently
  • The old code used .coordVert() but this was replaced by .coordQuad(). However, that resulted in about ~20s load times so switched to .coordGreedy() instead
  • Added a readme and a composer file

@ExuApplePie
Copy link

ExuApplePie commented Oct 9, 2024

kinship 2 custom.json
Another example of the new JSON file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
Status: No status
Development

No branches or pull requests

2 participants