feat: add filters and change colors

src/client/Database.tsx

@@ -12,67 +12,68 @@ import {
     GridOptions,
     GridReadyEvent,
 } from 'ag-grid-community';
-import { IOlympicData } from './interfaces';
-
-const dateComparator = (date1: string, date2: string) => {
-    const date1Number = monthToComparableNumber(date1);
-    const date2Number = monthToComparableNumber(date2);
-    if (date1Number === null && date2Number === null) {
-        return 0;
-    }
-    if (date1Number === null) {
-        return -1;
-    }
-    if (date2Number === null) {
-        return 1;
-    }
-    return date1Number - date2Number;
-}
-
-// eg 29/08/2004 gets converted to 20040829
-const monthToComparableNumber = (date: string) => {
-    if (date === undefined || date === null || date.length !== 10) {
-        return null;
-    }
-    const yearNumber = Number.parseInt(date.substring(6, 10));
-    const monthNumber = Number.parseInt(date.substring(3, 5));
-    const dayNumber = Number.parseInt(date.substring(0, 2));
-    return yearNumber * 10000 + monthNumber * 100 + dayNumber;
-}
+import { ILongevityRow } from './interfaces';
 
 const  Database = () => {
     const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
     const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
-    const [rowData, setRowData] = useState<IOlympicData[]>();
+    const [rowData, setRowData] = useState<ILongevityRow[]>();
     const [columnDefs, setColumnDefs] = useState<ColDef[]>([
-        { field: 'athlete', sort: 'desc' },
-        { field: 'age', width: 90 },
-        { field: 'country' },
-        { field: 'year', width: 90, unSortIcon: true },
-        { field: 'date', comparator: dateComparator },
-        { field: 'sport' },
-        { field: 'gold' },
-        { field: 'silver' },
-        { field: 'bronze' },
-        { field: 'total' },
+        { field: 'id', sortable: true, width: 10},
+        { field: 'quickyear', sortable: true,filter: 'agNumberColumnFilter', width: 10},
+        { field: 'population_id', filter: 'agNumberColumnFilter'},
+        { field: 'study_design', width: 300 },
+        { field: 'conclusions', },
+        { field: 'association' },
+        { field: 'gender', filter: 'agTextColumnFilter',},
+        { field: 'identifier_alt' },
+        { field: 'gene_symbol', filter: 'agTextColumnFilter' },
+        { field: 'genotypes',},
+        { field: 'Genotype longevity weight' },
+        { field: 'Skip' },
+        { field: 'quickpubmed' },
+        { field: 'Gene prioritization', sortable: true, sort: 'desc'},
+        { field: 'location', filter: 'agTextColumnFilter'},
+        { field: 'quickref' },
+        { field: 'gene_id', sortable: true,},
     ]);
+
     const defaultColDef = useMemo<ColDef>(() => {
         return {
-            width: 170,
-            sortable: true,
+            wrapHeaderText: true,
+            autoHeaderHeight: true,
+            wrapText: true,
+            resizable: true,
+            autoHeight: true,
+            flex: 1,
+            filterParams: {
+                debounceMs: 0,
+                buttons: ['apply', 'reset'],
+            }
         };
     }, []);
 
+    const gridOptions = {
+        defaultColDef: {
+            resizeable: true,
+            initialWidth: 200,
+            wrapHeaderText: true,
+            autoHeaderHeight: true,
+        },
+        columnDefs: columnDefs,
+    };
+
     const onGridReady = useCallback((params: GridReadyEvent) => {
-        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+        fetch('/api/longevity')
             .then((resp) => resp.json())
-            .then((data: IOlympicData[]) => setRowData(data));
+            .then((data: ILongevityRow[]) => setRowData(data));
     }, []);
 
+
     return (
         <div style={containerStyle}>
             <div style={gridStyle} className="ag-theme-alpine">
-                <AgGridReact<IOlympicData>
+                <AgGridReact<ILongevityRow>
                     rowData={rowData}
                     columnDefs={columnDefs}
                     defaultColDef={defaultColDef}

src/client/app.css

@@ -12,5 +12,16 @@ body {
 }
 
 div.ag-theme-alpine div.ag-row {
+  --ag-background-color: #eff3fa;
   font-size: 12px !important;
+  --ag-widget-horizontal-spacing: 10px;
+  white-space: normal !important;
+}
+.ag-header{
+  --ag-header-column-resize-handle-display: block;
+  --ag-header-background-color: #d6e3f7;
+  white-space: normal !important;
+}
+.ag-theme-alpine {
+  white-space: normal !important;
 }

src/client/interfaces.ts

@@ -1,37 +1,20 @@
-export interface IOlympicData {
-    athlete: string;
-    age: number;
-    country: string;
-    year: number;
-    date: string;
-    sport: string;
-    gold: number;
-    silver: number;
-    bronze: number;
-    total: number;
-}
-
-/**
- * Has some mistakes, for example some fields are either str or undefined, there can be other mistakes in field names or values
- */
 export interface ILongevityRow{
-    id: int;
-    quickyear:int;
-    population_id: int;
-    study_design: str;
-    conclusions: str;
-    association: str;
-    gender: str;
-    identifier: str;
-    identifier_alt: str;
-    gene_symbol: str;
-    genotypes: str;
-    "Genotype longevity weight": str;
-    Skip: str;
-    quickpubmed: int;
-    "Gene prioritization": int;
-    location: str;
-    quickref: str;
-    gene_id: str;
+    id: number;
+    quickyear:number;
+    population_id: number;
+    study_design: string;
+    conclusions: string;
+    association: string;
+    gender: string;
+    identifier: string;
+    identifier_alt: string;
+    gene_symbol: string;
+    genotypes: string;
+    "Genotype longevity weight": string;
+    Skip: string;
+    quickpubmed: number;
+    "Gene prioritization": number;
+    location: string;
+    quickref: string;
+    gene_id: number;
 }
-//just for the sake of example