From 91e077b6ca55a4bf90ef28b6b64364ed229689a8 Mon Sep 17 00:00:00 2001
From: Muhammad Arsalan <muhammad@ebi.ac.uk>
Date: Thu, 5 Oct 2023 15:30:38 +0100
Subject: [PATCH] :lipstick: Minor bugfixes and UI improvements
---
assets/styles/main.css | 3 +
assets/styles/main.scss | 8 ---
components/detailPage/ChemicalData.vue | 6 +-
components/detailPage/Intro.vue | 4 +-
components/detailPage/MetaboliteOfSpecies.vue | 4 +-
components/detailPage/OntologyRelations.vue | 2 +-
components/search/ResultsList.vue | 55 +++++++++++++------
model/searchResults.ts | 18 +++---
nuxt.config.ts | 2 +-
pages/search/index.vue | 6 +-
10 files changed, 63 insertions(+), 45 deletions(-)
create mode 100644 assets/styles/main.css
delete mode 100644 assets/styles/main.scss
diff --git a/assets/styles/main.css b/assets/styles/main.css
new file mode 100644
index 0000000..5fd2a0a
--- /dev/null
+++ b/assets/styles/main.css
@@ -0,0 +1,3 @@
+.v-container{
+ max-width: 90% !important;
+}
\ No newline at end of file
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
deleted file mode 100644
index 07bb417..0000000
--- a/assets/styles/main.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.page-enter-active, .page-leave-active {
- transition-property: opacity;
- transition-timing-function: ease-in-out;
- transition-duration: 200ms;
-}
-.page-enter, .page-leave-to {
- opacity: 0;
-}
\ No newline at end of file
diff --git a/components/detailPage/ChemicalData.vue b/components/detailPage/ChemicalData.vue
index 5a661c1..0eaea44 100644
--- a/components/detailPage/ChemicalData.vue
+++ b/components/detailPage/ChemicalData.vue
@@ -27,9 +27,9 @@
</tr>
<tr v-if="entity.chemical_data.monoisotopic_mass">
<td v-if="entity.chemical_data.is_r_group">
- Monoisotropic Mass (excl. R groups)
+ Monoisotopic Mass (excl. R groups)
</td>
- <td v-else>Monoisotropic Mass</td>
+ <td v-else>Monoisotopic Mass</td>
<td>{{ entity.chemical_data.monoisotopic_mass }}</td>
</tr>
<template v-if="entity.default_structure">
@@ -42,7 +42,7 @@
<td>{{ entity.default_structure.standard_inchi }}</td>
</tr>
<tr v-if="entity.default_structure.standard_inchi_key">
- <td>InCHI Key</td>
+ <td>InCHIKey</td>
<td>{{ entity.default_structure.standard_inchi_key }}</td>
</tr>
</template>
diff --git a/components/detailPage/Intro.vue b/components/detailPage/Intro.vue
index 347412a..337a3ff 100644
--- a/components/detailPage/Intro.vue
+++ b/components/detailPage/Intro.vue
@@ -24,7 +24,7 @@
<br />
<v-row>
- <v-col>
+ <v-col sm="12" md="10">
<h2 class="vf-text vf-text-heading--2">
{{ entity.chebi_accession }} - <span v-html="entity.name"></span>
</h2>
@@ -35,7 +35,7 @@
<vue-image-zoomer :regular="`${mediaBaseURL}${entity.svg}`" />
</client-only>
</div>
- <div style="font-size: small">
+ <div style="font-size: small; margin: auto; text-align: center">
<a class="vf-link" href=""
>Find compounds which contain this structure</a
><br />
diff --git a/components/detailPage/MetaboliteOfSpecies.vue b/components/detailPage/MetaboliteOfSpecies.vue
index c4f5656..33ef364 100644
--- a/components/detailPage/MetaboliteOfSpecies.vue
+++ b/components/detailPage/MetaboliteOfSpecies.vue
@@ -33,7 +33,7 @@
<template v-if="origins.length > 1">
<tr>
<td :rowspan="origins.length + 1">
- {{ species_text || "-" }}
+ <i>{{ species_text || "-" }}</i>
<span v-if="species_text">
(<a
class="vf-link"
@@ -48,7 +48,7 @@
<template v-else>
<tr>
<td :rowspan="origins.length">
- {{ species_text || "-" }}
+ <i>{{ species_text || "-" }}</i>
<span v-if="species_text">
(<a
class="vf-link"
diff --git a/components/detailPage/OntologyRelations.vue b/components/detailPage/OntologyRelations.vue
index 8e1d190..15930e0 100644
--- a/components/detailPage/OntologyRelations.vue
+++ b/components/detailPage/OntologyRelations.vue
@@ -7,7 +7,7 @@
"
>
<div class="vf-section-header">
- <h2 class="vf-section-header__heading">Ontology</h2>
+ <h2 class="vf-section-header__heading">ChEBI Ontology</h2>
</div>
<br />
<p class="vf-text-body vf-text-body--3">
diff --git a/components/search/ResultsList.vue b/components/search/ResultsList.vue
index 42e02bd..7669285 100644
--- a/components/search/ResultsList.vue
+++ b/components/search/ResultsList.vue
@@ -15,6 +15,27 @@
:elevation="isHovering ? 24 : 6"
style="height: 100%; display: flex; flex-direction: column"
>
+ <v-card-title v-if="result._source.name.length > 65">
+ <NuxtLink :href="'/CHEBI:' + result._id" class="vf-link">
+ <v-tooltip :text="result._source.ascii_name">
+ <template v-slot:activator="{ props }">
+ <h4
+ class="headline text-overflow-adjust"
+ v-html="result._source.name"
+ v-bind="props"
+ ></h4>
+ </template>
+ </v-tooltip>
+ </NuxtLink>
+ </v-card-title>
+ <v-card-title v-else>
+ <NuxtLink :href="'/CHEBI:' + result._id" class="vf-link">
+ <h4
+ class="headline text-overflow-adjust"
+ v-html="result._source.name"
+ ></h4>
+ </NuxtLink>
+ </v-card-title>
<v-row style="flex: 1">
<v-col
cols="4"
@@ -32,16 +53,12 @@
></v-img>
</v-col>
<v-col cols="8">
- <v-card-title>
- <NuxtLink :href="'/CHEBI:' + result._id" class="vf-link">
- <h4
- class="headline text-overflow-adjust"
- v-html="result._source.name"
- ></h4>
- </NuxtLink>
- </v-card-title>
- <v-card-subtitle>CHEBI:{{ result._id }}</v-card-subtitle>
<v-card-text>
+ <div
+ class="text-overflow-adjust"
+ >
+ <b>CHEBI:{{ result._id }} </b><br />
+ </div>
<div class="text-overflow-adjust">
<b>Stars:</b>
<SharedDisplayStars
@@ -52,22 +69,23 @@
<div>
<div
class="text-overflow-adjust"
- v-if="result._source.mass"
+ v-if="result._source.formula"
>
- <b>Mass: </b>{{ result._source.mass }}<br />
+ <b>Formula: </b>{{ result._source.formula }}<br />
</div>
<div
class="text-overflow-adjust"
- v-if="result._source.charge"
+ v-if="result._source.mass"
>
- <b>Charge: </b>{{ result._source.charge }}<br />
+ <b>Mass: </b>{{ result._source.mass }}<br />
</div>
<div
class="text-overflow-adjust"
- v-if="result._source.formula"
+ v-if="result._source.charge"
>
- <b>Formula: </b>{{ result._source.formula }}<br />
+ <b>Charge: </b>{{ result._source.charge }}<br />
</div>
+
</div>
</v-card-text>
</v-col>
@@ -94,6 +112,7 @@ defineProps<{
default_structure: string;
stars: number;
monoisotopicmass: number;
+ ascii_name: string;
};
}[];
};
@@ -102,8 +121,10 @@ defineProps<{
<style>
.text-overflow-adjust {
- white-space: nowrap;
overflow: hidden;
- text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ white-space: normal;
}
</style>
diff --git a/model/searchResults.ts b/model/searchResults.ts
index 82c1f35..7104336 100644
--- a/model/searchResults.ts
+++ b/model/searchResults.ts
@@ -1,15 +1,17 @@
interface SearchResult {
results: {
- id: number;
- chebi_accession: string;
- name: string;
- stars: number;
- chemical_data: {
- formula: string;
+ _id: number;
+ _score: number;
+ _source: {
charge: number;
+ chebi_accession: string;
mass: number;
- monoisotopic_mass: number;
+ name: string;
+ formula: string;
+ default_structure: string;
+ stars: number;
+ monoisotopicmass: number;
+ ascii_name: string;
};
- svg: string;
}[];
}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0e81552..2d25639 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,7 +21,7 @@ export default defineNuxtConfig({
css: [
"vuetify/styles",
"@mdi/font/css/materialdesignicons.min.css",
- "@/assets/styles/main.scss",
+ "@/assets/styles/main.css",
],
build: {
transpile: ["vuetify"],
diff --git a/pages/search/index.vue b/pages/search/index.vue
index c745bd0..8103cf4 100644
--- a/pages/search/index.vue
+++ b/pages/search/index.vue
@@ -1,8 +1,8 @@
<template>
<v-container>
- <v-alert class="pa-2 px-6">
- Search Results for "{{ searchQuery }}"
- </v-alert>
+<!-- <v-alert class="pa-2 px-6">-->
+<!-- Search Results for "{{ searchQuery }}"-->
+<!-- </v-alert>-->
<SearchResultsList :results="results" />
--
GitLab