Merge branch 'main' of github.com:biomod2023/biomod2023 into minh/pop…

…ulate-advisor
ubc-biomod · Oct 28, 2023 · b4fdd78 · b4fdd78
2 parents 47abd6c + 8e22027
commit b4fdd78
Show file tree

Hide file tree

Showing 94 changed files with 4,150 additions and 833 deletions.
diff --git a/NOTEBOOK.md b/NOTEBOOK.md
@@ -1,6 +1,26 @@
-# Notebook
+# Notebook & General Documentation
+
+You're welcome. \
+Co-author: Daniel + Minh :D
+
+# General Documentation
+
+## ClickDetection
+
+Wrapper component to detect if the user click outside of your component. First, `import @/components/utils/ClickDetection.vue`. Then, wrap the component outside of your target component with a few extra twists (work arounds):
 
-You're welcome.
+- `yourCallBackFunc` - the method that will be called when the user clicks outside of your component. You have to define this yourself. It varies depending on the need.
+- `setRef` - is a function from `<ClickDetection>` that allows you to to specify the Ref of the target component. With it, we can check if the component has been clicked, whenever there's a click.
+
+```html
+<ClickDetection :callback"yourCallBackFunc" v-slot"{setRef}">
+  <YourComponent :ref="(el) => setRef(el)">
+    ...
+  </YourComponent>
+</ClickDetection>
+```
+
+# Notebook
 
 ## Usage
 

diff --git a/THEME.md b/THEME.md
@@ -28,7 +28,7 @@ The notebook text and bubble background colors can be accessed with the `noteboo
 
 ```html
 <div class="bg-notebookBg">
-    <p class="text-notebookText">Body</p>
+  <p class="text-notebookText">Body</p>
 </div>
 ```
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,9 +15,11 @@
     "@vueuse/core": "^10.5.0",
     "katex": "^0.16.9",
     "oh-vue-icons": "^1.0.0-rc3",
+    "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",

diff --git a/src/assets/dna_mobile.png b/src/assets/dna_mobile.png
diff --git a/src/assets/dnase-i/all-buffers.png b/src/assets/dnase-i/all-buffers.png
diff --git a/src/assets/dnase-i/hepes-buffer.png b/src/assets/dnase-i/hepes-buffer.png
diff --git a/src/assets/dnase-i/manu-buffer.png b/src/assets/dnase-i/manu-buffer.png
diff --git a/src/assets/dnase-i/te-buffer.png b/src/assets/dnase-i/te-buffer.png
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/elsi-graphic.png b/src/assets/elsi-graphic.png
diff --git a/src/assets/homepage/abstract_graphic.gif b/src/assets/homepage/abstract_graphic.gif
diff --git a/src/assets/homepage/title_background.svg b/src/assets/homepage/title_background.svg
diff --git a/src/assets/homepage/title_graphic.png b/src/assets/homepage/title_graphic.png
diff --git a/src/assets/octahedron-formation/Scaffold-staple_ratio.png b/src/assets/octahedron-formation/Scaffold-staple_ratio.png
diff --git a/src/assets/profile_pictures/Arnaz_Dhalla.jpg b/src/assets/profile_pictures/Arnaz_Dhalla.jpg
diff --git a/src/assets/profile_pictures/Emma_Lo.png b/src/assets/profile_pictures/Emma_Lo.png
diff --git a/src/assets/profile_pictures/Erica_Chu.jpeg b/src/assets/profile_pictures/Erica_Chu.jpeg
diff --git a/src/assets/profile_pictures/Ethan_Rajkumar.jpg b/src/assets/profile_pictures/Ethan_Rajkumar.jpg
diff --git a/src/assets/profile_pictures/Karina_Akhmedove.jpg b/src/assets/profile_pictures/Karina_Akhmedove.jpg
diff --git a/src/assets/profile_pictures/Kshemaka.jpg b/src/assets/profile_pictures/Kshemaka.jpg
diff --git a/src/assets/profile_pictures/Maggie_Wang.jpg b/src/assets/profile_pictures/Maggie_Wang.jpg
diff --git a/src/assets/profile_pictures/Melanie_Chan.jpg b/src/assets/profile_pictures/Melanie_Chan.jpg
diff --git a/src/assets/profile_pictures/Miguel.jpg b/src/assets/profile_pictures/Miguel.jpg
diff --git a/src/assets/profile_pictures/Paniz_Ghavimi.jpg b/src/assets/profile_pictures/Paniz_Ghavimi.jpg
diff --git a/src/assets/profile_pictures/Rosalie_Zhou.jpg b/src/assets/profile_pictures/Rosalie_Zhou.jpg
diff --git a/src/assets/profile_pictures/Talia_Feng.jpg b/src/assets/profile_pictures/Talia_Feng.jpg
diff --git a/src/assets/profile_pictures/Tianne_Kussat.png b/src/assets/profile_pictures/Tianne_Kussat.png
diff --git a/src/assets/profile_pictures/Tiffany_Yu.jpg b/src/assets/profile_pictures/Tiffany_Yu.jpg
diff --git a/src/assets/profile_pictures/Vivian_Zheng.jpg b/src/assets/profile_pictures/Vivian_Zheng.jpg
diff --git a/src/assets/profile_pictures/Whitney_Demetriou.heif b/src/assets/profile_pictures/Whitney_Demetriou.heif
diff --git a/src/assets/structure-design/3gon_view1.png b/src/assets/structure-design/3gon_view1.png
diff --git a/src/assets/structure-design/3gon_view2.png b/src/assets/structure-design/3gon_view2.png
diff --git a/src/assets/structure-design/3gon_view3.png b/src/assets/structure-design/3gon_view3.png
diff --git a/src/assets/structure-design/4gon_view1.png b/src/assets/structure-design/4gon_view1.png
diff --git a/src/assets/structure-design/4gon_view2.png b/src/assets/structure-design/4gon_view2.png
diff --git a/src/assets/structure-design/4gon_view3.png b/src/assets/structure-design/4gon_view3.png
diff --git a/src/assets/structure-design/5gon_view1.png b/src/assets/structure-design/5gon_view1.png
diff --git a/src/assets/structure-design/5gon_view2.png b/src/assets/structure-design/5gon_view2.png
diff --git a/src/assets/structure-design/5gon_view3.png b/src/assets/structure-design/5gon_view3.png
diff --git a/src/assets/structure-design/Octahedron.png b/src/assets/structure-design/Octahedron.png
diff --git a/src/assets/structure-design/Pentagonal.png b/src/assets/structure-design/Pentagonal.png
diff --git a/src/assets/structure-design/Trigonal.png b/src/assets/structure-design/Trigonal.png
diff --git a/src/assets/structure-design/arb-scaffold-staples.png b/src/assets/structure-design/arb-scaffold-staples.png
diff --git a/src/assets/structure-design/arb-scaffold.png b/src/assets/structure-design/arb-scaffold.png
diff --git a/src/assets/structure-design/geometric-perspective.png b/src/assets/structure-design/geometric-perspective.png
diff --git a/src/assets/structure-design/nanoscale.png b/src/assets/structure-design/nanoscale.png
diff --git a/src/assets/structure-design/nanoscale_polymerization_v2_w_trans.png b/src/assets/structure-design/nanoscale_polymerization_v2_w_trans.png
diff --git a/src/assets/structure-design/net-like-structure.png b/src/assets/structure-design/net-like-structure.png
diff --git a/src/assets/structure-design/origami-overview.png b/src/assets/structure-design/origami-overview.png
diff --git a/src/assets/structure-design/polygons-with-flat-spherical-tiling.png b/src/assets/structure-design/polygons-with-flat-spherical-tiling.png
diff --git a/src/assets/structure-design/regular-polygons.png b/src/assets/structure-design/regular-polygons.png
diff --git a/src/assets/structure-design/rmsf-anim.gif b/src/assets/structure-design/rmsf-anim.gif
diff --git a/src/assets/structure-imaging/sample-1.jpeg b/src/assets/structure-imaging/sample-1.jpeg
diff --git a/src/assets/structure-imaging/sample-2.jpeg b/src/assets/structure-imaging/sample-2.jpeg
diff --git a/src/assets/structure-imaging/sample-3.jpeg b/src/assets/structure-imaging/sample-3.jpeg
diff --git a/src/assets/structure-imaging/sample-4.jpeg b/src/assets/structure-imaging/sample-4.jpeg
diff --git a/src/assets/thiolation-and-conjunction/michael-addition.png b/src/assets/thiolation-and-conjunction/michael-addition.png
diff --git a/src/assets/thiolation-and-conjunction/reaction-of-sata.png b/src/assets/thiolation-and-conjunction/reaction-of-sata.png
diff --git a/src/assets/thiolation-and-conjunction/thiolated-dnase-i.png b/src/assets/thiolation-and-conjunction/thiolated-dnase-i.png
diff --git a/src/assets/thiolation.png b/src/assets/thiolation.png
diff --git a/src/components/CustomTable2.vue b/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>
-Original file line number
+Diff line change
@@ Expand Up @@
     ```html
     <div class="bg-notebookBg">
-        <p class="text-notebookText">Body</p>
+      <p class="text-notebookText">Body</p>
     </div>
     ```
@@ Expand Down @@