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

package/dist/mdas-sdk.js

@@ -2863,8 +2863,36 @@
 }
 `;
 
+    /**
+     * @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
        ======================================== */
@@ -6644,6 +6672,15 @@
                     </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 -->
@@ -6700,11 +6737,383 @@
     </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;
@@ -6729,8 +7138,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;
@@ -6751,6 +7174,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;
@@ -6906,10 +7335,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;
@@ -6933,14 +7374,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;
@@ -6952,78 +7411,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 */
 
@@ -7034,13 +7457,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%;
     }
@@ -7196,6 +7625,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 {
@@ -7210,7 +7754,18 @@ ${SharedStyles}
         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) {
@@ -7226,6 +7781,7 @@ ${SharedStyles}
         }
         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);
@@ -7256,6 +7812,7 @@ ${SharedStyles}
         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) {
@@ -7330,6 +7887,22 @@ ${SharedStyles}
           }
           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;
@@ -7345,7 +7918,9 @@ ${SharedStyles}
           // 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();
 
@@ -7439,11 +8014,15 @@ ${SharedStyles}
             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();
@@ -7453,25 +8032,62 @@ ${SharedStyles}
         }
       }
       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;
         }
 
@@ -7503,7 +8119,9 @@ ${SharedStyles}
               }
             }
           } 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)) {
@@ -7518,9 +8136,35 @@ ${SharedStyles}
               }
             }
           } 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
@@ -7528,6 +8172,14 @@ ${SharedStyles}
       }
       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();
@@ -7560,9 +8212,18 @@ ${SharedStyles}
             }
           });
 
-          // 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
@@ -7581,7 +8242,7 @@ ${SharedStyles}
               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;
             };
@@ -7594,7 +8255,28 @@ ${SharedStyles}
             // 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) {
@@ -7617,7 +8299,28 @@ ${SharedStyles}
             // 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) {
@@ -7641,14 +8344,22 @@ ${SharedStyles}
 
           // 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}`;
@@ -7671,35 +8382,6 @@ ${SharedStyles}
           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();
@@ -7772,19 +8454,135 @@ ${SharedStyles}
           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();
       }
@@ -7870,80 +8668,81 @@ ${SharedStyles}
         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;
     }
@@ -8354,76 +9153,50 @@ ${SharedStyles}
 
         // 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');
             }
@@ -8876,7 +9649,7 @@ ${SharedStyles}
         margin: 0 auto;
     }
 
-    .chart-header {
+    .intraday-chart-widget .chart-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -8885,13 +9658,13 @@ ${SharedStyles}
         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;
@@ -8899,18 +9672,18 @@ ${SharedStyles}
         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;
@@ -8919,36 +9692,36 @@ ${SharedStyles}
         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;
@@ -8960,28 +9733,28 @@ ${SharedStyles}
         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;
@@ -8993,23 +9766,23 @@ ${SharedStyles}
         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;
@@ -9024,34 +9797,34 @@ ${SharedStyles}
         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;
@@ -9062,19 +9835,19 @@ ${SharedStyles}
         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;
@@ -9082,13 +9855,13 @@ ${SharedStyles}
         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;
@@ -9107,26 +9880,26 @@ ${SharedStyles}
         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); }
     }
 
@@ -9136,26 +9909,26 @@ ${SharedStyles}
             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;
@@ -42025,8 +42798,8 @@ ${SharedStyles}
             // 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);
@@ -42035,6 +42808,7 @@ ${SharedStyles}
 
       // 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];