cloudmr-ux 2.0.7 → 3.0.2

package/dist/core/app/signin/Register.js

@@ -0,0 +1,126 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Alert from "@mui/material/Alert";
+import Paper from "@mui/material/Paper";
+import Container from "@mui/material/Container";
+import { registerUser, } from "../../features/authenticate/authenticateActionCreation";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
+import { clearError, clearRegisterSuccess, } from "../../features/authenticate/authenticateSlice";
+import { useEffect, useState } from "react";
+import { validatePassword, isPasswordValid as checkPasswordValid, } from "../../utils/passwordValidation";
+import PasswordRequirements from "../../components/PasswordRequirements";
+export default function Register(_a) {
+    var onBackToSignin = _a.onBackToSignin;
+    var dispatch = useAppDispatch();
+    var _b = useAppSelector(function (state) { return state.authenticate; }), loading = _b.loading, error = _b.error, registerSuccess = _b.registerSuccess;
+    var _c = useState(false), showSuccess = _c[0], setShowSuccess = _c[1];
+    var _d = useState(""), password = _d[0], setPassword = _d[1];
+    var _e = useState(""), confirmPassword = _e[0], setConfirmPassword = _e[1];
+    var _f = useState(false), showPasswordValidation = _f[0], setShowPasswordValidation = _f[1];
+    var _g = useState({
+        minLength: false,
+        hasNumber: false,
+        hasSpecial: false,
+        hasUppercase: false,
+        hasLowercase: false
+    }), passwordValidation = _g[0], setPasswordValidation = _g[1];
+    useEffect(function () {
+        if (registerSuccess) {
+            setShowSuccess(true);
+            // Clear success message after showing it
+            setTimeout(function () {
+                dispatch(clearRegisterSuccess());
+                setShowSuccess(false);
+            }, 5000);
+        }
+    }, [registerSuccess, dispatch]);
+    useEffect(function () {
+        // Clear error when component unmounts
+        return function () {
+            dispatch(clearError());
+        };
+    }, [dispatch]);
+    // Validate password with debounce - only update after user stops typing
+    useEffect(function () {
+        if (password.length === 0) {
+            setShowPasswordValidation(false);
+            return;
+        }
+        var timeoutId = setTimeout(function () {
+            var validation = validatePassword(password);
+            setPasswordValidation(validation);
+            setShowPasswordValidation(true);
+        }, 500); // 500ms debounce
+        return function () { return clearTimeout(timeoutId); };
+    }, [password]);
+    var handlePasswordChange = function (e) {
+        setPassword(e.target.value);
+    };
+    var handleConfirmPasswordChange = function (e) {
+        setConfirmPassword(e.target.value);
+    };
+    var passwordsMatch = password === confirmPassword && confirmPassword.length > 0;
+    var isEmailValid = function (email) {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    };
+    var isFormValid = function () {
+        // Check if password meets all requirements
+        var passwordValid = checkPasswordValid(passwordValidation);
+        // Check if passwords match
+        var passwordsMatchValid = password === confirmPassword && confirmPassword.length > 0;
+        // Check if password fields have content
+        var hasPasswordContent = password.length > 0 && confirmPassword.length > 0;
+        return passwordValid && passwordsMatchValid && hasPasswordContent;
+    };
+    var handleSubmit = function (event) {
+        event.preventDefault();
+        var data = new FormData(event.currentTarget);
+        var emailValue = data.get("email");
+        // Validate email format
+        if (!isEmailValid(emailValue)) {
+            return;
+        }
+        // Do immediate validation before submit
+        var currentValidation = validatePassword(password);
+        setPasswordValidation(currentValidation);
+        setShowPasswordValidation(true);
+        // Check if all validation rules pass
+        if (!checkPasswordValid(currentValidation)) {
+            return; // Validation messages will be shown
+        }
+        // Validate password confirmation
+        if (!passwordsMatch) {
+            return; // Validation message already shown
+        }
+        var registerData = {
+            email: emailValue,
+            password: password,
+            firstname: data.get("firstname"),
+            lastname: data.get("lastname"),
+            username: data.get("username")
+        };
+        dispatch(registerUser(registerData));
+    };
+    return (_jsx(Container, __assign({ maxWidth: "md", sx: { mt: 4, mb: 4 } }, { children: _jsx(Paper, __assign({ sx: { p: 3 } }, { children: _jsxs(Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true }, { children: [_jsx(Typography, __assign({ variant: "h6", gutterBottom: true, sx: { mb: 2 } }, { children: "Create Account" })), error && (_jsx(Alert, __assign({ severity: "error", sx: { mb: 2 }, onClose: function () { return dispatch(clearError()); } }, { children: error }))), showSuccess && (_jsx(Alert, __assign({ severity: "success", sx: { mb: 2 } }, { children: "Registration successful! Please wait for admin approval before signing in." }))), _jsxs(Grid, __assign({ container: true, spacing: 2 }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(TextField, { margin: "normal", required: true, fullWidth: true, id: "firstname", label: "First Name", name: "firstname", size: "small", autoFocus: true }) })), _jsx(Grid, __assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(TextField, { margin: "normal", required: true, fullWidth: true, id: "lastname", label: "Last Name", name: "lastname", size: "small" }) }))] })), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, id: "username", label: "Username", name: "username", size: "small" }), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Email Address", name: "email", type: "email", size: "small", autoComplete: "email" }), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Password", type: "password", id: "password", size: "small", autoComplete: "new-password", value: password, onChange: handlePasswordChange }), _jsx(PasswordRequirements, { validation: passwordValidation, show: showPasswordValidation }), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, name: "confirmPassword", label: "Confirm Password", type: "password", id: "confirmPassword", size: "small", autoComplete: "new-password", value: confirmPassword, onChange: handleConfirmPasswordChange, error: confirmPassword.length > 0 && !passwordsMatch, helperText: confirmPassword.length > 0 && !passwordsMatch
+                            ? "Passwords do not match"
+                            : "" }), _jsx(Button, __assign({ type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 }, disabled: loading || !isFormValid() }, { children: loading ? "Registering..." : "Register" })), _jsx(Grid, __assign({ container: true, justifyContent: "flex-end" }, { children: _jsx(Grid, __assign({ item: true }, { children: _jsx(Link, __assign({ href: "#", onClick: function (e) {
+                                    e.preventDefault();
+                                    onBackToSignin();
+                                }, variant: "body2" }, { children: "Already have an account? Sign in" })) })) }))] })) })) })));
+}

