feat: upload now has two options

frontend/src/Router.svelte

@@ -3,7 +3,7 @@
  import Header from "./lib/Header.svelte";
  import Home from "./routes/Home.svelte";
  import Search from "./routes/Search.svelte";
- import Upload from "./routes/Upload.svelte";
+ import UploadProtein from "./routes/UploadProtein.svelte";
  import Login from "./routes/Login.svelte";
  import Protein from "./routes/Protein.svelte";
  import Error from "./routes/Error.svelte";
@@ -14,6 +14,7 @@
  import Article from "./routes/Article.svelte";
  import Articles from "./routes/Articles.svelte";
  import EditArticle from "./routes/EditArticle.svelte";
+ import Upload from "./routes/Upload.svelte";
 </script>
 
 <Router>
@@ -25,6 +26,7 @@
  <Route path="/"><Home /></Route>
  <Route path="/search"><Search /></Route>
  <Route path="/login"><Login /></Route>
+ <Route path="/upload"><Upload /></Route>
 
  <!-- all things proteins -->
  <Route path="/protein/:id" let:params
@@ -33,7 +35,7 @@
  <Route path="/protein/edit/:id" let:params
  ><Edit urlId={params.id} /></Route
  >
- <Route path="/upload"><Upload /></Route>
+ <Route path="/upload/protein"><UploadProtein /></Route>
  <Route path="/align/:a/:b" let:params
  ><Align proteinA={params.a} proteinB={params.b} /></Route
  >

frontend/src/app.pcss

@@ -119,5 +119,11 @@ button:focus:not(:focus-visible) {
  white-space: nowrap;
 }
 
+.large-text {
+ font-size: 2.45rem;
+ font-weight: 500;
+ color: var(--primary-700);
+}
+
 @tailwind components;
 @tailwind utilities;

frontend/src/lib/Header.svelte

@@ -7,9 +7,11 @@
  SearchOutline,
  NewspapperSolid,
  UploadSolid,
+ SearchSolid,
  } from "flowbite-svelte-icons";
  import { user } from "./stores/user";
  import Cookies from "js-cookie";
+ import ProteinIcon from "../lib/ProteinIcon.svelte";
 
  // Checking if the user has a cookie.
  // If they do, set user status for the whole site.
@@ -28,8 +30,8 @@
  </a>
  </div>
  <div class="nav">
- <a href="/search" class="flex items-center gap-1"
- ><SearchOutline size="lg" />Search</a
+ <a href="/search" class="flex items-center"
+ ><ProteinIcon width={35} height={35} />Proteins</a
  >
  <a href="/articles" class="flex items-center gap-1">
  <NewspapperSolid size="lg" />Articles</a

