diff --git a/src/client/components/facet_results/Network.js b/src/client/components/facet_results/Network.js index 61ca5fd50b432c2566cef116be6e1dc2fbdab609..00608b273bed7b32040a0e74c31c312b67c6f019 100644 --- a/src/client/components/facet_results/Network.js +++ b/src/client/components/facet_results/Network.js @@ -16,6 +16,25 @@ const styles = theme => ({ } }); +const layout = { + name: 'cose', + idealEdgeLength: 100, + nodeOverlap: 20, + refresh: 20, + fit: true, + padding: 30, + randomize: false, + componentSpacing: 100, + nodeRepulsion: 400000, + edgeElasticity: 100, + nestingFactor: 5, + gravity: 80, + numIter: 1000, + initialTemp: 200, + coolingFactor: 0.95, + minTemp: 1.0 +}; + class Network extends React.Component { constructor(props) { super(props); @@ -23,20 +42,39 @@ class Network extends React.Component { } componentDidMount = () => { - this.props.fetchResults({ resultClass: this.props.resultClass, facetClass: this.props.facetClass, }); - this.cy = cytoscape({ - container: this.cyRef.current + container: this.cyRef.current, + layout: { name: 'circle'}, + style: [ // the stylesheet for the graph + { + selector: 'node', + style: { + 'background-color': '#666', + 'label': 'data(prefLabel)' + } + }, + { + selector: 'edge', + style: { + 'width': 3, + 'line-color': '#ccc', + 'target-arrow-color': '#ccc', + 'target-arrow-shape': 'triangle' + } + } + ] }); - this.cy.add([ - { group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } }, - { group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } }, - { group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } } - ]); + } + + componentDidUpdate = () => { + if (this.props.results !== null) { + this.cy.add(this.props.results.elements); + this.cy.layout(layout).run(); + } } render = () => { diff --git a/src/client/reducers/mmm/manuscripts.js b/src/client/reducers/mmm/manuscripts.js index 3d79097cd2c35c19b646c26e7ad68910e7d92a11..82fa843b1a60e3f0f40699134dc788e68d866549 100644 --- a/src/client/reducers/mmm/manuscripts.js +++ b/src/client/reducers/mmm/manuscripts.js @@ -281,8 +281,13 @@ export const INITIAL_STATE = { ], }; +const resultClasses = new Set([ + 'manuscripts', + 'manuscriptsNetwork' +]); + const manuscripts = (state = INITIAL_STATE, action) => { - if (action.resultClass === 'manuscripts') { + if (resultClasses.has(action.resultClass)) { switch (action.type) { case FETCH_RESULTS: case FETCH_PAGINATED_RESULTS: diff --git a/src/server/sparql/NetworkApi.js b/src/server/sparql/NetworkApi.js index f4638feb970290832594d9f8da9c952f415952f4..eea2aacf225451e1ab0e23da927d56edb1873aea 100644 --- a/src/server/sparql/NetworkApi.js +++ b/src/server/sparql/NetworkApi.js @@ -6,23 +6,24 @@ export const runNetworkQuery = async({ links, nodes }) => { - const headers = { - 'Content-Type': 'application/x-www-form-urlencoded', - }; - const params = JSON.stringify({ + const payload = { endpoint, prefixes, + links, nodes, - links - }); + limit: 500 + }; + const url = 'http://127.0.0.1:5000/query'; + const config = { + headers: { + 'Content-Type': 'application/json' + } + }; try { - const response = await axios({ - method: 'post', - headers: headers, - url: 'http://127.0.0.1:5000/query', - data: params, - }); - return response.data; + const response = await axios.post(url, payload, config); + return { + data: response.data + }; } catch(error) { if (error.response) { // The request was made and the server responded with a status code diff --git a/src/server/sparql/SparqlQueriesManuscripts.js b/src/server/sparql/SparqlQueriesManuscripts.js index d04deff919122ad72f108341b828ed43a9ec13fd..2b5d1e7c5b0c3e0e2cd9806f89f47374ffafe8b7 100644 --- a/src/server/sparql/SparqlQueriesManuscripts.js +++ b/src/server/sparql/SparqlQueriesManuscripts.js @@ -428,9 +428,8 @@ export const networkLinksQuery = ` SELECT DISTINCT ?source ?target WHERE { <FILTER> - ?source mmm-schema:manuscript_author ?target . + ?target mmm-schema:manuscript_author ?source . } - LIMIT 100 `; export const networkNodesQuery = `