From 180c3ae6350e9aaac1ce70727ead15ccb0a641d9 Mon Sep 17 00:00:00 2001 From: esikkala <esko.ikkala@aalto.fi> Date: Thu, 23 Dec 2021 13:29:02 +0200 Subject: [PATCH] Adapt configs --- .../facet_results/ResultClassRoute.js | 4 +- src/client/components/main_layout/MuiIcon.js | 8 +- .../Cytoscape.js/NetworkConfig.js | 75 +++++++++++++++++++ 3 files changed, 83 insertions(+), 4 deletions(-) diff --git a/src/client/components/facet_results/ResultClassRoute.js b/src/client/components/facet_results/ResultClassRoute.js index 31b2f013..a853c975 100644 --- a/src/client/components/facet_results/ResultClassRoute.js +++ b/src/client/components/facet_results/ResultClassRoute.js @@ -246,7 +246,7 @@ const ResultClassRoute = props => { const { pageType = 'facetResults', title, - xAxisTitle, + xaxisTitle, xaxisType, xaxisTickAmount, yaxisTitle, @@ -271,7 +271,7 @@ const ResultClassRoute = props => { fetchData: props.fetchResults, createChartData: props.apexChartsConfig[createChartData], title, - xAxisTitle, + xaxisTitle, xaxisType, xaxisTickAmount, yaxisTitle, diff --git a/src/client/components/main_layout/MuiIcon.js b/src/client/components/main_layout/MuiIcon.js index 53c3bb86..ea5636e2 100644 --- a/src/client/components/main_layout/MuiIcon.js +++ b/src/client/components/main_layout/MuiIcon.js @@ -1,6 +1,7 @@ import React from 'react' import { CalendarViewDay, + CalendarToday, TripOrigin, LocationOn, AddLocation, @@ -12,13 +13,15 @@ import { ShowChart, FormatAlignJustify, ClearAll, - OndemandVideo + OndemandVideo, + KeyboardVoice } from '@material-ui/icons' import has from 'lodash' const MuiIcon = props => { const MuiIcons = { CalendarViewDay: CalendarViewDay, + CalendarToday: CalendarToday, TripOrigin: TripOrigin, LocationOn: LocationOn, AddLocation: AddLocation, @@ -30,7 +33,8 @@ const MuiIcon = props => { ShowChart: ShowChart, FormatAlignJustify: FormatAlignJustify, ClearAll: ClearAll, - OndemandVideo: OndemandVideo + OndemandVideo: OndemandVideo, + KeyboardVoice: KeyboardVoice } 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 fd367f6a..e804afd8 100644 --- a/src/client/library_configs/Cytoscape.js/NetworkConfig.js +++ b/src/client/library_configs/Cytoscape.js/NetworkConfig.js @@ -63,8 +63,83 @@ export const preprocess = elements => { elements.edges.forEach((ele, i) => { ele.data.weight = vals[i] * a + b }) } +export const preprocessPeopleNetwork = elements => { + preprocess(elements) + + // nodes + const arr = elements.nodes.map(ele => ele.data.distance) + + // node size + let res = (new ColorScaler('26px', '12px')).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] }) + + // 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] }) +} + const maxEdgeWidth = 8 const constrainWidth = width => { return (width ? (width < maxEdgeWidth ? width : maxEdgeWidth) : 1) } + +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('')) + } +} -- GitLab