@corva/ui 3.70.0-5 → 3.70.0-6

package/cjs-bundle/components/BICOffsetPickerDialog/components/Map/Map.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/slicedToArray"),r=require("react"),t=require("react-dom"),u=require("prop-types"),a=require("lodash"),l=require("./Map.css.js"),n=require("../../../../utils/index.js");require("../../../../config/mapboxGl/index.js"),require("mapbox-gl/dist/mapbox-gl.css");var o=require("react/jsx-runtime"),i=require("mapbox-gl");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(e),d=s(t),f=s(u),p=s(i),m=n.mapbox.isValidCoordinates,g=[29.749907,-95.358421],v="wells-highlight",y={type:"FeatureCollection",features:[]},h=function(e){var r=c.default(e,2),t=r[0];return[r[1],t]};function b(e){var t=e.subjectWell,u=e.wells,n=e.offsetWells,i=e.radius,s=e.subjectWellMarkerSize,f=e.wellMarkerSize,b=e.coordsDataPath,w=r.useRef(null),x=r.useRef(null),j=r.useRef(null),S=r.useRef(null),M=r.useRef(),q=r.useState(!1),C=c.default(q,2),D=C[0],F=C[1],P=r.useMemo((function(){return t&&a.get(t,b)}),[t,b]);r.useEffect((function(){x.current=new p.default.Map({container:w.current,style:"mapbox://styles/mapbox/dark-v9",center:h(g),zoom:1,attributionControl:!1,scrollZoom:!1}),x.current.addControl(new p.default.NavigationControl({showCompass:!1}),"bottom-right"),x.current.on("load",(function(){x.current.addSource("radius-circle",{type:"geojson",data:y}),x.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),x.current.addSource("wells",{type:"geojson",data:y}),x.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":["get","opacity"]}}),x.current.addSource(v,{type:"geojson",data:y}),x.current.addLayer({id:v,type:"circle",source:v,paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":.2}}),F(!0)}));var e=x.current;return function(){e.remove(),x.current=null,j.current=null}}),[]),r.useEffect((function(){if(x.current&&D)if(P){var e=function(e,r){for(var t=c.default(e,2),u=t[0],a=t[1],l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,n=[],o=r/(111320*Math.cos(u*Math.PI/180)),i=r/110574,s=0;s<=l;s+=1){var d=s/l*(2*Math.PI);n.push([a+o*Math.cos(d),u+i*Math.sin(d)])}return n}(P,1609.34*i);x.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[e]}})}else x.current.getSource("radius-circle").setData(y)}),[i,P,D]);return r.useEffect((function(){var e;if(x.current&&D){var l=M.current;M.current=u,null===(e=S.current)||void 0===e||e.remove(),x.current.getSource(v).setData(y);var i=n.map((function(e){return e.id})),c=[],g={},w=new p.default.LngLatBounds;u.forEach((function(e){var r=a.get(e,b);if(r&&m(r)){var u=t&&t.id===e.id,l=i.includes(e.id),n=u?s:f,o=u||l?1:.3;g[e.id]=e,w.extend(h(r)),c.push({type:"Feature",geometry:{type:"Point",coordinates:h(r)},properties:{wellId:e.id,radius:n,opacity:o}})}})),x.current.getSource("wells").setData({type:"FeatureCollection",features:c}),j.current=c.length?w:null;var q=x.current,C=null,F=function(e){q.getCanvas().style.cursor="pointer";var t=g[e.features[0].properties.wellId];if(t&&t.id!==C){C=t.id;var u=a.get(t,b),l=document.createElement("div"),n=r.createElement((function(e){var r=e.well;return o.jsx("div",{style:{color:"#fff",background:"##414141"},children:o.jsx("span",{style:{fontSize:"11px",lineHeight:"16px"},children:a.get(r,"name")})})}),{well:t});d.default.render(n,l),S.current||(S.current=new p.default.Popup({closeButton:!1,maxWidth:"none"})),S.current.setLngLat(h(u)).setDOMContent(l).addTo(q),function(e,r){x.current.getSource(v).setData({type:"Feature",geometry:{type:"Point",coordinates:h(e)},properties:{radius:3*r}})}(u,e.features[0].properties.radius)}},P=function(){var e;C=null,q.getCanvas().style.cursor="",q.getSource(v).setData(y),null===(e=S.current)||void 0===e||e.remove()},W=function(e){null!=e&&e.point&&q.queryRenderedFeatures(e.point,{layers:[v]}).length||P()};return q.on("mousemove","wells",F),q.on("mouseleave","wells",W),q.on("mouseleave",v,P),setTimeout((function(){x.current&&j.current&&u!==l&&x.current.fitBounds(j.current)}),500),function(){q.off("mousemove","wells",F),q.off("mouseleave","wells",W),q.off("mouseleave",v,P)}}}),[t,u,n,D]),o.jsx("div",{className:l.map,children:o.jsx("div",{className:l.mapMain,ref:w})})}b.propTypes={subjectWell:f.default.shape({id:f.default.number,formation:f.default.string}),wells:f.default.arrayOf(f.default.shape({})).isRequired,offsetWells:f.default.arrayOf(f.default.shape({})),radius:f.default.number.isRequired,subjectWellMarkerSize:f.default.number,wellMarkerSize:f.default.number,coordsDataPath:f.default.string},b.defaultProps={subjectWell:null,subjectWellMarkerSize:8,wellMarkerSize:5,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var w=r.memo(b);module.exports=w;
+"use strict";var e=require("@babel/runtime/helpers/slicedToArray"),r=require("react"),t=require("react-dom"),u=require("prop-types"),a=require("lodash"),l=require("./Map.css.js"),n=require("../../../../utils/index.js");require("../../../../config/mapboxGl/index.js");var o=require("../../../../config/mapbox/index.js");require("mapbox-gl/dist/mapbox-gl.css");var i=require("react/jsx-runtime"),s=require("mapbox-gl");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(e),f=c(t),p=c(u),m=c(s),g=n.mapbox.isValidCoordinates,v=[29.749907,-95.358421],y="wells-highlight",h={type:"FeatureCollection",features:[]},b=function(e){var r=d.default(e,2),t=r[0];return[r[1],t]};function w(e){var t=e.subjectWell,u=e.wells,n=e.offsetWells,s=e.radius,c=e.subjectWellMarkerSize,p=e.wellMarkerSize,w=e.coordsDataPath,x=r.useRef(null),j=r.useRef(null),S=r.useRef(null),M=r.useRef(null),q=r.useRef(),C=r.useState(!1),D=d.default(C,2),P=D[0],F=D[1],W=r.useMemo((function(){return t&&a.get(t,w)}),[t,w]);r.useEffect((function(){if(o.IS_MAPBOX_ENABLED){j.current=new m.default.Map({container:x.current,style:"mapbox://styles/mapbox/dark-v9",center:b(v),zoom:1,attributionControl:!1,scrollZoom:!1}),j.current.addControl(new m.default.NavigationControl({showCompass:!1}),"bottom-right"),j.current.on("load",(function(){j.current.addSource("radius-circle",{type:"geojson",data:h}),j.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),j.current.addSource("wells",{type:"geojson",data:h}),j.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":["get","opacity"]}}),j.current.addSource(y,{type:"geojson",data:h}),j.current.addLayer({id:y,type:"circle",source:y,paint:{"circle-radius":["get","radius"],"circle-color":"#FFC107","circle-opacity":.2}}),F(!0)}));var e=j.current;return function(){e.remove(),j.current=null,S.current=null}}}),[]),r.useEffect((function(){if(j.current&&P)if(W){var e=function(e,r){for(var t=d.default(e,2),u=t[0],a=t[1],l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,n=[],o=r/(111320*Math.cos(u*Math.PI/180)),i=r/110574,s=0;s<=l;s+=1){var c=s/l*(2*Math.PI);n.push([a+o*Math.cos(c),u+i*Math.sin(c)])}return n}(W,1609.34*s);j.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[e]}})}else j.current.getSource("radius-circle").setData(h)}),[s,W,P]);return r.useEffect((function(){var e;if(j.current&&P){var l=q.current;q.current=u,null===(e=M.current)||void 0===e||e.remove(),j.current.getSource(y).setData(h);var o=n.map((function(e){return e.id})),s=[],d={},v=new m.default.LngLatBounds;u.forEach((function(e){var r=a.get(e,w);if(r&&g(r)){var u=t&&t.id===e.id,l=o.includes(e.id),n=u?c:p,i=u||l?1:.3;d[e.id]=e,v.extend(b(r)),s.push({type:"Feature",geometry:{type:"Point",coordinates:b(r)},properties:{wellId:e.id,radius:n,opacity:i}})}})),j.current.getSource("wells").setData({type:"FeatureCollection",features:s}),S.current=s.length?v:null;var x=j.current,C=null,D=function(e){x.getCanvas().style.cursor="pointer";var t=d[e.features[0].properties.wellId];if(t&&t.id!==C){C=t.id;var u=a.get(t,w),l=document.createElement("div"),n=r.createElement((function(e){var r=e.well;return i.jsx("div",{style:{color:"#fff",background:"##414141"},children:i.jsx("span",{style:{fontSize:"11px",lineHeight:"16px"},children:a.get(r,"name")})})}),{well:t});f.default.render(n,l),M.current||(M.current=new m.default.Popup({closeButton:!1,maxWidth:"none"})),M.current.setLngLat(b(u)).setDOMContent(l).addTo(x),function(e,r){j.current.getSource(y).setData({type:"Feature",geometry:{type:"Point",coordinates:b(e)},properties:{radius:3*r}})}(u,e.features[0].properties.radius)}},F=function(){var e;C=null,x.getCanvas().style.cursor="",x.getSource(y).setData(h),null===(e=M.current)||void 0===e||e.remove()},W=function(e){null!=e&&e.point&&x.queryRenderedFeatures(e.point,{layers:[y]}).length||F()};return x.on("mousemove","wells",D),x.on("mouseleave","wells",W),x.on("mouseleave",y,F),setTimeout((function(){j.current&&S.current&&u!==l&&j.current.fitBounds(S.current)}),500),function(){x.off("mousemove","wells",D),x.off("mouseleave","wells",W),x.off("mouseleave",y,F)}}}),[t,u,n,P]),i.jsx("div",{className:l.map,children:i.jsx("div",{className:l.mapMain,ref:x})})}w.propTypes={subjectWell:p.default.shape({id:p.default.number,formation:p.default.string}),wells:p.default.arrayOf(p.default.shape({})).isRequired,offsetWells:p.default.arrayOf(p.default.shape({})),radius:p.default.number.isRequired,subjectWellMarkerSize:p.default.number,wellMarkerSize:p.default.number,coordsDataPath:p.default.string},w.defaultProps={subjectWell:null,subjectWellMarkerSize:8,wellMarkerSize:5,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var x=r.memo(w);module.exports=x;
 //# sourceMappingURL=Map.js.map

package/cjs-bundle/components/BICOffsetPickerDialog/components/Map/Map.js.map

@@ -1 +1 @@
-{"version":3,"file":"Map.js","sources":["../../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport mapboxgl from '~/config/mapboxGl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 8;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#FFC107';\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst HIGHLIGHT_ID = 'wells-highlight';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n  const ring = [];\n  const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n  const distanceY = radiusMeters / 110574;\n  for (let i = 0; i <= points; i += 1) {\n    const theta = (i / points) * (2 * Math.PI);\n    ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n  }\n  return ring;\n};\n\nconst toolTip =\n  () =>\n  // eslint-disable-next-line react/prop-types\n  ({ well }) => {\n    return (\n      <div style={{ color: '#fff', background: '##414141' }}>\n        <span style={{ fontSize: '11px', lineHeight: '16px' }}>{get(well, 'name')}</span>\n      </div>\n    );\n  };\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n  subjectWell,\n  wells,\n  offsetWells,\n  radius,\n  subjectWellMarkerSize,\n  wellMarkerSize,\n  coordsDataPath,\n}) {\n  const mapContainerRef = useRef(null);\n  const mapRef = useRef(null);\n  const markersBoundsRef = useRef(null);\n  const popupRef = useRef(null);\n  const prevWellsRef = useRef();\n  const [isMapReady, setIsMapReady] = useState(false);\n\n  const subjectWellCoords = useMemo(() => {\n    return subjectWell && get(subjectWell, coordsDataPath);\n  }, [subjectWell, coordsDataPath]);\n\n  // NOTE: Initialize map\n  useEffect(() => {\n    mapRef.current = new mapboxgl.Map({\n      container: mapContainerRef.current,\n      style: 'mapbox://styles/mapbox/dark-v9',\n      center: toLngLat(DEFAULT_COORDS),\n      zoom: 1,\n      attributionControl: false,\n      scrollZoom: false,\n    });\n\n    mapRef.current.addControl(\n      new mapboxgl.NavigationControl({ showCompass: false }),\n      'bottom-right'\n    );\n\n    // NOTE: Sources/layers can only be added once the style has loaded.\n    // The radius circle layer is added first so well markers render above it (was bringToBack),\n    // and the hover highlight layer last so it renders on top of the markers\n    mapRef.current.on('load', () => {\n      mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n        type: 'geojson',\n        data: EMPTY_FEATURE_COLLECTION,\n      });\n      mapRef.current.addLayer({\n        id: RADIUS_CIRCLE_ID,\n        type: 'fill',\n        source: RADIUS_CIRCLE_ID,\n        paint: {\n          'fill-color': RADIUS_CIRCLE_COLOR,\n          'fill-opacity': 0.2,\n        },\n      });\n\n      mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      mapRef.current.addLayer({\n        id: WELLS_ID,\n        type: 'circle',\n        source: WELLS_ID,\n        paint: {\n          'circle-radius': ['get', 'radius'],\n          'circle-color': OFFSET_WELL_COLOR,\n          'circle-opacity': ['get', 'opacity'],\n        },\n      });\n\n      mapRef.current.addSource(HIGHLIGHT_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      mapRef.current.addLayer({\n        id: HIGHLIGHT_ID,\n        type: 'circle',\n        source: HIGHLIGHT_ID,\n        paint: {\n          'circle-radius': ['get', 'radius'],\n          'circle-color': OFFSET_WELL_COLOR,\n          'circle-opacity': 0.2,\n        },\n      });\n\n      setIsMapReady(true);\n    });\n\n    const map = mapRef.current;\n    return () => {\n      map.remove();\n      mapRef.current = null;\n      markersBoundsRef.current = null;\n    };\n  }, []);\n\n  // NOTE: Radius circle\n  useEffect(() => {\n    if (!mapRef.current || !isMapReady) {\n      return;\n    }\n\n    if (!subjectWellCoords) {\n      mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n      return;\n    }\n\n    const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n    mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n      type: 'Feature',\n      geometry: { type: 'Polygon', coordinates: [ring] },\n    });\n  }, [radius, subjectWellCoords, isMapReady]);\n\n  const handleMouseOver = (coords, r) => {\n    // Highlight the hovered well with a bigger translucent circle\n    mapRef.current.getSource(HIGHLIGHT_ID).setData({\n      type: 'Feature',\n      geometry: { type: 'Point', coordinates: toLngLat(coords) },\n      properties: { radius: r * 3 },\n    });\n  };\n\n  // NOTE: Well markers\n  useEffect(() => {\n    if (!mapRef.current || !isMapReady) {\n      return undefined;\n    }\n\n    const prevWells = prevWellsRef.current;\n    prevWellsRef.current = wells;\n\n    popupRef.current?.remove();\n    mapRef.current.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n\n    const offsetWellIds = offsetWells.map(well => well.id);\n\n    const features = [];\n    const wellsById = {};\n    const bounds = new mapboxgl.LngLatBounds();\n    wells.forEach(well => {\n      const coords = get(well, coordsDataPath);\n\n      if (coords && isValidCoordinates(coords)) {\n        const isWellSubject = subjectWell && subjectWell.id === well.id;\n        const isWellOffset = offsetWellIds.includes(well.id);\n        const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n        const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n        wellsById[well.id] = well;\n        bounds.extend(toLngLat(coords));\n        features.push({\n          type: 'Feature',\n          geometry: { type: 'Point', coordinates: toLngLat(coords) },\n          properties: { wellId: well.id, radius: r, opacity },\n        });\n      }\n    });\n\n    mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n    markersBoundsRef.current = features.length ? bounds : null;\n\n    const map = mapRef.current;\n    let hoveredWellId = null;\n\n    const handleMouseMove = e => {\n      map.getCanvas().style.cursor = 'pointer';\n\n      const well = wellsById[e.features[0].properties.wellId];\n      if (!well || well.id === hoveredWellId) {\n        return;\n      }\n      hoveredWellId = well.id;\n\n      const coords = get(well, coordsDataPath);\n\n      // Tooltip\n      const tooltipContainer = document.createElement('div');\n      const tootipContent = createElement(toolTip(), { well });\n      ReactDOM.render(tootipContent, tooltipContainer);\n      if (!popupRef.current) {\n        popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n      }\n      popupRef.current.setLngLat(toLngLat(coords)).setDOMContent(tooltipContainer).addTo(map);\n\n      // Highlight\n      handleMouseOver(coords, e.features[0].properties.radius);\n    };\n\n    // NOTE: was the mouseout handler of the Leaflet highlight marker\n    const handleHighlightMouseLeave = () => {\n      hoveredWellId = null;\n      map.getCanvas().style.cursor = '';\n      map.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n      popupRef.current?.remove();\n    };\n\n    // NOTE: If the pointer exits before the highlight renders under it, the highlight\n    // layer never emits mouseleave — clear here unless the cursor is inside the highlight\n    const handleWellsMouseLeave = e => {\n      if (e?.point && map.queryRenderedFeatures(e.point, { layers: [HIGHLIGHT_ID] }).length) {\n        return;\n      }\n      handleHighlightMouseLeave();\n    };\n\n    map.on('mousemove', WELLS_ID, handleMouseMove);\n    map.on('mouseleave', WELLS_ID, handleWellsMouseLeave);\n    map.on('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n\n    setTimeout(() => {\n      if (mapRef.current && markersBoundsRef.current && wells !== prevWells) {\n        mapRef.current.fitBounds(markersBoundsRef.current);\n      }\n    }, 500);\n\n    return () => {\n      map.off('mousemove', WELLS_ID, handleMouseMove);\n      map.off('mouseleave', WELLS_ID, handleWellsMouseLeave);\n      map.off('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n    };\n  }, [subjectWell, wells, offsetWells, isMapReady]);\n\n  return (\n    <div className={styles.map}>\n      <div className={styles.mapMain} ref={mapContainerRef} />\n    </div>\n  );\n}\n\nWellsMap.propTypes = {\n  subjectWell: PropTypes.shape({\n    id: PropTypes.number,\n    formation: PropTypes.string,\n  }),\n  wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n  offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n  radius: PropTypes.number.isRequired,\n  subjectWellMarkerSize: PropTypes.number,\n  wellMarkerSize: PropTypes.number,\n  coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n  subjectWell: null,\n  subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n  wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n  coordsDataPath: 'settings.top_hole.coordinates',\n  offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","HIGHLIGHT_ID","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref6","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","coordsDataPath","mapContainerRef","useRef","mapRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","subjectWellCoords","useMemo","get","useEffect","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","id","source","paint","map","remove","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","getSource","setData","geometry","coordinates","_popupRef$current","prevWells","offsetWellIds","well","wellsById","bounds","LngLatBounds","forEach","coords","isWellSubject","isWellOffset","includes","r","opacity","extend","properties","wellId","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","tooltipContainer","document","createElement","tootipContent","_ref5","_jsx","color","background","children","jsx","fontSize","lineHeight","ReactDOM","render","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseOver","handleHighlightMouseLeave","_popupRef$current2","handleWellsMouseLeave","point","queryRenderedFeatures","layers","setTimeout","fitBounds","off","className","styles","mapMain","ref","propTypes","PropTypes","shape","number","formation","string","arrayOf","isRequired","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"Map.js","sources":["../../../../../../src/components/BICOffsetPickerDialog/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport mapboxgl from '~/config/mapboxGl';\nimport { IS_MAPBOX_ENABLED } from '~/config/mapbox';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 8;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#FFC107';\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst HIGHLIGHT_ID = 'wells-highlight';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n  const ring = [];\n  const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n  const distanceY = radiusMeters / 110574;\n  for (let i = 0; i <= points; i += 1) {\n    const theta = (i / points) * (2 * Math.PI);\n    ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n  }\n  return ring;\n};\n\nconst toolTip =\n  () =>\n  // eslint-disable-next-line react/prop-types\n  ({ well }) => {\n    return (\n      <div style={{ color: '#fff', background: '##414141' }}>\n        <span style={{ fontSize: '11px', lineHeight: '16px' }}>{get(well, 'name')}</span>\n      </div>\n    );\n  };\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n  subjectWell,\n  wells,\n  offsetWells,\n  radius,\n  subjectWellMarkerSize,\n  wellMarkerSize,\n  coordsDataPath,\n}) {\n  const mapContainerRef = useRef(null);\n  const mapRef = useRef(null);\n  const markersBoundsRef = useRef(null);\n  const popupRef = useRef(null);\n  const prevWellsRef = useRef();\n  const [isMapReady, setIsMapReady] = useState(false);\n\n  const subjectWellCoords = useMemo(() => {\n    return subjectWell && get(subjectWell, coordsDataPath);\n  }, [subjectWell, coordsDataPath]);\n\n  // NOTE: Initialize map\n  useEffect(() => {\n    if (!IS_MAPBOX_ENABLED) return undefined;\n\n    mapRef.current = new mapboxgl.Map({\n      container: mapContainerRef.current,\n      style: 'mapbox://styles/mapbox/dark-v9',\n      center: toLngLat(DEFAULT_COORDS),\n      zoom: 1,\n      attributionControl: false,\n      scrollZoom: false,\n    });\n\n    mapRef.current.addControl(\n      new mapboxgl.NavigationControl({ showCompass: false }),\n      'bottom-right'\n    );\n\n    // NOTE: Sources/layers can only be added once the style has loaded.\n    // The radius circle layer is added first so well markers render above it (was bringToBack),\n    // and the hover highlight layer last so it renders on top of the markers\n    mapRef.current.on('load', () => {\n      mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n        type: 'geojson',\n        data: EMPTY_FEATURE_COLLECTION,\n      });\n      mapRef.current.addLayer({\n        id: RADIUS_CIRCLE_ID,\n        type: 'fill',\n        source: RADIUS_CIRCLE_ID,\n        paint: {\n          'fill-color': RADIUS_CIRCLE_COLOR,\n          'fill-opacity': 0.2,\n        },\n      });\n\n      mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      mapRef.current.addLayer({\n        id: WELLS_ID,\n        type: 'circle',\n        source: WELLS_ID,\n        paint: {\n          'circle-radius': ['get', 'radius'],\n          'circle-color': OFFSET_WELL_COLOR,\n          'circle-opacity': ['get', 'opacity'],\n        },\n      });\n\n      mapRef.current.addSource(HIGHLIGHT_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      mapRef.current.addLayer({\n        id: HIGHLIGHT_ID,\n        type: 'circle',\n        source: HIGHLIGHT_ID,\n        paint: {\n          'circle-radius': ['get', 'radius'],\n          'circle-color': OFFSET_WELL_COLOR,\n          'circle-opacity': 0.2,\n        },\n      });\n\n      setIsMapReady(true);\n    });\n\n    const map = mapRef.current;\n    return () => {\n      map.remove();\n      mapRef.current = null;\n      markersBoundsRef.current = null;\n    };\n  }, []);\n\n  // NOTE: Radius circle\n  useEffect(() => {\n    if (!mapRef.current || !isMapReady) {\n      return;\n    }\n\n    if (!subjectWellCoords) {\n      mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n      return;\n    }\n\n    const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n    mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n      type: 'Feature',\n      geometry: { type: 'Polygon', coordinates: [ring] },\n    });\n  }, [radius, subjectWellCoords, isMapReady]);\n\n  const handleMouseOver = (coords, r) => {\n    // Highlight the hovered well with a bigger translucent circle\n    mapRef.current.getSource(HIGHLIGHT_ID).setData({\n      type: 'Feature',\n      geometry: { type: 'Point', coordinates: toLngLat(coords) },\n      properties: { radius: r * 3 },\n    });\n  };\n\n  // NOTE: Well markers\n  useEffect(() => {\n    if (!mapRef.current || !isMapReady) {\n      return undefined;\n    }\n\n    const prevWells = prevWellsRef.current;\n    prevWellsRef.current = wells;\n\n    popupRef.current?.remove();\n    mapRef.current.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n\n    const offsetWellIds = offsetWells.map(well => well.id);\n\n    const features = [];\n    const wellsById = {};\n    const bounds = new mapboxgl.LngLatBounds();\n    wells.forEach(well => {\n      const coords = get(well, coordsDataPath);\n\n      if (coords && isValidCoordinates(coords)) {\n        const isWellSubject = subjectWell && subjectWell.id === well.id;\n        const isWellOffset = offsetWellIds.includes(well.id);\n        const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n        const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n        wellsById[well.id] = well;\n        bounds.extend(toLngLat(coords));\n        features.push({\n          type: 'Feature',\n          geometry: { type: 'Point', coordinates: toLngLat(coords) },\n          properties: { wellId: well.id, radius: r, opacity },\n        });\n      }\n    });\n\n    mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n    markersBoundsRef.current = features.length ? bounds : null;\n\n    const map = mapRef.current;\n    let hoveredWellId = null;\n\n    const handleMouseMove = e => {\n      map.getCanvas().style.cursor = 'pointer';\n\n      const well = wellsById[e.features[0].properties.wellId];\n      if (!well || well.id === hoveredWellId) {\n        return;\n      }\n      hoveredWellId = well.id;\n\n      const coords = get(well, coordsDataPath);\n\n      // Tooltip\n      const tooltipContainer = document.createElement('div');\n      const tootipContent = createElement(toolTip(), { well });\n      ReactDOM.render(tootipContent, tooltipContainer);\n      if (!popupRef.current) {\n        popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n      }\n      popupRef.current.setLngLat(toLngLat(coords)).setDOMContent(tooltipContainer).addTo(map);\n\n      // Highlight\n      handleMouseOver(coords, e.features[0].properties.radius);\n    };\n\n    // NOTE: was the mouseout handler of the Leaflet highlight marker\n    const handleHighlightMouseLeave = () => {\n      hoveredWellId = null;\n      map.getCanvas().style.cursor = '';\n      map.getSource(HIGHLIGHT_ID).setData(EMPTY_FEATURE_COLLECTION);\n      popupRef.current?.remove();\n    };\n\n    // NOTE: If the pointer exits before the highlight renders under it, the highlight\n    // layer never emits mouseleave — clear here unless the cursor is inside the highlight\n    const handleWellsMouseLeave = e => {\n      if (e?.point && map.queryRenderedFeatures(e.point, { layers: [HIGHLIGHT_ID] }).length) {\n        return;\n      }\n      handleHighlightMouseLeave();\n    };\n\n    map.on('mousemove', WELLS_ID, handleMouseMove);\n    map.on('mouseleave', WELLS_ID, handleWellsMouseLeave);\n    map.on('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n\n    setTimeout(() => {\n      if (mapRef.current && markersBoundsRef.current && wells !== prevWells) {\n        mapRef.current.fitBounds(markersBoundsRef.current);\n      }\n    }, 500);\n\n    return () => {\n      map.off('mousemove', WELLS_ID, handleMouseMove);\n      map.off('mouseleave', WELLS_ID, handleWellsMouseLeave);\n      map.off('mouseleave', HIGHLIGHT_ID, handleHighlightMouseLeave);\n    };\n  }, [subjectWell, wells, offsetWells, isMapReady]);\n\n  return (\n    <div className={styles.map}>\n      <div className={styles.mapMain} ref={mapContainerRef} />\n    </div>\n  );\n}\n\nWellsMap.propTypes = {\n  subjectWell: PropTypes.shape({\n    id: PropTypes.number,\n    formation: PropTypes.string,\n  }),\n  wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n  offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n  radius: PropTypes.number.isRequired,\n  subjectWellMarkerSize: PropTypes.number,\n  wellMarkerSize: PropTypes.number,\n  coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n  subjectWell: null,\n  subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n  wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n  coordsDataPath: 'settings.top_hole.coordinates',\n  offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","HIGHLIGHT_ID","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref6","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","coordsDataPath","mapContainerRef","useRef","mapRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","subjectWellCoords","useMemo","get","useEffect","IS_MAPBOX_ENABLED","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","id","source","paint","map","remove","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","getSource","setData","geometry","coordinates","_popupRef$current","prevWells","offsetWellIds","well","wellsById","bounds","LngLatBounds","forEach","coords","isWellSubject","isWellOffset","includes","r","opacity","extend","properties","wellId","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","tooltipContainer","document","createElement","tootipContent","_ref5","_jsx","color","background","children","jsx","fontSize","lineHeight","ReactDOM","render","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseOver","handleHighlightMouseLeave","_popupRef$current2","handleWellsMouseLeave","point","queryRenderedFeatures","layers","setTimeout","fitBounds","off","className","styles","mapMain","ref","propTypes","PropTypes","shape","number","formation","string","arrayOf","isRequired","defaultProps","memo"],"mappings":"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"}

package/cjs-bundle/components/OffsetWellMap/OffsetWellMap.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),l=require("react-dom"),i=require("lodash"),o=require("classnames"),c=require("@material-ui/core"),u=require("@material-ui/icons");require("mapbox-gl/dist/mapbox-gl.css");var n=require("./effects/usePreviousWells.js"),s=require("./WellTooltip.js"),a=require("./utils.js"),d=require("./OffsetWellMap.module.css.js");require("../../config/mapboxGl/index.js");var f=require("../../utils/index.js"),v=require("react/jsx-runtime"),h=require("mapbox-gl");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=m(e),p=m(r),y=m(l),w=m(o),b=m(h),j=f.mapbox.isValidCoordinates,W=[29.749907,-95.358421],x={type:"FeatureCollection",features:[]},q=["==",["id"],-1],F=function(e){var r=p.default(e,2),t=r[0];return[r[1],t]},C=function(e,r){for(var t=p.default(e,2),l=t[0],i=t[1],o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,c=r/(111320*Math.cos(l*Math.PI/180)),u=r/110574,n=[],s=0;s<=o;s+=1){var a=s/o*2*Math.PI;n.push([i+c*Math.cos(a),l+u*Math.sin(a)])}return{type:"Polygon",coordinates:[n]}};module.exports=function(e){var r=e.isViewOnly,l=e.subjectWell,o=void 0===l?null:l,f=e.wells,h=e.offsetWellIds,m=e.radius,M=e.handleChanageOffsetWell,B=e.handleChangeOffsetWell,E=void 0===B?M:B,L=e.activeWellId,S=e.isClickable,D=void 0===S||S,O=e.classes,k=void 0===O?{}:O,P=t.useMemo((function(){return o&&i.get(o,"topHole.coordinates")}),[o]),R=t.useMemo((function(){return a.getAllFormations(f)}),[f]),T=t.useRef(),z=t.useRef(),I=t.useRef(),Z=t.useRef(null),N=t.useRef(null),A=t.useRef(),V=t.useRef(new Map),G=t.useRef(null),H=t.useRef(null),J=t.useState(!1),K=p.default(J,2),Q=K[0],U=K[1],X=(null==o?void 0:o.id)===L,Y=n.usePreviousWells(f),$=t.useState(!1),_=p.default($,2),ee=_[0],re=_[1],te=t.useState(3),le=p.default(te,2),ie=le[0],oe=le[1];t.useEffect((function(){var e=new b.default.Map({container:T.current,style:"mapbox://styles/mapbox/dark-v9",center:F(W),zoom:3,maxZoom:18,attributionControl:!1,scrollZoom:!1,doubleClickZoom:!1});return z.current=e,e.on("zoomend",(function(){return oe(Math.round(e.getZoom()))})),e.on("load",(function(){e.addSource("radius-circle",{type:"geojson",data:x}),e.addLayer({id:"radius-circle-fill",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),e.addSource("wells",{type:"geojson",data:x}),e.addLayer({id:"wells-halo",type:"circle",source:"wells",filter:["==",["get","isOffsetWell"],!0],paint:{"circle-radius":12,"circle-color":["get","color"],"circle-opacity":.08}}),e.addLayer({id:"wells-circle",type:"circle",source:"wells",layout:{"circle-sort-key":["get","order"]},paint:{"circle-radius":5,"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),e.addLayer({id:"wells-active-highlight",type:"circle",source:"wells",filter:["==",["get","isActive"],!0],paint:{"circle-radius":12,"circle-color":["get","color"],"circle-opacity":.24}}),e.addLayer({id:"wells-hover-highlight",type:"circle",source:"wells",filter:q,paint:{"circle-radius":["case",["get","isSubjectWell"],5,12],"circle-color":["case",["get","isSubjectWell"],"#63EFFF",["get","color"]],"circle-opacity":.24}}),re(!0)})),function(){e.remove(),z.current=null,I.current=null,A.current=null,Z.current=null,N.current=null}}),[]),t.useEffect((function(){var e,r,t,l,i,o,c;Z.current=P&&m?(e=P,r=1609.34*m,t=p.default(e,2),l=t[0],i=t[1],o=r/(111320*Math.cos(l*Math.PI/180)),[[i-o,l-(c=r/110574)],[i+o,l+c]]):null;var u=z.current;u&&ee&&u.getSource("radius-circle").setData(P&&m?{type:"Feature",properties:{},geometry:C(P,1609.34*m)}:x)}),[m,P,ee]);var ce=function(e,l,o,c){var u=document.createElement("div"),n=t.createElement(s.WellTooltip(),{isViewOnly:r,well:e,color:i.get(R,e.formation,"#BDBDBD"),isOffsetWell:l,isSubjectWell:o,isClickable:D});y.default.render(v.jsx(v.Fragment,{children:n}),u),I.current||(I.current=new b.default.Popup({closeButton:!1,offset:12})),I.current.setLngLat(F(c)).setDOMContent(u).addTo(z.current)};t.useEffect((function(){var e=z.current;e&&ee&&e.setPaintProperty("wells-circle","circle-color",Q?["case",["get","isSubjectWell"],"#63EFFF",["get","color"]]:["get","color"])}),[Q,ee]),t.useEffect((function(){var e;if(f&&h){null===(e=I.current)||void 0===e||e.remove();var t=[],l=[];f.forEach((function(e){e.id!==(null==o?void 0:o.id)&&(h.includes(e.id)?t.push(e):l.push(e))}));var c=[].concat(l,t,[o]),u=[],n=new b.default.LngLatBounds;V.current.clear(),G.current=null,c.forEach((function(e,r){var t,l=null==e||null===(t=e.topHole)||void 0===t?void 0:t.coordinates;if(l&&j(l)){var c=(null==o?void 0:o.id)===e.id,s=h.includes(e.id)&&!c,a=c?"#03BCD4":i.get(R,e.formation,"#BDBDBD"),d=s?.7:.3;u.push({type:"Feature",id:r,geometry:{type:"Point",coordinates:F(l)},properties:{color:a,opacity:c?1:d,isSubjectWell:c,isOffsetWell:s,isActive:e.id===L&&!X,order:r}}),V.current.set(r,{well:e,coords:l,isOffsetWell:s,isSubjectWell:c}),c&&(G.current=r),n.extend(F(l))}})),N.current=u.length?n:null;var s=z.current;if(s&&ee){s.getSource("wells").setData({type:"FeatureCollection",features:u}),s.setFilter("wells-hover-highlight",q),H.current=null;var a=function(e){var r,t=null===(r=e.features)||void 0===r?void 0:r[0];if(t&&H.current!==t.id){var l=V.current.get(t.id);l&&(H.current=t.id,s.getCanvas().style.cursor="pointer",s.setFilter("wells-hover-highlight",["==",["id"],t.id]),ce(l.well,l.isOffsetWell,l.isSubjectWell,l.coords),l.isSubjectWell&&U(!0))}},d=function(e){var r;if(null==e||!e.point||!s.queryRenderedFeatures(e.point,{layers:["wells-circle","wells-hover-highlight"]}).length){var t=null!==H.current&&H.current===G.current;H.current=null,s.getCanvas().style.cursor="",s.setFilter("wells-hover-highlight",q),null===(r=I.current)||void 0===r||r.remove(),t&&U(!1)}},v=function(e){var t,l;if(!r){var i=V.current.get(null===(t=e.features)||void 0===t||null===(l=t[0])||void 0===l?void 0:l.id);i&&E(i.well,!i.isOffsetWell)}};return s.on("mousemove","wells-circle",a),s.on("mouseleave","wells-circle",d),s.on("mouseleave","wells-hover-highlight",d),s.on("click","wells-circle",v),setTimeout((function(){m<3e3&&z.current&&Z.current&&f!==Y&&z.current.fitBounds(Z.current,{padding:5})}),500),function(){s.off("mousemove","wells-circle",a),s.off("mouseleave","wells-circle",d),s.off("mouseleave","wells-hover-highlight",d),s.off("click","wells-circle",v)}}}}),[o,f,h,L,ee]),t.useEffect((function(){var e=z.current;if(A.current&&(A.current.remove(),A.current=null),e&&P){var r=Q||X,t=document.createElement("img");t.src=r?"/static/media/5e9c4959259cb12c11b2c5eaf27eb3ad.svg":"/static/media/9efe5882f31d2f22bd57af92069d0a3e.svg";var l=r?[70,20]:[62,12],i=p.default(l,2),c=i[0],u=i[1],n=r?[35,29]:[31,25],s=p.default(n,2),a=s[0],d=s[1];t.width=c,t.height=u,t.addEventListener("mouseover",(function(){U(!0),null!==G.current&&e.getLayer("wells-hover-highlight")&&(H.current=G.current,e.setFilter("wells-hover-highlight",["==",["id"],G.current])),ce(o,!1,!0,P)})),t.addEventListener("mouseout",(function(){var r;H.current=null,e.getLayer("wells-hover-highlight")&&e.setFilter("wells-hover-highlight",q),null===(r=I.current)||void 0===r||r.remove(),U(!1)})),A.current=new b.default.Marker({element:t,anchor:"center",offset:[c/2-a,u/2-d]}).setLngLat(F(P)).addTo(e)}}),[Q,P,m,o,X]),t.useEffect((function(){m>3e3?z.current.setZoom(1):setTimeout((function(){o?z.current&&Z.current&&m&&z.current.fitBounds(Z.current,{padding:5}):z.current&&N.current&&z.current.fitBounds(N.current),P&&z.current&&z.current.easeTo({center:F(P),duration:700})}),500)}),[m,o,P]);var ue=function(){z.current.setZoom(ie+1)};return v.jsx("div",{className:w.default(d.mapView,k.root),children:v.jsx("div",{className:w.default(d.mapMain,k.map),ref:T,onDoubleClick:ue,children:v.jsxs("div",{className:d.zoomGroup,children:[v.jsx(c.Tooltip,{title:ie<18?"Zoom in":"",placement:"left",children:v.jsx("div",{className:w.default(d.zoomButton,g.default({},d.zoomDisabled,18===ie)),onClick:ue,children:v.jsx(u.Add,{className:d.zoomInOutIcon})})}),v.jsx(c.Tooltip,{title:ie>1?"Zoom out":"",placement:"left",children:v.jsx("div",{className:w.default(d.zoomButton,g.default({},d.zoomDisabled,1===ie)),onClick:function(){ie>1&&z.current.setZoom(ie-1)},children:v.jsx(u.Remove,{className:d.zoomInOutIcon})})})]})})})};
+"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),l=require("react-dom"),i=require("lodash"),o=require("classnames"),c=require("@material-ui/core"),u=require("@material-ui/icons");require("mapbox-gl/dist/mapbox-gl.css");var n=require("./effects/usePreviousWells.js"),s=require("./WellTooltip.js"),a=require("./utils.js"),d=require("./OffsetWellMap.module.css.js");require("../../config/mapboxGl/index.js");var f=require("../../config/mapbox/index.js"),v=require("../../utils/index.js"),h=require("react/jsx-runtime"),m=require("mapbox-gl");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=g(e),y=g(r),w=g(l),b=g(o),j=g(m),x=v.mapbox.isValidCoordinates,W=[29.749907,-95.358421],q={type:"FeatureCollection",features:[]},F=["==",["id"],-1],B=function(e){var r=y.default(e,2),t=r[0];return[r[1],t]},C=function(e,r){for(var t=y.default(e,2),l=t[0],i=t[1],o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,c=r/(111320*Math.cos(l*Math.PI/180)),u=r/110574,n=[],s=0;s<=o;s+=1){var a=s/o*2*Math.PI;n.push([i+c*Math.cos(a),l+u*Math.sin(a)])}return{type:"Polygon",coordinates:[n]}};module.exports=function(e){var r=e.isViewOnly,l=e.subjectWell,o=void 0===l?null:l,v=e.wells,m=e.offsetWellIds,g=e.radius,E=e.handleChanageOffsetWell,M=e.handleChangeOffsetWell,L=void 0===M?E:M,S=e.activeWellId,D=e.isClickable,O=void 0===D||D,P=e.classes,k=void 0===P?{}:P,R=t.useMemo((function(){return o&&i.get(o,"topHole.coordinates")}),[o]),I=t.useMemo((function(){return a.getAllFormations(v)}),[v]),T=t.useRef(),z=t.useRef(),Z=t.useRef(),N=t.useRef(null),A=t.useRef(null),V=t.useRef(),G=t.useRef(new Map),H=t.useRef(null),_=t.useRef(null),X=t.useState(!1),J=y.default(X,2),K=J[0],Q=J[1],U=(null==o?void 0:o.id)===S,Y=n.usePreviousWells(v),$=t.useState(!1),ee=y.default($,2),re=ee[0],te=ee[1],le=t.useState(3),ie=y.default(le,2),oe=ie[0],ce=ie[1];t.useEffect((function(){if(f.IS_MAPBOX_ENABLED){var e=new j.default.Map({container:T.current,style:"mapbox://styles/mapbox/dark-v9",center:B(W),zoom:3,maxZoom:18,attributionControl:!1,scrollZoom:!1,doubleClickZoom:!1});return z.current=e,e.on("zoomend",(function(){return ce(Math.round(e.getZoom()))})),e.on("load",(function(){e.addSource("radius-circle",{type:"geojson",data:q}),e.addLayer({id:"radius-circle-fill",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),e.addSource("wells",{type:"geojson",data:q}),e.addLayer({id:"wells-halo",type:"circle",source:"wells",filter:["==",["get","isOffsetWell"],!0],paint:{"circle-radius":12,"circle-color":["get","color"],"circle-opacity":.08}}),e.addLayer({id:"wells-circle",type:"circle",source:"wells",layout:{"circle-sort-key":["get","order"]},paint:{"circle-radius":5,"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),e.addLayer({id:"wells-active-highlight",type:"circle",source:"wells",filter:["==",["get","isActive"],!0],paint:{"circle-radius":12,"circle-color":["get","color"],"circle-opacity":.24}}),e.addLayer({id:"wells-hover-highlight",type:"circle",source:"wells",filter:F,paint:{"circle-radius":["case",["get","isSubjectWell"],5,12],"circle-color":["case",["get","isSubjectWell"],"#63EFFF",["get","color"]],"circle-opacity":.24}}),te(!0)})),function(){e.remove(),z.current=null,Z.current=null,V.current=null,N.current=null,A.current=null}}}),[]),t.useEffect((function(){var e,r,t,l,i,o,c;N.current=R&&g?(e=R,r=1609.34*g,t=y.default(e,2),l=t[0],i=t[1],o=r/(111320*Math.cos(l*Math.PI/180)),[[i-o,l-(c=r/110574)],[i+o,l+c]]):null;var u=z.current;u&&re&&u.getSource("radius-circle").setData(R&&g?{type:"Feature",properties:{},geometry:C(R,1609.34*g)}:q)}),[g,R,re]);var ue=function(e,l,o,c){var u=document.createElement("div"),n=t.createElement(s.WellTooltip(),{isViewOnly:r,well:e,color:i.get(I,e.formation,"#BDBDBD"),isOffsetWell:l,isSubjectWell:o,isClickable:O});w.default.render(h.jsx(h.Fragment,{children:n}),u),Z.current||(Z.current=new j.default.Popup({closeButton:!1,offset:12})),Z.current.setLngLat(B(c)).setDOMContent(u).addTo(z.current)};t.useEffect((function(){var e=z.current;e&&re&&e.setPaintProperty("wells-circle","circle-color",K?["case",["get","isSubjectWell"],"#63EFFF",["get","color"]]:["get","color"])}),[K,re]),t.useEffect((function(){var e;if(v&&m){null===(e=Z.current)||void 0===e||e.remove();var t=[],l=[];v.forEach((function(e){e.id!==(null==o?void 0:o.id)&&(m.includes(e.id)?t.push(e):l.push(e))}));var c=[].concat(l,t,[o]),u=[],n=new j.default.LngLatBounds;G.current.clear(),H.current=null,c.forEach((function(e,r){var t,l=null==e||null===(t=e.topHole)||void 0===t?void 0:t.coordinates;if(l&&x(l)){var c=(null==o?void 0:o.id)===e.id,s=m.includes(e.id)&&!c,a=c?"#03BCD4":i.get(I,e.formation,"#BDBDBD"),d=s?.7:.3;u.push({type:"Feature",id:r,geometry:{type:"Point",coordinates:B(l)},properties:{color:a,opacity:c?1:d,isSubjectWell:c,isOffsetWell:s,isActive:e.id===S&&!U,order:r}}),G.current.set(r,{well:e,coords:l,isOffsetWell:s,isSubjectWell:c}),c&&(H.current=r),n.extend(B(l))}})),A.current=u.length?n:null;var s=z.current;if(s&&re){s.getSource("wells").setData({type:"FeatureCollection",features:u}),s.setFilter("wells-hover-highlight",F),_.current=null;var a=function(e){var r,t=null===(r=e.features)||void 0===r?void 0:r[0];if(t&&_.current!==t.id){var l=G.current.get(t.id);l&&(_.current=t.id,s.getCanvas().style.cursor="pointer",s.setFilter("wells-hover-highlight",["==",["id"],t.id]),ue(l.well,l.isOffsetWell,l.isSubjectWell,l.coords),l.isSubjectWell&&Q(!0))}},d=function(e){var r;if(null==e||!e.point||!s.queryRenderedFeatures(e.point,{layers:["wells-circle","wells-hover-highlight"]}).length){var t=null!==_.current&&_.current===H.current;_.current=null,s.getCanvas().style.cursor="",s.setFilter("wells-hover-highlight",F),null===(r=Z.current)||void 0===r||r.remove(),t&&Q(!1)}},f=function(e){var t,l;if(!r){var i=G.current.get(null===(t=e.features)||void 0===t||null===(l=t[0])||void 0===l?void 0:l.id);i&&L(i.well,!i.isOffsetWell)}};return s.on("mousemove","wells-circle",a),s.on("mouseleave","wells-circle",d),s.on("mouseleave","wells-hover-highlight",d),s.on("click","wells-circle",f),setTimeout((function(){g<3e3&&z.current&&N.current&&v!==Y&&z.current.fitBounds(N.current,{padding:5})}),500),function(){s.off("mousemove","wells-circle",a),s.off("mouseleave","wells-circle",d),s.off("mouseleave","wells-hover-highlight",d),s.off("click","wells-circle",f)}}}}),[o,v,m,S,re]),t.useEffect((function(){var e=z.current;if(V.current&&(V.current.remove(),V.current=null),e&&R){var r=K||U,t=document.createElement("img");t.src=r?"/static/media/5e9c4959259cb12c11b2c5eaf27eb3ad.svg":"/static/media/9efe5882f31d2f22bd57af92069d0a3e.svg";var l=r?[70,20]:[62,12],i=y.default(l,2),c=i[0],u=i[1],n=r?[35,29]:[31,25],s=y.default(n,2),a=s[0],d=s[1];t.width=c,t.height=u,t.addEventListener("mouseover",(function(){Q(!0),null!==H.current&&e.getLayer("wells-hover-highlight")&&(_.current=H.current,e.setFilter("wells-hover-highlight",["==",["id"],H.current])),ue(o,!1,!0,R)})),t.addEventListener("mouseout",(function(){var r;_.current=null,e.getLayer("wells-hover-highlight")&&e.setFilter("wells-hover-highlight",F),null===(r=Z.current)||void 0===r||r.remove(),Q(!1)})),V.current=new j.default.Marker({element:t,anchor:"center",offset:[c/2-a,u/2-d]}).setLngLat(B(R)).addTo(e)}}),[K,R,g,o,U]),t.useEffect((function(){var e;g>3e3?null===(e=z.current)||void 0===e||e.setZoom(1):setTimeout((function(){o?z.current&&N.current&&g&&z.current.fitBounds(N.current,{padding:5}):z.current&&A.current&&z.current.fitBounds(A.current),R&&z.current&&z.current.easeTo({center:B(R),duration:700})}),500)}),[g,o,R]);var ne=function(){var e;null===(e=z.current)||void 0===e||e.setZoom(oe+1)};return h.jsx("div",{className:b.default(d.mapView,k.root),children:h.jsx("div",{className:b.default(d.mapMain,k.map),ref:T,onDoubleClick:ne,children:h.jsxs("div",{className:d.zoomGroup,children:[h.jsx(c.Tooltip,{title:oe<18?"Zoom in":"",placement:"left",children:h.jsx("div",{className:b.default(d.zoomButton,p.default({},d.zoomDisabled,18===oe)),onClick:ne,children:h.jsx(u.Add,{className:d.zoomInOutIcon})})}),h.jsx(c.Tooltip,{title:oe>1?"Zoom out":"",placement:"left",children:h.jsx("div",{className:b.default(d.zoomButton,p.default({},d.zoomDisabled,1===oe)),onClick:function(){var e;oe>1&&(null===(e=z.current)||void 0===e||e.setZoom(oe-1))},children:h.jsx(u.Remove,{className:d.zoomInOutIcon})})})]})})})};
 //# sourceMappingURL=OffsetWellMap.js.map

package/cjs-bundle/components/OffsetWellMap/OffsetWellMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"OffsetWellMap.js","sources":["../../../../src/components/OffsetWellMap/OffsetWellMap.js"],"sourcesContent":["import { createElement, useRef, useEffect, useState, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport { get } from 'lodash';\nimport classNames from 'classnames';\nimport { Tooltip } from '@material-ui/core';\nimport { Add as ZoomInIcon, Remove as ZoomOutIcon } from '@material-ui/icons';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nimport SubjectWellIcon from './CustomIcon/SubjectWellIcon.svg';\nimport SubjectHighlightWellIcon from './CustomIcon/SubjectHighlightWellIcon.svg';\nimport { usePreviousWells } from './effects';\nimport { WellTooltip } from './WellTooltip';\nimport { getAllFormations } from './utils';\n\nimport styles from './OffsetWellMap.module.css';\n\nimport mapboxgl from '~/config/mapboxGl';\nimport { mapbox } from '~/utils';\n\nconst { isValidCoordinates } = mapbox;\nconst DEFAULT_COORDS = [29.749907, -95.358421];\nconst WELL_MARKER_SIZE = 5;\nconst HIGHLIGHT_MARKER_SIZE = 12;\nconst OFFSET_WELL_COLOR = '#03BCD4';\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst HIGHLIGHT_WELL_COLOR = '#63EFFF';\nconst METERS_IN_MILE = 1609.34;\nconst ZOOM_INIT_VALUE = 3;\nconst ZOOM_MAX_VALUE = 18;\nconst ZOOM_MIN_VALUE = 1;\nconst MAX_RADIUS = 3000;\n\nconst RADIUS_SOURCE_ID = 'radius-circle';\nconst RADIUS_LAYER_ID = 'radius-circle-fill';\nconst WELLS_SOURCE_ID = 'wells';\nconst WELLS_HALO_LAYER_ID = 'wells-halo';\nconst WELLS_LAYER_ID = 'wells-circle';\nconst WELLS_ACTIVE_LAYER_ID = 'wells-active-highlight';\nconst WELLS_HOVER_LAYER_ID = 'wells-hover-highlight';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\nconst NO_HOVER_FILTER = ['==', ['id'], -1];\n\n// NOTE: Props keep the Leaflet [lat, lng] convention; mapbox-gl expects [lng, lat]\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl circle layers are pixel-radius, so approximate the meter radius with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n  const degreesLng = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n  const degreesLat = radiusMeters / 110574;\n  const ring = [];\n  for (let i = 0; i <= points; i += 1) {\n    const theta = (i / points) * 2 * Math.PI;\n    ring.push([lng + degreesLng * Math.cos(theta), lat + degreesLat * Math.sin(theta)]);\n  }\n  return { type: 'Polygon', coordinates: [ring] };\n};\n\nconst getCircleBounds = ([lat, lng], radiusMeters) => {\n  const degreesLng = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n  const degreesLat = radiusMeters / 110574;\n  return [\n    [lng - degreesLng, lat - degreesLat],\n    [lng + degreesLng, lat + degreesLat],\n  ];\n};\n\n/** @type {React.FC<import('./OffsetWellMapProps').OffsetWellMapProps>} */\nconst OffsetWellMap = ({\n  isViewOnly,\n  subjectWell = null,\n  wells,\n  offsetWellIds,\n  radius,\n  handleChanageOffsetWell,\n  handleChangeOffsetWell = handleChanageOffsetWell,\n  activeWellId,\n  isClickable = true,\n  classes = {},\n}) => {\n  const subjectWellCoords = useMemo(() => {\n    return subjectWell && get(subjectWell, 'topHole.coordinates');\n  }, [subjectWell]);\n  const formationColors = useMemo(() => getAllFormations(wells), [wells]);\n\n  const containerRef = useRef();\n  const mapRef = useRef();\n  const popupRef = useRef();\n  const radiusBoundsRef = useRef(null);\n  const wellsBoundsRef = useRef(null);\n  const subjectIconRef = useRef();\n  const wellByFeatureIdRef = useRef(new Map());\n  const subjectFeatureIdRef = useRef(null);\n  const hoveredFeatureIdRef = useRef(null);\n  const [isSubjectWellHovered, setIsSubjectWellHovered] = useState(false);\n  const isActiveWellIsSubjectWell = subjectWell?.id === activeWellId;\n  const prevWells = usePreviousWells(wells);\n  const [isMapReady, setIsMapReady] = useState(false);\n  const [zoom, setZoom] = useState(ZOOM_INIT_VALUE);\n\n  // NOTE: Initialize map\n  useEffect(() => {\n    const map = new mapboxgl.Map({\n      container: containerRef.current,\n      style: 'mapbox://styles/mapbox/dark-v9',\n      center: toLngLat(DEFAULT_COORDS),\n      zoom: ZOOM_INIT_VALUE,\n      // NOTE: keep the zoom buttons' disable logic (zoom === ZOOM_MAX_VALUE) reachable\n      maxZoom: ZOOM_MAX_VALUE,\n      attributionControl: false,\n      scrollZoom: false,\n      doubleClickZoom: false,\n    });\n    mapRef.current = map;\n\n    // NOTE: GL zoom is fractional where Leaflet was integer\n    map.on('zoomend', () => setZoom(Math.round(map.getZoom())));\n\n    // NOTE: Sources/layers can only be added after the style loads\n    map.on('load', () => {\n      map.addSource(RADIUS_SOURCE_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      map.addLayer({\n        id: RADIUS_LAYER_ID,\n        type: 'fill',\n        source: RADIUS_SOURCE_ID,\n        paint: {\n          'fill-color': RADIUS_CIRCLE_COLOR,\n          'fill-opacity': 0.2,\n        },\n      });\n\n      map.addSource(WELLS_SOURCE_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      map.addLayer({\n        id: WELLS_HALO_LAYER_ID,\n        type: 'circle',\n        source: WELLS_SOURCE_ID,\n        filter: ['==', ['get', 'isOffsetWell'], true],\n        paint: {\n          'circle-radius': HIGHLIGHT_MARKER_SIZE,\n          'circle-color': ['get', 'color'],\n          'circle-opacity': 0.08,\n        },\n      });\n      map.addLayer({\n        id: WELLS_LAYER_ID,\n        type: 'circle',\n        source: WELLS_SOURCE_ID,\n        layout: {\n          'circle-sort-key': ['get', 'order'],\n        },\n        paint: {\n          'circle-radius': WELL_MARKER_SIZE,\n          'circle-color': ['get', 'color'],\n          'circle-opacity': ['get', 'opacity'],\n        },\n      });\n      map.addLayer({\n        id: WELLS_ACTIVE_LAYER_ID,\n        type: 'circle',\n        source: WELLS_SOURCE_ID,\n        filter: ['==', ['get', 'isActive'], true],\n        paint: {\n          'circle-radius': HIGHLIGHT_MARKER_SIZE,\n          'circle-color': ['get', 'color'],\n          'circle-opacity': 0.24,\n        },\n      });\n      map.addLayer({\n        id: WELLS_HOVER_LAYER_ID,\n        type: 'circle',\n        source: WELLS_SOURCE_ID,\n        filter: NO_HOVER_FILTER,\n        paint: {\n          'circle-radius': [\n            'case',\n            ['get', 'isSubjectWell'],\n            WELL_MARKER_SIZE,\n            HIGHLIGHT_MARKER_SIZE,\n          ],\n          'circle-color': [\n            'case',\n            ['get', 'isSubjectWell'],\n            HIGHLIGHT_WELL_COLOR,\n            ['get', 'color'],\n          ],\n          'circle-opacity': 0.24,\n        },\n      });\n\n      setIsMapReady(true);\n    });\n\n    return () => {\n      map.remove();\n      mapRef.current = null;\n      popupRef.current = null;\n      subjectIconRef.current = null;\n      radiusBoundsRef.current = null;\n      wellsBoundsRef.current = null;\n    };\n  }, []);\n\n  // NOTE: Radius circle\n  useEffect(() => {\n    radiusBoundsRef.current =\n      subjectWellCoords && radius\n        ? getCircleBounds(subjectWellCoords, radius * METERS_IN_MILE)\n        : null;\n\n    const map = mapRef.current;\n    if (!map || !isMapReady) {\n      return;\n    }\n\n    map.getSource(RADIUS_SOURCE_ID).setData(\n      subjectWellCoords && radius\n        ? {\n            type: 'Feature',\n            properties: {},\n            geometry: makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE),\n          }\n        : EMPTY_FEATURE_COLLECTION\n    );\n  }, [radius, subjectWellCoords, isMapReady]);\n\n  const showTooltip = (well, isOffsetWell, isSubjectWell, coords) => {\n    const popUpContainer = document.createElement('div');\n    const popUpContent = createElement(WellTooltip(), {\n      isViewOnly,\n      well,\n      color: get(formationColors, well.formation, '#BDBDBD'),\n      isOffsetWell,\n      isSubjectWell,\n      isClickable,\n    });\n    ReactDOM.render(<>{popUpContent}</>, popUpContainer);\n    if (!popupRef.current) {\n      popupRef.current = new mapboxgl.Popup({\n        closeButton: false,\n        offset: HIGHLIGHT_MARKER_SIZE,\n      });\n    }\n    popupRef.current\n      .setLngLat(toLngLat(coords))\n      .setDOMContent(popUpContainer)\n      .addTo(mapRef.current);\n  };\n\n  // NOTE: Subject well hover swaps the subject marker color\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map || !isMapReady) {\n      return;\n    }\n\n    map.setPaintProperty(\n      WELLS_LAYER_ID,\n      'circle-color',\n      isSubjectWellHovered\n        ? ['case', ['get', 'isSubjectWell'], HIGHLIGHT_WELL_COLOR, ['get', 'color']]\n        : ['get', 'color']\n    );\n  }, [isSubjectWellHovered, isMapReady]);\n\n  // NOTE: Well markers\n  useEffect(() => {\n    if (!wells || !offsetWellIds) {\n      return undefined;\n    }\n\n    popupRef.current?.remove();\n\n    const offsetWells = [];\n    const unSelectedWells = [];\n    wells.forEach(well => {\n      if (well.id !== subjectWell?.id) {\n        if (offsetWellIds.includes(well.id)) {\n          offsetWells.push(well);\n        } else {\n          unSelectedWells.push(well);\n        }\n      }\n    });\n    const sortedWells = [...unSelectedWells, ...offsetWells, subjectWell];\n\n    const features = [];\n    const wellsBounds = new mapboxgl.LngLatBounds();\n    wellByFeatureIdRef.current.clear();\n    subjectFeatureIdRef.current = null;\n    sortedWells.forEach((well, index) => {\n      const coords = well?.topHole?.coordinates;\n\n      if (coords && isValidCoordinates(coords)) {\n        const isSubjectWell = subjectWell?.id === well.id;\n        const isOffsetWell = offsetWellIds.includes(well.id) && !isSubjectWell;\n        const color = isSubjectWell\n          ? OFFSET_WELL_COLOR\n          : get(formationColors, well.formation, '#BDBDBD');\n        const opacity = isOffsetWell ? 0.7 : 0.3;\n\n        features.push({\n          type: 'Feature',\n          id: index,\n          geometry: { type: 'Point', coordinates: toLngLat(coords) },\n          properties: {\n            color,\n            opacity: isSubjectWell ? 1 : opacity,\n            isSubjectWell,\n            isOffsetWell,\n            isActive: well.id === activeWellId && !isActiveWellIsSubjectWell,\n            order: index,\n          },\n        });\n        wellByFeatureIdRef.current.set(index, { well, coords, isOffsetWell, isSubjectWell });\n        if (isSubjectWell) {\n          subjectFeatureIdRef.current = index;\n        }\n        wellsBounds.extend(toLngLat(coords));\n      }\n    });\n    wellsBoundsRef.current = features.length ? wellsBounds : null;\n\n    const map = mapRef.current;\n    if (!map || !isMapReady) {\n      return undefined;\n    }\n\n    map.getSource(WELLS_SOURCE_ID).setData({ type: 'FeatureCollection', features });\n    map.setFilter(WELLS_HOVER_LAYER_ID, NO_HOVER_FILTER);\n    hoveredFeatureIdRef.current = null;\n\n    const handleMouseMove = e => {\n      const feature = e.features?.[0];\n      if (!feature || hoveredFeatureIdRef.current === feature.id) {\n        return;\n      }\n      const entry = wellByFeatureIdRef.current.get(feature.id);\n      if (!entry) {\n        return;\n      }\n\n      hoveredFeatureIdRef.current = feature.id;\n      map.getCanvas().style.cursor = 'pointer';\n\n      // Highlight\n      map.setFilter(WELLS_HOVER_LAYER_ID, ['==', ['id'], feature.id]);\n      showTooltip(entry.well, entry.isOffsetWell, entry.isSubjectWell, entry.coords);\n      if (entry.isSubjectWell) {\n        setIsSubjectWellHovered(true);\n      }\n    };\n\n    const handleMouseLeave = e => {\n      // NOTE: Leaflet cleared hover on leaving the ENLARGED highlight marker, so keep the\n      // hover while the cursor is still over the hover halo (or another well marker)\n      if (\n        e?.point &&\n        map.queryRenderedFeatures(e.point, { layers: [WELLS_LAYER_ID, WELLS_HOVER_LAYER_ID] })\n          .length\n      ) {\n        return;\n      }\n      const wasSubjectWell =\n        hoveredFeatureIdRef.current !== null &&\n        hoveredFeatureIdRef.current === subjectFeatureIdRef.current;\n      hoveredFeatureIdRef.current = null;\n      map.getCanvas().style.cursor = '';\n      map.setFilter(WELLS_HOVER_LAYER_ID, NO_HOVER_FILTER);\n      popupRef.current?.remove();\n      if (wasSubjectWell) {\n        setIsSubjectWellHovered(false);\n      }\n    };\n\n    const handleClick = e => {\n      if (isViewOnly) return;\n      const entry = wellByFeatureIdRef.current.get(e.features?.[0]?.id);\n      if (!entry) {\n        return;\n      }\n      handleChangeOffsetWell(entry.well, !entry.isOffsetWell);\n    };\n\n    map.on('mousemove', WELLS_LAYER_ID, handleMouseMove);\n    map.on('mouseleave', WELLS_LAYER_ID, handleMouseLeave);\n    map.on('mouseleave', WELLS_HOVER_LAYER_ID, handleMouseLeave);\n    map.on('click', WELLS_LAYER_ID, handleClick);\n\n    setTimeout(() => {\n      if (radius < MAX_RADIUS && mapRef.current && radiusBoundsRef.current && wells !== prevWells) {\n        mapRef.current.fitBounds(radiusBoundsRef.current, { padding: 5 });\n      }\n    }, 500);\n\n    return () => {\n      map.off('mousemove', WELLS_LAYER_ID, handleMouseMove);\n      map.off('mouseleave', WELLS_LAYER_ID, handleMouseLeave);\n      map.off('mouseleave', WELLS_HOVER_LAYER_ID, handleMouseLeave);\n      map.off('click', WELLS_LAYER_ID, handleClick);\n    };\n  }, [subjectWell, wells, offsetWellIds, activeWellId, isMapReady]);\n\n  // NOTE: Subject Well Icon\n\n  useEffect(() => {\n    const map = mapRef.current;\n\n    if (subjectIconRef.current) {\n      subjectIconRef.current.remove();\n      subjectIconRef.current = null;\n    }\n\n    if (!map || !subjectWellCoords) return;\n\n    const isHighlighted = isSubjectWellHovered || isActiveWellIsSubjectWell;\n    const icon = document.createElement('img');\n    icon.src = isHighlighted ? SubjectHighlightWellIcon : SubjectWellIcon;\n    const [iconWidth, iconHeight] = isHighlighted ? [70, 20] : [62, 12];\n    const [anchorX, anchorY] = isHighlighted ? [35, 29] : [31, 25];\n    icon.width = iconWidth;\n    icon.height = iconHeight;\n\n    icon.addEventListener('mouseover', () => {\n      setIsSubjectWellHovered(true);\n\n      // Highlight\n      if (subjectFeatureIdRef.current !== null && map.getLayer(WELLS_HOVER_LAYER_ID)) {\n        hoveredFeatureIdRef.current = subjectFeatureIdRef.current;\n        map.setFilter(WELLS_HOVER_LAYER_ID, ['==', ['id'], subjectFeatureIdRef.current]);\n      }\n      showTooltip(subjectWell, false, true, subjectWellCoords);\n    });\n\n    icon.addEventListener('mouseout', () => {\n      hoveredFeatureIdRef.current = null;\n      if (map.getLayer(WELLS_HOVER_LAYER_ID)) {\n        map.setFilter(WELLS_HOVER_LAYER_ID, NO_HOVER_FILTER);\n      }\n      popupRef.current?.remove();\n      setIsSubjectWellHovered(false);\n    });\n\n    subjectIconRef.current = new mapboxgl.Marker({\n      element: icon,\n      anchor: 'center',\n      // NOTE: Leaflet anchored the icon at [anchorX, anchorY] from its top-left corner\n      offset: [iconWidth / 2 - anchorX, iconHeight / 2 - anchorY],\n    })\n      .setLngLat(toLngLat(subjectWellCoords))\n      .addTo(map);\n  }, [isSubjectWellHovered, subjectWellCoords, radius, subjectWell, isActiveWellIsSubjectWell]);\n\n  // NOTE: Map Update\n  useEffect(() => {\n    if (radius > MAX_RADIUS) {\n      mapRef.current.setZoom(1);\n      return;\n    }\n    setTimeout(() => {\n      if (subjectWell) {\n        if (mapRef.current && radiusBoundsRef.current && radius) {\n          mapRef.current.fitBounds(radiusBoundsRef.current, { padding: 5 });\n        }\n      } else if (mapRef.current && wellsBoundsRef.current) {\n        mapRef.current.fitBounds(wellsBoundsRef.current);\n      }\n      if (subjectWellCoords && mapRef.current) {\n        mapRef.current.easeTo({ center: toLngLat(subjectWellCoords), duration: 700 });\n      }\n    }, 500);\n  }, [radius, subjectWell, subjectWellCoords]);\n\n  const handleZoomIn = () => {\n    mapRef.current.setZoom(zoom + 1);\n  };\n\n  const handleZoomOut = () => {\n    if (zoom > 1) {\n      mapRef.current.setZoom(zoom - 1);\n    }\n  };\n\n  return (\n    <div className={classNames(styles.mapView, classes.root)}>\n      <div\n        className={classNames(styles.mapMain, classes.map)}\n        ref={containerRef}\n        onDoubleClick={handleZoomIn}\n      >\n        <div className={styles.zoomGroup}>\n          <Tooltip title={zoom < ZOOM_MAX_VALUE ? 'Zoom in' : ''} placement=\"left\">\n            <div\n              className={classNames(styles.zoomButton, {\n                [styles.zoomDisabled]: zoom === ZOOM_MAX_VALUE,\n              })}\n              onClick={handleZoomIn}\n            >\n              <ZoomInIcon className={styles.zoomInOutIcon} />\n            </div>\n          </Tooltip>\n          <Tooltip title={zoom > ZOOM_MIN_VALUE ? 'Zoom out' : ''} placement=\"left\">\n            <div\n              className={classNames(styles.zoomButton, {\n                [styles.zoomDisabled]: zoom === ZOOM_MIN_VALUE,\n              })}\n              onClick={handleZoomOut}\n            >\n              <ZoomOutIcon className={styles.zoomInOutIcon} />\n            </div>\n          </Tooltip>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default OffsetWellMap;\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","NO_HOVER_FILTER","toLngLat","_ref","_ref2","_slicedToArray","lat","makeCirclePolygon","_ref3","radiusMeters","_ref4","lng","points","degreesLng","Math","cos","PI","degreesLat","ring","i","theta","push","sin","coordinates","_ref7","isViewOnly","_ref7$subjectWell","subjectWell","wells","offsetWellIds","radius","handleChanageOffsetWell","_ref7$handleChangeOff","handleChangeOffsetWell","activeWellId","_ref7$isClickable","isClickable","_ref7$classes","classes","subjectWellCoords","useMemo","get","formationColors","getAllFormations","containerRef","useRef","mapRef","popupRef","radiusBoundsRef","wellsBoundsRef","subjectIconRef","wellByFeatureIdRef","Map","subjectFeatureIdRef","hoveredFeatureIdRef","useState","_useState2","_useState","isSubjectWellHovered","setIsSubjectWellHovered","isActiveWellIsSubjectWell","id","prevWells","usePreviousWells","_useState4","_useState3","isMapReady","setIsMapReady","_useState6","_useState5","zoom","setZoom","useEffect","map","mapboxgl","container","current","style","center","maxZoom","attributionControl","scrollZoom","doubleClickZoom","on","round","getZoom","addSource","data","addLayer","source","paint","filter","layout","remove","_ref5","_ref6","getSource","setData","properties","geometry","showTooltip","well","isOffsetWell","isSubjectWell","coords","popUpContainer","document","createElement","popUpContent","WellTooltip","color","formation","ReactDOM","render","_jsx","jsx","_Fragment","children","Popup","closeButton","offset","setLngLat","setDOMContent","addTo","setPaintProperty","_popupRef$current","offsetWells","unSelectedWells","forEach","includes","sortedWells","wellsBounds","LngLatBounds","clear","index","_well$topHole","topHole","opacity","isActive","order","set","extend","length","setFilter","handleMouseMove","e","_e$features","feature","entry","getCanvas","cursor","handleMouseLeave","_popupRef$current2","point","queryRenderedFeatures","layers","wasSubjectWell","handleClick","_e$features2","_e$features2$","setTimeout","fitBounds","padding","off","isHighlighted","icon","src","_ref8","_ref9","iconWidth","iconHeight","_ref10","_ref11","anchorX","anchorY","width","height","addEventListener","getLayer","_popupRef$current3","Marker","element","anchor","easeTo","duration","handleZoomIn","className","classNames","styles","mapView","root","mapMain","ref","onDoubleClick","_jsxs","jsxs","zoomGroup","Tooltip","title","placement","zoomButton","_defineProperty","zoomDisabled","onClick","ZoomInIcon","zoomInOutIcon","ZoomOutIcon"],"mappings":"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"}
+{"version":3,"file":"OffsetWellMap.js","sources":["../../../../src/components/OffsetWellMap/OffsetWellMap.js"],"sourcesContent":["import { createElement, useRef, useEffect, useState, useMemo } from 'react';\nimport ReactDOM from 'react-dom';\nimport { get } from 'lodash';\nimport classNames from 'classnames';\nimport { Tooltip } from '@material-ui/core';\nimport { Add as ZoomInIcon, Remove as ZoomOutIcon } from '@material-ui/icons';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nimport SubjectWellIcon from './CustomIcon/SubjectWellIcon.svg';\nimport SubjectHighlightWellIcon from './CustomIcon/SubjectHighlightWellIcon.svg';\nimport { usePreviousWells } from './effects';\nimport { WellTooltip } from './WellTooltip';\nimport { getAllFormations } from './utils';\n\nimport styles from './OffsetWellMap.module.css';\n\nimport mapboxgl from '~/config/mapboxGl';\nimport { IS_MAPBOX_ENABLED } from '~/config/mapbox';\nimport { mapbox } from '~/utils';\n\nconst { isValidCoordinates } = mapbox;\nconst DEFAULT_COORDS = [29.749907, -95.358421];\nconst WELL_MARKER_SIZE = 5;\nconst HIGHLIGHT_MARKER_SIZE = 12;\nconst OFFSET_WELL_COLOR = '#03BCD4';\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst HIGHLIGHT_WELL_COLOR = '#63EFFF';\nconst METERS_IN_MILE = 1609.34;\nconst ZOOM_INIT_VALUE = 3;\nconst ZOOM_MAX_VALUE = 18;\nconst ZOOM_MIN_VALUE = 1;\nconst MAX_RADIUS = 3000;\n\nconst RADIUS_SOURCE_ID = 'radius-circle';\nconst RADIUS_LAYER_ID = 'radius-circle-fill';\nconst WELLS_SOURCE_ID = 'wells';\nconst WELLS_HALO_LAYER_ID = 'wells-halo';\nconst WELLS_LAYER_ID = 'wells-circle';\nconst WELLS_ACTIVE_LAYER_ID = 'wells-active-highlight';\nconst WELLS_HOVER_LAYER_ID = 'wells-hover-highlight';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\nconst NO_HOVER_FILTER = ['==', ['id'], -1];\n\n// NOTE: Props keep the Leaflet [lat, lng] convention; mapbox-gl expects [lng, lat]\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl circle layers are pixel-radius, so approximate the meter radius with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n  const degreesLng = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n  const degreesLat = radiusMeters / 110574;\n  const ring = [];\n  for (let i = 0; i <= points; i += 1) {\n    const theta = (i / points) * 2 * Math.PI;\n    ring.push([lng + degreesLng * Math.cos(theta), lat + degreesLat * Math.sin(theta)]);\n  }\n  return { type: 'Polygon', coordinates: [ring] };\n};\n\nconst getCircleBounds = ([lat, lng], radiusMeters) => {\n  const degreesLng = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n  const degreesLat = radiusMeters / 110574;\n  return [\n    [lng - degreesLng, lat - degreesLat],\n    [lng + degreesLng, lat + degreesLat],\n  ];\n};\n\n/** @type {React.FC<import('./OffsetWellMapProps').OffsetWellMapProps>} */\nconst OffsetWellMap = ({\n  isViewOnly,\n  subjectWell = null,\n  wells,\n  offsetWellIds,\n  radius,\n  handleChanageOffsetWell,\n  handleChangeOffsetWell = handleChanageOffsetWell,\n  activeWellId,\n  isClickable = true,\n  classes = {},\n}) => {\n  const subjectWellCoords = useMemo(() => {\n    return subjectWell && get(subjectWell, 'topHole.coordinates');\n  }, [subjectWell]);\n  const formationColors = useMemo(() => getAllFormations(wells), [wells]);\n\n  const containerRef = useRef();\n  const mapRef = useRef();\n  const popupRef = useRef();\n  const radiusBoundsRef = useRef(null);\n  const wellsBoundsRef = useRef(null);\n  const subjectIconRef = useRef();\n  const wellByFeatureIdRef = useRef(new Map());\n  const subjectFeatureIdRef = useRef(null);\n  const hoveredFeatureIdRef = useRef(null);\n  const [isSubjectWellHovered, setIsSubjectWellHovered] = useState(false);\n  const isActiveWellIsSubjectWell = subjectWell?.id === activeWellId;\n  const prevWells = usePreviousWells(wells);\n  const [isMapReady, setIsMapReady] = useState(false);\n  const [zoom, setZoom] = useState(ZOOM_INIT_VALUE);\n\n  // NOTE: Initialize map\n  useEffect(() => {\n    if (!IS_MAPBOX_ENABLED) return undefined;\n\n    const map = new mapboxgl.Map({\n      container: containerRef.current,\n      style: 'mapbox://styles/mapbox/dark-v9',\n      center: toLngLat(DEFAULT_COORDS),\n      zoom: ZOOM_INIT_VALUE,\n      // NOTE: keep the zoom buttons' disable logic (zoom === ZOOM_MAX_VALUE) reachable\n      maxZoom: ZOOM_MAX_VALUE,\n      attributionControl: false,\n      scrollZoom: false,\n      doubleClickZoom: false,\n    });\n    mapRef.current = map;\n\n    // NOTE: GL zoom is fractional where Leaflet was integer\n    map.on('zoomend', () => setZoom(Math.round(map.getZoom())));\n\n    // NOTE: Sources/layers can only be added after the style loads\n    map.on('load', () => {\n      map.addSource(RADIUS_SOURCE_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      map.addLayer({\n        id: RADIUS_LAYER_ID,\n        type: 'fill',\n        source: RADIUS_SOURCE_ID,\n        paint: {\n          'fill-color': RADIUS_CIRCLE_COLOR,\n          'fill-opacity': 0.2,\n        },\n      });\n\n      map.addSource(WELLS_SOURCE_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      map.addLayer({\n        id: WELLS_HALO_LAYER_ID,\n        type: 'circle',\n        source: WELLS_SOURCE_ID,\n        filter: ['==', ['get', 'isOffsetWell'], true],\n        paint: {\n          'circle-radius': HIGHLIGHT_MARKER_SIZE,\n          'circle-color': ['get', 'color'],\n          'circle-opacity': 0.08,\n        },\n      });\n      map.addLayer({\n        id: WELLS_LAYER_ID,\n        type: 'circle',\n        source: WELLS_SOURCE_ID,\n        layout: {\n          'circle-sort-key': ['get', 'order'],\n        },\n        paint: {\n          'circle-radius': WELL_MARKER_SIZE,\n          'circle-color': ['get', 'color'],\n          'circle-opacity': ['get', 'opacity'],\n        },\n      });\n      map.addLayer({\n        id: WELLS_ACTIVE_LAYER_ID,\n        type: 'circle',\n        source: WELLS_SOURCE_ID,\n        filter: ['==', ['get', 'isActive'], true],\n        paint: {\n          'circle-radius': HIGHLIGHT_MARKER_SIZE,\n          'circle-color': ['get', 'color'],\n          'circle-opacity': 0.24,\n        },\n      });\n      map.addLayer({\n        id: WELLS_HOVER_LAYER_ID,\n        type: 'circle',\n        source: WELLS_SOURCE_ID,\n        filter: NO_HOVER_FILTER,\n        paint: {\n          'circle-radius': [\n            'case',\n            ['get', 'isSubjectWell'],\n            WELL_MARKER_SIZE,\n            HIGHLIGHT_MARKER_SIZE,\n          ],\n          'circle-color': [\n            'case',\n            ['get', 'isSubjectWell'],\n            HIGHLIGHT_WELL_COLOR,\n            ['get', 'color'],\n          ],\n          'circle-opacity': 0.24,\n        },\n      });\n\n      setIsMapReady(true);\n    });\n\n    return () => {\n      map.remove();\n      mapRef.current = null;\n      popupRef.current = null;\n      subjectIconRef.current = null;\n      radiusBoundsRef.current = null;\n      wellsBoundsRef.current = null;\n    };\n  }, []);\n\n  // NOTE: Radius circle\n  useEffect(() => {\n    radiusBoundsRef.current =\n      subjectWellCoords && radius\n        ? getCircleBounds(subjectWellCoords, radius * METERS_IN_MILE)\n        : null;\n\n    const map = mapRef.current;\n    if (!map || !isMapReady) {\n      return;\n    }\n\n    map.getSource(RADIUS_SOURCE_ID).setData(\n      subjectWellCoords && radius\n        ? {\n            type: 'Feature',\n            properties: {},\n            geometry: makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE),\n          }\n        : EMPTY_FEATURE_COLLECTION\n    );\n  }, [radius, subjectWellCoords, isMapReady]);\n\n  const showTooltip = (well, isOffsetWell, isSubjectWell, coords) => {\n    const popUpContainer = document.createElement('div');\n    const popUpContent = createElement(WellTooltip(), {\n      isViewOnly,\n      well,\n      color: get(formationColors, well.formation, '#BDBDBD'),\n      isOffsetWell,\n      isSubjectWell,\n      isClickable,\n    });\n    ReactDOM.render(<>{popUpContent}</>, popUpContainer);\n    if (!popupRef.current) {\n      popupRef.current = new mapboxgl.Popup({\n        closeButton: false,\n        offset: HIGHLIGHT_MARKER_SIZE,\n      });\n    }\n    popupRef.current\n      .setLngLat(toLngLat(coords))\n      .setDOMContent(popUpContainer)\n      .addTo(mapRef.current);\n  };\n\n  // NOTE: Subject well hover swaps the subject marker color\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map || !isMapReady) {\n      return;\n    }\n\n    map.setPaintProperty(\n      WELLS_LAYER_ID,\n      'circle-color',\n      isSubjectWellHovered\n        ? ['case', ['get', 'isSubjectWell'], HIGHLIGHT_WELL_COLOR, ['get', 'color']]\n        : ['get', 'color']\n    );\n  }, [isSubjectWellHovered, isMapReady]);\n\n  // NOTE: Well markers\n  useEffect(() => {\n    if (!wells || !offsetWellIds) {\n      return undefined;\n    }\n\n    popupRef.current?.remove();\n\n    const offsetWells = [];\n    const unSelectedWells = [];\n    wells.forEach(well => {\n      if (well.id !== subjectWell?.id) {\n        if (offsetWellIds.includes(well.id)) {\n          offsetWells.push(well);\n        } else {\n          unSelectedWells.push(well);\n        }\n      }\n    });\n    const sortedWells = [...unSelectedWells, ...offsetWells, subjectWell];\n\n    const features = [];\n    const wellsBounds = new mapboxgl.LngLatBounds();\n    wellByFeatureIdRef.current.clear();\n    subjectFeatureIdRef.current = null;\n    sortedWells.forEach((well, index) => {\n      const coords = well?.topHole?.coordinates;\n\n      if (coords && isValidCoordinates(coords)) {\n        const isSubjectWell = subjectWell?.id === well.id;\n        const isOffsetWell = offsetWellIds.includes(well.id) && !isSubjectWell;\n        const color = isSubjectWell\n          ? OFFSET_WELL_COLOR\n          : get(formationColors, well.formation, '#BDBDBD');\n        const opacity = isOffsetWell ? 0.7 : 0.3;\n\n        features.push({\n          type: 'Feature',\n          id: index,\n          geometry: { type: 'Point', coordinates: toLngLat(coords) },\n          properties: {\n            color,\n            opacity: isSubjectWell ? 1 : opacity,\n            isSubjectWell,\n            isOffsetWell,\n            isActive: well.id === activeWellId && !isActiveWellIsSubjectWell,\n            order: index,\n          },\n        });\n        wellByFeatureIdRef.current.set(index, { well, coords, isOffsetWell, isSubjectWell });\n        if (isSubjectWell) {\n          subjectFeatureIdRef.current = index;\n        }\n        wellsBounds.extend(toLngLat(coords));\n      }\n    });\n    wellsBoundsRef.current = features.length ? wellsBounds : null;\n\n    const map = mapRef.current;\n    if (!map || !isMapReady) {\n      return undefined;\n    }\n\n    map.getSource(WELLS_SOURCE_ID).setData({ type: 'FeatureCollection', features });\n    map.setFilter(WELLS_HOVER_LAYER_ID, NO_HOVER_FILTER);\n    hoveredFeatureIdRef.current = null;\n\n    const handleMouseMove = e => {\n      const feature = e.features?.[0];\n      if (!feature || hoveredFeatureIdRef.current === feature.id) {\n        return;\n      }\n      const entry = wellByFeatureIdRef.current.get(feature.id);\n      if (!entry) {\n        return;\n      }\n\n      hoveredFeatureIdRef.current = feature.id;\n      map.getCanvas().style.cursor = 'pointer';\n\n      // Highlight\n      map.setFilter(WELLS_HOVER_LAYER_ID, ['==', ['id'], feature.id]);\n      showTooltip(entry.well, entry.isOffsetWell, entry.isSubjectWell, entry.coords);\n      if (entry.isSubjectWell) {\n        setIsSubjectWellHovered(true);\n      }\n    };\n\n    const handleMouseLeave = e => {\n      // NOTE: Leaflet cleared hover on leaving the ENLARGED highlight marker, so keep the\n      // hover while the cursor is still over the hover halo (or another well marker)\n      if (\n        e?.point &&\n        map.queryRenderedFeatures(e.point, { layers: [WELLS_LAYER_ID, WELLS_HOVER_LAYER_ID] })\n          .length\n      ) {\n        return;\n      }\n      const wasSubjectWell =\n        hoveredFeatureIdRef.current !== null &&\n        hoveredFeatureIdRef.current === subjectFeatureIdRef.current;\n      hoveredFeatureIdRef.current = null;\n      map.getCanvas().style.cursor = '';\n      map.setFilter(WELLS_HOVER_LAYER_ID, NO_HOVER_FILTER);\n      popupRef.current?.remove();\n      if (wasSubjectWell) {\n        setIsSubjectWellHovered(false);\n      }\n    };\n\n    const handleClick = e => {\n      if (isViewOnly) return;\n      const entry = wellByFeatureIdRef.current.get(e.features?.[0]?.id);\n      if (!entry) {\n        return;\n      }\n      handleChangeOffsetWell(entry.well, !entry.isOffsetWell);\n    };\n\n    map.on('mousemove', WELLS_LAYER_ID, handleMouseMove);\n    map.on('mouseleave', WELLS_LAYER_ID, handleMouseLeave);\n    map.on('mouseleave', WELLS_HOVER_LAYER_ID, handleMouseLeave);\n    map.on('click', WELLS_LAYER_ID, handleClick);\n\n    setTimeout(() => {\n      if (radius < MAX_RADIUS && mapRef.current && radiusBoundsRef.current && wells !== prevWells) {\n        mapRef.current.fitBounds(radiusBoundsRef.current, { padding: 5 });\n      }\n    }, 500);\n\n    return () => {\n      map.off('mousemove', WELLS_LAYER_ID, handleMouseMove);\n      map.off('mouseleave', WELLS_LAYER_ID, handleMouseLeave);\n      map.off('mouseleave', WELLS_HOVER_LAYER_ID, handleMouseLeave);\n      map.off('click', WELLS_LAYER_ID, handleClick);\n    };\n  }, [subjectWell, wells, offsetWellIds, activeWellId, isMapReady]);\n\n  // NOTE: Subject Well Icon\n\n  useEffect(() => {\n    const map = mapRef.current;\n\n    if (subjectIconRef.current) {\n      subjectIconRef.current.remove();\n      subjectIconRef.current = null;\n    }\n\n    if (!map || !subjectWellCoords) return;\n\n    const isHighlighted = isSubjectWellHovered || isActiveWellIsSubjectWell;\n    const icon = document.createElement('img');\n    icon.src = isHighlighted ? SubjectHighlightWellIcon : SubjectWellIcon;\n    const [iconWidth, iconHeight] = isHighlighted ? [70, 20] : [62, 12];\n    const [anchorX, anchorY] = isHighlighted ? [35, 29] : [31, 25];\n    icon.width = iconWidth;\n    icon.height = iconHeight;\n\n    icon.addEventListener('mouseover', () => {\n      setIsSubjectWellHovered(true);\n\n      // Highlight\n      if (subjectFeatureIdRef.current !== null && map.getLayer(WELLS_HOVER_LAYER_ID)) {\n        hoveredFeatureIdRef.current = subjectFeatureIdRef.current;\n        map.setFilter(WELLS_HOVER_LAYER_ID, ['==', ['id'], subjectFeatureIdRef.current]);\n      }\n      showTooltip(subjectWell, false, true, subjectWellCoords);\n    });\n\n    icon.addEventListener('mouseout', () => {\n      hoveredFeatureIdRef.current = null;\n      if (map.getLayer(WELLS_HOVER_LAYER_ID)) {\n        map.setFilter(WELLS_HOVER_LAYER_ID, NO_HOVER_FILTER);\n      }\n      popupRef.current?.remove();\n      setIsSubjectWellHovered(false);\n    });\n\n    subjectIconRef.current = new mapboxgl.Marker({\n      element: icon,\n      anchor: 'center',\n      // NOTE: Leaflet anchored the icon at [anchorX, anchorY] from its top-left corner\n      offset: [iconWidth / 2 - anchorX, iconHeight / 2 - anchorY],\n    })\n      .setLngLat(toLngLat(subjectWellCoords))\n      .addTo(map);\n  }, [isSubjectWellHovered, subjectWellCoords, radius, subjectWell, isActiveWellIsSubjectWell]);\n\n  // NOTE: Map Update\n  useEffect(() => {\n    if (radius > MAX_RADIUS) {\n      mapRef.current?.setZoom(1);\n      return;\n    }\n    setTimeout(() => {\n      if (subjectWell) {\n        if (mapRef.current && radiusBoundsRef.current && radius) {\n          mapRef.current.fitBounds(radiusBoundsRef.current, { padding: 5 });\n        }\n      } else if (mapRef.current && wellsBoundsRef.current) {\n        mapRef.current.fitBounds(wellsBoundsRef.current);\n      }\n      if (subjectWellCoords && mapRef.current) {\n        mapRef.current.easeTo({ center: toLngLat(subjectWellCoords), duration: 700 });\n      }\n    }, 500);\n  }, [radius, subjectWell, subjectWellCoords]);\n\n  const handleZoomIn = () => {\n    mapRef.current?.setZoom(zoom + 1);\n  };\n\n  const handleZoomOut = () => {\n    if (zoom > 1) {\n      mapRef.current?.setZoom(zoom - 1);\n    }\n  };\n\n  return (\n    <div className={classNames(styles.mapView, classes.root)}>\n      <div\n        className={classNames(styles.mapMain, classes.map)}\n        ref={containerRef}\n        onDoubleClick={handleZoomIn}\n      >\n        <div className={styles.zoomGroup}>\n          <Tooltip title={zoom < ZOOM_MAX_VALUE ? 'Zoom in' : ''} placement=\"left\">\n            <div\n              className={classNames(styles.zoomButton, {\n                [styles.zoomDisabled]: zoom === ZOOM_MAX_VALUE,\n              })}\n              onClick={handleZoomIn}\n            >\n              <ZoomInIcon className={styles.zoomInOutIcon} />\n            </div>\n          </Tooltip>\n          <Tooltip title={zoom > ZOOM_MIN_VALUE ? 'Zoom out' : ''} placement=\"left\">\n            <div\n              className={classNames(styles.zoomButton, {\n                [styles.zoomDisabled]: zoom === ZOOM_MIN_VALUE,\n              })}\n              onClick={handleZoomOut}\n            >\n              <ZoomOutIcon className={styles.zoomInOutIcon} />\n            </div>\n          </Tooltip>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default OffsetWellMap;\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","NO_HOVER_FILTER","toLngLat","_ref","_ref2","_slicedToArray","lat","makeCirclePolygon","_ref3","radiusMeters","_ref4","lng","points","degreesLng","Math","cos","PI","degreesLat","ring","i","theta","push","sin","coordinates","_ref7","isViewOnly","_ref7$subjectWell","subjectWell","wells","offsetWellIds","radius","handleChanageOffsetWell","_ref7$handleChangeOff","handleChangeOffsetWell","activeWellId","_ref7$isClickable","isClickable","_ref7$classes","classes","subjectWellCoords","useMemo","get","formationColors","getAllFormations","containerRef","useRef","mapRef","popupRef","radiusBoundsRef","wellsBoundsRef","subjectIconRef","wellByFeatureIdRef","Map","subjectFeatureIdRef","hoveredFeatureIdRef","useState","_useState2","_useState","isSubjectWellHovered","setIsSubjectWellHovered","isActiveWellIsSubjectWell","id","prevWells","usePreviousWells","_useState4","_useState3","isMapReady","setIsMapReady","_useState6","_useState5","zoom","setZoom","useEffect","IS_MAPBOX_ENABLED","map","mapboxgl","container","current","style","center","maxZoom","attributionControl","scrollZoom","doubleClickZoom","on","round","getZoom","addSource","data","addLayer","source","paint","filter","layout","remove","_ref5","_ref6","getSource","setData","properties","geometry","showTooltip","well","isOffsetWell","isSubjectWell","coords","popUpContainer","document","createElement","popUpContent","WellTooltip","color","formation","ReactDOM","render","_jsx","jsx","_Fragment","children","Popup","closeButton","offset","setLngLat","setDOMContent","addTo","setPaintProperty","_popupRef$current","offsetWells","unSelectedWells","forEach","includes","sortedWells","wellsBounds","LngLatBounds","clear","index","_well$topHole","topHole","opacity","isActive","order","set","extend","length","setFilter","handleMouseMove","e","_e$features","feature","entry","getCanvas","cursor","handleMouseLeave","_popupRef$current2","point","queryRenderedFeatures","layers","wasSubjectWell","handleClick","_e$features2","_e$features2$","setTimeout","fitBounds","padding","off","isHighlighted","icon","src","_ref8","_ref9","iconWidth","iconHeight","_ref10","_ref11","anchorX","anchorY","width","height","addEventListener","getLayer","_popupRef$current3","Marker","element","anchor","_mapRef$current","easeTo","duration","handleZoomIn","_mapRef$current2","className","classNames","styles","mapView","root","mapMain","ref","onDoubleClick","_jsxs","jsxs","zoomGroup","Tooltip","title","placement","zoomButton","_defineProperty","zoomDisabled","onClick","ZoomInIcon","zoomInOutIcon","_mapRef$current3","ZoomOutIcon"],"mappings":"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"}

package/cjs-bundle/components/OffsetWellPickerV2/components/Map/Map.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),u=require("react-dom"),n=require("prop-types"),i=require("lodash"),o=require("@material-ui/core/styles"),a=require("./Map.css.js"),l=require("../../../../utils/index.js"),s=require("../../../../config/theme/index.js");require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/regenerator"),require("highcharts"),require("highcharts/highcharts-more"),require("highcharts/modules/solid-gauge"),require("highcharts/modules/heatmap"),require("highcharts/modules/boost"),require("highcharts/modules/exporting"),require("highcharts/modules/xrange"),require("highcharts/modules/dumbbell"),require("highcharts/modules/pattern-fill"),require("highcharts/modules/annotations"),require("highcharts-multicolor-series"),require("dompurify"),require("@babel/runtime/helpers/createClass"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/assertThisInitialized"),require("@babel/runtime/helpers/inherits"),require("@babel/runtime/helpers/possibleConstructorReturn"),require("@babel/runtime/helpers/getPrototypeOf"),require("@babel/runtime/helpers/toArray"),require("@babel/runtime/helpers/toConsumableArray"),require("../../../../clients/subscriptions/constants.js"),require("../../../../clients/subscriptions.v1.js"),require("../../../../clients/subscriptions/subscriptions-client.factory.js"),require("../../../../config/extendNative.js"),require("../../../../config/mapboxGl/index.js"),require("mapbox-gl/dist/mapbox-gl.css");var c=require("react/jsx-runtime"),d=require("mapbox-gl");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=f(e),p=f(r),h=f(u),b=f(n),g=f(d);function y(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);r&&(u=u.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,u)}return t}function v(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?y(Object(t),!0).forEach((function(r){m.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):y(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var q=l.mapbox.isValidCoordinates,F=["#FF00FF","#F5BD80","#FF0000","#0080FF","#FF8000","#58ACFA","#FA58F4","#40FF00","#4B8A08","#40FF00","#D8F781"],j=[29.749907,-95.358421],w={type:"FeatureCollection",features:[]},x=function(e){var r=p.default(e,2),t=r[0];return[r[1],t]};function O(e){var r=e.subjectWell,u=e.wells,n=e.offsetWells,l=e.radius,d=e.subjectWellMarkerSize,f=e.wellMarkerSize,b=e.popUpFormatter,y=e.coordsDataPath,O=t.useRef(null),P=t.useRef(null),C=t.useRef(null),M=t.useRef(null),S=t.useRef(null),D=t.useRef(),N=t.useState(!1),k=p.default(N,2),B=k[0],I=k[1],W=t.useMemo((function(){return u.filter((function(e){return!r||r.id!==e.id}))}),[r,u]),E=t.useMemo((function(){return r&&i.get(r,y)}),[r,y]),L=t.useMemo((function(){var e=[],t=!1;W.forEach((function(u){"Null"===u.formation?t=!0:r&&r.formation===u.formation||e.includes(u.formation)||e.push(u.formation)}));var u=r?[r.formation].concat(i.sortBy(e)):i.sortBy(e);t&&!u.includes("Null")&&u.push("Null");var n=u.reduce((function(e,r,t){return v(v({},e),{},m.default({},r,F[t%F.length]))}),{});return[u,n]}),[r,W]),R=p.default(L,2),T=R[0],z=R[1];return t.useEffect((function(){P.current=new g.default.Map({container:O.current,style:"mapbox://styles/mapbox/dark-v9",center:x(j),zoom:1,attributionControl:!1,scrollZoom:!1}),P.current.addControl(new g.default.NavigationControl({showCompass:!1}),"bottom-right"),P.current.on("load",(function(){P.current.addSource("radius-circle",{type:"geojson",data:w}),P.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),P.current.addSource("wells",{type:"geojson",data:w}),P.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),I(!0)}));var e=P.current;return function(){e.remove(),P.current=null,C.current=null,M.current=null}}),[]),t.useEffect((function(){if(P.current&&B){if(!E)return P.current.getSource("radius-circle").setData(w),void(C.current=null);var e=function(e,r){for(var t=p.default(e,2),u=t[0],n=t[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,o=[],a=r/(111320*Math.cos(u*Math.PI/180)),l=r/110574,s=0;s<=i;s+=1){var c=s/i*(2*Math.PI);o.push([n+a*Math.cos(c),u+l*Math.sin(c)])}return o}(E,1609.34*l);P.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[e]}}),C.current=e.reduce((function(e,r){return e.extend(r)}),new g.default.LngLatBounds)}}),[l,E,B]),t.useEffect((function(){var e;if(P.current&&B){var a=D.current;D.current=u,null===(e=S.current)||void 0===e||e.remove();var l=n.map((function(e){return e.id})),m=[],p={},v=new g.default.LngLatBounds;u.forEach((function(e){var t=i.get(e,y);if(t&&q(t)){var u=r&&r.id===e.id,n=l.includes(e.id),o=u?d:f,a=u||n?"#00FFFF":z[e.formation],s=u||n?1:.3;p[e.id]=e,v.extend(x(t)),m.push({type:"Feature",geometry:{type:"Point",coordinates:x(t)},properties:{wellId:e.id,radius:o,color:a,opacity:s}})}})),P.current.getSource("wells").setData({type:"FeatureCollection",features:m}),M.current=m.length?v:null;var F=P.current,j=null,w=function(e){F.getCanvas().style.cursor="pointer";var r=p[e.features[0].properties.wellId];if(r&&r.id!==j&&(j=r.id,b)){var u=document.createElement("div"),n=t.createElement(b,{well:r,color:z[r.formation]});h.default.render(c.jsx(o.MuiThemeProvider,{theme:s.darkTheme,children:n}),u),S.current||(S.current=new g.default.Popup({closeButton:!1,maxWidth:"none"})),S.current.setLngLat(x(i.get(r,y))).setDOMContent(u).addTo(F)}},O=function(){j=null,F.getCanvas().style.cursor=""};return F.on("mousemove","wells",w),F.on("mouseleave","wells",O),setTimeout((function(){P.current&&C.current&&u!==a&&P.current.fitBounds(C.current,{padding:5})}),500),function(){F.off("mousemove","wells",w),F.off("mouseleave","wells",O)}}}),[r,u,n,z,B]),t.useEffect((function(){setTimeout((function(){r?P.current&&C.current&&P.current.fitBounds(C.current,{padding:5}):P.current&&M.current&&P.current.fitBounds(M.current)}),500)}),[l,r,B]),c.jsxs("div",{className:a.map,children:[c.jsx("div",{className:a.mapMain,ref:O}),c.jsxs("div",{className:a.mapFooter,children:[n&&c.jsxs("div",{className:a.mapFooterItem,children:[c.jsx("div",{className:a.mapFooterItemSquare,style:{backgroundColor:"#00FFFF"}}),c.jsx("div",{className:a.mapFooterItemLabel,children:"Selected Offset Wells"})]}),T.map((function(e){return c.jsxs("div",{className:a.mapFooterItem,children:[c.jsx("div",{className:a.mapFooterItemSquare,style:{backgroundColor:z[e]}}),c.jsx("div",{className:a.mapFooterItemLabel,children:e})]},e)}))]})]})}O.propTypes={subjectWell:b.default.shape({id:b.default.number,formation:b.default.string}),wells:b.default.arrayOf(b.default.shape({})).isRequired,offsetWells:b.default.arrayOf(b.default.shape({})),radius:b.default.number.isRequired,subjectWellMarkerSize:b.default.number,wellMarkerSize:b.default.number,popUpFormatter:b.default.func,coordsDataPath:b.default.string},O.defaultProps={subjectWell:null,subjectWellMarkerSize:10,wellMarkerSize:5,popUpFormatter:null,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var P=t.memo(O);module.exports=P;
+"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),u=require("react-dom"),n=require("prop-types"),i=require("lodash"),o=require("@material-ui/core/styles"),a=require("./Map.css.js"),l=require("../../../../utils/index.js"),s=require("../../../../config/theme/index.js");require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/regenerator"),require("highcharts"),require("highcharts/highcharts-more"),require("highcharts/modules/solid-gauge"),require("highcharts/modules/heatmap"),require("highcharts/modules/boost"),require("highcharts/modules/exporting"),require("highcharts/modules/xrange"),require("highcharts/modules/dumbbell"),require("highcharts/modules/pattern-fill"),require("highcharts/modules/annotations"),require("highcharts-multicolor-series"),require("dompurify");var c=require("../../../../config/mapbox/index.js");require("@babel/runtime/helpers/createClass"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/assertThisInitialized"),require("@babel/runtime/helpers/inherits"),require("@babel/runtime/helpers/possibleConstructorReturn"),require("@babel/runtime/helpers/getPrototypeOf"),require("@babel/runtime/helpers/toArray"),require("@babel/runtime/helpers/toConsumableArray"),require("../../../../clients/subscriptions/constants.js"),require("../../../../clients/subscriptions.v1.js"),require("../../../../clients/subscriptions/subscriptions-client.factory.js"),require("../../../../config/extendNative.js"),require("../../../../config/mapboxGl/index.js"),require("mapbox-gl/dist/mapbox-gl.css");var d=require("react/jsx-runtime"),f=require("mapbox-gl");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=m(e),h=m(r),b=m(u),g=m(n),v=m(f);function y(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);r&&(u=u.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,u)}return t}function q(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?y(Object(t),!0).forEach((function(r){p.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):y(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var F=l.mapbox.isValidCoordinates,j=["#FF00FF","#F5BD80","#FF0000","#0080FF","#FF8000","#58ACFA","#FA58F4","#40FF00","#4B8A08","#40FF00","#D8F781"],x=[29.749907,-95.358421],w={type:"FeatureCollection",features:[]},O=function(e){var r=h.default(e,2),t=r[0];return[r[1],t]};function P(e){var r=e.subjectWell,u=e.wells,n=e.offsetWells,l=e.radius,f=e.subjectWellMarkerSize,m=e.wellMarkerSize,g=e.popUpFormatter,y=e.coordsDataPath,P=t.useRef(null),M=t.useRef(null),C=t.useRef(null),S=t.useRef(null),D=t.useRef(null),N=t.useRef(),B=t.useState(!1),k=h.default(B,2),E=k[0],I=k[1],L=t.useMemo((function(){return u.filter((function(e){return!r||r.id!==e.id}))}),[r,u]),W=t.useMemo((function(){return r&&i.get(r,y)}),[r,y]),A=t.useMemo((function(){var e=[],t=!1;L.forEach((function(u){"Null"===u.formation?t=!0:r&&r.formation===u.formation||e.includes(u.formation)||e.push(u.formation)}));var u=r?[r.formation].concat(i.sortBy(e)):i.sortBy(e);t&&!u.includes("Null")&&u.push("Null");var n=u.reduce((function(e,r,t){return q(q({},e),{},p.default({},r,j[t%j.length]))}),{});return[u,n]}),[r,L]),R=h.default(A,2),T=R[0],z=R[1];return t.useEffect((function(){if(c.IS_MAPBOX_ENABLED){M.current=new v.default.Map({container:P.current,style:"mapbox://styles/mapbox/dark-v9",center:O(x),zoom:1,attributionControl:!1,scrollZoom:!1}),M.current.addControl(new v.default.NavigationControl({showCompass:!1}),"bottom-right"),M.current.on("load",(function(){M.current.addSource("radius-circle",{type:"geojson",data:w}),M.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),M.current.addSource("wells",{type:"geojson",data:w}),M.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),I(!0)}));var e=M.current;return function(){e.remove(),M.current=null,C.current=null,S.current=null}}}),[]),t.useEffect((function(){if(M.current&&E){if(!W)return M.current.getSource("radius-circle").setData(w),void(C.current=null);var e=function(e,r){for(var t=h.default(e,2),u=t[0],n=t[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,o=[],a=r/(111320*Math.cos(u*Math.PI/180)),l=r/110574,s=0;s<=i;s+=1){var c=s/i*(2*Math.PI);o.push([n+a*Math.cos(c),u+l*Math.sin(c)])}return o}(W,1609.34*l);M.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[e]}}),C.current=e.reduce((function(e,r){return e.extend(r)}),new v.default.LngLatBounds)}}),[l,W,E]),t.useEffect((function(){var e;if(M.current&&E){var a=N.current;N.current=u,null===(e=D.current)||void 0===e||e.remove();var l=n.map((function(e){return e.id})),c=[],p={},h=new v.default.LngLatBounds;u.forEach((function(e){var t=i.get(e,y);if(t&&F(t)){var u=r&&r.id===e.id,n=l.includes(e.id),o=u?f:m,a=u||n?"#00FFFF":z[e.formation],s=u||n?1:.3;p[e.id]=e,h.extend(O(t)),c.push({type:"Feature",geometry:{type:"Point",coordinates:O(t)},properties:{wellId:e.id,radius:o,color:a,opacity:s}})}})),M.current.getSource("wells").setData({type:"FeatureCollection",features:c}),S.current=c.length?h:null;var q=M.current,j=null,x=function(e){q.getCanvas().style.cursor="pointer";var r=p[e.features[0].properties.wellId];if(r&&r.id!==j&&(j=r.id,g)){var u=document.createElement("div"),n=t.createElement(g,{well:r,color:z[r.formation]});b.default.render(d.jsx(o.MuiThemeProvider,{theme:s.darkTheme,children:n}),u),D.current||(D.current=new v.default.Popup({closeButton:!1,maxWidth:"none"})),D.current.setLngLat(O(i.get(r,y))).setDOMContent(u).addTo(q)}},w=function(){j=null,q.getCanvas().style.cursor=""};return q.on("mousemove","wells",x),q.on("mouseleave","wells",w),setTimeout((function(){M.current&&C.current&&u!==a&&M.current.fitBounds(C.current,{padding:5})}),500),function(){q.off("mousemove","wells",x),q.off("mouseleave","wells",w)}}}),[r,u,n,z,E]),t.useEffect((function(){setTimeout((function(){r?M.current&&C.current&&M.current.fitBounds(C.current,{padding:5}):M.current&&S.current&&M.current.fitBounds(S.current)}),500)}),[l,r,E]),d.jsxs("div",{className:a.map,children:[d.jsx("div",{className:a.mapMain,ref:P}),d.jsxs("div",{className:a.mapFooter,children:[n&&d.jsxs("div",{className:a.mapFooterItem,children:[d.jsx("div",{className:a.mapFooterItemSquare,style:{backgroundColor:"#00FFFF"}}),d.jsx("div",{className:a.mapFooterItemLabel,children:"Selected Offset Wells"})]}),T.map((function(e){return d.jsxs("div",{className:a.mapFooterItem,children:[d.jsx("div",{className:a.mapFooterItemSquare,style:{backgroundColor:z[e]}}),d.jsx("div",{className:a.mapFooterItemLabel,children:e})]},e)}))]})]})}P.propTypes={subjectWell:g.default.shape({id:g.default.number,formation:g.default.string}),wells:g.default.arrayOf(g.default.shape({})).isRequired,offsetWells:g.default.arrayOf(g.default.shape({})),radius:g.default.number.isRequired,subjectWellMarkerSize:g.default.number,wellMarkerSize:g.default.number,popUpFormatter:g.default.func,coordsDataPath:g.default.string},P.defaultProps={subjectWell:null,subjectWellMarkerSize:10,wellMarkerSize:5,popUpFormatter:null,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var M=t.memo(P);module.exports=M;
 //# sourceMappingURL=Map.js.map

package/cjs-bundle/components/OffsetWellPickerV2/components/Map/Map.js.map

@@ -1 +1 @@
-{"version":3,"file":"Map.js","sources":["../../../../../../src/components/OffsetWellPickerV2/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get, sortBy } from 'lodash';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport { theme } from '~/config';\nimport mapboxgl from '~/config/mapboxGl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 10;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#00FFFF';\nconst COLORS = [\n  '#FF00FF',\n  '#F5BD80',\n  '#FF0000',\n  '#0080FF',\n  '#FF8000',\n  '#58ACFA',\n  '#FA58F4',\n  '#40FF00',\n  '#4B8A08',\n  '#40FF00',\n  '#D8F781',\n];\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n  const ring = [];\n  const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n  const distanceY = radiusMeters / 110574;\n  for (let i = 0; i <= points; i += 1) {\n    const theta = (i / points) * (2 * Math.PI);\n    ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n  }\n  return ring;\n};\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n  subjectWell,\n  wells,\n  offsetWells,\n  radius,\n  subjectWellMarkerSize,\n  wellMarkerSize,\n  popUpFormatter,\n  coordsDataPath,\n}) {\n  const mapContainerRef = useRef(null);\n  const mapRef = useRef(null);\n  const radiusCircleBoundsRef = useRef(null);\n  const markersBoundsRef = useRef(null);\n  const popupRef = useRef(null);\n  const prevWellsRef = useRef();\n  const [isMapReady, setIsMapReady] = useState(false);\n\n  const restWells = useMemo(() => {\n    return wells.filter(well => !subjectWell || subjectWell.id !== well.id);\n  }, [subjectWell, wells]);\n\n  const subjectWellCoords = useMemo(() => {\n    return subjectWell && get(subjectWell, coordsDataPath);\n  }, [subjectWell, coordsDataPath]);\n\n  // NOTE: Get well marker colors according to its target formation\n  const [formations, colorDict] = useMemo(() => {\n    // NOTE: Determine well marker colors\n    const restFormations = [];\n    let hasNullFormation = false;\n\n    restWells.forEach(well => {\n      if (well.formation === 'Null') {\n        hasNullFormation = true;\n      } else if (\n        (!subjectWell || subjectWell.formation !== well.formation) &&\n        !restFormations.includes(well.formation)\n      ) {\n        restFormations.push(well.formation);\n      }\n    });\n\n    const sortedFormations = subjectWell\n      ? [subjectWell.formation].concat(sortBy(restFormations))\n      : sortBy(restFormations);\n\n    if (hasNullFormation && !sortedFormations.includes('Null')) {\n      sortedFormations.push('Null');\n    }\n\n    const colors = sortedFormations.reduce(\n      (result, item, idx) => ({\n        ...result,\n        [item]: COLORS[idx % COLORS.length],\n      }),\n      {}\n    );\n\n    return [sortedFormations, colors];\n  }, [subjectWell, restWells]);\n\n  // NOTE: Initialize map\n  useEffect(() => {\n    mapRef.current = new mapboxgl.Map({\n      container: mapContainerRef.current,\n      style: 'mapbox://styles/mapbox/dark-v9',\n      center: toLngLat(DEFAULT_COORDS),\n      zoom: 1,\n      attributionControl: false,\n      scrollZoom: false,\n    });\n\n    mapRef.current.addControl(\n      new mapboxgl.NavigationControl({ showCompass: false }),\n      'bottom-right'\n    );\n\n    // NOTE: Sources/layers can only be added once the style has loaded.\n    // The radius circle layer is added first so well markers render above it (was bringToBack)\n    mapRef.current.on('load', () => {\n      mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n        type: 'geojson',\n        data: EMPTY_FEATURE_COLLECTION,\n      });\n      mapRef.current.addLayer({\n        id: RADIUS_CIRCLE_ID,\n        type: 'fill',\n        source: RADIUS_CIRCLE_ID,\n        paint: {\n          'fill-color': RADIUS_CIRCLE_COLOR,\n          'fill-opacity': 0.2,\n        },\n      });\n\n      mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      mapRef.current.addLayer({\n        id: WELLS_ID,\n        type: 'circle',\n        source: WELLS_ID,\n        paint: {\n          'circle-radius': ['get', 'radius'],\n          'circle-color': ['get', 'color'],\n          'circle-opacity': ['get', 'opacity'],\n        },\n      });\n\n      setIsMapReady(true);\n    });\n\n    const map = mapRef.current;\n    return () => {\n      map.remove();\n      mapRef.current = null;\n      radiusCircleBoundsRef.current = null;\n      markersBoundsRef.current = null;\n    };\n  }, []);\n\n  // NOTE: Radius circle\n  useEffect(() => {\n    if (!mapRef.current || !isMapReady) {\n      return;\n    }\n\n    if (!subjectWellCoords) {\n      mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n      radiusCircleBoundsRef.current = null;\n      return;\n    }\n\n    const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n    mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n      type: 'Feature',\n      geometry: { type: 'Polygon', coordinates: [ring] },\n    });\n    radiusCircleBoundsRef.current = ring.reduce(\n      (bounds, coord) => bounds.extend(coord),\n      new mapboxgl.LngLatBounds()\n    );\n  }, [radius, subjectWellCoords, isMapReady]);\n\n  // NOTE: Well markers\n  useEffect(() => {\n    if (!mapRef.current || !isMapReady) {\n      return undefined;\n    }\n\n    const prevWells = prevWellsRef.current;\n    prevWellsRef.current = wells;\n\n    popupRef.current?.remove();\n\n    const offsetWellIds = offsetWells.map(well => well.id);\n\n    const features = [];\n    const wellsById = {};\n    const bounds = new mapboxgl.LngLatBounds();\n    wells.forEach(well => {\n      const coords = get(well, coordsDataPath);\n\n      if (coords && isValidCoordinates(coords)) {\n        const isWellSubject = subjectWell && subjectWell.id === well.id;\n        const isWellOffset = offsetWellIds.includes(well.id);\n        const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n        const color = isWellSubject || isWellOffset ? OFFSET_WELL_COLOR : colorDict[well.formation];\n        const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n        wellsById[well.id] = well;\n        bounds.extend(toLngLat(coords));\n        features.push({\n          type: 'Feature',\n          geometry: { type: 'Point', coordinates: toLngLat(coords) },\n          properties: { wellId: well.id, radius: r, color, opacity },\n        });\n      }\n    });\n\n    mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n    markersBoundsRef.current = features.length ? bounds : null;\n\n    const map = mapRef.current;\n    let hoveredWellId = null;\n\n    const handleMouseMove = e => {\n      map.getCanvas().style.cursor = 'pointer';\n\n      const well = wellsById[e.features[0].properties.wellId];\n      if (!well || well.id === hoveredWellId) {\n        return;\n      }\n      hoveredWellId = well.id;\n\n      if (popUpFormatter) {\n        // Container to put React generated content in.\n        const popUpContainer = document.createElement('div');\n        const popUpContent = createElement(popUpFormatter, {\n          well,\n          color: colorDict[well.formation],\n        });\n        // NOTE: Custom popup may have buttons\n        ReactDOM.render(\n          <MuiThemeProvider theme={theme.darkTheme}>{popUpContent}</MuiThemeProvider>,\n          popUpContainer\n        );\n\n        if (!popupRef.current) {\n          popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n        }\n        popupRef.current\n          .setLngLat(toLngLat(get(well, coordsDataPath)))\n          .setDOMContent(popUpContainer)\n          .addTo(map);\n      }\n    };\n\n    const handleMouseLeave = () => {\n      hoveredWellId = null;\n      map.getCanvas().style.cursor = '';\n    };\n\n    map.on('mousemove', WELLS_ID, handleMouseMove);\n    map.on('mouseleave', WELLS_ID, handleMouseLeave);\n\n    setTimeout(() => {\n      if (mapRef.current && radiusCircleBoundsRef.current && wells !== prevWells) {\n        mapRef.current.fitBounds(radiusCircleBoundsRef.current, { padding: 5 });\n      }\n    }, 500);\n\n    return () => {\n      map.off('mousemove', WELLS_ID, handleMouseMove);\n      map.off('mouseleave', WELLS_ID, handleMouseLeave);\n    };\n  }, [subjectWell, wells, offsetWells, colorDict, isMapReady]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (subjectWell) {\n        if (mapRef.current && radiusCircleBoundsRef.current) {\n          mapRef.current.fitBounds(radiusCircleBoundsRef.current, {\n            padding: 5,\n          });\n        }\n      } else if (mapRef.current && markersBoundsRef.current) {\n        mapRef.current.fitBounds(markersBoundsRef.current);\n      }\n    }, 500);\n  }, [radius, subjectWell, isMapReady]);\n\n  return (\n    <div className={styles.map}>\n      <div className={styles.mapMain} ref={mapContainerRef} />\n\n      <div className={styles.mapFooter}>\n        {offsetWells && (\n          <div className={styles.mapFooterItem}>\n            <div\n              className={styles.mapFooterItemSquare}\n              style={{ backgroundColor: OFFSET_WELL_COLOR }}\n            />\n            <div className={styles.mapFooterItemLabel}>Selected Offset Wells</div>\n          </div>\n        )}\n\n        {formations.map(item => (\n          <div className={styles.mapFooterItem} key={item}>\n            <div\n              className={styles.mapFooterItemSquare}\n              style={{ backgroundColor: colorDict[item] }}\n            />\n            <div className={styles.mapFooterItemLabel}>{item}</div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nWellsMap.propTypes = {\n  subjectWell: PropTypes.shape({\n    id: PropTypes.number,\n    formation: PropTypes.string,\n  }),\n  wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n  offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n  radius: PropTypes.number.isRequired,\n  subjectWellMarkerSize: PropTypes.number,\n  wellMarkerSize: PropTypes.number,\n  popUpFormatter: PropTypes.func,\n  coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n  subjectWell: null,\n  subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n  wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n  popUpFormatter: null,\n  coordsDataPath: 'settings.top_hole.coordinates',\n  offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","COLORS","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","popUpFormatter","coordsDataPath","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","restWells","useMemo","filter","well","id","subjectWellCoords","get","restFormations","hasNullFormation","forEach","formation","includes","push","sortedFormations","concat","sortBy","colors","reduce","result","item","idx","length","_useMemo2","_useMemo","formations","colorDict","useEffect","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","source","paint","map","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","sin","makeCirclePolygon","geometry","coordinates","bounds","coord","extend","LngLatBounds","_popupRef$current","prevWells","offsetWellIds","wellsById","coords","isWellSubject","isWellOffset","r","color","opacity","properties","wellId","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","jsx","MuiThemeProvider","theme","darkTheme","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","setTimeout","fitBounds","padding","off","_jsxs","className","styles","mapMain","ref","jsxs","mapFooter","mapFooterItem","mapFooterItemSquare","backgroundColor","mapFooterItemLabel","propTypes","PropTypes","shape","number","string","arrayOf","isRequired","func","defaultProps","memo"],"mappings":"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"}
+{"version":3,"file":"Map.js","sources":["../../../../../../src/components/OffsetWellPickerV2/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get, sortBy } from 'lodash';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport { theme } from '~/config';\nimport mapboxgl from '~/config/mapboxGl';\nimport { IS_MAPBOX_ENABLED } from '~/config/mapbox';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 10;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#00FFFF';\nconst COLORS = [\n  '#FF00FF',\n  '#F5BD80',\n  '#FF0000',\n  '#0080FF',\n  '#FF8000',\n  '#58ACFA',\n  '#FA58F4',\n  '#40FF00',\n  '#4B8A08',\n  '#40FF00',\n  '#D8F781',\n];\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n  const ring = [];\n  const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n  const distanceY = radiusMeters / 110574;\n  for (let i = 0; i <= points; i += 1) {\n    const theta = (i / points) * (2 * Math.PI);\n    ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n  }\n  return ring;\n};\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n  subjectWell,\n  wells,\n  offsetWells,\n  radius,\n  subjectWellMarkerSize,\n  wellMarkerSize,\n  popUpFormatter,\n  coordsDataPath,\n}) {\n  const mapContainerRef = useRef(null);\n  const mapRef = useRef(null);\n  const radiusCircleBoundsRef = useRef(null);\n  const markersBoundsRef = useRef(null);\n  const popupRef = useRef(null);\n  const prevWellsRef = useRef();\n  const [isMapReady, setIsMapReady] = useState(false);\n\n  const restWells = useMemo(() => {\n    return wells.filter(well => !subjectWell || subjectWell.id !== well.id);\n  }, [subjectWell, wells]);\n\n  const subjectWellCoords = useMemo(() => {\n    return subjectWell && get(subjectWell, coordsDataPath);\n  }, [subjectWell, coordsDataPath]);\n\n  // NOTE: Get well marker colors according to its target formation\n  const [formations, colorDict] = useMemo(() => {\n    // NOTE: Determine well marker colors\n    const restFormations = [];\n    let hasNullFormation = false;\n\n    restWells.forEach(well => {\n      if (well.formation === 'Null') {\n        hasNullFormation = true;\n      } else if (\n        (!subjectWell || subjectWell.formation !== well.formation) &&\n        !restFormations.includes(well.formation)\n      ) {\n        restFormations.push(well.formation);\n      }\n    });\n\n    const sortedFormations = subjectWell\n      ? [subjectWell.formation].concat(sortBy(restFormations))\n      : sortBy(restFormations);\n\n    if (hasNullFormation && !sortedFormations.includes('Null')) {\n      sortedFormations.push('Null');\n    }\n\n    const colors = sortedFormations.reduce(\n      (result, item, idx) => ({\n        ...result,\n        [item]: COLORS[idx % COLORS.length],\n      }),\n      {}\n    );\n\n    return [sortedFormations, colors];\n  }, [subjectWell, restWells]);\n\n  // NOTE: Initialize map\n  useEffect(() => {\n    if (!IS_MAPBOX_ENABLED) return undefined;\n\n    mapRef.current = new mapboxgl.Map({\n      container: mapContainerRef.current,\n      style: 'mapbox://styles/mapbox/dark-v9',\n      center: toLngLat(DEFAULT_COORDS),\n      zoom: 1,\n      attributionControl: false,\n      scrollZoom: false,\n    });\n\n    mapRef.current.addControl(\n      new mapboxgl.NavigationControl({ showCompass: false }),\n      'bottom-right'\n    );\n\n    // NOTE: Sources/layers can only be added once the style has loaded.\n    // The radius circle layer is added first so well markers render above it (was bringToBack)\n    mapRef.current.on('load', () => {\n      mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n        type: 'geojson',\n        data: EMPTY_FEATURE_COLLECTION,\n      });\n      mapRef.current.addLayer({\n        id: RADIUS_CIRCLE_ID,\n        type: 'fill',\n        source: RADIUS_CIRCLE_ID,\n        paint: {\n          'fill-color': RADIUS_CIRCLE_COLOR,\n          'fill-opacity': 0.2,\n        },\n      });\n\n      mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n      mapRef.current.addLayer({\n        id: WELLS_ID,\n        type: 'circle',\n        source: WELLS_ID,\n        paint: {\n          'circle-radius': ['get', 'radius'],\n          'circle-color': ['get', 'color'],\n          'circle-opacity': ['get', 'opacity'],\n        },\n      });\n\n      setIsMapReady(true);\n    });\n\n    const map = mapRef.current;\n    return () => {\n      map.remove();\n      mapRef.current = null;\n      radiusCircleBoundsRef.current = null;\n      markersBoundsRef.current = null;\n    };\n  }, []);\n\n  // NOTE: Radius circle\n  useEffect(() => {\n    if (!mapRef.current || !isMapReady) {\n      return;\n    }\n\n    if (!subjectWellCoords) {\n      mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n      radiusCircleBoundsRef.current = null;\n      return;\n    }\n\n    const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n    mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n      type: 'Feature',\n      geometry: { type: 'Polygon', coordinates: [ring] },\n    });\n    radiusCircleBoundsRef.current = ring.reduce(\n      (bounds, coord) => bounds.extend(coord),\n      new mapboxgl.LngLatBounds()\n    );\n  }, [radius, subjectWellCoords, isMapReady]);\n\n  // NOTE: Well markers\n  useEffect(() => {\n    if (!mapRef.current || !isMapReady) {\n      return undefined;\n    }\n\n    const prevWells = prevWellsRef.current;\n    prevWellsRef.current = wells;\n\n    popupRef.current?.remove();\n\n    const offsetWellIds = offsetWells.map(well => well.id);\n\n    const features = [];\n    const wellsById = {};\n    const bounds = new mapboxgl.LngLatBounds();\n    wells.forEach(well => {\n      const coords = get(well, coordsDataPath);\n\n      if (coords && isValidCoordinates(coords)) {\n        const isWellSubject = subjectWell && subjectWell.id === well.id;\n        const isWellOffset = offsetWellIds.includes(well.id);\n        const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n        const color = isWellSubject || isWellOffset ? OFFSET_WELL_COLOR : colorDict[well.formation];\n        const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n        wellsById[well.id] = well;\n        bounds.extend(toLngLat(coords));\n        features.push({\n          type: 'Feature',\n          geometry: { type: 'Point', coordinates: toLngLat(coords) },\n          properties: { wellId: well.id, radius: r, color, opacity },\n        });\n      }\n    });\n\n    mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n    markersBoundsRef.current = features.length ? bounds : null;\n\n    const map = mapRef.current;\n    let hoveredWellId = null;\n\n    const handleMouseMove = e => {\n      map.getCanvas().style.cursor = 'pointer';\n\n      const well = wellsById[e.features[0].properties.wellId];\n      if (!well || well.id === hoveredWellId) {\n        return;\n      }\n      hoveredWellId = well.id;\n\n      if (popUpFormatter) {\n        // Container to put React generated content in.\n        const popUpContainer = document.createElement('div');\n        const popUpContent = createElement(popUpFormatter, {\n          well,\n          color: colorDict[well.formation],\n        });\n        // NOTE: Custom popup may have buttons\n        ReactDOM.render(\n          <MuiThemeProvider theme={theme.darkTheme}>{popUpContent}</MuiThemeProvider>,\n          popUpContainer\n        );\n\n        if (!popupRef.current) {\n          popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n        }\n        popupRef.current\n          .setLngLat(toLngLat(get(well, coordsDataPath)))\n          .setDOMContent(popUpContainer)\n          .addTo(map);\n      }\n    };\n\n    const handleMouseLeave = () => {\n      hoveredWellId = null;\n      map.getCanvas().style.cursor = '';\n    };\n\n    map.on('mousemove', WELLS_ID, handleMouseMove);\n    map.on('mouseleave', WELLS_ID, handleMouseLeave);\n\n    setTimeout(() => {\n      if (mapRef.current && radiusCircleBoundsRef.current && wells !== prevWells) {\n        mapRef.current.fitBounds(radiusCircleBoundsRef.current, { padding: 5 });\n      }\n    }, 500);\n\n    return () => {\n      map.off('mousemove', WELLS_ID, handleMouseMove);\n      map.off('mouseleave', WELLS_ID, handleMouseLeave);\n    };\n  }, [subjectWell, wells, offsetWells, colorDict, isMapReady]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (subjectWell) {\n        if (mapRef.current && radiusCircleBoundsRef.current) {\n          mapRef.current.fitBounds(radiusCircleBoundsRef.current, {\n            padding: 5,\n          });\n        }\n      } else if (mapRef.current && markersBoundsRef.current) {\n        mapRef.current.fitBounds(markersBoundsRef.current);\n      }\n    }, 500);\n  }, [radius, subjectWell, isMapReady]);\n\n  return (\n    <div className={styles.map}>\n      <div className={styles.mapMain} ref={mapContainerRef} />\n\n      <div className={styles.mapFooter}>\n        {offsetWells && (\n          <div className={styles.mapFooterItem}>\n            <div\n              className={styles.mapFooterItemSquare}\n              style={{ backgroundColor: OFFSET_WELL_COLOR }}\n            />\n            <div className={styles.mapFooterItemLabel}>Selected Offset Wells</div>\n          </div>\n        )}\n\n        {formations.map(item => (\n          <div className={styles.mapFooterItem} key={item}>\n            <div\n              className={styles.mapFooterItemSquare}\n              style={{ backgroundColor: colorDict[item] }}\n            />\n            <div className={styles.mapFooterItemLabel}>{item}</div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nWellsMap.propTypes = {\n  subjectWell: PropTypes.shape({\n    id: PropTypes.number,\n    formation: PropTypes.string,\n  }),\n  wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n  offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n  radius: PropTypes.number.isRequired,\n  subjectWellMarkerSize: PropTypes.number,\n  wellMarkerSize: PropTypes.number,\n  popUpFormatter: PropTypes.func,\n  coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n  subjectWell: null,\n  subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n  wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n  popUpFormatter: null,\n  coordsDataPath: 'settings.top_hole.coordinates',\n  offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","COLORS","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","popUpFormatter","coordsDataPath","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","restWells","useMemo","filter","well","id","subjectWellCoords","get","restFormations","hasNullFormation","forEach","formation","includes","push","sortedFormations","concat","sortBy","colors","reduce","result","item","idx","length","_useMemo2","_useMemo","formations","colorDict","useEffect","IS_MAPBOX_ENABLED","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","source","paint","map","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","sin","makeCirclePolygon","geometry","coordinates","bounds","coord","extend","LngLatBounds","_popupRef$current","prevWells","offsetWellIds","wellsById","coords","isWellSubject","isWellOffset","r","color","opacity","properties","wellId","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","jsx","MuiThemeProvider","theme","darkTheme","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","setTimeout","fitBounds","padding","off","_jsxs","className","styles","mapMain","ref","jsxs","mapFooter","mapFooterItem","mapFooterItemSquare","backgroundColor","mapFooterItemLabel","propTypes","PropTypes","shape","number","string","arrayOf","isRequired","func","defaultProps","memo"],"mappings":"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"}

package/cjs-bundle/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/slicedToArray"),r=require("react"),t=require("react-dom"),u=require("prop-types"),n=require("lodash"),o=require("./Map.css.js"),l=require("../../../../../../utils/index.js");require("../../../../../../config/mapboxGl/index.js"),require("mapbox-gl/dist/mapbox-gl.css");var a=require("react/jsx-runtime"),i=require("mapbox-gl");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(e),d=c(t),f=c(u),p=c(i),m=l.mapbox.isValidCoordinates,g=[29.749907,-95.358421],v={type:"FeatureCollection",features:[]},y=function(e){var r=s.default(e,2),t=r[0];return[r[1],t]};function h(e){var t=e.open,u=e.subjectWell,l=e.wells,i=e.offsetWells,c=e.radius,f=e.formationColors,h=e.popUpFormatter,w=e.coordsDataPath,b=e.onAddOffsetWell,q=e.onDeleteOffsetWell,x=r.useRef(null),D=r.useRef(),B=r.useRef(null),j=r.useRef(null),C=r.useRef(null),F=r.useRef(),R=r.useState(!1),W=s.default(R,2),M=W[0],P=W[1],E=r.useMemo((function(){return u&&n.get(u,w)}),[u,w]);return r.useEffect((function(){t&&!D.current&&(D.current=new p.default.Map({container:x.current,style:"mapbox://styles/mapbox/dark-v9",center:y(g),zoom:1,attributionControl:!1,scrollZoom:!1}),D.current.addControl(new p.default.NavigationControl({showCompass:!1}),"bottom-right"),D.current.on("load",(function(){D.current.addSource("radius-circle",{type:"geojson",data:v}),D.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),D.current.addSource("wells",{type:"geojson",data:v}),D.current.addLayer({id:"wells",type:"circle",source:"wells",layout:{"circle-sort-key":["get","sortKey"]},paint:{"circle-radius":["get","radius"],"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),P(!0)})))}),[t]),r.useEffect((function(){return function(){D.current&&(D.current.remove(),D.current=null,B.current=null,j.current=null)}}),[]),r.useEffect((function(){if(D.current&&M&&t){if(!E)return D.current.getSource("radius-circle").setData(v),void(B.current=null);var e=function(e,r){for(var t=s.default(e,2),u=t[0],n=t[1],o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,l=[],a=r/(111320*Math.cos(u*Math.PI/180)),i=r/110574,c=0;c<=o;c+=1){var d=c/o*(2*Math.PI);l.push([n+a*Math.cos(d),u+i*Math.sin(d)])}return l}(E,1609.34*c);D.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[e]}}),B.current=e.reduce((function(e,r){return e.extend(r)}),new p.default.LngLatBounds)}}),[c,E,t,M]),r.useEffect((function(){if(D.current&&M&&t){var e=F.current;F.current=l;var o=i.map((function(e){return e.id})),c=n.sortBy(l,(function(e){return o.includes(e.id)})),s=[],g={},v=new p.default.LngLatBounds;c.forEach((function(e){var r=n.get(e,w);if(r&&m(r)){var t=u&&u.id===e.id,l=o.includes(e.id),a=t?10:5,i=t||l?"#00FFFF":n.get(f,e.formation,"#BDBDBD"),c=t||l?1:.3;g[e.id]=e,v.extend(y(r)),s.push({type:"Feature",geometry:{type:"Point",coordinates:y(r)},properties:{wellId:e.id,radius:a,color:i,opacity:c,sortKey:l?1:0}})}})),D.current.getSource("wells").setData({type:"FeatureCollection",features:s}),j.current=s.length?v:null;var x=D.current,R=null,W=function(e){x.getCanvas().style.cursor="pointer";var t=g[e.features[0].properties.wellId];if(t&&t.id!==R&&(R=t.id,h)){var u=document.createElement("div"),o=r.createElement(h,{well:t,color:n.get(f,t.formation,"#BDBDBD")});d.default.render(a.jsx(a.Fragment,{children:o}),u),C.current||(C.current=new p.default.Popup({closeButton:!1,maxWidth:"none"})),C.current.setLngLat(y(n.get(t,w))).setDOMContent(u).addTo(x)}},P=function(){var e;R=null,x.getCanvas().style.cursor="",null===(e=C.current)||void 0===e||e.remove()},E=function(e){var r=e.features[0].properties.wellId,t=u&&u.id===r;o.includes(r)&&!t?q(r):b(r)};return x.on("mousemove","wells",W),x.on("mouseleave","wells",P),x.on("click","wells",E),setTimeout((function(){D.current&&B.current&&l!==e&&D.current.fitBounds(B.current,{padding:5})}),500),function(){x.off("mousemove","wells",W),x.off("mouseleave","wells",P),x.off("click","wells",E)}}}),[u,l,i,t,M]),r.useEffect((function(){t&&setTimeout((function(){u?D.current&&B.current&&D.current.fitBounds(B.current,{padding:5}):D.current&&j.current&&D.current.fitBounds(j.current)}),500)}),[c,u,t,M]),a.jsx("div",{className:o.map,children:a.jsx("div",{className:o.mapMain,ref:x})})}h.propTypes={open:f.default.bool.isRequired,subjectWell:f.default.shape({id:f.default.number,formation:f.default.string}),wells:f.default.arrayOf(f.default.shape({})).isRequired,offsetWells:f.default.arrayOf(f.default.shape({})),radius:f.default.number.isRequired,formationColors:f.default.shape({}).isRequired,popUpFormatter:f.default.func,coordsDataPath:f.default.string,onAddOffsetWell:f.default.func.isRequired,onDeleteOffsetWell:f.default.func.isRequired},h.defaultProps={subjectWell:null,popUpFormatter:null,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var w=r.memo(h);module.exports=w;
+"use strict";var e=require("@babel/runtime/helpers/slicedToArray"),r=require("react"),t=require("react-dom"),u=require("prop-types"),n=require("lodash"),o=require("./Map.css.js"),l=require("../../../../../../utils/index.js");require("../../../../../../config/mapboxGl/index.js");var a=require("../../../../../../config/mapbox/index.js");require("mapbox-gl/dist/mapbox-gl.css");var i=require("react/jsx-runtime"),c=require("mapbox-gl");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(e),f=s(t),p=s(u),m=s(c),g=l.mapbox.isValidCoordinates,v=[29.749907,-95.358421],y={type:"FeatureCollection",features:[]},h=function(e){var r=d.default(e,2),t=r[0];return[r[1],t]};function w(e){var t=e.open,u=e.subjectWell,l=e.wells,c=e.offsetWells,s=e.radius,p=e.formationColors,w=e.popUpFormatter,b=e.coordsDataPath,x=e.onAddOffsetWell,q=e.onDeleteOffsetWell,D=r.useRef(null),B=r.useRef(),j=r.useRef(null),C=r.useRef(null),F=r.useRef(null),R=r.useRef(),M=r.useState(!1),W=d.default(M,2),E=W[0],P=W[1],L=r.useMemo((function(){return u&&n.get(u,b)}),[u,b]);return r.useEffect((function(){a.IS_MAPBOX_ENABLED&&t&&!B.current&&(B.current=new m.default.Map({container:D.current,style:"mapbox://styles/mapbox/dark-v9",center:h(v),zoom:1,attributionControl:!1,scrollZoom:!1}),B.current.addControl(new m.default.NavigationControl({showCompass:!1}),"bottom-right"),B.current.on("load",(function(){B.current.addSource("radius-circle",{type:"geojson",data:y}),B.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),B.current.addSource("wells",{type:"geojson",data:y}),B.current.addLayer({id:"wells",type:"circle",source:"wells",layout:{"circle-sort-key":["get","sortKey"]},paint:{"circle-radius":["get","radius"],"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),P(!0)})))}),[t]),r.useEffect((function(){return function(){B.current&&(B.current.remove(),B.current=null,j.current=null,C.current=null)}}),[]),r.useEffect((function(){if(B.current&&E&&t){if(!L)return B.current.getSource("radius-circle").setData(y),void(j.current=null);var e=function(e,r){for(var t=d.default(e,2),u=t[0],n=t[1],o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,l=[],a=r/(111320*Math.cos(u*Math.PI/180)),i=r/110574,c=0;c<=o;c+=1){var s=c/o*(2*Math.PI);l.push([n+a*Math.cos(s),u+i*Math.sin(s)])}return l}(L,1609.34*s);B.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[e]}}),j.current=e.reduce((function(e,r){return e.extend(r)}),new m.default.LngLatBounds)}}),[s,L,t,E]),r.useEffect((function(){if(B.current&&E&&t){var e=R.current;R.current=l;var o=c.map((function(e){return e.id})),a=n.sortBy(l,(function(e){return o.includes(e.id)})),s=[],d={},v=new m.default.LngLatBounds;a.forEach((function(e){var r=n.get(e,b);if(r&&g(r)){var t=u&&u.id===e.id,l=o.includes(e.id),a=t?10:5,i=t||l?"#00FFFF":n.get(p,e.formation,"#BDBDBD"),c=t||l?1:.3;d[e.id]=e,v.extend(h(r)),s.push({type:"Feature",geometry:{type:"Point",coordinates:h(r)},properties:{wellId:e.id,radius:a,color:i,opacity:c,sortKey:l?1:0}})}})),B.current.getSource("wells").setData({type:"FeatureCollection",features:s}),C.current=s.length?v:null;var y=B.current,D=null,M=function(e){y.getCanvas().style.cursor="pointer";var t=d[e.features[0].properties.wellId];if(t&&t.id!==D&&(D=t.id,w)){var u=document.createElement("div"),o=r.createElement(w,{well:t,color:n.get(p,t.formation,"#BDBDBD")});f.default.render(i.jsx(i.Fragment,{children:o}),u),F.current||(F.current=new m.default.Popup({closeButton:!1,maxWidth:"none"})),F.current.setLngLat(h(n.get(t,b))).setDOMContent(u).addTo(y)}},W=function(){var e;D=null,y.getCanvas().style.cursor="",null===(e=F.current)||void 0===e||e.remove()},P=function(e){var r=e.features[0].properties.wellId,t=u&&u.id===r;o.includes(r)&&!t?q(r):x(r)};return y.on("mousemove","wells",M),y.on("mouseleave","wells",W),y.on("click","wells",P),setTimeout((function(){B.current&&j.current&&l!==e&&B.current.fitBounds(j.current,{padding:5})}),500),function(){y.off("mousemove","wells",M),y.off("mouseleave","wells",W),y.off("click","wells",P)}}}),[u,l,c,t,E]),r.useEffect((function(){t&&setTimeout((function(){u?B.current&&j.current&&B.current.fitBounds(j.current,{padding:5}):B.current&&C.current&&B.current.fitBounds(C.current)}),500)}),[s,u,t,E]),i.jsx("div",{className:o.map,children:i.jsx("div",{className:o.mapMain,ref:D})})}w.propTypes={open:p.default.bool.isRequired,subjectWell:p.default.shape({id:p.default.number,formation:p.default.string}),wells:p.default.arrayOf(p.default.shape({})).isRequired,offsetWells:p.default.arrayOf(p.default.shape({})),radius:p.default.number.isRequired,formationColors:p.default.shape({}).isRequired,popUpFormatter:p.default.func,coordsDataPath:p.default.string,onAddOffsetWell:p.default.func.isRequired,onDeleteOffsetWell:p.default.func.isRequired},w.defaultProps={subjectWell:null,popUpFormatter:null,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var b=r.memo(w);module.exports=b;
 //# sourceMappingURL=Map.js.map