frontend/src/lib/ProteinIcon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+ export let width = 100;
+ export let height = 100;
+ export let color = "var(--primary-700)";
+</script>
+
+<svg
+ {width}
+ {height}
+ viewBox="0 0 100 100"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+>
+ <path
+ d="M80.51 52.5109C80.24 52.0109 79.72 51.6909 79.15 51.6909L76.53 51.6709V29.0109C76.53 28.1609 75.84 27.4609 74.98 27.4609H72.18C72.23 26.3709 72.81 24.6009 73.44 22.7209C74.75 18.7709 76.23 14.2909 74.7 11.3909C74.09 10.2309 73.05 9.44094 71.62 9.03094C71.21 8.91094 70.79 9.15094 70.67 9.56094C70.55 9.97094 70.79 10.3909 71.2 10.5109C72.23 10.8009 72.93 11.3309 73.35 12.1109C74.58 14.4409 73.15 18.7709 71.99 22.2509C71.3 24.3509 70.7 26.1609 70.65 27.4709H67.87C67.02 27.4709 66.32 28.1609 66.32 29.0209L66.3 51.7009H63.7C63.13 51.7009 62.61 52.0109 62.34 52.5209C62.07 53.0209 62.1 53.6309 62.42 54.1109L70.14 65.6909C70.27 65.8809 70.43 66.0309 70.62 66.1409C70.5 70.0109 69.51 72.9709 67.72 74.7209C66.07 76.3209 64.11 76.6209 62.76 76.5809C55.7 76.4009 54.21 69.6009 53.9 66.6709H57.4C57.82 66.6709 58.16 66.3309 58.16 65.9109V42.4509H62.24C62.52 42.4509 62.78 42.2909 62.91 42.0509C63.04 41.8009 63.03 41.5009 62.87 41.2609L53.82 27.6909C54.16 20.9209 54.15 15.0809 51.16 11.8409C49.63 10.1909 47.5 9.34094 44.63 9.26094C40.1 9.13094 31.9 9.50094 27.79 13.4609C26.16 15.0309 25.33 17.0009 25.31 19.3309L25.33 23.1909C25.36 25.3209 28.65 26.1109 32.45 27.0409C32.93 27.1609 33.42 27.2809 33.9 27.4009C33.42 27.5209 32.93 27.6409 32.45 27.7609C28.8 28.6409 25.63 29.4109 25.35 31.3609C25.32 31.4409 25.31 31.5309 25.31 31.6209V33.5409V35.4709C25.31 35.5609 25.32 35.6409 25.35 35.7209C25.61 37.6709 28.79 38.4509 32.45 39.3309C33.25 39.5309 34.07 39.7209 34.84 39.9309C34.08 40.1409 33.26 40.3409 32.45 40.5309C28.98 41.3709 25.94 42.1109 25.41 43.8909C25.34 44.0009 25.3 44.1409 25.31 44.2809V46.2509V48.2309C25.31 48.3509 25.34 48.4709 25.39 48.5709C25.84 50.3809 28.92 51.1309 32.45 51.9809C32.97 52.1109 33.5 52.2409 34.02 52.3709C33.5 52.5009 32.97 52.6309 32.45 52.7609C28.98 53.6009 25.94 54.3409 25.41 56.1209C25.34 56.2409 25.3 56.3709 25.31 56.5109V58.4809V60.4609C25.31 60.5809 25.34 60.7009 25.39 60.8009C25.83 62.6109 28.92 63.3609 32.45 64.2109C32.93 64.3309 33.42 64.4509 33.9 64.5709C33.42 64.6909 32.93 64.8109 32.45 64.9309C28.8 65.8109 25.63 66.5809 25.35 68.5309C25.32 68.6109 25.31 68.7009 25.31 68.7909V70.7109V72.6309C25.31 72.7209 25.32 72.8009 25.35 72.8809C25.61 74.8409 28.79 75.6109 32.45 76.4909C34.42 76.9709 37.57 77.7309 38.26 78.5609C39 81.4409 38.75 83.7009 37.53 85.2809C35.6 87.7709 31.67 88.0409 30.08 88.0409C25.74 88.0409 22.91 88.9609 21.66 90.7809C20.54 92.4109 21.18 94.1109 21.2 94.1809C21.32 94.4809 21.6 94.6709 21.91 94.6709C22 94.6709 22.09 94.6509 22.18 94.6209C22.57 94.4709 22.77 94.0309 22.63 93.6409C22.61 93.6009 22.26 92.5909 22.93 91.6309C23.59 90.6909 25.36 89.5809 30.07 89.5809C32.34 89.5809 36.47 89.1409 38.73 86.2309C40.14 84.4109 40.52 81.9709 39.9 78.9709C39.9 78.9409 39.92 78.9109 39.92 78.8709L39.9 75.0109C39.87 72.8809 36.58 72.0909 32.78 71.1609C32.18 71.0209 31.58 70.8709 31 70.7209C31.59 70.5709 32.19 70.4209 32.79 70.2809C36.22 69.4509 39.23 68.7209 39.81 67.0109C39.89 66.8909 39.93 66.7409 39.93 66.5909V64.5909V62.5809C39.93 62.4309 39.89 62.2909 39.81 62.1809C39.25 60.4609 36.23 59.7309 32.78 58.8909C32.26 58.7609 31.73 58.6409 31.21 58.5009C31.73 58.3709 32.26 58.2409 32.78 58.1109C36.24 57.2709 39.28 56.5309 39.81 54.7609C39.88 54.6409 39.92 54.5109 39.92 54.3609V52.3909V50.4109C39.92 50.2909 39.89 50.1709 39.84 50.0709C39.4 48.2609 36.31 47.5109 32.78 46.6509C32.26 46.5209 31.73 46.3909 31.21 46.2609C31.73 46.1309 32.26 46.0009 32.78 45.8709C36.58 44.9509 39.87 44.1509 39.9 42.0209V41.8809C39.92 41.8209 39.92 41.7509 39.92 41.6909V39.9309V38.1609C39.92 38.0909 39.92 38.0309 39.9 37.9709V37.8309C39.87 35.7009 36.58 34.9109 32.78 33.9809C32.18 33.8409 31.58 33.6909 30.99 33.5409C31.57 33.3909 32.18 33.2409 32.78 33.1009C36.21 32.2709 39.22 31.5409 39.8 29.8309C39.88 29.7109 39.92 29.5609 39.92 29.4109V27.4109V25.4009C39.92 25.2509 39.88 25.1109 39.8 25.0009C39.24 23.2809 36.22 22.5509 32.77 21.7109C30.55 21.1709 26.84 20.2709 26.82 19.3309C26.84 17.4109 27.5 15.8509 28.83 14.5609C32.53 10.9909 40.28 10.6609 44.56 10.7909C47 10.8609 48.78 11.5409 50.01 12.8809C52.6 15.6909 52.59 21.2309 52.26 27.6709L43.2 41.2609C43.04 41.4909 43.03 41.8009 43.16 42.0509C43.29 42.3009 43.55 42.4509 43.83 42.4509H47.91V65.9109C47.91 66.3309 48.25 66.6709 48.68 66.6709H52.33C52.68 69.8809 54.38 77.8909 62.67 78.1009C62.75 78.1009 62.84 78.1009 62.92 78.1009C65.18 78.1009 67.19 77.3109 68.74 75.8009C70.85 73.7409 71.98 70.5009 72.1 66.1809C72.32 66.0609 72.52 65.8909 72.67 65.6709L80.39 54.0909C80.71 53.6109 80.74 53.0109 80.47 52.5009L80.51 52.5109Z"
+ fill={color}
+ />
+</svg>

