mdas-jsview-sdk 1.0.21-uat.0 → 1.0.23-uat.0

package/dist/mdas-sdk.js

@@ -412,6 +412,85 @@
           console.log(`[${this.constructor.name}] Connection failed after ${status.maxAttempts} attempts`);
         }
       }
+
+      /**
+       * Validate initial symbol with the API and handle access/permission errors
+       * This is a reusable method for all widgets that need to validate symbols on initialization
+       *
+       * @param {string} apiMethod - The API method name to call (e.g., 'quotel1', 'quoteOptionl1')
+       * @param {string} symbol - The symbol to validate
+       * @param {Function} onSuccess - Callback when validation succeeds with data, receives (data, result)
+       * @returns {boolean} - Returns false if access denied (stops initialization), true otherwise
+       */
+      async validateInitialSymbol(apiMethod, symbol) {
+        let onSuccess = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+        try {
+          const apiService = this.wsManager?.getApiService();
+          if (!apiService) {
+            if (this.debug) {
+              console.log(`[${this.constructor.name}] API service not available for initial validation`);
+            }
+            return true; // Continue without validation
+          }
+          if (!apiService[apiMethod]) {
+            console.error(`[${this.constructor.name}] API method ${apiMethod} does not exist`);
+            return true; // Continue without validation
+          }
+          const result = await apiService[apiMethod](symbol);
+          if (result && result.data && result.data.length > 0) {
+            if (this.debug) {
+              console.log(`[${this.constructor.name}] Initial symbol validated:`, {
+                symbol,
+                method: apiMethod,
+                dataCount: result.data.length
+              });
+            }
+
+            // Call success callback if provided
+            if (onSuccess && typeof onSuccess === 'function') {
+              onSuccess(result.data, result);
+            }
+            return true; // Validation successful
+          }
+
+          // No data returned - might be access issue, but continue anyway
+          if (this.debug) {
+            console.log(`[${this.constructor.name}] No data returned from ${apiMethod} for ${symbol}`);
+          }
+          return true; // Continue anyway, WebSocket might still work
+        } catch (error) {
+          if (this.debug) {
+            console.warn(`[${this.constructor.name}] Initial symbol validation failed:`, error);
+          }
+
+          // Check if it's an access/permission error
+          const errorMessage = (error.message || '').toLowerCase();
+          const isAccessError = errorMessage.includes('400') ||
+          // Bad Request (often used for access issues)
+          errorMessage.includes('401') ||
+          // Unauthorized
+          errorMessage.includes('403') ||
+          // Forbidden
+          errorMessage.includes('forbidden') || errorMessage.includes('unauthorized') || errorMessage.includes('no access') || errorMessage.includes('no opra access') ||
+          // Specific OPRA access denial
+          errorMessage.includes('permission denied') || errorMessage.includes('access denied');
+          if (isAccessError) {
+            // Hide loading and show access error
+            this.hideLoading();
+
+            // Extract more specific error message if available
+            let userMessage = `Access denied: You don't have permission to view data for ${symbol}`;
+            if (errorMessage.includes('no opra access')) {
+              userMessage = `Access denied: You don't have OPRA access for option ${symbol}`;
+            }
+            this.showError(userMessage);
+            return false; // Stop initialization
+          }
+
+          // For other errors, continue with WebSocket (might still work)
+          return true;
+        }
+      }
     }
 
     // src/models/MarketDataModel.js
@@ -2510,28 +2589,6 @@
     font-size: 1.71em;
     font-weight: 700;
     color: #111827;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
-}
-
-.time-sales-widget .symbol.editable-symbol:hover {
-    opacity: 0.8;
-    transform: scale(1.02);
-}
-
-.time-sales-widget .symbol.editable-symbol:hover::after {
-    content: "✎";
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    background: #3b82f6;
-    color: white;
-    font-size: 10px;
-    padding: 2px 4px;
-    border-radius: 4px;
-    opacity: 0.8;
-    pointer-events: none;
 }
 
 /* ========================================
@@ -4483,99 +4540,46 @@
         this.showLoading();
 
         // Validate initial symbol via API to get company info
-        await this.validateInitialSymbol();
-        this.subscribeToData();
-      }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[MarketDataWidget] API service not available for initial validation');
-            }
-            return;
-          }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Store for use in updateWidget
-            this.initialValidationData = symbolData;
-            if (this.debug) {
-              console.log('[MarketDataWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: symbolData.comp_name,
-                exchangeName: symbolData.market_name
-              });
-            }
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting data
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Store for use in updateWidget
+          if (data && data[0]) {
+            this.initialValidationData = data[0];
           }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[MarketDataWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
         }
+        this.subscribeToData();
       }
       subscribeToData() {
         // Subscribe with symbol for routing
         this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryl1'], this.handleMessage.bind(this), this.symbol // Pass symbol for routing
         );
-
-        // Send subscription message
-        /* this.wsManager.send({
-            type: 'queryl1',
-            symbol: this.symbol
-        }); */
       }
