Skip to content
GitLab
Commit 4d39250c authored by Alexander Prendetskiy's avatar Alexander Prendetskiy Committed by Matija Obreza
Browse files

Overviews: enable drill-down 


Signed-off-by: Matija Obreza's avatarMatija Obreza <matija.obreza@croptrust.org>
parent 5cf42397
Hide whitespace changes
Inline Side-by-side
src/model/AccessionFilter.ts
View file @ 4d39250c
......@@ -32,6 +32,8 @@ class AccessionFilter {
public taxa: TaxonomyFilter;
public uuid: string[];
public version: number[];
public sgsv: boolean;
public storage: number[];
public NOT: AccessionFilter;
}
......
src/ui/pages/accessions/OverviewPage.tsx
View file @ 4d39250c
......@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { parse } from 'query-string';
import { translate } from 'react-i18next';
import * as _ from 'lodash';
// Actions
import {applyFilters, loadAccessionsPage, listAccessionsPromise, updateRoute, applyOverviewFilters, loadAccessionsOverviewPage} from 'actions/accessions';
......@@ -20,6 +21,7 @@ import ContentHeader from 'ui/common/heading/ContentHeader';
import Tabs, {Tab} from 'ui/common/Tabs';
import PropertiesCard from 'ui/common/PropertiesCard';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import Number from 'ui/common/Number';
import AccessionFilters from './c/Filters';
......@@ -35,7 +37,7 @@ interface IOverviewPageProps extends React.ClassAttributes<any> {
currentTab: string;
t: any;
}
/* tslint:disable */
class BrowsePage extends React.Component<IOverviewPageProps, any> {
protected static needs = [
......@@ -60,6 +62,36 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
}
}
private addTerm = (property, term) => {
const { overview, applyOverviewFilters } = this.props;
const updatedFilter: AccessionFilter = { ...overview.filter };
switch (property) {
case 'sampStat':
case 'holder.code':
case 'holder.country.iso3':
case 'origin.iso3':
case 'taxa.genus':
case 'taxa.species':
case 'storage':
_.set(updatedFilter, property, _.concat(_.get(updatedFilter, property), term).filter(x => x != null));
break;
case 'sgsv':
case 'available':
case 'mlsStatus':
_.set(updatedFilter, property, term === '1' ? true : false);
break;
// set
default:
_.set(updatedFilter, property, term);
}
// console.log(`Updated filter for ${property} +${term}`, updatedFilter);
applyOverviewFilters(updatedFilter);
};
public render() {
const { filterCode, currentTab, applyOverviewFilters, overview: overviewWrapper, t } = this.props;
const overview = overviewWrapper && overviewWrapper.overview || null;
......@@ -67,6 +99,8 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
const overviewKeys = ['institute.code', 'institute.country.code3', 'cropName', 'crop.shortName', 'sampStat', 'taxonomy.genus', 'taxonomy.genusSpecies',
'countryOfOrigin.code3', 'donorCode', 'mlsStatus', 'available', 'duplSite', 'sgsv', 'storage', 'breederCode'];
const skipTerms = ['Other', 'Missing', 'Not specified'];
const overviewsTerms = new Map();
if (overview) {
overviewKeys.forEach((key) => {
......@@ -76,6 +110,19 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
});
}
const filterByTerm = (property, term, count) => {
return (
<div>
{
(skipTerms.indexOf(term.term) === -1)
? (<a onClick={ () => this.addTerm(property, term.term) }><Number value={ count } /></a>)
: (<span>{ count }</span>)
}
</div>
);
};
return (
<PageLayout
sidebar={
......@@ -105,32 +152,32 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
<PageContents>
<GridLayout>
{ overviewsTerms && overviewsTerms.get('institute.code') && overviewsTerms.get('institute.code').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.institute code`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({title: term.term, value: filterByTerm('holder.code', term, term.count) })) } title={ t(`accession.overview.institute code`) } small/>
}
{ overviewsTerms && overviewsTerms.get('institute.country.code3') && overviewsTerms.get('institute.country.code3').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('institute.country.code3').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.institute country code3`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('institute.country.code3').map((term) => ({title: term.term, value: filterByTerm('holder.country.iso3', term, term.count) })) } title={ t(`accession.overview.institute country code3`) } small/>
}
{ overviewsTerms && overviewsTerms.get('crop.shortName') && overviewsTerms.get('crop.shortName').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('crop.shortName').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.crop shortName`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('crop.shortName').map((term) => ({title: term.term, value: filterByTerm('crop', term, term.count)})) } title={ t(`accession.overview.crop shortName`) } small/>
}
{ overviewsTerms && overviewsTerms.get('cropName') && overviewsTerms.get('cropName').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('cropName').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.cropName`) } small/>
}
{ overviewsTerms && overviewsTerms.get('taxonomy.genus') && overviewsTerms.get('taxonomy.genus').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genus').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.taxonomy genus`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genus').map((term) => ({title: term.term, value: filterByTerm('taxa.genus', term, term.count) })) } title={ t(`accession.overview.taxonomy genus`) } small/>
}
{ overviewsTerms && overviewsTerms.get('taxonomy.genusSpecies') && overviewsTerms.get('taxonomy.genusSpecies').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genusSpecies').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.taxonomy genusSpecies`) } small/>
}
{ overviewsTerms && overviewsTerms.get('sampStat') && overviewsTerms.get('sampStat').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('sampStat')
.filter((term) => term.term !== 'other').map((term) => ({title: t(`accession.sampleStatus.${term.term}`), value: term.count })) } title={ t(`accession.overview.sampStat`) } small/>
.filter((term) => term.term !== 'other').map((term) => ({title: t(`accession.sampleStatus.${term.term}`), value: filterByTerm('sampStat', term, term.count) })) } title={ t(`accession.overview.sampStat`) } small/>
}
{ overviewsTerms && overviewsTerms.get('storage') && overviewsTerms.get('storage').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('storage').map((term) => ({title: t(`accession.storage.${term.term}`), value: term.count })) } title={ t(`accession.overview.storage`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('storage').map((term) => ({title: t(`accession.storage.${term.term}`), value: filterByTerm('storage', term, term.count) })) } title={ t(`accession.overview.storage`) } small/>
}
{ overviewsTerms && overviewsTerms.get('countryOfOrigin.code3') && overviewsTerms.get('countryOfOrigin.code3').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('countryOfOrigin.code3').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.countryOfOrigin code3`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('countryOfOrigin.code3').map((term) => ({title: term.term, value: filterByTerm('origin.iso3', term, term.count)})) } title={ t(`accession.overview.countryOfOrigin code3`) } small/>
}
{ overviewsTerms && overviewsTerms.get('donorCode') && overviewsTerms.get('donorCode').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('donorCode').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.donorCode`) } small/>
......@@ -142,13 +189,13 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
<PropertiesCard propertiesList={ overviewsTerms.get('breederCode').map((term) => ({title: term.term, value: term.count })) } title={ t(`accession.overview.breederCode`) } small/>
}
{ overviewsTerms && overviewsTerms.get('mlsStatus') && overviewsTerms.get('mlsStatus').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('mlsStatus').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: term.count })) } title={ t(`accession.overview.mlsStatus`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('mlsStatus').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: filterByTerm('mlsStatus', term, term.count) })) } title={ t(`accession.overview.mlsStatus`) } small/>
}
{ overviewsTerms && overviewsTerms.get('available') && overviewsTerms.get('available').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('available').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: term.count })) } title={ t(`accession.overview.available`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('available').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: filterByTerm('available', term, term.count) })) } title={ t(`accession.overview.available`) } small/>
}
{ overviewsTerms && overviewsTerms.get('sgsv') && overviewsTerms.get('sgsv').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: term.count })) } title={ t(`accession.overview.sgsv`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accession.overview.sgsv`) } small/>
}
</GridLayout>
</PageContents>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment