Commit 571235e8 authored by José Pereira's avatar José Pereira
Browse files

Merge branch 'main' into Badjoras

parents 3a93056a fe8647f7
......@@ -6282,6 +6282,11 @@
"jest-regex-util": "^26.0.0"
}
},
"export-from-json": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/export-from-json/-/export-from-json-1.4.0.tgz",
"integrity": "sha512-YxgwKkaWU6Ox18AqicgZJ7aB9twSo9KAxraoXcoecxaw68W8npO0LGjbQPQDCY8dCZDD+zj3Es6thA0o4U5QMg=="
},
"express": {
"version": "4.17.1",
"resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
......@@ -11050,9 +11055,9 @@
"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
},
"postcss": {
"version": "7.0.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
"integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
"version": "7.0.36",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
"integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
......
import React from "react";
import styled from "styled-components";
const Input = styled.input.attrs(props => ({
type: "text",
size: props.small ? 5 : undefined
}))`
height: 32px;
width: 200px;
border-radius: 3px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid #e5e5e5;
padding: 0 32px 0 16px;
`;
const ClearButton = styled.button`
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 34px;
width: 32px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
`;
const FilterComponent = ({ filterText, onFilter, onClear }) => (
<>
<Input
id="search"
type="text"
placeholder="Filter data..."
value={filterText}
onChange={onFilter}
/>
<ClearButton onClick={onClear}>X</ClearButton>
</>
);
export default FilterComponent;
\ No newline at end of file
import React, { Component, useState, useEffect } from 'react';
import React, { Component, useState, useEffect, useMemo } from 'react';
import { DashboardLayout } from '../components/Layout';
import { Button, Toolbar, Typography } from "@material-ui/core";
import * as Papa from "papaparse"
import styled from 'styled-components';
import DataTable from 'react-data-table-component'
import Accordion from "../components/Accordion";
import { file } from 'jszip';
import FilterComponent from './FilterDataTest';
const Main = ({ outputsFolder }) => {
......@@ -58,15 +56,46 @@ const Main = ({ outputsFolder }) => {
return ({ name: capitalizeFirstLetter(key), selector: key, sortable: true })
})
}
const [filterText, setFilterText] = useState("");
const [resetPaginationToggle, setResetPaginationToggle] = useState(false);
const subHeaderComponent = useMemo(() => {
const handleClear = () => {
if (filterText) {
setResetPaginationToggle(!resetPaginationToggle);
setFilterText("");
}
};
return (
<FilterComponent
onFilter={e => setFilterText(e.target.value)}
onClear={handleClear}
filterText={filterText}
/>
);
}, [filterText, resetPaginationToggle]);
const checkVoid = (file) =>{
if(file[0] != undefined){
return(<DataTable
style={{ width: "100%", height: "100%" }}
title={file[0].fileName}
noHeader
columns={getColumnNamesFromData(file[0].fileContent)}
data={file[0].fileContent}
/>)
const filteredItems = table[0].fileContent.filter(
item =>
JSON.stringify(item)
.toLowerCase()
.indexOf(filterText.toLowerCase()) !== -1);
return(<DataTable
style={{ width: "100%", height: "100%" , margin: 'auto'}}
title={file[0].fileName}
pagination
paginationRowsPerPageOptions = {[10,20,30,40,50]}
noHeader
striped
subHeader
subHeaderComponent={subHeaderComponent}
columns={getColumnNamesFromData(file[0].fileContent)}
data={filteredItems}
/>)
}else{
return(<div/>)
}
......
import React, { Component, useState, useEffect } from 'react';
import React, { Component, useState, useEffect, useMemo } from 'react';
import { DashboardLayout } from '../components/Layout';
import { Button, Toolbar, Typography } from "@material-ui/core";
import * as Papa from "papaparse"
import styled from 'styled-components';
import DataTable from 'react-data-table-component'
import Accordion from "../components/Accordion";
import { file } from 'jszip';
import FilterComponent from './FilterDataTest';
import TSV from "tsv";
import download from "../utils/download";
const Main = ({ outputsFolder }) => {
......@@ -13,7 +13,7 @@ const Main = ({ outputsFolder }) => {
return array.map((dic)=>{
const newReplace = {}
for(const [key, value] of Object.entries(dic)){
let newKey = key.replaceAll('.', '/').replaceAll('[','(').replaceAll(']',')').replaceAll(':','_')
let newKey = key.replaceAll('.', '/').replaceAll('[','(').replaceAll(']',')').replaceAll(':','_').replaceAll('{','(').replaceAll('}',')')
newReplace[newKey] = value
}
return newReplace
......@@ -55,23 +55,59 @@ const Main = ({ outputsFolder }) => {
const getColumnNamesFromData = (fileContent) => {
return Object.keys(fileContent[0]).map(key => {
console.log(key)
return ({ name: capitalizeFirstLetter(key), selector: key, sortable: true })
})
}
const [filterText, setFilterText] = useState("");
const [resetPaginationToggle, setResetPaginationToggle] = useState(false);
const subHeaderComponent = useMemo(() => {
const handleClear = () => {
if (filterText) {
setResetPaginationToggle(!resetPaginationToggle);
setFilterText("");
}
};
return (
<FilterComponent
onFilter={e => setFilterText(e.target.value)}
onClear={handleClear}
filterText={filterText}
/>
);
}, [filterText, resetPaginationToggle]);
const downloadBeta = (downloadFile)=>{
download(TSV.stringify(downloadFile), "ProteinReportsParsed.tsv", "tsv")
}
const checkVoid = (file) =>{
console.log(file)
if(file[0] != undefined){
return(<DataTable
style={{ width: "100%", height: "100%" }}
title={file[0].fileName}
pagination
paginationRowsPerPageOptions = {[10,20,30,40,50]}
noHeader
columns={getColumnNamesFromData(file[0].fileContent)}
data={file[0].fileContent}
/>)
const filteredItems = table[0].fileContent.filter(
item =>
JSON.stringify(item)
.toLowerCase()
.indexOf(filterText.toLowerCase()) !== -1);
const download = ()=>{
downloadBeta(filteredItems)
}
return(<div><DataTable
style={{ width: "100%", height: "100%" , margin: 'auto'}}
title={file[0].fileName}
pagination
paginationRowsPerPageOptions = {[10,20,30,40,50]}
noHeader
striped
subHeader
subHeaderComponent={subHeaderComponent}
columns={getColumnNamesFromData(file[0].fileContent)}
data={filteredItems}
/>
<Button onClick = {download} variant='contained'
color='secondary'>
Click to download the filtered results
</Button>
</div>)
}else{
return(<div/>)
}
......
import React, { Component, useState, useEffect } from 'react';
import React, { Component, useState, useEffect, useMemo } from 'react';
import { DashboardLayout } from '../components/Layout';
import { Button, Toolbar, Typography } from "@material-ui/core";
import * as Papa from "papaparse"
import styled from 'styled-components';
import DataTable from 'react-data-table-component'
import Accordion from "../components/Accordion";
import { file } from 'jszip';
import FilterComponent from './FilterDataTest';
import TSV from "tsv";
import download from "../utils/download";
const Main = ({ outputsFolder }) => {
......@@ -59,18 +59,58 @@ const Main = ({ outputsFolder }) => {
return ({ name: capitalizeFirstLetter(key), selector: key, sortable: true })
})
}
const [filterText, setFilterText] = useState("");
const [resetPaginationToggle, setResetPaginationToggle] = useState(false);
const subHeaderComponent = useMemo(() => {
const handleClear = () => {
if (filterText) {
setResetPaginationToggle(!resetPaginationToggle);
setFilterText("");
}
};
return (
<FilterComponent
onFilter={e => setFilterText(e.target.value)}
onClear={handleClear}
filterText={filterText}
/>
);
}, [filterText, resetPaginationToggle]);
const downloadBeta = (downloadFile)=>{
download(TSV.stringify(downloadFile), "EntryReportsParsed.tsv", "tsv")
}
const checkVoid = (file) =>{
if(file[0] != undefined){
return(<DataTable
const filteredItems = table[0].fileContent.filter(
item =>
JSON.stringify(item)
.toLowerCase()
.indexOf(filterText.toLowerCase()) !== -1);
const download = ()=>{
downloadBeta(filteredItems)
}
return(<div><DataTable
style={{ width: "100%", height: "100%" , margin: 'auto'}}
title={file[0].fileName}
pagination
paginationRowsPerPageOptions = {[10,20,30,40,50]}
noHeader
striped
subHeader
subHeaderComponent={subHeaderComponent}
columns={getColumnNamesFromData(file[0].fileContent)}
data={file[0].fileContent}
/>)
data={filteredItems}
/>
<Button onClick = {download} variant='contained'
color='secondary'>
Click to download the filtered results
</Button>
</div>)
}else{
return(<div/>)
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment