Adapt to AcademySampo configs

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

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,

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]

src/client/library_configs/Cytoscape.js/NetworkConfig.js

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