@cdc/core 4.25.5-1 → 4.25.6-1

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/VizFilterEditor/NestedDropdownEditor.tsx

@@ -267,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

@@ -19,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))))
@@ -171,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
@@ -196,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>
@@ -240,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'
@@ -278,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
@@ -291,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{' '}

package/components/Filters/Filters.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo, useRef, useId } from 'react'
 import _ from 'lodash'
+import parse from 'html-react-parser'
 
 // CDC
 import Button from '../elements/Button'
@@ -13,8 +14,6 @@ import { getNestedOptions } from './helpers/getNestedOptions'
 import { getWrappingStatuses } from './helpers/filterWrapping'
 import { handleSorting } from './helpers/handleSorting'
 import { getChangedFilters } from './helpers/getChangedFilters'
-import { getNewRuntime } from './helpers/getNewRuntime'
-import { filterVizData } from '../../helpers/filterVizData'
 import { getQueryParams, updateQueryString } from '../../helpers/queryStringUtils'
 import { applyQueuedActive } from './helpers/applyQueuedActive'
 import Tabs from './components/Tabs'
@@ -40,25 +39,19 @@ const BUTTON_TEXT = {
 }
 
 type FilterProps = {
-  filteredData: Object[]
-  dimensions: DimensionsType
+  dimensions?: DimensionsType
   config: Visualization
-  // function for updating the runtime filters
-  setFilteredData: Function
-  // updating function for setting fitlerBehavior
-  setConfig: Function
+  setFilters: Function
   standaloneMap?: boolean
   excludedData?: Object[]
-  getUniqueValues: Function
+  getUniqueValues?: Function
 }
 
 const Filters: React.FC<FilterProps> = ({
   config: visualizationConfig,
-  filteredData,
   dimensions,
   standaloneMap,
-  setConfig,
-  setFilteredData,
+  setFilters,
   excludedData,
   getUniqueValues
 }) => {
@@ -82,7 +75,7 @@ const Filters: React.FC<FilterProps> = ({
   // end of Handle Wrapping Filters
 
   const initialActiveFilters = useMemo(() => {
-    if (!filteredData) return []
+    //if (!filteredData) return []
     return filters.map(filter => filter.active)
   }, [])
 
@@ -92,36 +85,10 @@ const Filters: React.FC<FilterProps> = ({
   }, [filters])
 
   const changeFilterActive = (index, value) => {
-    let newFilters = standaloneMap ? [...filteredData] : [...visualizationConfig.filters]
+    if (filterBehavior === 'Apply Button') setShowApplyButton(true)
 
-    newFilters = getChangedFilters(newFilters, index, value, visualizationConfig.filterBehavior)
-    if (visualizationConfig.filterBehavior === 'Apply Button') setShowApplyButton(true)
-
-    if (!visualizationConfig.dynamicSeries) {
-      const _newFilters = addValuesToFilters(newFilters, excludedData)
-      setConfig({
-        ...visualizationConfig,
-        filters: _newFilters
-      })
-    }
-
-    if (visualizationConfig.filterBehavior === 'Filter Change') {
-      if (standaloneMap) {
-        setFilteredData(newFilters)
-      } else {
-        const newFilteredData = filterVizData(newFilters, excludedData)
-        setFilteredData(newFilteredData)
-
-        if (visualizationConfig.dynamicSeries) {
-          const runtime = getNewRuntime(visualizationConfig, newFilteredData)
-          setConfig({
-            ...visualizationConfig,
-            filters: newFilters,
-            runtime
-          })
-        }
-      }
-    }
+    const newFilters = getChangedFilters([...filters], index, value, filterBehavior)
+    setFilters(newFilters)
   }
 
   const handleApplyButton = newFilters => {
@@ -140,19 +107,13 @@ const Filters: React.FC<FilterProps> = ({
       updateQueryString(queryParams)
     }
 
-    setConfig({ ...visualizationConfig, filters: newFilters })
-
-    if (standaloneMap) {
-      setFilteredData(newFilters, excludedData)
-    } else {
-      setFilteredData(filterVizData(newFilters, excludedData))
-    }
+    setFilters(newFilters)
 
     setShowApplyButton(false)
   }
 
   const handleReset = e => {
-    let newFilters = [...visualizationConfig.filters]
+    let newFilters = [...filters]
     e.preventDefault()
 
     // reset to first item in values array.
@@ -175,18 +136,12 @@ const Filters: React.FC<FilterProps> = ({
       updateQueryString(queryParams)
     }
 
-    setConfig({ ...visualizationConfig, filters: newFilters })
-
-    if (standaloneMap) {
-      setFilteredData(newFilters, excludedData)
-    } else {
-      setFilteredData(filterVizData(newFilters, excludedData))
-    }
+    setFilters(newFilters)
   }
 
   const mobileFilterStyle = useMemo(() => {
-    if (!dimensions) false
-    const [width] = dimensions || []
+    if (!dimensions) return false
+    const [width] = dimensions
     const isMobile = Number(width) < 768
     const isTabSimple = filters?.some(filter => filter.filterStyle === VIZ_FILTER_STYLE.tabSimple)
 
@@ -195,13 +150,12 @@ const Filters: React.FC<FilterProps> = ({
 
   const vizFiltersWithValues = useMemo(() => {
     // Here charts is using config.filters where maps is using a runtime value
-    let vizfilters = standaloneMap ? filteredData : filters
-    if (!vizfilters) return []
-    if (vizfilters.fromHash) delete vizfilters.fromHash // support for Maps config
-    return addValuesToFilters(vizfilters as VizFilter[], visualizationConfig.data)
-  }, [filters, filteredData])
+    if (!filters) return []
+    if (filters.fromHash) delete filters.fromHash // support for Maps config
+    return addValuesToFilters(filters as VizFilter[], visualizationConfig.data)
+  }, [filters])
 
-  if (visualizationConfig?.filters?.length === 0) return
+  if (visualizationConfig?.filters?.length === 0) return <></>
 
   const getClasses = () => {
     const { visualizationType, legend } = visualizationConfig || {}
@@ -220,13 +174,14 @@ const Filters: React.FC<FilterProps> = ({
   return (
     <section className={getClasses().join(' ')}>
       {visualizationConfig.filterIntro && (
-        <p className='filters-section__intro-text mb-3'>{visualizationConfig.filterIntro}</p>
+        <p className='filters-section__intro-text mb-3'>{parse(visualizationConfig.filterIntro)}</p>
       )}
       <div className='d-flex flex-wrap w-100 filters-section__wrapper align-items-end'>
         <>
           {vizFiltersWithValues.map((singleFilter: VizFilter, outerIndex) => {
             if (singleFilter.showDropdown === false) return
             const { label, filterStyle, columnName } = singleFilter as VizFilter
+            const [nestedActiveGroup, nestedActiveSubGroup] = getNestedGroup(singleFilter)
 
             handleSorting(singleFilter)
 
@@ -239,7 +194,6 @@ const Filters: React.FC<FilterProps> = ({
             const { isDropdown } = wrappingFilters[columnName] || {}
             const showDefaultDropdown =
               ((filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt) || isDropdown
-            const [nestedActiveGroup, nestedActiveSubGroup] = getNestedGroup(singleFilter)
             const hideLabelMargin = singleFilter.filterStyle === 'tab-simple' && !showDefaultDropdown
             return (
               <div
@@ -249,7 +203,7 @@ const Filters: React.FC<FilterProps> = ({
               >
                 {label && (
                   <label
-                    className={`font-weight-bold mb-${hideLabelMargin ? '0' : '2'}`}
+                    className={`font-weight-bold fw-bold mb-${hideLabelMargin ? '0' : '2'}`}
                     htmlFor={`filter-${outerIndex}`}
                   >
                     {label}
@@ -284,7 +238,11 @@ const Filters: React.FC<FilterProps> = ({
                   <MultiSelect
                     options={singleFilter.values.map(v => ({ value: v, label: v }))}
                     fieldName={outerIndex}
-                    updateField={(_section, _subSection, fieldName, value) => changeFilterActive(fieldName, value)}
+                    updateField={(_section, _subSection, fieldName, value) => {
+                      const defaultSelection = singleFilter.defaultValue || [singleFilter.values[0]]
+                      const selection = value?.length ? value : defaultSelection
+                      changeFilterActive(fieldName, selection)
+                    }}
                     selected={singleFilter.active as string[]}
                     limit={(singleFilter as MultiSelectFilter).selectLimit || 5}
                   />

package/components/Filters/components/Dropdown.tsx

@@ -18,7 +18,7 @@ const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, c
       name={label}
       aria-label={`Filter by ${label}`}
       className={`cove-form-select ${DROPDOWN_STYLES}`}
-      style={{ backgroundColor: 'white !important' }}
+      style={{ backgroundColor: 'white' }}
       data-index='0'
       value={queuedActive || active}
       onChange={e => {

package/components/Footnotes/Footnotes.tsx

@@ -11,7 +11,7 @@ const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
       <ul className='cove-footnotes'>
         {footnotes.map((note, i) => {
           return (
-            <li key={note.symbol + i} className='mb-1'>
+            <li key={`${note.symbol || 'footnote-'}${i}`} className='mb-1'>
               {note.symbol && <span className='me-1'>{note.symbol}</span>}
               {note.text}
             </li>

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -1,45 +1,20 @@
-import EditorWrapper from '../EditorWrapper'
 import Footnotes from './Footnotes'
-import FootnotesEditor from '../EditorPanel/FootnotesEditor'
-import { ViewPort } from '../../types/ViewPort'
-import FootnotesConfig, { Footnote } from '../../types/Footnotes'
+import FootnotesConfig from '../../types/Footnotes'
 import _ from 'lodash'
 import { useMemo } from 'react'
-import { updateFieldFactory } from '../../helpers/updateFieldFactory'
+import { filterVizData } from '../../helpers/filterVizData'
+import { VizFilter } from '../../types/VizFilter'
 
 type StandAloneProps = {
-  isEditor?: boolean
-  visualizationKey: string
   config: FootnotesConfig
-  updateConfig?: (config: FootnotesConfig) => void
-  viewport?: ViewPort
+  filters?: VizFilter[]
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({
-  visualizationKey,
-  config,
-  viewport,
-  isEditor,
-  updateConfig
-}) => {
-  const updateField = updateFieldFactory<Footnote[]>(config, updateConfig)
-  if (isEditor)
-    return (
-      <EditorWrapper
-        component={FootnotesStandAlone}
-        visualizationKey={visualizationKey}
-        visualizationConfig={config}
-        updateConfig={updateConfig}
-        type={'Footnotes'}
-        viewport={viewport}
-      >
-        <FootnotesEditor key={visualizationKey} config={config} updateField={updateField} />
-      </EditorWrapper>
-    )
-
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters }) => {
+  if (!config) return null
   // get the api footnotes from the config
   const apiFootnotes = useMemo(() => {
-    const configData = config.formattedData || config.data
+    const configData = filterVizData(filters, config.data)
     if (configData && config.dataKey && config.dynamicFootnotes) {
       const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
       const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
@@ -47,7 +22,7 @@ const FootnotesStandAlone: React.FC<StandAloneProps> = ({
       return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))
     }
     return []
-  }, [config.dynamicFootnotes, config.formattedData, config.data])
+  }, [config.dynamicFootnotes, config.data, filters])
 
   // get static footnotes from the config.footnotes
   const staticFootnotes = config.staticFootnotes || []

package/components/Layout/components/Visualization/index.tsx

@@ -2,6 +2,7 @@
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import React, { forwardRef } from 'react'
 import { Config as DataBiteConfig } from '@cdc/data-bite/src/types/Config'
+import { Config as DataTableConfig } from '@cdc/data-table/src/types/Config'
 import './visualizations.scss'
 import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
@@ -10,7 +11,7 @@ import { MapConfig } from '@cdc/map/src/types/MapConfig'
 
 type VisualizationWrapper = {
   children: React.ReactNode
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters | MapConfig
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters | MapConfig | DataTableConfig
   currentViewport?: string
   imageId?: string
   isEditor: boolean

package/components/Legend/Legend.Gradient.tsx

@@ -98,7 +98,8 @@ const LegendGradient = ({
 
   if (style === 'gradient') {
     return (
-      <svg className={'w-100 overflow-visible'} height={newHeight}>
+      // TODO: figure out why bootstrap 'overflow: visible' is not working consistently
+      <svg className={'w-100 overflow-visible'} height={newHeight} style={{ overflow: 'visible' }} width={width}>
         {/* background border*/}
         <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill={BORDER_COLOR} />
         {/* Define the gradient */}
@@ -161,7 +162,7 @@ const LegendGradient = ({
                     x2={xPosition + separatorSize / 2}
                     y1={-3}
                     y2={boxHeight + MARGIN + 3}
-                    stroke={'var(--colors-gray-cool-40'}
+                    stroke={'var(--colors-gray-cool-40,#8d9297)'}
                     strokeWidth={1}
                     strokeDasharray='5,3'
                     strokeDashoffset={1}

package/components/MultiSelect/MultiSelect.tsx

@@ -36,9 +36,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
   tooltip,
   loading
 }) => {
-  const preselectedItems = useMemo(() => options.filter(opt => selected.includes(opt.value)).slice(0, limit), [options])
-  const [selectedItems, setSelectedItems] = useState<Option[]>()
-  const items = selectedItems || preselectedItems
+  const items = useMemo(() => options.filter(opt => selected.includes(opt.value)).slice(0, limit), [options])
   const [expanded, setExpanded] = useState(false)
   const multiSelectRef = useRef(null)
 
@@ -68,14 +66,12 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
     if (e && e.type === 'keyup' && e.key !== 'Enter') return
     if (limit && items?.length >= limit) return
     const newItems = [...items, option]
-    setSelectedItems(newItems)
     update(newItems)
   }
 
   const handleItemRemove = (option: Option, e = null) => {
     if (e && e.type === 'keyup' && e.key !== 'Enter') return
     const newItems = items.filter(item => item.value !== option.value)
-    setSelectedItems(newItems)
     update(newItems)
   }
 
@@ -99,6 +95,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
             items.map(item => (
               <div key={item.value} aria-labelledby={label ? multiID + label : undefined}>
                 {item.label}
+
                 <button
                   aria-label='Remove'
                   onClick={e => {
@@ -114,7 +111,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
               </div>
             ))
           ) : (
-            <span className='pl-1 pt-1'>{loading ? 'Loading...' : '- Select -'}</span>
+            <span className='ps-1 pt-1'>{loading ? 'Loading...' : '- Select -'}</span>
           )}
           <button
             aria-label={expanded ? 'Collapse' : 'Expand'}