File size: 3,534 Bytes
b61753c 7860afc b61753c 7860afc b61753c 7860afc b61753c 7860afc b61753c 7860afc b61753c 7860afc 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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<script>
import { createEventDispatcher } from "svelte";
// import "../style.css";
const dispatch = createEventDispatcher();
export let vals = [];
function addNewChain(type) {
dispatch("addNewChain", {
type: type,
});
}
function addCovalentModification() {
dispatch("addCovalentModification");
}
let displayCovMod = false;
// check if vals contains at least one protein and one ligand with sdf set
$: {
displayCovMod =
vals.filter((val) => val.class === "protein" && val.sequence.length > 0)
.length > 0 &&
vals.filter((val) => val.class === "ligand" && val.sdf != "").length > 0;
}
</script>
<div>
<div class="flex justify-center mt-2 gap-2">
<button
class="flex items-center space-x-1 px-2 py-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
on:click={() => {
addNewChain("protein");
}}
>
<svg
data-slot="icon"
fill="none"
stroke-width="1.5"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
<span> Protein</span></button
>
<button
class="flex items-center space-x-1 px-2 py-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
on:click={() => {
addNewChain("DNA");
}}
>
<svg
data-slot="icon"
fill="none"
stroke-width="1.5"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
<span> Nucleic acid</span></button
>
<button
class="flex items-center space-x-1 px-2 py-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
on:click={() => {
addNewChain("ligand");
}}
>
<svg
data-slot="icon"
fill="none"
stroke-width="1.5"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
<span> Small molecule</span></button
>
{#if displayCovMod}
<button
class="flex items-center space-x-2 block rounded-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
on:click={() => {
addCovalentModification();
}}
>
<svg
data-slot="icon"
fill="none"
stroke-width="1.5"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
<span> Covalent modifcation</span></button
>
{/if}
</div>
</div>
|