// === Constants === // Category we want to hide from user selection, but still allow assigned feedback to appear in portal const EXCLUDE_CATEGORY_LABELS = [ "Under Review", "Product Deprecated (Will Not Appear on Portal)" ]; // List of subcategories where we added "Atlas" or "Enterprise Advanced" prefix in the backend // We want to strip these prefixes in the portal UI because the portal already shows the primary category // Without this, it would be repetitive: "Atlas - Atlas Backups & Online Archive" const STRIP_PREFIX_LIST = [ "Atlas Charts", "Atlas Backups & Online Archive", "Atlas Monitoring, Alerts & Observability", "Enterprise Advanced Backups & Online Archive", "Enterprise Advanced Monitoring, Alerts & Observability", ]; // Mapping of subcategory IDs to their parent category names const PARENT_MAP = { "7548141154294845535": "Atlas", // Backups & Online Archive "7548141200222651477": "Atlas", // Billing & Account Management "7556328518696883299": "Atlas", // Charts "7548141186718564699": "Atlas", // Infra-as-code & APIs "7548141172744741446": "Atlas", // Monitoring, Alerts & Observability "7556329857711623227": "CLI & Shell", // Atlas CLI "7548141491442916104": "CLI & Shell", // Kafka "7548141639692678951": "Database", // Data Modeling & Indexing "7548141605899639640": "Database", // Performance & Optimization "7548141621229601547": "Database", // Querying & Aggregation "7548141674888259602": "Database", // Replication & Sharding "7548141689418670706": "Database", // Storage & Transactions "7548141847887735341": "Drivers & Frameworks", // AI Frameworks (ie: Langchain, Mastra) "7548141816650747033": "Drivers & Frameworks", // Drivers (ie: Node.js, Java, .NET) "7548141831345841376": "Drivers & Frameworks", // Frameworks (ie: Django) "7548141886491745240": "Education", // Documentation "7548141900732651327": "Education", // University "7548142026472366149": "Enterprise Advanced", // Backup & Restore "7548142041467871467": "Enterprise Advanced", // Cluster Deployment & Management "7548142104564903515": "Enterprise Advanced", // Kubernetes "7548142056904505173": "Enterprise Advanced", // Observability, Monitoring & Alerting "7563656927482532809": "Enterprise Advanced", // Authentication & Authorization "7563656912641262557": "Enterprise Advanced", // APIs & Programmatic Integration "7561821069115300422": "Security, IAM, and Compliance", // Account Protection "7561821086979307850": "Security, IAM, and Compliance", // Atlas (Control Plane and Data Plane RBAC) "7561821101642179779": "Security, IAM, and Compliance", // Audits "7561821115093143802": "Security, IAM, and Compliance", // Compliance "7561821128227015051": "Security, IAM, and Compliance", // Encryption "7561826614754940251": "Security, IAM, and Compliance", // Enterprise Advanced Security "7561821145705272162": "Security, IAM, and Compliance", // IAM }; // Main categories whose collapsible filter labels we want to strip prefixes from const TARGET_CATEGORY_IDS = [ "category-7517315736888480011", // Atlas main category "category-7548141974152346057" // Enterprise Advanced main category ]; // Prefixes to strip from sidebar filters const PREFIXES_TO_STRIP = ["Atlas ", "Enterprise Advanced "]; // === Utility Functions === // Remove "Atlas" or "Enterprise Advanced" prefix from subcategory labels for portal clarity function stripPrefix(label) { if (STRIP_PREFIX_LIST.includes(label)) { return label.replace(/^(Atlas |Enterprise Advanced )/, ''); } return label; } // === 1. Cascading Category/Subcategory Dropdown === (function() { const ahaSelect = document.getElementById('ideas_idea_idea_category_ids'); if (!ahaSelect) return; // Hide the default dropdown UI ahaSelect.style.display = 'none'; // Create custom dropdown wrapper const wrapper = document.createElement('div'); wrapper.innerHTML = `

