From fcb2ff1f6b8a191fce140bbaa353894a6e6a2a64 Mon Sep 17 00:00:00 2001
From: Evgeny Metelkin <metelkin@insysbio.com>
Date: Mon, 20 Nov 2023 19:14:42 +0200
Subject: [PATCH] draft visualization of dot

---
 TODO.md                 |  2 +-
 package-lock.json       |  2 +-
 src/pages-collection.js |  9 ++++++---
 src/viz-page.js         | 26 ++++++++++++++++++++++++++
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/TODO.md b/TODO.md
index d33ebdd..95e5a40 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,6 +1,6 @@
 # TODO list
 
-- dot files visualization
+- dot: select layout, save as png, save as file
 - hot keys for InfoPage
 - switch monaco themes
 - nice css styles
diff --git a/package-lock.json b/package-lock.json
index dbfbe75..5678bae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7319,7 +7319,7 @@
     },
     "node_modules/heta-compiler": {
       "version": "0.7.0",
-      "resolved": "git+ssh://git@github.com/hetalang/heta-compiler.git#db9772b7ae1c3bbc46ef2497b4765a1a782cb0e2",
+      "resolved": "git+ssh://git@github.com/hetalang/heta-compiler.git#1dab16351821c60f5b926046637677abf3d690ef",
       "license": "Apache-2.0",
       "dependencies": {
         "@insysbio/topo-sort": "^1.0.1",
diff --git a/src/pages-collection.js b/src/pages-collection.js
index 39c9818..d957c3c 100644
--- a/src/pages-collection.js
+++ b/src/pages-collection.js
@@ -33,7 +33,7 @@ const FORMATS = { // + Exports/Modules
     html: {extension: '.html', language: 'html', type: 'text/html'}, // HTML
     log: {extension: '.log', language: 'plaintext', type: 'text/plain'},
 
-    dot: {extension: '.dot', pageType: 'Viz', language: 'dot', type: 'text/plain'},
+    dot: {extension: '.dot', pageType: 'viz', language: 'dot', type: 'text/plain'},
     xls: {extension: '.xls', pageType: 'info', type: 'application/vnd.ms-excel'},
 };
 
@@ -85,13 +85,16 @@ export class PagesCollection {
       let format = FORMATS[formatName];
       if (format.pageType==='info') {
         var page = new InfoPage(filepath, deleteBtn, rightSide, format.type)
-            .addTo(this);
+          .addTo(this);
+      } else if (format.pageType==='viz') {
+        page = new VizPage(filepath, deleteBtn, rightSide, format.type)
+          .addTo(this);
       } else {
         page = new EditorPage(filepath, {language: format.language, readOnly: readOnly}, deleteBtn, rightSide, format.type)
           .addTo(this);
       }
 
-      page.fromArrayBuffer(ab);
+      await page.fromArrayBuffer(ab);
 
       return page;
     }
diff --git a/src/viz-page.js b/src/viz-page.js
index e1fbf5b..0bcda6f 100644
--- a/src/viz-page.js
+++ b/src/viz-page.js
@@ -8,5 +8,31 @@ import { instance } from "@viz-js/viz";
 import Page from './abstract-page';
 
 export default class VizPage extends Page {
+    constructor(id, deleteBtn=true, rightSide=false, mimeType='application/octet-stream') {
+        super(id, deleteBtn, rightSide, mimeType);
+    }
+    async fromArrayBuffer(ab){
+        let text = new TextDecoder('utf-8').decode(ab);
+        this.text = text;
 
+        let viz = await instance();
+        console.log(viz.engines)
+        let svg =  viz.renderSVGElement(text, { // https://viz-js.com/api/#viz.RenderOptions
+            //format: 'dot', // ignored
+            engine: 'dot', //'circo', 'dot', 'fdp', 'neato', 'nop', 'nop1', 'nop2', 'osage', 'patchwork', 'sfdp', 'twopi'
+            yInvert: true,
+            //reduce: false,
+            //graphAttributes:
+            //nodeAttributes:
+            //edgeAttributes:
+        });
+        this.editorContainer.appendChild(svg);
+
+        return this;
+    }
+    getArrayBuffer() {
+        let text = this.text;
+  
+        return new TextEncoder().encode(text).buffer;
+    }
 }