wip: Updated mfpc progress display

JacobiClark · JacobiClark · commit c6bd4b696693 · 2024-08-12T11:14:35.000-07:00
diff --git a/src/renderer/src/components/renderers/ReactComponentRenderer.jsx b/src/renderer/src/components/renderers/ReactComponentRenderer.jsx
@@ -100,7 +100,9 @@ const componentTypeRenderers = {
     renderComponent(componentSlot, <MicrofilePlusInstallationCheckDisplay {...props} />);
   },
   "process-status-table": (componentSlot) => {
-    const props = { tableId: componentSlot.id };
+    const tableId = componentSlot.id;
+    const tableTitle = componentSlot.getAttribute("data-table-title");
+    const props = { tableId: tableId, tableTitle: tableTitle };
     renderComponent(componentSlot, <ProcessStatusTable {...props} />);
   },
 };
diff --git a/src/renderer/src/components/tables/processStatusTable/index.jsx b/src/renderer/src/components/tables/processStatusTable/index.jsx
@@ -1,56 +1,53 @@
-import { Table, Text, Loader, ScrollArea } from "@mantine/core";
+import { Card, Text, Loader, Progress, Group, Center } from "@mantine/core";
 import { IconCheck } from "@tabler/icons-react";
 import { useEffect, useRef } from "react";
 import useGlobalStore from "../../../stores/globalStore";
 
