Load Diagrams as SVG + links

[Jiros]

• [ ] Create shared component to hold schema diagram
• [ ] Find a way to load an SVG diagram in a way that preserves embedded links
• [ ] Update the nodes on the schema diagram with relative links

[Jiros]

Tested a sample inline SVG snippet with links from https://alligator.io/svg/hyperlinks-svg/

Got this error -

./src/components/schema-diagram.tsx
SyntaxError: /data/app/src/components/schema-diagram.tsx: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
   9 |   <svg viewBox="0 0 362 232" version="1.1"
  10 |   xmlns="http://www.w3.org/2000/svg"
> 11 |   xmlns:xlink="http://www.w3.org/1999/xlink">
     |   ^^^^^^^^^^^
  12 | 
  13 |   <g stroke="none" stroke-width="1" fill="none"
  14 |     fill-rule="evenodd">

[Jiros]

Removing the xmnls namespaces and using simple a href tags seems to work.

[Jiros]

To load inline SVG in Docusaurus:

import SchemaSVG from '../../docs/images/diagrams/covidgraph-schema.svg';

I'll need to edit the original yEd files to adjust sizes.

[Jiros]

@yGuy - not sure if you would want to know about this but I have the pipeline diagram in yEd and added URLs to the GitHub repos and Descriptions. When I export the yEd file as SVG and select 'export description as tooltips' it exports as normal but when I try to load the SVG in docusaurus I get the error below.

When I untick export descriptions it loads fine. More than likely a limitation/problem with tooltips in Docusaurus but thought I would ask/mention it in case it is of interest. I can live without tooltips...

./docs/images/diagrams/covidgraph-pipeline-repos.svg
Error: Expected node, got `      var SVGDocument = null;
      var SVGRoot = null;
      var TrueCoords = null;
      var lastElement = null;
      var initialized = null;
      var tipGroup;
      function Init(evt)
      {
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
         TrueCoords = SVGRoot.createSVGPoint();
         initialized = evt;
      };
      function GetTrueCoords(evt)
      {
         var newScale = SVGRoot.currentScale;
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX - translation.x)/newScale;
         TrueCoords.y = (evt.clientY - translation.y)/newScale;
      };
      function HideTooltip( evt )
      {
         if(initialized == null) {
           Init(evt);
         }
         if(tipGroup != null) {
           tipGroup.setAttributeNS(null, 'visibility', 'hidden');
         }
      };
      function ShowTooltip( evt )
      {
         if(initialized == null) {
           Init(evt);
         }
         GetTrueCoords( evt );
         var tipScale = 1/SVGRoot.currentScale;
         var targetElement = evt.currentTarget;
         if ( lastElement != targetElement )
         {
            var targetId = targetElement.getAttributeNS(null, 'id');
            var tipId = 'tooltip.' + targetId;
            tipGroup = SVGDocument.getElementById(tipId);
            var xPos = TrueCoords.x + (10 * tipScale);
            var yPos = TrueCoords.y + (10 * tipScale);
            tipGroup.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' + yPos + ') scale(' + tipScale + ')');
            tipGroup.setAttributeNS(null, 'visibility', 'visible');
         }
      };