cloudmr-ux 2.0.7 → 3.0.1

package/dist/core/app/main/Main.d.ts

@@ -0,0 +1,6 @@
+import type { TabInfo } from "../../../CmrTabs/tab.model";
+interface MainProps {
+    tabData: TabInfo[];
+}
+declare const Main: ({ tabData }: MainProps) => import("react/jsx-runtime").JSX.Element;
+export default Main;

package/dist/core/app/main/Main.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CmrTabs } from "../../../index";
+var Main = function (_a) {
+    var tabData = _a.tabData;
+    return (_jsx("div", __assign({ className: "container-fluid mt-4", style: { transition: "all 0.3s" } }, { children: _jsx(CmrTabs, { tabList: tabData }) })));
+};
+export default Main;

package/dist/core/app/results/Logs.d.ts

@@ -0,0 +1 @@
+export declare const Logs: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/core/app/results/Logs.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppSelector } from "../../store/hooks";
+import Box from "@mui/material/Box";
+export var Logs = function () {
+    var logs = useAppSelector(function (state) { var _a; return (_a = state.result.activeJob) === null || _a === void 0 ? void 0 : _a.logs; });
+    if (logs != undefined) {
+        return (_jsx(Box, __assign({ style: {
+                width: "100%",
+                height: "250pt",
+                background: "black",
+                borderRadius: "5pt",
+                marginTop: "30pt",
+                overflow: "auto",
+                fontFamily: "consolas",
+                padding: "10pt"
+            } }, { children: logs.map(function (value) {
+                return (_jsx(Box, __assign({ style: { color: "white" } }, { children: "".concat(value.when, ": ").concat(value.what) })));
+            }) })));
+    }
+    else
+        return null;
+};

package/dist/core/app/results/PreprocessJob.d.ts

@@ -0,0 +1 @@
+export declare function processJobZip(file: File, fileAlias: string): Promise<File | undefined>;

package/dist/core/app/results/PreprocessJob.js

@@ -0,0 +1,100 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import JSZip from "jszip";
+export function processJobZip(file, fileAlias) {
+    return __awaiter(this, void 0, void 0, function () {
+        var jszip, outputZip, zip, infoFound, _i, _a, _b, filename, zipEntry, fileContent, infoJSON, blobContent, content, error_1;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    jszip = new JSZip();
+                    outputZip = new JSZip();
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 10, , 11]);
+                    return [4 /*yield*/, jszip.loadAsync(file instanceof Blob ? file : new Blob([file]))];
+                case 2:
+                    zip = _c.sent();
+                    infoFound = false;
+                    _i = 0, _a = Object.entries(zip.files);
+                    _c.label = 3;
+                case 3:
+                    if (!(_i < _a.length)) return [3 /*break*/, 8];
+                    _b = _a[_i], filename = _b[0], zipEntry = _b[1];
+                    console.log(filename);
+                    if (!(filename === "info.json")) return [3 /*break*/, 5];
+                    return [4 /*yield*/, zipEntry.async("string")];
+                case 4:
+                    fileContent = _c.sent();
+                    infoJSON = JSON.parse(fileContent);
+                    if (!infoJSON.headers)
+                        return [2 /*return*/, undefined];
+                    infoJSON.headers.options.pipelineid = null;
+                    infoJSON.headers.options.alias = fileAlias;
+                    console.log(infoJSON);
+                    // Add modified info.json to outputZip
+                    outputZip.file(filename, JSON.stringify(infoJSON, null, 2));
+                    infoFound = true;
+                    return [3 /*break*/, 7];
+                case 5: return [4 /*yield*/, zipEntry.async("blob")];
+                case 6:
+                    blobContent = _c.sent();
+                    outputZip.file(filename, blobContent);
+                    _c.label = 7;
+                case 7:
+                    _i++;
+                    return [3 /*break*/, 3];
+                case 8:
+                    if (!infoFound)
+                        return [2 /*return*/, undefined];
+                    return [4 /*yield*/, outputZip.generateAsync({ type: "blob" })];
+                case 9:
+                    content = _c.sent();
+                    console.log(content.type);
+                    return [2 /*return*/, new File([content], file.name, {
+                            type: content.type,
+                            lastModified: Date.now()
+                        })]; // This Blob can be used for downloading or further processing
+                case 10:
+                    error_1 = _c.sent();
+                    console.error("There was an error processing the zip file:", error_1);
+                    return [2 /*return*/, undefined];
+                case 11: return [2 /*return*/];
+            }
+        });
+    });
+}

