Fix bugs in tour

Author: akshay-rajan

main/static/main/js/input.js

@@ -253,6 +253,7 @@ function populateTargetDropdown(columns) {
 
   // Ensure the select dropdown is styled correctly for Bootstrap 5
   targetSelect.classList.add('form-select'); // Updated class for Bootstrap 5
+  tour3();
 }
 
 function clearFile(event) {
@@ -538,3 +539,44 @@ function activateBuildButton() {
   $('#build-btn-div1').removeClass('d-none');
   $('#build-btn-div2').addClass('d-none');
 }
+
+// Tour 3: Started after uploading a dataset in KNN, if the user is on the tour
+function tour3() {
+  if (localStorage.getItem('knn_tour3') === 'start') {
+    localStorage.setItem('knn_tour3', 'end');
+    introJs().setOptions({
+      steps: [
+        {
+          intro: "Great! Now you need to select the features and target variable. For the Iris dataset, we have 4 features and 1 target variable.",
+        },
+        {
+          element: document.querySelector('#features-div'),
+          intro: "Select the features of the Iris flower you want to use to predict the species. Let's predict the species based on the sepal length (SepalLengthCm) and sepal width (SepalWidthCm).",
+        },
+        {
+          element: document.querySelector('#target-div'),
+          intro: "For the Iris dataset, it's the 'Species' column that you want to predict. Select 'Species' as the target variable.",
+        },
+        {
+          element: document.querySelector('#n_neighbors'),
+          intro: "A hyperparameter is a parameter whose value is set before the learning process begins. KNN has a hyperparameter called 'n_neighbors', which is the number of neighbors to consider when classifying a data point. Let's set it as 5.",
+        },
+        {
+          element: document.querySelector('#canvas-1'),
+          intro: "This is a heatmap of the Iris dataset. It shows the correlation between each pair of features. The darker the color, the higher the correlation.",
+        },
+        {
+          element: document.querySelector('#canvas-2'),
+          intro: "This is a scatter plot of the Iris dataset. It shows the relationship between a pair of features. You can select the features you want to plot on the X and Y axes to visualize the data.",
+        },
+        {
+          element: document.querySelector('#build-btn'),
+          intro: "Finally, click 'Build' to train the KNN model.",
+        },
+      ],
+    }).start();
+    document.querySelector('#build-btn'),addEventListener('click', function() {
+      localStorage.setItem('knn_results', 'start'); // Set the next tour to start
+    });
+  }
+}

main/static/main/js/main.js

@@ -54,6 +54,9 @@ async function makePrediction(event) {
     const data = await response.json();
     predictionResult.classList.add('alert-success');
     predictionResult.innerHTML = target + ": " + data.predictions;
+    
+    // If the user is in the platform tour, continue the tour
+    predTour();
   } catch (error) {
     predictionResult.classList.add('alert-danger');
     predictionResult.innerHTML = error.message;
@@ -293,3 +296,32 @@ var bubblyButtons = document.getElementsByClassName("bubbly-button");
 for (var i = 0; i < bubblyButtons.length; i++) {
   bubblyButtons[i].addEventListener('click', animateButton, false);
 }
+
+// Platform tour continues after making a prediction in KNN
+function predTour() {
+  if (localStorage.getItem('prediction') !== 'start') return;
+  localStorage.setItem('prediction', 'end');
+  introJs().setOptions({
+    steps: [
+      {
+        element: document.querySelector('#prediction-result'),
+        intro: "Great job! The model has generated the predicted values based on the input features you provided. This is the class in which the data point you entered belongs to.",
+      },
+      {
+        element: document.querySelector('.table-responsive'),
+        intro: "The table below shows the actual and predicted values for some test data. You can compare the predicted values with the actual values to understand the model's performance.",
+      },
+      {
+        element: document.querySelector('.download-model'),
+        intro: "You can download the trained model (as a .pkl file) by clicking the button below. This saved model can be used to make predictions anytime, and it can be deployed in production systems.",
+      },
+      {
+        element: document.querySelector('.view-code-btn'),
+        intro: "Here, you can view a sample Python code snippet that demonstrates how to train a KNN model using the scikit-learn library. You can replace the example dataset with your own data to train a custom model.",
+      },
+      {
+        intro: "That's it! You have completed the tour of the platform. 12 more algorithms are waiting for you to explore. Don't forget to check out the preprocessing and visualization tools as well. Happy learning!",
+      }
+    ],
+  }).start();
+}

main/templates/main/algorithms.html

@@ -38,7 +38,7 @@ <h1 class="display-3 m-2 title">{{ type }}</h1>
     );
 
   document.addEventListener('DOMContentLoaded', function() {
-    if (localStorage.getItem('algo') !== 'true' && localStorage.getItem('tour') == 'true' && '{{ type }}' == 'Classification') {
+    if (localStorage.getItem('algo') === 'start' && localStorage.getItem('tour') == 'true' && '{{ type }}' == 'Classification') {
       localStorage.setItem('algo', 'true'); // Mark as visited
       introJs().setOptions({
         steps: [

main/templates/main/index.html

@@ -229,7 +229,7 @@ <h6 class="card-subtitle mb-2 text-muted">Supervised Learning</h6>
                     </p>
                 </div>
                 <div class="last mt-auto">
-                    <a href={% url 'classification' %} class="">Go →</a>
+                    <a href={% url 'classification' %} class="" id="classification-link">Go →</a>
                 </div>
             </div>
         </div>
@@ -360,7 +360,8 @@ <h5>Preprocessing</h5>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script>
     function homeTour() {
-      localStorage.setItem('tour', 'true');
+      localStorage.setItem('tour', 'true'); // Indicate that the user has started the tour
+      localStorage.setItem('visited', 'true'); // Prevents the notification from showing again
       introJs().setOptions({
         steps: [
           {
@@ -386,12 +387,13 @@ <h5>Preprocessing</h5>
         ]
       }).start();
     }
+    // Show a notification asking the user to start the tour of the platform
     document.addEventListener('DOMContentLoaded', function() {
-      // Check if the user has visited the site before
+      // Check if the user has denied the tour before by closing the notification
       if (localStorage.getItem('visited') === 'true') {
         return;
       }
-      // Start the intro.js tour
+      // Start the notification after 1 second
       setTimeout(function() {
         showNotification({
           title: "Welcome to Expert System!", 
@@ -401,7 +403,15 @@ <h5>Preprocessing</h5>
           onDismiss: () => localStorage.setItem('visited', 'true'),
         });
       }, 1000);
-    });    
+
+      // Initialize Classification Tour if the user is navigating to it
+      document.querySelector('#classification-link').addEventListener('click', function() {
+        if (localStorage.getItem('algo') !== 'true' && localStorage.getItem('tour') == 'true') {
+          localStorage.setItem('algo', 'start');
+        }
+      });
+    });
+
 
     $(document).ready(function() {
       $('.fade-in').fadeIn(500);

main/templates/main/input.html

@@ -214,11 +214,12 @@ <h2 class="accordion-header" id="headingOne">
 <script src="https://d3js.org/d3.v4.js"></script>
 <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-<script src={% static "main/js/input.js" %}></script>
 <script>
   document.addEventListener('DOMContentLoaded', function() {
     if (localStorage.getItem('knn') === 'start' && document.querySelector('.dataset-selection')) {
-      localStorage.setItem('knn', 'true'); // Mark as visited
+      localStorage.setItem('knn', 'true');
+      
+      // First tour: Introduction to the dataset selection
       introJs().setOptions({
         steps: [
           {
@@ -228,58 +229,35 @@ <h2 class="accordion-header" id="headingOne">
             element: document.querySelector('.dataset-selection-preload'),
             intro: "Click here to see available datasets for classification.",
           },
-          {
-            element: document.querySelector('#preloaded-div'),
-            intro: "Go for the 'Iris' dataset. It's a classic!",
-          },
-          {
-            element: document.querySelector('#upload-btn'),
-            intro: "Click 'Next' to proceed.",
-          },
         ],
       }).start();
-      document.querySelector('#upload-btn').addEventListener('click', function() {
-        // End the previous tour
-        introJs().exit();
-        // Start the next tour after the info is populated by js
-        if (document.querySelector('#features-div').classList.contains('d-none')) {
+
+      // Tour 2: Selecting a dataset
+      document.querySelector('.dataset-selection-preload').addEventListener('click', function() {
+        introJs().exit(); // End the previous tour
+        setTimeout(() => {
           introJs().setOptions({
             steps: [
               {
-                intro: "Great! Now you need to select the features and target variable. For the Iris dataset, we have 4 features and 1 target variable.",
-              },
-              {
-                element: document.querySelector('#features-div'),
-                intro: "Select the features of the Iris flower you want to use to predict the species. Let's predict the species based on the sepal length (SepalLengthCm) and sepal width (SepalWidthCm).",
-              },
-              {
-                element: document.querySelector('#target-div'),
-                intro: "For the Iris dataset, it's the 'Species' column that you want to predict. Select 'Species' as the target variable.",
+                element: document.querySelector('#preloaded-div'),
+                intro: "Go for the 'Iris' dataset. It contains 150 samples of Iris flowers with 4 features: sepal length, sepal width, petal length, and petal width.",
               },
               {
-                element: document.querySelector('#n_neighbors'),
-                intro: "A hyperparameter is a parameter whose value is set before the learning process begins. KNN has a hyperparameter called 'n_neighbors', which is the number of neighbors to consider when classifying a data point. Let's set it as 5.",
-              },
-              {
-                element: document.querySelector('#canvas-1'),
-                intro: "This is a heatmap of the Iris dataset. It shows the correlation between each pair of features. The darker the color, the higher the correlation.",
-              },
-              {
-                element: document.querySelector('#canvas-2'),
-                intro: "This is a scatter plot of the Iris dataset. It shows the relationship between a pair of features. You can select the features you want to plot on the X and Y axes to visualize the data.",
-              },
-              {
-                element: document.querySelector('#build-btn'),
-                intro: "Finally, click 'Build' to train the KNN model.",
+                element: document.querySelector('#upload-btn'),
+                intro: "Click 'Next' to proceed.",
               },
             ],
           }).start();
-          document.querySelector('#build-btn'),addEventListener('click', function() {
-            localStorage.setItem('knn_results', 'start');
-          });
-        }
+        }, 500); // Delay the start of the next tour, to ensure the component is rendered
+      });
+
+      document.querySelector('#upload-btn').addEventListener('click', function() {
+        introJs().exit();
+        localStorage.setItem('knn_tour3', 'start');
+        // The tour3 will be called in the input.js file
       });
     }
   });
 </script>
+<script src={% static "main/js/input.js" %}></script>
 {% endblock %}

main/templates/main/knn.html

@@ -145,39 +145,14 @@ <h3 class="m-2" id="predict-title">Predict</h3>
           },
           {
             element: document.querySelector('.pred-right'),
-            intro: "You can use this trained model to generate predictions based on the input features you provide. Enter some values for each feature and click 'Predict'.",
+            intro: "You can use this trained model to generate predictions based on the input features you provide. Enter some values for each feature (e.g. SepalLengthCm = 4, SepalWidthCm = 2) and click 'Predict'.",
           },
         ],
       }).start();
       document.querySelector('.predict-btn').addEventListener('click', function() {
         introJs().exit();
-        // Ensure that the prediciton result is displayed before the next step
-        if (document.querySelector('#prediction-result').classList.contains('d-none')) {
-          document.querySelector('.predict-btn').click();
-        }
-        introJs().setOptions({
-          steps: [
-            {
-              element: document.querySelector('#prediction-result'),
-              intro: "Great job! The model has generated the predicted values based on the input features you provided. This is the class in which the data point you entered belongs to.",
-            },
-            {
-              element: document.querySelector('.table-responsive'),
-              intro: "The table below shows the actual and predicted values for some test data. You can compare the predicted values with the actual values to understand the model's performance.",
-            },
-            {
-              element: document.querySelector('.download-model'),
-              intro: "You can download the trained model (as a .pkl file) by clicking the button below. This saved model can be used to make predictions anytime, and it can be deployed in production systems.",
-            },
-            {
-              element: document.querySelector('.view-code-btn'),
-              intro: "Here, you can view a sample Python code snippet that demonstrates how to train a KNN model using the scikit-learn library. You can replace the example dataset with your own data to train a custom model.",
-            },
-            {
-              intro: "That's it! You have completed the tour of the platform. 12 more algorithms are waiting for you to explore. Don't forget to check out the preprocessing and visualization tools as well. Happy learning!",
-            }
-          ],
-        }).start();
+        localStorage.setItem('prediction', 'start');
+        // predTour will be called in the 
       });
     }
   });