visualifyjs 2.5.3-2.dev

package/package.json

@@ -0,0 +1,84 @@
+{
+    "name": "visualifyjs",
+    "version": "2.5.3-2.dev",
+    "main": "dist/visualify.js",
+    "homepage": "https://visualify.pharmacy.arizona.edu",
+    "license": "GNU General Public License v3.0",
+    "description": "Visualify is a web-based platform for visualizing and analyzing large-scale omics data.",
+    "keywords": [
+        "visualization",
+        "analysis",
+        "web",
+        "platform"
+    ],
+    "dependencies": {
+        "@testing-library/jest-dom": "^5.17.0",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "ace-builds": "^1.32.0",
+        "axios": "^1.6.2",
+        "bootstrap": "^5.3.2",
+        "dompurify": "^3.0.6",
+        "echarts": "^5.4.3",
+        "echarts-for-react": "^3.0.2",
+        "hilbert": "^2.0.0",
+        "lodash": "^4.17.21",
+        "react": "^18.2.0",
+        "react-ace": "^10.1.0",
+        "react-bootstrap": "^2.9.1",
+        "react-dom": "^18.2.0",
+        "react-markdown": "^9.0.1",
+        "react-plotly.js": "^2.6.0",
+        "react-router-dom": "^6.20.0",
+        "react-scripts": "5.0.1",
+        "react-select": "^5.8.0",
+        "remark": "^15.0.1",
+        "remark-html": "^16.0.1",
+        "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+        "rollup": "rollup -c",
+        "start": "react-app-rewired start",
+        "build": "npm run rollup & react-app-rewired build",
+        "test": "react-app-rewired test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@babel/core": "^7.23.5",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/preset-env": "^7.23.5",
+        "@babel/preset-react": "^7.23.3",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "@rollup/plugin-image": "^3.0.3",
+        "@rollup/plugin-json": "^6.0.1",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-replace": "^5.0.5",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-url": "^8.0.2",
+        "babel-plugin-inline-react-svg": "^2.0.2",
+        "react-app-rewired": "^2.2.1",
+        "rollup": "^2.79.1",
+        "rollup-plugin-css-only": "^4.5.2",
+        "rollup-plugin-polyfill-node": "^0.13.0",
+        "rollup-plugin-postcss": "^4.0.2"
+    }
+}

package/rollup.config.mjs

@@ -0,0 +1,76 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 12:51:04
+ * @FilePath     : /visualifyjs/rollup.config.mjs
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+// rollup.config.js
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import replace from '@rollup/plugin-replace';
+import terser from '@rollup/plugin-terser';
+import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+import image from '@rollup/plugin-image';
+import inlineReactSvg from 'babel-plugin-inline-react-svg';
+import url from '@rollup/plugin-url';
+
+//import css from 'rollup-plugin-css-only';
+
+function onwarn(warning, warn) {
+    if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+        return;
+    }
+    warn(warning);
+}
+
+export default {
+    input: 'src/index.js',
+    output: [{
+            dir: 'dist/',
+            format: 'esm',
+            entryFileNames: 'visualify.js',
+            inlineDynamicImports: true,
+            sourcemap: false,
+        },
+        {
+            dir: 'docs/static/js',
+            format: 'esm',
+            entryFileNames: 'visualify.js',
+            inlineDynamicImports: true,
+            sourcemap: false,
+        },
+    ],
+    plugins: [
+        replace({
+            preventAssignment: true,
+            'process.env.NODE_ENV': JSON.stringify('production'),
+        }),
+        resolve({ browser: true }),
+        babel({
+            exclude: 'node_modules/**',
+            babelHelpers: 'bundled',
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+            plugins: [inlineReactSvg],
+        }),
+        postcss({
+            extensions: ['.css'],
+            inject: true,
+            minimize: true,
+        }),
+        url({
+            include: ['**/*.svg'], // Only SVG files
+            limit: 0, // 0 bytes
+            emitFiles: true,
+        }),
+        commonjs(),
+        terser(),
+        json(),
+        nodePolyfills(),
+        image(),
+    ],
+    onwarn,
+};

package/src/_css/404.css

