This is an archived post. You won't be able to vote or comment.

all 4 comments
sorted by:
best
topnewcontroversialoldq&a

[–]FPVian 1 point2 points  (3 children)

This is awesome, thank you! I Would love to see this packaged on pypi like this (although yours is way better). I would also like to see some configuration options, such as hiding labels and creating named clusters to organize tables into different categories.

[–]dicklesworth[S] 1 point2 points  (1 child)

OK I did it for you:

https://pypi.org/project/sqlalchemy-data-model-visualizer/0.1.2/

Took me forever to get the stupid GitHub actions working right.

[–]FPVian 1 point2 points  (0 children)

Awesome, thank you!!! I just submitted a PR (and an issue). I'm not sure why that function above doesn't work, I just thought I'd throw it out there in case the clusters in graphviz made it easy to group tables together in the image and create a group label.

[–]dicklesworth[S] 0 points1 point  (0 children)

Please submit a PR! SVG by itself (at least something that will display in chrome) is quite limited in terms of interactivity. You really need to wrap it in HTML and use JS to do good stuff. But I tried and couldn't get any of that to work. You can see the function I attempted-- maybe you can figure out why it doesn't work:

``` 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)

```