From f56181baf7cfaf03cc71664bf6fce64e8c1f557c Mon Sep 17 00:00:00 2001
From: Hardeep Asrani <hardeepasrani@gmail.com>
Date: Mon, 16 Mar 2026 19:30:08 +0530
Subject: [PATCH 1/2] feat: improve import from WordPress and database UX with
 stepped flow

- Rename "Create Filter"/"Create Query" buttons to "1. Choose Data Source"
- Add "2. Set Sync Schedule" accordion toggle (always visible, animated chevron)
- Move schedule selector under step-2 toggle for cleaner stepped UX
---
 classes/Visualizer/Render/Layout.php | 124 ++++++++++++++++-----------
 css/frame.css                        |  42 +++++++++
 js/frame.js                          |   7 ++
 3 files changed, 124 insertions(+), 49 deletions(-)

diff --git a/classes/Visualizer/Render/Layout.php b/classes/Visualizer/Render/Layout.php
index 3fbb4d2a..8d935136 100644
--- a/classes/Visualizer/Render/Layout.php
+++ b/classes/Visualizer/Render/Layout.php
@@ -884,7 +884,7 @@ public static function _renderTabBasic( $args ) {
 														// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
 														$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
 														?>
-														<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
+														<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
 														<?php
 													}
 														do_action( 'visualizer_chart_schedules_spl', 'csv', $chart_id, 1 );
@@ -934,7 +934,7 @@ public static function _renderTabBasic( $args ) {
 																	// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
 																	$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
 																	?>
-																	<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
+																	<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
 																	<?php
 																}
 																do_action( 'visualizer_chart_schedules_spl', 'json', $chart_id, 1 );
@@ -1039,37 +1039,50 @@ class="dashicons dashicons-lock"></span></h2>
 								);
 							?>
 							<!-- import from WordPress -->
-							<li class="viz-group visualizer_source_query_wp <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-wp' ); ?> ">
+							<li class="viz-group visualizer_source_query_wp <?php echo esc_attr( apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-wp' ) ); ?> ">
 								<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from WordPress', 'visualizer' ); ?><span
 											class="dashicons dashicons-lock"></span></h2>
 								<div class="viz-group-content edit-data-content">
 									<div>
 										<p class="viz-group-description"><?php _e( 'You can import data from WordPress here.', 'visualizer' ); ?></p>
-										<form id="vz-filter-wizard" action="<?php echo $save_filter; ?>" method="post" target="thehole">
-											<p class="viz-group-description"><?php _e( 'How often do you want to refresh the data from WordPress.', 'visualizer' ); ?></p>
-											<select name="refresh" id="vz-filter-import-time" class="visualizer-select">
+										<form id="vz-filter-wizard" action="<?php echo esc_url( $save_filter ); ?>" method="post" target="thehole">
 											<?php
-											$bttn_label = 'visualizer_source_query_wp' === $source_of_chart ? __( 'Modify Filter', 'visualizer' ) : __( 'Create Filter', 'visualizer' );
-											$hours     = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
-											$schedules = apply_filters(
-												'visualizer_chart_schedules', array(
-													'-1' => __( 'One-time', 'visualizer' ),
-												),
-												'wp',
-												$chart_id
-											);
-											foreach ( $schedules as $num => $name ) {
-												$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
-												?>
-												<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
-													<?php
-											}
-											do_action( 'visualizer_chart_schedules_spl', 'wp', $chart_id, 1 );
+											$is_wp_source = 'visualizer_source_query_wp' === $source_of_chart;
+											$hours        = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
+											$bttn_label   = $is_wp_source ? __( '1. Modify Data Source', 'visualizer' ) : __( '1. Choose Data Source', 'visualizer' );
 											?>
-											</select>
 
