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

package/dist/mdas-sdk.esm.js

@@ -406,6 +406,85 @@ class BaseWidget {
       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
@@ -2504,28 +2583,6 @@ const TimeSalesStyles = `
     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;
 }
 
 /* ========================================
@@ -4477,99 +4534,46 @@ class MarketDataWidget extends BaseWidget {
     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;
@@ -4655,126 +4659,6 @@ class MarketDataWidget extends BaseWidget {
       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 {
@@ -5279,7 +5163,20 @@ class NightSessionWidget extends BaseWidget {
     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(() => {
@@ -5296,38 +5193,6 @@ class NightSessionWidget extends BaseWidget {
 
     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') {
@@ -5347,6 +5212,7 @@ class NightSessionWidget extends BaseWidget {
   }
   handleData(message) {
     console.log('DEBUG NIGHT', message);
+
     //message = message.data || message.Data
 
     if (this.loadingTimeout) {
@@ -5354,64 +5220,41 @@ class NightSessionWidget extends BaseWidget {
       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);
@@ -6312,36 +6155,20 @@ class OptionsWidget extends BaseWidget {
     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
@@ -38698,7 +38525,20 @@ class IntradayChartWidget extends BaseWidget {
   }
   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();
@@ -38706,38 +38546,6 @@ class IntradayChartWidget extends BaseWidget {
     // 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) {
@@ -39161,19 +38969,12 @@ class IntradayChartWidget extends BaseWidget {
     // 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');
@@ -40276,7 +40077,19 @@ class ONBBOLevel2Widget extends BaseWidget {
     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(() => {
@@ -40288,36 +40101,6 @@ class ONBBOLevel2Widget extends BaseWidget {
     }, 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
@@ -40836,6 +40619,7 @@ class TimeSalesWidget extends BaseWidget {
     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;
@@ -40847,6 +40631,7 @@ class TimeSalesWidget extends BaseWidget {
 
     // Create widget structure
     this.createWidgetStructure();
+    this.initializeSymbolEditor();
 
     // Initialize the widget
     this.initialize();
@@ -40863,7 +40648,26 @@ class TimeSalesWidget extends BaseWidget {
       }
     }
     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
@@ -40886,6 +40690,8 @@ class TimeSalesWidget extends BaseWidget {
       // 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;
@@ -40988,7 +40794,19 @@ class TimeSalesWidget extends BaseWidget {
     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(() => {
@@ -41001,36 +40819,6 @@ class TimeSalesWidget extends BaseWidget {
 
     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'],
@@ -41046,6 +40834,9 @@ class TimeSalesWidget extends BaseWidget {
       clearTimeout(this.loadingTimeout);
       this.loadingTimeout = null;
     }
+    if (message.type != 'queryonbbotimesale') {
+      return;
+    }
 
     // Handle error messages
     if (message.type === 'error') {
@@ -41058,30 +40849,16 @@ class TimeSalesWidget extends BaseWidget {
     }
 
     // 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);
     }
@@ -41308,7 +41085,15 @@ class ApiService {
     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) {
@@ -42068,8 +41853,8 @@ class WebSocketManager {
    */
   _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
@@ -42109,54 +41894,16 @@ class WebSocketManager {
       }
     }
 
-    // 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);
@@ -42255,22 +42002,28 @@ class WebSocketManager {
   _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);
     }
   }
 
@@ -42314,12 +42067,11 @@ class WebSocketManager {
       }
     }
   }
-  _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,
@@ -42479,25 +42231,15 @@ class WebSocketManager {
     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