ComfyUI-Lora-Manager/static/js/components/checkpointModal/utils.js

/**
 * utils.js
 * CheckpointModal component utility functions
 */
import { showToast } from '../../utils/uiHelpers.js';

/**
 * Format file size for display
 * @param {number} bytes - File size in bytes
 * @returns {string} - Formatted file size
 */
export function formatFileSize(bytes) {
    if (!bytes) return 'N/A';
    
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let size = bytes;
    let unitIndex = 0;
    
    while (size >= 1024 && unitIndex < units.length - 1) {
        size /= 1024;
        unitIndex++;
    }
    
    return `${size.toFixed(1)} ${units[unitIndex]}`;
}

/**
 * Render compact tags
 * @param {Array} tags - Array of tags
 * @returns {string} HTML content
 */
export function renderCompactTags(tags) {
    if (!tags || tags.length === 0) return '';
    
    // Display up to 5 tags, with a tooltip indicator if there are more
    const visibleTags = tags.slice(0, 5);
    const remainingCount = Math.max(0, tags.length - 5);
    
    return `
        <div class="model-tags-container">
            <div class="model-tags-compact">
                ${visibleTags.map(tag => `<span class="model-tag-compact">${tag}</span>`).join('')}
                ${remainingCount > 0 ? 
                    `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
                    ''}
            </div>
            ${tags.length > 0 ? 
                `<div class="model-tags-tooltip">
                    <div class="tooltip-content">
                        ${tags.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
                    </div>
                </div>` : 
                ''}
        </div>
    `;
}

/**
 * Set up tag tooltip functionality
 */
export function setupTagTooltip() {
    const tagsContainer = document.querySelector('.model-tags-container');
    const tooltip = document.querySelector('.model-tags-tooltip');
    
    if (tagsContainer && tooltip) {
        tagsContainer.addEventListener('mouseenter', () => {
            tooltip.classList.add('visible');
        });
        
        tagsContainer.addEventListener('mouseleave', () => {
            tooltip.classList.remove('visible');
        });
    }
}