diff --git a/components/report_cards/chemical_probe/CalculatedProperties.vue b/components/report_cards/chemical_probe/CalculatedProperties.vue index 6420b1153eee5ba5cb6ee018e9494ad84d412233..9a80468dc55a75075e6a82d58802951d09181d15 100644 --- a/components/report_cards/chemical_probe/CalculatedProperties.vue +++ b/components/report_cards/chemical_probe/CalculatedProperties.vue @@ -1,9 +1,141 @@ <template> - <div>Calculated properties!</div> + <v-card> + <v-card-text> + <v-row> + <v-col cols="12" md="6"> + <v-list dense> + <template v-for="item in properties1"> + <v-list-item :key="item.propLabel"> + <v-list-item-content> + <v-list-item-title> + <div class="d-flex justify-space-between"> + <div> + <b>{{ item.propLabel }}:</b> + </div> + <div> + {{ item.propValue }} + </div> + </div> + </v-list-item-title> + </v-list-item-content> + </v-list-item> + <v-divider :key="`${item.propLabel}-divider`" /> + </template> + </v-list> + </v-col> + <v-col cols="12" md="6"> + <v-list dense> + <template v-for="item in properties2"> + <v-list-item :key="item.propLabel"> + <v-list-item-content> + <v-list-item-title> + <div class="d-flex justify-space-between"> + <div> + <b>{{ item.propLabel }}:</b> + </div> + <div> + {{ item.propValue }} + </div> + </div> + </v-list-item-title> + </v-list-item-content> + </v-list-item> + <v-divider :key="`${item.propLabel}-divider`" /> + </template> + </v-list> + </v-col> + </v-row> + </v-card-text> + </v-card> </template> <script> -export default {} +export default { + data() { + return { + properties1: [ + { + propLabel: 'Mol. Weight', + propValue: '494.3', + }, + { + propLabel: 'MW. Monoisotopic', + propValue: '180.0423', + }, + { + propLabel: 'ALogP', + propValue: '1.31', + }, + { + propLabel: '#Rotatable Bonds', + propValue: '2', + }, + { + propLabel: 'Polar Surface Area', + propValue: '63.60', + }, + { + propLabel: 'Molecular Species', + propValue: 'ACID', + }, + { + propLabel: 'HBA', + propValue: '3', + }, + { + propLabel: 'HDB', + propValue: '1', + }, + { + propLabel: '#Ro5 Violations', + propValue: '0', + }, + { + propLabel: 'HBA (Lipinski)', + propValue: '4', + }, + ], + properties2: [ + { + propLabel: 'HBD (Lipinski)', + propValue: '1', + }, + { + propLabel: '#Ro5 Violations (Lipinski)', + propValue: '0', + }, + { + propLabel: 'CX Acidic pKa', + propValue: '3.41', + }, + { + propLabel: 'CX Basic pKa', + propValue: '--', + }, + { + propLabel: 'CX LogP', + propValue: '1.24', + }, + { + propLabel: 'CX LogD pH7.4', + propValue: '-2.16', + }, + { + propLabel: 'Aromatic Rings', + propValue: '1', + }, + { + propLabel: 'Heavy Atoms', + propValue: '13', + }, + { + propLabel: 'QED Weighted', + propValue: '0.55', + }, + ], + } + }, +} </script> <style></style>