@cdc/core 4.25.3-6 → 4.25.5-1

package/components/EditorPanel/DataTableEditor.tsx

@@ -83,7 +83,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
       />
-      {config.type !== 'table' ? (
+      {config.type !== 'table' && (
         <CheckBox
           value={config.table.show}
           fieldName='show'
@@ -108,15 +108,6 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
             </Tooltip>
           }
         />
-      ) : (
-        <CheckBox
-          value={config.general?.showDownloadButton}
-          fieldName='showDownloadButton'
-          label='Show Download CSV link'
-          section='general'
-          updateField={updateField}
-          className='column-heading'
-        />
       )}
 
       {config.visualizationType !== 'Box Plot' && config.type !== 'table' && (
@@ -205,7 +196,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         />
       )}
       {config?.visualizationType !== 'Sankey' && (
-        <label>
+        <label onClick={e => e.preventDefault()}>
           <span className='edit-label column-heading mt-1'>Exclude Columns </span>
           <MultiSelect
             key={excludedColumns.join('') + 'excluded'}
@@ -234,6 +225,33 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
+      <CheckBox
+        value={config.table.download}
+        fieldName='download'
+        label='Show Download CSV Link'
+        section='table'
+        updateField={updateField}
+      />
+      {config.table.download && (
+        <>
+          <CheckBox
+            value={config.table.showDownloadLinkBelow}
+            fieldName='showDownloadLinkBelow'
+            className='ms-4'
+            label='Show Link Below Table'
+            section='table'
+            updateField={updateField}
+          />
+          <CheckBox
+            value={config.table.downloadVisibleDataOnly}
+            fieldName='downloadVisibleDataOnly'
+            className='ms-4'
+            label='Download only visible data'
+            section='table'
+            updateField={updateField}
+          />
+        </>
+      )}
       {isDashboard && config.type !== 'table' && (
         <CheckBox
           value={config.table.showDataTableLink}
@@ -261,14 +279,6 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
-
-      <CheckBox
-        value={config.table.showDownloadLinkBelow}
-        fieldName='showDownloadLinkBelow'
-        label='Show Download Link Below Table'
-        section='table'
-        updateField={updateField}
-      />
       <label>
         <span className='edit-label column-heading'>Table Cell Min Width</span>
         <input

package/components/EditorPanel/Inputs.tsx

@@ -1,5 +1,6 @@
 import { memo, useEffect, useState } from 'react'
 import { useDebounce } from 'use-debounce'
+import { DROPDOWN_STYLES } from '../Filters/components/Dropdown'
 
 export type Input = {
   label: string
@@ -117,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 => {
@@ -160,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}>
@@ -177,7 +186,7 @@ const Select = memo((props: SelectProps) => {
   })
 
   if (initialValue) {
-    optionsJsx.unshift(
+    optionsJsx?.unshift(
       <option value='' key='initial'>
         {initialValue}
       </option>
@@ -194,7 +203,7 @@ const Select = memo((props: SelectProps) => {
         {tooltip}
       </span>
       <select
-        className={`cove-form-select ${required && !value ? 'warning' : ''}`}
+        className={`cove-form-select ${required && !value ? 'warning' : ''} ${DROPDOWN_STYLES}`}
         name={fieldName}
         value={value}
         onChange={event => {

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'

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'
@@ -37,6 +39,15 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     updateField('filters', filterIndex, prop, value)
   }
 
+  const updateFilterDefaultValue = (index, value) => {
+    const filters = _.cloneDeep(config.filters)
+    const currentFilter = { ...filters[index], orderedValues: filters[index].values }
+    currentFilter.defaultValue = value
+    currentFilter.active = value
+    filters[index] = currentFilter
+    updateField(null, null, 'filters', filters)
+  }
+
   const updateFilterStyle = (index, style: VizFilterStyle) => {
     const filters = _.cloneDeep(config.filters)
     const currentFilter = { ...filters[index], orderedValues: filters[index].values }
@@ -160,6 +171,20 @@ 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