@cdc/editor 4.25.6 → 4.25.7-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.25.6",
+  "version": "4.25.7-2",
   "description": "React component for generating a new component entry",
   "moduleName": "CdcEditor",
   "main": "dist/cdceditor",
@@ -25,13 +25,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.25.6",
-    "@cdc/core": "^4.25.6",
-    "@cdc/dashboard": "^4.25.6",
-    "@cdc/data-bite": "^4.25.6",
-    "@cdc/map": "^4.25.6",
-    "@cdc/markup-include": "^4.25.6",
-    "@cdc/waffle-chart": "^4.25.6",
+    "@cdc/chart": "^4.25.7",
+    "@cdc/core": "^4.25.7",
+    "@cdc/dashboard": "^4.25.7-2",
+    "@cdc/data-bite": "^4.25.7",
+    "@cdc/map": "^4.25.7-2",
+    "@cdc/markup-include": "^4.25.7",
+    "@cdc/waffle-chart": "^4.25.7",
     "axios": "^1.9.0",
     "d3": "^7.9.0",
     "react-dropzone": "^14.3.8",
@@ -41,5 +41,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c"
+  "gitHead": "432a2d1acab22915fafe793cb9da1f10318ff793"
 }

package/src/components/ChooseTab.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import '../scss/choose-vis-tab.scss'
 
 import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
@@ -28,6 +28,15 @@ import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
 import TableIcon from '@cdc/core/assets/icon-table.svg'
 import Icon from '@cdc/core/components/ui/Icon'
 
