From 1f761a30df784ad676ea0a26d85390044391c690 Mon Sep 17 00:00:00 2001
From: Harald Wilhelmi <harald.wilhelmi@uni-heidelberg.de>
Date: Tue, 10 Sep 2024 14:12:19 +0200
Subject: [PATCH] Changing Export in Search view to export all records

---
 .../search/ChromeRegionEnsembleLink.vue       |  24 ++
 .../search/GenesilicoModificationLink.vue     |  17 +
 .../src/components/search/SearchResults.vue   | 249 +++++++++++++
 client/src/components/user/UserProjects.vue   |   1 -
 client/src/utils/selection.js                 |   4 +-
 client/src/views/SearchView.vue               | 329 +++---------------
 server/src/scimodom/api/helpers.py            |  34 ++
 server/src/scimodom/api/modification.py       | 153 ++++++--
 server/src/scimodom/services/modification.py  |  55 +--
 9 files changed, 535 insertions(+), 331 deletions(-)
 create mode 100644 client/src/components/search/ChromeRegionEnsembleLink.vue
 create mode 100644 client/src/components/search/GenesilicoModificationLink.vue
 create mode 100644 client/src/components/search/SearchResults.vue

diff --git a/client/src/components/search/ChromeRegionEnsembleLink.vue b/client/src/components/search/ChromeRegionEnsembleLink.vue
new file mode 100644
index 00000000..bd363c09
--- /dev/null
+++ b/client/src/components/search/ChromeRegionEnsembleLink.vue
@@ -0,0 +1,24 @@
+<script setup>
+const props = defineProps({
+  label: { type: String, required: false },
+  taxaName: { type: String },
+  chrom: { type: String },
+  start: { type: Number },
+  end: { type: Number }
+})
+
+const text = props.label || props.start
+const cookedTaxaName = props.taxaName.replace(/ /g, '_')
+const link = `https://www.ensembl.org/${cookedTaxaName}/Location/View?r=${props.chrom}:${
+  props.start
+}:${props.end + 1};db=core`
+</script>
+<template>
+  <a
+    class="text-primary-500 hover:text-secondary-500"
+    :href="link"
+    target="_blank"
+    rel="noopener noreferrer"
+    >{{ text }}
+  </a>
+</template>
diff --git a/client/src/components/search/GenesilicoModificationLink.vue b/client/src/components/search/GenesilicoModificationLink.vue
new file mode 100644
index 00000000..f83bbfd7
--- /dev/null
+++ b/client/src/components/search/GenesilicoModificationLink.vue
@@ -0,0 +1,17 @@
+<script setup>
+const props = defineProps({
+  name: { type: String },
+  referenceId: { type: String }
+})
+const link = `https://www.genesilico.pl/modomics/modifications/${props.referenceId}`
+</script>
+<template>
+  <a
+    class="text-primary-500 hover:text-secondary-500"
+    :href="link"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    {{ name }}
+  </a>
+</template>
diff --git a/client/src/components/search/SearchResults.vue b/client/src/components/search/SearchResults.vue
new file mode 100644
index 00000000..e61c5e55
--- /dev/null
+++ b/client/src/components/search/SearchResults.vue
@@ -0,0 +1,249 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ModificationInfo from '@/components/modification/ModificationInfo.vue'
+import { getApiUrl, HTTP } from '@/services/API'
+import { fmtFilter, fmtOrder } from '@/utils'
+import ChromeRegionEnsembleLink from '@/components/search/ChromeRegionEnsembleLink.vue'
+import GenesilicoModificationLink from '@/components/search/GenesilicoModificationLink.vue'
+
+const props = defineProps({
+  searchParameters: { type: Object },
+  taxaName: { type: String },
+  disabled: { type: Boolean }
+})
+/*
+  searchParameters look like this
+
+  modification: int - modification ID,
+  organism: int - organism ID,
+  technology: int[] - technology IDs,
+  rnaType: ?,
+  taxaId: int | null,
+  taxaName: str | null,
+  chrom: str | null
+  chromStart: int | null
+  chromEnd: int | null,
+  geneName: ? | null,
+  geneBiotype: ? | null,
+  feature: ? | null,
+
+  We really need to move to TypeScript ...
+
+*/
+
+const dt = ref()
+const showDetails = ref(false)
+const selectedSite = ref({})
+const totalRecords = ref(0)
+const loading = ref(false)
+const firstRecord = ref(0)
+const maxRecords = ref(10)
+const multiSortMeta = ref()
+const records = ref()
+
+const router = useRouter()
+const disableExportLink = computed(() => props.disabled || loading.value)
+const exportLink = getExportLink()
+
+onMounted(() => loadData())
+
+function onPageOrSort(event) {
+  multiSortMeta.value = event.multiSortMeta
+  firstRecord.value = event.first
+  maxRecords.value = event.rows
+  loadData()
+}
+
+function navigateTo(eufid) {
+  const { href } = router.resolve({ name: 'browse', params: { eufid: eufid } })
+  window.open(href, '_blank')
+}
+
+function onOverlay(record) {
+  selectedSite.value = { ...record }
+  showDetails.value = true
+}
+
+function loadData() {
+  console.log(`XXX ${JSON.stringify(props)}`)
+  if (props.disabled) {
+    return
+  }
+  loading.value = true
+  const params = getQueryParams(firstRecord.value, maxRecords.value)
+  HTTP.get('/modification/', {
+    params: params,
+    paramsSerializer: { indexes: null }
+  })
+    .then(function (response) {
+      records.value = response.data.records
+      totalRecords.value = response.data.totalRecords
+      loading.value = false
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+function getQueryParams(myFirstRecord = null, myMaxRecords = null) {
+  const p = props.searchParameters
+  // reformat filters for gene, biotypes and features as PV table filters
+  const filters = {
+    // matchMode is actually hard coded to "equal" in the BE; forceSelection is toggled
+    gene_name: { value: p.geneName, matchMode: 'startsWith' },
+    gene_biotype: { value: p.geneBiotype, matchMode: 'in' },
+    feature: { value: p.feature, matchMode: 'in' }
+  }
+  return {
+    modification: p.modification,
+    organism: p.organism,
+    technology: p.technology,
+    rnaType: p.rnaType,
+    taxaId: p.taxaId,
+    geneFilter: fmtFilter(filters),
+    chrom: p.chrom,
+    chromStart: p.chromStart,
+    chromEnd: p.chromEnd,
+    firstRecord: myFirstRecord,
+    maxRecords: myMaxRecords,
+    multiSort: fmtOrder(multiSortMeta.value)
+  }
+}
+
+function getExportLink() {
+  if (disableExportLink.value) {
+    return ''
+  }
+  const rawParams = getQueryParams()
+  const url = new URL(getApiUrl('modification/csv'))
+  for (const [k, v] of Object.entries(rawParams)) {
+    if (v != null) {
+      url.searchParams.append(k, v)
+    }
+  }
+  return url.toString()
+}
+</script>
+<template>
+  <DataTable
+    :value="records"
+    dataKey="id"
+    ref="dt"
+    lazy
+    :paginator="true"
+    :totalRecords="totalRecords"
+    :loading="loading"
+    :first="firstRecord"
+    :rows="maxRecords"
+    @page="onPageOrSort($event)"
+    @sort="onPageOrSort($event)"
+    removableSort
+    sortMode="multiple"
+    stripedRows
+    paginatorTemplate="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
+  >
+    <template #header>
+      <div style="text-align: right" v-if="disableExportLink">
+        <Button
+          icon="pi pi-external-link"
+          size="small"
+          severity="secondary"
+          raised
+          label="Export"
+          :disabled="true"
+        />
+      </div>
+      <div style="text-align: right" v-else>
+        <a :href="exportLink">
+          <Button
+            icon="pi pi-external-link"
+            size="small"
+            severity="secondary"
+            raised
+            label="Export"
+          />
+        </a>
+      </div>
+    </template>
+    <template #empty>
+      <p class="text-center text-secondary-500 font-semibold">
+        No records match your search criteria!
+      </p>
+    </template>
+    <template #loading>
+      <ProgressSpinner style="width: 60px; height: 60px" strokeWidth="6" />
+    </template>
+    <Column field="chrom" header="Chrom" sortable></Column>
+    <Column field="start" header="Start" sortable>
+      <template #body="{ data }">
+        <ChromeRegionEnsembleLink
+          :taxa-name="taxaName"
+          :chrom="data.chrom"
+          :start="data.start"
+          :end="data.end"
+        />
+      </template>
+    </Column>
+    <Column field="end">
+      <template #header>
+        <span v-tooltip.top="'Open (end excluded)'">End</span>
+      </template>
+    </Column>
+    <Column field="name" header="Name">
+      <template #body="{ data }">
+        <GenesilicoModificationLink :name="data.name" :reference-id="data.reference_id" />
+      </template>
+    </Column>
+    <Column field="score" sortable>
+      <template #header>
+        <span v-tooltip.top="'-log10(p) or 0 if undefined'">Score</span>
+      </template>
+    </Column>
+    <Column field="strand" header="Strand"></Column>
+    <Column field="coverage" sortable>
+      <template #header>
+        <span v-tooltip.top="'0 if not available'">Coverage</span>
+      </template>
+    </Column>
+    <Column field="frequency" sortable>
+      <template #header>
+        <span v-tooltip.top="'Modification stoichiometry'">Frequency</span>
+      </template>
+    </Column>
+    <Column field="dataset_id">
+      <template #header>
+        <span v-tooltip.top="'Dataset ID'">EUFID</span>
+      </template>
+      <template #body="{ data }">
+        <Button
+          size="small"
+          :label="data.dataset_id"
+          severity="secondary"
+          text
+          @click="navigateTo(data.dataset_id)"
+        />
+      </template>
+    </Column>
+    <Column field="tech" header="Technology"></Column>
+    <Column field="feature" header="Feature"></Column>
+    <Column field="gene_name" header="Gene"></Column>
+    <Column field="gene_biotype" header="Biotype"></Column>
+    <Column :exportable="false" style="width: 5%">
+      <template #header>
+        <span v-tooltip.top="'Click for site information'">Info</span>
+      </template>
+      <template #body="slotProps">
+        <Button
+          icon="pi pi-info"
+          outlined
+          rounded
+          severity="secondary"
+          @click="onOverlay(slotProps.data)"
+        />
+      </template>
+    </Column>
+  </DataTable>
+  <ModificationInfo v-model:visible="showDetails" :site="selectedSite" />
+</template>
diff --git a/client/src/components/user/UserProjects.vue b/client/src/components/user/UserProjects.vue
index f8f9c518..f4e19584 100644
--- a/client/src/components/user/UserProjects.vue
+++ b/client/src/components/user/UserProjects.vue
@@ -8,7 +8,6 @@ import { loadProjects } from '@/services/project'
 const records = ref()
 
 onMounted(() => {
-  console.log('Loading ...')
   loadProjects(records, null, true)
 })
 </script>
diff --git a/client/src/utils/selection.js b/client/src/utils/selection.js
index 4b8a93a8..64003fdf 100644
--- a/client/src/utils/selection.js
+++ b/client/src/utils/selection.js
@@ -48,9 +48,9 @@ export const updTechnologyFromModAndOrg = (selection, slctMod, slctOrg) => {
   return tree
 }
 
-export const updSelectionFromAll = (selection, slctMod, slctOrg, slctTech) => {
+export const updSelectionFromAll = (all_selections, slctMod, slctOrg, slctTech) => {
   let idsTech = toIds(slctTech, [])
-  let opts = selection.filter(
+  let opts = all_selections.filter(
     (item) =>
       item.modification_id == slctMod.key &&
       item.organism_id == slctOrg.key &&
diff --git a/client/src/views/SearchView.vue b/client/src/views/SearchView.vue
index c28b34b6..06c7c42a 100644
--- a/client/src/views/SearchView.vue
+++ b/client/src/views/SearchView.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useConfirm } from 'primevue/useconfirm'
-import { fmtOrder, fmtFilter } from '@/utils/index.js'
 import {
   updModification,
   updOrganismFromMod,
@@ -12,16 +10,15 @@ import {
 import { HTTP } from '@/services/API.js'
 import StyledHeadline from '@/components/ui/StyledHeadline.vue'
 import SubTitle from '@/components/ui/SubTitle.vue'
-import ModificationInfo from '@/components/modification/ModificationInfo.vue'
 import GeneSelect from '@/components/search/GeneSelect.vue'
 import BiotypeSelect from '@/components/search/BiotypeSelect.vue'
 import FeatureSelect from '@/components/search/FeatureSelect.vue'
 import ChromSelect from '@/components/search/ChromSelect.vue'
+import SearchResults from '@/components/search/SearchResults.vue'
 
-const router = useRouter()
 const confirm = useConfirm()
 
-const options = ref()
+const all_selections = ref()
 const selectedBiotypes = ref()
 const selectedFeatures = ref()
 const rnaType = ref('')
@@ -40,18 +37,40 @@ const selectedChrom = ref()
 const selectedChromStart = ref()
 const selectedChromEnd = ref()
 
-const dt = ref()
-const first = ref(0)
-const rows = ref(10)
-const records = ref()
-const loading = ref(false)
-const totalRecords = ref(0)
-const lazyParams = ref({})
-const showDetails = ref(false)
-const selectedSite = ref({})
+const isConfirmed = ref(false)
+const updateCount = ref(0)
 
-const disabled = computed(() => isAllSelected())
-const confirmed = computed(() => isAnyExtraSelected())
+const queryButtonDisabled = computed(
+  () =>
+    selectedModification.value == null ||
+    selectedTechnology.value == null ||
+    selectedOrganism.value == null
+)
+const needsConfirm = computed(() => selectedGene.value == null && selectedChrom.value == null)
+const resultsDisabled = computed(() => queryButtonDisabled.value || !isConfirmed.value)
+const searchParameters = computed(() => getSearchParameters())
+
+function getSearchParameters() {
+  const chromEnd =
+    selectedChromEnd.value != null
+      ? selectedChromEnd.value
+      : selectedChrom.value != null
+      ? selectedChrom.value.size
+      : null
+  return {
+    modification: selectedModification.value?.key,
+    organism: selectedOrganism.value?.key,
+    technology: selectedTechnologyIds.value,
+    rnaType: rnaType.value,
+    taxaId: taxaId.value,
+    chrom: selectedChrom.value == null ? null : selectedChrom.value.chrom,
+    chromStart: selectedChromStart.value == null ? 0 : selectedChromStart.value,
+    chromEnd: chromEnd,
+    geneName: selectedGene.value === undefined ? null : selectedGene.value,
+    geneBiotype: selectedBiotypes.value === undefined ? null : selectedBiotypes.value,
+    feature: selectedFeatures.value === undefined ? null : selectedFeatures.value
+  }
+}
 
 // utilities to reset options/filters
 const clearCoords = () => {
@@ -72,6 +91,7 @@ const clearSelected = (value) => {
   selectedGene.value = undefined
   selectedBiotypes.value = undefined
   selectedFeatures.value = undefined
+  isConfirmed.value = false
 }
 const clearSelection = (value) => {
   if (value < 1) {
@@ -80,7 +100,6 @@ const clearSelection = (value) => {
   if (value < 2) {
     selectionIds.value = []
   }
-  records.value = undefined
   rnaType.value = ''
 }
 const clearAll = (value) => {
@@ -93,13 +112,13 @@ const clearAll = (value) => {
 const updateOrganism = () => {
   // on first filter (modification) change
   clearAll(0)
-  organism.value = updOrganismFromMod(options.value, selectedModification.value)
+  organism.value = updOrganismFromMod(all_selections.value, selectedModification.value)
 }
 const updateTechnology = () => {
   // on second filter (organism) change
   clearAll(1)
   technology.value = updTechnologyFromModAndOrg(
-    options.value,
+    all_selections.value,
     selectedModification.value,
     selectedOrganism.value
   )
@@ -108,7 +127,7 @@ const updateSelection = () => {
   // on third filter (technology) change
   clearAll(2)
   let result = updSelectionFromAll(
-    options.value,
+    all_selections.value,
     selectedModification.value,
     selectedOrganism.value,
     selectedTechnology.value
@@ -125,131 +144,30 @@ const updateSelection = () => {
 }
 
 const confirmSearch = () => {
-  if (confirmed.value) {
-    lazyLoad()
-  } else {
+  if (needsConfirm.value) {
     confirm.require({
       message:
         'You can narrow down your search by selecting a gene or a genomic region (chromosome). Are you sure you want to proceed?',
       header: 'Broad search criteria may result in large, slow-running queries!',
       accept: () => {
-        lazyLoad()
+        isConfirmed.value = true
+        updateCount.value += 1
       },
       reject: () => {} // do nothing
     })
+  } else {
+    isConfirmed.value = true
+    updateCount.value += 1
   }
 }
 
-// table-related utilities
-const getFileName = () => {
-  let stamp = new Date()
-  return 'scimodom_search_' + stamp.toISOString().replaceAll(/:/g, '')
-}
-
-const onPage = (event) => {
-  lazyParams.value = event
-  if (!disabled.value) {
-    lazyLoad(event)
-  }
-}
-const onSort = (event) => {
-  lazyParams.value = event
-  if (!disabled.value) {
-    lazyLoad(event)
-  }
-}
-const onExport = () => {
-  dt.value.exportCSV()
-}
-
-const navigateTo = (eufid) => {
-  const { href } = router.resolve({ name: 'browse', params: { eufid: eufid } })
-  window.open(href, '_blank')
-}
-
-const onOverlay = (record) => {
-  selectedSite.value = { ...record }
-  showDetails.value = true
-}
-
 // functions
-function isAllSelected() {
-  return (
-    selectedModification.value == null ||
-    selectedTechnology.value == null ||
-    selectedOrganism.value == null
-  )
-}
-function isAnyExtraSelected() {
-  return selectedGene.value != null || selectedChrom.value != null
-}
-
-function addOne(value) {
-  return value + 1
-}
-
-function lazyLoad(event) {
-  loading.value = true
-  lazyParams.value = { ...lazyParams.value, first: event?.first || first.value }
-  // reformat filters for gene, biotypes and features as PV table filters
-  let filters = {
-    // matchMode is actually hard coded to "equal" in the BE; forceSelection is toggled
-    gene_name: {
-      value: selectedGene.value === undefined ? null : selectedGene.value,
-      matchMode: 'startsWith'
-    },
-    gene_biotype: {
-      value: selectedBiotypes.value === undefined ? null : selectedBiotypes.value,
-      matchMode: 'in'
-    },
-    feature: {
-      value: selectedFeatures.value === undefined ? null : selectedFeatures.value,
-      matchMode: 'in'
-    }
-  }
-  HTTP.get('/modification/', {
-    params: {
-      modification: selectedModification.value.key,
-      organism: selectedOrganism.value.key,
-      technology: selectedTechnologyIds.value,
-      rnaType: rnaType.value,
-      taxaId: taxaId.value,
-      geneFilter: fmtFilter(filters),
-      chrom: selectedChrom.value == null ? null : selectedChrom.value.chrom,
-      chromStart: selectedChromStart.value == null ? 0 : selectedChromStart.value,
-      chromEnd:
-        selectedChromEnd.value == null
-          ? selectedChrom.value == null
-            ? null
-            : selectedChrom.value.size
-          : selectedChromEnd.value,
-      firstRecord: lazyParams.value.first,
-      maxRecords: lazyParams.value.rows,
-      multiSort: fmtOrder(lazyParams.value.multiSortMeta)
-    },
-    paramsSerializer: {
-      indexes: null
-    }
-  })
-    .then(function (response) {
-      records.value = response.data.records
-      totalRecords.value = response.data.totalRecords
-      loading.value = false
-    })
-    .catch((error) => {
-      console.log(error)
-    })
-}
 
 onMounted(() => {
-  lazyParams.value = {
-    first: first.value,
-    rows: rows.value
-  }
   HTTP.get('/selections')
     .then(function (response) {
-      options.value = response.data
-      modification.value = updModification(options.value)
+      all_selections.value = response.data
+      modification.value = updModification(all_selections.value)
     })
     .catch((error) => {
       console.log(error)
@@ -320,7 +238,7 @@ onMounted(() => {
             placeholder="4. Select gene (optional)"
             v-model="selectedGene"
             :selection-ids="selectionIds"
-            :disabled="disabled"
+            :disabled="queryButtonDisabled"
             @change="clearChrom()"
           />
         </div>
@@ -329,7 +247,7 @@ onMounted(() => {
             placeholder="5. Select biotype (optional)"
             v-model="selectedBiotypes"
             :rna-type="rnaType"
-            :disabled="disabled"
+            :disabled="queryButtonDisabled"
           />
         </div>
         <div class="col-span-3">
@@ -337,7 +255,7 @@ onMounted(() => {
             placeholder="6. Select feature (optional)"
             v-model="selectedFeatures"
             :rna-type="rnaType"
-            :disabled="disabled"
+            :disabled="queryButtonDisabled"
           />
         </div>
         <div></div>
@@ -349,7 +267,7 @@ onMounted(() => {
             placeholder="7. Select chromosome (optional)"
             v-model="selectedChrom"
             :taxa-id="taxaId"
-            :disabled="disabled || !(selectedGene == null)"
+            :disabled="queryButtonDisabled || !(selectedGene == null)"
             @change="clearCoords()"
           />
         </div>
@@ -389,8 +307,7 @@ onMounted(() => {
             size="small"
             icon="pi pi-sync"
             label="Query"
-            :disabled="disabled"
-            :loading="loading"
+            :disabled="queryButtonDisabled"
             @click="confirmSearch()"
           />
         </div>
@@ -398,142 +315,12 @@ onMounted(() => {
     </SectionLayout>
     <!-- SECTION -->
     <SectionLayout>
-      <!-- TABLE -->
-      <div>
-        <DataTable
-          :value="records"
-          dataKey="id"
-          ref="dt"
-          :exportFilename="getFileName()"
-          lazy
-          :paginator="true"
-          :totalRecords="totalRecords"
-          :loading="loading"
-          :first="first"
-          :rows="rows"
-          @page="onPage($event)"
-          @sort="onSort($event)"
-          removableSort
-          sortMode="multiple"
-          stripedRows
-          paginatorTemplate="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-          currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
-        >
-          <template #header>
-            <div style="text-align: right">
-              <Button
-                icon="pi pi-external-link"
-                size="small"
-                label="Export"
-                severity="secondary"
-                raised
-                @click="onExport($event)"
-                :disabled="disabled"
-                v-tooltip.top="'Export current view'"
-              />
-            </div>
-          </template>
-          <template #empty>
-            <p class="text-center text-secondary-500 font-semibold">
-              No records match your search criteria!
-            </p>
-          </template>
-          <template #loading>
-            <ProgressSpinner style="width: 60px; height: 60px" strokeWidth="6" />
-          </template>
-          <Column field="chrom" header="Chrom" sortable exportHeader="chrom"></Column>
-          <Column field="start" header="Start" sortable exportHeader="chromStart">
-            <template #body="{ data }">
-              <a
-                class="text-primary-500 hover:text-secondary-500"
-                :href="
-                  'https://www.ensembl.org/' +
-                  taxaName.replace(/ /g, '_') +
-                  '/Location/View?r=' +
-                  data.chrom +
-                  ':' +
-                  data.start +
-                  '-' +
-                  addOne(data.end) +
-                  ';db=core'
-                "
-                target="_blank"
-                rel="noopener noreferrer"
-                >{{ data.start }}
-              </a>
-            </template>
-          </Column>
-          <Column field="end" exportHeader="chromEnd">
-            <template #header>
-              <span v-tooltip.top="'Open (end excluded)'">End</span>
-            </template>
-          </Column>
-          <Column field="name" header="Name" exportHeader="name">
-            <template #body="{ data }">
-              <a
-                class="text-primary-500 hover:text-secondary-500"
-                :href="'https://www.genesilico.pl/modomics/modifications/' + data.reference_id"
-                target="_blank"
-                rel="noopener noreferrer"
-                >{{ data.name }}
-              </a>
-            </template>
-          </Column>
-          <Column field="score" sortable exportHeader="score">
-            <template #header>
-              <span v-tooltip.top="'-log10(p) or 0 if undefined'">Score</span>
-            </template>
-          </Column>
-          <Column field="strand" header="Strand" exportHeader="strand"></Column>
-          <Column field="coverage" sortable exportHeader="coverage">
-            <template #header>
-              <span v-tooltip.top="'0 if not available'">Coverage</span>
-            </template>
-          </Column>
-          <Column field="frequency" sortable exportHeader="frequency">
-            <template #header>
-              <span v-tooltip.top="'Modification stoichiometry'">Frequency</span>
-            </template>
-          </Column>
-          <Column field="dataset_id" exportHeader="EUFID">
-            <template #header>
-              <span v-tooltip.top="'Dataset ID'">EUFID</span>
-            </template>
-            <template #body="{ data }">
-              <Button
-                size="small"
-                :label="data.dataset_id"
-                severity="secondary"
-                text
-                @click="navigateTo(data.dataset_id)"
-              />
-            </template>
-          </Column>
-          <Column field="tech" header="Technology" exportHeader="Technology"></Column>
-          <!-- export only -->
-          <Column field="taxa_id" exportHeader="Organism" style="display: none"></Column>
-          <Column field="cto" exportHeader="Cell/Tissue" style="display: none"></Column>
-          <!-- export only -->
-          <Column field="feature" header="Feature" exportHeader="Feature"></Column>
-          <Column field="gene_name" header="Gene" exportHeader="Gene"></Column>
-          <Column field="gene_biotype" header="Biotype" exportHeader="Biotype"></Column>
-          <Column :exportable="false" style="width: 5%">
-            <template #header>
-              <span v-tooltip.top="'Click for site information'">Info</span>
-            </template>
-            <template #body="slotProps">
-              <Button
-                icon="pi pi-info"
-                outlined
-                rounded
-                severity="secondary"
-                @click="onOverlay(slotProps.data)"
-              />
-            </template>
-          </Column>
-        </DataTable>
-        <ModificationInfo v-model:visible="showDetails" :site="selectedSite" />
-      </div>
+      <SearchResults
+        :search-parameters="searchParameters"
+        :taxa-name="taxaName"
+        :disabled="resultsDisabled"
+        :key="updateCount"
+      />
     </SectionLayout>
   </DefaultLayout>
 </template>
diff --git a/server/src/scimodom/api/helpers.py b/server/src/scimodom/api/helpers.py
index 9d9ae1d7..69ed22b2 100644
--- a/server/src/scimodom/api/helpers.py
+++ b/server/src/scimodom/api/helpers.py
@@ -234,6 +234,40 @@ def get_valid_logo(motif: str) -> Path:
         raise ClientResponseException(404, "Unknown motif")
 
 
+def get_non_negative_int(field: str) -> int:
+    raw = request.args.get(field, type=int)
+    if raw is None or raw < 0:
+        raise ClientResponseException(400, f"Bad {field}")
+    return raw
+
+
+def get_optional_non_negative_int(field: str) -> int:
+    raw = request.args.get(field, type=int)
+    if raw is None:
+        return None
+    if raw < 0:
+        raise ClientResponseException(400, f"Bad {field}")
+    return raw
+
+
+def get_optional_positive_int(field: str) -> int | None:
+    raw = request.args.get(field, type=int)
+    if raw is None:
+        return None
+    if raw <= 0:
+        raise ClientResponseException(400, f"Bad {field}")
+    return raw
+
+
+def get_option_positive_int(field: str) -> int | None:
+    raw = request.args.get(field, type=int)
+    if raw is None:
+        return None
+    if raw <= 0:
+        raise ClientResponseException(400, f"Bad {field}")
+    return raw
+
+
 # Response
 
 
diff --git a/server/src/scimodom/api/modification.py b/server/src/scimodom/api/modification.py
index 1074bd26..323058c7 100644
--- a/server/src/scimodom/api/modification.py
+++ b/server/src/scimodom/api/modification.py
@@ -1,9 +1,11 @@
+from csv import DictWriter
 from dataclasses import dataclass
 import logging
-from pathlib import Path
-from typing import Iterable, Optional, TextIO
+from datetime import datetime, timezone
+from io import StringIO
+from typing import Iterable, TextIO
 
-from flask import Blueprint, request
+from flask import Blueprint, request, Response
 from flask_cors import cross_origin
 from pydantic import BaseModel
 
@@ -15,12 +17,36 @@
     get_valid_targets_type,
     get_valid_taxa_id,
     get_response_from_pydantic_object,
+    get_non_negative_int,
+    get_optional_positive_int,
+    get_option_positive_int,
+    get_optional_non_negative_int,
 )
 from scimodom.services.bedtools import BedToolsService, get_bedtools_service
 from scimodom.utils.bedtools_dto import Bed6Record
 from scimodom.services.file import AssemblyFileType, get_file_service
 from scimodom.utils.common_dto import Strand
 
+
+FIELDS_TO_CSV_HEADER_MAP = {
+    "chrom": "chrom",
+    "start": "chromStart",
+    "end": "chromEnd",
+    "name": "name",
+    "score": "score",
+    "strand": "strand",
+    "coverage": "coverage",
+    "frequency": "frequency",
+    "dataset_id": "EUFID",
+    "tech": "Technology",
+    "taxa_id": "Organism",
+    "cto": "Cell/Tissue",
+    "feature": "Feature",
+    "gene_name": "Gene",
+    "gene_biotype": "Biotype",
+}
+
+
 logger = logging.getLogger(__name__)
 
 modification_api = Blueprint("modification_api", __name__)
@@ -32,42 +58,101 @@ class IntersectResponse(BaseModel):
 
 @modification_api.route("/", methods=["GET"])
 @cross_origin(supports_credentials=True)
-def get_modifications():
+def get_modifications_as_json():
     """Search view API."""
-    modification_id = request.args.get("modification", type=int)
-    organism_id = request.args.get("organism", type=int)
-    technology_ids = request.args.getlist("technology", type=int)
-    rna_type = request.args.get("rnaType", type=str)
-    taxa_id = request.args.get("taxaId", type=int)
-    gene_filter = request.args.getlist("geneFilter", type=str)
-    chrom = request.args.get("chrom", type=str)
-    chrom_start = request.args.get("chromStart", type=int)
-    chrom_end = request.args.get("chromEnd", type=int)
-    first_record = request.args.get("firstRecord", type=int)
-    max_records = request.args.get("maxRecords", type=int)
-    multi_sort = request.args.getlist("multiSort", type=str)
+    try:
+        result = _get_modifications_for_request()
+    except ClientResponseException as e:
+        return e.response_tupel
+    for r in result["records"]:
+        r["strand"] = r["strand"].value
+    return result
 
-    annotation_source = RNA_TYPE_TO_ANNOTATION_SOURCE_MAP[rna_type]
 
+def _get_modifications_for_request():
     modification_service = get_modification_service()
-    response = modification_service.get_modifications_by_source(
-        annotation_source,
-        modification_id,
-        organism_id,
-        technology_ids,
-        taxa_id,
-        gene_filter,
-        chrom,
-        chrom_start,
-        chrom_end,
-        first_record,
-        max_records,
-        multi_sort,
+    return modification_service.get_modifications_by_source(
+        annotation_source=_get_annotation_source(),
+        modification_id=get_non_negative_int("modification"),
+        organism_id=get_non_negative_int("organism"),
+        technology_ids=_get_technology_ids(),
+        taxa_id=get_non_negative_int("taxaId"),
+        gene_filter=_get_gene_filters(),
+        chrom=request.args.get("chrom", type=str),
+        chrom_start=get_optional_non_negative_int("chromStart"),
+        chrom_end=get_optional_positive_int("chromEnd"),
+        first_record=get_optional_non_negative_int("firstRecord"),
+        max_records=get_option_positive_int("maxRecords"),
+        multi_sort=_get_multi_sort(),
     )
-    response["records"] = [
-        {**r, "strand": r["strand"].value} for r in response["records"]
-    ]
-    return response
+
+
+def _get_annotation_source():
+    rna_type = request.args.get("rnaType", type=str)
+    if rna_type is None or rna_type not in RNA_TYPE_TO_ANNOTATION_SOURCE_MAP:
+        raise ClientResponseException(400, "Bad rnaType")
+    else:
+        return RNA_TYPE_TO_ANNOTATION_SOURCE_MAP[rna_type]
+
+
+def _get_technology_ids():
+    raw = request.args.getlist("technology", type=int)
+    if raw is None:
+        return []
+    for i in raw:
+        if i < 0:
+            raise ClientResponseException(400, "Bad technology ID")
+    return raw
+
+
+def _get_gene_filters():
+    raw = request.args.getlist("geneFilter", type=str)
+    if raw is None:
+        return []
+    return raw
+
+
+def _get_multi_sort():
+    raw = request.args.getlist("multiSort", type=str)
+    if raw is None or (len(raw) == 1 and raw[0] == ""):
+        return []
+    for i in raw:
+        field, direction = i.split("+")
+        if field not in ["chrom", "score", "start", "coverage", "frequency"]:
+            raise ClientResponseException(400, "Bad multiSort field")
+        if direction not in ["desc", "asc"]:
+            raise ClientResponseException(400, "Bad multiSort direction")
+    return raw
+
+
+@modification_api.route("/csv", methods=["GET"])
+@cross_origin(supports_credentials=True)
+def get_modifications_as_csv():
+    try:
+        data = _get_modifications_for_request()
+    except ClientResponseException as e:
+        return e.response_tupel
+    records_as_csv = _get_csv_from_modifications_records(data["records"])
+    now = datetime.now(timezone.utc)
+    file_name = now.strftime("scimodom_search_%Y%m%d_%H%M%S.csv")
+    return Response(
+        response=records_as_csv,
+        mimetype="text/csv",
+        headers={"Content-Disposition": f'attachment; filename="{file_name}"'},
+    )
+
+
+def _get_csv_from_modifications_records(records):
+    as_text = StringIO()
+    writer = DictWriter(
+        as_text, fieldnames=FIELDS_TO_CSV_HEADER_MAP.values(), dialect="excel"
+    )
+    writer.writeheader()
+    for raw in records:
+        cooked = {v: raw[k] for k, v in FIELDS_TO_CSV_HEADER_MAP.items()}
+        cooked["strand"] = cooked["strand"].value
+        writer.writerow(cooked)
+    return as_text.getvalue()
 
 
 @modification_api.route("/sitewise", methods=["GET"])
diff --git a/server/src/scimodom/services/modification.py b/server/src/scimodom/services/modification.py
index ea608f37..60574098 100644
--- a/server/src/scimodom/services/modification.py
+++ b/server/src/scimodom/services/modification.py
@@ -1,5 +1,5 @@
 from functools import cache
-from tempfile import TemporaryDirectory
+from typing import Any
 
 from sqlalchemy import select, func
 from sqlalchemy.orm import Session
@@ -39,20 +39,26 @@ def get_modifications_by_source(
         taxa_id: int,
         gene_filter: list[str],
         chrom: str | None,
-        chrom_start: int,
-        chrom_end: int,
-        first_record: int,
-        max_records: int,
+        chrom_start: int | None,
+        chrom_end: int | None,
+        first_record: int | None,
+        max_records: int | None,
         multi_sort: list[str],
-    ):
+    ) -> dict[str, Any]:
         """Get Data records for conditional selection, add
         filters and sort.
 
         Note: For Search, modification ID is unique, but
         more than one technology IDs are allowed.
 
-        :param selection_ids: Selection IDs
-        :type selection_ids: list of int
+        :param annotation_source: Source of annotation
+        :type annotation_source: AnnotationSource
+        :param modification_id: Modification ID
+        :type modification_id: int
+        :param organism_id: Organism ID
+        :type organism_id: int
+        :param technology_ids: Technology IDs
+        :type technology_ids: list[int]
         :param taxa_id: Taxa ID
         :type taxa_id: int
         :param gene_filter: Filters (gene-related)
@@ -60,17 +66,17 @@ def get_modifications_by_source(
         :param chrom: Chromosome
         :type chrom: str
         :param chrom_start: Chromosome start
-        :type chrom_start: int
+        :type chrom_start: int | None
         :param chrom_end: Chromosome end
-        :type chrom_end: int
+        :type chrom_end: int | None
         :param first_record: first record
-        :type first_record: int
+        :type first_record: int | None
         :param max_records: number of records
-        :type max_records: int
+        :type max_records: int | None
         :param multi_sort: sorting criteria
         :type multi_sort: list of str
         :returns: query results
-        :rtype: list of dict
+        :rtype: dict[str, Any]
         """
 
         # TODO: so far annotation_service is only needed to get the id from taxa_id
@@ -192,10 +198,10 @@ def _return_ensembl_query(
         technology_ids: list[int],
         gene_filter: list[str],
         chrom: str | None,
-        chrom_start: int,
-        chrom_end: int,
-        first_record: int,
-        max_records: int,
+        chrom_start: int | None,
+        chrom_end: int | None,
+        first_record: int | None,
+        max_records: int | None,
         multi_sort: list[str],
     ):
         query = (
@@ -233,11 +239,11 @@ def _return_ensembl_query(
 
         # coordinate filters
         if chrom:
-            query = (
-                query.where(Data.chrom == chrom)
-                .where(Data.start >= chrom_start)
-                .where(Data.end <= chrom_end)
-            )
+            query = query.where(Data.chrom == chrom)
+            if chrom_start:
+                query = query.where(Data.start >= chrom_start)
+            if chrom_end:
+                query.where(Data.end <= chrom_end)
 
         # gene filters: matchMode unused (cf. PrimeVue), but keep it this way
         # e.g. to extend options or add table filters
@@ -278,7 +284,10 @@ def _return_ensembl_query(
                 query = query.order_by(eval(expr))
 
         # paginate
-        query = query.offset(first_record).limit(max_records)
+        if first_record is not None:
+            query = query.offset(first_record)
+        if max_records is not None:
+            query = query.limit(max_records)
 
         query = self._add_modomics_ref_to_data_query(query)