Commit d018fe51 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza

Added suggestions for Overview and MapPage

Added genus italic styles

Fixed overview filters
parent 784b3060
......@@ -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},
});
......
......@@ -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,
......
......@@ -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 || '',
......
......@@ -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>
);
......
......@@ -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`;
......
......@@ -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