diff --git a/src/client/components/facet_results/ApexCharts.js b/src/client/components/facet_results/ApexCharts.js
index 646310369aaac51bde3acb4683696a9c6d0e0f61..77d8fe0f6c0bfcb0f3e6e9121bcf8557fdde3311 100644
--- a/src/client/components/facet_results/ApexCharts.js
+++ b/src/client/components/facet_results/ApexCharts.js
@@ -46,6 +46,7 @@ class ApexChart extends React.Component {
this.renderChart()
}
this.props.fetchData({
+ perspectiveID: this.props.perspectiveConfig.id,
resultClass: this.state.resultClass,
facetClass: this.props.facetClass,
facetID: this.props.facetID,
@@ -61,6 +62,7 @@ class ApexChart extends React.Component {
// check if filters have changed
if (this.props.pageType === 'facetResults' && prevProps.facetUpdateID !== this.props.facetUpdateID) {
this.props.fetchData({
+ perspectiveID: this.props.perspectiveConfig.id,
resultClass: this.state.resultClass,
facetClass: this.props.facetClass,
facetID: this.props.facetID
@@ -68,6 +70,7 @@ class ApexChart extends React.Component {
}
if (prevState.resultClass !== this.state.resultClass) {
this.props.fetchData({
+ perspectiveID: this.props.perspectiveConfig.id,
resultClass: this.state.resultClass,
facetClass: this.props.facetClass,
facetID: this.props.facetID
diff --git a/src/client/components/facet_results/ResultClassRoute.js b/src/client/components/facet_results/ResultClassRoute.js
index 056c05dd353457a679dd4c65468dbe0540b4977f..f26f3c0300d0efc77b3525967aa47d00b2af4925 100644
--- a/src/client/components/facet_results/ResultClassRoute.js
+++ b/src/client/components/facet_results/ResultClassRoute.js
@@ -319,7 +319,8 @@ const ResultClassRoute = props => {
limit,
optimize,
style,
- layout,
+ fitLayout = false,
+ layout = null,
preprocess
} = resultClassConfig
let networkProps = {
@@ -336,9 +337,12 @@ const ResultClassRoute = props => {
limit,
optimize,
style: networkConfig[style],
- layout: networkConfig[layout],
+ fitLayout,
preprocess: networkConfig[preprocess]
}
+ if (layout) {
+ networkProps.layout = networkConfig[layout]
+ }
if (pageType === 'facetResults') {
networkProps = {
...networkProps,
diff --git a/src/client/components/main_layout/MuiIcon.js b/src/client/components/main_layout/MuiIcon.js
index ea5636e2a2fd6b03462435c82e5d6310cef7fce5..5a84acc3f86de4886696bca900c6787d16d2e5c1 100644
--- a/src/client/components/main_layout/MuiIcon.js
+++ b/src/client/components/main_layout/MuiIcon.js
@@ -14,7 +14,8 @@ import {
FormatAlignJustify,
ClearAll,
OndemandVideo,
- KeyboardVoice
+ KeyboardVoice,
+ Autorenew
} from '@material-ui/icons'
import has from 'lodash'
@@ -34,7 +35,8 @@ const MuiIcon = props => {
FormatAlignJustify: FormatAlignJustify,
ClearAll: ClearAll,
OndemandVideo: OndemandVideo,
- KeyboardVoice: KeyboardVoice
+ KeyboardVoice: KeyboardVoice,
+ Autorenew: Autorenew
}
if (has(MuiIcons, props.iconName)) {
const MuiIconComponent = MuiIcons[props.iconName]
diff --git a/src/client/library_configs/Cytoscape.js/NetworkConfig.js b/src/client/library_configs/Cytoscape.js/NetworkConfig.js
index e804afd8d9e1fd844d57742dc90097f768fe7dee..d3044ad96869bdb24d93743b4e55eeebf7d3309f 100644
--- a/src/client/library_configs/Cytoscape.js/NetworkConfig.js
+++ b/src/client/library_configs/Cytoscape.js/NetworkConfig.js
@@ -1,3 +1,9 @@
+const maxEdgeWidth = 8
+
+const constrainWidth = width => {
+ return (width ? (width < maxEdgeWidth ? width : maxEdgeWidth) : 1)
+}
+
// https://js.cytoscape.org/#style
export const cytoscapeStyle = [
{
@@ -52,40 +58,143 @@ export const coseLayout = {
minTemp: 1.0
}
+// preprocess by pagerank
export const preprocess = elements => {
- const vals = elements.edges.map(ele => ele.data.weight)
- const valmax = Math.max(...vals)
- const valmin = Math.min(...vals)
- const wmax = 6.0
- const wmin = 1.0
- const a = (wmax - wmin) / (valmax - valmin)
- const b = wmin - valmin * (wmax - wmin) / (valmax - valmin)
- elements.edges.forEach((ele, i) => { ele.data.weight = vals[i] * a + b })
+ // edges
+ let arr = elements.edges.map(ele => ele.data.weight)
+
+ // edge width
+ let res = (new ValueScaler(1.0, maxEdgeWidth)).fitTransform(arr)
+ elements.edges.forEach((ele, i) => { ele.data.weight = res[i] })
+
+ // console.log(elements.nodes)
+ // nodes
+ arr = elements.nodes.map(ele => ele.data.pagerank)
+
+ // node size
+ res = (new ColorScaler('6px', '24px')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
+
+ // label size
+ res = (new ValueScaler(8, 12)).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.font_size = res[i] })
+
+ elements.nodes.forEach(ele => {
+ if (ele.data.distance === 0) {
+ ele.data.size = '16px'
+ ele.data.color = 'black'
+ ele.data.font_size = 12.0
+ // console.log('Found')
+ }
+ })
}
-export const preprocessPeopleNetwork = elements => {
+// preprocessRelationNetwork
+export const preprocessRelationNetwork = elements => {
preprocess(elements)
// nodes
const arr = elements.nodes.map(ele => ele.data.distance)
// node size
- let res = (new ColorScaler('26px', '12px')).fitTransform(arr)
+ let res = (new ColorScaler('24px', '6px')).fitTransform(arr)
elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
// label size
res = (new ValueScaler(12, 8)).fitTransform(arr)
elements.nodes.forEach((ele, i) => { ele.data.font_size = res[i] })
+}
+
+// preprocess for person/connections
+export const preprocessConnections = elements => {
+ // edges
+ let arr = elements.edges.map(ele => ele.data.weight)
+
+ // edge width
+ let res = (new ValueScaler(1.0, 4.0)).fitTransform(arr)
+ elements.edges.forEach((ele, i) => { ele.data.weight = res[i] })
+
+ const maxlength = 60
+ elements.edges.forEach(ele => {
+ const st = ele.data.prefLabel
+ ele.data.prefLabel = st.length > maxlength ? st.substring(0, maxlength - 3) + '...' : st
+ })
+ // nodes by distance to ego
+ arr = elements.nodes.map(ele => ele.data.distance)
+
+ // node size
+ res = (new ColorScaler('24px', '6px')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
- // node color
- // res = (new ColorScaler('rgb(255, 0, 0)', 'rgb(0, 0, 255)')).fitTransform(arr)
- // elements.nodes.forEach((ele, i) => { ele.data.color = res[i] })
+ // label size
+ res = (new ValueScaler(12, 8)).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.font_size = res[i] })
+
+ elements.nodes.forEach(ele => { ele.data.color = (ele.data.distance < 1) ? 'red' : 'blue' })
+
+ elements.nodes.forEach(ele => {
+ if (ele.data.distance === 0) {
+ ele.data.size = '16px'
+ ele.data.color = 'black'
+ ele.data.font_size = 12.0
+ // console.log('Found')
+ }
+ })
}
-const maxEdgeWidth = 8
+// preprocess by ego node distance
+export const preprocessDistance = elements => {
+ // edges
+ let arr = elements.edges.map(ele => ele.data.weight)
-const constrainWidth = width => {
- return (width ? (width < maxEdgeWidth ? width : maxEdgeWidth) : 1)
+ // edge width
+ let res = (new ValueScaler(1.0, maxEdgeWidth)).fitTransform(arr)
+ elements.edges.forEach((ele, i) => { ele.data.weight = res[i] })
+
+ // console.log(elements.nodes)
+ // nodes
+ arr = elements.nodes.map(ele => ele.data.distance)
+
+ // node size
+ res = (new ColorScaler('24px', '6px')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
+
+ // label size
+ res = (new ValueScaler(16, 8)).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.font_size = res[i] })
+}
+
+export const preprocessPointCloud = elements => {
+ const nodes = elements.nodes.map(ob => {
+ return {
+ data: ob.data,
+ position: {
+ x: 360 * parseFloat(ob.data.x),
+ y: 360 * parseFloat(ob.data.y)
+ }
+ }
+ })
+ elements.nodes = nodes
+ elements.edges = []
+}
+
+export const preprocessFamilytree = elements => {
+ // console.log(elements.nodes)
+ const nodes = elements.nodes.map(ob => {
+ if (ob.data.distance === 0) {
+ ob.data.size = '24px'
+ ob.data.color = 'black'
+ // console.log('Found')
+ }
+ return {
+ data: ob.data,
+ position: {
+ x: 800 * parseFloat(ob.data.x),
+ y: 600 * parseFloat(ob.data.y)
+ }
+ }
+ })
+ elements.nodes = nodes
}
class ValueScaler {