@cdc/map 2.6.3 → 2.6.4

package/src/components/EditorPanel.js

@@ -13,27 +13,25 @@ import { useDebounce } from 'use-debounce';
 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 colorPalettes from '../../../core/data/colorPalettes';
 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 { GET_PALETTE,useColorPalette } from '../hooks/useColorPalette';
+import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox';
+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,6 +105,9 @@ const EditorPanel = (props) => {
 
 	const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0]);
 
+	const {filteredPallets,filteredQualitative,isPaletteReversed,paletteName} = useColorPalette(colorPalettes,state);
+
+
 	const [editorCatOrder, setEditorCatOrder] = useState(state.legend.categoryValuesOrder || []);
 
 	const headerColors = [
@@ -162,7 +163,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);
@@ -183,6 +184,67 @@ 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,
+						[property]: value
+					}
+				})
+				break;
+			case 'hidePrimaryColumnInTooltip':
+				setState({
+					...state,
+					general: {
+						...state.general,
+						[property]: value
+					}
+				})
+				break;
 			case 'showTitle':
 				setState({
 					...state,
@@ -274,12 +336,31 @@ const EditorPanel = (props) => {
 				});
 				break;
 			case 'legendType':
+
+				let testForType = 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' && value !== 'category') {
+					messages.push( 'Error with legend. Primary columns that are text must use a categorical legend type. Try changing the legend type to categorical.' );
+				} else {
+					messages = []
+				}
+
 				setState({
 					...state,
 					legend: {
 						...state.legend,
 						type: value,
 					},
+					runtime: {
+						...state.runtime,
+						editorErrorMessage: messages
+					}
 				});
 				break;
 			case 'legendNumber':
@@ -367,6 +448,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;
@@ -558,6 +653,15 @@ const EditorPanel = (props) => {
 					},
 				});
 				break;
+			case "classificationType":
+				setState({
+				...state,
+				legend: {
+					...state.legend,
+					type: value,
+				},
+				});
+				break;
 			default:
 				console.warn(`Did not recognize editor property.`);
 				break;
@@ -804,7 +908,7 @@ const EditorPanel = (props) => {
 	}, [state]);
 
 	useEffect(() => {
-		if ('category' === state.legend.type && editorCatOrder.length === 0) {
+		if ('category' === state.legend.type) {
 			let arr = runtimeLegend.filter((item) => !item.special).map(({ value }) => value);
 
 			setEditorCatOrder(arr);
@@ -948,7 +1052,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 +1070,7 @@ const EditorPanel = (props) => {
 						)}
 					</select>
 				</label>
-				
+
 				<label>
 					<span className="edit-filterOrder column-heading">Filter Order</span>
 					<select value={filter.order} onChange={ (e) => {
@@ -1009,7 +1118,7 @@ const EditorPanel = (props) => {
 						</Droppable>
 					</DragDropContext>
 				}
-				
+
 			</fieldset>
 		);
 	});
@@ -1043,21 +1152,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) => ({
@@ -1084,8 +1200,20 @@ const EditorPanel = (props) => {
 		));
 	};
 
+	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 +1223,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'>
@@ -1145,7 +1274,15 @@ const EditorPanel = (props) => {
 									{/* 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'>
+												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.geoType}
 												onChange={(event) => {
@@ -1187,6 +1324,7 @@ const EditorPanel = (props) => {
 										>
 											<option value='data'>Data</option>
 											<option value='navigation'>Navigation</option>
+											{ (state.general.geoType === 'world' || state.general.geoType === 'us') && <option value="bubble">Bubble</option>}
 										</select>
 									</label>
 									{/* SubType */}
@@ -1232,7 +1370,14 @@ const EditorPanel = (props) => {
 										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
 										type='textarea'
@@ -1241,6 +1386,14 @@ 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>
+										}
 									/>
 									{'us' === state.general.geoType && (
 										<TextField
@@ -1252,6 +1405,41 @@ const EditorPanel = (props) => {
 											placeholder='Territories'
 										/>
 									)}
+									<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>
 									{/* <label className="checkbox mt-4">
                     <input type="checkbox" checked={ state.general.showDownloadMediaButton } onChange={(event) => { handleEditorChanges("toggleDownloadMediaButton", event.target.checked) }} />
                     <span className="edit-label">Enable Media Download</span>
@@ -1266,7 +1454,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 +1472,222 @@ 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}
+                            />
+                          </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>
+					)}
+
+					{'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 +1700,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 +1835,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
@@ -1572,7 +1848,8 @@ const EditorPanel = (props) => {
 												<option value='equalinterval'>Equal Interval</option>
 												<option value='category'>Categorical</option>
 											</select>
-										</label>
+											</label>
+											)}
 										{'category' !== legend.type && (
 											<label className='checkbox'>
 												<input
@@ -1582,12 +1859,42 @@ 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 +1914,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 +1943,13 @@ const EditorPanel = (props) => {
 														)}
 													</Droppable>
 												</DragDropContext>
-												{editorCatOrder.length >= 9 && (
+												{editorCatOrder.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 +2021,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' && (
 											<label className='checkbox'>
 												<input
 													type='checkbox'
@@ -1718,7 +2041,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 +2097,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 +2119,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 +2141,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 +2207,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 +2252,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,6 +2283,29 @@ const EditorPanel = (props) => {
 										/>
 										<span className='edit-label'>Show Title</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 +2371,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 +2405,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],
@@ -2056,52 +2437,64 @@ const EditorPanel = (props) => {
 												);
 											})}
 									</ul>
+									<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') &&
+										<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>
+									}
 								</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>