feat(js): dt cont;

- Removed responsive modal option and functionality.
- Commented our copy table state button w/ comments.
- Finalized visual table info output.

Author: JVickery-TBS

ckanext/datatablesview/assets/datatablesview.js

@@ -20,7 +20,6 @@ this.ckan.module('datatables_view', function($){
       ckanFilters: null,
       responsiveFlag: false,
       pageLengthChoices: [20, 50, 100, 500, 1000],
-      responsiveModal: false,
       resourceUrl: null,
       dataDictionary: null,
       editable: false,
@@ -98,7 +97,6 @@ function load_datatable(CKAN_MODULE){
   const ckanFilters = CKAN_MODULE.options.ckanFilters;
   const defaultCompactView = CKAN_MODULE.options.responsiveFlag;
   const pageLengthChoices = CKAN_MODULE.options.pageLengthChoices;
-  const useCompactViewModal = CKAN_MODULE.options.responsiveModal;
   const resourceURI = CKAN_MODULE.options.resourceUrl;
   const dataDictionary = CKAN_MODULE.options.dataDictionary;
   const isEditable = CKAN_MODULE.options.editable;
@@ -124,7 +122,9 @@ function load_datatable(CKAN_MODULE){
   const colSortAscLabel = _('Ascending');
   const colSortDescLabel = _('Descending');
   const colSortAnyLabel = _('Any');
-  const estimatedLabel = _('(estimated)');
+  const estimatedLabel = _('Total was estimated');
+  const exactLabel = _('Total is exact');
+  const elapsedTimeLabel = _('seconds');
   const numberTypes = [
     'year',
     'month',
@@ -146,7 +146,6 @@ function load_datatable(CKAN_MODULE){
   ]
   const colOffset = 1;  // _id col
   const defaultSortOrder = [[0, "asc"]];  // _id col
-  const defaultDidEstimatedTotal = false;
   let ajaxStartTime = 0;
   let ajaxElapsedTime;
 
@@ -160,7 +159,7 @@ function load_datatable(CKAN_MODULE){
   let isCompactView = typeof tableState != 'undefined' && typeof tableState.compact_view != 'undefined' ? tableState.compact_view : defaultCompactView;
   let pageLength = typeof tableState != 'undefined' && typeof tableState.page_length != 'undefined' ? tableState.page_length : pageLengthChoices[0];
   let sortOrder = typeof tableState != 'undefined' && typeof tableState.sort_order != 'undefined' ? tableState.sort_order : defaultSortOrder;
-  let didEstimatedTotal = typeof tableState != 'undefined' && typeof tableState.did_estimated_total != 'undefined' ? tableState.did_estimated_total : defaultDidEstimatedTotal;
+  let didEstimatedTotal;
 
   let availableColumns = [{
     "name": '_id',
@@ -468,18 +467,23 @@ function load_datatable(CKAN_MODULE){
           stripHtml: false
         }
       },
-      {
-        name: 'shareButton',
-        text: '<i class="fa fa-share"></i>',
-        titleAttr: shareButtonLabel,
-        className: 'btn-secondary',
-        action: function (e, dt, node, config) {
-          dt.state.save();
-          let sharelink = window.location.href + '?state=' + window.btoa(JSON.stringify(dt.state()));
-          // TODO: do copy state link stuffs... ONLY NEEDED vars
-          // copyLink(dt, sharelink, that._('Share current view'), that._('Copied deeplink to clipboard'));
-        }
-      }
+      // FIXME: Base64ing the entire table state is way too large.
+      //        We could add normal URI params for the only required things
+      //        like "sort, col_filters, query, compact, page, length";
+      //        However, we cannot reliably add column reordering,
+      //        column visibility, and view filters to the URI as they can
+      //        be almost infinite for a URI. Network middlewares and proxies
+      //        may also set max lengths and parameters, so those would break.
+      // {
+      //   name: 'shareButton',
+      //   text: '<i class="fa fa-share"></i>',
+      //   titleAttr: shareButtonLabel,
+      //   className: 'btn-secondary',
+      //   action: function (e, dt, node, config) {
+      //     dt.state.save();
+      //     let sharelink = window.location.href + '?state=' + window.btoa(JSON.stringify(dt.state()));
+      //   }
+      // }
     ];
   }
 
@@ -501,6 +505,41 @@ function load_datatable(CKAN_MODULE){
     _render_failure(_message, ajaxErrorMessage, 'warning');
   }
 
+  function render_timing_info(){
+    /**
+     * Render timing and estimated total info.
+     *
+     * Also save non HTML versions for use throughout functional code.
+     *
+     * NOTE: this is done separate from render_table_info
+     *       due to how ajax complete callbacks and draw callbacks
+     *       work in DataTables.
+     */
+    let countInfo = $('#dtprv_info');
+    let info = '';
+    if( typeof didEstimatedTotal != 'undefined' && didEstimatedTotal != null ){
+      if( didEstimatedTotal ){
+        info += estimatedLabel;
+      }else{
+        info += exactLabel;
+      }
+    }
+    if( typeof ajaxElapsedTime != 'undefined' && ajaxElapsedTime != null ){
+      if( info.length > 0 ){
+        info += '\n';
+      }
+      info += (ajaxElapsedTime / 1000).toFixed(2) + ' ' + elapsedTimeLabel;
+    }
+    if( info.length == 0 ){
+      $(countInfo).find('#timing-info').remove();
+      return;
+    }
+    if( $(countInfo).find('#timing-info').length == 0 ){
+      $(countInfo).append('&nbsp;<i class="fa fa-info-circle" id="timing-info"></i>');
+    }
+    $(countInfo).find('#timing-info').attr('title', info);
+  }
+
   function render_table_info(){
     /**
      * Render table and resource info for the current table state.
@@ -509,15 +548,6 @@ function load_datatable(CKAN_MODULE){
      */
     // TODO: save table info into object...
 
-    // TODO: add or remove estimatedLabel
-    console.log(didEstimatedTotal);
-    if( didEstimatedTotal ){
-      // $('#dtprv_info')
-    }
-
-    // TODO: output ajaxElapsedTime somewhere...
-    console.log(ajaxElapsedTime);
-
     let resourceInfo = $('#dtv-resource-info');
     let content = $(resourceInfo).find('.dtv-resource-info-content');
     $(resourceInfo).find('i').attr('title', content.text());
@@ -712,19 +742,22 @@ function load_datatable(CKAN_MODULE){
      */
     $('#dtprv_wrapper').find('#dtprv_failure_message').remove();
     set_table_visibility();
-    // render_expand_buttons();
     render_table_info();
+    render_timing_info();
     set_button_states();
   }
 
-  function init_callback(){
+  function init_callback(_setting, _data){
     /**
      * Executes once the DataTable initializes.
      */
     set_table_visibility();
     if( ! isCompactView ){
       table.columns.adjust();
     }
+    ajaxElapsedTime = window.performance.now() - ajaxStartTime;  // track ajax performance time
+    didEstimatedTotal = _data.total_was_estimated;
+    render_timing_info();
     set_row_selects();
     bind_custom_events();
     set_button_states();
@@ -790,8 +823,6 @@ function load_datatable(CKAN_MODULE){
     tableState.sort_order = localInstanceState.sort_order;
     tableState.compact_view = localInstanceState.compact_view;
 
-    // TODO: check URL params for base64 decode...
-
     return _data;
   }
 

ckanext/datatablesview/blueprint.py

@@ -156,8 +156,8 @@ def ajax(resource_view_id: str):
             'recordsTotal': unfiltered_response.get('total', 0),
             'recordsFiltered': response.get('total', 0),
             'data': data,
-            'total_was_estimated': False  #unfiltered_response.get(
-                # 'total_was_estimated', False),
+            'total_was_estimated': unfiltered_response.get(
+                'total_was_estimated', False),
         }
         status = 200
 

ckanext/datatablesview/config_declaration.yaml

@@ -103,16 +103,6 @@ groups:
       The option defines the label used to display NoneType values for the front-end.
       This should be a string and can be translated via po files.
 
-  - key: ckan.datatables.responsive_modal
-    default: false
-    type: bool
-    example: 'true'
-    description: |
-      When a table is in list (responsive) view mode with some columns hidden
-      and the user clicks on the first cell, use a modal dialog to  display the
-      complete row contents instead of expanding the missing columns
-      in the table itself. Prior to CKAN 2.12 the default setting was "true".
-
   - key: ckan.datatables.show_histograms
     default: true
     type: bool

ckanext/datatablesview/plugin.py

@@ -62,7 +62,6 @@ def update_config(self, config: CKANConfig):
             "ckan.datatables.ellipsis_length")
         self.date_format = config.get("ckan.datatables.date_format")
         self.default_view = config.get("ckan.datatables.default_view")
-        self.responsive_modal = config.get("ckan.datatables.responsive_modal")
 
         toolkit.add_template_directory(config, 'templates')
         toolkit.add_resource('assets', 'ckanext-datatablesview')
@@ -97,7 +96,6 @@ def setup_template_variables(self, context: Context,
             'ellipsis_length': self.ellipsis_length,
             'date_format': self.date_format,
             'default_view': self.default_view,
-            'responsive_modal': self.responsive_modal,
             'request_timeout': self.request_timeout,
             'language_object': language_object,
             'fullscreen': fullscreen,

ckanext/datatablesview/templates/datatables/datatables_view.html

@@ -42,7 +42,6 @@
     data-module-ckan-filters='{{ request.args.get("filters", "")|e or "null" }}'
     data-module-responsive-flag='{{ resource_view.get('responsive')|tojson }}'
     data-module-page-length-choices="{{ page_length_choices }}"
-    data-module-responsive-modal='{{ responsive_modal|tojson }}'
     data-module-resource-url="{{ h.url_for(package.type ~ '_resource.read', id=package.name, resource_id=resource.id ) }}"
     data-module-data-dictionary='{{- data_dictionary|tojson -}}'
     data-module-editable='{{ can_edit|tojson }}'