@cdc/core 4.23.11 → 4.24.1

package/components/DataTable/DataTable.tsx

@@ -15,12 +15,15 @@ import Table from '../Table'
 import chartCellMatrix from './helpers/chartCellMatrix'
 import regionCellMatrix from './helpers/regionCellMatrix'
 import boxplotCellMatrix from './helpers/boxplotCellMatrix'
+import customColumns from './helpers/customColumns'
 import { TableConfig } from './types/TableConfig'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
   colorScale?: Function
   columns?: { navigate: { name: string } }
+  // determines if columns should be wrapped in the table
+  wrapColumns?: boolean
   config: TableConfig
   dataConfig?: Object
   displayDataAsText?: Function
@@ -42,7 +45,7 @@ export type DataTableProps = {
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
-  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId } = props
+  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
 
   const [expanded, setExpanded] = useState(expandDataTable)
 
@@ -89,19 +92,21 @@ const DataTable = (props: DataTableProps) => {
       break
   }
 
-  const rawRows = Object.keys(runtimeData)
+  const _runtimeData = config.table.customTableConfig ? customColumns(runtimeData, config.table.excludeColumns) : runtimeData
+
+  const rawRows = Object.keys(_runtimeData)
   const rows = isVertical
     ? rawRows.sort((a, b) => {
         let dataA
         let dataB
         if (config.type === 'map' && config.columns) {
           const sortByColName = config.columns[sortBy.column].name
-          dataA = runtimeData[a][sortByColName]
-          dataB = runtimeData[b][sortByColName]
+          dataA = _runtimeData[a][sortByColName]
+          dataB = _runtimeData[b][sortByColName]
         }
         if (config.type === 'chart' || config.type === 'dashboard') {
-          dataA = runtimeData[a][sortBy.column]
-          dataB = runtimeData[b][sortBy.column]
+          dataA = _runtimeData[a][sortBy.column]
+          dataB = _runtimeData[b][sortBy.column]
         }
         return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
       })
@@ -112,6 +117,8 @@ const DataTable = (props: DataTableProps) => {
     OverflowY: 'scroll'
   }
 
+  const hasRowType = !!Object.keys(rawData[0] || {}).find((v: string) => v.match(/row[_-]?type/i))
+
   const caption = useMemo(() => {
     if (config.type === 'map') {
       return config.table.caption ? config.table.caption : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
@@ -120,6 +127,13 @@ const DataTable = (props: DataTableProps) => {
     }
   }, [config.table.caption])
 
+  // Determines if a relative region is being shown to the user.
+  // If a relative region is found we don't want to display the data table.
+  // Takes backwards compatibility into consideration, ie !region.toType || !region.fromType
+  const noRelativeRegions = config?.regions?.every(region => {
+    return (region.toType === 'Fixed' && region.fromType === 'Fixed') || (!region.toType && !region.fromType) || (!region.toType && region.fromType === 'Fixed') || (!region.fromType && region.toType === 'Fixed')
+  })
+
   // prettier-ignore
   const tableData = useMemo(() => (
     config.visualizationType === 'Pie'
@@ -151,17 +165,20 @@ const DataTable = (props: DataTableProps) => {
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
-              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, ...props }) : chartCellMatrix({ rows, ...props, isVertical, sortBy })}
+              wrapColumns={wrapColumns}
+              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData: _runtimeData }) : chartCellMatrix({ rows, ...props, runtimeData: _runtimeData, isVertical, sortBy, hasRowType })}
               tableName={config.type}
               caption={caption}
               stickyHeader