package/dist/core/app/results/Results.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import "./Results.scss";
+export interface NiiFile {
+    filename: string;
+    id: number;
+    dim: number;
+    name: string;
+    type: string;
+    link: string;
+}
+declare const Results: ({ visible, children, }: {
+    visible?: boolean | undefined;
+    children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Results;

package/dist/core/app/results/Results.js

@@ -0,0 +1,372 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from "react";
+import "./Results.scss";
+import { CmrTable, CmrCollapse, CmrPanel, CmrCheckbox, CmrEditConfirmation, CmrConfirmation, CMRUpload, } from "../../../index";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
+import IconButton from "@mui/material/IconButton";
+import GetAppIcon from "@mui/icons-material/GetApp";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import NiiVue, { nv } from "../../common/components/NiivueTools/Niivue";
+import { getUpstreamJobs } from "../../features/jobs/jobActionCreation";
+import { uploadData, getUploadedData, } from "../../features/data/dataActionCreation";
+import { getPipelineROI, loadResult, } from "../../features/rois/resultActionCreation";
+import resultActions from "../../features/rois/resultSlice";
+import { Alert, Button, CircularProgress, Slide, Snackbar, } from "@mui/material";
+import { Row } from "antd";
+import Box from "@mui/material/Box";
+// import { SetupInspection } from "./SetupInspection";
+import { Logs } from "./Logs";
+import { processJobZip } from "./PreprocessJob";
+import { deleteUpstreamJob } from "../../features/jobs/jobActionCreation";
+import { uploadHandlerFactory } from "../../common/utilities/SystemUtilities";
+import DeleteIcon from "@mui/icons-material/Delete";
+import Tooltip from "@mui/material/Tooltip";
+var Results = function (_a) {
+    var visible = _a.visible, children = _a.children;
+    var dispatch = useAppDispatch();
+    var queueToken = useAppSelector(function (state) { return state.authenticate; }).queueToken;
+    var results = useAppSelector(function (state) { return state.jobs.jobs; });
+    var jobsLoading = useAppSelector(function (state) { return state.jobs.loading; });
+    // const [rois, setROIS] = useState<ROI[]>([]);
+    var activeJob = useAppSelector(function (state) { return state.result.activeJob; });
+    var activeJobAlias = useAppSelector(function (state) { var _a; return (_a = state.result.activeJob) === null || _a === void 0 ? void 0 : _a.alias; });
+    var pipelineID = useAppSelector(function (state) { var _a; return (_a = state.result.activeJob) === null || _a === void 0 ? void 0 : _a.pipeline_id; });
+    var niis = useAppSelector(function (state) {
+        return pipelineID ? state.result.niis[pipelineID] : undefined;
+    });
+    var rois = useAppSelector(function (state) {
+        return pipelineID === undefined ||
+            state.result.rois[pipelineID] === undefined
+            ? undefined
+            : state.result.rois[pipelineID];
+    }) || [];
+    var selectedVolume = useAppSelector(function (state) { return state.result.selectedVolume; });
+    var resultLoading = useAppSelector(function (state) { return state.result.resultLoading; });
+    var _b = useState(true), autoRefresh = _b[0], setAutoRefresh = _b[1];
+    var openPanel = useAppSelector(function (state) { return state.result.openPanel; });
+    var _c = useState(""), warning = _c[0], setWarning = _c[1];
+    var _d = useState(false), warningOpen = _d[0], setWarningOpen = _d[1];
+    var _e = useState(false), showingLogs = _e[0], setShowingLogs = _e[1];
+    var _f = useState(undefined), name = _f[0], setName = _f[1];
+    var _g = useState(undefined), message = _g[0], setMessage = _g[1];
+    var _h = useState(undefined), color = _h[0], setColor = _h[1];
+    var _j = useState(false), open = _j[0], setOpen = _j[1];
+    var _k = useState(function () { }), confirmCallbackjob = _k[0], setConfirmCallbackjob = _k[1];
+    var _l = useState(function () { }), cancelCallbackjob = _l[0], setCancelCallbackjob = _l[1];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(function () {
+        //@ts-ignore
+        dispatch(getUploadedData());
+        //@ts-ignore
+        dispatch(getUpstreamJobs());
+        var interval = setInterval(function () {
+            if (visible && autoRefresh && openPanel.indexOf(0) >= 0) {
+                //@ts-ignore
+                dispatch(getUpstreamJobs());
+            }
+        }, 15000);
+        return function () {
+            clearInterval(interval);
+        };
+    }, [visible]);
+    var _m = useState(Date.now()), lastUpdated = _m[0], setLastUpdated = _m[1];
+    var warn = function (message) {
+        setWarning(message);
+        setWarningOpen(true);
+        setTimeout(function () {
+            setWarningOpen(false);
+            setWarning("");
+        }, 5000);
+    };
+    var getAlias = function (alias) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setOriginalName(alias);
+            setNameDialogOpen(true);
+            return [2 /*return*/, new Promise(function (resolve, reject) {
+                    var callback = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            resolve(value);
+                            return [2 /*return*/, true];
+                        });
+                    }); };
+                    var cancelCallback = function (_) { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            reject(alias);
+                            return [2 /*return*/, true];
+                        });
+                    }); };
+                    setRenamingCallback(function () { return callback; });
+                    setCancelCallback(function () { return cancelCallback; });
+                })];
+        });
+    }); };
+    var completedJobsColumns = [
+        {
+            headerName: "Job ID",
+            dataIndex: "id",
+            field: "id",
+            flex: 1
+        },
+        {
+            headerName: "Alias",
+            dataIndex: "alias",
+            field: "alias",
+            flex: 2
+        },
+        {
+            headerName: "Date Submitted",
+            dataIndex: "createdAt",
+            field: "createdAt",
+            flex: 2
+        },
+        {
+            headerName: "Status",
+            dataIndex: "status",
+            field: "status",
+            flex: 1
+        },
+        {
+            field: "action",
+            headerName: "Actions",
+            sortable: false,
+            width: 256,
+            disableClickEventBubbling: true,
+            renderCell: function (params) {
+                return (_jsxs("div", { children: [params.row.status !== "failed" && (_jsx(Tooltip, __assign({ title: "View job ".concat(params.row.alias) }, { children: _jsx(IconButton, __assign({ disabled: params.row.status === "pending", onClick: function (event) {
+                                    event.stopPropagation();
+                                    if (params.row.pipeline_id === (activeJob === null || activeJob === void 0 ? void 0 : activeJob.pipeline_id)) {
+                                        dispatch(resultActions.setOpenPanel([1, 2]));
+                                        return;
+                                    }
+                                    dispatch(loadResult({
+                                        job: params.row
+                                    })).then(function (value) { return __awaiter(void 0, void 0, void 0, function () {
+                                        var volumes, niis_1, i, nii;
+                                        return __generator(this, function (_a) {
+                                            try {
+                                                volumes = value.payload.volumes;
+                                                niis_1 = value.payload.niis || [];
+                                                for (i = 0; i < niis_1.length; i++) {
+                                                    nii = niis_1[i];
+                                                    if (nii.id === 0) {
+                                                        dispatch(resultActions.selectVolume(i));
+                                                        nv.loadVolumes([volumes[i]]);
+                                                        dispatch(resultActions.setOpenPanel([1, 2]));
+                                                        nv.closeDrawing();
+                                                        break;
+                                                    }
+                                                }
+                                            }
+                                            catch (e) {
+                                                warn("Error loading results, please check internet connectivity");
+                                            }
+                                            setTimeout(function () { return nv.resizeListener(); }, 700);
+                                            //@ts-ignore
+                                            dispatch(getPipelineROI({
+                                                pipeline: params.row.pipeline_id
+                                            }));
+                                            return [2 /*return*/];
+                                        });
+                                    }); });
+                                } }, { children: resultLoading === params.row.id ||
+                                    params.row.status === "pending" ? (_jsx("div", { className: "spinner-border spinner-border-sm", style: { aspectRatio: "1 / 1" }, role: "status" })) : (_jsx(PlayArrowIcon, { sx: {
+                                        color: params.row.status !== "completed"
+                                            ? "#8a6fae"
+                                            : "#580f8b",
+                                        "&:hover": {
+                                            color: "#390063"
+                                        }
+                                    } })) })) }))), params.row.status === "completed" && (_jsx(Tooltip, __assign({ title: "Download job ".concat(params.row.alias) }, { children: _jsx(IconButton, __assign({ onClick: function (e) {
+                                    e.stopPropagation();
+                                    params.row.files.forEach(function (file) {
+                                        var url = file.link;
+                                        if (url === "unknown")
+                                            return;
+                                        // Create an anchor element
+                                        var a = document.createElement("a");
+                                        // Extract the file name from the URL, if possible
+                                        a.download = "".concat(file.fileName, ".").concat(url.split(".").pop());
+                                        a.href = url;
+                                        // Append the anchor to the body (this is necessary to programmatically trigger the click event)
+                                        document.body.appendChild(a);
+                                        // Trigger a click event to start the download
+                                        a.click();
+                                        // Remove the anchor from the body
+                                        document.body.removeChild(a);
+                                    });
+                                } }, { children: _jsx(GetAppIcon, {}) })) }))), _jsx(Tooltip, __assign({ title: "Delete job ".concat(params.row.alias) }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                                    setName("Deleting job");
+                                    setMessage("Please confirm that you are deleting job ".concat(params.row.id.toString(), "."));
+                                    setColor("error");
+                                    setConfirmCallbackjob(function () { return function () { return __awaiter(void 0, void 0, void 0, function () {
+                                        var error_1;
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0:
+                                                    _a.trys.push([0, 3, , 4]);
+                                                    // First, delete the upstream job
+                                                    return [4 /*yield*/, dispatch(deleteUpstreamJob({
+                                                            jobId: params.row.id.toString()
+                                                        }))];
+                                                case 1:
+                                                    // First, delete the upstream job
+                                                    _a.sent();
+                                                    // Then, fetch the updated upstream jobs
+                                                    return [4 /*yield*/, dispatch(getUpstreamJobs())];
+                                                case 2:
+                                                    // Then, fetch the updated upstream jobs
+                                                    _a.sent();
+                                                    return [3 /*break*/, 4];
+                                                case 3:
+                                                    error_1 = _a.sent();
+                                                    console.error("Error deleting job or fetching updated jobs:", error_1);
+                                                    return [3 /*break*/, 4];
+                                                case 4: return [2 /*return*/];
+                                            }
+                                        });
+                                    }); }; });
+                                    setCancelCallbackjob(function () {
+                                        // console.log("Cancel action was triggered.");
+                                    });
+                                    setOpen(true);
+                                } }, { children: _jsx(DeleteIcon, {}) })) })), _jsx(CmrConfirmation, { name: name, message: message, color: color, open: open, setOpen: setOpen, confirmCallback: function () { return confirmCallbackjob(); }, cancelCallback: function () {
+                                if (cancelCallbackjob) {
+                                    cancelCallbackjob();
+                                }
+                                else {
+                                    setOpen(false); // Close the dialog if no cancel callback is set
+                                }
+                            }, cancellable: true, width: 450 })] }));
+            }
+        },
+    ];
+    var _o = useState(0), uploaderKey = _o[0], setUploaderKey = _o[1];
+    var _p = useState(false), nameDialogOpen = _p[0], setNameDialogOpen = _p[1];
+    var _q = useState(""), originalName = _q[0], setOriginalName = _q[1];
+    var _r = useState(function () { return function (val) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, true];
+    }); }); }; }), renamingCallback = _r[0], setRenamingCallback = _r[1];
+    var _s = useState(function () { return function (val) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, true];
+    }); }); }; }), cancelCallback = _s[0], setCancelCallback = _s[1];
+    return (_jsxs(Fragment, { children: [_jsx(Snackbar, __assign({ anchorOrigin: { vertical: "top", horizontal: "left" }, TransitionComponent: function (props) { return _jsx(Slide, __assign({}, props, { direction: "right" })); }, open: warningOpen, autoHideDuration: 7000, onClose: function () { return setWarningOpen(false); } }, { children: _jsx(Alert, __assign({ onClose: function () { return setWarningOpen(false); }, severity: "error", sx: { width: "100%" } }, { children: warning })) })), _jsx(CmrEditConfirmation, { open: nameDialogOpen, setOpen: setNameDialogOpen, cancelCallback: cancelCallback, cancellable: true, defaultText: originalName, message: "Provide the alias associated with the result file.", name: "Job Alias", confirmCallback: renamingCallback }), _jsxs(CmrCollapse, __assign({ accordion: false, expandIconPosition: "right", activeKey: openPanel, onChange: function (key) {
+                    if (openPanel.indexOf(0) < 0 && key.indexOf(0) >= 0) {
+                        dispatch(getUpstreamJobs());
+                    }
+                    dispatch(resultActions.setOpenPanel(key));
+                } }, { children: [_jsxs(CmrPanel, __assign({ header: "Job Results", className: "mb-2" }, { children: [_jsxs(Row, __assign({ style: {
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    marginBottom: "20px"
+                                } }, { children: [_jsx(CMRUpload, __assign({ style: { marginTop: "auto", marginBottom: "auto" }, uploadButtonName: "Upload Results", maxCount: 1, fileExtension: ".zip", preprocess: function (file) { return __awaiter(void 0, void 0, void 0, function () {
+                                            var alias, _a;
+                                            return __generator(this, function (_b) {
+                                                switch (_b.label) {
+                                                    case 0:
+                                                        _b.trys.push([0, 2, , 3]);
+                                                        return [4 /*yield*/, getAlias(file.name)];
+                                                    case 1:
+                                                        alias = _b.sent();
+                                                        return [2 /*return*/, processJobZip(file, alias)];
+                                                    case 2:
+                                                        _a = _b.sent();
+                                                        return [2 /*return*/, 400];
+                                                    case 3: return [2 /*return*/];
+                                                }
+                                            });
+                                        }); }, uploadFailed: function () {
+                                            warn("There was a problem with the result file provided.");
+                                            setUploaderKey(uploaderKey + 1);
+                                        }, onUploaded: function () {
+                                            //Refresh job list after successful upload
+                                            dispatch(getUpstreamJobs());
+                                            // console.log(uploaderKey);
+                                            setUploaderKey(uploaderKey + 1);
+                                        }, uploadHandler: uploadHandlerFactory(queueToken, dispatch, uploadData) }, { children: "Upload Results" }), uploaderKey), _jsx(CmrCheckbox, __assign({ defaultChecked: true, onChange: function (e) {
+                                            //@ts-ignore
+                                            setAutoRefresh(e.target.value);
+                                        } }, { children: "Auto Refreshing" }))] })), _jsx(CmrTable, { dataSource: results, columns: completedJobsColumns, showCheckbox: false }), _jsxs(Button, __assign({ className: "mt-3", fullWidth: true, variant: "contained", onClick: function () {
+                                    dispatch(getUpstreamJobs());
+                                } }, { children: ["Refresh", " ", jobsLoading && (_jsx(CircularProgress, { size: 18, style: { color: "white", position: "relative", left: "5pt" } }))] })), showingLogs && _jsx(Logs, {})] }), "0"), _jsxs(CmrPanel, __assign({ className: "mb-2", header: activeJobAlias !== undefined
+                            ? "Viewing ".concat(activeJobAlias)
+                            : "View Results" }, { children: [activeJob !== undefined && (_jsx(NiiVue, { niis: niis || [], warn: warn, setWarning: setWarning, setWarningOpen: setWarningOpen, setSelectedVolume: function (index) {
+                                    dispatch(resultActions.selectVolume(index));
+                                }, selectedVolume: selectedVolume, 
+                                // key={pipelineID}
+                                rois: rois || [], pipelineID: pipelineID, saveROICallback: function () {
+                                    if (pipelineID) {
+                                        dispatch(getPipelineROI({
+                                            pipeline: pipelineID
+                                        }));
+                                    }
+                                } })), activeJob === undefined && (_jsx(Box, __assign({ sx: {
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    color: "rgba(0,0,0,0.4)"
+                                } }, { children: "Please Select a Job Result" })))] }), "1"), children || _jsx("div", {})] })), _jsx("div", { style: { height: "69px" } })] }));
+};
+/*<CmrPanel header={"Current Job Settings"} key={"2"}>
+  {activeJob?.status === "completed" ? (
+    <SetupInspection />
+  ) : (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        color: "rgba(0,0,0,0.4)",
+      }}
+    >
+      {!activeJob
+        ? "Please Select a Job Result"
+        : "Job is not completed"}
+    </Box>
+  )}
+</CmrPanel>*/
+export default Results;