-											<input type="button" id="filter-chart-button" class="button button-secondary show-chart-toggle" value="<?php echo $bttn_label; ?>" data-current="chart" data-t-filter="<?php _e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo $bttn_label; ?>">
-											<input type="button" id="db-filter-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
+											<!-- Step 1: Choose / modify data source -->
+											<input type="button" id="filter-chart-button" class="button button-secondary show-chart-toggle vz-import-step-btn" value="<?php echo esc_attr( $bttn_label ); ?>" data-current="chart" data-t-filter="<?php esc_attr_e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo esc_attr( $bttn_label ); ?>">
+
+											<!-- Step 2: Sync schedule toggle -->
+											<div id="vz-wp-sync-step">
+												<button type="button" id="vz-wp-sync-btn" class="vz-import-step-toggle" aria-expanded="<?php echo $is_wp_source ? 'true' : 'false'; ?>">
+													<?php _e( '2. Set Sync Schedule', 'visualizer' ); ?>
+													<span class="dashicons dashicons-arrow-down-alt2"></span>
+												</button>
+												<div id="vz-wp-sync-options"<?php echo $is_wp_source ? '' : ' style="display:none"'; ?>>
+													<select name="refresh" id="vz-filter-import-time" class="visualizer-select">
+												<?php
+												$schedules = apply_filters(
+													'visualizer_chart_schedules', array(
+														'-1' => __( 'One-time', 'visualizer' ),
+													),
+													'wp',
+													$chart_id
+												);
+												foreach ( $schedules as $num => $name ) {
+													$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
+													?>
+													<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
+														<?php
+												}
+												do_action( 'visualizer_chart_schedules_spl', 'wp', $chart_id, 1 );
+												?>
+												</select>
+													<input type="button" id="db-filter-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
+												</div>
+											</div>
 										</form>
 										<?php echo apply_filters( 'visualizer_pro_upsell', '', 'import-wp' ); ?>
 									</div>
@@ -1138,7 +1151,7 @@ class="dashicons dashicons-lock"></span></h2>
 														foreach ( $schedules as $num => $name ) {
 															$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
 															?>
-															<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
+															<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
 															<?php
 														}
 														do_action( 'visualizer_chart_schedules_spl', 'json', $chart_id, 1 );
@@ -1185,38 +1198,51 @@ class="dashicons dashicons-lock"></span></h2>
 								);
 							?>
 							<!-- import from db -->
-							<li class="viz-group visualizer_source_query <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'db-query' ); ?>">
+							<li class="viz-group visualizer_source_query <?php echo esc_attr( apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'db-query' ) ); ?>">
 							<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from database', 'visualizer' ); ?><span
 								class="dashicons dashicons-lock"></span></h2>
 							<div class="viz-group-content edit-data-content">
 							<div>
 								<p class="viz-group-description"><?php _e( 'You can import data from the database here.', 'visualizer' ); ?></p>
-								<form id="vz-db-wizard" action="<?php echo $save_query; ?>" method="post" target="thehole">
-									<p class="viz-group-description"><?php _e( 'How often do you want to refresh the data from the database.', 'visualizer' ); ?></p>
-									<select name="refresh" id="vz-db-import-time" class="visualizer-select">
+								<form id="vz-db-wizard" action="<?php echo esc_url( $save_query ); ?>" method="post" target="thehole">
 									<?php
-									$bttn_label = 'visualizer_source_query' === $source_of_chart ? __( 'Modify Query', 'visualizer' ) : __( 'Create Query', 'visualizer' );
-									$hours     = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
-									$schedules = apply_filters(
-										'visualizer_chart_schedules', array(
-											'-1' => __( 'One-time', 'visualizer' ),
-										),
-										'db',
-										$chart_id
-									);
-									foreach ( $schedules as $num => $name ) {
-										$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
-										?>
-										<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
-											<?php
-									}
-									do_action( 'visualizer_chart_schedules_spl', 'db', $chart_id, 1 );
+									$is_db_source = 'visualizer_source_query' === $source_of_chart;
+									$hours        = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
+									$bttn_label   = $is_db_source ? __( '1. Modify Data Source', 'visualizer' ) : __( '1. Choose Data Source', 'visualizer' );
 									?>
-									</select>
+
+									<!-- Step 1: Choose / modify data source -->
 									<input type="hidden" name="params" id="viz-db-wizard-params">
