From 4ba60ebc2404c4d2dace4bfbe495044738d46ad2 Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Fri, 26 Mar 2021 19:47:34 -0500
Subject: [PATCH] Chemical Probe: start to add mockup page
---
.../ChemicalProbeReportCard.vue | 43 ++++++
.../ControlStructuresAndUse.vue | 24 ++++
.../report_cards/chemical_probe/Summary.vue | 132 ++++++++++++++++++
pages/chemical_probe/_id.vue | 14 ++
4 files changed, 213 insertions(+)
create mode 100644 components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
create mode 100644 components/report_cards/chemical_probe/ControlStructuresAndUse.vue
create mode 100644 components/report_cards/chemical_probe/Summary.vue
create mode 100644 pages/chemical_probe/_id.vue
diff --git a/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue b/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
new file mode 100644
index 0000000..77ecf89
--- /dev/null
+++ b/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
@@ -0,0 +1,43 @@
+<template>
+ <v-container>
+ <v-row>
+ <v-col cols="9">
+ <h1 class="primary--text">PFI-6: A Chemical Probe for human MLLT1/3</h1>
+ <v-divider />
+ <br />
+ <v-row>
+ <v-col cols="12">
+ <h2 class="primary--text">Summary</h2>
+ </v-col>
+ </v-row>
+ <v-row>
+ <v-col cols="12"> <Summary /> </v-col>
+ </v-row>
+ <v-row>
+ <v-col cols="12">
+ <h2 class="primary--text">
+ Chemical Probe & Negative Control Structures and Use
+ </h2>
+ </v-col>
+ </v-row>
+ <v-row>
+ <v-col cols="12"> <ControlStructuresAndUse /> </v-col>
+ </v-row>
+ </v-col>
+ <v-col cols="3"> Index </v-col>
+ </v-row>
+ </v-container>
+</template>
+
+<script>
+import Summary from '~/components/report_cards/chemical_probe/Summary.vue'
+import ControlStructuresAndUse from '~/components/report_cards/chemical_probe/ControlStructuresAndUse.vue'
+export default {
+ components: {
+ Summary,
+ ControlStructuresAndUse,
+ },
+}
+</script>
+
+<style></style>
diff --git a/components/report_cards/chemical_probe/ControlStructuresAndUse.vue b/components/report_cards/chemical_probe/ControlStructuresAndUse.vue
new file mode 100644
index 0000000..f755ae5
--- /dev/null
+++ b/components/report_cards/chemical_probe/ControlStructuresAndUse.vue
@@ -0,0 +1,24 @@
+<template>
+ <v-card>
+ <v-card-text>
+ <v-row>
+ <v-col cols="6">
+ <v-card tile elevation="0">
+ <v-card-title>PFI-6 Chemical Probe</v-card-title>
+ </v-card>
+ </v-col>
+ <v-col cols="6">
+ <v-card tile elevation="0">
+ <v-card-title>PFI-6N Negative Control</v-card-title>
+ </v-card>
+ </v-col>
+ </v-row>
+ </v-card-text>
+ </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>
diff --git a/components/report_cards/chemical_probe/Summary.vue b/components/report_cards/chemical_probe/Summary.vue
new file mode 100644
index 0000000..43fc4a4
--- /dev/null
+++ b/components/report_cards/chemical_probe/Summary.vue
@@ -0,0 +1,132 @@
+<template>
+ <v-card>
+ <v-card-subtitle>Overview</v-card-subtitle>
+ <v-divider />
+ <v-card-text>
+ The small YEATS protein domain is found in four human proteins, including
+ MLLT1 and MLLT3, and is an epigenetic reader of acetyl-lysine histone
+ marks. MLLT1 has been found to be a driver of acute myeloid leukaemia. A
+ collaboration between Pfizer and the SGC has resulted in the discovery of
+ PFI-6, a potent disrupter of protein:protein interactions involving the
+ YEATS domains of MLLT1/3.
+ </v-card-text>
+ <v-divider />
+ <v-card-subtitle>Details</v-card-subtitle>
+ <v-divider />
+ <v-card-text>
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Chemical Probe Name:</b>
+ PFI-6
+ </v-col>
+ </v-row>
+ <v-divider />
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Negative control compound:</b>
+ PFI-6N
+ </v-col>
+ </v-row>
+ <v-divider />
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Target(s) (synonyms):</b>
+ MLLT1/MLLT3 (ENL;LTG19;YEATS1 / AF- 9;YEATS3)
+ </v-col>
+ </v-row>
+ <v-divider />
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Recommended in vitro assay concentration:</b>
+ <p>
+ 10 µM for PFI-6 and PFI-6N; use with negative control and orthogonal
+ probe for best interpretation of data
+ </p>
+ </v-col>
+ </v-row>
+ <v-divider />
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Web link for more details:</b>
+ <a href="https://www.thesgc.org/chemical-probes/PFI-6" target="_blank"
+ >https://www.thesgc.org/chemical-probes/PFI-6</a
+ >
+ </v-col>
+ </v-row>
+ <v-divider />
+
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Protein Target Classification:</b>
+ <br />
+ <br />
+ <p>
+ <v-chip outlined color="secondary" label>
+ Unclassified protein
+ </v-chip>
+ >
+ <v-chip outlined color="secondary" label>
+ Epigenetic regulator
+ </v-chip>
+ >
+ <v-chip outlined color="secondary" label> Reader </v-chip>
+ >
+ <v-chip outlined color="secondary" label> Bromodomain </v-chip>
+ </p>
+ </v-col>
+ </v-row>
+ <v-divider />
+
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Publications:</b>
+ None at the time of writing
+ </v-col>
+ </v-row>
+ <v-divider />
+
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Orthogonal chemical probes:</b>
+ NVS-MLLT-1
+ </v-col>
+ </v-row>
+ <v-divider />
+
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Cellular assay(s) for target-engagement:</b>
+ NanoBRET FRAP
+ </v-col>
+ </v-row>
+ <v-divider />
+
+ <v-row class="details-row" dense>
+ <v-col cols="12">
+ <b>Suitable for in vivo use:</b>
+ no
+ </v-col>
+ </v-row>
+ <v-divider />
+ </v-card-text>
+
+ <v-card-actions>
+ <v-btn
+ href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
+ color="primary"
+ >
+ <v-icon>mdi-download</v-icon> PDF
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+.details-row {
+ margin: 0;
+}
+</style>
diff --git a/pages/chemical_probe/_id.vue b/pages/chemical_probe/_id.vue
new file mode 100644
index 0000000..8fc3c74
--- /dev/null
+++ b/pages/chemical_probe/_id.vue
@@ -0,0 +1,14 @@
+<template>
+ <div><ChemicalProbeReportCard /></div>
+</template>
+
+<script>
+import ChemicalProbeReportCard from '~/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue'
+export default {
+ components: {
+ ChemicalProbeReportCard,
+ },
+}
+</script>
+
+<style></style>
--
GitLab