From 1f1ba5ce8987e8b1a642c82da5a0fe6c9a7ea743 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Mon, 10 Jan 2022 15:38:04 +0200
Subject: [PATCH] Update network config handling
---
.../facet_results/ResultClassRoute.js | 12 +-
.../Cytoscape.js/NetworkConfig.js | 137 ++----------------
.../Cytoscape.js/NetworkTools.js | 59 ++++++++
3 files changed, 79 insertions(+), 129 deletions(-)
create mode 100644 src/client/library_configs/Cytoscape.js/NetworkTools.js
diff --git a/src/client/components/facet_results/ResultClassRoute.js b/src/client/components/facet_results/ResultClassRoute.js
index 8b15782a..3a8dd378 100644
--- a/src/client/components/facet_results/ResultClassRoute.js
+++ b/src/client/components/facet_results/ResultClassRoute.js
@@ -296,10 +296,10 @@ const ResultClassRoute = props => {
pageType = 'facetResults',
limit,
optimize,
- style,
fitLayout = false,
+ style = null,
layout = null,
- preprocess
+ preprocess = null
} = resultClassConfig
let networkProps = {
portalConfig,
@@ -314,12 +314,10 @@ const ResultClassRoute = props => {
layoutConfig: props.layoutConfig,
limit,
optimize,
- style: networkConfig[style],
fitLayout,
- preprocess: networkConfig[preprocess]
- }
- if (layout) {
- networkProps.layout = networkConfig[layout]
+ ...(style && { style }),
+ ...(layout && { layout }),
+ ...(preprocess && { preprocess: networkConfig[preprocess] })
}
if (pageType === 'facetResults') {
networkProps = {
diff --git a/src/client/library_configs/Cytoscape.js/NetworkConfig.js b/src/client/library_configs/Cytoscape.js/NetworkConfig.js
index d3044ad9..a5a3e823 100644
--- a/src/client/library_configs/Cytoscape.js/NetworkConfig.js
+++ b/src/client/library_configs/Cytoscape.js/NetworkConfig.js
@@ -1,65 +1,9 @@
-const maxEdgeWidth = 8
-
-const constrainWidth = width => {
- return (width ? (width < maxEdgeWidth ? width : maxEdgeWidth) : 1)
-}
-
-// https://js.cytoscape.org/#style
-export const cytoscapeStyle = [
- {
- selector: 'node',
- style: {
- shape: 'ellipse',
- 'font-size': '12',
- 'background-color': ele => ele.data('color') || '#666',
- label: ' data(prefLabel)',
- height: ele => (ele.data('size') || 16 / (ele.data('distance') + 1) || '16px'),
- width: ele => (ele.data('size') || 16 / (ele.data('distance') + 1) || '16px')
- }
- },
- {
- selector: 'edge',
- style: {
- width: ele => constrainWidth(ele.data('weight')),
- 'line-color': ele => ele.data('color') || '#BBB',
- 'curve-style': 'bezier',
- // content: ' data(prefLabel) ',
- 'target-arrow-shape': 'triangle',
- 'target-arrow-color': '#999',
- color: '#555',
- 'font-size': '6',
- 'text-valign': 'top',
- 'text-halign': 'center',
- 'edge-text-rotation': 'autorotate',
- 'text-background-opacity': 1,
- 'text-background-color': 'white',
- 'text-background-shape': 'roundrectangle'
- }
- }
-]
-
-// https://js.cytoscape.org/#layouts
-export const coseLayout = {
- 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: 1347,
- initialTemp: 200,
- coolingFactor: 0.95,
- minTemp: 1.0
-}
+import { constrainValue, ValueScaler, ColorScaler } from './NetworkTools'
// preprocess by pagerank
-export const preprocess = elements => {
+export const preprocessPagerank = elements => {
+ const maxEdgeWidth = 8
+
// edges
let arr = elements.edges.map(ele => ele.data.weight)
@@ -67,7 +11,6 @@ export const preprocess = elements => {
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)
@@ -75,7 +18,7 @@ export const preprocess = elements => {
res = (new ColorScaler('6px', '24px')).fitTransform(arr)
elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
- // label size
+ // node label font size
res = (new ValueScaler(8, 12)).fitTransform(arr)
elements.nodes.forEach((ele, i) => { ele.data.font_size = res[i] })
@@ -91,7 +34,7 @@ export const preprocess = elements => {
// preprocessRelationNetwork
export const preprocessRelationNetwork = elements => {
- preprocess(elements)
+ preprocessPagerank(elements)
// nodes
const arr = elements.nodes.map(ele => ele.data.distance)
@@ -100,7 +43,7 @@ export const preprocessRelationNetwork = elements => {
let res = (new ColorScaler('24px', '6px')).fitTransform(arr)
elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
- // label size
+ // node label font size
res = (new ValueScaler(12, 8)).fitTransform(arr)
elements.nodes.forEach((ele, i) => { ele.data.font_size = res[i] })
}
@@ -126,7 +69,7 @@ export const preprocessConnections = elements => {
res = (new ColorScaler('24px', '6px')).fitTransform(arr)
elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
- // label size
+ // node label font size
res = (new ValueScaler(12, 8)).fitTransform(arr)
elements.nodes.forEach((ele, i) => { ele.data.font_size = res[i] })
@@ -144,6 +87,8 @@ export const preprocessConnections = elements => {
// preprocess by ego node distance
export const preprocessDistance = elements => {
+ const maxEdgeWidth = 8
+
// edges
let arr = elements.edges.map(ele => ele.data.weight)
@@ -179,7 +124,8 @@ export const preprocessPointCloud = elements => {
}
export const preprocessFamilytree = elements => {
- // console.log(elements.nodes)
+ const maxEdgeWidth = 8
+
const nodes = elements.nodes.map(ob => {
if (ob.data.distance === 0) {
ob.data.size = '24px'
@@ -195,60 +141,7 @@ export const preprocessFamilytree = elements => {
}
})
elements.nodes = nodes
-}
-
-class ValueScaler {
- a;
- b;
- constructor (low, high) {
- this.low = low
- this.high = high
- }
-
- fit (vals) {
- const valmin = Math.min(...vals)
- const valmax = Math.max(...vals)
- if (valmax === valmin) {
- this.a = 0.0
- } else {
- this.a = (this.high - this.low) / (valmax - valmin)
- }
- this.b = this.low - valmin * this.a
- }
-
- transform (vals) {
- return vals.map(x => { return x * this.a + this.b })
- }
-
- fitTransform (vals) {
- this.fit(vals)
- return this.transform(vals)
- }
-}
-
-class ColorScaler extends ValueScaler {
- col1;
- col2;
- constructor (low, high) {
- super(0.0, 1.0)
- this.col1 = low
- this.col2 = high
- }
-
- // super.fit(vals)
-
- _process (s0, s1, r) {
- const x0 = parseInt(s0)
- const x1 = parseInt(s1)
- if (isNaN(x0) || isNaN(x1)) return s0
- return Math.floor(x0 + (x1 - x0) * r)
- }
-
- transform (vals) {
- const s1 = this.col1.split(/(\d+)/)
- const s2 = this.col2.split(/(\d+)/)
- const _vals01 = vals.map(x => { return x * this.a + this.b })
-
- return _vals01.map(v => s1.map((s, i) => this._process(s, s2[i], v)).join(''))
- }
+ elements.edges.forEach(edge => {
+ edge.data.weight = constrainValue({ value: edge.data.weight, maxValue: maxEdgeWidth })
+ })
}
diff --git a/src/client/library_configs/Cytoscape.js/NetworkTools.js b/src/client/library_configs/Cytoscape.js/NetworkTools.js
new file mode 100644
index 00000000..ceba0d42
--- /dev/null
+++ b/src/client/library_configs/Cytoscape.js/NetworkTools.js
@@ -0,0 +1,59 @@
+export const constrainValue = ({ value, maxValue, defaultValue = 1 }) => {
+ return (value ? (value < maxValue ? value : maxValue) : defaultValue)
+}
+
+export class ValueScaler {
+ a;
+ b;
+ constructor (low, high) {
+ this.low = low
+ this.high = high
+ }
+
+ fit (vals) {
+ const valmin = Math.min(...vals)
+ const valmax = Math.max(...vals)
+ if (valmax === valmin) {
+ this.a = 0.0
+ } else {
+ this.a = (this.high - this.low) / (valmax - valmin)
+ }
+ this.b = this.low - valmin * this.a
+ }
+
+ transform (vals) {
+ return vals.map(x => { return x * this.a + this.b })
+ }
+
+ fitTransform (vals) {
+ this.fit(vals)
+ return this.transform(vals)
+ }
+}
+
+export class ColorScaler extends ValueScaler {
+ col1;
+ col2;
+ constructor (low, high) {
+ super(0.0, 1.0)
+ this.col1 = low
+ this.col2 = high
+ }
+
+ // super.fit(vals)
+
+ _process (s0, s1, r) {
+ const x0 = parseInt(s0)
+ const x1 = parseInt(s1)
+ if (isNaN(x0) || isNaN(x1)) return s0
+ return Math.floor(x0 + (x1 - x0) * r)
+ }
+
+ transform (vals) {
+ const s1 = this.col1.split(/(\d+)/)
+ const s2 = this.col2.split(/(\d+)/)
+ const _vals01 = vals.map(x => { return x * this.a + this.b })
+
+ return _vals01.map(v => s1.map((s, i) => this._process(s, s2[i], v)).join(''))
+ }
+}
--
GitLab