zone colors & pl/nl icons from scenario meta (253720a0) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

js-apps/meep-frontend/src/js/containers/idc-map.js

+97 −72

Original line number	Diff line number	Diff line
		@@ -52,9 +52,12 @@ import {
		FIELD_NAME,
		FIELD_TYPE,
		FIELD_PARENT,
		FIELD_CELL_ID,
		FIELD_GEO_LOCATION,
		FIELD_GEO_PATH,
		FIELD_GEO_RADIUS,
		FIELD_META_DISPLAY_MAP_COLOR,
		FIELD_META_DISPLAY_MAP_ICON,
		getElemFieldVal,
		getElemFieldErr,
		setElemFieldVal,
		@@ -63,18 +66,22 @@ import {

		import 'leaflet/dist/images/marker-shadow.png';

		const zoneColorMap = {
		'zone01': '#9933ff',
		'zone02': '#00cc00',
		'zone03': '#990000',
		'zone04': '#ff9900'
		};
		const ZONE_COLOR_LIST = [
		'blueviolet',
		'darkorange',
		'darkred',
		'limegreen',
		'blue',
		'purple',
		'gold',
		'darkturquoise'
		];

		const TYPE_UE = 'UE';
		const TYPE_POA = 'POA';
		const TYPE_COMPUTE = 'COMPUTE';

		// const UE_ICON = 'ion-iphone';
		const UE_ICON = 'ion-iphone';
		const UE_COLOR_DEFAULT = '#00ccff';
		const UE_PATH_COLOR = '#008fb3';
		const UE_OPACITY = 1.0;
		@@ -83,15 +90,15 @@ const UE_PATH_OPACITY = 0.5;
		const UE_PATH_OPACITY_BACKGROUND = 0.3;

		// POA icons: 'ion-connection-bars', 'ion-wifi'
		// const POA_ICON = 'ion-connection-bars';
		const POA_COLOR_DEFAULT = 'purple';
		const POA_ICON = 'ion-connection-bars';
		const POA_COLOR_DEFAULT = '#696969';
		const POA_OPACITY = 1.0;
		const POA_OPACITY_BACKGROUND = 0.35;
		const POA_RANGE_OPACITY = 0.05;
		const POA_RANGE_OPACITY_BACKGROUND = 0.05;

		// const COMPUTE_ICON = 'ion-android-cloud';
		const COMPUTE_COLOR_DEFAULT = 'green';
		const COMPUTE_ICON = 'ion-android-cloud';
		const COMPUTE_COLOR_DEFAULT = '#696969';
		const COMPUTE_OPACITY = 1.0;
		const COMPUTE_OPACITY_BACKGROUND = 0.35;

		@@ -111,6 +118,7 @@ class IDCMap extends Component {
		this.thisRef = createRef();
		this.configRef = createRef();
		this.rendering = false;
		this.zoneColorMap = {};
		}

		componentDidMount() {
		@@ -147,8 +155,12 @@ class IDCMap extends Component {
		if (nextProps.configuredElement !== this.props.configuredElement) {
		return true;
		}
		// Scenario change
		if (nextProps.cfgScenarioName !== this.props.cfgScenarioName) {
		return true;
		}
		// Sandbox update
		if (nextProps.sandbox !== this.props.sandbox) {
		if (nextProps.cfgView !== this.props.cfgView) {
		return true;
		}
		// Map asset change
		@@ -336,6 +348,9 @@ class IDCMap extends Component {
		snappingOption: false // $$ adds a button to toggle the Snapping Option
		});

		// Set control states
		this.updateEditControls();

		// Map handlers
		this.map.on('pm:globaleditmodetoggled', e => this.onEditModeToggle(e));
		this.map.on('pm:globaldragmodetoggled', e => this.onDragModeToggle(e));
		@@ -365,6 +380,7 @@ class IDCMap extends Component {
		this.updateCfg({baselayerName: event.name});
		}

		// Get Zones
		getUePoa(ue) {
		var poa = null;
		var table = this.getTable();
		@@ -408,71 +424,73 @@ class IDCMap extends Component {
		return zone;
		}

		getUeColor(ue) {
		var zone = this.getUeZone(ue);
		if (zone && zoneColorMap[zone]) {
		return zoneColorMap[zone];
		}
		return UE_COLOR_DEFAULT;
		}

		getPoaColor(poa) {
		var zone = this.getPoaZone(poa);
		// Get Colors
		getZoneColor(zone) {
		var color = null;
		if (zone) {
		return zoneColorMap[zone] ? zoneColorMap[zone] : tinycolor.random();
		// Get zone color from meta
		color = getElemFieldVal(this.getTable().entries[zone], FIELD_META_DISPLAY_MAP_COLOR);
		if (!color) {
		// Get zone color from zone color map
		color = this.zoneColorMap[zone];
		if (!color) {
		// Get a new color for this zone
		color = this.zoneColorMap[zone] = ZONE_COLOR_LIST[Object.keys(this.zoneColorMap).length % ZONE_COLOR_LIST.length];
		// // Generate a random color for this zone
		// color = this.zoneColorMap[zone] = tinycolor.random().toHexString();
		}
		return POA_COLOR_DEFAULT;
		}

		getComputeColor(compute) {
		var zone = this.getComputeZone(compute);
		if (zone && zoneColorMap[zone]) {
		return zoneColorMap[zone];
		}
		return COMPUTE_COLOR_DEFAULT;
		return color;
		}

		setUeIcon(icon, ue) {
		// var iconName = 'ion-iphone';
		// var iconName = 'ion-android-person';
		var iconName = 'ion-ios-videocam';
		if (ue.velocity > 10) {
		iconName = 'ion-android-car';
		} else if (ue.velocity > 0) {
		// iconName = 'ion-android-bicycle';
		iconName = 'ion-android-walk';
		getUeColor(ue) {
		var color = this.getZoneColor(this.getUeZone(ue));
		return color ? color : UE_COLOR_DEFAULT;
		}
		icon.className = 'custom-marker-icon ion ' + iconName;

		getPoaColor(poa) {
		var color = this.getZoneColor(this.getPoaZone(poa));
		return color ? color : POA_COLOR_DEFAULT;
		}

		setPoaIcon(icon, poa) {
		var className = 'custom-marker-icon ion ion-connection-bars';
		var innerHTML = '';
		var poaType = getElemFieldVal(this.getTable().entries[poa.id], FIELD_TYPE);
		if (poaType === ELEMENT_TYPE_POA_CELL) {
		className = 'custom-marker-icon ion ion-connection-bars';
		getComputeColor(compute) {
		var color = this.getZoneColor(this.getComputeZone(compute));
		return color ? color : COMPUTE_COLOR_DEFAULT;
		}
		// WIFI
		// className = 'custom-marker-icon ion ion-wifi';
		// icon.style['margin'] = '12px auto';
		icon.className = className;
		icon.innerHTML = innerHTML;

		// Set Icons
		setUeIcon(iconDiv, ue) {
		var metaIcon = getElemFieldVal(this.getTable().entries[ue], FIELD_META_DISPLAY_MAP_ICON);
		var icon = metaIcon ? metaIcon : UE_ICON;
		iconDiv.className = 'custom-marker-icon ion ' + icon;
		iconDiv.innerHTML = '';
		}

		setPoaIconText(iconText, poa) {
		setPoaIcon(iconDiv, iconTextDiv, poa) {
		var metaIcon = getElemFieldVal(this.getTable().entries[poa], FIELD_META_DISPLAY_MAP_ICON);
		var icon = metaIcon ? metaIcon : POA_ICON;
		iconDiv.className = 'custom-marker-icon ion ' + icon;
		iconDiv.innerHTML = '';

		var innerHTML = '';
		var poaType = getElemFieldVal(this.getTable().entries[poa.id], FIELD_TYPE);
		if (!metaIcon) {
		var poaType = getElemFieldVal(this.getTable().entries[poa], FIELD_TYPE);
		if (poaType === ELEMENT_TYPE_POA_CELL) {
		innerHTML = '4G';
		}
		iconText.innerHTML = innerHTML;
		}
		iconTextDiv.innerHTML = innerHTML;
		}

		setComputeIcon(icon) {
		icon.className = 'custom-marker-icon ion ion-android-cloud';
		icon.innerHTML = '';
		setComputeIcon(iconDiv, compute) {
		var metaIcon = getElemFieldVal(this.getTable().entries[compute], FIELD_META_DISPLAY_MAP_ICON);
		var icon = metaIcon ? metaIcon : COMPUTE_ICON;
		iconDiv.className = 'custom-marker-icon ion ' + icon;
		iconDiv.innerHTML = '';
		}

		// Set styles
		setUeMarkerStyle(marker) {
		if (marker._icon) {
		// // Set marker border color
		@@ -482,8 +500,8 @@ class IDCMap extends Component {
		// markerStyle['border-color'] = color.darken(10);

		// Set marker icon
		var icon = marker._icon.querySelector('.custom-marker-icon');
		this.setUeIcon(icon, marker.options.meep.ue);
		var iconDiv = marker._icon.querySelector('.custom-marker-icon');
		this.setUeIcon(iconDiv, marker.options.meep.ue.id);
		}
		}

		@@ -499,12 +517,9 @@ class IDCMap extends Component {
		marker.options.meep.poa.range.setStyle({color: color});

		// Set marker icon
		var icon = marker._icon.querySelector('.custom-marker-icon');
		this.setPoaIcon(icon, marker.options.meep.poa);

		// Set marker icon text
		var iconText = marker._icon.querySelector('.custom-marker-icon-text');
		this.setPoaIconText(iconText, marker.options.meep.poa);
		var iconDiv = marker._icon.querySelector('.custom-marker-icon');
		var iconTextDiv = marker._icon.querySelector('.custom-marker-icon-text');
		this.setPoaIcon(iconDiv, iconTextDiv, marker.options.meep.poa.id);
		}
		}

		@@ -517,8 +532,8 @@ class IDCMap extends Component {
		markerStyle['border-color'] = color.darken(10);

		// Set marker icon
		var icon = marker._icon.querySelector('.custom-marker-icon');
		this.setComputeIcon(icon);
		var iconDiv = marker._icon.querySelector('.custom-marker-icon');
		this.setComputeIcon(iconDiv, marker.options.meep.compute.id);
		}
		}

		@@ -529,11 +544,15 @@ class IDCMap extends Component {
		// UE Marker Event Handler
		updateUePopup(marker) {
		var latlng = marker.getLatLng();
		var poa = this.getUePoa(marker.options.meep.ue.id);
		var poaType = getElemFieldVal(this.getTable().entries[poa], FIELD_TYPE);
		var hasPath = (marker.options.meep.ue.path) ? true : false;
		var msg = '<b>id: ' + marker.options.meep.ue.id + '</b><br>';
		msg += 'path-mode: ' + (hasPath ? marker.options.meep.ue.eopMode : 'none' ) + '<br>';
		msg += 'velocity: ' + (hasPath ? marker.options.meep.ue.velocity : '0') + ' m/s<br>';
		msg += 'poa: ' + this.getUePoa(marker.options.meep.ue.id) + '<br>';
		msg += 'poa: ' + poa + '<br>';
		if (poaType === ELEMENT_TYPE_POA_CELL) {
		msg += 'cell: ' + getElemFieldVal(this.getTable().entries[poa], FIELD_CELL_ID) + '<br>';
		}
		msg += 'zone: ' + this.getUeZone(marker.options.meep.ue.id) + '<br>';
		msg += 'location: ' + this.getLocationStr(latlng);
		marker.getPopup().setContent(msg);
		@@ -542,8 +561,12 @@ class IDCMap extends Component {
		// POA Marker Event Handler
		updatePoaPopup(marker) {
		var latlng = marker.getLatLng();
		var poaType = getElemFieldVal(this.getTable().entries[marker.options.meep.poa.id], FIELD_TYPE);
		var msg = '<b>id: ' + marker.options.meep.poa.id + '</b><br>';
		msg += 'radius: ' + marker.options.meep.poa.range.options.radius + ' m<br>';
		if (poaType === ELEMENT_TYPE_POA_CELL) {
		msg += 'cell: ' + getElemFieldVal(this.getTable().entries[marker.options.meep.poa.id], FIELD_CELL_ID) + '<br>';
		}
		msg += 'zone: ' + this.getPoaZone(marker.options.meep.poa.id) + '<br>';
		msg += 'location: ' + this.getLocationStr(latlng);
		marker.getPopup().setContent(msg);
		@@ -1163,7 +1186,9 @@ const mapStateToProps = state => {
		mapCfg: state.ui.mapCfg,
		cfgTable: state.cfg.table,
		execTable: state.exec.table,
		configuredElement: state.cfg.elementConfiguration.configuredElement
		configuredElement: state.cfg.elementConfiguration.configuredElement,
		cfgView: state.ui.cfgView,
		cfgScenarioName: state.cfg.scenario.name
		};
		};

js-apps/meep-frontend/src/js/util/elem-utils.js

+5 −0

Original line number	Diff line number	Diff line
		@@ -111,6 +111,9 @@ export const FIELD_APP_LATENCY_VAR = 'appLatencyVariation';
		export const FIELD_APP_THROUGHPUT_DL = 'appThroughput_Dl';
		export const FIELD_APP_THROUGHPUT_UL = 'appThroughput_Ul';
		export const FIELD_APP_PKT_LOSS = 'appPacketLoss';
		export const FIELD_META_DISPLAY_MAP_COLOR = 'metaDisplayMapColor';
		export const FIELD_META_DISPLAY_MAP_ICON = 'metaDisplayMapIcon';


		export const getElemFieldVal = (elem, field) => {
		return (elem && elem[field]) ? elem[field].val : null;
		@@ -195,6 +198,8 @@ export const createElem = name => {
		setElemFieldVal(elem, FIELD_APP_THROUGHPUT_DL, DEFAULT_THROUGHPUT_DL_APP);
		setElemFieldVal(elem, FIELD_APP_THROUGHPUT_UL, DEFAULT_THROUGHPUT_UL_APP);
		setElemFieldVal(elem, FIELD_APP_PKT_LOSS, DEFAULT_PACKET_LOSS_APP);
		setElemFieldVal(elem, FIELD_META_DISPLAY_MAP_COLOR, '');
		setElemFieldVal(elem, FIELD_META_DISPLAY_MAP_ICON, '');

		return elem;
		};

js-apps/meep-frontend/src/js/util/meta-keys.js

0 → 100644

+22 −0

Original line number	Diff line number	Diff line
		/*
		* Copyright (c) 2020 InterDigital Communications, Inc
		*
		* Licensed under the Apache License, Version 2.0 (the "License");
		* you may not use this file except in compliance with the License.
		* You may obtain a copy of the License at
		*
		* http://www.apache.org/licenses/LICENSE-2.0
		*
		* Unless required by applicable law or agreed to in writing, software
		* distributed under the License is distributed on an "AS IS" BASIS,
		* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
		* See the License for the specific language governing permissions and
		* limitations under the License.
		*/

		const META_DISPLAY = 'display';

		// Map Display Settings
		const META_DISPLAY_MAP = META_DISPLAY + '.map';
		export const META_DISPLAY_MAP_COLOR = META_DISPLAY_MAP + '.color';
		export const META_DISPLAY_MAP_ICON = META_DISPLAY_MAP + '.icon';

js-apps/meep-frontend/src/js/util/scenario-utils.js

+16 −1

Original line number	Diff line number	Diff line
		@@ -82,6 +82,8 @@ import {
		FIELD_APP_THROUGHPUT_DL,
		FIELD_APP_THROUGHPUT_UL,
		FIELD_APP_PKT_LOSS,
		FIELD_META_DISPLAY_MAP_COLOR,
		FIELD_META_DISPLAY_MAP_ICON,
		createElem,
		getElemFieldVal,
		setElemFieldVal,
		@@ -163,6 +165,11 @@ import {
		TYPE_PROCESS
		} from '../meep-constants';

		import {
		META_DISPLAY_MAP_COLOR,
		META_DISPLAY_MAP_ICON
		} from './meta-keys';

		// Import images used in JS
		import * as poaImage from '../../img/tower-02-idcc.svg';
		import * as edgeImage from '../../img/edge-idcc.svg';
		@@ -1277,6 +1284,9 @@ export function getElementFromScenario(scenario, elementId) {
		setElemFieldVal(elem, FIELD_INTRA_ZONE_THROUGHPUT_UL, zone.netChar.throughputUl \|\| DEFAULT_THROUGHPUT_UL_INTRA_ZONE);
		setElemFieldVal(elem, FIELD_INTRA_ZONE_PKT_LOSS, zone.netChar.packetLoss \|\| 0);
		}
		if (zone.meta) {
		setElemFieldVal(elem, FIELD_META_DISPLAY_MAP_COLOR, zone.meta[META_DISPLAY_MAP_COLOR]);
		}
		return elem;
		}

		@@ -1314,6 +1324,9 @@ export function getElementFromScenario(scenario, elementId) {
		}
		setElemFieldVal(elem, FIELD_GEO_RADIUS, nl.geoData.radius \|\| '');
		}
		if (nl.meta) {
		setElemFieldVal(elem, FIELD_META_DISPLAY_MAP_ICON, nl.meta[META_DISPLAY_MAP_ICON]);
		}
		return elem;
		}

		@@ -1362,7 +1375,9 @@ export function getElementFromScenario(scenario, elementId) {
		setElemFieldVal(elem, FIELD_GEO_EOP_MODE, pl.geoData.eopMode \|\| '');
		setElemFieldVal(elem, FIELD_GEO_VELOCITY, pl.geoData.velocity \|\| '');
		}

		if (pl.meta) {
		setElemFieldVal(elem, FIELD_META_DISPLAY_MAP_ICON, pl.meta[META_DISPLAY_MAP_ICON]);
		}
		return elem;
		}