feat(ui): add tool titles

Mesnage-Org · Jul 28, 2024 · 6072657 · 6072657
1 parent 3a77adc
commit 6072657
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 74 deletions.
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -24,7 +24,7 @@
   import LinksAndDownloads from "./LinksAndDownloads.svelte";
   import Ms1Search from "./MS1 Search/MS1 Search.svelte";
   import MassCalculator from "./Mass Calculator/Mass Calculator.svelte";
-  import Fragmenter from "./Fragmenter/Fragmenter.svelte";
+  import FragmentGenerator from "./Fragment Generator/Fragment Generator.svelte";
 
   // Initialize Stores for Drawers and Modals
   initializeStores();
@@ -47,11 +47,13 @@
     <Header {versions} />
   </svelte:fragment>
 
-  <div class="h-full flex flex-col lg:flex-row justify-center items-center">
+  <div
+    class="h-full flex flex-col gap-4 lg:flex-row justify-center items-center"
+  >
     <MassCalculator bind:version={versions.Smithereens} />
     <Ms1Search bind:version={versions.PGFinder} />
     <!-- NOTE: Version is currently tied to that of the `MassCalculator`-->
-    <Fragmenter />
+    <FragmentGenerator />
   </div>
 
   <svelte:fragment slot="footer">

diff --git a/web/src/routes/Fragmenter/Bulk.svelte → ...src/routes/Fragment Generator/Bulk.svelte b/web/src/routes/Fragmenter/Bulk.svelte → ...src/routes/Fragment Generator/Bulk.svelte
diff --git a/web/src/routes/Fragmenter/Fragmenter.svelte → ...gment Generator/Fragment Generator.svelte b/web/src/routes/Fragmenter/Fragmenter.svelte → ...gment Generator/Fragment Generator.svelte
@@ -107,31 +107,33 @@
   $: plural = bulk ? "s" : "";
 </script>
 