package/dist/core/app/results/Results.scss

@@ -0,0 +1,92 @@
+.canvas-control-button {
+    border: none;
+}
+
+.roi-button {
+    border: none;
+}
+
+.roi-information {
+    display: flex;
+    align-items: center;
+}
+
+.ant-space {
+    display: flex;
+}
+
+.action-button {
+    border: none;
+    background: transparent;
+    background-color: transparent;
+}
+
+
+@keyframes spinner-border {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner-border {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: text-bottom;
+    border: 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    -webkit-animation: spinner-border 0.75s linear infinite;
+    animation: spinner-border 0.75s linear infinite;
+}
+
+.spinner-border-sm {
+    width: 1rem;
+    height: 1rem;
+    border-width: 0.2em;
+    margin: 4px;
+}
+
+@-webkit-keyframes spinner-grow {
+    0% {
+        transform: scale(0);
+    }
+
+    50% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes spinner-grow {
+    0% {
+        transform: scale(0);
+    }
+
+    50% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.spinner-grow {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: text-bottom;
+    background-color: currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    -webkit-animation: spinner-grow 0.75s linear infinite;
+    animation: spinner-grow 0.75s linear infinite;
+}
+
+.spinner-grow-sm {
+    width: 1rem;
+    height: 1rem;
+}
+
+.setting-box{
+    width:100%;
+    margin-bottom: 10pt;
+}

package/dist/core/app/results/Rois.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from "react";
+export declare const ROITable: (props: {
+    pipelineID: string;
+    rois: any[];
+    resampleImage: () => void;
+    zipAndSendROI: (url: string, filename: string, blob: Blob) => Promise<void>;
+    unpackROI: (url: string) => Promise<void>;
+    setLabelAlias: (label: number | string, alias: string) => void;
+    style?: CSSProperties | undefined;
+    nv: any;
+}) => import("react/jsx-runtime").JSX.Element;