+import {
+  convertVegaConfig,
+  getVegaConfigType,
+  getVegaErrors,
+  getVegaWarnings,
+  isVegaConfig,
+  parseVegaConfig
+} from '@cdc/core/helpers/vegaConfig'
+
 interface ButtonProps {
   icon: React.ReactElement
   id: number
@@ -41,6 +50,8 @@ interface ButtonProps {
 const ChooseTab: React.FC = (): JSX.Element => {
   const { config, tempConfig } = useContext(ConfigContext)
 
+  const [pastedConfig, setPastedConfig] = useState('')
+
   const dispatch = useContext(EditorDispatchContext)
   const rowLabels = ['General', , 'Charts', 'Maps']
 
@@ -49,17 +60,57 @@ const ChooseTab: React.FC = (): JSX.Element => {
     const reader = new FileReader()
     reader.onload = e => {
       const text = e.target.result
-      try {
-        const newConfig = JSON.parse(text as string)
-        dispatch({ type: 'EDITOR_SET_CONFIG', payload: newConfig })
-        dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
-      } catch (e) {
-        alert('Invalid JSON')
-      }
+      importConfig(text as string)
     }
     reader.readAsText(file)
   }
 
+  const importConfig = text => {
+    let newConfig
+    try {
+      newConfig = JSON.parse(text)
+    } catch (e) {
+      alert('The JSON that was entered is invalid.')
+      throw new Error()
+    }
+
+    const isVega = isVegaConfig(newConfig)
+    if (isVega) {
+      newConfig = importVegaConfig(newConfig)
+    }
+
+    dispatch({ type: 'EDITOR_SET_CONFIG', payload: newConfig })
+    dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: isVega && newConfig.data?.length ? 2 : 1 })
+  }
+
+  const importVegaConfig = newConfig => {
+    let vegaErrors
+    try {
+      const vegaConfig = parseVegaConfig(newConfig)
+      vegaErrors = getVegaErrors(newConfig, vegaConfig)
+      if (vegaErrors.length === 0) {
+        const configType = getVegaConfigType(vegaConfig)
+        const configSubType = configType === 'Map' ? 'United States (State- or County-Level)' : configType
+        const button = buttons.find(b => b.label === configSubType)
+        const coveConfig = generateNewConfig(JSON.parse(JSON.stringify(button)))
+        const vegaWarnings = getVegaWarnings(newConfig, vegaConfig)
+        const config = convertVegaConfig(configType, vegaConfig, coveConfig)
+        if (vegaWarnings.length) {
+          alert(vegaWarnings.join('\n\n'))
+        }
+        return config
+      }
+    } catch {
+      vegaErrors = [
+        'An unknown error occurred while importing this Vega config. Reach out to the COVE team if you think it should be supported.'
+      ]
+    }
+
+    const errorText = vegaErrors.join('\n\n')
+    alert(errorText)
+    throw new Error(errorText)
+  }
+
   const generateNewConfig = props => {
     let newConfig = {}
     switch (props.category) {
@@ -180,7 +231,7 @@ const ChooseTab: React.FC = (): JSX.Element => {
       <hr />
       <div className='form-group'>
         <label htmlFor='uploadConfig'>
-          Upload Custom Configuration{' '}
+          Select configuration file{' '}
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
               <Icon display='warningCircle' style={{ marginLeft: '0.5rem' }} />
@@ -197,6 +248,27 @@ const ChooseTab: React.FC = (): JSX.Element => {
           id='uploadConfig'
           onChange={handleUpload}
         />
+        <div className='d-flex align-items-start mt-1'>
+          <label htmlFor='uploadConfig'>or paste configuration JSON</label>
+          <textarea
+            id='pasteConfig'
+            className='ms-2 '
+            onChange={e => {
+              setPastedConfig(e.target.value)
+            }}
+            placeholder='{ }'
+            value={pastedConfig}
+          />
+          <button
+            className='btn btn-primary px-4 ms-2'
+            type='submit'
+            id='load-data'
+            disabled={!pastedConfig}
+            onClick={() => importConfig(pastedConfig)}
+          >
+            Load
+          </button>
+        </div>
       </div>
     </div>
   )

package/src/components/DataImport/components/DataImport.tsx

@@ -32,6 +32,13 @@ import { supportedDataTypes } from '../helpers/supportedDataTypes'
 import { getFileExtension } from '../helpers/getFileExtension'
 import { parseTextByMimeType } from '../helpers/parseTextByMimeType'
 import { getMimeType } from '../helpers/getMimeType'
+import {
+  extractCoveData,
+  getSampleVegaJson,
+  loadedVegaConfigData,
+  parseVegaConfig,
+  updateVegaData
+} from '@cdc/core/helpers/vegaConfig'
 
 const DataImport = () => {
   const { config, errors, tempConfig, sharepath } = useContext(ConfigContext)
@@ -49,10 +56,11 @@ const DataImport = () => {
     config.dataFileSourceType === 'url' ? config.dataFileName : config.dataUrl || ''
   )
 
-  const [keepURL, setKeepURL] = useState(!!config.dataUrl)
+  const [keepURL, setKeepURL] = useState(!!config.dataUrl || !!config.vegaType)
   const [addingDataset, setAddingDataset] = useState(config.type === 'dashboard' || !config.data)
   const [editingDataset, _setEditingDataset] = useState<string>(undefined)
-  const [newDatasetName, setNewDatasetName] = useState<string>(undefined)
+  const [newDatasetName, setNewDatasetName] = useState<string>(config.vegaType ? 'vega_data' : undefined)
+  const [pastedConfig, setPastedConfig] = useState<string>(undefined)
   const setEditingDataset = (datasetKey: string) => {
     _setEditingDataset(datasetKey)
     setNewDatasetName(datasetKey)
@@ -69,7 +77,8 @@ const DataImport = () => {
     })
 
     // Is the X Axis still in the dataset?
-    if (newData.columns.indexOf(oldAxisX) < 0) return false
+    const columns = newData.columns || Object.keys(newData[0])
+    if (columns.indexOf(oldAxisX) < 0) return false
 
     return true
   }
@@ -214,7 +223,10 @@ const DataImport = () => {
 
       // Validate parsed data and set if no issues.
       try {
-        const result = parseTextByMimeType(this.result.toString(), mimeType, externalURL, setErrors)
+        let result = parseTextByMimeType(this.result.toString(), mimeType, externalURL, setErrors)
+        if (config.vegaConfig) {
+          return updateDataFromVegaData(result, fileSource, fileSourceType)
+        }
         const text = transform.autoStandardize(result)
         if (config.data && config.series) {
           if (dataExists(text, config.series, config?.xAxis.dataKey)) {
@@ -320,7 +332,7 @@ const DataImport = () => {
           />
         </label>
         <label htmlFor='external-datas' className='col-12 mt-2'>
-          <span>URL</span>
+          <span>URL </span>
           <textarea
             id='external-datas'
             className='form-control'
@@ -341,7 +353,7 @@ const DataImport = () => {
           />{' '}
           Always load from URL (normally will only pull once)
         </label>
-        <div className='d-flex justify-content-end mt-2'>
+        <div className='d-flex justify-content-end mt-2 mb-3'>
           <button
             className='btn btn-primary px-4'
             type='submit'
@@ -418,6 +430,30 @@ const DataImport = () => {
     dispatch({ type: 'DELETE_DASHBOARD_DATASET', payload: { datasetKey } })
   }
 
+  const updateDataFromVegaConfig = pastedConfig => {
+    const vegaConfig = parseVegaConfig(JSON.parse(pastedConfig))
+    const newData = extractCoveData(vegaConfig)
+    let newConfig = {
+      ...config,
+      data: newData
+    }
+    loadedVegaConfigData(newConfig)
+    setConfig(newConfig)
+  }
+
+  const updateDataFromVegaData = (vegaData, fileSource, fileSourceType) => {
+    const newData = extractCoveData(updateVegaData(config.vegaConfig, vegaData))
+    let newConfig = {
+      ...config,
+      dataFileName: fileSource,
+      dataFileSourceType: fileSourceType,
+      dataUrl: fileSourceType === 'url' ? fileSource : null,
+      data: newData
+    }
+    loadedVegaConfigData(newConfig)
+    setConfig(newConfig)
+  }
+
   let configureData,
     readyToConfigure: boolean | Object[] = false
 
@@ -654,7 +690,7 @@ const DataImport = () => {
 
         {configureData?.data && (
           <>
-            {config.type !== 'dashboard' && (
+            {config.type !== 'dashboard' && !config.vegaType && (
               <>
                 <div className='heading-3'>Data Source</div>
                 <div className='file-loaded-area'>
@@ -694,6 +730,98 @@ const DataImport = () => {
               </>
             )}
 
+            {config.vegaType && (
+              <>
+                <div className='heading-3'>Update Dataset</div>
+                <Tabs startingTab={0}>
+                  <TabPane title='Update with Vega config' icon={<FileUploadIcon className='inline-icon' />}>
+                    <div>
+                      <label htmlFor='uploadConfig'>Paste full Vega configuration JSON:</label>
+
+                      <textarea
+                        id='pasteConfig'
+                        className='w-100 mb-2'
+                        onChange={e => setPastedConfig(e.target.value)}
+                        placeholder='{ }'
+                      />
+                      <div className='mb-3 d-flex justify-content-end'>
+                        <button
+                          className='btn btn-primary px-4'
+                          type='submit'
+                          id='load-data'
+                          disabled={!pastedConfig}
+                          onClick={() => updateDataFromVegaConfig(pastedConfig)}
+                        >
+                          Save & Load
+                        </button>
+                      </div>
+                    </div>
+                  </TabPane>
+                  <TabPane title='Update with JSON data' icon={<LinkIcon className='inline-icon' />}>
+                    <div>
+                      To change this chart to use a JSON file as its data source, the file should be formatted like this
+                      sample:
+                      <pre style={{ backgroundColor: '#f2f2f2', fontFamily: 'monospace' }}>
+                        {getSampleVegaJson(config.vegaConfig)}
+                      </pre>
+                    </div>
+                    <div>&nbsp;</div>
+                    <div>Upload JSON file:</div>
+                    <div className='data-source-options'>
+                      <div
+                        className={
+                          isDragActive2
+                            ? 'drag-active cdcdataviz-file-selector loaded-file'
+                            : 'cdcdataviz-file-selector loaded-file'
+                        }
+                        {...getRootProps2()}
+                      >
+                        <input {...getInputProps2()} />
+                        {isDragActive2 ? (
+                          <p>Drop file here</p>
+                        ) : (
+                          <p>
+                            <FileUploadIcon /> <span>{config.dataFileName ?? 'Replace data file'}</span>
+                          </p>
+                        )}
+                      </div>
+                      <div className='link link-replace' {...getRootProps2()}>
+                        <input {...getInputProps2()} />
+                        <p>
+                          <span>Replace file</span>
+                        </p>
+                      </div>
+                    </div>
+
+                    <label htmlFor='external-datas' className='col-12 mt-2'>
+                      <span>Or connect chart to URL:</span>
+                      <textarea
+                        id='external-datas'
+                        className='form-control'
+                        placeholder='e.g., https://data.cdc.gov/resources/file.json'
+                        aria-label='Load data from external URL'
+                        aria-describedby='load-data'
+                        rows={2}
+                        value={externalURL}
+                        onChange={e => setExternalURL(e.target.value)}
+                      />
+                    </label>
+                    <div className='d-flex justify-content-end mt-2 mb-3'>
+                      <button
+                        className='btn btn-primary px-4'
+                        type='submit'
+                        id='load-data'
+                        disabled={!newDatasetName || !externalURL}
+                        onClick={() => loadData(null, externalURL, editingDataset)}
+                      >
+                        Save & Load
+                      </button>
+                    </div>
+                  </TabPane>
+                </Tabs>
+              </>
+            )}
+
             {showDataDesigner && (
               <DataDesigner
                 visualizationKey={null}