diff --git a/src/client/components/FacetDialog.js b/src/client/components/FacetDialog.js index ae0af071878cc02b52c7467cf7991aa8fdc0efbb..48765be052e929b596cd0838aec35e2e349f9f3a 100644 --- a/src/client/components/FacetDialog.js +++ b/src/client/components/FacetDialog.js @@ -34,6 +34,7 @@ class FacetDialog extends React.Component { open={this.props.facet.facetDialogOpen} onClose={this.handleClose} aria-labelledby="form-dialog-title" + keepMounted={true} > <DialogTitle disableTypography={true}> <Typography variant="h6">{this.props.propertyLabel}</Typography> diff --git a/src/client/components/Tree.js b/src/client/components/Tree.js index 2fd355744788334346db431c171760c77a300c8d..9e12f1d1abdc0f96545ba3cb34b0ad89509b91f5 100644 --- a/src/client/components/Tree.js +++ b/src/client/components/Tree.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; -import SortableTree from 'react-sortable-tree'; +import SortableTree, { changeNodeAtPath } from 'react-sortable-tree'; import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer'; import Checkbox from '@material-ui/core/Checkbox'; @@ -37,17 +37,26 @@ class Tree extends Component { }; } - handleCheckboxChange = name => () => { + handleCheckboxChange = treeObj => event => { + const newTreeData = changeNodeAtPath({ + treeData: this.state.treeData, + getNodeKey: ({ treeIndex }) => treeIndex, + path: treeObj.path, + newNode: { + ...treeObj.node, + selected: event.target.checked + }, + }); + this.setState({ treeData: newTreeData }); this.props.updateFilter({ property: 'creationPlace', - value: name + value: treeObj.node.id }); }; render() { const { classes } = this.props; const { searchString, searchFocusIndex, searchFoundCount } = this.state; - //console.log(this.state.treeData) // Case insensitive search of `node.title` const customSearchMethod = ({ node, searchQuery }) => @@ -115,7 +124,6 @@ class Tree extends Component { <div className={classes.treeContainer}> <SortableTree treeData={this.state.treeData} - getNodeKey={({ node }) => node.id} onChange={treeData => this.setState({ treeData })} canDrag={false} // Custom comparison for matching during search. @@ -141,18 +149,18 @@ class Tree extends Component { } onlyExpandSearchedNodes={true} theme={FileExplorerTheme} - generateNodeProps={({ node }) => ({ + generateNodeProps={n => ({ title: ( <FormControlLabel control={ <Checkbox - checked={false} - onChange={this.handleCheckboxChange(node.id)} - value={node.id} + checked={n.node.selected} + onChange={this.handleCheckboxChange(n)} + value={n.node.id} color="primary" /> } - label={`${node.title} (${node.totalCnt == 0 ? node.cnt : node.totalCnt})`} + label={`${n.node.title} (${n.node.totalCnt == 0 ? n.node.cnt : n.node.totalCnt})`} classes={{ root: classes.formControlRoot }} diff --git a/src/server/sparql/Mappers.js b/src/server/sparql/Mappers.js index 5ab779f1f18d0905b8027f75d8f1b08a56018c82..a31bd35904cea33356eec5fd3942134cf838a84a 100644 --- a/src/server/sparql/Mappers.js +++ b/src/server/sparql/Mappers.js @@ -128,6 +128,7 @@ export const mapFacet = sparqlBindings => { title: b.facet_text.value, id: _.has(b, 'value',) ? b.value.value : 'no_selection', cnt: b.cnt.value, + selected: false }; }); return results; @@ -140,6 +141,7 @@ export const mapHierarchicalFacet = sparqlBindings => { id: _.has(b, 'value',) ? b.value.value : 'no_selection', cnt: b.cnt.value, parent: _.has(b, 'parent',) ? b.parent.value : '0', + selected: false }; }); let treeData = getTreeFromFlatData({