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.
Mesnage-Org · May 17, 2024 · e7812fa · e7812fa
1 parent fdd7210
commit e7812fa
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 32 deletions.
diff --git 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
@@ -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<string>;
 	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 @@
         <!-- Smithereens -->
 		<div class="card m-2 w-[20rem] {uiWidth} max-w-[90%] {animateWidth}">
 			<section class="flex flex-col space-y-4 justify-center p-4">
-				<FragmentsDataUploader bind:value={pyio.fragmentsLibrary} {fragmentsLibraries} />
+				<FragmentsDataUploader bind:value={smithereens.fragmentsLibraryIndex} {fragmentsLibraryIndex} />
 			</section>
 			<section class="flex flex-col space-y-4 justify-center p-4">
-				<MuropeptidesDataUploader bind:value={pyio.muropeptidesLibrary} {muropeptidesLibraries} />
+				<MuropeptidesDataUploader bind:value={smithereens.muropeptidesLibraryIndex} {muropeptidesLibraryIndex} />
 				<button type="button" class="btn variant-filled" on:click={runSmithereensAnalysis} disabled={!SmithereensReady}>
 					Build database
 				</button>

diff --git 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;
 </script>
 
-{#each Object.entries(fragmentsLibraries) as [speciesFragments, librariesFragments], speciesIdFragments}
+{#each Object.entries(fragmentsLibraryIndex) as [speciesFragments, librariesFragments], speciesIdFragments}
     <label>
       <div class="flex items-center">
         <input

diff --git a/web/src/routes/BuiltinMuropeptidesSelector.svelte b/web/src/routes/BuiltinMuropeptidesSelector.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 muropeptidesLibraries: MuropeptidesLibraryIndex;
+	export let muropeptidesLibraryIndex: MuropeptidesLibraryIndex;
 </script>
 
-{#each Object.entries(muropeptidesLibraries) as [speciesMuropeptides, librariesMuropeptides], speciesIdMuropeptides}
+{#each Object.entries(muropeptidesLibraryIndex) as [speciesMuropeptides, librariesMuropeptides], speciesIdMuropeptides}
     <label>
       <div class="flex items-center">
         <input

diff --git a/web/src/routes/FragmentsDataUploader.svelte b/web/src/routes/FragmentsDataUploader.svelte
@@ -3,7 +3,7 @@
     // Need to define these
 	import BuiltinFragmentsSelector from './BuiltinFragmentsSelector.svelte';
 	export let value: VirtFile | undefined;
-    export let fragmentsLibraries: FragmentsLibraryIndex | undefined;
+    export let fragmentsLibraryIndex: FragmentsLibraryIndex | undefined;
 
 	let files: FileList;
 	let customFragmentsLibrary = false;
@@ -35,8 +35,8 @@
 						{/if}
 					</svelte:fragment>
 				</FileDropzone>
-			{:else if fragmentsLibraries !== undefined}
-				<BuiltinFragmentsSelector bind:value {fragmentsLibraries} />
+			{:else if fragmentsLibraryIndex !== undefined}
+				<BuiltinFragmentsSelector bind:value {fragmentsLibraryIndex} />
 			{:else}
 				<div class="flex justify-center">
 					<ProgressRadial />

diff --git a/web/src/routes/MuropeptidesDataUploader.svelte b/web/src/routes/MuropeptidesDataUploader.svelte
@@ -4,7 +4,7 @@
 	import BuiltinFragmentsSelector from './BuiltinFragmentsSelector.svelte';
 	import BuiltinMuropeptidesSelector from './BuiltinMuropeptidesSelector.svelte';
 	export let value: VirtFile | undefined;
-    export let muropeptidesLibraries: MuropeptidesLibraryIndex | undefined;
+    export let muropeptidesLibraryIndex: MuropeptidesLibraryIndex | undefined;
 
 	let files: FileList;
 	let customMuropeptideLibrary = false;
@@ -36,8 +36,8 @@
 						{/if}
 					</svelte:fragment>
 				</FileDropzone>
-			{:else if muropeptidesLibraries !== undefined}
-				<BuiltinMuropeptidesSelector bind:value {muropeptidesLibraries} />
+			{:else if muropeptidesLibraryIndex !== undefined}
+				<BuiltinMuropeptidesSelector bind:value {muropeptidesLibraryIndex} />
 			{:else}
 				<div class="flex justify-center">
 					<ProgressRadial />