From 9119a1eebfe864521bd21ff0f963ab9a020d3181 Mon Sep 17 00:00:00 2001
From: Joris van Zundert <joris.van.zundert@gmail.com>
Date: Thu, 23 May 2024 18:28:04 +0200
Subject: [PATCH] refactor: replace and redo stemma selectors

---
 frontend/www/index.html                       |  4 +-
 frontend/www/src/css/dashboard-stemmaweb.css  | 42 ++++++++++--
 .../dashboard/tradition/editProperties.js     |  2 +-
 .../section/editSectionProperties.js          |  2 +-
 .../dashboard/tradition/stemma/editStemma.js  | 67 ++++++++++---------
 .../tradition/stemma/stemmaRenderer.js        | 20 +++++-
 .../dashboard/tradition/traditionView.js      | 37 ++++------
 7 files changed, 107 insertions(+), 67 deletions(-)

diff --git a/frontend/www/index.html b/frontend/www/index.html
index d63026bd..7c75f343 100644
--- a/frontend/www/index.html
+++ b/frontend/www/index.html
@@ -144,8 +144,8 @@
         </main>
 
         <div
-          id="sidebar_properties"
-          class="col-md-3 d-md-block col-lg-3 bg-light sidebar_properties"
+          id="sidebar-properties"
+          class="col-md-3 d-md-block col-lg-3 bg-light sidebar-properties"
         >
           <property-table-view id="property-table-view"></property-table-view>
           <section-properties-view></section-properties-view>
diff --git a/frontend/www/src/css/dashboard-stemmaweb.css b/frontend/www/src/css/dashboard-stemmaweb.css
index dd8d6069..b4ad9941 100644
--- a/frontend/www/src/css/dashboard-stemmaweb.css
+++ b/frontend/www/src/css/dashboard-stemmaweb.css
@@ -22,9 +22,25 @@
   font-size: 1em;
 }
 
+#stemma-buttons-container {
+  width: 100%;
+}
+
 edit-stemma-buttons {
-  display: flex;
   width: 100%;
+  display: flex;
+  align-items: flex-start;
+}
+
+#stemma-selector-buttons {
+  width: 50%;
+  display: flex;
+  justify-content: left;
+}
+
+#edit-stemma-buttons-right {
+  width: 50%;
+  display: flex;
   justify-content: right;
 }
 
@@ -42,6 +58,7 @@ edit-stemma-buttons a.greyed-out div {
 }
 
 #stemma-editor-graph-container {
+  height: 80vh;
   display: flex;
 }
 
@@ -142,12 +159,13 @@ edit-stemma-buttons a.greyed-out div {
   padding-left: 1.8em;
 }
 
-#graph_container {
+#graph-container {
+  z-index: 810;
   width: 100%;
   transition: width 0.2s ease-in-out;
 }
 
-#graph_container.shrunken {
+#graph-container.shrunken {
   width: 50%;
   transition: width 0.4s ease-in-out;
 }
@@ -155,20 +173,30 @@ edit-stemma-buttons a.greyed-out div {
 #graph-area {
   background-color: white;
   width: 100%;
-  height: 40vw;
+  /* height: 40vw; */
+  height: 90%;
   padding: 1em;
 }
 
-#graph_container #graph-area #graph svg {
+#graph-container #graph-area #graph svg {
   width: 100%;
   transition: width 0.2s ease-in-out;
 }
 
-#graph_container.shrunken #graph-area #graph svg {
+#graph-container.shrunken #graph-area #graph svg {
   width: 100%;
   transition: width 0.4s ease-in-out;
 }
 
