filter on date and boolean columns, data viewer UI changes

Author: Fred Wu

R/session/vsc.R

@@ -78,12 +78,16 @@ get_column_def <- function(name, field, value) {
     )
     if (is.numeric(value)) {
         type <- "numericColumn"
+        filter <- "agNumberColumnFilter"
         if (is.null(attr(value, "class"))) {
             filter <- "agNumberColumnFilter"
         }
     } else if (inherits(value, "Date")) {
         type <- "dateColumn"
         filter <- "agDateColumnFilter"
+    } else if (is.logical(value)) {
+        type <- "booleanColumn"
+        filter <- "agNumberColumnFilter"
     } else {
         type <- "textColumn"
         filter <- "agTextColumnFilter"
@@ -130,15 +134,18 @@ dataview_table <- function(data, start = 0, end = NULL, sortModel = NULL, filter
             fd       <- filterModel[[fld]]
             col_name <- field_map[[fld]]
 
-            if (!is.null(fd$type) && !is.null(fd$filter)) {
+            if ((!is.null(fd$type) && !is.null(fd$filter))) {
+
                 op  <- fd$type
-                raw <- fd$filter
+                raw <- if (fd$filterType == "date") fd$dateFrom else fd$filter
 
                 # quote or coerce the filter literal
                 lit <- if (inherits(data[[col_name]], "Date")) {
                     sprintf('as.Date("%s")', raw)
                 } else if (is.numeric(data[[col_name]])) {
                     as.numeric(raw)
+                } else if (is.logical(data[[col_name]])) {
+                    as.logical(raw)
                 } else {
                     sprintf('"%s"', gsub('"', '\\\\"', raw))
                 }
@@ -159,8 +166,8 @@ dataview_table <- function(data, start = 0, end = NULL, sortModel = NULL, filter
                     blank                = sprintf('is.na(get("%s")) | get("%s") == ""', col_name, col_name),
                     notBlank             = sprintf('!is.na(get("%s")) & get("%s") != ""', col_name, col_name),
                     inRange              = {
-                        hi <- if (inherits(data[[col_name]], "Date")) {
-                            sprintf('as.Date("%s")', fd$filterTo)
+                        hi <- if (inherits(data[[col_name]], "Date") && !is.null(fd$dateTo)) {
+                            sprintf('as.Date("%s")', fd$dateTo)
                         } else {
                             as.numeric(fd$filterTo)
                         }
@@ -206,9 +213,6 @@ dataview_table <- function(data, start = 0, end = NULL, sortModel = NULL, filter
     class(rows) <- "data.frame"
     attr(rows, "row.names") <- .set_row_names(nrow(rows))
 
-    rows <- jsonlite::fromJSON(
-        jsonlite::toJSON(rows, dataframe = "rows", na = "null", auto_unbox = TRUE)
-    )
     columns <- .mapply(
         get_column_def,
         list(.colnames, fields, rows),

package-lock.json

@@ -621,6 +621,11 @@ export async function getTableHtml(webview: Webview, file: string): Promise<stri
             }
         }
     };
+    const booleanFilterParams = {
+        filterOptions: ['equals'],
+        defaultOption: 'equals',
+        filterPlaceholder: '1=TRUE, 0=FALSE...'
+    };
     const data = ${String(content)};
     const displayDataSource = {
         rowCount: undefined,
@@ -665,6 +670,23 @@ export async function getTableHtml(webview: Webview, file: string): Promise<stri
     };
 
     const columnDefs = data.columns.map(col => {
+        if (col.type === "booleanColumn") {
+          return {
+            ...col,
+            valueFormatter: params =>
+              params.value === true 
+              ? 'TRUE'
+              : params.value === false
+                  ? 'FALSE'
+                  : ''
+          };
+        } else if (col.type === "dateColumn") {
+          return {
+            ...col, 
+            width: 200
+          };
+        }
+      
         if (col.field === "x2") {
           return {
             ...col,
@@ -676,15 +698,18 @@ export async function getTableHtml(webview: Webview, file: string): Promise<stri
             ...col,
             sortable:     false,
             filter:       false,
+            lockPosition: 'left',
             suppressHeaderMenuButton: true,
-            width:        60,
+            width:        150,
             headerValueGetter: () => {
               const a = displayDataSource._TotalRows || 0;
               const b = displayDataSource._TotalUnfiltered || 0;
               return '(' + a + '/' + b + ')';
             }
           };
         }
+
+        
         return col;
       });
     
@@ -693,9 +718,11 @@ export async function getTableHtml(webview: Webview, file: string): Promise<stri
             sortable: true,
             resizable: true,
             filter: true,
-            width: 100,
-            minWidth: 80,
+            width: 150,
+            minWidth: 100,
             floatingFilter: true, 
+            suppressHeaderMenuButton: true,
+            lockPinned: true,
             filterParams: {
                 buttons: ['apply', 'reset'],
                 closeOnApply: true,
@@ -767,37 +794,18 @@ export async function getTableHtml(webview: Webview, file: string): Promise<stri
     
     document.addEventListener('DOMContentLoaded', () => {
         gridOptions.columnDefs.forEach(function(column) {
-            if (column.filter === 'agDateColumnFilter') {
+            if (column.type === 'dateColumn') {
                 column.filterParams = dateFilterParams;
-            } 
-            else if (column.filter === 'agNumberColumnFilter') {
-                column.filterParams = {
-                    filterOptions: [
-                      'equals', 'notEqual', 
-                      'lessThan', 'lessThanOrEqual', 
-                      'greaterThan', 'greaterThanOrEqual',
-                      'inRange', 'blank', 'notBlank'
-                    ],
-                    defaultOption: 'equals'
-                };
-              } 
-              else if (column.filter === 'agTextColumnFilter') {
-                column.filterParams = {
-                    filterOptions: [
-                      'equals', 'notEqual', 'contains', 'notContains',
-                      'startsWith', 'endsWith', 'blank', 'notBlank', 'regexp'
-                    ],
-                    defaultOption: 'contains'
-                }; 
-              } 
+            }
+            else if (column.type == 'booleanColumn') {
+                column.filterParams = booleanFilterParams;
+            }
         });
         
         const gridDiv = document.querySelector('#myGrid');
-        
         const gridApi = agGrid.createGrid(gridDiv, gridOptions);
-        
-        displayDataSource.api = gridApi;
-        
+
+        displayDataSource.api = gridApi;        
         gridApi.setGridOption('datasource', displayDataSource);
         
     });