From 5ad8de1610e609dd3a9a5769b37aff716807318b Mon Sep 17 00:00:00 2001
From: BouzelatTarek <106556135+BouzelatTarek@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:41:52 +0100
Subject: [PATCH] fix: bugs and improve the form page

---
 dev-page/form-page.html                       |   7 +-
 dev-page/scripts/init-form-page.js            |  89 ++++++-
 src/assets/stylesheets/sparnatural-form.scss  | 229 +++++++++++++++++-
 src/sparnatural-form/components/CleanQuery.ts | 114 +++++++--
 .../components/FormFieldGenerator.ts          | 106 +++++++-
 .../components/SparnaturalFormComponent.ts    |  99 +++++++-
 .../components/buttons/ResetBtn.ts            |   2 +-
 .../components/buttons/SearchBtn.ts           |   2 +-
 .../components/buttons/SubmitBtn.ts           | 100 +++++++-
 .../OptionalCriteriaManager.ts                |  59 +++++
 .../handling/actions/GenerateQuery.ts         |  45 ++--
 11 files changed, 778 insertions(+), 74 deletions(-)

diff --git a/dev-page/form-page.html b/dev-page/form-page.html
index 4d5eb151..cba82a65 100644
--- a/dev-page/form-page.html
+++ b/dev-page/form-page.html
@@ -68,10 +68,9 @@
       <a href="#" id="switch-language">switch to en</a>
       <div class="row">
         <!-- Formulaire à gauche -->
-
         <div class="col-md-4">
           <!-- Sparnatural Form -->
-          <!--   <sparnatural-form
+          <!-- <sparnatural-form
             src="form-configs/dbpedia/dbpediafr-config.ttl"
             lang="en"
             defaultLang="fr"
@@ -88,9 +87,9 @@
             defaultLang="en"
             limit="100"
             endpoint="https://proxy.sparnatural.eu/sparql-proxy/sparql?endpoint=https%3A%2F%2Fwww.performing-arts.ch%2Fsparql"
-            form="form-configs/sapa/form.json"
+            form="form-configs/sapa-inst/form.json"
             prefix="skos:http://www.w3.org/2004/02/skos/core# rico:https://www.ica.org/standards/RiC/ontology#"
-            query="form-configs/sapa/query.json"
+            query="form-configs/sapa-inst/query.json"
           ></sparnatural-form>
         </div>
 
