@cdc/core 4.25.10 → 4.26.1

package/_stories/StoryRenderingTests.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import { performAndAssert } from '@cdc/core/helpers/testing'
+
+const ChartRenderingValidator = () => (
+  <div data-testid='chart-rendering-validator'>
+    <h2>Simple COVE Visualization Tests</h2>
+    <p>This test validates all stories load and render.</p>
+  </div>
+)
+
+const meta: Meta<typeof ChartRenderingValidator> = {
+  title: 'Testing/Story Rendering Tests',
+  component: ChartRenderingValidator,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  tags: ['!dev', '!autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof ChartRenderingValidator>
+
+/**
+ * Fetch all stories from Storybook's JSON API and filter for visualization stories
+ * @returns Promise that resolves to an array of story URLs to test
+ */
+const getVisualizationStoryUrls = async (): Promise<string[]> => {
+  let response
+  try {
+    response = await fetch('http://localhost:6006/index.json')
+  } catch (error) {
+    console.error('Error fetching visualization story URLs:', error)
+    return []
+  }
+
+  const data = await response.json()
+
+  const storyUrls: string[] = []
+
+  Object.values(data.entries).forEach((story: any) => {
+    if (story.type === 'story') {
+      const isVisualizationStory =
+        story.title.includes('Components/Templates/') &&
+        !story.name.toLowerCase().includes('test') &&
+        !story.title.includes('Guide')
+
+      if (isVisualizationStory) {
+        const iframeUrl = `http://localhost:6006/iframe.html?id=${story.id}`
+        storyUrls.push(iframeUrl)
+      }
+    }
+  })
+  return storyUrls
+}
+
+/**
+ * Convert iframe URL to Storybook story URL for better debugging
+ * @param iframeUrl - The iframe URL (e.g., 'http://localhost:6006/iframe.html?id=components-templates-chart--multiple-lines')
+ * @returns The Storybook story URL (e.g., 'http://localhost:6006/?path=/story/components-templates-chart--multiple-lines')
+ */
+const iframeUrlToStoryUrl = (iframeUrl: string): string => {
+  const url = new URL(iframeUrl)
+  const storyId = url.searchParams.get('id')
+  return `http://localhost:6006/?path=/story/${storyId}`
+}
+
+/**
+ * Test a single Storybook iframe URL for successful visualization rendering
+ * @param iframeUrl - The complete iframe URL to test (e.g., 'http://localhost:6006/iframe.html?id=...')
+ * @returns Promise that resolves with test results
+ */
+const testIframeVisualization = async (iframeUrl: string) => {
+  iframeUrl = iframeUrl
+
+  const iframe = document.createElement('iframe')
+  iframe.style.width = '1200px'
+  iframe.style.height = '800px'
+  iframe.src = iframeUrl
+  document.body.appendChild(iframe)
+
+  try {
+    await performAndAssert(
+      'Wait for iframe to load',
+      () => {
+        try {
+          const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document
+          return {
+            loaded: !!iframeDoc && iframeDoc.readyState !== 'loading',
+            readyState: iframeDoc?.readyState || 'unknown'
+          }
+        } catch (error: any) {
+          return { loaded: false, readyState: 'error', error: error.message }
+        }
+      },
+      async () => {},
+      (before, after) => {
+        return after.loaded
+      }
+    )
+
+    await performAndAssert(
+      'Wait for SVG elements to render in iframe',
+      () => {
+        try {
+          const iframeDoc = iframe?.contentDocument || iframe?.contentWindow?.document
+          if (!iframeDoc) return { svgCount: 0, hasCoveModule: false, error: 'No document access' }
+
+          const svgCount = iframeDoc.querySelectorAll('svg').length
+          const hasCoveModule = !!iframeDoc.querySelector('.cdc-open-viz-module')
+          const isDataBite = !!iframeDoc.querySelector('.bite-content')
+          const isDataTable = !!iframeDoc.querySelector('.data-table')
+
+          return { svgCount, hasCoveModule, isDataBite, isDataTable, error: null }
+        } catch (error: any) {
+          return { svgCount: 0, hasCoveModule: false, isDataBite: false, isDataTable: false, error: error.message }
+        }
+      },
+      async () => {},
+      (before, after) => {
+        return (after.svgCount > 0 && after.hasCoveModule) || after.isDataBite || after.isDataTable
+      }
+    )
+  } finally {
+    if (iframe.parentNode) {
+      document.body.removeChild(iframe)
+    }
+  }
+}
+
+export const StoryRenderingTests: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByTestId('chart-rendering-validator')).toBeInTheDocument()
+
+    const storyUrls = await getVisualizationStoryUrls()
+
+    if (storyUrls.length === 0) {
+      console.warn('No visualization stories found to test')
+      return
+    }
+
+    const results: { iframeUrl: string; storyUrl: string; success: boolean; error?: string }[] = []
+
+    for (const [i, iframeUrl] of storyUrls.entries()) {
+      const storyUrl = iframeUrlToStoryUrl(iframeUrl)
+
+      try {
+        await testIframeVisualization(iframeUrl)
+        results.push({ iframeUrl, storyUrl, success: true })
+      } catch (error: any) {
+        if (i > 0) {
+          results.push({ iframeUrl, storyUrl, success: false, error: error.message })
+        }
+      }
+    }
+
+    const failed = results.filter(r => !r.success).length
+
+    if (failed > 0) {
+      throw new Error(`${failed} out of ${storyUrls.length} visualization stories failed to render`)
+    }
+  }
+}

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/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,
@@ -59,7 +60,9 @@ export const AdvancedEditor = ({
     chart: ['Charts', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
     dashboard: ['Dashboard', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
     map: ['Maps', 'https://www.cdc.gov/cove/index.html', <MapIcon />],
-    'markup-include': ['Markup Include', 'https://www.cdc.gov/cove/index.html', <MarkupIncludeIcon />]
+    'markup-include': ['Markup Include', 'https://www.cdc.gov/cove/index.html', <MarkupIncludeIcon />],
+    'data-bite': ['Data Bite', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
+    'waffle-chart': ['Waffle Chart', 'https://www.cdc.gov/cove/index.html', <ChartIcon />]
   }
 
   if (!config.type) return <></>
@@ -113,6 +116,9 @@ export const AdvancedEditor = ({
           </React.Fragment>
         )}
       </div>
+
+      {/* Share with Partners Section */}
+      <EmbedEditor config={config} />
     </>
   )
 }

package/components/AdvancedEditor/EmbedEditor.tsx

@@ -0,0 +1,281 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { generateEmbedCode } from '../../helpers/embedCodeGenerator'
+
+type EmbedEditorProps = {
+  config?: any // Current visualization config
+}
+
+/**
+ * EmbedEditor - Provides "Share with Partners" functionality
+ * Generates embed codes for iframe embedding of visualizations
+ */
+export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
+  const [configUrl, setConfigUrl] = useState<string | null>(null)
+  const [showEmbedModal, setShowEmbedModal] = useState(false)
+  const [embedCode, setEmbedCode] = useState('')
+  const [embedCodeCopied, setEmbedCodeCopied] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  // Check if all filters have setByQueryParameter
+  const filtersAreValid = useMemo(() => {
+    if (!config) return true
+
+    // Check regular filters
+    const filters = config.filters || []
+    // Check dashboard shared filters
+    const sharedFilters = config.dashboard?.sharedFilters || []
+
+    const allFilters = [...filters, ...sharedFilters]
+
+    // If no filters, valid
+    if (allFilters.length === 0) return true
+
+    // All filters must have setByQueryParameter
+    return allFilters.every((filter: any) => !!filter.setByQueryParameter)
+  }, [config])
+
+  // 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
+    }
+
+    const code = generateEmbedCode({ configUrl })
+    setEmbedCode(code)
+    setShowEmbedModal(true)
+    setEmbedCodeCopied(false)
+  }
+
+  // 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)
+  }
+
+  // Hide embed section until released
+  return null
+
+  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 websites. Your visualization will
+                  need to be published to Link (www.cdc.gov) before it can be embedded by a partner.
+                </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 */}
+      {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: 'center',
+            justifyContent: 'center',
+            zIndex: 9999
+          }}
+          onClick={handleCloseModal}
+        >
+          <div
+            className='modal-content'
+            style={{
+              backgroundColor: 'white',
+              borderRadius: '8px',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+              maxWidth: '600px',
+              width: '90%',
+              margin: '20px'
+            }}
+            onClick={e => e.stopPropagation()}
+          >
+            <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 }}>Embed Code</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>
+
+            <div className='modal-body' style={{ padding: '20px' }}>
+              <p style={{ marginBottom: '10px', color: '#666' }}>Copy this code and paste it into your website:</p>
+              <textarea
+                readOnly
+                value={embedCode}
+                style={{
+                  width: '100%',
+                  height: '180px',
+                  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
+              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>
+              <button className='btn btn-primary' onClick={handleCopyFromModal} style={{ minWidth: '120px' }}>
+                {embedCodeCopied ? '✓ Copied!' : 'Copy to Clipboard'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default EmbedEditor