@cdc/dashboard 4.24.2 → 4.24.4

package/src/components/Row.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
@@ -11,35 +11,55 @@ import TwoColIcon from '../images/icon-col-6.svg'
 import ThreeColIcon from '../images/icon-col-4.svg'
 import FourEightColIcon from '../images/icon-col-4-8.svg'
 import EightFourColIcon from '../images/icon-col-8-4.svg'
+import ToggleIcon from '../images/icon-toggle.svg'
+import { ConfigRow } from '../types/ConfigRow'
+import { DataDesignerModal } from './DataDesignerModal'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import { iconHash } from '../helpers/iconHash'
+import _ from 'lodash'
+
+type RowMenuProps = {
+  rowIdx: number
+}
 
-const RowMenu = ({ rowIdx, row }) => {
+const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   const { config } = useContext(DashboardContext)
-  if (!config) return null
-  const { rows } = config
   const dispatch = useContext(DashboardDispatchContext)
-  const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
-  const getCurr = () => {
-    let res = [] as Object[]
-
-    for (let i = 0; i < row.length; i++) {
-      if (row[i].width) res.push(row[i].width)
-    }
-
-    return res.join('')
-  }
-
-  const [curr, setCurr] = useState(getCurr())
-
-  const setRowLayout = layout => {
-    const newRows = [...rows]
-    const r = newRows[rowIdx]
+  const rows = _.cloneDeep(config.rows)
+  const row = config.rows[rowIdx]
 
-    for (let i = 0; i < r.length; i++) {
-      r[i].width = layout[i] ?? null
+  const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
+  const curr = useMemo(() => {
+    if (row.toggle) return 'toggle'
+    return row.columns.reduce((acc, curr) => {
+      if (curr.width) {
+        acc += curr.width
+      }
+      return acc
+    }, '')
+  }, [row])
+
+  const setRowLayout = (layout: number[], toggle = undefined) => {
+    const newRows = _.cloneDeep(rows)
+    newRows[rowIdx].toggle = toggle
+    const rowColumns = newRows[rowIdx].columns
+    const columnsWithWidgets = rowColumns.filter(c => c.widget)
+
+    const totalWidgets = columnsWithWidgets.length
+    if (totalWidgets > layout.length) {
+      // don't let them change to a smaller layout and lose viz config work
+      return
+    } else {
+      // a 3 column becoming a 2 column with only a VizConfig in the second column will maintain order
+      // a 2 column becoming a 1 column with only a VizConfig in the second column will move the VizConfig to the first column
+      const mapRow = rowColumns.length > layout.length ? columnsWithWidgets : rowColumns
+      newRows[rowIdx].columns = layout.map((width, colIndex) => {
+        const col = mapRow[colIndex]
+        return col ? { ...col, width } : { width }
+      })
     }
 
     updateConfig({ ...config, rows: newRows })
-    setCurr(layout.join(''))
   }
 
   const moveRow = (dir = 'down') => {
@@ -104,6 +124,9 @@ const RowMenu = ({ rowIdx, row }) => {
     </li>,
     <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([8, 4])} key='84' title='2 Columns'>
       <EightFourColIcon />
+    </li>,
+    <li className={curr === 'toggle' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([12, 12, 12], true)} key='toggle' title='Toggle between up to three visualizations'>
+      <ToggleIcon />
     </li>
   ]
 
@@ -127,15 +150,28 @@ const RowMenu = ({ rowIdx, row }) => {
 }
 
 const Row = ({ row, idx: rowIdx, uuid }) => {
+  const { overlay } = useGlobalContext()
   return (
     <div className='builder-row' data-row-id={rowIdx}>
-      <RowMenu rowIdx={rowIdx} row={row} />
+      <RowMenu rowIdx={rowIdx} />
       <div className='column-container'>
-        {row
-          .filter(column => column.width)
-          .map((column, colIdx) => (
-            <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
-          ))}
+        <>
+          <button
+            title='Configure Data'
+            className='btn btn-configure-row'
+            onClick={() => {
+              overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
+            }}
+          >
+            {iconHash['gear']}
+          </button>
+
+          {row.columns
+            .filter(column => column.width)
+            .map((column, colIdx) => (
+              <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
+            ))}
+        </>
       </div>
     </div>
   )

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,36 @@
+import { useContext } from 'react'
+import { DashboardDispatchContext } from '../../DashboardContext'
+import { ConfigRow } from '../../types/ConfigRow'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { getIcon } from '../../helpers/iconHash'
+import './toggle-style.css'
+import _ from 'lodash'
+
+type ToggleProps = {
+  active: number
+  row: ConfigRow
+  visualizations: Record<string, Visualization>
+  setToggled: (colIndex: number) => void
+}
+const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled }) => {
+  const selectItem = (colIndex, e = null) => {
+    if (e?.key && e.key !== 'Enter') return
+    setToggled(colIndex)
+  }
+  return (
+    <div className='toggle-component'>
+      {row.columns.map((col, colIndex) => {
+        if (!col.widget) return null
+        const type = visualizations[col.widget].type
+        const selected = colIndex === active
+        return (
+          <div role='radio' className={selected ? 'selected' : ''} key={colIndex} onClick={() => selectItem(colIndex)} onKeyUp={e => selectItem(colIndex, e)} aria-checked={selected} tabIndex={0} aria-label={`Toggle ${type}`}>
+            {getIcon(visualizations[col.widget])} <span>{_.capitalize(type)}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Toggle

package/src/components/Toggle/index.tsx

@@ -0,0 +1 @@
+export { default } from './Toggle'

package/src/components/Toggle/toggle-style.css

@@ -0,0 +1,34 @@
+.cdc-open-viz-module {
+  --border: 1px solid var(--lightGray);
+  .toggle-component {
+    display: flex;
+    justify-content: right;
+    width: 100%;
+    margin-bottom: 15px;
+    :first-child:is(div) {
+      border: var(--border);
+      border-radius: 5px 0 0 5px;
+    }
+    :last-child:is(div) {
+      border: var(--border);
+      border-radius: 0 5px 5px 0;
+    }
+    :is(div) {
+      border-top: var(--border);
+      border-bottom: var(--border);
+      padding: 7px 15px;
+      display: inline;
+      float: right;
+      cursor: pointer;
+      &.selected {
+        background-color: var(--primary);
+        color: white;
+      }
+      background-color: var(--white);
+      color: var(--primary);
+      :is(svg) {
+        height: 25px;
+      }
+    }
+  }
+}

package/src/components/VisualizationRow.tsx

@@ -0,0 +1,174 @@
+import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
+import React, { MouseEventHandler, useContext, useMemo } from 'react'
+import Toggle from './Toggle'
+import _ from 'lodash'
+import { DashboardConfig } from '../types/DashboardConfig'
+import { ConfigRow } from '../types/ConfigRow'
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import CdcMap from '@cdc/map'
+import CdcChart from '@cdc/chart'
+import CdcDataBite from '@cdc/data-bite'
+import CdcWaffleChart from '@cdc/waffle-chart'
+import CdcMarkupInclude from '@cdc/markup-include'
+import CdcFilteredText from '@cdc/filtered-text'
+import Filters, { APIFilterDropdowns } from './Filters'
+import { FilterBehavior } from './Header/Header'
+import { DashboardContext } from '../DashboardContext'
+import { ViewPort } from '@cdc/core/types/ViewPort'
+import { getVizConfig } from '../helpers/getVizConfig'
+
+type VizRowProps = {
+  filteredDataOverride?: Object[]
+  row: ConfigRow
+  rowIndex: number
+  setSharedFilter: Function
+  updateChildConfig: Function
+  applyFilters: MouseEventHandler<HTMLButtonElement>
+  apiFilterDropdowns: APIFilterDropdowns
+  handleOnChange: Function
+  currentViewport: ViewPort
+}
+
+const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, rowIndex: index, setSharedFilter, updateChildConfig, applyFilters, apiFilterDropdowns, handleOnChange, currentViewport }) => {
+  const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
+  const [show, setShow] = React.useState(row.columns.map((col, i) => i === 0))
+  const setToggled = (colIndex: number) => {
+    setShow(show.map((_, i) => i === colIndex))
+  }
+  const inNoDataState = useMemo(() => {
+    const vals = Object.values(rawData)
+    if (!vals.length) return true
+    return vals.some(val => val === undefined)
+  }, [rawData])
+  const GoButton = ({ autoLoad }: { autoLoad?: boolean }) => {
+    if (config.filterBehavior === FilterBehavior.Apply && !autoLoad) {
+      return <button onClick={applyFilters}>GO!</button>
+    }
+    return null
+  }
+  return (
+    <div className={`dashboard-row ${row.equalHeight ? 'equal-height' : ''} ${row.toggle ? 'toggle' : ''}`} key={`row__${index}`}>
+      {row.toggle && <Toggle row={row} visualizations={config.visualizations} active={show.indexOf(true)} setToggled={setToggled} />}
+      {row.columns.map((col, colIndex) => {
+        if (col.width) {
+          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`dashboard-col dashboard-col-${col.width}`}></div>
+
+          const visualizationConfig = getVizConfig(col.widget, index, config, rawData, dashboardFilteredData)
+          if (filteredDataOverride) {
+            visualizationConfig.data = filteredDataOverride
+            if (visualizationConfig.formattedData) {
+              visualizationConfig.formattedData = filteredDataOverride
+            }
+          }
+
+          const setsSharedFilter = config.dashboard.sharedFilters && config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0
+          const setSharedFilterValue = setsSharedFilter ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active : undefined
+          const tableLink = (
+            <a href={`#data-table-${visualizationConfig.dataKey}`} className='margin-left-href'>
+              {visualizationConfig.dataKey} (Go to Table)
+            </a>
+          )
+          const hideFilter = visualizationConfig.autoLoad && inNoDataState
+
+          const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
+          return (
+            <React.Fragment key={`vis__${index}__${colIndex}`}>
+              <div className={`dashboard-col dashboard-col-${col.width} ${!shouldShow ? 'hidden-toggle' : ''}`}>
+                {visualizationConfig.type === 'chart' && (
+                  <CdcChart
+                    key={col.widget}
+                    config={visualizationConfig}
+                    dashboardConfig={config}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+                    isDashboard={true}
+                    link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                    configUrl={undefined}
+                    setEditing={undefined}
+                    hostname={undefined}
+                    setSharedFilterValue={undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'map' && (
+                  <CdcMap
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    showLoader={false}
+                    setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+                    setSharedFilterValue={setSharedFilterValue}
+                    isDashboard={true}
+                    link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'data-bite' && (
+                  <CdcDataBite
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                  />
+                )}
+                {visualizationConfig.type === 'waffle-chart' && (
+                  <CdcWaffleChart
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                    configUrl={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'markup-include' && (
+                  <CdcMarkupInclude
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                    configUrl={undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'filtered-text' && (
+                  <CdcFilteredText
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                    configUrl={undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'filter-dropdowns' && !hideFilter && (
+                  <React.Fragment key={col.widget}>
+                    <Filters hide={visualizationConfig.hide} filters={config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
+                    <GoButton autoLoad={visualizationConfig.autoLoad} />
+                  </React.Fragment>
+                )}
+                {visualizationConfig.type === 'table' && <DataTableStandAlone key={col.widget} visualizationKey={col.widget} config={visualizationConfig} viewport={currentViewport} />}
+              </div>
+            </React.Fragment>
+          )
+        }
+        return <React.Fragment key={`vis__${index}__${colIndex}`}></React.Fragment>
+      })}
+    </div>
+  )
+}
+
+export default VisualizationRow

package/src/components/VisualizationsPanel.tsx

@@ -2,11 +2,12 @@ import React from 'react'
 import type { Visualization } from '@cdc/core/types/Visualization'
 import Widget from './Widget'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
+import { Table } from '@cdc/core/types/Table'
 
 const addVisualization = (type, subType) => {
-  let modalWillOpen = type !== 'markup-include'
-  let newVisualizationConfig: Partial<Visualization> = {
-    newViz: true,
+  const modalWillOpen = type !== 'markup-include'
+  const newVisualizationConfig: Partial<Visualization> = {
+    newViz: type !== 'table',
     openModal: modalWillOpen,
     uid: type + Date.now(),
     type
@@ -23,6 +24,13 @@ const addVisualization = (type, subType) => {
     case 'data-bite' || 'waffle-chart' || 'markup-include' || 'filtered-text':
       newVisualizationConfig.visualizationType = type
       break
+    case 'table':
+      const tableConfig: Table = { label: 'Data Table', show: true, showDownloadUrl: false, showVertical: true, expanded: true }
+      newVisualizationConfig.table = tableConfig
+      newVisualizationConfig.columns = {}
+      newVisualizationConfig.dataFormat = {}
+      newVisualizationConfig.visualizationType = type
+      break
     default:
       newVisualizationConfig.visualizationType = type
       break
@@ -39,6 +47,7 @@ const VisualizationsPanel = ({ loadConfig, config }) => (
       <Widget addVisualization={() => addVisualization('chart', 'Bar')} type='Bar' />
       <Widget addVisualization={() => addVisualization('chart', 'Line')} type='Line' />
       <Widget addVisualization={() => addVisualization('chart', 'Pie')} type='Pie' />
+      <Widget addVisualization={() => addVisualization('chart', 'Sankey')} type='Sankey' />
     </div>
     <span className='subheading-3'>Map</span>
     <div className='drag-grid'>
@@ -53,6 +62,7 @@ const VisualizationsPanel = ({ loadConfig, config }) => (
       <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
       <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
       <Widget addVisualization={() => addVisualization('filter-dropdowns', '')} type='filter-dropdowns' />
+      <Widget addVisualization={() => addVisualization('table', '')} type='table' />
     </div>
     <span className='subheading-3'>Advanced</span>
     <AdvancedEditor loadConfig={loadConfig} state={config} convertStateToConfig={undefined} />

package/src/components/Widget.tsx

@@ -1,34 +1,16 @@
-import React, { useContext, useRef, useEffect } from 'react'
+import { useContext } from 'react'
 import { useDrag } from 'react-dnd'
 
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
-import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-
-import DataDesigner from '@cdc/core/components/managers/DataDesigner'
 import Icon from '@cdc/core/components/ui/Icon'
 import Modal from '@cdc/core/components/ui/Modal'
 import { Visualization } from '@cdc/core/types/Visualization'
-
-const iconHash = {
-  'data-bite': <Icon display='databite' base />,
-  Bar: <Icon display='chartBar' base />,
-  'Spark Line': <Icon display='chartLine' />,
-  'waffle-chart': <Icon display='grid' base />,
-  'markup-include': <Icon display='code' base />,
-  Line: <Icon display='chartLine' base />,
-  Pie: <Icon display='chartPie' base />,
-  us: <Icon display='mapUsa' base />,
-  'us-county': <Icon display='mapUsa' base />,
-  world: <Icon display='mapWorld' base />,
-  'single-state': <Icon display='mapAl' base />,
-  gear: <Icon display='gear' base />,
-  tools: <Icon display='tools' base />,
-  'filtered-text': <Icon display='filtered-text' base />,
-  'filter-dropdowns': <Icon display='filter-dropdowns' base />
-}
+import { iconHash } from '../helpers/iconHash'
+import _ from 'lodash'
+import { DataDesignerModal } from './DataDesignerModal'
 
 const labelHash = {
   'data-bite': 'Data Bite',
@@ -43,7 +25,9 @@ const labelHash = {
   world: 'World',
   'single-state': 'U.S. State',
   'filtered-text': 'Filtered Text',
-  'filter-dropdowns': 'Filter Dropdowns'
+  'filter-dropdowns': 'Filter Dropdowns',
+  Sankey: 'Sankey Chart',
+  table: 'Table'
 }
 
 type WidgetData = Visualization & { rowIdx: number; colIdx: number }
@@ -56,13 +40,10 @@ type WidgetProps = {
 const Widget = ({ data, addVisualization, type }: WidgetProps) => {
   const { overlay } = useGlobalContext()
   const { config } = useContext(DashboardContext)
-  if (!config) return null
   const rows = config.rows
   const visualizations = config.visualizations
   const dispatch = useContext(DashboardDispatchContext)
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
-  const dataRef = useRef<WidgetData>()
-  dataRef.current = data
 
   const transform = new DataTransform()
 
@@ -74,14 +55,14 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     const { rowIdx, colIdx } = result
 
     if (undefined !== data?.rowIdx) {
-      rows[data.rowIdx][data.colIdx].widget = null // Wipe from old position
+      rows[data.rowIdx].columns[data.colIdx].widget = null // Wipe from old position
 
-      rows[rowIdx][colIdx].widget = data.uid // Add to new row and col
+      rows[rowIdx].columns[colIdx].widget = data.uid // Add to new row and col
     } else if (!!addVisualization) {
       // Item does not exist, instantiate a new one
       const newViz = addVisualization()
       visualizations[newViz.uid] = newViz // Add to widgets collection
-      rows[rowIdx][colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
+      rows[rowIdx].columns[colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
     }
 
     updateConfig({ ...config, rows, visualizations })
@@ -100,7 +81,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
 
   const deleteWidget = () => {
     if (!data) return
-    rows[data.rowIdx][data.colIdx].widget = null
+    rows[data.rowIdx].columns[data.colIdx].widget = null
 
     delete visualizations[data.uid]
 
@@ -122,78 +103,6 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     updateConfig({ ...config, visualizations })
   }
 
-  const changeDataset = (uid, value) => {
-    visualizations[uid].dataDescription = {}
-    visualizations[uid].formattedData = undefined
-
-    visualizations[uid].dataKey = value
-
-    updateConfig({ ...config, visualizations })
-  }
-
-  const updateDescriptionProp = async (visualizationKey, datasetKey, key, value) => {
-    let dataDescription = { ...(dataRef.current?.dataDescription as Object), [key]: value }
-
-    let newData
-    if (!config.datasets[datasetKey].data && config.datasets[datasetKey].dataUrl) {
-      newData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
-      newData = transform.autoStandardize(newData)
-    } else {
-      newData = config.datasets[datasetKey].data
-    }
-
-    let formattedData = transform.developerStandardize(newData, dataDescription)
-
-    let newVisualizations = { ...config.visualizations }
-    newVisualizations[visualizationKey] = { ...newVisualizations[visualizationKey], data: newData, dataDescription, formattedData }
-
-    updateConfig({ ...config, visualizations: newVisualizations })
-
-    overlay?.actions.openOverlay(dataDesignerModal(newVisualizations[visualizationKey]))
-  }
-
-  const dataDesignerModal = (configureData, dataKeyOverride?) => {
-    const dataKey = !dataKeyOverride && dataKeyOverride !== '' ? data?.dataKey || dataRef.current?.dataKey : dataKeyOverride
-
-    overlay?.actions.toggleOverlay()
-
-    return (
-      <Modal>
-        <Modal.Content>
-          <div className='dataset-selector-container'>
-            Select a dataset:&nbsp;
-            <select
-              className='dataset-selector'
-              defaultValue={dataKey}
-              onChange={e => {
-                changeDataset(data?.uid, e.target.value)
-                overlay?.actions.openOverlay(dataDesignerModal(data, e.target.value || ''))
-              }}
-            >
-              <option value=''>Select a dataset</option>
-              {config.datasets && Object.keys(config.datasets).map(datasetKey => <option key={datasetKey}>{datasetKey}</option>)}
-            </select>
-          </div>
-          {dataKey && (
-            <DataDesigner
-              {...{
-                configureData,
-                visualizationKey: data?.uid,
-                dataKey: dataKey,
-                updateDescriptionProp
-              }}
-            />
-          )}
-          {configureData.formattedData && (
-            <button style={{ margin: '1em' }} className='cove-button' onClick={() => overlay?.actions.toggleOverlay()}>
-              Continue
-            </button>
-          )}
-        </Modal.Content>
-      </Modal>
-    )
-  }
-
   const FilterHideModal = configureData => {
     const currentVizKey = Object.keys(visualizations).find(vizKey => vizKey === configureData.uid) || ''
     const currentViz = config.visualizations && config.visualizations[currentVizKey]
@@ -224,8 +133,6 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
       }
     }
 
-    overlay?.actions.toggleOverlay()
-
     const showAutoLoadCheckbox = !vizWithAutoLoad || vizWithAutoLoad === currentVizKey
     return (
       <Modal>
@@ -259,29 +166,24 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     )
   }
 
-  useEffect(() => {
-    if (data?.openModal) {
-      overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(dataRef.current) : dataDesignerModal(dataRef.current))
-
-      visualizations[data.uid].openModal = false
-
-      updateConfig({ ...config, visualizations })
-    }
-  }, [data?.openModal])
-
-  let isConfigurationReady = false;
-  if(type === 'markup-include' || type === 'filter-dropdowns'){
-    isConfigurationReady = true;
-  } else if(data && data.formattedData) {
-    isConfigurationReady = true;
-  } else if(data && data.dataKey && data.dataDescription && config.datasets[data.dataKey]){
-    let formattedDataAttempt = transform.autoStandardize(config.datasets[data.dataKey].data);
-    formattedDataAttempt = transform.developerStandardize(formattedDataAttempt, data.dataDescription);
-    if(formattedDataAttempt){
-      isConfigurationReady = true;
+  let isConfigurationReady = false
+  const dataConfiguredForRow = !!rows[data?.rowIdx]?.dataKey
+  if (dataConfiguredForRow || ['markup-include', 'filter-dropdowns'].includes(type)) {
+    isConfigurationReady = true
+  } else {
+    if (data?.formattedData) {
+      isConfigurationReady = true
+    } else if (data?.dataKey && data?.dataDescription && config.datasets[data.dataKey]) {
+      const formattedDataAttempt = transform.autoStandardize(config.datasets[data.dataKey].data)
+      const canFormatData = !!transform.developerStandardize(formattedDataAttempt, data.dataDescription)
+      if (canFormatData) {
+        isConfigurationReady = true
+      }
     }
   }
 
+  const needsDataConfiguration = !dataConfiguredForRow && type !== 'markup-include'
+
   return (
     <>
       <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
@@ -294,12 +196,12 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
                   {iconHash['tools']}
                 </button>
               )}
-              {type !== 'markup-include' && (
+              {needsDataConfiguration && (
                 <button
                   title='Configure Data'
                   className='btn btn-configure'
                   onClick={() => {
-                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(data) : dataDesignerModal(data))
+                    overlay?.actions.openOverlay(type === 'filter-dropdowns' ? FilterHideModal(data) : <DataDesignerModal rowIndex={data.rowIdx} vizKey={data.uid} />)
                   }}
                 >
                   {iconHash['gear']}