Pretty-print JAAL

Fulfil Aalto-LeTech#6

`package.json`: add `fracturedjsonjs` package as dependency
`dijkstraPE-research.html`: Remove unused checkbox + button scaffolding.
`player.js`: adapt the JAAL modal popup to directly display the JAAL dump.
Give the modal a z-index higher than the edge labels (700).
JSON.stringify to replace the svg dumps with data size.
Use `fracturedjsonjs`'s `formatter` to give the condensed JSON print.
maxInLineLength restricts how objcets/arrays are serialised. max of 40
gives in-line arrays, but objects still expanded. Max of 50 gives
inline arrays and `node` list in `dataStructures` as single-line.
Default of 80 gives inconsistent `edge` list in `dataStructures`, as the
single-character id number, node numbers and tag is 80 long.
It needs to be set either longer or shorter.

package.json

@@ -25,6 +25,7 @@
     "jest": "^28.1.0"
   },
   "dependencies": {
+    "fracturedjsonjs": "^2.2.1",
     "genversion": "^3.1.1",
     "he": "^1.2.0"
   }

player.js

@@ -8,6 +8,7 @@ const animationView = require('./animation/animation-view.js');
 const modelAnswerView = require('./animation/model-answer-view.js');
 const jsonViewer = require('./json-viewer/index');
 const version = require('./utils/version');
+const { Formatter, EolStyle } = require("fracturedjsonjs");
 
 // HTML Entity encoder/decoder library. https://github.com/mathiasbynens/he
 const he = require('he');
@@ -327,12 +328,20 @@ function fitInnerMeasure(pageMeasure, modalMeasure, desiredOffset) {
 function showJaal(submission) {
   const modal = $('#jaalTreeModal');
   modal.css('display', 'block');
-  $('#show-jaal').on('click', () => {
-    const htmlToString = $('#html-to-string').prop('checked');
-    const modalContent = jsonViewer.jsonToHTML(submission)(true)(htmlToString);
-    $("#jaalTreeContent").html(modalContent);
-    jsonViewer.setClickListeners();
-  })
+  modal.css("z-index", "1000");
+  const sub = JSON.parse(JSON.stringify(submission, 
+              function(key, value) {
+                if (key === "image" || key === "svg") {
+                  return "SVG (" +  (new TextEncoder().encode(value)).length
+                       + " bytes)";
+                } 
+                return value;
+              }, 2));
+  const formatter = new Formatter();
+  formatter.maxInlineLength = 40;
+  $("#jaalTreeContent").html(formatter.serialize(sub))
+  $("#jaalTreeContent").css("white-space", "pre-wrap");  
+  $("#jaalTreeModal").css("height", $(window).height());
   const close = $('#jaalTreeModal-close');
   close.on('click', () => modal.css('display', 'none'));
 }

testbench/OpenDSA/AV/Development/DijkstraPE-research.html

@@ -141,10 +141,10 @@ <h4>In this mode you can see all the click actions and if the model answer was o
           <span class="jaal-close" id="jaalTreeModal-close">&times;</span>
         </div>
         <div>
-          <p>JSON Algorithm Animation Language (JAAL) viewer</p>
-          <label for="html-to-string">Display JAAL HTML content as string</label>
+          <h3>JSON Algorithm Animation Language (JAAL) viewer</h3>
+          <!-- <label for="html-to-string">Display JAAL HTML content as string</label>
           <input type="checkbox" id="html-to-string" value="">
-          <button type="button" id="show-jaal">Show</button>
+          <button type="button" id="show-jaal">Show</button> -->
           <div id="jaalTreeContent"></div>
         </div>
       </div>