Update library configs

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

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

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]