From e4e9981149fb1ad5c3ecfff4f9422c2fca768d8c Mon Sep 17 00:00:00 2001
From: Joris van Zundert <joris.van.zundert@gmail.com>
Date: Thu, 23 May 2024 23:45:18 +0200
Subject: [PATCH] fix: fixes #209 and #93

---
 frontend/www/src/css/dashboard-stemmaweb.css  |  1 -
 .../tradition/section/sectionList.js          |  1 +
 .../tradition/stemma/stemmaButtons.js         |  2 +-
 .../tradition/stemma/stemmaRenderer.js        | 26 ++++++++++++++-----
 .../dashboard/tradition/traditionList.js      | 10 ++++---
 5 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/frontend/www/src/css/dashboard-stemmaweb.css b/frontend/www/src/css/dashboard-stemmaweb.css
index b4ad9941..594d6833 100644
--- a/frontend/www/src/css/dashboard-stemmaweb.css
+++ b/frontend/www/src/css/dashboard-stemmaweb.css
@@ -173,7 +173,6 @@ edit-stemma-buttons a.greyed-out div {
 #graph-area {
   background-color: white;
   width: 100%;
-  /* height: 40vw; */
   height: 90%;
   padding: 1em;
 }
diff --git a/frontend/www/src/js/modules/dashboard/tradition/section/sectionList.js b/frontend/www/src/js/modules/dashboard/tradition/section/sectionList.js
index f6e8348d..a8743753 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/section/sectionList.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/section/sectionList.js
@@ -126,6 +126,7 @@ class SectionList extends HTMLElement {
                 (tradition) => { return tradition.id == traditionId } 
             )
         );
+        TraditionList.highlightFolderSelectedTradition( traditionId );
         SECTION_STORE.setSelectedSection( section );
     }
     
diff --git a/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaButtons.js b/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaButtons.js
index 3b027529..4edfb371 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaButtons.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaButtons.js
@@ -60,7 +60,7 @@ class StemmaButtons extends HTMLElement {
 
   render() {
     this.innerHTML = `
-    <div id="stemma_buttons" class="btn-toolbar mb-2 mb-md-0">
+    <div id="stemma-buttons" class="btn-toolbar mb-2 mb-md-0">
       <div class="btn-group me-2">
         <button id="run-stemweb-button" type="button" class="btn btn-sm btn-outline-secondary">
           Run Stemweb
diff --git a/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaRenderer.js b/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaRenderer.js
index 983b63e2..00be464f 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaRenderer.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaRenderer.js
@@ -66,21 +66,33 @@ class StemmaRenderer {
     Download.set_downloads( stemma.dot );
   }
  
+  /**
+   * Resizes the current graph/stemma when the browser window gets 
+   * resized. Also set the new corresponding with on the GraphViz 
+   * renderer so that subsequent stemmas are depicted at the right
+   * size.
+   */
   resizeSVG() {
     const margin = 14;
+    const stemmaButtonsRowHeight = document.querySelector( '#stemma-buttons' ).getBoundingClientRect()['height'];
     const bbrect = document.querySelector( '#graph-area' ).getBoundingClientRect();
-    const width = bbrect['width'];
-    const height = bbrect['height'];
+    const width = bbrect['width'] - ( 2 * margin );
+    const factor = bbrect['height'] / window.innerHeight;
+    const height = bbrect['height'] - stemmaButtonsRowHeight;
     const graphArea = d3.select('#graph-area');
     const svg = graphArea.select("#graph").selectWithoutDataPropagation("svg");
     svg
         .transition()
         .duration(700)
-        .attr("width", width - 2*margin)
-        .attr("height", height - 2*margin);
-    // var d = svg.datum();
-    // d.attributes['width'] = width - margin;
-    // d.attributes['height'] = height - margin;
+        .attr("width", width )
+        .attr("height", height );
+    // This is a bit weird, but we need to reset the size of the original
+    // graphviz renderer that was set when the line
+    // `const stemmaRenderer = new StemmaRenderer();`
+    // was executed, and not on `this`. There's probably 
+    // cleaner ways to do this.
+    stemmaRenderer.graphvizRoot.width( width );
+    stemmaRenderer.graphvizRoot.height( height );
   }
 
 }
diff --git a/frontend/www/src/js/modules/dashboard/tradition/traditionList.js b/frontend/www/src/js/modules/dashboard/tradition/traditionList.js
index b794085b..ecaba85b 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/traditionList.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/traditionList.js
@@ -55,12 +55,16 @@ class TraditionList extends HTMLElement {
      */
     selectTradition( evt, tradition ) {
         evt.preventDefault();
-        document.querySelector( '#traditions-list div.folder-icon.selected' ).classList.toggle( 'selected' );
-        document.querySelector( `#traditions-list div.folder-icon[trad-id="${tradition.id}"]` ).classList.toggle( 'selected' );
+        TraditionList.highlightFolderSelectedTradition( tradition.id );
         TRADITION_STORE.setSelectedTradition( tradition );
         SECTION_STORE.setSelectedSection( null );
     }
-        
+    
+    static highlightFolderSelectedTradition( tradition_id ){
+        document.querySelector( '#traditions-list div.folder-icon.selected' ).classList.toggle( 'selected' );
+        document.querySelector( `#traditions-list div.folder-icon[trad-id="${tradition_id}"]` ).classList.toggle( 'selected' );
+    }
+
     /**
      * Toggles the visibility of the sections list for each
      * tradition in the list or traditions.