@cdc/map 2.6.3 → 4.22.10-alpha.1

package/src/components/EditorPanel.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, memo } from 'react';
 import {
 	Accordion,
 	AccordionItem,
@@ -10,30 +10,28 @@ import ReactTooltip from 'react-tooltip';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { useDebounce } from 'use-debounce';
 
+import colorPalettes from '@cdc/core/data/colorPalettes';
+import { supportedStatesFipsCodes } from '../data/supported-geos';
+import { useColorPalette } from '../hooks/useColorPalette';
+
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 import Waiting from '@cdc/core/components/Waiting';
 
-import MapIcon from '../images/map-folded.svg';
-import UsaGraphic from '@cdc/core/assets/usa-graphic.svg';
-import WorldGraphic from '@cdc/core/assets/world-graphic.svg';
-import AlabamaGraphic from '@cdc/core/assets/alabama-graphic.svg';
-import colorPalettes from '../data/color-palettes';
+import UsaGraphic from '@cdc/core/assets/icon-map-usa.svg';
+import UsaRegionGraphic from '@cdc/core/assets/usa-region-graphic.svg';
+import WorldGraphic from '@cdc/core/assets/icon-map-world.svg';
+import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg';
 import worldDefaultConfig from '../../examples/default-world.json';
 import usaDefaultConfig from '../../examples/default-usa.json';
 import countyDefaultConfig from '../../examples/default-county.json';
-import QuestionIcon from '@cdc/core/assets/question-circle.svg';
 
-import { supportedStatesFipsCodes } from '../data/supported-geos';
+import InputToggle from '@cdc/core/components/inputs/InputToggle';
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
 
-const ReactTags = require('react-tag-autocomplete'); // Future: Lazy
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor';
 
-const Helper = ({ text }) => {
-	return (
-		<span className='tooltip helper' data-tip={text}>
-			<QuestionIcon />
-		</span>
-	);
-};
+const ReactTags = require('react-tag-autocomplete'); // Future: Lazy
 
 const TextField = ({
 	label,
@@ -43,7 +41,7 @@ const TextField = ({
 	updateField,
 	value: stateValue,
 	type = 'input',
-	helper = null,
+	tooltip,
 	...attributes
 }) => {
 	const [value, setValue] = useState(stateValue);
@@ -73,7 +71,7 @@ const TextField = ({
 	return (
 		<label>
 			<span className='edit-label column-heading'>
-				{label} {helper && <Helper text={helper} />}
+				{label}{tooltip}
 			</span>
 			{formElement}
 		</label>
@@ -107,7 +105,7 @@ const EditorPanel = (props) => {
 
 	const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0]);
 
-	const [editorCatOrder, setEditorCatOrder] = useState(state.legend.categoryValuesOrder || []);
+	const {filteredPallets,filteredQualitative,isPaletteReversed,paletteName} = useColorPalette(colorPalettes,state);
 
 	const headerColors = [
 		'theme-blue',
@@ -124,14 +122,12 @@ const EditorPanel = (props) => {
 	];
 
 	const categoryMove = (idx1, idx2) => {
-		let categoryValuesOrder = [...editorCatOrder];
+		let categoryValuesOrder = [...state.legend.categoryValuesOrder];
 
 		let [movedItem] = categoryValuesOrder.splice(idx1, 1);
 
 		categoryValuesOrder.splice(idx2, 0, movedItem);
 
-		setEditorCatOrder(categoryValuesOrder);
-
 		setState({
 			...state,
 			legend: {
@@ -162,7 +158,7 @@ const EditorPanel = (props) => {
 	};
 
 
-	const DynamicDesc = ({ label, fieldName, value: stateValue, type = 'input', helper = null, ...attributes }) => {
+	const DynamicDesc = ({ label, fieldName, value: stateValue, type = 'input', ...attributes }) => {
 		const [value, setValue] = useState(stateValue);
 
 		const [debouncedValue] = useDebounce(value, 500);
@@ -182,7 +178,75 @@ const EditorPanel = (props) => {
 	};
 
 	const handleEditorChanges = async (property, value) => {
+		
 		switch (property) {
+
+			// change these to be more generic.
+			// updateVisualPropertyValue
+			// updateGeneralPropertyValue, etc.
+			case 'showBubbleZeros':
+				setState({
+					...state,
+					visual: {
+						...state.visual,
+						showBubbleZeros: value
+					}
+				})
+				break;
+
+			case 'showEqualNumber':
+				setState({
+					...state,
+					general: {
+						...state.general,
+						equalNumberOptIn: value
+					}
+				})
+				break;
+
+			case 'hideGeoColumnInTooltip':
+				setState({
+					...state,
+					general: {
+						...state.general,
+						[property]: value
+					}
+				})
+				break;
+
+			case 'toggleExtraBubbleBorder':
+				setState({
+					...state,
+					visual: {
+						...state.visual,
+						extraBubbleBorder: value
+					}
+				})
+				break;
+			case 'allowMapZoom':
+				setState({
+					...state,
+					general: {
+						...state.general,
+						allowMapZoom: value
+					}
+				})
+				break;
+			case 'hideGeoColumnInTooltip':
+				setState({
+					...state,
+					[property]: value
+				})
+				break;
+			case 'hidePrimaryColumnInTooltip':
+				setState({
+					...state,
+					general: {
+						...state.general,
+						[property]: value
+					}
+				})
+				break;
 			case 'showTitle':
 				setState({
 					...state,
@@ -234,6 +298,14 @@ const EditorPanel = (props) => {
 					},
 				});
 				break;
+			case 'handleCityStyle':
+				setState({
+					...state,
+					visual: {
+						cityStyle: value,
+					},
+				});
+				break;
 			case 'geoBorderColor':
 				setState({
 					...state,
@@ -274,12 +346,33 @@ const EditorPanel = (props) => {
 				});
 				break;
 			case 'legendType':
+
+				let testForType = Number(typeof state.data[0][state.columns.primary.name]);
+				let hasValue = state.data[0][state.columns.primary.name];
+				let messages = [];
+
+				if(!hasValue) {
+					messages.push(`There appears to be values missing for data in the primary column ${state.columns.primary.name}`);
+				}
+
+				if (testForType === 'string' && isNaN(testForType) && value !== 'category')  {
+					messages.push(
+            "Error with legend. Primary columns that are text must use a categorical legend type. Try changing the legend type to DEV-12345categorical."
+          );
+				} else {
+					messages = []
+				}
+
 				setState({
 					...state,
 					legend: {
 						...state.legend,
 						type: value,
 					},
+					runtime: {
+						...state.runtime,
+						editorErrorMessage: messages
+					}
 				});
 				break;
 			case 'legendNumber':
@@ -343,6 +436,15 @@ const EditorPanel = (props) => {
 				break;
 			case 'editorMapType':
 				switch (value) {
+					case 'us-geocode':
+						setState({
+							...state,
+							general: {
+								...state.general,
+								type: value,
+							},
+						});
+						break;
 					case 'data':
 						setState({
 							...state,
@@ -367,6 +469,20 @@ const EditorPanel = (props) => {
 							},
 						});
 						break;
+					case 'bubble':
+						setState({
+							...state,
+							general: {
+								...state.general,
+								showSidebar: false,
+								type: 'bubble',
+							},
+							tooltips: {
+								...state.tooltips,
+								appearanceType: 'hover',
+							},
+						});
+						break;
 					default:
 						console.warn('Map type not set');
 						break;
@@ -407,6 +523,20 @@ const EditorPanel = (props) => {
 						});
 						ReactTooltip.rebuild();
 						break;
+					case 'us-region':
+						setState({
+							...state,
+							general: {
+								...state.general,
+								geoType: 'us-region',
+							},
+							dataTable: {
+								...state.dataTable,
+								forceDisplay: true,
+							},
+						});
+						ReactTooltip.rebuild();
+						break;
 					case 'world':
 						setState({
 							...state,
@@ -558,6 +688,15 @@ const EditorPanel = (props) => {
 					},
 				});
 				break;
+			case "classificationType":
+				setState({
+				...state,
+				legend: {
+					...state.legend,
+					type: value,
+				},
+				});
+				break;
 			default:
 				console.warn(`Did not recognize editor property.`);
 				break;
@@ -565,6 +704,7 @@ const EditorPanel = (props) => {
 	};
 
 	const columnsRequiredChecker = useCallback(() => {
+		console.info('Running columns required check.')
 		let columnList = [];
 
 		// Geo is always required
@@ -585,6 +725,14 @@ const EditorPanel = (props) => {
 			columnList.push('Navigation');
 		}
 
+		if ('us-geocode' === state.general.type && '' === state.columns.latitude.name) {
+			columnList.push('Latitude')
+		}
+		
+		if ('us-geocode' === state.general.type && '' === state.columns.longitude.name) {
+			columnList.push('Longitude')
+		}
+
 		if (columnList.length === 0) columnList = null;
 
 		setRequiredColumns(columnList);
@@ -804,10 +952,30 @@ const EditorPanel = (props) => {
 	}, [state]);
 
 	useEffect(() => {
-		if ('category' === state.legend.type && editorCatOrder.length === 0) {
-			let arr = runtimeLegend.filter((item) => !item.special).map(({ value }) => value);
+		//If a categorical map is used and the order is either not defined or incorrect, fix it
+		if ('category' === state.legend.type) {
+			let valid = true;
+			if(state.legend.categoryValuesOrder){
+				runtimeLegend.forEach(item => {
+					if(!item.special && state.legend.categoryValuesOrder.indexOf(item.value) === -1) {
+						valid = false;
+					}
+				});
+			} else {
+				valid = false;
+			}
+
+			if(!valid){
+				let arr = runtimeLegend.filter((item) => !item.special).map(({ value }) => value);
 
-			setEditorCatOrder(arr);
+				setState({
+					...state,
+					legend: {
+						...state.legend,
+						categoryValuesOrder: arr,
+					},
+				});
+			}
 		}
 	}, [runtimeLegend]);
 
@@ -868,7 +1036,7 @@ const EditorPanel = (props) => {
 	}
 
 	const additionalColumns = Object.keys(state.columns).filter((value) => {
-		const defaultCols = ['geo', 'navigate', 'primary'];
+		const defaultCols = ['geo', 'navigate', 'primary', 'latitude', 'longitude'];
 
 		if (true === defaultCols.includes(value)) {
 			return false;
@@ -948,7 +1116,12 @@ const EditorPanel = (props) => {
 				<label>
 					<span className='edit-label column-heading'>
 						Filter Column{' '}
-						<Helper text='Selecting a column will add a dropdown menu below the map legend and allow users to filter based on the values in this column.' />
+            <Tooltip style={{textTransform: 'none'}}>
+              <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+              <Tooltip.Content>
+                <p>Selecting a column will add a dropdown menu below the map legend and allow users to filter based on the values in this column.</p>
+              </Tooltip.Content>
+            </Tooltip>
 					</span>
 					<select
 						value={filter.columnName}
@@ -961,7 +1134,7 @@ const EditorPanel = (props) => {
 						)}
 					</select>
 				</label>
-				
+
 				<label>
 					<span className="edit-filterOrder column-heading">Filter Order</span>
 					<select value={filter.order} onChange={ (e) => {
@@ -1009,7 +1182,7 @@ const EditorPanel = (props) => {
 						</Droppable>
 					</DragDropContext>
 				}
-				
+
 			</fieldset>
 		);
 	});
@@ -1043,21 +1216,28 @@ const EditorPanel = (props) => {
 		});
 	}
 
+
+	useEffect(()=>{
+		if(paletteName) handleEditorChanges('color',paletteName)
+	},[paletteName]) // dont add handleEditorChanges as a dependency even if it requires
+
 	useEffect(() => {
 		const parsedData = convertStateToConfig();
 		const formattedData = JSON.stringify(parsedData, undefined, 2);
 
 		setConfigTextbox(formattedData);
+	}, [state]);
 
+	useEffect(() => {
 		// Pass up to Editor if needed
 		if (setParentConfig) {
 			const newConfig = convertStateToConfig();
 			setParentConfig(newConfig);
 		}
 
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [state]);
 
+
 	let numberOfItemsLimit = 8;
 
 	const getItemStyle = (isDragging, draggableStyle) => ({
@@ -1065,7 +1245,7 @@ const EditorPanel = (props) => {
 	});
 
 	const CategoryList = () => {
-		return editorCatOrder.map((value, index) => (
+		return state.legend.categoryValuesOrder ? state.legend.categoryValuesOrder.map((value, index) => (
 			<Draggable key={value} draggableId={`item-${value}`} index={index}>
 				{(provided, snapshot) => (
 					<li style={{ position: 'relative' }}>
@@ -1081,11 +1261,23 @@ const EditorPanel = (props) => {
 					</li>
 				)}
 			</Draggable>
-		));
+		)) : <></>;
 	};
 
+	const Error = () => {
+		return (
+			<section className="waiting">
+				<section className="waiting-container">
+					<h3>Error With Configuration</h3>
+					<p>{state.runtime.editorErrorMessage}</p>
+				</section>
+			</section>
+		);
+	}
+
 	return (
 		<ErrorBoundary component='EditorPanel'>
+			{state?.runtime?.editorErrorMessage.length > 0 && <Error />}
 			{requiredColumns && (
 				<Waiting requiredColumns={requiredColumns} className={displayPanel ? `waiting` : `waiting collapsed`} />
 			)}
@@ -1095,7 +1287,8 @@ const EditorPanel = (props) => {
 				onClick={onBackClick}
 				data-html2canvas-ignore
 			></button>
-			<section className={displayPanel ? 'editor-panel' : 'hidden editor-panel'} data-html2canvas-ignore>
+			
+			<section className={displayPanel ? 'editor-panel cove' : 'hidden editor-panel cove'} data-html2canvas-ignore>
 				<ReactTooltip html={true} multiline={true} />
 				<span className='base-label'>Configure Map</span>
 				<section className='form-container'>
@@ -1114,38 +1307,61 @@ const EditorPanel = (props) => {
 											<span>Geography</span>
 										</span>
 										<ul className='geo-buttons'>
-											<li
+											<button
 												className={
 													state.general.geoType === 'us' ||
 													state.general.geoType === 'us-county'
 														? 'active'
 														: ''
 												}
-												onClick={() => handleEditorChanges('geoType', 'us')}
+												onClick={ (e) => {
+													e.preventDefault();
+													handleEditorChanges('geoType', 'us')
+												}}
 											>
 												<UsaGraphic />
 												<span>United States</span>
-											</li>
-											<li
+											</button>
+                      <button
+                        className={state.general.geoType === 'us-region' ? 'active' : ''}
+                        onClick={ (e) => {
+                          e.preventDefault();
+                          handleEditorChanges('geoType', 'us-region')
+                        }}
+                      >
+                        <UsaRegionGraphic />
+                        <span>U.S. Region</span>
+                      </button>
+											<button
 												className={state.general.geoType === 'world' ? 'active' : ''}
-												onClick={() => handleEditorChanges('geoType', 'world')}
+												onClick={ (e) => {
+													e.preventDefault();
+													handleEditorChanges('geoType', 'world')
+													}
+												}
 											>
 												<WorldGraphic />
 												<span>World</span>
-											</li>
-											<li
+											</button>
+											<button
 												className={state.general.geoType === 'single-state' ? 'active' : ''}
-												onClick={() => handleEditorChanges('geoType', 'single-state')}
+												onClick={(e) => {
+													e.preventDefault();
+													handleEditorChanges('geoType', 'single-state')
+												}}
 											>
 												<AlabamaGraphic />
 												<span>U.S. State</span>
-											</li>
+											</button>
 										</ul>
 									</label>
 									{/* Select > State or County Map */}
 									{(state.general.geoType === 'us' || state.general.geoType === 'us-county') && (
 										<label>
-											<span className='edit-label column-heading'>Map Type</span>
+											<span className='edit-label column-heading'>
+												Geography Subtype
+												
+											</span>
 											<select
 												value={state.general.geoType}
 												onChange={(event) => {
@@ -1178,7 +1394,15 @@ const EditorPanel = (props) => {
 									)}
 									{/* Type */}
 									<label>
-										<span className='edit-label column-heading'>Map Type</span>
+										<span className='edit-label column-heading'>
+											Map Type
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+													<p>Select "Data" to create a color-coded data map. To create a navigation-only map, select "Navigation."</p>
+												</Tooltip.Content>
+												</Tooltip>
+										</span>
 										<select
 											value={state.general.type}
 											onChange={(event) => {
@@ -1186,9 +1410,46 @@ const EditorPanel = (props) => {
 											}}
 										>
 											<option value='data'>Data</option>
+											<option value='us-geocode'>United States Geocode</option>
 											<option value='navigation'>Navigation</option>
+											{ (state.general.geoType === 'world' || state.general.geoType === 'us') && <option value="bubble">Bubble</option>}
 										</select>
 									</label>
+									<label>
+                     <span className="edit-label">Data Classification Type</span>
+                     <div>
+                       <label>
+                         <input
+                           type="radio"
+                           name="equalnumber"
+                           value="equalnumber"
+                           checked={state.legend.type === "equalnumber"}
+                           onChange={(e) =>
+                             handleEditorChanges(
+                               "classificationType",
+                               e.target.value
+                             )
+                           }
+                         />
+                         Numeric/Quantitative
+                       </label>
+                       <label>
+                         <input
+                           type="radio"
+                           name="category"
+                           value="category"
+                           checked={state.legend.type === "category"}
+                           onChange={(e) =>
+                             handleEditorChanges(
+                               "classificationType",
+                               e.target.value
+                             )
+                           }
+                         />
+                         Categorical
+                       </label>
+                     </div>
+                   </label>
 									{/* SubType */}
 									{'us' === state.general.geoType && 'data' === state.general.type && (
 										<label className='checkbox mt-4'>
@@ -1203,7 +1464,7 @@ const EditorPanel = (props) => {
 										</label>
 									)}
 									{'us' === state.general.geoType &&
-										'data' === state.general.type &&
+										'bubble' !== state.general.type &&
 										false === state.general.displayAsHex && (
 											<label className='checkbox'>
 												<input
@@ -1226,13 +1487,51 @@ const EditorPanel = (props) => {
 								</AccordionItemHeading>
 								<AccordionItemPanel>
 									<TextField
-										value={state.general.title}
+										value={general.title}
 										updateField={updateField}
 										section='general'
 										fieldName='title'
 										label='Title'
 										placeholder='Map Title'
-										helper='For accessibility reasons, you should enter a title even if you are not planning on displaying it.'
+										tooltip={
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>For accessibility reasons, you should enter a title even if you are not planning on displaying it.</p>
+												</Tooltip.Content>
+											</Tooltip>
+										}
+									/>
+									<TextField
+										value={general.superTitle || ''}
+										updateField={updateField}
+										section='general'
+										fieldName='superTitle'
+										label='Super Title'
+										tooltip={
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>Super Title</p>
+												</Tooltip.Content>
+											</Tooltip>
+										}
+									/>
+									<TextField
+										type='textarea'
+										value={general.introText}
+										updateField={updateField}
+										section='general'
+										fieldName='introText'
+										label='Intro Text'
+										tooltip={
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>Intro Text</p>
+												</Tooltip.Content>
+											</Tooltip>
+										}
 									/>
 									<TextField
 										type='textarea'
@@ -1241,6 +1540,30 @@ const EditorPanel = (props) => {
 										section='general'
 										fieldName='subtext'
 										label='Subtext'
+										tooltip={
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
+												</Tooltip.Content>
+											</Tooltip>
+										}
+									/>
+									<TextField
+										type='textarea'
+										value={general.footnotes}
+										updateField={updateField}
+										section='general'
+										fieldName='footnotes'
+										label='Footnotes'
+										tooltip={
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>Footnotes</p>
+												</Tooltip.Content>
+											</Tooltip>
+										}
 									/>
 									{'us' === state.general.geoType && (
 										<TextField
@@ -1266,7 +1589,15 @@ const EditorPanel = (props) => {
 								</AccordionItemHeading>
 								<AccordionItemPanel>
 									<label className='edit-block geo'>
-										<span className='edit-label column-heading'>Geography</span>
+										<span className='edit-label column-heading'>
+										Geography
+										<Tooltip style={{textTransform: 'none'}}>
+											<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+											<Tooltip.Content>
+											<p>Select the source column containing the map location names or, for county-level maps, the FIPS codes.</p>
+											</Tooltip.Content>
+										</Tooltip>
+										</span>
 										<select
 											value={state.columns.geo ? state.columns.geo.name : columnsOptions[0]}
 											onChange={(event) => {
@@ -1276,155 +1607,240 @@ const EditorPanel = (props) => {
 											{columnsOptions}
 										</select>
 									</label>
-									{'navigation' !== state.general.type && (
-										<fieldset className='primary-fieldset edit-block'>
-											<label>
-												<span className='edit-label column-heading'>Primary</span>
-												<select
-													value={
-														state.columns.primary
-															? state.columns.primary.name
-															: columnsOptions[0]
-													}
-													onChange={(event) => {
-														editColumn('primary', 'name', event.target.value);
-													}}
-												>
-													{columnsOptions}
-												</select>
-											</label>
-											<TextField
-												value={columns.primary.label}
-												section='columns'
-												subsection='primary'
-												fieldName='label'
-												label='Label'
-												updateField={updateField}
-											/>
-											<ul className='column-edit'>
-												<li className='three-col'>
-													<TextField
-														value={columns.primary.prefix}
-														section='columns'
-														subsection='primary'
-														fieldName='prefix'
-														label='Prefix'
-														updateField={updateField}
-													/>
-													<TextField
-														value={columns.primary.suffix}
-														section='columns'
-														subsection='primary'
-														fieldName='suffix'
-														label='Suffix'
-														updateField={updateField}
-													/>
-													<TextField
-														type='number'
-														value={columns.primary.roundToPlace}
-														section='columns'
-														subsection='primary'
-														fieldName='roundToPlace'
-														label='Round'
-														updateField={updateField}
-													/>
-												</li>
-												<li>
-													<label className='checkbox'>
-														<input
-															type='checkbox'
-															checked={state.columns.primary.useCommas}
-															onChange={(event) => {
-																editColumn(
-																	'primary',
-																	'useCommas',
-																	event.target.checked
-																);
-															}}
-														/>
-														<span className='edit-label'>Add Commas to Numbers</span>
-													</label>
-												</li>
-												<li>
-													<label className='checkbox'>
-														<input
-															type='checkbox'
-															checked={state.columns.primary.dataTable || false}
-															onChange={(event) => {
-																editColumn(
-																	'primary',
-																	'dataTable',
-																	event.target.checked
-																);
-															}}
-														/>
-														<span className='edit-label'>Display in Data Table</span>
-													</label>
-												</li>
-												<li>
-													<label className='checkbox'>
-														<input
-															type='checkbox'
-															checked={state.columns.primary.tooltip || false}
-															onChange={(event) => {
-																editColumn('primary', 'tooltip', event.target.checked);
-															}}
-														/>
-														<span className='edit-label'>Display in Tooltips</span>
-													</label>
-												</li>
-												<li>
-													<label>
-														<span className='edit-label'>Special Classes</span>
-													</label>
-													{specialClasses.map((specialClass, i) => (
-														<div className="edit-block" key={`special-class-${i}`}>
-															<button className="remove-column"
-																onClick={(e) => {
-																	e.preventDefault();
-																	editColumn('primary', 'specialClassDelete', i);
-																}}
-															>Remove</button>
-															<p>Special Class {i + 1}</p>
-															<label>
-																<span className="edit-label column-heading">Data Key</span>
-																<select value={specialClass.key} onChange={(e) => {
-																	editColumn('primary', 'specialClassEdit', {prop: 'key', index: i, value: e.target.value});
-																}}>
-																	{columnsOptions}
-																</select>
-															</label>
-															<label>
-																<span className="edit-label column-heading">Value</span>
-																<select value={specialClass.value} onChange={(e) => {
-																	editColumn('primary', 'specialClassEdit', {prop: 'value', index: i, value: e.target.value});
-																}}>
-																	<option value="">- Select Value -</option>
-																	{columnsByKey[specialClass.key] && columnsByKey[specialClass.key].sort().map(option => (
-																		<option key={`special-class-value-option-${i}-${option}`}>{option}</option>
-																	))}
-																</select>
-															</label>
-															<label>
-																<span className="edit-label column-heading">Label</span>
-																<input type="text" value={specialClass.label} onChange={(e) => {
-																	editColumn('primary', 'specialClassEdit', {prop: 'label', index: i, value: e.target.value});
-																}} />
-															</label>
-														</div>
-													))}
-													<button className="btn full-width"
-														onClick={(e) => {
-															e.preventDefault();
-															editColumn('primary', 'specialClassAdd', {});
-														}}
-													>Add SpecialClass</button>
-												</li>
-											</ul>
-										</fieldset>
-									)}
+
+				{'navigation' !== state.general.type && (
+                      <fieldset className='primary-fieldset edit-block'>
+                        <label>
+												<span className='edit-label column-heading'>
+                          Data Column
+                          <Tooltip style={{textTransform: 'none'}}>
+                            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Select the source column containing the categorical or numeric values to be mapped.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </span>
+                          <select
+                            value={
+                              state.columns.primary
+                                ? state.columns.primary.name
+                                : columnsOptions[0]
+                            }
+                            onChange={(event) => {
+                              editColumn('primary', 'name', event.target.value);
+                            }}
+                          >
+                            {columnsOptions}
+                          </select>
+                        </label>
+                        <TextField
+                          value={columns.primary.label}
+                          section='columns'
+                          subsection='primary'
+                          fieldName='label'
+                          label='Label'
+                          updateField={updateField}
+                          tooltip={
+                            <Tooltip style={{textTransform: 'none'}}>
+                              <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>Enter a data label for use in tooltips and the data table.</p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          }
+                        />
+                        <ul className='column-edit'>
+                          <li className='three-col'>
+                            <TextField
+                              value={columns.primary.prefix}
+                              section='columns'
+                              subsection='primary'
+                              fieldName='prefix'
+                              label='Prefix'
+                              updateField={updateField}
+                            />
+                            <TextField
+                              value={columns.primary.suffix}
+                              section='columns'
+                              subsection='primary'
+                              fieldName='suffix'
+                              label='Suffix'
+                              updateField={updateField}
+                            />
+                            <TextField
+                              type='number'
+                              value={columns.primary.roundToPlace}
+                              section='columns'
+                              subsection='primary'
+                              fieldName='roundToPlace'
+                              label='Round'
+                              updateField={updateField}
+							  min={0}
+                            />
+                          </li>
+                          <li>
+                            <label className='checkbox'>
+                              <input
+                                type='checkbox'
+                                checked={state.columns.primary.useCommas}
+                                onChange={(event) => {
+                                  editColumn(
+                                    'primary',
+                                    'useCommas',
+                                    event.target.checked
+                                  );
+                                }}
+                              />
+                              <span className='edit-label'>Add Commas to Numbers</span>
+                            </label>
+                          </li>
+                          <li>
+                            <label className='checkbox'>
+                              <input
+                                type='checkbox'
+                                checked={state.columns.primary.dataTable || false}
+                                onChange={(event) => {
+                                  editColumn(
+                                    'primary',
+                                    'dataTable',
+                                    event.target.checked
+                                  );
+                                }}
+                              />
+                              <span className='edit-label'>Display in Data Table</span>
+                            </label>
+                          </li>
+                          <li>
+                            <label className='checkbox'>
+                              <input
+                                type='checkbox'
+                                checked={state.columns.primary.tooltip || false}
+                                onChange={(event) => {
+                                  editColumn('primary', 'tooltip', event.target.checked);
+                                }}
+                              />
+                              <span className='edit-label'>Display in Tooltips</span>
+                            </label>
+                          </li>
+                        </ul>
+                      </fieldset>
+				)}
+
+
+
+					  { (state.general.type === 'bubble') && state.legend.type === 'category' && (
+						<fieldset className='primary-fieldset edit-block'>
+                        	<label>
+								<span className='edit-label column-heading'>
+                          			Category Column
+									<Tooltip style={{textTransform: 'none'}}>
+										<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+										<Tooltip.Content>
+											<p>Select the source column containing the categorical bubble values to be mapped.</p>
+										</Tooltip.Content>
+									</Tooltip>
+								</span>
+								<select
+									value={
+									state.columns.categorical
+										? state.columns.categorical.name
+										: columnsOptions[0]
+									}
+									onChange={(event) => {
+									editColumn('categorical', 'name', event.target.value);
+									}}
+								>
+									{columnsOptions}
+								</select>
+                        	</label>
+						</fieldset>
+					)}
+
+					{'us-geocode' === state.general.type &&
+					<>
+						<label>Latitude Column</label>
+						<select value={state.columns.latitude.name ? state.columns.latitude.name : ''} onChange={(e) => {
+							editColumn('latitude', 'name', e.target.value);
+							}}>
+						{columnsOptions}
+						</select>
+						<label>Longitude Column</label>
+						<select value={state.columns.longitude.name ? state.columns.longitude.name : ''} onChange={(e) => {
+							editColumn('longitude', 'name', e.target.value);
+						}}>
+							{columnsOptions}
+						</select>
+					</>
+					}
+
+					{'navigation' !== state.general.type && (
+                      <fieldset className="primary-fieldset edit-block">
+                        <label>
+                          <span className='edit-label'>
+                            Special Classes
+                            <Tooltip style={{textTransform: 'none'}}>
+                              <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>For secondary values such as "NA", the system can automatically color-code them in shades of gray, one shade for each special class.</p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          </span>
+                        </label>
+                        {specialClasses.map((specialClass, i) => (
+                          <div className="edit-block" key={`special-class-${i}`}>
+                            <button className="remove-column"
+                                    onClick={(e) => {
+                                      e.preventDefault();
+                                      editColumn('primary', 'specialClassDelete', i);
+                                    }}
+                            >Remove</button>
+                            <p>Special Class {i + 1}</p>
+                            <label>
+                              <span className="edit-label column-heading">Data Key</span>
+                              <select value={specialClass.key} onChange={(e) => {
+                                editColumn('primary', 'specialClassEdit', {prop: 'key', index: i, value: e.target.value});
+                              }}>
+                                {columnsOptions}
+                              </select>
+                            </label>
+                            <label>
+                              <span className="edit-label column-heading">Value</span>
+                              <select value={specialClass.value} onChange={(e) => {
+                                editColumn('primary', 'specialClassEdit', {prop: 'value', index: i, value: e.target.value});
+                              }}>
+                                <option value="">- Select Value -</option>
+                                {columnsByKey[specialClass.key] && columnsByKey[specialClass.key].sort().map(option => (
+                                  <option key={`special-class-value-option-${i}-${option}`}>{option}</option>
+                                ))}
+                              </select>
+                            </label>
+                            <label>
+                              <span className="edit-label column-heading">Label</span>
+                              <input type="text" value={specialClass.label} onChange={(e) => {
+                                editColumn('primary', 'specialClassEdit', {prop: 'label', index: i, value: e.target.value});
+                              }} />
+                            </label>
+                          </div>
+                        ))}
+                        <button className="btn full-width" onClick={(e) => {
+                          e.preventDefault();
+                          editColumn('primary', 'specialClassAdd', {});
+                        }}>
+                          Add Special Class
+                        </button>
+                      </fieldset>
+					)}
+
 									<label className='edit-block navigate column-heading'>
-										<span className='edit-label column-heading'>Navigation</span>
+										<span className='edit-label column-heading'>
+                      Navigation
+                      <Tooltip style={{textTransform: 'none'}}>
+                        <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>To provide end users with navigation functionality, select the source column containing the navigation URLs.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </span>
 										<select
 											value={
 												state.columns.navigate ? state.columns.navigate.name : columnsOptions[0]
@@ -1437,118 +1853,130 @@ const EditorPanel = (props) => {
 										</select>
 									</label>
 									{'navigation' !== state.general.type &&
-										additionalColumns.map((val) => (
-											<fieldset className='edit-block' key={val}>
-												<button
-													className='remove-column'
-													onClick={(event) => {
-														event.preventDefault();
-														removeAdditionalColumn(val);
-													}}
-												>
-													Remove
-												</button>
-												<label>
-													<span className='edit-label column-heading'>Column</span>
-													<select
-														value={
-															state.columns[val]
-																? state.columns[val].name
-																: columnsOptions[0]
-														}
-														onChange={(event) => {
-															editColumn(val, 'name', event.target.value);
-														}}
-													>
-														{columnsOptions}
-													</select>
-												</label>
-												<TextField
-													value={columns[val].label}
-													section='columns'
-													subsection={val}
-													fieldName='label'
-													label='Label'
-													updateField={updateField}
-												/>
-												<ul className='column-edit'>
-													<li className='three-col'>
-														<TextField
-															value={columns[val].prefix}
-															section='columns'
-															subsection={val}
-															fieldName='prefix'
-															label='Prefix'
-															updateField={updateField}
-														/>
-														<TextField
-															value={columns[val].suffix}
-															section='columns'
-															subsection={val}
-															fieldName='suffix'
-															label='Suffix'
-															updateField={updateField}
-														/>
-														<TextField
-															type='number'
-															value={columns[val].roundToPlace}
-															section='columns'
-															subsection={val}
-															fieldName='roundToPlace'
-															label='Round'
-															updateField={updateField}
-														/>
-													</li>
-													<li>
-														<label className='checkbox'>
-															<input
-																type='checkbox'
-																checked={state.columns[val].useCommas}
-																onChange={(event) => {
-																	editColumn(val, 'useCommas', event.target.checked);
-																}}
-															/>
-															<span className='edit-label'>Add Commas to Numbers</span>
-														</label>
-													</li>
-													<li>
-														<label className='checkbox'>
-															<input
-																type='checkbox'
-																checked={state.columns[val].dataTable}
-																onChange={(event) => {
-																	editColumn(val, 'dataTable', event.target.checked);
-																}}
-															/>
-															<span className='edit-label'>Display in Data Table</span>
-														</label>
-													</li>
-													<li>
-														<label className='checkbox'>
-															<input
-																type='checkbox'
-																checked={state.columns[val].tooltip}
-																onChange={(event) => {
-																	editColumn(val, 'tooltip', event.target.checked);
-																}}
-															/>
-															<span className='edit-label'>Display in Tooltips</span>
-														</label>
-													</li>
-												</ul>
-											</fieldset>
-										))}
-									{'navigation' !== state.general.type && (
-										<button
-											className={'btn full-width'}
-											onClick={(event) => {
-												event.preventDefault();
-												addAdditionalColumn(additionalColumns.length + 1);
-											}}
-										>
-											Add Column
-										</button>
-									)}
+                    <fieldset className="primary-fieldset edit-block">
+                      <label>
+                        <span className="edit-label">
+                          Additional Columns
+                          <Tooltip style={{textTransform: 'none'}}>
+                            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>You can specify additional columns to display in tooltips and / or the supporting data table.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </span>
+                      </label>
+                      {additionalColumns.map((val) => (
+                        <fieldset className="edit-block" key={val}>
+                          <button
+                            className="remove-column"
+                            onClick={(event) => {
+                              event.preventDefault()
+                              removeAdditionalColumn(val)
+                            }}
+                          >
+                            Remove
+                          </button>
+                          <label>
+                            <span className="edit-label column-heading">Column</span>
+                            <select
+                              value={
+                                state.columns[val]
+                                  ? state.columns[val].name
+                                  : columnsOptions[0]
+                              }
+                              onChange={(event) => {
+                                editColumn(val, 'name', event.target.value)
+                              }}
+                            >
+                              {columnsOptions}
+                            </select>
+                          </label>
+                          <TextField
+                            value={columns[val].label}
+                            section="columns"
+                            subsection={val}
+                            fieldName="label"
+                            label="Label"
+                            updateField={updateField}
+                          />
+                          <ul className="column-edit">
+                            <li className="three-col">
+                              <TextField
+                                value={columns[val].prefix}
+                                section="columns"
+                                subsection={val}
+                                fieldName="prefix"
+                                label="Prefix"
+                                updateField={updateField}
+                              />
+                              <TextField
+                                value={columns[val].suffix}
+                                section="columns"
+                                subsection={val}
+                                fieldName="suffix"
+                                label="Suffix"
+                                updateField={updateField}
+                              />
+                              <TextField
+                                type="number"
+                                value={columns[val].roundToPlace}
+                                section="columns"
+                                subsection={val}
+                                fieldName="roundToPlace"
+                                label="Round"
+                                updateField={updateField}
+                              />
+                            </li>
+                            <li>
+                              <label className="checkbox">
+                                <input
+                                  type="checkbox"
+                                  checked={state.columns[val].useCommas}
+                                  onChange={(event) => {
+                                    editColumn(val, 'useCommas', event.target.checked)
+                                  }}
+                                />
+                                <span className="edit-label">Add Commas to Numbers</span>
+                              </label>
+                            </li>
+                            <li>
+                              <label className="checkbox">
+                                <input
+                                  type="checkbox"
+                                  checked={state.columns[val].dataTable}
+                                  onChange={(event) => {
+                                    editColumn(val, 'dataTable', event.target.checked)
+                                  }}
+                                />
+                                <span className="edit-label">Display in Data Table</span>
+                              </label>
+                            </li>
+                            <li>
+                              <label className="checkbox">
+                                <input
+                                  type="checkbox"
+                                  checked={state.columns[val].tooltip}
+                                  onChange={(event) => {
+                                    editColumn(val, 'tooltip', event.target.checked)
+                                  }}
+                                />
+                                <span className="edit-label">Display in Tooltips</span>
+                              </label>
+                            </li>
+                          </ul>
+                        </fieldset>
+                      ))}
+                      <button
+                        className={'btn full-width'}
+                        onClick={(event) => {
+                          event.preventDefault();
+                          addAdditionalColumn(additionalColumns.length + 1);
+                        }}
+                      >
+                        Add Column
+                      </button>
+                    </fieldset>
+                  }
 								</AccordionItemPanel>
 							</AccordionItem>{' '}
 							{/* Columns */}
@@ -1560,6 +1988,7 @@ const EditorPanel = (props) => {
 										<AccordionItemButton>Legend</AccordionItemButton>
 									</AccordionItemHeading>
 									<AccordionItemPanel>
+										{(state.legend.type === "equalnumber" || state.legend.type === 'equalinterval') && (
 										<label>
 											<span className='edit-label'>Legend Type</span>
 											<select
@@ -1568,11 +1997,49 @@ const EditorPanel = (props) => {
 													handleEditorChanges('legendType', event.target.value);
 												}}
 											>
-												<option value='equalnumber'>Equal Number</option>
+												<option value='equalnumber'>Equal Number (Quantiles)</option>
 												<option value='equalinterval'>Equal Interval</option>
-												<option value='category'>Categorical</option>
+											</select>
+											</label>
+											)}
+									{'navigation' !== state.general.type && (
+										<label className='checkbox'>
+											<input
+												type='checkbox'
+												checked={state.general.showSidebar || false}
+												onChange={(event) => {
+													handleEditorChanges('showSidebar', event.target.checked);
+												}}
+											/>
+											<span className='edit-label'>Show Legend</span>
+										</label>
+									)}
+									{'navigation' !== state.general.type && (
+										<label>
+											<span className='edit-label'>Legend Position</span>
+											<select
+												value={legend.position || false}
+												onChange={(event) => {
+													handleEditorChanges('sidebarPosition', event.target.value);
+												}}
+											>
+												<option value='side'>Side</option>
+												<option value='bottom'>Bottom</option>
 											</select>
 										</label>
+									)}
+									{'side' === legend.position && (
+										<label className='checkbox'>
+											<input
+												type='checkbox'
+												checked={legend.singleColumn}
+												onChange={(event) => {
+													handleEditorChanges('singleColumnLegend', event.target.checked);
+												}}
+											/>
+											<span className='edit-label'>Single Column Legend</span>
+										</label>
+									)}
 										{'category' !== legend.type && (
 											<label className='checkbox'>
 												<input
@@ -1582,12 +2049,43 @@ const EditorPanel = (props) => {
 														handleEditorChanges('separateZero', event.target.checked)
 													}
 												/>
-												<span className='edit-label'>Separate Zero</span>
+												<span className='edit-label'>
+												Separate Zero
+												<Tooltip style={{textTransform: 'none'}}>
+													<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+													<Tooltip.Content>
+													<p>For numeric data, you can separate the zero value as its own data class.</p>
+													</Tooltip.Content>
+												</Tooltip>
+												</span>
+
 											</label>
 										)}
+										{/* Temp Checkbox */}
+										
+										{state.legend.type === 'equalnumber' &&
+											<label className="checkbox mt-4">
+												<input type="checkbox" checked={ state.general.equalNumberOptIn } onChange={(event) => { handleEditorChanges("showEqualNumber", event.target.checked) }} />
+												<span className="edit-label">Use new quantile legend</span>
+												<Tooltip style={{textTransform: 'none'}}>
+													<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+														<Tooltip.Content>
+														<p>This prevents numbers from being used in more than one category (ie. 0-1, 1-2, 2-3) </p>
+													</Tooltip.Content>
+												</Tooltip>
+											</label>
+										}
 										{'category' !== legend.type && (
 											<label>
-												<span className='edit-label'>Number of Items</span>
+												<span className='edit-label'>
+                          Number of Items
+                          <Tooltip style={{textTransform: 'none'}}>
+                            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>For numeric maps, select the number of data classes. Do not include designated special classes.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </span>
 												<select
 													value={legend.numberOfItems}
 													onChange={(event) => {
@@ -1607,7 +2105,15 @@ const EditorPanel = (props) => {
 										{'category' === legend.type && (
 											<React.Fragment>
 												<label>
-													<span className='edit-label'>Category Order</span>
+													<span className='edit-label'>
+                            Category Order
+                            <Tooltip style={{textTransform: 'none'}}>
+                              <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>Drag map categories into preferred legend order. </p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          </span>
 												</label>
 												{/* TODO: Swap out this drag and drop library back to something simpler. I had to remove the old one because it hadn't been updated and wouldn't work with Webpack 5. This is overkill for our needs. */}
 												<DragDropContext
@@ -1628,13 +2134,13 @@ const EditorPanel = (props) => {
 														)}
 													</Droppable>
 												</DragDropContext>
-												{editorCatOrder.length >= 9 && (
+												{state.legend.categoryValuesOrder && state.legend.categoryValuesOrder.length >= 10 && (
 													<section className='error-box my-2'>
 														<div>
 															<strong className='pt-1'>Warning</strong>
 															<p>
-																The maximum number of categorical legend items is 9. If
-																your data has more than 9 categories your map will not
+																The maximum number of categorical legend items is 10. If
+																your data has more than 10 categories your map will not
 																display properly.
 															</p>
 														</div>
@@ -1706,10 +2212,18 @@ const EditorPanel = (props) => {
 														);
 													}}
 												/>
-												<span className='edit-label'>Dynamic Legend Description</span>
+												<span className='edit-label'>
+												Dynamic Legend Description
+												<Tooltip style={{textTransform: 'none'}}>
+													<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+													<Tooltip.Content>
+													<p>Check this option if the map has multiple filter controls and you want to specify a description for each filter selection.</p>
+													</Tooltip.Content>
+												</Tooltip>
+												</span>
 											</label>
 										)}
-										{filtersJSX.length > 0 && (
+										{(filtersJSX.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us')  && (
 											<label className='checkbox'>
 												<input
 													type='checkbox'
@@ -1718,7 +2232,15 @@ const EditorPanel = (props) => {
 														handleEditorChanges('unifiedLegend', event.target.checked)
 													}
 												/>
-												<span className='edit-label'>Unified Legend</span>
+												<span className='edit-label'>
+												Unified Legend
+												<Tooltip style={{textTransform: 'none'}}>
+													<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+													<Tooltip.Content>
+													<p>For a map with filters, check this option if you want the high and low values in the legend to be based on <em>all</em> mapped values.</p>
+													</Tooltip.Content>
+												</Tooltip>
+												</span>
 											</label>
 										)}
 									</AccordionItemPanel>
@@ -1766,12 +2288,20 @@ const EditorPanel = (props) => {
 											placeholder='Data Table'
 										/>
 										<TextField
-											value={dataTable.indexTitle}
+											value={dataTable.indexLabel || ''}
 											updateField={updateField}
 											section='dataTable'
-											fieldName='indexTitle'
-											label='Index Column Title'
+											fieldName='indexLabel'
+											label='Index Column Header'
 											placeholder='Location'
+                                            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={dataTable.caption}
@@ -1780,7 +2310,14 @@ const EditorPanel = (props) => {
 											fieldName='caption'
 											label='Data Table Caption'
 											placeholder='Data Table'
-											helper='Text that describes the data table for screen'
+                      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>
+                      }
 											type="textarea"
 										/>
 										<label className='checkbox'>
@@ -1795,8 +2332,15 @@ const EditorPanel = (props) => {
 													handleEditorChanges('showDataTable', event.target.checked);
 												}}
 											/>
-											<span className='edit-label'>Show Table</span>
-											<Helper text='Data tables are required for 508 compliance. When choosing to hide this data table, replace with your own version.' />
+											<span className='edit-label'>
+                        Show Table
+                        <Tooltip style={{textTransform: 'none'}}>
+                          <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Data tables are required for 508 compliance. When choosing to hide this data table, replace with your own version.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      </span>
 										</label>
 										<label className='checkbox'>
 											<input
@@ -1854,7 +2398,12 @@ const EditorPanel = (props) => {
 									<label>
 										<span className='edit-label'>
 											Detail displays on{' '}
-											<Helper text='At mobile sizes, information always appears in a popover modal when a user taps on an item.' />
+                      <Tooltip style={{textTransform: 'none'}}>
+                        <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>At mobile sizes, information always appears in a popover modal when a user taps on an item.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
 										</span>
 										<select
 											value={state.tooltips.appearanceType}
@@ -1894,7 +2443,7 @@ const EditorPanel = (props) => {
 									<AccordionItemButton>Visual</AccordionItemButton>
 								</AccordionItemHeading>
 								<AccordionItemPanel>
-									<label className='header'>
+									<label>
 										<span className='edit-label'>Header Theme</span>
 										<ul className='color-palette'>
 											{headerColors.map((palette) => {
@@ -1925,44 +2474,28 @@ const EditorPanel = (props) => {
 										/>
 										<span className='edit-label'>Show Title</span>
 									</label>
-									{'navigation' !== state.general.type && (
-										<label className='checkbox'>
-											<input
-												type='checkbox'
-												checked={state.general.showSidebar || false}
-												onChange={(event) => {
-													handleEditorChanges('showSidebar', event.target.checked);
-												}}
-											/>
-											<span className='edit-label'>Show Legend</span>
-										</label>
-									)}
-									{'navigation' !== state.general.type && (
-										<label>
-											<span className='edit-label'>Legend Position</span>
-											<select
-												value={legend.position || false}
-												onChange={(event) => {
-													handleEditorChanges('sidebarPosition', event.target.value);
-												}}
-											>
-												<option value='side'>Side</option>
-												<option value='bottom'>Bottom</option>
-											</select>
-										</label>
-									)}
-									{'side' === legend.position && (
-										<label className='checkbox'>
-											<input
-												type='checkbox'
-												checked={legend.singleColumn}
-												onChange={(event) => {
-													handleEditorChanges('singleColumnLegend', event.target.checked);
-												}}
-											/>
-											<span className='edit-label'>Single Column Legend</span>
-										</label>
-									)}
+
+									<label className='checkbox'>
+										<input
+											type='checkbox'
+											checked={state.general.hideGeoColumnInTooltip || false}
+											onChange={(event) => {
+												handleEditorChanges('hideGeoColumnInTooltip', event.target.checked);
+											}}
+										/>
+										<span className='edit-label'>Hide Geography Column Name in Tooltip</span>
+									</label>
+
+									<label className='checkbox'>
+										<input
+											type='checkbox'
+											checked={state.general.hidePrimaryColumnInTooltip || false}
+											onChange={(event) => {
+												handleEditorChanges('hidePrimaryColumnInTooltip', event.target.checked);
+											}}
+										/>
+										<span className='edit-label'>Hide Primary Column Name in Tooltip</span>
+									</label>
 									{'navigation' === state.general.type && (
 										<label className='checkbox'>
 											<input
@@ -1990,10 +2523,11 @@ const EditorPanel = (props) => {
 									<label>
 										<span className='edit-label'>Map Color Palette</span>
 									</label>
-									<span className='h5'>Sequential</span>
+									{/* <InputCheckbox  section="general" subsection="palette"  fieldName='isReversed'  size='small' label='Use selected palette in reverse order'   updateField={updateField}  value={isPaletteReversed} /> */}
+									<InputToggle type='3d' section="general" subsection="palette"  fieldName='isReversed'  size='small' label='Use selected palette in reverse order'   updateField={updateField}  value={isPaletteReversed} />
+										<span>Sequential</span>
 									<ul className='color-palette'>
-										{Object.keys(colorPalettes)
-											.filter((name) => !name.includes('qualitative'))
+										{filteredPallets
 											.map((palette) => {
 												const colorOne = {
 													backgroundColor: colorPalettes[palette][2],
@@ -2023,10 +2557,9 @@ const EditorPanel = (props) => {
 												);
 											})}
 									</ul>
-									<span className='h5'>Non-Sequential</span>
+									<span>Non-Sequential</span>
 									<ul className='color-palette'>
-										{Object.keys(colorPalettes)
-											.filter((name) => name.includes('qualitative'))
+										{filteredQualitative
 											.map((palette) => {
 												const colorOne = {
 													backgroundColor: colorPalettes[palette][2],
@@ -2040,6 +2573,10 @@ const EditorPanel = (props) => {
 													backgroundColor: colorPalettes[palette][6],
 												};
 
+												// hide palettes with too few colors for region maps
+												if ( colorPalettes[palette].length <= 8 && state.general.geoType === 'us-region' ) {
+													return('');
+												}
 												return (
 													<li
 														title={palette}
@@ -2056,52 +2593,78 @@ const EditorPanel = (props) => {
 												);
 											})}
 									</ul>
+									{(state.general.type === 'bubble') && <><TextField
+										type='number'
+										value={state.visual.minBubbleSize}
+										section='visual'
+										fieldName='minBubbleSize'
+										label='Minimum Bubble Size'
+										updateField={updateField}
+									/>
+									<TextField
+										type='number'
+										value={state.visual.maxBubbleSize}
+										section='visual'
+										fieldName='maxBubbleSize'
+										label='Maximum Bubble Size'
+										updateField={updateField}
+									/></>}
+									{ (state.general.geoType === 'world' || state.general.geoType === 'us' && state.general.type === 'bubble') &&
+										<label className='checkbox'>
+											<input
+												type='checkbox'
+												checked={state.visual.showBubbleZeros}
+												onChange={(event) => {
+													handleEditorChanges('showBubbleZeros', event.target.checked);
+												}}
+											/>
+											<span className='edit-label'>Show Data with Zero's on Bubble Map</span>
+										</label>
+									}
+									{state.general.geoType === 'world' &&
+										<label className='checkbox'>
+											<input
+												type='checkbox'
+												checked={state.general.allowMapZoom}
+												onChange={(event) => {
+													handleEditorChanges('allowMapZoom', event.target.checked);
+												}}
+											/>
+											<span className='edit-label'>Allow Map Zooming</span>
+										</label>
+									}
+									{state.general.type === 'bubble' &&
+										<label className='checkbox'>
+											<input
+												type='checkbox'
+												checked={state.visual.extraBubbleBorder}
+												onChange={(event) => {
+													handleEditorChanges('toggleExtraBubbleBorder', event.target.checked);
+												}}
+											/>
+											<span className='edit-label'>Bubble Map has extra border</span>
+										</label>
+									}
+									{state.general.geoType === 'us' &&
+										<label>
+											<span className='edit-label'>City Style</span>
+											<select
+												value={state.visual.cityStyle || false}
+												onChange={(event) => {
+													handleEditorChanges('handleCityStyle', event.target.value);
+												}}
+											>
+												<option value='circle'>Circle</option>
+												<option value='pin'>Pin</option>
+											</select>
+										</label>
+									}
 								</AccordionItemPanel>
 							</AccordionItem>
 						</Accordion>
 					</form>
-					<a
-						href='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html'
-						target='_blank'
-						rel='noopener noreferrer'
-						className='guidance-link'
-					>
-						<MapIcon />
-						<div>
-							<span className='heading-3'>Get Maps Help</span>
-							<p>Examples and documentation</p>
-						</div>
-					</a>
-					<div className='advanced'>
-						<span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
-							<span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
-						</span>
-						{advancedToggle && (
-							<React.Fragment>
-								<section className='error-box py-2 px-3 my-2'>
-									<div>
-										<strong className='pt-1'>Warning</strong>
-										<p>This can cause serious errors in your map.</p>
-									</div>
-								</section>
-								<p className='pb-2'>
-									This tool displays the actual map configuration{' '}
-									<acronym title='JavaScript Object Notation'>JSON</acronym> that is generated by this
-									editor and allows you to edit properties directly and apply them.
-								</p>
-								<textarea
-									value={configTextboxValue}
-									onChange={(event) => setConfigTextbox(event.target.value)}
-								/>
-								<button
-									className='btn full-width'
-									onClick={() => loadConfig(JSON.parse(configTextboxValue))}
-								>
-									Apply
-								</button>
-							</React.Fragment>
-						)}
-					</div>
+					<AdvancedEditor loadConfig={loadConfig} state={state} convertStateToConfig={convertStateToConfig} />
+
 				</section>
 			</section>
 		</ErrorBoundary>