package/dist/core/app/signin/Signin.d.ts

@@ -0,0 +1,5 @@
+import "./Signin.scss";
+export default function Signin({ appIcon, appTitle, }: {
+    appIcon: string;
+    appTitle: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/core/app/signin/Signin.js

@@ -0,0 +1,84 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Alert from "@mui/material/Alert";
+import Paper from "@mui/material/Paper";
+import Container from "@mui/material/Container";
+import { getLoggedInToken } from "../../features/authenticate/authenticateActionCreation";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
+import { clearError } from "../../features/authenticate/authenticateSlice";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { useState, useEffect } from "react";
+import Register from "./Register";
+import ForgotPassword from "./ForgotPassword";
+import "./Signin.scss";
+var theme = createTheme({
+    palette: {
+        primary: {
+            main: "#580F8B"
+        },
+        secondary: {
+            main: "#6c757d"
+        }
+    }
+});
+export default function Signin(_a) {
+    var appIcon = _a.appIcon, appTitle = _a.appTitle;
+    var dispatch = useAppDispatch();
+    var _b = useAppSelector(function (state) { return state.authenticate; }), loading = _b.loading, error = _b.error;
+    var _c = useState(false), showRegister = _c[0], setShowRegister = _c[1];
+    var _d = useState(false), showForgotPassword = _d[0], setShowForgotPassword = _d[1];
+    useEffect(function () {
+        // Clear error when component unmounts
+        return function () {
+            dispatch(clearError());
+        };
+    }, [dispatch]);
+    var handleSubmit = function (event) {
+        event.preventDefault();
+        var data = new FormData(event.currentTarget);
+        //@ts-ignore
+        //
+        var credentials = {
+            email: data.get("email"),
+            password: data.get("password")
+        };
+        dispatch(getLoggedInToken(credentials));
+    };
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx("div", __assign({ className: "flex-center page-root", style: { paddingTop: "calc(20vh - 20px)" } }, { children: _jsxs("div", __assign({ id: "welcome" }, { children: [_jsx("div", __assign({ id: "welcome-logo" }, { children: _jsxs("div", __assign({ style: {
+                                margin: "auto",
+                                width: "100%",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center"
+                            } }, { children: [_jsx("img", { src: appIcon, className: "img-fluid", style: { margin: "auto", height: "70pt" }, alt: "" }), _jsx("h1", __assign({ style: {
+                                        display: "block",
+                                        marginTop: "8pt",
+                                        marginRight: "5pt",
+                                        textAlign: "center",
+                                        fontWeight: "bold"
+                                    } }, { children: appTitle }))] })) })), _jsx("div", __assign({ id: "welcome-login" }, { children: !showRegister && !showForgotPassword ? (_jsx(Container, __assign({ maxWidth: "lg", sx: { mt: 4, mb: 4 } }, { children: _jsx(Paper, __assign({ sx: { p: 3 } }, { children: _jsxs(Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true }, { children: [_jsx(Typography, __assign({ variant: "h6", gutterBottom: true, sx: { mb: 2 } }, { children: "Sign In" })), error && (_jsx(Alert, __assign({ severity: "error", sx: { mb: 2 }, onClose: function () { return dispatch(clearError()); } }, { children: error }))), _jsx(TextField, { margin: "normal", className: "col-md-6", required: true, fullWidth: true, id: "email", label: "Email Address", name: "email", size: "small", autoComplete: "email", autoFocus: true }), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Password", type: "password", id: "password", size: "small", autoComplete: "current-password" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { value: "remember", size: "small", color: "primary" }), label: _jsx(Typography, __assign({ variant: "subtitle2" }, { children: "Remember Me" })), style: { float: "right", marginRight: "0" }, className: "input-sm" }), _jsx(Button, __assign({ type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 }, disabled: loading }, { children: loading ? "Signing In..." : "Sign In" })), _jsxs(Grid, __assign({ container: true, justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Link, __assign({ href: "#", onClick: function (e) {
+                                                            e.preventDefault();
+                                                            setShowForgotPassword(true);
+                                                        }, variant: "body2" }, { children: "Forgot Password?" })) })), _jsx(Grid, __assign({ item: true }, { children: _jsx(Link, __assign({ href: "#", onClick: function (e) {
+                                                            e.preventDefault();
+                                                            setShowRegister(true);
+                                                        }, variant: "body2" }, { children: "Sign Up" })) }))] }))] })) })) }))) : showForgotPassword ? (_jsx(ForgotPassword, { onBackToSignin: function () { return setShowForgotPassword(false); } })) : (_jsx(Register, { onBackToSignin: function () { return setShowRegister(false); } })) }))] })) })) })));
+}

