[gi-docgen: 1/2] generate: Improve hierarchy SVGs

[Emmanuele Bassi <ebassi src gnome org>]

commit 61b5325f356c5c7faf681fd33a1ef60c9ce583e8
Author: Jason Francis <cycl0ps tuta io>
Date:   Sat Apr 10 21:17:11 2021 -0400

    generate: Improve hierarchy SVGs
    
    Applies the CSS styles and makes nodes clickable.

 gidocgen/gdgenerate.py              | 53 ++++++++++++++++++++++++++++---------
 gidocgen/templates/basic/class.html |  4 +--
 gidocgen/templates/basic/style.css  | 36 ++++++++++++++++++++++---
 3 files changed, 76 insertions(+), 17 deletions(-)
---
diff --git a/gidocgen/gdgenerate.py b/gidocgen/gdgenerate.py
index d27e991..6db8bcb 100644
--- a/gidocgen/gdgenerate.py
+++ b/gidocgen/gdgenerate.py
@@ -217,6 +217,7 @@ class TemplateConstant:
             self.deprecated_since = None
 
         self.introspectable = const.introspectable
+        self.hierarchy_svg = None
 
     @property
     def c_decl(self):
@@ -1227,22 +1228,54 @@ class TemplateClass:
 
     @property
     def dot(self):
+
+        def fmt_attrs(attrs):
+            return ','.join(f'{k}="{v}"' for k, v in attrs.items())
+
+        def add_link(attrs, other):
+            if other['namespace'] == self.namespace:
+                attrs['href'] = f"class.{other['name']}.html"
+                attrs['class'] = 'link'
+            else:
+                attrs['tooltip'] = other['fqtn']
+
         ancestors = []
         implements = []
         res = ["graph hierarchy {"]
-        res.append("  size=\"6,6\";")
-        res.append(f"  this [label=\"{self.type_cname}\"];")
+        res.append("  bgcolor=\"transparent\";")
+        node_attrs = {
+            'shape': 'box',
+            'style': 'rounded',
+            'border': 0
+        }
+        this_attrs = {
+            'label': self.type_cname,
+            'tooltip': self.type_cname
+        }
+        this_attrs.update(node_attrs)
+        res.append(f"  this [{fmt_attrs(this_attrs)}];")
         for idx, ancestor in enumerate(self.ancestors):
             node_id = f"ancestor_{idx}"
-            res.append(f"  {node_id} [label=\"{ancestor['type_cname']}\"];")
+            ancestor_attrs = {
+                'label': ancestor['type_cname']
+            }
+            ancestor_attrs.update(node_attrs)
+            add_link(ancestor_attrs, ancestor)
+            res.append(f"  {node_id} [{fmt_attrs(ancestor_attrs)}];")
             ancestors.append(node_id)
         ancestors.reverse()
         for idx, iface in enumerate(getattr(self, "interfaces", [])):
             node_id = f"implements_{idx}"
-            res.append(f"  {node_id} [label=\"{iface['type_cname']}\" shape=box];")
+            iface_attrs = {
+                'label': iface['type_cname'],
+                'fontname': 'sans-serif',
+                'shape': 'box',
+            }
+            add_link(iface_attrs, iface)
+            res.append(f"  {node_id} [{fmt_attrs(iface_attrs)}];")
             implements.append(node_id)
         if len(ancestors) > 0:
-            res.append("  " + " -- ".join(ancestors) + " -- this [color=blue];")
+            res.append("  " + " -- ".join(ancestors) + " -- this;")
         for node in implements:
             res.append(f"  this -- {node} [style=dotted];")
         res.append("}")
@@ -1559,6 +1592,9 @@ def _gen_classes(config, theme_config, output_dir, jinja_env, repository, all_cl
         tmpl = TemplateClass(namespace, cls)
         template_classes.append(tmpl)
 
+        if config.show_class_hierarchy and utils.find_program('dot') is not None:
+            tmpl.hierarchy_svg = utils.render_dot(tmpl.dot, output_format="svg")
+
         with open(class_file, "w") as out:
             content = class_tmpl.render({
                 'CONFIG': config,
@@ -1568,13 +1604,6 @@ def _gen_classes(config, theme_config, output_dir, jinja_env, repository, all_cl
 
             out.write(content)
 
-        if config.show_class_hierarchy and utils.find_program('dot') is not None:
-            hierarchy_img = utils.render_dot(tmpl.dot, output_format="svg")
-            if hierarchy_img is not None:
-                hierarchy_file = os.path.join(output_dir, f"hierarchy.{cls.name}.svg")
-                with open(hierarchy_file, "w") as img_out:
-                    img_out.write(hierarchy_img)
-
         for ctor in cls.constructors:
             c = TemplateFunction(namespace, ctor)
             ctor_file = os.path.join(output_dir, f"ctor.{cls.name}.{ctor.name}.html")
diff --git a/gidocgen/templates/basic/class.html b/gidocgen/templates/basic/class.html
index 533c0e9..621a96a 100644
--- a/gidocgen/templates/basic/class.html
+++ b/gidocgen/templates/basic/class.html
@@ -102,8 +102,8 @@ SPDX-License-Identifier: Apache-2.0 OR GPL-3.0-or-later
         Hierarchy
         <a href="#hierarchy" class="anchor"></a>
       </h4>
-      <div class="docblock">
-        <img src="hierarchy.{{ class.name }}.svg" alt="Hierarchy for {{ class.fqtn }}"/>
+      <div class="docblock" alt="Hierarchy for {{ class.fqtn }}">
+        {{ class.hierarchy_svg|safe }}
       </div>
     </div>
     {% endif %}
diff --git a/gidocgen/templates/basic/style.css b/gidocgen/templates/basic/style.css
index f181bf4..5c82cf0 100644
--- a/gidocgen/templates/basic/style.css
+++ b/gidocgen/templates/basic/style.css
@@ -20,6 +20,7 @@
   --sidebar-primary: rgb(144, 194, 255);
   --sidebar-bg: #151515;
   --sidebar-selected-bg: var(--primary);
+  --sidebar-hover-bg: rgba(127, 127, 127, 0.2);
   --sidebar-text-color: #fafafa;
   --sidebar-padding: 1.5em;
 
@@ -264,12 +265,41 @@ strong, b {
 }
 
 /* fix alignment of images on small screen */
-img {
+img, svg {
     display: block;
     max-width: 100%;
     height: auto;
 }
 
+svg .node polygon, svg .node path {
+  transition: fill 150ms ease;
+  fill: var(--box-bg);
+  stroke: none;
+}
+
+svg .node a {
+  text-decoration: none !important;
+}
+
+svg .node a text {
+  fill: var(--text-color);
+  font-family: var(--body-font-family);
+}
+
+svg .node.link text {
+  fill: var(--primary);
+}
+
+svg .node.link:hover polygon, svg .node.link:hover path {
+  fill: var(--sidebar-hover-bg);
+}
+svg .node.link:hover text {
+  fill: var(--box-text-color);
+}
+svg .edge path {
+  stroke: var(--text-color);
+}
+
 /* fix unwanted margins in tables, code, lists and blockquotes */
 li > *:first-child,
 li > *:first-child > *:first-child,
@@ -432,7 +462,7 @@ footer {
 }
 
 .sidebar .section a:hover {
-  background-color: rgba(127, 127, 127, 0.2);
+  background-color: var(--sidebar-hover-bg);
   color: var(--sidebar-text-color);
 }
 
@@ -758,7 +788,7 @@ table.results tr td code {
 }
 
 .docblock .codehilite > .copy-button:hover {
-  background-color: rgba(127, 127, 127, 0.2);
+  background-color: var(--sidebar-hover-bg);
   color: var(--text-color);
 }