feat: v1.1.0 - results tab

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hipstr-ui",
   "productName": "hipstr-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "HipSTR software UI",
   "main": ".vite/build/main.js",
   "scripts": {
@@ -44,11 +44,14 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@tanstack/react-table": "^8.20.6",
     "electron-squirrel-startup": "^1.0.0",
     "framer-motion": "^11.0.25",
     "jotai": "^2.7.2",
+    "lucide-react": "^0.474.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "xlsx": "^0.18.5"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.32.1"

src/app.tsx

@@ -4,6 +4,7 @@ import { BedTab } from "src/components/BedTab";
 import { ExecutionTab } from "src/components/ExecutionTab";
 import { FilesTab } from "src/components/FilesTab";
 import { ParametersTab } from "src/components/ParametersTab";
+import { ResultsTab } from "src/components/ResultsTab";
 import { hipstr } from "src/images";
 import { theme } from "src/lib/theme";
 
@@ -28,6 +29,7 @@ export default function App() {
           <Tab>BED</Tab>
           <Tab>Parameters</Tab>
           <Tab>Execution</Tab>
+          <Tab>Results</Tab>
         </TabList>
 
         <TabPanels flexGrow={1} overflowY="auto" display="flex">
@@ -41,7 +43,10 @@ export default function App() {
             <ParametersTab onFinish={() => setTabIndex(3)} />
           </TabPanel>
           <TabPanel flexGrow={1}>
-            <ExecutionTab />
+            <ExecutionTab onFinish={() => setTabIndex(4)} />
+          </TabPanel>
+          <TabPanel flexGrow={1}>
+            <ResultsTab onFinish={() => {}} />
           </TabPanel>
         </TabPanels>
       </Tabs>

src/components/ExecutionTab.tsx

@@ -12,18 +12,18 @@ import {
   HStack,
 } from "@chakra-ui/react";
 import { SaveDialogReturnValue } from "electron";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { FC, useEffect, useRef, useState } from "react";
 import { SUPPORTED_PLATFORM_ARCHS } from "src/constants/global";
 import { useGetPath } from "src/hooks/useGetPath";
 import { usePathSeparator } from "src/hooks/usePathSeparator";
-import { bedAtom, fastaAtom, filesAtom, paramsAtom } from "src/jotai/execute";
+import { bedAtom, fastaAtom, filesAtom, paramsAtom, vcfPathAtom } from "src/jotai/execute";
 import { osAtom } from "src/jotai/os";
 import { joinPath } from "src/lib/path";
 
 const spaces = "  ";
 
-export const ExecutionTab: FC = () => {
+export const ExecutionTab: FC<{ onFinish: () => void }> = ({ onFinish }) => {
   const toast = useToast();
   const [status, setStatus] = useState<"idle" | "executing" | "finished">("idle");
   const [indexesOut, setIndexesOut] = useState("");
@@ -36,8 +36,13 @@ export const ExecutionTab: FC = () => {
   const params = useAtomValue(paramsAtom);
   const tempPath = useGetPath("temp");
   const pathSep = usePathSeparator();
+  const setVcfPath = useSetAtom(vcfPathAtom);
+  const strVcfPath = `${tempPath}/str_calls.vcf.gz`;
 
   useEffect(() => {
+    if (!strVcfPath) {
+      return;
+    }
     ipcRender.receive("main-to-render", (result: string | { exitCode: number }) => {
       if (typeof result === "string") {
         setCmdOut((prev) => `${prev}\n${result}`);
@@ -51,12 +56,12 @@ export const ExecutionTab: FC = () => {
             status: "error",
           });
         }
+        setVcfPath(strVcfPath);
         setStatus("finished");
       }
     });
-  }, []);
+  }, [strVcfPath]);
 
-  const strVcfPath = `${tempPath}/str_calls.vcf.gz`;
   const allParams: Record<string, string | boolean> = {
     fasta,
     regions: bed,
@@ -210,6 +215,9 @@ export const ExecutionTab: FC = () => {
         >
           Save VCF
         </Button>
+        <Button size="sm" ml={2} isDisabled={status !== "finished"} onClick={onFinish}>
+          Continue
+        </Button>
       </HStack>
     </VStack>
   );