Merge pull request #56 from biomod2023/ideas-2

Ideas Branch!

package.json

@@ -18,7 +18,8 @@
     "v-click-outside": "^3.2.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
-    "vue-window-size": "^2.0.0"
+    "vue-window-size": "^2.0.0",
+    "vuetify": "^3.3.23"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

src/components/CustomTable2.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  tableData: {
+    headers: string[]
+    rowHeaders: string[]
+    rowsPerRowHeader: number
+    data: any[][]
+  }
+}>()
+
+const border = 'border-notebookText'
+</script>
+
+<template>
+  <table class="table-fixed border-collapse lg:w-full">
+    <tr class="bg-slate">
+      <th
+        v-for="(header, i) in tableData.headers"
+        :key="i"
+        :class="'w-1/' + tableData.headers.length"
+        class="py-2 px-4 text-sm lg:text-base"
+      >
+        {{ header }}
+      </th>
+    </tr>
+    <tbody class="bg-[#303030]">
+      <tr v-for="(row, i) in tableData.data" :key="i">
+        <th
+          v-if="i % tableData.rowsPerRowHeader == 0"
+          :rowspan="tableData.rowsPerRowHeader"
+          class="text-sm lg:text-base"
+        >
+          {{ tableData.rowHeaders[i / tableData.rowsPerRowHeader] }}
+        </th>
+        <td v-for="(item, j) in row" :key="j" class="py-4 px-2 lg:text-lg">{{ item }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>

src/components/Equation.vue

@@ -12,8 +12,8 @@ onMounted(() => {
 </script>
 <template>
   <div
-    class="w-full overflow-x-scroll bg-transparent invisible-scroller text-center"
     ref="containerRef"
+    class="w-full overflow-x-scroll bg-transparent invisible-scroller text-center"
   ></div>
 </template>
 <!-- 

src/components/Timeline.vue

@@ -1 +1,137 @@
-<script setup lang="ts"></script>
+<template>
+  <v-timeline :side="$windowWidth < 768 ? 'end' : undefined">
+    <v-timeline-item dot-color="#E2B764" size="small" fill-dot>
+      <v-card>
+        <v-card-title class="bg-gold">
+          <h2 class="text-subtitle font-semibold text-slate">April</h2>
+        </v-card-title>
+        <v-card-text class="bg-[#303030] text-white">
+          <ul class="list-dic pl-2">
+            <li>
+              Research and protocol development for liposome formation, enzyme activity and enzyme
+              conjugation
+            </li>
+            <li>
+              Beginning of de novo structure design of Trigonal and Pentagonal Bipyrimidal DNA
+              Origami shapes
+            </li>
+            <li>
+              Replication of the design of the scaffold and staple strands of the Octahedron
+              structure in Cadnano
+            </li>
+          </ul>
+        </v-card-text>
+      </v-card>
+    </v-timeline-item>
+
+    <v-timeline-item dot-color="#E2B764" size="small" fill-dot>
+      <v-card>
+        <v-card-title class="bg-gold justify-end">
+          <h2 class="me-4 text-subtitle font-semibold text-slate">May</h2>
+        </v-card-title>
+        <v-card-text class="bg-[#303030] text-white">
+          <ul class="list-dic pl-2">
+            <li>Simulation of the formation stability of Octahedron using CanDO</li>
+            <li>
+              Finalization of the enzyme conjugation protocols and ordering of required reagents
+            </li>
+            <li>
+              Carrying out enzyme docking simulations to pick an enzyme to test conjugation with
+              liposome
+            </li>
+            <li>Implementation of Trigonal and Pentagonal Bipyramid into Cadnano</li>
+          </ul>
+        </v-card-text>
+      </v-card>
+    </v-timeline-item>
+
+    <v-timeline-item dot-color="#E2B764" size="small" fill-dot>
+      <v-card>
+        <v-card-title class="bg-gold">
+          <h2 class="text-subtitle font-semibold text-slate">June</h2>
+        </v-card-title>
+        <v-card-text class="bg-[#303030] text-white">
+          <ul class="list-dic pl-2">
+            <li>
+              Ordering of p7308 scaffold and staple strand sequences for octahedron structure to
+              test in lab
+            </li>
+            <li>
+              Performing activity assays on chosen enzyme (DNAseI) in different buffer components
+              required for conjugation (via thiolation)
+            </li>
+          </ul>
+        </v-card-text>
+      </v-card>
+    </v-timeline-item>
+
+    <v-timeline-item dot-color="#E2B764" size="small" fill-dot>
+      <v-card>
+        <v-card-title class="bg-gold justify-end">
+          <h2 class="me-4 text-subtitle font-semibold text-slate">July</h2>
+        </v-card-title>
+        <v-card-text class="bg-[#303030] text-white">
+          <ul class="list-dic pl-2">
+            <li>Testing of different methods to produce liposomes within 100 d.nm</li>
+            <li>
+              Optimize production of octahedron by testing different ratios of scaffold: staples
+            </li>
+            <li>Finalize Cadnano designs of Trigonal and Pentagonal structures</li>
+          </ul>
+        </v-card-text>
+      </v-card>
+    </v-timeline-item>
+
+    <v-timeline-item dot-color="#E2B764" size="small" fill-dot>
+      <v-card>
+        <v-card-title class="bg-gold">
+          <h2 class="text-subtitle font-semibold text-slate">August</h2>
+        </v-card-title>
+        <v-card-text class="bg-[#303030] text-white">
+          <ul class="list-dic pl-2">
+            <li>Produce liposomes with and without maleimide linkages</li>
+            <li>
+              Test methods of thiolating DNase I in lab performing PicoGreen activity assays to
+              verify enzyme function
+            </li>
+            <li>Run CanDo simulations on trigonal and pentagonal bipyramid structures</li>
+          </ul>
+        </v-card-text>
+      </v-card>
+    </v-timeline-item>
+
+    <v-timeline-item dot-color="#E2B764" size="small" fill-dot>
+      <v-card>
+        <v-card-title class="bg-gold justify-end">
+          <h2 class="me-4 text-subtitle font-semibold text-slate">September</h2>
+        </v-card-title>
+        <v-card-text class="bg-[#303030] text-white">
+          <ul class="list-dic pl-2">
+            <li>
+              Attempt to prepare Octahedron samples for visualization through atomic force
+              microscopy (AFM)
+            </li>
+            <li>Purify thiolated DNase I and attempt conjugation with maleimide-liposomes</li>
+            <li>If resources availible, form liposome using octahedron structure</li>
+          </ul>
+        </v-card-text>
+      </v-card>
+    </v-timeline-item>
+
+    <v-timeline-item dot-color="#E2B764" size="small" fill-dot>
+      <v-card>
+        <v-card-title class="bg-gold">
+          <h2 class="text-subtitle font-semibold text-slate">October</h2>
+        </v-card-title>
+        <v-card-text class="bg-[#303030] text-white">
+          <ul class="list-dic pl-2">
+            <li>Troubleshooting for enzyme thiolation and/or conjugation</li>
+            <li>
+              Finalization of data analysis of results and completion of writeups for competiion
+            </li>
+          </ul>
+        </v-card-text>
+      </v-card>
+    </v-timeline-item>
+  </v-timeline>
+</template>

src/main.ts

@@ -14,6 +14,12 @@ import {
 } from 'oh-vue-icons/icons'
 import { VueWindowSizePlugin } from 'vue-window-size/plugin'
 import vClickOutside from 'v-click-outside'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+
+const vuetify = createVuetify({
+  components
+})
 
 addIcons(HiSolidArrowSmLeft, HiSolidArrowSmRight, RiArrowDropRightLine, RiArrowDropLeftLine, RiTeamFill)
 
@@ -30,6 +36,7 @@ app.directive('click-outside', {
   }
 })
 app.use(router)
+app.use(vuetify)
 app.use(VueWindowSizePlugin)
 app.component('VIcon', OhVueIcon)