frontend/src/routes/Upload.svelte

@@ -1,150 +1,68 @@
 <script lang="ts">
+ /* Put stuff here */
+
  import {
- screenshotMolstar,
- defaultInitParams,
- } from "../lib/venomeMolstarUtils";
- import { Backend, UploadError, setToken } from "../lib/backend";
- import {
- Fileupload,
- Button,
- Input,
- Label,
- Helper,
- Select,
- } from "flowbite-svelte";
+ CirclePlusSolid,
+ PlusSolid,
+ UploadSolid,
+ } from "flowbite-svelte-icons";
  import { navigate } from "svelte-routing";
- import { fileToString, formatProteinName } from "../lib/format";
- import ArticleEditor from "../lib/ArticleEditor.svelte";
- import { onMount } from "svelte";
- import Cookies from "js-cookie";
- import { user } from "../lib/stores/user";
-
- let species: string[] | null;
- let selectedSpecies: string = "unknown";
-
- const authToken = Cookies.get("auth");
- onMount(async () => {
- if (!$user.loggedIn) {
- alert(
- "You are not logged in. You are being redirected to home. TODO: Make this better."
- );
- navigate("/");
- }
- species = await Backend.searchSpecies();
- });
-
- let name: string = "";
- let description: string = "";
- let content: string = "";
- let files: FileList | undefined; // bind:files on the Fileupload
- let uploadError: UploadError | undefined;
- let refs = "";
- $: file = files ? files[0] : undefined; // we're just concerned with one file
 </script>
 
-<svelte:head>
- <title>Venome Upload</title>
-</svelte:head>
-
 <section class="p-5">
