Commit 78826f00 authored by iquasere's avatar iquasere
Browse files

Separated the accordions from the general configurations

* Also reworked the links
parent ca03a96b
......@@ -26,16 +26,20 @@
</component>
<component name="ChangeListManager">
<list default="true" id="75167860-5315-49c7-8bd4-159fb3049cae" name="Default Changelist" comment="Broken maps input">
<change afterPath="$PROJECT_DIR$/src/utils/downloadExcel.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/keggmaps.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/uniprotinfo.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/ExperimentsTable.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ExperimentsTable.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/KeggMapsAccordion.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/KeggMapsAccordion.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/NavSidebar.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/NavSidebar.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/UniprotColumnsAccordion.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UniprotColumnsAccordion.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/UniprotDatabasesAccordion.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UniprotDatabasesAccordion.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/_app.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/_app.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/_routes.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/_routes.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/about.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/about.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/config.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/config.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/experiments.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/experiments.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/members.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/members.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/projects.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/project.js" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
......@@ -153,7 +157,7 @@
<workItem from="1607943180230" duration="10422000" />
<workItem from="1607977275152" duration="4993000" />
<workItem from="1608029123434" duration="11424000" />
<workItem from="1608111477905" duration="6237000" />
<workItem from="1608111477905" duration="12559000" />
</task>
<task id="LOCAL-00001" summary="First steps">
<created>1603985640072</created>
......@@ -295,7 +299,14 @@
<option name="project" value="LOCAL" />
<updated>1608060139155</updated>
</task>
<option name="localTasksCounter" value="21" />
<task id="LOCAL-00021" summary="Experiments can now be downloaded as TSV">
<created>1608129868012</created>
<option name="number" value="00021" />
<option name="presentableId" value="LOCAL-00021" />
<option name="project" value="LOCAL" />
<updated>1608129868012</updated>
</task>
<option name="localTasksCounter" value="22" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
......@@ -344,6 +355,7 @@
<MESSAGE value="Added experiments table&#10;* still not functional, and huge memory leak problem" />
<MESSAGE value="Began structuring side menu" />
<MESSAGE value="Fixed changing config and experiments" />
<option name="LAST_COMMIT_MESSAGE" value="Fixed changing config and experiments" />
<MESSAGE value="Experiments can now be downloaded as TSV" />
<option name="LAST_COMMIT_MESSAGE" value="Experiments can now be downloaded as TSV" />
</component>
</project>
\ No newline at end of file
import React, { useState } from 'react';
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import LabelledSelect from "./LabelledSelect";
......@@ -45,6 +45,15 @@ const ExperimentsTable = ({ experiments, setExperiments, nExperimentsRows, setEx
setExperimentsRows(nExperimentsRows + 1)
}
const decreaseRows = () => {
const newExperiments = [...experiments]
newExperiments.pop()
setExperiments(newExperiments)
setExperimentsRows(nExperimentsRows - 1)
}
const editExperiments = (value, n, field) => {
const newExperiments = [...experiments]
......@@ -132,6 +141,13 @@ const ExperimentsTable = ({ experiments, setExperiments, nExperimentsRows, setEx
>
Add row
</Button>
<Button
onClick={(ev) => decreaseRows()}
variant='contained'
color='secondary'
>
Remove last row
</Button>
</Paper>
);
}
......
import Accordion from './Accordion'
import LabelledCheckbox from "./LabelledCheckbox"
import { keggMaps } from '../utils/keggMaps'
import {Card, CardContent, Typography} from "@material-ui/core";
import React from "react";
const KeggMapsAccordion = ({ maps, keggMapList, onChange }) => {
const KeggMapsAccordion = ({ keggMapList, onChange }) => {
const handleCheck = value => {
const newList = [...keggMapList]
......@@ -17,30 +20,37 @@ const KeggMapsAccordion = ({ maps, keggMapList, onChange }) => {
}
return (
<Accordion title='KEGG metabolic maps'>
{
maps.children.map((category, index) => (
<Accordion key={index} title={category.name}>
{
category.children.map((subCategory, index) => (
<Accordion key={index} title={subCategory.name}>
{
subCategory.children.map(({ name }, index) => (
<LabelledCheckbox
key={index}
label={name[1]}
checked={keggMapList.indexOf(name[0]) > -1}
setChecked={() => handleCheck(name[0])}
/>)
)
}
</Accordion>
))
}
</Accordion>
))
}
</Accordion>
<main className='main'>
<Card >
<CardContent>
<Typography variant='body1'>
KEGG metabolic maps for KEGGCharter
</Typography>
{
keggMaps.children.map((category, index) => (
<Accordion key={index} title={category.name}>
{
category.children.map((subCategory, index) => (
<Accordion key={index} title={subCategory.name}>
{
subCategory.children.map(({ name }, index) => (
<LabelledCheckbox
key={index}
label={name[1]}
checked={keggMapList.indexOf(name[0]) > -1}
setChecked={() => handleCheck(name[0])}
/>)
)
}
</Accordion>
))
}
</Accordion>
))
}
</CardContent>
</Card>
</main>
)
}
......
......@@ -46,36 +46,44 @@ export const NavSidebar = () => {
items={[
{
title: "Home",
itemId: "/home",
itemId: "/MOSGUITO/home",
elemBefore: () => <Icon name="coffee" />
},
{
title: "About",
itemId: "/about",
itemId: "/MOSGUITO/about",
elemBefore: () => <Icon name="user" />,
subNav: [
{
title: "Projects",
itemId: "/about/projects"
itemId: "/MOSGUITO/about/projects"
},
{
title: "Members",
itemId: "/about/members"
itemId: "/MOSGUITO/about/members"
}
]
},
{
title: "Configuration",
itemId: "/config",
itemId: "/MOSGUITO/config",
elemBefore: () => <Icon name="settings" />,
subNav: [
{
title: "Config",
itemId: "/config"
title: "General configuration",
itemId: "/MOSGUITO/general-configuration"
},
{
title: "Experiments",
itemId: "/experiments"
itemId: "/MOSGUITO/experiments"
},
{
title: "UniProt information",
itemId: "/MOSGUITO/uniprotinfo"
},
{
title: "KEGG metabolic maps",
itemId: "/MOSGUITO/keggmaps"
}
]
}
......@@ -88,7 +96,7 @@ export const NavSidebar = () => {
items={[
{
title: "Settings",
itemId: "/settings",
itemId: "/MOSGUITO/settings",
elemBefore: () => <Icon name="activity" />
}
]}
......
import Accordion from './Accordion'
import LabelledCheckbox from "./LabelledCheckbox"
import {uniprotColumns} from "../utils/uniprotColumns"
const UniprotColumnsAccordion = ({ uniprotColumnsList, onChange }) => {
const UniprotColumnsAccordion = ({ columns, uniprotColumnsList, onChange }) => {
const handleCheck = value => {
const newList = [...uniprotColumnsList]
......@@ -18,7 +20,7 @@ const UniprotColumnsAccordion = ({ columns, uniprotColumnsList, onChange }) => {
return (
<Accordion title='UniProt columns'>
{
Object.entries(columns).map(([section, columns_list], index) => (
Object.entries(uniprotColumns).map(([section, columns_list], index) => (
<Accordion key={index} title={section}>
{
columns_list.map(( pair , index) => (
......
import Accordion from './Accordion'
import LabelledCheckbox from "./LabelledCheckbox"
import {uniprotDatabases} from "../utils/uniprotDatabases"
const UniprotDatabasesAccordion = ({ columns, uniprotDatabasesList, onChange }) => {
const UniprotDatabasesAccordion = ({ uniprotDatabasesList, onChange }) => {
const handleCheck = value => {
const newList = [...uniprotDatabasesList]
......@@ -18,7 +19,7 @@ const UniprotDatabasesAccordion = ({ columns, uniprotDatabasesList, onChange })
return (
<Accordion title='UniProt databases'>
{
Object.entries(columns).map(([section, columns_list], index) => (
Object.entries(uniprotDatabases).map(([section, columns_list], index) => (
<Accordion key={index} title={section}>
{
columns_list.map(( pair , index) => (
......
......@@ -4,13 +4,26 @@ import Routes from "./_routes";
import { defaultValues } from '../utils/defaultValues'
const App = () => {
const [experiments, setExperiments] = useState([])
const [experiments, setExperiments] = useState([
{
"Files":"",
"Sample":"",
"Data type":"",
"Condition":"",
"Name":""
}
])
const [configData, setConfig] = useState(defaultValues)
const [nExperimentsRows, setExperimentsRows] = useState(0)
const [nExperimentsRows, setExperimentsRows] = useState(1)
const onConfigChange = (field, value) => {
const newValue = { ...configData, [field]: value }
setConfig(newValue)
}
return <Routes
configData={configData}
setConfig={setConfig}
onConfigChange={onConfigChange}
nExperimentsRows={nExperimentsRows}
setExperimentsRows={setExperimentsRows}
experiments={experiments}
......
import React, {useState} from "react";
import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import SettingsPage from "./settings";
import ProjectsPage from "./projects";
import ProjectPage from "./project";
import MembersPage from "./members";
import AboutPage from "./about";
import TeamsPage from "./teams";
import HomePage from "./home";
import Config from "./config"
import Experiments from "./experiments";
import {keggMaps} from "../utils/keggMaps";
import KeggMapsAccordion from "../components/KeggMapsAccordion";
import {CardContent} from "@material-ui/core";
import UniprotInfo from "./uniprotinfo";
import KeggMaps from "./keggmaps";
const Routes = ({ configData, setConfig, experiments, setExperiments, nExperimentsRows, setExperimentsRows }) => {
const Routes = ({ configData, onConfigChange, experiments, setExperiments, nExperimentsRows, setExperimentsRows }) => {
return (
<BrowserRouter>
<Switch>
<Route path="/config">
<Route path="/MOSGUITO/general-configuration">
<Config
configData={configData}
setConfig={setConfig}
onConfigChange={onConfigChange}
/>
</Route>
<Route path="/experiments">
<Route path="/MOSGUITO/experiments">
<Experiments
experiments={experiments}
setExperiments={setExperiments}
......@@ -29,24 +35,45 @@ const Routes = ({ configData, setConfig, experiments, setExperiments, nExperimen
setExperimentsRows={setExperimentsRows}
/>
</Route>
<Route path="/config">
<Route path="/MOSGUITO/uniprotinfo">
<UniprotInfo
configData={configData}
onConfigChange={onConfigChange}
/>
</Route>
<Route path="/MOSGUITO/keggmaps">
<KeggMaps
configData={configData}
onConfigChange={onConfigChange}
/>
</Route>
<Route path="/MOSGUITO/about">
</Route>
<Route path="/about/members">
<Route path="/MOSGUITO/about/members">
<MembersPage />
</Route>
<Route path="/about/projects">
<ProjectsPage />
<Route path="/MOSGUITO/about/projects">
<ProjectPage />
</Route>
<Route path="/about">
<Route path="/MOSGUITO/about">
<AboutPage />
</Route>
<Route path="/another/teams">
<Route path="/MOSGUITO/another/teams">
<TeamsPage />
</Route>
<Route path="/settings">
<Route path="/MOSGUITO/settings">
<SettingsPage />
</Route>
<Route path="/">
<Route path="/MOSGUITO">
<HomePage />
</Route>
</Switch>
......
......@@ -5,7 +5,7 @@ import {DashboardLayout} from '../components/Layout';
const AboutPage = () => {
return (
<DashboardLayout>
<h2>About Page</h2>
</DashboardLayout>
)
}
......
......@@ -14,9 +14,6 @@ import LabelledCheckbox from "../components/LabelledCheckbox"
import LabelledSelect from "../components/LabelledSelect"
import { defaultValues } from '../utils/defaultValues'
import { emptyValues } from '../utils/emptyValues'
import { keggMaps } from '../utils/keggMaps'
import { uniprotColumns } from "../utils/uniprotColumns"
import { uniprotDatabases } from "../utils/uniprotDatabases"
import download from '../utils/download'
import {
assemblerOptions,
......@@ -26,17 +23,9 @@ import {
keggcharterTaxaLevelOptions
} from '../utils/options'
import './../App.css'
import KeggMapsAccordion from '../components/KeggMapsAccordion'
import UniprotColumnsAccordion from '../components/UniprotColumnsAccordion'
import UniprotDatabasesAccordion from '../components/UniprotDatabasesAccordion'
import {DashboardLayout} from "../components/Layout";
const Main = ({ configData, setConfig }) => {
const onConfigChange = (field, value) => {
const newValue = { ...configData, [field]: value }
setConfig(newValue)
}
const Main = ({ configData, onConfigChange }) => {
console.log(configData)
const camelToSnakeCase = str => str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
......@@ -146,18 +135,6 @@ const Main = ({ configData, setConfig }) => {
onChange={(ev) => onConfigChange('diamondMaxTargetSeqs', ev.target.valueAsNumber)}
/>
<UniprotColumnsAccordion
columns={uniprotColumns}
uniprotColumnsList={configData.uniprotColumns}
onChange={(value) => onConfigChange('uniprotColumns', value)}
/>
<UniprotDatabasesAccordion
columns={uniprotDatabases}
uniprotDatabasesList={configData.uniprotDatabases}
onChange={(value) => onConfigChange('uniprotDatabases', value)}
/>
<LabelledSelect
label='Choose normalization method'
value={configData.normalizationMethod}
......@@ -178,13 +155,6 @@ const Main = ({ configData, setConfig }) => {
onChange={(ev) => onConfigChange('keggcharterNumberOfTaxa', ev.target.valueAsNumber)}
/>
<KeggMapsAccordion
maps={keggMaps}
keggMapList={configData.keggcharterMaps}
onChange={(value) => onConfigChange('keggcharterMaps', value)}
/>
</CardContent>
<CardActions
style={{
......@@ -245,7 +215,7 @@ const Header = () => {
)
}
function Config({ configData, onConfigChange, setConfig }) {
function Config({ configData, onConfigChange }) {
return (
<DashboardLayout>
<div className='App'>
......@@ -253,7 +223,6 @@ function Config({ configData, onConfigChange, setConfig }) {
<Main
configData={configData}
onConfigChange={onConfigChange}
setConfig={setConfig}
/>
</div>
</DashboardLayout>
......
import React from 'react';
import {DashboardLayout} from '../components/Layout';
import {CardContent, Typography} from "@material-ui/core";
import KeggMapsAccordion from "../components/KeggMapsAccordion";
import {keggMaps} from "../utils/keggMaps";
const Main = ({ configData, onConfigChange }) => {
return (
<main className='main'>
<KeggMapsAccordion
keggMapList={configData.keggcharterMaps}
onChange={(value) => onConfigChange('keggcharterMaps', value)}
/>
</main>
)
}
const KeggMaps = ({ configData, onConfigChange }) => {
return (
<DashboardLayout>
<Main
configData={configData}
onConfigChange={onConfigChange}
/>
</DashboardLayout>
)
}
export default KeggMaps;
\ No newline at end of file
import React from 'react';
import AlignItemsList from '../components/MembersList'
import {DashboardLayout} from '../components/Layout';
const MembersPage = () => {
return (
<DashboardLayout>
<h2>Members Page</h2>
</DashboardLayout>
)
}
......
......@@ -2,12 +2,12 @@ import React from 'react';
import {DashboardLayout} from '../components/Layout';
const ProjectsPage = () => {
const ProjectPage = () => {
return (
<DashboardLayout>
<h2>Projects Page</h2>
<h2>Project Page</h2>
</DashboardLayout>
)
}
export default ProjectsPage;
\ No newline at end of file
export default ProjectPage;
\ No newline at end of file
import React from 'react';
import {DashboardLayout} from '../components/Layout';
import {Typography} from "@material-ui/core";
import UniprotColumnsAccordion from "../components/UniprotColumnsAccordion";
import UniprotDatabasesAccordion from "../components/UniprotDatabasesAccordion";
const Main = ({ configData, onConfigChange }) => {
return (
<main className='main'>
<UniprotColumnsAccordion
uniprotColumnsList={configData.uniprotColumns}
onChange={(value) => onConfigChange('uniprotColumns', value)}
/>
<UniprotDatabasesAccordion
uniprotDatabasesList={configData.uniprotDatabases}
onChange={(value) => onConfigChange('uniprotDatabases', value)}
/>
</main>
)
}
const UniprotInfo = ({ configData, onConfigChange }) => {
return (
<DashboardLayout>
<Main
configData={configData}
onConfigChange={onConfigChange}
/>
</DashboardLayout>
)
}
export default UniprotInfo;
\ No newline at end of file
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