Fix custom SVG image rendering in graph

[kmcginnes]

Description

Fixes rendering of SVG images inside Cytoscape by wrapping performing the following modifications:

• Wrap the image SVG inside a custom SVG that conforms to Cytoscape rendering
  • Uses <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg> at the top of the SVG string
  • Hard codes the width and height to be 24
  • Ensures no viewBox at the outer level
• Change image SVG width and height to be 100%

I took the opportunity to refactor the image logic in to a new function called renderNode() that has a test suite around it.

When setting the Cytoscape styles we also set the width and height of the node. I made sure the sizes match what was rendered before.

Tests

• I added the randomData.ts utility methods and launch.json from Remove fetch caching #280 since that hasn't been merged in yet
• I needed to use jsdom for the test environment since I am utilizing the DOMParser and XMLSerializer from the browser
• Since jsdom does not implement fetch I had to bring in whatwg-fetch and ensure it is set up in setupTests.ts
  • This file wasn't configured in the jest config, once I added it the existing import caused many tests to fail, so I removed it and everything worked
• I also had to update uuid to the latest version so it would work properly with Jest using jsdom

Validation

• Test with default icon (no customization)
• Test with custom SVG icon
• Test with large or non-square aspect ratio SVG image
• Test with colorized SVG image
• Test with raster image (i.e. png or jpeg)
• Test with custom shapes
• Test with custom colors

Before

After

Related Issues

Fixes #290

Check List

• I confirm that my contribution is made under the terms of the Apache 2.0 license.
• I have run pnpm run checks to ensure code compiles and meets standards.
• I have run pnpm run test to check if all tests are passing.
• I've covered new added functionality with unit tests if necessary.

[kmcginnes]

Rebased to fix conflicts

[vkagamlyk]

LGTM