+      handleData(message) {
+        //console.log('DEBUG', message)
 
-      /* handleMessage(messageWrapper) {
-          if (this.isDestroyed) return;
-           try {
-              const { event, data } = messageWrapper;
-               if (this.debug) {
-                  console.log('[MarketDataWidget] Received:', event, data);
-              }
-               if (event === 'connection') {
-                  this.handleConnectionStatus(data);
-                  return;
-              }
-               if (event === 'data') {
-                  this.handleData(data);
-              }
-               if (event === 'session_revoked') {
-                  if (data.status === 'attempting_relogin') {
-                      this.showLoading();
-                  } else if (data.status === 'relogin_failed') {
-                      this.showError(data.error);
-                  } else if (data.status === 'relogin_successful') {
-                      this.hideLoading();
-                  }
-                  return;
-              }
-          } catch (error) {
-              console.error('[MarketDataWidget] Error handling message:', error);
-              this.showError('Error processing data');
+        // Check for error: false and display message if present
+        if (message.error === true) {
+          if (this.debug) {
+            console.log('[MarketDataWidget] Received error response:', message.message);
           }
-      } */
+          const errorMsg = message.message || message.Message;
 
-      /* handleConnectionStatus(status) {
-          if (status.status === 'connected') {
-              if (this.debug) {
-                  console.log('[MarketDataWidget] Connected to WebSocket');
-              }
-              // Re-send subscription when reconnected
-              this.wsManager.send({
-                  type: 'queryl1',
-                  symbol: this.symbol
-              });
-          } else if (status.status === 'disconnected') {
-              this.showError('Disconnected from data service');
-          } else if (status.status === 'error') {
-              this.showError(status.error || 'Connection error');
+          // If there's a message field, show it as an error
+          if (errorMsg) {
+            this.hideLoading();
+            this.showError(errorMsg);
+            return;
           }
-      } */
-
-      handleData(message) {
-        console.log('DEBUG', message);
+        } else if (message.Data && typeof message.Data === 'string') {
+          this.hideLoading();
+          this.showError(message.Message);
+          return;
+        }
         if (this.loadingTimeout) {
           clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
@@ -4661,126 +4665,6 @@
           this.showConnectionQuality(); // Show cache indicator
         }
       }
