@cdc/core 4.25.11 → 4.26.2

package/assets/icon-chart-area.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64L0 400c0 44.2 35.8 80 80 80l400 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 416c-8.8 0-16-7.2-16-16L64 64zm96 288l288 0c17.7 0 32-14.3 32-32l0-68.2c0-7.6-2.7-15-7.7-20.8l-65.8-76.8c-12.1-14.2-33.7-15-46.9-1.8l-21 21c-10 10-26.4 9.2-35.4-1.6l-39.2-47c-12.6-15.1-35.7-15.4-48.7-.6L135.9 215c-5.1 5.8-7.9 13.3-7.9 21.1l0 84c0 17.7 14.3 32 32 32z"/></svg>

package/assets/icon-chart-radar.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
+    <!-- Outer pentagon (grid) -->
+    <path d="M256 32l211.25 153.5L175 478.5H337l81.25-293L256 32zm0 0L44.75 185.5L175 478.5h162L175 478.5 44.75 185.5 256 32z" fill="none" stroke="currentColor" stroke-width="20" stroke-linejoin="round"/>
+    <!-- Middle pentagon (grid ring) -->
+    <path d="M256 112l126.75 92.1L207.5 375.3h97l48.75-171.2L256 112z" fill="none" stroke="currentColor" stroke-width="12" stroke-opacity="0.4" stroke-linejoin="round"/>
+    <path d="M256 112l-126.75 92.1L207.5 375.3h-97l-48.75-171.2L256 112z" fill="none" stroke="currentColor" stroke-width="12" stroke-opacity="0.4" stroke-linejoin="round"/>
+    <!-- Inner pentagon (grid ring) -->
+    <path d="M256 192l63.4 46L289 332.7h-66l-30-94.7L256 192z" fill="none" stroke="currentColor" stroke-width="8" stroke-opacity="0.3" stroke-linejoin="round"/>
+    <!-- Axis lines -->
+    <line x1="256" y1="256" x2="256" y2="32" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="467.25" y2="185.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="337" y2="478.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="175" y2="478.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="44.75" y2="185.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <!-- Data polygon (filled) -->
+    <polygon points="256,80 400,200 350,420 162,420 112,200" fill="currentColor" fill-opacity="0.3" stroke="currentColor" stroke-width="16" stroke-linejoin="round"/>
+    <!-- Data points -->
+    <circle cx="256" cy="80" r="12" fill="currentColor"/>
+    <circle cx="400" cy="200" r="12" fill="currentColor"/>
+    <circle cx="350" cy="420" r="12" fill="currentColor"/>
+    <circle cx="162" cy="420" r="12" fill="currentColor"/>
+    <circle cx="112" cy="200" r="12" fill="currentColor"/>
+</svg>

package/assets/icon-magnifying-glass.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 512 512" fill="currentColor">
+    <!-- Outlined/Regular style magnifying glass -->
+    <path d="M208 48a160 160 0 1 1 0 320 160 160 0 1 1 0-320zm0 368c48.8 0 93.7-16.8 129.1-44.9L471 505c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L371.1 337.1C399.2 301.7 416 256.8 416 208C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208z"/>
+</svg>
+

package/assets/icon-warming-stripes.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect x="32" y="64" width="32" height="384" fill="#000000"/>
+  <rect x="72" y="64" width="32" height="384" fill="#1a1a1a"/>
+  <rect x="112" y="64" width="32" height="384" fill="#333333"/>
+  <rect x="152" y="64" width="32" height="384" fill="#666666"/>
+  <rect x="192" y="64" width="32" height="384" fill="#999999"/>
+  <rect x="232" y="64" width="32" height="384" fill="#b3b3b3"/>
+  <rect x="272" y="64" width="32" height="384" fill="#cccccc"/>
+  <rect x="312" y="64" width="32" height="384" fill="#e6e6e6"/>
+  <rect x="352" y="64" width="32" height="384" fill="#f2f2f2"/>
+  <rect x="392" y="64" width="32" height="384" fill="#fafafa"/>
+  <rect x="432" y="64" width="32" height="384" fill="#ffffff"/>
+</svg>

