npm - @corva/ui - Versions diffs - 3.72.0-0 → 3.72.0-3 - Mend

@corva/ui 3.72.0-0 → 3.72.0-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1458) hide show

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

	@@ -1 +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 { 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":"kuBAoBQA,EAAuBC,EAAMA,OAA7BD,mBACFE,EAAiB,CAAC,WAAY,WAmB9BC,EAA2B,CAAEC,KAAM,oBAAqBC,SAAU,IAClEC,EAAkB,CAAC,KAAM,CAAC,OAAQ,GAGlCC,EAAW,SAAHC,GAAA,IAAAC,EAAAC,EAAAA,QAAAF,EAAA,GAAKG,EAAGF,EAAA,GAAK,MAAM,CAANA,EAAA,GAAYE,EAAI,EAGrCC,EAAoB,SAAHC,EAAgBC,GAIrC,IAJmE,IAAAC,EAAAL,EAAAA,QAAAG,EAAA,GAAzCF,EAAGI,EAAA,GAAEC,EAAGD,EAAA,GAAiBE,yDAAS,GACtDC,EAAaJ,GAAgB,OAASK,KAAKC,IAAKT,EAAMQ,KAAKE,GAAM,MACjEC,EAAaR,EAAe,OAC5BS,EAAO,GACJC,EAAI,EAAGA,GAAKP,EAAQO,GAAK,EAAG,CACnC,IAAMC,EAASD,EAAIP,EAAU,EAAIE,KAAKE,GACtCE,EAAKG,KAAK,CAACV,EAAME,EAAaC,KAAKC,IAAIK,GAAQd,EAAMW,EAAaH,KAAKQ,IAAIF,IAC7E,CACA,MAAO,CAAErB,KAAM,UAAWwB,YAAa,CAACL,GAC1C,iBAYsB,SAWhBM,GAAA,IAVJC,IAAAA,WAAUC,EAAAF,EACVG,YAAAA,aAAc,KAAID,EAClBE,IAAAA,MACAC,IAAAA,cACAC,IAAAA,OACAC,IAAAA,wBAAuBC,EAAAR,EACvBS,uBAAAA,aAAyBF,EAAuBC,EAChDE,IAAAA,aAAYC,EAAAX,EACZY,YAAAA,cAAkBD,EAAAE,EAAAb,EAClBc,QAAAA,OAAO,IAAAD,EAAG,CAAA,EAAEA,EAENE,EAAoBC,EAAAA,SAAQ,WAChC,OAAOb,GAAec,EAAAA,IAAId,EAAa,sBACzC,GAAG,CAACA,IACEe,EAAkBF,EAAAA,SAAQ,WAAA,OAAMG,EAAAA,iBAAiBf,KAAQ,CAACA,IAE1DgB,EAAeC,EAAAA,SACfC,EAASD,EAAAA,SACTE,EAAWF,EAAAA,SACXG,EAAkBH,SAAO,MACzBI,EAAiBJ,SAAO,MACxBK,EAAiBL,EAAAA,SACjBM,EAAqBN,EAAAA,OAAO,IAAIO,KAChCC,EAAsBR,SAAO,MAC7BS,EAAsBT,SAAO,MACqBU,EAAAA,EAAQA,UAAC,GAAMC,EAAAnD,EAAAA,QAAAoD,EAAA,GAAhEC,EAAoBF,EAAA,GAAEG,EAAuBH,EAAA,GAC9CI,GAA4BjC,aAAW,EAAXA,EAAakC,MAAO3B,EAChD4B,EAAYC,mBAAiBnC,GACC2B,EAAAA,EAAQA,UAAC,GAAMS,GAAA3D,EAAAA,QAAA4D,EAAA,GAA5CC,GAAUF,GAAA,GAAEG,GAAaH,GAAA,GACRT,GAAAA,EAAQA,SAtEV,GAsE2Ba,GAAA/D,EAAAA,QAAAgE,GAAA,GAA1CC,GAAIF,GAAA,GAAEG,GAAOH,GAAA,GAGpBI,EAAAA,WAAU,WACR,GAAKC,EAAAA,kBAAL,CAEA,IAAMC,EAAM,IAAIC,EAAQ,QAACvB,IAAI,CAC3BwB,UAAWhC,EAAaiC,QACxBC,MAAO,iCACPC,OAAQ7E,EAASL,GACjByE,KAhFkB,EAkFlBU,QAjFiB,GAkFjBC,oBAAoB,EACpBC,YAAY,EACZC,iBAAiB,IAiFnB,OA/EArC,EAAO+B,QAAUH,EAGjBA,EAAIU,GAAG,WAAW,WAAA,OAAMb,GAAQzD,KAAKuE,MAAMX,EAAIY,eAG/CZ,EAAIU,GAAG,QAAQ,WACbV,EAAIa,UAzFe,gBAyFa,CAAExF,KAAM,UAAWyF,KAAM1F,IACzD4E,EAAIe,SAAS,CACX5B,GA1FgB,qBA2FhB9D,KAAM,OACN2F,OA7FiB,gBA8FjBC,MAAO,CACL,aAvGkB,UAwGlB,eAAgB,MAIpBjB,EAAIa,UAlGc,QAkGa,CAAExF,KAAM,UAAWyF,KAAM1F,IACxD4E,EAAIe,SAAS,CACX5B,GAnGoB,aAoGpB9D,KAAM,SACN2F,OAtGgB,QAuGhBE,OAAQ,CAAC,KAAM,CAAC,MAAO,iBAAiB,GACxCD,MAAO,CACL,gBArHoB,GAsHpB,eAAgB,CAAC,MAAO,SACxB,iBAAkB,OAGtBjB,EAAIe,SAAS,CACX5B,GA7Ge,eA8Gf9D,KAAM,SACN2F,OAjHgB,QAkHhBG,OAAQ,CACN,kBAAmB,CAAC,MAAO,UAE7BF,MAAO,CACL,gBAnIe,EAoIf,eAAgB,CAAC,MAAO,SACxB,iBAAkB,CAAC,MAAO,cAG9BjB,EAAIe,SAAS,CACX5B,GAzHsB,yBA0HtB9D,KAAM,SACN2F,OA9HgB,QA+HhBE,OAAQ,CAAC,KAAM,CAAC,MAAO,aAAa,GACpCD,MAAO,CACL,gBA7IoB,GA8IpB,eAAgB,CAAC,MAAO,SACxB,iBAAkB,OAGtBjB,EAAIe,SAAS,CACX5B,GAnIqB,wBAoIrB9D,KAAM,SACN2F,OAzIgB,QA0IhBE,OAAQ3F,EACR0F,MAAO,CACL,gBAAiB,CACf,OACA,CAAC,MAAO,iBA3JK,EACK,IA8JpB,eAAgB,CACd,OACA,CAAC,MAAO,iBA7JS,UA+JjB,CAAC,MAAO,UAEV,iBAAkB,OAItBxB,IAAc,EAChB,IAEO,WACLO,EAAIoB,SACJhD,EAAO+B,QAAU,KACjB9B,EAAS8B,QAAU,KACnB3B,EAAe2B,QAAU,KACzB7B,EAAgB6B,QAAU,KAC1B5B,EAAe4B,QAAU,KAlGa,CAoGzC,GAAE,IAGHL,EAAAA,WAAU,WAnJY,IAAHuB,EAAgBtF,EAAiBuF,EAA5B1F,EAAKK,EACvBE,EACAI,EAkJJ+B,EAAgB6B,QACdtC,GAAqBT,GArJNiE,EAsJKxD,EAtJW9B,EA/Bd,QAqLsBqB,EAtJSkE,EAAA3F,EAAAA,QAAA0F,EAAA,GAA5BzF,EAAG0F,EAAA,GAAErF,EAAGqF,EAAA,GAC1BnF,EAAaJ,GAAgB,OAASK,KAAKC,IAAKT,EAAMQ,KAAKE,GAAM,MAEhE,CACL,CAACL,EAAME,EAAYP,GAFfW,EAAaR,EAAe,SAGhC,CAACE,EAAME,EAAYP,EAAMW,KAkJnB,KAEN,IAAMyD,EAAM5B,EAAO+B,QACdH,GAAQR,IAIbQ,EAAIuB,UAvLiB,iBAuLWC,QAC9B3D,GAAqBT,EACjB,CACE/B,KAAM,UACNoG,WAAY,CAAE,EACdC,SAAU7F,EAAkBgC,EAlMjB,QAkMoCT,IAEjDhC,EAEP,GAAE,CAACgC,EAAQS,EAAmB2B,KAE/B,IAAMmC,GAAc,SAACC,EAAMC,EAAcC,EAAeC,GACtD,IAAMC,EAAiBC,SAASC,cAAc,OACxCC,EAAeD,gBAAcE,EAAAA,cAAe,CAChDrF,WAAAA,EACA6E,KAAAA,EACAS,MAAOtE,EAAAA,IAAIC,EAAiB4D,EAAKU,UAAW,WAC5CT,aAAAA,EACAC,cAAAA,EACApE,YAAAA,IAEF6E,UAASC,OAAOC,EAAAC,IAAAC,WAAA,CAAAC,SAAGT,IAAkBH,GAChC3D,EAAS8B,UACZ9B,EAAS8B,QAAU,IAAIF,EAAQ,QAAC4C,MAAM,CACpCC,aAAa,EACbC,OA1NsB,MA6N1B1E,EAAS8B,QACN6C,UAAUxH,EAASuG,IACnBkB,cAAcjB,GACdkB,MAAM9E,EAAO+B,UAIlBL,EAAAA,WAAU,WACR,IAAME,EAAM5B,EAAO+B,QACdH,GAAQR,IAIbQ,EAAImD,iBA5Ne,eA8NjB,eACAnE,EACI,CAAC,OAAQ,CAAC,MAAO,iBA3OE,UA2OsC,CAAC,MAAO,UACjE,CAAC,MAAO,SAEhB,GAAG,CAACA,EAAsBQ,KAG1BM,EAAAA,WAAU,WAAM,IAAAsD,EACd,GAAKlG,GAAUC,EAAf,CAIA,QAAAiG,EAAA/E,EAAS8B,eAAT,IAAAiD,GAAAA,EAAkBhC,SAElB,IAAMiC,EAAc,GACdC,EAAkB,GACxBpG,EAAMqG,SAAQ,SAAA3B,GACRA,EAAKzC,MAAOlC,aAAAA,EAAAA,EAAakC,MACvBhC,EAAcqG,SAAS5B,EAAKzC,IAC9BkE,EAAY1G,KAAKiF,GAEjB0B,EAAgB3G,KAAKiF,GAG3B,IACA,IAAM6B,EAAkBH,GAAAA,OAAAA,EAAoBD,EAAW,CAAEpG,IAEnD3B,EAAW,GACXoI,EAAc,IAAIzD,UAAS0D,aACjClF,EAAmB0B,QAAQyD,QAC3BjF,EAAoBwB,QAAU,KAC9BsD,EAAYF,SAAQ,SAAC3B,EAAMiC,GAAU,IAAAC,EAC7B/B,EAASH,SAAA,QAAAA,EAAAA,EAAMmC,eAAN,IAAAD,OAAAlC,EAAAkC,EAAejH,YAE9B,GAAIkF,GAAU9G,EAAmB8G,GAAS,CACxC,IAAMD,GAAgB7E,aAAAA,EAAAA,EAAakC,MAAOyC,EAAKzC,GACzC0C,EAAe1E,EAAcqG,SAAS5B,EAAKzC,MAAQ2C,EACnDO,EAAQP,EAjRI,UAmRd/D,EAAAA,IAAIC,EAAiB4D,EAAKU,UAAW,WACnC0B,EAAUnC,EAAe,GAAM,GAErCvG,EAASqB,KAAK,CACZtB,KAAM,UACN8D,GAAI0E,EACJnC,SAAU,CAAErG,KAAM,QAASwB,YAAarB,EAASuG,IACjDN,WAAY,CACVY,MAAAA,EACA2B,QAASlC,EAAgB,EAAIkC,EAC7BlC,cAAAA,EACAD,aAAAA,EACAoC,SAAUrC,EAAKzC,KAAO3B,IAAiB0B,EACvCgF,MAAOL,KAGXpF,EAAmB0B,QAAQgE,IAAIN,EAAO,CAAEjC,KAAAA,EAAMG,OAAAA,EAAQF,aAAAA,EAAcC,cAAAA,IAChEA,IACFnD,EAAoBwB,QAAU0D,GAEhCH,EAAYU,OAAO5I,EAASuG,GAC9B,CACF,IACAxD,EAAe4B,QAAU7E,EAAS+I,OAASX,EAAc,KAEzD,IAAM1D,EAAM5B,EAAO+B,QACnB,GAAKH,GAAQR,GAAb,CAIAQ,EAAIuB,UAtSgB,SAsSWC,QAAQ,CAAEnG,KAAM,oBAAqBC,SAAAA,IACpE0E,EAAIsE,UAnSqB,wBAmSW/I,GACpCqD,EAAoBuB,QAAU,KAE9B,IAAMoE,EAAkB,SAAAC,GAAK,IAAAC,EACrBC,EAAU,UAAAF,EAAElJ,gBAAF,IAAAmJ,OAAA,EAAAA,EAAa,GAC7B,GAAKC,GAAW9F,EAAoBuB,UAAYuE,EAAQvF,GAAxD,CAGA,IAAMwF,EAAQlG,EAAmB0B,QAAQpC,IAAI2G,EAAQvF,IAChDwF,IAIL/F,EAAoBuB,QAAUuE,EAAQvF,GACtCa,EAAI4E,YAAYxE,MAAMyE,OAAS,UAG/B7E,EAAIsE,UApTmB,wBAoTa,CAAC,KAAM,CAAC,MAAOI,EAAQvF,KAC3DwC,GAAYgD,EAAM/C,KAAM+C,EAAM9C,aAAc8C,EAAM7C,cAAe6C,EAAM5C,QACnE4C,EAAM7C,eACR7C,GAAwB,GAb1B,GAiBI6F,EAAmB,SAAAN,GAAK,IAAAO,EAG5B,GACEP,UAAAA,EAAGQ,QACHhF,EAAIiF,sBAAsBT,EAAEQ,MAAO,CAAEE,OAAQ,CAlU9B,eAEM,2BAiUlBb,OAHL,CAOA,IAAMc,EAC4B,OAAhCvG,EAAoBuB,SACpBvB,EAAoBuB,UAAYxB,EAAoBwB,QACtDvB,EAAoBuB,QAAU,KAC9BH,EAAI4E,YAAYxE,MAAMyE,OAAS,GAC/B7E,EAAIsE,UA1UmB,wBA0Ua/I,GACpC,QAAAwJ,EAAA1G,EAAS8B,eAAT,IAAA4E,GAAAA,EAAkB3D,SACd+D,GACFlG,GAAwB,EAT1B,GAaImG,EAAc,SAAAZ,GAAK,IAAAa,EAAAC,EACvB,IAAIvI,EAAJ,CACA,IAAM4H,EAAQlG,EAAmB0B,QAAQpC,YAAIyG,EAAAA,EAAElJ,uBAAF,UAAA+J,EAAa,UAAb,IAAAC,SAAAA,EAAiBnG,IACzDwF,GAGLpH,EAAuBoH,EAAM/C,MAAO+C,EAAM9C,aAL1B,GAmBlB,OAXA7B,EAAIU,GAAG,YA5VY,eA4ViB6D,GACpCvE,EAAIU,GAAG,aA7VY,eA6VkBoE,GACrC9E,EAAIU,GAAG,aA5VkB,wBA4VkBoE,GAC3C9E,EAAIU,GAAG,QA/VY,eA+Va0E,GAEhCG,YAAW,WACLnI,EAxWS,KAwWcgB,EAAO+B,SAAW7B,EAAgB6B,SAAWjD,IAAUkC,GAChFhB,EAAO+B,QAAQqF,UAAUlH,EAAgB6B,QAAS,CAAEsF,QAAS,GAEhE,GAAE,KAEI,WACLzF,EAAI0F,IAAI,YAxWS,eAwWoBnB,GACrCvE,EAAI0F,IAAI,aAzWS,eAyWqBZ,GACtC9E,EAAI0F,IAAI,aAxWe,wBAwWqBZ,GAC5C9E,EAAI0F,IAAI,QA3WS,eA2WgBN,GAzEnC,CAzDA,CAoIF,GAAG,CAACnI,EAAaC,EAAOC,EAAeK,EAAcgC,KAIrDM,EAAAA,WAAU,WACR,IAAME,EAAM5B,EAAO+B,QAOnB,GALI3B,EAAe2B,UACjB3B,EAAe2B,QAAQiB,SACvB5C,EAAe2B,QAAU,MAGtBH,GAAQnC,EAAb,CAEA,IAAM8H,EAAgB3G,GAAwBE,EACxC0G,EAAO3D,SAASC,cAAc,OACpC0D,EAAKC,IAAMF,EA5ZuB,qDAAA,qDA6ZlC,IAAAG,EAAgCH,EAAgB,CAAC,GAAI,IAAM,CAAC,GAAI,IAAGI,EAAApK,EAAAA,QAAAmK,EAAA,GAA5DE,EAASD,EAAA,GAAEE,EAAUF,EAAA,GAC5BG,EAA2BP,EAAgB,CAAC,GAAI,IAAM,CAAC,GAAI,IAAGQ,EAAAxK,EAAAA,QAAAuK,EAAA,GAAvDE,EAAOD,EAAA,GAAEE,EAAOF,EAAA,GACvBP,EAAKU,MAAQN,EACbJ,EAAKW,OAASN,EAEdL,EAAKY,iBAAiB,aAAa,WACjCvH,GAAwB,GAGY,OAAhCN,EAAoBwB,SAAoBH,EAAIyG,SArYzB,2BAsYrB7H,EAAoBuB,QAAUxB,EAAoBwB,QAClDH,EAAIsE,UAvYiB,wBAuYe,CAAC,KAAM,CAAC,MAAO3F,EAAoBwB,WAEzEwB,GAAY1E,GAAa,GAAO,EAAMY,EACxC,IAEA+H,EAAKY,iBAAiB,YAAY,WAAM,IAAAE,EACtC9H,EAAoBuB,QAAU,KAC1BH,EAAIyG,SA9Ye,0BA+YrBzG,EAAIsE,UA/YiB,wBA+Ye/I,GAEtC,QAAAmL,EAAArI,EAAS8B,eAAT,IAAAuG,GAAAA,EAAkBtF,SAClBnC,GAAwB,EAC1B,IAEAT,EAAe2B,QAAU,IAAIF,EAAQ,QAAC0G,OAAO,CAC3CC,QAAShB,EACTiB,OAAQ,SAER9D,OAAQ,CAACiD,EAAY,EAAII,EAASH,EAAa,EAAII,KAElDrD,UAAUxH,EAASqC,IACnBqF,MAAMlD,EArCuB,CAsClC,GAAG,CAAChB,EAAsBnB,EAAmBT,EAAQH,EAAaiC,IAGlEY,EAAAA,WAAU,WACiB,IAAAgH,EAArB1J,EAzaW,IA0aC,QAAdgB,EAAAA,EAAO+B,eAAO,IAAA2G,GAAdA,EAAgBjH,QAAQ,GAG1B0F,YAAW,WACLtI,EACEmB,EAAO+B,SAAW7B,EAAgB6B,SAAW/C,GAC/CgB,EAAO+B,QAAQqF,UAAUlH,EAAgB6B,QAAS,CAAEsF,QAAS,IAEtDrH,EAAO+B,SAAW5B,EAAe4B,SAC1C/B,EAAO+B,QAAQqF,UAAUjH,EAAe4B,SAEtCtC,GAAqBO,EAAO+B,SAC9B/B,EAAO+B,QAAQ4G,OAAO,CAAE1G,OAAQ7E,EAASqC,GAAoBmJ,SAAU,KAE1E,GAAE,IACJ,GAAE,CAAC5J,EAAQH,EAAaY,IAEzB,IAAMoJ,GAAe,WAAM,IAAAC,EACzB,QAAA9I,EAAAA,EAAO+B,eAAP,IAAA+G,GAAAA,EAAgBrH,QAAQD,GAAO,IASjC,OACE6C,EAAAA,IAAA,MAAA,CAAK0E,UAAWC,EAAAA,QAAWC,EAAOC,QAAS1J,EAAQ2J,MAAM3E,SACvDH,EAAAC,IAAA,MAAA,CACEyE,UAAWC,EAAAA,QAAWC,EAAOG,QAAS5J,EAAQoC,KAC9CyH,IAAKvJ,EACLwJ,cAAeT,GAAarE,SAE5B+E,EAAAC,KAAA,MAAA,CAAKT,UAAWE,EAAOQ,UAAUjF,SAAA,CAC/BH,MAACqF,UAAO,CAACC,MAAOnI,GA/cH,GA+c2B,UAAY,GAAIoI,UAAU,OAAMpF,SACtEH,EAAAC,IAAA,MAAA,CACEyE,UAAWC,EAAU,QAACC,EAAOY,WAAUC,EAAA,QAAA,GACpCb,EAAOc,aAldD,KAkdgBvI,KAEzBwI,QAASnB,GAAarE,SAEtBH,MAAC4F,MAAU,CAAClB,UAAWE,EAAOiB,oBAGlC7F,MAACqF,UAAO,CAACC,MAAOnI,GAxdH,EAwd2B,WAAa,GAAIoI,UAAU,OAAMpF,SACvEH,EAAAC,IAAA,MAAA,CACEyE,UAAWC,EAAU,QAACC,EAAOY,WAAUC,EAAA,QAAA,GACpCb,EAAOc,aA3dD,IA2dgBvI,KAEzBwI,QA7BU,WACN,IAAAG,EAAV3I,GAAO,IACT,QAAAxB,EAAAA,EAAO+B,eAAP,IAAAoI,GAAAA,EAAgB1I,QAAQD,GAAO,KA2BAgD,SAEvBH,MAAC+F,SAAW,CAACrB,UAAWE,EAAOiB,0BAO7C"}
1	+ {"version":3,"file":"OffsetWellMap.js","sources":["../../../../src/components/OffsetWellMap/OffsetWellMap.js"],"sourcesContent":["import { createElement, useRef, useEffect, useState, useMemo } from 'react';\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';\nimport { createAdaptiveRoot } from '~/utils/createAdaptiveRoot';\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 tooltipRootRef = 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 tooltipRootRef.current?.unmount();\n tooltipRootRef.current = null;\n\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 tooltipRootRef.current?.unmount();\n\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 tooltipRootRef.current = createAdaptiveRoot(popUpContainer);\n tooltipRootRef.current.render(<>{popUpContent}</>);\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","tooltipRootRef","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","_tooltipRootRef$curre","unmount","remove","_ref5","_ref6","getSource","setData","properties","geometry","showTooltip","well","isOffsetWell","isSubjectWell","coords","_tooltipRootRef$curre2","popUpContainer","document","createElement","popUpContent","WellTooltip","color","formation","createAdaptiveRoot","render","_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","jsx","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 CHANGED Viewed

@@ -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");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;
+"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),u=require("prop-types"),n=require("lodash"),i=require("@material-ui/core/styles"),o=require("./Map.css.js"),a=require("../../../../utils/index.js"),l=require("../../../../utils/createAdaptiveRoot.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 p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=p(e),h=p(r),b=p(u),g=p(f);function v(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 y(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?v(Object(t),!0).forEach((function(r){m.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var q=a.mapbox.isValidCoordinates,j=["#FF00FF","#F5BD80","#FF0000","#0080FF","#FF8000","#58ACFA","#FA58F4","#40FF00","#4B8A08","#40FF00","#D8F781"],F=[29.749907,-95.358421],x={type:"FeatureCollection",features:[]},w=function(e){var r=h.default(e,2),t=r[0];return[r[1],t]};function O(e){var r=e.subjectWell,u=e.wells,a=e.offsetWells,f=e.radius,p=e.subjectWellMarkerSize,b=e.wellMarkerSize,v=e.popUpFormatter,O=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(null),B=t.useRef(null),R=t.useRef(),k=t.useState(!1),E=h.default(k,2),I=E[0],A=E[1],L=t.useMemo((function(){return u.filter((function(e){return!r||r.id!==e.id}))}),[r,u]),W=t.useMemo((function(){return r&&n.get(r,O)}),[r,O]),T=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(n.sortBy(e)):n.sortBy(e);t&&!u.includes("Null")&&u.push("Null");var i=u.reduce((function(e,r,t){return y(y({},e),{},m.default({},r,j[t%j.length]))}),{});return[u,i]}),[r,L]),z=h.default(T,2),U=z[0],_=z[1];return t.useEffect((function(){if(c.IS_MAPBOX_ENABLED){M.current=new g.default.Map({container:P.current,style:"mapbox://styles/mapbox/dark-v9",center:w(F),zoom:1,attributionControl:!1,scrollZoom:!1}),M.current.addControl(new g.default.NavigationControl({showCompass:!1}),"bottom-right"),M.current.on("load",(function(){M.current.addSource("radius-circle",{type:"geojson",data:x}),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:x}),M.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),A(!0)}));var e=M.current;return function(){var r;null===(r=N.current)||void 0===r||r.unmount(),N.current=null,B.current=null,e.remove(),M.current=null,C.current=null,S.current=null}}}),[]),t.useEffect((function(){if(M.current&&I){if(!W)return M.current.getSource("radius-circle").setData(x),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*f);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 g.default.LngLatBounds)}}),[f,W,I]),t.useEffect((function(){var e;if(M.current&&I){var o=R.current;R.current=u,null===(e=D.current)||void 0===e||e.remove();var c=a.map((function(e){return e.id})),f=[],m={},h=new g.default.LngLatBounds;u.forEach((function(e){var t=n.get(e,O);if(t&&q(t)){var u=r&&r.id===e.id,i=c.includes(e.id),o=u?p:b,a=u||i?"#00FFFF":_[e.formation],l=u||i?1:.3;m[e.id]=e,h.extend(w(t)),f.push({type:"Feature",geometry:{type:"Point",coordinates:w(t)},properties:{wellId:e.id,radius:o,color:a,opacity:l}})}})),M.current.getSource("wells").setData({type:"FeatureCollection",features:f}),S.current=f.length?h:null;var y=M.current,j=null,F=function(e){y.getCanvas().style.cursor="pointer";var r=m[e.features[0].properties.wellId];if(r&&r.id!==j&&(j=r.id,v)){var u=t.createElement(v,{well:r,color:_[r.formation]});B.current||(B.current=document.createElement("div"),N.current=l.createAdaptiveRoot(B.current)),N.current.render(d.jsx(i.MuiThemeProvider,{theme:s.darkTheme,children:u})),D.current||(D.current=new g.default.Popup({closeButton:!1,maxWidth:"none"})),D.current.setLngLat(w(n.get(r,O))).setDOMContent(B.current).addTo(y)}},x=function(){j=null,y.getCanvas().style.cursor=""};return y.on("mousemove","wells",F),y.on("mouseleave","wells",x),setTimeout((function(){M.current&&C.current&&u!==o&&M.current.fitBounds(C.current,{padding:5})}),500),function(){y.off("mousemove","wells",F),y.off("mouseleave","wells",x)}}}),[r,u,a,_,I]),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)}),[f,r,I]),d.jsxs("div",{className:o.map,children:[d.jsx("div",{className:o.mapMain,ref:P}),d.jsxs("div",{className:o.mapFooter,children:[a&&d.jsxs("div",{className:o.mapFooterItem,children:[d.jsx("div",{className:o.mapFooterItemSquare,style:{backgroundColor:"#00FFFF"}}),d.jsx("div",{className:o.mapFooterItemLabel,children:"Selected Offset Wells"})]}),U.map((function(e){return d.jsxs("div",{className:o.mapFooterItem,children:[d.jsx("div",{className:o.mapFooterItemSquare,style:{backgroundColor:_[e]}}),d.jsx("div",{className:o.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;
 //# sourceMappingURL=Map.js.map

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

	@@ -1 +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 { 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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"}
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 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 { createAdaptiveRoot } from '~/utils/createAdaptiveRoot';\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 tooltipRootRef = useRef(null);\n const tooltipContainerRef = 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 tooltipRootRef.current?.unmount();\n tooltipRootRef.current = null;\n tooltipContainerRef.current = null;\n\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 const popUpContent = createElement(popUpFormatter, {\n well,\n color: colorDict[well.formation],\n });\n // NOTE: Custom popup may have buttons. Reuse a single container/root and update its content.\n if (!tooltipContainerRef.current) {\n tooltipContainerRef.current = document.createElement('div');\n tooltipRootRef.current = createAdaptiveRoot(tooltipContainerRef.current);\n }\n tooltipRootRef.current.render(\n <MuiThemeProvider theme={theme.darkTheme}>{popUpContent}</MuiThemeProvider>\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(tooltipContainerRef.current)\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","tooltipRootRef","tooltipContainerRef","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","_tooltipRootRef$curre","unmount","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","popUpContent","createElement","document","createAdaptiveRoot","render","_jsx","MuiThemeProvider","theme","darkTheme","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","setTimeout","fitBounds","padding","off","_jsxs","className","styles","jsx","mapMain","ref","jsxs","mapFooter","mapFooterItem","mapFooterItemSquare","backgroundColor","mapFooterItemLabel","propTypes","PropTypes","shape","number","string","arrayOf","isRequired","func","defaultProps","memo"],"mappings":"m6EAcA,IAAQA,EAAuBC,EAAMA,OAA7BD,mBAOFE,EAAS,CACb,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGIC,EAAiB,CAAC,WAAY,WAI9BC,EAA2B,CAAEC,KAAM,oBAAqBC,SAAU,IAElEC,EAAW,SAAHC,GAAA,IAAAC,EAAAC,EAAAA,QAAAF,EAAA,GAAKG,EAAGF,EAAA,GAAK,MAAM,CAANA,EAAA,GAAYE,EAAI,EAe3C,SAASC,EASNC,GAAA,IARDC,IAAAA,YACAC,IAAAA,MACAC,IAAAA,YACAC,IAAAA,OACAC,IAAAA,sBACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,eAEMC,EAAkBC,SAAO,MACzBC,EAASD,SAAO,MAChBE,EAAwBF,SAAO,MAC/BG,EAAmBH,SAAO,MAC1BI,EAAWJ,SAAO,MAClBK,EAAiBL,SAAO,MACxBM,EAAsBN,SAAO,MAC7BO,EAAeP,EAAAA,SACeQ,EAAAA,EAAQA,UAAC,GAAMC,EAAAtB,EAAAA,QAAAuB,EAAA,GAA5CC,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAE1BI,EAAYC,EAAAA,SAAQ,WACxB,OAAOtB,EAAMuB,QAAO,SAAAC,GAAI,OAAKzB,GAAeA,EAAY0B,KAAOD,EAAKC,KACtE,GAAG,CAAC1B,EAAaC,IAEX0B,EAAoBJ,EAAAA,SAAQ,WAChC,OAAOvB,GAAe4B,EAAAA,IAAI5B,EAAaO,EACzC,GAAG,CAACP,EAAaO,IAGegB,EAAAA,EAAAA,SAAQ,WAEtC,IAAMM,EAAiB,GACnBC,GAAmB,EAEvBR,EAAUS,SAAQ,SAAAN,GACO,SAAnBA,EAAKO,UACPF,GAAmB,EAEjB9B,GAAeA,EAAYgC,YAAcP,EAAKO,WAC/CH,EAAeI,SAASR,EAAKO,YAE9BH,EAAeK,KAAKT,EAAKO,UAE7B,IAEA,IAAMG,EAAmBnC,EACrB,CAACA,EAAYgC,WAAWI,OAAOC,EAAAA,OAAOR,IACtCQ,EAAMA,OAACR,GAEPC,IAAqBK,EAAiBF,SAAS,SACjDE,EAAiBD,KAAK,QAGxB,IAAMI,EAASH,EAAiBI,QAC9B,SAACC,EAAQC,EAAMC,GAAG,OACbF,EAAAA,EAAAA,CAAAA,EAAAA,GACFC,CAAAA,EAAAA,EAAAA,QAAAA,CAAAA,EAAAA,EAAOrD,EAAOsD,EAAMtD,EAAOuD,SAC5B,GACF,CAAE,GAGJ,MAAO,CAACR,EAAkBG,EAC5B,GAAG,CAACtC,EAAasB,IAAWsB,EAAAhD,EAAAA,QAAAiD,EAAA,GAjCrBC,EAAUF,EAAA,GAAEG,EAASH,EAAA,GAsO5B,OAlMAI,EAAAA,WAAU,WACR,GAAKC,EAAAA,kBAAL,CAEAvC,EAAOwC,QAAU,IAAIC,EAAQ,QAACC,IAAI,CAChCC,UAAW7C,EAAgB0C,QAC3BI,MAAO,iCACPC,OAAQ9D,EAASJ,GACjBmE,KAAM,EACNC,oBAAoB,EACpBC,YAAY,IAGdhD,EAAOwC,QAAQS,WACb,IAAIR,EAAAA,QAASS,kBAAkB,CAAEC,aAAa,IAC9C,gBAKFnD,EAAOwC,QAAQY,GAAG,QAAQ,WACxBpD,EAAOwC,QAAQa,UAxGI,gBAwGwB,CACzCxE,KAAM,UACNyE,KAAM1E,IAERoB,EAAOwC,QAAQe,SAAS,CACtBvC,GA7GiB,gBA8GjBnC,KAAM,OACN2E,OA/GiB,gBAgHjBC,MAAO,CACL,aAtIkB,UAuIlB,eAAgB,MAIpBzD,EAAOwC,QAAQa,UArHJ,QAqHwB,CAAExE,KAAM,UAAWyE,KAAM1E,IAC5DoB,EAAOwC,QAAQe,SAAS,CACtBvC,GAvHS,QAwHTnC,KAAM,SACN2E,OAzHS,QA0HTC,MAAO,CACL,gBAAiB,CAAC,MAAO,UACzB,eAAgB,CAAC,MAAO,SACxB,iBAAkB,CAAC,MAAO,cAI9B9C,GAAc,EAChB,IAEA,IAAM+C,EAAM1D,EAAOwC,QACnB,OAAO,WAAM,IAAAmB,EACX,QAAAA,EAAAvD,EAAeoC,eAAf,IAAAmB,GAAAA,EAAwBC,UACxBxD,EAAeoC,QAAU,KACzBnC,EAAoBmC,QAAU,KAE9BkB,EAAIG,SACJ7D,EAAOwC,QAAU,KACjBvC,EAAsBuC,QAAU,KAChCtC,EAAiBsC,QAAU,KAzDW,CA2DzC,GAAE,IAGHF,EAAAA,WAAU,WACR,GAAKtC,EAAOwC,SAAY9B,EAAxB,CAIA,IAAKO,EAGH,OAFAjB,EAAOwC,QAAQsB,UAzJI,iBAyJwBC,QAAQnF,QACnDqB,EAAsBuC,QAAU,MAIlC,IAAMwB,EAvJgB,SAAHC,EAAgBC,GAIrC,IAJmE,IAAAC,EAAAjF,EAAAA,QAAA+E,EAAA,GAAzC9E,EAAGgF,EAAA,GAAEC,EAAGD,EAAA,GAAiBE,yDAAS,GACtDL,EAAO,GACPM,EAAYJ,GAAgB,OAASK,KAAKC,IAAKrF,EAAMoF,KAAKE,GAAM,MAChEC,EAAYR,EAAe,OACxBS,EAAI,EAAGA,GAAKN,EAAQM,GAAK,EAAG,CACnC,IAAMC,EAASD,EAAIN,GAAW,EAAIE,KAAKE,IACvCT,EAAKxC,KAAK,CAAC4C,EAAME,EAAYC,KAAKC,IAAII,GAAQzF,EAAMuF,EAAYH,KAAKM,IAAID,IAC3E,CACA,OAAOZ,CACT,CA8IiBc,CAAkB7D,EAlLZ,QAkL+BxB,GAClDO,EAAOwC,QAAQsB,UA/JM,iBA+JsBC,QAAQ,CACjDlF,KAAM,UACNkG,SAAU,CAAElG,KAAM,UAAWmG,YAAa,CAAChB,MAE7C/D,EAAsBuC,QAAUwB,EAAKnC,QACnC,SAACoD,EAAQC,GAAK,OAAKD,EAAOE,OAAOD,EAAM,GACvC,IAAIzC,EAAAA,QAAS2C,aAff,CAiBD,GAAE,CAAC3F,EAAQwB,EAAmBP,IAG/B4B,EAAAA,WAAU,WAAM,IAAA+C,EACd,GAAKrF,EAAOwC,SAAY9B,EAAxB,CAIA,IAAM4E,EAAYhF,EAAakC,QAC/BlC,EAAakC,QAAUjD,EAEvB,QAAA8F,EAAAlF,EAASqC,eAAT,IAAA6C,GAAAA,EAAkBxB,SAElB,IAAM0B,EAAgB/F,EAAYkE,KAAI,SAAA3C,GAAI,OAAIA,EAAKC,MAE7ClC,EAAW,GACX0G,EAAY,CAAA,EACZP,EAAS,IAAIxC,UAAS2C,aAC5B7F,EAAM8B,SAAQ,SAAAN,GACZ,IAAM0E,EAASvE,EAAAA,IAAIH,EAAMlB,GAEzB,GAAI4F,GAAUjH,EAAmBiH,GAAS,CACxC,IAAMC,EAAgBpG,GAAeA,EAAY0B,KAAOD,EAAKC,GACvD2E,EAAeJ,EAAchE,SAASR,EAAKC,IAC3C4E,EAAIF,EAAgBhG,EAAwBC,EAC5CkG,EAAQH,GAAiBC,EAjNb,UAiNgDtD,EAAUtB,EAAKO,WAC3EwE,EAAUJ,GAAiBC,EAAe,EAAI,GAEpDH,EAAUzE,EAAKC,IAAMD,EACrBkE,EAAOE,OAAOpG,EAAS0G,IACvB3G,EAAS0C,KAAK,CACZ3C,KAAM,UACNkG,SAAU,CAAElG,KAAM,QAASmG,YAAajG,EAAS0G,IACjDM,WAAY,CAAEC,OAAQjF,EAAKC,GAAIvB,OAAQmG,EAAGC,MAAAA,EAAOC,QAAAA,IAErD,CACF,IAEA9F,EAAOwC,QAAQsB,UA5MF,SA4MsBC,QAAQ,CAAElF,KAAM,oBAAqBC,SAAAA,IACxEoB,EAAiBsC,QAAU1D,EAASmD,OAASgD,EAAS,KAEtD,IAAMvB,EAAM1D,EAAOwC,QACfyD,EAAgB,KAEdC,EAAkB,SAAAC,GACtBzC,EAAI0C,YAAYxD,MAAMyD,OAAS,UAE/B,IAAMtF,EAAOyE,EAAUW,EAAErH,SAAS,GAAGiH,WAAWC,QAChD,GAAKjF,GAAQA,EAAKC,KAAOiF,IAGzBA,EAAgBlF,EAAKC,GAEjBpB,GAAgB,CAClB,IAAM0G,EAAeC,EAAaA,cAAC3G,EAAgB,CACjDmB,KAAAA,EACA8E,MAAOxD,EAAUtB,EAAKO,aAGnBjB,EAAoBmC,UACvBnC,EAAoBmC,QAAUgE,SAASD,cAAc,OACrDnG,EAAeoC,QAAUiE,EAAAA,mBAAmBpG,EAAoBmC,UAElEpC,EAAeoC,QAAQkE,OACrBC,EAAAA,IAACC,EAAAA,iBAAgB,CAACC,MAAOA,EAAgBC,UAAAC,SAAET,KAGxCnG,EAASqC,UACZrC,EAASqC,QAAU,IAAIC,EAAQ,QAACuE,MAAM,CAAEC,aAAa,EAAOC,SAAU,UAExE/G,EAASqC,QACN2E,UAAUpI,EAASmC,EAAGA,IAACH,EAAMlB,KAC7BuH,cAAc/G,EAAoBmC,SAClC6E,MAAM3D,EACX,GAGI4D,EAAmB,WACvBrB,EAAgB,KAChBvC,EAAI0C,YAAYxD,MAAMyD,OAAS,IAYjC,OATA3C,EAAIN,GAAG,YAxPM,QAwPiB8C,GAC9BxC,EAAIN,GAAG,aAzPM,QAyPkBkE,GAE/BC,YAAW,WACLvH,EAAOwC,SAAWvC,EAAsBuC,SAAWjD,IAAU+F,GAC/DtF,EAAOwC,QAAQgF,UAAUvH,EAAsBuC,QAAS,CAAEiF,QAAS,GAEtE,GAAE,KAEI,WACL/D,EAAIgE,IAAI,YAlQG,QAkQoBxB,GAC/BxC,EAAIgE,IAAI,aAnQG,QAmQqBJ,GAvFlC,CAyFF,GAAG,CAAChI,EAAaC,EAAOC,EAAa6C,EAAW3B,IAEhD4B,EAAAA,WAAU,WACRiF,YAAW,WACLjI,EACEU,EAAOwC,SAAWvC,EAAsBuC,SAC1CxC,EAAOwC,QAAQgF,UAAUvH,EAAsBuC,QAAS,CACtDiF,QAAS,IAGJzH,EAAOwC,SAAWtC,EAAiBsC,SAC5CxC,EAAOwC,QAAQgF,UAAUtH,EAAiBsC,QAE7C,GAAE,IACJ,GAAE,CAAC/C,EAAQH,EAAaoB,IAGvBiH,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAOnE,IAAIqD,SACzB,CAAAJ,EAAAmB,IAAA,MAAA,CAAKF,UAAWC,EAAOE,QAASC,IAAKlI,IAErC6H,EAAAM,KAAA,MAAA,CAAKL,UAAWC,EAAOK,UAAUnB,SAAA,CAC9BvH,GACCmI,EAAAM,KAAA,MAAA,CAAKL,UAAWC,EAAOM,cAAcpB,SACnC,CAAAJ,EAAAmB,IAAA,MAAA,CACEF,UAAWC,EAAOO,oBAClBxF,MAAO,CAAEyF,gBAhTG,aAkTd1B,EAAAmB,IAAA,MAAA,CAAKF,UAAWC,EAAOS,mBAAmBvB,SAAA,6BAI7C3E,EAAWsB,KAAI,SAAA3B,GAAI,OAClB4F,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAOM,cAAcpB,SACnC,CAAAJ,EAAAmB,IAAA,MAAA,CACEF,UAAWC,EAAOO,oBAClBxF,MAAO,CAAEyF,gBAAiBhG,EAAUN,MAEtC4E,EAAAmB,IAAA,MAAA,CAAKF,UAAWC,EAAOS,mBAAmBvB,SAAEhF,MALHA,EAMrC,SAKhB,CAEA3C,EAASmJ,UAAY,CACnBjJ,YAAakJ,EAAS,QAACC,MAAM,CAC3BzH,GAAIwH,EAAS,QAACE,OACdpH,UAAWkH,EAAS,QAACG,SAEvBpJ,MAAOiJ,EAAS,QAACI,QAAQJ,EAAAA,QAAUC,MAAM,CAAA,IAAKI,WAC9CrJ,YAAagJ,EAAS,QAACI,QAAQJ,EAAS,QAACC,MAAM,CAAE,IACjDhJ,OAAQ+I,EAAAA,QAAUE,OAAOG,WACzBnJ,sBAAuB8I,EAAS,QAACE,OACjC/I,eAAgB6I,EAAS,QAACE,OAC1B9I,eAAgB4I,EAAS,QAACM,KAC1BjJ,eAAgB2I,EAAS,QAACG,QAG5BvJ,EAAS2J,aAAe,CACtBzJ,YAAa,KACbI,sBAtVuC,GAuVvCC,eAtV+B,EAuV/BC,eAAgB,KAChBC,eAAgB,gCAChBL,YAAa,MAGf,IAAewJ,EAAAA,EAAAA,KAAK5J"}

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

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

package/cjs-bundle/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Map.js","sources":["../../../../../../../../src/components/OffsetWellPickerV3/components/CustomSelectionView/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';\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 DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\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';\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 open,\n subjectWell,\n wells,\n offsetWells,\n radius,\n formationColors,\n popUpFormatter,\n coordsDataPath,\n onAddOffsetWell,\n onDeleteOffsetWell,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef();\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 subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Initialize map\n useEffect(() => {\n if (!IS_MAPBOX_ENABLED \|\| !open \|\| mapRef.current) return;\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 layout: {\n 'circle-sort-key': ['get', 'sortKey'],\n },\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 }, [open]);\n\n useEffect(\n () => () => {\n if (mapRef.current) {\n mapRef.current.remove();\n mapRef.current = null;\n radiusCircleBoundsRef.current = null;\n markersBoundsRef.current = null;\n }\n },\n []\n );\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current \|\| !isMapReady \|\| !open) {\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, open, isMapReady]);\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current \|\| !isMapReady \|\| !open) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n const offsetWellIds = offsetWells.map(well => well.id);\n const sortedWells = sortBy(wells, well => offsetWellIds.includes(well.id));\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n sortedWells.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 ? DEFAULT_SUBJECT_WELL_MARKER_SIZE : DEFAULT_WELL_MARKER_SIZE;\n const color =\n isWellSubject \|\| isWellOffset\n ? OFFSET_WELL_COLOR\n : get(formationColors, well.formation, '#BDBDBD');\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 // NOTE: sortKey keeps offset wells rendered on top (was sortedWells insertion order)\n properties: { wellId: well.id, radius: r, color, opacity, sortKey: isWellOffset ? 1 : 0 },\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: get(formationColors, well.formation, '#BDBDBD'),\n });\n // NOTE: Custom popup may have buttons\n ReactDOM.render(<>{popUpContent}</>, popUpContainer);\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 popupRef.current?.remove();\n };\n\n const handleClick = e => {\n const { wellId } = e.features[0].properties;\n const isWellSubject = subjectWell && subjectWell.id === wellId;\n const isWellOffset = offsetWellIds.includes(wellId);\n\n if (isWellOffset && !isWellSubject) {\n onDeleteOffsetWell(wellId);\n } else {\n onAddOffsetWell(wellId);\n }\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleMouseLeave);\n map.on('click', WELLS_ID, handleClick);\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 map.off('click', WELLS_ID, handleClick);\n };\n }, [subjectWell, wells, offsetWells, open, isMapReady]);\n\n useEffect(() => {\n if (!open) return;\n\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, open, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n </div>\n );\n}\n\nWellsMap.propTypes = {\n open: PropTypes.bool.isRequired,\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 formationColors: PropTypes.shape({}).isRequired,\n popUpFormatter: PropTypes.func,\n coordsDataPath: PropTypes.string,\n onAddOffsetWell: PropTypes.func.isRequired,\n onDeleteOffsetWell: PropTypes.func.isRequired,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n popUpFormatter: null,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","open","subjectWell","wells","offsetWells","radius","formationColors","popUpFormatter","coordsDataPath","onAddOffsetWell","onDeleteOffsetWell","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","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","layout","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","geometry","coordinates","reduce","bounds","coord","extend","LngLatBounds","prevWells","offsetWellIds","map","well","sortedWells","sortBy","includes","wellsById","forEach","coords","isWellSubject","isWellOffset","r","color","formation","opacity","properties","wellId","sortKey","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","jsx","_Fragment","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","_popupRef$current","handleClick","setTimeout","fitBounds","padding","off","className","styles","mapMain","ref","propTypes","PropTypes","bool","isRequired","shape","number","string","arrayOf","func","defaultProps","memo"],"mappings":"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"}
1	+ {"version":3,"file":"Map.js","sources":["../../../../../../../../src/components/OffsetWellPickerV3/components/CustomSelectionView/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { get, sortBy } from 'lodash';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport { createAdaptiveRoot } from '~/utils/createAdaptiveRoot';\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 DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\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';\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 open,\n subjectWell,\n wells,\n offsetWells,\n radius,\n formationColors,\n popUpFormatter,\n coordsDataPath,\n onAddOffsetWell,\n onDeleteOffsetWell,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef();\n const radiusCircleBoundsRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const tooltipRootRef = useRef(null);\n const tooltipContainerRef = 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 \|\| !open \|\| mapRef.current) return;\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 layout: {\n 'circle-sort-key': ['get', 'sortKey'],\n },\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 }, [open]);\n\n useEffect(\n () => () => {\n tooltipRootRef.current?.unmount();\n tooltipRootRef.current = null;\n tooltipContainerRef.current = null;\n\n if (mapRef.current) {\n mapRef.current.remove();\n mapRef.current = null;\n radiusCircleBoundsRef.current = null;\n markersBoundsRef.current = null;\n }\n },\n []\n );\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current \|\| !isMapReady \|\| !open) {\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, open, isMapReady]);\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current \|\| !isMapReady \|\| !open) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n const offsetWellIds = offsetWells.map(well => well.id);\n const sortedWells = sortBy(wells, well => offsetWellIds.includes(well.id));\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n sortedWells.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 ? DEFAULT_SUBJECT_WELL_MARKER_SIZE : DEFAULT_WELL_MARKER_SIZE;\n const color =\n isWellSubject \|\| isWellOffset\n ? OFFSET_WELL_COLOR\n : get(formationColors, well.formation, '#BDBDBD');\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 // NOTE: sortKey keeps offset wells rendered on top (was sortedWells insertion order)\n properties: { wellId: well.id, radius: r, color, opacity, sortKey: isWellOffset ? 1 : 0 },\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 const popUpContent = createElement(popUpFormatter, {\n well,\n color: get(formationColors, well.formation, '#BDBDBD'),\n });\n // NOTE: Custom popup may have buttons. Reuse a single container/root and update its content.\n if (!tooltipContainerRef.current) {\n tooltipContainerRef.current = document.createElement('div');\n tooltipRootRef.current = createAdaptiveRoot(tooltipContainerRef.current);\n }\n tooltipRootRef.current.render(<>{popUpContent}</>);\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(tooltipContainerRef.current)\n .addTo(map);\n }\n };\n\n const handleMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n popupRef.current?.remove();\n };\n\n const handleClick = e => {\n const { wellId } = e.features[0].properties;\n const isWellSubject = subjectWell && subjectWell.id === wellId;\n const isWellOffset = offsetWellIds.includes(wellId);\n\n if (isWellOffset && !isWellSubject) {\n onDeleteOffsetWell(wellId);\n } else {\n onAddOffsetWell(wellId);\n }\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleMouseLeave);\n map.on('click', WELLS_ID, handleClick);\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 map.off('click', WELLS_ID, handleClick);\n };\n }, [subjectWell, wells, offsetWells, open, isMapReady]);\n\n useEffect(() => {\n if (!open) return;\n\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, open, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n </div>\n );\n}\n\nWellsMap.propTypes = {\n open: PropTypes.bool.isRequired,\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 formationColors: PropTypes.shape({}).isRequired,\n popUpFormatter: PropTypes.func,\n coordsDataPath: PropTypes.string,\n onAddOffsetWell: PropTypes.func.isRequired,\n onDeleteOffsetWell: PropTypes.func.isRequired,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n popUpFormatter: null,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","open","subjectWell","wells","offsetWells","radius","formationColors","popUpFormatter","coordsDataPath","onAddOffsetWell","onDeleteOffsetWell","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","tooltipRootRef","tooltipContainerRef","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","layout","_tooltipRootRef$curre","unmount","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","push","sin","makeCirclePolygon","geometry","coordinates","reduce","bounds","coord","extend","LngLatBounds","prevWells","offsetWellIds","map","well","sortedWells","sortBy","includes","wellsById","forEach","coords","isWellSubject","isWellOffset","r","color","formation","opacity","properties","wellId","sortKey","length","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContent","createElement","document","createAdaptiveRoot","render","_jsx","_Fragment","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","_popupRef$current","handleClick","setTimeout","fitBounds","padding","off","className","styles","jsx","mapMain","ref","propTypes","PropTypes","bool","isRequired","shape","number","string","arrayOf","func","defaultProps","memo"],"mappings":"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"}

package/cjs-bundle/components/OffsetWellPickerV5/components/Map/OffsetWellMap/components/MapHints/components/KeyboardKey/KeyboardKey.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KeyboardKey.js","sources":["../../../../../../../../../../../src/components/OffsetWellPickerV5/components/Map/OffsetWellMap/components/MapHints/components/KeyboardKey/KeyboardKey.tsx"],"sourcesContent":["import { FC, memo, ~~ReactNode~~ } from 'react';\n\nimport styles from './KeyboardKey.module.css';\n\~~ntype KeyboardKeyProps = {\n children: ReactNode;\n};\n\~~nconst KeyboardKeyComponent: FC<~~KeyboardKeyProps~~> = ({ children }) => {\n return <span className={styles.keyboardKey}>{children}</span>;\n};\n\nexport const KeyboardKey = memo(KeyboardKeyComponent);\n\nKeyboardKey.displayName = 'KeyboardKey';\n"],"names":["KeyboardKey","memo","_ref","children","_jsx","className","styles","keyboardKey","displayName"],"mappings":"~~mKAYaA~~,EAAcC,EAAIA,~~MAJoB~~,SAAkBC,GAAA,IAAfC,IAAAA,~~SACpD~~,OAAOC,EAAAA,IAAA,OAAA,CAAMC,UAAWC,EAAOC,YAAYJ,SAAEA,GAC/C,IAIAH,EAAYQ,YAAc"}
1	+ {"version":3,"file":"KeyboardKey.js","sources":["../../../../../../../../../../../src/components/OffsetWellPickerV5/components/Map/OffsetWellMap/components/MapHints/components/KeyboardKey/KeyboardKey.tsx"],"sourcesContent":["import { FC, memo, PropsWithChildren } from 'react';\n\nimport styles from './KeyboardKey.module.css';\n\nconst KeyboardKeyComponent: FC<PropsWithChildren> = ({ children }) => {\n return <span className={styles.keyboardKey}>{children}</span>;\n};\n\nexport const KeyboardKey = memo(KeyboardKeyComponent);\n\nKeyboardKey.displayName = 'KeyboardKey';\n"],"names":["KeyboardKey","memo","_ref","children","_jsx","className","styles","keyboardKey","displayName"],"mappings":"mKAQaA,EAAcC,EAAIA,MAJqB,SAAkBC,GAAA,IAAfC,IAAAA,SACrD,OAAOC,EAAAA,IAAA,OAAA,CAAMC,UAAWC,EAAOC,YAAYJ,SAAEA,GAC/C,IAIAH,EAAYQ,YAAc"}

package/cjs-bundle/components/PinnableFilters/effects/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),i=require("react-dom"),u=require("lodash"),n=require("@material-ui/core/styles"),s=require("../components/FiltersToggler.js"),o=require("../utils.js"),l=require("../constants.js"),a=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("../../../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");var c=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=d(e),f=d(r),b=d(i);function p(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r&&(i=i.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,i)}return t}function m(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?p(Object(t),!0).forEach((function(r){h.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}exports.useAppFilterTogglerWidth=function(){var e=t.useState(null),r=f.default(e,2),i=r[0],u=r[1];return t.useEffect((function(){var e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",document.body.appendChild(e),b.default.render(c.jsx(n.MuiThemeProvider,{theme:a.darkTheme,children:c.jsx(s,{})}),e,(function(){var r=e.getBoundingClientRect();e.remove(),u(r.width)}))}),[]),i},exports.useComonentsWidth=function(e){var r=t.useRef(),i=t.useState(null),n=f.default(i,2),s=n[0],o=n[1],l=t.useRef({}),a=e.filter((function(e){return!!e})),d=c.jsx("div",{ref:r,style:{position:"absolute",width:0,height:0,overflow:"hidden"},children:a.map((function(e,r){return c.jsx("div",{"data-key":null==e?void 0:e.key,style:{position:"absolute"},children:e},r)}))});return t.useEffect((function(){var e;if(!u.isEqual(a,l.current)){var t=Array.from(null===(e=r.current)||void 0===e?void 0:e.childNodes).reduce((function(e,r){var t,i=null==r||null===(t=r.getAttribute)||void 0===t?void 0:t.call(r,"data-key"),u=null==r?void 0:r.getBoundingClientRect().width;return m(m({},e),{},h.default({},i,u))}),{});Object.values(t).length===a.length&&(u.isEqual(s,t)||o(t)),l.current=a}})),{componentsWidth:s,hiddenElements:d}},exports.useFilterLayout=function(e,r,i,u){var n=t.useState(null),s=f.default(n,2),a=s[0],c=s[1];return t.useEffect((function(){if(u&&r){var t=o.getStartComponent(e),n=o.getMiddleComponent(e),s=o.getEndComponents(e),a=t&&n&&!s,d=t&&!n&&s,h=t&&n&&s;if(t&&!n&&!s){var f=r[t.key];if(f<=u)return void c(l.LARGE_SIZE_LAYOUT);if(f<=u/2)return void c(l.MEDIUM_SIZE_LAYOUT)}else if(a||d){var b=r[t.key],p=a?r[n.key]:r[s.key];if(b+p<=u)return void c(l.LARGE_SIZE_LAYOUT);if(i+p<=u)return void c(l.MEDIUM_SIZE_LAYOUT)}else if(h){var m=r[t.key],g=r[n.key],v=r[s.key];if(m+g+v<=u)return void c(l.LARGE_SIZE_LAYOUT);if(i+g+v<=u)return void c(l.MEDIUM_SIZE_LAYOUT);if(i+v<=u)return void c(l.SMALL_SIZE_LAYOUT)}c(l.SMALL_SIZE_LAYOUT)}}),[r,u]),a};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),i=require("react-dom"),u=require("lodash"),n=require("@material-ui/core/styles"),s=require("../components/FiltersToggler.js"),o=require("../utils.js"),l=require("../constants.js"),a=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("../../../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");var c=require("../../../utils/createAdaptiveRoot.js"),d=require("react/jsx-runtime");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=h(e),p=h(r);function b(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r&&(i=i.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,i)}return t}function m(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?b(Object(t),!0).forEach((function(r){f.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}exports.useAppFilterTogglerWidth=function(){var e=t.useState(null),r=p.default(e,2),u=r[0],o=r[1];return t.useEffect((function(){var e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",document.body.appendChild(e);var r=c.createAdaptiveRoot(e);i.flushSync((function(){r.render(d.jsx(n.MuiThemeProvider,{theme:a.darkTheme,children:d.jsx(s,{})}))}));var t=e.getBoundingClientRect();r.unmount(),e.remove(),o(t.width)}),[]),u},exports.useComonentsWidth=function(e){var r=t.useRef(),i=t.useState(null),n=p.default(i,2),s=n[0],o=n[1],l=t.useRef({}),a=e.filter((function(e){return!!e})),c=d.jsx("div",{ref:r,style:{position:"absolute",width:0,height:0,overflow:"hidden"},children:a.map((function(e,r){return d.jsx("div",{"data-key":null==e?void 0:e.key,style:{position:"absolute"},children:e},r)}))});return t.useEffect((function(){var e;if(!u.isEqual(a,l.current)){var t=Array.from(null===(e=r.current)||void 0===e?void 0:e.childNodes).reduce((function(e,r){var t,i=null==r||null===(t=r.getAttribute)||void 0===t?void 0:t.call(r,"data-key"),u=null==r?void 0:r.getBoundingClientRect().width;return m(m({},e),{},f.default({},i,u))}),{});Object.values(t).length===a.length&&(u.isEqual(s,t)||o(t)),l.current=a}})),{componentsWidth:s,hiddenElements:c}},exports.useFilterLayout=function(e,r,i,u){var n=t.useState(null),s=p.default(n,2),a=s[0],c=s[1];return t.useEffect((function(){if(u&&r){var t=o.getStartComponent(e),n=o.getMiddleComponent(e),s=o.getEndComponents(e),a=t&&n&&!s,d=t&&!n&&s,h=t&&n&&s;if(t&&!n&&!s){var f=r[t.key];if(f<=u)return void c(l.LARGE_SIZE_LAYOUT);if(f<=u/2)return void c(l.MEDIUM_SIZE_LAYOUT)}else if(a||d){var p=r[t.key],b=a?r[n.key]:r[s.key];if(p+b<=u)return void c(l.LARGE_SIZE_LAYOUT);if(i+b<=u)return void c(l.MEDIUM_SIZE_LAYOUT)}else if(h){var m=r[t.key],v=r[n.key],g=r[s.key];if(m+v+g<=u)return void c(l.LARGE_SIZE_LAYOUT);if(i+v+g<=u)return void c(l.MEDIUM_SIZE_LAYOUT);if(i+g<=u)return void c(l.SMALL_SIZE_LAYOUT)}c(l.SMALL_SIZE_LAYOUT)}}),[r,u]),a};
 //# sourceMappingURL=index.js.map

package/cjs-bundle/components/PinnableFilters/effects/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/PinnableFilters/effects/index.js"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport ~~ReactDOM~~ from 'react-dom';\nimport { isEqual } from 'lodash';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\n\nimport FiltersToggler from '../components/FiltersToggler';\nimport { getEndComponents, getMiddleComponent, getStartComponent } from '../utils';\nimport { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from '../constants';\n\nimport { theme } from '~/config';\n\n// NOTE: Determine layout according to the width of elements\nexport function useFilterLayout(components, componentsWidth, appFilterTogglerWidth, appWidth) {\n const [layout, setLayout] = useState(null);\n\n useEffect(() => {\n if (!appWidth \|\| !componentsWidth) {\n return;\n }\n\n const filtersComponent = getStartComponent(components);\n const goalComponent = getMiddleComponent(components);\n const switchComponent = getEndComponents(components);\n\n const hasFiltersOnly = filtersComponent && !goalComponent && !switchComponent;\n const hasFiltersAndGoals = filtersComponent && goalComponent && !switchComponent;\n const hasFiltersAndSwitch = filtersComponent && !goalComponent && switchComponent;\n const hasAll = filtersComponent && goalComponent && switchComponent;\n\n if (hasFiltersOnly) {\n const filtersWidth = componentsWidth[filtersComponent.key];\n\n if (filtersWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (filtersWidth <= appWidth / 2) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n } else if (hasFiltersAndGoals \|\| hasFiltersAndSwitch) {\n const startWidth = componentsWidth[filtersComponent.key];\n const endWidth = hasFiltersAndGoals\n ? componentsWidth[goalComponent.key]\n : componentsWidth[switchComponent.key];\n\n if (startWidth + endWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + endWidth <= appWidth) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n } else if (hasAll) {\n const startWidth = componentsWidth[filtersComponent.key];\n const middleWidth = componentsWidth[goalComponent.key];\n const endWidth = componentsWidth[switchComponent.key];\n\n if (startWidth + middleWidth + endWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + middleWidth + endWidth <= appWidth) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + endWidth <= appWidth) {\n setLayout(SMALL_SIZE_LAYOUT);\n return;\n }\n }\n\n setLayout(SMALL_SIZE_LAYOUT);\n }, [componentsWidth, appWidth]);\n\n return layout;\n}\n\n// NOTE: Calculate the width of child components here\nexport function useComonentsWidth(components) {\n // const widthRef = useRef({});\n const hiddenElementsRef = useRef();\n const [widthDict, setWidthDict] = useState(null);\n const prevComponentsRef = useRef({});\n\n const validComponents = components.filter(component => !!component);\n const hiddenElements = (\n <div\n ref={hiddenElementsRef}\n style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}\n >\n {validComponents.map((component, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <div key={index} data-key={component?.key} style={{ position: 'absolute' }}>\n {component}\n </div>\n );\n })}\n </div>\n );\n\n // NOTE: Calcualte width of each components\n useEffect(() => {\n // NOTE: Don't calcuate width again\n if (isEqual(validComponents, prevComponentsRef.current)) {\n return;\n }\n\n const nodesArray = Array.from(hiddenElementsRef.current?.childNodes);\n const sizeMap = nodesArray.reduce((acc, node) => {\n const key = node?.getAttribute?.('data-key');\n const value = node?.getBoundingClientRect().width;\n\n return {\n ...acc,\n [key]: value,\n };\n }, {});\n\n if (Object.values(sizeMap).length === validComponents.length) {\n if (!isEqual(widthDict, sizeMap)) {\n setWidthDict(sizeMap);\n }\n }\n\n prevComponentsRef.current = validComponents;\n });\n\n return { componentsWidth: widthDict, hiddenElements };\n}\n\n// NOTE: Calculate the width of Toggler Component\nexport function useAppFilterTogglerWidth() {\n const [width, setWidth] = useState(null);\n\n useEffect(() => {\n const element = document.createElement('div');\n element.style.position = 'absolute';\n element.style.visibility = 'hidden';\n document.body.appendChild(element);\n\n ~~ReactDOM~~.render(\n <MuiThemeProvider theme={theme.darkTheme}>\n <FiltersToggler />\n </MuiThemeProvider~~>,\~~n ~~element,\~~n () ~~=> {\~~n const dims = element.getBoundingClientRect();\n element.remove();\n setWidth(dims.width);\n ~~}\n );\n~~ }, []);\n\n return width;\n}\n"],"names":["useState","_useState6","_slicedToArray","_useState5","width","setWidth","useEffect","element","document","createElement","style","position","visibility","body","appendChild","~~ReactDOM~~","render","_jsx","jsx","MuiThemeProvider","theme","darkTheme","children","FiltersToggler","dims","getBoundingClientRect","remove","components","hiddenElementsRef","useRef","_useState4","_useState3","widthDict","setWidthDict","prevComponentsRef","validComponents","filter","component","hiddenElements","ref","height","overflow","map","index","key","_hiddenElementsRef$cu","isEqual","current","sizeMap","Array","from","childNodes","reduce","acc","node","_node$getAttribute","getAttribute","call","value","_objectSpread","_defineProperty","Object","values","length","componentsWidth","appFilterTogglerWidth","appWidth","_useState2","_useState","layout","setLayout","filtersComponent","getStartComponent","goalComponent","getMiddleComponent","switchComponent","getEndComponents","hasFiltersAndGoals","hasFiltersAndSwitch","hasAll","filtersWidth","LARGE_SIZE_LAYOUT","MEDIUM_SIZE_LAYOUT","startWidth","endWidth","middleWidth","SMALL_SIZE_LAYOUT"],"mappings":"~~w1EA0IO~~,WACL,IAA0BA,EAAAA,EAAQA,SAAC,MAAKC,EAAAC,EAAAA,QAAAC,EAAA,GAAjCC,EAAKH,EAAA,GAAEI,EAAQJ,EAAA,~~GAqBtB~~,~~OAnBAK~~,EAAAA,WAAU,WACR,IAAMC,EAAUC,SAASC,cAAc,OACvCF,EAAQG,MAAMC,SAAW,WACzBJ,EAAQG,MAAME,WAAa,SAC3BJ,SAASK,KAAKC,YAAYP,~~GAE1BQ~~,~~UAASC~~,~~OACPC~~,EAAAC,IAACC,mBAAgB,CAACC,MAAOA,EAAgBC,UAAAC,SACvCL,EAAAA,IAACM,EAAc,~~MAEjBhB~~,~~GACA~~,~~WACE~~,~~IAAMiB~~,~~EAAOjB~~,~~EAAQkB~~,~~wBACrBlB~~,~~EAAQmB~~,~~SACRrB~~,~~EAASmB~~,~~EAAKpB~~,~~MAChB~~,~~GAEH~~,GAAE,IAEIA,CACT,~~4BA7EO~~,~~SAA2BuB~~,GAEhC,IAAMC,EAAoBC,EAAAA,~~SACQ7B~~,EAAAA,EAAQA,SAAC,~~MAAK8B~~,~~EAAA5B~~,EAAAA,~~QAAA6B~~,EAAA,GAAzCC,EAASF,EAAA,GAAEG,EAAYH,EAAA,GACxBI,EAAoBL,SAAO,CAAA,GAE3BM,EAAkBR,EAAWS,QAAO,SAAAC,GAAS,QAAMA,KACnDC,~~EACJrB~~,EAAAC,IAAA,MAAA,~~CACEqB~~,IAAKX,~~EACLlB~~,MAAO,CAAEC,SAAU,WAAYP,MAAO,~~EAAGoC~~,OAAQ,EAAGC,SAAU,~~UAAWnB~~,~~SAExEa~~,EAAgBO,KAAI,SAACL,EAAWM,GAC/B,~~OAEE1B~~,EAAAA,IAAA,MAAA,CAAiB,~~WAAUoB~~,aAAAA,EAAAA,EAAWO,~~IAAKlC~~,MAAO,CAAEC,SAAU,~~YAAaW~~,~~SACxEe~~,GADOM,QAmClB,~~OA1BArC~~,EAAAA,WAAU,WAAM,~~IAAAuC~~,EAEd,IAAIC,UAAQX,EAAiBD,EAAkBa,SAA/C,CAIA,IACMC,EADaC,MAAMC,KAA8B,QAA1BL,EAACjB,EAAkBmB,eAAO,IAAAF,OAAA,EAAzBA,EAA2BM,YAC9BC,QAAO,SAACC,EAAKC,GAAS,IAAAC,EACzCX,EAAMU,SAAA,QAAAA,EAAAA,EAAME,oBAAN,IAAAD,OAAAD,EAAAC,EAAAE,KAAAH,EAAqB,YAC3BI,EAAQJ,aAAAA,EAAAA,~~EAAM7B~~,~~wBAAwBrB~~,MAE5C,~~OAAAuD~~,EAAAA,EAAA,CAAA,EACKN,GAAG,GAAAO,EAAAA,QAAA,CAAA,EACLhB,EAAMc,GAEV,GAAE,CAAE,GAEDG,OAAOC,OAAOd,GAASe,SAAW5B,EAAgB4B,SAC/CjB,EAAOA,QAACd,EAAWgB,IACtBf,EAAae,IAIjBd,EAAkBa,QAAUZ,CAnB5B,CAoBF,IAEO,CAAE6B,gBAAiBhC,EAAWM,eAAAA,EACvC,0BA3HO,SAAyBX,EAAYqC,EAAiBC,EAAuBC,GAClF,~~IAA4BlE~~,EAAAA,EAAQA,SAAC,~~MAAKmE~~,~~EAAAjE~~,EAAAA,~~QAAAkE~~,EAAA,GAAnCC,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAmExB,~~OAjEA7D~~,EAAAA,WAAU,WACR,~~GAAK4D~~,GAAaF,EAAlB,CAIA,IAAMO,EAAmBC,oBAAkB7C,GACrC8C,EAAgBC,qBAAmB/C,GACnCgD,EAAkBC,mBAAiBjD,GAGnCkD,EAAqBN,GAAoBE,IAAkBE,EAC3DG,EAAsBP,IAAqBE,GAAiBE,EAC5DI,EAASR,GAAoBE,GAAiBE,EAEpD,GALuBJ,IAAqBE,IAAkBE,EAK1C,CAClB,IAAMK,EAAehB,EAAgBO,EAAiB3B,KAEtD,GAAIoC,GAAgBd,EAElB,YADAI,EAAUW,EAAiBA,mBAI7B,GAAID,GAAgBd,EAAW,EAE7B,YADAI,EAAUY,EAAkBA,mBAGhC,MAAO,GAAIL,GAAsBC,EAAqB,CACpD,IAAMK,EAAanB,EAAgBO,EAAiB3B,KAC9CwC,EAAWP,EACbb,EAAgBS,EAAc7B,KAC9BoB,EAAgBW,EAAgB/B,KAEpC,GAAIuC,EAAaC,GAAYlB,EAE3B,YADAI,EAAUW,EAAiBA,mBAI7B,GAAIhB,EAAwBmB,GAAYlB,EAEtC,YADAI,EAAUY,EAAkBA,mBAG/B,MAAM,GAAIH,EAAQ,CACjB,IAAMI,EAAanB,EAAgBO,EAAiB3B,KAC9CyC,EAAcrB,EAAgBS,EAAc7B,KAC5CwC,EAAWpB,EAAgBW,EAAgB/B,KAEjD,GAAIuC,EAAaE,EAAcD,GAAYlB,EAEzC,YADAI,EAAUW,EAAiBA,mBAI7B,GAAIhB,EAAwBoB,EAAcD,GAAYlB,EAEpD,YADAI,EAAUY,EAAkBA,oBAI9B,GAAIjB,EAAwBmB,GAAYlB,EAEtC,YADAI,EAAUgB,EAAiBA,kBAG/B,CAEAhB,EAAUgB,EAAiBA,kBA3D3B,CA4DF,GAAG,CAACtB,EAAiBE,IAEdG,CACT"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/PinnableFilters/effects/index.js"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { isEqual } from 'lodash';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\n\nimport FiltersToggler from '../components/FiltersToggler';\nimport { getEndComponents, getMiddleComponent, getStartComponent } from '../utils';\nimport { LARGE_SIZE_LAYOUT, MEDIUM_SIZE_LAYOUT, SMALL_SIZE_LAYOUT } from '../constants';\n\nimport { theme } from '~/config';\nimport { createAdaptiveRoot } from '~/utils/createAdaptiveRoot';\n\n// NOTE: Determine layout according to the width of elements\nexport function useFilterLayout(components, componentsWidth, appFilterTogglerWidth, appWidth) {\n const [layout, setLayout] = useState(null);\n\n useEffect(() => {\n if (!appWidth \|\| !componentsWidth) {\n return;\n }\n\n const filtersComponent = getStartComponent(components);\n const goalComponent = getMiddleComponent(components);\n const switchComponent = getEndComponents(components);\n\n const hasFiltersOnly = filtersComponent && !goalComponent && !switchComponent;\n const hasFiltersAndGoals = filtersComponent && goalComponent && !switchComponent;\n const hasFiltersAndSwitch = filtersComponent && !goalComponent && switchComponent;\n const hasAll = filtersComponent && goalComponent && switchComponent;\n\n if (hasFiltersOnly) {\n const filtersWidth = componentsWidth[filtersComponent.key];\n\n if (filtersWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (filtersWidth <= appWidth / 2) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n } else if (hasFiltersAndGoals \|\| hasFiltersAndSwitch) {\n const startWidth = componentsWidth[filtersComponent.key];\n const endWidth = hasFiltersAndGoals\n ? componentsWidth[goalComponent.key]\n : componentsWidth[switchComponent.key];\n\n if (startWidth + endWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + endWidth <= appWidth) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n } else if (hasAll) {\n const startWidth = componentsWidth[filtersComponent.key];\n const middleWidth = componentsWidth[goalComponent.key];\n const endWidth = componentsWidth[switchComponent.key];\n\n if (startWidth + middleWidth + endWidth <= appWidth) {\n setLayout(LARGE_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + middleWidth + endWidth <= appWidth) {\n setLayout(MEDIUM_SIZE_LAYOUT);\n return;\n }\n\n if (appFilterTogglerWidth + endWidth <= appWidth) {\n setLayout(SMALL_SIZE_LAYOUT);\n return;\n }\n }\n\n setLayout(SMALL_SIZE_LAYOUT);\n }, [componentsWidth, appWidth]);\n\n return layout;\n}\n\n// NOTE: Calculate the width of child components here\nexport function useComonentsWidth(components) {\n // const widthRef = useRef({});\n const hiddenElementsRef = useRef();\n const [widthDict, setWidthDict] = useState(null);\n const prevComponentsRef = useRef({});\n\n const validComponents = components.filter(component => !!component);\n const hiddenElements = (\n <div\n ref={hiddenElementsRef}\n style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}\n >\n {validComponents.map((component, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <div key={index} data-key={component?.key} style={{ position: 'absolute' }}>\n {component}\n </div>\n );\n })}\n </div>\n );\n\n // NOTE: Calcualte width of each components\n useEffect(() => {\n // NOTE: Don't calcuate width again\n if (isEqual(validComponents, prevComponentsRef.current)) {\n return;\n }\n\n const nodesArray = Array.from(hiddenElementsRef.current?.childNodes);\n const sizeMap = nodesArray.reduce((acc, node) => {\n const key = node?.getAttribute?.('data-key');\n const value = node?.getBoundingClientRect().width;\n\n return {\n ...acc,\n [key]: value,\n };\n }, {});\n\n if (Object.values(sizeMap).length === validComponents.length) {\n if (!isEqual(widthDict, sizeMap)) {\n setWidthDict(sizeMap);\n }\n }\n\n prevComponentsRef.current = validComponents;\n });\n\n return { componentsWidth: widthDict, hiddenElements };\n}\n\n// NOTE: Calculate the width of Toggler Component\nexport function useAppFilterTogglerWidth() {\n const [width, setWidth] = useState(null);\n\n useEffect(() => {\n const element = document.createElement('div');\n element.style.position = 'absolute';\n element.style.visibility = 'hidden';\n document.body.appendChild(element);\n\n const root = createAdaptiveRoot(element);\n flushSync(() => {\n root.render(\n <MuiThemeProvider theme={theme.darkTheme}>\n <FiltersToggler />\n </MuiThemeProvider>\n );\n });\n const dims = element.getBoundingClientRect();\n root.unmount();\n element.remove();\n setWidth(dims.width);\n }, []);\n\n return width;\n}\n"],"names":["useState","_useState6","_slicedToArray","_useState5","width","setWidth","useEffect","element","document","createElement","style","position","visibility","body","appendChild","root","createAdaptiveRoot","flushSync","render","_jsx","jsx","MuiThemeProvider","theme","darkTheme","children","FiltersToggler","dims","getBoundingClientRect","unmount","remove","components","hiddenElementsRef","useRef","_useState4","_useState3","widthDict","setWidthDict","prevComponentsRef","validComponents","filter","component","hiddenElements","ref","height","overflow","map","index","key","_hiddenElementsRef$cu","isEqual","current","sizeMap","Array","from","childNodes","reduce","acc","node","_node$getAttribute","getAttribute","call","value","_objectSpread","_defineProperty","Object","values","length","componentsWidth","appFilterTogglerWidth","appWidth","_useState2","_useState","layout","setLayout","filtersComponent","getStartComponent","goalComponent","getMiddleComponent","switchComponent","getEndComponents","hasFiltersAndGoals","hasFiltersAndSwitch","hasAll","filtersWidth","LARGE_SIZE_LAYOUT","MEDIUM_SIZE_LAYOUT","startWidth","endWidth","middleWidth","SMALL_SIZE_LAYOUT"],"mappings":"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"}