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

package/dist/mdas-sdk.esm.js

@@ -2857,8 +2857,36 @@ const TimeSalesStyles = `
 }
 `;
 
+/**
+ * @deprecated SharedStyles is deprecated and will be removed in a future version.
+ *
+ * Please migrate to BaseStyles + CommonWidgetPatterns:
+ *
+ * BEFORE:
+ * import { SharedStyles } from './styles/index.js';
+ * export const MyWidgetStyles = `${SharedStyles} ...widget styles...`;
+ *
+ * AFTER:
+ * import { BaseStyles } from './styles/BaseStyles.js';
+ * import { getLoadingOverlayStyles, getErrorStyles } from './styles/CommonWidgetPatterns.js';
+ * export const MyWidgetStyles = `
+ *   ${BaseStyles}
+ *   ${getLoadingOverlayStyles('my-widget')}
+ *   ${getErrorStyles('my-widget')}
+ *   ...widget-specific styles...
+ * `;
+ *
+ * Benefits of migration:
+ * - Proper CSS scoping (no global conflicts)
+ * - Reduced code duplication
+ * - Better maintainability
+ * - Smaller bundle size
+ *
+ * See STYLING_CUSTOMIZATION_GUIDE.md for details.
+ */
 const SharedStyles = `
     /* ========================================
+       ⚠️ DEPRECATED - Use BaseStyles.js instead
        FONT SIZE SYSTEM - CSS Variables
        Adjust --mdas-base-font-size to scale all fonts
        ======================================== */
@@ -6638,6 +6666,15 @@ const OptionChainTemplate = `
                     </select>
                     <button class="fetch-button" disabled>Search</button>
                 </div>
+                <div class="filter-section">
+                    <label for="strike-filter" class="filter-label">Display:</label>
+                    <select class="strike-filter" id="strike-filter">
+                        <option value="5">Near the money (±5 strikes)</option>
+                        <option value="10">Near the money (±10 strikes)</option>
+                        <option value="15">Near the money (±15 strikes)</option>
+                        <option value="all">All strikes</option>
+                    </select>
+                </div>
             </div>
 
             <!-- Data Grid Section -->
@@ -6694,11 +6731,383 @@ const OptionChainTemplate = `
     </div>
 `;
 