-<div class="card m-2 w-[20rem] max-w-[90%]" data-testid="Fragmenter">
-  <section class="flex flex-col items-center p-4">
-    <h5 class="pb-1 h5">Fragment Generator</h5>
-    <TabGroup class="w-full" justify="justify-center">
-      <Tab bind:group={bulk} name="bulk" value={true}>Bulk</Tab>
-      <Tab bind:group={bulk} name="single" value={false}>Single</Tab>
-      <svelte:fragment slot="panel">
-        {#if bulk}
-          <Bulk bind:structures />
-        {:else}
-          <Single bind:structure {validStructure} />
-        {/if}
-      </svelte:fragment>
-    </TabGroup>
+<div class="flex flex-col items-center">
+  <h3 class="pb-1 h3">Fragment Generator</h3>
+  <div class="card m-2 w-[20rem] max-w-[90%]" data-testid="Fragment Generator">
+    <section class="flex flex-col items-center p-4">
+      <TabGroup class="w-full" justify="justify-center">
+        <Tab bind:group={bulk} name="bulk" value={true}>Bulk</Tab>
+        <Tab bind:group={bulk} name="single" value={false}>Single</Tab>
+        <svelte:fragment slot="panel">
+          {#if bulk}
+            <Bulk bind:structures />
+          {:else}
+            <Single bind:structure {validStructure} />
+          {/if}
+        </svelte:fragment>
+      </TabGroup>
 
-    <button
-      type="button"
-      class="btn variant-filled w-full mt-4"
-      on:click={fragment}
-      disabled={!ready}
-    >
-      Fragment Structure{plural}
-    </button>
-    {#if processing}
-      <ProgressBar class="mt-4" />
-    {/if}
-  </section>
+      <button
+        type="button"
+        class="btn variant-filled w-full mt-4"
+        on:click={fragment}
+        disabled={!ready}
+      >
+        Fragment Structure{plural}
+      </button>
+      {#if processing}
+        <ProgressBar class="mt-4" />
+      {/if}
+    </section>
+  </div>
 </div>
diff --git a/web/src/routes/Fragmenter/Single.svelte → ...c/routes/Fragment Generator/Single.svelte b/web/src/routes/Fragmenter/Single.svelte → ...c/routes/Fragment Generator/Single.svelte
diff --git a/web/src/routes/MS1 Search/MS1 Search.svelte b/web/src/routes/MS1 Search/MS1 Search.svelte
@@ -83,35 +83,38 @@
   $: animateWidth = !advancedMode ? "transition-all" : "";
 </script>
 
-<div
-  class="card m-2 w-[20rem] {uiWidth} max-w-[90%] {animateWidth}"
-  data-testid="MS1 Search"
->
-  <section class="flex flex-col space-y-4 p-4">
-    <MsDataUploader bind:value={state.msData} />
+<div class="flex flex-col items-center">
+  <h3 class="pb-1 h3">MS Analysis</h3>
+  <div
+    class="card m-2 w-[20rem] {uiWidth} max-w-[90%] {animateWidth}"
+    data-testid="MS1 Search"
+  >
+    <section class="flex flex-col space-y-4 p-4">
+      <MsDataUploader bind:value={state.msData} />
 
-    <MassDatabaseUploader bind:value={state.massLibrary} {massLibraries} />
+      <MassDatabaseUploader bind:value={state.massLibrary} {massLibraries} />
 
-    <AdvancedOptions
-      bind:enabledModifications={state.enabledModifications}
-      bind:ppmTolerance={state.ppmTolerance}
-      bind:cleanupWindow={state.cleanupWindow}
-      bind:consolidationPpm={state.consolidationPpm}
-      bind:advancedMode
-      {allowedModifications}
-    />
+      <AdvancedOptions
+        bind:enabledModifications={state.enabledModifications}
+        bind:ppmTolerance={state.ppmTolerance}
+        bind:cleanupWindow={state.cleanupWindow}
+        bind:consolidationPpm={state.consolidationPpm}
+        bind:advancedMode
+        {allowedModifications}
+      />
 
-    <button
-      type="button"
-      class="btn variant-filled"
-      on:click={runAnalysis}
-      disabled={!ready}
-    >
-      Run Analysis
-    </button>
+      <button
+        type="button"
+        class="btn variant-filled"
+        on:click={runAnalysis}
+        disabled={!ready}
+      >
+        Run Analysis
+      </button>
 
-    {#if processing}
-      <ProgressBar />
-    {/if}
-  </section>
+      {#if processing}
+        <ProgressBar />
+      {/if}
+    </section>
+  </div>
 </div>
diff --git a/web/src/routes/Mass Calculator/Mass Calculator.svelte b/web/src/routes/Mass Calculator/Mass Calculator.svelte
@@ -96,22 +96,24 @@
   $: ready = !loading && !processing && structures !== undefined;
 </script>
 
-<div class="card m-2 w-[20rem] max-w-[90%]" data-testid="Mass Calculator">
-  <section class="flex flex-col items-center p-4">
-    <h5 class="pb-1 h5">Mass Calculator</h5>
-    <TabGroup class="w-full" justify="justify-center">
-      <Tab bind:group={tab} name="built-in" value={"bulk"}>Bulk</Tab>
-      <Tab bind:group={tab} name="custom" value={"single"}>Single</Tab>
-      <svelte:fragment slot="panel">
-        {#if tab === "bulk"}
-          <Bulk bind:structures buildCommand={runBulk} {ready} />
-        {:else if tab === "single"}
-          <Single bind:structure {validStructure} {mass} />
-        {/if}
-      </svelte:fragment>
-    </TabGroup>
-    {#if processing}
-      <ProgressBar class="mt-4" />
-    {/if}
-  </section>
+<div class="flex flex-col items-center">
+  <h3 class="pb-1 h3">Mass Calculator</h3>
+  <div class="card m-2 w-[20rem] max-w-[90%]" data-testid="Mass Calculator">
+    <section class="flex flex-col items-center p-4">
+      <TabGroup class="w-full" justify="justify-center">
+        <Tab bind:group={tab} name="built-in" value={"bulk"}>Bulk</Tab>
+        <Tab bind:group={tab} name="custom" value={"single"}>Single</Tab>
+        <svelte:fragment slot="panel">
+          {#if tab === "bulk"}
+            <Bulk bind:structures buildCommand={runBulk} {ready} />
+          {:else if tab === "single"}
+            <Single bind:structure {validStructure} {mass} />
+          {/if}
+        </svelte:fragment>
+      </TabGroup>
+      {#if processing}
+        <ProgressBar class="mt-4" />
+      {/if}
+    </section>
+  </div>
 </div>