new table structure complete

src/api/getAllEntries.js

@@ -30,25 +30,25 @@ const getAllEntries = (
           };
         }
         for (let test of tests) {
-          if (item.evaluations) {
-            if (
-              !Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`)
-            ) {
+          if (!item.evaluations) {
+            item.evaluations = {};
+          }
+          if (!Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`)) {
             item = {
               ...item,
               evaluations: {
                 ...item.evaluations,
-                  [`${test.metric}.${test.name}`]: '-1',
+                [`${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 = {};

src/api/getMyEntries.js

@@ -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,

src/components/generic/Pager.js

@@ -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()}
       />

src/components/generic/Table/Table.js

@@ -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 {

src/pages/NewTable/NewTable.js

@@ -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"
+              <TableRowTags item={item} i={i} />
+              <TableRowButtons
+                buttons={[
+                  { icon: pensilIco, handler: () => console.log('edit') },
+                  { icon: deleteIco, handler: () => console.log('delete') },
+                ]}
               />
-                <Svg
-                  src={deleteIco}
-                  backgroundColor={theme.colors.dark}
-                  cursor="pointer"
-                  size="cover"
-                  width="16px"
-                  height="16px"
-                />
-              </FlexRow>
             </FlexRow>
             <RowsBackgroundStyle i={i} />
           </tr>

src/pages/NewTable/NewTablePageTest.js

@@ -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>
   );

src/pages/NewTable/components/TableHeader/TableHeader.js

@@ -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;

src/pages/NewTable/components/TableHeader/index.js

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

src/pages/NewTable/components/TableRowButtons/TableRowButtons.js

@@ -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;

src/pages/NewTable/components/TableRowButtons/index.js

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

src/pages/NewTable/components/TableRowItems/TableRowItems.js

@@ -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;

src/pages/NewTable/components/TableRowItems/index.js

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

src/pages/NewTable/components/TableRowTags/TableRowTags.js

@@ -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;

src/pages/NewTable/components/TableRowTags/index.js

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

src/pages/NewTable/components/TableRowTags/renderTags.js

@@ -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;