use d3-graphviz

zhabinka · zhabinka · commit 7b034464873d · 2022-08-23T13:48:35.000+03:00
diff --git a/djaif/book/book_map.py b/djaif/book/book_map.py
@@ -1,46 +1,57 @@
-from graphviz import Digraph
-
 from djaif.book import models
 
 
 def book_map(book):
-    dig = Digraph('Map')
+    dig = ['digraph {',
+           ' node [style="filled"]'
+          ]
 
     for page in book.bookpage_set.all():
-        dig.node(
-            _pid(page),
-            label='{page.id}:"{page.title}"\n{items}'.format(
-                page=page,
-                items='\n'.join(
-                    '+ {id}:"{name}"'.format(
-                        id=i.id, name=i.name[:10],
-                    ) for i in page.items.all()
+        dig.append('{pid} [ \
+                label="{label}" \
+                tooltip="{tooltip}" \
+                href="{href}" \
+            ]'.format(
+                pid = _pid(page),
+                label='{page.title} ({page.id})\\n{items}'.format(
+                    page=page,
+                    items='\\n'.join(
+                        '+ {id}: {name}'.format(
+                            id=i.id, name=i.name[:10],
+                        ) for i in page.items.all()
+                    ),
                 ),
-            ),
-            tooltip=page.body,
-            href='/admin/book/bookpage/{0.id}/change'.format(page),
+                tooltip=page.body.replace("\r\n", " "),
+                href='/admin/book/bookpage/{0.id}/change'.format(page),
+            )
         )
 
     links = models.PageLink.objects.filter(from_page__book_id=book.id)
     for link in links.all():
-        dig.edge(
-            _pid(link.from_page),
-            _pid(link.to_page),
-            label='{link.id}:"{shortname}"\n{items}'.format(
-                link=link,
-                shortname=link.name[:10],
-                items='\n'.join(
-                    '? {id}:"{name}"'.format(
-                        id=i.id, name=i.name[:10],
-                    ) for i in link.items.all()
+        dig.append('{from_page} -> {to_page} [ \
+                shape="circle" \
+                label="{label}" \
+                labeltooltip="{labeltooltip}" \
+                labelhref="{labelhref}" \
+            ]'.format(
+                from_page = _pid(link.from_page),
+                to_page = _pid(link.to_page),
+                label='{link.id}: {shortname}\\n{items}'.format(
+                    link=link,
+                    shortname=link.name[:10],
+                    items='\\n'.join(
+                        '? {id}: {name}'.format(
+                            id=i.id, name=i.name[:10],
+                        ) for i in link.items.all()
+                    ),
                 ),
-            ),
-            labeltooltip=link.name,
-            labelhref='/admin/book/pagelink/{0.id}/change'.format(link),
+                labeltooltip=link.name,
+                labelhref='/admin/book/pagelink/{0.id}/change'.format(link),
+            )
         )
 
-    dig.format = 'svg'  # noqa: WPS125
-    return dig.pipe().decode('utf-8')
+    dig.append('}')
+    return ' '.join(dig)
 
 
 def _pid(page):
diff --git a/djaif/book/templates/map.html b/djaif/book/templates/map.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script src="//d3js.org/d3.v5.min.js"></script>
+    <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
+    <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
+  </head>
+  <body>
+    <div id="graph" style="text-align: center;"></div>
+    <script>
+      d3.select("#graph").graphviz().renderDot('{{ book|safe }}');
+    </script>
+  </body>
+</html>
diff --git a/djaif/book/views.py b/djaif/book/views.py
@@ -189,7 +189,11 @@ def delete_save(request, book_id, save_id):
 
 def view_book_map(request, book_id):
     book = get_object_or_404(models.Book, id=book_id)
-    return FileResponse(book_map.book_map(book), filename='map.svg')
+    return render(
+        request,
+        'map.html',
+        context={'book': book_map.book_map(book)},
+    )
 
 
 @on_progress
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -8,7 +8,6 @@ authors = ["Your Name <you@example.com>"]
 python = "^3.8"
 django = "^4.0.6"
 Pillow = "^9.2.0"
-graphviz = "^0.20"
 django-extensions = "^3.2.0"
 python-dotenv = "^0.20.0"
 
