UPD pre-release

Author: eboileau

Diff for: CHANGELOG.md

@@ -5,6 +5,23 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/), and this
 
 ## [Release candidate] - started 2024-09-25
 
+### Added
+
+- bedRMod validation in Comparison (#92)
+- TypeScript
+
+### Changed
+
+- utils
+- Error handling
+- Documentation
+
+### Fixed
+
+- Gene cache management
+- EUF toggle in Comparison
+- SMID/EUFID length validation
+
 ## [3.0.0] 2024-09-25
 
 ### Added

Diff for: README.md

@@ -33,7 +33,7 @@ For bugs, issues, or feature requests, use the [bug tracker](https://github.com/
 
 ## How to cite
 
-Etienne Boileau, Haradl Wilhelmi, Anne Busch, Andrea Cappannini, Andreas Hildebrand, Janusz M. Bujnicki, Christoph Dieterich. [Sci-ModoM: a quantitative database of transcriptome-wide high-throughput RNA modification sites](none), _Nucleic Acids Research_, ...
+Etienne Boileau, Harald Wilhelmi, Anne Busch, Andrea Cappannini, Andreas Hildebrand, Janusz M. Bujnicki, Christoph Dieterich. [Sci-ModoM: a quantitative database of transcriptome-wide high-throughput RNA modification sites](https://academic.oup.com/nar/advance-article/doi/10.1093/nar/gkae972/7875981), _Nucleic Acids Research_, 2024;, gkae972, [https://doi.org/10.1093/nar/gkae972](https://doi.org/10.1093/nar/gkae972).
 
 ## License
 

Diff for: TODO.org

@@ -9,23 +9,33 @@ Draft or long-running issues, WIP, triage, and additional references or context
 
 - [ ] ~pre-commit run --all-files~ under server (.pre-commit-config.yaml) runs for all files incl. client.
 
-** TODO STYLE [2/22]
+** TODO STYLE [11/23]
 
 - [ ] DEADLINE: <2024-09-30 Mon> To harmonize style across views, components, and presets (colours, behaviour, dark mode, /etc./).
 
-- [ ] CascadeSelect /cf./ [[https://github.com/dieterich-lab/scimodom/issues/103][Cascade truncated.]]
-- [ ] CascadeSelect "No available options" is not defined, /cf./ TreeSelect or Dropdown. Styling is different.
-- [ ] In ~ProjectMetadata,vue~, some placeholders are grey, others are black/darker (resp. lighter in dark mode).
-- [ ] Dark mode (specific issues)
+- [X] CascadeSelect /cf./ [[https://github.com/dieterich-lab/scimodom/issues/103][Cascade truncated.]]
+- [X] CascadeSelect "No available options" is not defined, /cf./ TreeSelect or Dropdown. Styling is different.
+- [X] In ~ProjectMetadata,vue~, some placeholders are grey, others are black/darker (resp. lighter in dark mode).
+- [-] Dark mode (specific issues)
   - [ ] Logos are displayed in greyscale in dark mode, as invert also inverts the colors. Otherwise, we may have to use 2 logos,
     or create SVGs.
-  - [ ] ~DataTable~: ~stripedRows~ for dark mode.
+  - [X] ~DataTable~: ~stripedRows~ for dark mode.
 - [ ] ~VirtualScroll~ not working, see [[https://github.com/primefaces/primevue-tailwind/issues/108][Missing preset for VirtualScroller]] and [[https://github.com/primefaces/primevue-tailwind/issues/168][VirtualScroller not working with DataTabe.]]
-- [ ] Placeholder text color ~TreeSelect~ /vs./ ~MultiSelect~.
-- [ ] Default preset color is secondary for ~DataTable~, ~Paginator~, and ~tabView~. Why not use a local ~ptOptions~
+     As of v4.1.1, the new Tailwind styles have been rewritten using the preprocessor approach with ~@apply~ instead of pass-through.
+     As a result this issue is not relevant any more. We're using [email protected]~. Updating to latest version will most likely
+     break. See also https://tailwind.primevue.org/vite/.
+- [ ] Unpredictable color for ring (dark mode). This is an example of a more general problem.
+  UiStyle ~inputTextDefaultClasses~ redefines the ring color /e.g./ inside ~InputText~ in ~FormTextInput.vue~, but when
+  ~parent.instance.$name !== 'InputGroup'~ the default preset values somehow overwrite the style, even though the latter is
+  applied afterwards. When need to use ~:ptOptions="{ mergeProps: true }"~, because we don't want to rewrite the style entirely.
+  Modifying a value in ~ui_style.ts~ works only temporarily or unpredictably, and /e.g./ adding ~!~ does not work, as
+  it overwrites the ~errorClasses~. See [[https://github.com/tailwindlabs/tailwindcss/discussions/12733][Which bg color should be apply, when multiply bg-color class was appled to the same element?]]
+  for an explanation and possible ways to solve this.
+- [X] Placeholder text color ~TreeSelect~ /vs./ ~MultiSelect~.
+- [X] Default preset color is secondary for ~DataTable~, ~Paginator~, and ~tabView~. Why not use a local ~ptOptions~
   with ~mergeSections="false"~? Else this has to be documented.
 - [ ] Use fill and stroke for svg/icons, instead of text color, see also [[https://github.com/dieterich-lab/scimodom/issues/64][Add icon to InputText not working]].
-- [ ] Button presets adapted for /primary/ and /secondary/ by redefining the API for severity. Should we redefine the API
+- [X] Button presets adapted for /primary/ and /secondary/ by redefining the API for severity. Should we redefine the API
   or add another option, or just leave it as is?
 - [ ] ~DataTable~ filters /e.g./ ~filterMatchModeDropdown~ show a mix of primary and default green colors (where is this
   defined in presets? Can we use ~pt~?)
@@ -35,13 +45,13 @@ Draft or long-running issues, WIP, triage, and additional references or context
   - [ ] Why ~SectionLayout~ with ~secondary="true"~ in dark mode have a white border at the top?
 - [ ] ~TreeSelect~, ~MultiSelect~, and ~Dropdown~ root class shape commented out, using local ~pt~, as I couldn't get it to work,
   in particular in grid (Compare), but we should leave this untouched.
-- [ ] (Browse) ~InputText~ and ~Dialog~ local ~pt~ has no effect with alpha modifier for secondary color using **Wind** preset.
+- [X] (Browse) ~InputText~ and ~Dialog~ local ~pt~ has no effect with alpha modifier for secondary color using **Wind** preset.
   Temporarily removed ~/50~ for ~dialog~ and ~inputtext~ (focus). Local ~pt~ description currently follows the **Lara** preset.
-- [ ] To harmonize ~DataTable~ header across views.
+- [X] To harmonize ~DataTable~ header across views.
 - [ ] Add p-float-label?
 - [ ] ~Divider~ styling, thickness and color.
 - [X] Custom style ~FormTextInput~ (class/style binding), incl.secondary colour for sign up.
-- [ ] Form validation and warnings/messages styling/text for login/sign up/reset components.
+- [X] Form validation and warnings/messages styling/text for login/sign up/reset components.
 - [ ] Large numbers don't show nicely in the Search paginator.
 - [X] Outdated presets for Lara. Remove?
 - [ ] Add MeterGroup or ProgessBar for upload? See also [[https://github.com/dieterich-lab/scimodom/issues/94][Dataset upload progress]].

Diff for: client/index.html

@@ -5,7 +5,7 @@
     <!-- <link rel="preload" as="font" href="src/assets/fonts/ham.woff" type="font/woff" crossorigin="anonymous"> -->
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SCI-MODOM</title>
+    <title>Sci-ModoM</title>
   </head>
   <body>
     <div id="app"></div>

Diff for: client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.0.0",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "dev": "vite",

Diff for: client/package.json

@@ -98,6 +98,7 @@ onMounted(async () => {
             :exportFilename="getFileName()"
             :paginator="true"
             :rows="5"
+            stripedRows
             v-model:filters="filters"
             filterDisplay="menu"
             :globalFilterFields="[

Diff for: client/src/components/browse/BrowseView.vue

@@ -9,7 +9,7 @@ import { type ResultStepA } from '@/utils/comparison'
 const model = defineModel<ResultStepA>()
 
 const emit = defineEmits<{
-  (e: 'change', datasets: ResultStepA): void
+  (e: 'change', result: ResultStepA): void
 }>()
 
 const selectedTaxa = ref<Taxa>()
@@ -26,8 +26,10 @@ const changeTaxa = (value: Taxa) => {
 
 function changeDataset(datasets: Dataset[]) {
   const datasetIds = datasets.map((x) => x.dataset_id)
+  const [taxaId] = datasets.map((x) => x.taxa_id)
   const result: ResultStepA = {
-    datasets,
+    taxaId: taxaId,
+    datasets: datasets,
     remainingDatasets: availableDatasets.value.filter((x) => !datasetIds.includes(x.dataset_id))
   }
   model.value = result

Diff for: client/src/components/compare/CompareStepA.vue

@@ -51,6 +51,19 @@ function uploader(event: FileUploadUploaderEvent) {
     })
 }
 
+function update() {
+  if (model.value !== undefined) {
+    if ('isEUF' in model.value) {
+      const result: ResultStepB = {
+        ...model.value,
+        isEUF: isEUF.value
+      }
+      model.value = result
+      emit('change', result)
+    }
+  }
+}
+
 function reset() {
   disableDatasetSelection.value = false
   uploadedFileName.value = ''
@@ -66,22 +79,20 @@ function changeDatasets(datasets: Dataset[]) {
   model.value = result
   emit('change', result)
 }
+
 watch(
   () => props.resultStepA,
   () => {
-    if (model.value) {
+    if (model.value !== undefined) {
       reset()
     }
   }
 )
 </script>
+
 <template>
   <div v-if="doneWithStepA">
-    <div class="mb-4">
-      At least one reference dataset must be selected. Upload your own data or select up to three
-      dataset for comparison. For upload, pay attention to the organism and/or the assembly of your
-      data to avoid spurious comparison results.
-    </div>
+    <div class="mb-4">Select up to three dataset for comparison or upload your own data.</div>
     <div class="grid grid-cols-3 gap-6">
       <InputText
         v-model="uploadedFileName"
@@ -102,7 +113,13 @@ watch(
           class="w-[8rem]"
         >
         </FileUpload>
-        <ToggleButton v-model="isEUF" onLabel="bedRMod" offLabel="BED6" class="w-[8rem] ml-4" />
+        <ToggleButton
+          v-model="isEUF"
+          onLabel="bedRMod"
+          offLabel="BED6"
+          @change="update"
+          class="w-[8rem] ml-4"
+        />
         <Button
           label="Clear selection"
           @click="reset"
@@ -123,6 +140,6 @@ watch(
     </div>
   </div>
   <div v-else>
-    <div class="mb-4">Please select at least one reference dataset first.</div>
+    <div class="mb-4">Select reference dataset in step 1 to continue.</div>
   </div>
 </template>

Diff for: client/src/components/compare/CompareStepB.vue

@@ -44,15 +44,15 @@ function submit() {
 </script>
 
 <template>
-  <div v-if="!doneWithStepA">Please select at least one reference dataset first.</div>
-  <div v-else-if="!doneWithStepB">Please select a dataset to compare to.</div>
+  <div v-if="!doneWithStepA">Select reference dataset in step 1 to continue.</div>
+  <div v-else-if="!doneWithStepB">Select dataset in step 2 to continue.</div>
   <div v-else>
     <div class="flex flex-col gap-4">
       <div class="flex flex-row">
         <div class="w-1/2" v-for="strandAware in [true, false]" :key="String(strandAware)">
           <OperationButton
             v-model="model"
-            :value="{ operation: ComparisonOperation.intersect, strandAware }"
+            :value="{ operation: ComparisonOperation.intersect, strandAware: strandAware }"
           >
             overlaps between <span class="font-semibold">1</span> and
             <span class="font-semibold">2</span>
@@ -64,7 +64,7 @@ function submit() {
         <div class="w-1/2" v-for="strandAware in [true, false]" :key="String(strandAware)">
           <OperationButton
             v-model="model"
-            :value="{ operation: ComparisonOperation.closest, strandAware }"
+            :value="{ operation: ComparisonOperation.closest, strandAware: strandAware }"
           >
             closest non-overlaps in <span class="font-semibold">2</span> (wrt.
             <span class="font-semibold">1</span>)

Diff for: client/src/components/compare/CompareStepC.vue

@@ -33,12 +33,16 @@ import img4 from '@/assets/images/docs/compare4.png'
       <img :src="img2" class="object-center mt-6 mb-6" alt="Compare: filter 2" />
       You can also use your own data (bedRMod or BED format), click on "Select a file". The format
       is automatically recognized, but can also be forced by using the toggle button. You data is
-      securely handled and is automatically deleted. BED files with more than 6 columns are cut down
-      to BED6.
+      securely handled and is automatically deleted.
+      <Message severity="info" :closable="false"
+        >bedRmod is fully supported. The format specifications are enforced. Records from a
+        different assembly are automatically lifted over for comparison.</Message
+      >
       <Message severity="warn" :closable="false"
-        >Data coming from a different assembly or an inconsistent choice of reference dataset will
-        lead to spurious comparison results. Liftover is not yet available for data
-        comparison!</Message
+        >BED files with more than 6 columns are cut down to BED6. Header lines starting with # are
+        ignored. There is no organism and/or assembly validation. Data coming from a different
+        assembly or an inconsistent choice of reference dataset will lead to spurious comparison
+        results.</Message
       >
       Finally, select the operation you want to perform on the datasets selected in previous steps:
       <img :src="img3" class="object-center mt-6 mb-6" alt="Compare: filter 3" />

Diff for: client/src/components/documentation/DocCompare.vue

@@ -22,5 +22,30 @@ import SectionLayout from '@/components/layout/SectionLayout.vue'
         <Button icon="pi pi-arrow-right" label="Learn more" rounded />
       </a>
     </div>
+    <div class="flex justify-center mt-4 py-4">
+      <h1 class="font-ham text-xl font-semibold m-auto p-4 dark:text-white/80">
+        <span>How to cite</span>
+      </h1>
+    </div>
+    <div class="flex flex-col item-stretch text-700 line-height-3 -mt-4 dark:text-white/80">
+      <div class="self-center">
+        Etienne Boileau, Harald Wilhelmi, Anne Busch, Andrea Cappannini, Andreas Hildebrand, Janusz
+        M. Bujnicki, Christoph Dieterich.
+      </div>
+      <div class="self-center">
+        <a
+          class="text-primary-500 hover:text-secondary-500"
+          href="https://doi.org/10.1093/nar/gkae972"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Sci-ModoM: a quantitative database of transcriptome-wide high-throughput RNA modification
+          sites
+        </a>
+      </div>
+      <div class="self-center">
+        <span class="italic">Nucleic Acids Research</span>, 2024, gkae972.
+      </div>
+    </div>
   </SectionLayout>
 </template>

Diff for: client/src/components/home/HomeIntro.vue

@@ -7,7 +7,6 @@ import { useAccessToken } from '@/stores/AccessToken.js'
 import { useRouter } from 'vue-router'
 import ScimodomLogo from './ScimodomLogo.vue'
 import NavigationBar from './NavigationBar.vue'
-import { getApiBaseUrl } from '@/services/API'
 
 const router = useRouter()
 
@@ -16,7 +15,7 @@ const accessToken = useAccessToken()
 
 const isLoggedIn = computed(() => accessToken.token !== null)
 const userName = computed(getUserName)
-const isDev = computed(() => getApiBaseUrl() !== 'https://scimodom.dieterichlab.org/api/v0/')
+const isDev = computed(() => import.meta.env.DEV === true)
 
 const menu = ref()
 const items = ref([

Diff for: client/src/components/layout/HeaderLayout.vue

@@ -1,29 +1,26 @@
 import { createApp } from 'vue'
 import App from '@/App.vue'
 
-// global styles
-import '@/assets/style/index.css'
-// presets
+// PrimeVue
 import PrimeVue from 'primevue/config'
-import WindScm from '@/presets/windscm'
-import { VueCookieNext } from 'vue-cookie-next'
-import { createPinia } from 'pinia'
-// UI components
-import 'primeicons/primeicons.css'
 import ConfirmationService from 'primevue/confirmationservice'
 import DialogService from 'primevue/dialogservice'
 import Tooltip from 'primevue/tooltip'
-// layout components
-
 import ToastService from 'primevue/toastservice'
 
+// global styles
+import '@/assets/style/index.css'
+import 'primeicons/primeicons.css'
+// presets
+import WindScm from '@/presets/windscm'
+
+import { VueCookieNext } from 'vue-cookie-next'
+import { createPinia } from 'pinia'
 import router from '@/router'
 
 const app = createApp(App)
 
-// app.use(PrimeVue, { unstyled: true, pt: LaraScm, ripple: true })
 app.use(PrimeVue, { unstyled: true, pt: WindScm, ripple: true })
-
 app.use(ToastService)
 app.use(ConfirmationService)
 app.use(DialogService)

Diff for: client/src/main.ts

@@ -123,14 +123,6 @@ const router = createRouter({
       name: 'PageNotFound',
       component: PageNotFound
     }
-    // {
-    //   path: '/about',
-    //   name: 'about',
-    //   // route level code-splitting
-    //   // this generates a separate chunk (About.[hash].js) for this route
-    //   // which is lazy-loaded when the route is visited.
-    //   component: () => import('../views/AboutView.vue'),
-    // },
   ],
   linkActiveClass: 'text-primary-500',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

Diff for: client/src/router/index.ts

@@ -2,8 +2,7 @@ import axios, { type AxiosResponse, type InternalAxiosRequestConfig } from 'axio
 import { type AccessTokenStore, useAccessToken } from '@/stores/AccessToken.js'
 import { DIALOG, type DialogStateStore, useDialogState } from '@/stores/DialogState.js'
 
-// TODO: refactor HTTP as HTTPPublic either export service, or
-// rename exported functions
+const API_PREFIX = '/api/v0/'
 
 interface ErrorResponse {
   message: string
@@ -29,9 +28,9 @@ function isErrorResponse(x: unknown): x is ErrorResponse {
 
 function getApiBaseUrl(): string {
   if (import.meta.env.PROD) {
-    return '/api/v0/'
+    return API_PREFIX
   } else {
-    return import.meta.env?.VITE_API_BASE_URL ? import.meta.env.VITE_API_BASE_URL : '/api/v0/'
+    return import.meta.env?.VITE_API_BASE_URL ? import.meta.env.VITE_API_BASE_URL : API_PREFIX
   }
 }