feat: Add stability indicators for broker integrations and tooltips for unstable portfolios (#241)

ctasada · github-actions[bot] · web-flow · commit 522cf0d5c193 · 2025-11-28T17:26:15.000+01:00
Co-authored-by: github-actions[bot] &lt;github-actions[bot]@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,8 @@ _This project follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) a
 
 ### Changed
 
+- Add stability indicators for broker integrations and tooltips for unstable portfolios
+
 ### Fixed
 
 - **Portfolio**:
diff --git a/docs/Bitvavo.md b/docs/Bitvavo.md
@@ -1,5 +1,7 @@
 # Bitvavo Integration Guide
 
+> **⚠️ Bitvavo integration is not yet stable. Features and reliability may change in future releases. Use with caution.**
+
 [Bitvavo](https://bitvavo.com/en/) is a cryptocurrency exchange supported by **Stonks Overwatch**, allowing you to track your crypto investments, portfolio value, and growth alongside your traditional investments.
 
 ## Overview
diff --git a/docs/IBKR.md b/docs/IBKR.md
@@ -1,5 +1,7 @@
 # IBKR (Interactive Brokers) Integration Guide
 
+> **⚠️ IBKR integration is not yet stable. Features and reliability may change in future releases. Use with caution.**
+
 Interactive Brokers (IBKR) is a global broker supported by **Stonks Overwatch**, providing access to international markets and securities.
 
 ## Overview
diff --git a/src/stonks_overwatch/services/models.py b/src/stonks_overwatch/services/models.py
@@ -348,28 +348,29 @@ def formatted_percentage_realized_gain(self) -> str:
 
 class PortfolioId(Enum):
     ALL = ("all", "Portfolios", "/static/stonks_overwatch.svg")
-    DEGIRO = ("degiro", "DeGiro", "/static/logos/degiro.svg")
-    BITVAVO = ("bitvavo", "Bitvavo", "/static/logos/bitvavo.svg")
-    IBKR = ("ibkr", "IBKR", "/static/logos/ibkr.svg")
+    DEGIRO = ("degiro", "DEGIRO", "/static/logos/degiro.svg")
+    BITVAVO = ("bitvavo", "Bitvavo", "/static/logos/bitvavo.svg", False)
+    IBKR = ("ibkr", "IBKR", "/static/logos/ibkr.svg", False)
 
-    def __init__(self, id: str, long_name: str, logo: str):
+    def __init__(self, id: str, long_name: str, logo: str, stable: bool = True):
         self.id = id
         self.long_name = long_name
         self.logo = logo
+        self.stable = stable
 
     @classmethod
     def values(cls) -> list["PortfolioId"]:
         return list(cls)
 
     @classmethod
-    def from_id(cls, id: str):
+    def from_id(cls, broker_id: str):
         for portfolio in cls:
-            if portfolio.id == id:
+            if portfolio.id == broker_id:
                 return portfolio
         return cls.ALL
 
     def to_dict(self):
-        return {"id": self.id, "name": self.long_name, "logo": self.logo}
+        return {"id": self.id, "name": self.long_name, "logo": self.logo, "stable": self.stable}
 
 
 @dataclass
diff --git a/src/stonks_overwatch/templates/base.html b/src/stonks_overwatch/templates/base.html
@@ -165,6 +165,11 @@
     <script src="{% static 'bootstrap-table/dist/themes/bootstrap-table/bootstrap-table.min.js' %}"></script>
 
     <script type="text/javascript">
+        // Tooltip message for unstable portfolios
+        const IN_DEVELOPMENT_MSG = 'is in development';
+        // Wrench emoji HTML for unstable portfolios (no custom class, just Bootstrap)
+        const WRENCH_HTML = '<span class="ms-2 float-end">🧪️</span>';
+
         let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
         let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
             const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
@@ -185,21 +190,55 @@
             .then(response => response.json())
             .then(data => {
                 const selectedPortfolio = document.getElementById("selectPortfolio");
-                selectedPortfolio.innerHTML = `<img src="${data.selected_portfolio.logo}" alt="${data.selected_portfolio.id}" width="25" height="25" class="rounded-circle me-2 sidebar-icon flex-shrink-0"><span class="sidebar-text">${data.selected_portfolio.name}</span>`;
+                // Always keep dropdown functionality
+                selectedPortfolio.setAttribute("data-bs-toggle", "dropdown");
+                selectedPortfolio.setAttribute("aria-expanded", "false");
+                selectedPortfolio.classList.add("dropdown-toggle");
+                selectedPortfolio.classList.remove("non-clickable");
+
+                // Consistent stability check: treat as stable unless stable is explicitly false
+                const selectedStable = data.selected_portfolio.stable !== false;
+                let selectedPortfolioHTML = `<img src="${data.selected_portfolio.logo}" alt="${data.selected_portfolio.id}" width="25" height="25" class="rounded-circle me-2 sidebar-icon flex-shrink-0"><span class="sidebar-text">${data.selected_portfolio.name}</span>`;
+                if (!selectedStable) {
+                    selectedPortfolioHTML += WRENCH_HTML;
+                    selectedPortfolio.setAttribute("title", `${data.selected_portfolio.name} ${IN_DEVELOPMENT_MSG}`);
+                    // Initialize tooltip for selectPortfolio
+                    if (!bootstrap.Tooltip.getInstance(selectedPortfolio)) {
+                        new bootstrap.Tooltip(selectedPortfolio);
+                    }
+                } else {
+                    selectedPortfolio.removeAttribute("title");
+                    const tooltipInstance = bootstrap.Tooltip.getInstance(selectedPortfolio);
+                    if (tooltipInstance) tooltipInstance.dispose();
+                }
+                selectedPortfolio.innerHTML = selectedPortfolioHTML;
 
                 const portfolioMenu = document.getElementById("sidebar-portfolio-menu");
                 portfolioMenu.innerHTML = ""; // Clear existing menu items
 
                 if (data.available_portfolios.length === 1) {
                     // Remove the dropdown toggle if there is only one portfolio
                     selectedPortfolio.removeAttribute("data-bs-toggle");
+                    selectedPortfolio.removeAttribute("aria-expanded");
                     selectedPortfolio.classList.remove("dropdown-toggle");
                     selectedPortfolio.classList.add("non-clickable");
                 } else {
                     // Show the portfolio selector dropdown only when there are multiple portfolios
                     data.available_portfolios.forEach(portfolio => {
                         const menuItem = document.createElement("li");
-                        menuItem.innerHTML = `<a class="dropdown-item portfolio-link-filter" href="#" data-value="${portfolio.id}"><img src="${portfolio.logo}" alt="${portfolio.id}" width="25" height="25" class="rounded-circle me-2">${portfolio.name}</a>`;
+                        // Consistent stability check for each portfolio
+                        const isStable = portfolio.stable !== false;
+                        const tooltipAttrs = !isStable ? ` data-bs-toggle=\"tooltip\" title=\"${portfolio.name} ${IN_DEVELOPMENT_MSG}\"` : '';
+                        const menuItemHTML = `
+                            <a class="dropdown-item portfolio-link-filter d-flex align-items-center justify-content-between" href="#" data-value="${portfolio.id}"${tooltipAttrs}>
+                                <span>
+                                    <img src="${portfolio.logo}" alt="${portfolio.id}" width="25" height="25" class="rounded-circle me-2">
+                                    ${portfolio.name}
+                                </span>
+                                ${!isStable ? WRENCH_HTML : ''}
+                            </a>
+                        `;
+                        menuItem.innerHTML = menuItemHTML;
 
                         // Add click event listener to menuItem
                         menuItem.querySelector("a").addEventListener("click", function(event) {
@@ -225,6 +264,14 @@
                     });
                 }
 
+                // Initialize tooltips for new elements
+                const newTooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+                newTooltipTriggerList.forEach(function (tooltipTriggerEl) {
+                    if (!bootstrap.Tooltip.getInstance(tooltipTriggerEl)) {
+                        new bootstrap.Tooltip(tooltipTriggerEl);
+                    }
+                });
+
                 // Restore sidebar state after portfolio data is loaded
                 restoreSidebarState();
             });
diff --git a/tests/stonks_overwatch/services/test_models.py b/tests/stonks_overwatch/services/test_models.py
@@ -27,6 +27,7 @@ def test_portfolio_ids():
         assert as_dict["id"] == portfolio_id.id
         assert as_dict["name"] == portfolio_id.long_name
         assert as_dict["logo"] == portfolio_id.logo
+        assert as_dict["stable"] == portfolio_id.stable
 
     assert PortfolioId.from_id("XXX") == PortfolioId.ALL
 
