s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new table structure complete

Browse Source
This commit is contained in:
Mateusz Tylka 2023-06-09 11:10:41 +02:00
parent 60ecbd331a
commit 5a968ff026
15 changed files with 217 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/getAllEntries.js
View File

@ -30,25 +30,25 @@ const getAllEntries = (
};
}
for (let test of tests) {
if (item.evaluations) {
if (
!Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`)
) {
item = {
...item,
evaluations: {
...item.evaluations,
[`${test.metric}.${test.name}`]: '-1',
},
};
}
if (!item.evaluations) {
item.evaluations = {};
}
if (!Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`)) {
item = {
...item,
evaluations: {
...item.evaluations,
[`${test.metric}.${test.name}`]: 'N/A',
},
};
}
}
item = {
...item,
...item.evaluations,
id: submission.id,
submitter: submission.submitter,
when: submission.when,
tags: submission.tags,
};
result.push(item);
item = {};

4
src/api/getMyEntries.js
View File

@ -39,14 +39,14 @@ const getMyEntries = (
...item,
evaluations: {
...item.evaluations,
[`${test.metric}.${test.name}`]: '-1',
[`${test.metric}.${test.name}`]: '_',
},
};
}
}
}
item = {
...item,
...item.evaluations,
id: submission.id,
submitter: submission.submitter,
when: submission.when,

4
src/components/generic/Pager.js
View File

@ -63,7 +63,7 @@ const Pager = (props) => {
as="a"
href="#start"
src={polygon}
onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPage)}
onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPageNr)}
size="cover"
backgroundColor={leftArrowVisible()}
/>
@ -76,7 +76,7 @@ const Pager = (props) => {
as="a"
href="#start"
src={polygon}
onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPage)}
onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPageNr)}
size="cover"
backgroundColor={rightArrowVisible()}
/>

2
src/components/generic/Table/Table.js
View File

