File size: 3,754 Bytes
2252f98
5d8876d
2252f98
0d6e340
 
 
 
2252f98
0d6e340
2252f98
 
 
 
 
 
 
 
 
 
 
 
 
 
5d8876d
2252f98
 
 
 
 
5d8876d
 
2252f98
5d8876d
 
 
 
 
 
 
 
 
 
 
2252f98
 
 
0d6e340
 
 
 
 
 
 
2252f98
 
5d8876d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0d6e340
 
 
5d8876d
 
0d6e340
 
 
5d8876d
0d6e340
 
 
 
 
 
5d8876d
0d6e340
 
 
5d8876d
 
 
0d6e340
 
5d8876d
0d6e340
 
 
2252f98
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
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
};