Implement Docking of DNASE I (Lab Notebook) (#51)

* add initial docking of DNASE I page and its routing * add docking-dnase images * add custom sub-section for each bubble in the lab notebook * implement docking of dnaseI * Prettified Code! * Changed title capitalization * Fixed dnase capitalization * Fix merge conflict --------- Co-authored-by: IcedTea2K <[email protected]> Co-authored-by: Daniel Pan <[email protected]>
ubc-biomod · Oct 25, 2023 · 5fd8468 · 5fd8468
1 parent 23139dd
commit 5fd8468
Show file tree

Hide file tree

Showing 10 changed files with 337 additions and 39 deletions.
diff --git a/src/assets/docking-dnase/DNase1 Pymol.png b/src/assets/docking-dnase/DNase1 Pymol.png
diff --git a/src/assets/docking-dnase/DNase1 active site.jpg b/src/assets/docking-dnase/DNase1 active site.jpg
diff --git a/src/assets/docking-dnase/DNase1+Maleimdie.png b/src/assets/docking-dnase/DNase1+Maleimdie.png
diff --git a/src/assets/docking-dnase/DNase1+Maleimide vina score.png b/src/assets/docking-dnase/DNase1+Maleimide vina score.png
diff --git a/src/assets/docking-dnase/Maleimide Pymol.png b/src/assets/docking-dnase/Maleimide Pymol.png
diff --git a/src/components/lab-notebook/Section.vue b/src/components/lab-notebook/Section.vue
@@ -0,0 +1,13 @@
+
+<script setup lang="ts">
+  const sectionTitleStyle = 'text-subtitle-sm lg:text-subtitle text-white mb-4'
+</script>
+
+<template>
+    <section>
+        <h3 :class="sectionTitleStyle">
+            <slot name="sub-title"></slot>
+        </h3>
+        <slot name="content"></slot>
+    </section>
+</template>
diff --git a/src/components/navbar/NavBar.vue b/src/components/navbar/NavBar.vue
@@ -35,7 +35,7 @@ const tree: Tree[] = [
           },
           {
             name: 'Docking of Dnase I',
-            url: '#'
+            url: '/computational-simulation/docking-of-dnase-i'
           }
         ]
       },

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -4,6 +4,7 @@ const IdeasView = () => import('@/views/IdeasView.vue')
 const TeamView = () => import('@/views/TeamView.vue')
 const ELSIView = () => import('@/views/ELSIView.vue')
 const SponsorsView = () => import('@/views/SponsorsView.vue')
+const DockingDNASE = () => import('@/views/computational-simulation/DockingDNASE.vue')
 const GroupAView = () => import('@/views/lab-validation/GroupAView.vue')
 const GroupBView = () => import('@/views/lab-validation/GroupBView.vue')
 const GroupCView = () => import('@/views/lab-validation/GroupCView.vue')
@@ -39,6 +40,11 @@ const router = createRouter({
       name: 'sponsors',
       component: SponsorsView
     },
+    {
+      path: '/computational-simulation/docking-of-dnase-i',
+      name: 'docking-of-dnase-i',
+      component: DockingDNASE
+    },
     {
       path: '/lab-validation/dnase-i',
       name: 'dnase-i',

diff --git a/src/views/computational-simulation/DockingDNASE.vue b/src/views/computational-simulation/DockingDNASE.vue
diff --git a/src/views/future-directions/AADocking.vue b/src/views/future-directions/AADocking.vue
@@ -50,39 +50,6 @@ const sectionTitleStyle = 'text-subtitle-sm lg:text-subtitle text-white mb-4'
             </section>
 
             <section>
-<<<<<<< HEAD
-              <h4 class="font-bold">Alginate Lyase: PDB Identifier 1HV6 (Figure 1)</h4>
-
-              <CaptionedGraphics modifier="w-full">
-                <template #graphics>
-                  <img
-                    src="../../assets/aa-docking/alginate-lyase-3d.png"
-                    alt="Picture of Alginate Lyase"
-                    class="w-full lg:w-1/2"
-                  />
-                </template>
-                <template #caption>
-                  <p>Figure 1. 3D representation of Alginate Lyase in Pymol</p>
-                </template>
-              </CaptionedGraphics>
-            </section>
-
-            <section>
-              <h4 class="font-bold">Alpha-Amylase: PDB Identifier 1MWO (Figure 2)</h4>
-
-              <CaptionedGraphics modifier="w-full">
-                <template #graphics>
-                  <img
-                    src="../../assets/aa-docking/alpha-amylase-3d.png"
-                    alt="Picture of Alpha Amylase"
-                    class="w-full lg:w-1/2"
-                  />
-                </template>
-                <template #caption>
-                  <p>Figure 2. 3D representation of Alpha-Amylase in Pymol.</p>
-                </template>
-              </CaptionedGraphics>
-=======
               <div class="flex flex-col items-center lg:items-start gap-y-4">
                 <h4 class="font-bold">Alginate Lyase: PDB Identifier 1HV6 (Figure 1)</h4>
                 <CaptionedGraphics modifier="w-full">
@@ -117,7 +84,6 @@ const sectionTitleStyle = 'text-subtitle-sm lg:text-subtitle text-white mb-4'
                   </template>
                 </CaptionedGraphics>
               </div>
->>>>>>> 9fb5d0796bd52e52dee2d580df06f145a20cf7f7
             </section>
 
             <section>
@@ -296,11 +262,7 @@ const sectionTitleStyle = 'text-subtitle-sm lg:text-subtitle text-white mb-4'
             </section>
 
             <section>
-<<<<<<< HEAD
-              <h3 :class="sectionTitleStyle">Maleimide and Alpha-Amylase Interaction</h3>
-=======
               <h3 :class="sectionTitleStyle">2. Maleimide and Alpha-Amylase Interaction</h3>
->>>>>>> 9fb5d0796bd52e52dee2d580df06f145a20cf7f7
               <p>
                 Based on the literature review we performed, Alpha-Amylase does not bind to
                 maleimide with its active site. The residues predicted by CB-Dock software do not
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,7 +35,7 @@ const tree: Tree[] = [ @@
               },
               {
                 name: 'Docking of Dnase I',
-                url: '#'
+                url: '/computational-simulation/docking-of-dnase-i'
               }
             ]
           },
@@ Expand Down @@