feat: implements #217, #219, #220

frontend/www/index.html

@@ -325,6 +325,10 @@
       src="./src/js/modules/dashboard/relationmapper/relationMapper.js"
       type="application/javascript"
     ></script>
+    <script
+      src="./src/js/modules/dashboard/relationmapper/sectionSelectors.js"
+      type="application/javascript"
+    ></script>
 
   </body>
 </html>

frontend/www/src/css/dashboard-stemmaweb.css

@@ -29,6 +29,16 @@
   padding: 0% 1.5% 0% 1.5%;
 } 
 
+#main.col-7 {
+  transition: width 1s, margin 1s;
+}
+
+#main.col-9 {
+  margin-left: 0;
+  transition: width 1s, margin 1s;
+  transition-delay: 500ms, 500ms;
+}
+
 /*
  * Sidebar
  */
@@ -103,6 +113,10 @@ edit-stemma-buttons {
   align-items: flex-start;
 }
 
+#edit-stemma-buttons-right .greyed-out {
+  pointer-events: none;
+}
+
 #stemma-selector-buttons {
   width: 50%;
   display: flex;
@@ -258,12 +272,12 @@ edit-stemma-buttons a.greyed-out div {
   transition: width 0.4s ease-in-out;
 }
 
-#stemma-selectors {
+#stemma-selectors, #section-selectors {
   display: flex;
   justify-content: flex-start;
 }
 
-.stemma-selector.selected svg {
+.stemma-selector.selected svg, .section-selector.selected svg {
   fill: rgb(210,210,210);
 }
 
@@ -422,4 +436,16 @@ relation-mapper {
 button.selected-view {
   color: #fff;
   background-color: #87aade;
+}
+
+#section-title {
+  font-size: 140%;
+}
+
+#section-loader-spinner {
+  display: none;
+}
+
+#section-loader-spinner.show {
+  display: inline;
 }

frontend/www/src/js/modules/common/effects.js

@@ -19,30 +19,70 @@ function speedy_transition(transition) {
   return transition.delay( 25 ).duration( 150 ).ease( d3.easeLinear );
 }
 
