Skip to content

Commit

Permalink
fix(affiliations): Try to optimimze code
Browse files Browse the repository at this point in the history
  • Loading branch information
@annelhote
annelhote committed Jul 26, 2023
1 parent cbc02bf commit 1dcba4f
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 44 deletions.
50 changes: 16 additions & 34 deletions client/src/pages/home/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,6 @@ export default function Home() {
const [publicationsDataTable, setPublicationsDataTable] = useState([]);
const [affiliationsDataTable, setAffiliationsDataTable] = useState([]);

const [dataGroupedByAffiliation, setDataGroupedByAffiliation] = useState({});

const { data, isFetching, refetch } = useQuery({
queryKey: ['data'],
queryFn: () => getData(formOptions),
Expand Down Expand Up @@ -177,67 +175,49 @@ export default function Home() {
useEffect(() => {
// Group by affiliation
const normalizedName = (name) => name.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');
const dataGroupedByAffiliationTmp = {};
let affiliationsDataTableTmp = {};
console.time('dataGroupedByAffiliation');
if (data) {
data.results.forEach((publication) => {
switch (publication.datasource) {
case 'bso':
(publication?.highlight?.['affiliations.name'] ?? []).forEach((affiliation) => {
const affiliationName = normalizedName(affiliation);
if (!Object.keys(dataGroupedByAffiliationTmp).includes(affiliationName)) {
dataGroupedByAffiliationTmp[affiliationName] = {
if (!Object.keys(affiliationsDataTableTmp).includes(affiliationName)) {
affiliationsDataTableTmp[affiliationName] = {
datasource: 'bso',
display: true,
name: affiliation,
publications: [],
};
}
dataGroupedByAffiliationTmp[affiliationName].publications.push(publication);
affiliationsDataTableTmp[affiliationName].publications.push(publication);
});
break;
case 'openalex':
(publication?.authors ?? []).forEach((author) => (author?.raw_affiliation_strings ?? []).forEach((affiliation) => {
const affiliationName = normalizedName(affiliation);
if (!Object.keys(dataGroupedByAffiliationTmp).includes(affiliationName)) {
dataGroupedByAffiliationTmp[normalizedName(affiliation)] = {
if (!Object.keys(affiliationsDataTableTmp).includes(affiliationName)) {
affiliationsDataTableTmp[affiliationName] = {
datasource: 'openalex',
display: true,
name: affiliation,
publications: [],
};
}
dataGroupedByAffiliationTmp[affiliationName].publications.push(publication);
affiliationsDataTableTmp[affiliationName].publications.push(publication);
}));
break;
default:
}
});
}
console.timeEnd('dataGroupedByAffiliation');
setDataGroupedByAffiliation(dataGroupedByAffiliationTmp);
}, [data]);

useEffect(() => {
console.time('affiliationsDataTableTmp');
const affiliationsDataTableTmp = Object.values(dataGroupedByAffiliation)
affiliationsDataTableTmp = Object.values(affiliationsDataTableTmp)
.sort((a, b) => b.publications.length - a.publications.length)
.map((affiliation, index) => ({
affiliations: affiliation.name,
publications: affiliation.publications,
id: index,
datasource: affiliation.datasource,
})).filter((affiliation) => {
if (viewAllAffiliations) { return true; }
const allPublicationsIds = affiliation.publications.map((publication) => publication.identifier);
const allPublicationsIdsFromSelectedPublications = sortedPublications.map((publication) => publication.identifier);
// if all publications are already selected, don't display
if (allPublicationsIds.every((id) => allPublicationsIdsFromSelectedPublications.includes(id))) {
return false;
}
return true;
});
console.timeEnd('affiliationsDataTableTmp');
.map((affiliation, index) => ({ ...affiliation, id: index.toString() }));
setAffiliationsDataTable(affiliationsDataTableTmp);
}, [dataGroupedByAffiliation, sortedPublications, viewAllAffiliations]);
console.timeEnd('dataGroupedByAffiliation');
}, [data]);

const tagLines = (lines, action) => {
console.time('tagLines');
Expand All @@ -256,8 +236,9 @@ export default function Home() {

// if already add, don't add again
const newActions = publicationToAdd.filter((publication) => !sortedPublications.map((item) => item.id).includes(publication.id)).map((publication) => ({ ...publication, action }));
console.time('tagAffiliation');
setSortedPublications([...sortedPublications, ...newActions]);
affiliation.display = false;
console.timeEnd('tagAffiliation');
};

const checkSelectedAffiliation = () => {
Expand Down Expand Up @@ -349,6 +330,7 @@ export default function Home() {
affiliationsDataTable={affiliationsDataTable}
selectedAffiliation={selectedAffiliation}
setSelectedAffiliation={setSelectedAffiliation}
viewAllAffiliations={viewAllAffiliations}
/>
</Profiler>
</>
Expand Down
19 changes: 12 additions & 7 deletions client/src/pages/home/views/affiliations.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ import PropTypes from 'prop-types';
import { Column } from 'primereact/column';
import { DataTable } from 'primereact/datatable';

import {
affiliationTemplate,
} from '../../../utils/templates';
import { nameTemplate } from '../../../utils/templates';

export default function AffiliationsView({
affiliationsDataTable,
selectedAffiliation,
setSelectedAffiliation,
viewAllAffiliations,
}) {
return (
<DataTable
Expand All @@ -28,23 +27,29 @@ export default function AffiliationsView({
stripedRows
style={{ fontSize: '11px', lineHeight: '15px' }}
tableStyle={{ minWidth: '50rem' }}
value={affiliationsDataTable}
value={viewAllAffiliations ? affiliationsDataTable : affiliationsDataTable.filter((affiliation) => affiliation.display)}
>
<Column selectionMode="single" headerStyle={{ width: '3rem' }} />
<Column field="datasource" header="Datasource" style={{ minWidth: '10px' }} />
<Column filter filterMatchMode="contains" body={affiliationTemplate} field="affiliation" header="Affiliation" style={{ minWidth: '10px' }} />
<Column filter filterMatchMode="contains" body={nameTemplate} field="affiliation" header="Affiliation" style={{ minWidth: '10px' }} filterPlaceholder="Search by affiliation" />
<Column showFilterMenu={false} field="publications" body={(rowData) => rowData.publications.length} header="Number of publications" style={{ minWidth: '10px' }} />
</DataTable>
);
}

AffiliationsView.propTypes = {
affiliationsDataTable: PropTypes.arrayOf(PropTypes.shape({
affiliations: PropTypes.string.isRequired,
datasource: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
publications: PropTypes.arrayOf(PropTypes.object).isRequired,
})).isRequired,
selectedAffiliation: PropTypes.shape({
affiliations: PropTypes.string,
datasource: PropTypes.string,
id: PropTypes.string,
name: PropTypes.string,
publications: PropTypes.arrayOf(PropTypes.object),
}).isRequired,
setSelectedAffiliation: PropTypes.func.isRequired,
viewAllAffiliations: PropTypes.bool.isRequired,
};
6 changes: 3 additions & 3 deletions client/src/utils/templates.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { Tooltip } from 'react-tooltip';

import { getIdentifierLink } from './publications';

const affiliationTemplate = (rowData) => <span dangerouslySetInnerHTML={{ __html: rowData.affiliations }} />;

const affiliationsTemplate = (rowData) => <span dangerouslySetInnerHTML={{ __html: rowData.affiliationsHtml }} />;

const allIdsTemplate = (rowData) => <span dangerouslySetInnerHTML={{ __html: rowData.allIdsHtml }} />;
Expand Down Expand Up @@ -123,13 +121,15 @@ const getAuthorsTooltipField = (rowData) => {
return html;
};

const nameTemplate = (rowData) => <span dangerouslySetInnerHTML={{ __html: rowData.name }} />;

export {
affiliationTemplate,
affiliationsTemplate,
allIdsTemplate,
authorsTemplate,
getAffiliationsHtmlField,
getAllIdsHtmlField,
getAuthorsHtmlField,
getAuthorsTooltipField,
nameTemplate,
};

0 comments on commit 1dcba4f

Please sign in to comment.