diff --git a/frontend/src/lib/venomeMolstarUtils.ts b/frontend/src/lib/venomeMolstarUtils.ts
index 81e5030f..546f5ef0 100644
--- a/frontend/src/lib/venomeMolstarUtils.ts
+++ b/frontend/src/lib/venomeMolstarUtils.ts
@@ -141,8 +141,17 @@ export function pLDDTToAlphaFoldResidueColors(pLDDT: number[]): ResidueColor[] {
export function pLDDTToResidueColors(pLDDT: number[]): ResidueColor[] {
const interpolate = d3.interpolateSpectral;
const colors = pLDDT.map((d) => interpolate(d / 100));
- return colors.map((c) => {
- const rgb = d3.color(c)!.rgb()!;
- return { r: rgb.r, g: rgb.g, b: rgb.b };
- });
+ return colors.map(jsColorToResidueColor);
+}
+
+export function jsColorToResidueColor(color: string): ResidueColor {
+ const rgb = d3.color(color)!.rgb()!;
+ return { r: rgb.r, g: rgb.g, b: rgb.b };
+}
+
+export function colorEntireChain(
+ color: ResidueColor,
+ numResiduesInChain: number
+) {
+ return new Array(numResiduesInChain).fill(color);
}
diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index 38cbd085..21334245 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -4,14 +4,18 @@
import BigNavLink from "../lib/BigNavLink.svelte";
import Molstar from "../lib/Molstar.svelte";
import ProteinLinkCard from "../lib/ProteinLinkCard.svelte";
- import { colorScheme } from "../lib/venomeMolstarUtils";
- import { Card } from "flowbite-svelte";
+ import {
+ colorEntireChain,
+ colorScheme,
+ jsColorToResidueColor,
+ } from "../lib/venomeMolstarUtils";
import EntryCard from "../lib/EntryCard.svelte";
+ import * as d3 from "d3";
const quickLinks = [
{
title: "Search for Venom Proteins",
- desc: "Search over 400 proteins parasitoid wasp venom proteins using filtering or search.",
+ desc: "Search over 400 proteins parasitoid wasp venom proteins using filtering or search. Sneak peak below ↓.",
href: "/search",
},
{
@@ -31,10 +35,20 @@
},
];
- let randomProtein: ProteinEntry;
+ const numRandomProteins = 4;
+ const homeColorScheme = [
+ colorScheme[0],
+ colorScheme[1],
+ d3.schemeSet1[1],
+ d3.schemeSet1[0],
+ ]; // add more colors here if you increase numRandomProteins
+ let randomProteins: ProteinEntry[] = new Array(numRandomProteins).fill(
+ undefined
+ );
onMount(async () => {
- randomProtein = await Backend.getRandomProtein();
- console.log(randomProtein);
+ for (let i = 0; i < randomProteins.length; i++) {
+ randomProteins[i] = await Backend.getRandomProtein();
+ }
});
@@ -69,22 +83,17 @@
- {#if randomProtein}
-