+#stemma-selectors {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.stemma-selector.selected svg {
+  fill: rgb(210,210,210);
+}
+
 @media (min-width: 200px) {
   .ms-md-perc {
     margin-left: 24.6% !important;
@@ -180,7 +208,7 @@ edit-stemma-buttons a.greyed-out div {
   }
 }
 
-.sidebar_properties {
+.sidebar-properties {
   background: none;
   position: fixed;
   top: 0;
diff --git a/frontend/www/src/js/modules/dashboard/tradition/editProperties.js b/frontend/www/src/js/modules/dashboard/tradition/editProperties.js
index 538eda65..ec347e4d 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/editProperties.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/editProperties.js
@@ -41,7 +41,7 @@ class EditProperties extends HTMLElement {
    * @todo: Add responsiveness on resize.
    */
   #createDialogStyle() {
-    const width = $('sidebar_properties').getBoundingClientRect().width;
+    const width = $('sidebar-properties').getBoundingClientRect().width;
     return (
       `margin-right: 0px; width: ${width}px; margin-top: 50px;`
     );
diff --git a/frontend/www/src/js/modules/dashboard/tradition/section/editSectionProperties.js b/frontend/www/src/js/modules/dashboard/tradition/section/editSectionProperties.js
index f4c3da5b..da7c5b26 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/section/editSectionProperties.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/section/editSectionProperties.js
@@ -23,7 +23,7 @@ class EditSectionProperties extends HTMLElement {
      * @todo: Add responsiveness on resize.
      */
     #createDialogStyle() {
-        const width = $('sidebar_properties').getBoundingClientRect().width;
+        const width = $('sidebar-properties').getBoundingClientRect().width;
         const top = $('property-table-view').getBoundingClientRect().bottom;
         return (
             `margin-right: 0px; width: ${width}px; margin-top: ${top}px;`
diff --git a/frontend/www/src/js/modules/dashboard/tradition/stemma/editStemma.js b/frontend/www/src/js/modules/dashboard/tradition/stemma/editStemma.js
index 9b2c3881..1d33dbfd 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/stemma/editStemma.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/stemma/editStemma.js
@@ -107,9 +107,7 @@ class EditStemma extends HTMLElement {
 
   toggleStemmaEditor() {
     const stemmaEditorContainerElement = document.querySelector( '#stemma-editor-container' );
-    const stemmaSelectorContainerElement = document.querySelector( '#stemma-selector-container')
     stemmaEditorContainerElement.classList.toggle( 'expanded' );
-    stemmaSelectorContainerElement.classList.toggle( 'show' )
     if( stemmaEditorContainerElement.classList.contains( 'expanded' ) ){
       // Here we append an almost invisible backdrop to the document. Its z-index is large and
       // only the z-index of the editor and graph panel is larger. However, both have a lower
@@ -122,7 +120,7 @@ class EditStemma extends HTMLElement {
       // <div id="stemma-editor-graph-container-modal-backdrop"></div>
       // const stemmaEditorModalBackdrop = document.querySelector( '#stemma-editor-graph-container-modal-backdrop' );
     }
-    const graphContainerElement = document.querySelector( '#graph_container' );
+    const graphContainerElement = document.querySelector( '#graph-container' );
     graphContainerElement.classList.toggle( 'shrunken' );
     this.render();
   }
@@ -211,10 +209,11 @@ class EditStemma extends HTMLElement {
 
   cancelEdits() {
     // reset the stemma rendered to the stemma in current state
-    const { tradition, selectedStemma } = STEMMA_STORE.state;
+    const { tradition, availableStemmata, selectedStemma } = STEMMA_STORE.state;
     // Render the stemma, or an empty one if there's none. 
     stemmaRenderer.renderStemma( tradition, selectedStemma || { dot: 'digraph {}' } );
     this.toggleStemmaEditor();    
+    TraditionView.renderStemmaSelectors( availableStemmata );
   }
 
   /** @param {BaseResponse<T>} resp */
@@ -286,33 +285,39 @@ class EditStemma extends HTMLElement {
 
   render() {
     this.innerHTML = `
-      <a
-        id="edit-stemma-button-link"
-        class="link-secondary"
-        href="#"
-        aria-label="Edit this stemma">
-          <div>
-            ${feather.icons['edit'].toSvg()}
-          </div>
-      </a>
-      <a
-        id="add-stemma-button-link"
-        class="link-secondary"
-        href="#"
-        aria-label="Add a stemma to this tradition">
-          <div>
-            ${feather.icons['plus-circle'].toSvg()}
-          </div>
-      </a>
-      <a
-        id="delete-stemma-button-link"
-        class="link-secondary"
-        href="#"
-        aria-label="delete this stemma">
-          <div class="delete-stemma-danger">
-            ${feather.icons['trash'].toSvg()}
-          </div>
-      </a>
+      <div id="stemma-selector-buttons" class="collapse show">
+        <div id="stemma-selectors">
+        </div>
+      </div>
+      <div id="edit-stemma-buttons-right">      
+        <a
+          id="edit-stemma-button-link"
+          class="link-secondary"
+          href="#"
+          aria-label="Edit this stemma">
+            <div>
+              ${feather.icons['edit'].toSvg()}
+            </div>
+        </a>
+        <a
+          id="add-stemma-button-link"
+          class="link-secondary"
+          href="#"
+          aria-label="Add a stemma to this tradition">
+            <div>
+              ${feather.icons['plus-circle'].toSvg()}
+            </div>
+        </a>
+        <a
+          id="delete-stemma-button-link"
+          class="link-secondary"
+          href="#"
+          aria-label="delete this stemma">
+            <div class="delete-stemma-danger">
+              ${feather.icons['trash'].toSvg()}
+            </div>
+        </a>
+      </div>
     `;
     this.greyOut();
     this.addEditStemmaButtonListeners();
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 a8c60c5f..983b63e2 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaRenderer.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/stemma/stemmaRenderer.js
@@ -65,7 +65,25 @@ class StemmaRenderer {
       } );
     Download.set_downloads( stemma.dot );
   }
-  
+ 
+  resizeSVG() {
+    const margin = 14;
+    const bbrect = document.querySelector( '#graph-area' ).getBoundingClientRect();
+    const width = bbrect['width'];
+    const height = bbrect['height'];
+    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;
+  }
+
 }
 
 const stemmaRenderer = new StemmaRenderer();
+d3.select( window ).on( 'resize', stemmaRenderer.resizeSVG );
diff --git a/frontend/www/src/js/modules/dashboard/tradition/traditionView.js b/frontend/www/src/js/modules/dashboard/tradition/traditionView.js
index 78f697c7..959f449c 100644
--- a/frontend/www/src/js/modules/dashboard/tradition/traditionView.js
+++ b/frontend/www/src/js/modules/dashboard/tradition/traditionView.js
@@ -72,7 +72,7 @@ class TraditionView extends HTMLElement {
   static renderStemmaSelectors( stemmata ) {
     // Here we put in the slide indicators that will allow the user to
     // switch to different stemmata.
-    const stemmaSelector = d3.select('#stemma-selector');
+    const stemmaSelector = d3.select('#stemma-selectors');
     stemmaSelector.selectAll('*').remove();
     stemmaSelector
       .selectAll( 'span' )
@@ -83,10 +83,10 @@ class TraditionView extends HTMLElement {
         const selectedIndex = STEMMA_STORE.selectedIndex;
         const isSelected =
           (selectedIndex === -1 && i === 0) || selectedIndex === i;
-        const svg = isSelected
-          ? svg_slide_indicator_active
-          : svg_slide_indicator;
-        return `<div data-index="${i}">${svg}</div>`;
+        const selectedAttr = isSelected
+          ? " selected"
+          : "";
+        return `<div class="stemma-selector link-secondary${selectedAttr}" data-index="${i}">${feather.icons['file'].toSvg()}</div>`;
       })
       .on( 'click', function (e, d) {
         // Update the state with the selected stemma
@@ -96,16 +96,13 @@ class TraditionView extends HTMLElement {
 
   render() {
     this.innerHTML = `
-      <div
-        class="d-flex justify-content-between flex-wrap align-items-center pt-2 pb-1 border-bottom"
-      >
+      <div class="d-flex justify-content-between flex-wrap align-items-center pt-2 pb-1 border-bottom">
         <tradition-title></tradition-title>
-        <div class="d-flex justify-content-end ms-5 pt-3 mb-2 lex-nowrap" id="stemma_buttons_container">
+        <div class="d-flex justify-content-end ms-5 pt-3 mb-2 lex-nowrap" id="stemma-buttons-container">
           <stemma-buttons></stemma-buttons>
         </div>
       </div>
 
-
       <div id="stemma-editor-graph-container">
 
         <div id="stemma-editor-container">
@@ -115,25 +112,17 @@ class TraditionView extends HTMLElement {
           </div>
         </div>
 
-        <div id="graph_container">
+        <div id="graph-container">
+
           <edit-stemma-buttons></edit-stemma-buttons>
   
-          <div class="my-4 w-100" id="graph-area">
+          <div class="" id="graph-area">
           </div>
 
-          <div id="stemma-selector-container" class="collapse show">
-          <div
-            class="my-4 w-100 d-flex justify-content-center"
-            id="stemma-selector"
-          >
-            <!-- svg_slide_indicators go here -->
-          </div>
-          </div>
-        </div>
-      
       </div>
-      `;
-  }
+    `;
+  };
+
 }
 
 customElements.define( 'tradition-view', TraditionView );