Skip to content
Snippets Groups Projects
Commit 95905c0b authored by esikkala's avatar esikkala
Browse files

Network component: add loading indicator etc.

parent 09ff2832
No related branches found
No related tags found
No related merge requests found
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import history from '../../History'
import cytoscape from 'cytoscape'
import purple from '@material-ui/core/colors/purple'
import CircularProgress from '@material-ui/core/CircularProgress'
const cyContainerStyle = {
width: '100%',
height: '100%'
}
const styles = theme => ({
root: {
height: 400,
[theme.breakpoints.up('md')]: {
height: 'calc(100% - 21px)'
}
},
cyContainer: {
width: '100%',
height: '100%'
}
})
class Network extends React.Component {
constructor (props) {
super(props)
......@@ -65,14 +59,10 @@ class Network extends React.Component {
}
componentDidUpdate = prevProps => {
if (prevProps.resultUpdateID !== this.props.resultUpdateID) {
// console.log(this.props.results.elements)
this.cy.elements().remove()
if (this.props.preprocess) {
this.props.preprocess(this.props.results.elements)
}
this.cy.add(this.props.results.elements)
this.cy.layout(this.props.layout).run()
// Render the chart again if the raw data has changed
if (prevProps.resultUpdateID !== this.props.resultUpdateID ||
(prevProps.fetching && !this.props.fetching)) {
this.renderCytocape()
}
// check if filters have changed
if (prevProps.facetUpdateID !== this.props.facetUpdateID) {
......@@ -83,17 +73,48 @@ class Network extends React.Component {
}
}
renderCytocape = () => {
this.cy.elements().remove()
if (this.props.preprocess) {
this.props.preprocess(this.props.results.elements)
}
this.cy.add(this.props.results.elements)
this.cy.layout(this.props.layout).run()
}
render = () => {
const { fetching, pageType } = this.props
const rootStyle = {
width: '100%',
backgroundColor: '#fff',
borderTop: '1px solid rgba(224, 224, 224, 1)'
}
if (pageType === 'instancePage') {
rootStyle.height = 'calc(100% - 1px)'
}
if (pageType === 'facetResults') {
rootStyle.height = 'calc(100% - 72px)'
}
const spinnerContainerStyle = {
...rootStyle,
display: 'flex',
width: '100%',
alignItems: 'center',
justifyContent: 'center'
}
return (
<div className={this.props.classes.root}>
<div className={this.props.classes.cyContainer} ref={this.cyRef} />
<div style={rootStyle}>
{fetching &&
<div style={spinnerContainerStyle}>
<CircularProgress style={{ color: purple[500] }} thickness={5} />
</div>}
<div style={cyContainerStyle} ref={this.cyRef} />
</div>
)
}
}
Network.propTypes = {
classes: PropTypes.object.isRequired,
results: PropTypes.object,
fetchResults: PropTypes.func,
fetchNetworkById: PropTypes.func,
......@@ -106,7 +127,8 @@ Network.propTypes = {
optimize: PropTypes.number.isRequired,
style: PropTypes.array.isRequired,
layout: PropTypes.object.isRequired,
preprocess: PropTypes.func
preprocess: PropTypes.func,
fetching: PropTypes.bool
}
export default withStyles(styles)(Network)
export default Network
......@@ -11,7 +11,7 @@ import Network from '../../facet_results/Network'
import ApexChart from '../../facet_results/ApexChart'
import Export from '../../facet_results/Export'
import Recommendations from './Recommendations'
import { coseLayout, cytoscapeStyle } from '../../../configs/sampo/Cytoscape.js/NetworkConfig'
import { coseLayout, cytoscapeStyle, preprocess } from '../../../configs/sampo/Cytoscape.js/NetworkConfig'
import { createMultipleLineChartData } from '../../../configs/sampo/ApexCharts/LineChartConfig'
import { Route, Redirect } from 'react-router-dom'
import { has } from 'lodash'
......@@ -199,6 +199,7 @@ class InstanceHomePage extends React.Component {
optimize={5.0}
style={cytoscapeStyle}
layout={coseLayout}
preprocess={preprocess}
/>}
/>
<Route
......
......@@ -5,14 +5,16 @@ import PerspectiveTabs from '../../main_layout/PerspectiveTabs'
import ResultTable from '../../facet_results/ResultTable'
import LeafletMap from '../../facet_results/LeafletMap'
import Deck from '../../facet_results/Deck'
import ApexChart from '../../facet_results/ApexChart'
import Network from '../../facet_results/Network'
import Export from '../../facet_results/Export'
import MigrationsMapLegend from './MigrationsMapLegend'
import { MAPBOX_ACCESS_TOKEN, MAPBOX_STYLE } from '../../../configs/sampo/GeneralConfig'
import ApexChart from '../../facet_results/ApexChart'
import {
createSingleLineChartData,
createMultipleLineChartData
} from '../../../configs/sampo/ApexCharts/LineChartConfig'
import { coseLayout, cytoscapeStyle, preprocess } from '../../../configs/sampo/Cytoscape.js/NetworkConfig'
const Perspective1 = props => {
const { rootUrl, perspective } = props
......@@ -172,6 +174,25 @@ const Perspective1 = props => {
facetClass='perspective1'
/>}
/>
<Route
path={`${rootUrl}/${perspective.id}/faceted-search/network`}
render={() =>
<Network
results={props.facetResults.results}
facetUpdateID={props.facetData.facetUpdateID}
resultUpdateID={props.facetResults.resultUpdateID}
fetchResults={props.fetchResults}
fetching={props.facetResults.fetching}
resultClass='manuscriptFacetResultsNetwork'
facetClass='perspective1'
limit={500}
optimize={1.2}
style={cytoscapeStyle}
layout={coseLayout}
preprocess={preprocess}
pageType='facetResults'
/>}
/>
<Route
path={`${rootUrl}/${perspective.id}/faceted-search/export`}
render={() =>
......
......@@ -58,8 +58,13 @@ export const perspectiveConfig = [
icon: <RedoIcon />
},
{
id: 'export',
id: 'network',
value: 7,
icon: <BubbleChartIcon />
},
{
id: 'export',
value: 8,
icon: <CloudDownloadIcon />
}
],
......
......@@ -260,6 +260,7 @@ const resultClasses = new Set([
'productionTimespanLineChart',
'eventLineChart',
'manuscriptInstancePageNetwork',
'manuscriptFacetResultsNetwork',
'perspective1KnowledgeGraphMetadata'
])
......
......@@ -14,6 +14,7 @@ import {
productionsByDecadeQuery,
eventsByDecadeQuery,
manuscriptNetworkLinksQuery,
manuscriptFacetResultsNetworkLinksQuery,
manuscriptNetworkNodesQuery,
knowledgeGraphMetadataQuery
} from './sparql_queries/SparqlQueriesPerspective1'
......@@ -169,6 +170,13 @@ export const backendSearchConfig = {
nodes: manuscriptNetworkNodesQuery,
useNetworkAPI: true
},
manuscriptFacetResultsNetwork: {
perspectiveID: 'perspective1',
q: manuscriptFacetResultsNetworkLinksQuery,
nodes: manuscriptNetworkNodesQuery,
filterTarget: 'manuscript',
useNetworkAPI: true
},
findsPlaces: {
perspectiveID: 'finds', // use endpoint config from finds
q: findsPlacesQuery,
......
......@@ -435,6 +435,14 @@ export const manuscriptNetworkLinksQuery = `
}
`
export const manuscriptFacetResultsNetworkLinksQuery = `
SELECT DISTINCT (?manuscript as ?source) ?target ("Author" as ?prefLabel)
WHERE {
<FILTER>
?manuscript mmm-schema:manuscript_author/^mmm-schema:manuscript_author ?target .
}
`
export const manuscriptNetworkNodesQuery = `
SELECT DISTINCT ?id ?prefLabel ?class ?href
WHERE {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment