fix: fixes #209 and #93

Author: jorisvanzundert

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;
 }

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 );
     }
 

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

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 );
   }
 
 }

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.