-              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={runtimeData} {...props} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
+              hasRowType={hasRowType}
+              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={_runtimeData} {...props} hasRowType={hasRowType} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
               tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${isVertical ? '' : ' horizontal'}`, 'aria-live': 'assertive', 'aria-rowcount': config?.data?.length ? config.data.length : -1, hidden: !expanded }}
             />
 
             {/* REGION Data Table */}
-            {config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
+            {noRelativeRegions && config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
               <Table
+                wrapColumns={wrapColumns}
                 childrenMatrix={regionCellMatrix({ config })}
                 tableName={config.visualizationType}
                 caption='Table of the highlighted regions in the visualization'
@@ -188,6 +205,7 @@ const DataTable = (props: DataTableProps) => {
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
+              wrapColumns={wrapColumns}
               childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
               tableName={config.visualizationType}
               caption={caption}

package/components/DataTable/components/ChartHeader.tsx

@@ -3,11 +3,11 @@ import { getSeriesName } from '../helpers/getSeriesName'
 import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
 import { DownIcon, UpIcon } from './Icons'
 
-type ChartHeaderProps = { data; isVertical; config; runtimeData; setSortBy; sortBy; groupBy? }
+type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; groupBy?; hasRowType? }
 
-const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy, groupBy }: ChartHeaderProps) => {
+const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, hasRowType }: ChartHeaderProps) => {
   if (!data) return
-  let dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
+  let dataSeriesColumns = getDataSeriesColumns(config, isVertical, data)
   if (groupBy) {
     let groupHeaderRemoved = dataSeriesColumns.filter(col => col !== groupBy)
     if (groupHeaderRemoved.length != dataSeriesColumns.length) {
@@ -17,6 +17,14 @@ const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy,
     }
   }
   if (isVertical) {
+    if (hasRowType) {
+      // find the row type column and place it at the beginning of the array
+      const rowTypeRegex = /row[_-]?type/i
+      const rowTypeIndex = dataSeriesColumns.findIndex(column => rowTypeRegex.test(column))
+      if (rowTypeIndex > -1) {
+        dataSeriesColumns.splice(rowTypeIndex, 1)
+      }
+    }
     return (
       <tr>
         {dataSeriesColumns.map((column, index) => {
@@ -24,15 +32,18 @@ const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy,
 
           return (
             <th
+              style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
               key={`col-header-${column}__${index}`}
               tabIndex={0}
               title={text}
               role='columnheader'
               scope='col'
               onClick={() => {
+                if (hasRowType) return
                 setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
               }}
               onKeyDown={e => {
+                if (hasRowType) return
                 if (e.keyCode === 13) {
                   setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
                 }
@@ -54,11 +65,12 @@ const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy,
     const sliceVal = config.visualizationType === 'Pie' ? 1 : 0
     return (
       <tr>
-        {['__series__', ...Object.keys(runtimeData)].slice(sliceVal).map((row, index) => {
+        {['__series__', ...Object.keys(data)].slice(sliceVal).map((row, index) => {
           let column = config.xAxis?.dataKey
-          let text = row !== '__series__' ? getChartCellValue(row, column, config, runtimeData) : '__series__'
+          let text = row !== '__series__' ? getChartCellValue(row, column, config, data) : '__series__'
           return (
             <th
+              style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
               key={`col-header-${text}__${index}`}
               tabIndex={0}
               title={text}

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,4 +1,4 @@
-import Icon from '@cdc/core/components/ui/Icon'
+import Icon from '../../ui/Icon'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle }) => (
   <div

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -12,9 +12,10 @@ type ChartRowsProps = DataTableProps & {
   isVertical: boolean
   sortBy: { colIndex; column }
   groupBy?: string
+  hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
   const dataSeriesColumnsSorted = () => {
@@ -55,7 +56,20 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
       return cellMatrix
     } else {
       return rows.map(row => {
-        return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))
+        if (hasRowType) {
+          let rowType
+          let rowValues = []
+          dataSeriesColumns.forEach((column, j) => {
+            if (column.match(/row[_-]?type/i)) {
+              rowType = getChartCellValue(row, column, config, runtimeData)
+            } else {
+              rowValues.push(getChartCellValue(row, column, config, runtimeData))
+            }
+          })
+          return [rowType, ...rowValues]
+        } else {
+          return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))
+        }
       })
     }
   } else {

package/components/DataTable/helpers/customColumns.ts

@@ -0,0 +1,25 @@
+// removes null and excluded columns
+const customColumns = (runtimeData: Object[] | Record<string, Object>, excludeColumns: string[] = []): Object[] | Record<string, Object> => {
+  if (!Array.isArray(runtimeData)) {
+    // currently we don't support Record types
+    return runtimeData
+  } else {
+    const runtimeDataMemo = {}
+    runtimeData.forEach(row => {
+      Object.keys(row).forEach(key => {
+        if (runtimeDataMemo[key] === undefined) runtimeDataMemo[key] = null
+        if (row[key] !== null && !excludeColumns.includes(key)) runtimeDataMemo[key] = true
+      })
+    })
+    return runtimeData.map(d => {
+      const row = {}
+      Object.keys(d).forEach(key => {
+        if (key.match(/row[_-]?type/i)) row['row_type'] = d[key]
+        if (runtimeDataMemo[key] === true) row[key] = d[key]
+      })
+      return row
+    })
+  }
+}
+
+export default customColumns

package/components/DataTable/helpers/getChartCellValue.ts

@@ -24,6 +24,7 @@ const isAdditionalColumn = (column, config) => {
 }
 
 export const getChartCellValue = (row, column, config, runtimeData) => {
+  if (config.table.customTableConfig) return runtimeData[row][column]
   const rowObj = runtimeData[row]
   let cellValue // placeholder for formatting below
   let labelValue = rowObj[column] // just raw X axis string

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -1,4 +1,5 @@
 export const getDataSeriesColumns = (config, isVertical, runtimeData): string[] => {
+  if (config.table.customTableConfig) return runtimeData[0] ? Object.keys(runtimeData[0]) : []
   let tmpSeriesColumns
   if (config.visualizationType !== 'Pie') {
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll

package/components/DataTable/types/TableConfig.ts

@@ -1,17 +1,11 @@
 import { Axis } from '@cdc/core/types/Axis'
 import { Series } from '@cdc/core/types/Series'
 import { Runtime } from '@cdc/core/types/Runtime'
+import { Table } from '@cdc/core/types/Table'
 
 export type TableConfig = {
   type?: string
-  table: {
-    showVertical?: boolean
-    indexLabel: string
-    limitHeight: boolean
-    height: string | number
-    caption: string
-    download: boolean
-  }
+  table: Table
   xAxis?: Axis
   yAxis?: Axis
   boxplot?: {
@@ -46,10 +40,11 @@ export type TableConfig = {
     }
   }
   legend?: {
-    specialClasses: { key: string; label: string; value: string }[]
+    specialClasses?: { key: string; label: string; value: string }[]
+    hide?: boolean
   }
   series?: Series
-  regions?: { label: string; from: string; to: string }[]
+  regions?: { label: string; from: string; to: string; fromType: 'Fixed' | 'Previous Days'; toType: 'Fixed' | 'Last Date' }[]
   runtimeSeriesLabels?: Object
   dataFormat?: Object
   runtime: Runtime

package/components/EditorPanel/DataTableEditor.tsx

@@ -0,0 +1,133 @@
+import React 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 MultiSelect from '../MultiSelect'
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+
+interface DataTableProps {
+  config: {
+    table: Table
+    visualizationType: string
+  }
+  updateField: UpdateFieldFunc<string | boolean | string[] | number>
+  isDashboard: boolean
+  isLoadedFromUrl: boolean
+  columns: string[]
+}
+
+const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard, isLoadedFromUrl, columns }) => {
+  return (
+    <>
+      <TextField
+        value={config.table.label}
+        updateField={updateField}
+        section='table'
+        fieldName='table-label'
+        id='tableLabel'
+        label='Data Table Title'
+        placeholder='Data Table'
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Label is required for Data Table for 508 Compliance</p>
+            </Tooltip.Content>
+          </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' && (
+        <CheckBox
+          value={config.table.showVertical}
+          fieldName='showVertical'
+          label='Show Vertical Data'
+          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>This will draw the data table with vertical data instead of horizontal.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
+      <TextField value={config.table.indexLabel} section='table' fieldName='indexLabel' label='Index Column Header' updateField={updateField} />
+      <TextField
+        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>Enter a description of the data table to be read by screen readers.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label='Limit Table Height' updateField={updateField} />
+      <CheckBox
+        value={config.table.customTableConfig}
+        fieldName='customTableConfig'
+        label='Customize Table Config'
+        section='table'
+        updateField={updateField}
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+            </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>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      {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} 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 && <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} />}
+      <CheckBox value={config.table.download} fieldName='download' label='Show Download CSV Link' section='table' updateField={updateField} />
+      <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

package/components/EditorPanel/Inputs.tsx

@@ -0,0 +1,150 @@
+import { memo, useEffect, useState } from 'react'
+import { useDebounce } from 'use-debounce'
+
+export type Input = {
+  label: string
+  tooltip?: any
+  section?: any
+  placeholder?: string
+  subsection?: any
+  updateField?: Function
+  fieldName?: string
+}
+
+export type TextFieldProps = {
+  className?: string
+  value: string | number
+  type?: 'text' | 'number' | 'textarea' | 'date'
+  min?: number
+  max?: number
+  i?: number
+  id?: string
+} & Input
+
+export type CheckboxProps = {
+  value?: boolean
+  min?: number
+  i?: number
+  className?: string
+} & Input
+
+export type SelectProps = {
+  value?: string
+  options?: string[]
+  required?: boolean
+  initial?: string
+
+  // all other props
+  [x: string]: any
+} & Input
+
+const TextField = memo((props: TextFieldProps) => {
+  const { label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'text', i = null, min = null, ...attributes } = props
+  const [value, setValue] = useState(stateValue)
+  const [debouncedValue] = useDebounce(value, 500)
+
+  useEffect(() => {
+    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
+      updateField(section, subsection, fieldName, debouncedValue, i)
+    }
+  }, [debouncedValue])
+
+  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
+
+  const onChange = e => {
+    if ('number' !== type || min === null) {
+      setValue(e.target.value)
+    } else {
+      if (!e.target.value || min <= parseFloat(e.target.value)) {
+        setValue(e.target.value)
+      } else {
+        setValue(min.toString())
+      }
+    }
+  }
+
+  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
+
+  if ('textarea' === type) {
+    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
+  }
+
+  if ('number' === type) {
+    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  if ('date' === type) {
+    formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  return (
+    <label>
+      <span className='edit-label column-heading'>
+        {label}
+        {tooltip}
+      </span>
+      {formElement}
+    </label>
+  )
+})
+
+const CheckBox = memo((props: CheckboxProps) => {
+  const { label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes } = props
+
+  return (
+    <label className='checkbox column-heading'>
+      <input
+        type='checkbox'
+        name={fieldName}
+        checked={value}
+        onChange={e => {
+          updateField(section, subsection, fieldName, !value)
+        }}
+        {...attributes}
+      />
+      <span className='edit-label'>
+        {label}
+        {tooltip}
+      </span>
+    </label>
+  )
+})
+
+const Select = memo((props: SelectProps) => {
+  const { label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes } = props
+  let optionsJsx = options.map((optionName, index) => (
+    <option value={optionName} key={index}>
+      {optionName}
+    </option>
+  ))
+
+  if (initialValue) {
+    optionsJsx.unshift(
+      <option value='' key='initial'>
+        {initialValue}
+      </option>
+    )
+  }
+
+  return (
+    <label>
+      <span className='edit-label'>
+        {label}
+        {tooltip}
+      </span>
+      <select
+        className={required && !value ? 'warning' : ''}
+        name={fieldName}
+        value={value}
+        onChange={event => {
+          updateField(section, subsection, fieldName, event.target.value)
+        }}
+        {...attributes}
+      >
+        {optionsJsx}
+      </select>
+    </label>
+  )
+})
+
+export { Select, CheckBox, TextField }

package/components/Filters.jsx

@@ -89,7 +89,7 @@ export const useFilters = props => {
         filters: newFilters
       })
     }
-
+    
     // Used for setting active filter, fromHash breaks the filteredData functionality.
     if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(newFilters)
@@ -320,7 +320,7 @@ const Filters = props => {
         const tabValues = []
         const tabBarValues = []
 
-        const { active, label, filterStyle } = singleFilter
+        const { active, queuedActive, label, filterStyle } = singleFilter
 
         handleSorting(singleFilter)
 
@@ -387,7 +387,7 @@ const Filters = props => {
               {filterStyle === 'tab' && !mobileFilterStyle && <Filters.Tabs tabs={tabValues} />}
               {filterStyle === 'pill' && !mobileFilterStyle && <Filters.Pills pills={pillValues} />}
               {filterStyle === 'tab bar' && !mobileFilterStyle && <Filters.TabBar filter={singleFilter} index={outerIndex} />}
-              {(filterStyle === 'dropdown' || mobileFilterStyle) && <Filters.Dropdown filter={singleFilter} index={outerIndex} label={label} active={active} filters={values} />}
+              {(filterStyle === 'dropdown' || mobileFilterStyle) && <Filters.Dropdown filter={singleFilter} index={outerIndex} label={label} active={queuedActive || active} filters={values} />}
             </>
           </div>
         )

package/components/MediaControls.jsx

@@ -59,7 +59,7 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg, {foreignObjectRendering: true}).then(canvas => {
+      html2canvas(baseSvg, {foreignObjectRendering: true, x: -1 * (window.pageXOffset + baseSvg.getBoundingClientRect().left), y: -1 * (window.pageYOffset + baseSvg.getBoundingClientRect().top)}).then(canvas => {
         saveImageAs(canvas.toDataURL(), filename + '.png')
       })
       return