Move clusters frontend to jinja templating ...

... rather than an entirely javascript based rendering. This speeds up the rendering of the page considerably because the browser no longer needs to spend so much time to render the data. It would be possible to paginate it as well.
CentreForCorpusResearch · Jul 1, 2015 · d1360d5 · d1360d5
1 parent ac3b04a
commit d1360d5
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 49 deletions.
diff --git a/clic/web/index.py b/clic/web/index.py
@@ -1,26 +1,54 @@
 from __future__ import absolute_import  ## help python find modules within clic package (see John H email 09.04.2014)
 from flask import Flask, render_template, url_for, redirect, request
-from clic.web.api import api
+
+from clic.web.api import api, fetchClusters
+from clic.chapter_repository import ChapterRepository
 
 app = Flask(__name__, static_url_path='')
 app.register_blueprint(api, url_prefix='/api')
 
-from clic.chapter_repository import ChapterRepository
+#TODO delete:
+# from flask_debugtoolbar import DebugToolbarExtension
+# app.debug = True
+# app.config["SECRET_KEY"] = "jadajajada"
+# toolbar = DebugToolbarExtension(app)
 
 '''
 Application routes
 '''
+
+#==============================================================================
+# Home, about, docs, 404
+#==============================================================================
 @app.route('/', methods=['GET'])
 def index():
     return redirect(url_for('concordances')) # current home page. may change
 
+@app.route('/about/', methods=['GET'])
+def about():
+    return render_template("about.html")
+
+@app.route('/documentation/', methods=['GET'])
+def documentation():
+    return render_template("documentation.html")
+
+@app.errorhandler(404)
+def page_not_found(error):
+    return render_template('page-not-found.html'), 404
+
+#==============================================================================
+# Concordances
+#==============================================================================
 @app.route('/concordances/', methods=['GET'])
 def concordances():
     if 'terms' in request.args.keys(): # form was submitted
         return render_template("concordance-results.html")
     else:
         return render_template("concordance-form.html")
 
+#==============================================================================
+# Keywords
+#==============================================================================
 @app.route('/keywords/', methods=['GET'])
 def keywords():
     if 'testIdxGroup' in request.args.keys(): # form was submitted
@@ -40,32 +68,38 @@ def keywords():
     else:
         return render_template("keywords-form.html")
 
+#==============================================================================
+# Clusters
+#==============================================================================
 @app.route('/clusters/', methods=['GET'])
 def clusters():
     if 'testIdxGroup' in request.args.keys(): # form was submitted
 
-        # get parameters for redirecting to the concordance page
         IdxGroup = request.args.get('testIdxGroup')
+        # FIXME this might not work when dealing with only a few books,
+        # rather than an entire subcorpus, in that case better use:
+        # collection = args.getlist('testCollection') ## args is a 
+        ## multiDictionary: use .getlist() to access individual books
         testCollection = request.args.get('testCollection')
         testIdxMod = request.args.get('testIdxMod')
         selectWords = "whole"
+
+        args = request.args
+        clusters_result = fetchClusters(args)
 
         return render_template("clusters-results.html",
                                IdxGroup=IdxGroup,
                                testCollection=testCollection,
                                testIdxMod=testIdxMod,
-                               selectWords=selectWords)
+                               selectWords=selectWords,
+                               clusters=clusters_result)
+
     else:
         return render_template("clusters-form.html")
 
-@app.route('/about/', methods=['GET'])
-def about():
-    return render_template("about.html")
-
-@app.route('/documentation/', methods=['GET'])
-def documentation():
-    return render_template("documentation.html")
-
+#==============================================================================
+# Chapters
+#==============================================================================
 @app.route('/chapter/<book>/<int:number>/')
 @app.route('/chapter/<book>/<int:number>/<int:word_index>/<search_term>/')
 def chapterView(number, book, word_index = None, search_term = None):
@@ -78,7 +112,6 @@ def chapterView(number, book, word_index = None, search_term = None):
 
     return render_template("chapter-view.html", content=chapter, book_title=book_title)
 
-
-@app.errorhandler(404)
-def page_not_found(error):
-    return render_template('page-not-found.html'), 404
+# TODO delete?
+# if __name__ == '__main__':
+#    app.run()
diff --git a/clic/web/templates/clusters-results.html b/clic/web/templates/clusters-results.html
@@ -10,14 +10,30 @@
 {% endblock %}
 
 {% block title %}
