Skip to content

GitLab

G
Genesys Website
Commit d018fe51 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza
Browse files
Options

Added suggestions for Overview and MapPage 

Added genus italic styles

Fixed overview filters
parent 784b3060
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 44 deletions
src/accessions/reducers/public.ts
View file @ d018fe51
......@@ -80,6 +80,7 @@ function publicAccessions(state = INITIAL_STATE, action: IReducerAction) {
timestamp,
data: data !== undefined ? data : state.overview && state.overview.data,
} },
suggestions: {$set: data ? data.suggestions : state.suggestions},
// paged: { $set: null },
// mapInfo: { $set: null },
});
......@@ -121,6 +122,7 @@ function publicAccessions(state = INITIAL_STATE, action: IReducerAction) {
return update(state, {
mapInfo: { $set: apiCall },
suggestions: {$set: apiCall.data ? apiCall.data.suggestions : state.suggestions},
// paged: {$set: null},
// overview: {$set: null},
});
......
src/accessions/ui/MapPage.tsx
View file @ d018fe51
......@@ -19,7 +19,7 @@ import ButtonBar from 'ui/common/buttons/ButtonBar';
import ContentLayout from 'ui/layout/ContentLayout';
import MapConfigSection from './c/MapConfigSection';
import MapAccessionsFilters from 'accessions/ui/c/MapAccessionsFilters';
import AccessionsFilters from 'accessions/ui/c/Filters';
import BioClimateDisplay from 'accessions/ui/c/BioClimateDisplay';
import {Dialog, Drawer} from '@material-ui/core';
import PageTitle from 'ui/common/PageTitle';
......@@ -32,7 +32,7 @@ import FilterIcon from '@material-ui/icons/PermDataSetting';
import CancelIcon from '@material-ui/icons/Cancel';
let Map;
let MapComponent;
let TileLayer;
let Popup;
let Rectangle;
......@@ -46,6 +46,7 @@ interface IMapPageProps {
apiUrl: string;
mapInfo: AccessionMapInfo;
suggestions: any;
currentTab: string;
filterCode: string;
loadAccessionsMapInfo: any;
......@@ -162,7 +163,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
constructor(props, context) {
super(props, context);
if (typeof window !== 'undefined') {
Map = require('react-leaflet').Map;
MapComponent = require('react-leaflet').Map;
TileLayer = require('react-leaflet').TileLayer;
Popup = require('react-leaflet').Popup;
Rectangle = require('react-leaflet').Rectangle;
......@@ -305,7 +306,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
public render() {
const { searchBox, geoData, otherCount, sidebarOpened, trackClickPos, dialogOpened, climateData, layersControlsIsOpen} = this.state;
const { mapInfo, mapLayers, currentTab, classes, filterCode, loading, t, loadAccessionsMapInfo, initialPosition, initialZoom } = this.props;
const { mapInfo, mapLayers, currentTab, classes, filterCode, loading, suggestions, t, loadAccessionsMapInfo, initialPosition, initialZoom } = this.props;
const position = initialPosition[0] && initialPosition[1] ? initialPosition : [30, 0];
......@@ -313,6 +314,18 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
return <Loading />;
}
const suggestionTerms = new Map();
if (suggestions) {
Object.keys(suggestions).forEach((key) => {
const overviewEl = suggestions[key];
const terms = new Map();
overviewEl.terms.forEach((term) => terms.set(term.term, term.count));
suggestionTerms.set(key, terms);
});
}
console.log(suggestionTerms);
// const color = 'f00ba0';
const layerUrl = `{s}/acn/tile/{z}/{x}/{y}?f=${filterCode ? filterCode : ''}`; // `&color=${color}`;
......@@ -322,7 +335,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
<ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
<Drawer variant="temporary" open={ sidebarOpened } onClose={ this.closeSidebar }>
<MapAccessionsFilters onSubmit={ loadAccessionsMapInfo } initialValues={ mapInfo && mapInfo.filter }/>
<AccessionsFilters terms={ suggestionTerms } onSubmit={ loadAccessionsMapInfo } initialValues={ mapInfo && mapInfo.filter }/>
</Drawer>
......@@ -357,7 +370,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
<div className={ `${classes.leafletContainer} ${trackClickPos && classes.crosshair}` }>
{ loading && <Loading /> }
{ mapInfo && typeof window !== 'undefined' &&
<Map
<MapComponent
onMoveend={ this.handleMoveEnd }
onClick={ this.onMapClick }
center={ position }
......@@ -452,7 +465,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
</Popup>
</Rectangle>
}
</Map>
</MapComponent>
}
</div>
</ContentLayout>
......@@ -461,6 +474,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
}
const mapStateToProps = (state, ownProps) => ({
suggestions: state.accessions.public.suggestions,
mapInfo: state.accessions.public.mapInfo ? state.accessions.public.mapInfo.data : undefined,
loading: state.accessions.public.mapInfo ? state.accessions.public.mapInfo.loading : false,
mapLayers: state.accessions.public.mapLayers,
......
src/accessions/ui/OverviewPage.tsx
View file @ d018fe51
......@@ -32,6 +32,7 @@ import Button from '@material-ui/core/Button';
interface IOverviewPageProps extends React.ClassAttributes<any> {
overview: AccessionOverview;
suggestions: any;
loading: boolean;
filterCode: string;
showSnackbar: (snack: string) => void;
......@@ -89,11 +90,11 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
switch (property) {
case 'crop':
case 'sampStat':
case 'holder.code':
case 'holder.country.iso3':
case 'origin.iso3':
case 'taxa.genus':
case 'taxa.species':
case 'institute.code':
case 'institute.country.code3':
case 'countryOfOrigin.code3':
case 'taxonomy.genus':
case 'taxonomy.species':
case 'storage':
_.set(updatedFilter, property, _.concat(_.get(updatedFilter, property), term).filter(x => x != null));
break;
......@@ -115,7 +116,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
};
public render() {
const { filterCode, currentTab, applyOverviewFilters, overview: overviewWrapper, loading, t } = this.props;
const { filterCode, currentTab, applyOverviewFilters, overview: overviewWrapper, loading, suggestions, t } = this.props;
const overview = overviewWrapper && overviewWrapper.overview || null;
const overviewKeys = ['institute.code', 'institute.country.code3', 'cropName', 'crop.shortName', 'sampStat', 'taxonomy.genus', 'taxonomy.genusSpecies',
......@@ -132,6 +133,16 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
});
}
const suggestionTerms = new Map();
if (suggestions) {
Object.keys(suggestions).forEach((key) => {
const overviewEl = suggestions[key];
const terms = new Map();
overviewEl.terms.forEach((term) => terms.set(term.term, term.count));
suggestionTerms.set(key, terms);
});
}
const filterByTerm = (property, term, count) => {
return (
skipTerms.indexOf(term.term) === -1
......@@ -143,7 +154,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
return (
<PageLayout
sidebar={
<AccessionFilters initialValues={ overviewWrapper && overviewWrapper.filter || {} } onSubmit={ applyOverviewFilters }/>
<AccessionFilters terms={ suggestionTerms } initialValues={ overviewWrapper && overviewWrapper.filter || {} } onSubmit={ applyOverviewFilters }/>
}
withFooter
>
......@@ -174,10 +185,10 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
<PageContents className="pt-1rem">
<GridContainer>
{ overviewsTerms && overviewsTerms.get('institute.code') && overviewsTerms.get('institute.code').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({title: term.term, value: filterByTerm('holder.code', term, term.count) })) } title={ t(`accessions.common.overview.institute code`) } small propertyItemProps={ { numeric: true } } />
<PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({title: term.term, value: filterByTerm('institute.code', term, term.count) })) } title={ t(`accessions.common.overview.institute code`) } small propertyItemProps={ { numeric: true } } />
}
{ 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: filterByTerm('holder.country.iso3', term, term.count) })) } title={ t(`accessions.common.overview.institute country code3`) } small propertyItemProps={ { numeric: true } } />
<PropertiesCard propertiesList={ overviewsTerms.get('institute.country.code3').map((term) => ({title: term.term, value: filterByTerm('institute.country.code3', term, term.count) })) } title={ t(`accessions.common.overview.institute country code3`) } small propertyItemProps={ { numeric: true } } />
}
{ overviewsTerms && overviewsTerms.get('crop.shortName') && overviewsTerms.get('crop.shortName').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('crop.shortName').map((term) => ({title: term.term, value: filterByTerm('crop', term, term.count)})) } title={ t(`accessions.common.overview.crop shortName`) } small propertyItemProps={ { numeric: true } } />
......@@ -186,7 +197,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
<PropertiesCard propertiesList={ overviewsTerms.get('cropName').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.cropName`) } small propertyItemProps={ { numeric: true } } />
}
{ overviewsTerms && overviewsTerms.get('taxonomy.genus') && overviewsTerms.get('taxonomy.genus').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genus').map((term) => ({title: term.term, value: filterByTerm('taxa.genus', term, term.count) })) } title={ t(`accessions.common.overview.taxonomy genus`) } small propertyItemProps={ { numeric: true, classes: {propertiesRowLabel: 'font-italic'} } } />
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genus').map((term) => ({title: term.term, value: filterByTerm('taxonomy.genus', term, term.count) })) } title={ t(`accessions.common.overview.taxonomy genus`) } small propertyItemProps={ { numeric: true, classes: {propertiesRowLabel: 'font-italic'} } } />
}
{ 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(`accessions.common.overview.taxonomy genusSpecies`) } small propertyItemProps={ { numeric: true, classes: {propertiesRowLabel: 'font-italic'} } } />
......@@ -199,7 +210,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
<PropertiesCard propertiesList={ overviewsTerms.get('storage').map((term) => ({title: t([`accessions.common.storage.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('storage', term, term.count) })) } title={ t(`accessions.common.overview.storage`) } small propertyItemProps={ { numeric: true } } />
}
{ overviewsTerms && overviewsTerms.get('countryOfOrigin.code3') && overviewsTerms.get('countryOfOrigin.code3').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('countryOfOrigin.code3').map((term) => ({title: term.term, value: filterByTerm('origin.iso3', term, term.count)})) } title={ t(`accessions.common.overview.countryOfOrigin code3`) } small propertyItemProps={ { numeric: true } } />
<PropertiesCard propertiesList={ overviewsTerms.get('countryOfOrigin.code3').map((term) => ({title: term.term, value: filterByTerm('countryOfOrigin.code3', term, term.count)})) } title={ t(`accessions.common.overview.countryOfOrigin code3`) } small propertyItemProps={ { numeric: true } } />
}
{ overviewsTerms && overviewsTerms.get('donorCode') && overviewsTerms.get('donorCode').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('donorCode').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.donorCode`) } small propertyItemProps={ { numeric: true } } />
......@@ -232,6 +243,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
}
const mapStateToProps = (state, ownProps) => ({
suggestions: state.accessions.public.suggestions,
overview: state.accessions.public.overview ? state.accessions.public.overview.data : undefined,
loading: state.accessions.public.overview ? state.accessions.public.overview.loading : false,
filterCode: ownProps.match.params.filterCode || '',
......
src/accessions/ui/c/Filters.tsx
View file @ d018fe51
......@@ -44,7 +44,13 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, terms, crops
/>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title={ t('accessions.common.taxonomy') }>
<StringArrFilter name="taxonomy.genus" terms={ terms && terms.get('taxonomy.genus') } label={ t('accessions.common.genus') } placeholder="Hordeum"/>
<StringArrFilter
name="taxonomy.genus"
terms={ terms && terms.get('taxonomy.genus') }
label={ t('accessions.common.genus') }
placeholder="Hordeum"
classes={ {propertiesRowLabel: 'font-italic'} }
/>
<StringArrFilter name="taxonomy.species" label={ t('accessions.common.species') } placeholder="vulgare"/>
<StringFilter name="taxonomy.subtaxa" searchType="contains" label={ t('accessions.public.f.subtaxon') } placeholder=""/>
</CollapsibleComponentSearch>
......@@ -54,27 +60,6 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, terms, crops
<NumberFilter name="geo.longitude" label={ t('geo.common.longitude') } />
<NumberFilter name="geo.elevation" label={ t('accessions.public.f.elevation') } />
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title={ t('accessions.public.f.climate') }>
<NumberFilter name="geo.climate.bio1" label={ t('accessions.climate.bio1') } />
<NumberFilter name="geo.climate.bio2" label={ t('accessions.climate.bio2') } />
<NumberFilter name="geo.climate.bio3" label={ t('accessions.climate.bio3') } />
<NumberFilter name="geo.climate.bio4" label={ t('accessions.climate.bio4') } />
<NumberFilter name="geo.climate.bio5" label={ t('accessions.climate.bio5') } />
<NumberFilter name="geo.climate.bio6" label={ t('accessions.climate.bio6') } />
<NumberFilter name="geo.climate.bio7" label={ t('accessions.climate.bio7') } />
<NumberFilter name="geo.climate.bio8" label={ t('accessions.climate.bio8') } />
<NumberFilter name="geo.climate.bio9" label={ t('accessions.climate.bio9') } />
<NumberFilter name="geo.climate.bio10" label={ t('accessions.climate.bio10') } />
<NumberFilter name="geo.climate.bio11" label={ t('accessions.climate.bio11') } />
<NumberFilter name="geo.climate.bio12" label={ t('accessions.climate.bio12') } />
<NumberFilter name="geo.climate.bio13" label={ t('accessions.climate.bio13') } />
<NumberFilter name="geo.climate.bio14" label={ t('accessions.climate.bio14') } />
<NumberFilter name="geo.climate.bio15" label={ t('accessions.climate.bio15') } />
<NumberFilter name="geo.climate.bio16" label={ t('accessions.climate.bio16') } />
<NumberFilter name="geo.climate.bio17" label={ t('accessions.climate.bio17') } />
<NumberFilter name="geo.climate.bio18" label={ t('accessions.climate.bio18') } />
<NumberFilter name="geo.climate.bio19" label={ t('accessions.climate.bio19') } />
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title={ t('accessions.common.sampStat') }>
<StringArrFilter
name="sampStat"
......@@ -113,6 +98,27 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, terms, crops
terms={ terms && terms.get('images') }
initialValues
/>
<CollapsibleComponentSearch title={ t('accessions.public.f.climate') }>
<NumberFilter name="geo.climate.bio1" label={ t('accessions.climate.bio1') } />
<NumberFilter name="geo.climate.bio2" label={ t('accessions.climate.bio2') } />
<NumberFilter name="geo.climate.bio3" label={ t('accessions.climate.bio3') } />
<NumberFilter name="geo.climate.bio4" label={ t('accessions.climate.bio4') } />
<NumberFilter name="geo.climate.bio5" label={ t('accessions.climate.bio5') } />
<NumberFilter name="geo.climate.bio6" label={ t('accessions.climate.bio6') } />
<NumberFilter name="geo.climate.bio7" label={ t('accessions.climate.bio7') } />
<NumberFilter name="geo.climate.bio8" label={ t('accessions.climate.bio8') } />
<NumberFilter name="geo.climate.bio9" label={ t('accessions.climate.bio9') } />
<NumberFilter name="geo.climate.bio10" label={ t('accessions.climate.bio10') } />
<NumberFilter name="geo.climate.bio11" label={ t('accessions.climate.bio11') } />
<NumberFilter name="geo.climate.bio12" label={ t('accessions.climate.bio12') } />
<NumberFilter name="geo.climate.bio13" label={ t('accessions.climate.bio13') } />
<NumberFilter name="geo.climate.bio14" label={ t('accessions.climate.bio14') } />
<NumberFilter name="geo.climate.bio15" label={ t('accessions.climate.bio15') } />
<NumberFilter name="geo.climate.bio16" label={ t('accessions.climate.bio16') } />
<NumberFilter name="geo.climate.bio17" label={ t('accessions.climate.bio17') } />
<NumberFilter name="geo.climate.bio18" label={ t('accessions.climate.bio18') } />
<NumberFilter name="geo.climate.bio19" label={ t('accessions.climate.bio19') } />
</CollapsibleComponentSearch>
</CollapsibleComponentSearch>
</FiltersBlock>
);
......
src/service/genesys/AccessionService.ts
View file @ d018fe51
......@@ -23,7 +23,7 @@ const URL_GET_DETAILS_BY_DOI = `/api/v1/acn/details/{doi}`; // UrlTemplate doesn
const URL_GET_DETAILS_BY_UUID = UrlTemplate.parse(`/api/v1/acn/details/{uuid}`);
const URL_TO_UUID = `/api/v1/acn/toUUID`;
const URL_LIST = `/api/v1/acn/list`;
const URL_LIST_SUGGESTIONS = `/api/v1/acn/list-suggestions`;
const URL_LIST_SUGGESTIONS = `/api/v1/acn/filter`;
const URL_LIST_OVERVIEW = `/api/v1/acn/overview`;
const URL_MAPINFO = `/api/v1/acn/mapinfo`;
......
src/ui/common/filter/StringArrFilter.tsx
View file @ d018fe51
......@@ -231,7 +231,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
}
public render() {
const { placeholder, label, options, t, names, terms, valueField, labelField, byKey } = this.props;
const { placeholder, label, options, t, names, terms, valueField, labelField, byKey, classes } = this.props;
const { input } = _.get(this.props, names[0]);
const { input: notInput } = _.get(this.props, names[1]);
......@@ -296,7 +296,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
<Properties>
<h5 className="pl-10 pt-1rem mb-10">{ t('common:f.suggestedFilters') }</h5>
{ terms && Array.from(terms).slice(0, 10).map(([key, value]) => (
<PropertiesItem key={ key } title={ key } onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {propertiesRow: 'cursor-pointer'} }>
<PropertiesItem key={ key } title={ key } onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {...classes, propertiesRow: 'cursor-pointer'} }>
<span className="float-right">
<Number value={ value }/>
</span>
......@@ -319,6 +319,7 @@ interface IStringArrFilter extends React.ClassAttributes<any> {
valueField?: string;
labelField?: string;
byKey?: boolean;
classes: any;
t: any;
}
......@@ -326,7 +327,7 @@ class StringArrFilter extends React.Component<IStringArrFilter, any> {
public render() {
const { name, label, placeholder, options, terms, valueField, labelField, byKey, t } = this.props;
const { name, label, placeholder, options, terms, valueField, labelField, byKey, classes, t } = this.props;
return (
<div>
<Fields
......@@ -339,6 +340,7 @@ class StringArrFilter extends React.Component<IStringArrFilter, any> {
valueField={ valueField }
labelField={ labelField }
byKey={ byKey }
classes={ classes }
t={ t }
/>
</div>
......
Markdown is supported
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