+// src/widgets/styles/BaseStyles.js
+
+/**
+ * Base Styles - CSS Variables and Universal Utilities
+ *
+ * This file contains:
+ * 1. CSS Custom Properties (variables) for consistent theming
+ * 2. Responsive font sizing system
+ * 3. Optional utility classes
+ *
+ * Usage:
+ * import { BaseStyles } from './styles/BaseStyles';
+ * export const MyWidgetStyles = `${BaseStyles} ...widget styles...`;
+ */
+
+const BaseStyles = `
+/* ============================================
+   MDAS WIDGET CSS VARIABLES
+   ============================================ */
+
+:root {
+    /* --- FONT SIZE SYSTEM --- */
+    /* Base font size - all other sizes are relative to this */
+    --mdas-base-font-size: 14px;
+
+    /* Component-specific font sizes (em units scale with base) */
+    --mdas-small-text-size: 0.79em;      /* 11px at 14px base */
+    --mdas-medium-text-size: 0.93em;     /* 13px at 14px base */
+    --mdas-large-text-size: 1.14em;      /* 16px at 14px base */
+
+    /* Widget element sizes */
+    --mdas-company-name-size: 1.43em;    /* 20px at 14px base */
+    --mdas-symbol-size: 1.79em;          /* 25px at 14px base */
+    --mdas-price-size: 2.29em;           /* 32px at 14px base */
+    --mdas-change-size: 1.14em;          /* 16px at 14px base */
+
+    /* Data display sizes */
+    --mdas-label-size: 0.86em;           /* 12px at 14px base */
+    --mdas-value-size: 1em;              /* 14px at 14px base */
+    --mdas-footer-size: 0.79em;          /* 11px at 14px base */
+
+    /* Chart-specific sizes */
+    --mdas-chart-title-size: 1.29em;     /* 18px at 14px base */
+    --mdas-chart-label-size: 0.93em;     /* 13px at 14px base */
+    --mdas-chart-value-size: 1.43em;     /* 20px at 14px base */
+
+    /* --- COLOR PALETTE (for future theming support) --- */
+    /* Primary colors */
+    --mdas-primary-color: #3b82f6;
+    --mdas-primary-hover: #2563eb;
+
+    /* Status colors */
+    --mdas-color-positive: #059669;
+    --mdas-color-positive-bg: #d1fae5;
+    --mdas-color-negative: #dc2626;
+    --mdas-color-negative-bg: #fee2e2;
+    --mdas-color-neutral: #6b7280;
+
+    /* Background colors */
+    --mdas-bg-primary: #ffffff;
+    --mdas-bg-secondary: #f9fafb;
+    --mdas-bg-tertiary: #f3f4f6;
+
+    /* Text colors */
+    --mdas-text-primary: #111827;
+    --mdas-text-secondary: #6b7280;
+    --mdas-text-tertiary: #9ca3af;
+
+    /* Border colors */
+    --mdas-border-primary: #e5e7eb;
+    --mdas-border-secondary: #d1d5db;
+
+    /* --- SPACING SYSTEM --- */
+    --mdas-spacing-xs: 4px;
+    --mdas-spacing-sm: 8px;
+    --mdas-spacing-md: 16px;
+    --mdas-spacing-lg: 24px;
+    --mdas-spacing-xl: 32px;
+
+    /* --- EFFECTS --- */
+    --mdas-border-radius: 8px;
+    --mdas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --mdas-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --mdas-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+
+    /* --- Z-INDEX LAYERS --- */
+    --mdas-z-base: 1;
+    --mdas-z-sticky: 10;
+    --mdas-z-overlay: 100;
+    --mdas-z-modal: 10000;
+}
+
+/* ============================================
+   RESPONSIVE FONT SCALING
+   ============================================ */
+
+/* Tablet breakpoint - slightly smaller fonts */
+@media (max-width: 768px) {
+    :root {
+        --mdas-base-font-size: 13px;
+    }
+}
+
+/* Mobile breakpoint - smaller fonts for small screens */
+@media (max-width: 480px) {
+    :root {
+        --mdas-base-font-size: 12px;
+    }
+}
+
+/* ============================================
+   OPTIONAL UTILITY CLASSES
+   Use these classes for consistent styling
+   ============================================ */
+
+/* Widget card styling - apply to widget root element */
+.mdas-card {
+    background: var(--mdas-bg-primary);
+    border-radius: var(--mdas-border-radius);
+    padding: var(--mdas-spacing-lg);
+    box-shadow: var(--mdas-shadow-md);
+    border: 1px solid var(--mdas-border-primary);
+}
+
+/* Responsive container */
+.mdas-container {
+    width: 100%;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+/* Text utilities */
+.mdas-text-primary {
+    color: var(--mdas-text-primary);
+}
+
+.mdas-text-secondary {
+    color: var(--mdas-text-secondary);
+}
+
+.mdas-text-muted {
+    color: var(--mdas-text-tertiary);
+}
+
+/* Status colors */
+.mdas-positive {
+    color: var(--mdas-color-positive);
+}
+
+.mdas-negative {
+    color: var(--mdas-color-negative);
+}
+
+.mdas-neutral {
+    color: var(--mdas-color-neutral);
+}
+`;
+
+// src/widgets/styles/CommonWidgetPatterns.js
+
+/**
+ * Common Widget Patterns - Reusable Style Functions
+ *
+ * These functions generate properly scoped CSS for common widget patterns.
+ * Each function takes a widget class name and returns scoped CSS.
+ *
+ * Benefits:
+ * - Eliminates code duplication
+ * - Ensures proper scoping (no global conflicts)
+ * - Consistent styling across widgets
+ * - Easy to maintain and update
+ *
+ * Usage:
+ * import { getLoadingOverlayStyles } from './CommonWidgetPatterns';
+ * const styles = `${getLoadingOverlayStyles('my-widget')} ...other styles...`;
+ */
+
+/**
+ * Generate loading overlay styles for a widget
+ * @param {string} widgetClass - Widget class name (e.g., 'option-chain-widget')
+ * @returns {string} Scoped CSS for loading overlay
+ */
+const getLoadingOverlayStyles = widgetClass => `
+/* Loading Overlay for ${widgetClass} */
+.${widgetClass} .widget-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(2px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--mdas-z-overlay, 100);
+    border-radius: var(--mdas-border-radius, 12px);
+}
+
+.${widgetClass} .widget-loading-overlay.hidden {
+    display: none;
+}
+
+.${widgetClass} .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.${widgetClass} .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--mdas-border-primary, #e5e7eb);
+    border-top-color: var(--mdas-primary-color, #3b82f6);
+    border-radius: 50%;
+    animation: ${widgetClass}-spin 1s linear infinite;
+}
+
+.${widgetClass} .loading-text {
+    color: var(--mdas-text-secondary, #6b7280);
+    font-size: var(--mdas-medium-text-size, 0.93em);
+    font-weight: 500;
+}
+
+@keyframes ${widgetClass}-spin {
+    to { transform: rotate(360deg); }
+}
+`;
+
+/**
+ * Generate widget error display styles
+ * @param {string} widgetClass - Widget class name
+ * @returns {string} Scoped CSS for error display
+ */
+const getErrorStyles = widgetClass => `
+/* Error Display for ${widgetClass} */
+.${widgetClass} .widget-error {
+    padding: 16px 20px;
+    background: var(--mdas-color-negative-bg, #fee2e2);
+    border: 1px solid #fecaca;
+    border-radius: var(--mdas-border-radius, 8px);
+    color: var(--mdas-color-negative, #dc2626);
+    font-size: var(--mdas-medium-text-size, 0.93em);
+    margin: 16px;
+    text-align: center;
+}
+
+.${widgetClass} .widget-error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 24px;
+}
+`;
+
+/**
+ * Generate widget footer styles
+ * @param {string} widgetClass - Widget class name
+ * @returns {string} Scoped CSS for widget footer
+ */
+const getFooterStyles = widgetClass => `
+/* Footer for ${widgetClass} */
+.${widgetClass} .widget-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 16px;
+    background: var(--mdas-bg-secondary, #f9fafb);
+    border-top: 1px solid var(--mdas-border-primary, #e5e7eb);
+    font-size: var(--mdas-footer-size, 0.79em);
+    color: var(--mdas-text-secondary, #6b7280);
+}
+
+.${widgetClass} .widget-footer .last-update {
+    color: var(--mdas-text-tertiary, #9ca3af);
+}
+
+.${widgetClass} .widget-footer .data-source {
+    color: var(--mdas-text-secondary, #6b7280);
+    font-weight: 500;
+}
+`;
+
+/**
+ * Generate no-data state styles
+ * @param {string} widgetClass - Widget class name
+ * @returns {string} Scoped CSS for no-data state
+ */
+const getNoDataStyles = widgetClass => `
+/* No Data State for ${widgetClass} */
+.${widgetClass} .no-data-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--mdas-text-secondary, #6b7280);
+}
+
+.${widgetClass} .no-data-content {
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.${widgetClass} .no-data-icon {
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.5;
+}
+
+.${widgetClass} .no-data-icon svg {
+    width: 100%;
+    height: 100%;
+}
+
+.${widgetClass} .no-data-title {
+    font-size: var(--mdas-large-text-size, 1.14em);
+    font-weight: 600;
+    color: var(--mdas-text-primary, #111827);
+    margin: 0;
+}
+
+.${widgetClass} .no-data-description {
+    font-size: var(--mdas-medium-text-size, 0.93em);
+    color: var(--mdas-text-secondary, #6b7280);
+    margin: 0;
+    line-height: 1.5;
+}
+
+.${widgetClass} .no-data-description strong {
+    color: var(--mdas-text-primary, #111827);
+    font-weight: 600;
+}
+
+.${widgetClass} .no-data-guidance {
+    font-size: var(--mdas-small-text-size, 0.79em);
+    color: var(--mdas-text-tertiary, #9ca3af);
+    margin: 0;
+}
+
+/* Error variant of no-data state */
+.${widgetClass} .no-data-state.error-access {
+    color: var(--mdas-color-negative, #dc2626);
+}
+
+.${widgetClass} .no-data-state.error-access .no-data-title {
+    color: var(--mdas-color-negative, #dc2626);
+}
+
+.${widgetClass} .no-data-state.error-access .no-data-icon {
+    opacity: 0.8;
+}
+
+.${widgetClass} .no-data-state.error-access .no-data-icon svg circle[fill] {
+    fill: var(--mdas-color-negative, #dc2626);
+}
+`;
+
 // src/widgets/styles/OptionChainStyles.js
 const OptionChainStyles = `
-${SharedStyles}
+${BaseStyles}
+${getLoadingOverlayStyles('option-chain-widget')}
+${getErrorStyles('option-chain-widget')}
+${getFooterStyles('option-chain-widget')}
+${getNoDataStyles('option-chain-widget')}
 
-/* Base styles remain the same until responsive section */
+/* Option Chain Widget Specific Styles */
 .option-chain-widget {
     border: 1px solid #e5e7eb;
     border-radius: 8px;
@@ -6723,8 +7132,22 @@ ${SharedStyles}
     flex-wrap: wrap;
 }
 
+.option-chain-widget .filter-section {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-top: 8px;
+}
+
+.option-chain-widget .filter-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #374151;
+}
+
 .option-chain-widget .symbol-input,
-.option-chain-widget .date-select {
+.option-chain-widget .date-select,
+.option-chain-widget .strike-filter {
     padding: 8px 12px;
     border: 1px solid #d1d5db;
     border-radius: 4px;
@@ -6745,6 +7168,12 @@ ${SharedStyles}
     background: white;
 }
 
+.option-chain-widget .strike-filter {
+    min-width: 200px;
+    background: white;
+    cursor: pointer;
+}
+
 .option-chain-widget .fetch-button {
     padding: 8px 16px;
     background: #3b82f6;
@@ -6900,10 +7329,22 @@ ${SharedStyles}
     min-height: 32px;
 }
 
+/* In-the-money highlighting */
+.option-chain-widget .calls-data.in-the-money span,
+.option-chain-widget .puts-data.in-the-money span {
+    background-color: #fffbeb;
+}
+
 .option-chain-widget .option-row:hover {
     background: #f9fafb;
 }
-    .option-chain-widget .option-row:hover .calls-data span,
+
+.option-chain-widget .option-row:hover .calls-data.in-the-money span,
+.option-chain-widget .option-row:hover .puts-data.in-the-money span {
+    background-color: #fef3c7;
+}
+
+.option-chain-widget .option-row:hover .calls-data span,
 .option-chain-widget .option-row:hover .puts-data span,
 .option-chain-widget .option-row:hover .strike-data {
     background: #f9fafb;
@@ -6927,14 +7368,32 @@ ${SharedStyles}
 .option-chain-widget .puts-data span {
     padding: 6px 4px;
     text-align: center;
-    font-size: 12px; /* Changed from 12px to 14px */
-    font-weight: 400; /* Added to match data values in other widgets */
-    color: #111827; /* Changed from #374151 to match other widgets */
+    font-size: 12px;
+    font-weight: 400;
+    color: #111827;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+/* Override color for change values with positive/negative classes */
+.option-chain-widget .calls-data span.positive,
+.option-chain-widget .puts-data span.positive {
+    color: #059669 !important;
+    font-weight: 500;
+}
+
+.option-chain-widget .calls-data span.negative,
+.option-chain-widget .puts-data span.negative {
+    color: #dc2626 !important;
+    font-weight: 500;
+}
+
+.option-chain-widget .calls-data span.neutral,
+.option-chain-widget .puts-data span.neutral {
+    color: #6b7280 !important;
+}
+
 .option-chain-widget .contract-cell {
     font-size: 10px;
     color: #6b7280;
@@ -6946,78 +7405,42 @@ ${SharedStyles}
     white-space: nowrap;
 }
 
-.option-chain-widget .positive {
-    color: #059669;
-}
-
-.option-chain-widget .negative {
-    color: #dc2626;
-}
-
-.option-chain-widget .neutral {
-    color: #6b7280;
-}
-
-.option-chain-widget .widget-footer {
-    background: #f9fafb;
-    padding: 8px 16px;
-    border-top: 1px solid #e5e7eb;
-    text-align: center;
-    font-size: 11px;
-    color: #6b7280;
+.option-chain-widget .contract-cell.clickable {
+    color: #3b82f6;
+    cursor: pointer;
+    text-decoration: underline;
+    transition: all 0.2s ease;
 }
 
-.option-chain-widget .widget-loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.9);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 20;
+.option-chain-widget .contract-cell.clickable:hover {
+    color: #2563eb;
+    background-color: #eff6ff;
 }
 
-.option-chain-widget .widget-loading-overlay.hidden {
-    display: none;
+.option-chain-widget .contract-cell.clickable:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+    border-radius: 2px;
 }
 
-.option-chain-widget .loading-content {
-    text-align: center;
+.option-chain-widget .contract-cell.clickable:active {
+    color: #1e40af;
+    background-color: #dbeafe;
 }
 
-.option-chain-widget .loading-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid #e5e7eb;
-    border-top: 3px solid #3b82f6;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin: 0 auto 12px;
+.option-chain-widget .positive {
+    color: #059669;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+.option-chain-widget .negative {
+    color: #dc2626;
 }
 
-.option-chain-widget .no-data-state {
-    padding: 40px;
-    text-align: center;
+.option-chain-widget .neutral {
     color: #6b7280;
 }
 
-.option-chain-widget .widget-error {
-    padding: 20px;
-    background: #fef2f2;
-    color: #dc2626;
-    border: 1px solid #fecaca;
-    margin: 16px;
-    border-radius: 4px;
-    text-align: center;
-}
+/* Loading, Error, Footer, and No-Data styles provided by CommonWidgetPatterns */
 
 /* RESPONSIVE STYLES */
 
@@ -7028,13 +7451,19 @@ ${SharedStyles}
         align-items: stretch;
         gap: 8px;
     }
-    
+
+    .option-chain-widget .filter-section {
+        flex-direction: row;
+        margin-top: 0;
+    }
+
     .option-chain-widget .symbol-input,
-    .option-chain-widget .date-select {
+    .option-chain-widget .date-select,
+    .option-chain-widget .strike-filter {
         width: 100%;
         max-width: none;
     }
-    
+
     .option-chain-widget .fetch-button {
         width: 100%;
     }
@@ -7190,6 +7619,121 @@ ${SharedStyles}
         padding: 2px 1px;
     }
 }
+
+/* Modal Styles */
+.option-chain-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    padding: 20px;
+    animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.option-chain-modal {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    max-width: 800px;
+    width: 100%;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.option-chain-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.option-chain-modal-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #111827;
+}
+
+.option-chain-modal-close {
+    background: none;
+    border: none;
+    font-size: 28px;
+    line-height: 1;
+    color: #6b7280;
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.option-chain-modal-close:hover {
+    background: #f3f4f6;
+    color: #111827;
+}
+
+.option-chain-modal-close:active {
+    background: #e5e7eb;
+}
+
+.option-chain-modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+}
+
+/* Responsive modal */
+@media (max-width: 768px) {
+    .option-chain-modal {
+        max-width: 95%;
+        max-height: 95vh;
+    }
+
+    .option-chain-modal-header {
+        padding: 16px;
+    }
+
+    .option-chain-modal-header h3 {
+        font-size: 16px;
+    }
+
+    .option-chain-modal-body {
+        padding: 16px;
+    }
+}
 `;
 
 class OptionChainWidget extends BaseWidget {
@@ -7204,7 +7748,18 @@ class OptionChainWidget extends BaseWidget {
     this.data = null;
     this.isDestroyed = false;
     this.unsubscribe = null;
+    this.unsubscribeUnderlying = null; // For underlying stock price
+    this.underlyingPrice = null; // Current price of underlying stock
     this.loadingTimeout = null;
+    this.renderDebounceTimeout = null; // For debouncing re-renders
+
+    // Separate cache for option chain data and underlying price
+    this.cachedOptionChainData = null;
+    this.cachedUnderlyingPrice = null;
+
+    // Modal for Options widget
+    this.optionsModal = null;
+    this.optionsWidgetInstance = null;
 
     // INPUT VALIDATION: Validate initial symbol if provided
     if (options.symbol) {
@@ -7220,6 +7775,7 @@ class OptionChainWidget extends BaseWidget {
     }
     this.date = '';
     this.availableDates = {};
+    this.strikeFilterRange = 5; // Default: show ±10 strikes from ATM
 
     // RATE LIMITING: Create rate limiter for fetch button (1 second between fetches)
     this.fetchRateLimiter = createRateLimitValidator(1000);
@@ -7250,6 +7806,7 @@ class OptionChainWidget extends BaseWidget {
     this.dateSelect = this.container.querySelector('.date-select');
     this.fetchButton = this.container.querySelector('.fetch-button');
     this.dataGrid = this.container.querySelector('.option-chain-data-grid');
+    this.strikeFilterSelect = this.container.querySelector('.strike-filter');
 
     // Set initial symbol value if provided in options
     if (this.symbol) {
@@ -7324,6 +7881,22 @@ class OptionChainWidget extends BaseWidget {
       }
       this.loadAvailableDates(symbolValidation.sanitized);
     });
+
+    // MEMORY LEAK FIX: Use BaseWidget's addEventListener
+    // Strike filter dropdown
+    this.addEventListener(this.strikeFilterSelect, 'change', e => {
+      const value = e.target.value;
+      if (value === 'all') {
+        this.strikeFilterRange = 'all';
+      } else {
+        this.strikeFilterRange = parseInt(value, 10);
+      }
+
+      // Re-render with new filter if we have data
+      if (this.data) {
+        this.displayOptionChain(this.data);
+      }
+    });
   }
   async loadAvailableDates(symbol) {
     if (!symbol) return;
@@ -7339,7 +7912,9 @@ class OptionChainWidget extends BaseWidget {
       // Use API service from wsManager
       const apiService = this.wsManager.getApiService();
       const data = await apiService.getOptionChainDates(symbol);
-      console.log("Available dates:", data.dates_dictionary);
+      if (this.debug) {
+        console.log('[OptionChainWidget] Available dates:', data.dates_dictionary);
+      }
       this.availableDates = data.dates_dictionary || {};
       this.populateDateOptions();
 
@@ -7433,11 +8008,15 @@ class OptionChainWidget extends BaseWidget {
         this.showError(`No data received for ${this.symbol} on ${this.date}. Please try again.`);
       }, 10000); // 10 second timeout
 
-      // Unsubscribe from previous subscription if exists
+      // Unsubscribe from previous subscriptions if they exist
       if (this.unsubscribe) {
         this.unsubscribe();
         this.unsubscribe = null;
       }
+      if (this.unsubscribeUnderlying) {
+        this.unsubscribeUnderlying();
+        this.unsubscribeUnderlying = null;
+      }
 
       // Subscribe to option chain data
       this.subscribeToData();
@@ -7447,25 +8026,62 @@ class OptionChainWidget extends BaseWidget {
     }
   }
   subscribeToData() {
-    // Subscribe with symbol and date for routing
-    this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryoptionchain'], this.handleMessage.bind(this), this.symbol,
-    // Pass symbol as string
-    {
+    // Subscribe to option chain data
+    this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryoptionchain'], this.handleMessage.bind(this), this.symbol, {
       date: this.date
-    } // Pass date as additional parameter
-    );
+    });
 