-    Concordance Search {{ super() }}
+    Clusters {{ super() }}
 {% endblock %}
 
 {% block body %}
   <h2 class="without-pills">Clusters Results</h2>
 
   <div id="resultsWrap">
-    <div id="tableContainer"></div>
+    <div id="tableContainer">
+    <table style="width: 0px; cursor:pointer" aria-describedby="dataTableClusters_info" class="table table-striped table-hover dataTable no-footer uonDatatable" id="dataTableClusters">
+        <thead>
+            <tr role="row">
+                <th aria-label="No" style="width: 0px;" colspan="1" rowspan="1" class="sorting_asc">No</th>
+                <th aria-label="n-gram: activate to sort column ascending" style="width: 0px;" colspan="1" rowspan="1" aria-controls="dataTableClusters" tabindex="0" class="sorting">n-gram</th>
+                <th aria-label="Freq: activate to sort column ascending" style="width: 0px;" colspan="1" rowspan="1" aria-controls="dataTableClusters" tabindex="0" class="sorting">Freq</th>
+                <th aria-label="%: activate to sort column ascending" style="width: 0px;" colspan="1" rowspan="1" aria-controls="dataTableClusters" tabindex="0" class="sorting">%</th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for cluster in clusters %}
+            <tr class="{{ loop.cycle('odd', 'even') }}"><td class="sorting_1">{{ loop.index }}</td><td>{{ cluster[1] }}</td><td>{{ cluster[2] }}</td><td>{{ cluster[3] }}</td></tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    </div>
   </div>
 {% endblock %}
 
@@ -30,54 +46,31 @@ <h2 class="without-pills">Clusters Results</h2>
   <script src="/js/thirdparty/DataTables1.10.0-beta.2/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
   <!-- datatables bootstrap js (css is above) see http://next.datatables.net/manual/styling/bootstrap -->
   <script src="/js/thirdparty/DataTables1.10.0-beta.2/media/js/dataTables.bootstrap.js"></script>
-
+ 
   <script>
       $(function () {
 
-          $('#resultsWrap').hide();
-
-          // Get URL params
-          var params = location.search;
-          var host = window.location.hostname;
-
-          jsonUrl = '/api/clusters/' + params; // from the app
-
-          $('#tableContainer').html('<table class="table table-striped table-hover dataTable no-footer uonDatatable" id="dataTableClusters"></table>');
           var oTable = $('#dataTableClusters').dataTable({
 
-              "ajax": {
-                  "url": jsonUrl,
-                  "dataSrc": "clusters",
-                  "error": function (xhr, error, thrown) {
-                      alert( 'Sorry. Failed to load data. Please try again.' );
-                  }
-              },
-
               "aoColumns": [
                   { "sTitle": "No" },
                   { "sTitle": "n-gram" },
                   { "sTitle": "Freq" },
                   { "sTitle": "%" }
               ],
 
-              "fnDrawCallback": function ( oSettings ) {
-                  /* Need to redo the counters if filtered or sorted */
-                  if ( oSettings.bSorted || oSettings.bFiltered )
-                  {
-                      for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
-                      {
-                          $('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
-                      }
-                  }
-              },
-
               "fnInitComplete": function () {
                 $('#resultsWrap').show();
                 Pace.stop();
               },
 
               "bDeferRender": true,
-              "bPaginate": false,
+              "bPaginate": false, 
+              <!--  I think it makes more sense to use pseudo-pagination: -->
+              <!-- "bPaginate": true, -->
+              <!-- "aLengthMenu": [[5, 10, 15, 25, 50, 100, -1], [5, 10, 15, 25, 50, 100, "All"]], -->
+              <!-- "iDisplayLength" : 50, -->
+
               "bLengthChange": false,
               "bFilter": true,
               "bSort": true,
@@ -119,4 +112,5 @@ <h2 class="without-pills">Clusters Results</h2>
       });
 
   </script>
-{% endblock %}
+
+{% endblock %}
diff --git a/requirements/dev.txt b/requirements/dev.txt
@@ -1,4 +1,5 @@
 -r testing.txt
 
+flask-debug-toolbar==0.10.0
 ipython==2.4.1
 lxml==3.4.1