package/dist/core/app/signin/Signin.scss

@@ -0,0 +1,86 @@
+html,
+body {
+  color: #636b6f;
+  font-family: 'Nunito', sans-serif;
+  font-weight: 200;
+  height: 100vh;
+  margin: 0;
+}
+
+.full-height {
+  height: 100vh;
+}
+
+.flex-center {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.position-ref {
+  position: relative;
+}
+
+.top-right {
+  position: absolute;
+  right: 10px;
+  top: 18px;
+}
+
+.bottom-right {
+  position: absolute;
+  right: 10px;
+  bottom: 18px;
+}
+
+.bottom {
+  position: absolute;
+  bottom: 13px;
+}
+
+.links>a {
+  color: #636b6f;
+  padding: 0 25px;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: .1rem;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+#welcome{
+  display: grid;
+  grid-template-columns: 25% 50% 25%;
+  grid-template-rows: fit-content(30%) 0pt 1fr;
+  row-gap: 5px;
+}
+
+#welcome-logo{
+  grid-row: 1;
+  grid-column: 2;
+  width: 90%;
+  display: flex;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  color: #555;
+}
+
+#welcome-login{
+  grid-row: 3;
+  grid-column: 2 / span 1;
+  display: flex;
+  justify-content: center;
+}
+
+#welcome-icon{
+  position:absolute;
+  top:-50pt; /*it pushes away div element from top 30pt down Remember with
+  browser window*/
+  left:0;
+  right:0;
+  /*last three property excatly similar to top property it just pushes away
+  from specified direction*/
+  display: flex;
+}
+

