@corva/ui 3.68.0-rc.0 → 3.69.0-2
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.
- package/cjs-bundle/components/OffsetWellPickerV2/components/Map/Map.js +1 -1
- package/cjs-bundle/components/OffsetWellPickerV2/components/Map/Map.js.map +1 -1
- package/cjs-bundle/components/PinnableFilters/effects/index.js +1 -1
- package/cjs-bundle/components/PinnableFilters/effects/index.js.map +1 -1
- package/cjs-bundle/components/VirtualizedTable/VirtualizedTable.js +1 -1
- package/cjs-bundle/config/highcharts/highcharts.js +1 -1
- package/cjs-bundle/config/highcharts/highcharts.js.map +1 -1
- package/cjs-bundle/config/initGlobalDependencies.js +1 -1
- package/cjs-bundle/config/initGlobalDependencies.js.map +1 -1
- package/components/OffsetWellPickerV2/components/Map/Map.js +1 -1
- package/components/OffsetWellPickerV2/components/Map/Map.js.map +1 -1
- package/components/PinnableFilters/effects/index.js +1 -1
- package/components/PinnableFilters/effects/index.js.map +1 -1
- package/components/VirtualizedTable/VirtualizedTable.d.ts.map +1 -1
- package/components/VirtualizedTable/VirtualizedTable.js +1 -1
- package/config/highcharts/highcharts.d.ts.map +1 -1
- package/config/highcharts/highcharts.js +1 -1
- package/config/highcharts/highcharts.js.map +1 -1
- package/config/initGlobalDependencies.d.ts +1 -1
- package/config/initGlobalDependencies.d.ts.map +1 -1
- package/config/initGlobalDependencies.js +1 -1
- package/config/initGlobalDependencies.js.map +1 -1
- package/mcp-server/server.mjs +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),u=require("react-dom"),
|
|
1
|
+
"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),u=require("react-dom"),n=require("prop-types"),i=require("lodash"),o=require("@material-ui/core/styles"),a=require("./Map.css.js"),l=require("../../../../utils/index.js"),s=require("../../../../config/theme/index.js");require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/regenerator"),require("highcharts"),require("highcharts/highcharts-more"),require("highcharts/modules/solid-gauge"),require("highcharts/modules/heatmap"),require("highcharts/modules/boost"),require("highcharts/modules/exporting"),require("highcharts/modules/xrange"),require("highcharts/modules/dumbbell"),require("highcharts/modules/pattern-fill"),require("highcharts/modules/annotations"),require("highcharts-multicolor-series"),require("dompurify"),require("@babel/runtime/helpers/createClass"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/assertThisInitialized"),require("@babel/runtime/helpers/inherits"),require("@babel/runtime/helpers/possibleConstructorReturn"),require("@babel/runtime/helpers/getPrototypeOf"),require("@babel/runtime/helpers/toArray"),require("@babel/runtime/helpers/toConsumableArray"),require("../../../../clients/subscriptions/constants.js"),require("../../../../clients/subscriptions.v1.js"),require("../../../../clients/subscriptions/subscriptions-client.factory.js"),require("../../../../config/extendNative.js"),require("../../../../config/mapboxGl/index.js"),require("mapbox-gl/dist/mapbox-gl.css");var c=require("react/jsx-runtime"),d=require("mapbox-gl");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=f(e),p=f(r),h=f(u),b=f(n),g=f(d);function y(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);r&&(u=u.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,u)}return t}function v(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?y(Object(t),!0).forEach((function(r){m.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):y(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var q=l.mapbox.isValidCoordinates,F=["#FF00FF","#F5BD80","#FF0000","#0080FF","#FF8000","#58ACFA","#FA58F4","#40FF00","#4B8A08","#40FF00","#D8F781"],j=[29.749907,-95.358421],w={type:"FeatureCollection",features:[]},x=function(e){var r=p.default(e,2),t=r[0];return[r[1],t]};function O(e){var r=e.subjectWell,u=e.wells,n=e.offsetWells,l=e.radius,d=e.subjectWellMarkerSize,f=e.wellMarkerSize,b=e.popUpFormatter,y=e.coordsDataPath,O=t.useRef(null),P=t.useRef(null),C=t.useRef(null),M=t.useRef(null),S=t.useRef(null),D=t.useRef(),N=t.useState(!1),k=p.default(N,2),B=k[0],I=k[1],W=t.useMemo((function(){return u.filter((function(e){return!r||r.id!==e.id}))}),[r,u]),E=t.useMemo((function(){return r&&i.get(r,y)}),[r,y]),L=t.useMemo((function(){var e=[],t=!1;W.forEach((function(u){"Null"===u.formation?t=!0:r&&r.formation===u.formation||e.includes(u.formation)||e.push(u.formation)}));var u=r?[r.formation].concat(i.sortBy(e)):i.sortBy(e);t&&!u.includes("Null")&&u.push("Null");var n=u.reduce((function(e,r,t){return v(v({},e),{},m.default({},r,F[t%F.length]))}),{});return[u,n]}),[r,W]),R=p.default(L,2),T=R[0],z=R[1];return t.useEffect((function(){P.current=new g.default.Map({container:O.current,style:"mapbox://styles/mapbox/dark-v9",center:x(j),zoom:1,attributionControl:!1,scrollZoom:!1}),P.current.addControl(new g.default.NavigationControl({showCompass:!1}),"bottom-right"),P.current.on("load",(function(){P.current.addSource("radius-circle",{type:"geojson",data:w}),P.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),P.current.addSource("wells",{type:"geojson",data:w}),P.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),I(!0)}));var e=P.current;return function(){e.remove(),P.current=null,C.current=null,M.current=null}}),[]),t.useEffect((function(){if(P.current&&B){if(!E)return P.current.getSource("radius-circle").setData(w),void(C.current=null);var e=function(e,r){for(var t=p.default(e,2),u=t[0],n=t[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,o=[],a=r/(111320*Math.cos(u*Math.PI/180)),l=r/110574,s=0;s<=i;s+=1){var c=s/i*(2*Math.PI);o.push([n+a*Math.cos(c),u+l*Math.sin(c)])}return o}(E,1609.34*l);P.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[e]}}),C.current=e.reduce((function(e,r){return e.extend(r)}),new g.default.LngLatBounds)}}),[l,E,B]),t.useEffect((function(){var e;if(P.current&&B){var a=D.current;D.current=u,null===(e=S.current)||void 0===e||e.remove();var l=n.map((function(e){return e.id})),m=[],p={},v=new g.default.LngLatBounds;u.forEach((function(e){var t=i.get(e,y);if(t&&q(t)){var u=r&&r.id===e.id,n=l.includes(e.id),o=u?d:f,a=u||n?"#00FFFF":z[e.formation],s=u||n?1:.3;p[e.id]=e,v.extend(x(t)),m.push({type:"Feature",geometry:{type:"Point",coordinates:x(t)},properties:{wellId:e.id,radius:o,color:a,opacity:s}})}})),P.current.getSource("wells").setData({type:"FeatureCollection",features:m}),M.current=m.length?v:null;var F=P.current,j=null,w=function(e){F.getCanvas().style.cursor="pointer";var r=p[e.features[0].properties.wellId];if(r&&r.id!==j&&(j=r.id,b)){var u=document.createElement("div"),n=t.createElement(b,{well:r,color:z[r.formation]});h.default.render(c.jsx(o.MuiThemeProvider,{theme:s.darkTheme,children:n}),u),S.current||(S.current=new g.default.Popup({closeButton:!1,maxWidth:"none"})),S.current.setLngLat(x(i.get(r,y))).setDOMContent(u).addTo(F)}},O=function(){j=null,F.getCanvas().style.cursor=""};return F.on("mousemove","wells",w),F.on("mouseleave","wells",O),setTimeout((function(){P.current&&C.current&&u!==a&&P.current.fitBounds(C.current,{padding:5})}),500),function(){F.off("mousemove","wells",w),F.off("mouseleave","wells",O)}}}),[r,u,n,z,B]),t.useEffect((function(){setTimeout((function(){r?P.current&&C.current&&P.current.fitBounds(C.current,{padding:5}):P.current&&M.current&&P.current.fitBounds(M.current)}),500)}),[l,r,B]),c.jsxs("div",{className:a.map,children:[c.jsx("div",{className:a.mapMain,ref:O}),c.jsxs("div",{className:a.mapFooter,children:[n&&c.jsxs("div",{className:a.mapFooterItem,children:[c.jsx("div",{className:a.mapFooterItemSquare,style:{backgroundColor:"#00FFFF"}}),c.jsx("div",{className:a.mapFooterItemLabel,children:"Selected Offset Wells"})]}),T.map((function(e){return c.jsxs("div",{className:a.mapFooterItem,children:[c.jsx("div",{className:a.mapFooterItemSquare,style:{backgroundColor:z[e]}}),c.jsx("div",{className:a.mapFooterItemLabel,children:e})]},e)}))]})]})}O.propTypes={subjectWell:b.default.shape({id:b.default.number,formation:b.default.string}),wells:b.default.arrayOf(b.default.shape({})).isRequired,offsetWells:b.default.arrayOf(b.default.shape({})),radius:b.default.number.isRequired,subjectWellMarkerSize:b.default.number,wellMarkerSize:b.default.number,popUpFormatter:b.default.func,coordsDataPath:b.default.string},O.defaultProps={subjectWell:null,subjectWellMarkerSize:10,wellMarkerSize:5,popUpFormatter:null,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var P=t.memo(O);module.exports=P;
|
|
2
2
|
//# sourceMappingURL=Map.js.map
|
|
@@ -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 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 10;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#00FFFF';\nconst COLORS = [\n '#FF00FF',\n '#F5BD80',\n '#FF0000',\n '#0080FF',\n '#FF8000',\n '#58ACFA',\n '#FA58F4',\n '#40FF00',\n '#4B8A08',\n '#40FF00',\n '#D8F781',\n];\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n subjectWell,\n wells,\n offsetWells,\n radius,\n subjectWellMarkerSize,\n wellMarkerSize,\n popUpFormatter,\n coordsDataPath,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef(null);\n const radiusCircleBoundsRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const restWells = useMemo(() => {\n return wells.filter(well => !subjectWell || subjectWell.id !== well.id);\n }, [subjectWell, wells]);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Get well marker colors according to its target formation\n const [formations, colorDict] = useMemo(() => {\n // NOTE: Determine well marker colors\n const restFormations = [];\n let hasNullFormation = false;\n\n restWells.forEach(well => {\n if (well.formation === 'Null') {\n hasNullFormation = true;\n } else if (\n (!subjectWell || subjectWell.formation !== well.formation) &&\n !restFormations.includes(well.formation)\n ) {\n restFormations.push(well.formation);\n }\n });\n\n const sortedFormations = subjectWell\n ? [subjectWell.formation].concat(sortBy(restFormations))\n : sortBy(restFormations);\n\n if (hasNullFormation && !sortedFormations.includes('Null')) {\n sortedFormations.push('Null');\n }\n\n const colors = sortedFormations.reduce(\n (result, item, idx) => ({\n ...result,\n [item]: COLORS[idx % COLORS.length],\n }),\n {}\n );\n\n return [sortedFormations, colors];\n }, [subjectWell, restWells]);\n\n // NOTE: Initialize map\n useEffect(() => {\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack)\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': ['get', 'color'],\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n setIsMapReady(true);\n });\n\n const map = mapRef.current;\n return () => {\n map.remove();\n mapRef.current = null;\n radiusCircleBoundsRef.current = null;\n markersBoundsRef.current = null;\n };\n }, []);\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n radiusCircleBoundsRef.current = null;\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n radiusCircleBoundsRef.current = ring.reduce(\n (bounds, coord) => bounds.extend(coord),\n new mapboxgl.LngLatBounds()\n );\n }, [radius, subjectWellCoords, isMapReady]);\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n popupRef.current?.remove();\n\n const offsetWellIds = offsetWells.map(well => well.id);\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n wells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n const color = isWellSubject || isWellOffset ? OFFSET_WELL_COLOR : colorDict[well.formation];\n const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { wellId: well.id, radius: r, color, opacity },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well || well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n if (popUpFormatter) {\n // Container to put React generated content in.\n const popUpContainer = document.createElement('div');\n const popUpContent = createElement(popUpFormatter, {\n well,\n color: colorDict[well.formation],\n });\n // NOTE: Custom popup may have buttons\n ReactDOM.render(\n <MuiThemeProvider theme={theme.darkTheme}>{popUpContent}</MuiThemeProvider>,\n popUpContainer\n );\n\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current\n .setLngLat(toLngLat(get(well, coordsDataPath)))\n .setDOMContent(popUpContainer)\n .addTo(map);\n }\n };\n\n const handleMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleMouseLeave);\n\n setTimeout(() => {\n if (mapRef.current && radiusCircleBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, { padding: 5 });\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleMouseLeave);\n };\n }, [subjectWell, wells, offsetWells, colorDict, isMapReady]);\n\n useEffect(() => {\n setTimeout(() => {\n if (subjectWell) {\n if (mapRef.current && radiusCircleBoundsRef.current) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, {\n padding: 5,\n });\n }\n } else if (mapRef.current && markersBoundsRef.current) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n }, [radius, subjectWell, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n\n <div className={styles.mapFooter}>\n {offsetWells && (\n <div className={styles.mapFooterItem}>\n <div\n className={styles.mapFooterItemSquare}\n style={{ backgroundColor: OFFSET_WELL_COLOR }}\n />\n <div className={styles.mapFooterItemLabel}>Selected Offset Wells</div>\n </div>\n )}\n\n {formations.map(item => (\n <div className={styles.mapFooterItem} key={item}>\n <div\n className={styles.mapFooterItemSquare}\n style={{ backgroundColor: colorDict[item] }}\n />\n <div className={styles.mapFooterItemLabel}>{item}</div>\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nWellsMap.propTypes = {\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n subjectWellMarkerSize: PropTypes.number,\n wellMarkerSize: PropTypes.number,\n popUpFormatter: PropTypes.func,\n coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n popUpFormatter: null,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","COLORS","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","popUpFormatter","coordsDataPath","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","restWells","useMemo","filter","well","id","subjectWellCoords","get","restFormations","hasNullFormation","forEach","formation","includes","push","sortedFormations","concat","sortBy","colors","reduce","result","item","idx","length","_useMemo2","_useMemo","formations","colorDict","useEffect","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","source","paint","map","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","sin","makeCirclePolygon","geometry","coordinates","bounds","coord","extend","LngLatBounds","_popupRef$current","prevWells","offsetWellIds","wellsById","coords","isWellSubject","isWellOffset","r","color","opacity","properties","wellId","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","jsx","MuiThemeProvider","theme","darkTheme","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","setTimeout","fitBounds","padding","off","_jsxs","className","styles","mapMain","ref","jsxs","mapFooter","mapFooterItem","mapFooterItemSquare","backgroundColor","mapFooterItemLabel","propTypes","PropTypes","shape","number","string","arrayOf","isRequired","func","defaultProps","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Map.js","sources":["../../../../../../src/components/OffsetWellPickerV2/components/Map/Map.js"],"sourcesContent":["import { createElement, memo, useRef, useEffect, useMemo, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get, sortBy } from 'lodash';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport { theme } from '~/config';\nimport mapboxgl from '~/config/mapboxGl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 10;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#00FFFF';\nconst COLORS = [\n '#FF00FF',\n '#F5BD80',\n '#FF0000',\n '#0080FF',\n '#FF8000',\n '#58ACFA',\n '#FA58F4',\n '#40FF00',\n '#4B8A08',\n '#40FF00',\n '#D8F781',\n];\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n subjectWell,\n wells,\n offsetWells,\n radius,\n subjectWellMarkerSize,\n wellMarkerSize,\n popUpFormatter,\n coordsDataPath,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef(null);\n const radiusCircleBoundsRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const restWells = useMemo(() => {\n return wells.filter(well => !subjectWell || subjectWell.id !== well.id);\n }, [subjectWell, wells]);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Get well marker colors according to its target formation\n const [formations, colorDict] = useMemo(() => {\n // NOTE: Determine well marker colors\n const restFormations = [];\n let hasNullFormation = false;\n\n restWells.forEach(well => {\n if (well.formation === 'Null') {\n hasNullFormation = true;\n } else if (\n (!subjectWell || subjectWell.formation !== well.formation) &&\n !restFormations.includes(well.formation)\n ) {\n restFormations.push(well.formation);\n }\n });\n\n const sortedFormations = subjectWell\n ? [subjectWell.formation].concat(sortBy(restFormations))\n : sortBy(restFormations);\n\n if (hasNullFormation && !sortedFormations.includes('Null')) {\n sortedFormations.push('Null');\n }\n\n const colors = sortedFormations.reduce(\n (result, item, idx) => ({\n ...result,\n [item]: COLORS[idx % COLORS.length],\n }),\n {}\n );\n\n return [sortedFormations, colors];\n }, [subjectWell, restWells]);\n\n // NOTE: Initialize map\n useEffect(() => {\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack)\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': ['get', 'color'],\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n setIsMapReady(true);\n });\n\n const map = mapRef.current;\n return () => {\n map.remove();\n mapRef.current = null;\n radiusCircleBoundsRef.current = null;\n markersBoundsRef.current = null;\n };\n }, []);\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n radiusCircleBoundsRef.current = null;\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n radiusCircleBoundsRef.current = ring.reduce(\n (bounds, coord) => bounds.extend(coord),\n new mapboxgl.LngLatBounds()\n );\n }, [radius, subjectWellCoords, isMapReady]);\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n popupRef.current?.remove();\n\n const offsetWellIds = offsetWells.map(well => well.id);\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n wells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n const color = isWellSubject || isWellOffset ? OFFSET_WELL_COLOR : colorDict[well.formation];\n const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { wellId: well.id, radius: r, color, opacity },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well || well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n if (popUpFormatter) {\n // Container to put React generated content in.\n const popUpContainer = document.createElement('div');\n const popUpContent = createElement(popUpFormatter, {\n well,\n color: colorDict[well.formation],\n });\n // NOTE: Custom popup may have buttons\n ReactDOM.render(\n <MuiThemeProvider theme={theme.darkTheme}>{popUpContent}</MuiThemeProvider>,\n popUpContainer\n );\n\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current\n .setLngLat(toLngLat(get(well, coordsDataPath)))\n .setDOMContent(popUpContainer)\n .addTo(map);\n }\n };\n\n const handleMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleMouseLeave);\n\n setTimeout(() => {\n if (mapRef.current && radiusCircleBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, { padding: 5 });\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleMouseLeave);\n };\n }, [subjectWell, wells, offsetWells, colorDict, isMapReady]);\n\n useEffect(() => {\n setTimeout(() => {\n if (subjectWell) {\n if (mapRef.current && radiusCircleBoundsRef.current) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, {\n padding: 5,\n });\n }\n } else if (mapRef.current && markersBoundsRef.current) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n }, [radius, subjectWell, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n\n <div className={styles.mapFooter}>\n {offsetWells && (\n <div className={styles.mapFooterItem}>\n <div\n className={styles.mapFooterItemSquare}\n style={{ backgroundColor: OFFSET_WELL_COLOR }}\n />\n <div className={styles.mapFooterItemLabel}>Selected Offset Wells</div>\n </div>\n )}\n\n {formations.map(item => (\n <div className={styles.mapFooterItem} key={item}>\n <div\n className={styles.mapFooterItemSquare}\n style={{ backgroundColor: colorDict[item] }}\n />\n <div className={styles.mapFooterItemLabel}>{item}</div>\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nWellsMap.propTypes = {\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n subjectWellMarkerSize: PropTypes.number,\n wellMarkerSize: PropTypes.number,\n popUpFormatter: PropTypes.func,\n coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n popUpFormatter: null,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","COLORS","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","popUpFormatter","coordsDataPath","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","restWells","useMemo","filter","well","id","subjectWellCoords","get","restFormations","hasNullFormation","forEach","formation","includes","push","sortedFormations","concat","sortBy","colors","reduce","result","item","idx","length","_useMemo2","_useMemo","formations","colorDict","useEffect","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","source","paint","map","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","sin","makeCirclePolygon","geometry","coordinates","bounds","coord","extend","LngLatBounds","_popupRef$current","prevWells","offsetWellIds","wellsById","coords","isWellSubject","isWellOffset","r","color","opacity","properties","wellId","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","jsx","MuiThemeProvider","theme","darkTheme","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","setTimeout","fitBounds","padding","off","_jsxs","className","styles","mapMain","ref","jsxs","mapFooter","mapFooterItem","mapFooterItemSquare","backgroundColor","mapFooterItemLabel","propTypes","PropTypes","shape","number","string","arrayOf","isRequired","func","defaultProps","memo"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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"),
|
|
1
|
+
"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("@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],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};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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":"
|
|
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":"6yEA0IO,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,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/toConsumableArray"),t=require("@babel/runtime/helpers/defineProperty"),r=require("react/jsx-runtime"),n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/toConsumableArray"),t=require("@babel/runtime/helpers/defineProperty"),r=require("react/jsx-runtime"),n=require("react"),i=require("classnames"),o=require("react-window"),a=require("@material-ui/core"),l=require("@material-ui/icons"),u=require("../../utils/convert.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(e),d=s(t),f=s(i);function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?m(Object(r),!0).forEach((function(t){d.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var p="ASC",y=p,b=a.makeStyles((function(e){var t={borderBottom:e.isLightTheme?"1px solid rgba(224, 224, 224, 1)":"1px solid rgba(81, 81, 81, 1)",display:"flex",flexFlow:"row nowrap",alignItems:"center"},r={minWidth:1,marginRight:10,"&:first-child":{marginLeft:10}};return{root:{display:"flex",overflow:"auto",flexFlow:"column nowrap"},row:t,cell:r,header:t,headerCell:h(h({},r),{},{display:"flex",alignItems:"center"}),sortable:{cursor:"pointer"},oddRow:{backgroundColor:e.isLightTheme?"rgba(189, 189, 189, 0.1)":"#303030"},headerLabel:{lineHeight:"14px",fontSize:"12px",fontStyle:"normal",letterSpacing:"-0.25px",display:"flex",alignItems:"center",flexWrap:"wrap"},cellData:{lineHeight:"14px",fontSize:"12px",fontWeight:"normal",fontStyle:"normal",letterSpacing:"0.15px"},unitLabel:{fontSize:"10px",opacity:.5},settingIcon:{padding:"3px",fontSize:"20px"},sortIcon:{fontSize:"16px"}}}));function x(e,t){var r=e.find((function(e){return e.key===t}))||{},n=r.unitType,i=r.customUnit;return i?"(".concat(i,")"):n?"(".concat(u.getUnitDisplay(n),")"):""}function g(e,t){return(e.find((function(e){return e.key===t}))||{}).headerLabelClassName||""}function w(e,t){return(e.find((function(e){return e.key===t}))||{}).headerLabelUnitClassName||""}var v=function(e){var t=e.columns,i=e.data,u=e.useColumnSetting,s=e.useFixedColumnWidth,m=e.onOpenSettingDlg,v=e.width,j=e.height,S=e.headerHeight,_=e.rowHeight,C=e.showTopSettingIcon,k=e.customMuiStyles,z=e.isTopSettingIconShownAlways,O=e.CustomCellRenderer,N=e.CustomHeaderCellRenderer,D=e.customRowStyle,T=e.sort,R=e.sortBy,I=e.sortDirection,M=e.onScroll,P=void 0===M?function(){}:M,L=b(),q=n.useMemo((function(){return h(h({},L),k)}),[L,k]),V=n.useMemo((function(){return{label:"",key:"setting",width:u?25:0}}),[u]),A=n.useMemo((function(){return t.filter((function(e){return e.show}))}),[t]),H=n.useMemo((function(){return u?[].concat(c.default(A),[V]):A}),[A,u,V]),E=n.useMemo((function(){if(v<=0)return{};var e=d.default({},V.key,V.width),t=[];return A.filter((function(e){return Number.isFinite(e.width)})).forEach((function(r){e[r.key]=r.width-1,t.push(r.width-1)})),A.filter((function(e){return!Number.isFinite(e.width)})).forEach((function(r){var n=t.reduce((function(e,t){return e+t}),0),i=Math.floor((v-n-V.width)/(A.length-t.length)),o=r.minWidth||65,a=i<o?o:i;e[r.key]=a-1,t.push(a-1)})),e}),[v,A,V]),B=n.useMemo((function(){return Object.values(E).reduce((function(e,t){return e+t}),0)}),[E]),F=z||B-12.5>=v;n.useEffect((function(){C(F)}),[F]);var W=n.useCallback((function(e){var t=e.index;return f.default(d.default({},q.oddRow,t%2==1))}),[q]),K=function(e){var n=e.label,i=e.dataKey,o=R||I||T;return N?r.jsx(N,{columnKey:i,columns:t,sortBy:R,sortDirection:I}):i===V.key?F?null:r.jsx(a.IconButton,{size:"small","aria-label":"customize columns",className:q.settingIcon,onClick:m,children:r.jsx(l.Settings,{fontSize:"inherit"})}):r.jsxs(a.Typography,{variant:"body2",className:f.default(q.headerLabel,g(t,i)),children:[n," ",r.jsx("span",{className:f.default(q.unitLabel,w(t,i)),children:x(t,i)}),o&&i!==R&&r.jsx(a.Tooltip,{title:"Sort A-Z",children:r.jsx(l.Sort,{fontSize:"small",className:L.sortIcon})}),o&&i===R&&(I===p?r.jsx(l.ArrowUpward,{fontSize:"small",className:L.sortIcon}):r.jsx(l.ArrowDownward,{fontSize:"small",className:L.sortIcon}))]})},U=n.useCallback((function(e){var n=e.ariaAttributes,i=e.style,o=e.data,l=e.tableColumns,u=e.index;return r.jsx("div",h(h({style:h(h({},i),null==D?void 0:D({index:u})),className:f.default(W({index:u}),L.row,"ReactVirtualized__Table__row")},n),{},{children:l.map((function(e){var n=e.key,i=o[u],l=O?r.jsx(O,{columnKey:n,value:i[n],rowData:i,columns:t}):r.jsx(a.Typography,{variant:"body2",className:q.cellData,children:i[n]});return r.jsx("div",{className:f.default(L.cell,"ReactVirtualized__Table__rowColumn"),style:{flex:"0 1 ".concat(E[n],"px"),overflow:"hidden"},children:l},n)}))}))}),[O,W,E,D,L,q.cellData,t]),G=n.useMemo((function(){return{width:s?B:v,height:j}}),[s,B,v,j]),Z=n.useMemo((function(){return{data:i,tableColumns:H}}),[i,H]),J=n.useCallback((function(e){return function(t){null==T||T({defaultSortDirection:y,event:t,sortBy:e,sortDirection:e!==R||I&&I!==y?y:"DESC"})}}),[T,R,I]),Q=R||I||T;return r.jsxs("div",{style:G,className:f.default(q.root,q.table,"ReactVirtualized__Table"),children:[r.jsx("div",{className:f.default(q.header,"ReactVirtualized__Table__headerRow"),style:{flex:"0 0 ".concat(S,"px")},children:H.map((function(e){return r.jsx("div",{className:f.default(q.headerCell,"setting"!==e.key&&T&&q.sortable,"ReactVirtualized__Table__headerColumn",Q&&"ReactVirtualized__Table__sortableHeaderColumn"),style:{flex:"0 1 ".concat(E[e.key],"px"),height:S},onClick:"setting"!==e.key?J(e.key):void 0,children:K({label:e.label,dataKey:e.key})},e.key)}))}),r.jsx(o.List,{rowProps:Z,rowCount:i.length,rowHeight:_,rowComponent:U,onScroll:P,className:"ReactVirtualized__Grid ReactVirtualized__Table__Grid"})]})};exports.VirtualizedTableComponent=v,exports.default=v;
|
|
2
2
|
//# sourceMappingURL=VirtualizedTable.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/asyncToGenerator"),t=require("@babel/runtime/helpers/slicedToArray"),r=require("@babel/runtime/helpers/typeof"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/asyncToGenerator"),t=require("@babel/runtime/helpers/slicedToArray"),r=require("@babel/runtime/helpers/typeof"),a=require("@babel/runtime/regenerator"),i=require("./constants.js"),n=require("./highcharts-contour.js"),s=require("./getHighchartsV10.js"),o=require("dompurify");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(e),c=u(t),d=u(r),h=u(a),f=u(o),p=function e(t){return"string"==typeof t?f.default.sanitize(t):("object"===d.default(t)&&null!==t&&Object.entries(t).forEach((function(r){var a=c.default(r,2),i=a[0],n=a[1];"string"==typeof n?t[i]=f.default.sanitize(t[i]):Array.isArray(n)?n.forEach((function(r,a){t[i][a]=e(r)})):"object"===d.default(n)&&(t[i]=e(n))})),t)};function g(){return g=l.default(h.default.mark((function e(){var t,r,a,o,u,l,c,d,f,g,b,H,v,A,y,S,T,V=arguments;return h.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t=V.length>0&&void 0!==V[0]?V[0]:{},r=t.version,a=void 0===r?i.HIGHCHARTS_V10_VERSION:r,[i.HIGHCHARTS_V8_VERSION,i.HIGHCHARTS_V10_VERSION].includes(a)){e.next=3;break}throw new Error("Invalid highcharts version: ".concat(a));case 3:if(a!==i.HIGHCHARTS_V8_VERSION){e.next=9;break}return e.next=6,Promise.resolve().then((function(){return require("./getHighchartsV8.js")}));case 6:e.t0=e.sent.getHighchartsV8,e.next=10;break;case 9:e.t0=s.getHighchartsV10;case 10:o=e.t0,u=o(),l=u.Highcharts,c=u.highchartsMore,d=u.HighchartsMulticolorSeries,f=u.addSolidGauge,g=u.addHeatmap,b=u.addBoost,H=u.addExporting,v=u.addXrange,A=u.addDumbbell,y=u.addPatternFill,S=u.addAnnotations,window.Highcharts=l,l.AST&&(l.AST.bypassHTMLFiltering=!0,l.AST.allowedAttributes.push("viewBox"),l.AST.allowedAttributes.push("fill-rule"),l.AST.allowedAttributes.push("clip-rule")),d(l),c(l),f(l),g(l),b(l),H(l),v(l),A(l),y(l),n(l),S(l),T=l.chart,l.chart=function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length,a=new Array(r>2?r-2:0),i=2;i<r;i++)a[i-2]=arguments[i];return T.apply(void 0,[e,p(t)].concat(a))},l.setOptions({plotOptions:{series:{states:{inactive:{enabled:!1}}}}});case 28:case"end":return e.stop()}}),e)}))),g.apply(this,arguments)}exports.initHighcharts=function(){return g.apply(this,arguments)};
|
|
2
2
|
//# sourceMappingURL=highcharts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highcharts.js","sources":["../../../../src/config/highcharts/highcharts.js"],"sourcesContent":["/* eslint-disable */\n// TODO: all the plugins should be checked, legacy code\n\n// [HIGHCHARTS-10-MIGRATION-TAG]: Find and delete/clean all places like this once the migration ends\nimport { HIGHCHARTS_V10_VERSION, HIGHCHARTS_V8_VERSION } from './constants';\n\nimport addContour from './highcharts-contour';\nimport {
|
|
1
|
+
{"version":3,"file":"highcharts.js","sources":["../../../../src/config/highcharts/highcharts.js"],"sourcesContent":["/* eslint-disable */\n// TODO: all the plugins should be checked, legacy code\n\n// [HIGHCHARTS-10-MIGRATION-TAG]: Find and delete/clean all places like this once the migration ends\nimport { HIGHCHARTS_V10_VERSION, HIGHCHARTS_V8_VERSION } from './constants';\n\nimport addContour from './highcharts-contour';\nimport { getHighchartsV10 } from './getHighchartsV10';\n\nimport DOMPurify from 'dompurify';\n\nconst stripHTMLRecurse = o => {\n if (typeof o === 'string') {\n return DOMPurify.sanitize(o);\n }\n\n if (typeof o === 'object' && o !== null)\n Object.entries(o).forEach(([key, value]) => {\n if (typeof value === 'string') {\n o[key] = DOMPurify.sanitize(o[key]);\n } else if (Array.isArray(value)) {\n value.forEach((item, i) => {\n o[key][i] = stripHTMLRecurse(item);\n });\n } else if (typeof value === 'object') {\n o[key] = stripHTMLRecurse(value);\n }\n });\n\n return o;\n};\n\nexport async function initHighcharts({ version = HIGHCHARTS_V10_VERSION } = {}) {\n if (![HIGHCHARTS_V8_VERSION, HIGHCHARTS_V10_VERSION].includes(version)) {\n throw new Error(`Invalid highcharts version: ${version}`);\n }\n\n const highchartsGetter =\n version === HIGHCHARTS_V8_VERSION\n ? (await import('./getHighchartsV8')).getHighchartsV8\n : getHighchartsV10;\n\n const {\n Highcharts,\n highchartsMore,\n HighchartsMulticolorSeries,\n addSolidGauge,\n addHeatmap,\n addBoost,\n addExporting,\n addXrange,\n addDumbbell,\n addPatternFill,\n addAnnotations,\n } = highchartsGetter();\n\n /**\n * NOTE: Highchart has a bug for pie chart in v8.1.2\n * issue link: https://github.com/highcharts/highcharts/issues/13710\n * workaround:\n * import Highcharts from 'highcharts';\n * window.Highcharts = Highcharts;\n */\n window.Highcharts = Highcharts;\n\n // NOTE: Temporary disable HTML filtering for duration of migration to v10, as this is the main breaking change in v10, should be removed after migration\n if (Highcharts.AST) {\n Highcharts.AST.bypassHTMLFiltering = true;\n\n // Adding needed custom attributes for some SVG icons\n Highcharts.AST.allowedAttributes.push('viewBox');\n Highcharts.AST.allowedAttributes.push('fill-rule');\n Highcharts.AST.allowedAttributes.push('clip-rule');\n }\n\n HighchartsMulticolorSeries(Highcharts);\n // NOTE: Highcharts patching. It should be done in one place before any chart in rendered\n // in order to avoid conflicts\n highchartsMore(Highcharts);\n addSolidGauge(Highcharts); // https://www.highcharts.com/docs/chart-and-series-types/angular-gauges\n addHeatmap(Highcharts); // https://www.highcharts.com/docs/chart-and-series-types/heatmap\n addBoost(Highcharts); // https://www.highcharts.com/docs/advanced-chart-features/boost-module\n addExporting(Highcharts); // https://www.highcharts.com/docs/export-module/export-module-overview\n addXrange(Highcharts); // https://www.highcharts.com/docs/advanced-chart-features/boost-module\n addDumbbell(Highcharts);\n addPatternFill(Highcharts);\n addContour(Highcharts);\n addAnnotations(Highcharts);\n\n // fix security issue for Highcharts 8\n // https://github.com/highcharts/highcharts/security/advisories/GHSA-8j65-4pcq-xq95\n const originalChartFn = Highcharts.chart;\n Highcharts.chart = function (container, options = {}, ...restParams) {\n return originalChartFn(container, stripHTMLRecurse(options), ...restParams);\n };\n\n /**\n * Adjust default highcharts effects globally for better use in our apps\n *\n * 1. Stop animation for inactive series\n * ref: https://api.highcharts.com/highcharts/plotOptions.series.states.inactive.enabled\n *\n */\n Highcharts.setOptions({\n plotOptions: {\n series: {\n states: {\n inactive: {\n enabled: false,\n },\n },\n },\n },\n });\n}\n"],"names":["stripHTMLRecurse","o","DOMPurify","sanitize","_typeof","Object","entries","forEach","_ref","_ref2","_slicedToArray","key","value","Array","isArray","item","i","_initHighcharts","_asyncToGenerator","_regeneratorRuntime","mark","_callee","_ref3","_ref3$version","version","highchartsGetter","_highchartsGetter","Highcharts","highchartsMore","HighchartsMulticolorSeries","addSolidGauge","addHeatmap","addBoost","addExporting","addXrange","addDumbbell","addPatternFill","addAnnotations","originalChartFn","_args","arguments","wrap","_context","prev","next","length","undefined","HIGHCHARTS_V10_VERSION","HIGHCHARTS_V8_VERSION","includes","Error","Promise","resolve","then","require","t0","sent","getHighchartsV8","getHighchartsV10","window","AST","bypassHTMLFiltering","allowedAttributes","push","addContour","chart","container","options","_len","restParams","_key","setOptions","plotOptions","series","states","inactive","enabled","stop","apply","this"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./highcharts/highcharts.js"),i=require("../clients/subscriptions.js");require("./extendNative.js"),exports.initGlobalDependencies=function(){var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./highcharts/highcharts.js"),i=require("../clients/subscriptions.js");require("./extendNative.js"),exports.initGlobalDependencies=function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=r.highchartsVersion,s=e.initHighcharts({version:t});return i.initializeSocketClient(),s};
|
|
2
2
|
//# sourceMappingURL=initGlobalDependencies.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"initGlobalDependencies.js","sources":["../../../src/config/initGlobalDependencies.js"],"sourcesContent":["import { initHighcharts } from '~/config/highcharts';\nimport { initializeSocketClient } from '~/clients/subscriptions';\nimport './extendNative.js';\n\n// [HIGHCHARTS-10-MIGRATION-TAG]: Find and delete/clean all places like this once the migration ends\nexport function initGlobalDependencies({ highchartsVersion } = {}) {\n initHighcharts({ version: highchartsVersion });\n initializeSocketClient();\n}\n"],"names":["_ref","arguments","length","undefined","highchartsVersion","initHighcharts","version","initializeSocketClient"],"mappings":"qNAKO,WAA4D,IAAAA,EAAAC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAJ,CAAE,EAAxBG,IAAAA,
|
|
1
|
+
{"version":3,"file":"initGlobalDependencies.js","sources":["../../../src/config/initGlobalDependencies.js"],"sourcesContent":["import { initHighcharts } from '~/config/highcharts';\nimport { initializeSocketClient } from '~/clients/subscriptions';\nimport './extendNative.js';\n\n// [HIGHCHARTS-10-MIGRATION-TAG]: Find and delete/clean all places like this once the migration ends\nexport function initGlobalDependencies({ highchartsVersion } = {}) {\n const highchartsReady = initHighcharts({ version: highchartsVersion });\n\n initializeSocketClient();\n\n return highchartsReady;\n}\n"],"names":["_ref","arguments","length","undefined","highchartsVersion","highchartsReady","initHighcharts","version","initializeSocketClient"],"mappings":"qNAKO,WAA4D,IAAAA,EAAAC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAJ,CAAE,EAAxBG,IAAAA,kBACjCC,EAAkBC,EAAAA,eAAe,CAAEC,QAASH,IAIlD,OAFAI,EAAAA,yBAEOH,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{memo as t,useRef as o,useState as n,useMemo as i,useEffect as a,createElement as l}from"react";import s from"react-dom";import u from"prop-types";import{get as c,sortBy as m}from"lodash";import{MuiThemeProvider as p}from"@material-ui/core/styles";import d from"./Map.css.js";import{mapbox as f}from"../../../../utils/index.js";import{darkTheme as h}from"../../../../config/theme/index.js";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/helpers/typeof";import"@babel/runtime/regenerator";import"highcharts";import"highcharts/highcharts-more";import"highcharts/modules/solid-gauge";import"highcharts/modules/heatmap";import"highcharts/modules/boost";import"highcharts/modules/exporting";import"highcharts/modules/xrange";import"highcharts/modules/dumbbell";import"highcharts/modules/pattern-fill";import"highcharts/modules/annotations";import"highcharts-multicolor-series";import"dompurify";import"@babel/runtime/helpers/createClass";import"@babel/runtime/helpers/classCallCheck";import"@babel/runtime/helpers/assertThisInitialized";import"@babel/runtime/helpers/inherits";import"@babel/runtime/helpers/possibleConstructorReturn";import"@babel/runtime/helpers/getPrototypeOf";import"@babel/runtime/helpers/toArray";import"@babel/runtime/helpers/toConsumableArray";import"../../../../clients/subscriptions/constants.js";import"../../../../clients/subscriptions.v1.js";import"../../../../clients/subscriptions/subscriptions-client.factory.js";import"../../../../config/extendNative.js";import"../../../../config/mapboxGl/index.js";import"mapbox-gl/dist/mapbox-gl.css";import{jsxs as b,jsx as g}from"react/jsx-runtime";import y from"mapbox-gl";function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function F(r){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?v(Object(o),!0).forEach((function(t){e(r,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):v(Object(o)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}))}return r}var j=f.isValidCoordinates,w=["#FF00FF","#F5BD80","#FF0000","#0080FF","#FF8000","#58ACFA","#FA58F4","#40FF00","#4B8A08","#40FF00","#D8F781"],O=[29.749907,-95.358421],C={type:"FeatureCollection",features:[]},P=function(e){var t=r(e,2),o=t[0];return[t[1],o]};function x(t){var u=t.subjectWell,f=t.wells,v=t.offsetWells,x=t.radius,S=t.subjectWellMarkerSize,M=t.wellMarkerSize,D=t.popUpFormatter,N=t.coordsDataPath,k=o(null),I=o(null),W=o(null),L=o(null),B=o(null),z=o(),A=n(!1),T=r(A,2),E=T[0],q=T[1],R=i((function(){return f.filter((function(e){return!u||u.id!==e.id}))}),[u,f]),U=i((function(){return u&&c(u,N)}),[u,N]),G=i((function(){var r=[],t=!1;R.forEach((function(e){"Null"===e.formation?t=!0:u&&u.formation===e.formation||r.includes(e.formation)||r.push(e.formation)}));var o=u?[u.formation].concat(m(r)):m(r);t&&!o.includes("Null")&&o.push("Null");var n=o.reduce((function(r,t,o){return F(F({},r),{},e({},t,w[o%w.length]))}),{});return[o,n]}),[u,R]),V=r(G,2),Z=V[0],_=V[1];return a((function(){I.current=new y.Map({container:k.current,style:"mapbox://styles/mapbox/dark-v9",center:P(O),zoom:1,attributionControl:!1,scrollZoom:!1}),I.current.addControl(new y.NavigationControl({showCompass:!1}),"bottom-right"),I.current.on("load",(function(){I.current.addSource("radius-circle",{type:"geojson",data:C}),I.current.addLayer({id:"radius-circle",type:"fill",source:"radius-circle",paint:{"fill-color":"#03BCD4","fill-opacity":.2}}),I.current.addSource("wells",{type:"geojson",data:C}),I.current.addLayer({id:"wells",type:"circle",source:"wells",paint:{"circle-radius":["get","radius"],"circle-color":["get","color"],"circle-opacity":["get","opacity"]}}),q(!0)}));var e=I.current;return function(){e.remove(),I.current=null,W.current=null,L.current=null}}),[]),a((function(){if(I.current&&E){if(!U)return I.current.getSource("radius-circle").setData(C),void(W.current=null);var e=function(e,t){for(var o=r(e,2),n=o[0],i=o[1],a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:64,l=[],s=t/(111320*Math.cos(n*Math.PI/180)),u=t/110574,c=0;c<=a;c+=1){var m=c/a*(2*Math.PI);l.push([i+s*Math.cos(m),n+u*Math.sin(m)])}return l}(U,1609.34*x);I.current.getSource("radius-circle").setData({type:"Feature",geometry:{type:"Polygon",coordinates:[e]}}),W.current=e.reduce((function(e,r){return e.extend(r)}),new y.LngLatBounds)}}),[x,U,E]),a((function(){var e;if(I.current&&E){var r=z.current;z.current=f,null===(e=B.current)||void 0===e||e.remove();var t=v.map((function(e){return e.id})),o=[],n={},i=new y.LngLatBounds;f.forEach((function(e){var r=c(e,N);if(r&&j(r)){var a=u&&u.id===e.id,l=t.includes(e.id),s=a?S:M,m=a||l?"#00FFFF":_[e.formation],p=a||l?1:.3;n[e.id]=e,i.extend(P(r)),o.push({type:"Feature",geometry:{type:"Point",coordinates:P(r)},properties:{wellId:e.id,radius:s,color:m,opacity:p}})}})),I.current.getSource("wells").setData({type:"FeatureCollection",features:o}),L.current=o.length?i:null;var a=I.current,m=null,d=function(e){a.getCanvas().style.cursor="pointer";var r=n[e.features[0].properties.wellId];if(r&&r.id!==m&&(m=r.id,D)){var t=document.createElement("div"),o=l(D,{well:r,color:_[r.formation]});s.render(g(p,{theme:h,children:o}),t),B.current||(B.current=new y.Popup({closeButton:!1,maxWidth:"none"})),B.current.setLngLat(P(c(r,N))).setDOMContent(t).addTo(a)}},b=function(){m=null,a.getCanvas().style.cursor=""};return a.on("mousemove","wells",d),a.on("mouseleave","wells",b),setTimeout((function(){I.current&&W.current&&f!==r&&I.current.fitBounds(W.current,{padding:5})}),500),function(){a.off("mousemove","wells",d),a.off("mouseleave","wells",b)}}}),[u,f,v,_,E]),a((function(){setTimeout((function(){u?I.current&&W.current&&I.current.fitBounds(W.current,{padding:5}):I.current&&L.current&&I.current.fitBounds(L.current)}),500)}),[x,u,E]),b("div",{className:d.map,children:[g("div",{className:d.mapMain,ref:k}),b("div",{className:d.mapFooter,children:[v&&b("div",{className:d.mapFooterItem,children:[g("div",{className:d.mapFooterItemSquare,style:{backgroundColor:"#00FFFF"}}),g("div",{className:d.mapFooterItemLabel,children:"Selected Offset Wells"})]}),Z.map((function(e){return b("div",{className:d.mapFooterItem,children:[g("div",{className:d.mapFooterItemSquare,style:{backgroundColor:_[e]}}),g("div",{className:d.mapFooterItemLabel,children:e})]},e)}))]})]})}x.propTypes={subjectWell:u.shape({id:u.number,formation:u.string}),wells:u.arrayOf(u.shape({})).isRequired,offsetWells:u.arrayOf(u.shape({})),radius:u.number.isRequired,subjectWellMarkerSize:u.number,wellMarkerSize:u.number,popUpFormatter:u.func,coordsDataPath:u.string},x.defaultProps={subjectWell:null,subjectWellMarkerSize:10,wellMarkerSize:5,popUpFormatter:null,coordsDataPath:"settings.top_hole.coordinates",offsetWells:null};var S=t(x);export{S as default};
|
|
2
2
|
//# sourceMappingURL=Map.js.map
|
|
@@ -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 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 10;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#00FFFF';\nconst COLORS = [\n '#FF00FF',\n '#F5BD80',\n '#FF0000',\n '#0080FF',\n '#FF8000',\n '#58ACFA',\n '#FA58F4',\n '#40FF00',\n '#4B8A08',\n '#40FF00',\n '#D8F781',\n];\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n subjectWell,\n wells,\n offsetWells,\n radius,\n subjectWellMarkerSize,\n wellMarkerSize,\n popUpFormatter,\n coordsDataPath,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef(null);\n const radiusCircleBoundsRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const restWells = useMemo(() => {\n return wells.filter(well => !subjectWell || subjectWell.id !== well.id);\n }, [subjectWell, wells]);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Get well marker colors according to its target formation\n const [formations, colorDict] = useMemo(() => {\n // NOTE: Determine well marker colors\n const restFormations = [];\n let hasNullFormation = false;\n\n restWells.forEach(well => {\n if (well.formation === 'Null') {\n hasNullFormation = true;\n } else if (\n (!subjectWell || subjectWell.formation !== well.formation) &&\n !restFormations.includes(well.formation)\n ) {\n restFormations.push(well.formation);\n }\n });\n\n const sortedFormations = subjectWell\n ? [subjectWell.formation].concat(sortBy(restFormations))\n : sortBy(restFormations);\n\n if (hasNullFormation && !sortedFormations.includes('Null')) {\n sortedFormations.push('Null');\n }\n\n const colors = sortedFormations.reduce(\n (result, item, idx) => ({\n ...result,\n [item]: COLORS[idx % COLORS.length],\n }),\n {}\n );\n\n return [sortedFormations, colors];\n }, [subjectWell, restWells]);\n\n // NOTE: Initialize map\n useEffect(() => {\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack)\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': ['get', 'color'],\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n setIsMapReady(true);\n });\n\n const map = mapRef.current;\n return () => {\n map.remove();\n mapRef.current = null;\n radiusCircleBoundsRef.current = null;\n markersBoundsRef.current = null;\n };\n }, []);\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n radiusCircleBoundsRef.current = null;\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n radiusCircleBoundsRef.current = ring.reduce(\n (bounds, coord) => bounds.extend(coord),\n new mapboxgl.LngLatBounds()\n );\n }, [radius, subjectWellCoords, isMapReady]);\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n popupRef.current?.remove();\n\n const offsetWellIds = offsetWells.map(well => well.id);\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n wells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n const color = isWellSubject || isWellOffset ? OFFSET_WELL_COLOR : colorDict[well.formation];\n const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { wellId: well.id, radius: r, color, opacity },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well || well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n if (popUpFormatter) {\n // Container to put React generated content in.\n const popUpContainer = document.createElement('div');\n const popUpContent = createElement(popUpFormatter, {\n well,\n color: colorDict[well.formation],\n });\n // NOTE: Custom popup may have buttons\n ReactDOM.render(\n <MuiThemeProvider theme={theme.darkTheme}>{popUpContent}</MuiThemeProvider>,\n popUpContainer\n );\n\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current\n .setLngLat(toLngLat(get(well, coordsDataPath)))\n .setDOMContent(popUpContainer)\n .addTo(map);\n }\n };\n\n const handleMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleMouseLeave);\n\n setTimeout(() => {\n if (mapRef.current && radiusCircleBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, { padding: 5 });\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleMouseLeave);\n };\n }, [subjectWell, wells, offsetWells, colorDict, isMapReady]);\n\n useEffect(() => {\n setTimeout(() => {\n if (subjectWell) {\n if (mapRef.current && radiusCircleBoundsRef.current) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, {\n padding: 5,\n });\n }\n } else if (mapRef.current && markersBoundsRef.current) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n }, [radius, subjectWell, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n\n <div className={styles.mapFooter}>\n {offsetWells && (\n <div className={styles.mapFooterItem}>\n <div\n className={styles.mapFooterItemSquare}\n style={{ backgroundColor: OFFSET_WELL_COLOR }}\n />\n <div className={styles.mapFooterItemLabel}>Selected Offset Wells</div>\n </div>\n )}\n\n {formations.map(item => (\n <div className={styles.mapFooterItem} key={item}>\n <div\n className={styles.mapFooterItemSquare}\n style={{ backgroundColor: colorDict[item] }}\n />\n <div className={styles.mapFooterItemLabel}>{item}</div>\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nWellsMap.propTypes = {\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n subjectWellMarkerSize: PropTypes.number,\n wellMarkerSize: PropTypes.number,\n popUpFormatter: PropTypes.func,\n coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n popUpFormatter: null,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","COLORS","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","popUpFormatter","coordsDataPath","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","restWells","useMemo","filter","well","id","subjectWellCoords","get","restFormations","hasNullFormation","forEach","formation","includes","push","sortedFormations","concat","sortBy","colors","reduce","result","item","idx","length","_useMemo2","_useMemo","formations","colorDict","useEffect","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","source","paint","map","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","sin","makeCirclePolygon","geometry","coordinates","bounds","coord","extend","LngLatBounds","_popupRef$current","prevWells","offsetWellIds","wellsById","coords","isWellSubject","isWellOffset","r","color","opacity","properties","wellId","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","MuiThemeProvider","theme","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","setTimeout","fitBounds","padding","off","_jsxs","className","styles","mapMain","ref","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 ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { get, sortBy } from 'lodash';\nimport { MuiThemeProvider } from '@material-ui/core/styles';\n\nimport styles from './Map.css';\n\nimport { mapbox } from '~/utils';\nimport { theme } from '~/config';\nimport mapboxgl from '~/config/mapboxGl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst { isValidCoordinates } = mapbox;\n\nconst RADIUS_CIRCLE_COLOR = '#03BCD4';\nconst METERS_IN_MILE = 1609.34;\nconst DEFAULT_SUBJECT_WELL_MARKER_SIZE = 10;\nconst DEFAULT_WELL_MARKER_SIZE = 5;\nconst OFFSET_WELL_COLOR = '#00FFFF';\nconst COLORS = [\n '#FF00FF',\n '#F5BD80',\n '#FF0000',\n '#0080FF',\n '#FF8000',\n '#58ACFA',\n '#FA58F4',\n '#40FF00',\n '#4B8A08',\n '#40FF00',\n '#D8F781',\n];\n\nconst DEFAULT_COORDS = [29.749907, -95.358421]; // TX coordinates\n\nconst RADIUS_CIRCLE_ID = 'radius-circle';\nconst WELLS_ID = 'wells';\nconst EMPTY_FEATURE_COLLECTION = { type: 'FeatureCollection', features: [] };\n\nconst toLngLat = ([lat, lng]) => [lng, lat];\n\n// NOTE: mapbox-gl has no geographic-radius circle primitive, so approximate it with a polygon\nconst makeCirclePolygon = ([lat, lng], radiusMeters, points = 64) => {\n const ring = [];\n const distanceX = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n const distanceY = radiusMeters / 110574;\n for (let i = 0; i <= points; i += 1) {\n const theta = (i / points) * (2 * Math.PI);\n ring.push([lng + distanceX * Math.cos(theta), lat + distanceY * Math.sin(theta)]);\n }\n return ring;\n};\n\n// eslint-disable-next-line no-unused-vars\nfunction WellsMap({\n subjectWell,\n wells,\n offsetWells,\n radius,\n subjectWellMarkerSize,\n wellMarkerSize,\n popUpFormatter,\n coordsDataPath,\n}) {\n const mapContainerRef = useRef(null);\n const mapRef = useRef(null);\n const radiusCircleBoundsRef = useRef(null);\n const markersBoundsRef = useRef(null);\n const popupRef = useRef(null);\n const prevWellsRef = useRef();\n const [isMapReady, setIsMapReady] = useState(false);\n\n const restWells = useMemo(() => {\n return wells.filter(well => !subjectWell || subjectWell.id !== well.id);\n }, [subjectWell, wells]);\n\n const subjectWellCoords = useMemo(() => {\n return subjectWell && get(subjectWell, coordsDataPath);\n }, [subjectWell, coordsDataPath]);\n\n // NOTE: Get well marker colors according to its target formation\n const [formations, colorDict] = useMemo(() => {\n // NOTE: Determine well marker colors\n const restFormations = [];\n let hasNullFormation = false;\n\n restWells.forEach(well => {\n if (well.formation === 'Null') {\n hasNullFormation = true;\n } else if (\n (!subjectWell || subjectWell.formation !== well.formation) &&\n !restFormations.includes(well.formation)\n ) {\n restFormations.push(well.formation);\n }\n });\n\n const sortedFormations = subjectWell\n ? [subjectWell.formation].concat(sortBy(restFormations))\n : sortBy(restFormations);\n\n if (hasNullFormation && !sortedFormations.includes('Null')) {\n sortedFormations.push('Null');\n }\n\n const colors = sortedFormations.reduce(\n (result, item, idx) => ({\n ...result,\n [item]: COLORS[idx % COLORS.length],\n }),\n {}\n );\n\n return [sortedFormations, colors];\n }, [subjectWell, restWells]);\n\n // NOTE: Initialize map\n useEffect(() => {\n mapRef.current = new mapboxgl.Map({\n container: mapContainerRef.current,\n style: 'mapbox://styles/mapbox/dark-v9',\n center: toLngLat(DEFAULT_COORDS),\n zoom: 1,\n attributionControl: false,\n scrollZoom: false,\n });\n\n mapRef.current.addControl(\n new mapboxgl.NavigationControl({ showCompass: false }),\n 'bottom-right'\n );\n\n // NOTE: Sources/layers can only be added once the style has loaded.\n // The radius circle layer is added first so well markers render above it (was bringToBack)\n mapRef.current.on('load', () => {\n mapRef.current.addSource(RADIUS_CIRCLE_ID, {\n type: 'geojson',\n data: EMPTY_FEATURE_COLLECTION,\n });\n mapRef.current.addLayer({\n id: RADIUS_CIRCLE_ID,\n type: 'fill',\n source: RADIUS_CIRCLE_ID,\n paint: {\n 'fill-color': RADIUS_CIRCLE_COLOR,\n 'fill-opacity': 0.2,\n },\n });\n\n mapRef.current.addSource(WELLS_ID, { type: 'geojson', data: EMPTY_FEATURE_COLLECTION });\n mapRef.current.addLayer({\n id: WELLS_ID,\n type: 'circle',\n source: WELLS_ID,\n paint: {\n 'circle-radius': ['get', 'radius'],\n 'circle-color': ['get', 'color'],\n 'circle-opacity': ['get', 'opacity'],\n },\n });\n\n setIsMapReady(true);\n });\n\n const map = mapRef.current;\n return () => {\n map.remove();\n mapRef.current = null;\n radiusCircleBoundsRef.current = null;\n markersBoundsRef.current = null;\n };\n }, []);\n\n // NOTE: Radius circle\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return;\n }\n\n if (!subjectWellCoords) {\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData(EMPTY_FEATURE_COLLECTION);\n radiusCircleBoundsRef.current = null;\n return;\n }\n\n const ring = makeCirclePolygon(subjectWellCoords, radius * METERS_IN_MILE);\n mapRef.current.getSource(RADIUS_CIRCLE_ID).setData({\n type: 'Feature',\n geometry: { type: 'Polygon', coordinates: [ring] },\n });\n radiusCircleBoundsRef.current = ring.reduce(\n (bounds, coord) => bounds.extend(coord),\n new mapboxgl.LngLatBounds()\n );\n }, [radius, subjectWellCoords, isMapReady]);\n\n // NOTE: Well markers\n useEffect(() => {\n if (!mapRef.current || !isMapReady) {\n return undefined;\n }\n\n const prevWells = prevWellsRef.current;\n prevWellsRef.current = wells;\n\n popupRef.current?.remove();\n\n const offsetWellIds = offsetWells.map(well => well.id);\n\n const features = [];\n const wellsById = {};\n const bounds = new mapboxgl.LngLatBounds();\n wells.forEach(well => {\n const coords = get(well, coordsDataPath);\n\n if (coords && isValidCoordinates(coords)) {\n const isWellSubject = subjectWell && subjectWell.id === well.id;\n const isWellOffset = offsetWellIds.includes(well.id);\n const r = isWellSubject ? subjectWellMarkerSize : wellMarkerSize;\n const color = isWellSubject || isWellOffset ? OFFSET_WELL_COLOR : colorDict[well.formation];\n const opacity = isWellSubject || isWellOffset ? 1 : 0.3;\n\n wellsById[well.id] = well;\n bounds.extend(toLngLat(coords));\n features.push({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: toLngLat(coords) },\n properties: { wellId: well.id, radius: r, color, opacity },\n });\n }\n });\n\n mapRef.current.getSource(WELLS_ID).setData({ type: 'FeatureCollection', features });\n markersBoundsRef.current = features.length ? bounds : null;\n\n const map = mapRef.current;\n let hoveredWellId = null;\n\n const handleMouseMove = e => {\n map.getCanvas().style.cursor = 'pointer';\n\n const well = wellsById[e.features[0].properties.wellId];\n if (!well || well.id === hoveredWellId) {\n return;\n }\n hoveredWellId = well.id;\n\n if (popUpFormatter) {\n // Container to put React generated content in.\n const popUpContainer = document.createElement('div');\n const popUpContent = createElement(popUpFormatter, {\n well,\n color: colorDict[well.formation],\n });\n // NOTE: Custom popup may have buttons\n ReactDOM.render(\n <MuiThemeProvider theme={theme.darkTheme}>{popUpContent}</MuiThemeProvider>,\n popUpContainer\n );\n\n if (!popupRef.current) {\n popupRef.current = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' });\n }\n popupRef.current\n .setLngLat(toLngLat(get(well, coordsDataPath)))\n .setDOMContent(popUpContainer)\n .addTo(map);\n }\n };\n\n const handleMouseLeave = () => {\n hoveredWellId = null;\n map.getCanvas().style.cursor = '';\n };\n\n map.on('mousemove', WELLS_ID, handleMouseMove);\n map.on('mouseleave', WELLS_ID, handleMouseLeave);\n\n setTimeout(() => {\n if (mapRef.current && radiusCircleBoundsRef.current && wells !== prevWells) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, { padding: 5 });\n }\n }, 500);\n\n return () => {\n map.off('mousemove', WELLS_ID, handleMouseMove);\n map.off('mouseleave', WELLS_ID, handleMouseLeave);\n };\n }, [subjectWell, wells, offsetWells, colorDict, isMapReady]);\n\n useEffect(() => {\n setTimeout(() => {\n if (subjectWell) {\n if (mapRef.current && radiusCircleBoundsRef.current) {\n mapRef.current.fitBounds(radiusCircleBoundsRef.current, {\n padding: 5,\n });\n }\n } else if (mapRef.current && markersBoundsRef.current) {\n mapRef.current.fitBounds(markersBoundsRef.current);\n }\n }, 500);\n }, [radius, subjectWell, isMapReady]);\n\n return (\n <div className={styles.map}>\n <div className={styles.mapMain} ref={mapContainerRef} />\n\n <div className={styles.mapFooter}>\n {offsetWells && (\n <div className={styles.mapFooterItem}>\n <div\n className={styles.mapFooterItemSquare}\n style={{ backgroundColor: OFFSET_WELL_COLOR }}\n />\n <div className={styles.mapFooterItemLabel}>Selected Offset Wells</div>\n </div>\n )}\n\n {formations.map(item => (\n <div className={styles.mapFooterItem} key={item}>\n <div\n className={styles.mapFooterItemSquare}\n style={{ backgroundColor: colorDict[item] }}\n />\n <div className={styles.mapFooterItemLabel}>{item}</div>\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nWellsMap.propTypes = {\n subjectWell: PropTypes.shape({\n id: PropTypes.number,\n formation: PropTypes.string,\n }),\n wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n offsetWells: PropTypes.arrayOf(PropTypes.shape({})),\n radius: PropTypes.number.isRequired,\n subjectWellMarkerSize: PropTypes.number,\n wellMarkerSize: PropTypes.number,\n popUpFormatter: PropTypes.func,\n coordsDataPath: PropTypes.string,\n};\n\nWellsMap.defaultProps = {\n subjectWell: null,\n subjectWellMarkerSize: DEFAULT_SUBJECT_WELL_MARKER_SIZE,\n wellMarkerSize: DEFAULT_WELL_MARKER_SIZE,\n popUpFormatter: null,\n coordsDataPath: 'settings.top_hole.coordinates',\n offsetWells: null,\n};\n\nexport default memo(WellsMap);\n"],"names":["isValidCoordinates","mapbox","COLORS","DEFAULT_COORDS","EMPTY_FEATURE_COLLECTION","type","features","toLngLat","_ref","_ref2","_slicedToArray","lat","WellsMap","_ref5","subjectWell","wells","offsetWells","radius","subjectWellMarkerSize","wellMarkerSize","popUpFormatter","coordsDataPath","mapContainerRef","useRef","mapRef","radiusCircleBoundsRef","markersBoundsRef","popupRef","prevWellsRef","useState","_useState2","_useState","isMapReady","setIsMapReady","restWells","useMemo","filter","well","id","subjectWellCoords","get","restFormations","hasNullFormation","forEach","formation","includes","push","sortedFormations","concat","sortBy","colors","reduce","result","item","idx","length","_useMemo2","_useMemo","formations","colorDict","useEffect","current","mapboxgl","Map","container","style","center","zoom","attributionControl","scrollZoom","addControl","NavigationControl","showCompass","on","addSource","data","addLayer","source","paint","map","remove","getSource","setData","ring","_ref3","radiusMeters","_ref4","lng","points","distanceX","Math","cos","PI","distanceY","i","theta","sin","makeCirclePolygon","geometry","coordinates","bounds","coord","extend","LngLatBounds","_popupRef$current","prevWells","offsetWellIds","wellsById","coords","isWellSubject","isWellOffset","r","color","opacity","properties","wellId","hoveredWellId","handleMouseMove","e","getCanvas","cursor","popUpContainer","document","createElement","popUpContent","ReactDOM","render","_jsx","MuiThemeProvider","theme","children","Popup","closeButton","maxWidth","setLngLat","setDOMContent","addTo","handleMouseLeave","setTimeout","fitBounds","padding","off","_jsxs","className","styles","mapMain","ref","mapFooter","mapFooterItem","mapFooterItemSquare","backgroundColor","mapFooterItemLabel","propTypes","PropTypes","shape","number","string","arrayOf","isRequired","func","defaultProps","memo"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{useState as t,useEffect as i,useRef as o}from"react";import n from"react-dom";import{isEqual as s}from"lodash";import{MuiThemeProvider as l}from"@material-ui/core/styles";import m from"../components/FiltersToggler.js";import{getStartComponent as u,getMiddleComponent as a,getEndComponents as p}from"../utils.js";import{LARGE_SIZE_LAYOUT as c,MEDIUM_SIZE_LAYOUT as h,SMALL_SIZE_LAYOUT as d}from"../constants.js";import{darkTheme as f}from"../../../config/theme/index.js";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/helpers/typeof";import"@babel/runtime/regenerator";import"highcharts";import"highcharts/highcharts-more";import"highcharts/modules/solid-gauge";import"highcharts/modules/heatmap";import"highcharts/modules/boost";import"highcharts/modules/exporting";import"highcharts/modules/xrange";import"highcharts/modules/dumbbell";import"highcharts/modules/pattern-fill";import"highcharts/modules/annotations";import"highcharts-multicolor-series";import"dompurify";import"@babel/runtime/helpers/createClass";import"@babel/runtime/helpers/classCallCheck";import"@babel/runtime/helpers/assertThisInitialized";import"@babel/runtime/helpers/inherits";import"@babel/runtime/helpers/possibleConstructorReturn";import"@babel/runtime/helpers/getPrototypeOf";import"@babel/runtime/helpers/toArray";import"@babel/runtime/helpers/toConsumableArray";import"../../../clients/subscriptions/constants.js";import"../../../clients/subscriptions.v1.js";import"../../../clients/subscriptions/subscriptions-client.factory.js";import"../../../config/extendNative.js";import{jsx as b}from"react/jsx-runtime";function v(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 y(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?v(Object(i),!0).forEach((function(t){e(r,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):v(Object(i)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(i,e))}))}return r}function g(e,o,n,s){var l=t(null),m=r(l,2),f=m[0],b=m[1];return i((function(){if(s&&o){var r=u(e),t=a(e),i=p(e),l=r&&t&&!i,m=r&&!t&&i,f=r&&t&&i;if(r&&!t&&!i){var v=o[r.key];if(v<=s)return void b(c);if(v<=s/2)return void b(h)}else if(l||m){var y=o[r.key],g=l?o[t.key]:o[i.key];if(y+g<=s)return void b(c);if(n+g<=s)return void b(h)}else if(f){var j=o[r.key],O=o[t.key],k=o[i.key];if(j+O+k<=s)return void b(c);if(n+O+k<=s)return void b(h);if(n+k<=s)return void b(d)}b(d)}}),[o,s]),f}function j(n){var l=o(),m=t(null),u=r(m,2),a=u[0],p=u[1],c=o({}),h=n.filter((function(e){return!!e})),d=b("div",{ref:l,style:{position:"absolute",width:0,height:0,overflow:"hidden"},children:h.map((function(e,r){return b("div",{"data-key":null==e?void 0:e.key,style:{position:"absolute"},children:e},r)}))});return i((function(){var r;if(!s(h,c.current)){var t=Array.from(null===(r=l.current)||void 0===r?void 0:r.childNodes).reduce((function(r,t){var i,o=null==t||null===(i=t.getAttribute)||void 0===i?void 0:i.call(t,"data-key"),n=null==t?void 0:t.getBoundingClientRect().width;return y(y({},r),{},e({},o,n))}),{});Object.values(t).length===h.length&&(s(a,t)||p(t)),c.current=h}})),{componentsWidth:a,hiddenElements:d}}function O(){var e=t(null),o=r(e,2),s=o[0],u=o[1];return i((function(){var e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",document.body.appendChild(e),n.render(b(l,{theme:f,children:b(m,{})}),e,(function(){var r=e.getBoundingClientRect();e.remove(),u(r.width)}))}),[]),s}export{O as useAppFilterTogglerWidth,j as useComonentsWidth,g as useFilterLayout};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|