Top K Frequent Elements - JS Solution

Solution code

const CURRENT_FREQ = 'current_freq', CURRENT_FREQ_COLOR = 'blue';

function visMainFunction(nums, k) {
    initClassProperties();
    explanationAndColorSchemaNotifications();
    VisArray.from(nums).options({ label: 'nums' }).createVis();

    // Step 1: Frequency Map
    startPartialBatch();
    startBatch();
    const freqMap = new VisMap();
    for (const num of nums) {
        const count = (freqMap.get(num) || 0) + 1;
        freqMap.set(num, count);
    }
    endBatch();
    notification(`
        🔢 <b>Step 1:</b> Count frequencies of all numbers.<br><br>
        We built a <b>frequency map</b> where each key is a number from <b>nums</b> 
        and each value represents how many times it appears.<br><br>
        These frequencies will be utilized to determine which elements are the top ${k} frequent elements.
    `);
    endBatch();

    // Step 2: MinHeap to keep top K elements
    startPartialBatch();
    notification(`
        📦 <b>Step 2:</b> Initialize a <b>MinHeap</b> (MinPriorityQueue) 
        to dynamically maintain the <b>top ${k}</b> most frequent elements as we traverse the frequency map 
        (initially, it holds fewer entries until we have processed at least <b>${k}</b> unique numbers).<br><br>
        The heap stores <code>{ num, freq }</code> pairs, always keeping the entry with the 
        <b>smallest frequency</b> at the top — representing the least frequent element
        among the current top candidates.<br><br>
        Whenever the heap exceeds size <b>${k}</b>, we remove that least frequent entry to ensure
        it continues to hold only the <b>top ${k}</b> most frequent elements seen so far.
    `);

    // Note that the MinPriorityQueue library version used by Leetcode accepts it as MinPriorityQueue((entry) => entry.freq)
    const heap = new VisMinPriorityQueue({ priority: (entry) => entry.freq }).options({ labelExtractionPolicy: (entry) => `n=${entry.num},f=${entry.freq}` });

    for (const [num, freq] of freqMap.entries()) {
        const keyVisManager = freqMap.makeVisManagerForKey(num);
        keyVisManager.addClass(CURRENT_FREQ);

        notification(`
            📥 Checking frequency of <b>${makeColoredSpan(num, CURRENT_FREQ_COLOR)}</b>: 
            appears <b>${freq}</b> time${freq > 1 ? 's' : ''}.<br><br>
            Inserting { num: ${num}, freq: ${freq} } into the MinHeap.
        `);
        heap.enqueue({ num, freq });

        if (heap.size() > k) {
            notification(`
                ⚖️ The heap size exceeded <b>${k}</b> after this insertion.<br><br>
                We'll call <code>dequeue()</code> to remove the <b>least frequent entry</b> — 
                the one currently at the top of the MinHeap — ensuring that only the 
                <b>top ${k}</b> most frequent elements</b> remain in the heap.
            `);
            heap.dequeue();
        }

        keyVisManager.removeClass(CURRENT_FREQ);
    }
    endBatch();

    notification(`
        📤 <b>Step 3:</b> Extracting all remaining elements from the heap.<br><br>
        We’ll now read each { num, freq } pair from the heap to form the final result list.<br>
        Since the heap holds only the top ${k} most frequent numbers, 
        all extracted values belong to the answer set.
    `);

    // Note that for the MinPriorityQueue version used by leetcode should map to entry.num instead 
    const result = heap.toArray().map(entry => entry.element.num);
    VisArray.from(result).options({ label: 'result' }).createVis(true);
    notification(`
        🏁 <b>Result complete!</b><br>
        The <b>top ${k}</b> most frequent elements have been extracted from the MinHeap 
        and placed into the <code>result</code> array.<br><br>
        The order may vary depending on heap internals, but since the problem allows any order,
        the result is valid and ready to return.
    `);
    return result;
}

function explanationAndColorSchemaNotifications() {
  explanationNotification();
  notification(`
    🎨 <b>Color Schema</b><br><br>
    🟦 <b>${makeColoredSpan('Current entry in frequency map', CURRENT_FREQ_COLOR)}</b> — the <b>frequency entry</b> that is currently being processed.
  `);
}

function initClassProperties() {
    setClassProperties(CURRENT_FREQ, {
        backgroundColor: CURRENT_FREQ_COLOR
    });
}