From 17e7df17fcebc50e0bcb1358685964fc8116f74a Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Mon, 10 Jan 2022 19:11:14 +0200
Subject: [PATCH] Update library configs
---
.../Cytoscape.js/NetworkConfig.js | 87 ++++++++++++++++++-
.../library_configs/Leaflet/LeafletConfig.js | 50 +++++++++++
2 files changed, 136 insertions(+), 1 deletion(-)
diff --git a/src/client/library_configs/Cytoscape.js/NetworkConfig.js b/src/client/library_configs/Cytoscape.js/NetworkConfig.js
index a5a3e823..4ad28a11 100644
--- a/src/client/library_configs/Cytoscape.js/NetworkConfig.js
+++ b/src/client/library_configs/Cytoscape.js/NetworkConfig.js
@@ -1,3 +1,4 @@
+import { has } from 'lodash'
import { constrainValue, ValueScaler, ColorScaler } from './NetworkTools'
// preprocess by pagerank
@@ -32,7 +33,91 @@ export const preprocessPagerank = elements => {
})
}
-// preprocessRelationNetwork
+export const preprocessLetterSampo = elements => {
+ const maxEdgeWidth = 8
+
+ /**
+ const rankSort = arr => {
+ const arr2 = arr.map(function (o, i) { return { idx: i, obj: o } }).sort((a, b) => a.obj - b.obj)
+ return arr2.map(function (o, i) { o.ord = i; return o }).sort((a, b) => a.idx - b.idx).map(o => o.ord)
+ }
+ */
+
+ // edges
+ let arr = elements.edges.map(ele => ele.data.weight || 1)
+
+ // edge width
+ let res = (new ValueScaler(1.0, maxEdgeWidth)).fitTransform(arr)
+ elements.edges.forEach((ele, i) => { ele.data.weight = res[i] })
+
+ // edge color
+ // https://www.w3schools.com/colors/colors_hsl.asp
+ res = (new ColorScaler('hsl(30, 64%, 85%)', 'hsl(30, 64%, 35%)')).fitTransform(arr)
+ elements.edges.forEach((ele, i) => { ele.data.color = res[i] })
+
+ // nodes
+ arr = elements.nodes.map(ele => Math.sqrt(ele.data.numLetters || 0))
+
+ // TODO: adjust node sizes e.g. https://stackoverflow.com/questions/30167117/get-the-current-index-in-sort-function
+ // node size
+ res = (new ColorScaler('8px', '40px')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
+
+ // node color
+ res = (new ColorScaler('rgb(0,0,0)', 'rgb(255,0,0)')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.color = res[i] })
+}
+
+export const preprocessEgo = elements => {
+ const maxEdgeWidth = 8
+ // edges
+ let arr = elements.edges.map(ele => ele.data.weight || 1)
+
+ // edge width
+ let res = (new ValueScaler(1.0, maxEdgeWidth)).fitTransform(arr)
+ elements.edges.forEach((ele, i) => { ele.data.weight = res[i] })
+
+ // edge color
+ // https://www.w3schools.com/colors/colors_hsl.asp
+ res = (new ColorScaler('hsl(30, 64%, 85%)', 'hsl(30, 64%, 35%)')).fitTransform(arr)
+ elements.edges.forEach((ele, i) => { ele.data.color = res[i] })
+
+ // nodes
+ arr = elements.nodes.map(ele => has(ele.data, 'distance') ? ele.data.distance : 3)
+ // node size
+ res = (new ColorScaler('20px', '8px')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
+
+ // node color
+ res = (new ColorScaler('rgb(255,0,0)', 'rgb(0,0,0)')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.color = res[i] })
+}
+
+export const preprocessTie = elements => {
+ const maxEdgeWidth = 8
+ // 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] })
+
+ // edge color
+ res = (new ColorScaler('hsl(30, 64%, 85%)', 'hsl(30, 64%, 35%)')).fitTransform(arr)
+ elements.edges.forEach((ele, i) => { ele.data.color = res[i] })
+
+ // nodes
+ arr = elements.nodes.map(ele => ele.data.pagerank)
+
+ // node size
+ res = (new ColorScaler('8px', '20px')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.size = res[i] })
+
+ // node color
+ res = (new ColorScaler('rgb(0,0,0)', 'rgb(255,0,0)')).fitTransform(arr)
+ elements.nodes.forEach((ele, i) => { ele.data.color = res[i] })
+}
+
export const preprocessRelationNetwork = elements => {
preprocessPagerank(elements)
diff --git a/src/client/library_configs/Leaflet/LeafletConfig.js b/src/client/library_configs/Leaflet/LeafletConfig.js
index 3f3c66f0..160c86dd 100644
--- a/src/client/library_configs/Leaflet/LeafletConfig.js
+++ b/src/client/library_configs/Leaflet/LeafletConfig.js
@@ -28,6 +28,56 @@ export const createPopUpContentDefault = ({ data, resultClass }) => {
return container
}
+export const createPopUpContentAs = ({ data, resultClass }) => {
+ if (Array.isArray(data.prefLabel)) {
+ data.prefLabel = data.prefLabel[0]
+ }
+ const container = document.createElement('div')
+ const h3 = document.createElement('h3')
+ if (has(data.prefLabel, 'dataProviderUrl')) {
+ const link = document.createElement('a')
+ link.addEventListener('click', () => history.push(data.prefLabel.dataProviderUrl))
+ link.textContent = data.prefLabel.prefLabel
+ link.style.cssText = 'cursor: pointer; text-decoration: underline'
+ h3.appendChild(link)
+ } else {
+ h3.textContent = data.prefLabel.prefLabel
+ }
+ container.appendChild(h3)
+ if (resultClass === 'peoplePlaces' || resultClass === 'placesPeople') {
+ const p = document.createElement('p')
+ p.textContent = 'People:'
+ container.appendChild(p)
+ container.appendChild(createInstanceListing(data.related))
+ }
+ return container
+}
+
+export const createPopUpContentLetterSampo = ({ data, resultClass }) => {
+ if (Array.isArray(data.prefLabel)) {
+ data.prefLabel = data.prefLabel[0]
+ }
+ const container = document.createElement('div')
+ const h3 = document.createElement('h3')
+ if (has(data.prefLabel, 'dataProviderUrl')) {
+ const link = document.createElement('a')
+ link.addEventListener('click', () => history.push(data.prefLabel.dataProviderUrl))
+ link.textContent = data.prefLabel.prefLabel
+ link.style.cssText = 'cursor: pointer; text-decoration: underline'
+ h3.appendChild(link)
+ } else {
+ h3.textContent = data.prefLabel.prefLabel
+ }
+ container.appendChild(h3)
+ if (resultClass === 'placesActors') {
+ const p = document.createElement('p')
+ p.textContent = 'Actors:'
+ container.appendChild(p)
+ container.appendChild(createInstanceListing(data.related))
+ }
+ return container
+}
+
export const createPopUpContentSotasurmat = ({ data, resultClass }) => {
if (Array.isArray(data.prefLabel)) {
data.prefLabel = data.prefLabel[0]
--
GitLab