AdvancedEditor.tsx

import React, { useState, useEffect } from 'react'
import MapIcon from '../../assets/map-folded.svg'
import ChartIcon from '../../assets/icon-chart-bar.svg'
import MarkupIncludeIcon from '../../assets/icon-code.svg'
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'

const UNDEFINED_SENTINELS = new Set(['__undefined__', '__\u200bundefined__'])

const sanitizeConfigForAdvancedEditor = <T,>(input: T): T => {
  if (input === undefined || input === null) return input

  // Normalize values so copy/export from JsonEditor stays valid JSON.
  const serialized = JSON.stringify(input, (_key, value) => {
    if (typeof value === 'string' && UNDEFINED_SENTINELS.has(value)) return undefined
    return value
  })

  if (serialized === undefined) return input

  try {
    return JSON.parse(serialized)
  } catch {
    return input
  }
}

export const AdvancedEditor = ({
  loadConfig,
  config,
  convertStateToConfig,
  stripConfig = config => config,
  onExpandCollapse = () => {}
}) => {
  const [advancedToggle, _setAdvancedToggle] = useState(false)
  const [configTextboxValue, setConfigTextbox] = useState<Record<string, any>>({})
  const setAdvancedToggle = val => {
    _setAdvancedToggle(val)
    onExpandCollapse()
  }

  const collapseFields: FilterFunction = input => {
    if (['datasets', 'data', 'originalFormattedData', 'formattedData'].includes(String(input.key))) return true
    return false
  }

  const onUpdate: UpdateFunction = val => {
    setConfigTextbox(sanitizeConfigForAdvancedEditor(val.newData))
  }

  const getParsedConfig = () => {
    let parsedConfig = stripConfig(config)
    if (config.type !== 'dashboard') {
      parsedConfig = convertStateToConfig()
    }

    return sanitizeConfigForAdvancedEditor(parsedConfig)
  }

  useEffect(() => {
    // Only process config when advanced editor is open to improve performance
    if (advancedToggle) {
      setConfigTextbox(getParsedConfig())
    }
  }, [config, advancedToggle])

  // Initialize config when advanced editor is first opened
  const handleToggleOpen = () => {
    if (!advancedToggle) {
      // Process config only when opening for the first time
      setConfigTextbox(getParsedConfig())
    }
    setAdvancedToggle(!advancedToggle)
  }

  const typeLookup = {
    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 />],
    '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 <></>
  return (
    <>
      <a
        href={typeLookup[config.type][1]}
        target='_blank'
        rel='noopener noreferrer'
        className='guidance-link'
        style={{ cursor: 'pointer !important' }}
      >
        {typeLookup[config.type][2]}
        <div>
          <span className='heading-3'>Get Help with {typeLookup[config.type][0]}</span>
          <p>Examples and documentation</p>
        </div>
      </a>
      <div className='advanced'>
        <span className='advanced-toggle-link' onClick={handleToggleOpen}>
          <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
        </span>
        {advancedToggle && (
          <React.Fragment>
            <section className='error-box py-2 px-3 my-2'>
              <div>
                <strong className='pt-1'>Warning</strong>
                <p>This can cause serious errors in your visualization.</p>
              </div>
            </section>
            <p className='pb-2'>
              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration
              that is generated by this editor and allows you to edit properties directly and apply them.
            </p>
            <JsonEditor
              className='advanced-json-editor'
              data={configTextboxValue}
              onUpdate={onUpdate}
              rootName=''
              collapse={collapseFields}
            />
            <button
              className='btn btn-success m-2 p-2'
              onClick={() => {
                loadConfig(sanitizeConfigForAdvancedEditor(configTextboxValue))
                setAdvancedToggle(!advancedToggle)
              }}
            >
              Apply Configuration Changes
            </button>
          </React.Fragment>
        )}
      </div>

      {/* Share with Partners Section */}
      <EmbedEditor config={config} />
    </>
  )
}

export default AdvancedEditor