map view fixes in exec tab (5531082d) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

js-apps/meep-frontend/package-lock.json

+670 −29

File changed.

Preview size limit exceeded, changes collapsed.

js-apps/meep-frontend/package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -45,6 +45,7 @@
		"d3": "^5.9.7",
		"d3-force": "^2.0.1",
		"d3-hierarchy": "^1.1.8",
		"deep-equal": "2.0.3",
		"jquery": "3.3.1",
		"leaflet": "1.6.0",
		"lodash": "^4.17.11",

js-apps/meep-frontend/src/js/components/dialogs/id-dialog.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -28,6 +28,7 @@ import {
		const IDDialog = props => {
		return (
		<Dialog
		style={{zIndex: 1000}}
		open={props.open}
		onClose={() => {
		props.onClose();

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

+168 −26

Original line number	Diff line number	Diff line
		@@ -14,14 +14,13 @@
		* limitations under the License.
		*/

		import _ from 'lodash';
		import { connect } from 'react-redux';
		import React, { Component, createRef } from 'react';
		import ReactDOM from 'react-dom';
		import L from 'leaflet';
		import 'mapbox-gl';
		import 'mapbox-gl-leaflet';
		import { updateObject } from '../util/object-util';
		import deepEqual from 'deep-equal';
		import {
		execChangeMap
		} from '../state/exec';
		@@ -35,19 +34,17 @@ class IDCMap extends Component {
		}

		componentDidMount() {

		// Get Map div instance
		// Create Map instance
		var domNode = ReactDOM.findDOMNode(this);
		var map = L.map(domNode, {
		this.map = L.map(domNode, {
		center: [43.73752,7.42892],
		zoom: 15,
		minZoom: 15,
		maxZoom: 18,
		drawControl: true
		});
		console.log(map);

		// Creating GL Baselayers
		// Create GL Baselayers
		var positronBaselayer = L.mapboxGL({style: 'http://10.3.16.105:30080/styles/positron/style.json'});
		var darkBaselayer = L.mapboxGL({style: 'http://10.3.16.105:30080/styles/dark-matter/style.json'});
		var klokBaselayer = L.mapboxGL({style: 'http://10.3.16.105:30080/styles/klokantech-basic/style.json'});
		@@ -59,33 +56,178 @@ class IDCMap extends Component {
		'OSM Bright': osmBaselayer
		};

		// Layer management
		var markerOverlay = L.layerGroup();
		var movingOverlay = L.layerGroup();
		var circleOverlay = L.layerGroup();
		// Create Layer Group Overlays
		this.ueOverlay = L.layerGroup();
		this.poaOverlay = L.layerGroup();
		this.poaRangeOverlay = L.layerGroup();
		this.computeOverlay = L.layerGroup();
		var overlays = {
		'marker-PoC': markerOverlay,
		'circle-PoC': circleOverlay,
		'moving-PoC': movingOverlay
		'UE': this.ueOverlay,
		'POA': this.poaOverlay,
		'POA Range': this.poaRangeOverlay,
		'Compute': this.computeOverlay
		};

		// Layer Controls
		var layerCtrl = L.control.layers(baselayers, overlays);
		// Create Layer Controller
		this.layerCtrl = L.control.layers(baselayers, overlays);

		// Create popup
		this.popup = L.popup();

		// Initialize map & layers
		layerCtrl.addTo(map);
		markerOverlay.addTo(map); // this to have markers checked by default
		positronBaselayer.addTo(map); // this to select default baselayer
		// movingMarker.addTo(movingOverlay);
		// map.on('click', HandleClickMap);
		this.layerCtrl.addTo(this.map);
		this.ueOverlay.addTo(this.map);
		this.poaOverlay.addTo(this.map);
		this.poaRangeOverlay.addTo(this.map);
		this.computeOverlay.addTo(this.map);

		// Set default base layer
		positronBaselayer.addTo(this.map);
		}

		setPoaMarker(poa) {
		var latlng = L.latLng(L.GeoJSON.coordsToLatLng(poa.location.coordinates));

		// Find existing POA marker
		var existingMarker;
		this.poaOverlay.eachLayer((marker) => {
		if (marker.options.myId === poa.assetName){
		existingMarker = marker;
		return;
		}
		});

		if (existingMarker === undefined) {
		// Create new POA marker & circle
		var c = L.circle(latlng, {
		myId: poa.assetName,
		radius: poa.radius,
		opacity: '0.5'
		});
		var m = L.marker(latlng, {
		myId: poa.assetName,
		myCircle: c,
		title: poa.assetName,
		opacity: '0.5',
		draggable: true
		});

		// Click handler
		var _this = this;
		m.on('click', function(e) {_this.clickPoaMarker(this,e);});

		// Add to map overlay
		m.addTo(this.poaOverlay);
		c.addTo(this.poaRangeOverlay);
		// console.log('PoA ' + id + ' added @ ' + latlng.toString());
		} else {
		// Update POA position
		existingMarker.setLatLng(latlng);
		existingMarker.options.myCircle.setLatLng(latlng);
		}
		}

		setUeMarker(ue) {
		var latlng = L.latLng(L.GeoJSON.coordsToLatLng(ue.location.coordinates));

		// Find existing UE marker
		var existingMarker;
		this.ueOverlay.eachLayer((marker) => {
		if (marker.options.myId === ue.assetName){
		existingMarker = marker;
		return;
		}
		});

		if (existingMarker === undefined) {
		// Creating new UE marker
		var m = L.marker(latlng, {
		myId: ue.assetName,
		eopMode: ue.eopMode,
		velocity: ue.velocity,
		title: ue.assetName,
		opacity: '0.5',
		draggable: true
		});

		// Click handler
		var _this = this;
		m.on('click', function() {_this.clickUeMarker(this);});

		// Add to map overlay
		m.addTo(this.ueOverlay);
		// console.log('UE ' + id + ' added @ ' + latlng.toString());
		} else {
		// Update UE position
		existingMarker.setLatLng(latlng);
		}
		}

		// POA Marker Event Handler
		clickPoaMarker(marker) {
		var latlng = marker.getLatLng();
		var msg = '<b>POA: ' + marker.options.myId + '</b><br>';
		msg += 'radius: ' + marker.options.myCircle.options.radius + ' m<br>';
		msg += latlng.toString();
		this.showPopup(latlng, msg);
		}

		// UE Marker Event Handler
		clickUeMarker(marker) {
		var latlng = marker.getLatLng();
		var msg = '<b>UE: ' + marker.options.myId + '</b><br>';
		msg += 'eopMode: ' + marker.options.eopMode + '<br>';
		msg += 'velocity: ' + marker.options.velocity + ' m/s<br>';
		msg += latlng.toString();
		this.showPopup(latlng, msg);
		}

		// Show position popup
		showPopup(latlng, msg) {
		// console.log(msg);
		this.popup
		.setLatLng(latlng)
		.setContent(msg)
		.openOn(this.map);
		}

		shouldComponentUpdate(nextProps) {
		// Check for map size update
		let width = this.thisRef.current.offsetWidth;
		let height = this.thisRef.current.offsetHeight;
		if ((width && this.width !== width) \|\| (height && this.height !== height)) {
		this.width = width;
		this.height = height;
		// console.log('Map view resized to: ' + width + 'x' + height);
		this.map.invalidateSize();
		return true;
		}

		// Render if asset list or positions updated
		return !deepEqual(nextProps.execMap, this.props.execMap);
		}

		render() {
		console.log(this.props.execMap.ueList);
		if (this.map) {
		// Set POA markers
		let poaList = this.props.execMap.poaList;
		for (let i = 0; i < poaList.length; i++) {
		this.setPoaMarker(poaList[i]);
		}

		// TODO -- Remove old POA markers

		// Set UE markers
		let ueList = this.props.execMap.ueList;
		for (let i = 0; i < ueList.length; i++) {
		this.setUeMarker(ueList[i]);
		}

		// TODO -- Remove old UE markers
		}

		return (
		<div style={{ height: '100%' }}
		id="map"
		>
		<div ref={this.thisRef} style={{ height: '100%' }}>
		Map Component
		</div>
		);

js-apps/meep-frontend/src/js/containers/meep-container.js

+19 −20

Original line number	Diff line number	Diff line
		@@ -409,23 +409,21 @@ class MeepContainer extends Component {
		* @param {String} response The complete HTTP response.
		*/
		getUeAssetDataCb(error, data) {
		if (error !== null \|\| data.geoDataAssets === null) {
		console.log('Failed to get assets');
		if (error !== null \|\| data.geoDataAssets === undefined) {
		return;
		}

		let ueList = [];
		// // Process UE list
		// let ueList = [];
		// for (let i = 0; i < data.geoDataAssets.length; i++) {
		// let ue = data.geoDataAssets[i];
		// ueList.push(ue.location);
		// }

		// Process UE list
		for (let i = 0; i < data.geoDataAssets.length; i++) {
		let ue = data.geoDataAssets[i];
		ueList.push(ue.location);
		}

		console.log(ueList);
		// console.log(data.geoDataAssets);

		// Update UE list
		this.props.execChangeMapUeList(ueList);
		this.props.execChangeMapUeList(_.sortBy(data.geoDataAssets, ['assetName']));

		// // Store & Process deployed scenario
		// this.setScenario(TYPE_EXEC, data);
		@@ -439,20 +437,21 @@ class MeepContainer extends Component {
		* @param {String} response The complete HTTP response.
		*/
		getPoaAssetDataCb(error, data) {
		if (error !== null \|\| data.geoDataAssets === null) {
		console.log('Failed to get assets');
		if (error !== null \|\| data.geoDataAssets === undefined) {
		return;
		}

		console.log(data.geoDataAssets);
		// // Process POA list
		// let poaList = [];
		// for (let i = 0; i < data.geoDataAssets.length; i++) {
		// let poa = data.geoDataAssets[i];
		// poaList.push(poa.location);
		// }

		// Process POA list
		for (let i = 0; i < data.geoDataAssets.length; i++) {
		let poa = data.geoDataAssets[i];

		}
		// console.log(data.geoDataAssets);

		// Update
		// Update POA list
		this.props.execChangeMapPoaList(_.sortBy(data.geoDataAssets, ['assetName']));

		// // Store & Process deployed scenario
		// this.setScenario(TYPE_EXEC, data);