@cdc/core 4.24.4 → 4.24.7

package/components/EditorPanel/DataTableEditor.tsx

@@ -1,21 +1,64 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '../ui/Icon'
-import { CheckBox, TextField } from './Inputs'
-import type { Table } from '@cdc/core/types/Table'
+import { CheckBox, TextField, Select } from './Inputs'
 import MultiSelect from '../MultiSelect'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Visualization } from '../../types/Visualization'
+import _ from 'lodash'
+import { Column } from '../../types/Column'
 
 interface DataTableProps {
-  config: Visualization
-  updateField: UpdateFieldFunc<string | boolean | string[] | number>
+  config: Partial<Visualization>
+  updateField: UpdateFieldFunc<string | boolean | string[] | number | Record<string, Partial<Column>>>
   isDashboard: boolean
   columns: string[]
 }
 
-const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard, columns }) => {
+const PLACEHOLDER = '-Select-'
+
+const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDashboard, columns: dataColumns }) => {
   const isLoadedFromUrl = config.dataKey?.includes('http://') || config?.dataKey?.includes('https://')
+  const excludedColumns = useMemo(() => {
+    return Object.keys(config.columns)
+      .map<[string, boolean]>(key => [key, config.columns[key].dataTable])
+      .filter(([key, dataTable]) => !dataTable)
+      .map(([key]) => key)
+  }, [config.columns])
+
+  const groupPivotColumns = useMemo(() => {
+    const columns: string[] = config.data.flatMap(Object.keys)
+    const cols = _.uniq(columns).filter(key => {
+      return true
+    })
+    return cols
+  }, [config.data])
+
+  const changeGroupBy = (value: string) => {
+    if (value === PLACEHOLDER) value = undefined
+    updateField('table', null, 'groupBy', value)
+  }
+
+  const excludeColumns = (section, subSection, fieldName, excludedColNames: string[]) => {
+    const newColumns = _.cloneDeep(config.columns)
+    const colNames: string[] = []
+    for (let colKey in newColumns) {
+      const col = newColumns[colKey]
+      colNames.push(col.name) // keep track of all column names
+      if (excludedColNames.includes(col.name)) {
+        // ensure all excluded columns are set to false
+        newColumns[colKey].dataTable = false
+      }
+    }
+    excludedColNames.forEach(colName => {
+      if (!colNames.includes(colName)) {
+        // make sure there is a column config to set to dataTable: false
+        newColumns[colName] = { name: colName, dataTable: false }
+      }
+    })
+    updateField(null, null, 'columns', newColumns)
+  }
+
   return (
     <>
       <TextField
@@ -37,25 +80,28 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
           </Tooltip>
         }
       />
-      <CheckBox
-        value={config.table.show}
-        fieldName='show'
-        label='Show Data Table'
-        section='table'
-        updateField={updateField}
-        className='column-heading'
-        tooltip={
-          <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target>
-              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-            </Tooltip.Target>
-            <Tooltip.Content>
-              <p>Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement.</p>
-            </Tooltip.Content>
-          </Tooltip>
-        }
-      />
-      {config.visualizationType !== 'Box Plot' && (
+      {config.type !== 'table' && (
+        <CheckBox
+          value={config.table.show}
+          fieldName='show'
+          label='Show Data Table'
+          section='table'
+          updateField={updateField}
+          className='column-heading'
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
+
+      {config.visualizationType !== 'Box Plot' && config.type !== 'table' && (
         <CheckBox
           value={config.table.showVertical}
           fieldName='showVertical'
@@ -75,74 +121,127 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
           }
         />
       )}
+
+      {config.type !== 'table' && (
+        <TextField
+          value={config.table.indexLabel}
+          section='table'
+          fieldName='indexLabel'
+          label='Index Column Header'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>To comply with 508 standards, if the first column in the data table has no header, enter a brief one here.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
       <TextField
-        value={config.table.indexLabel}
-        section='table'
-        fieldName='indexLabel'
-        label='Index Column Header'
+        value={config.table.caption}
         updateField={updateField}
+        section='table'
+        type='textarea'
+        fieldName='caption'
+        label='Screen Reader Description'
+        placeholder=' Data table'
         tooltip={
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
               <Icon display='question' style={{ marginLeft: '0.5rem' }} />
             </Tooltip.Target>
             <Tooltip.Content>
-              <p>To comply with 508 standards, if the first column in the data table has no header, enter a brief one here.</p>
+              <p>Enter a description of the data table to be read by screen readers.</p>
             </Tooltip.Content>
           </Tooltip>
         }
       />
-      <TextField
-        value={config.table.caption}
-        updateField={updateField}
-        section='table'
-        type='textarea'
-        fieldName='caption'
-        label='Screen Reader Description'
-        placeholder=' Data table'
+      <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label=' Limit Table Height' updateField={updateField} />
+      {config.table.limitHeight && <TextField value={config.table.height} section='table' fieldName='height' label='Data Table Height' type='number' min={0} max={500} placeholder='Height(px)' updateField={updateField} />}
+      {config?.visualizationType !== 'Sankey' && <MultiSelect key={excludedColumns.join('') + 'excluded'} options={dataColumns.map(c => ({ label: c, value: c }))} selected={excludedColumns} fieldName='dataTable' label='Exclude Columns' section='columns' updateField={excludeColumns} />}
+      <CheckBox value={config.table.collapsible} fieldName='collapsible' label=' Collapsible' section='table' updateField={updateField} />
+      {config.table.collapsible !== false && <CheckBox value={config.table.expanded} fieldName='expanded' label=' Expanded by Default' section='table' updateField={updateField} />}
+      {isDashboard && config.type !== 'table' && <CheckBox value={config.table.showDataTableLink} fieldName='showDataTableLink' label='Show Data Table Name & Link' section='table' updateField={updateField} />}
+      {isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' section='table' updateField={updateField} />}
+      {config.type !== 'table' && <CheckBox value={config.table.showDownloadImgButton} fieldName='showDownloadImgButton' label='Display Image Button' section='table' updateField={updateField} />}
+      <label>
+        <span className='edit-label column-heading'>Table Cell Min Width</span>
+        <input type='number' value={config.table.cellMinWidth ? config.table.cellMinWidth : 0} onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)} />
+      </label>
+      {config?.visualizationType !== 'Sankey' && (
+        <label>
+          <span className='edit-label column-heading'>
+            Group By{' '}
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Choose a column to use for grouping data rows. The selected column will not be shown in the data table. You will only be able to choose a column which does not have a column configuration.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          </span>
+
+          <select
+            value={config.table.groupBy}
+            onChange={event => {
+              changeGroupBy(event.target.value)
+            }}
+          >
+            {[PLACEHOLDER, ...groupPivotColumns.filter(col => col !== config.table.pivot?.columnName && col !== config.table.pivot?.valueColumn)].map(option => (
+              <option key={option}>{option}</option>
+            ))}
+          </select>
+        </label>
+      )}
+      <Select
+        label='Pivot Column: '
         tooltip={
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
               <Icon display='question' style={{ marginLeft: '0.5rem' }} />
             </Tooltip.Target>
             <Tooltip.Content>
-              <p>Enter a description of the data table to be read by screen readers.</p>
+              <p>Select a Column whos data values will be pivoted to Column Values.</p>
             </Tooltip.Content>
           </Tooltip>
         }
+        value={config.table.pivot?.columnName}
+        options={groupPivotColumns.filter(col => col !== config.table.groupBy && col !== config.table.pivot?.valueColumn)}
+        initial='-Select-'
+        section='table'
+        subsection='pivot'
+        fieldName='columnName'
+        updateField={updateField}
       />
-      <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label='Limit Table Height' updateField={updateField} />
-      {config.type !== 'table' && (
-        <CheckBox
-          value={config.table.customTableConfig}
-          fieldName='customTableConfig'
-          label='Customize Table Config'
-          section='table'
-          updateField={updateField}
+      {config.table.pivot?.columnName && (
+        <Select
+          label='Pivot Value Column: '
           tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
-                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>This will display all available columns in the data set. It will not show any columns where all of the column cells are null.</p>
+                <p>The column whos values will be pivoted under the column selected as the Filter.</p>
               </Tooltip.Content>
             </Tooltip>
           }
+          value={config.table.pivot?.valueColumn}
+          initial='-Select-'
+          section='table'
+          options={groupPivotColumns.filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)}
+          subsection='pivot'
+          fieldName='valueColumn'
+          updateField={updateField}
         />
       )}
-      {config.table.customTableConfig && <MultiSelect options={columns.map(c => ({ label: c, value: c }))} fieldName='excludeColumns' label='Exclude Columns' section='table' updateField={updateField} />}
-      {config.table.limitHeight && <TextField value={config.table.height} section='table' fieldName='height' label='Data Table Height' type='number' min={0} max={500} placeholder='Height(px)' updateField={updateField} />}
-      <CheckBox value={config.table.expanded} fieldName='expanded' label='Expanded by Default' section='table' updateField={updateField} />
-      {isDashboard && config.type !== 'table' && <CheckBox value={config.table.showDataTableLink} fieldName='showDataTableLink' label='Show Data Table Name & Link' section='table' updateField={updateField} />}
-      {isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' section='table' updateField={updateField} />}
-      {config.type !== 'table' && <CheckBox value={config.table.showDownloadImgButton} fieldName='showDownloadImgButton' label='Display Image Button' section='table' updateField={updateField} />}
-      <label>
-        <span className='edit-label column-heading'>Table Cell Min Width</span>
-        <input type='number' value={config.table.cellMinWidth ? config.table.cellMinWidth : 0} onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)} />
-      </label>
     </>
   )
 }
 
-export default DataTable
+export default DataTableEditor

package/components/EditorPanel/FieldSetWrapper.tsx

@@ -0,0 +1,51 @@
+import Icon from '../ui/Icon'
+
+type OpenControls = [Record<string, boolean>, Function] // useState type
+
+type FieldSetProps = {
+  fieldName: string
+  fieldKey: string | number
+  fieldType: string
+  controls: OpenControls
+  deleteField: Function
+  children: React.ReactNode
+}
+
+const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, controls, deleteField, children }) => {
+  const [openControls, setOpenControls] = controls
+  const show = openControls[fieldKey]
+  const setShow = (key, value) => {
+    setOpenControls({ ...openControls, [key]: value })
+  }
+
+  if (!show)
+    return (
+      <div className='mb-1'>
+        <button onClick={() => setShow(fieldKey, true)}>
+          <Icon display='caretDown' />
+        </button>
+        <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
+      </div>
+    )
+  return (
+    <fieldset className='edit-block mb-1' key={fieldKey}>
+      <div className='d-flex justify-content-between'>
+        <button onClick={() => setShow(fieldKey, false)}>
+          <Icon display='caretUp' />
+        </button>
+        <button
+          className='btn btn-danger btn-sm'
+          onClick={event => {
+            event.preventDefault()
+            deleteField()
+          }}
+        >
+          Remove
+        </button>
+      </div>
+      {children}
+    </fieldset>
+  )
+}
+
+export default FieldSet