-      showNoDataState() {
-        let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        if (this.isDestroyed) return;
-        try {
-          // Hide loading overlay
-          this.hideLoading();
-
-          // Clear any existing errors
-          this.clearError();
-
-          // Update header with dimmed styling and basic info from data
-          const symbol = data.Symbol || this.symbol;
-
-          // Add null checks for all DOM elements
-          const symbolElement = this.container.querySelector('.symbol');
-          if (symbolElement) {
-            symbolElement.textContent = symbol;
-          }
-          const companyNameElement = this.container.querySelector('.company-name');
-          if (companyNameElement) {
-            companyNameElement.textContent = `${symbol} Inc`;
-          }
-
-          // Set price to $0.00 and add dimmed class
-          const currentPriceElement = this.container.querySelector('.current-price');
-          if (currentPriceElement) {
-            currentPriceElement.textContent = '$0.00';
-          }
-          const changeElement = this.container.querySelector('.price-change');
-          if (changeElement) {
-            const changeValueElement = changeElement.querySelector('.change-value');
-            const changePercentElement = changeElement.querySelector('.change-percent');
-            if (changeValueElement) {
-              changeValueElement.textContent = '+0.00';
-            }
-            if (changePercentElement) {
-              changePercentElement.textContent = ' (0.00%)';
-            }
-            changeElement.classList.remove('positive', 'negative');
-            changeElement.classList.add('neutral');
-          }
-
-          // Add dimmed styling to header
-          const widgetHeader = this.container.querySelector('.widget-header');
-          if (widgetHeader) {
-            widgetHeader.classList.add('dimmed');
-          }
-
-          // Replace the data grid with no data message
-          this.showNoDataMessage(symbol, data);
-
-          // Update footer with current timestamp
-          const lastUpdateElement = this.container.querySelector('.last-update');
-          if (lastUpdateElement) {
-            const timestamp = formatTimestampET();
-            lastUpdateElement.textContent = `Checked: ${timestamp}`;
-          }
-          const dataSourceElement = this.container.querySelector('.data-source');
-          if (dataSourceElement) {
-            dataSourceElement.textContent = 'Source: No data available';
-          }
-        } catch (error) {
-          console.error('Error showing no data state:', error);
-          this.showError('Error displaying no data state');
-        }
-      }
-      showNoDataMessage(symbol) {
-        const dataGrid = this.container.querySelector('.data-grid');
-
-        // Hide the data grid if it exists
-        if (dataGrid) {
-          dataGrid.style.display = 'none';
-        }
-
-        // Remove existing no data message if present
-        const existingNoData = this.container.querySelector('.no-data-state');
-        if (existingNoData) {
-          existingNoData.remove();
-        }
-
-        // Create no data message element - safely without XSS risk
-        const noDataElement = createElement('div', '', 'no-data-state');
-        const noDataContent = createElement('div', '', 'no-data-content');
-
-        // Create icon
-        const iconDiv = document.createElement('div');
-        iconDiv.className = 'no-data-icon';
-        iconDiv.innerHTML = `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="12" cy="12" r="10" stroke="#9ca3af" stroke-width="2"/>
-            <path d="M12 8v4" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"/>
-            <circle cx="12" cy="16" r="1" fill="#9ca3af"/>
-        </svg>`;
-        noDataContent.appendChild(iconDiv);
-
-        // Create title
-        const title = createElement('h3', 'No Market Data', 'no-data-title');
-        noDataContent.appendChild(title);
-
-        // Create description with sanitized symbol
-        const description = createElement('p', '', 'no-data-description');
-        description.appendChild(document.createTextNode('Market data for '));
-        const symbolStrong = createElement('strong', sanitizeSymbol(symbol));
-        description.appendChild(symbolStrong);
-        description.appendChild(document.createTextNode(' was not found'));
-        noDataContent.appendChild(description);
-
-        // Create guidance
-        const guidance = createElement('p', 'Please check the symbol spelling or try a different symbol', 'no-data-guidance');
-        noDataContent.appendChild(guidance);
-        noDataElement.appendChild(noDataContent);
-
-        // Insert before footer, with null check
-        const footer = this.container.querySelector('.widget-footer');
-        if (footer && footer.parentNode) {
-          footer.parentNode.insertBefore(noDataElement, footer);
-        } else {
-          // Fallback: append to container if footer not found
-          this.container.appendChild(noDataElement);
-        }
-      }
       updateWidget(data) {
         if (this.isDestroyed) return;
         try {
@@ -5285,7 +5169,20 @@
         this.showLoading();
 
         // Validate initial symbol via API to get company info
-        await this.validateInitialSymbol();
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Extract company info from first data item
+          if (data && data[0]) {
+            this.companyName = data[0].comp_name || '';
+            this.exchangeName = data[0].market_name || '';
+            this.mic = data[0].mic || '';
+          }
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
+        }
 
         // Set timeout to detect no data on initial load
         this.loadingTimeout = setTimeout(() => {
@@ -5302,38 +5199,6 @@
 
         this.subscribeToData();
       }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[NightSessionWidget] API service not available for initial validation');
-            }
-            return;
-          }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Extract company info
-            this.companyName = symbolData.comp_name || '';
-            this.exchangeName = symbolData.market_name || '';
-            this.mic = symbolData.mic || '';
-            if (this.debug) {
-              console.log('[NightSessionWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: this.companyName,
-                exchangeName: this.exchangeName,
-                mic: this.mic
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[NightSessionWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
-        }
-      }
       subscribeToData() {
         let subscriptionType;
         if (this.source === 'bruce') {
@@ -5353,6 +5218,7 @@
       }
       handleData(message) {
         console.log('DEBUG NIGHT', message);
+
         //message = message.data || message.Data
 
         if (this.loadingTimeout) {
@@ -5360,64 +5226,41 @@
           this.loadingTimeout = null;
         }
 
-        // Handle error messages from server (plain text converted to structured format)
-        if (message.type === 'error' || message.error == true) {
+        // Check for error: false and display message if present
+        if (message.error === true) {
           if (this.debug) {
-            console.log('[NightSessionWidget] Received no data message:', message.message);
+            console.log('[Nigh] Received error response:', message.message);
           }
-          // Only show no data state if we don't have cached data
-          if (!this.data) {
-            this.showNoDataState({
-              Symbol: this.symbol,
-              NotFound: true,
-              message: message.message
-            });
-          } else {
+          const errorMsg = message.message || message.Message;
+
+          // If there's a message field, show it as an error
+          if (errorMsg) {
             this.hideLoading();
-            if (this.debug) {
-              console.log('[NightSessionWidget] No new data, keeping cached data visible');
-            }
+            this.showError(errorMsg);
+            return;
           }
+        } else if (message.Data && typeof message.Data === 'string') {
+          this.hideLoading();
+          this.showError(message.Message);
           return;
         }
 
-        // Handle general error messages - CHECK IF IT'S ACCESS RELATED
+        // Handle error messages from server (plain text converted to structured format)
         if (message.type === 'error') {
-          const errorMsg = message.message || 'Server error';
-
-          // If it's an access/permission error, show as no-data state instead of separate error
-          if (errorMsg.toLowerCase().includes('access') || errorMsg.toLowerCase().includes('permission') || errorMsg.toLowerCase().includes('denied')) {
-            // Only show no data state if we don't have cached data
-            if (!this.data) {
-              this.showNoDataState({
-                Symbol: this.symbol,
-                NotFound: true,
-                isAccessError: true,
-                message: errorMsg
-              });
-            } else {
-              this.hideLoading();
-              if (this.debug) {
-                console.log('[NightSessionWidget] Access error but keeping cached data');
-              }
-            }
+          if (this.debug) {
+            console.log('[NightSessionWidget] Received no data message:', message.message);
+          }
+          // Only show no data state if we don't have cached data
+          if (!this.data) {
+            this.showError(errorMsg);
           } else {
-            // Only show error if we don't have cached data
-            if (!this.data) {
-              console.log('errorMsg', errorMsg);
-              this.showError(errorMsg);
-            } else {
-              this.hideLoading();
-              if (this.debug) {
-                console.log('[NightSessionWidget] Error received but keeping cached data:', errorMsg);
-              }
+            this.hideLoading();
+            if (this.debug) {
+              console.log('[MarketDataWidget] Error received but keeping cached data:', errorMsg);
             }
           }
           return;
         }
-
-        // Filter for night session data
-
         if (Array.isArray(message.data)) {
           // First, try to find data matching our symbol regardless of MarketName
           const symbolData = message.data.find(item => item.Symbol === this.symbol);
@@ -6318,36 +6161,20 @@
         this.showLoading();
 
         // Validate initial symbol via API to get symbol info
-        await this.validateInitialSymbol();
-        this.subscribeToData();
-      }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[OptionsWidget] API service not available for initial validation');
-            }
-            return;
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting data
+        const validationSuccess = await super.validateInitialSymbol('quoteOptionl1', this.symbol, data => {
+          // Store for use in updateWidget
+          // Note: quoteOptionl1 returns array directly, not wrapped in data field
+          if (data && data[0] && !data[0].error && !data[0].not_found) {
+            this.initialValidationData = data[0];
           }
-          const result = await apiService.quoteOptionl1(this.symbol);
-          if (result && result[0] && !result[0].error && !result[0].not_found) {
-            const symbolData = result[0];
-            // Store for use in updateWidget
-            this.initialValidationData = symbolData;
-            if (this.debug) {
-              console.log('[OptionsWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                underlying: symbolData.Underlying || symbolData.RootSymbol
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[OptionsWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
         }
+        this.subscribeToData();
       }
       subscribeToData() {
         // Subscribe with symbol for routing
@@ -38704,7 +38531,20 @@ ${SharedStyles}
       }
       async initialize() {
         // Validate initial symbol via API to get company info
-        await this.validateInitialSymbol();
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Extract company info from first data item
+          if (data && data[0]) {
+            this.companyName = data[0].comp_name || '';
+            this.exchangeName = data[0].market_name || '';
+            this.mic = data[0].mic || '';
+          }
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
+        }
 
         // Update company name in the header
         this.updateCompanyName();
@@ -38712,38 +38552,6 @@ ${SharedStyles}
         // Load chart data
         await this.loadChartData();
       }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[IntradayChartWidget] API service not available for initial validation');
-            }
-            return;
-          }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Extract company info
-            this.companyName = symbolData.comp_name || '';
-            this.exchangeName = symbolData.market_name || '';
-            this.mic = symbolData.mic || '';
-            if (this.debug) {
-              console.log('[IntradayChartWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: this.companyName,
-                exchangeName: this.exchangeName,
-                mic: this.mic
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[IntradayChartWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with chart data
-        }
-      }
       updateCompanyName() {
         const companyNameElement = this.container.querySelector('.intraday-company-name');
         if (companyNameElement) {
@@ -39167,19 +38975,12 @@ ${SharedStyles}
         // Handle array format (standard night session format)
         if (Array.isArray(message.data)) {
           console.log('[IntradayChartWidget] Processing array format, length:', message.length);
-          const symbolData = message.find(item => item.Symbol === this.symbol);
+          const symbolData = message.data.find(item => item.Symbol === this.symbol);
           console.log('[IntradayChartWidget] Found symbol data:', symbolData);
           if (symbolData && !symbolData.NotFound) {
             priceData = symbolData;
           }
         }
-        // Handle wrapped format
-        else if (message.type === 'queryblueoceanl1' || message.type === 'querybrucel1') {
-          console.log('[IntradayChartWidget] Processing wrapped format');
-          if (message['0']?.Symbol === this.symbol && !message['0'].NotFound) {
-            priceData = message['0'];
-          }
-        }
         // Handle direct data format
         else if (message.Symbol === this.symbol && !message.NotFound) {
           console.log('[IntradayChartWidget] Processing direct format');
@@ -40282,7 +40083,19 @@ ${SharedStyles}
         this.showLoading();
 
         // Fetch company info for initial symbol
-        await this.validateInitialSymbol();
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Extract company info from first data item
+          if (data && data[0]) {
+            this.companyName = data[0].comp_name || '';
+            this.exchangeName = data[0].market_name || '';
+          }
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
+        }
 
         // Set timeout to detect no data on initial load
         this.loadingTimeout = setTimeout(() => {
@@ -40294,36 +40107,6 @@ ${SharedStyles}
         }, 10000);
         this.subscribeToData();
       }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[ONBBO L2] API service not available for initial validation');
-            }
-            return;
-          }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Extract company info
-            this.companyName = symbolData.comp_name || '';
-            this.exchangeName = symbolData.market_name || '';
-            if (this.debug) {
-              console.log('[ONBBO L2] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: this.companyName,
-                exchangeName: this.exchangeName
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[ONBBO L2] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
-        }
-      }
       subscribeToData() {
         // Subscribe to ONBBO Level 2 data (order book)
         // Use separate widget IDs to avoid "already active" duplicate detection
@@ -40842,6 +40625,7 @@ ${SharedStyles}
         this.styled = options.styled !== undefined ? options.styled : true;
         this.maxTrades = options.maxTrades || 20; // Maximum number of trades to display
         this.data = new TimeSalesModel([], this.maxTrades);
+        this.data.symbol = this.symbol; // Set the symbol in the data model
         this.isDestroyed = false;
         this.unsubscribe = null;
         this.symbolEditor = null;
@@ -40853,6 +40637,7 @@ ${SharedStyles}
 
         // Create widget structure
         this.createWidgetStructure();
+        this.initializeSymbolEditor();
 
         // Initialize the widget
         this.initialize();
@@ -40869,7 +40654,26 @@ ${SharedStyles}
           }
         }
         this.addStyles();
-        this.setupSymbolEditor();
+        //this.setupSymbolEditor();
+      }
+      initializeSymbolEditor() {
+        // Initialize symbol editor with stock symbol validation
+        this.symbolEditor = new SymbolEditor(this, {
+          maxLength: 10,
+          placeholder: 'Enter symbol...',
+          //validator: this.validateStockSymbol.bind(this),
+          onSymbolChange: this.handleSymbolChange.bind(this),
+          debug: this.debug,
+          autoUppercase: true,
+          symbolType: 'quotel1'
+        });
+
+        // Set initial symbol
+        const symbolElement = this.container.querySelector('.symbol');
+        if (symbolElement) {
+          symbolElement.textContent = this.symbol;
+          symbolElement.dataset.originalSymbol = this.symbol;
+        }
       }
       addStyles() {
         // Inject styles from the styles file into document head
@@ -40892,6 +40696,8 @@ ${SharedStyles}
           // Keep editor open when clicking buttons
           symbolType: 'quotel1' // Use standard quote validation
         });
+
+        //console.log('SETUP COMPLETE')
       }
       async handleSymbolChange(newSymbol, oldSymbol) {
         let validationData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -40994,7 +40800,19 @@ ${SharedStyles}
         this.showLoading();
 
         // Validate initial symbol via API to get company info
-        await this.validateInitialSymbol();
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Extract company info from first data item
+          if (data && data[0]) {
+            this.companyName = data[0].comp_name || '';
+            this.exchangeName = data[0].market_name || '';
+          }
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
+        }
 
         // Set timeout to detect no data on initial load
         this.loadingTimeout = setTimeout(() => {
@@ -41007,36 +40825,6 @@ ${SharedStyles}
 
         this.subscribeToData();
       }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[TimeSalesWidget] API service not available for initial validation');
-            }
-            return;
-          }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Extract company info
-            this.companyName = symbolData.comp_name || '';
-            this.exchangeName = symbolData.market_name || '';
-            if (this.debug) {
-              console.log('[TimeSalesWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: this.companyName,
-                exchangeName: this.exchangeName
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[TimeSalesWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
-        }
-      }
       subscribeToData() {
         // Subscribe to Time & Sales data (using queryonbbotimesale)
         this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryonbbotimesale'],
@@ -41052,6 +40840,9 @@ ${SharedStyles}
           clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
         }
+        if (message.type != 'queryonbbotimesale') {
+          return;
+        }
 
         // Handle error messages
         if (message.type === 'error') {
@@ -41064,30 +40855,16 @@ ${SharedStyles}
         }
 
         // Handle Time & Sales data - Array of trades
-        if (Array.isArray(message)) {
+        if (Array.isArray(message.data)) {
           if (this.debug) {
             console.log('[TimeSalesWidget] Received trades array:', message);
           }
 
           // Add new trades to existing data
-          this.data.addTrades(message);
+          this.data.addTrades(message.data);
           this.updateWidget();
           return;
         }
-
-        // Handle wrapped format
-        if ((message.type === 'queryonbbotimesale' || message.type === 'querytns') && message['0']) {
-          if (Array.isArray(message['0'])) {
-            if (this.debug) {
-              console.log('[TimeSalesWidget] Received wrapped trades array:', message['0']);
-            }
-
-            // Add new trades to existing data
-            this.data.addTrades(message['0']);
-            this.updateWidget();
-            return;
-          }
-        }
         if (this.debug) {
           console.log('[TimeSalesWidget] Unexpected message format:', message);
         }
@@ -41314,7 +41091,15 @@ ${SharedStyles}
         try {
           const response = await fetch(url, config);
           if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
+            // Try to get response body for error details
+            let errorBody = '';
+            try {
+              errorBody = await response.text();
+              console.error(`[ApiService] HTTP ${response.status} - Response body:`, errorBody);
+            } catch (e) {
+              console.error(`[ApiService] Could not read error response body:`, e);
+            }
+            throw new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`);
           }
           return await response.json();
         } catch (error) {
@@ -42074,8 +41859,8 @@ ${SharedStyles}
        */
       _normalizeMessage(message) {
         // Check for error field (case-insensitive)
-        const errorField = message.error || message.Error;
-        const typeField = message.type || message.Type;
+        const errorField = message.error;
+        const typeField = message.type;
         const messageField = message.message || message.Message;
 
         // Handle explicit error messages - route based on type field
@@ -42115,54 +41900,16 @@ ${SharedStyles}
           }
         }
 
-        // Check for new format: has 'type'/'Type' AND 'data'/'Data' fields
-        const dataField = message.data || message.Data;
-        if (typeField && dataField !== undefined) {
-          if (this.config.debug) {
-            console.log(`[WebSocketManager] Detected new message format with type: ${typeField}`);
-          }
-
-          // Extract the actual data and add the type to it for routing
-          let normalizedData;
-          if (Array.isArray(dataField)) {
-            // If data is an array, process each item
-            normalizedData = dataField;
-            // Add type info to the structure for routing
-            if (normalizedData.length > 0) {
-              normalizedData._messageType = typeField;
-            }
-          } else if (typeof dataField === 'object' && dataField !== null) {
-            // If data is an object, use it directly
-            normalizedData = dataField;
-            // Add type info for routing
-            normalizedData._messageType = typeField;
-          } else {
-            // Primitive value, wrap it
-            normalizedData = {
-              value: dataField,
-              _messageType: typeField
-            };
-          }
-
-          // Only add type field if the normalized data doesn't already have one
-          if (typeof normalizedData === 'object' && !normalizedData.type && !normalizedData.Type) {
-            normalizedData.type = typeField;
-          }
-          return normalizedData;
-        }
-
         // Old format or no type/data structure, return as is
         return message;
       }
       _routeMessage(message) {
         //console.log('message', message);
 
-        if (Array.isArray(message) && message.length === 0) {
-          if (this.config.debug) {
-            console.log('[WebSocketManager] Received empty array, ignoring');
-          }
-          return; // Don't route empty arrays
-        }
+        // IMPORTANT: Don't filter out empty arrays here - route them based on message.type
+        // Widgets need to receive empty arrays to clear loading states and show "no data" messages
+        // The message structure is: { type: 'queryoptionchain', data: [] }
+        // We need to route based on the 'type' field, not the data content
 
         // Cache the message for later use by new subscribers
         this._cacheMessage(message);
@@ -42261,22 +42008,28 @@ ${SharedStyles}
       _getRelevantWidgets(message) {
         const relevantWidgets = new Set();
 
+        // OPTIMIZATION: Extract message type once from the entire message, not from each data item
+        // Message structure: { type: 'queryoptionchain', data: [] }
+        let dataField = message.Data || message.data;
+        const messageType = message.type || this._extractMessageType(dataField);
+
         // Handle array messages
-        this._addRelevantWidgetsForItem(message, relevantWidgets);
+        this._addRelevantWidgetsForItem(message, relevantWidgets, messageType);
         return relevantWidgets;
       }
-      _addRelevantWidgetsForItem(item, relevantWidgets) {
+      _addRelevantWidgetsForItem(item, relevantWidgets, messageType) {
         // If item has Data array, process it
         if (item.Data && Array.isArray(item.Data)) {
           //console.log('Data array found with length:', item.Data.length);
           item.Data.forEach(dataItem => {
-            this._processDataItem(dataItem, relevantWidgets);
+            // Pass messageType from parent message, don't extract from each data item
+            this._processDataItem(dataItem, relevantWidgets, messageType);
           });
         } else if (item && item[0] && item[0].Strike !== undefined && item[0].Expire && !item[0].underlyingSymbol) {
           this._processOptionChainData(item, relevantWidgets);
         } else {
-          // Process single item
-          this._processDataItem(item, relevantWidgets);
+          // Process single item - messageType already extracted from message
+          this._processDataItem(item, relevantWidgets, messageType);
         }
       }
 
@@ -42320,12 +42073,11 @@ ${SharedStyles}
           }
         }
       }
-      _processDataItem(dataItem, relevantWidgets) {
+      _processDataItem(dataItem, relevantWidgets, messageType) {
         // Process individual data items and route to appropriate widgets
         // Option chain arrays are handled separately by _processOptionChainData
 
         const symbol = this._extractSymbol(dataItem);
-        const messageType = this._extractMessageType(dataItem);
         if (this.config.debug) {
           console.log('[WebSocketManager] Processing data item:', {
             symbol,
@@ -42485,25 +42237,15 @@ ${SharedStyles}
         return symbolMappings[extracted] || extracted;
       }
       _extractMessageType(item) {
-        // Check for _messageType field added by normalization (from new format)
-        if (item._messageType) {
-          return item._messageType;
-        }
-
-        // Determine message type based on content
-        if (item.type) return item.type;
-
-        // Infer type from data structure
+        // FALLBACK: Infer type from data structure (for legacy/malformed messages)
 
         // IMPORTANT: Check for MMID field FIRST to distinguish ONBBO L2 from L1
         // Level 2 ONBBO data - array of MMID objects or object with MMID field
         if (Array.isArray(item) && item.length > 0 && item[0].MMID !== undefined) {
           return 'queryonbbol2';
         }
-
-        // Check for single MMID object
-        if (item.MMID !== undefined) {
-          return 'queryonbbol2';
+        if (Array.isArray(item) && item.length > 0 && item[0].Strike !== undefined) {
+          return 'queryoptionchain';
         }
 
         // Check for Source field AFTER MMID check