-    // Send subscription message with both symbol and date
-    /* this.wsManager.send({
-        type: 'queryoptionchain',
-        underlying: this.symbol,
-        date: this.date
-    }); */
+    // Subscribe to underlying stock price for ITM highlighting
+    this.unsubscribeUnderlying = this.wsManager.subscribe(`${this.widgetId}-underlying`, ['queryl1'], this.handleMessage.bind(this), this.symbol);
+  }
+
+  /**
+   * Find the nearest strike price to the underlying price (ATM strike)
+   * @param {Array} sortedStrikes - Array of strike prices sorted ascending
+   * @param {Number} underlyingPrice - Current price of underlying stock
+   * @returns {String} - The nearest strike price
+   */
+  findNearestStrike(sortedStrikes, underlyingPrice) {
+    if (!sortedStrikes || sortedStrikes.length === 0 || !underlyingPrice) {
+      return null;
+    }
+
+    // Find strike closest to underlying price
+    let nearestStrike = sortedStrikes[0];
+    let minDifference = Math.abs(parseFloat(sortedStrikes[0]) - underlyingPrice);
+    for (const strike of sortedStrikes) {
+      const difference = Math.abs(parseFloat(strike) - underlyingPrice);
+      if (difference < minDifference) {
+        minDifference = difference;
+        nearestStrike = strike;
+      }
+    }
+    return nearestStrike;
+  }
+
+  /**
+   * Filter strikes to show only those near the money
+   * @param {Array} sortedStrikes - Array of strike prices sorted ascending
+   * @param {String} atmStrike - The at-the-money strike price
+   * @param {Number} range - Number of strikes to show above and below ATM
+   * @returns {Array} - Filtered array of strikes
+   */
+  filterNearMoneyStrikes(sortedStrikes, atmStrike, range) {
+    if (!atmStrike || !sortedStrikes || sortedStrikes.length === 0) {
+      return sortedStrikes;
+    }
+    const atmIndex = sortedStrikes.indexOf(atmStrike);
+    if (atmIndex === -1) {
+      return sortedStrikes;
+    }
+    const startIndex = Math.max(0, atmIndex - range);
+    const endIndex = Math.min(sortedStrikes.length - 1, atmIndex + range);
+    return sortedStrikes.slice(startIndex, endIndex + 1);
   }
   handleData(message) {
-    // Clear loading timeout since we received data
+    // Clear loading timeout since we received data (use BaseWidget method)
     if (this.loadingTimeout) {
-      clearTimeout(this.loadingTimeout);
+      this.clearTimeout(this.loadingTimeout);
       this.loadingTimeout = null;
     }
 
@@ -7497,7 +8113,9 @@ class OptionChainWidget extends BaseWidget {
           }
         }
       } else {
-        this.data = message; // Store for caching
+        // Cache the option chain data
+        this.data = message;
+        this.cachedOptionChainData = message;
         this.displayOptionChain(message);
       }
     } else if (message.type === 'queryoptionchain' && Array.isArray(message.data)) {
@@ -7512,9 +8130,35 @@ class OptionChainWidget extends BaseWidget {
           }
         }
       } else {
-        this.data = message.data; // Store for caching
+        // Cache the option chain data
+        this.data = message.data;
+        this.cachedOptionChainData = message.data;
         this.displayOptionChain(message.data);
       }
