use ag grid text filter for text columns

enso-org · Feb 24, 2025 · edf6420 · edf6420
1 parent e002d94
commit edf6420
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization.vue b/app/gui/src/project-view/components/visualizations/TableVisualization.vue
@@ -329,11 +329,51 @@ function getFilterType(valueType: string) {
     return 'agDateColumnFilter'
   } else if (isNumericType(valueType)) {
     return 'agNumberColumnFilter'
+  } else if (valueType === 'Char') {
+    return 'agTextColumnFilter'
   } else {
     return 'agSetColumnFilter'
   }
 }
 
+function getFilterOptions(valueType: string) {
+  if(valueType === 'Date') {
+    return [
+        'equals',
+        'notEqual',
+        'greaterThan',
+        'lessThan',
+        'inRange',
+        'blank',
+        'notBlank',
+      ]
+  } else if (isNumericType(valueType)) {
+    return [
+        'equals',
+        'notEqual',
+        'greaterThan',
+        'greaterThanOrEqual',
+        'lessThan',
+        'lessThanOrEqual',
+        'inRange',
+        'blank',
+        'notBlank',
+      ]
+  } else if (valueType === 'Char') {
+    return [
+        'equals',
+        'notEqual',
+        'blank',
+        'notBlank',
+        'contains',
+        'startsWith',
+        'endsWith',
+      ]
+  } else {
+    return null
+  }
+}
+
 /**
  * Generates the column definition for the table vizulization, including displaying the data value type and
  * data quality indicators.
@@ -353,6 +393,7 @@ function toField(
   const displayValue = valueType ? valueType.display_text : null
   const icon = valueType ? getValueTypeIcon(valueType.constructor) : null
   const filterType = valueType ? getFilterType(valueType.constructor) : null
+  const filterOptions = valueType ? getFilterOptions(valueType.constructor) : null
 
   const dataQualityMetrics =
     typeof props.data === 'object' && 'data_quality_metrics' in props.data ?
@@ -389,6 +430,7 @@ function toField(
     filter: filterType,
     filterParams: {
       maxNumConditions: 1,
+      filterOptions: filterOptions
     },
     headerComponentParams: {
       template,

diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizToolbar.ts b/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizToolbar.ts
@@ -13,7 +13,7 @@ export type SortModel = {
   sortDirection: SortDirection
   sortIndex: number
 }
-type FilterType = 'number' | 'date' | 'set'
+type FilterType = 'number' | 'date' | 'set' | 'text'
 
 /**
  * Represents the value used for filtering.
@@ -34,6 +34,9 @@ const actionMap = {
   inRange: '..Between',
   blank: '..Is_Nothing',
   notBlank: '..Not_Nothing',
+  contains: '..Contains',
+  startsWith: '..Starts_With',
+  endsWith: '..Ends_With',
 }
 type FilterAction = keyof typeof actionMap
 export type GridFilterModel = {
@@ -280,6 +283,9 @@ function useSortFilterNodesButton({
                 { toValue: filterModel.dateTo!, fromValue: filterModel.dateFrom! }
               : (filterModel.dateFrom as FilterValue)
             break
+          case 'text':
+            value = filterModel.filter as FilterValue
+            break
           default:
             value = filterModel.values as FilterValue
         }