improve search result page

components/search/ResultsList.vue

@@ -36,7 +36,8 @@
                 ></h4>
               </NuxtLink>
             </v-card-title>
-            <v-row style="flex: 1">
+<!--            Card body display if SVG structure exists -->
+            <v-row style="flex: 1" v-if="result._source.default_structure">
               <v-col
                 cols="4"
                 style="
@@ -90,6 +91,58 @@
                 </v-card-text>
               </v-col>
             </v-row>
+
+<!--            Card body display if structure does not exist (show definition instead)-->
+            <v-row style="flex: 1" v-else>
+              <v-col
+                cols="12"
+                style="
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  padding-right: 0px;
+                "
+              >
+                <v-card-text>
+                  <div
+                    class="text-overflow-adjust"
+                  >
+                    <b>CHEBI:{{ result._id }} </b><br />
+                  </div>
+                  <div class="text-overflow-adjust">
+                    <b>Stars:</b>
+                    <SharedDisplayStars
+                      :stars="result._source.stars"
+                      :show-tooltip="false"
+                    />
+                  </div>
+                  <div>
+                    <div
+                      class="text-overflow-adjust"
+                      v-if="result._source.formula"
+                    >
+                      <b>Formula: </b>{{ result._source.formula }}<br />
+                    </div>
+                    <div
+                      class="text-overflow-adjust"
+                      v-if="result._source.mass"
+                    >
+                      <b>Mass: </b>{{ result._source.mass }}<br />
+                    </div>
+                    <div
+                      class="text-overflow-adjust"
+                      v-if="result._source.charge"
+                    >
+                      <b>Charge: </b>{{ result._source.charge }}<br />
+                    </div>
+
+                  </div>
+                  <div class="" v-if="result._source.definition">
+                    <b>Definition: </b>{{ result._source.definition }}
+                  </div>
+                </v-card-text>
+              </v-col>
+            </v-row>
           </v-card>
         </v-hover>
       </v-col>
@@ -113,6 +166,7 @@ defineProps<{
         stars: number;
         monoisotopicmass: number;
         ascii_name: string;
+        definition: string;
       };
     }[];
   };

model/searchResults.ts

@@ -12,6 +12,7 @@ interface SearchResult {
       stars: number;
       monoisotopicmass: number;
       ascii_name: string;
+      definition: string;
     };
   }[];
 }