Commit 61f0852a authored by José Pereira's avatar José Pereira
Browse files

Quality Life alterations

parent f165473a
......@@ -7518,6 +7518,14 @@
"terser": "^4.6.3"
}
},
"html-parse-stringify": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
"requires": {
"void-elements": "3.1.0"
}
},
"html-react-parser": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-1.2.1.tgz",
......@@ -7857,6 +7865,14 @@
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
},
"i18next": {
"version": "20.3.0",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-20.3.0.tgz",
"integrity": "sha512-eFv4aQvaGykp48mI4JEaCcoD/j4zoYjFnDYhChe3ukwvbHx3q4mKZlB8YnmhYrHQR5FopLlCrzcSuY0ZWfiakA==",
"requires": {
"@babel/runtime": "^7.12.0"
}
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
......@@ -12625,6 +12641,25 @@
"htmlparser2": "^3.9.0"
}
},
"react-i18next": {
"version": "11.8.15",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.15.tgz",
"integrity": "sha512-ZbKcbYYKukgDL0MiUWKJTEsEftjSTNVZv67/V+SjPqTRwuF/aL4NbUtuEcb4WjHk0HyZ1M+2wGd07Fp0RUNHKA==",
"requires": {
"@babel/runtime": "^7.13.6",
"html-parse-stringify": "^3.0.1"
},
"dependencies": {
"@babel/runtime": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
"integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
}
}
},
"react-icons": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz",
......@@ -15782,6 +15817,11 @@
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
},
"void-elements": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
"integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
},
"w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
......
......@@ -28,4 +28,16 @@
display: flex;
flex-direction: column;
padding: 8px 16px 16px;
}
.flex-grow-1{
flex-grow: 1;
}
.w-100{
width: 100%;
}
.m-r-1-rem{
margin-right: 1rem;
}
\ No newline at end of file
......@@ -6,13 +6,13 @@ import {
} from '@material-ui/core'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
const Accordion = ({ title, children }) => {
const Accordion = ({ title, style, children }) => {
const [isOpen, setIsOpen] = useState(false)
const toggleIsOpen = () => setIsOpen(!isOpen)
return (<MuiAccordion
expanded={isOpen}
onChange={toggleIsOpen}
style={{width: '100%'}}
style={style || {width: '100%'}}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon/>}
......
......@@ -6,11 +6,11 @@ import BodyWrapper from "./BodyWrapper";
export const DashboardLayout = ({ children }) => {
return (
<BodyWrapper>
<div className="flex h-screen bg-gray-200">
<div className="flex h-screen bg-gray-200 flex-grow-1">
<NavSidebar />
<div className="flex flex-col flex-1 overflow-hidden">
<main className="content">
<div className="flex flex-col flex-1 overflow-hidden flex-grow-1">
<main className="content w-100 m-r-1-rem">
<section className="sm:flex-row flex flex-col flex-1">
<div
className="content-box"
......
......@@ -4,34 +4,24 @@ import { useHistory, useLocation } from "react-router-dom";
import Icon from "awesome-react-icons";
import React, { useState } from "react";
import { FaChartPie } from 'react-icons/fa';
import {ResultsDisposition} from '../pages/results'
import { ResultsDisposition } from '../pages/results'
import "react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css";
export const NavSidebar = ({outputsFiles}) => {
/*const Pagination = (filesinfo) =>{
return filesinfo.map(file =>{
let [name,blob] = file
return({
title: `${name}`,
itemId: `/MOSGUITO/${name}`
})
})
}*/
export const NavSidebar = ({ outputsFiles }) => {
const history = useHistory();
const location = useLocation();
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
if(ResultsDisposition === false){
if (ResultsDisposition === false) {
return (
<React.Fragment>
{/* Sidebar Overlay */}
<div
onClick={() => setIsSidebarOpen(false)}
className={`fixed inset-0 z-20 block transition-opacity bg-black opacity-50 lg:hidden ${
isSidebarOpen ? "block" : "hidden"
}`}
className={`fixed inset-0 z-20 block transition-opacity bg-black opacity-50 lg:hidden ${isSidebarOpen ? "block" : "hidden"
}`}
/>
<div>
<button
className="btn-menu"
......@@ -41,14 +31,13 @@ export const NavSidebar = ({outputsFiles}) => {
<Icon name="burger" className="w-6 h-6" />
</button>
</div>
{/* Sidebar */}
<div
className={`fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 ease-out transform translate-x-0 bg-white border-r-2 lg:translate-x-0 lg:static lg:inset-0 ${
isSidebarOpen ? "ease-out -translate-x-0" : "ease-in -translate-x-full"
}`}
className={`fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 ease-out transform translate-x-0 bg-white border-r-2 lg:translate-x-0 lg:static lg:inset-0 ${isSidebarOpen ? "ease-out -translate-x-0" : "ease-in -translate-x-full"
}`}
>
<Navigation
activeItemId={location.pathname}
onSelect={({ itemId }) => {
......@@ -108,7 +97,7 @@ export const NavSidebar = ({outputsFiles}) => {
}
]}
/>
<div className="absolute bottom-0 w-full my-8">
<Navigation
activeItemId={location.pathname}
......@@ -127,138 +116,136 @@ export const NavSidebar = ({outputsFiles}) => {
</div>
</React.Fragment>
);
}else{
} else {
return (
<React.Fragment>
{/* Sidebar Overlay */}
<div
onClick={() => setIsSidebarOpen(false)}
className={`fixed inset-0 z-20 block transition-opacity bg-black opacity-50 lg:hidden ${
isSidebarOpen ? "block" : "hidden"
}`}
/>
<div>
<button
className="btn-menu"
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
type="button"
>
<Icon name="burger" className="w-6 h-6" />
</button>
</div>
return (
<React.Fragment>
{/* Sidebar Overlay */}
<div
onClick={() => setIsSidebarOpen(false)}
className={`fixed inset-0 z-20 block transition-opacity bg-black opacity-50 lg:hidden ${isSidebarOpen ? "block" : "hidden"
}`}
/>
{/* Sidebar */}
<div
className={`fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 ease-out transform translate-x-0 bg-white border-r-2 lg:translate-x-0 lg:static lg:inset-0 ${
isSidebarOpen ? "ease-out -translate-x-0" : "ease-in -translate-x-full"
}`}
>
<div>
<button
className="btn-menu"
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
type="button"
>
<Icon name="burger" className="w-6 h-6" />
</button>
</div>
<Navigation
activeItemId={location.pathname}
onSelect={({ itemId }) => {
history.push(itemId);
}}
items={[
{
title: "Home",
itemId: "/MOSGUITO/home",
elemBefore: () => <Icon name="coffee" />
},
{
title: "About",
itemId: "/MOSGUITO/about",
elemBefore: () => <Icon name="user" />,
subNav: [
{
title: "Project",
itemId: "/MOSGUITO/project"
},
{
title: "Members",
itemId: "/MOSGUITO/members"
}
]
},
{
title: "Configuration",
itemId: "/MOSGUITO/config",
elemBefore: () => <Icon name="settings" />,
subNav: [
{
title: "General configuration",
itemId: "/MOSGUITO/general-configuration"
},
{
title: "Experiments",
itemId: "/MOSGUITO/experiments"
},
{
title: "UniProt columns",
itemId: "/MOSGUITO/uniprot-columns"
},
{
title: "UniProt databases",
itemId: "/MOSGUITO/uniprot-databases"
},
{
title: "KEGG metabolic maps",
itemId: "/MOSGUITO/keggmaps"
},
{
title: "Proteomics configuration",
itemId: "/MOSGUITO/proteomics-configuration"
}
]
}
]}
/>
{/* Sidebar */}
<div
className={`fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 ease-out transform translate-x-0 bg-white border-r-2 lg:translate-x-0 lg:static lg:inset-0 ${isSidebarOpen ? "ease-out -translate-x-0" : "ease-in -translate-x-full"
}`}
>
<div className="absolute bottom-0 w-full my-8">
<Navigation
activeItemId={location.pathname}
onSelect={({ itemId }) => {
history.push(itemId);
}}
items={[
{
title: "Results",
itemId: "/MOSGUITO/results",
elemBefore: () => <FaChartPie />,
title: "Home",
itemId: "/MOSGUITO/home",
elemBefore: () => <Icon name="coffee" />
},
{
title: "About",
itemId: "/MOSGUITO/about",
elemBefore: () => <Icon name="user" />,
subNav: [
{
title: "Load results",
itemId: "/MOSGUITO/load-results"
},
{
title: "FastQC reports",
itemId: "/MOSGUITO/fastqc-reports",
//subNav: {Pagination(outputsFiles.qcReports)}
},
{
title: "Assembly QC",
itemId: "/MOSGUITO/assembly-qc"
},
{
title: 'Annotation Results',
itemId: '/MOSGUITO/annotation-results'
},
{
title: 'Differential Analysis',
itemId: '/MOSFUITO/differential-analysis'
},
{
title: 'KEGGmaps',
itemId: '/MOSGUITO/keggmaps-results'
}
]
{
title: "Project",
itemId: "/MOSGUITO/project"
},
{
title: "Members",
itemId: "/MOSGUITO/members"
}
]
},
{
title: "Configuration",
itemId: "/MOSGUITO/config",
elemBefore: () => <Icon name="settings" />,
subNav: [
{
title: "General configuration",
itemId: "/MOSGUITO/general-configuration"
},
{
title: "Experiments",
itemId: "/MOSGUITO/experiments"
},
{
title: "UniProt columns",
itemId: "/MOSGUITO/uniprot-columns"
},
{
title: "UniProt databases",
itemId: "/MOSGUITO/uniprot-databases"
},
{
title: "KEGG metabolic maps",
itemId: "/MOSGUITO/keggmaps"
},
{
title: "Proteomics configuration",
itemId: "/MOSGUITO/proteomics-configuration"
}
]
}
]}
onSelect={({ itemId }) => {
history.push(itemId);
}}
/>
<div className="absolute bottom-0 w-full my-8">
<Navigation
activeItemId={location.pathname}
items={[
{
title: "Results",
itemId: "/MOSGUITO/results",
elemBefore: () => <FaChartPie />,
subNav: [
{
title: "Load results",
itemId: "/MOSGUITO/load-results"
},
{
title: "FastQC reports",
itemId: "/MOSGUITO/fastqc-reports"
},
{
title: "Assembly QC",
itemId: "/MOSGUITO/assembly-qc"
},
{
title: 'Annotation Results',
itemId: '/MOSGUITO/annotation-results'
},
{
title: 'Differential Analysis',
itemId: '/MOSFUITO/differential-analysis'
},
{
title: 'KEGGmaps',
itemId: '/MOSGUITO/keggmaps-results'
}
]
}
]}
onSelect={({ itemId }) => {
history.push(itemId);
}}
/>
</div>
</div>
</div>
</React.Fragment>
);
};}
</React.Fragment>
);
};
}
import React, {useState} from 'react';
import {DashboardLayout} from '../components/Layout';
import { Button, Toolbar, Typography } from "@material-ui/core";
import Accordion from "../components/Accordion";
export const AnnotationResults = ({ outputsFiles }) => {
const getAnnotationResults = (files) => {
console.log(files)
let blobNumber = 0;
return files.map(file => {
blobNumber++;
const fileUrl = URL.createObjectURL(file)
const fileUrl = URL.createObjectURL(file.blob)
return <div key={`blob_${blobNumber}`}>
<iframe src={fileUrl} style={{width: "1000px", height: "300px"}}></iframe>
<br/>
<hr/>
<br/>
</div>
return <Accordion key={`accordion_${blobNumber}`} title = {file.name}>
<iframe src={fileUrl} style={{width: "100%", height: "1000px"}}></iframe>
</Accordion>
})
}
return (
<DashboardLayout>
<h1>Teste</h1>
<Toolbar>
<Typography variant="h6">Annotation Results</Typography>
</Toolbar>
{getAnnotationResults(outputsFiles)}
</DashboardLayout>
......
......@@ -15,20 +15,20 @@ export const DifferentialResults = ({ outputsFiles }) => {
return files.map(file => {
blobNumber++;
const fileUrl = URL.createObjectURL(file)
const fileUrl = URL.createObjectURL(file.blob)
return <div key={`blob_${blobNumber}`}>
<img src={fileUrl} style={{margin: 'auto', justifyContent: 'center'}}></img>
<br/>
<hr/>
<br/>
<h1 style= {{textAlign: 'center', fontWeight:'bold', marginBottom:'1cm'}}>{file.name}</h1>
<img src={fileUrl} style={{margin: 'auto', marginBottom: '2cm', justifyContent: 'center'}} ></img>
</div>
})
}
return (
<DashboardLayout>
<h1>Teste</h1>
<Toolbar>
<Typography variant="h6">Differential Analysis Results</Typography>
</Toolbar>
{getJsxFromFiles(outputsFiles)}
</DashboardLayout>
......
import React, {useState} from 'react';
import React, { useState } from 'react';
import {DashboardLayout} from '../components/Layout';
import {Button, Toolbar, Typography} from "@material-ui/core";
import ReactHtmlParser,{ processNodes, convertNodeToElement, htmlparser2 } from "react-html-parser";
import { DashboardLayout } from '../components/Layout';
import { Button, Toolbar, Typography } from "@material-ui/core";
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from "react-html-parser";
import Accordion from "../components/Accordion";
import { file } from 'jszip';
export const FastQCFiles = ({ outputsFiles }) => {
......@@ -14,20 +13,19 @@ export const FastQCFiles = ({ outputsFiles }) => {
return files.map(file => {
blobNumber++;
const fileUrl = URL.createObjectURL(file)
const fileUrl = URL.createObjectURL(file.blob)
return <div key={`blob_${blobNumber}`}>
<iframe src={fileUrl} style={{width: "1000px", height: "300px"}}></iframe>
<br/>
<hr/>
<br/>
</div>
return <Accordion key={`accordion_${blobNumber}`} title={file.name}>
<iframe src={fileUrl} style={{ width: "100%", height: "1000px" }}></iframe>
</Accordion>
})
}
return (
<DashboardLayout outputsFiles = {outputsFiles}>
<h1>Teste</h1>
<DashboardLayout outputsFiles={outputsFiles}>
<Toolbar>
<Typography variant="h6">FastQC Reports</Typography>
</Toolbar>
{getJsxFromFiles(outputsFiles.qcReports)}
</DashboardLayout>
......
......@@ -4,6 +4,12 @@ import { Button, Toolbar, Typography } from "@material-ui/core";
import ReactHtmlParser from 'react-html-parser';
import * as zip from "@zip.js/zip.js/dist/zip.min.js";
const treatName = (name) =>{
let resultingString = name.split('/')
resultingString = resultingString[resultingString.length-1]
resultingString = resultingString.split('.')
return(resultingString[0])
}
export let ResultsDisposition = false;
async function obtainBlobArray(event){
......@@ -15,26 +21,25 @@ async function obtainBlobArray(event){
let KronaPlotsResults = [];
let DifferentailExpressionResults = [];
let KEGGMapsResults = [];
console.log(entries)
for(let i = 0; i< entries.length; i++){
if (entries[i].directory === false && entries[i].compressedSize != 0){
if(entries[i].filename.includes('Preprocess')){
console.log(entries[i])
const blobFastQC = await entries[i].getData(new zip.BlobWriter(['text/html']))
FastQCReports.push(blobFastQC)
let fastQcName = treatName(entries[i].filename)
FastQCReports.push({name: fastQcName, blob: blobFastQC})
}
if(entries[i].filename.includes('Annotation')){
const blobKronaPlots = await entries[i].getData(new zip.BlobWriter(['text/html']))
KronaPlotsResults.push(blobKronaPlots)
let kronaPlotsNames = treatName(entries[i].filename)
KronaPlotsResults.push({name: kronaPlotsNames, blob: blobKronaPlots})
}
if(entries[i].filename.includes('Differential expression analysis')){
const blobHeatmaps = await entries[i].getData(new zip.BlobWriter(['image/jpeg']))
DifferentailExpressionResults.push(blobHeatmaps)