Skip to content

Commit

Permalink
Group datasets by publication year
Browse files Browse the repository at this point in the history
  • Loading branch information
@kreafox
kreafox committed Feb 7, 2023
1 parent b59fc2e commit 3470c25
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 116 deletions.
245 changes: 131 additions & 114 deletions src/components/ItemView/Datasets.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Icon, List, Accordion } from 'semantic-ui-react';
import { Icon, List, Accordion, Tab } from 'semantic-ui-react';
import servicesSVG from './icons/services.svg';
import lockSVG from 'remixicon/icons/System/lock-line.svg';

Expand All @@ -24,6 +24,15 @@ const is_internal = (dataset) => {
return internal;
};

const groupBy = (obj, key) => {
return obj.reduce((rv, item) => {
const group = rv[item[key]] || [];
group.push(item);
rv[item[key]] = group;
return rv;
}, {});
};

const SVGIcon = ({ name, size, color, className, title, onClick }) => {
return (
<svg
Expand All @@ -41,13 +50,7 @@ const SVGIcon = ({ name, size, color, className, title, onClick }) => {

const DatasetList = (props) => {
const { link } = props;

const dataset = link.reduce((dataset, item) => {
const group = dataset[item.protocol] || [];
group.push(item);
dataset[item.protocol] = group;
return dataset;
}, {});
const dataset = groupBy(link, 'protocol');

return (
<div>
Expand Down Expand Up @@ -268,7 +271,7 @@ const Datasets = (props) => {
const { item, appConfig } = props;
const { children } = item?.raw_value?.raw || {};

const [activeIndex, setActiveIndex] = React.useState(0);
const [activeIndex, setActiveIndex] = React.useState(-1);

function handleClick(e, titleProps) {
const { index } = titleProps;
Expand All @@ -286,124 +289,138 @@ const Datasets = (props) => {
[children],
);

// console.log('result', item);
// console.log('children', children);
const datasetsByYear = groupBy(datasets, 'publicationYearForResource');

return datasets && datasets.length > 0 ? (
<>
<h2>Data</h2>
const panes = Object.keys(datasetsByYear).map((dataset) => ({
menuItem: dataset,
render: () => (
<Tab.Pane>
<Accordion>
{datasetsByYear[dataset].map((dataset, index) => {
const { resourceTemporalExtentDetails } = dataset;
return (
<React.Fragment key={index}>
<Accordion.Title
active={activeIndex === index}
index={index}
onClick={handleClick}
>
<span className="dataset-title">
{dataset.resourceTitleObject.default}
<span className="formats">
{(dataset.format || []).map((item, i) => {
return (
<span className="format-label" key={i}>
{item}
</span>
);
})}

<Accordion>
{datasets.map((dataset, index) => {
const { resourceTemporalExtentDetails } = dataset;
{Array.isArray(dataset.linkProtocol) ? (
<>
{dataset.linkProtocol
.filter(
(i) => i.includes('ESRI') || i.includes('OGC'),
)
.map((item, i) => {
return (
<span className="format-label" key={i}>
{item}
</span>
);
})}
</>
) : (
<>
{['ESRI', 'OGC'].includes(dataset.linkProtocol) && (
<span className="format-label">
{dataset.linkProtocol}
</span>
)}
</>
)}
</span>

return (
<React.Fragment key={index}>
<Accordion.Title
active={activeIndex === index}
index={index}
onClick={handleClick}
>
<span className="dataset-title">
{dataset.resourceTitleObject.default}
<span className="formats">
{(dataset.format || []).map((item, i) => {
return (
<span className="format-label" key={i}>
{item}
</span>
);
})}
{is_internal(dataset) && (
<SVGIcon name={lockSVG} size="18" />
)}
</span>
<Icon className="ri-arrow-down-s-line" />
</Accordion.Title>
<Accordion.Content active={activeIndex === index}>
<div className="dataset-content">
{resourceTemporalExtentDetails &&
resourceTemporalExtentDetails?.length > 0 && (
<div>
<strong>Temporal coverage: </strong>

{Array.isArray(dataset.linkProtocol) ? (
<>
{dataset.linkProtocol
.filter(
(i) => i.includes('ESRI') || i.includes('OGC'),
)
.map((item, i) => {
{resourceTemporalExtentDetails.map((tc, i) => {
let tc_start = tc?.start?.date;
if (tc_start) {
tc_start = new Date(
Date.parse(tc_start),
).getFullYear();
}
let tc_end = tc?.end?.date;
if (tc_end) {
tc_end = new Date(
Date.parse(tc_end),
).getFullYear();
}
tc_start = tc_start || '';
tc_end = tc_end || '';
return (
<span className="format-label" key={i}>
{item}
</span>
<React.Fragment key={i}>
<span>
{tc_start === tc_end && tc_start}
{tc_start !== tc_end &&
tc_start + ' - ' + tc_end}
</span>
{i !== resourceTemporalExtentDetails.length - 1
? ', '
: ' '}
</React.Fragment>
);
})}
</>
) : (
<>
{['ESRI', 'OGC'].includes(dataset.linkProtocol) && (
<span className="format-label">
{dataset.linkProtocol}
</span>
)}
</>
)}
</span>

{is_internal(dataset) && <SVGIcon name={lockSVG} size="18" />}
</span>
<Icon className="ri-arrow-down-s-line" />
</Accordion.Title>
<Accordion.Content active={activeIndex === index}>
<div className="dataset-content">
{resourceTemporalExtentDetails &&
resourceTemporalExtentDetails?.length > 0 && (
<div>
<strong>Temporal coverage: </strong>
</div>
)}

{resourceTemporalExtentDetails.map((tc, i) => {
let tc_start = tc?.start?.date;
if (tc_start) {
tc_start = new Date(
Date.parse(tc_start),
).getFullYear();
}
let tc_end = tc?.end?.date;
if (tc_end) {
tc_end = new Date(Date.parse(tc_end)).getFullYear();
}
tc_start = tc_start || '';
tc_end = tc_end || '';
return (
<React.Fragment key={i}>
<span>
{tc_start === tc_end && tc_start}
{tc_start !== tc_end &&
tc_start + ' - ' + tc_end}
</span>
{i !== resourceTemporalExtentDetails.length - 1
? ', '
: ' '}
</React.Fragment>
);
})}
{dataset.resourceType[0] !== 'nonGeographicDataset' && (
<div className="dataset-pdf">
<div className="d-link">
<Icon className="file pdf" />
<a
target="_blank"
rel="noreferrer"
href={`${appConfig.indexBaseUrl}/catalogue/datahub/api/records/${dataset.metadataIdentifier}/formatters/xsl-view?output=pdf&language=eng&approved=true`}
>
Metadata Factsheet
</a>
</div>
</div>
)}
</div>

{dataset.resourceType[0] !== 'nonGeographicDataset' && (
<div className="dataset-pdf">
<div className="d-link">
<Icon className="file pdf" />
<a
target="_blank"
rel="noreferrer"
href={`${appConfig.indexBaseUrl}/catalogue/datahub/api/records/${dataset.metadataIdentifier}/formatters/xsl-view?output=pdf&language=eng&approved=true`}
>
Metadata Factsheet
</a>
</div>
</div>
{!!dataset.link && dataset.link.length > 0 && (
<DatasetList link={dataset.link} />
)}
</div>
</Accordion.Content>
</React.Fragment>
);
})}
</Accordion>
</Tab.Pane>
),
}));

{!!dataset.link && dataset.link.length > 0 && (
<DatasetList link={dataset.link} />
)}
</Accordion.Content>
</React.Fragment>
);
})}
</Accordion>
return datasets && datasets.length > 0 ? (
<>
<div className="item tabs-title">Publication year</div>
<Tab
className="datasets-tab"
menu={{ vertical: true, secondary: true, pointing: true }}
panes={panes}
/>
</>
) : null;
};
Expand Down
8 changes: 7 additions & 1 deletion src/components/ItemView/ItemView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,15 @@ function ItemView(props) {

<div className="dataset-container">
<Callout>{description?.raw}</Callout>
</div>

<Datasets item={item} appConfig={appConfig} />
<div className="dataset-container">
<h2>Datasets</h2>
</div>

<Datasets item={item} appConfig={appConfig} />

<div className="dataset-container">
<MetadataSection item={item} appConfig={appConfig} docid={docid} />

<MoreLikeThis docid={docid} title={title?.raw} appConfig={appConfig} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ItemView/MetadataSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const MetadataSection = (props) => {
</div>

<div className="d-link">
<i class="ri-external-link-line"></i>
<i className="ri-external-link-line"></i>
<a
target="_blank"
rel="noreferrer"
Expand Down

0 comments on commit 3470c25

Please sign in to comment.