Update assets/dashAgGridComponentFunctions.js

assets/dashAgGridComponentFunctions.js

@@ -2,6 +2,10 @@ var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridC
 // Store original data globally
 window.gridOriginalData = null;
 
+// Global store for pinned model IDs
+window.pinnedModelIds = new Set(JSON.parse(localStorage.getItem('pinnedModelIds') || '[]'));
+
+
 dagcomponentfuncs.ModelLink = function(props) {
     if (!props.data.Model_Link) {
         return props.value;  // Just return text if no link
@@ -20,41 +24,30 @@ dagcomponentfuncs.ModelLink = function(props) {
     );
 };
 
-dagcomponentfuncs.PinRenderer = function(props) {
-    // Store original data when component first renders
-    if (!window.gridOriginalData) {
-        const allRows = [];
-        props.api.forEachNode(node => {
-            allRows.push({...node.data});
-        });
-        window.gridOriginalData = allRows;
-    }
+if (!localStorage.getItem('pinnedModelIds')) {
+    localStorage.setItem('pinnedModelIds', '[]');
+}
 
+dagcomponentfuncs.PinRenderer = function(props) {
     return React.createElement(
         'div',
         {
             onClick: function() {
                 const api = props.api;
-                const newValue = !props.value;
-                
-                // Create a copy of the original data and update pin state for clicked row only
-                const allRows = window.gridOriginalData.map(row => ({
-                    ...row,
-                    // Preserve existing pin states and only update the clicked row
-                    pinned: row.Model_Display === props.data.Model_Display ? newValue : 
-                            (row.pinned || false)
-                }));
-                
-                // Update window.gridOriginalData to maintain pin states
-                window.gridOriginalData = allRows;
+                const modelId = props.data.Model_Display;
+                const isPinned = props.data.pinned || false;
                 
-                // Separate rows
-                const pinnedRows = allRows.filter(row => row.pinned);
-                const unpinnedRows = allRows.filter(row => !row.pinned);
-                
-                // Update both sections
-                api.setPinnedTopRowData(pinnedRows);
-                api.setRowData(unpinnedRows);
+                if (isPinned) {
+                    // Unpin
+                    const currentPinned = api.getGridOption('pinnedTopRowData') || [];
+                    const newPinnedRows = currentPinned.filter(row => row.Model_Display !== modelId);
+                    api.setGridOption('pinnedTopRowData', newPinnedRows);
+                } else {
+                    // Pin
+                    const currentPinned = api.getGridOption('pinnedTopRowData') || [];
+                    const pinnedRow = {...props.data, pinned: true};
+                    api.setGridOption('pinnedTopRowData', [...currentPinned, pinnedRow]);
+                }
             },
             style: {
                 cursor: 'pointer',
@@ -62,6 +55,54 @@ dagcomponentfuncs.PinRenderer = function(props) {
                 fontSize: '16px'
             }
         },
-        props.value ? '📌' : '☐'
+        props.data.pinned ? '📌' : '☐'
+    );
+};
+
+dagcomponentfuncs.TypeRenderer = function(props) {
+    const typeMap = {
+        'Base': ['B', '#71de5f'],
+        'Finetune': ['F', '#f6b10b'], 
+        'Merge': ['M', '#f08aff'],
+        'Proprietary': ['P', '#19cdce']
+    };
+    
+    // Determine type from raw flags
+    let type = 'Unknown';
+    if (props.data['Total Parameters'] === null) {
+        type = 'Proprietary';
+    } else if (props.data['Is Foundation'] && !props.data['Is Merged']) {
+        type = 'Base';
+    } else if (props.data['Is Merged']) {
+        type = 'Merge';
+    } else if (props.data['Is Finetuned'] && !props.data['Is Merged']) {
+        type = 'Finetune';
+    }
+    
+    const [letter, color] = typeMap[type] || ['?', '#999'];
+    
+    return React.createElement('div', {
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: '12px'
+        }
+    }, 
+        React.createElement('div', {
+            style: {
+                color: color,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 'bold',
+                fontSize: '14px',
+                lineHeight: '1',
+                textAlign: 'center'
+            }
+        }, letter)
     );
 };