DONE #24, #25, #26 - WIP new issues

dieterich-lab · Jan 8, 2024 · 1be559e · 1be559e
1 parent 57e50d8
commit 1be559e
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 18 deletions.
diff --git a/client/src/components/compare/CompareStepA.vue b/client/src/components/compare/CompareStepA.vue
@@ -132,7 +132,7 @@ function updateDataset() {
       v-model="selectedDataset"
       :options="datasetSelection"
       filter
-      optionLabel="dataset_title"
+      optionLabel="dataset_display"
       placeholder="5. Select dataset"
       :maxSelectedLabels="3"
       :pt="{

diff --git a/client/src/components/compare/CompareStepB.vue b/client/src/components/compare/CompareStepB.vue
@@ -192,7 +192,7 @@ function updateDataset() {
       v-model="selectedDataset"
       :options="datasetSelection"
       filter
-      optionLabel="dataset_title"
+      optionLabel="dataset_display"
       placeholder="4. Select dataset"
       :maxSelectedLabels="3"
       :disabled="disabled"

diff --git a/client/src/main.js b/client/src/main.js
@@ -43,6 +43,11 @@ const app = createApp(App)
 const tailoredTailwind = usePassThrough(
   Tailwind,
   {
+    divider: {
+      root: (props) => ({
+        class: ['before:border-t-2 before:border-crmbs-25']
+      })
+    },
     inputtext: {
       root: (context) => ({
         class: [

diff --git a/client/src/utils/selection.js b/client/src/utils/selection.js
@@ -84,6 +84,10 @@ export function updDataset(selection, organism, slctOrg, slctMod, slctTech, data
     )
   }
   return [...new Map(opts.map((item) => [item['dataset_id'], item])).values()].map((item) => {
-    return { dataset_id: item.dataset_id, dataset_title: item.dataset_title }
+    return {
+      dataset_id: item.dataset_id,
+      dataset_title: item.dataset_title,
+      dataset_display: item.dataset_title + '    [' + item.dataset_id + ']'
+    }
   })
 }
diff --git a/client/src/views/BrowseView.vue b/client/src/views/BrowseView.vue
@@ -11,12 +11,10 @@ const filters = ref()
 // todo
 const status = ref(['public', 'restricted'])
 const columns = [
-  { field: 'project_title', header: 'Project' },
+  { field: 'project_title', header: 'Title' },
   { field: 'project_summary', header: 'Summary' },
   { field: 'date_added', header: 'Added' },
-  { field: 'date_published', header: 'Published' },
-  { field: 'doi', header: 'DOI' },
-  { field: 'pmid', header: 'PMID' }
+  { field: 'date_published', header: 'Published' }
 ]
 
 const initFilters = () => {
@@ -165,10 +163,10 @@ onMounted(() => {
               </div>
             </template>
             <template #empty> No results found. </template>
-            <Column field="project_id" header="SMID" style="width: 5%"></Column>
-            <Column field="dataset_id" header="EUFID" style="width: 5%"></Column>
-            <Column field="dataset_title" header="Title" style="width: 5%"></Column>
-            <Column field="rna" header="RNA" filterField="rna" style="width: 10%">
+            <Column field="project_id" header="SMID" style="display: none"></Column>
+            <Column field="dataset_id" header="EUFID" style="display: none"></Column>
+            <Column field="dataset_title" header="Title" style="width: 25%"></Column>
+            <Column field="rna" header="RNA" filterField="rna" style="width: 5%">
               <template #body="{ data }">
                 {{ data.rna }}
               </template>
@@ -185,7 +183,7 @@ onMounted(() => {
               field="modomics_sname"
               header="Modification"
               filterField="modomics_sname"
-              style="width: 25%"
+              style="width: 10%"
             >
               <template #body="{ data }">
                 {{ data.modomics_sname }}
@@ -199,7 +197,7 @@ onMounted(() => {
                 />
               </template>
             </Column>
-            <Column field="tech" header="Technology" filterField="tech" style="width: 20%">
+            <Column field="tech" header="Technology" filterField="tech" style="width: 15%">
               <template #body="{ data }">
                 {{ data.tech }}
               </template>
@@ -295,11 +293,17 @@ onMounted(() => {
           v-model:visible="recordsOverlay"
           header="Additional information"
           :modal="true"
-          class="p-fluid"
+          :pt="{
+            root: { class: 'w-fit' }
+          }"
         >
           <div>
-            <h2>{{ thisRecord.dataset_id }}</h2>
-            <p>{{ thisRecord.sequencing_platform }}</p>
+            <div class="flex space-x-12 mb-6">
+              <span class="inline-block font-semibold pr-2">SMID:</span>
+              {{ thisRecord.project_id }}
+              <span class="inline-block font-semibold pr-2">EUFID:</span>
+              {{ thisRecord.dataset_id }}
+            </div>
             <DataTable
               :value="records.filter((val) => val.dataset_id == thisRecord.dataset_id)"
               tableStyle="min-width: 50rem"
@@ -310,6 +314,23 @@ onMounted(() => {
                 :field="col.field"
                 :header="col.header"
               ></Column>
+              <Column field="doi" header="DOI">
+                <template #body="{ data }">
+                  <a class="text-crmb" target="_blank" :href="`https://doi.org/${data.doi}`">{{
+                    data.doi
+                  }}</a>
+                </template>
+              </Column>
+              <Column field="pmid" header="PMID">
+                <template #body="{ data }">
+                  <a
+                    class="text-crmb"
+                    target="_blank"
+                    :href="`http://www.ncbi.nlm.nih.gov/pubmed/${data.pmid}`"
+                    >{{ data.pmid }}</a
+                  >
+                </template>
+              </Column>
             </DataTable>
           </div>
         </Dialog>

diff --git a/server/src/scimodom/api/queries.py b/server/src/scimodom/api/queries.py
@@ -260,8 +260,8 @@ def get_dataset():
             Project.summary.label("project_summary"),
             Project.date_published,
             Project.date_added,
-            func.group_concat(ProjectSource.doi.distinct()),
-            func.group_concat(ProjectSource.pmid.distinct()),
+            func.group_concat(ProjectSource.doi.distinct()).label("doi"),
+            func.group_concat(ProjectSource.pmid.distinct()).label("pmid"),
             Modification.rna,
             func.group_concat(Modomics.short_name.distinct()).label("modomics_sname"),
             DetectionTechnology.tech,