package/dist/core/app/upload/Upload.d.ts

@@ -0,0 +1,3 @@
+import "./Upload.scss";
+declare const Upload: () => import("react/jsx-runtime").JSX.Element;
+export default Upload;

package/dist/core/app/upload/Upload.js

@@ -0,0 +1,261 @@
+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 };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from "react";
+import "./Upload.scss";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
+import IconButton from "@mui/material/IconButton";
+import EditIcon from "@mui/icons-material/Edit";
+import GetAppIcon from "@mui/icons-material/GetApp";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { CmrTable, CmrCollapse, CmrPanel, CmrNameDialog } from "../../../index";
+import { deleteUploadedData, getUploadedData, renameUploadedData, uploadData, } from "../../features/data/dataActionCreation";
+import { getUpstreamJobs } from "../../features/jobs/jobActionCreation";
+import { CmrConfirmation } from "../../../index";
+import { Button, CircularProgress } from "@mui/material";
+import { CMRUpload } from "../../../index";
+import { uploadHandlerFactory } from "../../common/utilities/SystemUtilities";
+var Upload = function () {
+    var dispatch = useAppDispatch();
+    var uploadToken = useAppSelector(function (state) { return state.authenticate; }).uploadToken;
+    var files = useAppSelector(function (state) { return state.data; }).files;
+    var renamingProxy = function (newName, proxyCallback) {
+        return new Promise(function (resolve) {
+            var originalExt = originalName.split(".").pop();
+            if (newName.split(".").length === 1) {
+                setMessage("Missing file extension in '".concat(newName, "'."));
+                setColor("error");
+                setConfirmCallback(function () { return function () {
+                    resolve(false);
+                }; });
+                setCancelCallback(function () { return function () {
+                    resolve(false);
+                }; });
+                setOpen(true);
+            }
+            else if (newName.split(".").pop() !== originalExt) {
+                var newExt = newName.split(".").pop();
+                var orgExt = originalExt !== null && originalExt !== void 0 ? originalExt : "?";
+                setMessage("Changing file extension from ".concat(orgExt, " to ").concat(newExt, "."));
+                setColor("primary");
+                setConfirmCallback(function () { return function () {
+                    proxyCallback();
+                    resolve(true);
+                }; });
+                setCancelCallback(function () { return function () {
+                    resolve(false);
+                }; });
+                setOpen(true);
+            }
+            else {
+                proxyCallback();
+                resolve(true);
+            }
+        });
+    };
+    var uploadedFilesColumns = [
+        {
+            headerName: "File Name",
+            dataIndex: "fileName",
+            field: "fileName",
+            editable: true,
+            flex: 1
+        },
+        {
+            headerName: "Date Submitted",
+            dataIndex: "createdAt",
+            field: "createdAt",
+            flex: 1
+        },
+        {
+            headerName: "Status",
+            dataIndex: "status",
+            field: "status",
+            flex: 1
+        },
+        {
+            field: "actions",
+            headerName: "Edit File Name",
+            sortable: false,
+            width: 160,
+            disableClickEventBubbling: true,
+            renderCell: function (params) {
+                var index = files.findIndex(function (row) { return row.id === params.id; });
+                return (_jsx("div", { children: _jsx(IconButton, __assign({ onClick: function () {
+                            setOriginalName(files[index].fileName);
+                            setNameDialogOpen(true);
+                            setRenamingCallback(function () { return function (newName) {
+                                return renamingProxy(newName, function () {
+                                    // In case of working API
+                                    var dataReference = files[index];
+                                    //@ts-ignore
+                                    dispatch(renameUploadedData({
+                                        fileId: dataReference.id,
+                                        newName: newName
+                                    }));
+                                });
+                                // In case of non-working API, change name locally
+                                // dispatch(dataSlice.actions.renameData({index:index,alias:newName}));
+                            }; });
+                        } }, { children: params.row.renamingPending ? (_jsx(CircularProgress, { size: 20 })) : (_jsx(EditIcon, {})) })) }));
+            }
+        },
+    ];
+    // const dispatch = useAppDispatch();
+    // const { uploadToken } = useAppSelector((state) => state.authenticate);
+    // const { files } = useAppSelector((state) => state.data);
+    var _a = useState(false), nameDialogOpen = _a[0], setNameDialogOpen = _a[1];
+    var _b = useState(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, true];
+    }); }); }), renamingCallback = _b[0], setRenamingCallback = _b[1];
+    var _c = useState(""), originalName = _c[0], setOriginalName = _c[1];
+    var _d = useState(undefined), name = _d[0], setName = _d[1];
+    var _e = useState(undefined), message = _e[0], setMessage = _e[1];
+    var _f = useState(undefined), color = _f[0], setColor = _f[1];
+    var _g = useState(false), open = _g[0], setOpen = _g[1];
+    var _h = useState(function () { }), confirmCallback = _h[0], setConfirmCallback = _h[1];
+    var _j = useState(function () { }), cancelCallback = _j[0], setCancelCallback = _j[1];
+    var _k = useState([]), selectedData = _k[0], setSelectedData = _k[1];
+    useEffect(function () {
+        //@ts-ignore
+        dispatch(getUploadedData());
+        //@ts-ignore
+        dispatch(getUpstreamJobs());
+        console.log("dispatched");
+    }, []);
+    var _l = useState(0), uploadKey = _l[0], setUploadKey = _l[1];
+    function downloadSelectedValues() {
+        var downloadPending = [];
+        selectedData.forEach(function (id) {
+            for (var _i = 0, files_1 = files; _i < files_1.length; _i++) {
+                var file = files_1[_i];
+                if (file.id === id)
+                    downloadPending.push(file);
+            }
+        });
+        console.log(selectedData);
+        function downloadMultipleFiles(files) {
+            // This function creates an anchor and triggers a download
+            function triggerDownload(url, fileName) {
+                var anchor = document.createElement("a");
+                anchor.href = url;
+                console.log(url);
+                anchor.download = fileName;
+                document.body.appendChild(anchor);
+                anchor.click();
+                document.body.removeChild(anchor);
+            }
+            // Iterate over the files array
+            files.forEach(function (file, index) {
+                // Set a timeout to space out the downloads
+                setTimeout(function () {
+                    triggerDownload(file.link, file.fileName);
+                }, index * 1000); // Delay each download by 1 second
+            });
+        }
+        downloadMultipleFiles(downloadPending);
+    }
+    return (_jsxs(Fragment, { children: [_jsxs(CmrCollapse, __assign({ accordion: false, defaultActiveKey: [0, 1], expandIconPosition: "right" }, { children: [_jsxs(CmrPanel, __assign({ header: "Uploaded Data", className: "mb-2" }, { children: [_jsx(CmrTable, { dataSource: __spreadArray([], files, true).filter(function (file) {
+                                    var name = file.fileName.toLowerCase();
+                                    // return !name.endsWith(".zip") && !name.endsWith(".nii");
+                                    // TODO RJW: does this make sense? confusing if you upload a zip, it just disappears
+                                    return true; // Show all files for now
+                                })
+                                    .reverse(), rowSelectionModel: selectedData, onRowSelectionModelChange: function (rowSelectionModel) {
+                                    setSelectedData(rowSelectionModel);
+                                }, columns: uploadedFilesColumns }), _jsxs("div", __assign({ className: "row mt-2" }, { children: [_jsx("div", __assign({ className: "col-4" }, { children: _jsxs(Button, __assign({ color: "error", style: { textTransform: "none" }, variant: "contained", fullWidth: true, onClick: function () {
+                                                setName("Deleting Data");
+                                                setMessage("Please confirm that you are deleting the selected data.");
+                                                setColor("error");
+                                                setConfirmCallback(function () { return function () {
+                                                    var _loop_1 = function (id) {
+                                                        var file = files.find(function (row) { return row.id === id; });
+                                                        if (file) {
+                                                            dispatch(deleteUploadedData({
+                                                                fileId: file.id
+                                                            }));
+                                                        }
+                                                    };
+                                                    for (var _i = 0, selectedData_1 = selectedData; _i < selectedData_1.length; _i++) {
+                                                        var id = selectedData_1[_i];
+                                                        _loop_1(id);
+                                                    }
+                                                }; });
+                                                setOpen(true);
+                                            }, disabled: selectedData.length === 0 }, { children: [" ", _jsx(DeleteIcon, { className: "me-2" }), "Delete"] })) })), _jsx("div", __assign({ className: "col-4" }, { children: _jsxs(Button, __assign({ color: "success", style: { textTransform: "none" }, variant: "contained", fullWidth: true, onClick: function () {
+                                                downloadSelectedValues();
+                                            }, disabled: selectedData.length === 0 }, { children: [_jsx(GetAppIcon, { className: "me-2" }), "Download"] })) })), _jsx("div", __assign({ className: "col-4" }, { children: _jsx(CMRUpload, { fileExtension: [
+                                                ".nii",
+                                                ".nii.gz",
+                                                ".mha",
+                                                ".mhd",
+                                                ".mrd",
+                                                ".dat",
+                                                ".h5",
+                                                ".png",
+                                                ".jpg",
+                                                ".jpeg",
+                                                ".npx",
+                                                ".npy",
+                                                ".pkl",
+                                                ".mat",
+                                            ], color: "primary", fullWidth: true, onUploaded: function (res, file) {
+                                                dispatch(getUploadedData());
+                                                setUploadKey(uploadKey + 1);
+                                            }, uploadHandler: uploadHandlerFactory(uploadToken, dispatch, uploadData), maxCount: 1 }, uploadKey) }))] }))] }), "0"), _jsx(CmrNameDialog, { open: nameDialogOpen, setOpen: setNameDialogOpen, originalName: originalName, renamingCallback: renamingCallback }), _jsx(CmrConfirmation, { name: name, message: message, color: color, open: open, setOpen: setOpen, confirmCallback: confirmCallback, cancelCallback: cancelCallback, cancellable: true, width: 450 })] })), _jsx("div", { style: { height: "69px" } })] }));
+};
+export default Upload;

