Removes memory heap bloat by improving DOM and JQUI datacache clearing when swapping WI in the editor, and all other 'reloadEditor' calls via slashcommands etc. Results in a slight delay depending on entries visible via pagination (about 2s for 50 visible entries), but I added a pleasant fade transition to make it feel organic.

b55de85243bdae4e1202f3642b077712ba957f33

RossAscends <124905043+RossAscends@users.noreply.github.com>

Parents: 96fb85457f211eb2b1c2d564840c9da57c975d95

public/scripts/world-info.js+109 -15 Viewed

 import { Fuse } from '../lib.js';
 import { saveSettings, substituteParams, getRequestHeaders, chat_metadata, this_chid, characters, saveCharacterDebounced, menu_type, eventSource, event_types, getExtensionPromptByName, saveMetadata, getCurrentChatId, extension_prompt_roles } from '../script.js';
-import { download, debounce, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, getSortableDelay, escapeRegex, PAGINATION_TEMPLATE, navigation_option, waitUntilCondition, isTrueBoolean, setValueByPath, flashHighlight, select2ModifyOptions, getSelect2OptionId, dynamicSelect2DataViaAjax, highlightRegex, select2ChoiceClickSubscribe, isFalseBoolean, getSanitizedFilename, checkOverwriteExistingData, getStringHash, parseStringArray, cancelDebounce, findChar, onlyUnique, equalsIgnoreCaseAndAccents } from './utils.js';
+import { download, debounce, delay, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, getSortableDelay, escapeRegex, PAGINATION_TEMPLATE, navigation_option, waitUntilCondition, isTrueBoolean, setValueByPath, flashHighlight, select2ModifyOptions, getSelect2OptionId, dynamicSelect2DataViaAjax, highlightRegex, select2ChoiceClickSubscribe, isFalseBoolean, getSanitizedFilename, checkOverwriteExistingData, getStringHash, parseStringArray, cancelDebounce, findChar, onlyUnique, equalsIgnoreCaseAndAccents } from './utils.js';
 import { extension_settings, getContext } from './extensions.js';
 import { NOTE_MODULE_NAME, metadata_keys, shouldWIAddPrompt } from './authors-note.js';
 import { isMobile } from './RossAscends-mods.js';

  */
 export async function showWorldEditor(name) {
     if (!name) {
-        hideWorldEditor();
+        await hideWorldEditor();
         return;
+    }
     const wiData = await loadWorldInfo(name);
-    displayWorldEntries(name, wiData);
+    await displayWorldEntries(name, wiData);
+}
 /**

@@ -1815,8 +1815,8 @@ export async function updateWorldInfoList() {
1815	}	1815	}
1816	}	1816	}
1817		1817
1818	function hideWorldEditor() {	1818	async function hideWorldEditor() {
1819	displayWorldEntries(null, null);	1819	await displayWorldEntries(null, null);
1820	}	1820	}
1821		1821
1822	function getWIElement(name) {	1822	function getWIElement(name) {

     worldEntryKeyOptionsCache.sort((a, b) => b.count - a.count || a.text.localeCompare(b.text));
+}
-function displayWorldEntries(name, data, navigation = navigation_option.none, flashOnNav = true) {
+function clearEntryList() {
-    updateEditor = (navigation, flashOnNav = true) => displayWorldEntries(name, data, navigation, flashOnNav);
+    console.time('clearEntryList');
+    const $list = $('#world_popup_entries_list');
+    if (!$list.children().length) {
+        console.warn('List already empty, skipping cleanup.');
+        console.timeEnd('clearEntryList');
+        return;
+    }
+    // Step 1: Clean all <option> elements within <select>
+    console.warn(`Before cleaning: ${$list.find('option').length} options in list`);
+    $list.find('option').each(function () {
+        const $option = $(this);
+        $option.off();
+        $.cleanData([$option[0]]);
+        $option.remove();
+    });
+    console.warn(`Post-clean: ${$list.find('option').length} options in list`);
+    // Step 2: Clean all <select> elements
+    console.warn(`Before cleaning: ${$list.find('select').length} selects in list`);
+    $list.find('select').each(function () {
+        const $select = $(this);
+        // Remove Select2-related data and container if present
+        if ($select.hasClass('select2-hidden-accessible')) {
+            try {
+                $select.select2('destroy');
+            } catch (e) {
+                console.warn('Select2 destroy failed:', e);
+            }
+        }
+        const $container = $select.parent();
+        if ($container.length) {
+            $container.find('*').off();
+            $.cleanData($container.find('*').get());
+            $container.remove();
+        } else {
+            console.warn('container not found');
+            console.warn($select.parent().html());
+        }
+        // Destroy Select2 if applicable
+        $select.off();
+        $.cleanData([$select[0]]);
+    });
+    console.warn(`Post-clean: ${$list.find('select').length} selects in list`);
+    // Step 3: Clean <div>, <span>, <input>
+    console.warn(`Before cleaning: ${$list.find('div, span, input').length} divs, spans, inputs in list`);
+    $list.find('div, span, input').each(function () {
+        const $elem = $(this);
+        $elem.off();
+        $.cleanData([$elem[0]]);
+        $elem.remove();
+    });
+    console.warn(`Post-clean: ${$list.find('div, span, input').length} divs, spans, inputs in list`);
+    // Destroy Sortable
+    console.warn(`Before cleaning: ${$list.sortable('instance') ? 1 : 0} sortable instance in list`);
+    if ($list.sortable('instance')) {
+        $list.sortable('destroy');
+    }
+    console.warn(`Post-cleaning: ${$list.sortable('instance') ? 1 : 0} sortable instance in list`);
+    let totalElementsOfanyKindLeftInList = $list.children().length;
+    // Final cleanup
+    if (totalElementsOfanyKindLeftInList !== 0) {
+        console.time('empty');
+        console.warn(`Before .empty(): ${totalElementsOfanyKindLeftInList} elements left in list`);
+        $list.empty();
+        totalElementsOfanyKindLeftInList = $list.children().length;
+        console.warn(`After .empty(): ${totalElementsOfanyKindLeftInList} elements left in list`);
+        console.timeEnd('empty');
+    } else {
+        console.warn('Entry List is already totally empty, no need to call .empty()');
+    }
+    console.timeEnd('clearEntryList');
+}
+async function displayWorldEntries(name, data, navigation = navigation_option.none, flashOnNav = true) {
+    updateEditor = async (navigation, flashOnNav = true) => await displayWorldEntries(name, data, navigation, flashOnNav);
     const worldEntriesList = $('#world_popup_entries_list');
     // We save costly performance by removing all events before emptying. Because we know there are no relevant event handlers reacting on removing elements
     // This prevents jQuery from actually going through all registered events on the controls for each entry when removing it
-    worldEntriesList.find('*').off();
+    //worldEntriesList.find('*').off();
-    worldEntriesList.empty().show();
+    worldEntriesList.css({ 'opacity': 0, 'transition': 'opacity 250ms ease-in-out' });
+    await delay(250);
+    clearEntryList(); // Use enhanced cleanup
+    worldEntriesList.show();
     if (!data || !('entries' in data)) {
         $('#world_popup_new').off('click').on('click', nullWorldInfo);

         callback: async function (/** @type {object[]} */ page) {
             // We save costly performance by removing all events before emptying. Because we know there are no relevant event handlers reacting on removing elements
             // This prevents jQuery from actually going through all registered events on the controls for each entry when removing it
-            worldEntriesList.find('*').off();
+            //worldEntriesList.find('*').off();
-            worldEntriesList.empty();
+            clearEntryList();
+            //worldEntriesList.empty();
             const keywordHeaders = await renderTemplateAsync('worldInfoKeywordHeaders');
             const blocksPromises = page.map(async (entry) => await getWorldEntry(name, data, entry)).filter(x => x);

@@ -2173,7 +2261,7 @@ function displayWorldEntries(name, data, navigation = navigation_option.none, fl
2173	if (selectedIndex !== -1) {	2261	if (selectedIndex !== -1) {
2174	$('#world_editor_select').val(selectedIndex).trigger('change');	2262	$('#world_editor_select').val(selectedIndex).trigger('change');
2175	} else {	2263	} else {
2176	hideWorldEditor();	2264	await hideWorldEditor();
2177	}	2265	}
2178	}	2266	}
2179	});	2267	});

             await saveWorldInfo(name, data);
         },
     });
+    worldEntriesList.css('opacity', '1');
+    //remove inline CSS on the list
+    worldEntriesList.removeAttr('style');
     //$("#world_popup_entries_list").disableSelection();
+}

         container.appendChild(select);
         let selectedWorldIndex = -1;
-        select.addEventListener('change', function() {
+        select.addEventListener('change', function () {
             selectedWorldIndex = this.value === '' ? -1 : Number(this.value);
         });

     if (selectedIndex !== -1) {
         $('#world_editor_select').val(selectedIndex).trigger('change');
     } else {
-        hideWorldEditor();
+        await hideWorldEditor();
+    }
     return true;

         const selectedIndex = String($('#world_editor_select').find(':selected').val());
         if (selectedIndex === '') {
-            hideWorldEditor();
+            await hideWorldEditor();
         } else {
             const worldName = world_names[selectedIndex];
             showWorldEditor(worldName);