Remove unused depencies (vis, modern-normalize, prop-types, geolib) and unused code (map ruler / labels) (#1026)

Author: andrewkfiedler

ui-frontend/packages/catalog-ui-search/package.json

@@ -101,7 +101,6 @@
     "focus-visible": "5.1.0",
     "font-awesome": "4.7",
     "geo-convex-hull": "1.2.0",
-    "geolib": "^3.2.1",
     "geospatialdraw": "0.4.17",
     "golden-layout": "1.5.9",
     "immer.1.5.0": "https://registry.npmjs.org/immer/-/immer-1.5.0.tgz",
@@ -111,15 +110,13 @@
     "lodash.debounce": "4.0.8",
     "lodash.get": "4.4.2",
     "lodash.isequalwith": "4.4.0",
-    "modern-normalize": "1.1.0",
     "moment": "2.30.1",
     "moment-timezone": "0.5.46",
     "mt-geo": "1.0.1",
     "ol": "10.2.1",
     "plotly.js": "2.35.3",
     "polished": "4.3.1",
     "postcss-focus-visible": "8.0.2",
-    "prop-types": "15.7.2",
     "query-string": "6.13.1",
     "re-resizable": "6.1.0",
     "react": "18.3.1",
@@ -141,7 +138,6 @@
     "use-resize-observer": "6.1.0",
     "usng.js": "0.4.5",
     "uuid": "9.0.0",
-    "vis": "4.15.0",
     "wkx": "0.4.5"
   },
   "resolutions": {

ui-frontend/packages/catalog-ui-search/src/main/webapp/component/visualization/maps/cesium/map.cesium.ts

@@ -31,9 +31,6 @@ import { StartupDataStore } from '../../../../js/model/Startup/startup'
 const defaultColor = '#3c6dd5'
 const eyeOffset = new Cesium.Cartesian3(0, 0, 0)
 const pixelOffset = new Cesium.Cartesian2(0.0, 0)
-const rulerColor = new Cesium.Color(0.31, 0.43, 0.52)
-const rulerPointColor = '#506f85'
-const rulerLineHeight = 0
 Cesium.BingMapsApi.defaultKey = StartupDataStore.Configuration.getBingKey() || 0
 const imageryProviderTypes = CesiumImageryProviderTypes
 function setupTerrainProvider(viewer: any, terrainProvider: any) {
@@ -192,7 +189,6 @@ export default function CesiumMap(
   const drawHelper = new (DrawHelper as any)(map)
   map.drawHelper = drawHelper
   const billboardCollection = setupBillboardCollection()
-  const labelCollection = setupLabelCollection()
   setupTooltip(map, selectionInterface)
   function updateCoordinatesTooltip(position: any) {
     const cartesian = map.camera.pickEllipsoid(
@@ -225,74 +221,6 @@ export default function CesiumMap(
     map.scene.primitives.add(billboardCollection)
     return billboardCollection
   }
-  function setupLabelCollection() {
-    const labelCollection = new Cesium.LabelCollection()
-    map.scene.primitives.add(labelCollection)
-    return labelCollection
-  }
-  /*
-   * Returns a visible label that is in the same location as the provided label (geometryInstance) if one exists.
-   * If findSelected is true, the function will also check for hidden labels in the same location but are selected.
-   */
-  function findOverlappingLabel(findSelected: any, geometry: any) {
-    return _.find(
-      mapModel.get('labels'),
-      (label) =>
-        label.position.x === geometry.position.x &&
-        label.position.y === geometry.position.y &&
-        ((findSelected && label.isSelected) || label.show)
-    )
-  }
-  /*
-        Only shows one label if there are multiple labels in the same location.
-
-        Show the label in the following importance:
-          - it is selected and the existing label is not
-          - there is no other label displayed at the same location
-          - it is the label that was found by findOverlappingLabel
-
-        Arguments are:
-          - the label to show/hide
-          - if the label is selected
-          - if the search for overlapping label should include hidden selected labels
-        */
-  function showHideLabel({ geometry, findSelected = false }: any) {
-    const isSelected = geometry.isSelected
-    const labelWithSamePosition = findOverlappingLabel(findSelected, geometry)
-    if (
-      isSelected &&
-      labelWithSamePosition &&
-      !labelWithSamePosition.isSelected
-    ) {
-      labelWithSamePosition.show = false
-    }
-    const otherLabelNotSelected = labelWithSamePosition
-      ? !labelWithSamePosition.isSelected
-      : true
-    geometry.show =
-      (isSelected && otherLabelNotSelected) ||
-      !labelWithSamePosition ||
-      geometry.id === labelWithSamePosition.id
-  }
-  /*
-        Shows a hidden label. Used when deleting a label that is shown.
-        */
-  function showHiddenLabel(geometry: any) {
-    if (!geometry.show) {
-      return
-    }
-    const hiddenLabel = _.find(
-      mapModel.get('labels'),
-      (label) =>
-        label.position.x === geometry.position.x &&
-        label.position.y === geometry.position.y &&
-        label.id !== geometry.id &&
-        !label.show
-    )
-    if (hiddenLabel) {
-      hiddenLabel.show = true
-    }
-  }
 
   const minimumHeightAboveTerrain = 2
   const exposedMethods = {
@@ -713,81 +641,6 @@ export default function CesiumMap(
         }
       })
     },
-    /*
-     * Draws a marker on the map designating a start/end point for the ruler measurement. The given
-     * coordinates should be an object with 'lat' and 'lon' keys with degrees values. The given
-     * marker label should be a single character or digit that is displayed on the map marker.
-     */
-    addRulerPoint(coordinates: any) {
-      const { lat, lon } = coordinates
-      // a point requires an altitude value so just use 0
-      const point = [lon, lat, 0]
-      const options = {
-        id: ' ',
-        title: `Selected ruler coordinate`,
-        image: DrawingUtility.getCircle({
-          fillColor: rulerPointColor,
-          icon: null,
-        }),
-        view: this,
-      }
-      return this.addPoint(point, options)
-    },
-    /*
-     * Removes the given Billboard from the map.
-     */
-    removeRulerPoint(billboardRef: any) {
-      billboardCollection.remove(billboardRef)
-      map.scene.requestRender()
-    },
-    /*
-     * Draws a line on the map between the points in the given array of points.
-     */
-    addRulerLine(point: any) {
-      let startingCoordinates = mapModel.get('startingCoordinates')
-      // creates an array of Cartesian3 points
-      // a PolylineGeometry allows the line to follow the curvature of the surface
-      map.coordArray = [
-        startingCoordinates['lon'],
-        startingCoordinates['lat'],
-        rulerLineHeight,
-        point['lon'],
-        point['lat'],
-        rulerLineHeight,
-      ]
-      return map.entities.add({
-        polyline: {
-          positions: new Cesium.CallbackProperty(function () {
-            return Cesium.Cartesian3.fromDegreesArrayHeights(map.coordArray)
-          }, false),
-          width: 5,
-          show: true,
-          material: rulerColor,
-        },
-      })
-    },
-    /*
-     * Update the position of the ruler line
-     */
-    setRulerLine(point: any) {
-      let startingCoordinates = mapModel.get('startingCoordinates')
-      map.coordArray = [
-        startingCoordinates['lon'],
-        startingCoordinates['lat'],
-        rulerLineHeight,
-        point['lon'],
-        point['lat'],
-        rulerLineHeight,
-      ]
-      map.scene.requestRender()
-    },
-    /*
-     * Removes the given polyline entity from the map.
-     */
-    removeRulerLine(polyline: any) {
-      map.entities.remove(polyline)
-      map.scene.requestRender()
-    },
     /*
                 Adds a billboard point utilizing the passed in point and options.
                 Options are a view to relate to, and an id, and a color.
@@ -914,41 +767,6 @@ export default function CesiumMap(
       map.scene.requestRender()
       return billboardRef
     },
-    /*
-              Adds a label utilizing the passed in point and options.
-              Options are a view to an id and text.
-            */
-    addLabel(point: any, options: any) {
-      const pointObject = convertPointCoordinate(point)
-      const cartographicPosition = Cesium.Cartographic.fromDegrees(
-        pointObject.longitude,
-        pointObject.latitude,
-        pointObject.altitude
-      )
-      const cartesianPosition =
-        map.scene.globe.ellipsoid.cartographicToCartesian(cartographicPosition)
-      // X, Y offset values for the label
-      const offset = new Cesium.Cartesian2(20, -15)
-      // Cesium measurement for determining how to render the size of the label based on zoom
-      const scaleZoom = new Cesium.NearFarScalar(1.5e4, 1.0, 8.0e6, 0.0)
-      // Cesium measurement for determining how to render the translucency of the label based on zoom
-      const translucencyZoom = new Cesium.NearFarScalar(1.5e6, 1.0, 8.0e6, 0.0)
-      const labelRef = labelCollection.add({
-        text: options.text,
-        position: cartesianPosition,
-        id: options.id,
-        pixelOffset: offset,
-        scale: 1.0,
-        scaleByDistance: scaleZoom,
-        translucencyByDistance: translucencyZoom,
-        fillColor: Cesium.Color.BLACK,
-        outlineColor: Cesium.Color.WHITE,
-        outlineWidth: 10,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-      })
-      mapModel.addLabel(labelRef)
-      return labelRef
-    },
     /*
               Adds a polyline utilizing the passed in line and options.
               Options are a view to relate to, and an id, and a color.
@@ -1136,11 +954,6 @@ export default function CesiumMap(
           0,
           options.isSelected ? -1 : 0
         )
-      } else if (geometry.constructor === Cesium.Label) {
-        geometry.isSelected = options.isSelected
-        showHideLabel({
-          geometry,
-        })
       } else if (geometry.constructor === Cesium.PolylineCollection) {
         geometry._polylines.forEach((polyline: any) => {
           polyline.material = options.isSelected
@@ -1158,10 +971,7 @@ export default function CesiumMap(
              Updates a passed in geometry to be hidden
              */
     hideGeometry(geometry: any) {
-      if (
-        geometry.constructor === Cesium.Billboard ||
-        geometry.constructor === Cesium.Label
-      ) {
+      if (geometry.constructor === Cesium.Billboard) {
         geometry.show = false
       } else if (geometry.constructor === Cesium.PolylineCollection) {
         geometry._polylines.forEach((polyline: any) => {
@@ -1175,11 +985,6 @@ export default function CesiumMap(
     showGeometry(geometry: any) {
       if (geometry.constructor === Cesium.Billboard) {
         geometry.show = true
-      } else if (geometry.constructor === Cesium.Label) {
-        showHideLabel({
-          geometry,
-          findSelected: true,
-        })
       } else if (geometry.constructor === Cesium.PolylineCollection) {
         geometry._polylines.forEach((polyline: any) => {
           polyline.show = true
@@ -1189,16 +994,11 @@ export default function CesiumMap(
     },
     removeGeometry(geometry: any) {
       billboardCollection.remove(geometry)
-      labelCollection.remove(geometry)
       map.scene.primitives.remove(geometry)
       //unminified cesium chokes if you feed a geometry with id as an Array
       if (geometry.constructor === Cesium.Entity) {
         map.entities.remove(geometry)
       }
-      if (geometry.constructor === Cesium.Label) {
-        mapModel.removeLabel(geometry)
-        showHiddenLabel(geometry)
-      }
       map.scene.requestRender()
     },
     destroyShapes() {

ui-frontend/packages/catalog-ui-search/src/main/webapp/component/visualization/maps/map.model.ts

@@ -37,96 +37,6 @@ export default Backbone.AssociatedModel.extend({
     },
     target: undefined,
     targetMetacard: undefined,
-    measurementState: 'NONE',
-    currentDistance: 0,
-    points: [],
-    labels: [],
-    line: undefined,
-    distanceInfo: {
-      left: 0,
-      top: 0,
-    },
-    startingCoordinates: undefined,
-  },
-  /*
-   * Sets the measurement state to the given new state.
-   * Valid measurement states are:
-   *   - NONE
-   *   - START
-   *   - END
-   */
-  changeMeasurementState(state: any) {
-    // the current distance should be 0 when in the NONE or START state
-    if (state === 'NONE' || state === 'START') {
-      this.set({
-        measurementState: state,
-        currentDistance: 0,
-      })
-    } else {
-      this.set({ measurementState: state })
-    }
-  },
-  /*
-   * Appends the given point to the array of points being tracked.
-   */
-  addPoint(point: any) {
-    this.set({
-      points: [...this.get('points'), point],
-    })
-  },
-  addLabel(label: any) {
-    this.set({
-      labels: [...this.get('labels'), label],
-    })
-  },
-  removeLabel(label: any) {
-    _.remove(this.get('labels'), (e) => e === label)
-  },
-  /*
-   * Sets the line to the given new line. This represents the line on the map
-   * being used for the ruler measurement.
-   */
-  setLine(line: any) {
-    this.set({ line })
-  },
-  /*
-   * Resets the model's line and returns the old one.
-   */
-  removeLine() {
-    const line = this.get('line')
-    this.set({ line: undefined })
-
-    return line
-  },
-  /*
-   * Resets the model's array of points.
-   */
-  clearPoints() {
-    this.set({ points: [] })
-  },
-  /*
-   * Set coordinates of the ruler measurements starting point
-   */
-  setStartingCoordinates(coordinates: any) {
-    this.set({ startingCoordinates: coordinates })
-  },
-  /*
-   * Sets the current distance to the new given distance (in meters).
-   */
-  setCurrentDistance(distance: any) {
-    this.set({ currentDistance: distance })
-  },
-  addDistanceInfo(distanceInfo: any) {
-    this.set({ distanceInfo })
-  },
-  /*
-   * set the position of DistanceInfo in px relative to the top left of the Cesium component
-   */
-  setDistanceInfoPosition(left: any, top: any) {
-    this.set({ distanceInfo: { left, top } })
-  },
-  isOffMap() {
-    return this.get('mouseLat') === undefined
   },
   clearMouseCoordinates() {
     this.set({