From d275f1dbfbc7d7db7f414937b0e071e481f6c487 Mon Sep 17 00:00:00 2001
From: Yannick Marcon <yannick.marcon@obiba.org>
Date: Sun, 25 Aug 2024 15:22:47 +0200
Subject: [PATCH] feat: search variables page (#3899)

* feat: full text search variables by name, project, table, label, and description

* feat: n-gram only variable content field

* feat: variables search page (wip)

* feat(ui): search variables criteria, link from tables and table pages

* feat(ui): added vocabulary search criteria

* feat(ui): search from variable annotation

* feat(ui): added term descriptions and taxonomy title in variables search page
---
 .../search/service/impl/ValuesIndexImpl.java  |  12 +-
 .../service/impl/VariablesAnalyzer.java       |   4 +-
 .../service/impl/VariablesIndexImpl.java      |  21 +-
 .../service/impl/VariablesQueryExecutor.java  |   4 +-
 .../charts/CategoricalSummaryChart.vue        |   5 +-
 .../charts/ContinuousSummaryChart.vue         |   6 +-
 .../components/datasource/AddToViewDialog.vue |   4 +-
 .../datasource/ContingencyTable.vue           |   4 +-
 .../datasource/DatasourceTables.vue           |   8 +
 .../datasource/EditVariableDialog.vue         |   4 +-
 .../components/datasource/TableVariables.vue  |  16 +
 .../datasource/VariableAttributes.vue         |  23 ++
 .../datasource/VariableScriptDialog.vue       |   4 +-
 .../datasource/import/ImportCsvForm.vue       |   4 +-
 opal-ui/src/i18n/en/index.js                  |  15 +
 opal-ui/src/i18n/fr/index.js                  |  17 +-
 opal-ui/src/layouts/MainLayout.vue            |  34 +-
 opal-ui/src/pages/AdminSearchPage.vue         |   2 +-
 opal-ui/src/pages/SearchVariablesPage.vue     | 299 ++++++++++++++++++
 opal-ui/src/pages/SigninPage.vue              |   2 +
 opal-ui/src/stores/search.ts                  |  82 +++++
 opal-ui/src/utils/magma.ts                    |  13 +-
 22 files changed, 526 insertions(+), 57 deletions(-)

diff --git a/opal-search/src/main/java/org/obiba/opal/search/service/impl/ValuesIndexImpl.java b/opal-search/src/main/java/org/obiba/opal/search/service/impl/ValuesIndexImpl.java
index 780bc88d26..c55112d8b7 100644
--- a/opal-search/src/main/java/org/obiba/opal/search/service/impl/ValuesIndexImpl.java
+++ b/opal-search/src/main/java/org/obiba/opal/search/service/impl/ValuesIndexImpl.java
@@ -102,13 +102,13 @@ public Document asDocument(VariableEntity entity) {
     Document doc = new Document();
     doc.add(new StringField("tableId", getValueTableReference(), Field.Store.YES));
     doc.add(new StringField("id", entity.getIdentifier(), Field.Store.YES));
+    doc.add(new StringField("type", entity.getType(), Field.Store.YES));
+    doc.add(new StringField("project", table.getDatasource().getName(), Field.Store.YES));
+    doc.add(new StringField("datasource", table.getDatasource().getName(), Field.Store.YES));
+    doc.add(new StringField("table", table.getName(), Field.Store.YES));
 
-    doc.add(new TextField("project", table.getDatasource().getName(), Field.Store.YES));
-    doc.add(new TextField("datasource", table.getDatasource().getName(), Field.Store.YES));
-    doc.add(new TextField("table", table.getName(), Field.Store.YES));
-    doc.add(new TextField("name", entity.getIdentifier(), Field.Store.YES));
-
-    doc.add(new TextField("type", entity.getType(), Field.Store.YES));
+    // tokenized
+    doc.add(new TextField("id-tok", entity.getIdentifier(), Field.Store.YES));
 
     return  doc;
   }
diff --git a/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesAnalyzer.java b/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesAnalyzer.java
index 862e6790eb..e525b2bf5f 100644
--- a/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesAnalyzer.java
+++ b/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesAnalyzer.java
@@ -21,6 +21,7 @@ public class VariablesAnalyzer extends Analyzer {
   private final int maxGram;
 
   public VariablesAnalyzer(int minGram, int maxGram) {
+    super(PER_FIELD_REUSE_STRATEGY);
     this.minGram = minGram;
     this.maxGram = maxGram;
   }
@@ -30,7 +31,8 @@ protected TokenStreamComponents createComponents(String fieldName) {
     src.setMaxTokenLength(StandardAnalyzer.DEFAULT_MAX_TOKEN_LENGTH);
     TokenStream tok = new LowerCaseFilter(src);
     tok = new StopFilter(tok, CharArraySet.EMPTY_SET);
-    tok = new NGramTokenFilter(tok, minGram, maxGram, true);
+    if (fieldName.equals("content"))
+      tok = new NGramTokenFilter(tok, minGram, maxGram, true);
     return new TokenStreamComponents(
         r -> {
           src.setMaxTokenLength(StandardAnalyzer.DEFAULT_MAX_TOKEN_LENGTH);
diff --git a/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesIndexImpl.java b/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesIndexImpl.java
index 52d1a92aac..d5be9a1514 100644
--- a/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesIndexImpl.java
+++ b/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesIndexImpl.java
@@ -50,7 +50,7 @@ public void delete() {
       getIndexFile().delete();
       try (IndexWriter writer = indexManager.newIndexWriter()) {
         // Create a query to match the documents to delete
-        Query query = new TermQuery(new Term("tableId", getValueTableReference()));
+        Query query = new TermQuery(new Term("table-ref", getValueTableReference()));
         // Delete documents that match the query
         writer.deleteDocuments(query);
         writer.commit();
@@ -86,7 +86,7 @@ public void create() {
 
   public Document asDocument(Variable variable) {
     Document doc = new Document();
-    doc.add(new StringField("tableId", getValueTableReference(), Field.Store.YES));
+    doc.add(new StringField("table-ref", getValueTableReference(), Field.Store.YES));
     doc.add(new StringField("id", String.format("%s:%s", getValueTableReference(), variable.getName()), Field.Store.YES));
 
     doc.add(new TextField("project", table.getDatasource().getName(), Field.Store.YES));
@@ -94,24 +94,27 @@ public Document asDocument(Variable variable) {
     doc.add(new TextField("table", table.getName(), Field.Store.YES));
     doc.add(new TextField("name", variable.getName(), Field.Store.YES));
 
-    doc.add(new TextField("entityType", variable.getEntityType(), Field.Store.YES));
-    doc.add(new TextField("valueType", variable.getValueType().getName(), Field.Store.YES));
+    doc.add(new TextField("entity-type", variable.getEntityType(), Field.Store.YES));
+    doc.add(new TextField("value-type", variable.getValueType().getName(), Field.Store.YES));
     if (variable.getOccurrenceGroup() != null)
-      doc.add(new TextField("occurrenceGroup", variable.getOccurrenceGroup(), Field.Store.YES));
+      doc.add(new TextField("occurrence-group", variable.getOccurrenceGroup(), Field.Store.YES));
     doc.add(new TextField("repeatable", variable.isRepeatable() + "", Field.Store.YES));
     if (variable.getMimeType() != null)
-      doc.add(new TextField("mimeType", variable.getMimeType(), Field.Store.YES));
+      doc.add(new TextField("mime-type", variable.getMimeType(), Field.Store.YES));
     if (variable.getUnit() != null)
       doc.add(new TextField("unit", variable.getUnit(), Field.Store.YES));
     if (variable.getReferencedEntityType() != null)
-      doc.add(new TextField("referencedEntityType", variable.getReferencedEntityType(), Field.Store.YES));
+      doc.add(new TextField("referenced-entity-type", variable.getReferencedEntityType(), Field.Store.YES));
     doc.add(new TextField("nature", VariableNature.getNature(variable).name(), Field.Store.YES));
 
+    String content = String.format("%s %s %s", table.getDatasource().getName(), table.getName(), variable.getName());
+
     if (variable.hasAttributes()) {
       for (Attribute attribute : variable.getAttributes()) {
         String value = attribute.getValue().toString();
-        if (value != null)
+        if (value != null) {
           doc.add(new TextField(getFieldName(attribute), value, Field.Store.YES));
+        }
       }
     }
 
@@ -128,6 +131,8 @@ public Document asDocument(Variable variable) {
       }
     }
 
+    doc.add(new TextField("content", content, Field.Store.NO));
+
     return doc;
   }
 
diff --git a/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesQueryExecutor.java b/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesQueryExecutor.java
index ba10489bf9..823375a6a5 100644
--- a/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesQueryExecutor.java
+++ b/opal-search/src/main/java/org/obiba/opal/search/service/impl/VariablesQueryExecutor.java
@@ -39,7 +39,7 @@ public class VariablesQueryExecutor implements SearchQueryExecutor {
 
   private static final Logger log = LoggerFactory.getLogger(VariablesQueryExecutor.class);
 
-  private final Set<String> DEFAULT_FIELDS = Set.of("name", "project", "table", "valueType", "entityType");
+  private final Set<String> DEFAULT_FIELDS = Set.of("name", "project", "table", "value-type", "entity-type");
 
   private final Directory directory;
 
@@ -56,7 +56,7 @@ public Search.QueryResultDto execute(QuerySettings querySettings) throws SearchE
 
       // Build a QueryParser
       Analyzer analyzer = AnalyzerFactory.newVariablesAnalyzer();
-      QueryParser parser = new QueryParser("name", analyzer);
+      QueryParser parser = new QueryParser("content", analyzer);
 
       // Parse a query (search for books with "Lucene" in the title)
       Query query = parser.parse(querySettings.getQuery());
diff --git a/opal-ui/src/components/charts/CategoricalSummaryChart.vue b/opal-ui/src/components/charts/CategoricalSummaryChart.vue
index b21c57353b..3f0660335b 100644
--- a/opal-ui/src/components/charts/CategoricalSummaryChart.vue
+++ b/opal-ui/src/components/charts/CategoricalSummaryChart.vue
@@ -115,10 +115,9 @@ const isBar = computed(() => chartType.value === 'bar');
 
 const frequencies = computed(() => {
   if (!props.data) return [];
-  const freqs = props.data.frequencies
-    .filter((f: FrequencyDto) => nonMissingsSelection.value === null || (!nonMissingsSelection.value && f.missing) || (nonMissingsSelection.value && !f.missing));
+  const freqs = props.data.frequencies?.filter((f: FrequencyDto) => nonMissingsSelection.value === null || (!nonMissingsSelection.value && f.missing) || (nonMissingsSelection.value && !f.missing));
 
-  if (props.data.otherFrequency > 0 && nonMissingsSelection.value !== false) {
+  if (props.data.otherFrequency && props.data.otherFrequency > 0 && nonMissingsSelection.value !== false) {
     freqs.push({
       value: t('other'),
       freq: props.data.otherFrequency,
diff --git a/opal-ui/src/components/charts/ContinuousSummaryChart.vue b/opal-ui/src/components/charts/ContinuousSummaryChart.vue
index 6b8aa2a74d..a0e2b58ea4 100644
--- a/opal-ui/src/components/charts/ContinuousSummaryChart.vue
+++ b/opal-ui/src/components/charts/ContinuousSummaryChart.vue
@@ -10,7 +10,7 @@
           {label: $t('density'), value: 'density'},
         ]"
       />
-      <q-badge color="positive" :label="`N:  ${data.summary.n}`"
+      <q-badge color="positive" :label="`N:  ${data.summary?.n || 0}`"
         class="on-right"/>
     </div>
     <div class="row q-mt-md">
@@ -128,7 +128,7 @@ const histoChartData = computed(() => {
   ];
 });
 
-const hasNormal = computed(() => props.data?.summary.min !== props.data?.summary.max);
+const hasNormal = computed(() => props.data?.summary && props.data?.summary.min !== props.data?.summary.max);
 
 const normalLayout = computed(() => {
   if (!props.data) return {};
@@ -151,7 +151,7 @@ const normalLayout = computed(() => {
 });
 
 const normalChartData = computed(() => {
-  if (!props.data) return [];
+  if (!props.data || !props.data.summary) return [];
   const min = props.data.summary.min;
   const max = props.data.summary.max;
   return [
diff --git a/opal-ui/src/components/datasource/AddToViewDialog.vue b/opal-ui/src/components/datasource/AddToViewDialog.vue
index 0beffe2e2f..00b6ef1402 100644
--- a/opal-ui/src/components/datasource/AddToViewDialog.vue
+++ b/opal-ui/src/components/datasource/AddToViewDialog.vue
@@ -57,7 +57,7 @@
                 <q-select
                   v-else
                   v-model="props.row[ props.col.name ]"
-                  :options="valueTypes"
+                  :options="ValueTypes"
                   dense
                   borderless
                 ></q-select>
@@ -90,7 +90,7 @@ export default defineComponent({
 </script>
 <script setup lang="ts">
 import { AttributeDto, TableDto, VariableDto } from 'src/models/Magma';
-import { valueTypes } from 'src/utils/magma';
+import { ValueTypes } from 'src/utils/magma';
 
 interface DialogProps {
   modelValue: boolean;
diff --git a/opal-ui/src/components/datasource/ContingencyTable.vue b/opal-ui/src/components/datasource/ContingencyTable.vue
index 64ed9abda8..b020b2d5ac 100644
--- a/opal-ui/src/components/datasource/ContingencyTable.vue
+++ b/opal-ui/src/components/datasource/ContingencyTable.vue
@@ -204,7 +204,7 @@ export default defineComponent({
 });
 </script>
 <script setup lang="ts">
-import { valueTypesMap } from 'src/utils/magma';
+import { ValueTypesMap } from 'src/utils/magma';
 import { getLabels } from 'src/utils/attributes';
 import { VariableDto } from 'src/models/Magma';
 import { QueryResultDto } from 'src/models/Search';
@@ -236,7 +236,7 @@ const allVarCatOptions = computed(() => datasourceStore.variables
   .filter((v) => v.categories?.length > 0 || v.valueType === 'boolean')
   .map((v) => ({label: v.name, value: v.name, variable: v })));
 const allVarAltOptions = computed(() => datasourceStore.variables
-  .filter((v) => v.categories?.length > 0 || v.valueType === 'boolean' || valueTypesMap.numerical.includes(v.valueType))
+  .filter((v) => v.categories?.length > 0 || v.valueType === 'boolean' || ValueTypesMap.numerical.includes(v.valueType))
   .map((v) => ({label: v.name, value: v.name, variable: v })));
 
 const variableCat = computed(() => varCat.value?.variable);
diff --git a/opal-ui/src/components/datasource/DatasourceTables.vue b/opal-ui/src/components/datasource/DatasourceTables.vue
index 19edbb3acb..635174c48b 100644
--- a/opal-ui/src/components/datasource/DatasourceTables.vue
+++ b/opal-ui/src/components/datasource/DatasourceTables.vue
@@ -92,6 +92,7 @@
             </q-list>
           </q-btn-dropdown>
           <q-btn v-if="datasourceStore.tables.length && projectsStore.perms.copy?.canCreate()" color="secondary" icon="content_copy" :title="$t('copy')" size="sm" @click="onShowCopy"></q-btn>
+          <q-btn v-if="datasourceStore.tables.length" color="secondary" outline icon="search" :title="$t('search_variables')" size="sm" @click="onSearch"></q-btn>
           <q-btn v-if="datasourceStore.perms.tables?.canDelete()" :disable="removableTables.length === 0" outline color="red" icon="delete" :title="$t('delete')" size="sm" @click="onShowDeleteTables"></q-btn>
         </div>
       </template>
@@ -165,6 +166,7 @@ const route = useRoute();
 const router = useRouter();
 const datasourceStore = useDatasourceStore();
 const projectsStore = useProjectsStore();
+const searchStore = useSearchStore();
 const { t } = useI18n();
 
 const filter = ref('');
@@ -314,4 +316,10 @@ function onShowCopy() {
 function onRestoreViews() {
   showRestoreViews.value = true;
 }
+
+function onSearch() {
+  searchStore.reset();
+  searchStore.variablesQuery.criteria['project'] = [dsName.value];
+  router.push('/search/variables');
+}
 </script>
diff --git a/opal-ui/src/components/datasource/EditVariableDialog.vue b/opal-ui/src/components/datasource/EditVariableDialog.vue
index 7c19f63916..242e6e732b 100644
--- a/opal-ui/src/components/datasource/EditVariableDialog.vue
+++ b/opal-ui/src/components/datasource/EditVariableDialog.vue
@@ -18,7 +18,7 @@
           />
           <q-select
             v-model="selected.valueType"
-            :options="valueTypes"
+            :options="ValueTypes"
             :label="$t('value_type')"
             :hint="$t('value_type_hint')"
             :disable="editMode && hasValues"
@@ -103,7 +103,7 @@ export default defineComponent({
 <script setup lang="ts">
 import { VariableDto } from 'src/models/Magma';
 import { notifyError } from 'src/utils/notify';
-import { valueTypes } from 'src/utils/magma';
+import { ValueTypes } from 'src/utils/magma';
 
 interface DialogProps {
   modelValue: boolean;
diff --git a/opal-ui/src/components/datasource/TableVariables.vue b/opal-ui/src/components/datasource/TableVariables.vue
index a9730b81db..ab18b6d61c 100644
--- a/opal-ui/src/components/datasource/TableVariables.vue
+++ b/opal-ui/src/components/datasource/TableVariables.vue
@@ -31,6 +31,14 @@
               size="sm"
               @click="onRefresh"
             />
+            <q-btn
+              color="secondary"
+              icon="search"
+              :title="$t('search')"
+              outline
+              size="sm"
+              @click="onSearch"
+            />
             <q-btn
               v-if="datasourceStore.perms.table?.canUpdate()"
               outline
@@ -163,6 +171,7 @@ const router = useRouter();
 const { t } = useI18n();
 const datasourceStore = useDatasourceStore();
 const taxonomiesStore = useTaxonomiesStore();
+const searchStore = useSearchStore();
 const { locale } = useI18n({ useScope: 'global' });
 
 const filter = ref('');
@@ -310,4 +319,11 @@ function onShowDeleteAnnotation() {
   annotationOperation.value = 'delete';
   showAnnotate.value = true;
 }
+
+function onSearch() {
+  searchStore.reset();
+  searchStore.variablesQuery.criteria['project'] = [dsName.value];
+  searchStore.variablesQuery.criteria['table'] = [tName.value];
+  router.push('/search/variables');
+}
 </script>
diff --git a/opal-ui/src/components/datasource/VariableAttributes.vue b/opal-ui/src/components/datasource/VariableAttributes.vue
index 288f6ad0ca..490b5483f4 100644
--- a/opal-ui/src/components/datasource/VariableAttributes.vue
+++ b/opal-ui/src/components/datasource/VariableAttributes.vue
@@ -37,6 +37,17 @@
             <q-item-section v-if="canUpdate" side>
               <table>
                 <tr>
+                  <td>
+                    <q-btn
+                      rounded
+                      dense
+                      flat
+                      size="sm"
+                      color="secondary"
+                      :title="$t('search')"
+                      icon="search"
+                      @click="onSearch(annotation)" />
+                  </td>
                   <td>
                     <q-btn
                       rounded
@@ -201,8 +212,10 @@ import ConfirmDialog from 'src/components/ConfirmDialog.vue';
 import { AttributeDto } from 'src/models/Magma';
 
 const { t } = useI18n();
+const router = useRouter();
 const datasourceStore = useDatasourceStore();
 const taxonomiesStore = useTaxonomiesStore();
+const searchStore = useSearchStore();
 
 const tab = ref('annotations');
 const tableRef = ref();
@@ -255,6 +268,16 @@ const bundles = computed(() => datasourceStore.variableAttributesBundles || []);
 const labelBundle = computed(() => bundles.value.find((bndl) => bndl.id === 'label'));
 const descriptionBundle = computed(() => bundles.value.find((bndl) => bndl.id === 'description'));
 
+function onSearch(annotation: Annotation | undefined) {
+  if (annotation) {
+    searchStore.reset();
+    searchStore.variablesQuery.criteria['project'] = [datasourceStore.datasource.name];
+    searchStore.variablesQuery.criteria['table'] = [datasourceStore.table.name];
+    searchStore.variablesQuery.criteria[`${annotation.taxonomy.name}-${annotation.vocabulary.name}`] = [annotation.term.name];
+    router.push('/search/variables');
+  }
+}
+
 function onShowAnnotate(annotation: Annotation | undefined) {
   annotationSelected.value = annotation;
   showAnnotate.value = true;
diff --git a/opal-ui/src/components/datasource/VariableScriptDialog.vue b/opal-ui/src/components/datasource/VariableScriptDialog.vue
index 8ffc9361dd..7e51669678 100644
--- a/opal-ui/src/components/datasource/VariableScriptDialog.vue
+++ b/opal-ui/src/components/datasource/VariableScriptDialog.vue
@@ -16,7 +16,7 @@
           <div class="row q-gutter-md q-mb-md">
             <q-select
               v-model="valueType"
-              :options="valueTypes"
+              :options="ValueTypes"
               :label="$t('value_type')"
               dense
               style="width: 200px;"/>
@@ -70,7 +70,7 @@ export default defineComponent({
 </script>
 <script setup lang="ts">
 import { VAceEditor } from 'vue3-ace-editor';
-import { valueTypes } from 'src/utils/magma';
+import { ValueTypes } from 'src/utils/magma';
 import { VariableDto, AttributeDto } from 'src/models/Magma';
 
 interface DialogProps {
diff --git a/opal-ui/src/components/datasource/import/ImportCsvForm.vue b/opal-ui/src/components/datasource/import/ImportCsvForm.vue
index b22edc83d3..ee4519da01 100644
--- a/opal-ui/src/components/datasource/import/ImportCsvForm.vue
+++ b/opal-ui/src/components/datasource/import/ImportCsvForm.vue
@@ -29,7 +29,7 @@
       <div class="col">
         <q-select
           v-model="defaultValueType"
-          :options="valueTypes"
+          :options="ValueTypes"
           :label="$t('default_value_type')"
           @update:model-value="onUpdate"
           dense/>
@@ -88,7 +88,7 @@ export default defineComponent({
 <script setup lang="ts">
 import { DatasourceFactory } from 'src/components/models';
 import { FileDto } from 'src/models/Opal';
-import { valueTypes } from 'src/utils/magma';
+import { ValueTypes } from 'src/utils/magma';
 import FileSelect from 'src/components/files/FileSelect.vue';
 
 interface ImportCsvFormProps {
diff --git a/opal-ui/src/i18n/en/index.js b/opal-ui/src/i18n/en/index.js
index 93bb718a88..786b467064 100644
--- a/opal-ui/src/i18n/en/index.js
+++ b/opal-ui/src/i18n/en/index.js
@@ -1066,11 +1066,18 @@ export default {
   variables_index_cleared: 'Variables index cleared.',
   variables_index_clear_error: 'Variables index clear error.',
   variables_search: 'Variables search',
+  variables_search_info: 'Search variables using controlled vocabularies and full-text search. The controlled vocabularies are defined by the taxonomies. The full-text search applies to the variable name and labels. See [Search Variables documentation](http://opaldoc.obiba.org/en/latest/web-user-guide/search/variables.html) for more details.',
   variables_search_caption: 'Search for variables by name, label, description, category, attribute or vocabulary term.',
   entity: 'Entity',
   entity_search: 'Entity search',
   entity_search_info: 'Search an entity by providing its type and its identifier. See [Search Entity documentation](http://opaldoc.obiba.org/en/latest/web-user-guide/search/entity.html) for more details.',
   entity_search_caption: 'Search for entity by identifier.',
+  advanced_search: 'Advanced search',
+  more_results: 'More results',
+  filters: 'Filters',
+  filter: 'Filter',
+  nature: 'Nature',
+  results: 'Results',
   stats: {
     min: 'Minimun',
     max: 'Maximum',
@@ -1095,5 +1102,13 @@ export default {
       UPTODATE: 'Up to date',
       UNRECOGNIZED: 'Unrecognized'
     }
+  },
+  variable_nature: {
+    CATEGORICAL: 'Categorical',
+    CONTINUOUS: 'Continuous',
+    TEMPORAL: 'Temporal',
+    GEO: 'Geographical',
+    BINARY: 'Binary',
+    UNDETERMINED: 'Undetermined',
   }
 };
diff --git a/opal-ui/src/i18n/fr/index.js b/opal-ui/src/i18n/fr/index.js
index fd042aef6c..7b077a214b 100644
--- a/opal-ui/src/i18n/fr/index.js
+++ b/opal-ui/src/i18n/fr/index.js
@@ -1066,12 +1066,19 @@ export default {
   variables_index_cleared: 'L\'index des variables a été supprimé.',
   variables_index_clear_error: 'Erreur lors de la suppression de l\'index des variables.',
   variables_search: 'Recherche de variables',
+  variables_search_info: 'Rechercher des variables à l\'aide de vocabulaires contrôlés et d\'une recherche en texte intégral. Les vocabulaires contrôlés sont définis par les taxonomies. La recherche en texte intégral s\'applique au nom et aux libellés des variables. Voir la [documentation sur la recherche de variables](http://opaldoc.obiba.org/en/latest/web-user-guide/search/variables.html) pour plus de détails.',
   variables_search_caption: 'Recherche de variables par nom, type, catégorie, etc.',
   entity: 'Entité',
   entity_search: 'Recherche d\'entité',
   entity_search_info: 'Recherche d\'entité en fournissant son type et son identifiant. Voir [Search Entity documentation](http://opaldoc.obiba.org/en/latest/web-user-guide/search/entity.html) pour plus de détails.',
   entity_search_caption: 'Recherche d\'entité par identifiant.',
-stats: {
+  advanced_search: 'Recherche avancée',
+  more_results: 'Plus de résultats',
+  filters: 'Filtres',
+  filter: 'Filtre',
+  nature: 'Nature',
+  results: 'Résultats',
+  stats: {
     min: 'Minimun',
     max: 'Maximum',
     mean: 'Moyenne',
@@ -1095,5 +1102,13 @@ stats: {
       UPTODATE: 'À jour',
       UNRECOGNIZED: 'Non reconnue'
     }
+  },
+  variable_nature: {
+    CATEGORICAL: 'Catégorielle',
+    CONTINUOUS: 'Continue',
+    TEMPORAL: 'Temporelle',
+    GEO: 'Géographique',
+    BINARY: 'Binaire',
+    UNDETERMINED: 'Indéterminée',
   }
 };
diff --git a/opal-ui/src/layouts/MainLayout.vue b/opal-ui/src/layouts/MainLayout.vue
index fc0c19711f..5fd4edfd4e 100644
--- a/opal-ui/src/layouts/MainLayout.vue
+++ b/opal-ui/src/layouts/MainLayout.vue
@@ -39,8 +39,11 @@
               <q-list style="min-width: 100px">
                 <q-item clickable v-close-popup v-for="item in itemResults" :key="item.identifier" @click="goToVariable(item)">
                   <q-item-section class="text-caption">
-                    <span>{{ item.identifier }}</span>
-                    <div v-for="attr in getVariableLabels(item)" :key="attr.locale" class="text-hint">
+                    <span>{{ searchStore.getField(item, 'name') }}</span>
+                    <div>
+                      <span class="text-hint text-primary">{{ searchStore.getField(item, 'project') }}.{{ searchStore.getField(item, 'table') }}</span>
+                    </div>
+                    <div v-for="attr in searchStore.getLabels(item)" :key="attr.locale" class="text-hint">
                       <q-badge
                         v-if="attr.locale"
                         color="grey-3"
@@ -51,6 +54,13 @@
                     </div>
                   </q-item-section>
                 </q-item>
+                <q-item v-if="itemResults.length > 0" clickable class="bg-grey-2">
+                  <q-item-section>
+                    <router-link :to="`/search/variables?q=${query}`" class="text-primary">
+                      <q-icon name="arrow_circle_right" size="sm" class="on-left" />{{ $t('advanced_search') }}
+                    </router-link>
+                  </q-item-section>
+                </q-item>
               </q-list>
             </q-menu>
           </q-input>
@@ -138,7 +148,8 @@ import ProjectDrawer from 'src/components/ProjectDrawer.vue';
 import FilesDrawer from 'src/components/FilesDrawer.vue';
 import TaxonomiesDrawer from 'src/components/TaxonomiesDrawer.vue';
 import { computed } from 'vue';
-import { ItemResultDto, ItemFieldsDto, QueryResultDto } from 'src/models/Search';
+import { QueryResultDto } from 'src/models/Search';
+import { ItemFieldsResultDto } from 'src/stores/search';
 
 const router = useRouter();
 const systemStore = useSystemStore();
@@ -155,9 +166,6 @@ const localeOptions = computed(() => {
   }));
 });
 
-interface ItemFieldsResultDto extends ItemResultDto {
-  'Search.ItemFieldsDto.item': ItemFieldsDto;
-}
 
 const leftDrawerOpen = ref(false);
 const query = ref('');
@@ -238,20 +246,6 @@ function onSearch() {
   });
 }
 
-function getVariableLabels(item: ItemFieldsResultDto) {
-  const fields = item['Search.ItemFieldsDto.item'].fields;
-  if (!fields) {
-    return [];
-  }
-  const labels = [];
-  for (const field of fields) {
-    if (field.key.startsWith('label')) {
-      const tokens = field.key.split('-');
-      labels.push({ value: field.value, locale: tokens.length > 1 ? tokens[1] : undefined });
-    }
-  }
-  return labels;
-}
 
 function goToVariable(item: ItemFieldsResultDto) {
   const fields = item['Search.ItemFieldsDto.item'].fields;
diff --git a/opal-ui/src/pages/AdminSearchPage.vue b/opal-ui/src/pages/AdminSearchPage.vue
index 67bbdff397..c3a818cfdb 100644
--- a/opal-ui/src/pages/AdminSearchPage.vue
+++ b/opal-ui/src/pages/AdminSearchPage.vue
@@ -13,7 +13,7 @@
       <q-btn
         color="secondary"
         icon="cleaning_services"
-        :title="$t('clear')"
+        :label="$t('clear')"
         size="sm"
         @click="onVariablesClear"
         class="q-mb-sm"
diff --git a/opal-ui/src/pages/SearchVariablesPage.vue b/opal-ui/src/pages/SearchVariablesPage.vue
index dc2ec1a454..43024c7fa6 100644
--- a/opal-ui/src/pages/SearchVariablesPage.vue
+++ b/opal-ui/src/pages/SearchVariablesPage.vue
@@ -8,10 +8,309 @@
       </q-breadcrumbs>
     </q-toolbar>
     <q-page class="q-pa-md">
+      <div class="text-h6">{{ $t('variables_search') }}</div>
+      <div class="text-help q-mb-md">
+        <q-markdown :src="$t('variables_search_info')" no-heading-anchor-links />
+      </div>
+      <q-card flat class="bg-grey-2 q-mb-md">
+        <q-card-section>
+          <div class="row q-gutter-md">
+            <q-input
+              v-model="searchStore.variablesQuery.query"
+              :label="$t('query')"
+              flat
+              dense
+              size="sm"
+              style="min-width: 400px;"
+              @update:model-value="onClear"
+              @keyup.enter="onSubmit"
+            />
+            <q-btn
+              :label="$t('search')"
+              icon="search"
+              color="primary"
+              size="sm"
+              @click="onSubmit"
+              :disable="loading || !isValid"
+              class="q-mt-lg"
+              style="height: 2.5em;"
+            />
+            <q-btn
+              outline
+              color="secondary"
+              icon="cleaning_services"
+              :label="$t('clear')"
+              size="sm"
+              style="height: 2.5em;"
+              @click="onClearAndReset"
+              class="q-mt-lg" />
+          </div>
+        </q-card-section>
+        <q-card-section class="q-pt-none">
+          <div class="row q-gutter-md">
+            <template v-for="field in fields" :key="field">
+              <q-select
+                :disable="!fieldsOptions[field] || fieldsOptions[field].length === 0"
+                v-model="searchStore.variablesQuery.criteria[field]"
+                :options="fieldsOptions[field]"
+                :label="getFieldLabel(field)"
+                flat
+                dense
+                multiple
+                use-chips
+                emit-value
+                map-options
+                size="sm"
+                @update:model-value="onClearAndSubmit"
+                style="min-width: 200px;">
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps">
+                    <q-item-section style="max-width: 400px;">
+                      <q-item-label>{{ scope.opt.label }}</q-item-label>
+                      <q-item-label caption>{{ scope.opt.description }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </template>
+            <q-btn-dropdown
+              color="secondary"
+              :label="$t('filters')"
+              size="sm"
+              class="q-mt-lg"
+              style="height: 2.5em;"
+            >
+              <q-list>
+                <template v-for="field in fieldsToAdd" :key="field">
+                  <q-item clickable v-close-popup @click="onToggleField(field)">
+                    <q-item-section>
+                      <q-item-label :class="isFieldSelected(field) ? 'text-primary' : ''">{{ getFieldLabel(field) }}</q-item-label>
+                      <q-item-label class="text-hint">{{ getFieldGroupLabel(field) }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-icon
+                        :name="isFieldSelected(field) ? 'delete' : 'add_circle'"
+                        size="xs"
+                        :color="isFieldSelected(field) ? 'primary' : 'grey-6'" />
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-list>
+            </q-btn-dropdown>
+          </div>
+        </q-card-section>
+      </q-card>
 
+      <div v-if="loading">
+        <q-spinner-dots size="lg" />
+      </div>
+      <div v-else-if="itemResults.length">
+        <div class="text-bold q-mb-md">
+          {{ $t('results') }} ({{ itemResults.length }})
+        </div>
+        <q-list separator>
+          <q-item clickable v-close-popup v-for="item in itemResults" :key="item.identifier" @click="goToVariable(item)">
+            <q-item-section avatar>
+              <span>{{ searchStore.getField(item, 'name') }}</span>
+              <div>
+                <span class="text-hint text-primary">{{ searchStore.getField(item, 'project') }}.{{ searchStore.getField(item, 'table') }}</span>
+              </div>
+            </q-item-section>
+            <q-item-section top>
+              <div v-for="attr in searchStore.getLabels(item)" :key="attr.locale" class="text-hint">
+                <q-badge
+                  v-if="attr.locale"
+                  color="grey-3"
+                  :label="attr.locale"
+                  class="q-mr-xs text-grey-6"
+                />
+                <span>{{ attr.value }}</span>
+              </div>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="arrow_circle_right" color="grey-6" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+        <div v-if="limit <= itemResults.length" class="q-mt-md">
+          <q-btn
+            no-caps
+            icon="add_circle"
+            :label="$t('more_results')"
+            color="primary"
+            size="sm"
+            @click="addLimit"
+          />
+        </div>
+      </div>
     </q-page>
   </div>
 </template>
 
 <script setup lang="ts">
+import { TableDto } from 'src/models/Magma';
+import { QueryResultDto } from 'src/models/Search';
+import { ItemFieldsResultDto } from 'src/stores/search';
+import { VariableNatures, ValueTypes } from 'src/utils/magma';
+
+const route = useRoute();
+const router = useRouter();
+const searchStore = useSearchStore();
+const taxonomiesStore = useTaxonomiesStore();
+const { t, locale } = useI18n({ useScope: 'global' });
+
+const loading = ref<boolean>(false);
+const showResults = ref(false);
+const results = ref<QueryResultDto>();
+const limit = ref<number>(10);
+const tables = ref<TableDto[]>([]);
+
+const queryParam = computed(() => route.query.q as string || '');
+const isValid = computed(() => !!searchStore.variablesQuery.query?.trim() || Object.values(searchStore.variablesQuery.criteria).some((criteria) => criteria.length > 0));
+const itemResults = computed(() => results.value?.hits as ItemFieldsResultDto[] || []);
+
+interface FieldsOptions {
+  [key: string]: { label: string, value: string }[]
+}
+
+const fields = computed(() => Object.keys(searchStore.variablesQuery.criteria));
+const projectsOptions = computed(() => Array.from(new Set(tables.value.map((table) => table.datasourceName))).sort());
+const tablesOptions = computed(() => Array.from(new Set(tables.value.map((table) => table.name))).sort());
+const taxonomiesFieldsOptions = computed<FieldsOptions>(() => {
+  const taxonomiesOptions = {} as FieldsOptions;
+  taxonomiesStore.taxonomies.forEach((taxonomy) => {
+    taxonomy.vocabularies.filter((voc) => voc.terms).forEach((vocabulary) => {
+      taxonomiesOptions[`${taxonomy.name}-${vocabulary.name}`] = vocabulary.terms.map((term) => ({
+        label: taxonomiesStore.getLabel(term.title, locale.value),
+        value: term.name,
+        description: taxonomiesStore.getLabel(term.description, locale.value),
+      }));
+    })
+  });
+  return taxonomiesOptions
+});
+const fieldsOptions = computed<FieldsOptions>(() => {
+  return {
+    project: projectsOptions.value.filter((p) => p !== undefined).map((project) => ({ label: project, value: project })),
+    table: tablesOptions.value.map((table) => ({ label: table, value: table })),
+    nature: Object.keys(VariableNatures).map((key) => ({ label: t(`variable_nature.${key}`), value: key })),
+    'value-type': ValueTypes.map((t) => ({ label: t, value: t })),
+    ...taxonomiesFieldsOptions.value,
+  };
+});
+const fieldsToAdd = computed(() => {
+  return ['project', 'table', 'nature', 'value-type', ...Object.keys(taxonomiesFieldsOptions.value)];
+});
+
+onMounted(() => {
+  if (queryParam.value) {
+    searchStore.reset();
+    searchStore.variablesQuery.query = queryParam.value;
+  }
+  loading.value = true;
+  Promise.all([
+    searchStore.getTables().then((res) => tables.value = res),
+    taxonomiesStore.init(),
+  ])
+    .then(() => onSubmit())
+    .catch(() => {
+      showResults.value = false;
+      results.value = undefined;
+    })
+    .finally(() => loading.value = false);
+});
+
+function onClear() {
+  showResults.value = false;
+  results.value = undefined;
+  limit.value = 10;
+}
+
+function onSubmit() {
+  if (isValid.value) {
+    loading.value = true;
+    searchStore.searchVariables(limit.value).then((res) => {
+      showResults.value = res.totalHits > 0;
+      results.value = res;
+    })
+    .finally(() => loading.value = false);
+  } else {
+    loading.value = false;
+  }
+}
+
+function onClearAndSubmit() {
+  onClear();
+  onSubmit();
+}
+
+function onClearAndReset() {
+  onClear();
+  searchStore.reset();
+}
+
+function goToVariable(item: ItemFieldsResultDto) {
+  const fields = item['Search.ItemFieldsDto.item'].fields;
+  let project;
+  let table;
+  let variable;
+  for (const field of fields) {
+    if (field.key === 'project') {
+      project = field.value;
+    } else if (field.key === 'table') {
+      table = field.value;
+    } else if (field.key === 'name') {
+      variable = field.value;
+    }
+  }
+  if (project || table || variable) {
+    router.push(`/project/${project}/table/${table}/variable/${variable}`);
+  }
+}
+
+function addLimit() {
+  limit.value += 10;
+  onSubmit();
+}
+
+function getFieldLabel(field: string) {
+  if (field === 'project') {
+    return t('projects');
+  } else if (field === 'table') {
+    return t('tables');
+  }
+  // lookup in taxonomies
+  for (const taxonomy of taxonomiesStore.taxonomies) {
+    for (const vocabulary of taxonomy.vocabularies) {
+      if (field === `${taxonomy.name}-${vocabulary.name}`) {
+        return taxonomiesStore.getLabel(vocabulary.title, locale.value);
+      }
+    }
+  }
+  return t(field.replaceAll('-', '_'));
+}
+
+function getFieldGroupLabel(field: string) {
+  // lookup in taxonomies
+  for (const taxonomy of taxonomiesStore.taxonomies) {
+    for (const vocabulary of taxonomy.vocabularies) {
+      if (field === `${taxonomy.name}-${vocabulary.name}`) {
+        return taxonomiesStore.getLabel(taxonomy.title, locale.value);
+      }
+    }
+  }
+  return '';
+}
+
+function onToggleField(field: string) {
+  if (searchStore.variablesQuery.criteria[field] == undefined) {
+    searchStore.variablesQuery.criteria[field] = [];
+  } else {
+    delete searchStore.variablesQuery.criteria[field];
+  }
+}
+
+function isFieldSelected(field: string) {
+  return searchStore.variablesQuery.criteria[field] != undefined;
+}
 </script>
diff --git a/opal-ui/src/pages/SigninPage.vue b/opal-ui/src/pages/SigninPage.vue
index c449970a56..8334b88852 100644
--- a/opal-ui/src/pages/SigninPage.vue
+++ b/opal-ui/src/pages/SigninPage.vue
@@ -163,6 +163,7 @@ const identityProvidersStore = useIdentityProvidersStore();
 const tokensStore = useTokensStore();
 const identifiersStore = useIdentifiersStore();
 const appsStore = useAppsStore();
+const searchStore = useSearchStore();
 
 const { cookies } = useCookies();
 const { locale, t } = useI18n({ useScope: 'global' });
@@ -212,6 +213,7 @@ onMounted(() => {
   });
   identifiersStore.reset();
   appsStore.reset();
+  searchStore.reset();
 });
 
 function onLocaleSelection(localeOpt: { label: string; value: string }) {
diff --git a/opal-ui/src/stores/search.ts b/opal-ui/src/stores/search.ts
index 27e9e7016c..c3f5b17e34 100644
--- a/opal-ui/src/stores/search.ts
+++ b/opal-ui/src/stores/search.ts
@@ -1,8 +1,52 @@
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/api';
+import { ItemFieldsDto, ItemResultDto } from 'src/models/Search';
+
+export interface ItemFieldsResultDto extends ItemResultDto {
+  'Search.ItemFieldsDto.item': ItemFieldsDto;
+}
+
+export interface SearchQuery {
+  query: string;
+  criteria: SearchCriteria;
+}
+
+export interface SearchCriteria {
+  [key: string]: string[];
+}
 
 export const useSearchStore = defineStore('search', () => {
 
+  const variablesQuery = ref({
+    query: '',
+    criteria: {
+      project: [],
+      table: [],
+    } as SearchCriteria,
+  });
+
+  function reset() {
+    variablesQuery.value = {
+      query: '',
+      criteria: {
+        project: [],
+        table: [],
+      } as SearchCriteria
+    };
+  }
+
+  async function searchVariables(limit: number) {
+    let fullQuery = variablesQuery.value.query?.trim() || '';
+    Object.keys(variablesQuery.value.criteria).forEach((key) => {
+      const terms = variablesQuery.value.criteria[key];
+      if (terms.length > 0) {
+        const statement = `(${terms.map((t) => `${key}:"${t}"`).join(' OR ')})`
+        fullQuery = fullQuery.length === 0 ? statement : `${fullQuery} AND ${statement}`;
+      }
+    });
+    return search(fullQuery, limit, ['label', 'label-en']);
+  }
+
   async function search(query: string, limit: number, fields: string[] | undefined) {
     return api.get('/datasources/variables/_search', {
       params: { query, limit, field: fields },
@@ -22,10 +66,48 @@ export const useSearchStore = defineStore('search', () => {
       .then(response => response.data);
   }
 
+  async function getTables() {
+    return api.get('/datasources/tables')
+      .then(response => response.data);
+  }
+
+  //
+  // Results helpers
+  //
+
+  function getLabels(item: ItemFieldsResultDto) {
+    const fields = item['Search.ItemFieldsDto.item'].fields;
+    if (!fields) {
+      return [];
+    }
+    const labels = [];
+    for (const field of fields) {
+      if (field.key.startsWith('label')) {
+        const tokens = field.key.split('-');
+        labels.push({ value: field.value, locale: tokens.length > 1 ? tokens[1] : undefined });
+      }
+    }
+    return labels;
+  }
+
+  function getField(item: ItemFieldsResultDto, key: string) {
+    const fields = item['Search.ItemFieldsDto.item'].fields;
+    if (!fields) {
+      return '';
+    }
+    return fields.find((field) => field.key === key)?.value;
+  }
+
   return {
+    variablesQuery,
+    reset,
     search,
+    searchVariables,
     clearIndex,
     getEntityTables,
+    getTables,
+    getLabels,
+    getField,
   };
 
 });
diff --git a/opal-ui/src/utils/magma.ts b/opal-ui/src/utils/magma.ts
index a2125bf9b9..9215614206 100644
--- a/opal-ui/src/utils/magma.ts
+++ b/opal-ui/src/utils/magma.ts
@@ -1,4 +1,4 @@
-export const valueTypes = [
+export const ValueTypes = [
   'text',
   'integer',
   'decimal',
@@ -12,10 +12,19 @@ export const valueTypes = [
   'locale',
 ];
 
-export const valueTypesMap = {
+export const ValueTypesMap = {
   textual: ['text', 'locale'],
   numerical: ['integer', 'decimal'],
   temporal: ['date', 'datetime'],
   geospatial: ['point', 'linestring', 'polygon'],
   other: ['binary', 'boolean'],
 };
+
+export const VariableNatures = {
+  CATEGORICAL: 'CATEGORICAL',
+  CONTINUOUS: 'CONTINUOUS',
+  TEMPORAL: 'TEMPORAL',
+  GEO: 'GEO',
+  BINARY: 'BINARY',
+  UNDETERMINED: 'UNDETERMINED',
+};