package/assets/logo2.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="135 160 228 147" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0055B8;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M141.22,300.14H186h151.44c10.88,0,19.84-8.27,20.91-18.87c0.07-0.71,0.11-1.42,0.11-2.15V165.04H188.93
+		h-26.68c-7.26,0-13.65,3.68-17.43,9.27c-0.76,1.12-1.41,2.31-1.94,3.57c-1.06,2.52-1.65,5.28-1.65,8.18V300.14z"/>
+	<path class="st1" d="M162.25,160.83c-13.91,0-25.23,11.32-25.23,25.23v118.28h31.62h6.95h161.85c13.91,0,25.23-11.32,25.23-25.23
+		V160.83H162.25z M326.53,239.21c-0.2-0.23-0.56-0.25-0.78-0.05c-1.32,1.19-5.84,4.76-12.61,4.88c-8.53,0.14-17.17-6.93-17.17-19.2
+		c0-12.27,8.92-19.21,17.27-19.21c6.2,0,10.2,2.92,11.41,3.95c0.23,0.19,0.57,0.17,0.77-0.06l7.57-8.41c0.18-0.2,0.2-0.51,0.02-0.72
+		c-1.24-1.49-6.57-6.89-18.51-6.89c-1.11,0-2.25,0.06-3.41,0.17l45.61-28.63h1.76v62.45l-31.15,12.59L326.53,239.21z M243.33,242.49
+		h-6.37c-0.31,0-0.56-0.25-0.56-0.56v-34.78c0-0.31,0.25-0.56,0.56-0.56h7.31c11.28,0,18.77,5.56,18.77,17.43
+		C263.04,237.79,255.72,242.49,243.33,242.49z M240.95,194.29h-17.32c-0.31,0-0.56,0.25-0.56,0.56v59.4c0,0.08,0.02,0.15,0.04,0.22
+		l-65.24,45.68h-6.1l40.05-44.48c2.03,0.34,4.03,0.51,5.93,0.51c11.85,0,18.13-6.24,19.55-7.87c0.19-0.21,0.19-0.53,0-0.74
+		l-7.52-8.36c-0.2-0.23-0.56-0.25-0.78-0.05c-1.32,1.19-5.84,4.76-12.61,4.88c-8.53,0.14-17.17-6.93-17.17-19.2
+		c0-12.27,8.92-19.21,17.27-19.21c6.2,0,10.2,2.92,11.41,3.95c0.23,0.19,0.57,0.17,0.77-0.06l7.57-8.41c0.18-0.2,0.2-0.51,0.02-0.72
+		c-1.24-1.49-6.57-6.89-18.51-6.89c-5.92,0-12.69,1.53-18.48,5.1l12.88-33.56h76.66L240.95,194.29z M142.88,177.88
+		c0.53-1.26,1.18-2.45,1.94-3.57c3.78-5.59,10.18-9.27,17.43-9.27h26.35l-14.39,37.49c-5.11,4.98-8.62,12.23-8.62,22.3
+		c0,0.05,0,0.1,0,0.15l-24.37,63.49V186.06C141.22,183.16,141.81,180.39,142.88,177.88z M141.22,297.77l25.1-65.41
+		c2.66,12.93,12.13,19.81,21.77,22.47l-40.8,45.31h-6.07V297.77z M163.69,300.14l64.76-45.34h16.43c18.03,0,32.01-10.51,32.01-30.08
+		c0-21.2-13.14-29.7-31.38-30.37l27.92-29.3h77.01l-49.53,31.09c-9.9,4-18.58,12.87-18.58,28.7c0,14.08,6.93,22.65,15.44,27.19
+		l-119.11,48.12H163.69z M358.35,281.27c-1.08,10.6-10.03,18.87-20.91,18.87h-149.9l114.43-46.23c4.21,1.55,8.58,2.26,12.53,2.26
+		c11.85,0,18.13-6.24,19.55-7.87c0.19-0.21,0.19-0.53,0-0.74l-4.37-4.85l28.78-11.63v48.03
+		C358.46,279.84,358.43,280.56,358.35,281.27z"/>
+</g>
+
+</svg>

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -6,6 +6,7 @@ import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
 import './advanced-editor-styles.css'
 import _ from 'lodash'
 import Tooltip from '../ui/Tooltip'
