Unverified Commit 2dbfbe25 authored by João Sequeira's avatar João Sequeira Committed by GitHub
Browse files

Merge pull request #4 from JosePereira97/main

Search Bar Update $ Configfiles 
parents 3a93056a 70caaf59
This diff is collapsed.
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/>)
}
......
......@@ -119,10 +119,8 @@ const Main = ({ outputsFiles, setOutputsFiles, onConfigOverwrite, setExperiments
const handleZipChange = async (event) => {
let Output = await ObtainBlobArray(event)
setOutputsFiles(Output[0])
console.log(Output[1])
Object.keys(Output[1]).map(
(key) => delete Object.assign(Output[1], {[snakeToCamelCase(key)]: Output[1][key]})[key])
console.log(Output[1])
(key) => delete Object.assign(Output[1], {[snakeToCamelCase(key)]: Output[1][key]}))
onConfigOverwrite(Output[1])
const readCsv = (csvUrl)=>{
......
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