Commit 4f041623 authored by Mudassar Khan's avatar Mudassar Khan
Browse files

fix(frontend): fix multiple map view bugs in CFG configurator 

- Use element UUID (not name) as marker id so table lookups work correctly
- Only create markers for elements that have a real geo location
- Prevent stale configuredElement UUID from dimming all map markers
- Add cfgTable to shouldComponentUpdate to keep zone colors in sync
- Add console.log debug statements for easier diagnostics
parent bf6211a0

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

+43 −21
Original line number Diff line number Diff line
@@ -167,22 +167,32 @@ class IDCMap extends Component { 
    if (this.props.type === TYPE_CFG) {

      // Target element update

      if (nextProps.configuredElement !== this.props.configuredElement) {

        console.log('[IDCMap] shouldComponentUpdate: configuredElement changed', nextProps.configuredElement);

        return true;

      }

      // Scenario change

      if (nextProps.cfgScenarioName !== this.props.cfgScenarioName) {

        console.log('[IDCMap] shouldComponentUpdate: cfgScenarioName changed', nextProps.cfgScenarioName);

        return true;

      }

      // Scenario content change

      if (!deepEqual(nextProps.cfgScenario, this.props.cfgScenario)) {

        console.log('[IDCMap] shouldComponentUpdate: cfgScenario content changed');

        return true;

      }

      // Table change (needed for zone color lookups)

      if (!deepEqual(nextProps.cfgTable, this.props.cfgTable)) {

        console.log('[IDCMap] shouldComponentUpdate: cfgTable changed');

        return true;

      }

      // Sandbox update

      if (nextProps.cfgView !== this.props.cfgView) {

        console.log('[IDCMap] shouldComponentUpdate: cfgView changed', nextProps.cfgView);

        return true;

      }

      // Map asset change

      if (!deepEqual(this.getMap(nextProps), this.getMap(this.props))) {

        console.log('[IDCMap] shouldComponentUpdate: map data changed');

        return true;

      }

      return false;
@@ -222,32 +232,32 @@ class IDCMap extends Component { 
            zone.networkLocations.forEach(nl => {

              if (nl.physicalLocations) {

                nl.physicalLocations.forEach(pl => {

                  if (pl.type === 'UE') {

                  if (pl.type === 'UE' && pl.geoData && pl.geoData.location) {

                    map.ueList.push({

                      assetName: pl.name,

                      id: (this.props.type === TYPE_CFG) ? pl.name : (pl.id || pl.name),

                      radius: pl.geoData ? pl.geoData.radius : 0,

                      location: pl.geoData && pl.geoData.location ? pl.geoData.location : {type: 'Point', coordinates: [0,0]},

                      path: pl.geoData && pl.geoData.path ? pl.geoData.path : null,

                      eopMode: pl.geoData ? pl.geoData.eopMode : null,

                      velocity: pl.geoData ? pl.geoData.velocity : null

                      id: pl.id || pl.name,

                      radius: pl.geoData.radius || 0,

                      location: pl.geoData.location,

                      path: pl.geoData.path || null,

                      eopMode: pl.geoData.eopMode || null,

                      velocity: pl.geoData.velocity || null

                    });

                  } else if (pl.type === 'FOG' || pl.type === 'EDGE' || pl.type === 'DC') {

                  } else if ((pl.type === 'FOG' || pl.type === 'EDGE' || pl.type === 'DC') && pl.geoData && pl.geoData.location) {

                    map.computeList.push({

                      assetName: pl.name,

                      id: (this.props.type === TYPE_CFG) ? pl.name : (pl.id || pl.name),

                      location: pl.geoData && pl.geoData.location ? pl.geoData.location : {type: 'Point', coordinates: [0,0]}

                      id: pl.id || pl.name,

                      location: pl.geoData.location

                    });

                  }

                });

              }

              // For POA

              if (nl.type === 'POA' || nl.type === 'POA-4G' || nl.type === 'POA-5G' || nl.type === 'POA-WIFI') {

              if ((nl.type === 'POA' || nl.type === 'POA-4G' || nl.type === 'POA-5G' || nl.type === 'POA-WIFI') && nl.geoData && nl.geoData.location) {

                map.poaList.push({

                  assetName: nl.name,

                  id: (this.props.type === TYPE_CFG) ? nl.name : (nl.id || nl.name),

                  location: nl.geoData && nl.geoData.location ? nl.geoData.location : {type: 'Point', coordinates: [0,0]},

                  radius: nl.geoData ? nl.geoData.radius : 0

                  id: nl.id || nl.name,

                  location: nl.geoData.location,

                  radius: nl.geoData.radius || 0

                });

              }

            });
@@ -1174,6 +1184,7 @@ class IDCMap extends Component { 
    var map;

    if (this.props.type === TYPE_CFG) {

      map = this.buildMapFromScenario(this.props.cfgScenario);

      console.log('[IDCMap] updateMarkers (CFG): ues=', map.ueList.length, 'poas=', map.poaList.length, 'computes=', map.computeList.length);

    } else {

      map = deepCopy(this.getMap(this.props));

    }
@@ -1192,7 +1203,7 @@ class IDCMap extends Component { 
      for (let i = 0; i < map.computeList.length; i++) {

        let compute = map.computeList[i];

        this.setComputeMarker(compute);

        computeMap[compute.assetName] = true;

        computeMap[compute.id || compute.assetName] = true;

      }

    }
@@ -1209,7 +1220,7 @@ class IDCMap extends Component { 
      for (let i = 0; i < map.poaList.length; i++) {

        let poa = map.poaList[i];

        this.setPoaMarker(poa);

        poaMap[poa.assetName] = true;

        poaMap[poa.id || poa.assetName] = true;

      }

    }
@@ -1227,7 +1238,7 @@ class IDCMap extends Component { 
      for (let i = 0; i < map.ueList.length; i++) {

        let ue = map.ueList[i];

        this.setUeMarker(ue);

        ueMap[ue.assetName] = true;

        ueMap[ue.id || ue.assetName] = true;

      }

    }
@@ -1335,6 +1346,7 @@ class IDCMap extends Component { 


  setTarget(target) {

    // Disable changes on all markers except target

    console.log('[IDCMap] setTarget:', target);

    var isDragModeEnabled = this.map.pm.globalDragModeEnabled();

    

    this.ueOverlay.eachLayer((marker) => {
@@ -1398,10 +1410,15 @@ class IDCMap extends Component { 


    // Update target element name & reset controls on target change

    var targetElemId = this.props.configuredElement ? this.props.configuredElement.id : null;

    console.log('[IDCMap] updateEditControls: targetElemId =', targetElemId);



    // Determine which controls to enable

    // Only look up a marker if we have a target id; treat a stale/unmatched id the

    // same as "no target" so all markers remain interactive instead of being dimmed.

    var markerInfo = targetElemId ? this.getMarkerInfo(targetElemId) : null;

    var markerTarget = (markerInfo && markerInfo.marker) ? targetElemId : null;



    if (targetElemId) {

      var markerInfo = this.getMarkerInfo(targetElemId);

      if (markerInfo && markerInfo.marker) {

        // Enable path create/edit for UE only

        if (markerInfo.type === TYPE_UE) {
@@ -1411,10 +1428,12 @@ class IDCMap extends Component { 
          editModeEnabled = true;

        }

        dragModeEnabled = true;

        console.log('[IDCMap] updateEditControls: found marker for target, dragMode =', dragModeEnabled);

        // removalModeEnabled = true;

      } else {

        // Enable marker creation

        // Element is configured but has no map marker yet — enable placement

        drawMarkerEnabled = true;

        console.log('[IDCMap] updateEditControls: no marker for target (unplaced/stale elem), drawMarker enabled');

      }

    }
@@ -1445,8 +1464,11 @@ class IDCMap extends Component { 
      }

    }



    // Set target element & disable edit on all other markers

    this.setTarget(targetElemId);

    // Only focus (dim others) when the configured element actually has a marker on

    // the map.  If it doesn't (element not yet placed, or stale id from a previous

    // scenario), pass null so all markers remain fully interactive.

    console.log('[IDCMap] updateEditControls: setTarget with', markerTarget);

    this.setTarget(markerTarget);

  }



  render() {