wip: Update BioLucida instructional text

fairdataihub · Aug 21, 2024 · c2eb9e9 · c2eb9e9
1 parent ff78cc3
commit c2eb9e9
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 33 deletions.
diff --git a/src/renderer/src/components/pages/BioLucidaImageListSelect/index.jsx b/src/renderer/src/components/pages/BioLucidaImageListSelect/index.jsx
@@ -56,7 +56,10 @@ const BioLucidaImageListSelectPage = () => {
   };
 
   const handleSelectAllImagesButtonClick = () => {
-    console.log("Select all images");
+    clearImagesSelectedToBeUploadedToBioLucida();
+    confirmedMicroscopyImages.forEach((image) => {
+      addBioLucidaImage(image);
+    });
   };
 
   const handleClearAllSelectedImagesButtonClick = () => {
@@ -68,18 +71,28 @@ const BioLucidaImageListSelectPage = () => {
   );
 
   console.log("allImagesSelectedToBeUploadedToBioLucida", allImagesSelectedToBeUploadedToBioLucida);
+  const bioLucidaExplanationText = `
+    BioLucida is a software platform developed by MBF Bioscience for managing, visualizing, and sharing high-resolution microscopy images.
+    Before your dataset is uploaded to Pennsieve at the end of the End-to-End process, the images you select in the interface below will be
+    uploaded to BioLucida allowing other researchers to view them.
+  `;
   const pageDescriptionArray =
     confirmedMicroscopyImages.length > 50
       ? [
-          "Select the microscopy images you would like to upload to BioLucida (Up to 50). The selected images will be uploaded to BioLucida at the end of the guided process.",
+          bioLucidaExplanationText,
+          "Select the microscopy images you would like SODA to upload to BioLucida (Up to 50).",
           "*NOTE*If you do not have a preference on which images to upload, you can select 50 random images by clicking the 'Select 50 random images' button below and SODA will choose 50 for you.",
         ]
       : [
-          "Select the microscopy images you would like to upload to BioLucida. The selected images will be uploaded to BioLucida at the end of the guided process",
+          bioLucidaExplanationText,
+          "Select the microscopy images you would like SODA to upload to BioLucida below.",
           "*NOTE*To have all images uploaded to BioLucida, click the 'Select all images' button below.",
         ];
 
   console.log(path.join(guidedThumbnailsPath, `_thumbnail.jpg`));
+  console.log("allImagesSelectedToBeUploadedToBioLucida", allImagesSelectedToBeUploadedToBioLucida);
+  console.log("confirmedMicroscopyImages <= 50", confirmedMicroscopyImages);
+
   return (
     <GuidedModePage
       pageHeader="BioLucida Image Selection"
@@ -90,7 +103,7 @@ const BioLucidaImageListSelectPage = () => {
           {confirmedMicroscopyImages.length > 50 && (
             <Button onClick={handleSelectRandomImagesButtonClick}>Select 50 random images</Button>
           )}
-          {!allImagesSelectedToBeUploadedToBioLucida && confirmedMicroscopyImages <= 50 && (
+          {!allImagesSelectedToBeUploadedToBioLucida && confirmedMicroscopyImages.length <= 50 && (
             <Button onClick={handleSelectAllImagesButtonClick}>Select all images</Button>
           )}
           {bioLucidaImages.length > 0 && (
@@ -196,7 +209,9 @@ const BioLucidaImageListSelectPage = () => {
             }}
           >
             <SodaGreenPaper>
-              <Text>Images selected: {bioLucidaImages.length}/50</Text>
+              <Text>
+                Images selected: {bioLucidaImages.length}/{confirmedMicroscopyImages.length}
+              </Text>
             </SodaGreenPaper>
           </Affix>
         )}

diff --git a/src/renderer/src/scripts/guided-mode/guided-curate-dataset.js b/src/renderer/src/scripts/guided-mode/guided-curate-dataset.js
@@ -3196,6 +3196,9 @@ const guidedTransitionToHome = () => {
   }
   window.CURRENT_PAGE = undefined;
 
+  // Set the guided mode page to null in the zustand store
+  setGuidedModePage(null);
+
   //Hide guided headers and footers
   document.getElementById("guided-header-div").classList.add("hidden");
   $("#guided-footer-div").addClass("hidden");
@@ -5475,6 +5478,7 @@ window.openPage = async (targetPageID) => {
     const datasetName = window.sodaJSONObj?.["digital-metadata"]?.["name"];
     const nextButton = document.getElementById("guided-next-button");
     const nextButtonSpans = document.querySelectorAll(".next-button-span");
+    console.log("nextButtonSpans", nextButtonSpans);
 
     if (!datasetName) {
       // set the span inside of nextButton to "Continue"
@@ -5504,7 +5508,7 @@ window.openPage = async (targetPageID) => {
       } else {
       }
     }
-
+    console.log("random target page id", targetPageID);
     if (targetPageID === "guided-select-starting-point-tab") {
       // Hide the pennsieve dataset import progress circle
       const importProgressCircle = document.querySelector(
@@ -6533,6 +6537,7 @@ window.openPage = async (targetPageID) => {
     }
 
     if (targetPageID === "guided-pennsieve-intro-tab") {
+      console.log("targetPageID:", targetPageID);
       const elementsToShowWhenLoggedInToPennsieve =
         document.querySelectorAll(".show-when-logged-in");
       const elementsToShowWhenNotLoggedInToPennsieve =
@@ -17338,6 +17343,7 @@ $("#guided-next-button").on("click", async function () {
     //if more tabs in parent tab, go to next tab and update capsule
     let targetPage = getNextPageNotSkipped(window.CURRENT_PAGE.id);
     let targetPageID = targetPage.id;
+    console.log("targetPageID", targetPageID);
 
     await window.openPage(targetPageID);
   } catch (error) {

diff --git a/src/renderer/src/scripts/others/renderer.js b/src/renderer/src/scripts/others/renderer.js
@@ -5114,6 +5114,9 @@ window.handleSelectedBannerImage = async (path, curationMode) => {
 
 //// helper functions for hiding/showing context menus
 const showmenu = (ev, category, deleted = false) => {
+  console.log("ev", ev);
+  console.log("category", category);
+  console.log("deleted", deleted);
   //stop the real right click menu
   let guidedModeFileExporer = false;
   let activePages = Array.from(document.querySelectorAll(".is-shown"));
@@ -5444,7 +5447,14 @@ $(document).bind("contextmenu", function (event) {
     if (event.target.classList.contains("deleted_file")) {
       showmenu(event, "file", true);
     } else {
-      showmenu(event, "file");
+      if (event.target.classList.contains("futureMfpConversion")) {
+        swalShowInfo(
+          "File Modification Unavailable",
+          "The image you tried to modify is only a placeholder for a future MicroFile+ image conversion and does not yet exist."
+        );
+      } else {
+        showmenu(event, "file");
+      }
     }
     window.hideMenu("folder", window.menuFolder, window.menuHighLevelFolders, window.menuFile);
     window.hideMenu(

diff --git a/src/renderer/src/scripts/utils/swal-utils.js b/src/renderer/src/scripts/utils/swal-utils.js
@@ -50,7 +50,7 @@ export const swalShowError = async (title, errorText) => {
 export const swalShowInfo = async (title, infoText) => {
   await Swal.fire({
     title: title,
-    html: infoText,
+    html: infoText ? `<p class="text-left">${infoText}</p>` : "",
     icon: "info",
     width: 800,
     heightAuto: false,

diff --git a/src/renderer/src/sections/guided_mode/guided_curate_dataset.html b/src/renderer/src/sections/guided_mode/guided_curate_dataset.html
@@ -4695,31 +4695,6 @@ <h2 class="guided--text-click-continue">
           </div>
         </div>
 
-        <div class="guided--page" id="guided-pennsieve-metadata-intro-tab" data-page-name="Intro">
-          <h1 class="text-sub-step-title">Pennsieve metadata Introduction</h1>
-          <div class="guided--section">
-            <p class="help-text">
-              The SPARC guidelines require all datasets to be uploaded to Pennsieve, a cloud-based
-              solution for managing and sharing scientific datasets. As you proceed, you will be
-              guided through various steps, such as adding a banner image and selecting a license,
-              which facilitate the discovery and comprehension of your dataset by other users. Note
-              that some information will be automatically populated in Pennsieve based on the
-              details you provided earlier in the process.
-            </p>
-          </div>
-          <div class="guided--section">
-            <div
-              id="guided-dataset-structure-intro-lottie"
-              class="lottieAnimationContainer guided--container-lottie-standard"
-            ></div>
-          </div>
-          <div class="guided--section">
-            <h2 class="guided--text-click-continue">
-              Click "<span class="next-button-span"></span>" to start adding Pennsieve Metadata.
-            </h2>
-          </div>
-        </div>
-
         <div id="guided-pennsieve-intro-tab" class="guided--page" data-page-name="Pennsieve log in">
           <div class="guided--section">
             <h1 class="text-sub-step-title">Pennsieve metadata</h1>