☰

Airflow Task Instance Status Enhancer

Enhance task instance status visualization in Airflow for colorblind users with class transition tracking

// ==UserScript==
// @name         Airflow Task Instance Status Enhancer
// @namespace    namilink.airflow.colorblind-status
// @version      0.6
// @description  Enhance task instance status visualization in Airflow for colorblind users with class transition tracking
// @author       Mate Valko - Namilink.com
// @match        *://*/*dags*
// @match        *://*/*airflow*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Configuration
    const CONFIG = {
        DEBUG: false,
        THROTTLE_INTERVAL: 1000,
        TASK_INSTANCE_SELECTOR: '[data-testid="task-instance"]'
    };

const STATE_MAPPINGS = {
    'rgb(128, 128, 128)': { symbol: '⌛', label: 'Queued' },      // gray
    'rgb(0, 255, 0)': { symbol: '⚙️', label: 'Running' },        // lime
    'rgb(0, 128, 0)': { symbol: '✅', label: 'Success' },         // green
    'rgb(238, 130, 238)': { symbol: '🔄', label: 'Restarting' }, // violet
    'rgb(255, 0, 0)': { symbol: '❌', label: 'Failed' },         // red
    'rgb(255, 215, 0)': { symbol: '🔁', label: 'Up for retry' }, // gold
    'rgb(64, 224, 208)': { symbol: '⏳', label: 'Reschedule' },  // turquoise
    'rgb(255, 165, 0)': { symbol: '⚠️', label: 'Upstream failed' }, // orange
    'rgb(255, 105, 180)': { symbol: '⤵️', label: 'Skipped' },    // hotpink
    'rgb(211, 211, 211)': { symbol: '🗑️', label: 'Removed' },    // lightgrey
    'rgb(210, 180, 140)': { symbol: '⏰', label: 'Scheduled' },   // tan
    'rgb(147, 112, 219)': { symbol: '⏸️', label: 'Deferred' }    // mediumpurple
};


    const ClassTransitionStore = {
        classToState: new Map(),

        updateMapping(className, color) {
            if (!this.classToState.has(className)) {
                const state = STATE_MAPPINGS[color];
                if (state) {
                    this.classToState.set(className, state);
                    debugLog('New class mapping:', className, state, color);
                }
            }
            return this.classToState.get(className);
        },

        getStateForClass(className) {
            return this.classToState.get(className);
        },

        debug() {
            console.log('Class to State Mappings:',
                Object.fromEntries(this.classToState));
        }
    };

    let lastExecutionTime = 0;

    function debugLog(...args) {
        if (CONFIG.DEBUG) console.log('[AirflowEnhancer]', ...args);
    }

    function createStatusIndicator(state) {
        const container = document.createElement('div');
        container.innerHTML = `<div class="status-symbol">${state.symbol}</div>`;
        container.style.cssText = `
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-size: 14px;
            font-weight: bold;
        `;
        return container;
    }

    function findElementsInShadowDOM(root, selector) {
        const elements = new Set();

        function traverse(node) {
            if (!node) return;
            if (node.matches && node.matches(selector)) {
                elements.add(node);
            }
            if (node.shadowRoot) {
                Array.from(node.shadowRoot.querySelectorAll('*')).forEach(traverse);
            }
            if (node.children) {
                Array.from(node.children).forEach(traverse);
            }
        }

        traverse(root);
        return Array.from(elements);
    }

    function modifyElement(element) {
        if (!element?.isConnected) return;

        const reactClass = Array.from(element.classList)
            .find(cls => cls.startsWith('c-'));

        if (!reactClass) {
            debugLog('No React class found for element');
            return;
        }

        let state = ClassTransitionStore.getStateForClass(reactClass);

        if (!state) {
            const backgroundColor = window.getComputedStyle(element).backgroundColor;
            state = ClassTransitionStore.updateMapping(reactClass, backgroundColor);

            if (!state) {
                if (backgroundColor !== '' && backgroundColor !== 'inherit' && backgroundColor !== 'transparent') {
                    debugLog('Unable to map new class:', reactClass, 'with color:', backgroundColor);
                }
                return;
            }
        }

        debugLog('Applying state:', { class: reactClass, state });
        element.style.setProperty('background', 'none', 'important');
        element.innerHTML = '';
        element.appendChild(createStatusIndicator(state));
    }

    async function modifyElements() {
        const rootElements = document.querySelectorAll('#root, #react-container, [id*="react"]');
        const taskInstances = new Set();

        [...rootElements, document.body].forEach(root => {
            findElementsInShadowDOM(root, CONFIG.TASK_INSTANCE_SELECTOR)
                .forEach(element => taskInstances.add(element));
        });

        if (taskInstances.size === 0) {
            debugLog('No task instances found, retrying...');
            await new Promise(resolve => setTimeout(resolve, 300));
            return modifyElements();
        }

        debugLog(`Found ${taskInstances.size} task instances`);
        taskInstances.forEach(modifyElement);
    }

    function throttledModifyElements() {
        const now = Date.now();
        if (now - lastExecutionTime >= CONFIG.THROTTLE_INTERVAL) {
            lastExecutionTime = now;
            modifyElements();
        }
    }

    function initialize() {
        debugLog('Initializing script');
        window._airflowEnhancerStore = window._airflowEnhancerStore || ClassTransitionStore;

        modifyElements();

        // Create and configure MutationObserver
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
                if (mutation.addedNodes.length ||
                    (mutation.type === 'attributes' &&
                     (mutation.attributeName === 'style' ||
                      mutation.attributeName === 'class'))) {
                    throttledModifyElements();
                }
            });
        });

        // Start observing the document
        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'class']
        });

        // Periodic debug output
        if (CONFIG.DEBUG) {
            setInterval(() => {
                ClassTransitionStore.debug();
            }, 10000);
        }

        // Event listeners for dynamic content
        ['load', 'urlchange'].forEach(event =>
            window.addEventListener(event, throttledModifyElements));

        // Handle history state changes
        ['pushState', 'replaceState'].forEach(method => {
            const original = history[method];
            history[method] = function() {
                original.apply(history, arguments);
                throttledModifyElements();
            };
        });

        window.addEventListener('popstate', throttledModifyElements);

        // Cleanup on page unload
        window.addEventListener('unload', () => {
            observer.disconnect();
        });
    }

    // Start the script
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initialize);
    } else {
        initialize();
    }

})();