feat: restyled home page (#259)

* feat: venome header

* feat: show big nav links nicely

* feat: random protein

* fix: background

* feat: hide controls on molstar

* feat: add random protein styles

* feat: random protein first iter

* feat: home page v2

* fix: molstar dispose error if not loaded

* fix: last commit actually fixed

* open foldseek by default

* just one button for protein download

* feat: logo not blank

* feat: full screen

* fix: don't compute foldseek everytime

* feat: two proteins only

backend/init.sql

@@ -12,6 +12,7 @@
 -- https://www.postgresql.org/docs/current/ddl-generated-columns.html
 
 CREATE EXTENSION pg_trgm; -- for trigram matching fuzzy search similarity() func
+CREATE EXTENSION tsm_system_rows; -- for random sampling: TABLESAMPLE system_rows(n: int) -> n random rows
 
 /*
  * Species Table

backend/src/api/protein.py

@@ -459,3 +459,35 @@ def get_tm_info(proteinA: str, proteinB: str):
  except Exception as e:
  log.error(e)
  raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/protein/random", response_model=ProteinEntry)
+def get_random_protein():
+ with Database() as db:
+ try:
+ query = """SELECT 
+ proteins.name,
+ proteins.length, 
+ proteins.mass, 
+ proteins.description, 
+ species.name as species_name 
+ FROM proteins TABLESAMPLE SYSTEM_ROWS(1)
+ JOIN species ON species.id = proteins.species_id;"""
+ res = db.execute_return(query)
+ if res is not None:
+ name, length, mass, description, species_name = res[0]
+ return ProteinEntry(
+ name=name,
+ length=length,
+ mass=mass,
+ description=description,
+ species_name=species_name,
+ )
+ else:
+ raise HTTPException(
+ status_code=501, detail="SQL query couldn't execute"
+ )
+
+ except Exception as e:
+ log.error(e)
+ raise HTTPException(status_code=500, detail=str(e))

frontend/src/Router.svelte

@@ -15,6 +15,7 @@
  import Articles from "./routes/Articles.svelte";
  import EditArticle from "./routes/EditArticle.svelte";
  import Upload from "./routes/Upload.svelte";
+ import FullScreen from "./routes/FullScreen.svelte";
 </script>
 
 <Router>
@@ -36,6 +37,9 @@
  ><Edit urlId={params.id} /></Route
  >
  <Route path="/upload/protein"><UploadProtein /></Route>
+ <Route path="/fullscreen/:id" let:params
+ ><FullScreen proteinName={params.id} /></Route
+ >
  <Route path="/align/:a/:b" let:params
  ><Align proteinA={params.a} proteinB={params.b} /></Route
  >

frontend/src/lib/BigNavLink.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+ import { navigate } from "svelte-routing";
+
+ export let width = 400;
+ export let title = "TITLE";
+ export let desc = "DESCRIPTION";
+ export let href = "";
+ let hovering = false;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+ style="width: {width}px; "
+ class="big-nav-link"
+ on:click={() => {
+ navigate(href);
+ }}
+ on:mouseenter={() => (hovering = true)}
+ on:mouseleave={() => (hovering = false)}
+ title="Click to go to {href}"
+>
+ <div>
+ <div class="title-nav">{title}</div>
+ <div class="desc-nav">{@html desc}</div>
+ </div>
+ <div class={hovering ? "arrow-icon-active" : "arrow-icon"}>
+ <svg
+ width="60"
+ height="60"
+ viewBox="0 0 52 52"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M31.7559 19.8702L18.8802 32.7459M31.7559 19.8702L32.4368 28.4746M31.7559 19.8702L23.1515 19.1893"
+ stroke="#193F5A"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </div>
+</div>
+
+<style>
+ .arrow-icon {
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ opacity: 0.25;
+ transition: all 0.2s ease-in-out;
+ }
+ .arrow-icon-active {
+ position: absolute;
+ right: 0;
+ top: 0;
+ opacity: 1;
+ transition: all 0.2s ease-in-out;
+ }
+ .big-nav-link {
+ position: relative;
+ background-color: hsla(205, 57%, 23%, 0.05);
+ border-radius: 5px;
+ padding: 30px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ transition: all 0.2s ease-in-out;
+ }
+ .big-nav-link:hover {
+ cursor: pointer;
+ background-color: hsla(205, 57%, 23%, 0.2);
+ }
+
+ .title-nav {
+ font-size: 22px;
+ font-weight: 500;
+ color: var(--primary-800);
+ }
+ .desc-nav {
+ font-size: 19px;
+ font-weight: 200;
+ color: hsla(205, 57%, 23%, 0.7);
+ }
+</style>

frontend/src/lib/EntryCard.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
  import { Card } from "flowbite-svelte";
  export let title = "";
+ export let style = "";
 </script>
 
 <Card
  class="max-w-full mt-5"
- style="padding-top: 15px; color: var(--color-text);"
+ style="padding-top: 15px; color: var(--color-text); {style}"
 >
  <h2 class="text-primary-900 mb-2">{title}</h2>
  <slot />

frontend/src/lib/Header.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
- import logo from "../images/logo.svg";
  import { links } from "svelte-routing";
  import { onMount } from "svelte";
  import {
  UserOutline,
- SearchOutline,
  NewspapperSolid,
  UploadSolid,
- SearchSolid,
  } from "flowbite-svelte-icons";
  import { user } from "./stores/user";
  import Cookies from "js-cookie";
  import ProteinIcon from "../lib/ProteinIcon.svelte";
+ import Logo from "../lib/Logo.svelte";
 
  onMount(async () => {
  /**
@@ -29,7 +27,7 @@
  <div class="nav-container">
  <div id="logo">
  <a href="/">
- <img src={logo} alt="Venome Logo" />
+ <Logo height={45} width={100} />
  </a>
  </div>
  <div class="nav">
@@ -62,20 +60,14 @@
  header {
  display: flex;
  justify-content: space-between;
- background-color: #08163803;
+ background-color: hsla(0, 0%, 100%, 0.5);
  box-shadow: 0px 0px 2px 2px hsla(0, 0%, 0%, 0.1);
  height: 60px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 998;
- backdrop-filter: blur(10px);
- }
-
- #logo {
- /* TODO remove these hard coded constraints and do it right */
- height: 45px;
- width: 100px;
+ backdrop-filter: blur(20px);
  }
 
  .nav-container {

frontend/src/lib/Logo.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+ export let width = 410;
+ export let height = 163;
+</script>
+
+<svg
+ {width}
+ {height}
+ viewBox="0 0 410 163"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+>
+ <g clip-path="url(#clip0_310_119)">
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M-15 125.197C-11.4094 110.085 3.51052 94.0348 14.5441 68.4113C25.5777 42.7877 39.5125 5.98654 64.167 6.6423C64.8012 6.4585 81.0986 4.8491 90.4137 21.428C99.7287 38.0068 102.503 47.1713 102.503 47.1713C86.4054 68.2797 82.4207 81.8875 70.9905 108.775C59.5603 135.663 42.5714 158.346 16.7375 158.462C-9.09634 158.579 -12.4721 143.525 -15 125.197Z"
+ fill="url(#paint0_linear_310_119)"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M190.93 125.197C203.92 113.39 209.44 94.0348 220.474 68.4113C231.507 42.7877 245.442 5.98654 270.097 6.6423C270.731 6.4585 287.028 4.8491 296.343 21.428C305.658 38.0068 305.591 49.0301 305.591 49.0301C289.493 70.1385 288.35 81.8875 276.92 108.775C265.49 135.663 248.501 158.346 222.667 158.462C196.833 158.579 193.458 143.525 190.93 125.197Z"
+ fill="url(#paint1_linear_310_119)"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M64.1248 6.59106H142.545C165.493 12.4561 172.05 59.8055 176.93 82.7744C181.81 105.743 198.634 157.288 219.928 158.463L140.062 158.193C114.919 141.63 109.658 102.205 107.102 82.7744C104.546 63.3438 100.192 5.58673 64.1248 6.59106Z"
+ fill="#193F5A"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M268.375 6.59106H346.795C369.743 12.4561 376.301 59.8055 381.181 82.7744C386.06 105.743 402.884 157.288 424.178 158.463L344.313 158.193C319.17 141.63 313.909 102.205 311.353 82.7744C308.797 63.3438 304.442 5.58675 268.375 6.59106Z"
+ fill="url(#paint2_linear_310_119)"
+ />
+ </g>
+ <defs>
+ <linearGradient
+ id="paint0_linear_310_119"
+ x1="98"
+ y1="-13.3819"
+ x2="35.65"
+ y2="144.974"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop stop-color="#CDDAF8" />
+ <stop offset="0.57317" stop-color="#CDDAF8" stop-opacity="0.14" />
+ <stop offset="1" stop-color="#CDDAF8" stop-opacity="0" />
+ </linearGradient>
+ <linearGradient
+ id="paint1_linear_310_119"
+ x1="224.5"
+ y1="152.598"
+ x2="281.261"
+ y2="2.4576"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop stop-color="#CDDAF8" />
+ <stop offset="1" stop-color="#A4C0FF" stop-opacity="0" />
+ </linearGradient>
+ <linearGradient
+ id="paint2_linear_310_119"
+ x1="313.5"
+ y1="-3.43169"
+ x2="380.19"
+ y2="163.434"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop stop-color="#193F5A" />
+ <stop
+ offset="0.484061"
+ stop-color="#A9B8C3"
+ stop-opacity="0.568668"
+ />
+ <stop offset="0.713338" stop-color="#D1D9DF" stop-opacity="0.1" />
+ <stop offset="1" stop-color="white" stop-opacity="0" />
+ </linearGradient>
+ <clipPath id="clip0_310_119">
+ <rect width="410" height="163" fill="white" />
+ </clipPath>
+ </defs>
+</svg>

frontend/src/lib/Molstar.svelte

@@ -5,6 +5,7 @@
  loseWebGLContext,
  colorResidues,
  type ChainColors,
+ type HideCanvasControls,
  } from "./venomeMolstarUtils";
  import type { QueryParam } from "../../venome-molstar/lib/helpers";
 
@@ -18,9 +19,10 @@
  export let zIndex = 999;
  export let spin = false;
  export let chainColors: ChainColors = {};
+ export let hideCanvasControls: HideCanvasControls = [];
+
  let m: PDBeMolstarPlugin;
  let subscribe: ReturnType<typeof colorByChain>;
-
  let divEl: HTMLDivElement;
  async function render() {
  m = new PDBeMolstarPlugin();
@@ -41,12 +43,7 @@
  reactive: true,
  sequencePanel: true,
  hideControls,
- hideCanvasControls: [
- "animation",
- "expand",
- "controlInfo",
- "selection",
- ],
+ hideCanvasControls,
  });
  if (spin) {
  m.visual.toggleSpin();
@@ -72,8 +69,12 @@
  onDestroy(() => {
  if (divEl && divEl.querySelector("canvas")) {
  loseWebGLContext(divEl.querySelector("canvas")!);
- m.plugin.dispose();
- subscribe.unsubscribe();
+ if (m.plugin) {
+ m.plugin.dispose();
+ }
+ if (subscribe) {
+ subscribe.unsubscribe();
+ }
  }
  });