Frontend cleanup 🧹

app/config/public.js

@@ -55,7 +55,7 @@ module.exports = { // Properties that will be provided to frontend in the public
         fields: 'fields',
     },
 
-    pagesNames: {
+    pageNames: {
         periods: 'periods',
         dataPasses: 'dataPasses',
         mc: 'mc',

app/lib/database/QueryBuilder.js

@@ -16,7 +16,7 @@ const config = require('../config/configProvider.js');
 const views = require('./views');
 const procedures = require('./procedures')
 
-const { pagesNames: PN, procedures: PC } = config.public;
+const { pageNames: PN, procedures: PC } = config.public;
 const DRP = config.public.dataReqParams;
 
 const pageToViewName = {};

app/public/components/common/flagBreadcrumbs.js

@@ -14,10 +14,11 @@
 
 import { h } from '/js/src/index.js';
 import flagsIndexChip from '../userView/data/table/flagsIndexChip.js';
+import title from '../userView/data/table/title.js';
 
 export default function flagBreadCrumbs(model, dataPass, run, detector) {
     return [
-        h('h3.p-right-15.text-primary', 'Flags'),
+        title(model),
         h('.forward-20'),
         h('h3.ph-15.text-primary', dataPass),
         h('.forward-20'),

app/public/components/userView/data/dataPanel.js

@@ -19,7 +19,7 @@ import failureStatusAndReload from './fetchingStates/failure.js';
 import unknownError from './fetchingStates/unknown.js';
 import { RCT } from '../../../config.js';
 import flagsPanel from './flags/flagsPanel.js';
-const { pagesNames } = RCT;
+const { pageNames } = RCT;
 
 /**
  * Create vnode tablePanel if data are fetched otherwise shows spinner
@@ -34,7 +34,7 @@ export default function dataPanel(model) {
     return data ? data.match({
         NotAsked: () => h('', 'not asked'),
         Loading: () => spinnerAndReloadView(model),
-        Success: () => page === pagesNames.flags ? flagsPanel(model) : tablePanel(model),
+        Success: () => page === pageNames.flags ? flagsPanel(model) : tablePanel(model),
         Failure: (status) => failureStatusAndReload(model, status),
     }) : unknownError(model);
 }

app/public/components/userView/data/flags/flagsTable.js

@@ -17,7 +17,7 @@ import { RCT } from '../../../../config.js';
 import flagsTableHeader from './table/flagsTableHeader.js';
 import flagsTableRow from './table/flagsTableRow.js';
 import pagesCellsSpecials from '../pagesCellsSpecials.js';
-const { pagesNames: PN } = RCT;
+const { pageNames: PN } = RCT;
 
 export default function flagsTable(model, run, detector) {
     const [flagsDataIndex] = Object.keys(model.fetchedData[PN.flags]);

app/public/components/userView/data/flags/flagsVisualization.js

@@ -15,7 +15,7 @@
 import flagVisualization from './flagVisualization.js';
 import { h } from '/js/src/index.js';
 import { RCT } from '../../../../config.js';
-const { pagesNames: PN } = RCT;
+const { pageNames: PN } = RCT;
 
 function filterDistinct(a) {
     return a.filter((value, index, array) => array.indexOf(value) === index);

app/public/components/userView/data/flags/table/flagsTableRow.js

@@ -21,7 +21,7 @@ export default function flagsTableRow(
     const displayedFields = fields.filter((e) => e.display === true);
 
     const dataCells = displayedFields.map((field) =>
-        h(`td.${model.getCurrentDataPointer().page}-${field.name}-cell`,
+        h(`td.${model.getCurrentDataPointer().page}-${field.name}-cell.text-ellipsis`,
             item[field.name]
                 ? cellsSpecials[field.name]
                     ? cellsSpecials[field.name](model, item)

app/public/components/userView/data/pager.js

@@ -13,61 +13,37 @@
  */
 
 import viewButton from '../../common/viewButton.js';
-import { range, replaceUrlParams } from '../../../utils/utils.js';
-import { h, iconMediaSkipBackward, iconCaretLeft, iconChevronBottom, iconCaretRight, iconMediaSkipForward } from '/js/src/index.js';
-import { RCT } from '../../../config.js';
+import { replaceUrlParams } from '../../../utils/utils.js';
+import { h, iconChevronBottom } from '/js/src/index.js';
 import itemsCounter from './table/items-counter.js';
+import { RCT } from '../../../config.js';
 
-const siteParamName = RCT.dataReqParams.site;
-const visibleNeighbourButtonsRange = 2;
-const maxVisibleButtons = 10;
+const { site } = RCT.dataReqParams;
 
 export default function pager(model, data, pagerOnly = true) {
-    const mapArrayToButtons = (arr) => arr.map((i) => {
-        const site = i + 1;
-        const url = replaceUrlParams(data.url, [[siteParamName, site]]);
+    const sitesNumber = Math.ceil(data.totalRecordsNumber / data.rowsOnSite);
+    const currentSite = Number(Object.fromEntries(data.url.searchParams.entries())[site]);
 
+    const pageButton = (targetSite) => {
+        const url = replaceUrlParams(data.url, [[site, targetSite]]);
         return viewButton(
             model,
-            site,
-            () => model.fetchedData.changePage(site),
+            targetSite,
+            () => model.fetchedData.changePage(targetSite),
             '',
             url.pathname + url.search,
-            `.btn.btn-secondary${currentSite.toString() === site.toString() ? '.selected' : ''}`,
+            `.btn${targetSite === currentSite ? '.btn-primary' : '.btn-secondary'}`,
             '',
             true,
         );
-    });
+    };
 
-    const sitesNumber = Math.ceil(data.totalRecordsNumber / data.rowsOnSite);
-    const currentSite = Number(Object.fromEntries(data.url.searchParams.entries())[siteParamName]);
-    const currentSiteIdx = currentSite - 1;
-
-    const middleButtonsR = range(
-        Math.max(0, currentSiteIdx - visibleNeighbourButtonsRange),
-        Math.min(sitesNumber, currentSiteIdx + visibleNeighbourButtonsRange + 1),
-    );
-
-    const leftButtonsR = range(
-        0,
-        Math.min(
-            middleButtonsR[0],
-            Math.floor((maxVisibleButtons - (2 * visibleNeighbourButtonsRange + 1)) / 2),
-        ),
-    );
-
-    const rightButtonsR = range(
-        Math.max(
-            middleButtonsR[middleButtonsR.length - 1] + 1,
-            sitesNumber - Math.floor((maxVisibleButtons - (2 * visibleNeighbourButtonsRange + 1)) / 2),
-        ),
-        sitesNumber,
-    );
-
-    const leftThreeDotsPresent = !(leftButtonsR[leftButtonsR.length - 1] === middleButtonsR[0] - 1 || leftButtonsR.length === 0);
-    const rightThreeDotsPresent = !(rightButtonsR[0] === middleButtonsR[middleButtonsR.length - 1] + 1 || rightButtonsR.length === 0);
-
-    const siteChangingController = (onclickF, label) => h('a.site-changing-controller', { onclick: onclickF }, label);
+    const siteChangingController = (targetSite, content) => h('a.btn.btn-secondary.site-changing-controller', {
+        onclick: () => model.fetchedData.changePage(targetSite),
+    }, content);
+
+    const moreSitesLeft = currentSite > 2;
+    const moreSitesRight = currentSite < sitesNumber - 1;
 
     function handleOptionChange() {
         const columnsOptionsSelect = document.getElementById('columns-options');
@@ -125,42 +101,46 @@ export default function pager(model, data, pagerOnly = true) {
                 ],
 
             h('.flex.pager-buttons',
-                // Move to first site
-                currentSite > 1 ? siteChangingController(() => model.fetchedData.changePage(1), iconMediaSkipBackward()) : ' ',
-                // Move to middle of sites range [first, current]
-                currentSite > 3
-                    ? siteChangingController(() => model.fetchedData.changePage(Math.floor(currentSite / 2)), iconChevronBottom())
-                    : ' ',
+                // Move to the first site
+                currentSite > 1 ? siteChangingController(1, h('.double-left-15-primary')) : ' ',
                 // Move one site back
-                currentSite > 1 ? siteChangingController(() => model.fetchedData.changePage(currentSite - 1), iconCaretLeft()) : ' ',
+                currentSite > 1 ? siteChangingController(currentSite - 1, h('.back-15-primary')) : ' ',
 
-                mapArrayToButtons(leftButtonsR),
-                leftThreeDotsPresent ? h('.ellipsis-20') : '',
-                mapArrayToButtons(middleButtonsR),
-                rightThreeDotsPresent ? '...' : '',
-                mapArrayToButtons(rightButtonsR),
+                // Move to the middle of sites range [first, current]
+                moreSitesLeft
+                    ? siteChangingController(
+                        Math.floor(currentSite / 2),
+                        h('.more-15-primary'),
+                    )
+                    : '',
 
-                // Analogically as above
-                currentSite < sitesNumber
+                currentSite > 1 ? pageButton(currentSite - 1) : '',
+                pageButton(currentSite),
+                currentSite < sitesNumber ? pageButton(currentSite + 1) : '',
+
+                // Move to the middle of sites range [current, last]
+                moreSitesRight
                     ? siteChangingController(
-                        () => model.fetchedData.changePage(currentSite + 1),
-                        iconCaretRight(),
+                        currentSite + Math.floor((sitesNumber - currentSite) / 2),
+                        h('.more-15-primary'),
                     )
-                    : ' ',
+                    : '',
 
-                currentSite < sitesNumber - 2
+                // Move one site forward
+                currentSite < sitesNumber
                     ? siteChangingController(
-                        () => model.fetchedData.changePage(currentSite + Math.floor((sitesNumber - currentSite) / 2)),
-                        iconChevronBottom(),
+                        currentSite + 1,
+                        h('.forward-15-primary'),
                     )
-                    : ' ',
+                    : '',
 
+                // Move to the last site
                 currentSite < sitesNumber
                     ? siteChangingController(
-                        () => model.fetchedData.changePage(sitesNumber),
-                        iconMediaSkipForward(),
+                        sitesNumber,
+                        h('.double-right-15-primary'),
                     )
-                    : ' '),
+                    : ''),
         ]),
     ];
 }

app/public/components/userView/data/pagesCellsSpecials.js

@@ -16,7 +16,7 @@ import { RCT } from '../../../config.js';
 import { getReadableFileSizeString } from '../../../utils/utils.js';
 import actionChip from '../../common/actionChip.js';
 const { dataReqParams: DRP } = RCT;
-const { pagesNames: PN } = RCT;
+const { pageNames: PN } = RCT;
 
 /**
  * Configuration what buttons at which cells and which pages are supposed
@@ -46,7 +46,7 @@ const pagesCellsSpecials = {};
 
 pagesCellsSpecials[PN.periods] = {
     name: (model, item) => [
-        h('td', item.name),
+        h('td.text-ellipsis', item.name),
         h('td',
             actionChip(
                 model,
@@ -81,7 +81,7 @@ pagesCellsSpecials[PN.periods] = {
 
 pagesCellsSpecials[PN.dataPasses] = {
     name: (model, item) => [
-        h('td', item.name),
+        h('td.text-ellipsis', item.name),
         h('td',
             h('button.btn.chip.m1', {
                 onclick: async () => {
@@ -113,7 +113,7 @@ pagesCellsSpecials[PN.dataPasses] = {
 };
 pagesCellsSpecials[PN.mc] = {
     name: (model, item) => [
-        h('td', item.name),
+        h('td.text-ellipsis', item.name),
         h('td',
             actionChip(
                 model,

app/public/components/userView/data/table/indexChip.js

@@ -14,31 +14,29 @@
 
 import { h } from '/js/src/index.js';
 import { RCT } from '../../../../config.js';
-
-const { dataReqParams } = RCT;
+const { dataReqParams, pageNames } = RCT;
 
 export default function indexChip(model, index) {
     const dataPointer = model.getCurrentDataPointer();
+    const { page } = dataPointer;
     const data = model.fetchedData[dataPointer.page][dataPointer.index].payload;
     const { fields } = data;
     const firstField = fields.find((f) => f !== undefined && f.name);
+    const targetUrl = `/?page=${page}&index=${index}&${dataReqParams.rowsOnSite}=50&${dataReqParams.site}=1&sorting=-${firstField.name}`;
 
-    const chip = (pageName) => pageName !== 'periods' && model.fetchedData[pageName][index]
+    return page !== pageNames.periods && model.fetchedData[page][index]
         ? h('.chip.flex-wrap.justify-between.items-center', {
-            id: `chip-${pageName}-${index}`,
-            class: dataPointer.index === index && dataPointer.page === pageName ? 'primary' : '',
+            id: `chip-${page}-${index}`,
+            class: dataPointer.index === index && dataPointer.page === page ? 'primary' : '',
         },
         h('button.btn.transparent', { onclick: () => {
-            // eslint-disable-next-line max-len
-            model.router.go(`/?page=${pageName}&index=${index}&${dataReqParams.rowsOnSite}=50&${dataReqParams.site}=1&sorting=-${firstField.name}`);
+            model.router.go(targetUrl);
         } }, index),
         h('button.btn.icon-only-button.transparent', {
             onclick: () => {
-                model.removeSubPage(pageName, index);
+                model.removeSubPage(page, index);
                 model.notify();
             },
-        }, dataPointer.index === index && dataPointer.page === pageName ? h('.close-20-off-white') : h('.close-20-primary')))
+        }, dataPointer.index === index && dataPointer.page === page ? h('.close-20-off-white') : h('.close-20-primary')))
         : '';
-
-    return chip(dataPointer.page);
 }

app/public/components/userView/data/table/noDataView.js

@@ -14,7 +14,7 @@
 
 import { h } from '/js/src/index.js';
 import { RCT } from '../../../../config.js';
-const { pagesNames } = RCT;
+const { pageNames } = RCT;
 
 function useState(defaultValue) {
     let value = defaultValue;
@@ -60,7 +60,7 @@ export default function noDataView(
     }, 'Reload');
     const noDataMessage = h('h3', 'No data found');
     const noDataExplanation = h('h5', `${
-        dataPointer.page === pagesNames.periods
+        dataPointer.page === pageNames.periods
             ? 'Please synchronize with outer services'
             : 'There is no data to be displayed here'
     }`);
@@ -79,7 +79,7 @@ export default function noDataView(
         goBackBtn,
     ]);
 
-    return dataPointer.page === pagesNames.periods
+    return dataPointer.page === pageNames.periods
         ? mode() === modes.requested
             ? 'loading'
             : noPeriodsView

app/public/components/userView/data/table/noSubPageSelected.js

@@ -15,6 +15,7 @@
 import { h } from '/js/src/index.js';
 import { defaultIndexString } from '../../../../utils/defaults.js';
 import indexChip from './indexChip.js';
+import title from './title.js';
 
 export default function noSubPageSelected(model) {
     const dataPointer = model.getCurrentDataPointer();
@@ -24,25 +25,10 @@ export default function noSubPageSelected(model) {
 
     data.rows = data.rows.filter((item) => item.name != 'null');
 
-    const headerSpecific = (model) => {
-        const { page } = model.getCurrentDataPointer();
-        switch (page) {
-            case 'periods': return 'Periods';
-            case 'runsPerPeriod': return 'Runs per period';
-            case 'runsPerDataPass': return 'Runs per data pass';
-            case 'dataPasses': return 'Data passes per period';
-            case 'mc': return 'Monte Carlo';
-            case 'flags': return 'Flags';
-            case 'anchoragePerDatapass': return 'Anchorage per data pass';
-            case 'anchoredPerMC': return 'Anchored per MC';
-            default: return page;
-        }
-    };
-
     return h('div.main-content', [
         h('div.flex-wrap.justify-between.items-center',
             h('div.flex-wrap.justify-between.items-baseline',
-                h('h3.p-right-15.text-primary', headerSpecific(model)),
+                title(model),
                 chips)),
 
         'Please select any of the subpages',

app/public/components/userView/data/table/row.js

@@ -48,7 +48,7 @@ export default function row(
     );
 
     const dataCells = visibleFields.map((field) =>
-        h(`td.${model.getCurrentDataPointer().page}-${field.name.includes('detector') ? 'detector' : field.name}-cell`,
+        h(`td.${model.getCurrentDataPointer().page}-${field.name.includes('detector') ? 'detector' : field.name}-cell.text-ellipsis`,
             item[field.name]
                 ? cellsSpecials[field.name]
                     ? cellsSpecials[field.name](model, item)