diff --git a/src/client/components/App.js b/src/client/components/App.js
index a4de9f0f5fb08173eac788f591d8b9faf746405d..e77e0c0c10e5060a77ad9ef37aa245790d98b3c3 100644
--- a/src/client/components/App.js
+++ b/src/client/components/App.js
@@ -30,8 +30,8 @@ const theme = createTheme({
breakpoints: {
values: {
...muiDefaultBreakpoints,
- reducedHeight: muiDefaultBreakpoints[reducedHeightBreakpoint],
- hundredPercentHeight: muiDefaultBreakpoints[hundredPercentHeightBreakPoint]
+ reducedHeight: reducedHeightBreakpoint,
+ hundredPercentHeight: hundredPercentHeightBreakPoint
}
},
components: {
@@ -47,47 +47,65 @@ const theme = createTheme({
}
}
},
+ MuiIconButton: {
+ styleOverrides: {
+ root: {
+ padding: 4
+ }
+ }
+ },
MuiTooltip: {
- tooltip: {
- fontSize: '1 rem'
+ styleOverrides: {
+ tooltip: {
+ fontSize: '1rem'
+ }
}
},
MuiAccordion: {
- root: {
- '&$expanded': {
- marginTop: 8,
- marginBottom: 8
+ styleOverrides: {
+ root: {
+ '&.MuiAccordion-root.Mui-expanded': {
+ marginTop: 8,
+ marginBottom: 8
+ }
}
}
},
MuiAccordionSummary: {
- content: {
- '&$expanded': {
- marginTop: 4
- }
- },
- expandIcon: {
- '&$expanded': {
- marginTop: -16
+ styleOverrides: {
+ root: {
+ paddingLeft: 8,
+ paddingRight: 8,
+ '&.MuiAccordionSummary-root.Mui-expanded': {
+ minHeight: 48
+ }
+ },
+ content: {
+ marginTop: 8,
+ marginBottom: 8,
+ '&.MuiAccordionSummary-content.Mui-expanded': {
+ marginTop: 0,
+ marginBottom: 0
+ }
}
- }
- },
- MuiButton: {
- endIcon: {
- marginLeft: 0
- }
- },
- MuiIconButton: {
- root: {
- padding: 4
- }
- },
- MuiTableCell: {
- sizeSmall: {
- paddingTop: 0,
- paddingBottom: 0
+ // expandIcon: {
+ // '&$expanded': {
+ // marginTop: -16
+ // }
+ // }
}
}
+ // MuiButton: {
+ // endIcon: {
+ // marginLeft: 0
+ // }
+ // },
+ // MuiTableCell: {
+ // sizeSmall: {
+ // paddingTop: 0,
+ // paddingBottom: 0
+ // }
+ // }
}
})
diff --git a/src/client/components/facet_bar/FacetBar.js b/src/client/components/facet_bar/FacetBar.js
index a08c3b1500f3c7fd63c694f4f9a92a8139e5c517..617740d98a8e6e4e31212679fb45782c63048406 100644
--- a/src/client/components/facet_bar/FacetBar.js
+++ b/src/client/components/facet_bar/FacetBar.js
@@ -1,7 +1,13 @@
import React from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
-import withStyles from '@mui/styles/withStyles'
+import { has } from 'lodash'
+import Box from '@mui/material/Box'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import Typography from '@mui/material/Typography'
import HierarchicalFacet from './HierarchicalFacet'
import TextFacet from './TextFacet'
import SliderFacet from './SliderFacet'
@@ -13,39 +19,10 @@ import FacetInfo from './FacetInfo'
import DatasetSelector from './DatasetSelector'
import SearchField from './SearchField'
import LeafletMapDialog from './LeafletMapDialog'
-import Accordion from '@mui/material/Accordion'
-import AccordionSummary from '@mui/material/AccordionSummary'
-import AccordionDetails from '@mui/material/AccordionDetails'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import Typography from '@mui/material/Typography'
-import clsx from 'clsx'
-import { has } from 'lodash'
-const styles = theme => ({
- root: {
- width: '100%',
- height: '100%'
- },
- facetInfoContainer: {
- padding: theme.spacing(1),
- borderBottomLeftRadius: 0,
- borderBottomRightRadius: 0
- },
- accordionSummaryRoot: props => ({
- paddingLeft: theme.spacing(1),
- cursor: 'default !important',
- minHeight: 38,
- [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
- minHeight: 48
- }
- }),
- accordionSummaryContent: {
- margin: 0
- },
- accordionDetails: {
- paddingTop: 0,
- paddingLeft: theme.spacing(1),
- flexDirection: 'column'
+const facetHeights = {
+ one: {
+ height: 54
},
two: {
height: 60
@@ -65,7 +42,7 @@ const styles = theme => ({
ten: {
height: 357
}
-})
+}
/**
* A component for rendering a preconfigured set of facets and related information.
@@ -78,7 +55,7 @@ class FacetBar extends React.Component {
}
}
- handleExpandButtonOnClick = facetID => event => {
+ handleAccordionChange = facetID => event => {
const activeFacets = this.state.activeFacets
if (activeFacets.has(facetID)) {
activeFacets.delete(facetID)
@@ -89,18 +66,16 @@ class FacetBar extends React.Component {
}
renderFacet = (facetID, someFacetIsFetching) => {
- const { classes, facetClass } = this.props
- const { facetUpdateID, updatedFacet, updatedFilter, facets } = this.props.facetData
+ const { facetClass } = this.props
+ const { facetUpdateID, updatedFacet, updatedFilter, facets } = this.props.facetState
const label = intl.get(`perspectives.${facetClass}.properties.${facetID}.label`)
const description = intl.get(`perspectives.${facetClass}.properties.${facetID}.description`)
const facet = { ...facets[facetID] }
- const facetConstrainSelf = this.props.facetDataConstrainSelf == null
- ? null
- : this.props.facetDataConstrainSelf.facets[facetID]
+ const facetConstrainSelf = this.props.facetStateConstrainSelf.facets[facetID]
let facetComponent = null
const isActive = this.state.activeFacets.has(facetID)
if (this.props.facetedSearchMode === 'clientFS' && facetID !== 'datasetSelector') {
- if (this.props.facetData.results == null) {
+ if (this.props.facetState.results == null) {
// do not render facets when there are no results
return null
} else {
@@ -224,7 +199,7 @@ class FacetBar extends React.Component {
case 'datasetSelector':
facetComponent = (
<DatasetSelector
- datasets={this.props.facetData.datasets}
+ datasets={this.props.facetState.datasets}
clientFSToggleDataset={this.props.clientFSToggleDataset}
perspectiveID={this.props.facetClass}
/>
@@ -250,14 +225,10 @@ class FacetBar extends React.Component {
<Accordion
key={facetID}
expanded={isActive}
+ onChange={this.handleAccordionChange(facetID)}
>
<AccordionSummary
- classes={{
- root: classes.accordionSummaryRoot,
- content: classes.accordionSummaryContent
- }}
expandIcon={<ExpandMoreIcon />}
- // IconButtonProps={{ onClick: this.handleExpandButtonOnClick(facetID) }}
aria-controls={`${facetID}-content`}
id={`${facetID}-header`}
>
@@ -268,9 +239,7 @@ class FacetBar extends React.Component {
facetLabel={label}
facet={facet}
facetConstrainSelf={facetConstrainSelf}
- facetConstrainSelfUpdateID={this.props.facetDataConstrainSelf
- ? this.props.facetDataConstrainSelf.facetUpdateID
- : null}
+ facetConstrainSelfUpdateID={this.props.facetStateConstrainSelf.facetUpdateID}
isActive={isActive}
facetClass={this.props.facetClass}
resultClass={this.props.resultClass}
@@ -291,7 +260,12 @@ class FacetBar extends React.Component {
/>
</AccordionSummary>
<AccordionDetails
- className={clsx(classes[facet.containerClass], classes.accordionDetails)}
+ sx={theme => ({
+ paddingTop: 0,
+ paddingLeft: theme.spacing(1),
+ flexDirection: 'column',
+ height: facetHeights[facet.containerClass].height
+ })}
>
{isActive && facetComponent}
</AccordionDetails>
@@ -308,25 +282,20 @@ class FacetBar extends React.Component {
return variant
}
- renderFacets = ({ classes, facets, someFacetIsFetching }) => {
+ renderFacets = ({ facets, someFacetIsFetching }) => {
const { screenSize } = this.props
if (screenSize === 'xs' || screenSize === 'sm') {
+ // note: some Accordion styles defined in theme (App.js)
return (
<Accordion>
<AccordionSummary
- classes={{
- root: classes.accordionSummaryRoot,
- content: classes.accordionSummaryContent
- }}
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'
>
<Typography variant={this.getTypographyVariant()}>{intl.get('facetBar.filters')}</Typography>
</AccordionSummary>
- <AccordionDetails
- className={classes.accordionDetails}
- />
+ <AccordionDetails />
{facets && Object.keys(facets).map(facetID => {
if (facetID === 'datasetSelector') { return null }
if (!has(facets[facetID], 'filterType')) { return null }
@@ -348,10 +317,10 @@ class FacetBar extends React.Component {
}
render () {
- const { classes, facetClass, resultClass, resultCount, facetData, facetedSearchMode } = this.props
- const { facets } = facetData
+ const { facetClass, resultClass, resultCount, facetState, facetedSearchMode } = this.props
+ const { facets } = facetState
let someFacetIsFetching = false
- const hasClientFSResults = facetData.results !== null
+ const hasClientFSResults = facetState.results !== null
if (facetedSearchMode === 'serverFS') {
Object.values(facets).forEach(facet => {
if (facet.isFetching) {
@@ -361,15 +330,20 @@ class FacetBar extends React.Component {
}
return (
- <div className={classes.root}>
+ <Box
+ sx={{
+ width: '100%',
+ height: '100%'
+ }}
+ >
{facetedSearchMode === 'clientFS' && this.renderFacet('datasetSelector', false)}
{facetedSearchMode === 'clientFS' &&
<SearchField
- search={this.props.facetData}
+ search={this.props.facetState}
fetchResults={this.props.clientFSFetchResults}
clearResults={this.props.clientFSClearResults}
updateQuery={this.props.clientFSUpdateQuery}
- datasets={this.props.facetData.datasets}
+ datasets={this.props.facetState.datasets}
perspectiveID={facetClass}
/>}
{facetedSearchMode === 'clientFS' &&
@@ -385,11 +359,17 @@ class FacetBar extends React.Component {
leafletConfig={this.props.leafletConfig}
/>}
{(facetedSearchMode === 'serverFS' || hasClientFSResults) &&
- <Paper className={classes.facetInfoContainer}>
+ <Paper
+ sx={theme => ({
+ padding: theme.spacing(1),
+ borderBottomLeftRadius: 0,
+ borderBottomRightRadius: 0
+ })}
+ >
<FacetInfo
facetedSearchMode={facetedSearchMode}
- facetUpdateID={facetData.facetUpdateID}
- facetData={facetData}
+ facetUpdateID={facetState.facetUpdateID}
+ facetState={facetState}
facetClass={facetClass}
resultClass={resultClass}
resultCount={resultCount}
@@ -404,17 +384,16 @@ class FacetBar extends React.Component {
/>
</Paper>}
{(facetedSearchMode === 'serverFS' || hasClientFSResults) &&
- this.renderFacets({ classes, facets, someFacetIsFetching })}
- </div>
+ this.renderFacets({ facets, someFacetIsFetching })}
+ </Box>
)
}
}
FacetBar.propTypes = {
- classes: PropTypes.object.isRequired,
facetedSearchMode: PropTypes.string.isRequired,
- facetData: PropTypes.object.isRequired,
- facetDataConstrainSelf: PropTypes.object,
+ facetState: PropTypes.object.isRequired,
+ facetStateConstrainSelf: PropTypes.object.isRequired,
perspectiveState: PropTypes.object,
facetClass: PropTypes.string.isRequired,
resultClass: PropTypes.string.isRequired,
@@ -442,6 +421,4 @@ FacetBar.propTypes = {
screenSize: PropTypes.string.isRequired
}
-export const FacetBarComponent = FacetBar
-
-export default withStyles(styles)(FacetBar)
+export default FacetBar
diff --git a/src/client/components/facet_bar/FacetHeader.js b/src/client/components/facet_bar/FacetHeader.js
index be2577cc7d7f7c49fd441001a80af5b5c38d85aa..6f3d06664841b6e08ad1341ea8baa9cb4ce5aad4 100644
--- a/src/client/components/facet_bar/FacetHeader.js
+++ b/src/client/components/facet_bar/FacetHeader.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import Menu from '@mui/material/Menu'
@@ -27,9 +27,9 @@ const styles = theme => ({
// justifyContent: 'space-between',
width: '100%'
},
- facetLabel: props => ({
- fontSize: '0.875rem'
- }),
+ // facetLabel: props => ({
+ // f
+ // }),
facetValuesContainerTen: {
height: 345,
padding: theme.spacing(1)
@@ -283,87 +283,90 @@ class FacetHeader extends React.Component {
)
}
}
- return <>
- {pieChartButton &&
- <ChartDialog
- portalConfig={this.props.portalConfig}
- perspectiveConfig={this.props.perspectiveConfig}
- apexChartsConfig={this.props.apexChartsConfig}
- results={this.props.facetConstrainSelf.values}
- resultUpdateID={this.props.facetConstrainSelfUpdateID}
- fetching={this.props.facetConstrainSelf.isFetching}
- fetchData={this.props.fetchFacetConstrainSelf}
- facetClass={this.props.facetClass}
- facetID={this.props.facetID}
- icon={<PieChartIcon />}
- tooltip={intl.get('facetBar.pieChart.tooltip')}
- dialogTitle={this.props.facetLabel}
- resultClassConfig={{
- createChartData: 'createApexPieChartData',
- property: this.props.facetID
- }}
- />}
- {barChartButton &&
- <ChartDialog
- portalConfig={this.props.portalConfig}
- perspectiveConfig={this.props.perspectiveConfig}
- apexChartsConfig={this.props.apexChartsConfig}
- results={this.props.facetConstrainSelf.values}
- resultUpdateID={this.props.facetConstrainSelfUpdateID}
- fetching={this.props.facetConstrainSelf.isFetching}
- fetchData={this.props.fetchFacetConstrainSelf}
- facetClass={this.props.facetClass}
- facetID={this.props.facetID}
- icon={<BarChartIcon />}
- tooltip={intl.get('facetBar.barChart.tooltip')}
- resultClassConfig={{
- createChartData: 'createApexBarChartData',
- property: this.props.facetID,
- title: intl.get(`facetBar.barChart.${this.props.facetID}.title`),
- xaxisTitle: intl.get(`facetBar.barChart.${this.props.facetID}.xaxisTitle`),
- yaxisTitle: intl.get(`facetBar.barChart.${this.props.facetID}.yaxisTitle`),
- seriesTitle: intl.get(`facetBar.barChart.${this.props.facetID}.seriesTitle`)
- }}
- />}
- {lineChartButton &&
- <ChartDialog
- portalConfig={this.props.portalConfig}
- perspectiveConfig={this.props.perspectiveConfig}
- apexChartsConfig={this.props.apexChartsConfig}
- results={this.props.perspectiveState.results}
- resultUpdateID={this.props.perspectiveState.resultUpdateID}
- fetching={this.props.perspectiveState.fetching}
- fetchData={this.props.fetchResults}
- resultClass={`${this.props.facetID}LineChart`}
- facetClass={this.props.facetClass}
- facetID={this.props.facetID}
- icon={<LineChartIcon />}
- tooltip={intl.get('facetBar.lineChart.tooltip')}
- resultClassConfig={this.props.perspectiveConfig.resultClasses[`${this.props.facetID}LineChart`]}
- />}
- {menuButtons.length > 0 &&
- <>
- <Tooltip disableFocusListener title={intl.get('facetBar.filterOptions')}>
- <IconButton
- className='facetMenuButton'
- aria-label={intl.get('facetBar.filterOptions')}
- aria-owns={open ? 'facet-option-menu' : undefined}
- aria-haspopup='true'
- onClick={this.handleMenuButtonClick}
- size="large">
- <MoreVertIcon />
- </IconButton>
- </Tooltip>
- <Menu
- id='facet-option-menu'
- anchorEl={anchorEl}
- open={open}
- onClose={this.handleMenuClose}
- >
- {menuButtons}
- </Menu>
- </>}
- </>;
+ return (
+ <>
+ {pieChartButton &&
+ <ChartDialog
+ portalConfig={this.props.portalConfig}
+ perspectiveConfig={this.props.perspectiveConfig}
+ apexChartsConfig={this.props.apexChartsConfig}
+ results={this.props.facetConstrainSelf.values}
+ resultUpdateID={this.props.facetConstrainSelfUpdateID}
+ fetching={this.props.facetConstrainSelf.isFetching}
+ fetchData={this.props.fetchFacetConstrainSelf}
+ facetClass={this.props.facetClass}
+ facetID={this.props.facetID}
+ icon={<PieChartIcon />}
+ tooltip={intl.get('facetBar.pieChart.tooltip')}
+ dialogTitle={this.props.facetLabel}
+ resultClassConfig={{
+ createChartData: 'createApexPieChartData',
+ property: this.props.facetID
+ }}
+ />}
+ {barChartButton &&
+ <ChartDialog
+ portalConfig={this.props.portalConfig}
+ perspectiveConfig={this.props.perspectiveConfig}
+ apexChartsConfig={this.props.apexChartsConfig}
+ results={this.props.facetConstrainSelf.values}
+ resultUpdateID={this.props.facetConstrainSelfUpdateID}
+ fetching={this.props.facetConstrainSelf.isFetching}
+ fetchData={this.props.fetchFacetConstrainSelf}
+ facetClass={this.props.facetClass}
+ facetID={this.props.facetID}
+ icon={<BarChartIcon />}
+ tooltip={intl.get('facetBar.barChart.tooltip')}
+ resultClassConfig={{
+ createChartData: 'createApexBarChartData',
+ property: this.props.facetID,
+ title: intl.get(`facetBar.barChart.${this.props.facetID}.title`),
+ xaxisTitle: intl.get(`facetBar.barChart.${this.props.facetID}.xaxisTitle`),
+ yaxisTitle: intl.get(`facetBar.barChart.${this.props.facetID}.yaxisTitle`),
+ seriesTitle: intl.get(`facetBar.barChart.${this.props.facetID}.seriesTitle`)
+ }}
+ />}
+ {lineChartButton &&
+ <ChartDialog
+ portalConfig={this.props.portalConfig}
+ perspectiveConfig={this.props.perspectiveConfig}
+ apexChartsConfig={this.props.apexChartsConfig}
+ results={this.props.perspectiveState.results}
+ resultUpdateID={this.props.perspectiveState.resultUpdateID}
+ fetching={this.props.perspectiveState.fetching}
+ fetchData={this.props.fetchResults}
+ resultClass={`${this.props.facetID}LineChart`}
+ facetClass={this.props.facetClass}
+ facetID={this.props.facetID}
+ icon={<LineChartIcon />}
+ tooltip={intl.get('facetBar.lineChart.tooltip')}
+ resultClassConfig={this.props.perspectiveConfig.resultClasses[`${this.props.facetID}LineChart`]}
+ />}
+ {menuButtons.length > 0 &&
+ <>
+ <Tooltip disableFocusListener title={intl.get('facetBar.filterOptions')}>
+ <IconButton
+ className='facetMenuButton'
+ aria-label={intl.get('facetBar.filterOptions')}
+ aria-owns={open ? 'facet-option-menu' : undefined}
+ aria-haspopup='true'
+ onClick={this.handleMenuButtonClick}
+ size='large'
+ >
+ <MoreVertIcon />
+ </IconButton>
+ </Tooltip>
+ <Menu
+ id='facet-option-menu'
+ anchorEl={anchorEl}
+ open={open}
+ onClose={this.handleMenuClose}
+ >
+ {menuButtons}
+ </Menu>
+ </>}
+ </>
+ )
}
render () {
@@ -374,12 +377,19 @@ class FacetHeader extends React.Component {
return (
<div className={classes.headingContainer}>
- <Typography className={classes.facetLabel} variant='body1'>{facetLabel}</Typography>
+ <Typography
+ sx={{
+ fontSize: '0.875rem'
+ }}
+ variant='body1'
+ >
+ {facetLabel}
+ </Typography>
<Tooltip
title={facetDescription}
enterDelay={300}
>
- <IconButton aria-label='description' size="large">
+ <IconButton aria-label='description' size='large'>
<InfoIcon />
</IconButton>
</Tooltip>
@@ -388,7 +398,7 @@ class FacetHeader extends React.Component {
{this.renderFacetMenu()}
</div>}
</div>
- );
+ )
}
}
diff --git a/src/client/components/facet_bar/FacetInfo.js b/src/client/components/facet_bar/FacetInfo.js
index 9c33bf7bc29f93013055989a2b91de114967a930..47d3c4dea2bff6b3fde6ad738e8d76590541328e 100644
--- a/src/client/components/facet_bar/FacetInfo.js
+++ b/src/client/components/facet_bar/FacetInfo.js
@@ -2,32 +2,14 @@ import React from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
import { has } from 'lodash'
-import withStyles from '@mui/styles/withStyles';
import ActiveFilters from './ActiveFilters'
import Button from '@mui/material/Button'
import DeleteIcon from '@mui/icons-material/Delete'
import Divider from '@mui/material/Divider'
+import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import CircularProgress from '@mui/material/CircularProgress'
-import { purple } from '@mui/material/colors';
-
-const styles = theme => ({
- facetInfoDivider: {
- marginTop: theme.spacing(0.5),
- marginBottom: theme.spacing(0.5)
- },
- headerContainer: {
- display: 'flex',
- justifyContent: 'space-between'
- },
- button: {
- margin: theme.spacing(1)
- },
- infoText: {
- fontWeight: 'bold',
- fontSize: '1rem'
- }
-})
+import { purple } from '@mui/material/colors'
/**
* A component for fetching and displaying the number of results, and displaying active filters.
@@ -63,9 +45,9 @@ class FacetInfo extends React.Component {
}
render () {
- const { classes, facetClass, resultClass, resultCount, someFacetIsFetching, screenSize } = this.props
+ const { facetClass, resultClass, resultCount, someFacetIsFetching, screenSize } = this.props
const mobileMode = screenSize === 'xs' || screenSize === 'sm'
- const { facets } = this.props.facetData
+ const { facets } = this.props.facetState
const uriFilters = {}
const spatialFilters = {}
const textFilters = {}
@@ -106,11 +88,28 @@ class FacetInfo extends React.Component {
}
})
return (
- <div className={classes.root}>
+ <>
{this.props.fetchingResultCount
? <CircularProgress style={{ color: purple[500] }} thickness={5} size={26} />
- : <Typography component='h2' className={classes.infoText} variant={this.getTypographyVariant()}>{intl.get('facetBar.results')}: {resultCount} {intl.get(`perspectives.${resultClass}.facetResultsType`)}</Typography>}
- {!mobileMode && <Divider className={classes.facetInfoDivider} />}
+ : (
+ <Typography
+ component='h2'
+ variant={this.getTypographyVariant()}
+ sx={{
+ fontWeight: 'bold',
+ fontSize: '1rem'
+ }}
+ >
+ {intl.get('facetBar.results')}: {resultCount} {intl.get(`perspectives.${resultClass}.facetResultsType`)}
+ </Typography>
+ )}
+ {!mobileMode &&
+ <Divider
+ sx={theme => ({
+ marginTop: theme.spacing(0.5),
+ marginBottom: theme.spacing(0.5)
+ })}
+ />}
{(activeUriFilters ||
activeSpatialFilters ||
activeTextFilters ||
@@ -119,47 +118,66 @@ class FacetInfo extends React.Component {
activeIntegerFilters
) &&
<>
- <div className={classes.headerContainer}>
+ <Box
+ sx={{
+ display: 'flex',
+ justifyContent: 'space-between'
+ }}
+ >
<Typography component='h2' variant={this.getTypographyVariant()}>{intl.get('facetBar.activeFilters')}</Typography>
<Button
variant='contained'
color='secondary'
size='small'
- className={classes.button}
startIcon={<DeleteIcon />}
onClick={this.handleRemoveAllFiltersOnClick}
disabled={someFacetIsFetching}
+ sx={theme => ({
+ margin: theme.spacing(1)
+ })}
>{intl.get('facetBar.removeAllFilters')}
</Button>
- </div>
- <div className={classes.textContainer}>
- <ActiveFilters
- facetClass={facetClass}
- uriFilters={uriFilters}
- spatialFilters={spatialFilters}
- textFilters={textFilters}
- timespanFilters={timespanFilters}
- dateNoTimespanFilters={dateNoTimespanFilters}
- integerFilters={integerFilters}
- updateFacetOption={this.props.updateFacetOption}
- someFacetIsFetching={someFacetIsFetching}
- fetchingResultCount={this.props.fetchingResultCount}
- fetchFacet={this.props.fetchFacet}
- />
- </div>
- <Divider className={classes.facetInfoDivider} />
+ </Box>
+ <ActiveFilters
+ facetClass={facetClass}
+ uriFilters={uriFilters}
+ spatialFilters={spatialFilters}
+ textFilters={textFilters}
+ timespanFilters={timespanFilters}
+ dateNoTimespanFilters={dateNoTimespanFilters}
+ integerFilters={integerFilters}
+ updateFacetOption={this.props.updateFacetOption}
+ someFacetIsFetching={someFacetIsFetching}
+ fetchingResultCount={this.props.fetchingResultCount}
+ fetchFacet={this.props.fetchFacet}
+ />
+ <Divider
+ sx={theme => ({
+ marginTop: theme.spacing(0.5),
+ marginBottom: theme.spacing(0.5)
+ })}
+ />
</>}
- {!mobileMode && <Typography component='h2' className={classes.infoText} variant={this.getTypographyVariant()}>{intl.get('facetBar.narrowDownBy')}:</Typography>}
- </div>
+ {!mobileMode &&
+ <Typography
+ component='h2'
+ variant={this.getTypographyVariant()}
+ sx={{
+ fontWeight: 'bold',
+ fontSize: '1rem'
+ }}
+ >
+ {intl.get('facetBar.narrowDownBy')}:
+ </Typography>}
+ </>
)
}
}
FacetInfo.propTypes = {
- classes: PropTypes.object.isRequired,
facetedSearchMode: PropTypes.string.isRequired,
facetUpdateID: PropTypes.number.isRequired,
- facetData: PropTypes.object.isRequired,
+ facetState: PropTypes.object.isRequired,
facetClass: PropTypes.string.isRequired,
resultClass: PropTypes.string.isRequired,
resultCount: PropTypes.number,
@@ -170,6 +188,4 @@ FacetInfo.propTypes = {
fetchFacet: PropTypes.func
}
-export const FacetInfoComponent = FacetInfo
-
-export default withStyles(styles)(FacetInfo)
+export default FacetInfo
diff --git a/src/client/components/facet_bar/HierarchicalFacet.js b/src/client/components/facet_bar/HierarchicalFacet.js
index 159806b184a9fbfa233b4d5e9b59fd9fa6279164..3a9dc18fc0a9b392e24e324d12bf28756ba602ac 100644
--- a/src/client/components/facet_bar/HierarchicalFacet.js
+++ b/src/client/components/facet_bar/HierarchicalFacet.js
@@ -1,11 +1,12 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import { has } from 'lodash'
import SortableTree, { changeNodeAtPath } from '@nosferatu500/react-sortable-tree'
import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer'
import Checkbox from '@mui/material/Checkbox'
+import Box from '@mui/material/Box'
import FormControlLabel from '@mui/material/FormControlLabel'
import CircularProgress from '@mui/material/CircularProgress'
import Input from '@mui/material/Input'
@@ -14,7 +15,7 @@ import NavigateNextIcon from '@mui/icons-material/NavigateNext'
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
import Typography from '@mui/material/Typography'
import { generateLabelForMissingValue } from '../../helpers/helpers'
-import { purple } from '@mui/material/colors';
+import { purple } from '@mui/material/colors'
const styles = () => ({
facetSearchContainer: {
@@ -26,13 +27,6 @@ const styles = () => ({
facetSearchIconButton: {
padding: 10
},
- treeContainer: {
- flex: 1
- },
- treeContainerWithSearchField: {
- width: '100%',
- flex: 1
- },
spinnerContainer: {
display: 'flex',
width: '100%',
@@ -155,6 +149,8 @@ class HierarchicalFacet extends Component {
})
}
+ console.log('didupate')
+
// when values have been fetched, update component's state
if (prevProps.facet.values !== this.props.facet.values) {
this.setState({
@@ -304,76 +300,86 @@ class HierarchicalFacet extends Component {
: 0
})
- return <>
- {isFetching
- ? (
- <div className={classes.spinnerContainer}>
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
- </div>
- )
- : (
- <>
- {searchField && facet.filterType !== 'spatialFilter' &&
- <div className={classes.facetSearchContainer}>
- <Input
- placeholder={intl.get('facetBar.facetSearchFieldPlaceholder')}
- onChange={this.handleSearchFieldOnChange}
- value={this.state.searchString}
- />
- {searchFoundCount > 0 &&
- <>
- <IconButton
- className={classes.facetSearchIconButton}
- aria-label='Previous'
- onClick={selectPrevMatch}
- size="large">
- <NavigateBeforeIcon />
- </IconButton>
- <IconButton
- className={classes.facetSearchIconButton}
- aria-label='Next'
- onClick={selectNextMatch}
- size="large">
- <NavigateNextIcon />
- </IconButton>
- <Typography>
- {searchFoundCount > 0 ? searchFocusIndex + 1 : 0} / {searchFoundCount || 0}
- </Typography>
- </>}
- </div>}
- {facet.filterType !== 'spatialFilter' &&
- <div className={searchField ? classes.treeContainerWithSearchField : classes.treeContainer}>
- <SortableTree
- treeData={this.state.treeData}
- onChange={treeData => this.setState({ treeData })}
- canDrag={false}
- rowHeight={30}
- searchMethod={customSearchMethod}
- searchQuery={searchString}
- searchFocusOffset={searchFocusIndex}
- searchFinishCallback={matches => {
- this.setState({
- searchFoundCount: matches.length,
- searchFocusIndex:
- matches.length > 0 ? searchFocusIndex % matches.length : 0,
- matches
- })
+ return (
+ <>
+ {isFetching
+ ? (
+ <div className={classes.spinnerContainer}>
+ <CircularProgress style={{ color: purple[500] }} thickness={5} />
+ </div>
+ )
+ : (
+ <>
+ {searchField && facet.filterType !== 'spatialFilter' &&
+ <div className={classes.facetSearchContainer}>
+ <Input
+ placeholder={intl.get('facetBar.facetSearchFieldPlaceholder')}
+ onChange={this.handleSearchFieldOnChange}
+ value={this.state.searchString}
+ />
+ {searchFoundCount > 0 &&
+ <>
+ <IconButton
+ className={classes.facetSearchIconButton}
+ aria-label='Previous'
+ onClick={selectPrevMatch}
+ size='large'
+ >
+ <NavigateBeforeIcon />
+ </IconButton>
+ <IconButton
+ className={classes.facetSearchIconButton}
+ aria-label='Next'
+ onClick={selectNextMatch}
+ size='large'
+ >
+ <NavigateNextIcon />
+ </IconButton>
+ <Typography>
+ {searchFoundCount > 0 ? searchFocusIndex + 1 : 0} / {searchFoundCount || 0}
+ </Typography>
+ </>}
+ </div>}
+ {facet.filterType !== 'spatialFilter' &&
+ <Box
+ sx={{
+ height: searchField
+ ? 'calc(100% - 44px)'
+ : '100%'
}}
- onlyExpandSearchedNodes
- theme={FileExplorerTheme}
- generateNodeProps={this.generateNodeProps}
- isVirtualized={this.props.facetedSearchMode !== 'storybook'}
- />
- </div>}
- {facet.filterType === 'spatialFilter' &&
- <div className={classes.spinnerContainer}>
- <Typography>
- Draw a bounding box on the map to filter by {intl.get(`perspectives.${facetClass}.properties.${facetID}.label`)}.
- </Typography>
- </div>}
- </>
- )}
- </>;
+ >
+ <SortableTree
+ treeData={this.state.treeData}
+ onChange={treeData => this.setState({ treeData })}
+ canDrag={false}
+ rowHeight={30}
+ searchMethod={customSearchMethod}
+ searchQuery={searchString}
+ searchFocusOffset={searchFocusIndex}
+ searchFinishCallback={matches => {
+ this.setState({
+ searchFoundCount: matches.length,
+ searchFocusIndex:
+ matches.length > 0 ? searchFocusIndex % matches.length : 0,
+ matches
+ })
+ }}
+ onlyExpandSearchedNodes
+ theme={FileExplorerTheme}
+ generateNodeProps={this.generateNodeProps}
+ isVirtualized={this.props.facetedSearchMode !== 'storybook'}
+ />
+ </Box>}
+ {facet.filterType === 'spatialFilter' &&
+ <div className={classes.spinnerContainer}>
+ <Typography>
+ Draw a bounding box on the map to filter by {intl.get(`perspectives.${facetClass}.properties.${facetID}.label`)}.
+ </Typography>
+ </div>}
+ </>
+ )}
+ </>
+ )
}
}
diff --git a/src/client/components/facet_results/FacetedSearchPerspective.js b/src/client/components/facet_results/FacetedSearchPerspective.js
new file mode 100644
index 0000000000000000000000000000000000000000..efa185f14e169ef21ae09d11e1e549bca541a5d2
--- /dev/null
+++ b/src/client/components/facet_results/FacetedSearchPerspective.js
@@ -0,0 +1,167 @@
+import React from 'react'
+import InfoHeader from '../main_layout/InfoHeader'
+import FacetBar from '../facet_bar/FacetBar'
+import FacetResults from './FacetResults'
+import Grid from '@mui/material/Grid'
+import { getSpacing } from '../../helpers/helpers'
+
+const FacetedSearchPerspective = props => {
+ const {
+ portalConfig, layoutConfig, perspective, perspectiveState, facetState,
+ facetStateConstrainSelf, screenSize, rootUrl, apexChartsConfig, networkConfig,
+ leafletConfig, routeProps
+ } = props
+ const { facetedSearchHeaderExpanded } = perspectiveState
+ return (
+ <>
+ <InfoHeader
+ portalConfig={portalConfig}
+ layoutConfig={layoutConfig}
+ resultClass={perspective.id}
+ pageType='facetResults'
+ expanded={facetedSearchHeaderExpanded}
+ updateExpanded={props.updatePerspectiveHeaderExpanded}
+ screenSize={screenSize}
+ />
+ <Grid
+ container spacing={1}
+ sx={theme => {
+ if (facetedSearchHeaderExpanded) {
+ return {
+ margin: theme.spacing(0.5),
+ width: `calc(100% - ${getSpacing(theme, 1)}px)`,
+ [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: {
+ height: `calc(100% - ${layoutConfig.topBar.reducedHeight +
+ layoutConfig.infoHeader.reducedHeight.height +
+ layoutConfig.infoHeader.reducedHeight.expandedContentHeight +
+ getSpacing(theme, 3.5)
+ }px)`
+ },
+ [theme.breakpoints.up(layoutConfig.reducedHeightBreakpoint)]: {
+ height: `calc(100% - ${layoutConfig.topBar.defaultHeight +
+ layoutConfig.infoHeader.default.height +
+ layoutConfig.infoHeader.default.expandedContentHeight +
+ getSpacing(theme, 3.5)
+ }px)`
+ }
+ }
+ } else {
+ return {
+ margin: theme.spacing(0.5),
+ width: `calc(100% - ${getSpacing(theme, 1)}px)`,
+ [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: {
+ height: `calc(100% - ${layoutConfig.topBar.reducedHeight +
+ layoutConfig.infoHeader.reducedHeight.height +
+ getSpacing(theme, 1.5)
+ }px)`
+ },
+ [theme.breakpoints.up(layoutConfig.reducedHeightBreakpoint)]: {
+ height: `calc(100% - ${layoutConfig.topBar.defaultHeight +
+ layoutConfig.infoHeader.default.height +
+ getSpacing(theme, 1.5)
+ }px)`
+ }
+ }
+ }
+ }}
+ >
+ <Grid
+ item xs={12} md={3}
+ sx={theme => ({
+ height: 'auto',
+ [theme.breakpoints.up('md')]: {
+ height: '100%'
+ },
+ [theme.breakpoints.down('sm')]: {
+ paddingRight: '0px !important'
+ },
+ overflow: 'auto',
+ paddingLeft: '0px !important',
+ paddingTop: '0px !important',
+ paddingBottom: '0px !important'
+ })}
+ >
+ <FacetBar
+ portalConfig={portalConfig}
+ perspectiveConfig={perspective}
+ layoutConfig={layoutConfig}
+ facetedSearchMode='serverFS'
+ facetState={facetState}
+ facetStateConstrainSelf={facetStateConstrainSelf}
+ perspectiveState={perspectiveState}
+ facetClass={perspective.id}
+ resultClass={perspective.id}
+ fetchingResultCount={perspectiveState.fetchingResultCount}
+ resultCount={perspectiveState.resultCount}
+ fetchFacet={props.fetchFacet}
+ fetchFacetConstrainSelf={props.fetchFacetConstrainSelf}
+ fetchResults={props.fetchResults}
+ clearFacet={props.clearFacet}
+ clearAllFacets={props.clearAllFacets}
+ fetchResultCount={props.fetchResultCount}
+ updateFacetOption={props.updateFacetOption}
+ showError={props.showError}
+ defaultActiveFacets={perspective.defaultActiveFacets}
+ rootUrl={rootUrl}
+ screenSize={screenSize}
+ apexChartsConfig={apexChartsConfig}
+ leafletConfig={leafletConfig}
+ networkConfig={networkConfig}
+ />
+ </Grid>
+ <Grid
+ item xs={12} md={9}
+ sx={theme => ({
+ height: 'auto',
+ [theme.breakpoints.up(props.layoutConfig.hundredPercentHeightBreakPoint)]: {
+ height: `calc(100% - ${getSpacing(theme, 0.5)}px)`
+ },
+ paddingTop: '0px !important',
+ paddingBottom: '0px !important',
+ paddingRight: '0px !important',
+ [theme.breakpoints.down('sm')]: {
+ paddingLeft: '0px !important',
+ marginBottom: theme.spacing(1),
+ marginTop: theme.spacing(0.5)
+ }
+ })}
+ >
+ <FacetResults
+ portalConfig={portalConfig}
+ layoutConfig={layoutConfig}
+ perspectiveConfig={perspective}
+ perspectiveState={perspectiveState}
+ facetState={facetState}
+ facetStateConstrainSelf={facetStateConstrainSelf}
+ leafletMapState={props.leafletMap}
+ fetchPaginatedResults={props.fetchPaginatedResults}
+ fetchResults={props.fetchResults}
+ fetchInstanceAnalysis={props.fetchInstanceAnalysis}
+ fetchFacetConstrainSelf={props.fetchFacetConstrainSelf}
+ fetchGeoJSONLayers={props.fetchGeoJSONLayers}
+ fetchGeoJSONLayersBackend={props.fetchGeoJSONLayersBackend}
+ clearGeoJSONLayers={props.clearGeoJSONLayers}
+ fetchByURI={props.fetchByURI}
+ updatePage={props.updatePage}
+ updateRowsPerPage={props.updateRowsPerPage}
+ updateFacetOption={props.updateFacetOption}
+ updateMapBounds={props.updateMapBounds}
+ sortResults={props.sortResults}
+ showError={props.showError}
+ routeProps={routeProps}
+ perspective={perspective}
+ animationValue={props.animationValue}
+ animateMap={props.animateMap}
+ screenSize={screenSize}
+ rootUrl={rootUrl}
+ apexChartsConfig={apexChartsConfig}
+ leafletConfig={leafletConfig}
+ networkConfig={networkConfig}
+ />
+ </Grid>
+ </Grid>
+ </>
+ )
+}
+
+export default FacetedSearchPerspective
diff --git a/src/client/components/facet_results/ResultTable.js b/src/client/components/facet_results/ResultTable.js
index 1d6ea20ac45198e91c5f56a4a5691516d2e3fe1a..00fef80cbfb5667658a05546f7de5e576f629d4c 100644
--- a/src/client/components/facet_results/ResultTable.js
+++ b/src/client/components/facet_results/ResultTable.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import clsx from 'clsx'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
@@ -16,7 +16,7 @@ import ResultTableHead from './ResultTableHead'
import TablePagination from '@mui/material/TablePagination'
import ResultTablePaginationActions from './ResultTablePaginationActions'
import history from '../../History'
-import { purple } from '@mui/material/colors';
+import { purple } from '@mui/material/colors'
const styles = theme => ({
tableContainer: props => ({
@@ -30,24 +30,24 @@ const styles = theme => ({
backgroundColor: theme.palette.background.paper,
borderTop: '1px solid rgba(224, 224, 224, 1);'
}),
- paginationRoot: {
- display: 'flex',
- backgroundColor: '#fff',
- borderTop: '1px solid rgba(224, 224, 224, 1);',
- alignItems: 'center'
- },
+ // paginationRoot: {
+ // display: 'flex',
+ // backgroundColor: '#fff',
+ // borderTop: '1px solid rgba(224, 224, 224, 1);',
+ // alignItems: 'center'
+ // },
paginationCaption: {
minWidth: 110
},
- paginationToolbar: props => ({
- '& p': { fontSize: '0.75rem' },
- minHeight: props.layoutConfig.paginationToolbarHeight,
- [theme.breakpoints.down(undefined)]: {
- display: 'flex',
- flexWrap: 'wrap',
- marginTop: theme.spacing(0.5)
- }
- }),
+ // paginationToolbar: props => ({
+ // '& p': { fontSize: '0.75rem' },
+ // minHeight: props.layoutConfig.paginationToolbarHeight,
+ // [theme.breakpoints.down(undefined)]: {
+ // display: 'flex',
+ // flexWrap: 'wrap',
+ // marginTop: theme.spacing(0.5)
+ // }
+ // }),
progressContainer: {
width: '100%',
height: 'calc(100% - 72px)',
@@ -266,13 +266,14 @@ class ResultTable extends React.Component {
onClick={this.handleExpandRow(row.id)}
aria-expanded={expanded}
aria-label='Show more'
- size="large">
+ size='large'
+ >
<ExpandMoreIcon />
</IconButton>}
</TableCell>
{dataCells}
</TableRow>
- );
+ )
}
render () {
@@ -282,11 +283,11 @@ class ResultTable extends React.Component {
<>
<TablePagination
component='div'
- classes={{
- root: classes.paginationRoot,
- caption: classes.paginationCaption,
- toolbar: classes.paginationToolbar
- }}
+ // classes={{
+ // root: classes.paginationRoot,
+ // caption: classes.paginationCaption,
+ // toolbar: classes.paginationToolbar
+ // }}
count={resultCount == null ? 0 : resultCount}
labelDisplayedRows={resultCount == null
? () => '-'
@@ -302,6 +303,24 @@ class ResultTable extends React.Component {
onPageChange={this.handlePageChange}
onRowsPerPageChange={this.handleRowsPerPageChange}
ActionsComponent={ResultTablePaginationActions}
+ sx={theme => ({
+ display: 'flex',
+ backgroundColor: '#fff',
+ borderTop: '1px solid rgba(224, 224, 224, 1);',
+ alignItems: 'center',
+ '& .MuiTablePagination-toolbar': {
+ '& p': { fontSize: '0.75rem' },
+ minHeight: this.props.layoutConfig.paginationToolbarHeight,
+ [theme.breakpoints.down('sm')]: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ marginTop: theme.spacing(0.5)
+ }
+ },
+ '& .MuiTablePagination-displayedRows': {
+ minWidth: 110
+ }
+ })}
/>
<div className={classes.tableContainer}>
{fetching
diff --git a/src/client/components/facet_results/ResultTableHead.js b/src/client/components/facet_results/ResultTableHead.js
index 4f3200fe968451be5369bf140ec46c80b1a4d0f9..2d9f2a939d98a9045cc4d8172e6d1181b4b64aab 100644
--- a/src/client/components/facet_results/ResultTableHead.js
+++ b/src/client/components/facet_results/ResultTableHead.js
@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import intl from 'react-intl-universal'
import classNames from 'classnames'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import TableCell from '@mui/material/TableCell'
@@ -50,7 +50,7 @@ const ResultTableHead = props => {
title={description}
enterDelay={300}
>
- <IconButton size="large">
+ <IconButton size='large'>
<InfoIcon />
</IconButton>
</Tooltip>
@@ -67,7 +67,7 @@ const ResultTableHead = props => {
>
<TableSortLabel
active={sortBy === column.id}
- direction={sortDirection}
+ direction={sortBy === column.id ? sortBy : 'asc'}
hideSortIcon
onClick={onSortBy(column.id)}
>
@@ -78,18 +78,18 @@ const ResultTableHead = props => {
title={description}
enterDelay={300}
>
- <IconButton size="large">
+ <IconButton size='large'>
<InfoIcon />
</IconButton>
</Tooltip>
</TableCell>
)}
</React.Fragment>
- );
+ )
})}
</TableRow>
</TableHead>
- );
+ )
}
ResultTableHead.propTypes = {
diff --git a/src/client/components/facet_results/ResultTablePaginationActions.js b/src/client/components/facet_results/ResultTablePaginationActions.js
index 64082c88827eef513a607a8ec333ca7d688eccf1..a49be416d8c9edafeffecc4c3ec614d7c8b072a2 100644
--- a/src/client/components/facet_results/ResultTablePaginationActions.js
+++ b/src/client/components/facet_results/ResultTablePaginationActions.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import withStyles from '@mui/styles/withStyles';
+import withStyles from '@mui/styles/withStyles'
import IconButton from '@mui/material/IconButton'
import FirstPageIcon from '@mui/icons-material/FirstPage'
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
@@ -34,32 +34,36 @@ const ResultTablePaginationActions = props => {
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label='First Page'
- size="large">
+ size='large'
+ >
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label='Previous Page'
- size="large">
+ size='large'
+ >
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label='Next Page'
- size="large">
+ size='large'
+ >
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label='Last Page'
- size="large">
+ size='large'
+ >
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</div>
- );
+ )
}
ResultTablePaginationActions.propTypes = {
diff --git a/src/client/components/main_layout/InfoHeader.js b/src/client/components/main_layout/InfoHeader.js
index 99fac18ff91fed0c9c080b1d0779416e4442de50..0a223f464b8a5ea7207372bc15c42dee72846140 100644
--- a/src/client/components/main_layout/InfoHeader.js
+++ b/src/client/components/main_layout/InfoHeader.js
@@ -1,11 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
import makeStyles from '@mui/styles/makeStyles'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
import Accordion from '@mui/material/Accordion'
import AccordionSummary from '@mui/material/AccordionSummary'
import AccordionDetails from '@mui/material/AccordionDetails'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
// import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton'
import InfoIcon from '@mui/icons-material/InfoOutlined'
@@ -13,26 +16,6 @@ import Tooltip from '@mui/material/Tooltip'
import intl from 'react-intl-universal'
const useStyles = makeStyles(theme => ({
- root: {
- marginTop: theme.spacing(0.5),
- marginLeft: theme.spacing(0.5),
- marginRight: theme.spacing(0.5)
- },
- panel: {
- width: '100%'
- },
- summary: props => ({
- paddingLeft: theme.spacing(1),
- minHeight: `${props.layoutConfig.infoHeader.reducedHeight.height}px !important`,
- [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
- minHeight: `${props.layoutConfig.infoHeader.default.height}px !important`
- }
- }),
- summaryContent: {
- display: 'block',
- marginTop: theme.spacing(0.5),
- marginBottom: `${theme.spacing(0.5)} !important`
- },
headingContainer: {
display: 'flex'
},
@@ -43,14 +26,6 @@ const useStyles = makeStyles(theme => ({
padding: 0,
marginLeft: theme.spacing(0.5)
},
- infoIcon: props => ({
- [theme.breakpoints.down(props.layoutConfig.reducedHeightBreakpoint)]: {
- fontSize: props.layoutConfig.infoHeader.reducedHeight.infoIconFontSize
- },
- [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
- fontSize: props.layoutConfig.infoHeader.default.infoIconFontSize
- }
- }),
label: {
marginTop: theme.spacing(1),
height: 32,
@@ -80,7 +55,7 @@ const useStyles = makeStyles(theme => ({
* A component for instructions for a faceted search perspective or an entity landing page.
*/
const InfoHeader = props => {
- const handleExpandButtonOnClick = () => {
+ const handleAccordionChange = () => () => {
props.updateExpanded({
resultClass: props.resultClass,
pageType: props.pageType
@@ -101,43 +76,69 @@ const InfoHeader = props => {
}
const getHeadingVariant = () => {
- const { screenSize } = props
- let variant = props.layoutConfig.infoHeader.default.headingVariant
- if (screenSize === 'xs' || screenSize === 'sm' || screenSize === 'md' || screenSize === 'lg') {
- variant = props.layoutConfig.infoHeader.reducedHeight.headingVariant
- }
+ const { layoutConfig } = props
+ const { infoHeader } = layoutConfig
+ const theme = useTheme()
+ const defaultHeight = useMediaQuery(theme.breakpoints.up(layoutConfig.reducedHeightBreakpoint))
+ const variant = defaultHeight
+ ? infoHeader.default.headingVariant
+ : infoHeader.reducedHeight.headingVariant
return variant
}
const classes = useStyles(props)
return (
- <div className={classes.root}>
- <Accordion
- className={classes.panel}
- expanded={props.expanded}
- >
+ <Box
+ sx={theme => ({
+ marginTop: theme.spacing(0.5),
+ marginLeft: theme.spacing(0.5),
+ marginRight: theme.spacing(0.5)
+
+ })}
+ >
+ <Accordion expanded={props.expanded} onChange={handleAccordionChange()}>
<AccordionSummary
- className={classes.summary}
- classes={{
- content: classes.summaryContent
- }}
expandIcon={<ExpandMoreIcon />}
aria-controls='infoheader-content'
id='infoheader-header'
- // IconButtonProps={{ onClick: handleExpandButtonOnClick }}
+ sx={theme => ({
+ paddingLeft: theme.spacing(1),
+ minHeight: props.layoutConfig.infoHeader.reducedHeight.height,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ minHeight: props.layoutConfig.infoHeader.default.height
+ },
+ '& .MuiAccordionSummary-content': {
+ marginTop: theme.spacing(0.5),
+ marginBottom: theme.spacing(0.5)
+ }
+ })}
>
<div className={classes.headingContainer}>
- <Typography component='h1' variant={getHeadingVariant()} className={classes.heading}>
- {props.pageType === 'facetResults' && intl.get(`perspectives.${props.resultClass}.label`)}
- {props.pageType === 'instancePage' && intl.get(`perspectives.${props.resultClass}.instancePage.label`)}
+ <Typography
+ component='h1'
+ variant={getHeadingVariant()}
+ >
+ {props.pageType === 'facetResults' &&
+ intl.get(`perspectives.${props.resultClass}.label`)}
+ {props.pageType === 'instancePage' &&
+ intl.get(`perspectives.${props.resultClass}.instancePage.label`)}
</Typography>
<Tooltip title={intl.get('infoHeader.toggleInstructions')}>
<IconButton
aria-label='toggle instructions'
className={classes.infoIconButton}
- onClick={handleExpandButtonOnClick}
size='large'
+ sx={theme => ({
+ padding: 0,
+ marginLeft: '4px !important',
+ '& .MuiSvgIcon-root': {
+ fontSize: props.layoutConfig.infoHeader.reducedHeight.infoIconFontSize,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ fontSize: props.layoutConfig.infoHeader.default.infoIconFontSize
+ }
+ }
+ })}
>
<InfoIcon className={classes.infoIcon} />
</IconButton>
@@ -157,7 +158,7 @@ const InfoHeader = props => {
</>}
</AccordionDetails>
</Accordion>
- </div>
+ </Box>
)
}
diff --git a/src/client/components/main_layout/PerspectiveTabs.js b/src/client/components/main_layout/PerspectiveTabs.js
index 96b32667f356cb454ec046e47dc76775b40f09c0..869078fc8ecc21d0787a29ede04f36b3ee8d9b9a 100644
--- a/src/client/components/main_layout/PerspectiveTabs.js
+++ b/src/client/components/main_layout/PerspectiveTabs.js
@@ -1,36 +1,20 @@
import React from 'react'
import PropTypes from 'prop-types'
-import withStyles from '@mui/styles/withStyles';
-import Grow from '@mui/material/Grow'
import Tabs from '@mui/material/Tabs'
import Tab from '@mui/material/Tab'
import { Link } from 'react-router-dom'
import Paper from '@mui/material/Paper'
import intl from 'react-intl-universal'
-const styles = theme => ({
- root: {
- flexGrow: 1,
- borderBottomLeftRadius: 0,
- borderBottomRightRadius: 0
- },
- tabRoot: {
- paddingTop: theme.spacing(0.5),
- paddingBottom: theme.spacing(0.5)
- },
- tabLabelIcon: props => ({
- minHeight: props.layoutConfig.tabHeight
- })
-})
-
/**
* A component for generating view tabs for a faceted search perspective or an entity landing page.
*/
class PerspectiveTabs extends React.Component {
constructor (props) {
super(props)
- const value = this.pathnameToValue(this.props.routeProps.location.pathname)
- this.state = { value }
+ this.state = {
+ value: this.pathnameToValue(this.props.routeProps.location.pathname)
+ }
}
componentDidUpdate = prevProps => {
@@ -40,11 +24,11 @@ class PerspectiveTabs extends React.Component {
this.setState({ value: this.pathnameToValue(newPath) })
}
- // Fix tabs indicator not showing on first load
+ // Fix tabs indicator not showing on first load, not needed any more?
// https://stackoverflow.com/a/61205108
- const evt = document.createEvent('UIEvents')
- evt.initUIEvent('resize', true, false, window, 0)
- window.dispatchEvent(evt)
+ // const evt = document.createEvent('UIEvents')
+ // evt.initUIEvent('resize', true, false, window, 0)
+ // window.dispatchEvent(evt)
}
pathnameToValue = pathname => {
@@ -63,47 +47,52 @@ class PerspectiveTabs extends React.Component {
};
render () {
- const { classes, tabs } = this.props
+ const { tabs } = this.props
+ const { value } = this.state
// const largeScreen = screenSize === 'xl'
const variant = tabs.length > 3 ? 'scrollable' : 'fullWidth'
- const scrollButtons = tabs.length > 3 ? 'auto' : 'on'
+ // const scrollButtons = tabs.length > 3 ? 'auto' : 'on'
return (
- <Paper className={classes.root}>
- <Grow in>
- <Tabs
- value={this.state.value}
- onChange={this.handleChange}
- indicatorColor='secondary'
- textColor='secondary'
- variant={variant}
- scrollButtons={scrollButtons}
- >
- {tabs.map(tab =>
- <Tab
- classes={{
- root: classes.tabRoot,
- labelIcon: classes.tabLabelIcon,
- wrapper: classes.tabWrapper
- }}
- key={tab.id}
- icon={tab.icon}
- label={intl.get(`tabs.${tab.id}`)}
- component={Link}
- to={tab.id}
- wrapped
- />
- )}
- </Tabs>
-
- </Grow>
-
+ <Paper
+ sx={theme => ({
+ flexGrow: 1,
+ borderBottomLeftRadius: 0,
+ borderBottomRightRadius: 0
+ })}
+ >
+ <Tabs
+ value={value}
+ onChange={this.handleChange}
+ indicatorColor='secondary'
+ textColor='secondary'
+ variant={variant}
+ >
+ {tabs.map(tab =>
+ <Tab
+ sx={theme => ({
+ paddingTop: theme.spacing(0.5),
+ paddingBottom: theme.spacing(0.5),
+ minHeight: this.props.layoutConfig.tabHeight,
+ '& .MuiSvgIcon-root': {
+ marginBottom: theme.spacing(0.5)
+ }
+ })}
+ key={tab.value}
+ value={tab.value}
+ icon={tab.icon}
+ label={intl.get(`tabs.${tab.id}`)}
+ component={Link}
+ to={tab.id}
+ wrapped
+ />
+ )}
+ </Tabs>
</Paper>
)
}
}
PerspectiveTabs.propTypes = {
- classes: PropTypes.object.isRequired,
routeProps: PropTypes.object.isRequired,
tabs: PropTypes.array.isRequired,
screenSize: PropTypes.string.isRequired,
@@ -112,4 +101,4 @@ PerspectiveTabs.propTypes = {
export const PerspectiveTabsComponent = PerspectiveTabs
-export default withStyles(styles)(PerspectiveTabs)
+export default PerspectiveTabs
diff --git a/src/client/components/perspectives/sampo/Footer.js b/src/client/components/perspectives/sampo/Footer.js
index c400c34f1ba11f8f92c3d42aec65856fc272624f..ff2f4889bf8907d2c5b57d86e37379ce369e6830 100644
--- a/src/client/components/perspectives/sampo/Footer.js
+++ b/src/client/components/perspectives/sampo/Footer.js
@@ -1,110 +1,108 @@
import React from 'react'
import Paper from '@mui/material/Paper'
import PropTypes from 'prop-types'
-import Grid from '@mui/material/Grid'
-import makeStyles from '@mui/styles/makeStyles'
-import { getSpacing } from '../../../helpers/helpers'
+import Box from '@mui/material/Box'
import aaltoLogo from '../../../img/logos/Aalto_SCI_EN_13_BLACK_2_cropped.png'
import hyLogo from '../../../img/logos/university-of-helsinki-logo-transparent-black.png'
import heldigLogo from '../../../img/logos/heldig-logo-transparent-black.png'
-const useStyles = makeStyles(theme => ({
- gridContainer: {
- height: '100%',
- marginTop: 0,
- marginBottom: 0
- },
- gridItem: props => ({
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- paddingTop: '6px !important',
- paddingBottom: '6px !important',
- [theme.breakpoints.between('sm', props.layoutConfig.reducedHeightBreakpoint)]: {
- paddingTop: '0px !important',
- paddingBottom: '0px !important'
- },
- [theme.breakpoints.down('md')]: {
- paddingTop: '12px !important',
- paddingBottom: '12px !important'
- }
- }),
- link: {
- display: 'flex',
- alignItems: 'center'
- },
- aaltoLogo: props => ({
- width: 143,
- height: 29,
- [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
- width: 167,
- height: 34
- }
- }),
- hyLogo: props => ({
- width: 157,
- height: 42,
- [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
- width: 168,
- height: 45
- }
- }),
- heldigLogo: props => ({
- width: 118,
- height: 30,
- [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
- width: 130,
- height: 33
- }
- })
-}))
-
/**
* A component for creating a footer. The logos are imported inside this component.
*/
const Footer = props => {
- const classes = useStyles(props)
return (
<Paper
sx={theme => ({
boxShadow: '0 -20px 20px -20px #333',
borderRadius: 0,
- height: {
+ display: 'flex',
+ justifyContent: 'space-evenly',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ rowGap: theme.spacing(2),
+ columnGap: theme.spacing(3),
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
+ [theme.breakpoints.down(496)]: {
+ paddingTop: theme.spacing(2),
+ paddingBottom: theme.spacing(2)
+ },
+ minHeight: {
+ xs: props.layoutConfig.footer.reducedHeight,
hundredPercentHeight: props.layoutConfig.footer.reducedHeight,
reducedHeight: props.layoutConfig.footer.defaultHeight
}
})}
>
- <Grid
- className={classes.gridContainer}
- container spacing={3}
+ <Box
+ component='a'
+ href='https://www.aalto.fi/en/school-of-science'
+ target='_blank'
+ rel='noopener noreferrer'
+ sx={theme => ({
+ width: 143,
+ height: 29,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ width: 167,
+ height: 34
+ }
+ })}
+ >
+ <Box
+ component='img'
+ src={aaltoLogo}
+ alt='Aalto University logo'
+ sx={{
+ height: '100%'
+ }}
+ />
+ </Box>
+ <Box
+ component='a'
+ href='https://www.helsinki.fi/en'
+ target='_blank'
+ rel='noopener noreferrer'
+ sx={theme => ({
+ width: 155,
+ height: 40,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ width: 168,
+ height: 45
+ }
+ })}
+ >
+ <Box
+ component='img'
+ src={hyLogo}
+ alt='University of Helsinki logo'
+ sx={{
+ height: '100%'
+ }}
+ />
+ </Box>
+ <Box
+ component='a'
+ href='https://www.helsinki.fi/en/helsinki-centre-for-digital-humanities'
+ target='_blank'
+ rel='noopener noreferrer'
sx={theme => ({
- height: '100%',
- marginTop: 0,
- marginBottom: 0,
- [theme.breakpoints.up(1500 + getSpacing(theme, 6))]: {
- width: 1500,
- marginLeft: 'auto',
- marginRight: 'auto'
+ width: 118,
+ height: 30,
+ [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ width: 130,
+ height: 33
}
})}
>
- <Grid item xs className={classes.gridItem}>
- <a className={classes.link} href='https://www.aalto.fi/en/school-of-science' target='_blank' rel='noopener noreferrer'>
- <img className={classes.aaltoLogo} src={aaltoLogo} alt='Aalto University logo' />
- </a>
- </Grid>
- <Grid item xs className={classes.gridItem}>
- <a className={classes.link} href='https://www.helsinki.fi/en' target='_blank' rel='noopener noreferrer'>
- <img className={classes.hyLogo} src={hyLogo} alt='University of Helsinki logo' />
- </a>
- </Grid>
- <Grid item xs className={classes.gridItem}>
- <a className={classes.link} href='https://www.helsinki.fi/en/helsinki-centre-for-digital-humanities' target='_blank' rel='noopener noreferrer'>
- <img className={classes.heldigLogo} src={heldigLogo} alt='Helsinki Centre for Digital Humanities logo' />
- </a>
- </Grid>
- </Grid>
+ <Box
+ component='img'
+ src={heldigLogo}
+ alt='Helsinki Centre for Digital Humanities logo'
+ sx={{
+ height: '100%'
+ }}
+ />
+ </Box>
</Paper>
)
}
diff --git a/src/client/components/perspectives/sampo/MainCard.js b/src/client/components/perspectives/sampo/MainCard.js
index e0efd4847b6584775f01bcefdae4df70ba2d4d30..6278ea345cc50d19366f7df10cf6ab239827a50f 100644
--- a/src/client/components/perspectives/sampo/MainCard.js
+++ b/src/client/components/perspectives/sampo/MainCard.js
@@ -8,7 +8,7 @@ import Card from '@mui/material/Card'
import CardActionArea from '@mui/material/CardActionArea'
import CardContent from '@mui/material/CardContent'
import CardMedia from '@mui/material/CardMedia'
-import makeStyles from '@mui/styles/makeStyles';
+import makeStyles from '@mui/styles/makeStyles'
import useMediaQuery from '@mui/material/useMediaQuery'
import { Link } from 'react-router-dom'
import { has } from 'lodash'
@@ -84,10 +84,18 @@ const MainCard = props => {
>
{!card &&
<Paper className={classes.perspectiveCardPaper}>
- <Typography gutterBottom variant={cardHeadingVariant} component='h2'>
+ <Typography
+ gutterBottom
+ variant={cardHeadingVariant}
+ component='h2'
+ sx={{ color: '#fff' }}
+ >
{intl.get(`perspectives.${perspective.id}.label`)}
</Typography>
- <Typography component='p'>
+ <Typography
+ component='p'
+ sx={{ color: '#fff' }}
+ >
{intl.get(`perspectives.${perspective.id}.shortDescription`)}
</Typography>
</Paper>}
diff --git a/src/client/containers/SemanticPortal.js b/src/client/containers/SemanticPortal.js
index 166c4a22620efb0cc53199beb65ef972acaa2728..0aedb20dc516e379153a74541f272631a5261d74 100644
--- a/src/client/containers/SemanticPortal.js
+++ b/src/client/containers/SemanticPortal.js
@@ -55,6 +55,7 @@ import * as networkConfig from '../library_configs/Cytoscape.js/NetworkConfig'
// ** Generate portal configuration based on JSON configs **
import portalConfig from '../../configs/portalConfig.json'
+import FacetedSearchPerspective from '../components/facet_results/FacetedSearchPerspective'
await processPortalConfig(portalConfig)
const {
portalID,
@@ -82,7 +83,6 @@ const Message = lazy(() => import('../components/main_layout/Message'))
const InstancePage = lazy(() => import('../components/main_layout/InstancePage'))
const FullTextSearch = lazy(() => import('../components/main_layout/FullTextSearch'))
const FacetBar = lazy(() => import('../components/facet_bar/FacetBar'))
-const FacetResults = lazy(() => import('../components/facet_results/FacetResults'))
const FederatedResults = lazy(() => import('../components/facet_results/FederatedResults'))
const KnowledgeGraphMetadataTable = lazy(() => import('../components/main_layout/KnowledgeGraphMetadataTable'))
// ** General components end **
@@ -113,48 +113,6 @@ const useStyles = makeStyles(theme => ({
height: `calc(100% - ${layoutConfig.topBar.defaultHeight + layoutConfig.footer.defaultHeight + theme.spacing(1)}px)`
}
},
- perspectiveContainer: {
- margin: theme.spacing(0.5),
- width: `calc(100% - ${theme.spacing(1)}px)`,
- [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: {
- height: `calc(100% - ${layoutConfig.topBar.reducedHeight + layoutConfig.infoHeader.reducedHeight.height + theme.spacing(1.5)}px)`
- },
- [theme.breakpoints.up(layoutConfig.reducedHeightBreakpoint)]: {
- height: `calc(100% - ${layoutConfig.topBar.defaultHeight + layoutConfig.infoHeader.default.height + theme.spacing(1.5)}px)`
- }
- },
- perspectiveContainerHeaderExpanded: {
- margin: theme.spacing(0.5),
- width: `calc(100% - ${theme.spacing(1)}px)`,
- [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: {
- height: `calc(100% - ${layoutConfig.topBar.reducedHeight +
- layoutConfig.infoHeader.reducedHeight.height +
- layoutConfig.infoHeader.reducedHeight.expandedContentHeight +
- theme.spacing(3.5)
- }px)`
- },
- [theme.breakpoints.up(layoutConfig.reducedHeightBreakpoint)]: {
- height: `calc(100% - ${layoutConfig.topBar.defaultHeight +
- layoutConfig.infoHeader.default.height +
- layoutConfig.infoHeader.default.expandedContentHeight +
- theme.spacing(3.5)
- }px)`
- }
- },
- // perspective container is divided into two columns:
- facetBarContainer: {
- height: 'auto',
- [theme.breakpoints.up('md')]: {
- height: '100%'
- },
- [theme.breakpoints.down('sm')]: {
- paddingRight: '0px !important'
- },
- overflow: 'auto',
- paddingLeft: '0px !important',
- paddingTop: '0px !important',
- paddingBottom: '0px !important'
- },
facetBarContainerClientFS: {
overflow: 'auto',
paddingLeft: theme.spacing(0.5),
@@ -163,20 +121,6 @@ const useStyles = makeStyles(theme => ({
height: '100%'
}
},
- resultsContainer: {
- height: 'auto',
- [theme.breakpoints.up('md')]: {
- height: '100%'
- },
- paddingTop: '0px !important',
- paddingBottom: '0px !important',
- paddingRight: '0px !important',
- [theme.breakpoints.down('sm')]: {
- paddingLeft: '0px !important',
- marginBottom: theme.spacing(1),
- marginTop: theme.spacing(0.5)
- }
- },
resultsContainerClientFS: {
minHeight: 500,
paddingBottom: '0px !important',
@@ -320,90 +264,50 @@ const SemanticPortal = props => {
<React.Fragment key={perspective.id}>
<Route
path={`${rootUrlWithLang}/${perspective.id}/faceted-search`}
- render={routeProps => {
- return (
- <>
- <InfoHeader
- portalConfig={portalConfig}
- layoutConfig={layoutConfig}
- resultClass={perspective.id}
- pageType='facetResults'
- expanded={props[perspective.id].facetedSearchHeaderExpanded}
- updateExpanded={props.updatePerspectiveHeaderExpanded}
- screenSize={screenSize}
- />
- <Grid
- container spacing={1} className={props[perspective.id].facetedSearchHeaderExpanded
- ? classes.perspectiveContainerHeaderExpanded
- : classes.perspectiveContainer}
- >
- <Grid item xs={12} md={3} className={classes.facetBarContainer}>
- <FacetBar
- portalConfig={portalConfig}
- perspectiveConfig={perspective}
- layoutConfig={layoutConfig}
- facetedSearchMode='serverFS'
- facetData={props[`${perspective.id}Facets`]}
- facetDataConstrainSelf={props[`${perspective.id}FacetsConstrainSelf`]}
- perspectiveState={props[perspective.id]}
- facetClass={perspective.id}
- resultClass={perspective.id}
- fetchingResultCount={props[perspective.id].fetchingResultCount}
- resultCount={props[perspective.id].resultCount}
- fetchFacet={props.fetchFacet}
- fetchFacetConstrainSelf={props.fetchFacetConstrainSelf}
- fetchResults={props.fetchResults}
- clearFacet={props.clearFacet}
- clearAllFacets={props.clearAllFacets}
- fetchResultCount={props.fetchResultCount}
- updateFacetOption={props.updateFacetOption}
- showError={props.showError}
- defaultActiveFacets={perspective.defaultActiveFacets}
- rootUrl={rootUrlWithLang}
- screenSize={screenSize}
- apexChartsConfig={apexChartsConfig}
- leafletConfig={leafletConfig}
- networkConfig={networkConfig}
- />
- </Grid>
- <Grid item xs={12} md={9} className={classes.resultsContainer}>
- <FacetResults
- portalConfig={portalConfig}
- layoutConfig={layoutConfig}
- perspectiveConfig={perspective}
- perspectiveState={props[`${perspective.id}`]}
- facetState={props[`${perspective.id}Facets`]}
- facetConstrainSelfState={props[`${perspective.id}FacetsConstrainSelf`]}
- leafletMapState={props.leafletMap}
- fetchPaginatedResults={props.fetchPaginatedResults}
- fetchResults={props.fetchResults}
- fetchInstanceAnalysis={props.fetchInstanceAnalysis}
- fetchFacetConstrainSelf={props.fetchFacetConstrainSelf}
- fetchGeoJSONLayers={props.fetchGeoJSONLayers}
- fetchGeoJSONLayersBackend={props.fetchGeoJSONLayersBackend}
- clearGeoJSONLayers={props.clearGeoJSONLayers}
- fetchByURI={props.fetchByURI}
- updatePage={props.updatePage}
- updateRowsPerPage={props.updateRowsPerPage}
- updateFacetOption={props.updateFacetOption}
- updateMapBounds={props.updateMapBounds}
- sortResults={props.sortResults}
- showError={props.showError}
- routeProps={routeProps}
- perspective={perspective}
- animationValue={props.animationValue}
- animateMap={props.animateMap}
- screenSize={screenSize}
- rootUrl={rootUrlWithLang}
- apexChartsConfig={apexChartsConfig}
- leafletConfig={leafletConfig}
- networkConfig={networkConfig}
- />
- </Grid>
- </Grid>
- </>
- )
- }}
+ render={routeProps =>
+ <FacetedSearchPerspective
+ portalConfig={portalConfig}
+ perspectiveConfig={perspective}
+ layoutConfig={layoutConfig}
+ facetedSearchMode='serverFS'
+ facetState={props[`${perspective.id}Facets`]}
+ facetStateConstrainSelf={props[`${perspective.id}FacetsConstrainSelf`]}
+ perspectiveState={props[perspective.id]}
+ facetClass={perspective.id}
+ resultClass={perspective.id}
+ fetchingResultCount={props[perspective.id].fetchingResultCount}
+ resultCount={props[perspective.id].resultCount}
+ fetchFacet={props.fetchFacet}
+ fetchFacetConstrainSelf={props.fetchFacetConstrainSelf}
+ fetchResults={props.fetchResults}
+ clearFacet={props.clearFacet}
+ clearAllFacets={props.clearAllFacets}
+ fetchResultCount={props.fetchResultCount}
+ updateFacetOption={props.updateFacetOption}
+ showError={props.showError}
+ defaultActiveFacets={perspective.defaultActiveFacets}
+ rootUrl={rootUrlWithLang}
+ screenSize={screenSize}
+ apexChartsConfig={apexChartsConfig}
+ leafletConfig={leafletConfig}
+ networkConfig={networkConfig}
+ leafletMapState={props.leafletMap}
+ fetchPaginatedResults={props.fetchPaginatedResults}
+ fetchInstanceAnalysis={props.fetchInstanceAnalysis}
+ fetchGeoJSONLayers={props.fetchGeoJSONLayers}
+ fetchGeoJSONLayersBackend={props.fetchGeoJSONLayersBackend}
+ clearGeoJSONLayers={props.clearGeoJSONLayers}
+ fetchByURI={props.fetchByURI}
+ updatePage={props.updatePage}
+ updateRowsPerPage={props.updateRowsPerPage}
+ updateMapBounds={props.updateMapBounds}
+ updatePerspectiveHeaderExpanded={props.updatePerspectiveHeaderExpanded}
+ sortResults={props.sortResults}
+ routeProps={routeProps}
+ perspective={perspective}
+ animationValue={props.animationValue}
+ animateMap={props.animateMap}
+ />}
/>
<Switch>
<Redirect
diff --git a/src/client/reducers/index.js b/src/client/reducers/index.js
index f947e9e46e21fa731046bae1e76e606536c7e472..37f545f570880481cf66f17edac44b4911dfd269 100644
--- a/src/client/reducers/index.js
+++ b/src/client/reducers/index.js
@@ -78,7 +78,10 @@ for (const perspective of perspectiveConfig) {
maps,
properties
}
- Object.keys(facets).forEach(key => { facets[key].isFetching = false })
+ Object.keys(facets).forEach(key => {
+ facets[key].isFetching = false
+ facets[key].values = null
+ })
const facetsInitialStateFull = {
...facetsInitialState,
facets
diff --git a/src/configs/portalConfig.json b/src/configs/portalConfig.json
index bbc7c36fdc536d05eca6a8da357d2900105d80ca..6618e1812715cee957a6aa32d3be84c9ac2c4bc9 100644
--- a/src/configs/portalConfig.json
+++ b/src/configs/portalConfig.json
@@ -56,8 +56,8 @@
"main": "#EB1806"
}
},
- "hundredPercentHeightBreakPoint": "md",
- "reducedHeightBreakpoint": "xl",
+ "hundredPercentHeightBreakPoint": 900,
+ "reducedHeightBreakpoint": 1920,
"tabHeight": 58,
"paginationToolbarHeight": 37,
"tableFontSize": "0.8rem",