@@ -0,0 +1,116 @@
+* {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body.colorlib-body {
+    padding: 0;
+    margin: 0;
+}
+
+#colorlib-notfound {
+    min-height: 60vh;
+    /* Ensures that the container takes at least the full viewport height */
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    /* Stack children vertically */
+    justify-content: center;
+    /* Center children vertically */
+    align-items: center;
+    /* Center children horizontally */
+    padding: 3rem 1rem;
+    /* Add some padding around */
+}
+
+.colorlib-notfound {
+    max-width: 767px;
+    width: -moz-fit-content;
+    width: fit-content;
+    line-height: 1.4;
+    padding: 0 15px;
+    text-align: center;
+    /* Center the text */
+}
+
+.colorlib-notfound .colorlib-notfound-404 {
+    position: relative;
+    height: 150px;
+    line-height: 150px;
+    margin-bottom: 25px;
+}
+
+.colorlib-notfound .colorlib-notfound-404 h1 {
+    font-family: 'Titillium Web', sans-serif;
+    font-size: 186px;
+    font-weight: 900;
+    margin: 0;
+    text-transform: uppercase;
+    background: url('../_media/404.png') no-repeat center;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: cover;
+}
+
+.colorlib-notfound h2 {
+    font-family: 'Titillium Web', sans-serif;
+    font-size: 26px;
+    font-weight: 700;
+    margin: 0;
+}
+
+.colorlib-notfound p {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 0;
+    text-transform: uppercase;
+}
+
+.colorlib-notfound a {
+    font-family: 'Titillium Web', sans-serif;
+    display: inline-block;
+    text-transform: uppercase;
+    color: #fff;
+    text-decoration: none;
+    background: #5c91fe;
+    padding: 10px 40px;
+    font-size: 14px;
+    font-weight: 700;
+    border-radius: 1px;
+    margin-top: 15px;
+    -webkit-transition: 0.2s all;
+    transition: 0.2s all;
+}
+
+.colorlib-notfound a:hover {
+    opacity: 0.8;
+}
+
+.colorlib-copyrigh {
+    font-size: 0.8rem;
+    text-align: center;
+    margin-top: 20px;
+    width: 100%;
+    position: absolute;
+    /* Make it break out of the flexbox */
+    bottom: 10px;
+    /* Position it at the bottom of the page */
+}
+
+@media only screen and (max-width: 767px) {
+    .colorlib-notfound .colorlib-notfound-404 {
+        height: 110px;
+        line-height: 110px;
+    }
+    .colorlib-notfound .colorlib-notfound-404 h1 {
+        font-size: 120px;
+    }
+}
+
+@media only screen and (max-height: 600px) {
+    #colorlib-notfound {
+        min-height: 100vh;
+    }
+}

package/src/_css/App.css

@@ -0,0 +1,38 @@
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 20vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.App-header {
+    background-color: #282c34;
+    min-height: 10vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}

package/src/_css/autoSuggestion.css

@@ -0,0 +1,27 @@
+.autosuggestion {
+    position: relative;
+    margin: 1rem;
+}
+
+.suggestion-list {
+    position: relative;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    background-color: white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    overflow: auto;
+    z-index: 1000;
+    border-radius: 4px;
+}
+
+.suggestion-item {
+    padding: 8px 16px;
+    cursor: pointer;
+    text-align: center;
+}
+
+.suggestion-item:hover {
+    background-color: #f0f0f0;
+}

package/src/_css/circular-progress.css

@@ -0,0 +1,33 @@
+.circular-progress {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.spinner {
+    width: 30px;
+    height: 30px;
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #333;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+.spinner.primary {
+    border-left-color: #1976d2;
+    /* Change color as needed */
+}
+
+.spinner.secondary {
+    border-left-color: #f50057;
+    /* Change color as needed */
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/_css/index.css

@@ -0,0 +1,37 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+.reference-list {
+    padding: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.25rem;
+}
+
+.reference-item.none {
+    list-style-type: none;
+}
+
+.reference-item.circle {
+    list-style-type: circle;
+}
+
+.reference-item.disc {
+    list-style-type: disc;
+}
+
+.reference-item.square {
+    list-style-type: square;
+}
+
+.no-border-radius {
+    border-radius: 0 !important;
+}

package/src/_css/modern.css

@@ -0,0 +1,25 @@
+.v-header .rainbow-text {
+    background-image: linear-gradient( to right, rgb(198, 255, 221), rgb(251, 215, 134), rgb(247, 121, 125));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.v-header .logo {
+    padding-bottom: 5px;
+}
+
+.navbar-nav .nav-link.active {
+    font-weight: bold;
+}
+
+.selection-box-container {
+    max-width: 100%;
+    min-height: 100px;
+    height: auto;
+}
+
+.select-wrapper {
+    max-width: 100%;
+    margin-bottom: 10px;
+}

package/src/_media/corner.svg

@@ -0,0 +1,8 @@
+<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+	<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">
+	</path>
+	<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm">
+	</path>
+	<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">
+	</path>
+</svg>

package/src/_media/download.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
+	<path d="M30 20.75c-0.69 0.001-1.249 0.56-1.25 1.25v6.75h-25.5v-6.75c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 8c0 0.69 0.56 1.25 1.25 1.25h28c0.69-0.001 1.249-0.56 1.25-1.25v-8c-0.001-0.69-0.56-1.249-1.25-1.25h-0zM15.116 24.885c0.012 0.012 0.029 0.016 0.041 0.027 0.103 0.099 0.223 0.18 0.356 0.239l0.008 0.003 0.001 0c0.141 0.060 0.306 0.095 0.478 0.095 0.345 0 0.657-0.139 0.883-0.365l5.001-5c0.226-0.226 0.366-0.539 0.366-0.884 0-0.691-0.56-1.251-1.251-1.251-0.345 0-0.658 0.14-0.884 0.366l-2.865 2.867v-18.982c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 18.981l-2.866-2.866c-0.226-0.226-0.539-0.366-0.884-0.366-0.691 0-1.251 0.56-1.251 1.251 0 0.346 0.14 0.658 0.367 0.885v0z" />
+</svg>