+import EmbedEditor from './EmbedEditor'
 
 export const AdvancedEditor = ({
   loadConfig,
@@ -115,6 +116,9 @@ export const AdvancedEditor = ({
           </React.Fragment>
         )}
       </div>
+
+      {/* Share with Partners Section */}
+      <EmbedEditor config={config} />
     </>
   )
 }

package/components/AdvancedEditor/EmbedEditor.tsx

@@ -0,0 +1,513 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import {
+  generateEmbedCode,
+  extractFilters,
+  initializeFilterState,
+  buildFilterUrlParams,
+  type FilterMetadata,
+  type FilterState
+} from '../../helpers/embed'
+import '../../helpers/embed' // Initialize embed helper for iframe resizing
+
+type EmbedEditorProps = {
+  config?: any // Current visualization config
+}
+
+type TabId = 'preview' | 'code'
+
+/**
+ * EmbedEditor - Provides "Share with Partners" functionality
+ * Generates embed codes for iframe embedding of visualizations
+ * Now includes filter customization, preview, and embed code generation
+ */
+export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
+  const [configUrl, setConfigUrl] = useState<string | null>(null)
+  const [showEmbedModal, setShowEmbedModal] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [activeTab, setActiveTab] = useState<TabId>('preview')
+  const [embedCodeCopied, setEmbedCodeCopied] = useState(false)
+
+  // Extract filters from config
+  const filters = useMemo(() => extractFilters(config), [config])
+
+  // Initialize filter state
+  const [filterState, setFilterState] = useState<Record<string, FilterState>>({})
+
+  // Update filter state when filters change
+  useEffect(() => {
+    if (filters.length > 0) {
+      setFilterState(initializeFilterState(filters))
+    }
+  }, [filters])
+
+  // Check if all filters have setByQueryParameter
+  const filtersAreValid = useMemo(() => {
+    if (!config) return true
+
+    // Check regular filters
+    const regularFilters = config.filters || []
+    // Check dashboard shared filters
+    const sharedFilters = config.dashboard?.sharedFilters || []
+
+    const allFilters = [...regularFilters, ...sharedFilters]
+
+    // If no filters, valid
+    if (allFilters.length === 0) return true
+
+    // All filters must have setByQueryParameter
+    return allFilters.every((filter: any) => !!filter.setByQueryParameter)
+  }, [config])
+
+  // Determine if we have valid filters to show
+  const hasFilters = filters.length > 0 && filtersAreValid
+
+  // Generate embed code with current filter settings
+  const embedCode = useMemo(() => {
+    if (!configUrl) return ''
+
+    const urlParams = buildFilterUrlParams(filters, filterState)
+    return generateEmbedCode({
+      configUrl,
+      urlParams
+    })
+  }, [configUrl, filters, filterState])
+
+  // Detect configUrl from WCMS permalink or use dev fallback
+  useEffect(() => {
+    // Try to get config URL from WCMS permalink element
+    const permalinkElement = document.querySelector('#sample-permalink') as HTMLAnchorElement
+
+    if (permalinkElement?.href) {
+      try {
+        // Parse the URL and extract just the pathname (strip host)
+        const url = new URL(permalinkElement.href)
+        const pathname = url.pathname
+        setConfigUrl(pathname)
+      } catch (err) {
+        console.warn('[EmbedEditor] Failed to parse permalink URL:', err)
+      }
+    } else {
+      // Check if we're in development mode
+      const isDevelopment =
+        process.env.NODE_ENV === 'development' ||
+        window.location.hostname === 'localhost' ||
+        window.location.hostname === '127.0.0.1'
+
+      if (isDevelopment) {
+        // Use fallback only in development
+        const fallbackUrl = '/examples/line-chart-states.json'
+        setConfigUrl(fallbackUrl)
+      } else {
+        // In production without permalink, don't show embed section
+        console.warn('[EmbedEditor] No permalink found and not in development mode')
+        setConfigUrl(null)
+      }
+    }
+  }, [])
+
+  // Handle showing embed code modal
+  const handleShowEmbedCode = () => {
+    if (!configUrl) {
+      alert('This visualization must be published before generating embed code.')
+      return
+    }
+
+    setActiveTab('preview')
+    setShowEmbedModal(true)
+    setEmbedCodeCopied(false)
+  }
+
+  // Handle filter value change
+  const handleFilterChange = (filterKey: string, value: string) => {
+    setFilterState(prev => ({
+      ...prev,
+      [filterKey]: {
+        ...prev[filterKey],
+        value
+      }
+    }))
+  }
+
+  // Handle filter hide toggle
+  const handleHideToggle = (filterKey: string, hide: boolean) => {
+    setFilterState(prev => ({
+      ...prev,
+      [filterKey]: {
+        ...prev[filterKey],
+        hide
+      }
+    }))
+  }
+
+  // Handle copying embed code from modal
+  const handleCopyFromModal = async () => {
+    try {
+      await navigator.clipboard.writeText(embedCode)
+      setEmbedCodeCopied(true)
+      setTimeout(() => setEmbedCodeCopied(false), 3000)
+    } catch (err) {
+      console.error('Failed to copy embed code:', err)
+      alert('Failed to copy to clipboard. Please copy manually.')
+    }
+  }
+
+  // Handle closing modal
+  const handleCloseModal = () => {
+    setShowEmbedModal(false)
+    setEmbedCodeCopied(false)
+  }
+
+  return (
+    <>
+      {/* Collapsible Share with Partners Section */}
+      <div className='share-partners' style={{ padding: '0 1em 1em', textAlign: 'left' }}>
+        <span
+          className='advanced-toggle-link'
+          onClick={() => setIsExpanded(!isExpanded)}
+          style={{ paddingTop: '1em', display: 'block', cursor: 'pointer', textDecoration: 'underline' }}
+        >
+          <span
+            style={{ textDecoration: 'none', display: 'inline-block', fontFamily: 'monospace', paddingRight: '5px' }}
+          >
+            {isExpanded ? `— ` : `+ `}
+          </span>
+          Share with Partners
+        </span>
+
+        {isExpanded && (
+          <div style={{ paddingTop: '1em' }}>
+            {!configUrl ? (
+              <div
+                style={{
+                  padding: '0.75em',
+                  background: '#fff3cd',
+                  border: '1px solid #ffc107',
+                  borderRadius: '4px',
+                  marginBottom: '0.5em'
+                }}
+              >
+                <p style={{ fontSize: '0.85em', margin: 0, color: '#856404' }}>
+                  ⚠️ An embed code cannot be generated until this visualization has been saved.
+                </p>
+              </div>
+            ) : !filtersAreValid ? (
+              <div
+                style={{
+                  padding: '0.75em',
+                  background: '#fff3cd',
+                  border: '1px solid #ffc107',
+                  borderRadius: '4px',
+                  marginBottom: '0.5em'
+                }}
+              >
+                <p style={{ fontSize: '0.85em', margin: '0 0 0.5em 0', fontWeight: 'bold', color: '#856404' }}>
+                  ⚠️ Embed Code Not Available
+                </p>
+                <p style={{ fontSize: '0.85em', margin: 0, color: '#856404' }}>
+                  To enable embedding, all filters must have the "Query String Parameter" field set. Some filters are
+                  missing this field. After setting the field, make sure to save your visualization.
+                </p>
+              </div>
+            ) : (
+              <>
+                <p style={{ fontSize: '0.85em', marginBottom: '1em', color: '#666' }}>
+                  Generate embed codes for partners to add this visualization to their website.
+                </p>
+
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5em' }}>
+                  <button
+                    className='btn btn-primary'
+                    onClick={handleShowEmbedCode}
+                    style={{ width: '100%', textAlign: 'left' }}
+                  >
+                    Get Embed Code
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Embed Code Modal with Tabs */}
+      {showEmbedModal && (
+        <div
+          className='modal-overlay'
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            paddingTop: '5vh',
+            zIndex: 9999
+          }}
+          onClick={handleCloseModal}
+        >
+          <div
+            className='modal-content'
+            style={{
+              backgroundColor: 'white',
+              borderRadius: '8px',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+              maxWidth: '800px',
+              width: '90%',
+              maxHeight: '90vh',
+              margin: '20px',
+              display: 'flex',
+              flexDirection: 'column'
+            }}
+            onClick={e => e.stopPropagation()}
+          >
+            {/* Modal Header */}
+            <div
+              className='modal-header'
+              style={{
+                padding: '15px 20px',
+                borderBottom: '1px solid #e0e0e0',
+                backgroundColor: '#005eaa',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                borderRadius: '8px 8px 0 0'
+              }}
+            >
+              <h3 style={{ color: 'white', margin: 0 }}>Share with Partners</h3>
+              <button
+                onClick={handleCloseModal}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  color: 'white',
+                  fontSize: '1.5em',
+                  cursor: 'pointer',
+                  padding: '0 5px',
+                  lineHeight: 1
+                }}
+                aria-label='Close'
+              >
+                ×
+              </button>
+            </div>
+
+            {/* Tab Navigation */}
+            <div
+              style={{
+                display: 'flex',
+                borderBottom: '1px solid #e0e0e0',
+                backgroundColor: '#f5f5f5'
+              }}
+            >
+              {(['preview', 'code'] as TabId[]).map(tab => {
+                const tabLabels: Record<TabId, string> = {
+                  preview: 'Preview Visualization',
+                  code: 'Get Embed Code'
+                }
+
+                return (
+                  <button
+                    key={tab}
+                    onClick={() => setActiveTab(tab)}
+                    style={{
+                      flex: 1,
+                      padding: '12px 16px',
+                      border: 'none',
+                      backgroundColor: activeTab === tab ? 'white' : 'transparent',
+                      borderBottom: activeTab === tab ? '2px solid #005eaa' : '2px solid transparent',
+                      color: activeTab === tab ? '#005eaa' : '#666',
+                      fontWeight: activeTab === tab ? 'bold' : 'normal',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s'
+                    }}
+                  >
+                    {tabLabels[tab]}
+                  </button>
+                )
+              })}
+            </div>
+
+            {/* Tab Content */}
+            <div
+              className='modal-body'
+              style={{
+                padding: '20px',
+                flex: 1,
+                overflow: 'auto'
+              }}
+            >
+              {/* Preview Tab - Contains filter controls (if filters exist) and preview */}
+              {activeTab === 'preview' && (
+                <div>
+                  {/* Filter Settings - only shown if there are valid filters */}
+                  {hasFilters && (
+                    <>
+                      <h4 style={{ marginTop: 0, marginBottom: '1rem' }}>Filter Settings</h4>
+                      <p style={{ marginBottom: '1rem', color: '#666' }}>
+                        Set default values and visibility for filters in the partner's embedded visualization.
+                      </p>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '2rem' }}>
+                        {filters.map((filter, index) => {
+                          const state = filterState[filter.key] || { value: '', hide: false }
+                          const hasValues = filter.values && filter.values.length > 0
+
+                          return (
+                            <div
+                              key={filter.key || index}
+                              style={{
+                                padding: '1rem',
+                                background: 'white',
+                                border: '1px solid #ddd',
+                                borderRadius: '4px'
+                              }}
+                            >
+                              <label
+                                htmlFor={`filter-${index}`}
+                                style={{
+                                  display: 'block',
+                                  marginBottom: '0.5rem',
+                                  fontWeight: 'bold'
+                                }}
+                              >
+                                {filter.label}
+                              </label>
+
+                              {hasValues ? (
+                                <select
+                                  id={`filter-${index}`}
+                                  value={state.value}
+                                  onChange={e => handleFilterChange(filter.key, e.target.value)}
+                                  style={{
+                                    width: '100%',
+                                    padding: '0.5rem',
+                                    fontSize: '0.9rem',
+                                    border: '2px solid #d1d5db',
+                                    borderRadius: '6px',
+                                    backgroundColor: '#f9fafb',
+                                    cursor: 'pointer'
+                                  }}
+                                >
+                                  {filter.values?.map((value, valueIndex) => (
+                                    <option key={valueIndex} value={value}>
+                                      {value}
+                                    </option>
+                                  ))}
+                                </select>
+                              ) : (
+                                <div style={{ color: '#999', fontStyle: 'italic' }}>No values available</div>
+                              )}
+
+                              <div style={{ marginTop: '0.75rem' }}>
+                                <label
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    cursor: 'pointer',
+                                    fontWeight: 'normal'
+                                  }}
+                                >
+                                  <input
+                                    type='checkbox'
+                                    checked={state.hide}
+                                    onChange={e => handleHideToggle(filter.key, e.target.checked)}
+                                    style={{ marginRight: '0.5rem' }}
+                                  />
+                                  <span style={{ color: '#666' }}>Hide filter in embed</span>
+                                </label>
+                              </div>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    </>
+                  )}
+
+                  {/* Preview Section - title only shown if there are filters */}
+                  {hasFilters && <h4 style={{ marginBottom: '1rem' }}>Preview</h4>}
+                  <p style={{ marginBottom: '1rem', color: '#666' }}>
+                    This shows how the visualization will appear on the partner website
+                    {hasFilters ? ' with your selected settings' : ''}. The partner will have control over the width of
+                    the embedded visualization. If you do not see the latest version of the visualization, save it and
+                    reopen this popup.
+                  </p>
+                  <div
+                    style={{
+                      border: '2px dashed #999',
+                      borderRadius: '4px',
+                      padding: '1rem'
+                    }}
+                  >
+                    <div
+                      key={`${configUrl}-${JSON.stringify(filterState)}`}
+                      data-cove-embed
+                      data-config-url={(() => {
+                        const urlParams = buildFilterUrlParams(filters, filterState)
+                        const params = new URLSearchParams()
+                        Object.entries(urlParams).forEach(([key, value]) => {
+                          if (value) params.set(key, value)
+                        })
+                        return params.toString() ? `${configUrl}?${params.toString()}` : configUrl || ''
+                      })()}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Embed Code Tab */}
+              {activeTab === 'code' && (
+                <div>
+                  <p style={{ marginBottom: '10px', color: '#666' }}>
+                    Copy this code and send it to a partner so they can add it to their site. Your visualization will
+                    need to be published to Link (www.cdc.gov) before it can be embedded by a partner.
+                  </p>
+                  <textarea
+                    readOnly
+                    value={embedCode}
+                    style={{
+                      width: '100%',
+                      height: '200px',
+                      fontFamily: 'monospace',
+                      fontSize: '0.85em',
+                      padding: '10px',
+                      border: '1px solid #ddd',
+                      borderRadius: '4px',
+                      resize: 'vertical',
+                      boxSizing: 'border-box'
+                    }}
+                    onFocus={e => e.target.select()}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Modal Footer */}
+            <div
+              className='modal-footer'
+              style={{
+                padding: '15px 20px',
+                borderTop: '1px solid #e0e0e0',
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: '10px'
+              }}
+            >
+              <button className='btn btn-secondary' onClick={handleCloseModal}>
+                Close
+              </button>
+              {activeTab === 'code' && (
+                <button className='btn btn-primary' onClick={handleCopyFromModal} style={{ minWidth: '120px' }}>
+                  {embedCodeCopied ? '✓ Copied!' : 'Copy to Clipboard'}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default EmbedEditor