Update app.py

app.py

@@ -19,6 +19,20 @@ def load_leaderboard_data(csv_file_path):
     try:
         df = pd.read_csv(csv_file_path, na_values=['NA'])
         
+        # Add type sort value
+        def get_type_sort_value(row):
+            if pd.isna(row['Total Parameters']):
+                return 3  # P
+            if row['Is Foundation'] and not row['Is Merged']:
+                return 0  # B
+            if row['Is Merged']:
+                return 2  # M
+            if row['Is Finetuned'] and not row['Is Merged']:
+                return 1  # F
+            return 4
+
+        df['model_type_sort'] = df.apply(get_type_sort_value, axis=1)
+        
         # Convert date columns to datetime and then to ISO format strings
         for col in ['Release Date', 'Test Date']:
             df[col] = pd.to_datetime(df[col], format='%m/%d/%Y', errors='coerce')
@@ -115,7 +129,6 @@ app.index_string = '''
                 --pinned-bg: #f5f5f5;
                 --border-color: #ccc;
             }
-
             @media (prefers-color-scheme: dark) {
                 :root {
                     --bg-color: #0d1117;
@@ -128,7 +141,6 @@ app.index_string = '''
                     --border-color: #30363d;
                 }
             }
-
             body {
                 font-family: 'Segoe UI', Arial, sans-serif;
                 margin: 0;
@@ -136,7 +148,6 @@ app.index_string = '''
                 background-color: var(--bg-color);
                 color: var(--text-color);
             }
-
             /* Header and Title Styles */
             .page-title {
                 text-align: center;
@@ -144,7 +155,6 @@ app.index_string = '''
                 font-size: 38px;
                 color: var(--text-color) !important;
             }
-
             .page-subtitle {
                 text-align: center;
                 margin: 0;
@@ -152,7 +162,6 @@ app.index_string = '''
                 font-weight: 600;
                 color: var(--text-color) !important;
             }
-
             /* Filter Styles */
             .model-type-filter label,
             #model-type-filter label,
@@ -161,11 +170,9 @@ app.index_string = '''
                 margin-right: 10px;
                 font-weight: bold;
             }
-
             .filter-description {
                 color: var(--secondary-text) !important;
             }
-
             /* Grid Styles */
             .ag-theme-alpine {
                 --ag-font-family: 'Segoe UI', Arial, sans-serif;
@@ -178,29 +185,23 @@ app.index_string = '''
                 --ag-foreground-color: var(--text-color);
                 --ag-row-border-color: var(--grid-border);
             }
-
             .ag-floating-top {
                 border-bottom: 3px solid var(--border-color) !important;
             }
-
             .ag-floating-top:empty {
                 border-bottom: none !important;
             }
-
             .pinned-row {
                 background-color: var(--pinned-bg) !important;
                 font-weight: 500;
             }
-
             /* Text Alignment Classes */
             .ag-left-aligned-header {
                 text-align: left !important;
             }
-
             .ag-left-aligned-cell {
                 text-align: left !important;
             }
-
             .ag-header-cell-text {
                 white-space: normal !important;
                 line-height: 1.2em;
@@ -211,40 +212,32 @@ app.index_string = '''
                 height: auto !important;
                 min-height: 48px;
             }
-
             .wrap-text {
                 white-space: normal !important;
                 line-height: 1.2em;
             }
-
             .no-break {
                 white-space: nowrap !important;
             }
-
             /* Border Classes */
             .border-left {
                 border-left: 2px solid var(--grid-border) !important;
             }
-
             .border-right {
                 border-right: 2px solid var(--grid-border) !important;
             }
-
             /* Link Styles */
             .model-link {
                 color: var(--link-color) !important;
                 text-decoration: none;
             }
-
             .model-link:hover {
                 text-decoration: underline;
             }
-
             .source-link {
                 color: var(--link-color) !important;
                 text-decoration: none;
             }
-
             /* Details/Summary Styles */
             .details-summary {
                 cursor: pointer;
@@ -253,41 +246,33 @@ app.index_string = '''
                 margin-top: 20px;
                 color: var(--text-color) !important;
             }
-
             .ideology-note {
                 color: var(--secondary-text) !important;
                 font-size: 0.9em;
             }
-
             /* Markdown Content */
             .markdown-content {
                 color: var(--text-color) !important;
             }
-
             .markdown-content a {
                 color: var(--link-color) !important;
             }
-
             /* Ko-fi Button Visibility */
             .kofi-light {
                 display: none;
             }
-
             .kofi-dark {
                 display: none;
             }
-
             @media (prefers-color-scheme: light) {
                 .kofi-light {
                     display: block;
                 }
             }
-
             @media (prefers-color-scheme: dark) {
                 .kofi-dark {
                     display: block;
                 }
-
                 /* Dark Theme Specific Overrides */
                 .ag-theme-alpine {
                     --ag-background-color: #161b22 !important;
@@ -303,15 +288,12 @@ app.index_string = '''
                     --ag-selected-row-background-color: #1c2128 !important;
                     --ag-row-hover-color: #1c2128 !important;
                 }
