@cdc/core 4.25.3 → 4.25.6

package/components/EditorPanel/FootnotesEditor.tsx

@@ -1,75 +1,129 @@
+import React, { useState } from 'react'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import _ from 'lodash'
 import Footnotes, { Footnote } from '../../types/Footnotes'
 import { footnotesSymbols } from '../../helpers/footnoteSymbols'
 import InputSelect from '../inputs/InputSelect'
 import { TextField } from './Inputs'
+import { Datasets } from '@cdc/core/types/DataSet'
+import DataTransform from '../../helpers/DataTransform'
+import fetchRemoteData from '../../helpers/fetchRemoteData'
+import Loader from '../Loader'
+import { AnyVisualization } from '../../types/Visualization'
 interface FootnotesEditorProps {
-  config: Footnotes
-  updateField: UpdateFieldFunc<Footnote[]>
+  config: AnyVisualization
+  updateField: UpdateFieldFunc<Footnote[] | Object>
+  datasets: Datasets
 }
 
-const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }) => {
+const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField, datasets }) => {
+  const footnotesConfig = config.footnotes || {}
+  const [errorMessage, setErrorMessage] = useState('')
+  const [loadingAPIData, setLoadingAPIData] = useState(false)
+  const [datasetsCache, setDatasetsCache] = useState(datasets || {})
+  const transform = new DataTransform()
+
+  const fetchData = async datasetKey => {
+    const { data, dataUrl } = datasetsCache[datasetKey]
+    if (!dataUrl) return data
+    let newData = data
+    const noCachedData = dataUrl && !data
+    const dataSetChanged = datasetKey !== footnotesConfig.dataKey
+    setErrorMessage('')
+    if (dataSetChanged || noCachedData) {
+      setLoadingAPIData(true)
+      try {
+        newData = await fetchRemoteData(dataUrl)
+        newData = transform.autoStandardize(newData)
+      } catch (e) {
+        setErrorMessage('There was an issue loading the data source. Please check the datasource URL and try again.')
+      }
+
+      setLoadingAPIData(false)
+    }
+    return newData
+  }
+
   const addStaticFootnote = () => {
-    const newStaticNotes = [...(config.staticFootnotes || []), { text: 'Add Footnote Text' }]
-    updateField(null, null, 'staticFootnotes', newStaticNotes)
+    const newStaticNotes = [...(footnotesConfig.staticFootnotes || []), { text: 'Add Footnote Text' }]
+    updateField('footnotes', null, 'staticFootnotes', newStaticNotes)
   }
 
   const updateStaticFootnote = (footnoteIndex, footnoteUpdate: Footnote) => {
-    const footnoteCopy = _.cloneDeep(config.staticFootnotes)
+    const footnoteCopy = _.cloneDeep(footnotesConfig.staticFootnotes)
     footnoteCopy[footnoteIndex] = footnoteUpdate
-    updateField(null, null, 'staticFootnotes', footnoteCopy)
+    updateField('footnotes', null, 'staticFootnotes', footnoteCopy)
   }
 
   const deleteStaticFootnote = footnoteIndex => {
-    const footnoteCopy = _.cloneDeep(config.staticFootnotes)
+    const footnoteCopy = _.cloneDeep(footnotesConfig.staticFootnotes)
     footnoteCopy.splice(footnoteIndex, 1)
-    updateField(null, null, 'staticFootnotes', footnoteCopy)
+    updateField('footnotes', null, 'staticFootnotes', footnoteCopy)
   }
 
   const getOptions = (opts: string[]) => {
     return [['', '--Select--']].concat(opts.map(key => [key, key]))
   }
 
-  const datasets = config.datasets || {}
+  const dataColumns = footnotesConfig.dataKey
+    ? getOptions(Object.keys(datasetsCache[footnotesConfig.dataKey]?.data?.[0] || {}))
+    : []
+  const dataSetOptions = getOptions(Object.keys(datasetsCache))
+
+  const changeFootnoteDataKey = async value => {
+    if (value) {
+      if (!datasetsCache[value]) {
+        const newData = await fetchData(value)
+        setDatasetsCache({ ...datasetsCache, [value]: { ...datasetsCache[value], data: newData } })
+      }
+    } else {
+      updateField('footnotes', null, 'dynamicFootnotes', {})
+    }
 
-  const dataColumns = config.dataKey ? getOptions(Object.keys(datasets[config.dataKey]?.data?.[0] || {})) : []
-  const dataSetOptions = getOptions(Object.keys(datasets))
+    updateField('footnotes', null, 'dataKey', value)
+  }
   return (
     <>
+      {loadingAPIData && <Loader fullScreen />}
       <em>Dynamic Footnotes</em>
       <div className='row border p-2'>
         <InputSelect
           label='Select a Footnote Dataset'
-          value={config.dataKey}
+          value={footnotesConfig.dataKey}
           options={dataSetOptions}
           fieldName='dataKey'
-          updateField={updateField}
+          updateField={(section, subsection, fieldname, dataKey) => {
+            changeFootnoteDataKey(dataKey)
+          }}
         />
+        {errorMessage && <p className='text-danger'>{errorMessage}</p>}
 
-        {config.dataKey && (
+        {footnotesConfig.dataKey && (
           <div className='p-3'>
             <InputSelect
               label='Footnote Symbol Column'
-              value={config.dynamicFootnotes?.symbolColumn}
+              value={footnotesConfig.dynamicFootnotes?.symbolColumn}
               options={dataColumns}
-              section='dynamicFootnotes'
+              section='footnotes'
+              subsection='dynamicFootnotes'
               fieldName='symbolColumn'
               updateField={updateField}
             />
             <InputSelect
               label='Footnote Text Column'
-              value={config.dynamicFootnotes?.textColumn}
+              value={footnotesConfig.dynamicFootnotes?.textColumn}
               options={dataColumns}
-              section='dynamicFootnotes'
+              section='footnotes'
+              subsection='dynamicFootnotes'
               fieldName='textColumn'
               updateField={updateField}
             />
             <InputSelect
               label='Footnote Order Column'
-              value={config.dynamicFootnotes?.orderColumn}
+              value={footnotesConfig.dynamicFootnotes?.orderColumn}
               options={dataColumns}
-              section='dynamicFootnotes'
+              section='footnotes'
+              subsection='dynamicFootnotes'
               fieldName='orderColumn'
               updateField={updateField}
             />
@@ -81,7 +135,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
 
       <em>Static Footnotes</em>
 
-      {config.staticFootnotes?.map((note, index) => (
+      {footnotesConfig.staticFootnotes?.map((note, index) => (
         <div key={index} className='row border p-2'>
           <div className='col-8'>
             <InputSelect

package/components/EditorPanel/Inputs.tsx

@@ -1,6 +1,6 @@
 import { memo, useEffect, useState } from 'react'
 import { useDebounce } from 'use-debounce'
-import { DROPDOWN_STYLES } from '../Filters/Filters'
+import { DROPDOWN_STYLES } from '../Filters/components/Dropdown'
 
 export type Input = {
   label: string
@@ -118,9 +118,17 @@ const CheckBox = memo((props: CheckboxProps) => {
     return <></>
   }
   return (
-    <label className='checkbox column-heading'>
+    <label
+      className='checkbox column-heading'
+      onClick={e => {
+        if (!['SPAN', 'INPUT'].includes(e.target.nodeName)) {
+          e.preventDefault()
+        }
+      }}
+    >
       <input
         type='checkbox'
+        className='edit-checkbox'
         name={fieldName}
         checked={value}
         onChange={e => {
@@ -161,7 +169,7 @@ const Select = memo((props: SelectProps) => {
     initial: initialValue,
     ...attributes
   } = props
-  const optionsJsx = options.map((option, index) => {
+  const optionsJsx = options?.map((option, index) => {
     if (typeof option === 'string') {
       return (
         <option value={option} key={index}>
@@ -178,7 +186,7 @@ const Select = memo((props: SelectProps) => {
   })
 
   if (initialValue) {
-    optionsJsx.unshift(
+    optionsJsx?.unshift(
       <option value='' key='initial'>
         {initialValue}
       </option>

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { SubGrouping, VizFilter, OrderBy } from '../../../types/VizFilter'
-import { filterOrderOptions, handleSorting } from '../../Filters'
+import { handleSorting } from '../../Filters/helpers/handleSorting'
+import { filterOrderOptions } from '../../../helpers/filterOrderOptions'
 import FilterOrder from './components/FilterOrder'
 import { Visualization } from '../../../types/Visualization'
 import { useMemo } from 'react'
@@ -266,7 +267,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
               const orderedSubGroupValues = subGrouping.valuesLookup[groupName].orderedValues
               return (
                 <div key={`group-subgroup-values-${groupName}-${i}`}>
-                  <span className='font-weight-bold'>{groupName}</span>
+                  <span className='font-weight-bold fw-bold'>{groupName}</span>
                   <FilterOrder
                     key={`subgroup-values-${groupName}-${i}`}
                     orderedValues={orderedSubGroupValues}

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -5,7 +5,9 @@ import { Visualization } from '../../../types/Visualization'
 import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
 import _ from 'lodash'
 import { MultiSelectFilter, VizFilter, VizFilterStyle } from '../../../types/VizFilter'
-import { filterStyleOptions, handleSorting, filterOrderOptions } from '../../Filters'
+import { handleSorting } from '../../Filters/helpers/handleSorting'
+import { filterOrderOptions } from '../../../helpers/filterOrderOptions'
+import { filterStyleOptions } from '../../Filters'
 import FieldSetWrapper from '../FieldSetWrapper'
 
 import FilterOrder from './components/FilterOrder'
@@ -17,9 +19,10 @@ type VizFilterProps = {
   config: Visualization
   updateField: UpdateFieldFunc<string | VizFilter[] | VizFilter>
   rawData: Object[]
+  hasFootnotes?: boolean
 }
 
-const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData }) => {
+const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData, hasFootnotes }) => {
   const openControls = useState({})
   const dataColumns = useMemo(() => {
     return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
@@ -169,20 +172,6 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                     options={filterStyleOptions}
                   />
 
-                  <Select
-                    value={filter.defaultValue}
-                    options={
-                      filter.resetLabel
-                        ? [filter.resetLabel, ...config.filters?.[filterIndex].values]
-                        : config.filters?.[filterIndex].values
-                    }
-                    updateField={(_section, _subSection, _key, value) => {
-                      updateFilterDefaultValue(filterIndex, value)
-                    }}
-                    label='Filter Default Value'
-                    initial='Select'
-                  />
-
                   {filter.filterStyle !== 'nested-dropdown' ? (
                     <>
                       <Select
@@ -194,16 +183,21 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         initial='- Select Option -'
                       />
 
-                      <label>
-                        <span className='edit-showDropdown column-heading'>Show Filter Input</span>
-                        <input
-                          type='checkbox'
-                          checked={filter.showDropdown === undefined ? true : filter.showDropdown}
-                          onChange={e => {
-                            updateFilterProp('showDropdown', filterIndex, e.target.checked)
+                      {filter.columnName && (
+                        <Select
+                          value={filter.defaultValue}
+                          options={
+                            filter.resetLabel
+                              ? [filter.resetLabel, ...config.filters?.[filterIndex].values]
+                              : config.filters?.[filterIndex].values
+                          }
+                          updateField={(_section, _subSection, _key, value) => {
+                            updateFilterDefaultValue(filterIndex, value)
                           }}
+                          label='Filter Default Value'
+                          initial='Select'
                         />
-                      </label>
+                      )}
 
                       <label>
                         <span className='edit-label column-heading'>Label</span>
@@ -238,17 +232,6 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         />
                       )}
 
-                      <label>
-                        <span className='edit-label column-heading'>Default Value Set By Query String Parameter</span>
-                        <input
-                          type='text'
-                          value={filter.setByQueryParameter}
-                          onChange={e => {
-                            updateFilterProp('setByQueryParameter', filterIndex, e.target.value)
-                          }}
-                        />
-                      </label>
-
                       <Select
                         value={filter.order || 'asc'}
                         fieldName='order'
@@ -276,6 +259,27 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                           options={dataColumns}
                         />
                       )}
+                      <label>
+                        <span className='edit-label column-heading'>Default Value Set By Query String Parameter</span>
+                        <input
+                          type='text'
+                          value={filter.setByQueryParameter}
+                          onChange={e => {
+                            updateFilterProp('setByQueryParameter', filterIndex, e.target.value)
+                          }}
+                        />
+                      </label>
+
+                      <label>
+                        <input
+                          type='checkbox'
+                          checked={filter.showDropdown === undefined ? true : filter.showDropdown}
+                          onChange={e => {
+                            updateFilterProp('showDropdown', filterIndex, e.target.checked)
+                          }}
+                        />
+                        <span className='edit-showDropdown column-heading'>Show Filter</span>
+                      </label>
                     </>
                   ) : (
                     <NestedDropdownEditor
@@ -289,6 +293,18 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                       updateFilterStyle={updateFilterStyle}
                     />
                   )}
+                  {hasFootnotes && (
+                    <label>
+                      <input
+                        type='checkbox'
+                        checked={!!filter.filterFootnotes}
+                        onChange={e => {
+                          updateFilterProp('filterFootnotes', filterIndex, e.target.checked)
+                        }}
+                      />
+                      <span className='edit-showDropdown column-heading'>Filter Footnotes</span>
+                    </label>
+                  )}
                   <label>
                     <span className='edit-label column-heading'>
                       Filter Parents{' '}