Script fix + small optical changes

app/static/js/CorpusAnalysis/CorpusAnalysisApp.js

@@ -42,16 +42,17 @@ class CorpusAnalysisApp {
                 this.renderTextInfoList(data);
                 this.renderTextProportionsGraphic(data);
                 this.renderWordFrequenciesGraphic(data);
+                this.renderBoundsGraphic(data);
               }
             );
-          this.data.corpus.o.getCorpusData()
-            .then(corpusData => {
-              // this.renderGeneralCorpusInfo(corpusData);
-              // this.renderTextInfoList(corpusData);
-              // this.renderTextProportionsGraphic(corpusData);
-              // this.renderWordFrequenciesGraphic(corpusData);
-              this.renderWordDistributionsGraphic(corpusData);
-            });
+          // this.data.corpus.o.getCorpusData()
+          //   .then(corpusData => {
+          //     // this.renderGeneralCorpusInfo(corpusData);
+          //     // this.renderTextInfoList(corpusData);
+          //     // this.renderTextProportionsGraphic(corpusData);
+          //     // this.renderWordFrequenciesGraphic(corpusData);
+          //     // this.renderWordDistributionsGraphic(corpusData);
+          //   });
           // TODO: Don't do this hgere
           cQiCorpus.updateDb();
           this.enableActionElements();
@@ -142,6 +143,7 @@ class CorpusAnalysisApp {
   
       textData.push(resource);
     }
+
     corpusTextInfoList.add(textData);
 
     let textCountChipElement = document.querySelector('.text-count-chip');
@@ -160,7 +162,7 @@ class CorpusAnalysisApp {
     ];
     let graphLayout = {
       height: 600,
-      width: 600
+      width: 900
     };
     Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout);
   }
@@ -169,8 +171,10 @@ class CorpusAnalysisApp {
     let wordFrequenciesGraphicElement = document.querySelector('#word-frequencies-graphic');
     let words = Object.entries(corpusData.corpus.lexicon[0].freqs.word).sort((a, b) => b[1] - a[1]).slice(0, 5);
     let texts = Object.entries(corpusData.text.lexicon);
+    
     let graphData = [];
     for (let word of words) {
+      console.log(texts.map(text => text[1].freqs.word[word[0]]));
       let data = {
         x: texts.map(text => `${corpusData.lookups.text[text[0]].title} (${corpusData.lookups.text[text[0]].publishing_year})`),
         y: texts.map(text => text[1].freqs.word[word[0]]),
@@ -182,30 +186,46 @@ class CorpusAnalysisApp {
 
     let graphLayout = {
       height: 600,
-      width: 600,
+      width: 900,
       barmode: 'stack',
       type: 'bar'
     };
     Plotly.newPlot(wordFrequenciesGraphicElement, graphData, graphLayout);
   }
 
-  renderWordDistributionsGraphic(corpusData) {
-    // let wordDistributionGraphicElement = document.querySelector('#word-distributions-graphic');
-    // var trace1 = {
-    //   x: [1, 2, 3, 4],
-    //   y: [10, 11, 12, 13],
-    //   mode: 'markers',
-    //   marker: {
-    //     size: [40, 60, 80, 100]
-    //   }
-    // };
-    // var data = [trace1];
-    // var layout = {
-    //   title: 'Marker Size',
-    //   showlegend: false,
-    //   height: 500,
-    //   width: 600
-    // };
-    // Plotly.newPlot(wordDistributionGraphicElement, data, layout);
+  renderBoundsGraphic(corpusData) {
+      let boundsGraphicElement = document.querySelector('#bounds-graphic');
+
+      let graphData = [];
+      let texts = Object.entries(corpusData.text.lexicon);
+
+      graphData = [{
+        type: 'bar',
+        x: texts.map(text => text[1].bounds[1] - text[1].bounds[0]),
+        y: texts.map(text => corpusData.lookups.text[text[0]].title),
+        base: texts.map(text => text[1].bounds[0]),
+        text: texts.map(text => `${corpusData.lookups.text[text[0]].title} (${corpusData.lookups.text[text[0]].publishing_year})`),
+        orientation: 'h',
+        hovertemplate: '%{base} - %{x} <br>%{y}',
+        showlegend: false
+      }];
+
+      let graphLayout = {
+        height: 600,
+        width: 2000,
+        barmode: 'stack',
+        type: 'bar',
+        showgrid: false,
+        xaxis: {
+          rangemode: 'nonnegative',
+          autorange: true
+        },
+        yaxis: {
+          autorange: true,
+          showticklabels: false
+        }
+      };
+    
+      Plotly.newPlot(boundsGraphicElement, graphData, graphLayout);
   }
 }

app/templates/_scripts.html.j2

@@ -1,7 +1,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fast-json-patch/3.1.1/fast-json-patch.min.js" integrity="sha512-5uDdefwnzyq4N+SkmMBmekZLZNmc6dLixvVxCdlHBfqpyz0N3bzLdrJ55OLm7QrZmgZuhLGgHLDtJwU6RZoFCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js" integrity="sha512-93wYgwrIFL+b+P3RvYxi/WUFRXXUDSLCT2JQk9zhVGXuS2mHl2axj6d+R6pP+gcU5isMHRj1u0oYE/mWyt/RjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js" integrity="sha512-HTENHrkQ/P0NGDFd5nk6ibVtCkcM7jhr2c7GyvXp5O+4X6O5cQO9AhqFzM+MdeBivsX7Hoys2J7pp2wdgMpCvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="https://cdn.plot.ly/plotly-2.24.1.min.js" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.2/plotly.min.js" integrity="sha512-dAXqGCq94D0kgLSPnfvd/pZpCMoJQpGj2S2XQmFQ9Ay1+96kbjss02ISEh+TBNXMggGg/1qoMcOHcxg+Op/Jmw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 {%- assets
   filters='rjsmin',

app/templates/corpora/analysis.html.j2

@@ -98,27 +98,31 @@
       </div>
     </div>
     <div class="row">
-      <div class="col s4">
+      <div class="col s6">
         <div class="card hoverable">
           <div class="card-content">
-            <span class="card-title">Text proportions within the corpus</span>
+            <span class="card-title">Proportions</span>
+            <p>of texts within the corpus</p>
             <div id="text-proportions-graphic"></div>
           </div>
         </div>
       </div>
-      <div class="col s4">
+      <div class="col s6">
         <div class="card hoverable">
           <div class="card-content">
             <span class="card-title">Word frequencies</span>
+            <p>within the texts of the 5 most frequent words in the corpus</p>
             <div id="word-frequencies-graphic"></div>
           </div>
         </div>
       </div>
-      <div class="col s4">
+    </div>
+    <div class="row">
+      <div class="col s12">
         <div class="card hoverable">
           <div class="card-content">
-            <span class="card-title">Word distributions</span>
-            <div id="word-distributions-graphic"></div>
+            <span class="card-title">Text Bounds</span>
+            <div id="bounds-graphic"></div>
           </div>
         </div>
       </div>