File size: 1,869 Bytes
b61753c e965642 7860afc e965642 b61753c e965642 7860afc b61753c e965642 b61753c e965642 b61753c e965642 b61753c e965642 b61753c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<script lang="ts">
import { onMount } from "svelte";
import "./style.css";
export let value: string | null;
export let type: "gallery" | "table";
export let selected = false;
let size: number;
let el: HTMLDivElement;
function set_styles(element: HTMLElement, el_width: number): void {
if (!element || !el_width) return;
el.style.setProperty(
"--local-text-width",
`${el_width < 150 ? el_width : 200}px`
);
el.style.whiteSpace = "unset";
}
onMount(() => {
set_styles(el, size);
});
</script>
<div
bind:clientWidth={size}
bind:this={el}
class:table={type === "table"}
class:gallery={type === "gallery"}
class:selected
class="flex items-center justify-center w-full"
>
<!-- {value ? value : ""} -->
<!-- {JSON.stringify(value)} -->
{#if value}
{#if value["chains"].length > 1}
<b>Input composed of {value["chains"].length} chains </b> <br />
{:else}
<b>Input composed of {value["chains"].length} chain </b><br />
{/if}
<ul>
{#each value["chains"] as val}
{#if ["protein", "DNA", "RNA"].includes(val["class"])}
<li><div>{val["class"]} {val["sequence"].length} residues</div></li>
{/if}
{#if val["class"] == "ligand"}
{#if val["name"] != undefined}
<li><div>Ligand {val["name"]}</div></li>
{:else if val["smiles"] != undefined}
<li><div>Ligand SMILES with {val["smiles"].length} atoms</div></li>
{:else}
<li><div>Ligand</div></li>
{/if}
{/if}
{/each}
</ul>
<ul>
<li>{value["covMods"].length} covalent modifications</li>
</ul>
{/if}
</div>
<style>
.gallery {
padding: var(--size-1) var(--size-2);
}
div {
overflow: hidden;
min-width: var(--local-text-width);
white-space: nowrap;
}
</style>
|