`; ahaSelect.parentNode.insertBefore(wrapper, ahaSelect.nextSibling); const topDropdown = wrapper.querySelector('#top-level-dropdown'); const subDropdown = wrapper.querySelector('#sub-level-dropdown'); const subContainer = wrapper.querySelector('#sub-container'); // Parse original options into tree const options = [...ahaSelect.options].filter(o => o.value); const tree = []; let currentTop = null; options.forEach(opt => { const text = opt.text.trim(); if (/^\s/.test(opt.text)) { // Subcategory — always include if (currentTop) currentTop.subs.push({ value: opt.value, label: text }); } else { // Top-level category — only include if not in exclude list if (EXCLUDE_CATEGORY_LABELS.includes(text)) return; currentTop = { value: opt.value, label: text, subs: [] }; tree.push(currentTop); } }); // Populate top-level dropdown topDropdown.innerHTML = ``; tree.forEach(top => { const opt = document.createElement('option'); opt.value = top.value; opt.textContent = top.label; topDropdown.appendChild(opt); }); // Handle top-level selection topDropdown.addEventListener('change', () => { const selected = tree.find(t => t.value === topDropdown.value); if (selected) { ahaSelect.value = selected.value; if (selected.subs.length > 0) { subContainer.style.display = 'block'; subDropdown.innerHTML = ``; selected.subs.forEach(sub => { if (EXCLUDE_CATEGORY_LABELS.includes(sub.label)) return; const opt = document.createElement('option'); opt.value = sub.value; opt.textContent = stripPrefix(sub.label); subDropdown.appendChild(opt); }); } else { subContainer.style.display = 'none'; } } else { subContainer.style.display = 'none'; ahaSelect.value = ""; } }); // Handle subcategory selection subDropdown.addEventListener('change', () => { ahaSelect.value = subDropdown.value || topDropdown.value; }); })(); // === 2. Prepend Parent Category to Subcategory Links & Strip Prefixes === document.querySelectorAll('.idea-sidebar__attribute-link').forEach(el => { const href = el.getAttribute('href'); if (!href) return; const urlParams = new URLSearchParams(href.split('?')[1]); const categoryId = urlParams.get('category'); const parentName = PARENT_MAP[categoryId]; if (!parentName) return; if (EXCLUDE_CATEGORY_LABELS.includes(el.textContent.trim())) return; let displayText = el.textContent; if (STRIP_PREFIX_LIST.includes(displayText)) { displayText = displayText.replace(/^(Atlas |Enterprise Advanced )/, ''); } el.textContent = `${parentName} - ${displayText}`; }); // === 3. Strip Prefixes in Sidebar Collapsible Filter === TARGET_CATEGORY_IDS.forEach(id => { const parentLi = document.getElementById(id); if (!parentLi) return; parentLi.querySelectorAll("ul > li .category-filter-name > span").forEach(span => { PREFIXES_TO_STRIP.forEach(prefix => { if (span.textContent.trim().startsWith(prefix)) { span.textContent = span.textContent.replace(prefix, ""); } }); }); }); // === 4. Popup Button Logic === (function() { const openBtn = document.getElementById('open-popup'); if (!openBtn) return; const overlay = document.createElement('div'); overlay.className = 'popup-overlay'; overlay.innerHTML = ` `; document.body.appendChild(overlay); const closeBtn = overlay.querySelector('.popup-close'); openBtn.addEventListener('click', () => { overlay.style.display = 'flex'; }); closeBtn.addEventListener('click', () => { overlay.style.display = 'none'; }); overlay.addEventListener('click', e => { if (e.target === overlay) overlay.style.display = 'none'; }); })(); // === 5. Hide "Product Deprecated (Will Not Appear on Portal)" Category in Side Panel Filter === (function() { const deprecatedCategory = document.getElementById('category-7562740229778885531'); if (deprecatedCategory) { deprecatedCategory.style.display = 'none'; } })();

Welcome to MongoByte! 🚀

Please enter your email address

RELATED FEEDBACK

Provide a Vue 3 implementation example of an embedded chart