Show HN: Easily Visualize Your SQLAlchemy Data Models in a Nice SVG Diagram

eigenvalue · on Oct 30, 2023

In case anyone knows why it doesn't work, here is the function I wrote to enable more interactive effects using HTML:

  def generate_html_with_embedded_svg(svg_filename, html_filename):
      with open(svg_filename, 'r') as f:
          svg_content = f.read()
  
      # Add an ID to the SVG tag
      svg_content = re.sub(r'<svg ', '<svg id="embedded-svg" ', svg_content, 1)
  
      html_content = '''<!DOCTYPE html>
  <html>
  <head>
      <title>Interactive SVG</title>
      <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            let svgElement = document.getElementById('embedded-svg');
            let tables = svgElement.querySelectorAll('.table-hover');
            tables.forEach(function(table) {
                table.addEventListener('mouseover', function() {
                    let tableId = table.getAttribute('id');
                    table.setAttribute('stroke', 'blue');
                    table.setAttribute('stroke-width', '2');
  
                    let edgesTo = svgElement.querySelectorAll('.edge-to-hover-' + tableId);
                    edgesTo.forEach(function(edge) {
                        edge.setAttribute('stroke', 'red');
                        edge.setAttribute('stroke-width', '2');
                    });
  
                    let edgesFrom = svgElement.querySelectorAll('.edge-from-hover-' + tableId);
                    edgesFrom.forEach(function(edge) {
                        edge.setAttribute('stroke', 'green');
                        edge.setAttribute('stroke-width', '2');
                    });
                });
  
                table.addEventListener('mouseout', function() {
                    let tableId = table.getAttribute('id');
                    table.removeAttribute('stroke');
                    table.removeAttribute('stroke-width');
  
                    let edgesTo = svgElement.querySelectorAll('.edge-to-hover-' + tableId);
                    edgesTo.forEach(function(edge) {
                        edge.removeAttribute('stroke');
                        edge.removeAttribute('stroke-width');
                    });
  
                    let edgesFrom = svgElement.querySelectorAll('.edge-from-hover-' + tableId);
                    edgesFrom.forEach(function(edge) {
                        edge.removeAttribute('stroke');
                        edge.removeAttribute('stroke-width');
                    });
                });
            });
        });
      </script>
  </head>
  <body>
      <div id="svg-container">''' + svg_content + '''</div>
  </body>
  </html>'''
  
      with open(html_filename, 'w') as f:
          f.write(html_content)

breed101 · on Oct 30, 2023

This is great! What a complicated graph tho.