+    } else if (message.type === 'queryl1' && message.Data) {
+      if (this.debug) {
+        console.log('[OptionChainWidget] Received underlying price update');
+      }
+      const data = message.Data.find(d => d.Symbol === this.symbol);
+      if (data && data.LastPx) {
+        // Cache the underlying price
+        this.underlyingPrice = parseFloat(data.LastPx);
+        this.cachedUnderlyingPrice = parseFloat(data.LastPx);
+
+        // Debounce re-render to prevent excessive updates
+        // Clear any pending render
+        if (this.renderDebounceTimeout) {
+          this.clearTimeout(this.renderDebounceTimeout);
+        }
+
+        // Schedule a debounced re-render (500ms delay)
+        this.renderDebounceTimeout = this.setTimeout(() => {
+          if (this.data) {
+            this.displayOptionChain(this.data);
+          }
+          this.renderDebounceTimeout = null;
+        }, 500);
+      }
     }
     if (message._cached) {
       this.showConnectionQuality(); // Show cache indicator
@@ -7522,6 +8166,14 @@ class OptionChainWidget extends BaseWidget {
   }
   displayOptionChain(data) {
     if (this.isDestroyed) return;
+
+    // Validate data
+    if (!data || !Array.isArray(data) || data.length === 0) {
+      if (this.debug) {
+        console.warn('[OptionChainWidget] Invalid or empty data passed to displayOptionChain');
+      }
+      return;
+    }
     try {
       // Hide loading overlay
       this.hideLoading();
@@ -7554,9 +8206,18 @@ class OptionChainWidget extends BaseWidget {
         }
       });
 
-      // Sort strikes and display
+      // Sort strikes
       const sortedStrikes = Object.keys(optionsByStrike).sort((a, b) => parseFloat(a) - parseFloat(b));
-      sortedStrikes.forEach(strike => {
+
+      // Apply ATM filter if not showing all
+      let displayStrikes = sortedStrikes;
+      if (this.strikeFilterRange !== 'all' && this.underlyingPrice) {
+        const atmStrike = this.findNearestStrike(sortedStrikes, this.underlyingPrice);
+        if (atmStrike) {
+          displayStrikes = this.filterNearMoneyStrikes(sortedStrikes, atmStrike, this.strikeFilterRange);
+        }
+      }
+      displayStrikes.forEach(strike => {
         const {
           call,
           put
@@ -7575,7 +8236,7 @@ class OptionChainWidget extends BaseWidget {
           const formatted = parseFloat(change).toFixed(2);
           const className = change > 0 ? 'positive' : change < 0 ? 'negative' : 'neutral';
           const sign = change > 0 ? '+' : '';
-          span.className = `option-chain-${className}`;
+          span.className = className;
           span.textContent = `${sign}${formatted}`;
           return span;
         };
@@ -7588,7 +8249,28 @@ class OptionChainWidget extends BaseWidget {
         // Create calls data section
         const callsData = document.createElement('div');
         callsData.className = 'calls-data';
-        callsData.appendChild(createElement('span', call ? sanitizeSymbol(call.symbol) : '--', 'contract-cell'));
+
+        // Add ITM highlighting for calls (ITM when strike < underlying price)
+        if (this.underlyingPrice && parseFloat(strike) < this.underlyingPrice) {
+          callsData.classList.add('in-the-money');
+        }
+
+        // Make contract cell clickable
+        const callContractCell = createElement('span', call ? sanitizeSymbol(call.symbol) : '--', 'contract-cell');
+        if (call && call.symbol) {
+          callContractCell.classList.add('clickable');
+          callContractCell.setAttribute('role', 'button');
+          callContractCell.setAttribute('tabindex', '0');
+          callContractCell.setAttribute('data-symbol', call.symbol);
+          this.addEventListener(callContractCell, 'click', () => this.showOptionsModal(call.symbol));
+          this.addEventListener(callContractCell, 'keypress', e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              this.showOptionsModal(call.symbol);
+            }
+          });
+        }
+        callsData.appendChild(callContractCell);
         callsData.appendChild(createElement('span', formatPrice(call?.lastPrice)));
         const callChangeSpan = document.createElement('span');
         if (call) {
@@ -7611,7 +8293,28 @@ class OptionChainWidget extends BaseWidget {
         // Create puts data section
         const putsData = document.createElement('div');
         putsData.className = 'puts-data';
-        putsData.appendChild(createElement('span', put ? sanitizeSymbol(put.symbol) : '', 'contract-cell'));
+
+        // Add ITM highlighting for puts (ITM when strike > underlying price)
+        if (this.underlyingPrice && parseFloat(strike) > this.underlyingPrice) {
+          putsData.classList.add('in-the-money');
+        }
+
+        // Make contract cell clickable
+        const putContractCell = createElement('span', put ? sanitizeSymbol(put.symbol) : '', 'contract-cell');
+        if (put && put.symbol) {
+          putContractCell.classList.add('clickable');
+          putContractCell.setAttribute('role', 'button');
+          putContractCell.setAttribute('tabindex', '0');
+          putContractCell.setAttribute('data-symbol', put.symbol);
+          this.addEventListener(putContractCell, 'click', () => this.showOptionsModal(put.symbol));
+          this.addEventListener(putContractCell, 'keypress', e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              this.showOptionsModal(put.symbol);
+            }
+          });
+        }
+        putsData.appendChild(putContractCell);
         putsData.appendChild(createElement('span', formatPrice(put?.lastPrice)));
         const putChangeSpan = document.createElement('span');
         if (put) {
@@ -7635,14 +8338,22 @@ class OptionChainWidget extends BaseWidget {
 
       // Add footer - with array length check
       if (data && data.length > 0) {
-        const timestamp = formatTimestampET(data[0].quoteTime || Date.now());
+        const isDelayed = data[0].DataSource === 'OPRA-D';
+
+        // Get timestamp - subtract 20 minutes if delayed data
+        let timestampValue = data[0].quoteTime || Date.now();
+        if (isDelayed) {
+          // Subtract 20 minutes (20 * 60 * 1000 milliseconds)
+          timestampValue = timestampValue - 20 * 60 * 1000;
+        }
+        const timestamp = formatTimestampET(timestampValue);
         const lastUpdateElement = this.container.querySelector('.last-update');
         if (lastUpdateElement) {
           lastUpdateElement.textContent = `Last update: ${timestamp}`;
         }
 
         // Update footer
-        const source = data[0].DataSource === 'OPRA-D' ? '20 mins delayed' : 'Real-time';
+        const source = isDelayed ? '20 mins delayed' : 'Real-time';
         const dataSourceElement = this.container.querySelector('.data-source');
         if (dataSourceElement) {
           dataSourceElement.textContent = `Source: ${source}`;
@@ -7665,35 +8376,6 @@ class OptionChainWidget extends BaseWidget {
       loadingOverlay.classList.add('hidden');
     }
   }
-
-  /* showInputError(message) {
-       const errorDiv = document.createElement('div');
-          errorDiv.className = 'symbol-error-message';
-          errorDiv.textContent = message;
-          errorDiv.style.cssText = `
-              color: #dc2626;
-              font-size: 12px;
-              margin-bottom: 2px;
-              position: absolute;
-              background: white;
-              z-index: 1000;
-              transform: translateY(-100%);
-              top: -4px;
-              left: 0; // Align with input box
-          `;
-      
-      // Ensure the parent is positioned
-      const parent = this.symbolInput;
-      if (parent) {
-          parent.style.position = 'relative';
-          // Insert the errorDiv as the first child of the parent
-          parent.insertBefore(errorDiv, parent.firstChild);
-      }
-      
-      this.symbolInput.errorMessage = errorDiv;
-      this.symbolInput.focus(); 
-   } */
-
   showError(message) {
     this.hideLoading();
     this.clearError();
@@ -7766,19 +8448,135 @@ class OptionChainWidget extends BaseWidget {
       this.container.appendChild(noDataElement);
     }
   }
+
+  /**
+   * Show Options widget in a modal for a specific option contract
+   * @param {string} optionSymbol - The option contract symbol
+   */
+  showOptionsModal(optionSymbol) {
+    if (!optionSymbol || optionSymbol === '--') {
+      return;
+    }
+
+    // Close existing modal if any
+    this.closeOptionsModal();
+
+    // Create modal overlay
+    this.optionsModal = document.createElement('div');
+    this.optionsModal.className = 'option-chain-modal-overlay';
+    this.optionsModal.innerHTML = `
+            <div class="option-chain-modal">
+                <div class="option-chain-modal-header">
+                    <h3>Option Details: ${sanitizeSymbol(optionSymbol)}</h3>
+                    <button class="option-chain-modal-close" aria-label="Close modal">&times;</button>
+                </div>
+                <div class="option-chain-modal-body">
+                    <div id="option-chain-modal-widget"></div>
+                </div>
+            </div>
+        `;
+
+    // Add to body
+    document.body.appendChild(this.optionsModal);
+
+    // Add close event
+    const closeBtn = this.optionsModal.querySelector('.option-chain-modal-close');
+    this.addEventListener(closeBtn, 'click', () => this.closeOptionsModal());
+
+    // Close on overlay click
+    this.addEventListener(this.optionsModal, 'click', e => {
+      if (e.target === this.optionsModal) {
+        this.closeOptionsModal();
+      }
+    });
+
+    // Close on Escape key
+    const escapeHandler = e => {
+      if (e.key === 'Escape') {
+        this.closeOptionsModal();
+      }
+    };
+    document.addEventListener('keydown', escapeHandler);
+    this._escapeHandler = escapeHandler;
+
+    // Create Options widget instance
+    try {
+      const widgetContainer = this.optionsModal.querySelector('#option-chain-modal-widget');
+      this.optionsWidgetInstance = new OptionsWidget(widgetContainer, {
+        symbol: optionSymbol,
+        wsManager: this.wsManager,
+        debug: this.debug,
+        styled: true
+      }, `${this.widgetId}-options-modal`);
+      if (this.debug) {
+        console.log('[OptionChainWidget] Options modal opened for:', optionSymbol);
+      }
+    } catch (error) {
+      console.error('[OptionChainWidget] Error creating Options widget:', error);
+      this.closeOptionsModal();
+      this.showError(`Failed to load option details: ${error.message}`);
+    }
+  }
+
+  /**
+   * Close the Options modal and cleanup
+   */
+  closeOptionsModal() {
+    // Destroy widget instance
+    if (this.optionsWidgetInstance) {
+      this.optionsWidgetInstance.destroy();
+      this.optionsWidgetInstance = null;
+    }
+
+    // Remove modal from DOM
+    if (this.optionsModal) {
+      this.optionsModal.remove();
+      this.optionsModal = null;
+    }
+
+    // Remove escape key handler
+    if (this._escapeHandler) {
+      document.removeEventListener('keydown', this._escapeHandler);
+      this._escapeHandler = null;
+    }
+    if (this.debug) {
+      console.log('[OptionChainWidget] Options modal closed');
+    }
+  }
   destroy() {
     this.isDestroyed = true;
+
+    // Close modal if open
+    this.closeOptionsModal();
     if (this.unsubscribe) {
       this.unsubscribe();
       this.unsubscribe = null;
     }
 
+    // Unsubscribe from underlying price
+    if (this.unsubscribeUnderlying) {
+      this.unsubscribeUnderlying();
+      this.unsubscribeUnderlying = null;
+    }
+
     // MEMORY LEAK FIX: Clear loading timeout using BaseWidget method
     if (this.loadingTimeout) {
       this.clearTimeout(this.loadingTimeout);
       this.loadingTimeout = null;
     }
 
+    // Clear debounce timeout
+    if (this.renderDebounceTimeout) {
+      this.clearTimeout(this.renderDebounceTimeout);
+      this.renderDebounceTimeout = null;
+    }
+
+    // Clear cached data
+    this.cachedOptionChainData = null;
+    this.cachedUnderlyingPrice = null;
+    this.underlyingPrice = null;
+    this.data = null;
+
     // Call parent destroy for automatic cleanup of event listeners, timeouts, intervals
     super.destroy();
   }
@@ -7864,80 +8662,81 @@ const DataStyles = `
         font-family: Arial, sans-serif;
     }
 
-    .widget-header {
+    .data-widget .widget-header {
         display: flex;
         flex-direction: column;
         margin-bottom: 10px;
     }
 
-    .symbol {
+    .data-widget .symbol {
         font-size: 24px;
         font-weight: bold;
         margin-right: 10px;
     }
 
-    .company-info {
+    .data-widget .company-info {
         font-size: 12px;
         color: #666;
     }
 
-    .trading-info {
+    .data-widget .trading-info {
         font-size: 12px;
         color: #999;
     }
 
-    .price-section {
+    .data-widget .price-section {
         display: flex;
         align-items: baseline;
         margin-bottom: 10px;
     }
 
-    .current-price {
+    .data-widget .current-price {
         font-size: 36px;
         font-weight: bold;
         margin-right: 10px;
     }
 
-    .price-change {
+    .data-widget .price-change {
         font-size: 18px;
     }
 
-    .price-change.positive {
+    .data-widget .price-change.positive {
         color: green;
     }
 
-    .price-change.negative {
+    .data-widget .price-change.negative {
         color: red;
     }
 
-    .bid-ask-section {
+    .data-widget .bid-ask-section {
         display: flex;
         justify-content: space-between;
         margin-bottom: 10px;
     }
 
-    .ask, .bid {
+    .data-widget .ask,
+    .data-widget .bid {
         display: flex;
         align-items: center;
     }
 
-    .label {
+    .data-widget .label {
         font-size: 14px;
         margin-right: 5px;
     }
 
-    .value {
+    .data-widget .value {
         font-size: 16px;
         font-weight: bold;
         margin-right: 5px;
     }
 
-    .size {
+    .data-widget .size {
         font-size: 14px;
         color: red;
     }
 
-    .widget-footer {
+    .data-widget .widget-footer {
         font-size: 12px;
         color: #333;
     }
@@ -8348,76 +9147,50 @@ class CombinedMarketWidget extends BaseWidget {
 
     // Subscribe to regular market data (Level 1)
     // Create a wrapper to add data type context
-    this.unsubscribeMarket = this.wsManager.subscribe(`${this.widgetId}-market`, ['queryl1'], messageWrapper => {
-      const {
-        event,
-        data
-      } = messageWrapper;
-
-      // Handle connection events
-      if (event === 'connection') {
-        this.handleConnectionStatus(data);
-        return;
-      }
-
-      // For data events, add type context and use base handleMessage pattern
-      if (event === 'data') {
-        data._dataType = 'market';
-        this.handleMessage({
-          event,
-          data
-        });
-      }
-    }, this.symbol);
+    this.unsubscribeMarket = this.wsManager.subscribe(`${this.widgetId}-market`, ['queryl1'], this.handleMessage.bind(this), this.symbol);
 
     // Subscribe to night session data (BlueOcean or Bruce)
-    this.unsubscribeNight = this.wsManager.subscribe(`${this.widgetId}-night`, ['queryblueoceanl1'], messageWrapper => {
-      const {
-        event,
-        data
-      } = messageWrapper;
-
-      // Connection already handled by market subscription
-      if (event === 'connection') {
-        return;
-      }
-
-      // For data events, add type context and use base handleMessage pattern
-      if (event === 'data') {
-        data._dataType = 'night';
-        this.handleMessage({
-          event,
-          data
-        });
-      }
-    }, this.symbol);
+    this.unsubscribeNight = this.wsManager.subscribe(`${this.widgetId}-night`, ['queryblueoceanl1'], this.handleMessage.bind(this), this.symbol);
   }
   handleData(message) {
     // Extract data type from metadata
-    const dataType = message._dataType;
+    const dataType = message.type;
     if (this.debug) {
       console.log(`[CombinedMarketWidget] handleData called with type: ${dataType}`, message);
     }
 
-    // Safety check - if no data type, try to infer from structure
-    if (!dataType) {
-      if (this.debug) {
-        console.warn('[CombinedMarketWidget] No data type specified, attempting to infer from structure');
+    // Clear loading timeout since we received data (use BaseWidget method)
+    if (this.loadingTimeout) {
+      this.clearTimeout(this.loadingTimeout);
+      this.loadingTimeout = null;
+    }
+
+    // Handle option chain data
+    if (Array.isArray(message)) {
+      if (message.length === 0) {
+        // Only show no data state if we don't have cached data
+        if (!this.data) {
+          this.showNoDataState();
+        } else {
+          this.hideLoading();
+          if (this.debug) {
+            console.log('[OptionChainWidget] No new data, keeping cached data visible');
+          }
+        }
       }
-      return;
     }
 
     // Handle error messages from server
-    if (message.type === 'error' && message.noData) {
+    if (message.type === 'error' || message.error == true) {
       if (this.debug) {
         console.log(`[CombinedMarketWidget] Received no data message for ${dataType}:`, message.message);
       }
       // Keep existing cached data visible, just hide loading
-      if (dataType === 'market' && !this.marketData) {
+      if (dataType === 'queryl1' && !this.marketData) {
         if (this.debug) {
           console.log('[CombinedMarketWidget] No market data available');
         }
-      } else if (dataType === 'night' && !this.nightSessionData) {
+      } else if (dataType === 'blueoceanl1' && !this.nightSessionData) {
         if (this.debug) {
           console.log('[CombinedMarketWidget] No night session data available');
         }
@@ -8870,7 +9643,7 @@ const IntradayChartStyles = `
         margin: 0 auto;
     }
 
-    .chart-header {
+    .intraday-chart-widget .chart-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -8879,13 +9652,13 @@ const IntradayChartStyles = `
         border-bottom: 1px solid #e5e7eb;
     }
 
-    .chart-title-section {
+    .intraday-chart-widget .chart-title-section {
         display: flex;
         flex-direction: column;
         gap: 4px;
     }
 
-    .company-market-info {
+    .intraday-chart-widget .company-market-info {
         display: flex;
         gap: 8px;
         align-items: center;
@@ -8893,18 +9666,18 @@ const IntradayChartStyles = `
         color: #6b7280;
     }
 
-    .intraday-company-name {
+    .intraday-chart-widget .intraday-company-name {
         font-weight: 500;
     }
 
-    .intraday-chart-symbol {
+    .intraday-chart-widget .intraday-chart-symbol {
         font-size: 1.5em;
         font-weight: 700;
         color: #1f2937;
         margin: 0;
     }
 
-    .intraday-chart-source {
+    .intraday-chart-widget .intraday-chart-source {
         font-size: 0.75em;
         padding: 4px 8px;
         border-radius: 4px;
@@ -8913,36 +9686,36 @@ const IntradayChartStyles = `
         font-weight: 600;
     }
 
-    .chart-change {
+    .intraday-chart-widget .chart-change {
         font-size: 1.1em;
         font-weight: 600;
         padding: 6px 12px;
         border-radius: 6px;
     }
 
-    .chart-change.positive {
+    .intraday-chart-widget .chart-change.positive {
         color: #059669;
         background: #d1fae5;
     }
 
-    .chart-change.negative {
+    .intraday-chart-widget .chart-change.negative {
         color: #dc2626;
         background: #fee2e2;
     }
 
-    .chart-controls {
+    .intraday-chart-widget .chart-controls {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 15px;
     }
 
-    .chart-range-selector {
+    .intraday-chart-widget .chart-range-selector {
         display: flex;
         gap: 8px;
     }
 
-    .range-btn {
+    .intraday-chart-widget .range-btn {
         padding: 8px 16px;
         border: 1px solid #e5e7eb;
         background: white;
@@ -8954,28 +9727,28 @@ const IntradayChartStyles = `
         transition: all 0.2s ease;
     }
 
-    .range-btn:hover {
+    .intraday-chart-widget .range-btn:hover {
         background: #f9fafb;
         border-color: #d1d5db;
     }
 
-    .range-btn.active {
+    .intraday-chart-widget .range-btn.active {
         background: #667eea;
         color: white;
         border-color: #667eea;
     }
 
-    .range-btn:focus {
+    .intraday-chart-widget .range-btn:focus {
         outline: none;
         box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
     }
 
-    .chart-type-selector {
+    .intraday-chart-widget .chart-type-selector {
         display: flex;
         gap: 8px;
     }
 
-    .type-btn {
+    .intraday-chart-widget .type-btn {
         padding: 8px 16px;
         border: 1px solid #e5e7eb;
         background: white;
@@ -8987,23 +9760,23 @@ const IntradayChartStyles = `
         transition: all 0.2s ease;
     }
 
-    .type-btn:hover {
+    .intraday-chart-widget .type-btn:hover {
         background: #f9fafb;
         border-color: #d1d5db;
     }
 
-    .type-btn.active {
+    .intraday-chart-widget .type-btn.active {
         background: #10b981;
         color: white;
         border-color: #10b981;
     }
 
-    .type-btn:focus {
+    .intraday-chart-widget .type-btn:focus {
         outline: none;
         box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
     }
 
-    .zoom-reset-btn {
+    .intraday-chart-widget .zoom-reset-btn {
         display: flex;
         align-items: center;
         gap: 6px;
@@ -9018,34 +9791,34 @@ const IntradayChartStyles = `
         transition: all 0.2s ease;
     }
 
-    .zoom-reset-btn:hover {
+    .intraday-chart-widget .zoom-reset-btn:hover {
         background: #f9fafb;
         border-color: #667eea;
         color: #667eea;
     }
 
-    .zoom-reset-btn:focus {
+    .intraday-chart-widget .zoom-reset-btn:focus {
         outline: none;
         box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
     }
 
-    .zoom-reset-btn svg {
+    .intraday-chart-widget .zoom-reset-btn svg {
         flex-shrink: 0;
     }
 
-    .chart-container {
+    .intraday-chart-widget .chart-container {
         height: 500px;
         margin-bottom: 20px;
         position: relative;
     }
 
-    .chart-stats {
+    .intraday-chart-widget .chart-stats {
         padding: 15px;
         background: #f9fafb;
         border-radius: 8px;
     }
 
-    .stats-header {
+    .intraday-chart-widget .stats-header {
         font-size: 0.875em;
         font-weight: 700;
         color: #374151;
@@ -9056,19 +9829,19 @@ const IntradayChartStyles = `
         border-bottom: 2px solid #e5e7eb;
     }
 
-    .stats-grid {
+    .intraday-chart-widget .stats-grid {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
         gap: 15px;
     }
 
-    .stat-item {
+    .intraday-chart-widget .stat-item {
         display: flex;
         flex-direction: column;
         gap: 4px;
     }
 
-    .stat-label {
+    .intraday-chart-widget .stat-label {
         font-size: 0.75em;
         color: #6b7280;
         font-weight: 600;
@@ -9076,13 +9849,13 @@ const IntradayChartStyles = `
         letter-spacing: 0.5px;
     }
 
-    .stat-value {
+    .intraday-chart-widget .stat-value {
         font-size: 1.1em;
         font-weight: 700;
         color: #1f2937;
     }
 
-    .widget-loading-overlay {
+    .intraday-chart-widget .widget-loading-overlay {
         position: absolute;
         top: 0;
         left: 0;
@@ -9101,26 +9874,26 @@ const IntradayChartStyles = `
         backdrop-filter: blur(1px);
     }
 
-    .widget-loading-overlay.hidden {
+    .intraday-chart-widget .widget-loading-overlay.hidden {
         display: none;
     }
 
-    .loading-spinner {
+    .intraday-chart-widget .loading-spinner {
         width: 20px;
         height: 20px;
         border: 3px solid #e5e7eb;
         border-top-color: #667eea;
         border-radius: 50%;
-        animation: spin 0.8s linear infinite;
+        animation: intraday-spin 0.8s linear infinite;
     }
 
-    .loading-text {
+    .intraday-chart-widget .loading-text {
         color: #6b7280;
         font-size: 0.875em;
         font-weight: 500;
     }
 
-    @keyframes spin {
+    @keyframes intraday-spin {
         to { transform: rotate(360deg); }
     }
 
@@ -9130,26 +9903,26 @@ const IntradayChartStyles = `
             padding: 15px;
         }
 
-        .stats-grid {
+        .intraday-chart-widget .stats-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 10px;
         }
 
-        .stats-header {
+        .intraday-chart-widget .stats-header {
             font-size: 0.8em;
             margin-bottom: 10px;
         }
 
-        .chart-container {
+        .intraday-chart-widget .chart-container {
             height: 350px;
         }
 
-        .intraday-chart-symbol {
+        .intraday-chart-widget .intraday-chart-symbol {
             font-size: 1.2em;
         }
     }
 
-    .widget-error {
+    .intraday-chart-widget .widget-error {
         padding: 15px;
         background: #fee2e2;
         border: 1px solid #fecaca;
@@ -42019,8 +42792,8 @@ class WebSocketManager {
         // 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 if (item.data && item.data[0] && item.data[0].Strike !== undefined && item.data[0].Expire && !item.data[0].underlyingSymbol) {
+      this._processOptionChainData(item.data, relevantWidgets);
     } else {
       // Process single item - messageType already extracted from message
       this._processDataItem(item, relevantWidgets, messageType);
@@ -42029,6 +42802,7 @@ class WebSocketManager {
 
   // Simplified option chain processing - handle entire array at once
   _processOptionChainData(optionChainArray, relevantWidgets) {
+    //console.log('PROCESSING DATA OPTIONS')
     if (!optionChainArray || optionChainArray.length === 0) return;
     // Extract underlying symbol and date from first option contract
     const firstOption = optionChainArray[0];