chore: testing improvements

Author: HardeepAsrani

classes/Visualizer/ChartBuilder/src/AIBuilder/api.js

@@ -5,11 +5,15 @@
 
 const { ajaxUrl, nonce } = window.vizAIBuilder || {};
 
-async function post( action, body ) {
+async function post( action, body, options = {} ) {
+	const { nonceOverride = null, omitEmpty = false } = options;
 	const form = new FormData();
 	form.append( 'action', action );
-	form.append( 'nonce', nonce );
+	form.append( 'nonce', nonceOverride || nonce );
 	for ( const [ key, val ] of Object.entries( body ) ) {
+		if ( omitEmpty && ( val === null || val === undefined || val === '' ) ) {
+			continue;
+		}
 		form.append( key, val );
 	}
 	const res  = await fetch( ajaxUrl, { method: 'POST', body: form } );
@@ -51,61 +55,33 @@ export async function saveChart( chartId, title, code ) {
 
 // ── Upload helpers ─────────────────────────────────────────────────────────────
 
-/** Build a FormData for any upload call, including the per-chart upload nonce. */
-function uploadForm( action, chartId, uploadNonce, fields = {} ) {
-	const form = new FormData();
-	form.append( 'action', action );
-	form.append( 'nonce', uploadNonce );
-	form.append( 'chart_id', chartId );
-	for ( const [ key, val ] of Object.entries( fields ) ) {
-		if ( val !== null && val !== undefined && val !== '' ) {
-			form.append( key, val );
-		}
-	}
-	return form;
-}
-
-async function uploadFetch( form ) {
-	const res = await fetch( ajaxUrl, { method: 'POST', body: form } );
-	let json;
-	try {
-		json = await res.json();
-	} catch {
-		throw new Error( 'Server returned an unexpected response.' );
-	}
-	if ( ! json.success ) {
-		throw new Error( json.data?.message || 'Upload failed.' );
-	}
-	return json.data;
-}
-
 /** Upload pasted CSV string. Returns { series, data }. */
 export async function uploadCsvString( chartId, uploadNonce, csvData ) {
-	const form = uploadForm( 'visualizer-ai-upload', chartId, uploadNonce, {
+	return post( 'visualizer-ai-upload', {
+		chart_id: chartId,
 		source_type: 'csv_string',
 		csv_data: csvData,
-	} );
-	return uploadFetch( form );
+	}, { nonceOverride: uploadNonce, omitEmpty: true } );
 }
 
 /** Upload a CSV or XLSX file. Returns { series, data }. */
 export async function uploadFile( chartId, uploadNonce, file ) {
 	const ext  = file.name.split( '.' ).pop().toLowerCase();
-	const form = uploadForm( 'visualizer-ai-upload', chartId, uploadNonce, {
+	return post( 'visualizer-ai-upload', {
+		chart_id: chartId,
 		source_type: ext === 'xlsx' ? 'xlsx_file' : 'csv_file',
-	} );
-	form.append( 'data_file', file );
-	return uploadFetch( form );
+		data_file: file,
+	}, { nonceOverride: uploadNonce, omitEmpty: true } );
 }
 
 /** Upload a remote CSV/XLSX URL. Returns { series, data }. */
 export async function uploadFileUrl( chartId, uploadNonce, url, schedule = '' ) {
-	const form = uploadForm( 'visualizer-ai-upload', chartId, uploadNonce, {
+	return post( 'visualizer-ai-upload', {
+		chart_id: chartId,
 		source_type: 'file_url',
 		file_url:    url,
 		schedule:    schedule,
-	} );
-	return uploadFetch( form );
+	}, { nonceOverride: uploadNonce, omitEmpty: true } );
 }
 
 /** Upload a JSON URL source. Returns { series, data }. */
@@ -115,7 +91,8 @@ export async function uploadJsonUrl( chartId, uploadNonce, params ) {
 		auth = '', username = '', password = '', headers = '',
 		schedule = '',
 	} = params;
-	const form = uploadForm( 'visualizer-ai-upload', chartId, uploadNonce, {
+	return post( 'visualizer-ai-upload', {
+		chart_id: chartId,
 		source_type:   'json_url',
 		json_url:      url,
 		json_root:     root,
@@ -126,8 +103,7 @@ export async function uploadJsonUrl( chartId, uploadNonce, params ) {
 		json_password: password,
 		json_headers:  headers,
 		json_schedule: schedule,
-	} );
-	return uploadFetch( form );
+	}, { nonceOverride: uploadNonce, omitEmpty: true } );
 }
 
 // ── AI generation helpers ──────────────────────────────────────────────────────
@@ -168,7 +144,8 @@ export async function uploadDbQuery( chartId, uploadNonce, query, dbParams = {}
 		host = '', port = 3306, name = '',
 		username = '', password = '', type = 'mysql',
 	} = dbParams;
-	const form = uploadForm( 'visualizer-ai-upload', chartId, uploadNonce, {
+	return post( 'visualizer-ai-upload', {
+		chart_id: chartId,
 		source_type:  'db_query',
 		db_query:     query,
 		db_host:      host,
@@ -177,6 +154,5 @@ export async function uploadDbQuery( chartId, uploadNonce, query, dbParams = {}
 		db_username:  username,
 		db_password:  password,
 		db_type:      type,
-	} );
-	return uploadFetch( form );
+	}, { nonceOverride: uploadNonce, omitEmpty: true } );
 }

classes/Visualizer/ChartBuilder/src/AIBuilder/index.js

@@ -2,7 +2,7 @@
  * AI Builder — two-column layout matching layout.html design
  *
  * Left  : Step 1 (DataSource) + Step 2 (Describe)
- * Right : Live preview sidebar (256px)
+ * Right : Live preview sidebar (560px)
  * Footer: Cancel + Generate / Publish actions
  */
 import { useState, useEffect, useRef } from '@wordpress/element';
@@ -579,6 +579,12 @@ export default function AIBuilder( { onClose, initialChartId = null } ) {
 									<Text fontSize="12px" color="#b45309">{ editorError }</Text>
 								</Box>
 							) }
+							<Text fontSize="11px" color={ C.gray2 }>
+								{ __( 'Need a refresher? Read the D3 documentation to understand selections, scales, and shapes:', 'visualizer' ) }{' '}
+								<a href="https://d3js.org/getting-started" target="_blank" rel="noopener noreferrer">
+									{ __( 'd3js.org/getting-started', 'visualizer' ) }
+								</a>
+							</Text>
 							<Flex align="center" justify="flex-end" gap="2">
 								<PillBtn onClick={ closeEditor } bg="white" color={ C.gray1 } border="1.5px solid" borderColor={ C.border }>
 									{ __( 'Cancel', 'visualizer' ) }
@@ -628,16 +634,22 @@ export default function AIBuilder( { onClose, initialChartId = null } ) {
 								>
 									<Box
 										as="textarea"
-										w="100%" h="68px"
+										w="100%" minH="68px"
 										border="none" outline="none"
 										bg="transparent"
 										p="10px 12px"
 										fontSize="13px" fontFamily="inherit"
-										resize="none"
+										resize="vertical"
 										color={ C.dark }
 										placeholder={ __( 'e.g. Create a grouped bar chart comparing revenue and profit by quarter', 'visualizer' ) }
 										value={ prompt }
 										onChange={ isLocked ? undefined : ( e ) => setPrompt( e.target.value ) }
+										onKeyDown={ isLocked ? undefined : ( e ) => {
+											if ( e.key === 'Enter' && ! e.shiftKey ) {
+												e.preventDefault();
+												if ( canGenerate ) handleGenerate();
+											}
+										} }
 										disabled={ isLocked }
 										display="block"
 										sx={ { '&::placeholder': { color: C.gray3 } } }
@@ -700,6 +712,9 @@ export default function AIBuilder( { onClose, initialChartId = null } ) {
 										) }
 									</Flex>
 								</Box>
+								<Text fontSize="11px" color={ C.gray2 }>
+									{ __( 'Press Enter to generate. Shift + Enter for a new line.', 'visualizer' ) }
+								</Text>
 
 								<input
 									ref={ refImageInputRef }
@@ -759,7 +774,7 @@ export default function AIBuilder( { onClose, initialChartId = null } ) {
 				</Box>
 
 				{ /* ── Right: rebuilt preview panel ─────────────────────────────── */ }
-				<Box w="460px" flexShrink={ 0 } display="flex" flexDirection="column" bg="#f7f7f8" borderLeft="1px solid #e2e3e6">
+				<Box w="560px" flexShrink={ 0 } display="flex" flexDirection="column" bg="#f7f7f8" borderLeft="1px solid #e2e3e6">
 					<Flex align="center" justify="space-between" px="5" py="4" borderBottom="1px solid #e2e3e6">
 						<Box>
 							<Text fontSize="12px" fontWeight="700" color={ C.dark } letterSpacing="0.02em">

classes/Visualizer/ChartBuilder/src/ChooserModal.js

@@ -5,9 +5,18 @@
  *   1. Classic Builder — opens the existing iframe-based wizard
  *   2. AI Chart Builder — opens the new D3-powered React wizard
  */
+import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 function ChooserModal( { isOpen, onClassic, onAIBuilder, onClose } ) {
+	const [ rememberChoice, setRememberChoice ] = useState( false );
+
+	useEffect( () => {
+		if ( isOpen ) {
+			setRememberChoice( false );
+		}
+	}, [ isOpen ] );
+
 	if ( ! isOpen ) {
 		return null;
 	}
@@ -34,7 +43,10 @@ function ChooserModal( { isOpen, onClassic, onAIBuilder, onClose } ) {
 
 				<div className="viz-chooser-options">
 
-					<button className="viz-chooser-option viz-chooser-option--ai" onClick={ onAIBuilder }>
+					<button
+						className="viz-chooser-option viz-chooser-option--ai"
+						onClick={ () => onAIBuilder( rememberChoice ) }
+					>
 						<span className="viz-chooser-option__badge">
 							{ __( 'New', 'visualizer' ) }
 						</span>
@@ -51,7 +63,10 @@ function ChooserModal( { isOpen, onClassic, onAIBuilder, onClose } ) {
 						</span>
 					</button>
 
-					<button className="viz-chooser-option" onClick={ onClassic }>
+					<button
+						className="viz-chooser-option"
+						onClick={ () => onClassic( rememberChoice ) }
+					>
 						<span className="viz-chooser-option__icon viz-chooser-option__icon--classic">
 							<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 								<rect x="3" y="14" width="4" height="7" rx="1" fill="currentColor"/>
@@ -69,6 +84,20 @@ function ChooserModal( { isOpen, onClassic, onAIBuilder, onClose } ) {
 
 				</div>
 
+				<div className="viz-chooser-remember">
+					<label className="viz-chooser-remember__label">
+						<input
+							type="checkbox"
+							checked={ rememberChoice }
+							onChange={ ( event ) => setRememberChoice( event.target.checked ) }
+						/>
+						<span>{ __( 'Don\'t ask me again', 'visualizer' ) }</span>
+					</label>
+					<p className="viz-chooser-remember__help">
+						{ __( 'We will open your selected builder by default next time.', 'visualizer' ) }
+					</p>
+				</div>
+
 				<button className="viz-chooser-cancel" onClick={ onClose }>
 					{ __( 'Cancel', 'visualizer' ) }
 				</button>

classes/Visualizer/ChartBuilder/src/index.js

@@ -11,6 +11,24 @@ import ChooserModal from './ChooserModal';
 import AIBuilder    from './AIBuilder/index';
 import './style.scss';
 
+const CHOOSER_STORAGE_KEY = 'viz_chart_builder_default';
+
+function getStoredBuilderChoice() {
+	try {
+		return window.localStorage.getItem( CHOOSER_STORAGE_KEY );
+	} catch ( err ) {
+		return null;
+	}
+}
+
+function setStoredBuilderChoice( choice ) {
+	try {
+		window.localStorage.setItem( CHOOSER_STORAGE_KEY, choice );
+	} catch ( err ) {
+		// ignore storage failures
+	}
+}
+
 function ChartBuilderApp() {
 	// mode: 'hidden' | 'chooser' | 'ai-builder'
 	const [ mode,            setMode            ] = useState( 'hidden' );
@@ -21,23 +39,45 @@ function ChartBuilderApp() {
 		window.vizOpenChartChooser = ( cb ) => {
 			setEditChartId( null );
 			setClassicCallback( () => cb );
+			const storedChoice = getStoredBuilderChoice();
+			if ( storedChoice === 'classic' ) {
+				cb();
+				return;
+			}
+			if ( storedChoice === 'ai' ) {
+				setMode( 'ai-builder' );
+				return;
+			}
 			setMode( 'chooser' );
 		};
 		window.vizOpenAIBuilderEdit = ( chartId ) => {
 			setEditChartId( String( chartId ) );
 			setMode( 'ai-builder' );
 		};
+		window.vizOpenAIBuilderNew = () => {
+			setEditChartId( null );
+			setMode( 'ai-builder' );
+		};
 		return () => {
 			delete window.vizOpenChartChooser;
 			delete window.vizOpenAIBuilderEdit;
+			delete window.vizOpenAIBuilderNew;
 		};
 	}, [] );
 
-	function handleClassic() {
+	function handleClassic( rememberChoice = false ) {
+		if ( rememberChoice ) {
+			setStoredBuilderChoice( 'classic' );
+		}
 		setMode( 'hidden' );
 		if ( typeof classicCallback === 'function' ) classicCallback();
 	}
-	function handleAIBuilder() { setMode( 'ai-builder' ); }
+	function handleAIBuilder( rememberChoice = false ) {
+		if ( rememberChoice ) {
+			setStoredBuilderChoice( 'ai' );
+		}
+		setMode( 'ai-builder' );
+	}
 	function handleClose()     { setMode( 'hidden' ); setEditChartId( null ); }
 
 	return (

classes/Visualizer/ChartBuilder/src/style.scss

@@ -142,6 +142,34 @@
 	line-height: 1.5;
 }
 
+.viz-chooser-remember {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 6px;
+	margin-bottom: 14px;
+}
+
+.viz-chooser-remember__label {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 13px;
+	color: #1d2327;
+	cursor: pointer;
+}
+
+.viz-chooser-remember__label input {
+	width: 16px;
+	height: 16px;
+}
+
+.viz-chooser-remember__help {
+	margin: 0;
+	font-size: 12px;
+	color: #646970;
+}
+
 .viz-chooser-cancel {
 	background: none;
 	border: none;