Add PDBe Molstar component

components/report_cards/chemical_probe/CrystalStructures.vue

 <template>
   <v-card class="yellow lighten-4">
     <v-card-text>
-      <v-img
-        src="https://ars.els-cdn.com/content/image/1-s2.0-S0076687916300532-f12-03-9780128053478.jpg"
-      ></v-img>
+      <v-card-title> PDBe ligand code: {{ ligandCode }} </v-card-title>
+      <v-row>
+        <v-col v-for="pdbeMol in pdbeMolecules" :key="pdbeMol" cols="12" lg="6">
+          <v-card outlined tile>
+            <v-card-title> {{ pdbeMol }} </v-card-title>
+            <v-card-text>
+              <Molstar :pbde-molecule-i-d="pdbeMol" />
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
     </v-card-text>
+    <v-card-actions>
+      <a target="_blank" :href="pdbeEntriesList">
+        <v-btn depressed color="primary">
+          See all PDBe entries for {{ ligandCode }}
+          <v-icon> mdi-open-in-new </v-icon>
+        </v-btn>
+      </a>
+    </v-card-actions>
   </v-card>
 </template>
 
 <script>
-export default {}
+import Molstar from '~/web-components-submodule/components/externalTools/PDBe/Molstar.vue'
+export default {
+  components: {
+    Molstar,
+  },
+  data() {
+    return {
+      pdbeMolecules: ['1tbf', '1udt', '2h42'],
+      ligandCode: 'VIA',
+      pdbeEntriesList:
+        'https://www.ebi.ac.uk/pdbe-srv/pdbechem/PDBEntry/list/VIA',
+    }
+  },
+}
 </script>
 
 <style></style>

pages/index.vue

@@ -7,7 +7,7 @@
         </div>
       </div>
     </v-col>
-    <v-col cols="12" md="6">
+    <v-col cols="12" md="6" xl="4">
       <p class="text-justify">
         The EUbOPEN consortium is an Innovative Medicines Initiative (IMI)
         funded project to enable and unlock biology in the open.

web-components-submodule @ 43d94192

-Subproject commit ca03bf0faa8d9ab9dfd108f04d677176cd2cc0a3
+Subproject commit 43d94192fcbf788246d70e5c27f6d194e79f5a2a