+									<input type="button" id="db-chart-button" class="button button-secondary show-chart-toggle vz-import-step-btn" value="<?php echo esc_attr( $bttn_label ); ?>" data-current="chart" data-t-filter="<?php esc_attr_e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo esc_attr( $bttn_label ); ?>">
 
-									<input type="button" id="db-chart-button" class="button button-secondary show-chart-toggle" value="<?php echo $bttn_label; ?>" data-current="chart" data-t-filter="<?php _e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo $bttn_label; ?>">
-									<input type="button" id="db-chart-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
+									<!-- Step 2: Sync schedule toggle -->
+									<div id="vz-db-sync-step">
+										<button type="button" id="vz-db-sync-btn" class="vz-import-step-toggle" aria-expanded="<?php echo $is_db_source ? 'true' : 'false'; ?>">
+											<?php _e( '2. Set Sync Schedule', 'visualizer' ); ?>
+											<span class="dashicons dashicons-arrow-down-alt2"></span>
+										</button>
+										<div id="vz-db-sync-options"<?php echo $is_db_source ? '' : ' style="display:none"'; ?>>
+											<select name="refresh" id="vz-db-import-time" class="visualizer-select">
+										<?php
+										$schedules = apply_filters(
+											'visualizer_chart_schedules', array(
+												'-1' => __( 'One-time', 'visualizer' ),
+											),
+											'db',
+											$chart_id
+										);
+										foreach ( $schedules as $num => $name ) {
+											$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
+											?>
+											<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
+												<?php
+										}
+										do_action( 'visualizer_chart_schedules_spl', 'db', $chart_id, 1 );
+										?>
+										</select>
+											<input type="button" id="db-chart-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
+										</div>
+									</div>
 									<?php echo apply_filters( 'visualizer_pro_upsell', '', 'db-query' ); ?>
 								</form>
 							</div>
diff --git a/css/frame.css b/css/frame.css
index 1d36c989..9d72ec36 100644
--- a/css/frame.css
+++ b/css/frame.css
@@ -1016,6 +1016,48 @@ button#editor-chart-button {
 	text-align: center;
 }
 
+/* Import steps — stepped data-source + schedule flow */
+.vz-import-step-btn {
+	width: 100%;
+	margin-bottom: 4px !important;
+	text-align: left;
+}
+
+.vz-import-step-toggle {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	margin: 0;
+	padding: 5px 10px;
+	background: #f0f0f1;
+	border: 1px solid #c3c4c7;
+	border-radius: 2px;
+	cursor: pointer;
+	font-size: 13px;
+	color: #50575e;
+	line-height: 2;
+}
+
+.vz-import-step-toggle:hover {
+	background: #e5e5e5;
+	border-color: #a7aaad;
+}
+
+.vz-import-step-toggle .dashicons {
+	transition: transform 0.2s ease;
+	flex-shrink: 0;
+}
+
+.vz-import-step-toggle[aria-expanded="true"] .dashicons {
+	transform: rotate(180deg);
+}
+
+#vz-wp-sync-options,
+#vz-db-sync-options {
+	padding-top: 8px;
+}
+
 #sidebar {
 	border-left: 1px solid #ddd;
 	background: #f3f3f3;
diff --git a/js/frame.js b/js/frame.js
index 592244d8..45b29b4e 100644
--- a/js/frame.js
+++ b/js/frame.js
@@ -445,6 +445,13 @@
             }
         } );
 
