From e7812fa0bc349f26e5191aad7ee1e76b93633a1a Mon Sep 17 00:00:00 2001 From: slackline Date: Fri, 17 May 2024 17:49:47 +0100 Subject: [PATCH] wip(smithereens): Dialog box now populated from index.json Progress! After some head scratching and ultimately renaming the building block components box is now populated with species names from the `index.json` that are static files for Fragments and Muropeptides. The `Build database` button is greyed out but that is something to work on next week. --- web/src/lib/smithereens.ts | 22 ++++++++------- web/src/routes/+page.svelte | 27 ++++++++++--------- .../routes/BuiltinFragmentsSelector.svelte | 4 +-- .../routes/BuiltinMuropeptidesSelector.svelte | 4 +-- web/src/routes/FragmentsDataUploader.svelte | 6 ++--- .../routes/MuropeptidesDataUploader.svelte | 6 ++--- 6 files changed, 37 insertions(+), 32 deletions(-) diff --git a/web/src/lib/smithereens.ts b/web/src/lib/smithereens.ts index ae9285eb..671d24a5 100644 --- a/web/src/lib/smithereens.ts +++ b/web/src/lib/smithereens.ts @@ -10,19 +10,21 @@ const smithereens: Smithereens = { ...defaultSmithereens }; (async () => { - const fraglibrary = await fetch('./data/reference_masses/index.json'); - const FragmentsLibraryIndex: any = JSON.parse(fraglibrary.toString()); - const murolibrary = await fetch('./data/target_structures/index.json'); - const MuropeptidesLibraryIndex = JSON.parse(murolibrary.toString()); - onMount(() => { - postMessage({ + const fraglibrary = await fetch('/data/reference_masses/index.json'); + const fragmentsLibraryIndex: any = JSON.parse(await fraglibrary.text()); + const murolibrary = await fetch('/data/target_structures/index.json'); + const muropeptidesLibraryIndex = JSON.parse(await murolibrary.text()); + $: console.log(`[smithereens.ts] FragmentsLibraryIndex : `); + console.log(fragmentsLibraryIndex); + $: console.log(`[smithereens.ts] MuropeptidesLibraryIndex : `); + console.log(muropeptidesLibraryIndex); + postMessage({ type: 'Ready', content: { - FragmentsLibraryIndex, - MuropeptidesLibraryIndex + fragmentsLibraryIndex, + muropeptidesLibraryIndex } - }) - }) + }); })(); // What type should 'proxy' be? diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index 1dc33e48..487c7154 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -47,6 +47,7 @@ let smithereens: Smithereens = { ...defaultSmithereens }; let loading = true; + let loadingSmithereens = true; let processingPGFinder = false; let processingSmithereens = false; let ready = false; @@ -55,8 +56,8 @@ let pgfinderVersion: string; let allowedModifications: Array; let massLibraries: MassLibraryIndex; - let fragmentsLibraries: FragmentsLibraryIndex; - let muropeptidesLibraries: MuropeptidesLibraryIndex; + let fragmentsLibraryIndex: FragmentsLibraryIndex; + let muropeptidesLibraryIndex: MuropeptidesLibraryIndex; // Start PGFinder let pgfinder: Worker | undefined; @@ -91,10 +92,12 @@ let smithereensWorker: Worker | undefined; onMount(() => { smithereensWorker = new Smithereens(); - smithereensWorker.onmessage = ({ data: { type, constant } }) => { + smithereensWorker.onmessage = ({ data: { type, content } }) => { if (type === 'Ready') { - fragmentsLibrary = content.fragmentsLibrariesIndex; - muropeptidesLibrary = content.muropeptidesLibrariesIndex; + fragmentsLibraryIndex = content.fragmentsLibraryIndex; + muropeptidesLibraryIndex = content.muropeptidesLibraryIndex; + console.log(fragmentsLibraryIndex) + console.log(muropeptidesLibraryIndex) loadingSmithereens = false; } else if (type === 'Result') { processingSmithereens = false; @@ -113,7 +116,7 @@ } }; init().then(() => { - console.log("@@@ smithereens wasm loaded!"); + console.log("[+page.svelte] smithereens wasm loaded!"); }) // 2024-05-01 - How to run the loadlibraries function defined in pgfinder.ts which calls the // shim.load_libraries() Python function so we load the masses and muropeptides? @@ -122,10 +125,10 @@ processingSmithereens = false; }) // Reactively compute if Smithereens is ready - $: SmithereensReady = !loading && !processingSmithereens && smithereensWorker.fragmentsLibrary !== undefined && smithereensWorker.muropeptidesLibrary !== undefined; - $: console.log(`SmithereensReady : ${SmithereensReady}`); - // $: console.log(`FragmentsLibraryIndex : ${smithereensWorker.fragmentsLibrary}`); - //$ : console.log(`MuropeptidesLibraryIndex : ${smithereensWorker.muropeptidesLibrary}`); + $: SmithereensReady = !loadingSmithereens && !processingSmithereens && smithereensWorker.fragmentsLibrary !== undefined && smithereensWorker.muropeptidesLibrary !== undefined; + $: console.log(`[+page.svelte] SmithereensReady : ${SmithereensReady}`); + // $: console.log(`smithereensWorker.fragmentsLibraryIndex : ${smithereensWorker.fragmentsLibraryIndex}`); + // $: console.log(`smithereensWorker.muropeptidesLibraryIndex : ${smithereensWorker.muropeptidesLibrary}`); // Send data to Smithereens for processing function runSmithereensAnalysis() { @@ -177,10 +180,10 @@
- +
- + diff --git a/web/src/routes/BuiltinFragmentsSelector.svelte b/web/src/routes/BuiltinFragmentsSelector.svelte index e613a629..382d5117 100644 --- a/web/src/routes/BuiltinFragmentsSelector.svelte +++ b/web/src/routes/BuiltinFragmentsSelector.svelte @@ -2,10 +2,10 @@ import { Accordion, AccordionItem, ListBox, ListBoxItem } from '@skeletonlabs/skeleton'; import Tooltip from './Tooltip.svelte'; export let value: VirtFile | undefined; - export let fragmentsLibraries: FragmentsLibraryIndex; + export let fragmentsLibraryIndex: FragmentsLibraryIndex; -{#each Object.entries(fragmentsLibraries) as [speciesFragments, librariesFragments], speciesIdFragments} +{#each Object.entries(fragmentsLibraryIndex) as [speciesFragments, librariesFragments], speciesIdFragments}