package/components/EditorPanel/FootnotesEditor.tsx

@@ -0,0 +1,77 @@
+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'
+interface FootnotesEditorProps {
+  config: Footnotes
+  updateField: UpdateFieldFunc<Footnote[]>
+}
+
+const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }) => {
+  const addStaticFootnote = () => {
+    const newStaticNotes = [...(config.staticFootnotes || []), { text: 'Add Footnote Text' }]
+    updateField(null, null, 'staticFootnotes', newStaticNotes)
+  }
+
+  const updateStaticFootnote = (footnoteIndex, footnoteUpdate: Footnote) => {
+    const footnoteCopy = _.cloneDeep(config.staticFootnotes)
+    footnoteCopy[footnoteIndex] = footnoteUpdate
+    updateField(null, null, 'staticFootnotes', footnoteCopy)
+  }
+
+  const deleteStaticFootnote = footnoteIndex => {
+    const footnoteCopy = _.cloneDeep(config.staticFootnotes)
+    footnoteCopy.splice(footnoteIndex, 1)
+    updateField(null, null, 'staticFootnotes', footnoteCopy)
+  }
+
+  const getOptions = (opts: string[]) => {
+    return [['', '--Select--']].concat(opts.map(key => [key, key]))
+  }
+
+  const datasets = config.datasets || {}
+
+  const dataColumns = config.dataKey ? getOptions(Object.keys(datasets[config.dataKey]?.data?.[0] || {})) : []
+  const dataSetOptions = getOptions(Object.keys(datasets))
+  return (
+    <>
+      <em>Dynamic Footnotes</em>
+      <div className='row border p-2'>
+        <InputSelect label='Select a Footnote Dataset' value={config.dataKey} options={dataSetOptions} fieldName='dataKey' updateField={updateField} />
+
+        {config.dataKey && (
+          <div className='p-3'>
+            <InputSelect label='Footnote Symbol Column' value={config.dynamicFootnotes?.symbolColumn} options={dataColumns} section='dynamicFootnotes' fieldName='symbolColumn' updateField={updateField} />
+            <InputSelect label='Footnote Text Column' value={config.dynamicFootnotes?.textColumn} options={dataColumns} section='dynamicFootnotes' fieldName='textColumn' updateField={updateField} />
+            <InputSelect label='Footnote Order Column' value={config.dynamicFootnotes?.orderColumn} options={dataColumns} section='dynamicFootnotes' fieldName='orderColumn' updateField={updateField} />
+          </div>
+        )}
+      </div>
+
+      <hr />
+
+      <em>Static Footnotes</em>
+
+      {config.staticFootnotes?.map((note, index) => (
+        <div key={index} className='row border p-2'>
+          <div className='col-8'>
+            <InputSelect label='Symbol' value={note.symbol} options={[['', '--Select--'], ...footnotesSymbols]} fieldName='symbol' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, symbol: value })} />{' '}
+            <TextField label='Text' value={note.text} fieldName='text' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, text: value })} />
+          </div>
+          <div className='col-2 ml-4'>
+            <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
+              Delete
+            </button>
+          </div>
+        </div>
+      ))}
+      <button className='btn btn-primary' onClick={addStaticFootnote}>
+        Add Static Footnote
+      </button>
+    </>
+  )
+}
+
+export default FootnotesEditor

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -0,0 +1,227 @@
+import { Select, TextField } from '../Inputs'
+import Tooltip from '../../ui/Tooltip'
+import Icon from '../../ui/Icon'
+import { Visualization } from '../../../types/Visualization'
+import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
+import _ from 'lodash'
+import { MultiSelectFilter, VizFilter } from '../../../types/VizFilter'
+import { filterStyleOptions, handleSorting } from '../../Filters'
+import FieldSetWrapper from '../FieldSetWrapper'
+
+import FilterOrder from './components/FilterOrder'
+import { useMemo, useState } from 'react'
+
+type VizFilterProps = {
+  config: Visualization
+  updateField: UpdateFieldFunc<string | VizFilter[] | VizFilter>
+  rawData: Object[]
+}
+
+const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData }) => {
+  const openControls = useState({})
+  const dataColumns = useMemo(() => {
+    return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
+  }, [rawData])
+
+  const removeFilter = index => {
+    let filters = _.cloneDeep(config.filters)
+
+    filters.splice(index, 1)
+
+    updateField(null, null, 'filters', filters)
+  }
+
+  const updateFilterProp = (prop, index, value) => {
+    updateField('filters', index, prop, value)
+  }
+
+  const updateFilterStyle = (index, value) => {
+    const filters = _.cloneDeep(config.filters)
+    const currentFilter = filters[index]
+    currentFilter.filterStyle = value
+    if (value === 'multi-select') {
+      currentFilter.active = Array.isArray(currentFilter.active) ? currentFilter.active : [currentFilter.active]
+    } else if (Array.isArray(currentFilter.active)) {
+      currentFilter.active = currentFilter.active[0]
+    }
+    filters[index] = currentFilter
+    updateField(null, null, 'filters', filters)
+  }
+
+  const handleNameChange = (filterIndex, columnName) => {
+    const values = _.uniq(rawData.map(row => row[columnName]))
+    const copiedFilter = { ..._.cloneDeep(config.filters[filterIndex]), columnName, values }
+    handleSorting(copiedFilter) // sorts dropdown values in place
+    copiedFilter.active = copiedFilter.values[0]
+    const newFilters = config.filters.map((filter, index) => {
+      if (index === filterIndex) return copiedFilter
+      return filter
+    })
+    updateField(null, null, 'filters', newFilters)
+  }
+
+  const addNewFilter = () => {
+    const filters = config.filters ? [...config.filters] : []
+    const newVizFilter: VizFilter = { values: [], filterStyle: 'dropdown' } as VizFilter
+    filters.push(newVizFilter)
+    updateField(null, null, 'filters', filters)
+  }
+
+  const handleFilterOrder = (idx1, idx2, filterIndex, filter) => {
+    // Create a shallow copy of the filter values array & update position of the values
+    const updatedValues = [...filter.values]
+    const [movedItem] = updatedValues.splice(idx1, 1)
+    updatedValues.splice(idx2, 0, movedItem)
+
+    const filtersCopy = _.cloneDeep(config.filters)
+    const filterItem = { ...filtersCopy[filterIndex] }
+
+    // Overwrite filterItem.values since thats what we map through in the editor panel
+    filterItem.values = updatedValues
+    filterItem.orderedValues = updatedValues
+    filterItem.active = updatedValues[0]
+    filterItem.order = 'cust'
+
+    // Update the filters
+    filtersCopy[filterIndex] = filterItem
+
+    updateField(null, null, 'filters', filtersCopy)
+  }
+
+  return (
+    <>
+      {config.filters && (
+        <>
+          <Select
+            value={config.filterBehavior}
+            fieldName='filterBehavior'
+            label='Filter Behavior'
+            updateField={updateField}
+            options={['Apply Button', 'Filter Change']}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>The Apply Button option changes the visualization when the user clicks "apply". The Filter Change option immediately changes the visualization when the selection is changed.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+          <br />
+          <ul className='filters-list'>
+            {/* Whether filters should apply onChange or Apply Button */}
+
+            {config.filters.map((filter, index) => {
+              if (filter.type === 'url') return <></>
+
+              return (
+                <FieldSetWrapper fieldName={filter.columnName} fieldKey={index} fieldType='Filter' controls={openControls} deleteField={() => removeFilter(index)}>
+                  <label>
+                    <span className='edit-label column-heading'>Filter</span>
+                    <select
+                      value={filter.columnName}
+                      onChange={e => {
+                        handleNameChange(index, e.target.value)
+                      }}
+                    >
+                      <option value=''>- Select Option -</option>
+                      {dataColumns.map((dataKey, index) => (
+                        <option value={dataKey} key={index}>
+                          {dataKey}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+
+                  <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', index, e.target.checked)
+                      }}
+                    />
+                  </label>
+
+                  <label>
+                    <span className='edit-label column-heading'>Filter Style</span>
+
+                    <select
+                      value={filter.filterStyle}
+                      onChange={e => {
+                        updateFilterStyle(index, e.target.value)
+                      }}
+                    >
+                      {filterStyleOptions.map((item, index) => {
+                        return (
+                          <option key={`filter-style-${index}`} value={item}>
+                            {item}
+                          </option>
+                        )
+                      })}
+                    </select>
+                  </label>
+
+                  <label>
+                    <span className='edit-label column-heading'>Label</span>
+                    <input
+                      type='text'
+                      value={filter.label}
+                      onChange={e => {
+                        updateFilterProp('label', index, e.target.value)
+                      }}
+                    />
+                  </label>
+
+                  {filter.filterStyle === 'multi-select' && (
+                    <TextField
+                      label='Select Limit'
+                      value={(filter as MultiSelectFilter).selectLimit}
+                      updateField={updateField}
+                      section='filters'
+                      subsection={index}
+                      fieldName='selectLimit'
+                      type='number'
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>The maximum number of items that can be selected.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
+
+                  <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', index, e.target.value)
+                      }}
+                    />
+                  </label>
+
+                  <FilterOrder filterIndex={index} filter={filter} updateFilterProp={updateFilterProp} handleFilterOrder={handleFilterOrder} />
+                </FieldSetWrapper>
+              )
+            })}
+          </ul>
+        </>
+      )}
+      {!config.filters && <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
+      <button type='button' onClick={addNewFilter} className='btn btn-primary full-width'>
+        Add Filter
+      </button>
+    </>
+  )
+}
+
+export default VizFilterEditor