diff --git a/dev-page/scripts/init-form-page.js b/dev-page/scripts/init-form-page.js
index ebcd035e..eac1fce7 100644
--- a/dev-page/scripts/init-form-page.js
+++ b/dev-page/scripts/init-form-page.js
@@ -23,9 +23,7 @@ sparnaturalForm.addEventListener("init", (event) => {
 
 // Listen for updates to the query and pass to YASQE
 sparnaturalForm.addEventListener("queryUpdated", (event) => {
-  const queryString = sparnaturalForm.expandSparql(
-    event.detail.queryString
-  );
+  const queryString = sparnaturalForm.expandSparql(event.detail.queryString);
   console.log("queryString", event.detail);
 
   // Update YASQE with the new SPARQL query
@@ -39,23 +37,102 @@ sparnaturalForm.addEventListener("queryUpdated", (event) => {
   }
 });
 
-// Listen for form submission and trigger YASQE query
+// Gestionnaire d'événement pour le formulaire Sparnatural
+sparnaturalForm.addEventListener("submit", () => {
+  console.log("Submit action triggered.");
+
+  // Désactiver le bouton et afficher un spinner sur le bouton
+  sparnaturalForm.disablePlayBtn();
+  const searchBtn = document.querySelector("#Search");
+  const spinner = document.createElement("div");
+  spinner.className = "spinner";
+  searchBtn.innerHTML = ""; // Efface le texte du bouton
+  searchBtn.appendChild(spinner); // Ajoute le spinner
+
+  // Afficher un message ou un spinner temporaire dans YASR
+  yasr.setResponse({
+    contentType: "text/html",
+    data: `chargement en cours ...`,
+    /*data: `{
+  "head": {
+    "vars": ["message"]
+  },
+  "results": {
+    "bindings": [
+      {
+        "message": {
+          "type": "literal",
+          "value": "Chargement en cours..."
+        }
+      }
+    ]
+  }
+}`,*/
+    status: 200,
+  });
+
+  // Exécuter la requête SPARQL
+  sparnaturalForm.executeSparql(
+    yasqe.getValue(),
+    (finalResult) => {
+      console.log("Résultats reçus :", finalResult);
+
+      // Injecter les résultats directement dans YASR
+      yasr.setResponse(finalResult);
+      console.log("Nouveaux résultats chargés dans le tableau.");
+
+      // Réactiver le bouton et restaurer le texte
+      sparnaturalForm.enablePlayBtn();
+      searchBtn.innerHTML = "Search"; // Réinitialise le texte du bouton
+    },
+    (error) => {
+      console.error("Erreur lors de l'exécution de la requête SPARQL :", error);
+
+      // Afficher un message d'erreur directement dans YASR
+      yasr.setResponse({
+        contentType: "text/html",
+        data: `<p style="text-align: center; color: red;">Erreur : Impossible de charger les résultats.</p>`,
+        status: 500,
+      });
+
+      // Réactiver le bouton même en cas d'erreur
+      sparnaturalForm.enablePlayBtn();
+      searchBtn.innerHTML = "Search"; // Réinitialise le texte du bouton
+    }
+  );
+});
+
+/*
 sparnaturalForm.addEventListener("submit", () => {
+  // Désactiver le bouton et afficher le spinner
   sparnaturalForm.disablePlayBtn();
+  const searchBtn = document.querySelector("#Search");
+  const spinner = document.createElement("div");
+  spinner.className = "spinner";
+  searchBtn.innerHTML = ""; // Efface le texte du bouton
+  searchBtn.appendChild(spinner); // Ajoute le spinner
+
   let finalResult = sparnaturalForm.executeSparql(
     yasqe.getValue(),
     (finalResult) => {
-      // send final result to YasR
+      // Envoyer les résultats à YASR
       yasr.setResponse(finalResult);
-      // re-enable submit button
+
+      // Réactiver le bouton et restaurer le texte
       sparnaturalForm.enablePlayBtn();
+      searchBtn.innerHTML = "Search"; // Réinitialise le texte du bouton
     },
     (error) => {
       console.error("Got an error when executing SPARQL in Sparnatural");
       console.dir(error);
+
+      // Réactiver le bouton même en cas d'erreur
+      sparnaturalForm.enablePlayBtn();
+      searchBtn.innerHTML = "Search"; // Réinitialise le texte du bouton
     }
   );
 });
+*/
 
 console.log("init yasr & yasqe...");
 
diff --git a/src/assets/stylesheets/sparnatural-form.scss b/src/assets/stylesheets/sparnatural-form.scss
index c5fe655e..3deea07b 100644
--- a/src/assets/stylesheets/sparnatural-form.scss
+++ b/src/assets/stylesheets/sparnatural-form.scss
@@ -8,14 +8,24 @@
 
 sparnatural-form {
   display: block;
-  padding: 20px;
+  //padding: 20px;
+  //padding: 2px;
   // This is the same color as background of Sparnatural with default theme "grass"
   background-color: #e8fcf5;
   border-radius: 5px;
   margin-bottom: 20px;
+  padding-top: 15px;
+
+  .sparnatural-form-container {
+    max-height: 70vh; /* Limite en hauteur */
+    overflow-y: auto; /* Permet de scroller */
+    position: relative;
+  }
 
   .formField {
+    padding-left: 20px;
     margin-bottom: 10px;
+    padding-right: 10px;
   }
 
   // Display container for selected values
@@ -32,7 +42,6 @@ sparnatural-form {
     align-items: center;
     padding: 5px 10px;
     background-color: var(--primary-color-medium);
-    // border: 1px solid #4db6ac;
     border-radius: 5px;
     font-size: 13px;
     margin-bottom: 5px;
@@ -41,7 +50,7 @@ sparnatural-form {
   // Align selected values horizontally with wrapping
   .selected-value-container {
     flex-direction: row;
-    // border: 1px solid #ccc;
+
     padding: 5px;
     display: inline-block;
     margin-right: 10px;
@@ -63,32 +72,82 @@ sparnatural-form {
   }
 
   .submitSection {
+    /*
     display: flex;
     justify-content: flex-end;
     gap: 10px;
+*/
+
+    position: sticky; // Toujours visible
+    bottom: 0; // Collée en bas
+    z-index: 1000; // Toujours au-dessus
+
+    justify-content: flex-end;
+    display: flex;
+    padding: 4px;
+    background: none;
+    height: max-content;
 
+    gap: 10px;
     button {
       padding: 10px 20px;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       font-size: 14px;
+      display: flex;
+      align-items: center; /* Centrer verticalement le contenu */
+      justify-content: center; /* Centrer horizontalement le contenu */
+      text-align: center;
+      position: relative; /* Nécessaire pour le spinner */
     }
 
     button[id="Search"] {
       background-color: var(--secondary-color-important);
-      color: #000;
-      border: 1px solid #ddd;
-      box-shadow: 0px 2px 3px 0px #cfcfcf;
+      color: #000000;
+      font-size: 15px;
+      //border: 1px solid ;
+      //box-shadow: 0px 2px 3px 0px #cfcfcf;
+      transition: background-color 0.2s ease;
+    }
+    button[id="Search"]:hover {
+      color: #fff;
+      background-color: rgb(1, 109, 69);
+    }
+
+    button[id="Search"]:disabled {
+      background-color: #ccc; /* Bouton gris lorsqu'il est désactivé */
+      color: #666;
+      cursor: not-allowed;
     }
 
     button[id="Reset"] {
+      font-size: 15px;
       background-color: #fff;
       color: #000;
-      border: 1px solid #ddd;
-      box-shadow: 0px 2px 3px 0px #cfcfcf;
+      //border: 1px solid #ddd;
+      //box-shadow: 0px 2px 3px 0px #cfcfcf;
+      transition: background-color 0.2s ease;
+    }
+    button[id="Reset"]:hover {
+      background-color: #cacaca;
     }
   }
+  .submitSection::after {
+    content: "";
+    position: absolute;
+    top: -20px; /* Place l'ombre juste au-dessus de la section */
+    left: 0;
+    right: 0;
+    height: 20px; /* Hauteur de l'ombre */
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ); /* Dégradé simulant une ombre */
+    pointer-events: none; /* Empêche toute interaction */
+    z-index: -1; /* Place l'ombre sous la section */
+  }
 
   .option-container {
     display: flex;
@@ -139,4 +198,158 @@ sparnatural-form {
       background-color: var(--error-color, #d9534f);
     }*/
   }
+  /* Spinner */
+  .spinner {
+    border: 4px solid #f3f3f3; /* Couleur de fond */
+    border-radius: 50%;
+    border-top: 4px solid #4caf50; /* Vert */
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  //ceci est pour le tree widget dans le formulaire
+  .tree-widget-new {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+    gap: 10px;
+
+    .treeBtnDisplay-new {
+      position: relative;
+      left: 0;
+      top: auto;
+      transform: none;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      background: #fff;
+      box-shadow: 0px 2px 3px 0px #cfcfcf;
+      padding: 5px;
+      line-height: 1;
+      z-index: 1;
+      cursor: pointer;
+      img {
+        height: 26px;
+      }
+    }
+
+    .treeLayer-new {
+      display: none;
+      position: absolute;
+      top: 0;
+      //margin-top: -19px;
+      left: 0;
+      transform: none;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      background: #fff;
+      box-shadow: 0px 2px 3px 0px #cfcfcf;
+      z-index: 2;
+
+      .treeClose {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        width: 22px;
+        height: 22px;
+        vertical-align: top;
+        line-height: 22px;
+        cursor: pointer;
+        i {
+          text-align: center;
+          color: var(--primary-color-important);
+          background: #fff !important;
+          font-size: 18px;
+        }
+      }
+
+      .treeNotice {
+        padding: 5px;
+        display: none;
+        line-height: 20px;
+      }
+
+      .treeDisplay-new {
+        overflow: auto;
+        max-height: 200px;
+        max-width: 400px;
+        padding: 25px 10px 5px;
+
+        &.jstree-default .jstree-disabled {
+          opacity: 0.5;
+        }
+        &.jstree-default .jstree-checkbox-disabled {
+          opacity: 0.5;
+        }
+      }
+      .treeActions {
+        border-top: 2px solid #ddd;
+        padding: 5px 10px;
+        text-align: right;
+        a {
+          border-radius: 5px;
+          color: #fff;
+          display: inline-block;
+          margin-left: 10px;
+          padding: 15px 5px;
+          line-height: 1;
+          cursor: pointer;
+        }
+        a.treeCancel {
+          background: #ee8d67;
+        }
+        a.treeSubmit {
+          background: #84c99e;
+        }
+      }
+    }
+  }
+
+  //cette partie pour le loading spinner dans le formulaire
+  .loadingspinner-new {
+    position: absolute;
+
+    z-index: 1;
+    top: 0.6em;
+    left: 0;
+    line-height: 32px;
+    /* background: #fff; */
+    border-radius: 0 0 4px 4px;
+    padding: 0 5px;
+    margin-left: 7px;
+    font-style: italic;
+    font-size: 0.9em;
+
+    &.show {
+      display: block;
+    }
+    .load {
+      display: none;
+      width: 32px;
+      height: 32px;
+      svg {
+        vertical-align: top;
+        path {
+          fill: var(--primary-color-main);
+        }
+      }
+      &.show {
+        display: inline-block;
+      }
+    }
+  }
 }
diff --git a/src/sparnatural-form/components/CleanQuery.ts b/src/sparnatural-form/components/CleanQuery.ts
index 1ed41474..40617e33 100644
--- a/src/sparnatural-form/components/CleanQuery.ts
+++ b/src/sparnatural-form/components/CleanQuery.ts
@@ -1,41 +1,115 @@
-import { ISparJson } from "../../sparnatural/generators/json/ISparJson";
+import { Branch, ISparJson } from "../../sparnatural/generators/json/ISparJson";
+import { SparnaturalFormAttributes } from "../../SparnaturalFormAttributes";
+import { Binding, Form } from "../FormStructure";
 
-//!!
-//!!
-//!!
-// working on this class not finished yet !!
-
-/**
- * Clean the query to remove any unnecessary information
 /**
  * @param query : the query to clean
- * from query to use remove the branchs with o that exist on the form varibales 
- * the condition is that the o haven't any values not exist in query.variables and it's optional or his father is optional
- * @returns the cleaned query 
+ * from query to use remove the branchs with o that exist on the form varibales
+ * the condition is that the o haven't any values, not exist in query.variables and it's optional or his father is optional
+ * @returns the cleaned query
  */
 
 class CleanQuery {
   private query: ISparJson;
   private cleanQueryResult: ISparJson;
+  private formConfig: Form;
 
-  constructor(query: ISparJson) {
+  constructor(query: ISparJson, formAttributes: SparnaturalFormAttributes) {
     this.query = query;
+    this.cleanQueryResult = JSON.parse(JSON.stringify(query)); // Copie profonde de la requête
+    this.formConfig = this.loadFormConfig(formAttributes.form); // Charger la configuration depuis les attributs
+  }
+
+  private loadFormConfig(formUrl: string): Form {
+    let config: Form = null;
+    $.ajax({
+      url: formUrl,
+      dataType: "json",
+      async: false,
+      success: (data) => {
+        config = data;
+      },
+      error: (error) => {
+        console.error("Erreur lors du chargement de form.json:", error);
+      },
+    });
+    return config;
   }
 
-  //get the form vaiables from the form.json
-  getformVariables(): string[] {
-    return;
+  // Obtenir les form variables à partir de formConfig
+  getFormVariables(): string[] {
+    if (!this.formConfig || !this.formConfig.bindings) {
+      console.error("formConfig ou ses bindings sont introuvables.");
+      return [];
+    }
+    return this.formConfig.bindings.map((binding: Binding) => binding.variable);
   }
 
   //metthods to clean the querytouse
-  cleandQueryToUse(): ISparJson {
-    this.cleanQueryResult = this.query;
-    //focus on form variables to remove the branches with o that exist on the form varibales
-    const formVariables = this.getformVariables();
+  cleanQueryToUse(): ISparJson {
+    const formVariables = this.getFormVariables();
+
+    // Vérifier et extraire les variables de la requête
+    const queryVariables = Array.isArray(this.query.variables)
+      ? this.query.variables.map((v) => ("value" in v ? v.value : null))
+      : [];
+
+    console.log("Form variables:", formVariables);
+    console.log("Query variables:", queryVariables);
 
-    //remove the branches with o that exist on the form varibales which haven't any values not exist in query.variables and it's optional or his father is optional focus on formVariables and don't touch the other branches
+    const cleanBranches = (branches: Branch[]): Branch[] => {
+      return branches
+        .filter((branch) => {
+          const variable = branch.line?.o;
+          const hasValues = branch.line?.values?.length > 0;
+          const isOptional = branch.optional || false;
+          const parentOptional = this.isParentOptional(branch.line?.o);
 
+          // Vérifier si la variable existe dans `queryVariables`
+          const existsInQueryVariables = queryVariables.includes(variable);
+
+          //remove the branches with o that exist on the form varibales which haven't any values not exist in query.variables and it's optional or his father is optional focus on formVariables and don't touch the other branches
+          // Supprimer les branches selon les conditions
+          const shouldRemove =
+            formVariables.includes(variable) && // La variable est dans les form variables
+            !existsInQueryVariables && // La variable n'existe pas dans les variables de la requête
+            !hasValues && // Aucune valeur pour cette branche
+            (isOptional || parentOptional); // La branche ou son parent est optionnel
+          console.log("shouldRemove", variable, shouldRemove);
+          return !shouldRemove;
+        })
+        .map((branch) => ({
+          ...branch,
+          children: cleanBranches(branch.children || []), // Nettoyer récursivement les enfants
+        }));
+    };
+
+    this.cleanQueryResult.branches = cleanBranches(
+      this.cleanQueryResult.branches
+    );
+    console.log("CleanQuery: Query cleaned:", this.cleanQueryResult);
     return this.cleanQueryResult;
   }
+
+  // Vérifier si le parent d'une branche est optionnel
+  private isParentOptional(childVariable: string): boolean {
+    const findParent = (branches: Branch[], target: string): Branch => {
+      for (const branch of branches) {
+        if (
+          branch.children?.some((child: Branch) => child.line?.o === target)
+        ) {
+          return branch;
+        }
+        if (branch.children) {
+          const result = findParent(branch.children, target);
+          if (result) return result;
+        }
+      }
+      return null;
+    };
+
+    const parent = findParent(this.query.branches, childVariable);
+    return parent?.optional || false;
+  }
 }
 export default CleanQuery;
diff --git a/src/sparnatural-form/components/FormFieldGenerator.ts b/src/sparnatural-form/components/FormFieldGenerator.ts
index 14b6083a..5150ebaa 100644
--- a/src/sparnatural-form/components/FormFieldGenerator.ts
+++ b/src/sparnatural-form/components/FormFieldGenerator.ts
@@ -93,6 +93,26 @@ class FormField {
   }
 
   //method to create a widget in the form
+  private createWidget1(queryLine: CriteriaLine): AbstractWidget {
+    const subject = queryLine.sType;
+    const predicate = queryLine.p;
+    const object = queryLine.oType;
+
+    const specEntity = this.specProvider.getEntity(subject);
+    const connectingProperty = this.specProvider.getProperty(predicate);
+    const propertyType = connectingProperty.getPropertyType(object);
+
+    const widget = this.widgetFactory.buildWidget(
+      propertyType,
+      { variable: queryLine.s, type: specEntity.getId() },
+      { variable: "predicate", type: connectingProperty.getId() },
+      { variable: queryLine.o, type: object }
+    );
+    widget.render();
+    console.log("widget", widget);
+    return widget;
+  }
+
   private createWidget(queryLine: CriteriaLine): AbstractWidget {
     const subject = queryLine.sType;
     const predicate = queryLine.p;
@@ -109,6 +129,37 @@ class FormField {
       { variable: queryLine.o, type: object }
     );
     widget.render();
+    const loadspinenr = widget.html[0].querySelector(".loadingspinner");
+    if (loadspinenr) {
+      loadspinenr.classList.remove("loadingspinner");
+      loadspinenr.classList.add("loadingspinner-new");
+    }
+
+    // Appliquez la nouvelle classe CSS dynamiquement si le widget est "tree-widget"
+    if (widget.baseCssClass === "tree-widget") {
+      widget.html[0].classList.remove("tree-widget");
+      widget.html[0].classList.add("tree-widget-new");
+
+      // Modifiez les sous-éléments si nécessaire
+      const btnDisplay = widget.html[0].querySelector(".treeBtnDisplay");
+      if (btnDisplay) {
+        btnDisplay.classList.remove("treeBtnDisplay");
+        btnDisplay.classList.add("treeBtnDisplay-new");
+      }
+
+      const treeLayer = widget.html[0].querySelector(".treeLayer");
+      if (treeLayer) {
+        treeLayer.classList.remove("treeLayer");
+        treeLayer.classList.add("treeLayer-new");
+      }
+
+      const treeDisplay = widget.html[0].querySelector(".treeDisplay");
+      if (treeDisplay) {
+        treeDisplay.classList.remove("treeDisplay");
+        treeDisplay.classList.add("treeDisplay-new");
+      }
+    }
+
     console.log("widget", widget);
     return widget;
   }
@@ -167,9 +218,62 @@ class FormField {
 
     // Add an event listener to add values to the widget
     widget.html[0].addEventListener("renderWidgetVal", (e: CustomEvent) => {
+      console.log("widget", widget);
+      console.log("e.detail", e.detail);
+
+      let valueToInject: any[];
+
+      // Handle different cases for e.detail
+      if (Array.isArray(e.detail)) {
+        // Case: e.detail is an array
+        valueToInject = e.detail.map((item: any) => item.value);
+      } else if (e.detail.value) {
+        // Case: e.detail contains a single value or a wrapped object
+        valueToInject = Array.isArray(e.detail.value)
+          ? e.detail.value
+          : [e.detail.value];
+      } else {
+        console.warn("Unexpected e.detail format:", e.detail);
+        return; // Exit early if the format is not recognized
+      }
+
+      console.log("valueToInject", valueToInject);
+
+      valueToInject.forEach((val: any) => {
+        const existingValue = Array.from(selectedValues).find(
+          (existingVal: any) => existingVal.label === val.label
+        );
+
+        if (!existingValue) {
+          selectedValues.add(val);
+
+          updateValueDisplay();
+          queryLine.values = Array.from(selectedValues);
+
+          formFieldDiv.dispatchEvent(
+            new CustomEvent("valueAdded", {
+              bubbles: true,
+              detail: { value: val, variable: variable },
+            })
+          );
+
+          // Update options visibility
+          if (this.optionalCriteriaManager) {
+            this.optionalCriteriaManager.updateOptionVisibility();
+          }
+        }
+      });
+    });
+    /*
+
+    // Add an event listener to add values to the widget
+    widget.html[0].addEventListener("renderWidgetVal", (e: CustomEvent) => {
+      console.log("widget", widget);
+      console.log("e.detail", e.detail);
       const valueToInject = Array.isArray(e.detail.value)
         ? e.detail.value
         : [e.detail.value];
+      console.log("valueToInject", valueToInject);
 
       valueToInject.forEach((val: any) => {
         const existingValue = Array.from(selectedValues).find(
@@ -196,7 +300,7 @@ class FormField {
         }
       });
     });
-
+*/
     console.log("widget", widget);
 
     // Add An'yValue and NotExist options
diff --git a/src/sparnatural-form/components/SparnaturalFormComponent.ts b/src/sparnatural-form/components/SparnaturalFormComponent.ts
index 85b0421c..2b70b8a3 100644
--- a/src/sparnatural-form/components/SparnaturalFormComponent.ts
+++ b/src/sparnatural-form/components/SparnaturalFormComponent.ts
@@ -19,7 +19,7 @@ import { Binding, Form } from "../FormStructure";
 class SparnaturalFormComponent extends HTMLComponent {
   // Sparnatural configuration
   settings: ISettings;
-  
+
   SubmitSection: SubmitSection;
 
   specProvider: ISparnaturalSpecification;
@@ -123,7 +123,7 @@ class SparnaturalFormComponent extends HTMLComponent {
       }
     });
   }
-
+  /*
   //render the form
   render(): this {
     //init the static labels
@@ -163,25 +163,21 @@ class SparnaturalFormComponent extends HTMLComponent {
               this.html[0], // form container
               this.specProvider,
               this.jsonQuery,
-              new WidgetFactory(
-                this,
-                this.specProvider,
-                this.settings,
-                null
-              )
+              new WidgetFactory(this, this.specProvider, this.settings, null)
             );
             fieldGenerator.generateField();
           });
 
           // Add the submit button if it is set in the settings
           if (this.settings.submitButton) {
-            let id:string = "submit-"+Math.random().toString(36).substring(2, 8);
+            let id: string =
+              "submit-" + Math.random().toString(36).substring(2, 8);
             const submitBtn = document.createElement("div");
             submitBtn.setAttribute("id", id);
             submitBtn.setAttribute("class", "submitSection");
             this.html[0].appendChild(submitBtn);
             // we give a unique ID to the section to avoid ID clashes if there are more than one form used in the page
-            this.SubmitSection = new SubmitSection(this, id);
+            this.SubmitSection = new SubmitSection(this, id, this.settings);
             this.SubmitSection.render();
           }
         }).fail((error) => {
@@ -202,6 +198,89 @@ class SparnaturalFormComponent extends HTMLComponent {
 
     return this;
   }
+*/
+  render(): this {
+    // Initialisation des labels et du catalogue
+    this.#initSparnaturalStaticLabels();
+    this.#initCatalog();
+
+    // Chargement des paramètres et génération du formulaire
+    this.initSpecificationProvider((sp: ISparnaturalSpecification) => {
+      this.specProvider = sp;
+
+      this.initJsonQuery((query: ISparJson) => {
+        this.jsonQuery = query;
+        this.actionStoreForm = new ActionStoreForm(this, this.specProvider);
+
+        // Charger le fichier de configuration du formulaire
+        const formUrl = this.settings.form;
+        $.getJSON(formUrl, (formConfig) => {
+          if (!formConfig || !formConfig.bindings) {
+            console.error("formConfig or formConfig.bindings is undefined");
+            return;
+          }
+
+          // Initialisation des labels
+          this.#initSparnaturalFormStaticLabels(formConfig);
+
+          // Génération des champs du formulaire
+          formConfig.bindings.forEach((binding: Binding) => {
+            const fieldGenerator = new FormField(
+              binding,
+              this.html[0],
+              this.specProvider,
+              this.jsonQuery,
+              new WidgetFactory(this, this.specProvider, this.settings, null)
+            );
+            fieldGenerator.generateField();
+          });
+
+          // Détection du nombre de champs pour rendre la section sticky
+          if (formConfig.bindings.length > 10) {
+            this.makeFormScrollable();
+          }
+
+          // Ajouter les boutons Reset/Search
+          if (this.settings.submitButton) {
+            let id = "submit-" + Math.random().toString(36).substring(2, 8);
+            const submitBtn = document.createElement("div");
+            submitBtn.setAttribute("id", id);
+            submitBtn.setAttribute("class", "submitSection");
+            this.html[0].appendChild(submitBtn);
+            this.SubmitSection = new SubmitSection(this, id, this.settings);
+            this.SubmitSection.render();
+          }
+        }).fail((error) => {
+          console.error("Error loading form configuration:", error);
+        });
+      });
+
+      this.html[0].dispatchEvent(
+        new CustomEvent(SparnaturalFormElement.EVENT_INIT, {
+          bubbles: true,
+          detail: {
+            sparnaturalForm: this,
+          },
+        })
+      );
+    });
+
+    return this;
+  }
+  // Méthode pour rendre le formulaire scrollable et ajouter un espace pour la SubmitSection
+  makeFormScrollable(): void {
+    const formContainer = this.html[0];
+    const containerDiv = document.createElement("div");
+    containerDiv.classList.add("sparnatural-form-container");
+
+    // Déplacer le contenu du formulaire dans le conteneur scrollable
+    while (formContainer.firstChild) {
+      containerDiv.appendChild(formContainer.firstChild);
+    }
+
+    // Ajouter le conteneur au formulaire principal
+    formContainer.appendChild(containerDiv);
+  }
 
   //methode to reset the form
   //a faire add a methode when we reset we push the initial query to the sparql editor
diff --git a/src/sparnatural-form/components/buttons/ResetBtn.ts b/src/sparnatural-form/components/buttons/ResetBtn.ts
index e38d2438..acb499e3 100644
--- a/src/sparnatural-form/components/buttons/ResetBtn.ts
+++ b/src/sparnatural-form/components/buttons/ResetBtn.ts
@@ -7,7 +7,7 @@ class ResetBtn {
     this.callback = callback;
     // Créer le bouton avec jQuery et ajouter le texte "Reset"
     this.buttonElement = $(
-      `<button id="Reset" title="${I18n.labels["Reset"]}">${I18n.labels["Reset"]}</button>`
+      `<button id="Reset">${I18n.labels["Reset"]}</button>`
     );
 
     // Ajouter un écouteur d'événement "click" pour appeler le callback
diff --git a/src/sparnatural-form/components/buttons/SearchBtn.ts b/src/sparnatural-form/components/buttons/SearchBtn.ts
index a9ddfcd3..8c1900c9 100644
--- a/src/sparnatural-form/components/buttons/SearchBtn.ts
+++ b/src/sparnatural-form/components/buttons/SearchBtn.ts
@@ -8,7 +8,7 @@ class SearchBtn {
     this.callback = callback;
     // Créer le bouton avec jQuery et ajouter le texte "Search"
     this.buttonElement = $(
-      `<button id="Search" title="${I18n.labels["Search"]}">${I18n.labels["Search"]}</button>`
+      `<button id="Search" >${I18n.labels["Search"]}</button>`
     );
 
     // Ajouter un écouteur d'événement "click" pour appeler le callback si le bouton n'est pas désactivé
diff --git a/src/sparnatural-form/components/buttons/SubmitBtn.ts b/src/sparnatural-form/components/buttons/SubmitBtn.ts
index 29cb091e..735b06b4 100644
--- a/src/sparnatural-form/components/buttons/SubmitBtn.ts
+++ b/src/sparnatural-form/components/buttons/SubmitBtn.ts
@@ -1,25 +1,33 @@
+import { SparnaturalFormAttributes } from "../../../SparnaturalFormAttributes";
 import SearchBtn from "./SearchBtn";
 import SparnaturalFormComponent from "../../../sparnatural-form/components/SparnaturalFormComponent";
 import { SparnaturalFormElement } from "../../../SparnaturalFormElement";
 import ResetBtn from "./ResetBtn";
+import CleanQuery from "../CleanQuery"; // Import de CleanQuery
+import ISettings from "../../settings/ISettings";
+import HTMLComponent from "../../../sparnatural/components/HtmlComponent";
 
 class SubmitSection {
+  private settings: ISettings;
   searchBtn: SearchBtn;
   resetBtn: ResetBtn;
   ParentSparnatural: SparnaturalFormComponent;
   container: JQuery<HTMLElement>;
+  private isLoading: boolean = false; //etat de chargement
 
   constructor(
     ParentSparnatural: SparnaturalFormComponent,
-    containerId: string
+    containerId: string,
+    settings: ISettings
   ) {
     this.ParentSparnatural = ParentSparnatural;
     this.container = $(`#${containerId}`); // Using jQuery to select the container by ID
     this.resetBtn = new ResetBtn(this.resetForm.bind(this));
-    // Create the Search button
     this.searchBtn = new SearchBtn(this.submitAction.bind(this));
+    this.settings = settings;
+    this.render();
   }
-  
+
   render(): this {
     // Vérifie si les boutons existent déjà dans le conteneur
     if (
@@ -33,12 +41,94 @@ class SubmitSection {
     } else {
       console.log("Buttons already exist, skipping rendering.");
     }
-
     return this;
   }
 
-  // Define submit action
+  setLoadingState(isLoading: boolean): void {
+    this.isLoading = isLoading;
+
+    const searchBtn = this.container.find("#Search");
+
+    if (isLoading) {
+      // Ajoutez une classe pour afficher l'animation
+      searchBtn.prop("disabled", true);
+      searchBtn.html('<div class="spinner"></div>'); // Spinner
+    } else {
+      // Remettez le bouton à l'état normal
+      searchBtn.prop("disabled", false);
+      searchBtn.text("Search");
+    }
+  }
+
   submitAction = () => {
+    if (this.settings.submitButton) {
+      console.log("SubmitSection: Submit button clicked");
+
+      // Step 1: Trigger HandleOptional
+      this.ParentSparnatural.HandleOptional();
+
+      // Step 2: Get the final cleaned query
+      const lastQuery = this.ParentSparnatural.cleanQueryResult;
+
+      const cleanQueryProcessor = new CleanQuery(
+        lastQuery,
+        this.ParentSparnatural.settings as SparnaturalFormAttributes
+      );
+      const finalCleanQuery = cleanQueryProcessor.cleanQueryToUse();
+
+      console.log("Final Clean Query Ready for Submission:", finalCleanQuery);
+
+      // Step 3: Dispatch the submit event with the cleaned query
+      const queryPayload = {
+        queryJson: finalCleanQuery,
+        queryString: JSON.stringify(finalCleanQuery, null, 2), // Example
+      };
+
+      const submitEvent = new CustomEvent(SparnaturalFormElement.EVENT_SUBMIT, {
+        bubbles: true,
+        detail: queryPayload,
+      });
+
+      this.container[0].dispatchEvent(submitEvent);
+      console.log("Submit Event Dispatched with Final Query:", queryPayload);
+    }
+  };
+
+  // Define submit action
+  submitAction3 = () => {
+    if (this.settings.submitButton) {
+      console.log("SubmitSection: Submit button clicked");
+
+      // Étape 1 : Récupérer la dernière cleanQuery après HandleOptional
+      this.ParentSparnatural.HandleOptional(); // Appliquer HandleOptional pour mettre à jour la cleanQueryResult
+      const lastQuery = this.ParentSparnatural.cleanQueryResult;
+
+      console.log("Last query after HandleOptional:", lastQuery);
+      // Étape 2 : Appliquer CleanQuery pour effectuer un traitement final
+      const cleanQueryProcessor = new CleanQuery(
+        lastQuery,
+        this.ParentSparnatural.settings as SparnaturalFormAttributes
+      );
+      const finalCleanQuery = cleanQueryProcessor.cleanQueryToUse();
+
+      // Étape 3 : Déclencher un événement avec la requête nettoyée
+      const queryPayload = {
+        queryJson: finalCleanQuery,
+        queryString: JSON.stringify(finalCleanQuery, null, 2), // Conversion en JSON pour illustration
+      };
+
+      // Déclencher l'événement
+      const submitEvent = new CustomEvent(SparnaturalFormElement.EVENT_SUBMIT, {
+        bubbles: true,
+        detail: queryPayload, // Passer la requête nettoyée dans l'événement
+      });
+
+      this.container[0].dispatchEvent(submitEvent);
+      console.log("Submit event dispatched with payload:", queryPayload);
+    }
+  };
+  // Define submit action
+  submitAction1 = () => {
     let e = new CustomEvent(SparnaturalFormElement.EVENT_SUBMIT, {
       bubbles: true,
       detail: this.ParentSparnatural,
diff --git a/src/sparnatural-form/components/optionalCriteria/OptionalCriteriaManager.ts b/src/sparnatural-form/components/optionalCriteria/OptionalCriteriaManager.ts
index 23a5f916..e06c4ee5 100644
--- a/src/sparnatural-form/components/optionalCriteria/OptionalCriteriaManager.ts
+++ b/src/sparnatural-form/components/optionalCriteria/OptionalCriteriaManager.ts
@@ -452,6 +452,65 @@ class OptionalCriteriaManager {
   }
 
   private attachValueChangeListener() {
+    this.widget.html[0].addEventListener(
+      "renderWidgetVal",
+      (e: CustomEvent) => {
+        console.log("Widget value change detected.");
+        console.log("Event detail:", e.detail);
+
+        // Vérifie si e.detail.value est défini avant de continuer
+        if (!e.detail || !e.detail.value) {
+          console.error("e.detail.value is undefined or invalid:", e.detail);
+          return;
+        }
+
+        // Normalise les nouvelles valeurs en tableau
+        const newValues = Array.isArray(e.detail.value)
+          ? e.detail.value
+          : [e.detail.value];
+
+        console.log("New values to inject:", newValues);
+
+        // Vérifie si newValues contient des objets valides
+        const validNewValues = newValues.filter(
+          (val: any) => val && val.label !== undefined
+        );
+
+        if (validNewValues.length === 0) {
+          console.warn("No valid new values found:", newValues);
+          return;
+        }
+
+        // Récupère les valeurs existantes (ou initialise un tableau vide)
+        const existingValues = this.queryLine.values || [];
+        console.log("Existing values:", existingValues);
+
+        // Fusionne les valeurs en évitant les doublons
+        const mergedValues = [
+          ...existingValues.filter(
+            (existing: { label: any }) =>
+              !validNewValues.some(
+                (newVal: { label: any }) => newVal.label === existing.label
+              )
+          ),
+          ...validNewValues,
+        ];
+
+        // Met à jour les valeurs dans `this.queryLine.values`
+        this.queryLine.values = mergedValues;
+
+        // Affiche les valeurs fusionnées pour débogage
+        console.log("Updated queryLine.values:", this.queryLine.values);
+
+        // Mets à jour la visibilité des options si nécessaire
+        if (this.anydiv && this.notExistDiv) {
+          this.updateOptionVisibility();
+        }
+      }
+    );
+  }
+
+  private attachValueChangeListener4() {
     this.widget.html[0].addEventListener(
       "renderWidgetVal",
       (e: CustomEvent) => {
diff --git a/src/sparnatural-form/handling/actions/GenerateQuery.ts b/src/sparnatural-form/handling/actions/GenerateQuery.ts
index 4d305ede..bc036821 100644
--- a/src/sparnatural-form/handling/actions/GenerateQuery.ts
+++ b/src/sparnatural-form/handling/actions/GenerateQuery.ts
@@ -2,6 +2,8 @@ import ActionStoreForm from "../ActionStore";
 import { Generator } from "sparqljs";
 import { ISparJson } from "../../../sparnatural/generators/json/ISparJson";
 import JsonSparqlTranslator from "../../../sparnatural/generators/sparql/fromjson/JsonSparqlTranslator";
+import CleanQuery from "../../components/CleanQuery";
+import { SparnaturalFormAttributes } from "../../../SparnaturalFormAttributes";
 
 export class QueryGeneratorForm {
   actionStoreForm: ActionStoreForm;
@@ -11,60 +13,67 @@ export class QueryGeneratorForm {
   }
 
   generateQuery(): QueryUpdatedPayload {
-    // Si on est en mode "quiet", ne rien faire
+    // If in quiet mode, do nothing
     if (this.actionStoreForm.quiet) {
       return;
     }
 
-    // Si le formulaire est vide, ne rien faire
+    // If the form is empty, do nothing
     if (this.actionStoreForm.sparnaturalForm.isEmpty()) {
       return;
     }
 
-    // Récupérer la clean query si elle est disponible, sinon utiliser la jsonQuery
+    // Step 1: Handle optional branches to get the clean query result
     const sparnaturalForm = this.actionStoreForm.sparnaturalForm;
-    let queryToUse: ISparJson;
-
-    // Nettoyer la requête pour obtenir une version à jour
     sparnaturalForm.HandleOptional();
 
-    // Utiliser la cleanQuery si elle existe, sinon jsonQuery
-    queryToUse = this.actionStoreForm.sparnaturalForm.cleanQueryResult;
+    // Step 2: Retrieve the last cleaned query
+    let queryToUse: ISparJson = sparnaturalForm.cleanQueryResult;
+
+    // Step 3: Further clean the query using CleanQuery for final processing
+    const cleanQueryProcessor = new CleanQuery(
+      queryToUse,
+      sparnaturalForm.settings as SparnaturalFormAttributes
+    );
+    const finalCleanQuery = cleanQueryProcessor.cleanQueryToUse();
 
-    console.log("Query utilisée pour la génération :", queryToUse);
+    console.log("Final Clean Query for SPARQL generation:", finalCleanQuery);
 
-    // Utiliser JsonSparqlTranslator pour convertir la requête en SPARQL
-    const settings = this.actionStoreForm.sparnaturalForm.settings;
+    // Step 4: Translate the final clean query into SPARQL
+    const settings = sparnaturalForm.settings;
     const sparqlTranslator = new JsonSparqlTranslator(
       this.actionStoreForm.specProvider,
       settings
     );
 
-    const sparqlJsQuery = sparqlTranslator.generateQuery(queryToUse);
+    const sparqlJsQuery = sparqlTranslator.generateQuery(finalCleanQuery);
     const generator = new Generator();
     const queryStringFromJson = generator.stringify(sparqlJsQuery);
 
-    // Créer un payload avec la requête générée
+    // Step 5: Create a payload with the generated SPARQL query
     const queryPayload: QueryUpdatedPayload = {
       queryString: queryStringFromJson,
-      queryJson: queryToUse,
+      queryJson: finalCleanQuery,
     };
 
-    // Déclencher l'événement pour notifier que la requête a été mise à jour
+    // Step 6: Dispatch the event to update the editor and notify components
     this.fireQueryUpdatedEvent(queryPayload);
 
-    // re-enable submit button if it was disabled
-    this.actionStoreForm.sparnaturalForm.SubmitSection.enableSubmit();
+    // Re-enable the submit button if it was disabled
+    sparnaturalForm.SubmitSection.enableSubmit();
+
+    return queryPayload; // Optionally return the payload for further use
   }
 
   fireQueryUpdatedEvent(payload: QueryUpdatedPayload) {
-    // Déclencher l'événement pour notifier les autres composants
+    // Dispatch an event to notify other components
     this.actionStoreForm.sparnaturalForm.html[0].dispatchEvent(
       new CustomEvent("queryUpdated", {
         bubbles: true,
         detail: payload,
       })
     );
+    console.log("Query Updated Event Dispatched with Payload:", payload);
   }
 }