package/dist/core/common/components/CmrColorPicker/CmrColorPicker.d.ts

@@ -0,0 +1,8 @@
+import { ColorResult, RGBColor } from 'react-color';
+import './CmrColorPicker.scss';
+interface CmrColorPickerProps {
+    color: RGBColor;
+    onColorChange: (result: ColorResult) => void;
+}
+declare const CmrColorPicker: (props: CmrColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default CmrColorPicker;

package/dist/core/common/components/CmrColorPicker/CmrColorPicker.js

@@ -0,0 +1,29 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChromePicker } from 'react-color';
+import './CmrColorPicker.scss';
+var CmrColorPicker = function (props) {
+    var color = props.color, onColorChange = props.onColorChange;
+    var _a = useState(false), displayColorPicker = _a[0], setDisplayColorPicker = _a[1];
+    var handleClick = function () {
+        setDisplayColorPicker(!displayColorPicker);
+    };
+    var handleClose = function () {
+        setDisplayColorPicker(false);
+    };
+    return (_jsxs("div", { children: [_jsx("div", __assign({ className: "swatch", onClick: handleClick }, { children: _jsx("div", { className: "color", style: {
+                        backgroundColor: "rgba(".concat(color.r, ", ").concat(color.g, ", ").concat(color.b, ", ").concat(color.a, ")")
+                    } }) })), displayColorPicker ? (_jsxs("div", __assign({ className: "popover" }, { children: [_jsx("div", { className: "cover", onClick: handleClose }), _jsx(ChromePicker, { color: color, onChange: onColorChange })] }))) : null] }));
+};
+export default CmrColorPicker;

package/dist/core/common/components/CmrColorPicker/CmrColorPicker.scss

@@ -0,0 +1,27 @@
+.color {
+  width: 36px;
+  height: 14px;
+  border-radius: 2px;
+}
+
+.swatch {
+  padding: 5px;
+  background: #fff;
+  border-radius: 1px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
+  display: inline-block;
+  cursor: pointer;
+}
+
+.popover {
+  position: absolute;
+  z-index: 2;
+}
+
+.cover {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

package/dist/core/common/components/NiivueTools/Niivue.css

@@ -0,0 +1,8 @@
+canvas:focus {
+	outline: none;
+}
+
+.js-plotly-plot,
+.plot-container {
+	width:100%;
+}