From b0c3e4de6a179e1dfd83b655f168bffdf3bc64ab Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Mon, 3 Dec 2018 08:26:18 +0200
Subject: [PATCH] Sketching author facet
---
src/client/components/EnhancedTable.js | 60 ++++++------------------
src/client/components/FacetDialog.js | 31 +++++++++---
src/client/components/ResultTable.js | 5 +-
src/client/components/ResultTableHead.js | 3 +-
src/client/containers/MapApp.js | 1 +
src/server/sparql/Datasets.js | 9 ++--
src/server/sparql/Manuscripts.js | 12 ++---
7 files changed, 56 insertions(+), 65 deletions(-)
diff --git a/src/client/components/EnhancedTable.js b/src/client/components/EnhancedTable.js
index b5e6830e..b758e4b9 100644
--- a/src/client/components/EnhancedTable.js
+++ b/src/client/components/EnhancedTable.js
@@ -16,15 +16,8 @@ import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import DeleteIcon from '@material-ui/icons/Delete';
-import FilterListIcon from '@material-ui/icons/FilterList';
import { lighten } from '@material-ui/core/styles/colorManipulator';
-let counter = 0;
-function createData(name, calories, fat, carbs, protein) {
- counter += 1;
- return { id: counter, name, calories, fat, carbs, protein };
-}
-
function desc(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
@@ -50,11 +43,8 @@ function getSorting(order, orderBy) {
}
const rows = [
- { id: 'name', numeric: false, disablePadding: true, label: 'Dessert (100g serving)' },
- { id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },
- { id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' },
- { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' },
- { id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' },
+ { id: 'title', numeric: false, disablePadding: true, label: 'Name' },
+ { id: 'count', numeric: true, disablePadding: false, label: 'Count' },
];
class EnhancedTableHead extends React.Component {
@@ -142,6 +132,10 @@ const toolbarStyles = theme => ({
let EnhancedTableToolbar = props => {
const { numSelected, classes } = props;
+ // Typography variant="h6" id="tableTitle">
+ // Nutrition
+ // </Typography>
+
return (
<Toolbar
className={classNames(classes.root, {
@@ -153,11 +147,8 @@ let EnhancedTableToolbar = props => {
<Typography color="inherit" variant="subtitle1">
{numSelected} selected
</Typography>
- ) : (
- <Typography variant="h6" id="tableTitle">
- Nutrition
- </Typography>
- )}
+ ) : ''
+ }
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
@@ -167,13 +158,7 @@ let EnhancedTableToolbar = props => {
<DeleteIcon />
</IconButton>
</Tooltip>
- ) : (
- <Tooltip title="Filter list">
- <IconButton aria-label="Filter list">
- <FilterListIcon />
- </IconButton>
- </Tooltip>
- )}
+ ) : ''}
</div>
</Toolbar>
);
@@ -204,23 +189,9 @@ class EnhancedTable extends React.Component {
order: 'asc',
orderBy: 'calories',
selected: [],
- data: [
- createData('Cupcake', 305, 3.7, 67, 4.3),
- createData('Donut', 452, 25.0, 51, 4.9),
- createData('Eclair', 262, 16.0, 24, 6.0),
- createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
- createData('Gingerbread', 356, 16.0, 49, 3.9),
- createData('Honeycomb', 408, 3.2, 87, 6.5),
- createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
- createData('Jelly Bean', 375, 0.0, 94, 0.0),
- createData('KitKat', 518, 26.0, 65, 7.0),
- createData('Lollipop', 392, 0.2, 98, 0.0),
- createData('Marshmallow', 318, 0, 81, 2.0),
- createData('Nougat', 360, 19.0, 9, 37.0),
- createData('Oreo', 437, 18.0, 63, 4.0),
- ],
+ data: this.props.data,
page: 0,
- rowsPerPage: 5,
+ rowsPerPage: 10,
};
handleRequestSort = (event, property) => {
@@ -277,6 +248,7 @@ class EnhancedTable extends React.Component {
const { classes } = this.props;
const { data, order, orderBy, selected, rowsPerPage, page } = this.state;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
+ console.log(data)
return (
<Paper className={classes.root}>
@@ -310,12 +282,9 @@ class EnhancedTable extends React.Component {
<Checkbox checked={isSelected} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
- {n.name}
+ {n.title}
</TableCell>
- <TableCell numeric>{n.calories}</TableCell>
- <TableCell numeric>{n.fat}</TableCell>
- <TableCell numeric>{n.carbs}</TableCell>
- <TableCell numeric>{n.protein}</TableCell>
+ <TableCell numeric>{n.cnt}</TableCell>
</TableRow>
);
})}
@@ -349,6 +318,7 @@ class EnhancedTable extends React.Component {
EnhancedTable.propTypes = {
classes: PropTypes.object.isRequired,
+ data: PropTypes.array
};
export default withStyles(styles)(EnhancedTable);
diff --git a/src/client/components/FacetDialog.js b/src/client/components/FacetDialog.js
index ec3aa002..6a03dcf8 100644
--- a/src/client/components/FacetDialog.js
+++ b/src/client/components/FacetDialog.js
@@ -5,6 +5,7 @@ import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import { withStyles } from '@material-ui/core/styles';
import Tree from './Tree';
+import EnhancedTable from './EnhancedTable';
import CircularProgress from '@material-ui/core/CircularProgress';
import purple from '@material-ui/core/colors/purple';
import Typography from '@material-ui/core/Typography';
@@ -14,6 +15,7 @@ const styles = () => ({
minHeight: '80vh',
maxHeight: '80vh',
minWidth: '60vh',
+ maxWidth: '100vh',
},
});
@@ -26,10 +28,29 @@ class FacetDialog extends React.Component {
handleClose = () => this.props.closeFacetDialog();
+ facetRenderer = facetValues => {
+ const { activeFacet, facetOptions } = this.props.facet;
+ const hierarchical = facetOptions[activeFacet] == null ? null : facetOptions[activeFacet].hierarchical;
+ if (activeFacet != '' && hierarchical) {
+ return (
+ <Tree
+ data={facetValues}
+ fetchFacet={this.props.fetchFacet}
+ updateFilter={this.props.updateFilter}
+ />
+ );
+ } else if (activeFacet != '') {
+ return <EnhancedTable data={facetValues} />;
+ } else {
+ return '';
+ }
+ }
+
render() {
const { classes, facet } = this.props;
const label = facet.facetOptions[facet.activeFacet] == null ? '' : facet.facetOptions[facet.activeFacet].label;
const facetValues = facet.facetValues[facet.activeFacet] == null ? [] : facet.facetValues[facet.activeFacet];
+
return (
<Dialog
classes={{ paper: classes.dialogPaper }}
@@ -44,13 +65,9 @@ class FacetDialog extends React.Component {
</DialogTitle>
<DialogContent>
{this.props.facet.fetchingFacet || facetValues.length == 0 ?
- <CircularProgress style={{ color: purple[500] }} thickness={5} />
- :
- <Tree
- data={facetValues}
- fetchFacet={this.props.fetchFacet}
- updateFilter={this.props.updateFilter}
- />}
+ <CircularProgress style={{ color: purple[500] }} thickness={5} /> :
+ this.facetRenderer(facetValues)
+ }
</DialogContent>
</Dialog>
);
diff --git a/src/client/components/ResultTable.js b/src/client/components/ResultTable.js
index bdb3eee6..f5ca7fc6 100644
--- a/src/client/components/ResultTable.js
+++ b/src/client/components/ResultTable.js
@@ -223,7 +223,7 @@ class ResultTable extends React.Component {
<span>{Array.isArray(item.order) ? item.order.toString() : item.order}. </span>
<a
target='_blank' rel='noopener noreferrer'
- href={item.sdbmLink}
+ href={item.dataProviderUrl}
>
{item.prefLabel}
</a>
@@ -247,8 +247,7 @@ class ResultTable extends React.Component {
render() {
const { classes, rows } = this.props;
- //console.log(rows)
-
+ // console.log(rows)
if (this.props.fetchingManuscripts ) {
return (
<Paper className={classes.progressContainer}>
diff --git a/src/client/components/ResultTableHead.js b/src/client/components/ResultTableHead.js
index 640d2ad2..a509f3a6 100644
--- a/src/client/components/ResultTableHead.js
+++ b/src/client/components/ResultTableHead.js
@@ -31,7 +31,8 @@ const columns = [
{
label: 'Author',
property: 'author',
- desc: 'Author description'
+ desc: 'Author description',
+ filter: true
},
{
label: 'Production place',
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index ea95ea2a..82339b39 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -62,6 +62,7 @@ let MapApp = (props) => {
const { classes } = props;
// browser
// error,
+ console.log(props.facet)
return (
<div className={classes.root}>
<div className={classes.appFrame}>
diff --git a/src/server/sparql/Datasets.js b/src/server/sparql/Datasets.js
index a934b884..83f8d501 100644
--- a/src/server/sparql/Datasets.js
+++ b/src/server/sparql/Datasets.js
@@ -32,7 +32,8 @@ module.exports = {
WHERE {
<FILTER>
?id a frbroo:F4_Manifestation_Singleton .
- #?id dct:source mmm-schema:Bodley .
+ # ?id dct:source mmm-schema:Bodley .
+ # ?id dct:source mmm-schema:SDBM .
}
`,
'manuscriptQuery': `
@@ -54,8 +55,9 @@ module.exports = {
SELECT DISTINCT ?id {
<FILTER>
?id a frbroo:F4_Manifestation_Singleton .
- #?id dct:source mmm-schema:Bodley .
- #?id ^<http://erlangen-crm.org/efrbroo/R18_created>/<http://www.cidoc-crm.org/cidoc-crm/P7_took_place_at> ?orderBy .
+ # ?id dct:source mmm-schema:Bodley .
+ # ?id dct:source mmm-schema:SDBM .
+ # ?id ^<http://erlangen-crm.org/efrbroo/R18_created>/<http://www.cidoc-crm.org/cidoc-crm/P7_took_place_at> ?orderBy .
}
ORDER BY ?id
#ORDER BY (!BOUND(?orderBy)) ?orderBy
@@ -251,6 +253,7 @@ module.exports = {
#?value dct:source mmm-schema:Bodley .
}
GROUP BY ?value ?parent
+ ORDER BY DESC(?cnt)
}
FILTER(BOUND(?value)) BIND(COALESCE(?value, <http://ldf.fi/NONEXISTENT_URI>) AS ?labelValue)
OPTIONAL { ?labelValue skos:prefLabel ?lbl .
diff --git a/src/server/sparql/Manuscripts.js b/src/server/sparql/Manuscripts.js
index 2a8b3c51..3b895edf 100644
--- a/src/server/sparql/Manuscripts.js
+++ b/src/server/sparql/Manuscripts.js
@@ -16,12 +16,12 @@ const facetConfigs = {
predicate: '^frbroo:R18_created/crm:P7_took_place_at',
hierarchical: true,
},
- // author: {
- // id: 'author',
- // label: 'Author',
- // predicate: '(^frbroo:R18_created|^crm:P108_has_produced)/crm:P14_carried_out_by',
- // hierarchical: false
- // }
+ author: {
+ id: 'author',
+ label: 'Author',
+ predicate: '(^frbroo:R18_created|^crm:P108_has_produced)/mmm-schema:carried_out_by_as_author',
+ hierarchical: false
+ }
};
export const getManuscripts = (page, pagesize, filters) => {
--
GitLab