Minor bugfixes and UI improvements

assets/styles/main.css

+.v-container{
+  max-width: 90% !important;
+}
\ No newline at end of file

assets/styles/main.scss

-.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

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>

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 />

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"

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">

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>

model/searchResults.ts

 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;
   }[];
 }

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"],

pages/search/index.vue

 <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" />