From 5a2fca8ca599cece19b0be147e4a458d750952c4 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Tue, 7 May 2024 16:44:11 -0400
Subject: [PATCH] refactor CardsView to CardView to match Dirs and Tree view
 lengths. Got sick of it being 1 letter longer.

---
 html/extra-networks-pane.html         |  18 +--
 javascript/extraNetworks.js           | 172 +++++++++++++-------------
 javascript/extraNetworksClusterize.js |   2 +-
 modules/ui_extra_networks.py          |  30 ++---
 4 files changed, 111 insertions(+), 111 deletions(-)

diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index a759b2d6a..64a70f72f 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -105,7 +105,7 @@
                             d="M 5 5 V 14 H 8 M 5 8 H 8" />
                     </svg>
                 </button>
-                <button class="extra-network-control extra-network-control--cards-view" title="Enable Card View"
+                <button class="extra-network-control extra-network-control--card-view" title="Enable Card View"
                     {btn_card_view_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor" stroke="none">
@@ -146,16 +146,16 @@
                         class='extra-network-tree-content clusterize-content'></div>
                 </div>
             </div>
-            <div class="extra-network-content resize-handle-col" style="{cards_view_style}">
-                <div id='{tabname}_{extra_networks_tabname}_cards_list_loading_splash'
-                    class='extra-network-cards extra-network-list-splash'>{cards_list_loading_splash_content}</div>
-                <div id='{tabname}_{extra_networks_tabname}_cards_list_no_data_splash'
-                    class='extra-network-cards extra-network-list-splash hidden'>{cards_list_no_data_splash_content}
+            <div class="extra-network-content resize-handle-col" style="{card_view_style}">
+                <div id='{tabname}_{extra_networks_tabname}_card_list_loading_splash'
+                    class='extra-network-cards extra-network-list-splash'>{card_list_loading_splash_content}</div>
+                <div id='{tabname}_{extra_networks_tabname}_card_list_no_data_splash'
+                    class='extra-network-cards extra-network-list-splash hidden'>{card_list_no_data_splash_content}
                 </div>
-                <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area'
+                <div id='{tabname}_{extra_networks_tabname}_card_list_scroll_area'
                     class='extra-network-cards styled-scrollbar clusterize-scroll'>
-                    <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'
-                        class='extra-network-cards-content clusterize-content'></div>
+                    <div id='{tabname}_{extra_networks_tabname}_card_list_content_area'
+                        class='extra-network-card-content clusterize-content'></div>
                 </div>
             </div>
         </div>
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 06bb6339e..88a1d79f7 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -2,7 +2,7 @@
 /*global
     selectCheckpoint,
     ExtraNetworksClusterizeTreeList,
-    ExtraNetworksClusterizeCardsList,
+    ExtraNetworksClusterizeCardList,
     waitForElement,
     isString,
     isElement,
@@ -89,7 +89,7 @@ class ExtraNetworksTab {
     extra_networks_tabname;
     tabname_full; // {tabname}_{extra_networks_tabname}
     tree_list;
-    cards_list;
+    card_list;
     container_elem;
     controls_elem;
     txt_search_elem;
@@ -109,8 +109,8 @@ class ExtraNetworksTab {
     refresh_in_progress = false;
     dirs_view_en = false;
     tree_view_en = false;
-    cards_view_en = false;
-    cards_list_splash_state = null;
+    card_view_en = false;
+    card_list_splash_state = null;
     tree_list_splash_state = null;
     directory_filters = {};
     list_button_states = {};
@@ -132,11 +132,11 @@ class ExtraNetworksTab {
             waitForElement(`#${this.tabname}_neg_prompt_row`).then(elem => this.neg_prompt_row_elem = elem),
             waitForElement(`#${this.tabname_full}_tree_list_scroll_area`),
             waitForElement(`#${this.tabname_full}_tree_list_content_area`),
-            waitForElement(`#${this.tabname_full}_cards_list_scroll_area`),
-            waitForElement(`#${this.tabname_full}_cards_list_content_area`),
+            waitForElement(`#${this.tabname_full}_card_list_scroll_area`),
+            waitForElement(`#${this.tabname_full}_card_list_content_area`),
         ]);
 
-        this.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
+        this.updateSplashState({card_list_state: "loading", tree_list_state: "loading"});
 
         this.txt_search_elem = this.controls_elem.querySelector(".extra-network-control--search-text");
         this.dirs_view_en = "selected" in this.controls_elem.querySelector(
@@ -145,8 +145,8 @@ class ExtraNetworksTab {
         this.tree_view_en = "selected" in this.controls_elem.querySelector(
             ".extra-network-control--tree-view"
         ).dataset;
-        this.cards_view_en = "selected" in this.controls_elem.querySelector(
-            ".extra-network-control--cards-view"
+        this.card_view_en = "selected" in this.controls_elem.querySelector(
+            ".extra-network-control--card-view"
         ).dataset;
 
         // determine whether compact prompt mode is enabled.
@@ -166,28 +166,28 @@ class ExtraNetworksTab {
             "Please refresh tab.<br>" +
             `${error_btn.outerHTML}</div>`;
 
-        await Promise.all([this.setupTreeList(), this.setupCardsList()]);
+        await Promise.all([this.setupTreeList(), this.setupCardList()]);
 
         const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
         const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view");
-        const btn_cards_view = this.controls_elem.querySelector(".extra-network-control--cards-view");
+        const btn_card_view = this.controls_elem.querySelector(".extra-network-control--card-view");
         const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
         // We actually want to select the tree view's column in the resize-handle-row.
         // This is what we actually show/hide, not the inner elements.
         const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
-        const div_cards = this.cards_list.scroll_elem.closest(".resize-handle-col");
+        const div_card = this.card_list.scroll_elem.closest(".resize-handle-col");
 
         this.dirs_view_en = "selected" in btn_dirs_view.dataset;
         this.tree_view_en = "selected" in btn_tree_view.dataset;
-        this.cards_view_en = "selected" in btn_cards_view.dataset;
+        this.card_view_en = "selected" in btn_card_view.dataset;
         // Remove "hidden" class if button is enabled, otherwise add it.
         div_dirs.classList.toggle("hidden", !this.dirs_view_en);
         div_tree.classList.toggle("hidden", !this.tree_view_en);
-        div_cards.classList.toggle("hidden", !this.cards_view_en);
+        div_card.classList.toggle("hidden", !this.card_view_en);
 
         // Apply the current resize handle classes.
         const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
-        resize_handle_row.classList.toggle("resize-handle-hidden", !this.tree_view_en || !this.cards_view_en);
+        resize_handle_row.classList.toggle("resize-handle-hidden", !this.tree_view_en || !this.card_view_en);
 
         const sort_mode_elem = this.controls_elem.querySelector(".extra-network-control--sort-mode[data-selected]");
         isElementThrowError(sort_mode_elem);
@@ -211,9 +211,9 @@ class ExtraNetworksTab {
     destroy() {
         this.unload();
         this.tree_list.destroy();
-        this.cards_list.destroy();
+        this.card_list.destroy();
         this.tree_list = null;
-        this.cards_list = null;
+        this.card_list = null;
         this.container_elem = null;
         this.controls_elem = null;
         this.txt_search_elem = null;
@@ -227,7 +227,7 @@ class ExtraNetworksTab {
         this.refresh_in_progress = false;
         this.tree_view_en = false;
         this.dirs_view_en = false;
-        this.cards_view_en = false;
+        this.card_view_en = false;
         this.directory_filters = {};
         this.list_button_states = {};
     }
@@ -261,39 +261,39 @@ class ExtraNetworksTab {
         await this.tree_list.setup();
     }
 
-    async setupCardsList() {
-        if (this.cards_list instanceof ExtraNetworksClusterizeCardsList) {
-            this.cards_list.destroy();
+    async setupCardList() {
+        if (this.card_list instanceof ExtraNetworksClusterizeCardList) {
+            this.card_list.destroy();
         }
-        this.cards_list = new ExtraNetworksClusterizeCardsList({
+        this.card_list = new ExtraNetworksClusterizeCardList({
             tabname: this.tabname,
             extra_networks_tabname: this.extra_networks_tabname,
-            scrollId: `${this.tabname_full}_cards_list_scroll_area`,
-            contentId: `${this.tabname_full}_cards_list_content_area`,
+            scrollId: `${this.tabname_full}_card_list_scroll_area`,
+            contentId: `${this.tabname_full}_card_list_content_area`,
             tag: "div",
             no_data_html: "No data matching filter.",
             error_html: this.clusterize_error_html,
             callbacks: {
-                initData: this.onInitCardsData.bind(this),
-                fetchData: this.onFetchCardsData.bind(this),
+                initData: this.onInitCardData.bind(this),
+                fetchData: this.onFetchCardData.bind(this),
             },
         });
-        await this.cards_list.setup();
+        await this.card_list.setup();
     }
 
     setSortMode(sort_mode_str) {
         this.sort_mode_str = sort_mode_str;
-        this.cards_list.setSortMode(this.sort_mode_str);
+        this.card_list.setSortMode(this.sort_mode_str);
     }
 
     setSortDir(sort_dir_str) {
         this.sort_dir_str = sort_dir_str;
-        this.cards_list.setSortDir(this.sort_dir_str);
+        this.card_list.setSortDir(this.sort_dir_str);
     }
 
     setFilterStr(filter_str) {
         this.filter_str = filter_str;
-        this.cards_list.setFilterStr(this.filter_str);
+        this.card_list.setFilterStr(this.filter_str);
     }
 
     movePrompt(show_prompt = true, show_neg_prompt = true) {
@@ -324,7 +324,7 @@ class ExtraNetworksTab {
             },
             (data) => {
                 if (data && data.html) {
-                    this.cards_list.updateHtml(elem, data.html);
+                    this.card_list.updateHtml(elem, data.html);
                 }
             },
         );
@@ -338,7 +338,7 @@ class ExtraNetworksTab {
         this.controls_elem.classList.add("hidden");
     }
 
-    updateSplashState({cards_list_state, tree_list_state} = {}) {
+    updateSplashState({card_list_state, tree_list_state} = {}) {
         const _handle_state = (state_str, loading_elem, no_data_elem) => {
             switch (state_str) {
             case "loading":
@@ -361,11 +361,11 @@ class ExtraNetworksTab {
         let loading_elem;
         let no_data_elem;
 
-        if (isString(cards_list_state)) {
-            this.cards_list_splash_state = cards_list_state;
-            loading_elem = document.getElementById(`${this.tabname_full}_cards_list_loading_splash`);
-            no_data_elem = document.getElementById(`${this.tabname_full}_cards_list_no_data_splash`);
-            _handle_state(cards_list_state, loading_elem, no_data_elem);
+        if (isString(card_list_state)) {
+            this.card_list_splash_state = card_list_state;
+            loading_elem = document.getElementById(`${this.tabname_full}_card_list_loading_splash`);
+            no_data_elem = document.getElementById(`${this.tabname_full}_card_list_no_data_splash`);
+            _handle_state(card_list_state, loading_elem, no_data_elem);
         }
 
         if (isString(tree_list_state)) {
@@ -377,13 +377,13 @@ class ExtraNetworksTab {
     }
 
     async #refresh() {
-        this.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
+        this.updateSplashState({card_list_state: "loading", tree_list_state: "loading"});
 
         try {
             await this.waitForServerPageReady();
         } catch (error) {
             console.error(`refresh error: ${error.message}`);
-            this.updateSplashState({cards_list_state: "no_data", tree_list_state: "no_data"});
+            this.updateSplashState({card_list_state: "no_data", tree_list_state: "no_data"});
             return;
         }
         const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
@@ -392,29 +392,29 @@ class ExtraNetworksTab {
         // We actually want to select the tree view's column in the resize-handle-row.
         // This is what we actually show/hide, not the inner elements.
         const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
-        const div_cards = this.cards_list.scroll_elem.closest(".resize-handle-col");
+        const div_card = this.card_list.scroll_elem.closest(".resize-handle-col");
 
         this.dirs_view_en = "selected" in btn_dirs_view.dataset;
         this.tree_view_en = "selected" in btn_tree_view.dataset;
-        this.cards_view_en = "selected" in btn_tree_view.dataset;
+        this.card_view_en = "selected" in btn_tree_view.dataset;
         // Remove "hidden" class if button is enabled, otherwise add it.
         div_dirs.classList.toggle("hidden", !this.dirs_view_en);
         div_tree.classList.toggle("hidden", !this.tree_view_en);
-        div_cards.classList.toggle("hidden", !this.cards_view_en);
+        div_card.classList.toggle("hidden", !this.card_view_en);
 
         // Apply the current resize handle classes.
         const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
         resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
-        if (this.tree_view_en && !this.cards_view_en) {
+        if (this.tree_view_en && !this.card_view_en) {
             this.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
         } else {
             this.tree_list.scroll_elem.parentElement.style.flexGrow = null;
         }
 
-        await Promise.all([this.setupTreeList(), this.setupCardsList()]);
+        await Promise.all([this.setupTreeList(), this.setupCardList()]);
         this.tree_list.enable(this.tree_view_en);
-        this.cards_list.enable(this.cards_view_en);
-        await Promise.all([this.tree_list.load(true), this.cards_list.load(true)]);
+        this.card_list.enable(this.card_view_en);
+        await Promise.all([this.tree_list.load(true), this.card_list.load(true)]);
 
         // apply the previous sort/filter options
         await this.applyListButtonStates();
@@ -436,32 +436,32 @@ class ExtraNetworksTab {
     async load(show_prompt, show_neg_prompt) {
         this.movePrompt(show_prompt, show_neg_prompt);
         this.updateSplashState({
-            cards_list_state: this.cards_list_splash_state,
+            card_list_state: this.card_list_splash_state,
             tree_list_state: this.tree_list_splash_state,
         });
         this.showControls();
         this.tree_list.enable(this.tree_view_en);
-        this.cards_list.enable(this.cards_view_en);
-        await Promise.all([this.tree_list.load(), this.cards_list.load()]);
+        this.card_list.enable(this.card_view_en);
+        await Promise.all([this.tree_list.load(), this.card_list.load()]);
     }
 
     unload() {
         this.movePrompt(false, false);
         this.hideControls();
         this.tree_list.enable(false);
-        this.cards_list.enable(false);
+        this.card_list.enable(false);
     }
 
     addDirectoryFilter(div_id, filter_str, recurse) {
         filter_str = isString(filter_str) ? filter_str : "";
         recurse = recurse === true || recurse === false ? recurse : false;
-        if (this.cards_list.addDirectoryFilter(div_id, filter_str, recurse)) {
+        if (this.card_list.addDirectoryFilter(div_id, filter_str, recurse)) {
             this.directory_filters[div_id] = {filter_str: filter_str, recurse: recurse};
         }
     }
 
     removeDirectoryFilter(div_id) {
-        this.cards_list.removeDirectoryFilter(div_id);
+        this.card_list.removeDirectoryFilter(div_id);
         delete this.directory_filters[div_id];
     }
 
@@ -474,7 +474,7 @@ class ExtraNetworksTab {
             excluded_div_ids = [];
         }
 
-        this.cards_list.clearDirectoryFilters({excluded_div_ids: excluded_div_ids});
+        this.card_list.clearDirectoryFilters({excluded_div_ids: excluded_div_ids});
         for (const div_id of Object.keys(this.directory_filters)) {
             if (excluded_div_ids.includes(div_id)) {
                 continue;
@@ -484,11 +484,11 @@ class ExtraNetworksTab {
     }
 
     setDirectoryFilters() {
-        this.cards_list.setDirectoryFilters(this.directory_filters);
+        this.card_list.setDirectoryFilters(this.directory_filters);
     }
 
     applyDirectoryFilters() {
-        this.cards_list.filterData();
+        this.card_list.filterData();
     }
 
     applyFilter(filter_str) {
@@ -529,13 +529,13 @@ class ExtraNetworksTab {
         return await fetchWithRetryAndBackoff(url, payload, opts);
     }
 
-    async onInitCardsData() {
-        this.updateSplashState({cards_list_state: "loading"});
+    async onInitCardData() {
+        this.updateSplashState({card_list_state: "loading"});
         try {
             await this.waitForServerPageReady();
         } catch (error) {
-            console.error(`onInitCardsData error: ${error.message}`);
-            this.updateSplashState({cards_list_state: "no_data"});
+            console.error(`onInitCardData error: ${error.message}`);
+            this.updateSplashState({card_list_state: "no_data"});
             return {};
         }
 
@@ -551,21 +551,21 @@ class ExtraNetworksTab {
             });
         });
 
-        const url = "./sd_extra_networks/init-cards-data";
+        const url = "./sd_extra_networks/init-card-data";
         const payload = {tabname: this.tabname, extra_networks_tabname: this.extra_networks_tabname};
         const timeout_ms = EXTRA_NETWORKS_INIT_DATA_TIMEOUT_MS;
         const opts = {timeout_ms: timeout_ms, response_handler: response_handler};
         try {
             const response = await fetchWithRetryAndBackoff(url, payload, opts);
             if (Object.keys(response.data).length === 0) {
-                this.updateSplashState({cards_list_state: "no_data"});
+                this.updateSplashState({card_list_state: "no_data"});
             } else {
-                this.updateSplashState({cards_list_state: "show"});
+                this.updateSplashState({card_list_state: "show"});
             }
             return response.data;
         } catch (error) {
-            console.error(`onInitCardsData error: ${error.message}`);
-            this.updateSplashState({cards_list_state: "no_data"});
+            console.error(`onInitCardData error: ${error.message}`);
+            this.updateSplashState({card_list_state: "no_data"});
             return {};
         }
     }
@@ -611,8 +611,8 @@ class ExtraNetworksTab {
         }
     }
 
-    async onFetchCardsData(div_ids) {
-        const url = "./sd_extra_networks/fetch-cards-data";
+    async onFetchCardData(div_ids) {
+        const url = "./sd_extra_networks/fetch-card-data";
         const payload = {extra_networks_tabname: this.extra_networks_tabname, div_ids: div_ids};
         const timeout_ms = EXTRA_NETWORKS_FETCH_DATA_TIMEOUT_MS;
         const opts = {timeout_ms: timeout_ms};
@@ -622,14 +622,14 @@ class ExtraNetworksTab {
                 console.warn(`Failed to fetch multiple div_ids: ${response.missing_div_ids}`);
             }
             if (Object.keys(response.data).length === 0) {
-                this.updateSplashState({cards_list_state: "no_data"});
+                this.updateSplashState({card_list_state: "no_data"});
             } else {
-                this.updateSplashState({cards_list_state: "show"});
+                this.updateSplashState({card_list_state: "show"});
             }
             return response.data;
         } catch (error) {
-            console.error(`onFetchCardsData error: ${error.message}`);
-            this.updateSplashState({cards_list_state: "no_data"});
+            console.error(`onFetchCardData error: ${error.message}`);
+            this.updateSplashState({card_list_state: "no_data"});
             return {};
         }
     }
@@ -1027,7 +1027,7 @@ function extraNetworksShowMetadata(text) {
 
 function extraNetworksRefreshSingleCard(tabname, extra_networks_tabname, name) {
     const tab = extra_networks_tabs[`${tabname}_${extra_networks_tabname}`];
-    const elem = tab.cards_list.content_elem.querySelector(`.card[data-name="${name}"]`);
+    const elem = tab.card_list.content_elem.querySelector(`.card[data-name="${name}"]`);
     isElementThrowError(elem);
     tab.refreshSingleCard(elem);
 }
@@ -1154,9 +1154,9 @@ async function extraNetworksControlTreeViewOnClick(event) {
     // this is only recently supported in firefox. So for now we just add a class
     // to the resize-handle-row instead.
     const resize_handle_row = tab.tree_list.scroll_elem.closest(".resize-handle-row");
-    resize_handle_row.classList.toggle("resize-handle-hidden", !tab.cards_view_en || !tab.tree_view_en);
+    resize_handle_row.classList.toggle("resize-handle-hidden", !tab.card_view_en || !tab.tree_view_en);
 
-    if (tab.tree_view_en && !tab.cards_view_en) {
+    if (tab.tree_view_en && !tab.card_view_en) {
         tab.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
     } else {
         tab.tree_list.scroll_elem.parentElement.style.flexGrow = null;
@@ -1190,28 +1190,28 @@ function extraNetworksControlDirsViewOnClick(event) {
     tab.applyListButtonStates();
 }
 
-async function extraNetworksControlCardsViewOnClick(event) {
+async function extraNetworksControlCardViewOnClick(event) {
     /** Handles `onclick` events for the Card View button.
      *
      * Toggles the card view in the extra networks pane.
      */
-    const btn = event.target.closest(".extra-network-control--cards-view");
+    const btn = event.target.closest(".extra-network-control--card-view");
     const controls = btn.closest(".extra-network-controls");
     const tab = extra_networks_tabs[controls.dataset.tabnameFull];
     btn.toggleAttribute("data-selected");
-    tab.cards_view_en = "selected" in btn.dataset;
+    tab.card_view_en = "selected" in btn.dataset;
 
-    tab.cards_list.scroll_elem.parentElement.classList.toggle("hidden", !tab.cards_view_en);
-    tab.cards_list.enable(tab.cards_view_en);
+    tab.card_list.scroll_elem.parentElement.classList.toggle("hidden", !tab.card_view_en);
+    tab.card_list.enable(tab.card_view_en);
 
     // Apply the resize-handle-hidden class to the resize-handle-row.
     // NOTE: This can be simplified using only css with the ":has" selector however
     // this is only recently supported in firefox. So for now we just add a class
     // to the resize-handle-row instead.
-    const resize_handle_row = tab.cards_list.scroll_elem.closest(".resize-handle-row");
-    resize_handle_row.classList.toggle("resize-handle-hidden", !tab.cards_view_en || !tab.tree_view_en);
+    const resize_handle_row = tab.card_list.scroll_elem.closest(".resize-handle-row");
+    resize_handle_row.classList.toggle("resize-handle-hidden", !tab.card_view_en || !tab.tree_view_en);
 
-    if (tab.tree_view_en && !tab.cards_view_en) {
+    if (tab.tree_view_en && !tab.card_view_en) {
         tab.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
     } else {
         tab.tree_list.scroll_elem.parentElement.style.flexGrow = null;
@@ -1220,8 +1220,8 @@ async function extraNetworksControlCardsViewOnClick(event) {
     // If the tree list hasn't loaded yet, we need to force it to load.
     // This can happen if tree view is disabled by default or before refresh.
     // Then after refresh, enabling the tree view will require a load.
-    if (tab.cards_view_en && !tab.cards_list.initial_load) {
-        await tab.cards_list.load();
+    if (tab.card_view_en && !tab.card_list.initial_load) {
+        await tab.card_list.load();
     }
 }
 
@@ -1250,11 +1250,11 @@ function extraNetworksControlRefreshOnClick(event) {
             return;
         }
 
-        tab.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
+        tab.updateSplashState({card_list_state: "loading", tree_list_state: "loading"});
         // We want to reset tab lists on refresh click so that the viewing area
         // shows that it is loading new data.
         tab.tree_list.clear();
-        tab.cards_list.clear();
+        tab.card_list.clear();
         // Fire an event for this button click.
         gradioApp().getElementById(
             `${tabname_full}_extra_refresh_internal`
@@ -1541,7 +1541,7 @@ function extraNetworksSetupEventDelegators() {
         ".extra-network-control--sort-dir": extraNetworksControlSortDirOnClick,
         ".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick,
         ".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick,
-        ".extra-network-control--cards-view": extraNetworksControlCardsViewOnClick,
+        ".extra-network-control--card-view": extraNetworksControlCardViewOnClick,
         ".extra-network-control--refresh": extraNetworksControlRefreshOnClick,
     };
 
diff --git a/javascript/extraNetworksClusterize.js b/javascript/extraNetworksClusterize.js
index db6aa869d..e57e1d28b 100644
--- a/javascript/extraNetworksClusterize.js
+++ b/javascript/extraNetworksClusterize.js
@@ -526,7 +526,7 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
     }
 }
 
-class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
+class ExtraNetworksClusterizeCardList extends ExtraNetworksClusterize {
     constructor(args) {
         super({...args});
     }
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 109544199..e81732324 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -365,7 +365,7 @@ class ExtraNetworksPage:
         return res
 
     def get_button_row(self, tabname: str, item: dict) -> str:
-        """Generates a row of buttons for use in Tree/Cards View items."""
+        """Generates a row of buttons for use in Tree/Card View items."""
         metadata = item.get("metadata", None)
         name = item.get("name", "")
         filename = os.path.normpath(item.get("filename", ""))
@@ -474,8 +474,8 @@ class ExtraNetworksPage:
             description=description,
         )
 
-    def generate_cards_view_data(self, tabname: str) -> dict:
-        """Generates the datasets and HTML used to display the Cards View.
+    def generate_card_view_data(self, tabname: str) -> dict:
+        """Generates the datasets and HTML used to display the Card View.
 
         Returns:
             A dictionary containing necessary info for the client.
@@ -809,9 +809,9 @@ class ExtraNetworksPage:
             self.tree_roots[abspath] = DirectoryTreeNode(os.path.dirname(abspath), abspath, None)
             self.tree_roots[abspath].build(tree_items)
 
-        cards_list_loading_splash_content = "Loading..."
+        card_list_loading_splash_content = "Loading..."
         no_cards_html_dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
-        cards_list_no_data_splash_content = (
+        card_list_no_data_splash_content = (
             "<div class='nocards'>"
             "<h1>Nothing here. Add some content to the following directories:</h1>"
             f"<ul>{no_cards_html_dirs}</ul>"
@@ -855,10 +855,10 @@ class ExtraNetworksPage:
                 "btn_tree_view_data_attributes": "data-selected" if tree_view_en else "",
                 "btn_card_view_data_attributes": "data-selected" if card_view_en else "",
                 "tree_view_style": f"flex-basis: {shared.opts.extra_networks_tree_view_default_width}px;",
-                "cards_view_style": "flex-grow: 1;",
+                "card_view_style": "flex-grow: 1;",
                 "dirs_html": dirs_html,
-                "cards_list_loading_splash_content": cards_list_loading_splash_content,
-                "cards_list_no_data_splash_content": cards_list_no_data_splash_content,
+                "card_list_loading_splash_content": card_list_loading_splash_content,
+                "card_list_no_data_splash_content": card_list_no_data_splash_content,
                 "tree_list_loading_splash_content": tree_list_loading_splash_content,
                 "tree_list_no_data_splash_content": tree_list_no_data_splash_content,
             }
@@ -1017,8 +1017,8 @@ def init_tree_data(tabname: str = "", extra_networks_tabname: str = "") -> JSONR
     return JSONResponse({"data": data, "ready": data is not None})
 
 
-def init_cards_data(tabname: str = "", extra_networks_tabname: str = "") -> JSONResponse:
-    """Generates the initial Cards View data and returns a simplified dataset.
+def init_card_data(tabname: str = "", extra_networks_tabname: str = "") -> JSONResponse:
+    """Generates the initial Card View data and returns a simplified dataset.
 
     The data returned does not contain any HTML strings.
 
@@ -1028,7 +1028,7 @@ def init_cards_data(tabname: str = "", extra_networks_tabname: str = "") -> JSON
     """
     page = get_page_by_name(extra_networks_tabname)
 
-    data = page.generate_cards_view_data(tabname)
+    data = page.generate_card_view_data(tabname)
 
     return JSONResponse({"data": data, "ready": data is not None})
 
@@ -1059,11 +1059,11 @@ def fetch_tree_data(
     return JSONResponse({"data": res, "missing_div_ids": missed})
 
 
-def fetch_cards_data(
+def fetch_card_data(
     extra_networks_tabname: str = "",
     div_ids: str = "",
 ) -> JSONResponse:
-    """Retrieves Cards View HTML strings for the specified `div_ids`.
+    """Retrieves Card View HTML strings for the specified `div_ids`.
 
     Args:
         div_ids: A string with div_ids in CSV format.
@@ -1159,9 +1159,9 @@ def add_pages_to_demo(app):
     app.add_api_route("/sd_extra_networks/metadata", get_metadata, methods=["GET"])
     app.add_api_route("/sd_extra_networks/get-single-card", get_single_card, methods=["GET"])
     app.add_api_route("/sd_extra_networks/init-tree-data", init_tree_data, methods=["GET"])
-    app.add_api_route("/sd_extra_networks/init-cards-data", init_cards_data, methods=["GET"])
+    app.add_api_route("/sd_extra_networks/init-card-data", init_card_data, methods=["GET"])
     app.add_api_route("/sd_extra_networks/fetch-tree-data", fetch_tree_data, methods=["GET"])
-    app.add_api_route("/sd_extra_networks/fetch-cards-data", fetch_cards_data, methods=["GET"])
+    app.add_api_route("/sd_extra_networks/fetch-card-data", fetch_card_data, methods=["GET"])
     app.add_api_route("/sd_extra_networks/page-is-ready", page_is_ready, methods=["GET"])
     app.add_api_route("/sd_extra_networks/clear-page-data", clear_page_data, methods=["GET"])