assets/dashAgGridComponentFunctions.js

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.ModelLink = function(props) {
    // Check if Total Parameters is null (indicating a proprietary model) or if the link is empty.
    // If so, just return the plain text value without a hyperlink.
    if (props.data['Total Parameters'] == null || !props.data.Model_Link) {
        return props.value;
    }
    // Otherwise, create the hyperlink as before.
    return React.createElement(
        'a',
        {
            href: props.data.Model_Link,
            target: '_blank',
            style: {
                color: '#007bff',
                textDecoration: 'none'
            }
        },
        props.value
    );
};

dagcomponentfuncs.PinRenderer = function(props) {
    return React.createElement(
        'div',
        {
            onClick: function() {
                const api = props.api;
                const modelId = props.data.Model_Display;
                const isPinned = props.data.pinned || false;
                
                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',
                fontSize: '16px',
                // Flexbox properties for perfect centering
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: '100%',
                height: '100%'
            }
        },
        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: {
            color: color,
            fontWeight: 'bold',
            fontSize: '14px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
            height: '100%'
        }
    }, letter);
};

dagcomponentfuncs.ReasoningRenderer = function(props) {
    if (props.value) { // props.value is the boolean from "Is Thinking Model"
        return React.createElement('div', {
            style: {
                color: '#71de5f', // Green color
                fontWeight: 'bold',
                fontSize: '14px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: '100%',
                height: '100%'
            }
        }, 'R');
    }
    return null; // Render nothing if false
};