Implement Search view

[eboileau]

Aims/objectives.

A base Search view is implemented. This issue tracks more todos, questions, etc. as we're integrating server-side into the app.

A clear and concise description of todo items.

Search View tasks

---

Functionality

• Implement dynamic dependent filters #20

• DataTable

  • Column Toggle. Optional columns e.g. gene symbol, technology, organism. How are these handled by exportCSV?

  const columns = ref([{ field: 'gene', header: 'Gene' }, ...])
  const selectedColumns = ref(columns.value)
  const onToggle = (val) => {
      selectedColumns.value = columns.value.filter((col) => val.includes(col))
  }
  // ...

  <template #header>
      <div style="text-align: left">
          <MultiSelect
              :modelValue="selectedColumns"
              :options="columns"
              optionLabel="header"
              @update:modelValue="onToggle"
              display="chip"
              placeholder="Select Columns"
          />
      </div>
  </template>
  <!-- ... -->
  <Column
      v-for="(col, index) of selectedColumns"
      :field="col.field"
      :header="col.header"
      :key="col.field + '_' + index"
  ></Column>

  • Add second set of "filters": by genomic regions (dependent on RNA type?), by gene symbol and/or biotype (dependent on RNA type?), or exact coordinates. See DB annotation handling #35

  // ? we need to update the selection based on what genes are available after applying filters
  // ? and this must come from the full query results and not the lazy loaded table
  const genes = ref() 
  
  const selectedGenes = ref()
  const suggestedGenes = ref([])
  
  const searchGenes = (event) => {
      setTimeout(() => {
          if (!event.query.trim().length) {
          suggestedGenes.value = [...genes]
          } else {
          suggestedGenes.value = genes.value.filter((gene) => {
              return gene.gene.toLowerCase().startsWith(event.query.toLowerCase())
          })
          }
      }, 250)
  }

  <div>
      <AutoComplete
      @change="updateGene()" <!-- lazy load -->
      v-model="selectedGenes"
      optionLabel="gene"
      multiple
      :suggestions="suggestedGenes"
      @complete="searchGenes"
      placeholder="Limit search to these genes..."
      class="w-full md:w-20rem"
      />
  </div>

  • 2nd set of filters (gene AutoComplete and coordinate selection) need to be dynamically disabled when more than one organism is selected.
  • CSV export only exports the data that is in the "value" model itself. But what's the point of exporting ALL data with lazy loading? If we want to do that, check here for suggestions (exportCSV with custom data)

  /**
   * Exports the data to CSV format.
   * @param {DataTableExportCSVOptions} [options] - Export options.
   * @param {Object[]} [data] - Custom exportable data. This param can be used on lazy dataTable.
   */
  exportCSV: (options?: DataTableExportCSVOptions, data?: any[]) => void;

  We could add e.g. :rowsPerPageOptions="[5, 10, 20, 50]" to the paginator.

Bug/Questions

• Using (DataTable) presort

  :multiSortMeta="[
      { field: 'chrom', order: 1 },
      { field: 'start', order: 1 }
  ]"

  in DataTable breaks everything... How is the default sort order defined? Do we have to care about it?
  We also need to document how to sort: By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with disabling the metaKeySelection property. Note that in touch enabled devices, DataTable always ignores metaKey. We also use removableSort: third click removes the sorting from the column.
• Do we want the table to show "aggregated" rows where a given modification occurs more than once? This should be by coords and organism (but how to do this for peak-like data?). In that case, we need some sort of row expansion to display dataset-specific info (score, coverage, frequency, technology, tissue/organ), and leave only the modification info on the main table (chrom, start, end, name, strand, gene, organism). I guess this can become quite complex to do this.
• Add filters such as "sites confirmed by N techniques and/or found in dataset". This needs to be some sort of computed property, added on display. See also point just above.

Styling

• Add something like a p-float-label class to display a floating label on top of the component when focused.
• Sizing rows or columns, accessibility.
• Spacing in TreeSelect check boxes.
• Divider color (redefine).

[eboileau]

Skeleton for table filters is there, but disabled, until #55 is sorted. I opened separate issues for each major items, check #58, #59, #60, #61. Styling is partly resolved, the rest is minor and is likely to change often until the app reaches production.