Extension of the Tree Annotation Tool

.github/workflows/deploy.yml

@@ -11,10 +11,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
-    - uses: DeLaGuardo/setup-clojure@2.0
+    - uses: actions/checkout@v3
+    - uses: DeLaGuardo/setup-clojure@11.0
       with:
-        tools-deps: '1.10.1.469'
+        cli: '1.10.1.693'
     - name: Compile
       run: |
         clojure -Amin

README.md

@@ -5,6 +5,32 @@ by [Daniel Harasim](https://people.epfl.ch/daniel.harasim),
 and the [Digital and Cognitive Musicology Lab (DCML)](https://dcml.epfl.ch)
 
 Find the web app [here](https://dcmlab.github.io/tree-annotation-code/).
+New version available [here](https://kreslotim.github.io/tree-annotation-code/).
+
+## Changelog
+### Version 0.2.0 (August 2, 2023)
+
+- Controls enhancements:
+	* Added `Elaborate` functionality, allowing top-down tree expansion with new generated node quantities determined by `Split arity`. Accessible using the `e` shortcut key on the selected node(s).
+	* Added `Unelaborate` functionality that serves as the counter-action to `Elaborate`, designed to eliminate descendants of the applied node. Accessible using the `u` or `Ctrl+E` shortcut keys on the selected node(s).
+	* Added `Uncombine` functionality  that serves as the counter-action to `Combine`, effectively eliminating selected nodes and their ancestors, barring the leaves. Accessible via the `Backspace` or `Ctrl+U` shortcut keys on the selected node(s).
+	* Improved `Delete` functionality, to permit deletion of all node types in the tree, including leaves or roots as well. Accessible via `delete` shortcut key on the selected node(s).
+	* Added `Undo` & `Redo` functionalities to manipulate the history of forest modifications. Accessible through `Ctrl+Z` and `Ctrl+Y` shortcut keys.
+	* Added `⬅` and `➡` buttons to create new root nodes on the corresponding side of the tree, accessible via respective arrow keys.
+
+* Visual interpretation
+	* Enhanced node aesthetics, ensuring nodes extend to the edges of the viewbox, always forming a rectangular forest shape.
+	* Added `Reverse tree` option to render the forest in an upside-down format, placing leaves at the top and roots at the bottom, akin to the previous version.
+	* Added `Math tree` option to render all forest nodes and preview tree labels in $\LaTeX$ format.
+	* Included the ability to manually enter $\LaTeX$-formatted input into a specific node, achieved by renaming the node and enclosing the input text with either `$` or `$$` symbols.
+
+* User interaction
+	* Resolved issues with renaming nodes, which can now be confirmed by clicking outside of the node, in addition to pressing `Enter` or `r` while editing.
+	* Introduced a scrolling feature to navigate the webpage in all directions, useful when the tree dimensions exceed screen size.
+
+* Output saving
+	* Added `Save forest` feature to enable saving the forest image in .png format.
+	* Added `Save preview` feature to enable saving the image of the preview tree in .svg format.
 
 ![A screenshot of the tool](screenshot.jpg)
 

resources/public/css/style.css

@@ -59,6 +59,61 @@ code {
     background: rgb(202,60,60);
 }
 
+.button-elaborate {
+color: black;
+    /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
+    background: rgb(255,180,80);
+}
+
+.button-combine {
+color: black;
+    /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
+    background: rgb(136,210,0);
+}
+
+.button-uncombine {
+color: white;
+    /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
+    background: rgb(150,150,150);
+}
+
+.button-undo {
+    color: white;
+    /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
+    background: rgb(250,30,0);
+}
+
+.button-redo {
+    color: white;
+    /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
+    background: rgb(250,160,0);
+}
+
+.wrapper {
+    width: fit-content;
+    margin: 0 auto; /* centers the wrapper */
+}
+
+.button-new-left {
+    transform: translateY(-50%);  /* This is to counteract the offset from top */
+}
+
+.button-new-right {
+    transform: translateY(-50%);  /* This is to counteract the offset from top */
+}
+
+.reverse-box {
+    position: absolute;
+    margin-top: -20px;
+    margin-left: 20px;
+}
+
+.math-box {
+    position: absolute;
+    margin-left: 20px;
+}
+
+
 textarea {
     max-width: 100%;
 }
@@ -69,13 +124,17 @@ textarea {
 }
 
 .controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 1em;
     width: max-content;
 }
 
 .forest {
+    margin-top: 20px;
     display: flex;
     flex-direction: row;
     width: min-content;
@@ -90,7 +149,22 @@ textarea {
 
 .subtree {
     /* margin-top: 1px; */
+    display: flex;
+    flex-direction: column;
+    margin-right: 2px;
+    margin-top: 2px;
+    margin-bottom: 0px;
+    flex-grow: 1;
+    flex-basis: auto;
+}
+
+.subtree.reversed {
+    /* margin-top: 1px; */
+    display: flex;
+    flex-direction: column-reverse;
     margin-right: 2px;
+    margin-top: 0px;
+    margin-bottom: 2px;
     flex-grow: 1;
     flex-basis: auto;
 }
@@ -100,21 +174,29 @@ textarea {
 }
 
 .children {
-    margin-bottom: 2px;
+    margin-bottom: 0px;
+    margin-top: 0px;
     width: 100%;
+    flex-grow: 0;
 }
 
+
 .node {
     /* position: absolute; */
     border-style: solid;
     border-width: thin;
     border-color: #555;
+    display: flex;
     text-align: center;
+    align-items: center;
+    justify-content: center;
     min-width: 10px;
     padding: 0.5em 1em;
+    flex-grow: 1;
 
 }
 
+
 div.node {
     cursor: pointer;
     background-color: #ccc;
@@ -134,3 +216,19 @@ div.node.selected {
 div.node.tree-selected {
     background-color: #88e;
 }
+
+.katex .katex-mathml {
+    position: static;
+    clip: auto;
+    padding: 3px;
+    border: 0;
+    height: auto; 
+    width: auto; 
+    overflow: hidden;
+    display: block;
+}
+
+.katex .katex-html {
+    display: none;
+}
+

resources/public/index.html

@@ -8,6 +8,10 @@
     <link href="css/style.css" rel="stylesheet" type="text/css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="https://clojurescript.org/images/cljs-logo-icon-32.png">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
   </head>
   <body>
     <div id="app"></div>