+        $( document ).on( 'click', '#vz-db-sync-btn', function(){
+            var $options = $( '#vz-db-sync-options' );
+            var isOpen   = $options.is( ':visible' );
+            $options.toggle();
+            $( this ).attr( 'aria-expanded', ! isOpen );
+        } );
+
         $( '#db-chart-save-button' ).on( 'click', function(){
             // submit only if a query has been provided.
             if($('#db-query-form .visualizer-db-query').val().length > 0){

From e41d7d60c356be77d5a4c8a1fa942831039a784d Mon Sep 17 00:00:00 2001
From: Hardeep Asrani <hardeepasrani@gmail.com>
Date: Tue, 17 Mar 2026 16:33:38 +0530
Subject: [PATCH 2/2] fix: qa issues

---
 classes/Visualizer/Render/Layout.php |  6 +++---
 js/frame.js                          | 11 +++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/classes/Visualizer/Render/Layout.php b/classes/Visualizer/Render/Layout.php
index 8d935136..8a337f01 100644
--- a/classes/Visualizer/Render/Layout.php
+++ b/classes/Visualizer/Render/Layout.php
@@ -1049,7 +1049,7 @@ class="dashicons dashicons-lock"></span></h2>
 											<?php
 											$is_wp_source = 'visualizer_source_query_wp' === $source_of_chart;
 											$hours        = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
-											$bttn_label   = $is_wp_source ? __( '1. Modify Data Source', 'visualizer' ) : __( '1. Choose Data Source', 'visualizer' );
+											$bttn_label   = $is_wp_source ? '1. ' . __( 'Modify Data Source', 'visualizer' ) : '1. ' . __( 'Choose Data Source', 'visualizer' );
 											?>
 
 											<!-- Step 1: Choose / modify data source -->
@@ -1058,7 +1058,7 @@ class="dashicons dashicons-lock"></span></h2>
 											<!-- Step 2: Sync schedule toggle -->
 											<div id="vz-wp-sync-step">
 												<button type="button" id="vz-wp-sync-btn" class="vz-import-step-toggle" aria-expanded="<?php echo $is_wp_source ? 'true' : 'false'; ?>">
-													<?php _e( '2. Set Sync Schedule', 'visualizer' ); ?>
+													<?php echo '2. ' . __( 'Set Sync Schedule', 'visualizer' ); ?>
 													<span class="dashicons dashicons-arrow-down-alt2"></span>
 												</button>
 												<div id="vz-wp-sync-options"<?php echo $is_wp_source ? '' : ' style="display:none"'; ?>>
@@ -1218,7 +1218,7 @@ class="dashicons dashicons-lock"></span></h2>
 									<!-- Step 2: Sync schedule toggle -->
 									<div id="vz-db-sync-step">
 										<button type="button" id="vz-db-sync-btn" class="vz-import-step-toggle" aria-expanded="<?php echo $is_db_source ? 'true' : 'false'; ?>">
-											<?php _e( '2. Set Sync Schedule', 'visualizer' ); ?>
+											<?php echo '2. ' . __( 'Set Sync Schedule', 'visualizer' ); ?>
 											<span class="dashicons dashicons-arrow-down-alt2"></span>
 										</button>
 										<div id="vz-db-sync-options"<?php echo $is_db_source ? '' : ' style="display:none"'; ?>>
diff --git a/js/frame.js b/js/frame.js
index 45b29b4e..4d00a46a 100644
--- a/js/frame.js
+++ b/js/frame.js
@@ -371,6 +371,8 @@
     function init_filter_import() {
         $( '#db-filter-save-button' ).on( 'click', function(){
             $('#vz-filter-wizard').submit();
+            $( '#vz-wp-sync-options' ).hide();
+            $( '#vz-wp-sync-btn' ).attr( 'aria-expanded', false );
         });
     }
 
@@ -452,11 +454,20 @@
             $( this ).attr( 'aria-expanded', ! isOpen );
         } );
 
+        $( document ).on( 'click', '#vz-wp-sync-btn', function(){
+            var $options = $( '#vz-wp-sync-options' );
+            var isOpen   = $options.is( ':visible' );
+            $options.toggle();
+            $( this ).attr( 'aria-expanded', ! isOpen );
+        } );
+
         $( '#db-chart-save-button' ).on( 'click', function(){
             // submit only if a query has been provided.
             if($('#db-query-form .visualizer-db-query').val().length > 0){
                 $('#viz-db-wizard-params').val($('#db-query-form').serialize());
                 $('#vz-db-wizard').submit();
+                $( '#vz-db-sync-options' ).hide();
+                $( '#vz-db-sync-btn' ).attr( 'aria-expanded', false );
             }else{
                 $('#canvas').unlock();
             }