-const ProcessStatusTable = ({ tableId }) => {
-  const rowData = useGlobalStore((state) => state.processStatusTableData[tableId]) || [];
-  const scrollAreaRef = useRef(null);
+const ProcessStatusTable = ({ tableId, tableTitle }) => {
+  const { currentTask, taskProgress } =
+    useGlobalStore((state) => state.progressElementData[tableId]) || {};
 
-  const progressComponents = {
-    loading: <Loader my="sm" />,
-    success: <IconCheck color="green" stroke={3} />,
-  };
-
-  const generateProgressDisplay = (progress) =>
-    progressComponents[progress] || <Text>{progress}</Text>;
-
-  const rows = rowData.map((row) => (
-    <tr key={row.rowId}>
-      <td>
-        <Text>{row.status}</Text>
-      </td>
-      <td style={{ textAlign: "center" }}>{generateProgressDisplay(row.progress)}</td>
-    </tr>
-  ));
+  console.log("currentTask", currentTask);
+  console.log("taskProgress", taskProgress);
 
-  useEffect(() => {
-    // Scroll to the bottom of the table when rowData changes
-    if (scrollAreaRef.current) {
-      scrollAreaRef.current.scrollTo({
-        top: scrollAreaRef.current.scrollHeight,
-        behavior: "smooth",
-      });
-    }
-  }, [rowData]);
+  const isNumberBetween0and100 = (num) => {
+    return num > 0 && num < 100;
+  };
 
+  console.log("isNumberBetween0and100", isNumberBetween0and100(taskProgress));
   return (
-    <Table stickyHeader withTableBorder captionSide="top">
-      <Table.Caption>
-        <Text fw={700} size="xl">
-          Process Status Table
+    <Card
+      withBorder
+      radius="md"
+      padding="lg"
+      bg="var(--mantine-color-body)"
+      style={{ width: "100%" }}
+    >
+      <Center mt="0px">
+        <Text size="lg" fw={700}>
+          {tableTitle}
+        </Text>
+      </Center>
+      <Group>
+        <Text size="lg" fw={500}>
+          Task Progress:
         </Text>
-      </Table.Caption>
-      <ScrollArea h={400} viewportRef={scrollAreaRef} style={{ width: "100%" }}>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Status</Table.Th>
-            <Table.Th style={{ textAlign: "center" }}>Progress</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>{rows}</Table.Tbody>
-      </ScrollArea>
-    </Table>
+      </Group>
+      <Progress
+        value={taskProgress}
+        mt="md"
+        size="lg"
+        radius="xl"
+        color={taskProgress === 0 ? "gray" : "blue"}
+        animated={isNumberBetween0and100(taskProgress)}
+      />
+      <Text size="lg" fw={500}>
+        {taskProgress}% complete
+      </Text>
+      <Text size="md" fw={300}>
+        {currentTask}
+      </Text>
+    </Card>
   );
 };
 
diff --git a/src/renderer/src/scripts/advanced-features/compare-local-remote-dataset.js b/src/renderer/src/scripts/advanced-features/compare-local-remote-dataset.js
@@ -4,7 +4,7 @@ while (!window.baseHtmlLoaded) {
 }
 
 import api from "../others/api/api";
-import { addRows, removeRows } from "../../stores/slices/tableDataSlice";
+import { addRows, removeRows } from "../../stores/slices/tableDataSlice.js";
 import { clientError } from "../others/http-error-handler/error-handler";
 import { swalConfirmAction, swalShowError, swalShowInfo } from "../utils/swal-utils";
 
diff --git a/src/renderer/src/scripts/guided-mode/guided-curate-dataset.js b/src/renderer/src/scripts/guided-mode/guided-curate-dataset.js
@@ -53,9 +53,9 @@ import {
 import { clearBioLucidaCredentials } from "../../stores/slices/authSlice";
 import { setMicroFilePlusInstalledStatus } from "../../stores/slices/backgroundServicesSlice";
 import {
-  addOrUpdateProcessStatusRow,
-  removeProcessStatusRows,
-} from "../../stores/slices/tableDataSlice";
+  setProgressElementData,
+  removeProgressElementData,
+} from "../../stores/slices/progressElementSlice.js";
 
 import "bootstrap-select";
 // import DragSort from '@yaireo/dragsort'
@@ -15858,11 +15858,10 @@ const hideDatasetMetadataGenerationTableRows = (destination) => {
   }
 };
 const convertMicroscopyImagesViaMfPlus = async () => {
-  addOrUpdateProcessStatusRow(
-    "guided-div-microscopy-image-conversion-status-table",
-    "microfileplus-installation-status",
+  setProgressElementData(
+    "guided-progress-display-microscopy-image-conversion",
     "Making sure MicroFile+ is installed",
-    "loading"
+    0
   );
   // wait for 10000 seconds
   await new Promise((resolve) => setTimeout(resolve, 5000));
@@ -15875,55 +15874,85 @@ const convertMicroscopyImagesViaMfPlus = async () => {
       `SODA was unable to detect MicroFile+ on your machine. Please install MicroFile+ and try again.`
     );
   }
-  addOrUpdateProcessStatusRow(
-    "guided-div-microscopy-image-conversion-status-table",
-    "microfileplus-installation-status",
-    "SODA detected MicroFile+ installation!",
-    "success"
-  );
+
   console.log("Converting microscopy images via MicroFilePlus");
   const microscopyImagesToConvert = window.sodaJSONObj["confirmed-microscopy-images"];
   const microscopyImagesToConvertCount = microscopyImagesToConvert.length;
 
   let imageConvertedCount = 1;
   for await (const image of microscopyImagesToConvert) {
     console.log(`Converting image: ${image.filePath}`);
-    addOrUpdateProcessStatusRow(
-      "guided-div-microscopy-image-conversion-status-table",
-      `microscopy-image-conversion-progress-count`,
-      `Converting and adding metadata to images`,
-      `${imageConvertedCount}/${microscopyImagesToConvert.length}`
+
+    const progressPercentage = Math.round(
+      (imageConvertedCount / microscopyImagesToConvertCount) * 100
     );
-    addOrUpdateProcessStatusRow(
-      "guided-div-microscopy-image-conversion-status-table",
-      `${image.filePath}-conversion-status`,
+
+    setProgressElementData(
+      "guided-progress-display-microscopy-image-conversion",
       `Converting image: ${image.filePath}`,
-      "loading"
+      progressPercentage
     );
-    // wait for 1 second
+    // wait for 5 second
     await new Promise((resolve) => setTimeout(resolve, 1000));
-    addOrUpdateProcessStatusRow(
-      "guided-div-microscopy-image-conversion-status-table",
-      `${image.filePath}-conversion-status`,
-      `Successfully converted image: ${image.filePath}`,
-      "success"
-    );
+
     imageConvertedCount++;
   }
 
-  addOrUpdateProcessStatusRow(
-    "guided-div-microscopy-image-conversion-status-table",
-    "Converting microscopy images with MicroFile+",
-    `0/${microscopyImagesToConvertCount}`
+  setProgressElementData(
+    "guided-progress-display-microscopy-image-conversion",
+    "Microscopy images successfully converted",
+    100
   );
-  // wait for 10000 seconds
-  await new Promise((resolve) => setTimeout(resolve, 10000000));
 };
 
 const uploadMicroscopyImagesToBioLucida = async () => {
+  setProgressElementData(
+    "guided-progress-display-microscopy-image-conversion",
+    "Making sure MicroFile+ is installed",
+    0
+  );
+  // wait for 10000 seconds
+  await new Promise((resolve) => setTimeout(resolve, 5000));
+  // Ensure that MicroFile+ is installed on the user's machine
+  const req = await client.get("/image_processing/is_microfileplus_installed");
+  const { status: microFilePlusIsInstalled } = req.data;
+
+  if (!microFilePlusIsInstalled) {
+    throw new Error(
+      `SODA was unable to detect MicroFile+ on your machine. Please install MicroFile+ and try again.`
+    );
+  }
+
   console.log("Converting microscopy images via MicroFilePlus");
-  // wait for 10 seconds
-  await new Promise((resolve) => setTimeout(resolve, 10000));
+  const microscopyImagesToConvert = window.sodaJSONObj["confirmed-microscopy-images"];
+  const microscopyImagesToConvertCount = microscopyImagesToConvert.length;
+
+  let imageConvertedCount = 1;
+  for await (const image of microscopyImagesToConvert) {
+    console.log(`Converting image: ${image.filePath}`);
+
+    const progressPercentage = Math.round(
+      (imageConvertedCount / microscopyImagesToConvertCount) * 100
+    );
+
+    setProgressElementData(
+      "guided-progress-display-microscopy-image-conversion",
+      `Converting image: ${image.filePath}`,
+      progressPercentage
+    );
+    // wait for 5 second
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    imageConvertedCount++;
+  }
+
+  setProgressElementData(
+    "guided-progress-display-microscopy-image-conversion",
+    "Microscopy images successfully converted",
+    100
+  );
+  // wait for 10000 seconds
+  await new Promise((resolve) => setTimeout(resolve, 10000000));
 };
 
 const guidedPennsieveDatasetUpload = async () => {
@@ -15949,12 +15978,12 @@ const guidedPennsieveDatasetUpload = async () => {
     }
 
     // Display the MicroFilePlus conversion status table
-    window.unHideAndSmoothScrollToElement("guided-div-microscopy-image-conversion-status-table");
+    window.unHideAndSmoothScrollToElement("guided-progress-display-microscopy-image-conversion");
 
     await convertMicroscopyImagesViaMfPlus();
 
     //Display the BioLucida Image upload table
-    window.unHideAndSmoothScrollToElement("guided-div-biolucida-image-upload-status-table");
+    window.unHideAndSmoothScrollToElement("guided-progress-display-biolucida-image-upload");
     await uploadMicroscopyImagesToBioLucida();
 
     // sleep for 20 seconds
diff --git a/src/renderer/src/sections/guided_mode/guided_curate_dataset.html b/src/renderer/src/sections/guided_mode/guided_curate_dataset.html
@@ -5636,12 +5636,13 @@ <h1 class="text-sub-step-title">Generating your dataset on Pennsieve</h1>
           <div
             class="guided--section hidden mt-lg guided-upload-table"
             data-component-type="process-status-table"
-            id="guided-div-microscopy-image-conversion-status-table"
+            data-table-title="Converting Microscopy Images using MicroFile+"
+            id="guided-progress-display-microscopy-image-conversion"
           ></div>
           <div
             class="guided--section hidden mt-lg guided-upload-table"
             data-component-type="process-status-table"
-            id="guided-div-biolucida-image-upload-status-table"
+            id="guided-progress-display-biolucida-image-upload"
           ></div>
           <div
             class="guided--section hidden mt-lg guided-upload-table"
diff --git a/src/renderer/src/stores/globalStore.js b/src/renderer/src/stores/globalStore.js
@@ -7,8 +7,9 @@ import { microscopyImageSlice } from "./slices/microscopyImageSlice";
 import { authSlice } from "./slices/authSlice";
 import { microscopyImageMetadataSlice } from "./slices/microscopyImageMetadataSlice";
 import { bioLucidaSlice } from "./slices/bioLucidaSlice";
-import { singleColumnTableSlice } from "./slices/tableDataSlice";
+import { singleColumnTableSlice } from "./slices/tableDataSlice.js";
 import { backgroundServicesSlice } from "./slices/backgroundServicesSlice";
+import { progressElementSlice } from "./slices/progressElementSlice";
 
 const useGlobalStore = create(
   immer((...a) => ({
@@ -21,6 +22,7 @@ const useGlobalStore = create(
     ...bioLucidaSlice(...a),
     ...singleColumnTableSlice(...a),
     ...backgroundServicesSlice(...a),
+    ...progressElementSlice(...a),
   }))
 );
 
diff --git a/src/renderer/src/stores/slices/progressElementSlice.js b/src/renderer/src/stores/slices/progressElementSlice.js
@@ -0,0 +1,29 @@
+import useGlobalStore from "../globalStore"; // Import the global state store
+import { produce } from "immer"; // produce makes working with nested state modifications easier
+
+export const progressElementSlice = (set) => ({
+  progressElementData: {},
+});
+
+export const setProgressElementData = (progressElementId, currentTask, taskProgress) => {
+  useGlobalStore.setState(
+    produce((state) => {
+      // Initialize the array if it does not exist
+      if (!state.progressElementData[progressElementId]) {
+        state.progressElementData[progressElementId] = {};
+      }
+
+      // Update the progress of the current task
+      state.progressElementData[progressElementId]["currentTask"] = currentTask;
+      state.progressElementData[progressElementId]["taskProgress"] = taskProgress;
+    })
+  );
+};
+
+export const removeProgressElementData = (progressElementId) => {
+  useGlobalStore.setState(
+    produce((state) => {
+      state.progressElementData[progressElementId] = {};
+    })
+  );
+};

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ while (!window.baseHtmlLoaded) {`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`import api from "../others/api/api";`
`7`		`-import { addRows, removeRows } from "../../stores/slices/tableDataSlice";`
	`7`	`+import { addRows, removeRows } from "../../stores/slices/tableDataSlice.js";`
`8`	`8`	`import { clientError } from "../others/http-error-handler/error-handler";`
`9`	`9`	`import { swalConfirmAction, swalShowError, swalShowInfo } from "../utils/swal-utils";`
`10`	`10`