Network component: add loading indicator etc.

src/client/components/facet_results/Network.js

 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

src/client/components/perspectives/sampo/InstanceHomePage.js

@@ -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

src/client/components/perspectives/sampo/Perspective1.js

@@ -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={() =>

src/client/configs/sampo/PerspectiveConfig.js

@@ -58,8 +58,13 @@ export const perspectiveConfig = [
         icon: <RedoIcon />
       },
       {
-        id: 'export',
+        id: 'network',
         value: 7,
+        icon: <BubbleChartIcon />
+      },
+      {
+        id: 'export',
+        value: 8,
         icon: <CloudDownloadIcon />
       }
     ],

src/client/reducers/sampo/perspective1.js

@@ -260,6 +260,7 @@ const resultClasses = new Set([
   'productionTimespanLineChart',
   'eventLineChart',
   'manuscriptInstancePageNetwork',
+  'manuscriptFacetResultsNetwork',
   'perspective1KnowledgeGraphMetadata'
 ])
 

src/server/sparql/sampo/BackendSearchConfig.js

@@ -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,

src/server/sparql/sampo/sparql_queries/SparqlQueriesPerspective1.js

@@ -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 {