Venom-Biochem-Lab · xnought · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,11 +18,17 @@
  "@sveltejs/adapter-auto": "^2.0.0",
  "@sveltejs/kit": "^1.20.4",
  "@types/cookie": "^0.5.1",
+ "autoprefixer": "^10.4.14",
+ "flowbite": "^2.1.1",
+ "flowbite-svelte": "^0.44.19",
  "openapi-typescript-codegen": "^0.25.0",
+ "postcss": "^8.4.24",
+ "postcss-load-config": "^4.0.1",
  "prettier": "^2.8.0",
  "prettier-plugin-svelte": "^2.10.1",
  "svelte": "^4.0.5",
  "svelte-check": "^3.4.3",
+ "tailwindcss": "^3.3.2",
  "tslib": "^2.4.1",
  "typescript": "^5.0.0",
  "vite": "^4.4.2",

diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs
@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+ plugins: [
+ //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+ tailwindcss(),
+ //But others, like autoprefixer, need to run after,
+ autoprefixer,
+ ],
+};
+
+module.exports = config;
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -7,6 +7,16 @@
  %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
+ <!-- Molstar CSS & JS -->
+ <link
+ rel="stylesheet"
+ type="text/css"
+ href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-3.1.2.css"
+ />
+ <script
+ type="text/javascript"
+ src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-3.1.2.js"
+ ></script>
  <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
diff --git a/frontend/src/app.postcss b/frontend/src/app.postcss
@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/frontend/src/lib/ProteinVis.svelte b/frontend/src/lib/ProteinVis.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+
+ export let url =
+ "https://alphafold.ebi.ac.uk/files/AF-O15552-F1-model_v1.cif";
+ export let format = "cif";
+
+ onMount(async () => {
+ //Create plugin instance
+ // @ts-ignore
+ var viewerInstance = new PDBeMolstarPlugin(); // loaded through app.html
+
+ //Set options (Checkout available options list in the documentation)
+ var options = {
+ customData: {
+ url,
+ format,
+ },
+ subscribeEvents: false,
+ bgColor: {
+ r: 255,
+ g: 255,
+ b: 255,
+ },
+ selectInteraction: true,
+ alphafoldView: true,
+ reactive: true,
+ sequencePanel: true,
+ hideControls: true,
+ hideCanvasControls: ["animation"],
+ };
+
+ //Get element from HTML/Template to place the viewer
+ var viewerContainer = document.getElementById("myViewer");
+
+ //Call render method to display the 3D view
+ viewerInstance.render(viewerContainer, options);
+ });
+</script>
+
+<div id="myViewer" />
+
+<style>
+ /* https://embed.plnkr.co/plunk/WlRx73uuGA9EJbpn */
+ .msp-plugin ::-webkit-scrollbar-thumb {
+ background-color: #474748 !important;
+ }
+ #myViewer {
+ float: left;
+ width: 500px;
+ height: 500px;
+ position: relative;
+ }
+</style>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+ import "../app.postcss";
  import Header from "./Header.svelte";
  import "./styles.css";
 </script>

diff --git a/frontend/src/routes/protein/[proteinId]/+page.svelte b/frontend/src/routes/protein/[proteinId]/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { Backend, type ProteinEntry } from "$lib/backend";
+ import ProteinVis from "$lib/ProteinVis.svelte";
+ import { Spinner } from "flowbite-svelte";
 
  export let data; // linked to +page.ts return (aka the id)
  let entry: ProteinEntry | null = null;
@@ -23,9 +25,11 @@
  <!-- if got entry from backend, display it -->
  <h1>{entry.name}</h1>
  <p>ID: {entry.id}</p>
+
+ <ProteinVis />
 {:else if !error}
  <!-- Otherwise, tell user we tell the user we are loading -->
- <h1>Loading...</h1>
+ <h1>Loading Protein Entry <Spinner /></h1>
 {:else if error}
  <!-- if we error out, tell the user the id is shiza -->
  <h1>Error</h1>

diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
@@ -1,18 +1,18 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import adapter from "@sveltejs/adapter-auto";
+import { vitePreprocess } from "@sveltejs/kit/vite";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
- preprocess: vitePreprocess(),
+ preprocess: [vitePreprocess({})],
 
  kit: {
  // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
  // If your environment is not supported or you settled on a specific environment, switch out the adapter.
  // See https://kit.svelte.dev/docs/adapters for more information about adapters.
- adapter: adapter()
- }
+ adapter: adapter(),
+ },
 };
 
 export default config;
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
@@ -0,0 +1,32 @@
+const config = {
+ content: [
+ "./src/**/*.{html,js,svelte,ts}",
+ "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+ ],
+
+ plugins: [require("flowbite/plugin")],
+
+ darkMode: "class",
+
+ theme: {
+ extend: {
+ colors: {
+ // flowbite-svelte
+ primary: {
+ 50: "#FFF5F2",
+ 100: "#FFF1EE",
+ 200: "#FFE4DE",
+ 300: "#FFD5CC",
+ 400: "#FFBCAD",
+ 500: "#FE795D",
+ 600: "#EF562F",
+ 700: "#EB4F27",
+ 800: "#CC4522",
+ 900: "#A5371B",
+ },
+ },
+ },
+ },
+};
+
+module.exports = config;