-
                 .ag-header-cell-filtered {
                     background-color: rgba(88, 166, 255, 0.1) !important;
                 }
-
                 input[type="checkbox"] {
                     accent-color: var(--link-color);
                 }
-
                 /* Ensure text colors in dark mode */
                 .page-title,
                 .page-subtitle,
@@ -320,7 +302,6 @@ app.index_string = '''
                 #na-model-filter label {
                     color: #e6e6e6 !important;
                 }
-
                 .filter-description,
                 .ideology-note {
                     color: #8b949e !important;
@@ -333,7 +314,6 @@ app.index_string = '''
             .markdown-content a:visited {
                 color: var(--link-color) !important;
             }
-
             .split-header-container {
                 display: flex;
                 flex-direction: column;
@@ -433,9 +413,9 @@ columnDefs = [
     {
         "field": "#P",
         "width": 115,
-        "filter": "agNumberColumnFilter",
+        "filter": "equals",
         "filterParams": {
-            "defaultOption": "equals",
+            "defaultOption": "inRange",
             "filterOptions": ['equals', 'notEqual', 'greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual', 'inRange']
         },
         "headerClass": "ag-left-aligned-header wrap-text",
@@ -446,6 +426,21 @@ columnDefs = [
         "sortingOrder": ['desc', 'asc'],
         "pinned": "left"
     },
+    {
+        "field": "model_type_sort",
+        "hide": True
+    },
+    {
+        "headerName": "T",
+        "field": "model_type_sort",  # Changed to use the sort field directly
+        "width": 45,
+        "filter": False,
+        "suppressMenu": True,
+        "cellRenderer": "TypeRenderer",
+        "pinned": "left",
+        "sortable": True,
+        "sortingOrder": ['asc', 'desc']
+    },
     {
         "field": "Model_Display",
         "headerName": "Model",
@@ -653,39 +648,40 @@ dashGridOptions = {
     "ensureDomOrder": True,
     "suppressRowClickSelection": True,
     "suppressCellFocus": True,
-    "getRowId": "function(params) { return params.data.Model_Display; }",
+    "getRowId": "params => params.data.Model_Display",
     "pinnedTopRowData": [],
     "sortingOrder": ['desc', 'asc'],
     "suppressMaintainUnsortedOrder": True,
     "rowBuffer": 10,
     "maxBlocksInCache": 2,
-    "theme": "ag-theme-alpine-dark" if "prefers-color-scheme: dark" else "ag-theme-alpine",
-    "onGridReady": """
-        function(params) {
-            params.api.addEventListener('sortChanged', function() {
-                const sortModel = params.api.getSortModel();
-                if (sortModel && sortModel.length > 0) {
-                    const field = sortModel[0].colId;
-                    const isAsc = sortModel[0].sort === 'asc';
-                    
-                    params.api.forEachNode((node, index) => {
-                        const value = node.data[field];
-                        if (value === null || value === undefined || value === '' || isNaN(value)) {
-                            node.setDataValue('__sortValue', isAsc ? Number.MAX_SAFE_INTEGER : -Number.MAX_SAFE_INTEGER);
-                        } else {
-                            node.setDataValue('__sortValue', Number(value));
-                        }
-                    });
-                    
-                    params.api.onSortChanged();
-                }
-            });
-        }
-    """
+    "onGridReady": {
+        "function": """
+            function(params) {
+                console.log('Grid ready');
+                window.gridApi = params.api;
+            }
+        """
+    },
+    "onRowDataChanged": {
+        "function": """
+            function(params) {
+                console.log('Row data changed event');
+                console.log('Current pinned rows:', params.api.getGridOption('pinnedTopRowData'));
+                console.log('Current main rows:', []);
+                params.api.forEachNode(node => console.log(node.data.Model_Display));
+            }
+        """
+    },
+    "theme": "ag-theme-alpine-dark" if "prefers-color-scheme: dark" else "ag-theme-alpine"
 }
 
 # Define the layout
 app.layout = html.Div([
+    dcc.Store(id='pinned-rows-store', data=[]),
+    dcc.Store(id='pinned-ids-store', data=[]),
+    dcc.Store(id='pinned-models-store', data=[]),
+    dcc.Store(id='filter-change-trigger', data=0),
+    
     # Header
     html.Div([
         html.Div([
@@ -736,12 +732,12 @@ app.layout = html.Div([
             dcc.Checklist(
                 id='model-type-filter',
                 options=[
+                    {'label': 'Base', 'value': 'Is Foundation'},
                     {'label': 'Finetune', 'value': 'Is Finetuned'},
                     {'label': 'Merge', 'value': 'Is Merged'},
-                    {'label': 'Foundation', 'value': 'Is Foundation'},
                     {'label': 'Proprietary', 'value': 'proprietary'}
                 ],
-                value=['Is Finetuned', 'Is Merged', 'Is Foundation', 'proprietary'],  # All checked by default
+                value=['Is Foundation', 'Is Finetuned', 'Is Merged', 'proprietary'],  # All checked by default
                 inline=True,
                 style={'display': 'inline-block'}
             )
@@ -795,7 +791,9 @@ app.layout = html.Div([
             dashGridOptions=dashGridOptions,
             dangerously_allow_code=True,
             className="ag-theme-alpine",
-            style={"height": "600px", "width": "100%"}
+            style={"height": "600px", "width": "100%"},
+            enableEnterpriseModules=False,
+            getRowId="params.data.Model_Display"
         )
     ], style={'marginBottom': '30px'}),
     
@@ -871,41 +869,46 @@ app.layout = html.Div([
 def debug_callback(value):
     print("Model filter value:", value)
     return value
-    
+
 @app.callback(
     [Output('leaderboard-grid', 'rowData'),
-     Output('model-type-filter', 'value')],
+     Output('model-type-filter', 'value'),
+     Output('pinned-models-store', 'data')],  # Add this output
     [Input('model-type-filter', 'value'),
-     Input('na-model-filter', 'value')],
+     Input('na-model-filter', 'value'),
+     Input('leaderboard-grid', 'pinnedTopRowData')],  # Add this input
     prevent_initial_call=False
 )
-def filter_models(selected_types, show_na):
+def update_grid(selected_types, show_na, pinned_rows):
     if selected_types is None:
         selected_types = []
         
-    updated_types = selected_types.copy()
-    
-    if not updated_types:
-        return [], updated_types
-        
+    if not selected_types:
+        return [], selected_types, []
+
     filtered_df = df.copy()
+    
+    # Get pinned model IDs
+    pinned_models = []
+    if pinned_rows:
+        pinned_models = [row['Model_Display'] for row in pinned_rows]
+        # Remove pinned models from the dataframe
+        filtered_df = filtered_df[~filtered_df['Model_Display'].isin(pinned_models)]
+
     mask = pd.Series(False, index=filtered_df.index)
     
     # Model type filtering
-    if 'Is Finetuned' in updated_types:
-        if 'Is Merged' in updated_types:
-            # Show both regular finetuned and merged models
+    if 'Is Finetuned' in selected_types:
+        if 'Is Merged' in selected_types:
             mask |= filtered_df['Is Finetuned']
         else:
-            # Show only regular finetuned models (not merged)
             mask |= (filtered_df['Is Finetuned'] & ~filtered_df['Is Merged'])
-    elif 'Is Merged' in updated_types:
-        # Show only merged models
+    elif 'Is Merged' in selected_types:
         mask |= filtered_df['Is Merged']
         
-    if 'Is Foundation' in updated_types:
+    if 'Is Foundation' in selected_types:
         mask |= (filtered_df['Is Foundation'] & ~filtered_df['Total Parameters'].isna())
-    if 'proprietary' in updated_types:
+    if 'proprietary' in selected_types:
         mask |= filtered_df['Total Parameters'].isna()
     
     filtered_df = filtered_df[mask]
@@ -914,11 +917,15 @@ def filter_models(selected_types, show_na):
     political_columns = ['Political Lean 📋', 'govt', 'dipl', 'econ', 'scty'] + AXES_COLS_2
     has_na = filtered_df[political_columns].isna().any(axis=1)
     
-    if show_na is None or not show_na:  # Hide NA models by default
+    if show_na is None or not show_na:
         filtered_df = filtered_df[~has_na]
     
+    # Sort by UGI
     filtered_df = filtered_df.sort_values('UGI 🏆', ascending=False)
-    return filtered_df.to_dict('records'), updated_types
+    
+    records = filtered_df.to_dict('records')
+    
+    return records, selected_types, pinned_models
 
 @app.callback(
     Output('ideology-descriptions', 'children'),
@@ -956,4 +963,30 @@ if __name__ == '__main__':
         Output('leaderboard-grid', 'rowData'),
         Input('leaderboard-grid', 'cellRendererData'),
         State('leaderboard-grid', 'rowData')
+    )
+    app.clientside_callback(
+    """
+        function(n_clicks) {
+            if (!window.gridApi) return;
+            
+            console.log('Filter changed');
+            const pinnedRows = window.gridApi.getGridOption('pinnedTopRowData') || [];
+            console.log('Current pinned rows:', pinnedRows.map(r => r.Model_Display));
+            
+            if (pinnedRows.length > 0) {
+                const pinnedIds = new Set(pinnedRows.map(row => row.Model_Display));
+                const currentRows = [];
+                window.gridApi.forEachNode(node => {
+                    if (!pinnedIds.has(node.data.Model_Display)) {
+                        currentRows.push(node.data);
+                    }
+                });
+                console.log('Filtering out pinned rows');
+                window.gridApi.setGridOption('rowData', currentRows);
+            }
+            return window.dash_clientside.no_update;
+        }
+        """,
+        Output('leaderboard-grid', 'rowData'),
+        Input('model-type-filter', 'value')
     )