- <div class="w-500 flex flex-col gap-5">
- <div>
- <Label
- color={uploadError ? "red" : undefined}
- for="protein-name"
- class="block mb-2">Protein Name *</Label
- >
- <Input
- bind:value={name}
- color={uploadError ? "red" : "base"}
- style="width: 300px"
- id="protein-name"
- placeholder="Name"
- />
- {#if uploadError && uploadError === UploadError.NAME_NOT_UNIQUE}
- <Helper class="mt-2" color="red"
- >This name already exists, please create a unique name and
- resubmit</Helper
- >
- {/if}
- </div>
-
- <div>
- <Label for="protein-desc" class="block mb-2"
- >Protein Description</Label
- >
- <Input
- bind:value={description}
- style="width: 600px"
- id="protein-desc"
- placeholder="Description"
- />
- </div>
-
- <div class="flex gap-5 mb-2">
+ <div class="large-text">Upload</div>
+ <br />
+ <div class="flex gap-5">
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
+ <div class="option" on:click={() => navigate("upload/protein")}>
+ <div class="big-text flex gap-1 items-center">
+ <UploadSolid size="lg" /> Upload a new Protein
+ </div>
  <div>
- <Label for="species-select" class="mb-2">Select a Species</Label
+ If you want to upload a new .pdb protein to Venome, <b
+ >Click here.</b
  >
- {#if species}
- <Select
- id="species-select"
- items={species.map((s) => ({ name: s, value: s }))}
- bind:value={selectedSpecies}
- />
- {:else}
- <Helper color="red">Error loading species</Helper>
- {/if}
  </div>
  </div>
-
- <div>
- <ArticleEditor bind:content bind:refs />
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
+ <div class="option" on:click={() => navigate("upload/article")}>
+ <div class="big-text flex gap-1 items-center">
+ <CirclePlusSolid size="lg" /> Create a new Article
+ </div>
+ <div>
+ If you want to create a new article, <b>Click here</b>.
+ </div>
  </div>
+ </div>
+</section>
 
- <div>
- <Label for="file-upload" class="mb-2">Upload a PDB File *</Label>
- <Fileupload id="file-upload" class="w-100" bind:files />
- </div>
- <div>
- <Button
- on:click={async () => {
- if (file === undefined || name === "") return; // no file selected
+<style>
+ /* put stuff here */
+ .option {
+ width: 400px;
+ height: 200px;
+ --border-opacity: 0.2;
+ outline: hsla(0, 0%, 0%, var(--border-opacity)) 1px solid;
+ border-radius: 5px;
+ padding: 15px;
+ /* display: flex; */
+ /* justify-content: center;
+ align-items: center; */
+ transition: all 0.2s ease-in-out;
+ }
 
- const pdbFileStr = await fileToString(file);
- try {
- setToken();
- const err = await Backend.uploadProteinEntry({
- name,
- description,
- pdbFileStr,
- content,
- refs,
- speciesName: selectedSpecies,
- });
- if (err) {
- uploadError = err;
- console.log(uploadError);
- } else {
- // success, we can also upload the png thumbnail
- const dbProteinNameFormat = formatProteinName(name);
- const b64 = await screenshotMolstar(
- defaultInitParams(dbProteinNameFormat)
- );
- await Backend.uploadProteinPng({
- base64Encoding: b64,
- proteinName: dbProteinNameFormat,
- });
+ .big-text {
+ font-size: 30px;
+ color: var(--primary-700);
+ }
 
- // then go to its new protein page
- navigate(`/protein/${dbProteinNameFormat}`);
- }
- } catch (e) {
- console.log(e);
- }
- }}
- disabled={file === undefined || name === ""}
- >Upload and Publish Protein</Button
- >
- </div>
- </div>
-</section>
+ .option:hover {
+ transform: scale(1.02);
+ box-shadow: 0 1px 2px 2px #00000010;
+ background-color: var(--primary-100);
+ --border-opacity: 0.4;
+ cursor: pointer;
+ }
+</style>