-function crossFade( elementIn, elementOut=null, options={ 'display': 'flex', 'duration': 1000 } ){
+function crossFade( elementIn, elementOut=null, options={} ){
+  const defaults = { 'display': 'flex', 'duration': 1000, 'onEnd': null };
+  const usedOptions = { ...defaults, ...options };
   if( elementOut ) {
     var elemIn = d3.select( elementIn );
     var elemOut = d3.select( elementOut );
-    var duration = options.duration / 2;
+    var stepDuration = usedOptions.duration / 2;
     elemOut
       .transition()
-      .duration( duration )
-      .style( 'opacity',  0)
+      .duration( stepDuration )
+      .style( 'opacity',  0 )
       .on( 'end', () => {
         elemOut.style( 'display', 'none' );
         elemIn
-          .style( 'display', options.display )
+          .style( 'display', usedOptions.display )
           .transition()
-          .duration( duration )
-          .style( 'opacity', 1 );
+          .duration( stepDuration )
+          .style( 'opacity', 1 )
+          .on( 'end', usedOptions.onEnd );
       })
   }
 }
 
-function fadeToDisplayFlex( element ){
+function fadeToDisplayFlex( element, options ){
+  const defaultOptions = { 'duration': 500, 'delay': 0, 'onEnd': null };
+  const usedOptions = { ...defaultOptions, ...options };
   d3.select( element )
     .style( 'display', 'flex' )
     .transition()
-    .duration( 1000 )
-      .style( 'opacity', 1 );
+    .duration( usedOptions.duration )
+    .style( 'opacity', 1 )
+    .on( 'end', () => {
+      if ( usedOptions.onEnd ) { 
+        usedOptions.onEnd();
+      }
+    } );
+}
+
+function fadeToDisplayNone( element, options={} ){
+  const defaultOptions = { 'duration': 500, 'delay': 0, 'reverse': false, 'onEnd': null };
+  const usedOptions = { ...defaultOptions, ...options };
+  if( !options.reverse ) {
+    d3.select( element )
+      .transition()
+      .delay( usedOptions.delay )
+      .duration( usedOptions.duration )
+      .style( 'opacity',  0 )
+      .on( 'end', () => {
+        d3.select( element ).style( 'display', 'none' );
+        if( usedOptions.onEnd ){ 
+          usedOptions.onEnd();
+        }
+    } );
+  } else {
+    d3.select( '#sidebar-menu' ).node().style.removeProperty( 'display' )
+    d3.select( element )
+      .transition()
+      .delay( usedOptions.delay )
+      .duration( usedOptions.duration )
+      .style( 'opacity',  1 )
+      .on( 'end' , () => { 
+        if( usedOptions.onEnd ) {
+          usedOptions.onEnd();
+        }
+      } );
+  }
 }

frontend/www/src/js/modules/dashboard/relationmapper/relationMapper.js

@@ -20,7 +20,10 @@ class RelationMapper extends HTMLElement {
     }
 
     render() {
-        this.innerHTML = `<div id="relation-mapper-div" style="width:100%;"></div>`
+        this.innerHTML = `
+            <div id="relation-mapper-div" style="width:100%;">
+                <section-selectors></section-selectors>
+            </div>`
     }
 
 }

frontend/www/src/js/modules/dashboard/relationmapper/relationRenderer.js

@@ -1,10 +1,20 @@
 class RelationRenderer {
 
     #relGvr = null;
-
+    #height = 0;
+    #width = 0;
+
     constructor() {
     }
 
+    set height( height ) {
+      this.#height = height;
+    }
+
+    set width( width ) {
+      this.#width = width;
+    }
+
     get relationMapperGraphvizRoot() {
       if( this.#relGvr == null ){
         this.#createGraphvizRoot();
@@ -23,14 +33,10 @@ class RelationRenderer {
         const graph = selection.empty()
         ? relationMapperArea.append( 'div' ).attr( 'id', 'relation-graph' )
         : selection;
-      // Because the relation mapper container is `display: none` on initialization
-      // we use the dimensions of the stemma renderer that is already depicted.
-      const stemmaRendererDimensions = document.querySelector( '#graph' ).getBoundingClientRect();
-      graph.style( 'height', `${stemmaRendererDimensions.height}px` );
+      graph.style( 'height', `${this.#height}px` );
       this.#relGvr = graph
         .graphviz()
-        .width( stemmaRendererDimensions.width )
-        .height( stemmaRendererDimensions.height );
+        .logEvents( false );
     }
 
     /**
@@ -40,44 +46,72 @@ class RelationRenderer {
      * @param {Tradition} tradition
      * @param {Stemma} stemma
      */
-    renderRelationsGraph( dot ) {
+    renderRelationsGraph( dot, options={} ) {
+      const defaultOptions =  { 
+        'onEnd': () => {}
+      };
+      const usedOptions = { ...defaultOptions, ...options };
+      this.#height = usedOptions.height || this.#height;
+      this.#width = usedOptions.width || this.#width;
+      this.relationMapperGraphvizRoot
+        .width( this.#width )
+        .height( this.#height )
+        .on( 'end', usedOptions.onEnd );
       this.relationMapperGraphvizRoot.renderDot( dot );
       if( this.relationMapperGraphvizRoot.zoomSelection() != null ){
         this.relationMapperGraphvizRoot.resetZoom();
       };
     }
 
-    // /**
-    //  * 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'] - ( 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 )
-    //       .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 );
-    // }
-
+    // TODO: resizing on window change size.
+
+    /**
+     // TODO(?): Why do we destroy the graphviz instance for the relation mapper on the node
+     * on the node we created it for? It makes more sense to keep the instance and reuse
+     * it to depict new versions of the same relation graph, or to depict relations
+     * form other sections/traditions, right? Yes, except if we do the rendering of 
+     * subsequent relation graphs takes forever. Below are the logs of an initial and
+     * follow up renderings (numbers are time in ms per event). No idea why the same
+     * graph takes 7 seconds to render a second time, while it only takes 1 initially.
+     *
+     * Initial rendering
+     * 
+     * Event  2 layoutStart            0
+     * Event  3 layoutEnd            869
+     * Event  4 dataExtractEnd        81
+     * Event  5 dataProcessPass1End   19
+     * Event  6 dataProcessPass2End    5
+     * Event  7 dataProcessEnd         1
+     * Event  8 renderStart            0
+     * Event 14 zoom                 119
+     * Event  9 renderEnd              0
+     * Event 13 end                    0
+     * 
+     * 
+     * Second rendering
+     * 
+     * Event  2 layoutStart            1
+     * Event  3 layoutEnd            847
+     * Event  4 dataExtractEnd        73
+     * Event  5 dataProcessPass1End 6259
+     * Event  6 dataProcessPass2End    5
+     * Event  7 dataProcessEnd         0
+     * Event  8 renderStart            0
+     * Event 14 zoom                   1
+     * Event  9 renderEnd             83
+     * Event 13 end                    1
+     * Event 14 zoom                   0 
+     */
+
+    destroy() {
+      if ( this.#relGvr ) {
+        this.#relGvr.destroy();
+        this.#relGvr = null;
+      }
+      d3.select( '#relation-graph' ).remove();
+    }
+
   }
 
   const relationRenderer = new RelationRenderer();
-//   d3.select( window ).on( 'resize', stemmaRenderer.resizeSVG );