@ -29,7 +29,7 @@ const Table = (props) => {
let newElem = [];
for (let metric of props.possibleMetrics) {
if (Object.hasOwn(elem, props.iterableColumnElement.name)) {
if (elem[props.iterableColumnElement.name][metric] === '-1')
if (elem[props.iterableColumnElement.name][metric] === '_')
newElem.push('N/A');
else newElem.push(elem[props.iterableColumnElement.name][metric]);
} else {

70
src/pages/NewTable/NewTable.js
View File

@ -1,70 +1,30 @@
import React from 'react';
import { FlexRow, Svg } from '../../utils/containers';
import theme from '../../utils/theme';
import ColumnFilterIcon from '../../components/generic/ColumnFilterIcon';
import { FlexRow } from '../../utils/containers';
import pensilIco from '../../assets/pencil_ico.svg';
import deleteIco from '../../assets/delete_ico.svg';
import NewTableStyle from './styles/NewTableStyle';
import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
import SortButtonContainerStyle from './styles/SortButtonContainerStyle';
import TableHeader from './components/TableHeader';
import TableRowTags from './components/TableRowTags';
import TableRowItems from './components/TableRowItems';
import TableRowButtons from './components/TableRowButtons';
const NewTable = ({ items, orderedKeys }) => {
return (
<NewTableStyle>
<tr className="NewTableStyle__tr-header">
{orderedKeys.map((keyValue, i) => {
return (
<th key={`table-header-${i}`} className="NewTableStyle__th">
{keyValue}
<SortButtonContainerStyle as="span" column={keyValue}>
<ColumnFilterIcon index={1} active={2} rotateIcon={false} />
</SortButtonContainerStyle>
</th>
);
})}
<FlexRow className="NewTableStyle__line" as="td" />
</tr>
<TableHeader orderedKeys={orderedKeys} />
{items.map((item, i) => {
return (
<tr className="NewTableStyle__tr">
{orderedKeys.map((keyValue, j) => {
return (
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
{item[keyValue]}
</td>
);
})}
<tr key={`table-row-${i}`} className="NewTableStyle__tr">
<TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
<FlexRow className="NewTableStyle__row-footer">
<FlexRow className="NewTableStyle__tags-container">
{item.tags.map((tag, j) => {
return (
<FlexRow
className="NewTableStyle__tag"
key={`submissionTag-${i}-${j}`}
>
{tag}
</FlexRow>
);
})}
</FlexRow>
<FlexRow gap="12px">
<Svg
src={pensilIco}
backgroundColor={theme.colors.dark}
cursor="pointer"
size="cover"
width="16px"
height="16px"
/>
<Svg
src={deleteIco}
backgroundColor={theme.colors.dark}
cursor="pointer"
size="cover"
width="16px"
height="16px"
/>
</FlexRow>
<TableRowTags item={item} i={i} />
<TableRowButtons
buttons={[
{ icon: pensilIco, handler: () => console.log('edit') },
{ icon: deleteIco, handler: () => console.log('delete') },
]}
/>
</FlexRow>
<RowsBackgroundStyle i={i} />
</tr>

121
src/pages/NewTable/NewTablePageTest.js
View File

@ -6,48 +6,59 @@ import Search from '../../components/generic/Search';
import getAllEntries from '../../api/getAllEntries';
import NewTable from './NewTable';
const orderedKeys = [
'id',
'submitter',
'Accuracy-dev-0',
'Likelihood-dev-0',
'Accuracy-dev-1',
'Likelihood-dev-1',
'Accuracy-test-A',
'Likelihood-test-A',
'when',
];
// const orderedKeys = [
// 'id',
// 'submitter',
// 'Accuracy-dev-0',
// 'Likelihood-dev-0',
// 'Accuracy-dev-1',
// 'Likelihood-dev-1',
// 'Accuracy-test-A',
// 'Likelihood-test-A',
// 'when',
// ];
const tableItems = [
{
id: '7962',
submitter: 'wirus wirus',
'Accuracy-dev-0': '0.68248',
'Likelihood-dev-0': '0.00000',
'Accuracy-dev-1': '0.65028',
'Likelihood-dev-1': '0.00000',
'Accuracy-test-A': '0.65503',
'Likelihood-test-A': '0.00000',
when: '2023-01-05 21:47',
tags: ['tag1', 'siema siema', 'dluuuuuggiiiiiiiiiiiiiii tag', 'eloelo'],
},
{
id: '7371',
submitter: 'Kamil Guttmann',
'Accuracy-dev-0': '0.68248',
'Likelihood-dev-0': '0.00000',
'Accuracy-dev-1': '0.67544',
'Likelihood-dev-1': '0.00000',
'Accuracy-test-A': '0.67034',
'Likelihood-test-A': '0.00000',
when: '2023-01-05 21:47',
tags: ['tag2', 'siema2 siem2', 'looooooooooonggggg tag_tag', 'eloelo3'],
},
];
// const tableItems = [
// {
// id: '7962',
// submitter: 'wirus wirus',
// 'Accuracy-dev-0': '0.68248',
// 'Likelihood-dev-0': '0.00000',
// 'Accuracy-dev-1': '0.65028',
// 'Likelihood-dev-1': '0.00000',
// 'Accuracy-test-A': '0.65503',
// 'Likelihood-test-A': '0.00000',
// when: '2023-01-05 21:47',
// tags: ['tag1', 'siema siema', 'dluuuuuggiiiiiiiiiiiiiii tag', 'eloelo'],
// },
// {
// id: '7371',
// submitter: 'Kamil Guttmann',
// 'Accuracy.dev-0': '0.68248',
// 'Likelihood.dev-0': '0.00000',
// 'Accuracy.dev-1': '0.67544',
// 'Likelihood.dev-1': '0.00000',
// 'Accuracy.test-A': '0.67034',
// 'Likelihood-test-A': '0.00000',
// when: '2023-01-05 21:47',
// tags: ['tag2', 'siema2 siem2', 'looooooooooonggggg tag_tag', 'eloelo3'],
// },
// ];
const NewTablePageTest = (props) => {
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entriesAll, setEntriesAll] = React.useState([]);
const [entries, setEntries] = React.useState([]);
// eslint-disable-next-line
const [pageNr, setPageNr] = React.useState(1);
// eslint-disable-next-line
const [loading, setLoading] = React.useState(true);
// eslint-disable-next-line
const [scoresSorted, setScoresSorted] = React.useState([]);
// eslint-disable-next-line
const [submitterSorted, setSubmitterSorted] = React.useState(false);
// eslint-disable-next-line
const [whenSorted, setWhenSorted] = React.useState(false);
React.useEffect(() => {
if (props.challengeName) challengeDataRequest(props.challengeName);
@ -55,9 +66,41 @@ const NewTablePageTest = (props) => {
const challengeDataRequest = (challengeName) => {
getAllEntries(challengeName, setEntriesFromApi, setEntriesAll);
getAllEntries(
challengeName,
undefined,
setEntries,
setLoading,
setScoresSorted
);
};
const orderKeys = (elem) => {
if (elem) {
let result = ['id', 'submitter'];
const elemKeys = Object.keys(elem);
const dev0keys = elemKeys
.filter((key) => key.split('.')[1] === 'dev-0')
.sort();
const dev1keys = elemKeys
.filter((key) => key.split('.')[1] === 'dev-1')
.sort();
const testAkeys = elemKeys
.filter((key) => key.split('.')[1] === 'test-A')
.sort();
result = result.concat(dev0keys);
result = result.concat(dev1keys);
result = result.concat(testAkeys);
result.push('when');
return result;
}
return null;
};
console.log(entriesFromApi);
console.log(entriesAll);
console.log(entries);
if (entries[0]) console.log(entries[0].keys);
return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
@ -65,7 +108,9 @@ const NewTablePageTest = (props) => {
New Table Test
</H2>
<Search searchQueryHandler={() => console.log('siema')} />
<NewTable items={tableItems} orderedKeys={orderedKeys} />
{entries.length > 0 && (
<NewTable items={entries} orderedKeys={orderKeys(entries[0])} />
)}
<Pager />
</FlexColumn>
);

24
src/pages/NewTable/components/TableHeader/TableHeader.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import SortButtonContainerStyle from '../../styles/SortButtonContainerStyle';
import ColumnFilterIcon from '../../../../components/generic/ColumnFilterIcon';
import { FlexRow } from '../../../../utils/containers';
const TableHeader = (props) => {
return (
<tr className="NewTableStyle__tr-header">
{props.orderedKeys.map((keyValue, i) => {
return (
<th key={`table-header-${i}`} className="NewTableStyle__th">
{keyValue}
<SortButtonContainerStyle as="span" column={keyValue}>
<ColumnFilterIcon index={1} active={2} rotateIcon={false} />
</SortButtonContainerStyle>
</th>
);
})}
<FlexRow className="NewTableStyle__line" as="td" />
</tr>
);
};
export default TableHeader;

1
src/pages/NewTable/components/TableHeader/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './TableHeader';

26
src/pages/NewTable/components/TableRowButtons/TableRowButtons.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import { FlexRow, Svg } from '../../../../utils/containers';
import theme from '../../../../utils/theme';
const TableRowButtons = ({ buttons, i }) => {
return (
<FlexRow gap="12px">
{buttons.map((button, j) => {
return (
<Svg
key={`table-item-button-${i}-${j}`}
onClick={button.handler}
src={button.icon}
backgroundColor={theme.colors.dark}
cursor="pointer"
size="cover"
width="16px"
height="16px"
/>
);
})}
</FlexRow>
);
};
export default TableRowButtons;

1
src/pages/NewTable/components/TableRowButtons/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './TableRowButtons';

17
src/pages/NewTable/components/TableRowItems/TableRowItems.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
const TableRowItems = ({ orderedKeys, item, i }) => {
return (
<>
{orderedKeys.map((keyValue, j) => {
return (
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
{item[keyValue]}
</td>
);
})}
</>
);
};
export default TableRowItems;

1
src/pages/NewTable/components/TableRowItems/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './TableRowItems';

12
src/pages/NewTable/components/TableRowTags/TableRowTags.js Normal file
View File

@ -0,0 +1,12 @@
import { FlexRow } from '../../../../utils/containers';
import renderTags from './renderTags';
const TableRowTags = ({ item, i }) => {
return (
<FlexRow className="NewTableStyle__tags-container">
{renderTags(item.tags)}
</FlexRow>
);
};
export default TableRowTags;

1
src/pages/NewTable/components/TableRowTags/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './TableRowTags';

18
src/pages/NewTable/components/TableRowTags/renderTags.js Normal file
View File

@ -0,0 +1,18 @@
import { FlexRow } from '../../../../utils/containers';
const renderTags = (tags, i) => {
if (tags.length > 0) {
return tags.map((tag, j) => {
return (
<FlexRow className="NewTableStyle__tag" key={`submissionTag-${i}-${j}`}>
{tag.name}
</FlexRow>
);
});
}
return (
<FlexRow className="NewTableStyle__tag">submission without tags</FlexRow>
);
};
export default renderTags;